/* ===========================================================
   AshLive — application component vocabulary.
   Built ENTIRELY on the tokens in brand.css (loaded first). No
   hardcoded brand hex lives here; colors reference --ash-* / --opt-*.
   Shared by every surface: audience (light), presenter + OBS (dark).
   =========================================================== */

/* App-level tokens (brand colors live in brand.css; these are app extras). */
:root { --heat: 245 90 35; }   /* pin-image heatmap dot — rgb channels for rgb()/alpha */

/* --- Type ------------------------------------------------------------ */
body { font-family: var(--ash-font-display); }
.font-body { font-family: var(--ash-font-body); }

/* --- Surfaces -------------------------------------------------------- */
/* Audience phones run on the light app surface; the presenter stage and
   OBS overlays run on the dark stage. Components below adapt to whichever
   they're dropped into by leaning on `currentColor`. */
.surface-light { background: var(--ash-surface); color: var(--ash-ink); }
.surface-dark  { background: var(--ash-surface-dark); color: var(--ash-white); }

/* --- Logo -----------------------------------------------------------
   The wordmark ships as a locked, transparent raster. We only ever scale
   it proportionally and give it clear space (≥25% of its height) via the
   margin utilities on its container — never a background shape behind it. */
.ash-logo { display: block; width: auto; height: auto; user-select: none; }
.ash-logo--xs { height: 22px; }
.ash-logo--sm { height: 34px; }
.ash-logo--md { height: 54px; }
.ash-logo--lg { height: 96px; }
.ash-logo--xl { height: 140px; }

/* --- Answer-tile system (Kahoot-style) ------------------------------
   Each option pairs a categorical color (--opt-N) with a distinct white
   shape badge for colorblind safety. .opt-cN sets the tile's color. */
.opt-c1 { --opt-color: var(--opt-1); }
.opt-c2 { --opt-color: var(--opt-2); }
.opt-c3 { --opt-color: var(--opt-3); }
.opt-c4 { --opt-color: var(--opt-4); }
.opt-c5 { --opt-color: var(--opt-5); }
.opt-c6 { --opt-color: var(--opt-6); }

.opt-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 480px) { .opt-grid--2 { grid-template-columns: 1fr 1fr; } }

.opt-tile {
  display: flex; align-items: center; gap: .85rem;
  width: 100%; text-align: left;
  padding: 1rem 1.1rem; border-radius: 1rem;
  background: var(--opt-color); color: var(--ash-white);
  font-weight: 700; font-size: 1.15rem; line-height: 1.2;
  border: none; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.18) inset, 0 4px 14px rgba(0,0,0,.12);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.opt-tile:hover { filter: brightness(1.05); }
.opt-tile:active { transform: translateY(1px) scale(.995); }
.opt-tile[aria-pressed="true"], .opt-tile.is-selected {
  outline: 4px solid var(--ash-white);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px var(--opt-color), 0 6px 18px rgba(0,0,0,.25);
}
.opt-tile[disabled] { opacity: .55; cursor: default; filter: none; }

/* white shape badge inside a tile */
.opt-shape {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; color: var(--ash-white);
  display: inline-flex; align-items: center; justify-content: center;
}
.opt-shape svg { width: 100%; height: 100%; fill: currentColor; }

/* small inline chip (used in results rows / legends) */
.opt-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: .45rem;
  background: var(--opt-color); color: #fff; flex: 0 0 auto;
}
.opt-chip svg { width: .9rem; height: .9rem; fill: currentColor; }

/* --- Distribution bars (surface-adaptive) ---------------------------
   Track tints via currentColor so the SAME results partial reads on the
   light audience phone and the dark presenter/OBS stage. */
.bar-track {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: .75rem; overflow: hidden;
}
.bar-fill {
  height: 100%; border-radius: .75rem;
  background: var(--opt-color, var(--ash-blue));
  transform-origin: left; transition: width .45s ease;
}
.bar-fill--muted { background: color-mix(in srgb, var(--ash-blue) 55%, transparent); }
.bar-fill--correct { background: var(--opt-3); }     /* green */
.bar-fill--top { background: var(--ash-blue); }

/* --- Podium --------------------------------------------------------- */
.podium-gold   { background: var(--gold); color: #3a2c00; }
.podium-silver { background: var(--silver); color: #2a2c2e; }
.podium-bronze { background: var(--bronze); color: #fff; }
.rank-gold   { color: var(--gold); }
.rank-silver { color: var(--silver); }
.rank-bronze { color: var(--bronze); }

/* --- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--ash-font-display); font-weight: 700;
  padding: .85rem 1.25rem; border-radius: 1rem; border: 1px solid transparent;
  cursor: pointer; transition: background .15s ease, filter .15s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ash-blue); color: #fff; }
.btn-primary:hover { background: var(--ash-blue-deep); }
.btn-ghost-light { background: #fff; color: var(--ash-ink); border-color: color-mix(in srgb, var(--ash-ink) 14%, transparent); }
.btn-ghost-light:hover { background: var(--ash-surface); }
.btn-ghost-dark { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.14); }
.btn-ghost-dark:hover { background: rgba(255,255,255,.12); }

/* --- Fields --------------------------------------------------------- */
.field {
  width: 100%; border-radius: .9rem; padding: .85rem 1rem; font-size: 1.05rem;
  background: #fff; color: var(--ash-ink);
  border: 1.5px solid color-mix(in srgb, var(--ash-ink) 16%, transparent);
  outline: none; transition: border-color .15s ease;
}
.field:focus { border-color: var(--ash-blue); }
.field-dark {
  background: rgba(255,255,255,.06); color: #fff;
  border-color: rgba(255,255,255,.16);
}
.field-dark:focus { border-color: var(--ash-blue); }

/* --- Cards ---------------------------------------------------------- */
.card-light { background: #fff; border-radius: 1.1rem; box-shadow: 0 1px 3px rgba(16,23,38,.08), 0 8px 24px rgba(16,23,38,.06); }
.card-dark  { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 1.1rem; }

/* --- Countdown (quiz) ----------------------------------------------- */
.countdown {
  --pct: 100;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.4rem;
  background: conic-gradient(var(--ash-blue) calc(var(--pct) * 1%), color-mix(in srgb, currentColor 14%, transparent) 0);
  color: inherit;
}
.countdown > span { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--ash-surface-dark); color: var(--ash-white); }
.countdown.is-urgent { background: conic-gradient(var(--opt-4) calc(var(--pct) * 1%), color-mix(in srgb, currentColor 14%, transparent) 0); }

/* --- Presenter / OBS helpers ---------------------------------------- */
.stage-prompt { font-weight: 800; letter-spacing: -.01em; line-height: 1.08; }

/* OBS Browser Source overlays must be transparent so only the widget shows. */
.obs-root, .obs-root body { background: transparent !important; }

/* --- Misc ----------------------------------------------------------- */
.tabular { font-variant-numeric: tabular-nums; }
.bar-grow { transform-origin: left; transition: width .4s ease; }