@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&family=Oswald:wght@600&display=swap');

/* ---------- Theme: change colours here ---------- */
:root {
  --bg: #d3d6dd;
  --surface: #eceef2;
  --surface-2: #dfe2e9;
  --border: #9aa0b2;
  --text: #1d2030;
  --muted: #4b5066;
  --accent: #5b4bd6;
  --accent-glow: rgba(91, 75, 214, 0.25);
  --radius: 14px;
  --radius-sm: 12px;
  --sprite-height: 40px;
  --header-bg: #274e13;
  --header-text: #d9ead3;
}

/* ---------- Column colours (matches the Sheet) ----------
   --hc = header cell, --bc = body cell. Columns are numbered from 0.
   Tables with fewer than 13 columns use colours spread evenly across this list. */
[data-c="0"]  { --hc: #e06666; --bc: #ea9999; }   /* rank    - red */
[data-c="1"]  { --hc: #f6b26b; --bc: #f9cb9c; }   /* sprite  - orange */
[data-c="2"]  { --hc: #ffd966; --bc: #ffe599; }   /* pokemon - yellow */
[data-c="3"]  { --hc: #93c47d; --bc: #b6d7a8; }   /* green */
[data-c="4"]  { --hc: #76a5af; --bc: #a2c4c9; }   /* teal */
[data-c="5"]  { --hc: #6fa8dc; --bc: #9fc5e8; }   /* blue */
[data-c="6"]  { --hc: #8e7cc3; --bc: #b4a7d6; }   /* periwinkle */
[data-c="7"]  { --hc: #9a82c8; --bc: #b9a6d6; }   /* purple */
[data-c="8"]  { --hc: #c27ba0; --bc: #d5a6bd; }   /* mauve */
[data-c="9"]  { --hc: #ea9fd2; --bc: #f4c2e4; }   /* light pink */
[data-c="10"] { --hc: #e879cf; --bc: #f4a6e0; }   /* hot pink */
[data-c="11"] { --hc: #9fc5e8; --bc: #cfe2f3; }   /* pale blue */
[data-c="12"] { --hc: #8a7fd0; --bc: #aea6e2; }   /* violet */

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  margin: 0;
  padding: 0 24px 40px;
  font-family: 'Comfortaa', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
h2 { margin: 28px 0 10px; font-size: 22px; font-weight: 700; }
#status { margin-top: 16px; color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
  margin: 0 -24px;              /* full-width band, ignoring the body padding */
  padding: 14px 24px;
  text-align: center;
  background: var(--header-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.site-title {
  margin: 0;
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(26px, 5vw, 40px);   /* scales down on phones */
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--header-text);
}



/* ---------- Navigation ---------- */
.site-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding: 14px 0 6px; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.site-nav a:hover { color: var(--text); }
.site-nav a.active { color: var(--accent); }
.site-nav .nav-break { flex-basis: 100%; height: 0; margin-top: -6px; }
/* .site-nav a.nav-home {
  padding: 3px 22px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.site-nav a.nav-home:hover,
.site-nav a.nav-home.active { border-color: var(--accent); } */

/* ---------- Controls ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 20px; }
label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
select, input {
  min-width: 240px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
input { margin-bottom: 10px; }
input::placeholder { color: var(--muted); }
option { background: var(--surface); color: var(--text); }

/* ---------- Tables ---------- */
.wrap { overflow-x: auto; border-radius: var(--radius); }
table {
  width: 100%;
  margin-top: 16px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.wrap table { margin-top: 0; }
th, td {
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  color: var(--text);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
th {
  background: var(--hc, var(--surface-2));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
td { background: var(--bc, var(--surface)); }
th:hover { filter: brightness(1.1); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover td { filter: saturate(1.3) brightness(1.04); }
tbody tr:last-child td { border-bottom: none; }
td img { display: block; height: var(--sprite-height); width: auto; image-rendering: pixelated; }

th[title] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Overall-record table: stands out from the results below it */
table.totals { border-color: var(--accent); border-width: 2px; }
table.totals td { font-weight: 700; }
table.totals th { cursor: default; }
table.totals th:hover { filter: none; }

/* Links inside table cells */
td a {
  display: block;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
td a:hover,
td a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* ============================================================
   Pokémon Look Up
   ============================================================ */

.page-pokemon-lookup .pokemon-lookup {
  width: 100%;
}

.page-pokemon-lookup .pokemon-lookup-controls {
  margin-top: 8px;
}

.page-pokemon-lookup .pokemon-lookup-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}

.page-pokemon-lookup .pokemon-lookup-header h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
}

.page-pokemon-lookup .pokemon-lookup-sprite {
  width: auto;
  height: 80px;
  image-rendering: pixelated;
  margin: 4px 0 8px;
}

.page-pokemon-lookup .pokemon-championships {
  min-height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 26px;
  margin-bottom: 8px;
}

.page-pokemon-lookup .pokemon-trophy {
  display: inline-block;
}

.page-pokemon-lookup .pokemon-section {
  margin-top: 28px;
}

.page-pokemon-lookup .pokemon-section h3 {
  margin-bottom: 10px;
}

.page-pokemon-lookup .pokemon-draft-table,
.page-pokemon-lookup .pokemon-record-table {
  margin-top: 0;
}

.page-pokemon-lookup .pokemon-record-table td {
  font-weight: 700;
}

@media (max-width: 700px) {
  .page-pokemon-lookup .pokemon-record-table {
    min-width: 760px;
  }

  .page-pokemon-lookup .pokemon-draft-table {
    min-width: 650px;
  }
}