:root {
  --bg: #0f1020;
  --surface: #1a1c33;
  --surface-2: #24274a;
  --text: #f3f3fa;
  --muted: #a3a6c4;
  --accent: #6d5efc;
  --agree: #22c55e;
  --disagree: #ef4444;
  --star: #fbbf24;
  --track: #22c55e;
  --radius: 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
}

[hidden] { display: none !important; }

button {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 12px;
  padding: 0.75em 1.4em;
  background: var(--accent);
  color: white;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button.secondary { background: var(--surface-2); }

/* --- Kiosk ------------------------------------------------------------- */

body.kiosk {
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

/* The camera fills the whole screen; everything else floats on top of it */
.camera {
  --hand-radius: 12px;
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* Upright 1080×1920 frames. The mirror is already in the bitmap. */
.camera .feed,
.hand-color canvas,
#overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kept playing, but not shown — the feed canvases are the picture. */
.camera .source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.feed {
  filter: grayscale(1);
  transition: filter 0.3s;
}
.camera.dimmed .feed,
body[data-state="idle"] .feed { filter: grayscale(1) blur(6px) brightness(0.5); }

/* Fades that keep the statement and instructions readable over any background */
.scrim {
  --top: 30%;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.3) calc(var(--top) * 0.6), rgba(0, 0, 0, 0) var(--top)),
    linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.3) 15%, rgba(0, 0, 0, 0) 25%);
  pointer-events: none;
}
/* The stars and finger chips make the top block taller */
body:not([data-mode="thumbs"]) .scrim { --top: 45%; }

/*
 * Tracking square around the hand. kiosk.js sets --hand-x/--hand-y (top-left
 * corner) and --hand-size on .camera; the colour cut-out and the border both
 * follow them, so the hand shows in full colour on top of the grey video.
 */
.hand-color {
  position: absolute;
  inset: 0;
  clip-path: inset(
    var(--hand-y)
    calc(100% - var(--hand-x) - var(--hand-size))
    calc(100% - var(--hand-y) - var(--hand-size))
    var(--hand-x)
    round var(--hand-radius)
  );
}

.hand-box {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--hand-size);
  height: var(--hand-size);
  transform: translate(var(--hand-x), var(--hand-y));
  border: 4px solid var(--track);
  border-radius: var(--hand-radius);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.55);
  pointer-events: none;
}

.camera.dimmed :is(.hand-color, #overlay, .hand-box) { display: none; }

/* Statement on top, ring and result in the middle, instructions at the bottom */
.hud {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  pointer-events: none;
}

.statement-bar,
.instructions {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.7);
}

.statement-bar {
  grid-row: 1;
  gap: clamp(12px, 2vh, 24px);
  padding: clamp(20px, 4vh, 48px) clamp(16px, 4vw, 64px) 0;
}

#statement {
  margin: 0;
  max-width: 28ch;
  font-size: clamp(1.8rem, 4.5vw, 3.6rem);
  line-height: 1.15;
  text-wrap: balance;
}

.instructions {
  grid-row: 3;
  gap: 8px;
  padding: 16px clamp(16px, 4vw, 64px) clamp(16px, 3vh, 32px);
}

.status {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.3;
  min-height: 1.3em;
  text-wrap: balance;
}

.privacy {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

/* The idle screen takes over from the question and instructions; the privacy note stays */
.statement-bar,
.status { transition: opacity 0.4s; }
body[data-state="idle"] :is(.statement-bar, .status) { opacity: 0; }

/* --- Idle screen ---------------------------------------------------------- */

.idle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 36px);
  padding: 24px clamp(16px, 4vw, 64px);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
body[data-state="idle"] .idle { opacity: 1; visibility: visible; }
/* Keep it off the loading and camera notices */
.notice:not([hidden]) ~ .idle { display: none; }

/* The waving hand, with rings rippling out from it */
.wave-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(170px, 34vmin, 360px);
  aspect-ratio: 1;
  margin-bottom: clamp(8px, 2vh, 24px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 94, 252, 0.5), rgba(15, 16, 32, 0.55) 70%);
  border: 3px solid rgba(255, 255, 255, 0.25);
}
.wave-badge::before,
.wave-badge::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  animation: ripple 2.4s ease-out infinite;
}
.wave-badge::after { animation-delay: 1.2s; }
/* A hand is in view: the rings turn the colour of the tracking square */
.idle.tracking .wave-badge::before,
.idle.tracking .wave-badge::after { border-color: var(--track); }

.wave-hand {
  font-size: clamp(5rem, 17vmin, 10.5rem);
  line-height: 1;
  transform-origin: 70% 80%; /* the wrist */
  animation: wave 2.2s ease-in-out infinite;
}

.idle-title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  text-wrap: balance;
}

.idle-hint {
  margin: 0;
  max-width: 32ch;
  min-height: 1.3em;
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}

/* One dot per swing, filled as the wave is counted */
.wave-steps { display: flex; gap: clamp(10px, 1.6vw, 16px); }
.wave-steps span {
  width: clamp(14px, 2.2vw, 22px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  background: rgba(15, 16, 32, 0.35);
  transition: background 0.15s, border-color 0.15s, transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.wave-steps span.filled {
  background: var(--track);
  border-color: var(--track);
  transform: scale(1.25);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
}

/* No question assigned: nothing to wave for */
body.no-question :is(.wave-badge, .idle-hint, .wave-steps) { display: none; }

@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(16deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(16deg); }
  40% { transform: rotate(-6deg); }
  50% { transform: rotate(10deg); }
}

@keyframes ripple {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(1.45); opacity: 0; }
}

/* Hold ring */

.ring-wrap {
  --color: var(--agree);
  grid-area: 2 / 1;
  container-type: size;
  display: grid;
  place-items: center;
}
.ring-wrap[data-answer="disagree"] { --color: var(--disagree); }

.ring {
  grid-area: 1 / 1;
  width: min(260px, 90cqmin);
  transform: rotate(-90deg);
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.5));
}
.ring-track {
  fill: rgba(15, 16, 32, 0.55);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 8;
}
.ring-fill {
  fill: none;
  stroke: var(--color);
  stroke-width: 8;
  stroke-linecap: round;
}

.ring-label {
  grid-area: 1 / 1;
  position: relative; /* paint above the rotated ring's dark fill */
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.ring-emoji { font-size: clamp(2.5rem, 7vw, 5rem); }
.ring-count {
  margin-top: 0.15em;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color);
  font-variant-numeric: tabular-nums;
}

/* Result card */

.result {
  grid-area: 2 / 1;
  place-self: center;
  width: min(90%, 520px);
  max-height: 100%;
  overflow: hidden;
  padding: clamp(18px, 3vw, 32px);
  border-radius: var(--radius);
  background: rgba(26, 28, 51, 0.92);
  border: 2px solid var(--agree);
  animation: pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.result[data-answer="disagree"] { border-color: var(--disagree); }
.result[data-answer="stars"] { border-color: var(--star); }
.result[data-answer="stars"] .bar-row { grid-template-columns: 3em 1fr 3.2em; }

.result-average {
  margin: -0.4em 0 1em;
  text-align: center;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 700;
  color: var(--star);
}

.result-title {
  margin: 0 0 1em;
  text-align: center;
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  font-weight: 700;
}

.bars { display: grid; gap: 12px; }
.bar-row {
  display: grid;
  grid-template-columns: 7.5em 1fr 3.2em;
  align-items: center;
  gap: 12px;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
}
.bar {
  height: 16px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bar-fill.agree { background: var(--agree); }
.bar-fill.disagree { background: var(--disagree); }
.bar-fill.star { background: var(--star); }
.bar-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.result-total {
  margin: 1em 0 0;
  text-align: center;
  color: var(--muted);
}

@keyframes pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* No question assigned to the active variant: keep the camera, hide the answer controls */
body.no-question .stars,
body.no-question .cursor { visibility: hidden; }

/* Stars variant */

.stars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.star-row {
  display: flex;
  gap: clamp(8px, 2.5%, 28px);
}

.star {
  width: clamp(48px, 11vw, 120px);
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.star svg { display: block; width: 100%; overflow: visible; }
.star path {
  fill: rgba(15, 16, 32, 0.35);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: fill 0.15s, stroke 0.15s;
}
.star.filled path { fill: var(--star); stroke: var(--star); }
.star.target { transform: scale(1.15); }
.star.target path { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.7)); }

.star-label {
  margin: 0;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* Fingers variant */

.finger-row { display: flex; gap: clamp(8px, 2vw, 20px); }
.finger-chip {
  width: clamp(44px, 8vw, 84px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  background: rgba(15, 16, 32, 0.35);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.finger-chip.filled { background: var(--star); border-color: var(--star); color: #1a1c33; }
.finger-chip.target { transform: scale(1.15); box-shadow: 0 0 16px rgba(251, 191, 36, 0.6); }
.ring-wrap[data-answer="fingers"] { --color: var(--star); }

/* Fingertip cursor; its ring fills while a star is held */
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  display: grid;
  place-items: center;
  pointer-events: none;
  will-change: transform;
}
.cursor svg { grid-area: 1 / 1; width: 100%; transform: rotate(-90deg); }
.cursor-track {
  fill: rgba(109, 94, 252, 0.25);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 4;
}
.cursor-fill {
  fill: none;
  stroke: var(--star);
  stroke-width: 6;
  stroke-linecap: round;
}
.cursor.active .cursor-track { fill: rgba(15, 16, 32, 0.6); }
.cursor-count {
  grid-area: 1 / 1;
  font-weight: 700;
  font-size: 1.3rem;
  color: white;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  font-variant-numeric: tabular-nums;
}

/* Loading / error notice */

.notice {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: var(--surface);
  font-size: 1.15rem;
  color: var(--muted);
}
.notice p { margin: 0; max-width: 36ch; }

@media (max-width: 600px) {
  .bar-row { grid-template-columns: 6.5em 1fr 3em; gap: 8px; }
}

/* --- Admin ------------------------------------------------------------- */

body.admin {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

.admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.admin-head button { flex-shrink: 0; white-space: nowrap; }
.admin h1 { margin: 0 0 4px; font-size: 1.8rem; }
.admin .sub { margin: 0; color: var(--muted); }
.admin .sub a { color: var(--muted); }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}
.card h2 {
  margin: 0 0 16px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.card-head h2 { margin: 0; }
.card h2 .count {
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  letter-spacing: 0;
}

.admin input[type="password"],
.admin textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--surface-2);
  border-radius: 12px;
  padding: 12px 14px;
}
.admin textarea { resize: vertical; min-height: 80px; }
.admin input:focus,
.admin textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.admin button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
button.small { padding: 0.45em 0.95em; font-size: 0.9rem; border-radius: 10px; }
button.danger { background: color-mix(in srgb, var(--disagree) 18%, var(--surface-2)); color: #fecaca; }
button.danger:hover { background: var(--disagree); color: white; filter: none; }
button.link {
  padding: 0;
  background: none;
  color: var(--accent);
  font-size: 0.9rem;
  border-radius: 4px;
}
button.link:hover { filter: brightness(1.25); }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.msg { margin: 10px 0 0; min-height: 1.2em; color: var(--muted); }
.msg.error { color: var(--disagree); }
.msg.ok { color: var(--agree); }

.card .sub-head { margin: 0 0 10px; font-size: 0.9rem; color: var(--muted); }
.card .msg + .sub-head { margin-top: 20px; }

/* Variant and camera switchers: one tile per option */
.tile-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tile-switch button {
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 14px 16px;
  text-align: left;
  font-weight: 400;
  color: var(--muted);
  background: var(--bg);
  border: 2px solid transparent;
  border-radius: 16px;
}
.tile-switch button:hover { border-color: var(--surface-2); filter: none; }
.tile-switch button[aria-pressed="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg));
  border-color: var(--accent);
}
.tile-switch .v-icon { font-size: 1.6rem; line-height: 1.2; }
.tile-switch .v-name { font-weight: 700; color: var(--text); }
.tile-switch .v-count,
.tile-switch .v-note { font-size: 0.85rem; }
.tile-switch button[aria-pressed="true"] .v-count::before { content: "● Live · "; color: var(--agree); }
.tile-switch button[aria-pressed="true"] .v-note::before { content: "● In use · "; color: var(--agree); }

/* Smaller tiles with the icon beside the text */
.tile-switch.compact { grid-template-columns: repeat(2, 1fr); }
.tile-switch.compact button { grid-template-columns: auto 1fr; column-gap: 12px; padding: 10px 14px; }
.tile-switch.compact .v-icon { grid-row: span 2; align-self: center; }

/* Add / edit form */
.q-form textarea { min-height: 72px; }
.q-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

/* Variant checkboxes, shown as toggle pills */
.variant-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-picks input { position: absolute; opacity: 0; pointer-events: none; }
.variant-picks label {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--surface-2);
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.variant-picks label::before { content: "+ "; }
.variant-picks label:hover { border-color: var(--muted); }
.variant-picks input:checked + label {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
  color: var(--text);
}
.variant-picks input:checked + label::before { content: "✓ "; }
.variant-picks input:focus-visible + label { outline: 2px solid var(--text); outline-offset: 2px; }

/* Question list */
.questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.question {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--bg);
  border-left: 4px solid var(--surface-2);
}
.question.live { border-left-color: var(--agree); }
.question.editing { border-left-color: var(--accent); }
.question.flash { animation: flash 1.6s ease-out; }
@keyframes flash {
  from { background: color-mix(in srgb, var(--agree) 22%, var(--bg)); }
  to { background: var(--bg); }
}

.q-top { display: flex; align-items: flex-start; gap: 12px; }
.q-text {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.q-actions { display: flex; gap: 8px; flex-shrink: 0; }

.q-meta { margin: 6px 0 0; color: var(--muted); font-size: 0.85rem; }
.live-tag { margin-right: 8px; color: var(--agree); font-weight: 700; }
.live-tag::before { content: "● "; }

.q-results { display: grid; gap: 6px; margin: 12px 0 10px; }
.q-result {
  display: grid;
  grid-template-columns: 2.6em minmax(60px, 1fr) minmax(0, auto);
  gap: 10px;
  align-items: center;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.q-result.off { opacity: 0.5; }
.q-result .bar,
.q-result .split-bar { height: 8px; }
.q-num { color: var(--muted); text-align: right; }

.split-bar {
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}
.split-bar .agree { background: var(--agree); }
.split-bar .disagree { background: var(--disagree); }

/* Expanded answers */
.q-answers {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--surface-2);
}
.q-dists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 24px;
  margin-bottom: 16px;
}
.q-dists h3 { margin: 0 0 8px; font-size: 0.85rem; color: var(--muted); }

/* The rows share the columns of .dist, so labels and bars line up within a block */
.dist {
  display: grid;
  grid-template-columns: max-content minmax(40px, 1fr) max-content;
  gap: 6px 10px;
  align-items: center;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.dist-row { display: contents; }
.dist-row .bar { height: 8px; }
.dist-row span:last-child { text-align: right; color: var(--muted); }

.answer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border-radius: 12px;
  background: var(--surface);
}
.answer-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  font-size: 0.9rem;
}
.answer-list li + li { border-top: 1px solid var(--surface-2); }
.a-value { white-space: pre; color: var(--text); }
.answer-list time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.empty { margin: 0; color: var(--muted); }

@media (max-width: 600px) {
  .tile-switch,
  .tile-switch.compact { grid-template-columns: 1fr; }
  .tile-switch button { grid-template-columns: auto 1fr; column-gap: 12px; }
  .tile-switch .v-icon { grid-row: span 2; align-self: center; }
  .q-top { flex-direction: column; }
  .q-result { grid-template-columns: 2.6em 1fr; }
  .q-num { grid-column: 2; text-align: left; }
}