.page-map {
    position: relative;
    background: var(--color-background);
    --map-fill: rgba(var(--color-on-background-rgb), 0.12);
    --map-stroke: rgba(var(--color-on-background-rgb), 0.55);
    --map-highlight: rgba(var(--color-primary-rgb), 0.9);
    --map-highlight-stroke: var(--color-primary);
    --map-selected: rgba(var(--color-error-rgb), 0.55);
    --map-selected-stroke: var(--color-error);
}

.page-map .map-shell {
    grid-column: 2;
    padding: 2.5rem 0 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.page-map .map-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
}

.page-map .map-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2.5rem;
    align-items: center;
}

.page-map .map-panel-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page-map .map-panel {
    background: var(--color-background);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 1.5rem 2.5rem rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    min-height: 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page-map .map-canvas {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-background);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 2rem 3rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    min-height: 24rem;
}

.page-map .map-svg-wrapper {
    width: 100%;
    max-width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-map .map-svg-wrapper svg {
    width: 100%;
    height: auto;
    max-height: 65vh; 
    object-fit: contain;
}

.page-map .map-svg-wrapper svg > g {
    display: none !important;
}

.page-map .map-svg-wrapper svg #layer6 {
    display: inline !important;
}

.page-map .map-svg-wrapper svg #layer6 path,
.page-map .map-svg-wrapper svg .map-region {
    fill: var(--map-fill) !important;
    stroke: var(--map-stroke) !important;
    stroke-width: 1.5px !important;
    pointer-events: auto !important; 
    transition: fill 150ms ease, stroke 150ms ease, transform 150ms ease;
    transform-origin: center;
    transform-box: fill-box;
    cursor: pointer;
}

.page-map .map-svg-wrapper svg .map-region:hover,
.page-map .map-svg-wrapper svg .map-region.active {
    fill: var(--map-highlight) !important;
    fill-opacity: 1 !important;
    stroke: var(--map-highlight-stroke) !important;
    stroke-width: 1.8px !important;
    transform: scale(1.03);
}

.page-map .map-svg-wrapper svg .map-region.selected {
    fill: var(--map-selected) !important;
    fill-opacity: 1 !important;
    stroke: var(--map-selected-stroke) !important;
    stroke-width: 1.8px !important;
}

.page-map .map-ranking {
    background: var(--color-background);
    border-radius: 1.25rem;
    padding: 1.5rem 2rem 2rem;
    box-shadow: 0 1.5rem 2.5rem rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page-map .map-ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.page-map .map-clear {
    border: none;
    background: transparent;
    color: var(--color-primary);
    font-weight: 700;
    cursor: pointer;
}

.page-map .map-ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.page-map .map-ranking-table td {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-background-hover);
}

.page-map .map-ranking-table .rank {
    width: 3rem;
    text-align: right;
    padding-right: 1rem;
    font-weight: 700;
}

.page-map .map-ranking-table .points {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.page-map .map-ranking-table .name {
    overflow-wrap: anywhere;
}

.page-map .map-missing {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    max-width: 24rem;
}

.page-map .map-error {
    color: var(--color-error);
}

.page-map .map-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
}

@media (max-width: 1200px) {
    .page-map .map-shell {
        grid-column: 1 / -1;
        padding-inline: 1.5rem;
    }

    .page-map .map-grid {
        grid-template-columns: 1fr;
    }

    .page-map .map-svg-wrapper {
        max-width: 100%;
    }
}