/* The maps drawn by ECMap (scripts/mapcore.js) - Map Speed, and the map questions of tests and Spin to Win: the sea, the
   places (asked ones a warm sand, other countries lighter, territories gray), the dots on small places, names written on
   the map, and the states a page sets: picked (blue), found (green), wrong (light red), missed (red). */
.ec-ms-svg, .ec-map { display: block; width: 100%; height: auto; border: 1px solid var(--ec-line); border-radius: 12px; background: #e6f0fb;
	touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.ec-ms-svg:active, .ec-map:active { cursor: grabbing; }
.ec-ms-sea { fill: #e6f0fb; }
/* the globe: its own ocean, outlined, on a neutral background, so it doesn't melt into the box around it */
.ec-map.is-globe { background: #f3f4f6; }
.ec-map.is-globe .ec-ms-sea { fill: #bcd8f2; stroke: #7fa7cc; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.ec-ms-place { stroke: #fff; stroke-width: .7px; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .15s; }
.ec-ms-place.is-asked { fill: #f2c9a8; }
.ec-ms-place.is-country { fill: #e6ddd3; }
.ec-ms-place.is-other { fill: #d8d8d8; }
@media (hover: hover) { .ec-ms-place.is-asked:hover, .ec-ms-place.is-country:hover { fill: #e8a774; } }
.ec-ms-place.is-picked { fill: #2a6bbf !important; } /* blue: red means missed */
.ec-ms-place.is-found { fill: #66bb6a !important; }
.ec-ms-place.is-wrong { fill: #ff8a80 !important; }
.ec-ms-place.is-missed { fill: #d64541 !important; }
.ec-ms-place.is-highlight { fill: #f5b82e !important; } /* a test or quiz question's place */
/* the keyboard's place (mapcore.js: arrow keys), while the map has the keyboard */
.ec-map:focus { outline: none; }
.ec-map:focus-visible { outline: 3px solid #1f5fae; outline-offset: 2px; }
.ec-map:focus-visible .ec-ms-place.is-kbd { stroke: #102a56; stroke-width: 3.5px; }
.ec-map:focus-visible .ec-ms-dot.is-kbd .ec-ms-dot-mark { stroke: #102a56; stroke-width: 3.5px; }
/* a small place's dot: a visible mark and a bigger invisible circle to tap (both sized in mapspeed.js render()) */
.ec-ms-dot { cursor: pointer; }
.ec-ms-dot-hit { fill: transparent; }
.ec-ms-dot-mark { fill: #2a6bbf; fill-opacity: .75; stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.ec-ms-dot.is-found .ec-ms-dot-mark { fill: #2e8b32; fill-opacity: 1; }
.ec-ms-dot.is-missed .ec-ms-dot-mark, .ec-ms-dot.is-wrong .ec-ms-dot-mark { fill: #d64541; fill-opacity: 1; }
.ec-ms-dot.is-highlight .ec-ms-dot-mark { fill: #f5b82e; fill-opacity: 1; }
/* a map that only shows a place (a question's highlighted one): no dots to tap but that place's own */
.ec-map.is-quiet .ec-ms-dot:not(.is-highlight):not(.is-found) { display: none !important; }
.ec-map.is-quiet .ec-ms-place { cursor: default; }
.ec-ms-dot.is-picked .ec-ms-dot-mark { fill: #1f5fae; fill-opacity: 1; }
/* names of the places not found */
.ec-ms-label { fill: #8e1f1a; font-family: "Lato", sans-serif; font-weight: 700; text-anchor: middle; dominant-baseline: middle;
	paint-order: stroke; stroke: #fff; stroke-linejoin: round; pointer-events: none; }