@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
:root{--ink:#eef6ff;--cyan:#52f1ff;--cyan2:#12a8d8;--orange:#ff8a3d;--red:#ff425f;--glass:rgba(4,11,25,.72);--line:rgba(98,231,255,.22)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02040a;color:var(--ink);font-family:'Space Mono',monospace}body{touch-action:none;overscroll-behavior:none}button{font:inherit;color:inherit}
#game-shell{position:relative;width:100%;height:100%;min-height:480px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#10213b 0,#050814 48%,#020308 100%)}#game{position:absolute;inset:0;width:100%;height:100%;display:block}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 40%,rgba(0,0,0,.46) 80%,rgba(0,0,0,.82) 100%)}.scanlines{position:absolute;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(120,225,255,.25) 4px)}
.hud{position:absolute;z-index:5;left:0;right:0;top:0;display:grid;grid-template-columns:minmax(190px,1fr) auto auto minmax(250px,1fr) 42px;align-items:center;gap:26px;padding:18px 26px;background:linear-gradient(180deg,rgba(2,5,13,.94),rgba(2,5,13,.48),transparent);text-shadow:0 0 12px rgba(82,241,255,.35)}.brand{display:flex;align-items:center;gap:12px;font-family:'Barlow Condensed',sans-serif;font-size:19px;letter-spacing:.2em}.brand b{color:var(--cyan)}.brand-mark{width:37px;height:37px;display:grid;place-items:center;border:1px solid var(--cyan);clip-path:polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%);font-size:12px;color:var(--cyan)}.stat{display:flex;flex-direction:column;min-width:82px}.stat small,.meters label small{color:#8b9bb3;font-size:9px;letter-spacing:.18em}.stat strong{font-size:18px;color:#fff;letter-spacing:.08em}.meters{display:grid;grid-template-columns:1fr 1fr;gap:14px}.meters label{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.12em;color:#abc0d2}.meters label span{float:right}.meters i{display:block;width:100%;height:5px;margin-top:5px;background:rgba(255,255,255,.12);transform:skewX(-18deg);overflow:hidden}.meters b{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--cyan2),var(--cyan));box-shadow:0 0 10px var(--cyan);transition:width .15s}.meters label:first-child b{background:linear-gradient(90deg,#d87b36,var(--orange));box-shadow:0 0 10px var(--orange)}.icon-button{border:1px solid var(--line);background:rgba(6,15,31,.65);width:38px;height:38px;border-radius:50%;cursor:pointer;color:var(--cyan)}
.overlay{position:absolute;z-index:8;inset:0;display:flex;opacity:0;visibility:hidden;pointer-events:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 24px 40px;background:radial-gradient(circle at 50% 45%,rgba(6,14,31,.34),rgba(1,3,8,.88));transition:opacity .3s,visibility .3s}.overlay.active{opacity:1;visibility:visible;pointer-events:auto}.eyebrow{font-family:'Barlow Condensed',sans-serif;color:var(--cyan);font-weight:700;letter-spacing:.36em;font-size:12px;margin-bottom:13px}.eyebrow.danger{color:var(--red)}h1,h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(70px,13vw,148px);line-height:.67;letter-spacing:-.055em;margin:10px 0 28px;font-weight:800;text-shadow:0 0 34px rgba(82,241,255,.18)}h1 span{color:transparent;-webkit-text-stroke:2px var(--cyan);filter:drop-shadow(0 0 10px rgba(82,241,255,.4))}h2{font-size:clamp(64px,10vw,116px);line-height:.78;color:#fff;text-shadow:0 0 28px rgba(255,66,95,.28)}.overlay>p{max-width:590px;margin:0 0 28px;color:#9fb1c5;font-family:'Barlow Condensed',sans-serif;font-size:18px;line-height:1.45;letter-spacing:.03em}.primary{border:1px solid var(--cyan);background:rgba(6,26,40,.8);padding:15px 23px;min-width:220px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.14em;box-shadow:inset 0 0 0 1px rgba(82,241,255,.12),0 0 25px rgba(82,241,255,.13);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:.2s}.primary:hover{background:var(--cyan);color:#021019;box-shadow:0 0 28px rgba(82,241,255,.45)}.primary span{float:right;font-size:20px}.controls-list{display:flex;gap:24px;margin-top:28px;color:#74879b;font-size:10px;letter-spacing:.08em}.controls-list kbd{font:inherit;color:#c4d5e5;border:1px solid #415266;border-radius:3px;padding:2px 5px;background:rgba(255,255,255,.05)}.mobile-note{display:none;color:#7f95aa;font-size:11px;margin-top:18px}.result-grid{display:flex;gap:1px;margin:0 0 28px;background:rgba(91,190,217,.18)}.result-grid div{min-width:145px;padding:16px 24px;background:rgba(4,11,24,.94)}.result-grid small{display:block;font-size:9px;color:#8294aa;letter-spacing:.14em;margin-bottom:5px}.result-grid strong{font-family:'Barlow Condensed',sans-serif;font-size:28px}.pause-card{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);padding:18px 34px;border:1px solid var(--cyan);background:var(--glass);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:32px;letter-spacing:.3em;opacity:0;visibility:hidden;transition:.2s}.pause-card.active{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.alert{position:absolute;z-index:6;left:50%;top:25%;transform:translate(-50%,-10px);font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.22em;font-size:18px;color:var(--orange);opacity:0;transition:.25s;text-shadow:0 0 16px currentColor}.alert.show{opacity:1;transform:translate(-50%,0)}
.touch-controls{position:absolute;z-index:6;left:0;right:0;bottom:max(24px,env(safe-area-inset-bottom));display:none;justify-content:space-between;align-items:flex-end;padding:0 26px;pointer-events:none}.stick{width:120px;height:120px;border-radius:50%;border:1px solid rgba(82,241,255,.28);background:radial-gradient(circle,rgba(21,58,78,.2),rgba(4,12,24,.45));box-shadow:inset 0 0 24px rgba(82,241,255,.08);pointer-events:auto;position:relative}.stick:before,.stick:after{content:"";position:absolute;background:rgba(82,241,255,.12)}.stick:before{width:1px;height:100%;left:50%}.stick:after{height:1px;width:100%;top:50%}.stick-knob{position:absolute;width:48px;height:48px;border:1px solid var(--cyan);border-radius:50%;left:35px;top:35px;background:rgba(13,51,70,.82);box-shadow:0 0 16px rgba(82,241,255,.25)}.fire{width:92px;height:92px;border-radius:50%;border:1px solid var(--orange);background:radial-gradient(circle,rgba(255,138,61,.26),rgba(42,15,9,.72));box-shadow:inset 0 0 20px rgba(255,138,61,.16),0 0 20px rgba(255,138,61,.1);pointer-events:auto;font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.14em}.fire.active{transform:scale(.94);background:rgba(255,138,61,.4)}.footer-note{position:absolute;z-index:5;left:20px;bottom:14px;font-size:8px;letter-spacing:.15em;color:rgba(164,186,205,.42)}
@media(max-width:780px){.hud{grid-template-columns:1fr auto auto;gap:12px;padding:12px 14px}.brand{font-size:15px}.brand-mark{width:31px;height:31px}.stat{min-width:60px}.stat:nth-of-type(2){display:none}.meters{position:absolute;top:55px;left:14px;right:14px}.icon-button{grid-column:3;grid-row:1}.overlay{padding-top:110px}.overlay>p{font-size:16px;max-width:340px}.controls-list{display:none}.mobile-note{display:block}.touch-controls{display:flex}.footer-note{display:none}.result-grid div{min-width:95px;padding:12px 8px}.result-grid strong{font-size:22px}.result-grid small{font-size:7px}h1{font-size:clamp(72px,25vw,118px)}}
@media(pointer:coarse){.touch-controls{display:flex}}
@media(max-height:600px){h1,h2{font-size:64px;margin-bottom:18px}.overlay>p{font-size:14px;margin-bottom:16px}.controls-list{margin-top:16px}.touch-controls{transform:scale(.82);transform-origin:bottom}.hud{padding-top:8px}}