/* Krysie preteky – tmavý herný stôl.
   Paleta: tmavá bridlica ako miestnosť, zelené súkno ako doska, zlatá a smaragdová ako akcenty. */
:root {
  --pozadie: #0f1518;
  --pozadie-2: #0b1013;
  --panel: #182126;
  --panel-2: #1f2b31;
  --panel-3: #263439;
  --ciara: #2c3b42;
  --ciara-jemna: #ffffff14;
  --text: #e9f0f1;
  --jemne: #94a7ad;
  --hlavna: #2fb882;
  --hlavna-tmava: #27a071;
  --zlata: #e5b53f;
  --plus: #45d995;
  --minus: #ff7a70;
  --sukno-svetle: #2c8a6a;
  --sukno-tmave: #14543f;
  --vyska-stola: 1000px;  /* strop veľkosti plánu na veľkých monitoroch */
  --polomer: 14px;
  --polomer-maly: 10px;
  --tien: 0 1px 2px #00000066, 0 10px 30px #00000040;
  --tien-maly: 0 1px 2px #00000055;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* jeden gombík na celkovú veľkosť rozhrania – rem sa riadi týmto */
html { font-size: 14.4px; }
body {
  margin: 0; color: var(--text);
  background: var(--pozadie);
  background-image: radial-gradient(1200px 600px at 50% -200px, #1a2a30 0%, transparent 70%);
  background-attachment: fixed;
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 1440px; margin: 0 auto; padding: 16px 16px 40px; }
main:has(.stol) { max-width: none; padding: 10px; }
body:has(.stol) .hlavicka { padding: 7px 14px; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; }
h1 { letter-spacing: -.02em; }
small { color: var(--jemne); font-weight: 400; }
.jemne { color: var(--jemne); font-size: .9em; }
.plus { color: var(--plus); }
.minus { color: var(--minus); }
b, strong { font-weight: 650; }

/* popisky typu NADPIS MALÝMI PÍSMENAMI */
.stitok, .vykaz h4, .okruh, .stat dt {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--jemne);
}

/* ------------------------------------------------------------ hlavička */
.hlavicka {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: #0b1013e6; border-bottom: 1px solid var(--ciara);
  position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px);
}
.logo {
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.05em;
  letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 8px;
}

/* ------------------------------------------------------------ plochy */
.panel {
  background: var(--panel); border: 1px solid var(--ciara);
  border-radius: var(--polomer); padding: 16px; margin-bottom: 14px;
  box-shadow: var(--tien-maly);
}

/* ------------------------------------------------------------ tlačidlá a polia */
.btn {
  appearance: none; border: 1px solid var(--ciara); background: var(--panel-2); color: var(--text);
  padding: 11px 16px; border-radius: var(--polomer-maly); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; min-height: 44px; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--panel-3); border-color: #3c4f57; }
.btn.hlavne {
  background: linear-gradient(180deg, var(--hlavna), var(--hlavna-tmava));
  border-color: #38c993; color: #06231a; font-weight: 700;
  box-shadow: 0 1px 0 #ffffff33 inset, 0 2px 10px #2fb88240;
}
.btn.hlavne:hover { filter: brightness(1.08); }
.btn.maly { min-height: 0; padding: 7px 12px; font-size: .9em; }
.btn.mini { min-height: 0; padding: 3px 9px; font-size: .78em; margin-left: 6px; }
.btn:disabled { opacity: .45; cursor: wait; }
.btn:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--hlavna); outline-offset: 2px;
}
input, select {
  font: inherit; color: var(--text); padding: 10px 12px;
  border: 1px solid var(--ciara); border-radius: var(--polomer-maly);
  background: var(--pozadie-2); min-height: 44px;
}
select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--jemne) 50%),
                    linear-gradient(135deg, var(--jemne) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.cislo { width: 7.5em; font-variant-numeric: tabular-nums; }
.rad { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.rad:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ úvodná obrazovka */
.hero { max-width: 680px; margin: 28px auto 20px; text-align: center; }
.hero .nazov-hry {
  font-size: clamp(30px, 7vw, 46px); font-weight: 800; letter-spacing: -.03em; margin: 0 0 .25em;
}
.hero .nazov-hry .emo { filter: drop-shadow(0 3px 8px #0008); }
.hero .podtitul { color: var(--jemne); font-size: clamp(15px, 2.4vw, 17px); margin: 0 auto; max-width: 48ch; }
.uvod { max-width: 680px; margin: 0 auto 14px; }
.uvod h2 { font-size: 1.15em; }

.hrac-riadok {
  display: grid; grid-template-columns: 10px minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 8px; margin-bottom: 6px;
  background: var(--panel-2); border: 1px solid transparent; border-radius: var(--polomer-maly);
}
.hrac-riadok:focus-within { border-color: var(--ciara); }
.hrac-riadok input, .hrac-riadok select { width: 100%; min-width: 0; background-color: var(--pozadie-2); }
.znak {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--f, var(--hlavna)); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--f, var(--hlavna)) 25%, transparent);
}

/* prepínač bota – vyzerá ako prepínač, nie ako zaškrtávacie políčko */
.bot-prepinac {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  padding: 7px 11px 7px 9px; border-radius: 99px; background: var(--pozadie-2);
  border: 1px solid var(--ciara); font-size: .88em; color: var(--jemne); white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.bot-prepinac input { position: absolute; opacity: 0; width: 0; height: 0; min-height: 0; }
.bot-prepinac .packa {
  width: 30px; height: 18px; border-radius: 99px; background: var(--ciara);
  position: relative; flex: none; transition: background .15s;
}
.bot-prepinac .packa::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #9fb0b6; transition: transform .15s, background .15s;
}
.bot-prepinac input:checked + .packa { background: var(--hlavna); }
.bot-prepinac input:checked + .packa::after { transform: translateX(12px); background: #06231a; }
.bot-prepinac:has(input:checked) { background: #2fb8821f; border-color: #2fb88266; color: var(--text); }
.bot-prepinac input:focus-visible ~ .packa { outline: 2px solid var(--hlavna); outline-offset: 2px; }

.dalsi-hraci { margin: 10px 0; }
.dalsi-hraci > summary {
  cursor: pointer; list-style: none; text-align: center; color: var(--jemne); font-weight: 600;
  border: 1px dashed var(--ciara); border-radius: var(--polomer-maly); padding: 11px;
  transition: color .12s, border-color .12s;
}
.dalsi-hraci > summary::-webkit-details-marker { display: none; }
.dalsi-hraci > summary:hover { color: var(--text); border-color: #3c4f57; }
.dalsi-hraci[open] > summary { margin-bottom: 8px; color: var(--text); }
.dalsi-telo .jemne { margin: 6px 2px 0; }
.zacat { width: 100%; font-size: 1.05em; min-height: 52px; margin-top: 4px; }

/* ako sa hrá – tri kroky pod formulárom */
.kroky-hry { max-width: 680px; margin: 0 auto; display: grid; gap: 10px; grid-template-columns: 1fr; }
.krok { background: var(--panel); border: 1px solid var(--ciara); border-radius: var(--polomer); padding: 14px; }
.krok .cifra {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--panel-3); color: var(--zlata); font-weight: 700;
  font-size: .85em; margin-bottom: 8px;
}
.krok h3 { font-size: .98em; margin: 0 0 .3em; }
.krok p { margin: 0; color: var(--jemne); font-size: .9em; }

/* ------------------------------------------------------------ hláška */
.hlaska {
  background: #ff7a7014; color: #ffb3ac; border: 1px solid #ff7a7040;
  padding: 12px 14px; border-radius: var(--polomer-maly); margin-bottom: 14px; font-weight: 600;
}

/* ------------------------------------------------------------ hrací plán */
.stol { display: flex; gap: 12px; justify-content: center; align-items: center; }
.plan {
  /* minmax(0, 1fr) je dôležité: inak stopy narastú na min-content dlaždíc a plán pretečie mobil */
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 6px; aspect-ratio: 1; margin: 0; flex: 0 0 auto;
  /* co najvacsi stvorec, ktory sa zmesti na obrazovku aj s pruhom hracov vedla */
  height: min(calc(100vh - 72px), calc(100vw - 392px), var(--vyska-stola));
  width: auto; max-width: none;
  padding: 8px; border-radius: var(--polomer);
  container-type: size;  /* aby sa obsah políčok dal škálovať cqmin jednotkami */
  background: radial-gradient(120% 90% at 50% 25%, var(--sukno-svetle), var(--sukno-tmave) 80%);
  border: 1px solid #00000066;
  box-shadow: var(--tien), 0 0 0 1px #ffffff0f inset;
}
.policko {
  background: #0c1715d9; border: 1px solid #ffffff14; border-radius: 9px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2px; min-width: 0; overflow: hidden;
  box-shadow: inset 0 2px 0 var(--akcent, transparent);
}
.policko .ikona { font-size: clamp(14px, 4.6cqmin, 48px); line-height: 1.1; }
.policko .nazov {
  font-size: clamp(8px, 1.7cqmin, 15px); color: #ffffff8f; font-weight: 600;
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.policko.aktivne .nazov { color: var(--text); }
.policko.aktivne {
  background: #16302aee; border-color: var(--zlata);
  box-shadow: inset 0 2px 0 var(--akcent, transparent), 0 0 0 2px #e5b53f66, 0 0 18px #e5b53f33;
}
/* kým je hráč na rade hodiť, jeho políčko niekoľkokrát zažiari jeho farbou;
   po hode sa fáza zmení, trieda zmizne a so sebou vezme aj žiaru */
@keyframes ziara {
  0%, 100% { box-shadow: inset 0 2px 0 var(--akcent, transparent), 0 0 0 2px #e5b53f66, 0 0 18px #e5b53f33; }
  50%      { box-shadow: inset 0 2px 0 var(--akcent, transparent), 0 0 0 3px var(--f), 0 0 28px 5px var(--f); }
}
.policko.ziari { animation: ziara 1.25s ease-in-out 3; }
/* malý okruh */
.p-vyplata { --akcent: #45d995; }
.p-prilezitost { --akcent: #e5b53f; }
.p-zbytocnost { --akcent: #ff7a70; }
.p-trh { --akcent: #5aa9e6; }
.p-charita { --akcent: #c48be0; }
.p-dieta { --akcent: #f09bc0; }
.p-prepustenie { --akcent: #a9b4ba; }
/* veľký okruh */
.p-v_vyplata { --akcent: #45d995; }
.p-v_investicia { --akcent: #5aa9e6; }
.p-v_sen { --akcent: #e5b53f; }
.p-v_strata { --akcent: #ff7a70; }
.p-v_charita { --akcent: #c48be0; }
.plan-velky {
  background: radial-gradient(120% 90% at 50% 30%, #6a4e1c, #3a2a0e 75%);
}
/* Prechod na veľký okruh: plán sa preklopí okolo svojej uhlopriečky
   z ľavého horného do pravého dolného rohu. */
.plocha.preklopi { animation: preklopenie .9s cubic-bezier(.3, .7, .3, 1); }
@keyframes preklopenie {
  0%   { transform: perspective(1600px) rotate3d(1, 1, 0, 168deg); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: perspective(1600px) rotate3d(1, 1, 0, 0deg); opacity: 1; }
}

.figurky { position: absolute; bottom: 3px; left: 2px; right: 2px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.figurka {
  display: inline-block; width: clamp(8px, 1.6cqmin, 16px); height: clamp(8px, 1.6cqmin, 16px); border-radius: 50%;
  background: var(--f); box-shadow: 0 0 0 1.5px #0b1013, 0 1px 3px #000a; vertical-align: middle;
}
/* Políčka majú overflow: hidden, takže cestujúcu figúrku orezávali a bolo ju
   vidieť až na cieli. Počas animácie orezanie vypneme a figúrku zdvihneme navrch. */
.plan.posun .policko { overflow: visible; }
.figurka.cestuje { position: relative; z-index: 5; }
.figurka.na-tahu {
  width: clamp(10px, 2.1cqmin, 20px); height: clamp(10px, 2.1cqmin, 20px);
  box-shadow: 0 0 0 2px #fff, 0 1px 4px #000c;
}

/* ovládanie ťahu – na širokej obrazovke leží nad stredom plánu */
.plocha { flex: 0 0 auto; }
.stred {
  border-radius: 12px; margin-top: 12px;
  background: #06120ed1; backdrop-filter: blur(3px); border: 1px solid #ffffff24;
  box-shadow: inset 0 2px 12px #0006, 0 6px 24px #0005;
  display: flex; flex-direction: column; gap: 10px;
  padding: 11px 13px; min-width: 0; min-height: 0; overflow: hidden;
  border-top: 3px solid var(--f);
}
.plan-velky .stred { background: #1a1205d1; }
.stred-hlava {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px solid #ffffff14; flex: 0 0 auto;
  /* rovnaká výška vo všetkých fázach, aby panel pri zmene ťahu neposkakoval
     (52 px = tlačidlo s dotykovou výškou 44 px plus spodný odstup) */
  min-height: 52px;
}
.stred-telo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;
  /* Jemné stmavenie dole napovie, že obsah pokračuje. Maska má dve vrstvy:
     prechod cez obsah a plná cez pravých 10 px, kde je posuvník – inak by sa
     vytratil aj jeho spodný koniec a nebolo by poznať, že sa dá posúvať. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent),
              linear-gradient(#000, #000);
  mask-size: calc(100% - 10px) 100%, 10px 100%;
  mask-position: left top, right top;
  mask-repeat: no-repeat;
}

/* Posuvník panela a modálnych okien kreslíme sami. Prehliadače (napr. Opera GX)
   ho inak zobrazujú ako prekryv, ktorý sa po chvíli stratí, a potom to vyzerá,
   že sa obsah posúvať nedá. */
.stred-telo, .okno-telo, .hraci-pruh { scrollbar-width: thin; scrollbar-color: #ffffff3d transparent; }
.stred-telo::-webkit-scrollbar,
.okno-telo::-webkit-scrollbar,
.hraci-pruh::-webkit-scrollbar { width: 9px; height: 9px; }
.stred-telo::-webkit-scrollbar-thumb,
.okno-telo::-webkit-scrollbar-thumb,
.hraci-pruh::-webkit-scrollbar-thumb {
  background: #ffffff3d; border-radius: 99px; border: 2px solid transparent; background-clip: content-box;
}
.stred-telo::-webkit-scrollbar-thumb:hover,
.okno-telo::-webkit-scrollbar-thumb:hover,
.hraci-pruh::-webkit-scrollbar-thumb:hover { background: #ffffff66; background-clip: content-box; }
.stred-telo::-webkit-scrollbar-track,
.okno-telo::-webkit-scrollbar-track,
.hraci-pruh::-webkit-scrollbar-track { background: transparent; }
/* Kým figúrka ide po políčkach, výsledok ťahu je skrytý. Robí to CSS animácia
   s oneskorením, takže sa obsah odhalí aj keby JS nebežal. */
.stred-telo.caka, .posledne.caka, .akcia-hlavicky.caka {
  animation: odhal .35s ease-out var(--cakanie) backwards;
}
@keyframes odhal {
  from { opacity: 0; visibility: hidden; transform: translateY(6px); }
  to   { opacity: 1; visibility: visible; transform: none; }
}
.stred-pata {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  padding-top: 8px; border-top: 1px solid #ffffff14;
}
.stred-pata > span { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.stred-pata i {
  font-style: normal; font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--jemne); font-weight: 700; white-space: nowrap;
}
.stred-pata b { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stred-telo > :first-child { margin-top: 0; }
.stred-telo h2 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 1.15em; }
.stred-telo h2 .znak { width: 12px; height: 12px; }
.stred-telo > p { color: var(--jemne); }
.stred-telo > p strong, .stred-telo > p b { color: var(--text); }
.okruh { color: #ffffffb3; font-size: .78rem; }
.kolo { font-size: .85rem; color: #ffffff8c; }
.kocky { display: flex; gap: 10px; margin-left: auto; }
.kocka {
  font-size: clamp(30px, 4.6vw, 46px); line-height: 1; color: #fff;
  text-shadow: 0 2px 6px #0009; transform-origin: 50% 55%;
}
.kocka.hodena { animation: hod .8s cubic-bezier(.22, .9, .25, 1); }
.kocka.hodena:nth-child(2) { animation-delay: .1s; animation-fill-mode: backwards; }
.kocka.prazdna { opacity: .3; font-size: clamp(22px, 3.4vw, 34px); animation: none; }
.vyzva-hod { color: var(--jemne); margin: 0; }
/* tlačidlo, ktorým sa ťah posúva ďalej – sedí v hlavičke panela vedľa kocky */
.akcia-hlavicky { padding: 5px 11px; font-size: .82rem; white-space: nowrap; }
/* odkaz na novú hru v pruhu hráčov – zmysel má len tam, kde niet vrchnej lišty */
/* Tlačidlá výkazov pod plánom – na telefóne nahrádzajú kartu hráča. */
.akcie-pod-planom { display: none; flex: 0 0 auto; gap: 6px; justify-content: center; flex-wrap: wrap; }
.akcie-pod-planom .btn { font-size: .85em; }
/* meno hráča, ktorému patria čísla v pätičke panela */
.pata-meno { font-weight: 700; }
.pata-meno .znak { width: 9px; height: 9px; margin-right: 5px; }
/* hráč, ktorý hru opustil – karta zostáva, ale je zjavne mimo hry */
.vykaz.odisiel { opacity: .5; }
.odznak.odisiel { background: #ffffff1a; color: var(--jemne); }
/* zoznam rozohraných hier na úvode */
.zoznam-hier { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zoznam-hier li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 4px 12px; padding: 10px 12px;
  background: var(--pozadie-2); border: 1px solid var(--ciara); border-radius: var(--polomer-maly);
}
.zoznam-hier .hra-hraci { display: flex; align-items: center; gap: 6px; min-width: 0; }
.zoznam-hier .hra-hraci strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoznam-hier .hra-stav { grid-column: 1; font-size: .85em; color: var(--jemne); }
.zoznam-hier .btn { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 460px) {
  .zoznam-hier li { grid-template-columns: minmax(0, 1fr); }
  .zoznam-hier .btn { grid-column: 1; grid-row: auto; justify-self: start; }
}

.btn.nebezpecne { background: #4a1d1d; border-color: #7a2e2e; color: #ffd9d6; }
.btn.nebezpecne:hover { background: #5d2424; border-color: #9a3a3a; }

/* Kocka v hlavičke je zároveň tlačidlo na hod – ušetrí celý riadok v paneli.
   Jemne pulzuje, aby bolo vidieť, že sa na ňu dá kliknúť. */
.kocka-tlacidlo {
  background: none; border: 0; padding: 0 2px; margin: 0; cursor: pointer;
  font: inherit; font-size: clamp(30px, 4.6vw, 46px); line-height: 1; color: #fff;
  border-radius: 12px; animation: kocka-vyzyva 1.9s ease-in-out infinite;
}
.kocka-tlacidlo:hover { filter: drop-shadow(0 0 9px var(--f)); }
.kocka-tlacidlo:focus-visible { outline: 2px solid var(--f); outline-offset: 3px; }
.kocka-tlacidlo:disabled { opacity: .45; cursor: default; animation: none; }
@keyframes kocka-vyzyva {
  0%, 100% { transform: none; filter: drop-shadow(0 0 0 #0000); }
  50%      { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 0 8px var(--f)); }
}
@keyframes hod {
  0%   { transform: translateY(-16px) scale(.72) rotate(-200deg); opacity: .65; }
  28%  { transform: translateY(4px)   scale(1.1)  rotate(-50deg); opacity: 1; }
  52%  { transform: translateY(-6px)  scale(.97)  rotate(14deg); }
  72%  { transform: translateY(2px)   scale(1.04) rotate(-6deg); }
  88%  { transform: translateY(-2px)  scale(.99)  rotate(2deg); }
  100% { transform: none; opacity: 1; }
}



/* bot hrá / čaká sa na súpera
   Pozor: display:flex tu nesmie byť – z textu aj <strong> by spravil samostatné
   položky a medzi meno a bodku by vložil medzeru. */
.bot-hra, .caka-sa { font-weight: 600; color: var(--text) !important; }
.bodky { display: inline-flex; gap: 4px; margin-right: 7px; vertical-align: middle; }
.bodky i { width: 7px; height: 7px; border-radius: 50%; background: var(--hlavna); animation: bodka 1.1s infinite ease-in-out; }
.bodky i:nth-child(2) { animation-delay: .18s; }
.bodky i:nth-child(3) { animation-delay: .36s; }
@keyframes bodka { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
.bot-krok, .obnova { display: none; }

/* posledná udalosť – stručná náhrada denníka */
.posledne {
  flex: 0 0 auto; margin: 0 0 8px; font-size: .84rem; color: var(--jemne);
  border-left: 2px solid var(--ciara); padding-left: 9px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* online: čas na ťah a čakanie na súpera */
.cas {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: .82rem; padding: 2px 9px; border-radius: 99px;
  background: #ffffff14; color: var(--text);
}
.cas.malo { background: #ff7a7026; color: #ffb3ac; }
.kocky:not(:empty) + .cas, .stred-hlava .cas { margin-left: auto; }
.caka-sa strong { color: var(--text); }
.odkaz code {
  display: block; padding: 10px 12px; border-radius: var(--polomer-maly);
  background: var(--pozadie-2); border: 1px solid var(--ciara);
  font-size: 1.05em; letter-spacing: .04em; word-break: break-all;
}

/* ------------------------------------------------------------ karty */
.karta {
  border: 1px solid var(--ciara); border-left: 4px solid var(--hlavna); border-radius: var(--polomer-maly);
  padding: 11px 12px; background: var(--panel-2); margin: 10px 0; box-shadow: var(--tien-maly);
}
.karta-zbytocnosti { border-left-color: var(--minus); }
.karta-trh { border-left-color: #5aa9e6; }
.karta-velky { border-left-color: var(--zlata); }
.karta-investicie { border-left-color: #5aa9e6; }
.karta-straty { border-left-color: var(--minus); }
.karta-sen { border-left-color: var(--zlata); background: #2a1e0966; }
.karta h3 { font-size: 1.08em; margin: .25em 0 .35em; }
.karta p { margin: .25em 0; color: var(--jemne); }
.cisla { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; margin: 10px 0 0; }
.cisla div { background: var(--pozadie-2); border-radius: 9px; padding: 6px 9px; }
.cisla dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--jemne); font-weight: 700; }
.cisla dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.suma { font-weight: 700; }
.predaj {
  justify-content: space-between; border-top: 1px solid var(--ciara); padding-top: 10px;
  margin-top: 10px; gap: 8px;
}

/* ------------------------------------------------------------ výkazy hráčov */
/* pruh hráčov pri okraji plánu */
.hraci-pruh {
  flex: 0 1 360px; min-width: 0; align-self: stretch;
  height: min(calc(100vh - 72px), calc(100vw - 392px), var(--vyska-stola));
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; scrollbar-gutter: stable;
  background: #0d1417b8; border: 1px solid var(--ciara); border-radius: var(--polomer);
  padding: 10px; backdrop-filter: blur(6px);
}
.nadpis-pruhu {
  margin: 0 2px 2px; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--jemne); flex: 0 0 auto;
}
.hraci-pruh .vykaz { flex: 0 0 auto; }

.vykaz {
  border: 1px solid var(--ciara); border-radius: var(--polomer); background: var(--panel);
  padding: 9px 11px; box-shadow: var(--tien-maly); border-left: 3px solid var(--f);
  min-width: 0;
}
.vykaz.na-tahu { border-color: var(--f); box-shadow: 0 0 0 1px var(--f), var(--tien-maly); }
.suhrn-hraca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; }
.suhrn-hraca strong { font-size: 1.02em; }
/* hlavička na jednom riadku, aby mali všetky karty rovnakú výšku */
.suhrn-hraca .hlava { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; flex-basis: 100%; min-width: 0; }
.suhrn-hraca .hlava strong { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suhrn-hraca .hlava small {
  flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
  font-size: .82em;
}

/* kľúčové čísla v zabalenej karte */
.rychly-prehlad {
  flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
}
.rychly-prehlad > span {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  background: var(--panel-2); border-radius: 8px; padding: 4px 8px;
}
.rychly-prehlad i {
  font-style: normal; font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--jemne); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rychly-prehlad b {
  font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.odznak {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 99px;
  background: var(--panel-3); color: var(--jemne);
}
.odznak.bot { background: #2fb8821f; color: var(--plus); }
.odznak.velky { background: #e5b53f1f; color: var(--zlata); }

.postup-riadok { flex-basis: 100%; display: flex; align-items: center; gap: 8px; }
.postup-riadok b {
  font-size: .72rem; color: var(--jemne); font-variant-numeric: tabular-nums;
  white-space: nowrap; min-width: 2.6em; text-align: right;
}
.postup { flex: 1 1 auto; height: 7px; background: var(--pozadie-2); border-radius: 99px; overflow: hidden; }
.postup span { display: block; height: 100%; background: linear-gradient(90deg, var(--hlavna), var(--plus)); border-radius: 99px; transition: width .4s; }
.postup.velky span { background: linear-gradient(90deg, #b98a1c, var(--zlata)); }

/* dlaždice s číslami */
.staty { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 14px 0; }
.stat {
  background: var(--panel-2); border-radius: var(--polomer-maly); padding: 10px 12px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
}
.stat dd {
  margin: 0; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* tlačidlá na karte hráča, ktoré otvárajú modálne okná */
.akcie-karty { margin: 8px 0 0; gap: 5px; }
.akcie-karty .btn { flex: 1 1 auto; min-height: 0; padding: 5px 9px; font-size: .84em; }

/* ------------------------------------------------------------ oslava výhry */
.vyhra { animation: vyskok .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes vyskok {
  from { transform: scale(.82); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.konfety { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.konfeta {
  position: absolute; top: -12vh;
  animation: padanie var(--trvanie) linear var(--odklad) forwards;
}
.konfeta i {
  display: block; width: var(--sirka); height: var(--vyska);
  background: var(--farba); border-radius: 1px;
  animation: hojdanie calc(var(--trvanie) / 4) ease-in-out var(--odklad) infinite alternate;
}
@keyframes padanie { to { transform: translateY(118vh); } }
@keyframes hojdanie {
  from { transform: translateX(-16px) rotate(0deg); }
  to   { transform: translateX(16px) rotate(260deg); }
}

/* ------------------------------------------------------------ modálne okná */
.okno {
  width: min(680px, calc(100vw - 32px)); max-height: min(78vh, 720px);
  padding: 0; border: 1px solid var(--ciara); border-radius: var(--polomer);
  background: var(--panel); color: var(--text); box-shadow: var(--tien);
  display: flex; flex-direction: column; overflow: hidden;
}
.okno.uzke { width: min(440px, calc(100vw - 32px)); }
.okno:not([open]) { display: none; }
.okno::backdrop { background: #0006; backdrop-filter: blur(3px); }
.okno-hlava {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 14px 16px; border-bottom: 1px solid var(--ciara);
}
.okno-hlava h3 { margin: 0; font-size: 1.02em; display: flex; align-items: center; gap: 9px; }
.okno-hlava .btn { margin-left: auto; }
.okno-telo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }
.okno-telo .stlpce { margin: 0; }
.okno-telo .cisla { margin: 0 0 14px; }

.stlpce { display: grid; grid-template-columns: 1fr; gap: 16px; }
table { width: 100%; border-collapse: collapse; font-size: .92em; }
td { padding: 6px 0; border-bottom: 1px solid var(--ciara-jemna); vertical-align: top; color: var(--jemne); }
td:first-child { color: var(--text); }
td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
tr.spolu td { font-weight: 700; border-bottom: none; color: var(--text); }
.cashflow-riadok {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding: 12px 14px; background: var(--pozadie-2); border-radius: var(--polomer-maly);
  font-variant-numeric: tabular-nums;
}
.banka label { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* ------------------------------------------------------------ veľký okruh */
.velky-vykaz { margin: 0 0 16px; }

/* výber sna */
.sny { display: grid; gap: 8px; margin: 14px 0; }
.sen-volba {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel-2); border: 1px solid var(--ciara); border-radius: var(--polomer-maly);
  padding: 10px 12px; transition: border-color .12s, background .12s;
}
.sen-volba:hover { border-color: #e5b53f66; background: #2a1e0940; }
.sen-volba small { display: block; margin-top: 2px; }
.sen-volba .btn { white-space: nowrap; font-variant-numeric: tabular-nums; }


/* ------------------------------------------------------------ rozloženie */
@media (min-width: 560px) {
  .kroky-hry { grid-template-columns: repeat(3, 1fr); }
  .stlpce { grid-template-columns: 1fr 1fr; }
}
/* Ovládanie leží v strede hracieho plánu – rovnako na všetkých šírkach. */
.plocha { position: relative; }
.stred {
  /* Presný okraj stredu mriežky 7x7: padding plánu + jedno políčko + medzera.
     Políčko je (100% - 2*padding - 6*medzier) / 7. Plus 4px, aby sa panel
     políčok ani nedotkol. Percento samo o sebe (14,3 %) na ne zasahovalo. */
  --okraj-stredu: calc(18px + (100% - 52px) / 7);
  position: absolute;
  top: var(--okraj-stredu); bottom: var(--okraj-stredu);
  left: var(--okraj-stredu); right: var(--okraj-stredu);
  margin: 0 auto; max-width: 580px;
}

@media (min-width: 900px) {
  /* celá hra sa zmestí na obrazovku, takže netreba lepivú lištu ani zvislý posuvník */
  body:has(.stol) { overflow-y: hidden; }
  body:has(.stol) .hlavicka { position: static; }
}

/* Úzke obrazovky: rovnaké rozloženie ako na širokej – plán cez celú šírku
   a ovládanie v jeho strede. Karty hráčov sa vedľa neho nezmestia, preto sú
   preč a ich tlačidlá sedia pod plánom. */
@media (max-width: 899px) {
  html { font-size: 13px; }
  /* pevná výška, nie min-height: inak kontajner narastie podľa obsahu
     a položky sa nemajú podľa čoho zmenšiť */
  body:has(.stol) {
    display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
  }
  /* Reťaz main > #hra > .stol musí byť celá flexová, inak sa výška nikde
     neobmedzí a hra pretečie pod spodný okraj displeja. */
  body:has(.stol) main, #hra:has(.stol) { display: flex; flex-direction: column;
                                          flex: 1 1 auto; min-height: 0; min-width: 0; }
  /* margin: 0 auto zo základného štýlu vypne roztiahnutie flex položky do šírky
     (auto okraje v priečnej osi majú prednosť pred stretch) a main sa potom
     zmenší na obsah a pretečie do strany. Preto tu okraje rušíme. */
  body:has(.stol) main { padding: 8px; margin: 0; width: 100%; }

  /* min-width: 0 všade v reťazi – bez neho automatická minimálna veľkosť
     flex položky roztiahne hru do šírky a stránka pretečie do strany */
  .stol { flex-direction: column; align-items: center; justify-content: center;
          gap: 8px; flex: 1 1 auto; min-height: 0; min-width: 0; height: auto; }

  /* Plán je štvorec cez celú šírku. Keď by sa na výšku nezmestil, obmedzí ho
     zvyšok obrazovky – lišta, odsadenia a riadok tlačidiel pod plánom. */
  .plocha { flex: 0 1 auto; min-height: 0; min-width: 0; width: 100%; }
  .plan {
    height: auto; width: min(100%, calc(100dvh - 170px)); max-width: 100%;
    margin: 0 auto; aspect-ratio: 1; gap: 4px; padding: 5px;
    /* Políčka sú o 15 % menšie ako sedmina plánu a zostávajú štvorcové –
       uvoľnené miesto sa rozdelí do medzier (space-between), nie do stôp,
       inak by sa dlaždice v hornom a dolnom rade roztiahli do šírky.
       100 % je tu vnútro plánu, takže sa odpočítava len 6 medzier. */
    --stopa: calc((100% - 24px) * .85 / 7);
    grid-template-columns: repeat(7, var(--stopa));
    grid-template-rows: repeat(7, var(--stopa));
    justify-content: space-between; align-content: space-between;
  }
  /* Okraj stredu: padding (5) + políčko + 6 px, aby sa panel políčok ani
     nedotkol. Rozšírená medzera sa sem nepripočítava – vnútro mriežky je
     prázdne, takže panel môže začať hneď za prvým radom dlaždíc. */
  .stred {
    --stopa: calc((100% - 10px - 24px) * .85 / 7);
    --okraj-stredu: calc(11px + var(--stopa));
  }
  /* názvy políčok sú pri tejto veľkosti nečitateľné, zostanú väčšie ikony */
  .policko .nazov { display: none; }
  .policko .ikona { font-size: clamp(16px, 7cqmin, 44px); }

  .hraci-pruh { display: none; }
  .akcie-pod-planom { display: flex; }

  /* Stred plánu je na telefóne malý, preto je všetko v ňom útlejšie.
     Obsah kariet zostáva celý, ubúdajú len odsadenia a veľkosti písma. */
  .stred { padding: 8px 9px; }
  .stred-hlava { min-height: 0; gap: 7px; padding-bottom: 5px; }
  .okruh, .kolo { font-size: .72rem; }
  .cas { font-size: .74rem; padding: 1px 7px; }
  .kocka, .kocka-tlacidlo { font-size: 26px; }
  .kocka.prazdna { font-size: 21px; }
  .akcia-hlavicky { padding: 2px 8px; font-size: .74rem; min-height: 28px; }

  .stred-telo .btn { padding: 6px 11px; min-height: 32px; font-size: .88em; }
  .stred-telo .rad { gap: 6px; }

  .stred-telo .karta { padding: 7px 9px; margin: 6px 0; border-left-width: 3px; }
  .stred-telo .karta h3 { font-size: .97em; margin: .1em 0 .2em; line-height: 1.25; }
  .stred-telo .karta p { margin: .15em 0; font-size: .84em; line-height: 1.35; }
  .stred-telo .karta header .stitok { font-size: .62rem; letter-spacing: .06em; }
  .stred-telo .cisla { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 4px; margin: 6px 0 0; }
  .stred-telo .cisla div { padding: 3px 6px; border-radius: 7px; }
  .stred-telo .cisla dt { font-size: .6rem; letter-spacing: .05em; }
  .stred-telo .cisla dd { font-size: .88em; }
  .stred-telo > p { margin: .3em 0; font-size: .88em; }
  .stred-telo .jemne { font-size: .82em; }
  /* Pätička na dva stĺpce: vľavo meno a pod ním hotovosť, vpravo cashflow
     a pod ním pasívny príjem zarovnaný doprava. Stĺpcový tok plní najprv
     prvý stĺpec zhora nadol, takže poradie v šablóne sedí samo. */
  .stred-pata {
    display: grid; grid-auto-flow: column; grid-template-rows: auto auto;
    justify-content: space-between; align-items: baseline;
    padding-top: 5px; gap: 2px 10px;
  }
  .stred-pata > :nth-child(3), .stred-pata > :nth-child(4) { justify-self: end; }
  .posledne { margin-bottom: 5px; font-size: .78rem; }
  /* na úzkej obrazovke sa tri tlačidlá zmestia do riadka len skrátené */
  .dlhy-popis { display: none; }
}
/* Nízke displeje: na lištu a tlačidlá stačí menej miesta, plán dostane viac. */
@media (max-width: 899px) and (max-height: 620px) {
  .plan { width: min(100%, calc(100dvh - 120px)); }
}
@media (max-width: 460px) {
  /* na úzkych telefónoch ide profesia do druhého riadka */
  .hrac-riadok { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .hrac-riadok select { grid-column: 2 / -1; }
  main { padding: 12px 12px 40px; }
  .panel { padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}