:root{--bg:#0b0d0c;--card:#111512;--edge:#262b26;--txt:#e8eae6;--mut:#8b9188;--gold:#ffd23e;--red:#ff4b3a;--green:#39d353}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:26px 14px 34px}
header{max-width:980px;width:100%;margin-bottom:14px}
h1{font-size:clamp(22px,3.4vw,32px);font-weight:800;letter-spacing:-.5px}
header p{color:var(--mut);font-size:14px;margin-top:6px}
.card{position:relative;max-width:980px;width:100%;background:linear-gradient(180deg,#141814,#0e120e);
 border:1px solid var(--edge);border-radius:14px;padding:16px 16px 14px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.glogo{font-family:'VT323',monospace;font-size:26px;color:var(--gold);letter-spacing:2px;display:flex;align-items:center;gap:8px}
.glogo i{width:10px;height:10px;background:var(--green);border-radius:50%;box-shadow:0 0 10px var(--green);animation:bl 2s steps(2) infinite}
@keyframes bl{50%{opacity:.2}}
.stats{display:flex;gap:22px;flex-wrap:wrap}
.stat{text-align:center}
.stat b{display:block;font-family:'VT323',monospace;font-size:24px;line-height:1;color:#fff}
.stat span{font-size:9px;letter-spacing:1.5px;color:var(--mut);text-transform:uppercase}
.fsbtn{position:absolute;top:10px;right:10px;z-index:30;background:#1a1f1a;border:1px solid var(--edge);
 color:var(--txt);font-size:12px;padding:7px 11px;border-radius:8px;cursor:pointer}
.fsbtn:hover{border-color:var(--gold)}
.wrap{display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden;background:#000}
.stage{position:relative}
canvas#game{width:100%;height:100%;image-rendering:pixelated;display:block;cursor:crosshair}
#card:fullscreen{max-width:none;width:100%;height:100%;display:flex;flex-direction:column;gap:10px;border-radius:0}
#card:fullscreen .wrap{flex:1;min-height:0}
#card:fullscreen .topbar,#card:fullscreen .bottom{flex:0 0 auto}
/* HUD */
.hud{position:absolute;inset:0;pointer-events:none;line-height:1}
.cross{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1px 0 0 -1px;background:var(--green);
 box-shadow:0 -9px 0 var(--green),0 9px 0 var(--green),-9px 0 0 var(--green),9px 0 0 var(--green);opacity:.9}
.hit{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;transition:opacity .08s}
.hit::before,.hit::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:2px;background:#fff;margin:-1px 0 0 -15px}
.hit::before{transform:rotate(45deg)}.hit::after{transform:rotate(-45deg)}
.hit.on{opacity:1}
.vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(255,30,20,.55));opacity:0;transition:opacity .25s}
.hpbox{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;gap:8px}
.hpbar{width:170px;height:12px;border:1px solid #fff3;background:#0008}
.hpbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff4b3a,#ff8a70);transition:width .15s}
.hpbox b{font-family:'VT323',monospace;font-size:24px;color:#fff}
.spdbox{position:absolute;right:14px;bottom:10px;text-align:right}
.spdbox b{font-family:'VT323',monospace;font-size:40px;color:var(--gold);text-shadow:0 0 14px rgba(255,210,62,.4)}
.spdbox span{display:block;font-size:9px;letter-spacing:1.5px;color:var(--mut);text-transform:uppercase}
#mm{position:absolute;top:12px;right:12px;width:118px;height:118px;opacity:.85;border:1px solid #ffffff22;border-radius:6px}
.banner{position:absolute;left:0;right:0;top:26%;text-align:center;font-family:'VT323',monospace;font-size:44px;
 color:var(--gold);text-shadow:0 0 18px rgba(255,210,62,.5);opacity:0;transition:opacity .3s}
.banner.on{opacity:1}
.tip{position:absolute;left:0;right:0;top:12%;text-align:center;font-size:12px;color:#cfd3cd;opacity:0;transition:opacity .5s}
.tip.on{opacity:.9}
/* оверлеи */
.ov{position:absolute;inset:0;background:rgba(5,7,5,.82);display:flex;flex-direction:column;align-items:center;
 justify-content:center;gap:14px;text-align:center;line-height:1.4;z-index:20}
.ov h2{font-family:'VT323',monospace;font-size:52px;color:var(--gold);letter-spacing:3px}
.ov h2.red{color:var(--red)}
.ov p{font-size:13px;color:#c9cdc7;max-width:430px}
.ov .keys{font-size:12px;color:var(--mut);display:grid;gap:5px}
.ov .keys b{color:var(--gold);font-family:'VT323',monospace;font-size:16px}
.pill{background:#1a1f1a;border:1px solid var(--edge);color:#fff;font-size:14px;font-weight:600;
 padding:11px 26px;border-radius:999px;cursor:pointer;transition:border-color .15s,transform .06s}
.pill:hover{border-color:var(--gold)}
.pill:active{transform:scale(.97)}
.gg-note{min-height:18px;margin-top:10px;text-align:center;font-family:'VT323',monospace;font-size:17px;
 color:var(--gold);letter-spacing:1px;opacity:.9}
.bottom{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.hint{font-size:12px;color:var(--mut);margin-left:auto}
footer{margin-top:22px;color:#565b56;font-size:12px}
.hide{display:none!important}