/* ── 3D Mode overlay ─────────────────────────────── */
#game-3d {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

#three-canvas {
  display: block;
  width: 100%;
  height: 100vh;
  touch-action: none;
}

/* HUD overlaid on top of the canvas */
#hud-3d {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
}
#hud-3d > * { pointer-events: auto; }

/* ── Target panel (top-center) ───────────────────── */
#hud-target-panel {
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
  min-width: 280px;
  background: rgba(12,74,46,.92);
  border: 3px solid var(--green-glow);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  padding: .8rem 1.2rem;
  text-align: center;
  backdrop-filter: blur(4px);
}
#hud-target-panel h3 { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold); margin-bottom: .4rem; }
.hud-input-row { display: flex; gap: .5rem; align-items: center; justify-content: center; }
#hud-target-input {
  font-family: var(--font-display); font-size: 1.4rem;
  width: 90px; padding: .25em .4em;
  border: 2px solid var(--green-glow);
  border-radius: var(--radius);
  background: rgba(255,255,255,.1);
  color: var(--cream);
  text-align: center;
}
#hud-target-input:focus { outline: 2px solid var(--gold); background: rgba(255,255,255,.2); }
#hud-target-input::placeholder { color: rgba(255,255,255,.3); }

/* ── Score row (top-left) ────────────────────────── */
#hud-scores {
  position: absolute; top: 70px; left: 14px;
  display: flex; flex-direction: column; gap: .4rem;
}
.hud-score-box {
  background: rgba(12,74,46,.88);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: .35rem .7rem;
  text-align: center;
  min-width: 70px;
  backdrop-filter: blur(4px);
}
.hud-score-label { font-family: var(--font-display2); font-size: .6rem; color: var(--green-glow); }
.hud-score-value { font-family: var(--font-display); font-size: 1.6rem; color: var(--cream); line-height: 1.1; }

/* ── Mode overlay (top-right) ────────────────────── */
#hud-mode-info {
  position: absolute; top: 70px; right: 80px;
  display: flex; flex-direction: column; gap: .4rem; align-items: flex-end;
}

/* ── Parallel Universes (bottom panel) ──────────── */
#hud-parallel {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  background: rgba(12,74,46,.88);
  border: 2px solid var(--green);
  border-radius: var(--radius-lg);
  padding: .5rem .9rem;
  min-width: 200px;
  backdrop-filter: blur(4px);
}
#hud-parallel .pu-label { font-family: var(--font-display2); font-size: .65rem; color: var(--green-glow); margin-bottom: .3rem; }
#hud-pu-chips { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ── Result banner (center) ──────────────────────── */
#hud-result {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

/* ── Post-round buttons (bottom) ─────────────────── */
#hud-post-round {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: .8rem;
}

/* ── Constraint chips (bottom-left) ─────────────── */
#hud-constraints {
  position: absolute; bottom: 60px; left: 14px;
  display: flex; flex-direction: column; gap: .2rem;
  max-width: 200px;
}

/* ── Mode overlay (fullscreen) ────────────────────── */
.hud-fullscreen {
  position: fixed; inset: 0;
  background: rgba(10,46,28,.9);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1.2rem;
  text-align: center;
  padding: 2rem;
  backdrop-filter: blur(4px);
}
.hud-fullscreen h2 { color: var(--gold); text-shadow: 3px 3px 0 var(--ink); font-size: 3rem; }

/* Loading spinner for lazy Three.js load */
#three-loading {
  position: fixed; inset: 0;
  background: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem;
  z-index: 600;
}
.loading-spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(255,255,255,.1);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Mobile HUD adjustments ──────────────────────── */
@media (max-width: 600px) {
  #hud-target-panel { top: 60px; min-width: 240px; }
  #hud-scores { top: 60px; }
  #hud-mode-info { top: 60px; right: 60px; }
  #hud-parallel { bottom: 50px; }
  #hud-post-round { bottom: 8px; }
}