* {
  box-sizing: border-box;
}

:root {
  --bg: #111419;
  --panel: #181c23;
  --panel-2: #20252e;
  --border: #303642;
  --text: #f4f6f8;
  --muted: #aab2bf;

  --guide-channel-width: 180px;
  --timeline-width: 1680px;
}


html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;

  background: var(--bg);
  color: var(--text);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


button,
input {
  font: inherit;
}


button {
  cursor: pointer;
}


.app-shell {
  width: 100%;
  height: 100dvh;
}


.stage {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #000;

  cursor: default;
}


.stage.ui-hidden {
  cursor: none;
}


video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  background: #000;
}


/* ---------------- overlays ---------------- */


.top-overlay,
.video-info,
.player-controls {
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}


.stage.ui-hidden
.top-overlay,
.stage.ui-hidden
.video-info,
.stage.ui-hidden
.player-controls {
  opacity: 0;

  pointer-events: none;
}


.top-overlay {
  position: absolute;

  z-index: 20;

  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    18px
    22px
    65px;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.78),
      rgba(0, 0, 0, 0)
    );
}


.brand,
.connection {
  pointer-events: auto;
}


.brand {
  display: flex;

  align-items: baseline;

  gap: 7px;

  white-space: nowrap;
}


.brand-name {
  font-size: 28px;

  font-weight: 800;

  letter-spacing: -0.03em;

  line-height: 1;
}


.brand-live {
  font-size: 14px;

  font-weight: 650;

  letter-spacing: 0.02em;

  opacity: 0.72;

  line-height: 1;
}


.connection {
  padding:
    8px
    11px;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 8px;

  background:
    rgba(27, 31, 39, 0.88);

  font-size: 12px;
}


/* ---------------- program information ---------------- */


.video-info {
  position: absolute;

  z-index: 15;

  left: 22px;
  bottom: 92px;

  width:
    min(
      630px,
      calc(100% - 44px)
    );

  pointer-events: none;

  text-shadow:
    0 2px 4px
    rgba(0, 0, 0, 0.9);
}


.video-channel {
  display: flex;

  gap: 8px;

  align-items: baseline;
}


.video-channel-number {
  opacity: 0.75;

  font-size: 13px;
}


.video-channel-name {
  font-size: 15px;
  font-weight: 650;
}


.video-title {
  margin-top: 5px;

  font-size:
    clamp(
      22px,
      3vw,
      38px
    );

  font-weight: 750;
}


.video-meta {
  display: flex;

  gap: 12px;

  margin-top: 4px;

  color: #e0e4ea;

  font-size: 14px;
}


.video-episode {
  opacity: 0.78;
}


.video-progress-shell {
  width: 100%;
  height: 5px;

  margin-top: 12px;

  border-radius: 999px;

  overflow: hidden;

  background:
    rgba(255, 255, 255, 0.28);
}


.video-progress {
  width: 0;
  height: 100%;

  background: #fff;

  transition:
    width 0.3s ease;
}


.video-bottom {
  display: flex;

  justify-content: space-between;

  margin-top: 5px;

  color: #d2d7df;

  font-size: 12px;
}


/* ---------------- custom controls ---------------- */


.player-controls {
  position: absolute;

  z-index: 25;

  left: 16px;
  right: 16px;
  bottom: 16px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding:
    9px
    10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 10px;

  background:
    rgba(17, 20, 25, 0.76);

  backdrop-filter:
    blur(10px);
}


.player-controls-left,
.player-controls-right {
  display: flex;

  align-items: center;

  gap: 8px;
}


.volume-control {
  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    0 3px;
}


.volume-slider {
  width: 110px;

  cursor: pointer;

  accent-color: #ffffff;
}


.volume-value {
  min-width: 38px;

  color: #d5dae2;

  font-size: 11px;

  text-align: right;
}


.control-button,
.live-button,
#closeGuide,
#tuneSelected {
  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius: 7px;

  color: #fff;

  background:
    rgba(35, 40, 49, 0.95);

  padding:
    8px
    11px;
}


.control-button:hover,
.live-button:hover,
#closeGuide:hover,
#tuneSelected:hover {
  background:
    rgba(57, 64, 77, 0.98);
}


.live-button {
  font-size: 12px;
  font-weight: 750;
}


.live-button.live {
  color: #f4f6f8;
}


.live-button.paused {
  color: #f4cf74;
}


/* ---------------- guide drawer ---------------- */


.guide-drawer {
  position: absolute;

  z-index: 40;

  left: 0;
  right: 0;
  bottom: 0;

  height: 57dvh;

  display: flex;
  flex-direction: column;

  background:
    rgba(
      17,
      20,
      25,
      0.985
    );

  border-top:
    1px solid
    var(--border);

  transform:
    translateY(
      calc(100% + 2px)
    );

  transition:
    transform 0.22s ease;
}


.guide-drawer.open {
  transform:
    translateY(0);
}


.guide-toolbar {
  flex: 0 0 auto;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    12px
    16px;

  border-bottom:
    1px solid
    var(--border);

  background: #171b21;
}


.guide-heading {
  font-size: 19px;
  font-weight: 700;
}


.guide-subheading {
  margin-top: 2px;

  color: var(--muted);

  font-size: 12px;
}


.guide-toolbar-actions {
  display: flex;

  gap: 8px;
}


#guideSearch {
  width: 230px;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background: #222731;

  color: #fff;

  padding:
    9px
    11px;

  outline: none;
}


/* ---------------- selected program ---------------- */


.program-selection {
  flex: 0 0 auto;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    10px
    16px;

  border-bottom:
    1px solid
    var(--border);

  background: #1d222a;
}


.hidden {
  display: none;
}


.selection-channel {
  color: #b4bdca;

  font-size: 12px;
  font-weight: 650;
}


.selection-title {
  margin-top: 2px;

  font-size: 18px;
  font-weight: 700;
}


.selection-subtitle,
.selection-meta,
.tune-status {
  margin-top: 2px;

  color: var(--muted);

  font-size: 12px;
}


.program-selection-actions {
  min-width: 180px;

  text-align: right;
}


/* ---------------- EPG ---------------- */


.guide-scroller {
  flex: 1 1 auto;

  overflow: auto;

  scrollbar-color:
    #555d6b
    #20242b;
}


.guide-grid {
  min-width:
    calc(
      var(--guide-channel-width)
      + var(--timeline-width)
    );
}


.timeline-row,
.guide-row {
  display: grid;

  grid-template-columns:
    var(--guide-channel-width)
    var(--timeline-width);
}


.timeline-row {
  position: sticky;

  z-index: 25;

  top: 0;

  height: 42px;

  background: #161a20;

  border-bottom:
    1px solid
    var(--border);
}


.timeline-channel-spacer {
  position: sticky;

  z-index: 30;

  left: 0;

  background: #161a20;

  border-right:
    1px solid
    var(--border);
}


.timeline-track {
  position: relative;

  height: 42px;
}


.timeline-label {
  position: absolute;

  top: 8px;

  transform:
    translateX(-1px);

  color: #bec5d0;

  font-size: 11px;
  font-weight: 650;

  white-space: nowrap;
}


.timeline-label::before {
  content: "";

  position: absolute;

  top: 18px;

  width: 1px;
  height: 16px;

  background: #3b424e;
}


.guide-row {
  min-height: 68px;

  border-bottom:
    1px solid
    #292f39;
}


.channel-cell {
  position: sticky;

  z-index: 12;

  left: 0;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    10px
    12px;

  background: #171b21;

  border-right:
    1px solid
    var(--border);
}


.guide-row.selected-channel
.channel-cell {
  background: #262d38;
}


.channel-number {
  min-width: 38px;

  color: #aeb7c4;

  font-size: 11px;
  font-weight: 750;
}


.channel-name {
  overflow: hidden;

  font-size: 13px;
  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.program-track {
  position: relative;

  min-height: 68px;

  background: #12161c;
}


.program-block {
  position: absolute;

  top: 5px;
  bottom: 5px;

  min-width: 4px;

  overflow: hidden;

  padding:
    8px
    9px;

  border:
    1px solid
    #465061;

  border-radius: 5px;

  background: #394455;

  color: white;

  text-align: left;
}


.program-block:hover {
  z-index: 5;

  border-color: #8794a6;

  background: #4a5668;
}


.program-block.current {
  border-color: #e7d285;

  background: #72663a;
}


.selected-channel
.program-block {
  filter:
    brightness(1.08);
}


.program-title {
  overflow: hidden;

  font-size: 12px;
  font-weight: 700;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.program-subtitle {
  overflow: hidden;

  margin-top: 3px;

  color: #d0d6df;

  font-size: 10px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.now-line {
  position: absolute;

  z-index: 8;

  top: 0;
  bottom: 0;

  width: 2px;

  background: #f3d46a;

  pointer-events: none;
}


.now-marker {
  position: absolute;

  z-index: 9;

  top: 0;

  transform:
    translateX(-50%);

  padding:
    2px
    4px;

  border-radius:
    0 0 4px 4px;

  background: #f3d46a;

  color: #191919;

  font-size: 9px;
  font-weight: 800;
}



.program-art-panel {
  flex: 0 0 210px;

  width: 210px;
  height: 118px;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background: #101318;
}

.program-art-panel.hidden {
  display: none;
}

.selection-art {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.program-selection-info {
  flex: 1 1 auto;

  min-width: 0;
}

.selection-description {
  max-width: 850px;

  margin-top: 8px;

  color: #d4d9e1;

  font-size: 13px;

  line-height: 1.45;
}

/* ---------------- mobile ---------------- */


@media (
  max-width: 760px
) {

  :root {
    --guide-channel-width:
      135px;
  }


  .brand-name {
    font-size: 22px;
  }


  .brand-live {
    font-size: 12px;
  }


  .connection {
    display: none;
  }


  .top-overlay {
    padding:
      12px
      12px
      42px;
  }


  .video-info {
    left: 14px;

    bottom: 92px;

    width:
      calc(
        100% - 28px
      );
  }


  .video-title {
    font-size: 21px;
  }


  .player-controls {
    left: 8px;
    right: 8px;
    bottom: 8px;

    padding:
      7px;
  }


  .control-button,
  .live-button {
    padding:
      7px
      8px;

    font-size: 11px;
  }


  .volume-slider {
    width: 70px;
  }


  .volume-value {
    display: none;
  }


  .guide-drawer {
    height: 74dvh;
  }


  .guide-toolbar {
    align-items: stretch;

    flex-direction: column;
  }


  .guide-toolbar-actions {
    width: 100%;
  }


  #guideSearch {
    flex: 1;

    width: auto;
  }


  .program-selection {
    align-items: stretch;

    flex-direction: column;
  }


  .program-selection-actions {
    text-align: left;
  }
}