/* Živé řešení: barevný postup krok za krokem s komentářem lektorky (zivy.js). */
.zivy { --zv-m: #2F6FDB; --zv-o: #D96C00; --zv-z: var(--uspech); --zv-c: var(--akcent); --zv-f: #8E44AD;
  background: var(--pozadi-karta); border: 1px solid var(--oddelovac); border-radius: var(--zaobleni-karta);
  box-shadow: var(--stin-karta); padding: var(--m5) var(--m4); overflow: hidden; color: var(--text); text-align: left; min-width: 0; max-width: 100%; }
.zv__tabule { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-height: 160px; align-content: start; }
.zv__tabule > * { justify-self: start; max-width: 100%; }
.zv__r { font: 700 clamp(21px, 6vw, 32px)/1.3 var(--font-text); color: var(--hlavni-tmava); white-space: nowrap; position: relative; }
.zv__r.mensi { font-size: clamp(17px, 4.8vw, 24px); }
.zv__r.text { font: 600 clamp(16px, 4.4vw, 20px)/1.5 var(--font-text); white-space: normal; }
.zv__r.zalom { white-space: normal; }
.zivy .nz { white-space: nowrap; }
.zivy [hidden] { display: none !important; }
.zivy .sk { opacity: 0; }

/* barvy pera */
.zivy .m { color: var(--zv-m); } .zivy .o { color: var(--zv-o); } .zivy .z { color: var(--zv-z); }
.zivy .c { color: var(--zv-c); } .zivy .f { color: var(--zv-f); } .zivy .t { color: var(--text-tlumeny); }
.zivy .y { background: var(--zvyraznovac); border-radius: 6px; }
.zv__ram { display: inline-block; border-radius: 12px; padding: 4px 12px; background: var(--uspech-jemny); box-shadow: 0 0 0 3px var(--zv-z) inset; }
.zv__ram.zluty { background: #FFF6C9; box-shadow: none; }
.zv__ram.cerveny { background: var(--akcent-jemny); box-shadow: 0 0 0 3px var(--zv-c) inset; }

/* rozsvícení (platí jen v kroku, kde se rozsvítí) */
.zivy [class*="g-"] { border-radius: 7px; transition: background .25s, transform .25s, box-shadow .25s; display: inline-block; }
.zivy .g-m { background: #DCE8FF; transform: translateY(-3px); }
.zivy .g-o { background: #FFE6CC; transform: translateY(-3px); }
.zivy .g-z { background: var(--uspech-jemny); transform: translateY(-3px); }
.zivy .g-c { background: var(--akcent-jemny); transform: translateY(-3px); }
.zivy .g-f { background: #F1E2F8; transform: translateY(-3px); }
.zivy .g-y { background: var(--zvyraznovac); }

/* příchody */
.zivy .a-pop { animation: zv-pop .45s cubic-bezier(.2,1.6,.4,1) both; }
.zivy .a-l { animation: zv-l .5s cubic-bezier(.2,1.3,.4,1) both; }
.zivy .a-p { animation: zv-p .5s cubic-bezier(.2,1.3,.4,1) both; }
.zivy .a-h { animation: zv-h .5s cubic-bezier(.2,1.3,.4,1) both; }
.zivy .a-d { animation: zv-d .5s cubic-bezier(.2,1.3,.4,1) both; }
.zivy .a-tres { animation: zv-tres .4s ease both; }
@keyframes zv-pop { from { opacity: 0; transform: translateY(12px) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes zv-l { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes zv-p { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes zv-h { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
@keyframes zv-d { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes zv-tres { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* přeškrtnutí a razítko */
/* tenká šikmá čára jako perem: chybný zápis pod ní zůstane čitelný */
.zivy .je-skrt { position: relative; display: inline-block; color: var(--text); opacity: .75; }
.zivy .je-skrt::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; background: var(--zv-c); border-radius: 2px; transform: rotate(-1.5deg); transform-origin: left; animation: zv-skrt .45s ease-out both; }
@keyframes zv-skrt { from { transform: rotate(-1.5deg) scaleX(0); } to { transform: rotate(-1.5deg) scaleX(1); } }
.zv__razitko { display: inline-block; vertical-align: middle; margin-left: 12px; font: 800 13px/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--zv-c); border: 3px solid var(--zv-c); border-radius: 8px; padding: 5px 7px; background: var(--pozadi-karta); transform: rotate(-8deg); animation: zv-razitko .4s cubic-bezier(.2,1.6,.4,1) both; white-space: nowrap; }
.zv__razitko.ok { color: var(--zv-z); border-color: var(--zv-z); }
@keyframes zv-razitko { from { opacity: 0; transform: rotate(-8deg) scale(2.2); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }

/* šipky */
.zv__sipky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.zv__sipky path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.zv__sipky path.kresli { stroke-dasharray: var(--d); stroke-dashoffset: var(--d); animation: zv-kresli .6s ease-out forwards; }
@keyframes zv-kresli { to { stroke-dashoffset: 0; } }
.zv__sipky text { font: 700 14px var(--font-text); paint-order: stroke; stroke: var(--pozadi-karta); stroke-width: 4px; }

/* jiskry */
.zv__jiskry { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.zv__jiskry i { position: absolute; width: 9px; height: 9px; border-radius: 2px; animation: zv-jiskra .9s ease-out forwards; }
@keyframes zv-jiskra { to { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }

/* komentář lektorky */
.zv__bublina { margin-top: var(--m4); display: flex; gap: 12px; align-items: flex-start; }
.zv__bublina img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.zv__bublina p { margin: 0; background: var(--hlavni-jemna); border-radius: 4px 16px 16px 16px; padding: 12px 16px; font-size: 18px; line-height: 1.5; min-height: 3em; color: var(--text); }
.zv__bublina p.a-l { animation-duration: .35s; }
.zv__bublina b.ne { color: var(--zv-c); }
.zv__bublina b.ok { color: var(--zv-z); }

.zv__ovladani { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m3); margin-top: var(--m4); }
.zv__ovladani .btn { min-height: 52px; }
.zv__zpet { font: 600 16px var(--font-text); background: none; border: 0; color: var(--hlavni); text-decoration: underline; cursor: pointer; padding: 12px 4px; min-height: 48px; }
.zv__zpet:disabled { opacity: .4; cursor: default; }
.zv__tecky { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.zv__tecky i { width: 10px; height: 10px; border-radius: 50%; background: var(--oddelovac); transition: background .2s, transform .2s; }
.zv__tecky i.je-hotovo { background: var(--hlavni); }
.zv__tecky i.je-ted { background: var(--akcent); transform: scale(1.3); }

.zv-spust { margin-top: var(--m3); }

@media (max-width: 560px) {
  .zivy { padding: var(--m4) var(--m3); }
  .zv__ovladani .btn { flex: 1 1 auto; }
  .zv__tecky { margin-left: 0; width: 100%; justify-content: center; }
  .zv__bublina p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .zivy *, .zivy *::after { animation: none !important; transition: none !important; }
  .zv__jiskry { display: none; }
}
.zivy .zlomek { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1.1; margin: 0 2px; font-size: .85em; }
.zivy .zlomek > span:first-child { border-bottom: 2px solid currentColor; padding: 0 3px; }
.zv__r { font-variant-numeric: tabular-nums; }

/* Sloupcový graf na tabuli (dílky po 16 px) */
.zv-graf { position: relative; padding: 0 0 0 40px; font: 600 15px/1.2 var(--font-text); color: var(--hlavni-tmava); width: 100%; max-width: 420px; }
.zv-graf__plocha { position: relative; height: 176px; display: flex; align-items: flex-end; justify-content: space-around; border-left: 2px solid var(--hlavni-tmava); border-bottom: 2px solid var(--hlavni-tmava);
  background: repeating-linear-gradient(to top, transparent 0 15px, var(--oddelovac) 15px 16px); }
.zv-graf__skup { display: flex; align-items: flex-end; gap: 3px; }
.zv-sl { position: relative; width: 30px; border: 1.5px solid var(--hlavni-tmava); border-bottom: 0; transition: background .3s; }
.zv-sl--tmava { background: #4A4F57; } .zv-sl--svetla { background: #E7E5E0; }
.zv-sl__n { position: absolute; left: 0; right: 0; top: -22px; text-align: center; font-weight: 800; color: var(--hlavni-tmava); }
.zivy .zv-sl.g-m { background: var(--zv-m); transform: none; } .zivy .zv-sl.g-o { background: var(--zv-o); transform: none; }
.zivy .zv-sl.g-z { background: var(--zv-z); transform: none; } .zivy .zv-sl.g-c { background: var(--zv-c); transform: none; }
.zv-graf__osa span { position: absolute; left: -40px; width: 34px; text-align: right; font-size: 12px; color: var(--zv-z); transform: translateY(50%); }
.zv-graf__jmena { display: flex; justify-content: space-around; margin-top: 4px; }
.zv-graf__legenda { display: flex; gap: 14px; justify-content: center; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--text-tlumeny); }
.zv-graf__legenda i { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--hlavni-tmava); margin-right: 4px; vertical-align: -1px; }

/* Obrázek (SVG) na tabuli */
.zv-obr { width: 100%; max-width: 420px; height: auto; overflow: visible; }
.zv-obr line, .zv-obr polyline { stroke: var(--hlavni-tmava); stroke-width: 2; fill: none; stroke-linecap: round; }
.zv-obr polygon { fill: #E7E5E0; stroke: none; }
.zv-obr text { font: 600 12px var(--font-text); fill: var(--hlavni-tmava); }
.zv-obr text.pis { font-style: italic; font-size: 14px; }
.zv-obr .tenka { stroke-width: 1.2; }
.zivy svg [class*="g-"] { transform: none; }
.zivy svg line.g-m { stroke: var(--zv-m); stroke-width: 5; } .zivy svg line.g-o { stroke: var(--zv-o); stroke-width: 5; }
.zivy svg line.g-z { stroke: var(--zv-z); stroke-width: 5; } .zivy svg line.g-c { stroke: var(--zv-c); stroke-width: 5; }
.zivy svg text.g-m { fill: var(--zv-m); font-weight: 800; } .zivy svg text.g-o { fill: var(--zv-o); font-weight: 800; }
.zivy svg text.g-c { fill: var(--zv-c); font-weight: 800; } .zivy svg text.g-z { fill: var(--zv-z); font-weight: 800; }
.zivy svg .a-pop, .zivy svg .a-l, .zivy svg .a-p, .zivy svg .a-h, .zivy svg .a-d { transform-box: fill-box; transform-origin: center; }
.zivy svg .t { fill: var(--text-tlumeny); opacity: .6; }

/* Díly (pásky z políček) */
.zv-pas { display: flex; align-items: center; gap: 8px; font: 700 15px var(--font-text); }
.zv-pas > b { width: 56px; flex: none; font-weight: 700; }
.zv-pas__dily { display: flex; gap: 2px; }
.zv-pas__dily i { width: 17px; height: 22px; border-radius: 3px; display: block; }
.zv-pas__dily i.m { background: var(--zv-m); } .zv-pas__dily i.o { background: var(--zv-o); }
.zv-pas__dily i.prazdny { border: 2px dashed var(--zv-c); background: var(--akcent-jemny); }
@media (max-width: 380px) { .zv-pas__dily i { width: 14px; } .zv-pas > b { width: 48px; } }
.zv-obr path.uhel { stroke: var(--hlavni-tmava); stroke-width: 1.2; fill: none; }
.zv-obr circle { fill: var(--hlavni-tmava); }
.zivy .zv-pas__dily[class*="g-"], .zivy .zv-pas[class*="g-"] { display: flex; transform: none; }
.zivy .zv-pas__dily.g-y { background: var(--zvyraznovac); border-radius: 5px; padding: 2px; }
.zv-pas__dily i.sedy { border: 2px dashed var(--oddelovac); background: none; }
.zivy .zv-stitek { display: inline-block; vertical-align: middle; font: 700 .65em/1.2 var(--font-text); background: var(--hlavni-jemna); color: var(--hlavni); border-radius: 999px; padding: 4px 10px; margin: 2px 0; }