/* Player: video, icon control bar, back-soon panel, toast. */
.player { position: relative; background: #000; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; }
.player video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player:fullscreen { aspect-ratio: auto; border-radius: 0; }
.player.idle { cursor: none; }

.player-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 40px 10px 8px;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.22) 55%, rgb(0 0 0 / 0));
  transition: opacity 0.35s ease;
}
.player.idle .player-controls { opacity: 0; pointer-events: none; }
.pc-group { display: flex; gap: 2px; }
.pc {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
  color: #fff; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pc svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35)); }
.pc:hover { background: rgb(255 255 255 / 0.14); }
.pc:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pc[hidden] { display: none; }
.player[data-state="offline"] .pc-play,
.player[data-state="offline"] .pc-sound,
.player[data-state="offline"] .pc-snap { display: none; }

.player-toast {
  position: absolute; left: 50%; bottom: 64px; z-index: 4; transform: translateX(-50%);
  padding: 7px 12px; border-radius: 10px; font: 600 13px/1.2 system-ui, -apple-system, sans-serif; color: #fff;
  background: rgb(18 20 23 / 0.78); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; white-space: nowrap;
}
.player-toast.on { opacity: 1; }

.player-offline {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 24px; background: #1c1e21; color: #f2f3f5; text-align: center;
}
.player-offline[hidden] { display: none; }
.player-offline .po-title { margin: 0 0 8px; font: 600 clamp(20px, 2.4vw, 28px)/1.2 system-ui, -apple-system, sans-serif; letter-spacing: -0.01em; }
.player-offline .po-text { margin: 0; max-width: 30em; font: 400 clamp(14px, 1.4vw, 16px)/1.45 system-ui, -apple-system, sans-serif; color: #c4c8ce; }

@media (prefers-reduced-motion: reduce) {
  .player-controls, .player-toast { transition: none; }
}

/* Overlays (W2): Live badge and local time. */
.ov { display: flex; gap: 6px; align-items: center; pointer-events: none; }
.ov-on-video { position: absolute; top: 10px; left: 10px; z-index: 2; }
.ov-beside-video { justify-content: flex-end; }
.ov-label {
  --ov-tint: 0.7;
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  font: 600 13px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums; color: #fff; border-radius: 13px;
  background: rgb(18 20 23 / var(--ov-tint));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.25);
  transition: background-color 0.8s ease;
}
.ov-label[hidden] { display: none; }
.ov-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2); }
.ov-beside-video .ov-label { color: var(--text, #15171a); background: var(--chip, rgb(0 0 0 / 0.06)); box-shadow: inset 0 0 0 1px var(--hair, rgb(0 0 0 / 0.08)); text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.player[data-state="offline"] .ov-on-video .ov-clock { opacity: 0.9; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ov-on-video .ov-label { background: rgb(18 20 23 / 0.82); }
}
@media (prefers-reduced-transparency: reduce) {
  .ov-on-video .ov-label { background: rgb(18 20 23 / 0.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-label { transition: none; }
}