:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #09111f;
  color: #f6f8fc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(circle at 82% -10%, #1d4d6b 0, transparent 34rem), #09111f;
}

.app-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 56px; }

.topbar, .player-heading, .stream-footer, .brand, .buffer-note { display: flex; align-items: center; }

.topbar { justify-content: space-between; margin-bottom: 30px; }
.brand { gap: 13px; }
.brand-mark {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px;
  background: linear-gradient(145deg, #67e8f9, #1978d8); color: #07111d; font-weight: 900; letter-spacing: -.08em;
}
h1, h2, p { margin: 0; }
h1 { font-size: 1.25rem; letter-spacing: -.03em; }
h2 { font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.04em; }
.eyebrow { color: #8ba6be; font-size: .68rem; font-weight: 750; letter-spacing: .13em; margin-bottom: 4px; }

.live-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #3d303d; border-radius: 999px; padding: 8px 11px; color: #ffabb6; font-size: .75rem; font-weight: 800; letter-spacing: .07em; }
.live-pill i, .signal-dot { width: 7px; height: 7px; border-radius: 50%; background: #fb5b73; box-shadow: 0 0 0 4px #fb5b7322; }

.player-card { overflow: hidden; border: 1px solid #253753; border-radius: 22px; background: #111d31; box-shadow: 0 28px 60px #0000003d; }
.player-heading { justify-content: space-between; gap: 18px; padding: 23px 24px; }
.camera-switcher { display: flex; flex-wrap: wrap; gap: 8px; }
.camera-button { border-color: #365675; background: #10243b; color: #9db8cd; }
.camera-button.is-active { border-color: #5be0ff; background: #164d73; color: #fff; box-shadow: inset 0 0 0 1px #5be0ff44; }
button { border: 1px solid #345d87; border-radius: 10px; padding: 10px 13px; background: #173655; color: #d7f3ff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
button:hover { background: #20517d; }
button:disabled { cursor: not-allowed; opacity: .42; }

.video-frame { position: relative; aspect-ratio: 16 / 9; background: #02060b; }
.media-surface { width: 100%; height: 100%; }
iframe, .video-frame video { display: block; width: 100%; height: 100%; border: 0; }
.video-frame video { object-fit: contain; background: #02060b; }
.player-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(transparent, #02060be8 44%);
  opacity: 0;
  transition: opacity 260ms ease;
}
.player-controls:hover,
.player-controls:focus-within { opacity: 1; }
.control-button, .live-button { flex: 0 0 auto; border-color: #57789a; background: #10243bb8; padding: 8px 10px; font-size: .76rem; backdrop-filter: blur(8px); }
.icon-button { width: 34px; padding-inline: 0; font-size: .95rem; }
#volume-control { width: 74px; flex: 0 0 auto; accent-color: #5be0ff; cursor: pointer; }
.control-button:disabled { cursor: default; opacity: .5; }
.live-button { color: #ffb5bf; }
.buffer-control { min-width: 0; flex: 1 1 auto; }
.buffer-labels { display: flex; justify-content: space-between; gap: 10px; color: #b7c6d4; font-size: .68rem; font-variant-numeric: tabular-nums; }
.buffer-labels strong { overflow: hidden; color: #ffffff; text-overflow: ellipsis; white-space: nowrap; }
#buffer-scrubber { display: block; width: 100%; height: 17px; margin-top: 2px; accent-color: #5be0ff; cursor: pointer; }
#buffer-scrubber:disabled { cursor: wait; opacity: .55; }
.stream-footer { justify-content: space-between; gap: 12px; padding: 14px 24px; color: #92a9bd; font-size: .8rem; }
.stream-footer span:first-child { display: inline-flex; gap: 9px; align-items: center; color: #c9d8e5; }
.signal-dot { display: inline-block; width: 6px; height: 6px; background: #55d9ae; box-shadow: 0 0 0 4px #55d9ae1d; }

.buffer-note { gap: 15px; margin-top: 22px; padding: 20px 22px; border: 1px solid #233752; border-radius: 16px; background: #0d192a99; }
.buffer-note h2 { font-size: 1rem; margin-bottom: 5px; }
.buffer-note p { color: #9db0c2; line-height: 1.5; font-size: .9rem; }
.clock { display: grid; place-items: center; flex: 0 0 auto; width: 41px; height: 41px; border-radius: 12px; background: #163250; color: #73d9fa; font-size: 1.45rem; }

/* Embedded viewers have a fixed iframe height. Keep the player inside that
   frame instead of creating a second vertical scrollbar in the host site. */
body.embedded-player { overflow: hidden; }
.embedded-player .app-shell { width: 100%; height: 100dvh; padding: 0; }
.embedded-player .topbar,
.embedded-player .buffer-note { display: none; }
.embedded-player .player-card { display: flex; height: 100%; flex-direction: column; border-radius: 0; }
.embedded-player .player-heading { flex: 0 0 auto; padding: 14px 18px; }
.embedded-player .video-frame { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.embedded-player .stream-footer { flex: 0 0 auto; padding: 10px 18px; }

@media (max-width: 620px) {
  .app-shell { width: min(100% - 22px, 1120px); padding-top: 18px; }
  .player-heading, .stream-footer { padding: 17px; }
  .player-heading { align-items: flex-start; flex-direction: column; }
  .camera-switcher { width: 100%; }
  .stream-footer { align-items: flex-start; flex-direction: column; }
  .player-controls { gap: 5px; padding: 8px; }
  .control-button, .live-button { padding: 7px; font-size: .68rem; }
  #volume-control { width: 48px; }
  .buffer-labels { font-size: .58rem; }
}

/* Touch screens have no hover target, so their player controls remain visible. */
@media (hover: none) {
  .player-controls { opacity: 1; }
}