:root {
  --bg: #0b0c14;
  --surface: #14151f;
  --surface-2: #1b1d2b;
  --border: #2a2c3d;
  --text: #e7e9f2;
  --muted: #8b8fa3;
  --accent: #6c5ce7;
  --live-red: #ef4444;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.4;
}
h1, h2, h3 { margin: 0; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* ── Header ── */
.site-header {
  background: linear-gradient(180deg, #14152a 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* align-self:stretch was tried here first (matches spec reasoning: an item with height:auto
   should stretch to its flex line's cross size) but does NOT reliably apply to a replaced element
   (<img>) with intrinsic width/height attributes in real browsers — verified it renders at full
   intrinsic size regardless. Explicit height instead: 40px is the measured rendered height of the
   h1+tagline text column at this font sizing, so the logo's top lines up with the top of
   "Glych.live" and its bottom with the bottom of "Esports in one place." If the type size in
   .brand h1/.tagline ever changes, this value needs to move with it (no longer self-adjusting). */
.brand { display: flex; align-items: flex-start; gap: 10px; }
.brand__mark {
  display: block; width: auto; height: 40px; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(108, 92, 231, 0.45));
}
.brand h1 { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1.2; }
.brand__tld { color: var(--accent); font-weight: 700; }
.tagline { margin: 2px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.2; }

/* Level filter (ALL EVENTS / PRO-SEMI-PRO / COLLEGE) reuses .view-toggle's styling directly
   (same markup pattern as CALENDAR/AGENDA) so it matches the site's existing segmented-control
   look rather than introducing a second visual language. */
.level-toggle-row { display: flex; justify-content: center; margin-bottom: 14px; }

.game-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.chip.is-active { color: #fff; border-color: var(--chip-color, var(--accent)); background: var(--chip-color, var(--accent)); }
.chip--all.is-active { background: var(--accent); border-color: var(--accent); }

main { max-width: 1200px; margin: 0 auto; padding: 20px; }

/* Server-rendered SEO copy (see index.php) — meaningful to crawlers/screen readers, not meant to
   be seen by sighted users since the header/tagline already convey it visually. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Live section ── */
.live-section { margin-bottom: 32px; }
.live-area {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.skeleton { padding: 60px 20px; text-align: center; color: var(--muted); }

.live-video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.live-video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

.standby-screen { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, #14152a 0%, #000 100%); }
.standby-screen__inner { text-align: center; max-width: 420px; padding: 20px; }
.standby-pulse {
  width: 18px; height: 18px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--accent); animation: standby-pulse 1.8s ease-in-out infinite;
}
@keyframes standby-pulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.5); }
  50% { transform: scale(1.15); opacity: 0.85; box-shadow: 0 0 0 10px rgba(108, 92, 231, 0); }
}
.standby-heading { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.1em; color: var(--text); margin-bottom: 8px; }
.standby-sub { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

.live-meta { padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--live-red); color: #fff; font-weight: 700; font-size: 0.72rem;
  padding: 4px 10px; border-radius: 999px; letter-spacing: 0.04em;
}
.live-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
.live-badge--replay { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.watch-on-row { display: flex; align-items: center; gap: 8px; padding: 0 20px 14px; flex-wrap: wrap; }
.watch-on-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.source-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
}
.source-btn.is-active { border-color: var(--accent); color: var(--accent); }

.live-game-tag {
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 6px; color: #0b0c14;
  background: var(--game-color, var(--accent));
}
.live-title { font-size: 1.15rem; font-weight: 700; margin-top: 4px; }
.live-sub { color: var(--muted); font-size: 0.85rem; }

/* Deliberately subdued relative to .live-game-tag — collegiate events are visually identified,
   not made to dominate, unless the COLLEGE filter is active (see spec). */
.college-tag {
  font-weight: 700; font-size: 0.66rem; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 6px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
}

/* Establishes *why* this feed — which platform Glych actually pulled the broadcast from. */
.platform-badge {
  font-weight: 700; font-size: 0.66rem; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border);
}
.platform-badge--youtube { color: #ff4b4b; border-color: rgba(255,75,75,0.4); }
.platform-badge--twitch { color: #a970ff; border-color: rgba(169,112,255,0.4); }

.next-match {
  padding: 40px 24px;
  text-align: center;
}
.next-match .eyebrow { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 700; }
.next-match h3 { font-size: 1.4rem; margin: 10px 0 4px; }
.next-match .countdown { margin-top: 14px; font-size: 1.1rem; font-weight: 700; color: var(--accent); }

.next-up-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--surface-2); border-top: 1px solid var(--border);
  font-size: 0.78rem;
}
.next-up-label { font-weight: 800; letter-spacing: 0.06em; color: var(--muted); font-size: 0.68rem; }
.next-up-game {
  font-weight: 700; font-size: 0.7rem; padding: 3px 8px; border-radius: 6px;
  color: #0b0c14; background: var(--game-color, var(--accent));
}
.next-up-matchup { font-weight: 600; }
.next-up-banner .countdown { color: var(--accent); font-weight: 700; margin-left: auto; }

.also-live { margin-top: 16px; }
.section-label { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; font-weight: 700; }
.also-live-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.also-live-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px;
}
.also-live-card .live-game-tag { margin-bottom: 8px; }
.also-live-card .teams { font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; }
.watch-btn {
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  padding: 6px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 700;
}
.watch-btn:hover { background: var(--accent); color: #fff; }
.watch-btn--disabled {
  display: inline-block; border: 1px solid var(--border); background: transparent; color: var(--muted);
  padding: 6px 14px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  cursor: default;
}
.back-to-live-btn {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  padding: 5px 12px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; margin-left: auto;
}
.back-to-live-btn:hover { border-color: var(--accent); color: var(--accent); }
.watch-btn--upcoming { border-color: var(--border); color: var(--muted); }
.watch-btn--upcoming:hover { background: var(--surface-2); color: var(--text); }

/* ── Schedule ── */
.schedule-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-bottom: 14px;
}
.month-nav { display: flex; align-items: center; gap: 10px; }
.month-nav button {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  width: 30px; height: 30px; border-radius: 6px; font-size: 1rem;
}
.month-nav h2 { font-size: 1.1rem; min-width: 160px; text-align: center; }

.view-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-toggle button { background: var(--surface); color: var(--muted); border: 0; padding: 7px 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; }
.view-toggle button[aria-selected="true"] { background: var(--accent); color: #fff; }

/* Calendar grid */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-dow { font-size: 0.68rem; color: var(--muted); text-align: center; padding: 4px 0; font-weight: 700; }
.cal-day {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.cal-day.is-outside { opacity: 0.35; }
.cal-day.is-today { border-color: var(--accent); }
.cal-day__num { font-size: 0.72rem; color: var(--muted); }
.cal-event {
  font-size: 0.68rem; padding: 3px 6px; border-radius: 5px; color: #0b0c14;
  background: var(--game-color, var(--accent)); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
  border: 0; width: 100%;
}
.cal-event.is-live { outline: 2px solid var(--live-red); }
.cal-event__more { font-size: 0.65rem; color: var(--muted); background: none; border: 0; text-align: left; padding: 2px 4px; width: 100%; }
.cal-event__more:hover { color: var(--accent); text-decoration: underline; }

/* Agenda */
.agenda-list { display: flex; flex-direction: column; gap: 22px; }
.agenda-day h3 { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 8px; }
.agenda-row {
  display: grid; grid-template-columns: 80px auto; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--border);
  width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; color: var(--text);
}
.agenda-row:first-child { border-top: 0; }
.agenda-row .time { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.agenda-row .game-tag { font-size: 0.7rem; font-weight: 700; color: var(--game-color, var(--accent)); }
.agenda-row .matchup { font-weight: 600; margin-top: 2px; }
.agenda-row .comp { color: var(--muted); font-size: 0.78rem; }

.day-modal-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.day-modal-list .agenda-row { border-top: 1px solid var(--border); }
.day-modal-list .agenda-row:first-child { border-top: 0; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.modal__panel {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); max-width: 480px; width: 100%; padding: 24px; z-index: 1;
}
.modal__close { position: absolute; top: 10px; right: 10px; background: none; border: 0; color: var(--muted); font-size: 1rem; }
.modal-detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 0.85rem; }
.modal-detail-row:first-of-type { border-top: 0; }
.modal-detail-row .label { color: var(--muted); }
.modal-watch { display: inline-block; margin-top: 16px; background: var(--accent); color: #fff; padding: 8px 18px; border-radius: 6px; font-weight: 700; font-size: 0.82rem; text-decoration: none; }

.site-footer { text-align: center; color: var(--muted); font-size: 0.75rem; padding: 30px 20px; }

/* ── Responsive ── */
@media (max-width: 720px) {
  .live-meta { flex-direction: column; align-items: flex-start; }
  .cal-day { min-height: 70px; }
}