:root {
  color-scheme: light;
  --bg: #f4f1ea;
  --ink: #191713;
  --muted: #696155;
  --panel: #fffaf1;
  --line: #d6c9b3;
  --accent: #1f6f68;
  --accent-strong: #15514c;
  --era-a: rgba(31, 111, 104, 0.08);
  --era-b: rgba(189, 139, 45, 0.1);
  --era-c: rgba(161, 59, 47, 0.08);
  --scene: #1f6f68;
  --scene-soft: rgba(31, 111, 104, 0.18);
  --gold: #bd8b2d;
  --error: #a13b2f;
  --shadow: 0 24px 70px rgba(33, 26, 16, 0.14);
  --era-progress: 0;
  --era-hue-shift: 0deg;
  --era-saturation: 1;
  --era-brightness: 1;
  --era-contrast: 1;
  --era-sepia: 0;
  --era-overlay-cool: 0.5;
  --era-overlay-warm: 0.5;
  --era-overlay-dusk: 0.5;
  --era-pan-x: 0%;
  --era-pan-y: 0%;
  --era-zoom: 1.03;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  --era-bg-image: none;
  --era-bg-next-image: none;
  background:
    radial-gradient(circle at 18% 8%, var(--era-b), transparent 30%),
    radial-gradient(circle at 82% 18%, var(--era-c), transparent 26%),
    linear-gradient(90deg, var(--era-a) 1px, transparent 1px),
    linear-gradient(var(--era-a) 1px, transparent 1px),
    var(--bg);
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: background 240ms ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  filter:
    blur(calc(14px - (var(--era-progress) * 5px)))
    saturate(var(--era-saturation))
    brightness(var(--era-brightness))
    contrast(var(--era-contrast))
    sepia(var(--era-sepia))
    hue-rotate(var(--era-hue-shift));
  background:
    var(--era-bg-next-image),
    radial-gradient(circle at 18% 8%, var(--era-b), transparent 30%),
    radial-gradient(circle at 82% 18%, var(--era-c), transparent 26%),
    linear-gradient(90deg, var(--era-a) 1px, transparent 1px),
    linear-gradient(var(--era-a) 1px, transparent 1px),
    var(--bg);
  background-size: calc(var(--era-zoom) * 100%) auto, 100% 100%, 100% 100%, 44px 44px, 44px 44px;
  background-position: calc(50% + var(--era-pan-x)) calc(50% + var(--era-pan-y)), center top, center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  transition: opacity 420ms ease, filter 420ms ease;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(24, 14, 12, calc(var(--era-overlay-dusk) * 0.48)) 0%, rgba(24, 14, 12, calc(var(--era-overlay-dusk) * 0.28)) 56%, transparent 100%),
    radial-gradient(circle at 18% 20%, rgba(102, 175, 255, calc(var(--era-overlay-cool) * 0.24)) 0%, transparent 52%),
    linear-gradient(180deg, rgba(78, 136, 210, calc(var(--era-overlay-cool) * 0.24)) 0%, transparent 56%),
    linear-gradient(0deg, rgba(230, 123, 44, calc(var(--era-overlay-warm) * 0.32)) 0%, transparent 62%);
  mix-blend-mode: multiply;
  transition: background 260ms ease;
}

body.era-transition::before {
  opacity: 1;
  filter: blur(0);
}

body.has-era-background {
  transition: none;
  background:
    var(--era-bg-image),
    radial-gradient(circle at 18% 8%, var(--era-b), transparent 30%),
    radial-gradient(circle at 82% 18%, var(--era-c), transparent 26%),
    linear-gradient(90deg, var(--era-a) 1px, transparent 1px),
    linear-gradient(var(--era-a) 1px, transparent 1px),
    var(--bg);
  background-size: calc(var(--era-zoom) * 100%) auto, 100% 100%, 100% 100%, 44px 44px, 44px 44px;
  background-position: calc(50% + var(--era-pan-x)) calc(50% + var(--era-pan-y)), center top, center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  transition: background-position 240ms ease, background-size 240ms ease;
}

body.has-era-background .era-scene {
  background:
    linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.38)),
    var(--era-bg-image),
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.48), transparent 18%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.38), transparent 42%),
    linear-gradient(180deg, transparent 0 66%, rgba(25, 23, 19, 0.08) 66% 100%),
    var(--scene-soft);
  background-size: cover, cover, auto, auto, auto, auto;
  background-position: center, center, center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Remove legacy decorative SVG-like layer when photo backgrounds are active. */
body.has-era-background .era-sun,
body.has-era-background .era-cloud,
body.has-era-background .era-building,
body.has-era-background .era-detail {
  display: none;
}

body.has-era-background .era-scene::before {
  opacity: 0.12;
}

body.has-era-background .era-scene::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 14%, transparent 86%, rgba(25, 23, 19, 0.1));
}

body[data-era="ancient"] {
  --bg: #f1ead8;
  --panel: #fff8e7;
  --accent: #8d5b2d;
  --accent-strong: #603916;
  --era-a: rgba(141, 91, 45, 0.1);
  --era-b: rgba(189, 139, 45, 0.18);
  --era-c: rgba(68, 98, 88, 0.1);
  --scene: #8d5b2d;
  --scene-soft: rgba(141, 91, 45, 0.18);
}

body[data-era="medieval"] {
  --bg: #edf0e8;
  --panel: #fbfff5;
  --accent: #526d50;
  --accent-strong: #314330;
  --era-a: rgba(82, 109, 80, 0.11);
  --era-b: rgba(96, 57, 22, 0.08);
  --era-c: rgba(44, 63, 87, 0.09);
  --scene: #526d50;
  --scene-soft: rgba(82, 109, 80, 0.18);
}

body[data-era="renaissance"] {
  --bg: #f4eddf;
  --panel: #fffaf0;
  --accent: #8e4f3f;
  --accent-strong: #613129;
  --era-a: rgba(142, 79, 63, 0.1);
  --era-b: rgba(31, 111, 104, 0.1);
  --era-c: rgba(189, 139, 45, 0.14);
  --scene: #8e4f3f;
  --scene-soft: rgba(142, 79, 63, 0.18);
}

body[data-era="industrial"] {
  --bg: #eceae3;
  --panel: #fbfaf4;
  --accent: #4f6675;
  --accent-strong: #304452;
  --era-a: rgba(79, 102, 117, 0.12);
  --era-b: rgba(25, 23, 19, 0.08);
  --era-c: rgba(189, 139, 45, 0.1);
  --scene: #4f6675;
  --scene-soft: rgba(79, 102, 117, 0.18);
}

body[data-era="broadcast"] {
  --bg: #eef1f0;
  --panel: #fbfdfb;
  --accent: #2f6d80;
  --accent-strong: #214d5c;
  --era-a: rgba(47, 109, 128, 0.1);
  --era-b: rgba(161, 59, 47, 0.08);
  --era-c: rgba(189, 139, 45, 0.1);
  --scene: #2f6d80;
  --scene-soft: rgba(47, 109, 128, 0.18);
}

body[data-era="digital"] {
  --bg: #eef0f4;
  --panel: #fbfcff;
  --accent: #425f98;
  --accent-strong: #2d426d;
  --era-a: rgba(66, 95, 152, 0.1);
  --era-b: rgba(31, 111, 104, 0.08);
  --era-c: rgba(161, 59, 47, 0.07);
  --scene: #425f98;
  --scene-soft: rgba(66, 95, 152, 0.18);
}

body[data-era="now"] {
  --bg: #edf4f2;
  --panel: #fbfffd;
  --accent: #14796f;
  --accent-strong: #0f5d55;
  --era-a: rgba(20, 121, 111, 0.1);
  --era-b: rgba(66, 95, 152, 0.08);
  --era-c: rgba(189, 139, 45, 0.1);
  --scene: #14796f;
  --scene-soft: rgba(20, 121, 111, 0.18);
}

button,
input {
  font: inherit;
}

button {
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  padding: 0 18px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-weight: 750;
  box-shadow: 0 10px 22px rgba(25, 23, 19, 0.18);
}

button:hover {
  background: var(--accent-strong);
}

button:active {
  transform: translateY(1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.secondary {
  background: rgba(255, 255, 255, 0.96);
  color: var(--accent-strong);
  border: 1px solid rgba(25, 23, 19, 0.2);
  box-shadow: 0 8px 20px rgba(25, 23, 19, 0.14);
}

.secondary:hover {
  background: rgba(255, 255, 255, 1);
}

.shell {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 20px));
  margin: 0 auto;
  padding: 10px 0 16px;
}

.game-header {
  min-height: 130px;
  display: grid;
  grid-template-columns: 1fr minmax(180px, 230px);
  gap: 16px;
  align-items: end;
  padding: 8px 0 12px;
}

.eyebrow,
.score-label {
  margin: 0 0 8px;
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 6.2vw, 5.2rem);
  line-height: 0.9;
  letter-spacing: 0;
}

.dek {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.score-panel {
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 18px rgba(25, 23, 19, 0.12);
  border-radius: 8px;
  padding: 14px;
}

.score-panel-date {
  display: block;
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.score-panel strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
}

.score-panel strong.score-bump {
  animation: score-pop 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.score-panel #round-count {
  display: block;
  margin-top: 10px;
  color: var(--muted);
}

.round-progress {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.round-dot {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(25, 23, 19, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.65);
}

.round-dot.current {
  border-color: var(--accent);
  background: rgba(31, 111, 104, 0.35);
}

.round-dot.done {
  background: var(--accent);
  border-color: var(--accent);
}

.play-card,
.results {
  border: 1px solid rgba(255, 255, 255, 0.76);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.34));
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(25, 23, 19, 0.14);
  padding: clamp(14px, 2.6vw, 24px);
}

#play-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

#play-card .event-topline {
  margin-bottom: 8px;
}

#play-card .event-topline:has(#on-this-day-pill[hidden]) {
  display: none;
}

.play-layout {
  display: block;
}

.play-main {
  min-width: 0;
}

.play-control-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 380px);
  gap: 16px 24px;
  align-items: end;
  margin-top: -4px;
}

.play-wheel-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  justify-content: flex-end;
  transform: translateY(-22px);
}

.year-wheel-shell {
  width: 100%;
  max-width: 340px;
  padding: 12px 14px 16px;
  border-radius: 32px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.5) 0%, rgba(236, 232, 222, 0.72) 35%, rgba(206, 198, 182, 0.6) 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.55) inset,
    0 -3px 10px rgba(25, 23, 19, 0.12) inset,
    0 16px 36px rgba(25, 23, 19, 0.15);
  border: 1px solid rgba(25, 23, 19, 0.08);
  backdrop-filter: blur(2px);
}

.play-rail {
  margin-top: 0;
  padding: 10px 14px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 20px rgba(25, 23, 19, 0.1);
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-sizing: border-box;
}

.play-category {
  display: block;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
  line-height: 1.3;
}

.play-rail-hint {
  margin: 8px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.play-rail-details {
  min-width: 0;
}

.play-rail--tips-hidden .play-rail-details {
  display: none;
}

.play-rail-toggle {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
}

.play-rail-toggle:hover {
  color: var(--accent-strong);
  background: rgba(255, 255, 255, 0.5);
}

.play-rail-toggle:focus-visible {
  outline: 3px solid rgba(31, 111, 104, 0.28);
  outline-offset: 2px;
}

.play-rail--tips-hidden {
  padding-block: 6px;
}

.play-rail--tips-hidden .play-rail-toggle {
  margin-top: 0;
}

#play-card h2,
#play-card #event-clue {
  width: fit-content;
  max-width: min(820px, 100%);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(25, 23, 19, 0.14);
}

#play-card .guess-form {
  width: 100%;
  max-width: min(560px, 100%);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(25, 23, 19, 0.14);
  justify-self: start;
}

#play-card h2 {
  margin: 0 0 8px;
  padding: 14px 18px;
  font-size: clamp(2.15rem, 3.9vw, 2.95rem);
  line-height: 1.08;
}

#play-card #event-clue {
  margin: 0 0 8px;
  padding: 11px 15px;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink);
}

#play-card .guess-form {
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 12px;
}

.event-topline {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.92rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(189, 139, 45, 0.16);
  color: #74500f;
  font-weight: 850;
}

.bonus-pill {
  background: rgba(31, 111, 104, 0.16);
  color: var(--accent-strong);
}

.play-card h2,
.results h2 {
  margin-bottom: 10px;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: 0;
}

#event-clue {
  max-width: 760px;
}

.guess-form {
  margin-top: 0;
  max-width: 560px;
}

.guess-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 850;
}

.guess-row {
  display: grid;
  grid-template-columns: 1fr 132px;
  gap: 10px;
}

input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(25, 23, 19, 0.22);
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.98);
  color: var(--ink);
  font-size: 1rem;
}

input:focus {
  outline: 3px solid rgba(31, 111, 104, 0.18);
  border-color: var(--accent);
}

.year-wheel {
  position: relative;
  display: block;
  margin-top: 0;
  touch-action: none;
  user-select: none;
  cursor: grab;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  min-height: 0;
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 4px 12px rgba(255, 255, 255, 0.45),
    inset 0 -8px 18px rgba(25, 23, 19, 0.16),
    0 3px 0 rgba(255, 255, 255, 0.25);
  transition: opacity 180ms ease, box-shadow 180ms ease;
}

.year-wheel:active {
  cursor: grabbing;
}

.wheel-rim {
  pointer-events: none;
  position: absolute;
  inset: 6px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(25, 23, 19, 0.06),
    0 0 24px rgba(25, 23, 19, 0.06);
  z-index: 3;
}

body.has-era-background .year-wheel {
  min-height: 0;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 4px 12px rgba(255, 255, 255, 0.35),
    inset 0 -8px 18px rgba(25, 23, 19, 0.2),
    0 2px 0 rgba(255, 255, 255, 0.2);
}

body.has-era-background .wheel-window {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  min-height: 108px;
  transform: none;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  z-index: auto;
}

body.has-era-background .wheel-window strong {
  font-size: clamp(1.85rem, 4vw, 2.45rem);
}

body.has-era-background .wheel-window span {
  font-size: 0.98rem;
}

body.has-era-background .era-meta {
  display: none;
}

body.has-era-background .era-meta strong {
  font-size: 0.95rem;
}

body.has-era-background .era-meta span {
  font-size: 0.82rem;
}

body.has-era-background .era-scene {
  display: none;
}

body.has-era-background .era-scene::before {
  opacity: 0;
}

body.has-era-background .era-scene::after {
  background: linear-gradient(180deg, rgba(25, 23, 19, 0.05), rgba(25, 23, 19, 0.22));
}

body.has-era-background .era-sun,
body.has-era-background .era-cloud,
body.has-era-background .era-building,
body.has-era-background .era-detail {
  display: none;
}

.year-wheel:focus {
  outline: 3px solid var(--scene-soft);
  border-color: var(--scene);
}

.year-wheel.disabled {
  opacity: 0.64;
}

.era-scene {
  position: relative;
  min-height: 160px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.48), transparent 18%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.38), transparent 42%),
    linear-gradient(180deg, transparent 0 66%, rgba(25, 23, 19, 0.08) 66% 100%),
    var(--scene-soft);
}

.era-scene::before,
.era-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.era-scene::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(rgba(25, 23, 19, 0.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.32;
  mix-blend-mode: multiply;
}

.era-scene::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent 16%, transparent 82%, rgba(25, 23, 19, 0.08));
}

.era-sun {
  position: absolute;
  left: 22px;
  top: 20px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--gold);
  opacity: 0.85;
  box-shadow: 0 0 0 10px rgba(189, 139, 45, 0.12);
}

.era-cloud {
  position: absolute;
  display: block;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  opacity: 0.85;
}

.era-cloud::before,
.era-cloud::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: 999px 999px 0 0;
  background: inherit;
}

.era-cloud::before {
  left: 10px;
  width: 22px;
  height: 22px;
}

.era-cloud::after {
  left: 30px;
  width: 16px;
  height: 16px;
}

.cloud-one {
  right: 28px;
  top: 32px;
  width: 64px;
}

.cloud-two {
  right: 86px;
  top: 72px;
  width: 44px;
  opacity: 0.48;
}

.era-building {
  position: absolute;
  bottom: 0;
  display: block;
  background: var(--scene);
  opacity: 0.9;
  box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.08);
}

.era-building.one {
  left: 22px;
  width: 44px;
  height: 78px;
}

.era-building.two {
  left: 78px;
  width: 58px;
  height: 112px;
}

.era-building.three {
  left: 148px;
  width: 34px;
  height: 62px;
}

body[data-era="ancient"] .era-building.one {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

body[data-era="ancient"] .era-building.two {
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}

body[data-era="ancient"] .era-building.three {
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, 0.22) 8px 11px),
    var(--scene);
}

body[data-era="ancient"] .era-detail {
  position: absolute;
  right: 22px;
  bottom: 28px;
  width: 74px;
  height: 28px;
  border-top: 5px solid var(--scene);
  border-bottom: 5px solid var(--scene);
  background: repeating-linear-gradient(90deg, var(--scene) 0 5px, transparent 5px 16px);
  opacity: 0.72;
}

body[data-era="medieval"] .era-building.one,
body[data-era="medieval"] .era-building.three {
  clip-path: polygon(0 24%, 50% 0, 100% 24%, 100% 100%, 0 100%);
}

body[data-era="medieval"] .era-building.two {
  background:
    radial-gradient(circle at 50% 28px, rgba(255, 255, 255, 0.22) 0 5px, transparent 6px),
    repeating-linear-gradient(180deg, transparent 0 16px, rgba(25, 23, 19, 0.12) 16px 18px),
    var(--scene);
}

body[data-era="medieval"] .era-detail {
  position: absolute;
  right: 32px;
  bottom: 62px;
  width: 42px;
  height: 28px;
  border-left: 3px solid var(--scene);
  background: linear-gradient(135deg, var(--scene) 0 50%, transparent 50%);
  opacity: 0.68;
}

body[data-era="renaissance"] .era-building.two {
  border-radius: 999px 999px 0 0;
}

body[data-era="renaissance"] .era-building.one,
body[data-era="renaissance"] .era-building.three {
  background:
    linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, 0.28) 12px 20px, transparent 20px),
    var(--scene);
}

body[data-era="renaissance"] .era-detail {
  position: absolute;
  right: 24px;
  bottom: 20px;
  width: 78px;
  height: 48px;
  border-bottom: 5px solid var(--scene);
  border-radius: 50% 50% 0 0;
  opacity: 0.68;
}

body[data-era="industrial"] .era-building.three {
  width: 18px;
  height: 126px;
}

body[data-era="industrial"] .era-building.one,
body[data-era="industrial"] .era-building.two {
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, 0.2) 10px 14px),
    var(--scene);
}

body[data-era="industrial"] .era-detail {
  position: absolute;
  right: 16px;
  bottom: 36px;
  width: 90px;
  height: 36px;
  border-top: 5px solid var(--scene);
  background: repeating-linear-gradient(135deg, var(--scene) 0 4px, transparent 4px 14px);
  opacity: 0.62;
}

body[data-era="industrial"] .cloud-one,
body[data-era="industrial"] .cloud-two {
  background: rgba(25, 23, 19, 0.18);
}

body[data-era="broadcast"] .era-building.two::after,
body[data-era="digital"] .era-building.two::after,
body[data-era="now"] .era-building.two::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -34px;
  width: 3px;
  height: 34px;
  background: var(--scene);
  transform: translateX(-50%);
}

body[data-era="broadcast"] .era-building.two {
  border-radius: 8px 8px 0 0;
  background:
    radial-gradient(circle at 18px 22px, rgba(255, 255, 255, 0.28) 0 5px, transparent 6px),
    radial-gradient(circle at 40px 22px, rgba(255, 255, 255, 0.28) 0 5px, transparent 6px),
    var(--scene);
}

body[data-era="broadcast"] .era-detail {
  position: absolute;
  right: 22px;
  bottom: 24px;
  width: 70px;
  height: 54px;
  border: 5px solid var(--scene);
  border-radius: 6px;
  opacity: 0.62;
}

body[data-era="digital"] .era-building.one,
body[data-era="digital"] .era-building.two,
body[data-era="digital"] .era-building.three,
body[data-era="now"] .era-building.one,
body[data-era="now"] .era-building.two,
body[data-era="now"] .era-building.three {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0 3px, transparent 3px 14px),
    var(--scene);
}

body[data-era="digital"] .era-detail,
body[data-era="now"] .era-detail {
  position: absolute;
  right: 20px;
  bottom: 26px;
  width: 78px;
  height: 52px;
  border: 5px solid var(--scene);
  border-radius: 10px;
  background: linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, 0.22) 49% 52%, transparent 53%);
  opacity: 0.65;
}

body[data-era="now"] .era-detail {
  border-radius: 16px;
}

.wheel-window {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 2px;
  min-height: 118px;
  padding: 14px 12px;
  text-align: center;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 14%,
    #000 28%,
    #000 72%,
    rgba(0, 0, 0, 0.45) 86%,
    transparent 100%
  );
  mask-size: 100% 100%;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 14%,
    #000 28%,
    #000 72%,
    rgba(0, 0, 0, 0.45) 86%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
}

.wheel-window::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

.wheel-slot--adj {
  color: var(--muted);
  font-size: 1.02rem;
  font-weight: 750;
  opacity: 0.52;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.wheel-slot--center {
  color: var(--scene);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  z-index: 2;
}

.era-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px 12px 0;
}

.era-meta strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.era-meta span {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.4;
}

.feedback {
  margin-top: 16px;
  border: 1px solid rgba(189, 139, 45, 0.38);
  border-left: 5px solid var(--gold);
  border-radius: 10px;
  background: rgba(255, 250, 240, 0.9);
  padding: 14px 16px;
  line-height: 1.5;
  max-width: 700px;
}

.feedback p {
  margin: 18px 0 0;
  color: var(--muted);
}

.feedback .related-line {
  margin-top: 8px;
  font-weight: 600;
  line-height: 1.48;
}

.reveal-copy {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
}

.reveal-copy.hidden-reveal {
  opacity: 0;
  transform: translateY(6px);
}

.trivia-line {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(25, 23, 19, 0.22);
  font-weight: 650;
}

.trivia-line strong {
  color: var(--accent-strong);
}

.verdict-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin-bottom: 10px;
}

.verdict-row strong {
  font-size: 1.1rem;
}

.verdict-row span {
  color: var(--muted);
  font-weight: 800;
}

.whoosh {
  --guess: 12%;
  --answer: 88%;
  --distance: 76%;
  --duration: 900ms;
  --path: #1f6f68;
  --path-soft: rgba(31, 111, 104, 0.18);
}

.whoosh.close {
  --path: #bd8b2d;
  --path-soft: rgba(189, 139, 45, 0.2);
}

.whoosh.miss {
  --path: #c75f2a;
  --path-soft: rgba(199, 95, 42, 0.2);
}

.whoosh.bad-miss {
  --path: #a13b2f;
  --path-soft: rgba(161, 59, 47, 0.22);
}

.whoosh-scale {
  display: flex;
  justify-content: center;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.whoosh-scale .miss-distance {
  color: var(--path);
}

.whoosh-track {
  position: relative;
  height: 122px;
  margin-top: 8px;
  overflow: hidden;
}

.whoosh-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 58px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31, 111, 104, 0.16), rgba(161, 59, 47, 0.16));
}

.whoosh-line {
  position: absolute;
  left: min(var(--guess), var(--answer));
  top: 54px;
  width: var(--distance);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--path-soft), var(--path));
  box-shadow: 0 10px 28px var(--path-soft);
  transform-origin: left center;
  animation: stretch var(--duration) cubic-bezier(0.2, 0.88, 0.18, 1) both;
}

.whoosh-runner {
  position: absolute;
  left: var(--guess);
  top: 49px;
  width: 20px;
  height: 20px;
  border: 4px solid var(--panel);
  border-radius: 999px;
  background: var(--path);
  box-shadow: 0 0 0 8px var(--path-soft), 0 10px 24px rgba(25, 23, 19, 0.14);
  transform: translateX(-50%);
  animation: whoosh var(--duration) cubic-bezier(0.08, 0.86, 0.2, 1) both;
}

.year-pin {
  position: absolute;
  width: 96px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.year-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 18px;
  background: currentColor;
  opacity: 0.38;
}

.year-pin b {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guess-pin {
  left: var(--guess);
  top: 0;
}

.guess-pin::after {
  top: 36px;
}

.answer-pin {
  left: var(--answer);
  bottom: 0;
  color: var(--path);
}

.answer-pin::after {
  bottom: 36px;
}

.answer-pin b {
  color: var(--path);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
}

.answer-pin {
  font-size: 0.92rem;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.answer-pin.hidden-answer {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

.whoosh.revealed .answer-pin {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 200ms ease, transform 220ms ease;
}

@keyframes whoosh {
  0% {
    left: var(--guess);
    filter: blur(0);
  }

  55% {
    filter: blur(1px);
  }

  100% {
    left: var(--answer);
    filter: blur(0);
  }
}

@keyframes stretch {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes score-pop {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

#next-button {
  margin-top: 18px;
}

.results {
  margin-top: 22px;
}

.result-hero {
  max-width: 720px;
}

.result-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 6px;
}

.result-stat-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(25, 23, 19, 0.12);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
}

.result-subtitle {
  max-width: 680px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.editor-note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(25, 23, 19, 0.1);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.45;
}

.result-list {
  display: grid;
  gap: 10px;
  margin: 20px 0 24px;
}

.result-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.result-row p {
  margin: 4px 0 0;
  color: var(--muted);
}

.result-row strong:last-child {
  color: var(--accent-strong);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .wheel-window {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

@media (max-width: 1100px) {
  .play-control-row {
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 340px);
    gap: 14px 18px;
  }
}

@media (max-width: 900px) {
  .game-header {
    min-height: 104px;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
    align-items: end;
  }

  h1 {
    font-size: clamp(2.4rem, 8vw, 4rem);
  }

  .dek {
    max-width: 440px;
  }

  .play-control-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }

  /* Wheel → category rail → guess (matches common mobile thumb reach). */
  .play-wheel-column {
    order: 1;
    align-items: center;
    flex-direction: column-reverse;
    transform: translateY(-14px);
  }

  #play-card .guess-form {
    order: 2;
  }

  .play-rail {
    max-width: min(340px, 100%);
  }

  .year-wheel-shell {
    max-width: 300px;
  }
}

@media (max-width: 600px) {
  /* Lock document scroll during play and final summary. */
  html:has(#play-card:not([hidden])),
  html:has(#results:not([hidden])),
  body:has(#results:not([hidden])),
  body:has(#play-card:not([hidden])) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body:has(#play-card:not([hidden])),
  body:has(#results:not([hidden])) {
    position: fixed;
    inset: 0;
    width: 100%;
  }

  /* Era photos: fill the viewport on phones (contain left a small band at the top). */
  body.has-era-background {
    background-size: cover, 100% 100%, 100% 100%, 44px 44px, 44px 44px;
    background-position: center center, center top, center top, center top, center top;
    background-attachment: scroll;
  }

  body::before {
    background-size: cover, 100% 100%, 100% 100%, 44px 44px, 44px 44px;
    background-position: center center, center top, center top, center top, center top;
  }

  /* Let era photography read through; desktop keeps stronger grading. */
  body.has-era-background::after {
    opacity: 0.58;
  }

  body.has-era-background .year-wheel {
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
      inset 0 3px 10px rgba(255, 255, 255, 0.28),
      inset 0 -6px 14px rgba(25, 23, 19, 0.14),
      0 2px 0 rgba(255, 255, 255, 0.16);
  }

  .shell {
    width: min(100% - 16px, 1060px);
    padding: max(4px, env(safe-area-inset-top, 0px)) 0 max(6px, env(safe-area-inset-bottom, 0px));
    margin: 0 auto;
    height: 100%;
    max-height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }

  .game-header {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 6px;
    padding: 2px 0 4px;
    flex-shrink: 0;
  }

  .game-header > div:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
  }

  .game-header > div:first-child .eyebrow {
    display: none;
  }

  .game-header h1 {
    flex: 0 0 auto;
    font-size: clamp(1rem, 4.2vw, 1.22rem);
    line-height: 1.12;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
  }

  .game-header > div:first-child .dek {
    display: block;
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.58rem, 2.25vw, 0.72rem);
    line-height: 1.18;
    text-align: left;
  }

  .score-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 5px 8px;
    max-width: 100%;
  }

  .score-panel-date {
    display: inline;
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .score-label {
    display: none;
  }

  .score-panel strong {
    display: inline;
    font-size: 1.18rem;
    line-height: 1;
    margin: 0;
  }

  .score-panel #round-count {
    display: inline;
    margin: 0;
    font-size: 0.62rem;
    white-space: nowrap;
  }

  .round-progress {
    flex: 1 0 100%;
    order: 99;
    margin: 2px 0 0;
    gap: 4px;
  }

  .round-dot {
    height: 4px;
  }

  #play-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .play-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .play-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  #play-card h2 {
    margin: 0 0 4px;
    padding: 7px 9px;
    font-size: clamp(1.2rem, 4.4vw, 1.42rem);
    line-height: 1.12;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.58);
    box-shadow: 0 6px 16px rgba(25, 23, 19, 0.08);
  }

  #play-card #event-clue {
    margin: 0 0 4px;
    padding: 6px 9px;
    font-size: 0.92rem;
    line-height: 1.38;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 20dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.58);
    box-shadow: 0 6px 16px rgba(25, 23, 19, 0.08);
  }

  .play-control-row {
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
    margin-top: 0;
    align-items: stretch;
    overflow: hidden;
  }

  .play-rail {
    max-width: min(340px, 100%);
    padding: 5px 9px 6px;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 14px rgba(25, 23, 19, 0.08);
  }

  .play-rail-hint {
    margin-top: 3px;
    font-size: 0.7rem;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .play-category {
    font-size: 0.65rem;
  }

  #play-card .guess-form {
    max-width: none;
    padding: 6px 8px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 16px rgba(25, 23, 19, 0.08);
  }

  /* One compact row: year field + Guess (saves vertical space vs stacked). */
  #play-card .guess-form label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .play-wheel-column {
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
    gap: 4px;
    justify-content: center;
    transform: translateY(-4px);
  }

  .year-wheel-shell {
    max-width: min(340px, 100%);
    padding: 5px 7px 6px;
    flex-shrink: 1;
    min-height: 0;
    background:
      linear-gradient(165deg, rgba(255, 255, 255, 0.34) 0%, rgba(236, 232, 222, 0.48) 40%, rgba(206, 198, 182, 0.38) 100%);
    border: 1px solid rgba(25, 23, 19, 0.06);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.45) inset,
      0 -2px 8px rgba(25, 23, 19, 0.08) inset,
      0 10px 22px rgba(25, 23, 19, 0.1);
    backdrop-filter: blur(1px);
  }

  .wheel-window {
    min-height: 88px;
    padding: 8px 10px;
  }

  body.has-era-background .wheel-window {
    min-height: 68px;
    padding: 5px 7px;
    background: rgba(255, 255, 255, 0.36);
  }

  .guess-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }

  #play-card .guess-form input#year-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
  }

  #play-card .guess-form button[type="submit"] {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 14px;
    white-space: nowrap;
    font-size: 0.92rem;
    box-shadow: 0 6px 14px rgba(25, 23, 19, 0.12);
  }

  .era-scene {
    min-height: 56px;
  }

  .era-meta {
    padding: 0 12px 10px;
  }

  .wheel-slot--center {
    font-size: clamp(1.2rem, 5.2vw, 1.52rem);
  }

  .wheel-slot--adj {
    font-size: 0.88rem;
  }

  .play-rail-toggle {
    margin-top: 6px;
    min-height: 36px;
    padding: 4px 8px;
    font-size: 0.7rem;
  }

  .play-rail--tips-hidden .play-rail-toggle {
    margin-top: 0;
  }

  .event-topline,
  .result-row {
    align-items: start;
    grid-template-columns: 1fr;
  }

  #play-card .event-topline {
    margin-bottom: 4px;
    flex-shrink: 0;
  }

  #next-button {
    flex-shrink: 0;
    margin-top: 8px;
    padding-block: 8px;
  }

  /* Post-guess panel: match desktop spacing; avoid squeezed 3-col grid on narrow screens */
  #play-card #feedback.feedback {
    padding: 12px 12px 14px;
    line-height: 1.45;
    max-width: none;
  }

  #play-card #feedback .verdict-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
  }

  #play-card #feedback .verdict-row strong {
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 800;
  }

  #play-card #feedback .verdict-row span {
    font-size: 0.82rem;
    line-height: 1.4;
    font-weight: 700;
    max-width: 100%;
  }

  #play-card #feedback .whoosh {
    margin-bottom: 4px;
  }

  #play-card #feedback .whoosh-scale {
    display: flex;
    justify-content: center;
    font-size: 0.84rem;
    text-align: center;
  }

  #play-card #feedback .whoosh-scale .miss-distance {
    display: block;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 0;
    white-space: nowrap;
  }

  #play-card #feedback .whoosh-track {
    height: 128px;
    margin-top: 8px;
    overflow: hidden;
  }

  #play-card #feedback .whoosh-track::before {
    top: 60px;
  }

  #play-card #feedback .whoosh-line {
    top: 56px;
  }

  #play-card #feedback .whoosh-runner {
    top: 51px;
  }

  #play-card #feedback .year-pin {
    width: 80px;
    max-width: 80px;
    min-width: 0;
    font-size: 0.68rem;
    line-height: 1.25;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  #play-card #feedback .year-pin b {
    font-size: 0.56rem;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    white-space: nowrap;
  }

  #play-card #feedback .guess-pin {
    top: 2px;
  }

  #play-card #feedback .guess-pin::after {
    top: 42px;
  }

  #play-card #feedback .answer-pin {
    bottom: 2px;
  }

  #play-card #feedback .answer-pin::after {
    bottom: 42px;
  }

  #play-card #feedback .reveal-copy {
    margin-top: 4px;
  }

  #play-card #feedback .reveal-copy p {
    margin: 8px 0 0;
    font-size: 0.82rem;
    line-height: 1.32;
    color: var(--muted);
  }

  #play-card #feedback .related-line {
    margin-top: 7px;
    font-size: 0.8rem;
    line-height: 1.32;
  }

  /* After a guess: timeline + reveal replaces the wheel so related info remains visible. */
  #play-card.play-card--answered {
    gap: 0;
  }

  #play-card.play-card--answered .event-topline {
    order: 1;
  }

  #play-card.play-card--answered #feedback {
    order: 2;
    margin: 0;
    max-width: none;
    width: 100%;
    flex: 1 1 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  #play-card.play-card--answered .play-layout {
    display: none;
  }

  #play-card.play-card--answered #next-button {
    order: 4;
    margin-top: 8px;
  }

  #play-card.play-card--answered #event-title,
  #play-card.play-card--answered #event-clue {
    display: none;
  }

  #play-card.play-card--answered .guess-form {
    display: none;
  }

  #play-card.play-card--answered .play-rail {
    display: none;
  }

  #results.results {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    margin-top: 4px;
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
  }

  .result-hero {
    max-width: none;
    flex: 0 0 auto;
  }

  .result-hero .eyebrow {
    display: none;
  }

  .results h2 {
    margin-bottom: 4px;
    font-size: clamp(1.3rem, 7vw, 1.75rem);
    line-height: 1;
  }

  .result-stats {
    gap: 6px;
    margin: 6px 0 4px;
  }

  .result-stat-pill {
    min-height: 24px;
    padding: 0 9px;
    font-size: 0.68rem;
  }

  .result-subtitle {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.25;
  }

  .result-list {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: 5px;
    margin: 8px 0 8px;
    overflow: hidden;
  }

  .result-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding-top: 5px;
    min-height: 0;
  }

  .result-row strong {
    font-size: 0.74rem;
    line-height: 1.15;
  }

  .result-row div strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .result-row p {
    margin: 2px 0 0;
    font-size: 0.66rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .actions {
    flex: 0 0 auto;
    gap: 6px;
  }

  .actions button {
    flex: 1 1 0;
    min-height: 34px;
    padding: 8px 9px;
    font-size: 0.72rem;
  }
}