*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:#00ADE6;color:#1f2933;font-family:Georgia,"Times New Roman",serif}
button{font:inherit}
[hidden]{display:none!important}
#obal{width:min(96%,960px);margin:0 auto;padding:8px 0 18px}
#hlavicka{background-color:#FFF7E6;border:2px solid #333;padding:.4rem 1%;border-radius:10px;box-shadow:0 0 .3em rgba(0,0,0,.8);display:flex;justify-content:space-between;gap:.5rem}
#hlavicka .polozka{align-self:center;padding:0 1%}
#hlavicka .polozka:nth-child(2){flex:1;text-align:center}
#hlavicka .polozka.prazdna{width:60px;flex:0 0 60px}
#hlavicka img{display:block;max-width:60px;height:auto;vertical-align:middle}
#hlavicka h1{font-weight:normal;font-size:215%;margin:0;white-space:nowrap}
#ovladaci-radek{display:flex;min-height:44px;align-items:center;gap:.5rem;margin:.2rem 0 .3rem;padding:0 .25rem}
#popisek{color:#1f2933;font-size:135%;line-height:1.25;flex:1 1 auto;min-width:0}
#dalsi-sada{min-width:44px;min-height:44px;margin-left:.5rem;padding:.3rem .65rem;border:1px solid #333;border-radius:6px;background:#fff;color:#222;font-size:115%;line-height:1.1;white-space:nowrap;cursor:pointer}
#dalsi-sada:hover{background:#f5f5f5;border-color:#111}
#hlavicka a:focus-visible,#dalsi-sada:focus-visible,#dalsi-ukol:focus-visible,.karta:focus-visible,.ovladani button:focus-visible,.souhrn-akce button:focus-visible{outline:4px solid #6b4a2d;outline-offset:3px}
#cviceni-panel,#souhrn{background:#fff;border:2px solid #333;border-radius:10px;box-shadow:0 0 .3em rgba(0,0,0,.55);padding:12px}
#souhrn h2{margin:2px 0 12px;text-align:center;font-size:135%;font-weight:normal}
#cislovani{margin:0 0 4px;text-align:center;color:#47535d;font-size:100%}
.karty{display:flex;justify-content:center;align-items:stretch;align-content:flex-start;gap:10px;min-height:164px;padding:8px;border:2px dashed #8293a1;border-radius:9px;background:#f7fbfd}
.karty.prazdne::before{content:"Vybraná slova se zobrazí zde";align-self:center;color:#647482;font-size:105%}
.karty.bez-karet::before{content:"Všechna slova jsou v sestaveném pořadí";align-self:center;color:#647482;font-size:105%}
.karta{width:160px;min-height:132px;padding:7px;border:2px solid #52758a;border-radius:9px;background:#fff;color:#172b36;box-shadow:0 2px 4px rgba(0,0,0,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.karta:hover:not(:disabled){background:#fff8c7;border-color:#3b596b;transform:translateY(-1px)}
.karta img{width:100px;height:100px;object-fit:contain;border-radius:5px}
.karta span{font-size:125%;line-height:1.1;font-weight:bold}
.karta.spravne{background:#dff4d7;border-color:#338800}
.karta.chybne{background:#ffe0dc;border-color:#c63c2f}
.karta:disabled{cursor:default;opacity:1}
.sipka{margin:2px 0;text-align:center;color:#fff;font-size:0;line-height:1}
.sipka::after{content:"↓";color:#31566b;font-size:28px}
.ovladani,.souhrn-akce{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.ovladani button,.souhrn-akce button{min-height:44px;padding:8px 18px;border:2px solid #31566b;border-radius:7px;background:#fff;color:#172b36;font-size:115%;cursor:pointer}
.ovladani button#kontrola,.souhrn-akce #nove-procvicovani{background:#FFF7E6;font-weight:bold}
.ovladani button:hover:not(:disabled),.souhrn-akce button:hover{background:#fff3b8}
.ovladani button:disabled{color:#7d878d;border-color:#aeb7bc;background:#edf1f3;cursor:not-allowed}
#zpetna-vazba{min-height:1.5em;margin:6px 0 4px;text-align:center;font-size:115%;font-weight:bold}
#dalsi-ukol{flex:0 0 auto;min-width:44px;min-height:44px;margin-left:.5rem;padding:.45rem .8rem;border:2px solid #333;border-radius:8px;background:#fff;color:#222;font-family:Georgia,"Times New Roman",serif;font-size:112%;line-height:1.1;white-space:nowrap;cursor:pointer}
#dalsi-ukol:hover:not(:disabled){background:#f2f2f2}
#dalsi-ukol:disabled{cursor:not-allowed}
#souhrn{text-align:center}
#vysledek{margin:8px 0;font-size:145%;font-weight:bold}
#slovni-hodnoceni{margin:6px 0 12px;font-size:115%}
@media(max-width:820px){#obal{width:calc(100% - 16px)}#hlavicka h1{font-size:190%;white-space:normal}#hlavicka img{max-width:50px}#hlavicka .polozka.prazdna{width:50px;flex-basis:50px}#popisek{font-size:125%}.karty{flex-wrap:wrap;min-height:150px}.karta{width:135px;min-height:120px}.karta img{width:86px;height:86px}}
@media(max-width:778px){.karty{min-height:290px}}
@media(max-width:520px){#obal{width:calc(100% - 12px);padding-top:5px}#hlavicka{padding:.3rem 1%}#hlavicka h1{font-size:150%}#hlavicka img{max-width:44px}#hlavicka .polozka.prazdna{width:44px;flex-basis:44px}#ovladaci-radek{align-items:stretch;gap:.35rem;padding:0 .15rem}#popisek{padding:.2rem 0;font-size:112%}#dalsi-sada{padding:.3em .5em;font-size:100%;white-space:normal}#dalsi-ukol{margin-left:0;padding:.35rem .55rem;font-size:100%}#cviceni-panel,#souhrn{padding:8px}.karty{gap:6px;min-height:382px;padding:6px}.karta{width:calc(50% - 5px);max-width:155px;min-height:112px}.karta img{width:76px;height:76px}.karta span{font-size:112%}.ovladani{gap:6px}.ovladani button{flex:1 1 30%;padding:7px 8px;font-size:100%}}
@media(prefers-reduced-motion:reduce){.karta{transition:none}.karta:hover:not(:disabled){transform:none}}