:root {
  --bg:#07080a;
  --surface:#111016;
  --surface-2:#18151d;
  --text:#f8f4ec;
  --muted:#aaa39b;
  --line:rgba(255,255,255,.13);
  --teal:#209f94;
  --teal-light:#55c9be;
  --red:#d72f3b;
  --display:"Barlow Condensed",Impact,sans-serif;
}

* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body {
  background:radial-gradient(circle at top left, rgba(32,159,148,.18), transparent 34vw), linear-gradient(180deg, #0b0b0e, var(--bg));
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
}

.projection-dashboard {
  height:100vh;
  display:grid;
  grid-template-rows:minmax(0, 1fr) 76px;
  gap:12px;
  padding:14px 18px;
}

.standings-section {
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  gap:10px;
}

.section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

h1,h2,h3 {
  margin:0;
  font-family:var(--display);
  text-transform:uppercase;
}

h1 {
  font-size:clamp(34px,4.2vw,72px);
  line-height:.8;
  letter-spacing:-.03em;
}

.section-title > span {
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:clamp(10px,1vw,14px);
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
}

.standings-grid {
  min-height:0;
  display:grid;
  grid-template-columns:.74fr .92fr 1.34fr;
  gap:12px;
}

.division-card {
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)), var(--surface);
}

.division-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px 8px;
  border-bottom:1px solid var(--line);
}

.division-heading h3 {
  color:var(--teal-light);
  font-size:clamp(34px,4vw,66px);
  line-height:.78;
  letter-spacing:-.02em;
}

.division-heading span {
  color:var(--muted);
  font-size:clamp(9px,.95vw,13px);
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
}

.standings-table {
  width:100%;
  height:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.standings-table th {
  height:30px;
  padding:4px 6px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:clamp(8px,.85vw,12px);
  text-align:right;
  text-transform:uppercase;
  font-weight:900;
}

.standings-table td {
  padding:5px 6px;
  border-bottom:1px solid rgba(255,255,255,.075);
  font:800 clamp(18px,2vw,34px)/.95 var(--display);
  text-align:right;
}

.standings-table tr:last-child td { border-bottom:0; }
.standings-table th:nth-child(2), .standings-table td:nth-child(2) { width:48%; text-align:left; }
.standings-table th:first-child, .standings-table td:first-child { width:34px; color:#817b74; text-align:center; }
.standings-table .team-name { overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.standings-table .points { color:var(--teal-light); font-size:1.18em; }

.ticker-section {
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(85,201,190,.32);
  border-radius:22px;
  background:#0b0a0e;
  box-shadow:0 0 32px rgba(32,159,148,.08);
}

.ticker-label {
  height:100%;
  display:grid;
  place-items:center;
  padding:0 18px;
  border-radius:16px;
  background:var(--teal);
  color:#03100f;
  font-family:var(--display);
  font-size:clamp(24px,2.5vw,44px);
  font-weight:900;
  line-height:.85;
  text-transform:uppercase;
  white-space:nowrap;
}

.latest-results {
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
}

.result-card {
  min-width:0;
  flex:1 1 0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-2);
}

.result-meta {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:-3px;
  color:var(--muted);
  font-size:clamp(8px,.8vw,11px);
  font-weight:900;
  text-transform:uppercase;
}

.final-pill,.division-pill,.rink-pill {
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:0 7px;
  border-radius:999px;
}

.final-pill { background:rgba(32,159,148,.15); color:var(--teal-light); }
.division-pill,.rink-pill { border:1px solid var(--line); }
.rink-pill { margin-left:auto; }

.result-team {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:900 clamp(19px,2vw,36px)/.85 var(--display);
  text-transform:uppercase;
}

.result-team.away { text-align:right; }

.result-score {
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  background:#07080a;
  color:var(--teal-light);
  font:900 clamp(24px,2.3vw,42px)/1 var(--display);
  white-space:nowrap;
}

.result-score span { color:#6f6963; }

.loading,.ticker-empty {
  margin:0;
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.loading {
  grid-column:1/-1;
  display:grid;
  place-items:center;
  min-height:120px;
  border:1px solid var(--line);
  border-radius:22px;
}

.ticker-empty {
  width:100%;
  text-align:center;
  font-size:clamp(18px,2vw,32px);
}

.refresh-error {
  position:fixed;
  right:16px;
  bottom:96px;
  padding:10px 16px;
  border:1px solid rgba(215,47,59,.5);
  border-radius:999px;
  background:#351317;
  color:#ffd7d9;
  font-size:11px;
  font-weight:800;
}

@media (max-width: 1000px) {
  html,body { height:auto; overflow:auto; }
  .projection-dashboard { height:auto; min-height:100vh; grid-template-rows:auto auto; }
  .standings-grid { grid-template-columns:1fr; }
  .ticker-section { grid-template-columns:1fr; }
  .latest-results { flex-direction:column; align-items:stretch; }
}