*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

:root {
  --bg: #07060d;
  --ink: #f6f4ff;
  --dim: #a9a3c8;
  --faint: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.12);
  --surface: rgba(15, 12, 27, 0.84);
  --surface-strong: rgba(22, 18, 40, 0.94);
  --live: #ff2d55;
  --next: #ffb547;
  --pick: #3ee6a8;
  --violet: #a259ff;
  --grad: linear-gradient(120deg, #ff4d8d 0%, #a259ff 52%, #4dd6ff 100%);
  --grad-warm: linear-gradient(120deg, #ff2d55 0%, #ff4d8d 100%);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  --radius: 18px;
  --safe-top: max(12px, env(safe-area-inset-top));
  --safe-left: max(12px, env(safe-area-inset-left));
  --safe-right: max(12px, env(safe-area-inset-right));
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  /* The bottom strip the history control owns (slider.css, .hs): its height plus a gap. Everything
     else in the player keeps clear of it by this much, so there is one number to change if it grows.
     The covers it raises while it is held float over the picture and are not counted here. */
  --bar: 58px;
  --above-bar: calc(var(--safe-bottom) + var(--bar));
  --topbar: 64px;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

.player {
  position: fixed;
  inset: 0;
  background: var(--bg);
}

/* ---------- Video ---------- */

/* One feed fills the screen; during a handoff the stage splits and both hosts are on. */
.stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: #000;
}

.player.two-up .stage {
  grid-template-columns: 1fr 1fr;
}

@media (orientation: portrait) {
  .player.two-up .stage {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

.feed {
  position: relative;
  margin: 0;
  min-width: 0;
  min-height: 0;
  background: #000;
}

/* The two figures trade the main and second roles at a hand-over; the main one always comes first. */
.feed.is-main {
  order: 0;
}

.feed.is-side {
  order: 1;
}

/* After a handoff the main picture starts on the new host behind the second one, which has the whole
   stage until the main one is playing. Still laid out and drawn, so the browser keeps decoding it. */
.player.takeover .feed.is-main {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* No filters, blurs or transforms on the video itself: on a phone every one of them takes the picture
   off the hardware overlay and costs frames. */
.feed video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Name plate, only while two hosts share the stage. */
.feed .who {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 650;
}

.player.two-up .feed .who {
  display: inline-flex;
}

.feed .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 10px var(--live);
}

.feed .dot.next {
  background: var(--next);
  box-shadow: 0 0 10px var(--next);
}

@media (orientation: portrait) {
  .player.rotated .stage {
    grid-template-columns: 1fr;
  }

  .player.rotated {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* Legibility for the controls, drawn once: a static gradient costs nothing per frame. */
.scrim {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.scrim.top {
  top: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(7, 6, 13, 0.7), rgba(7, 6, 13, 0));
}

.scrim.bottom {
  bottom: 0;
  height: 190px;
  background: linear-gradient(to top, rgba(7, 6, 13, 0.85), rgba(7, 6, 13, 0));
}

/* ---------- Empty stage ---------- */

.empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: calc(var(--topbar) + 20px) 20px calc(var(--above-bar) + 90px);
  overflow: hidden;
  background: var(--bg);
}

.aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 35% at 20% 30%, rgba(255, 77, 141, 0.45), transparent 70%),
    radial-gradient(35% 40% at 80% 25%, rgba(162, 89, 255, 0.45), transparent 70%),
    radial-gradient(45% 40% at 55% 85%, rgba(77, 214, 255, 0.32), transparent 70%);
  animation: drift 16s ease-in-out infinite alternate;
}

@keyframes drift {
  from {
    transform: translate3d(-4%, -2%, 0) scale(1);
  }
  to {
    transform: translate3d(4%, 3%, 0) scale(1.08);
  }
}

.empty-card {
  position: relative;
  max-width: 440px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pick);
  box-shadow: 0 0 0 0 rgba(62, 230, 168, 0.6);
  animation: ring 2s ease-out infinite;
}

@keyframes ring {
  to {
    box-shadow: 0 0 0 10px rgba(62, 230, 168, 0);
  }
}

.empty h1 {
  margin: 0;
  font-size: clamp(34px, 8vw, 56px);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff 30%, #d9d2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.empty-note {
  margin: 14px auto 0;
  max-width: 34ch;
  color: var(--dim);
  font-size: 16px;
  line-height: 1.5;
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

/* ---------- Top bar ---------- */

.topbar {
  position: absolute;
  top: var(--safe-top);
  left: var(--safe-left);
  right: var(--safe-right);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.topbar > * {
  pointer-events: auto;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--grad);
  box-shadow: 0 4px 16px rgba(162, 89, 255, 0.45);
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
}

.brand-word {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (max-width: 460px) {
  .brand {
    padding: 0;
    background: none;
  }

  .brand-word {
    display: none;
  }

  .badge {
    padding: 0 10px;
    font-size: 11px;
  }
}

.controls {
  display: flex;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: #d8d3ef;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.badge.live {
  color: #fff;
  background: var(--grad-warm);
  box-shadow: 0 0 22px rgba(255, 45, 85, 0.55);
}

.badge.live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.3;
  }
}

.back-live {
  color: #062319;
  background: var(--pick);
  font-family: inherit;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #fff;
  background: var(--surface);
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn:hover,
.icon-btn[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--surface-strong);
}

.icon-btn svg {
  width: 21px;
  height: 21px;
}

/* Picture quality toggle: reads as a label rather than an icon, because what it says matters. */
.quality-btn {
  width: auto;
  min-width: 42px;
  padding: 0 11px;
  border-radius: 21px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.quality-btn[aria-pressed="true"] {
  color: #062319;
  border-color: var(--pick);
  background: var(--pick);
}

@media (max-width: 460px) {
  .controls {
    gap: 6px;
  }

  .icon-btn {
    width: 36px;
    height: 36px;
  }

  .icon-btn svg {
    width: 19px;
    height: 19px;
  }

  .quality-btn {
    min-width: 36px;
    padding: 0 8px;
    border-radius: 18px;
    font-size: 11px;
  }
}

@media (max-width: 350px) {
  #options {
    display: none;
  }
}

.icon-btn:focus-visible,
.tab:focus-visible,
.vote:focus-visible,
.primary:focus-visible,
.ghost:focus-visible,
.badge:focus-visible,
.sound-hint:focus-visible,
.tap-play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- Status, prompts, toasts ---------- */

.status {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 40px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.status:not(.busy) .spinner {
  display: none;
}

.spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.tap-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 10px 40px rgba(162, 89, 255, 0.55);
  transform: translate(-50%, -50%);
}

.tap-play svg {
  width: 38px;
  height: 38px;
  margin-left: 4px;
}

.sound-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--above-bar) + 74px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  background: var(--surface-strong);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(162, 89, 255, 0.35) inset;
  font-size: 14px;
  font-weight: 700;
  transform: translateX(-50%);
  animation: rise 0.35s ease-out both;
}

.sound-hint svg {
  width: 18px;
  height: 18px;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.toast {
  position: absolute;
  top: calc(var(--safe-top) + 56px);
  left: 50%;
  z-index: 9;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  font-weight: 600;
  transform: translateX(-50%);
  animation: drop 0.25s ease-out both;
}

@keyframes drop {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.debug {
  position: absolute;
  left: var(--safe-left);
  bottom: var(--above-bar);
  z-index: 7;
  max-width: min(420px, calc(100% - 24px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 7, 16, 0.9);
}

.debug pre {
  margin: 0;
  font: 11.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.debug .ghost {
  margin-top: 8px;
}

/* ---------- Buttons ---------- */

.primary,
.ghost {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 750;
  transition: filter 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.primary {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 8px 26px rgba(162, 89, 255, 0.38);
}

.primary:hover {
  filter: brightness(1.08);
}

.primary:active,
.ghost:active {
  transform: scale(0.98);
}

.ghost {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

.big {
  flex: 0 1 auto;
  min-width: 170px;
  padding: 15px 22px;
  border-radius: 16px;
  font-size: 16px;
}

.small {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.ghost.danger {
  color: #ff9fb3;
  border-color: rgba(255, 45, 85, 0.5);
}

.ghost.danger:hover {
  background: rgba(255, 45, 85, 0.16);
}

.ghost[aria-pressed="true"] {
  color: #062319;
  background: var(--pick);
  border-color: var(--pick);
}

/* ---------- Schedule and voting ---------- */

/* Phones: a bottom sheet above the scrub bar, collapsed to one line until opened. */
.rail {
  position: absolute;
  left: var(--safe-left);
  right: var(--safe-right);
  bottom: var(--above-bar);
  z-index: 4;
  max-height: calc(100% - var(--above-bar) - var(--topbar) - 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.rail-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
}

.rail-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.rail-title strong {
  overflow: hidden;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  color: var(--dim);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.caret {
  transition: transform 0.25s ease;
}

.rail-body {
  display: none;
  min-height: 0;
  padding: 0 14px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.player[data-rail="open"] .rail-body {
  display: block;
}

.player[data-rail="open"] .caret {
  transform: rotate(180deg);
}

/* Wide screens: a panel down the right side, clear of the picture's middle. */
@media (min-width: 900px) and (min-height: 540px) {
  .rail {
    left: auto;
    top: calc(var(--safe-top) + var(--topbar));
    bottom: calc(var(--above-bar) + 6px);
    width: 360px;
    max-height: none;
  }

  .player:not([data-rail="open"]) .rail {
    bottom: auto;
  }

  .player.two-up .rail,
  .player[data-rail="open"] .rail {
    background: var(--surface-strong);
  }
}

.chip {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.chip.live {
  color: #fff;
  background: var(--grad-warm);
}

.chip.next {
  color: #2a1a00;
  background: var(--next);
}

.chip.voting,
.chip.open {
  color: #062319;
  background: var(--pick);
}

.slots {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.slots li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.slots strong {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
}

.tab {
  flex: 1;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  color: var(--dim);
  background: transparent;
  font-size: 13px;
  font-weight: 650;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab.is-on {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.14);
}

.search input {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
}

.list {
  max-height: min(36vh, 300px);
  margin: 10px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}

@media (min-width: 900px) and (min-height: 540px) {
  .list {
    max-height: none;
  }
}

.row + .row {
  margin-top: 6px;
}

.vote {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14.5px;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.vote:hover {
  background: rgba(255, 255, 255, 0.1);
}

.vote:active {
  transform: scale(0.99);
}

.avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--hue, 280) 90% 62%), hsl(calc(var(--hue, 280) + 50) 90% 55%));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.row .who {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row .rank {
  flex: 0 0 auto;
  width: 18px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.row .count {
  flex: 0 0 auto;
  min-width: 26px;
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Vote rows read as actions, not labels. */
.vote .pick {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.row.is-mine .vote {
  border-color: rgba(62, 230, 168, 0.7);
  background: rgba(62, 230, 168, 0.12);
}

.row.is-mine .pick {
  color: #062319;
  background: var(--pick);
}

.row.is-mine .count {
  color: var(--pick);
}

.note {
  margin: 8px 2px 0;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.45;
}

.note.is-error {
  color: #ff9fb3;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Leaving the line-up is always available but never competes with the main actions. */
.cta .leave {
  flex-basis: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cta .leave:hover,
.cta .leave:focus-visible {
  color: var(--ink);
}

.join {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.join input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 16px;
}

.join .primary {
  flex: 0 0 auto;
}

/* ---------- Host panel ---------- */

.host {
  position: absolute;
  top: calc(var(--safe-top) + var(--topbar));
  left: 50%;
  z-index: 8;
  width: min(360px, calc(100% - 20px));
  /* Bounded so a long panel scrolls inside itself instead of running down over the scrub bar. */
  max-height: calc(100% - var(--topbar) - var(--above-bar) - 30px);
  overflow-y: auto;
  padding: 14px;
  transform: translateX(-50%);
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(var(--surface-strong), var(--surface-strong)) padding-box,
    var(--grad) border-box;
  box-shadow: var(--shadow);
}

@media (min-width: 900px) and (min-height: 540px) {
  .host {
    left: var(--safe-left);
    transform: none;
  }
}

.host-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.host-head strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The one thing a host must never misread: whether the world can see them. */
.banner {
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.16);
}

.banner.is-live {
  color: #fff;
  background: var(--grad-warm);
  animation: pulse 2s ease-in-out infinite;
}

.host-x {
  padding: 0 4px;
  border: 0;
  color: var(--dim);
  background: transparent;
  font-size: 22px;
  line-height: 1;
}

.self-view {
  display: block;
  width: 100%;
  max-height: 190px;
  margin-top: 10px;
  border-radius: 14px;
  object-fit: cover;
  background: #000;
  transform: scaleX(-1); /* mirrored, the way people expect to see themselves */
}

.health {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 2px 0;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}

.health::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pick);
  box-shadow: 0 0 8px var(--pick);
}

.health[data-state="sd"]::before,
.health[data-state="saving"]::before {
  background: var(--next);
  box-shadow: 0 0 8px var(--next);
  animation: pulse 1.4s ease-in-out infinite;
}

.host-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-top: 12px;
}

.host-actions .primary,
.host-actions .ghost {
  text-align: center;
  text-decoration: none;
}

.quality {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.quality select,
.quality input[type="number"] {
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.quality input[type="number"] {
  width: 5.5rem;
}

/* ---------- Desktop polish ---------- */

/* Frosted panels only where there is a GPU to spare and the panel is not over a phone's video. */
@media (hover: hover) and (pointer: fine) {
  .rail,
  .host,
  .brand,
  .badge,
  .icon-btn,
  .status {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* The vote check (Cloudflare Turnstile) only takes space on the rare occasion it asks something. */
.vote-guard {
  display: flex;
  justify-content: center;
  margin: 8px 0 0;
  min-height: 0;
}