/* Атлас: карта в центрі, керування по краях без перекриттів. */
.map-page { height: 100vh; height: 100dvh; --map-gold: #dfbd7c; --map-line: rgba(218,187,131,.28); }
.map-page .archive-nav { flex-shrink: 0; }
.map-page .map-atlas-toolbar {
    position: relative; inset: auto; transform: none;
    flex: 0 0 auto; width: 100%; max-width: none;
    margin: 0; padding: 14px clamp(16px,3vw,48px);
    justify-content: flex-start; gap: 8px;
    border: 0; border-bottom: 1px solid var(--map-line);
    background: linear-gradient(100deg,#20161a,#090a0c 70%);
    box-shadow: 0 10px 30px #0006;
}
.map-page .map-atlas-toolbar::before {
    content: 'АТЛАС МІДЛЕНДА'; margin-right: auto; padding-right: 24px;
    color: var(--map-gold); font: 700 .875rem Georgia,serif; letter-spacing: .15em;
}
.map-page .map-atlas-toolbar button {
    min-height: 40px; padding: 9px 15px; border: 1px solid #ffffff24;
    border-radius: 999px !important; background: #ffffff05;
    color: #d6ccc0; font: 700 .875rem Georgia,serif; cursor: pointer;
}
.map-page .map-atlas-toolbar button.active,
.map-page .map-atlas-toolbar button:hover { border-color: #c64b5b; background: #681b2b; color: #fff; }
.map-page .map-atlas-toolbar [data-map-route] { border-color: #8bbfc166; color: #b3e4e6; }
.map-page .map-atlas-toolbar [data-map-route].active { background: #163e43; border-color: #78d1d7; }
.map-page .map-viewport { flex: 1 1 0; min-height: 0; border: 0; }
.map-page .guts-route-layer { display: none; position: absolute; inset: 0; width: 2400px; height: 1350px; pointer-events: none; z-index: 3; overflow: visible; }
.map-page .show-struggler-route .guts-route-layer { display: block; }
.map-page .pin.route-pin { background: #7ae5ed !important; border-color: #fff; box-shadow: 0 0 0 8px #52cbd44d, 0 0 28px #7ae5ed !important; z-index: 4; }
.map-page .guts-route-note { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; padding: 12px 18px; border: 1px solid #6bc6ce; border-radius: 10px; background: #0b2026ed; color: #cefbff; text-align: center; z-index: 5; font-size: 14px; }
.map-page .guts-route-note[hidden] { display: none; }
.map-page .map-overlay { background: radial-gradient(ellipse at center, transparent 48%,rgba(7,8,11,.7) 100%); }
.map-page .sparks { opacity: .16; }
.map-page .pin { width: 18px; height: 18px; border: 2px solid #f4dfbc; background: #982338; box-shadow: 0 0 0 5px #35101744,0 4px 18px #0008; }
.map-page .pin::after { border-color: #ddb366; animation-duration: 3.5s; }
.map-page .pin:hover { background: #e44b5e; box-shadow: 0 0 0 8px #d8994d38,0 0 24px #d34155; }
.map-page .map-instructions {
    top: 16px; bottom: auto; left: 18px; transform: none;
    max-width: calc(100% - 36px); padding: 9px 14px;
    border: 1px solid #dfbd7c26; border-radius: 9px;
    background: #0c0b0bcc; color: #e0d3be; font-size: .875rem; letter-spacing: 0;
}
.map-page .map-quick-controls {
    position: relative; inset: auto; transform: none;
    flex: 0 0 auto; max-width: none; width: 100%;
    margin: 0; padding: 14px clamp(16px,3vw,48px); gap: 16px;
    border: 0; border-top: 1px solid var(--map-line);
    background: linear-gradient(100deg,#171316,#08090a); box-shadow: 0 -10px 30px #0004;
}
.map-page .map-quick-controls label { color: var(--map-gold); font-size: .875rem; gap: 14px; }
.map-page .map-quick-controls select { max-width: 290px; min-height: 42px; padding: 9px 14px; border: 1px solid var(--map-line); border-radius: 10px !important; color: #ebe0d0; background: #171416; font-size: 1rem; }
.map-page .map-quick-controls button { min-height: 42px; padding: 9px 16px; border: 1px solid #ffffff24; border-radius: 10px !important; background: #ffffff06; color: #d7cbb9; font-size: .875rem; cursor: pointer; }
.map-page .map-legend { margin-left: auto; padding-right: 62px; font-size: .875rem; color: #afa599; }
.map-page .location-panel {
    z-index: 6000; top: 16px; right: 16px; height: calc(100vh - 32px); height: calc(100dvh - 32px);
    width: 480px; max-width: calc(100vw - 32px); padding: 28px;
    border: 1px solid var(--map-line); border-top: 3px solid #ba354c; border-radius: 20px;
    background: linear-gradient(145deg,#21181bf5,#090a0bfA); box-shadow: -20px 0 80px #000a;
    transform: translateX(calc(100% + 40px));
}
.map-page .location-panel.active { transform: translateX(0); }
.map-page .close-panel { top: 14px; right: 16px; width: 40px; height: 40px; font-size: 1.1rem; border: 1px solid var(--map-line); border-radius: 50% !important; color: #e1c799; background: #ffffff05; }
.map-page .loc-image { height: 260px; margin-top: 42px; border: 1px solid var(--map-line); border-radius: 12px; filter: saturate(.8) contrast(1.08); }
.map-page .loc-title { font-size: clamp(1.8rem,3vw,2.8rem); color: #f3eadc; text-shadow: none; overflow-wrap: anywhere; }
.map-page .loc-subtitle { color: var(--map-gold); font-size: .875rem; line-height: 1.6; }
.map-page .loc-desc { text-align: left; color: #c3b8a9; font-size: 1.05rem; line-height: 1.8; }
.map-page .atlas-context-menu { display: none !important; }
@media(max-width:1000px) {
    .map-page .map-atlas-toolbar { flex-wrap: nowrap; overflow-x: auto; }
    .map-page .map-atlas-toolbar::before { display: none; }
    .map-page .map-atlas-toolbar button { flex-shrink: 0; }
    .map-page .map-legend { display: none; }
}
@media(max-width:600px) {
    .map-page .map-atlas-toolbar { padding: 10px 12px; }
    .map-page .map-quick-controls { padding: 10px 12px; gap: 8px; padding-right: 64px; }
    .map-page .map-quick-controls label { flex: 1; min-width: 0; }
    .map-page .map-quick-controls select { width: 100%; min-width: 0; font-size: .875rem; }
    .map-page .map-quick-controls button { font-size: .8rem; }
    .map-page .location-panel { padding: 22px; }
}
@media(prefers-reduced-motion:reduce) { .map-page .pin::after { animation: none; } }