/* REDZONE public site. Tokens mirror src/app/globals.css (game UI). */
:root{
  --red:#ff1e1e;--red-dark:#9d0f18;--gold:#ffd23f;--bg:#0b0d12;--panel:#151922;--panel-2:#1d232f;--line:#2a3140;
  --text:#f4f5f7;--muted:#8a94a6;--turf:#1f7a33;--turf-dark:#155c26;
  --display:"Press Start 2P","Silkscreen","Courier New",monospace;
  --pixel:"Silkscreen","Courier New",monospace;
  --body:"VT323","Silkscreen","Courier New",monospace;
  --gutter:clamp(16px,4vw,40px);--max:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:var(--gold)}
code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;background:#0005;padding:.1em .35em;border-radius:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.02em;line-height:.95;margin:0}
h2{font-size:clamp(2.6rem,6vw,4.6rem)}
h3{font-size:clamp(1.6rem,2.6vw,2.1rem)}
p{margin:0}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gold);color:#000;padding:8px 12px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wordmark{font-family:var(--display);color:#fff;display:inline-block;position:relative;letter-spacing:.01em}
.wordmark b{color:var(--red);font-weight:400}
.wordmark::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;border-bottom:.04em dashed var(--red);opacity:.85}
.wordmark.small{font-size:1.7rem;line-height:1}
.wordmark.small::after{border-bottom-width:2px;bottom:-3px}

/* Buttons: same chunky press language as the game's .rz-btn */
.btn{--h:54px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;height:var(--h);padding:0 1.35rem;font:400 1.35rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:#fff;border:0;cursor:pointer;position:relative;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:transform .08s ease,filter .12s ease;white-space:nowrap}
.btn svg{width:22px;height:22px;fill:currentColor;flex:none}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(3px) scale(.985);filter:brightness(1.2)}
.btn-red{background:linear-gradient(180deg,#ff4a52,var(--red) 55%,var(--red-dark));box-shadow:inset 0 -5px 0 #5f060c}
.btn-gold{background:linear-gradient(180deg,#ffe680,var(--gold) 55%,#d9a900);color:#1a1200;box-shadow:inset 0 -5px 0 #7a5f00}
.btn-ghost{background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff2e}
.btn-sm{--h:40px;font-size:1.05rem;padding:0 1rem}
.btn-block{width:100%}
.btn.pressed{animation:press .18s steps(2)}
@keyframes press{50%{transform:translateY(3px)}}

/* Header */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.2rem;padding:10px var(--gutter);padding-top:max(10px,env(safe-area-inset-top));background:#0b0d12d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #ffffff12}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{border-radius:7px}
.nav{display:flex;gap:1.4rem;margin-left:auto}
.nav a{color:#c9d0db;text-decoration:none;font:600 .95rem var(--body);letter-spacing:.02em}
.nav a:hover{color:#fff}
@media (max-width:820px){.nav{display:none}.top .btn{margin-left:auto}}

/* Hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 70% at 50% -10%,#3a0d12 0%,transparent 60%),linear-gradient(180deg,#0b0d12 0%,#0c1410 100%);isolation:isolate}
.hero-field{display:block;width:100%;height:192px;image-rendering:pixelated;opacity:.9;-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}
@media (max-width:600px){.hero-field{height:144px}}
.hero-lights{position:absolute;inset:0 0 auto 0;height:60%;z-index:-1;pointer-events:none}
.hero-lights i{position:absolute;top:-10%;width:34vw;height:120%;background:conic-gradient(from 180deg at 50% 0%,transparent 165deg,#fff6 180deg,transparent 195deg);filter:blur(6px);opacity:.25;transform-origin:50% 0;animation:sweep 9s ease-in-out infinite alternate}
.hero-lights i:nth-child(1){left:-6%;animation-delay:-2s}
.hero-lights i:nth-child(2){left:22%;animation-delay:-5s;opacity:.16}
.hero-lights i:nth-child(3){right:22%;animation-delay:-1s;opacity:.16}
.hero-lights i:nth-child(4){right:-6%;animation-delay:-7s}
@keyframes sweep{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.hero-inner{max-width:var(--max);margin:0 auto;padding:clamp(36px,7vw,90px) var(--gutter) clamp(40px,6vw,70px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:400 .72rem var(--pixel);letter-spacing:.06em;color:#ffd23fdd;text-transform:uppercase;background:#ffd23f14;border:1px solid #ffd23f33;padding:.35rem .7rem}
.eyebrow .dot{width:8px;height:8px;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.hero-mark{font-size:clamp(5rem,13vw,10rem);margin:.6rem 0 .25rem;line-height:.82;text-shadow:0 6px 0 #00000080}
.hero-mark::after{bottom:-.02em}
.headline{font:400 clamp(2rem,4.4vw,3.4rem)/.95 var(--display);margin-top:.9rem;letter-spacing:.02em}
.sub{color:#c3cad6;max-width:34rem;margin-top:1rem;font-size:1.08rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
.cta-row.center{justify-content:center}
.fine{font-size:.85rem;color:var(--muted);margin-top:.9rem}
.jumbotron{margin:0}
.jt-frame{position:relative;aspect-ratio:16/9;background:#000 url(media/hero-poster.jpg) center/cover;border:3px solid #2c3445;outline:6px solid #0e1219;box-shadow:0 0 0 9px #222a38,0 30px 80px #000c,0 0 80px #ff1e1e26;overflow:hidden}
.jt-video{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0000001f 2px 3px);mix-blend-mode:multiply}
.jt-live{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:6px;font:400 .62rem var(--pixel);background:#000a;padding:4px 7px;color:#fff}
.jt-live span{width:7px;height:7px;background:var(--red);animation:blink 1s steps(2) infinite}
.jumbotron figcaption{font-size:.78rem;color:var(--muted);margin-top:14px;text-align:right}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr}.jumbotron{order:-1}.hero-mark{margin-top:.2rem}}
@media (max-width:520px){.eyebrow{font-size:.6rem;white-space:nowrap}.cta-row .btn{flex:1 1 100%}.jumbotron figcaption{text-align:left}}

.ticker{border-block:2px solid #000;background:#120406;overflow:hidden;position:relative}
.ticker::before{content:"";position:absolute;inset:0;background:radial-gradient(#ff1e1e22 1px,transparent 1.5px) 0 0/4px 4px;pointer-events:none}
.ticker-track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker span{font:400 .9rem var(--pixel);color:#ffb3b3;padding:.7rem 1.4rem;white-space:nowrap;text-shadow:0 0 8px #ff1e1e99}
.ticker span::after{content:"◆";color:var(--gold);margin-left:2.8rem;font-size:.6rem;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}

/* Sections */
.section{padding:clamp(64px,10vw,120px) 0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:820px}
.kicker{font:400 .78rem var(--pixel);color:var(--red);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.9rem}
.lead{color:#c3cad6;max-width:44rem;margin-top:1.1rem;font-size:1.1rem}

/* Showcase rows */
.showcase{display:grid;gap:clamp(40px,7vw,80px);margin-top:clamp(36px,6vw,64px)}
.show-row{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,4vw,52px);align-items:center}
.show-row.flip .show-media{order:2}
.show-media{position:relative;aspect-ratio:16/9;background:#05070a;border:2px solid #263042;box-shadow:12px 12px 0 #ff1e1e1f;overflow:hidden}
.show-row.flip .show-media{box-shadow:-12px 12px 0 #ffd23f1c}
.show-media video{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.tag{display:inline-block;font:400 .66rem var(--pixel);text-transform:uppercase;letter-spacing:.06em;background:#ff1e1e1f;color:#ff8a8a;padding:.3rem .55rem;margin-bottom:.9rem}
.tag-soon{background:#ffd23f1f;color:var(--gold)}
.show-text p{color:#c3cad6;margin-top:.8rem}
@media (max-width:780px){.show-row{grid-template-columns:1fr}.show-row.flip .show-media{order:0}}

/* Touchdown band */
.td-band{position:relative;overflow:hidden;padding:clamp(70px,10vw,120px) var(--gutter);text-align:center;background:linear-gradient(180deg,#071009,#0e2a16 60%,#0b0d12);border-block:1px solid #ffffff10}
.crowd{position:absolute;inset:0 0 auto 0;height:58%;background-image:radial-gradient(circle,#ffffff33 1.6px,transparent 2px),radial-gradient(circle,#ff1e1e40 1.6px,transparent 2px),radial-gradient(circle,#ffd23f30 1.6px,transparent 2px);background-size:14px 12px,22px 16px,30px 20px;background-position:0 0,7px 5px,3px 9px;opacity:.5;mask-image:linear-gradient(#000,transparent)}
.td-band.go .crowd{animation:crowd .32s steps(2) 8}
@keyframes crowd{50%{transform:translateY(-5px)}}
.scoreboard{position:relative;display:inline-grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(14px,3vw,34px);background:#05060a;border:4px solid #2a3140;outline:3px solid #000;padding:clamp(16px,3vw,26px) clamp(20px,4vw,44px);box-shadow:0 20px 60px #000b,inset 0 0 40px #000;min-width:min(560px,100%)}
.sb-team{display:grid;gap:4px}
.sb-name{font:400 .8rem var(--pixel);color:#9aa3b2}
.sb-score{font:400 clamp(3.6rem,10vw,6rem)/1 var(--display);color:var(--gold);text-shadow:0 0 18px #ffd23f99;font-variant-numeric:tabular-nums}
.sb-mid{display:grid;gap:6px;font:400 .85rem var(--pixel);color:#ff6b6b}
.sb-clock{font-size:1.25rem;color:#fff}
.sb-flash{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(2.4rem,8vw,5rem)/1 var(--display);letter-spacing:.08em;color:#fff;background:repeating-linear-gradient(90deg,var(--red) 0 12px,#d0131d 12px 24px);opacity:0;pointer-events:none;text-shadow:4px 4px 0 #5f060c}
.td-band.go .sb-flash{animation:tdflash 2.2s steps(1) 1 forwards}
@keyframes tdflash{0%,8%,16%,24%{opacity:1}4%,12%,20%{opacity:0}60%{opacity:1}100%{opacity:0}}
.td-caption{margin-top:1.6rem;color:#c3cad6;font:400 .8rem var(--pixel);letter-spacing:.04em}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(32px,5vw,56px)}
.tile{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);padding:clamp(20px,3vw,30px);overflow:hidden;transition:transform .2s ease,border-color .2s}
.tile:hover{transform:translateY(-3px);border-color:#3b4558}
.tile p{color:#bcc4d1;margin-top:.7rem;font-size:.98rem}
.tile h3{font-size:clamp(1.7rem,2.6vw,2.2rem)}
.t-wide{grid-column:span 2}
.t-online{background:radial-gradient(90% 120% at 100% 0%,#2f8fe033,transparent 60%),linear-gradient(180deg,var(--panel-2),var(--panel));border-top:3px solid #2f8fe0}
.t-franchise{border-top:3px solid var(--red)}
.t-team{border-top:3px solid #4a9fe0}
.t-playbook{border-top:3px solid #e0972f}
.t-zone{border-top:3px solid #8b6bd6}
.t-style{border-top:3px solid #38b06a}
.t-soon{border:1px dashed #ffd23f55;background:repeating-linear-gradient(135deg,#ffd23f08 0 14px,transparent 14px 28px),var(--panel)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:1.1rem 0 0}
.chips li{font:400 .66rem var(--pixel);border:1px solid #ffffff26;padding:.35rem .55rem;color:#dfe6f0}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bento{grid-template-columns:1fr}.t-wide{grid-column:auto}}

/* Install */
.install{background:linear-gradient(180deg,#0b0d12,#10141c)}
.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(32px,5vw,52px)}
.install-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);padding:clamp(20px,3.4vw,34px);display:flex;flex-direction:column;gap:1.2rem;scroll-margin-top:90px}
#android{border-top:4px solid var(--red)}
#iphone{border-top:4px solid var(--gold)}
.install-card.match{box-shadow:0 0 0 2px var(--gold),0 20px 60px #ffd23f1a}
.platform{font:400 .72rem var(--pixel);color:var(--muted);text-transform:uppercase}
.install-card h3{margin-top:.4rem;font-size:2.2rem}
.meta{color:#aab3c2;font-size:.92rem;margin-top:.4rem}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.steps li{counter-increment:s;position:relative;padding-left:2.6rem;color:#cfd6e1;font-size:.98rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:.05rem;width:1.8rem;height:1.8rem;display:grid;place-items:center;font:400 .8rem var(--pixel);background:#000;border:1px solid #ffffff2e;color:var(--gold)}
.steps b{color:#fff}
.note{font-size:.9rem;color:#aab3c2;background:#0006;border-left:3px solid #ffffff2e;padding:.65rem .85rem}
.note.warn{border-left-color:var(--red);color:#ffd0d0}
.mini summary{cursor:pointer;color:var(--muted);font-size:.85rem}
.mini p{font-size:.82rem;color:var(--muted);margin-top:.4rem;word-break:break-all}
@media (max-width:820px){.install-grid{grid-template-columns:1fr}}

/* How */
.how-steps{list-style:none;padding:0;margin:clamp(32px,5vw,52px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line)}
.how-steps li{padding:clamp(18px,2.6vw,28px);border-right:1px solid var(--line);background:var(--panel)}
.how-steps li:last-child{border-right:0}
.num{font:400 .8rem var(--pixel);color:var(--red)}
.how-steps h3{margin:.6rem 0 .5rem;font-size:1.7rem}
.how-steps p{color:#bcc4d1;font-size:.95rem}
@media (max-width:900px){.how-steps{grid-template-columns:1fr 1fr}.how-steps li:nth-child(2){border-right:0}.how-steps li:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:560px){.how-steps{grid-template-columns:1fr}.how-steps li{border-right:0;border-bottom:1px solid var(--line)}.how-steps li:last-child{border-bottom:0}}
.controls{margin-top:28px;background:#05070a;border:2px solid #263042;padding:clamp(18px,3vw,30px)}
.pixel{font:400 1rem var(--pixel);color:var(--gold)}
.controls dl{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 20px;margin:1.1rem 0 0}
.controls dt{font:400 1.25rem var(--display);letter-spacing:.06em;color:#fff}
.controls dd{margin:0;color:#aab3c2;font-size:.9rem}
@media (max-width:900px){.controls dl{grid-template-columns:1fr 1fr}}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(32px,5vw,52px)}
.gal-item{margin:0;background:#05070a;border:1px solid var(--line)}
.gal-item video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.gal-feature{grid-column:span 2}
.gal-tall{grid-row:span 2}
.gal-tall video{aspect-ratio:9/16;height:auto}
.gal-item figcaption{font:400 .68rem var(--pixel);color:#aab3c2;padding:.7rem .8rem;text-transform:uppercase}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}.gal-feature{grid-column:span 2}.gal-tall{grid-row:auto}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}.gal-feature{grid-column:auto}.gal-tall video{max-height:80vh;width:auto;margin:0 auto}}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 2.2rem 1.2rem 0;position:relative;font:600 1.12rem var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:400 1.2rem var(--pixel);color:var(--red)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:#bcc4d1;padding-bottom:1.2rem}
.faq h2{margin-bottom:1.4rem}

/* Final */
.final{position:relative;text-align:center;padding:clamp(80px,12vw,140px) var(--gutter) clamp(110px,14vw,160px);background:radial-gradient(70% 90% at 50% 100%,#ff1e1e33,transparent 70%),#0b0d12;overflow:hidden}
.final h2{font-size:clamp(4rem,12vw,8rem);line-height:.85}
.final p{color:#c3cad6;margin-top:1.1rem;font-size:1.15rem}
.runner-lane{position:absolute;left:0;right:0;bottom:0;height:60px;background:repeating-linear-gradient(90deg,#ffffff1f 0 3px,transparent 3px 80px),linear-gradient(#1a5a28,#134a20);border-top:2px solid #ffffff30}
.runner{position:absolute;bottom:14px;left:-70px;width:58px;height:72px;image-rendering:pixelated;background:url(media/runner.png) 0 0/232px 72px;animation:runcycle .42s steps(4) infinite,runacross 7s linear infinite}
.ball{display:none}
@keyframes runcycle{to{background-position:-232px 0}}
@keyframes runacross{to{left:calc(100% + 70px)}}

/* Footer */
.foot{border-top:1px solid var(--line);padding:40px var(--gutter) max(40px,env(safe-area-inset-bottom))}
.foot-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start}
.foot-brand p{color:var(--muted);font-size:.9rem;margin-top:.6rem}
.foot nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.foot nav a{color:#c9d0db;text-decoration:none;font-size:.95rem}
.foot nav a:hover{color:#fff}
.foot .fine{grid-column:1/-1}
@media (max-width:700px){.foot-inner{grid-template-columns:1fr}}

.sound-toggle{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:60;width:44px;height:44px;display:grid;place-items:center;background:#151922e6;border:1px solid var(--line);color:#8a94a6;cursor:pointer}
.sound-toggle svg{width:22px;height:22px;fill:currentColor}
.sound-toggle .wave{opacity:0}
.sound-toggle[aria-pressed="true"]{color:var(--gold)}
.sound-toggle[aria-pressed="true"] .wave{opacity:1}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .runner,.ball{display:none}
}

/* ===== 8-bit layer =====
   Makes the site read like a cartridge-era game: pixel fonts, stair-stepped
   corners, flat colours, hard 4px shadows, no blur or soft gradients. */
:root{--px:4px;--ink:#000}
html{-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset}
body{font-size:22px;line-height:1.25;letter-spacing:.01em}
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 3px,#0000001f 3px 4px)}
h1,h2,h3{line-height:1.3;letter-spacing:0;text-shadow:var(--px) var(--px) 0 var(--ink)}
h2{font-size:clamp(1.3rem,3.4vw,2.3rem)}
h3{font-size:clamp(.82rem,1.5vw,1.02rem)}
code{font-family:var(--body);font-size:1em;border-radius:0}
.wordmark{letter-spacing:0;text-shadow:var(--px) var(--px) 0 #5f060c}
.wordmark::after{border-bottom-style:solid;border-bottom-width:var(--px);bottom:-.24em;opacity:1}
.wordmark.small{font-size:1rem}
.wordmark.small::after{border-bottom-width:3px;bottom:-6px}
.brand img{border-radius:0;image-rendering:pixelated}

/* Pixel buttons: stepped corners, flat fill, hard bevel, one-step press */
.btn{--h:56px;--c:var(--panel-2);--hi:#ffffff45;--lo:#00000070;height:var(--h);padding:0 1.25rem;font:400 .8rem/1 var(--display);letter-spacing:0;background:var(--c)!important;
  box-shadow:inset 0 calc(var(--px) * -1) 0 var(--lo),inset 0 var(--px) 0 var(--hi),inset var(--px) 0 0 var(--hi),inset calc(var(--px) * -1) 0 0 var(--lo)!important;
  clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
  transition:none;text-shadow:2px 2px 0 #0009}
.btn svg{width:20px;height:20px}
.btn:hover{filter:none;--hi:#ffffff80}
.btn:active,.btn.pressed{transform:translateY(var(--px));animation:none;--hi:#00000070;--lo:#ffffff30}
.btn-red{--c:var(--red)}
.btn-gold{--c:var(--gold);text-shadow:none}
.btn-ghost{--c:#1d232f}
.btn-sm{--h:42px;font-size:.62rem;padding:0 .95rem}

/* Chrome */
.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0b0d12;border-bottom:var(--px) solid var(--ink);box-shadow:0 var(--px) 0 #ffffff14}
.nav a{font:400 .6rem var(--display);letter-spacing:0}
.nav a:hover{color:var(--gold)}
.eyebrow,.jt-live,.ticker span,.kicker,.tag,.chips li,.sb-name,.sb-mid,.td-caption,.platform,.num,.pixel,.gal-item figcaption,.steps li::before{font-family:var(--display);letter-spacing:0}
.eyebrow{font-size:.52rem;border:0;box-shadow:inset 0 0 0 2px #ffd23f55}
.ticker span{font-size:.7rem}
.kicker{font-size:.6rem}
.tag,.chips li{font-size:.48rem;line-height:1.5}
.chips li{border:0;box-shadow:inset 0 0 0 2px #ffffff30}
.hero-lights i{filter:none;opacity:.1}
.hero-mark{font-size:clamp(2.5rem,7vw,5.2rem);line-height:1;margin:.9rem 0 .7rem;text-shadow:6px 6px 0 #000}
.headline{font-size:clamp(.92rem,1.9vw,1.4rem);line-height:1.5;text-shadow:3px 3px 0 #000}
.sub,.lead,.show-text p,.tile p,.how-steps p,.faq details p,.final p,.steps li,.meta,.note{font-size:1.3rem;line-height:1.2}
.fine,.jumbotron figcaption,.foot-brand p,.mini p,.mini summary,.foot nav a{font-size:1.1rem}
.jt-frame{border:var(--px) solid #000;outline:none;box-shadow:0 0 0 var(--px) #3a4458,0 0 0 calc(var(--px) * 2) #000,12px 12px 0 calc(var(--px) * 2) #ff1e1e40}

/* Panels: pixel frame + hard offset shadow instead of soft gradients */
.show-media,.tile,.install-card,.controls,.gal-item,.scoreboard,.how-steps{border:0!important;background:var(--panel)!important;box-shadow:0 0 0 var(--px) #000,inset 0 0 0 var(--px) #3a4458,8px 8px 0 var(--px) #00000099}
.show-row.flip .show-media{box-shadow:0 0 0 var(--px) #000,inset 0 0 0 var(--px) #3a4458,-8px 8px 0 var(--px) #00000099}
.tile{transition:none;--edge:#3a4458;box-shadow:0 0 0 var(--px) #000,inset 0 0 0 var(--px) var(--edge),8px 8px 0 var(--px) #00000099}
.tile:hover{transform:translate(-2px,-2px);box-shadow:0 0 0 var(--px) #000,inset 0 0 0 var(--px) var(--edge),10px 10px 0 var(--px) #00000099}
.tile h3{font-size:clamp(.8rem,1.4vw,.98rem);line-height:1.45}
.t-online,.t-franchise,.t-team,.t-playbook,.t-zone,.t-style,.t-soon{border-top:0!important}
.t-online{--edge:#2f8fe0}.t-franchise{--edge:var(--red)}.t-team{--edge:#4a9fe0}.t-playbook{--edge:#e0972f}.t-zone{--edge:#8b6bd6}.t-style{--edge:#38b06a}.t-soon{--edge:#ffd23f88}
.bento,.install-grid,.gallery{gap:24px}
.install-card{--edge:#3a4458;box-shadow:0 0 0 var(--px) #000,inset 0 0 0 var(--px) var(--edge),8px 8px 0 var(--px) #00000099}
#android{--edge:var(--red)}#iphone{--edge:var(--gold)}
.install-card.match{box-shadow:0 0 0 var(--px) var(--gold),0 0 0 calc(var(--px) * 2) #000,inset 0 0 0 var(--px) var(--gold),10px 10px 0 calc(var(--px) * 2) #ffd23f33}
.install-card h3{font-size:1.1rem;line-height:1.45}
.hero{background:#0b0d12}
.install{background:#0e1219}
.td-band{background:#0b2414}
.final{background:#0b0d12}
.steps li{padding-left:2.9rem}
.steps li::before{font-size:.6rem;border:0;box-shadow:inset 0 0 0 2px var(--gold);width:2rem;height:2rem}
.note{border-left-width:var(--px)}
.how-steps li{border-color:#000!important;border-width:0 var(--px) 0 0}
.how-steps h3{font-size:.86rem;line-height:1.45}
.controls dt{font:400 .7rem var(--display);letter-spacing:0;color:var(--gold)}
.controls dd{font-size:1.15rem}
.sb-score{font-size:clamp(2.2rem,6vw,3.6rem);text-shadow:4px 4px 0 #6b5200}
.sb-flash{font-size:clamp(1.3rem,4.6vw,2.6rem);text-shadow:4px 4px 0 #5f060c}
.final h2{font-size:clamp(2rem,6.4vw,4.2rem);line-height:1.15}
.faq details{border-bottom:var(--px) dotted #3a4458}
.faq summary{font:400 .74rem/1.6 var(--display);letter-spacing:0}
.faq summary::after{font-family:var(--display);font-size:.9rem}
.foot{border-top:var(--px) solid #000;box-shadow:inset 0 var(--px) 0 #ffffff14}
.sound-toggle{border:0;box-shadow:0 0 0 var(--px) #000,inset 0 0 0 2px #3a4458;background:#151922}
.reveal{transform:translateY(16px);transition:opacity .4s steps(4),transform .4s steps(4)}
.install-grid>*,.bento>*,.gallery>*{min-width:0}
.btn-block{white-space:normal;height:auto;min-height:var(--h);padding-block:.7rem;line-height:1.6;text-align:center}
@media (max-width:900px){.how-steps li{border-width:0}}
@media (max-width:520px){body{font-size:20px}.btn{font-size:.68rem;padding:0 .8rem}.eyebrow{font-size:.44rem}.nav a{font-size:.5rem}}