/* Empire Territory Map styles */

.category-panel--map {
    overflow: hidden;
}

.category-panel--map::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(0, 174, 255, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(0, 174, 255, 0.18) 49% 51%, transparent 52% 100%),
        linear-gradient(0deg, transparent 0 48%, rgba(0, 174, 255, 0.14) 49% 51%, transparent 52% 100%);
    background-size: 34px 34px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}

.category-panel--map .panel-title {
    text-shadow: 0 0 16px rgba(0, 174, 255, 0.22);
}

#map-view {
    --map-ocean: rgba(221, 239, 248, 0.72);
    --map-land: rgba(255, 255, 255, 0.82);
    --map-land-stroke: rgba(32, 37, 45, 0.14);
    --map-panel-bg: var(--bg-elevated);
    --map-grid: rgba(0, 174, 255, 0.12);
    --map-route: rgba(0, 174, 255, 0.42);
    background:
        linear-gradient(135deg, rgba(250, 253, 255, 0.95), rgba(230, 241, 248, 0.78)),
        var(--bg-main);
}

#map-view::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(32, 37, 45, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 37, 45, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

.empire-map-shell {
    width: min(1480px, 96vw);
    height: min(820px, calc(100vh - 134px));
    position: relative;
    z-index: 1;
}

.empire-map-frame {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(250px, 0.85fr) minmax(520px, 1.8fr) minmax(260px, 0.95fr);
    gap: 16px;
    align-items: stretch;
}

.empire-map-panel,
.empire-map-stage {
    border: 1px solid var(--border-subtle);
    background: var(--map-panel-bg);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 1;
    transform: none;
}

.empire-map-panel {
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
    color: var(--text-main);
}

.empire-map-panel--control {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.empire-map-kicker,
.empire-map-detail-kicker {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    color: var(--accent-strong);
    font-weight: 600;
}

.empire-map-panel h1,
.empire-map-detail h2 {
    margin: 0;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
}

.empire-map-panel h1 {
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.empire-map-stage-meta {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated-soft);
}

.empire-map-year {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.empire-map-stage-title {
    display: block;
    font-size: 1.05rem;
    color: var(--text-main);
}

.empire-map-stage-subtitle,
.empire-map-note,
.empire-map-detail-summary,
.empire-map-detail-body {
    color: var(--text-muted);
    line-height: 1.7;
}

.empire-map-stage-subtitle {
    margin: 8px 0 0;
    font-size: 0.92rem;
}

.empire-map-stage-list {
    display: grid;
    gap: 8px;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.empire-map-stage-button {
    width: 100%;
    min-height: 56px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-elevated-soft);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.empire-map-stage-button span {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.empire-map-stage-button strong {
    font-size: 0.94rem;
    font-weight: 600;
}

.empire-map-stage-button:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 174, 255, 0.42);
}

.empire-map-stage-button.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px rgba(0, 174, 255, 0.08), 0 12px 28px rgba(0, 174, 255, 0.12);
}

.empire-map-range-wrap {
    display: grid;
    gap: 8px;
}

.empire-map-range {
    width: 100%;
    accent-color: var(--accent);
}

.empire-map-range-labels {
    display: flex;
    justify-content: space-between;
    color: var(--text-faint);
    font-size: 0.74rem;
}

.empire-map-note {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.88rem;
}

.empire-map-stage {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(0, 174, 255, 0.06), rgba(255, 255, 255, 0.26)),
        var(--map-ocean);
}

.empire-map-stage::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(0, 174, 255, 0.16);
    border-radius: 12px;
    pointer-events: none;
    z-index: 2;
}

.empire-map-scanline {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(transparent 0 48%, rgba(255, 255, 255, 0.16) 49% 51%, transparent 52% 100%);
    background-size: 100% 6px;
    opacity: 0.18;
    pointer-events: none;
    z-index: 3;
}

.empire-map-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.empire-map-main-viewport,
.empire-map-australia-focus {
    transform-box: fill-box;
    transform-origin: center;
    transition:
        opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.empire-map-main-viewport {
    opacity: 1;
}

.empire-map-shell {
    --mapbox-style-land: hsl(0, 0%, 100%);
    --mapbox-style-water: hsl(0, 0%, 89%);
    --mapbox-style-road: hsl(211, 0%, 0%);
    --mapbox-style-boundary: hsl(212, 2%, 89%);
    --mapbox-style-label: hsl(216, 34%, 72%);
}

.empire-map-australia-focus {
    --mapbox-land: var(--mapbox-style-land);
    --mapbox-water: var(--mapbox-style-water);
    --mapbox-road: var(--mapbox-style-road);
    --mapbox-boundary: var(--mapbox-style-boundary);
    --mapbox-label: var(--mapbox-style-label);
    opacity: 0;
    pointer-events: none;
    transform: scale(1.08);
}

.empire-map-shell.is-australia-focused .empire-map-main-viewport {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.72);
    filter: blur(2px);
}

.empire-map-shell.is-australia-focused .empire-map-australia-focus {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.empire-map-grid-line {
    fill: none;
    stroke: var(--map-grid);
    stroke-width: 0.8;
    vector-effect: non-scaling-stroke;
}

.empire-map-country {
    fill: var(--map-land);
    stroke: var(--map-land-stroke);
    stroke-width: 0.7;
    vector-effect: non-scaling-stroke;
}

.empire-map-territory {
    --territory-strength: 0;
    fill: var(--region-accent);
    fill-opacity: calc(var(--territory-strength) * 0.68);
    stroke: var(--region-accent);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        fill 0.2s ease,
        stroke-width 0.2s ease,
        filter 0.2s ease;
}

.empire-map-territory.is-active {
    filter: url(#empire-map-glow);
}

.empire-map-territory.is-contested {
    fill-opacity: 0.08;
    stroke-dasharray: 4 5;
    filter: none;
}

.empire-map-territory:hover,
.empire-map-territory.is-selected {
    stroke-width: 2.2;
    filter: url(#empire-map-glow);
}

.empire-map-route {
    fill: none;
    stroke: var(--map-route);
    stroke-width: 1.25;
    stroke-dasharray: 6 7;
    vector-effect: non-scaling-stroke;
    transition: opacity 0.35s ease;
}

.empire-map-route.is-active {
    animation: empire-map-route-flow 4s linear infinite;
}

.empire-map-point {
    color: var(--region-accent);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.28s ease, filter 0.2s ease;
}

.empire-map-point.is-active,
.empire-map-point.is-contested {
    filter: url(#empire-map-glow);
}

.empire-map-point-pulse {
    fill: currentColor;
    opacity: 0.18;
}

.empire-map-point-core {
    fill: currentColor;
    stroke: rgba(255, 255, 255, 0.86);
    stroke-width: 1.4;
}

.empire-map-point text {
    fill: var(--text-main);
    stroke: rgba(255, 255, 255, 0.78);
    stroke-width: 2.5;
    paint-order: stroke;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    pointer-events: none;
}

.empire-map-point:hover,
.empire-map-point.is-selected {
    filter: url(#empire-map-glow);
}

.empire-map-detail {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
}

.empire-map-detail h2 {
    font-size: clamp(1.2rem, 1.8vw, 1.65rem);
}

.empire-map-detail-summary {
    margin: 0;
    font-size: 0.96rem;
}

.empire-map-detail-body {
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
    font-size: 0.92rem;
}

.empire-map-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.empire-map-action-button,
.empire-map-site-row {
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated-soft);
    color: var(--text-main);
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.empire-map-action-button {
    min-height: 38px;
    border-radius: 10px;
    padding: 0 13px;
    font-size: 0.86rem;
    font-weight: 600;
}

.empire-map-action-button:hover,
.empire-map-site-row:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 174, 255, 0.45);
    box-shadow: 0 12px 26px rgba(0, 174, 255, 0.1);
}

.empire-map-action-button:not(.empire-map-action-button--ghost) {
    background: var(--accent-soft);
    border-color: rgba(0, 174, 255, 0.36);
    color: var(--accent-strong);
}

.empire-map-site-list {
    display: grid;
    gap: 8px;
}

.empire-map-site-row {
    width: 100%;
    min-height: 54px;
    border-radius: 10px;
    padding: 9px 11px;
    text-align: left;
    display: grid;
    gap: 4px;
}

.empire-map-site-row span {
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.empire-map-site-row strong {
    color: var(--text-main);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}

.empire-map-detail-meta {
    display: grid;
    gap: 8px;
    margin: auto 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--border-subtle);
}

.empire-map-detail-meta div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.84rem;
}

.empire-map-detail-meta dt {
    color: var(--text-muted);
}

.empire-map-detail-meta dd {
    margin: 0;
    color: var(--text-main);
    text-align: right;
}

.empire-map-australia-water {
    fill: var(--mapbox-water);
}

.empire-map-australia-shape {
    fill: var(--mapbox-land);
    stroke: var(--mapbox-boundary);
    stroke-width: 2.2;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.12));
    vector-effect: non-scaling-stroke;
}

.empire-map-australia-admin-line {
    fill: none;
    stroke: var(--mapbox-boundary);
    stroke-width: 1.15;
    stroke-dasharray: 8 5;
    opacity: 0.82;
    vector-effect: non-scaling-stroke;
}

.empire-map-australia-road {
    fill: none;
    stroke: var(--mapbox-road);
    stroke-width: 1.35;
    opacity: 0.78;
    vector-effect: non-scaling-stroke;
}

.empire-map-australia-road[data-route-id="east-coast-command"] {
    stroke-width: 2.4;
}

.empire-map-australia-site {
    cursor: pointer;
    color: var(--accent);
    transition: filter var(--transition-fast), transform var(--transition-fast);
}

.empire-map-australia-site:hover,
.empire-map-australia-site.is-selected {
    filter: url(#empire-map-glow);
}

.empire-map-australia-site-hit {
    fill: transparent;
}

.empire-map-australia-site-ring {
    fill: currentColor;
    opacity: 0.16;
    stroke: currentColor;
    stroke-width: 1.3;
}

.empire-map-australia-site-core {
    fill: currentColor;
    stroke: var(--mapbox-land);
    stroke-width: 2;
}

.empire-map-australia-site-leader {
    stroke: currentColor;
    stroke-width: 1.05;
    opacity: 0.62;
    vector-effect: non-scaling-stroke;
}

.empire-map-australia-site-label,
.empire-map-australia-site-code {
    fill: var(--text-main);
    stroke: rgba(255, 255, 255, 0.88);
    stroke-width: 3;
    paint-order: stroke;
    font-weight: 700;
    letter-spacing: 0;
    pointer-events: none;
}

.empire-map-australia-site-label {
    font-size: 13px;
}

.empire-map-australia-site-code {
    fill: var(--mapbox-label);
    font-size: 10px;
}

:root[data-theme="dark"] #map-view {
    --map-ocean: rgba(5, 13, 24, 0.92);
    --map-land: rgba(26, 34, 49, 0.92);
    --map-land-stroke: rgba(255, 255, 255, 0.08);
    --map-grid: rgba(53, 182, 255, 0.13);
    --map-route: rgba(53, 182, 255, 0.42);
    background:
        linear-gradient(135deg, rgba(5, 8, 16, 0.98), rgba(13, 18, 28, 0.96)),
        var(--bg-main);
}

:root[data-theme="dark"] #map-view::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

:root[data-theme="dark"] .empire-map-stage {
    background:
        linear-gradient(135deg, rgba(53, 182, 255, 0.06), rgba(18, 22, 32, 0.62)),
        var(--map-ocean);
}

:root[data-theme="dark"] .empire-map-australia-focus {
    --mapbox-land: hsl(216, 12%, 9%);
    --mapbox-water: hsl(220, 9%, 19%);
    --mapbox-road: hsl(0, 0%, 96%);
    --mapbox-boundary: hsl(212, 2%, 52%);
    --mapbox-label: hsl(216, 34%, 72%);
}

:root[data-theme="dark"] .empire-map-australia-shape {
    filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.42));
}

:root[data-theme="dark"] .empire-map-australia-site-core {
    stroke: hsl(216, 12%, 9%);
}

:root[data-theme="dark"] .empire-map-australia-site-label,
:root[data-theme="dark"] .empire-map-australia-site-code {
    stroke: rgba(5, 8, 16, 0.88);
}

:root[data-theme="dark"] .empire-map-point text {
    stroke: rgba(5, 8, 16, 0.84);
}

@keyframes empire-map-route-flow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -52; }
}

@media (max-width: 1180px) {
    .empire-map-shell {
        height: calc(100vh - 120px);
    }

    .empire-map-frame {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(360px, 1fr) auto;
    }

    .empire-map-stage {
        grid-column: 1 / -1;
        order: 1;
    }

    .empire-map-panel--control {
        order: 2;
    }

    .empire-map-panel--detail {
        order: 3;
    }

    .empire-map-stage-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    #map-view {
        padding: 78px 12px 14px;
    }

    .empire-map-shell {
        width: 100%;
        height: calc(100vh - 96px);
        overflow: auto;
    }

    .empire-map-frame {
        min-height: 980px;
        grid-template-columns: 1fr;
        grid-template-rows: 420px auto auto;
        gap: 12px;
    }

    .empire-map-panel {
        padding: 16px;
    }

    .empire-map-stage-list {
        grid-template-columns: 1fr;
        max-height: 260px;
    }
}