/* Diamonds Are Forever: retro text-sim look. Colors are the variables below. */

:root {
  --paper: #f6f3ea;
  --panel: #fffdf7;
  --ink: #1d1d1b;
  --muted: #6b675d;
  --rule: #cfc8b6;
  --accent: #8c1c13;      /* scorebook red */
  --accent-ink: #ffffff;
  --field: #2f5d3a;       /* infield green for the diamond */
  --runner: #d4a017;
  --good: #2f6b3a;
  --mono: Consolas, "SFMono-Regular", Menlo, "Liberation Mono", "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f141b;
    --panel: #171d26;
    --ink: #e8e4d8;
    --muted: #9a9686;
    --rule: #2d3644;
    --accent: #ef6f60;
    --accent-ink: #0f141b;
    --field: #3f7a4d;
    --runner: #f0c040;
    --good: #7bc98a;
  }
}
:root[data-theme="dark"] {
  --paper: #0f141b; --panel: #171d26; --ink: #e8e4d8; --muted: #9a9686; --rule: #2d3644;
  --accent: #ef6f60; --accent-ink: #0f141b; --field: #3f7a4d; --runner: #f0c040; --good: #7bc98a;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.45 var(--mono);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 16px; }
a { color: var(--accent); }

.footer { color: var(--muted); font-size: 12px; padding: 12px 16px; border-top: 1px solid var(--rule); }
.loading { color: var(--muted); }

h1, h2, h3 { font-weight: bold; margin: 0 0 8px; }
h1 { font-size: 20px; }
h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
h3 { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 12px;
  margin-bottom: 16px;
}

button, select, input {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--ink);
  padding: 6px 10px;
  border-radius: 0;
}
button { cursor: pointer; }
button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: bold; }
button.primary:hover:not(:disabled) { filter: brightness(1.1); background: var(--accent); color: var(--accent-ink); }
button.small { padding: 2px 6px; font-size: 12px; }
select { max-width: 100%; }
input[type="text"], input[type="number"] { width: 8em; }
label { cursor: pointer; }

.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.grid2 > * { min-width: 0; }
.chooser select.wide { width: 100%; }
.chooser .row select.wide { width: auto; flex: 1; min-width: 0; }
.stack > * + * { margin-top: 8px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }

/* Home: mode cards */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .modes { grid-template-columns: 1fr; } }
.mode { display: flex; flex-direction: column; gap: 8px; }
.mode .what { flex: 1; }
.mode.soon { opacity: 0.6; }
.badge { display: inline-block; font-size: 11px; border: 1px solid var(--muted); color: var(--muted); padding: 0 6px; }

/* Tables */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { font-size: 12px; color: var(--muted); font-weight: normal; text-transform: uppercase; }
td.num, th.num { text-align: right; }
.table-wrap { overflow-x: auto; }

/* Scoreboard */
.scoreboard td, .scoreboard th { text-align: center; padding: 2px 5px; }
.scoreboard td:first-child, .scoreboard th:first-child { text-align: left; }
.scoreboard .rhe { font-weight: bold; }
.scoreboard .batting td:first-child::before { content: "\25B6  "; color: var(--accent); }

/* Field: diamond, outs, inning */
.field { display: flex; gap: 16px; align-items: center; }
.diamond { position: relative; width: 110px; height: 110px; flex: none; }
.diamond .base {
  position: absolute; width: 26px; height: 26px; transform: rotate(45deg);
  border: 2px solid var(--field); background: var(--panel);
}
.diamond .base.on { background: var(--runner); border-color: var(--runner); }
.diamond .b1 { right: 6px; top: 42px; }
.diamond .b2 { left: 42px; top: 6px; }
.diamond .b3 { left: 6px; top: 42px; }
.diamond .home { left: 46px; bottom: 6px; width: 18px; height: 18px; background: var(--field); }
.outs .dot { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; margin-right: 4px; }
.outs .dot.on { background: var(--ink); }
.runners { font-size: 13px; }

.matchup .vs { color: var(--muted); }
.player-line { font-size: 13px; color: var(--muted); }
.tired { color: var(--accent); font-weight: bold; }

/* Play-by-play */
.log { height: 340px; overflow-y: auto; font-size: 14px; }
.log .half { margin-top: 10px; font-weight: bold; color: var(--accent); }
.log .play { padding-left: 12px; }
.log .scored { font-weight: bold; }
.final-banner { font-size: 18px; font-weight: bold; }

pre.box { margin: 0; font-family: var(--mono); font-size: 13px; overflow-x: auto; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.controls .group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-right: 8px; border-right: 1px solid var(--rule); }
.controls .group:last-child { border-right: none; }
.controls .group { min-width: 0; max-width: 100%; }
.controls select { min-width: 0; max-width: 100%; width: 22em; }
.who { font-size: 12px; color: var(--muted); text-transform: uppercase; }

.lineup td .pos { font-weight: bold; }
.selected { outline: 2px solid var(--accent); }

/* Ballparks */
:root { --dirt: #b98a58; --wall: #1d1d1b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dirt: #8a6a45; --wall: #e8e4d8; } }
:root[data-theme="dark"] { --dirt: #8a6a45; --wall: #e8e4d8; }
.park-svg { display: block; max-width: 100%; height: auto; }
.park-grass { fill: var(--field); opacity: 0.85; }
.park-dirt { fill: var(--dirt); }
.park-infield { fill: var(--field); }
.park-base { fill: #fff; }
.park-line { stroke: #fff; stroke-width: 1.2; fill: none; }
.park-wall { stroke: var(--wall); stroke-width: 3; fill: none; stroke-linejoin: round; }
.park-label { font: bold 12px var(--mono); fill: var(--ink); }
.park-label.est { fill: var(--muted); font-weight: normal; }
.park-wall-label { font: 10px var(--mono); fill: var(--accent); }

.park-thumb { display: flex; gap: 10px; align-items: center; text-align: left; width: 100%;
  background: var(--paper); border: 1px solid var(--rule); padding: 6px; }
.park-thumb:hover:not(:disabled) { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.park-thumb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.link { color: var(--accent); text-decoration: underline; }

.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex;
  align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; z-index: 10; }
.modal-box { background: var(--panel); color: var(--ink); border: 2px solid var(--ink);
  max-width: 820px; width: 100%; padding: 16px; position: relative; }
.modal-close { position: absolute; top: 10px; right: 10px; }
.park-card-head { padding-right: 70px; }
.park-card-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-top: 8px; }
@media (max-width: 720px) { .park-card-body { grid-template-columns: 1fr; } .park-diagram { max-width: 300px; margin: 0 auto; } }
table.facts th { width: 9em; text-transform: none; font-size: 13px; vertical-align: top; }
table.facts td { white-space: normal; font-size: 13px; }

/* Broadcast */
.log-tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.log-tabs .tab { font-size: 13px; padding: 4px 10px; }
.log-tabs .tab.on { background: var(--ink); color: var(--paper); }
.log .cast { padding: 2px 0 2px 12px; }
.log .cast.open, .log .cast.close { padding-left: 0; font-style: italic; }
.log .cast.header { margin-top: 10px; padding-left: 0; font-weight: bold; color: var(--accent); }
.log .cast.score { font-weight: bold; }
.log .cast.summary { color: var(--muted); }

/* Player cards */
.pc-box { max-width: 780px; padding: 0; overflow: hidden; }
.pc-box .modal-close { z-index: 2; background: var(--panel); }
.player-card { font-size: 14px; }
.pc-head { display: flex; gap: 16px; align-items: center; padding: 18px 20px; color: var(--accent-ink);
  background: linear-gradient(120deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000) 100%);
  border-bottom: 3px solid var(--ink); }
.avatar { flex: none; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent-ink) 30%, transparent) 0 34%, transparent 35%),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent-ink) 30%, transparent) 0 55%, transparent 56%),
    color-mix(in srgb, var(--accent) 60%, #000);
  border: 3px solid var(--accent-ink); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.avatar span { font: bold 26px var(--mono); letter-spacing: 1px; color: var(--accent-ink); opacity: 0.9; }
.pc-title { min-width: 0; padding-right: 60px; }
.pc-team { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.9; }
.pc-name { font-size: 26px; letter-spacing: 1px; text-transform: uppercase; margin: 2px 0 4px; line-height: 1.1; }
.pc-bio { font-size: 12px; opacity: 0.92; }
.pc-body { padding: 14px 20px 20px; }
.pc-body h3 { margin-top: 14px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.badges span { font-size: 12px; padding: 2px 8px; border: 1px solid var(--ink); border-radius: 999px; }
.badge-hof { background: #c9a227; color: #1d1d1b; border-color: #8a6d0f !important; font-weight: bold; }
.badge-honor { background: var(--ink); color: var(--paper); }
.badge-career { border-style: dashed !important; color: var(--muted); }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); border: 1px solid var(--rule);
  background: var(--paper); }
.stat { padding: 8px 4px; text-align: center; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: none; }
.stat-value { font-size: 20px; font-weight: bold; }
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.pc-project, .pc-today { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--paper); }
.pc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 720px) { .pc-cols { grid-template-columns: 1fr; } .pc-name { font-size: 21px; } .avatar { width: 64px; height: 64px; } }
.grades { display: grid; gap: 6px; }
.grade-row { display: grid; grid-template-columns: 9.5em 1fr 7.4em; gap: 8px; align-items: center; }
.grade-label { font-size: 13px; }
.grade-bar { position: relative; height: 10px; background: var(--paper); border: 1px solid var(--rule); }
.grade-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--field); }
.grade-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink); opacity: 0.5; }
.grade-num { text-align: right; font-weight: bold; }
.grade-text { grid-column: span 2; color: var(--muted); }
.def-table td.strong { font-weight: bold; }
.career { max-height: 220px; overflow: auto; border: 1px solid var(--rule); }
.career table th { position: sticky; top: 0; background: var(--panel); }
.career tr.this-year td { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: bold; }
a.plink { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
a.plink:hover { color: var(--accent); }

/* Box score */
.box-wrap .grid2 { margin-bottom: 12px; }
.box-table td.sub { padding-left: 18px; }
.box-table tr.total td { font-weight: bold; border-top: 2px solid var(--ink); }
.box-table th:first-child { text-transform: none; font-weight: bold; color: var(--ink); }
.box-notes { margin-top: 6px; }

/* Player photos */
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  opacity: 0; transition: opacity 0.2s; }
.avatar.has-photo img { opacity: 1; }
.avatar.has-photo span { visibility: hidden; }
.photo-credit { font-size: 11px; color: var(--muted); margin: 0 0 6px; }
.photo-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; }
.photo-bar .photo-credit { margin: 0; flex: 1 1 260px; }
.photo-tools { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.my-photos { margin-top: 16px; }

/* Scouting report */
.scout-box { max-width: 820px; }
.scout-report h2 { padding-right: 70px; }
.scout-section { border-top: 1px solid var(--rule); padding-top: 8px; margin-top: 10px; }
.scout-list { margin: 6px 0 0; padding-left: 20px; }
.scout-list li { margin-bottom: 4px; }

/* This at-bat: the last plate appearance on its own */
.atbat { border-left: 4px solid var(--accent, #2b6cb0); }
.atbat .play, .atbat .cast { font-size: 1.05em; margin: 4px 0; }
.atbat .scored { font-weight: 600; }

/* ? buttons: how a grade is built */
.help-q { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0;
  margin-left: 6px; border-radius: 50%; font-size: 11px; font-weight: bold; line-height: 1; vertical-align: middle;
  background: var(--panel); color: var(--muted); border: 1px solid var(--rule); cursor: pointer; }
.help-q:hover, .help-q[aria-expanded="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.grade-help { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.45; color: var(--ink); background: var(--paper);
  border-left: 3px solid var(--accent); padding: 6px 10px; margin: 2px 0 4px; }
.grade-help p { margin: 0 0 6px; }
.grade-help p:last-child { margin-bottom: 0; }
/* Long lines wrap inside the scouting and opponent windows instead of spilling out */
.scout-report td { white-space: normal; overflow-wrap: break-word; }
.scout-report td:first-child { white-space: nowrap; }
.scout-report table { width: 100%; }

/* Grade words: Elite / Gold Glove .. Weak / Iron glove, with the number beside */
.g-tag { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 6px; border-radius: 3px; font-size: 12px;
  font-weight: bold; white-space: nowrap; border: 1px solid var(--rule); color: var(--ink); background: var(--panel); }
.g-num { font-size: 11px; font-weight: normal; opacity: 0.8; }
.g-tag.t1 { background: var(--good); border-color: var(--good); color: #fff; }
.g-tag.t2 { color: var(--good); border-color: var(--good); }
.g-tag.t3 { color: var(--ink); }
.g-tag.t4 { color: var(--runner); border-color: var(--runner); }
.g-tag.t5 { color: var(--accent); border-color: var(--accent); }
.g-tag.t6 { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.g-na { color: var(--muted); }
.grade-num { text-align: right; }
/* Defense table with grade words: compact, and stacked under the grades when the card is narrow */
.def-table th, .def-table td { padding: 3px 4px; }
.def-table .g-tag { font-size: 11px; padding: 1px 4px; gap: 3px; }
@media (max-width: 900px) { .pc-cols { grid-template-columns: 1fr; } }

/* Rating picker in the lineup tables' header */
.rating-th { white-space: nowrap; }
.rating-pick { font-size: 12px; padding: 1px 2px; width: auto; max-width: 9em; }

/* --- Field panel: score bug, ballpark, matchup cards --- */
.score-bug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 6px 10px; margin-bottom: 10px;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); font-size: 14px; }
.sb-team { display: inline-flex; gap: 6px; align-items: baseline; color: var(--muted); }
.sb-team b { font: bold 18px var(--mono); color: var(--ink); }
.sb-team.up { color: var(--ink); font-weight: bold; }
.sb-team.up::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--runner); align-self: center; }
.sb-inning { font-weight: bold; display: inline-flex; gap: 4px; align-items: center; }
.sb-arrow { font-size: 10px; color: var(--accent); }
.sb-outs { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); }
.sb-outs .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-block; }
.sb-outs .dot.on { background: var(--ink); }
.sb-park { margin-left: auto; color: var(--muted); font-size: 13px; }
.field-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.field-park .park-svg { width: 100%; max-width: 300px; }
.field-def { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--muted); }
.runner-dot { fill: var(--runner); stroke: #fff; stroke-width: 2; }
.runner-label { font: bold 11px var(--mono); fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,0.7); stroke-width: 3px; }
.batter-box { fill: var(--runner); stroke: #fff; stroke-width: 1; }
.park-svg .clickable { cursor: pointer; }
.park-svg .clickable:hover circle { stroke: var(--ink); }
.matchup { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mu-card { border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; background: var(--panel); }
.mu-head { display: flex; gap: 10px; align-items: center; }
.avatar.avatar-sm { width: 48px; height: 48px; }
.avatar.avatar-sm span { font-size: 15px; }
.mu-who { flex: 1; min-width: 0; }
.mu-name { font-weight: bold; font-size: 15px; }
.mu-sub { font-size: 12.5px; color: var(--muted); }
.mu-edge { font-size: 11px; padding: 2px 7px; border-radius: 3px; white-space: nowrap; border: 1px solid var(--rule); align-self: flex-start; }
.mu-edge.edge-bat { color: var(--good); border-color: var(--good); }
.mu-edge.edge-pit { color: var(--accent); border-color: var(--accent); }
.mu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mu-chip { font-size: 12px; color: var(--muted); display: inline-flex; gap: 2px; align-items: center; }
.mu-proj { margin-top: 6px; font-size: 13px; }
.mu-vs { text-align: center; font-size: 12px; color: var(--muted); line-height: 1; }
.mu-stamina { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12px; color: var(--muted); }
.mu-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); overflow: hidden; }
.mu-fill { display: block; height: 100%; }
.mu-fill.ok { background: var(--good); } .mu-fill.mid { background: var(--runner); } .mu-fill.low { background: var(--accent); }
.mu-half { margin-bottom: -2px; }
@media (max-width: 720px) {
  .field-grid { grid-template-columns: 1fr; }
  .field-park { max-width: 320px; margin: 0 auto; }
  .sb-park { margin-left: 0; width: 100%; }
}
.field-def { gap: 4px 12px; }
.fd-item { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.field-park .park-svg { width: 100%; max-width: 420px; height: auto; }
.field-grid { grid-template-columns: minmax(0, 400px) minmax(290px, 1fr); }
@media (max-width: 720px) { .field-grid { grid-template-columns: 1fr; } }
.field-park .park-label { font-size: 9px; }
.field-park .park-wall-label { font-size: 8px; }
.field-key { margin-top: 4px; }
@media (max-width: 480px) { .mu-head { flex-wrap: wrap; } .mu-edge { margin-left: 58px; } }
@media (max-width: 480px) { .mu-who { flex: 1 1 160px; } }

/* The last ball in play: path from home, a dot where it ended */
.bb-path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; opacity: 0.9; }
.bb-end { stroke: #fff; stroke-width: 1.5; }
.bb.hit .bb-end { fill: var(--runner); }
.bb.out .bb-end { fill: #fff; stroke: var(--ink); }
.bb.hr .bb-end { fill: var(--accent); stroke-width: 2; }
.bb.hr .bb-path { stroke: var(--runner); }
.bb-draw .bb-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bb-draw 400ms ease-out forwards; }
.bb-draw .bb-end { opacity: 0; animation: bb-in 150ms ease-out forwards; }
.bb-fade { animation: bb-fade 400ms ease-out forwards; }
@keyframes bb-draw { to { stroke-dashoffset: 0; } }
@keyframes bb-in { to { opacity: 1; } }
@keyframes bb-fade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body:not(.full-motion) .bb-draw .bb-path, body:not(.full-motion) .bb-draw .bb-end, .bb-fade { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .bb-fade { opacity: 0; }
}
.bb-line { margin-top: 2px; }

/* Field declutter: fielders are colored names with a glove tag; circles are runners */
.fld text { paint-order: stroke; stroke: rgba(0,0,0,0.75); stroke-linejoin: round; }
.field-park .fld-name { font: bold 7px var(--mono); stroke-width: 2px; }
.field-park .fld-tag { font: bold 5.5px var(--mono); stroke-width: 1.6px; letter-spacing: 0.2px; }
.fld.g1 text, .fld.g2 text { fill: #9fe3a6; }
.fld.g3 text { fill: #f1ede2; }
.fld.g4 text { fill: #f5c842; }
.fld.g5 text, .fld.g6 text { fill: #ff9a8a; }
.fld-hl { fill: rgba(0,0,0,0.35); stroke: #fff; stroke-width: 1; }
.park-svg .clickable:hover text { text-decoration: underline; }
.runner-dot { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.runner-tag { fill: #1d1d1b; opacity: 0.88; }
.field-park .runner-label { font: bold 6px var(--mono); fill: #fff; stroke: none; }
.batter-box { fill: var(--ink); stroke: #fff; stroke-width: 1; }
.field-park .park-label { font-weight: normal; fill: var(--muted); font-size: 8.5px; }

/* Manual (masthead link, opens over the page) */
.manual-box { max-width: 820px; }
.manual h2 { padding-right: 70px; }
.manual-toc { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 0 10px; border-bottom: 1px solid var(--rule); font-size: 13px; }
.manual-section { padding-top: 6px; scroll-margin-top: 10px; }
.manual-section h3 { margin: 14px 0 6px; }
.manual-section p, .manual-section li { line-height: 1.5; }
.manual-section ul { padding-left: 20px; }
.manual-section li { margin-bottom: 4px; }
.manual-table td, .manual-table th { white-space: normal; }

/* --- Play-by-play feed: newest at-bat first, folding half-innings --- */
.feed { padding-top: 10px; }
.fd-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fd-top h2 { margin: 0; }
.voice-switch { margin-left: auto; display: inline-flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.vs-opt { border: 0; border-radius: 0; padding: 4px 10px; font-size: 12.5px; background: var(--panel); color: var(--muted); }
.vs-opt + .vs-opt { border-left: 1px solid var(--rule); }
.vs-opt.on { background: var(--ink); color: var(--paper); font-weight: bold; }
.fd-half { border: 1px solid var(--rule); border-radius: 4px; margin-top: 6px; background: var(--panel); }
.fd-half-head { display: flex; width: 100%; gap: 8px; align-items: baseline; text-align: left; border: 0; border-radius: 0;
  background: var(--paper); padding: 6px 10px; font-size: 13px; color: var(--ink); }
.fd-half.open .fd-half-head { border-bottom: 1px solid var(--rule); }
.fd-caret { width: 10px; color: var(--muted); }
.fd-half-name { font-weight: bold; }
.fd-half-sum { margin-left: auto; color: var(--muted); white-space: nowrap; }
.fd-ab { padding: 7px 10px; border-bottom: 1px solid var(--rule); }
.fd-ab:last-child { border-bottom: 0; }
.fd-ab.newest { border-left: 3px solid var(--runner); background: var(--paper); }
.fd-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; }
.fd-tag { font-size: 11px; font-weight: bold; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--rule); white-space: nowrap; }
.fd-tag.hit { color: var(--good); border-color: var(--good); }
.fd-tag.hr { background: var(--good); border-color: var(--good); color: #fff; }
.fd-tag.on { color: var(--runner); border-color: var(--runner); }
.fd-tag.out { color: var(--muted); }
.fd-tag.note { color: var(--muted); border-style: dashed; }
.fd-who { font-weight: bold; }
.fd-vs, .fd-outs { color: var(--muted); font-size: 12px; }
.fd-score { margin-left: auto; font-size: 11.5px; font-weight: bold; padding: 1px 6px; border-radius: 3px;
  background: var(--runner); color: #1d1d1b; white-space: nowrap; }
.fd-text { margin-top: 3px; font-size: 13.5px; line-height: 1.45; }
.fd-text p { margin: 0 0 2px; }
.fd-bb { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.fd-final { border: 2px solid var(--ink); border-radius: 4px; padding: 8px 10px; margin-top: 6px; background: var(--paper); }
.fd-final-title { font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.fd-final p, .fd-pre p { margin: 4px 0; font-size: 13.5px; }
.fd-pre { padding: 6px 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .voice-switch { margin-left: 0; } .fd-score { margin-left: 0; } }

/* Masthead: Home and Manual, and the lineup screen's way back */
.back-row { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 6px; }
.back-row > a:first-child { display: inline-block; font-size: 13px; text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: 3px 12px; color: var(--ink); background: var(--panel); }
.back-row > a:first-child:hover, .back-row > a:first-child:focus-visible { border-color: var(--accent); color: var(--accent); }
.back-row h1 { margin: 0; }

/* The card photo is the upload button: click, or drop an image on it */
.avatar-btn { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; }
.avatar-btn .avatar-hint { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55); color: #fff; font: bold 11px var(--mono); text-align: center; padding: 8px;
  opacity: 0; transition: opacity 0.15s; }
.avatar-btn:hover .avatar-hint, .avatar-btn:focus-visible .avatar-hint, .avatar-btn.drop .avatar-hint { opacity: 1; }
.avatar-btn.drop .avatar { outline: 3px dashed var(--runner); outline-offset: 2px; }
@media (hover: none) { .avatar-btn .avatar-hint { opacity: 0.85; inset: auto 0 0 0; height: 26%; border-radius: 0 0 44px 44px; padding: 0; font-size: 9px; } }

/* Your-photos line on the home screen */
.my-photos-line { margin-top: 14px; }
button.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* Version in the bottom corner, opens What's new */
.version-badge { position: fixed; right: 10px; bottom: 8px; z-index: 5; padding: 2px 8px; font: 11px var(--mono);
  color: var(--muted); background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; opacity: 0.85; cursor: pointer; }
.version-badge:hover, .version-badge:focus-visible { opacity: 1; color: var(--ink); border-color: var(--ink); }
.footer { padding-bottom: 36px; }
.wn-version h3 { display: flex; gap: 8px; align-items: baseline; margin: 16px 0 6px; }
.wn-date { margin-left: auto; font-weight: normal; font-size: 12px; color: var(--muted); }
.wn-version ul { padding-left: 20px; margin: 0; }
.wn-version li { margin-bottom: 4px; line-height: 1.45; }

/* Ballpark photos (Wikimedia Commons) */
.park-photo { margin: 8px 0 4px; }
.park-photo img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 4px; border: 1px solid var(--rule); }
.park-photo figcaption { margin-top: 4px; }
.park-thumb-photo { width: 120px; height: 80px; object-fit: cover; border-radius: 4px; flex: none; border: 1px solid var(--rule); }
/* Park types (ui/park.js): badges, and the ballpark guide's filters and table. */
.park-types { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.park-type { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); white-space: nowrap; }
.park-type.t-hitters { color: var(--good); border-color: currentColor; }
.park-type.t-pitchers { color: var(--accent); border-color: currentColor; }
.park-type.t-neutral, .park-type.t-unrated { color: var(--muted); }
.park-type.t-hr, .park-type.t-gaps { font-weight: bold; }
.park-type.t-quirky { font-style: italic; cursor: help; }
.park-help { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.park-quirk { flex-basis: 100%; }
.park-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.park-filter.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.park-search { width: 100%; max-width: 320px; margin-bottom: 4px; }
.park-guide-table td { vertical-align: top; }
.park-guide-table .park-types { min-width: 170px; }
.park-guide-table tr.park-chosen td { background: var(--paper); font-weight: bold; }
.park-guide-nav { gap: 8px; margin-bottom: 8px; }
.fd-tag.injury { color: var(--accent); border-color: var(--accent); }

/* Career table: more columns, the year stays put when it scrolls sideways, and a career line */
.career { max-height: 260px; }
.career th, .career td { padding: 3px 7px; }
.career .yr { position: sticky; left: 0; background: var(--panel); z-index: 1; }
.career thead .yr { z-index: 2; }
.career tfoot td { position: sticky; bottom: 0; background: var(--paper); font-weight: bold; border-top: 2px solid var(--ink); }

/* The hitter's headshot in the batter's box */
.batter-bg { fill: var(--ink); }
.batter-initials { font: bold 7px var(--mono); fill: #fff; }
.batter-ring { fill: none; stroke: #fff; stroke-width: 1.5; }
.batter-head:hover .batter-ring { stroke: var(--runner); }
/* Play-by-play: outs in red; injuries solid red so they stand apart */
.fd-tag.out { color: var(--accent); border-color: var(--accent); }
.fd-tag.injury { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* The ball on the field is the last play's: a caption says so, and the path is a touch quieter */
.field-last { margin-top: 4px; line-height: 1.35; }
.field-last .fl-label { font-size: 10.5px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--paper); background: var(--muted); padding: 0 5px; border-radius: 3px; }
.bb-path { opacity: 0.75; }

.box-notes > div { margin-bottom: 2px; }
.box-game { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 6px; }

/* A pinch hitter or reliever picked but not sent in yet */
.controls button.pending { background: var(--runner); border-color: var(--runner); color: #1d1d1b; font-weight: bold; }

/* CPU manager style in setup */
.style-pick { font-size: 13px; }
.style-blurb { flex-basis: 100%; }
.matchup-pick { margin-bottom: 10px; gap: 8px; align-items: center; }
.matchup-pick select { max-width: 420px; }
.voice-switch { flex-wrap: wrap; }

/* Series */
.series-banner { margin: -4px 0 8px; font-weight: bold; color: var(--accent); }
.series-standing { font-weight: bold; margin-right: 8px; }

/* Pitch-by-pitch strip on each at-bat */
.fd-pitches { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 4px; }
.pt { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font: bold 9.5px var(--mono);
  border: 1px solid var(--rule); color: var(--muted); background: var(--panel); }
.pt-B, .pt-I { color: var(--good); border-color: var(--good); }
.pt-C, .pt-S { color: var(--accent); border-color: var(--accent); }
.pt-F { color: var(--runner); border-color: var(--runner); }
.pt-X { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pt-H { background: var(--runner); color: #1d1d1b; border-color: var(--runner); }
.pt-count { font-size: 11px; color: var(--muted); margin-left: 4px; }

/* --- Masthead: a home uniform, navy twill with gold and red piping, the sleeve patch and the name
   in tackle twill (ui/brand.js) --- */
:root { --mh-bg: #12305a; --mh-bg2: #0a1d38; --mh-ink: #f4f1e6; --mh-gold: #f2c14e; --mh-line: #c8392f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mh-bg: #0e2547; --mh-bg2: #07142a; --mh-line: #d9483d; } }
:root[data-theme="dark"] { --mh-bg: #0e2547; --mh-bg2: #07142a; --mh-line: #d9483d; }
.masthead { position: relative; color: var(--mh-ink); --mh-img: none; --mh-tint: linear-gradient(transparent, transparent);
  /* The twill: a fine diagonal weave (the era looks set their own). */
  --mh-dots: repeating-linear-gradient(35deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 4px);
  --mh-font: Oswald, "Arial Narrow", sans-serif; --mh-track: 2px;
  /* The era picture (ui/skins.js) sits under its green overlay, over the base colors. */
  background:
    var(--mh-dots) 0 0 / 5px 5px,
    var(--mh-tint),
    var(--mh-img) center var(--mh-img-y, 45%) / cover no-repeat,
    linear-gradient(180deg, var(--mh-bg) 0%, var(--mh-bg2) 100%);
  border-bottom: 4px solid var(--mh-line); box-shadow: 0 2px 0 var(--mh-gold), 0 6px 14px rgba(0, 0, 0, 0.18); margin-bottom: 2px; }
/* A gold stitched seam just above the piping. */
.masthead::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; border-top: 1.5px dashed rgba(242, 193, 78, 0.55); pointer-events: none; }
body[data-skin]:not([data-skin="classic"]) .masthead::after { display: none; }   /* the seam is the classic uniform's */
.brand { display: inline-flex !important; align-items: center; gap: 12px; flex: 0 1 auto !important; line-height: 1 !important; text-decoration: none; }
.brand-patch { display: block; flex: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); transition: transform 0.25s ease; }
.mh-patch { display: block; width: 66px; height: 66px; overflow: visible; }
.brand:hover .brand-patch { transform: rotate(-8deg) scale(1.04); }
.brand-word { display: flex; flex-direction: column; letter-spacing: 0; }
.bw-main { font: 600 36px/0.95 Oswald, Impact, "Arial Narrow", sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--mh-ink);
  text-shadow: -1.5px -1.5px 0 var(--mh-line), 1.5px -1.5px 0 var(--mh-line), -1.5px 1.5px 0 var(--mh-line), 1.5px 1.5px 0 var(--mh-line),
    0 1.5px 0 var(--mh-line), 0 -1.5px 0 var(--mh-line), 1.5px 0 0 var(--mh-line), -1.5px 0 0 var(--mh-line), 2px 4px 5px rgba(0, 0, 0, 0.55); }
.bw-sub { margin-top: 5px; font: 600 12px/1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 8.5px; text-transform: uppercase; color: var(--mh-gold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.brand:hover .bw-main { color: #fff; }
@media (max-width: 560px) { .mh-patch { width: 50px; height: 50px; } .bw-main { font-size: 27px; letter-spacing: 2px; } .bw-sub { font-size: 10px; letter-spacing: 6px; } }
.masthead-inner { max-width: 1100px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }
.brand { display: inline-block; flex: 0 1 330px; line-height: 0; color: var(--mh-ink); text-decoration: none; font: bold 20px var(--mono); letter-spacing: 2px; }
.brand:focus-visible { outline: 2px solid var(--mh-gold); outline-offset: 4px; }
.logo { display: block; width: min(330px, 100%); height: auto; }
.logo .lg-face { fill: var(--mh-ink); }
.logo .lg-mid { fill: var(--mh-line); }
.logo .lg-shadow { fill: rgba(0, 0, 0, 0.55); }
.logo .lg-sub { fill: var(--mh-gold); }
.logo .lg-spark { fill: var(--mh-gold); animation: twinkle 2.6s steps(2, jump-none) infinite; }
.logo .lg-spark2 { animation-delay: 1.3s; }
@keyframes twinkle { 0%, 60% { opacity: 1; } 80% { opacity: 0.15; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .logo .lg-spark { animation: none; } }
.brand:hover .logo .lg-face { fill: #ffffff; }
.tagline { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; border-left: 2px solid rgba(255, 255, 255, 0.18);
  color: rgba(244, 241, 230, 0.78); font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.6px; }
.tagline span + span { color: var(--mh-gold); }
.masthead-nav { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.masthead-link { display: inline-flex; align-items: center; gap: 6px; font: bold 12.5px var(--mh-font, var(--mono)); letter-spacing: var(--mh-track, 1px); text-transform: uppercase;
  text-decoration: none; padding: 6px 12px; color: var(--mh-ink); background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(242, 193, 78, 0.4); border-radius: 3px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3); cursor: pointer; }
.masthead-link:hover, .masthead-link:focus-visible { background: var(--mh-gold); border-color: var(--mh-gold); color: #1d1d1b; outline: none; }
.masthead-link:active { transform: translateY(1px); box-shadow: none; }
.theme-toggle .tt-icon { display: inline-flex; }
/* Customize: Skin, Sound and Boom, opened in place (the masthead clips anything hanging below it) */
.customize { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.customize-panel { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px; border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 6px; }
.customize-panel[hidden] { display: none; }
#customize-toggle.on { background: var(--mh-gold); border-color: var(--mh-gold); color: #1d1d1b; }
/* Text size (Customize): the whole page scaled, since the sizes are set in pixels */
html[data-text="small"] { zoom: 0.9; }
html[data-text="large"] { zoom: 1.15; }
html[data-text="larger"] { zoom: 1.3; }
#customize-toggle.on .cz-caret { display: inline-block; transform: rotate(180deg); }
@media (max-width: 480px) { .customize { display: contents; } .customize-panel { order: 99; width: 100%; } }
@media (max-width: 900px) { .tagline { display: none; } }
@media (max-width: 480px) {
  .masthead-inner { gap: 10px; padding: 10px 16px; }
  .masthead-nav { margin-left: 0; width: 100%; }
  .masthead-link { padding: 5px 10px; font-size: 12px; }
}

/* --- The morning paper beside the box score (ui/story.js) --- */
.postgame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1000px) { .postgame { grid-template-columns: 360px minmax(0, 1fr); } }
.postgame-box { min-width: 0; }
.postgame > .paper { justify-self: center; width: 100%; }
.paper { --np: #f2ebd7; --np-ink: #1c1a16; --np-rule: #3b362c;
  background:
    radial-gradient(rgba(120, 100, 60, 0.08) 1px, transparent 1.2px) 0 0 / 3px 3px,
    linear-gradient(180deg, #f6f0de, var(--np));
  color: var(--np-ink); padding: 14px 16px 12px; border: 1px solid #c9bd9b;
  box-shadow: 0 1px 0 #fff inset, 3px 4px 0 rgba(0, 0, 0, 0.12), 0 10px 22px rgba(0, 0, 0, 0.12);
  font: 14.5px/1.42 "Old Standard TT", Georgia, "Times New Roman", serif; transform: rotate(-0.4deg);
  container-type: inline-size; max-width: 680px; }
@container (min-width: 520px) {
  .paper-body { column-count: 2; column-gap: 18px; column-rule: 1px solid rgba(59, 54, 44, 0.4); }
  .paper .paper-photo { width: 72%; margin: 10px auto 8px; }
  .paper .paper-photo-frame { aspect-ratio: 16 / 10; }
  .paper-head { font-size: 34px; }
}
:root[data-theme="dark"] .paper { filter: brightness(0.9) sepia(0.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .paper { filter: brightness(0.9) sepia(0.08); } }
.paper-mast { text-align: center; border-bottom: 3px double var(--np-rule); padding-bottom: 6px; margin-bottom: 8px; }
.paper-ears { display: flex; justify-content: space-between; font: bold 9.5px/1 Georgia, serif; letter-spacing: 1.5px; text-transform: uppercase; }
.paper-name { font: 34px/1.05 "UnifrakturMaguntia", "Old English Text MT", "Engravers Old English", "Times New Roman", serif; margin: 4px 0 4px; }
.paper-date { font: italic 11.5px/1.2 "Old Standard TT", Georgia, serif; border-top: 1px solid var(--np-rule); padding-top: 3px; }
.paper-head { font: 600 27px/1.02 Oswald, "Bahnschrift Condensed", "Arial Narrow", Impact, sans-serif; text-transform: uppercase;
  letter-spacing: 0.2px; color: var(--np-ink); text-align: center; margin: 4px 0 6px; }
.paper-deck { font: bold 13.5px/1.25 "Old Standard TT", Georgia, serif; text-align: center; margin: 0 auto 4px; padding-bottom: 4px;
  max-width: 92%; border-bottom: 1px solid rgba(59, 54, 44, 0.45); }
.paper-deck + .paper-deck { font-weight: normal; font-size: 12.5px; }
.paper-photo { margin: 8px 0 6px; }
.paper-photo-frame { position: relative; border: 1px solid var(--np-rule); overflow: hidden; aspect-ratio: 4 / 3; background: #cfc6ad; }
.paper-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block;
  filter: grayscale(1) contrast(1.25) brightness(1.05) sepia(0.18); }
.paper-photo-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: 0.35;
  background: radial-gradient(#000 0.7px, transparent 1px) 0 0 / 3px 3px; }
.paper-photo figcaption { font: italic 11.5px/1.3 "Old Standard TT", Georgia, serif; margin-top: 3px; }
.paper-byline { font: bold 11px/1 Georgia, serif; text-transform: uppercase; letter-spacing: 1.2px; text-align: center; margin: 8px 0 6px; }
.paper-body p { margin: 0 0 6px; text-align: justify; hyphens: auto; text-indent: 1em; }
.paper-body .paper-lede { text-indent: 0; }
.paper-dateline { font-weight: bold; font-variant: small-caps; letter-spacing: 0.5px; }
.paper-foot { font: italic 10.5px/1.3 Georgia, serif; color: #6a6252; border-top: 1px solid rgba(59, 54, 44, 0.45); padding-top: 4px; margin: 6px 0 0; }

/* Player card header in the team's colors, with its trim color as the stripe */
.pc-head.team-colored { border-bottom: 4px solid var(--team-trim); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); }

/* Exit game: always at the end of the controls */
.exit-group { margin-left: auto; }
.exit-game { border-color: var(--accent); color: var(--accent); }
.exit-game:hover { background: var(--accent); color: var(--accent-ink); }

/* Win probability chart under the box score (ui/winprob.js) */
.wp { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.wp-svg { width: 100%; height: auto; display: block; }
.wp-mid { stroke: var(--rule); stroke-dasharray: 3 3; }
.wp-tick { stroke: var(--rule); stroke-width: 0.6; opacity: 0.6; }
.wp-axis { font: bold 10px var(--mono); fill: var(--ink); }
.wp-axis.faint { font-weight: normal; fill: var(--muted); }
.wp-area { fill: color-mix(in srgb, var(--field) 18%, transparent); }
.wp-line { fill: none; stroke: var(--field); stroke-width: 2; stroke-linejoin: round; }
.wp-dot { fill: var(--runner); stroke: var(--ink); stroke-width: 1.2; }
.wp-dot-label { font: bold 9px var(--mono); fill: #1d1d1b; }
.wp-moments { margin: 6px 0 4px; padding-left: 22px; font-size: 13px; }
.wp-moments li { margin-bottom: 3px; }
.wp-when { color: var(--muted); font-size: 12px; }
.wp-swing { font-weight: bold; color: var(--good); white-space: nowrap; }
/* Box tables scroll inside their column instead of widening the page */
.box-wrap .grid2 > * { overflow-x: auto; }
.box-wrap .grid2 > table.box-table { display: block; max-width: 100%; }

/* ===================== Era looks (ui/looks.js): the game screen dresses for its year ===================== */
/* Each look sets the page tokens on body, so the masthead (its own --mh colors) is untouched. */
body[data-look] { transition: background-color 0.3s; }

/* --- Sepia newsprint: to 1919 --- */
body[data-look="sepia"] { --paper: #efe3c8; --panel: #f6ecd6; --ink: #3b2a1a; --muted: #7a6448; --rule: #c9b48e;
  --accent: #7a2e1a; --accent-ink: #fff8ea; --field: #6f6a3e; --runner: #b8862b; --good: #5d6b2f; --dirt: #a8865a; --wall: #3b2a1a;
  --mono: "Old Standard TT", Georgia, "Times New Roman", serif; }
:root[data-theme="dark"] body[data-look="sepia"] { --paper: #1e1810; --panel: #282015; --ink: #eadcc0; --muted: #a8946f; --rule: #4a3c28;
  --accent: #d0875a; --accent-ink: #1e1810; --field: #4f4c2c; --runner: #d9a645; --good: #a3b06a; --dirt: #7a6040; --wall: #eadcc0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-look="sepia"] { --paper: #1e1810; --panel: #282015;
  --ink: #eadcc0; --muted: #a8946f; --rule: #4a3c28; --accent: #d0875a; --accent-ink: #1e1810; --field: #4f4c2c; --runner: #d9a645;
  --good: #a3b06a; --dirt: #7a6040; --wall: #eadcc0; } }
body[data-look="sepia"] main { font-size: 15.5px; }
body[data-look="sepia"] #app h1, body[data-look="sepia"] #app h2 { font-variant: small-caps; letter-spacing: 1.5px; }
body[data-look="sepia"] .field-park svg { filter: sepia(0.55) saturate(0.75); }
body[data-look="sepia"] #app .avatar img, body[data-look="sepia"] #app .avatar { filter: sepia(0.7) grayscale(0.3) contrast(1.05); }
body[data-look="sepia"] #app .panel { box-shadow: inset 0 0 40px rgba(120, 90, 40, 0.12); border-color: var(--rule); }
body[data-look="sepia"] .score-bug { border: 2px double var(--ink); background: var(--panel); }

/* --- Radio days: 1920-1960 --- */
body[data-look="radio"] { --paper: #f4efe2; --panel: #fffaf0; --ink: #1a2440; --muted: #66708a; --rule: #c8c3b2;
  --accent: #a3252b; --accent-ink: #ffffff; --field: #2e5a35; --runner: #d2a019; --good: #2e6a3a;
  --mono: "Courier Prime", "Courier New", Courier, monospace; }
:root[data-theme="dark"] body[data-look="radio"] { --paper: #10162a; --panel: #18203a; --ink: #ece6d4; --muted: #9aa2b8; --rule: #2c3654;
  --accent: #e0605a; --accent-ink: #10162a; --field: #2f5a3a; --runner: #e8b93a; --good: #8fd09a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-look="radio"] { --paper: #10162a; --panel: #18203a;
  --ink: #ece6d4; --muted: #9aa2b8; --rule: #2c3654; --accent: #e0605a; --accent-ink: #10162a; --field: #2f5a3a; --runner: #e8b93a; --good: #8fd09a; } }
body[data-look="radio"] #app h1, body[data-look="radio"] #app h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 2px; text-transform: uppercase; }
body[data-look="radio"] .score-bug { background: #1a2440; color: #f4efe2; border: 2px solid #a3252b; box-shadow: 0 0 0 3px #f4efe2 inset; border-radius: 3px; }
body[data-look="radio"] .score-bug .sb-team, body[data-look="radio"] .score-bug .sb-team b, body[data-look="radio"] .score-bug .sb-park { color: #f4efe2; }
body[data-look="radio"] #app .panel { border-width: 1px 1px 3px; }

/* --- '70s TV: 1961-1993 --- */
body[data-look="tv70"] { --paper: #f3e6cc; --panel: #fbf1dc; --ink: #3a2416; --muted: #7d6047; --rule: #d9bf94;
  --accent: #c94c0c; --accent-ink: #ffffff; --field: #5c8a2e; --runner: #f2b705; --good: #4d7a24; }
:root[data-theme="dark"] body[data-look="tv70"] { --paper: #1f140c; --panel: #2a1c12; --ink: #f3e2c2; --muted: #b39370; --rule: #4c3420;
  --accent: #f07a2a; --accent-ink: #1f140c; --field: #47702a; --runner: #f5c02a; --good: #9cc25a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-look="tv70"] { --paper: #1f140c; --panel: #2a1c12;
  --ink: #f3e2c2; --muted: #b39370; --rule: #4c3420; --accent: #f07a2a; --accent-ink: #1f140c; --field: #47702a; --runner: #f5c02a; --good: #9cc25a; } }
body[data-look="tv70"] #app h1, body[data-look="tv70"] #app h2, body[data-look="tv70"] .score-bug {
  font-family: Righteous, "Cooper Black", "Bookman Old Style", Georgia, serif; letter-spacing: 0.5px; }
body[data-look="tv70"] .score-bug { background: linear-gradient(180deg, #5a3a22, #3a2416); color: #fbf1dc; border-radius: 14px;
  border: 0; box-shadow: 0 4px 0 #c94c0c, 0 8px 0 #f2b705; margin-bottom: 18px; padding: 8px 14px; }
body[data-look="tv70"] .score-bug .sb-team, body[data-look="tv70"] .score-bug .sb-park { color: #f3d9a8; }
body[data-look="tv70"] .score-bug .sb-team b { color: #f2b705; font-family: inherit; font-size: 20px; }
body[data-look="tv70"] #app .panel { border-radius: 10px; }
body[data-look="tv70"] #app button { border-radius: 999px; }

/* --- Statcast: 1994 on --- */
body[data-look="statcast"] { --paper: #eef2f7; --panel: #ffffff; --ink: #0b1b2b; --muted: #5b6b7d; --rule: #d3dbe5;
  --accent: #0a63c9; --accent-ink: #ffffff; --field: #2f7a46; --runner: #ffb000; --good: #0c8a4f;
  --mono: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
:root[data-theme="dark"] body[data-look="statcast"] { --paper: #070d16; --panel: #0e1724; --ink: #e6eef8; --muted: #8193a8; --rule: #1f2c3d;
  --accent: #23c4ff; --accent-ink: #04121c; --field: #1f6b3c; --runner: #ffc233; --good: #3ee08a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-look="statcast"] { --paper: #070d16; --panel: #0e1724;
  --ink: #e6eef8; --muted: #8193a8; --rule: #1f2c3d; --accent: #23c4ff; --accent-ink: #04121c; --field: #1f6b3c; --runner: #ffc233; --good: #3ee08a; } }
body[data-look="statcast"] main { font-variant-numeric: tabular-nums; }
body[data-look="statcast"] #app h1 { font-weight: 800; letter-spacing: -0.3px; }
body[data-look="statcast"] #app .panel { border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(10, 40, 80, 0.06); }
body[data-look="statcast"] .score-bug { background: linear-gradient(135deg, #0b1b2b, #13314f); color: #e6eef8; border: 1px solid rgba(35, 196, 255, 0.45);
  border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 6px 20px rgba(10, 99, 201, 0.25); }
body[data-look="statcast"] .score-bug .sb-team, body[data-look="statcast"] .score-bug .sb-park { color: #9fb3c8; }
body[data-look="statcast"] .score-bug .sb-team b { color: #ffffff; }
:root[data-theme="dark"] body[data-look="statcast"] .score-bug { box-shadow: 0 0 18px rgba(35, 196, 255, 0.35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-look="statcast"] .score-bug { box-shadow: 0 0 18px rgba(35, 196, 255, 0.35); } }
body[data-look="statcast"] #app button { border-radius: 8px; }

/* The look's name, under the game's title */
.look-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }

/* ===================== The card flip and the retro card back ===================== */
.pc-flipper { perspective: 1200px; }
.pc-face { transition: transform 0.17s ease-in; transform-origin: 50% 50%; }
.pc-flipper.turning .pc-face:not([hidden]) { transform: rotateY(90deg); }
.pc-flipper.landing .pc-face:not([hidden]) { animation: card-land 0.18s ease-out; }
@keyframes card-land { from { transform: rotateY(-90deg); } to { transform: rotateY(0); } }
@media (prefers-reduced-motion: reduce) { .pc-face { transition: none; } .pc-flipper.landing .pc-face { animation: none; } }
.pc-head { position: relative; }
.pc-head .pc-flip-btn { position: absolute; right: 16px; bottom: 12px; }
.pc-flip-btn { font: bold 12px var(--mono); padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(0, 0, 0, 0.25); color: #fff; border: 1px solid rgba(255, 255, 255, 0.6); }
.pc-flip-btn:hover { background: #fff; color: #1d1d1b; }
.pc-back { padding: 14px 16px 18px; background: var(--paper); }
.pc-back-bar { display: flex; justify-content: flex-end; margin: 0 52px 10px 0; }
.pc-back-bar .pc-flip-btn { background: var(--panel); color: var(--ink); border-color: var(--rule); }

.card-back { --cb-stock: #cbb896; --cb-ink: #2b2118; --cb-band: #c94c0c; --cb-band-ink: #fff; --cb-trim: #2b2118;
  max-width: 620px; margin: 0 auto; background: var(--cb-stock); color: var(--cb-ink); border-radius: 10px; padding: 12px 14px 10px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), 0 10px 24px rgba(0, 0, 0, 0.25); font: 12.5px/1.35 "Courier Prime", "Courier New", monospace;
  border: 6px solid var(--cb-stock); outline: 2px solid var(--cb-ink); outline-offset: -10px; }
.cb-top { display: flex; align-items: center; gap: 10px; background: var(--cb-band); color: var(--cb-band-ink); margin: -2px -2px 8px;
  padding: 6px 10px; border-radius: 4px; }
.cb-num { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: bold 15px Georgia, serif;
  background: var(--cb-band-ink); color: var(--cb-band); border: 2px solid var(--cb-ink); }
.cb-id { flex: 1; min-width: 0; }
.cb-name { font: 20px/1.05 Righteous, "Cooper Black", Georgia, serif; letter-spacing: 1px; }
.cb-pos { font-size: 11px; letter-spacing: 1px; opacity: 0.95; }
.cb-ball { flex: none; width: 30px; height: 30px; border-radius: 50%; background:
  radial-gradient(circle at 18% 50%, transparent 52%, #c8102e 53% 58%, transparent 59%),
  radial-gradient(circle at 82% 50%, transparent 52%, #c8102e 53% 58%, transparent 59%), #fbf8ef; border: 1px solid var(--cb-ink); }
.cb-bio { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-bottom: 8px; font-size: 12px; }
.cb-bio b { font-weight: bold; text-transform: uppercase; }
.cb-record-title { font: bold 12px Georgia, serif; text-transform: uppercase; letter-spacing: 1.5px; text-align: center;
  border-top: 2px solid var(--cb-ink); border-bottom: 1px solid var(--cb-ink); padding: 2px 0; margin-bottom: 2px; }
.cb-record { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cb-record th { font-weight: bold; text-align: right; padding: 1px 4px; border-bottom: 1px solid var(--cb-ink); }
.cb-record td { text-align: right; padding: 0 4px; }
.cb-record th:nth-child(-n+2), .cb-record td:nth-child(-n+2) { text-align: left; }
.cb-record .cb-club { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-record tr.cb-this td { font-weight: bold; background: rgba(255, 255, 255, 0.35); }
.cb-record tfoot td { font-weight: bold; border-top: 2px solid var(--cb-ink); }
.cb-ball.cb-mark { width: 42px; height: 42px; background: none; border: 0; }
.cb-ball.cb-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cb-cartoon { display: flex; gap: 10px; align-items: center; margin-top: 8px; padding: 6px 8px; border: 2px solid var(--cb-ink);
  border-radius: 6px; background: rgba(255, 255, 255, 0.35); font-size: 12px; }
.cb-cartoon-pic { flex: none; width: 46px; height: 46px; border-radius: 6px; background:
  radial-gradient(circle at 50% 30%, var(--cb-ink) 0 17%, transparent 18%),
  linear-gradient(var(--cb-ink), var(--cb-ink)) 50% 72% / 6px 34% no-repeat,
  linear-gradient(35deg, transparent 47%, #8b5a2b 48% 56%, transparent 57%) 70% 40% / 60% 60% no-repeat,
  var(--cb-band); border: 2px solid var(--cb-ink); }
.cb-foot { margin-top: 6px; font-size: 9.5px; text-align: center; opacity: 0.75; letter-spacing: 0.5px; }

/* Stocks */
.cb-tobacco { --cb-stock: #ead9b4; --cb-ink: #4a3220; --cb-band: #4a3220; --cb-band-ink: #ead9b4;
  font-family: "Old Standard TT", Georgia, serif; border-radius: 4px; outline-style: double; outline-width: 4px; outline-offset: -12px; }
.cb-tobacco .cb-name { font-family: "Old Standard TT", Georgia, serif; font-weight: bold; letter-spacing: 2px; }
.cb-mid { --cb-stock: #f3ead2; --cb-ink: #1a2440; --cb-band: #b3222b; --cb-band-ink: #fff8ea; }
.cb-mid .cb-name { font-family: Georgia, serif; font-weight: bold; }
.cb-board { --cb-stock: #c9b693; --cb-ink: #2e2416; --cb-band: #d9661e; --cb-band-ink: #fff4e0;
  background-image: radial-gradient(rgba(60, 40, 20, 0.12) 1px, transparent 1.2px); background-size: 4px 4px; }
.cb-gloss { --cb-stock: #ffffff; --cb-ink: #12202e; --cb-band-ink: #ffffff; font-family: Inter, "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 1px 0 #fff inset, 0 10px 24px rgba(0, 0, 0, 0.25); border-color: #fff; outline-color: var(--cb-trim); }
.cb-gloss .cb-top { background: linear-gradient(90deg, var(--cb-band), color-mix(in srgb, var(--cb-band) 70%, #000)); border-bottom: 4px solid var(--cb-trim); }
.cb-gloss .cb-name { font-family: Inter, "Segoe UI", system-ui, sans-serif; font-weight: 800; }
.cb-gloss .cb-record-title { font-family: Inter, system-ui, sans-serif; }
.cb-gloss .cb-cartoon-pic { background-color: var(--cb-band); }
/* Backs to match their fronts (ui/player.js cardBack, ui/cardframes.js). */
.cbk-topps69 { --cb-stock: #efe9d8; --cb-ink: #2a2320; --cb-band: #b3222b; --cb-band-ink: #fff6e6; }
.cbk-topps69 .cb-name { font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-weight: bold; letter-spacing: 1.5px; }
.cbk-topps70 { --cb-stock: #f5e49a; --cb-ink: #163a7a; --cb-band: #1f4fa0; --cb-band-ink: #fff5c2; }
.cbk-topps70 .cb-record tr:nth-child(even) td { background: rgba(255, 255, 255, 0.35); }
.cbk-topps70 .cb-name { font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.5px; }
.cbk-topps80 { --cb-stock: #cdc6b6; --cb-ink: #1f3a73; --cb-band: #c8102e; --cb-band-ink: #fff; }
.cbk-topps80 .cb-name { font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.5px; }
.cbk-topps85 { --cb-stock: #d3cec3; --cb-ink: #161616; --cb-band: #b3141d; --cb-band-ink: #fff; }
.cbk-topps85 .cb-name { font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; }
.cbk-topps90 { --cb-stock: #f6ead0; --cb-ink: #1d1d1b; --cb-band: #f08a24; --cb-band-ink: #1d1d1b; }
.cbk-topps90 .cb-name { font-family: Impact, "Arial Narrow", "Arial Black", sans-serif; letter-spacing: 1px; }
@media (max-width: 480px) { .card-back { font-size: 11px; padding: 10px 8px; } .cb-record { font-size: 10px; } .cb-name { font-size: 16px; } }
/* The masthead keeps the house type whatever the era look */
.masthead { --mono: Consolas, "SFMono-Regular", Menlo, "Liberation Mono", "Courier New", monospace; }
/* On the dark score-bug plates, outs, the inning and the arrow read light */
body[data-look="radio"] .score-bug .sb-outs, body[data-look="tv70"] .score-bug .sb-outs, body[data-look="statcast"] .score-bug .sb-outs { color: inherit; opacity: 0.85; }
body[data-look="radio"] .score-bug .dot, body[data-look="tv70"] .score-bug .dot, body[data-look="statcast"] .score-bug .dot { border-color: currentColor; }
body[data-look="radio"] .score-bug .dot.on, body[data-look="tv70"] .score-bug .dot.on { background: #f2b705; border-color: #f2b705; }
body[data-look="statcast"] .score-bug .dot.on { background: #23c4ff; border-color: #23c4ff; }
body[data-look="radio"] .score-bug .sb-arrow, body[data-look="tv70"] .score-bug .sb-arrow { color: #f2b705; }
body[data-look="statcast"] .score-bug .sb-arrow { color: #23c4ff; }

/* The loading bar while the record books load (index.html) */
.load-bar { max-width: 420px; height: 10px; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; background: var(--panel); margin: 10px 0 6px; }
.load-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--field), var(--runner)); transition: width 0.25s; }
.load-label { font-size: 12px; color: var(--muted); }

/* ===================== Player catalog (ui/catalog.js) ===================== */
.modes { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cat-top { align-items: center; gap: 10px; margin-bottom: 8px; }
.cat-tabs { margin-left: 0; }
.cat-filters { gap: 8px; margin-bottom: 10px; }
.cat-filters .voice-switch + .voice-switch { margin-left: 0; }
.cat-filters input[type=search] { min-width: 200px; flex: 1 1 200px; }
.cat-wrap { max-width: 100%; overflow-x: auto; }
.cat-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.cat-table th, .cat-table td { padding: 4px 7px; border-bottom: 1px solid var(--rule); white-space: nowrap; text-align: left; }
.cat-table th.num, .cat-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cat-table thead th { position: sticky; top: 0; background: var(--panel); font-size: 12px; }
.cat-table th.sortable { cursor: pointer; user-select: none; }
.cat-table th.sortable:hover, .cat-table th.sorted { color: var(--accent); }
.cat-table tbody tr:hover { background: color-mix(in srgb, var(--runner) 10%, transparent); }
.cat-table tr.picked { background: color-mix(in srgb, var(--runner) 18%, transparent); }
.cat-pick { width: 26px; }
.cat-salary { font-weight: bold; }
.cat-salary.min { color: var(--muted); font-weight: normal; }
.cat-salary.top { color: var(--good); }
.cat-pager { justify-content: center; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cat-table.compare th { text-align: left; }
.cat-table.compare td { text-align: right; }

/* ===================== Draft a team (ui/draft.js) ===================== */
.draft-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1000px) { .draft-grid { grid-template-columns: 340px minmax(0, 1fr); } .draft-roster { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; } }
.draft-head .row { gap: 8px; align-items: center; }
.draft-head input[type=text] { flex: 1; min-width: 0; }
.draft-money { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; text-align: center; font-size: 12px; }
.draft-money > div { border: 1px solid var(--rule); border-radius: 6px; padding: 6px 2px; background: var(--paper); }
.draft-money b { display: block; font-size: 15px; }
.draft-money .over b { color: var(--accent); }
.draft-actions { gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.draft-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.draft-table td { padding: 3px 4px; border-bottom: 1px solid var(--rule); }
.draft-table tr.open td { color: var(--muted); }
.draft-slot { width: 58px; font-weight: bold; color: var(--muted); }
.draft-roster h3 { margin: 10px 0 2px; }
.cat-draft { min-width: 64px; }
ul.drafted { margin: 4px 0 0; padding-left: 18px; }

/* The player card on a wide screen: more room, and the defense table stays in its column */
@media (min-width: 1100px) { .pc-box { max-width: 980px; } .pc-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; } }
.pc-cols > div { min-width: 0; }
.pc-cols .def-table { width: 100%; display: block; overflow-x: auto; }
.pc-cols .def-table th { white-space: nowrap; font-size: 11px; }

/* ===================== Season (ui/season.js) ===================== */
.season-setup .row, .season-home .row { gap: 8px; align-items: center; flex-wrap: wrap; }
.season-teams { border-collapse: collapse; width: 100%; font-size: 13px; }
.season-teams td, .season-teams th { padding: 5px 6px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.season-teams input[type=text] { min-width: 180px; }
.season-real select { max-width: 260px; }
.over-cap { color: var(--accent); font-weight: bold; }
.season-top h2 { margin: 0 12px 0 0; }
.season-actions { margin-left: auto; }
.season-standings { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.season-standings th, .season-standings td { padding: 5px 7px; border-bottom: 1px solid var(--rule); text-align: left; }
.season-standings .num { text-align: right; font-variant-numeric: tabular-nums; }
.season-standings tr.mine td { background: color-mix(in srgb, var(--runner) 14%, transparent); font-weight: bold; }
.you-tag { margin-left: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
.season-champ { font-weight: bold; color: var(--good); }
ul.season-games { list-style: none; padding: 0; margin: 4px 0 10px; }
ul.season-games li { padding: 4px 0; border-bottom: 1px dotted var(--rule); }
ul.season-games li.mine { font-weight: bold; }
/* Sim __ days on the season page */
.sim-days { gap: 4px; align-items: center; }
.sim-days .sim-n { width: 4.2em; padding: 4px 6px; }
/* The season page's header card */
.league-head { padding: 0; overflow: hidden; }
.league-head .th-band { background: var(--ink); color: var(--paper); }
.league-head .th-name { color: var(--paper); }
/* ... with the league's era behind it: its picture, darkened on the left for the name */
.league-head .th-band.lh-pictured { min-height: 92px; color: #f4f1e6;
  background: linear-gradient(90deg, rgba(10, 10, 8, 0.88) 0%, rgba(10, 10, 8, 0.62) 42%, rgba(10, 10, 8, 0.12) 100%),
    var(--lh-img) center 42% / cover no-repeat, var(--ink); }
.league-head .th-band.lh-pictured .th-name, .league-head .th-band.lh-pictured .th-sub { color: #f4f1e6; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); }
.lh-chips { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.lh-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lh-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 2px; }
/* A team page's header card */
.team-head { padding: 0; overflow: hidden; }
.th-band { padding: 14px 16px 10px; border-bottom: 1px solid var(--rule); }
.team-head.team-colored .th-band { background: var(--th-main); color: #fff; border-bottom: 4px solid var(--th-trim); }
.th-name { margin: 0; font-size: 28px; line-height: 1.15; }
.team-head.team-colored .th-name { color: #fff; }
.th-sub { font-size: 13px; opacity: 0.85; margin-top: 2px; }
.th-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-bottom: 1px solid var(--rule); }
.th-tile { padding: 10px 14px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.th-tile:last-child { border-right: 0; }
.th-tile b { font-size: 20px; line-height: 1.2; }
.th-tile span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.th-tile.up b { color: var(--good); }
.th-tile.down b { color: var(--accent); }
.th-park { padding: 10px 16px; font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.th-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.th-chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); white-space: nowrap; }
.th-chip.up { color: var(--good); border-color: currentColor; }
.th-chip.down { color: var(--accent); border-color: currentColor; }
.season-leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 18px; }
/* The season page's tabs, and the leaderboard's cards */
.voice-switch.season-tabs { margin: 4px 0 12px; display: flex; width: fit-content; max-width: 100%; }
.season-tabs .vs-opt { padding: 7px 16px; font-size: 14px; }
.lead-bar { gap: 10px; flex-wrap: wrap; }
.lead-bar .voice-switch { margin-left: 0; }
.lead-links { margin-left: auto; gap: 6px; }
.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 10px 0; }
.lead-card { border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; background: var(--panel); }
.lead-cat { display: flex; justify-content: space-between; align-items: baseline; font-weight: bold; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 12px; color: var(--muted); text-decoration: none; }
.lead-cat:hover { color: var(--ink); text-decoration: underline; }
.lead-q { font-weight: normal; text-transform: none; letter-spacing: 0; font-size: 11px; }
.lead-first { display: flex; flex-direction: column; margin: 6px 0 4px; }
.lead-first .lead-val { font-size: 26px; font-weight: bold; line-height: 1.1; }
.lead-first .lead-who { font-size: 13.5px; }
.lead-rest { margin: 4px 0 0; padding-left: 20px; font-size: 13px; }
.lead-rest li { display: flex; justify-content: space-between; gap: 8px; }
.lead-rest li::marker { color: var(--muted); }
.lead-club.mine, .lead-rest li.mine b, .lead-first.mine .lead-val { color: var(--accent); }

.season-leaders ol { margin: 2px 0 8px; padding-left: 20px; font-size: 13px; }

.hurt-tag { margin-left: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: var(--accent);
  padding: 0 5px; border-radius: 3px; }
.pc-season { color: var(--good); }
.season-standings tr.hurt-now td { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* The last play, called under the field, by the decision buttons */
.field-play { margin-top: 8px; border: 1px solid var(--rule); border-left: 3px solid var(--runner); border-radius: 4px; background: var(--paper); }
.field-play .fl-label { font: bold 10.5px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 5px 10px 0; }
.field-play .fd-ab { border: 0; background: transparent; padding: 4px 10px 8px; }
.field-play .fd-text p { font-size: 13.5px; }
details.field-key { display: inline-block; margin-left: 8px; }
details.field-key summary { cursor: pointer; display: inline; text-decoration: underline dotted; }
.field-tip { margin: 0; padding: 4px 10px 8px; color: var(--muted); }

/* Questions asked on the page (instead of pop-ups) */
.confirm-wrap { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.confirm-q { color: var(--accent); font-weight: bold; }
.confirm-box { max-width: 420px; }

/* The catalog and the draft use the whole screen */
body.wide-page main { max-width: none; padding-left: 24px; padding-right: 24px; }
body.wide-page .cat-table th, body.wide-page .cat-table td { padding: 4px 6px; }

/* Playoffs: the bracket */
.bracket { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.bracket-round h3 { margin: 0 0 8px; }
.bracket-series { border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }
.bracket-series.mine { border-color: var(--accent); }
.bracket-team { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.bracket-team a { flex: 1; }
.bracket-team.won { font-weight: bold; }
.bracket-team.lost { opacity: 0.55; }
.bracket .seed { display: inline-block; min-width: 18px; text-align: center; font-size: 11px; border-radius: 3px; background: var(--rule); }
/* Awards */
.award-winner { font-size: 1.1em; }
.ballot { gap: 4px; flex-wrap: nowrap; }
/* The newspaper */
.paper { background: #f3ecd9; color: #1d1a14; font-family: "Old Standard TT", Georgia, "Times New Roman", serif; padding: 18px 28px 28px;
  max-width: 1080px; margin: 8px auto 24px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); border: 1px solid #cfc3a3; }
.paper a.plink { color: #1d1a14; text-decoration: underline; }
.paper-ears { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.paper-mast { font-family: "UnifrakturMaguntia", "Old English Text MT", Georgia, serif; font-weight: normal; text-align: center;
  font-size: clamp(34px, 7vw, 72px); margin: 4px 0 6px; line-height: 1.05; color: #1d1a14; letter-spacing: 0; text-transform: none; }
.paper-dateline { display: flex; justify-content: space-between; gap: 8px; border-top: 3px double #1d1a14; border-bottom: 1px solid #1d1a14;
  padding: 3px 0; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.paper-head { text-align: center; text-transform: uppercase; font-size: clamp(30px, 6vw, 60px); line-height: 1; margin: 14px 0 6px;
  font-weight: 700; letter-spacing: 1px; color: #1d1a14; font-family: "Old Standard TT", Georgia, serif; }
.paper-sub { text-align: center; font-style: italic; font-size: 19px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #1d1a14; }
.paper-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; }
.paper-main { min-width: 0; }
.paper { box-sizing: border-box; overflow-wrap: break-word; }
.paper-side section { overflow-x: auto; }
.paper-side { border-left: 1px solid #1d1a14; padding-left: 18px; min-width: 0; }
.paper-story { column-count: 2; column-gap: 22px; column-rule: 1px solid #9c917a; font-size: 16px; line-height: 1.5; text-align: justify; }
.paper-story p { margin: 0 0 10px; }
.paper-story p:first-child::first-letter { float: left; font-size: 3.2em; line-height: 0.9; padding: 4px 6px 0 0; font-weight: 700; }
.paper h3 { font-family: "Old Standard TT", Georgia, serif; text-transform: uppercase; letter-spacing: 1px; font-size: 15px;
  border-top: 2px solid #1d1a14; border-bottom: 1px solid #1d1a14; padding: 3px 0; margin: 16px 0 8px; color: #1d1a14; }
.paper h4 { margin: 8px 0 2px; font-size: 14px; text-transform: uppercase; }
.paper-round p { margin: 0 0 6px; }
.paper-small { font-size: 12px; }
.paper-list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.paper-list li { padding: 2px 0; border-bottom: 1px dotted #9c917a; }
.paper-cat { font-variant: small-caps; font-weight: 700; }
.paper-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.paper-table th, .paper-table td { padding: 1px 4px; text-align: right; border: 0; background: none; color: #1d1a14; }
.paper-table th:first-child, .paper-table td:first-child { text-align: left; }
.paper-table th { border-bottom: 1px solid #1d1a14; font-weight: 700; }
.paper-table tr.paper-champ td { font-weight: 700; }
.paper-yours p { margin: 0 0 4px; }
@media (max-width: 920px) {
  .paper { padding: 12px 14px 20px; }
  .paper-grid { grid-template-columns: 1fr; }
  .paper-side { border-left: 0; padding-left: 0; }
  .paper-story { column-count: 1; }
}
@media print {
  body * { visibility: hidden; }
  .paper, .paper * { visibility: visible; }
  .paper { position: absolute; left: 0; top: 0; box-shadow: none; border: 0; margin: 0; max-width: none; }
}

/* The live draft */
.ld-clock { font-size: 1.15em; font-weight: bold; margin: 4px 0; }
.ld-clock.mine { color: var(--accent); }
.ld-log li.mine, .ld-full li.mine { font-weight: bold; }
.ld-full { columns: 2 260px; margin: 8px 0 0; }

/* Liked cards in the catalog */
.cat-table .cat-like { width: 28px; text-align: center; padding-left: 2px; padding-right: 2px; }
.like-btn { border: 0; background: none; padding: 0 2px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted); min-height: 0; box-shadow: none; }
.like-btn.on { color: #e0a100; }
.like-btn:hover { color: #e0a100; }

/* The scout */
.scout-report > p { margin: 8px 0; }
.scout-pick { border-top: 1px solid var(--rule); padding: 6px 0; }
.scout-pick p { margin: 2px 0 0; }
.scout-pick .row { gap: 6px; align-items: center; }

/* Divisions */
.div-standings h3.league-name { margin: 12px 0 4px; }
.div-standings h4.div-name { margin: 10px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.season-standings .seed { margin-left: 6px; display: inline-block; min-width: 16px; text-align: center; font-size: 10px; border-radius: 3px; background: var(--rule); }
.paper-table tr.paper-div td { font-variant: small-caps; font-weight: 700; padding-top: 6px; border-bottom: 1px dotted #9c917a; text-align: left; }
.div-standings .season-standings { width: 100%; table-layout: fixed; }
.div-standings .season-standings th:nth-child(1) { width: 28px; }
.div-standings .season-standings th:nth-child(2) { width: 34%; }
/* Win chance in the score bug */
.score-bug .sb-wp { font-size: 12px; opacity: 0.85; white-space: nowrap; }
/* The catalog's player search */
.cat-search-row { margin-bottom: 8px; }
.cat-search { flex: 1; min-width: 0; width: 100%; font-size: 16px; padding: 8px 10px; }
/* Your chance to win, before the game */
.odds-box { padding: 10px 14px; }
.odds-line { font-size: 1.1em; }
.odds-pct { font-size: 1.4em; color: var(--accent); }
.odds-diff { font-weight: bold; }
.odds-diff.up { color: var(--good); }
.odds-diff.down { color: var(--accent); }
.odds-box p { margin: 4px 0 0; }
/* A new version is ready */
.update-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1000; display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; max-width: calc(100% - 32px); background: var(--panel); color: var(--ink); border: 2px solid var(--accent);
  border-radius: 8px; padding: 10px 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); font-size: 14px; }
/* A label that looks like a button (file pickers) */
.button-like { display: inline-block; cursor: pointer; border: 1px solid var(--rule); border-radius: 4px; padding: 6px 12px; background: var(--panel); }
.button-like:hover, .button-like:focus-within { border-color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.schedule b.win { color: var(--good); }
.schedule b.loss { color: var(--accent); }
/* Honors won in a season, on the player card */
.pc-honors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.pc-honor { display: inline-block; font-size: 12px; font-weight: bold; padding: 2px 8px; border-radius: 999px; background: #e0a100; color: #1d1a14; }
/* Records */
.records-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 18px; }
.record-cat h3 { margin: 4px 0; font-size: 14px; }
.record-cat ol { margin: 0; padding-left: 20px; font-size: 14px; }
.record-cat li { margin-bottom: 4px; }

/* --- Era skins for the masthead (ui/skins.js): colors, lettering, the picture's overlay --- */
.skin-pick { gap: 6px; }
.skin-pick select { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; background: transparent; border: 0;
  padding: 0 2px; max-width: 17em; cursor: pointer; }
.skin-pick select option { color: #1d1d1b; background: #fff; }
.tagline { font-family: var(--mh-font, inherit); }
/* Over a picture, the lettering keeps a shadow so it reads. */
.masthead .logo, .masthead .tagline { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); }
body[data-skin="deadball"] .masthead, body[data-skin="deadball"] .mode { --mh-bg: #4a3b28; --mh-bg2: #2b2116; --mh-ink: #f2e6c9; --mh-gold: #d8b46a; --mh-line: #7b2d1d;
  --mh-font: "Old Standard TT", Georgia, serif; --mh-track: 1.5px; --mh-dots: linear-gradient(transparent, transparent);
  --mh-tint: linear-gradient(180deg, rgba(38, 52, 32, 0.55), rgba(43, 33, 22, 0.78)); }
body[data-skin="deadball"] .masthead-link { border-radius: 0; background: rgba(0, 0, 0, 0.18); }
body[data-skin="golden"] .masthead, body[data-skin="golden"] .mode { --mh-bg: #1f4d36; --mh-bg2: #10291b; --mh-ink: #f6efd9; --mh-gold: #c9a227; --mh-line: #b5332e;
  --mh-font: Oswald, "Arial Narrow", sans-serif; --mh-track: 2px; --mh-dots: linear-gradient(transparent, transparent);
  --mh-tint: linear-gradient(180deg, rgba(18, 74, 46, 0.55), rgba(12, 44, 28, 0.78)); }
body[data-skin="golden"] .masthead-link { border-color: rgba(201, 162, 39, 0.6); }
body[data-skin="postwar"] .masthead, body[data-skin="postwar"] .mode { --mh-bg: #174a3c; --mh-bg2: #0c2a22; --mh-ink: #fdf8ee; --mh-gold: #e8c547; --mh-line: #c8102e;
  --mh-font: "Old Standard TT", Georgia, serif; --mh-track: 1px;
  --mh-tint: linear-gradient(180deg, rgba(16, 66, 52, 0.55), rgba(10, 38, 30, 0.78)); }
body[data-skin="postwar"] .masthead-link { border-radius: 999px; }
body[data-skin="seventies"] .masthead, body[data-skin="seventies"] .mode { --mh-bg: #5a2e12; --mh-bg2: #331a0a; --mh-ink: #fff1d6; --mh-gold: #f7a823; --mh-line: #e2581d;
  --mh-font: Righteous, "Cooper Black", Georgia, serif; --mh-track: 0.5px; --mh-dots: linear-gradient(transparent, transparent);
  --mh-tint: linear-gradient(180deg, rgba(24, 72, 38, 0.5), rgba(46, 30, 10, 0.75)); --mh-img-y: 55%; }
body[data-skin="seventies"] .masthead-link { border-radius: 10px; text-transform: none; font-size: 14px; }
body[data-skin="modern"] .masthead, body[data-skin="modern"] .mode { --mh-bg: #0f3d34; --mh-bg2: #05201b; --mh-ink: #ffffff; --mh-gold: #3ee6c1; --mh-line: #12c2a5;
  --mh-font: Inter, "Segoe UI", system-ui, sans-serif; --mh-track: 0.5px; --mh-dots: linear-gradient(transparent, transparent);
  --mh-tint: linear-gradient(180deg, rgba(4, 58, 44, 0.55), rgba(3, 30, 24, 0.8)); }
body[data-skin="modern"] .masthead-link { border-radius: 6px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(4px); }
body[data-skin] .masthead-link:hover, body[data-skin] .masthead-link:focus-within { background: var(--mh-gold); border-color: var(--mh-gold); color: #1d1d1b; }

/* The skins' own titles (ui/brand.js): the face, a drop shadow under it */
.logo-skin .lg-shadow-t { fill: rgba(0, 0, 0, 0.55); }
.logo-skin { width: min(300px, 100%); }

/* Estimated fielding on the player card */
.est-tag { font-size: 11px; color: var(--accent); font-weight: bold; }
.est-note { margin-top: 4px; }
body[data-skin="deadball"] .masthead, body[data-skin="deadball"] .mode { --mh-img-y: 30%; }

/* The exploding scoreboard (ui/scoreboard.js): a canvas over the masthead, there only during a show */
.masthead { overflow: hidden; }
.scoreboard-show { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s; z-index: 2; }
.scoreboard-show.on { opacity: 1; }
/* Narrower screens: the switches show their icons only (the label is in the tooltip). */
@media (max-width: 900px) {
  #sound-toggle span, #show-toggle span:last-child, .theme-toggle .tt-label { display: none; }
  .skin-pick select { max-width: 13em; }
}

/* The show's strip when the masthead has scrolled away: it drops in at the top of the window */
.scoreboard-float { position: fixed; top: 0; left: 0; right: 0; height: 110px; z-index: 60; margin: 0; pointer-events: none;
  transform: translateY(-120%); transition: transform 0.3s ease-out; }
.scoreboard-float.on { transform: translateY(0); }
@media (max-width: 480px) { .scoreboard-float { height: 90px; } }
body[data-skin="golden"] .masthead, body[data-skin="golden"] .mode { --mh-img-y: 35%; }
body[data-skin="postwar"] .masthead, body[data-skin="postwar"] .mode { --mh-img-y: 30%; }
body[data-skin="seventies"] .masthead, body[data-skin="seventies"] .mode { --mh-img-y: 35%; }
body[data-skin="modern"] .masthead, body[data-skin="modern"] .mode { --mh-img-y: 30%; }

/* Optimize, on the lineup screen */
.opt-box { padding: 10px 14px; }
.opt-box p, .opt-box div.small { margin: 6px 0 0; }

/* The ballpark's board under the matchup (ui/scoreboard.js) */
.game-board { position: relative; height: 150px; margin-top: 10px; border-radius: 6px; overflow: hidden;
  background: #0b0d0c; border: 3px solid #2a2f2c; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.8); }
.game-board-idle { position: absolute; inset: 0; }
.game-board .scoreboard-show { z-index: 1; }
.game-board-idle { transition: opacity 0.25s; }
.game-board:has(.scoreboard-show.on) .game-board-idle { opacity: 0.15; }

/* The game story's pull quote and inset photos */
.paper-pull { margin: 8px 0 10px; padding: 6px 4px; border-top: 2px solid var(--np-rule, #3b362c); border-bottom: 2px solid var(--np-rule, #3b362c);
  font: italic 700 15px/1.25 "Old Standard TT", Georgia, serif; text-align: center; break-inside: avoid; }
.paper-pull cite { display: block; font: normal 10.5px/1.2 Georgia, serif; font-style: normal; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.paper-inset { float: right; width: 42%; margin: 2px 0 6px 10px; break-inside: avoid; }
.paper-inset .paper-photo-frame { aspect-ratio: 3 / 4; }
.paper-inset figcaption { font: italic 10.5px/1.25 "Old Standard TT", Georgia, serif; margin-top: 2px; }

/* The season paper's byline, lead photo and "Around the league" briefs */
.paper .paper-byline { text-align: center; font: bold 11px/1 Georgia, serif; text-transform: uppercase; letter-spacing: 1.2px; margin: -4px 0 12px; }
.paper-main > .paper-photo { margin: 0 0 12px; width: 100%; }
.paper-main > .paper-photo .paper-photo-frame { aspect-ratio: 16 / 9; }
/* A portrait in the lead (ui/paper.js marks it): set into the story at column width, the way the
   papers ran a head-and-shoulders shot, instead of a wide frame that blows the face up. */
.paper-photo.is-tall .paper-photo-frame, .paper-main > .paper-photo.is-tall .paper-photo-frame { aspect-ratio: 3 / 4; }
.paper-photo.is-tall .paper-photo-frame img { object-position: 50% 12%; }
.paper-main > .paper-photo.is-tall { float: right; width: 42%; max-width: 300px; margin: 4px 0 10px 16px; }
.paper .paper-photo.is-tall { width: 42%; max-width: 300px; }
@media (max-width: 480px) { .paper-main > .paper-photo.is-tall { width: 52%; margin-left: 12px; } }
.paper-brief { overflow: hidden; border-bottom: 1px solid #9c917a; padding: 8px 0; font-size: 15px; line-height: 1.45; }
.paper-brief p { margin: 0; }
.paper-brief .paper-inset { width: 110px; }

/* Manual search */
.manual-search { width: 100%; box-sizing: border-box; margin: 4px 0 2px; padding: 8px 10px; font-size: 15px; }
.manual-count { margin: 2px 0 6px; min-height: 1em; }
mark.manual-hit { background: #ffe58a; color: inherit; padding: 0 1px; border-radius: 2px; }

/* The catalog's Season / Career switch */
.cat-mode { margin-left: auto; }
.cat-mode .vs-opt:disabled { opacity: 0.6; cursor: not-allowed; }
.soon-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-left: 2px; }

/* The Now skin (2009 on): the data era, green on black */
body[data-skin="now"] .masthead, body[data-skin="now"] .mode { --mh-bg: #04140a; --mh-bg2: #010603; --mh-ink: #d9ffe4; --mh-gold: #39ff6a; --mh-line: #1fd65c;
  --mh-font: "Courier Prime", "Courier New", monospace; --mh-track: 0.5px; --mh-dots: linear-gradient(transparent, transparent);
  --mh-tint: linear-gradient(180deg, rgba(2, 30, 12, 0.55), rgba(1, 12, 5, 0.82)); --mh-img-y: 40%; }
body[data-skin="now"] .masthead-link { border-radius: 2px; background: rgba(0, 0, 0, 0.45); border-color: #1fd65c; }

/* The Manual's topic tabs */
.manual-tabs { gap: 6px; }
.manual-tab { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: inherit; cursor: pointer; }
.manual-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.manual-next { margin-top: 14px; text-align: right; }

/* Runners' speed, the on-deck circle, the held final play, and the Calls setting */
.runner-tag.fast { fill: #1f6b3a; }
.runner-tag.slow { fill: #7a2a20; }
.ondeck-dot { fill: none; stroke: #fff; stroke-width: 1.5; stroke-dasharray: 2 1.5; }
.ondeck { opacity: 0.9; }
.mu-due { overflow-wrap: anywhere; }
.game-over-btn { font-size: 16px; padding: 10px 14px; align-self: flex-start; }
.calls-pick { gap: 4px; align-items: center; }

/* While an at-bat is being called, the half's running total keeps the result to itself. */
.feed.telling .fd-half:first-of-type .fd-half-sum { visibility: hidden; }

/* Home: the mode cards wear the skin, each its own picture (or a slice of the skin's) under its title */
.mode-art[data-card="exhibition"] { --card-img: var(--card-exhibition, none); }
.mode-art[data-card="season"] { --card-img: var(--card-season, none); }
.mode-art[data-card="dynasty"] { --card-img: var(--card-dynasty, none); }
.modes .mode { padding: 0; overflow: hidden; gap: 0; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.modes .mode:hover:not(.soon) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); }
.mode-art { position: relative; min-height: 96px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  padding: 12px 14px; color: var(--mh-ink);
  background:
    var(--mh-dots, radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px)) 0 0 / 5px 5px,
    var(--mh-tint, linear-gradient(transparent, transparent)),
    var(--card-img, none) center 45% / cover no-repeat,
    var(--mh-img, none) var(--art-x, 50%) var(--mh-img-y, 45%) / 300% auto no-repeat,
    linear-gradient(180deg, var(--mh-bg) 0%, var(--mh-bg2) 100%);
  border-bottom: 3px solid var(--mh-line); box-shadow: 0 2px 0 var(--mh-gold); }
.mode-art h2 { margin: 0; font-family: var(--mh-font, var(--mono)); letter-spacing: var(--mh-track, 2px); font-size: 24px;
  color: var(--mh-ink); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); text-transform: uppercase; }
.mode-art .badge { color: var(--mh-ink); border-color: var(--mh-gold); background: rgba(0, 0, 0, 0.35); }
.mode-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 16px; flex: 1; }
.mode-body .what { flex: 1; margin: 0; line-height: 1.5; }
.modes .mode button.primary { background: var(--mh-bg); border: 2px solid var(--mh-gold); color: var(--mh-ink); letter-spacing: 0.5px; }
.modes .mode button.primary:hover:not(:disabled) { background: var(--mh-gold); border-color: var(--mh-gold); color: #1d1d1b; filter: none; }
.modes .mode.soon { opacity: 1; }
.modes .mode.soon .mode-art { filter: grayscale(0.85) brightness(0.9); }
.modes .mode.soon .mode-body { opacity: 0.6; }
.home-intro { font-size: 17px; line-height: 1.5; margin: 4px 0 14px; }

/* The scene's last pitch */
.fd-pitchline { font-style: italic; color: var(--muted); }

/* A play's tag before its result is called */
.fd-tag.pending { color: var(--muted); border-style: dashed; }

/* Career catalog: the rubber arm tag */
.rubber-tag { font-size: 11px; color: var(--accent); font-weight: bold; }

/* The career card */
.career-card .cc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.career-card .cc-photo { width: 96px; height: 120px; object-fit: cover; object-position: 50% 20%; border-radius: 6px; border: 1px solid var(--rule); }
.career-card h2 { margin: 0 0 2px; }
.career-card .cc-sub { color: var(--muted); font-size: 14px; }
.career-card .cc-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.career-card .cc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 18px; font-size: 14px;
  padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.career-card .cc-bio p { line-height: 1.55; margin: 0 0 8px; }

/* The career card: nickname, price, a season's table, ratings, the biography last */
.career-card .cc-nick { font-style: italic; color: var(--muted); margin: -2px 0 4px; min-height: 0; }
.career-card .cc-price { margin-top: 4px; }
.career-card .cc-badges { margin: 4px 0 8px; }
.career-card table.cc-season { width: 100%; border-collapse: collapse; font-size: 14px; }
.career-card table.cc-season th, .career-card table.cc-season td { text-align: center; padding: 3px 6px; border-bottom: 1px solid var(--rule); }
.career-card .cc-ratings { margin: 4px 0 6px; }
.career-card .cc-splits { margin-bottom: 4px; }
.career-card .cc-bio { border-top: 1px solid var(--rule); padding-top: 8px; font-size: 14.5px; }

/* Career card ratings: groups side by side, one rating a line, grades lined up on the right */
.career-card .cc-ratings { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; margin: 6px 0 10px; align-items: start; }
.career-card .cc-group { border-top: 2px solid var(--rule); padding-top: 4px; }
.career-card .cc-gt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.career-card .cc-rate { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px dotted var(--rule); font-size: 13.5px; }
.career-card .cc-rate:last-child { border-bottom: 0; }
.career-card .cc-rl { color: var(--ink); }
.career-card .cc-rate .g-tag { min-width: 86px; justify-content: space-between; }
.career-card .cc-word, .career-card .cc-num { font-weight: 700; font-size: 13px; }

/* Career card accomplishment chips: an icon, the honor, a count */
.career-card .cc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.career-card .cc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--panel, var(--paper)); color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.career-card .cc-ico { width: 14px; height: 14px; flex: none; fill: var(--muted); }
.career-card .cc-count { font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.career-card .cc-gold .cc-ico { fill: #c9a227; }
.career-card .cc-hof { background: #c9a227; border-color: #8a6d0f; color: #1d1d1b; }
.career-card .cc-hof .cc-ico { fill: #1d1d1b; }
.career-card .cc-active .cc-ico { fill: var(--good); }
.career-card .cc-retired { color: var(--muted); }

/* A pitcher's arm today on the manager's card */
.arm-tag { font-weight: 600; white-space: nowrap; }
.arm-tag.arm-fresh { color: var(--good); }
.arm-tag.arm-tired { color: var(--runner); }
.arm-tag.arm-unavailable { color: var(--accent); }
.arm-tag .arm-last, .mc-note { display: block; font-weight: 400; white-space: nowrap; }
/* The card's tables stay inside their panels: narrower pickers, a scroll if still too wide. */
.mcard-wrap { overflow-x: auto; }
.mcard-table select { max-width: 11em; }
.mcard-table td { vertical-align: middle; }


/* Highlights after the last out */
.reel .reel-play { margin-top: 0; border-left-color: var(--accent); }
.reel-buttons { gap: 8px; flex-wrap: wrap; margin: 6px 0; }

/* Season setup: grouped settings, labels beside their controls */
.setup-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-bottom: 14px; align-items: start; }
.sf-section { border: 1px solid var(--rule); border-radius: 6px; background: var(--panel, var(--paper)); padding: 6px 14px 10px; margin: 0; min-width: 0; }
.sf-section legend { font: bold 11px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
.sf-row { display: grid; grid-template-columns: 9.5em 1fr; gap: 4px 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px dotted var(--rule); }
.sf-row:last-child { border-bottom: 0; }
.sf-label { color: var(--muted); font-size: 13.5px; }
.sf-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-controls select, .sf-controls input { max-width: 100%; }
.sf-note { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
@media (max-width: 520px) {
  .setup-form { grid-template-columns: 1fr; }
  .sf-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Season setup: the kind of league first */
.league-kind { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 12px; }
.lk-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 10px 14px; border: 2px solid var(--rule);
  border-radius: 8px; background: var(--panel, var(--paper)); color: var(--ink); cursor: pointer; }
.lk-opt.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lk-opt:disabled { opacity: 0.55; cursor: not-allowed; }
.lk-title { font-weight: 700; font-size: 15px; }
.lk-what { font-size: 12.5px; color: var(--muted); }
/* Controls fill their row and never push past the box (long option names) */
.sf-ctl { min-width: 0; }
.sf-controls > select, .sf-controls > input { flex: 1 1 150px; min-width: 0; width: 100%; }
.setup-form { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
@media (max-width: 520px) { .setup-form { grid-template-columns: 1fr; } }
/* Tabs and switches hover in the skin's colour, not the plain buttons' black */
button.vs-opt:hover:not(:disabled):not(.on), button.manual-tab:hover:not(:disabled):not(.on) {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel, var(--paper))); color: var(--ink); }
button.manual-tab:hover:not(:disabled):not(.on) { border-color: var(--accent); }
.vs-opt.on, button.vs-opt.on:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
button.lk-opt:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 8%, var(--panel, var(--paper))); color: var(--ink); border-color: var(--accent); }
button.manual-tab.on:hover:not(:disabled) { background: var(--accent); color: #fff; }
/* The team page's stat tables: click a column to sort */
.team-stats th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.team-stats th.sortable:hover, .team-stats th.sorted { color: var(--accent); }
.season-standings.team-stats td.num, .season-standings.team-stats th.num { white-space: nowrap; }
.career-card .cc-this { margin-bottom: 4px; }
.career-card .cc-this table.cc-season td { font-weight: 600; }
/* The team page's tabs */
.team-tabbed .team-tabs { margin: 10px 0 8px; }
.team-tabbed .team-tabs .vs-opt { padding: 6px 16px; font-size: 13.5px; }

/* Fielding leaders: a tab for each position */
.pos-tabs { margin: 4px 0 10px; }
.pos-tabs .vs-opt { min-width: 2.6em; }

/* A hurt man's card: a red banner at the top */
.hurt-banner { background: #b3261e; color: #fff; padding: 8px 12px; border-radius: 4px; margin: 6px 0 10px; font-size: 14px; letter-spacing: 0.2px; }
.hurt-banner b { text-transform: uppercase; letter-spacing: 1px; }

/* The manager's card: team instructions, read-only choices */
.orders-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 8px 24px; }
.orders-grid > * { min-width: 0; }
.orders-grid table { width: 100%; }
.orders-grid td { white-space: normal; }
.orders-grid td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.orders-grid .mcard-table select { max-width: none; }
.mc-ro { white-space: nowrap; }
.panel h3 + .mcard-wrap { margin-bottom: 10px; }
.th-actions { margin-top: 8px; }

/* Team tables: the totals row */
.team-stats tfoot td { border-top: 2px solid var(--ink, currentColor); font-weight: bold; }

/* Hot and cold, the last two weeks or so (team pages, player cards) */
/* Hot or cold the last two weeks or so: a flame or a snowflake beside the name. */
.form-tag { margin-left: 5px; font-size: 13px; line-height: 1; cursor: help; vertical-align: 1px; }
.plink-form { white-space: nowrap; }
.pc-streaks .form-tag { margin: 0 4px 0 0; }
/* A player card's splits */
.pc-splits { margin: 4px 0 8px; }
.pc-splits tr.split-gap td { border-top: 2px solid var(--rule); }

/* --- The news in the medium of its era (ui/media.js) --------------------------------------------- */
.md { box-sizing: border-box; overflow-wrap: break-word; }
.md *, .md *::before, .md *::after { box-sizing: border-box; }
.md figure { margin: 0; }
.md-photo { overflow: hidden; }
.md-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.md table { border-collapse: collapse; }

/* 1920-46: the paper in wartime dress */
.paper.np-wartime .paper-head { font-family: Oswald, "Arial Narrow", Impact, sans-serif; font-weight: 700; letter-spacing: 0.5px; }
.paper.np-wartime .paper-head { text-shadow: none; }
.md-radio { border: 3px double #1d1a14; padding: 6px 8px; margin: 10px 0; font: 12.5px/1.35 "Old Standard TT", Georgia, serif; color: #1d1a14; background: #ece3c9; }
.md-radio-head { font: 700 13px/1.2 Oswald, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: 1.5px; text-align: center;
  border-bottom: 1px solid #1d1a14; padding-bottom: 3px; margin-bottom: 4px; }
.md-radio ul { list-style: none; margin: 0; padding: 0; }
.md-radio li { padding: 2px 0; border-bottom: 1px dotted #8c8069; }
.md-radio li:last-child { border-bottom: 0; }
.md-bond { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; margin: 10px auto; padding: 6px 8px;
  max-width: 260px; border: 3px solid #1f3a6b; outline: 2px solid #b5332e; outline-offset: -7px; background: #f7f1df; color: #1f3a6b; }
.md-bond-star { color: #b5332e; font-size: 18px; line-height: 1; }
.md-bond b { font: 700 16px/1.1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 1.5px; color: #b5332e; }
.md-bond span { font: italic 12px/1.3 "Old Standard TT", Georgia, serif; }

/* 1947-68: the weekly sports tabloid, two inks on newsprint */
.md-tabloid { --tb-ink: #1a1816; --tb-red: #c8102e; --tb-paper: #f1ead6; background: var(--tb-paper); color: var(--tb-ink);
  font-family: "Old Standard TT", Georgia, serif; border: 1px solid #cfc4a6; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.md-tb-flag { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; background: var(--tb-red); color: #fff; padding: 8px 14px 6px; }
.md-tb-name { font: 700 30px/1 Oswald, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.md-tb-meta { font: 700 11px/1.2 Oswald, "Arial Narrow", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.md-tb-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; align-items: center; padding: 16px 16px 12px;
  background: repeating-linear-gradient(-45deg, rgba(200, 16, 46, 0.07) 0 6px, transparent 6px 12px); border-bottom: 4px solid var(--tb-ink); }
.md-tb-cutout { transform: rotate(-2.5deg); }
.md-tb-cutout .md-photo { aspect-ratio: 4 / 5; border: 6px solid #fff; box-shadow: 4px 6px 0 var(--tb-red), 0 6px 14px rgba(0, 0, 0, 0.3); }
.md-tb-cutout img, .md-tb-inset img { filter: grayscale(1) contrast(1.25) brightness(1.02); }
.md-tb-cutout figcaption { font: italic 12px/1.3 "Old Standard TT", Georgia, serif; margin-top: 8px; transform: rotate(2.5deg); }
.md-tb-cutout figcaption a, .md-tb-inset figcaption a { color: inherit; }
.md-tb-head { font: 700 clamp(26px, 4.4vw, 46px)/0.98 Oswald, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; margin: 0 0 8px; color: var(--tb-ink); }
.md-tb-deck { font: 700 15px/1.25 Oswald, "Arial Narrow", sans-serif; color: var(--tb-red); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 4px; }
.md-tb-score { display: inline-grid; gap: 2px; margin-top: 8px; border: 2px solid var(--tb-ink); padding: 4px 8px; background: #fff; }
.md-tb-score div { display: flex; justify-content: space-between; gap: 18px; font: 700 14px/1.3 Oswald, "Arial Narrow", sans-serif; text-transform: uppercase; }
.md-tb-inside { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; padding: 12px 16px 16px; }
.md-tb-byline { font: 700 11px/1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tb-red); margin: 0 0 8px; }
.md-tb-story { column-count: 2; column-gap: 18px; column-rule: 1px solid #b9ad8d; font-size: 15px; line-height: 1.45; text-align: justify; }
.md-tb-story p { margin: 0 0 8px; }
.md-tb-story p:first-child::first-letter { float: left; font: 700 3em/0.85 Oswald, sans-serif; color: var(--tb-red); padding: 3px 5px 0 0; }
.md-tb-story a { color: var(--tb-ink); }
.md-tb-insets { display: flex; gap: 10px; margin-top: 8px; }
.md-tb-inset { width: 120px; }
.md-tb-inset .md-photo { aspect-ratio: 1; border: 4px solid #fff; box-shadow: 2px 3px 0 var(--tb-red); }
.md-tb-inset figcaption { font: italic 11px/1.25 Georgia, serif; margin-top: 4px; }
.md-tb-sec h3 { font: 700 18px/1.1 Oswald, "Arial Narrow", sans-serif; text-transform: uppercase; color: var(--tb-red);
  border-top: 3px solid var(--tb-ink); padding-top: 6px; margin: 14px 0 6px; }
.md-tb-sec, .md-tb-sec p { font-size: 14px; line-height: 1.45; }
.md-tb-sec a { color: var(--tb-ink); }
/* The season's short pieces (who won what), each with a small picture */
.md-briefs .paper-brief { overflow: hidden; margin: 0 0 10px; }
.md-briefs .paper-brief p { margin: 0; }
.md-briefs figure { float: right; width: 92px; margin: 2px 0 4px 10px; }
.md-briefs .paper-photo-frame { aspect-ratio: 1; overflow: hidden; border: 3px solid #fff; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.35); }
.md-briefs .paper-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.md-briefs figcaption { font-size: 11px; font-style: italic; }
.md-tabloid .md-briefs img { filter: grayscale(1) contrast(1.2); }
.md-web .md-briefs .paper-photo-frame::after, .md-phone .md-briefs .paper-photo-frame::after, .md-tv .md-briefs .paper-photo-frame::after { display: none; }
.md-web .md-briefs img, .md-phone .md-briefs img, .md-tv .md-briefs img { filter: none; }
.md-tb-agate { border-left: 2px solid var(--tb-ink); padding-left: 12px; font: 11px/1.35 "Courier Prime", "Courier New", monospace; }
.md-tb-agate h3 { font: 700 15px/1 Oswald, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: 1px; color: var(--tb-red);
  border-bottom: 2px solid var(--tb-ink); padding-bottom: 3px; margin: 0 0 6px; }
.md-tb-agate h4 { font: 700 11px/1.2 Oswald, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: 1px; margin: 8px 0 2px; }
.md-tb-agate table, .md-tb-agate .paper-table { width: 100%; font: 11px/1.3 "Courier Prime", "Courier New", monospace; }
.md-tb-agate td, .md-tb-agate th { padding: 0 2px; text-align: right; color: var(--tb-ink); background: none; border: 0; }
.md-tb-agate td:first-child, .md-tb-agate th:first-child { text-align: left; }
.md-tb-agate .paper-list { font-size: 11px; }
.md-tb-agate p, .md-tb-agate li { margin: 2px 0; }
.md-agate table td.r { font-weight: 700; padding-left: 6px; }
@media (max-width: 720px) {
  .md-tb-hero, .md-tb-inside { grid-template-columns: minmax(0, 1fr); }
  .md-tb-agate { border-left: 0; border-top: 2px solid var(--tb-ink); padding: 8px 0 0; }
}
.postgame .md-tb-hero, .postgame .md-tb-inside { grid-template-columns: minmax(0, 1fr); }
.postgame .md-tb-story { column-count: 1; }
.postgame .md-tb-cutout { max-width: 240px; margin: 0 auto; }

/* 1969-93: the local TV station's Sports Final */
.md-tv-set { background: linear-gradient(180deg, #6b4423, #4a2d14); border-radius: 22px; padding: 16px 16px 12px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3); }
.md-tv-screen { position: relative; overflow: hidden; border-radius: 26px / 20px; padding: 16px 18px 52px; color: #fff;
  background: radial-gradient(120% 100% at 50% 40%, #16357a 0%, #0b1d48 70%, #050d22 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.65), inset 0 0 0 3px #1b1b1b; font-family: Righteous, "Arial Rounded MT Bold", Oswald, sans-serif; }
.md-tv-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.md-tv-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.md-tv-logo { display: inline-flex; flex-direction: column; line-height: 0.9; padding: 6px 12px 6px 10px; transform: skewX(-8deg);
  background: linear-gradient(180deg, #f7a823 0 33%, #e2581d 33% 66%, #b5332e 66%); border: 3px solid #fff; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.md-tv-logo span { font-size: 26px; letter-spacing: 2px; color: #fff; text-shadow: 2px 2px 0 #3a1608; }
.md-tv-logo span + span { font-size: 30px; color: #fff6c2; }
.md-tv-bug { font: 20px/1 Righteous, sans-serif; color: rgba(255, 255, 255, 0.65); border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; padding: 10px 7px; }
.md-tv-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 14px; align-items: center; }
.md-tv-score { display: inline-grid; min-width: 220px; border: 3px solid #fff; background: #0c2c6b; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); margin-bottom: 10px; }
.md-tv-final { background: #f7a823; color: #1b1b1b; font-size: 15px; letter-spacing: 3px; padding: 3px 10px; }
.md-tv-team { display: flex; justify-content: space-between; gap: 16px; padding: 4px 10px; font-size: 19px; text-transform: uppercase; }
.md-tv-team b { font-size: 26px; font-weight: 400; color: #fff6c2; }
.md-tv-team + .md-tv-team { border-top: 2px solid rgba(255, 255, 255, 0.35); }
.md-tv-team.won span::after { content: " \25C0"; color: #f7a823; font-size: 14px; }
.md-tv-head { font: 26px/1.05 Righteous, Oswald, sans-serif; text-transform: uppercase; color: #fff6c2; text-shadow: 3px 3px 0 #b5332e; margin: 4px 0 0; }
.md-tv-pip .md-photo { aspect-ratio: 4 / 3; border: 4px solid #fff; border-radius: 10px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.md-tv-pip img { filter: saturate(1.4) contrast(1.1) sepia(0.15); }
.md-tv-pip figcaption { font-size: 13px; margin-top: 6px; background: #b5332e; display: inline-block; padding: 2px 8px; }
.md-tv-pip figcaption a { color: #fff; }
.md-tv-script { margin-top: 14px; }
.md-tv-anchor { display: inline-block; background: #fff; color: #0b1d48; font-size: 14px; letter-spacing: 1.5px; padding: 3px 10px; margin-bottom: 8px; }
.md-tv-anchor span { color: #b5332e; font-size: 11px; }
.md-tv-script p { font: 16px/1.5 Inter, "Segoe UI", sans-serif; margin: 0 0 8px; padding: 6px 10px; background: rgba(0, 0, 0, 0.35); border-left: 4px solid #f7a823; }
.md-tv-screen a { color: #fff6c2; }
.md-tv-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.md-tv-board { background: rgba(12, 44, 107, 0.85); border: 3px solid #fff; padding: 8px 10px; }
.md-tv-board h3 { font: 18px/1 Righteous, sans-serif; color: #f7a823; letter-spacing: 2px; margin: 0 0 6px; }
.md-tv-board, .md-tv-board * { color: #fff !important; background: none; border-color: rgba(255, 255, 255, 0.3) !important; }
.md-tv-board h3 { color: #f7a823 !important; }
.md-tv-board .paper-table, .md-tv-board table { width: 100%; font: 13px/1.35 Inter, sans-serif; }
.md-tv-board .paper-list { font: 13px/1.4 Inter, sans-serif; }
.md-tv-board figure { display: none; }
.md-tv-crawl { position: absolute; left: 0; right: 0; bottom: 0; height: 38px; overflow: hidden; background: #b5332e; border-top: 3px solid #f7a823; z-index: 1; }
.md-tv-crawl-in { display: inline-flex; gap: 48px; white-space: nowrap; padding: 8px 0 0 100%; animation: md-crawl 40s linear infinite; }
.md-tv-crawl-in span { font: 17px/1 Righteous, sans-serif; text-transform: uppercase; color: #fff; }
.md-tv-crawl-in span::before { content: "\25C6  "; color: #f7a823; }
@keyframes md-crawl { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .md-tv-crawl { height: auto; position: static; margin: 12px -18px -52px; }
  .md-tv-crawl-in { animation: none; padding: 8px 12px; flex-wrap: wrap; gap: 6px 24px; white-space: normal; }
  .md-tv-crawl-in span[aria-hidden="true"] { display: none; }
}
.md-tv-knobs { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 8px 6px 0; color: #e9cfa3; font: 10px/1 Oswald, sans-serif; letter-spacing: 2px; }
.md-tv-knobs i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d9d9d9, #555); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
@media (max-width: 720px) { .md-tv-main { grid-template-columns: minmax(0, 1fr); } }
.postgame .md-tv-main { grid-template-columns: minmax(0, 1fr); }
.md-tv-pip { max-width: 360px; }

/* 1994-2008: a home-made '90s web page */
.md-web { border: 2px outset #dcdcdc; background: #c0c0c0; font-family: "Times New Roman", Times, serif; color: #000; }
.md-web-chrome { display: flex; gap: 6px; align-items: center; padding: 4px 6px; background: #c0c0c0; border-bottom: 2px groove #fff; font: 12px/1 Arial, sans-serif; }
.md-web-btn { border: 2px outset #f0f0f0; padding: 2px 6px; background: #d4d0c8; }
.md-web-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff; border: 2px inset #f0f0f0; padding: 2px 4px; }
.md-web-page { background: #fffff0; padding: 10px 14px 14px; }
.md-web-title { font: bold 28px/1.1 "Times New Roman", serif; color: #000080; text-align: center; }
.md-web-title span { color: #ff0000; font-style: italic; }
.md-web-construct { margin: 6px auto; text-align: center; font: bold 12px/1.6 Arial, sans-serif; color: #000; max-width: 360px;
  background: repeating-linear-gradient(45deg, #ffd800 0 10px, #111 10px 20px); }
.md-web-construct { color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.md-web-nav { text-align: center; font-size: 15px; margin: 6px 0; }
.md-web hr { border: 0; border-top: 2px groove #c0c0c0; margin: 8px 0; }
.md-web a, .md-web-a { color: #0000ee; text-decoration: underline; cursor: pointer; }
.md-web a:visited { color: #551a8b; }
.md-web-head { font: bold 26px/1.15 "Times New Roman", serif; color: #800000; margin: 6px 0; }
.md-web-deck { margin: 0 0 4px; font-size: 16px; }
.md-web-by { font: 13px/1.3 Arial, sans-serif; color: #444; margin: 4px 0 8px; }
.md-web-layout { width: 100%; table-layout: fixed; }
.md-web-layout td { vertical-align: top; white-space: normal; padding: 0; border: 0; background: none; }
.md-web-layout td.md-web-side { width: 210px; }
.md-web-text { font-size: 16px; line-height: 1.4; padding-right: 12px; }
.md-web-text p { margin: 0 0 10px; }
.md-web-text h2 { font: bold 20px/1.2 "Times New Roman", serif; color: #000080; border-bottom: 1px solid #000080; margin: 14px 0 6px; }
.md-web-side { width: 210px; }
.md-web-photo { margin-bottom: 8px; }
/* Images come down a 56K modem: top to bottom in bands, blurry until the last pass */
.md-web-photo .md-photo { position: relative; background: #d4d0c8; }
.md-web-photo .md-photo::before { content: "Loading image... 56K"; position: absolute; left: 4px; bottom: 3px; font: 10px/1 Arial, sans-serif; color: #444; z-index: 0; }
.md-web-photo .md-photo img { position: relative; z-index: 1; animation: md-dl 5.5s steps(11, end) both; }
.md-web-photo + .md-web-photo .md-photo img { animation-delay: 2.5s; }
@keyframes md-dl { 0% { clip-path: inset(0 0 100% 0); filter: blur(5px) saturate(0.6); } 55% { filter: blur(3px) saturate(0.8); }
  99% { filter: blur(1.5px); } 100% { clip-path: inset(0 0 0 0); filter: none; } }
/* The banner ads */
.md-web-ad { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; margin: 8px auto; padding: 6px 10px;
  max-width: 468px; min-height: 60px; color: #000; background: linear-gradient(90deg, var(--ad1), var(--ad2)); border: 3px ridge #c0c0c0;
  font: 12px/1.2 "Comic Sans MS", "Comic Sans", cursive; animation: md-blink 0.9s steps(2, end) infinite; }
.md-web-ad b { font: 20px/1 Impact, "Arial Black", sans-serif; letter-spacing: 0.5px; color: #fff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; }
.md-web-ad span { font-weight: bold; }
.md-web-ad i { font: bold 12px/1 Arial, sans-serif; font-style: normal; background: #c0c0c0; border: 2px outset #fff; padding: 4px 8px; color: #000; white-space: nowrap; }
.md-web-ad small { position: absolute; right: 3px; top: -13px; font: 9px/1 Arial, sans-serif; color: #555; }
.md-web-ad-sky { grid-template-columns: 1fr; text-align: center; max-width: none; min-height: 200px; align-content: center; background: linear-gradient(180deg, var(--ad1), var(--ad2)); }
.md-web-ad-sky i { justify-self: center; }
@keyframes md-blink { 50% { border-color: #ff0000; outline: 2px dashed #ffff00; } }
@media (prefers-reduced-motion: reduce) { .md-web-ad, .md-web-photo .md-photo img { animation: none; } }
@media (max-width: 520px) { .md-web-ad { grid-template-columns: 1fr; text-align: center; } .md-web-ad i { justify-self: center; } }
.postgame .md-web-ad { grid-template-columns: 1fr; text-align: center; } .postgame .md-web-ad i { justify-self: center; }
.md-web-photo .md-photo { border: 3px ridge #c0c0c0; aspect-ratio: 4 / 3; }
.md-web-photo figcaption { font: 12px/1.3 Arial, sans-serif; text-align: center; }
.md-web-box { border: 2px solid #000080; background: #fff; padding: 4px 6px; margin-bottom: 8px; font: 12px/1.35 Arial, sans-serif; }
.md-web-box > b { display: block; background: #000080; color: #fff; margin: -4px -6px 4px; padding: 2px 6px; }
.md-web-box ul { margin: 0; padding-left: 16px; }
.md-web table.paper-table, .md-web .paper-table { width: 100%; font: 12px/1.3 Arial, sans-serif; border: 1px solid #000; }
.md-web .paper-table th, .md-web .paper-table td { border: 1px solid #808080; padding: 1px 3px; color: #000; background: #fff; }
.md-web .paper-list { font: 13px/1.35 Arial, sans-serif; }
.md-web-foot { font: 11px/1.4 Arial, sans-serif; text-align: center; color: #333; }
.md-web-counter span { display: inline-block; background: #000; color: #39ff14; font: bold 14px/1 "Courier New", monospace; letter-spacing: 2px; padding: 2px 4px; margin: 4px 0; }
@media (max-width: 720px) { .md-web-layout, .md-web-layout tbody, .md-web-layout tr, .md-web-layout td { display: block; width: 100%; } .md-web-text { padding-right: 0; } }
.postgame .md-web-layout, .postgame .md-web-layout tbody, .postgame .md-web-layout tr, .postgame .md-web-layout td { display: block; width: 100%; }
.postgame .md-web-text { padding-right: 0; }

/* 2009 on: the phone */
.md-phone { display: flex; justify-content: center; }
.md-ph-device { position: relative; width: 100%; max-width: 380px; background: #f2f2f7; color: #111; border: 12px solid #111; border-radius: 44px;
  box-shadow: 0 0 0 2px #444, 0 10px 30px rgba(0, 0, 0, 0.35); overflow: hidden; font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.md-ph-status { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px 4px; font-size: 13px; font-weight: 600; }
.md-ph-notch { width: 90px; height: 22px; background: #111; border-radius: 0 0 14px 14px; margin-top: -10px; }
.md-ph-push { margin: 6px 10px 8px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.md-ph-app { font-size: 11px; color: #6b6b70; letter-spacing: 0.5px; }
.md-ph-push span { color: #3a3a3c; }
.md-ph-bar { display: flex; gap: 18px; padding: 6px 16px; border-bottom: 1px solid #d8d8de; font-size: 14px; color: #6b6b70; background: #fff; }
.md-ph-bar b { color: #111; border-bottom: 3px solid #0a84ff; padding-bottom: 4px; }
.md-ph-feed { max-height: 640px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.md-ph-feed > * { flex: none; }
.md-ph-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.md-ph-card-in { padding: 10px 12px; }
.md-ph-card h2 { font: 700 19px/1.2 Inter, "Segoe UI", system-ui, sans-serif; text-transform: none; letter-spacing: 0; color: #111; margin: 2px 0 4px; }
.md-ph-card h3 { font-family: Inter, "Segoe UI", system-ui, sans-serif; text-transform: none; letter-spacing: 0; color: #111; }
.md-ph-card h3 { font-size: 15px; margin: 0 0 6px; }
.md-ph-card p { margin: 0; font-size: 14px; color: #3a3a3c; }
.md-ph-src { font-size: 11px; font-weight: 700; color: #ff375f; letter-spacing: 1px; }
.md-ph-photo .md-photo { aspect-ratio: 16 / 9; }
.md-ph-photo figcaption { display: none; }
.md-ph-post { display: flex; gap: 10px; background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.md-ph-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #0a84ff, #5e5ce6); }
.md-ph-pbody { min-width: 0; flex: 1; }
.md-ph-who { font-size: 13px; }
.md-ph-who span { color: #8e8e93; }
.md-ph-pbody p { margin: 3px 0 6px; font-size: 14.5px; line-height: 1.4; }
.md-ph-a, .md-phone a { color: #0a84ff; text-decoration: none; font-weight: 600; }
.md-ph-acts { display: flex; gap: 18px; font-size: 12px; color: #8e8e93; }
.md-ph-thumb { margin: 2px 0 6px; }
.md-ph-thumb .md-photo { aspect-ratio: 16 / 9; border-radius: 12px; }
.md-ph-thumb figcaption { display: none; }
.md-ph-sec .paper-table, .md-ph-sec table { width: 100%; font-size: 12.5px; }
.md-ph-sec .paper-table th, .md-ph-sec .paper-table td { color: #111; background: none; border: 0; border-bottom: 1px solid #ececf0; padding: 3px 2px; }
.md-ph-sec .paper-list { font-size: 13px; }
.md-ph-sec figure { display: none; }
.md-ph-home { width: 120px; height: 5px; border-radius: 3px; background: #111; margin: 8px auto 8px; }
/* The news button's icon (ui/media.js) */
.md-cta-ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: 7px; }
.md-cta-ico svg { width: 100%; height: 100%; display: block; }

/* --- Era trading-card frames (ui/cardframes.js): his photo as a card of his year ---------------- */
.cf { flex: none; position: relative; width: 150px; aspect-ratio: 5 / 7; border-radius: 6px; padding: 7px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); color: #1d1d1b; font-family: Georgia, "Times New Roman", serif; }
.cf-in { position: relative; width: 100%; height: 100%; overflow: hidden; }
.cf-photo { position: absolute; inset: 0; display: grid; }
.cf .avatar, .cf .avatar-btn, .cf .cc-photo { width: 100%; height: 100%; border-radius: 0; border: 0; box-shadow: none; }
.cf .avatar-btn .avatar-hint { border-radius: 0; }
.cf .avatar img, .cf .cc-photo { object-fit: cover; object-position: 50% 18%; }
.cf .cc-nophoto, .cf .avatar span { display: grid; place-items: center; font: bold 30px var(--mono); }
.cf-plate { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; line-height: 1.15; }
.cf-plate b, .cf-plate span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-head.pc-framed, .cc-head.cc-framed { align-items: center; }
.cc-head.cc-framed { gap: 18px; }

/* To 1919: the tobacco card. Cream stock, a lithographed (sepia, softly tinted) portrait, brown capitals. */
.cf-tobacco { background: #efe4c8; padding: 8px 8px 0; border-radius: 3px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 0 14px rgba(120, 80, 30, 0.35); }
.cf-tobacco .cf-photo { bottom: 24px; border: 1px solid #b59a68; }
.cf-tobacco .avatar img, .cf-tobacco .cc-photo { filter: sepia(0.65) saturate(1.5) contrast(0.92) brightness(1.05); }
.cf-tobacco .avatar, .cf-tobacco .cc-nophoto { background: #d9c89e; color: #6b4a22; }
.cf-tobacco .cf-plate { height: 24px; display: grid; place-items: center; color: #5a3a17; font-size: 10.5px;
  letter-spacing: 1px; font-variant: small-caps; font-weight: bold; }

/* 1930-59: the 1952 Topps. A white border, a hand-tinted photo, his signature across it, a team-colored name box. */
.cf-topps52 { background: #fbfaf5; }
.cf-topps52 .avatar img, .cf-topps52 .cc-photo { filter: saturate(1.45) contrast(1.06) sepia(0.12); }
.cf-topps52 .avatar, .cf-topps52 .cc-nophoto { background: #8fb3c9; color: #fff; }
.cf-topps52 .cf-sig { position: absolute; left: 6px; right: 6px; bottom: 38px; color: #13284d; font: italic 17px "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
  text-shadow: 0 0 3px #fff, 0 0 2px #fff; white-space: nowrap; overflow: hidden; transform: rotate(-6deg); }
.cf-topps52 .cf-plate { left: 4px; right: 4px; bottom: 4px; padding: 3px 4px; background: var(--cf-main); color: #fff; text-align: left;
  border: 2px solid #fbfaf5; outline: 1px solid #1d1d1b; font-family: "Arial Black", Arial, sans-serif; }
.cf-topps52 .cf-plate b { font-size: 9px; }
.cf-topps52 .cf-plate span { font-size: 7.5px; opacity: 0.9; }

/* 1960-69: the 1969 Topps. White stock, a rounded-corner photo, his name and position in a corner circle,
   the club in wide capitals across the bottom. */
.cf-topps69 { background: #fbfaf5; font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; }
.cf-topps69 .cf-photo { bottom: 24px; border-radius: 12px; overflow: hidden; }
.cf-topps69 .avatar img, .cf-topps69 .cc-photo { filter: saturate(1.2) contrast(1.04); }
.cf-topps69 .avatar, .cf-topps69 .cc-nophoto { background: #86b6dc; color: #fff; }
.cf-topps69 .cf-in { overflow: visible; }
.cf-topps69 .cf-circle { position: absolute; right: -5px; bottom: 12px; width: 62px; height: 62px; border-radius: 50%; z-index: 1;
  background: #fff; border: 2px solid var(--cf-main); display: grid; place-content: center; text-align: center; line-height: 0.92; }
.cf-topps69 .cf-circle i, .cf-topps69 .cf-circle b, .cf-topps69 .cf-circle span { display: block; max-width: 48px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; font-style: normal; max-width: 56px; line-height: 0.92; margin: 0; }
.cf-topps69 .cf-circle i { font: 900 9px "Arial Narrow", Arial, sans-serif; color: var(--cf-trim); }
.cf-topps69 .cf-circle b { font: 900 12px "Arial Narrow", "Arial Black", Arial, sans-serif; color: var(--cf-main); }
.cf-topps69 .cf-circle span { font: bold 7px Arial, sans-serif; color: #555; letter-spacing: 0.4px; }
.cf-topps69 .cf-club { position: absolute; left: 2px; bottom: 2px; font: bold 16px "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 4px; color: var(--cf-trim); }

/* 1970-79: the 1970 Topps. Gray stock, the photo in a thin white frame with the club's nickname in its top
   corner, his name in black script along the bottom and his position in red block capitals. */
.cf-topps70 { background: #b9bcbf; font-family: "Helvetica Neue", Arial, sans-serif; }
.cf-topps70.cf-worn { background: #b6b8b9; }
.cf-topps70 .cf-in { overflow: visible; }
.cf-topps70 .cf-photo { bottom: 28px; border: 2px solid #fff; }
.cf-topps70 .avatar img, .cf-topps70 .cc-photo { filter: saturate(1.15) contrast(1.04) sepia(0.06); }
.cf-topps70 .avatar, .cf-topps70 .cc-nophoto { background: #8fb7d6; color: #fff; }
.cf-topps70 .cf-club { position: absolute; right: 5px; top: 5px; z-index: 1; font: 900 13px "Arial Black", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.5px; color: var(--cf-main); -webkit-text-stroke: 2.4px #fff; paint-order: stroke fill; }
.cf-topps70 .cf-plate { left: 2px; right: 2px; bottom: 0; height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.cf-topps70 .cf-plate b { font: bold 17px "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive; color: #111; }
.cf-topps70 .cf-plate span { flex: none; font: 900 8.5px "Arial Black", "Helvetica Neue", Arial, sans-serif; color: #c8102e; letter-spacing: 0.4px; }

/* 1980-89: the 1980 Topps. White stock, his position on a pennant top left and his name top right, his
   autograph across the photo, the club's nickname on a big pennant bottom right; an All-Star's banner. */
.cf-topps80 { background: #fbfaf5; font-family: "Helvetica Neue", Arial, sans-serif; }
.cf-topps80 .cf-in { overflow: visible; }
.cf-topps80 .cf-photo { top: 16px; bottom: 16px; box-shadow: 0 0 0 1.5px var(--cf-a); }
.cf-topps80 .avatar img, .cf-topps80 .cc-photo { filter: saturate(1.2) contrast(1.05); }
.cf-topps80 .avatar, .cf-topps80 .cc-nophoto { background: #8fb7d6; color: #fff; }
.cf-topps80 .cf-flag { position: absolute; left: -3px; top: -2px; z-index: 1; padding: 2px 11px 2px 4px; background: var(--cf-a); color: var(--cf-b);
  font: 900 8px "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.4px; clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%); }
.cf-topps80 .cf-name { position: absolute; right: 0; top: -2px; max-width: 64%; text-align: right; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font: 900 11px "Arial Black", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.2px; color: #1d1d1b; }
.cf-topps80 .cf-star { position: absolute; right: -7px; top: 9px; z-index: 2; width: 52px; height: 52px; display: grid; place-content: center;
  padding-top: 6px; text-align: center; line-height: 1; }
.cf-topps80 .cf-star::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 42% 38%, #fff6c2, #f2c230 45%, #c8901a);
  clip-path: polygon(50% 0, 61.8% 35.4%, 100% 35.4%, 69.1% 57.3%, 80.9% 92.7%, 50% 70.8%, 19.1% 92.7%, 30.9% 57.3%, 0 35.4%, 38.2% 35.4%);
  filter: drop-shadow(0 0 0.8px #8a1010); }
.cf-topps80 .cf-star span { display: block; white-space: nowrap; font: 900 5.6px "Arial Black", Arial, sans-serif; color: #b3140d; letter-spacing: 0; }
.cf-topps80 .cf-sig { position: absolute; left: 8px; right: 30px; bottom: 34px; color: #13284d; font: italic 15px "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
  text-shadow: 0 0 3px #fff, 0 0 2px #fff; white-space: nowrap; overflow: hidden; transform: rotate(-8deg); }
.cf-topps80 .cf-pennant { position: absolute; right: -4px; bottom: -4px; z-index: 1; width: 104px; height: 38px; background: var(--cf-b);
  clip-path: polygon(0 50%, 100% 0, 100% 100%); display: grid; align-items: center; justify-items: end; padding-right: 5px; }
.cf-topps80 .cf-pennant span { font: 900 14px "Cooper Black", "Arial Rounded MT Bold", "Arial Black", sans-serif; color: #fff;
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.55); paint-order: stroke fill; letter-spacing: 0.3px; }

/* 1985-89: the 1985 Topps. White stock, the club's nickname big in a slanted box in its colors, his position
   and name on a strip under it, the club's badge in a little square beside them. */
.cf-topps85 { background: #fbfaf5; font-family: "Helvetica Neue", Arial, sans-serif; }
.cf-topps85 .cf-in { overflow: visible; }
.cf-topps85 .cf-photo { bottom: 28px; box-shadow: 0 0 0 1px #1d1d1b; }
.cf-topps85 .avatar img, .cf-topps85 .cc-photo { filter: saturate(1.15) contrast(1.05); }
.cf-topps85 .avatar, .cf-topps85 .cc-nophoto { background: #8fb7d6; color: #fff; }
.cf-topps85 .cf-box { position: absolute; left: -3px; bottom: 17px; z-index: 1; padding: 1px 10px 1px 6px; background: var(--cf-trim);
  transform: rotate(-6deg); box-shadow: 0 0 0 1px #1d1d1b; }
.cf-topps85 .cf-box span { font: 900 16px "Arial Black", "Helvetica Neue", Arial, sans-serif; color: var(--cf-main); letter-spacing: 0.3px;
  -webkit-text-stroke: 0.5px #fff; paint-order: stroke fill; }
.cf-topps85 .cf-box span.cf-long { font-size: 12px; }
.cf-topps85 .cf-plate { left: 4px; right: 26px; bottom: -1px; align-items: baseline; text-align: right; display: flex; justify-content: flex-end; gap: 4px; }
.cf-topps85 .cf-plate span { font: 900 9px "Helvetica Neue", Arial, sans-serif; color: #1d1d1b; }
.cf-topps85 .cf-plate b { font: 900 11px "Arial Black", "Helvetica Neue", Arial, sans-serif; color: #1d1d1b; letter-spacing: 0.1px; }
.cf-topps85 .cf-logo { position: absolute; right: -2px; bottom: 2px; z-index: 1; width: 22px; height: 22px; background: var(--cf-main);
  border: 2px solid #fbfaf5; box-shadow: 0 0 0 1px #1d1d1b; display: grid; place-items: center; color: var(--cf-trim);
  font: 900 13px Georgia, "Times New Roman", serif; }

/* 2000-08, a star's season: black borders, a diagonal team stripe, his name stamped in gold foil. */
.cf-foil { background: linear-gradient(135deg, #111 0%, #2b2b2b 45%, #0b0b0b 100%); padding: 6px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 1px #8a6d1f; }
.cf-foil .cf-photo { bottom: 30px; border: 1px solid #c9a227; }
.cf-foil .avatar, .cf-foil .cc-nophoto { background: #2d3a4f; color: #e8d38a; }
.cf-foil .cf-stripe { position: absolute; left: -20%; right: -20%; bottom: 22px; height: 12px; background: var(--cf-main);
  transform: rotate(-8deg); box-shadow: 0 -2px 0 #c9a227, 0 2px 0 var(--cf-trim); }
.cf-foil .cf-plate { height: 26px; background: #0b0b0b; padding-top: 3px; }
.cf-gold { font: bold 11px "Times New Roman", Georgia, serif; letter-spacing: 1px;
  background: linear-gradient(100deg, #8a6d1f 0%, #f7e7a1 22%, #c9a227 40%, #fff6c9 52%, #a8841f 70%, #f1d778 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cf-shine 4s ease-in-out infinite; }
.cf-foil .cf-plate span { font: 7.5px Arial, sans-serif; color: #c9c2a8; letter-spacing: 0.5px; }
@keyframes cf-shine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* 2009 on: chrome. A silver frame with a rainbow refractor sheen, the team's color bar, plain modern type. */
.cf-chrome { padding: 6px; background: linear-gradient(135deg, #f4f6f8 0%, #9aa3ad 25%, #eef1f4 45%, #7c8692 70%, #e9edf1 100%);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
.cf-chrome .cf-photo { bottom: 26px; }
.cf-chrome .avatar, .cf-chrome .cc-nophoto { background: #3b4a5c; color: #fff; }
.cf-chrome .cf-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.35;
  background: linear-gradient(115deg, transparent 20%, #ff6b6b 32%, #ffd93d 40%, #6bff95 48%, #4dc9ff 56%, #b06bff 64%, transparent 76%);
  background-size: 250% 100%; animation: cf-refract 6s linear infinite; }
.cf-chrome .cf-plate { height: 26px; background: var(--cf-main); color: #fff; border-top: 3px solid var(--cf-trim);
  padding-top: 2px; }
.cf-chrome .cf-plate b { font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; }
.cf-chrome .cf-plate span { font-size: 7.5px; opacity: 0.9; letter-spacing: 0.5px; }
@keyframes cf-refract { from { background-position: 100% 0; } to { background-position: -150% 0; } }

@media (prefers-reduced-motion: reduce) {
  body:not(.full-motion) .cf-gold, body:not(.full-motion) .cf-chrome .cf-sheen, body:not(.full-motion) .cf-silver .cf-glint { animation: none; } }
@media (max-width: 720px) { .cf { width: 112px; } .cf-topps52 .cf-sig { font-size: 13px; bottom: 30px; } }

/* The Career cards switch shows only in the Career view (its [hidden] beats .voice-switch display). */
.cat-version[hidden] { display: none; }

/* Milestone alerts (ui/app.js): a banner at the top of the window, in the skin's colors. */
.ms-toast { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 12px 10px 14px; background: var(--ink); color: var(--paper);
  border-left: 5px solid var(--accent, #c8102e); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); border-radius: 4px; animation: ms-in 0.25s ease-out; }
.ms-toast-tag { flex: none; font: bold 10px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent, #c8102e);
  background: var(--paper); padding: 2px 6px; border-radius: 2px; }
.ms-toast-text { font-size: 14px; line-height: 1.35; }
.ms-toast-x { flex: none; margin-left: auto; background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
@keyframes ms-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .ms-toast { animation: none; } }
@media (max-width: 720px) { .ms-toast-tag { display: none; } }
.ms-watch h2 { margin-bottom: 4px; }
[data-daf-alerts="off"] .ms-watch, [data-daf-alerts="off"] .ms-toast { display: none; }

/* A night game (engine/weather.js night): the field under the lights, unless Customize > Night look is off. */
:root:not([data-daf-nightlook="off"]) .night-game .park-svg { border-radius: 6px;
  /* The moon up in the right-hand corner. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='40' height='40' fill='white'/%3E%3Ccircle cx='26' cy='15' r='12.5' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='13' fill='%23f6f1d8' mask='url(%23m)'/%3E%3C/svg%3E") 88% 9% / 26px 26px no-repeat,
    radial-gradient(circle at 88.5% 10.5%, rgba(246, 241, 216, 0.22), transparent 9%),
    radial-gradient(ellipse at 50% 18%, rgba(255, 244, 200, 0.28), transparent 55%),
    radial-gradient(ellipse at 8% 4%, rgba(255, 244, 200, 0.35), transparent 28%),
    radial-gradient(ellipse at 92% 4%, rgba(255, 244, 200, 0.35), transparent 28%), #0b1626; }
:root:not([data-daf-nightlook="off"]) .night-game .park-grass { fill: #2f7a3e; opacity: 1; }
:root:not([data-daf-nightlook="off"]) .night-game .park-infield { fill: #2f7a3e; }
:root:not([data-daf-nightlook="off"]) .night-game .park-dirt { fill: #8a6440; }
:root:not([data-daf-nightlook="off"]) .night-game .park-wall { stroke: #d9dde3; }
:root:not([data-daf-nightlook="off"]) .night-game .park-label { fill: #f2efe6; }
:root:not([data-daf-nightlook="off"]) .night-game .park-svg text { fill: #f2efe6; }

/* A day game: the field under a blue sky, the stands' shade behind the wall, sunlit grass in foul ground. */
.day-game .park-svg { border-radius: 6px;
  background: radial-gradient(ellipse at 82% 6%, rgba(255, 252, 220, 0.75), transparent 22%),
    linear-gradient(180deg, #78b0e2 0%, #a9cdee 26%, #cfe2ee 40%, #7f9a78 41%, #5f8f57 60%, #4d8349 100%); }
.day-game .park-grass { fill: #3f9150; opacity: 1; }
.day-game .park-infield { fill: #3f9150; }
.day-game .park-dirt { fill: #b98a55; }
.day-game .park-wall { stroke: #2f4a3a; }
.day-game .park-label { fill: #14263a; font-weight: bold; }

/* Preseason: on a phone, the bar with Open the season stays at the bottom of the screen; the reserves'
   Move up menus stay narrow so the roster table fits the screen. */
@media (max-width: 720px) {
  .preseason-go { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 5; margin: 0; box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.25); }
  body:has(.preseason-go) main { padding-bottom: 140px; }
  .draft-table select { max-width: 8.5em; }
  .preseason-go { flex-wrap: wrap; }
  .preseason-go > span { flex: 1 1 100%; min-width: 0; }
  .draft-grid .panel { overflow-x: auto; min-width: 0; }
}

/* Club looks (ui/league.js clubLook): a round badge in the club's colors with its monogram, in standings and lists. */
.club-cap { display: inline-grid; place-items: center; vertical-align: -0.45em; margin-right: 7px; width: 1.75em; height: 1.75em;
  border-radius: 50%; background: var(--cap-main); box-shadow: inset 0 0 0 0.14em var(--cap-trim); }
.club-cap-mono { font: bold 0.68em/1 Georgia, "Times New Roman", serif; color: #fff; letter-spacing: -0.02em; }
.club-cap.sm { font-size: 12px; }
.club-cap.lg { font-size: 28px; }
/* A long club name in the fixed-width division tables ends in an ellipsis instead of running into the record. */
.div-standings .season-standings td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The league's news ticker (ui/season.js newsTicker): one item at a time on a single line, in the
   league's era: a wire bulletin (before 1950), a radio news desk (to 1983), a scoreboard (after). */
.news-ticker { display: flex; align-items: stretch; margin: 0 0 12px; border-radius: 4px; overflow: hidden; font-size: 13.5px;
  background: var(--ink); color: var(--paper); min-height: 34px; }
.tk-label { flex: none; display: flex; align-items: center; gap: 4px; padding: 0 12px; background: var(--accent); color: #fff;
  font: bold 11px var(--mono); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.tk-label small { font: inherit; opacity: 0.75; }
.tk-window { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 14px; }
.tk-line { min-width: 0; width: 100%; }
.tk-item { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: tk-in 0.45s ease-out; }
.tk-item b { color: #f2c14e; margin-right: 4px; text-transform: uppercase; font: bold 11px var(--mono); letter-spacing: 1px; }
.tk-nav { flex: none; display: flex; align-items: center; gap: 2px; padding: 0 6px; font: 11px var(--mono); opacity: 0.8; }
.tk-btn { background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; padding: 2px 6px; cursor: pointer; }
.tk-btn:hover, .tk-btn:focus-visible { color: #f2c14e; }
@keyframes tk-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* To 1919: the telegraph wire, a typed tape on yellowed paper. */
.news-ticker.tk-wire { background: #efe6cf; color: #2a2116; border: 1px solid #b9a98a; font-family: var(--mono); font-size: 13px; }
.tk-wire .tk-label { background: #2a2116; color: #efe6cf; }
.tk-wire .tk-item { text-transform: uppercase; letter-spacing: 0.5px; }
.tk-wire .tk-item b { color: #8b1a1a; }
.tk-wire .tk-item::after { content: ' STOP'; opacity: 0.55; }
.tk-wire .tk-btn:hover, .tk-wire .tk-btn:focus-visible { color: #8b1a1a; }
/* 1920 to 1941: the newspaper's extra, a headline in bold serif on newsprint. */
.news-ticker.tk-paper { background: #f4efe2; color: #1b1b1b; border-top: 3px double #1b1b1b; border-bottom: 3px double #1b1b1b; border-radius: 0;
  font-family: Georgia, 'Times New Roman', serif; font-size: 15px; }
.tk-paper .tk-label { background: none; color: #1b1b1b; font: 900 16px Georgia, 'Times New Roman', serif; letter-spacing: 0; text-transform: none;
  font-style: italic; border-right: 1px solid #1b1b1b; }
.tk-paper .tk-label small { font: 11px var(--mono); font-style: normal; }
.tk-paper .tk-item b { color: #1b1b1b; font: 900 12px Georgia, serif; letter-spacing: 1px; }
/* 1942 to 1968: radio, a walnut set with an amber dial. */
.news-ticker.tk-radio { background: linear-gradient(#3a2819, #2b1d14); color: #f3e3c3; border: 1px solid #1a110b; }
.tk-radio .tk-label { background: #a3541c; border-radius: 0 14px 14px 0; }
.tk-radio .tk-item b { color: #f2b44e; }
/* 1969 to 1993: the TV sports update, white type on a blue lower third. */
.news-ticker.tk-tv { background: linear-gradient(#1d3f8f, #142b63); color: #fff; font: 600 14px Arial, Helvetica, sans-serif; letter-spacing: 0.3px; border-radius: 0;
  border-top: 2px solid #f2c14e; }
.tk-tv .tk-label { background: #f2c14e; color: #142b63; font-style: italic; }
.tk-tv .tk-item b { color: #f2c14e; }
/* 1994 to 2014: the website's breaking-news bar, a red pill and a headline link. */
.news-ticker.tk-web { background: #fff; color: #1a1a1a; border: 1px solid #d0d0d0; font: 14px Verdana, Arial, sans-serif; }
.tk-web .tk-label { background: #c8102e; color: #fff; border-radius: 3px; margin: 5px 0 5px 6px; padding: 0 10px; font: bold 11px Verdana, Arial, sans-serif; }
.tk-web .tk-item { color: #0645ad; text-decoration: underline; text-decoration-color: rgba(6, 69, 173, 0.35); }
.tk-web .tk-item b { color: #1a1a1a; }
.tk-web .tk-btn:hover, .tk-web .tk-btn:focus-visible { color: #c8102e; }
/* 2015 on: a phone's push notification, a rounded card with the app's icon. */
.news-ticker.tk-phone { background: rgba(250, 250, 252, 0.96); color: #111; border-radius: 16px; border: 1px solid #ddd;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); font: 14px -apple-system, 'Segoe UI', Roboto, sans-serif; min-height: 44px; }
.tk-phone .tk-label { background: none; color: #6b6b70; font: 600 11px -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0.3px; padding-left: 10px; }
.tk-phone .tk-app { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: #fff;
  font-style: normal; font-size: 13px; margin-right: 4px; }
.tk-phone .tk-item b { color: #111; font: 700 13px -apple-system, 'Segoe UI', Roboto, sans-serif; text-transform: none; letter-spacing: 0; }
.tk-phone .tk-item { animation-name: tk-push; }
@keyframes tk-push { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tk-item { animation: none; } }
@media (max-width: 560px) { .tk-label small, .tk-count { display: none; } .tk-window { padding: 0 8px; } }
[data-daf-ticker="off"] .news-ticker { display: none; }
.sim-history:empty { display: none; }
.sim-history { margin: 6px 0 0; font-style: italic; }

/* Ballpark postcards (ui/park.js photo): a linen card for the old parks, a glossy chrome one for the cookie-cutters. */
.postcard .pcd-face { position: relative; overflow: hidden; }
.postcard img { border: 0; border-radius: 0; max-height: 300px; }
.pc-linen .pcd-face { padding: 12px 12px 34px; background: #efe6cc;
  background-image: repeating-linear-gradient(0deg, rgba(120, 95, 50, 0.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 95, 50, 0.06) 0 1px, transparent 1px 3px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(120, 80, 30, 0.25); border-radius: 3px; }
.pc-linen img { filter: sepia(0.35) saturate(1.7) contrast(0.92) brightness(1.04); mix-blend-mode: multiply; }
.pc-linen .pcd-caption { position: absolute; left: 12px; right: 12px; bottom: 9px; text-align: center; color: #5a3a17;
  font: bold 12px Georgia, "Times New Roman", serif; letter-spacing: 1.5px; }
.pc-chrome .pcd-face { padding: 10px 10px 32px; background: #fdfdfb; border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.pc-chrome img { filter: saturate(1.45) contrast(1.1); border-radius: 6px; }
.pc-chrome .pcd-face::after { content: ''; position: absolute; inset: 10px 10px 32px; border-radius: 6px; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.35) 0%, transparent 35%, transparent 70%, rgba(255, 255, 255, 0.12) 100%); }
.pc-chrome .pcd-caption { position: absolute; left: 14px; right: 14px; bottom: 8px; color: #1d3c6e; font: italic 600 13px "Segoe UI", Arial, sans-serif; }
.pcd-mark { position: absolute; top: 18px; right: 20px; width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center;
  text-align: center; border: 2px solid rgba(40, 30, 90, 0.55); color: rgba(40, 30, 90, 0.7); transform: rotate(-12deg);
  font: bold 9px/1.2 var(--mono); letter-spacing: 0.5px; background: rgba(255, 255, 255, 0.18); }
.pcd-mark b { font-size: 13px; }
@media (max-width: 720px) { .pcd-mark { width: 56px; height: 56px; font-size: 7px; } .pcd-mark b { font-size: 11px; } }

/* A rain delay (ui/app.js rainDelay): rain on the infield, the tarp rolled out over it, and the booth's summary. */
.rd-box { position: fixed; z-index: 55; left: 50%; top: 18%; transform: translateX(-50%); width: min(520px, calc(100vw - 32px));
  display: flex; gap: 14px; align-items: center; padding: 14px; background: var(--panel); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.rd-art { flex: none; width: 180px; }
.rd-art svg { display: block; width: 100%; border-radius: 6px; background: #4a5a66; }
.rd-grass { fill: #3d6b45; }
.rd-dirt { fill: #8a6440; }
.rd-infield { fill: #3d6b45; }
.rd-tarp { transform-origin: 24px 72px; animation: rd-roll 1.6s ease-out both; }
.rd-tarp-cloth { fill: #c9b27a; stroke: #8a7444; stroke-width: 1.5; }
.rd-tarp-seam { stroke: #9c8653; stroke-width: 1; opacity: 0.6; }
.rd-drop { stroke: rgba(220, 235, 255, 0.75); stroke-width: 1.2; animation: rd-fall 1.2s linear infinite; }
.rd-text { min-width: 0; }
.rd-title { font: bold 12px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.rd-min { font: bold 22px var(--mono); margin: 2px 0 6px; }
.rd-text p { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
@keyframes rd-roll { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rd-fall { from { transform: translateY(-40px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rd-tarp, .rd-drop { animation: none; } }
@media (max-width: 560px) { .rd-box { flex-direction: column; align-items: stretch; } .rd-art { width: 100%; } }

/* The season preview and power rankings (ui/preview.js): a magazine's preseason issue. */
.pv-tabs { margin: 0 0 12px; }
.pv-mast { border-top: 4px double var(--ink); border-bottom: 1px solid var(--rule); padding: 10px 0 12px; margin-bottom: 14px; }
.pv-kicker { font: bold 11px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.pv-title { font-size: 28px; line-height: 1.1; margin: 4px 0 6px; letter-spacing: -0.5px; }
.pv-dek { font-size: 15px; margin: 0; }
.pv-div h3 { margin-top: 0; }
.pv-list { list-style: none; padding: 0; margin: 0; }
.pv-list li { padding: 8px 0; border-bottom: 1px dotted var(--rule); }
.pv-list li:last-child { border-bottom: 0; }
.pv-club { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv-rank { font: bold 13px var(--mono); width: 1.4em; color: var(--muted); }
.pv-proj { margin-left: auto; font-family: var(--mono); }
.pv-note { margin: 3px 0 0 calc(1.4em + 8px); color: var(--muted); }
.pv-note .plink { color: inherit; }
.pr-rank { font: bold 14px var(--mono); }
.pr-move { font: 11px var(--mono); color: var(--muted); white-space: nowrap; }
.pr-move.up { color: #2e7d32; }
.pr-move.down { color: #b3261e; }
.pr-table td { vertical-align: middle; }

/* The champions' stage (ui/celebrate.js): the ballpark at night in the club's colors behind the
   front page, the pennant down the left, the trophy case down the right, the fireworks over all. */
body:has(.cel-stage) { overflow-x: hidden; }
.cel-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: 250px minmax(0, 1fr) 250px; gap: 22px;
  align-items: start; padding: 26px 0 40px; }
.cel-bg { position: absolute; top: -12px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; overflow: hidden;
  background: #0a0e1c; }
.cel-bg::before { content: ''; position: absolute; inset: -30px; background: var(--cel-photo, none) center / cover no-repeat;
  filter: blur(7px) brightness(0.55) saturate(1.1); }
.cel-bg::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--cel-main) 70%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(6, 9, 22, 0.35), rgba(6, 9, 22, 0.88)); }
.cel-old::before { filter: blur(7px) brightness(0.6) sepia(0.7); }
.cel-page { min-width: 0; }
.cel-side { position: sticky; top: 16px; display: grid; gap: 14px; }
.cel-pennant { position: relative; display: grid; justify-items: start; gap: 6px; align-content: center;
  padding: 18px 40% 18px 18px; background: var(--cel-main); color: #fff; border-left: 14px solid var(--cel-trim);
  clip-path: polygon(0 0, 100% 50%, 0 100%); min-height: 170px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.cel-mono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cel-trim);
  color: var(--cel-main); font: 900 16px var(--mono); text-shadow: none; border: 2px solid #fff; }
.cel-pn-title { font: 900 16px Georgia, 'Times New Roman', serif; text-transform: uppercase; letter-spacing: 1.2px; line-height: 1.1; }
.cel-pn-sub { font-size: 11.5px; opacity: 0.9; line-height: 1.3; }
.cel-card { background: var(--paper, #faf7ef); color: var(--ink, #1b1b1b); border-radius: 8px; padding: 14px 16px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }
.cel-card h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.cel-big { font: bold 16px Georgia, serif; margin: 0 0 8px; }
.cel-games { list-style: none; padding: 0; margin: 0; font: 12px var(--mono); }
.cel-games li { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px dotted var(--rule, #ccc); }
.cel-games li b { margin-left: auto; }
.cel-games li.won b { color: #2e7d32; }
.cel-games li.lost b { color: #b3261e; }
.cel-label { display: block; font: bold 10px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent, #c8102e); margin-top: 8px; }
.cel-mvp .cel-name { display: block; font: bold 17px Georgia, serif; }
.cel-mvp .small { display: block; margin-top: 2px; }
.cel-rec b { font: bold 20px var(--mono); }
.cel-awards { list-style: none; padding: 0; margin: 4px 0 0; }
.cel-awards li { padding: 2px 0 4px; }
.cel-show { position: fixed; inset: 0; pointer-events: none; z-index: 70; }
@media (max-width: 1240px) {
  .cel-stage { grid-template-columns: minmax(0, 1fr); }
  .cel-side { position: static; }
  .cel-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .cel-right { order: 3; }
}
@media (max-width: 640px) { .cel-left { grid-template-columns: minmax(0, 1fr); } }
@media print { .cel-stage { display: block; padding: 0; } }

/* The game screen: the score joined to the field, the choices in a bar that stays at the bottom of
   the screen (More opens the drawer above it), the play-by-play in its own column on a wide screen. */
body.game-page main { max-width: 1560px; }
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; align-items: start; }
.game-main { min-width: 0; }
@media (min-width: 1200px) {
  .game-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); }
  .game-grid > .feed { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; margin-top: 0; }
}
.panel.game-score { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; padding-bottom: 4px; }
.panel.game-score + .panel { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; padding-top: 8px; }
.panel.game-controls { position: sticky; bottom: 0; z-index: 30; padding: 8px 12px; box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12); }
.game-bar { gap: 6px 10px; }
.game-bar .group { border-right: 0; padding-right: 0; }
.game-bar .primary { font-size: 16px; padding: 8px 18px; }
.more-toggle { margin-left: auto; }
.game-more { max-height: 45vh; overflow: auto; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.game-keys { flex-basis: 100%; }
@media (max-width: 640px) {
  .game-keys { display: none; }
  .panel.game-controls { margin-left: -8px; margin-right: -8px; border-radius: 10px 10px 0 0; padding: 6px 8px; }
  /* One row under the thumb: the calls side by side (it scrolls sideways if they run long), More at the end. */
  .game-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .game-bar .group { flex-wrap: nowrap; flex: none; }
  .game-bar .more-toggle { position: sticky; right: 0; background: var(--panel, var(--paper, #fff)); box-shadow: -10px 0 10px var(--panel, var(--paper, #fff)); }
  .game-bar .who { display: none; }
  .game-bar button { white-space: nowrap; flex: none; }
  .game-bar .primary { font-size: 15px; padding: 7px 14px; }
}
/* The park's board: a slim strip between plays, full height for a show. */
.matchup .game-board { height: 84px; transition: height 0.25s; }
.matchup .game-board:has(.scoreboard-show.on) { height: 150px; }
.matchup .game-board .game-board-idle { width: 100% !important; height: 100% !important; }
/* The game's status under the line score: the inning, the outs, the chances to win, the park (the score is in the line score). */
.game-score .score-bug.sb-slim { margin: 6px 0 2px; padding: 4px 8px; }
/* The inning and the outs in the field's top-left corner, clear of the on-deck circle (ui/app.js fieldDiagram). */
.field-svg-wrap { position: relative; max-width: 420px; }
.field-sit { position: absolute; left: 5px; top: 5px; display: flex; align-items: center; gap: 7px; padding: 3px 7px; border-radius: 6px;
  background: rgba(8, 14, 28, 0.78); color: #fff; font: bold 13px var(--mono); pointer-events: none; }
.fs-arrow { font-size: 10px; margin-right: 3px; color: #f2c14e; }
.fs-outs { display: flex; align-items: center; gap: 4px; }
.fs-outs .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; display: inline-block; }
.fs-outs .dot.on { background: #f2c14e; border-color: #f2c14e; }
.fs-word { font: 11px var(--mono); opacity: 0.85; margin-left: 2px; }
.game-bar select { width: auto; max-width: 190px; flex: none; }
/* On a wide screen the play-by-play column has the play, so the box by the field steps aside; the feed reads larger. */
@media (min-width: 1200px) {
  .game-grid .field-play.has-play { display: none; }
  .game-grid > .feed { font-size: 15px; }
}
/* The field (ui/app.js fieldDiagram): fielders as dots in their glove's color, the batter a mark in his
   chalk box, runners as rings; the strip under it names them, the legend reads the colors. */
.glove-fill { stroke: rgba(0, 0, 0, 0.8); stroke-width: 1.3; stroke-linejoin: round; }
.glove-web { stroke: rgba(0, 0, 0, 0.55); stroke-width: 0.9; fill: none; }
.glove-lace { stroke: rgba(0, 0, 0, 0.4); stroke-width: 0.8; fill: none; }
.fld.g1 .glove-fill { fill: #f2c14e; }
.gl-mitt.g1 .glove-fill { fill: #f2c14e; }
.fld.g2 .glove-fill { fill: #2fbf71; }
.gl-mitt.g2 .glove-fill { fill: #2fbf71; }
.fld.g3 .glove-fill { fill: #ece8dc; }
.gl-mitt.g3 .glove-fill { fill: #ece8dc; }
.fld.g4 .glove-fill { fill: #f08a3c; }
.gl-mitt.g4 .glove-fill { fill: #f08a3c; }
.fld.g5 .glove-fill { fill: #e5484d; }
.gl-mitt.g5 .glove-fill { fill: #e5484d; }
.fld.g6 .glove-fill { fill: #8a919c; }
.gl-mitt.g6 .glove-fill { fill: #8a919c; }
.field-park .fld .fld-name { font: bold 6.4px var(--mono); fill: #fff; stroke-width: 1.8px; }
.fld-hl { fill: rgba(255, 212, 0, 0.35); stroke: #ffd400; stroke-width: 1; }
.batter-fig { cursor: pointer; }
.bat-box { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 0.7; }
.batter-mark { fill: #fff; }
.batter-glow { fill: none; }
.batter-fig.hot .batter-glow { fill: rgba(232, 74, 39, 0.55); filter: blur(2px); }
.batter-fig.cold .batter-glow { fill: rgba(70, 150, 230, 0.55); filter: blur(2px); }
.runner-ring { fill: rgba(8, 14, 28, 0.85); stroke: #fff; stroke-width: 2; }
.runner-ring.fast { stroke: #8fd694; }
.runner-ring.slow { stroke: #f08a5d; }
.park-stripes path { fill: rgba(255, 255, 255, 0.07); }
.park-track { fill: none; stroke: #8a5a34; opacity: 0.85; stroke-linejoin: round; }
.field-strip { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-top: 6px; padding: 7px 10px; border-radius: 6px;
  background: #0e1626; color: #f1efe8; font: 12.5px var(--mono); }
.field-strip .plink { color: #fff; }
.fs-k { color: #f2c14e; font-weight: bold; text-transform: uppercase; font-size: 11px; letter-spacing: 0.6px; }
.fs-dim { color: #b9c0cc; }
.fs-dim.fast { color: #8fd694; }
.fs-dim.slow { color: #f08a5d; }
.glove-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center; margin-top: 5px; }
.gl-item { display: inline-flex; align-items: center; gap: 4px; }
.gl-mitt { width: 16px; height: 15px; }
/* A pull hitter's side of the field, faintly shaded, with its tag. */
.pull-area { fill: rgba(242, 193, 78, 0.16); stroke: rgba(242, 193, 78, 0.55); stroke-width: 0.6; stroke-dasharray: 2 2; }
.pull-tag { font: bold 6px var(--mono); fill: rgba(255, 236, 170, 0.85); letter-spacing: 0.8px; }
/* A hit's flight in broadcast yellow (a home run's thicker), an out's in white. */
.bb.hit .bb-path, .bb.hr .bb-path { stroke: #ffd400; stroke-width: 2.2; opacity: 1; filter: drop-shadow(0 0 2px rgba(255, 212, 0, 0.75)); }
.bb.hr .bb-path { stroke-width: 3; }
.bb.hit .bb-end { fill: #ffd400; stroke: #fff; }
/* The live layout: the field on the left; beside it the play-by-play (where the action is) with the
   matchup under it. The feed keeps to about the field's height and scrolls. */
.field-live { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.live-col { min-width: 0; display: grid; gap: 10px; align-content: start; }
.live-col > .feed { margin: 0; max-height: 820px; overflow: auto; box-shadow: none; border: 1px solid var(--rule); }
.field-col { min-width: 0; display: grid; gap: 10px; align-content: start; }
.field-col .matchup { margin-top: 2px; }
@media (max-width: 900px) { .live-col > .feed { max-height: 460px; } }
@media (max-width: 900px) { .field-live { grid-template-columns: minmax(0, 1fr); } }
/* The readings over the field after a plate appearance: they float in and fade. */
.field-readout { position: absolute; right: 8px; bottom: 8px; display: grid; gap: 1px; padding: 6px 10px; border-radius: 6px;
  background: rgba(8, 14, 28, 0.82); color: #fff; font: 12px var(--mono); text-align: right; pointer-events: none;
  animation: fr-in 0.35s ease-out; transition: opacity 0.6s; }
.field-readout b { font-size: 15px; color: #ffd400; margin-left: 6px; }
.fr-k { color: #b9c0cc; text-transform: uppercase; font-size: 10px; letter-spacing: 0.8px; }
.field-readout.out { opacity: 0; }
@keyframes fr-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .field-readout { animation: none; } }
/* One column now (the play-by-play sits beside the field inside it), a little narrower than the widest. */
.game-grid { grid-template-columns: minmax(0, 1fr) !important; }
body.game-page main { max-width: 1320px; }
/* The ball where it landed: a baseball with red stitches (the line behind it tells a hit from an out). */
.bb-ball { fill: #fff; stroke: rgba(0, 0, 0, 0.55); stroke-width: 0.6; }
.bb-stitch { fill: none; stroke: #d4202c; stroke-width: 0.9; stroke-dasharray: 0.9 0.5; stroke-linecap: round; }
.bb.hr .bb-ball { stroke: #ffd400; stroke-width: 1.2; }
/* A home run: a high arc out over the wall with a glowing tail, and its distance where it comes down. */
.bb-tail { fill: none; stroke: #ffd400; stroke-width: 7; stroke-linecap: round; opacity: 0.28; filter: blur(1.5px); }
.bb-draw .bb-tail { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bb-draw 400ms ease-out forwards; }
.bb.hr .bb-path { stroke: #ffd400; stroke-width: 2.6; }
.bb-dist { font: bold 9px var(--mono); fill: #ffd400; paint-order: stroke; stroke: rgba(0, 0, 0, 0.75); stroke-width: 2.4px; letter-spacing: 0.5px; }
.bb-draw .bb-dist { opacity: 0; animation: bb-in 250ms ease-out forwards; }
.field-park .park-svg { overflow: visible; }
/* A home run in flight (ui/app.js flightNodes): its shadow on the grass, the track under it. */
.bb-flight .bb-track { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 2 3; }
.bb-flight .bb-shadow { fill: rgba(0, 0, 0, 0.5); }
.bb-flight .bb-tail { stroke-width: 6; opacity: 0.45; }
.bb-flight .bb-path { stroke-width: 1.6; opacity: 0.85; }
.bb-flight.bb-landed .bb-dist { animation: bb-pop 0.35s ease-out; }
@keyframes bb-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* The game field's fence numbers (ui/park.js, broadcast): small framed signs, as on a real wall. */
.park-sign rect { fill: rgba(10, 18, 34, 0.88); stroke: rgba(255, 255, 255, 0.6); stroke-width: 0.6; }
.park-sign text { font: bold 7px var(--mono); fill: #fff; letter-spacing: 0.2px; }
/* The running on a play (ui/app.js runningNodes): the batter, and the runners, base to base. */
.run-batter { fill: #fff; stroke: #ffd400; stroke-width: 1.4; }
.run-runner { fill: rgba(8, 14, 28, 0.9); stroke: #fff; stroke-width: 1.4; }
@keyframes run-in { to { opacity: 1; } }

/* A handled card ('70s and '80s, ui/cardframes.js): cardboard grain and grime toward the edges under, soft
   worn white corners and a faint crease over (its angle per card), a little more yellowed the older it is. */
.cf-worn { border-radius: 7px 5px 8px 6px; }
.cf-topps80.cf-worn { background: #f8f4e8; }
.cf-worn::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(120, 88, 40, 0.22) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cf-worn::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(var(--cf-crease, 115deg), transparent 47.4%, rgba(255, 255, 255, calc(0.26 * var(--cf-crease-o, 1))) 48%,
      rgba(60, 40, 10, calc(0.07 * var(--cf-crease-o, 1))) 48.6%, transparent 49.6%),
    radial-gradient(circle at 0 0, rgba(255, 253, 245, 0.85) 0 2px, transparent 7px),
    radial-gradient(circle at 100% 0, rgba(255, 253, 245, 0.8) 0 3px, transparent 8px),
    radial-gradient(circle at 0 100%, rgba(255, 253, 245, 0.75) 0 2px, transparent 6px),
    radial-gradient(circle at 100% 100%, rgba(255, 253, 245, 0.85) 0 3px, transparent 9px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 0 6px rgba(110, 80, 30, 0.25); }

/* 1990-99: the 1990 Topps. A loud two-color border flecked with a third, the club across the top, a white-edged
   photo, his name on a tilted bar in the club's color. */
.cf-topps90 { padding: 8px; font-family: Impact, "Arial Narrow", "Arial Black", sans-serif;
  background: radial-gradient(circle at 20% 30%, var(--cf-c) 0 1.6px, transparent 2.2px) 0 0 / 11px 11px,
    radial-gradient(circle at 70% 65%, #fff 0 1.2px, transparent 1.8px) 0 0 / 14px 14px,
    radial-gradient(circle at 45% 80%, var(--cf-c) 0 1.2px, transparent 1.8px) 3px 5px / 17px 17px,
    linear-gradient(135deg, var(--cf-a), var(--cf-b)); }
.cf-topps90 .cf-in { overflow: visible; }
.cf-topps90 .cf-club { position: absolute; left: 0; top: -4px; z-index: 1; font: 18px Impact, "Arial Narrow", "Arial Black", sans-serif;
  letter-spacing: 1.5px; color: var(--cf-main); -webkit-text-stroke: 2.5px #fff; paint-order: stroke fill; }
.cf-topps90 .cf-photo { top: 16px; bottom: 22px; border: 3px solid #fff; }
.cf-topps90 .avatar img, .cf-topps90 .cc-photo { filter: saturate(1.2) contrast(1.05); }
.cf-topps90 .avatar, .cf-topps90 .cc-nophoto { background: #8fb7d6; color: #fff; }
.cf-topps90 .cf-plate { left: -2px; right: -2px; bottom: 1px; display: flex; justify-content: space-between; align-items: center;
  padding: 2px 6px; background: var(--cf-main); color: #fff; transform: rotate(-3deg); box-shadow: 0 0 0 1.5px #fff; }
.cf-topps90 .cf-plate b { font: 900 11px "Arial Black", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.3px; }
.cf-topps90 .cf-plate span { font: 900 7.5px "Arial Black", Arial, sans-serif; color: var(--cf-trim); }

/* 2000-08: silver foil. The photo up top, a swoosh in the club's color, his name on a brushed-silver base. */
.cf-silver { padding: 0; background: #eef1f4; overflow: hidden; font-family: "Helvetica Neue", Arial, sans-serif; }
.cf-silver .cf-photo { bottom: 40px; }
.cf-silver .avatar, .cf-silver .cc-nophoto { background: #3b4a5c; color: #fff; }
.cf-silver .cf-swoosh { position: absolute; left: -10%; right: -10%; bottom: 34px; height: 14px; background: var(--cf-main);
  transform: rotate(-6deg); box-shadow: 0 2px 0 var(--cf-trim); }
.cf-silver .cf-plate { height: 40px; padding: 6px 9px 0; line-height: 1.05; text-align: left;
  background: linear-gradient(135deg, #d8dde3, #ffffff 40%, #aeb6c0 70%, #eef1f4); }
.cf-silver .cf-plate b { font: 17px Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif; color: #1d1d1b; letter-spacing: 1.2px;
  transform: skewX(-8deg); transform-origin: left bottom; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8); }
.cf-silver .cf-plate span { margin-top: 1px; font: 8px Impact, "Arial Narrow", Arial, sans-serif; color: var(--cf-main); letter-spacing: 0.8px; }
.cf-silver .cf-glint { position: absolute; top: -40%; left: 0; width: 40%; height: 180%; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); animation: cf-sweep 3.4s ease-in-out infinite; }
@keyframes cf-sweep { from { transform: translateX(-130%) rotate(20deg); } to { transform: translateX(260%) rotate(20deg); } }

/* Today's parallels: a star's season a gold refractor numbered to 50, a Hall of Famer's greatest a one-of-one
   Superfractor in a gold swirl. */
.cf-chrome .cf-serial { position: absolute; right: 5px; top: 5px; z-index: 2; padding: 1px 5px; border-radius: 3px;
  font: 900 9px "Helvetica Neue", Arial, sans-serif; color: #5a3f00; background: #ffe9a3; border: 1px solid #a67c00; }
.cf-chrome.cf-tier-gold { background: linear-gradient(135deg, #fff3c4 0%, #c9a227 28%, #fff6d6 48%, #a67c00 72%, #ffe9a3 100%); }
.cf-chrome.cf-tier-gold .cf-plate { background: #1d1d1b; border-top-color: #c9a227; color: #ffe9a3; }
.cf-chrome.cf-tier-super { background: repeating-conic-gradient(from 0deg at 50% 45%, #c9a227 0 6deg, #fff3c4 6deg 12deg); }
.cf-chrome.cf-tier-super .cf-sheen { opacity: 0.55; }
.cf-chrome.cf-tier-super .cf-plate { background: #1d1d1b; border-top-color: #fff3c4; color: #fff3c4; }
.cf-chrome.cf-tier-super .cf-serial { color: #fff; background: #b3140d; border-color: #7a0d08; }

/* A junk-wax card ('85 to the '90s, ui/cardframes.js): crisp out of the pack, with a glossy sheen across it and a
   waxy smudge or two from the wrapper (where, per card). */
.cf-wax::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(ellipse 34% 22% at var(--cf-wax-x, 40%) var(--cf-wax-y, 30%), rgba(255, 252, 238, 0.32), rgba(255, 252, 238, 0.12) 55%, transparent 72%),
    radial-gradient(ellipse 18% 12% at calc(100% - var(--cf-wax-x, 40%)) calc(var(--cf-wax-y, 30%) + 38%), rgba(255, 250, 232, 0.24), transparent 70%),
    linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, 0.16) 42%, transparent 52%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
/* The play in the field (ui/app.js fieldingNodes): the fielder runs to the ball, and his throw. */
.field-park .fld { transform-box: view-box; }
.throw { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: 0.9; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation-name: bb-draw, bb-fade; animation-timing-function: linear, ease-out; animation-fill-mode: forwards, forwards; }
/* The big catch (ui/app.js fieldingNodes): a burst where he makes it, and a tag. */
.catch-burst { fill: none; stroke: #ffd400; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: catch-burst 0.7s ease-out forwards; }
@keyframes catch-burst { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(2.2); } }
.catch-tag { font: bold 9px var(--mono); fill: #ffd400; paint-order: stroke; stroke: rgba(0, 0, 0, 0.8); stroke-width: 2.4px; letter-spacing: 0.6px;
  opacity: 0; animation: bb-in 0.25s ease-out forwards; }
/* The day and the weather on the field (ui/app.js): the grandstand's shadow creeping out in a day game, the
   wind's flag beyond center, and fine rain on a wet day. */
.day-shadow { fill: rgba(10, 30, 20, 0.2); pointer-events: none; }
.wind-pole { stroke: #e8e8e8; stroke-width: 1; stroke-linecap: round; }
.wind-flag { fill: #ffd400; stroke: rgba(0, 0, 0, 0.5); stroke-width: 0.4; animation: wind-flap 1.4s ease-in-out infinite alternate; }
.wind-flag.calm { animation: none; }
.wind-label { font: bold 6px var(--mono); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.7); stroke-width: 1.6px; letter-spacing: 0.3px; }
@keyframes wind-flap { from { transform: skewY(-4deg) scaleX(0.92); } to { transform: skewY(3deg) scaleX(1.04); } }
.field-rain { position: absolute; inset: 0; pointer-events: none; border-radius: 6px; opacity: 0.45;
  background: repeating-linear-gradient(105deg, transparent 0 9px, rgba(220, 235, 255, 0.55) 9px 10px, transparent 10px 23px);
  background-size: 120px 120px; animation: field-rain 0.55s linear infinite; }
@keyframes field-rain { from { background-position: 0 0; } to { background-position: -32px 120px; } }
@media (prefers-reduced-motion: reduce) { body:not(.full-motion) .wind-flag, body:not(.full-motion) .field-rain { animation: none; } }
/* The strike zone in the field's bottom-left corner (ui/app.js zoneOverlay): the last at-bat's pitches. */
.field-zone { position: absolute; left: 6px; bottom: 6px; width: 84px; padding: 3px; border-radius: 6px; background: rgba(8, 14, 28, 0.78);
  pointer-events: auto; }
.field-zone svg { display: block; width: 100%; height: auto; }
.zone-box { fill: rgba(255, 255, 255, 0.06); stroke: #f1efe8; stroke-width: 0.9; }
.zone-grid { stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.4; fill: none; }
.zone-plate { fill: #f1efe8; }
.zd circle { stroke: rgba(0, 0, 0, 0.55); stroke-width: 0.5; }
.zd text { font: bold 5.4px var(--mono); fill: #fff; }
.zd-ball circle { fill: #2fa36b; }
.zd-strike circle { fill: #d6312b; }
.zd-play circle { fill: #2a6fd6; }
/* The scorecard (ui/scorecard.js): the game as a scorer keeps it, on scorebook paper. */
.sc-book { margin-top: 14px; }
.sc-book > summary { cursor: pointer; font: bold 15px var(--mono); }
.sc-wrap { overflow-x: auto; margin: 8px 0 12px; }
.scorecard { border-collapse: collapse; background: #fbf8ee; color: #2a2a2a; font-family: var(--mono); }
.scorecard th, .scorecard td { border: 1px solid #c9c2ad; padding: 0; text-align: center; }
.scorecard thead th { background: #efe8d4; font-size: 11px; padding: 2px 4px; }
.scorecard .sc-name { text-align: left; padding: 2px 6px; font-size: 11.5px; white-space: nowrap; min-width: 110px; }
.scorecard .sc-name span { color: #8a826c; font-size: 10px; }
.scorecard .sc-sub { color: #6b6455; font-size: 10.5px; padding-left: 8px; }
.sc-cell { width: 40px; min-width: 40px; height: 40px; vertical-align: middle; }
.sc-d { display: block; width: 38px; height: 38px; margin: auto; }
.sc-base { fill: none; stroke: #cfc7b0; stroke-width: 0.7; }
.sc-path { fill: none; stroke: #1d3c6e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-path.sc-cut { stroke-dasharray: 2 1.4; }
.sc-run { fill: rgba(29, 60, 110, 0.28); }
.sc-mark { text-anchor: middle; font-weight: bold; fill: #b3140d; font-family: var(--mono); }
.sc-outc { fill: none; stroke: #2a2a2a; stroke-width: 0.6; }
.sc-outn { text-anchor: middle; font: bold 5px var(--mono); fill: #2a2a2a; }
.sc-foot td { font-size: 10.5px; padding: 2px; background: #efe8d4; }
/* Before the strike zone (ui/app.js zoneOverlay): to 1949 the telegraph's ticker tape, from 1950 the pitching
   coach's clipboard. */
.field-ticker { position: absolute; left: 6px; bottom: 8px; max-width: 64%; overflow: hidden; pointer-events: auto;
  transform: rotate(-2deg); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.tk-tape { display: flex; gap: 7px; align-items: center; justify-content: flex-end; white-space: nowrap; padding: 3px 9px;
  background: #f4ecd2; color: #2a2118; font: bold 10.5px "Courier Prime", "Courier New", monospace; letter-spacing: 0.5px;
  border-top: 1px dashed rgba(90, 70, 40, 0.45); border-bottom: 1px dashed rgba(90, 70, 40, 0.45);
  clip-path: polygon(0 0, 100% 0, 98% 50%, 100% 100%, 0 100%, 2% 50%); }
.tk-tape b { color: #8a1c12; }
.field-clip { position: absolute; left: 6px; bottom: 6px; width: 76px; padding: 12px 6px 6px; border-radius: 6px; pointer-events: auto;
  background: linear-gradient(135deg, #a0723f, #7a5228); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); }
.field-clip svg { display: block; width: 100%; height: auto; border-radius: 2px;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(80, 140, 200, 0.22) 5px 6px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(80, 140, 200, 0.22) 5px 6px), #fbfbf4; }
.cp-clip { position: absolute; left: 50%; top: 3px; width: 28px; height: 11px; transform: translateX(-50%); border-radius: 3px 3px 5px 5px;
  background: linear-gradient(#e2e5e8, #8b9198); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35); }
.cp-box { fill: none; stroke: #4a4a4a; stroke-width: 0.8; stroke-dasharray: 0.1 0; }
.cp-plate { fill: none; stroke: #4a4a4a; stroke-width: 0.7; }
.cp-mark { text-anchor: middle; font: bold 7.5px "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive; fill: #3a3a3a; }
.cp-n { font: 4.5px "Segoe Print", "Comic Sans MS", cursive; fill: #6a6a6a; }
/* An error in the field (ui/app.js fieldingNodes): the ball off his glove or a throw gone past, in red, and the E. */
.throw.err-throw { stroke: #ff4d4d; stroke-width: 1.6; }
.err-tag { font: bold 10px var(--mono); fill: #ff4d4d; paint-order: stroke; stroke: rgba(0, 0, 0, 0.85); stroke-width: 2.4px;
  opacity: 0; animation: bb-in 0.2s ease-out forwards; }
/* The card binder (ui/binder.js): binder pages with ring holes, nine clear pockets each, the chase cards marked. */
.bd-clubs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.bd-club { font-size: 12.5px; padding: 3px 9px; }
.bd-club.on { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
.bd-club.mine:not(.on) { font-weight: bold; }
.bd-pages { display: flex; flex-wrap: wrap; gap: 18px; }
.bd-page { position: relative; padding: 14px 14px 10px 34px; border-radius: 6px; background: #ece9e0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.2); }
.bd-holes { position: absolute; left: 10px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-evenly; }
.bd-holes i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--paper, #faf7ef);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
.bd-grid { display: grid; grid-template-columns: repeat(3, 164px); gap: 8px; }
.bd-pocket { position: relative; display: grid; place-items: center; padding: 6px; border-radius: 4px; cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.4));
  border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.bd-pocket:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 2px var(--accent); }
.bd-pocket.chase { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 2px #c9a227, 0 0 12px rgba(201, 162, 39, 0.55); }
.bd-chase { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); z-index: 4; padding: 1px 7px; border-radius: 3px;
  font: bold 9px var(--mono); letter-spacing: 0.8px; color: #3a2a00; background: linear-gradient(90deg, #f7e7a1, #c9a227, #f7e7a1); white-space: nowrap; }
.bd-pageno { text-align: right; margin-top: 6px; }
@media (max-width: 720px) { .bd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bd-page { padding-left: 26px; } .bd-pocket .cf { width: 100%; } }
/* A two-way man on the team page (ui/season.js): his tag in the Hitting and Pitching tables. */
.tw-tag { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 3px; font: bold 9px var(--mono); letter-spacing: 0.5px;
  color: #fff; background: linear-gradient(90deg, var(--accent), #2a5db0); vertical-align: 1px; }
/* The welcome page (ui/splash.js): a full-screen promo over the game the first time a browser opens it.
   Always dark and cinematic, whatever the day/night choice. */
html.sp-open, html.sp-open body { overflow: hidden; }
.splash { --sp-gold: #f2c14e; --sp-ink: #f4f1e6; --sp-dim: rgba(244, 241, 230, 0.72); --sp-bg: #0b0f14;
  --mh-ink: #f4f1e6; --mh-gold: #f2c14e; --mh-line: #c8392f;
  position: fixed; inset: 0; z-index: 5000; overflow-y: auto; overflow-x: hidden; background: var(--sp-bg); color: var(--sp-ink);
  font: 16px/1.6 Inter, system-ui, sans-serif; scroll-behavior: smooth; animation: sp-in 0.6s ease both; }
.splash.sp-leaving { animation: sp-out 0.85s cubic-bezier(.6, 0, .4, 1) both; pointer-events: none; }
@keyframes sp-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-out { to { opacity: 0; transform: scale(1.04); filter: blur(4px); } }
.sp-skip { position: fixed; top: 14px; right: 16px; z-index: 3; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font: 600 12px Inter, sans-serif; letter-spacing: 0.5px; color: var(--sp-dim); background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); }
.sp-skip:hover, .sp-skip:focus-visible { color: #fff; border-color: var(--sp-gold); outline: none; }

/* The hero: a newsreel, two old films cut together, over a still until it plays; grain, flicker and
   a vignette over it, the archival tone on everything */
.sp-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.sp-reel, .sp-grain, .sp-shade { position: absolute; inset: 0; }
.sp-reel { background: #111 center / cover no-repeat; filter: grayscale(1) sepia(0.28) contrast(1.15) brightness(1.05); animation: sp-flicker 0.18s steps(2) infinite; }
.sp-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; }
.sp-film.wide { transform: scale(1.42); }
.sp-film.on { opacity: 1; }
@keyframes sp-flicker { 0% { opacity: 0.97; } 100% { opacity: 1; } }
.sp-grain { opacity: 0.16; mix-blend-mode: overlay; pointer-events: none; animation: sp-grain 0.5s steps(4) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes sp-grain { 0% { background-position: 0 0; } 25% { background-position: -40px 30px; } 50% { background-position: 50px -20px; } 75% { background-position: -20px -50px; } 100% { background-position: 0 0; } }
.sp-archival { filter: grayscale(1) sepia(0.22) contrast(1.06); }
.sp-pause { padding: 6px 14px; border-radius: 999px; cursor: pointer; font: 600 12px Inter, sans-serif; color: var(--sp-dim);
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.22); }
.sp-pause:hover, .sp-pause:focus-visible { color: #fff; border-color: var(--sp-gold); outline: none; }
.sp-cap { margin: 10px 0 0; font: italic 12.5px/1.45 'Old Standard TT', Georgia, serif; color: rgba(244, 241, 230, 0.5); }
.sp-shade { background: radial-gradient(120% 90% at 50% 40%, rgba(11, 15, 20, 0.12), rgba(11, 15, 20, 0.7) 75%),
  linear-gradient(180deg, rgba(11, 15, 20, 0.45) 0%, rgba(11, 15, 20, 0.05) 30%, rgba(11, 15, 20, 0.55) 70%, var(--sp-bg) 100%); }
.sp-hero-in { position: relative; z-index: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 80px 20px 120px; text-align: center; }
.sp-logo { display: flex; justify-content: center; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.6)); animation: sp-rise 1s 0.1s ease both; }
.sp-patch { display: block; width: min(260px, 60vw); height: auto; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.sp-pt-rim { fill: #0b1f3a; stroke: #0b1f3a; stroke-width: 8px; }
.sp-pt-merrow { fill: none; stroke: #1c3a63; stroke-width: 8px; stroke-dasharray: 1.1 1.3; }
.sp-pt-band { fill: #f2e6c9; stroke: rgba(0, 0, 0, 0.35); stroke-width: 1px; }
.sp-pt-stitch { fill: none; stroke: #c8392f; stroke-width: 1.6px; stroke-dasharray: 4 3.2; }
.sp-pt-field { fill: #0b1f3a; }
.sp-pt-dirt { fill: #b9844f; stroke: #f4f1e6; stroke-width: 2.5px; stroke-linejoin: round; }
.sp-pt-base { fill: #fff; }
.sp-pt-ball { fill: #f7f4ea; stroke: rgba(0, 0, 0, 0.25); stroke-width: 1px; }
.sp-pt-seam { fill: none; stroke: #c8392f; stroke-width: 1.6px; stroke-dasharray: 2.2 1.8; }
.sp-pt-name { font: 600 19px Oswald, Inter, sans-serif; letter-spacing: 3.2px; fill: #0b1f3a; stroke: #c8392f; stroke-width: 2.4px; paint-order: stroke; }
.sp-pt-tag { font: 600 10.5px Oswald, Inter, sans-serif; letter-spacing: 2.6px; fill: #c8392f; }
.sp-pt-star { fill: #c8392f; }
.sp-where { display: flex; flex-direction: column; gap: 2px; }
.sp-where b { color: var(--sp-ink); font-weight: 600; }
.sp-logo + .sp-title { margin-top: 22px; }
.sp-kicker { margin: 26px 0 6px; font: 600 13px Oswald, Inter, sans-serif; letter-spacing: 5px; text-transform: uppercase; color: var(--sp-gold);
  animation: sp-rise 1s 0.3s ease both; }
.sp-title { margin: 0; font: 800 clamp(34px, 6.4vw, 72px)/1.04 Inter, sans-serif; letter-spacing: -1.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 30px rgba(0, 0, 0, 0.8);
  animation: sp-rise 1s 0.45s ease both; }
.sp-title em { font: italic 400 1.04em 'Old Standard TT', Georgia, serif; letter-spacing: -0.5px; color: var(--sp-gold); }
.sp-lede { max-width: 620px; margin: 18px auto 0; font-size: clamp(15px, 1.8vw, 19px); color: var(--sp-dim); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); animation: sp-rise 1s 0.6s ease both; }
.sp-ctas { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 34px; animation: sp-rise 1s 0.75s ease both; }
@keyframes sp-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.sp-play { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 14px 30px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 17px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #1d1405;
  background: linear-gradient(180deg, #ffd977, #f2c14e 55%, #d99a1e); box-shadow: 0 10px 30px rgba(242, 193, 78, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sp-play-big { padding: 18px 40px; font-size: 20px; }
.sp-play::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(242, 193, 78, 0.6); animation: sp-pulse 2.2s ease-out infinite; }
@keyframes sp-pulse { from { opacity: 1; transform: scale(0.96); } to { opacity: 0; transform: scale(1.18); } }
.sp-play:hover, .sp-play:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 40px rgba(242, 193, 78, 0.5); outline: none; }
/* A ball with its red seams, spun on hover */
.sp-ball { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #fff, #ece7da 65%, #c9c2b0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: transform 0.7s ease; }
.sp-ball::before, .sp-ball::after { content: ''; position: absolute; top: 1px; bottom: 1px; width: 14px; border-radius: 50%; border: 1.6px dashed #c8392f; }
.sp-ball::before { left: -9px; }
.sp-ball::after { right: -9px; }
.sp-play:hover .sp-ball, .sp-play:focus-visible .sp-ball { transform: rotate(360deg); }
.sp-more { padding: 14px 22px; border-radius: 999px; cursor: pointer; font: 600 15px Inter, sans-serif; color: var(--sp-ink);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(6px); }
.sp-more:hover, .sp-more:focus-visible { background: rgba(255, 255, 255, 0.16); outline: none; }
.sp-hero-foot { position: absolute; z-index: 1; left: 0; right: 0; bottom: 26px; display: flex; justify-content: space-between; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.sp-era { display: flex; flex-direction: column; font-size: 13px; color: var(--sp-dim); }
.sp-era b { font: 600 15px Oswald, Inter, sans-serif; letter-spacing: 2px; color: var(--sp-gold); }

/* The numbers */
.sp-stats-band { position: relative; isolation: isolate; padding: 110px 0 18px; overflow: hidden; }
.sp-stats-band::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--cobb) center 55% / cover no-repeat;
  filter: grayscale(1) sepia(0.25) contrast(1.1); }
.sp-stats-band::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--sp-bg) 0%, rgba(11, 15, 20, 0.7) 30%, rgba(11, 15, 20, 0.7) 70%, var(--sp-bg) 100%); }
.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1100px; margin: 0 auto; padding: 40px 20px 90px; }
/* The numbers' shadow is a filter: a text-shadow shows through gradient-filled text and greys it. */
.sp-stat span { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); }
.sp-band-cap { max-width: 1100px; margin: 0 auto; padding: 0 20px; text-align: right; }
.sp-stat { text-align: center; padding: 0 10px; }
.sp-stat + .sp-stat { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.sp-stat b { display: block; font: 800 clamp(34px, 5vw, 56px)/1.1 Inter, sans-serif; letter-spacing: -1px;
  background: linear-gradient(180deg, #fffaf0 15%, #ffd45e 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75)); }
.sp-stat span { font-size: 13px; color: rgba(244, 241, 230, 0.88); text-transform: uppercase; letter-spacing: 1.5px; }

/* The sections */
.sp-sec { max-width: 1100px; margin: 0 auto; padding: 96px 20px 0; }
.sp-eyebrow { margin: 0 0 8px; font: 600 13px Oswald, Inter, sans-serif; letter-spacing: 4px; text-transform: uppercase; color: var(--sp-gold); }
.splash h1, .splash h2, .splash h3 { text-transform: none; color: var(--sp-ink); }
.sp-h2 { margin: 0 0 40px; font: 800 clamp(30px, 4.6vw, 52px)/1.08 Inter, sans-serif; letter-spacing: -1px; }
.sp-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sp-mode { position: relative; overflow: hidden; border-radius: 16px; background: #141a22; border: 1px solid rgba(255, 255, 255, 0.08);
  transition: opacity 0.9s ease, transform 0.6s cubic-bezier(.2, .7, .2, 1), border-color 0.35s ease, box-shadow 0.35s ease; transition-delay: var(--d, 0ms); }
.sp-mode.in:hover { transform: translateY(-6px); border-color: rgba(242, 193, 78, 0.55); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); transition-delay: 0ms; }
.sp-mode-pic { aspect-ratio: 16 / 10; background-size: cover; background-position: 50% 40%; transition: transform 0.8s ease; }
.sp-mode:hover .sp-mode-pic { transform: scale(1.06); }
.sp-mode-txt { padding: 18px 20px 22px; }
.sp-mode h3 { margin: 0; font: 800 24px Inter, sans-serif; }
.sp-tag { margin: 2px 0 10px; font: italic 17px 'Old Standard TT', Georgia, serif; color: var(--sp-gold); }
.sp-mode p:last-child { margin: 0; font-size: 14.5px; color: var(--sp-dim); }
.sp-mode.soon .sp-mode-pic { filter: grayscale(1) sepia(0.22) brightness(0.7); }
.sp-mode .sp-cap { margin-top: 12px; }
.sp-mode.soon h3::after { content: 'Soon'; margin-left: 10px; padding: 2px 8px; vertical-align: 4px; border-radius: 999px; font: 700 10px Inter, sans-serif;
  letter-spacing: 1px; text-transform: uppercase; color: #1d1405; background: var(--sp-gold); }
.sp-feat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; margin-bottom: 72px; }
.sp-feat.flip .sp-feat-pic { order: 2; }
.sp-feat-pic { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); transform: rotate(-1deg); transition: transform 0.5s ease; }
.sp-feat.flip .sp-feat-pic { transform: rotate(1deg); }
.sp-feat:hover .sp-feat-pic { transform: none; }
.sp-feat-pic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.sp-feat-pic { margin: 0; }
.sp-feat-imgs { display: flex; gap: 3px; background: #000; }
.sp-feat-pic img { display: block; width: 100%; min-width: 0; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; }
.sp-feat-frame { flex: 1; min-width: 0; overflow: hidden; }
.sp-feat-pic.strip img { aspect-ratio: 3 / 4.2; object-position: 50% 15%; }
.sp-feat-pic.pair img { aspect-ratio: 1 / 1; object-position: 50% 45%; }
.sp-feat-pic .sp-cap { margin: 0; padding: 10px 14px 12px; background: #0e1218; color: rgba(244, 241, 230, 0.62); }
.sp-feat h3 { margin: 0 0 12px; font: 800 clamp(24px, 3vw, 34px)/1.15 Inter, sans-serif; letter-spacing: -0.5px; }
.sp-feat-txt p:last-child { margin: 0; color: var(--sp-dim); font-size: 16px; }
.sp-chips-sec { padding-top: 24px; text-align: center; }
.sp-chips-sec .sp-h2 { margin-bottom: 24px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 860px; margin: 0 auto; }
.sp-chips span { padding: 8px 16px; border-radius: 999px; font-size: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s, border-color 0.2s; }
.sp-chips span:hover { background: rgba(242, 193, 78, 0.14); border-color: rgba(242, 193, 78, 0.5); }
.sp-final { position: relative; max-width: 1100px; margin: 110px auto 0; padding: 0 20px 40px; }
.sp-final-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.sp-final-pic { margin: 0; border-radius: 14px; overflow: hidden; background: #0e1218; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); transform: rotate(1.2deg); }
.sp-final-pic img { display: block; width: 100%; aspect-ratio: 1037 / 760; object-fit: cover; object-position: 50% 0%; }
.sp-final-pic .sp-cap { margin: 0; padding: 10px 14px 12px; }
/* The game itself: framed screenshots (the first two big), each opening full size */
.sp-shots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.sp-shot { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; padding: 0; text-align: left; color: var(--sp-dim); background: none; border: 0; cursor: zoom-in;
  font: 14px/1.4 Inter, sans-serif; transition-delay: var(--d, 0ms); }
.sp-shot:nth-child(-n+2) { grid-column: span 3; }
.sp-shot-frame { display: block; padding: 6px; border-radius: 12px; background: linear-gradient(180deg, #1b222c, #0e1218); box-shadow: 0 0 0 1px rgba(242, 193, 78, 0.28), 0 22px 44px rgba(0, 0, 0, 0.55);
  transition: transform 0.35s ease, box-shadow 0.35s ease; }
.sp-shot-frame img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0%; border-radius: 7px; background: #0e1218; }
.sp-shot:hover .sp-shot-frame, .sp-shot:focus-visible .sp-shot-frame { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(242, 193, 78, 0.7), 0 28px 50px rgba(0, 0, 0, 0.6); }
.sp-shot:focus-visible { outline: none; }
.sp-shot-txt b { display: block; font: 600 12px Oswald, Inter, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--sp-gold); }
.sp-zoom { position: fixed; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px 12px;
  background: rgba(5, 7, 10, 0.92); animation: sp-fade 0.2s ease both; }
@keyframes sp-fade { from { opacity: 0; } }
.sp-zoom figure { margin: 0; max-width: min(1400px, 100%); min-width: 0; }
.sp-zoom img { display: block; max-width: 100%; max-height: calc(100vh - 110px); margin: 0 auto; border-radius: 8px; box-shadow: 0 0 0 1px rgba(242, 193, 78, 0.35), 0 30px 80px rgba(0, 0, 0, 0.7); cursor: zoom-out; }
.sp-zoom-cap { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--sp-dim); }
.sp-zoom-cap b { font: 600 12px Oswald, Inter, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--sp-gold); margin-right: 6px; }
.sp-zoom-x, .sp-zoom-nav { flex: none; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; font: 300 28px/1 Inter, sans-serif; color: var(--sp-ink);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); }
.sp-zoom-x { position: absolute; top: 14px; right: 14px; }
.sp-zoom-x:hover, .sp-zoom-nav:hover, .sp-zoom-x:focus-visible, .sp-zoom-nav:focus-visible { border-color: var(--sp-gold); outline: none; }
@media (max-width: 820px) {
  /* A row to swipe through on a phone */
  .sp-shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -20px; padding: 0 20px 10px; scrollbar-width: none; }
  .sp-shots::-webkit-scrollbar { display: none; }
  .sp-shot, .sp-shot:nth-child(-n+2) { flex: 0 0 82%; scroll-snap-align: center; }
  .sp-zoom-nav { position: absolute; bottom: 18px; }
  .sp-zoom-nav.prev { left: calc(50% - 56px); }
  .sp-zoom-nav.next { right: calc(50% - 56px); }
  .sp-zoom img { max-height: calc(100vh - 150px); }
}
/* The look: the six era strips */
.sp-eras { display: grid; gap: 10px; }
.sp-era-strip { position: relative; height: 92px; border-radius: 12px; overflow: hidden; background-size: cover; background-position: center 35%;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2, .7, .2, 1), height 0.4s ease; transition-delay: var(--d, 0ms); }
.sp-era-strip::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 15, 20, 0.85), rgba(11, 15, 20, 0.15) 60%); }
.sp-era-strip span { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; font-size: 13px; color: var(--sp-dim); }
.sp-era-strip b { font: 800 22px Inter, sans-serif; color: var(--sp-ink); }
.sp-era-strip:hover { height: 130px; }
.sp-final-in, .sp-credit { position: relative; }
.sp-final .sp-h2 { margin-bottom: 0; }
.sp-final .sp-lede { margin: 16px 0 30px; animation: none; }
.sp-final .sp-credit { text-align: center; }
@media (max-width: 820px) { .sp-final-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; } .sp-final .sp-lede { margin-left: auto; margin-right: auto; } }
.sp-credit { margin: 90px 0 0; font-size: 11.5px; color: rgba(244, 241, 230, 0.45); }

/* Rising into view */
.sp-reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2, .7, .2, 1); }
.sp-reveal.in { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .sp-stats { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .sp-stat:nth-child(3) { border-left: 0; }
  .sp-modes { grid-template-columns: 1fr; }
  .sp-feat, .sp-feat.flip { grid-template-columns: 1fr; gap: 22px; margin-bottom: 56px; }
  .sp-feat .sp-feat-pic, .sp-feat.flip .sp-feat-pic { order: 2; }   /* stacked: the heading, then its picture */
  .sp-sec { padding-top: 72px; }
  .sp-hero-foot { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .splash, .splash * { animation: none !important; transition: none !important; }
  .sp-reveal { opacity: 1; transform: none; }
}
.footer-welcome { color: inherit; }
/* The account panel (ui/online.js): signing in, under the masthead's Sign in button. */
.account-panel { position: absolute; z-index: 900; width: min(340px, calc(100vw - 24px)); padding: 14px 16px; border-radius: 8px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); }
.account-panel p { margin: 0 0 10px; }
.account-panel .ap-form { display: flex; gap: 8px; flex-wrap: wrap; }
.account-panel .ap-form input { flex: 1 1 180px; min-width: 0; padding: 6px 8px; font: inherit; }
.account-panel .row { display: flex; gap: 8px; }
/* Send feedback (ui/feedback.js): a dialog over the page, above the welcome page too. */
.fb-back { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, 0.55); }
.fb-box { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px; border-radius: 10px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); }
.fb-form { display: flex; flex-direction: column; gap: 10px; }
.fb-form h2 { margin: 0; }
.fb-sub { margin: 0; color: var(--muted); font-size: 13px; }
.fb-form select, .fb-form textarea, .fb-form input { width: 100%; padding: 7px 9px; font: inherit; }
.fb-form textarea { resize: vertical; }
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-msg { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--muted); }
.fb-row { display: flex; gap: 8px; justify-content: flex-end; }
/* The champions' card (ui/champcard.js): the picture in a window, with Save image and Share. */
.cel-share { width: 100%; margin: 4px 0 10px; }
.cc-back { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.6); }
.cc-box { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px; border-radius: 10px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.cc-box h2 { margin: 0 0 12px; }
.cc-frame img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.cc-status { margin: 10px 0; }
.cc-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* A steal on the field (ui/app.js): the call on the bag as the runner gets there, then it fades. */
.steal-call { opacity: 0; animation: steal-call 2.4s ease-out forwards; pointer-events: none; }
.steal-call .sc-word { font: 900 13px Oswald, Impact, sans-serif; letter-spacing: 1px; paint-order: stroke; stroke: rgba(0, 0, 0, 0.75); stroke-width: 3px; }
.steal-call .sc-what { font: 700 7.5px Oswald, Impact, sans-serif; letter-spacing: 1px; paint-order: stroke; stroke: rgba(0, 0, 0, 0.7); stroke-width: 2.5px; }
.steal-call.safe text { fill: #ffe066; }
.steal-call.out text { fill: #ff6b5e; }
@keyframes steal-call { 0% { opacity: 0; transform: translateY(3px); } 10% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* With reduced motion the calls don't stay up on the field (the play-by-play badges carry them). */
@media (prefers-reduced-motion: reduce) { html:not(.full-motion) .steal-call { animation: none; opacity: 0; } }
/* ...and in the play-by-play: the running before the pitch with its own badge. */
.fd-text p.fd-run { font-weight: 600; }
.fd-run-tag { display: inline-block; padding: 0 5px; margin-right: 2px; border-radius: 3px; font-size: 0.78em; letter-spacing: 0.5px; text-transform: uppercase; vertical-align: 1px;
  color: #fff; background: var(--good, #2f6b3a); }
.fd-run-tag.out { background: var(--accent, #8c1c13); }
/* The pitch a runner stole on (ui/app.js): ringed in the strip, green safe or red out. */
.fd-pitches .pt.pt-steal { box-shadow: 0 0 0 2px var(--good, #2f6b3a); position: relative; }
.fd-pitches .pt.pt-steal.out { box-shadow: 0 0 0 2px var(--accent, #8c1c13); }
.fd-pitches .pt.pt-steal::after { content: '\00bb'; position: absolute; top: -9px; right: -5px; font-size: 11px; line-height: 1; font-weight: 700; color: var(--good, #2f6b3a); }
.fd-pitches .pt.pt-steal.out::after { color: var(--accent, #8c1c13); }
/* A play at the plate (ui/app.js): the throw home, the slide's dust, the call (as a steal's). */
.plate-throw { stroke-width: 1.6px; }
.slide-dust { fill: rgba(196, 160, 110, 0.75); opacity: 0; transform-box: fill-box; transform-origin: center; animation: slide-dust 0.9s ease-out forwards; pointer-events: none; }
@keyframes slide-dust { 0% { opacity: 0; transform: scale(0.3); } 20% { opacity: 0.9; } 100% { opacity: 0; transform: scale(2.2); } }
/* A walk-off: the mob at home, and the word over the infield. */
.mob-man { opacity: 0; animation: mob-in 0.75s ease-out forwards; }
@keyframes mob-in { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 100% { opacity: 1; transform: translate(var(--dx), var(--dy)); } }
.mob-hop { animation: mob-hop 0.38s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes mob-hop { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.walkoff-tag { font: 900 22px Oswald, Impact, sans-serif; letter-spacing: 2px; fill: #ffd34d; paint-order: stroke; stroke: rgba(0, 0, 0, 0.75); stroke-width: 4px;
  opacity: 0; transform-box: fill-box; transform-origin: center; animation: walkoff-pop 0.6s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes walkoff-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
.fd-tag.walkoff { background: #f2c14e; color: #2a1d00; border-color: #c99a1e; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  html:not(.full-motion) .mob-man { animation: none; opacity: 1; transform: translate(var(--dx), var(--dy)); }
  html:not(.full-motion) .mob-hop, html:not(.full-motion) .slide-dust { animation: none; }
  html:not(.full-motion) .slide-dust { opacity: 0; }
  html:not(.full-motion) .walkoff-tag { animation: none; opacity: 1; }
}
.steal-call .plate-word { font-size: 16px; }