/* Feedback broadcast overlays — TRANSPARENT background for OBS browser sources.
   Big, legible, motion-on-update. No app chrome. */

:root {
  --blue: #5b8cff;
  --gold: #ffca3a;
  --good: #36d399;
  --bad: #f8576b;
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.72);
  --panel: rgba(12, 15, 22, 0.82);
  --panel-2: rgba(255, 255, 255, 0.06);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

/* Transparent — OBS composites this over the video. */
html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.overlay-root {
  position: fixed;
  left: 48px;
  bottom: 48px;
  max-width: 640px;
}

/* Configurable anchor (?pos=, SMS-308) — safe-area margin 48px. */
.overlay-root.pos-bottom-left { left: 48px; right: auto; top: auto; bottom: 48px; transform: none; }
.overlay-root.pos-bottom-right { right: 48px; left: auto; top: auto; bottom: 48px; transform: none; }
.overlay-root.pos-top-left { left: 48px; right: auto; top: 48px; bottom: auto; transform: none; }
.overlay-root.pos-top-right { right: 48px; left: auto; top: 48px; bottom: auto; transform: none; }
.overlay-root.pos-bottom-center { left: 50%; right: auto; top: auto; bottom: 48px; transform: translateX(-50%); }

/* Connection dot — tiny, top-right; hide with ?status=0 */
.status-dot {
  position: fixed; top: 12px; right: 12px; width: 10px; height: 10px;
  border-radius: 50%; z-index: 100; opacity: 0.85;
}
.status-live { background: var(--good); box-shadow: 0 0 8px var(--good); }
.status-connecting, .status-reconnecting { background: var(--gold); animation: blink 1s infinite; }
.status-error { background: var(--bad); }
@keyframes blink { 50% { opacity: 0.25; } }

/* ── Lower third (leaderboard / favorite / tally) ── */
.lower-third {
  background: var(--panel);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  border-left: 5px solid var(--blue);
  animation: slidein 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
  min-width: 380px;
}
.accent-blue { border-left-color: var(--blue); }
.accent-gold { border-left-color: var(--gold); }
.accent-muted { border-left-color: rgba(255, 255, 255, 0.25); }

.lt-title {
  font-size: 15px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 12px;
}
.accent-gold .lt-title { color: var(--gold); }
.lt-list { display: flex; flex-direction: column; gap: 8px; }
.lt-empty { color: var(--ink-dim); font-size: 16px; padding: 6px 0; }

.lt-row {
  display: grid; grid-template-columns: 40px auto 1fr auto; gap: 14px; align-items: center;
  padding: 8px 12px; border-radius: 10px; background: var(--panel-2);
}
.lt-rank { font-size: 22px; font-weight: 900; color: var(--blue); text-align: center; }
.accent-gold .lt-rank { color: var(--gold); }

/* Actor headshot (SMS-305) — small round face next to the name. The <img> and
   the initials fallback share the same box so the grid column stays aligned. */
.lt-shot {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--panel-2); border: 2px solid rgba(255, 255, 255, 0.16);
  flex: none;
}
.lt-shot-initials {
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--ink-dim);
  text-transform: uppercase; line-height: 1;
}

.lt-name { font-size: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-score { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }

.pulse { animation: pulse 0.6s ease; }
@keyframes pulse {
  0% { background: rgba(91, 140, 255, 0.45); transform: scale(1.015); }
  100% { background: var(--panel-2); transform: scale(1); }
}

/* ── Tally bars ── */
.bar-row { padding: 6px 0; }
.bar-head { display: flex; justify-content: space-between; font-size: 19px; font-weight: 700; margin-bottom: 5px; }
.bar-val { font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.bar-track { height: 14px; border-radius: 8px; background: var(--panel-2); overflow: hidden; }
.bar { height: 100%; background: linear-gradient(90deg, var(--blue), #8ab0ff); border-radius: 8px; transition: width 0.4s cubic-bezier(0.2, 0.9, 0.2, 1); }

/* ── Reveal ── */
.reveal-card {
  background: var(--panel); border-radius: 16px; padding: 22px 26px; box-shadow: var(--shadow);
  backdrop-filter: blur(8px); border-left: 5px solid var(--blue); min-width: 380px;
}
.reveal-card.revealed { animation: reveal 0.6s cubic-bezier(0.2, 0.9, 0.2, 1); }
.reveal-sealed {
  font-size: 40px; font-weight: 900; letter-spacing: 0.3em; color: var(--ink-dim);
  text-align: center; padding: 18px 0;
}
@keyframes reveal { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.reveal-card .lt-row { margin-top: 8px; }

/* ── Compare ── */
.compare-card {
  background: var(--panel); border-radius: 16px; padding: 22px 26px; box-shadow: var(--shadow);
  backdrop-filter: blur(8px); border-left: 5px solid var(--blue);
  animation: slidein 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.compare-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.compare-side { text-align: center; }
.compare-name { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.compare-score { font-size: 44px; font-weight: 900; color: var(--blue); font-variant-numeric: tabular-nums; }
.compare-rank { font-size: 16px; color: var(--ink-dim); }
.compare-vs { font-size: 22px; font-weight: 900; color: var(--ink-dim); }

/* ── Elimination ── */
.elim-card {
  background: var(--panel); border-radius: 16px; padding: 22px 28px; box-shadow: var(--shadow);
  backdrop-filter: blur(8px); border-left: 5px solid var(--bad); text-align: center; min-width: 360px;
}
.elim-card.confirmed { animation: stamp 0.5s cubic-bezier(0.2, 0.9, 0.2, 1); }
.elim-name { font-size: 38px; font-weight: 900; margin-top: 6px; }
.elim-name.at-risk { color: var(--gold); font-size: 30px; }
.elim-atrisk-label { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
@keyframes stamp { 0% { transform: scale(1.3) rotate(-3deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

@keyframes slidein { 0% { transform: translateY(18px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }