/**
 * Tumbler League — Clean Premier League Table Design
 * Professional, data-first, zero fluff.
 */

:root {
  --primary: #38003c;
  --primary-light: #5a2060;
  --accent: #00ff85;
  --accent-blue: #2d6a9f;
  --accent-orange: #e86a17;
  --accent-red: #e90052;
  --accent-yellow: #ffc107;
  --text: #1a1a2e;
  --text-secondary: #5a5a6e;
  --text-muted: #8a8a9a;
  --border: #e8e8ec;
  --bg: #f8f8fa;
  --bg-white: #ffffff;
  --row-alt: #fafafb;
  --row-hover: #f0f0f4;
  --champions: #00ff85;
  --europa: #2d6a9f;
  --conference: #e86a17;
  --mid: #ffc107;
  --relegation: #e90052;
  --gold: #c9a227;
  --grade-s: #00a86b;
  --grade-a: #2d6a9f;
  --grade-b: #5a9e5a;
  --grade-c: #c2710e;
  --grade-d: #c6362a;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family:'DM Sans','Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}

/* === HEADER === */
.site-header {
  background:linear-gradient(135deg, #38003c 0%, #5a2060 50%, #2d1b4e 100%);
  padding:32px 24px 40px;
  position:relative;
}

.site-header::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-blue) 50%, var(--accent-orange) 100%);
}

.header-content {
  max-width:1200px;
  margin:0 auto;
}

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

.site-logo {
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
}

.logo-icon {
  width:40px;
  height:40px;
  background:var(--accent);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:1.1rem;
  color:var(--primary);
}

.logo-text {
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-0.02em;
}

.logo-text span {
  font-weight:400;
  opacity:0.8;
}

.header-nav {
  display:flex;
  gap:28px;
}

.header-nav a {
  color:rgba(255,255,255,0.7);
  text-decoration:none;
  font-size:0.85rem;
  font-weight:500;
  letter-spacing:0.02em;
  transition:color 0.2s;
  position:relative;
}

.header-nav a:hover,
.header-nav a.active {
  color:#fff;
}

.header-nav a.active::after {
  content:'';
  position:absolute;
  bottom:-6px;
  left:0;
  right:0;
  height:2px;
  background:var(--accent);
  border-radius:1px;
}

.header-title {
  color:#fff;
  font-family:'Playfair Display',Georgia,serif;
  font-size:2.4rem;
  font-weight:700;
  margin-bottom:6px;
  letter-spacing:-0.02em;
}

.header-subtitle {
  color:rgba(255,255,255,0.65);
  font-size:0.95rem;
  max-width:480px;
}

/* === MAIN === */
.main-container {
  max-width:1200px;
  margin:0 auto;
  padding:24px;
}

/* === FILTERS === */
.filter-bar {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.filter-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  background:var(--bg-white);
  border:1px solid var(--border);
  border-radius:6px;
  font-size:0.82rem;
  font-weight:500;
  color:var(--text-secondary);
  cursor:pointer;
  transition:all 0.2s;
}

.filter-chip:hover {
  border-color:var(--accent-blue);
  color:var(--accent-blue);
}

.filter-chip.active {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

.filter-divider {
  width:1px;
  height:24px;
  background:var(--border);
  margin:0 4px;
}

/* === TABLE === */
.league-table-wrap {
  background:var(--bg-white);
  border-radius:12px;
  border:1px solid var(--border);
  overflow:hidden;
}

.league-table {
  width:100%;
  border-collapse:collapse;
  font-size:0.88rem;
}

.league-table thead {
  background:var(--bg);
  border-bottom:2px solid var(--border);
}

.league-table th {
  padding:14px 10px;
  text-align:left;
  font-weight:600;
  color:var(--text-secondary);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  white-space:nowrap;
}

.league-table th.numeric,
.league-table td.numeric {
  text-align:center;
}

.league-table th.price,
.league-table td.price {
  text-align:right;
  padding-right:16px;
}

.league-table tbody tr {
  border-bottom:1px solid var(--border);
  transition:background 0.15s;
}

.league-table tbody tr:nth-child(even) {
  background:var(--row-alt);
}

.league-table tbody tr:hover {
  background:var(--row-hover);
}

.league-table tbody tr.clickable {
  cursor:pointer;
}

/* Position indicator */
.pos-cell {
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 0 0 12px;
}

.pos-bar {
  width:4px;
  height:36px;
  border-radius:2px;
  flex-shrink:0;
}

.pos-bar.champions { background:var(--champions); }
.pos-bar.europa { background:var(--europa); }
.pos-bar.conference { background:var(--conference); }
.pos-bar.mid { background:var(--mid); }
.pos-bar.relegation { background:var(--relegation); }

.pos-number {
  font-family:'JetBrains Mono',monospace;
  font-weight:600;
  font-size:1rem;
  color:var(--text);
  width:20px;
  text-align:center;
}

.pos-arrow {
  font-size:0.65rem;
  color:var(--text-muted);
  width:14px;
  text-align:center;
}

.pos-arrow.up { color:var(--champions); }
.pos-arrow.down { color:var(--relegation); }

/* Product cell */
.product-cell {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
}

.product-logo {
  width:36px;
  height:36px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  font-weight:700;
  flex-shrink:0;
}

.product-info {
  min-width:0;
}

.product-name {
  font-weight:600;
  color:var(--text);
  font-size:0.92rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.product-meta {
  font-size:0.75rem;
  color:var(--text-muted);
  margin-top:1px;
}

/* Grade badge */
.grade-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.04em;
}

.grade-pill.s { background:#e6f5ed; color:var(--grade-s); }
.grade-pill.a { background:#e8f1f8; color:var(--grade-a); }
.grade-pill.b { background:#e8f5e8; color:var(--grade-b); }
.grade-pill.c { background:#fff3e0; color:var(--grade-c); }
.grade-pill.d { background:#ffebee; color:var(--grade-d); }

/* Score */
.score-cell {
  font-family:'JetBrains Mono',monospace;
  font-weight:600;
  font-size:0.95rem;
  color:var(--text);
}

/* Criteria scores */
.crit-cell {
  font-family:'JetBrains Mono',monospace;
  font-size:0.82rem;
  color:var(--text-secondary);
}

.crit-cell.high { color:var(--grade-s); font-weight:500; }
.crit-cell.low { color:var(--grade-d); }

/* Price */
.price-cell {
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  color:var(--text);
  font-weight:500;
}

/* Form dots */
.form-dots {
  display:flex;
  gap:3px;
  justify-content:center;
}

.form-dot {
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.6rem;
  font-weight:700;
  color:#fff;
}

.form-dot.w { background:var(--champions); }
.form-dot.d { background:var(--mid); color:var(--text); }
.form-dot.l { background:var(--relegation); }

/* === SECTIONS === */
.section {
  margin-bottom:40px;
}

.section-header {
  margin-bottom:20px;
}

.section-label {
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--text-muted);
  margin-bottom:6px;
}

.section-title {
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;
}

/* === CARDS === */
.card {
  background:var(--bg-white);
  border:1px solid var(--border);
  border-radius:10px;
  padding:24px;
}

.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}

/* === FOOTER === */
.site-footer {
  background:var(--primary);
  color:rgba(255,255,255,0.6);
  padding:40px 24px;
  margin-top:60px;
}

.footer-content {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}

.footer-logo {
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.1rem;
  color:#fff;
}

.footer-logo span { opacity:0.7; }

.footer-links {
  display:flex;
  gap:24px;
  list-style:none;
}

.footer-links a {
  color:rgba(255,255,255,0.6);
  text-decoration:none;
  font-size:0.82rem;
  transition:color 0.2s;
}

.footer-links a:hover { color:#fff; }

.footer-copy {
  font-size:0.78rem;
  color:rgba(255,255,255,0.4);
}

/* === REVIEW PAGE === */
.review-hero {
  background:linear-gradient(135deg, #38003c 0%, #5a2060 50%, #2d1b4e 100%);
  padding:40px 24px 48px;
  position:relative;
}

.review-hero::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-blue) 50%, var(--accent-orange) 100%);
}

.review-hero-content {
  max-width:720px;
  margin:0 auto;
  color:#fff;
}

.review-meta {
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:rgba(255,255,255,0.5);
  margin-bottom:12px;
}

.review-title {
  font-family:'Playfair Display',Georgia,serif;
  font-size:2rem;
  font-weight:700;
  margin-bottom:12px;
}

.review-stats {
  display:flex;
  gap:20px;
  align-items:center;
}

.review-score {
  font-family:'JetBrains Mono',monospace;
  font-size:2rem;
  font-weight:600;
}

.review-grade {
  display:inline-flex;
  padding:6px 14px;
  border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  font-weight:600;
}

/* === SCORE BARS === */
.score-bar-row {
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}

.score-bar-label {
  width:160px;
  font-size:0.88rem;
  font-weight:500;
  color:var(--text);
  flex-shrink:0;
}

.score-bar-track {
  flex:1;
  height:8px;
  background:var(--bg);
  border-radius:4px;
  overflow:hidden;
}

.score-bar-fill {
  height:100%;
  border-radius:4px;
  transition:width 0.8s ease;
}

.score-bar-fill.high { background:var(--champions); }
.score-bar-fill.mid { background:var(--mid); }
.score-bar-fill.low { background:var(--relegation); }

.score-bar-value {
  width:48px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.88rem;
  font-weight:600;
  text-align:right;
  flex-shrink:0;
}

/* === MOBILE === */
@media (max-width:900px) {
  .league-table th:nth-child(n+9),
  .league-table td:nth-child(n+9) {
    display:none;
  }
  .header-title { font-size:1.8rem; }
  .header-nav { display:none; }
  .footer-content { flex-direction:column; text-align:center; }
}

@media (max-width:640px) {
  .league-table th:nth-child(n+7),
  .league-table td:nth-child(n+7) {
    display:none;
  }
  .main-container { padding:16px; }
  .site-header { padding:24px 16px 32px; }
  .filter-bar { gap:6px; }
  .filter-chip { padding:6px 10px; font-size:0.75rem; }
}