/* The shared map (/js/geo/map.js, /js/geo/views.json): country states on the map.
   Put .geo-map and .view-<name> on the element loadMap() fills; the view's aspect-ratio, matching its
   viewBox so nothing shifts on load, is in the generated /css/geo-views.css.
   Existing tokens only; listed for design review. */

/* Tall views (South America, Africa on a wide column) are capped so the list and input stay close;
   the box then narrows to keep its aspect ratio, centered. The world view never reaches it. */
.geo-map { background: var(--surface); max-height: min(55vh, 640px); margin-inline: auto; }
.geo-map svg { width: 100%; height: 100%; }
.geo-map path { stroke: var(--surface); stroke-width: .6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.geo-map .na { fill: var(--surface-2); }           /* not an answer: muted, close to the sea */
.geo-map .c { fill: var(--line); }                  /* answer, not yet named */
.geo-map .tiny { fill: none; stroke: var(--line-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.geo-map .c.is-guessed { fill: var(--state-correct); }
.geo-map .tiny.is-guessed { stroke: var(--state-correct); }
.geo-map .c.is-missed { fill: var(--state-wrong); }
.geo-map .tiny.is-missed { stroke: var(--state-wrong); }

/* Points (addPoints), e.g. capitals: hidden until their country is named, or missed at the end */
.geo-map .pt { display: none; pointer-events: none; fill: var(--ink); stroke: var(--surface); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.geo-map .pt.is-guessed, .geo-map .pt.is-missed { display: inline; }
.geo-map .pt.is-missed { fill: var(--surface); stroke: var(--ink); }

/* After the game: names on hover or tap (revealNames) */
.geo-map svg.is-revealed .c { cursor: pointer; }
.geo-map svg.is-revealed .c:hover { opacity: .75; }