:root{color-scheme:dark;--void:#020409;--panel:rgba(7,13,22,.92);--line:rgba(139,181,209,.2);--ice:#8de7ff;--amber:#ffb341;--red:#ff5e64;--text:#f1f6f9;--muted:#8292a1}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--void)}body{color:var(--text);font-family:"Arial Narrow","Segoe UI",sans-serif;font-size:16px;user-select:none;-webkit-user-select:none;touch-action:none}button{font:inherit}.game-shell{position:fixed;inset:0;display:grid;grid-template-rows:68px 1fr 34px;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:radial-gradient(circle at 76% 10%,rgba(32,104,145,.14),transparent 35%),linear-gradient(180deg,#060913,#020408)}.topbar,.footer-bar{position:relative;z-index:10;display:flex;align-items:center}.topbar{justify-content:space-between;padding:0 8px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{position:relative;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(141,231,255,.4);transform:rotate(45deg)}.brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--ice);opacity:.75}.brand-mark:before{width:20px;height:1px}.brand-mark:after{width:1px;height:20px}.brand-mark i{width:8px;height:8px;border:1px solid var(--amber);border-radius:50%}.brand-copy{display:flex;flex-direction:column;gap:3px}.brand-copy strong{font-weight:800;font-size:1rem;letter-spacing:.08em;text-transform:uppercase}.brand-copy small{color:var(--muted);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}.top-actions{display:flex;gap:8px}.icon-button{width:40px;height:40px;display:grid;place-items:center;color:#b8c5cf;background:rgba(10,16,27,.8);border:1px solid var(--line);border-radius:3px;cursor:pointer;transition:.2s}.icon-button:hover,.icon-button:focus-visible{color:var(--ice);border-color:rgba(141,231,255,.5);background:rgba(19,34,51,.9);outline:0}.icon-button svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.sound-off{display:none}.icon-button.muted .sound-off{display:block}.icon-button.muted .sound-on{display:none}.stage{position:relative;min-height:0;overflow:hidden;background:#03060c;border:1px solid rgba(115,155,183,.2);box-shadow:0 22px 70px rgba(0,0,0,.5),inset 0 0 80px rgba(14,41,63,.15);isolation:isolate}.stage:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(1,3,8,.68) 100%)}#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}.hud{position:absolute;z-index:8;top:20px;left:22px;right:22px;display:grid;grid-template-columns:1fr auto 1fr;pointer-events:none}.hud-block{display:flex;flex-direction:column;gap:2px}.hud-block span{color:var(--muted);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}.hud-block strong{font-variant-numeric:tabular-nums;font-size:1.08rem;font-weight:800;letter-spacing:.08em}.hud-wave{align-items:center}.hud-wave strong{color:var(--amber)}.hud-record{align-items:flex-end}.status-rail{position:absolute;z-index:8;left:22px;bottom:22px;width:min(250px,35vw);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;pointer-events:none}.status-label,.status-rail>span{font-size:.68rem;color:#9aa8b5;letter-spacing:.12em;text-transform:uppercase}.meter{height:5px;background:rgba(255,255,255,.1);overflow:hidden}.meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--amber),#ffdd7b);box-shadow:0 0 13px rgba(255,179,65,.7);transition:width .25s,background .25s}.combo{position:absolute;z-index:8;right:22px;bottom:22px;display:flex;align-items:baseline;gap:8px;opacity:0;transform:translateY(8px);transition:.2s}.combo.visible{opacity:1;transform:none}.combo small{color:var(--muted);text-transform:uppercase;letter-spacing:.14em}.combo strong{color:var(--ice);font-size:1.6rem;font-weight:900}.announcement{position:absolute;z-index:9;top:27%;left:50%;min-width:260px;padding:12px 28px;color:#ffe2a3;text-align:center;font-weight:900;text-transform:uppercase;letter-spacing:.14em;border-block:1px solid rgba(255,179,65,.6);background:linear-gradient(90deg,transparent,rgba(255,179,65,.1),transparent);opacity:0;transform:translate(-50%,-8px);pointer-events:none}.announcement.show{animation:announce 2.3s ease both}@keyframes announce{0%,100%{opacity:0;transform:translate(-50%,-8px)}15%,72%{opacity:1;transform:translate(-50%,0)}}.screen{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:56px;background:rgba(2,5,10,.44);backdrop-filter:blur(2px);visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}.screen.active{visibility:visible;opacity:1}#startScreen{grid-template-columns:minmax(320px,560px) minmax(220px,320px);gap:11vw;background:linear-gradient(90deg,rgba(3,6,12,.86),rgba(3,6,12,.25) 72%,rgba(3,6,12,.4))}.start-card{justify-self:end;max-width:560px}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--amber);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.eyebrow span{width:28px;height:1px;background:var(--amber);box-shadow:0 0 8px var(--amber)}h1,h2{margin:0;font-family:Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase}h1{margin-top:14px;font-size:clamp(3.2rem,6.6vw,7rem);line-height:.86;letter-spacing:.015em;text-shadow:0 8px 50px rgba(0,0,0,.55)}h1 em{color:transparent;font-style:normal;-webkit-text-stroke:1px rgba(141,231,255,.75);text-shadow:0 0 32px rgba(75,186,224,.22)}.start-card>p{max-width:520px;margin:26px 0 28px;color:#a9b7c3;line-height:1.65;font-size:1rem}.primary-button{width:min(100%,300px);min-height:58px;display:flex;justify-content:space-between;align-items:center;padding:0 8px 0 22px;color:#171005;background:var(--amber);border:0;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));cursor:pointer;font-weight:900;letter-spacing:.08em;text-transform:uppercase;transition:.18s}.primary-button b{width:42px;height:42px;display:grid;place-items:center;font-size:1.3rem;border-left:1px solid rgba(0,0,0,.22)}.primary-button:hover,.primary-button:focus-visible{filter:brightness(1.15);transform:translateY(-2px);outline:0}.primary-button:active{transform:translateY(1px)}.controls-hint{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;color:#778593;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.controls-hint span{display:flex;align-items:center;gap:7px}kbd{min-width:37px;padding:5px 7px;color:#bdc8d1;font:600 .66rem sans-serif;text-align:center;border:1px solid rgba(149,177,197,.28);border-radius:2px;background:rgba(12,20,31,.75);box-shadow:inset 0 -2px rgba(0,0,0,.35)}.mission-aside{position:relative;align-self:center;padding:72px 0 0;color:#8fa0ad}.mission-aside small{display:block;margin-bottom:7px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}.mission-aside strong{display:block;color:#dce8ee;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.mission-aside p{font-size:.76rem}.reticle{position:absolute;top:-20px;left:0;width:72px;height:72px;border:1px solid rgba(141,231,255,.25);border-radius:50%}.reticle:before,.reticle:after{content:"";position:absolute;top:50%;left:50%;background:var(--ice);opacity:.6}.reticle:before{width:92px;height:1px;transform:translate(-50%,-50%)}.reticle:after{width:1px;height:92px;transform:translate(-50%,-50%)}.reticle i{position:absolute;inset:15px;border:1px dashed rgba(141,231,255,.4);border-radius:50%;animation:spin 10s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.compact-card{width:min(440px,100%);padding:42px;text-align:center;background:rgba(6,11,19,.96);border:1px solid rgba(129,170,198,.25);box-shadow:0 28px 80px rgba(0,0,0,.6);clip-path:polygon(0 18px,18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}.card-icon{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 18px;color:var(--ice);font-weight:900;font-size:1.35rem;border:1px solid rgba(141,231,255,.5);transform:rotate(45deg)}.card-icon.warning{color:var(--red);border-color:rgba(255,94,100,.55)}.compact-card small{color:var(--muted);text-transform:uppercase;letter-spacing:.16em}.compact-card h2{margin:8px 0 28px;font-size:clamp(2rem,4vw,3.4rem)}.compact-card .primary-button{margin:0 auto}.text-button{margin-top:18px;padding:8px 16px;color:#8998a5;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:5px}.text-button:hover{color:var(--text)}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 0 22px;background:var(--line)}.result-grid span{display:flex;flex-direction:column;gap:7px;padding:15px 7px;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;background:#080d16}.result-grid strong{color:var(--text);font-size:1rem}.new-record{min-height:20px;margin:-5px 0 20px;color:var(--amber);font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:0}.new-record.visible{opacity:1}.mobile-controls{display:none;position:absolute;z-index:10;left:0;right:0;bottom:24px;align-items:flex-end;justify-content:space-between;padding:0 26px;pointer-events:none}.joystick,.fire-button{pointer-events:auto;touch-action:none}.joystick{position:relative;width:104px;height:104px;border:1px solid rgba(141,231,255,.24);border-radius:50%;background:rgba(5,13,22,.42)}.joystick:before,.joystick:after{content:"";position:absolute;inset:50% auto auto 50%;background:rgba(141,231,255,.15);transform:translate(-50%,-50%)}.joystick:before{width:78%;height:1px}.joystick:after{width:1px;height:78%}.joystick i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;border:1px solid rgba(141,231,255,.6);border-radius:50%;background:rgba(41,114,151,.24)}.fire-button{width:86px;height:86px;display:grid;place-items:center;align-content:center;gap:5px;color:var(--amber);background:rgba(38,24,8,.4);border:1px solid rgba(255,179,65,.55);border-radius:50%;text-transform:uppercase;letter-spacing:.12em;font-size:.6rem}.fire-button i{width:21px;height:21px;border:1px solid currentColor;border-radius:50%;box-shadow:inset 0 0 0 5px rgba(255,179,65,.12)}.fire-button.active{background:rgba(255,179,65,.18);box-shadow:0 0 32px rgba(255,179,65,.18)}.scanlines{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.055;background:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.12) 1px,transparent 1px,transparent 4px)}.corner{position:absolute;z-index:8;width:42px;height:42px;pointer-events:none}.corner-tl{top:9px;left:9px;border-top:1px solid rgba(141,231,255,.3);border-left:1px solid rgba(141,231,255,.3)}.corner-br{right:9px;bottom:9px;border-right:1px solid rgba(141,231,255,.3);border-bottom:1px solid rgba(141,231,255,.3)}.footer-bar{justify-content:space-between;padding:0 8px;color:#61707d;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase}.online-dot{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#57d8a3;box-shadow:0 0 8px #57d8a3}
@media(max-width:820px),(pointer:coarse){.game-shell{grid-template-rows:56px 1fr 26px;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}.brand-mark{width:30px;height:30px}.brand-copy strong{font-size:.76rem}.brand-copy small{font-size:.56rem}.icon-button{width:36px;height:36px}.hud{top:13px;left:13px;right:13px}.hud-block strong{font-size:.88rem}.hud-block span{font-size:.56rem}.status-rail{left:14px;bottom:140px;width:155px;grid-template-columns:1fr auto}.status-label{display:none}.combo{right:16px;bottom:140px}.mobile-controls{display:flex}.footer-tip{display:none}#startScreen{grid-template-columns:1fr;padding:28px;text-align:center;background:rgba(3,6,12,.68)}.start-card{justify-self:center}.start-card>p{margin:18px auto 22px;max-width:430px;font-size:.88rem}.eyebrow{justify-content:center}h1{font-size:clamp(3.2rem,14vw,5.2rem)}.primary-button{margin-inline:auto}.controls-hint,.mission-aside{display:none}.compact-card{padding:30px 22px}}
@media(max-height:620px){.game-shell{grid-template-rows:48px 1fr 22px}.brand-copy small,.footer-tip{display:none}#startScreen{padding:24px}h1{font-size:clamp(2.8rem,10vh,5rem)}.start-card>p{margin:15px 0 18px;line-height:1.4}.controls-hint{margin-top:14px}.mobile-controls{bottom:14px}.joystick{width:88px;height:88px}.fire-button{width:76px;height:76px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
