/* Izgled stranice kursa i igre, zajednički za sve kurseve. */
/* boje sajta zabaviste.com: indigo, roze, mint */
:root{--in:#433785;--in2:#f1effa;--pk:#d6336c;--mint:#cbf9f7;--mint2:#5bc2af;--bg:#fff;--sv:#f7f7fb;--ln:#e3e3ee;--t:#2a2550;--m:#6b6890;
  --ok:#17875a;--okb:#e6f7ef;--ne:#c9302c;--neb:#fdecea;--zl:#f5a623;--sen:0 2px 4px rgba(67,55,133,.06),0 8px 24px rgba(67,55,133,.1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--t);font:17px/1.55 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:"Baloo 2",Nunito,sans-serif;color:var(--in);line-height:1.2;margin:0}
i{font-style:italic;font-family:Georgia,serif}
.un{max-width:1180px;margin:0 auto;padding:0 20px}
.un.uzak{max-width:760px}
.ik{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.28em;flex:none}
.ik.pun{fill:currentColor}

/* navigacija */
.nav{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--ln)}
.nav .un{display:flex;align-items:center;gap:10px;height:60px}
.logo{display:flex;align-items:center;gap:8px;font:700 22px "Baloo 2",sans-serif;color:var(--in);text-decoration:none}
.odsek{color:var(--m);font-weight:700;padding-left:10px;border-left:1px solid var(--ln);text-decoration:none}
a.odsek:hover{color:var(--in)}
.razmak{flex:1}
.cip{display:inline-flex;align-items:center;gap:5px;background:var(--sv);border:1px solid var(--ln);border-radius:999px;padding:5px 12px;font-weight:800;font-size:15px;white-space:nowrap;color:var(--in)}
.cip .plamen{color:#f0792b}.cip .munja{color:var(--zl)}
.ikb{width:38px;height:38px;display:grid;place-items:center;background:none;border:0;border-radius:50%;color:var(--m)}
.ikb:hover{background:var(--sv);color:var(--in)}

/* zaglavlje kursa */
.hero{background:var(--mint);padding:28px 0 32px}
.mrv{margin:0 0 8px;font-weight:700;font-size:14px;color:var(--pk)}
.mrv button,.mrv a{background:none;border:0;padding:0;font-weight:700;color:var(--pk);text-decoration:none}
.mrv button:hover,.mrv a:hover{color:var(--in)}
.hero h1{font-size:clamp(28px,4.6vw,44px)}
.lead{margin:8px 0 14px;max-width:640px;color:var(--in);font-size:18px}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-weight:700;font-size:15px;color:var(--in)}

/* stranica kursa */
.kurs{display:grid;gap:24px;padding-top:24px;padding-bottom:60px}
.kurs h2{font-size:26px;margin-bottom:12px}
.bok{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:20px;box-shadow:var(--sen)}
.bok h3{font-size:20px}
.bok .niv{display:flex;align-items:baseline;justify-content:space-between;margin-top:10px;font-weight:800;color:var(--in)}
.bok small{color:var(--m);font-weight:600;font-size:13px}
.pruga{height:8px;background:var(--ln);border-radius:9px;overflow:hidden;margin:6px 0}
.pruga b{display:block;height:100%;background:var(--pk);border-radius:9px;transition:width .4s}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.tri div{background:var(--sv);border-radius:12px;padding:10px 4px;text-align:center;font-weight:800;font-size:19px;color:var(--in)}
.tri small{display:block}
.tema{border:1px solid var(--ln);border-radius:14px;margin-bottom:10px;overflow:hidden;background:#fff}
.tema summary{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;list-style:none;background:var(--sv)}
.tema summary::-webkit-details-marker{display:none}
.plo{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--mint);color:var(--in);flex:none;font-size:20px}
.tema summary div{flex:1;min-width:0}
.tema summary b{display:block;font:700 19px/1.2 "Baloo 2",sans-serif;color:var(--in)}
.tema summary small{color:var(--m);font-weight:600;font-size:13px}
.tema summary>.ik{color:var(--m);transition:transform .2s}
.tema[open] summary>.ik{transform:rotate(180deg)}
.red{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:0;border-top:1px solid var(--ln);padding:12px 16px;font-weight:600}
.red:hover{background:var(--in2)}
.red .st{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--pk);color:#fff;font-size:14px;flex:none}
.red .st.got{background:var(--ok)}
.red .rt{flex:1;min-width:0}
.red .rt b{color:var(--m);font-weight:800;margin-right:4px}
.red.zak{color:var(--m)}
.red.zak .st{background:var(--ln);color:var(--m)}
.usk{font-style:normal;font-size:12px;font-weight:800;color:var(--m);background:var(--sv);border:1px solid var(--ln);border-radius:999px;padding:2px 10px;white-space:nowrap}
.zv{display:inline-flex;gap:1px;color:var(--zl);white-space:nowrap}
.zv .ne{color:var(--ln)}

.pod{border-top:1px solid var(--ln);padding:18px 0;font-size:14px;color:var(--m)}
.pod .un{display:flex;flex-wrap:wrap;gap:6px 18px}
.pod a{color:var(--pk);font-weight:700}
.kurs{padding-bottom:40px!important}

/* lekcija */
.delovi{padding-top:24px;padding-bottom:60px}
.delovi h2{font-size:24px;margin-bottom:12px}
.deo{display:flex;gap:14px;align-items:center;width:100%;text-align:left;background:#fff;border:1px solid var(--ln);border-radius:14px;padding:14px 16px;margin-bottom:10px;transition:box-shadow .15s,border-color .15s}
.deo:hover:not([disabled]){border-color:var(--in);box-shadow:var(--sen)}
.deo>div{flex:1;min-width:0}
.deo b{display:block;font:700 19px/1.2 "Baloo 2",sans-serif;color:var(--in)}
.deo small{color:var(--m);font-weight:600;font-size:14px}
.deo[disabled]{background:var(--sv);cursor:default}
.deo[disabled] .plo{background:var(--ln);color:var(--m)}
.deo[disabled] b{color:var(--m)}
.deo.boss .plo{background:var(--in);color:#fff}
.deo .akc{font-weight:800;font-size:14px;color:var(--pk);white-space:nowrap}

/* dugmad */
.btn{display:block;width:100%;background:var(--pk);border:0;border-radius:999px;padding:13px 28px;font-weight:800;font-size:17px;color:#fff;transition:background .15s}
.btn:hover:not([disabled]){background:var(--in)}
.btn[disabled]{background:var(--ln);color:var(--m);cursor:default}
.btn.dr{background:#fff;color:var(--in);box-shadow:inset 0 0 0 1.5px var(--in);margin-top:10px}
.btn.dr:hover{background:var(--in2)}

/* igra */
.igra{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.igra .un{width:100%}
.presk{background:none;border:0;font-weight:800;color:var(--pk);padding:8px 4px}
.presk:hover{color:var(--in)}
.pods ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.pods li{padding-left:14px;border-left:4px solid var(--mint2)}
.pods li b{color:var(--in)}
.traka{display:flex;gap:12px;align-items:center;padding-top:12px;padding-bottom:12px}
.traka .pruga{flex:1;height:10px;margin:0}
.kombo{display:none;font-size:14px}
.kombo.ima{display:inline-flex}
.kombo.bum{animation:bum .35s}
@keyframes bum{50%{transform:scale(1.25)}}
.boss .traka .pruga b{background:var(--in);margin-left:auto}
.bossik{color:var(--in);font-size:20px}
.karta{flex:1;padding-top:16px;padding-bottom:24px;width:100%;animation:ulaz .25s}
@keyframes ulaz{from{opacity:0;transform:translateX(16px)}}
.karta h2{font-size:28px;margin-bottom:12px}
.info{background:var(--sv);border:1px solid var(--ln);border-radius:16px;padding:18px;font-size:18px}
.info p{margin:0 0 10px}.info p:last-child{margin:0}
.kor{margin:0 0 10px;padding:0;list-style:none;counter-reset:k;display:grid;gap:8px}
.kor li{counter-increment:k;position:relative;padding-left:36px}
.kor li::before{content:counter(k);position:absolute;left:0;top:1px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--in);color:#fff;font-weight:800;font-size:14px}
.pit{font:800 21px/1.4 Nunito,sans-serif;color:var(--t);margin:4px 0 16px}
.nap{color:var(--m);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:-8px 0 10px}
.istak{background:#fff;border-left:5px solid var(--mint2);border-radius:10px;padding:10px 14px;margin:10px 0;font-weight:700;color:var(--in)}
.mat{display:block;text-align:center;font-size:21px;font-weight:800;margin:10px 0;color:var(--in)}
.par{font-family:"Cambria Math","STIX Two Math","Apple Symbols","Segoe UI Symbol",sans-serif;font-weight:400}
.raz{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.9em;line-height:1.2}
.raz u{text-decoration:none;padding:0 .35em}
.raz u:first-child{border-bottom:2px solid currentColor}
.opcije{display:grid;gap:10px}
.op{display:flex;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--ln);border-radius:12px;padding:14px 16px;font-weight:700;text-align:left;color:var(--t)}
.op::before{content:"";width:22px;height:22px;border:2px solid #b9b7d3;border-radius:50%;flex:none}
.vise .op::before{border-radius:6px}
.op:hover:not([disabled]){border-color:var(--in)}
.op.iz{border-color:var(--in);background:var(--in2)}
.op.iz::before{border-color:var(--in);background:var(--in);box-shadow:inset 0 0 0 4px #fff}
.op.ok{border-color:var(--ok);background:var(--okb)}
.op.ok::before{border-color:var(--ok);background:var(--ok);box-shadow:inset 0 0 0 4px #fff}
.op.ne{border-color:var(--ne);background:var(--neb)}
.op.ne::before{border-color:var(--ne);background:var(--ne)}
.unos{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;max-width:320px;color:var(--in)}
.unos input{flex:1;min-width:0;background:#fff;border:1.5px solid #b9b7d3;border-radius:12px;padding:12px;font:inherit;color:var(--t);text-align:center}
.unos input:focus{outline:0;border-color:var(--in);box-shadow:0 0 0 3px var(--in2)}
.uput{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;font-size:15px;font-weight:700;color:var(--m)}
.uput .ik{color:var(--pk);margin-top:.15em}
#crt+.uput{margin-top:14px}
.klred{display:flex;align-items:center;gap:8px}
.kl{flex:1;min-width:0;height:36px;accent-color:var(--pk)}
.pm{border:1.5px solid var(--ln);color:var(--in);flex:none;width:44px;height:44px}
.duzi{background:var(--sv);border:1px solid var(--ln);border-radius:14px;padding:14px;display:grid;gap:10px}
.info .duzi{background:#fff}
.karta>.duzi{margin-bottom:16px}
.duz{display:grid;grid-template-columns:18px 1fr 52px;gap:10px;align-items:center}
.duz span{display:block;height:14px;border-radius:9px;transition:width .15s}
.duz b{font-size:14px;text-align:right;color:var(--in)}
.sl{display:block;width:100%;max-width:340px;margin:10px auto;border-radius:14px}
.sl.mala{max-width:150px}
.dno{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--ln)}
.dno .un{padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.fb{border-radius:12px;padding:12px 14px;margin-bottom:10px;animation:gore .25s}
.fb b{font-size:18px}
.fb .gl{display:flex;align-items:center;gap:8px}
.fb.ok{background:var(--okb);color:var(--ok)}.fb.ne{background:var(--neb);color:var(--ne)}
.fb p{margin:4px 0 0;font-size:15px;color:var(--t)}
@keyframes gore{from{transform:translateY(16px);opacity:0}}

/* dok traje nivo, obaveštenje o kolačićima ne sme da prekrije dugme „Proveri“; vraća se na ostalim ekranima */
body:has(.igra) .zk-cookies{display:none}

/* kraj nivoa */
.kraj{text-align:center;padding-top:8vh;padding-bottom:40px;max-width:480px}
.kraj .vel{font-size:56px;display:flex;justify-content:center;gap:6px;color:var(--zl)}
.kraj .vel .ne{color:var(--ln)}
.kraj .vel .ik{animation:zvz .5s backwards}
.kraj .vel .ik:nth-child(2){animation-delay:.2s}.kraj .vel .ik:nth-child(3){animation-delay:.4s}
@keyframes zvz{from{transform:scale(0) rotate(-120deg)}}
.kraj h1{font-size:36px;margin-top:8px}
.kraj>p{color:var(--m);font-weight:700;margin:0}
.novi{display:inline-flex;gap:6px;align-items:center;margin-top:12px!important;background:var(--mint);color:var(--in)!important;border-radius:999px;padding:6px 16px}
.kraj .tri{margin:22px 0}
.anal{text-align:left;margin-bottom:16px}
.antelo{padding:4px 16px 14px}
.antelo>p{margin:10px 0 0}
.sav{padding:12px 0;border-top:1px solid var(--ln)}
.sav:first-child{border-top:0}
.sav small{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--pk)}
.sav>b{font:700 19px/1.2 "Baloo 2",sans-serif;color:var(--in)}
.sav p{margin:6px 0;background:var(--mint);border-radius:10px;padding:10px 12px;color:var(--in)}
.sav ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.sav li{padding-left:12px;border-left:3px solid var(--ln)}
.sav li .mat{display:inline;font-size:inherit;margin:0 0 0 4px}
.sav li>.tac{display:block;font-weight:800;color:var(--ok)}
.konf{position:fixed;inset:0;pointer-events:none;z-index:9;overflow:hidden}
.konf i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:pad linear forwards}
@keyframes pad{to{transform:translateY(105vh) rotate(720deg)}}

/* desktop */
@media (min-width:900px){
  .hero{padding:44px 0 48px}
  .kurs{grid-template-columns:1fr 340px;gap:40px;padding-top:36px;align-items:start}
  .bok{order:2;position:sticky;top:84px}
  .karta{padding-top:5vh}
  .karta h2{font-size:34px}.pit{font-size:24px}.info{font-size:19px;padding:24px}
  .opcije{grid-template-columns:1fr 1fr}
  .dno .un{display:flex;align-items:center;gap:20px;min-height:84px}
  .dno #fb{flex:1}.fb{margin:0}
  .dno .btn{width:auto;min-width:200px;margin-left:auto}
}
/* telefon: sve ostaje u traci, samo zbijenije; XP bez sufiksa, nalog kao krug */
@media (max-width:640px){.odsek{display:none}}
@media (max-width:480px){.xpt{display:none}.nav .un{gap:6px;padding:0 12px}.logo{font-size:18px;gap:5px}.logo img{width:24px;height:24px}
  .nav .cip{font-size:14px;padding:5px 9px;gap:3px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.tok{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:10px 0}
.tok span{background:var(--mint);color:var(--in);font-weight:800;font-size:15px;border-radius:10px;padding:6px 10px}
.tok .ik{color:var(--pk)}
.tab{width:100%;border-collapse:collapse;font-size:16px;margin:0 0 10px}
.tab th,.tab td{border-bottom:1px solid var(--ln);padding:6px 8px;text-align:left;vertical-align:top}
.tab th{color:var(--in);font-weight:800}
/* statičan sadržaj kursa za pretraživače i AI agente (upisuje ga tools/ucenje_staticno.js); kurs.js ga zameni, a dok se ne učita je sakriven */
.js .staticno{display:none}
.staticno{padding-top:24px;padding-bottom:40px}.staticno h2{margin:24px 0 8px}.staticno h3{margin:18px 0 6px}