:root {
  --bg: #08050d;
  --bg-2: #100918;
  --panel: rgba(19, 14, 25, 0.82);
  --panel-2: rgba(27, 18, 37, 0.88);
  --line: rgba(244, 196, 82, 0.18);
  --line-purple: rgba(138, 66, 255, 0.24);
  --text: #f6efe2;
  --muted: #a7998a;
  --gold: #f4c452;
  --gold-2: #a66d1a;
  --purple: #7f35ff;
  --purple-2: #c49bff;
  --green: #58d68d;
  --red: #ff657a;
  --orange: #ff9c45;
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.45);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(127, 53, 255, 0.24), transparent 30vw),
    radial-gradient(circle at 87% 13%, rgba(244, 196, 82, 0.17), transparent 26vw),
    linear-gradient(135deg, #040306 0%, #0c0612 48%, #050305 100%);
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 76%);
}
body::after {
  content: "GRDN";
  position: fixed;
  right: -2vw;
  bottom: -6vh;
  z-index: 0;
  font-weight: 1000;
  font-size: clamp(7rem, 20vw, 18rem);
  letter-spacing: -0.12em;
  color: rgba(255,255,255,0.025);
  pointer-events: none;
}

a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.site-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  height: 100vh;
  min-height: 100vh;
}

.rail {
  height: 100vh;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10,6,15,0.96), rgba(8,5,11,0.86));
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.brand {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  border: 1px solid rgba(244,196,82,.22);
  background: radial-gradient(circle at top, rgba(127,53,255,.22), rgba(255,255,255,.03));
  border-radius: 24px;
  padding: 10px;
  box-shadow: var(--shadow);
}
.brand img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
}
.brand strong {
  display: block;
  font-size: 1.15rem;
  letter-spacing: .12em;
}
.brand small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .72rem;
}
.tabs {
  display: grid;
  gap: 8px;
}
.tab {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 15px 16px;
  border-radius: 16px;
  color: #d6cabb;
  border: 1px solid transparent;
  transition: .22s var(--ease);
}
.tab span {
  color: rgba(244,196,82,.56);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .1em;
}
.tab:hover,
.tab.is-active {
  color: var(--text);
  border-color: rgba(244,196,82,.22);
  background: linear-gradient(135deg, rgba(244,196,82,.13), rgba(127,53,255,.11));
  transform: translateX(3px);
}
.rail-note {
  margin-top: auto;
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}
.rail-note strong { display: block; font-size: .88rem; }
.rail-note small { display: block; color: var(--muted); margin-top: 4px; font-size: .75rem; }
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(255,156,69,.12);
}
.status-dot.good { background: var(--green); box-shadow: 0 0 0 6px rgba(88,214,141,.12); }
.status-dot.bad { background: var(--red); box-shadow: 0 0 0 6px rgba(255,101,122,.12); }

.mobile-top,
.mobile-menu { display: none; }

.stage {
  height: 100vh;
  overflow: auto;
  padding: 26px;
  scroll-padding: 26px;
}
.stage::-webkit-scrollbar { width: 10px; }
.stage::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
.stage::-webkit-scrollbar-thumb { background: rgba(244,196,82,.23); border-radius: 99px; }

.view {
  min-height: calc(100vh - 52px);
  display: grid;
  gap: 22px;
  animation: enter .28s var(--ease);
}
@keyframes enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(244,196,82,.24);
  background:
    linear-gradient(90deg, rgba(8,5,12,.96) 0%, rgba(14,9,20,.9) 48%, rgba(15,7,26,.72) 100%),
    radial-gradient(circle at 82% 30%, rgba(127,53,255,.34), transparent 30%);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: conic-gradient(from 210deg, transparent, rgba(244,196,82,.12), transparent, rgba(127,53,255,.18), transparent);
  animation: spin 16s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero-watermark {
  position: absolute;
  right: -25px;
  bottom: -95px;
  width: min(48vw, 600px);
  max-width: 640px;
  opacity: .18;
  filter: saturate(1.2) contrast(1.06);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
  width: min(740px, 100%);
  padding: clamp(28px, 5vw, 60px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 900;
  border: 1px solid rgba(244,196,82,.24);
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(244,196,82,.06);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 999px;
  box-shadow: 0 0 20px var(--gold);
}
h1, h2, h3, p { margin: 0; }
h1 {
  margin-top: 22px;
  font-size: clamp(3.1rem, 8vw, 7.2rem);
  line-height: .84;
  letter-spacing: -.075em;
  max-width: 850px;
}
.hero p {
  margin-top: 18px;
  color: #cabdad;
  max-width: 620px;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.65;
}
.hero-actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 800;
  transition: .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: rgba(244,196,82,.35); }
.btn.primary {
  background: linear-gradient(135deg, var(--gold), #db9122);
  color: #170d07;
  border-color: rgba(255,255,255,.08);
}
.btn.ghost { background: rgba(127,53,255,.12); }

.ticker {
  display: flex;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(244,196,82,.17);
  background: rgba(5,3,8,.82);
  white-space: nowrap;
  box-shadow: inset 0 0 30px rgba(127,53,255,.08);
}
.ticker strong {
  flex: 0 0 auto;
  padding: 14px 16px;
  color: #150b04;
  background: var(--gold);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
}
.ticker-track {
  display: inline-flex;
  gap: 36px;
  padding: 14px 0;
  animation: ticker 48s linear infinite;
}
.ticker-item {
  color: #d9ccbe;
  font-size: .9rem;
}
.ticker-item b { color: var(--gold); }
@keyframes ticker {
  from { transform: translateX(2%); }
  to { transform: translateX(-50%); }
}

.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.panel {
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(28,19,36,.82), rgba(12,8,16,.88));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel.gold-line { border-color: rgba(244,196,82,.22); }
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 0;
}
.panel-title span,
.section-title span {
  display: block;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
  font-size: .68rem;
  margin-bottom: 7px;
}
.panel-title h2,
.section-title h2 {
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  letter-spacing: -.04em;
}
.panel-title p,
.section-title p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}
.panel-body { padding: 20px; }
.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.section-title .subtle { color: var(--muted); font-size: .9rem; line-height: 1.45; max-width: 540px; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.stat-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  min-height: 132px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.09);
  background: radial-gradient(circle at 80% 0%, rgba(244,196,82,.13), transparent 42%), rgba(255,255,255,.045);
}
.stat-card::after {
  content: attr(data-index);
  position: absolute;
  right: 14px;
  bottom: -12px;
  font-size: 4rem;
  font-weight: 1000;
  color: rgba(255,255,255,.035);
  letter-spacing: -.1em;
}
.stat-label { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 900; }
.stat-value { display: block; margin-top: 11px; font-size: clamp(1.75rem, 4vw, 3.1rem); line-height: .95; font-weight: 950; letter-spacing: -.055em; }
.stat-note { margin-top: 11px; color: #bfb1a1; font-size: .86rem; }

.leaderboard { display: grid; gap: 10px; }
.leader-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.036);
}
.rank-chip {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #1a1005;
  background: linear-gradient(135deg, var(--gold), #d58a1b);
  font-weight: 1000;
}
.team-meta { min-width: 0; }
.team-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-meta small { display: block; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-pill {
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--gold);
  border: 1px solid rgba(244,196,82,.2);
  background: rgba(244,196,82,.07);
  font-weight: 900;
  font-size: .82rem;
}

.table-wrap {
  overflow: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}
th, td {
  text-align: left;
  padding: 15px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  vertical-align: middle;
}
th {
  color: var(--gold);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  background: rgba(244,196,82,.055);
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: .18s var(--ease); }
tbody tr:hover { background: rgba(127,53,255,.08); }
.manager-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
}
.manager-link:hover { color: var(--gold); }
.avatar-line {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar, .avatar-placeholder {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(244,196,82,.18), rgba(127,53,255,.22));
  display: grid;
  place-items: center;
  font-weight: 1000;
  color: var(--gold);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.team-card {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 18px;
  min-height: 270px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 100% 0%, rgba(127,53,255,.18), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  text-decoration: none;
  overflow: hidden;
  transition: .25s var(--ease);
}
.team-card::before {
  content: attr(data-rank);
  position: absolute;
  right: -14px;
  top: -16px;
  font-size: 7.5rem;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.1em;
  color: rgba(255,255,255,.035);
}
.team-card:hover {
  transform: translateY(-5px);
  border-color: rgba(244,196,82,.28);
  box-shadow: 0 22px 70px rgba(127,53,255,.16);
}
.team-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.team-card h3 { font-size: 1.35rem; letter-spacing: -.03em; }
.team-card p { color: var(--muted); margin-top: 6px; }
.record-badge {
  white-space: nowrap;
  border: 1px solid rgba(244,196,82,.25);
  color: var(--gold);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 1000;
  background: rgba(244,196,82,.07);
}
.card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: auto;
}
.metric {
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.07);
}
.metric small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .63rem; font-weight: 900; }
.metric b { display: block; margin-top: 7px; font-size: 1.05rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 999px;
  color: #dbcfc0;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  font-size: .78rem;
  font-weight: 850;
}
.badge.good { color: #b5ffd3; border-color: rgba(88,214,141,.25); background: rgba(88,214,141,.075); }
.badge.bad { color: #ffd1d8; border-color: rgba(255,101,122,.24); background: rgba(255,101,122,.075); }
.badge.gold { color: var(--gold); border-color: rgba(244,196,82,.26); background: rgba(244,196,82,.07); }
.badge.purple { color: var(--purple-2); border-color: rgba(127,53,255,.28); background: rgba(127,53,255,.09); }

.matchup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.match-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
}
.match-card::before {
  content: "VS";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 4rem;
  font-weight: 1000;
  color: rgba(255,255,255,.035);
  pointer-events: none;
}
.match-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: var(--muted);
  font-size: .8rem;
}
.match-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 18px;
}
.combatant { min-width: 0; }
.combatant.right { text-align: right; }
.combatant strong { display: block; font-size: 1.08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combatant small { display: block; color: var(--muted); margin-top: 5px; }
.combatant .points { display: block; margin-top: 13px; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 1000; letter-spacing: -.06em; color: var(--gold); }
.versus-chip {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(127,53,255,.13);
  border: 1px solid rgba(127,53,255,.25);
  color: var(--purple-2);
  font-weight: 1000;
}
.match-note {
  padding: 0 18px 18px;
  color: var(--muted);
  line-height: 1.45;
}

.wire-list { display: grid; gap: 12px; }
.wire-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 15px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.036);
}
.wire-type {
  min-width: 86px;
  padding: 8px 10px;
  border-radius: 999px;
  text-align: center;
  color: var(--gold);
  background: rgba(244,196,82,.08);
  border: 1px solid rgba(244,196,82,.2);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  font-weight: 1000;
}
.wire-copy strong { display: block; }
.wire-copy p { margin-top: 6px; color: var(--muted); line-height: 1.45; }
.wire-date { color: var(--muted); font-size: .78rem; white-space: nowrap; }

.team-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 28px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(244,196,82,.22);
  background:
    radial-gradient(circle at 86% 20%, rgba(244,196,82,.16), transparent 28%),
    radial-gradient(circle at 10% 0%, rgba(127,53,255,.22), transparent 34%),
    rgba(10,6,15,.84);
  box-shadow: var(--shadow);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 18px;
  font-weight: 900;
}
.back-link:hover { color: var(--gold); }
.team-detail-hero h1 { margin-top: 12px; font-size: clamp(2.5rem, 7vw, 5.7rem); }
.detail-logo {
  width: min(24vw, 180px);
  aspect-ratio: 1;
  border-radius: 38px;
  object-fit: cover;
  border: 1px solid rgba(244,196,82,.23);
  box-shadow: 0 20px 60px rgba(0,0,0,.38);
}
.detail-logo.placeholder { display: grid; place-items: center; background: linear-gradient(135deg, rgba(244,196,82,.18), rgba(127,53,255,.22)); font-size: 4rem; font-weight: 1000; color: var(--gold); }
.timeline { display: grid; gap: 10px; }
.game-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.036);
  border: 1px solid rgba(255,255,255,.08);
}
.game-row .result {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-weight: 1000;
}
.result.win { color: #04120a; background: var(--green); }
.result.loss { color: #21040a; background: var(--red); }
.result.tie { color: #1a1005; background: var(--gold); }
.game-row strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.game-row small { display: block; color: var(--muted); margin-top: 3px; }

.roster-list { display: grid; gap: 9px; }
.player-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}
.player-row small { display: block; color: var(--muted); margin-top: 3px; }
.position-tag {
  color: var(--gold);
  border: 1px solid rgba(244,196,82,.18);
  background: rgba(244,196,82,.06);
  border-radius: 999px;
  padding: 6px 8px;
  font-size: .72rem;
  font-weight: 1000;
}

.playoff-card {
  min-height: 440px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(244,196,82,.22);
  background:
    linear-gradient(180deg, rgba(8,5,12,.82), rgba(8,5,12,.94)),
    radial-gradient(circle at center, rgba(127,53,255,.22), transparent 36%);
  box-shadow: var(--shadow);
}
.playoff-card img { width: min(260px, 52vw); opacity: .42; border-radius: 42px; margin-bottom: 18px; }
.playoff-card h1 { font-size: clamp(4.6rem, 14vw, 11rem); margin: 0; color: var(--gold); }
.playoff-card p { margin: 20px auto 0; color: var(--muted); max-width: 620px; line-height: 1.6; }

.market-box {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}
.market-locked {
  padding: 28px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(244,196,82,.09), rgba(127,53,255,.11));
}
.market-locked h2 { font-size: clamp(2rem, 5vw, 4.8rem); line-height: .9; letter-spacing: -.06em; }
.market-locked p { margin-top: 17px; color: #cbbdad; line-height: 1.65; }
.code-card {
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.26);
  color: #d8ccbf;
  overflow: auto;
}
.code-card code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }

.empty-state,
.loading-card {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 320px;
  padding: 36px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.035);
  color: var(--muted);
}
.loading-card img { width: 180px; border-radius: 30px; margin-bottom: 18px; opacity: .78; }
.empty-state h3 { color: var(--text); margin-bottom: 8px; }
.error-card {
  padding: 26px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,101,122,.26);
  background: rgba(255,101,122,.08);
}
.error-card h2 { color: #ffd1d8; }
.error-card p { margin-top: 8px; color: var(--muted); line-height: 1.6; }

@media (max-width: 1180px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matchup-grid { grid-template-columns: 1fr; }
  .market-box { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body { overflow: auto; }
  .site-shell { display: block; min-height: 100vh; height: auto; }
  .rail { display: none; }
  .mobile-top {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(8,5,12,.86);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(244,196,82,.15);
  }
  .mini-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 1000; letter-spacing: .1em; }
  .mini-brand img { width: 48px; height: 48px; border-radius: 13px; object-fit: cover; }
  .menu-button {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    padding: 10px 12px;
  }
  .menu-button span { display: block; width: 14px; height: 2px; background: var(--gold); border-radius: 99px; }
  .menu-button strong { font-size: .8rem; }
  .mobile-menu {
    position: fixed;
    top: 72px;
    left: 14px;
    right: 14px;
    z-index: 22;
    display: none;
    padding: 10px;
    border-radius: 20px;
    background: rgba(12,8,16,.96);
    border: 1px solid rgba(244,196,82,.18);
    box-shadow: var(--shadow);
  }
  .mobile-menu.open { display: grid; gap: 8px; }
  .mobile-menu a { padding: 13px 14px; text-decoration: none; border-radius: 13px; color: #d9cdbc; background: rgba(255,255,255,.04); }
  .stage { height: auto; min-height: calc(100vh - 72px); overflow: visible; padding: 16px; }
  .view { min-height: unset; }
  .hero { min-height: 470px; }
  .hero-watermark { width: 90vw; opacity: .14; right: -28vw; }
  .team-detail-hero { grid-template-columns: 1fr; }
  .detail-logo { width: 120px; }
  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4,
  .stat-strip,
  .team-grid { grid-template-columns: 1fr; }
  .section-title { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  h1 { font-size: 3.3rem; }
  .hero-content { padding: 24px; }
  .stat-card { min-height: 110px; }
  .match-body { grid-template-columns: 1fr; text-align: left; }
  .combatant.right { text-align: left; }
  .versus-chip { width: 44px; height: 44px; }
  .wire-item { grid-template-columns: 1fr; }
  .wire-date { white-space: normal; }
  .game-row { grid-template-columns: 48px 1fr; }
  .game-row .score-pill { grid-column: 1 / -1; width: max-content; }
}

/* v4: flatter editorial layout */
:root { --radius-xl: 8px; --radius-lg: 6px; --radius-md: 4px; }
.brand,.tab,.rail-note,.hero,.ticker,.panel,.stat-card,.team-card,.match-card,.playoff-card,.market-box,.code-card,.empty-state,.score-pill,.btn,.eyebrow,.badge,.record-badge,.position-tag { border-radius: 4px !important; }
.brand img { border-radius: 2px; }
.panel,.team-card,.match-card,.stat-card { box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.panel,.team-card,.match-card { background: rgba(15,10,20,.86); }
.team-card:hover,.match-card:hover { transform: translateY(-2px); border-color: rgba(244,196,82,.45); }
.match-card { cursor:pointer; }
.team-detail-hero { overflow: visible !important; min-height: 250px; padding: 34px; }
.team-detail-hero > div:first-child { min-width:0; padding-right:20px; }
.team-detail-hero h1 { overflow-wrap:anywhere; line-height:.95; font-size:clamp(2.3rem,6vw,5.5rem); }
.team-summary { display:flex; flex-wrap:wrap; gap:8px; line-height:1.5; max-width:900px; }
.team-summary span { color:var(--gold); }
.ticker { position:relative; z-index:2; overflow:hidden; }
.ticker strong { position:relative; z-index:3; min-width:150px; }
.ticker-track { padding-left:24px; }
.source-note { color:var(--muted); font-size:.85rem; line-height:1.5; }
.market-table { display:grid; }
.market-row { display:grid; grid-template-columns:42px minmax(160px,1fr) minmax(120px,1fr) 110px; align-items:center; gap:14px; text-decoration:none; padding:15px 8px; border-bottom:1px solid rgba(255,255,255,.08); }
.market-row:hover { background:rgba(255,255,255,.04); }
.market-row small { color:var(--muted); }
.market-row b { text-align:right; color:var(--gold); }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.settings-list { display:grid; }
.settings-list div,.scoring-grid div { display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.settings-list span,.scoring-grid span { color:var(--muted); text-transform:capitalize; }
.position-grid { display:flex; flex-wrap:wrap; gap:8px; }
.position-grid span { border:1px solid rgba(244,196,82,.2); padding:8px 10px; font-weight:800; }
.scoring-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px; }
.modal-backdrop { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.78); display:grid; place-items:center; padding:20px; }
.matchup-modal { position:relative; width:min(900px,100%); background:#100b16; border:1px solid rgba(244,196,82,.4); padding:30px; box-shadow:0 30px 100px rgba(0,0,0,.7); }
.modal-close { position:absolute; right:14px; top:10px; border:0; background:transparent; color:var(--text); font-size:2rem; }
.modal-versus { display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:stretch; margin-top:24px; }
.modal-team { border:1px solid rgba(255,255,255,.1); padding:24px; }
.modal-team h3 { font-size:1.6rem; overflow-wrap:anywhere; }
.modal-team p,.modal-note { color:var(--muted); margin-top:6px; }
.modal-score { display:flex; justify-content:space-between; align-items:end; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.modal-score b { font-size:2rem; color:var(--gold); }
.modal-team .btn { display:inline-block; margin-top:18px; }
.modal-note { margin-top:20px; line-height:1.5; }
@media (max-width:800px){.settings-grid,.scoring-grid{grid-template-columns:1fr}.modal-versus{grid-template-columns:1fr}.modal-versus>.versus-chip{justify-self:center}.market-row{grid-template-columns:36px 1fr 90px}.market-row small{display:none}.team-detail-hero{padding:24px}.detail-logo{position:static!important;margin-top:20px}}

/* v5 activity and history */
.activity-scoreboard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.activity-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:18px; }
.feature-activity { min-height:300px; position:relative; }
.feature-activity .panel-header { min-height:250px; align-items:flex-end; background:linear-gradient(135deg,rgba(244,196,82,.08),rgba(127,53,255,.12)); }
.feature-type { position:absolute; top:20px; right:20px; text-transform:uppercase; letter-spacing:.16em; font-weight:900; color:var(--gold); }
.activity-cards { display:grid; gap:10px; }
.activity-card { border-top:1px solid rgba(255,255,255,.09); padding:14px 0; }
.activity-card:first-child { border-top:0; padding-top:0; }
.activity-card span,.activity-preview-main span { color:var(--gold); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:900; }
.activity-card strong { display:block; margin-top:5px; }
.activity-card p { color:var(--muted); margin-top:5px; line-height:1.45; }
.activity-card small { display:block; color:var(--muted); margin-top:7px; }
.activity-preview { display:grid; grid-template-columns:1.25fr .75fr; gap:14px; }
.activity-preview-main { padding:20px; border-left:3px solid var(--gold); background:rgba(244,196,82,.05); }
.activity-preview-main strong { display:block; font-size:1.25rem; margin-top:8px; }
.activity-preview-main p { color:var(--muted); line-height:1.5; margin-top:8px; }
.activity-preview-main small { display:block; margin-top:12px; color:var(--muted); }
.activity-preview-side { display:grid; gap:10px; }
.history-alert { border:1px solid rgba(255,156,69,.35); background:rgba(255,156,69,.08); padding:18px 20px; }
.history-alert strong { display:block; color:#ffd0a7; }
.history-alert p { color:var(--muted); line-height:1.55; margin-top:7px; }
.history-alert code { color:var(--gold); }
.history-hero-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:18px; }
.hall-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.hall-card { display:grid; grid-template-columns:34px 46px 1fr; align-items:center; gap:10px; text-decoration:none; padding:13px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.hall-card:hover { border-color:rgba(244,196,82,.3); }
.hall-rank { font-weight:900; color:var(--gold); }
.hall-card p,.hall-card small { color:var(--muted); margin-top:3px; }
.award-lock { min-height:220px; display:grid; place-content:center; text-align:center; border:1px dashed rgba(244,196,82,.25); }
.award-lock strong { font-size:3rem; color:var(--gold); }
.award-lock span { color:var(--muted); margin-top:6px; }
.weekly-awards { display:grid; gap:10px; }
.award-card { padding:14px; border-left:3px solid var(--purple); background:rgba(127,53,255,.07); }
.award-card span { color:var(--purple-2); text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:900; }
.award-card strong { display:block; margin-top:6px; }
.award-card p { color:var(--muted); margin-top:4px; }
.record-book { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.record-card { display:block; text-decoration:none; padding:18px; border-top:3px solid var(--gold); background:rgba(255,255,255,.025); }
.record-card span { color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }
.record-card strong { display:block; font-size:2rem; margin-top:10px; }
.record-card p { margin-top:8px; }
.record-card small { display:block; color:var(--muted); margin-top:4px; }
.season-archive { display:grid; gap:8px; }
.season-row { display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.season-row > span { color:var(--gold); font-weight:900; }
.season-row small { display:block; color:var(--muted); margin-top:3px; }
.season-row b { font-size:.68rem; letter-spacing:.1em; color:var(--purple-2); }
.history-tools { display:grid; gap:14px; }
.history-tools div { padding:15px; border-left:2px solid rgba(244,196,82,.45); background:rgba(255,255,255,.025); }
.history-tools strong { display:block; }
.history-tools span { display:block; color:var(--muted); margin-top:5px; line-height:1.45; }
@media (max-width:1000px){.activity-scoreboard,.record-book{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-layout,.history-hero-grid{grid-template-columns:1fr}.hall-grid{grid-template-columns:1fr}}
@media (max-width:680px){.activity-scoreboard,.record-book,.activity-preview{grid-template-columns:1fr}.season-row{grid-template-columns:55px 1fr}.season-row b{display:none}}