/* /page/Карта — the full-screen visited-countries map.
   Standalone: this page does not load the site's bundle, so everything it needs
   is here. Colours follow the site's slate/red palette (see vladekk.css). */

:root {
    --map-bg: #0f172a;
    --map-bar: #16213b;
    --map-line: #1f2d4a;
    --map-land: #334155;
    --map-land-edge: #0f172a;
    --map-visited: #e83232;
    --map-visited-hover: #ff5a4a;
    --map-select: #fadf9c;
    --map-pin: #f6b96a;
    --map-text: #e2e8f0;
    --map-muted: #94a3b8;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;                 /* the map pans; the page never scrolls */
    overscroll-behavior: none;        /* and a drag past the edge must not pull-to-refresh */
}

body.map-page {
    background: var(--map-bg);
    color: var(--map-text);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

/* --- top bar ------------------------------------------------------------- */

.map-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--map-bar);
    border-bottom: 1px solid var(--map-line);
}

.map-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--map-line);
    border-radius: 999px;
    color: var(--map-text);
    text-decoration: none;
    white-space: nowrap;
}

.map-back:hover, .map-back:focus { background: var(--map-line); color: #fff; }
.map-back-arrow { font-size: 18px; line-height: 1; }

.map-heading {
    flex: 1 1 auto;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-heading a { color: inherit; text-decoration: none; }
.map-count { margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--map-muted); }

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

.map-langs a {
    padding: 5px 9px;
    border-radius: 6px;
    color: var(--map-muted);
    font-size: 13px;
    text-decoration: none;
}

.map-langs a:hover { background: var(--map-line); color: var(--map-text); }
.map-langs a.current { background: var(--map-line); color: #fff; }

/* --- the map itself ------------------------------------------------------ */

.map-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    touch-action: none;               /* panzoom handles every touch gesture */
}

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

.map-canvas svg { cursor: grab; }
.map-canvas.is-dragging svg { cursor: grabbing; }

.map-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--map-muted);
    pointer-events: none;
}

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

.land {
    fill: var(--map-land);
    stroke: var(--map-land-edge);
    /* Constant on screen at any zoom, so borders stay hairlines when zoomed in
       and don't swallow small countries when zoomed out. */
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transition: fill .12s ease-out;
}

.land.is-visited { fill: var(--map-visited); cursor: pointer; }
.land.is-visited:hover { fill: var(--map-visited-hover); }

/* Partly-seen countries get their fill from map.js, mixed towards the unvisited
   grey in proportion to how many of their regions have been visited. The hover
   shade is mixed the same way and handed over as a custom property. */
.land.is-partly:hover { fill: var(--map-hover-fill); }

.land.is-selected {
    stroke: var(--map-select);
    stroke-width: 2;
    /* Drawn last so the highlight is not clipped by a neighbour. */
    paint-order: fill stroke;
}

/* Microstates (Monaco, San Marino, Gibraltar…) are dots — a real polygon would
   be a fraction of a pixel wide and impossible to hit. */
.land-dot { stroke-width: 1.5; }
.land-dot:not(.is-visited) { fill: var(--map-muted); opacity: .55; }

/* --- city pins ------------------------------------------------------------ */

/* Deliberately not the visited red: a pin marks a place with a story, which is
   a different claim from "this country is coloured in". */
.map-pin { cursor: pointer; }
.map-pin-body {
    fill: var(--map-pin);
    stroke: #40260a;
    stroke-width: .6;
    stroke-linejoin: round;
}

.map-pin-eye { fill: #40260a; }
.map-pin:hover .map-pin-body { fill: #fff2c9; }

/* --- hover card ----------------------------------------------------------- */

.map-hover {
    position: absolute;
    left: 0;
    top: 0;
    /* Flag beside a two-line stack, and only as wide as what is in it — a flex
       row would stretch the card to its max-width whatever the name. */
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 2px 12px;
    width: max-content;
    max-width: 420px;
    padding: 11px 16px;
    background: rgba(15, 23, 42, .95);
    border: 1px solid var(--map-line);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
    pointer-events: none;         /* never steals the pointer from the map */
    white-space: nowrap;
}

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

.map-hover-flag {
    grid-row: 1 / span 3;
    width: 30px;
    height: 22px;
    border-radius: 3px;
}

.map-hover-name {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.15;
    /* A long name wraps rather than pushing the card off the stage. */
    white-space: normal;
}

/* The region line: smaller than the country above it, because it qualifies it. */
.map-hover-region {
    grid-column: 2;
    font-size: 16px;
    line-height: 1.2;
    white-space: normal;
}

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

/* The state reads as an aside to the name it follows, on both lines. */
.map-hover-state {
    color: var(--map-muted);
    font-weight: 400;
}

.map-hover-name .map-hover-state { font-size: 14px; }
.map-hover-region .map-hover-state { font-size: 13px; }
.map-hover-state::before { content: " · "; }

.map-hover-lines {
    grid-column: 2;
    font-size: 13px;
    color: var(--map-muted);
    white-space: normal;
}

.map-hover-lines:empty { display: none; }

/* --- legend --------------------------------------------------------------- */

.map-legend {
    position: absolute;
    left: 12px;
    bottom: 44px;
    max-width: 320px;
    background: rgba(22, 33, 59, .92);
    border: 1px solid var(--map-line);
    border-radius: 10px;
    font-size: 12px;
}

.map-legend > summary {
    padding: 8px 12px;
    color: var(--map-text);
    cursor: pointer;
    user-select: none;
}

.map-legend ul {
    margin: 0;
    padding: 0 12px 10px;
    list-style: none;
}

.map-legend li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    color: var(--map-muted);
    line-height: 1.35;
}

.map-key {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border: 1px solid var(--map-land-edge);
    border-radius: 3px;
}

.map-key-visited { background: var(--map-visited); }
.map-key-none { background: var(--map-land); }

/* The saturation ramp, spelled out: barely-seen on the left, nearly-done on the
   right — the same mix map.js computes per country. */
.map-key-partly {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--map-visited) 20%, var(--map-land)),
        color-mix(in srgb, var(--map-visited) 68%, var(--map-land)));
}

.map-key-pin {
    border: 0;
    border-radius: 0;
    background: var(--map-pin);
    clip-path: polygon(50% 100%, 0 38%, 12% 12%, 50% 0, 88% 12%, 100% 38%);
}

/* --- zoom buttons -------------------------------------------------------- */

.map-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.map-zoom button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--map-line);
    border-radius: 8px;
    background: rgba(22, 33, 59, .92);
    color: var(--map-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.map-zoom button:hover { background: var(--map-line); color: #fff; }

/* --- hint ---------------------------------------------------------------- */

.map-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-width: 45%;
    margin: 0;
    color: var(--map-muted);
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none;
}

/* --- selection panel ----------------------------------------------------- */

.map-info {
    position: absolute;
    left: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(420px, calc(100% - 24px));
    padding: 12px 40px 12px 14px;
    background: rgba(22, 33, 59, .96);
    border: 1px solid var(--map-line);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

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

.map-info-flag { flex: 0 0 auto; width: 28px; height: 21px; border-radius: 3px; }
.map-info-body { min-width: 0; }
.map-info-name { display: block; font-size: 15px; }
.map-info-state { display: block; font-size: 12px; color: var(--map-muted); }

.map-info-link {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 8px;
    background: var(--map-visited);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.map-info-link:hover { background: var(--map-visited-hover); color: #fff; }
.map-info-link[hidden] { display: none; }

.map-info-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: 0;
    background: none;
    color: var(--map-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.map-info-close:hover { color: var(--map-text); }

/* --- phones -------------------------------------------------------------- */

@media (max-width: 700px) {
    .map-back-text { display: none; }
    /* The stats line is longer than a phone is wide, so it wraps under the
       title instead of being clipped by the language switcher. */
    .map-heading { font-size: 16px; white-space: normal; min-width: 0; }
    .map-count { display: block; margin: 0; font-size: 11px; }

    /* A panel pinned to the top would sit under the thumb that just tapped the
       country; on a phone it becomes a sheet at the bottom instead. */
    .map-info {
        left: 8px;
        right: 8px;
        top: auto;
        bottom: 8px;
        max-width: none;
    }

    .map-zoom { bottom: auto; top: 12px; }
    .map-hint { left: 8px; right: 66px; bottom: auto; top: 12px; max-width: none; }

    /* No hover card on a touch screen — the sheet does that job — and the
       legend folds away so it never covers the map. */
    .map-hover { display: none !important; }
    .map-legend { left: 8px; right: 8px; bottom: 8px; max-width: none; }
    /* The sheet and the legend both want the bottom edge; the sheet wins. */
    body.has-selection .map-legend { display: none; }
}

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

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