[hidden] { display: none !important; }

/* ── Live banner ─────────────────────────────────────────────────────── */
.live-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(90deg, #8c1a1a, #ff2244, #8c1a1a);
  color: #fff;
  font-family: 'Exo 2', sans-serif;
  font-size: 0.9rem;
  text-align: center;
}

.live-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  animation: pulse-live 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

.live-banner-text {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.live-banner-link {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

/* ── Multistream ──────────────────────────────────────────────────────── */
.multistream-section {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 0.5rem 0.5rem;
  background: var(--bg);
}

/*
 * Two-column grid: col 1 flexes with the stream area, col 2 is a fixed
 * 320px chat panel. Row 1 is the toolbar (layout buttons + rotate button
 * on the left, chat toggle on the right); row 2 is the stream area. The
 * chat panel spans both rows, so its top lines up with the top of the
 * rotate button/layout buttons instead of starting level with the stream
 * area below the toolbar.
 */
.multistream-layout {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto 1fr;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
}

.stream-toolbar-stream-col {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.stream-layout-buttons {
  display: flex;
  gap: 0.5rem;
}

.layout-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-family: 'Exo 2', sans-serif;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.layout-btn:hover {
  color: var(--white, #fff);
  border-color: var(--orange);
}

.layout-btn.active {
  color: var(--gold);
  border-color: var(--orange);
  background: rgba(255, 140, 0, 0.1);
}

.stream-area {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  /* Positioning root for absolutely-positioned .stream-tile elements. Tiles
     are mounted here once and repositioned via inline left/top/width/height
     for their whole lifetime — see the comment on .stream-tile below for why. */
  position: relative;
}

.stream-grid-empty {
  text-align: center;
  color: var(--text-muted);
}

/*
 * Every stream tile (and its iframe) is mounted directly under .stream-area
 * exactly once and never reparented afterward. Twitch/YouTube embeds reload
 * not only when their iframe is resized but also whenever the iframe is
 * moved to a different DOM parent — even a move between two containers that
 * are both already attached to the document counts as a reload trigger in
 * most browsers. So layout changes (grid/focus/side-by-side, rotate) are
 * expressed purely as new left/top/width/height values applied to these same
 * persistent nodes, computed in JS (computeLayoutRects in js/home.js) —
 * never by moving a tile into a different wrapper element.
 *
 * Deliberately NOT using `transform: scale()` to resize tiles (an earlier
 * approach): verified that any non-identity CSS transform on an ancestor of
 * a Twitch iframe makes Twitch refuse to autoplay ("style visibility"
 * requirement not met), even a barely-shrinking scale. A real width/height
 * change on the iframe's box does not cause a reload, so tiles are resized
 * for real instead.
 */
/*
 * Animating left/top/width/height means the tile spends ~0.25s passing
 * through in-between geometry, and Twitch's autoplay check can sample during
 * that window — verified empirically that this can trigger "style
 * visibility" autoplay failures on rotate that an instant jump-cut does not.
 * Re-enabled anyway per product decision (smooth rotation > guaranteed
 * autoplay on every rotate); if the play-button-instead-of-autoplay issue
 * resurfaces after rotating, this transition is the first thing to suspect.
 */
.stream-tile {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.stream-tile-label {
  padding: 0.6rem 1rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: var(--gold);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.stream-tile-frame {
  position: relative;
  width: 100%;
  height: calc(100% - 2.1rem);
  overflow: hidden;
}

.stream-tile-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * Lives in the toolbar row (#rotateBtnSlot, next to the layout buttons and
 * chat toggle) rather than floating inside #streamArea above the primary
 * tile — that keeps it (and everything else in the row) aligned with the
 * top of the stream/chat area below, and keeps it clear of the video
 * iframe's box entirely: Twitch's autoplay check refuses to autoplay
 * ("style visibility" not met) if any element sits within roughly 20-25px
 * of the iframe's edge, even fully outside its box with zero visual overlap
 * — verified empirically via isolated reproduction.
 */
.rotate-streams-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, var(--orange-dark, #cc7000), var(--orange));
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: 'Exo 2', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(255, 140, 0, 0.4);
  transition: opacity 0.2s;
}

.rotate-streams-btn:hover {
  opacity: 0.9;
}

.rotate-streams-icon {
  flex-shrink: 0;
}

/* Chat panel — spans both grid rows so its top aligns with the toolbar row
   (rotate button / layout buttons) instead of starting level with
   .stream-area below it. */
.chat-panel {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  min-height: 400px;
}

.chat-panel-header {
  flex: 0 0 auto;
  padding: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.chat-stream-select {
  width: 100%;
  background: var(--bg-card2, #151530);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-family: 'Exo 2', sans-serif;
  font-size: 0.85rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
}

.chat-stream-select:hover,
.chat-stream-select:focus {
  color: var(--white, #fff);
  border-color: var(--orange);
  outline: none;
}

.chat-panel-body {
  flex: 1 1 auto;
  min-height: 0;
}

.chat-panel-body iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
}

.chat-panel-empty {
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 1024px) {
  /* Collapse the two-column/two-row grid into a single stacked column:
     layout buttons, stream area, then chat panel — the row-spanning chat
     panel (used to align its top with the toolbar on desktop) doesn't apply
     once everything is one column wide. Chat is shown/hidden via the
     "Disable Chat" option in the dropdown, not a separate toggle button. */
  .multistream-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .stream-toolbar-stream-col {
    grid-column: 1;
    grid-row: 1;
  }
  .stream-area {
    grid-column: 1;
    grid-row: 2;
  }
  .chat-panel {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    min-height: 320px;
  }
  /* On mobile, "Disable Chat" collapses the panel down to just its header
     (the dropdown stays visible so chat can be turned back on) instead of
     leaving an empty message box taking up scroll space. */
  .chat-panel.chat-panel--disabled {
    min-height: 0;
  }
  .chat-panel.chat-panel--disabled .chat-panel-body {
    display: none;
  }
  /* .multistream-section's min-height: 80vh + justify-content: center (see
     base rule above) is sized for the desktop layout, where chat is a fixed
     320px side column that doesn't affect content height. On mobile, chat
     stacks below the video and can collapse away (Disable Chat), so
     centering a much-shorter block inside a still-80vh box left large empty
     gaps above/below. Let the section size to its actual content instead. */
  .multistream-section {
    min-height: 0;
    justify-content: flex-start;
  }
}


/* ── Schedule ─────────────────────────────────────────────────────────── */
.schedule-section {
  padding: 4rem 2rem;
  background: var(--bg);
}

.schedule-list {
  max-width: 800px;
  margin: 0 auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.schedule-day-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.schedule-day-heading {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: var(--orange);
  letter-spacing: 0.05em;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.schedule-day-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.schedule-item {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
}

.schedule-item-time {
  flex: 0 0 auto;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: var(--gold);
  min-width: 110px;
}

.schedule-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.schedule-item-title {
  color: var(--white, #fff);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.schedule-item-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.schedule-source-tag {
  font-size: 0.65rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

/* Calendar-color accent, shared by schedule-item (List) and schedule-grid-card
   (Grid). schedule-timegrid-event (Time Grid) gets its own full-border rule
   further below instead, since its compact boxes use a border on all sides
   rather than a left accent. Falls back to the site's orange accent for
   items with no resolvable Google Calendar colorId (manual/Firestore items,
   or calendar events using the calendar default). */
.schedule-item,
.schedule-grid-card {
  border-left: 3px solid var(--item-color, var(--orange));
}

/* Must come after the shared accent rule above so "happening now" always
   wins over a calendar-color accent on the same element — current-ness is a
   status overlay, intentionally not calendar-colored. */
.schedule-item--current {
  border-left: 3px solid var(--orange);
  box-shadow: 0 0 16px rgba(255, 140, 0, 0.25);
}

/* ── Schedule: 4-Column Day Grid ──────────────────────────────────────── */
.schedule-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.schedule-grid-column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.schedule-grid-cards {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* A row of 2+ overlapping items, laid out side-by-side within the day column. */
.schedule-grid-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.schedule-grid-row .schedule-grid-card {
  flex: 1 1 0;
  min-width: 0; /* allow text truncation instead of overflow */
}

.schedule-grid-card {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}

.schedule-grid-card .schedule-item-time {
  min-width: 0;
  margin-bottom: 0.3rem;
}

.schedule-grid-card .schedule-item-title {
  font-size: 0.9rem;
}

/* ── Schedule: Time Grid (Google Calendar style) ─────────────────────── */
.schedule-timegrid {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 0;
  align-items: flex-start;
  overflow-x: auto;
}

.schedule-timegrid-axis-wrap {
  flex: 0 0 60px;
}

.schedule-timegrid-axis {
  position: relative;
  border-right: 1px solid var(--border);
}

.schedule-timegrid-hour {
  height: 60px;
  font-size: 0.7rem;
  color: var(--text-muted);
  transform: translateY(-0.6em);
  padding-right: 0.5rem;
  text-align: right;
}

.schedule-timegrid-column-wrap {
  flex: 1 1 0;
  min-width: 160px;
  border-left: 1px solid var(--border);
}

.schedule-timegrid-column {
  position: relative;
  background: var(--bg-card);
}

.schedule-timegrid-event {
  position: absolute;
  background: color-mix(in srgb, var(--item-color, var(--orange)) 18%, transparent);
  border: 1px solid var(--item-color, var(--orange));
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  overflow: hidden;
  font-size: 0.75rem;
}

.schedule-timegrid-event .schedule-item-title {
  font-size: 0.75rem;
  gap: 0.3rem;
}

.schedule-timegrid-event.schedule-item--current {
  border-left: 3px solid var(--orange);
  box-shadow: 0 0 12px rgba(255, 140, 0, 0.35);
}

@media (max-width: 800px) {
  .schedule-grid { flex-direction: column; }
  .schedule-timegrid-column-wrap { min-width: 140px; }
}

/*.schedule-section--live .schedule-section-heading::after {
  content: ' — Happening Now / Next';
}

/* ── Donation ─────────────────────────────────────────────────────────── */
.donation-block {
  margin-top: 1.25rem;
}

.donation-headline {
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.donation-blurb {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.donation-progress-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.donation-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--gold));
}

.donation-progress-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

@media (max-width: 480px) {
  .schedule-item { flex-direction: column; gap: 0.3rem; }
  .schedule-item-time { min-width: 0; }
}