:root {
  --ocean-deep: #0b1e33;
  --land: #e8dcc4;
  --land-correct: #5fbf6f;
  --land-wrong: #d9554a;
  --border-line: #8a7a5c;
  --ink: #e9eef4;
  --ink-dim: #8fa3b8;
  --panel: #101a27;
  --panel-2: #16233490;
  --accent: #f5c96b;
  --accent-dark: #1a1206;
  --brand-green: #218d4a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html {
  /* Native pinch/double-tap page zoom is disabled everywhere by default —
     relying on the viewport meta's user-scalable=no alone isn't reliable,
     many mobile browsers ignore it for accessibility. .screen re-enables
     vertical touch scrolling below; the map SVG handles its own zoom/pan
     entirely in JS and stays touch-action: none. */
  touch-action: none;
  overflow: hidden;
}
body {
  /* --app-height is kept in sync with window.visualViewport's actual
     visible height (see main.js) — iOS Safari doesn't reliably shrink
     100% / 100dvh to account for the on-screen keyboard, which left a
     dead gap between the compact quiz content and the keyboard instead
     of letting content grow to fill the true visible area. Falls back
     to 100% before JS runs or on browsers without visualViewport. */
  height: var(--app-height, 100%);
  /* overflow: hidden alone doesn't stop iOS Safari's own "scroll the
     focused input into view" behavior on focus — it still pans the page
     even though there's nothing meant to be scrollable, leaving content
     stranded above the visible area until the user manually drags it
     back. Pinning body with position: fixed removes any scrollable
     document for iOS to pan in the first place. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--ocean-deep);
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

button, [role="button"], input[type="submit"], .region-card, .autocomplete-item {
  cursor: pointer;
}

.app-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px 0;
}

.app-logo {
  display: block;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.app-top-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
header h1 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
header h1 span { color: var(--brand-green); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.queue-badge {
  background: var(--panel);
  border: 1px solid rgba(232, 220, 196, 0.25);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  display: none;
  align-items: center;
  gap: 6px;
}
.queue-badge.show { display: inline-flex; }

.icon-btn {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid rgba(232, 220, 196, 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
}
.icon-btn:hover { border-color: rgba(245, 201, 107, 0.6); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

main {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  min-height: 0;
  display: none;
  flex-direction: column;
  padding: 12px 18px 18px;
  overflow-y: auto;
  touch-action: pan-y;
}
.screen.active { display: flex; }

/* ---- Region select ---- */
/* mode-toggle-row lives beside the header (not inside #screen-regions) so
   the app-logo can stretch to match their combined height; it only makes
   sense on the region-select screen though, so mirror that screen's .active
   state here via :has() instead of duplicating the show/hide logic in JS.
   #mode-toggle (the actual role="tablist") only wraps the three mode tabs —
   the Globe button sits beside it as a plain sibling button, not a fourth
   tab, so the tablist's accessibility semantics stay correct. */
.mode-toggle-row {
  display: none;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 8px;
}
body:has(#screen-regions.active) .mode-toggle-row {
  display: flex;
}
.mode-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 8px;
}
.mode-btn {
  background: var(--panel);
  color: var(--ink-dim);
  border: 1px solid rgba(232, 220, 196, 0.2);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
.mode-btn:hover { border-color: rgba(245, 201, 107, 0.6); }
.mode-btn.active {
  background: var(--accent);
  color: var(--accent-dark);
  border-color: var(--accent);
}
.mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#screen-regions .subtitle {
  color: var(--ink-dim);
  font-size: 13px;
  margin-bottom: 16px;
}
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.region-card {
  background: var(--panel);
  border: 1px solid rgba(232, 220, 196, 0.18);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: left;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}
.region-card .count {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-dim);
}
.region-card:hover { border-color: rgba(245, 201, 107, 0.6); }
.region-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.region-card.review {
  border-color: rgba(217, 85, 74, 0.5);
}

/* ---- Quiz screen ---- */
#screen-quiz {
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding-top: 10px;
}
.quiz-meta {
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--ink-dim);
}
.quiz-meta span:first-child {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}
.quiz-meta span:last-child {
  font-size: 12.5px;
}
.shape-stage {
  /* flex: 1 fills whatever space is actually left above the answer row —
     safe now that body's height tracks the real visualViewport (see
     main.js), so this box is already correctly shrunk to end right at
     the top of the keyboard, not the full (keyboard-unaware) screen
     height. The shape fills it entirely and doesn't need to be square. */
  width: 100%;
  max-width: 520px;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#shape-svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
  touch-action: none;
}
#shape-svg path {
  fill: var(--land);
  stroke: #000;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill 0.25s ease;
}
#shape-svg path.correct { fill: var(--land-correct); }
#shape-svg path.wrong { fill: var(--land-wrong); }

/* ---- Map screen (Country Geography) ---- */
#screen-map {
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding-top: 10px;
}
.map-stage {
  width: 100%;
  max-width: 640px;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#region-map-svg { width: 100%; height: 100%; display: block; shape-rendering: geometricPrecision; touch-action: none; }
#region-map-svg path {
  fill: var(--land);
  stroke: var(--ocean-deep);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 0.2s ease;
  outline: none;
}
#region-map-svg path:focus { outline: none; }
#region-map-svg path:hover { fill: var(--accent); }
#region-map-svg path.selected { fill: var(--accent); }
#region-map-svg path.correct { fill: var(--land-correct); cursor: default; pointer-events: none; }
#region-map-svg path.wrong { fill: var(--land-wrong); cursor: default; pointer-events: none; }
#region-map-svg path.locked { fill: #1a1a1a; cursor: default; pointer-events: none; }
#region-map-svg path.given { fill: var(--accent); cursor: pointer; }
#region-map-svg path.dimmed { fill: var(--panel); stroke: rgba(232, 220, 196, 0.12); cursor: default; pointer-events: none; }

.region-map-label {
  font-size: 14px;
  font-weight: 700;
  fill: var(--ocean-deep);
  paint-order: stroke;
  stroke: var(--ink);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

.answer-row {
  width: 100%;
  max-width: 520px;
  position: relative;
  display: flex;
  gap: 8px;
}
#answer-input, #map-answer-input {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid rgba(232, 220, 196, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
}
.answer-submit { flex: 0 0 auto; padding: 12px 16px; }
#answer-input:focus, #map-answer-input:focus { outline: none; border-color: var(--accent); }
#answer-input.correct, #map-answer-input.correct { border-color: var(--land-correct); }
#answer-input.wrong, #map-answer-input.wrong { border-color: var(--land-wrong); }
#map-answer-input:disabled { opacity: 0.5; cursor: not-allowed; }

.autocomplete-list {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--panel);
  border: 1px solid rgba(232, 220, 196, 0.25);
  border-radius: 10px;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  z-index: 5;
}
.autocomplete-list.show { display: block; }
.autocomplete-item {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ink);
}
.autocomplete-item:hover, .autocomplete-item.active {
  background: rgba(245, 201, 107, 0.15);
}

.feedback-row {
  width: 100%;
  max-width: 520px;
  min-height: 28px;
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-dim);
}
.feedback-row.correct { color: var(--land-correct); }
.feedback-row.wrong { color: var(--land-wrong); }

.quiz-actions {
  width: 100%;
  max-width: 520px;
  display: flex;
  gap: 10px;
}

/* ---- Round summary ---- */
#screen-summary { align-items: stretch; gap: 14px; }
#screen-summary h2 { font-size: 20px; }
.summary-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.stat-tile {
  background: var(--panel);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 100px;
}
.stat-tile .num { font-size: 22px; font-weight: 700; }
.stat-tile .label { font-size: 11.5px; color: var(--ink-dim); }
.miss-list { display: flex; flex-wrap: wrap; gap: 8px; }
.miss-chip {
  background: rgba(217, 85, 74, 0.15);
  border: 1px solid rgba(217, 85, 74, 0.4);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
}

.primary-btn {
  background: var(--accent);
  color: var(--accent-dark);
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
}
.primary-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.secondary-btn {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(232, 220, 196, 0.3);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
}

/* ---- Explore globe ---- */
#screen-globe { align-items: center; justify-content: flex-start; gap: 10px; padding-top: 10px; }
#screen-globe .quiz-meta { max-width: 640px; }
.globe-toolbar { display: flex; align-items: center; gap: 8px; }
.toggle-btn {
  background: var(--panel);
  color: var(--ink-dim);
  border: 1px solid rgba(232, 220, 196, 0.25);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
}
.toggle-btn:hover { border-color: rgba(245, 201, 107, 0.6); }
.toggle-btn.active {
  background: var(--accent);
  color: var(--accent-dark);
  border-color: var(--accent);
}
.toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.globe-stage {
  width: 100%;
  max-width: 640px;
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#globe-svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
#globe-svg.dragging { cursor: grabbing; }
#globe-svg .globe-sphere { fill: var(--ocean-deep); stroke: rgba(232, 220, 196, 0.35); stroke-width: 1; }
#globe-svg .globe-graticule { fill: none; stroke: rgba(233, 238, 244, 0.07); stroke-width: 0.6; pointer-events: none; }
#globe-svg .globe-borders { fill: none; stroke: var(--border-line); stroke-width: 0.7; stroke-linejoin: round; pointer-events: none; }
#globe-svg .globe-country { fill: var(--land); stroke: none; transition: fill 0.15s ease; }
#globe-svg .globe-country:hover { fill: var(--accent); }
#globe-svg .globe-country.selected { fill: var(--accent); }
#globe-svg .globe-label {
  font-size: 8px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--ocean-deep);
  paint-order: stroke;
  stroke: var(--ink);
  stroke-width: 2px;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

.globe-readout {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid rgba(232, 220, 196, 0.25);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.globe-readout.show { opacity: 1; }
.globe-readout .hint { color: var(--ink-dim); font-weight: 400; font-size: 12px; margin-right: 8px; }

.globe-regions {
  width: 100%;
  max-width: 640px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px 4px;
}
.globe-regions::-webkit-scrollbar { display: none; }
.globe-region-btn {
  flex: 0 0 auto;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid rgba(232, 220, 196, 0.2);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
}
.globe-region-btn:hover { border-color: rgba(245, 201, 107, 0.6); }
.globe-region-btn.active {
  background: var(--accent);
  color: var(--accent-dark);
  border-color: var(--accent);
  font-weight: 600;
}
.globe-region-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Account screen ---- */
#screen-account { max-width: 420px; gap: 12px; }
#screen-account p { color: var(--ink-dim); font-size: 13px; }
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label { font-size: 12.5px; color: var(--ink-dim); }
.field input {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid rgba(232, 220, 196, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
}
.field input:focus { outline: none; border-color: var(--accent); }
.account-status {
  font-size: 12.5px;
  color: var(--ink-dim);
  min-height: 18px;
}
.account-status.error { color: var(--land-wrong); }
.account-status.ok { color: var(--land-correct); }

.map-attribution {
  font-size: 11.5px;
  color: var(--ink-dim);
}
.map-attribution a { color: inherit; }

@media (max-width: 480px) {
  .region-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  /* Not enough width here for the logo to reserve a whole column beside the
     mode-toggle row (3 pills) without squeezing it onto two lines, so cap
     the logo back down to roughly the header's own row height. */
  .app-top { gap: 6px; }
  .app-logo { max-width: 32px; max-height: 32px; }

  /* Four items (input + Submit + Hint + End round) no longer fit on one
     row without squeezing the text input down to a few characters wide —
     give the input its own full-width row and wrap the buttons below it. */
  .answer-row { flex-wrap: wrap; }
  #answer-input, #map-answer-input { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}