/* =====================================================================
   Possessions — "Garden at night"
   Dark-first, single committed look. Green / black / silver / blue.
   Data series: Celtics green #00a95c, opponent blue #3b82f6
   (validated for contrast + colorblind separation on the #0b0d0c surface).
   ===================================================================== */

:root {
  color-scheme: dark;

  /* ground */
  --bg: #070908;
  --bg-2: #0b0d0c;
  --surface: #101412;
  --surface-2: #151a17;
  --surface-3: #1b211d;
  --line: #222a25;
  --line-2: #2d3731;

  /* ink: silvers */
  --text: #eef2ef;
  --text-2: #aab4ad;
  --text-3: #6f7b74;
  --silver: #c9d1d9;
  --silver-2: #8b97a3;

  /* brand */
  --green: #00a95c;        /* data mark: Celtics */
  --green-bright: #2ee88a; /* glow / accent text */
  --green-deep: #007a33;
  --blue: #3b82f6;         /* data mark: opponent */
  --blue-bright: #6aa8ff;
  --blue-deep: #1d4ed8;

  /* aliases used by the app */
  --bos: var(--green);
  --opp: var(--blue);
  --bos-soft: rgba(0,169,92,.14);
  --opp-soft: rgba(59,130,246,.14);
  --good: var(--green-bright);
  --bad: #9fb0c2;           /* "cold": losses read as silver, wins glow green */
  --pending: #566059;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 50px -30px rgba(0,0,0,.9);
  --glow: 0 0 0 1px rgba(46,232,138,.18), 0 0 40px -10px rgba(46,232,138,.45);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Barlow Condensed", "Oswald", "Arial Narrow", Impact, var(--font);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}
/* ambient: green glow top-left, blue glow bottom-right, faint parquet grid */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(0,169,92,.22), transparent 60%),
    radial-gradient(800px 500px at 100% 110%, rgba(59,130,246,.14), transparent 60%),
    var(--bg);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.2) 60%, transparent);
}

a { color: inherit; }
h1, h2, h3 { line-height: 1.05; margin: 0 0 .35em; letter-spacing: -.01em; }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.6rem); text-transform: uppercase; letter-spacing: .01em; }
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); text-transform: uppercase; letter-spacing: .02em; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1em; }
.muted { color: var(--text-2); }
.small { font-size: .85rem; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 28px 20px 80px; }
code { font-family: var(--mono); font-size: .85em; background: var(--surface-3); padding: 2px 6px; border-radius: 6px; color: var(--silver); }

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; position: sticky; top: 0; z-index: 10;
  background: rgba(7,9,8,.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--green) 25%, var(--silver) 50%, var(--blue) 75%, transparent);
  opacity: .6;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 1.35rem; color: #04130b;
  background: linear-gradient(145deg, var(--green-bright), var(--green-deep));
  box-shadow: var(--glow);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em; }
.brand-sub { font-size: .72rem; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.site-nav a { text-decoration: none; padding: 7px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--text-2); letter-spacing: .02em; }
.site-nav a:hover { color: var(--text); background: var(--surface-3); }
.site-nav a.active { background: linear-gradient(145deg, var(--green-bright), var(--green-deep)); color: #04130b; box-shadow: var(--glow); }

.site-footer {
  max-width: 1180px; margin: 0 auto; padding: 20px; border-top: 1px solid var(--line);
  color: var(--text-3); font-size: .78rem; display: flex; flex-direction: column; gap: 4px;
}

/* ---------- surfaces ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.grid { display: grid; gap: 16px; }
.grid-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.section { margin-top: 32px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head h2, .section-head h3 { margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--text-3); font-weight: 700; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: stretch; margin-top: 10px; }
.hero > div:first-child { padding-top: 18px; }
.hero h1 {
  background: linear-gradient(180deg, #ffffff 0%, var(--silver) 55%, var(--silver-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .3em;
}
.hero h1 em, .hero h1 strong { color: var(--green-bright); -webkit-text-fill-color: var(--green-bright); font-style: normal; }
.hero p { max-width: 56ch; font-size: 1.02rem; color: var(--text-2); }
.hero .eyebrow { color: var(--green-bright); }
.hero-card {
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(400px 200px at 110% -20%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(500px 300px at -10% 120%, rgba(0,169,92,.25), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: var(--line-2);
}
.hero-record {
  font-family: var(--display); font-size: clamp(4.5rem, 10vw, 7.5rem); font-weight: 800; letter-spacing: -.01em; line-height: .95;
  background: linear-gradient(180deg, #ffffff, var(--silver)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-record small { font-family: var(--font); font-size: .22em; color: var(--text-2); font-weight: 500; letter-spacing: .02em; margin-left: 12px; -webkit-text-fill-color: var(--text-2); }
.hero-kpis { display: flex; gap: 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.hero-kpis div { display: flex; flex-direction: column; }
.hero-kpis span { font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.hero-kpis small { font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } }

/* ---------- stat tiles ---------- */
.tile { padding: 16px 18px; }
.tile .eyebrow { margin-bottom: 8px; }
.tile .val { font-family: var(--display); font-size: 2.4rem; font-weight: 700; letter-spacing: 0; line-height: .95; }
.tile .sub { color: var(--text-2); font-size: .78rem; margin-top: 8px; }
.pos { color: var(--green-bright); } .neg { color: var(--bad); }
.tile .val.pos { color: var(--green-bright); text-shadow: 0 0 24px rgba(46,232,138,.35); }
.tile .val.neg { color: var(--bad); }

/* ---------- neutral score marks ---------- */
.score-marks { display: inline-flex; gap: 2px; font-size: 1.05rem; line-height: 1; }
.score-marks .on { color: var(--green-bright); filter: drop-shadow(0 0 6px rgba(46,232,138,.6)); }
.score-marks .off { color: var(--line-2); }
.score-marks .pend { color: var(--pending); opacity: .6; }

/* ---------- game strip / chips ---------- */
.strip { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 112px;
  padding: 12px 12px 10px; border-radius: 14px; text-decoration: none;
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface));
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.chip:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--glow); }
.chip .res { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; }
.chip .res.W { color: var(--green-bright); }
.chip .res.L { color: var(--bad); }
.chip .opp { font-size: .74rem; color: var(--text-2); letter-spacing: .04em; }
.chip .score-marks { font-size: .72rem; }
.chip.pre { border-style: dashed; }

/* ---------- game list ---------- */
.gamelist { display: flex; flex-direction: column; gap: 10px; }
.gamerow { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 14px; align-items: center; text-decoration: none; padding: 14px 18px; transition: border-color .15s ease; }
.gamerow { border-left: 3px solid var(--team-accent, var(--green)); }
.gamerow:hover { border-color: var(--team-accent, var(--green)); }
.gamerow .date { color: var(--text-2); font-size: .85rem; }
.gamerow .matchup { font-weight: 600; }
.gamerow .tag { font-size: .66rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; margin-left: 8px; }
.gamerow .score { font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.gamerow .score.W { color: var(--team-accent, var(--green-bright)); } .gamerow .score.L { color: var(--bad); }
@media (max-width: 600px) { .gamerow { grid-template-columns: 1fr auto; } .gamerow .date { grid-column: 1 / -1; } }

/* ---------- scorecard (game page) ---------- */
.scorecard { display: flex; flex-direction: column; gap: 16px; }
.pillar { display: grid; grid-template-columns: 160px 1fr 92px; gap: 14px; align-items: center; }
.pillar .name { font-weight: 700; }
.pillar .name small { display: block; font-weight: 400; color: var(--text-3); font-size: .72rem; letter-spacing: .04em; }
.pillar .verdict { text-align: right; font-weight: 800; font-size: .8rem; display: inline-flex; justify-content: flex-end; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .08em; }
.pillar .verdict.won { color: var(--green-bright); }
.pillar .verdict.lost { color: var(--bad); }
.pillar .verdict.pending { color: var(--pending); font-weight: 600; }
.bars { display: flex; flex-direction: column; gap: 5px; }
.bar { display: grid; grid-template-columns: 38px 1fr 40px; align-items: center; gap: 8px; font-size: .78rem; }
.bar .who { color: var(--text-3); font-weight: 700; letter-spacing: .06em; }
.bar .track { height: 12px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.bar .fill { height: 100%; border-radius: 0 6px 6px 0; }
.bar.bos .fill { background: linear-gradient(90deg, var(--green-deep), var(--green-bright)); box-shadow: 0 0 14px rgba(46,232,138,.35); }
.bar.opp .fill { background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright)); }
.bar .num { text-align: right; font-weight: 700; }
@media (max-width: 600px) { .pillar { grid-template-columns: 1fr 80px; } .pillar .bars { grid-column: 1 / -1; } }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 700; }
tbody tr:hover td { background: rgba(255,255,255,.02); }
td.win { color: var(--green-bright); font-weight: 700; }

/* ---------- small multiples (svg) ---------- */
.sm { padding: 16px 18px; }
.sm h3 { font-size: .95rem; margin-bottom: 2px; }
.sm .sub { font-size: .74rem; color: var(--text-3); margin-bottom: 10px; }
.sm .sub strong { font-weight: 800; }
.band-head h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: .02em; }
.card.sm h3 { font-size: 1.12rem; letter-spacing: .02em; }
.sm svg { width: 100%; height: 120px; display: block; overflow: visible; }
.sm .axis { stroke: var(--line); stroke-width: 1; }
.sm .zero { stroke: var(--line-2); stroke-width: 1; }
.sm rect.pos { fill: var(--green); }
.sm rect.neg { fill: var(--bad); }
.sm rect.pend { fill: var(--line-2); }
.sm text { font-size: 10px; fill: var(--text-3); font-family: var(--mono); }
.sm rect:hover { opacity: .75; }
.sm svg path.area.pos { fill: var(--green); opacity: .18; }
.sm svg path.area.neg { fill: var(--bad); opacity: .14; }
.sm svg path.line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sm svg path.line.pos { stroke: var(--green-bright); filter: drop-shadow(0 0 6px rgba(46,232,138,.5)); }
.sm svg path.line.neg { stroke: var(--bad); }
.sm svg circle.pos { fill: var(--green-bright); stroke: var(--surface); stroke-width: 2; }
.sm svg circle.neg { fill: var(--bad); stroke: var(--surface); stroke-width: 2; }
.scorechart { width: 100%; height: 120px; display: block; overflow: visible; }
.scorechart .axis { stroke: var(--line); }
.scorechart text { font-size: 10px; fill: var(--text-3); font-family: var(--mono); }
.scorechart rect.pos { fill: var(--green); } .scorechart rect.neg { fill: var(--bad); }
.scorechart rect:hover { opacity: .75; }

/* ---------- dashboard sections ---------- */
.jump { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.jump a {
  text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--silver); background: var(--surface);
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.jump a:hover { border-color: var(--green); color: var(--green-bright); box-shadow: var(--glow); }
.band { scroll-margin-top: 90px; padding-top: 34px; margin-top: 44px; position: relative; }
.band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--green) 0, var(--line) 30%, var(--line) 70%, var(--blue) 100%); opacity: .7; }
.band-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.band-head h2 { margin-bottom: 6px; }
.band-head p { margin: 0; max-width: 72ch; }
.band-num {
  font-family: var(--display); font-size: 2.4rem; font-weight: 800; line-height: 1; min-width: 56px; letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--green-bright), var(--green-deep)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-title { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.sub-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--text-3); margin: 26px 0 12px; font-weight: 700; }
.legend { display: flex; gap: 18px; font-size: .78rem; color: var(--text-2); flex-wrap: wrap; letter-spacing: .04em; }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 7px; vertical-align: -2px; }
.legend .l-bos::before { background: var(--green); box-shadow: 0 0 10px rgba(46,232,138,.5); }
.legend .l-opp::before { background: var(--blue); }
.legend .l-bench::before { background: transparent; border-left: 2px dashed var(--silver-2); border-radius: 0; width: 0; height: 12px; }

/* paired bars (legacy, still used on some cards) */
.pairs { display: flex; flex-direction: column; gap: 12px; }
.pair-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.pair-name { font-weight: 600; font-size: .9rem; }
.pair-diff { font-weight: 700; font-size: .85rem; }
.pair .bar { margin-bottom: 3px; }

/* big vertical column strips */
.colcard { padding-bottom: 10px; }
.colstrip {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 8px 4px 16px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.colstrip::-webkit-scrollbar { height: 8px; }
.colstrip::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.colgroup {
  flex: 0 0 190px; scroll-snap-align: start; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-3), var(--surface)); border-radius: 14px; padding: 14px 16px 14px;
  border: 1px solid var(--line); position: relative; overflow: hidden;
}
.colgroup::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line-2); }
.colgroup.won { border-color: rgba(46,232,138,.35); box-shadow: 0 0 40px -18px rgba(46,232,138,.6) inset; }
.colgroup.lost { border-color: rgba(159,176,194,.3); }
.col-diff { font-family: var(--display); font-weight: 800; font-size: 1.9rem; text-align: right; min-height: 1.1em; line-height: 1; }
.cols { display: flex; align-items: flex-end; justify-content: center; gap: 12px; height: 260px; margin: 22px 0 12px; }
.col { width: 60px; border-radius: 8px 8px 3px 3px; position: relative; min-height: 4px; transition: height .5s cubic-bezier(.2,.8,.2,1); }
.col.bos { background: linear-gradient(180deg, var(--green-bright), var(--green-deep)); box-shadow: 0 0 30px -6px rgba(46,232,138,.55); }
.col.opp { background: linear-gradient(180deg, var(--blue-bright), var(--blue-deep)); box-shadow: 0 0 24px -8px rgba(106,168,255,.4); }
.col-val { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -8px); font-family: var(--display); font-weight: 700; font-size: 1.15rem; white-space: nowrap; color: var(--text); }
.col-name { font-weight: 700; font-size: .95rem; line-height: 1.2; border-top: 1px solid var(--line); padding-top: 10px; }
.col-name small { display: block; font-weight: 500; color: var(--text-3); font-size: .68rem; margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 600px) { .colgroup { flex-basis: 160px; } .cols { height: 210px; } .col { width: 48px; } }

/* bullet tiles */
.bullet .bullet-track { position: relative; height: 10px; background: var(--surface-3); border-radius: 5px; margin: 10px 0 8px; overflow: visible; }
.bullet .bullet-fill { height: 100%; background: linear-gradient(90deg, var(--green-deep), var(--green-bright)); border-radius: 5px; box-shadow: 0 0 14px rgba(46,232,138,.35); }
.bullet .bullet-opp { position: absolute; top: -4px; width: 4px; height: 18px; background: var(--blue-bright); border-radius: 2px; transform: translateX(-50%); box-shadow: 0 0 8px rgba(106,168,255,.6); }
.bullet .bullet-bench { position: absolute; top: -5px; width: 0; height: 20px; border-left: 2px dashed var(--silver-2); transform: translateX(-50%); }

/* ---------- misc ---------- */
.callout { border-left: 3px solid var(--green-bright); background: var(--bos-soft); padding: 14px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.callout.warn { border-color: var(--blue-bright); background: var(--opp-soft); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--surface-3); color: var(--text-2); vertical-align: middle; font-family: var(--font); }
.pill.good { background: linear-gradient(145deg, var(--green-bright), var(--green-deep)); color: #04130b; box-shadow: var(--glow); }
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .45em; }
blockquote { margin: 1.2em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--blue); color: var(--silver); font-style: italic; font-size: 1.05rem; }
.btn { display: inline-block; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; font-size: .9rem; }
.back { margin-bottom: 14px; display: inline-block; color: var(--text-2); text-decoration: none; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.back:hover { color: var(--green-bright); }

/* entrance */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#app > * { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
#app > *:nth-child(2) { animation-delay: .05s; } #app > *:nth-child(3) { animation-delay: .1s; } #app > *:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { #app > * { animation: none; } .col { transition: none; } }

/* =====================================================================
   ARENA ATMOSPHERE — fog, spotlights, rafters with waving banners
   ===================================================================== */
.arena { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* fog: three soft blobs drifting at different speeds */
.fog {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform;
  mix-blend-mode: screen;
}
.fog-1 { width: 70vw; height: 40vh; left: -15vw; top: 8vh;  background: radial-gradient(closest-side, rgba(0,169,92,.35), transparent 70%); animation: drift1 38s ease-in-out infinite alternate; }
.fog-2 { width: 60vw; height: 36vh; right: -20vw; top: 20vh; background: radial-gradient(closest-side, rgba(59,130,246,.28), transparent 70%); animation: drift2 46s ease-in-out infinite alternate; }
.fog-3 { width: 90vw; height: 30vh; left: 5vw;  bottom: -6vh; background: radial-gradient(closest-side, rgba(201,209,217,.16), transparent 70%); animation: drift3 54s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); }   to { transform: translate(18vw, 6vh) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-16vw, -8vh) scale(.95); } }
@keyframes drift3 { from { transform: translate(0,0); }            to { transform: translate(-10vw, -4vh); } }

/* spotlights: cones sweeping from the rafters */
.spot {
  position: absolute; top: -12vh; left: 50%; width: 34vw; height: 120vh; transform-origin: 50% 0;
  background: conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(255,255,255,.0) 170deg, rgba(220,255,236,.16) 176deg, rgba(220,255,236,.28) 180deg, rgba(220,255,236,.16) 184deg, transparent 190deg, transparent 360deg);
  filter: blur(14px); mix-blend-mode: screen; opacity: .9; will-change: transform;
}
.spot-1 { left: 18%;  animation: sweep1 11s ease-in-out infinite alternate; }
.spot-2 { left: 62%;  animation: sweep2 13s ease-in-out infinite alternate; background: conic-gradient(from 180deg at 50% 0%, transparent 0deg, transparent 172deg, rgba(150,200,255,.14) 177deg, rgba(150,200,255,.26) 180deg, rgba(150,200,255,.14) 183deg, transparent 188deg); }
.spot-3 { left: 40%;  animation: sweep3 17s ease-in-out infinite alternate; opacity: .6; }
@keyframes sweep1 { from { transform: translateX(-50%) rotate(-22deg); } to { transform: translateX(-50%) rotate(16deg); } }
@keyframes sweep2 { from { transform: translateX(-50%) rotate(20deg); }  to { transform: translateX(-50%) rotate(-18deg); } }
@keyframes sweep3 { from { transform: translateX(-50%) rotate(-8deg); }  to { transform: translateX(-50%) rotate(10deg); } }

/* parquet floor in perspective at the bottom of the viewport */
.floor {
  position: absolute; left: -20vw; right: -20vw; bottom: -2vh; height: 32vh; transform: perspective(600px) rotateX(62deg); transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 2px, transparent 2px 90px),
    linear-gradient(180deg, transparent, rgba(0,169,92,.10) 60%, rgba(0,169,92,.18));
  mask-image: linear-gradient(180deg, transparent, #000 45%);
  opacity: .8;
}

/* rafters + banners */
.rafters { position: relative; z-index: 1; height: 118px; overflow: hidden; pointer-events: none; }
.rail { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(180deg, #3a4440, #141a17); box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.banners { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; padding: 0 12px; white-space: nowrap; }
.banner {
  --i: 0;
  width: 54px; height: 100px; position: relative; transform-origin: 50% 0;
  background: linear-gradient(180deg, #0a7a3a 0%, #007a33 55%, #025d2a 100%);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
  filter: url(#cloth) drop-shadow(0 8px 10px rgba(0,0,0,.6));
  animation: swing 6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.55s);
}
.banner::before { content: ""; position: absolute; inset: 4px 4px auto 4px; height: 2px; background: #d9b64b; opacity: .85; }
.banner::after  { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.28), transparent 35%, rgba(255,255,255,.08) 55%, transparent 70%, rgba(0,0,0,.28)); }
.banner span {
  position: absolute; left: 0; right: 0; top: 34px; text-align: center;
  font-family: var(--display); font-weight: 800; font-size: 15px; color: #e8d48b; letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
@keyframes swing { from { transform: rotate(-1.6deg) skewX(1.5deg); } to { transform: rotate(1.6deg) skewX(-1.5deg); } }
@media (max-width: 700px) { .banner { width: 40px; height: 78px; } .banner span { font-size: 11px; top: 26px; } .rafters { height: 92px; } }

/* hero sits just under the rafters; spotlights land on the record */
.hero { margin-top: 6px; }
.hero-card { box-shadow: var(--shadow), 0 0 80px -30px rgba(220,255,236,.35); }

@media (prefers-reduced-motion: reduce) {
  .fog, .spot, .banner { animation: none; }
  .banner { filter: drop-shadow(0 8px 10px rgba(0,0,0,.6)); }
}

/* =====================================================================
   BIG BARS — growth animation, smoke, lighting, shadows, electric pulses
   ===================================================================== */
.colgroup { flex-basis: 250px; padding: 18px 20px 16px; }
.cols { height: 380px; margin: 28px 0 14px; gap: 18px; align-items: flex-end; position: relative; }
/* ground shadow under the bars */
.cols::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -6px; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); filter: blur(4px); z-index: 0;
}
.col {
  width: 88px; min-height: 6px; z-index: 1;
  height: 0; overflow: hidden; border-radius: 10px 10px 4px 4px;
  transition: height 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0ms);
  box-shadow:
    inset 2px 0 0 rgba(255,255,255,.18),        /* key-light edge */
    inset -3px 0 0 rgba(0,0,0,.35),             /* shadow edge */
    inset 0 -18px 30px rgba(0,0,0,.35),         /* base falloff */
    0 18px 30px -10px rgba(0,0,0,.8);           /* drop shadow */
}
.colgroup.in .col { height: var(--h, 0%); }
.col.bos { background: linear-gradient(180deg, #46f2a0 0%, #16c46e 35%, #007a33 100%); box-shadow: 0 0 44px -6px rgba(46,232,138,.7), inset 2px 0 0 rgba(255,255,255,.22), inset -3px 0 0 rgba(0,0,0,.35), inset 0 -18px 30px rgba(0,0,0,.35), 0 18px 30px -10px rgba(0,0,0,.8); }
.col.opp { background: linear-gradient(180deg, #8dbcff 0%, #3b82f6 40%, #1d4ed8 100%); box-shadow: 0 0 36px -8px rgba(106,168,255,.55), inset 2px 0 0 rgba(255,255,255,.2), inset -3px 0 0 rgba(0,0,0,.35), inset 0 -18px 30px rgba(0,0,0,.35), 0 18px 30px -10px rgba(0,0,0,.8); }
.col > i { position: absolute; inset: 0; display: block; pointer-events: none; }

/* smoke: two soft layers rising inside the bar */
.col .smoke {
  opacity: .55; mix-blend-mode: screen;
  background:
    radial-gradient(60px 40px at 30% 80%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(50px 60px at 70% 50%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(70px 50px at 50% 20%, rgba(255,255,255,.28), transparent 70%);
  background-size: 100% 200%; filter: blur(8px);
  animation: smokeRise 7s linear infinite;
}
.col .smoke::after {
  content: ""; position: absolute; inset: 0; opacity: .7;
  background:
    radial-gradient(40px 70px at 60% 90%, rgba(255,255,255,.3), transparent 70%),
    radial-gradient(70px 40px at 20% 40%, rgba(255,255,255,.18), transparent 70%);
  background-size: 100% 200%; filter: blur(10px);
  animation: smokeRise 11s linear infinite reverse;
}
@keyframes smokeRise { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

/* lighting: a specular sheen that sweeps across */
.col .shine {
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.08) 50%, transparent 60%);
  background-size: 250% 100%; mix-blend-mode: screen;
  animation: sheen 5.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* electric pulse: a sharp bright line shooting up the bar */
.col .pulse {
  top: auto; bottom: -12px; height: 10px; opacity: 0;
  background: linear-gradient(180deg, transparent, #ffffff 50%, transparent);
  box-shadow: 0 0 10px 2px rgba(255,255,255,.9), 0 0 28px 6px rgba(46,232,138,.7);
  animation: pulseUp 3.2s cubic-bezier(.7,0,.3,1) infinite;
  animation-delay: calc(var(--d, 0ms) * 4 + 1200ms);
}
.col.opp .pulse { box-shadow: 0 0 10px 2px rgba(255,255,255,.9), 0 0 28px 6px rgba(106,168,255,.8); animation-duration: 3.9s; }
@keyframes pulseUp {
  0%   { transform: translateY(0); opacity: 0; }
  6%   { opacity: 1; }
  28%  { transform: translateY(-420px); opacity: 1; }
  32%  { opacity: 0; }
  100% { transform: translateY(-420px); opacity: 0; }
}
/* glow flare on the whole bar when the pulse hits the top */
.col::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.45), transparent 40%);
  animation: flare 3.2s ease-out infinite; animation-delay: calc(var(--d, 0ms) * 4 + 1200ms + 900ms);
}
.col.opp::after { animation-duration: 3.9s; }
@keyframes flare { 0%, 10% { opacity: 0; } 14% { opacity: .9; } 30% { opacity: 0; } 100% { opacity: 0; } }

/* value label pops in after the bar lands */
.col-val { font-size: 1.5rem; opacity: 0; transform: translate(-50%, 4px); transition: opacity .4s ease .9s, transform .4s ease .9s; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.colgroup.in .col-val { opacity: 1; transform: translate(-50%, -10px); }
.col-diff { font-size: 2.4rem; }
.col-diff.pos { text-shadow: 0 0 24px rgba(46,232,138,.6); }
@media (max-width: 600px) { .colgroup { flex-basis: 190px; } .cols { height: 280px; } .col { width: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .col { transition: none; height: var(--h, 0%); }
  .col .smoke, .col .smoke::after, .col .shine, .col .pulse, .col::after { animation: none; }
  .col-val { opacity: 1; transform: translate(-50%, -10px); transition: none; }
}

/* ---------- rate tiles (head-to-head) ---------- */
.rate-group { margin-top: 22px; }
.rate-group-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.rate-group-head .card-title { margin: 0; }
.ratetile { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.ratetile.won { border-color: rgba(46,232,138,.3); }
.ratetile.lost { border-color: rgba(106,168,255,.3); }
.rate-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rate-name { font-family: var(--display); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; }
.rate-what { color: var(--text-2); font-size: .82rem; margin-top: 4px; line-height: 1.35; }
.edge { flex: 0 0 auto; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.edge.won { background: linear-gradient(145deg, var(--green-bright), var(--green-deep)); color: #04130b; box-shadow: var(--glow); }
.edge.lost { background: rgba(59,130,246,.18); color: var(--blue-bright); border: 1px solid rgba(106,168,255,.35); }
.edge.even { background: var(--surface-3); color: var(--text-2); }
.rate-bars { display: flex; flex-direction: column; gap: 8px; }
.rate-row { display: grid; grid-template-columns: 78px 1fr 64px; align-items: center; gap: 10px; }
.rate-row .who { font-size: .7rem; font-weight: 800; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; }
.rate-row .track { height: 16px; background: var(--surface-3); border-radius: 8px; overflow: hidden; }
.rate-row .fill { height: 100%; border-radius: 0 8px 8px 0; transition: width .8s cubic-bezier(.16,1,.3,1); }
.rate-row .fill.bos { background: linear-gradient(90deg, var(--green-deep), var(--green-bright)); box-shadow: 0 0 16px rgba(46,232,138,.4); }
.rate-row .fill.opp { background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright)); }
.rate-row .num { text-align: right; font-weight: 700; color: var(--text-2); }
.rate-row .num.big { font-family: var(--display); font-size: 1.5rem; color: var(--text); }
.rate-last { font-size: .78rem; color: var(--text-3); border-top: 1px solid var(--line); padding-top: 10px; }
.rate-last::before { content: "Last season · "; color: var(--silver-2); font-weight: 700; letter-spacing: .04em; }

/* ---------- section accents: each band has its own color identity ---------- */
.band-1 { --accent: #2ee88a; --accent-deep: #007a33; --accent-rgb: 46,232,138; }   /* green  : totals   */
.band-2 { --accent: #6aa8ff; --accent-deep: #1d4ed8; --accent-rgb: 106,168,255; }  /* blue   : averages */
.band-3 { --accent: #35e0e6; --accent-deep: #0e7490; --accent-rgb: 53,224,230; }   /* cyan   : game by game */
.band-4 { --accent: #e9c25a; --accent-deep: #9a6b12; --accent-rgb: 233,194,90; }   /* gold   : game log */
.band::before { background: linear-gradient(90deg, var(--accent, var(--green)) 0, rgba(var(--accent-rgb, 46,232,138), .25) 35%, var(--line) 100%); opacity: 1; }
.band .band-num { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); -webkit-background-clip: text; background-clip: text; }
.band .band-head h2 { color: var(--accent); text-shadow: 0 0 30px rgba(var(--accent-rgb), .35); }
.band .sub-title { color: var(--accent); opacity: .85; }
.band .sub-title .muted { color: var(--text-3); }
.band .card-title { color: var(--accent); }
.band .card::before { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55), transparent); }
.band { background: radial-gradient(900px 300px at 0% 0%, rgba(var(--accent-rgb, 46,232,138), .07), transparent 60%); border-radius: 24px; padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; }
.band .rate-group-head .card-title { color: var(--accent); }
.band .edge.won { box-shadow: var(--glow); }
.band .colgroup.won { border-color: rgba(46,232,138,.35); }
/* jump chips match their section */
.jump a.j1:hover { border-color: #2ee88a; color: #2ee88a; box-shadow: 0 0 0 1px rgba(46,232,138,.2), 0 0 30px -8px rgba(46,232,138,.6); }
.jump a.j2:hover { border-color: #6aa8ff; color: #6aa8ff; box-shadow: 0 0 0 1px rgba(106,168,255,.2), 0 0 30px -8px rgba(106,168,255,.6); }
.jump a.j3:hover { border-color: #35e0e6; color: #35e0e6; box-shadow: 0 0 0 1px rgba(53,224,230,.2), 0 0 30px -8px rgba(53,224,230,.6); }
.jump a.j4:hover { border-color: #e9c25a; color: #e9c25a; box-shadow: 0 0 0 1px rgba(233,194,90,.2), 0 0 30px -8px rgba(233,194,90,.6); }
.jump a::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--dot, var(--text-3)); box-shadow: 0 0 10px var(--dot, transparent); }
.jump a.j1 { --dot: #2ee88a; } .jump a.j2 { --dot: #6aa8ff; } .jump a.j3 { --dot: #35e0e6; } .jump a.j4 { --dot: #e9c25a; }
/* game log chips pick up gold */
.band-4 .chip:hover { border-color: #e9c25a; box-shadow: 0 0 0 1px rgba(233,194,90,.2), 0 0 40px -10px rgba(233,194,90,.6); }
/* game-by-game cards get a cyan hairline */
.band-3 .sm h3 { color: var(--text); }

/* =====================================================================
   COLUMN GRID — replaces the scrolling strip. Fits on screen, one grow-in.
   ===================================================================== */
.colgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.colstrip { display: none; }
.colgrid .colgroup {
  flex: none; width: auto; padding: 14px 14px 12px; border-radius: 14px; overflow: visible;
  background: linear-gradient(180deg, var(--surface-3), var(--surface)); border: 1px solid var(--line); box-shadow: none;
}
.colgrid .colgroup::after { display: none; }
.colgrid .colgroup.won { border-color: rgba(46,232,138,.4); box-shadow: 0 0 36px -16px rgba(46,232,138,.6) inset; }
.colgrid .colgroup.lost { border-color: rgba(106,168,255,.35); }
.colgrid .col-name { border-top: 0; padding-top: 0; font-size: .92rem; min-height: 2.6em; }
.colgrid .col-name small { margin-top: 2px; }
.colgrid .cols { height: 190px; margin: 14px 0 10px; gap: 14px; align-items: flex-end; justify-content: center; }
.colgrid .cols::after { display: none; }
.colwrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 54px; }
.colgrid .col {
  width: 100%; height: 0; min-height: 4px; overflow: visible; border-radius: 8px 8px 3px 3px; position: relative;
  transition: height .9s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms);
  box-shadow: inset 2px 0 0 rgba(255,255,255,.18), inset -2px 0 0 rgba(0,0,0,.3), 0 12px 24px -10px rgba(0,0,0,.8);
}
.colgrid .colgroup.in .col { height: var(--h, 0%); }
.colgrid .col.bos { background: linear-gradient(180deg, #3deb97 0%, #16c46e 40%, #007a33 100%); box-shadow: 0 0 28px -8px rgba(46,232,138,.7), inset 2px 0 0 rgba(255,255,255,.2), inset -2px 0 0 rgba(0,0,0,.3), 0 12px 24px -10px rgba(0,0,0,.8); }
.colgrid .col.opp { background: linear-gradient(180deg, #8dbcff 0%, #3b82f6 45%, #1d4ed8 100%); box-shadow: 0 0 22px -8px rgba(106,168,255,.5), inset 2px 0 0 rgba(255,255,255,.2), inset -2px 0 0 rgba(0,0,0,.3), 0 12px 24px -10px rgba(0,0,0,.8); }
.colgrid .col::after, .colgrid .col .smoke, .colgrid .col .shine, .colgrid .col .pulse { display: none; animation: none; }
.colgrid .col-val { position: static; transform: none; font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1; margin-bottom: 6px; opacity: 0; transition: opacity .4s ease .7s; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.colgrid .colgroup.in .col-val { opacity: 1; transform: none; }
.col-who { font-size: .66rem; font-weight: 800; letter-spacing: .1em; color: var(--text-3); margin-top: 8px; }
.col-badge { margin-top: 6px; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); }
.col-badge.won { background: linear-gradient(145deg, var(--green-bright), var(--green-deep)); color: #04130b; }
.col-badge.lost { background: rgba(59,130,246,.18); color: var(--blue-bright); border: 1px solid rgba(106,168,255,.35); }
@media (max-width: 600px) { .colgrid { grid-template-columns: repeat(2, 1fr); } .colgrid .cols { height: 150px; } .colwrap { width: 44px; } }
@media (prefers-reduced-motion: reduce) { .colgrid .col { transition: none; height: var(--h, 0%); } .colgrid .col-val { opacity: 1; transition: none; } }

/* ---------- preseason notice ---------- */
.notice {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px;
  padding: 12px 16px; border-radius: 12px; font-size: .92rem; color: var(--silver);
  background: linear-gradient(90deg, rgba(240,138,138,.16), rgba(240,138,138,.04));
  border: 1px solid rgba(240,138,138,.45); box-shadow: 0 0 40px -14px rgba(240,138,138,.5);
}
.notice strong { color: #ffb0b0; }
.notice-tag {
  font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; background: #f08a8a; color: #2b1216; box-shadow: 0 0 18px rgba(240,138,138,.6);
  animation: noticePulse 2.4s ease-in-out infinite;
}
@keyframes noticePulse { 0%, 100% { box-shadow: 0 0 10px rgba(240,138,138,.4); } 50% { box-shadow: 0 0 26px rgba(240,138,138,.9); } }
.pre-pill { background: #f08a8a; color: #2b1216; margin-left: 8px; }
@media (prefers-reduced-motion: reduce) { .notice-tag { animation: none; } }

/* =====================================================================
   RED FOR "OPPONENT AHEAD" + MOBILE PASS
   ===================================================================== */
:root { --bad: #f0524f; --bad-rgb: 240,82,79; }
.colgrid .colgroup.lost { border-color: rgba(var(--bad-rgb), .55); box-shadow: 0 0 36px -16px rgba(var(--bad-rgb), .55) inset; }
.col-badge.lost { background: rgba(var(--bad-rgb), .16); color: #ff7b78; border: 1px solid rgba(var(--bad-rgb), .5); }
.ratetile.lost { border-color: rgba(var(--bad-rgb), .5); }
.edge.lost { background: rgba(var(--bad-rgb), .16); color: #ff7b78; border: 1px solid rgba(var(--bad-rgb), .5); }
.pillar .verdict.lost, .chip .res.L, .gamerow .score.L, .neg, .tile .val.neg, .col-diff.neg, .pair-diff.neg { color: #ff7b78; }
.sm rect.neg, .scorechart rect.neg, .sm svg circle.neg { fill: var(--bad); }
.sm svg path.line.neg { stroke: var(--bad); }
.sm svg path.area.neg { fill: var(--bad); }
.score-marks .off { color: rgba(var(--bad-rgb), .55); }

/* badges never wrap */
.col-badge, .edge { white-space: nowrap; }
.col-badge { font-size: .66rem; padding: 6px 6px; letter-spacing: .04em; }

/* ---- mobile ---- */
@media (max-width: 700px) {
  .wrap { padding: 18px 14px 60px; }
  .site-header { padding: 10px 14px; gap: 10px; }
  .brand-mark { width: 34px; height: 34px; font-size: 1.1rem; border-radius: 10px; }
  .brand-text strong { font-size: 1.15rem; }
  .brand-sub { display: none; }
  .site-nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: 1 0 auto; text-align: center; padding: 7px 12px; font-size: .82rem; }
  .rafters { height: 76px; }
  .banner { width: 34px; height: 64px; }
  .banner span { font-size: 10px; top: 20px; }
  .banner span::before { font-size: 10px; margin-bottom: 1px; }
  .notice { font-size: .85rem; padding: 10px 12px; gap: 10px; }
  .hero > div:first-child { padding-top: 6px; }
  h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
  .hero-record { font-size: 4.2rem; }
  .hero-kpis { gap: 16px; }
  .hero-kpis span { font-size: 1.4rem; }
  .jump { gap: 6px; margin-top: 18px; }
  .jump a { padding: 7px 10px; font-size: .7rem; letter-spacing: .05em; }
  .band { padding-left: 10px; padding-right: 10px; margin-left: -10px; margin-right: -10px; padding-top: 24px; margin-top: 30px; scroll-margin-top: 110px; }
  .band-head { gap: 12px; margin-bottom: 14px; }
  .band-head h2 { font-size: 1.45rem; }
  .band-head p { font-size: .9rem; }
  .band-num { font-size: 1.8rem; min-width: 40px; }
  .card { padding: 16px 14px; border-radius: 14px; }
  .card-title { font-size: 1.15rem; }
  .colgrid { gap: 10px; }
  .colgrid .colgroup { padding: 12px 10px 10px; }
  .colgrid .col-name { font-size: .86rem; min-height: 2.4em; }
  .colgrid .cols { height: 150px; gap: 12px; margin: 10px 0 8px; }
  .colwrap { width: 46px; }
  .colgrid .col-val { font-size: 1.2rem; }
  .ratetile { padding: 14px; gap: 10px; }
  .rate-name { font-size: 1.1rem; }
  .rate-row { grid-template-columns: 64px 1fr 58px; gap: 8px; }
  .rate-row .num.big { font-size: 1.3rem; }
  .sm svg { height: 100px; }
  .chip { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
  .site-footer { padding: 16px 14px; }
  /* game page */
  .pillar { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .pillar .bars { grid-column: 1 / -1; }
  .pillar .verdict { font-size: .72rem; }
  .tile .val { font-size: 2rem; }
  .grid-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* badges line up across a row even when a title wraps: fixed title row, fixed bar row */
.colgrid .colgroup { display: grid; grid-template-rows: 2.5em 1fr auto; align-items: end; }
.colgrid .col-name { min-height: 0; height: 2.5em; line-height: 1.2; overflow: hidden; align-self: start; }
.colgrid .cols { align-self: end; }
.colgrid .col-badge { align-self: end; }
.col-badge { border: 1px solid transparent; }
.col-badge.won { border-color: transparent; }

/* =====================================================================
   PHILOSOPHY PAGE — graphics and animations
   ===================================================================== */
.philo-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; margin-top: 10px; }
.philo-hero h1 { background: linear-gradient(180deg, #fff, var(--silver)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.philo-hero h1 strong { color: var(--green-bright); -webkit-text-fill-color: var(--green-bright); }
.lede { font-size: 1.08rem; color: var(--text-2); max-width: 56ch; }
.lede strong { color: var(--text); }
.bigquote { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--green-bright); border-left: 4px solid var(--green); padding: 6px 0 6px 18px; margin: 18px 0 0; text-shadow: 0 0 30px rgba(46,232,138,.4); }
.bigquote span { display: block; font-family: var(--font); font-size: .8rem; font-weight: 500; color: var(--text-3); text-transform: none; letter-spacing: 0; margin-top: 6px; }
@media (max-width: 820px) { .philo-hero { grid-template-columns: 1fr; } }

/* court */
.court-card { padding: 14px; background: radial-gradient(400px 260px at 50% 20%, rgba(0,169,92,.18), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.court { width: 100%; height: auto; display: block; }
.ct-line { fill: none; stroke: rgba(201,209,217,.28); stroke-width: 1.5; }
.ct-arc { stroke: rgba(46,232,138,.6); stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawArc 2.2s ease-out forwards; }
@keyframes drawArc { to { stroke-dashoffset: 0; } }
.ct-rim { fill: none; stroke: #ff8a3d; stroke-width: 2.5; }
.ct-board { stroke: var(--silver); stroke-width: 3; }
.ct-shot { fill: none; stroke: url(#arcg); stroke-width: 2; stroke-dasharray: 4 6; opacity: .7; }
.ball { fill: #ff8a3d; filter: drop-shadow(0 0 8px rgba(255,138,61,.8)); }
.ct-label { font-family: var(--display); font-weight: 800; font-size: 22px; fill: var(--green-bright); }
.ct-caption { font-family: var(--font); font-size: 11px; fill: var(--text-3); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }

/* six stat cards */
.philo-stat { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 80ms); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.philo-stat:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: var(--glow); }
.philo-stat .card-title { margin-bottom: 6px; }
.philo-stat p { margin: 0; }
.philo-icon { width: 56px; height: 56px; margin-bottom: 12px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(46,232,138,.18), rgba(0,122,51,.1)); border: 1px solid rgba(46,232,138,.25); }
.philo-icon svg { width: 36px; height: 36px; overflow: visible; }
.ic-ring { fill: none; stroke: var(--green-bright); stroke-width: 2.5; }
.ic-line { fill: none; stroke: var(--green-bright); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ic-line.ic-bad { stroke: #ff7b78; }
.ic-arc { fill: none; stroke: var(--green-bright); stroke-width: 2.5; stroke-dasharray: 90; stroke-dashoffset: 90; animation: drawArc 1.6s ease-out forwards; animation-delay: .4s; }
.ic-dot { fill: var(--green-bright); }
.ic-text { font-family: var(--display); font-weight: 800; font-size: 20px; fill: var(--green-bright); text-anchor: middle; }
.ic-anim-slide { animation: slideIn 1.6s ease-in-out infinite; }
@keyframes slideIn { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.ic-anim-flash { animation: flash 1.2s ease-in-out infinite; }
@keyframes flash { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.philo-stat:hover .philo-icon { box-shadow: var(--glow); }

/* possession loop */
.loop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.loop-step { flex: 1 1 140px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 12px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--line); animation: loopPulse 4s ease-in-out infinite; animation-delay: calc(var(--i) * 1s); }
.loop-step strong { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; }
.loop-step small { color: var(--text-3); font-size: .78rem; }
.loop-ball { font-size: 1.8rem; line-height: 1; color: var(--green-bright); }
.loop-arrow { color: var(--text-3); font-size: 1.6rem; flex: 0 0 auto; }
@keyframes loopPulse { 0%, 20%, 100% { border-color: var(--line); box-shadow: none; } 10% { border-color: var(--green); box-shadow: var(--glow); } }
.math-tile { padding: 16px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--line); text-align: center; }
.math-big { font-family: var(--display); font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.math-big.pos { color: var(--green-bright); text-shadow: 0 0 24px rgba(46,232,138,.5); }
.math-big.neg { color: #ff7b78; }

.philo-big { display: flex; flex-direction: column; justify-content: center; background: radial-gradient(400px 220px at 0% 100%, rgba(0,169,92,.25), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.philo-big .dash { color: var(--text-3); }
@media (max-width: 700px) { .loop-arrow { display: none; } .loop-step { flex-basis: calc(50% - 5px); } .philo-big .hero-record { font-size: 3.6rem !important; } }
@media (prefers-reduced-motion: reduce) { .ct-arc, .ic-arc { animation: none; stroke-dashoffset: 0; } .ic-anim-slide, .ic-anim-flash, .loop-step, .philo-stat { animation: none; } }

/* =====================================================================
   FLAG — one sideways "Possession Ball" banner blowing in the wind
   ===================================================================== */
.rafters { display: none; }
.flagbar { position: relative; z-index: 1; height: 150px; overflow: hidden; display: flex; align-items: flex-start; padding: 14px 0 0 26px; pointer-events: none; }
.pole { position: relative; width: 8px; height: 150px; border-radius: 4px; background: linear-gradient(90deg, #6b7680, #d7dde3 45%, #8d98a2); box-shadow: 0 0 12px rgba(0,0,0,.6); flex: 0 0 auto; }
.finial { position: absolute; top: -10px; left: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 35%, #fff2b8, #e9c25a 55%, #9a6b12); box-shadow: 0 0 14px rgba(233,194,90,.7); }
.flag {
  position: relative; margin-left: -2px; width: min(560px, 78vw); height: 104px; transform-origin: 0 50%;
  background: linear-gradient(180deg, #0f9a46 0%, #007a33 50%, #045f29 100%);
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%);
  filter: url(#cloth) drop-shadow(0 14px 16px rgba(0,0,0,.6));
  animation: flagWave 3.2s ease-in-out infinite;
  display: flex; flex-direction: column; justify-content: center; padding: 0 56px 0 26px;
  box-shadow: inset 0 0 0 3px rgba(233,194,90,.85), inset 0 0 0 6px rgba(0,0,0,.25);
}
.flag::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35) 0%, transparent 12%, rgba(255,255,255,.10) 30%, transparent 45%, rgba(0,0,0,.18) 60%, rgba(255,255,255,.08) 78%, rgba(0,0,0,.3) 100%); background-size: 200% 100%; animation: flagSheen 3.2s linear infinite; mix-blend-mode: overlay; }
.flag-text { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 5vw, 2.9rem); line-height: 1; text-transform: uppercase; letter-spacing: .06em; color: #f3dd8e; text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 24px rgba(233,194,90,.35); white-space: nowrap; }
.flag-sub { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(243,221,142,.8); margin-top: 6px; white-space: nowrap; font-weight: 700; }
.flag-shadow { position: absolute; left: 60px; top: 118px; width: min(520px, 70vw); height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter: blur(6px); animation: flagShadow 3.2s ease-in-out infinite; }
@keyframes flagWave {
  0%   { transform: skewY(-1.2deg) scaleX(1); }
  50%  { transform: skewY(1.4deg) scaleX(.985); }
  100% { transform: skewY(-1.2deg) scaleX(1); }
}
@keyframes flagSheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes flagShadow { 0%, 100% { transform: scaleX(1); opacity: .7; } 50% { transform: scaleX(.94); opacity: .5; } }
@media (max-width: 700px) {
  .flagbar { height: 112px; padding: 10px 0 0 14px; }
  .pole { height: 112px; width: 6px; }
  .flag { height: 78px; padding: 0 40px 0 16px; width: min(560px, 84vw); }
  .flag-sub { font-size: .56rem; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) { .flag, .flag::before, .flag-shadow { animation: none; } .flag { filter: drop-shadow(0 14px 16px rgba(0,0,0,.6)); } }
.flagbar { padding-top: 22px; height: 160px; }
.flag-text { letter-spacing: .08em; }
@media (max-width: 700px) { .flagbar { padding-top: 18px; height: 120px; } }
.flag { justify-content: center; }
.flag-text { font-size: clamp(2rem, 5.5vw, 3.3rem); }

/* =====================================================================
   SPOTLIGHT — points per 100 possessions
   ===================================================================== */
.spotlight {
  position: relative; margin: 44px -16px 0; padding: 36px 28px 30px; border-radius: 24px; overflow: hidden;
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(46,232,138,.22), transparent 60%),
    radial-gradient(600px 300px at 85% 100%, rgba(59,130,246,.22), transparent 60%),
    linear-gradient(180deg, #0f1613, #0a0d0b);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 40px 80px -40px rgba(0,0,0,.9);
}
.spotlight::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--green-bright), var(--silver) 50%, var(--blue-bright)); }
.spot-head { text-align: center; max-width: 64ch; margin: 0 auto 22px; }
.spot-head h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); background: linear-gradient(180deg, #fff, var(--silver)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spot-head p { margin: 0; }
.spot-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.spot-side { text-align: center; }
.spot-label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--text-3); margin-bottom: 6px; }
.spot-num { font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem, 9vw, 6.5rem); line-height: .95; letter-spacing: -.01em; }
.spot-side.bos .spot-num { color: var(--green-bright); text-shadow: 0 0 40px rgba(46,232,138,.55); }
.spot-side.opp .spot-num { color: var(--blue-bright); text-shadow: 0 0 40px rgba(106,168,255,.45); }
.spot-mid { text-align: center; padding: 10px 18px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); }
.spot-net { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; }
.spot-net.pos { color: var(--green-bright); } .spot-net.neg { color: #ff7b78; }
.spot-netlabel { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); font-weight: 800; margin-top: 4px; }
.spot-bar { display: flex; height: 22px; border-radius: 11px; overflow: hidden; margin-top: 24px; background: var(--surface-3); }
.spot-fill { display: flex; align-items: center; font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: #04130b; padding: 0 12px; transition: width .9s cubic-bezier(.16,1,.3,1); }
.spot-fill.bos { background: linear-gradient(90deg, var(--green-deep), var(--green-bright)); justify-content: flex-start; }
.spot-fill.opp { background: linear-gradient(90deg, var(--blue-bright), var(--blue-deep)); justify-content: flex-end; color: #061024; }
@media (max-width: 700px) {
  .spotlight { margin: 30px -10px 0; padding: 26px 16px 22px; border-radius: 18px; }
  .spot-body { grid-template-columns: 1fr 1fr; }
  .spot-mid { grid-column: 1 / -1; order: 3; }
}

/* Additional team, same Possession Ball shell. */
.site-header { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; }
.team-select { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; width:100%; font-size:.75rem; color:var(--text-2); margin-left:0; min-width:0; }
.team-select select { width:100%; min-width:0; font:600 .85rem var(--font); color:var(--text); background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:8px 28px 8px 10px; min-height:40px; }
.site-header .site-nav { grid-column:1 / -1; justify-content:center; }
.team-select select:focus-visible { outline:2px solid var(--green-bright); outline-offset:3px; }
body[data-team="nyk"] { --green:#f58426; --green-bright:#ffa95e; --green-deep:#b74e0c; --bos-soft:rgba(245,132,38,.14); --good:#ffa95e; --glow:0 0 0 1px rgba(245,132,38,.18),0 0 35px -10px rgba(245,132,38,.35); }
body[data-team="nyk"] .colgrid .col.bos { background:linear-gradient(180deg,#ffb875,#f58426 45%,#b74e0c); box-shadow:0 0 28px -8px rgba(245,132,38,.4); }
body[data-team="nyk"] .colgrid .colgroup.won, body[data-team="nyk"] .band .colgroup.won, body[data-team="nyk"] .ratetile.won { border-color:rgba(245,132,38,.4); box-shadow:none; }
body[data-team="nyk"] .hero-card { background:radial-gradient(400px 200px at 110% -20%,rgba(59,130,246,.18),transparent 60%),linear-gradient(180deg,var(--surface-2),var(--surface)); }
@media(max-width:600px) { .site-header { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .team-select { flex:initial; } .site-nav { width:100%; } .site-nav a { flex:1; text-align:center; } }
body[data-team="nyk"] .band-1 { --accent:#ffa95e; --accent-deep:#b74e0c; --accent-rgb:245,132,38; }
body[data-team="nyk"] .rate-current::before { content:"This season · "; }
body[data-team="ind"] { --green:#d7a928; --green-bright:#f1cf62; --green-deep:#8d6910; --bos-soft:rgba(215,169,40,.14); --good:#f1cf62; --glow:0 0 0 1px rgba(215,169,40,.18),0 0 35px -10px rgba(215,169,40,.35); }
body[data-team="ind"] .colgrid .col.bos { background:linear-gradient(180deg,#f6d978,#d7a928 45%,#8d6910); box-shadow:0 0 28px -8px rgba(215,169,40,.4); }
body[data-team="ind"] .colgrid .colgroup.won, body[data-team="ind"] .band .colgroup.won, body[data-team="ind"] .ratetile.won { border-color:rgba(215,169,40,.4); box-shadow:none; }
body[data-team="ind"] .band-1 { --accent:#f1cf62; --accent-deep:#8d6910; --accent-rgb:215,169,40; }
body[data-team="tor"] { --green:#c94c55; --green-bright:#f0787e; --green-deep:#8e2530; --bos-soft:rgba(201,76,85,.14); --good:#f0787e; --glow:0 0 0 1px rgba(201,76,85,.18),0 0 35px -10px rgba(201,76,85,.35); }
body[data-team="tor"] .colgrid .col.bos { background:linear-gradient(180deg,#ff9a9f,#c94c55 45%,#8e2530); box-shadow:0 0 28px -8px rgba(201,76,85,.4); }
body[data-team="tor"] .colgrid .colgroup.won, body[data-team="tor"] .band .colgroup.won, body[data-team="tor"] .ratetile.won { border-color:rgba(201,76,85,.4); box-shadow:none; }
body[data-team="tor"] .band-1 { --accent:#f0787e; --accent-deep:#8e2530; --accent-rgb:201,76,85; }
body[data-team="bkn"] { --green:#8fa8c4; --green-bright:#c3d6eb; --green-deep:#4e6682; }
body[data-team="phi"] { --green:#63a9d8; --green-bright:#a8d8f5; --green-deep:#2e668f; }
body[data-team="chi"] { --green:#d4515c; --green-bright:#ff8990; --green-deep:#8f2732; }
body[data-team="cle"] { --green:#b8563d; --green-bright:#e98b6f; --green-deep:#793121; }
body[data-team="det"] { --green:#5d91c9; --green-bright:#99c4f2; --green-deep:#315a88; }
body[data-team="mil"] { --green:#5aa982; --green-bright:#9bd8b7; --green-deep:#28704e; }
body[data-team="atl"] { --green:#d55b63; --green-bright:#ff9298; --green-deep:#8c2c35; }
body[data-team="cha"] { --green:#4faec4; --green-bright:#92e0ef; --green-deep:#26768b; }
body[data-team="mia"] { --green:#e47786; --green-bright:#ffb0b9; --green-deep:#9b3b4d; }
body[data-team="orl"] { --green:#5c9fd0; --green-bright:#a5d7f5; --green-deep:#28608d; }
body[data-team="was"] { --green:#d46b72; --green-bright:#ffa4a8; --green-deep:#8d3037; }
body[data-team="den"] { --green:#4c83bd; --green-bright:#91c2ee; --green-deep:#244c78; }
body[data-team="min"] { --green:#5c8fb5; --green-bright:#a1c8e5; --green-deep:#31516c; }
body[data-team="okc"] { --green:#2ea8ad; --green-bright:#79e0df; --green-deep:#126a78; }
body[data-team="por"] { --green:#c54b55; --green-bright:#f1848b; --green-deep:#812b37; }
body[data-team="uta"] { --green:#7c91a5; --green-bright:#b8cad9; --green-deep:#43566a; }
body[data-team="gsw"] { --green:#e0ae37; --green-bright:#f5d36f; --green-deep:#906b12; }
body[data-team="lac"] { --green:#d65c63; --green-bright:#ff9b9e; --green-deep:#8c2735; }
body[data-team="lal"] { --green:#a27bd0; --green-bright:#d3b7f1; --green-deep:#60418c; }
body[data-team="phx"] { --green:#df754b; --green-bright:#ffad86; --green-deep:#99401f; }
body[data-team="sac"] { --green:#8964bd; --green-bright:#c0a0ed; --green-deep:#56377f; }
body[data-team="dal"] { --green:#4a91d0; --green-bright:#8bc5f6; --green-deep:#255d92; }
body[data-team="hou"] { --green:#d45259; --green-bright:#ff9295; --green-deep:#8c2730; }
body[data-team="mem"] { --green:#4b9bc0; --green-bright:#8cd4ed; --green-deep:#276080; }
body[data-team="nop"] { --green:#4e9ca0; --green-bright:#8edbd7; --green-deep:#28676b; }
body[data-team="sas"] { --green:#9da5ad; --green-bright:#d2d8dd; --green-deep:#5a636b; }
body[data-team] .colgrid .col.bos { background:linear-gradient(180deg,var(--green-bright),var(--green) 45%,var(--green-deep)); box-shadow:0 0 28px -8px var(--green); }

/* The league landing page and Philosophy are shared spaces, so keep their atmosphere neutral. */
body.neutral-shell {
  --bg:#080d13; --bg-2:#0d131a; --surface:#111920; --surface-2:#17212a; --surface-3:#1d2933;
  --line:#28343f; --line-2:#394956;
  --green:#8298aa; --green-bright:#c8d5df; --green-deep:#4f6579;
  --bos-soft:rgba(145,174,201,.14);
  --good:#a9c7e4; --glow:0 0 0 1px rgba(169,199,228,.2),0 0 35px -10px rgba(118,169,216,.35);
}
body.neutral-shell::before { background:radial-gradient(900px 500px at 8% -10%, rgba(170,190,210,.12), transparent 60%), radial-gradient(800px 500px at 100% 110%, rgba(59,130,246,.13), transparent 60%), var(--bg); }
body.neutral-shell .fog-1 { background:radial-gradient(closest-side, rgba(145,166,184,.22), transparent 70%); }
body.neutral-shell .spot { background:conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(255,255,255,0) 170deg, rgba(190,211,230,.12) 176deg, rgba(190,211,230,.22) 180deg, rgba(190,211,230,.12) 184deg, transparent 190deg, transparent 360deg); }
body.neutral-shell .floor { background:repeating-linear-gradient(90deg, rgba(210,225,240,.05) 0 2px, transparent 2px 90px), repeating-linear-gradient(0deg, rgba(210,225,240,.05) 0 2px, transparent 2px 90px), linear-gradient(180deg, transparent, rgba(145,174,201,.08) 60%, rgba(75,108,139,.14)); }
body.neutral-shell .ct-arc { stroke:rgba(145,190,226,.72); }
body.neutral-shell .ct-shot { stroke:url(#arcg); }

/* Keep Philosophy and the homepage masthead neutral while team dashboards keep their own look. */
.philo-hero h1 strong, .possession-masthead h1 strong {
  color: var(--silver); -webkit-text-fill-color: var(--silver);
}
.possession-masthead h1 strong, .philo-hero h1 strong {
  color: #e4c56a; -webkit-text-fill-color: #e4c56a;
}
.site-nav a.active[data-route="home"], .site-nav a.active[data-route="philosophy"] {
  background: linear-gradient(145deg, #f1d681, #b9963e);
  color: #1a1608;
  box-shadow: 0 0 0 1px rgba(228,197,106,.28), 0 0 26px -10px rgba(228,197,106,.7);
}
.philosophy-view .band-1 { --accent:#b9c8d6; --accent-deep:#536b82; --accent-rgb:185,200,214; }
.philosophy-view .band-2 { --accent:#76a9d8; --accent-deep:#315f91; --accent-rgb:118,169,216; }
.philosophy-view .philo-stat:hover { border-color:#7897b4; box-shadow:0 0 26px -10px rgba(118,169,216,.55); }
.philosophy-view .philo-icon { background:linear-gradient(145deg, rgba(118,169,216,.2), rgba(49,95,145,.12)); border-color:rgba(118,169,216,.34); }
.philosophy-view .ic-ring, .philosophy-view .ic-line, .philosophy-view .ic-arc { stroke:#a9c7e4; }
.philosophy-view .ic-dot, .philosophy-view .ic-text, .philosophy-view .loop-ball { fill:#a9c7e4; color:#a9c7e4; }
.philosophy-view .ct-arc { stroke:rgba(118,169,216,.72); }
.philosophy-view .court-card { background:radial-gradient(400px 260px at 50% 20%, rgba(118,169,216,.16), transparent 70%), linear-gradient(180deg, #17212a, #0d141a); border-color:rgba(155,181,205,.3); }
.philosophy-view .ct-line { stroke:rgba(185,200,214,.34); }
.philosophy-view .ct-label { fill:#e4c56a; }
.philosophy-view .philo-big { background:radial-gradient(400px 220px at 0% 100%, rgba(118,169,216,.18), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.philosophy-view .math-big.pos { color:#e4c56a; }
.philosophy-view .math-tile { border-color:rgba(228,197,106,.28); }
.philosophy-view .math-tile:hover { border-color:rgba(228,197,106,.62); box-shadow:0 0 24px -12px rgba(228,197,106,.65); }
.hero-card {
  background:
    radial-gradient(520px 260px at 105% -25%, rgba(110,155,205,.28), transparent 62%),
    radial-gradient(460px 260px at -8% 115%, rgba(190,201,210,.18), transparent 64%),
    linear-gradient(135deg, #1a2228 0%, #11181d 48%, #0b1015 100%);
  border-color: rgba(155,181,205,.28);
}
.season-summary .hero-card, body[data-team] .season-summary .hero-card {
  background:
    radial-gradient(520px 260px at 105% -25%, rgba(110,155,205,.32), transparent 62%),
    radial-gradient(460px 260px at -8% 115%, rgba(190,201,210,.2), transparent 64%),
    linear-gradient(135deg, #1a2228 0%, #11181d 48%, #0b1015 100%) !important;
  border-color: rgba(155,181,205,.34);
}
.season-summary .hero-kpis .pos { color:#a9c7e4 !important; text-shadow:0 0 20px rgba(118,169,216,.3); }

/* League landing page: a readable ranking before the team-level detail. */
.ranking-page { max-width: 980px; margin: 0 auto; }
.ranking-intro { max-width: 700px; padding: 22px 0 24px; }
.ranking-intro h1 { margin: 8px 0 14px; font-size: clamp(2.7rem, 7vw, 5.2rem); line-height: .92; letter-spacing: -.04em; }
.ranking-intro h1 strong { color: var(--green-bright); }
.ranking-intro .lede { max-width: 62ch; margin-bottom: 12px; }
.ranking-head { display:grid; grid-template-columns: 64px minmax(0,1fr) 150px 190px; gap: 16px; padding: 0 20px 8px; color: var(--text-3); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ranking-list { display:grid; gap: 8px; }
.ranking-row { display:grid; grid-template-columns: 64px minmax(0,1fr) 150px 190px; gap: 16px; align-items:center; min-height: 90px; padding: 16px 20px; color: var(--text); text-decoration:none; background: linear-gradient(105deg, color-mix(in srgb, var(--team-accent, var(--green-bright)) 9%, rgba(12,18,16,.95)), rgba(12,18,16,.95)); border:1px solid var(--line-2); border-left:3px solid var(--team-accent, var(--green-bright)); border-radius: 14px; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.ranking-row:hover, .ranking-row:focus-visible { transform: translateY(-2px); border-color: var(--team-accent, var(--green-bright)); background: linear-gradient(105deg, color-mix(in srgb, var(--team-accent, var(--green-bright)) 16%, rgba(13,23,19,.98)), rgba(13,23,19,.98)); outline:none; }
.ranking-row.top-rank { border-color: color-mix(in srgb, var(--team-accent, var(--green-bright)) 42%, var(--line-2)); }
.ranking-rank { color: var(--team-accent, var(--green-bright)); font: 800 1.55rem/1 var(--display); letter-spacing: .04em; }
.ranking-team, .ranking-score, .ranking-record { display:flex; flex-direction:column; min-width:0; }
.ranking-team strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 1.08rem; }
.ranking-team small, .ranking-score small, .ranking-record small { margin-top: 4px; color: var(--text-3); font-size: .68rem; letter-spacing: .05em; }
.ranking-score strong { color: var(--team-accent, var(--green-bright)); font: 800 1.95rem/1 var(--display); }
.ranking-record { text-align:right; }
.ranking-record strong { font: 800 1.05rem/1 var(--display); }
@media (max-width: 700px) {
  .ranking-intro { padding: 10px 0 20px; }
  .ranking-intro h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
  .ranking-head { display:none; }
  .ranking-row { grid-template-columns: 50px minmax(0,1fr) auto; gap: 13px; min-height: 96px; padding: 16px 16px; }
  .ranking-score { text-align:right; }
  .ranking-record { display:none; }
  .ranking-rank { font-size: 1.6rem; }
  .ranking-team strong { font-size: 1.08rem; line-height: 1.1; }
  .ranking-team small, .ranking-score small { font-size: .72rem; line-height: 1.25; }
  .ranking-score strong { font-size: 2.2rem; line-height: 1; }
}

/* The possession mantra replaces the championship banners. */
.possession-masthead { position:relative; z-index:1; padding:28px 20px 30px; text-align:center; }
.possession-masthead {
  background:
    radial-gradient(620px 180px at 50% 0%, rgba(118,169,216,.28), transparent 70%),
    linear-gradient(180deg, rgba(184,198,210,.13), rgba(21,29,36,.08) 72%, transparent);
  border-bottom:1px solid rgba(155,181,205,.22);
}
.possession-masthead .wordmark { font-family:var(--display); font-size:1.15rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--silver); margin-bottom:16px; }
.possession-masthead h1 { font-size:clamp(2.7rem,5vw,4rem); line-height:1; margin:0; color:var(--silver); }
.possession-masthead h1 strong { color:var(--green-bright); font-weight:inherit; }
.season-summary { display:grid; gap:12px; }
.season-summary > div:first-child:empty { display:none; }
.season-summary .notice { margin:0; }
.season-summary .hero-card { display:grid; grid-template-columns:auto 1fr; column-gap:35px; align-items:center; }
.season-summary .hero-record { font-size:clamp(3rem,6vw,5rem); }
.season-summary .hero-kpis { margin:0; padding:0; border:0; justify-content:flex-end; }
.season-summary .hero-card > p { grid-column:1 / -1; }
@media(max-width:600px) {
  .possession-masthead { padding:22px 16px 24px; }
  .possession-masthead .wordmark { font-size:1rem; margin-bottom:12px; }
  .possession-masthead h1 { font-size:clamp(2.3rem,9vw,3rem); }
  .season-summary .hero-card { grid-template-columns:1fr; }
  .season-summary .hero-kpis { justify-content:flex-start; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2); }
}

/* =====================================================================
   TEAM DASHBOARDS — neutral chrome. Team color lives on the bars only;
   green stays on won stat boxes, red on opponent advantages.
   ===================================================================== */
body[data-team]:not(.neutral-shell) {
  --n: #b9c8d6; --n-deep: #536b82; --n-rgb: 185,200,214; --n-text: #a9c7e4;
  --good: var(--n-text);
  --bos-soft: rgba(145,174,201,.12);
  --glow: 0 0 0 1px rgba(169,199,228,.2), 0 0 35px -10px rgba(118,169,216,.35);
}
body[data-team]:not(.neutral-shell)::before {
  background: radial-gradient(900px 500px at 8% -10%, rgba(170,190,210,.12), transparent 60%), radial-gradient(800px 500px at 100% 110%, rgba(59,130,246,.10), transparent 60%), var(--bg);
}
body[data-team]:not(.neutral-shell) .fog-1 { background: radial-gradient(closest-side, rgba(145,166,184,.22), transparent 70%); }
body[data-team]:not(.neutral-shell) .fog-2 { background: radial-gradient(closest-side, rgba(120,150,185,.2), transparent 70%); }
body[data-team]:not(.neutral-shell) .spot { background: conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(255,255,255,0) 170deg, rgba(190,211,230,.12) 176deg, rgba(190,211,230,.22) 180deg, rgba(190,211,230,.12) 184deg, transparent 190deg, transparent 360deg); }
body[data-team]:not(.neutral-shell) .floor { background: repeating-linear-gradient(90deg, rgba(210,225,240,.05) 0 2px, transparent 2px 90px), repeating-linear-gradient(0deg, rgba(210,225,240,.05) 0 2px, transparent 2px 90px), linear-gradient(180deg, transparent, rgba(145,174,201,.08) 60%, rgba(75,108,139,.14)); }
body[data-team]:not(.neutral-shell) .site-header::after { background: linear-gradient(90deg, transparent, var(--silver-2) 30%, var(--silver) 50%, var(--silver-2) 70%, transparent); }
body[data-team]:not(.neutral-shell) .brand-mark,
body[data-team]:not(.neutral-shell) .site-nav a.active { background: linear-gradient(145deg, #d7dde3, #8b97a3); color: #0b1015; box-shadow: var(--glow); }
body[data-team]:not(.neutral-shell) .hero h1 em, body[data-team]:not(.neutral-shell) .hero h1 strong { color: var(--silver); -webkit-text-fill-color: var(--silver); }
body[data-team]:not(.neutral-shell) .hero .eyebrow { color: var(--n-text); }

/* section bands and their jump chips share one quiet accent */
body[data-team]:not(.neutral-shell) .band-1, body[data-team]:not(.neutral-shell) .band-2,
body[data-team]:not(.neutral-shell) .band-3, body[data-team]:not(.neutral-shell) .band-4 { --accent: var(--n); --accent-deep: var(--n-deep); --accent-rgb: var(--n-rgb); }
body[data-team]:not(.neutral-shell) .band .band-head h2 { text-shadow: none; }
body[data-team]:not(.neutral-shell) .jump a.j1, body[data-team]:not(.neutral-shell) .jump a.j2,
body[data-team]:not(.neutral-shell) .jump a.j3, body[data-team]:not(.neutral-shell) .jump a.j4 { --dot: var(--n); }
body[data-team]:not(.neutral-shell) .jump a:hover { border-color: var(--n); color: var(--n); box-shadow: var(--glow); }
body[data-team]:not(.neutral-shell) .chip:hover, body[data-team]:not(.neutral-shell) .band-4 .chip:hover { border-color: var(--n-deep); box-shadow: var(--glow); }
body[data-team]:not(.neutral-shell) .back:hover { color: var(--n-text); }

/* positive numbers read as cool silver rather than glowing green */
body[data-team]:not(.neutral-shell) .pos, body[data-team]:not(.neutral-shell) .tile .val.pos,
body[data-team]:not(.neutral-shell) .spot-net.pos, body[data-team]:not(.neutral-shell) .col-diff.pos,
body[data-team]:not(.neutral-shell) .pair-diff.pos,
body[data-team]:not(.neutral-shell) .chip .res.W, body[data-team]:not(.neutral-shell) td.win,
body[data-team]:not(.neutral-shell) .score-marks .on { color: var(--n-text); text-shadow: none; filter: none; }
body[data-team]:not(.neutral-shell) .spot-side.bos .spot-num,
body[data-team]:not(.neutral-shell) .spot-side.opp .spot-num { color: var(--silver); text-shadow: 0 0 30px rgba(190,211,230,.25); }
body[data-team]:not(.neutral-shell) .spotlight {
  background: radial-gradient(600px 300px at 15% 0%, rgba(145,174,201,.16), transparent 60%), radial-gradient(600px 300px at 85% 100%, rgba(59,130,246,.12), transparent 60%), linear-gradient(180deg, #11181d, #0b1015);
}
body[data-team]:not(.neutral-shell) .spotlight::before { background: linear-gradient(90deg, var(--silver-2), var(--silver) 50%, var(--silver-2)); }
body[data-team]:not(.neutral-shell) .callout { border-left-color: var(--n); background: var(--bos-soft); }
body[data-team]:not(.neutral-shell) .pill.good { background: linear-gradient(145deg, #d7dde3, #8b97a3); color: #0b1015; }
body[data-team]:not(.neutral-shell) .band::before { opacity: .6; }

/* bars keep the team color, minus the hard-coded green halo */
body[data-team]:not(.neutral-shell) .rate-row .fill.bos,
body[data-team]:not(.neutral-shell) .bullet .bullet-fill,
body[data-team]:not(.neutral-shell) .bar.bos .fill { box-shadow: 0 0 14px color-mix(in srgb, var(--green) 35%, transparent); }
body[data-team]:not(.neutral-shell) .sm svg path.line.pos { filter: none; }
body[data-team]:not(.neutral-shell) .legend .l-bos::before { box-shadow: 0 0 10px color-mix(in srgb, var(--green) 50%, transparent); }

/* =====================================================================
   MATTE PASS — flat bars, no glow or smoke, and no always-on effects
   that keep the GPU busy. Ordered last so it wins over everything above.
   ===================================================================== */
/* big bars (game page) and the column grid (season totals) */
.col, .colgrid .col {
  border-radius: 6px 6px 2px 2px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.25);
}
.col.bos, .colgrid .col.bos, body[data-team] .colgrid .col.bos { background: var(--green); box-shadow: inset 0 2px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.25); }
.col.opp, .colgrid .col.opp { background: var(--blue); box-shadow: inset 0 2px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.25); }
.col .smoke, .col .shine, .col .pulse, .col::after, .cols::after { display: none; animation: none; }
.col-val, .colgrid .col-val { text-shadow: none; }
.col-diff.pos, .col-diff.neg { text-shadow: none; }

/* horizontal bars: rate tiles, bullets, the spotlight split, pillar bars */
.rate-row .fill, .bullet .bullet-fill, .bullet .bullet-opp, .spot-fill, .bar .fill,
body[data-team]:not(.neutral-shell) .rate-row .fill.bos,
body[data-team]:not(.neutral-shell) .bullet .bullet-fill,
body[data-team]:not(.neutral-shell) .bar.bos .fill { box-shadow: none; }
.rate-row .fill.bos, .bullet .bullet-fill, .spot-fill.bos, .bar.bos .fill { background: var(--green); }
.rate-row .fill.opp, .spot-fill.opp, .bar.opp .fill { background: var(--blue); }
.bullet .bullet-opp { background: var(--blue-bright); }
.rate-row .track, .spot-bar, .bullet { box-shadow: inset 0 1px 0 rgba(0,0,0,.35); }
.legend .l-bos::before, .legend .l-opp::before, body[data-team]:not(.neutral-shell) .legend .l-bos::before { box-shadow: none; }
.sm svg path.line.pos, .sm svg path.line.neg, .score-marks .on, .ball { filter: none; }

/* flat badges and chips */
.col-badge.won, .edge.won, .pill.good, .band .edge.won { background: var(--green-deep); color: #eef2ef; box-shadow: none; }
.col-badge.lost, .edge.lost { background: rgba(var(--bad-rgb), .18); box-shadow: none; }
.colgrid .colgroup.won, .band .colgroup.won, .colgroup.won { border-color: rgba(46,232,138,.45); box-shadow: none; }
.colgrid .colgroup.lost, .colgroup.lost { border-color: rgba(var(--bad-rgb), .5); box-shadow: none; }
.ratetile.won { border-color: rgba(46,232,138,.45); }
.notice { box-shadow: none; }
.notice-tag { animation: none; box-shadow: none; }

/* ambient layers: the blurred, animated fog and spotlights cost the most to paint */
.fog, .spot { display: none; }
.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7,9,8,.94); }
.chip:hover, .jump a:hover, .philo-stat:hover, .ranking-row:hover { box-shadow: none; }

/* Team pages share the neutral blue-grey surfaces used by Home and Philosophy;
   the root palette's dark greens tinted every card and border. */
body[data-team]:not(.neutral-shell) {
  --bg:#080d13; --bg-2:#0d131a; --surface:#111920; --surface-2:#17212a; --surface-3:#1d2933;
  --line:#28343f; --line-2:#394956;
}
body[data-team]:not(.neutral-shell) .site-header { background: rgba(8,13,19,.94); }
body[data-team]:not(.neutral-shell) .band { background: none; }
body[data-team]:not(.neutral-shell) .floor { background: repeating-linear-gradient(90deg, rgba(210,225,240,.04) 0 2px, transparent 2px 90px), repeating-linear-gradient(0deg, rgba(210,225,240,.04) 0 2px, transparent 2px 90px); }

/* Philosophy: rating explainer */
.rating-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--text-2); }
.rating-steps li::marker { color: var(--text-3); font-weight: 700; }
.rating-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rating-table th { text-align: left; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: 0 8px 8px 0; border-bottom: 1px solid var(--line); }
.rating-table td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rating-table td small { display: block; color: var(--text-3); font-size: .72rem; }
.rating-table td.mono { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.rating-table tr:last-child td { border-bottom: 0; }

/* Column grid: all tiles on one row at desktop width, three per row on tablets, two on phones. */
.colgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 980px) { .colgrid { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); } }
@media (max-width: 600px) { .colgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A won edge is always green, whatever the team's color. */
.col-badge.won, .edge.won, .band .edge.won, .pill.good { background: #0f7a3a; color: #eef2ef; }

/* Three-up grids hold six items as two even rows on desktop instead of four plus two. */
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 899px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ignores .math-tile { text-align: left; }
.ignores .math-tile strong { display: block; font-family: var(--display); font-size: 1.05rem; letter-spacing: .02em; margin-bottom: 6px; }
.ignores .math-tile .muted { font-size: .88rem; line-height: 1.45; }

/* Season tiles: the winner is obvious. Losing bar fades, the margin shouts. */
.colgrid .cols { position: relative; }
.col-lead { text-align: center; font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.01em; margin-top: 4px; min-height: 1em; }
.colgrid .colgroup { grid-template-rows: 2.5em auto 1fr auto; }
.colgrid .cols { margin-top: 6px; }
.col-lead.pos { color: #2ee88a; }
.col-lead.neg { color: #ff7b78; }
.col-lead.even { color: var(--text-3); }
.colgrid .col.lose { opacity: .32; }
.colgrid .colwrap:has(.col.lose) .col-val { color: var(--text-3); font-weight: 600; }
.colgrid .colwrap:has(.col.lose) .col-who { opacity: .6; }
@media (max-width: 600px) { .col-lead { font-size: 1.4rem; } }
body[data-team] .col-lead.pos { color: #2ee88a; }
body[data-team] .col-lead.neg { color: #ff7b78; }

/* =====================================================================
   LEAGUE HOME — six tiers of five, the whole league on one screen.
   ===================================================================== */
.ranking-page { max-width: 1180px; }
.ranking-head, .ranking-list { display: none; }
.ranking-key { display: flex; justify-content: space-between; padding: 14px 6px 10px; color: var(--text-3); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tier { padding: 10px; border-radius: 16px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2); }
.tier-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 8px 10px; }
.tier-range { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; color: var(--silver); }
.tier-name { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.tier-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 50px; padding: 7px 8px; border-radius: 10px; color: var(--text); text-decoration: none; border-left: 3px solid var(--team-accent); transition: background .15s ease; }
.tier-row + .tier-row { margin-top: 4px; }
.tier-row:hover, .tier-row:focus-visible { background: color-mix(in srgb, var(--team-accent) 12%, transparent); outline: none; }
.t-rank { color: var(--team-accent); font: 800 1.15rem/1 var(--display); letter-spacing: .02em; }
.t-team { display: flex; flex-direction: column; min-width: 0; }
.t-team strong { font-size: .95rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-team small { color: var(--text-3); font-size: .66rem; letter-spacing: .04em; margin-top: 2px; }
.t-bar { display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.t-bar i { display: block; height: 100%; background: var(--team-accent); border-radius: 2px; }
.t-rating { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.t-rating strong { font: 800 1.45rem/1 var(--display); color: var(--silver); }
.t-rating small { color: var(--text-3); font-size: .68rem; font-weight: 700; margin-top: 3px; }
@media (max-width: 1000px) { .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tier-grid { grid-template-columns: 1fr; gap: 10px; } .tier-row { min-height: 48px; } .t-team strong { font-size: 1rem; } }

/* Preseason notice: a quiet one-liner, not a banner. */
.notice { margin: 0 0 10px; padding: 6px 10px; gap: 10px; font-size: .78rem; color: var(--text-3); background: none; border: 0; border-left: 2px solid rgba(240,138,138,.5); border-radius: 0; }
.notice-tag { font-size: .62rem; padding: 2px 8px; letter-spacing: .12em; background: rgba(240,138,138,.16); color: #ff9e9e; }
.season-summary .notice { margin: 0; }

/* =====================================================================
   SEASON HERO — three numbers, read in one glance.
   ===================================================================== */
.season-summary .hero-card.season-hero, body[data-team] .season-summary .hero-card.season-hero {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; column-gap: 0; align-items: stretch; padding: 0; overflow: hidden;
}
.hero-stat { display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; min-width: 0; }
.hero-stat + .hero-stat { border-left: 1px solid var(--line-2); }
.hero-stat strong { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; letter-spacing: -.01em; color: var(--silver); }
.hero-stat strong.pos { color: #2ee88a; }
.hero-stat strong.neg { color: #ff7b78; }
.hero-stat span { margin-top: 8px; font-size: .95rem; font-weight: 700; color: var(--text); letter-spacing: 0; text-transform: none; }
.hero-stat small { margin-top: 3px; font-size: .78rem; color: var(--text-3); }
.hero-rating { background: linear-gradient(135deg, rgba(118,169,216,.14), transparent 70%); }
.hero-rating strong { font-size: clamp(3.2rem, 6.5vw, 5rem); color: #fff; }
@media (max-width: 640px) {
  .season-summary .hero-card.season-hero, body[data-team] .season-summary .hero-card.season-hero { grid-template-columns: 1fr 1fr; }
  .hero-rating { grid-column: 1 / -1; }
  .hero-stat { padding: 16px 18px; }
  .hero-stat + .hero-stat { border-left: 0; border-top: 1px solid var(--line-2); }
  .hero-stat:nth-child(3) { border-left: 1px solid var(--line-2); }
}
body[data-team] .hero-stat strong.pos, .season-summary .hero-stat strong.pos { color: #2ee88a !important; text-shadow: none; }
body[data-team] .hero-stat strong.neg, .season-summary .hero-stat strong.neg { color: #ff7b78 !important; text-shadow: none; }

/* =====================================================================
   RUNNING MARGIN CARDS — team-colored line and fill, white dots,
   readable axis, gradient border, headline margin in the title row.
   ===================================================================== */
.margin-card { padding: 0 0 12px; border: 1px solid transparent; border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) padding-box,
              linear-gradient(135deg, color-mix(in srgb, var(--green) 70%, transparent) 0%, var(--line-2) 35%, var(--line-2) 65%, color-mix(in srgb, var(--green) 45%, transparent) 100%) border-box; }
.margin-card .sm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 0; }
.margin-card h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.margin-card h3::before { content: ""; display: inline-block; width: 4px; height: .9em; margin-right: 10px; vertical-align: -1px; border-radius: 2px; background: var(--green); }
.margin-card .sm-now { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.04); }
.margin-card .sm-now.pos { color: #2ee88a; }
.margin-card .sm-now.neg { color: #ff7b78; }
.margin-card .sm-now.even { color: var(--text-2); }
.margin-card .sm-sub { padding: 2px 16px 6px 30px; font-size: .74rem; color: var(--text-2); }
.margin-card svg { height: 150px; padding: 0 10px; }
.margin-card svg text { font-size: 11px; font-weight: 700; fill: var(--text-2); font-family: var(--font); }
.margin-card svg text.xl { font-size: 10px; fill: var(--text-3); }
.margin-card svg .zero { stroke: var(--silver-2); stroke-width: 1.2; opacity: .7; }
.margin-card svg .grid { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; }
.margin-card svg .tick { stroke: var(--line-2); stroke-width: 1; }
.margin-card svg path.area { fill: var(--green); opacity: .22; }
.margin-card svg path.line { fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.margin-card svg path.line.thin { stroke-width: 2; }
.margin-card svg circle { fill: #fff; stroke: var(--green); stroke-width: 2; }
.margin-card svg circle.last { stroke-width: 2.5; }
.margin-card svg circle:hover { r: 5; }
@media (max-width: 640px) { .margin-card svg { height: 130px; } .margin-card h3 { font-size: .95rem; } }
body[data-team] .margin-card .sm-now.pos { color: #2ee88a; text-shadow: none; }
body[data-team] .margin-card .sm-now.neg { color: #ff7b78; text-shadow: none; }

/* League home legibility: regular face with tabular figures instead of condensed numerals,
   and secondary text large and bright enough to read without leaning in. */
.tier-row { grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 56px; padding: 9px 10px; }
.t-rank { font: 800 1.05rem/1 var(--font); font-variant-numeric: tabular-nums; }
.t-team strong { font-size: 1.02rem; font-weight: 700; }
.t-team small { font-size: .76rem; color: var(--text-2); letter-spacing: 0; margin-top: 3px; }
.t-rating strong { font: 800 1.5rem/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: #fff; }
.t-rating small { font-size: .8rem; color: var(--text-2); }
.tier-range { font: 800 1rem/1 var(--font); letter-spacing: .02em; }
.tier-name { font-size: .72rem; letter-spacing: .08em; color: var(--text-2); }
.ranking-key { font-size: .72rem; letter-spacing: .08em; color: var(--text-2); }

/* Crisp text: never let the browser fake a bold weight, and no glow shadows on team pages. */
body { font-synthesis: none; }
body[data-team]:not(.neutral-shell) .spot-side.bos .spot-num,
body[data-team]:not(.neutral-shell) .spot-side.opp .spot-num { text-shadow: none; }
.season-summary .hero-kpis .pos { text-shadow: none; }

/* =====================================================================
   MASTHEAD TICKER — one sticky line, the words roll right to left.
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.possession-masthead, body[data-team] .possession-masthead {
  position: sticky; top: 0; z-index: 12; height: 50px; padding: 0; margin: 0; text-align: left;
  background: #0a0f15; border-bottom: 1px solid var(--line-2); overflow: hidden;
}
.possession-masthead .ticker { height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.possession-masthead .ticker-track { display: inline-flex; align-items: center; height: 100%; gap: 2.4em; padding-left: 2.4em; white-space: nowrap; will-change: transform; animation: tickerRoll 26s linear infinite; }
.possession-masthead .ticker-track span { font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--silver); line-height: 1; }
.possession-masthead .ticker-track span.gold { color: #e4c56a; }
@keyframes tickerRoll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.possession-masthead:hover .ticker-track { animation-play-state: paused; }
.site-header { top: 50px; }
@media (prefers-reduced-motion: reduce) { .possession-masthead .ticker-track { animation: none; } }
@media (max-width: 600px) { .possession-masthead, body[data-team] .possession-masthead { height: 42px; } .possession-masthead .ticker-track span { font-size: 1.25rem; } .site-header { top: 42px; } }
.site-header, body[data-team]:not(.neutral-shell) .site-header { background: #0a0f15; }

/* =====================================================================
   MASTHEAD TICKER, POSTER CUT — slanted, squashed, light moving inside
   the letters, every third word knocked out to an outline.
   ===================================================================== */
.possession-masthead, body[data-team] .possession-masthead { height: 56px; background: #080c11; }
.possession-masthead::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-60deg, transparent 0 18px, rgba(255,255,255,.025) 18px 20px); }
.possession-masthead .ticker-track { gap: .9em; padding-left: .9em; animation-duration: 30s; }
.possession-masthead .ticker-track span {
  display: inline-block; font-size: 2.35rem; font-weight: 800; letter-spacing: -.045em; line-height: 1;
  transform: skewX(-16deg) scaleY(1.22) translateY(1px); transform-origin: 50% 100%;
  background: linear-gradient(105deg, #7f8b97 0%, #c9d1d9 28%, #ffffff 42%, #c9d1d9 56%, #7f8b97 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: letterLight 3.6s linear infinite;
}
.possession-masthead .ticker-track span.gold {
  background-image: linear-gradient(105deg, #8a6212 0%, #e4c56a 30%, #fff3c4 45%, #e4c56a 60%, #8a6212 100%);
  animation-delay: -1.2s;
}
.possession-masthead .ticker-track span:nth-child(3n+3) {
  background: none; -webkit-text-stroke: 1.5px #aab4bf; animation: none; transform: skewX(-16deg) scaleY(1.22) translateY(1px);
}
.possession-masthead .ticker-track span:nth-child(6n+3) { -webkit-text-stroke-color: #d9c27a; }
@keyframes letterLight { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (max-width: 600px) {
  .possession-masthead, body[data-team] .possession-masthead { height: 46px; }
  .possession-masthead .ticker-track span { font-size: 1.75rem; }
  .site-header { top: 46px; }
}
.site-header { top: 56px; }
@media (max-width: 600px) { .site-header { top: 46px; } }
@media (prefers-reduced-motion: reduce) { .possession-masthead .ticker-track span { animation: none; } }

/* Takeaway row under the hero: the read on the left, the latest game on the right. */
.takeaway { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 12px; }
.takeaway .card { padding: 18px 20px; }
.takeaway .eyebrow { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.takeaway-text p { margin: 0; font-size: 1.08rem; line-height: 1.5; color: var(--text); }
.takeaway-game { display: block; color: var(--text); text-decoration: none; border-color: var(--line-2); transition: border-color .15s ease, background .15s ease; }
.takeaway-game:hover { border-color: var(--silver-2); background: var(--surface-2); }
.tg-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tg-res { font: 800 1.5rem/1 var(--font); font-variant-numeric: tabular-nums; color: #fff; }
.tg-res.L { color: var(--text-2); }
.tg-opp { font-size: .9rem; color: var(--text-2); font-weight: 600; }
.tg-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: .78rem; color: var(--text-3); }
.tg-meta strong { font: 800 1rem/1 var(--font); font-variant-numeric: tabular-nums; color: var(--text); margin-right: 4px; }
.tg-meta strong.pos { color: #2ee88a; } .tg-meta strong.neg { color: #ff7b78; }
.tg-why { margin-top: 10px; font-size: .84rem; line-height: 1.45; color: var(--text-2); }
@media (max-width: 760px) { .takeaway { grid-template-columns: 1fr; } }

/* Readable secondary text everywhere: lift the dimmest grey. */
:root, body.neutral-shell, body[data-team] { --text-3: #8d99a6; --text-2: #b8c2cc; }
.hero-stat small { color: var(--text-2); font-size: .82rem; }
.hero-stat span { color: #fff; }

/* Compact hero on phones: less air, same hierarchy. */
@media (max-width: 640px) {
  .hero-stat { padding: 12px 14px 12px; }
  .hero-stat strong { font-size: 2.3rem; }
  .hero-rating strong { font-size: 2.9rem; }
  .hero-stat span { margin-top: 4px; font-size: .9rem; }
  .hero-stat small { margin-top: 2px; font-size: .78rem; }
}

/* Hero hierarchy: numbers are the headline, labels are captions. */
.hero-rating strong, body[data-team] .hero-rating strong { color: #e4c56a; }
.hero-stat span { color: var(--text-2); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-top: 10px; }
.hero-stat small { color: var(--text-3); }
@media (max-width: 640px) { .hero-stat span { font-size: .68rem; margin-top: 6px; } }

/* =====================================================================
   GAME LOG — plain rows, newest first, one glance per game.
   ===================================================================== */
.log { display: grid; gap: 0; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--surface); }
.log-row { display: grid; grid-template-columns: 90px 80px 110px 80px 100px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 16px; min-height: 46px; color: var(--text); text-decoration: none; border-top: 1px solid var(--line); }
.log-row:first-child { border-top: 0; }
.log-head { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); min-height: 36px; }
a.log-row:hover, a.log-row:focus-visible { background: var(--surface-2); outline: none; }
.log-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.log-date { font-weight: 600; color: var(--text-2); }
.log-date small { margin-left: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.log-opp { font-weight: 700; }
.log-res { font-variant-numeric: tabular-nums; color: var(--text-2); }
.log-res b { display: inline-block; width: 1.2em; font-weight: 800; }
.log-row.win .log-res b { color: #2ee88a; }
.log-row.loss .log-res b { color: #ff7b78; }
.log-rating { font-weight: 800; color: #fff; }
.log-extra { font-weight: 800; }
.log-extra.pos { color: #2ee88a; } .log-extra.neg { color: #ff7b78; }
body[data-team] .log-extra.pos { color: #2ee88a; } body[data-team] .log-extra.neg { color: #ff7b78; }
.log-edges { display: flex; align-items: center; gap: 10px; }
.log-edges small { color: var(--text-3); font-size: .74rem; font-weight: 700; }
.log .score-marks { font-size: .8rem; letter-spacing: 2px; }
.log .score-marks .on { color: #2ee88a; } .log .score-marks .off { color: var(--line-2); }
body[data-team] .log .score-marks .on { color: #2ee88a; }
@media (max-width: 700px) {
  .log-row { grid-template-columns: 70px 60px 90px 60px minmax(0, 1fr); gap: 8px; padding: 9px 12px; font-size: .9rem; }
  .log-row > :nth-child(6) { display: none; }
  .log-head > :nth-child(6) { display: none; }
  .log-date small { display: none; }
}

/* Points per 100 possessions as a one-line strip at the top of Season totals. */
.ppp-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label nums" "bar bar"; align-items: center; gap: 8px 20px; margin-bottom: 14px; padding: 12px 16px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.ppp-label { grid-area: label; display: flex; flex-direction: column; min-width: 0; }
.ppp-label strong { font-size: .95rem; color: var(--text); }
.ppp-label small { font-size: .74rem; color: var(--text-3); margin-top: 2px; }
.ppp-nums { grid-area: nums; display: flex; align-items: baseline; gap: 22px; }
.ppp-nums span { display: flex; flex-direction: column; align-items: center; }
.ppp-nums b { font: 800 1.55rem/1 var(--font); font-variant-numeric: tabular-nums; color: #fff; }
.ppp-nums small { font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: 4px; }
.ppp-side.bos b { color: var(--green); }
.ppp-side.opp b { color: var(--blue-bright); }
.ppp-net b { color: var(--text-2); }
.ppp-net.pos b, body[data-team] .ppp-net.pos b { color: #2ee88a; }
.ppp-net.neg b, body[data-team] .ppp-net.neg b { color: #ff7b78; }
.ppp-bar { grid-area: bar; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
.ppp-bar i { display: block; height: 100%; }
.ppp-bar i.bos { background: var(--green); }
.ppp-bar i.opp { background: var(--blue); }
@media (max-width: 640px) { .ppp-strip { grid-template-columns: 1fr; grid-template-areas: "label" "nums" "bar"; } .ppp-nums { justify-content: space-between; } }

/* =====================================================================
   LATEST GAME CARD — result-tinted, score up front, six edge chips.
   ===================================================================== */
.takeaway-game { --res: #2ee88a; --res-rgb: 46,232,138; position: relative; padding: 16px 18px 14px; border-left: 4px solid var(--res);
  background: linear-gradient(120deg, rgba(var(--res-rgb), .12), transparent 55%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.takeaway-game.loss { --res: #ff7b78; --res-rgb: 255,123,120; }
.takeaway-game:hover { border-color: var(--line-2); border-left-color: var(--res); background: linear-gradient(120deg, rgba(var(--res-rgb), .18), transparent 60%), linear-gradient(180deg, var(--surface-3), var(--surface-2)); }
.tg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tg-top .eyebrow { margin: 0; }
.tg-when { font-size: .78rem; font-weight: 700; color: var(--text-2); }
.tg-main { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.tg-badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--res); color: #06100a; font: 800 1.5rem/1 var(--font); flex: none; }
.takeaway-game.loss .tg-badge { color: #2a0d0d; }
.tg-score { display: flex; align-items: baseline; gap: 6px; font: 800 2.1rem/1 var(--font); font-variant-numeric: tabular-nums; color: #fff; letter-spacing: -.02em; }
.tg-score i { font-style: normal; color: var(--text-3); font-weight: 400; }
.tg-score b.opp { color: var(--text-2); }
.tg-rating { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.tg-rating b { font: 800 1.5rem/1 var(--font); font-variant-numeric: tabular-nums; color: #e4c56a; }
.tg-rating small { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
.tg-edges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tg-chip { font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: 4px 8px; border-radius: 6px; border: 1px solid transparent; }
.tg-chip.won { background: rgba(46,232,138,.14); color: #2ee88a; border-color: rgba(46,232,138,.35); }
.tg-chip.lost { background: rgba(255,123,120,.12); color: #ff7b78; border-color: rgba(255,123,120,.35); }
.tg-chip.pending { background: var(--surface-3); color: var(--text-3); }
.tg-foot { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--text-2); }
.tg-foot b { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.tg-foot b.pos, body[data-team] .tg-foot b.pos { color: #2ee88a; }
.tg-foot b.neg, body[data-team] .tg-foot b.neg { color: #ff7b78; }
.tg-go { margin-left: auto; color: var(--text-3); font-weight: 700; }
.takeaway-game:hover .tg-go { color: #fff; }
.tile-rating .val, body[data-team] .tile-rating .val { color: #e4c56a; }
.grid-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .grid-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .colgrid.many { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.colgrid .col-name { font-size: .9rem; line-height: 1.2; }

/* Points-per-100 bar as a diverging bar: net rating grows out from the center mark. */
.ppp-bar { position: relative; display: block; height: 10px; margin-bottom: 14px; border-radius: 5px; background: var(--surface-3); overflow: visible; }
.ppp-bar i { position: absolute; top: 0; height: 100%; display: block; }
.ppp-bar i.mid { left: 50%; width: 2px; margin-left: -1px; height: 16px; top: -3px; background: var(--silver); border-radius: 1px; z-index: 2; }
.ppp-bar i.net { border-radius: 5px; }
.ppp-bar i.net.pos { left: 50%; background: #2ee88a; border-radius: 0 5px 5px 0; }
.ppp-bar i.net.neg { right: 50%; background: #ff7b78; border-radius: 5px 0 0 5px; }
.ppp-scale { position: absolute; top: 13px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: var(--text-3); }
.ppp-scale.l { left: 0; } .ppp-scale.c { left: 50%; transform: translateX(-50%); } .ppp-scale.r { right: 0; }