/* ============================================================
   hry.css – herní koutek: rozcestník, desky, karty

   Drží se barev z style.css, aby hry vypadaly jako zbytek aplikace.
   Desky se počítají z šířky obrazovky, ať se vejdou i na malý telefon.
   ============================================================ */

/* ---------- společné ---------- */
.list-row{
  display:flex;align-items:center;gap:12px;width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:8px;color:var(--txt);text-align:left;
  font:inherit;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 20px -20px rgba(0,0,0,.95);
  transition:transform .12s ease,border-color .15s ease;
}
.list-row:not(:disabled):hover{transform:translateY(-1px);border-color:rgba(255,201,60,.4)}
.list-row .ico{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.list-row:disabled{cursor:default}
.list-row .ico{font-size:20px;min-width:26px;text-align:center}
.list-row .grow{flex:1;display:flex;flex-direction:column;min-width:0}
.list-row .grow small{color:var(--txt-dim);font-size:12px}
.list-row .chev{color:var(--txt-dim);font-size:20px}
.list-row.je-to-ja{
  border-color:rgba(255,201,60,.6);
  box-shadow:inset 0 0 0 1px rgba(255,201,60,.4),inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -16px rgba(255,201,60,.8);
}

.hra-tvuj-tah{color:var(--good);text-shadow:0 0 12px rgba(47,208,122,.5)}
.hra-elo{text-shadow:0 1px 0 rgba(0,0,0,.4)}

.hra-mrizka{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;
}
.hra-dlazdice{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;color:var(--txt);font:inherit;text-align:left;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 28px -22px rgba(0,0,0,.95);
  transition:transform .12s ease,border-color .12s ease,box-shadow .2s ease;
}
.hra-dlazdice:active{transform:scale(.97)}
.hra-dlazdice:hover{border-color:var(--zlata);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 32px -20px rgba(255,201,60,.55)}
.hra-ikona{filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.hra-dlazdice small{color:var(--txt-dim);font-size:12px}
.hra-dlazdice .hra-ikona{
  width:52px;height:52px;margin-bottom:6px;border-radius:16px;display:grid;place-items:center;font-size:28px;
  background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 16px -10px rgba(0,0,0,.9);
}
.hra-dlazdice.solo .hra-ikona{background:linear-gradient(160deg,#ffe28a,var(--zlata) 60%,var(--zlata-2));color:#2a1b00}
.hra-ikona{font-size:28px;line-height:1}
.hra-ikona.velka{
  width:70px;height:70px;border-radius:22px;display:grid;place-items:center;font-size:38px;flex:none;
  background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 20px -12px rgba(0,0,0,.9);
}
.hra-elo{
  margin-top:6px;font-size:12px;color:var(--zlata);font-weight:800;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}

.hra-hlavicka{
  display:flex;align-items:center;gap:14px;margin:10px 0 14px;padding:12px 14px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.hra-hlavicka h2{margin:0;font-size:20px}
.hra-hlavicka p{margin:2px 0 0}

.hra-volby{display:flex;flex-direction:column;gap:8px;margin-top:10px}

.hra-panel{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 14px;margin-bottom:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 24px -20px rgba(0,0,0,.95);
}
.hra-souper{display:flex;align-items:center;gap:10px}
.hra-souper small{display:block;color:var(--txt-dim);font-size:12px}
.hra-stav{font-size:13px;color:var(--txt-dim);text-align:right}
.hra-akce{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.hra-plocha{display:flex;flex-direction:column;align-items:center}
/* Stůl pod deskou: plsť, dřevěný rám, měkké světlo. Stejný jako v MincoCestě,
   takže šachy, dáma i Člověče vypadají, že leží na jednom herním stole. */
.hra-plocha>.sach-obal,.hra-plocha>.dama-deska,.hra-plocha>.cnz-deska,
.hra-plocha>.dama-lista~.dama-deska{
  --stul-lem:1;
}
.hra-stul{
  position:relative;padding:clamp(8px,2.5%,20px);border-radius:26px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:
    radial-gradient(115% 85% at 50% -10%, rgba(255,255,255,.13), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px),
    radial-gradient(120% 120% at 50% 40%, #245a44 0%, #143a29 55%, #0a2318 100%);
  box-shadow:
    inset 0 0 0 5px #4a2f16, inset 0 0 0 7px #7d4f26, inset 0 0 0 9px #b98247,
    inset 0 3px 0 10px rgba(255,255,255,.10), inset 0 0 70px rgba(0,0,0,.6),
    0 34px 70px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.06);
}
.hra-stul::after{content:'';position:absolute;inset:9px;border-radius:18px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hra-stul .hint,.hra-stul .prsi-zprava{color:#dfeee3}

.hra-vyuka h3{margin:18px 0 6px;font-size:16px}
.hra-vyuka ul,.hra-vyuka ol{margin:0;padding-left:20px}
.hra-vyuka li{margin-bottom:6px;line-height:1.45}
.hra-vyuka p{line-height:1.5}

/* ---------- Člověče, nezlob se ---------- */
.cnz-lista{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;min-height:40px;
}
.cnz-hrac{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);font-size:12px;font-weight:800;color:var(--txt-dim);flex:none;
}
.cnz-hrac.na-tahu{color:var(--txt);border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,176,32,.18)}
.cnz-hrac .cnz-token{width:16px;height:16px}
.cnz-zprava{font-size:13px;color:var(--txt);font-weight:700;text-align:center;flex:1;min-width:0}

.cnz-deska{
  position:relative;
  display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);
  gap:2px;width:min(100%,440px);aspect-ratio:1;container-type:inline-size;margin:0 auto;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.08),transparent 45%),
    linear-gradient(160deg,#f6e7c8,#e8cf9f);
  border:5px solid #6b451f;border-radius:18px;padding:7px;
  box-shadow:0 0 0 2px #b98247, 0 22px 44px -18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.4);
}
.cnz-bunka{
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(0,0,0,.05);position:relative;
}
.cnz-bunka.draha{background:#fff9ec;box-shadow:inset 0 0 0 1.5px rgba(120,80,20,.28), 0 1px 0 rgba(255,255,255,.7)}
.cnz-bunka.start0{background:#ff6b6b;box-shadow:inset 0 0 0 2px #c62828}
.cnz-bunka.start1{background:#5aa9ff;box-shadow:inset 0 0 0 2px #1565c0}
.cnz-bunka.cil.c0,.cnz-bunka.domecek.c0{background:rgba(255,92,92,.28);box-shadow:inset 0 0 0 1.5px rgba(198,40,40,.55)}
.cnz-bunka.cil.c1,.cnz-bunka.domecek.c1{background:rgba(90,169,255,.28);box-shadow:inset 0 0 0 1.5px rgba(21,101,192,.55)}

/* figurka = barevný kámen s odleskem, kulatý jako ve skutečné hře */
.cnz-figurka{
  width:100%;height:100%;border:0;background:none;padding:0;cursor:default;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.cnz-token{
  display:block;width:78%;height:78%;border-radius:50%;
  box-shadow:0 2px 3px rgba(0,0,0,.45), inset 0 -3px 4px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.55);
}
.cnz-token.cerveny{background:radial-gradient(circle at 35% 30%,#ff9a9a,#e53935 55%,#a51d1d)}
.cnz-token.modry{background:radial-gradient(circle at 35% 30%,#a5d3ff,#1e88e5 55%,#0d47a1)}
.cnz-figurka.cerveny .cnz-token{background:radial-gradient(circle at 35% 30%,#ff9a9a,#e53935 55%,#a51d1d)}
.cnz-figurka.modry .cnz-token{background:radial-gradient(circle at 35% 30%,#a5d3ff,#1e88e5 55%,#0d47a1)}
.cnz-figurka.hratelna{cursor:pointer}
.cnz-figurka.hratelna .cnz-token{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--accent), 0 3px 6px rgba(0,0,0,.45);
  animation:cnzPulz 1s ease-in-out infinite;
}
.cnz-figurka:active .cnz-token{transform:scale(.9)}
@keyframes cnzPulz{50%{transform:scale(1.15)}}

/* kostka uprostřed desky */
.cnz-stred{display:flex;align-items:center;justify-content:center}
.cnz-hod{
  border:0;background:none;padding:0;cursor:default;width:86%;height:86%;
  display:flex;align-items:center;justify-content:center;border-radius:22%;
}
.cnz-hod.muze{cursor:pointer}
.cnz-hod.muze .cnz-kostka{animation:cnzLaka 1.6s ease-in-out infinite}
@keyframes cnzLaka{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.06)}}
.cnz-kostka{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  width:100%;height:100%;padding:12%;border-radius:22%;
  background:linear-gradient(145deg,#ffffff,#e6e6ee);
  box-shadow:0 8px 16px -6px rgba(0,0,0,.6), inset 0 -4px 6px rgba(0,0,0,.12), inset 0 2px 4px rgba(255,255,255,.9);
}
.cnz-kostka i{display:block;border-radius:50%;background:#20223a;opacity:0;margin:auto;width:70%;height:70%}
.cnz-kostka.prazdna i{opacity:.12}
/* stěny: 1 střed, 2 rohy, 3 úhlopříčka, 4 rohy, 5 rohy + střed, 6 dva sloupce */
.cnz-kostka[data-v="1"] i:nth-child(5),
.cnz-kostka[data-v="2"] i:nth-child(3),.cnz-kostka[data-v="2"] i:nth-child(7),
.cnz-kostka[data-v="3"] i:nth-child(3),.cnz-kostka[data-v="3"] i:nth-child(5),.cnz-kostka[data-v="3"] i:nth-child(7),
.cnz-kostka[data-v="4"] i:nth-child(1),.cnz-kostka[data-v="4"] i:nth-child(3),.cnz-kostka[data-v="4"] i:nth-child(7),.cnz-kostka[data-v="4"] i:nth-child(9),
.cnz-kostka[data-v="5"] i:nth-child(1),.cnz-kostka[data-v="5"] i:nth-child(3),.cnz-kostka[data-v="5"] i:nth-child(5),.cnz-kostka[data-v="5"] i:nth-child(7),.cnz-kostka[data-v="5"] i:nth-child(9),
.cnz-kostka[data-v="6"] i:nth-child(1),.cnz-kostka[data-v="6"] i:nth-child(3),.cnz-kostka[data-v="6"] i:nth-child(4),.cnz-kostka[data-v="6"] i:nth-child(6),.cnz-kostka[data-v="6"] i:nth-child(7),.cnz-kostka[data-v="6"] i:nth-child(9){opacity:1}
.cnz-kostka.hazi{animation:cnzToci .7s linear infinite}
@keyframes cnzToci{
  0%{transform:rotate(0) scale(1)}
  25%{transform:rotate(90deg) scale(1.12) translateY(-6%)}
  50%{transform:rotate(180deg) scale(1)}
  75%{transform:rotate(270deg) scale(1.12) translateY(-6%)}
  100%{transform:rotate(360deg) scale(1)}
}
.cnz-kostka.dopadla{animation:cnzDopad .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes cnzDopad{0%{transform:scale(1.3) rotate(-8deg)}100%{transform:scale(1) rotate(0)}}
.cnz-deska.na-tahu-0 .cnz-bunka.start0,.cnz-deska.na-tahu-1 .cnz-bunka.start1{box-shadow:inset 0 0 0 2px #fff, 0 0 0 3px var(--accent)}
.cnz-bunka.cilove{box-shadow:inset 0 0 0 3px var(--accent), 0 0 12px rgba(255,176,32,.7);animation:cnzCil 1s ease-in-out infinite}
.cnz-bunka.cilove.vyhodit{box-shadow:inset 0 0 0 3px var(--bad), 0 0 12px rgba(255,92,122,.8)}
@keyframes cnzCil{50%{box-shadow:inset 0 0 0 3px var(--accent), 0 0 4px rgba(255,176,32,.3)}}
.cnz-duch{position:absolute;left:0;top:0;z-index:5;pointer-events:none;will-change:transform}
.cnz-duch.hop{filter:drop-shadow(0 8px 6px rgba(0,0,0,.4))}
.cnz-figurka.dopad .cnz-token{animation:cnzDopadFig .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes cnzDopadFig{0%{transform:scale(1.35)}100%{transform:scale(1)}}
.cnz-bum{position:absolute;inset:0;display:grid;place-items:center;font-size:5cqw;z-index:6;pointer-events:none;animation:cnzBum .9s ease-out forwards}
@keyframes cnzBum{0%{transform:scale(.4);opacity:1}60%{transform:scale(1.6);opacity:1}100%{transform:scale(2.2);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .cnz-hod.muze .cnz-kostka,.cnz-figurka.hratelna .cnz-token{animation:none}
}

/* ---------- dáma ---------- */
.dama-deska,.sach-deska{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);   /* bez toho se řádky roztahují podle figurek */
  /* 100 % šířky obsahu, ne obrazovky – jinak deska přeteče přes okraje na mobilu */
  width:min(100%,440px);aspect-ratio:1;
  container-type:inline-size;   /* aby se velikost figurek počítala z desky */
  border-radius:12px;overflow:hidden;border:1px solid var(--line);
}
.dama-pole,.sach-pole{
  display:flex;align-items:center;justify-content:center;
  border:0;padding:0;font:inherit;cursor:default;position:relative;
  aspect-ratio:1;min-width:0;min-height:0;overflow:visible;
}
.dama-pole.svetle,.sach-pole.svetle{background:#efe4c8}
.dama-pole.tmave,.sach-pole.tmave{background:#a0703f}
.dama-deska,.sach-deska{
  border:5px solid #6b451f;
  box-shadow:
    0 0 0 2px #b98247, 0 22px 44px -18px rgba(0,0,0,.9),
    inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 40px rgba(0,0,0,.35);
}
/* souřadnice v rohu krajních polí – po vzoru opravdové desky */
.sach-pole[data-rada]::before,.dama-pole[data-rada]::before{
  content:attr(data-rada);position:absolute;left:2px;top:1px;font-size:2.4cqw;font-weight:800;opacity:.55;pointer-events:none;
}
.sach-pole[data-sloupec]::after,.dama-pole[data-sloupec]::after{
  content:attr(data-sloupec);position:absolute;right:2px;bottom:0;font-size:2.4cqw;font-weight:800;opacity:.55;pointer-events:none;
}
.sach-pole.svetle::before,.sach-pole.svetle::after,.dama-pole.svetle::before,.dama-pole.svetle::after{color:#7a5230}
.sach-pole.tmave::before,.sach-pole.tmave::after,.dama-pole.tmave::before,.dama-pole.tmave::after{color:#f3e6cc}
.dama-pole:not(:disabled),.sach-pole:not(:disabled){cursor:pointer}
.dama-pole.vybrane,.sach-pole.vybrane{box-shadow:inset 0 0 0 3px var(--accent)}
.dama-pole.muze .dama-kamen{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--accent),0 3px 6px rgba(0,0,0,.5)}
.dama-pole.cil::after,.sach-pole.cil::after{
  content:'' !important;position:static;width:26%;height:26%;border-radius:50%;background:rgba(47,208,122,.75);
  box-shadow:0 0 0 3px rgba(47,208,122,.25);animation:cilPulz 1.2s ease-in-out infinite;
}
@keyframes cilPulz{50%{transform:scale(1.25)}}
.dama-pole.posledni,.sach-pole.posledni{background-image:linear-gradient(rgba(255,176,32,.32),rgba(255,176,32,.32))}
.dama-pole.napoveda{box-shadow:inset 0 0 0 3px var(--info)}
.sach-pole.ohrozena::after{
  content:'';position:absolute;right:6%;top:6%;width:16%;height:16%;border-radius:50%;
  background:var(--bad);box-shadow:0 0 0 2px #fff;z-index:3;
}
.sach-pole.brani{box-shadow:inset 0 0 0 3px rgba(255,92,122,.9)}
.sach-pole.sach{box-shadow:inset 0 0 0 3px var(--bad)}
.sach-pole.posledni{background-image:linear-gradient(rgba(255,176,32,.28),rgba(255,176,32,.28))}
.sach-pole.napoveda{box-shadow:inset 0 0 0 3px var(--info)}

.dama-kamen{
  width:76%;height:76%;border-radius:50%;position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;font-size:5.5cqw;line-height:1;
  box-shadow:0 3px 5px rgba(0,0,0,.5), inset 0 -4px 6px rgba(0,0,0,.28), inset 0 3px 4px rgba(255,255,255,.55);
}
.dama-kamen::before{content:'';position:absolute;inset:18%;border-radius:50%;border:1.5px solid rgba(0,0,0,.18)}
.dama-kamen.svetly{background:radial-gradient(circle at 35% 30%,#fffdf5,#e8dcc0 60%,#c9b892)}
.dama-kamen.tmavy{background:radial-gradient(circle at 35% 30%,#6a5a80,#2a2135 60%,#151020)}
.dama-kamen.je-dama{box-shadow:0 0 0 2px var(--accent), 0 3px 5px rgba(0,0,0,.5), inset 0 -4px 6px rgba(0,0,0,.28)}
.dama-kamen i{font-style:normal;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.dama-kamen.mini{width:18px;height:18px;font-size:10px;display:inline-flex;vertical-align:middle;margin-right:6px}
.dama-kamen.mini::before{display:none}
.dama-lista{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:8px;width:min(100%,440px)}
.dama-hrac{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;border:1px solid var(--line);font-weight:800;font-size:14px;color:var(--txt-dim)}
.dama-hrac.na-tahu{color:var(--txt);border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,176,32,.18)}
.dama-hrac small{font-size:11px;font-weight:700;margin-left:6px;color:var(--accent)}
.dama-vs{color:var(--txt-dim);font-weight:800}
.dama-bum{position:absolute;inset:0;display:grid;place-items:center;font-size:6cqw;z-index:6;pointer-events:none;animation:cnzBum .7s ease-out forwards}

/* ---------- šachy ---------- */
.sach-obal{width:min(100%,440px);margin:0 auto}
.sach-fig{
  /* figurka se měří z desky, ne z obrazovky. První řádek je záloha
     pro prohlížeče, které neznají jednotky kontejneru. */
  font-size:min(9vw,38px);
  font-size:9.7cqw;
  line-height:1;pointer-events:none;display:inline-block;position:relative;z-index:2;will-change:transform;
}
.sach-fig.bila{color:#fff;text-shadow:0 1px 0 #999, 0 3px 4px rgba(0,0,0,.6)}
.sach-fig.cerna{color:#15121c;text-shadow:0 1px 0 #444, 0 3px 4px rgba(0,0,0,.5)}
/* Kreslená figurka. Měří se z desky jako znak, aby seděla i na malém telefonu;
   první řádek je záloha pro prohlížeče bez jednotek kontejneru. Obrázek má
   vlastní tmavý obrys, takže mu stačí měkký stín pod nohy. */
.sach-obr{
  display:block;width:min(10vw,42px);width:10.6cqw;height:auto;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
.sach-mini{width:19px;height:19px;object-fit:contain;vertical-align:-4px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.sach-sebrane .sach-mini{margin-right:-3px}
.chip-fig{display:inline-flex;align-items:center;gap:6px}
.chip-fig .sach-mini{width:24px;height:24px;vertical-align:0}
.sach-pravidlo{margin-bottom:6px}
.sach-pravidlo .sach-mini{width:26px;height:26px;vertical-align:-7px;margin-right:2px}
.sach-pole.vybrane .sach-fig{transform:scale(1.12)}
.sach-lista{display:flex;align-items:center;gap:8px;min-height:26px;padding:2px 6px;font-size:16px;line-height:1}
.sach-sebrane{display:inline-flex;align-items:center;opacity:.9}
.sach-plus{font-size:12px;color:var(--good);letter-spacing:0}
.sach-hlaska{animation:sachHlaska .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes sachHlaska{0%{transform:scale(.6);opacity:0}}

/* ---------- Prší ---------- */
.prsi-stul{
  width:100%;max-width:460px;margin:0 auto;padding:12px 8px 14px;border-radius:22px;
  background:
    radial-gradient(115% 85% at 50% -10%, rgba(255,255,255,.12), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 5px),
    radial-gradient(120% 120% at 50% 40%, #245a44 0%, #143a29 55%, #0a2318 100%);
  border:0;
  box-shadow:
    inset 0 0 0 5px #4a2f16, inset 0 0 0 7px #7d4f26, inset 0 0 0 9px #b98247,
    inset 0 3px 0 10px rgba(255,255,255,.10), inset 0 0 70px rgba(0,0,0,.6),
    0 34px 70px rgba(0,0,0,.55);
}
.prsi-souper{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px}
.prsi-pocet{font-size:12px;color:#e6f5ea;font-weight:700}
.prsi-rub{position:relative;width:100%;height:48px}
.prsi-rub .prsi-karta.rub{
  position:absolute;left:50%;top:0;width:30px;height:44px;
  transform:translateX(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * 14px)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 4deg));
}
.prsi-stred{display:flex;align-items:flex-start;justify-content:center;gap:28px;margin:10px 0 6px}
.prsi-balik,.prsi-odhoz{display:flex;flex-direction:column;align-items:center;gap:6px}
.prsi-balik small,.prsi-odhoz small{font-size:11px;color:#dfeee3}
.prsi-barva-hlaska{font-weight:800;color:#fff !important}
.prsi-hromadka{position:relative;width:64px;height:92px}
.prsi-hromadka .prsi-karta{position:absolute;left:0;top:0}
.prsi-hromadka .vrstva0{transform:rotate(-7deg)}
.prsi-hromadka .vrstva1{transform:rotate(4deg)}
.prsi-hromadka .vrstva2{transform:rotate(-1deg)}
.prsi-hromadka .prsi-karta:only-child{transform:none}
.prsi-karta.prilet{animation:prsiPrilet .38s cubic-bezier(.2,.9,.3,1.1)}
@keyframes prsiPrilet{from{transform:translateY(130px) rotate(16deg) scale(.7);opacity:0}}
.prsi-karta{
  width:64px;height:92px;border-radius:9px;border:1px solid #cfc6b1;position:relative;
  background:linear-gradient(160deg,#fffdf6,#f1ecdc);
  display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;
  font:inherit;font-weight:900;cursor:default;padding:4px 5px;color:#222;box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.prsi-karta.cervena{color:#d1344f}
.prsi-karta.cerna{color:#1c1c28}
.prsi-roh{display:flex;flex-direction:column;align-items:flex-start;font-size:13px;line-height:1;gap:1px}
.prsi-roh i{font-style:normal;font-size:12px}
.prsi-roh.dole{align-self:flex-end;transform:rotate(180deg)}
.prsi-stred-znak{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;pointer-events:none}
.prsi-karta.rub{
  width:40px;height:58px;padding:0;border:2px solid #fff;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.28) 0 5px,transparent 6px),
    repeating-linear-gradient(45deg,var(--brand),var(--brand) 6px,var(--brand-2) 6px,var(--brand-2) 12px);
}
.prsi-karta.rub.velky{width:56px;height:82px}
.prsi-ruka{display:flex;justify-content:center;align-items:flex-end;margin:14px 0 4px;min-height:112px;padding-top:12px}
.prsi-ruka .prsi-karta{
  margin:0 -10px;transform-origin:50% 140%;transform:rotate(var(--r,0deg));
  transition:transform .15s ease,box-shadow .15s ease;
}
.prsi-ruka .prsi-karta.hratelna{
  cursor:pointer;box-shadow:0 0 0 3px var(--good), 0 8px 16px rgba(0,0,0,.4);
  transform:rotate(var(--r,0deg)) translateY(-14px);z-index:2;
}
.prsi-ruka .prsi-karta.hratelna:active{transform:rotate(var(--r,0deg)) translateY(-26px) scale(1.06)}
.prsi-ruka .prsi-karta:disabled:not(.hratelna){filter:brightness(.8)}
.prsi-karta.lizla{animation:prsiLizla .45s cubic-bezier(.2,.9,.3,1.1)}
@keyframes prsiLizla{from{transform:translateY(-150px) scale(.6);opacity:0}}
.prsi-ruka.posledni .prsi-karta{animation:prsiPosledni 1s ease-in-out infinite}
@keyframes prsiPosledni{50%{box-shadow:0 0 0 4px var(--accent), 0 0 24px var(--accent)}}
.prsi-barvy{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 10px}
.prsi-volba{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:24px;line-height:1;padding:8px 14px;background:#fffdf6;border-color:#cfc6b1}
.prsi-volba small{font-size:11px;color:#333;font-weight:700}
.prsi-volba.cervena{color:#d1344f}
.prsi-volba.cerna{color:#1c1c28}
.prsi-hlaska{text-align:center;font-weight:800;color:var(--accent);margin:8px 0;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.prsi-zprava{text-align:center;color:#e6f5ea;margin:4px 0}

@media (max-width:380px){
  .prsi-karta{width:54px;height:78px}
  .prsi-stred-znak{font-size:24px}
  .prsi-ruka .prsi-karta{margin:0 -12px}
}

/* S hrami je v liště sedm položek – na úzkém telefonu potřebují
   míň místa, aby se popisky nezalamovaly. */
@media (max-width:430px){
  .tabbar{gap:0;padding-left:2px;padding-right:2px}
  .tab-btn{font-size:8.5px;padding:6px 1px;letter-spacing:-.3px}
  .tab-btn i{font-size:17px}
}

/* ============================================================
   Šachová školka – učení hrou

   Mapa úkolů, hvězdičky za splnění a deska, na které se sbírá.
   Deska si bere vzhled od šachů, ať dítě hraje pořád na tom samém.
   ============================================================ */
.sk-hlava{display:flex;align-items:center;gap:14px;margin:10px 0 14px}
.sk-hlava h2{margin:0;font-size:20px}
.sk-hlava p{margin:2px 0 0}
.sk-ikona{font-size:38px;line-height:1}
.sk-ikona .sk-obr{width:44px;height:44px;object-fit:contain;display:block}
.sk-fig .sk-obr{width:32px;height:32px;object-fit:contain;display:block}

.sk-mrizka{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:6px}
.sk-dlazdice{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px;color:var(--txt);font:inherit;font-size:13px;text-align:left;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 20px -20px rgba(0,0,0,.95);
  transition:transform .12s ease,border-color .12s ease,box-shadow .2s ease;
}
.sk-dlazdice:active{transform:scale(.97)}
.sk-dlazdice:hover{border-color:rgba(255,201,60,.5)}
.sk-dlazdice.hotovo{
  border-color:rgba(47,208,122,.55);
  background:linear-gradient(180deg,rgba(47,208,122,.14),rgba(255,255,255,.02));
}
.sk-fig{filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.sk-hvezdicky{letter-spacing:2px;font-size:15px}
.sk-hvezdicky .plna,.sk-hotovo .plna{color:var(--accent)}
.sk-hvezdicky .prazdna,.sk-hotovo .prazdna{color:rgba(255,255,255,.18)}

.sk-rada{
  margin:0 0 12px;padding:10px 14px;border-radius:var(--radius-sm);
  background:linear-gradient(180deg,rgba(58,200,255,.18),rgba(58,200,255,.06));
  border:1px solid rgba(58,200,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  font-size:14px;line-height:1.45;
}
.sk-deska{margin:0 auto}
.sk-hvezda{
  position:absolute;font-size:min(6vw,26px);color:var(--accent);
  text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none;
  animation:skHvezda 1.6s ease-in-out infinite;
}
@keyframes skHvezda{50%{transform:scale(1.18) rotate(8deg)}}

.sk-hotovo{
  margin-top:14px;text-align:center;padding:14px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(47,208,122,.2),rgba(47,208,122,.05));
  border:1px solid rgba(47,208,122,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.sk-hotovo b{text-shadow:0 0 14px rgba(255,201,60,.7)}
.sk-hotovo b{font-size:30px;letter-spacing:4px}
.sk-hotovo p{margin:6px 0 12px;font-weight:700}

/* ---------- trenér, ukázka tahu a navádění ---------- */
.sk-hlas{margin-left:auto}
.sk-fig{font-size:26px;line-height:1}

.sk-trener{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:12px 14px;
  background:linear-gradient(180deg,rgba(58,200,255,.18),rgba(58,200,255,.05));
  border:1px solid rgba(58,200,255,.35);border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.sk-trener-ikona{font-size:30px;line-height:1;animation:skTrener 3s ease-in-out infinite}
@keyframes skTrener{50%{transform:translateY(-3px) rotate(-5deg)}}
.sk-trener p{margin:0;flex:1;font-size:14px;line-height:1.45}
.sk-znovu-rici{padding:4px 9px}

/* Ukázka: figura se sama projede po desce. Duch je obyčejný text nad
   deskou, který se posouvá – deska pod ním zůstává beze změny. */
.sk-plocha{position:relative;width:min(100%,440px);margin:0 auto}
.sk-duch{
  position:absolute;left:0;top:0;pointer-events:none;z-index:5;
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.65);will-change:transform;
}

.sach-pole.sk-svitici{animation:skSviti 1.4s ease-in-out infinite}
@keyframes skSviti{
  0%,100%{box-shadow:inset 0 0 0 3px var(--accent)}
  50%{box-shadow:inset 0 0 0 6px var(--accent)}
}
.sach-pole.sk-cilove{box-shadow:inset 0 0 0 3px var(--good)}
.sk-terc{
  position:absolute;font-size:min(7vw,30px);color:var(--good);pointer-events:none;
  animation:skTerc 1.3s ease-in-out infinite;
}
@keyframes skTerc{50%{transform:scale(1.28)}}

/* ============================================================
   Hry na jednoho (bývaly u mazlíčka)
   ============================================================ */
.hra-dlazdice.solo{background:linear-gradient(160deg,var(--card),var(--card-2))}
.solo-stav b{font-size:22px;color:var(--accent)}
.solo-plocha{width:100%}

/* ---------- Chytej dobroty ---------- */
.dob-hlava{display:flex;align-items:center;gap:10px;width:100%;max-width:440px;margin:0 auto 8px}
.dob-cas{flex:1;height:12px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.dob-cas i{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--good),var(--accent));transition:width .2s linear}
.dob-cas i.dochazi{background:linear-gradient(90deg,var(--bad),var(--accent));animation:dobBlik .5s steps(2) infinite}
@keyframes dobBlik{50%{opacity:.55}}
.dob-kombo{font-size:12px;font-weight:800;color:var(--txt-dim);min-width:64px;text-align:right}
.dob-kombo.hori{color:var(--accent);animation:dobHori .6s ease-in-out infinite alternate}
@keyframes dobHori{to{transform:scale(1.12)}}
.dob-plocha{
  position:relative;width:100%;max-width:440px;margin:0 auto;height:min(62vh,460px);
  border-radius:var(--radius);border:2px solid rgba(255,255,255,.25);overflow:hidden;
  background:linear-gradient(180deg,#5db2ff 0%,#a9dcff 58%,#c9ecff 72%,#c9ecff 72%);
  box-shadow:0 18px 34px -20px rgba(0,0,0,.8);touch-action:manipulation;user-select:none;
}
.dob-plocha.otres{animation:dobOtres .35s ease}
@keyframes dobOtres{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.dob-slunce{
  position:absolute;right:8%;top:6%;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle,#fff6b0,#ffd23d 60%,rgba(255,210,61,0) 62%);
  box-shadow:0 0 40px 18px rgba(255,220,90,.45);animation:dobSlunce 6s ease-in-out infinite;
}
@keyframes dobSlunce{50%{transform:scale(1.08)}}
.dob-mrak{position:absolute;font-size:44px;opacity:.9;filter:drop-shadow(0 4px 4px rgba(0,0,0,.08));animation:dobMrak linear infinite}
.dob-mrak.m1{top:10%;left:-20%;animation-duration:26s}
.dob-mrak.m2{top:26%;left:-20%;animation-duration:38s;animation-delay:-14s;font-size:34px}
@keyframes dobMrak{to{left:110%}}
.dob-trava{
  position:absolute;left:0;right:0;bottom:0;height:24%;
  background:radial-gradient(ellipse at 50% 100%,#8fdf6c,#57b34d 70%);
  border-top:4px solid rgba(255,255,255,.35);
}
.dob-trava::after{
  content:'🌼 🌷 🌱 🌸 🍀 🌼 🌻';position:absolute;left:0;right:0;bottom:8px;
  text-align:center;font-size:20px;letter-spacing:12px;opacity:.9;
}
.dob-kos{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);font-size:54px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3));pointer-events:none}
.dob-vec{
  position:absolute;top:-14%;border:0;background:none;padding:6px;cursor:pointer;
  font-size:38px;line-height:1;animation:dobPad linear forwards;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.28));touch-action:manipulation;
  transform:rotate(var(--otoc,0deg));
}
.dob-vec.spatna{filter:grayscale(.15) drop-shadow(0 4px 3px rgba(0,0,0,.35))}
.dob-vec.bonus{animation:dobPad linear forwards,dobHvezda .6s ease-in-out infinite alternate;font-size:44px}
@keyframes dobHvezda{to{filter:drop-shadow(0 0 14px #ffd23d)}}
.dob-vec.cas{font-size:34px}
.dob-vec.chyceno{animation:dobChyt .26s ease forwards}
.dob-vec.bum{animation:dobBum .26s ease forwards}
@keyframes dobPad{to{top:104%}}
@keyframes dobChyt{to{transform:scale(1.9) rotate(var(--otoc,0deg));opacity:0}}
@keyframes dobBum{50%{transform:scale(1.6) rotate(20deg);filter:brightness(2)}100%{transform:scale(.2);opacity:0}}
.dob-pop{
  position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:22px;color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.5);pointer-events:none;animation:dobPop .8s ease-out forwards;z-index:3;
}
.dob-pop.zle{color:#ffb3c1}
.dob-pop.bonus{color:#ffe266;font-size:28px}
.dob-pop.cas{color:#bdf6ff}
@keyframes dobPop{to{transform:translate(-50%,-160%) scale(1.25);opacity:0}}
.dob-napoveda{text-align:center;max-width:440px;margin:8px auto 0}

/* ---------- Zopakuj po mně ---------- */
.zop-hlava{display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(100%,340px);margin:0 auto 12px}
.zop-hlava b{font-size:18px;color:var(--accent)}
.zop-mrizka{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:min(100%,340px);margin:0 auto}
.zop-pad{
  aspect-ratio:1;border-radius:26px;border:0;cursor:pointer;opacity:.62;padding:0;
  display:grid;place-items:center;font-size:min(16vw,64px);
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.22), 0 6px 14px -6px rgba(0,0,0,.6);
  transition:opacity .12s ease,transform .1s ease,box-shadow .1s ease;touch-action:manipulation;
}
.zop-pad span{filter:drop-shadow(0 3px 3px rgba(0,0,0,.35));transition:transform .12s ease}
.zop-pad:disabled{cursor:default}
.zop-pad:not(:disabled):active{transform:translateY(4px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.zop-pad.sviti{opacity:1;transform:scale(1.06);box-shadow:inset 0 -8px 0 rgba(0,0,0,.22), 0 0 0 4px #fff, 0 0 26px rgba(255,255,255,.7)}
.zop-pad.sviti span{transform:scale(1.2)}
.zop-pad.spravny{opacity:1;animation:zopSpravny .5s ease 3}
@keyframes zopSpravny{50%{transform:scale(1.1);box-shadow:0 0 0 4px var(--good), 0 0 26px var(--good)}}
.zop-pad.z0{background:linear-gradient(160deg,#ff8aa1,#ff3d67)}
.zop-pad.z1{background:linear-gradient(160deg,#7fe0ff,#1eaee6)}
.zop-pad.z2{background:linear-gradient(160deg,#8ff0b5,#1fb85f)}
.zop-pad.z3{background:linear-gradient(160deg,#ffd27a,#ff9a1f)}

/* ---------- dlaždice MincoCesty ----------
   Vlajková loď, tak dostane víc místa a zlatý rám. Sova je průvodce ze hry,
   takže je hned poznat, kam odkaz vede. */
.cesta-dlazdice{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:var(--radius);text-decoration:none;color:var(--txt);
  background:
    radial-gradient(80% 120% at 88% 0%, rgba(255,201,60,.28), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,201,60,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 16px 32px -22px rgba(255,201,60,.8);
  transition:transform .15s ease,box-shadow .2s ease;
}
.cesta-dlazdice:active{transform:scale(.985)}
.cesta-dlazdice:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 20px 38px -20px rgba(255,201,60,.95)}
/* lesk přejede dlaždici jako karta na desce */
.cesta-dlazdice::after{
  content:'';position:absolute;left:-40%;top:-60%;width:45%;height:220%;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);
  transform:rotate(8deg);animation:kartaLesk 6s ease-in-out 2s infinite;
}
.cesta-sova{
  width:62px;height:62px;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 40% 30%,rgba(255,255,255,.22),rgba(0,0,0,.25));
  box-shadow:inset 0 0 0 2px rgba(255,201,60,.55),0 8px 16px -10px rgba(0,0,0,.9);
}
.cesta-sova img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.cesta-text{flex:1;min-width:0;position:relative}
.cesta-text b{display:block;font-size:16px;letter-spacing:-.01em}
.cesta-text b i{font-style:normal;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--zlata);margin-left:6px}
.cesta-text small{display:block;font-size:12px;color:var(--txt-dim);line-height:1.45;margin-top:2px}
.cesta-dlazdice .chev{color:var(--zlata);font-size:22px;font-weight:900;flex:none;position:relative}