/* Shared mobile canvas: section backgrounds reach the viewport; copy keeps gutters. */
@media(max-width:1050px){
 body>main.collection-main,body>main.shop-main,body>main.cart-main,
 body>main.deck-main,body>main.account-main,body>main.royalty-main,
 body>main.online-main,body>main.checkout-main,body>main.physical-checkout,
 body>main.rulebook,body>main.lab-main{
   width:100%;max-width:none!important;min-width:0;margin:0!important;
   padding:0 0 calc(40px + env(safe-area-inset-bottom))!important;box-sizing:border-box;
 }
 .quest-hero,.shop-hero,.deck-intro,.royalty-hero,.royalty-gate,
 .challenge-lobby,.waiting-panel,.account-auth,.account-panel,.cart-panel,
 .physical-order-panel,.checkout-payment,.weekly-section,.welcome-pack{
   border-left:0;border-right:0;border-radius:0;
 }
 body>main>:is(h1,h2,p,a,.collection-kicker,.collection-account-note,
 .collection-section-head,.deck-section-title,.deck-footnote,.deck-play-links,
 .lab-intro){margin-left:18px;margin-right:18px}
 .account-main .account-intro{padding-left:18px;padding-right:18px}
 .shop-main .shop-categories{margin-left:16px;margin-right:16px}
 .shop-main .rip-shop>h2,.shop-main .rip-shop>p,
 .shop-main .physical-shipping-note{margin-left:18px;margin-right:18px}
 .cart-main>h1,.checkout-main>h1,.physical-checkout>h1{padding-top:20px}
 .cart-main>a{display:inline-block;margin-top:20px}
 .cart-main .cart-row{border-left:0;border-right:0}
 .cart-main #cartOrderActions{padding-left:18px;padding-right:18px}
 .deck-main .deck-builder,.deck-main .deck-workspace{padding-left:16px;padding-right:16px}
 .deck-main .deck-save-bar{margin-left:0;margin-right:0}
 .collection-main .owned-grid{padding-left:12px;padding-right:12px}
 body>main.rulebook{padding:24px 18px 40px!important}
 body>main.lab-main .lab-layout{padding-left:16px;padding-right:16px}
}

@media(max-width:1050px){
 .shop-main .shop-hero,.collection-main .quest-claim{margin-left:0;margin-right:0;width:auto}
 .account-main>.account-bottom-link{width:auto;max-width:calc(100% - 36px)}
 /* These sections previously inherited their gutters from the outer page. */
 .quest-track>.quest-heading,.quest-track>.quest-progress,
 .quest-track>.quest-list,.quest-track>.quest-fineprint{
   margin-left:max(20px,env(safe-area-inset-left));
   margin-right:max(20px,env(safe-area-inset-right));
 }
 .collection-main .quest-social{
   padding:24px max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));
 }
 .collection-main .quest-claim{
   padding-left:max(20px,env(safe-area-inset-left));
   padding-right:max(20px,env(safe-area-inset-right));
 }
 .quest-list li>div,.quest-social>div{min-width:0}
 .quest-social .btn,.quest-list .btn{white-space:normal;overflow-wrap:anywhere}
 .collection-main .saved-section,.collection-main .reveal-section{
   padding-left:20px;padding-right:20px;
 }
}

/* Keep edge-to-edge panels, with one consistent inner content gutter. */
@media(max-width:1050px){
 :root{--page-gutter:clamp(20px,4vw,32px)}
 .deck-main #deckEmpty,.deck-main #deckEditor{padding:0 var(--page-gutter)}
 .deck-main #deckEmpty{padding-top:8px;padding-bottom:16px}
 .deck-main .deck-intro{padding:28px var(--page-gutter)}
 .deck-main #deckNotice{margin-inline:var(--page-gutter);line-height:1.65}
 .deck-main #deckEditor>section{padding-block:8px 24px}
 .deck-main .deck-section-title{gap:16px}
 .deck-main .deck-section-title>div{min-width:0}
 .deck-main .deck-section-title p,.deck-main #deckEmpty p{line-height:1.7}
 .deck-main .deck-lineup{gap:14px}
 .deck-main .deck-owned{gap:14px}
 .deck-main .deck-save-bar{position:static;padding:20px;gap:18px;flex-direction:column;align-items:stretch}
 .deck-main .deck-search input{box-sizing:border-box}
 .deck-main .btn{white-space:normal;line-height:1.4}
 .collection-main .collection-section-head{gap:16px;flex-wrap:wrap}
 .cart-panel,.account-panel,.checkout-payment,.physical-order-panel{min-width:0}
 .shop-main .btn,.account-main .btn,.checkout-main .btn,.cart-main .btn{white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:700px){
 .deck-main .deck-lineup,.deck-main .deck-owned{grid-template-columns:repeat(3,minmax(0,1fr))}
 .deck-main .lineup-card{padding:8px;gap:8px}
 .deck-main .lineup-tag,.deck-main .lineup-stats{font-size:8px}
}
@media(max-width:420px){
 .deck-main .deck-lineup,.deck-main .deck-owned{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:1050px){.quest-hero{overflow:hidden}.quest-hero>div{min-width:0}}

@media(max-width:1050px){
 .cart-main #cartItems>p{margin:20px var(--page-gutter)}
 .royalty-main .royalty-contenders,.royalty-main .royalty-standings,.royalty-main .royalty-invitation{padding-inline:var(--page-gutter)}
 .royalty-main .royalty-section-heading>div{min-width:0}
}