/* ══ THE CIRCUS — live college football + NFL scoreboard. ══
   Real games, real scores, ESPN's own public feed. Bread was the console;
   this is the circus — a Saturday marquee that moves. */

.circus-card {
  width: min(94vw, 720px); max-height: 90dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-3);
  background: linear-gradient(180deg, #241608, #150c04 70%, #0e0803);
  border: 1px solid var(--space-line-bright); border-radius: 16px; padding: var(--s-4);
  box-shadow: 0 40px 90px rgba(0,0,0,0.7), var(--glow-soft), inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--ink);
}
.circus-tabs { display: flex; gap: 6px; }
.circus-tab {
  flex: 1; background: var(--space-panel); border: 1px solid var(--space-line);
  color: var(--ink-dim); font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.12em; padding: 8px 6px; border-radius: 999px; cursor: pointer;
}
.circus-tab.cur { background: var(--neon-cyan); color: #1a0f04; border-color: var(--neon-cyan); font-weight: 700; }
.circus-stamp { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-faint); text-align: right; }
.circus-stamp.is-stale { color: var(--neon-red-soft); }

.circus-group-h {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  color: var(--neon-cyan); display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.circus-group-h .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-air); box-shadow: var(--glow-red); animation: circus-pulse 1.4s infinite; }
@keyframes circus-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.circus-list { display: flex; flex-direction: column; gap: 8px; }
.circus-empty { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-faint); padding: 10px 4px; }

.circus-game {
  background: var(--space-panel); border: 1px solid var(--space-line); border-radius: 12px;
  padding: 10px 12px;
}
.circus-game.is-live { border-color: var(--on-air); box-shadow: 0 0 0 1px rgba(255,64,48,0.25), var(--glow-red); }
.circus-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: var(--s-2); }
.circus-side { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.circus-side.away { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.circus-logo { width: 26px; height: 26px; object-fit: contain; flex: none; filter: drop-shadow(0 0 4px rgba(0,0,0,0.6)); }
.circus-side-name { display: flex; flex-direction: column; min-width: 0; }
.circus-rank { font-family: var(--font-mono); font-size: 0.62rem; color: var(--neon-cyan); }
.circus-team { font-weight: 600; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.circus-record { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-faint); }
.circus-score { font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--ink); min-width: 1.6em; text-align: center; }

.circus-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.circus-status { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--ink-dim); white-space: nowrap; }
.circus-game.is-live .circus-status { color: var(--on-air); font-weight: 700; }
.circus-net { font-family: var(--font-mono); font-size: 0.58rem; color: var(--ink-faint); }
.circus-sport { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em; color: var(--ink-faint); opacity: 0.85; }
.circus-box {
  font-family: var(--font-mono); font-size: 0.58rem; color: var(--ink-faint);
  text-decoration: none; border-bottom: 1px dotted var(--ink-faint); margin-top: 2px;
}
.circus-box:hover { color: var(--ink-dim); }

/* WHO'S IN THE ROOM — station channels tied to this game. Never a link off
   the site: a chip tunes the console, same as the channel rail. */
.circus-room { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.circus-chip {
  display: flex; flex-direction: column; align-items: inherit; text-align: inherit;
  background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-display);
  color: var(--phosphor);
}
.circus-chip b { font-size: 0.74rem; font-weight: 600; }
.circus-chip span { font-family: var(--font-mono); font-size: 0.58rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.circus-chip:hover b { color: var(--neon-cyan); text-decoration: underline; }

.circus-broadcast {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--space-line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.circus-broadcast-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; color: var(--ink-faint); }
.circus-broadcast .circus-room { flex-direction: row; gap: 14px; margin-top: 0; }
.circus-broadcast .circus-chip { align-items: flex-start; text-align: left; }

@media (max-width: 560px) {
  .circus-card { width: 96vw; padding: var(--s-3); }
  .circus-team { font-size: 0.78rem; }
  .circus-logo { width: 22px; height: 22px; }
}