@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root { color-scheme: dark; --ink:#070913; --mist:#e7edff; --muted:#8f9ab9; --violet:#bda6ff; --cyan:#7ee7ef; }
* { box-sizing:border-box; }
html, body, #app { width:100%; height:100%; margin:0; overflow:hidden; background:var(--ink); }
body { font-family:"DM Mono", monospace; color:var(--mist); user-select:none; -webkit-user-select:none; touch-action:none; }
canvas { display:block; width:100%; height:100%; cursor:crosshair; }
.audio-toggle { position:fixed; z-index:3; top:clamp(20px,4vw,48px); right:clamp(20px,4vw,48px); border:0; padding:8px 10px; background:rgba(7,9,19,.44); color:#9ba8c7; font-size:9px; letter-spacing:.13em; backdrop-filter:blur(8px); }
.audio-toggle:hover { background:rgba(126,231,239,.14); color:var(--cyan); box-shadow:none; transform:none; }
.hud { position:fixed; inset:0; pointer-events:none; padding:clamp(20px,4vw,48px); display:flex; flex-direction:column; gap:10px; text-shadow:0 1px 18px #000; }
.brand { font-size:11px; letter-spacing:.34em; color:#dce5ff; }
.brand span { color:var(--cyan); }
.score-line { margin-top:auto; display:flex; align-items:baseline; gap:12px; }
.score-line strong { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:clamp(42px,8vw,84px); font-weight:500; letter-spacing:0; line-height:.8; }
.score-line span { color:var(--violet); font-size:15px; }
.subline { display:flex; gap:20px; font-size:10px; letter-spacing:.13em; color:var(--muted); }
.subline #status { color:var(--cyan); }
.overlay { position:fixed; inset:0; z-index:2; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 45%, rgba(24,20,54,.22), rgba(4,5,12,.70) 70%); transition:opacity .35s ease, visibility .35s ease; }
.overlay.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.panel { max-width:560px; text-align:center; animation:floatIn .8s cubic-bezier(.2,.8,.2,1); }
.panel.compact { max-width:400px; }
.eyebrow { margin:0 0 20px; color:var(--cyan); letter-spacing:.24em; font-size:10px; }
h1 { margin:0; font-family:"Playfair Display", serif; font-weight:500; font-size:clamp(42px,8vw,76px); letter-spacing:-.055em; line-height:.98; }
h1 em { color:var(--violet); }
.panel > p:not(.eyebrow):not(.hint) { margin:28px auto; max-width:470px; color:#bbc3dc; font-family:"Playfair Display", serif; font-size:18px; line-height:1.55; }
button { border:1px solid rgba(183,233,238,.55); color:#081119; background:var(--cyan); padding:14px 25px; font:500 11px "DM Mono", monospace; letter-spacing:.17em; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s; }
button:hover { transform:translateY(-2px); background:#c4fbff; box-shadow:0 0 36px rgba(126,231,239,.35); }
.hint { margin-top:18px; color:#7d87a5; font-size:9px; letter-spacing:.14em; }
@keyframes floatIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:560px) { .hud { padding:24px; } .subline { justify-content:space-between; } .panel > p:not(.eyebrow):not(.hint) { font-size:16px; } }