:root {
  --bg: #0e1726;
  --panel: #18233a;
  --panel-2: #1f2d49;
  --text: #eef2f9;
  --muted: #93a1bd;
  --accent: #2ecc71;
  --accent-2: #f1c40f;
  --danger: #e74c3c;
  --border: #2a3a5e;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Respect device safe areas so the standalone (home-screen) app doesn't sit under the notch/status bar. */
#app {
  max-width: 760px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(60px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

h1 { font-size: 1.3rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }

.lang-switch { display: flex; gap: 4px; }
.lang-switch button {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 1rem;
  cursor: pointer;
}
.lang-switch button.active { border-color: var(--accent); background: var(--panel-2); }

.userbar { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9rem; }

nav.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
nav.tabs button {
  flex: 1;
  min-width: 90px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
}
nav.tabs button.active { background: var(--accent); color: #08210f; font-weight: 700; border-color: var(--accent); }

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

.round-title {
  margin: 22px 0 10px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-2);
}

.date-title { margin: 12px 0 6px; color: var(--muted); font-size: 0.85rem; }

.match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.match .team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.match .team.right { justify-content: flex-end; text-align: right; }
.match .team .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match .flag { font-size: 1.4rem; }

.score-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.score-inputs { display: flex; align-items: center; gap: 4px; }
.score-inputs input {
  width: 44px;
  height: 38px;
  text-align: center;
  font-size: 1.1rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.score-inputs input:disabled { opacity: 0.55; }
.score-inputs .sep { color: var(--muted); }

.match-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.result-badge { font-weight: 700; color: var(--accent-2); }
.pts { border-radius: 999px; padding: 2px 8px; font-weight: 700; font-size: 0.78rem; }
.pts-4 { background: var(--accent); color: #08210f; }
.pts-3 { background: var(--accent-2); color: #2b2200; }
.pts-2 { background: #3498db; color: #021b2b; }
.pts-0 { background: var(--panel-2); color: var(--muted); }

.save-state { font-size: 0.75rem; min-height: 1em; }
.save-state.ok { color: var(--accent); }
.save-state.err { color: var(--danger); }

.tips-toggle {
  background: none;
  border: none;
  color: #6fb3ff;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0;
}
.tips-list { grid-column: 1 / -1; border-top: 1px dashed var(--border); padding-top: 8px; font-size: 0.85rem; }
.tips-list div { display: flex; justify-content: space-between; padding: 2px 0; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; }
td.num, th.num { text-align: right; }
tr.me td { background: var(--panel-2); font-weight: 700; }

/* Leaderboard: flex columns on desktop, stacked cards on mobile (no h-scroll). */
.lb { padding: 4px 6px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
}
.lb-row:last-child { border-bottom: none; }
.lb-head {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-items: flex-end;
}
.lb-rank { width: 2.2rem; flex-shrink: 0; }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-total { width: 3.4rem; text-align: right; flex-shrink: 0; }
.lb-unit { display: none; }
.lb-breakdown { display: flex; gap: 4px; flex-shrink: 0; }
.lb-stat { width: 4.4rem; text-align: right; }
.lb-stat-label { display: none; }
.lb-row.me { background: var(--panel-2); font-weight: 700; border-radius: 8px; }

@media (max-width: 540px) {
  .lb-head { display: none; }
  .lb-row { flex-wrap: wrap; align-items: baseline; row-gap: 6px; padding: 12px 8px; }
  .lb-rank { width: auto; font-weight: 700; color: var(--accent-2); font-size: 1.02rem; }
  .lb-name { flex: 1; font-weight: 600; font-size: 1.04rem; white-space: normal; }
  .lb-total { width: auto; font-size: 1.1rem; color: var(--accent); }
  .lb-unit { display: inline; font-size: 0.72rem; color: var(--muted); }
  .lb-breakdown { flex-basis: 100%; gap: 8px 16px; flex-wrap: wrap; }
  .lb-stat { width: auto; color: var(--muted); font-size: 0.83rem; }
  .lb-stat-label { display: inline; }
}

form.auth { display: flex; flex-direction: column; gap: 10px; max-width: 340px; margin: 40px auto; }
form.auth input, form.auth select {
  padding: 12px;
  font-size: 1rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}
form.auth .row { display: flex; gap: 8px; }
form.auth button { flex: 1; }

button.primary, button.secondary {
  padding: 12px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
}
button.primary { background: var(--accent); color: #08210f; font-weight: 700; border-color: var(--accent); }
button.secondary { background: var(--panel-2); color: var(--text); }

.error-msg { color: var(--danger); font-size: 0.9rem; min-height: 1.2em; }
.hint { color: var(--muted); font-size: 0.85rem; }
.muted { color: var(--muted); }

select.bonus-select {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 10px 0;
}

.admin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  font-size: 0.88rem;
}
.admin-row input { width: 44px; height: 32px; text-align: center; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.admin-row .grow { flex: 1; min-width: 180px; }
.admin-row button { padding: 6px 10px; font-size: 0.8rem; }

@media (max-width: 480px) {
  .match { grid-template-columns: 1fr; }
  .match .team.right { justify-content: flex-start; text-align: left; }
  .score-box { align-items: flex-start; }

  /* Keep the 7-column leaderboard readable without forcing a scroll on most phones. */
  table { font-size: 0.82rem; }
  th, td { padding: 7px 5px; }
  th { font-size: 0.66rem; letter-spacing: 0.01em; }
}