/* Europe Quiz. Layers, bottom to top: the map (#map: inline SVG, zoomed
   and panned by main.js; the page background is its sea, and the context
   land fades out at the edge of the drawn extent), the question card, the
   controls, and the transient toast and misclick label.

   Two layouts (LANDSCAPE in main.js is the same media query):
   - default (portrait, square-ish): card across the top, controls across
     the bottom; main.js fits the map into the band between them.
   - landscape: card top right, controls in a column bottom right; the map
     uses the full height (at the full view, the card covers only Russia).

   Theme: light tokens on :root, dark tokens for prefers-color-scheme: dark
   unless <html data-theme="light">, and for <html data-theme="dark"> (set
   by theme.js, which also handles the toggle). */

:root {
  color-scheme: light;
  --sea: #bfd9e7;
  --land: #e2ddd1;
  --land-line: #b5ad9e;
  --country: #fbf8f0;
  --country-hover: #efe7d6;
  --border: #7f8b91;
  --a: #74bf8f;
  --a-hover: #62b080;
  --b: #f2b661;
  --b-hover: #e7a74b;
  --pulse: #ffffff;
  --miss: #e35b4b;
  --ring: #33434b;
  --ring-halo: rgba(255, 255, 255, 0.85);
  --fg: #1d2a30;
  --muted: #5d6c73;
  --ok: #2c8a57;
  --bad: #c4473a;
  --panel: rgba(255, 253, 248, 0.93);
  --panel-line: rgba(60, 70, 80, 0.12);
  --shadow: 0 2px 10px rgba(30, 45, 55, 0.16);
  --btn-hover: rgba(255, 255, 255, 1);
  --label-bg: rgba(29, 42, 48, 0.92);
  --label-fg: #ffffff;
  --focus: #2f7fae;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sea: #0d1e2a;
    --land: #1a2932;
    --land-line: #2e414c;
    --country: #2b3e48;
    --country-hover: #375058;
    --border: #6b8794;
    --a: #3aa982;
    --a-hover: #48bc93;
    --b: #d49d45;
    --b-hover: #e5b05a;
    --pulse: #f0fff8;
    --miss: #ff7562;
    --ring: #e4eef2;
    --ring-halo: rgba(4, 11, 17, 0.8);
    --fg: #e4eef2;
    --muted: #8ea4ae;
    --ok: #5fd39e;
    --bad: #ff8c7a;
    --panel: rgba(13, 27, 37, 0.9);
    --panel-line: rgba(160, 200, 220, 0.12);
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    --btn-hover: rgba(24, 46, 60, 1);
    --label-bg: rgba(236, 244, 247, 0.95);
    --label-fg: #0d1e2a;
    --focus: #7cc4e8;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sea: #0d1e2a;
  --land: #1a2932;
  --land-line: #2e414c;
  --country: #2b3e48;
  --country-hover: #375058;
  --border: #6b8794;
  --a: #3aa982;
  --a-hover: #48bc93;
  --b: #d49d45;
  --b-hover: #e5b05a;
  --pulse: #f0fff8;
  --miss: #ff7562;
  --ring: #e4eef2;
  --ring-halo: rgba(4, 11, 17, 0.8);
  --fg: #e4eef2;
  --muted: #8ea4ae;
  --ok: #5fd39e;
  --bad: #ff8c7a;
  --panel: rgba(13, 27, 37, 0.9);
  --panel-line: rgba(160, 200, 220, 0.12);
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  --btn-hover: rgba(24, 46, 60, 1);
  --label-bg: rgba(236, 244, 247, 0.95);
  --label-fg: #0d1e2a;
  --focus: #7cc4e8;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sea);
  color: var(--fg);
  font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Touches pan and zoom the map: no page scrolling, zooming, selection
     or callouts. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

p {
  margin: 0;
}

/* ── Map ─────────────────────────────────────────────────────────────── */

#map {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#map svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#map svg.over {
  cursor: pointer;
}

#map svg.panning {
  cursor: grabbing;
}

/* Strokes keep their width in screen pixels at any zoom. */
#map path,
#map rect,
#map circle {
  vector-effect: non-scaling-stroke;
}

/* Fade at the edge of the drawn extent: land dissolves into the sea. */
#fade {
  pointer-events: none;
}

#fade stop {
  stop-color: var(--sea);
}

.fade-1 {
  stop-opacity: 0.84;
}

.fade-2 {
  stop-opacity: 0.5;
}

.fade-3 {
  stop-opacity: 0.16;
}

.fade-4 {
  stop-opacity: 0;
}

#fade-t {
  fill: url(#fade-gt);
}

#fade-b {
  fill: url(#fade-gb);
}

#fade-l {
  fill: url(#fade-gl);
}

#fade-r {
  fill: url(#fade-gr);
}

#land {
  fill: var(--land);
  stroke: var(--land-line);
  stroke-width: 0.6px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* --fill: the country's resting colour (the blink returns to it). */
#countries path {
  --fill: var(--country);
  fill: var(--fill);
  stroke: var(--border);
  stroke-width: 0.75px;
  stroke-linejoin: round;
}

#countries path.hover {
  --fill: var(--country-hover);
}

#countries path.c1 {
  --fill: var(--a);
}

#countries path.c1.hover {
  --fill: var(--a-hover);
}

#countries path.c2 {
  --fill: var(--b);
}

#countries path.c2.hover {
  --fill: var(--b-hover);
}

/* A correct answer: the new colour fades in from a bright flash. */
#countries path.pulse {
  animation: pulse 0.7s ease-out;
}

/* A misclick: the picked country blinks twice. */
#countries path.flash {
  animation: flash 0.5s linear 2;
}

@keyframes pulse {
  from {
    fill: var(--pulse);
  }
}

@keyframes flash {
  0%,
  55% {
    fill: var(--miss);
  }
  65%,
  100% {
    fill: var(--fill);
  }
}

/* Rings for countries too small to tap at the full view (main.js hides a
   ring once its country is big enough on screen). The hit area is larger
   than the ring and handled in main.js. */
#markers {
  pointer-events: none;
}

#markers .off {
  display: none;
}

.marker-halo {
  fill: none;
  stroke: var(--ring-halo);
  stroke-width: 4px;
}

.marker {
  fill: var(--country);
  fill-opacity: 0;
  stroke: var(--ring);
  stroke-width: 1.5px;
}

.marker.c1 {
  fill: var(--a);
  fill-opacity: 1;
}

.marker.c2 {
  fill: var(--b);
  fill-opacity: 1;
}

.marker.hover {
  stroke-width: 2.5px;
}

.marker.flash {
  animation: flash-ring 0.5s linear 2;
}

@keyframes flash-ring {
  0%,
  55% {
    fill: var(--miss);
    fill-opacity: 1;
    stroke: var(--miss);
  }
}

/* ── Question card ───────────────────────────────────────────────────── */

#card,
#controls,
#toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  box-sizing: border-box;
}

#card {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  padding: 9px 16px 10px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 20px;
}

.round {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--a);
  box-shadow: 0 0 0 1px var(--panel-line);
}

:root[data-round="capitals"] .swatch {
  background: var(--b);
}

#progress {
  color: var(--fg);
  letter-spacing: 0.02em;
}

.score {
  display: flex;
  gap: 12px;
  font-size: 14px;
  white-space: nowrap;
}

.ok {
  color: var(--ok);
}

.bad {
  color: var(--bad);
}

.num {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

#prompt {
  height: 36px;
  margin-top: 3px;
  font-size: clamp(21px, 5.8vw, 28px);
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Toast and misclick label ────────────────────────────────────────── */

#toast {
  top: calc(env(safe-area-inset-top, 0px) + 10px + 82px);
  width: auto;
  max-width: min(480px, calc(100% - 40px));
  padding: 7px 14px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow);
  font-size: 14px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s, visibility 0s 0.25s;
}

#toast.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s;
}

#label {
  position: fixed;
  top: 0;
  left: 0;
  max-width: calc(100vw - 16px);
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--label-bg);
  color: var(--label-fg);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0s 0.2s;
}

#label.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.12s;
}

/* ── Controls ────────────────────────────────────────────────────────── */

#controls {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.group {
  display: flex;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--fg);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn:hover {
  background: var(--btn-hover);
}

.btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Zoom limit reached (aria-disabled keeps the button focusable). */
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

.btn[aria-disabled="true"]:hover {
  background: var(--panel);
}

.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sun,
:root[data-theme="dark"] .icon-moon {
  display: none;
}

:root[data-theme="dark"] .icon-sun {
  display: block;
}

.btn-text {
  display: none;
}

/* Reset asks once: the first press arms it for a few seconds. */
#reset.armed {
  color: var(--bad);
  border-color: currentColor;
}

#reset.armed .btn-text {
  display: inline;
}

@media (pointer: fine) {
  .btn {
    min-width: 40px;
    height: 40px;
  }
}

/* ── Landscape ───────────────────────────────────────────────────────── */

@media (min-aspect-ratio: 4/3) {
  #card,
  #toast {
    left: auto;
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    transform: none;
    width: min(340px, 36vw);
  }

  #card {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
  }

  #prompt {
    font-size: clamp(19px, 2.4vw, 26px);
  }

  #toast {
    top: calc(env(safe-area-inset-top, 0px) + 12px + 82px);
    max-width: none;
  }

  #controls {
    left: auto;
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    transform: none;
    width: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
  }

  .group {
    flex-direction: column;
    align-items: flex-end;
  }

  .group:last-child {
    flex-direction: column-reverse;
  }
}

/* ── Reduced motion: no transitions, no pulse; a misclick is a steady
   highlight instead of a blink (main.js removes it with the label). ── */

@media (prefers-reduced-motion: reduce) {
  #toast,
  #toast.show,
  #label,
  #label.show {
    transition: none;
  }

  #countries path.pulse {
    animation: none;
  }

  #countries path.flash {
    animation: none;
    fill: var(--miss);
  }

  .marker.flash {
    animation: none;
    fill: var(--miss);
    fill-opacity: 1;
    stroke: var(--miss);
  }
}

/* ── Misc ────────────────────────────────────────────────────────────── */

/* Safe-area insets (notches, home indicator), read by main.js. */
#safe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  visibility: hidden;
  pointer-events: none;
}

.noscript {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
}

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