/* Game video (Components/Shared/Video): the player frame, stills, the plays list, the Video list, saved clips and the
   replay scoreboard. The navy is the apps' video background; the live red is the apps' LIVE pill. */

:root {
  --lt-video-bg: #0A1723;
  --lt-live: oklch(58% 0.21 25);
}

/* --- Viewer layout: the video beside the plays on wide screens, stacked (video first) below 1100px --- */
.lt-video-layout {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 22px; align-items: start;
}
.lt-video-main { position: sticky; top: 12px; min-width: 0; }
.lt-video-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1100px) {
  .lt-video-layout { grid-template-columns: minmax(0, 1fr); }
  .lt-video-main { position: static; }
}

.lt-video-eyebrow {
  font-family: var(--lt-font-display); font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--lt-ink-5); margin-bottom: 6px;
}
.lt-video-divider { border: none; border-top: 1px solid var(--lt-line-faint); margin: 10px 0; }
.lt-video-status { font-size: 12.5px; color: var(--lt-ink-4); margin-top: 8px; }
.lt-video-cameras { margin-top: 12px; }
.lt-video-notice {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  background: var(--lt-accent-tint); color: var(--lt-accent-ink); border-radius: 10px; padding: 9px 12px;
}
.lt-video-game { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.lt-video-game .lt-video-eyebrow { margin: 0; }

/* --- The player frame --- */
.lt-video-surface {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 70vh;
  background: var(--lt-video-bg); border-radius: 14px; overflow: hidden;
}
.lt-video-surface > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--lt-video-bg); }
.lt-video-surface.is-full { border-radius: 0; max-height: none; aspect-ratio: auto; background: #000; }
.lt-video-surface.is-full > video { background: #000; }
.lt-video-overlay {
  position: absolute; left: calc(var(--lt-pic-left, 0px) + 14px); top: calc(var(--lt-pic-top, 0px) + 14px);
  pointer-events: none; z-index: 2;
}
.lt-video-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 3; opacity: .85; }
.lt-video-surface:hover .lt-video-tools { opacity: 1; }
.lt-video-blocked {
  position: absolute; inset: 0; z-index: 3; border: none; cursor: pointer;
  background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center;
}

/* The round badge stills and the blocked-autoplay cover share. */
.lt-video-badge {
  width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; font-size: 22px;
}

/* --- A still standing in for video (poster / lock) --- */
.lt-video-still {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; padding: 0; border: none;
  background: var(--lt-video-bg); border-radius: 14px; overflow: hidden; color: #fff; font: inherit;
}
.lt-video-still.is-action { cursor: pointer; }
.lt-video-still.is-action:hover .lt-video-badge { background: rgba(255, 255, 255, .28); }
.lt-video-still > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-video-still-glyph {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 30px; color: rgba(255, 255, 255, .6);
}
.lt-video-still-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.lt-video-still-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 16px;
}
.lt-video-still-text { font-family: var(--lt-font-display); font-weight: 800; font-size: 16px; text-align: center; }

/* --- The plays list --- */
.lt-play-list {
  background: #fff; border: 1px solid var(--lt-line); border-radius: 14px; overflow: hidden;
}
.lt-play-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--lt-line-faint);
  transition: background-color .15s ease;
}
.lt-play-row:first-child { border-top: none; }
.lt-play-row.is-action { cursor: pointer; }
.lt-play-row.is-action:hover { background: var(--lt-surface-sunken); }
.lt-play-row.is-mine { background: var(--lt-warn-tint); }
.lt-play-row.is-playing, .lt-play-row.is-playing:hover { background: var(--lt-accent-tint); }
.lt-play-row:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: -2px; }
.lt-play-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.lt-play-jersey {
  flex: 0 0 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--lt-video-bg); color: #fff; font-family: var(--lt-font-display); font-weight: 800; font-size: 13px;
}
.lt-play-text { flex: 1; min-width: 0; }
.lt-play-title { font-family: var(--lt-font-display); font-weight: 700; font-size: 13.5px; }
.lt-play-meta { font-size: 12px; color: var(--lt-ink-5); margin-top: 2px; }
.lt-play-trailing { flex: 0 0 auto; }

/* --- LIVE pill --- */
.lt-live-pill {
  display: inline-flex; align-items: center; gap: 6px; background: var(--lt-live); color: #fff;
  font-family: var(--lt-font-display); font-weight: 800; font-size: 11px; letter-spacing: .05em;
  border-radius: 999px; padding: 3px 9px;
}
.lt-live-pill > i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: lt-live-blink 1.4s ease-in-out infinite; }
.lt-live-pill.is-thumb { position: absolute; left: 6px; bottom: 6px; font-size: 9.5px; padding: 2px 7px; }
@keyframes lt-live-blink { 50% { opacity: .35; } }

/* --- The replay scoreboard: the line score beside the video, the box over it in full screen --- */
.lt-linescore {
  background: var(--lt-video-bg); color: #fff; border-radius: 14px; padding: 12px 16px;
  font-family: var(--lt-font-display);
}
.lt-linescore table { width: 100%; border-collapse: separate; border-spacing: 2px 4px; }
.lt-linescore th { font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, .62); text-align: center; min-width: 22px; }
.lt-linescore td { font-size: 12px; text-align: center; color: #fff; border-radius: 4px; }
.lt-linescore td.current { background: rgba(255, 255, 255, .16); font-weight: 800; }
.lt-linescore .lt-linescore-clock { text-align: left; font-size: 13px; font-weight: 800; color: #fff; }
.lt-linescore .lt-linescore-clock i { color: #fff; margin-right: 4px; }
.lt-linescore .lt-linescore-team {
  text-align: left; font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, .62);
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lt-linescore tr.mine .lt-linescore-team { color: #fff; }
.lt-linescore th.lt-linescore-r { color: #fff; font-weight: 800; }
.lt-linescore td.lt-linescore-r { font-size: 18px; font-weight: 800; min-width: 30px; }
.lt-linescore td.lt-linescore-h { color: rgba(255, 255, 255, .62); }
.lt-linescore-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 6px; padding-top: 8px; font-size: 13px; font-weight: 700;
}
.lt-score-count { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.lt-out-dots { display: inline-flex; gap: 4px; }
.lt-out-dots > i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.lt-out-dots > i.on { background: var(--lt-live); }

.lt-score-overlay {
  display: flex; align-items: center; gap: 14px; padding: 7px 12px; border-radius: 10px;
  background: rgba(0, 0, 0, .55); color: #fff; font-family: var(--lt-font-display); font-weight: 800;
}
.lt-score-overlay-teams { display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 1px; align-items: center; }
.lt-score-overlay-teams > span { font-size: 15px; color: rgba(255, 255, 255, .67); }
.lt-score-overlay-teams > span.mine { color: #fff; }
.lt-score-overlay-teams > b { font-size: 17px; text-align: right; }
.lt-score-overlay-state { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }

/* --- The Video list --- */
.lt-video-group {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 2px 8px;
  font-family: var(--lt-font-display); font-weight: 800; font-size: 16px;
}
.lt-video-group:first-child { margin-top: 0; }
.lt-video-group .lt-muted { font-family: var(--lt-font-body); font-weight: 500; font-size: 12px; }
.lt-video-list.rz-card { padding: 0; overflow: hidden; }
.lt-video-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--lt-line-faint);
  color: inherit; text-decoration: none;
}
.lt-video-row:first-child { border-top: none; }
a.lt-video-row:hover { background: var(--lt-surface-sunken); }
.lt-video-thumb {
  position: relative; flex: 0 0 160px; width: 160px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: var(--lt-video-bg); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .7);
}
.lt-video-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-video-length {
  position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, .63); color: #fff;
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 7px;
}
.lt-video-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.lt-video-row-title { font-family: var(--lt-font-display); font-weight: 800; font-size: 14.5px; }
.lt-video-row-team { color: var(--lt-ink-3); }
@media (max-width: 560px) {
  .lt-video-thumb { flex-basis: 116px; width: 116px; }
}

/* --- Saved clips --- */
.lt-clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.lt-clip-card { background: #fff; border: 1px solid var(--lt-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.lt-clip-still {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9;
  border: none; padding: 0; background: var(--lt-video-bg); cursor: pointer; color: #fff;
}
.lt-clip-still:disabled { cursor: default; }
.lt-clip-still > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-clip-play {
  position: relative; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); border: 1.5px solid rgba(255, 255, 255, .6); font-size: 15px;
}
.lt-clip-still:not(:disabled):hover .lt-clip-play { background: rgba(0, 0, 0, .6); }
.lt-clip-state {
  position: absolute; left: 6px; top: 6px; background: var(--lt-warn-tint); color: var(--lt-warn-ink);
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px;
}
.lt-clip-state.is-failed { background: var(--lt-danger-tint); color: var(--lt-danger); }
.lt-clip-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.lt-clip-title { font-family: var(--lt-font-display); font-weight: 700; font-size: 13.5px; }
.lt-clip-game { font-size: 12px; color: var(--lt-ink-3); }
.lt-clip-actions { display: flex; gap: 6px; margin-top: 6px; }

.lt-video-upgrade.rz-card {
  display: flex; align-items: center; gap: 14px; background: var(--lt-accent-tint); border: 1px solid var(--lt-accent-line);
  color: var(--lt-ink-3); font-size: 13.5px;
}
.lt-video-upgrade-icon {
  flex: 0 0 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--lt-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 560px) {
  .lt-video-upgrade.rz-card { flex-wrap: wrap; }
}

/* --- The clip editor --- */
.lt-clip-trim.rz-card { margin-top: 12px; padding: 12px 16px; }
.lt-clip-trim-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lt-clip-trim-time { font-family: var(--lt-font-display); font-weight: 800; font-size: 20px; }
.lt-clip-trim-buttons { display: flex; align-items: center; gap: 6px; }
.lt-clip-trim .lt-video-eyebrow { margin-bottom: 2px; }