:root {
  --plum: #241238;
  --plum-2: #3a1d52;
  --velvet: #8e1b2c;
  --gold: #e8b64c;
  --gold-soft: #f6dd9b;
  --cream: #fff4dc;
  --ink: #1b0e27;
  --display: 'Caprasimo', 'Georgia', serif;
  --ui: 'Fredoka', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--cream); font-family: var(--ui); }
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

.overlay {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(58, 29, 82, 0.55), rgba(20, 8, 30, 0.85));
  transition: opacity 0.6s ease;
}
.overlay.hide { opacity: 0; pointer-events: none; }
.card {
  max-width: 560px; text-align: center; padding: 40px 36px 32px;
  background: linear-gradient(180deg, rgba(36, 18, 56, 0.92), rgba(27, 14, 39, 0.92));
  border: 2px solid var(--gold); border-radius: 22px;
  box-shadow: 0 0 0 6px rgba(232, 182, 76, 0.15), 0 30px 80px rgba(0, 0, 0, 0.5);
}
.eyebrow { margin: 0 0 6px; letter-spacing: 0.22em; text-transform: uppercase; font-size: 13px; color: var(--gold-soft); }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 6vw, 60px); margin: 0 0 14px; color: var(--gold); line-height: 1.05; }
.lede { font-size: 18px; line-height: 1.5; margin: 0 0 26px; color: var(--cream); }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
button { font-family: var(--ui); font-size: 17px; border-radius: 999px; cursor: pointer; padding: 12px 24px; border: 2px solid var(--gold); }
button.primary { background: var(--gold); color: var(--ink); font-weight: 600; }
button.primary:hover { background: var(--gold-soft); }
button.ghost { background: transparent; color: var(--gold-soft); }
button.ghost:hover { background: rgba(232, 182, 76, 0.12); }
button.small { font-size: 14px; padding: 8px 16px; }
button:disabled { opacity: 0.5; cursor: wait; }
.status { min-height: 1.4em; margin: 18px 0 0; color: var(--gold-soft); font-size: 15px; }
.status.error { color: #ffb3a7; }

.gear {
  position: fixed; left: 14px; bottom: 14px; width: 40px; height: 40px; padding: 0;
  font-size: 22px; line-height: 1; background: rgba(27, 14, 39, 0.5); color: var(--gold-soft);
  border: 1px solid rgba(232, 182, 76, 0.35); opacity: 0.35; transition: opacity 0.2s;
}
.gear:hover { opacity: 1; }

#settings {
  position: fixed; top: 14px; right: 14px; width: 300px; max-height: calc(100vh - 28px); overflow: auto;
  padding: 14px 16px 16px; border-radius: 16px; background: rgba(27, 14, 39, 0.94);
  border: 1px solid rgba(232, 182, 76, 0.45); font-size: 14px; display: flex; flex-direction: column; gap: 10px;
}
#settings[hidden] { display: none; }
#settings header { display: flex; justify-content: space-between; align-items: center; }
#settings h2 { font-family: var(--display); font-weight: 400; margin: 0; color: var(--gold); font-size: 22px; }
#settings header button { border: 0; background: none; color: var(--cream); font-size: 26px; padding: 0 4px; }
#settings .row { display: flex; gap: 8px; align-items: center; }
#settings .col { display: flex; flex-direction: column; gap: 4px; }
#settings .col span { color: var(--gold-soft); }
#settings select, #settings input[type=range] { width: 100%; accent-color: var(--gold); }
#settings select { font-family: var(--ui); font-size: 14px; padding: 4px; border-radius: 8px; }
.readout { font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; color: #d8c9f0;
  background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 8px; min-height: 3em; }

/* Live camera + distance guide, bottom right. */
#pip {
  --state: #e04848; --glow: rgba(224, 72, 72, 0.55);
  position: fixed; right: 16px; bottom: 16px; width: clamp(200px, 24vw, 360px);
  border-radius: 16px; overflow: hidden; background: rgba(27, 14, 39, 0.92);
  border: 4px solid var(--state); box-shadow: 0 0 22px var(--glow), 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s, box-shadow 0.2s;
}
#pip[hidden] { display: none; }
#pip.red { --state: #e04848; --glow: rgba(224, 72, 72, 0.55); }
#pip.green { --state: #3ccf6e; --glow: rgba(60, 207, 110, 0.5); }
#pip.yellow { --state: #f5c542; --glow: rgba(245, 197, 66, 0.6); }
.pip-video { position: relative; background: #000; }
.pip-video video, .pip-video canvas { display: block; width: 100%; height: auto; }
.pip-video canvas { position: absolute; inset: 0; height: 100%; }
#pip.mirror .pip-video video, #pip.mirror .pip-video canvas { transform: scaleX(-1); }
.pip-status { margin: 0; padding: 8px 10px 2px; text-align: center; font-weight: 600;
  font-size: clamp(14px, 1.25vw, 18px); line-height: 1.25; color: var(--state); }
.meter { padding: 6px 12px 10px; }
.track { display: flex; height: 10px; border-radius: 5px; overflow: hidden; }
.seg.bad { background: #e04848; }
.seg.play { background: #3ccf6e; }
.seg.zone { background: #f5c542; }
.marks { position: relative; height: 0; }
.mark { position: absolute; top: -13px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: #fff; border: 3px solid #1b0e27; transition: left 0.15s linear; }
.ends { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: #cdbfe0; letter-spacing: 0.04em; }

@media (max-width: 480px) {
  .card { padding: 28px 20px 24px; }
  #settings { left: 16px; right: 16px; width: auto; }
}