/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body {
  overflow:hidden;
  width:100%; height:100%;
  background:#080c14;
  -webkit-font-smoothing:antialiased;
  font-family:"Noto Serif","Hiragino Mincho Pro",Georgia,serif;
}
canvas {
  display:block; width:100%; height:100%;
  touch-action:none; cursor:pointer;
}

/* ── UI Shell ── */
#ui {
  position:fixed; inset:0;
  pointer-events:none;
}

/* ── Overlay (first-load hint) ── */
.overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,10,20,0.45);
  transition:opacity 1.2s ease;
  pointer-events:auto;
  z-index:10;
}
.overlay.gone { opacity:0; pointer-events:none; }

.prompt {
  color:rgba(200,185,165,0.55);
  font-size:clamp(0.8rem,2.2vw,1.05rem);
  letter-spacing:0.14em;
  text-transform:uppercase;
  user-select:none;
}

/* ── HUD ── */
.hud-btn {
  position:absolute; top:1rem; right:1rem;
  width:2.2rem; height:2.2rem;
  border:1px solid rgba(200,185,165,0.15);
  border-radius:50%;
  background:rgba(15,20,35,0.6);
  color:rgba(200,185,165,0.7);
  font-size:1rem;
  cursor:pointer;
  pointer-events:auto;
  z-index:20;
  transition:all 0.25s ease;
  display:flex; align-items:center; justify-content:center;
  opacity:0.25;
}
.hud-btn:hover, .hud-btn:focus-visible { opacity:1; border-color:rgba(200,185,165,0.4); }
.hud-btn.muted { opacity:0.35; border-color:rgba(200,185,165,0.08); }

.counter {
  position:absolute; top:1rem; left:50%; transform:translateX(-50%);
  font-size:0.72rem;
  color:rgba(200,185,165,0.3);
  letter-spacing:0.08em;
  user-select:none;
  transition:opacity 0.6s ease;
}
.counter.hidden { opacity:0; }