/* Fair Shake. Mobile first. Every color is a token: picking a team rewrites the tokens (static/js/theme.js). */
@font-face { font-family: "Archivo"; src: url(/fonts/archivo-latin.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #050b08;
  --bg-2: #08120d;
  --surface: #0d1913;
  --surface-2: #13231a;
  --line: #1f3529;
  --text: #ecf6ef;
  --muted: #9bb5a6;
  --faint: #7d988a;
  --accent: #c8f53c;
  --accent-2: #3be0a0;
  --on-accent: #0a1408;
  --glow: rgba(200, 245, 60, .22);
  /* The home page example's glow, toned down for every card and panel. Follows the team colors through --glow. */
  /* 1.5x the original glow (Daniel, 2026-11-08: doubled, then "split the difference"): two layers at 56% come to about
     1.5 times the old single layer at 70%, whatever team color --glow holds (its alpha cannot be multiplied directly). */
  --glow-box: color-mix(in srgb, var(--glow) 56%, transparent);
  --lift: 0 14px 36px rgba(0, 0, 0, .4), 0 0 42px var(--glow-box), 0 0 42px var(--glow-box);
  --glow-strong: color-mix(in srgb, var(--glow) 82%, transparent);
  --head-from: #ffffff;
  --head-to: #dff7c2;
  --good: #3be0a0; --okay: #f5c542; --bad: #ff6b6b;
  --qb: #ff5c8a; --rb: #2dd4bf; --wr: #60a5fa; --te: #fb923c; --k: #a78bfa; --def: #94a3b8; --pick: #e879f9;
  --dl: #f87171; --lb: #facc15; --db: #4ade80;
  --radius: 18px; --radius-sm: 12px;
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-h: 60px; --tabbar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden;
  background-image: radial-gradient(1200px 600px at 80% -10%, var(--glow), transparent 60%), radial-gradient(900px 500px at -10% 10%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%);
  background-repeat: no-repeat;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 10px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.wrap.narrow { max-width: 820px; }
main { display: block; padding-bottom: calc(var(--tabbar-h) + 24px); }
@media (min-width: 860px) { main { padding-bottom: 48px; } .wrap { padding: 0 28px; } }

/* Type */
h1, h2, h3, .display { font-family: var(--display); font-weight: 800; line-height: .95; letter-spacing: -.01em; margin: 0 0 .4em; }
.display, h1.display, h2.display {
  text-transform: uppercase; font-stretch: 62%; font-variation-settings: "wdth" 62;
  background: linear-gradient(180deg, var(--head-from), var(--head-to)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px var(--glow));
}
h1 { font-size: clamp(2.6rem, 9vw, 5.4rem); }
h2 { font-size: clamp(2rem, 6vw, 3.4rem); }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.prose h2, .card h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.overline { font: 700 .78rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }
p { margin: 0 0 1em; }

/* Header */
/* viewport-fit=cover (for the tab bar's home-indicator room) lets the page draw under the browser's top bar and the
   status bar on iPhone; the header pads down by the safe area so the logo and buttons stay clear (2026-11-08). */
.site-header { position: sticky; top: 0; z-index: 40; height: calc(var(--header-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 10px; }
.donate { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); font: 700 .85rem/1 var(--body); text-decoration: none; white-space: nowrap; }
.donate svg { width: 16px; height: 16px; color: var(--accent); }
.donate:hover { background: var(--accent); color: var(--on-accent); }
.donate:hover svg { color: var(--on-accent); }
/* Top-donor line under the tip button (2026-10-19, as on Droid Tycoon): hidden until site.js has a real donor, so most
   visitors see the header as before. width:0 + min-width:100% means it adds nothing to the button's width; the text
   runs to the right, under the logo, never off the left edge of the screen. */
.tip-box { display: flex; flex-direction: column; align-items: flex-start; flex: none; }
.tipnote { display: flex; justify-content: flex-start; width: 0; min-width: 100%; margin: 3px 0 0; font: 600 11px/1.2 var(--body); color: var(--muted); white-space: nowrap; transition: opacity .3s; }
.tipnote[hidden] { display: none; }
.tipnote.out { opacity: 0; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font: 800 1.35rem/1 var(--display); font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.logo-mark { width: 28px; height: 28px; flex: none; }
/* Desktop menu: a raised pill bar; the current tool takes the accent and its glow. */
.site-nav { display: none; margin-left: auto; gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 75%, transparent); box-shadow: 0 8px 26px rgba(0, 0, 0, .35); }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 650; font-size: .92rem; padding: 7px 14px; border-radius: 999px; white-space: nowrap; transition: background .12s, color .12s; }
.site-nav a:hover { color: var(--text); background: var(--surface); }
.site-nav a[aria-current="page"] { color: var(--on-accent); background: var(--accent); box-shadow: 0 4px 18px var(--glow); }
.header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 40px; height: 40px; border-radius: 999px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; padding: 0; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { border-color: var(--accent); }
.team-dot { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--accent) 0 50%, var(--accent-2) 0); border: 2px solid var(--surface-2); }
@media (max-width: 859px) {
  .site-header .logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .site-header .wrap { position: relative; }
  .logo-word { font-size: 1.25rem; }
}
/* "Buy Me a Coffee" needs about 500px beside the centered logo, so phones say "Donate" and the narrowest show the cup
   alone, with the full label kept for screen readers. Below 360px the logo also ran into the team-colors button. */
.donate .label-short { display: none; }
@media (max-width: 499px) { .donate .label { display: none; } .donate .label-short { display: inline; } .donate { padding: 0 10px; } }
@media (max-width: 359px) {
  .donate .label-short { display: none; }
  .donate .label { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header .logo-word { font-size: 1.15rem; }
  .site-header .header-actions { gap: 6px; }
  .site-header .icon-btn { width: 36px; height: 36px; }
}
/* Where the menu first appears, the logo and menu links wrapped onto two lines up to 877px; the menu tightens instead. */
@media (min-width: 860px) and (max-width: 959px) { .site-nav { gap: 0; padding: 3px; } .site-nav a { padding: 7px 9px; font-size: .88rem; } }
@media (min-width: 860px) {
  .site-nav { display: flex; }
  .header-actions { margin-left: 8px; }
  .menu-btn { display: none; }
}

/* Phone menu (a dialog): the brand on top, the four tools as cards, then the reading pages as buttons. */
.menu-dialog .sheet-head h2 .logo { font-size: 1.4rem; }
.menu-label { font: 700 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 18px 0 10px; }
.menu-sheet .menu-label:first-child { margin-top: 6px; }
.menu-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-tool { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--surface-2)), var(--bg-2)); color: var(--text); text-decoration: none; font: 800 1.2rem/1 var(--display); font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase; letter-spacing: .01em; box-shadow: var(--lift); transition: transform .12s ease, box-shadow .12s ease; }
.menu-tool:hover { transform: translateY(-2px); color: var(--text); box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 34px var(--glow); }
.menu-tool[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--accent), 0 0 34px var(--glow); }
.menu-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.menu-icon svg { width: 22px; height: 22px; }
.menu-more { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none; font-weight: 650; font-size: .95rem; }
.menu-link::after { content: "›"; font-size: 1.2rem; line-height: 1; color: var(--accent); }
.menu-link:hover, .menu-link[aria-current="page"] { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--text); }

/* Bottom tab bar: phones only, app-style */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, 1fr); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--faint); text-decoration: none; font: 600 .7rem/1 var(--body); }
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--accent); }
.tabbar a[aria-current="page"] svg { box-sizing: content-box; padding: 3px 16px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: 0 0 18px var(--glow); }
@media (min-width: 860px) { .tabbar { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 700 1rem/1 var(--body); text-decoration: none; cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s; }
.btn:hover { border-color: var(--accent); color: var(--text); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 8px 30px var(--glow); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); color: var(--on-accent); }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: .875rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Sections */
.section { padding: 56px 0; }
.section-alt { background: linear-gradient(180deg, transparent, var(--bg-2) 18%, var(--bg-2) 82%, transparent); }
@media (min-width: 860px) { .section { padding: 88px 0; } }
.hero { padding: 40px 0 24px; }
.hero h1 { max-width: 12ch; }
.hero .lede { margin: 18px 0 26px; }
.hero-grid { display: grid; gap: 36px; align-items: center; }
/* Grid children may shrink below their longest line; without this a long name pushes the page sideways. */
.hero-grid > *, .grid-2 > *, .grid-3 > *, .sides > *, .grades > * { min-width: 0; }
@media (min-width: 960px) { .hero { padding: 72px 0 40px; } .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; color: var(--muted); font-size: .9rem; }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 16px; height: 16px; color: var(--accent); }

.grid-3 { display: grid; gap: 14px; }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.grid-2 { display: grid; gap: 14px; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.step-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font: 800 1.05rem/1 var(--display); margin-bottom: 14px; }

/* Cards */
.card { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--lift); }
.card + .card { margin-top: 14px; }
.grid-3 > .card + .card, .grid-2 > .card + .card { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h2, .card-head h3 { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font: 600 .78rem/1.3 var(--body); color: var(--muted); }
.pill.accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.dev-strip { background: #ffcc00; color: #111; font: 700 .75rem/1.3 var(--body); text-align: center; padding: 6px 16px; }

/* Positions, players */
.pos { display: inline-grid; place-items: center; min-width: 38px; height: 24px; padding: 0 6px; border-radius: 6px; font: 800 .72rem/1 var(--body); letter-spacing: .04em; color: #0b0f0d; background: var(--def); }
.pos.QB { background: var(--qb); } .pos.RB { background: var(--rb); } .pos.WR { background: var(--wr); } .pos.TE { background: var(--te); }
.pos.K { background: var(--k); } .pos.DEF { background: var(--def); } .pos.PICK { background: var(--pick); }
.pos.DL { background: var(--dl); } .pos.LB { background: var(--lb); } .pos.DB { background: var(--db); } .pos.FLEX { background: linear-gradient(90deg, var(--rb), var(--wr), var(--te)); } .pos.SFLEX { background: linear-gradient(90deg, var(--qb), var(--rb), var(--wr)); }
.player { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); min-height: 52px; }
.player:last-child { border-bottom: 0; }
.player .who, .suggest .who { flex: 1; min-width: 0; }
.player .name, .suggest .name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: var(--text); text-decoration: none; }
.player a.name:hover { color: var(--accent); }
.player .meta, .suggest .meta { font-size: .8rem; color: var(--faint); }
.player .val { font: 700 .95rem/1 var(--body); font-variant-numeric: tabular-nums; color: var(--muted); }
.inj { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; font: 800 .66rem/1.5 var(--body); letter-spacing: .04em; color: #fff; background: #b45309; vertical-align: 1px; }
/* A tag with details (site.js): a bigger invisible tap area than the tag itself, and the box it opens. */
.inj[data-tip] { position: relative; cursor: help; }
.inj[data-tip]::after { content: ""; position: absolute; inset: -9px -5px; }
.inj[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inj-pop { position: fixed; z-index: 200; max-width: min(280px, calc(100vw - 16px)); padding: 8px 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); color: var(--text); font: 650 .82rem/1.35 var(--body); white-space: normal; text-transform: none; letter-spacing: 0; }
.inj-pop div:first-child { font-weight: 750; }
.inj-pop div + div { margin-top: 2px; color: var(--muted); font-weight: 600; }
.inj.Out, .inj.IR, .inj.PUP, .inj.Sus, .inj.DNR { background: #b91c1c; }
.inj.Questionable { background: #a16207; }
.remove { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; flex: none; }
.remove:hover { color: var(--bad); border-color: var(--bad); }
.remove svg { width: 16px; height: 16px; }
.lock { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; flex: none; }
.lock[aria-pressed="true"] { color: var(--on-accent); background: var(--okay); border-color: var(--okay); }
.lock svg { width: 16px; height: 16px; }

/* Search */
.search { position: relative; }
.search input { width: 100%; height: 52px; padding: 0 16px 0 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); font-size: 16px; }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.search > svg { position: absolute; left: 15px; top: 16px; width: 20px; height: 20px; color: var(--faint); pointer-events: none; }
.suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.55); max-height: min(60vh, 420px); max-height: min(60dvh, 420px); overflow: auto; overscroll-behavior: contain; }
.suggest[hidden] { display: none; }
.suggest [role="option"] { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; }
.suggest [role="option"][aria-selected="true"], .suggest [role="option"]:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.suggest mark { background: none; color: var(--accent); font-weight: 800; }
.suggest .empty { padding: 12px; color: var(--faint); font-size: .9rem; }

/* Forms */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-weight: 650; font-size: .9rem; margin-bottom: 6px; }
.input, select.input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); font-size: 16px; }
.input:focus { outline: none; border-color: var(--accent); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-weight: 650; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Quiz */
.quiz-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 4px 0 22px; }
.quiz-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .25s ease; }
.quiz-q { font: 800 clamp(1.6rem, 6vw, 2.2rem)/1 var(--display); font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase; margin: 0 0 8px; }
.quiz-help { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.choices { display: grid; gap: 10px; }
.choices.cols-2 { grid-template-columns: 1fr 1fr; }
.choices.cols-3 { grid-template-columns: repeat(3, 1fr); }
.choice { text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; min-height: 56px; }
.choice strong { display: block; font-size: 1rem; }
.choice small { display: block; color: var(--faint); margin-top: 2px; font-size: .82rem; }
.choice:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.choice[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); box-shadow: inset 0 0 0 1px var(--accent); }
.choices.cols-3 .choice, .choices.cols-2 .choice.center { text-align: center; }
.stepper { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.stepper .ctrl { display: flex; align-items: center; gap: 12px; }
.stepper button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.stepper output { min-width: 22px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.quiz-nav { display: flex; gap: 10px; margin-top: 22px; }
.quiz-nav .btn { flex: 1; }
.review-list { display: grid; gap: 2px; }
.review-list button { display: flex; justify-content: space-between; gap: 10px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 2px; cursor: pointer; }
.review-list button span:last-child { color: var(--accent); font-weight: 650; text-align: right; }
.quiz-alt { margin-top: 18px; }
.league-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.league-head .overline { margin: 0; }
/* A league's teams, on the import and shared-link screens */
.team-list { list-style: none; margin: 6px 0 12px; padding: 0; }
.team-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.team-list li span:last-child { color: var(--muted); white-space: nowrap; }
.team-list li.mine span:first-child { color: var(--accent); font-weight: 700; }
/* Keeper round picker in the roster editor */
.keep-round { flex: none; height: 32px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-size: .8rem; }

/* Dialogs: bottom sheet on phones, centered card on desktop */
/* 92dvh, not 92vh: on iPhone vh is the height with the browser bars hidden, so with the address bar at the top the
   sheet's title and close button sat under it (2026-11-08). The safe-area cap keeps it below the status bar too. */
dialog.sheet { width: 100%; max-width: 560px; max-height: 92vh; max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top) - 12px)); margin: auto auto 0; padding: 0; border: 1px solid var(--line); border-radius: 22px 22px 0 0; background: var(--surface); color: var(--text); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 70px var(--glow-strong), 0 0 70px var(--glow-strong); }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); }
dialog.sheet[open] { display: flex; flex-direction: column; animation: up .22s ease; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 6px 20px; }
.sheet-head h2 { font-size: 1.15rem; margin: 0; font-family: var(--body); font-weight: 750; letter-spacing: 0; }
.sheet-body { padding: 8px 20px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (min-width: 640px) { dialog.sheet { margin: auto; border-radius: 22px; } }
@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } * { transition: none !important; } }

/* Team picker: no border (the two-color fill used to repeat into it and draw a line on two edges); the tiles sit
   above the sheet on a shadow instead. */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 2px; }
@media (min-width: 520px) { .team-grid { grid-template-columns: repeat(6, 1fr); } }
.team-swatch { aspect-ratio: 1; border-radius: 16px; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; font: 800 .82rem/1 var(--body); letter-spacing: .03em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 2px 5px rgba(0, 0, 0, .4); transition: transform .12s ease, box-shadow .12s ease; }
.team-swatch:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0, 0, 0, .6), 0 0 22px var(--glow); }
.team-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent), 0 12px 26px rgba(0, 0, 0, .55); }
.team-group { font: 700 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 22px 0 12px; }

/* Tool layout */
.tool-head { padding: 28px 0 8px; }
/* Room for the tool before its script draws it, so the questions below do not jump when it loads. */
#app { min-height: 85vh; }
.tool-head h1 { font-size: clamp(2.3rem, 8vw, 4rem); max-width: none; }
.step-card { margin-top: 16px; }
.step-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 750 1.05rem/1.2 var(--body); }
.step-title .n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font: 800 .85rem/1 var(--body); }
.preset-list { display: grid; gap: 10px; }
.preset { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; text-align: left; width: 100%; }
.preset[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg-2)); }
.preset .grow { flex: 1; min-width: 0; }
.preset strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset small { color: var(--faint); font-size: .8rem; }
.preset .check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; }
.preset[aria-pressed="true"] .check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.preset .check svg { width: 14px; height: 14px; }
.empty-state { text-align: center; padding: 26px 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; }
.roster-group h4 { margin: 14px 0 2px; font: 700 .75rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
details.options summary { cursor: pointer; font-weight: 700; padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
details.options summary::-webkit-details-marker { display: none; }
details.options summary::before { content: "+"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
details.options[open] summary::before { content: "–"; }
.opt-row { margin-top: 14px; }
.opt-row > span { display: block; font-size: .85rem; font-weight: 650; color: var(--muted); margin-bottom: 8px; }
.sticky-cta { position: sticky; bottom: calc(var(--tabbar-h) + 10px); z-index: 20; margin-top: 18px; }
@media (min-width: 860px) { .sticky-cta { bottom: 16px; } }
.progress-line { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 12px 0; }
.progress-line span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* Results */
.partner { margin-top: 26px; }
.partner-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; }
.partner-head h3 { margin: 0; font-size: 1.3rem; }
/* A trade card lays itself out by its own width (container queries), so it works full width and inside the home page mockup. */
.trade { container-type: inline-size; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--lift); }
/* The trade that helps you most: marked, outlined in the accent, and glowing like the home page example. */
.trade.best { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 64px var(--glow-strong), 0 0 64px var(--glow-strong); }
.best-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 800 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 22px var(--glow); }
.best-badge svg { width: 14px; height: 14px; }
.trade-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 10px; margin-bottom: 10px; }
.trade-top .pill { white-space: nowrap; }
.tv { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-left: auto; }
.tv-label { font: 700 .62rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
/* Market totals, and under them the points totals (copy review 4): label beside pill, lined up on the right. */
.tvs { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.tvs .tv { margin-left: 0; }
.tvs.two .tv { flex-direction: row; align-items: center; gap: 8px; }
.verdict { font: 750 .95rem/1.2 var(--body); }
.sides { display: grid; gap: 10px; }
@container (min-width: 560px) { .sides { grid-template-columns: 1fr auto 1fr; align-items: start; } }
.side { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 6px 12px; }
.side-label { font: 700 .72rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 8px 0 2px; }
.swap { display: grid; place-items: center; width: 34px; height: 34px; margin: auto; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent); }
.swap svg { width: 18px; height: 18px; }
.swap { margin: -4px auto; position: relative; z-index: 1; }
@container (min-width: 560px) { .swap { margin: auto; } .swap svg { transform: rotate(-90deg); } }
.grades { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.grade-box { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.grade-box .grade { grid-row: 1 / 3; }
.grade-box .sub { grid-column: 2; }
.grade { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; font: 900 1.55rem/1 var(--display); font-stretch: 75%; font-variation-settings: "wdth" 75; color: #07110b; }
.grade.a { background: var(--good); } .grade.b { background: #a3e635; } .grade.c { background: var(--okay); } .grade.d, .grade.f { background: var(--bad); color: #fff; }
.grade-box .who { font: 700 .78rem/1.2 var(--body); color: var(--muted); }
.grade-box .num { font: 700 .82rem/1.35 var(--body); color: var(--faint); }
.grade-box .sub { font: 600 .78rem/1.35 var(--body); color: var(--faint); }
@container (max-width: 420px) {
  .grade { width: 44px; height: 44px; font-size: 1.3rem; border-radius: 12px; } .grade-box { column-gap: 10px; padding: 10px; }
  /* Narrow boxes: "Team Improvement" runs under the grade, across the whole box, instead of breaking word by word. */
  .grade-box .grade { grid-row: 1; } .grade-box .sub { grid-column: 1 / -1; margin-top: 8px; }
  /* The value label and totals get their own line under the verdict, read left to right. */
  .tv { flex-basis: 100%; flex-direction: row; align-items: center; gap: 8px; margin-left: 0; }
  .tvs { flex-basis: 100%; align-items: stretch; margin-left: 0; }
  .tvs .tv { flex-basis: auto; }
}
.meter { margin-top: 12px; }
.meter-bar { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--bad), var(--okay) 30%, var(--good) 50%, var(--okay) 70%, var(--bad)); opacity: .9; }
.meter-bar i { position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 3px var(--bg); transform: translateX(-2px); }
.meter-legend { display: flex; justify-content: space-between; font-size: .75rem; color: var(--faint); margin-top: 6px; }
.why { margin: 12px 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--muted); }
.why li { padding-left: 18px; position: relative; margin: 4px 0; }
.why li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.trade-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.no-trade { border: 1px solid color-mix(in srgb, var(--bad) 50%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--surface)); border-radius: var(--radius); padding: 18px; }
.no-trade h4 { margin: 0 0 6px; font-size: 1.05rem; }
.summary-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.summary-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); }
.summary-table td:last-child { text-align: right; }

/* Values table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--lift); }
table.values { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.values th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font: 700 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 12px 10px; white-space: nowrap; }
table.values td { padding: 10px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); white-space: nowrap; }
table.values td.num, table.values th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.values a { color: var(--text); text-decoration: none; font-weight: 650; }
table.values a:hover { color: var(--accent); }
.trend-up { color: var(--good); } .trend-down { color: var(--bad); }
@media (max-width: 600px) { table.values .hide-sm { display: none; } }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin: 18px 0; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-weight: 650; font-size: .9rem; background: var(--surface); }
.tabs a[aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Player page */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: var(--lift); }
.stat b { display: block; font: 800 1.6rem/1.1 var(--display); font-stretch: 75%; font-variation-settings: "wdth" 75; }
.stat span { font-size: .8rem; color: var(--faint); }
/* A note under a row of stat tiles gets the same gap the text above the tiles has (Daniel, 2026-11-08). */
.stat-grid + p { margin-top: 16px; }
.answer { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 0 0 24px; font-size: 1.08rem; }

/* Prose */
.prose { max-width: 72ch; }
/* Pages whose text runs the full width of their tables (buy low, sell high; Daniel, 2026-11-08). */
.wide-text .prose, .wide-text .lede { max-width: none; }
.prose h2 { margin-top: 1.8em; font-family: var(--display); }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .35em 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0 1.5em; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.prose th { background: var(--surface-2); }
.prose code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.breadcrumbs { font-size: .85rem; color: var(--faint); margin: 18px 0 0; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.updated { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.updated::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 25%, transparent); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font-weight: 700; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.5rem; color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 16px; color: var(--muted); }

/* Phone mockup on the home page */
.mock { position: relative; width: 100%; max-width: 380px; margin: 0 auto; border-radius: 34px; padding: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, var(--surface-2)), var(--surface)); box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 80px var(--glow); }
.mock-screen { border-radius: 24px; background: var(--bg); padding: 16px 14px; border: 1px solid var(--line); }
.mock .trade { margin: 0; }
@media (min-width: 600px) { .mock .trade { box-shadow: none; } }   /* the frame glows instead */
/* On a phone the page already is the phone: drop the frame and give the card the full width. */
@media (max-width: 599px) { .mock { padding: 0; background: none; box-shadow: none; border-radius: 0; max-width: none; } .mock-screen { padding: 0; border: 0; background: none; } }

/* Injury news list */
.news li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.news { list-style: none; margin: 0; padding: 0; }
.news a { color: var(--text); text-decoration: none; font-weight: 650; }
.news a:hover { color: var(--accent); }

/* Ads: reserved, off until site.config.json turns them on */
.ad-slot { display: none; }
.ads-on .ad-slot { display: block; min-height: 100px; margin: 24px 0; border: 1px dashed var(--line); border-radius: 12px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 calc(var(--tabbar-h) + 40px); color: var(--muted); font-size: .9rem; background: var(--bg-2); }
@media (min-width: 860px) { .site-footer { padding-bottom: 40px; } }
.footer-grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid h2 { font: 700 .75rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin: 8px 0; }
.footer-grid a { color: var(--muted); text-decoration: none; }
.footer-grid a:hover { color: var(--accent); }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 860px) { .footer-brand { grid-column: auto; } }
.fine { margin-top: 28px; font-size: .78rem; color: var(--faint); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 18px); transform: translateX(-50%); z-index: 60; background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: calc(100% - 32px); }
@media (min-width: 860px) { .toast { bottom: 24px; } }

/* Screenshot import */
.ocr-drop { display: grid; place-items: center; text-align: center; gap: 6px; padding: 22px; border: 2px dashed var(--line); border-radius: 16px; color: var(--muted); cursor: pointer; }
.ocr-drop:hover, .ocr-drop.over { border-color: var(--accent); color: var(--text); }
.ocr-drop svg { width: 28px; height: 28px; color: var(--accent); }
.reassure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font: 650 .9rem/1.3 var(--body); color: var(--text); }
.reassure svg { width: 16px; height: 16px; color: var(--accent); }
/* Roster editor: the note after a screenshot import, and Done kept in reach at the foot of the sheet on a phone */
.saved-note { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good) 10%, transparent); }
.saved-note p { margin: 0; font-size: .9rem; }
.saved-note p + p { margin-top: 6px; }
.roster-done { position: sticky; bottom: -24px; margin: 18px -20px -24px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); z-index: 2; }
.player .conf { flex: none; margin-left: 6px; }
/* Trade Finder: players every trade must include */
.pin-list { display: grid; gap: 2px; margin-top: 10px; }
.ocr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ocr-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.ocr-row .who { flex: 1; min-width: 0; }
.ocr-row .raw { font-size: .75rem; color: var(--faint); }
.conf { font: 700 .7rem/1 var(--body); padding: 3px 6px; border-radius: 6px; }
.conf.hi { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
.conf.lo { background: color-mix(in srgb, var(--okay) 22%, transparent); color: var(--okay); }

/* ================================================================================================================
   Motion (Daniel, 2026-11-09: "add animations to every button and hover. add an animation with the logo to open the
   site"). Kept in one block so it can be tuned or taken out whole. Lifts and slides only happen where a mouse can
   hover (a phone would leave them stuck on after a tap); presses work everywhere. Reduced motion turns all of it off.
   ================================================================================================================ */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-in: cubic-bezier(.7, 0, .84, 0); --t-fast: .16s; --t: .3s; }

@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes icon-pop { 0%, 100% { transform: none; } 40% { transform: scale(1.2) rotate(-8deg); } 70% { transform: scale(.95) rotate(3deg); } }
@keyframes cup-tip { 0%, 100% { transform: none; } 30% { transform: rotate(-16deg) translateY(-1px); } 60% { transform: rotate(9deg); } 80% { transform: rotate(-3deg); } }
@keyframes sheen { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(130%) skewX(-18deg); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 var(--glow); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes shake { 0%, 100% { rotate: 0deg; } 20% { rotate: -10deg; } 45% { rotate: 8deg; } 68% { rotate: -4deg; } 85% { rotate: 2deg; } }

/* Links: every color change fades instead of snapping (footer, breadcrumbs, injury news, player names, tables). */
a { transition: color var(--t-fast) ease, text-decoration-color var(--t-fast) ease; }
.link-btn { transition: color var(--t-fast) ease, text-underline-offset var(--t) var(--ease-out); }
.link-btn:hover { color: var(--text); text-underline-offset: 5px; }

/* Logo: the two arrows slide past each other (a trade) and the tile gives a shake. */
.logo-mark .lm-top, .logo-mark .lm-bot { transition: transform var(--t) var(--ease-spring); }
.logo-word { transition: text-shadow var(--t) ease; }
@media (hover: hover) {
  .logo:hover .logo-mark { animation: shake .5s ease-in-out; }
  .logo:hover .lm-top { transform: translateX(2px); }
  .logo:hover .lm-bot { transform: translateX(-2px); }
  .logo:hover .logo-word { text-shadow: 0 0 18px var(--glow); }
}

/* Buttons: lift and glow on hover, a sheen across the main button, the icon pops, a press squeezes. */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform var(--t) var(--ease-spring), background var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t) var(--ease-out), color var(--t-fast) ease; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, .42) 50%, transparent 70%); transform: translateX(-130%) skewX(-18deg); }
@media (hover: hover) {
  .btn:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 0 22px var(--glow); }
  .btn-primary:hover:not([disabled]) { box-shadow: 0 14px 38px var(--glow), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
  .btn-primary:hover:not([disabled])::after { animation: sheen .7s var(--ease-out); }
  .btn:hover:not([disabled]) svg { animation: icon-pop .5s var(--ease-out); }
  .btn-ghost:hover:not([disabled]) { background: color-mix(in srgb, var(--accent) 8%, transparent); }
}
.btn:active:not([disabled]) { transform: scale(.96); transition-duration: .08s; }

/* Tip button: the cup tips. */
.donate { transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out); }
.donate svg { transition: color var(--t-fast) ease; }
@media (hover: hover) {
  .donate:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--glow); }
  .donate:hover svg { animation: cup-tip .6s var(--ease-out); }
}
.donate:active { transform: scale(.94); transition-duration: .08s; }

/* Desktop menu: the hover pill grows out from the middle of the word. */
.site-nav a { position: relative; z-index: 0; transition: color var(--t-fast) ease, background var(--t-fast) ease, transform var(--t) var(--ease-spring); }
.site-nav a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface); opacity: 0; transform: scale(.6); transition: opacity var(--t-fast) ease, transform var(--t) var(--ease-spring); }
.site-nav a:not([aria-current="page"]):hover { background: transparent; }
.site-nav a:not([aria-current="page"]):hover::before { opacity: 1; transform: none; }
.site-nav a:active { transform: scale(.95); }

/* Round icon buttons: team colors spins the two-color dot, the menu icon pops. */
.icon-btn { transition: border-color var(--t-fast) ease, transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out); }
.team-dot { transition: transform .55s var(--ease-spring); }
@media (hover: hover) {
  .icon-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .35), 0 0 18px var(--glow); }
  .icon-btn:hover .team-dot { transform: rotate(180deg) scale(1.12); }
  .menu-btn:hover svg { animation: icon-pop .5s var(--ease-out); }
}
.icon-btn:active { transform: scale(.9); transition-duration: .08s; }

/* Phone tab bar: the icon squeezes under a thumb; the current tab's pill pops in on each page. */
.tabbar a { transition: color var(--t-fast) ease; }
.tabbar a svg { transition: transform var(--t) var(--ease-spring); }
.tabbar a:active svg { transform: scale(.82); transition-duration: .08s; }
.tabbar a[aria-current="page"] svg { animation: pop .45s var(--ease-spring); }

/* Phone menu: the tool cards rise in one after another; icons and arrows move on hover. */
.menu-dialog[open] .menu-tool { animation: fade-up .38s var(--ease-out) both; }
.menu-dialog[open] .menu-tool:nth-child(2) { animation-delay: .04s; }
.menu-dialog[open] .menu-tool:nth-child(3) { animation-delay: .08s; }
.menu-dialog[open] .menu-tool:nth-child(4) { animation-delay: .12s; }
.menu-tool { transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out); }
.menu-icon { transition: transform var(--t) var(--ease-spring); }
.menu-tool:active { transform: scale(.97); transition-duration: .08s; }
.menu-link { transition: background var(--t-fast) ease, transform var(--t) var(--ease-spring); }
.menu-link::after { transition: transform var(--t) var(--ease-spring); }
.menu-link:active { transform: scale(.97); transition-duration: .08s; }
@media (hover: hover) {
  .menu-tool:hover .menu-icon { transform: scale(1.1) rotate(-6deg); }
  .menu-link:hover::after { transform: translateX(4px); }
}

/* Small round controls on player rows: remove turns its x; the keeper lock snaps shut when set. */
.remove, .lock { transition: color var(--t-fast) ease, border-color var(--t-fast) ease, background var(--t-fast) ease, transform var(--t) var(--ease-spring); }
@media (hover: hover) {
  .remove:hover { transform: rotate(90deg); background: color-mix(in srgb, var(--bad) 12%, transparent); }
  .lock:hover:not([aria-pressed="true"]) { color: var(--okay); border-color: var(--okay); transform: translateY(-1px); }
}
.remove:active, .lock:active { transform: scale(.88); transition-duration: .08s; }
.lock[aria-pressed="true"] { animation: pop .35s var(--ease-spring); }

/* Choice buttons (quiz answers, league presets, format toggles, steppers, team swatches): lift on hover, pop when picked. */
.seg button, .choice, .preset, .stepper button { transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t) var(--ease-out), transform var(--t) var(--ease-spring); }
.team-swatch { transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out); }
.preset .check { transition: background var(--t-fast) ease, border-color var(--t-fast) ease; }
@media (hover: hover) {
  .seg button:hover:not([aria-pressed="true"]) { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }
  .choice:hover, .preset:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .3), 0 0 18px var(--glow); }
  .preset:hover:not([aria-pressed="true"]) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .stepper button:hover { border-color: var(--accent); color: var(--accent); }
  .team-swatch:hover { transform: translateY(-3px) scale(1.05); }
}
.seg button:active, .choice:active, .preset:active { transform: scale(.97); transition-duration: .08s; }
.stepper button:active, .team-swatch:active { transform: scale(.9); transition-duration: .08s; }
.seg button[aria-pressed="true"], .choice[aria-pressed="true"], .team-swatch[aria-pressed="true"] { animation: pop .35s var(--ease-spring); }
.preset[aria-pressed="true"] .check { animation: icon-pop .4s var(--ease-spring); }

/* Quiz review list: the row tints and its answer slides a touch. */
.review-list button { border-radius: 8px; transition: background var(--t-fast) ease; }
.review-list button span:last-child { transition: transform var(--t) var(--ease-spring); }
@media (hover: hover) {
  .review-list button:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .review-list button:hover span:last-child { transform: translateX(-4px); }
}

/* Format tabs on the value charts. */
.tabs a { transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t) var(--ease-spring); }
@media (hover: hover) { .tabs a:not([aria-current="page"]):hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); } }
.tabs a:active { transform: scale(.95); }

/* Search suggestions drop in; rows highlight softly. Table rows light up under the mouse. */
.suggest:not([hidden]) { animation: drop-in .18s var(--ease-out); }
.suggest [role="option"] { transition: background .12s ease; }
table.values tbody tr { transition: background var(--t-fast) ease; }
@media (hover: hover) { table.values tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } }

/* Footer links slide right a touch. */
.footer-grid li a { display: inline-block; transition: color var(--t-fast) ease, transform var(--t) var(--ease-spring); }
@media (hover: hover) { .footer-grid li a:hover { transform: translateX(3px); } }

/* Injury tags grow a little under the mouse. */
.inj[data-tip] { transition: transform var(--t-fast) var(--ease-spring), filter var(--t-fast) ease; }
@media (hover: hover) { .inj[data-tip]:hover { transform: scale(1.08); filter: brightness(1.15); } }

/* FAQ and "more options": the +/- turns as it flips and the answer fades up. */
.faq summary { transition: color var(--t-fast) ease; }
.faq summary:hover { color: var(--accent); }
.faq summary::after, details.options summary::before { transition: transform var(--t) var(--ease-spring); }
.faq details[open] summary::after, details.options[open] summary::before { transform: rotate(180deg); }
.faq details[open] > div, details.options[open] > :not(summary) { animation: fade-up .32s var(--ease-out); }

/* Screenshot drop zone: tints and lifts its icon; pulses while a file is dragged over. */
.ocr-drop { transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background var(--t-fast) ease; }
.ocr-drop svg { transition: transform var(--t) var(--ease-spring); }
.ocr-drop:hover, .ocr-drop.over { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ocr-drop:hover svg, .ocr-drop.over svg { transform: translateY(-3px); }
.ocr-drop.over { animation: ring 1s var(--ease-out) infinite; }

/* Opening animation: the tile springs in, the two arrows draw one after the other, the name rises, the mark gives a
   shake (the handshake in the name), then the curtain fades. About 1.9 seconds, first page of a visit only; a tap or
   a key skips it (site.js). Follows the visitor's team colors like everything else. */
.intro-splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; cursor: pointer; background: radial-gradient(640px 420px at 50% 46%, var(--glow), transparent 70%), var(--bg); animation: intro-out .45s var(--ease-in) 1.45s forwards; }
.intro-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; animation: intro-zoom .45s var(--ease-in) 1.45s forwards; }
.intro-mark { width: clamp(84px, 24vw, 120px); height: auto; overflow: visible; filter: drop-shadow(0 0 40px var(--glow)); animation: shake .5s ease-in-out .9s; }
.intro-mark .lm-tile { transform-box: fill-box; transform-origin: center; animation: tile-in .6s var(--ease-spring) both; }
.intro-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: draw .38s var(--ease-out) forwards; }
.intro-mark .lm-top { animation-delay: .3s; }
.intro-mark .lm-bot { animation-delay: .48s; }
.intro-word { display: flex; gap: .26em; color: var(--text); font: 800 clamp(2.4rem, 11vw, 3.8rem)/1 var(--display); font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase; letter-spacing: .01em; }
.intro-word > span { display: block; overflow: hidden; padding: .04em 0 .08em; }
.intro-word > span > span { display: block; transform: translateY(110%); animation: word-up .55s var(--ease-out) forwards; animation-delay: calc(.5s + var(--i) * .1s); }
html.intro-skip .intro-splash { animation: intro-skip .2s ease forwards; }
@keyframes tile-in { from { transform: scale(.3) rotate(-24deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes draw { 0% { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes word-up { to { transform: none; } }
@keyframes intro-zoom { to { transform: scale(.92); opacity: 0; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@keyframes intro-skip { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .intro-splash { display: none !important; }
}