/* ═══════════════════════════════════════════════════════════════════════════
   A team's players live on Twitch (js/shared/twitch-live.js): the mark beside
   a team in play, the list of names when two or more are live, and the panel
   the stream plays in. Blue lights, silver acts: the Twitch glyph is drawn in
   Pale Floodlight, never Twitch's purple, so no third hue joins the page.
   Every element here is made by script, so nothing waits hidden in this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The mark ─────────────────────────────────────────────────────────── */
.twitch-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 0 var(--space-2);
  margin: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--led-pale);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-align: left;
  cursor: pointer;
  transition: color var(--duration) var(--ease-out);
}

.twitch-mark svg,
.twitch-plate__item svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.twitch-mark__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twitch-mark:hover {
  color: var(--text-primary);
}

.twitch-mark:focus-visible,
.twitch-plate__item:focus-visible,
.twitch-panel__open:focus-visible,
.twitch-panel__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── The list of names ───────────────────────────────────────────────── */
/* The dialog plate: navy lit from the top under a Strong Rule at 14px. */
.twitch-plate {
  position: fixed;
  z-index: 995;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  max-width: calc(100vw - 2rem);
  max-height: min(60vh, 22rem);
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel-night) 0%, var(--bg-base) 55%);
  box-shadow: var(--lift-float);
}

.twitch-plate__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-out);
}

.twitch-plate__item svg {
  color: var(--led-pale);
}

.twitch-plate__item:hover {
  background: var(--bg-surface);
}

.twitch-plate__item:focus-visible {
  outline-offset: -2px;
}

/* ── The panel ───────────────────────────────────────────────────────── */
/* Docked, not modal: the page beside it stays usable. It arrives the one way
   content arrives on this site, a wipe from its left edge. */
.twitch-panel {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 990;
  width: 400px;
  max-width: calc(100vw - 2 * var(--space-6));
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel-night) 0%, var(--bg-base) 55%);
  color: var(--text-primary);
  box-shadow: var(--lift-float);
  animation: twitch-panel-wipe 450ms var(--ease-out);
  transition: right 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.twitch-panel:focus {
  outline: none;
}

@keyframes twitch-panel-wipe {
  from { clip-path: inset(0 100% 0 0 round var(--radius-lg)); }
  to   { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
}

.twitch-panel__screen {
  aspect-ratio: 16 / 9;
  background: var(--bg-deep);
}

.twitch-panel__screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.twitch-panel__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-top: 1px solid var(--border);
}

.twitch-panel__who {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  margin: 0;
}

.twitch-panel__name {
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A club's name, so Marcellus. */
.twitch-panel__team {
  overflow: hidden;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twitch-panel__team:empty {
  display: none;
}

.twitch-panel__open {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  color: var(--accent-hover);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: color var(--duration) var(--ease-out);
}

.twitch-panel__open:hover {
  color: var(--text-primary);
}

.twitch-panel__close {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}

.twitch-panel__close svg {
  width: 20px;
  height: 20px;
}

.twitch-panel__close:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* On a phone the panel runs the width of the screen at its foot, and the
   page gets its height as room at the foot (--twitch-panel-space, set by
   script), so nothing is left under it. */
@media (max-width: 575.98px) {
  .twitch-panel {
    right: var(--space-4);
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    left: var(--space-4);
    width: auto;
    max-width: none;
  }

  body.has-twitch-panel {
    padding-bottom: var(--twitch-panel-space, 0px);
  }
}

/* A match's slide-over (js/tournaments/slide-over.js, z-index 1050) covers
   the page with its scrim. While it is open the stream sits above the scrim,
   at the foot of the screen just left of the slide-over, and when it closes
   the stream slides back to its corner. The 480px is the slide-over's width,
   560px when it holds a match chat (css/tournaments/match-chat.css). Twitch
   stops a player that anything covers, so the stream must clear it fully.
   The list of names opens over the slide-over too. */
body:has(.slide-over.is-open) .twitch-plate {
  z-index: 1052;
}

@media (min-width: 768px) {
  body:has(.slide-over.is-open) .twitch-panel {
    z-index: 1051;
    right: calc(min(480px, 100vw) + var(--space-6));
    max-width: calc(100vw - min(480px, 100vw) - 2 * var(--space-6));
  }

  body:has(.slide-over--chat.is-open) .twitch-panel {
    right: calc(min(560px, 100vw) + var(--space-6));
    max-width: calc(100vw - min(560px, 100vw) - 2 * var(--space-6));
  }
}

/* Below 768px the slide-over is a sheet from the foot of the screen, so the
   stream stays at the foot above it and the sheet gets room under its last
   line. */
@media (max-width: 767.98px) {
  body:has(.slide-over.is-open) .twitch-panel {
    z-index: 1051;
  }

  body.has-twitch-panel .slide-over__body {
    padding-bottom: calc(var(--space-5) + var(--twitch-panel-space, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .twitch-panel {
    animation: none;
    transition: none;
  }
  .twitch-mark,
  .twitch-plate__item,
  .twitch-panel__open,
  .twitch-panel__close {
    transition: none;
  }
}

/* A match in play carries its teams' live streams on a line under its row,
   the home side's at the left and the away side's at the right, outside the
   row's link or button (GLOSSARY.md § Watching the matches). The home page's
   Live now, the cup page's and its match panel, and the player's open picks
   on /predictions.html use it. */
.score-row__watch {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
}

.score-row__watch:empty {
  display: none;
}

/* Each glyph lines up with its team's name: the mark's inner padding goes
   past the edge. Under a score row, its 44px target reaches up into the
   row's own padding. */
.score-row + .score-row__watch {
  margin-top: calc(-1 * var(--space-2));
}

.score-row__watch > :first-child {
  margin-left: calc(-1 * var(--space-2));
}

.score-row__watch > :last-child {
  margin-right: calc(-1 * var(--space-2));
}

/* A score row with streams under it hands its hairline to them, so the
   streams read as part of their match. */
.score-row:has(+ .score-row__watch:not(:empty)) {
  border-bottom-color: transparent;
}

.score-row + .score-row__watch:not(:empty) {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2);
}