* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 85% 0%, rgba(99, 179, 255, .14), transparent 34rem),
    var(--page-bg, #0e132b);
  color: var(--text, #e9f0f7);
  font-family: var(--font-body, Helvetica, Arial, sans-serif);
}

.joint-shell { max-width: 980px; margin: 0 auto; padding: 48px 22px 64px; }
.surface-header { padding: 4px 0 36px; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0; color: var(--accent, #63b3ff); font-size: 13px; font-weight: 900; letter-spacing: .2em; }
.season { border: 1px solid var(--line-strong, #2a3a4d); border-radius: 999px; color: var(--muted, #a7b5c7); padding: 6px 10px; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
h1 { margin: 42px 0 0; color: var(--heading, #f5f8fb); font-family: var(--font-heading, sans-serif); font-size: clamp(54px, 12vw, 112px); letter-spacing: -.055em; line-height: .78; text-transform: uppercase; }
h1 span { color: var(--accent, #63b3ff); }

.explainer { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; margin: 8px 0 20px; border: 1px solid var(--line, #1a2533); border-radius: 12px; background: rgba(17, 25, 38, .72); padding: 16px 18px; }
.explainer-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: var(--accent, #63b3ff); color: #071520; font-family: var(--font-heading, sans-serif); font-size: 20px; font-weight: 900; }
.explainer p { margin: 0; color: var(--muted, #a7b5c7); font-size: 14px; line-height: 1.5; }

.table-frame { border: 1px solid var(--line-strong, #2a3a4d); border-radius: 12px; background: var(--surface, #111926); box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.25)); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 16px 18px; border-bottom: 1px solid var(--line, #1a2533); text-align: left; }
th { background: var(--table-head, #0d1420); color: var(--table-head-text, #dce7f2); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
th:first-child, .rank-cell { width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
th:last-child, .points-cell { width: 160px; text-align: right; font-variant-numeric: tabular-nums; }
.rank-cell { color: var(--muted, #a7b5c7); font-family: var(--font-heading, sans-serif); font-size: 17px; font-weight: 900; }
.points-cell { font-size: 18px; font-weight: 900; }
.team-cell strong, .team-cell span { display: block; }
.team-cell strong { color: var(--heading, #f5f8fb); font-size: 15px; }
.team-cell span { margin-top: 5px; color: var(--muted, #a7b5c7); font-size: 12px; }
tbody tr:nth-child(even) { background: var(--row-alt-bg, #0f1722); }
tbody tr:hover { background: var(--row-hover-bg, #152235); }
tbody tr[data-rank="1"] .rank-cell { color: #ffd166; }
tbody tr[data-rank="2"] .rank-cell { color: #c8d2dc; }
tbody tr[data-rank="3"] .rank-cell { color: #d69b6a; }
tbody tr:last-child td { border-bottom: 0; }
.empty { padding: 28px; margin: 0; color: var(--muted, #a7b5c7); text-align: center; }

@media (max-width: 600px) {
  .joint-shell { padding: 28px 12px 44px; }
  h1 { margin-top: 34px; }
  .explainer { padding: 13px; }
  th, td { padding: 14px 10px; }
  th:first-child, .rank-cell { width: 54px; }
  th:last-child, .points-cell { width: 88px; }
  .team-cell strong { font-size: 13px; }
  .team-cell span { font-size: 11px; }
  .points-cell { font-size: 15px; }
}