:root {
  --bg: #faf8fc;
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --card-hover: #f5f1fa;
  --border: #e8e3f2;
  --text: #322f45;
  --text-dim: #7b7690;
  --text-faint: #a9a4bd;
  --accent: #a78bdb;
  --accent-2: #f2a8c9;
  --accent-soft: rgba(167, 139, 219, 0.16);
  --green: #4caf7d;
  --green-soft: rgba(112, 199, 150, 0.18);
  --red: #e0687e;
  --red-soft: rgba(224, 104, 126, 0.14);
  --gold: #e0b34d;
  --lime: #8cc63f;
  --lime-soft: rgba(140, 198, 63, 0.16);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 26px rgba(80, 62, 120, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(600px 300px at 15% -5%, rgba(167, 139, 219, 0.14), transparent 60%),
    radial-gradient(500px 260px at 100% 0%, rgba(242, 168, 201, 0.13), transparent 60%),
    radial-gradient(420px 220px at 82% 8%, rgba(140, 198, 63, 0.08), transparent 60%);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: "Sora", "Inter", sans-serif;
  margin: 0;
}

/* ===== TOPBAR ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 248, 252, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-title { font-family: "Sora", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }

.tabs, .subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow);
}

.subtabs {
  /* Unlike .tabs (always one row, 3 items), .subtabs wraps onto 2+ rows —
     a 999px pill radius on a multi-row box makes the corners cut into
     whichever button sits in a corner, so its active highlight looks like
     it pokes outside the white background. A gentler radius keeps every
     button's highlight fully inside the card at any row count. */
  border-radius: 18px;
  justify-content: center;
  margin-bottom: 32px;
}

/* ===== SCORING EXPLAINER ===== */
.scoring-info {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  margin-bottom: 24px;
}

.scoring-info-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

.scoring-info-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.6;
}

.scoring-info-list li { margin-bottom: 6px; }
.scoring-info-list li:last-child { margin-bottom: 0; }
.scoring-info-list strong { color: var(--text); }
.scoring-info-list em { color: var(--text); font-style: normal; font-weight: 600; }

.scoring-info-link {
  border: none;
  background: none;
  color: var(--accent);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 0;
  margin-top: 12px;
  cursor: pointer;
}

.scoring-info-link:hover { text-decoration: underline; }

.tab, .subtab {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.tab:hover, .subtab:hover { color: var(--text); }

.tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.subtab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--lime), #6ba82f);
}

.subtab { font-size: 13px; padding: 7px 15px; }

/* ===== VIEWS ===== */
.view { display: none; padding: 40px 0 60px; animation: fadeIn 0.35s ease; }
.view.active { display: block; }

.subview { display: none; animation: fadeIn 0.3s ease; }
.subview.active { display: block; }

.subview-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.subview-sub {
  color: var(--text-dim);
  font-size: 14.5px;
  margin: 6px 0 22px;
  max-width: 560px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.search-block { margin-bottom: 28px; }

.page-title {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-sub {
  color: var(--text-dim);
  font-size: 15px;
  margin: 8px 0 24px;
  max-width: 560px;
}

/* ===== SEARCH ===== */
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 13px 18px;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.search-icon { width: 18px; height: 18px; color: var(--text-faint); flex-shrink: 0; }

.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 15px;
}

.search-box input::placeholder { color: var(--text-faint); }

.clear-btn {
  background: var(--border);
  color: var(--text-dim);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.clear-btn:hover { background: var(--card-hover); color: var(--text); }

/* ===== FRIEND CHIPS ===== */
.friend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.friend-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.friend-chip:hover {
  border-color: var(--accent);
  background: var(--card-hover);
  transform: translateY(-1px);
}

.friend-chip.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}

.chip-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 800;
  flex-shrink: 0;
}

.friend-chip.active .chip-avatar { background: rgba(255,255,255,0.32); color: #fff; }

.no-results { color: var(--text-dim); font-size: 14px; margin-top: 16px; }

/* ===== VIEW TOGGLE (search vs. everyone's picks) ===== */
.view-toggle {
  display: flex;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.view-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.view-toggle-btn:hover { color: var(--text); }

.view-toggle-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* ===== ALL PICKS (everyone's picks for one award) ===== */
.all-picks { margin-top: 8px; animation: fadeIn 0.3s ease; }

.all-picks .pick-card { margin-top: 0; }

.pick-label-friend {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

/* ===== COMPARE BLOCK ===== */
.compare-block {
  margin-top: 32px;
  animation: fadeIn 0.3s ease;
}

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

.compare-who { display: flex; align-items: center; gap: 14px; }

.compare-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: 17px;
  flex-shrink: 0;
}

.compare-who h2 { font-size: 21px; font-weight: 700; }
.compare-meta { font-size: 13px; color: var(--text-dim); }

.close-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.close-btn:hover { color: var(--text); border-color: var(--accent); }

.compare-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.compare-controls label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.compare-controls select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b7690' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 34px 8px 16px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  max-width: 240px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.compare-controls select:hover { border-color: var(--accent); }
.compare-controls select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.col-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}

.rank-row:last-child { border-bottom: none; }

.rank-num {
  width: 22px;
  color: var(--text-faint);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.rank-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.rank-badge.crest {
  background: transparent;
  border-radius: 0;
  object-fit: contain;
}

.rank-name { flex: 1; font-weight: 500; }

.rank-delta {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.rank-delta.up { color: var(--green); background: var(--green-soft); }
.rank-delta.down { color: var(--red); background: var(--red-soft); }
.rank-delta.same { color: var(--text-dim); background: var(--card-hover); }

/* European qualification / relegation zone tints inside a rank list */
.rank-row.ucl { background: var(--accent-soft); }
.rank-row.europa { background: rgba(242, 168, 201, 0.10); }
.rank-row.conf { background: rgba(140, 198, 63, 0.08); }
.rank-row.rel { background: rgba(224, 104, 126, 0.08); }

/* ===== TABLE VIEW ===== */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  box-shadow: var(--shadow);
}

.pl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}

.pl-table th {
  text-align: center;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  font-weight: 700;
  padding: 14px 10px;
  border-bottom: 1px solid var(--border);
}

.pl-table th.pos, .pl-table th.club { text-align: left; }

.pl-table td {
  padding: 11px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}

.pl-table tr:last-child td { border-bottom: none; }
.pl-table tr:hover td { background: var(--card-hover); }

.pl-table td.pos {
  text-align: left;
  font-weight: 800;
  color: var(--text-faint);
  width: 34px;
}

.pl-table td.club {
  text-align: left;
  color: var(--text);
  font-weight: 600;
}

.pl-table td.pts { color: var(--text); font-weight: 800; }

.club-cell { display: flex; align-items: center; gap: 10px; }

.club-badge {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.club-badge.crest {
  background: transparent;
  border-radius: 0;
  object-fit: contain;
}

.pl-table tr.ucl td.pos { color: var(--accent); }
.pl-table tr.ucl { box-shadow: inset 3px 0 0 var(--accent); }
.pl-table tr.europa td.pos { color: var(--accent-2); }
.pl-table tr.europa { box-shadow: inset 3px 0 0 var(--accent-2); }
.pl-table tr.conf td.pos { color: var(--lime); }
.pl-table tr.conf { box-shadow: inset 3px 0 0 var(--lime); }
.pl-table tr.rel { box-shadow: inset 3px 0 0 var(--red); }

.pl-table tr.winner-row { background: rgba(224, 179, 77, 0.08); box-shadow: inset 3px 0 0 var(--gold); }
.pl-table tr.runnerup-row { background: rgba(123, 118, 144, 0.06); box-shadow: inset 3px 0 0 var(--text-faint); }

.rank-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}

.rank-tag.winner { color: #92710f; background: rgba(224, 179, 77, 0.22); }
.rank-tag.runner-up { color: var(--text-dim); background: rgba(123, 118, 144, 0.14); }

.legend {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.legend span { display: flex; align-items: center; gap: 7px; }

.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.swatch.ucl { background: var(--accent); }
.swatch.europa { background: var(--accent-2); }
.swatch.conf { background: var(--lime); }
.swatch.rel { background: var(--red); }

/* ===== FOOTER ===== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 22px 0 40px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.site-footer code {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12px;
}

/* ===== AWARD PICK VIEWS (FA Cup / Golden Boot / Top Assister) ===== */
.pick-block { margin-top: 32px; animation: fadeIn 0.3s ease; }

.pick-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.pick-row:last-child { border-bottom: none; }

/* Friends who picked the same thing, in "see everyone's picks" — a soft
   tint plus a connecting stripe so each stack reads as one group. When
   there's more than one group of matching picks, each gets its own color
   (cycling through this list) so separate groups stay visually distinct. */
.pick-row-grouped-0 { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.pick-row-grouped-1 { background: rgba(242, 168, 201, 0.18); box-shadow: inset 3px 0 0 var(--accent-2); }
.pick-row-grouped-2 { background: var(--lime-soft); box-shadow: inset 3px 0 0 var(--lime); }
.pick-row-grouped-3 { background: rgba(224, 179, 77, 0.18); box-shadow: inset 3px 0 0 var(--gold); }

.pick-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.pick-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: right;
}

.pick-value.empty { color: var(--text-faint); font-weight: 500; font-style: italic; }

.pick-status {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.pick-status.correct { color: var(--green); background: var(--green-soft); }
.pick-status.missed { color: var(--red); background: var(--red-soft); }
.pick-status.pending { color: var(--text-dim); background: var(--card-hover); }

/* ===== RESPONSIVE ===== */
@media (max-width: 680px) {
  .compare-grid { grid-template-columns: 1fr; }
  .topbar-inner { padding: 14px 18px; }
  .brand-title { font-size: 14px; }
  .tab { padding: 8px 14px; font-size: 13px; }
  .pick-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pick-value { text-align: left; }

  /* The desktop .subtabs is one big pill container that wraps its buttons
     onto multiple rows — fine at 2 rows, but a huge border-radius on a
     3+-row box makes the rounded corners visually eat into the later rows.
     Below 680px, ditch the shared pill and lay sub-tabs out as their own
     individually-rounded cards in a simple 2-column grid instead. */
  .subtabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }

  .subtab {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
  }

  .subtab.active { border-color: transparent; }

  .search-box { padding: 12px 16px; }
  .pl-table { font-size: 12.5px; }
  .pl-table th, .pl-table td { padding: 9px 6px; }
  .rank-badge, .club-badge { width: 20px; height: 20px; }
}