/* ============================================================================
   MEZI NÁMI — ROVENSKO · vzhled
   ----------------------------------------------------------------------------
   SVĚT: banátská ves v noci. Hluboká modř oblohy, petrolejová žluť lampy
   v okně, dřevo a vápno. Krev JEN na nález těla — nikde jinde.
   DOJEM: ručně psaná vývěska na návsi. Papír připíchnutý na dřevěné desce,
   inkoust, vlnovka podtržená pravítkem, co uklouzlo.

   NENÍ TO karanténa (vojenská khaki, stencil, plech) ani vlk (noční les).
   Tam je přístroj. Tady je OBEC: papír, dřevo, vápno a jedna lampa.

   PRAVIDLA NAD VŠÍM (dvě odehrané hry v mrazu je zaplatily):
   1. Když si styl a čitelnost odporují, VYHRÁVÁ ČITELNOST.
   2. Žádný text pod 17 px. (Výjimka: popisky uvnitř SVG mapy — to je grafika.)
   3. Palec v rukavici: každý klikací prvek min. 58 px na výšku.
   4. Bez webfontů, bez obrázků, bez knihoven. Jen CSS a systémové písmo.

   TŘI ÚROVNĚ JASU — je to herní mechanika, ne dekorace:
     L1 TMA    (kapesní režim, ZHASLO, neboštík) — skoro černá, nesvítíš do vsi
     L2 LAMPA  (běžná hra) — tmavá modř + jeden teplý zdroj, ať nejsi maják
     L3 VÁPNO  (držení práce, nález těla, shromáždění) — celá obrazovka svítí.
                To je ZÁMĚR: v tu chvíli MÁŠ být vidět.

   PIXEL PO PIXELU (tvrdé): hlavní obrazovka Cizího se NESMÍ lišit od
   Roveňákovy. V celém souboru není jediné pravidlo `body.cizi .neco` mimo
   sekci 12 — a to jsou samostatné překryvy, ne hlavní obrazovka.
   ========================================================================== */

/* ===== 1. TOKENY ========================================================= */
:root {
  /* --- noc nad Rovenskem: modrá, nikdy černá (černá vypadá jako vypnutý displej) --- */
  --noc:     #0b1220;        /* obloha, podklad všeho */
  --noc2:    #070d17;        /* prohlubně, vnitřek měřidel, spodek */
  --panel:   #14203a;        /* papír vývěsky ve tmě */
  --panel2:  #1b2b49;        /* zvednutý papír, aktivní řádek */
  --stisk:   #24375c;        /* zmáčknuté plochy */

  /* --- dřevo: hrany, rámy, tlačítka. Vývěska je z prken. --- */
  --drevo:   #4d3821;
  --drevo2:  #6f5330;        /* světlejší prkno, horní hrana */
  --drevo3:  #2c2013;        /* stín pod prknem */

  /* --- vápno: text. Vybílená zeď, ne bílá — bílá v noci pálí. --- */
  --vapno:   #f0e9db;
  --vapno2:  #fffaf0;        /* jen velká čísla a to nejdůležitější */
  --tich:    #a8b6cb;        /* tlumené — modrošedé, NIKDY šedé na šedém */

  /* --- petrolejová lampa: jediný akcent hry --- */
  --lampa:   #eda01c;        /* plamen */
  --lampa2:  #ffc75c;        /* světlo, čísla, odpočty */
  --lampa3:  #7a5410;        /* zhaslá lampa, nesplněné okno */
  --zar:     rgba(237,160,28,.30);   /* záře kolem světla */

  /* --- měsíc: chlad. Mapa, GPS, neboštík. --- */
  --mesic:   #8fb6dd;
  --mesic2:  #cfe2f5;

  /* --- krev: VÝHRADNĚ nález těla a zabití. Nikde jinde. --- */
  --krev:    #b3170f;
  --krev2:   #ff8a80;        /* text na krvavém podkladu */
  --krev3:   #4a0a06;        /* podklad */
  --kalna:   #52251c;        /* „kalná krev" — hrana tlačítka ZABÍT.
                                Na první pohled hnědá jako dřevo. Rudě svítící
                                panel by byl přes celou náves vidět. */

  /* --- stav práce --- */
  --hotovo:  var(--lampa2);  /* hotová práce = rozsvícené okno. Žádná zelená. */
  --ceka:    #8fb6dd;        /* běží okno na dvoumístnou práci */

  /* --- barvy hráčů (kronika, mapa). Čitelné na noci i na papíře. --- */
  --h1: #f2a63b; --h2: #57bcd6; --h3: #b98be0; --h4: #79c26a;
  --h5: #ef7f6a; --h6: #cfc060; --h7: #7f9ce8; --h8: #e2789f;

  /* --- písmo: dva hlasy --- */
  /* INKOUST — nadpisy, jména míst, vyprávění. Patky = psané, ne přístrojové. */
  --inkoust: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
             "Times New Roman", serif;
  /* RUKA — všechno, co se čte rychle a v pohybu. Systémové, tedy nejčitelnější. */
  --pismo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* ČÍSLA — metry, odpočty, procenta. Nesmí poskakovat. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* --- textury bez jediného obrázku --- */
  --papir:  repeating-linear-gradient(96deg, rgba(240,233,219,.020) 0 2px, transparent 2px 5px);
  --letokruh: repeating-linear-gradient(90deg,
              rgba(0,0,0,.22) 0 2px, rgba(255,255,255,.03) 2px 3px, transparent 3px 9px);
  --hrbol: inset 0 1px 0 rgba(240,233,219,.10), inset 0 -2px 6px rgba(0,0,0,.45),
           0 2px 0 var(--drevo3);
}

/* ===== 2. ZÁKLAD ======================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

body {
  color: var(--vapno);
  font-family: var(--pismo);
  font-size: 18px; line-height: 1.4;
  overscroll-behavior: none; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  background-color: var(--noc);
  background-image:
    var(--papir),
    /* jedno rozsvícené okno nad hlavou — teplo shora */
    radial-gradient(120% 55% at 50% -6%, var(--zar), transparent 60%),
    /* vinětace: ves končí a začíná pole */
    radial-gradient(140% 110% at 50% 50%, transparent 42%, rgba(0,0,0,.55) 100%);
  background-attachment: fixed;
}

input, select, button, textarea { font-family: inherit; font-size: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--lampa2); outline-offset: 2px; }

/* obrazovka = celá plocha; spodní odsazení kvůli gestové liště telefonu */
.scr {
  position: fixed; inset: 0; overflow-y: auto;
  padding: 12px 12px calc(18px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

/* ===== 3. TYPOGRAFIE — vývěska ========================================== */
h1, h2, h3, .logo, .nadpis, .misto { font-family: var(--inkoust); font-weight: 700; }

.logo {
  font-size: 27px; line-height: 1.1; letter-spacing: .02em;
  color: var(--vapno2); text-shadow: 0 0 18px var(--zar);
}
.logo span { color: var(--lampa2); }          /* „ROVENSKO" hoří */
.logo .pod {                                   /* 586 → 69 */
  display: block; font-family: var(--pismo); font-weight: 400;
  font-size: 17px; letter-spacing: 0; color: var(--tich); margin-top: 3px;
}

h2 { font-size: 24px; color: var(--vapno2); }
h3 {
  font-size: 19px; color: var(--lampa2); margin-bottom: 4px;
  /* vlnovka: pravítko, které uklouzlo */
  text-decoration: underline wavy var(--lampa3); text-underline-offset: 5px;
}
b, strong { color: var(--vapno2); font-weight: 700; }
em, .psano { font-family: var(--inkoust); font-style: italic; color: var(--vapno); }

.tich  { color: var(--tich); font-size: 17px; }
.mono, .cislo, .metry { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.metry { color: var(--lampa2); font-weight: 700; letter-spacing: -.02em; }
.chyba { color: var(--krev2); font-weight: 700; font-size: 17px; min-height: 1.35em; margin: 6px 0; }

/* jméno místa — vždycky inkoustem, vždycky velké. Hráč ho hledá očima ve tmě. */
.misto { font-size: 22px; color: var(--vapno2); line-height: 1.15; }

/* razítko / štítek na vývěsce */
.odznak {
  display: inline-block; font-family: var(--mono); font-size: 17px; font-weight: 700;
  padding: 3px 9px; border: 2px solid var(--drevo2); border-radius: 3px;
  color: var(--tich); background: rgba(0,0,0,.28); letter-spacing: .04em;
}
.odznak.lampa { color: var(--lampa2); border-color: var(--lampa3); }
.odznak.dvoj  { color: var(--mesic2); border-color: #2f4a6b; }
.odznak.retez { color: #d8c39a; border-color: var(--drevo2); }

/* ===== 4. TLAČÍTKA — prkénka, ne plech ================================== */
button {
  display: block; width: 100%;
  background-color: var(--drevo);
  background-image: var(--letokruh), linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.30));
  color: var(--vapno2);
  font-family: var(--pismo); font-size: 20px; font-weight: 700; letter-spacing: .01em;
  border: 2px solid var(--drevo2); border-radius: 5px;
  min-height: 60px; padding: 12px 14px; margin: 8px 0;
  cursor: pointer; text-align: center;
  box-shadow: var(--hrbol);
}
button:active {
  background-color: var(--drevo3); transform: translateY(2px);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.7);
}
button:disabled { opacity: .42; box-shadow: none; transform: none; }
button .tich { display: block; font-size: 17px; margin-top: 3px; font-weight: 400; }

.velke   { min-height: 72px; font-size: 22px; }
.hlavni  { /* rozsvícená lampa: jediná akce, kterou teď chceš */
  background-color: #6a4a12; border-color: var(--lampa);
  color: var(--lampa2); box-shadow: var(--hrbol), 0 0 22px var(--zar);
}
.klidne  { background-image: none; background-color: var(--panel); border-color: #2c4166; }
.male    { min-height: 58px; font-size: 18px; }

/* řada tlačítek vedle sebe (KDO JSEM / PRAVIDLA / ROZHLAS) */
.rada { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rada button { margin: 0; font-size: 18px; min-height: 58px; padding: 10px 6px; }

/* ===== 5. KARTY — papír připíchnutý na desce ============================ */
.karta {
  position: relative;
  background-color: var(--panel);
  background-image: var(--papir);
  border: 2px solid #2b3f63;
  border-radius: 3px;
  padding: 13px 14px; margin: 11px 0;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(240,233,219,.07);
}
/* papíry nevisí rovně — mikroskopické natočení dělá celý „vývěskový" dojem */
.karta:nth-of-type(odd)  { transform: rotate(-.25deg); }
.karta:nth-of-type(even) { transform: rotate(.2deg); }
/* připínáček */
.karta.pripnuta::before {
  content: ""; position: absolute; top: -6px; left: 50%; width: 13px; height: 13px;
  margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--lampa2), #6b4a12 70%);
  box-shadow: 0 2px 4px rgba(0,0,0,.7);
}
.karta > h3:first-child { margin-top: -2px; }

/* dřevěná deska pod papíry (obal seznamu) */
.deska {
  background-color: #1a1408; background-image: var(--letokruh);
  border: 3px solid var(--drevo); border-radius: 5px; padding: 8px 10px 12px;
}

/* ===== 6. STÁLÝ PÁS: HODINY + UKAZATEL VSI ============================== */
/* Ukazatel odvedené práce celé vsi MUSÍ být pořád na očích — je to jediné
   napětí, které hra má, a Cizí ho vidí taky. Proto lepí nahoře, přes všechno. */
.pas-horni {
  position: sticky; top: 0; z-index: 30;
  margin: -12px -12px 10px; padding: 8px 12px 10px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--noc2) 78%, rgba(7,13,23,0));
  border-bottom: 2px solid var(--drevo);
  box-shadow: 0 6px 14px rgba(0,0,0,.55);
}
.pas-radek { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

/* hodiny do rána — pasivní hrozba Cizího, tak ať jsou vidět */
.hodiny { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--vapno2); }
.hodiny .lbl { font-family: var(--pismo); font-size: 17px; color: var(--tich); margin-right: 6px; }
.hodiny.dochazi { color: var(--lampa2); }
.hodiny.posledni { color: var(--krev2); animation: tik 1s steps(1) infinite; }
@keyframes tik { 0%,60% { opacity: 1; } 61%,100% { opacity: .55; } }

/* --- UKAZATEL VSI: ves se rozsvěcí. Každá hotová práce = jedno okno. --- */
.ves-ukazatel { --p: 0; margin-top: 7px; }
.okna {
  display: flex; gap: 3px; align-items: flex-end;
  height: 26px; padding: 2px; border: 2px solid var(--drevo); border-radius: 3px;
  background: var(--noc2);
}
.okna i {                                   /* zhaslé okno */
  flex: 1 1 0; height: 100%; border-radius: 1px;
  background: #16203a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.okna i.sviti {                             /* rozsvícené — někdo tam odpracoval */
  background: linear-gradient(180deg, var(--hotovo), var(--lampa));
  box-shadow: 0 0 8px var(--zar), inset 0 0 0 1px rgba(0,0,0,.35);
}
.okna i.cerstve { animation: rozsvit 1.6s ease-out; }
@keyframes rozsvit {
  0%   { background-color: var(--vapno2); box-shadow: 0 0 22px var(--vapno2); }
  100% { background-color: var(--lampa); box-shadow: 0 0 8px var(--zar); }
}
/* záložní proužek pro případ, že je prací moc na jednotlivá okna */
.ukaz-pruh { height: 8px; margin-top: 5px; background: var(--noc2);
             border: 1px solid var(--drevo); border-radius: 2px; overflow: hidden; }
.ukaz-pruh > i { display: block; height: 100%; width: calc(var(--p) * 1%);
                 background: linear-gradient(90deg, var(--lampa), var(--lampa2));
                 transition: width .5s ease; }
.ukaz-popis {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 17px; color: var(--tich);
}
.ukaz-popis b { font-family: var(--mono); color: var(--lampa2); font-size: 19px; }

/* ===== 7. SEZNAM PRÁCE ================================================== */
/* Řádek práce je celý klikací. Nahoře jméno místa (to hráč hledá), vpravo
   metry, pod tím jednou větou co tam dělá. Nic víc se ve tmě nepřečte. */
.prace-radek {
  display: block; width: 100%; text-align: left;
  background-color: var(--panel); background-image: var(--papir);
  border: 2px solid #2b3f63; border-left: 6px solid var(--drevo2); border-radius: 4px;
  padding: 12px 13px; margin: 9px 0; min-height: 76px;
  box-shadow: 0 2px 0 rgba(0,0,0,.45);
}
.prace-radek .horni { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.prace-radek .misto { flex: 1 1 auto; }
.prace-radek .metry { font-size: 20px; white-space: nowrap; }
.prace-radek .co { display: block; margin-top: 5px; font-size: 18px; color: var(--vapno); font-weight: 400; }
.prace-radek .stitky { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* jsi dost blízko → řádek se rozsvítí a je jasné, na co ťuknout */
.prace-radek.blizko {
  border-left-color: var(--lampa); background-color: var(--panel2);
  box-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 18px var(--zar);
}
.prace-radek.blizko .metry { color: var(--vapno2); }

/* hotovo — okno svítí, řádek ustupuje do pozadí, ale zůstane čitelný */
.prace-radek.hotovo { border-left-color: var(--hotovo); opacity: .62; }
.prace-radek.hotovo .misto { text-decoration: line-through; text-decoration-color: var(--lampa3); }
.prace-radek.hotovo .horni::after { content: "✦"; color: var(--hotovo); font-size: 22px; }
/* papír se při zmáčknutí zaboří do modra, ne do hnědé — není to prkno */
.prace-radek:active, .bod-radek:active, .hlas-radek:active { background-color: var(--stisk); }

/* navazující práce, která se ještě neodemkla */
.prace-radek.zamceno { opacity: .5; border-left-style: dashed; }
.prace-radek.zamceno .co::before { content: "napřed: "; color: var(--tich); }

/* dvoumístná práce — druhý konec je někde daleko */
.prace-radek.dvoj { border-left-color: var(--ceka); }
/* běží 60s okno: parťák už zmáčkl. Tohle je nejnapínavější stav ve hře. */
.prace-radek.okno-bezi {
  border-color: var(--ceka); background-color: #16273f;
  animation: dychokno 1.6s ease-in-out infinite;
}
@keyframes dychokno { 0%,100% { box-shadow: 0 2px 0 rgba(0,0,0,.45); }
                      50% { box-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 20px rgba(143,182,221,.45); } }
.prace-radek.okno-bezi .zbyva { color: var(--mesic2); font-family: var(--mono); font-weight: 700; }

/* rameno zavřené spadlým stromem */
.prace-radek.zavreno { opacity: .45; border-left-color: var(--drevo3); }
.prace-radek.zavreno .co::after { content: " — přes cestu spadl strom"; color: var(--tich); }

/* od minuty 25 odemčené cizí práce */
.prace-radek.spolecna { border-left-color: var(--lampa3); border-style: dashed; border-left-style: solid; }

/* BEZPEČNOST — tiskne se u každé práce u domu, natvrdo. Nesmí jít přehlédnout. */
.branka {
  display: block; margin-top: 8px; padding: 6px 9px;
  font-size: 17px; font-weight: 700; color: #ffd9a8;
  background: rgba(120,60,10,.28); border-left: 4px solid var(--lampa);
  border-radius: 2px;
}

/* ===== 8. VÝBĚR MÍSTA — appka NEHÁDÁ, vybíráš ty ======================== */
/* GPS má chybu 5–25 m a nerozezná body 40 m od sebe. Proto seznam. */
.bod-vyber { margin: 6px 0; }
.bod-radek {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; min-height: 62px; margin: 6px 0;
  font-size: 19px; background-color: var(--panel); background-image: none;
  border-color: #2b3f63; border-left: 6px solid var(--drevo2);
}
.bod-radek .misto { font-size: 20px; }
.bod-radek.blizko { border-left-color: var(--lampa); background-color: var(--panel2); }
.bod-radek.daleko { opacity: .6; }           /* nezakazuje se! klient nesmí být přísnější než server */

/* ===== 9. DRŽENÍ PRÁCE — L3 VÁPNO ======================================= */
/* Tady obrazovka SVÍTÍ NAPLNO a je to mechanika, ne chyba: stojíš nasvícený
   a kdokoli tě vidí. Zároveň jsi 20–35 s přišpendlený na místě. */
.ovl {
  position: fixed; inset: 0; z-index: 60;
  background-color: var(--noc); background-image: var(--papir);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  text-align: center; overflow-y: auto;
}
.ovl > .dole { margin-top: auto; width: 100%; max-width: 460px; }  /* akce k palci */
.ovl h2 { margin-bottom: 6px; }
.ovl .misto { font-size: 30px; margin: 4px 0 2px; }

/* --- vápenný overlay: bílá zeď, černý inkoust --- */
.ovl.vapno {
  background-color: var(--vapno); background-image: none; color: #1a1206;
  text-shadow: none;
}
.ovl.vapno .misto, .ovl.vapno h2, .ovl.vapno b { color: #120c02; }
.ovl.vapno .tich { color: #5a4a30; }
.ovl.vapno button {
  background-color: #e6dcc6; background-image: none; color: #1a1206;
  border-color: #8a6a38; box-shadow: 0 2px 0 #8a6a38;
}
.ovl.vapno .zdurazni { color: #7a3a06; font-weight: 700; }

/* --- lampa: kruhové měřidlo držení. --p 0–100 řídí JS. --- */
.lampa-prog {
  --p: 0;
  width: 200px; height: 200px; border-radius: 50%; margin: 20px auto 14px;
  background: conic-gradient(var(--lampa) calc(var(--p) * 1%), rgba(0,0,0,.12) 0);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 5px var(--vapno), 0 0 0 9px #8a6a38, 0 0 60px rgba(237,160,28,.55);
}
.lampa-prog > div {
  width: 164px; height: 164px; border-radius: 50%;
  background: var(--vapno); color: #1a1206;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 52px; font-weight: 700;
}
/* na noční variantě (např. neboštík) je knot jen teplý bod ve tmě */
.ovl:not(.vapno) .lampa-prog { box-shadow: 0 0 0 5px var(--noc2), 0 0 0 9px var(--drevo), 0 0 50px var(--zar); }
.ovl:not(.vapno) .lampa-prog > div { background: var(--noc); color: var(--lampa2); }

/* věta, která musí zaznít: pohyb držení NERUŠÍ (GPS skáče, i když stojíš) */
.drz-klid { font-size: 18px; margin-top: 8px; }
.ovl.vapno .drz-klid { color: #5a4a30; }

/* „svítíš" — pomalé teplé nadechnutí okrajů obrazovky */
.ovl.vapno::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 90px rgba(237,160,28,.35);
  animation: knot 3.4s ease-in-out infinite;
}
@keyframes knot { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ===== 10. MAPA (třídy z map.js) ======================================== */
/* Vektorová mapa bez dlaždic. Ves v noci: bílé domy, cesty jako světlé pruhy,
   pole černá. Hierarchie cest je HERNÍ informace:
     ces-r = hlavní cesta  → „chodba", kdo po ní jde, je vidět
     ces-t = polní cesta   → „ventilace" (úvoz, k Bígru), nikdo tě nevidí
     ces-p = pěšina        → nejtišší */
/* POZOR: mapa se NIKDY netočí (na rozdíl od ostatních papírů) — natočená mapa
   je nečitelná a `transform` navíc dělá kotvu pro position:fixed uvnitř. */
.mapkarta { padding: 0; overflow: hidden; background: var(--noc2); transform: none !important; }
.mapkarta svg { display: block; width: 100%; height: 46vh; min-height: 260px; touch-action: none; }
.mapa-popis { padding: 6px 10px; font-size: 17px; color: var(--tich); }

.bud   { fill: #1b2740; stroke: #cdbfa6; stroke-width: 1.1; }   /* vápno na zdi */
.ces-r { fill: none; stroke: #b8c6da; stroke-width: 4.6; stroke-linecap: round; opacity: .95; }
.ces-t { fill: none; stroke: #8a6f4c; stroke-width: 3.2; stroke-dasharray: 9 6; stroke-linecap: round; }
.ces-p { fill: none; stroke: #5d6a80; stroke-width: 2; stroke-dasharray: 2 6; }

/* stanoviště */
.st circle { fill: var(--noc2); stroke: var(--lampa); stroke-width: 2.6; }
.st text   { fill: var(--vapno); font-size: 12px; font-weight: 700; text-anchor: middle; }
.st .lbl   { fill: #cbd7e6; font-size: 11px; letter-spacing: .03em;
             paint-order: stroke; stroke: rgba(7,13,23,.85); stroke-width: 3px; }
.st.naves  circle { stroke: var(--vapno2); stroke-width: 3.4; }   /* jídelna, sem se svolává */
.st.moje   circle { stroke: var(--lampa2); stroke-width: 4; }     /* mám tam práci */
.st.hotovo circle { fill: var(--hotovo); stroke: var(--hotovo); }
.st.hotovo text   { fill: #1a1206; }
.st.zamceno circle { stroke: #5d6a80; stroke-dasharray: 4 3; }
.st.zamceno text   { fill: #8d9bb0; }
.st.dvoj   circle { stroke: var(--mesic); stroke-width: 3.4; stroke-dasharray: 7 4; }
.st.zavreno circle { stroke: var(--drevo2); stroke-dasharray: 3 4; }
.st.zavreno text   { fill: #8a7a63; }
/* HOTOVÁ PRÁCE SVÍTÍ 2 MINUTY — svítí BOD, ne hráč. Stopa, ne zaměřovač. */
.st.cerstve circle { stroke: var(--lampa2); stroke-width: 5; animation: cerstvo 1.4s ease-in-out infinite; }
.st.cerstve text   { fill: var(--lampa2); }
@keyframes cerstvo { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* konec katastrofy — kam se má jít TEĎ */
.st.katastrofa circle { stroke: #ff8a2b; stroke-width: 5.5; animation: cerstvo .9s ease-in-out infinite; }
.st.katastrofa text   { fill: #ffcf9a; }
/* tělo — jediná krev v mapě */
.st.telo circle { fill: var(--krev3); stroke: var(--krev); stroke-width: 4; }
.st.telo text   { fill: var(--krev2); }

/* ostatní hráči (majáky, jen když je server pošle) */
.hrac circle { fill: var(--mesic); stroke: var(--noc2); stroke-width: 1.6; }
.hrac text   { fill: var(--mesic2); font-size: 11px; font-weight: 700; text-anchor: middle;
               paint-order: stroke; stroke: rgba(7,13,23,.85); stroke-width: 3px; }
.hrac.stary circle, .hrac.stary text { opacity: .45; }     /* stará poloha = stará informace */
.hrac.neboztik circle { fill: #6b7a8c; stroke: #b8c6da; stroke-width: 2; }
.hrac.neboztik text   { fill: #b8c6da; }
.acc { fill: rgba(143,182,221,.07); stroke: rgba(143,182,221,.22); stroke-width: 1; }

/* já */
.me     { fill: var(--vapno2); stroke: var(--lampa); stroke-width: 3.5; }
.me-acc { fill: rgba(237,160,28,.10); stroke: rgba(237,160,28,.40); stroke-width: 1.5; }

/* šipka na náves — funguje VŽDY, i když je mapa černá (ZHASLO) */
.sipka-naves {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px; margin: 8px 0; border: 2px dashed var(--drevo2); border-radius: 4px;
  font-family: var(--mono); font-size: 21px; color: var(--lampa2);
}
.sipka-naves .sip { font-size: 30px; line-height: 1; display: inline-block; }
.sipka-naves .lbl { font-family: var(--pismo); color: var(--tich); font-size: 17px; }

/* ===== 11. FEED / OBECNÍ ROZHLAS ======================================= */
.feed-radek {
  padding: 10px 4px; border-bottom: 1px solid #2b3f63; font-size: 18px; text-align: left;
}
.feed-radek:last-child { border-bottom: 0; }
.feed-radek .cas { font-family: var(--mono); color: var(--tich); margin-right: 8px; }
.feed-radek.dulezite { color: var(--lampa2); }
.feed-radek.telo { color: var(--krev2); }

/* rozhlas: nepíše se, VYBÍRÁ se ze dvou rozbalovátek (v rukavicích a ve tmě
   se ťuká, nepíše). Jedna zpráva na hráče za hru. */
.rozhlas-vyber {
  width: 100%; min-height: 64px; margin: 8px 0; padding: 12px 14px;
  font-size: 20px; color: var(--vapno2);
  background: var(--panel2); border: 2px solid var(--drevo2); border-radius: 5px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--lampa2) 50%),
                    linear-gradient(135deg, var(--lampa2) 50%, transparent 50%);
  background-position: right 20px center, right 13px center;
  background-size: 8px 8px, 8px 8px; background-repeat: no-repeat;
}
.ovl-rozhlas .karta { width: 100%; max-width: 460px; text-align: left; }
/* hlášení, které dorazilo — trumpeta na sloupu */
.hlaseni {
  border: 5px solid var(--lampa); background-color: #1a1206; background-image: none;
  padding: 20px; border-radius: 4px;
}
.hlaseni .txt { font-family: var(--inkoust); font-size: 26px; line-height: 1.35; color: var(--vapno2); }
.hlaseni .kdo { font-size: 18px; color: var(--lampa2); margin-top: 8px; }

/* ===== 12. CIZÍ ========================================================= */
/* TVRDÉ PRAVIDLO: hlavní obrazovka Cizího = hlavní obrazovka Roveňáka.
   Žádná barva, žádný rámeček, žádné tlačítko navíc. Vstup do tajného panelu
   sedí ve stejném slotu jako neutrální tlačítko Roveňáka a vypadá stejně. */
.tajny-vstup { /* schválně prázdné: dědí .rada button. NEPŘIDÁVAT SEM NIC. */ }

/* Tajný panel je stejně tmavý jako zbytek hry. Rudě svítící obrazovka by byla
   v noci přes celou náves vidět a prozradila by Cizího líp než jakákoli dedukce. */
.ovl.tajny { background-color: #0d1018; justify-content: flex-start; padding-top: 26px; }
.ovl.tajny .karta { width: 100%; max-width: 460px; text-align: left; background-color: #151a26;
                    border-color: #33302c; transform: none; }
.ovl.tajny h3 { color: #c9a86a; text-decoration-color: #5a4526; }

.bt-zabit, .bt-katastrofa {
  background-color: #241a16; background-image: var(--letokruh);
  border-color: var(--kalna); color: #d9b5ab;
}
.bt-zabit:disabled, .bt-katastrofa:disabled { opacity: .38; }
.bt-zabit .cd, .bt-katastrofa .cd {
  display: block; font-family: var(--mono); font-size: 17px; color: #9b8a84; font-weight: 400;
}

/* výběr oběti: seznam jmen do 50 m, seřazený. Klepneš na toho, koho VIDÍŠ. */
.cil-radek {
  display: flex; align-items: center; justify-content: space-between;
  text-align: left; min-height: 64px; font-size: 20px;
  background-color: #1a1f2b; background-image: none; border-color: #3a3430;
}
.cil-radek .metry { color: #d9b5ab; }
.cil-radek.dalsi { opacity: .55; }           /* dál než pár metrů, ale NEZAKAZUJEME */

/* odpočet cooldownu / zákaz na návsi */
.cizi-stav { font-family: var(--mono); font-size: 19px; color: #9b8a84; margin: 6px 0; }
.cizi-stav.blok { color: #c98a7a; }

/* karta CIZÍHO (KDO JSEM) — otevírá se sama, tady rozdíl vadit nemůže */
.karta-role { border-width: 3px; }
.karta-role.cizi { border-color: var(--kalna); background-color: #1a1219; }
.karta-role .role-nazev { font-family: var(--inkoust); font-size: 30px; color: var(--vapno2); }
.karta-role.cizi .role-nazev { color: #e8b9ad; }
.karta-role .role-hlavni {           /* „NEVYHRAJEŠ ZABÍJENÍM. VYHRAJEŠ ČASEM." */
  display: block; margin-top: 10px; padding: 10px 12px; font-size: 19px; font-weight: 700;
  color: var(--vapno2); background: rgba(0,0,0,.35); border-left: 5px solid var(--lampa);
}

/* ===== 13. NÁLEZ TĚLA — musí udeřit ==================================== */
/* Jediné místo v celé hře, kde je krev. Proto to funguje. */
.bt-nasel {
  background-color: #3a0d09; background-image: none;
  border-color: var(--krev); color: #ffd4ce;
  box-shadow: 0 2px 0 #2a0705, 0 0 24px rgba(179,23,15,.45);
}

.ovl.krev {
  background-color: var(--krev3); background-image: none; color: #ffe6e2;
  justify-content: center; animation: tep 1.5s ease-in-out infinite;
}
@keyframes tep {
  0%, 100% { background-color: #3a0806; }
  12%      { background-color: #7d1109; }
  26%      { background-color: #450906; }
  38%      { background-color: #6e0f08; }
}
.ovl.krev .nadpis {
  font-family: var(--inkoust); font-size: 44px; line-height: 1.05; color: #fff;
  text-shadow: 0 0 30px rgba(0,0,0,.8); margin-bottom: 8px;
}
.ovl.krev .kdo   { font-family: var(--inkoust); font-size: 34px; color: #ffd4ce; }
.ovl.krev .kde   { font-size: 24px; color: #ffb3aa; margin-top: 6px; }
.ovl.krev .prikaz{                    /* VŠICHNI NA NÁVES — jediný rozkaz ve hře */
  margin-top: 18px; padding: 12px; font-size: 26px; font-weight: 700; color: #fff;
  border-top: 3px solid rgba(255,255,255,.5); border-bottom: 3px solid rgba(255,255,255,.5);
}
.ovl.krev button { background-color: rgba(0,0,0,.45); background-image: none;
                   border-color: #ffd4ce; color: #fff; box-shadow: none; }
/* tělo se po 6 minutách ohlásí samo — jiný, tišší tón: ves si všimla, nikdo nekřičí */
.ovl.krev.samo { animation: none; background-color: #2c1512; }
.ovl.krev.samo .nadpis { font-size: 32px; color: #f0d7d2; }

/* ===== 14. SHROMÁŽDĚNÍ NA NÁVSI — L3 =================================== */
/* Ves stojí kolem lampy. Teplo, světlo, a hodiny, které tikají všem stejně. */
.ovl.naves {
  background-color: #17120a; background-image: none;
  justify-content: flex-start; padding-top: 22px;
}
.ovl.naves::before {                    /* světlo lampy shora */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 45% at 50% 0%, rgba(237,160,28,.30), transparent 62%);
}
.ovl.naves > * { position: relative; }
.ovl.naves h2 { font-size: 30px; color: var(--lampa2); }

/* fáze: SRAZ 4:00 → DISKUSE 3:00 → HLASOVÁNÍ 1:00. Hodiny hry přitom stojí. */
.faze-pas { display: flex; gap: 6px; width: 100%; max-width: 460px; margin: 12px 0 6px; }
.faze {
  flex: 1 1 0; padding: 8px 4px; text-align: center; font-size: 17px;
  color: var(--tich); border: 2px solid var(--drevo); border-radius: 3px;
  background: rgba(0,0,0,.35);
}
.faze.ted { color: #1a1206; background: var(--lampa2); border-color: var(--lampa2); font-weight: 700; }
.faze.bylo { opacity: .45; }
.odpocet-velky {
  font-family: var(--mono); font-size: 68px; font-weight: 700; color: var(--vapno2);
  line-height: 1; margin: 10px 0;
}
.odpocet-velky.malo { color: var(--lampa2); }

/* kdo přišel a kdo ne — nikdy se nečeká, a kdo chybí, je informace */
.kdo-radek {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 6px; font-size: 19px; border-bottom: 1px solid #3a2c18; text-align: left;
}
.kdo-radek:last-child { border-bottom: 0; }
.kdo-radek .znak { font-family: var(--mono); color: var(--lampa2); }
.kdo-radek.chybi { color: var(--tich); }
.kdo-radek.chybi .znak { color: #7a6a52; }
.kdo-radek.mrtvy { color: #8fa3ba; text-decoration: line-through; text-decoration-color: #4a5b70; }

/* ===== 15. HLASOVÁNÍ =================================================== */
/* Zavírá se NA ČASOVAČ, ne až všichni odhlasují — jeden vybitý mobil
   nesmí zmrazit hru. Nehlas = NECHAT BÝT. */
.hlas-cas { height: 10px; background: rgba(0,0,0,.5); border-radius: 2px; overflow: hidden;
            width: 100%; max-width: 460px; margin: 6px 0 12px; }
.hlas-cas > i { display: block; height: 100%; width: calc(var(--p, 100) * 1%);
                background: var(--lampa2); transition: width 1s linear; }

.hlas-radek {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; min-height: 72px; font-size: 21px;
  background-color: var(--panel); background-image: none; border-color: #2b3f63;
}
.hlas-radek .jmeno { font-family: var(--inkoust); font-size: 23px; }
.hlas-radek .pocet {
  font-family: var(--mono); font-size: 21px; color: var(--lampa2);
  min-width: 3ch; text-align: right;
}
.hlas-radek.zvoleno {           /* můj hlas — musí být poznat jedním pohledem */
  background-color: #4a3410; border-color: var(--lampa); color: var(--vapno2);
  box-shadow: inset 0 0 0 2px var(--lampa3), 0 0 18px var(--zar);
}
.hlas-radek.zvoleno .jmeno::before { content: "✓ "; color: var(--lampa2); }
.hlas-radek.mrtvy { opacity: .45; }
.bt-nechat { border-color: #2c4166; background-color: var(--panel); background-image: none; }

/* výsledek hlasování — role se odhaluje */
.vysledek { font-family: var(--inkoust); font-size: 30px; margin: 12px 0; color: var(--vapno2); }
.vysledek .byl-cizi { color: #e8b9ad; }
.vysledek .byl-rovenak { color: var(--lampa2); }

/* ===== 16. NEBOŽTÍK — jiný svět ======================================== */
/* Teplo zhaslo. Zůstal měsíc. Neboštík VIDÍ všechno stejně dobře (pracuje
   dál a ves ho potřebuje), jen mu z hry zmizela lampa a hlas.
   Jeden přepis tokenů překlopí celou appku — proto to není nudné a přitom
   se nemusí duplikovat ani jedno pravidlo. */
body.neboztik {
  --lampa:  #7f9ec2;
  --lampa2: #cfe2f5;
  --lampa3: #33465c;
  --zar:    rgba(143,182,221,.22);
  --hotovo: #cfe2f5;
  --drevo:  #34404f;
  --drevo2: #4d5c6e;
  --drevo3: #1b232e;
  --panel:  #131a24;
  --panel2: #1b2530;
  --vapno:  #dfe7ef;
  --vapno2: #ffffff;
}
body.neboztik {
  background-image:
    var(--papir),
    radial-gradient(120% 55% at 50% -6%, rgba(143,182,221,.16), transparent 60%),
    radial-gradient(140% 110% at 50% 50%, transparent 38%, rgba(0,0,0,.72) 100%);
}
/* stálý pás přes celou šířku: mlčíš, ale pracuješ. Připomínka pravidla i role. */
.pas-ticho {
  position: sticky; top: 0; z-index: 40;
  margin: -12px -12px 8px; padding: 9px 12px;
  padding-top: calc(9px + env(safe-area-inset-top));
  background: #0a1017; border-bottom: 2px solid #4d5c6e;
  font-family: var(--inkoust); font-size: 20px; letter-spacing: .06em;
  color: #cfe2f5; text-align: center;
}
.pas-ticho .pod { display: block; font-family: var(--pismo); font-size: 17px; color: #8fa3ba;
                  letter-spacing: 0; margin-top: 2px; }
/* jemný mráz přes obrazovku — atmosféra, která nic nezakrývá */
body.neboztik .scr::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(72deg, rgba(207,226,245,.035) 0 1px, transparent 1px 7px);
}
body.neboztik .prace-radek.blizko { box-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 18px rgba(143,182,221,.35); }
/* zabít a svolávat už nejde — necháme to vidět, ale mrtvé */
body.neboztik .bt-nasel, body.neboztik .tajny-vstup { opacity: .35; }

/* ===== 17. KATASTROFY ================================================== */
/* Appka NAHLAS řekne, kam jít, a UKAZUJE ŽIVOU VZDÁLENOST k oběma koncům.
   V noci a v panice půjde půlka vsi jinam, když jim to appka neukáže. */
.ovl.katastrofa {
  background-color: #21140a; background-image: none;
  justify-content: flex-start; padding-top: 24px;
  border: 8px solid #ff8a2b;
}
.ovl.katastrofa .nadpis {
  font-family: var(--inkoust); font-size: 38px; color: #ffcf9a; line-height: 1.1;
}
.ovl.katastrofa .odpocet-velky { color: #ff8a2b; }
.konec-radek {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 460px; margin: 8px 0; padding: 14px;
  background: rgba(0,0,0,.4); border: 2px solid #6b4a12; border-radius: 4px; text-align: left;
}
.konec-radek .misto { font-size: 24px; }
.konec-radek .metry { font-size: 26px; }
.konec-radek.hotovo { border-color: var(--lampa2); }
.konec-radek.hotovo .metry::after { content: " ✦"; }
.konec-radek.blizko { background: rgba(237,160,28,.18); border-color: var(--lampa2); }
/* připomínka, kterou hráči potřebují slyšet i vidět */
.krokem { margin-top: 12px; font-size: 19px; color: #ffcf9a; font-weight: 700; }

/* ZHASLO — L1. Mapa je pryč, práce jde dál. Zůstane šipka a MÁM PROBLÉM. */
.ovl.zhaslo { background-color: #04070c; background-image: none; }
.ovl.zhaslo .nadpis { font-family: var(--inkoust); font-size: 40px; color: #33465c; }
.ovl.zhaslo .sipka-naves { border-color: #33465c; color: #8fb6dd; font-size: 24px; }
.ovl.zhaslo .tich { color: #5d6a80; }

/* SPADL STROM — přes obrazovku leží kmen */
.zavora {
  width: 100%; max-width: 460px; height: 16px; margin: 14px 0;
  background-color: var(--drevo); background-image: var(--letokruh);
  border: 2px solid var(--drevo2); border-radius: 3px; transform: rotate(-1.5deg);
}

/* ===== 18. BEZPEČNOST: MÁM PROBLÉM ==================================== */
/* Není to herní akce a nic nestojí. Musí jít najít ve tmě poslepu → jediný
   prvek v appce s trvalým bílým obrysem, vždycky dole u palce. */
.bt-problem {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 45; margin: 0; min-height: 58px; font-size: 18px;
  background-color: rgba(7,13,23,.92); background-image: none;
  border: 2px solid var(--vapno); color: var(--vapno);
  box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 -6px 18px rgba(0,0,0,.6);
}
.ma-problem-pas { padding-bottom: 76px; }    /* aby tlačítko nic nepřekrývalo */

.ovl.problem { background-color: #0a1017; background-image: none; }
.ovl.problem .telefon {          /* funguje i bez signálu — je v HTML, nestahuje se */
  font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--vapno2);
  padding: 14px; margin: 12px 0; border: 3px solid var(--vapno); border-radius: 4px;
  letter-spacing: .04em;
}
.ovl.problem .poloha { font-family: var(--mono); font-size: 19px; color: var(--mesic2); }
.ovl.problem .stav { font-size: 21px; color: var(--lampa2); }

/* kapesní režim — displej skoro zhaslý, ať nesvítíš lidem do oken */
.ovl.kapsa { background-color: #000; background-image: none; z-index: 90; }
.ovl.kapsa .znak { font-family: var(--mono); font-size: 30vw; font-weight: 700;
                   color: #16233a; line-height: 1; }

/* ===== 19. LOBBY, PRAVIDLA, KDO JSEM =================================== */
#scr-lobby header { text-align: center; padding: 12px 0 10px; }
#scr-lobby header::after {                 /* dvojitá linka vývěsky */
  content: ""; display: block; height: 0; margin: 10px 0 0;
  border-top: 3px double var(--drevo2);
}

/* počítadlo stažených zvuků — měří STAŽENÉ soubory, ne vyřízené požadavky */
.stahovani { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--tich); margin-top: 8px; }
.stahovani > i { flex: 1 1 auto; height: 10px; background: var(--noc2);
                 border: 1px solid var(--drevo); border-radius: 2px; overflow: hidden; }
.stahovani > i::before { content: ""; display: block; height: 100%; width: calc(var(--p, 0) * 1%);
                         background: var(--lampa2); transition: width .3s linear; }
.stahovani.hotovo > span { color: var(--lampa2); }

/* checklist před startem */
.check-radek { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 18px; }
.check-radek .fajfka { font-family: var(--mono); color: var(--lampa2); }
.check-radek.chybi .fajfka { color: var(--krev2); }

/* PRAVIDLA — celý text, offline, kdykoli. Čte se dlouho → větší řádkování. */
.pravidla { text-align: left; font-size: 18px; line-height: 1.55; }
.pravidla h3 { margin: 16px 0 6px; }
.pravidla p { margin: 8px 0; }
.pravidla ul { margin: 8px 0 8px 20px; }
.pravidla li { margin: 5px 0; }
.pravidla .bezpecnost {
  border: 3px solid var(--vapno); border-radius: 4px; padding: 12px; margin: 14px 0;
  background: rgba(240,233,219,.06);
}
.pravidla .bezpecnost h3 { color: var(--vapno2); text-decoration: none; }
/* tabulka 13 míst se vzdálenostmi */
.mista-tab { width: 100%; border-collapse: collapse; font-size: 17px; margin: 8px 0; }
.mista-tab th, .mista-tab td { text-align: left; padding: 7px 6px; border-bottom: 1px solid #2b3f63; }
.mista-tab th { color: var(--tich); font-weight: 400; }
.mista-tab td:last-child { font-family: var(--mono); color: var(--lampa2); text-align: right; }

/* ===== 20. KRONIKA — jediná světlá obrazovka ve hře ==================== */
/* Až po konci. Čte se v hospodě u světla, a je to doslova zápis do kroniky
   muzea — proto papír a inkoust, ne noc. Zároveň je to odměna: svět se
   rozsvítil, hra skončila, můžeš mluvit. */
.kronika {
  background-color: #efe6d2;
  background-image: repeating-linear-gradient(0deg, rgba(60,40,20,.05) 0 1px, transparent 1px 26px);
  color: #241a0c;
}
.kronika .logo { color: #241a0c; text-shadow: none; }
.kronika .logo span { color: #8a5a10; }
.kronika h2, .kronika h3, .kronika .misto, .kronika b { color: #1a1206; }
.kronika h3 { text-decoration-color: #b89a5a; }
.kronika .tich { color: #6a5a42; }
.kronika .karta {
  background-color: #f7f0e0; background-image: none;
  border-color: #c3ab7c; box-shadow: 0 2px 0 rgba(90,70,40,.25);
}
.kronika button { background-color: #dccfae; background-image: none; color: #241a0c;
                  border-color: #8a6a38; box-shadow: 0 2px 0 #8a6a38; }
.kronika .metry { color: #8a5a10; }

/* výsledek hry — nadpis přes celou vývěsku */
.kron-vysledek {
  font-family: var(--inkoust); font-size: 34px; line-height: 1.15; text-align: center;
  padding: 16px 12px; margin: 8px 0 14px; border: 4px double #8a6a38; border-radius: 4px;
}
.kron-vysledek.ves  { background: #f6ecc9; color: #4a3200; }
.kron-vysledek.cizi { background: #f0dcd6; color: #5a1008; }
.kron-vysledek .duvod { display: block; font-family: var(--pismo); font-size: 19px; margin-top: 6px; }

/* časová osa hry */
.kron-radek {
  display: grid; grid-template-columns: 62px 1fr; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid #d3c4a0; font-size: 18px; text-align: left;
}
.kron-radek .cas { font-family: var(--mono); color: #6a5a42; }
.kron-radek.telo   { background: rgba(179,23,15,.10); }
.kron-radek.prace  { background: rgba(237,160,28,.10); }
.kron-radek.hlas   { background: rgba(60,40,20,.06); }

/* --- mapa pohybů: kdo kde byl, kdo koho minul --- */
/* Na papíře se překlápí i mapa: domy inkoustem, cesty šedě, stopy barevně. */
.kronika .bud   { fill: #e2d6ba; stroke: #7a6a48; stroke-width: 1.1; }
.kronika .ces-r { stroke: #9a8a68; }
.kronika .ces-t { stroke: #b0a07c; }
.kronika .ces-p { stroke: #c2b294; }
.kronika .st circle { fill: #f7f0e0; stroke: #8a5a10; }
.kronika .st text   { fill: #241a0c; }
.kronika .st .lbl   { fill: #4a3a22; stroke: rgba(247,240,224,.9); }
.kronika .mapkarta  { background: #f7f0e0; }

/* stopa hráče = jeho čára přes ves */
.stopa { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.stopa.h1 { stroke: var(--h1); } .stopa.h2 { stroke: var(--h2); }
.stopa.h3 { stroke: var(--h3); } .stopa.h4 { stroke: var(--h4); }
.stopa.h5 { stroke: var(--h5); } .stopa.h6 { stroke: var(--h6); }
.stopa.h7 { stroke: var(--h7); } .stopa.h8 { stroke: var(--h8); }
/* Cizí — přerušovaně. Až po konci hry, takže nic neprozrazuje. */
.stopa.cizi { stroke-dasharray: 10 6; stroke-width: 4; }
.stopa.zvyrazneno { opacity: 1; stroke-width: 5; }
.stopa.utlumeno   { opacity: .18; }
/* křížek = zabití, kolečko = odpracováno */
.znacka-zabiti { fill: none; stroke: var(--krev); stroke-width: 3.5; }
.znacka-prace  { fill: var(--lampa2); stroke: #8a5a10; stroke-width: 1.5; }

/* legenda: přepínače hráčů */
.kron-legenda { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.kron-chip {
  display: inline-flex; align-items: center; gap: 7px; width: auto;
  min-height: 48px; margin: 0; padding: 8px 12px; font-size: 18px;
  background-color: #f7f0e0; background-image: none; color: #241a0c;
  border: 2px solid #b89a5a; box-shadow: none;
}
.kron-chip .puntik { width: 15px; height: 15px; border-radius: 50%; background: currentColor; }
.kron-chip.h1 .puntik { background: var(--h1); } .kron-chip.h2 .puntik { background: var(--h2); }
.kron-chip.h3 .puntik { background: var(--h3); } .kron-chip.h4 .puntik { background: var(--h4); }
.kron-chip.h5 .puntik { background: var(--h5); } .kron-chip.h6 .puntik { background: var(--h6); }
.kron-chip.h7 .puntik { background: var(--h7); } .kron-chip.h8 .puntik { background: var(--h8); }
.kron-chip.vyp { opacity: .4; }
.kron-chip.byl-cizi { border-color: var(--krev); border-style: dashed; }

/* posuvník času kroniky */
.kron-cas { width: 100%; height: 58px; margin: 8px 0; accent-color: #8a5a10; }

/* ===== 21. KONEC HRY =================================================== */
.ovl.konec { justify-content: center; }
.ovl.konec .nadpis { font-family: var(--inkoust); font-size: 42px; line-height: 1.1; }
.ovl.konec.ves  { background-color: #1a1206; }
.ovl.konec.ves  .nadpis { color: var(--lampa2); text-shadow: 0 0 40px var(--zar); }
.ovl.konec.cizi { background-color: #14090a; }
.ovl.konec.cizi .nadpis { color: #e8b9ad; }
.ovl.konec .duvod { font-family: var(--inkoust); font-style: italic; font-size: 24px;
                    color: var(--vapno); margin-top: 10px; }

/* ===== 22. PŘÍSTUPNOST A MALÉ DISPLEJE ================================= */
/* Zima, rukavice, unavené oči, staré telefony. Nic z toho není okrajový případ. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* co blikalo, musí zůstat rozpoznatelné jinak */
  .ovl.krev { background-color: #6e0f08; }
  .st.cerstve circle, .st.katastrofa circle { stroke-width: 6; }
  .hodiny.posledni { text-decoration: underline; }
}

/* malý telefon (SE, staré Xperie) — ať se nic nezalomí do nečitelna */
@media (max-height: 640px) {
  .lampa-prog { width: 156px; height: 156px; margin: 10px auto; }
  .lampa-prog > div { width: 126px; height: 126px; font-size: 40px; }
  .odpocet-velky { font-size: 52px; }
  .ovl.krev .nadpis { font-size: 34px; }
  .mapkarta svg { height: 38vh; }
}
@media (max-width: 340px) {
  .rada { grid-template-columns: 1fr 1fr; }
  .prace-radek .misto { font-size: 20px; }
}

/* na širokém displeji (tablet v hospodě, admin) drž sloupec úzký — čte se líp */
@media (min-width: 620px) {
  .scr > * { max-width: 560px; margin-left: auto; margin-right: auto; }
  .pas-horni { max-width: none; }
}

/* uživatel s vysokým kontrastem / OS „zvýšit kontrast" */
@media (prefers-contrast: more) {
  :root { --tich: #cbd7e6; --panel: #0d1729; --drevo2: #9a7845; }
  .karta, .prace-radek { border-width: 3px; }
  .prace-radek.hotovo, .prace-radek.zamceno { opacity: .8; }
}

/* tisk — organizátor si vytiskne pravidla a seznam míst na papír */
@media print {
  body { background: #fff; color: #000; }
  .ovl, .bt-problem, .pas-horni, button { display: none !important; }
  .karta { border: 1px solid #000; transform: none; box-shadow: none; }
}