:root{
  /* Ground and structure stay near-monochrome so the four curriculum
     states below are the only saturated things on screen. */
  --bg:#F8F8F6;--surface:#FFFFFF;--ink:#16192B;--muted:#6B6E7E;--line:#E4E4DF;
  --line-strong:#CFCFC8;

  /* one saturated brand colour, for the single primary action per screen */
  --accent:#134E5A;--accent-ink:#0B3A44;--accent-soft:#E8F0F1;--accent-hover:#0E3F49;

  /* curriculum states: functional colour, never decoration */
  --st-locked:#9A9AA2;--st-learning:#C4761A;--st-practice:#2E7D52;--st-review:#6B4E9E;
  --st-locked-soft:#F1F1EF;--st-learning-soft:#FBF1E4;--st-practice-soft:#E9F3EC;--st-review-soft:#F0EBF7;

  /* kept as aliases so existing rules keep working while the redesign lands */
  --purple:#134E5A;--purple-soft:#E8F0F1;--green:#2E7D52;--green-soft:#E9F3EC;
  --red:#B4453F;--red-soft:#FAECEA;--yellow:#C4761A;

  /* The child's side is a school exercise book — the one object from her actual
     day: a plain card, because the ruling fought the text it was under.
     These three tokens exist nowhere on the adult screens. */

  /* one radius scale, one elevation */
  --r-ctl:10px;--r-box:18px;--r-pill:999px;
  --shadow:none;--shadow-lift:0 1px 2px rgba(22,25,43,.06),0 8px 24px rgba(22,25,43,.05);

  /* type scale, 1.25 */
  --t-xs:13px;--t-sm:15px;--t-md:17px;--t-lg:21px;--t-xl:26px;--t-2xl:33px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Pulling down at the top of the page is Chrome's reload gesture. A child
   reaching for a button below the fold performed it by accident and the
   app restarted, abandoning the run. Nothing here ever wants a reload. */
html,body{margin:0;padding:0;min-height:100%;background:var(--bg);overscroll-behavior-y:contain}
body{font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--ink);padding:calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 28px);font-size:var(--t-md);line-height:1.45;letter-spacing:-.005em;-webkit-user-select:none;user-select:none}
.kidCode,#askQ,.qcard,#kidInfo,.threeKey{-webkit-user-select:text;user-select:text}
button,select{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer;padding:0}button:focus-visible,[tabindex]:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.screen{display:none;max-width:560px;margin:0 auto}
/* Room to scroll the answer button clear of the phone's gesture bar. */
#play{padding-bottom:calc(env(safe-area-inset-bottom) + 34px)}
/* The adult screens are tables and rosters; on a laptop they get the width. */
@media(min-width:900px){
  #teacher,#admin,#gradivo,#parents{max-width:960px}
  #teacher .parentBox,#admin .parentBox{padding:22px}
  .pgroup{max-width:660px}
}.screen.on{display:block;animation:fade .18s ease-out}
.screen.on.quiet{animation:none}@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* shared top */
.top{display:flex;align-items:center;gap:12px;min-height:48px;margin-bottom:20px}.top h2{margin:0;flex:1;font-size:var(--t-lg);line-height:1.15;letter-spacing:-.022em;font-weight:600}.back{width:44px;height:44px;border-radius:var(--r-ctl);background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:25px;box-shadow:0 2px 10px rgba(43,39,78,.04)}.back:active{transform:scale(.97)}
.stars{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;background:transparent;border:0;padding:11px 4px;min-width:44px;min-height:44px;font-weight:800;font-size:15px;color:var(--muted)}.stars .n{color:var(--ink)}

/* home */
#home>.top{margin-bottom:6px;justify-content:flex-end}.homeMeta{display:flex;align-items:center;gap:14px;margin-left:auto}.streakMeta{font-size:14px;font-weight:750;color:var(--muted);white-space:nowrap}
.hello{background:transparent;padding:13px 16px 18px;margin:0;display:flex;align-items:center;gap:13px;border:1px solid transparent;box-shadow:none}.hello .face{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-box);background:var(--purple-soft);font-size:29px;flex:none;cursor:pointer}.hello .face:active{transform:scale(.97)}.hello h1{margin:0;font-size:32px;line-height:1.06;letter-spacing:-.035em}.hello p{margin:8px 0 0;color:var(--muted);font-size:17px;font-weight:500}
.daily{width:100%;background:var(--purple);color:white;border:1px solid transparent;border-radius:var(--r-box);padding:20px 16px;display:flex;align-items:center;gap:13px;text-align:left;box-shadow:none;min-height:104px}.daily:active{transform:scale(.99)}.daily .copy{flex:1}.daily .copy b{display:block;font-size:21px;line-height:1.1}.daily .copy small{display:block;font-size:13px;color:rgba(255,255,255,.78);font-weight:550;margin-top:6px;line-height:1.3}.daily .go{font-size:28px;opacity:.8}.homeSection{font-size:14px;font-weight:750;margin:28px 4px 11px 17px;color:var(--muted)}
.tiles{display:flex;flex-direction:column;gap:10px}.tile,.tile.wide{width:100%;min-height:82px;background:var(--surface)!important;border:1px solid var(--line);border-radius:var(--r-box);padding:14px 16px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:13px;text-align:left;box-shadow:none}.tile:active{background:#FBFAFF!important;transform:scale(.995)}.tile .em{width:48px;height:48px;border-radius:var(--r-box);background:var(--purple-soft);display:grid;place-items:center;font-size:25px;line-height:1}.tile .nm{font-size:17px;font-weight:800}.tile .pr{font-size:12px;color:var(--muted);font-weight:550;margin-top:3px}.tile:after{content:'›';font-size:25px;color:#B0AFBD}.morePractice{width:100%;min-height:54px;border-radius:var(--r-box);color:var(--purple);background:var(--purple-soft);font-size:14px;font-weight:800}.extrasRow{display:grid;grid-template-columns:1fr;gap:9px;margin-top:10px}.extrasRow .morePractice{padding:9px 8px;line-height:1.2}.adventurePath{display:flex;align-items:center;margin-top:12px;gap:0}

/* v6: adventure and avatar */
.adventureFull{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);padding:16px}.chapterMeta{color:var(--muted);font-size:13px;font-weight:650;margin-bottom:14px}.journey{display:flex;flex-direction:column;gap:8px}.journeyStop{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-box);background:#FAFAFC;border:1px solid transparent}.journeyStop.done{background:#F2FAF6}.journeyStop.current{background:var(--purple-soft);border-color:#DCD4FF}.journeyStop.future{opacity:.48}.journeyStop .je{width:42px;height:42px;border-radius:var(--r-ctl);background:white;display:grid;place-items:center;font-size:22px}.journeyStop b{font-size:15px}.journeyStop small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.journeyStop .mark{font-size:16px;color:var(--green)}
.avatarBox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);padding:15px;margin-bottom:14px}.avatarBox h3{font-size:16px;margin:0 0 3px}.avatarBox p{margin:0 0 12px;color:var(--muted);font-size:12px}.avatarGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.avatarPick{min-height:75px;border-radius:var(--r-box);background:#F7F7FA;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:29px}.avatarPick small{font-size:10px;color:var(--muted);font-weight:700}.avatarPick.selected{background:var(--purple-soft);border-color:#CFC5FF;box-shadow:inset 0 0 0 1px #B8A9FF}.avatarPick.locked{opacity:.38}.unlockNote{display:none;margin:12px 0 0;padding:11px 12px;border-radius:var(--r-ctl);background:#FFF8E6;color:#7D641F;font-size:13px;font-weight:700}.unlockNote.on{display:block}
.numberLine{display:flex;align-items:flex-start;justify-content:center;gap:0;overflow-x:auto;padding:18px 4px 5px}.nlPoint{display:flex;flex-direction:column;align-items:center;min-width:28px}.nlDot{width:24px;height:24px;border-radius:50%;background:#F4F3F8;border:2px solid #DAD8E4;display:grid;place-items:center;font-size:0}.nlPoint button{width:34px;height:42px;display:grid;place-items:center;font-size:14px;font-weight:800}.nlPoint:after{content:'';height:2px;background:#DAD8E4;width:100%;position:relative;top:-29px;z-index:-1}.nlPoint:first-child:after{width:50%;margin-left:50%}.nlPoint:last-child:after{width:50%;margin-right:50%}.nlPoint.ok .nlDot{background:var(--green-soft);border-color:#7CCDAA}.nlPoint.bad .nlDot{background:var(--red-soft);border-color:#E6A0A2}
.multiGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.multiItem{min-height:62px;border-radius:var(--r-box);background:var(--surface);border:1.5px solid var(--line);padding:10px;font-size:17px;font-weight:750}.multiItem.selected{background:var(--purple-soft);border-color:#BEB2F5}.multiItem.correct{background:var(--green-soft);border-color:#A3DFC7}.multiItem.wrong{background:var(--red-soft);border-color:#F0C3C4}.multiSubmit{margin-top:10px}
/* Dugme koje se ne da pritisnuti mora i izgledati tako. „Provjeri“ kod spajanja
   i razvrstavanja stoji zaključano dok sve nije složeno, a izgledalo je isto
   kao da radi — dijete pritisne i ništa se ne desi, što je najgori mogući
   odgovor ekrana. */
.multiSubmit[disabled]{opacity:.34;pointer-events:none}
/* Spoji — dvije kolone i par koji dobije svoj broj i svoju boju. Linija preko
   ekrana na telefonu ne stane, pa je veza obojena, ne nacrtana. */
.spoji{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spCol{display:flex;flex-direction:column;gap:8px}
.spItem{position:relative;min-height:54px;overflow-wrap:anywhere;border-radius:var(--r-box);background:var(--surface);border:1.5px solid var(--line);padding:9px 9px 9px 28px;font-size:16px;font-weight:750;line-height:1.2;text-align:left;display:flex;align-items:center}
.spItem.biran{border-color:var(--purple);background:var(--purple-soft);box-shadow:0 0 0 2px var(--purple-soft)}
.spItem .spNum{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:17px;height:17px;border-radius:50%;font-size:11px;font-weight:800;display:grid;place-items:center;color:#fff;background:transparent}
.spItem.spojen .spNum{background:currentColor}
.spItem.spojen .spNum{color:#fff}
.spItem.sp0{border-color:#8E7BE8}.spItem.sp0 .spNum{background:#8E7BE8}
.spItem.sp1{border-color:#3E9B4F}.spItem.sp1 .spNum{background:#3E9B4F}
.spItem.sp2{border-color:#EF8A2B}.spItem.sp2 .spNum{background:#EF8A2B}
.spItem.sp3{border-color:#2F6FD6}.spItem.sp3 .spNum{background:#2F6FD6}
.spItem.sp4{border-color:#C2478F}.spItem.sp4 .spNum{background:#C2478F}
.spItem.sp5{border-color:#B08300}.spItem.sp5 .spNum{background:#B08300}
.spItem.tacno{background:var(--green-soft);border-color:#A3DFC7}
.spItem.netacno{background:var(--red-soft);border-color:#F0C3C4}
.spItem[disabled]{pointer-events:none}

/* Razvrstaj — stvari gore, kutije dolje. Dodir po stvari pa po kutiji; dodir
   po stvari u kutiji je vraća gore. */
.rzRed{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:12px}
.rzStvar{max-width:100%;overflow-wrap:anywhere;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-ctl);padding:11px 14px;font-size:16px;font-weight:750;min-height:44px}
.rzStvar.biran{border-color:var(--purple);background:var(--purple-soft);box-shadow:0 0 0 2px var(--purple-soft)}
.rzKante{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Tri kutije stanu u tri kolone samo dok su imena kratka. Čim u njima stoje
   rečenice („Kakva divota!“), 110px po kutiji nije kutija nego procijep — pa
   tri idu jedna ispod druge, a svaka dobije punu širinu. */
.rzKante.rzTri{grid-template-columns:1fr}
.rzKante.rzTri .rzKanta{min-height:0;padding:9px 10px;text-align:left}
.rzKante.rzTri .rzUnutra{flex-direction:row;flex-wrap:wrap}
.rzKanta{background:#F7F7FA;border:2px dashed var(--line);border-radius:var(--r-box);padding:10px 8px;min-height:104px;display:flex;flex-direction:column;gap:7px;align-items:stretch;text-align:center}
.rzKanta.prima{border-color:var(--purple);background:var(--purple-soft)}.rzKanta.nad{border-style:solid;border-color:#F2B233;background:#FFF6DD}.rzStvar,.rzCip{cursor:grab;user-select:none;-webkit-user-select:none}.rzVuce{opacity:.35}.rzDuh{position:fixed;z-index:60;pointer-events:none;margin:0;box-shadow:0 8px 22px rgba(0,0,0,.18);transform:scale(1.05)}
.rzIme{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.01em}
.rzUnutra{display:flex;flex-direction:column;gap:5px}
.rzCip{overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);padding:7px 8px;font-size:14px;font-weight:700;line-height:1.15}
.rzCip.tacno{background:var(--green-soft);border-color:#A3DFC7}
.rzCip.netacno{background:var(--red-soft);border-color:#F0C3C4}
@media(max-width:360px){.spItem{font-size:15px;padding-left:26px}.rzStvar{font-size:15px;padding:10px 11px}}
@media(max-width:480px){.extrasRow{grid-template-columns:1fr}.avatarGrid{grid-template-columns:repeat(3,1fr)}.nlPoint{min-width:25px}.nlPoint button{width:30px}}

/* subject */
.acts{display:flex;flex-direction:column;gap:9px}.act{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);padding:14px 15px;text-align:left;box-shadow:none}.act:active{background:#FAFAFC}.act .em{width:43px;height:43px;border-radius:var(--r-ctl);background:#F5F4FA;display:grid;place-items:center;font-size:22px;line-height:1;flex:none}.act .t{flex:1;min-width:0}.act .nm{display:block;font-size:16px;font-weight:800;line-height:1.15}.act .ds{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:4px;line-height:1.25}.act .bs{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;text-align:right}

/* quiz */
#play .top{margin-bottom:13px}.dots{display:flex;gap:4px;flex:1;height:8px}.dots i{height:6px;flex:1;max-width:26px;border:0;border-radius:var(--r-box);background:#E6E5EC}.dots i.cur{background:#BEB5F3}.dots i.ok{background:var(--green)}.dots i.bad{background:#E49A9C}.dots i.help{background:#E7C56D}
.qcard{background:var(--surface);border:0;border-radius:var(--r-box);padding:26px 20px 22px;margin:0 0 14px;text-align:center;position:relative;box-shadow:none;min-height:190px;display:flex;flex-direction:column;justify-content:center}.qcard .qTopic{font-size:var(--t-xs);font-weight:650;color:var(--muted);text-align:center;margin:0 0 8px}
.qTopic:not(.odmah){display:flex;justify-content:flex-start;margin:0 0 8px}
.qTopic[hidden]{display:none}
.qTopicEm{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;font-size:19px;line-height:1}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.say{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:var(--r-ctl);background:#F4F3F8;border:0;font-size:18px;display:grid;place-items:center;color:var(--muted)}.qcard .q{font-size:23px;font-weight:800;line-height:1.28;margin:0;padding:0 36px;letter-spacing:-.02em;text-wrap:balance}/* Dugme 🔊 stoji gore desno i zauzima 58px od ivice kartice. Pitanje je imalo
   36px razmaka, pa je dugačka rečenica mogla doći pod njega. Šire se samo
   tekstualna pitanja — račun je kratak, a sa širim razmakom bi se prelamao. */
.qcard .q:not(.big){padding-left:52px;padding-right:52px}
.qcard .q.big{font-size:41px}.qcard .vis{margin:18px auto 0;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;align-items:center}
.qcard .vis:has(.pir),.qcard .vis:has(.voz){margin-top:10px}
/* Crtež se od dugmeta 🔊 razmiče kao i tekst. Na niskoj kartici je crtež
   okomito na sredini, dakle tačno u visini dugmeta — voz je tako zadnjim
   poljem ulazio pod njega. */
#play .qcard.imaGlas .vis{padding-right:50px}.qcard .vis .emoji{font-size:56px}.qcard .txt{text-align:left;font-size:18px;font-weight:550;line-height:1.55;margin:2px 0 16px;padding:0 4px}.qcard .sent{font-size:24px;font-weight:800;margin-top:10px}.qcard .hint{font-size:13px;color:var(--muted);font-weight:500;margin-top:8px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choices.one{grid-template-columns:1fr}.choices.three{grid-template-columns:repeat(3,1fr)}.ch{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-box);padding:15px 12px;font-size:18px;font-weight:750;line-height:1.2;min-height:62px;display:grid;place-items:center;box-shadow:none}.ch:active{background:#F8F7FD}.ch.big{font-size:29px}.ch.ok{background:var(--green-soft);border-color:#A3DFC7;color:#18734F}.ch.bad{background:var(--red-soft);border-color:#F0C3C4;color:#A94447}.ch.dim{opacity:.38}.ch[disabled]{pointer-events:none}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:330px;margin:0 auto}
/* Bez ✓ u tastaturi (provjerava veliko „Provjeri“): nula preko dva polja. */
.pad .k.nula{grid-column:span 2}
/* Izabran, a još neprovjeren odgovor: jasno naglašen, može se promijeniti. */
.ch.sel,.nlPoint button.sel{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent) inset;background:var(--accent-soft,#E6F0F2)}
/* Dugme vrste koje je preuzelo veliko „Provjeri“ (play.js, preuzmiDugme). */
.preuzeto{display:none!important}.pad .k{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);font-size:25px;font-weight:750;height:58px;box-shadow:none}.pad .k:active{background:#F7F7FA}.pad .k.go{background:var(--purple);color:#fff;border-color:var(--purple)}.pad .k.del{background:#F4F3F8;color:var(--muted)}.entry{font-size:40px;font-weight:800;min-height:64px;text-align:center;letter-spacing:1px;margin:2px 0 13px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:2px dashed var(--line);border-radius:var(--r-box)}#answer:has(.ansSent) .entry{margin-bottom:7px}.entry .cur{display:inline-block;width:2px;height:35px;background:var(--purple);vertical-align:middle;margin-left:4px;animation:blink 1s steps(1) infinite}
/* Odgovor je rečenica, a kućica u njoj je ono što dijete upisuje — broj nikad
   ne stoji sam. Stoji između računa i tastature, tačno gdje je u svesci. */
/* Dva koraka, jedan ekran. Obje kućice stoje ispod priče cijelo vrijeme, pa se
   vidi da se traže dvije stvari — i dijete ne mora pamtiti šta je odgovorilo na
   ekranu koji je otišao. Aktivna kućica je obojena, gotova zelena. */
.dvaKoraka{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.dkRed{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-box);
  background:var(--surface);border:1.5px solid var(--line)}
.dkRed.sad{border-color:var(--purple);background:var(--purple-soft)}
.dkRed.gotov{border-color:#A3DFC7;background:var(--green-soft)}
.dkRed.krivo{border-color:#F0C3C4;background:var(--red-soft)}
.dkIme{flex:1;font-size:15px;font-weight:700;color:var(--muted);line-height:1.25}
.dkRed.sad .dkIme,.dkRed.gotov .dkIme{color:var(--ink)}
.dkKuca{min-width:58px;text-align:center;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;
  border-bottom:2px solid var(--line);padding:0 6px;line-height:1.2}
.dkRed.gotov .dkKuca{border-bottom-color:#A3DFC7;color:#18734F}
.dkRed.krivo .dkKuca{border-bottom-color:#F0C3C4;color:#A94447}
.dkPitanje{font-size:17px;font-weight:800;text-align:center;margin:2px 0 10px}
.dvaKoraka.shake{animation:shake .4s}
@media (orientation:portrait) and (max-height:660px){
  #play .dvaKoraka{gap:6px;margin-bottom:8px}
  #play .dkRed{padding:6px 10px}
  #play .dkIme{font-size:13px}
  #play .dkKuca{font-size:22px;min-width:50px}
  #play .dkPitanje{font-size:15px;margin-bottom:7px}
}
.zapisRacuna{display:block;margin-top:5px}
.nizRed{display:block;margin-top:5px;font-weight:700}
.zapisRacuna b{font-variant-numeric:tabular-nums;white-space:nowrap}
.ansSent{font-size:15px;line-height:1.45;color:var(--muted);text-align:center;margin:0 0 11px;padding:0 6px}
.ansSent b{display:inline-block;min-width:32px;padding:1px 7px;border-bottom:2px solid var(--line);color:var(--muted);font-weight:800}
.ansSent b.on{color:var(--ink);border-bottom-color:var(--purple)}
/* Radnja prije računa. Isti oblik kao ponuđeni odgovori, jer to i jeste izbor
   — samo se ne boduje kao odgovor nego kao plan. */
.plan .planAsk{font-size:15px;font-weight:700;color:var(--muted);text-align:center;margin:0 0 10px}
.plan .ch.plan{font-weight:750}
.qcard .q.story{font-size:19px;line-height:1.5;text-align:left;text-wrap:pretty}
/* Priča je poravnata lijevo: na telefonu joj ne treba 52 px sa obje strane
   (bila je stisnuta na ~200 px u kartici od 350). Počne ispod 🔊 i zauzme širinu. */
@media (max-width:480px){.qcard:has(> .q.story){padding-top:62px}.qcard .q.story{padding-left:2px;padding-right:2px}}
/* Pisana slova prvog pisma. Dancing Script je jedini povezani rukopis na
   Google Fonts koji ima č, ć, ž, š i đ; nije doslovno školska latinica, ali
   slova se drže jedno za drugo, a to je ono što se dekodira. */
#play .qcard .txt.pisana,.txt.pisana{font-family:"Dancing Script","Segoe Script","Bradley Hand",cursive;
  /* linijatura je 30px, pa i red teksta — inače tekst pluta između linija */
  font-weight:600;font-size:24px;line-height:30px;letter-spacing:.2px}
.rulerSvg{width:100%;max-width:330px;height:auto;display:block;margin:0 auto}
/* Prebrojiv red: slike se ne gomilaju nego stoje jedna do druge, a precrtane
   ostaju na mjestu da se vidi šta je otišlo. */
.panels{display:flex;flex-direction:column;gap:10px}
.panel .plabel{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 3px}
.prow{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.pitem{font-size:27px;line-height:1.1}
.pitem i{font-style:normal;display:inline-block}@keyframes blink{50%{opacity:0}}
.slots{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:7px 0 17px;min-height:54px}.slot{min-width:45px;height:52px;border-bottom:2px solid #AFAEBA;display:grid;place-items:center;font-size:27px;font-weight:800;background:transparent}.slot.filled{background:#F7F7FA;border-radius:var(--r-ctl);border-bottom:0}.letters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.lt{min-width:52px;height:56px;padding:0 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);font-size:25px;font-weight:800}.lt.used{opacity:.2;pointer-events:none}.lt.wide{width:auto}.orow{display:flex;flex-direction:column;gap:9px}.oitem{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);padding:13px 14px;font-size:18px;font-weight:750;text-align:left;display:flex;align-items:center;gap:11px;box-shadow:none}.oitem .num{width:30px;height:30px;border-radius:var(--r-ctl);background:var(--purple-soft);color:var(--purple);display:grid;place-items:center;font-size:13px;flex:none}.oitem.used{opacity:.38}.tools{display:flex;gap:9px;justify-content:center;margin-top:13px}
.btn{background:var(--purple);color:#fff;border:0;border-radius:var(--r-box);padding:14px 22px;font-size:17px;font-weight:800;box-shadow:none}.btn.light{background:var(--accent-soft);color:var(--purple)}.btn.wide{width:100%}.btn:active{transform:scale(.99)}
.fb{margin-top:12px;padding:13px 14px;border-radius:var(--r-box);border:0;font-size:16px;font-weight:750;display:none;align-items:center;gap:10px}.fb.on{display:flex}.fb.ok{background:var(--green-soft);color:#18734F}.fb.bad{background:var(--red-soft);color:#9E474A}.fb.hint{background:#FFF8E6;color:#7D641F}.fb small{display:block;margin-top:4px;font-size:13px;font-weight:600;line-height:1.4;color:inherit;opacity:.9}.fb .e{font-size:23px}.fb .t{flex:1;text-align:left}.fb small{display:block;font-size:13px;font-weight:500;color:inherit;opacity:.85;margin-top:2px}.next{margin-top:8px;display:block}.next[hidden]{display:none}
/* Asleep, not absent. It keeps its place; only its readiness changes. */
/* Prije odgovora ovo je „Provjeri“ (play.js, ponudi): sivo samo dok je
   zatvoreno, a dodir ga mora stići čim se otvori. */
.next .btn:disabled{opacity:.32}
/* Podsjetnik (play.js): otvoreno dugme koje dijete ne pritišće. */
@keyframes podsjeti{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(19,78,90,0)}45%{transform:scale(1.045);box-shadow:0 0 0 9px rgba(19,78,90,.2)}}
.podsjeti{animation:podsjeti 1.1s ease-in-out 2}
@media (prefers-reduced-motion:reduce){.podsjeti{outline:3px solid var(--accent);outline-offset:3px}}

/* done / rewards */
.result{background:var(--surface);border:0;border-radius:var(--r-box);padding:30px 21px;text-align:center;margin-top:6px;box-shadow:none}.result .big{font-size:58px}.result h2{margin:12px 0 5px;font-size:27px}.result p{margin:0 0 7px;color:var(--muted);font-size:16px}.result .starrow{font-size:27px;letter-spacing:2px;margin:13px 0 18px}.result .row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.rewardGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.reward{min-height:105px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);display:grid;place-items:center;text-align:center;padding:10px;box-shadow:none}.reward .re{font-size:36px}.reward b{font-size:13px}.reward small{font-size:10px;color:var(--muted)}.reward.locked{opacity:.3;filter:grayscale(1)}

/* clock / money */
.clock{width:184px;height:184px}.coin{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;border:1px solid #D8D6CF}.coin.f{background:#F5E8C8}.coin.km{background:#E5E8EF}.note{width:94px;height:50px;border-radius:var(--r-ctl);display:grid;place-items:center;font-weight:800;font-size:17px;border:1px solid #D9D8DF}.note.n10{background:#F4E4EC}.note.n20{background:#E2ECF4}.note.n50{background:#E5F1E3}

/* parent */
[hidden]{display:none!important}
.modalWrap{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(36,36,56,.42);backdrop-filter:blur(2px);animation:fade .14s ease-out}
.modalCard{background:var(--surface);border-radius:var(--r-box);box-shadow:none;padding:22px;width:100%;max-width:360px}
.modalCard b{display:block;font-size:19px;letter-spacing:-.01em;margin-bottom:4px}
.modalCard small{color:var(--muted)}
.modalErr{color:var(--red);font-size:15px;min-height:20px;margin-top:6px}
.fld{width:100%;padding:12px;border-radius:var(--r-ctl);border:1px solid var(--line);margin-top:10px;font-size:17px;box-sizing:border-box;font-family:inherit;background:var(--surface);color:var(--ink)}
.fld:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--purple)}
.kidCard{padding:12px 0;border-bottom:1px solid var(--line)}
.kidCard:last-of-type{border-bottom:0}
.kidCard .nm{font-weight:800;font-size:17px}
.kidMeta{color:var(--muted);font-size:14px;font-weight:600}
.kidActions{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.kidCode{font-family:ui-monospace,Menlo,monospace;font-weight:800;letter-spacing:.5px;color:var(--purple);white-space:nowrap;background:var(--purple-soft);padding:5px 9px;border-radius:var(--r-ctl);font-size:15px}
.kidLinked{color:var(--green);font-size:14px;font-weight:700;white-space:nowrap}
.kidBtn{border:1px solid var(--line);border-radius:var(--r-ctl);padding:11px 13px;min-height:44px;font-size:14px;font-weight:700;background:var(--surface);color:var(--purple);white-space:nowrap}
.kidBtn:active{transform:scale(.97)}
.kidActions .sp{flex:1}
.paceGroup{border:1px solid var(--line);border-radius:var(--r-ctl);margin-top:10px;overflow:hidden;background:var(--surface)}
.paceGroup>summary{padding:12px 14px;font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center}
.paceGroup>summary::-webkit-details-marker{display:none}
.paceGroup>summary .n{color:var(--muted);font-size:14px;font-weight:700}
.paceGroup[open]>summary{border-bottom:1px solid var(--line)}
.paceBody{padding:6px 14px 12px}
.paceRow{padding:12px 0;border-bottom:1px solid var(--line)}
.paceRow:last-child{border-bottom:0}
.paceRow>.nm{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:8px}
.paceRow{position:relative}
.paceRow>.nm:has(.paceProbaj){padding-right:76px}
.paceProbaj{position:absolute;right:-8px;top:2px;display:flex;align-items:center;padding:0 8px;min-height:44px;font-size:13.5px;font-weight:700;color:var(--accent);text-decoration:none}
/* four states, one tap, always visible — a <select> costs three taps and
   hides its own options behind an OS sheet */
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:var(--st-locked-soft);
  border-radius:var(--r-ctl);padding:3px}
.seg button{padding:9px 2px;border-radius:7px;font-size:var(--t-xs);font-weight:600;color:var(--muted);
  line-height:1.2;min-height:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(22,25,43,.08)}
.seg button[aria-pressed="true"][data-st="locked"]  {color:var(--st-locked)}
.seg button[aria-pressed="true"][data-st="learning"]{color:var(--st-learning)}
.seg button[aria-pressed="true"][data-st="practice"]{color:var(--st-practice)}
.seg button[aria-pressed="true"][data-st="review"]  {color:var(--st-review)}
.seg button[aria-pressed="true"]::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:currentColor;margin-right:5px;vertical-align:1px}
.paceUnst{font-size:var(--t-xs);color:var(--st-learning);margin-top:7px}
.paceUnset{font-size:var(--t-xs);color:var(--muted);margin-top:7px}
.kidMeta{color:var(--muted);font-size:14px;font-weight:600}
.kidBtn{border:1px solid var(--line);border-radius:var(--r-ctl);padding:11px 13px;min-height:44px;font-size:14px;font-weight:700;background:var(--surface);color:var(--purple)}
.kidDetail{margin:10px 0 2px;padding:12px;background:var(--bg);border-radius:var(--r-ctl)}
.skRow{display:flex;justify-content:space-between;gap:8px;padding:5px 0;font-size:15px}.skRow.skOpen{cursor:pointer;border-radius:8px;margin:0 -6px;padding:5px 6px}.skRow.skOpen:hover{background:#F5F4FA}.skChev{font-style:normal;color:var(--muted);margin-left:7px;display:inline-block;transition:transform .15s}.skRow.otvoren .skChev{transform:rotate(90deg)}.skTime{color:var(--muted);font-size:12.5px;margin-left:9px;white-space:nowrap}.skDet{margin:2px 0 12px;padding:10px 12px;background:#F8F8FB;border:1px solid var(--line);border-radius:var(--r-ctl)}.qSum{font-size:13px;font-weight:750;color:#5A5770;margin-bottom:9px}.qRow{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-top:1px solid #ECEBF2}.qRow:first-of-type{border-top:0}.qMark{width:18px;flex:none;text-align:center;font-weight:850;line-height:1.35}.qRow.q0 .qMark{color:#2E9E6B}.qRow.q1 .qMark{color:var(--purple)}.qRow.q2 .qMark{color:#C9445B}.qTxt{flex:1;min-width:0;font-size:13.5px;line-height:1.35}.qTxt b{display:block;font-weight:650;color:var(--ink)}.qTxt small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.qRow.q2 .qTxt small u{text-decoration:none;font-weight:800;color:#C9445B}.qTime{flex:none;color:var(--muted);font-size:11.5px;padding-top:2px;white-space:nowrap}.qTime{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right}.qLice{font-weight:750;color:#5A5770}.qDug:empty{display:none}
.skRow small{color:var(--muted)}
.skTag{font-weight:800}

.parentBox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);padding:16px;margin:9px 0 12px}.parentBox label{display:block;font-size:14px;font-weight:800;margin-bottom:8px}.parentBox select{width:100%;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctl);padding:11px 10px;font-size:var(--t-sm);font-weight:600}.dontKnow{display:none;margin:14px 0 0;text-align:center}
#dontKnowBtn{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-ctl);padding:12px 18px;font-weight:750;font-size:16px;min-height:48px}
#dontKnowBtn:active{transform:scale(.98)}.dontKnow.on{display:block}.dontKnow button{background:transparent;border:0;color:var(--muted);font-size:14px;font-weight:750;padding:9px 12px}.teachBox{display:none;margin:11px 0 0;background:#F7F6FC;border:1px solid #E6E2F5;border-radius:var(--r-box);padding:15px;text-align:left}.teachBox.on{display:block}.teachBox>b:first-child{display:block;font-size:15px;margin-bottom:7px}.teachBox p b,.teachBox span b{display:inline;font-size:inherit;margin:0}.teachBox p{margin:0;color:#4E4B60;font-size:14px;line-height:1.45}.teachDots{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.teachDot{width:29px;height:29px;border-radius:50%;background:#ECE9FA;border:2px solid #D6D0F2}.teachDot.off{opacity:.25;text-decoration:line-through}.teachEq{font-size:22px;font-weight:850;text-align:center;margin:10px 0 2px}.teachLine{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:10px 0}.teachNum{min-width:30px;height:34px;border-radius:var(--r-ctl);background:white;border:1px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:800}.teachNum.mark{background:var(--purple-soft);border-color:#C9BFF5}.teachPar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0}.teachPar .par{display:flex;flex-direction:column;gap:4px;padding:5px;border-radius:15px;background:white;border:1px solid var(--line)}.teachPar .par.red{flex-direction:row;flex-wrap:wrap;max-width:132px}.teachPar .par.sam{background:#FFF6E8;border-color:#F0B35B}.teachPar i,.teachDes i{display:block;width:22px;height:22px;border-radius:50%;background:#ECE9FA;border:2px solid #D6D0F2}.teachDes{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:flex-end;margin:10px 0}.teachDes .st{width:16px;height:76px;border-radius:8px;background:#ECE9FA;border:2px solid #C9BFF5;background-image:repeating-linear-gradient(to bottom,transparent 0 5.6px,#D6D0F2 5.6px 7.6px)}.teachZna{display:flex;justify-content:center;gap:22px;margin:6px 0}.teachZna span{display:flex;flex-direction:column;align-items:center;font-size:34px;line-height:1.1}.teachZna b{font-size:30px!important;font-weight:900}.fb small.racun{font-size:19px;font-weight:850;opacity:1;margin-top:4px}.pmPrimjer{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:white;border:1px dashed #C9BFF5;border-radius:var(--r-ctl);padding:11px 12px}.pmPrimjer .pmQ{font-size:16px;font-weight:750;color:#3B3950}.pmPrimjer .pmA{font-size:19px;font-weight:900;color:var(--purple);background:var(--purple-soft);border-radius:9px;padding:3px 11px;white-space:nowrap}.pmSuzi{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.pmSuzi span{background:white;border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 13px;font-size:16px;font-weight:800}.pmSuzi span.out{opacity:.4;text-decoration:line-through;background:#F3F2F6}.topic.odmah{color:var(--purple);font-weight:800}.weakList{display:flex;flex-direction:column;gap:8px}.weak{display:flex;justify-content:space-between;gap:10px;background:#F7F7FA;border:0;border-radius:var(--r-ctl);padding:10px;font-size:13px;font-weight:650}.weak b{white-space:nowrap}.miniInfo,.pnote{color:var(--muted);font-size:13px;font-weight:500;line-height:1.45;margin:9px 0}.ptable{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;font-size:13px}.ptable th,.ptable td{padding:10px;border-bottom:1px solid var(--line);text-align:left}.ptable th{font-weight:800;background:#F7F7FA}.ptable td.r{text-align:right;font-weight:750}.ptable tr.sub td{background:#FBFBFC;font-weight:800;color:var(--muted)}
.toast{pointer-events:none;position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 22px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;text-align:center;line-height:1.4;background:#282638;color:#fff;padding:10px 15px;border-radius:var(--r-ctl);font-weight:650;font-size:13px;display:none;z-index:9}.toast.on{display:block}.shake{animation:shk .3s}@keyframes shk{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}.confetti span{position:absolute;top:-40px;font-size:18px;animation:fall 2s linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(240deg);opacity:.45}}
@media(max-width:380px){body{padding-left:14px;padding-right:14px}.hello h1{font-size:29px}.choices.three{gap:7px}.ch{padding-left:8px;padding-right:8px}.rewardGrid{grid-template-columns:repeat(2,1fr)}}

.pick{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-ctl);padding:13px 14px;margin-top:8px}
.pick b{display:block;font-size:var(--t-sm);font-weight:650}
.pick small{display:block;color:var(--muted);font-size:var(--t-xs);margin-top:3px;line-height:1.4}
.pick[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pick[aria-pressed="true"] b{color:var(--accent)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dot.locked{background:var(--st-locked)}.dot.learning{background:var(--st-learning)}
.dot.practice{background:var(--st-practice)}.dot.review{background:var(--st-review)}

.three{display:grid;grid-template-columns:repeat(3,30px);gap:10px;justify-content:end;
  align-items:baseline;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.three i{font-style:normal;font-weight:700}
.three .al{color:var(--ink)}.three .up{color:var(--muted)}.three .wr{color:var(--st-learning)}
.threeHead i{font-weight:600;font-size:var(--t-sm);opacity:.75}
/* revision before a test: the one entry that gathers several teme */
.act.revAct{border-color:var(--st-review);background:var(--st-review-soft)}
.act.revAct .nm{color:var(--st-review)}
.act.revAct .bs{color:var(--st-review);font-weight:700}
.threeKey{font-size:var(--t-xs);color:var(--muted);margin:10px 0 0}
.wrow.whead,.skRow.whead{padding-top:0;border-bottom:1px solid var(--line)}
.grpHead .three{margin-left:auto}
.wrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.wrow:last-child{border-bottom:0}
.wrow>span{flex:1;min-width:0;font-size:var(--t-sm)}

/* ── the sequence: structure by hairline, not by floating card ─── */
.ic{flex:0 0 auto;display:block}
.paceGroup>summary>span:first-child,.paceRead .nm,.seqLabel{display:flex;align-items:center;gap:9px}
.paceGroup>summary>span:first-child .ic,.paceRead .nm .ic{color:var(--muted)}
.seq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;margin:0 0 12px}
.seqLabel{font-size:var(--t-xs);font-weight:600;color:var(--muted);letter-spacing:.01em;margin:22px 2px 8px}
.row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:15px 16px;
  border-bottom:1px solid var(--line);background:none;min-height:60px}
.seq .row:last-child{border-bottom:0}
.row:active{background:var(--st-locked-soft)}
.row>.ic:first-child{color:var(--accent)}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-size:var(--t-md);font-weight:600;letter-spacing:-.015em}
.row .t small{display:block;color:var(--muted);font-size:var(--t-sm);margin-top:1px}
.row .after{color:var(--muted);font-size:var(--t-sm);font-weight:600;white-space:nowrap}
.row .chev{color:var(--line-strong)}
.row[data-quiet]>.ic:first-child{color:var(--muted)}

/* the one dominant action */
.today{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:var(--accent);
  color:#fff;border:0;border-radius:var(--r-box);padding:20px;margin:0 0 8px}
.today:active{background:var(--accent-hover)}
.today .ic{color:#fff}
.today b{display:block;font-size:var(--t-lg);font-weight:650;letter-spacing:-.02em}
.today small{display:block;font-size:var(--t-sm);opacity:.85;margin-top:2px}

/* ── entry ─────────────────────────────────────────────────────── */
.wordmark{display:flex;align-items:baseline;gap:10px;margin:8px 0 4px}
.wordmark h1{margin:0;font-size:var(--t-xl);font-weight:700;letter-spacing:-.03em}
.wordmark span{color:var(--muted);font-size:var(--t-sm)}
#welcome.on{display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 60px)}
.welcomeIntro{color:var(--muted);font-size:var(--t-md);max-width:34ch;margin:0 0 34px}
.welcomeAsk{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;margin:0 0 12px}
/* The adult entrance on a child's screen: reachable for a grown-up, no
   invitation for the child. Quiet, cornered, and never a labelled link. */
.adultDoor{width:44px;height:44px;margin-left:-13px;border-radius:var(--r-pill);display:grid;place-items:center;
  color:var(--line-strong);background:none}
.adultDoor:active{background:var(--st-locked-soft)}
.choice{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-box);padding:20px;margin-bottom:12px}
.choice:active{transform:scale(.995)}
.choice b{display:block;font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em}
.choice small{display:block;color:var(--muted);font-size:var(--t-sm);margin-top:5px;line-height:1.45}
.choice.primary{background:var(--accent);border-color:var(--accent)}
.choice.primary b,.choice.primary small{color:#fff}
.choice.primary small{opacity:.82}
/* identity lives in the header, not in a tab and not as a bare label */
.ahead{margin:0 0 18px}
.abar{display:flex;align-items:center;gap:10px;min-height:44px}
.abar h2{flex:1;min-width:0}

.ahead h2{margin:0;font-size:var(--t-xl);font-weight:700;letter-spacing:-.03em}
.chip{width:44px;height:44px;border-radius:var(--r-pill);background:var(--accent);color:#fff;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.02em;display:grid;place-items:center;flex:0 0 auto}
.chip:active{transform:scale(.96)}
.sheet{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(22,25,43,.4);animation:fade .14s ease-out}
.sheetCard{background:var(--surface);border-radius:var(--r-box) var(--r-box) 0 0;padding:20px 20px 26px;
  width:100%;max-width:560px;animation:up .2s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(14px)}to{transform:none}}
.sheetTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.sheetTop b{font-size:var(--t-lg);font-weight:650;letter-spacing:-.02em}
.sheetX{width:44px;height:44px;border-radius:var(--r-pill);background:var(--st-locked-soft);
  color:var(--muted);display:grid;place-items:center;font-size:19px;flex:0 0 auto}
.sheetSub{color:var(--muted);font-size:var(--t-sm);margin:0 0 6px;line-height:1.45}
/* Spisak „Ko je na redu?“ — jedan red po identitetu koji ovaj telefon može
   biti. Dijete je odvojeno crtom, jer je to primopredaja telefona a ne
   promjena pogleda. */
.idOpt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);
  padding:13px 14px;margin-top:8px}
.idOpt[aria-current="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.idOpt:active{transform:scale(.995)}
a.idOpt.idAlat{color:inherit;text-decoration:none;box-sizing:border-box}
.idAlati{margin:0 2px 8px;font-size:13px;font-weight:700;color:var(--muted)}
.idZnak{width:38px;height:38px;flex:none;border-radius:12px;background:#F3F2F8;
  display:grid;place-items:center;font-size:21px;line-height:1}
.idOpt .t{flex:1;min-width:0}
.idOpt .t b{display:block;font-size:16px;font-weight:750}
.idOpt .t small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idOpt .tick{color:var(--accent);font-weight:800;font-size:17px}
.idCrta{height:1px;background:var(--line);margin:14px 0 6px}
.idNota{color:var(--muted);font-size:12.5px;margin:10px 2px 0}
.idPodnozje{color:var(--muted);font-size:12.5px;margin:14px 2px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* parents screen: three groups, one quiet label each */
.ptitle{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:22px 4px 8px}
#grpProgress .ptitle{margin-top:4px}
/* PIN: four masked digits, large enough to type without looking at them */
#pinIn{text-align:center;font-size:30px;letter-spacing:.45em;font-variant-numeric:tabular-nums;padding:10px 12px}
.textBtn{display:block;width:100%;color:var(--accent);font-weight:600;font-size:var(--t-sm);margin-top:14px;min-height:44px}
/* settings are rows that open on a tap; the explanation waits inside, not on the screen */
.plist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;margin:9px 0 12px}
.pitem:last-child .row{border-bottom:0}
.pitem .row .chev{display:inline-flex;transition:transform .15s}
.pitem .row .ic{font-size:24px;width:30px;text-align:center;flex:0 0 auto}
.pitem .row[aria-expanded="true"] .chev{transform:rotate(90deg)}
.pitem .row[aria-expanded="true"]{border-bottom:0}
.ppanel{padding:0 16px 16px;border-bottom:1px solid var(--line)}
.pitem:last-child .ppanel{border-bottom:0}
.ppanel .miniInfo{margin-top:10px}
.ppanel select{width:100%;margin-top:4px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctl);padding:11px 10px;font-size:var(--t-sm);font-weight:600}

.ahead .who{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ahead h2{margin:0;font-size:var(--t-xl);font-weight:700;letter-spacing:-.03em}
.ahead .role{color:var(--muted);font-size:var(--t-xs);white-space:nowrap}
.anav{display:flex;gap:2px;background:var(--st-locked-soft);border-radius:var(--r-ctl);padding:3px;margin:14px 0 20px}
.anav button{flex:1;padding:9px 6px;border-radius:8px;font-size:var(--t-sm);font-weight:550;color:var(--muted);
  line-height:1.2;min-height:44px}
.anav button[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:650;
  box-shadow:0 1px 2px rgba(22,25,43,.07)}
.aempty{color:var(--muted);font-size:var(--t-sm);padding:22px 0;max-width:40ch}
/* Loading shows the shape of what is coming. The global reduced-motion rule
   already stops the shimmer, leaving a plain grey placeholder. */
.skel{background:linear-gradient(90deg,var(--st-locked-soft) 25%,var(--line) 38%,var(--st-locked-soft) 62%);
  background-size:340% 100%;border-radius:6px;animation:shimmer 1.3s ease-in-out infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.skelRow{padding:14px 0;border-bottom:1px solid var(--line)}
.skelRow:last-child{border-bottom:0}
.skelLine{height:13px}
.skelLine+.skelLine{margin-top:8px}

/* class overview: the teacher sees who needs help without opening anything */
.grpHead{display:flex;align-items:baseline;gap:8px;margin:20px 0 2px;font-size:var(--t-sm);font-weight:650}
.grpHead .n{color:var(--muted);font-weight:600}
.grpHead:first-child{margin-top:4px}
.kidRow{display:block;border-bottom:1px solid var(--line)}
.kidRow:last-of-type{border-bottom:0}
.kidHead{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 0;min-height:56px}
.kidHead .t{flex:1;min-width:0}
/* Linked or not is a state, so it reads as a tag rather than as another
   number in the sentence under the name. */
/* Beside the name, so a two-line run of counts never wraps around it. */
.kidHead .nmRow{display:flex;align-items:center;gap:8px;min-width:0}
.kidHead .nmRow b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kidTag{flex:none;font-size:12px;font-weight:650;padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap}
.kidTag.on{background:var(--st-practice-soft);color:var(--st-practice)}
.kidTag.wait{background:var(--st-learning-soft);color:var(--st-learning)}
.kidTag.off{background:var(--st-locked-soft);color:var(--st-locked)}
.kidHead .t b{display:block;font-size:var(--t-md);font-weight:650;letter-spacing:-.015em}
.kidHead .t small{display:block;color:var(--muted);font-size:var(--t-sm);margin-top:1px}
.kidHead .chev{color:var(--line-strong);transition:transform .15s;display:inline-flex}
.kidHead[aria-expanded="true"] .chev{transform:rotate(90deg)}
.kidNeed{padding:0 0 12px}
.kidNeed .skRow{padding:4px 0}
.kidFlat{color:var(--muted);font-size:var(--t-sm);padding:0 0 12px}
.codeRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.codeRow .sp{flex:1}

/* child profile / onboarding */
.profileWrap{max-width:520px;margin:0 auto;padding-top:clamp(10px,5vh,46px)}
.profileBrand{display:flex;align-items:center;gap:12px;margin-bottom:26px}.profileLogo{width:54px;height:54px;border-radius:var(--r-box);background:var(--purple);color:#fff;display:grid;place-items:center;font-size:25px;font-weight:900;box-shadow:none}.profileBrand b{display:block;font-size:21px}.profileBrand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.profileCard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);padding:20px;box-shadow:none}.profileCard h1{font-size:27px;line-height:1.1;margin:0 0 8px;letter-spacing:-.025em}.profileCard>p{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.5}
.profileField{margin-top:17px}.profileField label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}.profileField input{width:100%;min-height:52px;border:1px solid var(--line);border-radius:var(--r-box);background:#F9F9FC;padding:0 14px;color:var(--ink);font:inherit;font-size:17px;outline:none}.profileField input:focus{border-color:#BEB2F5;box-shadow:0 0 0 3px var(--accent-soft)}
.genderChoices{display:grid;grid-template-columns:1fr 1fr;gap:9px}.genderChoice{min-height:58px;border:1.5px solid var(--line);border-radius:var(--r-box);background:#F9F9FC;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px}.genderChoice.selected{border-color:#BEB2F5;background:var(--purple-soft);color:var(--purple)}
.profileFixed{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:17px}.profileFixed>div{background:#F7F7FA;border:1px solid var(--line);border-radius:var(--r-box);padding:11px 12px}.profileFixed small{display:block;color:var(--muted);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.04em}.profileFixed b{display:block;font-size:13px;margin-top:3px}.profileSubmit{margin-top:22px;width:100%;min-height:54px;border-radius:var(--r-box);background:var(--purple);color:#fff;font-weight:900}.profileNote{text-align:center;color:var(--muted);font-size:11px;line-height:1.45;margin:14px 8px 0}.profileError{display:none;margin-top:10px;padding:10px 12px;border-radius:var(--r-ctl);background:var(--red-soft);color:var(--red);font-size:12px;font-weight:750}.profileError.on{display:block}

/* The child-link rows on the school card: one line per child the account
   guards, with the phone's own child marked. */
.kidLine{padding:9px 0;border-top:1px solid var(--line)}
.kidLine:first-child{border-top:0}
.kidLine b{display:block;font-size:15px}
.kidLine small{display:block;color:var(--muted);font-size:13px;margin-top:1px}
.kidLine.on b{color:var(--accent)}
.kidLine .textBtn{margin-top:6px;min-height:44px}
/* A hint under a field, where the field itself needs a sentence of context. */
.fieldHint{display:block;color:var(--muted);font-size:13px;line-height:1.35;margin-top:6px}

/* Geometry, pictogram tables and the digital clock face inside a question card. */
.shape{width:160px;height:160px;display:block;margin:0 auto}
.pict{border-collapse:collapse;margin:0 auto;font-size:15px}
.pict th{text-align:right;padding:4px 10px 4px 0;font-weight:650;color:var(--ink);white-space:nowrap}
.pict td{padding:4px 0;font-size:22px;letter-spacing:2px;white-space:nowrap}
/* Voz je lanac i mora se čitati kao lanac. Prelomljen u dva reda prestaje biti
   voz — zadnje polje se nađe ispod sredine i veza se izgubi. Zato ne prelama,
   nego se stisne: četiri polja i tri strelice stanu i na 320px. */
.satCrtaj{display:flex;flex-direction:column;align-items:center;gap:8px}
.satZiv .satMeta:active{fill:rgba(126,110,232,.16)}
.satZiv{width:212px;height:212px}
.satZiv.satTacno circle:first-of-type{stroke:#3E9B4F}
.satZiv.satNetacno circle:first-of-type{stroke:#D93B3B}
.satUputa{font-size:14px;font-weight:650;color:var(--muted);text-align:center;line-height:1.35}
.satUputa b{color:var(--ink)}
@media (orientation:portrait) and (max-height:640px){.satZiv{width:168px;height:168px}}
.voz{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:2px;
  max-width:100%;overflow-x:auto;padding-bottom:2px}
.vozP{flex:none;min-width:36px;padding:7px 5px;border:2px solid var(--line);border-radius:var(--r-ctl);
  background:var(--surface);font-size:18px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.vozP.prazno{border-style:dashed;color:var(--muted)}
.vozS{flex:none;display:flex;flex-direction:column;align-items:center;min-width:30px;color:var(--muted)}
.vozS i{font-style:normal;font-size:13px;font-weight:800;line-height:1;white-space:nowrap}
.vozS::after{content:"→";font-size:16px;line-height:1;margin-top:1px}
/* Piramida od tri reda ima tri visine polja i dva razmaka, i to je najviši
   crtež koji aplikacija crta. Sa 44px poljem bila je 151px — više nego što joj
   kartica da i na velikom telefonu, pa se donji red krio. Polje je zato niže
   nego što bi izgled tražio: bolje manja piramida koja se cijela vidi. */
.pir{display:flex;flex-direction:column;align-items:center;gap:3px}
.pirRed{display:flex;gap:3px}
.pirP{min-width:40px;padding:5px 6px;border:2px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);
  font-size:18px;font-weight:800;line-height:1.15;text-align:center;font-variant-numeric:tabular-nums}
.pirP.prazno{border-style:dashed;color:var(--muted)}
@media(max-width:360px){.vozP{min-width:31px;font-size:16px;padding:6px 3px}.vozS{min-width:25px}
  .vozS i{font-size:12px}.pirP{min-width:35px;font-size:16px;padding:4px 4px}}
.kljuc{border-collapse:collapse;margin:0 auto;font-variant-numeric:tabular-nums}
.kljuc td,.kljuc th{border:1px solid var(--line);padding:5px 9px;min-width:31px;text-align:center;font-size:16px;font-weight:750;line-height:1.1}
.kljuc th{background:#F4F3F8;font-size:18px;font-weight:800}
.digital{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:44px;font-weight:700;letter-spacing:.06em;background:#16192B;color:#7CFFB2;padding:8px 18px;border-radius:12px}
/* Colour swatches for Likovno: the colour itself, named underneath. */
.swatch{width:74px;height:74px;border-radius:14px;border:2px solid #26325F;display:grid;align-items:end;justify-items:center;padding-bottom:0}
.swatch i{font-style:normal;font-size:12px;font-weight:650;background:rgba(255,255,255,.9);color:#16192B;padding:1px 7px;border-radius:7px;transform:translateY(10px)}
.plus{font-size:32px;font-weight:800;color:#26325F;align-self:center}

/* Zadatak od učiteljice: it came from a person, so it does not look like the
   app's own suggestion. Accent border, who asked, by when, how far along. */
#taskList{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.taskCard{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-box);padding:14px 14px 14px 104px;min-height:160px;box-shadow:var(--shadow-lift)}
.taskCard .tkLik{position:absolute;left:4px;bottom:0;width:96px;height:150px}
.taskCard .tkOblak{background:#FFF8E6;border:1.5px solid #F0DFB4;border-radius:14px 14px 14px 4px;padding:9px 11px;font-size:15px;font-weight:650;line-height:1.3}
.taskCard.tkKuca .tkOblak{background:#EEF4FF;border-color:#CFDDF7}
.taskCard .tkOblak small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px}
.taskCard .tkName{font-size:18px;font-weight:700;line-height:1.25}
.taskCard .tkPred{display:flex;gap:6px;flex-wrap:wrap}
.taskCard .tkCip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.taskCard .tkCip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.taskCard .tkRed{display:flex;align-items:center;gap:10px}
.taskCard .tkBar{flex:1;height:8px;border-radius:999px;background:#E7E7E2;overflow:hidden}
.taskCard .tkBar i{display:block;height:100%;background:var(--green);border-radius:999px}
.taskCard .tkN{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.taskCard .tkGo{background:var(--accent);color:#fff;border-radius:12px;font-weight:700;font-size:16px;padding:10px 14px;text-align:center}
@media(prefers-reduced-motion:no-preference){.taskCard .ruka{transform-origin:12px -62px;transform-box:view-box;animation:tkMahni 1.6s ease-in-out .3s 2}}
@keyframes tkMahni{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-14deg)}}
@media(max-width:360px){.taskCard{padding-left:88px}.taskCard .tkLik{width:82px;height:128px}}
.taskDone{display:flex;align-items:center;gap:0;width:100%;
  background:transparent;border:0;border-top:1px solid var(--line);
  padding:9px 4px 0;margin-top:2px;
  color:var(--muted);font-size:13px;font-weight:600;line-height:1.3}
.taskDone .tdOk{color:var(--green,#2E9E6B);font-weight:800;width:13px;flex:none}
.taskDone .tdName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* One loud thing at a time: with a task waiting, the daily card steps back. */
body.hasTask .daily{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
body.hasTask .daily small{color:var(--muted)}
body.hasTask .daily .go{color:var(--muted)}
@media (prefers-reduced-motion: no-preference){.taskCard .tkBar i{transition:width .4s ease}}
/* Pravljenje zadatka: checkbox rows and labelled control groups. */
/* Qualified with the element: `.parentBox label{display:block}` is more specific
   than a bare class and was flattening the row — box and word 3px apart, box
   riding 4px high, and the word inheriting font-weight 800. */
label.zPick{display:flex;align-items:center;gap:12px;padding:10px 2px;min-height:44px;margin:0;border-bottom:1px solid var(--line);font-weight:400;cursor:pointer}
label.zPick:last-child{border-bottom:0}
label.zPick input{width:21px;height:21px;margin:0;accent-color:var(--accent);flex:none}
label.zPick span{font-size:15px;font-weight:500;color:var(--ink);line-height:1.3}
.zRow{margin-top:14px}
.zRow>label{display:block;font-size:13px;font-weight:650;color:var(--muted);margin-bottom:6px}
.zRow>label small{font-weight:400}
.seg.zTez{grid-template-columns:repeat(3,1fr)}
.seg.zDva{grid-template-columns:repeat(2,1fr)}
.seg.zPet{grid-template-columns:repeat(5,1fr)}
.skTag.nizOk{color:var(--st-practice)}
.skTag.nizNe{color:#A94447}
.seg.zTez button{white-space:nowrap}
.zPregled{margin-top:10px}
.zManjak{color:#8A5A12;background:#FFF6E3;border-radius:var(--r-ctl);padding:8px 10px;margin-bottom:8px}
.zPregledVrh{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:7px}
.zQ{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border-radius:var(--r-ctl);
  background:var(--surface);border:1px solid var(--line);margin-bottom:6px}
.zQn{flex:none;width:20px;height:20px;border-radius:50%;background:#F4F3F8;color:var(--muted);
  font-size:11px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.zQt{flex:1;min-width:0}
.zQt b{display:block;font-size:14px;font-weight:700;line-height:1.3}
.zQt small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3}
.zQx{flex:none;width:26px;height:26px;border-radius:var(--r-ctl);border:1px solid var(--line);
  background:var(--surface);color:var(--muted);font-size:13px;font-weight:800;line-height:1}
.zQx+.zQx{margin-left:-3px}
.zQx:active{background:var(--red-soft);border-color:#F0C3C4;color:#A94447}
.zKids{margin-top:10px;max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-box);padding:0 12px}
.zDel{color:var(--red)}
.zPon{margin-right:6px}
.zOpsegTeme{display:grid;gap:8px}
.zOpseg{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:650}
.zOpseg span{flex:1;min-width:0;line-height:1.25;font-size:15px}
.zOpsegSeg{flex:none;display:flex;gap:2px;padding:3px;margin:0}
.zOpsegSeg button{min-height:0;padding:7px 12px;font-size:14px;white-space:nowrap}

/* ── Pazi dobro ─────────────────────────────────────────────────────────────
   One thing at a time, big enough to hit without aiming. The rail above is the
   only score a child sees while it runs: a filled dot per item, green when the
   right thing happened, red when it did not. */
.gng{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:8px}
.gngRail{display:flex;gap:7px}
.gngRail i{width:13px;height:13px;border-radius:50%;background:var(--line-strong);display:block}
.gngRail i.ok{background:var(--st-practice)}
.gngRail i.bad{background:var(--red)}
.gngCard{width:100%;max-width:340px;min-height:132px;border-radius:var(--r-box);
  border:2px dashed var(--line-strong);background:var(--surface);color:var(--muted);
  font-size:38px;font-weight:750;display:grid;place-items:center;transition:transform .12s ease}
.gngCard.on{border-style:solid;border-color:var(--accent);color:var(--ink);background:var(--surface);box-shadow:var(--shadow-lift)}
.gngCard.hit{transform:scale(.95);background:var(--accent-soft)}
.gngNote{font-size:15px;color:var(--muted);min-height:22px;text-align:center;font-weight:600}
.gngKreni{display:block;margin:14px auto 0;min-width:200px}
.gngKreni[hidden]{display:none}

/* ── Osjećaj za vrijeme ──────────────────────────────────────────────────── */
#play:has(.tim) .qcard,#play:has(.gng) .qcard,#play:has(.mem) .qcard,#play:has(.mir) .qcard{min-height:0;padding:20px}
.tim{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:8px}
.timBig{font-size:76px;font-weight:800;line-height:1;color:var(--accent);min-height:78px;
  font-variant-numeric:tabular-nums;transition:opacity .25s ease}
.timBig.soft{color:var(--line-strong);font-size:56px}
.timBar{width:100%;max-width:340px;height:14px;border-radius:999px;background:var(--line);overflow:hidden}
.timBar i{display:block;height:100%;width:0;background:var(--accent);border-radius:999px}
.timBtn{max-width:340px;touch-action:none;user-select:none;-webkit-user-select:none}
.timNote{font-size:15.5px;font-weight:650;color:var(--muted);min-height:24px;text-align:center}
.timNote.ok{color:var(--st-practice)}
.timNote.bad{color:var(--red)}

/* ── Zapamti pa odgovori ─────────────────────────────────────────────────── */
.mem{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:8px}
.memRow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.memItem{padding:16px 22px;border-radius:var(--r-box);background:var(--accent-soft);
  color:var(--accent-ink);font-size:30px;font-weight:750;line-height:1.1}
.memBar{width:100%;max-width:340px;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.memBar i{display:block;height:100%;width:0;background:var(--accent);border-radius:999px}
@media (prefers-reduced-motion: reduce){.memBar i,.timBar i{transition:none!important}}

/* ── Poslušaj ───────────────────────────────────────────────────────────────
   Some questions are the sound. The button that plays it sits in the card,
   because it is the question and not one of the answers. */
.btn.listen{margin:14px auto 0;max-width:260px;background:var(--accent-soft);color:var(--accent-ink);font-size:16px}
.btn.listen.playing{opacity:.6}

/* ── Ogledalo ───────────────────────────────────────────────────────────── */
.mir{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:6px}
.mirGrid{display:grid;gap:5px;width:100%;max-width:330px}
.mirCell{aspect-ratio:1;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);padding:0}
.mirCell.fold{border-left:2.5px dashed var(--line-strong)}
.mirCell.on{background:var(--accent);border-color:var(--accent)}
.mirCell.given{background:var(--accent-ink);border-color:var(--accent-ink);opacity:.9}
.mirCell.should{box-shadow:inset 0 0 0 3px var(--st-practice)}
.mirCell.wrongCell{background:var(--red-soft);border-color:var(--red)}

/* A topic the child does rather than answers: it opens like any other, but it
   can never become a set of questions, and the row has to say so. */
.paceRow .noQ{display:block;font-size:11.5px;font-weight:600;color:var(--st-locked);margin-top:2px}

/* ── a tablet held sideways ──────────────────────────────────────────────
   The question screen was written as a phone column and stayed 560px wide on
   an 1194px tablet: half the glass empty while the answer fell off the bottom
   and "Dalje" needed a scroll. Landscape has width to spare and no height to
   waste, so the question goes left and everything the child touches goes
   right, and the whole turn fits without moving the page. */
@media (orientation:landscape) and (min-width:720px){
  :is(#play.on,#igra.on #play){
    display:grid;
    max-width:1080px;
    column-gap:34px;
    align-items:start;
    grid-template-columns:1fr 1fr;
    /* The two blank rows are springs: they share whatever height is left over,
       so the turn sits in the middle of the glass instead of clinging to the
       top bar. When the content is tall they collapse to nothing and no part
       of the question is ever pushed off the screen. */
    grid-template-rows:auto 1fr auto auto 1fr;
    grid-template-areas:
      "top    top"
      "air    air"
      "topic  topic"
      "quest  ans"
      "airEnd airEnd";
  }
  :is(#play.on,#igra.on #play) .top{grid-area:top}
  :is(#play.on,#igra.on #play) .qTopic{grid-area:topic}
  :is(#play.on,#igra.on #play) .qcard{grid-area:quest;margin:0;align-self:start}
  :is(#play.on,#igra.on #play) .ansCol{grid-area:ans}
  /* The card no longer has a column of its own to fill out. */
  :is(#play.on,#igra.on #play) .qcard{min-height:0;padding:28px 24px}
  :is(#play.on,#igra.on #play) .pad{max-width:360px}
  /* The deep bottom padding exists to lift a button clear of a phone's gesture
     bar. Sideways there is no such bar under the answer, and the allowance
     only weighed the turn down against the top of the screen. */
  :is(#play.on,#igra.on #play){padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}
}
@media (orientation:landscape) and (min-width:720px) and (min-height:560px){
  :is(#play.on,#igra.on #play){min-height:calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}

/* The read-aloud button floats in the card's corner, and a reading passage
   runs its first line straight underneath it. Keep the text clear of it. */
.qcard .txt::before{content:"";float:right;width:50px;height:32px}

/* A tablet stood upright has the opposite problem: one column is right, but
   the turn sat against the top bar with a third of the glass empty beneath it.
   Same springs, one column. Phones keep their top-anchored layout, where the
   question already fills the screen and a moving "Dalje" would only wander. */
@media (orientation:portrait) and (min-width:700px){
  :is(#play.on,#igra.on #play){
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr auto auto 1fr;
    grid-template-areas:"top" "air" "topic" "quest" "ans" "airEnd";
    min-height:calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding-bottom:calc(env(safe-area-inset-bottom) + 8px);
  }
  :is(#play.on,#igra.on #play) .top{grid-area:top}
  :is(#play.on,#igra.on #play) .qTopic{grid-area:topic}
  :is(#play.on,#igra.on #play) .qcard{grid-area:quest}
  :is(#play.on,#igra.on #play) .ansCol{grid-area:ans}
}

/* The count-in lives under the card, so nothing that looks tappable appears
   before the run has actually begun. */
.gngNote b{font-variant-numeric:tabular-nums;color:var(--ink)}
.paceRow .noQ.overTen{color:var(--st-learning)}

/* The teacher's maths ceiling for one pupil: a row of choices inside the
   pupil's own panel, where her three numbers already are. */
.kidStage{margin:14px 0 4px}
.kidStage>b{display:block;font-size:13px;font-weight:800;margin-bottom:7px}
.kidStage .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.kidStage .seg button{font-size:12px;padding:9px 6px;line-height:1.25;white-space:normal;text-align:center}
.kidStage .miniInfo{margin:7px 0 0}

/* A choice the teacher has taken over. It must look unavailable, not merely
   fail to respond — four live-looking buttons that do nothing read as a bug. */
.pick[disabled]{opacity:.45;pointer-events:none}
.seg button[disabled]{opacity:.5;pointer-events:none}

/* A new build, arriving while a child is mid-question. It never interrupts —
   the app refreshes itself the moment she is out of the run — so this bar is
   only for the case where waiting would be worse than asking. */
.updBar{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);
  display:flex;align-items:center;gap:12px;z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);
  padding:12px 14px;box-shadow:0 8px 28px rgba(43,39,78,.14);font-size:14px;font-weight:650}
.updBar span{flex:1}
.updBar .btn{width:auto;padding:9px 16px;font-size:14px;min-height:0}

/* Reads aloud, or does not. One tap, beside the name, only on topics where
   there is something to read — and never on the one where the reading IS the
   exercise, which has no choice to make. */
/* Not a float: floating it narrowed the pace segment on every row that had
   one, by the width of the button, for the segment's whole height — so the
   nineteen Bosanski rows had visibly shorter buttons than the rest. */
.paceRow>.nm{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.paceRow>.nm>.sayTog{order:2;margin-left:auto;align-self:flex-start}
.paceRow>.nm>.noQ{order:3;flex-basis:100%;margin-top:2px}
.paceRow .sayTog{flex:none;width:34px;height:34px;border-radius:var(--r-ctl);
  background:var(--surface);border:1px solid var(--line);font-size:15px;line-height:1}
.paceRow .sayTog.off{background:var(--st-locked-soft);opacity:.75}
.paceRow .sayTog:active{transform:scale(.95)}

/* What a topic actually is: the curriculum's own one-line description, and a
   real question drawn from the generator so it can never go out of date. */
/* A topic row is now three or four lines; a checkbox centred against all of
   them sits beside the example instead of the name it belongs to. Pupil rows
   in "Kome ide" are still one line and stay centred. */
label.zPick:has([data-topic]){align-items:flex-start}
label.zPick:has([data-topic])>input{margin-top:2px}
label.zPick .zDs,label.zPick .zEx{display:block;font-weight:500;line-height:1.35;margin-top:2px}
label.zPick .zDs{font-size:12.5px;color:var(--muted)}
label.zPick .zEx{font-size:12.5px;color:var(--purple)}
/* The description explains; the warnings warn. The description was the darker
   and heavier of the two, so "dijete radi · nema pitanja" read as the quieter
   line under it. And the 34px speaker set the first line's height, dropping
   the description 15px away from the name it describes — so it comes out of
   the flow and the name simply keeps clear of it. */
.paceRow{position:relative}
.paceRow>.nm>.paceDs{order:3;flex-basis:100%;font-size:11.5px;font-weight:450;color:#8A8C99;margin-top:1px}
.paceRow>.nm>.sayTog{position:absolute;right:0;top:0;margin:0}
.paceRow>.nm:has(.sayTog){padding-right:42px}
/* „Probaj ›“ (2. 10.) i zvučnik su oba desno: zvučnik na rubu, Probaj lijevo
   od njega — ranije je zvučnik pokrivao Probaj i odsijecao ga na „Pr“. */
.paceRow>.nm:has(.paceProbaj){padding-right:80px}
.paceRow>.nm:has(.sayTog):has(.paceProbaj){padding-right:120px}
.paceRow>.nm:has(.sayTog)>.paceProbaj{right:34px}

/* ── the turn fits the screen, whatever the screen ───────────────────────
   This was a stack of fixed heights — a 190px card, a 259px pad, a 53px
   button — that added up to about 850px and therefore fitted some phones and
   not others. Every device that did not fit got its own patch, and the child
   scrolled for "Dalje" on the rest.
   
   So the screen owns the viewport instead of adding up to it. The column is
   exactly as tall as the glass; the top bar and everything the child taps are
   fixed; the question card and the number pad are the parts allowed to give,
   in that order. "Dalje" cannot fall off the bottom because there is no
   bottom to fall off. */
@media (orientation:portrait){
  /* `height`, not `min-height`: a minimum is a floor the content can still
     climb over, and it did. A height is a ceiling. Everything below then has
     to fit inside it, and the parts are told plainly which of them gives way.
     Nothing here is a flex container that centres or spreads: on a tall phone
     the turn stacks from the top exactly as it always did, and the spare room
     sits quietly at the bottom. */
  :is(#play.on,#igra.on #play){
    display:flex;flex-direction:column;
    height:calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding-bottom:calc(env(safe-area-inset-bottom) + 8px);
  }
  :is(#play.on,#igra.on #play)>.top,:is(#play.on,#igra.on #play)>.qTopic{flex:none}
  /* The card is what gives — a one-line sum needs no block of air, and a
     passage too long for the glass scrolls inside its own card — but never
     below one readable line. */
  /* The card claims the slack instead of leaving it as dead air after "Dalje".
     Its own rule already centres its content vertically (justify-content:
     center from the base .qcard), so a taller box just re-centres the sum —
     nothing inside it has to change. Capped, so a tablet in portrait gets a
     generous card, not a runaway one; the answers keep their natural size and
     never fight the card for room. */
  :is(#play.on,#igra.on #play)>.qcard{flex:1 1 auto;min-height:72px;max-height:340px;overflow:auto}
  /* Pazi dobro, Zapamti, Ogledalo, Osjećaj za vrijeme: :root already has a rule
     that shrinks these on purpose (min-height:0, further up this file). It
     tied on specificity with the flex-grow above and lost on source order, so
     "Dodirni samo neparne brojeve." or a single "Zapamti ovo." was stretching
     to fill the same 340px a reading passage earns — the numbers a child has
     to memorise pushed most of a phone screen down. These four keep the shape
     they already had; only an ordinary question card grows. */
  :is(#play.on,#igra.on #play):has(.gng)>.qcard,:is(#play.on,#igra.on #play):has(.tim)>.qcard,:is(#play.on,#igra.on #play):has(.mem)>.qcard,:is(#play.on,#igra.on #play):has(.mir)>.qcard{
    flex:0 1 auto;max-height:none;
  }
  /* Nove vrste pitanja (js/zivo) imaju svoju scenu ispod: kartica s pitanjem
     ne raste u prazno, nego scena dobije mjesto (Fable, 6. 10.). */
  :is(#play.on,#igra.on #play):has(.zivoScena)>.qcard{flex:0 1 auto;max-height:none;min-height:0;padding-top:18px;padding-bottom:18px}
  :is(#play.on,#igra.on #play)>.ansCol{flex:0 1 auto;min-height:auto;display:flex;flex-direction:column}
  /* What the child taps neither grows nor shrinks with the screen's whims. */
  :is(#play.on,#igra.on #play)>.ansCol>#answer{flex:none}
  :is(#play.on,#igra.on #play)>.ansCol>.status,:is(#play.on,#igra.on #play)>.ansCol>.next{flex:none}
  :is(#play.on,#igra.on #play)>.ansCol>.teachBox{flex:0 1 auto;min-height:0;overflow:auto}
  /* Keys scale with the glass, between a finger's minimum and their full size —
     by the viewport, not by flex, so the grid keeps its ordinary width. */
  :is(#play.on,#igra.on #play) #answer .pad .k{height:clamp(44px,6.4dvh,58px)}
  :is(#play.on,#igra.on #play) #answer .entry{min-height:clamp(52px,7dvh,64px)}
}

/* One slot for "Ne znam još" and for the feedback — the same cell of a grid,
   so whichever is on screen sits where the other would have. The slot keeps its
   height when both are off, so answering never moves the button below it. */
.status{display:grid;min-height:54px;margin-top:8px}
.status>.dontKnow,.status>.fb{grid-area:1/1;margin:0}
/* The banner is trimmed to the slot rather than the slot raised to the banner:
   six pixels is the difference between fitting and not on a 320px phone. */
.status>.fb{padding:10px 14px;align-items:center}
.status>.fb.on{display:flex}

/* ── the home screen, lighter ──────────────────────────────────────────── */
/* The child's own dial. Three plain words, one pressed. */
  font-size:13.5px;font-weight:700;color:var(--muted)}
.advDot{width:9px;height:9px;border-radius:50%;background:#E4E3EA}
.advDot.done{background:var(--green)}
.advDot.current{background:var(--purple);box-shadow:0 0 0 3px var(--purple-soft)}

/* ── slova ──────────────────────────────────────────────────────────────
   Jedna porodica na svim ekranima — i djetetovim i učiteljičinim.

   Prije su bile dvije: Familjen Grotesk odraslima, Andika djetetu. Andika je
   SIL-ov font za opismenjavanje i biran je zbog oblika slova, ne zbog stila —
   a i g prosti, onakvi kakve dijete piše rukom, I s crticama gore i dolje pa
   se razlikuje od l i od 1. To je bilo tačno, ali je cijeloj aplikaciji davalo
   dječiji ton koji joj ne treba: roditelj i učiteljica gledaju isti proizvod.

   IBM Plex Sans zadržava ono zbog čega je Andika i uzeta — ima sve naše
   znakove (čćžšđ) i jasno razlikuje I, l i 1 — a ozbiljan je a da nije
   hladan. Dancing Script ostaje samo za vježbu pisanih slova. */
#play .qcard .q{letter-spacing:0;line-height:1.3}

/* Niski ekrani: tekst se smanji da stane, umjesto da se sakrije.
   Kartica ima overflow:auto, pa preliv ne gura stranicu nego nestane unutar
   nje — dijete vidi pola pitanja i ne zna da fali. Na 320×568 se tako gubilo
   106 piksela priče. Bolje sitniji slog nego odsječena rečenica. */
@media (orientation:portrait) and (max-height:700px){
  #play .qcard{padding:14px 10px}
  #play .qcard .q{font-size:20px;padding:0 12px;line-height:1.26}
  #play .qcard .q.big{font-size:34px}
  #play .qcard .q.story{font-size:17px;line-height:1.4}
  #play .qcard .txt{font-size:16px;line-height:1.42;margin:0 0 10px}
  #play .qcard .sent{font-size:21px}
  #play .qcard .vis{margin-top:10px}
  #play .qcard .vis .emoji{font-size:44px}
}
/* Na najkraćim telefonima priča i pitanje dobiju 110px, a tri ponuđena
   odgovora uzmu 206px — pa se kraj pitanja sakrije unutar kartice, gdje ga
   provjera skrola stranice ne vidi. Dugmad se ovdje stisnu za desetak piksela
   po komadu (i dalje iznad 44px, koliko prst traži), a ta razlika ide kartici.
   Bolje malo niže dugme nego rečenica koju dijete ne vidi. */
@media (orientation:portrait) and (max-height:640px){
  #play .choices{gap:7px}
  #play .ch{min-height:50px;padding:9px 10px;font-size:16px}
  #play .ch.big{font-size:24px}
  #play .multiItem{min-height:50px;padding:8px;font-size:15px}
  #play .spItem{min-height:46px;font-size:15px}
  #play .rzStvar{min-height:40px;padding:8px 11px;font-size:15px}
  #play .pad{gap:7px}
  #play .pad .k{height:50px;font-size:22px}
  #play .entry{min-height:52px;font-size:32px;margin-bottom:9px}
  #play .satZiv{width:154px;height:154px}
  #play .tools .btn{padding:8px 14px;font-size:14px}
  #play .multiSubmit{padding:10px 18px;font-size:16px}
}
/* Kratki telefoni. Sve se stisne još jednom — ali tipka ostaje na 44px, koliko
   prst traži, i to je granica ispod koje se ne ide. Sat, voz i četiri duge
   tvrdnje su najviši ekrani koje imamo, i tek su oni pokazali da ovoga nije
   bilo.

   Granica je 660px, a ne 600: na 360×640 je piramida gubila donji red baš zato
   što je taj ekran ispadao iz stiskanja. Ovo je mjereno, ne procijenjeno. */
@media (orientation:portrait) and (max-height:660px){
  /* Izmjereno na 320×568: kartici s piramidom fali 19px, a četiri reda tipki
     drže 197. Tipka ide na 44px — koliko prst traži, i ispod toga se ne ide —
     a polje za upis s 52 na 42, gdje broj od 26px još uvijek stoji udobno.
     Tako kartica dobije dvadesetak piksela, taman za donji red piramide. */
  #play .pad{gap:6px}
  #play .pad .k{height:44px;font-size:19px}
  #play .entry{min-height:42px;font-size:26px;margin-bottom:6px}
  #play .ch{min-height:46px;padding:7px 9px;font-size:15px}
  #play .satZiv{width:132px;height:132px}
  #play .satUputa{font-size:12px}
  #play .tools{margin-top:4px}
  #play .tools .btn{padding:6px 12px;font-size:13px}
  #play .multiSubmit{padding:9px 16px;font-size:15px;margin-top:7px}
  #play .vozP{min-width:29px;font-size:15px;padding:5px 3px}
  #play .vozS{min-width:23px}
  #play .pirP{min-width:31px;font-size:15px;padding:2px 3px;line-height:1.1}
  /* Crtež se u kartici drži bliže pitanju. Osamnaest piksela razmaka je lijepo
     dok kartica ima 300px visine; na 568px ekrana ona ima 150 i ta razmaka
     odnese petinu. Piramida od tri reda i pitanje u tri reda tako prestanu
     stajati zajedno — a sakrije se donji red, koji je ono što dijete gleda. */
  #play .qcard .vis{margin-top:6px}
  #play .pir{gap:2px}
  #play .pirRed{gap:2px}
  #play .voz{gap:1px}
  /* Mjesto za povratnu poruku drži 54px da se ništa ispod njega ne pomjeri kad
     poruka dođe. Na ekranu od 568px to je desetina visine koja stoji prazna, a
     kartici s pitanjem ostaje 72px — njen minimum. Na tako niskom ekranu je
     bolje da poruka pomjeri red nego da se pitanje ne vidi; razmak se zato
     stisne, a ne ukine. */
  /* Dugme „Dalje“ stoji na ekranu i prije nego ima kuda — namjerno, da ne
     iskoči i ne pomjeri sve iznad sebe. Na kratkom telefonu ono i mjesto za
     poruku drže skoro stotinu piksela, a kartici s pitanjem ostaje osamdeset.
     Zato se oboje stišavaju: dugme ostaje, samo je niže. */
  #play .status{min-height:34px;margin-top:4px}
  #play .next{margin-top:4px}
  #play .next .btn{padding:9px 18px;font-size:16px}
  #play .qcard .vis:has(.pir),#play .qcard .vis:has(.voz){margin-top:5px}
  #play .fb .t{font-size:13px;line-height:1.3}
  #play .fb .e{font-size:17px}
}
@media (orientation:portrait) and (max-height:600px){
  #play .qcard{padding:7px 6px}
  #play .qcard .q{font-size:17px;padding:0 6px;line-height:1.18}
  #play .qcard .q.big{font-size:28px}
  #play .qcard .q.story{font-size:15px;line-height:1.33}
  #play .qcard .txt{font-size:13px;line-height:1.28;margin:0 0 5px}
  /* Račun ispod pitanja („8 + 5 = 12“, „(7 + 6) − 9“) je drugi red koji kartica
     mora smjestiti uz sam tekst pitanja. Na najnižem ekranu se razmak između
     njih stiša — inače se posljednji red pitanja sakrije. */
  #play .qcard .sent{font-size:18px;margin-top:5px}
  #play .qcard .vis .emoji{font-size:36px}
}

/* Bijela kartica s blagim okvirom.
   Sveska je bila ideja s razlogom — linijatura je govorila u kojem si
   predmetu — ali u rukama je smetala: crte se nisu poklapale s tekstom i oko
   je čitalo i jedno i drugo. Poravnavanje i stišavanje nisu bili dovoljni.
   Kad ukras otme pažnju od onoga što se čita, ukras ide, ne tekst. */
#play .qcard,#done .result{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-box);
}

/* One list, not ten identical cards. The rows lose their separate borders and
   become a single surface with hairlines — which leaves "Današnja vježba" and
   "Gotovo!" as the only card-shaped things a child ever sees. */
#subject .acts{gap:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-box);overflow:hidden}
#subject .acts .act{border:0;border-radius:0;border-top:1px solid var(--line);background:transparent}
#subject .acts .act:first-child{border-top:0}
#subject .acts .act:active{background:#FBFAFF}

/* Finishing a run is the one moment that should not look like a row in a
   register. Paper, margin, no hairline box. */
#done .result{padding:26px 22px}
#done #doneTitle{font-size:var(--t-xl);line-height:1.15}

/* ── STAZA ──────────────────────────────────────────────────────────────────
   Ne kartica nego mjesto. Nebo, brdo, tlo u koje se sadi — sve SVG, bez ijedne
   slike, pa se učitava odmah i radi bez mreže. Pokret ima budžet i troši se
   ovdje: scena se sastavlja, sadnice niknu, i ništa drugo se ne miče. */
/* Kartica na početnom ekranu: scena gore, ime i šta slijedi dolje, Kreni
   desno. Scena nije ukras — to je isti crtež iz istih podataka kao na ekranu
   Staze, pa se napredak vidi prije nego dijete išta pritisne. */
.stazaCard{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:0 12px;width:100%;padding:0 0 13px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-box);text-align:left;color:var(--ink)}
.stazaCard:active{transform:scale(.995)}
.stazaCard .szScena{grid-column:1/-1;display:block;line-height:0}
.stazaCard .szScena .scena{border-radius:0}
/* Slika prave bašte (basta-slika.js) umjesto SVG-a: isti okvir 4:3, i prije
   nego se slika dekodira, pa se kartica ne trzne. */
.stazaCard .szScena .szSlika{aspect-ratio:4/3;object-fit:cover}
/* Jedna stvar umjesto cijele bašte (kartica-dio.js): dio koji tek dolazi je
   blijed i bez boje; Moj lik pored njega lagano diše. */
.szJedno .szBuduce{filter:grayscale(1) brightness(1.08);opacity:.6}
.szJedno .szLik{animation:szDise 3.2s ease-in-out infinite}
@keyframes szDise{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* Moj lik (lik-tijelo.js) trepće gdje god stoji, kao na izletu. */
.likOci{transform-box:fill-box;transform-origin:center;animation:likTrep 4.6s infinite}
@keyframes likTrep{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}}
@media (prefers-reduced-motion:reduce){.szJedno .szLik,.likOci{animation:none}}
/* Položen telefon (visina ~390px): scena preko cijele širine je sama viša od
   ekrana i „Igraj“ padne ispod. Tu scena ide lijevo, a obećanje i dugme desno. */
@media (orientation:landscape) and (max-height:520px){
  .stazaCard{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;padding:0;gap:0 18px}
  /* Scena ne diktira visinu: kartica je visoka koliko tekst i dugme (ili
     najmanje 200px), a scena to popuni (preserveAspectRatio slice). */
  .stazaCard .szScena{grid-column:1;grid-row:1/5;align-self:stretch;position:relative;min-height:200px}
  .stazaCard .szScena .szJedno{position:absolute;inset:0;height:100%}
  .stazaCard .szCopy{grid-column:2;grid-row:2;padding:14px 16px 0 0}
  .stazaCard .szGo{grid-column:2;grid-row:3;justify-self:start;margin:14px 0 16px}
}
.stazaCard .szCopy{padding:12px 0 0 16px;min-width:0}
.stazaCard .szCopy b{display:block;font-size:22px;line-height:1.1}
.stazaCard .szCopy small{display:block;font-size:13px;color:var(--muted);
  font-weight:550;margin-top:5px;line-height:1.3}
.stazaCard .szGo{margin:12px 16px 0 0;background:var(--purple);color:#fff;
  border-radius:var(--r-ctl);padding:13px 21px;font-size:17px;font-weight:800;
  white-space:nowrap;box-shadow:0 4px 0 rgba(0,0,0,.16)}
.stazaCard:active .szGo{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.16)}

#stazaSum2{padding:0}
.svijet{position:relative;border-radius:var(--r-box);overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.05)}
.scena{display:block;width:100%;height:auto}
/* Živa bašta (js/igra/basta.js) leži preko SVG bašte i pretopi se u nju; kad
   preuzme, SVG ode, a kartica zadrži isti oblik (4:3, kao viewBox 400×300).
   Uspravno vučenje ostaje stranici — prst vodoravno vuče baštu. */
.svijet.ziva{aspect-ratio:4/3}
/* Uspravan telefon (basta-ekran.js visinaZaleda): scena je viša od 4:3 i
   pokrije cijeli ekran, bašta dolje, zaleđe gore; kartica pliva preko nje.
   Dok se živa bašta ne učita, SVG stoji na dnu okvira, na boji neba. */
@media (max-width:599px) and (orientation:portrait){
  /* .uspravna.uspravna: jače od pravila spuštene kartice (html.sumSkupljeno …),
     da scena ostane ista i kad je kartica dolje. */
  .bastaEkran .sumScena.uspravna.uspravna{position:fixed;inset:0;z-index:0;width:auto;margin:0;overflow:hidden;display:block;
    --dizanje:max(0px,calc(var(--podigni,0px) - var(--prednjiUdio,0) * 100dvh));
    transform:translateY(calc(-1 * var(--dizanje)));transition:transform .38s cubic-bezier(.3,.9,.3,1)}
  html.sumSkupljeno .bastaEkran .sumScena.uspravna.uspravna{transform:none}
  /* Kad scena klizne gore, ispod nje ostane traka: iste boje kao tlo. */
  .bastaEkran .sumScena.uspravna.uspravna::after{content:'';position:absolute;left:0;right:0;top:100%;height:var(--dizanje,0px);background:var(--sumTlo,#8C7A62)}
  .bastaEkran .sumScena.uspravna.uspravna .svijet{position:absolute;left:50%;top:0;bottom:auto;height:100%;width:calc(100dvh * var(--omjer,1.3333));max-width:none;aspect-ratio:auto;
    background:var(--sumNebo,#22305C);transform:translateX(calc(-50% + var(--klizi)));border-radius:0}
  /* SVG (dok živa bašta ne stigne) stoji tamo gdje će stajati živa: iznad
     livade sprijeda, a ispod njega je zemlja iste boje kao dno SVG-a. */
  .bastaEkran .sumScena.uspravna.uspravna .svijet{background:linear-gradient(to top,var(--sumTlo,#8C7A62) calc(var(--prednjiUdio,0) * 100%),var(--sumNebo,#22305C) calc(var(--prednjiUdio,0) * 100%))}
  .bastaEkran .sumScena.uspravna.uspravna .svijet>svg{position:absolute;left:0;bottom:calc(var(--prednjiUdio,0) * 100%);width:100%;height:auto}
  .bastaEkran:has(.sumScena.uspravna) .bastaSadrzaj{display:flex;flex-direction:column;min-height:calc(100dvh - 110px)}
  .bastaEkran:has(.sumScena.uspravna) .sumKartica{margin-top:auto;z-index:1}
  html.sumPuna .bastaEkran:has(.sumScena.uspravna) .top{position:relative;z-index:2}
}
.zivaBasta{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;touch-action:pan-y}
.zivaBasta.vidi{opacity:1}
.zivaBasta canvas{width:100%!important;height:100%!important}
/* Pozdrav ide preko neba, nikad preko tla — tamo rastu biljke i one su poenta. */
.svijetTekst{position:absolute;inset:14px 0 auto 0;display:flex;justify-content:center}

/* Sve što se u sceni miče ima svoje ishodište u dnu: biljka raste iz zemlje,
   ne iz svog centra. */
.sadnica,.vlat,.cvijet,.kamen,.leptir,.dio,.dio *{transform-box:fill-box}/* Čestice padaju preko cijele scene — jedna vrsta po godišnjem dobu. Put je
   uvijek malo ukoso i različit za svaku, pa ne izgleda kao rešetka. */
.cest{transform-box:fill-box}
.latice,.lisce,.snijeg{animation:pada var(--d,10s) linear infinite;animation-delay:calc(var(--i)*-0.9s)}
@keyframes pada{0%{transform:translate(0,-10px) rotate(0)}100%{transform:translate(var(--k,4px),320px) rotate(220deg)}}
.pcela{animation:zuji var(--d,9s) ease-in-out infinite;animation-delay:calc(var(--i)*-1.3s)}
@keyframes zuji{0%,100%{transform:translate(0,0)}25%{transform:translate(26px,-14px)}50%{transform:translate(52px,6px)}75%{transform:translate(22px,-8px)}}
.mjesec{animation:sjaji 9s ease-in-out infinite}
@keyframes sjaji{0%,100%{opacity:.94}50%{opacity:1}}
.sjaj{animation:sjaji 5s ease-in-out infinite}
.krila{transform-origin:center;animation:vrti 9s linear infinite}@keyframes vrti{to{transform:rotate(360deg)}}.dim circle{transform-origin:center;animation:dimi 4.6s ease-out infinite;animation-delay:calc(var(--i)*1.5s)}@keyframes dimi{0%{transform:translate(0,6px) scale(.5);opacity:.6}100%{transform:translate(-9px,-22px) scale(1.5);opacity:0}}.svjetlucanje ellipse{animation:blista 3.4s ease-in-out infinite;animation-delay:calc(var(--i)*.8s)}@keyframes blista{0%,100%{opacity:.16;transform:translateX(0)}50%{opacity:.6;transform:translateX(5px)}}.plamen{transform-origin:center bottom;animation:treperi 2.6s ease-in-out infinite}@keyframes treperi{0%,100%{opacity:.88}50%{opacity:1}}.lept{transform-origin:center;animation:lebdi 7.5s ease-in-out infinite;animation-delay:calc(var(--i)*1.9s)}@keyframes lebdi{0%,100%{transform:translate(0,0)}25%{transform:translate(13px,-9px)}50%{transform:translate(24px,3px)}75%{transform:translate(9px,-5px)}}.ptica{transform-origin:center;animation:kljuca 5.5s ease-in-out infinite}@keyframes kljuca{0%,84%,100%{transform:rotate(0)}88%,96%{transform:rotate(11deg)}92%{transform:rotate(0)}}.krosnja{transform-origin:center bottom;animation:njise 6.5s ease-in-out infinite}@keyframes njise{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}.macka{transform-origin:center bottom;animation:vreba 8s ease-in-out infinite}@keyframes vreba{0%,90%,100%{transform:translateY(0)}94%{transform:translateY(-2px)}}.scena.zedna .sadnica{transform-origin:center bottom;transform:rotate(-7deg) scaleY(.9)}.scena.zedna .vlat{opacity:.55}.scena.zedna .krila{animation-duration:26s}.scena.zedna .lept,.scena.zedna .dim circle{display:none}.stazaCard .szObe{display:block;font-size:13.5px;font-weight:750;color:var(--purple);line-height:1.3}.stazaCard .szDoba{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:3px}/* Trenutak u kojem se vidi šta je vježba donijela: sve osim novog dijela se
   prigasi, on ostaje u punoj boji. Prijelaz je spor u oba smjera, da izgleda
   kao da svjetlo prelazi preko bašte, a ne kao da se slika ugasila. */
.scena .dio,.scena .sadnica,.scena .vlat,.scena .cvijet,.scena .kamen,.scena .put,.scena .pile{transition:opacity .5s ease}
.scena.prigusi .dio:not(.nov),.scena.prigusi .sadnica,.scena.prigusi .vlat,
.scena.prigusi .cvijet,.scena.prigusi .kamen,.scena.prigusi .put,.scena.prigusi .pile{opacity:.3}
.reflektor{pointer-events:none}
.sumSvijet{text-align:center;font-size:19px;font-weight:850;color:#2E7D5B;margin:14px 16px 0;line-height:1.3}.sumSvijet{animation:dolazi .7s ease-out both;animation-delay:.9s}@keyframes dolazi{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.cest,.mjesec,.sjaj,.krila,.dim circle,.svjetlucanje ellipse,.plamen,.lept,.ptica,.krosnja,.macka{animation:none}}
.sadnica,.vlat,.cvijet{transform-origin:50% 100%}
.kamen,.leptir{transform-origin:50% 50%}
/* Ambijent: oblaci putuju, trava se njiše, zvijezde dišu. Scena je živa i kad
   dijete ništa ne radi — to je razlika između mjesta i slike. */
.oblak{animation:plovi var(--d,60s) linear infinite}
@keyframes plovi{from{transform:translateX(var(--o,0px))}to{transform:translateX(420px)}}
.vlat{animation:njise 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.24s)}
@keyframes njise{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
.zvijezda{animation:diše 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.17s)}
@keyframes diše{0%,100%{opacity:.35}50%{opacity:1}}
.cvijet{animation:njise 4.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.4s)}
.leptir{animation:leti 3.6s ease-in-out infinite}
@keyframes leti{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(9px,-11px) rotate(8deg)}}
/* Uvelo nije ukras nego predviđanje: te teme weightedPick sutra vraća jače. */
.sadnica.vene{opacity:.45}
.sadnica.vene text{transform:rotate(11deg)}
.sadnica.raste text{animation:pulsira 1.1s ease-out .9s 2 both}
@keyframes pulsira{0%,100%{transform:scale(1)}40%{transform:scale(1.22)}}

.sumBig{font-size:21px;line-height:1.35;font-weight:800;text-align:center;
  margin:16px auto 0;max-width:20em;text-wrap:pretty;color:#141A2E;padding:0 12px}
.sumMore{font-size:14.5px;color:var(--muted);text-align:center;
  margin:7px auto 0;max-width:24em;padding:0 12px}
.sumBtns{display:flex;flex-direction:column;gap:9px;max-width:330px;margin:16px auto 0}

@media (prefers-reduced-motion:reduce){
  .sadnica.raste text,.oblak,.vlat,.zvijezda,.cvijet,.leptir{animation:none}
}

/* Razmak iza emojija: običan razmak uz Andiku ispadne pretijesan, pa se
   „🌱 lagano“ čitalo kao „🌱lagano“. */
.ic{font-style:normal;margin-right:7px}

/* ── Radni sto ────────────────────────────────────────────────────────────
   Isto pitanje, ali rukama (js/radni-sto/). Isti izgled kao ostatak dječijeg
   ekrana: bijele pločice s tankim rubom, isprekidana polja za spuštanje, jedna
   boja za izabrano. Komad je dugme — dodirni ga pa dodirni mjesto, ili ga
   povuci. Dok se vuče, stranica ne skrola i tekst se ne označava. */
.sto{position:relative}
.stoKomad{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.stoKomad.vuce{position:relative;z-index:20;cursor:grabbing;box-shadow:0 8px 22px rgba(22,25,43,.16);transition:none}
body.stoVuce,body.stoVuce *{-webkit-user-select:none!important;user-select:none!important}
body.stoVuce{cursor:grabbing}
.stoKomad.biran{border-color:var(--purple)!important;background:var(--purple-soft);box-shadow:0 0 0 2px var(--purple-soft)}
[data-meta]{transition:background .12s,border-color .12s}
[data-meta].nad{border-color:var(--purple)!important;background:var(--purple-soft)!important}
.sto.imaIzbor [data-meta]:not(.stoGomila){border-color:#B9C9CD}
.stoUputa{margin:0 0 10px;font-size:14px;font-weight:650;color:var(--muted);text-align:center;line-height:1.35}
.stoUputa b{color:var(--ink)}
.stoProvjeri{margin-top:12px}
/* Dodir po praznom mjestu prije nego što je išta uzeto: komadi s gomile se
   kratko jave (js/radni-sto/vuci.js). Bez kretanja — samo obrub. */
.pokaziKomade .stoKomad:not([data-meta] *):not([disabled]){animation:stoJavi .6s ease 2}
@keyframes stoJavi{50%{transform:translateY(-4px);box-shadow:0 0 0 3px #BEB2F5}}
@media (prefers-reduced-motion:reduce){.pokaziKomade .stoKomad:not([data-meta] *):not([disabled]){animation:none;box-shadow:0 0 0 3px #BEB2F5}}
.stoGomila{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:58px;padding:8px;border-radius:var(--r-box);background:#F7F7FA;border:1.5px dashed transparent}
.stoGomila.prazna{min-height:0;padding:0;background:transparent}
.stoKomad.tacno{background:var(--green-soft)!important;border-color:#A3DFC7!important}
.stoKomad.ispravljeno{background:#FFF8E6!important;border-color:#E3C680!important;border-style:dashed!important}
.sto .stoKomad[disabled]{cursor:default;opacity:1}

/* order i build: mjesta u redu, pločice na stolu */
.stoMjesta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin:0 0 12px}
.stoMjesto{min-width:50px;height:58px;border-radius:var(--r-ctl);border:2px dashed var(--line-strong);background:var(--surface);display:flex;align-items:center;justify-content:center;padding:0;position:relative}
.stoMjesto:has(.stoKomad){border-style:solid;border-color:transparent;background:transparent}
.stoPlocica{min-width:48px;height:54px;padding:0 10px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-ctl);font-size:25px;font-weight:800;color:var(--ink)}
.stoPlocica.siroka{min-width:62px}
.stoSlog{font-size:22px;font-weight:800;color:var(--line-strong);margin:0 2px}
.stoOrder .stoMjesta{flex-direction:column;align-items:stretch;gap:7px}
.stoOrder .stoMjesto{justify-content:flex-start;padding-left:46px;height:54px;width:100%}
.stoOrder .stoMjesto:has(.stoKomad){background:transparent}
.stoOrder .stoBroj{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:var(--r-ctl);background:var(--purple-soft);color:var(--purple);display:grid;place-items:center;font-size:14px;font-weight:800}
.stoOrder .stoPlocica{font-size:18px;font-weight:750;height:46px;padding:0 14px;min-width:0}
.stoOrder .stoMjesto .stoPlocica{flex:1;text-align:left}

/* razvrstaj: polja nacrtana kao kutije */
.stoKante{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.stoRazvrstaj.tri .stoKante{grid-template-columns:1fr}
@media(min-width:520px){.stoRazvrstaj.tri .stoKante{grid-template-columns:repeat(3,1fr)}}
.stoKanta{background:#F7F7FA;border:2px dashed var(--line-strong);border-radius:var(--r-box);padding:10px 8px;min-height:120px;display:flex;flex-direction:column;gap:7px;align-items:stretch;text-align:center;cursor:pointer}
.stoRazvrstaj.tri .stoKanta{min-height:74px}
.stoKantaIme{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.01em;overflow-wrap:anywhere}
.stoKantaUnutra{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.stoCip{max-width:100%;overflow-wrap:anywhere;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-ctl);padding:10px 13px;font-size:16px;font-weight:750;min-height:44px;line-height:1.15;color:var(--ink)}
.stoKantaUnutra .stoCip{padding:8px 10px;font-size:15px;min-height:40px}

/* spoji: dvije kolone i linije između njih */
.stoSpoji{display:grid;grid-template-columns:1fr 1fr;column-gap:34px}
.stoKol{display:flex;flex-direction:column;gap:9px}
.stoPar{position:relative;min-height:54px;overflow-wrap:anywhere;border-radius:var(--r-box);background:var(--surface);border:1.5px solid var(--line);padding:9px 12px;font-size:16px;font-weight:750;line-height:1.2;display:flex;align-items:center;gap:8px;color:var(--ink)}
.stoPar.lijevo{justify-content:space-between;text-align:left}
.stoPar.desno{text-align:left}
.stoPar.spojen{border-color:var(--boja,var(--purple))}
.stoTacka{flex:none;width:12px;height:12px;border-radius:50%;background:var(--line-strong)}
.stoPar.spojen .stoTacka{background:var(--boja,var(--purple))}
.stoPar.lijevo .stoTacka{margin-right:-19px}
.stoPar.desno .stoTacka{margin-left:-19px}
.stoLinije{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
@media(max-width:360px){.stoSpoji{column-gap:26px}.stoPar{font-size:15px;padding:8px 10px}}

/* brojevna staza: kuglica i crtice, natpis samo na krajevima i deseticama */
.stoStazaSvg{display:block;width:100%;max-width:520px;margin:0 auto;touch-action:none;cursor:pointer;overflow:visible}
.stoStazaSvg:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.stoTrak{fill:#EFEEE9;stroke:var(--line-strong);stroke-width:1}
.stoCrtica{stroke:#26325F;stroke-width:1.3;opacity:.45}
.stoCrtica.jaka{stroke-width:2.5;opacity:.9}
.stoNatpis{font-size:15px;font-weight:800;fill:#26325F}
.stoKuglica circle{fill:var(--purple)}
.stoKuglica circle.oko{fill:#fff}
.stoStazaSvg.vuce .stoKuglica circle:first-child{fill:var(--accent-hover)}
.stoIstinaCrta{stroke:var(--green);stroke-width:4;stroke-linecap:round}
.stoIstinaBroj{font-size:15px;font-weight:800;fill:var(--green)}
.stoStaza.zavrseno.tacno .stoKuglica circle:first-child{fill:var(--green)}
.stoStaza.zavrseno.netacno .stoKuglica circle:first-child{fill:var(--red)}
.stoAlati{margin-top:6px}
.stoKorak{min-width:64px;padding:8px 14px;font-size:22px;line-height:1}

/* sat: velika kazaljka se vrti, mala ide za njom */
.stoSat{display:flex;flex-direction:column;align-items:center;gap:8px}
.stoSatSvg{width:220px;height:220px;touch-action:none;cursor:grab;border-radius:50%}
.stoSatSvg:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.stoSatSvg.vuce{cursor:grabbing}
.stoBrojcanik{fill:#fff;stroke:#26325F;stroke-width:5}
.stoSatCrta{stroke:#26325F;stroke-width:1.5;stroke-linecap:round}
.stoSatCrta.jaka{stroke-width:3}
.stoSatBroj{font-size:20px;font-weight:800;fill:#26325F}
.stoMala{stroke:#26325F;stroke-width:8;stroke-linecap:round}
.stoVelika line{stroke:#FF6F91;stroke-width:5;stroke-linecap:round}
.stoVelika .rucka{fill:#FF6F91;stroke:#fff;stroke-width:2.5}
.stoOsovina{fill:#26325F}
.stoSat.zavrseno.tacno .stoBrojcanik{stroke:#3E9B4F}
.stoSat.zavrseno.netacno .stoBrojcanik{stroke:#D93B3B}
.stoSat .stoUputa{margin:0}

/* korpe od 10: dva desetna okvira */
.stoOkviri{display:flex;gap:10px;justify-content:center}
.stoOkvir{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px;border-radius:var(--r-ctl);background:#F7F7FA;border:2px solid var(--line-strong);width:min(100%,178px)}
.stoKorpe.dvije .stoOkvir{flex:1 1 0;max-width:178px}
.stoPolje{aspect-ratio:1;border-radius:6px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;min-width:0}
.stoTackica{display:block;width:78%;aspect-ratio:1;border-radius:50%;padding:0;border:0}
.stoTackica.prva{background:var(--accent)}
.stoTackica.druga{background:var(--st-learning)}
.stoTackica.prazna{background:transparent;border:2px dashed var(--line-strong)}
button.stoTackica{width:36px;height:36px}
.stoPolje button.stoTackica{width:78%;height:auto}
.stoGomilaTacaka{margin-top:10px;min-height:48px;gap:10px;padding:9px}
.stoSklonjeno{margin-top:10px;min-height:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border-radius:var(--r-box);border:2px dashed var(--line-strong);background:#FBFBF9;cursor:pointer}
.stoSklonjeno .stoTackica{width:22px;height:22px;opacity:.55}
.stoSklonjenoIme{font-size:13px;font-weight:800;color:var(--muted);margin-right:4px}
.stoJednakost{text-align:center;font-size:24px;font-weight:800;color:var(--ink);margin:10px 0 2px;letter-spacing:-.01em}
.stoNapomena{margin:8px 0 6px}
.stoKorpe.slozeno .stoSklonjeno{cursor:default}
.stoTastatura.tekStigla{pointer-events:none}
.stoTastatura .pad{margin-top:4px}
/* Nivo 2: ista slika, manja, bez ičega za pomjeriti. */
.stoKorpe.slika{margin:0 auto 12px;max-width:300px}
.stoKorpe.slika .stoOkviri,.stoKorpe.slika{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.stoKorpe.slika .stoOkvir{width:132px;padding:4px;gap:3px}
.stoKorpe.slika .stoJednakost{flex-basis:100%;font-size:17px;margin:2px 0 0;color:var(--muted)}

/* „Pokaži mi“ u poruci poslije prvog promašaja */
.fb .pokaziMi{flex:none;align-self:center;background:var(--surface);color:#7D641F;border:1.5px solid #E3C680;border-radius:var(--r-ctl);padding:9px 14px;font-size:15px;font-weight:800;min-height:44px}
.fb .pokaziMi:active{transform:scale(.98)}

/* Niski telefoni: sto se stisne kao i ostala dugmad, ne ispod prsta. */
@media (orientation:portrait) and (max-height:700px){
  .stoSatSvg{width:176px;height:176px}
  .stoMjesto{height:50px;min-width:44px}.stoPlocica{height:46px;min-width:42px;font-size:22px}
  .stoOrder .stoMjesto{height:48px}.stoOrder .stoPlocica{height:42px;font-size:17px}
  .stoKanta{min-height:96px}
  .stoPar{min-height:48px}
  .stoUputa{font-size:13px;margin-bottom:7px}
  .stoJednakost{font-size:20px;margin-top:6px}
}
@media (orientation:portrait) and (max-height:640px){
  .stoSatSvg{width:150px;height:150px}
  .stoKanta{min-height:80px}
}
@media (prefers-reduced-motion:reduce){[data-meta]{transition:none}}
@media(min-width:720px){.stoOkvir{width:210px}.stoKorpe.dvije .stoOkvir{max-width:210px}}
/* Uspjeh po licu kod učiteljice: „Radni sto 5/6 · Pitanja 3/4“ */
.zLice{font-weight:750;color:var(--muted)}
.zLice[data-zlice="sto"]{color:var(--accent)}

/* ── IGRA (js/igra/igraj.js) ─────────────────────────────────────────────
   Isti krug kao Pitanja, s pitanjima kao scenama. Scena (Pixi) je platno, a
   #play — preseljen ovamo za vrijeme kruga — nosi traku gore (Nazad, tačke),
   povratnu poruku i „Dalje“. Pitanje bez scene je preko cijelog ekrana.
   Faze na #igra: .leti (dok se prvo pitanje ne pokaže), .uSceni, .uKarti.
   --igraVrh je visina trake gore; na položenom telefonu je 0, jer tada traka
   stoji u praznim pojasevima lijevo i desno od scene (.bocno). */
.stazaWrap{position:relative}

#igra{--igraVrh:56px;--bok:0px;position:fixed;inset:0;max-width:none;margin:0;padding:0;overflow:hidden;
  background:var(--bg);touch-action:none;z-index:5}
#igra.on{display:block;animation:none}
#igra.bocno{--igraVrh:0px}
.igraScena{position:absolute;left:0;right:0;bottom:0;top:var(--igraVrh);display:flex;align-items:center;justify-content:center}
.igraScena canvas{flex:none}
.igraScena{opacity:0;pointer-events:none;transition:opacity .15s ease;
  background:linear-gradient(#DDEFF2 0 60%,#9CCB86 60% 100%)}
#igra.uSceni .igraScena{opacity:1;pointer-events:auto}
.igraKarta{position:absolute;inset:0;pointer-events:none}
.igraPoruka{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* #play u igri: traka gore uvijek na istom mjestu */
#igra.on #play{position:absolute;inset:0;max-width:none;margin:0;padding:0;pointer-events:none;background:transparent;height:auto;min-height:0}
#igra.on:not(.uKarti) #play{display:block}
#igra.on #play .top{position:fixed;top:0;left:0;right:0;height:var(--igraVrh);min-height:0;margin:0;gap:12px;
  padding:calc(env(safe-area-inset-top) + 6px) 14px 6px;pointer-events:auto;
  background:rgba(248,248,246,.86);box-shadow:0 1px 0 rgba(22,25,43,.06);z-index:3}
#igra.on #play .top .stars{display:none}
#igra.on #play .top .dots{max-width:260px;margin:0 auto}
#igra.bocno #play .top{height:auto;background:transparent;box-shadow:none;padding:calc(env(safe-area-inset-top) + 10px) 12px 0;align-items:flex-start}
#igra.bocno #play .top .dots{position:absolute;right:12px;top:calc(env(safe-area-inset-top) + 28px);width:calc(var(--bok) - 24px);max-width:none;margin:0;flex-wrap:wrap;gap:4px}
#igra.bocno #play .top .dots i{max-width:none;flex:1 0 9px}

/* u sceni: pitanje čita čitač ekrana, a dijete ga vidi na sceni */
#igra.uSceni #play .qTopic,#igra.leti #play .qTopic{display:none}
#igra:not(.uKarti) #play .qcard{position:absolute;top:0;right:0;width:0;height:0;min-height:0;padding:0;margin:0;border:0;background:none;overflow:visible}
#igra:not(.uKarti) #play .qcard>:not(.say){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#igra:not(.uKarti) #play .qcard>.say{position:fixed;top:calc(env(safe-area-inset-top) + 6px);right:12px;z-index:4;pointer-events:auto}
#igra.bocno:not(.uKarti) #play .qcard>.say{top:auto;bottom:calc(env(safe-area-inset-bottom) + 14px);left:12px;right:auto}
#igra:not(.uKarti) #play .ansCol{position:absolute;left:0;right:0;bottom:0;padding:0 14px calc(env(safe-area-inset-bottom) + 12px);
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:5}
/* z-index 5, ne 3: „Ne znam još“ je u ovom sloju ali stoji gore, preko trake
   s Nazad (z 3) — na istom sloju traka je hvatala dodir (dugmad, tablet, 25. 9.). */
#igra:not(.uKarti) #play #answer{display:none}
#igra:not(.uKarti) #play .teachBox,#igra:not(.uKarti) #play .status,#igra:not(.uKarti) #play .next{width:100%;max-width:520px;margin:0}
/* „Ne znam još“ i pomoć ne smiju leći preko onoga što se u sceni dira (dno
   scene su jabuke, kartice, kovanice): dugme je gore u traci, a pomoć je
   ploča ispod trake, koja se dodirom skloni. */
#igra:not(.uKarti) #play .teachBox.on{position:fixed;top:calc(var(--igraVrh) + 8px);left:0;right:0;margin:0 auto;width:min(520px,calc(100% - 24px));
  pointer-events:auto;max-height:30vh;overflow:auto;box-shadow:0 8px 28px rgba(22,25,43,.14);z-index:4;cursor:pointer}
#igra:not(.uKarti) #play .status{min-height:0}
#igra:not(.uKarti) #play .dontKnow{position:fixed;top:calc(env(safe-area-inset-top) + 6px);right:66px;margin:0;z-index:4;width:auto}
#igra:not(.uKarti) #play .dontKnow button{min-height:44px;padding:8px 12px;font-size:14px}
#igra.bocno:not(.uKarti) #play .dontKnow{top:calc(env(safe-area-inset-top) + 64px);left:12px;right:auto;max-width:calc(var(--bok) - 20px)}
#igra.bocno:not(.uKarti) #play .dontKnow button{font-size:0;width:44px;padding:0}
#igra.bocno:not(.uKarti) #play .dontKnow button::first-letter{font-size:20px}
/* Uzak ekran: samo 🤔, da ne legne preko tačaka. */
@media (max-width:620px){
  #igra:not(.uKarti) #play .dontKnow button{font-size:0;width:44px;padding:0}
  #igra:not(.uKarti) #play .dontKnow button::first-letter{font-size:20px}
  #igra.on #play .top .dots{max-width:calc(100% - 180px)}
}
#igra.bocno:not(.uKarti) #play .teachBox.on{top:10px;width:min(520px,calc(100% - 2 * var(--bok)))}
#igra:not(.uKarti) #play .dontKnow.on{pointer-events:auto}
#igra:not(.uKarti) #play .fb.on{pointer-events:auto;box-shadow:0 8px 28px rgba(22,25,43,.14)}
/* Drugi pokušaj: poruka ne smije prekriti ono što se još dira, pa kroz nju
   prolazi prst i poslije par sekundi se stiša. */
#igra.uSceni #play .fb.hint{pointer-events:none;animation:igraTiho 5s ease forwards}
@keyframes igraTiho{0%,75%{opacity:1}100%{opacity:.18}}
#igra:not(.uKarti) #play .next:not(.on){display:none}
#igra:not(.uKarti) #play .next.on{pointer-events:auto}
#igra.bocno:not(.uKarti) #play .ansCol{padding-left:calc(var(--bok) + 8px);padding-right:calc(var(--bok) + 8px)}
#igra.leti #play .ansCol,#igra.leti #play .qcard>.say{visibility:hidden}

/* Pitanje bez scene: cijeli ekran, isto kao Pitanja (igra/PLAN.md §12) —
   bašta se ne vidi iza, pitanje ima sav prostor. */
#igra.uKarti{overflow-y:auto;background:var(--bg);touch-action:pan-y}
/* pan-y: pitanje bez scene se skrola prstom kao stranica (s pomoći zna biti
   duže od ekrana); u sceni ostaje none, jer tamo prst vuče ptičicu. */
#igra.on.uKarti #play{position:relative;inset:auto;pointer-events:auto;max-width:560px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 34px);
  background:var(--bg);min-height:100%;box-sizing:border-box}
#igra.on.uKarti #play .top{position:static;height:auto;min-height:48px;margin-bottom:20px;padding:0;background:none;box-shadow:none}
#igra.on.uKarti #play .top .stars{display:inline-flex}

/* Scena tastaturom (js/igra/tipke.js). Za miš i prst je nevidljiva; s
   tastature (fokus-visible unutra) je mirna traka na dnu, a scena se za toliko
   podigne i smanji, pa traka ne pokriva ništa od onoga što se u sceni vidi. */
.igraTipke{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 18px;padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);background:rgba(248,248,246,.97);
  box-shadow:0 -1px 0 rgba(22,25,43,.08),0 -8px 24px rgba(22,25,43,.08)}
.igraTipke[hidden]{display:none}
.igraTipke:not(:has(:focus-visible)){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;box-shadow:none}
.itGrupa{display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%}
.itIme{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em;margin-right:2px}
.itDugme{min-height:44px;min-width:44px;padding:8px 14px;border:2px solid var(--line-strong);border-radius:12px;background:#fff;
  color:var(--ink);font:inherit;font-size:17px;font-weight:750;cursor:pointer;line-height:1.1}
.itDugme[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.itDugme[aria-disabled="true"]{opacity:.45}
.itDugme:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Položen telefon: malo visine, pa traka u jednom redu i sitnija dugmad. */
#igra.bocno .igraTipke{gap:4px 12px;padding:6px 10px calc(env(safe-area-inset-bottom) + 6px)}
#igra.bocno .itDugme{min-height:40px;padding:6px 10px;font-size:15px}
#igra:has(.igraTipke:not([hidden]) :focus-visible) .igraScena{bottom:var(--tipkeH,64px)}
#igra:has(.igraTipke:not([hidden]) :focus-visible) #play .ansCol{bottom:var(--tipkeH,64px)}
#igra.bocno:has(.igraTipke:not([hidden]) :focus-visible):not(.uKarti) #play .qcard>.say{bottom:calc(var(--tipkeH,64px) + 8px)}

/* okreni telefon */
/* Samo izlaz, tih: igra se ne nudi uspravno, ali dijete ne smije ostati
   zarobljeno (instalirana aplikacija na iPhoneu nema dugme Nazad). */
@media (prefers-reduced-motion:no-preference){
    @keyframes igraOkret{0%,30%{transform:rotate(0)}55%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
}

/* Red za redne brojeve: jedan redak koji se ne prelama. Bez strelice — dijete bi je brojalo. */
.qcard .redZ{display:flex;flex-wrap:nowrap;align-items:center;justify-content:safe center;gap:.05em;margin:4px 0 14px;padding:8px 0 10px;border-bottom:3px solid var(--line);font-size:72px;line-height:1;white-space:nowrap;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}
.qcard .redZ>span{flex:none}

/* Vaga (mat/vag): greda se nagne tek poslije odgovora; tasovi ostaju uspravni. */
.vaga{position:relative;width:min(280px,78vw);height:150px;margin:4px auto 0}
.vagaGreda{position:absolute;left:14%;right:14%;top:30px;height:9px;border-radius:5px;background:#8B5A2B;transform:rotate(0deg);transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.vaga.pokazi .vagaGreda{transform:rotate(calc(var(--n) * 9deg))}
.vagaTas{position:absolute;top:9px;width:100px;height:50px;margin-left:-50px;border:3px solid #8B5A2B;border-top:0;border-radius:0 0 56px 56px;background:white;display:grid;place-items:center;font-size:21px;font-weight:850;white-space:nowrap;transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.vagaTas.l{left:0}.vagaTas.d{left:100%}
.vaga.pokazi .vagaTas{transform:rotate(calc(var(--n) * -9deg))}
.vagaKv{font-style:normal;color:var(--purple)}.vagaKv.pun{background:var(--purple-soft);border-radius:8px;padding:0 6px}
.vagaStub{position:absolute;left:50%;top:32px;transform:translateX(-50%);width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:92px solid #A8713F}
.vagaStub::after{content:"";position:absolute;left:-46px;top:88px;width:92px;height:10px;border-radius:5px;background:#8B5A2B}
@media (prefers-reduced-motion:reduce){.vagaGreda,.vagaTas{transition:none}}

/* Model trake (mat/tra): cjelina iznad dva dijela, ili dvije trake koje se porede. */
.ch.slika{padding:10px 12px;text-align:left}
.traka{width:min(340px,76vw);margin:0 auto;font-weight:850;font-size:17px}
.traka .trVrh{border:2px solid #8A84B8;border-bottom:0;border-radius:10px 10px 0 0;height:14px;margin:0 2px 20px;position:relative}
.traka .trVrh b{position:absolute;left:50%;top:-14px;transform:translateX(-50%);background:var(--surface,#fff);padding:0 8px;line-height:1.2}
.traka .trRed{display:flex;gap:0;margin:4px 0}
.traka .trRed span{display:grid;place-items:center;height:34px;background:#E4EEF9;border:2px solid #7FA7D1;min-width:30px}
.traka .trRed span+span{border-left:0}
.traka.por .trRed span.razl{background:transparent;border-style:dashed;border-color:#B7B2D6}
.traka .nep,.traka .trVrh.nep b{color:var(--purple)}
.traka .trRed span.nep{background:#F1ECFE;border-color:#A99BEA}

/* Sažetak kruga preko cijelog ekrana: stranica u bojama bašte (nebo gore,
   zemlja dolje), bašta od ruba do ruba, tekst na svijetloj kartici. */
html.sumPuna{background:var(--sumTlo)}
html.sumPuna body{background:linear-gradient(to bottom,var(--sumNebo) 0,var(--sumNebo) 32%,var(--sumTlo) 32%,var(--sumTlo) 100%) fixed;min-height:100dvh}
html.sumPuna .bastaEkran .top{position:relative;z-index:2}
html.sumPuna .bastaEkran .top h2{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.bastaEkran .sumScena{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;display:flex;justify-content:center}
.bastaEkran .sumScena .svijet{flex:0 0 auto;width:max(100vw,min(40vh,520px)*4/3);max-width:none;border-radius:0;box-shadow:none;
  --klizi:calc((.5 - var(--kamK,.5)) * (100% - 100vw));transform:translateX(var(--klizi))}
/* --kamK (0…1) je kamera žive bašte: platno šire od ekrana klizi s njom, pa
   se na lijevom kraju bašte vidi lijeva ivica platna, a na desnom desna. */
/* Širi ekran (tablet, laptop): bašta je pozadina cijelog ekrana, od ruba do
   ruba, bez traka sa strane; kartica ostaje iste širine dolje. Bašta se malo
   podigne (nebo se odreže), da kućica i drvo ostanu iznad kartice. */
@media (min-width:600px){
  .bastaEkran .sumScena{position:fixed;inset:0;z-index:0;width:auto;margin:0;overflow:hidden;display:block}
  .bastaEkran .sumScena .svijet{position:absolute;left:50%;top:0;width:max(100vw,calc(100vh * 4 / 3));
    transform:translateX(calc(-50% + var(--klizi)));border-radius:0}
  /* Položeno: bašta je široka koliko ekran, a odsiječe se nebo gore — dno
     bašte (leja, kućica, tragovi igre) sjedne tačno iznad kartice. */
  @media (orientation:landscape){.bastaEkran .sumScena .svijet{width:100vw;transform:translate(-50%,min(0px,calc(100vh - 330px - 75vw)))}}
  /* Položeno je nisko: kartica niža (dugmad jedno pored drugog), da bašta
     iznad nje ostane vidljiva. */
  @media (orientation:landscape){.bastaEkran .sumBtns{flex-direction:row;max-width:460px}.bastaEkran .sumBtns .btn{flex:1}
    .bastaEkran .sumKartica .sumBig{margin-top:12px}.bastaEkran .sumCilj{margin-top:10px}.bastaEkran .sumBtns{margin-top:12px}}
  .bastaSadrzaj{display:flex;flex-direction:column;min-height:calc(100dvh - 110px)}
  .bastaEkran .sumKartica{margin-top:auto;z-index:1}
  html.sumPuna .bastaEkran .top{z-index:2}
}
.sumKartica{position:relative;margin:-26px 0 0;background:rgba(255,255,255,.97);border-radius:24px;padding:4px 14px 18px;box-shadow:0 10px 30px rgba(10,20,40,.18)}
.sumKartica .sumSvijet{margin-top:14px}
.sumCilj{display:flex;align-items:center;gap:13px;max-width:330px;margin:14px auto 0;padding:10px 14px;border-radius:18px;background:#FFF7E4;border:1.5px dashed #EDB45A;text-align:left}
.sumCilj .em{font-size:40px;line-height:1;animation:cilj 2.2s ease-in-out infinite}
@keyframes cilj{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.14) rotate(-5deg)}60%{transform:scale(1.06) rotate(3deg)}}
.sumCilj .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.sumCilj small{font-size:12.5px;font-weight:800;color:#9A6512;letter-spacing:.01em}
.sumCilj b{font-size:16.5px;font-weight:850;color:#2B2A33;line-height:1.25}
.sumCilj .tacke{display:flex;gap:5px;margin-top:4px}
.sumCilj .tacke i{width:10px;height:10px;border-radius:50%;background:#EBDDBF}
.sumCilj .tacke i.pun{background:#F0A030}
@media (prefers-reduced-motion:reduce){.sumCilj .em{animation:none}}

/* Brza slika (mat/bsl): okvir od deset, tačkice nestanu same; oko ih vrati. */
.dsVis{display:flex;flex-direction:column;align-items:center;gap:8px}
.desetica{display:flex;flex-direction:column;gap:8px;transition:opacity .35s ease}
.desetica.skriveno{opacity:0}
.dsOkvir{display:grid;grid-template-columns:repeat(5,34px);grid-template-rows:repeat(2,34px);gap:5px;padding:6px;border:3px solid #8A84B8;border-radius:10px;background:#fff}
.dsOkvir span{border-radius:50%;background:#F1EFF8}
.dsOkvir span.pun{background:#E0613F}
.dsOpet{font-size:22px;width:52px;height:44px;border-radius:14px;border:1px solid var(--line);background:#fff}
.dsOpet:disabled{visibility:hidden}
@media (prefers-reduced-motion:reduce){.desetica{transition:none}}

/* Procjena (mat/prc): prazna staza, samo krajevi; iglica gdje dijete misli. */
.procjena{padding:44px 26px 30px;touch-action:manipulation;cursor:pointer}
.prTraka{position:relative;height:16px;border-radius:8px;background:#E7E4F3;border:2px solid #C9C3E6;outline-offset:6px}
.prTraka::before,.prTraka::after{content:"";position:absolute;top:-10px;bottom:-10px;width:3px;border-radius:2px;background:#8A84B8}
.prTraka::before{left:-2px}.prTraka::after{right:-2px}
.prSred{position:absolute;left:50%;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:#C9C3E6}
.prKraj{position:absolute;top:26px;font-size:20px;font-weight:850;transform:translateX(-50%)}
.prKraj.l{left:0}.prKraj.d{left:100%}
.prIgla{position:absolute;top:-40px;width:30px;height:30px;margin-left:-15px;display:grid;place-items:center}
.prIgla::before{content:"";position:absolute;inset:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--purple);box-shadow:0 2px 4px rgba(0,0,0,.2)}
.prIgla.ok::before{background:#2E9E6A}.prIgla.bad::before{background:#D9534F}
.prSmjer{position:relative;font-style:normal;font-size:18px;font-weight:900;color:#fff}
.prIgla[hidden]{display:none}
.prTacno{position:absolute;top:-8px;bottom:-8px;width:4px;margin-left:-2px;border-radius:2px;background:#2E9E6A}
.prTacno::after{content:attr(data-n);position:absolute;top:30px;left:50%;transform:translateX(-50%);font-size:20px;font-weight:900;color:#2E9E6A}
.prTacno[hidden]{display:none}

/* Komad tablice (mat/tab): krst ili 3 × 3 polja, prazno polje ljubičasto. */
.tablica{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,52px);gap:5px;justify-content:center}
.tbP{display:grid;place-items:center;border-radius:10px;background:#fff;border:2px solid #C9C3E6;font-size:22px;font-weight:850}
.tbP.prazno{background:var(--purple-soft);border-color:var(--purple);color:var(--purple)}
.tbP.van{visibility:hidden}

/* Biljka = tema: dodir je „zalij“ (tri zadatka). Kapljica iznad uvele. */
.svijet [data-tema]{cursor:pointer}
.svijet .kap{animation:kapa 1.6s ease-in-out infinite}
@keyframes kapa{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.svijet .kap{animation:none}}

/* Tema koja gradi sljedeći dio bašte (faza 2): mala pločica ispod imena. */
.sumCilj .gradi{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-size:13px;font-weight:750;color:#5B4A8A;background:#EFEAFB;border-radius:999px;padding:2px 9px 2px 6px;align-self:flex-start}
.sumCilj .gradi i{font-style:normal}

/* „Zalij“ (uvela biljka) između „Dalje“ i „Dosta za danas“. */
.sumZalij{background:#E6F3FB!important;color:#1D5B7E!important}

/* Kartica sažetka se spusti na prvi dodir po bašti ili na „Sakrij“; ostane
   samo dugme „Prikaži“. Bašta je tada cijela na ekranu, ne uvećana preko
   visine (Ensar, 27. 9.: „previše zumirano“): uspravno je široka najviše
   160 % ekrana i stoji na dnu, tik iznad dugmeta; iznad nje je nebo u njenoj
   boji. */
.sumRucka{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px auto 2px;padding:7px 16px 7px 12px;
  border:0;border-radius:999px;background:#F1EFF8;color:#4E4A6B;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer}
.sumRucka svg{width:18px;height:18px;flex:0 0 auto;transition:transform .3s ease}
.sumRucka .zat{display:none}
.sumKartica{transition:transform .38s cubic-bezier(.3,.9,.3,1)}
html.sumSkupljeno .bastaEkran .sumKartica{position:fixed;left:50%;bottom:0;width:min(560px,calc(100vw - 24px));margin:0;z-index:3;
  border-radius:24px 24px 0 0;transform:translate(-50%,calc(100% - 62px))}
/* Spuštena kartica: bez bijele trake, samo mala ručica preko bašte (Ensar,
   29. 9.: narandžasto „Prikaži“ na bijelom je bilo previše uočljivo). */
html.sumSkupljeno .bastaEkran .sumKartica{background:transparent;box-shadow:none}
html.sumSkupljeno .bastaEkran .sumRucka{background:rgba(16,24,40,.42);color:#fff;box-shadow:none;font-size:13px;padding:5px 13px 5px 9px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.sumSkupljeno .bastaEkran .sumRucka svg{transform:rotate(180deg)}
/* „Prikaži“ poslije gradnje (basta-ekran.js spustiKarticu): blago pulsira, tek
   kad se gradnja odigra, dok ga dijete ne dodirne. */
html.sumSkupljeno .bastaEkran .sumRucka.pulsira{animation:ruckaPuls 1.9s ease-in-out 3.2s infinite}
@keyframes ruckaPuls{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.45)}50%{transform:scale(1.09);box-shadow:0 0 0 9px rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){html.sumSkupljeno .bastaEkran .sumRucka.pulsira{animation:none}}
.sumKartica>*{transition:opacity .25s ease}
html.sumSkupljeno .bastaEkran .sumKartica>:not(.sumRucka){opacity:0;pointer-events:none}
html.sumSkupljeno .bastaEkran .sumRucka .otv{display:none}
html.sumSkupljeno .bastaEkran .sumRucka .zat{display:inline}
html.sumSkupljeno .bastaEkran .sumScena{position:fixed;inset:0;z-index:0;width:auto;margin:0;overflow:hidden;display:block;
  background:linear-gradient(to bottom,var(--sumNebo) 0,var(--sumNebo) 50%,var(--sumTlo) 50%,var(--sumTlo) 100%)}
html.sumSkupljeno .bastaEkran .sumScena .svijet{position:absolute;left:50%;top:auto;bottom:54px;
  width:max(100vw,min(calc(100vh * 4 / 3),160vw));transform:translateX(calc(-50% + var(--klizi)));border-radius:0}
@media (orientation:landscape){html.sumSkupljeno .bastaEkran .sumScena .svijet{bottom:0;width:max(100vw,calc(100vh * 4 / 3))}}
@media (prefers-reduced-motion:reduce){.sumKartica{transition:none}}
/* Sakrij / Prikaži na tabletu i položenom ekranu: prelaz pogleda (basta-ekran.js). */
html.vtSkupi .bastaEkran .sumKartica{view-transition-name:sumKartica;transition:none}
html.vtSkupi .bastaEkran .sumKartica>*{transition:none}
html.vtSkupi .bastaEkran .sumScena{view-transition-name:sumScena}
::view-transition-group(sumKartica),::view-transition-group(sumScena){animation-duration:.38s;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
::view-transition-old(sumKartica),::view-transition-new(sumKartica){animation-duration:.3s}
::view-transition-group(root){animation-duration:.2s}

/* Sam prelazak poslije tačnog odgovora: „Dalje“ se puni kao traka. */
#nextBtn.auto{background-image:linear-gradient(90deg,rgba(255,255,255,.26),rgba(255,255,255,.26));background-repeat:no-repeat;background-size:0% 100%;animation:autoDalje 2s linear forwards}
@keyframes autoDalje{to{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){#nextBtn.auto{animation:none;background-size:100% 100%}}

/* Igrica „Nahrani ptice“: pozornica ispod trake, do dna ekrana. */
#igrica .igricaScena{height:calc(100dvh - 120px);min-height:420px;border-radius:var(--r-box);overflow:hidden;background:linear-gradient(#CFE9F0 0 45%,#9CCB86 45% 100%);touch-action:none}
/* Kraj igrice: dugmad preko dna pozornice. */
#igrica{position:relative}
#igrica .igricaKraj{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);transform:translateX(-50%);width:min(330px,calc(100% - 32px));display:flex;flex-direction:column;gap:9px;
  background:rgba(255,255,255,.94);padding:14px;border-radius:22px;box-shadow:0 10px 30px rgba(10,20,40,.18)}
#igrica .igricaKraj[hidden]{display:none}
/* Izlet preko cijelog ekrana, bez bijelog okvira (Ensar, 29. 9.): samo okruglo
   ‹ gore lijevo, preko scene. Igra zna za njega (rezervaLijevo), pa uputa
   ne ide ispod njega. */
#izlet .izletScena{position:fixed;inset:0;height:auto;min-height:0;margin:0;border-radius:0;overflow:hidden;background:#CFE9F0;touch-action:none;z-index:1}
#izlet .top{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:calc(env(safe-area-inset-left,0px) + 10px);z-index:3;margin:0;min-height:0}
#izlet .top h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#izlet .top .back{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.93);border:0;box-shadow:0 3px 12px rgba(10,30,40,.25)}
#igrica .igricaPromjena{margin:2px 4px 4px;font-size:19px;font-weight:700;text-align:center;color:var(--ink)}
#igrica .igricaPromjena:empty{display:none}
/* Spisak igrica. */
.igriceLista{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
.igricaPloca{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;border-radius:var(--r-box);border:1px solid var(--line);background:var(--surface,#fff);font-size:16px}
.igricaPloca .em{font-size:44px;line-height:1}

/* „Sagradi…“ na sažetku: igrica koja gradi novi dio bašte. */
.sumGradi{background:#E0613F!important;color:#fff!important}

/* Moja bašta („Igraj“ otvori baštu; vježba kreće s „Vježbaj“). Isti raspored
   kao sažetak kruga (.bastaEkran), plus red sličica: šta ima u bašti. */
/* Izlet iz bašte: toplo narandžasto dugme, i kratka rečenica ispod dugmadi. */
.sumIzlet{background:#E9853B;border-color:#C4661E}
.sumIzlet:active{background:#D8762F}
.bastaIzletTx{margin:12px 4px 0;font-size:15px;color:var(--muted);text-align:center;line-height:1.35}
/* Igrice bašte: sve se vide, bez klizanja u stranu (sedma je bila iza ruba). */
.bastaIma{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 0;padding:2px 0 6px}
.bastaIma button{flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:#F4F1EA;font-size:26px;line-height:1;display:grid;place-items:center;
  border:2px solid transparent;transition:transform .15s ease}
.bastaIma button:active{transform:scale(.92)}
.bastaVjezbaj{font-size:19px}
#basta .sumKartica .sumBig{font-size:19px;margin-top:6px}

/* Moj lik (js/screens/moj-lik.js): ko živi u bašti; novi likovi s krugovima. */
.likSub{margin:2px 0 14px;color:var(--muted);font-size:14px}
#likGrid .avatarPick{min-height:92px;font-size:38px}
/* Lik s tijelom (lik-tijelo.js) umjesto emoji glave: na izboru cijeli, na
   dugmetu lika na početnom ekranu lice s ramenima. */
#likGrid .avatarPick .likCio{width:auto;height:70px;display:block}
/* Cijelo dugme (48px), da mu lijeva ivica ostane ivica sadržaja (align.js). */
.hello .face .likLice{width:100%;height:100%;display:block}
#likGrid .avatarPick small{font-size:12px}

/* (28. 9.) Predmeti na početnom ekranu su sporedna vrata: glavni put je bašta.
   Male pločice, tri u redu — sličica i ime, bez brojeva. */
#home .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
#home .tile,#home .tile.wide{min-height:0;padding:12px 6px 11px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;text-align:center}
#home .tile:after{content:none}
#home .tile .em{width:44px;height:44px;font-size:24px}
#home .tile .nm{display:block;width:100%;font-size:13.5px;font-weight:750;line-height:1.2}
/* Na ekranu Matematike: naslov iznad tema Sata, novca i kalendara. */
.actsNaslov{margin:0;padding:20px 16px 10px;border-top:1px solid var(--line);font-size:14px;font-weight:750;color:var(--muted)}

/* ── Novi ulaz (1. 10.): šifra, „Je li ovo ti?“, ko vježba, provjera odraslog ── */
#welcome.on{justify-content:flex-start}
.ulazTop{margin-bottom:0;min-height:44px}
.ulaz{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(8px,6vh,56px)}
.ulazLogo{margin-bottom:22px;background:none}.ulazLogo img{display:block;width:100%;height:100%}
.ulazNaslov{margin:0 0 22px;font-size:27px;line-height:1.15;letter-spacing:-.025em;font-weight:700}
/* Osam kućica: crta ih ono što piše u polju, a polje leži prozirno preko
   njih — jedno polje, pa lijepljenje i brisanje rade kao i svuda. */
.sifra{position:relative;width:100%;max-width:360px;margin:0 auto}
.sifraCelije{display:flex;align-items:center;justify-content:center;gap:5px}
.sifraCelije .cel{flex:1 1 0;max-width:40px;height:54px;border:1.5px solid var(--line-strong);border-radius:10px;
  background:var(--surface);display:grid;place-items:center;font-size:25px;font-weight:700;letter-spacing:0;
  font-family:"IBM Plex Sans",ui-monospace,monospace;color:var(--ink)}
.sifraCelije .cel.nagovjestaj{color:var(--line-strong)}
.sifraCelije .cel.puna{border-color:var(--accent)}
.sifraCelije .cel.sad{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sifraCelije .crtica{flex:none;font-size:24px;font-weight:700;color:var(--muted);width:14px}
.sifraIn{position:absolute;inset:0;width:100%;height:100%;opacity:1;color:transparent;caret-color:transparent;
  background:transparent;border:0;outline:none;font-size:16px;text-transform:uppercase;cursor:text;z-index:1}
.sifraIn::selection{background:transparent}
.ulazGreska{min-height:22px;margin:12px 0 4px;color:var(--red);font-size:15px;font-weight:600;max-width:32ch}
.ulaz .btn.wide{max-width:360px;min-height:56px;margin-top:4px}
.ulazSitno{display:flex;flex-direction:column;align-items:center;margin-top:26px;width:100%;max-width:360px}
.ulazSitno .textBtn{margin-top:4px;font-size:14px;font-weight:600;color:var(--muted);min-height:48px}
.ulazSitno #nemamSifru{color:var(--accent)}

#jeLiTo.on{display:flex;min-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 60px)}
.jlt{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;margin:auto 0}
.jltNaslov{margin:0 0 10px;font-size:27px;letter-spacing:-.025em}
.jltLik{width:170px;height:200px;display:grid;place-items:center;margin:4px 0 6px}
.jltLik .jltSvg{width:auto;height:190px;display:block}
.jltSlovo{width:140px;height:140px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:64px;font-weight:700}
.jltIme{display:block;font-size:34px;line-height:1.1;letter-spacing:-.03em}
.jltRazred{display:block;color:var(--muted);font-size:15px;margin:4px 0 26px;min-height:20px}
.jlt .btn{max-width:360px;min-height:56px}
.jlt .btn+.btn{margin-top:10px}

.djecaLista{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.djecaLista.jedno{grid-template-columns:1fr;max-width:260px;margin-left:auto;margin-right:auto}
.djeteKartica{display:flex;flex-direction:column;align-items:stretch}
.djeteBtn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-box);min-height:150px}
.djeteBtn[aria-current="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.djeteBtn:active{transform:scale(.98)}
.djeteLice{width:92px;height:92px;border-radius:50%;background:var(--purple-soft);display:block;overflow:hidden}
.djeteLice .likLice{width:100%;height:100%;display:block}
.djeteBtn b{font-size:21px;letter-spacing:-.02em;line-height:1.15;word-break:break-word}
.djeteLik{margin-top:4px}
.djecaDodaj{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;border:1.5px dashed var(--line-strong);
  border-radius:var(--r-box);font-size:17px;font-weight:700;color:var(--accent);background:transparent}
.djecaDodaj .plus{font-size:26px;line-height:1;font-weight:500;color:var(--accent)}
.djecaOdrasli{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:18px;
  color:var(--muted);font-size:14px;font-weight:600}

.paDjeca{display:flex;gap:8px;overflow-x:auto;margin:0 0 12px;padding:2px}
.paDijete{display:flex;align-items:center;gap:8px;flex:none;min-height:48px;padding:4px 14px 4px 4px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--surface);font-weight:700;font-size:15px}
.paDijete .djeteLice{width:38px;height:38px}
.paDijete[aria-current="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-ink)}
.idZnak.idLice{background:var(--purple-soft);overflow:hidden;padding:0}
.idZnak.idLice .likLice{width:100%;height:100%;display:block}

.provjeraCard{text-align:center}
.provjeraZa{display:block;font-size:14px}
.modalCard b.provjeraQ{font-size:32px;letter-spacing:-.01em;margin:4px 0 8px;font-variant-numeric:tabular-nums}
.provjeraUnos{height:52px;border:1.5px solid var(--line-strong);border-radius:var(--r-ctl);display:grid;place-items:center;
  font-size:28px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.provjeraUnos.prazno{color:var(--line-strong)}
.provjeraPad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.provjeraPad button{min-height:54px;border-radius:var(--r-ctl);background:#F3F2F8;font-size:24px;font-weight:700}
.provjeraPad button:active{transform:scale(.97);background:var(--accent-soft)}
.provjeraPad button.ok{background:var(--accent);color:#fff}
.provjeraPad button.del{font-size:21px}
.provjeraCard .btn{width:100%}

.kidUredjaji{color:var(--muted);font-size:13px;margin:8px 0 0}
.kidOvdje{width:100%;margin-top:10px;min-height:48px}
.kidOvdje:disabled{opacity:.75}
.papirici{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.papiric{border:1.5px dashed var(--line-strong);border-radius:12px;padding:16px;background:var(--surface);break-inside:avoid;page-break-inside:avoid}
.papSkola{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em;margin-bottom:2px}
.papIme{font-size:19px;font-weight:700}
.papKod{font-size:38px;font-weight:700;letter-spacing:.06em;margin:6px 0;font-variant-numeric:tabular-nums}
.papUputa{font-size:15px}
.papVeza{font-size:12px;color:var(--muted);margin-top:4px;word-break:break-all}
.papiric{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.papQr{width:116px;height:116px;display:block}
/* Šifra u jednom redu i uz QR kod (uzak telefon, dvije kolone na A4). */
.papKod{white-space:nowrap;font-size:clamp(24px,7.4vw,36px)}
@media print{.papQr{width:30mm;height:30mm}.papKod{font-size:21pt}}
@media(min-width:700px){.papirici{grid-template-columns:1fr 1fr}}
@media print{
  html,body{background:#fff;padding:0}
  body>*:not(#papirici){display:none!important}
  #papirici{display:block!important;max-width:none}
  #papirici .neStampaj{display:none!important}
  .papirici{grid-template-columns:1fr 1fr;gap:0;margin:0}
  .papiric{border-radius:0;margin:-0.75px;padding:18px 20px}
}

/* Brisanje (1. 10.): odvojeno od svakodnevnih dugmadi, crveni tekst. */
.opasno{display:block;min-height:44px;padding:0 4px;margin-top:10px;font-size:var(--t-sm);font-weight:700;color:var(--red);background:none}
.clsDno{margin-top:22px;padding-top:6px;border-top:1px dashed var(--line);display:flex;justify-content:flex-end}

/* Koje odjeljenje (Gradivo, Zadaci): krupno na vrhu ekrana. */
.koje{display:flex;align-items:baseline;gap:8px;margin:2px 0 10px}
.koje small{font-size:var(--t-sm);font-weight:600;color:var(--muted)}
.koje b{font-size:22px;font-weight:750;letter-spacing:-.01em}

/* Pregled zadatka kao dijete (zadaci.js otvoriGled): Proba u prozoru preko
   ekrana, telefon u sredini, dugmad gore i dolje. */
.zGledaj{margin:0 0 8px;width:100%}
.zGled{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:#0E1420;
  padding:calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 10px)}
.zGledVrh,.zGledDno{display:flex;align-items:center;gap:8px;color:#fff}
.zGledVrh{margin-bottom:8px}.zGledDno{margin-top:8px;justify-content:space-between}
.zGledVrh .sp{flex:1}
.zGledBr{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums;margin-left:4px}
.zGledB{min-height:44px;min-width:44px;padding:0 13px;border-radius:12px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:14.5px;font-weight:700}
.zGledB:active{background:rgba(255,255,255,.18)}
.zGledOkvir{position:relative;flex:1;min-height:0;display:flex;justify-content:center}
.zGledOkvir iframe{width:min(430px,100%);height:100%;max-height:900px;border:0;border-radius:22px;background:var(--bg)}
.zGledKraj{position:absolute;inset:auto 0 18px 0;margin:0 auto;width:min(360px,calc(100% - 24px));display:flex;flex-direction:column;gap:9px;
  background:var(--surface);color:var(--ink);border-radius:18px;padding:16px;box-shadow:0 12px 34px rgba(0,0,0,.35)}
.zGledKraj b{font-size:17px}

/* Prijava lošeg pitanja (prijava.js): iznad svega, i iznad pregleda zadatka. */
.prijavaWrap{position:fixed;inset:0;z-index:400;background:rgba(14,20,32,.55);display:flex;align-items:flex-end;justify-content:center}
.prijavaKartica{background:var(--surface);color:var(--ink);width:100%;max-width:520px;border-radius:20px 20px 0 0;
  padding:18px 16px calc(env(safe-area-inset-bottom) + 16px);display:flex;flex-direction:column;gap:10px}
.prijavaNaslov{font-size:18px}
.prijavaQ{font-size:14px;color:var(--muted);background:var(--bg);border-radius:10px;padding:8px 10px}
.prijavaRazlozi{display:flex;flex-wrap:wrap;gap:8px}
.prijavaRazlozi button{min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:14px;font-weight:650;color:var(--ink)}
.prijavaRazlozi button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.prijavaDno{display:flex;gap:10px}.prijavaDno .btn{flex:1}
.admPrijava{border-top:1px solid var(--line);padding:10px 0 4px;margin-top:8px}
.admPrijavaQ{font-weight:650;font-size:var(--t-sm)}

/* iPhone/iPad: „Za roditelja — dodaj na početni ekran“ (ios.js). */
.iosTraka{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 8px 8px 12px;border-radius:14px;
  background:#FFF4D6;color:var(--ink);font-size:13.5px;line-height:1.35}
.iosTraka .iosT{flex:1}
.iosTraka button{min-height:44px;min-width:44px;border:0;border-radius:10px;background:rgba(0,0,0,.06);font:inherit;font-weight:700;padding:0 10px}
.iosKoraci{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.iosKoraci li{display:flex;gap:10px;align-items:flex-start}
.iosKoraci li span{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.iosKoraci li p{margin:2px 0 0;font-size:15px}

/* Šta je savladano (teacher.js, savladano.js). */
.svDijete{display:flex;flex-direction:column;gap:6px}
.svRed{border-left:3px solid var(--line);padding:2px 0 2px 9px}
.svRed b{display:block;font-size:13px}.svRed b span{font-weight:600;color:var(--muted)}
.svRed small{display:block;font-size:12.5px;color:var(--ink);line-height:1.4}
.sv-zapinje{border-color:#E0913C}.sv-ponoviti{border-color:#4E8FD6}.sv-uci{border-color:#B8B4C8}.sv-savladano{border-color:#3FA27A}
.svRazred{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.svRazred summary{font-weight:700;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}
.svRazred summary small{color:var(--muted);font-weight:600}
.svTema{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.svBrojevi{display:flex;gap:4px;flex:none}
.svBr{display:inline-block;min-width:22px;padding:1px 6px;border-radius:999px;font-size:12px;font-weight:700;text-align:center;border:1.5px solid}
.svBr.sv-zapinje{background:#FCEBD8}.svBr.sv-ponoviti{background:#E2EEFB}.svBr.sv-uci{background:#F1F0F5}.svBr.sv-savladano{background:#DFF3EA}

/* Da li djeca vježbaju (admin-djeca.js). */
.admDjecaSpisak{margin-top:10px;font-size:13.5px}.admDjecaSpisak small{color:var(--muted)}
.admDjecaSpisak div{margin-top:3px;line-height:1.5}

.ulazPrivatnost{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:13px;color:var(--muted);text-decoration:none}

/* Staging (app.js oznaciStaging): mala oznaka, ne smeta dodiru. */
.novaAdresa{position:fixed;left:0;right:0;bottom:0;z-index:50;display:block;text-align:center;
  padding:10px 16px calc(env(safe-area-inset-bottom) + 10px);background:var(--accent);color:#fff;font:600 15px/1.3 system-ui,sans-serif;text-decoration:none}
.novaAdresa b{font-weight:800}
body.imaNovuAdresu{padding-bottom:calc(env(safe-area-inset-bottom) + 46px)}
.stagingZnak{position:fixed;left:6px;bottom:calc(env(safe-area-inset-bottom) + 6px);z-index:999;pointer-events:none;
  background:#C2410C;color:#fff;font:700 10px/1 system-ui,sans-serif;letter-spacing:.08em;padding:4px 6px;border-radius:6px;opacity:.85}

/* Probaj › u biranju tema zadatka (zadaci.js). */
label.zPick .zProbaj{margin-left:auto;flex:none;align-self:flex-start;min-height:44px;padding:0 4px 0 8px;border:0;background:none;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--accent);cursor:pointer}

/* Lice po pitanju u pregledu zadatka (zadaci.js). */
.zQ{flex-wrap:wrap}
.zLica{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;flex-basis:100%;padding-left:33px}
.zLica button{min-height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);line-height:1;
  font:inherit;font-size:12px;font-weight:650;color:var(--muted)}
.zLica button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

.zObl{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-ctl);padding:7px 10px;margin:2px 0 6px}.zObl summary{cursor:pointer;list-style:none;display:flex;gap:8px;justify-content:space-between}.zObl summary::-webkit-details-marker{display:none}.zObl summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zObl summary b{flex:none;color:var(--accent)}.zObl summary b::after{content:' ▾'}.zObl[open] summary b::after{content:' ▴'}.zOblSve{margin-top:6px;color:var(--ink);line-height:1.45}.zOblSve em{display:block;font-style:normal;font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.skDesno{display:inline-flex;align-items:baseline;gap:8px;margin-left:auto}
.skTime b{color:var(--ink);font-weight:700}
.skTraka{display:flex;flex-direction:column;gap:5px;margin:0 0 10px}
.skStack{display:flex;gap:2px;height:9px;border-radius:999px;overflow:hidden;background:#ECEBF2}
.skStack i,.skLeg i{display:block;font-style:normal}
.skStack .al,.skLeg .al{background:var(--green)}.skStack .up,.skLeg .up{background:var(--accent)}.skStack .wr,.skLeg .wr{background:var(--red)}
.skLeg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.skLeg span{display:inline-flex;align-items:center;gap:5px}.skLeg i{width:9px;height:9px;border-radius:3px}
.skLeg b{color:var(--ink);font-variant-numeric:tabular-nums}
.skLice{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:6px;margin:0 0 10px}
.skLc{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:7px 9px;display:flex;flex-direction:column;gap:4px}
.skLc span{font-size:12px;color:var(--muted)}.skLc b{font-size:15px;font-variant-numeric:tabular-nums}
.skLc i{display:block;height:5px;border-radius:99px;background:#E7E7E2;overflow:hidden}.skLc u{display:block;height:100%;background:var(--green);text-decoration:none}
.skCit{font-size:12.5px;font-weight:600;color:var(--st-learning);margin:-4px 0 10px}
.skDet .qSum{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:2px 0 6px}
.skDet .qSum.qSve{text-transform:none;letter-spacing:0;font-size:13px;color:var(--green);margin-bottom:10px}
.qTrebaW{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
.qTreba{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--st-learning-soft);border-radius:9px;padding:7px 10px;font-size:13.5px;font-weight:650}
.qTreba small{font-weight:500;color:var(--st-learning);white-space:nowrap}
.zSve{width:100%;margin-top:10px}

/* Živa pitanja (js/zivo, iz Radionice 6. 10.): crteži u kartici i scene odgovora */
.vis.zivoVis{padding:0;overflow:hidden;border-radius:16px;width:100%;max-width:520px;align-self:center;display:block}
.zivoVis svg,.zivoScena svg,.zivoKutija svg,.stoMjesnaScena svg,.stoNebo svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none}
.zivoVis svg{border-radius:16px}
.zivoScena{border-radius:16px;overflow:hidden;background:#EEF4F2;margin-bottom:6px}
.zivoCipovi{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 4px}
.zivoCip{min-height:46px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font:inherit;font-size:17px;font-weight:700;color:var(--ink);touch-action:none;cursor:grab}
.zivoCip.izabran{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}
.zivoCip.stoji{visibility:hidden}
.zivoDuh{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%) scale(1.06);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.zivoPoruka{font-size:15px;font-weight:650;line-height:1.4;color:var(--ink);text-align:center;margin:6px 4px 2px}
.zivoPoruka:empty{display:none}
.zivoKutija{margin-top:8px}
.stoMjesna{display:flex;flex-direction:column;gap:10px}
.stoMjesnaScena{border-radius:16px;overflow:hidden}
.stoMjesnaDugmad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stoMjesnaDug{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;font-weight:700}
.stoNebo{border-radius:14px;overflow:hidden;margin-bottom:8px}
#play .qcard.imaGlas .vis.zivoVis,.qcard .vis.zivoVis{padding-right:0;margin-left:auto;margin-right:auto}
/* Na niskom telefonu scena se smanji (sačuva omjer), da cijelo pitanje stane bez skrola. */
.zivoScena svg,.stoMjesnaScena svg{max-height:max(220px,calc(100dvh - 400px))}
.vis.zivoVis svg{max-height:max(150px,calc(100dvh - 520px))}
.zivoKutija svg{max-height:160px}
/* Šest pitanja rukama (6. 10.): dugmad skokova i lenjira, račun s kućicom
   (tastatura aplikacije ispod, njen veliki ekran se ne vidi — broj ide u kućicu). */
.zivoSkokovi{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0}
.zivoSkokovi button{min-height:48px;min-width:64px;padding:0 16px;border-radius:var(--r-box);background:var(--purple);color:#fff;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;touch-action:manipulation}
.zivoSkokovi button.sporedno{background:var(--accent-soft);color:var(--purple)}
.zivoSkokovi button.strelica{min-width:96px;min-height:52px;font-size:24px;background:var(--purple);color:#fff}
.zivoSkokovi button:disabled{opacity:.35}
.zivoSkokovi button[hidden]{display:none}
.zivoSkokovi[hidden]{display:none}
/* Dodir na sliku ne ostavlja plavi okvir; izbor se vidi po debljem rubu kartice. */
.zivoScena svg [tabindex]:focus{outline:none}
/* Ko koga jede, Obuci se, Gdje je šta: nemaju „Provjeri“ (bezProvjeri), pa scena
   smije biti viša i na kratkom telefonu — kartice u ormaru ostaju ≥ 44 px. */
.zivoScena.zivoVisoka svg{max-height:max(300px,calc(100dvh - 300px))}
.zivoRacun[hidden]{display:none}
.zivoJednacina{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;margin:4px 0 8px;color:var(--ink)}
.zivoKucica{display:inline-grid;place-items:center;min-width:58px;height:46px;padding:0 8px;border:2.5px dashed var(--line);border-radius:12px;background:var(--surface);color:var(--muted)}
.zivoKucica.on{border-style:solid;border-color:var(--accent);color:var(--ink)}
.zivoTast .entry{display:none}
:is(#play.on,#igra.on #play) #answer .zivoTast .pad .k{height:clamp(42px,5.4dvh,50px)}
:is(#play.on,#igra.on #play) #answer .zivoTast .pad{gap:7px}

/* Priče na početnom ekranu (js/price/, 6. 10.): kartica sa slikom svijeta,
   imenom i jednom rečenicom. Odgledana nosi kvačicu, nova oznaku „Novo“. */
.priceLista{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pricaKarta{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);box-shadow:none;min-height:0}
.pricaKarta:active{transform:scale(.99)}
.pricaKarta svg{display:block;width:100%;height:auto;aspect-ratio:4/3}
.pricaKarta .pkTekst{padding:10px 12px 12px;display:grid;gap:3px}
.pricaKarta b{font-size:16px;font-weight:800;line-height:1.2;color:var(--ink)}
.pricaKarta small{font-size:13px;font-weight:550;line-height:1.3;color:var(--muted)}
.pricaKarta .pkZnak{position:absolute;top:8px;right:8px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800;background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.pricaKarta .pkZnak.novo{background:#F2C744;color:#3A2A10}
.pricaKarta .pkZnak.ok{background:#DDF0E2;color:#1D5C35}
#prica.on{padding:0;margin:0;max-width:none}
.pricaVis{display:grid;justify-items:center;gap:4px}
.pricaVis svg{width:132px;height:auto;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.pricaVis small{font-size:12px;font-weight:700;color:var(--muted)}
/* „‹ Nazad na administratora“ dok odrasli gleda demo dijete (js/demo-dijete.js):
   gore u sredini, iznad svega (i priče preko cijelog ekrana). */
.povratakOdrasli{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 8px);transform:translateX(-50%);z-index:90;min-height:40px;padding:8px 16px;border-radius:999px;border:2px solid #fff;background:#134E5A;color:#fff;font-size:14px;font-weight:800;box-shadow:0 4px 16px rgba(0,0,0,.25);white-space:nowrap;cursor:pointer}

/* Nove vrste pitanja (js/zivo) imaju svoju scenu: kartica s pitanjem ne treba
   biti visoka i centrirana, inače su pitanje, mjesta i kartice razbacani po
   ekranu (Fable, 6. 10.). */
#play:has(.zivoScena) .qcard{min-height:0;padding-top:22px;padding-bottom:22px}
.szCopy small{font-size:14px}
/* Priče na početnom ekranu: jedan red koji se prevlači prstom, da predmeti ne
   odu dva ekrana niže; sljedeća kartica viri, da se vidi da ima još. */
.priceLista{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.priceLista::-webkit-scrollbar{display:none}
.priceLista .pricaKarta{flex:0 0 calc((100% - 20px) / 2.35);scroll-snap-align:start}
/* Ensar 8. 10.: na širem ekranu tri kartice su tačno stale, pa se nije vidjelo da
   ima još — sad nikad nije cio broj kartica, zadnja viri, a desni rub blijedi. */
@media (min-width:520px){.priceLista .pricaKarta{flex-basis:calc((100% - 30px) / 3.4)}}
.priceRed{position:relative}
.priceRed .priceLista{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.priceRed.naKraju .priceLista{-webkit-mask-image:none;mask-image:none}
.priceZag{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.priceZag .homeSection{margin-right:0}
.priceSveBtn{flex:none;margin:0 4px 11px 0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:700 14px inherit;font-family:inherit;box-shadow:none;min-height:0}
.priceSveBtn b{font-weight:700;color:var(--muted)}
.priceStr{position:absolute;top:calc(50% - 26px);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:26px;line-height:1;display:grid;place-items:center;padding:0 0 3px;box-shadow:0 2px 8px rgba(0,0,0,.14);min-height:0;z-index:2}
.priceStr.lijevo{left:-10px}.priceStr.desno{right:-10px}
.priceStr[hidden]{display:none}
@media (hover:none),(pointer:coarse){.priceStr{display:none!important}}
/* „Sve priče“ na kraju reda: četiri sličice */
.pkSve .pkSveIk{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:4/3;background:var(--line)}
.pkSve .pkSveIk svg{aspect-ratio:auto;height:100%;width:100%}
/* Ekran „Sve priče“ */
#priceSve .psNapredak{margin:4px 17px 0;font-size:14px;font-weight:650;color:var(--muted)}
.psMreza{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

/* Gradivo: priča koja objašnjava temu (js/screens/teacher.js) */
.pacePrica{display:block;margin-top:3px;font-size:12.5px;font-weight:700;color:var(--purple);text-decoration:none}

/* Dok je priča otvorena, „Nazad na administratora“ ide ispod kontrola priče. */
body:has(#prica.on) .povratakOdrasli{top:calc(env(safe-area-inset-top,0px) + 86px)}