/* ManaPact: responsive safeguards shared by the catalogue, workspace and community. */
/* Keep the decorative glow inside its section; it previously widened the page. */
.visitor-hero::before{inset-inline:0}
.main,.visitor-main,.shell,.deckspace-content,.community-public-profile,.social-chat-thread,.table-board .game-table{min-width:0}
.community-public-profile{grid-template-columns:minmax(0,1fr)}
.community-public-profile>*{min-width:0;max-width:100%}
.brand>span,.visitor-brand>span{min-width:0}
.brand small,.visitor-brand small{white-space:normal;overflow-wrap:normal;line-height:1.55}
.experience-tabs,.deckspace-tabs,.social-tabs,.social-segmented{max-width:100%;overscroll-behavior-inline:contain;scroll-padding-inline:12px}
.experience-tabs>button,.deckspace-tabs>button,.social-tabs>button{flex-shrink:0}
.modal,.game-decision{max-height:calc(100dvh - 40px);overscroll-behavior-y:contain;scrollbar-gutter:stable}
.modal-header h2,.modal-header p,.community-public-profile p,.community-profile-decks button,.social-message,.deckspace-heading h1{overflow-wrap:anywhere}
.modal :where(input,select,textarea),.main :where(input,select,textarea),.visitor-main :where(input,select,textarea){max-width:100%;min-width:0}
textarea{resize:vertical}
.modal-actions{flex-wrap:wrap}
.modal-actions>.button{white-space:normal;min-width:0}
.table-board .game-hand-cards,.table-board .game-zone-cards{overscroll-behavior-inline:contain;scrollbar-width:thin;scroll-padding-inline:12px}
.table-board .game-card{scroll-margin-inline:12px}

@media(max-width:1100px){
  .experience-brand-row .brand{align-items:flex-start}
  .experience-brand-row .brand img{flex-shrink:0}
  .experience-brand-row .brand small{max-width:175px;font-size:10px}
  .intro,.section-head,.social-section-title{gap:16px;flex-wrap:wrap}
  .intro>div,.section-head>div{min-width:0}
  .table-board{grid-template-columns:minmax(0,1fr) minmax(260px,30%)}
  .table-board .game-field-title{flex-wrap:wrap;gap:8px}
  .table-action-layout,.table-turn-status{gap:12px;flex-wrap:wrap}
}

@media(max-width:850px){
  /* All cards and every action remain available in their own scrolling regions. */
  .table-board{display:block}
  .table-inspector-shell.is-open{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));max-height:84dvh;overscroll-behavior-y:contain}
  .table-inspector-close{width:44px;height:44px;flex-shrink:0}
  .table-board .game-zone-row{flex-wrap:wrap}
  .table-board .game-zone-button,.table-board .game-small-actions .button{min-height:40px}
  .table-board .game-mana-pool{flex-wrap:wrap;gap:10px}
  .table-board .game-mana-pool>div{max-width:100%;gap:3px;flex-wrap:wrap}
  .table-board .game-mana-pool button{min-width:38px;min-height:44px}
  .table-phase-track{overflow-x:auto;overscroll-behavior-inline:contain}
  .table-phase-track>span{flex-shrink:0;min-height:38px}
  .training-language{flex-wrap:wrap;align-items:stretch}
  .training-language label{flex-basis:100%}
  .training-language .button{min-height:44px}
  .game-decision-backdrop{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .game-decision{max-height:calc(100dvh - 24px)}
}

@media(max-width:720px){
  html{scroll-padding-top:80px}
  /* 16px fields prevent the automatic input zoom on mobile browsers. */
  .main input:not([type=checkbox]):not([type=radio]),.main select,.main textarea,
  .visitor-main input:not([type=checkbox]):not([type=radio]),.visitor-main select,.visitor-main textarea,
  .modal input:not([type=checkbox]):not([type=radio]),.modal select,.modal textarea,
  .game-decision input:not([type=checkbox]):not([type=radio]),.game-decision select,.game-decision textarea{font-size:16px;line-height:1.4}
  .main input:not([type=checkbox]):not([type=radio]),.main select,
  .visitor-main input:not([type=checkbox]):not([type=radio]),.visitor-main select,
  .modal input:not([type=checkbox]):not([type=radio]),.modal select{min-height:46px}
  .button,.chip,.icon-button,.modal-header .icon-button,.collection-layout-switch button,.deckspace-segment button,.social-tabs button,.training-tabs button{min-height:44px}
  .icon-button,.modal-header .icon-button{min-width:44px;flex-shrink:0}
  .visitor-brand small{font-size:9px;letter-spacing:0;max-width:155px;line-height:1.45}
  .visitor-header-inner{column-gap:12px}
  .experience-topbar{padding-inline:16px;gap:12px}
  .experience-topbar .breadcrumb{min-width:0;overflow-wrap:anywhere}
  .experience-topbar .top-actions{gap:8px;flex-shrink:0}
  .experience-sidebar{height:100dvh;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));overscroll-behavior-y:contain}
  .experience-menu-close{min-width:44px;min-height:44px}
  .experience-brand-row .brand{font-size:20px}
  .experience-brand-row .brand small{font-size:10px;max-width:185px}
  .main .form-help,.modal .form-help,.main .page-description,.visitor-main .page-description{font-size:12px;line-height:1.65}
  .modal-backdrop{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));align-items:center}
  .modal{padding:20px;max-height:calc(100dvh - 24px);border-radius:16px}
  .modal-header{gap:12px}
  .modal-header h2{font-size:22px;line-height:1.3}
  .modal-header p{font-size:12px;line-height:1.55}
  .modal-actions{gap:10px}
  .modal-actions>.button{flex:1 1 125px}
  #profile-collection-form{flex-wrap:wrap}
  #profile-collection-form>.search-field{flex:1 1 220px;min-width:0}
  #profile-collection-form>.button{flex:1}
  .experience-action-menu[open]{position:static;flex-basis:100%}
  .experience-action-menu[open]>.experience-disclosure-body{position:static;width:100%;max-width:none;margin-top:8px;box-shadow:none}
  .deckspace-header-actions{flex-wrap:wrap}
  .deckspace-header-actions>.button{white-space:normal;line-height:1.4}
  .deckspace-tabs{overflow-x:auto}
  .deckspace-tabs>button{min-width:85px;flex:1 0 auto}
  .deckspace-list-toolbar .deckspace-search{min-width:0;width:100%}
  .deckspace-card-name,.collection-row .name{overflow-wrap:anywhere}
  .card-caption{align-items:flex-start;gap:8px}
  .card-caption>b{min-width:0;overflow-wrap:anywhere}
  .card-caption button{width:44px;height:44px;flex:0 0 44px}
  .collection-tile-bottom{flex-wrap:wrap;gap:8px}
  .collection-tile .qty,.collection-row .qty{gap:5px;flex-shrink:0}
  .collection-tile .qty button,.collection-card-grid.is-compact .qty button,.collection-row .qty button{width:44px;height:44px;font-size:17px}
  .collection-tile .qty span,.collection-row .qty span{min-width:16px;font-size:13px}
  .collection-layout-switch{max-width:100%;margin-left:0}
  .collection-list-enhanced .market-card-panel{flex-basis:calc(100% - 52px);max-width:calc(100% - 52px);margin-inline-start:52px}
  .collection-sort-label select{max-width:100%;flex:1}
  .collection-filter-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collection-filter-fields>label{min-width:0}
  .social-message-log{height:min(440px,55dvh);min-height:220px}
  .social-chat-thread-head{flex-wrap:wrap;gap:10px}
  .social-chat-compose textarea{min-height:90px}
  .social-compose-footer{flex-wrap:wrap;gap:10px}
  .social-compose-footer>.button{margin-left:auto}
}

@media(max-width:480px){
  .visitor-hero{grid-template-columns:minmax(0,1fr)}
  .visitor-hero h1{font-size:clamp(34px,11.5vw,43px)}
  .collection-card-grid,.collection-card-grid.is-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
  .collection-filter-panel{padding:15px}
  .collection-filter-fields{gap:12px}
  .collection-subtype-field{grid-column:1/-1}
  .collection-tile .qty,.collection-card-grid.is-compact .qty{width:100%;justify-content:space-between}
  .market-mini-row{flex-wrap:wrap;gap:4px}
  .catalog-print-label{font-size:12px;gap:4px 8px}
  .social-filter-bar label{flex:1 1 100%;min-width:0}
  .social-filter-bar .button{white-space:normal}
  .table-board .game-player-badge{min-width:0;max-width:100%}
  .table-board .game-player-name{min-width:0;overflow-wrap:anywhere}
  .table-board .game-player-name small{font-size:11px}
  .table-board .game-field-title>small{max-width:none;text-align:left}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.modal,.table-inspector-shell{scroll-behavior:auto}}