:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  --bg: #090b0e;
  --surface: #11151b;
  --surface-strong: #080b0f;
  --surface-raised: #1a2028;
  --text: #f4f5f4;
  --muted: #aeb6bc;
  --line: #3d4650;
  --line-soft: #252d35;
  --accent: #f34b55;
  --accent-strong: #ff6972;
  --signal: #71e6d5;
  --warning: #ffbf55;
  --shadow: #000c;
  --dot: #3b424a;
  --art-opacity: .34;
  --radius: 8px;
  background: var(--bg);
  color: var(--text);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #eeefec;
  --surface: #fafaf7;
  --surface-strong: #fff;
  --surface-raised: #e4e6e3;
  --text: #111315;
  --muted: #50575b;
  --line: #9ea5a5;
  --line-soft: #d4d8d6;
  --accent: #d91f2b;
  --accent-strong: #b81721;
  --signal: #067f75;
  --warning: #a65d00;
  --shadow: #171a1d2e;
  --dot: #bdc3c0;
  --art-opacity: .18;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--text);
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
}
button, input { color: inherit; font: inherit; }
button, input { min-height: 44px; }
button {
  background: var(--text); border: 1px solid var(--text); border-radius: 4px; color: var(--bg);
  cursor: pointer; font-weight: 800; letter-spacing: .02em; padding: .55rem .85rem;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
button:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: white; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
button:active:not(:disabled) { transform: scale(.98); }
button:disabled { cursor: not-allowed; opacity: .48; }
input { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 4px; padding: .5rem .7rem; width: 100%; }
input:hover { border-color: var(--muted); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

.layout { display: grid; gap: clamp(8px, 1vw, 16px); grid-template-columns: minmax(0, 1fr) clamp(21rem, 28vw, 26rem); height: 100dvh; padding: clamp(8px, 1vw, 16px); width: 100%; }
.stream, .chat { backdrop-filter: blur(10px); background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px var(--shadow); min-height: 0; overflow: hidden; position: relative; }
.stream::after, .chat::after { background: linear-gradient(90deg, var(--accent), var(--signal)); content: ""; height: 3px; left: 0; position: absolute; right: 0; top: 0; z-index: 3; }
.stream { display: flex; flex-direction: column; padding: clamp(8px, 1vw, 14px); }
.stream::before { background: url("assets/signal-art.svg") center / cover no-repeat; content: ""; inset: 4.5rem 0 0; opacity: var(--art-opacity); pointer-events: none; position: absolute; }
.stream-topline { align-items: center; display: flex; flex: 0 0 auto; gap: 1rem; justify-content: space-between; min-height: 4rem; position: relative; z-index: 2; }
.stream-brand { align-items: center; display: flex; gap: .65rem; min-width: 0; }
.station-mark { align-items: center; background: var(--text); border-radius: 50%; color: var(--bg); display: inline-flex; flex: 0 0 40px; font-family: Consolas, monospace; font-size: 1.2rem; font-weight: 900; height: 40px; justify-content: center; position: relative; width: 40px; }
.station-mark::after { background: var(--accent); border: 2px solid var(--surface); border-radius: 50%; content: ""; height: 10px; position: absolute; right: -2px; top: -2px; width: 10px; }
.eyebrow, .room-code, .local-time span, .panel-index, .chat-pinned-label { font-family: Consolas, "Courier New", monospace; font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { align-items: center; color: var(--accent); display: flex; gap: .4rem; margin: 0; }
.eyebrow::before { animation: pulse 1.8s ease-in-out infinite; background: var(--accent); border-radius: 50%; content: ""; height: 7px; width: 7px; }
h1 { font-family: "Arial Narrow", "Segoe UI", sans-serif; font-size: clamp(1.45rem, 2.2vw, 2.35rem); letter-spacing: -.045em; line-height: .92; margin: .06rem 0; }
.room-code { color: var(--muted); margin: 0; }
.stream-tools { align-items: center; display: flex; gap: .75rem; justify-content: flex-end; }
.local-time { color: var(--text); font-size: .78rem; font-variant-numeric: tabular-nums; margin: 0; text-align: right; }
.local-time span { color: var(--signal); display: block; }
.theme-switcher { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 999px; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; }
.theme-switcher button { background: transparent; border: 0; border-radius: 999px; color: var(--muted); font-family: Consolas, monospace; font-size: .65rem; min-height: 34px; padding: .35rem .55rem; text-transform: uppercase; }
.theme-switcher button:hover:not(:disabled) { background: var(--surface-raised); box-shadow: none; color: var(--text); }
.theme-switcher button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.viewer-count { background: color-mix(in srgb, var(--signal) 12%, var(--surface-strong)); border: 1px solid var(--signal); border-radius: 999px; color: var(--signal); font-family: Consolas, monospace; font-size: .67rem; font-weight: 800; padding: .42rem .55rem; white-space: nowrap; }
.stream-stage { display: flex; flex: 1 1 auto; min-height: 0; position: relative; }
video, .offline { border: 1px solid var(--line-soft); border-radius: 5px; flex: 1 1 auto; margin: .5rem 0 0; min-height: 0; position: relative; width: 100%; z-index: 1; }
.stream-stage > video, .stream-stage > .offline { margin-top: 0; }
video { background: #000; object-fit: contain; }
.offline { align-items: center; background: color-mix(in srgb, var(--surface-strong) 74%, transparent); color: var(--warning); display: flex; font-family: Consolas, monospace; font-size: clamp(.9rem, 1.4vw, 1.1rem); font-weight: 800; justify-content: center; letter-spacing: .08em; margin-bottom: 0; overflow: hidden; text-transform: uppercase; }
.offline::before { border: 1px solid var(--line); border-radius: 50%; content: ""; height: min(34vw, 18rem); position: absolute; width: min(34vw, 18rem); }
.offline::after { animation: signal-sweep 4s linear infinite; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--signal) 26%, transparent), transparent); content: ""; inset: 0; position: absolute; transform: translateX(-100%); }
.fullscreen-controls { bottom: .75rem; position: absolute; right: .75rem; z-index: 5; transition: opacity .2s ease, transform .2s ease; }
.fullscreen-controls.is-idle, .report-trigger.is-idle { opacity: 0; pointer-events: none; transform: translateY(.35rem); transition: opacity .3s ease, transform .3s ease; }
.fullscreen-controls.is-idle:focus-within, .report-trigger.is-idle:focus { opacity: 1; pointer-events: auto; transform: none; }
.fullscreen-controls > button { background: color-mix(in srgb, var(--surface-strong) 88%, transparent); border-color: var(--line); color: var(--text); font-size: .75rem; min-height: 38px; }
.fullscreen-controls > button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: white; }
.fullscreen-menu { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; bottom: calc(100% + .45rem); box-shadow: 0 12px 30px var(--shadow); display: grid; gap: .3rem; min-width: 11rem; padding: .35rem; position: absolute; right: 0; }
.fullscreen-menu button { background: transparent; border: 1px solid transparent; color: var(--text); font-size: .78rem; min-height: 38px; text-align: left; width: 100%; }
.fullscreen-menu button:hover:not(:disabled) { background: var(--surface-raised); border-color: var(--line); color: var(--text); box-shadow: none; }
.fullscreen-feedback { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; bottom: calc(100% + .45rem); color: var(--warning); font-size: .72rem; margin: 0; max-width: 17rem; padding: .45rem .55rem; position: absolute; right: 0; }
.report-trigger { background: color-mix(in srgb, var(--surface-strong) 88%, transparent); border-color: var(--line); bottom: .75rem; color: var(--text); font-size: .75rem; left: .75rem; min-height: 38px; position: absolute; z-index: 5; transition: opacity .2s ease, transform .2s ease; }
.stream-stage:fullscreen { background: #000; border: 0; border-radius: 0; height: 100dvh; margin: 0; width: 100vw; }
.stream-stage:fullscreen > video, .stream-stage:fullscreen > .offline { border: 0; border-radius: 0; margin: 0; }
.stream-stage.fullscreen-fallback { background: #000; border: 0; border-radius: 0; inset: 0; margin: 0; position: fixed; z-index: 100; }
.stream-stage.fullscreen-fallback > video, .stream-stage.fullscreen-fallback > .offline { border: 0; border-radius: 0; margin: 0; }
.stream.fullscreen-fallback-host { backdrop-filter: none; overflow: visible; }
.layout:fullscreen { background: var(--bg); gap: 0; height: 100dvh; padding: 0; width: 100vw; }
.layout:fullscreen .stream, .layout:fullscreen .chat { border-radius: 0; }
.layout.fullscreen-fallback { background: var(--bg); gap: 0; height: 100dvh; inset: 0; padding: 0; position: fixed; width: 100vw; z-index: 100; }
.layout.fullscreen-fallback .stream, .layout.fullscreen-fallback .chat { border-radius: 0; }

.chat { display: flex; flex-direction: column; }
.chat h2 { align-items: center; border-bottom: 1px solid var(--line-soft); display: flex; flex: 0 0 auto; font-size: 1rem; gap: .55rem; margin: 0; min-height: 3.25rem; padding: .65rem .8rem; }
.panel-index { background: var(--accent); border-radius: 3px; color: white; padding: .25rem .38rem; }
#chat-status { color: var(--muted); flex: 0 0 auto; font-size: .77rem; margin: .55rem .8rem 0; }
.chat-pinned { background: color-mix(in srgb, var(--signal) 11%, var(--surface)); border: 1px solid var(--signal); border-radius: 4px; display: grid; flex: 0 0 auto; gap: .15rem; margin: .55rem .8rem 0; padding: .55rem .65rem; }
.chat-pinned-label { color: var(--signal); }
.chat-pinned p { color: var(--muted); margin: 0; overflow-wrap: anywhere; }
#chat-messages { background: color-mix(in srgb, var(--surface-strong) 84%, transparent); border: 1px solid var(--line-soft); border-radius: 4px; color: var(--text); flex: 1 1 auto; list-style: none; margin: .55rem .8rem; min-height: 3.5rem; overflow-y: auto; padding: .4rem .6rem; scrollbar-color: var(--accent) var(--surface); scrollbar-width: thin; }
#chat-messages li { border-bottom: 1px dotted var(--line); overflow-wrap: anywhere; padding: .42rem 0; }
#chat-messages li:last-child { border-bottom: 0; }
#chat-messages strong { color: var(--signal); }
#chat-messages time { color: var(--muted); font-family: Consolas, monospace; font-size: .67rem; margin-left: .35rem; }
#chat-messages p { margin: .15rem 0 0; }
#chat-form { border-top: 1px solid var(--line-soft); display: grid; flex: 0 0 auto; gap: .4rem; grid-template-columns: minmax(0, 1fr) auto; padding: .65rem .8rem .5rem; }
#chat-form label { color: var(--muted); font-size: .72rem; grid-column: 1 / -1; }
#chat-form input { display: block; margin-top: .18rem; }
#chat-form button { align-self: end; grid-column: 2; grid-row: 3; min-width: 5.5rem; }
#chat-form .message-field { grid-column: 1; grid-row: 3; }
.recaptcha-panel { background: color-mix(in srgb, var(--surface-raised) 70%, transparent); border: 1px solid var(--line); border-radius: 4px; grid-column: 1 / -1; padding: .45rem; }
.recaptcha-label { color: var(--muted); display: block; font-size: .72rem; margin-bottom: .35rem; }
#recaptcha-widget { min-height: 78px; overflow: hidden; }
.honeypot { left: -10000px; position: absolute; }
#chat-feedback { color: var(--muted); flex: 0 0 auto; font-size: .72rem; margin: 0; min-height: 1.35rem; padding: 0 .8rem .4rem; }
.social-panel { border-top: 1px solid var(--line-soft); flex: 0 0 auto; padding: .55rem .8rem .65rem; }
.social-panel h3 { color: var(--muted); font-family: Consolas, monospace; font-size: .67rem; letter-spacing: .1em; margin: 0 0 .4rem; text-transform: uppercase; }
#social-links { display: flex; flex-wrap: wrap; gap: .35rem; }
#social-links a { border: 1px solid var(--line); border-radius: 999px; color: var(--signal); font-size: .72rem; padding: .3rem .55rem; text-decoration: none; }
#social-links a:hover { background: var(--surface-raised); border-color: var(--signal); }

dialog { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 22px 80px var(--shadow); color: var(--text); max-width: min(42rem, calc(100vw - 2rem)); padding: 0; }
dialog::backdrop { backdrop-filter: blur(5px); background: #050608d9; }
.terms-dialog { border-top: 4px solid var(--accent); padding: clamp(1rem, 3vw, 1.5rem); }
.terms-dialog h2 { margin: .25rem 0 .8rem; }
.terms-copy { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 4px; color: var(--muted); line-height: 1.55; max-height: min(42vh, 320px); overflow-y: auto; padding: 1rem; }
.terms-check { align-items: center; display: flex; gap: .65rem; margin-top: 1rem; }
.terms-check input { accent-color: var(--accent); height: 1.25rem; min-height: 1.25rem; width: 1.25rem; }
.terms-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.terms-feedback { color: var(--accent); min-height: 1.2rem; }
.report-dialog { border-top: 4px solid var(--accent); display: grid; gap: .45rem; max-height: min(90dvh, 680px); overflow-y: auto; padding: clamp(1rem, 3vw, 1.5rem); }
.report-dialog h2 { margin: .25rem 0 .1rem; }
.report-dialog label { color: var(--muted); font-size: .78rem; margin-top: .25rem; }
.report-dialog input, .report-dialog select, .report-dialog textarea { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 4px; color: var(--text); font: inherit; padding: .55rem .65rem; width: 100%; }
.report-dialog textarea { resize: vertical; }
.report-dialog select { min-height: 44px; }

.tv-controls { display: none; }
html.tv-mode body { background: #080a0e; }
html.tv-mode .layout { display: grid; gap: clamp(8px, 1vw, 14px); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100dvh; padding: clamp(8px, 1vw, 16px); }
html.tv-mode .layout.tv-chat-open { grid-template-columns: minmax(0, 1fr) minmax(17rem, 19vw); }
html.tv-mode .stream { grid-column: 1; grid-row: 1; height: auto; min-width: 0; padding: clamp(8px, 1vw, 16px); }
html.tv-mode .stream-topline { min-height: clamp(42px, 7vh, 70px); }
html.tv-mode .stream::before { inset: 3.5rem 0 0; }
html.tv-mode .stream-stage { min-height: 0; }
html.tv-mode .stream-stage > video, html.tv-mode .stream-stage > .offline { margin: 0; }
html.tv-mode .fullscreen-controls, html.tv-mode .report-trigger { display: none; }
html.tv-mode .tv-controls { align-items: center; background: linear-gradient(0deg, #080a0ef7, #080a0eb8); border: 1px solid var(--line); border-radius: 8px; bottom: clamp(12px, 2vw, 28px); display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 18px); left: clamp(12px, 2vw, 28px); padding: clamp(10px, 1vw, 18px); position: absolute; right: clamp(12px, 2vw, 28px); z-index: 6; }
html.tv-mode .tv-controls { transition: opacity .25s ease, transform .25s ease; }
html.tv-mode .tv-controls.is-idle { opacity: 0; pointer-events: none; transform: translateY(.4rem); }
html.tv-mode .tv-controls button { background: var(--surface-raised); border-color: var(--line); color: var(--text); font-size: clamp(1rem, 1.5vw, 1.5rem); min-height: clamp(52px, 7vh, 72px); padding: .55em 1em; }
html.tv-mode .tv-controls button:disabled { opacity: .42; }
html.tv-mode .tv-controls button:focus, html.tv-mode .tv-controls button:focus-visible { background: var(--text); border-color: var(--accent); box-shadow: 0 0 0 4px var(--surface-strong), 0 0 0 8px var(--accent); color: var(--bg); outline: none; }
html.tv-mode .tv-hint { color: var(--muted); flex-basis: 100%; font-size: clamp(.85rem, 1.2vw, 1.15rem); }
html.tv-mode .chat { bottom: auto; box-shadow: -12px 0 32px #0008; display: none; grid-column: 2; grid-row: 1; max-width: none; min-width: 0; position: relative; right: auto; top: auto; width: auto; z-index: 8; }
html.tv-mode .chat.tv-open { display: flex; }
html.tv-mode .chat h2 { font-size: clamp(1rem, 1.4vw, 1.35rem); min-height: 3.25rem; }
html.tv-mode .chat #chat-messages { font-size: clamp(.85rem, 1.05vw, 1.05rem); }
html.tv-mode .chat input, html.tv-mode .chat button { font-size: clamp(.9rem, 1vw, 1.05rem); min-height: 46px; }
html.tv-mode dialog { font-size: clamp(1rem, 1.35vw, 1.3rem); max-height: 90dvh; max-width: min(76vw, 1050px); }
html.tv-mode dialog button, html.tv-mode dialog input, html.tv-mode dialog select { min-height: 52px; }
html.tv-mode #terms-dialog {
  box-sizing: border-box;
  height: min(90vh, 720px);
  max-height: calc(100vh - 1rem);
  max-width: min(76vw, 1050px);
  overflow: hidden;
  width: min(76vw, 1050px);
}
html.tv-mode .terms-dialog {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: none;
  overflow: hidden;
  padding: 1rem 1.25rem;
}
html.tv-mode .terms-copy { flex: 1 1 auto; max-height: none; min-height: 0; overflow-y: auto; }
html.tv-mode .terms-check, html.tv-mode .terms-feedback, html.tv-mode .terms-actions { flex: 0 0 auto; }
html.tv-mode .terms-check { margin-top: .6rem; }
html.tv-mode .terms-actions { margin-top: .6rem; }
@supports (height: 100dvh) {
  html.tv-mode #terms-dialog { height: min(90dvh, 720px); max-height: calc(100dvh - 1rem); }
}
html.tv-mode #report-dialog { max-width: min(90vw, 1100px); width: 100%; }
html.tv-mode .report-dialog { column-gap: 1rem; display: grid; grid-template-columns: 1fr 1fr; max-height: 90dvh; padding: 1rem 1.25rem; row-gap: .2rem; }
html.tv-mode .report-dialog > .eyebrow, html.tv-mode .report-dialog > h2, html.tv-mode .report-dialog > .hint, html.tv-mode .report-dialog > .terms-feedback, html.tv-mode .report-dialog > .terms-actions { grid-column: 1 / -1; }
html.tv-mode .report-dialog > .hint { margin: .15rem 0; }
html.tv-mode .report-dialog label[for="report-category"] { grid-column: 1; grid-row: 4; }
html.tv-mode .report-dialog #report-category { grid-column: 1; grid-row: 5; }
html.tv-mode .report-dialog label[for="report-details"] { grid-column: 2; grid-row: 4; }
html.tv-mode .report-dialog #report-details { grid-column: 2; grid-row: 5; height: 52px; min-height: 52px; }
html.tv-mode .report-dialog label[for="report-nickname"] { grid-column: 1; grid-row: 6; }
html.tv-mode .report-dialog #report-nickname { grid-column: 1; grid-row: 7; }
html.tv-mode .report-dialog label[for="report-contact"] { grid-column: 2; grid-row: 6; }
html.tv-mode .report-dialog #report-contact { grid-column: 2; grid-row: 7; }
html.tv-mode .report-dialog .terms-actions { gap: .7rem; margin-top: .25rem; }
html.tv-mode :focus-visible { outline: 4px solid var(--accent); outline-offset: 4px; }
html.tv-mode .stream-stage:fullscreen .tv-controls { bottom: 3vw; }
@media (max-width: 800px) {
  html.tv-mode .layout.tv-chat-open { grid-template-columns: minmax(0, 1fr) minmax(15rem, 34vw); grid-template-rows: minmax(0, 1fr); }
  html.tv-mode .chat { grid-column: 2; grid-row: 1; }
  html.tv-mode .tv-controls { gap: 6px; }
  html.tv-mode .tv-controls button { font-size: .9rem; min-height: 44px; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: minmax(13rem, 42dvh) minmax(0, 1fr); }
  .stream::before { inset: 4rem 0 0; }
}

@media (max-width: 560px) {
  .layout { gap: 6px; padding: 6px; }
  .stream { padding: 7px; }
  .stream-topline { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 4rem; }
  .station-mark { flex-basis: 34px; height: 34px; width: 34px; }
  h1 { font-size: 1.35rem; }
  .room-code, .local-time span { display: none; }
  .local-time { font-size: .65rem; grid-column: 1 / -1; grid-row: 2; text-align: right; }
  .stream-tools { display: contents; }
  .theme-switcher { grid-column: 2; grid-row: 1; }
  .theme-switcher button { min-height: 30px; padding-inline: .42rem; }
  .chat h2 { min-height: 2.8rem; }
  #chat-status { margin-top: .35rem; }
  #chat-messages { margin-block: .4rem; }
  #chat-form { padding-block: .5rem .35rem; }
}

@media (min-width: 680px) and (max-height: 520px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(21rem, 41vw); grid-template-rows: 1fr; }
  .stream-topline { min-height: 3rem; }
  .room-code, .local-time span { display: none; }
  .theme-switcher button { min-height: 30px; }
  .chat h2 { min-height: 2.55rem; padding-block: .4rem; }
  #chat-status { margin-top: .3rem; }
  #chat-messages { margin-block: .35rem; min-height: 0; }
  #chat-form { gap: .3rem; grid-template-columns: 1fr 1fr auto; padding-block: .4rem .25rem; }
  #chat-form label { grid-column: auto; }
  #chat-form .recaptcha-panel { grid-column: 1 / -1; }
  #chat-form .message-field { grid-column: 1 / 3; grid-row: 2; }
  #chat-form button { grid-column: 3; grid-row: 1 / 3; }
  #chat-feedback { min-height: 1rem; }
}

@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); opacity: 1; } 50% { box-shadow: 0 0 0 6px transparent; opacity: .62; } }
@keyframes signal-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }