/* Shared navigation loads after page styles, including legacy header rules. */
.game-header.site-header{position:relative;z-index:30;display:flex;align-items:center;gap:28px;min-height:80px;height:auto;padding:12px clamp(16px,3vw,46px);background:#101511;border-bottom:1px solid var(--line);flex-wrap:nowrap}
.site-header .wordmark{flex-shrink:0;min-height:44px;align-items:center}
.game-header.site-header nav{height:auto;font:13px/1.4 Arial,sans-serif;letter-spacing:0}
.game-header.site-header .site-desktop{display:flex;align-items:center;gap:6px;margin:0 auto 0 0}
.game-header.site-header nav a{display:flex;align-items:center;min-height:44px;height:auto;padding:10px 13px;border-radius:4px;color:#bec6b5;white-space:nowrap;border-bottom:0}
.game-header.site-header nav a:hover,.site-header summary:hover{background:#202b20;color:#f0f0df}
.game-header.site-header nav a[aria-current=page]{background:#c3f76612;color:var(--lime);box-shadow:inset 0 -2px var(--lime)}
.site-header summary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 14px;cursor:pointer;list-style:none;color:#d6dfca;font:13px Arial,sans-serif;border:1px solid #40503b;border-radius:4px}
.site-header summary::-webkit-details-marker{display:none}
.site-header summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.site-header details[open]>summary{color:var(--lime);background:#22311d}
.site-header .site-more{position:relative}
.site-header .site-menu-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:225px;padding:12px;border:1px solid #45563a;background:#141e16;box-shadow:0 18px 32px #0007}
.site-header #userMenu{margin-left:auto;flex-shrink:0}.site-header #userMenu:empty{display:none}
.site-header .site-mobile{display:none}
.site-menu-icon{width:17px;height:12px;border-block:1.5px solid currentColor;position:relative}
.site-menu-icon::after{content:'';position:absolute;left:0;right:0;top:4px;border-top:1.5px solid currentColor}
.site-header details[open] .site-menu-icon{border:0}
.site-header details[open] .site-menu-icon::before,.site-header details[open] .site-menu-icon::after{content:'';position:absolute;left:0;right:0;top:5px;border-top:1.5px solid currentColor;transform:rotate(45deg)}
.site-header details[open] .site-menu-icon::after{transform:rotate(-45deg)}
@media(max-width:1050px){
 .game-header.site-header{min-height:68px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));gap:14px}
 .game-header.site-header .site-desktop{display:none}
 .site-header .site-mobile{display:block;margin-left:auto}
 .site-header #userMenu:not(:empty)+.site-mobile{margin-left:0}
 .game-header.site-header .site-mobile nav{display:block;position:absolute;top:100%;left:0;right:0;min-width:0;margin:0;padding:16px max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left));max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain;border-top:0}
 .game-header.site-header .site-mobile nav a{min-height:48px;font-size:16px;white-space:normal}
 .site-menu-secondary{border-top:1px solid #394832;margin-top:12px;padding-top:12px}
 .game-header.site-header .site-menu-secondary a{font-size:14px;color:#aebb9e}
}
/* Comfortable controls and wrapping in account/shop layouts, without changing battle cards. */
@media(max-width:760px){
 .hub-bar{height:auto;min-height:60px;flex-wrap:wrap;gap:8px;padding-block:12px}
 .hub-links{flex-wrap:wrap;gap:8px;min-width:0}
 .hub-links .tab{min-height:44px;padding:10px 12px}
 .account-main,.collection-main,.deck-main,.quest-main,.checkout-main{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
 .account-panel fieldset,.account-panel form{min-width:0}
 .account-panel .btn,.checkout-payment .btn,.deck-pagination .btn{white-space:normal;text-align:center;overflow-wrap:anywhere;max-width:100%;min-height:44px}
 .account-panel input:not([type=radio]):not([type=checkbox]),.account-panel select,.checkout-payment input,.checkout-payment select,.deck-search input,.weekly-actions select{font-size:16px;max-width:100%}
 .account-panel,.checkout-summary,.checkout-payment{overflow-wrap:anywhere}
 .purchase-order-actions>.btn{flex:1 1 150px;justify-content:center}
 .collection-section-head{flex-wrap:wrap;gap:14px}
 .collection-kicker{flex-wrap:wrap}
 .deck-counts,.lineup-summary{flex-wrap:wrap}
 .checkout-support>a,.checkout-summary>a,.purchase-success-profile{display:inline-flex;align-items:center;min-height:44px}
 .purchase-success-close{min-height:44px;min-width:44px}
 .rip-odds summary,.purchase-history-row summary{min-height:44px;align-content:center}
 .rulebook{padding-inline:16px}
}
@media(max-width:480px){
 .account-panel{padding:20px 16px}
 .checkout-summary,.checkout-payment{padding:20px 16px}
 .checkout-support>.btn,.checkout-payment #ripLink{width:100%;justify-content:center}
 .deck-owned{grid-template-columns:repeat(2,minmax(0,1fr))}
 .deck-pagination{flex-wrap:wrap;justify-content:center}
 .deck-pagination .btn{padding:12px 16px}
 .holder-claim-result{grid-template-columns:1fr}
 #holderResultArt{width:160px;max-width:100%;margin:auto}
 .holder-claim-result .btn{display:flex;justify-content:center;margin-right:0}
}
@media print{.game-header.site-header{display:none}}
.game-brand-footer{max-width:1508px;margin:0 auto;padding:12px clamp(16px,3vw,46px) calc(12px + env(safe-area-inset-bottom));color:#88917f}
.game-brand-footer small{display:block;font:10px/1.5 Arial,sans-serif;letter-spacing:0;text-transform:none}
.game-brand-footer small span{color:#7f8978}
.game-footer:has(.game-brand-footer){height:auto;min-height:100px;flex-wrap:wrap;row-gap:12px;padding-block:24px}
.game-footer>.game-brand-footer{flex-basis:100%;margin:0;padding:0;border:0}
html.battle-mobile .game-brand-footer{display:none}

/* Footer content follows the same desktop gutters as the play page. */
@media(min-width:1151px){body>.game-footer{width:calc(100% - 92px);max-width:1508px;margin-inline:auto}}

/* One profile menu, pinned to the right with the cart immediately before it. */
.game-header.site-header .site-desktop{margin:0;flex:1}
.header-player-actions{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0}
.game-header.site-header .header-player-actions .site-mobile{display:block;margin:0;position:relative}
@media(min-width:1051px){.site-header .site-mobile .site-menu-panel{display:block;max-height:calc(100dvh - 120px);overflow-y:auto;min-width:245px}.site-header .site-menu-secondary{border-top:1px solid #394832;margin-top:10px;padding-top:10px}}
@media(max-width:1050px){.game-header.site-header .header-player-actions .site-mobile{position:static}.header-player-actions{gap:12px}}

.game-header.site-header .site-mobile nav a,.game-header.site-header .site-mobile nav>a:first-child{display:flex;align-items:center;width:100%;box-sizing:border-box}

#userMenu:empty{display:none}
.player-account-controls{border-top:1px solid #394832;margin-top:12px;padding-top:10px;display:grid;gap:6px}
.player-account-controls button{appearance:none;display:block;width:100%;text-align:left;background:transparent;color:inherit;border:0;padding:14px 16px;font:inherit;cursor:pointer}
.player-account-controls button:hover,.player-account-controls button:focus-visible{background:#c3f766;color:#111b11}
.player-account-controls button:disabled{opacity:.6;cursor:wait}
.player-account-controls [role=status]:empty{display:none}
.player-account-controls [role=status]{font-size:12px;padding:8px 16px}

.site-mobile[data-rival-invites] > summary{position:relative}.site-mobile[data-rival-invites] > summary::after{content:"";position:absolute;right:0;top:0;width:9px;height:9px;border-radius:50%;background:#c3f766;border:2px solid #132013;box-shadow:0 0 0 1px #c3f766}

.header-invitations{display:inline-flex;align-items:center;white-space:nowrap;padding:9px 10px;border:1px solid #647749;border-radius:6px;color:#c3f766;font:700 11px/1.2 Arial,sans-serif;text-decoration:none}
.header-invitations[hidden]{display:none}
.header-invitations[data-pending]{background:#c3f766;color:#111b11;border-color:#c3f766}
.header-invitations:focus-visible{outline:2px solid #c3f766;outline-offset:3px}
#invitationInbox{scroll-margin-top:110px}

/* Battle, tournament and spectator pages share the same player menu. */
.game-header.compact-game-header{position:sticky;top:0;z-index:100;--lime:#c3f766;--line:#40503b}
.compact-game-header .wordmark{display:flex;font:900 italic 36px/1 Arial,sans-serif;color:#efefdc;text-decoration:none;letter-spacing:-1px}
.compact-game-header .game-header-context{font:700 10px/1.4 monospace;letter-spacing:2px;color:#c3f766}
.compact-game-header .header-player-actions{font:13px/1.4 Arial,sans-serif;letter-spacing:0}
.compact-game-header a{text-decoration:none}
@media(max-width:700px){.compact-game-header .game-header-context{display:none}.compact-game-header .wordmark{font-size:30px}.compact-game-header .header-player-actions{gap:10px}}

/* Keep account creation visible before visitors open the player menu. */
.site-header .header-signup{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #c3f766;border-radius:4px;background:#c3f766;color:#101511;font:800 13px/1 Arial,sans-serif;text-decoration:none;white-space:nowrap}
.site-header .header-signup:hover{background:#d6ff94}
.header-signup:focus-visible,.signup-invite a:focus-visible{outline:2px solid #f0f0df;outline-offset:4px}
.hero-copy .signup-invite{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding:18px 20px;border:1px solid #c3f76670;border-left:3px solid #c3f766;background:#142016e8;max-width:580px}
.signup-invite strong{display:block;color:#eef2dd;font:800 13px/1.4 Arial,sans-serif;letter-spacing:.8px}
.signup-invite div>span{display:block;margin-top:5px;color:#b7c4ac;font:12px/1.5 Arial,sans-serif}
.signup-invite a{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;color:#c3f766;font:800 13px/1.2 Arial,sans-serif;text-decoration:none;white-space:nowrap}
.signup-invite a:hover{text-decoration:underline;text-underline-offset:4px}
[data-signup-cta][hidden]{display:none!important}
@media(max-width:600px){.hero-copy .signup-invite{align-items:flex-start;flex-direction:column;gap:8px;padding:14px 16px}.site-header .header-signup{padding-inline:12px}.header-player-actions{gap:8px}}

/* Hero actions reuse the illustrated graveyard and challenge menu mascots. */
.hero-copy .hero-play-cta,.hero-copy .hero-challenge-cta{justify-content:center;gap:12px;min-height:80px;padding:14px 18px;text-align:left}
.hero-copy .hero-cta-label{display:grid;gap:6px}
.hero-copy .hero-cta-label strong{font:900 20px/1.1 Arial,sans-serif;letter-spacing:.2px}
.hero-copy .hero-cta-label small{font:700 9px/1.3 Arial,sans-serif;letter-spacing:1px}
.hero-copy [data-hero-mascot]>.menu-mascot{display:inline-flex;width:44px;height:44px;flex:0 0 44px}
.hero-copy .hero-challenge-cta>span:not(.menu-mascot){font-size:11px;line-height:1.4}
@media(max-width:600px){.hero-copy .hero-play-cta,.hero-copy .hero-challenge-cta{width:100%;justify-content:flex-start}.hero-copy .hero-cta-label strong{font-size:22px}}

/* One aligned action group with a mobile wizard peeking behind the buttons. */
:is(#titleScreen,.home-hero) .play-hero-actions{width:100%;max-width:580px}
:is(#titleScreen,.home-hero) .hero-buttons{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;gap:12px}
:is(#titleScreen,.home-hero) .hero-buttons .btn{width:100%;min-width:0;min-height:84px;padding:14px;gap:10px;justify-content:flex-start;text-align:left}
:is(#titleScreen,.home-hero) .hero-cta-label{min-width:0}
:is(#titleScreen,.home-hero) .hero-cta-label strong{font-size:clamp(16px,1.35vw,20px);white-space:nowrap}
:is(#titleScreen,.home-hero) .hero-cta-label small{font-size:8px;letter-spacing:.7px}
:is(#titleScreen,.home-hero) .hero-challenge-cta>span:not(.menu-mascot){max-width:115px;font-size:11px;line-height:1.5}
:is(#titleScreen,.home-hero) [data-hero-mascot]>.menu-mascot{width:36px;height:36px;flex-basis:36px}
:is(#titleScreen,.home-hero) .signup-invite{max-width:none;margin-top:12px;padding:16px;gap:12px}
:is(#titleScreen,.home-hero) .signup-invite strong{font-size:11px;letter-spacing:.5px}
:is(#titleScreen,.home-hero) .signup-invite div>span{font-size:11px}
:is(#titleScreen,.home-hero) .signup-invite a{font-size:11px}
:is(#titleScreen,.home-hero) .practice-note{margin-top:16px;flex-wrap:wrap}
@media(min-width:901px) and (max-width:1150px){
 :is(#titleScreen,.home-hero) .hero-buttons{grid-template-columns:1fr}
 :is(#titleScreen,.home-hero) .hero-buttons .btn{min-height:72px}
 :is(#titleScreen,.home-hero) .hero-challenge-cta>span:not(.menu-mascot){max-width:none}
 :is(#titleScreen,.home-hero) .signup-invite{flex-wrap:wrap}
}
@media(max-width:900px){
 :is(#titleScreen,.home-hero) .hero-copy{display:contents}
 :is(#titleScreen,.home-hero) .play-hero-intro,:is(#titleScreen,.home-hero) .play-hero-actions{position:relative;z-index:3;grid-column:1;padding-inline:24px;max-width:none}
 :is(#titleScreen,.home-hero) .play-hero-intro{grid-row:1;padding-top:32px}
 :is(#titleScreen,.home-hero) .play-hero-intro p{margin-bottom:0}
 :is(#titleScreen,.home-hero) .card-fan{display:none}
 :is(#titleScreen,.home-hero) .play-hero-actions{--wizard-size:clamp(240px,72vw,310px);grid-row:2;padding-top:calc(var(--wizard-size) - 20px);padding-bottom:0;margin-top:16px;isolation:isolate}
 :is(#titleScreen,.home-hero) .play-hero-actions::before,:is(#titleScreen,.home-hero) .play-hero-actions::after{content:"";position:absolute;top:0;right:24px;width:var(--wizard-size);aspect-ratio:1;background:url('/rad/tcg/peerless-wizard-mobile-v7.webp') center/contain no-repeat;pointer-events:none}
 :is(#titleScreen,.home-hero) .play-hero-actions::before{z-index:-1;filter:drop-shadow(0 0 18px #9b52e833)}
 /* Only the forward-facing wrist joints cross the button; cuffs stay behind it. */
 :is(#titleScreen,.home-hero) .play-hero-actions::after{z-index:2;clip-path:polygon(8% 93%,10% 89%,23% 89%,26% 92%,26% 97%,24% 100%,78% 100%,77% 96%,77% 91%,91% 89%,95% 93%,95% 97%,92% 100%,8% 100%)}
 :is(#titleScreen,.home-hero) .hero-buttons{position:relative}
 :is(#titleScreen,.home-hero) .hero-challenge-cta{background:#152219ed}
 :is(#titleScreen,.home-hero) .hero-bottom{grid-row:3;margin-top:24px}
 :is(#titleScreen,.home-hero) .hero-cta-label strong{font-size:20px}
 :is(#titleScreen,.home-hero) .card-fan .fan-label{font-size:7px;letter-spacing:1px;left:15%;bottom:0}
}
@media(max-width:600px){
 :is(#titleScreen,.home-hero) .hero-buttons{grid-template-columns:1fr;gap:10px}
 :is(#titleScreen,.home-hero) .hero-buttons .btn{min-height:72px;padding:12px 18px;gap:14px}
 :is(#titleScreen,.home-hero) [data-hero-mascot]>.menu-mascot{width:40px;height:40px;flex-basis:40px}
 :is(#titleScreen,.home-hero) .hero-cta-label strong{font-size:22px}
 :is(#titleScreen,.home-hero) .hero-challenge-cta>span:not(.menu-mascot){max-width:none}
 :is(#titleScreen,.home-hero) .signup-invite{flex-direction:row;align-items:center;flex-wrap:wrap;padding:14px 16px;gap:4px 12px}
 :is(#titleScreen,.home-hero) .signup-invite div{flex:1 1 200px}
 :is(#titleScreen,.home-hero) .signup-invite a{min-height:40px}
}

/* Layered decorative magic never intercepts controls. */
.wizard-magic,.wizard-sky,.wizard-side-cards{display:none}
@media(max-width:900px){
 :is(#titleScreen,.home-hero) .wizard-side-cards{display:block;position:absolute;z-index:-3;top:0;right:24px;width:var(--wizard-size);height:calc(var(--wizard-size) - 20px);pointer-events:none;clip-path:inset(-40px -100px 0)}
 .wizard-side-cards img{position:absolute;width:43%;height:auto;border-radius:7px;box-shadow:0 10px 24px #0008;transform-origin:50% 85%}
 .wizard-side-cards .wizard-card-left-back{left:-5%;top:34%;transform:rotate(-19deg);filter:brightness(.85)}
 .wizard-side-cards .wizard-card-left-front{left:-7%;top:53%;transform:rotate(-30deg)}
 .wizard-side-cards .wizard-card-right{right:22%;top:40%;transform:rotate(38deg);filter:brightness(.9)}
 :is(#titleScreen,.home-hero) .wizard-sky{display:block;position:absolute;grid-column:1;grid-row:1 / 3;inset:32px 0 180px;z-index:1;overflow:hidden;pointer-events:none}
 .wizard-sky i,.wizard-magic i{--spark-color:#66e7ff;--spark-halo:#31ceff80}
 .wizard-sky i:nth-child(4n + 2),.wizard-magic i:nth-child(4n + 2){--spark-color:#ef73ff;--spark-halo:#db32ef80}
 .wizard-sky i:nth-child(4n + 3),.wizard-magic i:nth-child(4n + 3){--spark-color:#b895ff;--spark-halo:#8e55ff80}
 .wizard-sky i:nth-child(4n),.wizard-magic i:nth-child(4n){--spark-color:#ffe3a2;--spark-halo:#ffc76b70}
 .wizard-sky i{position:absolute;left:var(--x);top:0;width:3px;height:100%;animation:wizard-sky-rise var(--duration) linear infinite;animation-delay:var(--delay)}
 .wizard-sky i::before{content:"";position:absolute;bottom:0;width:7px;height:7px;border-radius:0;background:var(--spark-color);clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%);box-shadow:none;animation:wizard-spark-twinkle 3.8s ease-in-out infinite;animation-delay:var(--delay)}
 .wizard-sky i:nth-child(even)::before{width:6px;height:6px;animation-duration:4.7s}
 :is(#titleScreen,.home-hero) .wizard-sky-front{z-index:4}
 .wizard-sky-front i::before{width:10px;height:10px;box-shadow:none}
 .wizard-sky-front i:nth-child(even)::before{width:12px;height:12px;box-shadow:none}
 .wizard-sky-front i::after,.wizard-sky-near i:nth-child(3n)::after{content:"";position:absolute;bottom:4px;left:4px;width:2px;height:2px;background:#fff5ed;box-shadow:0 0 3px var(--spark-color);animation:wizard-star-glint 4.6s ease-in-out infinite;animation-delay:var(--delay)}
 :is(#titleScreen,.home-hero) .wizard-sky-near{z-index:5}
 .wizard-sky-near i{animation-name:wizard-near-rise}
 .wizard-sky-near i::before{width:12px;height:12px;box-shadow:none;animation-duration:3.2s}
 .wizard-sky-near i:nth-child(even)::before{width:14px;height:14px;animation-duration:4.1s}
 :is(#titleScreen,.home-hero) .wizard-magic{display:block;position:absolute;z-index:-2;top:0;right:24px;width:var(--wizard-size);height:calc(var(--wizard-size) - 20px);pointer-events:none}
 .wizard-magic i{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;border-radius:0;clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%);background:var(--spark-color);box-shadow:none;animation:wizard-spark-drift 5s ease-in-out infinite;animation-delay:var(--delay)}
 .wizard-magic i:nth-of-type(even){width:6px;height:6px;animation-duration:6s}
 :is(#titleScreen,.home-hero) .play-hero-actions::before,:is(#titleScreen,.home-hero) .play-hero-actions::after{animation:wizard-float 5s ease-in-out infinite}
}
@keyframes wizard-spark-twinkle{0%,100%{opacity:.25;transform:scale(.55) rotate(-12deg)}45%{opacity:1;transform:scale(1.15) rotate(8deg)}70%{opacity:.5;transform:scale(.75) rotate(14deg)}}
@keyframes wizard-star-glint{0%,65%,100%{opacity:0;transform:scale(.5) rotate(0deg)}35%{opacity:.7;transform:scale(1) rotate(18deg)}}
@keyframes wizard-near-rise{0%{opacity:0;transform:translate3d(0,0,0)}15%{opacity:.9}50%{opacity:.7}82%{opacity:.85}100%{opacity:0;transform:translate3d(var(--sway),-100%,0)}}
@keyframes wizard-sky-rise{0%{opacity:0;transform:translate3d(0,0,0)}12%{opacity:.55}55%{opacity:.4}88%{opacity:.5}100%{opacity:0;transform:translate3d(var(--sway),-100%,0)}}
@keyframes wizard-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes wizard-spark-drift{0%{opacity:0;transform:translate3d(0,12px,0) scale(.6)}30%,65%{opacity:.85}100%{opacity:0;transform:translate3d(14px,-65px,0) scale(.3)}}
@media(prefers-reduced-motion:reduce){
 :is(#titleScreen,.home-hero) .play-hero-actions::before,:is(#titleScreen,.home-hero) .play-hero-actions::after,.wizard-magic *,.wizard-sky *,.wizard-sky i::before,.wizard-sky i::after{animation:none!important}
 .wizard-magic i{opacity:.5}
 :is(#titleScreen,.home-hero) .wizard-sky{display:none}
}

/* Both entry pages share the approved mobile wizard composition. */
@media(max-width:900px){
 .home-hero .hero-scene{grid-template-columns:minmax(0,1fr);min-height:0}
 .home-hero .hero-cards{display:none}
 .home-hero .play-hero-actions .hero-proof{margin-top:16px;margin-bottom:0;max-width:none}
}