:root{--ink:#f4f5fa;--mut:#9aa3bd;--cob:#0f3fa6;--acc:#4f7dff;color-scheme:dark}
html,body{height:100%;margin:0;background:#05060a;color:var(--ink);font:400 16px/1.5 Inter,system-ui,sans-serif;overflow:hidden;touch-action:none;user-select:none}
canvas{display:block;position:fixed;inset:0;width:100%;height:100%}
.hud{z-index:5;position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 0;pointer-events:none;font-weight:600;letter-spacing:-.01em}
.hud img{width:34px;height:34px;display:block}
.hud .home{display:block;pointer-events:auto;cursor:pointer;border-radius:8px;transition:transform .15s}
.hud .home:hover{transform:scale(1.1) rotate(-6deg)}
.hud .home:focus-visible{outline:3px solid #8fb0ff;outline-offset:3px}
.hud small{display:block;color:var(--mut);font-weight:500;font-size:12px}
.hud b{font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.tb{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 24px);transform:translateX(-50%);width:min(240px,36vw);height:6px;background:#1a2040;border-radius:9px;overflow:hidden;pointer-events:none}
.tb i{display:block;height:100%;background:var(--acc);transform-origin:left}
#ov{position:fixed;inset:0;display:grid;place-items:center;background:rgba(5,6,10,.55);text-align:center;padding:20px}
#ov.off{display:none}
.card{max-width:460px}
.card h1{font:700 42px/1.1 Inter,sans-serif;letter-spacing:-.035em;margin:0 0 12px}
.card p{color:var(--mut);margin:0 0 20px}
.btn{background:var(--ink);color:#05060a;border:0;border-radius:99px;font:600 16px Inter,sans-serif;padding:12px 24px;margin:4px;cursor:pointer}
.btn.o{background:none;color:var(--ink);border:1px solid #3a4260}
kbd{border:1px solid #3a4260;border-radius:6px;padding:1px 7px;font:500 13px Inter,sans-serif;color:var(--ink)}
#info{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translate(-50%,170%);width:min(380px,90vw);background:var(--cob);border-radius:14px;padding:16px 18px;transition:transform .35s;pointer-events:none}
#info.on{transform:translate(-50%,0)}
#info b{font-size:20px;letter-spacing:-.02em;display:block}
#info span{color:#c7d4ff;font-size:15px}
.bt{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:none;flex-direction:column;gap:10px}
@media(pointer:coarse){.bt{display:flex}}
.bt button{width:56px;height:56px;border-radius:50%;border:1px solid #3a4260;background:rgba(15,63,166,.55);color:#fff;font-size:20px}
#dg{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(255,70,30,.6));transition:opacity .15s}
.bt button{width:76px;height:76px;font-size:26px;touch-action:none}
@media(max-width:700px){.hud{padding-left:14px;padding-right:14px}.hud b{font-size:22px}.card h1{font-size:30px}.card{max-width:340px}.card p{font-size:15px}}
@media(pointer:coarse){#info{left:14px;width:calc(100vw - 120px);transform:translateY(170%)}#info.on{transform:none}}