:root {
  --bg: #0d1321;
  --card: #1a2236;
  --card2: #232d47;
  --text: #e8ecf5;
  --muted: #8a94ad;
  --accent: #37d67a;
  --accent2: #ffd166;
  --danger: #ff6b6b;
  --border: #2c3854;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
}
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
}
header h1 { font-size: 20px; margin: 0; }
header .sub { font-size: 13px; color: var(--muted); font-weight: normal; margin-left: 8px; }
/* Logo lockup: icon + wordmark + "Classic" pill in one row. Overrides the
   generic header h1/.sub rules above (gap replaces the old margin-left). */
h1.brand { display: flex; align-items: center; gap: 8px; }
.brand-icon { flex-shrink: 0; }
.brand-text { font-size: 20px; font-weight: 800; letter-spacing: 0.5px; }
.brand-pill {
  font-size: 11px; font-weight: 600; color: var(--accent2);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 9px;
  text-transform: uppercase; letter-spacing: 1px;
}
h1.brand .sub { margin-left: 4px; }
.header-right { display: flex; align-items: center; gap: 12px; }
/* Audio button + slider are one logical control: keep them as a single flex unit
   so they always wrap together (the slider never gets orphaned onto its own line).
   The 12px gap matches the header-right gap, so desktop layout is unchanged. */
.audio-group { display: inline-flex; align-items: center; gap: 12px; }
#room-badge { color: var(--muted); display: flex; align-items: center; gap: 8px; min-width: 0; }
/* The badge body is one coherent pill (tone step up from the header bar);
   the exit button stays a sibling so its destructive state reads on its own. */
.room-badge-pill {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px;
}
.room-badge-name {
  max-width: clamp(120px, 22vw, 400px); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 700; color: var(--text);
}
.room-badge-sep { width: 1px; height: 14px; background: var(--border); flex: 0 0 auto; }
.room-badge-me { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(60px, 14vw, 200px); }
.room-badge-pill .pill { margin-left: 2px; }
/* The native arrow hugs the right border whatever the padding, so draw our own. */
#lang-select { appearance: none; -webkit-appearance: none; background: var(--card2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a94ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  padding: 5px 28px 5px 10px; font-size: 13px; }
/* The header toggle is out of reach under the full-screen overlays (and
   scrolled away on long pages), so the draw and replay heads carry their
   own copy, kept in sync by main.js. */
#audio-toggle, .overlay-audio { padding: 6px 8px; font-size: 16px; background: none; border: none; cursor: pointer;
  line-height: 1; border-radius: 8px; min-width: 36px; min-height: 36px; }
#audio-toggle:hover, .overlay-audio:hover { background: var(--card2); border-color: transparent; }
/* Reset the global input padding so the track reaches both ends of the element,
   eliminating the dead zone that appeared because the browser respects
   padding when positioning the thumb track. */
input[type="range"] { padding: 0; border: none; background: none; accent-color: var(--accent); }
#audio-volume { width: 70px; vertical-align: middle; cursor: pointer; }
.pill {
  background: var(--card2); border: 1px solid var(--border);
  padding: 2px 10px; border-radius: 12px; font-size: 12px; margin-left: 8px;
}
/* Narrow viewports (mobile — primary use case): the header-right controls don't
   fit on one row. Allow the row to wrap and reorganize as two tidy lines —
   the room badge on top, the controls (audio group + language) beneath it —
   instead of squeezing everything together. The audio button+slider stay glued
   as .audio-group so the slider can't break onto a line by itself. */
@media (max-width: 520px) {
  header { flex-wrap: wrap; gap: 8px 0; padding: 12px 16px; }
  .header-right { flex-wrap: wrap; justify-content: flex-end; gap: 10px 12px; }
  #room-badge { flex-basis: 100%; justify-content: flex-end; }
  #audio-volume { width: 56px; }
}
/* Below desktop the subtitle only competes with the badge + controls for the
   header row; the title alone carries the identity. Wider than the other
   breakpoints because the two header links (Ko-fi, Discord) take room too. */
@media (max-width: 1100px) { header .sub { display: none; } }
main { max-width: 1220px; margin: 0 auto; padding: 18px; }
.hidden { display: none !important; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; margin-bottom: 14px;
}

/* ── Design system base classes ──────────────────────────────────────────
   Depth comes from a TONE STEP, not shadows:
     --bg (canvas) → .card (--card, L1 surface) → .panel (--card2, sub-block).
   .panel is the nested sub-block / row / input group used inside a .card.
   .stat-label (defined further down) is the canonical sub-block header.
   .accent-edge marks ONE hero surface per view with an identity stripe.
   --accent2 (gold) is for numbers / values / active states only — never chrome. */
.panel {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
/* Identity accent: a single protagonist surface per view carries a 3px edge.
   Pair with one of the two modifiers; never stack both on the same element. */
.accent-edge { border-top: 3px solid var(--accent); }
.accent-edge-left { border-left: 4px solid var(--accent); }
/* Utilities that replace scattered inline style="" in markup/JS. */
.row-between { justify-content: space-between; }
.row-start { justify-content: flex-start; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.full { width: 100%; }

.center-card { max-width: 520px; margin: 60px auto; text-align: center; }
.center-card input { width: 100%; margin-bottom: 10px; }
.minutes-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 12px; font-size: 14px; }
.minutes-row input { width: 70px; margin: 0; text-align: center; }
.minutes-row .hint { flex-basis: 100%; }
.row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.or { color: var(--muted); }

/* ── Home rework ── */
.home-card {
  max-width: 640px;
  border-top: 3px solid var(--accent);
  text-align: left;
}
.home-hero { margin-bottom: 18px; }
.home-hero h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.35; }
.home-blurb { margin: 0; line-height: 1.5; }
.home-teams-link { margin: 14px 0 0; text-align: center; }
.home-teams-link a { color: var(--accent); text-decoration: none; }
.home-teams-link a:hover { text-decoration: underline; }
.home-name-input { display: block; width: 100%; margin-bottom: 18px; }

/* Voluntary support button in the header (support.js): always in view, shaped
   like the badge pill next to it, and labelled only while there is room. */
.support-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--accent); background: var(--card2); border: 1px solid var(--accent);
  text-decoration: none; transition: background .15s, color .15s, transform .15s;
}
.support-btn:hover { background: var(--accent); color: var(--bg); transform: translateY(-1px); }
.support-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Both header links (Ko-fi, Discord) drop their label before the room badge and
   the exit button start to truncate or wrap; the tooltip and .sr-only keep the name. */
@media (max-width: 1280px) {
  .support-cta { display: none; }
  .support-btn { padding: 5px 9px; }
}
#community-link { padding: 5px 9px; }
#btn-room-exit { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .support-btn, .support-btn:hover { transition: none; transform: none; } }

/* Two-panel row */
.home-panels {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.home-panel {
  flex: 1;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.home-panel input { width: 100%; margin: 0; }
.home-panel-label {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

/* Advanced <details> inside create panel */
.home-advanced {
  font-size: 13px;
}
.home-advanced summary {
  cursor: pointer;
  color: var(--muted);
  list-style: none;
  padding: 4px 0;
  user-select: none;
}
.home-advanced summary::-webkit-details-marker { display: none; }
.home-advanced summary::before {
  content: "▸ ";
  font-size: 10px;
}
.home-advanced[open] summary::before { content: "▾ "; }
.home-adv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 8px;
}
.home-adv-row input { width: 64px; flex: 0 0 64px; text-align: center; margin: 0; }
.home-advanced .hint { margin: 2px 0 0; }
.home-speed { display: flex; align-items: center; gap: 6px; }
.home-adv-row .home-speed input { width: 96px; flex: 0 0 96px; }
.home-speed output { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* Primary button fills the panel width */
.home-action-btn { width: 100%; margin-top: auto; }

/* Divider between panels */
.home-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  position: relative;
}
.home-divider::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  border-left: 1px solid var(--border);
}
.home-divider .or {
  background: var(--card);
  padding: 4px 0;
  z-index: 1;
  position: relative;
  font-size: 13px;
}

/* Join panel: code input and button fill width, code is centered */
.home-code-input {
  width: 100% !important;
  text-align: center;
}

/* Responsive: stack panels vertically on narrow screens */
@media (max-width: 520px) {
  .home-card { max-width: 100%; }
  .home-blurb { white-space: normal; }
  .home-panels { flex-direction: column; }
  .home-divider {
    flex-direction: row;
    padding: 10px 0;
  }
  .home-divider::before {
    top: 50%; bottom: auto;
    left: 0; right: 0;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .home-divider .or { padding: 0 10px; }
}

input, select, button {
  background: var(--card2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px; font-size: 14px;
}
input:focus, select:focus { outline: 1px solid var(--accent); }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #08220f; font-weight: 700; border: none; }
button.primary:disabled { background: #2b4a37; color: #6d8a78; cursor: not-allowed; }
button.danger { background: var(--danger); color: #2a0606; font-weight: 700; border: none; }
.code-input { width: 110px; text-transform: uppercase; letter-spacing: 3px; text-align: center; }
.big-code { font-size: 28px; letter-spacing: 6px; color: var(--accent2); }
.error { color: var(--danger); min-height: 1em; }
.hint { color: var(--muted); font-size: 13px; }

.player-list { list-style: none; padding: 0; margin: 0; }
.player-list li { padding: 6px 0; border-bottom: 1px solid var(--border); }

/* ── Lobby ── */
.lobby-card { text-align: left; }
.lobby-card h2 { margin-top: 0; }
.lobby-code-panel {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; margin-bottom: 12px;
}
.lobby-players-panel {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; margin-bottom: 14px;
}
.lobby-players-panel .stat-label { display: block; }
.lobby-players-panel .player-list { width: 100%; }
.lobby-players-panel .player-list li {
  padding: 8px 2px;
  border-bottom: 1px solid var(--border);
}
.lobby-players-panel .player-list li:last-child { border-bottom: none; padding-bottom: 0; }
.lobby-card #btn-start { width: 100%; }

/* banner */
.banner {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; border-left: 4px solid var(--accent);
}
.banner h2 { margin: 0; font-size: 17px; }
.banner .hint { margin: 2px 0 0; }
/* Champion (finished) state: sober gold identity edge — gold marks the
   standout outcome, matching its use for values/highlights elsewhere. */
.banner-champion { border-left-color: var(--accent2); }
.banner-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.banner-info h2 { margin-bottom: 2px; }
/* Ready roster as chips on the card2 tone step instead of a bullet-joined line. */
.ready-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ready-chip {
  background: var(--card2); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.ready-chip.is-ready { color: var(--text); border-color: var(--accent); }
.banner-stats { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.stat-box { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.stat-big { font-size: 20px; font-weight: 800; color: var(--accent2); }
/* Transfer window info row: 4 label+value pairs separated by thin dividers.
   Lives in a .panel so it reads as a distinct sub-block within the card. */
.tr-info-row { display: flex; align-items: center; padding: 8px 14px; margin: 8px 0; }
.tr-info-item { display: flex; align-items: baseline; gap: 8px; flex: 1; padding: 0 14px; }
.tr-info-item:first-child { padding-left: 0; }
.tr-info-item:last-child  { padding-right: 0; }
.tr-info-sep { width: 1px; height: 24px; background: var(--border); flex: 0 0 auto; }
.tr-info-val { font-weight: 700; font-size: 15px; color: var(--accent2); }
.tr-info-muted { color: var(--muted); }
/* Mobile: the 4 transfer rules can't sit on one row on a phone — lay them out
   as a tidy 2×2 grid of label+value pairs (coherent with the stat-boxes) and
   drop the vertical dividers, which only read in a single row. Desktop keeps
   the one-row layout. */
@media (max-width: 520px) {
  .tr-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 10px 12px; }
  .tr-info-item { padding: 0; }
  .tr-info-sep { display: none; }
}

.market-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.market-header h2 { margin: 0 0 2px; font-size: 17px; }
.market-numbers { display: flex; gap: 18px; }
/* On mobile the numbers wrap below the title; keep them evenly spread and
   left-aligned with the title rather than bunched. */
@media (max-width: 520px) {
  .market-numbers { width: 100%; justify-content: space-between; gap: 10px; }
}
.timer { font-size: 22px; font-weight: 800; color: var(--accent2); font-variant-numeric: tabular-nums; }
.timer.urgent { color: var(--danger); }

/* minmax(0, …) not bare fr: a bare 1fr is minmax(auto, 1fr), so the column can
   never shrink below its content's min width — the nowrap player table pushed
   the whole page to ~590px on a 390px phone. */
.market-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 980px) { .market-grid { grid-template-columns: minmax(0, 1fr); } }

.filters { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.filters input { flex: 1; min-width: 140px; }
.pool-table-wrap { max-height: 620px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--card); z-index: 1; }
/* Sortable column headers carry the pointer affordance on the class itself,
   so the cursor no longer needs an inline style at each call site. */
th.sortable { cursor: pointer; }
tr:hover td { background: var(--card2); }
tr[draggable="true"] { cursor: grab; }
/* Mobile: pool tables (draft + transfers, 6–7 cols) scroll horizontally rather
   than crushing every column and stacking rows three lines tall. Rows stay
   single-line; a min-width floor keeps the columns readable. Scoped to
   .pool-table-wrap, so the leaderboard and group tables (not wrapped) keep
   their fluid full-width layout untouched. */
@media (max-width: 520px) {
  .pool-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pool-table-wrap table { min-width: 460px; }
  .pool-table-wrap th, .pool-table-wrap td { white-space: nowrap; }
}
.pos-badge {
  display: inline-block; width: 38px; text-align: center; font-size: 11px;
  font-weight: 700; border-radius: 6px; padding: 2px 0;
}
.pos-GK { background: #6c5ce7; } .pos-DEF { background: #0984e3; }
.pos-MID { background: #00b894; color: #04301f; } .pos-FWD { background: #d63031; }
.ovr { font-weight: 700; color: var(--accent2); }
.delta-up { color: var(--accent); font-weight: 700; font-size: 12px; }
.delta-down { color: var(--danger); font-weight: 700; font-size: 12px; }
.clicky { cursor: pointer; text-decoration: underline dotted var(--muted); }
/* With a mouse, the dotted underline only on hover — tables full of it read as
   noise. Touch has no hover, so there it stays as the "tappable" cue. */
@media (hover: hover) {
  .clicky { text-decoration-color: transparent; }
  .clicky:hover { text-decoration-color: var(--muted); }
}

/* Transfers — the Plan is its own full-width card below the pitch + buy list.
   Each line pairs two compact panels (OUT → IN) so the swap reads as a unit
   instead of being stretched edge-to-edge. */
#t-plan-card:empty { display: none; }
.squad-toolbar { margin-bottom: 12px; }
/* All lines share one grid so the OUT / arrow / IN / actions columns line up
   across rows, and the actions never wrap to a row of their own. */
.plan-lines {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto minmax(0, max-content) auto;
  align-items: center;
  gap: 14px 12px;
}
.plan-line { display: contents; }
.plan-slot {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--card2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
}
.plan-slot-out { border-left-color: var(--danger); }
.plan-slot-in { border-left-color: var(--accent); }
.plan-slot-in.empty { border-left-color: var(--muted); border-left-style: dashed; }
.plan-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.plan-arrow { color: var(--muted); font-weight: 700; text-align: center; }
.plan-price { color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-actions { display: flex; gap: 6px; align-items: center; }
.plan-controls { margin-top: 16px; justify-content: flex-start; gap: 8px; }
/* Narrow / single-column: drop the shared grid and stack each line as a
   wrapping flex row at full width, so nothing overflows. */
@media (max-width: 980px) {
  .plan-lines { display: block; }
  .plan-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
  .plan-line + .plan-line { border-top: 1px solid var(--border); }
  .plan-arrow { display: none; }
  .plan-slot { flex: 1 1 100%; }
  .plan-actions { width: 100%; justify-content: flex-end; }
}

/* Transfers layout: pitch + plan stacked on the left; the buy list on the
   right stretches to match the left column's height and scrolls internally,
   so it never sits as a short box beside a tall column. */
.transfers-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Inside the transfers grid the column gap handles spacing, so drop the cards'
   default bottom margin — otherwise the left column's height includes a stray
   14px below the plan card and the buy list ends lower than it. */
#tab-transfers .market-grid .card { margin-bottom: 0; }
#tab-transfers .market-grid > .card {
  display: flex; flex-direction: column;
  height: 0; min-height: 100%;
  overflow: hidden;
}
#tab-transfers .market-grid > .card .pool-table-wrap {
  flex: 1; max-height: none; min-height: 0;
}
@media (max-width: 980px) {
  /* single column: let the list fall back to its natural capped height */
  #tab-transfers .market-grid > .card { height: auto; min-height: 0; }
  #tab-transfers .market-grid > .card .pool-table-wrap { max-height: 620px; }
}

/* pitch + shirts — half a football field: goal at the top (GK row),
   halfway line + center circle at the bottom (FWD row) */
.pitch {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba(255,255,255,.26)' stroke-width='.7'%3E%3Crect x='1.5' y='1.5' width='97' height='97'/%3E%3Cpath d='M38 98.5 A12 12 0 0 1 62 98.5'/%3E%3Crect x='21' y='1.5' width='58' height='15'/%3E%3Crect x='36' y='1.5' width='28' height='6'/%3E%3Cpath d='M39.5 16.5 A11 11 0 0 0 60.5 16.5'/%3E%3Cline x1='44' y1='1.5' x2='56' y2='1.5' stroke-width='1.6'/%3E%3C/g%3E%3Ccircle cx='50' cy='11.5' r='.9' fill='rgba(255,255,255,.32)'/%3E%3Ccircle cx='50' cy='98.5' r='.9' fill='rgba(255,255,255,.32)'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    repeating-linear-gradient(#15803d 0 64px, #166534 64px 128px);
  border: 2px solid #14532d; border-radius: 12px;
  padding: 14px 8px; margin: 10px 0;
}
.pitch-row { display: flex; justify-content: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
/* In the roster views (draft / transfers) cap each position row to 3 cards so
   a 5-man line reads as a tidy 3+2. The My Team lineup keeps natural rows. */
.squad-grid .pitch-row { max-width: 480px; margin-left: auto; margin-right: auto; }
/* Separate each position zone (GK/DEF/MID/FWD) with a thin divider + spacing. */
.squad-grid .pitch-row + .pitch-row {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2);
}
.shirt {
  width: 150px; border-radius: 10px; padding: 0 0 6px; text-align: center;
  font-size: 12px; position: relative; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  overflow: visible;
}
.shirt:hover { transform: translateY(-2px); transition: transform .1s; border-color: var(--accent2); }
.kit {
  height: 30px; border-radius: 9px 9px 0 0; position: relative; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.kit .stripe { position: absolute; inset: 0 auto 0 0; width: 100%; height: 6px; bottom: 0; top: auto; border-radius: 0; }
.shirt .nm { font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.shirt .meta { color: var(--muted); font-size: 11px; white-space: nowrap; padding: 0 4px; }
.shirt .cap {
  position: absolute; top: -8px; right: -8px; background: var(--accent2); color: #332600;
  border-radius: 50%; width: 22px; height: 22px; line-height: 22px; font-weight: 800; z-index: 2;
}
.shirt .pts { color: var(--accent); font-weight: 800; }
/* Each data chunk stays whole so a wrapped meta line only ever breaks BETWEEN
   chunks (price+delta · MED 87 · 2 pts), never inside one ("2" over "pts").
   No-op on desktop, where the whole meta line is nowrap and fits. */
.shirt .pts, .shirt .nowrap { white-space: nowrap; }
.shirt.slot-empty {
  border-style: dashed; border-color: #3f5e46; background: rgba(13, 19, 33, .45);
  color: #9fc3aa; min-height: 84px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-weight: 700;
}
.shirt.slot-empty .meta { color: #7da888; }
.shirt.droppable { outline: 2px dashed var(--accent2); outline-offset: 2px; }
.shirt.selling { box-shadow: 0 0 0 2px var(--danger) inset; opacity: .75; }
#t-plan-card .shirt.selling { outline: 3px solid var(--danger); outline-offset: 2px; opacity: .75; }
.shirt.swap-target { outline: 2px solid var(--accent); }
.shirt .rm {
  position: absolute; top: -8px; left: -8px; background: var(--danger); color: #2a0606;
  border: none; border-radius: 50%; width: 20px; height: 20px; line-height: 18px;
  padding: 0; font-size: 12px; font-weight: 800; z-index: 2;
}
.bench-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; align-items: flex-start; }
.bench-label { width: 100%; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

/* Mobile: the 150px desktop tile only fits 2 per row on a phone, so a 4-4-2
   collapses. Shrink the shirt so a full line fits ONE row and the formation
   still reads as a formation. Lineup / teamModal / manager pitches hold 4
   across (the 4-4-2 default lands cleanly); the draft squad grid holds 3
   across so its 5-man lines stay a tidy 3+2. Desktop widths are untouched. */
@media (max-width: 520px) {
  .pitch { padding: 12px 6px; }
  .pitch-row { gap: 6px; margin: 8px 0; }
  .shirt { width: calc((100% - 21px) / 4); min-width: 0; }
  .squad-grid .pitch-row { max-width: none; }
  .squad-grid .pitch-row .shirt { width: calc((100% - 14px) / 3); }
  .mgr-pitch .shirt { width: calc((100% - 21px) / 4); }
  .bench-strip { gap: 6px; }
  .kit { height: 24px; font-size: 11px; }
  /* At ~70px wide the name clips to one line (ellipsis, as on desktop) but the
     data lines are nowrap and were spilling PAST the card edge. Let them wrap
     inside the card instead. .shirt keeps overflow:visible so the C/V and
     remove badges (positioned outside the box) are never clipped. */
  .shirt .nm { font-size: 10.5px; padding: 0 2px; }
  .shirt .meta {
    font-size: 9px; line-height: 1.25; white-space: normal;
    word-break: break-word; padding: 0 3px;
  }
  .shirt .flag, .shirt .dot { margin-right: 3px; }
}

.tabs { display: flex; gap: 8px; margin-bottom: 14px; position: sticky; top: 0; z-index: 5;
        background: var(--bg); padding: 8px 0; }
/* Inactive tabs read quiet (--muted); the active tab carries the identity
   accent. Min-height keeps them comfortably tappable on mobile. */
.tab { padding: 9px 18px; min-height: 38px; color: var(--muted); }
/* Mobile: 4 tabs with longer localized labels (e.g. es "Clasificación") overrun
   one no-wrap row. Let them share the width and wrap gracefully if needed;
   min-height keeps them tappable. */
@media (max-width: 520px) {
  .tabs { flex-wrap: wrap; gap: 6px; }
  .tab { flex: 1 1 auto; padding: 9px 10px; text-align: center; }
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: #08220f; font-weight: 700; border: none; }

.match-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin: 8px 0;
}
.match-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* Inside a match-card (rounds list + KO bracket): 3-column grid so the
   score is always centred regardless of team-name length. */
.match-card .match-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
.match-card .match-line .match-team:last-child {
  justify-content: flex-end;
}
.match-team { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* Prevent long historic names (e.g. "West Germany 1990") from overflowing
   — wrap rather than truncate, keeping alignment intact. */
.match-card .match-line .match-team {
  overflow-wrap: break-word;
  word-break: break-word;
}
.dot {
  display: inline-block; width: 13px; height: 13px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.25); margin-right: 5px;
  vertical-align: -2px; flex: 0 0 auto;
}
/* Selection flag; same box as .dot. On a 404 the img gains .dot and falls
   back to the kit colour carried in --kit. */
.flag {
  display: inline-block; width: 13px; height: 13px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.25); margin-right: 5px;
  vertical-align: -2px; flex: 0 0 auto; object-fit: cover;
}
.flag.dot { background: var(--kit, #888da0); }
.chip-icon { font-size: 15px; }
.match-score { font-weight: 800; font-size: 18px; color: var(--accent2); white-space: nowrap; }
.narrative { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 6px; }
details.narrative > summary {
  cursor: pointer; color: var(--text); font-weight: 600; list-style: none;
}
details.narrative > summary::-webkit-details-marker { display: none; }
details.narrative > summary::after { content: " ▾"; color: var(--muted); font-weight: 400; }
details.narrative[open] > summary::after { content: " ▴"; }
details.narrative[open] > summary { margin-bottom: 4px; }
.events { font-size: 12.5px; color: var(--muted); }
/* Events grid: home scorers left, away scorers right — mirrors .match-line columns */
.events-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}
.events-row .events-away { text-align: right; }

.round-block { margin-bottom: 18px; }
/* Round name as a system sub-block header (Phase A .stat-label), keeping the
   thin divider the old flat <h3> carried so the block still reads as titled. */
.round-block .round-head { border-bottom: 1px solid var(--border); padding-bottom: 8px; }

.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.gold { color: var(--accent2); }

/* ── Phase D — My Team + Standings ──────────────────────────────────────
   Realigns these two views to the Phase A system: sub-block headers use
   .stat-label, nested sub-blocks sit on .panel (--card2), and gold stays
   reserved for values/active states. No shared pitch/shirt rules touched. */

/* Sub-block header row: the label sits left, the contextual .hint right.
   Base .row centers; here the header spans the card and pushes them apart. */
.team-head {
  width: 100%; justify-content: space-between; flex-wrap: nowrap; gap: 10px;
  margin-bottom: 10px;
}
.team-head .hint { text-align: right; }
/* .stat-label is inline by default; as a standalone header it needs to be a
   block with the same rhythm the old <h3>/<h4> headers carried. */
.stat-label.block { display: block; margin-bottom: 10px; }

/* Chips on a nested --card2 panel. The chip buttons step DOWN to --card so
   they read as raised controls against the panel instead of merging into it
   (base button bg is --card2, same tone as the panel). Scoped to chips. */
.chips-panel { display: flex; }
.chips-panel .row { flex: 1; justify-content: flex-start; margin: 0; }
.chips-panel .chip-btn { background: var(--card); }
.chips-panel .hint { align-self: center; }

/* Standings — groups: each table is a nested sub-block on --card2 with a
   label-style header (gold stays for the values in the table, not chrome). */
.group-block .stat-label { display: block; margin-bottom: 8px; }
.group-block table th { background: var(--card2); }

/* Standings — leaderboard: the current manager's row reads clearly without
   shouting — a faint --card2 wash plus a left accent stripe on the rank cell,
   coherent with .accent-edge-left. Replaces the old green-text-only treatment. */
.lb-row.me td { background: var(--card2); font-weight: 700; }
.lb-row.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.lb-row.me .clicky { color: var(--accent); }

.chip-btn.used { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }
.chip-btn.active { outline: 2px solid var(--accent2); }

/* modal */
#modal-backdrop {
  position: fixed; inset: 0; background: rgba(5, 8, 16, .75); z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#modal-box {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto;
  padding: 18px; position: relative;
}
/* A modal that shows a formation pitch needs room for a full 4-wide line, or
   the rows wrap (1-4-4-2 collapses to 3+1). Widen only those modals. */
#modal-box:has(.pitch) { max-width: 660px; }
#modal-close {
  position: absolute; top: 10px; right: 10px; border-radius: 50%;
  width: 30px; height: 30px; padding: 0;
}
.modal-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.modal-kit {
  width: 56px; height: 56px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; border: 2px solid rgba(255,255,255,.2);
}
.modal-head h3 { margin: 0; }
.modal-sub { color: var(--muted); font-size: 13px; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
/* Static spacing for the player-modal info lines (moved off inline styles). */
.modal-next-opp, .modal-unavail { margin: 4px 0 8px; }

/* Team modal: the simulation-formation caption, and the single Players table
   whose position sub-header rows keep every column aligned across positions. */
.modal-sim-note { margin: 10px 0 2px; }
.tm-players .tm-pos-row td { padding-top: 16px; border-bottom: none; }
.tm-players .tm-pos-row:hover td { background: none; }
/* Bracket + group-table teams open the selection modal. */
.bracket-team[data-team] { cursor: pointer; }
.bracket-team[data-team]:hover span { color: var(--accent); }
/* Team names in the matches view open the same selection modal. */
.team-link { cursor: pointer; }
.team-link:hover { color: var(--accent); }
/* Back link at the top of a drilled-into modal (player opened from a team). */
.modal-back {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px;
  padding: 4px 10px; font-size: 13px; background: var(--card2);
}

/* Manager modal pitch: the squad is shown at a reduced, real size so it fits
   the narrow modal — replaces the old `zoom:.82` hack (which scaled the whole
   subtree as a transform) with concrete dimensions that match the system's
   type scale. Same footprint as before, no layout change. */
.mgr-pitch .shirt { width: 123px; padding-bottom: 5px; }
.mgr-pitch .kit { height: 25px; font-size: 11px; }
.mgr-pitch .shirt .nm { font-size: 11px; }
.mgr-pitch .shirt .meta { font-size: 10px; }
.mgr-pitch .shirt .pts { font-weight: 800; }
.mgr-pitch .pitch-row { gap: 8px; margin: 8px 0; }
/* The round-by-round label needs breathing room from the pitch above it
   (the old flat <h4> got it from default heading margins). */
.mgr-rbr-head { margin-top: 14px; }

/* per-round point breakdown inside the player modal */
.pb-career { color: var(--muted); font-size: 14px; margin: 2px 0 10px; }
.pb-round {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; margin: 6px 0;
}
.pb-round summary {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; list-style: none; font-weight: 600; gap: 10px;
}
.pb-round summary::-webkit-details-marker { display: none; }
.pb-total { font-weight: 800; }
.pb-total.pos { color: var(--accent); }
.pb-total.neg { color: var(--danger); }
.pb-list { list-style: none; margin: 8px 0 2px; padding: 0; }
.pb-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0 3px 8px; font-size: 13.5px; color: var(--text);
  border-top: 1px dashed var(--border);
}
.pb-pts { font-weight: 800; min-width: 34px; text-align: right; }
.pb-pts.pos { color: var(--accent); }
.pb-pts.neg { color: var(--danger); }
.pb-pts.zero { color: var(--muted); }
.mult-badge { background: var(--accent2); color: var(--bg); font-size: 11px; font-weight: 800; border-radius: 5px; padding: 1px 5px; }
.statline { display: flex; gap: 16px; margin: 8px 0 12px; flex-wrap: wrap; }

.range-wrap { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 13px; }
.range-input { width: 62px; padding: 7px 6px; }
.row-disabled td { opacity: .38; }
.row-disabled button { cursor: not-allowed; }
.mini-btn { padding: 3px 10px; font-size: 12px; margin-left: 10px; }
.lb-row td.clicky-row { cursor: pointer; }
.budget-math {
  background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 14px; margin: 8px 0;
}
.budget-math strong.ok { color: var(--accent); }
.budget-math strong.bad { color: var(--danger); }
.wc-active {
  background: rgba(255, 209, 102, .15); border: 1px solid var(--accent2);
  color: var(--accent2); font-weight: 700; font-size: 13px;
  padding: 6px 12px; border-radius: 8px;
}

/* eliminated teams */
.shirt.dead { filter: grayscale(.9); opacity: .65; }
.shirt .dead-x {
  position: absolute; top: 2px; right: 4px; color: var(--danger);
  font-weight: 900; font-size: 18px; z-index: 2; text-shadow: 0 0 4px #000;
}
.dead-name { color: var(--muted); text-decoration: line-through; }
.dead-mark { color: var(--danger); font-weight: 800; }
.out-x { position: absolute; top: 2px; right: 4px; font-size: 15px; z-index: 2; }
.out-mark { color: var(--accent2); font-weight: 800; }
#t-plan-card .shirt .dead-x {
  cursor: pointer;
  font-size: 22px;
  color: var(--danger);
  filter: drop-shadow(0 0 3px var(--danger));
  transition: transform .12s, filter .12s;
}
#t-plan-card .shirt .dead-x:hover {
  transform: scale(1.25);
  filter: drop-shadow(0 0 6px var(--danger)) brightness(1.3);
}

/* matchday pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.pager h3 { margin: 0; border: none; }
.pager button { font-size: 16px; padding: 6px 14px; }
.pager .hint { white-space: nowrap; }

/* draw ceremony overlay */
#draw-backdrop {
  position: fixed; inset: 0; background: rgba(5, 8, 16, .92); z-index: 46;
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
#draw-box {
  width: 100%; max-width: 1000px; max-height: 92vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
}
/* Draw overlay status line: the running "X → Group Y" announcement. Sits
   between the title and the Skip control; centered and tabular so the text
   doesn't jitter as names of different widths cycle through. */
.draw-current {
  font-size: 14px; min-height: 1.4em; flex: 1;
  text-align: center; color: var(--text);
}
.draw-current .hint { font-size: 14px; }
/* Skip reads as a secondary control next to the ceremony — quiet until hover,
   so it never competes with the reveal. Scoped to the draw overlay. */
#draw-skip {
  background: none; border: 1px solid var(--border); color: var(--muted);
  font-size: 13px; padding: 6px 12px;
}
#draw-skip:hover { color: var(--text); border-color: var(--accent); }
#draw-grid, .draw-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px;
}
@media (max-width: 800px) { #draw-grid, .draw-grid { grid-template-columns: repeat(2, 1fr); } }
/* Preview header: title and host/ready actions on one line, wrapping to two
   on narrow screens with the actions still reachable. */
.preview-head { display: flex; align-items: center; gap: 10px; }
.preview-head h2 { margin: 0; font-size: 17px; }
@media (max-width: 520px) {
  .preview-head { flex-direction: column; align-items: flex-start; }
  .preview-head #preview-actions { width: 100%; justify-content: flex-start; }
}
.draw-group {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px;
}
.draw-group h4 { margin: 2px 0 8px; color: var(--accent2); }
/* Preview groups read as data sub-blocks: the group letter follows the
   canonical .stat-label treatment instead of a flat gold heading, keeping
   gold for values only. Scoped to #preview-grid so the market groups card
   (which shares .draw-group) is untouched. */
#preview-grid .draw-group h4 {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 700;
}
.draw-slot {
  display: flex; align-items: center; gap: 4px; height: 32px;
  border-bottom: 1px dashed var(--border); color: var(--muted);
  font-size: 13px; overflow: hidden; white-space: nowrap;
}
/* Mobile: let long historic names ("West Germany 1990") wrap instead of being
   clipped by the fixed-height nowrap slot. */
@media (max-width: 520px) {
  .draw-slot { height: auto; min-height: 32px; white-space: normal; overflow: visible; }
}
.draw-slot:last-child { border-bottom: none; }
.draw-slot.revealed { color: var(--text); font-weight: 600; animation: popin .3s; }
.draw-kit { width: 14px; height: 14px; border-radius: 4px; margin-left: auto; flex: 0 0 auto; }

/* round countdown overlay (3-2-1 before replay starts) */
#countdown-overlay {
  position: fixed; inset: 0; background: rgba(5, 8, 16, .95); z-index: 47;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#countdown-number {
  font-size: 160px; font-weight: 900; color: var(--accent2); line-height: 1;
  font-variant-numeric: tabular-nums;
}
#countdown-label {
  font-size: 22px; color: var(--text); margin-top: 20px; letter-spacing: .04em; opacity: .8;
}

/* live replay overlay */
#replay-backdrop {
  position: fixed; inset: 0; background: rgba(5, 8, 16, .92); z-index: 45;
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
#replay-box {
  width: 100%; max-width: 1100px; max-height: 92vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
}
.replay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: -16px; background: var(--card); padding: 6px 0; z-index: 2; }
/* Mobile: title + clock/status + skip can't share one row on a phone — allow
   the skip control to wrap beneath rather than crushing the row. Shared by the
   replay and draw-ceremony overlay headers. */
@media (max-width: 520px) {
  .replay-head { flex-wrap: wrap; row-gap: 4px; }
}
.replay-head h2 { margin: 0; font-size: 18px; }
.head-actions { display: inline-flex; align-items: center; gap: 6px; }
.replay-clock { font-size: 26px; font-weight: 800; color: var(--accent2); font-variant-numeric: tabular-nums; }
.replay-standings {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 10px; margin-top: 8px;
  background: var(--card2); border: 1px solid var(--border); border-radius: 10px;
  align-items: center;
}
.replay-st-title {
  font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase;
  letter-spacing: 1px; white-space: nowrap; margin-right: 4px;
}
.replay-st-item {
  display: inline-flex; align-items: center; gap: 6px; background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px;
  font-size: 13px; white-space: nowrap; transition: border-color .3s ease;
}
.replay-st-item.me { border-color: var(--accent); box-shadow: 0 0 8px rgba(55, 214, 122, .25); font-weight: 700; }
.replay-st-rank { font-weight: 800; color: var(--muted); font-size: 11px; }
.replay-st-name { color: var(--text); }
.replay-st-pts { font-weight: 800; color: var(--accent2); }
#replay-grid { display: grid; grid-template-columns: repeat(min(var(--match-count, 1), 3), 1fr); gap: 10px; margin-top: 10px; }
@media (max-width: 900px) { #replay-grid { grid-template-columns: repeat(min(var(--match-count, 1), 2), 1fr); } }
@media (max-width: 600px) { #replay-grid { grid-template-columns: 1fr; } }
.replay-match {
  background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  transition: box-shadow .15s, transform .15s; position: relative;
}
.replay-match.flash { box-shadow: 0 0 0 2px var(--accent2); transform: scale(1.02); }
.replay-match.mine-good { box-shadow: 0 0 0 3px var(--accent), 0 0 22px rgba(55,214,122,.5); }
.replay-match.mine-bad { box-shadow: 0 0 0 3px var(--danger), 0 0 22px rgba(255,107,107,.5); }

/* "your player scored!" celebration popup */
.cel-pop {
  position: absolute; left: 50%; top: 40%; z-index: 8; pointer-events: none;
  white-space: nowrap; text-align: center; padding: 7px 16px; border-radius: 12px;
  background: rgba(13, 19, 33, .96); border: 2px solid var(--accent);
  box-shadow: 0 0 26px rgba(55, 214, 122, .65);
  animation: celebrate 2.2s cubic-bezier(.2, .8, .3, 1) forwards;
}
.cel-pop.bad { border-color: var(--danger); box-shadow: 0 0 26px rgba(255, 107, 107, .6); }
/* Mobile: a long "your player +N" popup shouldn't spill past a full-width
   single-column match card — let it wrap within the card. */
@media (max-width: 520px) {
  .cel-pop { white-space: normal; max-width: 88%; }
}
.cel-label { font-size: 10px; letter-spacing: 1.5px; font-weight: 800; color: var(--accent); }
.cel-pop.bad .cel-label { color: var(--danger); }
.cel-main { font-weight: 700; font-size: 14px; margin: 1px 0; }
.cel-pts { font-size: 22px; font-weight: 900; color: var(--accent); }
.cel-pop.bad .cel-pts { color: var(--danger); }
@keyframes celebrate {
  0%   { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  14%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
  28%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  72%  { transform: translate(-50%, -120%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -210%) scale(.85); opacity: 0; }
}
/* Replay scoreline: 3-column grid mirrors the rounds-list fix so the score
   stays pinned to the centre column regardless of whether team names wrap
   to one or two lines. Scoped to .replay-match so .match-card rows are
   untouched. align-items: start lets the name columns grow independently
   without dragging the score out of its column. */
.replay-match .match-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.replay-match .match-line .match-team {
  overflow-wrap: break-word;
  word-break: break-word;
}
.replay-match .match-line .match-team:last-child {
  justify-content: flex-end;
}
.replay-feed { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; color: var(--muted); }
.replay-feed li { padding: 1px 0; animation: popin .25s; }
.replay-feed li.big { color: var(--text); font-weight: 700; }
/* home-team events read left, away-team events read right */
.replay-feed li.home { text-align: left; }
.replay-feed li.away { text-align: right; }
@keyframes popin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
.replay-ft { color: var(--accent); font-weight: 800; letter-spacing: 1px; }

#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--card2); border: 1px solid var(--accent);
  padding: 12px 22px; border-radius: 10px; z-index: 50; max-width: 90vw;
}
.transfer-pick { background: rgba(255, 209, 102, 0.12); }

#btn-market-edit,
#btn-market-resolve { display: block; margin-top: 8px; }

/* KO bracket: winner / loser styling */
.ko-winner { color: var(--accent); font-weight: 700; }
.ko-loser  { opacity: 0.55; text-decoration: line-through; }

/* ── Phase F — KO bracket as inverted pyramid ────────────────────────────
   Rounds stack top→bottom: R16 (8 cards) → QF (4) → SF (2) → Final (1).
   Each row is centered; the pyramid shape emerges from match count alone.
   Cards widen as rounds progress — more horizontal space per card. */

.bracket-title {
  text-align: center;
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 8px;
}

.bracket-pyramid {
  display: flex; flex-direction: column; align-items: stretch; gap: 24px;
  width: 100%;
}
.bracket-round {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.bracket-round-label { display: block; text-align: center; }
.bracket-round-matches {
  display: flex; justify-content: center; flex-wrap: nowrap; gap: 8px;
}

/* Card widths scale up as match count halves each round.
   R16: 8×135 + 7×8gap = 1136px < 1152px available  ✓
   QF : 4×175 + 3×8gap =  724px   SF: 2×220+8=448   Final: 260 */
.bracket-round[data-stage="R16"] .bracket-match { width: 135px; }
.bracket-round[data-stage="QF"]  .bracket-match { width: 175px; }
.bracket-round[data-stage="SF"]  .bracket-match { width: 220px; }
.bracket-round[data-stage="F"]   .bracket-match { width: 260px; }

/* R16: smaller type + tighter padding; names truncate with ellipsis so all
   8 cards stay the same height regardless of name length. title attr on the
   .bracket-team div gives the full name on hover. */
.bracket-round[data-stage="R16"] .bracket-match  { padding: 6px 8px; }
.bracket-round[data-stage="R16"] .bracket-team   { font-size: 12px; gap: 5px; }
.bracket-round[data-stage="R16"] .bracket-score  { font-size: 12px; }
.bracket-round[data-stage="R16"] .bracket-team span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px;
}

/* Stacked match cell: home / score / away — full card width for each name */
.bracket-match {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column;
}
.bracket-team {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; padding: 3px 0; line-height: 1.3;
}
.bracket-team span { word-break: break-word; text-align: center; }
.bracket-score {
  font-size: 13px; font-weight: 800; color: var(--accent2);
  text-align: center; padding: 3px 0; margin: 1px 0;
}
.bracket-score.pending { color: var(--muted); font-weight: 400; }

/* Champion block: gold top-border, centered, visible only post-Final */
.bracket-champion {
  border-top: 2px solid var(--accent2); padding-top: 8px; margin-top: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}

/* Mobile: the R16 row is ~1136px wide (8 cards) — far past any phone. Rather
   than crush the Phase-F inverted pyramid, view it through a horizontal scroll
   window: the pyramid keeps its exact shape (rounds centered, cards sized per
   stage) and the whole thing scrolls as one unit. The edge fade signals there
   is more to the sides; the pyramid always overflows here (1136 > 520) so the
   fade is always correct. Desktop is untouched (.bracket-scroll is inert). */
@media (max-width: 520px) {
  .bracket-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
  }
  .bracket-pyramid { width: max-content; min-width: 100%; }
}

/* Round tabs (Matches / My Points) */
.round-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.round-tab  { padding: 6px 14px; font-size: 13px; }
.round-tab.active { background: var(--accent); color: #08220f; font-weight: 700; border: none; }
/* Mobile: the team modal now has 3 tabs — let them wrap rather than overflow a
   narrow modal. Harmless for the 2-tab rounds view. */
@media (max-width: 520px) { .round-tabs { flex-wrap: wrap; } }

/* ── Visual audit (2026-09) ──────────────────────────────────────────────
   Close room: a destructive action shouldn't carry the loudest weight in the
   header on every screen. Ghost by default, fills on hover. */
#btn-room-exit.danger {
  background: transparent; color: var(--danger); font-weight: 600;
  border: 1px solid rgba(255, 107, 107, .45);
}
#btn-room-exit.danger:hover { background: var(--danger); color: #2a0606; }
#btn-room-exit .exit-ico { margin-right: 4px; }

/* Leaderboard: three columns don't need 1200px — keep the points near the name. */
.lb-table { max-width: 560px; }
.bracket-pending { margin: 4px 0 0; text-align: center; }

@media (max-width: 520px) {
  /* Header: the badge shares one row with the controls while there is room
     for it. Your own name, the volume slider and the button labels go (mute
     toggle, title and aria-label stay). With the Ko-fi and Discord pills it
     no longer fits on a phone, so the badge takes its own row and the
     controls sit together beneath it. */
  .header-right { flex-wrap: wrap; flex: 1 1 100%; min-width: 0; gap: 8px; justify-content: flex-start; }
  #room-badge { flex: 1 1 100%; min-width: 0; justify-content: flex-start; }
  #lang-select { padding: 4px 24px 4px 8px; background-position: right 8px center; flex: 0 0 auto; }
  .room-badge-me, .room-badge-sep { display: none; }
  #room-badge .pill { white-space: nowrap; }
  #audio-volume { display: none; }
  #btn-room-exit { margin-left: 4px; padding: 4px 9px; }
  #btn-room-exit .exit-label { display: none; }
  #btn-room-exit .exit-ico { margin-right: 0; }

  /* Round banner: stats in a compact grid, buttons share rows, the long
     explanatory hint goes (it's the same sentence every round). */
  .banner .hint { display: none; }
  .banner-stats { gap: 10px 12px; }
  .banner-stats .stat-box { flex: 1 0 28%; }
  .banner-stats > button { flex: 1 1 auto; }

  /* Pitch: surname only, so "Ottorino S…" becomes "Sartor". */
  .shirt .nm-first { display: none; }

  /* Player pool (market + transfers): the table scrolled sideways and hid
     position, rating, price and the buy button — the whole point of the view.
     Each row becomes a two-line card: name on top, the numbers under it, and
     the action pinned right. Pure CSS, same DOM, so sorting/clicks still work. */
  .pool-table-wrap { overflow-x: visible; }
  .pool-table-wrap table { min-width: 0; }
  .pool-table-wrap table, .pool-table-wrap tbody { display: block; }
  .pool-table-wrap tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
    position: relative; padding: 8px 64px 8px 4px; border-bottom: 1px solid var(--border);
  }
  .pool-table-wrap th, .pool-table-wrap td {
    display: block; border: none; padding: 0; white-space: nowrap; background: none;
  }
  .pool-table-wrap td:first-child { flex: 1 0 100%; font-weight: 600; white-space: normal; }
  .pool-table-wrap td:last-child {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  }
  .pool-table-wrap td.hint { font-size: 12px; }
  /* header row → a strip of sort chips */
  .pool-table-wrap tr:first-child { padding: 4px 0 8px; gap: 6px; position: sticky; top: 0; background: var(--card); z-index: 1; }
  .pool-table-wrap tr:first-child th {
    font-size: 12px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--card2);
  }
  .pool-table-wrap tr:first-child th:empty { display: none; }
  .pool-table-wrap tr:hover td { background: none; }
}

/* Home: the empty error line reserved ~45px of dead space under the panels. */
#home-error { margin: 12px 0 0; }
#home-error:empty { display: none; }

/* ── Motion (2026-09) ────────────────────────────────────────────────────
   Animations fire on STATE TRANSITIONS (a goal, a rank change), never on
   render — the poll repaints with innerHTML every few seconds, so anything
   tied to render would replay forever. */

/* Goal: the scorer's number bumps and the card flashes in the scoring team's
   kit colour from their side. The glow sits behind the content (isolation +
   z-index -1) so the text never gets tinted. */
.replay-match { isolation: isolate; }
.replay-match .sc { display: inline-block; }
.sc-bump { animation: sc-bump .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes sc-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.9); color: var(--text); }
  100% { transform: scale(1); }
}
.replay-match::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: -1; opacity: 0;
}
.replay-match.goal-home::before {
  background: linear-gradient(90deg, var(--goal-c, var(--accent)), transparent 75%);
  animation: goal-glow 1.6s ease-out;
}
.replay-match.goal-away::before {
  background: linear-gradient(270deg, var(--goal-c, var(--accent)), transparent 75%);
  animation: goal-glow 1.6s ease-out;
}
@keyframes goal-glow { 0% { opacity: 0; } 12% { opacity: .5; } 100% { opacity: 0; } }

/* Leaderboard: rows slide from where you last saw them (FLIP, driven from
   standings.js) and a chip says how far, plus the points gained. */
.lb-table tr.lb-move { transition: transform .75s cubic-bezier(.2, .8, .2, 1); }
.lb-delta {
  margin-left: 8px; font-size: 11px; font-weight: 800; padding: 1px 7px;
  border-radius: 999px; display: inline-block;
}
.lb-delta.up { color: var(--accent); background: rgba(55, 214, 122, .14); }
.lb-delta.down { color: var(--danger); background: rgba(255, 107, 107, .14); }
.lb-gain { margin-left: 8px; font-size: 12px; font-weight: 800; color: var(--accent2); display: inline-block; }
.lb-delta.enter, .lb-gain.enter { animation: chip-in .5s .5s both cubic-bezier(.2, 1.4, .4, 1); }
@keyframes chip-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* Reduced motion: drop movement and scaling everywhere, keep colour cues
   (the goal glow and the chips still say what happened, they just don't move). */
@media (prefers-reduced-motion: reduce) {
  .sc-bump, .lb-delta.enter, .lb-gain.enter,
  .draw-slot.revealed, .replay-feed li { animation: none; }
  .lb-table tr.lb-move, .replay-match { transition: none; }
  .replay-match.flash { transform: none; }
}
.lb-delta.leave, .lb-gain.leave { opacity: 0; transition: opacity .35s; }

/* Champion confetti (js/confetti.js): full-screen, never blocks clicks. */
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 200; }
/* The champion's name lands with weight the first time you see it. */
.champ-enter { animation: champ-enter .9s cubic-bezier(.2, 1.5, .35, 1) both; }
@keyframes champ-enter {
  0% { opacity: 0; transform: scale(.6); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); }
}
.banner-champion h2 { transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .champ-enter { animation: none; } }

/* "matchday in progress" note while the server replay is still running */
.live-note { color: var(--danger); font-size: 13px; font-weight: 600; margin: 6px 0 0; }

/* ── Landing hero + steps ── */
.landing-hero { max-width: 640px; margin: 8px auto 22px; text-align: center; }
.landing-eyebrow { display: inline-block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 3px 12px; margin-bottom: 14px; }
.landing-hero h2 { margin: 0 0 10px; font-size: 32px; line-height: 1.2; }
.landing-blurb { margin: 0 auto 18px; color: var(--muted); line-height: 1.55; max-width: 560px; }
.landing-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.landing-flags img { width: 34px; height: 24px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
.landing-cta { display: inline-block; background: var(--accent); color: #07140c; font-weight: 700;
  padding: 10px 26px; border-radius: 999px; text-decoration: none; }
.landing-cta:hover { filter: brightness(1.1); }
.landing-steps { max-width: 640px; margin: 26px auto 0; }
.landing-steps h3 { text-align: center; margin: 0 0 12px; font-size: 16px; }
.landing-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.landing-steps li { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.landing-steps b { display: block; margin: 8px 0 4px; }
.landing-steps p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.step-n { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent2); color: #1b1500; font-weight: 700; font-size: 13px; }
@media (max-width: 520px) {
  .landing-hero h2 { font-size: 25px; }
  .landing-steps ol { grid-template-columns: 1fr; }
}