* { box-sizing: border-box; }
html { height: 100%; }
body {
  position: relative;
  min-height: 100%;
  margin: 0;
  color: #000;
  background: #fff;
  font: 15px/1.45 system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* gallery light: two warm lamps just past the top corners, a few RGB levels at most */
body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 100vh;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at -4% -8%, rgb(255 184 110 / .045), rgb(255 184 110 / .025) 35%, rgb(255 184 110 / .01) 65%, transparent),
    radial-gradient(ellipse 70% 80% at 104% -8%, rgb(255 184 110 / .045), rgb(255 184 110 / .025) 35%, rgb(255 184 110 / .01) 65%, transparent);
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* Palette: the six logo colors. Use these everywhere; JS reads them via palette.js. */
:root {
  --red: #e4002b;
  --yellow: #ffd200;
  --blue: #0067b1;
  --pink: #f38bb0;
  --green: #00a651;
  --orange: #ff6a13;
  --answer: var(--green);
}
.mark .red { fill: var(--red); }
.mark .yellow { fill: var(--yellow); }
.mark .blue { fill: var(--blue); }
.mark .pink { fill: var(--pink); }
.mark .green { fill: var(--green); }
.mark .orange { fill: var(--orange); }

/* The mark sits one logo-width in from the left and one logo-height down from the top. */
:root { --e: 25px; --inset: var(--e); }
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: calc(var(--inset) + var(--e));
  padding: var(--inset) var(--inset) 0;
}
.mark, .mark svg { display: block; width: var(--e); height: var(--e); }
/* Nav call to action, on results and history. */
.nav-cta { display: inline-flex; align-items: center; height: 32px; margin-left: auto; padding: 0 16px; border: 1px solid #000; background: #000; color: #fff; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
@media (max-width: 820px) { .nav-cta { height: 28px; padding: 0 12px; font-size: 12px; } }
.nav-cta.secondary { background: none; color: #000; }
/* About: a ? in a circle, left of any nav call to action */
.nav-help { display: block; width: 32px; height: 32px; margin: 0 -4px 0 auto; color: #6b6b6b; }
.nav-help ~ .nav-cta { margin-left: 0; }
/* The 15px icon at 1.5×, offset onto the half-pixel grid (not centred), so each unit lands on whole device pixels on Retina screens. */
.nav-help svg { display: block; width: 22.5px; height: 22.5px; margin: 5px 0 0 4.5px; }
.nav-help:hover { color: #000; }
.nav-help:focus-visible { outline: 1px solid #767676; outline-offset: 2px; }
.progress-score { position: relative; display: flex; align-items: center; height: 44px; padding: 0; border: 0; background: none; }
.steps { display: flex; }
.steps i { width: calc(var(--e) * .4); height: calc(var(--e) * .4); background: #f0f0f0; }
.steps i.on { background: #000; }
.steps i.g, .meter.g { --c: var(--green); }
.steps i.y, .meter.y { --c: var(--yellow); }
.steps i.o, .meter.o { --c: var(--orange); }
.steps i.g, .steps i.y, .steps i.o { background: var(--c); }

/* game */
#game {
  display: grid;
  --room: clamp(24px, 3.4vw, 56px);
  --air: clamp(20px, 3.6vh, 36px);
  grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 440px);
  height: calc(100dvh - var(--inset) - var(--e));
}
.work { display: flex; flex-direction: column; min-height: 0; padding: calc(var(--air) + 12px) var(--room); }
.frame {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #767676; font-size: 13px; }
.frame img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s;
}
.frame img.on { opacity: 1; }

.label { font-size: 14px; line-height: 1.4; }
.label .who { font-weight: 700; }
.label .title { margin: 2px 0 6px; font-size: 20px; line-height: 1.25; }
.label .title i { font-weight: 500; }
.label .muted { color: #767676; }
.label a { color: #000; }

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--air);
  padding: calc(var(--air) + 12px) var(--room) var(--air) 8px;
  min-height: 0;
  overflow: auto;
}
.row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.k { font-weight: 700; }
.hint { color: #767676; font-size: 14px; }

.year { display: flex; align-items: baseline; gap: 6px; }
#yearInput {
  width: 4.1em;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.045em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#yearInput:focus { outline: none; border-bottom-color: #000; }
.era {
  padding: 8px 0 8px 4px;
  margin: -8px 0;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Time scale (public/timescale.js): one compressed track for the picker, round results and comparisons.
   Marks sit inside a layer inset by half a thumb, so they line up with the handle's travel. */
.timescale { --thumb: 36px; --thumb-height: 52px; --scale-height: 60px; --track: calc(var(--scale-height) / 2); container-type: inline-size; margin-top: 6px; }
.ts-plot { position: relative; height: var(--scale-height); }
/* one quiet paint for picking and results: a thin gray track and ticks under the black handle and marks */
.ts-plot::before { content: ""; position: absolute; left: 0; right: 0; top: var(--track); height: 1px; background: #aaa; }
.ts-area { position: absolute; inset: 0 calc(var(--thumb) / 2); pointer-events: none; }
/* ticks hang from the track: long (labelled), medium, short */
.tick { position: absolute; top: calc(var(--track) + 1px); width: 1px; height: 4px; margin-left: -.5px; background: #aaa; }
.tick.t2 { height: 7px; }
.tick.t1 { height: 11px; }
.tick.era-tick { top: calc(var(--track) - 10px); height: calc(var(--scale-height) - var(--track) + 28px); }
.ts-labels { position: relative; height: 16px; margin: 2px calc(var(--thumb) / 2) 0; font-size: 11px; color: #767676; font-variant-numeric: tabular-nums; }
.ts-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ts-labels > span:first-child { transform: translateX(calc(var(--thumb) / -2)); }
.ts-labels .era-divider { width: 0; transform: none; }
.era-divider > span { position: absolute; top: 0; }
.era-divider > span:first-child { right: 6px; transform: none; }
.era-divider > span:last-child { left: 6px; transform: none; }
@container (max-width: 300px) { .ts-labels .inner { display: none; } }
/* Results: the guess above the track (where the handle's centre line was), the answer band below, the gap on it. */
.ts-marks { position: absolute; inset: 0; animation: ts-marks .4s ease-out both; }
@keyframes ts-marks { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ts-marks { animation: none; } }
.ts-answer { position: absolute; top: var(--track); height: 17px; min-width: 1px; margin-left: -.5px; border: solid var(--answer); border-width: 0 1px; background: color-mix(in srgb, var(--answer) 12%, transparent); }
.ts-gap { position: absolute; top: var(--track); height: 1px; background: #000; }
.ts-you { position: absolute; top: 17px; width: 1px; height: calc(var(--track) - 17px); margin-left: -.5px; background: #000; }
.ts-you-label { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 600; line-height: 15px; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ts-density { position: absolute; left: 0; top: 20px; width: 100%; height: calc(var(--track) - 20px); overflow: visible; }
.ts-density .area { fill: #eee; }
.ts-density .line { fill: none; stroke: #999; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* The picker's range input only draws the handle; the scale draws the track. */
input[type=range] {
  position: relative;
  display: block;
  width: 100%;
  height: var(--scale-height);
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: none; }
input[type=range]::-moz-range-track { height: 2px; background: none; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb-height);
  margin-top: calc(1px - var(--thumb-height) / 2);
  border: 1px solid #000;
  border-radius: 12px;
  background: linear-gradient(90deg, transparent calc(50% - .5px), #000 calc(50% - .5px), #000 calc(50% + .5px), transparent calc(50% + .5px));
  cursor: grab;
}
input[type=range]::-moz-range-thumb { box-sizing: border-box; width: var(--thumb); height: var(--thumb-height); border: 1px solid #000; border-radius: 12px; background: linear-gradient(90deg, transparent calc(50% - .5px), #000 calc(50% - .5px), #000 calc(50% + .5px), transparent calc(50% + .5px)); cursor: grab; }
input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; }
input[type=range]:active::-moz-range-thumb { cursor: grabbing; }
input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid #767676; outline-offset: 3px; }
input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid #767676; outline-offset: 3px; }

.location-note { margin: 4px 0 0; color: #767676; font-size: 12px; }

.where { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 240px; }
/* fills the column, but never much taller than it is wide */
#map { flex: 1; min-height: 220px; max-height: clamp(360px, 30vw, 440px); cursor: crosshair; }
.leaflet-container { font: inherit; background: #d1e4f1; }
.leaflet-control-attribution { font-size: 10px; }
.leaflet-control-attribution a { color: #767676; }
.leaflet-bar, .leaflet-bar a { border-radius: 0 !important; }
.leaflet-touch .leaflet-bar { border: 1px solid #000; }

.go {
  width: 100%;
  padding: 14px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  font-weight: 700;
}
.go:disabled { background: #fff; color: #767676; border-color: #ccc; cursor: default; }

/* Round result: one row per axis; the time gap and time scale stay together. */
.result { font-variant-numeric: tabular-nums; }
.result-row { min-width: 0; }
.result-row + .result-row { padding-top: 16px; }
.result-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.result-heading h2 { margin: 0; font-size: 14px; font-weight: 700; }
.result-gap { margin: 6px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
.result-gap > span { font-size: 16px; font-weight: 400; letter-spacing: 0; color: #767676; }
.time-result .timescale { margin-top: 16px; }
.result-place { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; color: var(--answer); font-size: 16px; font-weight: 600; }
.result-place .dir { width: 12px; height: 12px; fill: currentColor; }
.score-meter { position: relative; flex: none; width: 112px; height: 44px; padding: 16px 0; margin: -10px 0; border: 0; background: none; }
.score-meter .meter { margin: 0; }
.score-meter:focus-visible, .progress-score:focus-visible { outline: 1px solid #767676; outline-offset: 2px; }
.score-meter::after, .progress-score::after { content: attr(data-score); position: absolute; z-index: 1001; right: 0; bottom: calc(100% - 4px); padding: 6px 9px; background: #171717; color: #fff; border-radius: 4px; font-size: 12px; white-space: nowrap; visibility: hidden; }
.progress-score::after { top: 100%; bottom: auto; }
.score-meter:focus::after, .progress-score:focus::after { visibility: visible; }
@media (hover: hover) { .score-meter:hover::after, .progress-score:hover::after { visibility: visible; } }
.dir { flex: none; width: 11px; height: 11px; fill: #000; }
.meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 12px; }
.meter i { height: 10px; background: #eee; overflow: hidden; }
.meter b { display: block; height: 100%; background: var(--c); transform-origin: left; transform: scaleX(var(--f)); animation: fill .35s ease-out both; animation-delay: calc(var(--i) * 90ms + 100ms); }
@keyframes fill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .meter b { animation: none; } }

.pin { width: 14px; height: 14px; border-radius: 50%; background: #000; border: 2px solid #fff; box-shadow: 0 0 0 1px #000; }
.pin.answer { background: var(--answer); box-shadow: 0 0 0 1px var(--answer); }
.pin.num { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #fff; font: 700 11px/1 system-ui, sans-serif; }

/* intro + end */
.intro, .end { max-width: 720px; margin: 0 auto; padding: 72px 24px; }
.intro { max-width: 1040px; }
.intro h1, .end h1 { margin: 0 0 16px; font-size: 52px; line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
.end h1 { font-weight: 600; letter-spacing: -0.045em; }
.hero { max-width: 640px; margin: 0 auto; text-align: center; }
.hero > p:first-of-type { margin: 0 auto 32px; font-size: 18px; max-width: 540px; }
.cta { display: flex; justify-content: center; gap: 12px; }
.intro .go { width: auto; padding: 14px 40px; }
.intro .plain { padding: 14px 32px; }
.today, .best { margin: 14px 0 0; font-size: 14px; color: #767676; }
.best { margin-top: 2px; }
.intro .src { margin: 48px 0 0; font-size: 13px; color: #767676; text-align: center; }

/* Example round on the intro: the game's layout, artwork left and controls stacked right,
   with numbered plain steps hanging in a gutter and a pointer that plays the round. */
.example {
  --hang: 36px;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(340px, 400px);
  justify-content: center;
  gap: 72px;
  margin: 80px 0 0;
}
.ex-step { position: relative; min-width: 0; padding-left: var(--hang); opacity: .3; transition: opacity .35s ease; }
.ex-step.complete { opacity: .6; }
.ex-step.active { opacity: 1; }
.ex-cap { display: flex; align-items: center; gap: 14px; margin: 0 0 0 calc(-1 * var(--hang)); font-size: 17px; font-weight: 700; line-height: 1.3; }
.example .n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #000; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }

.ex-work { display: flex; flex-direction: column; width: calc(var(--hang) + 300px); }
/* level with the year row beside it */
.ex-work > .ex-cap { min-height: 52px; }
.ex-work > .ex-note { margin-top: -6px; }
.ex-note { display: grid; margin: 6px 0 20px; font-size: 15px; }
.ex-note > p { grid-area: 1 / 1; margin: 0; transition: opacity .5s, transform .7s, visibility .7s; }
.ex-help { color: #767676; }
.ex-answer { color: #767676; visibility: hidden; opacity: 0; transform: translateY(6px); }
.ex-answer b { color: #000; font-weight: 600; }
.revealed .ex-help { opacity: 0; }
.revealed .ex-answer { visibility: visible; opacity: 1; transform: none; }
.ex-art { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ex-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.ex-step.active .ex-art img { transform: scale(1.045); }

.ex-panel { display: flex; flex-direction: column; gap: 24px; height: 560px; }
/* Each control and its result share one grid cell, so the reveal never moves anything. */
.ex-swap { display: grid; }
.ex-swap > * { grid-area: 1 / 1; min-width: 0; }
.ex-swap > * { align-self: start; }
.ex-swap > .ex-go { align-self: end; }
.ex-swap .result-gap { margin-top: 0; }
.example .result-heading { min-height: 24px; }
.ex-swap > .row { align-items: center; }
.ex-numbers { margin-top: 14px; }
#exYear { font-size: 36px; font-weight: 600; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.example .score-meter::after { top: calc(100% - 4px); bottom: auto; }
/* On reveal the handle fades and leaves its centre line as the guess mark. */
#exSlider { opacity: 1; transition: opacity .3s; }
.revealed #exSlider { opacity: 0; }

.ex-map { display: flex; flex: 1; flex-direction: column; gap: 12px; min-height: 0; }
#exMap { flex: 1; min-height: 0; }
.ex-location { position: relative; z-index: 500; }
.ex-play, .ex-result { transition: opacity .3s, visibility .3s; }
.ex-result, .revealed .ex-play { visibility: hidden; opacity: 0; }
.revealed .ex-result { visibility: visible; opacity: 1; }
.ex-drop .pin::after { content: ""; position: absolute; inset: -12px; border: 1px solid #000; border-radius: 50%; pointer-events: none; animation: ex-drop .55s ease-out both; }
@keyframes ex-drop { from { opacity: .65; transform: scale(.35); } to { opacity: 0; transform: scale(1.15); } }
.leaflet-tooltip.ex-tooltip { background: #fff; border: 0; box-shadow: none; border-radius: 0; padding: 3px 5px; font: 600 12px system-ui, sans-serif; }
.leaflet-tooltip.ex-tooltip.answer { color: var(--answer); }

/* Mirrors the game's Guess button, disabled until the pin drops. */
.ex-go { display: flex; align-items: center; }
.ex-go .n { margin: 0 14px 0 calc(-1 * var(--hang)); }
.ex-guess { flex: 1; padding: 14px; border: 1px solid #000; background: #000; color: #fff; text-align: center; font-weight: 700; transition: transform .15s, background .15s; }
.ex-guess.off { border-color: #ccc; background: #fff; color: #767676; }
.ex-guess.press { transform: scale(.97); background: #555; }

/* Arrow cursor, or a fingertip on touch screens. The tip sits on the target point. */
.ex-pointer { position: absolute; z-index: 900; left: -1.7px; top: -1.7px; width: 24px; height: 36px; pointer-events: none; opacity: 0; }
.ex-pointer svg { display: block; width: 100%; height: 100%; overflow: visible; fill: #000; stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / .3)); transform-origin: 1px 1px; transition: transform .12s; }
.ex-pointer.down svg { transform: scale(.85); }
.ex-pointer i { display: none; }
.ex-pointer.touch { left: 0; top: 0; }
.ex-pointer.touch svg { display: none; }
.ex-pointer.touch i { position: absolute; left: -22px; top: -22px; display: block; width: 44px; height: 44px; border: 2px solid rgb(0 0 0 / .6); border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / .85); transition: transform .12s, border-color .12s; }
.ex-pointer.touch.down i { transform: scale(.82); border-color: #000; }
@media (prefers-reduced-motion: reduce) {
  .example *, .example *::after { transition: none !important; animation: none !important; }
  .ex-drop .pin::after { display: none; }
}

/* percentile vs other players */
.kicker { margin: 0 0 2px; color: #767676; font-weight: 600; }
#rank { margin: 16px 0 40px; }
.pct { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 12px; }
.histwrap { position: relative; padding-top: 20px; margin-inline: 12px; }
.hist { display: block; width: 100%; height: 80px; }
.hist-you { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 700; }
.hist-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: #767676; font-variant-numeric: tabular-nums; }

.end h1 span { white-space: nowrap; }
.end h1 .of { color: #767676; }
.end .sub { color: #767676; margin: 0; font-size: 18px; }
.rounds li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 0;
}
.rounds ol { list-style: none; margin: 0; padding: 0; }
.rounds .thumb { position: relative; align-self: start; }
.rounds img { width: 88px; height: 88px; object-fit: cover; display: block; }
.rounds .num { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--answer); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.rounds .stats { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 8px; font-size: 13px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rounds .stats > span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.rounds .meter { grid-template-columns: repeat(5, 10px); gap: 2px; margin: 0; }
.rounds .meter i { height: 10px; }
.recap { height: 360px; margin-top: 32px; }
.rounds .t { font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rounds-help { margin: 0 0 8px; color: #767676; font-size: 13px; }
.round-answer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; width: 100%; min-height: 88px; padding: 0; border: 0; background: none; text-align: left; }
.round-answer .body, .round-answer .m { display: block; }
.round-answer:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.round-answer:focus-visible { outline: 1px solid #767676; outline-offset: 5px; }
.answer-chevron { display: block; width: 16px; height: 16px; margin: 12px 0 0 auto; fill: none; stroke: #767676; stroke-width: 1.5; }
.round-answer[aria-expanded=true] .answer-chevron { transform: rotate(180deg); }
/* Per-round comparison: indented under the title, labels on the charts, no legend. */
.answer-detail { grid-column: 2 / -1; min-width: 0; padding: 4px 0 16px; }
.answer-detail section + section { margin-top: 24px; }
.answer-detail h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.answer-timeline .timescale { margin: 0; }
/* taller above the track when there is a curve of other guesses */
.answer-timeline .timescale:has(.ts-density) { --scale-height: 104px; --track: 78px; }
.answer-map { height: 280px; isolation: isolate; }
.answer-heat { position: absolute; pointer-events: none; }
.comparison-note, .comparison-loading { margin: 12px 0 0; color: #767676; font-size: 12px; }
.comparison-note a { color: inherit; margin-left: 4px; text-underline-offset: 2px; }
.comparison-retry { padding: 4px; border: 0; background: none; text-decoration: underline; }
.rounds .m { color: #767676; font-size: 13px; }
.rounds .s { align-self: start; font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* The score is trimmed to its baseline so the share button sits on it. */
.end-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker ." "score share" "sub sub"; align-items: center; column-gap: 24px; }
.end-head .kicker { grid-area: kicker; margin-bottom: 6px; }
.end-head h1 { grid-area: score; margin: 0; text-box: trim-both cap alphabetic; }
/* h1 trims to cap height and baseline, so the button centres on the digits */
.end-head .share { grid-area: share; }
.end-head .sub { grid-area: sub; margin-top: 8px; }
.end-head .sub:empty { display: none; }
.end .actions { display: flex; gap: 12px; margin-top: 32px; }
.end .actions > button { flex: 1 1 0; padding-inline: 0; }
.end .go { width: auto; padding: 14px 40px; }
/* Rubric footer endorsement (rubriclabs.com/brand), inset like the mark */
.credit { position: absolute; left: 0; right: 0; bottom: calc(var(--inset) + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--inset); font-size: 14px; }
#intro[hidden] ~ #end[hidden] ~ .credit { display: none; }
.credit a { display: flex; align-items: baseline; gap: .25em; color: #000; text-decoration: none; }
.credit span { text-box: trim-both cap alphabetic; }
.credit svg { display: block; width: auto; height: calc(1cap * 302.8 / 298); }
.plain { padding: 14px 28px; border: 1px solid #000; background: none; font-weight: 700; }

@media (pointer: coarse) {
  .timescale { --thumb: 44px; --thumb-height: 60px; --scale-height: 68px; }
}

@media (max-width: 820px) {
  :root { --e: 20px; --inset: 16px; }
  #game { display: block; height: auto; }
  .work { padding: 16px; }
  .frame { flex: none; height: 44vh; height: 44svh; width: 100%; display: block; }
  .label { scroll-margin-top: 16px; }
  .panel { padding: 8px 16px 16px; overflow: visible; }
  .go { position: sticky; z-index: 1000; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .frame.ready { height: auto; }
  .frame.ready img { height: auto; max-height: 56svh; }
  .where { min-height: 0; }
  #map { height: 280px; flex: none; }
  .result-gap { font-size: 24px; }
  .rounds li { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .round-answer { min-height: 64px; gap: 8px; }
  .answer-detail { grid-column: 1 / -1; }
  .answer-map { height: 240px; }
  .rounds img { width: 64px; height: 64px; }
  .rounds .s { font-size: 16px; }
  .recap { height: 260px; }
  .intro, .end { padding: 40px 16px calc(64px + env(safe-area-inset-bottom)); }
  .intro .go, .end .go { position: static; width: 100%; }
  .end .actions .go, .end .actions .plain { flex: 1; padding: 14px 0; }
  .end-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "score" "sub" "share"; }
  .end-head .share { margin-top: 20px; }
  .intro h1, .end h1 { font-size: 38px; }
  .cta { flex-direction: column; }
  .intro .plain { width: 100%; }
  .example { --hang: 32px; grid-template-columns: minmax(0, 1fr); margin-top: 56px; gap: 32px; }
  .ex-cap { gap: 10px; font-size: 16px; }
  .ex-work > .ex-cap { min-height: 0; }
  .ex-work > .ex-note { margin-top: 6px; }
  .ex-go .n { margin-right: 10px; }
  .ex-work { width: auto; }
  .ex-art { flex: none; aspect-ratio: 4 / 5; }
  .ex-panel { height: auto; gap: 28px; }
  #exMap { flex: none; height: 260px; }
}