:root{
  --bg:#050506;
  --ink:#e8e4dc;
  --dim:#6a6b74;
  --easy:#35d94c;
  --medium:#ffb020;
  --hard:#ff2b4e;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#000}
body{
  font-family:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  touch-action:none;
}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block}

.hidden{display:none !important}

/* ---------- Reticle ---------- */
#reticle{
  position:fixed;left:50%;top:50%;width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:rgba(255,240,210,.55);
  box-shadow:0 0 8px 2px rgba(255,220,170,.35);
  pointer-events:none;z-index:5;transition:opacity .3s;
}

/* ---------- HUD ---------- */
#hud{
  position:fixed;top:0;left:0;right:0;z-index:6;
  padding:22px 20px;text-align:center;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);
}
#round{
  font-size:12px;letter-spacing:.42em;color:var(--dim);
  font-weight:600;margin-bottom:6px;
}
#status{
  font-size:clamp(15px,4.5vw,20px);font-weight:500;letter-spacing:.01em;
  text-shadow:0 0 20px rgba(255,200,140,.25);transition:color .2s;
}
#status.good{color:#7ef29a}
#status.bad{color:#ff6b82}

/* ---------- Overlays ---------- */
.overlay{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:24px;background:radial-gradient(120% 90% at 50% 40%,rgba(20,18,22,.72),rgba(0,0,0,.94));
  backdrop-filter:blur(3px);
}
.panel{max-width:460px;width:100%;text-align:center}
.eyebrow{
  font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--dim);
  margin-bottom:16px;font-weight:600;
}
.eyebrow.light{color:#ffe9c2;text-shadow:0 0 24px rgba(255,220,150,.6)}
h1{
  font-size:clamp(40px,12vw,68px);font-weight:700;line-height:.95;letter-spacing:-.02em;
  margin-bottom:18px;
  background:linear-gradient(180deg,#fff,#b9b4ab);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{color:#a7a49c;font-size:15px;line-height:1.55;max-width:360px;margin:0 auto 30px}
.diff-label{font-size:11px;letter-spacing:.4em;color:var(--dim);margin-bottom:14px;font-weight:600}

.diffs{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.diff{
  cursor:pointer;border:1px solid rgba(255,255,255,.08);border-radius:14px;
  background:rgba(255,255,255,.02);color:var(--ink);
  padding:16px 20px;display:flex;flex-direction:column;gap:3px;align-items:center;
  transition:transform .12s ease,border-color .2s,box-shadow .25s,background .2s;
}
.diff span{font-size:17px;font-weight:700;letter-spacing:.14em}
.diff em{font-style:normal;font-size:12px;color:var(--dim);letter-spacing:.04em}
.diff:active{transform:scale(.97)}
@media(hover:hover){
  .diff.easy:hover{border-color:var(--easy);box-shadow:0 0 26px -6px var(--easy);background:rgba(53,217,76,.06)}
  .diff.medium:hover{border-color:var(--medium);box-shadow:0 0 26px -6px var(--medium);background:rgba(255,176,32,.06)}
  .diff.hard:hover{border-color:var(--hard);box-shadow:0 0 26px -6px var(--hard);background:rgba(255,43,78,.06)}
  .diff.again:hover,.diff.easy.again:hover{border-color:#ffe9c2;box-shadow:0 0 26px -6px rgba(255,220,150,.8)}
}
.diff.easy span{color:var(--easy)}
.diff.medium span{color:var(--medium)}
.diff.hard span{color:var(--hard)}
.again{margin:0 auto;max-width:220px}
.again span{color:#ffe9c2}
.hint{font-size:12px;color:var(--dim);letter-spacing:.03em}
.win-panel .sub{margin-bottom:24px}

/* ---------- White flash on escape ---------- */
#whiteflash{
  position:fixed;inset:0;z-index:15;background:#fff;opacity:0;pointer-events:none;
  transition:opacity 1.4s ease;
}
#whiteflash.on{opacity:.9}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel>*{animation:rise .6s ease both}
.panel>h1{animation-delay:.05s}
.panel .sub{animation-delay:.1s}
.diffs{animation-delay:.15s}
.hint{animation-delay:.2s}