:root {
  /* Herní barvy, které zůstávají stejné jako ve hře (zkušenosti, duše, stupně). Barvy kitu jsou níž. */
  --xp: #4fd6c9;
  --duse: #9db8ff;
  /* Stupně úrovní zbraní a pasiv (rámeček v přehledu výbavy, čtverečky na kartě): od 5., 10. a 15. úrovně. */
  --stupen-1: #e9c46a;
  --stupen-2: #5ee0d0;
  --stupen-3: #ff5d7a;
}

/* Téma „Důlní dřevo a mosaz“: okna jsou z trámů důlní výdřevy s mosazným kováním, uvnitř tmavá prkna, nadpisy
   zlatým pixelovým písmem jako logo. Barvy jsou z palety spritů (dřevo krumpáče, zlato loga, obrys spritů).
   Rámy, deska a šipka jsou pixel art z textu v nastroje/ramy.mjs (proměnné --ram-*, --deska, --sipka níž),
   pixel jednoho rámu je --px (3 px, na telefonu 2 px). Popis kitu je v docs/PODROBNOSTI.md (Vzhled). */
:root {
  --noc: #140c08;           /* obrys všeho, jako obrys spritů, jen teplejší */
  --drevo-0: #1f140d;       /* prohlubně (pole, pruhy) */
  --drevo-1: #2b1c12;       /* deska okna */
  --drevo-2: #3d2717;       /* stín dřeva */
  --drevo-3: #5a3a22;       /* tlačítko */
  --drevo-4: #7a5030;       /* hrana tlačítka, vybrané tlačítko */
  --drevo-5: #9c6a3e;       /* světlá hrana vybraného */
  --drevo-6: #b98250;       /* nejsvětlejší dřevo */
  --mosaz-tma: #6b3f1d;     /* hloubka zlatého písma */
  --mosaz-stin: #b07428;
  --mosaz: #e9c46a;         /* zlatá z loga, nadpisy */
  --mosaz-svetla: #ffe08a;
  --mosaz-lesk: #fff1c4;
  --pergamen: #f3e6c8;      /* text */
  --pergamen-tlumeny: #c9b393;
  --ok: #7cf08a;
  --chyba: #f08a8d;
  --karta-vybrana: #4a2f1a; /* líc vybrané karty: mezi --drevo-2 a --drevo-3, všechen text na něm nad 5 : 1 */
  --px: 3px;
}

@media (max-width: 600px) {
  :root { --px: 2px; }
}

/* ramy: začátek (generuje node nastroje/ramy.mjs, ručně neupravovat) */
:root {
  --ram-drevo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M0 0h20v1h-20zM0 1h1v1h-1zM5 1h1v1h-1zM14 1h1v1h-1zM19 1h1v1h-1zM0 2h1v1h-1zM5 2h1v1h-1zM14 2h1v1h-1zM19 2h1v1h-1zM0 3h1v1h-1zM5 3h1v1h-1zM14 3h1v1h-1zM19 3h1v1h-1zM0 4h1v1h-1zM5 4h1v1h-1zM14 4h1v1h-1zM19 4h1v1h-1zM0 5h20v1h-20zM0 6h1v1h-1zM5 6h1v1h-1zM14 6h1v1h-1zM19 6h1v1h-1zM0 7h1v1h-1zM5 7h1v1h-1zM14 7h1v1h-1zM19 7h1v1h-1zM0 8h1v1h-1zM5 8h1v1h-1zM14 8h1v1h-1zM19 8h1v1h-1zM0 9h1v1h-1zM5 9h1v1h-1zM14 9h1v1h-1zM19 9h1v1h-1zM0 10h1v1h-1zM5 10h1v1h-1zM14 10h1v1h-1zM19 10h1v1h-1zM0 11h1v1h-1zM5 11h1v1h-1zM14 11h1v1h-1zM19 11h1v1h-1zM0 12h1v1h-1zM5 12h1v1h-1zM14 12h1v1h-1zM19 12h1v1h-1zM0 13h1v1h-1zM5 13h1v1h-1zM14 13h1v1h-1zM19 13h1v1h-1zM0 14h20v1h-20zM0 15h1v1h-1zM5 15h1v1h-1zM14 15h1v1h-1zM19 15h1v1h-1zM0 16h1v1h-1zM5 16h1v1h-1zM14 16h1v1h-1zM19 16h1v1h-1zM0 17h1v1h-1zM5 17h1v1h-1zM14 17h1v1h-1zM19 17h1v1h-1zM0 18h1v1h-1zM5 18h1v1h-1zM14 18h1v1h-1zM19 18h1v1h-1zM0 19h20v1h-20z'/%3E%3Cpath fill='%23fff1c4' d='M1 1h3v1h-3zM15 1h3v1h-3zM1 2h1v1h-1zM15 2h1v1h-1zM1 3h1v1h-1zM15 3h1v1h-1zM1 15h3v1h-3zM15 15h3v1h-3zM1 16h1v1h-1zM15 16h1v1h-1zM1 17h1v1h-1zM15 17h1v1h-1z'/%3E%3Cpath fill='%23e9c46a' d='M4 1h1v1h-1zM18 1h1v1h-1zM2 2h2v1h-2zM16 2h2v1h-2zM2 3h1v1h-1zM16 3h1v1h-1zM1 4h1v1h-1zM15 4h1v1h-1zM4 15h1v1h-1zM18 15h1v1h-1zM2 16h2v1h-2zM16 16h2v1h-2zM2 17h1v1h-1zM16 17h1v1h-1zM1 18h1v1h-1zM15 18h1v1h-1z'/%3E%3Cpath fill='%23b98250' d='M6 1h8v1h-8zM1 6h1v1h-1zM15 6h1v1h-1zM1 7h1v1h-1zM15 7h1v1h-1zM1 8h1v1h-1zM15 8h1v1h-1zM1 9h1v1h-1zM15 9h1v1h-1zM1 10h1v1h-1zM15 10h1v1h-1zM1 11h1v1h-1zM15 11h1v1h-1zM1 12h1v1h-1zM15 12h1v1h-1zM1 13h1v1h-1zM15 13h1v1h-1zM6 15h8v1h-8z'/%3E%3Cpath fill='%23b07428' d='M4 2h1v1h-1zM18 2h1v1h-1zM4 3h1v1h-1zM18 3h1v1h-1zM2 4h3v1h-3zM16 4h3v1h-3zM4 16h1v1h-1zM18 16h1v1h-1zM4 17h1v1h-1zM18 17h1v1h-1zM2 18h3v1h-3zM16 18h3v1h-3z'/%3E%3Cpath fill='%238a5a35' d='M6 2h3v1h-3zM12 2h2v1h-2zM8 3h5v1h-5zM2 6h1v1h-1zM16 6h1v1h-1zM2 7h1v1h-1zM16 7h1v1h-1zM2 8h2v1h-2zM16 8h2v1h-2zM3 9h1v1h-1zM17 9h1v1h-1zM3 10h1v1h-1zM17 10h1v1h-1zM3 11h1v1h-1zM17 11h1v1h-1zM2 12h2v1h-2zM16 12h2v1h-2zM2 13h1v1h-1zM16 13h1v1h-1zM6 16h3v1h-3zM12 16h2v1h-2zM8 17h5v1h-5z'/%3E%3Cpath fill='%23704629' d='M9 2h3v1h-3zM6 3h2v1h-2zM13 3h1v1h-1zM3 6h1v1h-1zM17 6h1v1h-1zM3 7h1v1h-1zM17 7h1v1h-1zM2 9h1v1h-1zM16 9h1v1h-1zM2 10h1v1h-1zM16 10h1v1h-1zM2 11h1v1h-1zM16 11h1v1h-1zM3 13h1v1h-1zM17 13h1v1h-1zM9 16h3v1h-3zM6 17h2v1h-2zM13 17h1v1h-1z'/%3E%3Cpath fill='%232a170b' d='M3 3h1v1h-1zM17 3h1v1h-1zM3 17h1v1h-1zM17 17h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M6 4h8v1h-8zM4 6h1v1h-1zM18 6h1v1h-1zM4 7h1v1h-1zM18 7h1v1h-1zM4 8h1v1h-1zM18 8h1v1h-1zM4 9h1v1h-1zM18 9h1v1h-1zM4 10h1v1h-1zM18 10h1v1h-1zM4 11h1v1h-1zM18 11h1v1h-1zM4 12h1v1h-1zM18 12h1v1h-1zM4 13h1v1h-1zM18 13h1v1h-1zM6 18h8v1h-8z'/%3E%3C/svg%3E");
  --ram-mosaz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M0 0h20v1h-20zM0 1h1v1h-1zM5 1h1v1h-1zM14 1h1v1h-1zM19 1h1v1h-1zM0 2h1v1h-1zM5 2h1v1h-1zM14 2h1v1h-1zM19 2h1v1h-1zM0 3h1v1h-1zM5 3h1v1h-1zM14 3h1v1h-1zM19 3h1v1h-1zM0 4h1v1h-1zM5 4h1v1h-1zM14 4h1v1h-1zM19 4h1v1h-1zM0 5h20v1h-20zM0 6h1v1h-1zM5 6h1v1h-1zM14 6h1v1h-1zM19 6h1v1h-1zM0 7h1v1h-1zM5 7h1v1h-1zM14 7h1v1h-1zM19 7h1v1h-1zM0 8h1v1h-1zM5 8h1v1h-1zM14 8h1v1h-1zM19 8h1v1h-1zM0 9h1v1h-1zM5 9h1v1h-1zM14 9h1v1h-1zM19 9h1v1h-1zM0 10h1v1h-1zM5 10h1v1h-1zM14 10h1v1h-1zM19 10h1v1h-1zM0 11h1v1h-1zM5 11h1v1h-1zM14 11h1v1h-1zM19 11h1v1h-1zM0 12h1v1h-1zM5 12h1v1h-1zM14 12h1v1h-1zM19 12h1v1h-1zM0 13h1v1h-1zM5 13h1v1h-1zM14 13h1v1h-1zM19 13h1v1h-1zM0 14h20v1h-20zM0 15h1v1h-1zM5 15h1v1h-1zM14 15h1v1h-1zM19 15h1v1h-1zM0 16h1v1h-1zM5 16h1v1h-1zM14 16h1v1h-1zM19 16h1v1h-1zM0 17h1v1h-1zM5 17h1v1h-1zM14 17h1v1h-1zM19 17h1v1h-1zM0 18h1v1h-1zM5 18h1v1h-1zM14 18h1v1h-1zM19 18h1v1h-1zM0 19h20v1h-20z'/%3E%3Cpath fill='%23b98250' d='M1 1h1v1h-1zM15 1h1v1h-1zM1 15h1v1h-1zM15 15h1v1h-1z'/%3E%3Cpath fill='%238a5a35' d='M2 1h2v1h-2zM16 1h2v1h-2zM1 2h1v1h-1zM15 2h1v1h-1zM1 3h1v1h-1zM15 3h1v1h-1zM2 15h2v1h-2zM16 15h2v1h-2zM1 16h1v1h-1zM15 16h1v1h-1zM1 17h1v1h-1zM15 17h1v1h-1z'/%3E%3Cpath fill='%23704629' d='M4 1h1v1h-1zM18 1h1v1h-1zM1 4h1v1h-1zM15 4h1v1h-1zM4 15h1v1h-1zM18 15h1v1h-1zM1 18h1v1h-1zM15 18h1v1h-1z'/%3E%3Cpath fill='%23fff1c4' d='M6 1h8v1h-8zM2 2h1v1h-1zM16 2h1v1h-1zM1 6h1v1h-1zM15 6h1v1h-1zM1 7h1v1h-1zM15 7h1v1h-1zM1 8h1v1h-1zM15 8h1v1h-1zM1 9h1v1h-1zM15 9h1v1h-1zM1 10h1v1h-1zM15 10h1v1h-1zM1 11h1v1h-1zM15 11h1v1h-1zM1 12h1v1h-1zM15 12h1v1h-1zM1 13h1v1h-1zM15 13h1v1h-1zM6 15h8v1h-8zM2 16h1v1h-1zM16 16h1v1h-1z'/%3E%3Cpath fill='%23e9c46a' d='M3 2h1v1h-1zM6 2h8v1h-8zM17 2h1v1h-1zM2 3h1v1h-1zM6 3h3v1h-3zM10 3h3v1h-3zM16 3h1v1h-1zM2 6h2v1h-2zM16 6h2v1h-2zM2 7h2v1h-2zM16 7h2v1h-2zM2 8h2v1h-2zM16 8h2v1h-2zM2 9h1v1h-1zM16 9h1v1h-1zM2 10h2v1h-2zM16 10h2v1h-2zM2 11h2v1h-2zM16 11h2v1h-2zM2 12h2v1h-2zM16 12h2v1h-2zM2 13h1v1h-1zM16 13h1v1h-1zM3 16h1v1h-1zM6 16h8v1h-8zM17 16h1v1h-1zM2 17h1v1h-1zM6 17h3v1h-3zM10 17h3v1h-3zM16 17h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M4 2h1v1h-1zM18 2h1v1h-1zM4 3h1v1h-1zM18 3h1v1h-1zM2 4h2v1h-2zM16 4h2v1h-2zM4 16h1v1h-1zM18 16h1v1h-1zM4 17h1v1h-1zM18 17h1v1h-1zM2 18h2v1h-2zM16 18h2v1h-2z'/%3E%3Cpath fill='%236b3f1d' d='M3 3h1v1h-1zM9 3h1v1h-1zM17 3h1v1h-1zM3 9h1v1h-1zM17 9h1v1h-1zM3 17h1v1h-1zM9 17h1v1h-1zM17 17h1v1h-1z'/%3E%3Cpath fill='%23b07428' d='M13 3h1v1h-1zM6 4h8v1h-8zM4 6h1v1h-1zM18 6h1v1h-1zM4 7h1v1h-1zM18 7h1v1h-1zM4 8h1v1h-1zM18 8h1v1h-1zM4 9h1v1h-1zM18 9h1v1h-1zM4 10h1v1h-1zM18 10h1v1h-1zM4 11h1v1h-1zM18 11h1v1h-1zM4 12h1v1h-1zM18 12h1v1h-1zM3 13h2v1h-2zM17 13h2v1h-2zM13 17h1v1h-1zM6 18h8v1h-8z'/%3E%3Cpath fill='%232b1c12' d='M4 4h1v1h-1zM18 4h1v1h-1zM4 18h1v1h-1zM18 18h1v1h-1z'/%3E%3C/svg%3E");
  --ram-tenky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M1 0h3v1h-3zM0 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM1 4h3v1h-3z'/%3E%3Cpath fill='%23b98250' d='M1 1h3v1h-3zM1 2h1v1h-1zM1 3h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M3 2h1v1h-1zM2 3h2v1h-2z'/%3E%3C/svg%3E");
  --ram-karta-vybrana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23e9c46a' d='M1 0h3v1h-3zM0 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM1 4h3v1h-3z'/%3E%3Cpath fill='%23b98250' d='M1 1h3v1h-3zM1 2h1v1h-1zM1 3h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M3 2h1v1h-1zM2 3h2v1h-2z'/%3E%3C/svg%3E");
  --ram-karta-zvolena: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M1 0h3v1h-3zM0 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM1 4h3v1h-3z'/%3E%3Cpath fill='%23e9c46a' d='M1 1h3v1h-3zM1 2h1v1h-1zM1 3h1v1h-1z'/%3E%3Cpath fill='%23b07428' d='M3 2h1v1h-1zM2 3h2v1h-2z'/%3E%3C/svg%3E");
  --ram-karta-zvolena-vybrana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1c4' d='M1 0h3v1h-3zM0 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM1 4h3v1h-3z'/%3E%3Cpath fill='%23e9c46a' d='M1 1h3v1h-3zM1 2h1v1h-1zM1 3h1v1h-1z'/%3E%3Cpath fill='%23b07428' d='M3 2h1v1h-1zM2 3h2v1h-2z'/%3E%3C/svg%3E");
  --deska: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%2333221a' d='M0 0h44v1h-44zM45 0h19v1h-19zM0 8h14v1h-14zM15 8h49v1h-49z'/%3E%3Cpath fill='%231f140c' d='M44 0h1v1h-1zM44 1h1v1h-1zM44 2h1v1h-1zM44 3h1v1h-1zM44 4h1v1h-1zM44 5h1v1h-1zM44 6h1v1h-1zM0 7h64v1h-64zM14 8h1v1h-1zM14 9h1v1h-1zM14 10h1v1h-1zM14 11h1v1h-1zM14 12h1v1h-1zM14 13h1v1h-1zM14 14h1v1h-1zM0 15h64v1h-64z'/%3E%3Cpath fill='%232b1c12' d='M0 1h44v1h-44zM45 1h19v1h-19zM0 2h3v1h-3zM10 2h34v1h-34zM45 2h5v1h-5zM57 2h7v1h-7zM0 3h30v1h-30zM34 3h10v1h-10zM45 3h19v1h-19zM0 4h18v1h-18zM27 4h17v1h-17zM45 4h19v1h-19zM0 5h44v1h-44zM45 5h13v1h-13zM0 6h44v1h-44zM45 6h19v1h-19zM0 9h14v1h-14zM15 9h49v1h-49zM0 10h6v1h-6zM9 10h5v1h-5zM15 10h7v1h-7zM30 10h34v1h-34zM0 11h14v1h-14zM15 11h39v1h-39zM61 11h3v1h-3zM5 12h9v1h-9zM15 12h49v1h-49zM0 13h14v1h-14zM15 13h21v1h-21zM45 13h19v1h-19zM0 14h14v1h-14zM15 14h49v1h-49z'/%3E%3Cpath fill='%2327190f' d='M3 2h7v1h-7zM50 2h7v1h-7zM30 3h4v1h-4zM18 4h9v1h-9zM58 5h6v1h-6zM6 10h3v1h-3zM22 10h8v1h-8zM54 11h7v1h-7zM0 12h5v1h-5zM36 13h9v1h-9z'/%3E%3C/svg%3E");
  --sipka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M0 0h2v1h-2zM0 1h1v1h-1zM2 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM0 4h1v1h-1zM5 4h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM0 8h2v1h-2z'/%3E%3Cpath fill='%23fff1c4' d='M1 1h1v1h-1zM1 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1z'/%3E%3Cpath fill='%23e9c46a' d='M2 2h1v1h-1zM2 3h2v1h-2zM2 4h3v1h-3zM1 5h2v1h-2zM1 6h1v1h-1z'/%3E%3Cpath fill='%23b07428' d='M3 5h1v1h-1zM2 6h1v1h-1zM1 7h1v1h-1z'/%3E%3C/svg%3E");
  --vymena: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='17' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M7 0h1v1h-1zM7 1h2v1h-2zM7 2h1v1h-1zM9 2h1v1h-1zM0 3h8v1h-8zM10 3h1v1h-1zM0 4h1v1h-1zM11 4h1v1h-1zM0 5h1v1h-1zM11 5h1v1h-1zM0 6h8v1h-8zM10 6h1v1h-1zM4 7h1v1h-1zM7 7h1v1h-1zM9 7h1v1h-1zM3 8h2v1h-2zM7 8h2v1h-2zM2 9h1v1h-1zM4 9h1v1h-1zM7 9h1v1h-1zM1 10h1v1h-1zM4 10h8v1h-8zM0 11h1v1h-1zM11 11h1v1h-1zM0 12h1v1h-1zM11 12h1v1h-1zM1 13h1v1h-1zM4 13h8v1h-8zM2 14h1v1h-1zM4 14h1v1h-1zM3 15h2v1h-2zM4 16h1v1h-1z'/%3E%3Cpath fill='%23fff1c4' d='M8 2h1v1h-1zM8 3h1v1h-1zM1 4h8v1h-8zM3 9h1v1h-1zM3 10h1v1h-1zM3 11h8v1h-8z'/%3E%3Cpath fill='%23e9c46a' d='M9 3h1v1h-1zM9 4h2v1h-2zM8 5h2v1h-2zM8 6h1v1h-1zM2 10h1v1h-1zM1 11h2v1h-2zM2 12h2v1h-2zM3 13h1v1h-1z'/%3E%3Cpath fill='%23b07428' d='M1 5h7v1h-7zM10 5h1v1h-1zM9 6h1v1h-1zM8 7h1v1h-1zM1 12h1v1h-1zM4 12h7v1h-7zM2 13h1v1h-1zM3 14h1v1h-1z'/%3E%3C/svg%3E");
  --tl-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M3 0h5v1h-5zM1 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM1 9h2v1h-2zM8 9h2v1h-2zM3 10h5v1h-5z'/%3E%3Cpath fill='%238a5a35' d='M3 1h5v1h-5zM2 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M3 2h1v1h-1zM7 2h1v1h-1zM2 3h1v1h-1zM4 3h3v1h-3zM8 3h2v1h-2zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h2v1h-2zM2 5h1v1h-1zM8 5h2v1h-2zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h2v1h-2zM2 7h1v1h-1zM4 7h3v1h-3zM2 8h1v1h-1zM4 8h3v1h-3z'/%3E%3Cpath fill='%23e9c46a' d='M4 2h3v1h-3zM3 3h1v1h-1zM7 3h1v1h-1zM3 4h1v1h-1zM7 4h1v1h-1zM3 5h5v1h-5zM3 6h1v1h-1zM7 6h1v1h-1zM3 7h1v1h-1zM7 7h1v1h-1zM3 8h1v1h-1zM7 8h1v1h-1z'/%3E%3Cpath fill='%232b1c12' d='M8 2h1v1h-1zM8 7h2v1h-2zM8 8h1v1h-1zM3 9h5v1h-5z'/%3E%3C/svg%3E");
  --tl-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M3 0h5v1h-5zM1 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM1 9h2v1h-2zM8 9h2v1h-2zM3 10h5v1h-5z'/%3E%3Cpath fill='%238a5a35' d='M3 1h5v1h-5zM2 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1z'/%3E%3Cpath fill='%23e9c46a' d='M3 2h4v1h-4zM3 3h1v1h-1zM7 3h1v1h-1zM3 4h1v1h-1zM7 4h1v1h-1zM3 5h4v1h-4zM3 6h1v1h-1zM7 6h1v1h-1zM3 7h1v1h-1zM7 7h1v1h-1zM3 8h4v1h-4z'/%3E%3Cpath fill='%234f3019' d='M7 2h1v1h-1zM2 3h1v1h-1zM4 3h3v1h-3zM8 3h2v1h-2zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h2v1h-2zM2 5h1v1h-1zM7 5h3v1h-3zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h2v1h-2zM2 7h1v1h-1zM4 7h3v1h-3zM2 8h1v1h-1z'/%3E%3Cpath fill='%232b1c12' d='M8 2h1v1h-1zM8 7h2v1h-2zM7 8h2v1h-2zM3 9h5v1h-5z'/%3E%3C/svg%3E");
  --tl-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M3 0h5v1h-5zM1 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM1 9h2v1h-2zM8 9h2v1h-2zM3 10h5v1h-5z'/%3E%3Cpath fill='%238a5a35' d='M3 1h5v1h-5zM2 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1z'/%3E%3Cpath fill='%23e9c46a' d='M3 2h1v1h-1zM7 2h1v1h-1zM3 3h1v1h-1zM7 3h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM5 5h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM3 7h1v1h-1zM7 7h1v1h-1zM3 8h1v1h-1zM7 8h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M4 2h3v1h-3zM2 3h1v1h-1zM4 3h3v1h-3zM8 3h2v1h-2zM2 4h2v1h-2zM5 4h1v1h-1zM7 4h3v1h-3zM2 5h3v1h-3zM6 5h4v1h-4zM2 6h2v1h-2zM5 6h1v1h-1zM7 6h3v1h-3zM2 7h1v1h-1zM4 7h3v1h-3zM2 8h1v1h-1zM4 8h3v1h-3z'/%3E%3Cpath fill='%232b1c12' d='M8 2h1v1h-1zM8 7h2v1h-2zM8 8h1v1h-1zM3 9h5v1h-5z'/%3E%3C/svg%3E");
  --tl-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M3 0h5v1h-5zM1 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM1 9h2v1h-2zM8 9h2v1h-2zM3 10h5v1h-5z'/%3E%3Cpath fill='%238a5a35' d='M3 1h5v1h-5zM2 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1z'/%3E%3Cpath fill='%23e9c46a' d='M3 2h1v1h-1zM7 2h1v1h-1zM3 3h1v1h-1zM7 3h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM5 5h1v1h-1zM5 6h1v1h-1zM5 7h1v1h-1zM5 8h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M4 2h3v1h-3zM2 3h1v1h-1zM4 3h3v1h-3zM8 3h2v1h-2zM2 4h2v1h-2zM5 4h1v1h-1zM7 4h3v1h-3zM2 5h3v1h-3zM6 5h4v1h-4zM2 6h3v1h-3zM6 6h4v1h-4zM2 7h3v1h-3zM6 7h2v1h-2zM2 8h3v1h-3zM6 8h1v1h-1z'/%3E%3Cpath fill='%232b1c12' d='M8 2h1v1h-1zM8 7h2v1h-2zM7 8h2v1h-2zM3 9h5v1h-5z'/%3E%3C/svg%3E");
  --tl-ps-krizek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M3 0h5v1h-5zM1 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM1 9h2v1h-2zM8 9h2v1h-2zM3 10h5v1h-5z'/%3E%3Cpath fill='%238a5a35' d='M3 1h5v1h-5zM2 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M3 2h5v1h-5zM2 3h1v1h-1zM4 3h3v1h-3zM8 3h2v1h-2zM2 4h2v1h-2zM5 4h1v1h-1zM7 4h3v1h-3zM2 5h3v1h-3zM6 5h4v1h-4zM2 6h2v1h-2zM5 6h1v1h-1zM7 6h3v1h-3zM2 7h1v1h-1zM4 7h3v1h-3zM2 8h5v1h-5z'/%3E%3Cpath fill='%232b1c12' d='M8 2h1v1h-1zM8 7h2v1h-2zM7 8h2v1h-2zM3 9h5v1h-5z'/%3E%3Cpath fill='%23e9c46a' d='M3 3h1v1h-1zM7 3h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM5 5h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM3 7h1v1h-1zM7 7h1v1h-1z'/%3E%3C/svg%3E");
  --tl-ps-kolecko: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M3 0h5v1h-5zM1 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM1 9h2v1h-2zM8 9h2v1h-2zM3 10h5v1h-5z'/%3E%3Cpath fill='%238a5a35' d='M3 1h5v1h-5zM2 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M3 2h5v1h-5zM2 3h2v1h-2zM7 3h3v1h-3zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h2v1h-2zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h2v1h-2zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h2v1h-2zM2 7h2v1h-2zM7 7h1v1h-1zM2 8h5v1h-5z'/%3E%3Cpath fill='%232b1c12' d='M8 2h1v1h-1zM8 7h2v1h-2zM7 8h2v1h-2zM3 9h5v1h-5z'/%3E%3Cpath fill='%23e9c46a' d='M4 3h3v1h-3zM3 4h1v1h-1zM7 4h1v1h-1zM3 5h1v1h-1zM7 5h1v1h-1zM3 6h1v1h-1zM7 6h1v1h-1zM4 7h3v1h-3z'/%3E%3C/svg%3E");
  --tl-ps-ctverec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M3 0h5v1h-5zM1 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM1 9h2v1h-2zM8 9h2v1h-2zM3 10h5v1h-5z'/%3E%3Cpath fill='%238a5a35' d='M3 1h5v1h-5zM2 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M3 2h5v1h-5zM2 3h1v1h-1zM8 3h2v1h-2zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h2v1h-2zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h2v1h-2zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h2v1h-2zM2 7h1v1h-1zM2 8h5v1h-5z'/%3E%3Cpath fill='%232b1c12' d='M8 2h1v1h-1zM8 7h2v1h-2zM7 8h2v1h-2zM3 9h5v1h-5z'/%3E%3Cpath fill='%23e9c46a' d='M3 3h5v1h-5zM3 4h1v1h-1zM7 4h1v1h-1zM3 5h1v1h-1zM7 5h1v1h-1zM3 6h1v1h-1zM7 6h1v1h-1zM3 7h5v1h-5z'/%3E%3C/svg%3E");
  --tl-ps-trojuhelnik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M3 0h5v1h-5zM1 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM1 9h2v1h-2zM8 9h2v1h-2zM3 10h5v1h-5z'/%3E%3Cpath fill='%238a5a35' d='M3 1h5v1h-5zM2 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M3 2h5v1h-5zM2 3h3v1h-3zM6 3h4v1h-4zM2 4h2v1h-2zM5 4h1v1h-1zM7 4h3v1h-3zM2 5h2v1h-2zM5 5h1v1h-1zM7 5h3v1h-3zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h2v1h-2zM2 7h1v1h-1zM2 8h5v1h-5z'/%3E%3Cpath fill='%232b1c12' d='M8 2h1v1h-1zM8 7h2v1h-2zM7 8h2v1h-2zM3 9h5v1h-5z'/%3E%3Cpath fill='%23e9c46a' d='M5 3h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM4 5h1v1h-1zM6 5h1v1h-1zM3 6h1v1h-1zM7 6h1v1h-1zM3 7h5v1h-5z'/%3E%3C/svg%3E");
  --tl-kriz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M3 0h5v1h-5zM3 1h1v1h-1zM7 1h1v1h-1zM3 2h1v1h-1zM7 2h1v1h-1zM0 3h4v1h-4zM7 3h4v1h-4zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h4v1h-4zM7 7h4v1h-4zM3 8h1v1h-1zM7 8h1v1h-1zM3 9h1v1h-1zM7 9h1v1h-1zM3 10h5v1h-5z'/%3E%3Cpath fill='%238a5a35' d='M4 1h1v1h-1zM6 1h1v1h-1zM4 2h2v1h-2zM4 3h2v1h-2zM1 4h8v1h-8zM2 5h3v1h-3zM6 5h3v1h-3zM1 6h1v1h-1zM4 7h2v1h-2zM4 8h2v1h-2z'/%3E%3Cpath fill='%23e9c46a' d='M5 1h1v1h-1zM1 5h1v1h-1zM9 5h1v1h-1zM5 9h1v1h-1z'/%3E%3Cpath fill='%234f3019' d='M6 2h1v1h-1zM6 3h1v1h-1zM9 4h1v1h-1zM2 6h8v1h-8zM6 7h1v1h-1zM6 8h1v1h-1zM4 9h1v1h-1zM6 9h1v1h-1z'/%3E%3Cpath fill='%232b1c12' d='M5 5h1v1h-1z'/%3E%3C/svg%3E");
  --tl-packa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M3 0h5v1h-5zM1 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM3 2h5v1h-5zM9 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM8 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM8 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM8 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM3 8h5v1h-5zM9 8h1v1h-1zM1 9h2v1h-2zM8 9h2v1h-2zM3 10h5v1h-5z'/%3E%3Cpath fill='%232b1c12' d='M3 1h5v1h-5zM2 2h1v1h-1zM8 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM7 3h1v1h-1zM9 3h1v1h-1zM1 4h1v1h-1zM9 4h1v1h-1zM1 5h1v1h-1zM9 5h1v1h-1zM1 6h1v1h-1zM9 6h1v1h-1zM1 7h1v1h-1zM3 7h1v1h-1zM7 7h1v1h-1zM9 7h1v1h-1zM2 8h1v1h-1zM8 8h1v1h-1zM3 9h5v1h-5z'/%3E%3Cpath fill='%23fff1c4' d='M4 3h1v1h-1zM3 4h1v1h-1z'/%3E%3Cpath fill='%23e9c46a' d='M5 3h2v1h-2zM4 4h3v1h-3zM3 5h4v1h-4zM3 6h3v1h-3z'/%3E%3Cpath fill='%23b07428' d='M7 4h1v1h-1zM7 5h1v1h-1zM6 6h2v1h-2zM4 7h3v1h-3z'/%3E%3C/svg%3E");
  --znak-kruh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M2 0h5v1h-5zM1 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM0 4h1v1h-1zM8 4h1v1h-1zM0 5h1v1h-1zM8 5h1v1h-1zM0 6h1v1h-1zM8 6h1v1h-1zM1 7h1v1h-1zM7 7h1v1h-1zM2 8h5v1h-5z'/%3E%3Cpath fill='%23f3efe6' d='M2 1h5v1h-5zM1 2h7v1h-7zM1 3h7v1h-7zM1 4h7v1h-7zM1 5h6v1h-6zM1 6h5v1h-5zM2 7h1v1h-1z'/%3E%3Cpath fill='%23a59bb4' d='M7 5h1v1h-1zM6 6h2v1h-2zM3 7h4v1h-4z'/%3E%3C/svg%3E");
  --znak-kosoctverec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M4 0h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM2 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM8 4h1v1h-1zM1 5h1v1h-1zM7 5h1v1h-1zM2 6h1v1h-1zM6 6h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM4 8h1v1h-1z'/%3E%3Cpath fill='%23f3efe6' d='M4 1h1v1h-1zM3 2h3v1h-3zM2 3h5v1h-5zM1 4h7v1h-7zM2 5h4v1h-4zM3 6h2v1h-2z'/%3E%3Cpath fill='%23a59bb4' d='M6 5h1v1h-1zM5 6h1v1h-1zM4 7h1v1h-1z'/%3E%3C/svg%3E");
  --znak-trojuhelnik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M4 0h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM3 2h1v1h-1zM5 2h1v1h-1zM2 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM7 6h1v1h-1zM0 7h1v1h-1zM8 7h1v1h-1zM0 8h9v1h-9z'/%3E%3Cpath fill='%23f3efe6' d='M4 1h1v1h-1zM4 2h1v1h-1zM3 3h3v1h-3zM3 4h3v1h-3zM2 5h5v1h-5zM2 6h4v1h-4zM1 7h4v1h-4z'/%3E%3Cpath fill='%23a59bb4' d='M6 6h1v1h-1zM5 7h3v1h-3z'/%3E%3C/svg%3E");
  --znak-hvezda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M4 0h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM3 2h1v1h-1zM5 2h1v1h-1zM0 3h3v1h-3zM6 3h3v1h-3zM0 4h1v1h-1zM8 4h1v1h-1zM1 5h1v1h-1zM7 5h1v1h-1zM2 6h1v1h-1zM6 6h1v1h-1zM1 7h1v1h-1zM4 7h1v1h-1zM7 7h1v1h-1zM1 8h3v1h-3zM5 8h3v1h-3z'/%3E%3Cpath fill='%23f3efe6' d='M4 1h1v1h-1zM4 2h1v1h-1zM3 3h3v1h-3zM1 4h7v1h-7zM2 5h4v1h-4zM3 6h2v1h-2zM2 7h2v1h-2z'/%3E%3Cpath fill='%23a59bb4' d='M6 5h1v1h-1zM5 6h1v1h-1zM5 7h2v1h-2z'/%3E%3C/svg%3E");
  --znak-ctverec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M0 0h9v1h-9zM0 1h1v1h-1zM8 1h1v1h-1zM0 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM0 4h1v1h-1zM8 4h1v1h-1zM0 5h1v1h-1zM8 5h1v1h-1zM0 6h1v1h-1zM8 6h1v1h-1zM0 7h1v1h-1zM8 7h1v1h-1zM0 8h9v1h-9z'/%3E%3Cpath fill='%23f3efe6' d='M1 1h7v1h-7zM1 2h7v1h-7zM1 3h7v1h-7zM1 4h7v1h-7zM1 5h6v1h-6zM1 6h5v1h-5zM1 7h2v1h-2z'/%3E%3Cpath fill='%23a59bb4' d='M7 5h1v1h-1zM6 6h2v1h-2zM3 7h5v1h-5z'/%3E%3C/svg%3E");
  --znak-koruna: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M0 0h1v1h-1zM4 0h1v1h-1zM8 0h1v1h-1zM0 1h2v1h-2zM3 1h1v1h-1zM5 1h1v1h-1zM7 1h2v1h-2zM0 2h1v1h-1zM2 2h1v1h-1zM6 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM0 4h1v1h-1zM8 4h1v1h-1zM0 5h1v1h-1zM8 5h1v1h-1zM0 6h9v1h-9zM1 7h1v1h-1zM7 7h1v1h-1zM1 8h7v1h-7z'/%3E%3Cpath fill='%23f3efe6' d='M4 1h1v1h-1zM1 2h1v1h-1zM3 2h3v1h-3zM7 2h1v1h-1zM1 3h7v1h-7zM1 4h6v1h-6zM1 5h5v1h-5zM2 7h3v1h-3z'/%3E%3Cpath fill='%23a59bb4' d='M7 4h1v1h-1zM6 5h2v1h-2zM5 7h2v1h-2z'/%3E%3C/svg%3E");
  --znak-slunce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23140c08' d='M0 0h2v1h-2zM4 0h1v1h-1zM7 0h2v1h-2zM0 1h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM6 1h1v1h-1zM8 1h1v1h-1zM1 2h3v1h-3zM5 2h3v1h-3zM2 3h1v1h-1zM6 3h1v1h-1zM0 4h2v1h-2zM7 4h2v1h-2zM2 5h1v1h-1zM6 5h1v1h-1zM1 6h3v1h-3zM5 6h3v1h-3zM0 7h1v1h-1zM2 7h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1zM8 7h1v1h-1zM0 8h2v1h-2zM4 8h1v1h-1zM7 8h2v1h-2z'/%3E%3Cpath fill='%23f3efe6' d='M1 1h1v1h-1zM7 1h1v1h-1zM4 2h1v1h-1zM3 3h3v1h-3zM2 4h5v1h-5zM3 5h2v1h-2z'/%3E%3Cpath fill='%23a59bb4' d='M5 5h1v1h-1zM4 6h1v1h-1zM1 7h1v1h-1zM7 7h1v1h-1z'/%3E%3C/svg%3E");
}
/* ramy: konec */

/* Okno z trámů: .ram (dřevo), .ram.ram-mosaz (vzácné okno), .ram-tenky (rámeček uvnitř okna).
   Deska (prkna) je pozadí okna, jde dát i samostatně třídou .deska. Rám je přes border-image, takže okno
   s rámem nemá mít vlastní border, jen padding. */
.ram, .deska {
  background: var(--deska) 0 0 / calc(64 * var(--px)) calc(16 * var(--px)) repeat padding-box var(--drevo-1);
  color: var(--pergamen);
}

.ram {
  border: calc(6 * var(--px)) solid transparent;
  border-image: var(--ram-drevo) 6 / calc(6 * var(--px)) repeat;
  box-shadow: 0 var(--px) 0 var(--px) rgba(0, 0, 0, 0.35);
}

.ram.ram-mosaz { border-image-source: var(--ram-mosaz); }

.ram-tenky {
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ram-tenky) 2 / calc(2 * var(--px)) repeat;
  background-clip: padding-box;
}

/* Prohlubeň: tmavé místo zapuštěné do desky (pole pro text, pruhy, počítadla). */
.prohlubne {
  background: var(--drevo-0);
  border: 2px solid var(--noc);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 220, 160, 0.08);
}

/* Štítek: malá mosazná cedulka nad nadpisem nebo na kartě. */
.stitek {
  display: inline-block;
  padding: 2px 10px 3px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--noc);
  background: var(--mosaz);
  box-shadow: inset 0 2px 0 var(--mosaz-lesk), inset 0 -2px 0 var(--mosaz-stin), 0 0 0 2px var(--noc);
}

/* Nadpis pixelovým písmem (src/pismo.js, pixelovyNadpis): plátno uprostřed, text pro čtečky schovaný. */
.nadpis-pixel {
  display: flex;
  justify-content: center;
  margin: 0;
  line-height: 0;
}

.nadpis-pixel canvas { display: block; max-width: 100%; image-rendering: pixelated; }

.jen-ctecka {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--noc);
  color: var(--pergamen);
  font: 15px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", "Noto Sans Mono", "Liberation Mono", monospace;
}

#platno {
  touch-action: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* Horní lišta (HUD) v kitu: nahoře zapuštěný pruh zkušeností (tyrkys s leskem, dílky po desetinách), pod ním
   vlevo mosazná cedulka s úrovní, uprostřed čas pixelovým písmem (main.js ho kreslí při změně) a pod ním rudá
   cedulka hrozby, vpravo zapuštěná destička se zabitými (lebka), zlaťáky a klíči. Na telefonu kratší popisky
   (Úr., bez slova Zabito), ať se nic nelámе ani nepřekrývá s pruhy bossů (ty začínají pod spodkem lišty). */
.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 16px;
  pointer-events: none;
}

.xp {
  position: relative;
  height: 14px;
  background: var(--drevo-0);
  border: 2px solid var(--noc);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.5), 0 2px 0 rgba(0, 0, 0, 0.35);
}

.xp-pruh {
  height: 100%;
  width: 0;
  background: var(--xp);
  box-shadow: inset 0 3px 0 #b9fff6, inset 0 -2px 0 #2a9a90;
}

.xp::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--noc) calc(10% - 2px) 10%);
}

.hud-radek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin-top: 8px;
  color: var(--pergamen);
  text-shadow: 0 2px 0 var(--noc);
}

.hud-popis-kratky { display: none; }

/* Vlevo cedulka s úrovní, na dotykovém displeji před ní tlačítko pauzy (klávesy P a Esc tam nejsou). */
.hud-vlevo {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pauza na dotyk: čtvercová dřevěná destička z kitu tlačítek, ikona = dva mosazné sloupky s tmavým stínem. */
.menu-tlacitko.hud-pauza {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  pointer-events: auto;
  touch-action: manipulation;
}

.hud-pauza::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 14px;
  margin: -9px 0 0 -8px;
  background: var(--mosaz);
  box-shadow: 0 2px 0 var(--noc), 9px 0 0 var(--mosaz), 9px 2px 0 var(--noc);
}

@media (hover: none) and (pointer: coarse) {
  .menu-tlacitko.hud-pauza { display: block; }
}

.hud-uroven {
  padding: 2px 9px 3px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2a1708;
  text-shadow: none;
  background: var(--mosaz);
  box-shadow: inset 0 2px 0 var(--mosaz-lesk), inset 0 -2px 0 var(--mosaz-stin), 0 0 0 2px var(--noc), 0 4px 0 rgba(0, 0, 0, 0.35);
}

.hud-uroven b { font-size: 15px; letter-spacing: 0.02em; }

.hud-vpravo {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 2px 12px;
  padding: 3px 10px 4px;
  font-size: 14px;
  background: rgba(31, 20, 13, 0.82);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--noc);
}

.hud-zabito, .hud-zlato, .hud-klice { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.hud-zabito b { color: var(--pergamen); }
.hud-zabito canvas, .hud-zlato canvas, .hud-klice canvas { flex: none; }

/* Zlaťáky vedle počtu zabitých: ikonka a číslo, při sebrání poskočí. Klíče od kupce za nimi (jen když nějaký je). */
.hud-zlato, .hud-klice { color: var(--mosaz); }
.hud-klice[hidden] { display: none; }
.hud-zlato.roste { animation: zlato-roste 0.3s steps(3); }

@keyframes zlato-roste {
  0% { color: var(--mosaz-lesk); transform: translateY(-3px) scale(1.15); }
  100% { color: var(--mosaz); transform: none; }
}

/* Čas pixelovým písmem uprostřed, hrozba pod ním: malá rudá cedulka, při zvýšení krátce zbělá a poskočí. */
.hud-stred {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.cas { font-size: 22px; color: var(--mosaz); }
.cas.nadpis-pixel { display: flex; }

.hrozba {
  padding: 1px 7px 2px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd0d0;
  text-shadow: 0 1px 0 #2e0f0b;
  background: #5a1f1a;
  box-shadow: inset 0 2px 0 #7a2c24, inset 0 -2px 0 #3a120e, 0 0 0 2px var(--noc);
  white-space: nowrap;
}

/* Hrozba navíc za sílu hrdiny: „+N“ zlatě za číslem. */
.hrozba-navic {
  margin-left: 4px;
  font-style: normal;
  color: #ffd27a;
}

.hrozba.roste {
  animation: hrozba-roste 0.6s steps(4);
}

@keyframes hrozba-roste {
  0% { color: #fff; transform: scale(1.4); }
  100% { color: #ffd0d0; transform: scale(1); }
}

@media (max-width: 600px) {
  .hud { padding: 6px 10px; }
  .hud-vlevo { gap: 6px; }
  .hud-popis { display: none; }
  .hud-popis-kratky { display: inline; }
  /* vpravo je víc údajů než vlevo: sloupce podle obsahu, čas uprostřed mezi nimi */
  .hud-radek { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; margin-top: 7px; }
  .hud-vpravo { gap: 2px 6px; padding: 2px 6px 3px; font-size: 12px; }
  .hud-zabito, .hud-zlato, .hud-klice { gap: 3px; }
}

/* Úzký telefon (320 px): úroveň jen číslem na mosazné cedulce, ať se vejde hrozba i pravá destička. */
@media (max-width: 360px) {
  .hud-uroven .hud-popis-kratky { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hud-zlato.roste, .hrozba.roste { animation: none; }
}

/* Okno uprostřed hry (pauza, konec hry). V tématu má rám z trámů a kolem sebe teplý závoj přes hru (obří stín),
   aby se dalo číst i přes hordu; vysoké okno se na nízké obrazovce posouvá samo. Leží nad nápovědou dole jako okna
   karet (z-index 5), jinak by na telefonu naležato a nízkém notebooku její text ležel přes spodek okna a tlačítka;
   hlášení zvuku (N) je dál nad ním. */
.okno {
  position: fixed;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 32px));
  padding: 20px;
  text-align: center;
}

.okno.ram {
  max-height: calc(100% - 24px);
  overflow-y: auto;
  box-shadow: 0 var(--px) 0 var(--px) rgba(0, 0, 0, 0.35), 0 0 0 100vmax rgba(20, 12, 8, 0.55);
}

.okno h2.nadpis-pixel { margin: 0 0 2px; }

.podtitul {
  margin: 6px 0 16px;
  color: var(--pergamen-tlumeny);
}

/* Výběr vylepšení (nová úroveň, truhla bosse): teplý závoj přes hru a okno z trámů (.ram, u truhly mosazné),
   nadpis pixelovým písmem, štítek jako cedulka. Karta je dřevěná destička s pixelovým rámečkem v barvě rarity
   (barvy rarit jsou herní informace, zůstávají): rámeček 3 px, spodek a pravá hrana tmavší, tmavý obrys a zkosené
   rohy, nahoře kovový pruh s raritou a ikona ve výklenku. Vyšší rarity mají kolem pixelovou záři: ostrý průsvitný
   lem ve dvou stupních, který po krocích pulzuje (žádné rozmazání). Vybraná karta (šipky, myš, dotyk) má světlý
   rámeček a pruh, mosazný lem jako karty v menu a pixelovou šipku v pruhu. */
@property --zar {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* --c-pas = text na pruhu rarity (tmavý, nebo světlý tam, kde by tmavý nebyl čitelný).
   --c (rámeček, pruh) je barva rarity jako ve hře. --c-pozadi tónuje líc karty, kusu ve Sbírce a jamky výbavy;
   běžná rarita líc netónuje, je to čisté dřevo se železným kováním (dřív šedofialový podklad #221f2b). */
.rarita-bezna { --c: #6e6577; --c-svetla: #f3efe6; --c-pozadi: var(--drevo-1); --c-zar: rgba(0, 0, 0, 0); --c-pas: #fffaf0; }
.rarita-neobvykla { --c: #4fa83d; --c-svetla: #a6e29a; --c-pozadi: #16261a; --c-zar: rgba(110, 200, 90, 0.35); --zar: 3px; --c-pas: var(--noc); }
.rarita-vzacna { --c: #3d7fd9; --c-svetla: #9fd0ff; --c-pozadi: #172236; --c-zar: rgba(80, 160, 255, 0.4); --zar: 4px; --c-pas: var(--noc); }
.rarita-epicka { --c: #9a4fd8; --c-svetla: #dcb0ff; --c-pozadi: #241835; --c-zar: rgba(185, 100, 255, 0.5); --zar: 6px; --c-pas: #fffaf0; }
.rarita-legendarni { --c: #e8962a; --c-svetla: #ffd27a; --c-pozadi: #33230d; --c-zar: rgba(255, 180, 60, 0.6); --zar: 8px; --c-pas: var(--noc); }
.rarita-myticka { --c: #d8423a; --c-svetla: #ff9e8c; --c-pozadi: #361311; --c-zar: rgba(255, 90, 70, 0.6); --zar: 9px; --c-pas: #fffaf0; }
.rarita-bozska { --c: #ece8f8; --c-svetla: #ffffff; --c-pozadi: #26232f; --c-zar: rgba(240, 235, 255, 0.7); --zar: 10px; --c-pas: var(--noc); }

/* barvy: začátek (generuje node nastroje/ramy.mjs ze src/barvy.js, ručně neupravovat) */
.rarita-bezna { --znak: var(--znak-kruh); }
.rarita-neobvykla { --znak: var(--znak-ctverec); }
.rarita-vzacna { --znak: var(--znak-kosoctverec); }
.rarita-epicka { --znak: var(--znak-trojuhelnik); }
.rarita-legendarni { --znak: var(--znak-hvezda); }
.rarita-myticka { --znak: var(--znak-koruna); }
.rarita-bozska { --znak: var(--znak-slunce); }
:where(body[data-barvy="deuteranopie"]) { --ok: #7cc4ff; --chyba: #ffb04a; }
:where(body[data-barvy="deuteranopie"]) .rarita-bezna { --c: #605f62; --c-svetla: #ececec; --c-pozadi: #221b1f; --c-zar: rgba(96, 95, 98, 0); --c-pas: #fffaf0; }
:where(body[data-barvy="deuteranopie"]) .rarita-neobvykla { --c: #2cb994; --c-svetla: #61cbaf; --c-pozadi: #182b28; --c-zar: rgba(44, 185, 148, 0.35); --c-pas: var(--noc); }
:where(body[data-barvy="deuteranopie"]) .rarita-vzacna { --c: #3185f6; --c-svetla: #65a4f8; --c-pozadi: #192239; --c-zar: rgba(49, 133, 246, 0.4); --c-pas: var(--noc); }
:where(body[data-barvy="deuteranopie"]) .rarita-epicka { --c: #efb3ff; --c-svetla: #f3c6ff; --c-pozadi: #3b2a3b; --c-zar: rgba(239, 179, 255, 0.5); --c-pas: var(--noc); }
:where(body[data-barvy="deuteranopie"]) .rarita-legendarni { --c: #f28800; --c-svetla: #f5a640; --c-pozadi: #3c220d; --c-zar: rgba(242, 136, 0, 0.6); --c-pas: var(--noc); }
:where(body[data-barvy="deuteranopie"]) .rarita-myticka { --c: #a83b18; --c-svetla: #be6c52; --c-pozadi: #2f1411; --c-zar: rgba(168, 59, 24, 0.6); --c-pas: #fffaf0; }
:where(body[data-barvy="deuteranopie"]) .rarita-bozska { --c: #ffffce; --c-svetla: #ffffda; --c-pozadi: #3e3832; --c-zar: rgba(255, 255, 206, 0.7); --c-pas: var(--noc); }
:where(body[data-barvy="protanopie"]) { --ok: #7cc4ff; --chyba: #ffb04a; }
:where(body[data-barvy="protanopie"]) .rarita-bezna { --c: #737373; --c-svetla: #c8c8c8; --c-pozadi: #251f22; --c-zar: rgba(115, 115, 115, 0); --c-pas: #fffaf0; }
:where(body[data-barvy="protanopie"]) .rarita-neobvykla { --c: #5bfe3b; --c-svetla: #84fe6c; --c-pozadi: #213818; --c-zar: rgba(91, 254, 59, 0.35); --c-pas: var(--noc); }
:where(body[data-barvy="protanopie"]) .rarita-vzacna { --c: #95caf3; --c-svetla: #b0d7f6; --c-pozadi: #2b2e39; --c-zar: rgba(149, 202, 243, 0.4); --c-pas: var(--noc); }
:where(body[data-barvy="protanopie"]) .rarita-epicka { --c: #9c2af9; --c-svetla: #b55ffb; --c-pozadi: #2c113a; --c-zar: rgba(156, 42, 249, 0.5); --c-pas: #fffaf0; }
:where(body[data-barvy="protanopie"]) .rarita-legendarni { --c: #d68309; --c-svetla: #e0a247; --c-pozadi: #37210f; --c-zar: rgba(214, 131, 9, 0.6); --c-pas: var(--noc); }
:where(body[data-barvy="protanopie"]) .rarita-myticka { --c: #c2170c; --c-svetla: #d15149; --c-pozadi: #330e0f; --c-zar: rgba(194, 23, 12, 0.6); --c-pas: #fffaf0; }
:where(body[data-barvy="protanopie"]) .rarita-bozska { --c: #ffffeb; --c-svetla: #fffff0; --c-pozadi: #3e3837; --c-zar: rgba(255, 255, 235, 0.7); --c-pas: var(--noc); }
:where(body[data-barvy="tritanopie"]) { --ok: #7cf08a; --chyba: #ff7a9a; }
:where(body[data-barvy="tritanopie"]) .rarita-bezna { --c: #625d71; --c-svetla: #b9b9b9; --c-pozadi: #221b21; --c-zar: rgba(98, 93, 113, 0); --c-pas: #fffaf0; }
:where(body[data-barvy="tritanopie"]) .rarita-neobvykla { --c: #06e72d; --c-svetla: #44ed62; --c-pozadi: #113315; --c-zar: rgba(6, 231, 45, 0.35); --c-pas: var(--noc); }
:where(body[data-barvy="tritanopie"]) .rarita-vzacna { --c: #3574f8; --c-svetla: #6897fa; --c-pozadi: #1a1f3a; --c-zar: rgba(53, 116, 248, 0.4); --c-pas: var(--noc); }
:where(body[data-barvy="tritanopie"]) .rarita-epicka { --c: #d409ff; --c-svetla: #df47ff; --c-pozadi: #370b3b; --c-zar: rgba(212, 9, 255, 0.5); --c-pas: var(--noc); }
:where(body[data-barvy="tritanopie"]) .rarita-legendarni { --c: #efc059; --c-svetla: #f3d083; --c-pozadi: #3b2c1d; --c-zar: rgba(239, 192, 89, 0.6); --c-pas: var(--noc); }
:where(body[data-barvy="tritanopie"]) .rarita-myticka { --c: #e71a2a; --c-svetla: #ed535f; --c-pozadi: #3a0f15; --c-zar: rgba(231, 26, 42, 0.6); --c-pas: #fffaf0; }
:where(body[data-barvy="tritanopie"]) .rarita-bozska { --c: #f5ffd1; --c-svetla: #f8ffdd; --c-pozadi: #3d3833; --c-zar: rgba(245, 255, 209, 0.7); --c-pas: var(--noc); }
/* barvy: konec */

/* Režim pro barvoslepé (body[data-barvy], src/barvy.js): rarita má kromě barvy značku (--znak dávají .rarita-*,
   obrázky 9×9 z ramy.mjs ve dvojnásobku): v pruhu karty za názvem, před kusem z truhly, v rohu kusu ve Sbírce,
   jamky výbavy, peta, líhně a cedulky vylíhnutého peta, místo drahokamu u šancí a v ukázce v Nastavení. Bez režimu
   se nic nemění. */
.znak-rarity { display: none; }
body[data-barvy] .znak-rarity,
body[data-barvy] [class*="rarita-"] > .karta-rarita::after,
body[data-barvy] .volba-kus::before {
  content: '';
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  background: var(--znak) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
body[data-barvy] [class*="rarita-"] > .karta-rarita::after { margin: -2px 0 -2px 8px; }
body[data-barvy] .sbirka-kus[class*="rarita-"], body[data-barvy] .vystroj-policko[class*="rarita-"] { position: relative; }
body[data-barvy] .sbirka-kus[class*="rarita-"]::after, body[data-barvy] .vystroj-policko[class*="rarita-"]::after,
body[data-barvy] .pet-kus[class*="rarita-"]::after, body[data-barvy] .lihen-vyklenek[class*="rarita-"]::after,
body[data-barvy] .lihen-vysledek[class*="rarita-"]::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 18px;
  height: 18px;
  background: var(--znak) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
body[data-barvy] .sance i {
  width: 18px;
  height: 18px;
  margin: 0 5px 0 0;
  vertical-align: -4px;
  background: var(--znak) center / 100% 100% no-repeat;
  box-shadow: none;
  image-rendering: pixelated;
}
@media (max-width: 600px), (max-height: 500px) {
  body[data-barvy] .vystroj-policko[class*="rarita-"]::after { top: -4px; left: -4px; width: 9px; height: 9px; }
}

.vyber {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  padding: 16px;
  overflow-y: auto;
  background: rgba(20, 12, 8, 0.72);
  animation: zavoj 0.2s ease-out backwards;
}

.vyber[hidden] { display: none; }

.vyber-panel {
  margin: auto;
  width: min(800px, 100%);
  padding: 12px 18px 16px;
  text-align: center;
  animation: panel-prichod 0.28s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}

.z-truhly .vyber-panel.ram { border-image-source: var(--ram-mosaz); }

/* Štítek nad nadpisem: cedulka s leskem nahoře a obrysem. Úroveň v barvě zkušeností, truhla a kupec mosazné. */
.vyber-stitek {
  --stitek: var(--xp);
  --stitek-lesk: #b9fff6;
  --stitek-stin: #2a9a90;
  display: inline-block;
  margin: 2px 0 10px;
  padding: 2px 10px 3px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--noc);
  background: var(--stitek);
  box-shadow: inset 0 2px 0 var(--stitek-lesk), inset 0 -2px 0 var(--stitek-stin), 0 0 0 2px var(--noc);
}

.z-truhly .vyber-stitek { --stitek: var(--mosaz); --stitek-lesk: var(--mosaz-lesk); --stitek-stin: var(--mosaz-stin); }

.vyber-panel h2 { margin: 0 0 2px; }
.ram .podtitul { color: var(--pergamen-tlumeny); text-shadow: 0 2px 0 var(--noc); }
.vyber-panel .podtitul { margin: 10px 0 18px; }
.jen-dotyk { display: none; }

.karty {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px 10px;
}

.karta {
  --c-stin: color-mix(in srgb, var(--c) 60%, var(--noc));
  --karta-lice: color-mix(in srgb, var(--c-pozadi) 45%, var(--drevo-2));
  --lem: transparent;
  --zar-od: 6px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 1 236px;
  min-width: 0;
  font: inherit;
  color: var(--pergamen);
  text-align: center;
  background: var(--karta-lice);
  border: none;
  padding: 0 12px 14px;
  cursor: pointer;
  overflow: hidden;
  /* odspodu: světlo dřeva, rámeček rarity (tmavší vpravo a dole), tmavý obrys se zkosenými rohy, mosazný lem
     vybrané karty a pixelová záře ve dvou stupních (vnitřní lem, vnější pásy bez rohů = schod) */
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 -3px 0 var(--c), -3px 0 0 var(--c), 0 3px 0 var(--c-stin), 3px 0 0 var(--c-stin),
    -3px -3px 0 var(--noc), 3px -3px 0 var(--noc), -3px 3px 0 var(--noc), 3px 3px 0 var(--noc),
    0 -6px 0 var(--noc), 0 6px 0 var(--noc), -6px 0 0 var(--noc), 6px 0 0 var(--noc),
    -6px -6px 0 var(--lem), 6px -6px 0 var(--lem), -6px 6px 0 var(--lem), 6px 6px 0 var(--lem),
    0 -9px 0 var(--lem), 0 9px 0 var(--lem), -9px 0 0 var(--lem), 9px 0 0 var(--lem),
    0 0 0 calc(var(--zar-od) + var(--zar) / 2) color-mix(in srgb, var(--c-zar) 70%, transparent),
    0 calc(-1 * (var(--zar-od) + var(--zar))) 0 color-mix(in srgb, var(--c-zar) 40%, transparent),
    0 calc(var(--zar-od) + var(--zar)) 0 color-mix(in srgb, var(--c-zar) 40%, transparent),
    calc(-1 * (var(--zar-od) + var(--zar))) 0 0 color-mix(in srgb, var(--c-zar) 40%, transparent),
    calc(var(--zar-od) + var(--zar)) 0 0 color-mix(in srgb, var(--c-zar) 40%, transparent);
  animation: karta-prichod 0.42s cubic-bezier(0.2, 1.35, 0.45, 1) backwards;
  animation-delay: calc(var(--poradi, 0) * 110ms);
}

.karta.rarita-epicka, .karta.rarita-legendarni, .karta.rarita-myticka {
  animation-name: karta-prichod, zar-pulz;
  animation-duration: 0.42s, 1.6s;
  animation-timing-function: cubic-bezier(0.2, 1.35, 0.45, 1), steps(4);
  animation-iteration-count: 1, infinite;
  animation-fill-mode: backwards, none;
  animation-delay: calc(var(--poradi, 0) * 110ms), 0s;
}

.karta.rarita-legendarni { animation-duration: 0.42s, 1.1s; }
.karta.rarita-myticka { animation-duration: 0.42s, 0.8s; }

/* Božská: záře pulzuje pomaleji a k tomu jí po krocích projde celý duhový kruh (--duha za 9 s, 36 kroků), takže
   je vidět i na dálku, ale nebliká. Odstín záře bere :where(body:not([data-barvy])) .rarita-bozska níž. */
.karta.rarita-bozska {
  animation-name: karta-prichod, zar-pulz, duha;
  animation-duration: 0.42s, 2s, 9s;
  animation-timing-function: cubic-bezier(0.2, 1.35, 0.45, 1), steps(4), steps(36);
  animation-iteration-count: 1, infinite, infinite;
  animation-fill-mode: backwards, none, none;
  animation-delay: calc(var(--poradi, 0) * 110ms), 0s, 0s;
}

.karta.vybrano, .karta:focus-visible {
  outline: none;
  --c: var(--c-svetla);
  --c-pas: var(--noc);
  --lem: var(--mosaz);
  --zar-od: 9px;
  transform: translateY(-3px);
}

@media (hover: hover) {
  .karta:hover { --c: var(--c-svetla); --c-pas: var(--noc); transform: translateY(-3px); }
}

.karta:active { transform: translateY(1px); }

/* Pruh rarity: kovový štítek přes celou šířku karty, lesk nahoře, stín dole a pod ním tmavá spára. */
.karta-rarita {
  position: relative;
  align-self: stretch;
  margin: 0 -12px;
  padding: 4px 22px 5px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-pas, var(--noc));
  background: var(--c);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--c) 55%, #fff), inset 0 -3px 0 var(--c-stin), 0 3px 0 var(--noc);
}

/* šipka vybrané karty: stejná pixelová šipka jako u tlačítek, v pruhu vlevo */
.karta.vybrano .karta-rarita::before, .karta:focus-visible .karta-rarita::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  width: 12px;
  height: 18px;
  margin-top: -9px;
  background: var(--sipka) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}

/* Výklenek s ikonou: zapuštěný do destičky, kolem rámeček rarity, u vzácnějších uvnitř nádech jejich záře. */
.karta-ikona {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-top: 6px;
  background: var(--drevo-0);
  box-shadow:
    inset 0 3px 0 rgba(0, 0, 0, 0.45), inset 0 0 0 6px color-mix(in srgb, var(--c-zar) 40%, transparent),
    0 0 0 2px var(--c), 0 0 0 4px var(--noc);
}

.karta.rarita-legendarni .karta-ikona canvas, .karta.rarita-myticka .karta-ikona canvas { animation: houpani 0.9s steps(2) infinite; }
.karta.rarita-bozska .karta-ikona canvas { animation: houpani 1.4s steps(2) infinite; }

.karta-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.karta-nazev { color: var(--c-svetla); font-size: 17px; text-shadow: 0 2px 0 var(--noc); }
.karta-uroven { color: var(--pergamen-tlumeny); font-size: 12px; }

/* Úrovně jako dílky: prázdné zapuštěné, plné v barvě stupně (do 5. pergamen, pak mosaz, tyrkys, rubín). */
.karta-ctverecky { --s: var(--pergamen-tlumeny); display: flex; gap: 3px; justify-content: center; }
.karta-ctverecky.stupen-1 { --s: var(--stupen-1); }
.karta-ctverecky.stupen-2 { --s: var(--stupen-2); }
.karta-ctverecky.stupen-3 { --s: var(--stupen-3); }

.karta-ctverecky i {
  width: 14px;
  height: 8px;
  background: var(--drevo-0);
  border: 1px solid var(--noc);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.4);
}

.karta-ctverecky i.plny { background: var(--s); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--s) 55%, #fff); }

.karta-ctverecky i.novy {
  background: var(--c-svetla);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c-svetla) 60%, var(--noc));
  animation: blikani 0.8s steps(2) infinite;
}

.karta-popis small, .karta-bonus small {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.karta-popis small { color: var(--pergamen-tlumeny); }
.karta-bonus small { color: var(--c-svetla); font-weight: bold; text-shadow: 0 2px 0 var(--noc); }

.karta-klavesa {
  position: absolute;
  top: 36px;
  left: 8px;
}

/* Záblesk při příchodu epické a vzácnější karty, od legendární má navíc pixelový lesk, který přejíždí (mýtická
   rychleji, božská bílý a jasnější). */
.karta.rarita-epicka::before, .karta.rarita-legendarni::before, .karta.rarita-myticka::before, .karta.rarita-bozska::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-svetla);
  opacity: 0;
  pointer-events: none;
  animation: zablesk-karty 0.5s ease-out;
  animation-delay: calc(var(--poradi, 0) * 110ms + 0.3s);
}

.karta.rarita-legendarni::after, .karta.rarita-myticka::after, .karta.rarita-bozska::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: linear-gradient(90deg, rgba(255, 245, 210, 0) 0 25%, rgba(255, 245, 210, 0.16) 25% 55%, rgba(255, 245, 210, 0) 55% 65%, rgba(255, 245, 210, 0.1) 65% 78%, rgba(255, 245, 210, 0) 78%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  animation: lesk 2.4s steps(16) infinite;
  animation-delay: 0.8s;
}

.karta.rarita-myticka::after { animation-duration: 1.7s; }
.karta.rarita-bozska::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0 25%, rgba(255, 255, 255, 0.24) 25% 55%, rgba(255, 255, 255, 0) 55% 65%, rgba(255, 255, 255, 0.14) 65% 78%, rgba(255, 255, 255, 0) 78%);
  animation-duration: 3s;
}

/* Šance na vzácnější karty: zapuštěná lišta pod kartami, rarita jako pixelový drahokam s leskem. */
.vyber-sance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  width: fit-content;
  max-width: 100%;
  margin: 16px auto 0;
  padding: 5px 12px 6px;
  font-size: 12px;
  color: var(--pergamen-tlumeny);
  background: var(--drevo-0);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--noc);
}

.sance { color: var(--c-svetla); white-space: nowrap; }

.sance i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 7px 0 2px;
  vertical-align: -1px;
  background: var(--c);
  box-shadow:
    inset 2px 2px 0 var(--c-svetla), inset -2px -2px 0 color-mix(in srgb, var(--c) 60%, var(--noc)), 0 0 0 2px var(--noc);
}

@keyframes zavoj { from { opacity: 0; } }
@keyframes panel-prichod { from { opacity: 0; transform: scale(0.94); } }

@keyframes karta-prichod {
  0% { opacity: 0; transform: translateY(28px) scale(0.86); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes zar-pulz { 50% { --zar: calc(var(--zar-max, 12px)); } }
.karta.rarita-epicka { --zar-max: 12px; }
.karta.rarita-legendarni { --zar-max: 16px; }
.karta.rarita-myticka { --zar-max: 20px; }
.karta.rarita-bozska { --zar-max: 22px; }

/* Duhová záře Božské (jen bez režimu pro barvoslepé, tam má záře barvu palety): karta, líheň, kus ve Sbírce
   a pet. Jamka výbavy ve hře zůstane perleťová, ať se během hry nic netřpytí. */
@property --duha {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}
@keyframes duha { to { --duha: 360deg; } }
:where(body:not([data-barvy])) .rarita-bozska:is(.karta, .lihen-vyklenek, .sbirka-kus, .pet-kus) { --c-zar: hsl(var(--duha) 90% 80% / 0.75); }
.lihen-vyklenek.rarita-bozska:not(.zablesk), .sbirka-kus.rarita-bozska, .pet-kus.rarita-bozska { animation: duha 9s steps(36) infinite; }

@keyframes zablesk-karty {
  0% { opacity: 0; }
  25% { opacity: 0.7; }
  100% { opacity: 0; }
}

@keyframes lesk {
  0% { transform: translateX(-120%) skewX(-18deg); }
  50%, 100% { transform: translateX(260%) skewX(-18deg); }
}

@keyframes houpani { 50% { transform: translateY(-3px); } }
@keyframes blikani { 50% { opacity: 0.35; } }

/* Na dotykových displejích nejsou klávesy, místo nich text pro klepnutí. */
@media (hover: none) and (pointer: coarse) {
  .jen-klavesnice, .karta-klavesa { display: none; }
  .jen-dotyk { display: inline; }
}

/* Mobil: karty pod sebou přes celou šířku, ikona vlevo, text vpravo, velké na palec. */
@media (max-width: 600px) {
  .vyber { padding: 12px; }
  .vyber-panel { padding: 8px 10px 12px; }
  .vyber-panel .podtitul { margin: 8px 0 12px; }
  .karty { flex-direction: column; gap: 22px; padding: 12px 10px; }

  .karta {
    flex: none;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: 'rarita rarita' 'ikona text';
    gap: 10px 14px;
    align-items: start;
    min-height: 124px;
    text-align: left;
    padding: 0 14px 14px;
  }

  .karta-rarita { grid-area: rarita; margin: 0 -14px; padding-left: 28px; }
  .karta-ikona { grid-area: ikona; width: 72px; height: 72px; margin: 0; }
  .karta-text { grid-area: text; align-items: flex-start; }
  .karta-nazev { font-size: 18px; }
  .karta-ctverecky { justify-content: flex-start; }
  .karta-ctverecky i { width: 16px; height: 10px; }
  .karta-popis small, .karta-bonus small { font-size: 14px; }
  .karta-klavesa { display: none; }
  .vyber-sance { gap: 2px 12px; padding: 5px 10px 6px; }
}

/* Kus výbavy, který se z truhly rovnou nasadil: zapuštěný řádek nad kartami s rámečkem v barvě jeho rarity. */
.volba-kus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: -4px auto 16px;
  padding: 6px 14px 6px 8px;
  text-align: left;
  background: var(--drevo-0);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--c), 0 0 0 4px var(--noc);
}

.volba-kus[hidden] { display: none; }
.volba-kus canvas { flex: none; }
.volba-kus-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.volba-kus b { color: var(--c-svetla); text-shadow: 0 2px 0 var(--noc); }
.volba-kus small { color: var(--pergamen-tlumeny); font-size: 12px; }

/* Porovnání výbavy (mosazné okno jako truhla): dvě karty kusů vedle sebe, nový vlevo (Vzít), nasazený vpravo
   (Nechat), mezi nimi mosazné šipky výměny a jméno slotu (na telefonu pod sebou, šipky otočené). Dole na kartě je
   destička s tím, co volba udělá: dřevěná, na vybrané kartě mosazná jako hlavní tlačítko. Rozdíl statů nového kusu
   proti nasazenému je zeleně (lepší) a rudě (horší). */
.porovnani-napoveda { margin-top: -10px; font-size: 12px; }
@media (min-width: 601px) { .karta.kus { flex-basis: 280px; } }
.karta.kus .karta-text { flex: 1; }
.karta-popis small.kus-stat { color: var(--pergamen); }

.porovnani-vymena {
  flex: none;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mosaz);
  text-shadow: 0 2px 0 var(--noc);
}

.porovnani-vymena i {
  width: calc(12 * var(--px));
  height: calc(17 * var(--px));
  background: var(--vymena) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}

.kus-rozdil {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kus-rozdil small { font-size: 12px; font-weight: bold; text-shadow: 0 2px 0 var(--noc); }
.kus-rozdil .lepsi { color: var(--ok); }
.kus-rozdil .lepsi::before { content: '▲ '; }
.kus-rozdil .horsi { color: var(--chyba); }
.kus-rozdil .horsi::before { content: '▼ '; }

.kus-akce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  align-self: stretch;
  margin-top: auto;
  padding: 5px 8px 7px;
  color: var(--mosaz-svetla);
  background: var(--drevo-3);
  border: 2px solid var(--noc);
  box-shadow: inset 0 2px 0 var(--drevo-4), inset 0 -3px 0 var(--drevo-2);
}

.kus-akce b { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 2px 0 var(--drevo-1); }
.kus-akce small { font-size: 12px; color: var(--pergamen-tlumeny); }

.karta.kus.vybrano .kus-akce, .karta.kus:focus-visible .kus-akce {
  color: #2a1708;
  background: var(--mosaz);
  box-shadow: inset 0 2px 0 var(--mosaz-lesk), inset 0 -3px 0 var(--mosaz-stin);
}

.karta.kus.vybrano .kus-akce b, .karta.kus:focus-visible .kus-akce b { text-shadow: 0 2px 0 var(--mosaz-svetla); }
.karta.kus.vybrano .kus-akce small, .karta.kus:focus-visible .kus-akce small { color: #5a3510; }

@media (hover: hover) {
  .karta.kus:hover .kus-akce { color: #2a1708; background: var(--mosaz); box-shadow: inset 0 2px 0 var(--mosaz-lesk), inset 0 -3px 0 var(--mosaz-stin); }
  .karta.kus:hover .kus-akce b { text-shadow: 0 2px 0 var(--mosaz-svetla); }
  .karta.kus:hover .kus-akce small { color: #5a3510; }
}

@media (max-width: 600px) {
  .porovnani-vymena { flex-direction: row; gap: 12px; margin: -4px 0; }
  .porovnani-vymena i { rotate: 90deg; }
  .kus-akce { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .vyber, .vyber-panel, .karta, .karta::before, .karta::after, .karta-ikona canvas, .karta-ctverecky i.novy,
  .rarita-bozska {
    animation: none !important;
  }
  :where(body:not([data-barvy])) .rarita-bozska:is(.karta, .lihen-vyklenek, .sbirka-kus, .pet-kus) { --c-zar: rgba(240, 235, 255, 0.7); }
}

/* Životy hrdiny dole uprostřed (místo nápovědy ovládání, ta je v menu Ovládání): zapuštěná dřevěná lišta v tenkém
   mosazném rámu, výplň v barvě chyby (v režimu pro barvoslepé se mění s paletou), číslo životů vpravo.
   Pod 30 % výplň po krocích bliká (ne při omezeném pohybu). Na dotyk nereaguje, joystick jde chytit i přes ni. */
.zivoty-hrdiny {
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 82vw);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.zivoty-pruh {
  flex: 1;
  height: 12px;
  background: var(--drevo-0);
  border: 2px solid var(--mosaz-stin);
  box-shadow: 0 0 0 2px var(--noc), inset 0 2px 0 rgb(0 0 0 / 0.45);
}
.zivoty-vypln {
  height: 100%;
  width: 100%;
  background: var(--chyba);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.28), inset 0 2px 0 rgb(255 255 255 / 0.22);
}
.zivoty-hrdiny.malo .zivoty-vypln { animation: zivoty-malo 0.8s steps(2) infinite; }
@keyframes zivoty-malo { 50% { filter: brightness(1.6); } }
.zivoty-cislo {
  min-width: 64px;
  color: var(--pergamen);
  text-shadow: 0 2px 0 var(--noc);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@media (prefers-reduced-motion: reduce) { .zivoty-hrdiny.malo .zivoty-vypln { animation: none; } }
/* Sloty výbavy bossů (Hlava, Tělo, Amulet, Prsten) v jedné řadě vpravo od životů; stejné políčko jako přehled vlevo. */
.zivoty-sloty {
  --ikona: 24px;
  --cislo: 10px;
  --mezera: 3px;
  display: flex;
}
.zivoty-sloty .vybava-vystroj { grid-template-columns: repeat(4, auto); }
@media (max-width: 600px), (max-height: 500px) {
  .zivoty-sloty { --ikona: 18px; --cislo: 8px; }
}

/* Přehled výbavy vlevo dole nad pruhem životů: řada zbraní, pod ní řada pasiv, jen co hrdina má. Políčko =
   zapuštěná dřevěná jamka se spritem a v pravém dolním rohu číslo úrovně. Rámeček mění barvu od 5. (zlatý), 10.
   (tyrkysový) a 15. úrovně (rubínový, pulzuje). Na dotyk nereaguje (joystick jde chytit i přes něj), jen malé
   tlačítko v levém dolním rohu ho sbalí na lištu zbraní (.sbalena: menší jamky v zapuštěném pruhu, bez pasiv) a
   zase rozbalí. Tlačítko stojí pořád na stejném místě (první v řadě, zarovnané dolů), takže druhé klepnutí na totéž
   místo přehled zase rozbalí, ať je zbraní kolik chce. U joysticku zprůhlední. Na mobilu menší. */
.vybava {
  --ikona: 24px;
  --cislo: 10px;
  --mezera: 3px;
  --okraj-policka: 6px;
  position: fixed;
  left: 16px;
  bottom: 34px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
  transition: opacity 0.15s;
}

.vybava.u-joysticku { opacity: 0.2; }

.vybava.sbalena { --ikona: 16px; --cislo: 9px; --mezera: 2px; --okraj-policka: 4px; }
.vybava.sbalena .vybava-radek-pasivy { display: none; }
.vybava.sbalena .vybava-obsah {
  padding: 2px;
  background: rgba(20, 12, 8, 0.6);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--noc);
}

.vybava.sbalena .vybava-radek { max-width: calc(10 * (var(--ikona) + var(--okraj-policka)) + 9 * var(--mezera)); }

/* Tlačítko v levém dolním rohu přehledu: dřevěný čtvereček z kitu, mosazné minus (sbalit) nebo plus (rozbalit). Na
   dotyku větší. */
.vybava-prepinac {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  background: var(--drevo-3);
  border: 2px solid var(--noc);
  box-shadow: inset 0 2px 0 var(--drevo-5), inset 0 -2px 0 var(--drevo-2);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.vybava-prepinac::before, .vybava-prepinac::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--mosaz);
}

.vybava-prepinac::before { width: 8px; height: 2px; margin: -1px 0 0 -4px; }
.vybava-prepinac::after { display: none; width: 2px; height: 8px; margin: -4px 0 0 -1px; }
.vybava.sbalena .vybava-prepinac::after { display: block; }
.vybava-prepinac:hover, .vybava-prepinac:focus-visible { background: var(--drevo-4); outline: 2px solid var(--mosaz); outline-offset: 0; }
.vybava-prepinac:active { translate: 0 1px; box-shadow: inset 0 2px 0 var(--drevo-2); }

@media (hover: none) and (pointer: coarse) {
  .vybava-prepinac { width: 28px; height: 28px; }
  .vybava-prepinac::before { width: 10px; margin-left: -5px; }
  .vybava-prepinac::after { height: 10px; margin-top: -5px; }
}

.vybava-zbrane {
  display: flex;
  flex-direction: column;
  gap: var(--mezera);
}

/* Sloty výbavy bossů vedle zbraní: 2×2 (Hlava, Tělo / Amulet, Prsten), rámeček v barvě rarity kusu
   (proměnné --c a --c-pozadi dávají třídy rarita-*), prázdný slot ukazuje stín kusu. */
.vybava-vystroj {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: var(--mezera);
}

.vybava-policko.vystroj-policko:not(.prazdne) {
  --barva: var(--c);
  background: var(--c-pozadi);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 2px 0 var(--noc), 0 0 0 2px var(--c-zar);
}

canvas.stin { filter: brightness(0); opacity: 0.35; }

/* Nejvýš 7 políček vedle sebe, další zbraně jdou do druhé řady (ať se přehled vejde i na úzký mobil). */
.vybava-radek {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mezera);
  max-width: calc(7 * (var(--ikona) + var(--okraj-policka, 8px)) + 6 * var(--mezera));
}

.vybava-policko {
  --barva: var(--drevo-4);
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--ikona) + var(--okraj-policka, 8px));
  height: calc(var(--ikona) + var(--okraj-policka, 8px));
  background: rgba(31, 20, 13, 0.88);
  border: 2px solid var(--barva);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 2px 0 var(--noc);
}

.vybava-policko canvas {
  display: block;
  width: var(--ikona);
  height: var(--ikona);
  image-rendering: pixelated;
}

/* Číslo úrovně v rohu: tučné, s černým pixelovým obrysem, ať je čitelné přes sprite. */
.vybava-cislo {
  position: absolute;
  right: -1px;
  bottom: -2px;
  padding: 0 1px;
  font: bold var(--cislo) / 1 ui-monospace, Menlo, monospace;
  color: var(--pergamen);
  text-shadow: 1px 0 0 var(--noc), -1px 0 0 var(--noc), 0 1px 0 var(--noc), 0 -1px 0 var(--noc), 1px 1px 0 var(--noc);
  pointer-events: none;
}

.vybava-policko.stupen-1 { --barva: var(--stupen-1); background: rgba(52, 34, 16, 0.92); }
.vybava-policko.stupen-2 { --barva: var(--stupen-2); background: rgba(16, 44, 46, 0.92); }
.vybava-policko.stupen-3 { --barva: var(--stupen-3); background: rgba(54, 18, 28, 0.92); animation: stupen-pulz 1.4s steps(4) infinite; }

.vybava-policko.stupen-1, .vybava-policko.stupen-2, .vybava-policko.stupen-3 {
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 2px 0 var(--noc), 0 0 0 2px color-mix(in srgb, var(--barva) 30%, transparent);
}

.vybava-policko:not(.stupen-0) .vybava-cislo { color: var(--barva); }

@keyframes stupen-pulz {
  50% { box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 2px 0 var(--noc), 0 0 0 4px color-mix(in srgb, var(--barva) 40%, transparent); }
}

.vybava-policko.prazdne {
  background: rgba(20, 12, 8, 0.35);
  border-color: rgba(90, 58, 34, 0.5);
  box-shadow: none;
}

/* Právě vylepšené políčko dvakrát blikne světlým okrajem. */
.vybava-policko.nove { animation: vybava-nove 0.35s steps(2) 3; }
.vybava-policko.stupen-3.nove { animation: vybava-nove 0.35s steps(2) 3, stupen-pulz 1.4s steps(4) 1.05s infinite; }

@keyframes vybava-nove {
  50% { border-color: var(--mosaz-lesk); background: rgba(122, 80, 48, 0.9); }
}

@media (max-width: 600px), (max-height: 500px) {
  .vybava { --ikona: 16px; --cislo: 9px; --mezera: 2px; }
  .vybava.sbalena { --cislo: 8px; }
}

/* Na úzkém displeji je nápověda na dva řádky, přehled je nad ní. */
@media (max-width: 600px) {
  .vybava { bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .vybava-policko.nove, .vybava-policko.stupen-3, .vybava-policko.stupen-3.nove { animation: none; }
  .vybava { transition: none; }
}

/* Hlavní menu přes zvolenou mapu na plátně: zlaté logo, pod ním podtitul mezi mosaznými lištami a deska s rámem
   z trámů. Na desce velké mosazné Hrát, cedulka se zvoleným profilem, postavou, mapou a dušemi a pod ní záložky
   ve dvou sloupcích (vlevo hra, vpravo zbytek; šipky jdou prvním sloupcem dolů a pak druhým). Záložka se otevře
   ve stejném rámu s nadpisem pixelovým písmem. */
body.v-menu .hud, body.v-menu .zivoty-hrdiny, body.v-menu .vybava { display: none; }

.menu {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 12px;
  overflow-y: auto;
  color: var(--pergamen);
}

.menu[hidden], .menu-volby[hidden], .menu-zalozka[hidden] { display: none; }

.menu-obsah {
  margin: auto 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pixel { image-rendering: pixelated; }

.logo { display: block; filter: drop-shadow(0 4px 0 rgba(20, 12, 8, 0.6)); }

.menu-podtitul {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
  color: var(--pergamen);
  text-shadow: 0 2px 0 var(--noc);
  letter-spacing: 0.04em;
}

/* mosazné lišty vedle podtitulu: tři pixely na výšku, světlá horní hrana a tmavý obrys */
.menu-podtitul::before, .menu-podtitul::after {
  content: '';
  flex: none;
  width: 24px;
  height: 6px;
  background: var(--mosaz);
  box-shadow: inset 0 2px 0 var(--mosaz-lesk), inset 0 -2px 0 var(--mosaz-stin), 0 0 0 2px var(--noc);
}

.menu-volby {
  display: grid;
  gap: 12px;
  width: min(460px, 100%);
  margin-top: 18px;
  padding: 12px;
}

.menu-volby .menu-tlacitko.hlavni {
  font-size: 24px;
  letter-spacing: 0.2em;
  padding: 13px 32px 15px;
}

.menu-mrizka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--radku, 4), auto);
  grid-auto-flow: column;
  gap: 10px 12px;
}

.menu-mrizka .menu-tlacitko {
  min-width: 0;
  font-size: 15px;
  padding: 9px 14px 11px 22px;
}

.menu-mrizka .menu-tlacitko.vybrano::before { left: 7px; }

/* Přidat na plochu pod záložkami (aplikace.js): jen kde to jde, menší než Hrát, stejně velké písmo jako záložky. */
.menu-volby .menu-tlacitko.menu-plocha { font-size: 15px; padding: 9px 14px 11px 22px; }
.menu-volby .menu-tlacitko.menu-plocha[hidden], .plocha-radek[hidden] { display: none; }
.plocha-text { margin: 0 0 4px; font-size: 13px; color: var(--pergamen-tlumeny); }

/* Cedulka pod Hrát: zapuštěná do desky, nahoře profil, pod ním postava, mapa a duše s ikonami. */
.menu-postava {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 10px 8px;
  background-color: var(--drevo-0);
  text-shadow: 0 2px 0 var(--noc);
}

.menu-profil {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pergamen-tlumeny);
}

.menu-profil b { color: var(--mosaz); letter-spacing: 0.04em; text-transform: none; font-size: 14px; }

.menu-udaje {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
}

.menu-udaj {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--pergamen);
}

.menu-udaj canvas { flex: none; }
.menu-mapa span { color: var(--mapa, var(--pergamen)); }
.menu-duse span { color: var(--duse); }

@media (max-width: 600px) {
  .menu { padding-top: 14px; }
  .menu-podtitul { gap: 8px; font-size: 13px; letter-spacing: 0.02em; }
  .menu-podtitul::before, .menu-podtitul::after { width: 12px; }
  .menu-volby { gap: 10px; padding: 8px; margin-top: 14px; }
  .menu-volby .menu-tlacitko.hlavni { font-size: 22px; }
  .menu-mrizka { gap: 8px 8px; }
  .menu-mrizka .menu-tlacitko { font-size: 14px; letter-spacing: 0.05em; padding: 9px 8px 11px 18px; }
  .menu-mrizka .menu-tlacitko.vybrano::before { left: 5px; }
  .menu-udaje { gap: 2px 12px; }
  .menu-udaj { font-size: 13px; gap: 5px; }
}

@media (max-width: 340px) {
  .menu-mrizka { grid-template-columns: 1fr; grid-auto-flow: row; }
}

/* Tlačítko z kitu: dřevěná destička s obrysem, světlá hrana nahoře a vlevo, stín dole a vpravo, rohy zkosené
   o pixel. Vybrané (klávesnicí, myší i dotykem) má mosazný obrys, světlejší dřevo, zlatý text a pixelovou šipku.
   Stisk prohodí hrany a posune tlačítko o 3 px dolů. Barvy jdou z proměnných --tl-*,
   varianty: .hlavni (mosazné, Hrát, Pokračovat), .potvrdit (rudé, druhý stisk smaže nebo přepíše), :disabled. */
.menu-tlacitko {
  --tl-lice: var(--drevo-3);
  --tl-svetlo: var(--drevo-4);
  --tl-stin: var(--drevo-2);
  --tl-obrys: var(--noc);
  --tl-text: var(--pergamen);
  --tl-hloubka: var(--drevo-1);
  position: relative;
  font: inherit;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-text);
  text-shadow: 0 2px 0 var(--tl-hloubka);
  background: var(--tl-lice);
  border: 3px solid var(--tl-obrys);
  box-shadow:
    inset 0 3px 0 var(--tl-svetlo), inset 3px 0 0 var(--tl-svetlo),
    inset 0 -3px 0 var(--tl-hloubka), inset 0 -6px 0 var(--tl-stin), inset -3px 0 0 var(--tl-stin);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
  padding: 10px 32px 12px;
  cursor: pointer;
}

.menu-tlacitko.hlavni {
  --tl-lice: var(--mosaz);
  --tl-svetlo: var(--mosaz-lesk);
  --tl-stin: var(--mosaz-stin);
  --tl-hloubka: var(--mosaz-tma);
  --tl-text: #2a1708;
  text-shadow: 0 2px 0 var(--mosaz-svetla);
}

.menu-tlacitko.vybrano, .menu-tlacitko:focus-visible {
  outline: none;
  --tl-lice: var(--drevo-4);
  --tl-svetlo: var(--drevo-5);
  --tl-stin: var(--drevo-3);
  --tl-obrys: var(--mosaz);
  --tl-text: var(--mosaz-svetla);
}

.menu-tlacitko.hlavni.vybrano, .menu-tlacitko.hlavni:focus-visible {
  --tl-lice: var(--mosaz-svetla);
  --tl-svetlo: #fffaf0;
  --tl-stin: var(--mosaz);
  --tl-obrys: var(--mosaz-lesk);
  --tl-text: #2a1708;
}

@media (hover: hover) {
  .menu-tlacitko:hover:not(:disabled) {
    --tl-obrys: var(--mosaz);
    --tl-text: var(--mosaz-svetla);
  }

  .menu-tlacitko.hlavni:hover:not(:disabled) { --tl-text: #2a1708; --tl-obrys: var(--mosaz-lesk); }
}

/* Šipka u vybraného tlačítka: pixelový mosazný trojúhelník (ramy.mjs), na všech oknech stejná. */
.menu-tlacitko.vybrano::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 12px;
  height: 18px;
  margin-top: -10px;
  background: var(--sipka) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}

.menu-tlacitko:active:not(:disabled) {
  translate: 0 3px;
  box-shadow:
    inset 0 3px 0 var(--tl-hloubka), inset 3px 0 0 var(--tl-stin),
    inset 0 -3px 0 var(--tl-svetlo), inset -3px 0 0 var(--tl-svetlo);
}

/* Kit: rudé tlačítko pro druhý stisk (Smazat, Přepsat, Vrátit duše) a vypnuté tlačítko bez hran. */
.menu-tlacitko.potvrdit {
  --tl-lice: #6a2620;
  --tl-svetlo: #8f3a30;
  --tl-stin: #4a1a14;
  --tl-hloubka: #2e0f0b;
  --tl-text: #ffd0d0;
}

.menu-tlacitko.potvrdit.vybrano, .menu-tlacitko.potvrdit:focus-visible { --tl-lice: #7d2e26; --tl-obrys: var(--chyba); --tl-text: #ffe3e3; }

/* Ukončit hru v pauze: pod nápisem drobně, že běh skončí bez odměny. */
.pauza-ukoncit small {
  display: block;
  margin-top: 2px;
  font-size: 0.72em;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0;
}

.menu-tlacitko:disabled {
  --tl-lice: var(--drevo-1);
  --tl-obrys: var(--noc);
  --tl-text: #8c7760;
  box-shadow: none;
  text-shadow: none;
  cursor: default;
}

.menu-zalozka {
  width: min(560px, 100%);
  margin-top: 18px;
  padding: 14px 16px 16px;
  text-align: center;
}

.menu-zalozka h2 { margin: 2px 0 4px; }

/* Panel záložky vyšší než obrazovka se posouvá v rámečku (výšku dopočítá menu.js), posuvník v barvách dřeva. */
#menu-panel.posuvny {
  position: relative; /* skryté texty pro čtečky (absolutní) se jinak počítají do výšky celého menu */
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-right: -6px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--mosaz) var(--drevo-0);
}
#menu-panel.posuvny::-webkit-scrollbar { width: 8px; }
#menu-panel.posuvny::-webkit-scrollbar-track { background: var(--drevo-0); }
#menu-panel.posuvny::-webkit-scrollbar-thumb { background: var(--mosaz); border: 2px solid var(--drevo-0); }

@media (max-width: 600px) {
  .menu-zalozka { padding: 10px 10px 12px; margin-top: 14px; }
}

.menu-pata {
  margin: 14px 0 0;
  color: var(--pergamen-tlumeny);
  font-size: 12px;
  text-shadow: 0 2px 0 var(--noc);
}

/* Skupina (Ovládání, Nastavení): destička v tenkém rámu s nadpisem světlým pixelovým písmem zarovnaným vlevo. */
.skupina {
  margin: 0 0 14px;
  padding: 8px 12px 12px;
  text-align: left;
  background: var(--drevo-2) padding-box;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ram-tenky) 2 / calc(2 * var(--px)) repeat;
}

.skupina-nadpis.nadpis-pixel { justify-content: flex-start; margin: 2px 0 8px; }

/* Ovládání: skupiny pod sebou, v řádku vpravo zarovnané klávesy a vedle co dělají, řádky oddělené tmavou spárou. */
.ovladani { margin: 0 0 4px; }

.ovladani-radek {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  border-top: 2px solid var(--drevo-1);
}

.ovladani-radek:first-of-type { border-top: none; }

.klavesy {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

@media (max-width: 520px) {
  .ovladani-radek { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
}

kbd {
  display: inline-block;
  min-width: 26px;
  padding: 1px 6px;
  font: inherit;
  font-size: 13px;
  text-align: center;
  color: var(--mosaz-svetla);
  background: var(--drevo-3);
  border: 2px solid var(--noc);
  border-bottom-width: 4px;
  box-shadow: inset 0 2px 0 var(--drevo-4);
}

/* Ovladač: značky tlačítek jsou pixelové obrázky 11×11 z nastroje/ramy.mjs (--tl-*) ve dvojnásobku, Start a Back
   dřevěná klávesa s nápisem. Nápovědy pro ovladač (.jen-ovladac) se ukážou, jen když hráč hraje na ovladači
   (body.ovladac, main.js); klávesové a dotykové se pak schovají. */
.tl-ovladace {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: -6px;
  background: center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.tl-ovladace[data-znak="a"] { background-image: var(--tl-a); }
.tl-ovladace[data-znak="b"] { background-image: var(--tl-b); }
.tl-ovladace[data-znak="x"] { background-image: var(--tl-x); }
.tl-ovladace[data-znak="y"] { background-image: var(--tl-y); }
.tl-ovladace[data-znak="ps-krizek"] { background-image: var(--tl-ps-krizek); }
.tl-ovladace[data-znak="ps-kolecko"] { background-image: var(--tl-ps-kolecko); }
.tl-ovladace[data-znak="ps-ctverec"] { background-image: var(--tl-ps-ctverec); }
.tl-ovladace[data-znak="ps-trojuhelnik"] { background-image: var(--tl-ps-trojuhelnik); }
.tl-ovladace[data-znak="kriz"] { background-image: var(--tl-kriz); }
.tl-ovladace[data-znak="packa"] { background-image: var(--tl-packa); }
kbd.tl-text { min-width: 0; padding: 0 5px; font-size: 12px; vertical-align: 1px; }
.klavesy .tl-ovladace { vertical-align: middle; }
.klavesy kbd.tl-text { font-size: 13px; padding: 1px 6px; }

.jen-ovladac { display: none; }
body.ovladac .jen-klavesnice, body.ovladac .jen-dotyk, body.ovladac .karta-klavesa { display: none; }
body.ovladac .jen-ovladac { display: inline; }
.ovladac-zadny { margin: 0; font-size: 13px; color: var(--pergamen-tlumeny); }
.pata-zvuk { display: block; margin-top: 4px; color: var(--mosaz); }
.pata-zvuk[hidden] { display: none; }

.radek-tlacitek {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.radek-tlacitek .menu-tlacitko { min-width: 170px; }

/* Karta (Postavy, Mapy, Profil, Vylepšení): dřevěná destička v tenkém rámu. Vybraná karta (šipky, myš, dotyk) má
   mosazný obrys, světlejší dřevo a pixelovou šipku jako tlačítka, zvolená (za koho a kde se hraje, koupené
   naplno) mosazné kování. Rámečky jsou pixel art z nastroje/ramy.mjs (--ram-tenky, --ram-karta-*), barvy jen
   z proměnných, stisk posune kartu o pixel rámu dolů (translate, ať se nebije se zatřesením). Mezi sloupci karet
   je místo na šipku (6 pixelů rámu), ať nepřekryje sousední kartu. */
.menu-zalozka .podtitul { color: var(--pergamen-tlumeny); text-shadow: 0 2px 0 var(--noc); }

.mrizka-trid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px calc(6 * var(--px) + 4px);
  margin-bottom: 16px;
}

.trida {
  --karta-ram: var(--ram-tenky);
  --karta-lice: var(--drevo-2);
  position: relative;
  font: inherit;
  color: var(--pergamen);
  text-align: left;
  background: var(--karta-lice) padding-box;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--karta-ram) 2 / calc(2 * var(--px)) repeat;
  cursor: pointer;
}

.trida {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 9px 7px;
}

.trida canvas { flex: none; }

.trida-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trida b { color: var(--mosaz); font-size: 16px; text-shadow: 0 2px 0 var(--noc); }
.trida small { color: var(--pergamen-tlumeny); font-size: 12px; line-height: 1.35; }
.trida .trida-vyhoda { color: var(--xp); }

/* Začíná: ikona zbraně (sprite jako na kartě úrovně) a její jméno. */
.trida .trida-zbran { display: flex; align-items: center; gap: 5px; color: var(--pergamen); }
.trida-zbran canvas { margin: -2px 0; }

/* Výklenek s postavou: zapuštěný do destičky, dole prkno podlahy, postava na něm stojí. */
.trida-portret {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 64px;
  height: 66px;
  padding-bottom: 3px;
  background: var(--drevo-0);
  border: 2px solid var(--noc);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45), inset 0 -11px 0 var(--drevo-3), inset 0 -13px 0 var(--noc);
}

.trida.vybrano, .trida:focus-visible {
  outline: none;
  --karta-ram: var(--ram-karta-vybrana);
  --karta-lice: var(--karta-vybrana);
}

/* Šipka u vybrané karty: stejná pixelová šipka jako u tlačítek, jen v pixelu rámu (--px), hrotem na rámu zleva. */
.trida.vybrano::before, .trida:focus-visible::before {
  content: '';
  position: absolute;
  left: calc(-8 * var(--px));
  top: 50%;
  width: calc(6 * var(--px));
  height: calc(9 * var(--px));
  margin-top: calc(-4.5 * var(--px));
  background: var(--sipka) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}

.trida.zvolena { --karta-ram: var(--ram-karta-zvolena); }
.trida.zvolena.vybrano, .trida.zvolena:focus-visible { --karta-ram: var(--ram-karta-zvolena-vybrana); }
.trida:active { translate: 0 var(--px); }

/* Cedulka Zvoleno: mosazný štítek přibitý na horní hranu karty. */
.trida-stitek {
  display: none;
  position: absolute;
  top: calc(-2 * var(--px) - 9px);
  right: 10px;
  padding: 1px 7px 2px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2a1708;
  background: var(--mosaz);
  box-shadow: inset 0 2px 0 var(--mosaz-lesk), inset 0 -2px 0 var(--mosaz-stin), 0 0 0 2px var(--noc);
}

.trida.zvolena .trida-stitek { display: block; }

/* Obchod s trvalými vylepšeními: nahoře zapuštěná pokladnička s dušemi, karty (kit výš) s ikonou ve výklenku,
   úrovně jako dílky duší a dole cenovka. Na co duše nestačí, má cenu v barvě chyby a kolik chybí, koupené naplno
   má mosazné kování a nápis Hotovo. */
.duse-stav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 5px 16px 6px 10px;
  font-size: 15px;
  color: var(--pergamen-tlumeny);
  background: var(--drevo-0) padding-box;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ram-tenky) 2 / calc(2 * var(--px)) repeat;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 var(--noc);
}

.duse-stav b { color: var(--duse); font-size: 22px; }

/* Strom vylepšení (src/strom.js): záložka je širší, nahoře lišta (pokladnička s dušemi, kolik je koupeno,
   tlačítka − + Střed a Vrátit duše), pod ní zapuštěné okno se stromem, které jde táhnout a přibližovat,
   pod oknem cedulka s popisem vybraného uzlu a tlačítkem Koupit. Uzly jsou pixelové rámečky s ikonou spritu:
   zamčený tmavý se šedou ikonou, dostupný dřevěný (zelený roh = na něj máš duše), rozkoupaný a hotový v mosazi,
   klíčový větší ve velkém mosazném rámu. Čáry: zamčená tmavá čárkovaná, dostupná světlé dřevo, koupená mosaz. */
.menu-zalozka.siroka { width: min(980px, 100%); }

.strom-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin: 4px 0 10px;
}

.strom-lista .duse-stav { margin: 0; }
.strom-postup { color: var(--pergamen-tlumeny); font-size: 13px; text-shadow: 0 2px 0 var(--noc); }
.strom-tlacitka { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.menu-tlacitko.strom-ovladani { font-size: 14px; padding: 7px 16px 9px; }
.menu-tlacitko.oddalit, .menu-tlacitko.priblizit { min-width: 46px; padding: 5px 10px 8px; font-size: 20px; line-height: 1; }

.strom-okno {
  position: relative;
  height: clamp(280px, 54vh, 560px);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  background: var(--drevo-0) padding-box;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ram-tenky) 2 / calc(2 * var(--px)) repeat;
  box-shadow: inset 0 6px 0 rgba(0, 0, 0, 0.5);
}

.strom-okno.tahne { cursor: grabbing; }
/* Ve stromu se logo, podtitul a pata schovají, ať se záložka vejde na obrazovku (výšku okna dopočítá strom.js). */
.menu:has(.menu-zalozka:not([hidden]) .strom-okno) :is(.logo, .menu-podtitul, .menu-pata) { display: none; }
.menu-zalozka:not([hidden]):has(.strom-okno) { margin-top: 0; }
.strom-platno { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.strom-platno.plynule { transition: transform 0.18s steps(6); }
.strom-cary { position: absolute; overflow: visible; shape-rendering: crispEdges; pointer-events: none; }
.strom-cary line { stroke-linecap: square; }
.strom-cary .obrys { stroke: var(--noc); stroke-width: 9; }
.strom-cary .cara { stroke: var(--drevo-3); stroke-width: 3; stroke-dasharray: 6 6; }
.strom-cary .cara.dostupna { stroke: var(--drevo-6); stroke-dasharray: none; }
.strom-cary .cara.koupena { stroke: var(--mosaz); stroke-width: 5; stroke-dasharray: none; }
.strom-kruh { fill: none; stroke: var(--drevo-2); stroke-width: 4; stroke-dasharray: 4 8; }

.strom-vetev {
  position: absolute;
  translate: -50% -50%;
  padding: 3px 9px 4px;
  white-space: nowrap;
  color: var(--mosaz);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 var(--noc);
  background: var(--drevo-1);
  border: 2px solid var(--noc);
  pointer-events: none;
}

.uzel {
  --uzel: 50px;
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--uzel);
  height: var(--uzel);
  margin: calc(var(--uzel) / -2) 0 0 calc(var(--uzel) / -2);
  padding: 0;
  font: inherit;
  color: var(--pergamen);
  background: var(--drevo-2) padding-box;
  border: 6px solid transparent;
  border-image: var(--ram-tenky) 2 / 6px repeat;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.uzel canvas { pointer-events: none; }
.uzel.zamceny { background-color: var(--drevo-0); box-shadow: none; }
.uzel.zamceny canvas { filter: grayscale(1) brightness(0.45); }
.uzel.rozkoupany, .uzel.koupeny { border-image-source: var(--ram-karta-zvolena); }
.uzel.koupeny { background-color: var(--karta-vybrana); }
.uzel.klicovy { --uzel: 68px; border: 9px solid transparent; border-image: var(--ram-mosaz) 6 / 9px repeat; }
.uzel.klicovy.zamceny { filter: grayscale(0.85) brightness(0.6); }
.uzel.klicovy.zamceny canvas { filter: none; }
.uzel.stred { --uzel: 80px; border: 9px solid transparent; border-image: var(--ram-mosaz) 6 / 9px repeat; background-color: var(--drevo-1); grid-template-rows: auto auto; align-content: center; gap: 1px; }
.uzel-duse { color: var(--duse); font-size: 14px; line-height: 1; text-shadow: 0 2px 0 var(--noc); }

/* Vybraný uzel: světlý mosazný rám a o kus větší, nad ostatními. */
.uzel.vybrano, .uzel:focus-visible { outline: none; z-index: 2; scale: 1.14; border-image-source: var(--ram-karta-zvolena-vybrana); }
.uzel.klicovy.vybrano, .uzel.klicovy:focus-visible, .uzel.stred.vybrano, .uzel.stred:focus-visible {
  border-image-source: var(--ram-mosaz);
  box-shadow: 0 0 0 3px var(--mosaz-svetla), 0 3px 0 4px var(--noc);
}

/* Na uzel máš duše: zelený pixelový roh. */
.uzel.na-to-mas::after {
  content: '';
  position: absolute;
  top: -9px;
  right: -9px;
  width: 8px;
  height: 8px;
  background: var(--ok);
  border: 2px solid var(--noc);
  box-shadow: inset 0 2px 0 #d8ffdd;
}

.uzel-urovne { position: absolute; left: 50%; bottom: -13px; translate: -50% 0; display: flex; gap: 1px; }
.uzel-urovne i { width: 7px; height: 6px; background: var(--drevo-0); border: 1px solid var(--noc); }
.uzel-urovne i.plny { background: var(--duse); }
.uzel.koupeny .uzel-urovne i.plny { background: var(--mosaz); }
.uzel.zatrast { animation: zatrast-uzel 0.25s steps(4); }
.uzel.koupeno-ted { animation: koupeno-uzel 0.35s steps(5); }

@keyframes zatrast-uzel {
  0%, 100% { translate: 0 0; }
  25% { translate: -4px 0; }
  75% { translate: 4px 0; }
}

@keyframes koupeno-uzel {
  0% { scale: 1.35; }
  100% { scale: 1.14; }
}

/* Popis vybraného uzlu: cedulka pod stromem s pevnou výškou, ať okno při výběru neposkakuje. */
.strom-popis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  min-height: 84px;
  margin: 10px 0 6px;
  padding: 8px 10px;
  text-align: left;
  background: var(--drevo-1) padding-box;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ram-tenky) 2 / calc(2 * var(--px)) repeat;
}

.strom-popis-ikona { display: grid; place-items: center; width: 48px; height: 48px; background: var(--drevo-0); border: 2px solid var(--noc); }
.strom-popis-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.strom-popis-hlava { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.strom-popis-nazev { color: var(--mosaz); font-size: 16px; text-shadow: 0 2px 0 var(--noc); }
.strom-popis-vetev { color: var(--pergamen-tlumeny); font-size: 12px; }
.strom-popis-radek { font-size: 13px; line-height: 1.3; }
.strom-popis-radek.dalsi { color: var(--duse); }
.strom-popis-radek.tlumeny { color: var(--pergamen-tlumeny); }
.strom-popis-radek.zamceno { color: var(--chyba); }
.menu-tlacitko.strom-koupit { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 8px 16px 10px; }
.menu-tlacitko.strom-koupit[hidden] { display: none; }
.menu-tlacitko.strom-koupit.drahe b { color: var(--chyba); }
.strom-koupit .cena-chybi { color: var(--pergamen-tlumeny); font-size: 11px; font-weight: normal; letter-spacing: 0; text-transform: none; }
.strom-napoveda { margin: 0 0 10px; color: var(--pergamen-tlumeny); font-size: 12px; text-shadow: 0 2px 0 var(--noc); }

/* Telefon: menší okno, popis pod sebou (tlačítko Koupit přes celou šířku). */
@media (max-width: 600px) {
  .strom-okno { height: clamp(240px, 46vh, 420px); }
  .strom-popis { grid-template-columns: auto minmax(0, 1fr); }
  .menu-tlacitko.strom-koupit { grid-column: 1 / -1; justify-content: center; }
  .menu-tlacitko.strom-ovladani { padding: 6px 12px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .strom-platno.plynule { transition: none; }
  .uzel.zatrast, .uzel.koupeno-ted { animation: none; }
}

@keyframes zatrast {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.menu-tlacitko.vratit { font-size: 14px; padding: 8px 28px 10px; }

/* Přepínač nastavení (Nastavení i pauza): za dvojtečkou stav s pixelovou kontrolkou, zapnuto zelená s leskem,
   vypnuto zhaslá rudá. */
.menu-tlacitko.prepinac { font-size: 14px; padding: 8px 28px 10px; }
.prepinac-stav { color: var(--ok); white-space: nowrap; }

.prepinac-stav::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 7px 0 2px;
  vertical-align: -1px;
  background: var(--ok);
  box-shadow: inset 2px 2px 0 #d8ffdc, inset -2px -2px 0 #2f9a45, 0 0 0 2px var(--noc);
}

.menu-tlacitko.prepinac.vypnuto .prepinac-stav { color: var(--pergamen-tlumeny); }
.menu-tlacitko.prepinac.vypnuto .prepinac-stav::before { background: #5a1f1a; box-shadow: inset 2px 2px 0 #7a2c24, inset -2px -2px 0 #3a120e, 0 0 0 2px var(--noc); }
.nastaveni-radek { margin: 2px 0 0; }

/* Světla (Nastavení i pauza): stejný přepínač, jen se třemi stavy (Auto → Zap → Vyp), auto má mosaznou kontrolku.
   Pod ním tlumený řádek, co se zrovna děje (svítí, prohlížeč neumí WebGL, pojistka je vypnula). */
.svetla-volba { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0 0; }
/* oba přepínače skupiny Hra stejně široké */
.nastaveni-radek .prepinac, .svetla-volba .prepinac { width: min(100%, 320px); }
/* Jazyk (Nastavení): přepínač za každý jazyk vedle sebe, zvolený má rozsvícenou kontrolku, ostatní zhaslou. */
.jazyk-radek .menu-tlacitko.prepinac { width: auto; min-width: 140px; flex: 0 1 156px; }
/* Barvy (režim pro barvoslepé): čtyři tlačítka po dvou, popis zvoleného režimu, rarity jako destičky v barvách
   režimu se značkou a vzory nebezpečí (jen v režimu, jsou to dlaždice ze hry). */
.barvy-radek .menu-tlacitko.prepinac { width: auto; min-width: 150px; flex: 0 1 190px; }
.barvy-text { margin: 8px auto 0; max-width: 36em; font-size: 13px; text-align: center; color: var(--pergamen-tlumeny); text-shadow: 0 2px 0 var(--noc); }
.barvy-ukazka { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 12px 0 0; }
.ukazka-rarity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 4px;
  font-size: 12px;
  font-weight: bold;
  color: var(--c-svetla);
  text-shadow: 0 2px 0 var(--noc);
  background: var(--c-pozadi);
  box-shadow: 0 0 0 2px var(--c), 0 0 0 4px var(--noc);
}
.barvy-vzory { display: none; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 14px 0 0; }
body[data-barvy] .barvy-vzory { display: flex; }
.ukazka-vzoru { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--pergamen-tlumeny); }
.ukazka-vzoru canvas { width: 48px; height: 24px; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--noc); }
.svetla-text { margin: 0; max-width: 34em; font-size: 13px; text-align: center; color: var(--pergamen-tlumeny); text-shadow: 0 2px 0 var(--noc); }
.menu-tlacitko.prepinac.auto .prepinac-stav { color: var(--mosaz-svetla); }
.menu-tlacitko.prepinac.auto .prepinac-stav::before { background: var(--mosaz); box-shadow: inset 2px 2px 0 var(--mosaz-lesk), inset -2px -2px 0 var(--mosaz-stin), 0 0 0 2px var(--noc); }

/* Nastavení a pauza. Zvuk: řádek hlasitosti = název, −, pruh (klik nebo tah), procenta, +. Pruh je zapuštěný
   jako pruh postupu: mosazná výplň s leskem, po 10 % dílky a na konci výplně mosazný jezdec. Ztlumený zvuk (N)
   celé ovládání ztlumí. */
.zvuk-nastaveni {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(440px, 100%);
  margin: 0 auto;
}

.hlasitost {
  display: grid;
  grid-template-columns: 66px 40px minmax(60px, 1fr) 76px 40px;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.hlasitost-nazev {
  text-align: left;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pergamen);
  text-shadow: 0 2px 0 var(--noc);
}

.hlasitost .menu-tlacitko.hlasitost-krok {
  min-width: 0;
  width: 40px;
  padding: 2px 0 5px;
  font-size: 20px;
  letter-spacing: 0;
}

.hlasitost .menu-tlacitko.hlasitost-krok.vybrano::before { display: none; }

.hlasitost-pruh {
  position: relative;
  height: 22px;
  background: var(--drevo-0);
  border: 3px solid var(--noc);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  touch-action: none;
}

.hlasitost-pruh i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--mosaz);
  box-shadow: inset 0 3px 0 var(--mosaz-lesk), inset 0 -3px 0 var(--mosaz-stin);
}

/* jezdec na konci výplně: přesahuje pruh nahoru i dolů, ať je vidět, kde hlasitost je, i na telefonu */
.hlasitost-pruh i::after {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  right: -5px;
  width: 6px;
  background: var(--mosaz-svetla);
  box-shadow: inset -2px 0 0 var(--mosaz-stin), 0 0 0 2px var(--noc);
  z-index: 1;
}

.hlasitost.nula .hlasitost-pruh i::after { right: -6px; background: var(--drevo-4); box-shadow: inset -2px 0 0 var(--drevo-2), 0 0 0 2px var(--noc); }

.hlasitost-pruh::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--noc) calc(10% - 2px) 10%);
  pointer-events: none;
}

.hlasitost-cislo { color: var(--mosaz); font-size: 14px; text-align: right; white-space: nowrap; text-shadow: 0 2px 0 var(--noc); }
.hlasitost.nula .hlasitost-cislo { color: var(--pergamen-tlumeny); }
.zvuk-nastaveni.ztlumeno .hlasitost { opacity: 0.45; }
.pauza .zvuk-nastaveni { margin: 4px 0 0; width: 100%; }
.pauza .zvuk-nastaveni .prepinac { align-self: stretch; }

/* Telefon: nahoře název a procenta, pod nimi −, pruh přes celou šířku a + (dřív + přetékalo z okna). */
@media (max-width: 600px) {
  .hlasitost {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas: 'nazev nazev cislo' 'minus pruh plus';
    gap: 4px 12px;
  }

  .hlasitost-nazev { grid-area: nazev; }
  .hlasitost-cislo { grid-area: cislo; }
  .hlasitost-pruh { grid-area: pruh; height: 26px; }
  .hlasitost .menu-tlacitko.hlasitost-krok { width: 44px; }
  .hlasitost .hlasitost-krok:first-of-type { grid-area: minus; }
  .hlasitost .hlasitost-krok:last-of-type { grid-area: plus; }
}

/* Krátké hlášení po klávese N dole uprostřed nad nápovědou. */
.zvuk-hlaseni {
  position: fixed;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px 8px;
  background: var(--drevo-1);
  border: 3px solid var(--noc);
  box-shadow: inset 0 3px 0 var(--drevo-3), inset 0 -3px 0 var(--drevo-0), 0 3px 0 rgba(0, 0, 0, 0.4);
  color: var(--mosaz);
  text-shadow: 0 2px 0 var(--noc);
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 30;
}
.zvuk-hlaseni[hidden] { display: none; }
.ovladani-pata { margin: 14px 0 0; }

/* Pauza: menší okno z trámů uprostřed, hra pod ním stojí. Nadpis pixelovým písmem, pod ním mosazné Pokračovat
   a volby ve skupinách jako v Nastavení (Hra: čísla poškození, Zvuk: hlasitost a ztlumení). */
.okno.pauza { width: min(480px, calc(100% - 24px)); padding: 12px 16px 16px; }
.pauza .podtitul { margin: 8px 0 14px; }
.pauza .podtitul kbd { font-size: 12px; }
.pauza .radek-tlacitek { flex-direction: column; align-items: stretch; gap: 14px; }
.pauza .skupina { margin: 0; }
.pauza .skupina .prepinac { width: 100%; }
.pauza .svetla-volba { align-items: stretch; margin: 10px 0 0; }

@media (max-width: 600px) {
  .okno.pauza { padding: 8px 10px 12px; }
  .pauza .radek-tlacitek { gap: 10px; }
  .pauza .skupina { padding: 6px 8px 10px; }
}

/* Pauza s přehledem buildu: nahoře Pokračovat a Ukončit hru, pod nimi přehled (zbraně podle DPS, pasivy, výbava
   bossů) a nastavení. Na širokém displeji je okno širší: vlevo tlačítka a pod nimi nastavení, vpravo přehled, v něm
   pasivy a výbava vedle sebe. */
.pauza-telo { display: grid; gap: 14px; }
.pauza-nastaveni { display: flex; flex-direction: column; gap: 14px; }
.pauza-prehled {
  --ikona: 22px;
  --cislo: 10px;
  --mezera: 3px;
  display: grid;
  gap: 12px;
  align-content: start;
  text-align: left;
}

@media (min-width: 900px) and (min-height: 560px) {
  .okno.pauza { width: min(1060px, calc(100% - 32px)); }
  .pauza-telo {
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: 'volby prehled' 'nastaveni prehled';
    gap: 14px 18px;
    align-items: start;
  }
  #pauza-volby { grid-area: volby; }
  .pauza-prehled { grid-area: prehled; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pauza-nastaveni { grid-area: nastaveni; }
  .pauza-prehled .prehled-zbrane { grid-column: 1 / -1; }
}

/* Tabulka zbraní: řádek = zapuštěná lišta (ikona s úrovní, jméno s pruhem podílu proti nejsilnější, DPS mosazně,
   průměr, celkem, zabití). Nejsilnější řádek má mosazný rámeček, cedulku a plný mosazný pruh. */
.dps-tabulka {
  width: 100%;
  margin: -4px 0 0;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: 13px;
  text-shadow: 0 2px 0 var(--noc);
}

.dps-tabulka th {
  padding: 0 6px 1px;
  color: var(--pergamen-tlumeny);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  vertical-align: bottom;
}

.dps-tabulka th small { display: block; font-size: 10px; font-weight: normal; letter-spacing: 0; text-transform: none; }
.dps-tabulka td { padding: 4px 6px; background: var(--drevo-0); vertical-align: middle; }
.dps-tabulka td:first-child { padding-left: 4px; box-shadow: inset 2px 0 0 var(--noc); }
.dps-tabulka td.dps-ikona { width: 1px; padding-right: 2px; }
.dps-tabulka td.dps-cislo { color: var(--pergamen); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dps-tabulka td.dps-hlavni { color: var(--mosaz); font-size: 15px; font-weight: bold; }

/* Jméno bere zbytek šířky, dlouhé se zkrátí třemi tečkami (max-width: 0 v tabulce). */
.dps-jmeno { width: 100%; max-width: 0; }
.dps-nazev { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dps-nazev b { overflow: hidden; color: var(--pergamen); text-overflow: ellipsis; white-space: nowrap; }

.dps-nej {
  flex: none;
  padding: 0 4px 1px;
  color: var(--noc);
  background: var(--mosaz);
  box-shadow: inset 0 1px 0 var(--mosaz-lesk), inset 0 -1px 0 var(--mosaz-stin);
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
}

.dps-pruh {
  display: block;
  height: 6px;
  margin-top: 4px;
  background: var(--drevo-2);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px var(--noc);
}

.dps-pruh i { display: block; height: 100%; background: var(--mosaz-stin); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3); }

.dps-tabulka tr.nejsilnejsi td { background: var(--karta-vybrana); box-shadow: inset 0 2px 0 var(--mosaz), inset 0 -2px 0 var(--mosaz); }
.dps-tabulka tr.nejsilnejsi td:first-child { box-shadow: inset 2px 0 0 var(--mosaz), inset 0 2px 0 var(--mosaz), inset 0 -2px 0 var(--mosaz); }
.dps-tabulka tr.nejsilnejsi td:last-child { box-shadow: inset -2px 0 0 var(--mosaz), inset 0 2px 0 var(--mosaz), inset 0 -2px 0 var(--mosaz); }
.dps-tabulka tr.nejsilnejsi td.dps-hlavni { color: var(--mosaz-svetla); }
.dps-tabulka tr.nejsilnejsi .dps-pruh i { background: var(--mosaz); box-shadow: inset 0 -2px 0 var(--mosaz-stin); }

/* Pasivy a výbava: mřížka políček (stejná jamka jako přehled vlevo dole) a vedle jméno a co dává. */
.prehled-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prehled-polozka { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prehled-polozka .vybava-policko { flex: none; }
.prehled-text { display: grid; min-width: 0; line-height: 1.25; text-shadow: 0 2px 0 var(--noc); }
.prehled-text b { overflow: hidden; color: var(--pergamen); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.prehled-text b.prazdne { color: var(--pergamen-tlumeny); }
.prehled-text small { color: var(--mosaz); font-size: 12px; }
.prehled-vybava .prehled-text small { color: var(--pergamen-tlumeny); }
.prehled-strop { color: var(--pergamen-tlumeny); font-size: 10px; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.prehled-poznamka { margin: 6px 0 0; color: var(--pergamen-tlumeny); font-size: 12px; text-shadow: 0 2px 0 var(--noc); }
/* Rarity a Štěstí v pauze: řádek šancí jako pod kartami (drahokam v barvě rarity a procento), popis řádku nad ním. */
.prehled-sance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0 0 6px;
  font-size: 12px;
  text-shadow: 0 2px 0 var(--noc);
}
.prehled-sance-popis { flex-basis: 100%; color: var(--pergamen); font-weight: bold; }
.prehled-efekt { margin: 8px 0 0; color: var(--mosaz-svetla); font-size: 12px; text-shadow: 0 2px 0 var(--noc); }

@media (max-width: 600px) {
  .pauza-telo { gap: 10px; }
  .pauza-nastaveni { gap: 10px; }
  .pauza-prehled { --ikona: 18px; --cislo: 9px; gap: 10px; }
  .dps-tabulka { font-size: 12px; }
  .dps-tabulka th { padding: 0 3px 1px; font-size: 9px; letter-spacing: 0.02em; }
  .dps-tabulka td { padding: 3px 3px; }
  .dps-tabulka td.dps-hlavni { font-size: 13px; }
  .dps-nej { display: none; }
  .prehled-mrizka { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .prehled-text b { font-size: 12px; }
  .prehled-text small { font-size: 11px; }
}

/* Sbírka výbavy bossů v menu: nahoře kolik je objeveno (číslo a pruh po kusech), pak sada po sadě. Sada je
   destička v tenkém rámu s truhlou bosse a počtem (celá sada má mosaznou cedulku), čtyři kusy 2×2 jako sloty výbavy
   ve hře. Kus má sprite ve výklenku a pixelový rámeček v barvě nejlepší nalezené rarity (barvy rarit jsou herní
   informace, zůstávají), neobjevený je zapuštěný do desky, jen stín a ???. Dole bonusy za 2 a 4 kusy se štítky. */
.sbirka-stav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: -4px 0 16px;
  color: var(--pergamen-tlumeny);
  text-shadow: 0 2px 0 var(--noc);
}

.sbirka-stav > span { white-space: nowrap; }
.sbirka-stav b { color: var(--mosaz); font-size: 18px; }
.sbirka-pruh { flex: 0 1 220px; min-width: 80px; }

.sbirka-sada {
  margin: 0 0 16px;
  padding: 8px 10px 10px;
  text-align: left;
  background: var(--drevo-2) padding-box;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ram-tenky) 2 / calc(2 * var(--px)) repeat;
}

.sbirka-sada.cela { border-image-source: var(--ram-karta-zvolena); }

.sbirka-hlava {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sbirka-hlava canvas { flex: none; }
.sbirka-hlava b { flex: 1; min-width: 0; color: var(--mosaz); font-size: 15px; text-shadow: 0 2px 0 var(--noc); }

.sbirka-pocet {
  flex: none;
  padding: 1px 7px 2px;
  font-size: 12px;
  font-weight: bold;
  color: var(--pergamen-tlumeny);
  background: var(--drevo-0);
  box-shadow: 0 0 0 2px var(--noc);
}

.sbirka-sada.cela .sbirka-pocet {
  color: #2a1708;
  background: var(--mosaz);
  box-shadow: inset 0 2px 0 var(--mosaz-lesk), inset 0 -2px 0 var(--mosaz-stin), 0 0 0 2px var(--noc);
}

.sbirka-efekt { display: block; margin: 4px 0 10px; color: var(--pergamen-tlumeny); font-size: 12px; line-height: 1.35; }
.sbirka-efekt b { color: var(--duse); }

.sbirka-mrizka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sbirka-kus {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px 6px 6px;
  text-align: left;
  background: var(--c-pozadi);
  box-shadow: 0 0 0 2px var(--c), 0 0 0 4px var(--noc), 0 0 calc(var(--zar, 0px) * 1.5) var(--c-zar);
  margin: 4px;
}

.sbirka-vyklenek {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: rgba(20, 12, 8, 0.55);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--noc);
}

.sbirka-kus.neznamy {
  --c: var(--drevo-2);
  --c-pozadi: var(--drevo-0);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--noc);
}

.sbirka-kus.neznamy .sbirka-vyklenek { background: transparent; box-shadow: none; }
.sbirka-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sbirka-text b { color: var(--c-svetla); font-size: 13px; text-shadow: 0 2px 0 var(--noc); }
.sbirka-kus.neznamy .sbirka-text b { color: var(--pergamen-tlumeny); letter-spacing: 0.2em; }
.sbirka-text small { color: var(--pergamen-tlumeny); font-size: 11px; line-height: 1.3; }
.sbirka-text .sbirka-staty { color: var(--pergamen); }

.sbirka-bonusy { display: grid; gap: 4px; margin-top: 10px; }
.sbirka-bonus { display: flex; align-items: baseline; gap: 8px; color: var(--pergamen-tlumeny); font-size: 12px; line-height: 1.35; }

.sbirka-bonus-stitek {
  flex: none;
  padding: 0 6px 1px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mosaz-svetla);
  background: var(--drevo-3);
  box-shadow: inset 0 2px 0 var(--drevo-4), 0 0 0 2px var(--noc);
}

/* Telefon: kusy pořád 2×2, jen sprite nad textem. */
@media (max-width: 520px) {
  .sbirka-kus { flex-direction: column; text-align: center; padding: 8px 4px; }
  .sbirka-text { align-items: center; }
  .sbirka-bonus { flex-direction: column; gap: 3px; }
}

/* Okno Pety (src/lihen.js). Nahoře líheň: destička v tenkém rámu, vlevo zapuštěný výklenek s vejcem (8× zvětšené),
   vpravo počet vajec, pojistka, duše a tlačítka Otevřít a Koupit (na co to nejde, je tmavé). Otevření: vejce se
   třese (.zatrast), výklenek prosvítá barvou rarity (.prosvita, .silne), po vylíhnutí blikne (.zablesk) a dostane
   rámeček rarity peta. Pod ním cedulka výsledku se štítkem rarity. Sbírka petů jako Sbírka výbavy: dlaždice
   s výklenkem, jménem, raritou, dílky úrovní a bonusem, aktivní pet má mosazný rámeček a cedulku S tebou. */
.lihen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "vyklenek info" "vysledek vysledek";
  gap: 10px 14px;
  align-items: center;
  margin: 0 0 16px;
  padding: 10px 12px 12px;
  text-align: left;
  background: var(--drevo-2) padding-box;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ram-tenky) 2 / calc(2 * var(--px)) repeat;
}

.lihen-vyklenek {
  grid-area: vyklenek;
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  background: rgba(20, 12, 8, 0.55);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--noc);
}

.lihen-vyklenek.prosvita { box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.45), inset 0 0 22px var(--c-zar), 0 0 0 2px var(--noc), 0 0 10px var(--c-zar); }
.lihen-vyklenek.prosvita.silne { box-shadow: inset 0 0 34px var(--c), 0 0 0 2px var(--noc), 0 0 18px var(--c-zar); }

.lihen-vyklenek.vylihnuto {
  background: var(--c-pozadi);
  box-shadow: 0 0 0 2px var(--c), 0 0 0 4px var(--noc), 0 0 calc(var(--zar, 0px) * 2) var(--c-zar);
}

.lihen-vyklenek.zablesk { animation: zablesk-lihne 0.5s steps(5); }
.lihen-vejce.zatrast { animation: zatrast-vejce 0.32s steps(6); }

@keyframes zatrast-vejce {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  20% { translate: -5px 0; rotate: -8deg; }
  45% { translate: 5px 0; rotate: 7deg; }
  70% { translate: -3px 0; rotate: -4deg; }
  85% { translate: 2px 0; rotate: 2deg; }
}

@keyframes zablesk-lihne {
  0% { filter: brightness(2.4); scale: 1.08; }
  100% { filter: none; scale: 1; }
}

.lihen-info { grid-area: info; display: flex; flex-direction: column; gap: 3px; min-width: 0; text-shadow: 0 2px 0 var(--noc); }
.lihen-pocet { margin: 0; color: var(--pergamen); font-size: 15px; }
.lihen-pocet b { color: var(--mosaz); font-size: 22px; }
.lihen-pojistka { color: var(--pergamen-tlumeny); font-size: 12px; }
.lihen-duse { display: inline-flex; align-items: center; gap: 6px; color: var(--duse); font-size: 13px; }
.lihen-tlacitka { justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lihen-tlacitka .menu-tlacitko { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 7px 16px 9px 24px; }
.lihen-cena { display: inline-flex; align-items: center; gap: 4px; color: var(--duse); }

.lihen-tlacitka .menu-tlacitko.nejde {
  --tl-lice: var(--drevo-2);
  --tl-svetlo: var(--drevo-3);
  --tl-stin: var(--drevo-1);
  --tl-text: var(--pergamen-tlumeny);
}

.lihen-tlacitka .menu-tlacitko.nejde .lihen-cena { color: var(--chyba); }

.lihen-vysledek {
  grid-area: vysledek;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 4px;
  padding: 8px 10px 9px;
  background: var(--c-pozadi);
  box-shadow: 0 0 0 2px var(--c), 0 0 0 4px var(--noc), 0 0 calc(var(--zar, 0px) * 1.5) var(--c-zar);
  text-shadow: 0 2px 0 var(--noc);
}

.lihen-vysledek[hidden] { display: none; }
.lihen-vysledek b { color: var(--c-svetla); font-size: 16px; }
.lihen-zmena { color: var(--pergamen); font-size: 13px; font-weight: bold; }
.lihen-vysledek .pet-bonus { flex-basis: 100%; }

.lihen-stitek, .pet-aktivni {
  flex: none;
  padding: 0 6px 1px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: none;
  color: var(--c-pas);
  background: var(--c);
  box-shadow: 0 0 0 2px var(--noc);
}

.pety-mrizka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pet-kus {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 4px;
  padding: 6px 8px 6px 6px;
  font: inherit;
  color: inherit;
  text-align: left;
  border: 0;
  cursor: pointer;
  background: var(--c-pozadi);
  box-shadow: 0 0 0 2px var(--c), 0 0 0 4px var(--noc), 0 0 calc(var(--zar, 0px) * 1.5) var(--c-zar);
}

.pet-kus.neznamy {
  --c: var(--drevo-2);
  --c-pozadi: var(--drevo-0);
  cursor: default;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--noc);
}

.pet-kus.zvolena { box-shadow: 0 0 0 2px var(--c), 0 0 0 4px var(--mosaz), 0 0 0 6px var(--noc), 0 0 calc(var(--zar, 0px) * 1.5) var(--c-zar); }
.pet-kus.vybrano, .pet-kus:focus-visible { outline: none; translate: 0 -2px; box-shadow: 0 0 0 2px var(--mosaz-svetla), 0 0 0 4px var(--noc), 0 4px 0 4px rgba(0, 0, 0, 0.35); }
.pet-kus.zvolena.vybrano, .pet-kus.zvolena:focus-visible { box-shadow: 0 0 0 2px var(--mosaz-svetla), 0 0 0 4px var(--mosaz), 0 0 0 6px var(--noc); }
.pet-kus.zatrast { animation: zatrast 0.25s steps(4); }

.pet-vyklenek {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: rgba(20, 12, 8, 0.55);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--noc);
}

.pet-kus.neznamy .pet-vyklenek { background: transparent; box-shadow: none; }
.pet-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pet-text b { color: var(--c-svetla); font-size: 13px; text-shadow: 0 2px 0 var(--noc); }
.pet-kus.neznamy .pet-text b { color: var(--pergamen-tlumeny); letter-spacing: 0.2em; }
.pet-rarita { color: var(--c-svetla); font-size: 11px; }
.pet-bonus { color: var(--pergamen-tlumeny); font-size: 11px; line-height: 1.3; }
.pet-dilky { display: flex; gap: 3px; margin: 1px 0; }
.pet-dilky i { width: 9px; height: 5px; background: var(--drevo-0); box-shadow: 0 0 0 1px var(--noc); }
.pet-dilky i.plny { background: var(--mosaz); box-shadow: inset 0 1px 0 var(--mosaz-lesk), 0 0 0 1px var(--noc); }

.pet-aktivni {
  position: absolute;
  top: -9px;
  right: 8px;
  color: #2a1708;
  background: var(--mosaz);
  box-shadow: inset 0 2px 0 var(--mosaz-lesk), inset 0 -2px 0 var(--mosaz-stin), 0 0 0 2px var(--noc);
}

.pety-napoveda { margin: 14px 0 0; color: var(--pergamen-tlumeny); font-size: 12px; text-shadow: 0 2px 0 var(--noc); }

/* Telefon: líheň pod sebou, dlaždice pořád 2 vedle sebe, sprite nad textem. */
@media (max-width: 520px) {
  .lihen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "vyklenek" "info" "vysledek"; justify-items: center; text-align: center; }
  .lihen-info { align-items: center; }
  .lihen-tlacitka { justify-content: center; }
  .lihen-vysledek { justify-content: center; }
  .pet-kus { flex-direction: column; text-align: center; padding: 10px 4px 8px; }
  .pet-text { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lihen-vejce.zatrast, .lihen-vyklenek.zablesk, .pet-kus.zatrast { animation: none; }
}

/* Přehodit karty: tlačítko pod kartami s cenou (zlaťák) nebo „zdarma ×N“. Na co zlaťáky nestačí, je tmavé
   s cenou v barvě chyby (klik jen zatřese). */
.radek-prehodit { margin-top: 16px; }

.menu-tlacitko.prehodit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 7px 22px 9px 30px;
}

.menu-tlacitko.prehodit kbd { font-size: 11px; }

.menu-tlacitko.prehodit.nejde {
  --tl-lice: var(--drevo-2);
  --tl-svetlo: var(--drevo-3);
  --tl-stin: var(--drevo-1);
  --tl-text: var(--pergamen-tlumeny);
}

.menu-tlacitko.prehodit.nejde .cena-zlato b { color: var(--chyba); }
.menu-tlacitko.zatrast { animation: zatrast 0.25s steps(4); }
.prehodit-zdarma { color: var(--ok); }

.cena-zlato {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--mosaz);
}

.cena-zlato canvas { flex: none; }

/* Obchod kupce: mosazné okno (vzácné jako truhla), nadpis Vůz kupce pixelovým písmem, mosazný štítek s odpočtem.
   Nahoře zapuštěná pokladnička se zlaťáky, klíči a přehozením zdarma (jako duše ve Vylepšeních). Zboží jsou karty
   z kitu s mosazným rámečkem a mosaznou cenovkou místo pruhu rarity, dole zapuštěné počítadlo kusů na voze. Na co
   zlaťáky nestačí, je tmavé dřevo s tlumenou ikonou a cenou v barvě chyby a při kliknutí se zatřese. Po nákupu se
   pod zbožím ukáže hlášení se zelenou kontrolkou. */
.obchod .vyber-panel { width: min(1024px, 100%); }
.obchod .vyber-stitek { --stitek: var(--mosaz); --stitek-lesk: var(--mosaz-lesk); --stitek-stin: var(--mosaz-stin); }

.obchod-penize {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 18px;
  width: fit-content;
  max-width: 100%;
  margin: -6px auto 16px;
  padding: 5px 16px 6px 12px;
  font-size: 15px;
  color: var(--pergamen-tlumeny);
  background: var(--drevo-0) padding-box;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ram-tenky) 2 / calc(2 * var(--px)) repeat;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 var(--noc);
}

.obchod-penize .cena-zlato b { font-size: 22px; }
.obchod-klice { display: inline-flex; align-items: center; gap: 5px; color: var(--mosaz); font-size: 20px; }
.obchod-penize small { color: var(--ok); font-size: 13px; }

.zbozi-karty { flex-wrap: wrap; gap: 24px 20px; }
.zbozi-karty.bez-prichodu .karta { animation: none; }

.karta.zbozi {
  --c: var(--mosaz);
  --c-svetla: var(--mosaz-lesk);
  --c-pozadi: var(--drevo-2);
  --c-zar: rgba(0, 0, 0, 0);
  --c-pas: #2a1708;
  --zar: 0px;
  flex: 0 1 168px;
}

.karta.zbozi .karta-text { flex: 1; }
.karta.zbozi .karta-nazev { color: var(--mosaz-svetla); }
.karta.zbozi .karta-rarita { display: flex; justify-content: center; }
.karta.zbozi .karta-rarita .cena-zlato { color: #2a1708; font-size: 15px; }
.karta.zbozi.nejde { --c: var(--drevo-3); --c-svetla: var(--pergamen-tlumeny); --c-pozadi: var(--drevo-1); --c-pas: var(--pergamen); }
.karta.zbozi.nejde .karta-nazev { color: var(--pergamen-tlumeny); }
.karta.zbozi.nejde .karta-rarita { background: var(--drevo-2); box-shadow: inset 0 2px 0 var(--drevo-3), 0 3px 0 var(--noc); }
.karta.zbozi.nejde .karta-rarita .cena-zlato { color: var(--chyba); }
.karta.zbozi.nejde .karta-ikona canvas { opacity: 0.5; }
.karta.zbozi.zatrast { animation: zatrast 0.25s steps(4); }
.zbozi-prekazka { color: var(--chyba); font-size: 12px; font-weight: bold; text-shadow: 0 2px 0 var(--noc); }

/* počítadlo kusů na voze: zapuštěné do destičky, vyprodané v barvě chyby */
.zbozi-zasoba {
  margin-top: auto;
  padding: 1px 8px 2px;
  font-size: 12px;
  font-weight: bold;
  color: var(--pergamen-tlumeny);
  background: var(--drevo-0);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--noc);
}

.zbozi-zasoba b { color: var(--mosaz); }
.zbozi-zasoba.vyprodano { color: var(--chyba); }

.obchod-nakup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 1.4em;
  margin: 16px 0 6px;
  color: var(--ok);
  font-weight: bold;
  text-shadow: 0 2px 0 var(--noc);
}

.obchod-nakup:not(:empty)::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--ok);
  box-shadow: inset 2px 2px 0 #d8ffdc, inset -2px -2px 0 #2f9a45, 0 0 0 2px var(--noc);
}

.obchod .radek-tlacitek { margin-top: 6px; }

@media (max-width: 600px) {
  .karta.zbozi { min-height: 0; }
  .zbozi-zasoba { margin-top: 2px; }
}

/* Konec hry: okno z trámů se závojem přes hru, nad nadpisem štítek s rekordem (nový rekord mosazný, jinak tmavá
   cedulka), nadpis krvavým pixelovým písmem. Přehled běhu: vlevo čas velkým pixelovým písmem, vpravo zapuštěná
   tabulka (postava a mapa s ikonou, hrozba, úroveň, zabití, bossové, výbava), pod ní poznámky. Dole pokladnička
   s dušemi za hru jako ve Vylepšeních a tlačítka Znovu (mosazné) a Menu. */
.okno.konec { width: min(620px, calc(100% - 24px)); padding: 12px 18px 16px; }

.konec-stitek {
  display: inline-block;
  max-width: 100%;
  margin: 2px 0 10px;
  padding: 2px 10px 3px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pergamen-tlumeny);
  background: var(--drevo-0);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--noc);
}

.konec-stitek.novy {
  letter-spacing: 0.14em;
  color: var(--noc);
  background: var(--mosaz);
  box-shadow: inset 0 2px 0 var(--mosaz-lesk), inset 0 -2px 0 var(--mosaz-stin), 0 0 0 2px var(--noc);
}

.konec-prehled {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px 16px;
  margin: 14px 0 14px;
  text-align: left;
}

.konec-cas {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  padding: 4px 6px;
}

.konec-cas small { color: var(--pergamen-tlumeny); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 2px 0 var(--noc); }

.konec-udaje {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  margin: 0;
  padding: 7px 12px;
  background: var(--drevo-0);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px var(--noc);
}

.konec-udaje dt { color: var(--pergamen-tlumeny); font-size: 13px; }
.konec-udaje dd { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; color: var(--mosaz); font-weight: bold; }
.konec-udaje dd canvas { flex: none; margin: -3px 0; }
.konec-udaje dd.konec-mapa { color: var(--mapa, var(--mosaz)); }

.konec-poznamky { flex-basis: 100%; display: grid; gap: 4px; }
.konec-poznamky p { margin: 0; color: var(--duse); font-size: 13px; font-weight: bold; text-align: center; text-shadow: 0 2px 0 var(--noc); }
.konec-poznamky p.ok { color: var(--ok); }

/* Duše za hru: zapuštěná pokladnička, velký počet duší, pod ním zlaťáky a rozpis. */
.konec-duse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  margin: 0 0 16px;
  padding: 6px 12px 8px;
  background: var(--drevo-0) padding-box;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ram-tenky) 2 / calc(2 * var(--px)) repeat;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 var(--noc);
}

.konec-duse:empty { display: none; }
.konec-duse b { color: var(--duse); font-size: 20px; }
.konec-duse small { flex-basis: 100%; color: var(--pergamen-tlumeny); font-size: 12px; }
.konec-duse small.konec-zlato { color: var(--mosaz); }
.konec-zlato canvas { vertical-align: -5px; }

@media (max-width: 520px) {
  .okno.konec { padding: 8px 10px 12px; }
  .konec-prehled { flex-direction: column; gap: 10px; margin: 10px 0; }
  .konec-cas { flex-direction: row; gap: 12px; padding: 0; }
  .konec .radek-tlacitek { gap: 10px; }
  .konec .radek-tlacitek .menu-tlacitko { flex: 1 1 120px; min-width: 0; padding: 10px 10px 12px 26px; font-size: 16px; letter-spacing: 0.04em; }
}

/* Úzký telefon (320 px): Znovu a Menu pod sebou, ať se nelámou. */
@media (max-width: 360px) {
  .konec .radek-tlacitek .menu-tlacitko { flex-basis: 100%; }
}

/* Výběr mapy v záložce Mapy: karta jako u postav (.trida), vlevo náhled podlahy s nepřáteli v dřevěném okénku
   (tenký rám), vpravo jméno v barvě mapy a řádky s pixelovými ikonami (boss, lebka obtížnosti, zámek).
   Zamčená mapa má tmavší destičku, šedý náhled se zámkem a pruh postupu k odemčení po minutách. */
.mrizka-map {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.trida.mapa { align-items: flex-start; gap: 12px; }
.trida.mapa b { color: var(--mapa); }
.trida.mapa.zatrast { animation: zatrast 0.25s steps(4); }

.mapa-nahled {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  line-height: 0;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ram-tenky) 2 / calc(2 * var(--px)) repeat;
  background: var(--noc) padding-box;
}

.mapa-nahled canvas:first-child { width: 192px; height: 96px; }
.mapa-nahled canvas + canvas { position: absolute; }

.trida .mapa-popis { margin-bottom: 3px; }

.trida .s-ikonou { display: flex; align-items: center; gap: 6px; }
.ikona-radku { flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
.trida .mapa-boss { color: var(--pergamen-tlumeny); }
.trida .mapa-boss em { font-style: normal; font-weight: bold; color: var(--mosaz); }
.trida .mapa-obtiznost { color: #f2a65a; }
.trida .mapa-rekord { margin-top: 2px; color: var(--pergamen-tlumeny); }
.trida .mapa-rekord em { font-style: normal; font-weight: bold; color: var(--pergamen); }

/* Zamčená mapa: tmavší destička, šedý náhled se zámkem, jméno tlumeně, podmínka v barvě chyby. */
.trida.mapa.zamcena { --karta-lice: var(--drevo-1); }
.trida.mapa.zamcena.vybrano, .trida.mapa.zamcena:focus-visible { --karta-lice: var(--drevo-2); }
.trida.mapa.zamcena .mapa-nahled canvas:first-child { filter: grayscale(0.85) brightness(0.5); }
.trida.mapa.zamcena b { color: var(--pergamen-tlumeny); }
.trida.mapa.zamcena .mapa-popis, .trida.mapa.zamcena .mapa-boss { color: #a8957a; }
.trida .mapa-zamek { color: var(--chyba); font-weight: bold; }

/* Postup k odemčení: zapuštěný pruh (.pruh-postupu níž), dílek = minuta. */
.trida .mapa-postup { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--pergamen-tlumeny); white-space: nowrap; }
.mapa-postup .pruh-postupu { flex: 1 1 60px; max-width: 150px; }

/* Pruh postupu (kit): zapuštěný do desky, výplň mosazná s leskem nahoře, dílky oddělené obrysem (--dilku). */
.pruh-postupu {
  position: relative;
  display: block;
  height: 12px;
  background: var(--drevo-0);
  border: 2px solid var(--noc);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.5);
}

.pruh-postupu i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--mosaz);
  box-shadow: inset 0 2px 0 var(--mosaz-lesk), inset 0 -2px 0 var(--mosaz-stin);
}

.pruh-postupu::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--dilku, 5) - 2px), var(--noc) calc(100% / var(--dilku, 5) - 2px) calc(100% / var(--dilku, 5)));
  pointer-events: none;
}

@media (max-width: 520px) {
  .trida.mapa { flex-direction: column; align-items: stretch; text-align: left; }
  .mapa-nahled { align-self: center; }
  .trida.mapa .trida-text { padding: 0 2px; }
}

/* Rekordy po mapách: destička v tenkém rámu, v hlavičce ikona mapy, jméno v barvě mapy a datum. Vlevo
   nejdelší přežití pixelovým písmem (jako nadpisy), vpravo zapuštěná tabulka s postavou, hrozbou, úrovní
   a zabitími. Zamčená mapa je tmavší se šedou ikonou a zámkem. */
.rekord-mapy {
  margin: 0 0 14px;
  padding: 8px 10px 10px;
  text-align: left;
  background: var(--drevo-2) padding-box;
  border: calc(2 * var(--px)) solid transparent;
  border-image: var(--ram-tenky) 2 / calc(2 * var(--px)) repeat;
}

.rekord-hlava { display: flex; align-items: center; gap: 9px; }
.rekord-hlava canvas { flex: none; }

.rekord-hlava h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--mapa);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 var(--noc);
}

.rekord-kdy { flex: none; color: var(--pergamen-tlumeny); font-size: 12px; }

.rekord-telo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.rekord-cas {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 132px;
  padding: 6px 10px 8px;
}

.rekord-cas small { color: var(--pergamen-tlumeny); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

.rekord-staty {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
  margin: 0;
  padding: 7px 10px;
  background: var(--drevo-0);
  border: 2px solid var(--noc);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45);
}

.rekord-staty dt { color: var(--pergamen-tlumeny); font-size: 13px; }
.rekord-staty dd { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--mosaz); font-weight: bold; }
.rekord-staty dd canvas { margin: -3px 0; }

.rekord-prazdny { margin: 6px 0 0; color: var(--pergamen-tlumeny); font-size: 13px; }
.rekord-mapy.zamcena { background-color: var(--drevo-1); }
.rekord-mapy.zamcena .rekord-hlava canvas:first-child { filter: grayscale(0.85) brightness(0.6); }
.rekord-mapy.zamcena h3 { color: var(--pergamen-tlumeny); }
.rekord-mapy.zamcena .rekord-prazdny { color: var(--chyba); }

@media (max-width: 520px) {
  .rekord-telo { flex-direction: column; align-items: stretch; gap: 8px; }
  .rekord-cas { flex-direction: row; justify-content: center; gap: 12px; padding: 2px 0; }
}

/* Profil: profily jsou pod sebou jako sloty uložení ve hrách, každý karta jako u postav (výklenek s postavou
   profilu, jméno, duše s ikonou, mapy, sbírka, rekord), pod nimi hlášení s kontrolkou a tlačítka akcí: nahoře správa (Nový, Přejmenovat, Smazat), pod ní
   přenos (Exportovat, Importovat). Podokna jsou ve skupině s pixelovým nadpisem. Pole pro jméno a kód jsou
   zapuštěná do desky, zaměřené mají mosazný obrys. Písmo polí 16 px, ať iPhone při psaní nepřibližuje stránku. */

.mrizka-profilu {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.trida.profil .profil-jmeno { overflow-wrap: anywhere; }
.trida .profil-duse { display: flex; align-items: center; gap: 5px; color: var(--duse); }
.trida .profil-duse canvas { margin: -3px 0; }
.trida .profil-rekord em { font-style: normal; font-weight: bold; color: var(--pergamen); }
.trida.profil.nahled { cursor: default; margin: 4px 0 12px; text-align: left; }
.trida.profil.nahled:active { translate: none; }

.trida.profil.nahled .trida-stitek {
  color: #06201d;
  background: var(--xp);
  box-shadow: inset 0 2px 0 #b5f5ee, inset 0 -2px 0 #2a9b90, 0 0 0 2px var(--noc);
}

/* Hlášení: kontrolka vlevo (zelená hotovo, rudá chyba, mosazná varování) jako u přepínačů v Nastavení. */
.profil-hlaseni {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  min-height: 1.4em;
  margin: 0 0 12px;
  color: var(--ok);
  font-size: 13px;
  text-shadow: 0 2px 0 var(--noc);
}

.profil-hlaseni::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--ok);
  box-shadow: inset 2px 2px 0 #d8ffdc, inset -2px -2px 0 #2f9a45, 0 0 0 2px var(--noc);
}

.profil-hlaseni:empty { margin: 0; min-height: 0; }
.profil-hlaseni:empty::before { display: none; }
.profil-hlaseni.chyba { color: var(--chyba); }
.profil-hlaseni.chyba::before { background: var(--chyba); box-shadow: inset 2px 2px 0 #ffd0d0, inset -2px -2px 0 #a8403f, 0 0 0 2px var(--noc); }
.profil-hlaseni.varovani { color: var(--mosaz-svetla); }
.profil-hlaseni.varovani::before { background: var(--mosaz); box-shadow: inset 2px 2px 0 var(--mosaz-lesk), inset -2px -2px 0 var(--mosaz-stin), 0 0 0 2px var(--noc); }

.profil-akce {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

/* Seznam: správa profilu po třech, přenos po dvou (šest sloupců, tlačítka přes dva nebo tři). */
.profil-akce-seznam { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.profil-akce-seznam > * { grid-column: span 2; }
.profil-akce-seznam > [data-akce="exportovat"], .profil-akce-seznam > [data-akce="importovat"] { grid-column: span 3; }

.profil-akce .menu-tlacitko, .profil-radek .menu-tlacitko {
  min-width: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 8px 26px 10px;
}

.profil-akce .menu-tlacitko.vybrano::before, .profil-radek .menu-tlacitko.vybrano::before { left: 7px; }

.profil-radek { margin: 0 0 12px; }
.profil-pata { font-size: 12px; margin-bottom: 14px; }

.profil-sekce { margin-top: 4px; }

.profil-pole, .profil-kod {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  font: inherit;
  font-size: 16px;
  color: var(--pergamen);
  background: var(--drevo-0);
  border: 3px solid var(--noc);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255, 220, 160, 0.08);
  padding: 10px 12px;
}

.profil-pole::placeholder, .profil-kod::placeholder { color: var(--pergamen-tlumeny); opacity: 0.6; }
.profil-pole:focus, .profil-kod:focus { outline: none; border-color: var(--mosaz); }
.profil-pole.zatrast, .profil-kod.zatrast { animation: zatrast 0.25s steps(4); }

.profil-kod {
  min-height: 96px;
  resize: vertical;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-all;
}

.profil-kod[readonly] { color: var(--mosaz); }

@media (hover: none) and (pointer: coarse) {
  .profil-kod { font-size: 16px; }
}

/* Telefon: akce po dvou, Smazat přes celou šířku mezi správou a přenosem. */
@media (max-width: 520px) {
  .profil-akce { grid-template-columns: 1fr 1fr; }
  .profil-akce-seznam > *, .profil-akce-seznam > [data-akce="exportovat"], .profil-akce-seznam > [data-akce="importovat"] { grid-column: span 1; }
  .profil-akce-seznam > [data-akce="smazat"] { grid-column: 1 / -1; }
  .profil-akce .menu-tlacitko { padding: 8px 20px 10px; }
  .profil-akce .menu-tlacitko.vybrano::before { left: 4px; }
}

/* Úzký telefon (320 px): akce pod sebou, ať se PŘEJMENOVAT nemusí lámat. */
@media (max-width: 360px) {
  .profil-akce, .profil-akce-seznam { grid-template-columns: minmax(0, 1fr); }
  .profil-akce-seznam > *, .profil-akce-seznam > [data-akce] { grid-column: auto; }
}