/* Velvet red (Jay, 2026-10-19: "select an iconic color for the site instead of black"): the header is a deep
   movie-palace burgundy that sits with the gold logo, and dark mode's backgrounds take a faint warm tint of it. */
/* film-reference.com: the site's look, loaded after style.css on every page since 2026-10-19 (the Baseball-Reference
   "classic" look was retired). System fonts (no downloads), softer surfaces, rounded cards, a dark sticky header.
   Light or dark follows the device unless the member picks one (html[data-mode="light"|"dark"], POST /prefs/mode):
   every dark rule is written twice, under prefers-color-scheme with :not([data-mode="light"]) and under
   [data-mode="dark"]. Links are one teal in each mode (no visited purple); gold is for the brand and buttons. */

:root {
  --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f0f2f5; --border: #e3e6eb; --text: #16181d;
  --muted: #5f6672; --link: #0b6e77; --link-visited: #0b6e77; --accent: #b5891f; --accent-text: #7f5c0f; --on-accent: #17130a; --hover: #fff6d6;
  --head: #4a0d18; --head-text: #f6eee6; --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: #110b0c; --surface: #1b1214; --surface-2: #24181b; --border: #3a272b; --text: #ece6e4;
    --muted: #9aa3b2; --link: #63c7cd; --link-visited: #63c7cd; --accent: #d9ae3a; --accent-text: #d9ae3a; --on-accent: #17130a; --hover: #2c2a1d;
    --head: #33080f; --head-text: #f6eee6; --shadow: none;
  }
}
:root[data-mode="dark"] {
  --bg: #110b0c; --surface: #1b1214; --surface-2: #24181b; --border: #3a272b; --text: #ece6e4;
  --muted: #9aa3b2; --link: #63c7cd; --link-visited: #63c7cd; --accent: #d9ae3a; --accent-text: #d9ae3a; --on-accent: #17130a; --hover: #2c2a1d;
  --head: #33080f; --head-text: #f6eee6; --shadow: none;
}

html { font-size: 15px; }
body { background: var(--bg); color: var(--text); line-height: 1.5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--link); }
a:visited { color: var(--link-visited); }
.muted, .daily h3, a.rank, ul.sources, table.stats td.rank { color: var(--muted); }
code { background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }

/* Header */
header.site { background: var(--head); border-bottom: none; position: sticky; top: 0; z-index: 20; }
header.site .wrap { padding-top: 8px; padding-bottom: 8px; }
.logo { color: var(--head-text) !important; font-weight: 800; letter-spacing: -0.02em; }
.logo span { color: var(--accent-text); }
header nav a, header nav a:visited { color: #efdcd2; font-weight: 600; padding: 4px 8px; margin-right: 2px; border-radius: 999px; }
header nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
nav.site-nav > a, details.menu > summary { color: #efdcd2; font-weight: 600; padding: 4px 8px; margin-right: 2px; border-radius: 999px; }
details.menu > summary:hover, details.menu[open] > summary, nav.site-nav > a.current { background: rgba(255, 255, 255, .1); color: #fff; }
.menu-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
header nav .menu-panel a, header nav .menu-panel a:visited { color: var(--text); border-radius: 0; padding: 6px 14px; font-weight: 500; }
header nav .menu-panel a:hover { background: var(--surface-2); color: var(--text); }
header.site .account, header.site .account a, form.theme button { color: #e6d2c7; }
form.search input { background: rgba(255, 255, 255, .1); color: #f6eee6; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px 0 0 8px; padding: 6px 10px; }
form.search input::placeholder { color: rgba(246, 238, 230, .7); }
form.search button { background: var(--accent); color: var(--on-accent); border: none; border-radius: 0 8px 8px 0; padding: 6px 12px; font-weight: 600; }
form.search { gap: 0; }
ul.suggest { background: var(--surface); border-color: var(--border); border-radius: 8px; overflow: hidden; }
ul.suggest li a { color: var(--text); padding: 6px 10px; }
ul.suggest li.active a, ul.suggest li a:hover { background: var(--hover); }
ul.suggest li.ask { border-top: 1px solid var(--border); }
ul.suggest li.ask a { color: var(--link); font-weight: 600; white-space: normal; }

/* Type */
h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.2rem; font-weight: 700; border-bottom: none; padding-bottom: 0; margin-top: 26px; }
h2::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 4px; background: var(--accent); border-radius: 2px; }
.grid-promo h2::after, .mg-group h2::after { display: none; }

/* Cards */
.meta, .daily .feature, .tile, .statline, .notice, details.grid-answers, pre.share, blockquote.cite {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.meta { padding: 14px; gap: 18px; }
.meta img.poster, .feature-img, .tile img, img.grid-poster { border: none; border-radius: 6px; }
.tile { padding: 8px; transition: transform .08s ease; }
.tile:hover { background: var(--surface); transform: translateY(-1px); }
.tile .muted { font-size: .85em; }
.tile .ph { background: var(--surface-2); border: none; border-radius: 6px; }
.tile b.tile-year { color: var(--accent-text); }
.daily .feature { padding: 12px 14px; }
.grid-promo { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid #d4a106; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; }
details.grid-answers { padding: 8px 12px; }
blockquote.cite { border-left: 3px solid var(--accent); }

/* Box scores and the home stat strip */
.statline { overflow: hidden; }
.statline > div { border: none; border-right: 1px solid var(--border); margin: 0; padding: 8px 4px; }
.statline > div:last-child { border-right: none; }
.statline span { background: none; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.statline b { font-size: 1.35rem; font-weight: 800; }
.statline a, .statline a:visited, table.box a, table.box a:visited { color: var(--link); }
table.box { border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.box th, table.box td { border: none; border-right: 1px solid var(--border); padding: 6px 14px; }
table.box th:last-child, table.box td:last-child { border-right: none; }
table.box th { background: none; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
table.box td { font-size: 1.25rem; font-weight: 800; }

/* Stats tables */
table.stats { background: var(--surface); border-collapse: separate; border-spacing: 0; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; font-size: .9rem; box-shadow: var(--shadow); }
table.stats th, table.stats td { border: none; border-bottom: 1px solid var(--border); padding: 5px 9px; }
table.stats tbody tr:last-child td { border-bottom: none; }
table.stats thead th { background: var(--surface-2); color: var(--muted); border-bottom: 1px solid var(--border);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
table.stats thead th.sortable:hover { background: var(--border); color: var(--text); }
table.stats tbody tr:nth-child(even) { background: transparent; }
table.stats tbody tr:hover, table.stats tbody tr:target { background: var(--hover); }
table.stats tfoot td { background: var(--surface-2); border-top: 1px solid var(--border); }
table.stats tr.set td { background: var(--surface-2); }
table.stats.leader caption a { color: var(--text); }
.tabs a { border: 1px solid var(--border); border-radius: 999px; background: var(--surface); margin: 0 4px 6px 0; padding: 3px 12px; }
.tabs a.current { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Buttons and forms */
a.button, .welcome button, .mg-controls button, form.inline button, form.pin button {
  border-radius: 8px; }
a.button { background: var(--accent); color: var(--on-accent); padding: 6px 14px; font-weight: 600; }
a.button:visited { color: #fff; }
form.pin button { background: var(--surface); color: var(--text); border-color: var(--border); }
form.pin button.on { background: #fff4c2; color: #000; }
input[type=search], input[type=text], input[type=password], textarea, select {
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
header form.search input[type=search] { background: rgba(255, 255, 255, .1); color: #f6eee6; border-color: rgba(255, 255, 255, .18); border-radius: 8px 0 0 8px; }
button { color: var(--text); background: var(--surface-2); border: 1px solid var(--border); padding: 5px 12px; }
.welcome button.pw-toggle { color: var(--muted); }
.welcome button.pw-toggle:hover, .welcome button.pw-toggle:focus-visible { color: var(--text); }
ol.be-list li { background: var(--surface); border-color: var(--border); }
ul.be-topics a { border-color: var(--border); border-left-color: var(--text); background: var(--surface); }
ul.be-topics li.ranked a { border-left-color: var(--accent-text); }
ul.be-topics a:hover { background: var(--hover); }
.be-leader { color: var(--accent-text); } .be-go, b.be-pos { color: var(--text); }
.be-table tr.be-mine td { background: var(--surface-2); }

/* Games */
table.grid-board { border-collapse: separate; border-spacing: 6px; }
table.grid-board th { background: none; border: none; color: var(--text); }
table.grid-board td.cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
table.grid-board td.solved { background: #e7f6ea; }
.mg-tile span { background: var(--surface-2); border: none; border-radius: 8px; color: var(--text); }
.mg-tile input:checked + span { background: #4a4a45; color: #fff; }
.mg-btn, a.mg-btn:visited { background: transparent; color: var(--text); border: 1px solid var(--text); }
.mg-btn:hover { background: var(--surface-2); }
.mg-submit { background: var(--text); color: var(--bg); }
.mg-submit:hover { background: var(--muted); }
.mg-help summary { color: var(--link); }
.mg-group { border: none; }

/* Chart of the week */
.chart-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
svg.chart .lbl { fill: var(--text); }
svg.chart .val { fill: var(--muted); }
svg.chart .bar, svg.chart .dot { fill: var(--accent); }
svg.chart .grid { stroke: var(--border); }

svg.arc-chart .bar { fill: var(--muted); }
svg.arc-chart .dot { stroke: var(--accent); }
ol.arc-track li { background: var(--surface); border-color: var(--border); color: var(--muted); border-radius: 10px; }
ol.arc-track li.next { border-color: var(--text); color: var(--text); }
ol.arc-track li.miss { background: #d93a4a; border-color: #d93a4a; color: #fff; }
ol.arc-track li.hit { background: #2f9e55; border-color: #2f9e55; color: #fff; }
.arc-result { border-radius: var(--radius); box-shadow: var(--shadow); }
.arc-result.win { background: linear-gradient(135deg, #2f9e55, #1f7a40); }
.arc-result.miss { background: linear-gradient(135deg, #e04556, #b52435); }
.arc-result.lose { background: linear-gradient(135deg, #4a5568, #2d3748); }
ol.arc-clues li { background: var(--surface); border-color: var(--border); border-left-color: var(--accent-text); border-radius: var(--radius); box-shadow: var(--shadow); }
ol.arc-clues li.locked { background: transparent; box-shadow: none; border-color: var(--border); color: var(--muted); }
ol.arc-clues li.new { background: var(--hover); border-color: #d4a106; border-left-color: #d4a106; }
.arc-clue-no { background: var(--accent); }
li.locked .arc-clue-no { background: var(--border); color: var(--muted); }
form.arc-guess input[type=search] { border: 2px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
form.arc-guess input[type=search]:focus { border-color: var(--accent-text); outline: none; }
form.arc-guess button, button.arc-pick { background: var(--accent); border-radius: 10px; }
form.arc-guess button.arc-skip { background: transparent; color: var(--text); border: 2px solid var(--border); }
ol.arc-track li.skip { background: #6b7a8f; border-color: #6b7a8f; color: #fff; }
.arc-result.skipped { background: linear-gradient(135deg, #6b7a8f, #4a5568); }

.game-card { background: var(--surface); border: 1px solid var(--border); border-top-width: 4px; border-radius: var(--radius); box-shadow: var(--shadow); }
.game-card h2::after { display: none; }
a.game-tile { border-radius: var(--radius); box-shadow: var(--shadow); }
.gt-name { color: var(--text); } .gt-status { color: var(--text); } .gt-meta { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) a.game-tile.game-frames, :root:not([data-mode="light"]) a.game-tile.game-montage, :root:not([data-mode="light"]) a.game-tile.game-arc, :root:not([data-mode="light"]) a.game-tile.game-thatguy, :root:not([data-mode="light"]) a.game-tile.game-doubletake, :root:not([data-mode="light"]) a.game-tile.game-rushmore, :root:not([data-mode="light"]) a.game-tile.game-bestever, :root:not([data-mode="light"]) a.game-tile.game-auteur, :root:not([data-mode="light"]) a.game-tile.game-whodirected, :root:not([data-mode="light"]) a.game-tile.game-creditsroll, :root:not([data-mode="light"]) a.game-tile.game-sixdegrees, :root:not([data-mode="light"]) a.game-tile.game-higherlower, :root:not([data-mode="light"]) a.game-tile.game-timeline, :root:not([data-mode="light"]) a.game-tile.game-lineup { background: var(--surface); border-color: var(--border); }
  :root:not([data-mode="light"]) .gt-button { background: #f2f2f2; color: #111; }
  :root:not([data-mode="light"]) a.game-tile.done .gt-button { background: transparent; color: var(--text); border-color: var(--text); }
}
:root[data-mode="dark"] a.game-tile.game-frames, :root[data-mode="dark"] a.game-tile.game-montage, :root[data-mode="dark"] a.game-tile.game-arc, :root[data-mode="dark"] a.game-tile.game-thatguy, :root[data-mode="dark"] a.game-tile.game-doubletake, :root[data-mode="dark"] a.game-tile.game-rushmore, :root[data-mode="dark"] a.game-tile.game-bestever, :root[data-mode="dark"] a.game-tile.game-auteur, :root[data-mode="dark"] a.game-tile.game-whodirected, :root[data-mode="dark"] a.game-tile.game-creditsroll, :root[data-mode="dark"] a.game-tile.game-sixdegrees, :root[data-mode="dark"] a.game-tile.game-higherlower, :root[data-mode="dark"] a.game-tile.game-timeline, :root[data-mode="dark"] a.game-tile.game-lineup { background: var(--surface); border-color: var(--border); }
:root[data-mode="dark"] .gt-button { background: #f2f2f2; color: #111; }
:root[data-mode="dark"] a.game-tile.done .gt-button { background: transparent; color: var(--text); border-color: var(--text); }

/* Plot */
p.tagline { color: var(--muted); }
details.spoilers { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; }
details.spoilers summary { color: var(--accent-text); }

/* Footer */
footer.site { background: transparent; border-top: 1px solid var(--border); color: var(--muted); }

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) table.grid-board td.solved { background: #17301d; }
  :root:not([data-mode="light"]) table.grid-board td.just-wrong, :root:not([data-mode="light"]) .grid-wrong { background: #3a1519; color: #ffb3bc; }
  :root:not([data-mode="light"]) .rarity { color: #6fd38a; }
  :root:not([data-mode="light"]) .notice { background: #2c2a1d; border-color: #5a5124; }
  :root:not([data-mode="light"]) .tg-score > div { background: var(--surface-2); border-color: var(--border); }
  :root:not([data-mode="light"]) .tg-score span { color: var(--muted); }
  :root:not([data-mode="light"]) ol.tg-named li { background: var(--surface); border-color: var(--border); }
  :root:not([data-mode="light"]) ol.tg-named li.miss { background: #3a1519; border-color: #5a2a2f; color: #ffb3bc; }
  :root:not([data-mode="light"]) table.tg-all tr.yours td { background: #17301d; }
  :root:not([data-mode="light"]) .scan-done { background: #17301d; border-color: #2e7d32; color: #8fe0a3; }
  :root:not([data-mode="light"]) img { opacity: .95; }
}
:root[data-mode="dark"] table.grid-board td.solved { background: #17301d; }
:root[data-mode="dark"] table.grid-board td.just-wrong, :root[data-mode="dark"] .grid-wrong { background: #3a1519; color: #ffb3bc; }
:root[data-mode="dark"] .rarity { color: #6fd38a; }
:root[data-mode="dark"] .notice { background: #2c2a1d; border-color: #5a5124; }
:root[data-mode="dark"] .tg-score > div { background: var(--surface-2); border-color: var(--border); }
:root[data-mode="dark"] .tg-score span { color: var(--muted); }
:root[data-mode="dark"] ol.tg-named li { background: var(--surface); border-color: var(--border); }
:root[data-mode="dark"] ol.tg-named li.miss { background: #3a1519; border-color: #5a2a2f; color: #ffb3bc; }
:root[data-mode="dark"] table.tg-all tr.yours td { background: #17301d; }
:root[data-mode="dark"] .scan-done { background: #17301d; border-color: #2e7d32; color: #8fe0a3; }
:root[data-mode="dark"] img { opacity: .95; }
@media (max-width: 640px) {
  html { font-size: 14px; }
  header.site { position: static; }
  .statline > div { flex-basis: 33%; border-bottom: 1px solid var(--border); }
}

.owned { color: #2fa84f; }
table.stats tr.pending td { background: var(--hover); }
.queue-item { border-top-color: var(--border); }

.ig-head { border-radius: var(--radius); }
.ig-facts > div { background: var(--surface); border-color: var(--border); border-top-color: var(--accent-text); border-radius: var(--radius); }
.ig-facts span, ul.ig-notes { color: var(--muted); } .ig-facts em { color: var(--muted); }
svg.franchise-chart .bar { fill: var(--accent); }
dialog.rm-dialog { background: var(--surface); color: var(--text); }
input.rm-dialog-q { background: var(--surface-2); color: var(--text); border-color: var(--border); }
ul.rm-dialog-results li:hover, ul.rm-dialog-results li.on { background: var(--surface-2); }
button.dt-option { background: var(--surface); color: var(--text); border-color: var(--border); }
ol.dt-progress li { background: var(--surface-2); color: var(--muted); }
ol.dt-progress li.now { background: var(--surface); }
.egot-l.none { color: var(--border); border-color: var(--border); }
.egot-l.nominated { color: var(--muted); border-color: var(--muted); }
p.fh-facts, .st-sub, dl.fh-people dt, dl.fh-grid dt, .fh-themes-label, .st-label, a.st-rank, a.st-rank-in { color: var(--muted); }
.st { background: var(--surface-2); border-color: var(--border); }
a.st-num { color: var(--text); }
a.chip { background: var(--surface-2); border-color: var(--border); }
a.chip:hover { background: var(--border); }
.fh-cert { border-color: var(--muted); }
.egot-card { background: var(--surface); border-color: var(--border); }
.ig-week { border-top-color: var(--border); }
.ig-week.saved { background: var(--surface-2); }
form.ig-edit label { color: var(--muted); }
form.ask-form input { background: var(--surface-2); color: var(--text); border-color: var(--border); }
form.ask-form button { background: var(--accent); }
.ask-read { background: var(--surface-2); }
.ask-cannot { background: var(--surface); }
details.ask-how pre { background: var(--surface-2); }
form.ask-form button.ask-mic { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
form.ask-form button.ask-mic.on { background: #c62828; color: #fff; }
.hl-card, button.sd-pick, ol.tl-list li { background: var(--surface); border-color: var(--border); color: var(--text); }
ol.tl-list li.ok { background: rgba(46, 125, 50, .18); border-color: #2e7d32; }
ol.sd-chain li.sd-actor a, ol.sd-chain.best li.sd-actor a { background: var(--surface-2); color: var(--text); }
ol.sd-chain li.sd-actor.target a { background: var(--accent); color: var(--on-accent); }
ol.sd-chain li.sd-film { border-left-color: var(--border); }
p.cr-banner { background: var(--surface-2); }
p.cr-banner.miss { background: rgba(198, 40, 40, .18); color: var(--text); } p.cr-banner.ok { background: rgba(46, 125, 50, .18); color: var(--text); }
ol.cr-guesses li { background: rgba(198, 40, 40, .18); } ol.cr-guesses li.ok { background: rgba(46, 125, 50, .2); }
.sd-who small { color: var(--muted); }
button.sd-pick.target { background: var(--surface-2); }
ol.au-clues li { background: var(--surface); border-color: var(--border); }
ol.au-clues li.hidden-clue { background: var(--surface-2); }
ol.au-clues li.new { border-color: var(--accent-text); }
ul.au-people small { color: var(--muted); }
.fmx-table th, .fmx-table td { border-bottom-color: var(--border); }
.fmx-table .fmx-label, .fmx-table .fmx-corner { background: var(--surface); border-right-color: var(--accent-text); }
.fmx-table td.fmx-in { background: var(--hover); }
.fmx-table td.fmx-archive { background: var(--surface-2); color: var(--muted); }
.fmx-intro, .fmx-table .fmx-label small, .fmx-table td small, .fmx-src-head, ol.fmx-sources { color: var(--muted); }
.fmx-film img, .fmx-film .ph { border-color: var(--border); background: var(--surface-2); }
.fmx-none { color: var(--border); }
.fmx-note[open] { color: var(--muted); } .fmx-note summary { border-color: var(--accent-text); color: var(--accent-text); }
a.fotw { background: var(--surface); border-color: var(--border); border-top-color: var(--accent-text); border-radius: var(--radius); }
.fotw-posters img { border-color: var(--border); }
.fotw-stats > span { color: var(--muted); } .fotw-stats b { color: var(--text); }
p.fmx-picks a { border-color: var(--accent-text); } a.fmx-badge { background: var(--hover); color: var(--accent-text); }

/* desktop header: the last pill's text lines up with the account links below it */
@media (min-width: 641px) { nav.site-nav > :last-child > summary, nav.site-nav > a:last-child { margin-right: -8px; } }
.be-side { border-color: var(--border); background: var(--surface); }
.be-move { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.be-move:hover:not(:disabled) { border-color: var(--accent-text); }
.popnote { background: var(--surface); color: var(--text); border-color: var(--accent-text); }
.popnote strong { color: var(--accent-text); }
.fmx-note summary[aria-expanded="true"] { background: var(--accent); color: var(--on-accent); }
.rc-summary, .rc-report { border-color: var(--border); background: var(--surface); }
.rc-report.changed { border-color: var(--accent-text); } .rc-name, .rc-new { color: var(--accent-text); }
ul.rc-badges li, .rc-badge { border-color: var(--accent-text); color: var(--accent-text); } .rc-bar { background: var(--surface-2); } .rc-bar span { background: var(--accent); }
.rc-status { background: var(--surface-2); } .rc-reply { background: var(--surface-2); border-color: var(--accent-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .rc-status.rc-fixed { background: #17301d; color: #8fe0a3; } :root:not([data-mode="light"]) .rc-status.rc-working { background: #3a3012; color: #f0d37a; } :root:not([data-mode="light"]) .rc-status.rc-wontfix { background: #3a1818; color: #f0a0a0; }
}
:root[data-mode="dark"] .rc-status.rc-fixed { background: #17301d; color: #8fe0a3; } :root[data-mode="dark"] .rc-status.rc-working { background: #3a3012; color: #f0d37a; } :root[data-mode="dark"] .rc-status.rc-wontfix { background: #3a1818; color: #f0a0a0; }
ol.rc-log li { border-color: var(--border); } ol.rc-log time, .rc-found { color: var(--muted); }
.ld-eyebrow { color: var(--accent-text); } .ld-signin, ul.ld-games li, ul.ld-inside li { background: var(--surface); border-color: var(--border); }
ul.ld-inside li { border-top-color: var(--accent-text); } ul.ld-games span, ul.ld-inside span { color: var(--muted); }
.ld-signin input[type=text], .ld-signin input[type=password] { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
.ld-signin button[type=submit] { background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; }
.tl-moves .be-move { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.tl-moves .be-move:hover:not(:disabled) { border-color: var(--accent-text); }

/* Contrast fixes from the 2026-10-19 audit (WCAG AA, 4.5:1 for small text): gold as text is darker in light mode
   (--accent-text), and three controls still carried Classic colours. */
details > summary, details.fh-more summary, details.egot-wins summary, .mg-help summary, .bio details summary { color: var(--link); }
details.not-a-film summary { color: var(--muted); }
.egot-l.won { background: var(--accent); color: var(--on-accent); }
.egot-l.none { color: var(--muted); border-color: var(--border); }
button.linkish { color: #b42318; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) button.linkish { color: #ff8a80; }
}
:root[data-mode="dark"] button.linkish { color: #ff8a80; }
button.arc-pick { background: var(--accent); color: var(--on-accent); }
b.tl-pos { color: var(--text); }
.tl-grip, .be-grip, .fmx-none { color: var(--muted); }
span.ig-oscar { color: var(--accent-text); }
.mg-tile small { color: var(--muted); }
form.arc-guess button { color: var(--on-accent); }
.menu-head { color: var(--muted); } .menu-panel .menu-span, form.menu-signout { border-color: var(--border); }
.menu-tag { background: var(--hover); color: var(--accent-text); }
span.avatar { background: var(--accent); color: var(--on-accent); }
header nav .menu-panel form.look-pick button { border-color: var(--border); color: var(--text); }
header nav .menu-panel form.look-pick button.on { border-color: var(--accent); background: var(--hover); color: var(--text); }
header nav .menu-panel form.menu-signout button { color: var(--text); }
header.site a.feedback-btn, header.site a.feedback-btn:visited { color: #f2d47a; border-color: #8a6d12; }
header.site a.feedback-btn:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.rm-tab { border-color: var(--border); } .rm-tab.on { border-color: var(--accent); background: var(--hover); color: var(--text); }
ul.rm-film-results { background: var(--surface); border-color: var(--border); } ul.rm-film-results li:hover { background: var(--hover); }
.rm-chip { border-color: var(--border); background: var(--surface-2); } .rm-table-wrap { border-color: var(--border); }
.rm-film-q { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
button.rm-pick { background: var(--accent); color: var(--on-accent); }
dialog.rm-dialog { background: var(--surface); color: var(--text); }
.gs-card { background: var(--surface); border-color: var(--border); } .gs-stats span { color: var(--muted); }
a.gs-next-btn, a.gs-next-btn:visited { background: var(--accent); color: var(--on-accent); }
.sd-arrow, .hl-vs, .cr-q { color: var(--muted); }

ol.dt-progress li.now { background: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .dt-round-no, :root:not([data-mode="light"]) ol.dt-progress li.now { color: #ff9a62; } }
:root[data-mode="dark"] .dt-round-no, :root[data-mode="dark"] ol.dt-progress li.now { color: #ff9a62; }
ol.lu-films li, ol.lu-answers li { border-color: var(--border); background: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) ol.lu-answers li.ok { background: #17301d; border-color: #2e7d32; } }
:root[data-mode="dark"] ol.lu-answers li.ok { background: #17301d; border-color: #2e7d32; }
.ec-sort button { border-color: var(--border); } .ec-sort button.on { border-color: var(--accent); background: var(--hover); color: var(--text); }
article.ec-player { background: var(--surface); border-color: var(--border); border-top-color: var(--accent); }
article.ec-player.ec-lead { box-shadow: 0 0 0 2px var(--accent); }
.ec-stats > div { background: var(--surface-2); } .ec-stats > div > span:not(.egot-l) { color: var(--muted); }
.ec-stats > div.ec-hot { background: var(--accent); color: var(--on-accent); } .ec-stats > div.ec-hot span:not(.egot-l) { color: var(--on-accent); }
article.ec-player ul { border-color: var(--border); } .ec-rank { background: var(--accent); color: var(--on-accent); }
.gs-stars button { color: var(--border); } .gs-stars button.on, .gs-stars:hover button { color: var(--accent); } .gs-stars button:hover ~ button { color: var(--border); }
.gs-retire textarea { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
.gs-rating b { color: var(--accent-text); }
article.ec-player.ec-pegot { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #e5e4e2, #b9a6ff 30%, #f2d47a 55%, #9fd8ff 80%, #e5e4e2) border-box; }
li.is-hon { color: var(--muted); }
.ec-step button { border-color: var(--border); } .ec-step button:hover { border-color: var(--accent); } .ec-count { color: var(--muted); }
.ec-locked { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* Movie DNA (2026-10-19): posters joined by the link, family trees, a lineage on film pages */
.dna-hero { padding: 18px 20px; border-radius: var(--radius); margin-bottom: 14px; color: #f7efe6;
  background: radial-gradient(120% 120% at 0% 0%, #6a1424 0%, #33080f 55%, #14040a 100%); }
.dna-hero h1 { color: #fff; margin: 0 0 4px; } .dna-hero p { margin: 4px 0; color: #e6d2c7; } .dna-hero a { color: #f2d47a; }
.dna-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.dna-strip span { padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); font-size: .9em; }
.dna-strip b { color: #f2d47a; font-size: 1.15em; margin-right: 3px; }
.dna-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
.dna-controls[hidden] { display: none; }
.dna-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dna-chips button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 99px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: .9em; }
.dna-chips button i { font-style: normal; color: var(--muted); margin-left: 3px; }
.dna-chips button.on { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: bold; }
.dna-chips button.on i { color: inherit; }
.dna-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.dna-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  border-top: 4px solid var(--dna-c, var(--accent)); box-shadow: var(--shadow); }
.dna-card[hidden] { display: none; }
.dna-card.k-spiritual_successor { --dna-c: #63c7cd; } .dna-card.k-inspired_by { --dna-c: #d4a834; } .dna-card.k-cited_influence { --dna-c: #b388ff; }
.dna-card.k-homage { --dna-c: #e58fa0; } .dna-card.k-based_on { --dna-c: #8c7f6d; }
.dna-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.dna-arrow { display: flex; flex-direction: column; align-items: center; color: var(--dna-c, var(--accent)); font-size: 1.6em; line-height: 1; }
.dna-kind { font-size: .42em; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; text-align: center; max-width: 70px; line-height: 1.2; margin-bottom: 4px; }
.dna-poster { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: #2a0d12; text-decoration: none; color: #f7efe6; }
.dna-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dna-poster span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 6px 5px; font-size: .74em; font-weight: 700; line-height: 1.15;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.dna-poster span i { display: block; font-style: normal; font-weight: 400; opacity: .8; }
.dna-work { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 8px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 12px), linear-gradient(160deg, #4a3f33, #1c1610); border: 1px solid #8c7f6d; }
.dna-work b { font-family: Georgia, 'Times New Roman', serif; font-size: .95em; line-height: 1.15; color: #f2d47a; }
.dna-work small { margin-top: 6px; font-size: .68em; color: #e6d2c7; }
.dna-line { margin: 0; font-size: .92em; }
.dna-quote { margin: 0; padding: 8px 10px; border-left: 3px solid var(--dna-c, var(--accent)); background: var(--hover); border-radius: 0 6px 6px 0; font-style: italic; font-size: .92em; }
.dna-quote footer { font-style: normal; font-size: .85em; color: var(--muted); margin-top: 4px; }
.dna-trees { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 10px; }
.dna-tree { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.dna-root { position: relative; }
.dna-n { display: block; text-align: center; font-size: .82em; color: var(--muted); margin-top: 4px; } .dna-n b { color: var(--accent-text); font-size: 1.3em; }
.dna-kids { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; align-content: start; border-left: 2px solid var(--border); padding-left: 8px; }
.dna-kids .dna-poster span { font-size: .58em; padding: 10px 3px 3px; }
.dna-poster.big span { font-size: .72em; }
/* film pages: what it draws on, the film, what draws on it */
.dna-lineage { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 14px; align-items: start; margin: 8px 0 12px; }
.dna-lineage h3 { margin: 0 0 6px; font-size: .95em; }
.dna-col { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.dna-self { text-align: center; } .dna-self .dna-poster { outline: 3px solid var(--accent); outline-offset: 2px; }
.dna-self p { font-size: .78em; color: var(--muted); margin: 6px 0 0; }
.dna-item { display: flex; flex-direction: column; gap: 3px; }
.dna-item .dna-kind { font-size: .66em; max-width: none; color: var(--accent-text); text-align: left; margin: 0; }
.dna-item details { font-size: .8em; } .dna-item details blockquote { font-size: .95em; }
@media (max-width: 640px) {
  .dna-lineage { grid-template-columns: 1fr; } .dna-self { display: none; }
  .dna-cards { grid-template-columns: 1fr; } .dna-tree { grid-template-columns: 76px 1fr; }
}
.dna-lineage.no-from { grid-template-columns: 120px 1fr; } .dna-lineage.no-from > div:first-child { display: none; }
.dna-lineage.no-to { grid-template-columns: 1fr 120px; } .dna-lineage.no-to > div:last-child { display: none; }
.dna-lineage.no-from.no-to { grid-template-columns: 120px; }
@media (max-width: 640px) { .dna-lineage.no-from, .dna-lineage.no-to { grid-template-columns: 1fr; } }

/* Wikidata money figures on film pages (app/money.py) */
.wd-mark { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 0 4px; border: 1px solid var(--border); border-radius: 3px; color: var(--accent-text); vertical-align: 2px; text-decoration: none; }
details.money-facts > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; }
details.money-facts > summary::-webkit-details-marker { display: none; }
details.money-facts > summary h2 { display: inline; margin: 0; }
details.money-facts > summary h2::before { content: "\25B8\00A0"; color: var(--muted); }
details.money-facts[open] > summary h2::before { content: "\25BE\00A0"; }
details.money-facts { margin: 1.5em 0; }
details.money-facts tr.hl td { background: var(--hover); }

/* Montage: mistakes left as marquee bulbs; a wrong guess flickers the next one out */
.mg-marquee { display: inline-flex; gap: 9px; padding: 7px 12px; margin-left: 6px; vertical-align: middle; border-radius: 999px; background: #2a0a10; box-shadow: inset 0 0 0 2px #5a1a24, inset 0 2px 6px rgba(0,0,0,.6); }
.mg-bulb { position: relative; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #77716a 0 12%, #3b3633 55%, #221e1c 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.mg-bulb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffbe8 0 18%, #ffd96e 45%, #e3a21c 100%); box-shadow: 0 0 6px 2px rgba(255,205,90,.8), 0 0 16px 5px rgba(255,170,40,.35); }
.mg-bulb.out::after { opacity: 0; }
.mg-bulb.just-out::after { animation: mg-bulb-out 1.2s ease-out both; }
@keyframes mg-bulb-out { 0% { opacity: 1; } 12% { opacity: .15; } 20% { opacity: .9; } 32% { opacity: .1; } 42% { opacity: .6; } 55% { opacity: 0; } 64% { opacity: .3; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mg-bulb.just-out::after { animation: none; } }

/* Film and person of the day: text keeps its own column beside the poster instead of wrapping under it */
.daily .feature { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-content: start; }
.daily .feature > a:first-child { grid-row: 1 / span 9; align-self: start; }
.daily .feature > a:first-child .feature-img { float: none; margin: 0; display: block; }
.daily .feature > :not(a:first-child) { grid-column: 2; }

/* Montage tiles: no mid-word hyphens ("Broth-ers"); a word too long for the tile shrinks instead */
.mg-tile span { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; word-break: normal; }
.mg-tile span.mg-long { font-size: clamp(9px, 2.5vw, 13px); }

/* What's new: "Try it" links under an entry */
p.rc-demos { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
a.rc-try, a.rc-try:visited { display: inline-block; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent-text); font-size: .9em; font-weight: 600; text-decoration: none; }
a.rc-try:hover { background: var(--hover); }

/* Hollywood families (families.html, family.html, the person page's Family line) */
.family-line .fam-group { margin-right: 10px; }
.family-line .fam-group + .fam-group::before { content: "· "; color: var(--muted); }
.family-line .fam-link { white-space: nowrap; font-weight: 600; }
.fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.fam-card, .fam-card:visited { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
.fam-card:hover { background: var(--hover); }
.fam-faces { display: flex; }
.fam-faces img { width: 44px; height: 66px; object-fit: cover; border-radius: 6px; border: 2px solid var(--surface); margin-right: -8px; background: var(--surface-2); }
.fam-name { font-weight: 700; font-size: 1.08em; margin-top: 6px; }
.fam-sub { color: var(--muted); font-size: .9em; }
.fam-tree { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.fam-gen { position: relative; padding: 8px 0 14px; border-top: 1px solid var(--border); }
.fam-gen-head { margin: 0 0 8px; font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); border: 0; }
.fam-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.fam-person { display: flex; gap: 10px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); scroll-margin-top: 80px; }
.fam-person.anchor { border-color: var(--accent); }
.fam-person:target { box-shadow: 0 0 0 3px var(--accent); }
.fam-person img { width: 56px; height: 84px; object-fit: cover; border-radius: 6px; background: var(--surface-2); flex: none; }
.fam-who { display: block; font-weight: 700; }
.fam-ties { list-style: none; margin: 4px 0 0; padding: 0; font-size: .88em; color: var(--muted); }

/* The What's new pop-up, once per member (_whatsnew_pop.html, whatsnew.js) */
html.wn-open { overflow: hidden; }
.wn-scrim { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(20, 6, 9, .55); animation: wn-fade .18s ease-out; }
.wn-pop { width: min(560px, 100%); max-height: min(86vh, 760px); overflow-y: auto; background: var(--surface); color: var(--text);
  border-radius: 14px; border-top: 6px solid var(--head); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); padding: 18px 22px 16px;
  animation: wn-rise .22s cubic-bezier(.2, 1.3, .4, 1); outline: none; }
.wn-eyebrow { margin: 0; color: var(--accent-text); font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wn-pop h2 { margin: 2px 0 10px; font-size: 1.45em; border: 0; }
.wn-list { list-style: none; margin: 0; padding: 0; }
.wn-list li { padding: 10px 0; border-top: 1px solid var(--border); }
.wn-list h3 { margin: 0 0 3px; font-size: 1.02em; }
.wn-body { margin: 0; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wn-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 12px 0 2px; border-top: 1px solid var(--border);
  position: sticky; bottom: -16px; background: var(--surface); padding-bottom: 16px; }
.wn-actions button { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px; padding: 8px 22px; font-weight: 700; font-size: 1em; cursor: pointer; }
.wn-scrim.wn-closing { animation: wn-fade .18s ease-in reverse forwards; }
@keyframes wn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wn-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wn-scrim, .wn-pop, .wn-scrim.wn-closing { animation: none; } }
@media (max-width: 640px) { .wn-scrim { align-items: flex-end; padding: 0; } .wn-pop { border-radius: 14px 14px 0 0; max-height: 88vh; padding: 16px; } }

/* Design review leftovers (2026-10-20): footer columns, the 404 page, the section bar, floating table headings and wider pages */
footer.site .foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 28px; padding: 18px 0 14px; }
footer.site .foot-cols h4 { margin: 0 0 6px; color: var(--text); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; }
footer.site .foot-cols a { display: block; padding: 3px 0; color: var(--text); text-decoration: none; font-size: .93em; }
footer.site .foot-cols a:hover { color: var(--link); text-decoration: underline; }
footer.site .foot-legal { border-top: 1px solid var(--border); padding-top: 10px; font-size: .78em; color: var(--muted); }
footer.site .foot-legal p { margin: 2px 0; }
.err-search { display: flex; gap: 8px; max-width: 520px; margin: 14px 0 22px; }
.err-search input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 1.05em; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.err-search button { padding: 10px 18px; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer; appearance: none; }
.err-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; }
.err-games a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; }
.err-games a:hover { border-color: var(--accent); }
.err-games svg { flex: none; border-radius: 8px; }
.err-links li { margin: 4px 0; }
.src-table td { white-space: normal; vertical-align: top; }
.src-table td:first-child { white-space: nowrap; font-weight: 600; }
nav.secbar { position: sticky; top: var(--head-h, 0px); z-index: 15; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 14px -12px 6px; padding: 6px 12px; background: var(--bg); border-bottom: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
nav.secbar::-webkit-scrollbar { display: none; }
nav.secbar a { flex: none; padding: 4px 11px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .9em; font-weight: 600; white-space: nowrap; }
nav.secbar a:hover { color: var(--text); background: var(--surface-2); }
nav.secbar a.on { color: var(--on-accent); background: var(--accent); }
.has-secbar .role-tabs { display: none; }
main h2[id] { scroll-margin-top: calc(var(--head-h, 0px) + 56px); }
.thead-float { position: fixed; z-index: 14; overflow: hidden; display: none; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
.thead-float.on { display: block; }
.thead-float table { margin: 0; border-collapse: collapse; table-layout: fixed; }
/* New and coming soon on disc */
.chip.preorder { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78em; font-weight: 700;
  background: var(--accent); color: var(--on-accent); border: 0; white-space: nowrap; }
h3.cs-label { margin: 18px 0 8px; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cs-item { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cs-poster img { width: 64px; height: 96px; object-fit: cover; border-radius: 6px; background: var(--surface-2); display: block; }
.cs-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-title { font-weight: 700; }
.cs-meta { font-size: .88em; }
.cs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 4px; }
/* Six Degrees: actors we have no page for (no link, a blank face) */
ol.sd-chain li.sd-actor .sd-nolink { display: flex; align-items: center; gap: 10px; font-weight: bold; padding: 4px 12px 4px 4px;
  border-radius: 10px; background: var(--surface-2); color: var(--text); }
.sd-noface { flex: none; width: 44px; height: 66px; border-radius: 6px; background: var(--border)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 66'%3E%3Ccircle cx='22' cy='24' r='9' fill='%23888' fill-opacity='.45'/%3E%3Cpath d='M6 60c2-12 9-18 16-18s14 6 16 18z' fill='%23888' fill-opacity='.45'/%3E%3C/svg%3E") center / cover no-repeat; }
.sd-noface.small { width: 32px; height: 48px; border-radius: 4px; }
.continue-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin: 0 0 12px; }
.cont-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); text-decoration: none; }
.cont-item:hover { border-color: var(--accent); }
.cont-item > span:first-of-type { flex: 1; min-width: 0; line-height: 1.25; }
.cont-item svg { flex: none; border-radius: 7px; }
.cont-note { display: block; color: var(--muted); font-size: .86em; }
.cont-item.at-risk { border-left: 4px solid var(--accent); }
.cont-item.at-risk .cont-note { color: var(--accent-text); font-weight: 600; }
.cont-go { flex: none; color: var(--link); font-weight: 700; font-size: .9em; white-space: nowrap; }
a.cont-item:visited { color: var(--text); }
@media (min-width: 1500px) {
  header.site .wrap, main.wrap, footer.site .wrap { max-width: 1440px; }
  main.wrap > p, main.wrap .lede, main.wrap > ul:not([class]) { max-width: 82ch; }
}

/* Privacy, Terms, About, Your data (app/legal.py) */
article.legal { max-width: 46rem; }
article.legal h2 { margin-top: 1.6em; }
article.legal .lede { font-size: 1.12em; }
ul.promises { list-style: none; padding: 0; display: grid; gap: 8px; }
ul.promises li { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; }
table.legal-table td { vertical-align: top; white-space: normal; }
.terms-banner { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.terms-banner .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
.terms-banner p { margin: 0; flex: 1 1 22rem; }
.terms-banner button, .delete-form button, .inline-form button { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 6px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.delete-form, .inline-form { display: grid; gap: 10px; max-width: 26rem; }
.delete-form input, .inline-form input { display: block; width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; box-sizing: border-box; }
.delete-form button.danger { background: #b3261e; color: #fff; }
label.agree { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; font-weight: normal; }
label.agree input { margin-top: 3px; flex: none; }
.foot-promise { font-weight: 600; }

@media (max-width: 640px) { nav.secbar { top: 0; } main h2[id] { scroll-margin-top: 56px; } }   /* the phone header scrolls away; bars pin to the very top */

/* ---- App shell (Jay, 2026-10-20: "app style redesigns of all games ... look and act more like a mobile app";
   the iOS app comes next). A screen title bar, section headings, and on phones a blurred sticky bar and a bottom tab bar. */
.app-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.app-bar > div { flex: 1; min-width: 0; }
.app-bar h1 { margin: 0; font-size: 1.75em; letter-spacing: -.02em; line-height: 1.1; }
.app-sub { margin: 3px 0 0; color: var(--muted); font-size: .92em; }
.app-back, .app-back:visited { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none;
  font-size: 1.9em; line-height: 1; padding-bottom: 3px; box-sizing: border-box; background: var(--surface-2); color: var(--text); }
.app-h { display: flex; align-items: center; gap: 8px; font-size: 1.15em; margin: 24px 0 10px; }
.app-h::after { display: none; }
.app-h span { font-size: .75em; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.app-tabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.app-tabs a, .app-tabs a:visited { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--border); text-decoration: none; color: var(--text); font-weight: 600; font-size: .92em; }
.app-tabs a.on, .app-tabs a.on:visited { background: var(--accent); color: var(--on-accent); border-color: transparent; }
@media (max-width: 640px) {
  .app-screen .app-bar { position: sticky; top: 0; z-index: 20; margin: 0 -16px 10px; padding: 10px 16px;
    background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
  .app-screen .app-bar h1 { font-size: 1.3em; }
  .app-screen .app-sub { font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--border); }
  .app-tabs a, .app-tabs a:visited { border: 0; border-radius: 10px; padding: 8px 2px; text-align: center; font-size: .8em; color: var(--muted); }
  .app-tabs a.on, .app-tabs a.on:visited { background: transparent; color: var(--text); }
  .app-tabs a.on::before { content: ""; display: block; width: 22px; height: 3px; border-radius: 3px; margin: 0 auto 5px; background: var(--accent); }
  body:has(.app-tabs) { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ---- Mount Rushmore, as a game */
.rm-progress { flex: none; padding: 6px 12px; border-radius: 99px; font-weight: 700; color: var(--on-accent);
  background: linear-gradient(135deg, #fff1b8, #e0b40f 55%, #b8900d); font-variant-numeric: tabular-nums; }
.rm-progress b { font-size: 1.15em; }
.rm-shelf { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
.rm-shelf::-webkit-scrollbar { display: none; }
.rm-mini, .rm-mini:visited { flex: none; width: 150px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 16px;
  background: linear-gradient(180deg, #8d8a84, #5b5852); color: #fff; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.rm-mini-faces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-bottom: 4px; }
.rm-mini-faces img, .rm-mini-empty { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; border-radius: 8px; filter: grayscale(.35) contrast(1.05); }
.rm-mini-empty { display: grid; place-items: center; background: rgba(255, 255, 255, .15); border: 1px dashed rgba(255, 255, 255, .45); font-weight: 800; box-sizing: border-box; }
.rm-mini b { font-size: .92em; line-height: 1.15; } .rm-mini i { font-style: normal; font-size: .75em; opacity: .8; }
.rm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.rm-tile, .rm-tile:visited { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 18px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.rm-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.rm-tile:active { transform: scale(.98); }
.rm-tile.done { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow); }
.rm-glyph { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 1.6em;
  background: linear-gradient(180deg, #d9d6cf, #a9a49a); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.rm-tile b { font-size: 1.05em; line-height: 1.15; }
.rm-dots { display: flex; gap: 4px; } .rm-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); }
.rm-dots span.on { background: var(--accent); border-color: var(--accent); }
.rm-tile-faces { display: flex; } .rm-tile-faces img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 25%;
  border: 2px solid var(--surface); margin-right: -8px; background: var(--surface-2); }
.rm-tile i { font-style: normal; font-size: .8em; color: var(--muted); }
.rm-cta { margin-top: auto; align-self: flex-start; padding: 5px 12px; border-radius: 99px; font-size: .82em; font-weight: 700; background: var(--accent); color: var(--on-accent); }
.rm-tile.done .rm-cta { background: var(--surface-2); color: var(--text); }
.rm-new { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); max-width: 560px; }
.rm-new input[type=text] { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; }
.rm-seg { display: flex; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.rm-seg label { flex: 1; } .rm-seg input { position: absolute; opacity: 0; pointer-events: none; }
.rm-seg span { display: block; text-align: center; padding: 8px; border-radius: 9px; font-weight: 700; cursor: pointer; color: var(--muted); }
.rm-seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.rm-seg input:focus-visible + span { outline: 2px solid var(--accent); }
.rm-new button { padding: 12px; border: 0; border-radius: 12px; font: inherit; font-weight: 800; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.rm-customs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.rm-customs a, .rm-customs a:visited { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.rm-customs i { font-style: normal; font-size: .8em; color: var(--muted); }

/* the mountain: granite under a sky, faces carved into it */
.rm-app .rm-mountain { position: relative; overflow: hidden; border-radius: 22px; padding: 16px 14px 18px;
  background: linear-gradient(180deg, #7fa7c9 0%, #b9cfe0 18%, #c9c4ba 19%, #a8a296 60%, #8a847a 100%); box-shadow: inset 0 -10px 30px rgba(0, 0, 0, .18), var(--shadow); }
.rm-app .rm-carved { color: #2d2a25; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 1.1em; }
.rm-app ol.rm-faces img { filter: grayscale(.55) sepia(.18) contrast(1.08); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.rm-app ol.rm-faces .rm-name a, .rm-app ol.rm-faces .rm-name a:visited { color: #1f1c18; }
.rm-app ol.rm-faces .rm-edit a, .rm-app ol.rm-faces .rm-edit a:visited, .rm-app ol.rm-faces .rm-edit button { color: #3b352d; font-weight: 700; }
.rm-app ol.rm-faces .rm-add, .rm-app ol.rm-faces .rm-add:visited { color: #3b352d; background: rgba(255, 255, 255, .28); border: 2px dashed rgba(59, 53, 45, .45); border-radius: 14px; text-decoration: none; transition: transform .12s ease; }
.rm-app ol.rm-faces .rm-add:active { transform: scale(.96); }
.rm-next { text-align: center; color: var(--muted); margin: 12px 0; }
.rm-done { text-align: center; margin: 14px 0; }
.rm-done-h { font-size: 1.3em; font-weight: 800; margin: 0; }
.rm-done pre.share { display: none; }
.rm-done .share-btn { margin-top: 8px; padding: 11px 26px; border: 0; border-radius: 12px; font: inherit; font-weight: 800; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.rm-search { display: flex; gap: 8px; margin: 8px 0; } .rm-search input[type=search] { flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; }
.rm-search button { padding: 0 16px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; background: var(--accent); color: var(--on-accent); }
ul.rm-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
ul.rm-results li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
ul.rm-results button { padding: 7px 12px; border: 0; border-radius: 10px; font: inherit; font-weight: 700; background: var(--accent); color: var(--on-accent); white-space: nowrap; }
ol.rm-board { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
ol.rm-board li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.rm-rank { flex: none; width: 26px; text-align: center; font-weight: 800; color: var(--muted); }
ol.rm-board li:nth-child(-n+4) .rm-rank { color: var(--accent-text); }
ol.rm-board img { flex: none; width: 38px; height: 50px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.rm-board-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rm-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.rm-bar span { display: block; height: 100%; background: var(--accent); }
.rm-votes { flex: none; font-size: 1.1em; }
@media (max-width: 640px) {
  .rm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rm-tile { padding: 12px; border-radius: 16px; }
  .rm-app ol.rm-faces.rm-big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .rm-app ol.rm-faces.rm-big .rm-name { font-size: .95em; }
  .rm-app ol.rm-faces.rm-big .rm-edit { font-size: .9em; gap: 0 14px; }
  .rm-app ol.rm-faces.rm-big .rm-add b { font-size: 2.6em; }
  dialog.rm-dialog { width: calc(100vw - 16px); border-radius: 18px; }
}

/* the signed-out teaser (app/teaser.py): sign in, the waiting list, today's free Timeline, the infographic */
.ld-wait { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.ld-wait h2 { margin: 0 0 6px; font-size: 1.15em; }
.ld-wait h2::after { display: none; }
label.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ld-game { max-width: 560px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.ld-game .tl-list { margin: 10px 0; }
.ld-more { margin: 12px 0 0; font-weight: 600; }
.lb-hero { padding: 22px; border-radius: 22px; margin: 6px 0 8px; color: #f6eee6; background: radial-gradient(120% 90% at 20% 0%, #74172a 0%, #3d0b15 60%, #1c0609 100%); box-shadow: var(--shadow); }
.lb-hero h1 { color: #fff; margin: 4px 0 8px; font-size: 1.7em; line-height: 1.15; }
.lb-hero .ld-eyebrow { color: #f2d47a; }
.lb-lede { margin: 0 0 14px; color: #ecd8cc; max-width: 44rem; }
.lb-line { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(242, 212, 122, .35); }
.lb-line b { font: 900 2.2em/1 Georgia, serif; color: #f2d47a; }
.lb-line span { color: #ecd8cc; }
.lb-foot { margin-top: 24px; }
.ld-beta { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }

/* anything a page jumps to (#play after a guess, #result, #pick ...) stops below the pinned header, not under it
   (Jay, 2026-10-20: Double Take hid the result of each guess behind the header). h2[id] keeps its own, larger margin. */
main [id] { scroll-margin-top: calc(var(--head-h, 100px) + 12px); }   /* 100px: the desktop header, until pagetools.js measures it */
@media (max-width: 640px) { main [id] { scroll-margin-top: 12px; } }   /* the phone header scrolls away */
html.gf-busy main { opacity: .7; transition: opacity .15s .1s; pointer-events: none; }   /* a move in flight (gameflow.js) */

/* the film picker (static/filmpick.js): one big box, already focused, films filtering as you type */
dialog.fp { width: min(640px, calc(100vw - 24px)); max-height: min(78vh, 720px); margin: 12vh auto auto; padding: 0; border: 0; border-radius: 22px;
  background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; }
dialog.fp[open] { display: flex; flex-direction: column; animation: fp-in .18s cubic-bezier(.2, .9, .3, 1.2); }
dialog.fp::backdrop { background: rgba(10, 6, 7, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes fp-in { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.fp-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; }
.fp-title { flex: 1; margin: 0; font-weight: 800; font-size: 1.05em; color: var(--accent-text); }
.fp-close { border: 0; background: var(--surface-2); color: var(--text); width: 36px; height: 36px; border-radius: 50%; font-size: 1.4em; line-height: 1; cursor: pointer; }
input.fp-q { margin: 12px 18px 4px; padding: 16px 18px; font: inherit; font-size: 1.45em; font-weight: 600; border-radius: 16px;
  border: 2px solid var(--accent); background: var(--surface-2); color: var(--text); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
input.fp-q::placeholder { color: var(--muted); font-weight: 500; }
.fp-hint { margin: 6px 20px 8px; color: var(--muted); font-size: .9em; min-height: 1.2em; }
ul.fp-list { list-style: none; margin: 0; padding: 4px 10px 14px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
ul.fp-list li { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 14px; cursor: pointer; }
ul.fp-list li.on { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
ul.fp-list li:hover { background: var(--surface-2); }
ul.fp-list li.off { opacity: .45; cursor: not-allowed; }
ul.fp-list img, .fp-noimg { width: 46px; height: 69px; object-fit: cover; border-radius: 8px; flex: none; background: var(--surface-2); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
ul.fp-list img.fp-face { width: 56px; height: 56px; border-radius: 50%; object-position: 50% 20%; }
ul.fp-list b { font-size: 1.08em; } ul.fp-list i { font-style: normal; color: var(--muted); }
ul.fp-list small { display: block; color: var(--muted); font-size: .82em; margin-top: 2px; }
dialog.fp.fp-sent { opacity: .7; pointer-events: none; }
@media (max-width: 640px) {
  dialog.fp { width: calc(100vw - 12px); margin: 8px auto auto; max-height: 60vh; max-height: 60svh; border-radius: 18px; }
  input.fp-q { font-size: 1.2em; padding: 13px 14px; margin: 10px 12px 4px; }
}
/* Frames: an empty square is one big target */
table.grid-board td.cell a.pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%;
  min-height: 90px; border-radius: 12px; text-decoration: none; font-weight: 700; color: var(--muted); transition: background .12s, color .12s, transform .12s; }
table.grid-board td.cell a.pick:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
table.grid-board td.cell a.pick:active { transform: scale(.97); }
.pick-plus { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1.7em; line-height: 1;
  background: var(--surface-2); color: var(--accent-text); border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); }
table.grid-board td.cell a.pick:hover .pick-plus { background: var(--accent); color: var(--on-accent); border-style: solid; }

/* ---- Games as an app (Jay, 2026-10-20: "look like a real application on desktop, to move away from the text-heavy
   look ... very welcoming and user-friendly ... The desktop should look like a polished sort of tablet game
   experience"). Desktop: the game is a raised screen on a soft stage, a dock of games on top, a rail of cards beside.
   Phones: the board goes edge to edge. Shared by every game page (base.html game-layout). */
body.game, body:has(main.game-layout) { background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--head) 22%, var(--bg)), var(--bg) 70%) fixed, var(--bg); }

/* the dock of games */
nav.game-switch { display: flex; gap: 4px; padding: 6px; margin: 0 0 18px; border-radius: 20px; background: var(--surface-2);
  border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
nav.game-switch::-webkit-scrollbar { display: none; }
nav.game-switch a, nav.game-switch a:visited { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 6px 6px;
  border-radius: 14px; text-decoration: none; color: var(--muted); font-size: .72em; font-weight: 700; min-width: 58px; transition: background .12s, transform .12s; }
nav.game-switch a:hover { background: var(--surface); color: var(--text); transform: translateY(-1px); }
nav.game-switch a.on, nav.game-switch a.on:visited { background: var(--surface); color: var(--text); box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
nav.game-switch svg { border-radius: 10px; }

/* the title and the one-line lede */
.game-main h1.game-title, .game-main > .dt > h1.game-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 6px;
  font-size: 2.1em; letter-spacing: -.025em; line-height: 1.05; }
.game-main h1.game-title .muted { font-size: .42em; font-weight: 700; letter-spacing: .02em; color: var(--muted); padding: 5px 12px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--border); }
.game-main .mg-lede, .game-main h1.game-title + p { font-size: 1.04em; color: var(--muted); max-width: 62ch; margin: 0 0 20px; line-height: 1.5; }

/* controls: big, round, obvious */
.game-main input[type=search], .game-main input[type=text]:not(.fp-q) { min-height: 48px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--border);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; box-sizing: border-box; }
.game-main input[type=search]:focus, .game-main input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.game-main button.arc-pick, .game-main form.arc-guess button, .game-main .tl-form button[type=submit], .game-main .mg-controls button {
  min-height: 46px; padding: 0 22px; border-radius: 14px; font-weight: 800; letter-spacing: .01em; transition: transform .1s, box-shadow .12s; }
.game-main button:active { transform: scale(.97); }

/* results: a celebration card, not a line of text */
.game-main section.arc-result { border-radius: 22px; padding: 18px 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.game-main .arc-result-head { font-size: 1.5em; font-weight: 900; letter-spacing: -.01em; }
.game-main .cr-banner, .game-main p.notice { border-radius: 14px; padding: 12px 16px; font-weight: 600; }

/* the rail */
.game-side .gs-card { border-radius: 20px; padding: 16px 18px; box-shadow: var(--shadow); }
.gs-title { font-size: 1.2em; } .gs-title svg { width: 36px; height: 36px; }
.gs-stats b { font-size: 2em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
a.gs-next-btn { padding: 13px 14px; border-radius: 14px; font-size: 1.05em; }
.gs-rules summary { color: var(--text); }

@media (min-width: 1000px) {
  main.game-layout { max-width: 1340px; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; padding-top: 22px; }
  main.game-layout > .game-main { background: var(--surface); border: 1px solid var(--border); border-radius: 30px; padding: 22px 32px 32px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 60px rgba(0, 0, 0, .28); min-height: 70vh; }
  main.game-layout > .game-main nav.game-switch { margin: -6px -14px 22px; }
  .game-side { top: 110px; margin-top: 0; }
}
@media (max-width: 640px) {
  nav.game-switch { margin: 0 -16px 12px; border-radius: 0; border-left: 0; border-right: 0; padding: 6px 10px; }
  nav.game-switch a { min-width: 54px; flex: none; }
  .game-main h1.game-title { font-size: 1.55em; }
  .game-main h1.game-title .muted { font-size: .5em; }
  .game-main .mg-lede, .game-main h1.game-title + p { font-size: .95em; margin-bottom: 14px; }
  .game-side .gs-card { border-radius: 16px; }
}

/* boards on the desktop "tablet": centred, and sized to the screen they now have */
@media (min-width: 1000px) {
  .game-main .mg { max-width: 780px; margin-left: auto; margin-right: auto; }
  .game-main .mg-board { gap: 10px; }
  .game-main .mg-tile span { font-size: 1.08em; border-radius: 16px; }
  .game-main .mg-group { max-width: none; border-radius: 16px; }
  .game-main table.grid-board { margin: 0 auto; }
  .game-main table.grid-board td.cell { height: 170px; width: 170px; border-radius: 16px; }
  .game-main .dt-round { max-width: 820px; margin: 0 auto; }
  .game-main form.dt-options { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 24px; }
  .game-main form.dt-options.dt-n3, .game-main form.dt-options.dt-n4 { grid-template-columns: repeat(4, minmax(0, 200px)); }
  .game-main button.dt-option { border-radius: 20px; padding: 10px; font-size: 1.1em; }
  .game-main button.dt-option:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
  .game-main ol.dt-progress { justify-content: center; }
  .game-main ol.cr-cast { max-width: 900px; margin-left: auto; margin-right: auto; gap: 14px; }
  .game-main ol.cr-cast img, .game-main .cr-q { border-radius: 14px; }
  .game-main ol.tl-list, .game-main ol.hl-run { max-width: 760px; margin-left: auto; margin-right: auto; gap: 10px; }
  .game-main ol.tl-list li { padding: 10px 16px; border-radius: 16px; font-size: 1.12em; gap: 16px; }
  .game-main ol.tl-list img, .game-main ol.hl-run img { width: 56px; height: 84px; border-radius: 8px; }
  .game-main .tl-form { max-width: 760px; margin: 0 auto; }
  .game-main .hl-card { width: 300px; border-radius: 22px; padding: 14px; } .game-main .hl-card img { width: 240px; height: 360px; border-radius: 14px; }
  .game-main .sd-cast { max-width: 760px; }
  .game-main .lu-board { max-width: 1000px; margin-left: auto; margin-right: auto; }
  .game-main ol.lu-films li, .game-main ol.lu-answers li { height: 92px; border-radius: 16px; }
  .game-main ol.au-clues li, .game-main ol.arc-clues li { border-radius: 16px; }
}

/* a row of status chips under a game title: guesses left, solved, score */
.game-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.game-chips span { padding: 7px 14px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: .92em; }
.game-chips b { color: var(--text); font-size: 1.1em; margin-right: 2px; font-variant-numeric: tabular-nums; }
table.grid-board th.row { vertical-align: middle; }
table.grid-board th { vertical-align: middle; }
table.grid-board td.cell { vertical-align: middle; }
table.grid-board td.cell a.pick { height: auto; min-height: 104px; }
.hl-pair { justify-content: center; }
@media (min-width: 1000px) { .game-main .hl-pair { gap: 28px; } .game-main table.grid-board td.cell > .muted.small { margin-top: 2px; } }

/* the twelve games always in even rows (Jay, 2026-10-20: "two rows of six"): only column counts that divide 12 */
@media (min-width: 1100px) { .game-tiles.games-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1099px) { .game-tiles.games-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.game-cards { max-width: none; }
@media (min-width: 1200px) { .game-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1199px) { .game-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 899px) { .game-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .game-cards { grid-template-columns: 1fr; } }

/* ---- Person pages, as an app profile (Jay, 2026-10-20: "the bio page is need an aesthetic overhaul ... The headshot is
   a little small ... give it a redesign"): a hero, fact cards, a readable bio, compact tables on phones. */
section.ph { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; margin: 8px 0 22px; padding: 26px;
  border-radius: 28px; background: radial-gradient(900px 400px at 0% 0%, color-mix(in srgb, var(--head) 30%, var(--surface)), var(--surface) 70%);
  border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0, 0, 0, .22); }
.ph-photo img { display: block; width: 260px; height: 390px; object-fit: cover; object-position: 50% 22%; border-radius: 20px; background: var(--surface-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 34px rgba(0, 0, 0, .45); }
.ph-photo .photo-credit { margin: 8px 2px 0; font-size: .75em; color: var(--muted); }
.ph-body { min-width: 0; }
.ph-eyebrow { margin: 4px 0 6px; font-size: .78em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.ph-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ph-title h1 { margin: 0; font-size: 3em; line-height: 1; letter-spacing: -.03em; }
.ph-title form, .ph-title .pin { margin: 0; }
.ph-born { margin: 10px 0 14px; font-size: 1.08em; color: var(--muted); }
.ph-roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.ph-roles a, .ph-roles a:visited { padding: 7px 14px; border-radius: 99px; text-decoration: none; color: var(--text); font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); transition: border-color .12s, transform .12s; }
.ph-roles a:hover { border-color: var(--accent); transform: translateY(-1px); }
.ph-roles b { color: var(--accent-text); margin-right: 2px; }
.ph-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 16px; }
.ph-tiles .st { padding: 14px 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.ph-tiles .st-label { font-size: .74em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ph-tiles .st-num, .ph-tiles .st-num:visited { font-size: 2em; font-weight: 900; line-height: 1.1; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.ph-tiles a.st-num:hover { color: var(--accent-text); }
.ph-tiles .st-sub { font-size: .82em; color: var(--muted); }
.ph-egot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.ph-egot-k, .ph-egot-k:visited { font-weight: 900; letter-spacing: .08em; color: var(--accent-text); text-decoration: none; margin-right: 4px; }
.ph-egot details { flex-basis: 100%; }
.ph-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 0 0 22px; }
.ph-card { padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.ph-card h3 { margin: 0 0 10px; font-size: .78em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
ul.ph-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.ph-list li { display: flex; flex-direction: column; line-height: 1.3; }
ul.ph-list li > a, ul.ph-list li > b { font-weight: 700; font-size: 1.04em; }
ul.ph-list li > span { color: var(--muted); font-size: .88em; }
.ph-more { display: inline-block; margin-top: 10px; font-weight: 700; }
.ph-big { margin: 0; font-size: 1.15em; font-weight: 700; }
.ph-bio { padding: 22px 26px; margin: 0 0 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); max-width: none; }
.ph-bio .ph-bio-h { margin: 0 0 10px; font-size: 1.25em; }
.ph-bio .ph-bio-h::after { display: none; }
.ph-bio p { font-size: 1.08em; line-height: 1.65; max-width: 72ch; margin: 0 0 12px; }
.ph-bio details summary { font-weight: 700; color: var(--link); cursor: pointer; margin: 4px 0 10px; }
.ph-bio .ph-src { font-size: .8em; color: var(--muted); margin: 6px 0 0; }
.filmo-sub { display: none; }
/* Film pages use the same hero (Jay, 2026-10-20: "emulate it on the movie view making the poster the size of the headshot") */
section.ph.fh .ph-photo img { object-position: 50% 50%; }
.fh-noposter { display: grid; place-items: center; width: 260px; height: 390px; padding: 20px; border-radius: 20px; text-align: center;
  background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); font-size: 1.4em; font-weight: 900; color: var(--muted); }
.ph-eyebrow a, .ph-eyebrow a:visited { color: inherit; text-decoration: none; }
.ph-eyebrow a:hover { text-decoration: underline; }
.ph-title.fh-long h1 { font-size: 2.3em; }
section.fh .fh-cert { margin-left: 6px; }
section.fh dl.fh-people { margin: 0 0 18px; }
section.fh .ph-tiles .st { position: relative; }
section.fh dl.fh-grid { margin: 0 0 14px; }
@media (max-width: 900px) {
  .fh-noposter { width: 180px; height: 270px; }
  .ph-title.fh-long h1 { font-size: 1.9em; }
  section.ph { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 18px; }
  .ph-photo img { width: 180px; height: 270px; }
  .ph-title h1 { font-size: 2.3em; }
}
@media (max-width: 640px) {
  section.ph { display: block; padding: 0 0 16px; margin: 0 -16px 18px; border-radius: 0 0 26px 26px; border-left: 0; border-right: 0; border-top: 0; text-align: center; }
  .ph-photo { padding: 18px 16px 0; }
  .ph-photo img { width: 64vw; max-width: 260px; height: auto; aspect-ratio: 2 / 3; margin: 0 auto; }
  .ph-body { padding: 0 16px; }
  .ph-eyebrow { margin-top: 14px; }
  .ph-title { justify-content: center; } .ph-title h1 { font-size: 2.1em; }
  .ph-roles { justify-content: center; }
  .ph-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
  .ph-tiles .st-num { font-size: 1.6em; }
  .ph-egot { justify-content: center; }
  .fh-noposter { width: 64vw; max-width: 260px; height: auto; aspect-ratio: 2 / 3; margin: 0 auto; }
  section.fh dl.fh-people, section.fh dl.fh-grid, section.fh .fh-themes { text-align: left; }
  .ph-title.fh-long h1 { font-size: 1.7em; }
  .ph-cards { grid-template-columns: 1fr; }
  .ph-bio { padding: 16px 18px; }
  .ph-bio p { font-size: 1.02em; }
  /* filmographies: year, title (with the part underneath), rating and box office */
  table.filmo td:nth-child(n+3):nth-last-child(n+8), table.filmo th:nth-child(n+3):nth-last-child(n+8),
  table.filmo td:nth-last-child(-n+3), table.filmo th:nth-last-child(-n+3),
  table.filmo td:nth-last-child(5), table.filmo th:nth-last-child(5), table.filmo td:nth-last-child(6), table.filmo th:nth-last-child(6) { display: none; }
  table.filmo { min-width: 0; width: 100%; }
  table.filmo td.left { white-space: normal; }
  .filmo-sub { display: block; font-size: .82em; color: var(--muted); margin-top: 2px; }
}
@media (max-width: 640px) { .ph-tiles .st:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* invite friends (app/member_invites.py) */
.inv-new { padding: 18px 20px; border-radius: 20px; margin: 0 0 16px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid var(--accent); }
.inv-new-h { margin: 0 0 8px; font-weight: 800; font-size: 1.1em; }
pre.inv-link { display: block; white-space: pre-wrap; word-break: break-all; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: .95em; margin: 0 0 10px; user-select: all; }
.inv-new .share-btn, .inv-make button { padding: 12px 22px; border: 0; border-radius: 14px; font: inherit; font-weight: 800; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.inv-make { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; }
ul.inv-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
ul.inv-list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.inv-what { flex: 1; } .inv-list form { margin: 0; }
.inv-st { flex: none; padding: 3px 10px; border-radius: 99px; font-size: .78em; font-weight: 800; background: var(--surface-2); color: var(--muted); }
.inv-st.used { background: #2a9d5c; color: #fff; } .inv-st.open { background: var(--accent); color: var(--on-accent); }
a.jackpot-home, a.jackpot-home:visited { display: block; margin: 0 0 14px; padding: 14px 18px; border-radius: 16px; text-decoration: none; color: #1d1600; background: linear-gradient(135deg, #fff1b8, #e0b40f 55%, #b8900d); box-shadow: 0 8px 26px rgba(224, 180, 15, .35); font-size: 1.05em; }
a.jackpot-home > b:first-child { font: 900 1.2em Georgia, serif; margin-right: 6px; }

/* Montage: the years and links in a solved group take the ticket's own ink, not the page's grey (Jay, 2026-10-20: "hard to read") */
.mg-group .muted { color: inherit; opacity: .72; font-weight: 600; }
.mg-group a, .mg-group a:visited { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }

/* the Movie Rabbit Hole logo: a taller mark than the old wordmark, so it gets a little more height */
.logo img { height: 48px; } @media (max-width: 640px) { .logo img { height: 34px; } } @media (max-width: 370px) { .logo img { height: 28px; } }

/* ---- Home: Today's games and Picks, redesigned (Jay, 2026-10-20: "this section and the picks below it need a visual
   upgrade ... it has to look professionally designed"). Each game has its own colour (--g): a wash behind the tile,
   a glow under the icon, and its Play button. Done games get a check and calm down. */
.game-frames { --g: #e0b40f; } .game-montage { --g: #8e63ce; } .game-arc { --g: #d64545; } .game-thatguy { --g: #1f9e8c; }
.game-doubletake { --g: #f07a42; } .game-creditsroll { --g: #5464d6; } .game-sixdegrees { --g: #3d9b45; } .game-higherlower { --g: #d93a7c; }
.game-timeline { --g: #2a8fd6; } .game-auteur { --g: #a87452; } .game-whodirected { --g: #2a9d8f; } .game-lineup { --g: #20a090; }
.game-bestever { --g: #6f7fe0; } .game-rushmore { --g: #a49d90; }
.gb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gb-head h2 { margin: 0; }
.gb-progress { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: .92em; }
.gb-progress b { color: var(--text); font-size: 1.15em; }
.gb-bar { display: inline-block; width: 120px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.gb-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #fff1b8); }

html body section.games-box a.game-tile[href] { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 18px 12px 14px; border-radius: 22px; text-decoration: none; color: var(--text); overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--g, var(--accent)) 26%, var(--surface)) 0%, var(--surface) 70%);
  border: 1px solid color-mix(in srgb, var(--g, var(--accent)) 30%, var(--border)); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
html body section.games-box a.game-tile[href]:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--g) 70%, transparent);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--g) 25%, rgba(0, 0, 0, .25)); }
html body section.games-box a.game-tile[href]:active { transform: scale(.98); }
.games-box .gt-icon { position: relative; display: grid; place-items: center; margin-bottom: 2px; }
.games-box .gt-icon svg { width: 56px; height: 56px; border-radius: 16px; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--g) 55%, transparent)); }
.gt-check { position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #2a9d5c; color: #fff; font-size: .8em; font-weight: 900; box-shadow: 0 0 0 3px var(--surface); }
html body section.games-box a.game-tile[href] .gt-name { font-size: 1.04em; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
html body section.games-box a.game-tile[href] .gt-status { min-height: 2.5em; font-size: .8em; line-height: 1.25; color: var(--muted); display: flex; align-items: center; }
html body section.games-box a.game-tile[href] .gt-button { margin-top: auto; align-self: stretch; padding: 8px 10px; border-radius: 12px; border: 0;
  font-weight: 800; font-size: .88em; background: var(--g, var(--accent)); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); box-shadow: none; }
html body section.games-box a.game-tile.going[href] .gt-button { background: var(--accent); color: var(--on-accent); text-shadow: none; }
html body section.games-box a.game-tile.done[href] { background: var(--surface); border-color: var(--border); }
html body section.games-box a.game-tile.done[href] .gt-icon svg { filter: saturate(.8); }
html body section.games-box a.game-tile.done[href] .gt-button { background: transparent; color: var(--muted); text-shadow: none; box-shadow: inset 0 0 0 1px var(--border); }

/* Picks: two wide cards */
.game-tiles.picks-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html body section.games-box .picks-tiles a.game-tile[href] { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon name btn" "icon status btn";
  align-items: center; text-align: left; gap: 2px 16px; padding: 18px 20px; }
.picks-tiles .gt-icon { grid-area: icon; } .picks-tiles .gt-icon svg { width: 64px; height: 64px; }
html body section.games-box .picks-tiles a.game-tile[href] .gt-name { grid-area: name; font-size: 1.2em; align-self: end; }
html body section.games-box .picks-tiles a.game-tile[href] .gt-status { grid-area: status; min-height: 0; align-self: start; font-size: .9em; }
html body section.games-box .picks-tiles a.game-tile[href] .gt-button { grid-area: btn; align-self: center; margin: 0; padding: 10px 18px; white-space: nowrap; }

@media (max-width: 640px) {
  .gb-bar { width: 70px; }
  html body section.games-box a.game-tile[href] { flex-direction: row; text-align: left; gap: 12px; padding: 10px 12px; border-radius: 16px; }
  .games-box .gt-icon svg { width: 42px; height: 42px; border-radius: 12px; }
  html body section.games-box a.game-tile[href] .gt-name { flex: 0 1 auto; }
  html body section.games-box a.game-tile[href] .gt-status { display: none; }
  html body section.games-box a.game-tile[href] .gt-button { margin: 0 0 0 auto; align-self: center; padding: 7px 12px; }
  .game-tiles.picks-tiles { grid-template-columns: 1fr; }
  html body section.games-box .picks-tiles a.game-tile[href] { padding: 12px 14px; gap: 0 12px; }
  html body section.games-box .picks-tiles a.game-tile[href] .gt-status { display: block; }
  .picks-tiles .gt-icon svg { width: 48px; height: 48px; }
}
@media (max-width: 640px) { html body section.games-box a.game-tile:not(.lead)[href] { display: none; } html body section.games-box input.games-all:checked ~ .game-tiles a.game-tile[href] { display: flex; } html body section.games-box .picks-tiles a.game-tile[href] { display: grid; } label.games-more { padding: 10px 0; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); margin-top: 8px; } }

.visit-chip, .visit-chip:visited { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 99px; vertical-align: 2px;
  font-size: .72em; font-weight: 800; letter-spacing: .02em; text-transform: none; text-decoration: none; background: var(--accent); color: var(--on-accent);
  animation: visit-pulse 2.4s ease-in-out infinite; }
@keyframes visit-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .visit-chip { animation: none; } }

/* ---- The credits celebration (app/creditpop.py; Jay, 2026-10-20: "earning credits should always feel good"). A velvet
   and gold panel in both themes: it springs up from the bottom, a coin spins, coins burst out, the numbers count up. */
.cpop { position: fixed; left: 50%; bottom: 22px; z-index: 80; width: min(380px, calc(100vw - 24px)); display: grid; grid-template-columns: 64px 1fr; gap: 14px;
  padding: 18px 18px 14px; border-radius: 24px; color: #fff4e0; text-align: left;
  background: radial-gradient(120% 90% at 0% 0%, #5a1322 0%, #2a0a12 55%, #1a0b0e 100%);
  border: 1px solid rgba(240, 200, 90, .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 22px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(217, 174, 58, .25);
  transform: translate(-50%, 140%) scale(.9); opacity: 0; transition: transform .55s cubic-bezier(.2, 1.4, .4, 1), opacity .3s ease; }
.cpop.cpop-in { transform: translate(-50%, 0) scale(1); opacity: 1; }
.cpop.cpop-out { transform: translate(-50%, 30px) scale(.96); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.cpop-coin { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; align-self: start;
  background: radial-gradient(circle at 35% 30%, #fff3b8, #f0c85a 40%, #b5891f 75%, #7a5a10); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .35), 0 6px 18px rgba(217, 174, 58, .55);
  font-size: 28px; color: #6b4a06; animation: cpop-spin 1.2s ease-out .2s 1; }
@keyframes cpop-spin { 0% { transform: rotateY(0) scale(.6); } 60% { transform: rotateY(720deg) scale(1.12); } 100% { transform: rotateY(720deg) scale(1); } }
.cpop-burst { position: absolute; left: 50px; top: 50px; width: 0; height: 0; pointer-events: none; }
.cpop-burst i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b8, #f0c85a 45%, #a37a14); box-shadow: 0 0 6px rgba(240, 200, 90, .7);
  animation: cpop-fly 1.1s cubic-bezier(.15, .7, .3, 1) forwards; opacity: 0; }
@keyframes cpop-fly { 0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); } 70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) scale(1) rotate(var(--rot)); } }
.cpop-body { min-width: 0; }
.cpop-eyebrow { margin: 0; font-size: .72em; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #f0c85a; }
.cpop-total { margin: 0 0 6px; font-size: 2.3em; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff6d4, #f0c85a 60%, #c9961f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cpop-total small { font-size: .42em; letter-spacing: .02em; -webkit-text-fill-color: #f0c85a; }
ul.cpop-lines { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; font-size: .9em; }
ul.cpop-lines li { display: flex; justify-content: space-between; gap: 10px; opacity: 0; transform: translateX(-8px); animation: cpop-line .4s ease forwards; }
ul.cpop-lines li:nth-child(1) { animation-delay: .55s; } ul.cpop-lines li:nth-child(2) { animation-delay: .7s; } ul.cpop-lines li:nth-child(3) { animation-delay: .85s; }
ul.cpop-lines li:nth-child(4) { animation-delay: 1s; } ul.cpop-lines li:nth-child(5) { animation-delay: 1.15s; } ul.cpop-lines li:nth-child(6) { animation-delay: 1.3s; }
@keyframes cpop-line { to { opacity: 1; transform: none; } }
ul.cpop-lines b { color: #f0c85a; font-variant-numeric: tabular-nums; }
ul.cpop-lines i { font-style: normal; opacity: .7; } ul.cpop-lines em { font-style: normal; font-size: .82em; color: #d9b98a; opacity: .85; }
.cpop-bal { margin: 0 0 10px; font-size: .86em; color: #d9c7b0; } .cpop-bal b { color: #fff4e0; font-variant-numeric: tabular-nums; } .cpop-bal span { opacity: .75; }
.cpop-actions { display: flex; gap: 8px; margin: 0; }
.cpop .cpop-spend, .cpop .cpop-spend:visited { flex: 1; text-align: center; padding: 9px 12px; border-radius: 12px; font-weight: 800; text-decoration: none;
  background: linear-gradient(180deg, #f6d36b, #d9ae3a); color: #2a1a02; border: 0; }
.cpop .cpop-close { padding: 9px 16px; border-radius: 12px; font-weight: 800; background: rgba(255, 255, 255, .08); color: #fff4e0; border: 1px solid rgba(255, 255, 255, .16); cursor: pointer; }
.cpop-big { box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 22px 60px rgba(0, 0, 0, .55), 0 0 70px rgba(240, 200, 90, .45); }
.cpop-jackpot .cpop-coin { animation: cpop-spin 1.2s ease-out .2s 1, cpop-glow 1.6s ease-in-out 1.4s infinite; }
@keyframes cpop-glow { 50% { box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .35), 0 0 30px rgba(255, 220, 120, .95); } }
@media (max-width: 640px) { .cpop { bottom: calc(14px + env(safe-area-inset-bottom)); grid-template-columns: 52px 1fr; padding: 16px 14px 12px; }
  .cpop-coin { width: 52px; height: 52px; font-size: 22px; } .cpop-burst { left: 40px; top: 42px; } .cpop-total { font-size: 2em; }
  body:has(.app-tabs) .cpop, body:has(.cards-tabs) .cpop { bottom: calc(78px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .cpop, .cpop.cpop-in, .cpop.cpop-out { transition: opacity .3s; transform: translate(-50%, 0); }
  .cpop-coin, .cpop-jackpot .cpop-coin { animation: none; } ul.cpop-lines li { animation: none; opacity: 1; transform: none; } }

/* The header on phones (Jay, 2026-10-20: "The logo collides on mobile"): Feedback is an icon, and the logo takes only
   the room left beside it and the account circle, so they never touch. */
.feedback-btn .fb-ico { display: none; }
@media (max-width: 640px) {
  header.site a.feedback-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; }
  header.site a.feedback-btn .fb-txt { display: none; } header.site a.feedback-btn .fb-ico { display: block; }
  header.site .logo { display: block; max-width: calc(100vw - 150px); }
  header.site .logo img { width: 100%; max-width: 258px; height: auto; }
}

/* ---- Career Arc as an app screen (Jay, 2026-10-20: "movie arc needs an app redesign"; "all games on mobile have to fit
   without scrolling and be touch screen optimized"). Desktop: chart and clues side by side. Phones: one screen, the
   clues a swipeable stack, the guess bar pinned to the bottom, a miss a passing toast. */
.arc.arc2 { max-width: none; }
.arc2-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 14px; }
.arc2-head .game-title { margin: 0; }
ol.arc2-lives { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
ol.arc2-lives li { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .9em;
  background: var(--surface-2); border: 2px solid var(--border); color: #fff; transition: transform .2s; }
ol.arc2-lives li.next { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
ol.arc2-lives li.miss { background: #d93a4a; border-color: #d93a4a; }
ol.arc2-lives li.skip { background: #6b7a8f; border-color: #6b7a8f; }
ol.arc2-lives li.hit { background: #2f9e55; border-color: #2f9e55; transform: scale(1.12); }
.arc2-left { margin: 0; color: var(--muted); font-weight: 700; font-size: .92em; }

.arc2-board { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.arc2-screen { position: relative; margin: 0; padding: 14px 14px 8px; border-radius: 22px; max-width: none; }
.arc2-screen svg { display: block; width: 100%; height: auto; }
.arc2-screen .arc-chart-narrow { display: none; }
.arc2-key { margin: 4px 2px 2px; font-size: .78em; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.arc2-key .k-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; }
.arc2-key .k-bar { width: 6px; height: 12px; border-radius: 2px; background: #9aa3b5; display: inline-block; margin-left: 8px; }
.arc2-screen .arc-chart text.cap { display: none; }

.arc2-side { display: grid; gap: 12px; min-width: 0; }
ol.arc2-clues { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ol.arc2-clues li { padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
ol.arc2-clues li.now { border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 70%); }
ol.arc2-clues li.new { animation: arc2-in .45s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes arc2-in { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.arc2-clue-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.arc2-clue-head b { font-size: 1.02em; }
.arc2-clue-head .arc-clue-no { flex: none; }
.arc2-swipe { margin-left: auto; font-size: .78em; color: var(--muted); font-variant-numeric: tabular-nums; }
.arc2-clue { margin: 0; line-height: 1.45; }
.arc2-locked { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.arc2-locked span { padding: 5px 10px; border-radius: 99px; font-size: .8em; color: var(--muted); border: 1px dashed var(--border); white-space: nowrap; }
form.arc2-bar { display: flex; gap: 8px; margin: 0; }
form.arc2-bar input[type=search] { flex: 1; min-width: 0; height: 52px; padding: 0 16px; font-size: 1.05em; font-weight: 700; border-radius: 16px; cursor: pointer; }
form.arc2-bar button { height: 52px; padding: 0 18px; border-radius: 16px; font-weight: 800; }
html.js form.arc2-bar .arc2-search { display: none; }
.arc2-prev { margin: 14px 0 0; }

.arc2-toast { position: fixed; left: 50%; top: 76px; z-index: 70; margin: 0; padding: 10px 16px; border-radius: 99px; color: #fff; font-weight: 700;
  max-width: calc(100vw - 24px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); background: #c62f40;
  transform: translateX(-50%); animation: arc2-toast 3.6s ease forwards; pointer-events: none; }
.arc2-toast.skip { background: #556274; }
.arc2-toast b { margin-right: 4px; }
@keyframes arc2-toast { 0% { opacity: 0; transform: translate(-50%, -14px); } 8%, 82% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .arc2-toast, ol.arc2-clues li.new { animation: none; } }

@media (max-width: 1000px) {
  .arc2-board { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
  .arc2-head { margin: 0 0 8px; gap: 6px 10px; justify-content: space-between; }
  .arc2-head .game-title { font-size: 1.3em; }
  .arc2-left { display: none; }
  ol.arc2-lives { gap: 4px; } ol.arc2-lives li { width: 24px; height: 24px; font-size: .75em; }
  .arc2-screen { padding: 8px 6px 4px; border-radius: 18px; }
  .arc2-screen .arc-chart-wide { display: none; } .arc2-screen .arc-chart-narrow { display: block; }
  .arc2-key { display: none; }
  /* the clues: swipe sideways, newest first; each card keeps one height so the screen never moves */
  ol.arc2-clues { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 -16px; padding: 2px 16px 4px; scroll-padding: 0 16px; }
  ol.arc2-clues::-webkit-scrollbar { display: none; }
  ol.arc2-clues li { flex: 0 0 calc(100% - 28px); scroll-snap-align: start; height: 136px; overflow-y: auto; padding: 12px 14px; }
  ol.arc2-clues li:only-child { flex-basis: 100%; }
  .arc2-clue { font-size: .95em; }
  .arc2-locked { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .arc2-locked::-webkit-scrollbar { display: none; }
  /* the guess bar, pinned to the bottom with the thumb's reach in mind */
  form.arc2-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border); }
  body.game-fit { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .arc2-toast { top: 64px; font-size: .92em; }
  .arc-over .arc2-board { gap: 10px; }
}
@media (max-width: 640px) {
  /* one-screen games: the dock is a slim strip of icons, no labels; the active game scrolls into view (gamefit) */
  body.game-fit nav.game-switch { margin: 0 -16px 8px; padding: 4px 12px; border-radius: 0; border-left: 0; border-right: 0; gap: 2px; }
  body.game-fit nav.game-switch a { min-width: 44px; padding: 4px; font-size: 0; gap: 0; }
  body.game-fit nav.game-switch a > span:not(.gs-hub) { display: none; }
  body.game-fit nav.game-switch svg { width: 32px; height: 32px; }
  body.game-fit .game-main h1.game-title .muted { font-size: .5em; padding: 3px 9px; }
}

/* Career Arc on desktop: the chart full width and big, the clues and the guess bar underneath it */
.arc2-board { grid-template-columns: minmax(0, 1fr); }
.arc2-screen .arc-chart .val { font-size: 13px; font-weight: 600; }
.arc2-screen .arc-chart-narrow .val { font-size: 14px; }
@media (min-width: 1001px) {
  .arc2-side { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); align-items: start; column-gap: 16px; }
  .arc2-side > ol.arc2-clues { grid-column: 1; grid-row: 1 / span 3; }
  .arc2-side > .arc2-locked, .arc2-side > form.arc2-bar, .arc2-side > .arc-results, .arc2-side > p.muted { grid-column: 2; }
  .arc2-screen svg.arc-chart-wide { max-height: 420px; }
}
.arc.arc2 .chart-wrap { max-width: none; }
.arc2-screen svg.arc-chart-wide { max-height: 360px; }
@media (min-width: 1001px) { .arc2-side > form.arc2-bar { grid-row: 1; } .arc2-side > .arc2-locked { grid-row: 2; } .arc2-side > .arc-results, .arc2-side > p.muted { grid-row: 3; } }
@media (min-width: 1001px) { .arc2-side { grid-template-rows: auto auto 1fr; } }