:root {
  --bg: #f4f8f8;
  --card: #ffffff;
  --ink: #1f2d2c;
  --muted: #6b7b7a;
  --line: #e4eeed;
  --accent: #2a9d8f;
  --accent-dark: #1f7a70;
  --accent-soft: #e0f3f0;
  --gold: #e6b422;
  --silver: #b8c0c8;
  --bronze: #c98b5a;
  --top-1: #e9f7f4;
  --top-2: #f1f9f7;
  --top-3: #f6fbfa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, #d5efeb 0, transparent 40%),
    radial-gradient(circle at 85% 5%, #e3f4f1 0, transparent 35%),
    var(--bg);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2.5rem 1rem 3rem;
}

.hero { text-align: center; margin-bottom: 2rem; }
h1 { margin: 0; font-size: clamp(1.1rem, 5vw, 2.5rem); white-space: nowrap; }
.subtitle { margin: 0.5rem 0 0; color: var(--muted); font-size: 1.05rem; }

/* Board card */
.board {
  background: var(--card);
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px rgb(31 45 44 / 0.08);
  overflow: hidden;
}

.board-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  color: #fff;
}

.total { margin: 0; font-weight: 600; font-size: 1.05rem; }
#total { font-size: 1.6rem; font-weight: 800; }

.toggle {
  display: flex;
  background: rgb(255 255 255 / 0.25);
  border-radius: 999px;
  padding: 4px;
}

.tab {
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { background: rgb(255 255 255 / 0.2); }
.tab.active { background: #fff; color: var(--accent); }
.tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Tables */
.tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.tables table + table { border-left: 1px solid var(--line); }

table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  text-align: left;
  padding: 1.25rem 1.5rem 0.75rem;
}
.caption-title { display: block; font-size: 1.25rem; font-weight: 800; }
.caption-hint { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }

th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
th:first-child { width: 3.5rem; }
th:last-child, td.points { text-align: right; }

td {
  padding: 0.7rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--top-3); }

tr.top-1 { background: var(--top-1); }
tr.top-2 { background: var(--top-2); }
tr.top-3 { background: var(--top-3); }

.rank { font-weight: 700; color: var(--muted); }
tr.top .rank { font-size: 1.4rem; }

.teammate { display: flex; align-items: center; gap: 0.75rem; }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
tr.top-1 .avatar { box-shadow: 0 0 0 3px var(--gold); }
tr.top-2 .avatar { box-shadow: 0 0 0 3px var(--silver); }
tr.top-3 .avatar { box-shadow: 0 0 0 3px var(--bronze); }

.initials {
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  font-size: 0.9rem;
}

.name { font-weight: 600; overflow-wrap: anywhere; }
.points { font-weight: 800; color: var(--accent-dark); white-space: nowrap; }

.icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
  margin-left: 0.3em;
}
.total .icon { margin: 0 0.15em 0 0.3em; }

td.empty {
  text-align: center;
  color: var(--muted);
  padding: 2.5rem 1.5rem;
}

#message {
  margin: 0;
  padding: 0.75rem 1.5rem;
  background: #fff1f0;
  color: #b42318;
  text-align: center;
}

.footer { text-align: center; color: var(--muted); margin-top: 1.5rem; }

@media (max-width: 640px) {
  .board-header { justify-content: center; text-align: center; }
  .tables table + table { border-left: 0; border-top: 1px solid var(--line); }
  caption, th, td { padding-left: 1rem; padding-right: 1rem; }
}