:root { color-scheme: dark; --gold:#d7aa42; --gold2:#f2d27d; --ink:#050505; --panel:rgba(8,7,5,.9); --muted:#9f978a; }
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--ink); color:#f7f2e7; font-family:"Space Grotesk",system-ui,sans-serif; touch-action:none; user-select:none; }
button,a { font:inherit; color:inherit; }
button { border:0; cursor:pointer; }
.game { position:relative; width:100%; height:100%; min-height:100svh; overflow:hidden; background:radial-gradient(circle at 50% 10%,rgba(215,170,66,.14),transparent 38%),#050505; }
.game canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hud { pointer-events:none; position:absolute; z-index:5; inset:0 0 auto; display:flex; justify-content:space-between; padding:clamp(14px,3vw,24px); background:linear-gradient(#050505d9,transparent); }
.hud__label { font:700 9px/1.2 "Space Mono",monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.hud__value { font-size:clamp(28px,7vw,42px); line-height:1; font-weight:700; font-variant-numeric:tabular-nums; }
.hud__gold { margin-top:5px; color:var(--gold2); font-size:13px; font-weight:700; }
.hud__right { text-align:right; }
.overlay { position:absolute; z-index:10; inset:0; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.5); backdrop-filter:blur(3px); }
.overlay[hidden] { display:none; }
.panel { width:min(100%,380px); padding:26px; text-align:center; border:1px solid rgba(215,170,66,.38); background:var(--panel); box-shadow:0 30px 100px rgba(0,0,0,.7); }
.kicker { font:700 10px/1.2 "Space Mono",monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.title { margin-top:10px; font-size:clamp(42px,12vw,66px); line-height:.88; letter-spacing:-.05em; text-transform:uppercase; }
.desc { margin:18px auto 0; max-width:34ch; color:var(--muted); font-size:14px; line-height:1.6; }
.start { width:100%; margin-top:22px; padding:15px 18px; background:linear-gradient(110deg,#9a661b,#f2d27d 55%,#b67a20); color:#050505; font:700 11px/1 "Space Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }
.back { position:absolute; z-index:12; left:14px; bottom:14px; padding:10px 12px; border:1px solid rgba(215,170,66,.28); background:rgba(5,5,5,.72); color:#d9cba9; font:700 9px/1 "Space Mono",monospace; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; backdrop-filter:blur(8px); }
.controls { position:absolute; z-index:6; inset:auto 0 20px; display:flex; justify-content:center; gap:12px; }
.control { width:76px; height:54px; border:1px solid rgba(215,170,66,.34); background:rgba(5,5,5,.62); color:var(--gold2); font-size:25px; backdrop-filter:blur(8px); }
.hint { pointer-events:none; position:absolute; z-index:5; inset:auto 0 25px; text-align:center; color:#d9cba9aa; font:700 9px/1 "Space Mono",monospace; letter-spacing:.2em; text-transform:uppercase; }
@media (min-width:700px) { .back{left:22px;bottom:22px}.controls{bottom:28px} }