/* ============================================================
   GamesTourney — styles.css
   Design identity: a dark arcade arena, not a reskin of the
   Values Tournament's calm indigo/cream palette. Two duel colors
   (cyan / magenta), a glowing VS as the signature element, and a
   red danger-zone pulse carry the "stakes" the brief asked for.
   ============================================================ */

:root {
  --bg: #0a0a12;
  --surface: #14141f;
  --surface-hi: #1c1c2c;
  --surface-line: rgba(255, 255, 255, .08);

  --text: #f2f0fa;
  --text-muted: rgba(242, 240, 250, .55);
  --text-dim: rgba(242, 240, 250, .28);

  --side-a: #7d9bb5;          /* left card identity — muted steel-blue, neutral (not a status) */
  --side-a-glow: rgba(125, 155, 181, .4);
  --side-b: #8aa9a0;          /* right card identity — cool slate-grey, faint teal lean; distinct from A's blue, clear of gold */
  --side-b-glow: rgba(138, 169, 160, .4);
  --cold: #a855f7;            /* losing-streak pressure — sickly purple */
  --cold-glow: rgba(168, 85, 247, .45);
  --accent: #00e5ff;          /* app chrome accent (nav, buttons, focus) — not tied to either side */
  --accent-2: #00b8d4;
  --success: #39ff8f;         /* rating went up — independent of which side */
  --success-glow: rgba(57, 255, 143, .4);

  --gold: #ffd23f;
  --silver: #b8c0d0;
  --bronze: #d98a4f;

  --danger: #ff2d55;          /* danger/elimination — deep crimson-pink, distinct from fire orange */
  --danger-dim: rgba(255, 59, 59, .16);

  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --transition: .18s ease;

  --font-display: 'Rajdhani', system-ui, -apple-system, sans-serif;
  --font-num: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow-x: hidden; /* never allow horizontal scroll — vertical-only on mobile */
  max-width: 100%;
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 229, 255, .06), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(255, 46, 136, .06), transparent 45%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100vh; display: flex; flex-direction: column; }
img { max-width: 100%; }
button, input { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-hi); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Topbar ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--surface-line);
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 18, .82);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-mark { width: 24px; height: 24px; color: var(--accent); display: flex; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: .01em; }
.brand-name em { font-style: normal; color: var(--side-b); }

.scoreboard { display: flex; align-items: center; gap: 14px; }
.sb-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.sb-stat strong { font-family: var(--font-num); font-size: 1.05rem; font-weight: 700; color: var(--text); }
.sb-stat em {
  font-style: normal; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}
.sb-divider { width: 1px; height: 22px; background: var(--surface-line); }

.topnav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.navbtn {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .02em;
  background: transparent; border: 1px solid var(--surface-line); color: var(--text);
  padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; font-size: .92rem;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color var(--transition), color var(--transition);
}
.navbtn:hover { border-color: var(--accent); color: var(--accent); }
.navbtn-icon svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ---------- Icons ---------- */

.icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ---------- Main / generic state screens ---------- */

#main { flex: 1; display: flex; flex-direction: column; padding: clamp(20px, 4vw, 48px); }

.state-screen { margin: auto; text-align: center; max-width: 480px; padding: 40px 20px; }
/* ---- Setup / difficulty-choice screen ---- */
.setup-screen { margin: auto; max-width: 720px; padding: 40px 20px; text-align: center; }
.setup-title { font-family: var(--font-display); font-size: 1.9rem; margin: 0 0 8px; color: var(--text); }
.setup-sub { color: var(--text-dim); margin: 0 auto 28px; max-width: 460px; }
.setup-options { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.setup-card {
  flex: 1 1 280px; max-width: 320px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
  background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius);
  color: var(--text); transition: all var(--transition);
}
.setup-card:hover { border-color: var(--accent); background: var(--surface-hi); transform: translateY(-2px); }
.setup-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.setup-card-name .icon { width: 18px; height: 18px; }
.setup-card-rule { font-family: var(--font-display); font-size: .82rem; color: var(--accent); letter-spacing: .03em; text-transform: uppercase; }
.setup-card-desc { font-size: .9rem; color: var(--text-dim); line-height: 1.45; }
/* Hyper difficulty — visually flagged as dangerous. */
.setup-card-hyper .setup-card-rule { color: var(--danger); }
.setup-card-hyper:hover { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger), 0 8px 28px rgba(255,60,80,.18); }
.setup-card-hyper .setup-card-name .icon { color: var(--danger); }
.setup-foot { color: var(--text-muted); font-size: .85rem; max-width: 540px; margin: 0 auto; line-height: 1.5; }
.setup-builder-row { margin-top: 18px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* Mid-tournament difficulty switcher (Settings). */
.difficulty-switch { display: flex; flex-direction: column; gap: 8px; }
.difficulty-option {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 11px 13px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface-hi); border: 1px solid var(--surface-line); color: var(--text);
  transition: all var(--transition);
}
.difficulty-option:hover { border-color: rgba(140,150,255,.45); }
.difficulty-option-active { border-color: var(--success); background: rgba(57,255,143,.07); }
.difficulty-option-active .difficulty-option-name { color: var(--success); }
.difficulty-option-hyper:hover { border-color: var(--danger); background: var(--danger-dim); }
.difficulty-option-hyper.difficulty-option-active { border-color: var(--danger); background: var(--danger-dim); }
.difficulty-option-hyper.difficulty-option-active .difficulty-option-name { color: var(--danger); }
.difficulty-option-name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
.difficulty-option-name em { font-style: normal; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-left: 6px; }
.difficulty-option-desc { font-size: .8rem; color: var(--text-dim); line-height: 1.4; }
.setup-card:disabled { opacity: .4; cursor: not-allowed; }
.setup-card:disabled:hover { border-color: var(--surface-line); box-shadow: none; }
/* Edit mode badge shows the SEED, not a rank (the list is alphabetical there). */
.rank-badge-seed {
  background: var(--surface-hi); color: var(--text-muted);
  border: 1px solid var(--surface-line);
}
.state-screen h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 10px; }
.state-screen p { color: var(--text-muted); line-height: 1.6; margin: 0 0 10px; }
.state-hint { font-size: .85rem; color: var(--text-dim); }
.state-screen-error h1 { color: var(--danger); }

.spinner {
  width: 42px; height: 42px; margin: 0 auto 18px; border-radius: 50%;
  border: 3px solid var(--surface-hi); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Full-screen attention glow overlay (reused by the phase-transition and skip-idle effects). Fixed,
   above the page, ignores clicks. Its gradient/colour is set inline per trigger; this just handles the
   fade in→out. --glow-ms is set by JS so each effect can pick its own duration. */
#page-glow {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0; will-change: opacity;
}
#page-glow.page-glow-on { animation: pageGlowPulse var(--glow-ms, 1500ms) ease-out 1; }
@keyframes pageGlowPulse {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  55%  { opacity: .85; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #page-glow.page-glow-on { animation-duration: .01ms; }
}

code { background: var(--surface-hi); padding: 2px 6px; border-radius: 4px; font-size: .85em; }
kbd {
  background: var(--surface-hi); border: 1px solid var(--surface-line); border-radius: 4px;
  padding: 1px 7px; font-family: var(--font-num); font-size: .78em;
}

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-sm); font-size: .95rem;
  border: 1px solid transparent; cursor: pointer; transition: all var(--transition);
}
.btn .icon { width: 16px; height: 16px; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #001016; }
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--surface-line); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-dim); }

/* ---------- Arena (matchup phase) — the signature moment ---------- */

.arena { margin: auto; width: 100%; max-width: 1040px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.arena-hint-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; }
.arena-hint { color: var(--text-muted); font-size: .9rem; text-align: center; margin: 0; }
/* Subtle phase indicator — small, non-overt; a slight color shift marks the narrowing phase */
.phase-chip {
  display: inline-flex; align-self: center; margin: 0 auto 8px; padding: 2px 11px;
  font-family: var(--font-display); font-size: .64rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; border-radius: 999px; border: 1px solid var(--surface-line);
  color: var(--text-dim); background: var(--surface-hi);
}
.phase-chip-1 { color: var(--text-dim); border-color: var(--surface-line); }
.phase-chip-thinning { color: #6ea8ff; border-color: rgba(110,168,255,.4); background: rgba(110,168,255,.08); }
.phase-chip-2 {
  /* Thinning — a warm amber "culling" identity, visually distinct from Phase 3's cyan. */
  color: #f0b34a; border-color: rgba(240,179,74,.45); background: rgba(240,179,74,.10);
}
.phase-chip-3 {
  /* Deliberation — the cyan "ranking" identity (filled, to read as the more decisive phase). */
  color: var(--bg); border-color: var(--accent); background: var(--accent); font-weight: 700;
  box-shadow: 0 0 12px rgba(0,229,255,.35);
}
/* Attention flash when a NEW phase begins — a strong lift + expanding glow ring, with a second
   smaller pulse so it really catches the eye. Plays only on a real phase transition (JS gates it). */
.phase-chip-flash { animation: phaseChipFlash 1.4s cubic-bezier(.2,.7,.3,1) 1; }
@keyframes phaseChipFlash {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(0,229,255,.0); }
  14%  { transform: scale(1.22); box-shadow: 0 0 0 6px rgba(0,229,255,.40), 0 0 26px 6px rgba(0,229,255,.75); }
  38%  { transform: scale(1);    box-shadow: 0 0 0 14px rgba(0,229,255,.0), 0 0 14px rgba(0,229,255,.3); }
  56%  { transform: scale(1.10); box-shadow: 0 0 0 3px rgba(0,229,255,.30), 0 0 18px 3px rgba(0,229,255,.5); }
  78%  { transform: scale(1);    box-shadow: 0 0 0 10px rgba(0,229,255,.0), 0 0 10px rgba(0,229,255,.2); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(0,229,255,.0); }
}
.phase3-progress { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 6px auto 2px; width: min(300px, 80vw); }
.phase3-progress-bar { width: 100%; height: 5px; border-radius: 999px; background: var(--surface-line); overflow: hidden; }
.phase3-progress-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.phase3-progress-label { font-family: var(--font-display); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.rematch-banner {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 auto 8px; padding: 4px 13px; max-width: fit-content;
  font-family: var(--font-display); font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; border-radius: 999px;
  color: var(--cold); border: 1px solid rgba(125, 211, 252, .35); background: rgba(125, 211, 252, .08);
}
.rematch-banner .icon { width: 13px; height: 13px; }
.challenger-banner {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 10px auto 4px; padding: 6px 16px; max-width: fit-content;
  font-family: var(--font-display); font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; border: 1px solid var(--gold);
  color: var(--gold); background: rgba(255, 210, 63, .08);
  box-shadow: 0 0 18px -6px rgba(255, 210, 63, .6); animation: challenger-pulse 2.2s ease-in-out infinite;
}
.challenger-banner .icon { width: 16px; height: 16px; }
.challenger-silver { border-color: #cbd5e1; color: #cbd5e1; box-shadow: 0 0 18px -6px rgba(203, 213, 225, .5); }
.challenger-bronze { border-color: #d8a05a; color: #d8a05a; box-shadow: 0 0 18px -6px rgba(216, 160, 90, .5); }
@keyframes challenger-pulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* ---- Match Type Chip (below the cards): the single slot for "what kind of match is this" ---- */
/* Reserve a fixed-height band for the match type chip (Sudden Death / Challenger / Rematch), so the
   action buttons and cutoff note below it don't shift up/down as the chip appears between rounds. */
.match-type-chip-zone { min-height: 34px; padding: 8px 0; display: flex; align-items: center; justify-content: center; }
.match-type-chip {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 auto; padding: 6px 16px; max-width: fit-content;
  font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-dim); background: rgba(255,255,255,.03);
}
.match-type-chip .icon { width: 15px; height: 15px; }
/* Challenger variants (gold/silver/bronze) reuse the crown styling + pulse */
.match-type-chip.challenger-gold { border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 18px -6px rgba(255, 210, 63, .6); animation: challenger-pulse 2.2s ease-in-out infinite; }
.match-type-chip.challenger-silver { border-color: #cbd5e1; color: #cbd5e1;
  box-shadow: 0 0 18px -6px rgba(203, 213, 225, .5); animation: challenger-pulse 2.2s ease-in-out infinite; }
.match-type-chip.challenger-bronze { border-color: #d8a05a; color: #d8a05a;
  box-shadow: 0 0 18px -6px rgba(216, 160, 90, .5); animation: challenger-pulse 2.2s ease-in-out infinite; }
.match-type-rematch { color: var(--cold); border-color: rgba(125, 211, 252, .35); background: rgba(125, 211, 252, .08); }
.match-type-suddendeath {
  color: #ff6b6b; border-color: rgba(255, 107, 107, .55); background: rgba(255, 107, 107, .10);
  box-shadow: 0 0 20px -5px rgba(255, 107, 107, .65); animation: challenger-pulse 1.5s ease-in-out infinite;
}

/* ---- Sudden Death phase ---- */
.suddendeath-banner {
  color: #ff6b6b; border-color: rgba(255, 107, 107, .4) !important;
}
.suddendeath-banner .icon { color: #ff6b6b; }
.arena-suddendeath .vs-text { color: #ff6b6b; }
.arena-suddendeath .vs-ring { border-color: rgba(255, 107, 107, .5); box-shadow: 0 0 22px -4px rgba(255,107,107,.55); }

/* ---- Discreet confidence meter on cards (phases 3-4) ---- */
.card-confidence {
  display: flex; align-items: center; gap: 5px; margin-top: 5px;
  font-family: var(--font-display); font-size: .5rem; letter-spacing: .02em;
  color: var(--text-muted); opacity: .55;
}
.card-confidence .conf-label { opacity: .8; text-transform: lowercase; }
.card-confidence .conf-track {
  flex: 1; height: 2px; min-width: 24px; border-radius: 999px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.card-confidence .conf-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--text-muted);
}
.card-confidence .conf-pct { color: var(--text-muted); min-width: 26px; text-align: right; }
/* ---- Match History tab ---- */
.mh-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--surface-line); font-size: .88rem; }
.mh-row:hover { background: var(--surface-hi); }
.mh-num { font-family: var(--font-display); font-size: .68rem; color: var(--text-muted); min-width: 34px; }
.mh-row-thumb { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.mh-winner { font-weight: 600; color: var(--text); }
.mh-beat { color: var(--text-muted); font-size: .78rem; }
.mh-loser { color: var(--text-dim); }
.mh-flags { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.mh-upset, .mh-elim { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; }
.mh-upset { color: var(--gold); background: rgba(255,210,63,.1); }
.mh-elim { color: var(--danger); background: rgba(255,77,79,.1); }
.mh-upset .icon, .mh-elim .icon { width: 11px; height: 11px; }
.mh-row-skip { color: var(--text-muted); }
.mh-skip-label { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: .68rem; text-transform: uppercase; }
.mh-skip-label .icon { width: 12px; height: 12px; }
.mh-skip-pair { color: var(--text-dim); font-size: .82rem; }
.mh-vs { color: var(--text-muted); font-size: .72rem; }

.arena-row { display: flex; align-items: center; justify-content: center; width: 100%; }

.vs-divider {
  position: relative; width: 92px; height: 92px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; z-index: 2; margin: 0 -16px;
}
.vs-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  animation: vsPulse 2.6s ease-in-out infinite;
}
.vs-text {
  position: relative; font-family: var(--font-num); font-weight: 800; font-size: 1.05rem;
  background: linear-gradient(135deg, var(--side-a), var(--side-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: .05em;
}
@keyframes vsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
  50% { box-shadow: 0 0 28px 4px rgba(0, 229, 255, .14), 0 0 28px 4px rgba(157, 107, 255, .1); }
}

.skip-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-hi); border: 1px solid var(--surface-line); color: var(--text-muted);
  font-size: .85rem; font-family: var(--font-body); font-weight: 500;
  padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: all var(--transition);
}
.skip-btn .icon { width: 15px; height: 15px; }
.skip-btn:active { transform: scale(.97); }
/* Idle nudge — after a pause with no input, the Skip button pulses in the SAME cyan accent it uses on
   hover (not a generic white), so it reads as "this button, click me." JS fires it rarely. */
.skip-hint-flash { animation: skipHintFlash 1.4s ease-in-out 1; }
@keyframes skipHintFlash {
  0%, 100% { border-color: var(--surface-line); box-shadow: 0 0 0 0 rgba(0,229,255,0);   color: var(--text-muted); background: var(--surface-hi); }
  50%      { border-color: var(--accent);       box-shadow: 0 0 16px 2px rgba(0,229,255,.45); color: var(--text); background: var(--surface-line); }
}
.tie-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(125, 211, 252, .1); border: 1px solid rgba(125, 211, 252, .4); color: var(--cold);
  font-size: .85rem; font-family: var(--font-body); font-weight: 600;
  padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: all var(--transition);
}
.tie-btn .icon { width: 16px; height: 16px; }
.tie-btn:hover { background: rgba(125, 211, 252, .18); }
.tie-btn:active { transform: scale(.97); }
.rematches-banner { color: var(--cold); border-color: rgba(125, 211, 252, .35); }
.arena-actions {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 4px;
}
.undo-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--accent); font-size: .82rem; font-family: var(--font-body);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.undo-link .icon { width: 15px; height: 15px; }
.undo-link:hover { filter: brightness(1.2); }
.skip-btn:hover { color: var(--text); border-color: var(--accent); background: var(--surface-line); }

/* ---------- Cards ---------- */

.card { background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius-lg); }

.matchup-card {
  position: relative; width: 280px; max-width: 42vw; cursor: pointer; overflow: hidden;
  padding-bottom: 18px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.matchup-card:hover, .matchup-card:focus-visible { transform: translateY(-4px); outline: none; }
.matchup-card.side-a:hover, .matchup-card.side-a:focus-visible {
  border-color: var(--side-a); box-shadow: 0 0 0 1px var(--side-a), 0 18px 40px -16px var(--side-a-glow);
}
.matchup-card.side-b:hover, .matchup-card.side-b:focus-visible {
  border-color: var(--side-b); box-shadow: 0 0 0 1px var(--side-b), 0 18px 40px -16px var(--side-b-glow);
}

.danger-zone { border-color: var(--danger) !important; animation: dangerPulse 1.4s ease-in-out infinite; }
@keyframes dangerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0); }
  50% { box-shadow: 0 0 0 1px var(--danger), 0 0 26px 2px rgba(255, 45, 85, .4); }
}
/* Non-glow danger cue: a diagonal hazard-stripe bar pinned to the card top. Reads as "hazard"
   at a glance and stays legible even when the card ALSO has a fire/undefeated glow. */
.matchup-card.danger-zone::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; z-index: 3;
  background: repeating-linear-gradient(-45deg,
    var(--danger) 0, var(--danger) 9px,
    #1a0008 9px, #1a0008 18px);
  opacity: .92;
}
.danger-tag {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: var(--danger); color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}

/* Crown overlay — top-3 games whose tie group is small enough to be a real placement.
   Sits in its OWN fixed-height band at the top of the slot, ABOVE the streak band, so it (a) stays
   centered over the card, (b) never clips into the undefeated/streak chip, and (c) doesn't shove the
   card down when it appears/disappears (the band is always reserved, just empty when there's no crown). */
.card-crown-zone { height: 36px; display: flex; align-items: center; justify-content: center; }
.card-crown {
  z-index: 4; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
  animation: crownDrop .4s cubic-bezier(.2,1.5,.4,1) both;
  pointer-events: none;
}
.card-crown .icon { width: 34px; height: 34px; }
.crown-gold { color: var(--gold); }
.crown-silver { color: var(--silver); }
.crown-bronze { color: var(--bronze); }
@keyframes crownDrop {
  0% { opacity: 0; transform: translateY(-8px) scale(.6); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Safe-zone rank badge next to the rating */
.card-rank {
  font-family: var(--font-num); font-weight: 700; font-size: .8rem;
  padding: 1px 8px; border-radius: 999px; background: var(--surface-hi); color: var(--text-muted);
}
.card-rank.rank-gold { background: var(--gold); color: #1a1300; }
.card-rank.rank-silver { background: var(--silver); color: #15171c; }
.card-rank.rank-bronze { background: var(--bronze); color: #1a0f04; }

/* ---------- Streak slot wrapper + banners ---------- */

.matchup-slot { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; }
/* Reserve a fixed-height band at the top of each slot for the streak banner, so the card doesn't jump
   up/down as the banner (undefeated/on-fire/cold) appears and disappears between rounds. The banner
   sits in this band; when there's no streak the band is just empty space of the same height. */
.streak-banner-zone { height: 30px; display: flex; align-items: center; justify-content: center; }
.streak-banner {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .04em;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.streak-banner .icon { width: 15px; height: 15px; }
.banner-fire {
  --fire: 0;
  color: #ffc24d; background: rgba(255, 165, 30, calc(0.1 + 0.12 * var(--fire)));
  border: 1px solid rgba(255, 165, 30, calc(0.4 + 0.45 * var(--fire)));
  box-shadow: 0 0 calc(6px * var(--fire)) rgba(255, 150, 20, calc(0.5 * var(--fire)));
}
.banner-fire-hot {
  color: #fff0d0; font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 160, 30, .8);
}
.banner-undefeated {
  color: #0c0a02; background: linear-gradient(135deg, var(--gold), #ffe89c);
  box-shadow: 0 0 18px -2px rgba(255, 210, 63, .55);
}

/* Fire-streak card: warm amber-gold edge + flicker glow (does NOT use the danger red).
   Intensity scales with streak length via --fire (0 at x3 -> 1 by ~x9): a longer streak burns
   brighter, with a larger, more saturated glow and a slightly faster pulse. */
.matchup-card.is-onfire {
  --fire: 0; /* fallback if not set inline */
  border-color: rgba(255, 175, 40, calc(0.55 + 0.4 * var(--fire)));
  animation: fireGlow calc(1.9s - 0.5s * var(--fire)) ease-in-out infinite;
}
@keyframes fireGlow {
  0%, 100% { box-shadow: 0 0 calc(14px + 14px * var(--fire)) calc(-4px + 4px * var(--fire)) rgba(255, 175, 40, calc(0.45 + 0.3 * var(--fire))); }
  50% { box-shadow: 0 0 calc(24px + 26px * var(--fire)) calc(0px + 6px * var(--fire)) rgba(255, 150, 20, calc(0.6 + 0.35 * var(--fire))); }
}
.fire-flicker { animation: fireFlicker 1.1s ease-in-out infinite; transform-origin: center bottom; }
@keyframes fireFlicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  45% { opacity: .8; transform: scale(.93) translateY(.5px); }
  70% { opacity: 1; transform: scale(1.05); }
}

/* Undefeated card: gold aura, overrides fire. Stronger, steadier than the fire glow. */
.matchup-card.is-undefeated {
  border-color: var(--gold);
  animation: undefeatedGlow 2.4s ease-in-out infinite;
}
@keyframes undefeatedGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 210, 63, .5), 0 0 22px -2px rgba(255, 210, 63, .45); }
  50% { box-shadow: 0 0 0 1px rgba(255, 210, 63, .8), 0 0 40px 2px rgba(255, 210, 63, .6); }
}

/* Cold / losing-streak card: sickly purple pressure glow. Distinct from danger-red — this is
   "confidence is collapsing," not "about to be eliminated" (a game can be both). */
.matchup-card.is-cold {
  border-color: var(--cold);
  animation: coldPulse 2s ease-in-out infinite;
}
/* Danger (possible elimination) outranks the cold glow when a game is both. */
.matchup-card.danger-zone.is-cold { border-color: var(--danger); animation: dangerPulse 1.4s ease-in-out infinite; }
@keyframes coldPulse {
  0%, 100% { box-shadow: 0 0 14px -4px var(--cold-glow); }
  50% { box-shadow: 0 0 24px -1px var(--cold-glow); }
}
.banner-cold {
  color: #d8b4fe; background: rgba(168, 85, 247, .14); border: 1px solid rgba(168, 85, 247, .5);
}
.banner-cold .icon { width: 14px; height: 14px; }

/* Ladder-row remove button (small, in the rankings list) */
.bomb-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(6, 6, 9, .55); border: 1px solid var(--surface-line); color: var(--text-muted);
  cursor: pointer; transition: all var(--transition);
}
.bomb-btn:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-dim); }
.bomb-btn:active { transform: scale(.94); }
.bomb-btn .icon { width: 15px; height: 15px; }
/* Ladder-row remove button: larger and rounded-rectangle to mirror the matchup "Remove" bar */
.bomb-btn-row {
  position: static; flex-shrink: 0; margin-left: 6px;
  width: 38px; height: 36px; border-radius: var(--radius-sm);
}
.bomb-btn-row .icon { width: 17px; height: 17px; }

/* ---------- Ladder-as-builder: edit toggle, per-row pencil, and the entry modal ---------- */

.ladder-edit-bar { display: flex; gap: 8px; padding: 0 2px 10px; flex-wrap: wrap; }
.btn-small { padding: 6px 12px; font-size: .82rem; }
.btn-small .icon { width: 15px; height: 15px; }

/* Per-row pencil, sits just left of the remove button and mirrors its shape. */
.edit-btn {
  position: static; flex-shrink: 0; margin-left: 6px;
  width: 38px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 6, 9, .55); border: 1px solid var(--surface-line); color: var(--text-muted);
  cursor: pointer; transition: all var(--transition);
}
.edit-btn:hover { color: var(--accent, #8ea2ff); border-color: rgba(140,150,255,.5); background: rgba(120,140,255,.12); }
.edit-btn:active { transform: scale(.94); }
.edit-btn .icon { width: 17px; height: 17px; }

/* Permanent-delete button (edit mode only) — replaces the bomb button there. Reads as destructive. */
.trash-btn:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-dim); }

/* Entry edit / add modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 4, 8, .72);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-panel {
  width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 10px; border-bottom: 1px solid var(--surface-line);
}
.modal-header h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 0; }
.modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
/* Card preview at the top of the edit modal — a compact, non-interactive matchup card. */
.edit-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.edit-preview-card {
  width: 150px; pointer-events: none; cursor: default;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-hi); border: 1px solid var(--surface-line);
}
.edit-preview-card .card-art { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; }
.edit-preview-card .card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edit-preview-card .card-body { padding: 8px 9px 10px; text-align: center; }
.edit-preview-card .card-title {
  font-size: .82rem; line-height: 1.25; margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.edit-preview-card .seed-stars { font-size: .68rem; }
.edit-preview-card .seed-star.empty { font-size: .62rem; }
.edit-preview-label {
  font-family: var(--font-display); font-size: .55rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-dim);
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-family: var(--font-display); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.field-hint { text-transform: none; letter-spacing: 0; font-size: .7rem; color: var(--text-dim); margin-left: 5px; }
.field-input {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--surface-hi); border: 1px solid var(--surface-line); color: var(--text);
  font-size: .92rem; font-family: inherit;
}
.field-input:focus { outline: none; border-color: rgba(140,150,255,.6); }
.modal-note { font-size: .8rem; color: var(--text-dim); line-height: 1.45; margin: 0; }
.modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 18px 16px; border-top: 1px solid var(--surface-line);
}

/* Dedicated Remove bar below each matchup card — OUTSIDE the vote area so it can't be misclicked
   as a vote. Large, clearly labeled, but visually quiet until hovered. */
.remove-bar {
  width: 100%; height: 38px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: transparent; border: 1px solid var(--surface-line); border-radius: var(--radius-sm);
  color: var(--text-dim); font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .03em; cursor: pointer; transition: all var(--transition);
}
.remove-bar .icon { width: 16px; height: 16px; }
.remove-bar:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-dim); }
.remove-bar:active { transform: scale(.97); }

.card-art { width: 100%; aspect-ratio: 3 / 4; background: var(--surface-hi); overflow: hidden; }
.card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card-body { padding: 14px 16px 0; text-align: center; }
.card-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 0 0 10px;
  min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-rating { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; }
.card-finals-record {
  margin-top: 6px; text-align: center;
  font-family: var(--font-num); font-weight: 700; font-size: 1.05rem; color: var(--text);
}
.card-finals-label {
  font-family: var(--font-display); font-weight: 600; font-size: .52rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); margin-left: 3px;
}
.rating-num { font-family: var(--font-num); font-weight: 700; font-size: 1.7rem; }
.card-record { margin-top: 6px; font-family: var(--font-num); font-size: .85rem; color: var(--text-muted); }
/* "Unrated" pill — replaces the record line until a game has played. A quiet humility flag (this
   rating is just the seed), styled informationally, not like a promotional "NEW" badge. */
.unrated-pill {
  margin-top: 6px; display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  padding: 3px 10px; border-radius: 999px;
}
.record-label {
  font-family: var(--font-body); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-dim); margin-left: 4px;
}

.predict-preview { min-height: 1.4em; margin-top: 8px; font-family: var(--font-num); font-size: .85rem; }
.delta-up { color: var(--success); }
.delta-down { color: var(--danger); margin-left: 2px; }
.delta-vs { color: var(--text-dim); margin: 0 3px; }

/* Danger cutoff readout — subtle grey line under the skip link, not attention-grabbing */
.cutoff-note {
  text-align: center; margin: 10px 0 0;
  font-family: var(--font-num); font-size: .72rem; color: var(--text-dim);
}

/* Final-20 settling banner — marks the last phase clearly, celebratory gold */
.settling-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto 16px; max-width: 540px; padding: 9px 18px;
  background: linear-gradient(135deg, rgba(255,210,63,.14), rgba(255,210,63,.06));
  border: 1px solid rgba(255,210,63,.4); border-radius: var(--radius-sm);
  color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  letter-spacing: .02em; text-align: center;
}
.settling-banner .icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Settling progress bar — sits above the banner to cheer the player toward the finish */
.settle-progress { max-width: 540px; margin: 0 auto 10px; }
.settle-progress-track {
  height: 8px; border-radius: 999px; background: var(--surface-hi);
  border: 1px solid var(--surface-line); overflow: hidden;
}
.settle-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,210,63,.7), var(--gold));
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.settle-progress-label {
  display: block; text-align: center; margin-top: 5px;
  font-family: var(--font-num); font-size: .72rem; color: var(--text-muted);
}

/* Static "a loss drops this game into danger" marker — a quiet amber CAUTION cue (not the
   urgent red of the actual danger zone), always visible, absolutely positioned so it never
   reflows the card. Deliberately understated so it doesn't become red noise on every card. */
.at-risk-tag {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(255, 184, 77, .12); color: #ffb84d;
  border: 1px solid rgba(255, 184, 77, .35);
  font-family: var(--font-display); font-weight: 600; font-size: .58rem; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
}
/* HYPER "Safe" tag — the reassuring inverse of the danger cue: in hyper, danger is the default and
   safe is the exception worth flagging (a game protected from elimination this match). */
.safe-tag {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(57, 255, 143, .12); color: var(--success);
  border: 1px solid rgba(57, 255, 143, .35);
  font-family: var(--font-display); font-weight: 600; font-size: .58rem; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
}
.matchup-card.is-safe { border-color: rgba(57, 255, 143, .4); }

/* ---------- Vote feedback + elimination animation ---------- */

.card-win {
  animation: cardWin .38s ease;
  border-color: var(--success) !important;
  box-shadow: 0 0 0 1px var(--success), 0 0 32px 4px var(--success-glow) !important;
}
@keyframes cardWin {
  0% { transform: scale(1); }
  35% { transform: scale(1.05); }
  100% { transform: scale(1.02); }
}

.card-lose { animation: cardLose .38s ease; opacity: .55; filter: grayscale(.4); }
@keyframes cardLose {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.card-eliminating { animation: cardEliminate .46s ease forwards; }
.card-bombed { animation: cardEliminate .3s ease forwards; }
@keyframes cardEliminate {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.03); box-shadow: 0 0 0 1px var(--danger), 0 0 30px 6px rgba(255, 59, 59, .5); }
  100% { transform: scale(.9) translateY(10px); opacity: 0; }
}

#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.floating-delta {
  position: fixed; transform: translate(-50%, 0);
  font-family: var(--font-num); font-weight: 700; font-size: 1.6rem; pointer-events: none;
  padding: 2px 10px; border-radius: 999px; background: rgba(6, 6, 9, .72);
  animation: floatUp 1.25s ease-out forwards;
}
.floating-up { color: var(--success); text-shadow: 0 0 14px rgba(57, 255, 143, .6); }
.floating-down { color: var(--danger); text-shadow: 0 0 14px rgba(255, 59, 59, .6); }
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.85); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -22px) scale(1); }
}

/* UPSET / COMEBACK event banners — punchy, centered over the winning card */
.event-popup {
  position: fixed; transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; letter-spacing: .05em;
  padding: 4px 15px; border-radius: var(--radius-sm); pointer-events: none; white-space: nowrap;
  animation: eventPop .8s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.event-undefeated {
  color: #1a1300; background: linear-gradient(135deg, #fffbe6, var(--gold));
  box-shadow: 0 0 38px -2px rgba(255, 210, 63, .9);
}
.event-upset {
  color: #0c0a02; background: linear-gradient(135deg, var(--gold), #ffe89c);
  box-shadow: 0 0 30px -4px rgba(255, 210, 63, .7);
}
.event-comeback {
  color: #fff; background: linear-gradient(135deg, var(--cold), #6d28d9);
  box-shadow: 0 0 34px -2px var(--cold-glow);
}
.event-saved {
  color: #052e16; background: linear-gradient(135deg, var(--success), #15803d);
  box-shadow: 0 0 30px -4px var(--success-glow);
}
.event-streak {
  color: #2a0a00; background: linear-gradient(135deg, #ffb347, #ff6b35);
  box-shadow: 0 0 32px -3px rgba(255, 107, 53, .8);
}
.event-unseated {
  color: #fff; background: linear-gradient(135deg, #475569, #1e293b);
  box-shadow: 0 0 30px -4px rgba(100, 116, 139, .7);
}
.event-fallen {
  color: #fff; background: linear-gradient(135deg, #7f1d1d, #450a0a);
  box-shadow: 0 0 30px -4px rgba(127, 29, 29, .7);
}
.event-streak-over {
  color: #fff; background: linear-gradient(135deg, #64748b, #334155);
  box-shadow: 0 0 28px -4px rgba(100, 116, 139, .6);
}
.event-eliminated {
  color: #fff; background: linear-gradient(135deg, var(--danger), #7f1d1d);
  box-shadow: 0 0 40px -2px rgba(255, 59, 59, .85);
  font-size: 1.75rem; letter-spacing: .08em;
}
@keyframes eventPop {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(.4); }
  18% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1.12); }
  32% { transform: translate(-50%, -50%) rotate(-6deg) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -54%) rotate(-6deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) rotate(-6deg) scale(.95); }
}

/* ---------- Overlay panels (Ladder / Graveyard / Settings) ---------- */

.overlay-panel { max-width: 760px; margin: 0 auto; width: 100%; }
.overlay-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.overlay-header h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--surface-line); color: var(--text-muted); cursor: pointer;
  transition: all var(--transition); flex-shrink: 0;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.icon-btn .icon { width: 16px; height: 16px; }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--surface-line); }
.tab {
  background: none; border: none; padding: 10px 4px; margin-right: 20px; color: var(--text-muted);
  font-family: var(--font-display); font-weight: 600; font-size: .98rem; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--text); }
.tab-active { color: var(--accent); border-color: var(--accent); }

.search-row { position: relative; margin-bottom: 14px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-dim); }
.search-input {
  width: 100%; padding: 10px 14px 10px 36px; border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--surface-line); color: var(--text); font-family: var(--font-body); font-size: .92rem;
}
.search-input:focus { outline: none; border-color: var(--accent); }

.rankings-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.rank-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid transparent; transition: border-color var(--transition);
}
.rank-row:hover { border-color: var(--surface-line); }

.rank-badge {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; font-size: .85rem; background: var(--surface-hi); color: var(--text-muted);
}
.badge-gold { background: var(--gold); color: #1a1300; }
.badge-silver { background: var(--silver); color: #15171c; }
.badge-bronze { background: var(--bronze); color: #1a0f04; }

.rank-thumb { width: 34px; height: 46px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: var(--surface-hi); }
.rank-name-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.rank-name { font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name-sub { font-family: var(--font-num); font-size: .68rem; color: var(--text-dim); line-height: 1; }
.tied-tag {
  font-size: .65rem; color: var(--text-dim); border: 1px solid var(--surface-line);
  padding: 1px 7px; border-radius: 999px; margin-left: 6px; text-transform: uppercase; letter-spacing: .04em;
}
.rank-record { font-family: var(--font-num); font-size: .82rem; color: var(--text-muted); flex-shrink: 0; width: 58px; text-align: right; white-space: nowrap; }
.rank-record-finals { color: var(--text); font-weight: 700; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; width: 58px; flex-shrink: 0; }
.rank-record-num { white-space: nowrap; }
.rank-record-label { font-size: .58rem; font-weight: 400; color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; }.rank-rating { font-family: var(--font-num); font-weight: 700; font-size: .95rem; flex-shrink: 0; width: 50px; text-align: right; }

.rank-row-grave { opacity: .82; }
.rank-row-bombed { opacity: .82; }

/* Ladder zone dividers — danger (bottom cutoff) and safe (top finishers) */
.ladder-divider {
  display: flex; align-items: center; gap: 12px; margin: 10px 2px 6px; user-select: none;
}
.divider-line { flex: 1; height: 1px; }
.divider-label {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.divider-label .icon { width: 14px; height: 14px; }
.danger-line { background: linear-gradient(to right, transparent, var(--danger), transparent); opacity: .55; }
.danger-label { color: var(--danger); }
.safe-line { background: linear-gradient(to right, transparent, var(--success), transparent); opacity: .55; }
.safe-label { color: var(--success); }

.rank-row-inzone { background: linear-gradient(to right, rgba(255, 59, 59, .06), transparent 70%); }
.rank-row-insafe { background: linear-gradient(to right, rgba(57, 255, 143, .05), transparent 70%); }
/* Unrated (0-0) ladder row: a faint, ambient white tint — quietly signals "unproven" without the
   weight of the red/green status tints. Small inline "Unrated" tag mirrors the matchup-card pill. */
.rank-row-unrated { background: linear-gradient(to right, rgba(255, 255, 255, .055), transparent 75%); }
.unrated-tag {
  font-size: .62rem; color: var(--text-muted); border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  padding: 1px 7px; border-radius: 999px; margin-left: 6px; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
}
.rank-record-unrated { color: var(--text-dim); }

/* Ladder streak markers next to the title */
.ladder-streak {
  display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-num);
  font-weight: 700; font-size: .72rem; padding: 1px 7px; border-radius: 999px; margin-left: 4px;
  vertical-align: middle;
}
.ladder-streak .icon { width: 12px; height: 12px; }
.streak-undefeated { color: #0c0a02; background: linear-gradient(135deg, var(--gold), #ffe89c); }
.streak-fire { color: #ffb43f; background: rgba(255, 140, 40, .14); border: 1px solid rgba(255, 140, 40, .4); }
.streak-cold { color: #d8b4fe; background: rgba(168, 85, 247, .14); border: 1px solid rgba(168, 85, 247, .45); }
.row-undefeated { box-shadow: inset 2px 0 0 var(--gold); }
.row-fire { box-shadow: inset 2px 0 0 rgba(255, 140, 40, .8); }
.row-cold { box-shadow: inset 2px 0 0 var(--cold); }
.bombed-icon { color: var(--danger); }
.grave-icon { color: var(--text-dim); width: 18px; flex-shrink: 0; }
.grave-tag { font-size: .65rem; padding: 2px 9px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; }
.grave-tag-eliminated { background: var(--danger-dim); color: var(--danger); }
.grave-tag-bombed { background: var(--surface-hi); color: var(--text-muted); }

.empty-note { color: var(--text-dim); text-align: center; padding: 30px 0; }

/* ---------- Settings ---------- */

.settings-section { padding: 18px 0; border-bottom: 1px solid var(--surface-line); }
.settings-section:last-child { border-bottom: none; }
.settings-section h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 6px; }

/* Add-a-game form */
.add-game-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.add-field { display: flex; flex-direction: column; gap: 5px; }
.add-label { font-size: .8rem; color: var(--text-muted); font-weight: 500; }
.add-label em { font-style: normal; color: var(--text-dim); font-weight: 400; font-size: .92em; }
.add-input {
  background: var(--surface-hi); border: 1px solid var(--surface-line); border-radius: var(--radius-sm);
  color: var(--text); font-size: .92rem; padding: 10px 12px; font-family: var(--font-body); width: 100%;
  transition: border-color var(--transition);
}
.add-input:focus { outline: none; border-color: var(--accent); }
.add-game-form .btn { align-self: flex-start; }
.add-feedback { font-size: .85rem; margin: 2px 0 0; min-height: 1.1em; }
.add-feedback-ok { color: var(--success); }
.add-feedback-error { color: var(--danger); }
.settings-note { color: var(--text-muted); font-size: .88rem; line-height: 1.6; margin: 0 0 12px; }
.settings-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.settings-danger h2 { color: var(--danger); }

/* Advanced (developer) settings + the optional on-screen pressure debug readout */
.settings-advanced h2 { color: var(--text-muted); }
.advanced-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; color: var(--text-muted); }
.advanced-toggle input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.pressure-debug {
  text-align: left; margin: 8px auto 0; max-width: 96%;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: .82rem; color: #d8faff;
  opacity: 1; letter-spacing: .005em; line-height: 1.65;
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px; border: 1px solid rgba(0,229,255,.35); border-radius: 10px;
  background: rgba(0,20,28,.72);
}
.pressure-debug .dbg-line { display: block; white-space: normal; word-break: break-word; }

/* ---------- Results (Top 10) ---------- */

.champion-screen { display: flex; flex-direction: column; align-items: center; }
.results-screen { max-width: 620px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; }
.champion-trophy { width: 50px; height: 50px; color: var(--gold); filter: drop-shadow(0 0 16px rgba(255, 210, 63, .5)); margin-bottom: 6px; }
.champion-eyebrow {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-size: .8rem; margin: 0 0 18px;
}

.champion-card {
  display: flex; gap: 18px; align-items: center; width: 100%;
  background: linear-gradient(135deg, rgba(255, 210, 63, .08), var(--surface));
  border: 1px solid rgba(255, 210, 63, .4); border-radius: var(--radius-lg);
  padding: 16px; margin-bottom: 18px; box-shadow: 0 0 40px -14px rgba(255, 210, 63, .4);
}
.champion-card .champion-art {
  width: 110px; flex-shrink: 0; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--surface-line); margin: 0;
}
.champion-art img { width: 100%; height: 100%; object-fit: cover; }
.champion-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.champion-badge {
  align-self: flex-start; font-family: var(--font-num); font-weight: 700; font-size: .8rem;
  background: var(--gold); color: #1a1300; padding: 2px 10px; border-radius: 999px;
}
.champion-title { font-family: var(--font-display); font-size: 1.7rem; margin: 2px 0 0; line-height: 1.1; }
.champion-stats { color: var(--text-muted); font-size: .9rem; margin: 0; }

.results-list { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.result-row {
  display: flex; align-items: center; gap: 14px; padding: 8px 12px;
  background: var(--surface); border: 1px solid transparent; border-radius: var(--radius-sm);
}
.result-rank { font-family: var(--font-num); font-weight: 700; font-size: .95rem; color: var(--text-muted); width: 24px; text-align: center; flex-shrink: 0; }
.result-name { flex: 1; font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-record { font-family: var(--font-num); font-size: .82rem; color: var(--text-muted); flex-shrink: 0; }
.result-rating { font-family: var(--font-num); font-weight: 700; font-size: .95rem; flex-shrink: 0; width: 48px; text-align: right; }
.results-footnote { color: var(--text-dim); font-size: .82rem; margin: 18px 0; text-align: center; }

/* Result rows are tappable to view match history */
.result-row[data-action] { cursor: pointer; }
.result-row[data-action]:hover { background: var(--surface-hi); }
.champion-card[data-action] { cursor: pointer; }

/* Results view: finalist record primary + overall record secondary (mirrors the ladder's endgame). */
.result-name-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.result-name-wrap .result-name { flex: none; }
.result-name-sub { font-family: var(--font-num); font-size: .72rem; color: var(--text-dim); }
.result-record { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.result-record-num { font-family: var(--font-num); font-weight: 700; font-size: .92rem; color: var(--text); white-space: nowrap; }
.result-record-label {
  font-family: var(--font-display); font-size: .54rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}
.champion-stats .tied-tag, .result-name .tied-tag {
  font-family: var(--font-display); font-size: .55rem; letter-spacing: .05em; text-transform: uppercase;
  background: var(--surface-hi); color: var(--text-muted); border: 1px solid var(--surface-line);
  padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}

/* Co-champions: a first-place tie the finals couldn't split → show winners side by side. */
.champion-zone { width: 100%; }
.champion-zone-co { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
/* Prominent "play another round" call-to-action, shown right under the champion when ranks are tied. */
.another-round-cta {
  width: 100%; box-sizing: border-box; margin: 4px 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(120,140,255,.10), rgba(120,140,255,.04));
  border: 1px solid rgba(140,150,255,.30);
}
.another-round-text { display: flex; flex-direction: column; gap: 3px; min-width: 200px; flex: 1; }
.another-round-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text); }
.another-round-sub { font-size: .86rem; color: var(--text-dim); line-height: 1.4; }
.another-round-btn { flex-shrink: 0; white-space: nowrap; }
.champion-zone-co .champion-card { flex: 1 1 260px; margin-bottom: 0; }
.champion-card-co .champion-art { width: 84px; }
.champion-card-co .champion-title { font-size: 1.35rem; }
.champion-card-co .champion-badge { background: linear-gradient(135deg, var(--gold), #ffe08a); }

/* Match-history modal */
.mh-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 5, 8, .72); backdrop-filter: blur(3px); padding: 20px; animation: mhFade .15s ease;
}
@keyframes mhFade { from { opacity: 0; } to { opacity: 1; } }
.mh-panel {
  position: relative; width: 100%; max-width: 420px; max-height: 80vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius);
  padding: 22px; box-shadow: 0 24px 60px -12px rgba(0,0,0,.6);
}
.mh-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--surface-hi); border: 1px solid var(--surface-line); color: var(--text-muted); cursor: pointer;
}
.mh-close:hover { color: var(--text); }
.mh-close .icon { width: 16px; height: 16px; }
.mh-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; padding-right: 36px; }
.mh-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.mh-title { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 3px; }
.mh-sub { color: var(--text-muted); font-size: .82rem; margin: 0; font-family: var(--font-num); }
.mh-list { display: flex; flex-direction: column; gap: 2px; }
.mh-row {
  display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--surface-hi);
}
.mh-outcome { flex-shrink: 0; width: 74px; font-family: var(--font-display); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.mh-win .mh-outcome { color: var(--success); }
.mh-loss .mh-outcome { color: var(--danger); }
.mh-tie .mh-outcome { color: var(--accent); }
.mh-skip .mh-outcome { color: var(--text-muted); }
.mh-skip .mh-opp { color: var(--text-dim); }
.mh-opp { font-size: .9rem; color: var(--text); }
.mh-empty { color: var(--text-dim); font-size: .88rem; text-align: center; padding: 12px 0; }

/* History icon button on matchup cards */
.card-history-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px solid var(--accent);
  background: rgba(0,229,255,.16); color: var(--accent); cursor: pointer;
  box-shadow: 0 0 0 0 rgba(0,229,255,.4);
  backdrop-filter: blur(2px); transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .2s ease;
  animation: historyBtnPulse 2.6s ease-in-out infinite;
}
.card-history-btn:hover {
  background: var(--accent); color: var(--bg); border-color: var(--accent);
  box-shadow: 0 0 14px 2px rgba(0,229,255,.55); transform: scale(1.08); animation: none;
}
.card-history-btn:active { transform: scale(.94); }
.card-history-btn .icon { width: 18px; height: 18px; }
/* Gentle breathing pulse so the history affordance is noticeable without nagging (stops on hover). */
@keyframes historyBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,229,255,0); }
  50%      { box-shadow: 0 0 10px 1px rgba(0,229,255,.35); }
}
@media (prefers-reduced-motion: reduce) {
  .card-history-btn { animation: none; }
}

/* End-of-tournament superlatives — understated fact rows, label + stat */
.superlatives {
  width: 100%; max-width: 560px; margin: 28px auto 8px;
  border-top: 1px solid var(--surface-line); padding-top: 20px;
}
.superlatives-heading {
  font-family: var(--font-display); font-size: .9rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; text-align: center;
}
.superlative {
  display: flex; align-items: baseline; gap: 14px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.superlative:last-child { border-bottom: none; }
.superlative-label {
  flex-shrink: 0; width: 150px; font-family: var(--font-display); font-weight: 600; font-size: .76rem;
  letter-spacing: .03em; color: var(--accent); text-transform: uppercase;
}
.superlative-text { font-size: .9rem; color: var(--text); line-height: 1.4; }
@media (max-width: 560px) {
  .superlative { flex-direction: column; gap: 2px; }
  .superlative-label { width: auto; }
}

.champion-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .scoreboard { display: none; }
  .topbar { gap: 12px; }
  .arena-row { flex-direction: column; gap: 10px; width: 100%; }
  .matchup-slot { width: 100%; max-width: 360px; }
  .vs-divider { margin: -6px 0; width: 60px; height: 60px; }
  .vs-text { font-size: .85rem; }
  .matchup-card { width: 100%; max-width: 360px; }
  .rank-record { display: none; }
  .champion-card { flex-direction: column; text-align: center; }
  .champion-card .champion-meta { align-items: center; }
  .champion-badge { align-self: center; }
}

@media (max-width: 420px) {
  .card-title { font-size: .95rem; }
  .rating-num { font-size: 1.4rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Seed rating shown as 1-5 stars on the matchup card (half-stars supported) — subtle, muted. */
.seed-stars { display: flex; justify-content: center; gap: 1px; margin: 2px 0 6px; font-size: .85rem; line-height: 1; opacity: .55; }
.seed-star { color: var(--surface-line); position: relative; }
.seed-star.full { color: var(--text-dim); }
.seed-star.half { color: var(--surface-line); }
.seed-star.half::before { content: '★'; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--text-dim); }
.seed-star.empty { color: var(--surface-line); }

/* Favored-seed heart — small overlay in the bottom-left corner of the card. */
.favored-heart { position: absolute; left: 8px; bottom: 8px; z-index: 3; display: inline-flex; color: #ff7a9c; opacity: .85; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); pointer-events: none; }
.favored-heart svg { width: 18px; height: 18px; }


/* ============================================================================
   COMPACT ARENA — fit the whole match (bars, cards, actions) on one screen so
   the skip/undo buttons don't require scrolling and the progress bar can't slide
   above the sticky topbar. Tightens vertical rhythm without shrinking hit areas.
   ============================================================================ */
#main { padding: clamp(10px, 2vh, 20px) clamp(16px, 4vw, 40px); justify-content: center; overflow: hidden; }
.arena { gap: 12px; }
.card-crown-zone { height: 26px; }
.streak-banner-zone { min-height: 22px; }
/* Cap card art so two cards + chrome fit in the viewport height. Uses a height cap
   rather than aspect-ratio so tall screens still look generous but short ones fit. */
/* Cap card art so two cards + chrome fit in the viewport height, but show the WHOLE box art
   (contain, not cover) so nothing important gets cropped. A subtle fill sits behind the letterbox. */
.matchup-card .card-art { aspect-ratio: auto; height: min(46vh, 360px); background: var(--surface-hi); }
.matchup-card .card-art img { object-fit: contain; }
.matchup-card { padding-bottom: 12px; }
.card-body { padding-top: 8px; padding-bottom: 8px; gap: 4px; }
.card-title { min-height: 0; margin-bottom: 2px; }
.arena-actions { margin-top: 2px; }
/* Keep the phase progress/chip within the arena flow and never let it escape upward. */
.arena-hint-wrap { position: relative; z-index: 1; }

/* Tie row in match history */
.mh-tie-label { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: .68rem; text-transform: uppercase; color: #c9a227; }
.mh-row-tie { opacity: .9; }

/* Finalists Bracket banner — gold, celebratory */
.bracket-banner { color: #ffd479; border-color: rgba(255,212,121,.4); background: rgba(255,212,121,.08); }
.tiebreak-banner { color: #a9b4c9; border-color: rgba(169,180,201,.35); background: rgba(169,180,201,.06); }
.tiebreak-banner .icon { color: #a9b4c9; }
.bracket-banner .icon { color: #ffd479; }