/* === MAPA ŚWIATA ========================================================= */

.map-view {
    padding: 0;
    overflow: hidden;
    background: #050403;
    isolation: isolate;
}

.map-surface {
    position: absolute;
    left: 52px;
    top: 9px;
    width: 1672px;
    height: 941px;
    overflow: hidden;
    background: #1a1710;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, .72);
}

.map-base-image,
.endgame-map-layer,
.endgame-enemy-layer,
.endgame-region-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.endgame-enemy-territory {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform: scale(1);
    transform-origin: center;
    transition: transform .18s ease, filter .18s ease;
}

.endgame-enemy-territory.is-hovered {
    transform: scale(1.006);
    filter: saturate(1.04) brightness(1.07);
    will-change: transform, filter;
}

.map-base-image {
    display: block;
    object-fit: fill;
    user-select: none;
    -webkit-user-drag: none;
}

.map-base-image--campaign {
    opacity: 1;
    transition: opacity .34s ease;
}

.endgame-map-layer {
    opacity: 0;
    visibility: hidden;
    transition: opacity .34s ease, visibility 0s linear .34s;
}

.map-view[data-map-mode="endgame"] .map-base-image--campaign {
    opacity: 0;
}

.map-view[data-map-mode="endgame"] .endgame-map-layer {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.endgame-region {
    position: absolute;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    transform: scale(1);
    transform-origin: center;
    filter: saturate(.92) brightness(.96);
    transition: transform .18s ease, filter .18s ease, opacity .2s ease;
}

.endgame-region-layer.is-region-hot {
    cursor: pointer;
}

.endgame-region.is-hovered {
    z-index: 2;
    transform: scale(1.018);
    filter: saturate(1.06) brightness(1.11) drop-shadow(0 0 3px rgba(238, 201, 113, .38));
    will-change: transform, filter;
}

.map-shadow-frame {
    position: absolute;
    inset: 0;
    z-index: 8;
    width: 1920px;
    height: 960px;
    pointer-events: none;
    user-select: none;
}

.map-view::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .62), transparent 23%, transparent 72%, rgba(0, 0, 0, .68)),
        radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, .38) 100%);
}

.map-heading {
    position: absolute;
    left: 50%;
    top: 16px;
    z-index: 12;
    width: 520px;
    min-height: 102px;
    padding: 12px 36px 14px;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(10, 8, 5, .88) 17%, rgba(10, 8, 5, .88) 83%, transparent);
}

.map-heading__kicker {
    display: block;
    color: #a88a54;
    font: 600 11px/1.2 var(--font-body);
    letter-spacing: .32em;
    text-transform: uppercase;
}

.map-heading h1 {
    margin: 2px 0 0;
    color: #e5c77e;
    font: 700 34px/1.05 var(--font-title);
    text-shadow: 0 3px 2px #000, 0 0 18px rgba(197, 160, 89, .28);
}

.map-heading p {
    margin: 4px 0 0;
    color: #c7b58f;
    font: 600 12px/1.2 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.map-mode-switch {
    position: absolute;
    left: 50%;
    top: 122px;
    z-index: 12;
    display: flex;
    gap: 14px;
    transform: translateX(-50%);
}

.map-mode-button {
    color: #b8a27b;
    font: 700 16px/1 var(--font-title);
    text-shadow: 0 2px 1px #000;
    opacity: 1;
}

.map-mode-button:disabled .campaign-feature-label { font-size:14px; line-height:1.15; }

.map-mode-button:not(.is-active) {
    --game-button-image: url("../image/ui/button_1_press.png");
}

.map-mode-button.is-active {
    color: #f0d38b;
    opacity: 1;
    filter: brightness(1.12) !important;
}

.map-mode-button.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 92px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #dfbd70, transparent);
    box-shadow: 0 0 9px rgba(223, 189, 112, .75);
}

.map-exit-button {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 12;
    transform: translateX(-50%);
}

.map-exit-button,
.war-join-button {
    color: #d5c096;
    font: 700 17px/1 var(--font-title);
    letter-spacing: normal;
    text-transform: none;
    text-shadow: 0 2px 1px #000;
}

.map-status-note {
    position: absolute;
    left: 50%;
    bottom: 105px;
    z-index: 12;
    max-width: 620px;
    padding: 8px 28px;
    transform: translateX(-50%);
    color: #b9a47b;
    background: linear-gradient(90deg, transparent, rgba(7, 6, 4, .78) 15%, rgba(7, 6, 4, .78) 85%, transparent);
    font: 600 12px/1.35 var(--font-body);
    letter-spacing: .04em;
    text-align: center;
}

.campaign-map-marker {
    position: absolute; left: 50%; top: 50%; z-index: 10;
    width: 160px; height: 160px; margin: 0; padding: 0; border: 0; outline: 0;
    transform: translate(-50%, -50%); appearance: none;
    opacity: var(--campaign-marker-opacity, 1); background: transparent; cursor: pointer; pointer-events: auto;
    transition: opacity .22s ease, transform .18s ease, filter .18s ease;
}
.map-view[data-map-mode="endgame"] .campaign-map-marker { opacity: 0; pointer-events: none; }
#campaign-map-markers.is-starting .campaign-map-marker:not(.is-selected):not(.is-concealed) { opacity: .42; pointer-events: none; }
.campaign-map-marker.is-concealed { opacity: 0; pointer-events: none; }
.campaign-map-marker:hover,
.campaign-map-marker:focus-visible,
.campaign-map-marker.is-selected {
    z-index: 11; transform: translate(-50%, -50%) scale(1.08) translateY(-4px);
    filter: brightness(1.12) saturate(1.08);
}
.campaign-map-marker.is-locked { cursor: not-allowed; filter: grayscale(1); }
.campaign-map-marker.is-locked:hover, .campaign-map-marker.is-locked:focus-visible { z-index: 10; transform: translate(-50%, -50%); filter: grayscale(1); }
.campaign-map-marker.is-locked .campaign-map-marker__halo { animation: none; opacity: .18; }
.campaign-map-marker.is-completed::after { content: "✓"; position: absolute; right: 22px; top: 20px; z-index: 3; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(222, 190, 112, .75); border-radius: 50%; color: #ead190; background: rgba(29, 20, 11, .9); box-shadow: 0 2px 5px rgba(0, 0, 0, .75), 0 0 7px rgba(218, 177, 82, .34); font: 700 17px/1 var(--font-title); text-shadow: 0 2px 1px #000; }
.campaign-map-marker:focus-visible { outline: 2px solid rgba(240, 204, 119, .82); outline-offset: -20px; }
.campaign-map-marker__halo, .campaign-map-marker__icon { position: absolute; }
.campaign-map-marker__halo {
    left: 50%; top: 50%; width: 54px; height: 54px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(240, 204, 119, .68);
    background: radial-gradient(circle, rgba(236, 195, 99, .22), transparent 68%);
    animation: campaignMapMarkerPulse 2.4s ease-out infinite;
}
.campaign-map-marker__icon {
    left: 0; top: 0; width: 100%; height: 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .72));
    transition: filter .18s ease;
}
.campaign-map-marker:hover .campaign-map-marker__icon,
.campaign-map-marker:focus-visible .campaign-map-marker__icon,
.campaign-map-marker.is-selected .campaign-map-marker__icon { filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .78)) drop-shadow(0 0 8px rgba(231, 188, 94, .48)); }

.campaign-map-marker__label {
    position: absolute; left: 50%; top: calc(51% + 2px); z-index: 2;
    display: grid; place-items: center; width: 88%; height: 21%;
    padding: 0 3%; overflow: hidden; transform: translateX(-50%);
    color: #21150c; background: transparent;
    font: 700 13px/1 var(--font-title);
    letter-spacing: .025em; text-align: center;
    -webkit-text-stroke: .35px #21150c;
    text-shadow: 0 1px 0 rgba(255, 235, 185, .42);
}

.campaign-map-routes { position: absolute; inset: 0; z-index: 9; width: 1920px; height: 960px; overflow: visible; pointer-events: none; transition: opacity .22s ease; }
.map-view[data-map-mode="endgame"] .campaign-map-routes { opacity: 0; }
.campaign-map-route { opacity: var(--campaign-route-opacity, 1); transition: opacity .22s ease; }
.campaign-map-route.is-concealed { opacity: 0; }
.campaign-map-route path { fill: none; vector-effect: non-scaling-stroke; transition: stroke .18s ease, stroke-width .18s ease, opacity .18s ease; }
.campaign-map-route__shadow { stroke: rgba(35, 7, 7, .84); stroke-width: 9; stroke-dasharray: 18 12; stroke-linecap: round; }
.campaign-map-route__trail { stroke: #6d211f; stroke-width: 4.5; stroke-dasharray: 18 12; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(151, 61, 52, .46)); }
.campaign-map-route__highlight { stroke: rgba(154, 61, 52, .76); stroke-width: 1.2; stroke-dasharray: 2 34; stroke-linecap: round; }
.campaign-map-route.is-highlighted .campaign-map-route__trail { stroke: #a44b3f; stroke-width: 5.5; filter: drop-shadow(0 0 5px rgba(164, 75, 63, .64)); }
.campaign-map-route.is-highlighted .campaign-map-route__highlight { stroke: #c66c58; stroke-width: 2; }
.campaign-map-route.is-locked path { opacity: .26; filter: grayscale(.9); }
.campaign-map-route.is-completed .campaign-map-route__trail { stroke: #9a703b; }
.map-world-legend {
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 12;
    display: none;
    box-sizing: border-box;
    width: 448px;
    height: 228px;
    padding: 50px 68px 26px 52px;
    color: #d2bf98;
    background: transparent url("../image/ui/window_class.png") center / 448px 228px no-repeat;
    cursor: pointer;
}

.map-view[data-map-mode="endgame"] .map-world-legend {
    display: grid;
    grid-template-rows: repeat(4, 36px);
    gap: 1px;
    align-content: center;
}

.map-world-legend__title {
    position: absolute;
    left: 48px;
    top: 11px;
    width: 270px;
    height: 38px;
    color: #e3c67f;
    font: 700 16px/38px var(--font-title);
    text-align: center;
    text-shadow: 0 2px 1px #000;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.map-world-legend__title:hover { color: #f2dca3; }
.map-world-legend__title:focus-visible { outline: 1px solid #e3c67f; outline-offset: -3px; }
.map-view[data-map-mode="endgame"] .map-world-legend.is-history { display: block; }
.map-world-legend.is-history .map-world-legend__row { display: none; }
.war-history[hidden] { display: none; }
.war-history {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 160, 89, .4) transparent;
    font: 400 12px/1.45 var(--font-body);
}
.war-history::-webkit-scrollbar { width: 8px; }
.war-history::-webkit-scrollbar-thumb { background: rgba(197, 160, 89, .4); border-radius: 999px; }
.war-history:focus-visible { outline: 1px solid rgba(227, 198, 127, .65); }
.war-history__note { margin: 0 0 8px; color: #bca177; }
.war-history__entry { padding: 8px 0; border-top: 1px solid rgba(197, 160, 89, .25); overflow-wrap: anywhere; }
.war-history__entry h3 { margin: 0; color: #e3c67f; font: 700 14px/1.3 var(--font-title); }
.war-history__entry p { margin: 3px 0 0; }
.war-history__date { display: block; color: #a99572; font-size: 11px; }
.war-history__winner { color: #e0c57f; }
.war-history__heroes { color: #d8b877; }

.map-world-legend__row {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr 30px;
    gap: 10px;
    align-items: center;
    transform: translateY(4px);
    font: 600 12px/1.2 var(--font-body);
    text-transform: uppercase;
    letter-spacing: .045em;
}

.map-world-legend__row:not(:last-child)::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 44px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, rgba(177, 139, 78, .28), transparent);
}

.map-world-legend__coat {
    display: block;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .72));
}

.map-world-legend__name {
    min-width: 0;
    overflow: hidden;
    color: #cdbb98;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-world-legend__count {
    display: grid;
    width: 28px;
    height: 24px;
    place-items: center;
    color: #e0c57f;
    background: radial-gradient(circle, rgba(94, 58, 30, .52), rgba(18, 11, 8, .28) 68%, transparent 72%);
    font: 700 13px/24px var(--font-title);
    text-shadow: 0 2px 1px #000;
}

.map-world-legend[hidden],
.map-province-panel[hidden] {
    display: none !important;
}

.map-province-panel {
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 13;
    box-sizing: border-box;
    width: 400px;
    height: 576px;
    padding: 72px 50px 32px;
    overflow: hidden;
    color: #cdbb98;
    background: transparent url("../image/ui/window_character.png") center / 400px 576px no-repeat;
    text-shadow: 0 2px 1px rgba(0, 0, 0, .92);
    animation: mapProvincePanelReveal .18s ease-out;
}

.map-province-panel__title {
    position: absolute;
    left: 52px;
    top: 16px;
    width: 274px;
    height: 40px;
    margin: 0;
    overflow: hidden;
    color: #ebce8a;
    font: 700 22px/40px var(--font-title);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-province-panel__close {
    position: absolute;
    right: 20px;
    top: 14px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    color: #9c8258;
    background: radial-gradient(circle, rgba(63, 28, 20, .72) 0 34%, rgba(18, 11, 8, .76) 38% 52%, transparent 56%);
    font: 700 44px/40px var(--font-title);
    text-shadow:
        0 1px 0 rgba(224, 193, 125, .45),
        0 3px 2px #090503;
    cursor: pointer;
    transition: color .14s ease, filter .14s ease, transform .14s ease;
}

.map-province-panel__close:hover,
.map-province-panel__close:focus-visible {
    color: #d2b574;
    filter: brightness(1.08);
    transform: scale(1.06);
}

.map-province-panel__hero {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    min-height: 160px;
}

.map-province-panel__coat {
    display: block;
    width: 160px;
    height: 160px;
    background-repeat: no-repeat;
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .6));
}

.map-province-panel__identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

.map-province-panel__group {
    color: #dec47f;
    font: 700 15px/1.25 var(--font-title);
}

.map-province-panel__motto {
    margin: 18px 0 0;
    color: #e0c98f;
    font: italic 600 15px/1.4 var(--font-body);
}

.map-province-panel__summary,
.map-province-panel__description {
    margin: 0;
    font-family: var(--font-body);
}

.map-province-panel__copy {
    max-height: 312px;
}

.map-province-panel.is-faction .map-province-panel__copy {
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-color: rgba(177, 139, 78, .72) rgba(23, 14, 10, .5);
    scrollbar-width: thin;
}

.map-province-panel.is-faction .map-province-panel__copy::-webkit-scrollbar {
    width: 6px;
}

.map-province-panel.is-faction .map-province-panel__copy::-webkit-scrollbar-track {
    background: rgba(23, 14, 10, .5);
}

.map-province-panel.is-faction .map-province-panel__copy::-webkit-scrollbar-thumb {
    background: rgba(177, 139, 78, .72);
}

.map-province-panel__summary {
    margin-top: 14px;
    color: #d5c6a6;
    font-size: 14px;
    font-style: italic;
    line-height: 1.45;
}

.map-province-panel__description {
    margin-top: 14px;
    color: #b9aa8c;
    font-size: 14px;
    line-height: 1.45;
}

@keyframes campaignMapMarkerPulse {
    0% { opacity: .9; transform: translate(-50%, -50%) scale(.55); }
    75%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

@keyframes mapProvincePanelReveal {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .endgame-map-layer,
    .map-base-image--campaign,
    .endgame-region,
    .campaign-map-marker {
        transition: none;
    }

    .campaign-map-marker__halo {
        animation: none;
        opacity: .45;
    }

    .map-province-panel {
        animation: none;
    }

    .endgame-region.is-hovered {
        transform: none;
    }

    .endgame-enemy-territory.is-hovered {
        transform: none;
    }
}