/* Play and The Shelf share the diary's paper, ink and editorial typography. */
.explore-main [hidden] { display: none !important; }
.explore-hero { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 4rem; align-items: end; padding: 4rem 0 3.5rem; }
.explore-hero h1 { margin: 0; font: 400 clamp(4rem, 7.5vw, 6.4rem)/0.93 var(--serif); letter-spacing: -0.04em; }
.explore-hero em { color: var(--blue); font-weight: 400; }
.blue-label { color: var(--blue); margin-right: 1.3rem; }
.explore-intro { max-width: 24rem; padding-bottom: 0.2rem; color: var(--muted); font-size: 0.96rem; }
.explore-intro p:first-child { color: var(--ink); font-weight: 600; }
.explore-intro p { margin: 0 0 0.8rem; }
.explore-intro .text-link { margin-top: 0.6rem; color: var(--ink); }
.quiz { border: 1px solid var(--line); background: white; }
.quiz-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.8rem; border-bottom: 1px solid var(--line); }
.quiz-heading h2 { margin: 0; font: 400 1.9rem/1.1 var(--serif); }
.quiz-heading p { margin: 0; color: var(--muted); font-size: 0.78rem; }
.quiz-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); }
.quiz-loading, .quiz-notice { padding: 2rem; }
.quiz > .quiet-button { margin: 0 2rem 2rem; }
.quiz-map { min-width: 0; margin: 0; padding: 1.5rem 1.6rem; background: #f0f4f8; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; font-size: 0.69rem; color: var(--muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.map-legend i { width: 10px; height: 10px; border: 1px solid #8291a4; }
.map-legend .legend-found { background: var(--blue); border-color: var(--blue); }
.legend-left { background: #cbd3df; }
#africa-map svg { display: block; width: 100%; height: auto; margin: 0.8rem auto 0; overflow: visible; }
.map-country { fill: #cbd3df; stroke: #f0f4f8; stroke-width: 0.85; stroke-linejoin: round; transition: fill 200ms ease; }
.map-country.is-found { fill: #2563eb; cursor: pointer; }
.map-country.is-missed { cursor: pointer; }
.map-country.is-selected { fill: #1645a5; stroke: #111827; stroke-width: 1.5; }
.map-country.is-missed.is-selected { fill: #b3bfd0; }
#africa-map g:focus-visible { outline: none; }
#africa-map g:focus-visible .map-country { stroke: #111827; stroke-width: 2.5; }
.map-check { fill: white; font: 600 11px var(--sans); pointer-events: none; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #2563eb; stroke-width: 1.5; }
.island-dot { stroke: #7a899e; stroke-width: 0.8; }
.map-sea { fill: #697c91; font: italic 12px var(--serif); letter-spacing: 1.5px; }
.map-equator { stroke: #cbd5e1; stroke-dasharray: 3 5; stroke-width: 0.8; }
.map-equator-text { fill: #738296; font: 8px var(--sans); letter-spacing: 1px; }
.quiz-map figcaption { min-height: 1.7em; margin: 0.2rem 0 1rem; color: #344860; font-size: 0.82rem; text-align: center; }
.island-heading { display: flex; justify-content: space-between; gap: 0.5rem; border-top: 1px solid #d2dce7; padding-top: 1rem; color: #526176; font-size: 0.67rem; }
.island-heading span:first-child { font-weight: 600; }
.island-insets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.7rem; }
.island-card { margin: 0; padding: 0.2rem; min-width: 0; border: 1px solid #d2dce7; background: #f8fafc; text-align: center; color: #526176; }
.island-card svg { display: block; width: 100%; }
.island-card path { stroke-width: 1; }
.island-card figcaption { margin: 0.1rem 0 0.2rem; min-height: 2.6em; font-size: 0.61rem; line-height: 1.3; overflow-wrap: anywhere; }
.island-card.is-found { border-color: var(--blue); }
.quiz-panel { min-width: 0; padding: 1.8rem; border-left: 1px solid var(--line); }
.quiz-scoreboard { display: flex; justify-content: space-between; gap: 1rem; }
.quiz-scoreboard > div:last-child { text-align: right; }
.stat-label { font-size: 0.69rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.quiz-scoreboard p { margin: 0.3rem 0 0; font-size: 2.45rem; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -0.055em; }
.quiz-scoreboard strong { font-weight: 500; }
.stat-total { color: var(--muted); font-size: 1.1rem; letter-spacing: 0; }
#timer.is-low { color: #b53a27; }
#quiz-progress { appearance: none; display: block; width: 100%; height: 4px; margin: 1.1rem 0 1.7rem; border: 0; background: #e8edf5; accent-color: var(--blue); }
#quiz-progress::-webkit-progress-bar { background: #e8edf5; }
#quiz-progress::-webkit-progress-value { background: var(--blue); }
#quiz-progress::-moz-progress-bar { background: var(--blue); }
.quiz-modes { margin: 0 0 1.3rem; padding: 0; border: 0; }
.quiz-modes legend, #guess-form label { display: block; margin-bottom: 0.7rem; font-size: 0.88rem; font-weight: 600; }
.quiz-modes label { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 0.88rem; cursor: pointer; }
.quiz-modes input { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); }
.play-button, .quiet-button { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 46px; padding: 0.75rem 1.1rem; border: 1px solid var(--ink); background: var(--ink); color: white; font: 500 0.9rem var(--sans); cursor: pointer; }
.play-button:hover { background: var(--blue); border-color: var(--blue); }
.play-button:disabled { opacity: 0.5; cursor: not-allowed; }
#start-round, #play-again { width: 100%; justify-content: space-between; }
.quiet-button { border-color: var(--line); background: white; color: var(--ink); }
.quiet-button:hover { background: var(--paper); border-color: var(--ink); }
.small-note { color: var(--muted); font-size: 0.74rem; line-height: 1.6; }
.guess-input-row { display: flex; }
#country-guess { min-width: 0; width: 100%; padding: 0.8rem 0.7rem; border: 1px solid #98a5b6; border-right: 0; border-radius: 0; background: white; color: var(--ink); font: 1rem var(--sans); }
#country-guess:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.guess-input-row .play-button { padding-inline: 0.9rem; }
.guess-feedback { min-height: 3.5em; margin: 0.8rem 0; font-size: 0.84rem; color: #42546a; }
.guess-feedback[data-kind="correct"] { color: #1d4ed8; }
.round-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.74rem; color: var(--muted); }
.text-button { min-height: 44px; padding: 0.2rem 0; background: none; border: 0; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.finish-confirm { margin-top: 0.5rem; padding: 1rem; border: 1px solid var(--line); background: var(--paper); }
.finish-confirm p { margin: 0 0 0.8rem; font-size: 0.85rem; }
.finish-confirm > div { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.finish-confirm button { padding-inline: 0.7rem; font-size: 0.78rem; }
.found-section { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.found-section h3 { display: flex; justify-content: space-between; margin: 0 0 0.8rem; font-size: 0.84rem; font-weight: 500; }
.found-section h3 span { color: var(--blue); }
#found-empty { margin: 0; color: var(--muted); font-size: 0.8rem; }
.country-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; padding: 0; margin: 0; }
#found-list { max-height: 13rem; overflow-y: auto; padding: 0.3rem; margin: -0.3rem; }
.country-chips button { min-height: 40px; padding: 0.4rem 0.65rem; border: 1px solid #cbd8f4; background: #eff5ff; color: #234b90; font: 0.75rem/1.4 var(--sans); text-align: left; cursor: pointer; }
.country-chips button:hover, .country-chips button[aria-pressed="true"] { border-color: var(--blue); background: #dbeafe; }
.quiz-results .eyebrow { margin-bottom: 0.6rem; color: var(--blue); }
.quiz-results h3 { margin: 0; font: 400 2.5rem/1.05 var(--serif); }
.quiz-results > p:not(.eyebrow) { font-size: 0.84rem; color: var(--muted); }
#copy-result { width: 100%; margin-top: 0.6rem; }
.missed-section { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; border-top: 1px solid var(--line); padding: 2rem; }
.missed-section h3 { margin: 0; font: 400 2rem/1.1 var(--serif); }
.missed-section .eyebrow { margin-bottom: 0.7rem; }
.missed-section p:last-child { font-size: 0.8rem; color: var(--muted); }
.missed-section .country-chips { align-content: start; }
.missed-section .country-chips button { background: var(--paper); color: #3e4859; border-color: var(--line); }
.play-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 4rem 0; scroll-margin-top: 1rem; }
.play-notes h2 { margin: 0; font: 400 clamp(2rem, 3vw, 3rem)/1.1 var(--serif); }
.play-notes ol { padding-left: 1.2rem; margin: 0; }
.play-notes li { margin-bottom: 0.7rem; padding-left: 0.4rem; }
.play-notes > div:last-child { color: var(--muted); font-size: 0.88rem; }
.map-notes { padding-top: 0.7rem; border-top: 1px solid var(--line); }
.map-notes summary { cursor: pointer; min-height: 44px; color: var(--ink); }
.map-notes a { text-underline-offset: 3px; }
.explore-next { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 1.7rem 0 3rem; border-top: 1px solid var(--line); }
.explore-next p { margin: 0 auto 0 0; font: 400 2.1rem var(--serif); }
.shelf-hero { padding-block: 5rem 4rem; }
.shelf-hero h1 { font-size: clamp(5rem, 11vw, 9rem); }
.explore-intro .shelf-status { margin-top: 1.5rem; font-size: 0.78rem; color: #42523b; }
.shelf-status span { display: inline-block; width: 7px; height: 7px; margin-right: 0.5rem; border-radius: 50%; background: #5b783b; }
.shelf-jump { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; padding: 1rem 0; border-block: 1px solid var(--ink); }
.shelf-jump a { padding-block: 0.3rem; color: var(--muted); font-size: 0.88rem; text-decoration: none; }
.shelf-jump a:hover { color: var(--blue); }
.shelf-row { display: grid; grid-template-columns: 60px 1fr 0.8fr 20px; gap: 1.5rem; align-items: center; padding: 3rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.shelf-row h2 { margin: 0; font: 400 3rem/1.1 var(--serif); letter-spacing: -0.03em; }
.shelf-row div > p { margin: 0.65rem 0 0; color: var(--muted); font-size: 0.85rem; }
.shelf-empty { margin: 0; color: var(--muted); font-size: 0.82rem; }
.shelf-empty span { color: #737d8f; }
.shelf-symbol { color: #9aa5b7; font-size: 1.4rem; }
.shelf-note { max-width: 48rem; padding: 4rem 0 5rem; }
.shelf-note h2 { margin: 0; font: 400 clamp(2.8rem, 5vw, 4rem)/1 var(--serif); letter-spacing: -0.03em; }
.shelf-note h2 em { color: var(--blue); }
.shelf-note > p:not(.eyebrow) { max-width: 35rem; color: var(--muted); }
.shelf-note > div { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
@media (max-width: 900px) {
  .explore-hero { gap: 2rem; }
  .quiz-grid { grid-template-columns: minmax(0, 1fr) minmax(290px, 0.85fr); }
  .quiz-panel, .quiz-map { padding: 1.25rem; }
  .island-insets { gap: 0.25rem; }
  .island-card figcaption { font-size: 0.56rem; }
  .play-notes { gap: 2rem; }
}
@media (max-width: 720px) {
  .explore-hero { grid-template-columns: 1fr; gap: 1.7rem; padding-block: 2.7rem 2rem; }
  .explore-hero h1 { font-size: clamp(3.7rem, 14vw, 5rem); }
  .explore-hero .eyebrow { font-size: 0.65rem; line-height: 1.8; }
  .blue-label { display: block; }
  .explore-intro { max-width: 34rem; font-size: 0.9rem; }
  .quiz-heading { padding: 1rem; }
  .quiz-heading p { display: none; }
  .quiz-grid { display: flex; flex-direction: column; }
  .quiz-panel { order: 0; border-left: 0; padding: 1.2rem; }
  .quiz-map { order: 1; border-top: 1px solid var(--line); padding: 1rem; }
  .quiz-scoreboard p { font-size: 2rem; }
  #quiz-progress { margin: 0.8rem 0 1.2rem; }
  .quiz-modes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.8rem; }
  .quiz-modes label { margin-right: 0.5rem; font-size: 0.8rem; }
  .found-section { margin-top: 1rem; padding-top: 1rem; }
  #found-list { max-height: 6.5rem; }
  .guess-feedback { min-height: 2.9em; margin-bottom: 0.2rem; }
  .quiz-map figcaption { font-size: 0.76rem; }
  .island-card figcaption { font-size: 0.61rem; }
  .play-notes { grid-template-columns: 1fr; gap: 1.6rem; padding-block: 2.5rem; }
  .missed-section { grid-template-columns: 1fr; padding: 1.3rem; gap: 0.5rem; }
  .explore-next { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .shelf-hero h1 { font-size: 5.4rem; }
  .shelf-jump { gap: 0.5rem 1.2rem; }
  .shelf-row { grid-template-columns: 28px 1fr; gap: 0.8rem; padding-block: 2rem; }
  .shelf-row h2 { font-size: 2.5rem; }
  .shelf-empty { grid-column: 2; margin-top: 0.5rem; }
  .shelf-symbol { display: none; }
  .shelf-note { padding-block: 3rem; }
}
@media (prefers-reduced-motion: reduce) { .map-country { transition: none; } }