/* Overpaid. Market-board look: deep navy, electric blue brand, green/red for value moving up or down, team colors as the live accent.
   Layout: sticky search bar; boards are face-first lists; player page = team-color band + pay stub + charts. */
:root {
  --bg: #0A1322;
  --surface: #101C2F;
  --raised: #16253C;
  --line: #22344F;
  --text: #EEF3FA;
  --muted: #8B9AB3;
  --brand: #1F6BFF;          /* electric blue: links, active states, primary buttons, chart lines */
  --brand-2: #5C95FF;        /* lighter blue for text and highlights on dark */
  --brand-ink: #FFFFFF;
  --brand-glow: rgba(31, 107, 255, .22);
  --steal: #2DD47F;          /* rising / outplayed the cap hit */
  --steal-bg: rgba(45, 212, 127, .14);
  --over: #F0505A;           /* falling / overpaid */
  --over-bg: rgba(240, 80, 90, .14);
  --fair: #C6D0E2;
  --fair-bg: rgba(198, 208, 226, .1);
  --display: "Designer", "Arial Black", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
/* Self-hosted fonts (Fontsource, SIL OFL). No third-party requests. */
@font-face { font-family: "Designer"; src: url("fonts/Designer.woff2") format("woff2"), url("fonts/Designer.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Barlow"; font-weight: 400; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow"; font-weight: 500; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow"; font-weight: 600; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow"; font-weight: 700; src: url("fonts/barlow-latin-700-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-display: swap; }
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 15.5px/1.45 var(--body); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
a { color: inherit }
button, input, select { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px }
img { max-width: 100% }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.pos { color: var(--steal) } .neg { color: var(--over) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; margin: 0; line-height: .92; letter-spacing: .005em; text-wrap: balance }
h1 { font-size: clamp(32px, 6.2vw, 60px); font-weight: 400; line-height: 1.02 }
h2 { font-size: clamp(19px, 3vw, 24px); font-weight: 400 }
h3 { font-size: 15px; font-weight: 400; letter-spacing: .02em }
.hl { color: var(--brand-2) }
.c-steal { color: var(--steal) } .c-over { color: var(--over) }
.eyebrow { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.lede { color: var(--muted); max-width: 60ch; margin: 10px 0 0; font-size: 17px }
.note { font-size: 13.5px; color: var(--muted); border-left: 3px solid var(--brand); padding: 2px 0 2px 12px; margin: 0; max-width: 70ch }
.tag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: var(--fair-bg); color: var(--fair) }
.empty, .loading { padding: 40px 16px; text-align: center; color: var(--muted) }
.loading { font-family: var(--display); font-size: 18px; text-transform: uppercase }

/* ---------- header ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line) }
.top-in { max-width: 1080px; margin: 0 auto; padding-block: 10px; padding-left: var(--gut-l); padding-right: var(--gut-r); display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap }
.logo { display: flex; align-items: center; color: var(--text); text-decoration: none; flex: none }
.logo svg { height: 30px; width: auto; display: block }
.logo:hover { color: var(--brand-2) }
.search { position: relative; flex: 1 1 240px; min-width: 0 }
.search input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface) }
.search input::placeholder { color: var(--muted) }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgb(0 0 0 / .45); overflow: hidden auto; max-height: 70vh }
.hit { display: flex; gap: 12px; align-items: center; padding: 10px 12px; text-decoration: none; border-bottom: 1px solid var(--line) }
.hit:last-child { border-bottom: 0 }
.hit.on, .hit:hover { background: var(--surface) }
.nav { display: flex; gap: 2px; overflow-x: auto }
.nav a { text-decoration: none; padding: 7px 11px; border-radius: 8px; font-weight: 700; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap }
.nav a[aria-current="page"] { color: var(--brand-ink); background: var(--brand) }
.nav a:hover:not([aria-current="page"]) { color: var(--text) }

main { max-width: 1080px; min-height: 100vh; min-height: 100svh; align-content: start; margin: 0 auto; padding-block: 28px 56px; padding-left: var(--gut-l); padding-right: var(--gut-r); display: grid; gap: 28px }
.block { display: grid; gap: 14px }
.block-head, .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap }
.hero-board { padding-top: 8px }

/* ---------- faces ---------- */
.face { --s: 44px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; position: relative; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tc) 85%, white 15%), var(--tc) 70%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 60%, white 25%) }
.face > span { font: 400 calc(var(--s) * .3)/1 var(--display); color: #fff }
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15% }
.face-sm { --s: 38px } .face-lg { --s: 64px } .face-xl { --s: 92px } .face-hero { --s: clamp(104px, 22vw, 168px); border-radius: 22px; box-shadow: 0 16px 40px rgb(0 0 0 / .4), inset 0 0 0 3px rgb(255 255 255 / .18) }

/* ---------- grade chips ---------- */
.gchip { font: 400 15px/1 var(--display); min-width: 46px; padding: 8px 6px 7px; border-radius: 8px; text-align: center; display: inline-block }
.gchip.sm { font-size: 12px; min-width: 38px; padding: 6px 4px 5px }
.gchip.lg { font-size: 21px; min-width: 60px }
.g-steal.gchip { background: var(--steal-bg); color: var(--steal) }
.g-fair.gchip { background: var(--fair-bg); color: var(--fair) }
.g-over.gchip { background: var(--over-bg); color: var(--over) }
.mv { font: 600 12px var(--mono); white-space: nowrap }
.mv.up { color: var(--steal) } .mv.down { color: var(--over) } .mv.flat { color: var(--muted) }
.mvpts { opacity: .85 }

/* ---------- spotlight cards ---------- */
.spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.spot { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 14px 14px; border-radius: 18px; text-decoration: none; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, var(--surface)) 0%, var(--surface) 62%); border: 1px solid var(--line); transition: transform .18s ease, border-color .18s ease }
.spot::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 38px, rgb(255 255 255 / .05) 38px 40px); pointer-events: none }
.spot:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc2, var(--tc)) 70%, var(--line)) }
.spot::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--tc), var(--tc2, var(--tc))) }
.spot > * { position: relative }
.spot-label { justify-self: start; font: 400 10px var(--display); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .85) }
.spot-name { font: 400 18px/1.1 var(--display); text-transform: uppercase; margin-top: 6px }
.spot-meta { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center }
.spot-figs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 6px; margin-top: 6px }
.spot-figs span, .row-num { display: grid; gap: 1px }
.spot-figs small, .row-num small, .stub small, .duel-cap small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.spot-figs b { font-size: 16px }
.spot-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px }
.spot-foot > b { font-size: 22px }

/* ---------- movers ---------- */
.movers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.mcol { display: grid; gap: 8px; align-content: start }
.mtitle { font: 400 12px var(--display); letter-spacing: .14em; text-transform: uppercase }
.mtitle.up { color: var(--steal) } .mtitle.down { color: var(--over) }
.mover { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none }
.mover:hover { background: var(--raised) }

/* ---------- controls ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none }
.chip { border: 1px solid var(--line); background: var(--surface); padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: .05em; white-space: nowrap }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text) }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px }
.seg button { border: 0; background: none; padding: 7px 14px; border-radius: 7px; font-weight: 700; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--text) }
.seg .s-steal[aria-pressed="true"] { background: var(--steal); color: #06231A }
.seg .s-over[aria-pressed="true"] { background: var(--over); color: #2A0405 }
.sel select { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 12px; font-weight: 700 }
.more, .btn-ghost { justify-self: center; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 18px; font-weight: 700; text-decoration: none }
.btn-share { border: 0; background: var(--brand); color: var(--brand-ink); border-radius: 10px; padding: 10px 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 13.5px; text-decoration: none; display: inline-block }

/* ---------- list rows ---------- */
.list { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden }
.row { display: grid; grid-template-columns: 30px 44px minmax(0, 1fr) 78px 78px 88px 52px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); text-decoration: none }
.row:last-child { border-bottom: 0 }
.row:hover { background: var(--raised) }
.row-rank { font: 400 14px var(--display); color: var(--muted); text-align: center }
.row-who { min-width: 0; display: grid; gap: 2px }
.row-who b { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.row-who small { color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.row-who .pos { color: var(--text); font-weight: 700 }
.row-num { text-align: right }
.row-num b { font-size: 14.5px }
.trow { grid-template-columns: 30px 14px minmax(0, 1fr) minmax(0, 180px) 96px }
.tdot { width: 14px; height: 14px; border-radius: 4px; background: var(--tc) }
.tbar { position: relative; height: 10px; background: var(--fair-bg); border-radius: 5px }
.tbar i { position: absolute; top: 0; bottom: 0; width: var(--w); border-radius: 5px }
.b-pos { background: var(--steal); fill: var(--steal) } .b-neg { background: var(--over); fill: var(--over) }

/* ---------- player hero ---------- */
.phero { margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r)); margin-top: -28px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 85%, black 0%) 0%, color-mix(in srgb, var(--tc) 45%, var(--bg)) 55%, var(--bg) 100%) }
.phero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 58px, rgb(255 255 255 / .06) 58px 61px); pointer-events: none }
.phero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--tc2, var(--brand)), var(--tc) 70%) }
.phero-in { position: relative; max-width: 1080px; margin: 0 auto; padding-block: 18px 34px; padding-left: var(--gut-l); padding-right: var(--gut-r); display: grid; gap: 14px }
.back { text-decoration: none; font-weight: 700; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .8); justify-self: start }
.phero-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center }
.phero-text { min-width: 0; display: grid; gap: 8px }
.eyebrow.on-band { color: rgb(255 255 255 / .82) }
.phero h1 { text-shadow: 0 2px 24px rgb(0 0 0 / .25) }
.facts { display: flex; flex-wrap: wrap; gap: 6px 16px; color: rgb(255 255 255 / .85); font-size: 15px }
.stamp { width: 136px; height: 136px; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px; background: var(--bg); border: 5px solid currentColor; transform: rotate(-9deg); box-shadow: 0 12px 30px rgb(0 0 0 / .35); animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) both }
.stamp b { font: 400 42px/1 var(--display) }
.stamp span { font: 400 9.5px var(--display); letter-spacing: .06em; text-transform: uppercase }
.stamp.g-steal { color: var(--steal) } .stamp.g-fair { color: var(--fair) } .stamp.g-over { color: var(--over) }
@keyframes stamp { from { transform: rotate(-9deg) scale(1.5); opacity: .4 } to { transform: rotate(-9deg) scale(1); opacity: 1 } }

.ptools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: -8px }
.ptools .btn-share { margin-left: auto }
.rankpill { font: 400 16px var(--display); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px }
.rankpill small { font: 600 13px var(--body); color: var(--muted); letter-spacing: .02em; text-transform: none }

.stub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden }
.stub > div { padding: 18px 20px; display: grid; gap: 4px; border-right: 1px dashed var(--line) }
.stub > div:last-child { border-right: 0 }
.stub b { font: 400 clamp(24px, 4.2vw, 38px)/1.05 var(--display) }
.stub b.num { font-family: var(--display); letter-spacing: .01em }
.stub span { font-size: 13px; color: var(--muted) }
.stub-sur { background: linear-gradient(180deg, var(--raised), var(--surface)) }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: grid; gap: 14px; min-width: 0 }
.scroll { overflow-x: auto }
.bars { gap: 16px; align-content: start }
.pbar { display: grid; grid-template-columns: 76px minmax(0, 1fr) 54px; gap: 6px 14px; align-items: center }
.pbar-l { font: 400 12px var(--display); letter-spacing: .1em; text-transform: uppercase }
.pbar-v { text-align: right; font-weight: 600; font-size: 16px }
.pbar-v small { color: var(--muted); font-size: 11px }
.pbar-note { grid-column: 2; font-size: 12px; color: var(--muted); margin-top: -4px }
.track { height: 14px; border-radius: 7px; background: var(--fair-bg); position: relative; overflow: hidden }
.track i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 7px; animation: grow .7s cubic-bezier(.2, .8, .2, 1) both }
.fill-imp { background: linear-gradient(90deg, color-mix(in srgb, var(--steal) 40%, transparent), var(--steal)) }
.fill-cost { background: linear-gradient(90deg, color-mix(in srgb, var(--over) 40%, transparent), var(--over)) }
.track .mid { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgb(255 255 255 / .25) }
@keyframes grow { from { width: 0 } }
.read { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 70ch }
.read b { color: var(--text) }

/* charts */
.chart { width: 100%; display: block }
.chart text { fill: var(--muted); font: 500 11px var(--mono) }
.chart text.on { fill: var(--text); font-weight: 600 }
.chart .grid { stroke: var(--line) } .chart .axis0 { stroke: var(--muted); stroke-width: 1.5 }
.chart .mid { stroke: var(--muted); stroke-dasharray: 4 4; opacity: .6 }
.chart .bar { cursor: pointer } .chart .bar rect.b-pos, .chart .bar rect.b-neg { opacity: .5; transition: opacity .15s }
.chart .bar.on rect.b-pos, .chart .bar.on rect.b-neg, .chart .bar:hover rect { opacity: 1 }
.chart .nob { fill: var(--line) }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--muted) }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px }

table.seasons { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14.5px }
.seasons th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line) }
.seasons td { padding: 9px 10px; border-bottom: 1px solid var(--line) }
.seasons tbody tr { cursor: pointer } .seasons tbody tr:hover td, .seasons tr.sel td { background: var(--raised) }
.seasons .r { text-align: right } .seasons .prod { color: var(--muted); font-size: 13.5px }

.prose { max-width: 74ch } .prose p { margin: 0 0 6px; color: var(--muted) } .prose h3 { color: var(--brand); margin-top: 6px }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 40; background: rgb(3 6 12 / .72); display: grid; place-items: center; padding: 20px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); backdrop-filter: blur(6px) }
.sheet { width: min(440px, 100%); max-height: 100%; overflow: auto; background: var(--raised); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 12px }
.sheet-head { display: flex; justify-content: space-between; align-items: center }
.x { border: 0; background: var(--surface); width: 34px; height: 34px; border-radius: 50% }
.card-img img { width: 100%; border-radius: 12px; display: block }
.card-img .loading { aspect-ratio: 4 / 5; display: grid; place-items: center }
.sheet-actions { display: flex; gap: 10px; flex-wrap: wrap }
.hint { font-size: 12.5px; color: var(--muted); margin: 0 }
.linkbox { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: 500 12px var(--mono); color: var(--muted) }

/* ---------- games ---------- */
.tabs { justify-self: start }
.duel-score { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-weight: 600; color: var(--muted) }
.duel-score b { color: var(--text); font-size: 20px }
.dots { display: flex; gap: 4px; flex-wrap: wrap } .dots i { width: 10px; height: 10px; border-radius: 3px } .dots .ok { background: var(--steal) } .dots .no { background: var(--over) }
.duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch }
.vs { align-self: center; font: 400 22px var(--display); color: var(--brand) }
.duel-card { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 20px 14px; border-radius: 18px; border: 2px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 50%, var(--surface)), var(--surface) 60%); transition: transform .15s, border-color .15s }
.duel-card:not([disabled]):hover { transform: translateY(-3px); border-color: var(--brand) }
.duel-card[disabled] { cursor: default }
.duel-card.right { border-color: var(--steal); box-shadow: 0 0 0 4px var(--steal-bg) }
.duel-card.wrong { border-color: var(--over); box-shadow: 0 0 0 4px var(--over-bg) }
.duel-name { font: 400 17px/1.1 var(--display); text-transform: uppercase; margin-top: 6px }
.duel-meta { font-size: 13px; color: var(--muted) }
.duel-line { font-size: 13.5px; min-height: 2.6em }
.duel-cap { display: grid; gap: 2px } .duel-cap b { font-size: 22px }
.duel-reveal { min-height: 64px; display: grid; justify-items: center; gap: 4px; align-content: center }
.duel-reveal small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em }
.duel-q { font: 400 34px var(--display); color: var(--muted) }
.duel-next { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap }
.ok-msg { color: var(--steal); font-weight: 700 }
.gameover { text-align: center; justify-items: center } .gameover h2 { font-size: clamp(26px, 5vw, 36px); color: var(--brand) }

.diffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.diff { display: grid; gap: 6px; text-align: left; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface) }
.diff:hover { border-color: var(--brand) }
.diff b { font: 400 22px/1 var(--display); text-transform: uppercase }
.diff span { color: var(--muted); font-size: 14px }
.diff:nth-child(1) b { color: var(--steal) } .diff:nth-child(2) b { color: var(--brand) } .diff:nth-child(3) b { color: var(--over) }
.up-next { padding: 16px 18px; border-radius: 16px; border: 2px solid var(--brand); background: linear-gradient(120deg, color-mix(in srgb, var(--tc) 50%, var(--surface)), var(--surface) 70%); display: grid; gap: 10px }
.up-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center }
.up-name { font: 400 20px/1.1 var(--display) !important; text-transform: uppercase; white-space: normal !important }
.slots { display: grid; gap: 6px }
.slot { display: grid; grid-template-columns: 34px 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 58px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-align: left }
.slot.empty { grid-template-columns: 34px 1fr; border-style: dashed; background: transparent }
.slot.empty:not([disabled]):hover { border-color: var(--brand); background: var(--surface) }
.slot-n { font: 400 16px var(--display); color: var(--muted); text-align: center }
.slot-hint { color: var(--muted); font-size: 13px }
.slot.filled > b, .slot-cap { justify-self: end; font-size: 14px }
.slot.filled { grid-template-columns: 34px 38px minmax(0, 1fr) auto auto }
.slot-true { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px }
.slot-true.ok { background: var(--steal-bg); color: var(--steal) } .slot-true.close { background: rgb(255 198 41 / .14); color: var(--brand) } .slot-true.no { background: var(--over-bg); color: var(--over) }


/* ---------- data viz: smooth lines, radar, career strip ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: stretch }
.radar-wrap { display: grid; place-items: center }
.radar { width: 100%; max-width: 380px; display: block }
.radar .rg { fill: none; stroke: var(--line) }
.radar .rg-mid { fill: none; stroke: var(--muted); stroke-dasharray: 4 4; opacity: .55 }
.radar .rd-shape { fill: var(--brand); fill-opacity: .28; stroke: var(--brand-2); stroke-width: 2.5; stroke-linejoin: round }
.radar .rd-dot { fill: var(--brand-2); stroke: var(--bg); stroke-width: 1.5 }
.radar .ax { fill: var(--muted); font: 600 11.5px var(--body); text-transform: uppercase; letter-spacing: .06em }
.radar .axv { fill: var(--text); font: 600 12px var(--mono) }
.chart .ln-worth { fill: none; stroke: var(--brand-2); stroke-width: 3 }
.chart .ln-paid { fill: none; stroke: var(--fair); stroke-width: 2; stroke-dasharray: 6 5; opacity: .75 }
.chart .dot-worth { fill: var(--brand-2); stroke: var(--bg); stroke-width: 3 }
.chart .dot-paid { fill: var(--fair); stroke: var(--bg); stroke-width: 3 }
.chart .cursor { stroke: var(--brand); stroke-opacity: .35; stroke-width: 1.5 }
.wk-line { fill: none; stroke-width: 3; stroke-linejoin: round }
.wk-line.up, .wk-pt.up, .wk-end.up { stroke: var(--steal) } .wk-line.down, .wk-pt.down, .wk-end.down { stroke: var(--over) }
.wk-pt.up, .wk-end.up { fill: var(--steal) } .wk-pt.down, .wk-end.down { fill: var(--over) }
.wk-end { stroke: var(--bg) !important; stroke-width: 3 }
.legend .lg-worth { background: var(--brand-2) } .legend .lg-paid { background: var(--fair); opacity: .75 }
.seg.mini button { padding: 5px 10px; font-size: 12px }
.seg.mini button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink) }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden }
.strip > div { background: var(--surface); padding: 12px 14px; display: grid; gap: 3px; align-content: start }
.strip small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.strip b { font-size: 16px; display: flex; align-items: center; gap: 8px }
.foot-logo { color: var(--muted); width: 120px; display: block } .foot-logo svg { width: 100%; height: auto; display: block }
.foot-logo:hover { color: var(--brand-2) }
@media (max-width: 720px) {
  .duo { grid-template-columns: 1fr }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)) } .strip > div:last-child { grid-column: 1 / -1 }
  .logo svg { height: 24px }
}

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line) }
.foot-in { max-width: 1080px; margin: 0 auto; padding-block: 24px 40px; padding-left: var(--gut-l); padding-right: var(--gut-r); color: var(--muted); font-size: 13px; display: grid; gap: 8px }
.foot-in p { margin: 0; max-width: 80ch } .foot-in b { color: var(--text) }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .spots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px }
  .spot { scroll-snap-align: start }
  .movers { grid-template-columns: 1fr }
  .row { grid-template-columns: 24px 38px minmax(0, 1fr) 76px 44px; gap: 10px; padding: 10px }
  .row .face { --s: 38px }
  .hide-s { display: none !important }
  .trow { grid-template-columns: 24px 12px minmax(0, 1fr) 86px }
  .phero-grid { grid-template-columns: auto minmax(0, 1fr) }
  .stamp { grid-column: 1 / -1; justify-self: end; margin-top: -6px; width: 112px; height: 112px } .stamp b { font-size: 34px }
  .stub { grid-template-columns: 1fr } .stub > div { border-right: 0; border-bottom: 1px dashed var(--line) } .stub > div:last-child { border-bottom: 0 }
  .ptools .btn-share { margin-left: 0 }
  .duel { grid-template-columns: 1fr 1fr; } .vs { display: none }
  .duel-card { padding: 14px 8px } .duel-card .face-xl { --s: 68px } .duel-name { font-size: 14px }
  .diffs { grid-template-columns: 1fr }
  .up-row { grid-template-columns: auto minmax(0, 1fr) } .up-row .duel-cap { grid-column: 2 }
  .slot.filled { grid-template-columns: 26px 38px minmax(0, 1fr) auto } .slot.filled .slot-true { display: none }
  .nav { width: 100% }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important } }