/* RP TV theme (night city: deep purple, neon pink and sunset orange),
   shared by the TV and the phone. The accent color comes from
   <html data-accent="…">; --grad is the accent used on highlighted buttons. */
:root,
[data-accent="neon"] { --fg: #ff5aa8; --grad: linear-gradient(135deg, #ff9a3d, #ff4da0); }
[data-accent="orange"] { --fg: #ff9a3d; --grad: linear-gradient(135deg, #ffc15a, #ff7a2e); }
[data-accent="violet"] { --fg: #a98bff; --grad: linear-gradient(135deg, #c3a8ff, #7a5cff); }
[data-accent="white"] { --fg: #ece8ff; --grad: #ece8ff; }

:root {
  --bg: #0b0818;
  --panel: #120d26;
  --dim: color-mix(in srgb, var(--fg) 30%, #9088b8);
  --faint: color-mix(in srgb, var(--fg) 18%, #2a2150);
  --line: color-mix(in srgb, var(--fg) 30%, #2a2150);
  --text: color-mix(in srgb, var(--fg) 12%, #ece8ff);
  --live: #ff4d4d;
  --warn: #ff6b5e;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Chat lines, used by both the TV overlay and the phone chat: the usual
   Twitch/Kick look (badge icons, bold colored name, plain text). */
.msg { color: #fff; }
.msg .name { font-weight: 700; }
.msg .reply { opacity: 0.6; font-size: 0.8em; }
.msg.system { color: #b3a8d4; font-style: italic; }
.chat-badge { width: 1.15em; height: 1.15em; margin-right: 0.25em; vertical-align: -0.2em; border-radius: 0.15em; }