:root {
  --c-bg: #f5f5f5;
  --c-card: #ffffff;
  --c-border: #e0e0e0;
  --c-primary: #1a237e;
  --c-live: #c62828;
  --c-pts3: #2e7d32;
  --c-pts1: #e65100;
  --c-pts0: #9e9e9e;
}

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

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--c-bg);
  color: #212121;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

/* ── Header ─────────────────────────────────────────────── */
header {
  background: var(--c-primary);
  color: #fff;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

header h1 { font-size: 1rem; font-weight: 700; }

#status-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

#last-updated { font-size: 0.7rem; opacity: 0.8; }

#refresh-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
#refresh-btn:hover { background: rgba(255,255,255,0.15); }

/* ── Error banner ───────────────────────────────────────── */
#error-banner {
  display: none;
  background: #ffebee;
  color: #b71c1c;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  border-bottom: 1px solid #ef9a9a;
}

/* ── Tabs ───────────────────────────────────────────────── */
.tabs {
  display: flex;
  background: var(--c-card);
  border-bottom: 2px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tab {
  flex: 1;
  padding: 0.7rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  cursor: pointer;
  font-size: 0.88rem;
  color: #757575;
  font-weight: 500;
}
.tab.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
  font-weight: 700;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Ranking table ──────────────────────────────────────── */
.ranking-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-card);
}

.ranking-table th,
.ranking-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--c-border);
}

.ranking-table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #757575;
  background: #fafafa;
  text-align: left;
}

.col-rank { width: 2.2rem; color: #9e9e9e; text-align: center; }
.col-name { }
.col-num  { width: 4.5rem; text-align: center; }
.col-total{ width: 4.5rem; text-align: center; font-weight: 700; white-space: nowrap; }

.prov-mark { color: var(--c-pts1); font-size: 0.75em; margin-left: 2px; }
.prov-note { font-size: 0.72rem; color: var(--c-pts1); padding: 0.4rem 0.75rem; }
.pts-live  { color: var(--c-pts1); font-size: 0.82em; font-weight: 400; }

/* ── Match cards ────────────────────────────────────────── */
#partidos-container { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.6rem; }

.match-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
}
.match-card[data-state="in"] { border-color: var(--c-live); }

details.match-card > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 2rem;
}
details.match-card > summary::-webkit-details-marker { display: none; }
details.match-card > summary::after {
  content: "▾";
  position: absolute;
  right: 0.75rem;
  top: 0.6rem;
  color: #9e9e9e;
  font-size: 0.85rem;
}
details[open].match-card > summary::after {
  content: "▴";
}

.match-header {
  padding: 0.55rem 0.75rem;
  background: #fafafa;
  border-bottom: 1px solid var(--c-border);
}
.match-teams { font-weight: 600; font-size: 0.92rem; }
.match-meta {
  font-size: 0.72rem;
  color: #757575;
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.match-result { font-weight: 700; color: #212121; font-size: 0.85rem; }
.live-clock   { color: var(--c-live); font-weight: 700; }

.badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}
.badge.pre  { background: #eeeeee; color: #757575; }
.badge.in   { background: #ffebee; color: var(--c-live); }
.badge.post { background: #e8f5e9; color: var(--c-pts3); }

.et-warn { color: var(--c-pts1); font-size: 0.8em; cursor: help; }

@keyframes scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.live-scan-bar {
  height: 2px;
  background: #e0e0e0;
  overflow: hidden;
  margin-top: 0.4rem;
  border-radius: 1px;
}

.live-scan-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, transparent, var(--c-live), transparent);
  animation: scan 1.6s ease-in-out infinite;
}

/* ── Live probability bars ──────────────────────────────── */
.live-stats {
  padding: 0.55rem 0.75rem 0.5rem;
  background: #fafafa;
  border-bottom: 1px solid var(--c-border);
}

.prob-3col {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.prob-3col span:first-child { text-align: left; }
.prob-3col span:nth-child(2) { text-align: center; flex: 1; }
.prob-3col span:last-child  { text-align: right; }

.prob-names span {
  font-size: 0.75rem;
  font-weight: 700;
  color: #212121;
}
.prob-names span:nth-child(2) {
  font-weight: 400;
  color: #757575;
}

.prob-pcts span {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-primary);
}
.prob-pcts span:nth-child(2) {
  font-size: 0.78rem;
  font-weight: 400;
  color: #9e9e9e;
}

.prob-bar-3 {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  gap: 2px;
  margin: 0.35rem 0 0.3rem;
  background: #e0e0e0;
}

.prob-seg { height: 100%; transition: flex 0.6s ease; }
.prob-win  { background: var(--c-pts3); }
.prob-draw { background: #bdbdbd; }
.prob-lose { background: var(--c-live); }

.prob-xg-row span {
  font-size: 0.7rem;
  color: #424242;
}
.prob-xg-row span:nth-child(2) {
  font-size: 0.62rem;
  letter-spacing: 0.03em;
}

/* ── Predictions grid inside each card ─────────────────── */
.pred-table { width: 100%; border-collapse: collapse; }

.pred-table td {
  padding: 0.38rem 0.75rem;
  font-size: 0.83rem;
  border-bottom: 1px solid #f5f5f5;
  vertical-align: middle;
}
.pred-table tr:last-child td { border-bottom: none; }

.pred-table .col-name    { width: 26%; }
.pred-table .pred-score  { width: 16%; text-align: center; font-variant-numeric: tabular-nums; }
.pred-table .pred-winner { width: 30%; text-align: center; font-size: 0.78rem; color: #555; }
.pred-table .pred-pts    { width: 28%; text-align: right; font-weight: 600; white-space: nowrap; }

.pts-3 { background: #f1f8e9; }
.pts-3 .pred-pts { color: var(--c-pts3); }

.pts-1 { background: #fff8e1; }
.pts-1 .pred-pts { color: var(--c-pts1); }

.pts-0 .pred-pts { color: var(--c-pts0); }
.pts-pending .pred-pts { color: #bdbdbd; }

/* ── Generic ────────────────────────────────────────────── */
.empty { padding: 2rem; text-align: center; color: #9e9e9e; font-size: 0.9rem; }