/* Tchaku Live — participant web app.
   Premium "designed live family" — matches the presenter slides:
   the OpenDesign token system, Space Grotesk / Inter / JetBrains Mono,
   a dark iris stage with glow blobs + a faint dotgrid. */

/* ── Self-hosted family fonts (variable woff2) ─────────────────── */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ── Tokens — ported verbatim from OpenDesign ──────────────────── */
:root {
  --bg:          oklch(0.07 0.018 282);
  --surface:     oklch(0.13 0.028 282);
  --surface-2:   oklch(0.17 0.030 282);
  --chrome:      oklch(0.15 0.028 282 / 0.72);
  --line:        oklch(1 0 0 / 0.07);
  --line-strong: oklch(1 0 0 / 0.12);
  --dot:         oklch(1 0 0 / 0.05);

  --text:        oklch(0.98 0.005 280);
  --text-dim:    oklch(0.76 0.015 280);
  --text-mute:   oklch(0.55 0.02 280);
  --text-faint:  oklch(0.40 0.02 280);

  --accent:      oklch(0.72 0.20 295);
  --accent-ink:  oklch(0.99 0.005 280);  /* text ON the accent button */
  --accent-glow: oklch(0.72 0.20 295 / 0.32);
  --accent-mag:  oklch(0.78 0.18 320);
  --on-fill:     oklch(0.16 0.02 282);   /* near-black — text on bright fills */

  --hot:         oklch(0.78 0.22 25);
  --ok:          oklch(0.78 0.18 145);

  --blob-accent: oklch(0.72 0.20 295 / 0.16);
  --blob-purple: oklch(0.55 0.20 290 / 0.12);

  --r-tile: 16px;  --r-card: 20px;  --r-input: 14px;  --r-pill: 999px;
  --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-ui:      "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* Stage backdrop — two glow blobs + a faint dotgrid, fixed so they
   never scroll with content. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(440px circle at 90% 4%,  var(--blob-accent), transparent 60%),
    radial-gradient(400px circle at 6% 98%,  var(--blob-purple), transparent 62%);
}

#app {
  position: relative; z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-inline: max(var(--s5), env(safe-area-inset-left));
  padding-bottom: calc(var(--s8) + env(safe-area-inset-bottom));
}

.screen { width: 100%; }
.screen[hidden] { display: none; }

/* ── Chrome bar — persistent session identity (populated in JS) ── */
#chrome {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  margin-inline: calc(-1 * max(var(--s5), env(safe-area-inset-left)));
  padding: var(--s3) max(var(--s5), env(safe-area-inset-left));
  padding-top: calc(var(--s3) + env(safe-area-inset-top));
  background: var(--chrome);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  min-height: 44px;
}
#chrome[hidden] { display: none; }
#chrome .live {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--hot);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
}
#chrome .dot {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--hot); box-shadow: 0 0 9px var(--hot);
}
#chrome .who { color: var(--text-dim); letter-spacing: 0.04em; }
#chrome .who b { color: var(--accent); font-weight: 600; }
#chrome .counter {
  padding: 5px 10px; border-radius: 8px;
  background: oklch(1 0 0 / 0.05); border: 1px solid var(--line);
  color: var(--text-dim); letter-spacing: 0.08em;
}
#chrome .counter[hidden] { display: none; }

/* ── Typography ────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-display);
  font-size: 30px; line-height: 1.1; font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s5);
}
h2 {
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.25; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s5);
}
.headline-gradient {
  background: linear-gradient(100deg,
    var(--text) 0%, var(--accent) 55%, var(--accent-mag) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
}

/* ── Join screen ───────────────────────────────────────────────── */
#screen-join { padding-top: 11vh; }

form { display: flex; flex-direction: column; gap: var(--s4); }

.field { display: flex; flex-direction: column; gap: 6px; }
label {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600;
  color: var(--text-dim);
}

input, textarea {
  font-family: var(--font-ui);
  font-size: 17px; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  min-height: 52px;
  padding: 14px 16px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* The room code — a designed object, not just a field. */
#code {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  letter-spacing: 8px; text-transform: uppercase;
  text-align: center;
}
#code::placeholder { letter-spacing: 6px; }

/* ── Buttons ───────────────────────────────────────────────────── */
button {
  font-family: var(--font-ui);
  cursor: pointer;
  border: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary, #join-btn {
  font-size: 17px; font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r-input);
  min-height: 52px;
  padding: 0 var(--s5);
  width: 100%;
  box-shadow: 0 0 0 1px oklch(0.72 0.20 295 / 0.5),
              0 8px 24px var(--accent-glow);
  transition: transform 120ms ease, filter 120ms ease;
}
.btn-primary:active, #join-btn:active { transform: scale(0.985); filter: brightness(1.08); }
.btn-primary:disabled, #join-btn:disabled {
  background: var(--surface-2); color: var(--text-mute);
  box-shadow: none;
}

/* ── State screen — lobby / connecting / result / finale ───────── */
#screen-status:not([hidden]) {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s8) 0;
}
.state-card {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s3); text-align: center;
  padding: var(--s8) var(--s6);
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  position: relative; overflow: hidden;
}
.state-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
}
.state-title {
  margin: 0; position: relative;
  font-family: var(--font-display);
  font-size: 30px; line-height: 1.15; font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}
.state-sub {
  margin: 0; position: relative;
  font-size: 15px; line-height: 1.5;
  color: var(--text-dim);
  max-width: 32ch;
}
.state--ok .state-title  { color: var(--ok); }
.state--hot .state-title { color: var(--hot); }
.state--ok::before, .state--hot::before {
  content: ""; position: absolute;
  top: -42%; left: 50%; width: 340px; height: 340px;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  filter: blur(64px); pointer-events: none;
}
.state--ok::before  { background: oklch(0.78 0.18 145 / 0.20); }
.state--hot::before { background: oklch(0.78 0.22 25 / 0.20); }

/* ── Question screen ───────────────────────────────────────────── */
#screen-question { padding-top: var(--s5); }
#q-text {
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.25; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--s5);
}
.options { display: flex; flex-direction: column; gap: var(--s3); }

/* ── Option tiles (poll / quiz) ────────────────────────────────── */
.opt-0 { --opt: #8b5cf6; }
.opt-1 { --opt: #06b6d4; }
.opt-2 { --opt: #f43f5e; }
.opt-3 { --opt: #f59e0b; }
.opt-4 { --opt: #22c55e; }
.opt-5 { --opt: #3b82f6; }

.options button[class*="opt-"] {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; min-height: 60px;
  padding: 13px 16px;
  font-size: 17px; line-height: 1.35; font-weight: 500;
  text-align: start; color: var(--text);
  background: color-mix(in oklab, var(--opt) 7%, var(--surface));
  border: 1px solid var(--line-strong);
  border-inline-start: 4px solid var(--opt);
  border-radius: var(--r-tile);
  transition: transform 120ms ease, background 140ms ease,
              border-color 140ms ease, box-shadow 140ms ease;
}
.options button[class*="opt-"]::before {
  content: attr(data-letter);
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--opt);
  background: color-mix(in oklab, var(--opt) 16%, transparent);
  border-radius: 8px;
}
.options button[class*="opt-"]:active { transform: scale(0.99); }
.options button[class*="opt-"].picked {
  background: var(--opt);
  border-color: var(--opt);
  color: var(--on-fill);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--opt),
              0 6px 22px color-mix(in oklab, var(--opt) 42%, transparent);
}
.options button[class*="opt-"].picked::before {
  background: oklch(1 0 0 / 0.26);
  color: var(--on-fill);
}
.options button[class*="opt-"]:disabled:not(.picked) { opacity: 0.4; }

/* ── Countdown card (quiz) ─────────────────────────────────────── */
.countdown {
  display: flex; align-items: center; gap: var(--s4);
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  margin-bottom: var(--s3);
  transition: box-shadow 200ms ease;
}
.countdown-track {
  flex: 1;
  height: 8px; border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.06);
  overflow: hidden;
}
.countdown-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transform-origin: left;
  transition: transform 220ms linear, background 200ms ease;
}
.countdown-secs {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 3ch; text-align: end;
}
.countdown--low .countdown-fill { background: var(--hot); }
.countdown--low .countdown-secs { color: var(--hot); }
.countdown--low {
  box-shadow: 0 0 0 1px oklch(0.78 0.22 25 / 0.4),
              0 0 26px oklch(0.78 0.22 25 / 0.22);
}

/* ── Scale (numeric + likert) ──────────────────────────────────── */
.scale-numeric {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.scale-numeric button {
  flex: 1 1 56px; min-width: 54px; min-height: 56px;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-tile);
  transition: transform 120ms ease, background 140ms ease,
              border-color 140ms ease;
}
.options > button:not([class*="opt-"]):not(.btn-primary) { /* likert tiles */
  width: 100%; min-height: 56px;
  padding: 14px 16px;
  font-size: 16px; font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-tile);
  text-align: start;
  transition: transform 120ms ease, background 140ms ease,
              border-color 140ms ease;
}
.scale-numeric button:active,
.options > button:not([class*="opt-"]):not(.btn-primary):active {
  transform: scale(0.98);
}
.scale-numeric button.picked,
.options > button:not([class*="opt-"]):not(.btn-primary).picked {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600;
  box-shadow: 0 4px 18px var(--accent-glow);
}
.scale-ends {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px; color: var(--text-mute);
  letter-spacing: 0.04em;
}

/* ── Word cloud ────────────────────────────────────────────────── */
.words-form { gap: var(--s3); }
.words-pills {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s2);
  min-height: 40px;
}
.pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  padding: 8px 14px;
  border-radius: var(--r-pill);
}
.pill.empty {
  color: var(--text-mute);
  background: transparent;
  border: 1px dashed var(--line-strong);
  letter-spacing: 0.02em;
}

/* ── Open-ended ────────────────────────────────────────────────── */
.open-form { display: flex; flex-direction: column; gap: var(--s3); }
.open-form textarea {
  resize: vertical; min-height: 104px;
  line-height: 1.45;
}
.anon-toggle {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: 14px; font-weight: 500;
  color: var(--text-dim);
  cursor: pointer; user-select: none;
}
.anon-toggle input {
  width: 20px; height: 20px; min-height: 0;
  accent-color: var(--accent);
  margin: 0; padding: 0;
  cursor: pointer;
}

/* Open-response wall — every answer, audience likes. */
.open-wall { margin-top: var(--s6); }
.wall-head {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 var(--s3);
}
.wall-list { display: flex; flex-direction: column; gap: var(--s2); }
.wall-empty {
  color: var(--text-mute); font-size: 14px;
  text-align: center;
  margin: 0;
  padding: var(--s5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
}
.wall-card {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.wall-text {
  margin: 0; flex: 1;
  font-size: 15px; line-height: 1.45;
  color: var(--text);
}
.wall-like {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: transform 120ms ease, color 140ms ease,
              border-color 140ms ease, background 140ms ease;
}
.wall-like .heart { font-size: 14px; line-height: 1; }
.wall-like:active { transform: scale(0.94); }
.wall-like.liked {
  color: var(--hot);
  border-color: color-mix(in oklab, var(--hot) 55%, transparent);
  background: color-mix(in oklab, var(--hot) 14%, transparent);
}

/* ── Ranking ───────────────────────────────────────────────────── */
.rank-list {
  display: flex; flex-direction: column; gap: var(--s2);
  margin-bottom: var(--s3);
}
.rank-row {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 10px 12px;
}
.rank-num {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700; font-size: 16px;
}
.rank-label {
  flex: 1;
  font-size: 15px; font-weight: 600;
  color: var(--text);
}
.rank-row button {
  flex: 0 0 auto;
  width: 44px; min-height: 44px;
  font-size: 18px;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: transform 120ms ease, opacity 140ms ease;
}
.rank-row button:active { transform: scale(0.94); }
.rank-row button:disabled { opacity: 0.3; }

/* ── Acknowledgement ───────────────────────────────────────────── */
.ack {
  margin: var(--s5) 0 0;
  display: inline-flex; align-items: center; align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  padding: 9px 14px;
  border-radius: var(--r-pill);
}
.ack[hidden] { display: none; }
.ack.is-error {
  color: var(--hot);
  background: color-mix(in oklab, var(--hot) 14%, transparent);
  border-color: color-mix(in oklab, var(--hot) 50%, transparent);
}

/* ── Errors ────────────────────────────────────────────────────── */
.error {
  margin: 6px 0 0;
  font-size: 14px; color: var(--hot);
}
.error[hidden] { display: none; }

/* ── Quiz reveal ───────────────────────────────────────────────── */
.quiz-correct { color: var(--ok); }
.quiz-wrong   { color: var(--hot); }
.muted        { color: var(--text-mute); }

/* ── Connection-loss strip ─────────────────────────────────────── */
#conn-lost {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  padding: 8px 16px;
  padding-top: calc(8px + env(safe-area-inset-top));
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--on-fill);
  background: var(--hot);
}
#conn-lost[hidden] { display: none; }

/* ── Motion & focus (production polish) ────────────────────────── */
button:focus-visible,
.options button:focus-visible,
.anon-toggle:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* A soft fade-in when a screen / state card / new wall card appears
   — opacity (+ a small lift), never a spatial slide. */
.screen:not([hidden]) { animation: screen-in 150ms ease both; }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

.state-card,
.wall-card--new { animation: card-in 170ms ease both; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Countdown urgency — the seconds numeral pulses under 5s. */
.countdown--low .countdown-secs {
  animation: secs-pulse 1s ease-in-out infinite;
}
@keyframes secs-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── Standalone AR viewer (?ar=<glbUrl>) ────────────────────────── */
/* Full-viewport model-viewer with a small caption strip pinned to
   the bottom. Reached by scanning a "Share for AR" QR — no session,
   no chrome. */
.ar-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  margin: 0;
  max-width: none;
}
.ar-screen model-viewer {
  width: 100%;
  flex: 1 1 auto;
  background: transparent;
  --poster-color: transparent;
}
.ar-caption {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(env(safe-area-inset-bottom), 12px);
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-radius: 8px;
  pointer-events: none;
  z-index: 10;
}