/*
 * LiveBridge OBS overlay brand layer (Phase 3b / P3B-R1).
 * Tokens mirror packages/ui/src/styles/tokens.css (dark values: overlays sit on top of video, so
 * every surface is an ink scrim). This is the ONLY file that may contain hex colours.
 *
 * Style params win: overlay-common.js sets the --ov-* custom properties (font, size, spacing, offset,
 * scale) on :root only when the URL carries them. Each page reads them in its own <style> with the
 * brand value as the fallback, and only where it did so before this restyle (the schema drift test
 * locks which params a page exposes), so this file never reads them. Colour params (goal) work the
 * same way through their --goal-* variables.
 */
:root {
  --lb-ink: #12141C;
  --lb-surface: #161923;
  --lb-scrim: rgb(18 20 28 / 0.88);
  --lb-scrim-soft: rgb(18 20 28 / 0.66);
  --lb-line: rgb(242 241 236 / 0.14);
  --lb-text: #F2F1EC;
  --lb-text-2: #A3A8B8;
  --lb-brand: #5B7BFF;
  /* brand-coloured TEXT on a scrim: the lighter ring token (AA on a light scene too) */
  --lb-brand-text: #7D96FF;
  --lb-brand-2: #9DB0FF;
  --lb-brand-solid: #2B54FF;
  --lb-live: #B8F23A;
  --lb-live-fg: #12141C;
  --lb-success: #3DD398;
  --lb-warning: #F2BE3A;
  --lb-danger: #FF8084;
  --lb-gold: #F2BE3A;
  --lb-silver: #D5D8E2;
  --lb-bronze: #E0A06B;

  --lb-radius: 10px;
  --lb-radius-card: 16px;
  --lb-shadow: 0 10px 28px -8px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.35);
  
  --lb-font-body: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lb-font-display: "Bricolage Grotesque", "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lb-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* chat name palette (readable on the ink scrim) */
  --lb-u0: #9DB0FF; --lb-u1: #B9C6FF; --lb-u2: #3DD398; --lb-u3: #F2BE3A; --lb-u4: #FF8084;
  --lb-u5: #C4A5FF; --lb-u6: #5CD6E6; --lb-u7: #FFA46B; --lb-u8: #F58AC8; --lb-u9: #D5D8E2;

  /* confetti / particles / wheel segments: brand-first, then supporting hues */
  --lb-p0: #5B7BFF; --lb-p1: #9DB0FF; --lb-p2: #F2F1EC; --lb-p3: #F2BE3A; --lb-p4: #3DD398;
  --lb-w0: #5B7BFF; --lb-w1: #F2F1EC; --lb-w2: #9DB0FF; --lb-w3: #3DD398;
  --lb-w4: #A3A8B8; --lb-w5: #F2BE3A; --lb-w6: #C4A5FF; --lb-w7: #FF8084;

  /* social-rotator: the platforms' own brand colours (their icons are only recognisable in them) */
  --lb-sx-tiktok: #010101; --lb-sx-tiktok-a: #25F4EE; --lb-sx-tiktok-b: #FE2C55;
  --lb-sx-facebook: #1877F2; --lb-sx-youtube: #FF0033; --lb-sx-zalo: #0068FF; --lb-sx-discord: #5865F2;
  --lb-sx-instagram: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);

  /* the "span": a short brand-blue rule with a lime tip (LiveBridge's recurring mark) */
  --lb-span-gradient: linear-gradient(90deg, var(--lb-brand) 0 78%, var(--lb-live) 78% 100%);
  --lb-span-gradient-v: linear-gradient(180deg, var(--lb-brand) 0 78%, var(--lb-live) 78% 100%);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: transparent; overflow: hidden; }
body {
  font-family: var(--lb-font-body);
  color: var(--lb-text);
  -webkit-font-smoothing: antialiased;
}

/* ---- shared building blocks ---- */
.lb-panel {
  background: var(--lb-scrim);
  border-radius: var(--lb-radius-card);
  box-shadow: var(--lb-shadow), inset 0 0 0 1px var(--lb-line);
}
/* Live dot (ranking's LIVE badge): lime = the running state. */
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--lb-live); animation: lbPulse 1.8s ease-out infinite;
}
.lb-error {
  margin: 16px; padding: 10px 14px; width: max-content; max-width: calc(100vw - 32px);
  border-radius: var(--lb-radius); background: var(--lb-scrim); color: var(--lb-danger);
  font-size: 15px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--lb-line);
}
@keyframes lbPulse {
  0% { box-shadow: 0 0 0 0 rgb(184 242 58 / 0.55); }
  70% { box-shadow: 0 0 0 7px rgb(184 242 58 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(184 242 58 / 0); }
}

/*
 * Reduced motion. Chromium hosts map the OS "animation effects" setting to `reduce` (the dashboard preview
 * iframes do; OBS/CEF may too), so this is targeted rather than a blanket kill: movement, bounce, shake and
 * loops are removed, entrances become a short fade, and information-carrying elements stay visible
 * (the subathon "+N" gets a fade-only keyframe instead of vanishing).
 */
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes lbFlash { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* `html ` prefix: page <style> comes after this sheet, so equal specificity would lose */
  html .live-dot, html .clock.ending, html .anim-pulse, html .gift-icon, html .goal-bar-fill.complete, html .particle, html .confetti { animation: none; }
  html .particle, html .confetti { display: none; }
  html .alert, html .alert.show, html .chat-msg, html .row, html .bar, html .col, html .tts-bubble, html .jar-alert, html .result.show, html .anim-zoom, html .anim-bounce, html .anim-slide, html .anim-shake { animation: lbFade 0.25s both; }
  html .alert.hide, html .tts-bubble.hide { animation: lbFadeOut 0.2s both; }
  html .added.fly { animation: lbFlash 1.4s both; }
  html .jar-item, html .jar-of-item { transition-duration: 0.01ms; }
}

/* ---- ranking period themes (ranking.html adds .th-<period> to .rk) ---- */
.rk.th-session { --accent: var(--lb-brand); --accent2: #9DB0FF; }
.rk.th-week    { --accent: var(--lb-success); --accent2: #8BE9C6; }
.rk.th-month   { --accent: var(--lb-gold); --accent2: #FFDE8A; }
.rk.th-all     { --accent: var(--lb-text-2); --accent2: var(--lb-silver); }

/* ---- Pro lock screen (overlay-common.js showBlocked) ---- */
.lb-locked {
  position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px; background: var(--lb-ink);
}
.lb-locked-icon { font-size: 42px; }
.lb-locked-title { font-family: var(--lb-font-display); font-size: 20px; font-weight: 800; color: var(--lb-text); }
.lb-locked-sub { font-size: 14px; color: var(--lb-text-2); }

/* ---- ?theme= of the live desk overlays (poll, giveaway, pinned-chat, latest-events): dark is the default ---- */
body[data-theme="light"] {
  --lb-scrim: rgb(250 250 247 / 0.94); --lb-surface: #E9EBF2; --lb-line: rgb(18 20 28 / 0.16);
  --lb-text: #12141C; --lb-text-2: #4A5063; --lb-brand-text: #2B54FF; --lb-live: #3F7D0B; --lb-live-fg: #FFFFFF;
  --lb-danger: #B3262E; --lb-ink: #FFFFFF; --lb-gold: #7A5A00; --lb-success: #1F6B4A; --lb-shadow: 0 10px 28px -8px rgb(0 0 0 / 0.25), 0 2px 6px rgb(0 0 0 / 0.15);
}
body[data-theme="clear"] { --lb-scrim: transparent; --lb-shadow: none; --lb-line: transparent; text-shadow: 0 1px 3px rgb(0 0 0 / 0.75); }