/* Minimapa pokrytí Focus service – sdílená pro skiny maketa (světlý) a noc (tmavý).
   Struktura: figure.mm[data-skin] > div.mm-mapa (sem vkládá SVG minimapa.js) + figcaption.mm-popis (statické HTML).
   Bez gradientů a září: tenké linky, plné body, jeden puls u základen, pak klid.
   Stav animace řídí JS atributem data-stav na .mm-mapa: ceka → hraje → hotovo; data-stop + --t = zmrazený průběh. */

/* ---------- skiny ---------- */
.mm, .mm-mapa {
  --mm-f: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mm-f-titul: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mm-w-titul: 500;
  --mm-pismo: 13px;                       /* popisky v mapě; JS je drží ve stálých px */
  --mm-bg: #ECEAE6;                       /* podklad sekce – lem popisků (přepište podle sekce) */
  --mm-plocha: rgba(10, 15, 36, .028);
  --mm-obrys: rgba(10, 15, 36, .34);
  --mm-bod: #0A0F24;
  --mm-zakl: #FFAD33;
  --mm-zakl-lem: #0A0F24;
  --mm-lem: 1.5px;                        /* lem základny */
  --mm-puls: #E8920C;                     /* puls základen – tmavší jantar kvůli kontrastu na světlé */
  --mm-text: #0A0F24;
  --mm-text-2: #585F80;
  --mm-linka: rgba(10, 15, 36, .14);
  --mm-tip-bg: #0A0F24;
  --mm-tip-fg: #FFFFFF;
}
.mm[data-skin="noc"], .mm-mapa[data-skin="noc"] {
  --mm-f-titul: 'Archivo', 'Barlow', system-ui, sans-serif;
  --mm-w-titul: 800;
  --mm-bg: #0A0F24;
  --mm-plocha: rgba(124, 199, 255, .035);
  --mm-obrys: rgba(150, 178, 210, .46);    /* světle modrá s nízkou sytostí */
  --mm-bod: #EEF2F8;
  --mm-zakl-lem: #0A0F24;
  --mm-lem: 1px;
  --mm-puls: #FFAD33;
  --mm-text: #EEF2F8;
  --mm-text-2: #9AA5BE;
  --mm-linka: rgba(154, 165, 190, .2);
  --mm-tip-bg: #EEF2F8;
  --mm-tip-fg: #0A0F24;
}
@media (max-width: 560px) { .mm, .mm-mapa { --mm-pismo: 12px; } }

/* ---------- mapa ---------- */
.mm { margin: 0; color: var(--mm-text); font-family: var(--mm-f); }
.mm-mapa { position: relative; aspect-ratio: 960 / 660; color: var(--mm-text); }
@media (scripting: none) { .mm-mapa { display: none; } }   /* bez JS zůstane jen text a seznam měst */
.mm-svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--mm-f); font-weight: 600; font-size: calc(var(--mm-pismo) * var(--k, 1)); -webkit-user-select: none; user-select: none; }
.mm-o { fill: var(--mm-plocha); stroke: var(--mm-obrys); stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mm-b, .mm-p { transform-box: fill-box; transform-origin: center; }
.mm-b { fill: var(--mm-bod); }
.mm-z { fill: var(--mm-zakl); stroke: var(--mm-zakl-lem); stroke-width: var(--mm-lem); vector-effect: non-scaling-stroke; }
.mm-p { fill: none; stroke: var(--mm-puls); stroke-width: 1.25px; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; }
.mm-l { fill: var(--mm-text); stroke: var(--mm-bg); stroke-width: .32em; stroke-linejoin: round; paint-order: stroke; letter-spacing: .01em; pointer-events: none; }
.mm-sk { fill: none; stroke: var(--mm-text-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mm-skt { fill: var(--mm-text-2); font-size: .85em; font-weight: 500; letter-spacing: .02em; }

/* ostatní města: větší neviditelná plocha pro myš, zvýraznění při najetí / fokusu */
.mm-b[aria-label] { stroke: transparent; stroke-width: 14px; vector-effect: non-scaling-stroke; }
.mm-b[aria-label]:focus { outline: none; }
.mm-mapa[data-stav="hotovo"] .mm-b[aria-label] { transition: transform .18s cubic-bezier(.2, .7, .2, 1); }
.mm-mapa[data-stav="hotovo"] .mm-b[aria-label]:is(:hover, :focus-visible) { transform: scale(1.7); }   /* barva zůstává – jantar patří základnám */

.mm-tip { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 13px)); padding: 6px 9px 7px; border-radius: 3px; background: var(--mm-tip-bg); color: var(--mm-tip-fg); font: 500 13px/1 var(--mm-f); letter-spacing: .01em; white-space: nowrap; pointer-events: none; }
.mm-tip::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 7px; background: var(--mm-tip-bg); }
.mm-tip[hidden] { display: none; }

/* ---------- animace (jen jednou, pak klid) ---------- */
.mm-mapa[data-stav="ceka"] :is(.mm-b, .mm-l) { opacity: 0; }
.mm-mapa[data-stav="hraje"] .mm-b { animation: mm-bod .6s cubic-bezier(.2, .7, .2, 1) var(--d) both; }
.mm-mapa[data-stav="hraje"] .mm-z { animation-name: mm-zakl; }
.mm-mapa[data-stav="hraje"] .mm-p { animation: mm-puls 1s cubic-bezier(.1, .6, .3, 1) var(--d) forwards;   /* před startem neviditelný */ }
.mm-mapa[data-stav="hraje"] .mm-l { animation: mm-text .5s ease-out var(--d) both; }
.mm-mapa[data-stop] * { animation-play-state: paused !important; animation-delay: calc(var(--d, 0s) - var(--t, 0s)) !important; }
/* město se rozsvítí jantarem a usadí do barvy bodu */
@keyframes mm-bod { 0% { transform: scale(0); fill: var(--mm-zakl); } 35% { transform: scale(1.6); fill: var(--mm-zakl); } 70% { transform: scale(1); fill: var(--mm-zakl); } 100% { transform: scale(1); } }
@keyframes mm-zakl { 0% { transform: scale(0); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes mm-puls { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(6.5); } }
@keyframes mm-text { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mm-mapa * { animation: none !important; transition: none !important; }
  .mm-mapa[data-stav="ceka"] :is(.mm-b, .mm-l) { opacity: 1; }
}

/* ---------- popis pod mapou (statické HTML) ---------- */
.mm-popis { margin-top: clamp(16px, 2.2vw, 28px); padding-top: clamp(14px, 1.6vw, 20px); border-top: 1px solid var(--mm-linka); display: grid; gap: 12px; }
.mm-titul { font-family: var(--mm-f-titul); font-weight: var(--mm-w-titul); font-size: clamp(21px, 1.15rem + .7vw, 28px); line-height: 1.15; letter-spacing: -.01em; color: var(--mm-text); }
.mm-legenda { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; list-style: none; font: 500 14px/1.4 var(--mm-f); color: var(--mm-text-2); }
.mm-legenda li { display: inline-flex; align-items: center; gap: 9px; }
.mm-legenda svg { flex: none; overflow: visible; }
.mm-legenda .mm-lz { fill: var(--mm-zakl); stroke: var(--mm-zakl-lem); stroke-width: var(--mm-lem); }
.mm-legenda .mm-lb { fill: var(--mm-bod); }
.mm-seznam { font: 400 14px/1.65 var(--mm-f); color: var(--mm-text-2); }
.mm-seznam summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; list-style: none; font-weight: 500; color: var(--mm-text); }
.mm-seznam summary::-webkit-details-marker { display: none; }
.mm-seznam summary::after { content: ''; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s; }
.mm-seznam[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.mm-seznam summary:hover { text-decoration: underline; text-decoration-color: var(--mm-zakl); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.mm-seznam summary:focus-visible { outline: 2px solid var(--mm-zakl); outline-offset: 3px; border-radius: 2px; }
.mm-seznam ul { margin: 10px 0 0; padding: 0; list-style: none; columns: 4 140px; column-gap: 24px; }
.mm-seznam li { break-inside: avoid; }
.mm-seznam .mm-sz { color: var(--mm-text); font-weight: 500; }