@font-face{font-family:PackMono;src:local("JetBrains Mono"),local("DejaVu Sans Mono");font-display:swap}
:root{--ink:#eafffb;--muted:#8eabb2;--bg:#02070d;--panel:#07131f;--line:rgba(123,255,218,.17);--mint:#67ffd0;--lime:#baff36;--cyan:#24e8e0;--magenta:#f04aa4;--shadow:0 0 40px rgba(53,255,205,.15)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font-family:PackMono,"SFMono-Regular",Consolas,monospace;background:radial-gradient(circle at 50% -20%,#173044 0,#06121d 38%,#02070d 72%);overflow-x:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
.ambient{position:fixed;z-index:-1;border-radius:999px;filter:blur(100px);opacity:.15;pointer-events:none}
.ambient-one{width:30rem;height:30rem;top:5%;left:-15rem;background:#00ffd1}
.ambient-two{width:35rem;height:35rem;right:-20rem;bottom:0;background:#d52dff}
.app-shell{width:min(1440px,100%);margin:0 auto;padding:0 clamp(16px,3vw,48px)}
.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:clamp(17px,2vw,24px);font-weight:500;letter-spacing:.04em}.brand strong{color:var(--mint)}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(103,255,208,.5);background:linear-gradient(145deg,rgba(103,255,208,.14),rgba(36,232,224,.03));clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}
.brand-mark svg{width:28px;fill:var(--mint)}.brand-mark .brand-eye{fill:#07131f}.brand-mark .brand-pack{fill:#baff36}
.network-pill{display:flex;align-items:center;gap:9px;color:#a4bdc3;font-size:11px;letter-spacing:.13em;border:1px solid var(--line);padding:10px 14px;background:rgba(6,18,28,.8)}.network-pill span,.status-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime)}
.hero{padding:clamp(28px,5vw,66px) 0 28px}
.title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}.eyebrow{color:var(--mint);font-size:10px;letter-spacing:.22em;margin:0 0 10px}.title-row h1{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(34px,6vw,76px);line-height:.88;letter-spacing:.025em;margin:0;font-weight:900}.title-row h1 span{color:var(--mint);text-shadow:0 0 28px rgba(103,255,208,.38)}
.season-tag{font-size:10px;letter-spacing:.18em;color:#b7cdd1;padding:8px 0;border-bottom:1px solid var(--mint);white-space:nowrap}
.game-frame{position:relative;aspect-ratio:16/9;min-height:260px;overflow:hidden;background:#05101a;border:1px solid rgba(103,255,208,.46);box-shadow:0 0 0 7px rgba(25,88,80,.08),0 30px 80px rgba(0,0,0,.5),var(--shadow);isolation:isolate}
.game-frame::before,.game-frame::after{content:"";position:absolute;z-index:9;width:50px;height:50px;pointer-events:none}.game-frame::before{top:8px;left:8px;border-top:2px solid var(--mint);border-left:2px solid var(--mint)}.game-frame::after{right:8px;bottom:8px;border-right:2px solid var(--mint);border-bottom:2px solid var(--mint)}
canvas{display:block;width:100%;height:100%;touch-action:none;outline:none;background:#071321}
.hud{position:absolute;z-index:5;left:0;right:0;top:0;padding:clamp(14px,2.2vw,30px);display:grid;grid-template-columns:1fr auto 1fr;align-items:start;pointer-events:none;text-shadow:0 2px 5px #000}.hud-block{display:flex;flex-direction:column;gap:4px}.hud small{font-size:clamp(7px,.75vw,10px);color:#9ac1c4;letter-spacing:.16em}.hud strong{font-size:clamp(15px,2vw,28px);letter-spacing:.06em}.hud-right{text-align:right;align-items:flex-end}.hud-right strong{display:flex;align-items:center;gap:8px;color:var(--lime)}.hud-right img{width:clamp(17px,2vw,28px);filter:drop-shadow(0 0 7px #67ffd0)}
.hud-center{display:flex;gap:8px;align-items:center;padding:8px 13px;border:1px solid rgba(103,255,208,.24);background:rgba(4,14,23,.55);backdrop-filter:blur(8px);color:#c8dedc;font-size:clamp(8px,.85vw,11px);letter-spacing:.12em}
.overlay-panel{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(50px,8vw,100px) 24px 30px;background:radial-gradient(circle at 50% 54%,rgba(5,30,34,.4),rgba(2,8,14,.68));transition:opacity .22s ease,transform .22s ease}.overlay-panel.hidden{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.04)}
.mini-logo{font-size:clamp(12px,1.2vw,17px);font-weight:900;letter-spacing:.34em;color:#baff36;margin-bottom:16px}.mini-logo span{color:#67ffd0}
.overlay-panel h2{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(38px,6.2vw,88px);line-height:.82;letter-spacing:.02em;margin:0;color:white;text-shadow:0 7px 30px #000}.overlay-panel h2 em{font-style:normal;color:var(--mint)}
.overlay-panel>p:not(.eyebrow){max-width:620px;color:#b6c9cc;font-size:clamp(10px,1.1vw,14px);line-height:1.6;margin:20px 0}.overlay-panel>small{font-size:8px;letter-spacing:.16em;color:#85a0a4;margin-top:12px}
.primary-button{min-width:min(320px,76vw);border:1px solid var(--mint);background:linear-gradient(100deg,#48f4bd,#9cff40);color:#03100d;font-weight:900;letter-spacing:.08em;padding:7px 8px 7px 22px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:0 0 24px rgba(103,255,208,.26);clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px)}.primary-button span{padding:11px}.primary-button kbd{font:inherit;font-size:10px;border:1px solid rgba(0,0,0,.34);padding:10px 12px;background:rgba(0,0,0,.11)}.primary-button:hover,.primary-button:focus-visible{filter:brightness(1.12);box-shadow:0 0 38px rgba(103,255,208,.48)}
.results{display:flex;gap:30px;margin:22px 0}.results>div{min-width:120px;border:1px solid var(--line);background:rgba(3,14,22,.7);padding:12px}.results small{display:block;color:#91a9ad;font-size:8px;letter-spacing:.14em}.results strong{font-size:30px;color:var(--lime)}
.milestone{position:absolute;z-index:7;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;transform:scale(.75);background:radial-gradient(circle,rgba(71,255,200,.31),rgba(3,10,16,0) 58%);text-shadow:0 0 25px var(--mint)}.milestone.show{animation:pulseReveal 1.25s ease both}.milestone strong{font:900 clamp(68px,12vw,170px)/.8 Impact,sans-serif;color:#fff}.milestone span{color:var(--mint);font-size:clamp(9px,1.3vw,16px);letter-spacing:.28em;margin-top:18px}
.scanlines{position:absolute;z-index:8;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(91,255,220,.13) 4px)}
.mobile-controls{display:none;margin-top:14px;align-items:center;justify-content:space-between;border:1px solid var(--line);background:rgba(7,19,31,.86);padding:10px 10px 10px 16px}.mobile-controls div{display:flex;flex-direction:column;gap:3px}.mobile-controls small{color:#749398;font-size:8px;letter-spacing:.15em}.mobile-controls strong{font-size:11px}.mobile-controls button{border:1px solid var(--mint);color:#041510;background:var(--mint);font-weight:900;padding:13px 20px;letter-spacing:.08em;min-width:130px}.mobile-controls button span{font-size:18px}
.mission-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:rgba(5,15,24,.72);margin:18px 0 38px}.mission-strip article{display:flex;gap:14px;padding:22px;min-height:116px}.mission-strip article+article{border-left:1px solid var(--line)}.mission-strip article>span{font:900 31px/1 Impact,sans-serif;color:rgba(103,255,208,.22)}.mission-strip div{display:flex;flex-direction:column}.mission-strip small{font-size:8px;letter-spacing:.14em;color:var(--mint)}.mission-strip strong{font:900 24px/1.1 Impact,sans-serif;letter-spacing:.04em}.mission-strip p{color:#718e94;font:10px/1.5 PackMono,monospace;margin:8px 0 0}
footer{border-top:1px solid var(--line);padding:24px 0 34px;display:flex;justify-content:space-between;gap:20px;color:#58757c;font-size:8px;letter-spacing:.13em}
@keyframes pulseReveal{0%{opacity:0;transform:scale(.65)}20%{opacity:1;transform:scale(1.06)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
@media(max-width:780px){.app-shell{padding:0 12px}.topbar{height:64px}.network-pill{font-size:0;padding:10px}.network-pill::after{content:"ONLINE";font-size:8px}.brand{font-size:16px}.brand-mark{width:32px;height:32px}.hero{padding:25px 0 14px}.title-row{align-items:center}.title-row h1{font-size:36px}.season-tag{font-size:8px}.game-frame{min-height:0}.hud{padding:12px}.hud-center{display:none}.overlay-panel{padding:50px 14px 18px}.overlay-panel h2{font-size:clamp(33px,9vw,58px)}.overlay-panel>p:not(.eyebrow){font-size:9px;margin:12px 0}.overlay-panel>small{display:none}.primary-button{min-width:min(260px,75vw);padding-left:12px}.primary-button span{padding:8px}.primary-button kbd{padding:8px}.mobile-controls{display:flex}.mission-strip{grid-template-columns:1fr}.mission-strip article{min-height:auto;padding:17px}.mission-strip article+article{border-left:0;border-top:1px solid var(--line)}footer{flex-direction:column;line-height:1.6}.results{margin:12px 0}.results>div{padding:8px}.results strong{font-size:22px}}
@media(max-width:430px){.title-row h1{font-size:30px}.game-frame{aspect-ratio:16/10}.overlay-panel h2{font-size:32px}.mini-logo{margin-bottom:10px}.results{gap:8px}.results>div{min-width:102px}.hud strong{font-size:13px}.hud small{font-size:6px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.ambient{display:none}.milestone.show{animation-duration:.01ms}}