:root {
  --bg: #000;
  --fg: #e8e6e3;
  --dim: #8a8784;
  --accent: #f0c46c;
  --off: #23344a;
  --on: #1d2a1d;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body {
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  overscroll-behavior: none;
}
header {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .6rem 1rem; font-size: .95rem; color: var(--dim);
  border-bottom: 1px solid #1a1a1a;
}
.title { font-weight: 600; }
.pill { font-size: .85rem; padding: .15rem .6rem; border-radius: 999px; background: #1a1a1a; white-space: nowrap; }
.pill.ok::before { content: "● "; color: #4caf50; }
.pill.wait::before { content: "● "; color: #e0a030; }
.pill.bad::before { content: "● "; color: #e05050; }

.langs { display: flex; justify-content: center; gap: .4rem; padding: .55rem 1rem 0; }
.langs[hidden] { display: none; }
.langs button {
  background: transparent; color: var(--dim); border: 1px solid #2c2c2c; border-radius: 999px;
  padding: .3rem .95rem; font-size: .95rem; font-family: inherit;
}
.langs button[aria-pressed="true"] { color: var(--fg); border-color: #6a6763; background: #151515; }

/* Live only: the newest lines sit at the bottom, older ones fade out at the top. No scrolling back. */
main {
  flex: 1; overflow: hidden; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1rem 1.1rem 1.4rem; max-width: 46rem; width: 100%; margin: 0 auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
main p {
  margin: 0 0 .9em; font-size: 1.6rem; line-height: 1.42;
  color: var(--dim); transition: color .4s;
}
main p.recent { color: var(--fg); }
main p.onair { color: #fff; border-left: 3px solid var(--accent); padding-left: .6rem; margin-left: -.9rem; }
.waiting { text-align: center; color: var(--dim); font-size: 1.2rem; padding: 0 1.5rem; margin: 0 0 1rem; }

footer {
  display: flex; flex-direction: column; align-items: center;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
}
.mute {
  width: 64px; height: 64px; border-radius: 50%; padding: 0;
  border: 1px solid #3a3a3a; background: #141414; color: #bdbab6;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.mute:active { transform: scale(.96); }
.mute .ico { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8;
             stroke-linecap: round; stroke-linejoin: round; }
.mute .ico-on { display: none; }
.mute.on { background: #142017; color: #9fd8ab; border-color: #4f8f5c; }
.mute.on .ico-on { display: block; }
.mute.on .ico-off { display: none; }
.state { color: var(--dim); font-size: .85rem; text-align: center; margin-top: .55rem; min-height: 1.2em; }
.state.live { color: #8fd18f; }
.state.live::before { content: ""; display: inline-block; width: .5em; height: .5em; border-radius: 50%;
                      background: currentColor; margin-right: .4em; vertical-align: .1em; }
.state.warn { color: var(--accent); }