:root {
  --bg: #0a0e1a;
  --surface: #141929;
  --border: #1e2a42;
  --accent: #2563eb;
  --accent-light: #3b82f6;
  --text: #e2e8f0;
  --text-muted: #64748b;
  --win: #22c55e;
  --draw: #f59e0b;
  --loss: #ef4444;
  --played: #1e293b;
  --upcoming: #0f172a;
  --font: "Inter", system-ui, -apple-system, sans-serif;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Header: 3-column full-width sticky bar ── */
header {
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 19% 9% 72%;
  min-height: 90px;
  align-items: stretch;
}

.hdr-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px 12px 24px;
  border-right: 1px solid var(--border);
}
.hdr-title {
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: 900;
  color: var(--text);
  line-height: 1.15;
  white-space: nowrap;
}
.hdr-subtitle {
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
}
.hdr-meta {
  font-size: clamp(10px, 0.85vw, 13px);
  color: var(--text-muted);
  margin-top: 4px;
}
.hdr-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: clamp(10px, 0.85vw, 13px);
  color: var(--text-muted);
}

/* Mode toggle buttons (CURRENT / PREDICTION) */
.hdr-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  width: 100%;
  transition: background 0.15s, color 0.15s;
}
.hdr-mode-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.hdr-mode-btn.active { background: var(--accent); color: #fff; }
.hdr-mode-btn[data-view="current"].active { background: #15803d; color: #f0fdf4; }

/* 72% right column: PREDICTION button + parameters + Apply */
.hdr-pred {
  display: grid;
  grid-template-columns: 12.5% 1fr auto;
  align-items: stretch;
}
.hdr-pred > .hdr-mode-btn { border-right: 1px solid var(--border); }

.hdr-rerun-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-left: 1px solid var(--border);
  gap: 6px;
  min-width: 80px;
}
.hdr-rerun-col .btn { font-size: 12px; padding: 6px 14px; white-space: nowrap; }
.hdr-rerun-col #simStatus { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

/* 5 parameters panel */
.hdr-params {
  display: flex;
  align-items: stretch;
  background: rgba(37, 99, 235, 0.07);
}
.hdr-param {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 8px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.hdr-param:last-child { border-right: none; }

.hparam-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hparam-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 4px 0 5px;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.hparam-default {
  font-size: 10px;
  color: var(--accent-light);
  font-weight: 600;
  margin-bottom: 3px;
}
.hdr-param .slider-input {
  width: 100%;
  margin: 3px 0;
  cursor: pointer;
}
.hparam-ticks {
  position: relative;
  height: 16px;
  margin-top: 3px;
}
.hparam-ticks span {
  position: absolute;
  font-size: 10px;
  color: var(--text-muted);
  transform: translateX(-50%);
  white-space: nowrap;
}
.hparam-rerun {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.hparam-rerun .btn { font-size: 9px; padding: 2px 8px; }
.hparam-rerun #simStatus { font-size: 9px; color: var(--text-muted); }

/* Status dot (inside .hdr-status) */
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--win);
  display: inline-block;
  flex-shrink: 0;
}
.dot.loading { background: var(--draw); animation: pulse 1s infinite; }
.dot.error   { background: var(--loss); }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

main { padding: 0 24px 24px; }

.controls {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.15s;
}
.btn:hover { border-color: var(--accent-light); }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-light); }
.btn.primary:disabled { background: #334155; border-color: #334155; cursor: not-allowed; opacity: 0.55; }

.filter-group { display: flex; gap: 8px; }
.filter-btn {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
}
.filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
  margin-top: 24px;
}

/* Fixture list — date label + 4 match columns */
.fixture-grid-5 {
  display: grid;
  grid-template-columns: 80px repeat(4, 1fr);
  gap: 3px 6px;
  align-items: start;
}

/* Date label — left column, spans N grid rows */
.fx-date-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  padding: 5px 6px 0 0;
  line-height: 1.5;
  align-self: stretch;
  border-right: 2px solid var(--border);
  margin-right: 2px;
  white-space: nowrap;
}

/* Invisible padding cell to fill incomplete rows */
.fx-pad { min-height: 26px; }

/* Single compact match card */
.fx-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  min-height: 26px;
  overflow: hidden;
}
.fx-row.played { border-left: 2px solid var(--accent); }

/* Match kick-off time (replaces date inside card) */
.fx-time {
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  width: 62px;
}

.fx-team {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.fx-row.has-pred .fx-team { min-width: 44px; }
.fx-away { flex-direction: row-reverse; }

.fx-name {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 22px;
}

.fx-score {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
  min-width: 24px;
  color: var(--text-muted);
}
.fx-row.played .fx-score { color: var(--text); }

.fx-odds {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}

.fx-h, .fx-d, .fx-a {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
}
.fx-h { background: rgba(37,99,235,0.45); color: #93c5fd; }
.fx-d { background: rgba(100,116,139,0.35); color: #94a3b8; }
.fx-a { background: rgba(239,68,68,0.45); color: #fca5a5; }

.team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.team.home {
  flex-direction: row-reverse; /* flag on the right, name on the left */
  text-align: right;
}
.team.away {
  flex-direction: row;
  text-align: left;
}

.team-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.flag {
  width: 24px;
  height: auto;
  border-radius: 2px;
  flex-shrink: 0;
  display: block;
}

.score-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.score-dash { color: var(--text-muted); font-size: 12px; }

.match-meta {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 2px;
}

.group-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 4px;
}

.error-banner {
  background: #2d1515;
  border: 1px solid #7f1d1d;
  border-radius: 8px;
  padding: 16px;
  color: #fca5a5;
  margin-bottom: 16px;
}

.loading-msg {
  color: var(--text-muted);
  padding: 32px;
  text-align: center;
  font-size: 14px;
}

/* Tabs (full-width bar inside main, flush top) */
.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
  margin: 0 -24px 20px;
  background: var(--surface);
}
.tab-btn {
  padding: 12px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: -1px;
  text-align: center;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover:not(.active) { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Odds bar (upcoming match predictions) */
.odds-bar {
  display: flex;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  gap: 1px;
}

.odds-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  overflow: hidden;
  min-width: 0;
}

.odds-seg span { pointer-events: none; white-space: nowrap; }
.odds-home { background: rgba(37, 99, 235, 0.65); color: #c7d8ff; }
.odds-draw { background: rgba(100, 116, 139, 0.55); color: #cbd5e1; }
.odds-away { background: rgba(239, 68, 68, 0.60); color: #fecaca; }

.xg-line {
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-muted);
}

/* Standings tab */
.standings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
}

.group-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.group-card-hdr {
  background: var(--border);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 7px 12px;
}

.st-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.st-table thead th {
  color: var(--text-muted);
  font-weight: 500;
  text-align: right;
  padding: 5px 8px 3px;
  font-size: 10px;
}

.st-table thead th.st-team-hdr { text-align: left; }

.st-table tbody td {
  text-align: right;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}

.st-pos { color: var(--text-muted); text-align: center !important; width: 22px; font-size: 11px; }
.st-team { text-align: left !important; }
.st-team-inner { display: flex; align-items: center; gap: 6px; }
.st-pts { font-weight: 700; }

.st-qualify { background: rgba(34, 197, 94, 0.06); }
.st-qualify .st-pos { color: var(--win); font-weight: 700; }
.st-third .st-pos { color: var(--draw); }
.st-elim { opacity: .5; }

.st-champ { text-align: right !important; font-variant-numeric: tabular-nums; min-width: 38px; }
.st-champ-wait { color: var(--text-muted); }
.st-champ-hi  { color: #4ade80; font-weight: 700; }
.st-champ-mid { color: #fbbf24; }
.st-champ-lo  { color: var(--text-muted); }

.flag-sm { width: 18px; height: auto; }

/* Sliders panel */
.sliders-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.sliders-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.param-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent-light);
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--accent-light);
  margin-bottom: 2px;
  opacity: 0.7;
}

.sliders-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sparam {
  display: grid;
  grid-template-columns: 14% 44% 1fr;
  align-items: center;
  gap: 12px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.sparam:last-child { border-bottom: none; }

.sparam-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.sparam-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.sparam-ctrl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sparam-val {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-light);
  text-align: right;
}

.pred-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 8px;
  margin-bottom: 2px;
}

.slider-input {
  width: 100%;
  cursor: pointer;
  margin-top: 8px;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #334155;
  border-radius: 3px;
  outline: none;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #60a5fa;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
  transition: box-shadow .15s;
}

.slider-input:hover::-webkit-slider-thumb,
.slider-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(96, 165, 250, 0.35);
}

.slider-input::-moz-range-track {
  height: 6px;
  background: #334155;
  border-radius: 3px;
}

.slider-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #60a5fa;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

/* Stage probabilities — 6-column grid */
.stages-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.stage-col {
  border-right: 1px solid var(--border);
  min-width: 0;
}
.stage-col:last-child { border-right: none; }
.stage-col-hdr {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 8px 4px;
  background: var(--border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.stage-row {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  font-size: 10px;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.stage-row.qualified { background: rgba(34,197,94,0.06); }
.stage-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-pct {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 28px;
}
.stage-row.qualified .stage-pct { color: var(--win); font-weight: 600; }

/* Round tabs (bracket view) */
.round-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.round-tab {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  transition: all .15s;
}

.round-tab:hover { border-color: var(--accent-light); color: var(--text); }
.round-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Leaderboard */
.lb-header {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.leaderboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  align-items: start;
}

.lb-col { display: flex; flex-direction: column; gap: 3px; }

.lb-row {
  display: grid;
  grid-template-columns: 32px 1fr 56px 1fr 52px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  transition: background .1s;
}

.lb-row:hover { background: var(--surface); }

.lb-row.lb-qualified {
  background: rgba(34, 197, 94, 0.07);
  border-left: 3px solid rgba(34, 197, 94, 0.5);
  padding-left: 5px;
}

.lb-row.lb-qualified:hover { background: rgba(34, 197, 94, 0.13); }

.lb-cutoff-line {
  font-size: 10px;
  color: var(--win);
  text-align: center;
  padding: 4px 0;
  border-top: 1px solid rgba(34, 197, 94, 0.4);
  margin: 2px 0;
  letter-spacing: .04em;
  opacity: 0.8;
}

.lb-rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.lb-gold   { color: #fbbf24; }
.lb-silver { color: #94a3b8; }
.lb-bronze { color: #b45309; }

.lb-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lb-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 500;
}

.lb-grp {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.lb-bar-wrap {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.lb-bar {
  height: 100%;
  background: var(--accent-light);
  border-radius: 3px;
  transition: width .4s ease;
}

.lb-pct {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text);
}

@media (max-width: 900px) {
  .page-layout { grid-template-columns: 1fr; }
  .sidebar .sliders-panel { position: static; }
}

@media (max-width: 900px) {
  header { grid-template-columns: 1fr; min-height: auto; }
  .hdr-pred { grid-template-columns: 1fr; }
  .hdr-rerun-col { flex-direction: row; border-left: none; border-top: 1px solid var(--border); padding: 8px 12px; }
  .hdr-params { flex-wrap: wrap; }
  .hdr-param { min-width: 140px; }
  main { padding: 0 12px 16px; }
  .tabs { margin: 0 -12px 16px; }
  .fixture-grid-5 { grid-template-columns: 60px repeat(2, 1fr); }
  .standings-grid { grid-template-columns: 1fr; }
  .lb-row { grid-template-columns: 28px 1fr 44px 80px 44px; }
}

@media (max-width: 500px) {
  /* Fixtures: switch from grid to block so each match gets full width */
  .fixture-grid-5 {
    display: block;
  }
  .fx-date-label {
    display: block;
    text-align: left;
    border-right: none;
    border-bottom: 2px solid var(--border);
    border-top: 1px solid var(--border);
    padding: 5px 4px;
    margin: 6px 0 3px;
    font-size: 11px;
    white-space: normal;
  }
  .fx-date-label:first-child { margin-top: 0; border-top: none; }
  .fx-pad { display: none; }
  .fx-row { margin-bottom: 3px; }
  .fx-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Header: stack mode buttons vertically */
  .hdr-mode-btn { font-size: 14px; }
}

/* view-toggle div no longer rendered — keep .view-btn for JS compat */
.view-toggle { display: none; }
.view-btn { /* base — hdr-mode-btn overrides in header */ }