@font-face {
  font-family: "Nandaka Western";
  src: url("fonts/nandaka-western.ttf") format("truetype");
  font-display: swap;
}
/* Zilla Slab (SIL Open Font License, see fonts/zilla-slab-OFL.txt), latin subset */
@font-face {
  font-family: "Zilla Slab";
  src: url("fonts/zilla-slab-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("fonts/zilla-slab-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("fonts/zilla-slab-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #efe2c4;
  --bg-edge: #dcc59a;
  --card: #f8efd9;
  --text: #2e1f12;
  --muted: #75604a;
  --border: #a9875a;
  --ink: #4a3220;
  --accent: #9c3b1c;
  --accent-text: #fbf3e0;
  --brass: #b8862b;
  --right: #4f7a2a;
  --wrong: #a32a1a;
  --right-bg: #e4e8c8;
  --wrong-bg: #f1d3c4;
  --display: "Nandaka Western", "Rockwell", Georgia, serif;
  --body: "Zilla Slab", "Rockwell", Georgia, serif;
  --sepia: sepia(0.9) contrast(1.1) brightness(0.95) saturate(0.8);
  /* chart bars take the opposite theme's page and text colors, so they stand off the parchment */
  --bar: #1a120c;
  --bar-text: #f2e4c8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a120c;
    --bg-edge: #0d0906;
    --card: #2a1d13;
    --text: #f2e4c8;
    --muted: #b39d7e;
    --border: #6b5038;
    --ink: #d9c3a0;
    --accent: #d2642f;
    --accent-text: #1a120c;
    --brass: #d9a441;
    --right: #8fbf5a;
    --wrong: #e0604a;
    --right-bg: #26301a;
    --wrong-bg: #3a1c14;
    --bar: #efe2c4;
    --bar-text: #2e1f12;
  }
}

* { box-sizing: border-box; }
/* The vignette fades to exactly this color at every edge, so wherever mobile Safari shifts the
   fixed layer while scrolling, and whatever solid color it tints its bars with, there's no seam. */
html {
  --page-edge: color-mix(in srgb, var(--bg-edge) 85%, var(--bg));
  background: var(--page-edge);
}
body {
  --col: 560px;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  /* draw edge to edge (viewport-fit=cover) but keep content clear of the notch and home bar */
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  --gap: 16px;
  gap: var(--gap);
  color: var(--text);
  font: 18px/1.45 var(--body);
  font-variant-numeric: lining-nums;
}
/* Sun-faded parchment across the whole window: lighter in the middle, scorched toward the edges.
   A fixed layer rather than background-attachment: fixed, which mobile Safari ignores; 100lvh
   keeps it covering the screen behind the browser toolbars as they show and hide. */
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  background: radial-gradient(ellipse farthest-side at 50% 50%, var(--bg) 25%, var(--page-edge) 100%);
  pointer-events: none;
}
.muted { color: var(--muted); }
a { color: inherit; }
/* content column; the background stays full-width */
body > * { width: 100%; max-width: var(--col); margin-inline: auto; }

/* Header */
.top { display: flex; flex-direction: column; align-items: center; gap: var(--gap); padding-top: 8px; }
h1 {
  margin: 0;
  font: 400 clamp(2.6rem, 13vw, 3.6rem)/1 var(--display);
  letter-spacing: 0.06em;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--bg-edge);
}
.badge {
  max-height: 2em;
  font: 0.85rem var(--display);
  letter-spacing: 0.12em;
  color: var(--muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2px 12px;
}

/* Header during play: title, chambers, score. The badge collapses and the score opens up. */
.tally { margin-block: calc(-1 * var(--gap)) 0; max-height: 0; opacity: 0; overflow: hidden; text-align: center; font: 1.1rem var(--display); letter-spacing: 0.1em; color: var(--ink); }

body.playing .top { gap: 0; }
body.playing .badge { max-height: 0; opacity: 0; padding-block: 0; border-width: 0; overflow: hidden; }
body.playing .tally { margin-top: 0; max-height: 2em; opacity: 1; }
body.animate .top, body.animate .badge, body.animate .tally {
  transition: gap 0.4s ease, max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease, border-width 0.4s ease, margin 0.4s ease;
}
@media (prefers-reduced-motion: reduce) { body.animate .top, body.animate .badge, body.animate .tally { transition: none; } }

/* Progress: six revolver chambers */
.progress { display: flex; justify-content: center; gap: 10px; list-style: none; margin-block: 0; padding: 0; }
.progress li {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: radial-gradient(circle at 50% 50%, var(--bg-edge) 30%, transparent 32%);
}
.progress li.current { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.progress li.right { border-color: var(--brass); background: radial-gradient(circle at 35% 35%, #f3d68a, var(--brass) 70%); }
.progress li.wrong { border-color: var(--wrong); background: var(--wrong-bg); position: relative; }
.progress li.wrong::after {
  content: "×";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--wrong);
  font: 700 16px/1 var(--body);
}

main { flex: 1; }
.round { margin: 0; text-align: center; font: 0.9rem var(--display); letter-spacing: 0.14em; color: var(--muted); }
.prompt { margin: 6px 0 18px; text-align: center; font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.prompt strong { color: var(--accent); }
.prompt.sliding { transition: transform 1s cubic-bezier(0.6, 0, 0.3, 1); }
/* While a question makes its entrance, only the prompt shows */
.round, .shotclock, .options { transition: opacity 0.2s ease; }
#app.entering .round, #app.entering .shotclock, #app.entering .options { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .prompt.sliding { transition: none; } }

.intro { text-align: center; padding-top: 12vh; }
.intro .muted { margin: 0 auto; max-width: 28em; }

/* Shot clock: a fuse that burns down over the question */
.shotclock { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; }
.shotclock .track { flex: 1; height: 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--card); overflow: hidden; }
.shotclock .bar { display: block; height: 100%; background: var(--brass); transform-origin: left; }
.shotclock .time { min-width: 1.5em; text-align: right; font: 1.1rem var(--display); letter-spacing: 0.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.shotclock[data-level="mid"] .bar { background: var(--accent); }
.shotclock[data-level="low"] .bar { background: var(--wrong); }
.shotclock[data-level="low"] .time { color: var(--wrong); }

/* Options: two wanted posters side by side */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 8px 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  /* double rule like a printed poster */
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--border), 3px 4px 0 rgba(0, 0, 0, 0.15);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
button.option:hover { transform: translateY(-2px) rotate(-0.4deg); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--border), 4px 7px 0 rgba(0, 0, 0, 0.18); }
button.option:nth-child(2):hover { transform: translateY(-2px) rotate(0.4deg); }
button.option:disabled { cursor: progress; opacity: 0.85; transform: none; }
.option .frame { position: relative; display: block; }
.option .frame img { display: block; } /* no inline gap under the photo */
.option .count {
  position: absolute;
  z-index: 1; /* above the filtered image layer */
  bottom: 6px;
  right: 6px;
  padding: 2px 8px;
  border: 2px solid var(--card);
  border-radius: 3px;
  background: var(--accent);
  color: var(--accent-text);
  font: 1.1rem var(--display);
  letter-spacing: 0.06em;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.option .pic {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--border);
  filter: var(--sepia);
}
.option .placeholder {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 8px, var(--bg-edge) 8px, var(--bg-edge) 9px);
  color: var(--accent);
  font: 3.5rem var(--display);
}
.option .name { font-weight: 700; line-height: 1.2; }
.option .value { font-size: 0.95rem; color: var(--ink); line-height: 1.3; }
.option .credit { font-size: 0.68rem; color: var(--muted); line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.option .credit:hover { text-decoration: underline; }
.option.revealed { cursor: default; }
/* after answering: the right answer develops into full color, the other fades to black and white */
.option.revealed .pic { filter: grayscale(1) contrast(1.05); animation: develop 0.6s ease; }
.option.revealed.right .pic { filter: none; }
@keyframes develop { from { filter: var(--sepia); } }
.option.right { border-color: var(--right); background: var(--right-bg); box-shadow: inset 0 0 0 3px var(--right-bg), inset 0 0 0 4px var(--right); }
.option.wrong { border-color: var(--wrong); background: var(--wrong-bg); box-shadow: inset 0 0 0 3px var(--wrong-bg), inset 0 0 0 4px var(--wrong); }
.option.picked::before {
  content: "Your pick";
  position: absolute;
  z-index: 1; /* filtered images form their own layer and would cover it */
  top: 16px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  padding: 3px 10px;
  border: 2px solid var(--card);
  background: var(--ink);
  color: var(--card);
  font: 0.8rem var(--display);
  letter-spacing: 0.12em;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}

.verdict { margin: 18px 0 4px; text-align: center; font-weight: 700; font-size: 1.1rem; }
.verdict .word { font: 1.5rem var(--display); letter-spacing: 0.06em; }
.verdict.right .word { color: var(--right); }
.verdict.wrong .word { color: var(--wrong); }
.verdict .pts { display: block; font: 1.2rem var(--display); letter-spacing: 0.06em; color: var(--brass); }
.verdict.wrong .pts { color: var(--muted); }
.verdict .muted { display: block; font-weight: 400; font-size: 0.95rem; }

.btn {
  margin-top: 16px;
  width: 100%;
  padding: 14px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--accent);
  color: var(--accent-text);
  font: 1.2rem var(--display);
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.2);
}
.btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); }

/* Summary */
.summary { text-align: center; }
.score { margin: 8px 0 0; font: clamp(3.5rem, 18vw, 5rem)/1 var(--display); color: var(--accent); }
.score .of { font: 700 0.5em var(--body); color: var(--muted); margin: 0 0.15em; }
.summary .quip { margin-top: calc(var(--gap) * -0.5); font: 1.3rem var(--display); letter-spacing: 0.04em; color: var(--ink); }
.next { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.next .clock { font: clamp(2.2rem, 11vw, 3rem)/1 var(--display); letter-spacing: 0.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.next .label { font: 0.85rem var(--display); letter-spacing: 0.14em; color: var(--muted); }
.caption { margin: 0 0 10px; font: 0.85rem var(--display); letter-spacing: 0.12em; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 24px 0 12px; text-align: center; }
.stats b { display: block; font: 700 1.7rem var(--body); color: var(--ink); }
.stats span { display: block; font-size: 0.8rem; line-height: 1.25; color: var(--muted); }
.dist { display: grid; gap: 4px; font-size: 0.9rem; text-align: left; }
.dist div { display: flex; align-items: center; gap: 8px; }
.dist div > span:first-child { flex: none; width: 2.2em; } /* fixed label column so every bar starts at the same x */
/* square at the baseline, 4px rounded at the data end */
.dist .bar { min-width: 22px; padding: 1px 6px; border-radius: 0 4px 4px 0; background: var(--bar); color: var(--bar-text); text-align: right; }
.dist .bar.today { background: var(--accent); color: var(--accent-text); }
/* Your scores: columns in buckets of 5, bucket labels rotated underneath */
.cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; } /* same spacing as .dist */
.cols .col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cols .track { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 120px; }
/* square at the baseline, 4px rounded at the data end; tall enough to hold its count even at 0 */
.cols .bar {
  width: 100%; /* fill the column; the grid gap separates neighbors */
  min-height: 1.5em;
  padding-top: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--bar);
  color: var(--bar-text);
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: center;
}
.cols .bar.today { background: var(--accent); color: var(--accent-text); }
.cols .bar.empty { background: none; color: var(--muted); box-shadow: inset 0 -1px var(--border); } /* no games here: a 0 on a hairline baseline */
.cols .label { position: relative; width: 100%; height: 3.6em; margin-top: 6px; font-size: 0.75rem; color: var(--muted); }
/* Turned to read bottom to top, ending at the bar */
.cols .label span { position: absolute; top: 0; left: 50%; transform-origin: 0 0; transform: rotate(-90deg) translate(-100%, -50%); white-space: nowrap; }
.toast { min-height: 1.4em; text-align: center; font-size: 0.9rem; color: var(--muted); white-space: pre-line; }
/* Results stack on the same rhythm as the header */
.summary { display: flex; flex-direction: column; gap: var(--gap); }
.summary > * { width: 100%; margin-block: 0; }
.summary .toast:empty { display: none; }

/* Today's scores: a density curve of every finisher's total, your score marked */
.daily .stats { grid-template-columns: repeat(4, 1fr); margin: 12px 0 0; }
.daily .muted { margin: 0; font-size: 0.95rem; }
.curve-wrap { position: relative; }
.curve { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.curve path, .curve line { vector-effect: non-scaling-stroke; }
.curve .area { fill: var(--ink); fill-opacity: 0.1; }
.curve .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.curve .axis { stroke: var(--border); stroke-width: 1; }
.curve .cross { stroke: var(--muted); stroke-width: 1; visibility: hidden; }
.curve .you { stroke: var(--accent); stroke-width: 2; }
.curve .you-label { fill: var(--text); font: 700 12px var(--body); }
.curve .tick { fill: var(--muted); font: 11px var(--body); font-variant-numeric: lining-nums; text-anchor: middle; } /* after the font shorthand, which resets it */
.curve-wrap .tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
  pointer-events: none;
}
.curve-wrap .tip b { color: var(--text); }

footer { text-align: center; font-size: 0.9rem; }
footer p { margin: 0 0 6px; }
footer .fine { font-size: 0.75rem; }
body.playing footer { display: none; }

/* Desktop: wider column, bigger posters and type */
@media (min-width: 768px) {
  body { --col: 880px; --gap: 24px; padding: 32px 24px; }
  h1 { font-size: 5rem; }
  .badge { font-size: 1rem; }
  .progress { gap: 14px; }
  .progress li { width: 28px; height: 28px; }
  .prompt { font-size: 2rem; margin: 10px 0 28px; }
  .options { max-width: 640px; margin: 0 auto; gap: 28px; }
  .option { padding: 12px 12px 16px; font-size: 1.15rem; }
  .option .value { font-size: 1.05rem; }
  .option .credit { font-size: 0.75rem; }
  .shotclock { max-width: 640px; margin: -14px auto 24px; }
  .verdict, .btn, .toast, .stats, .dist, .quip, .next, .history, .score-history, .daily { max-width: 520px; margin-inline: auto; }
  .btn { display: block; }
}

@media (max-width: 380px) {
  .options { gap: 8px; }
  .option { padding: 6px 6px 10px; font-size: 0.95rem; }
}