/* Map quizzes use the available window while keeping navigation and the prompt. */
main:has(.quiz-panel .map-answer) {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 10px 0 !important;
}
body:has(.quiz-panel .map-answer) footer { display: none; }
.quiz-panel:has(.map-answer) {
    --map-ocean: #102b43;
    --map-land: #7897ae;
    --map-border: #d3e0e9;
    --map-context: #29475e;
    position: relative;
    display: grid;
    grid-template-rows: auto 4px auto minmax(0, 1fr);
    gap: 9px !important;
    width: 100%;
    max-width: none !important;
    height: calc(100dvh - 108px);
    min-height: 460px;
    padding: 12px !important;
    border-radius: 18px;
    animation: none;
}
.quiz-panel:has(.map-answer) .quiz-head { align-items: center; gap: 8px; font-size: .88rem; }
.quiz-panel:has(.map-answer) .quiz-head > div:first-child { display: flex; align-items: center; gap: 12px; }
.quiz-panel:has(.map-answer) .quiz-head .button { min-height: 34px; height: 34px; padding: 4px 12px; }
.quiz-panel:has(.map-answer) .progress { height: 4px; margin: 0; }
.quiz-panel:has(.map-answer) .question {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 0 !important; min-height: 42px;
}
.quiz-panel:has(.map-answer) .question h1 { margin: 0; font-size: clamp(1.1rem, 2vw, 1.65rem); }
.quiz-panel:has(.map-answer) .question .map-question-flag {
    width: 52px; height: 34px; margin: 0; object-fit: contain;
}
.quiz-panel:has(.map-answer) #timer {
    position: absolute; right: 20px; top: 66px; margin: 0;
    padding: 3px 8px; font-size: .8rem;
}
.quiz-panel:has(.map-answer) .feedback {
    position: absolute; top: 126px; left: 50%; transform: translateX(-50%);
    z-index: 8; width: max-content; max-width: calc(100% - 160px);
    display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0 !important;
    padding: 8px 18px; border: 1px solid #77a5be; border-radius: 12px;
    background: #0b2037ed; color: #f1f7fc; font-size: .95rem;
    pointer-events: none; box-shadow: 0 6px 20px #02081735;
}
.quiz-panel:has(.map-answer) .feedback:empty { display: none; }
.quiz-panel:has(.map-answer) .feedback.is-correct { border-color: #55d6be; }
.quiz-panel:has(.map-answer) .feedback.is-wrong { border-color: #ee8595; }
.quiz-panel:has(.map-answer) .feedback .auto-next { flex: 0 0 100%; font-size: .78rem; color: #c1d1e1; }
.quiz-panel:has(.map-answer) .feedback .button { pointer-events: auto; min-height: 36px; }
.quiz-panel .map-answer {
    grid-row: 4; position: relative; width: 100%; min-height: 0;
    margin: 0; padding: 0; overflow: hidden; border: 1px solid #496984;
    border-radius: 12px; background: var(--map-ocean);
}
.map-stage { position: relative; width: 100%; height: 100%; min-height: 0; }
.quiz-panel .map-answer .country-map {
    display: block; width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important; aspect-ratio: auto;
    margin: 0 !important; border: 0; border-radius: 0; background: var(--map-ocean) !important;
    touch-action: none; -webkit-tap-highlight-color: transparent; outline: none;
}
.country-map:focus-visible { outline: 2px solid #ffd166 !important; outline-offset: -3px; }
.map-ocean { fill: var(--map-ocean); }
.map-context-shape { fill: var(--map-context); stroke: #7897ae55; stroke-width: .45; pointer-events: none; }
.map-country { cursor: pointer; outline: none; }
.map-shape { fill: var(--map-land); stroke: var(--map-border); stroke-width: .65; transition: fill .16s; pointer-events: visibleFill; }
.country-map .map-country .map-shape {
    filter: none !important;
    transition: fill .16s, stroke .16s;
}
.country-map.panning .map-shape { transition: none; }
.map-selection-circle {
    fill: #173d5740; stroke: #a7ebea; stroke-width: 1.6;
    pointer-events: all; transition: fill .16s, stroke .16s;
}
.map-marker-leader { stroke: #a7ebea; stroke-width: 1; pointer-events: none; }
.map-anchor-dot { fill: #e1ffff; pointer-events: none; }
.map-country.map-hovered :is(.map-shape, .map-selection-circle),
.map-country:focus-visible :is(.map-shape, .map-selection-circle) {
    fill: #4c9caa !important; stroke: #e2ffff !important; stroke-width: 1.6;
}
.map-country:is(.selected-correct, .solved-correct) :is(.map-shape, .map-selection-circle) {
    fill: #28a978 !important; stroke: #adffe0 !important; stroke-width: 1.6;
}
.map-country.selected-wrong :is(.map-shape, .map-selection-circle) {
    fill: #dc5067 !important; stroke: #ffd6de !important; stroke-width: 1.6;
}
.map-country.revealed-correct :is(.map-shape, .map-selection-circle) {
    fill: #a16ae8 !important; stroke: #eedcff !important; stroke-width: 2;
    animation: map-correction-blink 1.2s ease-in-out infinite;
}
.country-map .map-country.question-highlight :is(.map-shape, .map-selection-circle) {
    fill: #e9bd64 !important;
    stroke: #fff0bf !important;
    stroke-width: 2 !important;
}
.quiz-panel:has(.map-identify) {
    grid-template-rows: auto 4px auto minmax(220px, 1fr) auto;
    min-height: 580px;
}
.quiz-panel:has(.map-identify) .typed-answers {
    grid-row: 5;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}
.quiz-panel:has(.map-identify) .typed-answer-field { flex: 1; min-width: 0; }
.quiz-panel:has(.map-identify) .typed-answers .button { flex: 0 0 auto; }
.map-identify .map-country { cursor: grab; }
@media (max-width: 560px) {
    .quiz-panel:has(.map-identify) .typed-answers { gap: 8px; }
    .quiz-panel:has(.map-identify) .typed-answers .button { padding-inline: 12px; font-size: .8rem; }
}
@keyframes map-correction-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}
.country-map.panning, .country-map.panning .map-country { cursor: grabbing; }
.map-controls {
    position: absolute; z-index: 6; top: 12px !important; right: 12px !important;
    display: grid; gap: 4px; padding: 4px; border: 1px solid #55738d;
    border-radius: 12px; background: #0b2139ec; box-shadow: 0 4px 14px #02081735;
}
.map-controls button { width: 38px; height: 38px; border: 0; background: transparent; color: #edf6ff; }
.map-controls button:hover { background: #ffffff16; }
.map-hint {
    position: absolute; bottom: 10px; left: 12px; margin: 0;
    padding: 5px 9px; border-radius: 7px; background: #0b2139d9;
    color: #c9dce9; font-size: .72rem; pointer-events: none;
}
.map-loading, .map-error { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; color: #c1d1e1; }
.map-error { color: #ffc3cd; }
main:has(.map-answer) > [data-slot=alert] { margin-bottom: 6px; padding: 8px 12px; }
main:has(> [data-slot=alert]) .quiz-panel:has(.map-answer) { height: calc(100dvh - 180px); }
[data-theme=light] .quiz-panel:has(.map-answer) {
    --map-ocean: #c7dce9; --map-land: #7e9eb5; --map-border: #f6fafc; --map-context: #afc3d2;
}
[data-theme=light] .map-selection-circle { fill: #ecf7fb40; stroke: #245c76; }
[data-theme=light] .map-marker-leader { stroke: #245c76; }
[data-theme=light] .map-anchor-dot { fill: #245c76; }
[data-theme=light] .map-controls { background: #f7fafcec; border-color: #9bb6c8; }
[data-theme=light] .map-controls button { color: #17365f; }
[data-theme=light] .map-controls button:hover { background: #dce8f3; }
@media (max-width: 700px) {
    main:has(.quiz-panel .map-answer) { width: calc(100% - 8px) !important; padding: 4px 0 !important; }
    .quiz-panel:has(.map-answer) { height: calc(100dvh - 85px); min-height: 460px; padding: 6px !important; gap: 6px !important; }
    .quiz-panel:has(.map-answer) .quiz-head { font-size: .72rem; }
    .quiz-panel:has(.map-answer) .quiz-head > div:first-child { display: block; }
    .quiz-panel:has(.map-answer) .quiz-head .button { font-size: .72rem; padding: 4px 7px; }
    .quiz-panel:has(.map-answer) .question { justify-content: flex-start; gap: 8px; padding-right: 76px; }
    .quiz-panel:has(.map-answer) .question .map-question-flag { width: 36px; height: 25px; }
    .quiz-panel:has(.map-answer) #timer { top: 65px; right: 10px; font-size: .7rem; }
    .quiz-panel:has(.map-answer) .feedback { top: 118px; max-width: calc(100% - 90px); left: 10px; transform: none; font-size: .8rem; padding: 7px 9px; }
    .map-controls { top: 8px !important; right: 8px !important; }
    .map-controls button { width: 40px; height: 40px; }
    .map-hint { font-size: .62rem; left: 6px; bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .map-shape, .map-selection-circle { transition: none !important; animation: none !important; }
}