/* Outlier design system.
   Electric-blue frame, deep ink surfaces, thin condensed display type, mono labels, grain.
   Player cards carry the color: tiers by rating (bronze, silver, gold, diamond). */

:root {
  --orange: #ff5b1a;
  --ink: #0e0d0c;
  --panel: #171513;
  --panel-2: #211e1b;
  --line: rgba(241, 236, 227, 0.12);
  --line-strong: rgba(241, 236, 227, 0.28);
  --text: #f1ece3;
  --muted: #9b948a;
  --soft: #c9c1b4;
  --down: #ff6b6b;
  --up: #7fe0a0;
  --frame: 6px;
  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Kept for older templates and the card image script. */
  --accent: var(--orange);
  --accent-ink: var(--ink);
  --radius: 4px;
  font-family: var(--body);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: #24211e; }
body {
  margin: var(--frame); min-height: calc(100vh - 2 * var(--frame));
  background: var(--ink); color: var(--text); line-height: 1.55; font-size: 15px;
  position: relative; overflow-x: hidden;
}
/* Film grain over the whole page. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The frame: a fixed blue border with a slow glow that breathes along its edges. */
.frame { position: fixed; inset: 0; pointer-events: none; z-index: 70; border: var(--frame) solid #24211e; }
.frame::before, .frame::after {
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 90px 4px rgba(255, 91, 26, 0.13);
  animation: bloom 14s ease-in-out infinite;
}
.frame::after {
  box-shadow: inset 0 0 180px 10px rgba(241, 236, 227, 0.06);
  animation-duration: 21s; animation-delay: -7s;
}
@keyframes bloom { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

a { color: var(--text); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--orange); }
::selection { background: var(--orange); color: var(--ink); }
main { max-width: 1160px; margin: 0 auto; padding: 0 20px 72px; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s;
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1160px; margin: 0 auto; padding: 14px 20px; }
.brand {
  font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: 0.06em; line-height: 1;
  display: inline-flex; align-items: flex-start;
}
/* The outlier: one dot that sits off the line. */
.brand::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 4px; background: var(--orange); box-shadow: 0 0 12px rgba(255, 91, 26, 0.7); }
.brand:hover { color: var(--text); }
.topbar nav { display: flex; align-items: center; gap: 22px; }
.topbar nav a {
  font-family: var(--display); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.topbar nav a:hover, .topbar nav a[aria-current] { color: var(--text); }
.topbar nav a.nav-cta { background: var(--text); color: var(--ink); padding: 7px 12px; }
.topbar nav a.nav-cta:hover { background: var(--orange); color: var(--ink); }

/* Type */
.hero { padding: 64px 0 28px; }
.hero.narrow { max-width: 760px; }
.eyebrow, .label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange); margin: 0 0 14px;
}
h1, h2, h3 { font-family: var(--display); font-weight: 200; line-height: 0.95; margin: 0; }
h1 { font-size: clamp(54px, 9vw, 112px); letter-spacing: -0.015em; margin-bottom: 20px; }
h1 em, h2 em { font-style: normal; color: var(--soft); font-weight: 200; }
h2 { font-size: clamp(34px, 4.6vw, 54px); margin: 56px 0 18px; }
h2 sup { font-family: var(--mono); font-size: 12px; color: var(--orange); vertical-align: top; margin-left: 6px; }
h3 { font-size: 30px; }
.lede { color: var(--muted); max-width: 640px; margin: 0; font-size: 16.5px; }
.lede b { color: var(--text); font-weight: 500; }
.lede a, p a { color: var(--text); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.muted, .muted-link { color: var(--muted); }
.small { font-size: 13px; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--text); color: var(--ink); border: 0; border-radius: 2px;
  padding: 10px 16px; font-family: var(--display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn:hover { background: var(--orange); color: var(--ink); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.ghost:hover { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.btn:disabled { opacity: 0.3; cursor: default; transform: none; }
.small-btn { padding: 5px 10px; font-size: 13px; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 18px; }
.filters label { max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.filters input, .filters select, .compare-search input {
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 2px;
  padding: 10px 12px; font: 14px var(--body); min-width: 160px; transition: border-color 0.2s;
}
/* Long conference names would otherwise stretch the page wider than a phone. */
.filters select { max-width: 100%; text-overflow: ellipsis; }
.filters input:focus, .filters select:focus, .compare-search input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 91, 26, 0.22); }

/* Tables: no boxes, dashed rules, mono numbers */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 12px 12px; text-align: left; border-bottom: 1px dashed var(--line); white-space: nowrap; }
th {
  font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
}
th[data-sort] { cursor: pointer; }
th[data-sort]:hover, th.sorted { color: var(--text); }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: rgba(241, 236, 227, 0.04); }
td.num, th.num { text-align: right; }
td.rank { font-family: var(--mono); color: var(--muted); font-size: 12px; }
.compact td, .compact th { padding: 9px 10px; }

/* Rating tags: small chamfered chips colored by tier */
.pill {
  display: inline-block; min-width: 40px; text-align: center; padding: 3px 7px;
  font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.1; letter-spacing: 0.02em;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: var(--tier-bg, var(--soft)); color: var(--tier-ink, var(--ink));
}
.pill.new, .t-start .pill { --tier-bg: var(--panel-2); --tier-ink: var(--muted); }
.trend { font-family: var(--mono); font-size: 11.5px; font-weight: 500; margin-left: 6px; vertical-align: middle; }
.trend.up { color: var(--up); }
.trend.down { color: var(--down); }

/* Tiers. Each sets a metal gradient (--tier-bg) and the ink that reads on it. */
.t-bronze { --tier-bg: linear-gradient(135deg, #7a4826, #d79a62 46%, #6a3a1c); --tier-ink: #1f0f04; --tier-glow: rgba(215, 154, 98, 0.25); }
.t-silver { --tier-bg: linear-gradient(135deg, #6a7080, #e4e8f0 46%, #555b69); --tier-ink: #10131a; --tier-glow: rgba(228, 232, 240, 0.22); }
.t-gold { --tier-bg: linear-gradient(135deg, #8a6514, #f6d873 46%, #7a560c); --tier-ink: #221603; --tier-glow: rgba(246, 216, 115, 0.3); }
/* Diamond: icy, faceted, with a glint that sweeps across. */
.t-diamond {
  --tier-bg:
    linear-gradient(115deg, #9fdcf2, #f4fdff 16%, #7cc4e4 30%, #e6f7ff 44%, #b7d4ff 58%, #ffffff 70%, #8fd0ec 84%, #d9f4ff 100%);
  --tier-ink: #06131c; --tier-glow: rgba(150, 220, 255, 0.4);
}
.t-start { --tier-bg: linear-gradient(135deg, #2b2724, #3a3531 46%, #24211e); --tier-ink: var(--muted); --tier-glow: transparent; }

/* Player card */
.card-page { display: grid; grid-template-columns: 340px 1fr; gap: 48px; padding-top: 40px; }
.card-col { position: sticky; top: 84px; align-self: start; }
.player-card {
  --cut: 22px;
  position: relative; padding: 3px; background: var(--tier-bg, var(--panel-2)); background-size: 220% 220%;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter: drop-shadow(0 18px 40px var(--tier-glow, transparent));
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease-out;
}
/* The face is tinted with the tier's metal: brushed at the top, falling to ink behind the stats. */
.card-inner {
  position: relative; overflow: hidden; padding: 0 0 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
    linear-gradient(170deg, color-mix(in srgb, var(--tier-tint, #3a3531) 34%, #1b1815), #141210 46%, #100f0e);
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px));
}
/* Light that follows the pointer (set by site.js). */
.card-inner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.3s; z-index: 5;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.55), transparent 45%);
}
.player-card:hover .card-inner::after { opacity: 1; }
.t-diamond.player-card, .t-diamond .card-name { animation: holo 7s linear infinite; }
@keyframes holo { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
/* Diamond glint: a bright band crossing the card every few seconds, plus a few sparkles. */
.t-diamond .card-inner::before {
  content: ""; position: absolute; inset: -20% -60%; z-index: 4; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.75) 49%, rgba(200, 240, 255, 0.4) 52%, transparent 58%);
  animation: glint 5.5s ease-in-out infinite;
}
@keyframes glint { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
.sparkle {
  position: absolute; z-index: 4; width: 14px; height: 14px; pointer-events: none;
  background: radial-gradient(circle, #fff 0 1.5px, transparent 2px),
    linear-gradient(#fff, #fff) center / 1px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 1px no-repeat;
  filter: drop-shadow(0 0 4px #bdf0ff); animation: twinkle 3.2s ease-in-out infinite; opacity: 0;
}
@keyframes twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }

.card-photo {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 60% 35%, rgba(255, 255, 255, 0.06), transparent 65%);
}
.card-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 26%; background: linear-gradient(transparent, rgba(16, 15, 14, 0.85)); z-index: 2; }
.card-photo img, .mini-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Once cut out, the player shifts right to clear the rating column and gets a soft shadow to sit on the card. */
.card-photo img[data-cut] { width: 86%; margin-left: 14%; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55)); }
/* Rating, position and tier stacked down the left edge, over the photo. */
.card-side {
  position: absolute; top: 16px; left: 16px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.card-rating { font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 0.82; letter-spacing: -0.01em; }
.card-side .trend { margin: 0; font-size: 12px; }
.card-jersey { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.card-pos { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.08em; line-height: 1; padding-top: 6px; border-top: 1px solid var(--line-strong); }
.card-tier {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 6px;
  background: var(--tier-bg, var(--panel-2)); background-size: 220% 220%; color: var(--tier-ink, var(--muted)); text-shadow: none;
}
.card-number { font-family: var(--display); font-size: 84px; font-weight: 800; color: rgba(241, 236, 227, 0.12); }
/* Name banner in the tier's metal. */
.card-name {
  position: relative; z-index: 3; margin: -6px 12px 0; padding: 7px 10px 5px; text-align: center;
  font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
  background: var(--tier-bg, var(--panel-2)); background-size: 220% 220%; color: var(--tier-ink, var(--text));
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-school {
  color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; margin: 8px 12px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-attrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 14px; border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong); }
.card-attrs div { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 7px 0; }
.card-attrs div:nth-child(-n+3) { border-bottom: 1px dashed var(--line); }
.card-attrs div:not(:nth-child(3n+1)) { border-left: 1px dashed var(--line); }
.card-attrs b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; }
.card-attrs span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); }
.card-attrs .a-80 b { color: #f6d873; }
.card-attrs .a-90 b { color: var(--orange); text-shadow: 0 0 14px rgba(255, 91, 26, 0.45); }
.card-stats { display: flex; justify-content: center; gap: 16px; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); }
.card-stats b { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--text); letter-spacing: 0; }
.player-card.provisional .card-rating { color: var(--muted); }
.form-tag {
  position: absolute; top: 12px; right: 12px; z-index: 3; background: var(--orange); color: var(--ink); box-shadow: 0 0 18px rgba(255, 91, 26, 0.6);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px;
}
.player-card.in-form { filter: drop-shadow(0 0 26px rgba(255, 91, 26, 0.55)); }
.share-row { margin: 16px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.bio dl { display: grid; grid-template-columns: 170px 1fr; gap: 0; margin: 20px 0; }
.attr-list { display: grid; grid-template-columns: 190px 1fr; margin: 16px 0; }
.attr-list dt, .attr-list dd { padding: 10px 0; border-bottom: 1px dashed var(--line); margin: 0; }
.attr-list dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); padding-top: 12px; }
.bio dt, .bio dd { padding: 9px 0; border-bottom: 1px dashed var(--line); margin: 0; }
.bio dt { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding-top: 11px; }
.statline th, .statline td { text-align: center; }
.statline td { font-family: var(--mono); }

/* Mini cards (grids and strips). Photos are blue duotone until hovered. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 18px; }
.mini-card {
  --cut: 14px;
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 12px;
  background: linear-gradient(170deg, #1f1c19, #141210);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform 0.25s ease, background 0.25s;
}
.mini-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tier-bg, var(--line)); background-size: 220% 220%; }
.mini-card:hover { transform: translateY(-4px); color: var(--text); background: linear-gradient(170deg, #29251f, #181614); }
.mini-card b { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; margin-top: 4px; }
.mini-rating {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; padding: 3px 7px 2px;
  background: var(--tier-bg, var(--soft)); color: var(--tier-ink, var(--ink));
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.mini-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2e2925, #141210); display: grid; place-items: center; margin-bottom: 6px; }
.mini-photo img { transition: transform 0.6s; }
.mini-card:hover .mini-photo img { transform: scale(1.04); }
.mini-photo .card-number { font-size: 44px; }
.mini-attrs { display: flex; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); margin: 2px 0 1px; }
.mini-attrs i { font-style: normal; }
.mini-attrs b { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 0; color: var(--text); margin: 0; }
.mini-attrs .a-80 b { color: #f6d873; }
.mini-attrs .a-90 b { color: var(--orange); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.two-col > *, .card-page > *, .fantasy > * { min-width: 0; }

/* Home */
.home-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; padding: 40px 0 24px; min-height: 660px; }
.home-hero h1 { font-size: clamp(64px, 10vw, 132px); }
.home-hero .actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.stack { position: relative; height: 640px; }
.stack > a { position: absolute; width: 280px; top: 10px; left: 50%; animation: float 7s ease-in-out infinite; }
.stack > a:nth-child(1) { transform: translateX(-112%) rotate(-9deg) scale(0.86); top: 54px; animation-delay: -2s; }
.stack > a:nth-child(2) { transform: translateX(12%) rotate(8deg) scale(0.86); top: 54px; animation-delay: -4s; }
.stack > a:nth-child(3) { transform: translateX(-50%); z-index: 2; }
.stack > a:hover { color: var(--text); }
.stack .card-name { font-size: 24px; }
.stack .card-rating { font-size: 58px; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); margin: 24px 0 8px; }
.stat-band div { padding: 18px 16px; border-left: 1px dashed var(--line); }
.stat-band div:first-child { border-left: 0; }
.stat-band b { display: block; font-family: var(--display); font-weight: 200; font-size: 52px; line-height: 1; }
.stat-band span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.strip { grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); grid-template-columns: none; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* Scroll reveal (site.js adds .in) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Footer: the wordmark, huge and faint */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; padding: 56px 20px 40px; }
.footer-inner { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer p { margin: 0; max-width: 520px; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--text); }
.footer .label { margin-bottom: 8px; }
.watermark {
  position: absolute; left: 50%; bottom: -0.18em; transform: translateX(-50%); pointer-events: none;
  font-family: var(--display); font-weight: 200; font-size: clamp(120px, 22vw, 320px); line-height: 1; letter-spacing: 0.02em;
  color: rgba(241, 236, 227, 0.04); white-space: nowrap;
}

/* Scores */
.game-day { font-family: var(--mono); font-size: 11.5px; color: var(--orange); text-transform: uppercase; letter-spacing: 0.08em; margin: 28px 0 10px; }
.games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.game { background: var(--panel); border-left: 2px solid var(--line-strong); padding: 11px 14px; transition: border-color 0.2s, background 0.2s; }
.game:hover { border-left-color: var(--orange); background: var(--panel-2); }
.game-team { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; padding: 2px 0; }
.game-team b { font-family: var(--mono); font-weight: 500; }
.game.final .game-team:not(.won), .game.final .game-team:not(.won) a { color: var(--muted); }
.game-team.won b { color: var(--text); font-weight: 600; }
.game-meta { margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.schedule { grid-template-columns: 1fr; max-width: 560px; gap: 6px; }
.schedule-day { margin-top: 12px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }

/* Hometown tile map */
.tile-map-wrap { max-width: 760px; margin: 8px 0 32px; }
.legend { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 12px; }
.legend i { width: 120px; height: 6px; background: linear-gradient(90deg, var(--panel-2), var(--orange)); }
.tile-map { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.tile {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--orange) calc(var(--shade) * 100%), var(--panel));
  color: var(--ink); font-family: var(--mono); font-size: 10.5px; line-height: 1.15; transition: transform 0.2s, outline-color 0.2s;
}
.tile b { font-family: var(--display); font-weight: 700; font-size: 15px; }
.tile.faint { color: var(--muted); }
.tile:hover { outline: 1px solid var(--text); color: var(--ink); transform: scale(1.08); z-index: 1; }
@media (max-width: 520px) { .tile { font-size: 8.5px; } .tile b { font-size: 11px; } }

/* A table row that is one link (the row-target); site.js follows it on a click anywhere else in the row.
   Not a stretched ::after: mobile Safari ignores position: relative on rows, so the last row covered the table. */
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: rgba(241, 236, 227, 0.045); }
tr.row-link:hover .row-target { color: var(--orange); }

/* Compare: card | attribute radars | card, with the stats centered below */
.versus {
  --vs-a: var(--orange); --vs-b: #5cc8f5;
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; grid-template-areas: "a mid b";
  gap: 28px; align-items: start; margin-bottom: 36px;
}
.versus > * { min-width: 0; }
.vs-a { grid-area: a; } .vs-b { grid-area: b; } .vs-mid { grid-area: mid; }
.vs-card .player-card { display: block; color: inherit; text-decoration: none; }
.compare-search { position: relative; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 16px; }
.compare-search input { text-transform: none; letter-spacing: 0; }
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; list-style: none; margin: 4px 0 0; padding: 0; background: var(--panel-2); border: 1px solid var(--line-strong); }
.suggest:empty { display: none; }
.suggest button { width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 9px 12px; font: 14px var(--body); cursor: pointer; }
.suggest button:hover { background: rgba(241, 236, 227, 0.06); }
.vs-mid { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 22px; }
.vs-names { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.vs-chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--text); }
.vs-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vs-chip.vs-a::before { background: var(--vs-a); } .vs-chip.vs-b::before { background: var(--vs-b); }
.vs-vs { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.vs-mode { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; }
.vs-mode button { background: none; border: 0; color: var(--muted); font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; padding: 7px 12px; cursor: pointer; }
.vs-mode button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--orange); }
.radars { width: 100%; display: grid; gap: 8px; justify-items: center; }
.radars.split { grid-template-columns: 1fr 1fr; }
.radar { position: relative; margin: 0; width: 100%; max-width: 470px; aspect-ratio: 1; }
.radar svg { width: 100%; height: 100%; overflow: visible; }
.radar .grid polygon { fill: rgba(241, 236, 227, 0.035); stroke: rgba(241, 236, 227, 0.08); stroke-width: 1; }
.radar .grid .ring-0 { fill: rgba(241, 236, 227, 0.02); stroke-linejoin: round; }
.radar .grid line { stroke: rgba(241, 236, 227, 0.06); stroke-width: 1; }
.radar .shape { stroke-width: 3; stroke-linejoin: round; fill-opacity: 0.16; }
.radar .shape.vs-a { stroke: var(--vs-a); fill: var(--vs-a); }
.radar .shape.vs-b { stroke: var(--vs-b); fill: var(--vs-b); }
.radar-label { position: absolute; translate: -50% -50%; text-align: center; white-space: nowrap; line-height: 1; }
.radar-label b { display: flex; gap: 5px; align-items: baseline; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 30px; }
.radar-label b i { font-style: normal; color: var(--line-strong); font-weight: 400; }
.radar-label small { display: block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.radar-label .vs-a, .compare-table .vs-a { color: var(--vs-a); }
.radar-label .vs-b, .compare-table .vs-b { color: var(--vs-b); }
.radars.split .radar-label b { font-size: 22px; }
.radar-label .short, .radars.split .radar-label .long { display: none; }
.radars.split .radar-label .short { display: inline; }
.radars.split { column-gap: 40px; }
.compare-table-wrap { max-width: 560px; margin: 0 auto 18px; }
.compare-table { --vs-a: var(--orange); --vs-b: #5cc8f5; }
.compare-table th, .compare-table td { text-align: center; }
.compare-table tbody th { color: var(--muted); }
.compare-table td.lead { font-weight: 700; }
.compare-share { text-align: center; }
@media (max-width: 1100px) {
  .versus { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "mid mid"; }
  .vs-card { max-width: 300px; }
  .vs-b .vs-card { margin-left: auto; }
}
/* Phones: both cards stay side by side, shrunk as whole pieces. */
@media (max-width: 760px) {
  .versus { gap: 12px; }
  .vs-card { zoom: 0.56; max-width: none; width: 300px; }
  .vs-names { display: none; }
  .radar-label b { font-size: 22px; }
  .radar-label small { font-size: 9px; letter-spacing: 0.06em; }
  .radars.split { grid-template-columns: 1fr; }
  .radars.split .radar-label .short { display: none; }
  .radars.split .radar-label .long { display: inline; }
  .radars.split .radar { max-width: 340px; }
}
@media (max-width: 370px) { .vs-card { zoom: 0.5; } }
.gem-note { color: var(--orange); font-family: var(--mono); font-size: 11px; }

/* Fantasy (shelved; kept styled for when it returns) */
.fantasy { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
.lineup-panel { background: var(--panel); border: 1px solid var(--line); padding: 16px; position: sticky; top: 84px; }
.cap-bar { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.cap-bar b { color: var(--orange); }
.cap-bar b.over { color: var(--down); }
.lineup { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slot { display: grid; grid-template-columns: 46px 1fr auto 24px; gap: 8px; align-items: center; background: var(--panel-2); padding: 8px 10px; font-size: 14px; }
.slot.empty { grid-template-columns: 46px 1fr; }
.slot-tag { font-family: var(--mono); font-size: 11px; color: var(--orange); }
.slot .x { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }
.lineup-total { margin: 14px 0 10px; font-size: 15px; }
.lineup-total b { font-size: 22px; color: var(--orange); }
.lineup-actions { display: flex; gap: 8px; }
tr.picked td { opacity: 0.55; }
.week-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.week-results li { background: var(--panel); padding: 10px 12px; }
.week-total { float: right; color: var(--orange); font-weight: 700; }

/* Smaller laptops: slightly smaller hero cards so the fanned-out pair stays on screen. */
@media (max-width: 1300px) and (min-width: 1191px) {
  .stack > a { width: 240px; }
}
/* The three hero cards need ~560px beside the headline, so stack them under it until there's room. */
@media (max-width: 1190px) {
  .home-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 36px; }
  .stack { height: 560px; max-width: 420px; width: 100%; margin: 0 auto; }
  .stack > a { width: 240px; }
}
@media (max-width: 900px) {
  .fantasy { grid-template-columns: 1fr; }
  .lineup-panel { position: static; }
}
/* Phones: the three hero cards keep their desktop arrangement, scaled down as one piece to fit the screen. */
@media (max-width: 600px) {
  .stack { --s: 0.68; width: 540px; max-width: none; height: 540px; transform: scale(var(--s)); transform-origin: top left;
           margin: 0 calc((100% - 540px * var(--s)) / 2 - 540px * (1 - var(--s))) calc(540px * (var(--s) - 1)) calc((100% - 540px * var(--s)) / 2); }
}
@media (max-width: 400px) { .stack { --s: 0.63; } }
@media (max-width: 370px) { .stack { --s: 0.59; } }
@media (max-width: 340px) { .stack { --s: 0.54; } }
/* Phone tab bar and its "More" sheet (base.html); hidden on wider screens, where the top nav shows everything. */
.tabbar, .more-sheet { display: none; }
.show-sm { display: none; }
td .sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; white-space: normal; }
td .sub a { color: var(--muted); }
.show-more { display: block; margin: 18px auto 0; }
/* Narrow desktops: tighten the top nav so it stays on one line. */
@media (max-width: 1280px) {
  .topbar nav { gap: 15px; }
  .topbar nav a { white-space: nowrap; letter-spacing: 0.07em; }
}
/* Phones and tablets: the top nav gives way to the tab bar. */
@media (max-width: 1100px) {
  :root { --tabbar: calc(62px + env(safe-area-inset-bottom)); }
  .topbar-inner { padding: 12px 16px; }
  .topbar nav { display: none; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 80; left: 0; right: 0; bottom: 0;
    height: var(--tabbar); padding: 6px 4px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--ink) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px;
    background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer;
    font: 600 11px var(--display); text-transform: uppercase; letter-spacing: 0.1em; -webkit-tap-highlight-color: transparent;
  }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar [aria-current], .tabbar button[aria-expanded="true"] { color: var(--orange); }
  .more-sheet:not([hidden]) {
    display: flex; align-items: flex-end; position: fixed; inset: 0 0 var(--tabbar); z-index: 79; background: rgba(0, 0, 0, 0.55);
  }
  .more-panel {
    width: 100%; display: grid; background: var(--panel); border-top: 1px solid var(--line-strong);
    padding: 8px 16px 10px; animation: sheet-up 0.22s ease-out;
  }
  .more-panel a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 15px 2px; border-bottom: 1px dashed var(--line); }
  .more-panel a:last-child { border-bottom: 0; }
  .more-panel b { font: 700 20px var(--display); text-transform: uppercase; letter-spacing: 0.06em; }
  .more-panel span { color: var(--muted); font-size: 13px; text-align: right; }
  .more-panel a[aria-current] b { color: var(--orange); }
  body { padding-bottom: var(--tabbar); }
}
@media (max-width: 760px) {
  :root { --frame: 4px; }
  /* 16px stops iPhones zooming the page when a field is tapped. */
  .filters input, .filters select, .compare-search input { font-size: 16px; }
  .filters label { flex: 1 1 140px; }
  .filters input, .filters select { min-width: 0; width: 100%; }
  .show-sm { display: block; }
  td:has(.sub) { white-space: normal; }
  .rankings td, .rankings th { padding-left: 8px; padding-right: 8px; }
  /* Hometowns: the state's top two players, one per line. */
  td.wrap-sm { white-space: normal; }
  td.wrap-sm .top-entry { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0; }
  td.wrap-sm .top-entry:nth-of-type(n+3) { display: none; }
  .filters label:first-child { flex-basis: 100%; }
  main { padding: 0 16px 56px; }
  .hero { padding-top: 40px; }
  .card-page, .two-col { grid-template-columns: 1fr; }
  .card-page { gap: 28px; padding-top: 24px; }
  .card-col { position: static; max-width: 360px; }
  .hide-sm { display: none; }
  .bio dl { grid-template-columns: 120px 1fr; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat-band div:nth-child(3) { border-left: 0; }
  .stat-band div:nth-child(n+3) { border-top: 1px dashed var(--line); }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  /* No sliding: the reel becomes a row you scroll yourself. */
  .reel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .reel-track [data-mirror] { display: none; }
}

/* Top 25 reel under the home hero: one long row sliding left forever, paused while hovered. */
.top-reel { margin: -70px 0 56px; position: relative; z-index: 1; }
.reel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.reel {
  /* Runs the full width of the window, past the page margins. */
  overflow: hidden; margin: 0 calc(50% - 50vw); padding: 8px 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reel-track { display: flex; gap: 18px; width: max-content; animation: reel 110s linear infinite; }
.reel:hover .reel-track, .reel:focus-within .reel-track { animation-play-state: paused; }
.reel-track .mini-card { width: 190px; flex: none; }
/* -50% is exactly one copy; the extra half gap keeps the spacing even across the wrap. */
@keyframes reel { to { transform: translateX(calc(-50% - 9px)); } }
.reel-rank {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted);
  background: rgba(14, 13, 12, 0.7); padding: 3px 6px;
}

/* Cutouts: once static/cutout.js removes a photo's background, the player stands in front of
   a glow in his tier's color with his jersey number large behind him. */
.t-bronze { --tier-tint: #d79a62; }
.t-silver { --tier-tint: #e4e8f0; }
.t-gold { --tier-tint: #f6d873; }
.t-diamond { --tier-tint: #9fdcf2; }
.t-start { --tier-tint: #6b635b; }
.card-photo img, .mini-photo img { position: relative; z-index: 1; }
/* Light rays in the tier's color fan out from behind the player's head, fading toward the edges. */
.card-photo::before, .mini-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.8s;
  --ray: color-mix(in srgb, var(--tier-tint, #9b948a) 26%, transparent);
  background: repeating-conic-gradient(from -4deg at var(--rx-at, 50%) 34%, var(--ray) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle at var(--rx-at, 50%) 34%, #000 8%, rgba(0, 0, 0, 0.5) 38%, transparent 68%);
  mask-image: radial-gradient(circle at var(--rx-at, 50%) 34%, #000 8%, rgba(0, 0, 0, 0.5) 38%, transparent 68%);
}
.card-photo { --rx-at: 57%; }
.card-photo.cut::before, .mini-photo.cut::before { opacity: 1; }
/* Every card looks the same: one glow behind every player, and a photo only appears once the player has
   been cut out, so no gym or studio backdrop ever shows. Until then the card shows the glow and number. */
.card-photo, .mini-photo {
  background:
    radial-gradient(ellipse 70% 60% at var(--rx-at, 50%) 40%, color-mix(in srgb, var(--tier-tint, #9b948a) 30%, transparent), transparent 70%),
    linear-gradient(180deg, #24201d, #121110);
}
img[data-cutout]:not([data-cut]):not([data-cut-failed]), img[data-twin]:not([data-cut]):not([data-cut-failed]) { opacity: 0; }
img[data-cut-failed] { display: none; }
/* A school photo without a cutout attempt (none today) fades its backdrop away. */
.card-photo img:not([data-cut]):not(.action), .mini-photo img:not([data-cut]):not(.action) {
  -webkit-mask-image: radial-gradient(ellipse 58% 72% at 50% 34%, #000 40%, rgba(0, 0, 0, 0.55) 62%, transparent 80%);
  mask-image: radial-gradient(ellipse 58% 72% at 50% 34%, #000 40%, rgba(0, 0, 0, 0.55) 62%, transparent 80%);
  filter: saturate(0.92) contrast(1.04) brightness(0.96);
}
.card-photo img:not([data-cut]):not(.action) { width: 86%; margin-left: 14%; }
.t-start .card-photo::before, .t-start .mini-photo::before { display: none; }
img[data-cut] { animation: cut-in 0.6s ease both; }
@keyframes cut-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
.card-photo img.action, .mini-photo img.action { object-position: center 30%; }
/* Game action shots can't be cut out, so the big card zooms in on the player and fades the gym into the card. */
.card-photo img.action { transform: scale(1.35); transform-origin: 50% 28%; }
.card-photo:has(img.action)::after { height: 45%; }

/* Team of the Week on the home page: the starting five stand on a half court (seen from above, basket
   at the top), with the bench below. Sizes use cqw, so the whole court scales as one piece. */
.totw { margin: 0 0 64px; }
.totw-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin: 18px 0 10px; }
.court {
  position: relative; container-type: inline-size; max-width: 980px; margin: 18px auto 0; aspect-ratio: 500 / 430;
  color: rgba(241, 236, 227, 0.2); border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 45% 38% at 50% 10%, rgba(255, 91, 26, 0.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3.4cqw),
    radial-gradient(ellipse 90% 70% at 50% 45%, #2b2219, #15120f);
}
.court svg { position: absolute; inset: 0 auto auto 0; width: 100%; height: auto; }
.court .paint { fill: rgba(255, 91, 26, 0.08); }
.court .rim { stroke: var(--orange); }
/* A starter: a card standing on its spot (1 court unit = 0.2cqw), with a shadow on the floor. */
.spot { position: absolute; left: calc(var(--x) * 0.2cqw); top: calc(var(--y) * 0.2cqw); width: 18cqw; translate: -50% -50%; color: var(--text); transition: translate 0.25s ease; }
.spot::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -5%; height: 9%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); z-index: -1;
}
.spot:hover { translate: -50% calc(-50% - 6px); color: var(--text); }
.spot-card {
  --cut: 1.4cqw;
  position: relative; display: flex; flex-direction: column; gap: 0.2cqw; padding: 0.9cqw 0.9cqw 1.1cqw;
  background: linear-gradient(170deg, #26221e, #141210);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.spot-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tier-bg, var(--line)); background-size: 220% 220%; z-index: 2; }
.spot .mini-photo { margin-bottom: 0.5cqw; }
.spot-rating {
  position: absolute; top: 1.6cqw; left: 1.6cqw; z-index: 2;
  font-family: var(--display); font-weight: 800; font-size: clamp(12px, 2.2cqw, 24px); line-height: 1; padding: 0.3cqw 0.6cqw 0.2cqw;
  background: var(--tier-bg, var(--soft)); color: var(--tier-ink, var(--ink));
}
.spot-slot {
  position: absolute; top: 1.6cqw; right: 1.6cqw; z-index: 2;
  font-family: var(--mono); font-size: clamp(9px, 1.1cqw, 11px); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: rgba(14, 13, 12, 0.7); padding: 0.3cqw 0.6cqw;
}
.spot b { font-family: var(--display); font-weight: 700; font-size: clamp(11px, 1.9cqw, 19px); line-height: 1.05; text-transform: uppercase; }
.spot-school { font-size: clamp(9px, 1.2cqw, 12.5px); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The week's totals: three numbers with their stat spelled out underneath. */
.spot-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 0.6cqw; border-top: 1px dashed var(--line); padding-top: 0.6cqw; }
.spot-stats span { display: flex; flex-direction: column; font-family: var(--mono); font-size: clamp(7px, 0.85cqw, 9.5px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.spot-stats b { font-family: var(--display); font-weight: 800; font-size: clamp(14px, 2.3cqw, 24px); line-height: 1; color: var(--text); text-transform: none; }
.spot-stats i { font-style: normal; }
.spot-stats .short { display: none; }
.spot-games { font-family: var(--mono); font-size: clamp(8px, 0.95cqw, 10.5px); color: var(--muted); margin-top: 0.4cqw; }
/* The bench sits under the court: same cards, side by side. */
.bench { max-width: 980px; margin: 0 auto; container-type: inline-size; }
.bench-row { display: flex; justify-content: center; gap: 16px; }
.bench .spot { position: relative; left: auto; top: auto; translate: none; width: 16cqw; }
.bench .spot:hover { translate: 0 -6px; }
.totw-empty {
  display: grid; gap: 6px; padding: 28px; border: 1px dashed var(--line-strong);
  background: radial-gradient(ellipse at 0 0, rgba(255, 91, 26, 0.08), transparent 60%);
}
.totw-empty b { font-family: var(--display); font-weight: 800; font-size: 34px; text-transform: uppercase; line-height: 1; }
.totw-empty span { color: var(--muted); max-width: 60ch; }
@media (max-width: 760px) {
  /* Phones: bigger cards with just the name, on a deeper floor, each at its own phone spot so none overlap. */
  .court { aspect-ratio: 500 / 610; }
  .court .spot { width: 23cqw; left: calc(var(--mx) * 0.2cqw); top: calc(var(--my) * 0.2cqw); }
  .spot-stats .long { display: none; }
  .spot-stats .short { display: inline; }
  .spot-school, .spot-games, .court .spot-stats { display: none; }
  .bench .spot { width: 30cqw; }
}

/* Stat abbreviations: a dotted underline says "hover me"; the bubble is drawn by site.js. */
[data-tip] { cursor: help; text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.tip {
  position: fixed; z-index: 100; pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity 0.12s, transform 0.12s;
  max-width: 240px; padding: 6px 9px; font-family: var(--mono); font-size: 11.5px; line-height: 1.35; letter-spacing: 0.02em;
  color: var(--ink); background: var(--text); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.tip.on { opacity: 1; transform: none; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }

/* Transfer tracker: one tab per level a player came from */
.level-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.level-tabs button {
  font: 600 14px var(--body); color: var(--muted); background: var(--panel); cursor: pointer;
  border: 1px solid var(--line); border-radius: 2px; padding: 9px 14px; display: inline-flex; gap: 8px; align-items: baseline;
}
.level-tabs button .mono { font-size: 12px; }
.level-tabs button:hover { color: var(--text); border-color: var(--line-strong); }
.level-tabs button[aria-selected="true"] { color: var(--text); border-color: var(--orange); box-shadow: inset 0 -2px 0 var(--orange); }
.level-tabs button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.level-panel h2 { margin-top: 0; }