:root{color-scheme:dark;--cyan:#5ef2ff;--yellow:#ffcc4a;--pink:#ff4778;--ink:#070815;--panel:rgba(10,13,29,.78);--line:rgba(126,230,255,.18)}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7fbff;touch-action:none}
button{font:inherit}
.game-shell{position:relative;width:100%;height:100%;min-height:540px;overflow:hidden;background:radial-gradient(circle at 50% 42%,#172b42 0,#090d1c 45%,#050610 100%)}
#game{position:absolute;inset:0;width:100%;height:100%;display:block}
.topbar{position:absolute;z-index:3;left:clamp(18px,4vw,60px);right:clamp(18px,4vw,60px);top:max(18px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;font-size:clamp(16px,2vw,22px);letter-spacing:.18em;font-weight:500}.brand strong{color:var(--cyan);font-weight:850}.brand-mark{font-size:30px;color:var(--cyan);filter:drop-shadow(0 0 12px rgba(94,242,255,.8))}
.status-pill{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;border:1px solid var(--line);background:rgba(6,10,22,.58);padding:9px 15px;border-radius:30px;font-size:11px;letter-spacing:.18em;font-weight:750;backdrop-filter:blur(12px)}
.pulse{width:7px;height:7px;border-radius:50%;background:#6bffad;box-shadow:0 0 12px #6bffad;animation:pulse 1.4s infinite}.icon-btn{pointer-events:auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(8,12,26,.68);color:var(--cyan);font-size:20px;cursor:pointer}
.hud{position:absolute;z-index:3;top:88px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:110px 105px 110px;align-items:start;text-align:left;pointer-events:none}.metric{display:flex;flex-direction:column;gap:2px}.metric.center{text-align:center}.metric.right{text-align:right}.metric span,.level-card span,.result-score span,.result-grid span{font-size:10px;letter-spacing:.22em;color:#8ca1b9;font-weight:750}.metric strong{font:800 clamp(26px,3vw,38px)/1 "Arial Narrow",Impact,sans-serif;letter-spacing:.06em}.metric.center strong{color:var(--yellow)}.metric.right strong{color:var(--cyan)}
.level-card{position:absolute;z-index:3;left:clamp(18px,4vw,60px);top:50%;transform:translateY(-50%);width:150px;padding:15px 16px;background:linear-gradient(145deg,rgba(12,18,36,.82),rgba(8,11,23,.55));border-left:2px solid var(--cyan);clip-path:polygon(0 0,92% 0,100% 18%,100% 100%,0 100%);backdrop-filter:blur(8px);pointer-events:none}.level-card b{color:#fff;font-size:18px}.level-track{height:3px;background:#202c3d;margin:10px 0 8px}.level-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--yellow));box-shadow:0 0 9px var(--cyan);transition:width .2s}.level-card small{font-size:11px;color:#8ca1b9}
.message{position:absolute;z-index:4;left:50%;top:21%;transform:translate(-50%,-10px);opacity:0;color:#fff;font-size:12px;font-weight:800;letter-spacing:.22em;background:rgba(6,9,20,.7);border:1px solid var(--cyan);padding:9px 15px;transition:.25s;pointer-events:none}.message.show{opacity:1;transform:translate(-50%,0)}
.overlay{position:absolute;z-index:10;inset:0;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 44%,rgba(15,32,49,.44),rgba(3,5,12,.88));opacity:0;visibility:hidden;transition:.35s;backdrop-filter:blur(4px)}.overlay.active{opacity:1;visibility:visible}.panel{position:relative;width:min(620px,94vw);padding:clamp(28px,5vw,54px);text-align:center;background:linear-gradient(145deg,rgba(17,24,47,.94),rgba(6,8,19,.95));border:1px solid rgba(94,242,255,.26);clip-path:polygon(0 0,94% 0,100% 11%,100% 100%,6% 100%,0 89%);box-shadow:0 24px 80px rgba(0,0,0,.55),inset 0 0 50px rgba(79,195,255,.04)}.panel:before,.panel:after{content:"";position:absolute;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.panel:before{width:90px;height:2px;top:0;left:8%}.panel:after{height:70px;width:2px;right:0;bottom:16%}.eyebrow{font-size:11px;letter-spacing:.24em;color:#7e9ab5;font-weight:750}.panel h1{margin:18px 0 12px;font:900 clamp(58px,10vw,96px)/.74 "Arial Narrow",Impact,sans-serif;letter-spacing:-.025em}.panel h1 em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--cyan);filter:drop-shadow(0 0 11px rgba(94,242,255,.35))}.panel p{width:min(470px,100%);margin:24px auto;color:#b7c5d5;font-size:16px;line-height:1.55}.controls-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 20px;margin:25px 0;color:#8297ac;font-size:11px;letter-spacing:.08em}.controls-row kbd,.controls-row b{border:1px solid rgba(94,242,255,.35);color:#dffcff;background:#101a2b;padding:4px 7px;border-radius:3px;font-size:10px}.primary{margin-top:8px;border:0;background:var(--cyan);color:#061118;padding:16px 24px;min-width:220px;font-weight:900;font-size:13px;letter-spacing:.16em;cursor:pointer;clip-path:polygon(0 0,94% 0,100% 30%,100% 100%,0 100%);box-shadow:0 0 28px rgba(94,242,255,.2)}.primary:hover{background:#b9faff}.primary span{margin-left:12px;font-size:18px}
.result-panel h2{margin:20px 0 26px;font:850 clamp(33px,6vw,54px)/1 "Arial Narrow",Impact,sans-serif;letter-spacing:.04em}.result-score{display:flex;flex-direction:column;gap:7px}.result-score strong{font:900 64px/1 "Arial Narrow",Impact,sans-serif;color:var(--yellow)}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);margin:26px 0 18px;border-block:1px solid var(--line)}.result-grid div{padding:16px 8px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}.result-grid div:last-child{border:0}.result-grid b{font-size:22px}
footer{position:absolute;z-index:3;left:clamp(18px,4vw,60px);right:clamp(18px,4vw,60px);bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;color:#71869b;pointer-events:none}.danger{display:flex;align-items:center;gap:8px}.danger i{width:7px;height:7px;background:var(--pink);border-radius:50%;box-shadow:0 0 10px var(--pink)}
@keyframes pulse{50%{opacity:.35;transform:scale(.7)}}
@media(max-width:700px){.status-pill{display:none}.hud{top:72px;grid-template-columns:92px 80px 92px}.level-card{top:auto;bottom:54px;left:18px;transform:none;width:132px;padding:11px 12px}.topbar{top:max(10px,env(safe-area-inset-top))}.brand{font-size:14px}.brand-mark{font-size:24px}.icon-btn{width:38px;height:38px}.message{top:17%}.panel{padding:28px 22px}.panel p{font-size:15px}.controls-row{display:none}footer{left:auto;right:18px;bottom:max(18px,env(safe-area-inset-bottom))}footer>span:first-child{display:none}.game-shell{min-height:460px}}
@media(max-height:650px){.hud{top:62px}.level-card{display:none}.panel{padding:24px}.panel h1{font-size:58px;margin:13px 0}.panel p{margin:15px auto}.controls-row{margin:14px 0}.result-score strong{font-size:48px}.result-grid{margin:16px 0}}