:root { color-scheme: dark; --bg: #0f1218; --fg: #f4f6fa; --muted: #9aa5b5; --accent: #ffb703; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.35 system-ui, "Segoe UI", sans-serif; overflow: hidden; touch-action: none; user-select: none; }
body { display: grid; place-items: center; }
#game { position: relative; height: min(100vh, 100vw * 5 / 3); aspect-ratio: 3 / 5; max-width: 100vw; overflow: hidden; background: #000; }
canvas { width: 100%; height: 100%; display: block; }

#hud { position: absolute; inset: 0; pointer-events: none; padding: 10px 12px; font-size: 13px; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
.row { display: flex; justify-content: space-between; align-items: baseline; }
.top { font-size: 22px; }
#score { font-size: 28px; font-variant-numeric: tabular-nums; }
#best { margin-left: 8px; font-size: 12px; color: #fffc; }
#lives { letter-spacing: 3px; }

#gauge, .bars { background: #0b0f1699; border-radius: 10px; padding: 6px 8px; }
#gauge { margin-top: 8px; width: 55%; }
.zones { display: grid; grid-template-columns: 12fr 28fr 25fr 35fr; height: 10px; border-radius: 5px; overflow: hidden; }
.zones i:nth-child(1) { background: #4da3ff; } .zones i:nth-child(2) { background: #4ade80; }
.zones i:nth-child(3) { background: #fb923c; } .zones i:nth-child(4) { background: #ef4444; }
#marker { position: relative; height: 0; }
#marker::after { content: ""; position: absolute; left: var(--pos, 20%); top: -14px; width: 4px; height: 18px; margin-left: -2px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px #000a; }
#kg { font-weight: 700; font-size: 17px; margin-top: 2px; }
#label { color: #fffd; }

.bars { margin-top: 6px; display: grid; gap: 2px; width: 55%; }
.bars label { display: flex; justify-content: space-between; align-items: center; color: #fffd; }
meter { width: 55%; height: 8px; }

#skills { position: absolute; right: 12px; top: 56px; display: grid; gap: 6px; justify-items: end; }
.skill { background: #0009; border: 1px solid #fff3; border-radius: 999px; padding: 3px 10px; font-weight: 700; font-variant-numeric: tabular-nums; }

.panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: #0b0f16d9; text-align: center; overflow: auto; }
.panel[hidden] { display: none; }
.panel > div { max-width: 420px; }
h1 { margin: 0 0 4px; font-size: 40px; letter-spacing: 1px; color: var(--accent); }
h2 { margin: 0 0 8px; font-size: 28px; }
p { margin: 6px 0; color: var(--muted); }
.legend { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; text-align: left; margin: 12px 0; font-size: 13px; color: #cfd6e2; }
.legend b { font-size: 16px; white-space: nowrap; }
button { margin-top: 12px; font: inherit; font-weight: 700; font-size: 18px; padding: 12px 30px; border: 0; border-radius: 12px; background: var(--accent); color: #231800; cursor: pointer; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 10px 0; text-align: left; color: #cfd6e2; }
.big { font-size: 44px; font-weight: 800; color: var(--accent); }
kbd { background: #fff2; border-radius: 4px; padding: 1px 6px; font: inherit; font-size: 12px; }