/* =============================
   TOP 5 — Clean CSS + Live UI
   ============================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#e6f9e6; --fg:#2e662e; --accent:#4caf50;
  --live:#d32f2f; --card:#f0fff0; --border:#c8e6c9; --radius:8px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  color-scheme: light dark;
}
:root[data-theme="light"]{ --bg:#e6f9e6; --fg:#2e662e; --accent:#4caf50; --live:#d32f2f; --card:#f0fff0; --border:#c8e6c9; }
:root[data-theme="dark"]{  --bg:#1e2d1e; --fg:#e0f2e0; --accent:#81c784; --live:#ef6c00; --card:#2a392a; --border:#4caf50; }

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{
  background:var(--bg); color:var(--fg);
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:var(--s-5);
}
h1,h2{ margin:0; font-family:"Roboto Slab",Georgia,serif; }
h1{text-align:center;font-weight:700;}
h2{text-align:center;font-weight:600;font-size:1.1rem;margin:5px 0 15px;}
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .blink,.loader-emoji,.ticker-track{ animation:none !important; }
}

/* ---------- Controls ---------- */
#controls{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--s-5);
}
#left-controls{ display:inline-flex; align-items:center; gap:var(--s-3); }
button,select{
  padding:var(--s-2) var(--s-4); font-size:16px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); color:var(--fg);
  box-shadow:0 2px 0 var(--accent);
  cursor:pointer; transition:background .15s, box-shadow .15s, transform .05s;
}
button:hover,select:hover{ background:rgba(0,0,0,.03); }
button:active{ transform:translateY(1px); box-shadow:0 0 0 var(--accent); }
button:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Loader (emoji rotates around centre) ---------- */
.loader{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem; border-radius:.6rem;
  background:color-mix(in oklab, var(--bg) 92%, var(--fg) 8%);
  color:var(--fg); margin:.5rem 0 1rem; font-weight:600;
}
.loader-emoji{
  display:inline-block;
  animation:spin 1s linear infinite;
  transform-origin:50% 50%;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- LIVE Header ---------- */
.live-badge{
  display:inline-flex; align-items:center; font-weight:700;
  margin:0 0 .4rem 0; font-size:.95rem;
}
.live-badge .dot{ margin-right:.6rem; } /* extra space before LIVE */

.dot{
  display:inline-block; width:.6rem; height:.6rem; border-radius:50%;
  background:var(--live);
}
.blink{ animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%{opacity:.3} 50%{opacity:1} 100%{opacity:.3} }

/* ---------- Ticker (continuous & slower) ---------- */
.ticker{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); margin:0 0 var(--s-4) 0;
  height:36px; display:flex; align-items:center;
}
.ticker-track{
  display:inline-flex;               /* no whitespace gaps */
  white-space:nowrap;
  will-change:transform;
  animation:ticker 60s linear infinite; /* slower scroll */
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:0 .9rem;
  border-right:1px solid var(--border);
  line-height:36px; height:36px; font-weight:600;
}
.ticker-item em{ font-style:normal; opacity:.8; font-weight:500; }

/* Keyframes:
   - Start at 0 so items are visible immediately.
   - Move left by 50% because content is duplicated; this creates a perfect loop with no gap. */
@keyframes ticker{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ---------- Tables ---------- */
table{
  border-collapse:separate; border-spacing:0;
  width:100%; margin-top:var(--s-5);
  background:var(--card); border-radius:var(--radius); overflow:hidden;
}
th,td{
  border:1px solid var(--border);
  padding:var(--s-2);
  text-align:center;
  font-variant-numeric:tabular-nums;
}
th{ background:var(--card); font-weight:700; border-bottom:2px solid var(--accent); }
th.sortable{ cursor:pointer; }
th.sortable::after{ content:" ↕"; color:grey; margin-left:5px; }
th.sorted-asc::after{ content:" ▲"; color:var(--accent); }
th.sorted-desc::after{ content:" ▼"; color:var(--accent); }
td.team-name, td.league-cell,
td.scorer-player, td.scorer-club, td.scorer-league,
td.assist-player, td.assist-club{ text-align:left; }

/* Hover */
tbody tr:hover>*{ background:rgba(76,175,80,.08); }

/* ---------- Responsive ---------- */
@media (max-width:600px){
  body{ margin:var(--s-3); font-size:14px; }
  h1{ font-size:1.8rem; } h2{ font-size:1rem; margin:5px 0 10px; }
  th,td{ padding:6px; font-size:12px; }
  #standings table{ display:block; overflow-x:auto; white-space:nowrap; }
}