/* Map Speed (index.php, scripts/mapspeed.js): the map buttons, Study / Play, the side panel and the map. On the shared
   play-page shell (.ec-play, css/ui.css): Map Speed's color (.ec-t-6) for its icon only; buttons in the site's blue, red only for
   what was missed (and the last seconds). */
.ec-ms-maps { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.ec-ms-map { padding: 6px 12px; border: 1px solid var(--ec-line); border-radius: 999px; background: var(--ec-surface); color: var(--ec-ink-2);
	font: 700 14px "Lato", sans-serif; text-decoration: none; }
.ec-ms-map:hover { border-color: var(--ec-blue-ink); color: var(--ec-blue-ink); text-decoration: none; }
.ec-ms-map.is-on { background: var(--ec-blue-soft); border-color: var(--ec-blue-ink); color: var(--ec-blue-ink); }

.ec-ms-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.ec-ms-bar .ec-seg button[aria-selected="true"] { background: var(--ec-blue-soft); color: var(--ec-blue-ink); }
.ec-ms-bar .ec-play-score { margin: 0; }

.ec-ms { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.ec-ms-side { display: grid; gap: 12px; }
.ec-ms-side section { display: grid; gap: 10px; }
.ec-ms-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ec-ms-card { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--ec-line); border-radius: 12px; background: var(--ec-surface); }
.ec-ms-card p { margin: 0; }
.ec-ms-name { font: 600 20px "Rubik", sans-serif; color: var(--ec-ink); }
.ec-ms-k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ec-ink-2); }
.ec-ms-flag { width: 100%; max-width: 200px; height: auto; border: 1px solid var(--ec-line); border-radius: 4px; }
.ec-ms-flag--sm { max-width: 72px; display: block; }

.ec-ms-timer { font: 600 44px/1 "Rubik", sans-serif; color: var(--ec-blue-ink); text-align: center; padding: 8px; border-radius: 12px; background: var(--ec-blue-soft); }
.ec-ms-timer.is-low { color: #fff; background: #b0362b; }
.ec-ms-find { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ec-ms-find li { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; border: 1px solid var(--ec-line); border-radius: 8px;
	background: var(--ec-surface); font-weight: 700; font-size: 14px; line-height: 1.2; }
.ec-ms-find li.is-found { opacity: .45; text-decoration: line-through; background: var(--ec-green-soft); }

.ec-ms-mapwrap { position: relative; min-width: 0; }
.ec-ms-svg { 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 { 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-ms-svg.is-globe { background: #f3f4f6; }
.ec-ms-svg.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: #7cc47f !important; }
.ec-ms-place.is-wrong { fill: #ff8a80 !important; }
.ec-ms-place.is-missed { fill: #d64541 !important; } /* where the ones not found were */
.ec-ms-dot { fill: #2a6bbf; fill-opacity: .6; stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; cursor: pointer; }
.ec-ms-dot.is-found { fill: #2e8b32; fill-opacity: 1; }
.ec-ms-dot.is-missed { fill: #d64541; fill-opacity: 1; }
/* under the map, not over it: any corner of it covers part of some map (Maine, on the US) */
.ec-ms-under { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 6px; }
.ec-ms-zoom { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
/* full screen (the Full screen button): Study / Play, the panel and the map as tall as the screen allows */
.ec-ms-stage:fullscreen { overflow: auto; padding: 16px 24px; background: var(--ec-bg, #fff); }
.ec-ms-stage:fullscreen .ec-ms { grid-template-columns: 280px minmax(0, 1fr); }
.ec-ms-stage:fullscreen .ec-ms-svg { height: calc(100vh - 150px); }
.ec-ms-stage:fullscreen .ec-ms-mapwrap { order: 0; }
.ec-ms-zoom .ec-btn { min-width: 36px; height: 36px; justify-content: center; }
.ec-ms-tip { margin: 0; font-size: 13px; color: var(--ec-ink-2); }

@media (max-width: 760px) {
	.ec-ms { grid-template-columns: 1fr; }
	.ec-ms-mapwrap { order: -1; }
	.ec-ms-find { grid-template-columns: 1fr 1fr 1fr; }
	.ec-ms-timer { font-size: 32px; }
}