/* ── Self-hosted fonts ────────────────────────────────────────
   Bundled with the binary so the game runs on closed networks.
   Each face has two declarations (latin + latin-ext) with
   unicode-range so the browser only fetches the extended set
   when needed (Norwegian å/æ/ø, accented capitals, etc.). */

/* Inter — body text */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/vendor/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/vendor/fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces — display / italic only */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/vendor/fonts/fraunces-latin-300-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/vendor/fonts/fraunces-latin-ext-300-italic.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/fraunces-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/fraunces-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — labels and small monospace text */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/vendor/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/vendor/fonts/jetbrains-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Paper & ink palette */
  --paper:        #f4ecd8;
  --paper-deep:   #ebe1c7;
  --paper-shadow: #d9cca9;
  --ink:          #1a1814;
  --ink-soft:     #4a4438;
  --ink-faint:    #8a8170;
  --rule:         #c9bd9c;

  /* Accents */
  --accent:        #b4452f;  /* terracotta */
  --accent-deep:   #8a3221;
  --correct:       #5a7a3f;  /* moss */
  --correct-soft:  #b9c89e;
  --incorrect:     #a83a2a;
  --highlight:     #d9a441;  /* mustard */

  /* Map */
  --land:         #e6dbbe;
  --land-stroke:  #c9bd9c;
  --land-hover:   #d4c389;
  --ocean:        transparent;

  /* Type */
  --display: 'Fraunces', 'Hoefler Text', 'Garamond', serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', 'SF Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle paper grain — pure CSS, no images */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 23% 47%, rgba(120, 100, 60, 0.04) 0, transparent 40%),
    radial-gradient(circle at 78% 22%, rgba(140, 110, 70, 0.05) 0, transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(100, 80, 50, 0.04) 0, transparent 45%);
}
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.25  0 0 0 0 0.15  0 0 0 0.18 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.6;
}

/* ── Masthead ─────────────────────────────────────────────────── */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.25rem 3rem 1rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.masthead::after {
  content: '';
  position: absolute;
  left: 3rem;
  right: 3rem;
  bottom: -4px;
  border-bottom: 1px solid var(--rule);
}

.masthead-left {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}

.title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
  font-variation-settings: 'opsz' 144;
  font-style: italic;
}

.masthead-right {
  display: flex;
  gap: 2.5rem;
  align-items: flex-end;
}

/* ── Language switcher ───────────────────────────────────────── */
.lang-switch {
  display: flex;
  gap: 0.25rem;
  align-self: flex-end;
  padding-bottom: 0.25rem;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.lang-btn svg {
  display: block;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.lang-btn:hover {
  background: var(--paper-deep);
  color: var(--ink);
}
.lang-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.lang-btn[aria-pressed="true"] svg {
  border-color: var(--paper);
}
.lang-label {
  font-weight: 500;
}

.score-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.score-value {
  font-family: var(--display);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.02em;
  margin-top: 0.25rem;
}

.score-divider {
  color: var(--ink-faint);
  margin: 0 0.15em;
  font-style: italic;
}

#streak-value::before {
  content: '×';
  color: var(--ink-faint);
  font-style: italic;
  margin-right: 0.05em;
}

/* ── Controls (segmented buttons) ─────────────────────────────── */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 0.85rem 3rem;
  border-bottom: 1px solid var(--rule);
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.control-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 0.5rem;
}

.seg {
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: all 0.18s ease;
  letter-spacing: 0.01em;
}
.seg + .seg { margin-left: -1px; }
.seg:hover {
  background: var(--paper-deep);
  color: var(--ink);
}
.seg[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  position: relative;
  z-index: 1;
}

/* ── Stage ────────────────────────────────────────────────────── */
.stage {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2.5fr);
  gap: 2rem;
  padding: 1.25rem 3rem 2rem;
  align-items: start;
}

.prompt-card {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  padding: 2rem 1.75rem;
  position: relative;
  min-height: 220px;
}
.prompt-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border: 1px solid var(--rule);
  transform: translate(6px, 6px);
  pointer-events: none;
  z-index: -1;
  background: var(--paper-shadow);
}

.prompt-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.prompt-instruction {
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 1.25rem;
  font-style: italic;
}

.prompt-target {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 0.4rem;
  color: var(--ink);
  font-variation-settings: 'opsz' 144;
  min-height: 2.5em;
}

.prompt-feedback {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin-top: 1.25rem;
  min-height: 1.2em;
  color: var(--ink-soft);
  /* Reserve a bit of right padding so the feedback line never collides
     with the skip button sitting in the bottom-right corner. */
  padding-right: 4.5rem;
}
.prompt-feedback.correct { color: var(--correct); }
.prompt-feedback.incorrect { color: var(--incorrect); }

/* Skip button — sits in the bottom-right corner of the prompt card. */
.prompt-skip {
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 4px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.prompt-skip:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.prompt-skip:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* ── Map ──────────────────────────────────────────────────────── */
.map-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1rem;
  position: relative;
  min-height: 400px;
}

.map-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}
.map-hint {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

#map {
  width: 100%;
  height: auto;
  display: block;
  cursor: grab;
  /* Keep zoomed/panned content from escaping the map card. */
  overflow: hidden;
  /* Tell the browser we'll handle pan and pinch-zoom ourselves so it
     doesn't try to scroll the page when the user drags on the map. */
  touch-action: none;
  /* Prevent text selection while dragging to pan. */
  user-select: none;
  -webkit-user-select: none;
}
#map:active { cursor: grabbing; }
#map .country { cursor: pointer; }
#map .country:active { cursor: pointer; }

.country {
  fill: var(--land);
  stroke: var(--land-stroke);
  stroke-width: 0.5;
  cursor: pointer;
  transition: fill 0.15s ease;
}
.country:hover {
  fill: var(--land-hover);
}
.country.disabled {
  cursor: default;
  pointer-events: none;
}
.country.highlight {
  fill: var(--highlight);
  stroke: var(--accent-deep);
  stroke-width: 1;
}
.country.correct {
  fill: var(--correct);
  stroke: var(--correct);
  stroke-width: 1.5;
  animation: pulse 0.5s ease;
}
.country.incorrect {
  fill: var(--accent);
  stroke: var(--accent-deep);
  stroke-width: 1.5;
  animation: shake 0.4s ease;
}
.country.reveal {
  fill: var(--correct-soft);
  stroke: var(--correct);
  stroke-width: 1.8;
  animation: reveal-pulse 1.2s ease infinite;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
@keyframes reveal-pulse {
  0%, 100% { stroke-width: 1.8; }
  50%      { stroke-width: 2.8; }
}

.loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-faint);
  background: var(--paper);
}
.loading.hidden { display: none; }

/* ── Choices (multiple-choice mode) ──────────────────────────── */
.choices {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: -1rem;
}

.choice-btn {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.01em;
  background: var(--paper-deep);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 1rem 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.choice-btn:hover {
  background: var(--paper-shadow);
  transform: translateY(-1px);
}
.choice-btn.correct {
  background: var(--correct-soft);
  border-color: var(--correct);
  color: var(--correct);
}
.choice-btn.incorrect {
  background: var(--paper-deep);
  border-color: var(--incorrect);
  color: var(--incorrect);
  text-decoration: line-through;
  text-decoration-color: var(--incorrect);
}
.choice-btn:disabled {
  cursor: default;
}

/* ── Map "Reset view" button (and other small text-buttons) ──── */
.link-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .masthead { padding: 1rem 1.25rem 0.75rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .masthead::after { left: 1.25rem; right: 1.25rem; }
  .masthead-left { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .controls { padding: 0.75rem 1.25rem; gap: 1rem; }
  .control-group { width: 100%; flex-wrap: wrap; }
  .stage { grid-template-columns: 1fr; padding: 1rem 1.25rem; gap: 1.25rem; }
  .prompt-card { min-height: auto; }
}

/* Initial page-load reveal */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.masthead, .controls, .stage {
  animation: rise 0.6s ease both;
}
.controls { animation-delay: 0.1s; }
.stage    { animation-delay: 0.2s; }

/* ── Tooltips ─────────────────────────────────────────────────
   Custom tooltips on elements with data-i18n-tooltip. The native
   `title` attribute still works as a fallback for keyboard and
   screen-reader users; we layer a faster, prettier one on top
   for mouse hover. */
[data-i18n-tooltip] {
  position: relative;
}
[data-i18n-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 0.75rem;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
  transition-delay: 0s;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(26, 24, 20, 0.15);
}
[data-i18n-tooltip]::before {
  content: '';
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 50;
}
[data-i18n-tooltip]:hover::after,
[data-i18n-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.35s;
}
[data-i18n-tooltip]:hover::before,
[data-i18n-tooltip]:focus-visible::before {
  opacity: 1;
  transition-delay: 0.35s;
}

/* ── View tabs (Play / Learn) ─────────────────────────────────── */
.view-tabs {
  display: flex;
  gap: 0;
}
.view-tab {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.view-tab + .view-tab { margin-left: -1px; }
.view-tab:hover {
  background: var(--paper-deep);
  color: var(--ink);
}
.view-tab[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  position: relative;
  z-index: 1;
}

/* ── View-scoped visibility ───────────────────────────────────── */
body.view-play .learn-only,
body.view-learn .play-only {
  display: none !important;
}

/* ── Learn search box ─────────────────────────────────────────── */
.learn-search {
  font-family: var(--display);
  font-size: 1rem;
  font-style: italic;
  font-variation-settings: 'opsz' 144;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 0.4rem 0.25rem;
  color: var(--ink);
  outline: none;
  min-width: 240px;
  transition: border-color 0.15s ease;
}
.learn-search::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
.learn-search:focus {
  border-bottom-color: var(--accent);
}

/* ── Learn panel ──────────────────────────────────────────────── */
.learn-panel-wrap {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  padding: 1.5rem 1.75rem;
  position: relative;
  min-height: 300px;
}
.learn-panel-wrap::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border: 1px solid var(--rule);
  transform: translate(6px, 6px);
  pointer-events: none;
  z-index: -1;
  background: var(--paper-shadow);
}
.learn-panel-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 250px;
}
.learn-panel-flag {
  margin-bottom: 1rem;
}
.learn-panel-flag img {
  display: block;
  width: 48px;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.learn-panel-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.learn-pinned {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--accent);
}
.learn-panel-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1.25rem;
  color: var(--ink);
  font-variation-settings: 'opsz' 144;
}
.learn-panel-help {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-faint);
  margin-top: 0.5rem;
  line-height: 1.4;
}
.learn-panel-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.25rem;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
}
.learn-panel-facts dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: center;
}
.learn-panel-facts dd {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

/* ── Cursor-following tooltip (Learn view) ────────────────────── */
.learn-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 90;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s ease;
  box-shadow: 0 4px 12px rgba(26, 24, 20, 0.18);
  top: 0;
  left: 0;
}
.learn-tooltip.visible { opacity: 1; }

/* ── Map highlight styles for Learn view ──────────────────────── */
body.view-learn .country:hover,
.country.hover {
  fill: var(--land-hover);
}
.country.pinned {
  fill: var(--highlight);
  stroke: var(--accent-deep);
  stroke-width: 1;
}
.country.match {
  fill: var(--correct-soft);
  stroke: var(--correct);
  stroke-width: 0.8;
}

/* When the user hovers the pinned country, give it a subtle bump but keep the
   pinned color — we don't want it to change to plain hover. */
.country.pinned:hover {
  fill: var(--highlight);
}

/* ── Round result emphasis ──────────────────────────────────────
   When the answer is revealed, the prompt-card itself takes on a
   wash of color so the feedback is impossible to miss. */

.prompt-card.result-correct {
  background: var(--correct-soft);
  border-color: var(--correct);
  animation: result-flash-correct 0.45s ease;
}
.prompt-card.result-wrong {
  background: #ecc8be;       /* soft terracotta wash, in keeping with the palette */
  border-color: var(--accent-deep);
  animation: result-flash-wrong 0.45s ease;
}

/* Subtle pulse so the user clearly sees the state change. */
@keyframes result-flash-correct {
  0%   { background: var(--paper-deep); }
  40%  { background: #c8d8a8; }   /* a touch deeper than --correct-soft */
  100% { background: var(--correct-soft); }
}
@keyframes result-flash-wrong {
  0%   { background: var(--paper-deep); }
  20%  { background: #e8b3a2; }
  40%  { background: #ecc8be; }
  100% { background: #ecc8be; }
}

/* The feedback line gets larger and bolder during the result window. */
.prompt-card.result-correct .prompt-feedback,
.prompt-card.result-wrong   .prompt-feedback {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0;
  font-variation-settings: 'opsz' 144;
}

/* Note shown in the Learn panel for entities with limited recognition. */
.learn-panel-note {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin: -0.75rem 0 1rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--rule);
}

/* ── Sea labels ─────────────────────────────────────────────────
   Rendered as <text> elements inside the same zoom group as the map,
   so they pan and zoom with the countries. Italic, blue-grey, low-contrast
   — they should read as cartography, not UI text. Visible only in Learn,
   and only at the density tier the user has selected. */
.sea-label {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  fill: #4a6a82;                /* muted blue-grey, evokes traditional atlas */
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 2.5px;           /* halo so labels stay readable over coastlines */
  stroke-linejoin: round;
  letter-spacing: 0.04em;
  user-select: none;
  pointer-events: none;
  opacity: 0;                    /* hidden by default; rules below opt in */
  transition: opacity 0.25s ease;
}

/* Show labels by tier, only in Learn view, only at the chosen density.
   The four density classes (labels-none, -minimal, -educational, -full) are
   set by applyLabelDensity() on <body>. */
body.view-learn.labels-minimal    .sea-label.sea-ocean,
body.view-learn.labels-educational .sea-label.sea-ocean,
body.view-learn.labels-educational .sea-label.sea-sea,
body.view-learn.labels-full       .sea-label { opacity: 1; }

/* Hide labels that are too small for the current zoom level — the
   scale-suppression rule of traditional cartography. This wins over the
   density tier rules above so a strait that the user has opted to show
   (via labels-full) still stays hidden until they zoom in enough. */
body.view-learn .sea-label.below-min-zoom { opacity: 0; }

/* Hide labels that overlap a higher-priority label in screen space.
   The class is set by resolveSeaLabelCollisions() in JS after each render
   pass. Same specificity as the density rules; later in the cascade so
   it wins. */
body.view-learn .sea-label.overlapped { opacity: 0; }

/* Tier-specific colours — oceans a touch lighter and bluer, gulfs/straits
   slightly faded to recede behind the more prominent seas. */
.sea-label.sea-ocean  { fill: #3a5d7d; letter-spacing: 0.18em; text-transform: uppercase; }
.sea-label.sea-sea    { fill: #4a6a82; }
.sea-label.sea-gulf   { fill: #5a7a92; }
.sea-label.sea-strait { fill: #6c8aa0; font-style: italic; }