@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════
   WC 2026 TRACKER — styles.css
   Colors & spacing ported directly from React artifact
   ══════════════════════════════════════════════════ */

:root {
  --bg:      #0c0e12;
  --card:    #15181c;
  --card2:   #1b1f28;
  --crimson: #f0544b;
  --gold:    #e6c36a;
  --gold2:   #f0d890;
  --white:   #eef1f6;
  --muted:   #8a93a0;
  --border:  rgba(255,255,255,.07);
  --green:   #20bd76;
  --red:     #f0544b;
  --amber:   #f0b54b;
  --dim:     #2a2f3a;
  --radius:  16px;
  --accent:  #20bd76;
  --card-bg: #15181c;
  --navy:    #12151a;
  --navy2:   #0f1217;
  --navy3:   #13161a;
  --navy4:   #1b1f28;
  --surface: #1b1f28;
  --text:    #eef1f6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
  overscroll-behavior: none;
}

/* ══ HEADER — matches artifact header block exactly ══ */
.app-header {
  background: var(--bg);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.header-status-bar { padding: 4px 16px 8px; min-height: 0; }

/* Brand block: logo tile + wordmark */
.header-center { display: none; } /* legacy, replaced by header-brand */
.header-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-width: 0;
}
.header-logo-tile {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(150deg, #23c97e, #13864a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #04160d;
  box-shadow: 0 6px 16px rgba(32,189,118,.32);
  letter-spacing: -.03em;
  flex-shrink: 0;
}
.header-wordmark {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.header-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.02em;
  line-height: 1.15;
  white-space: nowrap;
}
.header-eyebrow { display: none; }
.header-trophy { display: none; }
.header-tz {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border-radius: 0;
  padding: 0;
  margin-top: 2px;
  letter-spacing: .02em;
}

/* Actions row: status left, refresh button right */
.header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.status-msg {
  font-size: 10px;
  color: var(--muted);
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-msg.loading { color: var(--gold); }
.status-msg.error   { color: var(--red); }

#refresh-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #171a21;
  border: 1px solid rgba(255,255,255,.07);
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
#refresh-btn:hover { color: var(--white); border-color: rgba(255,255,255,.15); }
#refresh-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
#refresh-btn.spinning { opacity: .38; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.settings-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #171a21;
  border: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color .2s;
  flex-shrink: 0;
}
.settings-btn:hover { color: var(--white); border-color: rgba(255,255,255,.15); }

/* Twemoji images - size relative to surrounding text */
img.emoji {
  height: 1.1em;
  width: 1.1em;
  vertical-align: -0.15em;
  display: inline-block;
}

/* ══ BOTTOM NAV ══ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  background: #0f1217;
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-btn {
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  transition: color 0.15s;
}
.tab-btn.active { font-weight: 700; }
.tab-btn .tab-icon { display: flex; align-items: center; justify-content: center; height: 22px; }
.tab-btn .tab-icon svg { width: 22px; height: 22px; }
.tab-btn.active { color: var(--green); }
.tab-btn:hover  { color: var(--white); }

/* ══ TAB CONTENT ══ */
#tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 80px 0;
}

/* ══ DEMO BANNER ══ */
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 8px;
  padding: 9px 14px;
  margin: 12px 16px 0;
  font-size: 12px;
  color: var(--amber);
  font-weight: 600;
}
.demo-exit-btn {
  background: rgba(245,158,11,0.18);
  border: 1px solid rgba(245,158,11,0.45);
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ══ MATCH CARD — horizontal layout from artifact ══ */
.mc-wrap {
  display: flex;
  gap: 10px;
  align-items: stretch;
  background: var(--card2);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.mc-wrap.my-team-card {
  border-color: rgba(32,189,118,.5);
  box-shadow: 0 0 14px rgba(32,189,118,.12);
}

/* Left column: time / FT / group label */
.mc-left {
  min-width: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  padding: 10px 6px;
  gap: 5px;
  flex-shrink: 0;
}
.mc-left.ft-col   { background: rgba(32,189,118,.07); }
.mc-left.live-col { background: rgba(240,84,75,.08); }
.mc-left.ns-col   { background: rgba(230,195,106,.05); }

.mc-ft {
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  background: rgba(32,189,118,.16);
  border-radius: 6px;
  padding: 2px 6px;
  letter-spacing: 0.06em;
}
.mc-live {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  color: var(--crimson);
  background: rgba(240,84,75,.18);
  border-radius: 6px;
  padding: 2px 5px;
  letter-spacing: 0.04em;
}
.mc-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  line-height: 1.3;
}
.mc-tz {
  font-size: 9px;
  color: var(--muted);
  margin-top: -2px;
  letter-spacing: 0.04em;
}
.mc-grp {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border-radius: 5px;
  padding: 2px 6px;
  letter-spacing: 0.05em;
  margin-top: 5px;
}

/* Right column: teams + scores */
.mc-right {
  flex: 1;
  padding: 10px 10px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mc-team {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mc-flag {
  width: 25px; height: 25px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: #21252e; border: 1px solid rgba(255,255,255,.09);
}
.mc-flag .flag-img {
  position: absolute; top: 50%; left: 50%;
  width: 144%; height: 144%;
  transform: translate(-50%, -50%);
  object-fit: cover; background: none; border-radius: 0;
}
.mc-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Winner: gold, bold; Loser: 45% opacity */
.mc-team.winner .mc-name {
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.mc-team.loser { opacity: 0.45; }
.mc-score {
  font-size: 18px;
  font-weight: 800;
  min-width: 20px;
  text-align: right;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.mc-team.winner .mc-score { color: var(--gold); }
.mc-team.loser  .mc-score { color: var(--muted); }
.mc-divider {
  height: 1px;
  background: var(--border);
  opacity: 0.5;
}
.mc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -2px;
}
.mc-city     { font-size: 11px; color: var(--muted); }
.mc-countdown{ font-size: 11px; color: var(--green); font-weight: 600; }

/* ══ DATE SECTION HEADER — matches artifact DateHeader exactly ══ */
.date-hdr {
  margin-top: 18px;
  margin-bottom: 10px;
  border-left: 3px solid var(--green);
  background: rgba(32,189,118,.06);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
}
.date-hdr-day  { font-size: 13px; font-weight: 800; color: var(--white); letter-spacing: 0.02em; }
.date-hdr-date { font-size: 13px; font-weight: 700; color: var(--green); }

/* ══ SECTION / FILTER PILLS ══ */
.pills-wrap {
  overflow-x: auto;
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  scrollbar-width: none;
}
.pills-wrap::-webkit-scrollbar { display: none; }

/* Active pill: crimson gradient + shadow (from artifact exactly) */
.pill {
  flex-shrink: 0;
  background: var(--card2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.15s;
  white-space: nowrap;
}
.pill.active {
  background: rgba(32,189,118,.14);
  color: #34d488;
  border: 1px solid rgba(32,189,118,.4);
  box-shadow: none;
}
.pill:hover:not(.active) { color: var(--white); border-color: var(--muted); }

/* ══ SCHEDULE TAB ══ */
.schedule-wrap { padding: 0 16px; }
.sched-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
  padding-top: 4px;
}
.view-toggle { display: flex; gap: 6px; padding: 8px 16px 0; }
.toggle-btn {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.toggle-btn.active {
  background: #1e2430;
  color: var(--white);
  border-color: rgba(255,255,255,.18);
  font-weight: 700;
}

/* Schedule "By Date / By Group" tab-style toggle */
.sched-view-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.sched-tab-btn {
  flex: 1; padding: 10px 0;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.sched-tab-btn.active { border-bottom-color: var(--green); color: var(--green); }

/* Schedule row (compact list) */
.schedule-row {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  margin-bottom: 8px;
}
.schedule-row.my-team-row { border-color: rgba(32,189,118,.4); }
.sched-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sched-round {
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.sched-time { font-size: 11px; color: var(--white); font-weight: 600; }
.sched-teams { display: flex; align-items: center; gap: 6px; }
.sched-team {
  flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0;
}
.sched-team.right { flex-direction: row-reverse; }
.sched-name {
  font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--white);
}
.sched-name.r { text-align: right; }
.sched-team.winner .sched-name { color: var(--gold2); font-weight: 700; }
.sched-team.loser  .sched-name { color: var(--muted); }
.sched-team.my-t   .sched-name { color: var(--gold); }
.sched-score {
  font-size: 14px; font-weight: 700; white-space: nowrap;
  min-width: 36px; text-align: center; color: var(--white);
}
.sched-score.vs { color: var(--muted); font-size: 11px; font-weight: 400; }
.sched-score .winner { color: var(--gold2); }
.sched-score .loser  { color: var(--muted); }
.sched-city { font-size: 10px; color: var(--muted); margin-top: 4px; }

/* ══ SCHEDULE — redesigned card layout (mockup) ══ */
.sched-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 16px 14px;
  position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.sched-title { font-size: 24px; font-weight: 800; color: var(--white); letter-spacing: -.025em; margin: 0; }
.sched-seg {
  display: flex; background: var(--card); border: 1px solid var(--border);
  border-radius: 11px; padding: 3px; flex-shrink: 0;
}
.sched-seg-btn {
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
  background: none; border: none; border-radius: 8px; padding: 6px 12px;
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.sched-seg-btn.active { background: #262b34; color: var(--white); font-weight: 700; }

.sched-card {
  background: var(--card); border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px; overflow: hidden; margin: 0 16px 14px;
}
.sched-card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 15px; background: #12151a; border-bottom: 1px solid rgba(255,255,255,.06);
}
.sched-card-title { font-size: 12.5px; font-weight: 800; color: var(--white); letter-spacing: -.01em; white-space: nowrap; }
.sched-card-count { font-size: 11px; font-weight: 600; color: #6a727e; flex-shrink: 0; white-space: nowrap; }

.srow {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 11px 11px; align-items: center;
  padding: 11px 15px 9px; border-bottom: 1px solid rgba(255,255,255,.04);
}
/* Prob bar and delay bar span all 3 columns so they sit as full-width rows */
.srow-prob-wrap, .srow-delay-bar { grid-column: 1 / -1; margin-top: -4px; }
.srow:last-child { border-bottom: none; }
.srow-click { cursor: pointer; transition: background .12s; }
.srow-click:hover { background: rgba(255,255,255,.025); }
.srow.my-t { box-shadow: inset 3px 0 0 var(--green); }

.srow-status { display: flex; align-items: center; justify-content: center; }
.srow-ft {
  font-size: 10px; font-weight: 700; color: #6a727e; text-align: center;
  background: #1d212a; border-radius: 6px; padding: 4px 0; width: 100%;
}
.srow-time {
  font-size: 11.5px; font-weight: 700; color: #aab2c0; width: 100%;
  text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.srow-live {
  display: inline-flex; align-items: center; gap: 4px; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--crimson); width: 100%;
  font-variant-numeric: tabular-nums;
}

.srow-teams { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.srow-team { display: flex; align-items: center; gap: 8px; min-width: 0; height: 21px; }
.srow-badge {
  width: 21px; height: 21px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: #21252e; border: 1px solid rgba(255,255,255,.09);
  font-size: 8px; font-weight: 800; color: #9aa3b0;
}
.srow-badge .flag-img {
  position: absolute; top: 50%; left: 50%; width: 144%; height: 144%;
  transform: translate(-50%,-50%); object-fit: cover; border-radius: 0; background: none;
}
.srow-name {
  font-size: 13.5px; font-weight: 600; color: #e7eaf0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.srow-team.winner .srow-name { font-weight: 700; color: var(--white); }
.srow-team.loser  .srow-name { color: #aeb6c2; }

.srow-scores { display: flex; flex-direction: column; gap: 7px; align-items: center; min-width: 46px; }
.srow-scores > span {
  height: 21px; display: flex; align-items: center; justify-content: center; gap: 3px;
  font-size: 14px; font-weight: 800; color: #e7eaf0; font-variant-numeric: tabular-nums;
}
.srow-scores .loser { color: #aeb6c2; }
.srow-pen-paren { font-size: 11px; font-weight: 700; color: var(--gold); }
.srow-dash { text-align: center; color: #3a414c; font-size: 14px; font-weight: 700; min-width: 22px; }

/* Group-view schedule: stacked date + time/status in left cell */
.srow-timecol { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.srow-date    { font-size: 9px; font-weight: 700; color: #6a727e; letter-spacing: .04em; white-space: nowrap; }

/* Pinned-team star indicator in schedule and groups tabs */
.srow-star  { font-size: 11px; color: var(--gold); flex-shrink: 0; line-height: 1; margin-left: 2px; }
.gstd-star  { font-size: 11px; color: var(--gold); flex-shrink: 0; line-height: 1; margin-left: 3px; }

/* ══ STANDINGS / GROUPS — redesigned card layout (mockup) ══ */
.gstd-top {
  padding: 6px 16px 12px; position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.gstd-title { font-size: 24px; font-weight: 800; color: var(--white); letter-spacing: -.025em; margin: 0 0 12px; }
.gstd-tabs { display: flex; gap: 7px; }
.gstd-tab {
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--card); border: 1px solid rgba(255,255,255,.06); border-radius: 9px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.gstd-tab.active { background: #262b34; color: var(--white); font-weight: 700; border-color: transparent; }

.gstd-wrap { padding: 2px 16px 16px; }
.gstd-card {
  background: var(--card); border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px; overflow: hidden; margin-bottom: 12px;
}
.gstd-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 15px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.gstd-hdr-title { font-size: 14px; font-weight: 800; color: var(--white); letter-spacing: -.01em; white-space: nowrap; }
.gstd-hdr-md { font-size: 11px; font-weight: 600; color: #6a727e; white-space: nowrap; }

.gstd-colhdr {
  display: grid; grid-template-columns: 24px 1fr 26px 34px 32px; gap: 4px;
  padding: 8px 15px; font-size: 10px; font-weight: 700; color: #6a727e; letter-spacing: .04em;
}
.gstd-colhdr .c { text-align: center; }

.gstd-row {
  display: grid; grid-template-columns: 24px 1fr 26px 34px 32px; gap: 4px;
  padding: 9px 15px; align-items: center; border-left: 3px solid transparent;
}
.gstd-row.adv { border-left-color: var(--green); }
.gstd-row.adv.first { background: rgba(32,189,118,.04); }
.gstd-row.last { opacity: .72; }

.gstd-rank { font-size: 11px; font-weight: 700; color: #6a727e; }
.gstd-row.adv .gstd-rank { font-weight: 800; color: var(--green); }
.gstd-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gstd-badge {
  width: 21px; height: 21px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: #21252e; border: 1px solid rgba(255,255,255,.09);
  font-size: 8px; font-weight: 800; color: #9aa3b0;
}
.gstd-badge .flag-img {
  position: absolute; top: 50%; left: 50%; width: 144%; height: 144%;
  transform: translate(-50%,-50%); object-fit: cover; border-radius: 0; background: none;
}
.gstd-name {
  font-size: 12.5px; font-weight: 600; color: #aeb6c2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; cursor: pointer;
}
.gstd-row.adv .gstd-name { font-weight: 700; color: var(--white); }
.gstd-p { font-size: 11px; color: #7e8794; text-align: center; }
.gstd-row.adv .gstd-p { color: #aab2c0; }
.gstd-gd { font-size: 11px; font-weight: 600; text-align: center; }
.gstd-gd.pos { color: #34d488; } .gstd-gd.neg { color: #f0544b; } .gstd-gd.zero { color: #7e8794; }
.gstd-pts { font-size: 13px; font-weight: 800; text-align: center; color: #aeb6c2; }
.gstd-row.adv .gstd-pts { color: var(--white); }

.gstd-legend {
  display: flex; align-items: center; gap: 8px; padding: 12px 4px 0;
  font-size: 10.5px; color: #6a727e; font-weight: 600;
}
.gstd-legend-bar { width: 14px; height: 8px; border-radius: 3px; background: var(--green); }

/* ══ GROUPS TAB — matches artifact StandingsGroup exactly ══ */
.groups-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 16px;
}

.group-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}
.group-card:hover { border-color: rgba(255,255,255,.14); }
.group-card.expanded { grid-column: 1 / -1; }

.group-hdr {
  background: #12151a;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.group-hdr-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.group-hdr-arrow {
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.group-hdr-arrow.open { transform: rotate(180deg); }

/* Column header row */
.group-col-hdr {
  display: grid;
  grid-template-columns: 1fr 24px 28px 28px;
  padding: 3px 8px;
  gap: 2px;
}
.group-col-label {
  font-size: 9px;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
}
.group-col-label.left { text-align: left; }

/* Team rows — matches artifact row exactly */
.group-row {
  display: grid;
  grid-template-columns: 1fr 24px 28px 28px;
  padding: 5px 8px;
  gap: 2px;
  align-items: center;
  border-left: 3px solid transparent;
}
.group-row.advancing   { border-left-color: var(--green); background: rgba(32,189,118,.03); }
.group-row.alt         { background: rgba(255,255,255,0.02); }

.group-row-team {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.group-row-flag { font-size: 14px; flex-shrink: 0; }
.group-row-name {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-row.advancing .group-row-name {
  color: var(--white);
  font-weight: 600;
}
.group-row-p   { font-size: 11px; color: var(--muted); text-align: center; }
.group-row-gd  { font-size: 11px; text-align: center; font-weight: 600; }
.group-row-pts { font-size: 12px; color: var(--gold); text-align: center; font-weight: 800; }
.gd-pos { color: var(--green); }
.gd-neg { color: var(--red); }
.gd-zero{ color: var(--muted); }

/* Expanded group card */
.group-card-body { padding: 4px 0; }
.standings-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.standings-table th {
  padding: 4px 6px; text-align: center; font-size: 9px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--border);
}
.standings-table th.team-th { text-align: left; }
.standings-table td { padding: 6px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.04); }
.standings-table tr.q1 td:first-child { border-left: 2px solid var(--green); }
.standings-table tr.q3 td:first-child { border-left: 2px solid var(--amber); }
.standings-table tr.q4 td:first-child { border-left: 2px solid var(--red); opacity: 0.7; }
.rank-cell { color: var(--muted); font-size: 10px; }
.team-cell { display: flex; align-items: center; gap: 4px; text-align: left; font-size: 11px; font-weight: 600; }
.pts-cell  { font-weight: 700; color: var(--white); }

.group-matches   { padding: 8px 10px; border-top: 1px solid var(--border); }
.group-match-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 11px; }
.gm-team { flex: 1; display: flex; align-items: center; gap: 4px; }
.gm-team.right { flex-direction: row-reverse; justify-content: flex-start; }
.gm-team.bold span { font-weight: 700; }
.gm-team.dim  { opacity: 0.5; }
.gm-score  { min-width: 60px; text-align: center; font-size: 11px; }
.ft-score  { color: var(--muted); font-size: 10px; }
.ns-time   { color: var(--muted); font-size: 10px; }

.legend-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; font-size: 10px; color: var(--muted); border-top: 1px solid var(--border);
}
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-dot.q1 { background: var(--green); }
.legend-dot.q3 { background: var(--amber); }
.legend-dot.q4 { background: var(--red); }

/* ══ STANDINGS EMPTY STATE (matches artifact exactly) ══ */
.standings-empty {
  text-align: center;
  padding: 48px 20px;
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  margin: 8px 0;
}
.se-trophy { font-size: 40px; margin-bottom: 12px; }
.se-title  { font-size: 16px; font-weight: 800; color: var(--gold); margin-bottom: 6px; }
.se-body   { font-size: 13px; color: var(--muted); line-height: 1.6; }
.se-pill {
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(212,175,55,0.08);
  border-radius: 8px;
  padding: 8px 16px;
  display: inline-block;
}

/* ══ TODAY TAB EXTRAS ══ */
.today-wrap { padding: 12px 16px 0; }
.today-hdr  { margin-bottom: 12px; padding-top: 12px; }
.today-summary   { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.summary-total   { font-size: 13px; font-weight: 700; color: var(--white); }
.summary-detail  { font-size: 12px; color: var(--muted); }
.live-text       { color: var(--crimson); font-weight: 800; }
.next-day-note   { font-size: 12px; color: var(--amber); margin-bottom: 6px; }

/* ── Today date strip (FotMob-style day selector) ── */
.today-datestrip {
  display: flex; gap: 8px; overflow-x: auto; position: relative;
  margin: 0 -16px; padding: 0 16px 14px;
  scrollbar-width: none;
}
.today-datestrip::-webkit-scrollbar { display: none; }
.dchip {
  flex-shrink: 0; cursor: pointer; font-family: inherit;
  padding: 8px 14px; border-radius: 12px;
  background: var(--card); border: 1px solid rgba(255,255,255,.06);
  font-size: 12px; font-weight: 600; color: var(--muted);
  white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.dchip:hover { color: var(--white); border-color: rgba(255,255,255,.14); }
.dchip.active {
  background: rgba(32,189,118,.14); border-color: rgba(32,189,118,.4);
  color: #34d488; font-weight: 700;
}
.summary-dot-sep { color: #3a414c; }
.summary-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--crimson);
  white-space: nowrap; flex-shrink: 0;
}
.summary-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--crimson);
  animation: wcpulse 1.1s ease-in-out infinite;
}
@keyframes wcpulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.3;transform:scale(.6);} }
.section-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 0 4px;
}
.my-teams-empty { font-size: 12px; color: var(--muted); padding: 6px 0 12px; }

/* ══ BRACKET TAB ══ */
.brk-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 10px 16px 6px;
}
.brk-title { font-size: 22px; font-weight: 800; color: var(--white); letter-spacing: -0.025em; }
.brk-hint {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: #6a727e;
}
.bracket-scroll-wrap {
  position: relative; overflow-x: auto; padding: 6px 16px 18px;
  scrollbar-width: thin; scrollbar-color: var(--dim) transparent;
  -webkit-overflow-scrolling: touch;
}
.bracket-wrap { position: relative; }
.bracket-col  { position: absolute; top: 0; width: 130px; }
.round-label  {
  font-size: 10px; font-weight: 800; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em; padding-left: 1px; margin-bottom: 8px;
}
.round-label .round-date { color: #6a727e; font-weight: 600; letter-spacing: 0; }
.bracket-svg .bracket-line { stroke: var(--dim); stroke-width: 1.5; }

.bracket-card {
  position: absolute; background: var(--card);
  border: 1px solid var(--border); border-radius: 11px; overflow: hidden;
  transition: border-color .15s ease;
}
.bracket-card:hover { border-color: rgba(255,255,255,.16); }
.bracket-card.bc-tbd { border-style: dashed; border-color: rgba(255,255,255,.12); background: #121519; }

/* corner status flag */
.bc-corner {
  position: absolute; top: -1px; right: -1px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 8px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 5px; border-radius: 0 10px 0 7px; line-height: 1;
}
.bc-corner.live { background: rgba(240,84,75,.92); color: #fff; }
.bc-corner.pso  { background: rgba(230,195,106,.16); color: var(--gold); }
.bc-corner.ft   { background: rgba(255,255,255,.08); color: var(--muted); }
.bc-corner .pulse-dot { width: 5px; height: 5px; background: #fff; }

.bc-team { display: flex; align-items: center; gap: 7px; padding: 6px 9px; height: 28px; }
.bc-team.loser { opacity: .38; }
.bc-team.loser .bc-score { color: var(--muted); }
.bc-team.winner .bc-name { color: var(--gold); font-weight: 700; }
.bc-team.winner .bc-score { color: var(--gold); font-weight: 800; }
.bc-team.my-t   .bc-name { color: var(--gold); }

/* Inline penalty parens on winner's score */
.bc-pen { font-size: 9px; font-weight: 700; color: var(--gold); margin-left: 2px; }

/* Result context strip at the bottom of each card */
.bc-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 9px 5px; margin-top: 1px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.bc-meta-date { font-size: 9px; color: #5a6270; font-weight: 600; }
.bc-meta-time { font-size: 9px; color: #5a6270; }
.bc-meta-result { font-size: 9px; font-weight: 700; color: #6a727e; }
.bc-meta-result.bc-meta-pso { color: var(--gold); }

/* Analyzer bracket predictor — pick interaction */
.az-pick-row { transition: background .12s; }
.az-pick-row:hover { background: rgba(255,255,255,.06); border-radius: 0; }
.az-pick-winner { background: rgba(32,189,118,.1); }
.az-pick-winner .bc-name { color: var(--green); font-weight: 700; }
.az-pick-loser  { opacity: .38; }
.az-pick-check  { font-size: 10px; font-weight: 800; color: var(--green); margin-left: auto; flex-shrink: 0; }

.bc-badge {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: #21252e; border: 1px solid rgba(255,255,255,.09);
  font-size: 13px;
}
.bc-badge.empty { background: #1d212a; border-style: dashed; border-color: rgba(255,255,255,.18); }
.bc-badge .flag-img {
  position: absolute; top: 50%; left: 50%; width: 144%; height: 144%;
  transform: translate(-50%,-50%); object-fit: cover; border-radius: 0; background: none;
}
.bc-name {
  flex: 1; font-size: 11px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: #e7eaf0;
}
.bc-name.tbd { color: #7e8794; font-weight: 600; }
.bc-name.team-link { cursor: pointer; }
.bc-score { font-size: 11px; font-weight: 800; color: var(--white); min-width: 12px; text-align: right; }
.bc-divider { height: 1px; background: rgba(255,255,255,.06); }

.bracket-edge-fade {
  position: absolute; top: 0; right: 0; bottom: 0; width: 40px; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,14,18,0), var(--bg));
}

.third-place-wrap  { margin: 8px 16px 24px; }
.third-place-label { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.third-place-card-slot { position: relative; }
.third-place-card-slot .bracket-card { position: static !important; width: 100% !important; }

/* ══ ANALYZER TAB ══ */
.az-wrap    { padding: 0 16px; }
.az-header  { padding: 12px 0 6px; }
.az-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
}
.az-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; padding: 10px 12px;
  background: var(--card2); border-bottom: 1px solid var(--border);
}
.what-if-badge {
  background: var(--gold); color: #1a1500;
  font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 5px;
  white-space: nowrap;
}
.reset-btn {
  margin-left: auto; background: none; border: 1px solid var(--dim);
  color: var(--muted); font-size: 10px; padding: 3px 8px; border-radius: 4px; cursor: pointer;
}
.reset-btn:hover { color: var(--white); border-color: var(--white); }
.az-standing-row {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-left: 2px solid transparent; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.az-standing-row.qualified   { border-left-color: var(--green); }
.az-standing-row.third-place { border-left-color: var(--amber); }
.az-standing-row.eliminated  { border-left-color: var(--red); opacity: 0.7; }
.az-team-name { flex: 1; font-size: 12px; font-weight: 600; }
.az-pts { font-size: 11px; color: var(--gold); font-weight: 700; min-width: 40px; text-align: right; }
.az-gd  { font-size: 10px; color: var(--muted); min-width: 30px; text-align: right; }
.az-qual{ font-size: 14px; min-width: 20px; text-align: right; }
.az-match-toggle { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.az-match-toggle:last-child { border-bottom: none; }
.az-toggle-teams { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 8px; }
.toggle-team { font-weight: 600; }
.vs-text     { color: var(--muted); font-size: 11px; }
.az-toggle-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.toggle-opt {
  flex: 1; background: var(--bg); border: 1px solid var(--dim); color: var(--muted);
  font-size: 11px; font-weight: 600; padding: 6px 8px; border-radius: 6px;
  cursor: pointer; transition: all 0.15s; min-width: 60px;
}
.toggle-opt:hover { border-color: var(--muted); color: var(--white); }
.toggle-opt.active-home { background: rgba(14,165,233,0.18);  border-color: #0EA5E9; color: #38BDF8; }
.toggle-opt.active-draw { background: rgba(139,92,246,0.18);  border-color: #8B5CF6; color: #A78BFA; }
.toggle-opt.active-away { background: rgba(251,146,60,0.18);  border-color: #FB923C; color: #FDBA74; }
.toggle-opt.clear-btn   { flex: 0; min-width: 32px; color: var(--muted); }
.az-match-date { font-size: 10px; color: var(--muted); margin-top: 5px; }
.az-empty      { padding: 12px; font-size: 12px; color: var(--muted); }
.az-played-row {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.az-score { font-weight: 700; color: var(--white); min-width: 28px; text-align: center; }
.path-legend {
  display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted);
  padding: 6px 12px; border-bottom: 1px solid var(--border);
}
.path-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.path-dot.confirmed { background: var(--gold); }
.path-dot.likely    { background: var(--amber); }
.path-dot.open      { background: var(--dim); }
.tournament-path { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.tournament-path:last-child { border-bottom: none; }
.path-team-header { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.rank-badge { background: var(--green); color: #04160d; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 5px; }
.path-steps { display: flex; align-items: flex-start; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.path-steps::-webkit-scrollbar { display: none; }
.path-step {
  display: flex; flex-direction: column; background: #13161a;
  border: 1px dotted var(--dim); border-radius: 9px; padding: 6px 9px; min-width: 76px; flex-shrink: 0;
}
.path-step.confirmed { border-color: var(--gold); border-style: solid; }
.path-step.likely    { border-color: var(--amber); border-style: dashed; }
.path-step.open      { border-color: var(--dim);   border-style: dotted; }
.path-round { font-size: 9px; font-weight: 800; color: var(--gold); text-transform: uppercase; margin-bottom: 2px; }
.path-label { font-size: 9px; color: var(--muted); }
.path-arrow { color: var(--dim); font-size: 16px; padding-top: 6px; flex-shrink: 0; }

/* ══ BADGES ══ */
.live-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(240,84,75,.2); color: var(--crimson);
  border: 1px solid rgba(240,84,75,.45);
  font-size: 11px; font-weight: 800; padding: 3px 8px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.08em;
}
.live-badge.sm { font-size: 10px; padding: 2px 6px; }
.live-badge.xs { font-size: 9px;  padding: 2px 5px; }
.ft-badge {
  display: inline-block;
  background: rgba(255,255,255,0.07); color: var(--muted);
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px;
}
.ft-badge.sm { font-size: 10px; padding: 2px 6px; }
.ft-badge.xs { font-size: 9px;  padding: 2px 5px; }
.pulse-dot {
  width: 6px; height: 6px; background: var(--crimson); border-radius: 50%;
  animation: pulse 1s ease-in-out infinite; display: inline-block;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* ══ STARS ══ */
.star-btn {
  background: none; border: none; cursor: pointer;
  color: var(--dim); font-size: 16px; padding: 2px 4px;
  transition: color 0.15s, transform 0.15s; flex-shrink: 0; line-height: 1;
}
.star-btn:hover   { color: var(--gold); transform: scale(1.2); }
.star-btn.starred { color: var(--gold); }

/* ══ TOAST ══ */
#toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--card2); color: var(--white);
  padding: 10px 20px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--dim); opacity: 0; pointer-events: none;
  transition: opacity 0.3s; z-index: 999; white-space: nowrap;
}
#toast.show { opacity: 1; }

/* ══ SETTINGS MODAL ══ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.75);
  display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-sheet {
  background: #13161a; border-radius: 20px 20px 0 0;
  border: 1px solid var(--border); border-top: 2px solid rgba(255,255,255,.08);
  width: 100%; max-width: 520px; margin: 0 auto; padding: 20px 20px 40px;
}
.modal-title  { font-size: 18px; font-weight: 800; margin-bottom: 18px; letter-spacing: -.01em; }
.modal-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.modal-row:last-child { border-bottom: none; }
.modal-row-name  { font-weight: 600; }
.modal-row-label { color: var(--muted); font-size: 11px; margin-top: 2px; }
.modal-btn {
  background: var(--card2); border: 1px solid var(--border); color: var(--white);
  font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 9px; cursor: pointer; flex-shrink: 0;
  font-family: inherit;
}
.modal-btn:hover { border-color: var(--muted); }
.modal-btn.danger { border-color: rgba(239,68,68,0.4); color: var(--red); }
.modal-btn.demo   { border-color: rgba(245,158,11,0.45); color: var(--amber); background: rgba(245,158,11,0.1); }
.modal-close-btn {
  display: block; width: 100%; margin-top: 16px;
  background: linear-gradient(150deg, #23c97e, #15914f);
  border: none; color: #04160d; font-size: 14px; font-weight: 800;
  padding: 14px; border-radius: 14px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(32,189,118,.28);
  font-family: inherit;
  letter-spacing: -.01em;
}

/* ══ SETTINGS SHEET — redesigned (mockup Frame 9) ══ */
.settings-sheet {
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  width: 100%; max-width: 520px; margin: 0 auto;
  max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 -24px 60px -20px rgba(0,0,0,.6);
}
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 10px; flex-shrink: 0;
}
.settings-title {
  font-size: 22px; font-weight: 800; color: #f3f5f9;
  letter-spacing: -.025em; margin: 0;
}
.settings-close {
  width: 34px; height: 34px; border-radius: 11px;
  background: #171a21; border: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  color: #aab2c0; cursor: pointer; flex-shrink: 0; padding: 0;
  transition: color .15s, border-color .15s;
}
.settings-close:hover { color: var(--white); border-color: rgba(255,255,255,.16); }
.settings-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.set-sec-label {
  font-size: 10px; font-weight: 700; color: #6a727e;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 14px 0 8px;
}
.set-sec-label:first-child { margin-top: 2px; }
.set-card {
  background: #15181c; border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px; padding: 2px 14px; margin-bottom: 14px;
}
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.set-row:last-child { border-bottom: none; }
.set-row-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.set-row-main {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.set-row-text { min-width: 0; }
.set-row-name { font-size: 13px; font-weight: 700; color: #f3f5f9; }
.set-row-sub  { font-size: 11px; color: #7e8794; margin-top: 2px; line-height: 1.4; }

.set-btn {
  font-size: 11.5px; font-weight: 600; color: #e7eaf0;
  background: #1b1f27; border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; padding: 7px 13px;
  font-family: inherit; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.set-btn:hover { border-color: rgba(255,255,255,.2); }
.set-btn.danger {
  color: #f0726b; background: rgba(240,84,75,.1); border-color: rgba(240,84,75,.3);
}
.set-btn.danger:hover { background: rgba(240,84,75,.16); }
.set-btn.demo {
  color: #f0b54b; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3);
}
.set-btn.demo:hover { background: rgba(245,158,11,.16); }
.set-btn-wide { width: 100%; text-align: center; padding: 9px 13px; }

.set-toggle {
  width: 46px; height: 27px; border-radius: 999px;
  background: #2a2f3a; position: relative; flex-shrink: 0;
  transition: background .2s;
}
.set-toggle.on { background: #20bd76; }
.set-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s;
}
.set-toggle.on .set-toggle-knob { left: 22px; }

.set-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: #34d488;
  background: rgba(32,189,118,.12); border: 1px solid rgba(32,189,118,.3);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap; flex-shrink: 0;
}
.set-badge.warn {
  color: var(--amber); background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.32);
}

.set-select-wrap { position: relative; flex-shrink: 0; }
.set-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: inherit; font-size: 12px; font-weight: 600; color: #e7eaf0;
  background: #1b1f27; border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; padding: 7px 30px 7px 12px;
  cursor: pointer; max-width: 165px;
  text-overflow: ellipsis; white-space: nowrap;
}
.set-select option, .set-select optgroup { background: var(--navy2); color: var(--white); }
.set-select-chev {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: #7e8794; pointer-events: none;
}

.set-link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  text-decoration: none; color: inherit; transition: opacity .15s;
}
.set-link-row:last-child { border-bottom: none; }
.set-link-row:hover { opacity: .72; }
.set-link-arrow { color: #34d488; font-size: 15px; flex-shrink: 0; }

/* ══ EMPTY STATE ══ */
.empty-state {
  text-align: center; color: var(--muted);
  padding: 40px 20px; line-height: 2; font-size: 13px;
}

/* ══ FLAGS / UTILITY ══ */
.flag { font-size: 20px; line-height: 1; flex-shrink: 0; }
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; }

/* ══ FLAG IMAGES (Twemoji via CDN — works on Windows) ══ */
.flag-img {
  width: 21px;
  height: 21px;
  vertical-align: -5px;
  display: inline-block;
  object-fit: cover;
  border-radius: 50%;
  background: #21252e;
  flex-shrink: 0;
}
.flag-sm .flag-img,
.group-row-flag .flag-img {
  width: 17px;
  height: 17px;
  vertical-align: -4px;
  border-radius: 50%;
  object-fit: cover;
}

/* ══ TOURNAMENT PATH ENHANCEMENTS ══ */
.path-step-wide { min-width: 140px; }

.path-opp {
  font-size: 11px; font-weight: 700; color: var(--white);
  margin: 3px 0 1px; display: flex; align-items: center; gap: 2px;
}
.path-sub {
  font-size: 8px; color: var(--muted); margin-top: 2px; line-height: 1.4;
}
.path-sub-hdr {
  font-weight: 700; color: var(--muted); letter-spacing: 0.04em;
  text-transform: uppercase; font-size: 8px; margin-bottom: 3px;
}
.path-cands { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; }
.path-cand {
  display: flex; align-items: center; gap: 3px;
  font-size: 9px; color: var(--muted);
  padding: 2px 0;
}
.path-cand-top { color: var(--white); }
.path-cand-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path-cand-meta { color: var(--muted); font-size: 8px; flex-shrink: 0; }
.path-cand-pts  { color: var(--gold); font-weight: 700; font-size: 9px; flex-shrink: 0; padding-left: 3px; }
.path-cand-top .path-cand-meta { color: var(--muted); }

/* ══ ANALYZER REDESIGN (mockup Frames 6 & 7) ══ */
.az-page-title { font-size: 24px; font-weight: 800; color: var(--white); letter-spacing: -.025em; margin: 2px 0 12px; padding: 0 2px; }

/* Circular flag badge — shared analyzer vocabulary */
.cflag {
  border-radius: 50%; overflow: hidden; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: #21252e; border: 1px solid rgba(255,255,255,.09);
  flex-shrink: 0; width: 18px; height: 18px;
}
.cflag .flag-img {
  position: absolute; top: 50%; left: 50%; width: 144%; height: 144%;
  transform: translate(-50%,-50%); object-fit: cover; border-radius: 0; background: none;
}
.cflag.empty { background: #1d212a; border-style: dashed; border-color: rgba(255,255,255,.18); }

/* Projected standings rows */
.az-srow {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px;
  border-left: 3px solid transparent; border-bottom: 1px solid rgba(255,255,255,.04);
}
.az-srow:last-child { border-bottom: none; }
.az-srow.qualified   { border-left-color: var(--green); background: rgba(32,189,118,.04); }
.az-srow.third-place { border-left-color: var(--gold); }
.az-srow.eliminated  { border-left-color: var(--crimson); opacity: .6; }
.az-srank { font-size: 10px; font-weight: 800; width: 10px; text-align: center; color: var(--muted); }
.az-srow.qualified .az-srank   { color: var(--green); }
.az-srow.third-place .az-srank { color: var(--gold); }
.az-sname {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #f3f5f9; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.az-srow.third-place .az-sname, .az-srow.eliminated .az-sname { font-weight: 600; color: #e7eaf0; }
.az-sgd  { font-size: 10px; color: var(--muted); min-width: 24px; text-align: right; }
.az-spts { font-size: 13px; font-weight: 800; min-width: 18px; text-align: right; color: var(--muted); }
.az-srow.qualified .az-spts   { color: #34d488; }
.az-srow.third-place .az-spts { color: var(--gold); }

/* What-if toggle teams use circular flags */
.az-toggle-teams .cflag { width: 18px; height: 18px; }

/* Tournament path: R32 next-match step + opponent name */
.path-step.path-r32 { border-color: #f59e0b; border-style: dashed; }
.path-opp-name { font-size: 11px; font-weight: 700; color: var(--white); }

/* ══ BRACKET PREDICTOR ══ */
.bp-round-label {
  font-size: 11px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 14px 0 6px;
}
.bp-round-dates {
  color: var(--muted); font-weight: 400;
  text-transform: none; letter-spacing: 0; font-size: 10px;
}
.bp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 4px;
}
.bp-single { grid-template-columns: 1fr; max-width: 280px; }
.bp-card {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.bp-card-hdr {
  font-size: 9px; color: var(--muted);
  background: var(--navy); padding: 4px 8px;
  letter-spacing: 0.04em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.bp-team {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; transition: background 0.12s;
}
.bp-team[onclick]:hover { background: rgba(255,255,255,0.04); }
.bp-name {
  flex: 1; font-size: 12px; font-weight: 500; color: var(--white);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-team.bp-winner { background: rgba(230,195,106,.08); }
.bp-team.bp-winner .bp-name { color: var(--gold); font-weight: 700; }
.bp-team.bp-loser  { opacity: 0.35; }
.bp-tbd-ico { font-size: 14px; }
.bp-check   { color: var(--gold); font-size: 12px; font-weight: 900; flex-shrink: 0; }
.bp-divider { height: 1px; background: var(--border); opacity: 0.5; }

/* what-if rollover banner in bracket predictor */
.bp-ovr-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 10px; border-radius: 8px; margin-bottom: 8px;
}

/* ── Projected bracket header (Analyzer · Bracket subtab) ── */
.bp-proj-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 2px 16px 10px;
}
.bp-proj-title   { font-size: 13px; font-weight: 800; color: var(--white); }
.bp-proj-sub     { font-size: 11px; color: #7e8794; margin-top: 2px; line-height: 1.4; }
.bp-conf-legend  { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.bp-conf-item    { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; color: #6a727e; white-space: nowrap; }
.bp-conf-dot     { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.conf-confirmed  { background: #e6c36a; }
.conf-likely     { background: #f59e0b; }
.conf-open       { background: #3a414c; }
/* Round label confidence colors */
.round-label.bp-confirmed { color: #e6c36a; }
.round-label.bp-likely    { color: #f59e0b; }
.round-label.bp-open      { color: #8a93a0; }
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.4);
  font-size: 11px; color: var(--amber); font-weight: 600;
}

/* Settings — Resources section */
.modal-section-label {
  font-size: 10px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 14px 0 6px;
}
.modal-link-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: opacity 0.15s;
}
.modal-link-row:last-of-type { border-bottom: none; }
.modal-link-row:hover { opacity: 0.75; }
.modal-link-arrow {
  font-size: 16px; color: var(--gold); flex-shrink: 0; padding-left: 8px;
}

/* Data source badge in header */
.src-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
  letter-spacing: 0.03em; vertical-align: middle;
  cursor: default;
}
/* ✓ when ESPN is live — minimal, unobtrusive */
.src-espn  { color: #3a8c57; background: none; border: none; }
/* ⚠ when fallback to Claude — red, stands out */
.src-warn  { color: var(--crimson); background: rgba(240,84,75,.1); border: 1px solid rgba(240,84,75,.25); border-radius: 4px; padding: 1px 5px; }
.src-claude { background: rgba(240,84,75,.1); color: var(--crimson); border: 1px solid rgba(240,84,75,.25); }

/* ── Goals + Cards on match cards ── */
.mc-events {
  padding: 2px 0 3px 28px; /* indent under flag */
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.mc-scorers {
  font-size: 10px; color: var(--muted); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-cards { font-size: 12px; line-height: 1; flex-shrink: 0; }

/* Schedule row events (compact, single line) */
.sched-events {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 0 1px; flex-wrap: wrap;
}
.sched-events .mc-scorers { font-size: 10px; }
.sched-events .mc-cards   { font-size: 11px; }
.sched-ev-sep { color: var(--dim); font-size: 10px; }

/* Schedule row events — one line per team */
.sched-events {
  padding: 2px 0 1px;
  display: flex; flex-direction: column; gap: 1px;
}
.sched-ev-row {
  font-size: 10px; color: var(--muted);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.4;
}
/* ── Live bracket card glow ── */
.bracket-card.bc-live {
  border-color: var(--crimson);
  box-shadow: 0 0 0 1px rgba(240,84,75,.4), 0 0 14px rgba(240,84,75,.2);
  animation: bc-pulse 2s ease-in-out infinite;
}
@keyframes bc-pulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(240,84,75,.4), 0 0 14px rgba(240,84,75,.2); }
  50%      { box-shadow: 0 0 0 2px rgba(240,84,75,.55), 0 0 22px rgba(240,84,75,.35); }
}

/* ── Today tab — upcoming accordion ── */
.upcoming-toggle {
  display: flex; justify-content: space-between; align-items: center;
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--navy3); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--white);
  transition: background 0.15s;
}
.upcoming-toggle:hover { background: var(--navy4); }
.upcoming-chevron { color: var(--gold); font-size: 11px; }
.upcoming-day-hdr {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 10px 4px 4px;
}
.upcoming-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; font-size: 11px;
}
.upcoming-row.my-t { border-color: rgba(212,175,55,0.4); }
.upcoming-time  { color: var(--gold); font-weight: 700; font-size: 10px; min-width: 52px; }
.upcoming-grp   { color: var(--muted); font-size: 9px; font-weight: 700;
                  background: var(--navy4); padding: 2px 5px; border-radius: 3px; }
.upcoming-teams-txt { flex: 1; color: var(--white); }
.upcoming-vs    { color: var(--muted); font-size: 10px; }

/* Timezone select in settings */
.modal-select {
  background: var(--navy3);
  color: var(--white);
  border: 1px solid var(--dim);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
  min-width: 130px;
  max-width: 165px;
}
.modal-select option,
.modal-select optgroup { background: var(--navy2); color: var(--white); }

/* ── Match stats drawer ── */
.stats-toggle {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 8px 0 0; padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px; color: var(--muted); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.stats-toggle:hover         { background: rgba(255,255,255,0.07); color: var(--white); }
.stats-toggle.open          { color: var(--gold); border-color: rgba(212,175,55,0.3); }
.sched-stats                { margin: 4px 0 0; }

/* ── Match Stats panel (mockup Frame 12) ── */
.match-stats-panel {
  background: var(--card); border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px; padding: 6px 16px; margin-bottom: 14px;
}
.stat-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.stat-row:last-child { border-bottom: none; }
/* Fixed-width outer column keeps the centre bar perfectly aligned */
.stat-val {
  width: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #8a93a0;
}
.stat-val.lead { font-weight: 800; color: #34d488; }
.stat-val.trail{ font-weight: 600; color: #8a93a0; }
.stat-val.lead-r{ font-weight: 800; color: var(--white); }
.stat-mid  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.stat-bar  {
  height: 6px; border-radius: 4px;
  overflow: hidden; display: flex; gap: 2px;
}
.stat-bar-1 { height: 100%; background: #20bd76; flex-shrink: 0; border-radius: 4px 0 0 4px; }
.stat-bar-2 { height: 100%; background: #3a414c; flex-shrink: 0; border-radius: 0 4px 4px 0; }
.stat-val-inner { display: inline-block; }
.stat-pill-1 {}
.stat-pill-2 {}
.stat-label {
  font-size: 10.5px; color: #8a93a0; font-weight: 600; text-align: center;
}
/* Stats legend row */
.stat-legend {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.stat-legend-title { font-size: 11px; font-weight: 700; color: #7e8794; text-transform: uppercase; letter-spacing: .07em; }
.stat-legend-teams { display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 700; color: #9aa3af; }
.stat-legend-team  { display: inline-flex; align-items: center; gap: 5px; }
.stat-legend-dot   { width: 9px; height: 9px; border-radius: 3px; }
/* MotM card */
.motm-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid rgba(230,195,106,.25);
  border-radius: 16px; padding: 13px 15px; margin-bottom: 14px;
}
.motm-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(150deg, #2a2616, #1a1a14);
  border: 1px solid rgba(230,195,106,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #e6c36a;
}
.motm-body { flex: 1; min-width: 0; }
.motm-label { font-size: 9.5px; font-weight: 800; color: #e6c36a; text-transform: uppercase; letter-spacing: .06em; }
.motm-name  { font-size: 14px; font-weight: 800; color: var(--white); margin-top: 2px; }
.motm-sub   { font-size: 11px; color: #7e8794; margin-top: 1px; }
.motm-rating{ text-align: right; flex-shrink: 0; }
.motm-rating-val { font-size: 20px; font-weight: 800; color: #e6c36a; line-height: 1; }
.motm-rating-lbl { font-size: 8px; font-weight: 700; color: #6a727e; letter-spacing: .05em; margin-top: 2px; }

/* ── Groups sub-nav ── */
.groups-subnav {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.subnav-btn {
  flex: 1; padding: 10px 0; border: none;
  border-bottom: 2px solid transparent;
  background: none; color: var(--muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.subnav-btn.active { color: var(--green); border-bottom-color: var(--green); }
.subnav-btn:hover:not(.active) { color: var(--white); }

/* ── Top Scorers list (mockup Frame 11) ── */
.scorers-header { display: flex; align-items: flex-end; justify-content: space-between; margin: 4px 2px 12px; }
.scorers-title   { font-size: 16px; font-weight: 800; color: var(--white); letter-spacing: -.02em; }
.scorers-subtitle{ font-size: 11px; color: #7e8794; margin-top: 2px; }
.scorers-shoe    { font-size: 18px; }
.scorers-list {
  background: var(--card); border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px; overflow: hidden;
}
.scorer-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.scorer-row:last-child { border-bottom: none; }
.scorer-row.top1 { background: rgba(230,195,106,.04); }
.scorer-rank { width: 22px; text-align: center; flex-shrink: 0; }
.scorer-rank.medal { font-size: 16px; }
.scorer-rank.num   { font-size: 12px; font-weight: 800; color: #8a93a0; }
.scorer-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(150deg, #252b35, #1a1f27);
  border: 1px solid rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #cdd3dc; flex-shrink: 0;
}
.scorer-row.top1 .scorer-avatar { box-shadow: 0 0 0 2.5px #e6c36a; }
.scorer-info { flex: 1; min-width: 0; }
.scorer-name-row { display: flex; align-items: center; gap: 7px; }
.scorer-name {
  font-size: 13.5px; font-weight: 700; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scorer-abbr {
  font-size: 9px; font-weight: 700; color: #9aa3af;
  background: rgba(255,255,255,.06); border-radius: 4px;
  padding: 2px 5px; flex-shrink: 0; white-space: nowrap;
}
.scorer-bar-wrap { margin-top: 6px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.scorer-bar { height: 100%; background: linear-gradient(90deg,#23c97e,#20bd76); border-radius: 3px; }
.scorer-goals-wrap { text-align: right; flex-shrink: 0; }
.scorer-goals { font-size: 18px; font-weight: 800; color: var(--white); line-height: 1; font-variant-numeric: tabular-nums; }
.scorer-row.top1 .scorer-goals { color: #e6c36a; }
.scorer-goals-lbl { font-size: 8.5px; font-weight: 700; color: #6a727e; letter-spacing: .04em; margin-top: 1px; }

/* src-warn consolidated above near src-badge */

/* ── 3rd Place Race (mockup Frame 10) ── */
.third-title { font-size: 16px; font-weight: 800; color: var(--white); letter-spacing: -.02em; margin: 4px 2px 3px; }
.third-note  { font-size: 11px; color: #7e8794; margin: 0 2px 12px; line-height: 1.45; }
.third-list  { background: var(--card); border: 1px solid rgba(255,255,255,.06); border-radius: 18px; overflow: hidden; }

.third-colhdr,
.third-row {
  display: grid;
  grid-template-columns: 20px 22px 1fr 22px 32px 28px;
  gap: 6px;
}
.third-colhdr {
  padding: 9px 14px;
  font-size: 10px; font-weight: 700; color: #6a727e; letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.third-colhdr .c { text-align: center; }

.third-row {
  padding: 8px 14px; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.04);
  border-left: 3px solid transparent;
}
.third-row:last-child { border-bottom: none; }
.third-row.third-in  { border-left-color: var(--green); background: rgba(32,189,118,.04); }
.third-row.third-out { opacity: .62; }
.third-row.third-idle{ opacity: .5; }

.third-rank { font-size: 11px; font-weight: 800; color: #6a727e; }
.third-row.third-in .third-rank { color: var(--green); }

.third-grp {
  font-size: 9px; font-weight: 800; color: #9aa3af;
  background: rgba(255,255,255,.06); border-radius: 5px;
  padding: 2px 0; text-align: center;
}

.third-team  { display: flex; align-items: center; gap: 8px; min-width: 0; }
.third-name  {
  font-size: 12.5px; font-weight: 600; color: #aeb6c2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.third-row.third-in .third-name { font-weight: 700; color: var(--white); }

.third-row .th-stat { font-size: 11px; text-align: center; color: #7e8794; }
.third-row .th-stat.pos { color: #34d488; font-weight: 600; }
.third-row .th-stat.neg { color: #f0726b; font-weight: 600; }
.third-row .th-stat.pts { font-size: 13px; font-weight: 800; color: #aeb6c2; }
.third-row.third-in .th-stat.pts { color: var(--white); }

.third-cutoff {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; background: rgba(240,84,75,.05);
}
.third-cutoff-line { flex: 1; height: 1px; background: rgba(240,84,75,.22); }
.third-cutoff-txt  {
  font-size: 9px; font-weight: 800; color: #f0726b;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}

/* Scrollable 3-item sub-nav */
.groups-subnav { overflow-x: auto; scrollbar-width: none; }
.groups-subnav::-webkit-scrollbar { display: none; }
.subnav-btn { white-space: nowrap; flex-shrink: 0; }

/* ── AI Match Preview ── */
/* Events wrapping — individual spans so lines break cleanly */
.mc-scorers {
  display: flex; flex-wrap: wrap; gap: 0 4px;
  font-size: 11px; color: var(--muted);
  margin: 1px 0;
}
.mc-ev {
  white-space: nowrap;
  font-size: 11px; color: var(--muted);
}
.mc-ev::after { content: ' ·'; color: var(--dim); margin-left: 2px; }
.mc-ev:last-child::after { content: ''; }
.mc-cards-wrap {
  display: flex; flex-wrap: wrap; gap: 0 4px;
  font-size: 11px; color: var(--muted);
  margin: 1px 0;
}

.preview-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 10px 0 0; padding: 0;
  background: none; border: none; cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--muted);
  font-family: inherit; transition: color 0.2s;
}
.preview-btn:hover { background: none; color: var(--white); }
/* Preview generated — green signals it's ready to read */
.preview-btn.preview-ready       { color: var(--green); }
.preview-btn.preview-ready:hover { color: #34d488; }
/* Preview open — muted "Hide" link */
.preview-btn.preview-open       { color: var(--muted); }
.preview-btn.preview-open:hover { color: var(--white); }

.preview-loading {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 8px 0 0; padding: 8px; font-size: 11px; color: var(--muted);
}
.preview-spin { display: inline-block; animation: spin 1s linear infinite; font-size: 14px; }

/* ══ AI PREVIEW PANEL — premium editorial design ══ */
.preview-panel {
  margin: 12px 0 0;
  background: rgba(230,195,106,.05);
  border: 1px solid rgba(230,195,106,.18);
  border-radius: 14px;
  overflow: hidden;
}
.pv-hed {
  padding: 10px 14px 9px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pv-hed-lbl {
  font-size: 10px; font-weight: 800;
  color: var(--gold); letter-spacing: .09em; text-transform: uppercase;
}
.pv-body { padding: 14px 14px 4px; }

/* Section block — label above body, no borders, spacing is the separator */
.pv-blk { margin-bottom: 16px; }
.pv-lbl {
  display: block;
  font-size: 10px; font-weight: 700; color: #6a727e;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 5px;
}
.pv-txt {
  margin: 0;
  font-size: 13px; color: #aab2c0; line-height: 1.6;
}
.pv-edge {
  margin: 6px 0 0;
  font-size: 12px; color: #7e8794; line-height: 1.45; font-style: italic;
}

/* Tournament Form rows: team name bold left, result text right */
.pv-formrows { display: flex; flex-direction: column; gap: 6px; }
.pv-formrow  { display: flex; gap: 10px; align-items: baseline; }
.pv-formteam {
  font-size: 12px; font-weight: 700; color: var(--white);
  white-space: nowrap; min-width: 64px; flex-shrink: 0;
}
.pv-formtxt  { font-size: 12px; color: #8a93a0; line-height: 1.5; }

/* Key Duel: player names large + bold, "vs" small grey */
.pv-duel {
  display: flex; align-items: center; gap: 9px;
  flex-wrap: wrap; margin-bottom: 7px;
}
.pv-duel-p  { font-size: 15px; font-weight: 700; color: var(--white); }
.pv-duel-vs { font-size: 11px; font-weight: 600; color: #6a727e; }

/* Prediction: label + big gold score inline, reasoning below */
.pv-pred { margin-bottom: 14px; }
/* Score row: team name — big score — team name */
.pv-pred-score-row {
  display: flex; align-items: center; gap: 8px;
  margin: 5px 0 8px;
}
.pv-pred-team {
  flex: 1; font-size: 11px; font-weight: 700; color: #6a727e;
  text-align: right; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pv-pred-team-r { text-align: left; }
.pv-pred-score {
  font-size: 22px; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  flex-shrink: 0;
}

/* ── Overdue match (kickoff passed, no ESPN data yet) ── */
.overdue-col {
  background: rgba(245,158,11,.06) !important;
  border-right-color: rgba(245,158,11,.2) !important;
}
.mc-overdue {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800;
  color: var(--amber); letter-spacing: .05em;
}
.mc-espn-wait {
  font-size: 10px; color: var(--amber); opacity: .8;
}
.sched-overdue {
  font-size: 10px; font-weight: 700; color: var(--amber);
  display: inline-flex; align-items: center; gap: 3px;
}

/* ── Live countdown + Check Now ── */
.refresh-cd {
  font-size: 10px; color: var(--amber);
  margin-left: 6px; font-weight: 600;
}
.check-now-btn {
  background: rgba(245,158,11,.18); border: 1px solid rgba(245,158,11,.5);
  color: var(--amber); border-radius: 5px;
  font-size: 10px; font-weight: 800; padding: 2px 7px;
  cursor: pointer; margin-left: 4px; white-space: nowrap;
  transition: background .15s;
}
.check-now-btn:hover { background: rgba(245,158,11,.3); }
.mc-espn-wait {
  display: flex; align-items: center; gap: 2px;
  font-size: 10px; color: var(--amber); flex-wrap: wrap;
}
.overdue-secs { font-weight: 800; color: var(--amber); min-width: 20px; }

/* ── Win Probability (Today + Schedule) ── */
.mc-prob { padding: 8px 0 2px; }
.mc-prob-bar {
  display: flex; height: 4px; border-radius: 999px; overflow: hidden; gap: 1px;
  margin-bottom: 5px; background: rgba(255,255,255,.06);
}
.mc-prob-seg { height: 100%; min-width: 4px; border-radius: 999px; }
.mc-prob-home { background: var(--green); }
.mc-prob-draw { background: #4a505c; }
.mc-prob-away { background: #3a8be0; }
.mc-prob-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 700; color: #7a828e;
}
.mc-prob-lbl-c { color: #5a6270; }
.mc-prob-team { color: #9aa2ae; font-weight: 600; margin-right: 3px; }

/* Schedule row win probability mini-bar */
.srow-prob-wrap { margin: 3px 0 1px; }
.srow-prob-bar {
  display: flex; height: 3px; border-radius: 999px; overflow: hidden; gap: 1px;
  background: rgba(255,255,255,.05); margin-bottom: 3px;
}
.srow-prob-h { background: var(--green); min-width: 3px; }
.srow-prob-d { background: #4a505c; min-width: 3px; }
.srow-prob-a { background: #3a8be0; min-width: 3px; }
.srow-prob-nums {
  display: flex; justify-content: space-between;
  font-size: 9px; color: #606878;
}
.srow-prob-mid { color: #505560; }

/* Schedule team filter search */
.sched-filter-wrap { padding: 0 16px 12px; }
.sched-search-box {
  display: flex; align-items: center; gap: 8px;
  background: #15181c; border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 8px 12px;
  transition: border-color .15s;
}
.sched-search-box:focus-within { border-color: rgba(32,189,118,.35); }
.sched-search-ico { width: 14px; height: 14px; flex-shrink: 0; color: #6a727e; }
.sched-search-inp {
  flex: 1; background: none; border: none; outline: none;
  font-size: 14px; color: var(--white); font-family: inherit;
}
.sched-search-inp::placeholder { color: #4a505c; }
.sched-search-clear {
  background: none; border: none; color: #6a727e; font-size: 14px;
  cursor: pointer; padding: 0 2px; line-height: 1;
}
.sched-search-clear:hover { color: var(--white); }

/* ── Team Profile Sheet ── */
#team-profile-modal {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0,0,0,0.6);
}
.tp-sheet {
  background: #0f1217;
  border-radius: 20px 20px 0 0;
  border-top: 2px solid rgba(255,255,255,.08);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
  width: 100%; max-width: 520px; margin: 0 auto;
  max-height: 88vh; display: flex; flex-direction: column;
}
.tp-sheet-bar {
  display: flex; justify-content: flex-end;
  padding: 10px 16px 4px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.tp-close {
  background: none; border: 1px solid var(--dim);
  color: var(--muted); font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 6px; cursor: pointer;
}
.tp-close:hover { color: var(--white); border-color: var(--muted); }
/* Titled header bar (mockup Frame 8) */
.tp-sheet-bar-titled { justify-content: space-between; align-items: center; padding: 12px 14px; }
.tp-sheet-title { font-size: 13px; font-weight: 700; color: var(--white); }
.tp-close-icon {
  width: 34px; height: 34px; border-radius: 11px;
  background: #171a21; border: 1px solid rgba(255,255,255,.07);
  color: #aab2c0; font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.tp-close-icon:hover { color: var(--white); border-color: rgba(255,255,255,.15); }
.tp-content { overflow-y: auto; padding: 16px; flex: 1; background: #0f1217; }

.tp-loading {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px 20px; gap: 10px;
}
.tp-flag-lg { width: 54px; height: 54px; font-size: 20px; line-height: 1; }
.tp-flag-tile {
  width: 56px; height: 56px; border-radius: 18px;
  background: linear-gradient(145deg, #1d2233, #151820);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; flex-shrink: 0;
}
.tp-loading .tp-flag-lg { width: 56px; height: 56px; }
.tp-team-name { font-size: 22px; font-weight: 800; color: var(--white); }
.tp-spinner { font-size: 13px; color: var(--muted); }
.tp-badges { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.tp-badge {
  font-size: 10px; font-weight: 700; color: var(--gold);
  background: rgba(212,175,55,.12); border-radius: 6px;
  padding: 3px 8px; white-space: nowrap;
}
.tp-badge-neutral { color: #aab2c0; background: #1d212a; }
.tp-header {
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 14px;
}
.tp-head-info { min-width: 0; }

/* Section label above a card (mockup) */
.tp-label {
  font-size: 10px; font-weight: 700; color: #6a727e;
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 8px; padding: 0 2px;
}
.tp-card {
  background: #15181c; border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px; padding: 14px; margin-bottom: 13px;
}
.tp-card.tp-info { padding: 4px 14px; }

/* ── Current Standing row + qualification badge ── */
.tp-standing-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
}
.tp-standing-pos { font-size: 13px; font-weight: 700; color: var(--white); }
.tp-qual-badge {
  font-size: 10px; font-weight: 800; padding: 2px 8px;
  border-radius: 5px; letter-spacing: .04em; flex-shrink: 0;
}
.tp-qual-q { background: rgba(32,189,118,.18); color: #34d488; }
.tp-qual-c { background: rgba(245,158,11,.15); color: var(--amber); }
.tp-qual-e { background: rgba(239,68,68,.13);  color: #f87171; }

/* ── Eliminated status card ── */
.tp-status-eliminated {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  font-size: 13px; font-weight: 700; color: #f87171;
}
.tp-elim-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(239,68,68,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; flex-shrink: 0;
}


  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.tp-up-row:first-child { padding-top: 4px; }
.tp-up-row:last-child { border-bottom: none; padding-bottom: 4px; }
.tp-up-team { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #e7eaf0; }
.tp-up-time { font-size: 11px; color: #7e8794; flex-shrink: 0; }

.tp-titles { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-weight: 700; }
.tp-pin {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; cursor: pointer; font-family: inherit;
  color: var(--muted); background: #1d212a; border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 8px; white-space: nowrap;
}
.tp-pin.on { color: #34d488; background: rgba(32,189,118,.12); border-color: rgba(32,189,118,.3); }

.tp-section {
  background: #1a1d24;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  margin-bottom: 10px;
}
.tp-section-title {
  font-size: 10px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 8px;
}
.tp-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; font-size: 12px; padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.tp-row:last-child { border-bottom: none; }
.tp-row-lbl { color: var(--muted); flex-shrink: 0; }
.tp-row span:last-child { text-align: right; color: var(--white); font-weight: 600; }

/* New TP modal structure */
.tp-modal-inner { display: flex; flex-direction: column; height: 100%; }
.tp-modal-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.tp-modal-title { flex: 1; font-size: 16px; font-weight: 700; color: var(--white); }
.tp-modal-body { flex: 1; overflow-y: auto; padding: 16px 16px 32px; }
.tp-close { background: none; border: 1px solid var(--dim); color: var(--muted); font-size: 18px; font-weight: 300; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tp-pin-btn { background: none; border: 1px solid var(--dim); color: var(--muted); font-size: 16px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.tp-pin-btn.on { color: var(--gold); border-color: var(--gold); }

.tp-hero { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.tp-hero-info { min-width: 0; }
.tp-badge-red { color: var(--crimson); background: rgba(240,84,75,.1); }
.tp-pin-hdr {
  background: none; border: 1px solid var(--dim); color: var(--muted);
  font-size: 16px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tp-pin-hdr.on { color: var(--gold); border-color: var(--gold); }
.tp-section-lbl { font-size: 10px; font-weight: 700; color: #6a727e; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px; padding: 0 2px; margin-top: 16px; }
.tp-section-lbl:first-child { margin-top: 0; }

/* Traditional record hero + stat-row list (replaces the old tile grid) */
.tp-record-hero { text-align: center; padding: 10px 0 16px; }
.tp-record-main { font-size: 34px; font-weight: 800; color: var(--white); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tp-record-sub { font-size: 11px; color: #6a727e; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.tp-stat-rows { padding: 4px 0; }
.tp-sr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13px;
}
.tp-sr:last-child { border-bottom: none; }
.tp-sr span { color: #9aa2ae; }
.tp-sr b { color: var(--white); font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-stat-green { color: var(--green) !important; }
.tp-stat-red { color: var(--crimson) !important; }

/* Next match */
.tp-elim-card { background: rgba(240,84,75,.06); border-color: rgba(240,84,75,.15); font-size: 13px; color: #aab2c0; display: flex; align-items: center; gap: 8px; padding: 12px; }
.tp-elim-ico { color: var(--crimson); font-size: 14px; }
.tp-next-card { display: flex; align-items: center; justify-content: space-between; padding: 12px; }
.tp-next-opp { font-size: 14px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 6px; }
.tp-next-time { font-size: 11px; color: var(--muted); }
.tp-next-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px; color: #cdd3dc; }
.tp-next-row:last-child { border-bottom: none; }

/* Match log — card style */
.tp-match-log { padding: 0; overflow: visible; background: none; border: none; display: flex; flex-direction: column; gap: 6px; }
.tp-ml-card { display: flex; background: #15181c; border: 1px solid rgba(255,255,255,.06); border-radius: 13px; overflow: hidden; }
.tp-ml-bar { width: 3px; flex-shrink: 0; }
.tp-ml-bar-w { background: #20bd76; }
.tp-ml-bar-d { background: #3a4250; }
.tp-ml-bar-l { background: #f0544b; }
.tp-ml-body { flex: 1; padding: 9px 11px; min-width: 0; }
.tp-ml-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tp-ml-opp { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #f3f5f9; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-ml-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.tp-ml-score { display: flex; align-items: center; gap: 3px; }
.tp-ml-n { font-size: 14px; font-weight: 800; color: #f3f5f9; }
.tp-ml-n-lose { color: #4a5668; }
.tp-ml-sep { font-size: 10px; color: #2e3440; }
.tp-ml-pill { font-size: 8px; font-weight: 700; border-radius: 4px; padding: 1.5px 4px; margin-left: 3px; border: 1px solid; }
.tp-ml-pen { color: #c4a255; background: rgba(196,162,85,.1); border-color: rgba(196,162,85,.22); }
.tp-ml-aet { color: #7e9ab8; background: rgba(90,143,168,.1); border-color: rgba(90,143,168,.22); }
.tp-ml-bot { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; gap: 8px; }
.tp-ml-meta { font-size: 10px; color: #4e5868; white-space: nowrap; }
.tp-ml-scorers { font-size: 10px; color: #7e8a98; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Legacy row (kept for any older render path) */
.tp-match-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: start;
  padding: 10px 12px; gap: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.tp-match-row:last-child { border-bottom: none; }
.tp-match-opp { font-size: 13px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 6px; grid-column: 1; }
.tp-match-score { font-size: 13px; font-weight: 700; color: #cdd3dc; grid-column: 2; text-align: right; white-space: nowrap; }
.tp-res-badge { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 5px; align-self: center; grid-column: 3; }
.tp-res-w { background: rgba(32,189,118,.15); color: var(--green); }
.tp-res-d { background: rgba(255,255,255,.08); color: #8a9ab0; }
.tp-res-l { background: rgba(240,84,75,.12); color: var(--crimson); }
.tp-match-meta { font-size: 10px; color: #6a727e; grid-column: 1 / -1; margin-top: -2px; }
.tp-match-scorers { color: #aab2c0; margin-top: 2px; }

/* Individual player cards — one box per player, MOTM-style */
.tp-player-stats { background: none; border: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tp-player-card {
  display: flex; align-items: center; gap: 12px;
  background: #15181c; border: 1px solid rgba(255,255,255,.06); border-radius: 12px;
  padding: 12px 14px;
}
.tp-pc-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(212,175,55,.12); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.tp-pc-body { min-width: 0; flex: 1; }
.tp-pc-name { font-size: 13px; font-weight: 700; color: var(--white); }
.tp-pc-pk { font-size: 11px; color: var(--muted); font-weight: 500; }
.tp-pc-stats { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px; }
.tp-pc-stat { font-size: 11px; color: #7a828e; white-space: nowrap; }
.tp-pc-stat b { font-size: 12px; color: #cdd3dc; font-weight: 700; margin-right: 2px; }
.tp-pc-goals { color: var(--green) !important; }
.tp-pc-assists { color: #3a8be0 !important; }
.tp-pc-yc { color: var(--amber) !important; }
.tp-pc-rc { color: var(--crimson) !important; }
.tp-empty-note { font-size: 12px; color: #6a727e; padding: 10px 2px; }

/* Squad roster */
.tp-roster-group { margin-bottom: 12px; }
.tp-roster-pos-lbl { font-size: 9px; font-weight: 800; color: #5a6270; text-transform: uppercase; letter-spacing: .07em; padding: 4px 0 6px; }
.tp-roster-row { display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.tp-roster-row:last-child { border-bottom: none; }
.tp-roster-num { font-size: 11px; font-weight: 700; color: #5a6270; text-align: center; }
.tp-roster-name { font-size: 12px; color: #cdd3dc; font-weight: 600; }
.tp-roster-club { font-size: 10px; color: #6a727e; }
.tp-roster-age { font-size: 10px; color: #4a505c; }
.tp-loading-sm { font-size: 12px; color: #6a727e; padding: 8px 0; }

.tp-stats-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 4px; text-align: center;
}
.tp-stat { display: flex; flex-direction: column; gap: 2px; }
.tp-stat-n { font-size: 18px; font-weight: 800; color: var(--white); }
.tp-stat-l { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tp-pts-hi { color: var(--gold) !important; }

.tp-player {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.tp-player:last-child { border-bottom: none; }
.tp-player-name { font-size: 12px; font-weight: 700; color: var(--white); }
.tp-player-meta { font-size: 10px; color: var(--muted); }

.tp-upcoming-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.tp-upcoming-row:last-child { border-bottom: none; }
.tp-upcoming-opp { font-weight: 600; color: var(--white); }
.tp-upcoming-time { color: var(--muted); font-size: 10px; }

.tp-notable { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 6px; font-style: italic; }
.tp-sw { display: flex; gap: 9px; font-size: 11.5px; padding: 5px 0; line-height: 1.5; color: #aab2c0; }
.tp-sw b { color: #f3f5f9; }
.tp-sw-ico { flex-shrink: 0; font-size: 14px; line-height: 1.3; }
.tp-sw-ico.up   { color: #34d488; }
.tp-sw-ico.down { color: #f0b54b; }

/* Form dots */
.tp-form { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 13px; padding: 0 2px; }
.form-dot {
  width: 27px; height: 27px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: var(--white);
}
.form-w { background: var(--green); color: #04160d; }
.form-d { background: var(--amber); color: #1a1200; }
.form-l { background: var(--red); color: #fff; }
.form-p { background: var(--dim); color: var(--muted); } /* penalty win treated as P sometimes */

/* Team name links (clickable anywhere) */
.team-link { cursor: pointer; }
.team-link:hover { color: var(--gold) !important; text-decoration: underline dotted; }

/* ── Penalty Shootout display ── */
.mc-sub {
  display: block; font-size: 8px; font-weight: 800;
  color: var(--amber); letter-spacing: .06em; text-align: center;
  margin-top: 2px;
}
.mc-pso-score {
  text-align: center; font-size: 10px; font-weight: 700;
  color: var(--amber); padding: 2px 0;
  border-top: 1px solid rgba(245,158,11,.2);
  border-bottom: 1px solid rgba(245,158,11,.2);
  margin: 2px 0;
}
.row-sub {
  font-size: 8px; font-weight: 800; color: var(--amber);
  margin-left: 4px; vertical-align: middle;
}
.row-pso {
  font-size: 9px; color: var(--amber); font-weight: 700;
  text-align: center; margin-top: 1px;
}
.sched-score-wrap, .row-score-wrap { display: flex; flex-direction: column; align-items: center; }
.bc-pso { font-size: 9px; color: var(--amber); font-weight: 700; margin-left: 2px; }

/* ── H2H preview row ── */
.pv-h2h-row { border-top: 1px solid rgba(255,255,255,.05); padding-top: 8px !important; }
.pv-h2h-last { font-style: italic; color: var(--dim); font-size: 10px; margin-top: 2px; display: block; }

/* ── Halftime badge ── */
.mc-ht {
  font-size: 11px; font-weight: 800;
  color: var(--amber);
  background: rgba(245,158,11,.18);
  border-radius: 4px; padding: 2px 6px;
  letter-spacing: .06em; display: block; text-align: center;
}
.ht-col { background: rgba(245,158,11,.06) !important; }
.ht-badge {
  display: inline-block;
  font-size: 10px; font-weight: 800;
  color: var(--amber);
  background: rgba(245,158,11,.15);
  border-radius: 3px; padding: 2px 7px;
  letter-spacing: .05em;
}

/* ── Schedule events: wrappable spans ── */
.sched-ev-row { display: flex; flex-wrap: wrap; gap: 0 2px; align-items: center; font-size: 11px; color: var(--muted); }
.sched-ev { white-space: nowrap; }
.sched-ev::after { content: ' ·'; color: var(--dim); margin-left: 2px; }
.sched-ev:last-child::after { content: ''; }

/* ── Calculator tab ── */
.calc-summary {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px 4px;
}
.calc-sum-pill {
  font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px;
  letter-spacing: .04em; border: 1px solid transparent;
}
.calc-sum-pill.calc-q  { background: rgba(32,189,118,.14);  color: #34d488; border-color: rgba(32,189,118,.35); }
.calc-sum-pill.calc-q3 { background: rgba(230,195,106,.12); color: var(--gold); border-color: rgba(230,195,106,.35); }
.calc-sum-pill.calc-e  { background: rgba(240,84,75,.12);   color: #f0726b; border-color: rgba(240,84,75,.3); }
.calc-sum-pill.calc-a  { background: rgba(245,158,11,.12);  color: #f0b54b; border-color: rgba(245,158,11,.3); }

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 12px 24px;
}
.calc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.calc-card-hdr {
  display: flex; justify-content: space-between; align-items: center;
  background: #12151a; border-bottom: 1px solid var(--border);
  padding: 7px 11px;
}
.calc-grp-lbl  { font-size: 11px; font-weight: 800; color: #f3f5f9; letter-spacing: .02em; }
.calc-round-lbl { font-size: 9px; color: var(--muted); }

.calc-row {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.calc-row:last-child { border-bottom: none; }
.calc-row-q { background: rgba(34,197,94,.07); }
.calc-row-e { opacity: .45; }

.calc-rank { font-size: 10px; color: var(--dim); width: 10px; flex-shrink: 0; }
.calc-name { font-size: 12px; font-weight: 600; flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.calc-badge {
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
  flex-shrink: 0; letter-spacing: .05em;
}
.calc-bq  { background: rgba(32,189,118,.22);  color: #34d488; }
.calc-bq3 { background: rgba(230,195,106,.18); color: var(--gold); }
.calc-be  { background: rgba(239,68,68,.15);   color: #f87171; }
.calc-ba  { background: var(--surface);         color: var(--muted); }

/* ── Match Summary: Timeline ── */
.match-summary-wrap { border-top: 1px solid var(--border); }

.tl-wrap { padding: 8px 10px 4px; }
.tl-header {
  display: grid; grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
  font-size: 10px; font-weight: 700; color: var(--muted);
  gap: 2px;
}
.tl-th { display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; }
.tl-th-r { flex-direction: row-reverse; text-align: right; }
.tl-th-center { text-align: center; font-size: 12px; }

.tl-row {
  display: grid; grid-template-columns: 1fr 44px 1fr;
  min-height: 22px; align-items: center; gap: 2px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.tl-row:last-child { border-bottom: none; }

.tl-side { display: flex; align-items: center; gap: 4px; overflow: hidden; }
.tl-left  { justify-content: flex-end; }
.tl-right { justify-content: flex-start; }

.tl-name { font-size: 11px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-icon { font-size: 13px; flex-shrink: 0; }
.tl-min  { font-size: 10px; color: var(--muted); font-weight: 700; text-align: center; white-space: nowrap; }

/* ── Match Detail Modal ── */
#match-detail-modal { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(0,0,0,.6); }

.md-trigger-btn {
  display: block; width: 100%; margin-top: 8px;
  background: none; border: 1px solid var(--dim);
  color: var(--muted); font-size: 11px; font-weight: 600;
  padding: 7px 0; border-radius: 8px; cursor: pointer;
  transition: all .15s; letter-spacing: .04em;
}
.md-trigger-btn:hover { border-color: var(--gold); color: var(--gold); }

/* Header */
.md-header { padding: 6px 4px 16px; text-align: center; }
.md-round-label { font-size: 11px; font-weight: 700; color: #7e8794; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.md-teams { display: flex; align-items: flex-start; justify-content: center; gap: 16px; }
.md-team { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.md-team-link { cursor: pointer; transition: opacity .15s; }
.md-team-link:active { opacity: .7; }
.md-team-link:hover .md-tname { color: var(--green); }
.md-flag-badge {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: #21252e; border: 1px solid rgba(255,255,255,.1); flex-shrink: 0;
}
.md-flag-badge .flag-img {
  position: absolute; top: 50%; left: 50%; width: 144%; height: 144%;
  transform: translate(-50%,-50%); object-fit: cover; border-radius: 0; background: none;
}
.md-tname { font-size: 13px; font-weight: 700; color: #f3f5f9; text-align: center; }
/* Stacked goal list in Match Centre header (#13) */
.md-goal-list { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: -2px; width: 100%; }
.md-goal-item { font-size: 10.5px; color: #aab2c0; text-align: center; white-space: nowrap; line-height: 1.5; }
.md-goal-min  { font-size: 9.5px; color: #6a727e; }
.md-score-block { padding-top: 6px; flex-shrink: 0; }
.md-score {
  font-size: 36px; font-weight: 800; color: #f3f5f9; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.md-score-sep { color: #3a414c; font-weight: 400; padding: 0 8px; }
.md-pen-paren {
  font-size: 18px; font-weight: 700; color: var(--gold);
  margin: 0 2px; font-variant-numeric: tabular-nums;
}
.md-status-wrap { margin-top: 14px; }
.md-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 5px 14px; white-space: nowrap;
}
.md-pill-ft   { color: #34d488; background: rgba(32,189,118,.12); border: 1px solid rgba(32,189,118,.35); }
.md-pill-live { color: #f0544b; background: rgba(240,84,75,.12); border: 1px solid rgba(240,84,75,.35); }
.md-pill-ns   { color: #aab2c0; background: #1d212a; border: 1px solid var(--border); }
.md-city { font-size: 11px; color: #6a727e; margin-top: 11px; }
.md-fullstats-btn {
  width: 100%; margin-top: 14px;
  background: linear-gradient(150deg, #23c97e, #15914f);
  border: none; border-radius: 13px; padding: 13px;
  font-size: 13px; font-weight: 700; color: #04160d;
  font-family: inherit; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 6px 18px rgba(32,189,118,.28);
}
.md-fullstats-btn:hover { filter: brightness(1.05); }

.md-gameinfo {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
  padding: 6px 2px 8px;
}

/* Sections */
.md-section {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
}
.md-section-title {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 8px 12px; background: var(--navy4);
  border-bottom: 1px solid var(--border);
}
.md-empty { font-size: 12px; color: var(--muted); padding: 16px 12px; text-align: center; }

/* Loading spinner */
.md-loading { display: flex; align-items: center; gap: 10px; padding: 16px 12px; font-size: 12px; color: var(--muted); }
.md-spinner {
  width: 16px; height: 16px; border: 2px solid var(--dim);
  border-top-color: var(--gold); border-radius: 50%;
  animation: spin .8s linear infinite; flex-shrink: 0;
}

/* Substitution icons */
.sub-out { color: var(--red);   font-size: 11px; }
.sub-in  { color: var(--green); font-size: 11px; }

/* ── Lineups (mockup Frame 13) ── */
.lu-bench-wrap  { margin-top: 14px; }
.lu-bench-title {
  font-size: 11px; font-weight: 700; color: #7e8794;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 9px;
}
.lu-bench-cols  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lu-bench-col-r { }
.lu-bench-pill  {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: #aeb6c2;
  background: #1b1f27; border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px; padding: 4px 8px; margin: 0 5px 6px 0;
}
.lu-bench-pill-num { font-size: 9px; font-weight: 800; color: #7e8794; }
/* Sub cards */
.lu-subs-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 9px;
}
.lu-subs-legend { display: flex; align-items: center; gap: 12px; font-size: 9.5px; font-weight: 700; color: #9aa3af; }
.lu-subs-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.lu-sub-card {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; background: #13161a;
  border: 1px solid rgba(255,255,255,.06); border-radius: 10px; margin-bottom: 6px;
}
.lu-sub-min {
  font-size: 10px; font-weight: 800; color: #aab2c0;
  background: #1d212a; border-radius: 6px; padding: 3px 6px; flex-shrink: 0;
}
.lu-sub-names { flex: 1; min-width: 0; }
.lu-sub-on  {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: #e7eaf0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lu-sub-off {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: #8a93a0; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Player Stats Table */
.ps-team-hdr { font-size: 11px; font-weight: 700; padding: 8px 12px 4px; color: var(--muted); }
.ps-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 4px; }
.ps-table th { padding: 3px 6px; text-align: center; font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--border); }
.ps-table td { padding: 5px 6px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.03); color: var(--muted); }
.ps-table tr:last-child td { border-bottom: none; }
th.ps-name, td.ps-name { text-align: left; padding-left: 12px; }
td.ps-name { color: var(--white); font-weight: 600; }
.ps-pos { font-size: 9px; color: var(--dim); margin-left: 3px; }

/* ── Match Leaders ── */
.md-leaders { padding: 6px 10px 10px; }
.ldr-cat { margin-bottom: 10px; }
.ldr-cat-title { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
.ldr-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12px; }
.ldr-item:last-child { border-bottom: none; }
.ldr-name { flex: 1; color: var(--white); font-weight: 600; }
.ldr-val { font-size: 13px; font-weight: 800; color: var(--gold); }

/* ── 3-Tab Modal ── */
.md-tabs {
  display: flex; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: transparent; flex-shrink: 0; margin-bottom: 4px;
}
.md-tab-btn {
  flex: 1; background: none; border: none;
  color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 10px 0; cursor: pointer; letter-spacing: .03em;
  border-bottom: 2px solid transparent; transition: all .15s;
}
.md-tab-btn.active { color: var(--green); border-bottom-color: var(--green); }

/* ── Header scorers row ── */
.md-scorers-row {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--muted); padding: 4px 0 0;
  gap: 8px;
}
.md-scorers-row span { flex: 1; }
.md-scorers-row span:last-child { text-align: right; }

/* ── Facts Tab Timeline ── */
.facts-timeline { padding: 6px 0 4px; }
.facts-row {
  display: grid; grid-template-columns: 1fr 46px 1fr;
  align-items: center; padding: 7px 0;
}
.facts-home { display: flex; align-items: center; justify-content: flex-end; gap: 8px; text-align: right; }
.facts-away { display: flex; align-items: center; gap: 8px; text-align: left; }
.facts-min  { text-align: center; }
.fr-min-pill {
  font-size: 11px; font-weight: 800; color: #aab2c0;
  background: #1d212a; border-radius: 6px; padding: 3px 7px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fr-text { min-width: 0; }
.fr-name { font-size: 13px; font-weight: 700; color: #f3f5f9; }
.fr-sub  { font-size: 10px; color: #7e8794; margin-top: 1px; }
.fr-strike { text-decoration: line-through; color: var(--muted); font-weight: 600; }
.fr-var  { color: var(--crimson); font-weight: 700; }
.fr-dot  { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.fr-ball { background: #eef1f6; border: 1.5px solid #c0c6cf; }
.fr-card { width: 11px; height: 15px; border-radius: 2px; flex-shrink: 0; }
.fr-yellow { background: #e8c547; }
.fr-red  { background: var(--crimson); }
.fr-icon { font-size: 14px; color: var(--green); flex-shrink: 0; line-height: 1; }
.facts-scorer { font-weight: 600; }
.facts-rscore { font-size: 10px; color: var(--gold); font-weight: 700; }
.facts-og { font-size: 9px; background: rgba(239,68,68,.2); color: #f87171; border-radius: 3px; padding: 1px 4px; }
.facts-pk { font-size: 9px; background: rgba(212,175,55,.2); color: var(--gold); border-radius: 3px; padding: 1px 4px; }
.facts-sub-in  { color: #4ade80; font-size: 11px; font-weight: 600; }
.facts-sub-out { color: #f87171; font-size: 11px; }
.facts-card { font-size: 11px; }

/* HT divider */
.facts-ht {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin: 4px 0;
}
.facts-ht-line { flex: 1; height: 1px; background: var(--dim); }
.facts-ht-pill {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--navy4); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px; white-space: nowrap;
  flex-shrink: 0;
}
.facts-ht-score { color: var(--white); margin-left: 4px; }

/* ── Pitch SVG wrap ── */
.pitch-wrap {
  position: relative; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg,#11271b,#0d1d14);
  border: 1px solid rgba(255,255,255,.06); margin-top: 8px;
}

/* ── MotM (ESPN) ── */
.md-motm-box { }
.md-motm-inner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.md-motm-name { font-size: 15px; font-weight: 700; color: var(--white); }
.md-motm-team { font-size: 11px; color: var(--muted); }
.md-motm-val  { margin-left: auto; font-size: 22px; font-weight: 900; color: var(--gold); }

/* ── User MotM picker ── */
.motm-picker-wrap { padding: 6px 10px 10px; }
.motm-team-label  { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.motm-divider     { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 8px 0 6px; }
.motm-options     { display: flex; flex-wrap: wrap; gap: 6px; }
.motm-pick-btn {
  background: var(--navy4); border: 1px solid var(--border);
  color: var(--muted); font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 20px; cursor: pointer;
  transition: all .15s;
}
.motm-pick-btn.motm-picked {
  background: rgba(212,175,55,.15); border-color: var(--gold);
  color: var(--gold);
}

/* ── Stacked scorers in match header ── */
.md-scorers-stacked { padding: 4px 0 0; font-size: 10px; color: var(--muted); }
.md-sc-home { text-align: left;  padding: 1px 0; }
.md-sc-away { text-align: right; padding: 1px 0; }

/* ── MotM second team label spacing ── */
.motm-team-label-2 { margin-top: 10px; }

/* ── Settings sync row ── */
.modal-row-col { flex-direction: column; align-items: flex-start; gap: 8px; }
.sync-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Card badges (replaces emoji — guaranteed rendering, no font dependency) ── */
.card-badge {
  display: inline-block;
  width: 9px; height: 13px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -1px;
}
.card-badge-yellow { background: #e8c547; }
.card-badge-red    { background: #e0483e; }

/* ── Lineup formation header (above pitch, avoids on-field overlap) ── */
.lu-fm-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 4px 0;
}
.lu-fm-team { display: flex; align-items: center; gap: 5px; }
.lu-fm-team-r { flex-direction: row-reverse; }
.lu-fm-flag { font-size: 14px; }
.lu-fm-name { font-size: 12px; font-weight: 700; color: var(--white); }
.lu-fm-pill {
  font-size: 9.5px; font-weight: 800; color: #34d488;
  background: rgba(32,189,118,.12); border: 1px solid rgba(32,189,118,.3);
  white-space: nowrap;
}
.lu-fm-pill-away {
  font-size: 9.5px; font-weight: 800; color: #9aa3af;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
}
.lu-fm-pill-base {
  border-radius: 6px; padding: 2px 7px;
}
  border-radius: 10px; padding: 1px 7px;
}

/* ── VAR disallowed goals ── */
.facts-var       { color: var(--muted); text-decoration: line-through; font-size: 11px; }
.facts-var-label { font-size: 9px; color: var(--crimson); font-weight: 700; text-decoration: none;
                   display: inline-block; background: rgba(192,24,46,.15);
                   border-radius: 3px; padding: 0 4px; margin-left: 3px; }

/* ── Penalty shootout section ── */
.pso-section {
  margin: 16px 0 4px; background: #0f1217;
  border: 1px solid rgba(255,255,255,.07); border-radius: 14px; overflow: hidden;
}
.pso-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pso-banner-team { display: flex; align-items: center; gap: 7px; flex: 1; }
.pso-banner-team-r { flex-direction: row-reverse; }
.pso-banner-name { font-size: 12px; font-weight: 700; color: #b0b8c4; }
.pso-banner-score { font-size: 22px; font-weight: 900; color: var(--dim); font-variant-numeric: tabular-nums; }
.pso-banner-score.pso-winner { color: var(--green); }
.pso-banner-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); flex-shrink: 0; }
.pso-dot-strips { display: flex; justify-content: space-between; padding: 8px 14px; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.04); }
.pso-dot-strip   { display: flex; gap: 7px; flex: 1; }
.pso-dot-strip-r { justify-content: flex-end; }
/* Solid colored circles — green = scored, gray = missed. No glyph inside. */
.pso-dot { display: inline-block; border-radius: 50%; flex-shrink: 0; }
.pso-dot-strip .pso-dot { width: 13px; height: 13px; }
.pso-dot-scored { background: var(--green); }
.pso-dot-missed { background: #4a505c; }
.pso-kicks { padding: 4px 0 8px; }
/* name(left) — icon — number — icon — name(right): icons cluster at center, names sit at the outer edges */
.pso-kick-row {
  display: grid; grid-template-columns: 1fr 20px 26px 20px 1fr;
  align-items: center; padding: 6px 14px; gap: 2px;
}
.pso-kname { font-size: 11px; color: #b0b8c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pso-kname-left  { text-align: left; }
.pso-kname-right { text-align: right; }
.pso-icon-cell { display: flex; align-items: center; justify-content: center; }
.pso-icon-cell .pso-dot { width: 11px; height: 11px; }
.pso-kick-num { text-align: center; font-size: 10px; color: var(--dim); font-weight: 700; }



/* ════════════════════════════════════════════════════════
   FotMob-style match card (Today tab) — vertical layout
   ════════════════════════════════════════════════════════ */
.mc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 11px;
}
.mc-card.mc-card-live { border-color: rgba(240,84,75,.28); }
.mc-card.my-team-card { border-color: rgba(32,189,118,.5); box-shadow: 0 0 14px rgba(32,189,118,.1); }

.mc-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.mc-grp-pill {
  font-size: 10px; font-weight: 700; color: var(--muted);
  background: #1d212a; border-radius: 6px;
  padding: 3px 8px; letter-spacing: .04em; white-space: nowrap;
}
.mc-status-ft {
  font-size: 10px; font-weight: 700; color: #6a727e;
  background: #1d212a; border-radius: 6px;
  padding: 3px 8px; letter-spacing: .05em; white-space: nowrap;
}
.mc-status-ht {
  font-size: 11px; font-weight: 800; color: var(--amber);
  background: rgba(245,158,11,.16); border-radius: 6px; padding: 3px 8px;
}
.mc-status-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; color: var(--crimson);
  font-variant-numeric: tabular-nums;
}
.mc-status-time {
  font-size: 13px; font-weight: 800; color: var(--white);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mc-status-tz { font-size: 10px; font-weight: 600; color: var(--muted); }

/* Delay / postponement badge */
.mc-status-delay {
  font-size: 10px; font-weight: 800; color: var(--amber);
  background: rgba(245,158,11,.14); border-radius: 6px;
  padding: 3px 8px; letter-spacing: .05em; white-space: nowrap;
}
/* Reason note below teams on delayed match cards */
.mc-delay-note {
  font-size: 11px; font-weight: 600; color: var(--amber);
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.05);
}
/* Schedule row delay badge + full-span reason bar */
.srow-delay { font-size: 10px; font-weight: 800; color: var(--amber); text-align: center; width: 100%; white-space: nowrap; }
.srow-delay-bar { grid-column: 1 / -1; font-size: 11px; font-weight: 600; color: var(--amber); padding: 0 15px 9px; margin-top: -4px; }

/* Logo image (replaces green tile) */
.header-logo-img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; flex-shrink: 0; display: block; }

.mc-card .mc-team {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 10px; opacity: 1;
}
.mc-card .mc-team:last-of-type { margin-bottom: 0; }
.mc-card .mc-name {
  flex: 1; font-size: 15px; font-weight: 600; color: var(--white);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: -.01em;
}
.mc-card .mc-team.winner .mc-name { font-weight: 700; color: var(--white); }
.mc-card .mc-team.loser { opacity: 1; }
.mc-card .mc-team.loser .mc-name { color: #aeb6c2; font-weight: 600; }
.mc-card .mc-score {
  font-size: 22px; font-weight: 800; color: var(--white);
  font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; flex-shrink: 0;
}
.mc-card .mc-team.winner .mc-score { color: var(--white); }
.mc-card .mc-team.loser .mc-score { color: #aeb6c2; }
.mc-pen-paren {
  font-size: 13px; font-weight: 700; color: var(--gold);
  margin-left: 3px; font-variant-numeric: tabular-nums;
}

.mc-foot {
  /* layout moved to animation section — flex-column with mc-foot-row inside */
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.mc-foot .mc-city {
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-detail-link {
  font-size: 11px; font-weight: 700; color: var(--green);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.mc-detail-link:hover { color: #34d488; }
.mc-card .mc-countdown {
  font-size: 11px; font-weight: 700; color: var(--gold);
  background: rgba(230,195,106,.12); border-radius: 999px;
  padding: 3px 10px; white-space: nowrap; flex-shrink: 0;
}
.mc-card .mc-pso-score {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--amber); padding: 6px 0 0;
}

/* ════════════════════════════════════════════════════════
   Match Centre — full-height sheet
   ════════════════════════════════════════════════════════ */
#match-detail-modal { align-items: stretch; }
#match-detail-modal .tp-sheet {
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  border-top: none;
}
.md-sheet-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: max(12px, env(safe-area-inset-top));
}
.md-back-btn {
  width: 34px; height: 34px; border-radius: 11px;
  background: #171a21; border: 1px solid rgba(255,255,255,.07);
  color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; padding-bottom: 2px;
}
.md-back-btn:hover { color: var(--white); border-color: rgba(255,255,255,.15); }
.md-sheet-title { font-size: 14px; font-weight: 700; color: var(--white); }


/* ══════════════════════════════════════════════════════════════
   ANIMATIONS — premium micro-motion system
   Only fires on deliberate tab switches (via .tab-switching class,
   which expires after 650ms so background refreshes don't re-animate)
   ══════════════════════════════════════════════════════════════ */

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(13px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bracket tab: columns stagger by round ── */
.tab-switching .bracket-col { animation: fadeSlideUp 0.28s ease-out both; }
.tab-switching .bracket-col[data-round="R32"]   { animation-delay: 0ms;   }
.tab-switching .bracket-col[data-round="R16"]   { animation-delay: 80ms;  }
.tab-switching .bracket-col[data-round="QF"]    { animation-delay: 160ms; }
.tab-switching .bracket-col[data-round="SF"]    { animation-delay: 240ms; }
.tab-switching .bracket-col[data-round="Final"] { animation-delay: 320ms; }

/* ── Analyzer tab: az-wrap + calc cards in pairs ── */
.tab-switching .az-wrap { animation: fadeSlideUp 0.25s ease-out both; }
.tab-switching .calc-grid > .calc-card { animation: fadeSlideUp 0.22s ease-out both; }
.tab-switching .calc-grid > .calc-card:nth-child(odd)  { animation-delay: 0ms;  }
.tab-switching .calc-grid > .calc-card:nth-child(even) { animation-delay: 55ms; }

/* ── Subtab content switch (Match Centre tabs, Groups subtabs) ── */
@keyframes fadeSlideUpSm {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.subtab-enter { animation: fadeSlideUpSm 0.2s ease-out both; }

/* ── Stats bars fill animation ── */
@keyframes barFill {
  from { width: 0; }
  to   { width: var(--bar-w, 0%); }
}
.anim-bar { width: 0 !important; animation: barFill 0.65s cubic-bezier(.22,.68,0,1) forwards; }

/* ── mc-foot: column layout for city row + preview toggle row ── */
.mc-foot {
  display: flex; flex-direction: column;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.05);
  gap: 8px;
}
.mc-foot-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

.mc-foot-row .preview-btn { margin: 0; } /* align with Match Centre › on same line */
.tab-switching .today-wrap > .mc-card { animation: fadeSlideUp 0.24s ease-out both; }
.tab-switching .today-wrap > .mc-card:nth-child(3) { animation-delay: 0ms;   }
.tab-switching .today-wrap > .mc-card:nth-child(4) { animation-delay: 55ms;  }
.tab-switching .today-wrap > .mc-card:nth-child(5) { animation-delay: 110ms; }
.tab-switching .today-wrap > .mc-card:nth-child(6) { animation-delay: 165ms; }
.tab-switching .today-wrap > .mc-card:nth-child(7) { animation-delay: 220ms; }
.tab-switching .today-wrap > .mc-card:nth-child(8) { animation-delay: 275ms; }

/* ── Schedule tab: date cards stagger ── */
.tab-switching .schedule-wrap > .sched-card { animation: fadeSlideUp 0.22s ease-out both; }
.tab-switching .schedule-wrap > .sched-card:nth-child(1)  { animation-delay: 0ms;   }
.tab-switching .schedule-wrap > .sched-card:nth-child(2)  { animation-delay: 45ms;  }
.tab-switching .schedule-wrap > .sched-card:nth-child(3)  { animation-delay: 90ms;  }
.tab-switching .schedule-wrap > .sched-card:nth-child(4)  { animation-delay: 135ms; }
.tab-switching .schedule-wrap > .sched-card:nth-child(5)  { animation-delay: 180ms; }
.tab-switching .schedule-wrap > .sched-card:nth-child(6)  { animation-delay: 225ms; }
.tab-switching .schedule-wrap > .sched-card:nth-child(7)  { animation-delay: 270ms; }
.tab-switching .schedule-wrap > .sched-card:nth-child(8)  { animation-delay: 315ms; }
.tab-switching .schedule-wrap > .sched-card:nth-child(9)  { animation-delay: 360ms; }
.tab-switching .schedule-wrap > .sched-card:nth-child(10) { animation-delay: 405ms; }

/* ── Groups tab: pair stagger (2-col grid) ── */
/* ── Groups tab: gstd-cards stagger in pairs (gstd-wrap is the direct parent) ── */
.tab-switching .gstd-wrap > .gstd-card { animation: fadeSlideUp 0.22s ease-out both; }
.tab-switching .gstd-wrap > .gstd-card:nth-child(1),
.tab-switching .gstd-wrap > .gstd-card:nth-child(2)  { animation-delay: 0ms;   }
.tab-switching .gstd-wrap > .gstd-card:nth-child(3),
.tab-switching .gstd-wrap > .gstd-card:nth-child(4)  { animation-delay: 65ms;  }
.tab-switching .gstd-wrap > .gstd-card:nth-child(5),
.tab-switching .gstd-wrap > .gstd-card:nth-child(6)  { animation-delay: 130ms; }
.tab-switching .gstd-wrap > .gstd-card:nth-child(7),
.tab-switching .gstd-wrap > .gstd-card:nth-child(8)  { animation-delay: 195ms; }
.tab-switching .gstd-wrap > .gstd-card:nth-child(9),
.tab-switching .gstd-wrap > .gstd-card:nth-child(10) { animation-delay: 260ms; }
.tab-switching .gstd-wrap > .gstd-card:nth-child(11),
.tab-switching .gstd-wrap > .gstd-card:nth-child(12) { animation-delay: 325ms; }

/* Also animate subtab switches within groups tab */
.subtab-enter.gstd-wrap > .gstd-card { animation: fadeSlideUp 0.22s ease-out both; }
.subtab-enter.gstd-wrap > .gstd-card:nth-child(1),
.subtab-enter.gstd-wrap > .gstd-card:nth-child(2)  { animation-delay: 0ms;   }
.subtab-enter.gstd-wrap > .gstd-card:nth-child(3),
.subtab-enter.gstd-wrap > .gstd-card:nth-child(4)  { animation-delay: 65ms;  }
.subtab-enter.gstd-wrap > .gstd-card:nth-child(5),
.subtab-enter.gstd-wrap > .gstd-card:nth-child(6)  { animation-delay: 130ms; }
.subtab-enter.gstd-wrap > .gstd-card:nth-child(7),
.subtab-enter.gstd-wrap > .gstd-card:nth-child(8)  { animation-delay: 195ms; }
.subtab-enter.gstd-wrap > .gstd-card:nth-child(9),
.subtab-enter.gstd-wrap > .gstd-card:nth-child(10) { animation-delay: 260ms; }
.subtab-enter.gstd-wrap > .gstd-card:nth-child(11),
.subtab-enter.gstd-wrap > .gstd-card:nth-child(12) { animation-delay: 325ms; }

/* ── Analyzer tab: .az-content wrapper animates on subtab switch ── */
.az-content.subtab-enter { animation: fadeSlideUp 0.24s ease-out both; }

/* ── Scorer bars: JS-driven width transition (more reliable than CSS variables in keyframes) ── */
.scorer-bar { transition: width 0.65s cubic-bezier(.22,.68,0,1); }

/* ── Stats bars: remove anim-bar (not reliable on mobile) — back to static width ── */
/* .anim-bar removed; stat bars use plain style="width:X%" again */



/* ── Modal sheet: slide-up on open ── */
.tp-sheet { transform: translateY(56px); transition: transform 0.32s cubic-bezier(.22,.68,0,1.2); }
.modal-overlay.open .tp-sheet { transform: translateY(0); }

/* ── Micro-interactions ── */
.mc-card { transition: transform 0.12s; }
.mc-card:active { transform: scale(0.984); }
.dchip:active { transform: scale(0.92); transition: transform 0.08s; }
.srow-click:active { background: rgba(255,255,255,.04); }
.tab-btn { transition: color 0.18s; }
.tab-btn:active { transform: scale(0.88); transition: transform 0.08s; }
#refresh-btn, #settings-btn { transition: opacity 0.2s, transform 0.1s; }
#refresh-btn:active, #settings-btn:active { transform: scale(0.88); }
.preview-btn { transition: color 0.15s; }