/* SporeCam — neon aesthetic over the camera video. */
:root {
  --cyan: #00f0ff;
  --magenta: #ff2bd6;
  --lime: #b6ff00;
  --bg: #05010f;
  --ink: #dff6ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}

/* Background webcam, mirrored so it matches what the user sees */
#cam {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  filter: saturate(1.1) brightness(0.7);
  z-index: 0;
}

#stage { position: fixed; inset: 0; z-index: 1; }
#stage canvas { display: block; }

#ui {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;               /* only controls capture input */
}
#ui .gbtn, #ui .chip { pointer-events: auto; }

/* ---- Top bar: status + score ---- */
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 16px; gap: 10px;
}
.chip {
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(8, 12, 28, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.35);
  backdrop-filter: blur(6px);
  color: var(--ink);
}
.chip.ok    { border-color: rgba(182, 255, 0, 0.6);  color: #eaffb0; }
.chip.error { border-color: rgba(255, 43, 120, 0.7); color: #ffc0d6; }
.chip.score {
  display: flex; align-items: baseline; gap: 6px;
  border-color: rgba(0, 240, 255, 0.6);
}
.chip.score span { font-size: 12px; opacity: .7; letter-spacing: 1px; }
.chip.score strong {
  font-size: 22px; font-weight: 800;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.8);
}

/* ---- Upcoming-action cue (UP / DOWN / MOVE) ---- */
.cue {
  --c: var(--cyan);
  position: absolute; top: 20%; left: 50%;
  transform: translate(-50%, 8px);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; border-radius: 14px;
  font-size: clamp(24px, 6vw, 40px); font-weight: 900; letter-spacing: 2px;
  color: var(--c);
  background: rgba(8, 12, 28, 0.55);
  border: 2px solid var(--c);
  box-shadow: 0 0 24px color-mix(in srgb, var(--c) 60%, transparent);
  text-shadow: 0 0 14px var(--c);
  opacity: 0; transition: opacity .12s, transform .12s;
}
.cue.show { opacity: 1; transform: translate(-50%, 0); animation: cuePulse .6s ease-in-out infinite alternate; }
.cue .arrow { font-size: 1.1em; line-height: 1; }
.cue .arrow:empty { display: none; }
@keyframes cuePulse { from { transform: translate(-50%, 0) scale(1); } to { transform: translate(-50%, -3px) scale(1.05); } }

/* ---- Center panel (menu / game over) ---- */
.panel {
  position: absolute; inset: 0;
  text-align: center;
  transition: opacity .25s ease;
}
.panel.hidden { opacity: 0; pointer-events: none; }

/* Title + subtitle on top; the button stays centered and the hint sits at the
   bottom, so nothing overlaps the button ring (which lives at its fixed spot). */
.panel-head {
  position: absolute; top: 12%; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}

.title {
  font-size: clamp(40px, 11vw, 96px);
  font-weight: 900; letter-spacing: 4px; line-height: 1;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(0, 240, 255, 0.9), 0 0 42px rgba(0, 240, 255, 0.5);
}
.title span { color: var(--magenta); text-shadow: 0 0 18px rgba(255, 43, 214, 0.9); }
.panel.over .title { display: none; }         /* on game over the sub takes focus */

.sub {
  font-size: clamp(15px, 3.6vw, 20px);
  color: #b9d4ff; letter-spacing: .5px;
}
.sub b { color: var(--cyan); }

.hint {
  position: absolute; top: 80%; left: 0; right: 0;
  font-size: 13px; line-height: 1.8;
  color: #7f93c4; letter-spacing: .3px;
}
.hint b { color: #b9d4ff; }
.panel.over .hint { display: none; }

/* ---- Center gesture button (wrist dwell) ---- */
.gbtn {
  --p: 0; --d: 26vh;
  position: absolute;
  width: var(--d); height: var(--d);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  cursor: pointer;
}
.gbtn .ring {
  position: absolute; inset: 0; border-radius: 50%;
  /* progress ring: fills with --p */
  background:
    conic-gradient(var(--cyan) calc(var(--p) * 360deg), rgba(255,255,255,0.09) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.7));
  transition: opacity .15s;
}
.gbtn .core {
  width: 74%; height: 74%; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: radial-gradient(circle at 50% 35%, rgba(0,240,255,0.22), rgba(8,12,28,0.85));
  border: 2px solid rgba(0, 240, 255, 0.7);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.5), inset 0 0 22px rgba(0, 240, 255, 0.25);
  font-weight: 800; letter-spacing: 1px; font-size: clamp(13px, 3vw, 17px);
  color: var(--ink);
  transition: transform .12s, box-shadow .2s;
}
.gbtn .ico { font-size: clamp(26px, 7vw, 40px); line-height: 1; }
.gbtn.hot .core {
  transform: scale(1.06);
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.9), inset 0 0 30px rgba(0, 240, 255, 0.4);
}
.panel.over .gbtn .ring {
  background: conic-gradient(var(--magenta) calc(var(--p) * 360deg), rgba(255,255,255,0.09) 0);
}
.panel.over .gbtn .core { border-color: rgba(255, 43, 214, 0.7); }