/* Layout glue around the original game card CSS, copied into assets/ui/. */
.wordmark{width:108px;height:auto;overflow:visible;padding:0}.wordmark img{width:108px;height:auto;position:static}.hero-logo{width:min(340px,100%);height:auto;overflow:visible;margin:12px 0 18px}.hero-logo img{width:100%;height:auto;position:static;max-width:100%}
body:not(.interactive) :is(.roster-picker,.deck-keyboard-hint){display:none}
.rivals{--rival-scene:url('./assets/opponents/backgrounds-comic-v2/joker.webp?v=16ea5d746b57');padding:92px 0 82px;background:var(--deep);isolation:isolate}
.rivals::before{background:linear-gradient(90deg,#0b211af5 0%,#0b211ae6 35%,#0b211a87 100%),var(--rival-scene) center/cover;opacity:1}
.rivals-layout{grid-template-columns:.95fr 1.05fr;gap:85px;align-items:center}
.rivals-copy{max-width:490px}.rivals-copy>p{max-width:370px}.rivals-copy h2{font-size:clamp(35px,3.8vw,50px)}
.roster-picker{display:flex;flex-wrap:wrap;gap:8px;max-width:440px;margin:27px 0 24px}.roster-picker button{border:1px solid #fff3d947;border-radius:7px;background:#0c211cd6;color:var(--paper);font:900 11px var(--body);min-height:40px;padding:9px 12px;transition:background .15s,transform .15s}.roster-picker button:hover{transform:translateY(-2px);border-color:var(--orange)}.roster-picker button[aria-pressed=true]{background:var(--paper);color:var(--ink);border-color:var(--orange);box-shadow:0 3px 0 #a4662b}
.rival-coach{padding:17px 0 18px;border-block:1px solid #fff3d933;max-width:395px}.rival-coach>span{font-size:9px;font-weight:1000;letter-spacing:1.5px;color:var(--orange)}.rival-coach>p{font-size:14px;line-height:1.7;margin:6px 0 0;color:#f6eedf}.rivals-copy>.text-link{margin-top:17px}
.site-rival-deck{--brand-ink:#032633;--brand-cream:#fff4d9;--font-display:var(--display);--rival-art-height:220px;padding:0 65px;position:relative;width:100%;max-width:500px;margin-inline:auto;color:var(--brand-ink)}
.site-rival-deck .rival-collectible{--rival-art-height:220px;position:relative;margin-inline:auto;isolation:isolate}.rival-pile{position:relative;touch-action:pan-y pinch-zoom;outline:none}.rival-pile:focus-visible{outline:3px solid var(--orange);outline-offset:18px;border-radius:15px}
.site-rival-deck .fighter{display:grid;gap:10px;min-width:0}.site-rival-deck .rival-card-header{display:flex;align-items:center}.site-rival-deck .fighter-name{font:30px/1.12 var(--display);color:var(--brand-ink);letter-spacing:-.8px;margin:0;text-transform:uppercase;text-shadow:1px 2px #fff9e5;overflow-wrap:anywhere}
.site-rival-deck .fighter-stage{position:relative;border:3px solid var(--brand-ink);background:linear-gradient(0deg,#173e3559,transparent 55%),var(--rival-backdrop) center 52%/cover no-repeat,#46664a;box-shadow:0 3px 0 var(--rival-accent);overflow:hidden}
.site-rival-deck .fighter-portrait{--figure-height:175px;position:absolute;bottom:calc(16px + var(--figure-height)*var(--portrait-bottom,0));left:calc(50% + var(--figure-height)*var(--portrait-offset,0));height:calc(var(--figure-height)*var(--portrait-height,1));width:auto;max-width:none;max-height:none;translate:-50% 0;image-rendering:pixelated;filter:drop-shadow(3px 5px 0 #03263355)}
.site-rival-deck .rival-style{position:absolute;top:9px;left:8px;max-width:calc(100% - 16px);border:1px solid var(--brand-ink);border-radius:4px;background:#fff4d9ef;color:var(--brand-ink);padding:3px 7px;font-size:9px;font-weight:1000;box-shadow:1px 2px 0 #03263355;line-height:1.45}
.site-rival-deck .rival-dossier{display:grid;padding:0}.site-rival-deck .rival-intro{min-width:0}.site-rival-deck .rival-intro .rival-quote{min-height:103px;display:flex;align-items:center;justify-content:center}.site-rival-deck .trait-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-items:stretch}.site-rival-deck .rival-traits{--trait-ink:#245637;min-width:0;padding:8px 6px;background:#eaf3df;border:2px solid var(--brand-ink);border-radius:9px 5px 10px 6px;box-shadow:2px 3px 0 var(--brand-ink)}.site-rival-deck .weaknesses{--trait-ink:#9f3528;background:#fdeae0;border-radius:5px 11px 6px 9px}
.site-rival-deck .rival-traits h4{display:inline-block;font-size:10px;font-weight:1000;line-height:1.2;letter-spacing:.5px;padding:4px 6px;margin:0 0 7px;border-radius:3px;background:var(--trait-ink);color:white;rotate:-2deg}.site-rival-deck .weaknesses h4{rotate:2deg}.site-rival-deck .rival-traits ul{display:grid;gap:6px;list-style:none;padding:0;margin:0}.site-rival-deck .rival-traits li{position:relative;padding-left:13px;font:700 11px/1.4 var(--body);color:#15333d}.site-rival-deck .rival-traits li::before{content:'+';position:absolute;left:0;top:0;color:var(--trait-ink);font-weight:1000}.site-rival-deck .weaknesses li::before{content:'−'}
.site-rival-deck .rival-emblem img{width:36px;height:36px}.site-rival-deck .rival-emblem--mark{font-size:26px!important;background:none!important}
.site-rival-deck .rival-underlay{height:100%;overflow:hidden;pointer-events:none}.site-rival-deck .rival-sheet.rival-leaving{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.site-rival-deck .deck-controls{display:flex;align-items:center;justify-content:center;gap:17px;margin-top:32px}.site-rival-deck .deck-status{font-size:10px;font-weight:900;color:var(--paper);text-align:center;margin:0;line-height:1.6}.site-rival-deck .deck-status strong{display:block;font-size:12px;color:var(--orange)}
.site-rival-deck .rival-arrow{position:absolute;top:43%;z-index:10;width:56px;height:56px;min-width:56px;min-height:56px;padding:15px;border:0;background:none;color:var(--brand-ink);filter:drop-shadow(3px 4px 0 #032633);transition:transform .15s}.site-rival-deck .rival-arrow:hover{transform:translateY(-3px)}.site-rival-deck .rival-arrow.previous{left:-68px}.site-rival-deck .rival-arrow.next{right:-68px}.site-rival-deck .arrow-face{position:absolute;inset:0;width:100%;height:100%;stroke:var(--brand-ink);stroke-width:4;stroke-linejoin:round}.site-rival-deck .arrow-stock{fill:var(--paper)}.site-rival-deck .next .arrow-stock{fill:#ffd078}.site-rival-deck .arrow-glint{fill:none;stroke:white;stroke-width:5;stroke-linecap:round}.site-rival-deck .arrow-symbol{position:relative;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.site-rival-deck .rival-swipe-hint{margin:16px 0 0!important;font-size:10px!important;color:#fff4d9be!important}.deck-keyboard-hint{margin:11px 0 0;text-align:center;color:#fff4d9b3;font-size:10px}
.mode-art--screen{height:auto;aspect-ratio:16/10;padding:0;margin:0 0 18px;border:3px solid var(--ink);border-radius:11px;background:var(--ink);box-shadow:4px 5px 0 #d7c59f}.mode-art--screen>img{width:100%;height:100%;max-height:none;object-fit:cover}.mode-art--screen.mode-art--podium>img{object-position:center 55%}
.hero-art{margin-top:14px}.hero-stamp{font-size:18px}.game-shot figcaption{justify-content:space-between;padding:11px 8px 7px}.game-shot figcaption>span{font-size:9px;letter-spacing:.9px}.game-shot figcaption>em{font-size:10px}.hero-description{max-width:400px}.sticky-sticker{width:193px;bottom:-105px;right:-20px}
@media(max-width:1100px){.rivals-layout{gap:38px;grid-template-columns:1fr 1.05fr}.site-rival-deck{padding-inline:50px}.site-rival-deck .rival-arrow.previous{left:-53px}.site-rival-deck .rival-arrow.next{right:-53px}.site-rival-deck .rival-arrow{width:47px;height:47px;min-width:47px;min-height:47px;padding:11px}.site-rival-deck .rival-traits li{font-size:11px!important}.roster-picker{gap:7px}.roster-picker button{font-size:10px;padding-inline:9px}.site-rival-deck .fighter-name{font-size:26px!important}}
@media(max-width:800px){.rivals{padding-block:64px 70px}.rivals-layout{grid-template-columns:1fr;gap:40px}.rivals-copy{max-width:none}.rivals-copy>p{max-width:450px}.roster-picker{max-width:600px}.site-rival-deck{max-width:470px;padding-inline:48px}.site-rival-deck .rival-arrow.previous{left:-54px}.site-rival-deck .rival-arrow.next{right:-54px}.site-rival-deck .rival-traits li{font-size:12px!important}.site-rival-deck .fighter-name{font-size:29px!important}.mode-art--screen{margin-bottom:19px}.game-shot figcaption>em{display:none}.sticky-sticker{width:170px}}
@media(max-width:560px){.rivals{padding-block:49px 57px}.rivals-layout{gap:33px}.rivals-copy h2{font-size:35px}.roster-picker{gap:7px;margin-top:23px}.roster-picker button{font-size:10px;padding:8px 10px;min-height:38px}.rival-coach{padding-block:14px}.rival-coach>p{font-size:13px}.site-rival-deck{padding:0 10px;max-width:360px}.site-rival-deck .rival-collectible{width:100%!important;max-width:none!important}.site-rival-deck .rival-arrow{position:relative;top:auto;left:auto!important;right:auto!important;width:48px;height:48px;min-width:48px;min-height:48px;padding:12px}.site-rival-deck .rival-traits li{font-size:11px!important;line-height:1.45!important}.site-rival-deck .rival-intro .rival-quote{font-size:15px!important;min-height:104px}.site-rival-deck .fighter-name{font-size:25px!important}.site-rival-deck .rival-sheet{padding:13px 10px 16px;gap:10px}.site-rival-deck .deck-controls{margin-top:29px}.site-rival-deck .deck-status{min-width:133px}.deck-keyboard-hint{display:none}.site-rival-deck .rival-swipe-hint{display:block!important;margin-top:13px!important}.site-rival-deck .fighter-portrait{--figure-height:165px}.mode{grid-template-columns:1fr}.mode-art--screen{grid-row:auto;height:auto;width:100%;aspect-ratio:16/10;margin:0 0 16px}.mode h3{font-size:24px}.mode p{font-size:13px;max-width:none}.mode-number{font-size:10px}.mode-tag{margin-top:1px}.hero-stamp{font-size:16px}.sticky-sticker{width:130px;bottom:-88px;right:-8px}}
@media(max-width:800px){.hero-scenery{background-image:url('./assets/club-mobile.webp?v=16ea5d746b57')}}

/* Compact opening: the game and the play action share the first screen. */
.site-rival-deck .rival-underlay>*{display:none}.site-rival-deck .rival-card-header{min-height:48px}.site-rival-deck .trait-columns{min-height:145px}.site-rival-deck .rival-intro .rival-quote{min-height:108px}.site-rival-deck .rival-collectible{--rival-art-height:220px}.site-rival-deck .fighter-name{font-size:27px!important}.roster-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;max-width:450px}.roster-picker button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:92px;padding:9px 3px;font-size:10px;line-height:1.25;border-radius:10px}.roster-picker button img{height:44px;width:45px;object-fit:contain;image-rendering:pixelated;transition:transform .16s}.roster-picker button:hover img{transform:translateY(-3px) rotate(-5deg)}.roster-picker button[aria-pressed=true]{border:2px solid var(--orange);box-shadow:0 4px 0 #a4662b}.roster-picker button span{min-height:25px;display:flex;align-items:center;text-align:center}.rivals-copy h2{font-size:clamp(34px,3.6vw,47px)}.rivals-copy>p:not(.eyebrow){margin-block:18px;font-size:14px}.rival-coach{background:#081f1ad9;border:1px solid #fff3d92e;border-left:3px solid var(--orange);padding:14px 17px;border-radius:0 8px 8px 0}.rival-coach>p{font-size:13px}
.hero{padding:26px 0 65px;min-height:630px}.hero-inner{min-height:535px;grid-template-columns:.9fr 1.1fr;gap:46px}.hero-logo{width:280px;margin:8px 0 17px}.hero h1{font-size:clamp(36px,3.4vw,46px);line-height:1.16}.hero-description{font-size:15px;line-height:1.65;margin-bottom:23px;max-width:395px}.hero-category{font-size:10px}.hero-art{margin-top:0}.game-shot{transform:rotate(2deg);box-shadow:9px 13px 0 #071b18a6}.sticky-sticker{width:166px;right:-18px;bottom:-80px}.hero-note{font-size:12px}.game-shot figcaption{min-height:36px}.hero-scenery:after{background:linear-gradient(90deg,#0b241ff5 0%,#0b241cce 38%,#0b241c25 78%),linear-gradient(0deg,#0c211c,transparent 48%)}
@media(max-width:1100px) and (min-width:801px){.hero-inner{gap:27px}.hero-logo{width:250px}.hero h1{font-size:36px}.hero-category{letter-spacing:1px}.hero-actions{gap:13px}.hero-note{font-size:10px}}
@media(max-width:800px){.hero{padding:25px 0 55px;min-height:0}.hero-inner{grid-template-columns:1fr;gap:27px;min-height:0}.hero-logo{width:255px;margin:10px 0 16px}.hero-art{margin:30px 0 80px;width:calc(100% - 18px)}.hero-copy{max-width:550px}.hero-description{max-width:460px}.hero h1{font-size:40px}.hero-scenery:after{background:linear-gradient(90deg,#0b241fec,#0b241fbf),linear-gradient(0deg,#0c211c,transparent 55%)}.sticky-sticker{width:148px;bottom:-70px;right:-7px}}
@media(max-width:560px){.hero-logo{width:215px;margin:8px 0 15px}.hero-category{font-size:9px;letter-spacing:1.1px}.hero h1{font-size:34px;margin-bottom:15px}.hero-description{font-size:14px;line-height:1.65;margin-bottom:20px}.hero-note{font-size:10px;margin-top:17px}.hero-art{margin-top:26px;margin-bottom:63px}.sticky-sticker{width:114px;bottom:-62px}.sticker-caption{font-size:11px}.match-label{font-size:8px;letter-spacing:.7px}.game-shot figcaption{min-height:29px}.hero-actions .play-button{font-size:19px}.hero-inner{gap:24px}.hero{padding-top:19px}}
.site-rival-deck .rival-underlay.rival-recent>.fighter,.site-rival-deck .rival-underlay.rival-recent>.rival-dossier{display:grid}
.rivals-copy,.site-rival-deck{min-width:0}
@media(max-width:800px){.rivals-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:800px){.roster-picker{max-width:450px}.site-rival-deck .rival-collectible{--rival-art-height:210px}}
@media(max-width:560px){.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid #fff3d936;box-shadow:0 3px 0 #061a1655;height:66px}.wordmark,.wordmark img{width:87px}.skip-link{z-index:30}.hero-logo{width:196px}.hero h1{font-size:32px}.hero-category{font-size:9px}.hero-actions{gap:16px}.hero-actions .play-button{min-height:57px;font-size:18px}.hero-note{line-height:1.5}.roster-picker{display:flex;flex-wrap:nowrap;max-width:none;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--orange) #102c24;padding:5px 4px 12px;margin:17px -4px 22px}.roster-picker button{flex:0 0 76px;scroll-snap-align:center;min-height:91px;font-size:11px;padding:8px 4px}.roster-picker button img{height:43px}.roster-picker button span{min-height:28px}.site-rival-deck .fighter-name{font-size:24px!important}.site-rival-deck .rival-card-header{min-height:47px}.site-rival-deck .rival-collectible{--rival-art-height:205px}.site-rival-deck .trait-columns{min-height:145px}.rivals-layout{gap:29px}.rival-coach{padding:12px 15px}.rivals-copy h2{font-size:33px}.rivals-copy>p:not(.eyebrow){font-size:13px;line-height:1.7}.site-rival-deck .deck-controls{gap:13px}.site-rival-deck .deck-status{min-width:120px}.site-rival-deck .rival-swipe-hint{font-size:11px!important}.hero-scenery{background-position:62% center}.mode h3{font-size:25px}.mode p{font-size:14px}.mode-art--screen{aspect-ratio:16/9}.questions details>p{font-size:14px}.site-footer{font-size:11px}.brand-bridge p{font-size:13px}.play-button--small{font-size:14px}.howto-copy>p:not(.eyebrow){font-size:14px}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.site-header{padding-inline:16px}.hero h1{font-size:29px}.hero-logo{width:174px}.hero-description{font-size:13px}.hero-actions{gap:12px}.trailer-button{font-size:10px}.hero-actions .play-button{font-size:17px;padding-inline:17px}.rivals-copy h2{font-size:29px}.site-rival-deck .rival-sheet{padding-inline:9px}.site-rival-deck .fighter-name{font-size:22px!important}.site-rival-deck .rival-traits li{font-size:11px!important}.site-rival-deck .trait-columns{min-height:160px}.site-rival-deck .rival-intro .rival-quote{min-height:115px;font-size:14px!important}.site-rival-deck .deck-status{min-width:110px}.hero-art{width:calc(100% - 13px)}}
@media(min-width:561px) and (max-width:800px){.site-rival-deck .rival-sheet{min-height:615px}}
@media(max-width:560px){.site-rival-deck .rival-sheet{min-height:600px}}
@media(max-width:360px){.site-rival-deck .rival-sheet{min-height:640px}}

/* The opening uses an unobstructed original arena view. */
.game-shot{transform:none;border:1px solid #ffe0a65c;border-radius:14px;background:#102b24;box-shadow:0 16px 36px #061a1680;overflow:hidden}.game-shot>img{border-radius:0;aspect-ratio:1168/657}.game-shot figcaption{color:var(--paper);padding:13px 15px;min-height:43px;border-top:1px solid #ffe0a638}.game-shot figcaption>span{font-size:10px;color:var(--orange)}.game-shot figcaption>em{font-size:10px;color:#d5ddcf}.hero-art{margin-top:0}.hero-category{color:#ffc465}
@media(max-width:800px){.hero-art{margin:9px 0 25px;width:100%}.hero-inner{gap:25px}.hero{padding-bottom:53px}}
@media(max-width:560px){.game-shot figcaption{padding:10px 12px;min-height:36px}.game-shot figcaption>span{font-size:9px}.hero-art{margin-bottom:15px}.hero{padding-bottom:46px}}
