:root {
    --glass: rgba(0, 0, 0, 0.55);
    --glass-border: rgba(255, 255, 255, 0.22);
    --accent: #4caf50;
    --warn: #ffb300;
    --bad: #e53935;
    --sel: #ffeb3b;
    --ui: 1; /* meritko ovladani (Nastaveni -> Velikost pisma) */
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #000;
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    overscroll-behavior: none;
}

[hidden] { display: none !important; }

button { font: inherit; color: inherit; cursor: pointer; }

/* Cela plocha okna: jen inset 0, bez pevne vysky 100vh (na iOS muze byt kratsi nez okno) */
#video, #ar, #map {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}
#video { object-fit: cover; background: #111; }
body.no-camera #video { display: none; }
body.no-camera { background: radial-gradient(ellipse at 50% 30%, #2b3440 0%, #0d1117 70%); }

/* ---------- HUD ---------- */
#hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}
#hud button, #hud input, #hud .chip { pointer-events: auto; }

.pill {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: calc(15px * var(--ui));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.pill .dot { width: calc(10px * var(--ui)); height: calc(10px * var(--ui)); border-radius: 50%; background: #888; }
.pill.good .dot { background: var(--accent); }
.pill.fair .dot { background: var(--warn); }
.pill.poor .dot { background: var(--bad); }
.pill-test { background: rgba(229, 57, 53, 0.85); border-color: #fff; }

.icon-btn {
    position: relative;
    width: calc(46px * var(--ui));
    height: calc(46px * var(--ui));
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    padding: 0;
}
.badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: calc(10px * var(--ui));
    height: calc(10px * var(--ui));
    border-radius: 50%;
    background: var(--sel);
    border: 2px solid #000;
}

#top-bar {
    position: absolute;
    top: calc(var(--safe-t) + 8px);
    left: calc(var(--safe-l) + 10px);
    right: calc(var(--safe-r) + 10px);
    display: flex;
    align-items: center;
    gap: 6px;
}
#top-bar .icon-btn { margin-left: auto; flex: none; }
#top-bar .pill { flex: none; }
#top-bar .icon-btn svg { width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); }

/* Banner vybraneho objektu */
#banner {
    position: absolute;
    top: calc(var(--safe-t) + 62px * var(--ui));
    left: calc(var(--safe-l) + 10px);
    right: calc(var(--safe-r) + 10px);
    max-width: calc(520px * var(--ui));
    margin: 0 auto; /* na sirokem displeji uprostred */
    background: rgba(16, 22, 28, 0.86);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-left: calc(6px * var(--ui)) solid var(--state, var(--accent)); /* barva stavu objektu */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 8px 8px 8px 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}
#banner-symbol { width: calc(44px * var(--ui)); height: calc(44px * var(--ui)); flex: none; margin-top: 2px; }
.banner-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* Radek 1: cely nazev (smi se zalomit) a zavreni */
.banner-top { display: flex; align-items: flex-start; gap: 8px; }
.banner-title { flex: 1; min-width: 0; }
#banner-type { font-size: calc(13px * var(--ui)); font-weight: 600; color: #b0bec5; margin-top: 2px; }
#banner-name {
    font-weight: 800;
    font-size: calc(19px * var(--ui));
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.banner-close {
    flex: none;
    width: calc(32px * var(--ui));
    height: calc(32px * var(--ui));
    margin: -2px -2px 0 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: calc(22px * var(--ui));
    font-weight: 700;
    line-height: 1;
    padding: 0;
}
/* Radek 2: vzdalenost, vyska, smer | akce */
.banner-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.banner-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
    font-size: calc(15px * var(--ui));
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
#banner-alt.alt-up { color: #69f0ae; }
#banner-alt.alt-down { color: #ffab40; }
#banner-arrow {
    width: calc(28px * var(--ui));
    height: calc(28px * var(--ui));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: var(--sel);
    display: grid;
    place-items: center;
    flex: none;
}
#banner-arrow svg { width: 64%; height: 64%; transition: transform 0.12s linear; }
#banner-arrow.here { background: #1e88e5; color: #fff; }
.banner-actions { display: flex; gap: 6px; flex: none; }
.banner-btn {
    height: calc(38px * var(--ui));
    min-width: calc(38px * var(--ui));
    border: none;
    border-radius: 9px;
    font-weight: 800;
    font-size: calc(15px * var(--ui));
    flex: none;
    color: #fff;
    padding: 0 10px;
}
.banner-btn.nav { background: #2e7d32; display: grid; place-items: center; padding: 0; } /* jen ikona */
.banner-btn.nav.active { background: #ffeb3b; color: #000; }
.banner-btn.nav svg { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); }
.banner-btn.db { background: #1565c0; }


/* Objekty v blizkosti (blize nez presnost GPS) */
#near-list {
    position: absolute;
    bottom: calc(max(calc(var(--safe-b) - 20px), 6px) + 170px * var(--ui));
    left: calc(76px * var(--ui));
    right: calc(80px * var(--ui));
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
#near-list .title { width: 100%; text-align: center; font-size: calc(14px * var(--ui)); font-weight: 700; opacity: 0.85; text-shadow: 0 1px 3px #000; }
.chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: #000;
    border-radius: 999px;
    padding: 4px 12px 4px 5px;
    font-size: calc(15px * var(--ui));
    font-weight: 700;
    border: none;
    max-width: 100%;
}
.chip canvas { width: calc(28px * var(--ui)); height: calc(28px * var(--ui)); flex: none; }
.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.selected { outline: 3px solid var(--sel); }

/* Filtry vlevo */
#filters {
    position: absolute;
    left: calc(var(--safe-l) + 10px);
    /* o kus pod stred, aby nezasahovaly do banneru vybraneho objektu */
    top: calc(50% + 34px * var(--ui));
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Tlacitka maji tvar symbolu z totemu (SVG obrys), barva obrysu podle kategorie */
.filter-btn {
    position: relative;
    width: calc(56px * var(--ui));
    height: calc(56px * var(--ui));
    padding: 0;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 800;
    font-size: calc(18px * var(--ui));
    display: grid;
    place-items: center;
}
.filter-btn svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.filter-btn svg > * {
    fill: rgba(0, 0, 0, 0.55);
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
    stroke-linejoin: round;
}
.filter-btn span { position: relative; }
.filter-btn.tri span { top: 7px; font-size: calc(15px * var(--ui)); }
/* Zapnuty filtr vypada jako symbol na totemu: barevna vypln, bily obrys */
.filter-btn.active { color: var(--t, #fff); }
.filter-btn.active svg > * { fill: var(--c, var(--accent)); fill-opacity: 0.85; stroke: #fff; stroke-width: 2.5; }

/* Dosah vpravo - horizontalni range otoceny o 90 stupnu (funguje vsude vcetne iOS) */
#range-panel {
    position: absolute;
    right: calc(var(--safe-r) + 10px);
    top: calc(50% + 34px * var(--ui));
    transform: translateY(-50%);
    width: calc(60px * var(--ui));
    padding: 12px 0 10px;
    border-radius: 999px;
    background: rgba(16, 22, 28, 0.62);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
#range-val { font-size: calc(15px * var(--ui)); line-height: 1; }
#range-val small { display: block; font-size: 0.7em; opacity: 0.75; text-align: center; margin-top: 2px; }
.range-track { width: calc(52px * var(--ui)); height: calc(190px * var(--ui)); position: relative; }

/* Vlastni vzhled posuvniku: silna zaoblena draha vyplnena podle hodnoty (--pct) a velky uchyt */
#range {
    --track: calc(10px * var(--ui));
    --thumb: calc(30px * var(--ui));
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(190px * var(--ui));
    height: var(--thumb);
    margin: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
#range:focus { outline: none; }
#range::-webkit-slider-runnable-track {
    height: var(--track);
    border-radius: 999px;
    background: linear-gradient(to right, var(--accent) 0 var(--pct, 0%), rgba(255, 255, 255, 0.22) var(--pct, 0%) 100%);
}
#range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--thumb);
    height: var(--thumb);
    margin-top: calc((var(--track) - var(--thumb)) / 2);
    border-radius: 50%;
    background: #fff;
    border: calc(4px * var(--ui)) solid var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
#range::-moz-range-track { height: var(--track); border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
#range::-moz-range-progress { height: var(--track); border-radius: 999px; background: var(--accent); }
#range::-moz-range-thumb {
    width: var(--thumb);
    height: var(--thumb);
    border-radius: 50%;
    background: #fff;
    border: calc(4px * var(--ui)) solid var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
}

/* Pocet objektu v dosahu */
#range-panel .count {
    min-width: calc(40px * var(--ui));
    height: calc(40px * var(--ui));
    padding: 0 6px;
    display: grid;
    place-items: center;
    font-size: calc(16px * var(--ui));
    border-radius: 999px;
    border: 2px solid var(--accent);
    background: rgba(76, 175, 80, 0.18);
}

/* Radar dole */
#bottom {
    position: absolute;
    /* niz ke spodnimu okraji - zasahuje do rezervy pro domovskou listu iPhonu */
    bottom: max(calc(var(--safe-b) - 20px), 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
#radar { width: min(calc(144px * var(--ui)), 172px); height: min(calc(144px * var(--ui)), 172px); }
#heading-val {
    font-size: calc(17px * var(--ui));
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--glass);
    border-radius: 6px;
    padding: 2px 10px;
}

#toast {
    position: absolute;
    left: 50%;
    top: calc(var(--safe-t) + 120px * var(--ui));
    transform: translateX(-50%);
    max-width: calc(100vw - 150px * var(--ui));
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: calc(16px * var(--ui));
    text-align: center;
}

#debug {
    position: absolute;
    left: calc(var(--safe-l) + 72px * var(--ui));
    top: calc(var(--safe-t) + 132px * var(--ui));
    margin: 0;
    font: 10px/1.3 ui-monospace, monospace;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 6px;
    border-radius: 6px;
    max-width: calc(150px * var(--ui));
    white-space: pre-wrap;
}

/* ---------- Uvodni obrazovka ---------- */
#start {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    grid-template-rows: 1fr auto; /* karta uprostred, upozorneni na povoleni u spodniho okraje */
    justify-items: center;
    align-items: center;
    padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 12px);
    overflow-y: auto;
    touch-action: pan-y;
    background: radial-gradient(ellipse at 50% 20%, #2e3b2f 0%, #0b0f0b 75%);
}
.start-card { max-width: calc(360px * var(--ui)); text-align: center; }
.start-card img { border-radius: 22px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
.start-card h1 { margin: 16px 0 4px; font-size: calc(28px * var(--ui)); }
.start-card .subtitle { margin: 0 0 16px; opacity: 0.85; font-size: calc(18px * var(--ui)); }
.start-card .info { font-size: calc(16px * var(--ui)); opacity: 0.7; line-height: 1.45; }
#start .allow {
    width: 100%;
    max-width: calc(360px * var(--ui));
    text-align: center;
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 179, 0, 0.16);
    border: 1px solid rgba(255, 179, 0, 0.6);
    color: #ffe082;
    font-size: calc(15px * var(--ui));
    font-weight: 700;
    line-height: 1.4;
}
#btn-start {
    margin-top: 16px;
    width: 100%;
    height: calc(54px * var(--ui));
    border-radius: 14px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: calc(20px * var(--ui));
    font-weight: 800;
}
#btn-start:disabled { opacity: 0.5; }
.status { font-size: calc(16px * var(--ui)); min-height: 1.4em; opacity: 0.8; }
.install {
    margin: 32px 0 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    text-align: left;
    font-size: calc(15px * var(--ui));
    line-height: 1.45;
}
.install b { display: block; font-size: calc(16px * var(--ui)); margin-bottom: 4px; }
.install p { margin: 0; opacity: 0.85; }
.install svg { width: 1.2em; height: 1.2em; vertical-align: -0.2em; }
.install .btn { width: 100%; margin-top: 10px; }
.lang-switch { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.lang-switch button, .segmented button {
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: calc(16px * var(--ui));
}
.lang-switch button.active, .segmented button.active { background: var(--accent); border-color: var(--accent); }

/* ---------- Nastaveni ---------- */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
/* Panel od spodniho okraje az tesne pod stavovy radek telefonu (vyrez / Dynamic Island) */
.sheet {
    width: 100%;
    max-width: calc(520px * var(--ui));
    max-height: calc(100vh - 10px);
    max-height: calc(100dvh - var(--safe-t) - 10px);
    overflow-y: auto;
    touch-action: pan-y;
    background: #1b1f23;
    border-radius: 18px 18px 0 0;
    padding: 16px 18px calc(var(--safe-b) + 16px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sheet h2 { margin: 0; font-size: calc(24px * var(--ui)); }
/* Hlavicka panelu s krizkem vpravo nahore - zustava videt i pri posouvani */
.sheet-head {
    position: sticky;
    top: -16px;
    z-index: 2;
    margin: -16px -18px 0;
    padding: 16px 18px 8px;
    background: #1b1f23;
    border-radius: 18px 18px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sheet-close {
    flex: none;
    width: calc(40px * var(--ui));
    height: calc(40px * var(--ui));
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: calc(26px * var(--ui));
    font-weight: 700;
    line-height: 1;
    padding: 0;
}
.row { display: flex; flex-direction: column; gap: 6px; }
.row label { font-weight: 700; font-size: calc(17px * var(--ui)); }
.row small { opacity: 0.75; font-size: calc(15px * var(--ui)); }
.row input[type="range"] { width: 100%; accent-color: var(--accent); }
.segmented { display: flex; gap: 6px; flex-wrap: wrap; }
.test-inputs, .test-buttons { display: flex; gap: 8px; }
.test-inputs input {
    flex: 1;
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #0f1215;
    color: #fff;
    font: inherit;
    font-size: calc(16px * var(--ui)); /* iOS nezoomuje */
    -webkit-user-select: text;
    user-select: text;
}
.btn {
    height: calc(48px * var(--ui));
    padding: 0 14px;
    font-size: calc(16px * var(--ui));
    border-radius: 10px;
    border: 1px solid #3a4046;
    background: #2a3036;
    font-weight: 700;
    flex: 1;
}
.row > .btn { flex: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); flex: none; height: calc(52px * var(--ui)); font-size: calc(18px * var(--ui)); }
.btn.secondary { background: transparent; }
.btn:disabled { opacity: 0.5; }

/* Male displeje */
@media (max-height: 640px) {
    #radar { width: min(calc(116px * var(--ui)), 150px); height: min(calc(116px * var(--ui)), 150px); }
    .range-track { height: calc(140px * var(--ui)); }
    #range { width: calc(140px * var(--ui)); }
    #near-list { bottom: calc(var(--safe-b) + 146px * var(--ui)); }
}

/* ---------- Mapa po sklopeni telefonu ---------- */
body.map-mode #filters, body.map-mode #range-panel { display: none; }
#map { z-index: 5; pointer-events: none; } /* klepnuti zpracuje canvas #ar pod mapou */
body.navigating #banner { top: calc(var(--safe-t) + 146px * var(--ui)); }
body.navigating #debug { top: calc(var(--safe-t) + 210px * var(--ui)); }
body.nav-selected #banner-arrow { display: none; }
.banner-meta { white-space: nowrap; }

/* ---------- Tlacitko legendy ---------- */
#btn-help {
    position: absolute;
    left: calc(var(--safe-l) + 12px);
    bottom: max(calc(var(--safe-b) - 12px), 10px); /* nad gestem pro navrat na plochu */
    font-size: calc(22px * var(--ui));
    font-weight: 800;
    pointer-events: auto;
}

/* ---------- Navigace ---------- */
/* Panel navigace nahore pod listou, banner vybraneho objektu se posune pod nej */
#nav-panel {
    position: absolute;
    top: calc(var(--safe-t) + 62px * var(--ui));
    left: calc(var(--safe-l) + 10px);
    right: calc(var(--safe-r) + 10px);
    max-width: calc(520px * var(--ui));
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 10px;
    border-radius: 16px;
    background: rgba(16, 22, 28, 0.82);
    border: 2px solid var(--sel);
    pointer-events: auto;
}
#nav-arrow {
    width: calc(56px * var(--ui));
    height: calc(56px * var(--ui));
    flex: none;
    border-radius: 50%;
    background: var(--sel);
    color: #000;
    display: grid;
    place-items: center;
}
#nav-arrow svg { width: 62%; height: 62%; transition: transform 0.12s linear; }
#nav-arrow.here { background: #1e88e5; color: #fff; }
.nav-info { flex: 1; min-width: 0; }
#nav-dist { font-size: calc(24px * var(--ui)); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
#nav-name { font-size: calc(14px * var(--ui)); opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-btn {
    flex: none;
    height: calc(40px * var(--ui));
    padding: 0 10px;
    border: none;
    border-radius: 10px;
    background: #2a3036;
    font-weight: 800;
    font-size: calc(14px * var(--ui));
}
.nav-btn.stop { background: #c62828; font-size: calc(22px * var(--ui)); min-width: calc(40px * var(--ui)); padding: 0; }

/* ---------- Legenda ---------- */
.legend-list { display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; gap: 12px; font-size: calc(15px * var(--ui)); line-height: 1.3; }
.legend-item canvas { width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); flex: none; }
.legend-item .syms { display: flex; gap: 4px; flex: none; }
.legend-item .syms canvas { width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); }
.legend-item b { display: block; }
.legend-item small { opacity: 0.75; }
.legend-group { font-weight: 700; margin-top: 4px; opacity: 0.9; }
/* Stavy jednoho typu vedle sebe */
.legend-states-row { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.legend-states-row .legend-item { gap: 6px; }
.legend-demo {
    flex: none;
    min-width: calc(72px * var(--ui));
    text-align: center;
    font-weight: 800;
    font-size: calc(13px * var(--ui));
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(16, 22, 28, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.legend-demo .up { color: #69f0ae; }
.legend-demo .down { color: #ffab40; }