:root{
  --void:#0a0b14;
  --cyan:#43e0f0;       /* glass */
  --steel:#cfd6e6;      /* steel highlight ink */
  --warm:#ff7a45;       /* hazard accent */
  --ink:#e8eefc;
  --dim:#8290ad;
  --panel:#12141f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--void);overflow:hidden;
  font-family:"Segoe UI",system-ui,Arial,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;}
#stage{position:fixed;inset:0;}
canvas{display:block;width:100%;height:100%;background:
  radial-gradient(120% 90% at 50% 18%, #161a2b 0%, #0a0b14 60%, #06070d 100%);}

.hidden{display:none !important;}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;font-variant-numeric:tabular-nums;}
#clock{position:absolute;top:18px;left:50%;transform:translateX(-50%);
  font-size:54px;font-weight:800;letter-spacing:1px;color:var(--ink);
  text-shadow:0 2px 18px rgba(0,0,0,.6);transition:color .12s;}
#clock-unit{font-size:24px;color:var(--dim);margin-left:3px;}
#clock.warn{color:var(--warm);}
#best{position:absolute;top:78px;left:50%;transform:translateX(-50%);
  font-size:15px;color:var(--dim);letter-spacing:2px;}
#material-tag{position:absolute;top:20px;right:26px;font-weight:800;font-size:20px;
  letter-spacing:3px;padding:7px 14px;border-radius:10px;border:2px solid;
  transition:all .12s;}
#material-tag.glass{color:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 22px rgba(67,224,240,.35);background:rgba(67,224,240,.06);}
#material-tag.steel{color:var(--steel);border-color:#6f7a92;
  box-shadow:0 0 18px rgba(180,195,230,.18);background:rgba(180,195,230,.05);}
#seg-name{position:absolute;top:22px;left:26px;font-size:15px;letter-spacing:3px;
  color:var(--dim);text-transform:uppercase;}
#float-layer{position:absolute;inset:0;}
.floatup{position:absolute;font-weight:800;font-size:26px;color:var(--cyan);
  text-shadow:0 2px 10px rgba(0,0,0,.6);animation:floatup 1.1s ease-out forwards;}
@keyframes floatup{0%{opacity:0;transform:translateY(8px) scale(.8)}
  18%{opacity:1}100%{opacity:0;transform:translateY(-46px) scale(1.05)}}

/* ---------- Overlays ---------- */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(6,7,13,.74);backdrop-filter:blur(3px);z-index:5;}
.panel{background:linear-gradient(180deg,#151826,#0f111b);border:1px solid #262b40;
  border-radius:18px;padding:38px 44px;max-width:560px;text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,.6);}
h1{font-size:74px;font-weight:900;letter-spacing:10px;
  background:linear-gradient(90deg,var(--cyan),#fff 55%,var(--steel));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
h2{font-size:40px;font-weight:800;letter-spacing:6px;margin-bottom:18px;}
.tag{color:var(--dim);letter-spacing:2px;margin:6px 0 22px;font-size:17px;}
.controls{display:flex;flex-direction:column;gap:8px;margin:18px auto;font-size:16px;
  color:var(--ink);background:#0c0e17;border:1px solid #232842;border-radius:12px;
  padding:16px 22px;max-width:380px;}
.controls.small{font-size:13px;padding:10px 14px;}
.controls b{color:var(--cyan);}
.pitch{color:var(--dim);font-size:15px;line-height:1.6;margin:18px auto 26px;max-width:440px;}
.pitch .g{color:var(--cyan);font-weight:700;}
.pitch .s{color:var(--steel);font-weight:700;}
button{font-family:inherit;font-weight:800;letter-spacing:2px;font-size:18px;
  color:#06121a;background:linear-gradient(180deg,#5fe9f6,#2bb6ca);border:none;
  padding:14px 30px;border-radius:12px;cursor:pointer;margin:6px;
  box-shadow:0 8px 24px rgba(67,224,240,.3);transition:transform .08s,box-shadow .12s;}
button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(67,224,240,.45);}
button:active{transform:translateY(0);}
#restart-btn,#mute-btn{background:#1c2133;color:var(--ink);box-shadow:none;
  border:1px solid #2c3350;}
.hint{color:#586079;font-size:13px;margin-top:14px;letter-spacing:1px;}
#results-body{font-size:18px;line-height:1.9;margin:8px 0 24px;}
#results-body .big{font-size:46px;font-weight:900;color:var(--cyan);display:block;
  font-variant-numeric:tabular-nums;}
#results-body .pb{color:var(--warm);font-weight:800;letter-spacing:2px;}

/* ---------- Toast ---------- */
#toast{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);
  background:rgba(12,14,23,.9);border:1px solid #2c3350;border-radius:12px;
  padding:12px 22px;font-size:16px;color:var(--ink);letter-spacing:.5px;z-index:4;
  pointer-events:none;max-width:560px;text-align:center;transition:opacity .4s;}
#toast .k{color:var(--cyan);font-weight:800;}