/* The map games (Where in Ireland?, the world map): the map, the picked shape and the hint. Shared rules are in ../shared/base.css. */

.map { margin: 8px auto 0; max-width: 460px; display: flex; justify-content: center; }
.map svg { display: block; width: auto; max-width: 100%; height: auto; max-height: max(300px, calc(100vh - 250px)); max-height: max(300px, calc(100dvh - 250px)); touch-action: manipulation; }
.map path { fill: var(--raised); stroke: var(--ground); stroke-width: 1.2; cursor: pointer; }
.map path:focus { outline: none; }
.map path:focus-visible { stroke: var(--accent); stroke-width: 3; }
@media (hover: hover) { .map path:hover { fill: var(--edge); } }
.map path.hint { fill: var(--edge); }
.map path.picked { fill: var(--accent); }
/* right and wrong differ in outline as well as colour: solid for the answer, dashed for a wrong pick */
.map path.right { fill: var(--right); stroke: var(--text); stroke-width: 3; }
.map path.wrong { fill: var(--wrong); stroke: var(--text); stroke-width: 3; stroke-dasharray: 5 4; }
.map.locked path { cursor: default; }
.map path.off { fill: var(--ground); stroke: var(--edge); cursor: default; pointer-events: none; }

.picked { min-height: 1.5em; margin: 8px 0; color: var(--muted); font-weight: 600; }
.answer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html { scroll-padding-bottom: 150px; }  /* a focused county never sits under the pinned buttons */
#map-actions { position: sticky; bottom: 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--ground); z-index: 1; }
.answer-actions #confirm { flex: 1 1 100%; }