:root {
  --bg: #0f1115;
  --accent: #5865f2;
  --text: #e6e9ef;
  --muted: #8b94a6;
  --danger: #d83c3e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ctx-badge {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: #5865f2;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

/* overflow: hidden n'est PAS cosmétique : le fond d'ambiance déborde
   volontairement de 15 % de chaque côté, ce qui ferait apparaître des barres
   de défilement — visibles, et cliquables par-dessus la vidéo. */
.screen { height: 100vh; width: 100vw; overflow: hidden; position: relative; }

/* Écran d'accueil */
.join {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  background: #171a21;
  border: 1px solid #2a2f3a;
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  width: 340px;
}
.card h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: 1px; }
.card .muted { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
#codeInput {
  width: 100%;
  text-align: center;
  font-size: 30px;
  letter-spacing: 8px;
  font-weight: 700;
  padding: 12px;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  background: #0f1115;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 14px;
}
#codeInput:focus { outline: none; border-color: var(--accent); }
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:disabled { opacity: .5; cursor: not-allowed; }
.err { margin-top: 12px; color: var(--danger); font-size: 13px; min-height: 16px; }

/* Écran de visionnage */
.watch {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/*
 * Fond d'ambiance — remplace les bandes noires.
 *
 * Le canvas fait 64×36 pixels : on y étire l'image sans se soucier du format,
 * la distorsion étant invisible sous 72 px de flou. Débordement volontaire de
 * 15 % de chaque côté, sinon le flou laisse voir les bords du canvas.
 * `filter` sur un canvas de cette taille ne coûte rien, même sur mobile.
 */
.ambient {
  position: absolute;
  top: -15%; left: -15%;
  width: 130%; height: 130%;
  object-fit: cover;
  /* Assez lumineux pour se lire comme un parti pris, assez sombre pour ne
     jamais concurrencer l'image. Trop bas, ça ressemble à du noir raté. */
  filter: blur(64px) saturate(160%) brightness(0.55);
  transform: translateZ(0);      /* compose sur le GPU */
  z-index: 0;
  pointer-events: none;
}

/* Assombrit les bords pour que l'image garde un cadre net et que le flou ne
   « bave » pas dans les coins. */
.watch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,0) 50%, rgba(0,0,0,.42) 100%);
}

#video {
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  /* Surtout PAS de fond noir : c'est lui qui dessinait les bandes. */
  background: transparent;
}
.status-pill {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  backdrop-filter: blur(8px);
}

/* ── Spinner de buffering ─────────────────────────────────────────────── */
.spinner {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0,0,0,.25);
  z-index: 5;
}
.spinner-ring {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(255,255,255,.18);
  border-top-color: #fff;
  border-radius: 50%;
  animation: discrate-spin 0.8s linear infinite;
}
@keyframes discrate-spin {
  to { transform: rotate(360deg); }
}

/* ── Badge de latence (bufferAhead) ───────────────────────────────────── */
/* C'est un <button> (cliquer = revenir au direct) mais il doit rester un
   badge : on remet donc à zéro l'apparence native avant de le peindre. */
.latency-badge {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 6;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
  transition: background 140ms ease;
}
.latency-badge:hover { background: rgba(0,0,0,.82); }

/* ── Badge tier / mode de distribution ────────────────────────────────── */
.tier-badge {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 5px 11px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.tier-badge.free {
  background: rgba(0,0,0,.6);
  color: #cbd1de;
}
.tier-badge.pro {
  background: rgba(88,101,242,.85);
  color: #fff;
}

/* ── Contrôle du son ──────────────────────────────────────────────────
 *
 * L'autoplay navigateur impose de démarrer muet : seul un clic utilisateur
 * peut activer l'audio, d'où le bouton — que le curseur ne remplace pas.
 *
 * Placé en bas au CENTRE, et pas en bas à gauche : le badge tier y est déjà,
 * et les deux se superposaient (même `bottom`, même `left`), le bouton son
 * masquant le badge.
 */
.sound-ctl {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(12,14,20,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 28px rgba(0,0,0,.38);
}

/* Le curseur n'a aucun effet là où `video.volume` est en lecture seule
   (iPhone) : viewer.js pose alors cette classe plutôt que d'afficher un
   réglage qui ne fait rien. */
.sound-ctl.no-volume { padding-right: 6px; }
.sound-ctl.no-volume .volume { display: none; }

.sound-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.sound-btn:hover { background: rgba(255,255,255,.16); }
.sound-btn.on { background: var(--accent); }

/* Curseur de volume : on repart de zéro (`appearance: none`) car les styles
   natifs diffèrent trop d'un navigateur à l'autre pour cohabiter avec le
   reste. La piste est peinte par un dégradé dont l'arrêt est piloté depuis
   viewer.js via --fill : c'est ce qui donne la portion « remplie ». */
.volume {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #fff 0%, #fff var(--fill, 100%),
    rgba(255,255,255,.22) var(--fill, 100%), rgba(255,255,255,.22) 100%);
  cursor: pointer;
  outline: none;
}
.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  cursor: pointer;
}
.volume::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  cursor: pointer;
}
/* Firefox peint sa propre piste par-dessus le background de l'input. */
.volume::-moz-range-track { background: transparent; }

/* Zone tactile : 34 px de haut suffisent à peine au doigt, et une barre de
   4 px est intouchable. Sur mobile on élargit tout le contrôle. */
@media (pointer: coarse) {
  .sound-ctl { padding: 8px 18px 8px 8px; gap: 14px; }
  .sound-btn { width: 40px; height: 40px; font-size: 17px; }
  .volume { width: 120px; height: 6px; }
  .volume::-webkit-slider-thumb { width: 18px; height: 18px; }
  .volume::-moz-range-thumb { width: 18px; height: 18px; }
}

/* ── Actions du spectateur (plein écran, changer de live) ────────────────
   En haut à droite : le badge de statut occupe le haut gauche et le contrôle
   du son le bas centre. Même matière de verre que le reste pour ne pas
   ressembler à un élément étranger posé sur la vidéo. */
.watch-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 6;
}

.act-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 22, 28, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: #e8ecf3;
  font: 500 13px/1 system-ui, -apple-system, sans-serif;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.act-btn:hover { background: rgba(40, 44, 54, 0.75); border-color: rgba(255, 255, 255, 0.3); }
.act-btn:active { transform: translateY(1px); }

/* Cibles tactiles : 32px est confortable à la souris, pas au doigt. */
@media (pointer: coarse) {
  .act-btn { padding: 12px 16px; font-size: 15px; }
}

/* En plein écran, les contrôles s'effacent tant que la souris ne bouge pas :
   une barre permanente par-dessus l'image gênerait la lecture. */
.watch:fullscreen .watch-actions,
.watch:-webkit-full-screen .watch-actions { opacity: 0; transition: opacity 300ms ease; }
.watch:fullscreen:hover .watch-actions,
.watch:-webkit-full-screen:hover .watch-actions { opacity: 1; }