:root {
  --ink:#22201d; --muted:#6d675c; --dim:#938c7f;
  /* Panel je BIELY a krémová je uz len povrch skupin. Predtym bola krémová na
     celej ploche a panel posobil ako papierovy formular - papier ma byt mapa,
     nie chrom okolo nej. */
  --panel:#fff; --surf:#f3f0e9; --surf-hi:#eae5da; --hair:rgba(34,32,29,.075);
  /* Jediny akcent panela: zapnuty prepinac, vybrana zostava, vybrany podklad,
     hlavne tlacidlo. Je to farba skupiny „priroda", teda farba z mapy. */
  --acc:#4a6238; --acc-dark:#3e5330;
  --map-bg:#23262a;
  --lbl-ink:#33302a; --lbl-bg:rgba(251,249,243,.88); --pin-ring:rgba(251,249,243,.92);
  --place-ink:#3a342c; --place-halo:#fbf9f3;
  /* Nasobic velkosti pisma NA MAPE - nastavuje ho `applyFontSize()` podla
     volby malé/stredné/veľké. Canvasove vrstvy si ho beru cez `fpx()`. */
  --fs:1;
  /* Mierka ZNACIEK podla priblizenia - nastavuje ju `applyMarkerScale()`.
     Iná vec než `--fs`: písmo si volí človek, toto sa riadi zoomom. */
  --mk:1;
  /* Tien je prevzaty z hladamchatu.sk - mäkky a siroky, aby biela pilulka
     drzala nad mapou aj ked je pod nou svetly podklad. */
  --lift:0 6px 24px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.08);
}
/* Herna schema: podklad je skoro biely, takze teply hnedy text na nom posobi
   vyblednuto - v hre su nazvy ciernou. */
body[data-theme="hra"] {
  --place-ink:#1b1b1b; --place-halo:#ffffff;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; font:14px/1.45 ui-sans-serif,-apple-system,"Segoe UI",sans-serif; color:var(--ink); }
/* pozadie zamerne NEmodre - aby sa chybajuca dlazdica nedala pomylit s morom */
#map { position:absolute; inset:0; background:var(--map-bg); }
/* Pravitko so suradnicami po okrajoch okna. Nad dlazdicami aj vektormi
   (pany maju z-index do 700), pod panelmi (1000) a nepresklikatelne. */
#ruler { position:absolute; inset:0; z-index:900; pointer-events:none; }

/* ============================================================
   HORNA LISTA - jedna pilulka v strede
   Predloha je vyhladavaci panel z hladamchatu.sk: radius 2rem,
   vyska 3,625 rem, biela, mäkky tien.
   ============================================================ */
/* `top` musi minut pas suradnic po okraji okna (`RULER_BAND` = 26 px v app.js).
   Pri 12 px pilulka prekryvala horny riadok cisel. */
#topbar { position:absolute; z-index:1100; top:34px; left:50%; transform:translateX(-50%);
          width:min(560px, calc(100vw - 24px)); }
#find { position:relative; }
#findBox { display:flex; align-items:center; gap:10px; min-height:3.625rem;
           background:#fff; border-radius:2rem; padding:0 7px 0 18px; box-shadow:var(--lift); }
#findBox .ico { width:19px; height:19px; flex:0 0 auto; fill:var(--dim); }
#findQ {
  flex:1; min-width:0; border:0; background:none; padding:0;
  font:15px/1.3 ui-sans-serif,-apple-system,sans-serif; color:var(--ink);
  -webkit-appearance:none; appearance:none;
}
#findQ::-webkit-search-cancel-button { display:none; }
#findQ::placeholder { color:var(--dim); }
#findQ:focus { outline:none; }
#findClr { border:0; background:none; color:var(--dim); font-size:19px; line-height:1;
           padding:2px 4px; cursor:pointer; display:none; }
#findClr:hover { color:var(--ink); }
#findBox.has #findClr { display:block; }
/* tlacidlo filtra - sedi v pilulke vpravo, ako na predlohe */
#fab { flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
       background:var(--ink); color:#fff; display:grid; place-items:center; position:relative;
       transition:background .14s; }
#fab:hover { background:#3a352e; }
#fab.on { background:var(--acc); }
#fab svg { width:20px; height:20px; fill:currentColor; }
/* pocet zapnutych vrstiev objektov - bez neho clovek nevie, ze nieco ma
   zapnute, ked je filter zavrety */
/* Pocet zapnutych vrstiev je UDAJ, nie poplach. Cervena z neho robila chybovu
   hlasku a bola najkriklavejsia vec na celej obrazovke; zelena je farba
   akcentu panela, teda farba z mapy, a v rohu tlacidla ju vidno rovnako dobre. */
#fabCount { display:none; position:absolute; top:-1px; right:-1px; min-width:18px; height:18px;
            padding:0 5px; border-radius:9px; background:var(--acc); color:#fff;
            font:600 10px/18px ui-sans-serif,-apple-system,sans-serif;
            box-shadow:0 0 0 2px #fff; }
#fabCount.on { display:block; }

#findRes { display:none; position:absolute; left:0; right:0; top:calc(100% + 8px);
           max-height:min(52vh, 520px); overflow:auto; background:#fff;
           border-radius:18px; box-shadow:var(--lift); padding:6px; }
#findRes.on { display:block; }
#findRes .r { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer;
              border-radius:12px; }
#findRes .r:hover, #findRes .r.sel { background:var(--surf); }
#findRes .ic { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
#findRes .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
              white-space:nowrap; font-size:13.5px; }
#findRes .t em { font-style:normal; color:var(--dim); font-size:11px; }
#findRes .s { flex:0 0 auto; color:var(--dim); font-size:11px; letter-spacing:.04em;
              font-variant-numeric:tabular-nums; }
#findRes .none { padding:10px; color:var(--muted); font-size:12.5px; }
/* Napoveda k formatom sa ukaze, az ked je pole prazdne a ma kurzor - vtedy
   clovek vaha, co tam napisat. Pri pisani uz na tom mieste su vysledky. */
#findHint { display:none; position:absolute; left:10px; right:10px; top:calc(100% + 8px);
            background:rgba(34,32,29,.9); color:#e8e3d8; font-size:11.5px;
            padding:8px 12px; border-radius:12px; }
#findHint b { color:#fff; }
#findBox:focus-within:not(.has) ~ #findHint { display:block; }

/* ============================================================
   FILTER - na PC modal v strede, na mobile harok zdola
   Povrchy namiesto obrysov: ziadny prvok v paneli nema ram,
   odlisuje sa plochou. Vlasove delice oddeluju riadky VNUTRI
   jednej plochy.
   ============================================================ */
#back { position:fixed; inset:0; z-index:1190; background:rgba(20,18,16,.34);
        opacity:0; pointer-events:none; transition:opacity .18s; }
#back.on { opacity:1; pointer-events:auto; }
#sheet {
  position:fixed; z-index:1200; left:50%; top:50%;
  width:min(620px, calc(100vw - 32px)); max-height:min(84vh, 860px);
  display:flex; flex-direction:column; background:var(--panel);
  border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.1);
  opacity:0; pointer-events:none; transform:translate(-50%, calc(-50% + 10px));
  transition:opacity .16s ease, transform .16s ease; overflow:hidden;
}
#sheet.on { opacity:1; pointer-events:auto; transform:translate(-50%, -50%); }
#sheet > header { display:flex; align-items:center; gap:12px; padding:18px 22px 12px; }
#sheet > header b { font-size:20px; letter-spacing:-.015em; }
/* Verzia vedla nadpisu filtra. Ma sa dat precitat, ale nema sutazit
   s nadpisom - preto povrch namiesto farby a mala verzalka. */
#sheet > header .ver { font:700 10px/1 ui-sans-serif,-apple-system,sans-serif;
                       letter-spacing:.09em; color:var(--muted); background:var(--surf);
                       padding:5px 8px; border-radius:7px; align-self:center; }
#sheet > header .x { margin-left:auto; width:34px; height:34px; border:0; border-radius:50%;
       cursor:pointer; background:var(--surf); color:var(--muted); font-size:19px;
       line-height:1; display:grid; place-items:center; }
#sheet > header .x:hover { background:var(--surf-hi); color:var(--ink); }
#sheet .grip { display:none; }
/* Tenky scrollbar - hruby systemovy pas vedla obsahu bol jeden z najhlasnejsich
   prvkov panela. */
#sheet .body { flex:1; overflow:auto; padding:4px 22px 18px;
               scrollbar-width:thin; scrollbar-color:var(--surf-hi) transparent; }
#sheet .body::-webkit-scrollbar { width:8px; }
#sheet .body::-webkit-scrollbar-thumb { background:var(--surf-hi); border-radius:4px;
                                        border:2px solid var(--panel); }

/* Nadpis sekcie je mala verzalka - predloha z hladamchatu.sk. Predtym to bola
   veta beznym pismom a pri osmich sekciach sa hranica sekcie stratila
   v obsahu. Poznamka vpravo (pocty, „priblíž na z5") patri k nadpisu. */
/* Nazov sekcie je ZACIATOK novej casti, nie popisok nad polom. Kym bol drobny
   a vyblednuty, filter vyzeral ako jeden dlhy zoznam a clovek v nom nevedel,
   kde je - preto je tmavy, vacsi a oddeleny linkou nad sebou. */
#sheet h2 { display:flex; align-items:baseline; gap:8px;
            margin:26px 0 10px; padding-top:14px; border-top:1px solid var(--hair);
            font:700 12.5px/1.3 ui-sans-serif,-apple-system,sans-serif;
            letter-spacing:.07em; text-transform:uppercase; color:var(--ink); }
#sheet h2 em { margin-left:auto; font:400 11px/1 ui-sans-serif,sans-serif;
               letter-spacing:0; text-transform:none; color:var(--dim);
               font-variant-numeric:tabular-nums; }
#sheet .body > h2:first-child { margin-top:10px; padding-top:0; border-top:0; }
/* Skladacia sekcia („Detail mapy"). Nadpis vyzera ako ostatne nadpisy, len ma
   pod sebou plochu a NALAVO slovne tlacidlo „Otvoriť". Dva pokusy predtym
   zlyhali na tom istom: sipku - ci uz stvorcek na zaciatku alebo znak na konci -
   clovek prehliadne, slovo nie. Klikatelny je cely riadok, tlacidlo je len
   znamenie, ze sa to da. */
#sheet h2.fold { margin:24px 0 10px; padding:11px 14px; border-radius:16px;
                 border:1px solid rgba(74,98,56,.22); background:var(--surf);
                 cursor:pointer; user-select:none; }
#sheet h2.fold:hover { background:var(--surf-hi); border-color:rgba(74,98,56,.45); }
/* Tlacidlo je vpravo na konci riadku, teda tam, kam oko dojde po precitani
   nadpisu aj poctu - nalavo stalo pred nazvom sekcie a citalo sa skor ako on. */
#sheet h2.fold .open { order:3; margin-left:10px;
                       flex:0 0 auto; padding:5px 11px; border:0; border-radius:999px;
                       background:var(--acc); color:#fff; cursor:pointer;
                       font:700 10.5px/1.3 ui-sans-serif,-apple-system,sans-serif;
                       letter-spacing:.06em; text-transform:uppercase; }
#sheet h2.fold em { order:2; }
#sheet h2.fold:hover .open { background:var(--acc-dark); }
#sheet .hint { color:var(--dim); font-size:11.5px; margin:-3px 0 8px; }
#sheet .note { color:var(--muted); font-size:12px; margin-top:8px; }

/* ---- podklad: nahlady map ---- */
/* Nazov schemy („turisticka") nepovie nic - kazdy podklad je iny svet. Nahlad
   je ozajstna dlazdica z tej schemy, ten isty vyrez pre vsetkych pat. */
.maps { display:flex; gap:8px; }
.maps .map { flex:1 1 0; min-width:0; border:0; background:none; padding:0; cursor:pointer;
             display:flex; flex-direction:column; gap:6px; color:var(--muted); }
.maps .map i { display:block; width:100%; aspect-ratio:4/3; border-radius:12px;
               background:var(--bg, var(--surf)) center/cover no-repeat;
               background-image:var(--t); box-shadow:inset 0 0 0 1px var(--hair);
               transition:box-shadow .13s; }
.maps .map span { font:500 11px/1.2 ui-sans-serif,-apple-system,sans-serif; text-align:center;
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.maps .map:hover i { box-shadow:inset 0 0 0 1px var(--hair), 0 0 0 2px var(--surf-hi); }
.maps .map.on i { box-shadow:0 0 0 3px var(--acc); }
.maps .map.on { color:var(--ink); }
.maps .map.on span { font-weight:700; }
.maps .map:focus-visible i { box-shadow:0 0 0 3px var(--muted); }

/* ---- polia ---- */
.pair { display:flex; gap:10px; margin-top:14px; }
.field { flex:1 1 0; min-width:0; display:block; padding:0; margin:0; cursor:default; }
.field.wide { margin-top:10px; }
.field > span { display:block; font-size:11px; color:var(--dim); margin-bottom:5px; }
#sheet select {
  width:100%; height:44px; padding:0 34px 0 13px; cursor:pointer; border:0; border-radius:13px;
  font:600 13.5px/1 ui-sans-serif,-apple-system,sans-serif; color:var(--ink);
  background:var(--surf) no-repeat right 13px center/10px 6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%236d675c'/%3E%3C/svg%3E");
  -webkit-appearance:none; appearance:none;
}
#sheet select:hover { background-color:var(--surf-hi); }
#sheet select:focus-visible { outline:2px solid var(--muted); outline-offset:1px; }

/* Segment je JEDEN track s vyplnenym dielom, nie samostatne tlacidla vedla
   seba - vyber je tak plocha, nie linka okolo. */
.seg { display:flex; height:44px; padding:4px; gap:4px; background:var(--surf); border-radius:13px; }
.seg button { flex:1; min-width:0; border:0; border-radius:10px; background:none; cursor:pointer;
              color:var(--muted); font:600 13px/1 ui-sans-serif,-apple-system,sans-serif; }
.seg button:hover { color:var(--ink); }
.seg button.on { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.14); }
/* velkost pisma sa da ukazat samotnym pismom - popisok „A A A" netreba */
.seg.font button:nth-child(1) { font-size:11px; }
.seg.font button:nth-child(2) { font-size:13px; }
.seg.font button:nth-child(3) { font-size:15.5px; }

/* ---- rychle volby ---- */
/* Mriezka po piatich, nie volne zalamovanie: desat volieb vyjde na dva
   vyvazene riadky (hore krajina a mapa, dole vojna a spawny). */
.quick { display:grid; grid-template-columns:repeat(5, 1fr); gap:2px; }
.quick .q { min-width:0; padding:6px 0 7px; border:0; background:none; cursor:pointer;
            display:flex; flex-direction:column; align-items:center; gap:6px;
            border-radius:14px; color:var(--muted); }
.quick .q:hover { background:var(--surf); }
.quick .q i {
  width:46px; height:46px; border-radius:50%; display:block; background:var(--surf);
  transition:background .13s ease, box-shadow .13s ease;
}
/* ikona je maska, aby sa dala prefarbit spolu so stavom */
.quick .q i::before {
  content:''; display:block; width:100%; height:100%; background:var(--c);
  -webkit-mask:var(--i) center/21px 21px no-repeat; mask:var(--i) center/21px 21px no-repeat;
}
.quick .q span { font:500 10.5px/1.2 ui-sans-serif,-apple-system,sans-serif;
                 max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quick .q.on i { background:var(--c);
                 box-shadow:0 2px 6px color-mix(in srgb, var(--c) 45%, transparent); }
.quick .q.on i::before { background:#fff; }
.quick .q.on { color:var(--ink); }
.quick .q.on span { font-weight:700; }
/* Rozpracovany stav: tlacidlo nesie viac vrstiev a zapnuta je len cast.
   Nie je to ani plna farba, ani prazdny povrch - je to prstenec vo farbe
   vrstvy. Bez neho po vypnuti cerpaciek zhaslo cele „budovy", hoci na mape
   zostalo 17 vrstiev z 18, a vyzeralo to, ze sa zrusili vsetky. */
.quick .q.part i { box-shadow:inset 0 0 0 2.5px var(--c); }
.quick .q.part { color:var(--ink); }
.quick .q.part span { font-weight:600; }
.quick .q:focus-visible { outline:2px solid var(--muted); outline-offset:1px; }

/* ---- zostava (presety) ---- */
.pills { display:flex; flex-wrap:wrap; gap:6px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border:0;
        border-radius:999px; background:var(--surf); color:var(--ink); cursor:pointer;
        font:600 12.5px/1.2 ui-sans-serif,-apple-system,sans-serif; transition:background .13s; }
.pill:hover { background:var(--surf-hi); }
/* Preset nie je vrstva, farbu z mapy nema - vybera sa jedinym akcentom panela. */
#presetSel .pill.on { background:var(--acc); color:#fff; }
.pill:focus-visible { outline:2px solid var(--muted); outline-offset:1px; }

/* ---- riadky s prepinacom ---- */
/* Skupina riadkov je jeden povrch s vlasovymi delicmi. Zaskrtavadlo zostalo
   zaskrtavadlom (kvoli `app.js`), len je schovane a vedla neho sa kresli
   prepinac. */
.list { background:var(--surf); border-radius:14px; overflow:hidden; }
.list + .field { margin-top:12px; }
#sheet .row { display:flex; align-items:center; gap:10px; padding:11px 14px; margin:0;
              cursor:pointer; user-select:none; position:relative; border-radius:0; }
#sheet .row + .row::before { content:''; position:absolute; left:14px; right:14px; top:0;
                             height:1px; background:var(--hair); }
#sheet .row:hover { background:var(--surf-hi); }
#sheet .row input[type=checkbox] { position:absolute; opacity:0; width:0; height:0;
                                   margin:0; pointer-events:none; }
#sheet .row .t { flex:1; min-width:0; font-size:13.5px; }
#sheet .row .n { font-size:11.5px; color:var(--dim); font-variant-numeric:tabular-nums;
                 white-space:nowrap; }
#sheet .row.sub .t { padding-left:16px; font-size:13px; color:var(--muted); }
/* odrazka podradeneho riadku - kratka linka, nie odsadenie naslepo */
#sheet .row.sub .t::before { content:''; position:absolute; left:16px; top:50%; width:8px;
                             height:1px; background:var(--dim); opacity:.5; }
#sheet .row .sw { flex:0 0 auto; width:40px; height:24px; border-radius:12px;
                  background:#d5cfc1; position:relative; transition:background .15s; }
#sheet .row .sw::after { content:''; position:absolute; left:3px; top:3px; width:18px;
                         height:18px; border-radius:50%; background:#fff;
                         box-shadow:0 1px 3px rgba(0,0,0,.24); transition:transform .15s; }
#sheet .row input:checked ~ .sw { background:var(--acc); }
#sheet .row input:checked ~ .sw::after { transform:translateX(16px); }
#sheet .row input:checked ~ .t { font-weight:600; }
/* ciastocny stav skupiny - prepinac je vyfarbeny, ale kolik zostava v strede */
#sheet .row input:indeterminate ~ .sw { background:color-mix(in srgb, var(--acc) 45%, #d5cfc1); }
#sheet .row input:indeterminate ~ .sw::after { transform:translateX(8px); }
#sheet .row input:focus-visible ~ .sw { outline:2px solid var(--muted); outline-offset:2px; }
#trailNote i { display:inline-block; width:4px; height:4px; border-radius:50%;
               margin-left:2px; vertical-align:2px; }
/* Legenda TIER zon je stupnica, nie zoznam - stvorceky sa dotykaju a idu od
   najslabsieho lootu po najlepsi, takze aj bez popisu je poznat smer. */
#tierLegend i { display:inline-block; width:9px; height:9px; vertical-align:-1px; }
#tierLegend i:first-child { border-radius:2px 0 0 2px; }
#tierLegend span { margin-left:5px; }
/* Prekryv TIER zon: kryciu silu uz nesie alfa v samotnom PNG, tu sa len
   vypina vyhladzovanie - hranice zon su ostre v datach a maju take zostat. */
.leaflet-image-layer.tiers { image-rendering:pixelated; }

/* ---- chipy vrstiev ---- */
/* Zapnuty chip je VYPLNENY farbou, akou je vrstva na mape - chip tak zostava
   legendou, nielen tlacidlom. Vypnuty je biely povrch s farebnou bodkou. */
.chips { display:flex; flex-wrap:wrap; gap:5px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:0;
        border-radius:999px; background:#fff; color:var(--ink); cursor:pointer;
        font:500 12.5px/1.2 ui-sans-serif,-apple-system,sans-serif; transition:background .13s; }
.chip:hover { background:var(--surf-hi); }
.chip .d { width:8px; height:8px; border-radius:50%; background:var(--c); flex:0 0 auto; }
.chip .n { font-size:10.5px; color:var(--dim); font-variant-numeric:tabular-nums; }
.chip.on { background:var(--c); color:#fff; font-weight:600; }
.chip.on .d { background:rgba(255,255,255,.85); }
.chip.on .n { color:rgba(255,255,255,.72); }
.chip:focus-visible { outline:2px solid var(--muted); outline-offset:1px; }
/* Chip oblasti (stale zamorene zony) ma krúžok namiesto plnej bodky - to je
   ta ista rec ako na mape, kde je zona kruh s prerusovanou hranicou. */
.chip.area .d { background:none; box-shadow:inset 0 0 0 2px var(--c); }
.chip.area.on .d { background:none; box-shadow:inset 0 0 0 2px #fff; }
/* chipy priamo na bielom paneli (spawny) potrebuju povrch, nie bielu na bielej */
.chips.bare .chip { background:var(--surf); }
.chips.bare .chip:hover { background:var(--surf-hi); }
.chips.bare .chip.on { background:var(--c); }

/* ---- strom objektov ---- */
#objSel .list.all { margin-bottom:6px; }
.grp { background:var(--surf); border-radius:14px; margin-bottom:6px; overflow:hidden; }
/* Hlavicka skupiny je odsadena o 3 px a ma vlastne zaoblenie: bez toho sa jej
   podsvietenie pri prejdeni mysou oprelo o okraje skupiny a vyzeralo ako
   preseknuty obdlznik prilepeny k chipom pod nim. */
.grp > .row { background:none; margin:3px; padding:10px 11px; border-radius:12px; }
.grp .swatch { width:11px; height:11px; border-radius:4px; flex:0 0 auto; }
/* Skupiny su rozbalene od zaciatku - tak je hned vidno, co v nich je, a zmizne
   otazka, ci sa to vobec da otvorit. Sipka je plnohodnotne okruhle tlacidlo. */
.grp .cv { width:26px; height:26px; flex:0 0 auto; border:0; border-radius:50%;
           background:#fff; color:var(--muted); cursor:pointer; display:grid;
           place-items:center; transition:transform .16s, box-shadow .13s; }
.grp .cv:hover { color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.16); }
.grp .cv svg { width:11px; height:11px; fill:currentColor; }
.grp.shut .cv { transform:rotate(-90deg); }
/* Hore 7 px + 3 px odsadenie hlavicky = 10, dole 12 - opticky rovnako, lebo
   hlavicka ma nad chipmi este vlastny riadok. Pri 2 px sa prvy chip lepil
   na hlavicku a skupina vyzerala ako dva zlepene bloky. */
.grp .types { padding:7px 12px 12px; }
.grp.shut .types { display:none; }
/* Skupina s jedinym typom nema co rozbalovat - chip pod nou by len zopakoval
   jej vlastny nazov aj pocet. Ostava samotny riadok, bez sipky a bez odsadenia. */
.grp.sam .types { display:none; }
.grp.sam > .row { padding-left:16px; }

/* ---- zoom ---- */
/* Slajder v zozname vrstiev vyzera ako riadok so zaskrtavadlom - ta ista
   dlazdica, ta ista vyska. Nema byt cudzie teleso, je to len iny druh volby. */
.slider { display:flex; align-items:center; gap:12px; background:var(--surf);
          border-radius:14px; padding:11px 14px; margin-bottom:10px; }
.slider .t { flex:0 0 auto; }
.slider input { flex:1; min-width:0; margin:0; accent-color:var(--acc); }
.slider span:last-child { width:44px; text-align:right; color:var(--muted);
                          font-variant-numeric:tabular-nums; }
#zoomRow { display:flex; align-items:center; gap:12px; background:var(--surf);
           border-radius:14px; padding:13px 14px; }
#zoomRow input { flex:1; margin:0; accent-color:var(--acc); }
#zoomVal { width:26px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
#zoomNote { color:var(--muted); font-size:12px; margin-top:6px; }
#zoomNote b { color:var(--acc); font-weight:600; }
#zoomBtns { display:flex; gap:4px; margin-top:6px; }
#zoomBtns button { flex:1; min-width:0; border:0; border-radius:9px; background:var(--surf);
                   cursor:pointer; padding:9px 0; color:var(--muted);
                   font:600 11.5px/1 ui-sans-serif,sans-serif; font-variant-numeric:tabular-nums; }
#zoomBtns button:hover { background:var(--surf-hi); }
#zoomBtns button.on { background:var(--acc); color:#fff; }
/* nad vlastnym zoomom dlazdic sa uz len zvacsuje - preto tlmene */
#zoomBtns button.up { opacity:.55; }

details#more { margin-top:18px; border-top:1px solid var(--hair); padding-top:12px; }
details#more > summary {
  cursor:pointer; user-select:none; list-style:none; color:var(--muted);
  font:600 12.5px/1.3 ui-sans-serif,-apple-system,sans-serif; padding:3px 0;
}
details#more > summary::-webkit-details-marker { display:none; }
details#more > summary::before { content:'▸ '; display:inline-block; }
details#more[open] > summary::before { content:'▾ '; }
details#more > summary:hover { color:var(--ink); }
#baseSel { margin-top:8px; }
.baseRow { padding:2px 0 6px; }
.baseRow label { display:flex; align-items:center; gap:8px; padding:5px 0; cursor:pointer; }
.baseRow .op { display:flex; align-items:center; gap:7px; padding-left:22px; }
.baseRow .op input { flex:1; margin:0; accent-color:var(--acc); }
.baseRow .op span { width:38px; text-align:right; font-size:12px; color:var(--muted);
                    font-variant-numeric:tabular-nums; }
.baseRow.off .op { opacity:.35; }

/* ---- patka ---- */
#sheet > footer { display:flex; align-items:center; gap:12px; padding:14px 22px 16px;
                  border-top:1px solid var(--hair); background:var(--panel); }
#sheet > footer .clr { border:0; background:none; padding:6px 2px; cursor:pointer;
                       color:var(--muted); font:600 13px/1 ui-sans-serif,sans-serif; }
#sheet > footer .clr:hover { color:var(--ink); text-decoration:underline; }
#sheet > footer .prim {
  margin-left:auto; min-height:50px; padding:0 26px; border:0; border-radius:2rem;
  cursor:pointer; background:var(--acc); color:#fff;
  font:700 15px/1 ui-sans-serif,-apple-system,sans-serif;
  box-shadow:0 4px 14px rgba(74,98,56,.35);
}
#sheet > footer .prim:hover { background:var(--acc-dark); }
#sheet > footer .prim span { opacity:.72; font-weight:500; }

/* ============================================================
   CO MAM OZNACENE - na PC karta vpravo dole, na mobile harok
   ============================================================ */
#sel { display:none; position:fixed; z-index:1150; right:12px; bottom:12px; width:328px;
       background:var(--panel); border-radius:16px;
       box-shadow:0 10px 34px rgba(0,0,0,.22); overflow:hidden; }
#sel.on { display:block; }
#sel header { display:flex; align-items:center; gap:9px; padding:10px 8px 10px 12px;
              cursor:pointer; user-select:none; }
#sel header:hover { background:var(--surf); }
#sel .grip { display:none; }
#sel .gridref { font:700 14px/1 ui-sans-serif,-apple-system,sans-serif; letter-spacing:.1em;
                background:var(--ink); color:#fff; padding:5px 9px; border-radius:6px;
                font-variant-numeric:tabular-nums; }
#sel .ql { display:block; color:var(--muted); font-size:12.5px; min-width:0;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Rozbalenie karty. Ten isty tvar a takmer ta ista velkost ako krizik vedla,
   len svetly povrch namiesto tmaveho: dvojica tlacidiel, kde je hned poznat,
   ze tmave ZATVARA a svetle ROZBALUJE. Ako holy znak `▾` vedla tmaveho kruhu
   uplne zanikol. */
#sel .caret { margin-left:auto; flex:0 0 auto; width:34px; height:34px; border:0;
              border-radius:50%; background:var(--surf); color:var(--muted);
              cursor:pointer; padding:0; display:grid; place-items:center;
              transition:transform .14s, background .13s, color .13s; }
#sel .caret svg { width:16px; height:16px; stroke:currentColor; stroke-width:2.2;
                  stroke-linecap:round; stroke-linejoin:round; fill:none; }
#sel .caret:hover { background:var(--surf-hi); }
#sel .caret:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
/* Zatvorenie karty merania. Predtym to bola bleda `×` bez pozadia a na mobile
   sa do nej trafil malokto - splyvala s hlavickou a mala plochu asi 20 px.
   Teraz je to tmavy kruh s bielym krizikom: je jasne, ze sa da stlacit, kam
   sa ma trafit, aj ze to nieco ZATVORI. 38 px je spodna hranica, pri ktorej
   sa na dotykovom displeji trafi clovek na prvy pokus. */
#sel .x { flex:0 0 auto; width:38px; height:38px; border:0; border-radius:50%;
          cursor:pointer; background:var(--ink); color:#fff;
          display:grid; place-items:center; padding:0;
          box-shadow:0 1px 3px rgba(0,0,0,.22); transition:background .13s; }
#sel .x svg { width:17px; height:17px; stroke:currentColor; stroke-width:2.4;
              stroke-linecap:round; fill:none; }
#sel .x:hover { background:#3a352e; }
#sel .x:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
/* Sipka na rozbalenie zostava potichu - vedla nej ma krizik vyniknut. */
#sel .caret:hover { color:var(--ink); }
#sel .body { display:none; padding:0 14px 12px; max-height:min(62vh, 620px); overflow:auto; }
#sel.open .body { display:block; }
#sel.open .caret { transform:rotate(180deg); }
#sel .row { display:flex; justify-content:space-between; gap:18px; padding:2px 0; }
#sel .row span:first-child { color:var(--muted); }
#sel .row span:last-child { font-variant-numeric:tabular-nums; font-weight:600; }
/* Suradnice su tlacidla, nie text - klik ich skopiruje. Vyzerat maju ako
   ostatne hodnoty (ziadny ram), ale MUSI byt vidno, ze sa da kliknut - preto
   ikonka za cislom. Je trvalo viditelna, len stlmena: na dotyku sa „hover"
   nekona a skryta ikonka by bola ako ziadna. */
#sel .row .copy { display:inline-flex; align-items:center; gap:7px;
                  border:0; background:none; cursor:copy; color:inherit;
                  padding:2px 6px; margin:-2px -6px; border-radius:8px;
                  font:600 13px/1.45 ui-sans-serif,-apple-system,sans-serif;
                  font-variant-numeric:tabular-nums; transition:background .12s; }
#sel .row .copy::after {
  content:''; width:13px; height:13px; flex:0 0 13px; background:currentColor; opacity:.34;
  --ico:url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Crect x=%229%22 y=%229%22 width=%2212%22 height=%2212%22 rx=%222.5%22/%3E%3Cpath d=%22M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1%22/%3E%3C/svg%3E');
  -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat;
  transition:opacity .12s; }
#sel .row .copy:hover { background:var(--surf); }
#sel .row .copy:hover::after, #sel .row .copy:focus-visible::after { opacity:.8; }
#sel .row .copy:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }
/* Skopirovane: fajka a zelena. Ziadna hlaska - karta je mala. */
#sel .row .copy.done { color:var(--acc); background:none; }
#sel .row .copy.done::after { opacity:1;
  --ico:url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 12.5 9 17.5 20 6.5%22/%3E%3C/svg%3E'); }
#sel .note { margin-top:9px; padding-top:9px; border-top:1px solid var(--hair);
             color:var(--muted); font-size:12px; }

/* ---- o projekte, celkom na konci filtra ----
   Potichu: kto mapu len pouziva, nema do toho zakopnut. Vlasovy delic hore
   ho oddeli od poslednej sekcie, aby to nevyzeralo ako jej pokracovanie. */
/* Klavesove skratky - zbaleny blok tesne nad autorom. Vzhlad summary je
   zamerne rovnaky ako pri `details#more` vyssie: je to ten isty druh veci,
   teda „rozklikni, ak ta to zaujima". */
details.keys { margin-top:22px; border-top:1px solid var(--hair); padding-top:12px; }
details.keys > summary {
  cursor:pointer; user-select:none; list-style:none; color:var(--muted);
  font:600 12.5px/1.3 ui-sans-serif,-apple-system,sans-serif; padding:3px 0;
}
details.keys > summary::-webkit-details-marker { display:none; }
details.keys > summary::before { content:'▸ '; display:inline-block; }
details.keys[open] > summary::before { content:'▾ '; }
details.keys > summary:hover { color:var(--ink); }
#keysList { margin-top:8px; }
/* Klaves vlavo v pevnom stlpci, popis vpravo - oko tak ide dole po klavesoch
   a netrafi text v rozhadzanych miestach. */
.krow { display:flex; align-items:baseline; gap:10px; padding:4px 0;
        font-size:12.5px; color:var(--muted); }
.krow kbd { flex:0 0 136px; font:600 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
            color:var(--ink); background:var(--surf); border-radius:7px;
            padding:3px 8px; text-align:center; white-space:nowrap; }

/* ============================================================
   PÄTKA FILTRA - appka, čo to je, kto za tým stojí
   Je to META zóna, nie nastavenia: kto mapu len používa, nemá
   doň zakopnúť. Preto tichá typografia a jediná plná farba
   v celom bloku je ikonka appky.
   ============================================================ */
#install { margin-top:26px; padding-top:16px; border-top:1px solid var(--hair); }
/* Ponuka appky je KARTA, nie holé tlačidlo. Holé tlačidlo vyzeralo ako
   ovládací prvok filtra a strácalo sa medzi prepínačmi; karta hovorí
   „toto je samostatná ponuka" a vysvetlí, čo sa po kliknutí stane. */
#install .card { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
                 background:var(--surf); border-radius:16px; padding:12px 14px; }
#install .ico { width:36px; height:36px; flex:0 0 36px; border-radius:12px;
                background:var(--acc); position:relative; }
/* šípka do priečinka - ten istý znak, aký má inštalácia v obchodoch s appkami */
#install .ico::after {
  content:''; position:absolute; inset:0; background:#fff;
  --ico:url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d=%22M74.34,101.66a8,8,0,0,1,11.32-11.32L120,124.69V32a8,8,0,0,1,16,0v92.69l34.34-34.35a8,8,0,0,1,11.32,11.32l-48,48a8,8,0,0,1-11.32,0ZM240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16H72a8,8,0,0,1,0,16H32v64H224V136H184a8,8,0,0,1,0-16h40A16,16,0,0,1,240,136Z%22/%3E%3C/svg%3E');
  -webkit-mask:var(--ico) center/19px no-repeat; mask:var(--ico) center/19px no-repeat; }
#install .txt { flex:1 1 180px; min-width:0; }
#install .txt b { display:block; font-size:13.5px; margin-bottom:2px; }
#install .txt span { display:block; color:var(--muted); font-size:12px; line-height:1.45; }
#install button { flex:0 0 auto; border:0; border-radius:12px; cursor:pointer;
                  background:var(--acc); color:#fff; padding:11px 16px;
                  font:600 13px/1 ui-sans-serif,-apple-system,sans-serif;
                  transition:background .12s; }
#install button:hover { background:var(--acc-dark); }
/* návod pre Safari a iPhone - vysvetľuje, nie prikazuje, preto tichý povrch */
#install .how { margin:8px 0 0; background:var(--surf); border-radius:12px;
                padding:10px 12px; color:var(--ink); font-size:12.5px; line-height:1.5; }

#about { margin-top:22px; padding-top:16px; border-top:1px solid var(--hair);
         color:var(--muted); font-size:12.5px; line-height:1.55; }
#about p { margin:0 0 8px; }
/* Veta „čo to je" - jediná v pätke, ktorú má človek naozaj prečítať. */
#about .alt { color:var(--ink); }
#about .soon { color:var(--dim); }
/* Autor: kružok s iniciálami namiesto fotky. Meno v plnej farbe, popis okolo
   neho tichý - je to vizitka, nie nadpis. */
#about .who { display:flex; align-items:center; gap:10px; margin:14px 0 12px; }
#about .who .ava { width:36px; height:36px; flex:0 0 36px; border-radius:50%;
                   background:var(--acc); color:#fff; display:grid; place-items:center;
                   font:700 12.5px/1 ui-sans-serif,-apple-system,sans-serif;
                   letter-spacing:.06em; }
#about .who .txt { min-width:0; }
#about .who b { display:block; color:var(--ink); font-size:13.5px; }
#about .who .txt > span { color:var(--muted); font-size:12px; }
#about .who .tag { display:inline; color:var(--ink); }
#about .links { display:flex; flex-wrap:wrap; gap:8px; }
#about .links a { text-decoration:none; background:var(--surf); color:var(--ink);
                  font-weight:600; font-size:13px; padding:10px 16px; border-radius:12px;
                  transition:background .12s; }
#about .links a:hover { background:var(--surf-hi); }
/* Prispieť je z dvojice to hlavné, ale stále len povrch s nádychom akcentu -
   plné zelené tlačidlo by v tichej pätke kričalo. */
#about .links a#donate { background:rgba(74,98,56,.12); color:var(--acc-dark); }
#about .links a#donate:hover { background:rgba(74,98,56,.2); }

/* hlaska, ked spadne inicializacia - musi byt vidno aj so zavretymi panelmi */
#fatal { display:none; position:fixed; z-index:1300; left:50%; bottom:16px;
         transform:translateX(-50%); max-width:min(680px, calc(100vw - 24px));
         background:#7d2118; color:#fff; font-size:13px; line-height:1.4;
         padding:11px 15px; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.35); }
#fatal.on { display:block; }

@media (max-width:700px) {
  /* Pravitko kresli na mobile horny a pravy okraj, takze pilulka musi minut
     ten isty pas cisel ako na PC (`RULER_BAND` = 26 px v app.js). */
  #topbar { top:34px; width:calc(100vw - 16px); }
  #sheet { left:0; top:auto; bottom:0; width:100%; max-height:88vh;
           border-radius:24px 24px 0 0; transform:translateY(100%); }
  #sheet.on { transform:translateY(0); }
  #sheet > header { padding-top:24px; }
  #sheet .body { padding-left:16px; padding-right:16px; }
  #sheet > footer { padding-left:16px; padding-right:16px; }
  /* pat nahladov vedla seba je na telefone uz len farebna kasa - radsej jeden
     vodorovny pas, ktory sa da potiahnut */
  .maps { overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px; }
  .maps::-webkit-scrollbar { display:none; }
  .maps .map { flex:0 0 106px; }
  #sel { left:0; right:0; bottom:0; width:100%; border-radius:18px 18px 0 0; }
  #sel header { padding-top:20px; }
  #sheet .grip, #sel .grip {
    display:block; position:absolute; left:50%; top:9px; transform:translateX(-50%);
    width:38px; height:4px; border-radius:2px; background:var(--surf-hi);
  }
  #sel .body { max-height:58vh; }

  /* ---- spodny okraj displeja: harok, popis a zoom sa nemaju bit ----
     Vsetci traja sa drzali `bottom:0`, takze si sadli na seba a „+/-" skoncilo
     pod harkom merania. `--selh` a `--tiph` meria `bottomSpace()` v app.js,
     lebo vyska harku sa meni podla toho, ci je rozbaleny - CSS to samo
     nezisti. Poradie zdola nahor: harok, popis, zoom. */
  .leaflet-bottom.leaflet-left {
    bottom:calc(var(--selh, 0px) + var(--tiph, 0px));
    transition:bottom .14s ease;
  }
  /* Pas s popisom je nizsie v subore, az za zakladnym `#tip` - inak by ho
     zakladne pravidlo prebilo, lebo ma rovnaku specificitu a stoji za tymto
     blokom. */
}

/* ============================================================
   POPISKY NA MAPE
   Velkost nesie `--fs` z volby malé/stredné/veľké; canvasove
   vrstvy nasobia to iste cislo cez `fpx()` v `app.js`.
   ============================================================ */
.place { color:var(--place-ink); font-weight:700;
         text-shadow:0 0 3px var(--place-halo),0 0 3px var(--place-halo),0 0 3px var(--place-halo);
         white-space:nowrap; font-size:calc(11px * var(--fs)); }
.place.cap { font-size:calc(15px * var(--fs)); }
.place.city { font-size:calc(13px * var(--fs)); }
.dim { color:var(--dim); font-weight:400; font-size:11px; text-transform:none; letter-spacing:0; }
#ident { margin-top:9px; padding-top:9px; border-top:1px solid var(--hair); font-size:12px; }
#ident b { font-weight:700; }
#ident .path { color:var(--muted); word-break:break-all; }
/* fotka budovy v karte - nad podorysom, aby clovek najprv videl, co to je,
   a az potom kde je v tom loot */
#photo { display:none; margin:9px 0 0; }
#photo img { width:100%; max-height:190px; object-fit:cover; display:block;
             border-radius:10px; background:var(--surf); }
#photo figcaption { color:var(--dim); font-size:10.5px; margin-top:4px; }
#photo figcaption a { color:var(--muted); }
#plan { margin-top:8px; display:none; }
#plan canvas { width:100%; border-radius:6px; background:var(--surf); display:block; }
#objHead { display:none; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:9px; }
#objHead b { font-size:13px; }
#objHead .tags { color:var(--muted); font-size:11px; }
#plan .legend { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:5px; font-size:11px; }
#plan .legend i { width:8px; height:8px; border-radius:50%; display:inline-block;
                  margin-right:4px; vertical-align:0; }
/* znacka je farebny kruzok s bielou ikonou - farba hovori o druhu miesta
   skor, nez sa da precitat popisok. Popisok je absolutne umiestneny, aby
   kruzok sedel presne na suradnici. */
/* `--mk` je mierka znacky podla priblizenia (`markerScale` v `app.js`).
   Pri odzoomovanej mape je 1, od z7 rastie po 1,5: dom je vtedy siroky aj
   80 px a 20 px kruzok vedla neho uz nie je znacka, ale smietka. */
.poi { position:relative; width:0; height:0; pointer-events:none; }
.poi .mk {
  position:absolute; left:calc(-10px * var(--mk)); top:calc(-10px * var(--mk));
  width:calc(20px * var(--mk)); height:calc(20px * var(--mk)); padding:0;
  border-radius:50%; background:var(--c); display:grid; place-items:center;
  box-shadow:0 0 0 2px rgba(251,249,243,.92), 0 1px 3px rgba(0,0,0,.38);
}
.poi .mk::before {
  content:''; width:calc(12px * var(--mk)); height:calc(12px * var(--mk)); background:#fff;
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat;
}
.poi .lbl {
  position:absolute; left:50%; top:calc(13px * var(--mk)); transform:translateX(-50%);
  font-size:calc(10px * var(--fs)); font-weight:700; color:var(--lbl-ink); white-space:nowrap;
  background:var(--lbl-bg); padding:0 4px; border-radius:4px;
}
/* Druhy styl: kvapka, ktora spicom ukazuje PRESNE na miesto - kruh to miesto
   zakryva, kvapka na neho ukaze a sama sedi nad nim.
   Je vacsia nez kruh (28 vs 20 px) a nema hruby biely prstenec, len vlasovy
   lem a mäkky tien pod sebou: s hrubym prstencom vyzerala ako nalepka
   prilepena na mapu, takto lezi nad nou. */
.poi.pin .mk {
  left:calc(-14px * var(--mk)); top:calc(-31px * var(--mk));
  width:calc(28px * var(--mk)); height:calc(28px * var(--mk));
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  box-shadow:0 0 0 1.5px var(--pin-ring), 2px 2px 7px rgba(0,0,0,.34);
}
/* ikona v kvapke je vacsia v rovnakom pomere ako sama kvapka */
.poi.pin .mk::before {
  transform:rotate(45deg);
  width:calc(15px * var(--mk)); height:calc(15px * var(--mk));
}
.poi.pin .lbl { top:6px; }
/* `--tx` a `--ty` je poloha kurzora - dava ich `showTip()` v app.js. Nie su to
   inline `left`/`top` zamerne: na mobile je popis pás dole a inline hodnota by
   prebila kazde pravidlo v CSS. */
#tip { position:absolute; z-index:1100; pointer-events:none; display:none;
       left:var(--tx, 0); top:var(--ty, 0);
       background:rgba(34,32,29,.92); color:#f4f1e8; font-size:12px; line-height:1.35;
       padding:5px 8px; border-radius:6px; max-width:280px; transform:translate(12px,12px); }
#tip b { color:#fff; }
#tip .sub { color:#c2bbab; font-size:11px; }
/* Na mobile je popis PÁS cez celu sirku dole, nie bublina pri dotyku: bublina
   sa pri okraji displeja orezala a pod prstom ju aj tak nebolo vidno, lebo ju
   prst zakryva. Dole je z nej citatelny riadok a vyzera ako harok merania nad
   nim, takze to nie je cudzie teleso.
   MUSI stat az tu, za zakladnym `#tip` - specificita je rovnaka, takze
   rozhoduje poradie a v hornom mobilnom bloku by nemalo ucinok. */
@media (max-width:700px) {
  #tip {
    position:fixed; left:8px; right:8px; top:auto;
    bottom:calc(var(--selh, 0px) + 8px); transform:none; max-width:none;
    background:var(--panel); color:var(--ink); box-shadow:var(--lift);
    border-radius:16px; padding:11px 15px; font-size:13px;
  }
  #tip b { color:var(--ink); }
  #tip .sub { color:var(--muted); font-size:11.5px; }
}
#probe { position:absolute; z-index:900; pointer-events:none; width:13px; height:13px;
         margin:-7px 0 0 -7px; border:2px solid #c0392b; border-radius:50%; display:none; }