/* Globe Trotter's map layers (geo_map.js). Static paint only: every beat is an
   opacity change on a whole layer, so nothing here repaints while it moves. */
.geo-map { position: relative; aspect-ratio: var(--geo-aspect, 860 / 920); overflow: hidden; background: var(--map-sea); }
.geo-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.geo-hl-layer { animation: geo-breathe 1.8s ease-in-out infinite; }
.geo-ok-layer, .geo-pill-layer, .geo-labels { opacity: 0; transition: opacity 600ms var(--ease-out); }
.geo-map.is-reveal .geo-hl-layer { animation: none; opacity: 0; transition: opacity 600ms var(--ease-out); }
.geo-map.is-reveal .geo-ok-layer, .geo-map.is-reveal .geo-pill-layer { opacity: 1; }
.geo-map.is-labelled .geo-labels { opacity: 1; }
.geo-map.is-still .geo-hl-layer { animation: none; }
@keyframes geo-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }
@media (prefers-reduced-motion: reduce) { .geo-hl-layer { animation: none; } }

.geo-hatch-bg { fill: var(--map-hl); }
.geo-hatch-line { fill: #cfc4ea; }
.geo-halo { fill: none; stroke: var(--map-halo); stroke-width: 5; stroke-linejoin: round; }
.geo-hl { stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.geo-ok { fill: var(--map-ok); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }

/* The phone's zoomed view (opts.focus): a frame in the map's own shape, sized
   by its container's height, and one static transform on everything inside. */
.geo-frame { position: relative; height: 100%; max-width: 100%; aspect-ratio: var(--geo-aspect, 860 / 920);
  margin: 0 auto; overflow: hidden; background: var(--map-sea); }
.geo-zoom { position: absolute; inset: 0; transform-origin: 0 0; }
/* Lit solid, not hatched, with a gold edge and a ring: at phone size a hatch
   on a small country read as a pale sliver (CW, 2026-10-23). The fill stays
   near-white so it never reads as answer D's gold card. */
.geo-focus .geo-hl { fill: #fff7e0; stroke: var(--gold, #f5b33c); stroke-width: 2.5; }
.geo-target-ring { fill: none; stroke: #fff; }

.geo-inset { position: absolute; border-radius: 50%; overflow: hidden; }
.geo-inset .geo-layer { width: 100%; height: 100%; }
.geo-inset .geo-sea { fill: var(--map-sea); }
.geo-inset .geo-ctx { fill: var(--map-ctx); stroke: rgba(168, 85, 247, 0.3); stroke-width: 0.6; }
.geo-inset .geo-land { fill: var(--map-land); stroke: rgba(196, 160, 255, 0.85); stroke-width: 1.4; stroke-linejoin: round; }
.geo-inset .geo-halo { stroke-width: 7; }
.geo-inset .geo-hl, .geo-inset .geo-ok { stroke-width: 3; }
.geo-spot { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 3 3; }
.geo-ring { fill: none; stroke: #fff; stroke-width: 3; }
.geo-cap { fill: var(--muted); font: 900 14px var(--font-display); letter-spacing: 0.18em; text-anchor: middle; }

.geo-lead { stroke: #fff; stroke-width: 1.6; opacity: 0.8; }
.geo-dot { fill: #fff; stroke: var(--map-halo); stroke-width: 1.5; }
.geo-name { fill: #e6deff; font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em;
  paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.geo-pill-bg { fill: var(--map-pill); stroke: var(--map-ok); stroke-width: 2.5; }
.geo-pill-text { fill: #fff; font-family: var(--font-display); font-weight: 900; letter-spacing: 0.05em; }
.geo-check { fill: var(--map-ok); }