/* ============================================================================
   VLK — vzhled: NOČNÍ LES A STRACH.
   ----------------------------------------------------------------------------
   Jiný svět než KARANTÉNA. Ta je vojenský plech: khaki, rez, jantar, hranaté
   panely, všechno je nástroj. VLK je opak — je to noc mezi ploty, měsíc na
   mokré cestě a zvíře, které nevidíš. Modročerná, měsíční stříbrná, měkké
   okraje, světlo vždycky shora (měsíc), nikdy zespoda.

   TŘI PRAVIDLA, KTERÁ PŘEBIJÍ VŠECHNO OSTATNÍ:

   1) ČITELNOST VYHRÁVÁ. Ve tmě, jednou rukou, unavenýma očima, ve dvě ráno.
      Základ 17px, tlačítka 19px, čísla obří. Když si styl a čitelnost
      odporují, styl prohrál.

   2) ČERVENÁ PATŘÍ VLKOVI. Nikde jinde ve hře se sytá červená nepoužije —
      ani na chyby, ani na nouzi. Když se na obrazovce objeví červená,
      znamená to vlk, vždycky. (Nouzové MÁM PROBLÉM je proto jantarové:
      pozná se tvarem a místem, ne barvou, a nesmí splynout s vlkem.)

   3) OBRAZOVKA NESMÍ SVÍTIT DO VSI. Hraje se v obydlené vesnici v noci a
      slabá světla jsou zároveň nejsilnější balanční páka celé hry (dohled
      vlka 50 m = kolo 14 min, 130 m = 9,6 min). Proto nikde není bílé pozadí
      přes celou plochu — ani při držení úkolu. Svítí VŽDYCKY JEN OKRAJ,
      prstenec, obrys. Vnitřek zůstává tmavý.

   Bez webfontů, bez obrázků, bez knihoven. Všechno jsou gradienty.
   ========================================================================== */

:root {
  /* --- podklad: hluboká modročerná. Nikdy čistě černá (na OLED se ztratí
         hrany), nikdy šedá (to je khaki svět KARANTÉNY). --- */
  --noc:     #070b14;        /* pozadí stránky */
  --noc2:    #03060d;        /* prohlubně, vnitřky měřidel, mapa */
  --panel:   #0e1421;        /* karty */
  --panel2:  #151d2e;        /* zvednuté plochy, tlačítka */
  --stisk:   #1d2740;        /* stisknuté */
  --hrana:   #2a3550;        /* základní hrana — modrá ocel */
  --hrana2:  #46567d;        /* světlejší hrana, rámy, aktivní */

  /* --- měsíc: veškerý text --- */
  --mesic:   #e6edfb;        /* hlavní text — skoro bílá s modrým nádechem */
  --stribro: #c2d0e8;        /* nadpisy, čísla */
  --tlum:    #93a6c6;        /* tlumený text — NIKDY šedá na šedé */
  --sepot:   #6a7c9c;        /* úplně vedlejší (časy ve feedu) */

  /* --- vlk: jediná červená ve hře --- */
  --krev:    #d2202c;        /* hrany, obrysy */
  --krev2:   #ff3b3b;        /* text a světlo */
  --krev-poz:#25070b;        /* výplně pod červenou */
  --krev-tma:#160409;

  /* --- ostatní stavy --- */
  --mech:    #62c68d;        /* hotovo, splněno, bezpečno — tlumená zeleň */
  --mech-poz:#0d2419;
  --jantar:  #ffa62b;        /* nouze, varování, MÁM PROBLÉM */
  --jantar2: #ffc978;
  --jantar-poz:#2a1a05;
  --led:     #7fd4e8;        /* informace, GPS, odpočty */

  /* --- písmo --- */
  --pismo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* --- textury: mlha a měsíc, žádné obrázky --- */
  --mesicsvit: radial-gradient(120% 70% at 50% -10%, rgba(120,150,210,.16), transparent 60%);
  --mlha:      radial-gradient(100% 60% at 20% 110%, rgba(70,86,125,.10), transparent 65%);
  --zrno:      repeating-linear-gradient(115deg, rgba(230,237,251,.012) 0 2px, transparent 2px 5px);
  /* měkký reliéf: světlo shora (měsíc), stín dolů */
  --relief: inset 0 1px 0 rgba(198,216,255,.10), inset 0 -14px 22px rgba(0,0,0,.34),
            0 2px 10px rgba(0,0,0,.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  color: var(--mesic);
  font-family: var(--pismo);
  font-size: 17px; line-height: 1.4;
  overscroll-behavior: none; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  background-color: var(--noc);
  background-image: var(--zrno), var(--mesicsvit), var(--mlha);
  background-attachment: fixed;
}
input, button, textarea { font-family: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--led); outline-offset: 2px; }

/* ---------- typografie ----------
   Kondenzovaný „lesní" dojem děláme prostrkáním a verzálkami, ne fontem.
   Vysvětlující věty uvnitř verzálkových prvků zůstávají normální — verzálky
   se ve tmě čtou hůř a vysvětlení je tu důležitější než vzhled. */
h1, h2, h3, .logo, .nadpis, button, .odznak, .banner {
  text-transform: uppercase; letter-spacing: .10em;
}
h2 { font-size: 21px; font-weight: 900; color: var(--mesic); }
h3 { font-size: 15px; font-weight: 800; color: var(--tlum); font-family: var(--mono); }
b, strong { color: #f3f7ff; }
.mono, .cislo { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tich { color: var(--tlum); font-size: 15.5px; }
button .tich, .banner .tich, .odznak .tich, .bod-radek .tich,
.role .tich, .karta-plna .tich { text-transform: none; letter-spacing: 0; }
.chyba { color: var(--jantar2); font-weight: 800; min-height: 1.3em; margin: 6px 0;
         font-family: var(--mono); }
.zdurazni { color: var(--stribro); font-weight: 900; }

/* logo — měsíc za slovem */
.logo { font-weight: 900; font-size: 27px; color: var(--mesic); letter-spacing: .22em;
        text-shadow: 0 0 18px rgba(150,180,240,.35), 0 2px 0 rgba(0,0,0,.6); }
.logo span { color: var(--krev2); text-shadow: 0 0 16px rgba(255,59,59,.45); }

/* ---------- tlačítka: oblá, měkká, měsíc na horní hraně ----------
   Proti KARANTÉNĚ (ostré plechové hrany, radius 2px) jsou tady záměrně
   zaoblená — ruka pozná ve tmě jiný přístroj i podle tvaru. */
button {
  background: linear-gradient(180deg, var(--panel2), #0b1120);
  color: var(--mesic);
  border: 2px solid var(--hrana); border-radius: 12px;
  font-size: 19px; font-weight: 800;
  min-height: 62px; padding: 12px 16px; cursor: pointer;
  box-shadow: var(--relief);
}
button:active { background: var(--stisk); transform: translateY(1px);
                box-shadow: inset 0 3px 12px rgba(0,0,0,.7); }
button:disabled { opacity: .42; filter: saturate(.4); box-shadow: none; }
button.velke { width: 100%; min-height: 70px; font-size: 22px; margin: 8px 0; }
button.hlavni { border-color: var(--hrana2); color: #fff;
                background: linear-gradient(180deg, #1e2b46, #101828); }
button.dobre  { border-color: var(--mech); color: #b9f0d0;
                background: linear-gradient(180deg, #123526, #0a1c14); }
button.vlci   { border-color: var(--krev); color: #ffc4c4;
                background: linear-gradient(180deg, #390b12, #1c0509); }
button.klid   { border-color: var(--hrana); color: var(--tlum);
                background: linear-gradient(180deg, #121927, #0a0f1a); }
/* trvalý řádek pod tlačítkem: co se stane. Poučení: vysvětlení patří NA
   tlačítko, ne za odkaz. */
button .pod { display: block; margin-top: 5px; font-size: 14px; font-weight: 600;
              text-transform: none; letter-spacing: 0; color: var(--tlum); }
button.vlci .pod { color: #e79a9a; }
button.dobre .pod { color: #8fcdaa; }

/* ---------- karty: mlžný panel ---------- */
.karta {
  background-color: var(--panel);
  background-image: var(--zrno);
  border: 1px solid var(--hrana); border-radius: 14px;
  padding: 14px 16px; margin: 10px 0;
  box-shadow: var(--relief);
}
.karta > b:first-child { display: block; margin-bottom: 4px; color: var(--stribro);
                         letter-spacing: .06em; }

/* ---------- obrazovky ---------- */
.scr { position: fixed; inset: 0; overflow-y: auto; padding: 12px;
       padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

/* ============================================================================
   1) LOBBY
   ========================================================================== */
#scr-lobby header { text-align: center; padding: 18px 0 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--hrana);
  box-shadow: 0 1px 0 rgba(198,216,255,.06); }
#in-jmeno {
  width: 100%; font-size: 23px; padding: 15px; border-radius: 12px;
  border: 2px solid var(--hrana2); background: var(--noc2); color: var(--stribro);
  font-family: var(--mono); text-align: center; margin: 8px 0;
  box-shadow: inset 0 3px 14px rgba(0,0,0,.65);
}
.check-radek {
  display: flex; align-items: center; gap: 13px; padding: 12px 2px;
  border-bottom: 1px solid rgba(42,53,80,.7); font-size: 17px; cursor: pointer;
}
.check-radek:last-child { border-bottom: 0; }
.check-fajfka {
  flex: 0 0 46px; height: 46px; border: 2px solid var(--hrana2); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 29px; color: transparent; background: var(--noc2);
}
.check-radek.hotovo .check-fajfka { border-color: var(--mech); color: var(--mech);
                                    background: var(--mech-poz); }

/* volba počtu hráčů / kol / role — přepínač */
.volba { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.role {
  flex: 1 1 40%; padding: 14px 10px; font-size: 16px; font-weight: 900;
  border-radius: 12px; background: linear-gradient(180deg, var(--panel2), #0b1120);
  color: var(--tlum); border: 2px solid var(--hrana); cursor: pointer;
  box-shadow: var(--relief); text-transform: uppercase; letter-spacing: .08em;
}
.role.vybrano { color: var(--mesic); border-color: var(--hrana2);
  background: linear-gradient(180deg, #21304e, #111a2c);
  box-shadow: inset 0 2px 12px rgba(0,0,0,.6), 0 0 0 1px rgba(127,212,232,.25); }
.role .tich { display: block; font-size: 13px; margin-top: 4px; }

/* stahování zvuků — pruh roste zleva, text na něm leží.
   Poučení č. 5: počítadlo měří STAŽENÉ, ne „vyřízené". */
.stahovani {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--hrana); border-radius: 10px; background: var(--noc2);
  min-height: 42px; padding: 11px 13px; margin: 8px 0;
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tlum);
}
.stahovani > i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(127,212,232,.16); border-right: 3px solid var(--led);
  transition: width .3s linear;
}
.stahovani > span, .stahovani > b { position: relative; }
.stahovani.hotovo { color: var(--mech); border-color: var(--mech); }
.stahovani.chyba  { color: var(--jantar2); border-color: var(--jantar); background: #1e1204; }

.mapkarta { padding: 6px; }
.mapkarta svg { width: 100%; height: 262px; display: block; border-radius: 10px;
                background: var(--noc2); box-shadow: inset 0 0 40px rgba(0,0,0,.7); }
#lob-hraci .hrac-radek { padding: 6px 0; font-size: 18px; font-family: var(--mono);
                         border-bottom: 1px solid rgba(42,53,80,.6); }
#lob-hraci .hrac-radek:last-child { border-bottom: 0; }
#lob-gps { font-family: var(--mono); font-size: 16px; }

/* ============================================================================
   2) HLAVNÍ OBRAZOVKA — společný skelet
   ========================================================================== */
#scr-hlavni { display: flex; flex-direction: column; padding: 8px;
              padding-bottom: calc(8px + env(safe-area-inset-bottom)); overflow: hidden; }

#hlava {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: center; padding: 6px 4px 8px;
  border-bottom: 1px solid var(--hrana);
  box-shadow: 0 1px 0 rgba(198,216,255,.06);
}
#hlava .logo { font-size: 20px; letter-spacing: .18em; }

/* kolo + čas: kolo je 11 minut, čas musí být čitelný jedním pohledem */
#h-cas { font-family: var(--mono); font-variant-numeric: tabular-nums;
         font-size: 34px; font-weight: 900; line-height: 1; color: var(--stribro);
         text-align: center; }
#h-cas.dochazi { color: var(--jantar2); text-shadow: 0 0 16px rgba(255,166,43,.4); }
#h-kolo { font-family: var(--mono); font-size: 13px; color: var(--tlum);
          text-align: center; letter-spacing: .1em; text-transform: uppercase; }

/* počítadlo úkolů stáda — hlavní veřejné skóre kola */
#h-ukoly {
  display: flex; align-items: baseline; gap: 4px; padding: 3px 11px;
  border: 1px solid var(--hrana2); border-radius: 10px; background: var(--noc2);
  font-family: var(--mono); box-shadow: inset 0 2px 10px rgba(0,0,0,.6);
}
#h-ukoly b { font-size: 30px; font-weight: 900; color: var(--mech); line-height: 1; }
#h-ukoly small { font-size: 14px; color: var(--tlum); }
#h-ukoly.hotovo b { color: var(--mech); text-shadow: 0 0 18px rgba(98,198,141,.5); }

/* trvalý řádek „kdo jsem / pravidla" — musí být DOSAŽITELNÝ VŽDYCKY,
   i po chycení. Poučení č. 1. */
#pruh-pomoc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 5px 0 2px; }

/* stavové odznaky */
#stavovy { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0 2px; min-height: 22px; }
.odznak {
  font-family: var(--mono); font-size: 13px; font-weight: 700; padding: 4px 9px;
  border-radius: 999px; background: var(--panel2); color: var(--tlum);
  border: 1px solid var(--hrana); letter-spacing: .06em;
}
.odznak.on  { color: var(--mech); border-color: var(--mech); background: var(--mech-poz); }
.odznak.off { color: var(--jantar2); border-color: var(--jantar); background: var(--jantar-poz); }
.odznak.vlci { color: #ffc4c4; border-color: var(--krev); background: var(--krev-poz); font-weight: 900; }
/* odznak, na který se opravdu klepe (palcem, ve tmě) */
.odznak.knof { min-height: 40px; display: inline-flex; align-items: center;
               padding: 8px 14px; font-size: 14px; color: var(--stribro);
               border: 2px solid var(--hrana2);
               background: linear-gradient(180deg, #1b2440, #0d1421); cursor: pointer; }
.odznak.knof:active { background: var(--stisk); transform: translateY(1px); }

/* bannery — přilepené štítky nad mapou */
#bannery { display: flex; flex-direction: column; gap: 6px; }
.banner {
  border-radius: 12px; padding: 11px 13px; font-weight: 800; font-size: 16px;
  letter-spacing: .05em;
  background: linear-gradient(180deg, #18223a, #0d1421);
  border: 1px solid var(--hrana2); border-left: 6px solid var(--hrana2);
  color: var(--stribro); box-shadow: var(--relief);
}
.banner.zly { border-color: var(--krev); color: #ffc9c9;
              background: linear-gradient(180deg, #2a0a10, #15050a); }
.banner.ok  { border-color: var(--mech); color: #bff0d4;
              background: linear-gradient(180deg, #113023, #0a1c14); }
.banner.nouze { border-color: var(--jantar); color: var(--jantar2);
                background: linear-gradient(180deg, #2e1c05, #1a1003); }
.banner button { min-height: 50px; margin-top: 9px; width: 100%; font-size: 17px; }
/* banner s běžícím odpočtem: pruh pod textem, --p 0–100 řídí JS */
.banner .lista { --p: 0; height: 5px; border-radius: 3px; margin-top: 9px;
                 background: rgba(255,255,255,.10); overflow: hidden; }
.banner .lista::after { content: ""; display: block; height: 100%; width: calc(var(--p) * 1%);
                        background: currentColor; transition: width .3s linear; }

/* mapa v pouzdře — jáma, do které se díváš */
#mapa-obal { flex: 1; min-height: 130px; margin: 7px 0; border-radius: 14px;
             overflow: hidden; border: 1px solid var(--hrana); background: var(--noc2);
             position: relative;
             box-shadow: inset 0 0 60px rgba(0,0,0,.8), 0 2px 12px rgba(0,0,0,.5); }
#mapa { width: 100%; height: 100%; display: block; touch-action: none; }

/* akční tlačítka dole — velká, hmatatelně rozlišená */
#akce { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#akce button { min-height: 68px; font-size: 19px; }
#akce button.siroke { grid-column: 1 / -1; }

/* ============================================================================
   3) OBRAZOVKA OVCE — TIKOT PERIFERNÍM VIDĚNÍM
   ----------------------------------------------------------------------------
   Klíčový problém: hráč v noci kouká na cestu, ne do telefonu. Číslo ani ikonka
   uprostřed obrazovky je k ničemu — všimne si jich, až když se podívá.
   Periferní vidění je ale citlivé přesně na dvě věci: POHYB a KONTRAST NA
   OKRAJI. Proto tikot nekreslíme dovnitř, ale jako PRSTENEC PO OBVODU
   obrazovky, který dýchá. Ten se rozsvítí i v koutku oka, i když telefon
   držíš u boku.

   Vnitřek zůstává tmavý (pravidlo 3: nesvítit do vsi a neprozradit se světlem).

   ŘÍZENÍ Z JS — jen dvě proměnné a jedna třída:
     ram.classList.toggle('tik', jeVlkBlizko)
     ram.style.setProperty('--tik', interval + 'ms')   // perioda tikotu
     ram.style.setProperty('--sila', s)                // 0 (100 m) … 1 (15 m)
     ram.classList.toggle('tik-max', d <= 15)          // souvislé chrastění

   BEZPEČNOSTNÍ STROP: JS nesmí poslat --tik pod 340 ms. Blikání celé plochy
   nad 3 Hz je riziko pro fotosenzitivní hráče. Řešíme to jinak, a je to i
   perceptivně lepší: čím blíž vlk je, tím MENŠÍ je rozkmit a tím VYŠŠÍ je
   trvalý základ — prstenec se přestane míhat a prostě SVÍTÍ. „Souvislé
   chrastění" je pak ve zvuku a ve vibraci, ne ve stroboskopu.
   ========================================================================== */
#ram {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  --tik: 3000ms;   /* perioda; JS ji přepisuje podle vzdálenosti */
  --sila: 0;       /* 0 daleko … 1 na dosah */
  /* rozkmit se s blízkostí zmenšuje, základ roste */
  --lo: calc(.02 + .80 * var(--sila));
  --hi: calc(.50 + .50 * var(--sila));
}
#ram::before, #ram::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  border-radius: 4px;
}
/* studená vrstva — „něco tam je". Svítí i na sto metrech. */
#ram::before {
  box-shadow: inset 0 0 calc(26px + 40px * var(--sila)) calc(3px + 9px * var(--sila))
              rgba(120,170,235,.85);
}
/* krvavá vrstva — sílí s blízkostí. Jediná červená, kterou ovce kdy uvidí. */
#ram::after {
  box-shadow: inset 0 0 calc(30px + 62px * var(--sila)) calc(4px + 16px * var(--sila))
              rgba(255,42,42,.92);
}
@keyframes tep {
  0%   { opacity: var(--lo); }
  10%  { opacity: var(--hi); }
  38%  { opacity: var(--lo); }
  100% { opacity: var(--lo); }
}
#ram.tik::before { animation: tep var(--tik) ease-out infinite; }
/* Červená vrstva má vlastní rozkmit: na sto metrech je prakticky neviditelná
   (--sila 0 → strop .30), takže puls je zdálky jen studený a teprve zblízka
   zrudne. Proto jiné --lo/--hi než u studené vrstvy. */
#ram.tik::after  { --lo: calc(.55 * var(--sila));
                   --hi: var(--sila);
                   animation: tep var(--tik) ease-out infinite; }

/* Rohy jsou v periferním vidění nejcitlivější — přidáme jim vlastní světlo,
   aby se puls dal chytit i telefonem u pasu. */
#ram > i {
  position: absolute; width: 34vw; height: 34vw; max-width: 190px; max-height: 190px;
  opacity: 0; pointer-events: none;
  background: radial-gradient(circle at var(--rx, 0%) var(--ry, 0%),
              rgba(255,60,60,.55), transparent 70%);
}
#ram > i:nth-child(1) { left: 0;  top: 0;    --rx: 0%;   --ry: 0%; }
#ram > i:nth-child(2) { right: 0; top: 0;    --rx: 100%; --ry: 0%; }
#ram > i:nth-child(3) { left: 0;  bottom: 0; --rx: 0%;   --ry: 100%; }
#ram > i:nth-child(4) { right: 0; bottom: 0; --rx: 100%; --ry: 100%; }
#ram.tik > i { animation: tep var(--tik) ease-out infinite; }

/* ≤15 m: přestává blikat, začíná svítit. Klid na očích, maximum informace. */
#ram.tik-max::before, #ram.tik-max::after, #ram.tik-max > i { animation: none; opacity: 1; }
#ram.tik-max::after {
  box-shadow: inset 0 0 120px 26px rgba(255,42,42,.95),
              inset 0 0 24px 6px rgba(255,190,190,.55);
}

/* Slovní záložka tikotu. Zvuk může být vypnutý, sluchátka mimo, hráč nedoslýchá.
   Vzdálenost se NIKDY nepíše číslem — to by z tikotu udělalo dálkoměr. */
#tik-slovo {
  text-align: center; font-family: var(--mono); font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase; font-size: 15px;
  padding: 7px; border-radius: 10px; margin: 4px 0;
  border: 1px solid var(--hrana); background: var(--noc2); color: var(--sepot);
}
#tik-slovo.t1 { color: #9dc0ee; border-color: #3d5578; }   /* někde okolo */
#tik-slovo.t2 { color: #ffb0b0; border-color: #6d2027; background: #1a0709; }  /* blízko */
#tik-slovo.t3 { color: #fff; border-color: var(--krev2); background: var(--krev-poz);
                font-size: 17px; }                          /* na dosah */

/* ---------- kapesní režim: telefon v kapse, obrazovka skoro zhasnutá ----------
   Tikot přesto musí být vidět — proto zůstává rám, mizí obsah. */
#ovl-kapsa { background: #000; z-index: 90; }
#kapsa-znak { font-size: 26vw; color: #101a2c; font-weight: 900; line-height: 1;
              letter-spacing: .1em; }

/* ---------- ZTUHNOUT: 45 s neviditelnosti ----------
   Schoulíš se u zdi. Obrazovka musí být tmavá (jinak tě prozradí fyzicky),
   ale odpočet musí být pořád vidět. Poučení č. 12: ruší se až 40 m
   z mediánové polohy, tedy vizuálně to musí vypadat KLIDNĚ — žádné poplašné
   barvy, jinak hráč zpanikaří a vyskočí. */
#ovl-ztuh { background: #01030a; }
#ovl-ztuh .nadpis { font-size: 20px; color: #4d6288; letter-spacing: .3em; }
#ztuh-odpocet { font-family: var(--mono); font-size: 30vw; font-weight: 900;
                color: #16203a; line-height: 1;
                text-shadow: 0 0 40px rgba(70,90,140,.25); }
#ovl-ztuh .tich { color: #3f5478; font-size: 16px; max-width: 340px; }
/* dýchající obruč — dej hráči rytmus, ať vydrží stát */
@keyframes dech { 0%,100% { transform: scale(.86); opacity: .35; }
                  50%     { transform: scale(1); opacity: .7; } }
#ztuh-kruh { width: 62vw; max-width: 260px; aspect-ratio: 1; border-radius: 50%;
             border: 2px solid #22314f; position: absolute;
             animation: dech 7s ease-in-out infinite; pointer-events: none; }

/* ---------- DRŽENÍ ÚKOLU: „svítíš všem" ----------
   V KARANTÉNĚ tohle byla bílá obrazovka. Tady ne: bílá plocha v noci ve vsi
   je světelný smog, prozradí tě na 150 m fyzicky a rozbije noční vidění na
   minutu. Signál „jsi vidět" nese ZÁŘÍCÍ PRSTENEC na tmavém poli — stejná
   informace, žádná lampa. */
#ovl-hold { background: #04070f; }
#hold-txt { font-size: 25px; font-weight: 900; letter-spacing: .12em; color: var(--stribro); }
#hold-misto { font-size: 20px; color: var(--mesic); margin-top: 4px; }
/* kruhové měřidlo, --p 0–100 řídí JS */
.prog {
  --p: 0; --pc: var(--led);
  width: 200px; height: 200px; border-radius: 50%;
  background: conic-gradient(var(--pc) calc(var(--p) * 1%), rgba(70,86,125,.28) 0);
  display: flex; align-items: center; justify-content: center; margin: 22px auto;
  box-shadow: 0 0 0 3px var(--noc2), 0 0 0 5px var(--hrana),
              0 0 44px rgba(127,212,232,.30);
}
.prog > div { width: 168px; height: 168px; border-radius: 50%;
              background: #04070f; display: flex; align-items: center; justify-content: center;
              font-family: var(--mono); font-size: 46px; font-weight: 900; color: var(--mesic); }
/* pomalé vyzařování ven = „vidí tě celá ves" */
@keyframes svitis { 0%,100% { box-shadow: 0 0 0 3px var(--noc2), 0 0 0 5px var(--hrana),
                                          0 0 30px rgba(200,220,255,.22); }
                    50%     { box-shadow: 0 0 0 3px var(--noc2), 0 0 0 5px #7d92bd,
                                          0 0 70px rgba(210,230,255,.55); } }
#ovl-hold .prog { --pc: #cfe0ff; animation: svitis 2.4s ease-in-out infinite; }
.svitis-varovani { color: var(--jantar2); font-weight: 900; letter-spacing: .08em;
                   font-size: 17px; margin-top: 6px; }

/* ============================================================================
   4) OBRAZOVKA VLKA — jiný přístroj, ne jiná barva tlačítka
   ----------------------------------------------------------------------------
   Vlk drží stejný telefon, ale svět se mu obrátil: on je ten, kdo hledá.
   Dělá to tři věci, které ovce nikdy neuvidí:
     a) trvalá krvavá hrana nahoře a dole — nepulzuje (vlk nemá tikot,
        pulz by mu ho falešně napodobil),
     b) teplejší podklad — mlha zespoda dostane rudý spodní tón,
     c) ČICH: kompasová růžice, jediný informační prvek ve hře, který
        ukazuje SMĚR.
   Přepíná se jedinou třídou na <body>: body.vlk
   ========================================================================== */
body.vlk {
  background-image: var(--zrno),
    radial-gradient(120% 70% at 50% -10%, rgba(150,60,70,.14), transparent 60%),
    radial-gradient(100% 60% at 25% 110%, rgba(120,20,30,.13), transparent 65%);
}
body.vlk #hlava { border-bottom-color: var(--krev);
                  box-shadow: 0 1px 0 rgba(255,60,60,.25); }
body.vlk .logo span { color: var(--krev2); }
/* trvalá hrana — nikdy neanimovaná */
body.vlk::before, body.vlk::after {
  content: ""; position: fixed; left: 0; right: 0; height: 3px; z-index: 260;
  pointer-events: none; background: linear-gradient(90deg,
    transparent, var(--krev) 12%, var(--krev2) 50%, var(--krev) 88%, transparent);
  opacity: .75;
}
body.vlk::before { top: 0; } body.vlk::after { bottom: 0; }
body.vlk #mapa-obal { border-color: #4a1a22;
  box-shadow: inset 0 0 60px rgba(30,0,4,.85), 0 0 0 1px rgba(210,32,44,.20); }

/* --- ČICH: 1× za 3 minuty, osmisměrný, BEZ vzdálenosti --- */
#cich-ruzice {
  --uhel: 0deg;            /* JS: směr k nejbližší ovci, násobky 45° */
  --p: 100;                /* JS: nabití 0–100 */
  width: 68vw; max-width: 300px; aspect-ratio: 1; margin: 16px auto;
  border-radius: 50%; position: relative;
  background:
    conic-gradient(from -22.5deg, rgba(210,32,44,.30) 0 45deg, transparent 45deg 360deg),
    conic-gradient(var(--krev) calc(var(--p) * 1%), rgba(70,86,125,.22) 0);
  transform: rotate(var(--uhel));
  box-shadow: inset 0 0 0 2px #3a1119, 0 0 40px rgba(210,32,44,.25);
}
/* jazyk ukazatele — vystupuje ze středu do voněného směru */
#cich-ruzice::before {
  content: ""; position: absolute; left: 50%; top: 6%; width: 5px; height: 44%;
  transform: translateX(-50%); border-radius: 3px;
  background: linear-gradient(180deg, var(--krev2), rgba(210,32,44,0));
  box-shadow: 0 0 22px rgba(255,59,59,.65);
}
/* střed růžice zpět do svislé polohy, ať se v něm dá číst text */
#cich-ruzice > .stred {
  position: absolute; inset: 22%; border-radius: 50%; background: #0a0409;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(calc(-1 * var(--uhel)));
  font-family: var(--mono); font-weight: 900; color: var(--mesic);
}
#cich-ruzice .smer { font-size: 42px; letter-spacing: .06em; }
#cich-ruzice .pozn { font-size: 13px; color: var(--tlum); text-transform: uppercase;
                     letter-spacing: .12em; margin-top: 4px; }
#bt-cich { border-color: var(--krev); color: #ffc4c4; }
#bt-cich:disabled { color: var(--sepot); }
#bt-cich .zbyva { font-family: var(--mono); color: var(--tlum); }

/* --- CHYTÁM: 6 s držení. Poučení č. 3 a 14 najednou. --- */
#ovl-chytam { background: #100307; }
#ovl-chytam .prog { --pc: var(--krev2); }
#ovl-chytam .prog > div { background: #100307; color: #ffd6d6; }
#chytam-jmeno { font-size: 34px; font-weight: 900; letter-spacing: .06em; color: #fff; }
/* trvalý, neodstranitelný řádek — objevuje se pod KAŽDÝM chytáním */
.bez-doteku {
  margin-top: 14px; padding: 10px 14px; border-radius: 10px;
  border: 1px dashed var(--krev); background: var(--krev-tma);
  color: #ffb0b0; font-weight: 900; letter-spacing: .08em; font-size: 15px;
  text-transform: uppercase;
}

/* --- STOJÍCÍ VLK JE VIDĚT: varování v 90 s, prozrazení ve 120 s --- */
body.vlk.varovani #hlava { border-bottom-color: var(--jantar); }
@keyframes prozrazen {
  0%,100% { box-shadow: inset 0 0 0 4px rgba(255,60,60,.25); }
  50%     { box-shadow: inset 0 0 0 4px rgba(255,60,60,.85); }
}
#ram.prozrazen { animation: prozrazen 1.8s ease-in-out infinite; }
.banner.stani .lista::after { background: var(--jantar); }

/* --- zóna kolem košáru, kam vlk nesmí --- */
.banner.zona { border-color: var(--krev); color: #ffc9c9;
  background-image: repeating-linear-gradient(135deg, #2a0a10 0 12px, #180509 12px 24px); }

/* ============================================================================
   5) KOŠÁR — chycený hráč čeká, ale JE VE HŘE
   ----------------------------------------------------------------------------
   Poučení: kdo vypadne, jde domů. Košár proto nesmí vypadat jako smrt.
   Vypadá jako ohrada: dřevěné laťky po obvodu, odpočet, a hlavně SEZNAM
   TĚCH, KDO PRO TEBE MŮŽOU PŘIJÍT. Naděje je celý smysl téhle obrazovky.
   ========================================================================== */
#scr-kosar { background-color: #05080f;
  background-image: var(--zrno), radial-gradient(120% 60% at 50% 0%, rgba(120,150,210,.13), transparent 62%);
  display: flex; flex-direction: column; align-items: center; text-align: center; }
/* laťky ohrady — jen gradient, žádný obrázek */
.ohrada { width: 100%; height: 16px; flex: 0 0 auto;
  background: repeating-linear-gradient(90deg,
    #2b3550 0 6px, transparent 6px 20px); opacity: .8; }
#kosar-odpocet { font-family: var(--mono); font-size: 26vw; font-weight: 900;
                 line-height: 1; color: var(--stribro);
                 text-shadow: 0 0 40px rgba(150,180,240,.3); }
#kosar-odpocet.brzy { color: var(--krev2); text-shadow: 0 0 44px rgba(255,59,59,.45); }
#kosar-popis { font-size: 19px; max-width: 420px; margin: 10px auto; }
.zachrance { display: flex; align-items: center; gap: 10px; padding: 11px 6px;
             border-bottom: 1px solid rgba(42,53,80,.6); font-size: 17px; text-align: left; }
.zachrance:last-child { border-bottom: 0; }
.zachrance .tecka { width: 12px; height: 12px; border-radius: 50%; background: var(--mech);
                    box-shadow: 0 0 12px rgba(98,198,141,.7); flex: 0 0 auto; }
.zachrance.mimo .tecka { background: var(--sepot); box-shadow: none; }
/* vysvobozená ovce: 45 s nedotknutelnost */
@keyframes stit { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.odznak.stit { color: #cfe0ff; border-color: #8fa8d8; background: #131c30;
               animation: stit 1.4s ease-in-out infinite; }

/* ============================================================================
   6) VÝBĚR BODU ZE SEZNAMU — GPS nikdy nehádá
   ----------------------------------------------------------------------------
   Poučení č. 2: hráč vybírá sám, appka se nehádá z polohy. Řádky jsou proto
   obří terče, vzdálenost je jen nápověda (a je vidět, že je jen orientační).
   ========================================================================== */
.bod-vyber { display: flex; flex-direction: column; gap: 9px;
             width: 100%; max-width: 470px; margin: 8px auto; text-align: left; }
.bod-radek {
  display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center;
  width: 100%; min-height: 76px; padding: 12px 14px; text-align: left;
  background: linear-gradient(180deg, var(--panel2), #0b1120);
  border: 2px solid var(--hrana); border-radius: 13px;
  font-size: 19px; font-weight: 800; color: var(--mesic);
  text-transform: none; letter-spacing: 0; box-shadow: var(--relief); cursor: pointer;
}
.bod-radek:active { background: var(--stisk); transform: translateY(1px); }
.bod-radek .znak { font-size: 27px; line-height: 1; }
.bod-radek .nazev { display: block; }
.bod-radek small, .bod-radek .tich {
  display: block; font-size: 14.5px; font-weight: 600; color: var(--tlum);
  margin-top: 3px; }
.bod-radek .vzdal { font-family: var(--mono); font-variant-numeric: tabular-nums;
                    font-size: 21px; font-weight: 900; color: var(--led); text-align: right; }
.bod-radek .vzdal small { color: var(--sepot); font-size: 11px; font-weight: 600;
                          letter-spacing: .06em; }
.bod-radek.blizko { border-color: var(--hrana2); }
.bod-radek.blizko .vzdal { color: var(--mesic); }
.bod-radek.hotovo { border-color: var(--mech); }        /* už splněný bod */
.bod-radek.hotovo .vzdal { color: var(--mech); }
.bod-radek.cd { opacity: .55; border-style: dashed; }   /* 150 s cooldown */
.bod-radek.cd .vzdal { color: var(--sepot); }
.bod-radek.svitici { border-color: #b9cdf0; box-shadow: var(--relief), 0 0 22px rgba(185,205,240,.25); }
.bod-radek:disabled { transform: none; }

/* ---------- nápověda u bodu ---------- */
.napoveda {
  background-color: var(--panel); background-image: var(--zrno);
  border: 1px solid var(--hrana); border-left: 6px solid var(--hrana2);
  border-radius: 12px; padding: 11px 13px; margin: 8px 0;
  font-size: 16px; line-height: 1.45; color: var(--mesic); text-align: left;
}
.napoveda .nadpis { font-family: var(--mono); font-size: 14px; font-weight: 800;
                    color: var(--stribro); letter-spacing: .12em; margin-bottom: 5px; }
.napoveda.zly { border-left-color: var(--krev); }

/* ============================================================================
   7) OVERLAYE
   ========================================================================== */
.ovl { position: fixed; inset: 0; z-index: 50;
       background-color: var(--noc); background-image: var(--zrno);
       display: flex; flex-direction: column; align-items: center; justify-content: center;
       padding: 20px; text-align: center; overflow-y: auto; }

/* CHYCEN — jediný okamžik, kdy červená zaplní celou obrazovku.
   Krátce (JS ji po ~3 s překlopí do košáru) a bez stroboskopu. */
@keyframes chycen { 0% { background-color: #6d0a12; } 100% { background-color: #240409; } }
#ovl-chycen { animation: chycen 2.2s ease-out forwards; background-image: none; }
#ovl-chycen .nadpis { font-size: 13vw; font-weight: 900; letter-spacing: .14em; color: #fff;
                      text-shadow: 0 0 40px rgba(255,80,80,.6); }
#ovl-chycen .tich { color: #ffc4c4; font-size: 18px; max-width: 380px; margin-top: 12px; }

/* UNIKLA — vlkovi se přetrhlo chytání. Musí být jednoznačné (poučení č. 18). */
#ovl-unikla { background-color: #0d1421; }
#ovl-unikla .nadpis { font-size: 11vw; font-weight: 900; color: var(--stribro); letter-spacing: .12em; }

/* MÁM PROBLÉM — přebíjí úplně všechno, i vlka. Jantarová schválně: je to
   jediná barva, kterou hra jinak nepoužívá na plochu, a nesmí splynout s vlkem. */
#ovl-problem { background-color: #2a1a05; border: 10px solid var(--jantar); z-index: 400; }
#ovl-problem .nadpis { font-size: 30px; font-weight: 900; color: #fff; }
#bt-problem {
  position: fixed; right: 10px; bottom: calc(196px + env(safe-area-inset-bottom));
  z-index: 320; min-height: 56px; min-width: 56px; padding: 4px 8px;
  border-radius: 50%; background: var(--jantar); border: 3px solid #fff2dc;
  color: #17100a; font-size: 12px; font-weight: 900; line-height: 1.1;
  letter-spacing: .02em; box-shadow: 0 0 0 4px rgba(255,166,43,.22), 0 4px 16px rgba(0,0,0,.6);
}
#bt-kapsa { position: fixed; left: 10px; bottom: calc(196px + env(safe-area-inset-bottom));
            z-index: 320; min-height: 52px; min-width: 52px; padding: 0; border-radius: 50%;
            font-size: 22px; color: var(--tlum); }

/* generický modal */
#ovl-modal { background-color: rgba(0,0,0,.82); background-image: none; z-index: 70; }
.modal-box { background-color: var(--panel); background-image: var(--zrno);
             border: 1px solid var(--hrana2); border-radius: 16px;
             padding: 18px; width: 100%; max-width: 460px; text-align: center;
             max-height: 88vh; overflow-y: auto;
             box-shadow: var(--relief), 0 16px 50px rgba(0,0,0,.7); }
.modal-box h2 { margin-bottom: 10px; }
.modal-box button { width: 100%; margin: 6px 0; }

/* ---------- OSOBNÍ KARTA a PRAVIDLA ----------
   Celostránkové, ne dialog. Musí jít otevřít kdykoli — i po chycení. */
#ovl-modal.karta-plna { background-color: var(--noc); background-image: var(--zrno); padding: 10px; }
.modal-box.karta-plna { max-width: 580px; max-height: 96vh; text-align: left; padding: 16px; }
.modal-box.karta-plna h2 { text-align: center; }
.karta-plna .role-nadpis { font-size: 30px; font-weight: 900; letter-spacing: .16em;
                           text-align: center; margin: 4px 0 14px; }
.karta-plna .odstavec { margin: 12px 0; font-size: 17px; line-height: 1.5; }
.karta-plna .odstavec b { display: block; font-size: 14px; letter-spacing: .12em;
                          text-transform: uppercase; color: var(--tlum); margin-bottom: 3px; }
/* dvě verze karty — vizuálně na první pohled jiné */
.karta-plna.ovce { border-color: var(--hrana2); border-left: 7px solid #9db4de; }
.karta-plna.ovce .role-nadpis { color: #d8e4f8; text-shadow: 0 0 26px rgba(160,190,240,.4); }
.karta-plna.vlk  { border-color: var(--krev); border-left: 7px solid var(--krev);
                   background-color: #150710; }
.karta-plna.vlk .role-nadpis { color: var(--krev2); text-shadow: 0 0 28px rgba(255,59,59,.5); }
.karta-plna.vlk .odstavec b { color: #e79a9a; }

/* feed */
#ovl-feed { justify-content: flex-start; text-align: left; align-items: stretch; padding-top: 26px; }
.feed-radek { padding: 12px 4px; border-bottom: 1px solid var(--hrana); font-size: 16px; }
.feed-radek .cas { color: var(--sepot); font-size: 13px; font-family: var(--mono); }
.feed-radek.vlci { color: #ffc4c4; }
.feed-radek.ok { color: #bff0d4; }

/* konec kola / večera */
#scr-konec { text-align: center; }
.vysledek { font-size: 27px; font-weight: 900; text-align: center; padding: 20px 10px;
            border: 2px solid var(--hrana2); border-radius: 16px; letter-spacing: .1em;
            color: var(--stribro); background: rgba(70,86,125,.08); }
.vysledek.stado { border-color: var(--mech); color: #bff0d4; }
.vysledek.vlci  { border-color: var(--krev); color: #ffc4c4; }
.tabulka { width: 100%; border-collapse: collapse; font-size: 16px; margin-top: 10px; }
.tabulka th { font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
              color: var(--tlum); text-align: left; padding: 6px 4px;
              border-bottom: 1px solid var(--hrana); }
.tabulka td { padding: 9px 4px; border-bottom: 1px solid rgba(42,53,80,.55); }
.tabulka td.c { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.tabulka tr.ja td { color: var(--mesic); font-weight: 800; }

/* toast + celoplošné bliknutí (třetí kanál signálu vedle zvuku a vibrace) */
#toast { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom));
         z-index: 350; background: #060a12; color: var(--mesic);
         border: 1px solid var(--hrana2); border-radius: 12px;
         padding: 14px 16px; font-size: 17px; font-weight: 800; text-align: center;
         opacity: 0; pointer-events: none; transition: opacity .25s;
         box-shadow: 0 8px 30px rgba(0,0,0,.8); }
#toast.jede { opacity: 1; }
#blik { position: fixed; inset: 0; z-index: 380; background: #cfe0ff; opacity: 0; pointer-events: none; }
@keyframes bliknuti { 0%,22% { opacity: .85; } 12%,34%,100% { opacity: 0; } }
#blik.jede { animation: bliknuti 1.1s linear; }
#blik.vlci { background: #ff3b3b; }

/* ============================================================================
   8) MAPA — třídy z map.js
   ----------------------------------------------------------------------------
   Mapa je noční letecký snímek: cesty jsou to jediné, co má měsíc na sobě,
   budovy jsou tmavé bloky s bledým obrysem. Cesty musí být nejsvětlejší prvek
   plochy — hráč po nich musí jít (bezpečnost) a musí je poznat na jeden pohled.
   ========================================================================== */

/* budovy: tmavé bloky, bledý obrys. Kreslí se, aby bylo vidět, KUDY se NESMÍ. */
.bud   { fill: #0b1120; stroke: #33405e; stroke-width: 1.1; }

/* cesty — tři druhy, tři šířky. Silnice je měsíčně bílá. */
.ces-r { fill: none; stroke: #b9cbe8; stroke-width: 4.6; stroke-linecap: round;
         stroke-linejoin: round; opacity: .95; }
.ces-t { fill: none; stroke: #7f92b4; stroke-width: 3; stroke-dasharray: 9 5; stroke-linecap: round; }
.ces-p { fill: none; stroke: #5c6d90; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }

/* stanoviště: kroužek + znak + popiska. Obtah (paint-order) je nutný —
   bez něj se text na světlé cestě ztratí. */
.st circle { fill: #070c17; stroke: #8fa6cc; stroke-width: 2.4; }
.st text   { fill: var(--mesic); font-size: 13px; text-anchor: middle; font-weight: 800;
             paint-order: stroke; stroke: #04060d; stroke-width: 3.5px; stroke-linejoin: round; }
.st .lbl   { fill: #c2d0e8; font-size: 12px; letter-spacing: .04em; }

.st.naves circle  { stroke: #dbe6fa; stroke-width: 3.2; }        /* náves */
.st.kosar circle  { stroke: var(--krev); stroke-width: 3.6; fill: #1a0509;
                    stroke-dasharray: 5 3; }                     /* KOŠÁR */
.st.kosar text    { fill: #ffd0d0; }
.st.hotovo circle { stroke: var(--mech); stroke-width: 3; fill: #08170f; }  /* splněný bod */
.st.hotovo text   { fill: #bff0d4; }
.st.cd circle     { stroke: #4d5c7c; stroke-dasharray: 3 3; fill: #060a13; } /* cooldown 150 s */
.st.cd text       { fill: #7a8aa8; }

/* SVÍTÍCÍ BOD — „tam někdo právě drží úkol". Vidí ho i vlk i ovce.
   Rozsvěcí se při STARTU držení, ne po dokončení: pozvánka, ne stopa.
   Je to nejdůležitější značka na mapě, takže září a pulzuje. */
/* Pozor: `r` se v keyframes neanimuje (Firefox neumí SVG geometrii přes CSS).
   Pulzuje se proto tloušťkou obrysu a září — to umí všechny prohlížeče. */
@keyframes svit { 0%,100% { stroke-width: 4.5; opacity: 1; }
                  50%     { stroke-width: 9;   opacity: .5; } }
.st.svitici circle { stroke: #ffffff; stroke-width: 4.5; fill: #1a2438;
                     filter: drop-shadow(0 0 10px rgba(210,230,255,.9));
                     animation: svit 1.15s ease-in-out infinite; }
.st.svitici text   { fill: #ffffff; }
/* doznívání (3 min po dokončení) — svítí, ale už neběží */
.st.doznivani circle { stroke: #9db4de; stroke-width: 3.4; filter: none; animation: none; }

/* ostatní hráči — ovce vidí ovce jen v lobby a v košáru, vlk vidí vlky vždy */
.hrac circle { fill: #9db4de; stroke: #04060d; stroke-width: 1.5; }
.hrac text   { fill: #cfdcf3; font-size: 12px; text-anchor: middle; font-weight: 800;
               paint-order: stroke; stroke: #04060d; stroke-width: 3.5px; stroke-linejoin: round; }
.hrac.stary circle, .hrac.stary text { opacity: .45; }   /* >60 s bez signálu = zešedne */
/* (poloměr se nemění — `r` z CSS neumí Firefox; vlk se pozná barvou a obrysem) */
.hrac.vlk circle { fill: var(--krev); stroke: #ffb0b0; stroke-width: 3; }
.hrac.vlk text   { fill: #ffb0b0; }
/* STOJÍCÍ VLK, kterého ovce uvidí — 120 s na jednom místě */
.hrac.spatren circle { fill: var(--krev2); stroke: #fff; stroke-width: 2.5;
                       filter: drop-shadow(0 0 12px rgba(255,59,59,.9)); }
.hrac.spatren text   { fill: #ffd6d6; }

/* kroužek přesnosti cizí polohy */
.acc { fill: rgba(157,180,222,.07); stroke: rgba(157,180,222,.24); stroke-width: 1; }

/* JÁ — jediná bílá tečka na mapě. Vždycky ji musíš najít okamžitě. */
.me     { fill: #ffffff; stroke: #7fd4e8; stroke-width: 3;
          filter: drop-shadow(0 0 8px rgba(127,212,232,.8)); }
.me-acc { fill: rgba(127,212,232,.10); stroke: rgba(127,212,232,.40); stroke-width: 1.5; }

/* doplňkové vrstvy, které kreslí klient nad map.js */
.hranice { fill: none; stroke: var(--jantar); stroke-width: 3; stroke-dasharray: 11 7; opacity: .8; }
/* BEČENÍ: poloha ovce jako KRUH 100 m, nikdy jako bod. Otáčí se, aby bylo
   poznat, že je to živá stopa a ne zaměřovač. */
@keyframes stopa { to { stroke-dashoffset: -120; } }
.beceni { fill: rgba(255,59,59,.06); stroke: var(--krev2); stroke-width: 2.5;
          stroke-dasharray: 10 8; animation: stopa 3s linear infinite; }
/* zóna kolem košáru: pro ovci bezpečí, pro vlka zákaz */
.zona      { fill: rgba(157,180,222,.05); stroke: #9db4de; stroke-width: 2; stroke-dasharray: 6 6; }
.zona-zakaz{ fill: rgba(210,32,44,.09); stroke: var(--krev2); stroke-width: 3; stroke-dasharray: 4 5; }
/* paprsek čichu na mapě */
.cich-cara { stroke: var(--krev2); stroke-width: 3; stroke-dasharray: 7 6; opacity: .85; }

/* ============================================================================
   9) OMEZENÝ POHYB
   ----------------------------------------------------------------------------
   Tikot je BEZPEČNOSTNÍ a HERNÍ informace — nesmí zmizet. Když si hráč vypne
   animace, převedeme puls na TRVALOU intenzitu: stejná informace, žádný pohyb.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #ram.tik::before, #ram.tik::after, #ram.tik > i {
    animation: none; opacity: calc(.25 + .75 * var(--sila));
  }
  #ram.prozrazen { animation: none; box-shadow: inset 0 0 0 4px rgba(255,60,60,.7); }
  .st.svitici circle { animation: none; }
  .beceni, .odznak.stit, #ztuh-kruh, #ovl-hold .prog { animation: none; }
  #ovl-chycen { animation: none; background-color: #3d060c; }
  #blik.jede { animation-duration: .7s; }
}

/* ============================================================================
   10) LANDING (index.html)
   ========================================================================== */
.landing { max-width: 470px; margin: 0 auto; text-align: center; padding-top: 8vh; }
.landing .logo { font-size: 46px; }
.landing .pod { color: var(--tlum); margin: 14px 0 28px; font-size: 18px; }
.landing details { text-align: left; margin-top: 24px; }
.landing summary { font-weight: 800; font-size: 18px; padding: 12px 0; cursor: pointer;
                   color: var(--stribro); text-transform: uppercase; letter-spacing: .1em; }
.landing li { margin: 10px 0 10px 20px; }
a.tlacitko { display: block; background: linear-gradient(180deg, #1e2b46, #101828);
             border: 2px solid var(--hrana2); color: #fff; border-radius: 14px;
             padding: 22px; font-size: 26px; font-weight: 900; text-decoration: none;
             letter-spacing: .16em; text-transform: uppercase; box-shadow: var(--relief); }