/* The Stats Viewer's world map (both rankings): the box, and the controls, search and info
   card that InteractiveWorldMap (static/js/modules/statsviewer.js) builds inside it.
   Loaded only by the Stats Viewer. The rules were written for the previous design; the block below
   gives them the new look's colours. */
#world-map-wrapper {
    --color-border: var(--line);
    --color-gold: var(--gold);
    --color-page-bg-bottom: var(--bg);
    --color-text: var(--text);
    --color-text-accent: var(--violet);
    --color-text-muted: var(--text-3);
    --color-text-secondary: var(--text-2);
    --color-violet-strong: var(--violet-strong);

    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: clamp(300px, calc(100vh - 330px), 460px);
    /* the map is drawn larger than this box: clip, so that focus or a phone's keyboard can't scroll
       the box and carry the buttons off it (hidden is for browsers without clip) */
    overflow: hidden;
    overflow: clip;
    color-scheme: dark;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: rgba(12, 10, 18, 0.7);
    outline: none;
    font: 400 14px/1.4 var(--font-t);
}

/* the flags in the map's search results and info card */
#world-map-wrapper .flag-icon {
    position: relative;
    display: inline-block;
    width: 1.33333333em;
    line-height: 1em;
    background: 50% / contain no-repeat;
}
#world-map-wrapper .flag-icon::before { content: "\00a0"; }

#world-map-wrapper:focus-visible {
    box-shadow: 0 0 0 2px var(--color-gold);
}

/* An <object> paints white until its picture has loaded, so it stays invisible until the map's
   script says it is ready (.map-ready). Without scripts it appears by itself after a moment. */
#world-map-wrapper > object {
    display: block;
    width: 100% !important;
    height: 100%;
    min-width: 0 !important;
    opacity: 0;
    animation: map-appear 0.2s 3s forwards;
}

#world-map-wrapper.map-ready > object {
    opacity: 1;
    animation: none;
    transition: opacity 0.25s ease;
}

@keyframes map-appear {
    to {
        opacity: 1;
    }
}

/* With the map's script running: the map is drawn 1.6× the visible box (the wrapper hides the
   edges) and lives on its own layer, so moving it is a cheap shift of a finished picture; the
   vector is redrawn only when the movement stops (InteractiveWorldMap.render). */
#world-map-wrapper.map-live > object {
    position: absolute;
    left: -30%;
    top: -30%;
    width: 160% !important;
    height: 160%;
    transform-origin: 0 0;
    will-change: transform;
}

@media (max-width: 767px) {
    #world-map-wrapper {
        height: clamp(220px, 46vh, 300px);
        border-radius: 14px;
    }
}

/* full screen: the map takes the whole window (above the header and the phone tab bar), on a
   solid background, so nothing of the page shows through */
#world-map-wrapper.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--bg);
}

/* the way out comes first, at the top of the buttons; the search leaves it room */
#world-map-wrapper.is-fullscreen .map-controls {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
}

#world-map-wrapper.is-fullscreen .map-btn-fullscreen {
    order: -1;
}

#world-map-wrapper.is-fullscreen .map-search {
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
}

/* the card opened by a tap keeps clear of the buttons on the right */
#world-map-wrapper.is-fullscreen .map-tooltip.is-sheet {
    top: calc(58px + env(safe-area-inset-top, 0px));
    right: calc(66px + env(safe-area-inset-right, 0px));
}

html.map-fullscreen-open,
html.map-fullscreen-open body {
    overflow: hidden;
}

/* buttons: zoom in / out / whole world / full screen */
.map-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(196, 160, 255, 0.22);
    border-radius: 12px;
    background: rgba(18, 15, 27, 0.86);
    color: var(--color-text);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(8, 3, 20, 0.4);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.map-btn:hover {
    background: var(--color-violet-strong);
    border-color: transparent;
    color: #fff;
}

.map-btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* "whole world" only once there is something to undo */
#world-map-wrapper:not(.map-zoomed) .map-btn-reset {
    display: none;
}

.map-btn-label {
    display: none;
    font-size: 13px;
    font-weight: 700;
}

#world-map-wrapper.is-fullscreen .map-btn-fullscreen {
    background: var(--color-gold);
    border-color: transparent;
    color: #08070c;
}

/* Phones/tablets in the page: fingers move and zoom the map, so its zoom buttons step aside there
   and the full-screen button says what it does. */
@media (pointer: coarse) {
    #world-map-wrapper:not(.is-fullscreen) .map-btn-zoom {
        display: none;
    }

    /* (the "whole world" button stays: after full screen the map may still be zoomed in) */
    #world-map-wrapper:not(.is-fullscreen) .map-controls {
        top: auto;
        bottom: 12px;
        flex-direction: row;
    }

    #world-map-wrapper:not(.is-fullscreen) .map-btn-fullscreen .map-btn-label {
        display: inline;
    }

    .map-btn {
        min-width: 44px;
        height: 44px;
    }

}

/* Countries / Regions switch (bottom left) */
.map-modes {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    padding: 3px;
    border: 1px solid rgba(196, 160, 255, 0.22);
    border-radius: 999px;
    background: rgba(18, 15, 27, 0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(8, 3, 20, 0.4);
}

.map-mode {
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.map-mode:hover {
    color: var(--color-text-accent);
}

.map-mode[aria-pressed="true"] {
    background: var(--color-violet-strong);
    color: #fff;
}

.map-mode:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 1px;
}

@media (pointer: coarse) {
    .map-mode {
        padding: 9px 14px;
    }

    #world-map-wrapper.is-fullscreen .map-modes {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* narrow phones: the Countries / Regions switch and the full-screen button share the bottom
   row — the button keeps just its icon there */
@media (pointer: coarse) and (max-width: 430px) {
    #world-map-wrapper:not(.is-fullscreen) .map-btn-fullscreen .map-btn-label {
        display: none;
    }
}

/* "find a country" */
.map-search {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    width: min(280px, calc(100% - 84px));
}

.map-search > .fa-search {
    position: absolute;
    z-index: 1;
    left: 13px;
    top: 12px;
    color: var(--color-text-muted);
    font-size: 13px;
    pointer-events: none;
}

.map-search-input {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid rgba(196, 160, 255, 0.22);
    border-radius: 999px;
    background: rgba(18, 15, 27, 0.86);
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(8, 3, 20, 0.4);
}

.map-search-input::placeholder {
    color: var(--color-text-muted);
}

.map-search-input:focus {
    outline: none;
    border-color: rgba(176, 101, 250, 0.7);
    box-shadow: 0 0 0 3px rgba(176, 101, 250, 0.22);
}

.map-search-results {
    margin: 6px 0 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: rgba(18, 15, 27, 0.97);
    box-shadow: 0 14px 30px rgba(8, 3, 20, 0.6);
}

.map-search-results li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
}

.map-search-results li.is-active,
.map-search-results li[role="option"]:hover {
    background: rgba(147, 51, 234, 0.28);
}

.map-search-results .flag-icon {
    flex: none;
    font-size: 0.9em;
}

.map-search-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-search-rank {
    color: var(--color-gold);
    font-size: 0.85em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.map-search-name b {
    font-weight: inherit;
}

/* a player without a country: a figure where the flag would be */
.map-search-nobody {
    flex: none;
    width: 1.33em;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85em;
}

.map-search-empty {
    color: var(--color-text-muted);
    cursor: default !important;
}

/* info card: hover (mouse) or tap (finger) on a country */
.map-tooltip {
    position: absolute;
    z-index: 5;
    max-width: 260px;
    padding: 10px 13px;
    border: 1px solid rgba(196, 160, 255, 0.25);
    border-radius: 14px;
    background: rgba(18, 15, 27, 0.95);
    box-shadow: 0 14px 30px rgba(8, 3, 20, 0.6);
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    pointer-events: none;
}

/* what was picked: a strip under the search field, never under the finger */
.map-tooltip.is-sheet {
    top: 58px;
    left: 10px;
    right: 10px;
    max-width: none;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
    pointer-events: auto;
}

@media (min-width: 600px) {
    .map-tooltip.map-pick-card {
        max-width: 340px;
    }
}

/* (with a mouse the buttons stay at the top right) */
@media (pointer: fine) {
    #world-map-wrapper:not(.is-fullscreen) .map-tooltip.is-sheet {
        right: 62px;
    }
}

.map-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.map-card-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 10px;
    white-space: nowrap;
}

.map-tooltip.is-sheet .map-tooltip-head strong {
    font-size: 14px;
}

.map-tooltip-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.map-tooltip-head strong {
    color: var(--color-text-accent);
    font-size: 15px;
}

.map-tooltip-head .flag-icon {
    flex: none;
}

.map-tooltip-place {
    color: var(--color-gold);
    font-weight: 700;
}

.map-tooltip-muted {
    color: var(--color-text-muted);
    font-size: 12px;
}

/* a player picked in the search: under the search field, until closed or another pick (below
   the search's own list, which opens over it) */
.map-tooltip.map-player-card {
    z-index: 3;
    right: auto;
    width: min(280px, calc(100% - 84px));
    pointer-events: auto;
}

.map-player-card .map-tooltip-head strong {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-player-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: -4px -6px -4px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
}

.map-player-close:hover,
.map-player-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text);
}

/* "Ctrl + scroll to zoom" — flashes when the wheel scrolls the page over the map */
.map-hint {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 3;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(18, 15, 27, 0.92);
    color: var(--color-text);
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.map-hint.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .map-hint {
        transition: none;
    }
}

/* ---------- map legend + colouring switch (bottom right) ---------- */
.map-legend {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(196, 160, 255, 0.22);
    border-radius: 14px;
    background: rgba(18, 15, 27, 0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(8, 3, 20, 0.4);
    font-size: 12px;
}

.map-legend[hidden] {
    display: none;
}

.map-legend-modes {
    display: flex;
    gap: 4px;
}

.map-legend-mode {
    flex: 1 1 0;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.map-legend-mode[aria-pressed="true"] {
    background: rgba(147, 51, 234, 0.55);
    color: #fff;
}

.map-legend-mode:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 1px;
}

.map-legend-scale {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
}

.map-legend-bar {
    flex: 1 1 auto;
    min-width: 70px;
    height: 8px;
    border-radius: 999px;
}

/* phones: in the page the bottom row belongs to the mode switch and the full-screen button —
   the legend shows in full screen, above the mode switch */
@media (pointer: coarse) {
    #world-map-wrapper:not(.is-fullscreen) .map-legend {
        display: none;
    }

    #world-map-wrapper.is-fullscreen .map-legend {
        right: auto;
        left: 12px;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}

/* narrow boxes: the legend sits above the Countries / Regions switch instead of beside it */
@media (max-width: 560px) {
    .map-legend {
        right: auto;
        left: 12px;
        bottom: 62px;
    }
}