@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --ink: #04060d; --txt: #dfe9ff; --dim: rgba(223,233,255,0.55); --faint: rgba(223,233,255,0.3);
  --cyan: #7fd4ff; --hot: #ff5d73; --amber: #ffb454; --mono: 'Space Mono', monospace; --sans: 'Space Grotesk', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { background: var(--ink); color: var(--txt); font-family: var(--sans); user-select: none; -webkit-user-select: none; }
#webgl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; transform-origin: 50% 50%; will-change: transform, filter; }
kbd { font-family: var(--mono); border: 1px solid var(--dim); border-radius: 4px; padding: 0 0.35em; font-size: 0.85em; }
b { color: var(--cyan); font-weight: 700; }

/* loader */
#loader { position: fixed; inset: 0; z-index: 30; background: var(--ink); display: grid; place-content: center; gap: 0.9rem; text-align: center; transition: opacity 1s ease; }
#loader.done { opacity: 0; pointer-events: none; }
.l-title { font-weight: 700; font-size: clamp(2.4rem, 9vw, 5rem); letter-spacing: 0.06em; }
.l-sub { font-family: var(--mono); letter-spacing: 0.4em; color: var(--cyan); font-size: 0.8rem; }
.l-bar { width: 240px; height: 2px; background: rgba(255,255,255,0.12); margin: 0.8rem auto 0; overflow: hidden; }
.l-bar span { display: block; height: 100%; width: 0; background: var(--cyan); }
.l-pct { font-family: var(--mono); color: var(--dim); letter-spacing: 0.3em; }

/* overlay */
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#ui button { pointer-events: auto; }
.hud-tl { position: absolute; top: clamp(1rem,3vw,2rem); left: clamp(1rem,3vw,2rem); }
.mag-row { display: flex; align-items: baseline; gap: 0.6rem; }
.mag-num { font-weight: 700; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mag-label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--cyan); }
.magbar { position: relative; width: clamp(150px, 26vw, 280px); height: 8px; margin-top: 0.7rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 100px; overflow: hidden; }
#magbar-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan) 0%, var(--amber) 60%, var(--hot) 100%); transition: width .12s linear; }
.magbar b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: #04060d; font-weight: 700; }

.hud-tr { position: absolute; top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); text-align: right; }
.score-row { display: flex; align-items: baseline; gap: 0.5rem; justify-content: flex-end; }
.score-k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--dim); }
.score-num { font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.6rem); font-variant-numeric: tabular-nums; }
.best-row { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--faint); margin-top: 0.2rem; }

.story { position: absolute; top: 16%; left: 50%; transform: translateX(-50%); text-align: center; font-weight: 700; font-size: clamp(1.4rem, 4.5vw, 3.2rem); letter-spacing: -0.01em; max-width: 86vw; opacity: 0; transition: opacity .6s ease, transform .6s ease; text-shadow: 0 2px 30px rgba(0,0,0,0.6); }
.story.show { opacity: 1; }
.story .em { color: var(--hot); }

.objective { position: absolute; bottom: clamp(5.2rem, 13vh, 7rem); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.7rem; font-size: 0.92rem; background: rgba(8,12,22,0.5); border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; padding: 0.5em 1.1em; backdrop-filter: blur(8px); transition: opacity .4s, transform .4s; }
.objective.done { opacity: 0; transform: translateX(-50%) translateY(10px); }
.obj-k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--amber); }

.hint { position: absolute; bottom: clamp(1.2rem,4vw,2.2rem); left: 50%; transform: translateX(-50%); text-align: center; max-width: 92vw; }
.hint p { font-size: clamp(0.82rem, 1.5vw, 1rem); color: var(--dim); }
.motion-btn { margin-top: 0.8rem; font-family: var(--sans); font-weight: 500; background: var(--cyan); color: var(--ink); border: 0; border-radius: 100px; padding: 0.7em 1.4em; cursor: pointer; }
.status { position: absolute; bottom: clamp(1rem,3vw,1.5rem); right: clamp(1rem,3vw,2rem); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; }
.ticker { position: absolute; bottom: clamp(1rem,3vw,1.5rem); left: clamp(1rem,3vw,2rem); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--amber); max-width: 40vw; }

@media (max-width: 680px) { .hud-tr .best-row { display: none; } .objective { font-size: 0.8rem; } }