/* ── Head-to-head "Play a Friend" ──────────────────────────────────────────
   Styles for #h2h-view only. Uses the same CSS variables as style.css so both
   themes come along for free — no colour is hard-coded except the sport
   accents, which already exist as variables. */

/* Gold, tuned per theme so it reads as "special" without glaring on light. */
:root {
  --gold: #b8860b;
  --gold-bright: #d9a520;
  --gold-soft: #fbf1d8;
  --gold-contrast: #2b2000;
}
:root[data-theme="dark"] {
  --gold: #d9a520;
  --gold-bright: #f0c04a;
  --gold-soft: #3a2f12;
  --gold-contrast: #241b00;
}

/* ── Clickable wordmark ──────────────────────────────────────────────────
   The title is the "home" affordance people reach for by instinct. Styled to
   inherit the h1 exactly so it stays a wordmark, not a button. */
#site-title {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
#site-title:hover { filter: brightness(1.12); }
#site-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Multiplayer entry button ────────────────────────────────────────────
   The whole feature is invisible if this reads as another icon, so it's a
   labelled gold pill rather than a glyph. */
.mp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  color: var(--gold-contrast);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 1px solid var(--gold);
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 3px var(--shadow-soft);
  transition: filter 0.15s, transform 0.1s;
}
.mp-btn:hover { filter: brightness(1.07); }
.mp-btn:active { transform: translateY(1px); }

/* A gentle pulse on first paint so returning players notice it appeared. */
@keyframes mp-attention {
  0%, 100% { box-shadow: 0 1px 3px var(--shadow-soft); }
  50% { box-shadow: 0 0 0 5px rgba(217, 165, 32, 0.22); }
}
.mp-btn.pulse { animation: mp-attention 2s ease-in-out 3; }

/* While in multiplayer the same button is the way back out, so it drops the
   gold and reads as a plain secondary control. */
.mp-btn.is-exit {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
  box-shadow: none;
  animation: none;
}
.mp-btn.is-exit:hover { color: var(--accent); border-color: var(--accent); }

/* Entry-state label echoes the Athletele wordmark: deep-red word, white "le".
   The solid deep red (not the theme --accent, which goes pale in dark mode)
   keeps it legible on the gold pill in both themes. */
.mp-btn:not(.is-exit) #h2h-btn-label { color: var(--accent-solid); }
.mp-btn:not(.is-exit) .mp-le { color: #fff; }
/* On the light (white) theme white washes out on the gold, so the "le" goes
   black there — still the wordmark's two-tone, just legible in both modes. */
:root[data-theme="light"] .mp-btn:not(.is-exit) .mp-le { color: #000; }

@media (max-width: 480px) {
  .mp-btn { font-size: 0.68rem; padding: 5px 9px; gap: 4px; }
  /* "Multiplayer Battle" is too wide for a phone header — it overlapped the
     centred title. Drop to just "Multiplayer" here. */
  .mp-battle { display: none; }
}

/* ── Info modal tabs (How to play / Statistics) ──────────────────────── */
.info-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
}

.info-tab {
  flex: 1;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 8px 10px;
  color: var(--text-muted);
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
}
.info-tab:hover { color: var(--accent); border-color: var(--accent); }
.info-tab.active {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--accent-contrast);
}

#h2h-view { margin-top: 18px; }

/* style.css sets border-box only on a couple of specific selectors, so by
   default padding and borders here add to a declared width. A width:100% input
   then renders 24px wider than its container and hangs off to the right, which
   reads as the whole screen being off-centre. Scoped to #h2h-view so the daily
   game's layout is untouched. */
#h2h-view,
#h2h-view *,
#h2h-view *::before,
#h2h-view *::after {
  box-sizing: border-box;
}

/* The `hidden` attribute is only a user-agent `display: none`, so ANY author
   rule that sets display (`.h2h-actions { display: flex }`, say) silently beats
   it and the element stays on screen. Everything here toggles visibility via
   `hidden`, so make it authoritative once rather than per-element. */
#h2h-view [hidden] {
  display: none !important;
}

.h2h-screen { display: block; }

.h2h-title {
  font-size: 1.35rem;
  margin: 0 0 4px;
  text-align: center;
  color: var(--text);
}

.h2h-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.86rem;
  margin: 0 auto 20px;
  max-width: 34rem;
  line-height: 1.45;
}

/* ── Form primitives ─────────────────────────────────────────────────── */
.h2h-field {
  display: block;
  max-width: 20rem;
  margin: 0 auto 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.h2h-field input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 11px;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
}

.h2h-field input:focus,
#h2h-code:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.h2h-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 4px;
}

.h2h-primary,
.h2h-secondary {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.h2h-primary {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}
.h2h-primary:hover:not(:disabled) { background: var(--accent-solid-hover); }
.h2h-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.h2h-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--input-border);
}
.h2h-secondary:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ── "or" divider ────────────────────────────────────────────────────── */
.h2h-or {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 20rem;
  margin: 18px auto;
  color: var(--text-faint);
  font-size: 0.78rem;
}
.h2h-or::before,
.h2h-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Join by code ────────────────────────────────────────────────────── */
.h2h-join {
  display: flex;
  gap: 8px;
  max-width: 20rem;
  margin: 0 auto;
}

#h2h-code {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
}
#h2h-code::placeholder {
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--text-faint);
}

/* ── Settings groups ─────────────────────────────────────────────────── */
.h2h-group {
  max-width: 26rem;
  margin: 0 auto 15px;
}

.h2h-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.h2h-group select {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
}

.h2h-group input[type="range"] {
  width: 100%;
  accent-color: var(--accent-solid);
  cursor: pointer;
}

.h2h-label output {
  color: var(--accent);
  font-weight: 700;
}

/* ── Chip toggles (sport / pool) ─────────────────────────────────────── */
.h2h-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.h2h-chip {
  flex: 1 1 auto;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 12px;
  color: var(--text-muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.h2h-chip:hover { border-color: var(--accent); color: var(--accent); }
.h2h-chip.active {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--accent-contrast);
}

.h2h-poolsize {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-soft);
  margin: 4px 0 0;
  min-height: 1.2em;
}

/* ── Lobby code ──────────────────────────────────────────────────────── */
.h2h-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px;
  margin: 0 auto 16px;
  max-width: 26rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.h2h-code-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-soft);
}

.h2h-code {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em; /* balance the trailing letter-space */
  color: var(--accent);
  line-height: 1.1;
}

.h2h-copy { font-size: 0.8rem; padding: 7px 14px; }
.h2h-copy.copied { color: var(--success); border-color: var(--success); }

/* Lobby spec tiles — one block per active parameter, in a wrapping row. */
.h2h-settings-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 16px;
  max-width: 30rem;
}

.h2h-spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 4.2rem;
  padding: 7px 11px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 7px;
}

.h2h-spec-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-soft);
  white-space: nowrap;
}

.h2h-spec-value {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* The sport tile picks up its league colour, matching the info modal. */
.h2h-spec.sport-nba .h2h-spec-value { color: var(--sport-nba); }
.h2h-spec.sport-nfl .h2h-spec-value { color: var(--sport-nfl); }
.h2h-spec.sport-mlb .h2h-spec-value { color: var(--sport-mlb); }
.h2h-spec.sport-nhl .h2h-spec-value { color: var(--sport-nhl); }

/* ── Roster ──────────────────────────────────────────────────────────── */
.h2h-roster {
  list-style: none;
  padding: 0;
  margin: 0 auto 12px;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h2h-player {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.88rem;
  color: var(--text);
}

.h2h-player-name { flex: 1; font-weight: 600; }

.h2h-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--chip-bg);
  color: var(--accent);
}

.h2h-tag.you { background: var(--accent-solid); color: var(--accent-contrast); }

/* Readiness: players download up to 32MB of season data before a match can
   start, so the lobby shows who is actually ready rather than starting blind. */
.h2h-ready {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.h2h-ready.yes { color: var(--success-bright); }
.h2h-ready.no  { color: var(--text-faint); }

/* Host-only remove button on a roster row. Understated until hovered — it's
   destructive, so it shouldn't compete with the player's name. */
.h2h-kick {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 7px;
  margin-left: 2px;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.h2h-kick:hover,
.h2h-kick:focus-visible {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger);
}

/* The settings controls relocated into the lobby for the host. Boxed so it
   reads as a distinct panel rather than loose controls under the roster. */
#h2h-lobby-settings {
  max-width: 28rem;
  margin: 4px auto 14px;
  padding: 14px 14px 10px;
  background: var(--card-alt);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
#h2h-lobby-settings .h2h-group { max-width: none; }
#h2h-lobby-settings .h2h-poolsize { margin-bottom: 2px; }

.h2h-hint {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-soft);
  margin: 0 0 4px;
  min-height: 1.2em;
}

.h2h-error {
  text-align: center;
  font-size: 0.83rem;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 10px auto 0;
  max-width: 26rem;
}

.h2h-back {
  display: block;
  margin: 22px auto 0;
  font-size: 0.82rem;
  color: var(--text-soft);
}

/* ── Scorebar ────────────────────────────────────────────────────────── */
.h2h-scorebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 0 0 12px;
}

.h2h-score {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 0.84rem;
  overflow: hidden;
}

.h2h-score.is-me { border-color: var(--accent); }
.h2h-score.is-out { opacity: 0.45; }
.h2h-score-name { font-weight: 600; color: var(--text); }
.h2h-score-pts {
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* A player who just answered correctly flashes green. */
.h2h-score.just-scored {
  border-color: var(--success-bright);
  background: var(--success-bg);
  animation: h2h-pop 0.45s ease;
}
@keyframes h2h-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* Cooldown ring: a shrinking bar under the name, so you can see at a glance
   who is currently locked out and can't beat you to the buzzer. */
.h2h-cooldown-ring {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--danger);
  width: 100%;
  transform-origin: left center;
}

/* Typing tell — you can see an opponent is about to commit, not what they typed. */
.h2h-typing {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.h2h-typing i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: h2h-blink 1.1s infinite;
}
.h2h-typing i:nth-child(2) { animation-delay: 0.18s; }
.h2h-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes h2h-blink {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

/* ── Timer ───────────────────────────────────────────────────────────── */
.h2h-timer-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 34rem;
  margin: 0 auto 10px;
}

.h2h-timer-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.h2h-timer-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent-solid);
  transform-origin: left center;
  border-radius: 99px;
}

/* Final stretch: cooldowns are off and it turns into a shootout. */
.h2h-timer-wrap.rapid .h2h-timer-bar span { background: var(--danger); }
.h2h-timer-wrap.rapid .h2h-timer-text { color: var(--danger); }

.h2h-timer-text {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 2.1em;
  text-align: right;
}

.h2h-round-label {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-soft);
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}

/* The match parameters, restated on the live screen so players don't have to
   remember what the host set. Fixed for the whole match, so it's small and calm
   — a reminder line, not a control. */
.h2h-game-specs {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-soft);
  margin: -4px auto 10px;
  max-width: 34rem;
  line-height: 1.4;
}
.h2h-game-specs:empty { margin: 0; }

.h2h-rapid-banner {
  color: var(--danger);
  font-weight: 700;
}

/* ── Guess area ──────────────────────────────────────────────────────── */
.h2h-guess-area { margin-top: 12px; }

/* The match input was inheriting the UA default: a plain white box at ~13px.
   White ignored the theme, and any font under 16px makes iOS zoom the page in
   on focus. Mirror the solo #guess-input so it's themed, and sit at 16px so a
   phone leaves the viewport alone. Height is tuned to match #h2h-guess-btn. */
#h2h-guess-input {
  font-size: 16px;
  padding: 6px 12px; /* 2px less than the button to offset the 1px border, so
                        the box lands at the same height as #h2h-guess-btn */
  width: 260px;
  max-width: 100%;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 4px;
}
#h2h-guess-input::placeholder { color: var(--text-faint); }
#h2h-guess-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

#h2h-guess-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.h2h-status {
  text-align: center;
  min-height: 1.4em;
  margin: 8px 0 2px;
  font-size: 0.88rem;
  font-weight: 600;
}
.h2h-status.wrong { color: var(--danger); }
.h2h-status.correct { color: var(--success-bright); }
.h2h-status.muted { color: var(--text-soft); font-weight: 500; }

.h2h-skip-row { margin: 6px 0 2px; }
#h2h-skip { font-size: 0.8rem; padding: 6px 14px; }
#h2h-skip.voted { background: var(--accent-soft); border-color: var(--accent); }

/* ── Opponent guess feed ─────────────────────────────────────────────── */
.h2h-feed {
  max-width: 34rem;
  margin: 12px auto 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 8.5rem;
  overflow-y: auto;
}

.h2h-feed-item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  background: var(--card-alt);
  border: 1px solid var(--border-soft);
  animation: h2h-slide 0.25s ease;
}
@keyframes h2h-slide {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.h2h-feed-who { font-weight: 700; color: var(--text-muted); }
.h2h-feed-guess { color: var(--text); }
.h2h-feed-item.is-wrong .h2h-feed-guess { text-decoration: line-through; color: var(--text-soft); }
.h2h-feed-item.is-correct {
  background: var(--success-bg);
  border-color: var(--success-bright);
}
.h2h-feed-item.is-correct .h2h-feed-guess { font-weight: 700; color: var(--success); }

/* ── Interstitial ────────────────────────────────────────────────────── */
.h2h-reveal-card {
  text-align: center;
  padding: 22px 16px;
  margin: 10px auto 16px;
  max-width: 28rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Who took the round — the headline of the card, so it reads at a glance
   rather than sitting there as the faintest text on screen. */
.h2h-reveal-reason {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 7px;
}
.h2h-reveal-reason.solved { color: var(--accent); }
.h2h-reveal-reason.won-by-me { color: var(--success-bright); }
.h2h-reveal-reason:empty { margin: 0; }

.h2h-reveal-answer {
  font-size: 1.5rem;
  margin: 0 0 6px;
  color: var(--accent);
}

.h2h-reveal-sub {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.h2h-countdown {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.h2h-countdown strong {
  font-size: 1.15rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ── Result ──────────────────────────────────────────────────────────── */
/* Two escape hatches side by side: back to the multiplayer menu (stay in the
   feature) or out to the daily game. Before this there was only the latter, so
   getting back to another match meant leaving multiplayer entirely. */
.h2h-exit-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 22px auto 0;
}
.h2h-exit-row .link-btn {
  font-size: 0.82rem;
  color: var(--text-soft);
}
.h2h-exit-row .link-btn:first-child { color: var(--accent); font-weight: 600; }

.h2h-final-place {
  font-weight: 800;
  color: var(--text-faint);
  min-width: 1.6em;
}
.h2h-player.is-winner {
  border-color: var(--success-bright);
  background: var(--success-bg);
}

/* ── Invite-link landing ─────────────────────────────────────────────── */
.h2h-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 13px 16px;
  margin: 0 auto 16px;
  max-width: 20rem;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 10px;
}

.h2h-invite-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-soft);
}

.h2h-invite .h2h-code { font-size: 1.6rem; }

.h2h-alt {
  display: block;
  margin: 12px auto 0;
  font-size: 0.8rem;
  color: var(--text-soft);
}

/* ── Between rounds (in place, above the table) ──────────────────────── */
.h2h-between { animation: h2h-slide 0.3s ease; }
.h2h-between .h2h-reveal-card { margin-top: 0; }
.h2h-between .h2h-countdown { margin: 0 0 14px; }

/* ── Public lobby directory ──────────────────────────────────────────── */
.h2h-lobby-list {
  list-style: none;
  padding: 0;
  margin: 6px auto 10px;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.h2h-lobby-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  text-align: left;
  font: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.h2h-lobby-row:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.h2h-lobby-main { flex: 1; min-width: 0; }

.h2h-lobby-host {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "In progress" tag on a lobby whose match is already running. */
.h2h-lobby-live {
  display: inline-block;
  margin-left: 7px;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: middle;
  padding: 2px 6px;
  border-radius: 99px;
  color: var(--success-bright);
  background: var(--success-bg);
}

.h2h-lobby-specs {
  display: block;
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-top: 2px;
}

.h2h-lobby-sport {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--card-alt);
  border: 1px solid var(--border-soft);
}
.h2h-lobby-sport.nba { color: var(--sport-nba); }
.h2h-lobby-sport.nfl { color: var(--sport-nfl); }
.h2h-lobby-sport.mlb { color: var(--sport-mlb); }
.h2h-lobby-sport.nhl { color: var(--sport-nhl); }

.h2h-lobby-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.h2h-lobby-empty {
  text-align: center;
  color: var(--text-soft);
  font-size: 0.86rem;
  padding: 22px 10px;
  line-height: 1.5;
}

/* Leaving a match mid-flight. Understated — it sits below the feed. */
.h2h-leave {
  display: block;
  margin: 16px auto 0;
  font-size: 0.8rem;
  color: var(--text-soft);
}

/* ── Confetti ────────────────────────────────────────────────────────── */
.h2h-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 60;
}

.h2h-confetti i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 13px;
  border-radius: 1px;
  opacity: 0;
  animation-name: h2h-fall;
  animation-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1);
  animation-fill-mode: forwards;
}

@keyframes h2h-fall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(102vh) rotate(560deg); }
}

/* Respect a reduced-motion preference — no falling pieces, no spin. */
@media (prefers-reduced-motion: reduce) {
  .h2h-confetti { display: none; }
  .h2h-between { animation: none; }
  .h2h-feed-item { animation: none; }
  .h2h-score.just-scored { animation: none; }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .h2h-title { font-size: 1.18rem; }
  .h2h-code { font-size: 1.7rem; }
  .h2h-chip { font-size: 0.76rem; padding: 7px 9px; }
  .h2h-actions { flex-direction: column; }
  .h2h-actions .h2h-primary { width: 100%; }
  .h2h-reveal-answer { font-size: 1.25rem; }
  .h2h-score { font-size: 0.78rem; padding: 5px 10px; }
  .h2h-feed { max-height: 6.5rem; }
}