/* ================= GRAD ČASOVA - dizajn sistem sajta ================= */
@font-face{font-family:'Fredoka';font-weight:500 700;font-display:swap;src:url(../fonts/Fredoka-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fredoka';font-weight:500 700;font-display:swap;src:url(../fonts/Fredoka-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fredoka';font-weight:500;src:url(../fonts/Fredoka-BS-dopuna-500.woff2) format('woff2');unicode-range:U+0106-0107,U+010C-010D,U+0110-0111}
@font-face{font-family:'Fredoka';font-weight:600;src:url(../fonts/Fredoka-BS-dopuna-600.woff2) format('woff2');unicode-range:U+0106-0107,U+010C-010D,U+0110-0111}
@font-face{font-family:'Fredoka';font-weight:700;src:url(../fonts/Fredoka-BS-dopuna-700.woff2) format('woff2');unicode-range:U+0106-0107,U+010C-010D,U+0110-0111}
@font-face{font-family:'Nunito';font-weight:400 800;font-display:swap;src:url(../fonts/Nunito-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-weight:400 800;font-display:swap;src:url(../fonts/Nunito-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Caveat';font-weight:500 700;font-display:swap;src:url(../fonts/Caveat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Caveat';font-weight:500 700;font-display:swap;src:url(../fonts/Caveat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F}

:root{
  --papir:#FFFCF5; --krem:#FBF3E2; --tinta:#1F2B3D; --muted:#5B6B80; --sivo:#8A96A8; --linija:#E6DCC8;
  --tirkiz:#1F9E94; --zlatna:#E58A1F; --crvena:#D9534F; --plava:#3A7BD5; --zuta:#F7C948; --zelena:#5B9E4D;
  --r:22px; --sjena:0 10px 0 -4px rgba(31,43,61,.07),0 22px 44px -22px rgba(31,43,61,.35);
  --hud:64px;
  --a:#1F9E94; --b:#E58A1F; --t:#1F2B3D; --s:#FFFCF5;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papir);color:var(--tinta);font-family:'Nunito',system-ui,sans-serif;font-size:17px;line-height:1.55;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:'Fredoka','Nunito',sans-serif;line-height:1.1;margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--zlatna);outline-offset:3px;border-radius:8px}
.preskoci{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:10px;z-index:100}
.preskoci:focus{left:8px}
.no-print{}
/* dugmad - „gumena“ s donjom sjenom, stisnu se na klik */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:12px 20px;background:var(--a);color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;text-decoration:none;box-shadow:0 5px 0 color-mix(in srgb,var(--a) 70%,#000);transition:transform .12s,box-shadow .12s,filter .2s;white-space:nowrap}
.btn:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 7px 0 color-mix(in srgb,var(--a) 70%,#000)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--a) 70%,#000)}
.btn-velik{font-size:20px;padding:15px 26px;border-radius:18px}
.btn-sek{background:#fff;color:var(--tinta);box-shadow:0 5px 0 var(--linija),inset 0 0 0 2.5px var(--linija)}
.btn-sek:hover{box-shadow:0 7px 0 var(--linija),inset 0 0 0 2.5px var(--linija)}
.btn-sek:active{box-shadow:0 1px 0 var(--linija),inset 0 0 0 2.5px var(--linija)}
.bob{animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-1.5deg)}}
.rise{animation:rise .8s cubic-bezier(.2,.9,.3,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.pop-in{animation:popIn .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.9,.3,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ================= HUD ================= */
.hud{position:fixed;left:0;right:0;top:0;height:var(--hud);z-index:50;display:flex;align-items:center;gap:18px;padding:0 18px;background:rgba(255,252,245,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid rgba(31,43,61,.08)}
body[data-ruta="grad"] .hud{background:rgba(255,252,245,.55);border-bottom-color:transparent}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.logo-ik{width:44px;height:44px;border-radius:50%;background:#FFF8EC;border:3px solid var(--tirkiz);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;transition:transform .3s}
.logo:hover .logo-ik{transform:rotate(-12deg) scale(1.08)}
.logo-ik svg{width:46px;height:46px;margin-top:4px}
.logo-t{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.logo-t b{font-family:'Fredoka',sans-serif;font-size:21px}
.logo-t small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-nav{display:flex;gap:4px;margin-left:auto}
.hud-nav a{text-decoration:none;font-family:'Fredoka',sans-serif;font-weight:600;padding:8px 14px;border-radius:12px;position:relative;transition:background .2s}
.hud-nav a:hover{background:rgba(31,43,61,.06)}
.hud-nav a.on{background:var(--tinta);color:#fff}
.pasos-br{position:absolute;right:-2px;top:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--zlatna);color:#fff;font-style:normal;font-size:12px;display:none;align-items:center;justify-content:center;padding:0 5px}
.pasos-br.ima{display:flex}
.pasos-link.skoci{animation:skoci .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes skoci{30%{transform:scale(1.35) rotate(-6deg)}}
.hud-desno{display:flex;align-items:center;gap:10px}
.nacin{display:flex;background:rgba(31,43,61,.07);border-radius:14px;padding:3px}
.nacin button{border:0;background:none;padding:7px 12px;border-radius:11px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;transition:background .2s,color .2s}
.nacin button.on{background:#fff;box-shadow:0 2px 0 rgba(31,43,61,.12)}
.hud-zvuk{border:0;background:rgba(31,43,61,.07);width:40px;height:40px;border-radius:12px;font-size:18px}
.hud-zvuk.off{opacity:.55}

/* ================= PRELAZ (krug u boji) ================= */
#prelaz{position:fixed;inset:0;z-index:90;pointer-events:none;clip-path:circle(0 at var(--x,50%) var(--y,50%))}
#prelaz.prelaz-in{pointer-events:all;animation:wipeIn .52s cubic-bezier(.7,0,.3,1) forwards}
#prelaz.prelaz-out{animation:wipeOut .56s cubic-bezier(.7,0,.3,1) forwards}
@keyframes wipeIn{from{clip-path:circle(0 at var(--x) var(--y))}to{clip-path:circle(var(--r) at var(--x) var(--y))}}
@keyframes wipeOut{from{clip-path:circle(var(--r) at var(--x) var(--y))}to{clip-path:circle(0 at var(--x) var(--y))}}
#app.ulaz>*{animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ================= GRAD ================= */
.v-grad{position:fixed;inset:0;overflow:hidden}
.grad{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
  --sky1:#9ED8F0;--sky2:#FFF4DA;--mnt1:#B9D3E6;--mnt2:#9EC0D8;--brdo:#9CCB5B;--drvo-d:#6FAF52;--trava:#8CC152;--trotoar:#E8DCC4;--ulica:#5D6774;--win:#CFE8F2;--kucica:#F6E6C6;--krov:#B94A3B}
.grad.vuce{cursor:grabbing}
.nebo{position:absolute;inset:0;transition:opacity 1.4s ease}
.nebo-dan{background:linear-gradient(180deg,#8FD0EE 0%,#BDE6F5 42%,#FFF1D2 74%,#FFE7B8 100%)}
.nebo-noc{background:linear-gradient(180deg,#0E1630 0%,#1B2B57 48%,#3B3F75 76%,#5B4A7A 100%);opacity:0}
.je-noc .nebo-noc{opacity:1}
.zvijezde i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;animation:trep 2.6s ease-in-out infinite}
@keyframes trep{0%,100%{opacity:.25}50%{opacity:1}}
.sunce{position:absolute;right:7vw;top:calc(var(--hud) + 3vh);width:min(15vh,130px);height:min(15vh,130px);border:0;background:none;padding:0;z-index:3;transition:transform .3s}
.sunce:hover{transform:scale(1.1) rotate(10deg)}
.sunce svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .8s,transform .8s}
.sunce .zrake{transform-origin:50px 50px;animation:okret 24s linear infinite}
@keyframes okret{to{transform:rotate(360deg)}}
.sunce .s-noc{opacity:0;transform:rotate(-40deg) scale(.6)}
.je-noc .sunce .s-dan{opacity:0;transform:rotate(40deg) scale(.6)}
.je-noc .sunce .s-noc{opacity:1;transform:none}
.sloj{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.sloj svg{display:block;overflow:visible;max-width:none}
.grad svg{max-width:none}
.s-oblaci .oblak{animation:oblak 38s ease-in-out infinite alternate}
.s-oblaci .oblak:nth-child(2n){animation-duration:52s}
@keyframes oblak{to{transform:translateX(120px)}}
.s-oblaci g.oblak{transform-box:fill-box}
.ptica{animation:mahni .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes mahni{to{transform:scaleY(.4)}}
.mnt1{fill:var(--mnt1);transition:fill 1.4s}.mnt2{fill:var(--mnt2);transition:fill 1.4s}
.brdo1{fill:var(--brdo);stroke:#1F2B3D;stroke-width:4;transition:fill 1.4s}
.drvo-d{fill:var(--drvo-d);stroke:#1F2B3D;stroke-width:6;transition:fill 1.4s}
.kucica{fill:var(--kucica);stroke:#1F2B3D;stroke-width:6}.krov-d{fill:var(--krov);stroke:#1F2B3D;stroke-width:6}
.trava{fill:var(--trava);transition:fill 1.4s}.trotoar{fill:var(--trotoar);transition:fill 1.4s}.ulica{fill:var(--ulica);transition:fill 1.4s}
.win{fill:var(--win);transition:fill 1s}
.shine{opacity:.7}
.lamp{fill:#FFF4C8}.lampcone{fill:#FFE38A;opacity:0;transition:opacity 1s}
.farlight{fill:#FFF0A8;opacity:0;transition:opacity 1s}.far{fill:#FFF8DD}
.je-noc .grad,.grad.je-noc{--mnt1:#2E3A66;--mnt2:#26305A;--brdo:#3E6B3A;--drvo-d:#2F5530;--trava:#4A7A3A;--trotoar:#9C94A8;--ulica:#3A4256;--win:#FFD966;--kucica:#8C8399}
.je-noc .win{filter:drop-shadow(0 0 6px rgba(255,217,102,.9))}
.je-noc .shine{opacity:0}
.je-noc .lamp{fill:#FFE38A;filter:drop-shadow(0 0 10px #FFE38A)}
.je-noc .lampcone{opacity:.28}
.je-noc .farlight{opacity:.45}
.je-noc .grad-svg .zgrada .zg-in{filter:brightness(.82) saturate(.9)}
/* zgrade */
.zgrada{cursor:pointer;outline:none}
.zgrada .zg-in{transition:transform .35s cubic-bezier(.2,1.5,.4,1),filter 1s;transform-box:fill-box;transform-origin:50% 100%}
.zgrada.hover .zg-in,.zgrada:focus-visible .zg-in{transform:translateY(-12px) scale(1.025)}
.zgrada:focus-visible .zg-in{filter:drop-shadow(0 0 0 4px #E58A1F)}
.zg-label{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:#fff;border-radius:16px;padding:7px 18px 9px;box-shadow:0 6px 0 var(--b),0 0 0 4px var(--b);font-family:'Fredoka',sans-serif;line-height:1.1;white-space:nowrap;transition:transform .25s cubic-bezier(.2,1.5,.4,1)}
.zg-label b{font-size:26px;color:var(--tinta)}
.zg-label span{font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;color:#5B6B80}
.zg-label:hover{transform:translateX(-50%) translateY(-6px) rotate(-1.5deg)}
.zg-bubble{position:absolute;transform:translate(-50%,10px) scale(.85);opacity:0;pointer-events:none;width:330px;background:#fff;border:4px solid var(--tinta);border-radius:24px;padding:14px 18px;font-size:19px;line-height:1.3;transition:opacity .25s,transform .3s cubic-bezier(.2,1.5,.4,1);box-shadow:0 10px 0 rgba(31,43,61,.12);z-index:5}
.zg-bubble b{display:block;font-family:'Fredoka',sans-serif;font-size:22px;color:var(--tirkiz);margin-bottom:2px}
.zg-bubble:after{content:'';position:absolute;left:50%;bottom:-20px;margin-left:-12px;border:12px solid transparent;border-top:16px solid var(--tinta);border-bottom:0}
.zg-bubble.on{opacity:1;transform:translate(-50%,0) scale(1)}
/* animacije u gradu */
.balon{animation:balon 4.5s ease-in-out infinite}
@keyframes balon{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px) rotate(.8deg)}}
.macka .rep,.macka .rep2{transform-box:fill-box;transform-origin:0% 100%;animation:rep 1.8s ease-in-out infinite}
@keyframes rep{0%,100%{transform:rotate(0)}50%{transform:rotate(18deg)}}
.lebdi{animation:bob 3s ease-in-out infinite;transform-box:fill-box}
.ljulja{animation:ljulja 3s ease-in-out infinite}
@keyframes ljulja{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.zastava{transform-box:fill-box;transform-origin:0 50%;animation:zastava .9s ease-in-out infinite alternate}
@keyframes zastava{to{transform:scaleX(.82) skewY(4deg)}}
.pcela{animation:pcela 7s ease-in-out infinite}
@keyframes pcela{0%{transform:translate(0,0)}25%{transform:translate(-90px,-120px)}50%{transform:translate(-30px,-260px) scaleX(-1)}75%{transform:translate(40px,-120px)}100%{transform:translate(0,0)}}
.pcela{transform-box:fill-box}
.stabljika{transform-box:fill-box;transform-origin:50% 100%;animation:njihaj 6s ease-in-out infinite}
@keyframes njihaj{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.4deg)}}
.zvrka-top{transform-box:fill-box;transform-origin:50% 100%;animation:zvrkaTop 3.2s ease-in-out infinite}
@keyframes zvrkaTop{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg) translateY(-4px)}40%{transform:rotate(0)}}
.krosnja{transform-box:fill-box;transform-origin:50% 100%}
.zg-topola .zg-in{animation:none}
.pero-pada{animation:peroPada 11s linear infinite;opacity:0}
@keyframes peroPada{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:1}25%{transform:translate(40px,120px) rotate(40deg)}50%{transform:translate(-20px,260px) rotate(-30deg)}75%{transform:translate(30px,400px) rotate(30deg)}92%{opacity:1}100%{transform:translate(0,500px) rotate(0);opacity:0}}
.zraka{animation:zraka 5s ease-in-out infinite}
@keyframes zraka{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(-4deg)}}
.kuka{animation:kuka 3.4s ease-in-out infinite}
@keyframes kuka{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.zg-gradiliste.trese .zg-in{animation:trese .8s ease}
@keyframes trese{20%,60%{transform:translateX(-6px) rotate(-.5deg)}40%,80%{transform:translateX(6px) rotate(.5deg)}}
.zvono{transform-box:fill-box;transform-origin:50% 0;animation:zvono 6s ease-in-out infinite}
@keyframes zvono{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(18deg)}96%{transform:rotate(-14deg)}}
/* HUD grada */
.grad-hud{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:6}
.strelica{width:52px;height:52px;border-radius:50%;border:0;background:#fff;font-size:34px;line-height:1;box-shadow:0 5px 0 rgba(31,43,61,.2);font-family:'Fredoka',sans-serif;transition:transform .15s}
.strelica:hover{transform:scale(1.1)}
.strelica:active{transform:scale(.92)}
.mapa{position:relative;display:flex;gap:6px;background:rgba(255,255,255,.92);border-radius:999px;padding:6px 10px;box-shadow:0 5px 0 rgba(31,43,61,.2)}
.mapa button{width:44px;height:44px;border-radius:50%;border:3px solid transparent;background:#F7F1E4;padding:3px;display:flex;align-items:center;justify-content:center;transition:transform .2s,border-color .2s;overflow:hidden}
.mapa button svg{width:38px;height:38px}
.mapa button.on{border-color:var(--b);transform:scale(1.15);background:#fff}
.mapa-pok{position:absolute;left:0;bottom:-6px;width:20px;height:4px;border-radius:2px;background:var(--tinta);transform:translateX(10px);transition:left .1s}
.grad-hint{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);background:var(--tinta);color:#fff;border-radius:999px;padding:10px 20px;font-family:'Fredoka',sans-serif;font-size:17px;display:flex;gap:10px;align-items:center;z-index:6;transition:opacity .6s,transform .6s;white-space:nowrap}
.grad-hint .ruka{display:inline-block;animation:ruka 1.6s ease-in-out infinite}
@keyframes ruka{0%,100%{transform:translateX(-8px)}50%{transform:translateX(14px)}}
.grad-hint.off{opacity:0;transform:translateX(-50%) translateY(20px);pointer-events:none}

/* ================= UVOD ================= */
.uvod{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;transition:opacity .8s,transform .9s cubic-bezier(.7,0,.3,1)}
.uvod-nebo{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,#FFE7B8 0%,#BDE6F5 45%,#7FC4E6 100%)}
.uvod-nebo:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.8) 0 40px,transparent 41px),radial-gradient(circle at 26% 33%,rgba(255,255,255,.8) 0 54px,transparent 55px),radial-gradient(circle at 78% 20%,rgba(255,255,255,.8) 0 46px,transparent 47px),radial-gradient(circle at 84% 24%,rgba(255,255,255,.8) 0 34px,transparent 35px);animation:oblak 30s ease-in-out infinite alternate}
.uvod.van{opacity:0;transform:scale(1.15);pointer-events:none}
.uvod-in{position:relative;padding:24px}
.uvod-mala{font-family:'Fredoka',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--tirkiz);font-weight:600;animation:rise .8s .1s both}
.uvod-ime{font-family:'Caveat',cursive;font-size:clamp(34px,5vw,54px);font-weight:700;color:var(--tinta);margin-top:-2px;animation:rise .8s .25s both}
.uvod-nas{font-size:clamp(56px,11vw,140px);letter-spacing:-.01em;color:var(--tinta);text-shadow:0 6px 0 rgba(31,43,61,.12);margin:4px 0 6px}
.uvod-nas span{display:inline-block;animation:slovo .9s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.4s + var(--i) * .06s)}
.uvod-nas span:nth-child(odd){color:var(--tirkiz)}
@keyframes slovo{from{opacity:0;transform:translateY(-90px) rotate(-20deg) scale(.4)}to{opacity:1;transform:none}}
.uvod-pod{font-size:clamp(17px,2vw,22px);color:var(--muted);max-width:560px;margin:0 auto 18px;animation:rise .8s 1.1s both}
.uvod-parada{display:flex;justify-content:center;gap:clamp(10px,3vw,34px);margin:6px 0 26px}
.uvod-parada div{width:clamp(70px,10vw,120px);height:clamp(80px,12vw,140px);animation:parada 1s cubic-bezier(.2,1.6,.4,1) both,bob 3s ease-in-out infinite;animation-delay:calc(1.2s + var(--i) * .15s),calc(2.2s + var(--i) * .3s)}
.uvod-parada svg{width:100%;height:100%}
@keyframes parada{from{opacity:0;transform:translateY(80px) scale(.5)}to{opacity:1;transform:none}}
.uvod-btn{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;animation:rise .8s 1.8s both}
.uvod-skola{margin-top:22px;font-size:14px;color:var(--muted);animation:fadeIn 1s 2.2s both}

/* ================= STRANICA ČASA ================= */
.v-cas,.v-zbornica,.v-pasos,.v-diploma{padding-top:var(--hud)}
.cas{--papir:#FFFCF5}
.cas-hero{position:relative;background:var(--s);background-image:radial-gradient(ellipse at 85% 20%,color-mix(in srgb,var(--a) 22%,transparent),transparent 55%),radial-gradient(ellipse at 10% 90%,color-mix(in srgb,var(--b) 26%,transparent),transparent 50%);padding:28px 24px 90px;overflow:hidden}
.nazad{display:inline-flex;align-items:center;gap:6px;font-family:'Fredoka',sans-serif;font-weight:600;text-decoration:none;background:#fff;padding:8px 14px;border-radius:12px;box-shadow:0 4px 0 rgba(31,43,61,.12);position:relative;z-index:2;transition:transform .2s}
.nazad:hover{transform:translateX(-4px)}
.nazad.svijetlo{background:rgba(255,255,255,.92)}
.hero-in{max-width:1180px;margin:10px auto 0;display:grid;grid-template-columns:1.25fr .9fr;gap:30px;align-items:center;position:relative;z-index:1}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chips span{background:#fff;border-radius:999px;padding:5px 14px;font-weight:800;font-size:14px;box-shadow:0 0 0 2.5px color-mix(in srgb,var(--a) 35%,transparent)}
.chips .chip-ntc{background:var(--a);color:#fff;box-shadow:none}
.cas-hero h1{font-size:clamp(38px,5.4vw,70px);color:var(--t)}
.podnaslov{font-size:22px;color:var(--muted);margin:10px 0 0}
.podnaslov b{color:var(--a)}
.kuka{font-size:19px;max-width:640px;margin:16px 0 22px;background:rgba(255,255,255,.75);border-left:6px solid var(--b);padding:12px 18px;border-radius:0 16px 16px 0}
.hero-btn{display:flex;flex-wrap:wrap;gap:12px}
.hero-brojke{display:flex;gap:28px;margin-top:26px}
.hero-brojke div{font-size:14px;color:var(--muted);line-height:1.1}
.hero-brojke b{display:block;font-family:'Fredoka',sans-serif;font-size:34px;color:var(--t)}
.hero-lik{position:relative;display:flex;flex-direction:column;align-items:center}
.lik-svg{width:min(380px,80%);aspect-ratio:1/1.05;animation:likUlaz 1s cubic-bezier(.2,1.5,.4,1) both,bob 3.6s 1s ease-in-out infinite}
.lik-svg svg{width:100%;height:100%}
@keyframes likUlaz{from{opacity:0;transform:translateY(60px) scale(.6) rotate(8deg)}to{opacity:1;transform:none}}
.lik-bubble{position:relative;margin-top:-6px;background:#fff;border:4px solid var(--t);border-radius:26px;padding:14px 20px;max-width:380px;font-size:19px;line-height:1.3;box-shadow:0 8px 0 rgba(31,43,61,.1);min-height:84px;animation:rise .7s .5s both}
.lik-bubble:before{content:'';position:absolute;left:50%;top:-22px;margin-left:-12px;border:12px solid transparent;border-bottom:18px solid var(--t);border-top:0}
.lik-bubble b{display:block;font-family:'Fredoka',sans-serif;color:var(--a);font-size:20px}
.pisi:after{content:'▍';animation:trep 1s steps(1) infinite;color:var(--a)}
.hero-dekor{position:absolute;inset:0;pointer-events:none}
.dekor{position:absolute;width:90px;height:90px;opacity:.5;animation:plovi 12s ease-in-out infinite;animation-delay:var(--d)}
.dekor svg{width:100%;height:100%}
.d0{left:4%;top:62%}.d1{left:46%;top:8%;width:70px;height:70px}.d2{right:3%;top:70%}.d3{left:38%;bottom:12%;width:64px;height:64px}.d4{right:36%;top:30%;width:56px;height:56px}
@keyframes plovi{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(18px,-22px) rotate(12deg)}66%{transform:translate(-14px,10px) rotate(-8deg)}}
.hero-val{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px}
.cas-sekcije{display:flex;flex-direction:column}
.sek{padding:56px 24px}
.sek-in{max-width:1180px;margin:0 auto}
.sek h2{font-size:clamp(30px,3.6vw,44px);display:flex;align-items:center;gap:14px;margin-bottom:8px}
.h-br{width:46px;height:46px;border-radius:14px;background:var(--a);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:24px;transform:rotate(-6deg);box-shadow:0 4px 0 color-mix(in srgb,var(--a) 70%,#000);flex:none}
.sek-pod{color:var(--muted);font-size:18px;margin:0 0 24px}
/* poredak sekcija po načinu */
.n-odrasli .sek-prica{order:6}.n-odrasli .sek-igra{order:7}.n-odrasli .sek-kolege{order:1}.n-odrasli .sek-tok{order:2}.n-odrasli .sek-mat{order:3}.n-odrasli .sek-prez{order:4}
.n-odrasli .h-br{display:none}
.sek:nth-child(even of .sek){background:color-mix(in srgb,var(--s) 70%,#fff)}
.sek-igra{background:color-mix(in srgb,var(--a) 9%,#fff)!important}
/* priča */
.prica-grid{display:grid;grid-template-columns:330px 1fr;gap:30px;align-items:start}
.lik-kartica{background:#fff;border-radius:28px;padding:24px;text-align:center;box-shadow:var(--sjena);border:3px solid color-mix(in srgb,var(--a) 30%,#fff)}
.lk-svg{width:200px;height:210px;margin:0 auto}
.lk-svg svg{width:100%;height:100%}
.lik-kartica h3{font-size:26px;color:var(--a);margin:8px 0}
.lik-kartica p{margin:0;color:var(--muted)}
.prica-tekst{font-size:19px}
.pismo{font-family:'Caveat',cursive;font-size:34px;line-height:1.2;color:var(--t);margin:0 0 14px}
.kuka-box{background:#fff;border-radius:20px;padding:16px 20px;border:3px dashed var(--b);margin-top:16px}
.kuka-box b{display:block;font-family:'Fredoka',sans-serif;color:var(--b);font-size:18px;text-transform:uppercase;letter-spacing:.08em}
/* prezentacija */
.prez{background:#fff;border-radius:28px;padding:18px;box-shadow:var(--sjena)}
.prez-glavni{position:relative;border-radius:18px;overflow:hidden;background:#111;aspect-ratio:16/9}
.prez-img{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer}
.prez-img.ulaz{animation:slajd .45s ease both}
@keyframes slajd{from{opacity:.2;transform:scale(1.03)}to{opacity:1;transform:none}}
.prez-str{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:0;background:rgba(255,255,255,.92);font-size:36px;line-height:1;box-shadow:0 4px 0 rgba(0,0,0,.2);opacity:.85;transition:opacity .2s,transform .2s}
.prez-str:hover{opacity:1;transform:translateY(-50%) scale(1.1)}
.prez-str.l{left:14px}.prez-str.d{right:14px}
.prez-br{position:absolute;right:14px;bottom:12px;background:rgba(31,43,61,.85);color:#fff;border-radius:10px;padding:3px 10px;font-family:'Fredoka',sans-serif;font-size:14px}
.prez-trake{display:flex;gap:10px;overflow-x:auto;padding:14px 4px 6px;scroll-snap-type:x mandatory}
.prez-trake button{flex:none;width:150px;border:3px solid transparent;border-radius:12px;padding:0;background:none;position:relative;overflow:hidden;scroll-snap-align:center;transition:transform .2s,border-color .2s}
.prez-trake button img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.prez-trake button span{position:absolute;left:6px;top:4px;background:rgba(31,43,61,.8);color:#fff;font-size:11px;border-radius:6px;padding:0 6px;font-family:'Fredoka',sans-serif}
.prez-trake button.on{border-color:var(--a);transform:translateY(-3px)}
.prez-akcije{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
/* tok časa */
.tok{background:#fff;border-radius:28px;padding:22px;box-shadow:var(--sjena)}
.tok-traka{position:relative;display:flex;gap:4px;height:64px;border-radius:18px;overflow:hidden}
.tok-dio{border:0;background:color-mix(in srgb,var(--a) 22%,#fff);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;color:var(--t);transition:background .25s,transform .25s;min-width:0}
.tok-dio:nth-child(even){background:color-mix(in srgb,var(--b) 26%,#fff)}
.tok-dio span{white-space:nowrap;overflow:hidden}
.tok-dio:hover,.tok-dio.on{background:var(--a);color:#fff}
.tok-kaz{position:absolute;top:0;bottom:0;width:4px;background:var(--t);border-radius:2px;left:0;animation:kaz 9s linear infinite}
@keyframes kaz{from{left:0}to{left:calc(100% - 4px)}}
.tok-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:18px}
.tok-faza{display:flex;gap:14px;padding:14px;border-radius:18px;border:2.5px solid var(--linija);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.tok-faza:hover{transform:translateY(-3px)}
.tok-faza.on{border-color:var(--a);background:color-mix(in srgb,var(--a) 8%,#fff)}
.tf-min{flex:none;width:62px;height:62px;border-radius:16px;background:var(--t);color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.tf-min small{font-size:11px;opacity:.8;font-weight:500}
.tok-faza b{font-family:'Fredoka',sans-serif;font-size:19px}
.tok-faza p{margin:2px 0 0;font-size:15px;color:var(--muted);line-height:1.35}
/* materijali */
.mat-grupa{margin-bottom:26px}
.mat-grupa h3{font-size:22px;margin-bottom:12px;color:var(--t)}
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.mat{display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;box-shadow:var(--sjena);position:relative;transition:transform .25s cubic-bezier(.2,1.5,.4,1)}
.mat:hover{transform:translateY(-6px) rotate(-.6deg)}
.mat-slika{position:relative;aspect-ratio:4/3;background:var(--krem);overflow:hidden;display:flex;align-items:center;justify-content:center}
.mat-slika img{width:100%;height:100%;object-fit:cover;object-position:top}
.mat-ikona{font-family:'Fredoka',sans-serif;font-size:34px;font-weight:700;color:#fff;width:110px;height:110px;border-radius:24px;display:flex;align-items:center;justify-content:center;transform:rotate(-5deg)}
.v-pptx.mat-ikona,.mat-vrsta.v-pptx{background:#D24726}.v-docx.mat-ikona,.mat-vrsta.v-docx{background:#2B579A}.mat-vrsta.v-pdf{background:var(--crvena)}
.mat-vrsta{position:absolute;left:10px;top:10px;color:#fff;font-family:'Fredoka',sans-serif;font-size:12px;font-weight:600;padding:2px 9px;border-radius:8px}
.mat-tekst{padding:12px 50px 14px 14px;display:flex;flex-direction:column;gap:2px}
.mat-tekst b{font-size:15px;line-height:1.25}
.mat-tekst small{color:var(--muted)}
.mat-dl{position:absolute;right:12px;bottom:14px;width:34px;height:34px;border-radius:50%;background:var(--a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;transition:transform .2s}
.mat:hover .mat-dl{transform:translateY(3px) scale(1.12)}
/* za kolege */
.kol-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kol-box{background:#fff;border-radius:24px;padding:22px 24px;box-shadow:var(--sjena)}
.kol-box h3{font-size:20px;color:var(--a);margin:0 0 8px}
.kol-box h3:not(:first-child){margin-top:18px}
.kvacice{list-style:none;padding:0;margin:0}
.kvacice li{position:relative;padding-left:32px;margin-bottom:8px}
.kvacice li:before{content:'✓';position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--a);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;font-weight:800}
.ntc-chips{display:flex;flex-wrap:wrap;gap:8px}
.ntc-chips span{background:color-mix(in srgb,var(--b) 18%,#fff);border-radius:12px;padding:6px 12px;font-size:15px;font-weight:700}
blockquote{margin:0;font-size:17px;border-left:5px solid var(--a);padding:4px 0 4px 16px;color:var(--tinta)}
.cas-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;max-width:1180px;margin:0 auto;padding:30px 24px 60px}
.cas-nav a{text-decoration:none;background:#fff;border-radius:20px;padding:14px 18px;box-shadow:0 0 0 3px var(--a),0 6px 0 var(--a);display:flex;flex-direction:column;transition:transform .2s}
.cas-nav a:hover{transform:translateY(-4px)}
.cas-nav small{color:var(--muted);font-weight:800}
.cas-nav b{font-family:'Fredoka',sans-serif;font-size:18px}
.cas-nav .cn-d{text-align:right}
.cas-nav .cn-grad{--a:var(--tinta);font-family:'Fredoka',sans-serif;font-weight:700;padding:14px 22px}

/* ================= IGRE ================= */
.igra{background:#fff;border-radius:30px;box-shadow:var(--sjena);border:4px solid var(--a);overflow:hidden;position:relative;min-height:440px}
.igra-start{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:center;padding:30px}
.igra-lik{width:240px;height:250px}
.igra-lik svg{width:100%;height:100%}
.igra-oznaka{font-family:'Fredoka',sans-serif;letter-spacing:.16em;text-transform:uppercase;font-size:14px;color:var(--a);font-weight:600}
.igra-start h3{font-size:clamp(28px,3vw,40px);margin:6px 0 8px}
.igra-start p{font-size:19px;color:var(--muted);margin:0 0 20px}
.igra-vec{margin-top:14px;font-weight:800;color:var(--zelena)}
.igra-polje{padding:20px 24px 26px;position:relative}
.igra-traka{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.igra-tacke{display:flex;gap:6px;flex-wrap:wrap}
.igra-tacke i{width:16px;height:16px;border-radius:50%;background:var(--linija);transition:background .3s,transform .3s}
.igra-tacke i.ok{background:var(--a)}
.igra-tacke i.sad{background:var(--b);transform:scale(1.3)}
.igra-greske{font-family:'Fredoka',sans-serif;color:var(--crvena);font-weight:600}
.igra-poruka{position:sticky;bottom:12px;margin:16px auto 0;max-width:640px;background:var(--tinta);color:#fff;border-radius:18px;padding:12px 18px;font-size:17px;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .4s cubic-bezier(.2,1.5,.4,1);pointer-events:none}
.igra-poruka.on{opacity:1;transform:none}
.igra-poruka.loše{background:var(--crvena)}
.igra h4{font-size:24px;margin:0 0 4px}
.t-mala{color:var(--muted);margin:0;font-size:15px}
.rz{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font-family:'Fredoka',sans-serif;font-weight:700;line-height:1;margin:0 3px}
.rz i{width:1.2em;height:.12em;min-height:3px;background:currentColor;margin:.12em 0;border-radius:2px}
.opcija .rz{font-size:34px}
.t-red{display:flex;gap:16px;align-items:center}
.t-macka{width:90px;height:80px;flex:none}
.t-macka svg{width:100%;height:100%}
.t-pie{width:min(300px,70vw);margin:10px auto}
.pie{display:block;width:100%}
.pie.klik path{cursor:pointer;transition:filter .2s}
.pie.klik path:hover{filter:brightness(1.08)}
.t-opcije{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.t-opcije.kol{flex-direction:column;align-items:center}
.kv-slika{max-width:420px;margin:0 auto 6px;background:#FFFDF7;border-radius:18px;padding:8px 12px;box-shadow:0 0 0 3px var(--linija)}
.kv-slika svg{display:block;width:100%;height:auto}
.kv-p{text-align:center}
.opcija{border:0;background:#fff;border-radius:18px;padding:14px 26px;box-shadow:0 0 0 3px var(--linija),0 6px 0 var(--linija);font-family:'Fredoka',sans-serif;font-size:20px;transition:transform .15s,box-shadow .2s;min-width:110px}
.opcija:hover{transform:translateY(-3px)}
.opcija.tacno{box-shadow:0 0 0 4px var(--zelena),0 6px 0 var(--zelena);background:#EAF6E4}
.opcija.netacno{box-shadow:0 0 0 4px var(--crvena),0 6px 0 var(--crvena);animation:drma .4s}
.t-dvije{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:10px;flex-wrap:wrap}
.t-izbor{border:0;background:#fff;border-radius:24px;padding:14px;box-shadow:0 0 0 3px var(--linija),0 6px 0 var(--linija);width:230px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .2s}
.t-izbor span{font-size:36px}
.t-izbor:hover{transform:translateY(-4px) rotate(-1deg)}
.t-izbor.tacno{box-shadow:0 0 0 4px var(--zelena),0 6px 0 var(--zelena)}
.t-izbor.netacno{box-shadow:0 0 0 4px var(--crvena),0 6px 0 var(--crvena);animation:drma .4s}
.t-ili{font-family:'Fredoka',sans-serif;font-size:26px;color:var(--muted)}
@keyframes drma{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.drma{animation:drma .45s}
/* mapa tijela */
.m-wrap{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:26px;align-items:start}
.m-tijelo{position:relative;aspect-ratio:200/420;width:100%;cursor:crosshair}
.m-svg,.m-sloj{position:absolute;inset:0}
.m-svg svg{width:100%;height:100%}
.m-postavljen{position:absolute;animation:popIn .5s cubic-bezier(.2,1.5,.4,1) both}
.m-postavljen svg{width:100%;height:100%}
.m-ladica{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-top:12px}
.m-organ{border:0;background:#FFF8EC;border-radius:18px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 0 0 2.5px var(--linija),0 5px 0 var(--linija);font-family:'Fredoka',sans-serif;font-weight:600;touch-action:none;transition:transform .2s,opacity .3s}
.m-organ svg{width:70px;height:70px;pointer-events:none}
.m-organ:hover{transform:translateY(-3px) rotate(-2deg)}
.m-organ.izabran{box-shadow:0 0 0 4px var(--b),0 5px 0 var(--b)}
.m-organ.gotov{opacity:.25;pointer-events:none;transform:scale(.9)}
.m-ghost{position:fixed;left:0;top:0;z-index:99;pointer-events:none;box-shadow:0 18px 30px rgba(0,0,0,.25)!important}
.m-info{margin-top:16px;min-height:90px}
.m-kartica{display:flex;gap:14px;align-items:center;background:color-mix(in srgb,var(--a) 8%,#fff);border-radius:18px;padding:12px 16px;border:2.5px solid var(--a)}
.m-kartica>div:first-child{width:64px;height:64px;flex:none}
.m-kartica svg{width:100%;height:100%}
.m-kartica b{display:block;font-family:'Fredoka',sans-serif;font-size:21px;text-transform:capitalize}
/* film */
.f-nas{text-align:center}
.f-traka{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:#3F2A14;border-radius:14px;padding:16px 10px;margin:14px 0 18px;position:relative}
.f-traka:before,.f-traka:after{content:'';position:absolute;left:10px;right:10px;height:6px;background:repeating-linear-gradient(90deg,#fff 0 10px,transparent 10px 20px);opacity:.8;border-radius:2px}
.f-traka:before{top:4px}.f-traka:after{bottom:4px}
.f-slot{aspect-ratio:1;background:rgba(255,255,255,.12);border-radius:8px;border:2px dashed rgba(255,255,255,.4);position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.f-slot span{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);background:var(--b);color:var(--t);font-family:'Fredoka',sans-serif;font-size:11px;font-weight:700;border-radius:6px;padding:0 6px;white-space:nowrap;z-index:2}
.f-slot svg{position:absolute;inset:0;width:100%;height:100%}
.f-slot em{position:absolute;left:0;right:0;top:3px;text-align:center;font-style:normal;font-family:'Fredoka',sans-serif;font-size:11px;color:#1F2B3D;background:rgba(255,255,255,.85);z-index:2}
.f-slot.pun{border:2px solid #fff;animation:popIn .4s cubic-bezier(.2,1.5,.4,1)}
.f-kadrovi{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.f-kadar{border:0;padding:6px;background:#fff;border-radius:14px;box-shadow:0 0 0 3px var(--linija),0 5px 0 var(--linija);aspect-ratio:1;transition:transform .2s,opacity .3s}
.f-kadar svg{width:100%;height:100%}
.f-kadar:hover{transform:translateY(-4px) rotate(1.5deg)}
.f-kadar.iskoristen{opacity:.15;transform:scale(.85)}
.f-kadar.svijetli{box-shadow:0 0 0 5px var(--b),0 5px 0 var(--b);animation:bob .6s 2}
.f-leti{position:fixed;z-index:99;transition:transform .5s cubic-bezier(.5,0,.3,1);padding:6px;background:#fff;border-radius:14px;pointer-events:none}
.f-leti svg{width:100%;height:100%}
/* gnijezdo od riječi */
.g-scena{display:flex;flex-direction:column;align-items:center;gap:22px}
.g-karta-mjesto{min-height:250px;display:flex;align-items:center;justify-content:center}
.g-karta{width:220px;background:#fff;border-radius:24px;border:4px solid var(--tinta);padding:12px 12px 14px;text-align:center;box-shadow:0 10px 0 rgba(31,43,61,.12);cursor:grab;touch-action:none;transition:transform .55s cubic-bezier(.5,0,.3,1),opacity .55s}
.g-slika{width:150px;height:150px;margin:0 auto}
.g-slika svg{width:100%;height:100%;pointer-events:none}
.g-rijec{font-family:'Fredoka',sans-serif;font-size:36px;font-weight:700}
.g-kante{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:760px}
.g-kanta{border:0;border-radius:22px;padding:12px 8px 14px;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;transition:transform .2s;font-family:'Fredoka',sans-serif}
.g-kanta svg{width:64px;height:64px}
.g-kanta b{font-size:22px;letter-spacing:.04em}
.g-kanta span{font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;opacity:.85}
.g-kanta em{position:absolute;right:10px;top:8px;font-style:normal;background:#fff;border-radius:10px;min-width:26px;padding:0 6px;font-weight:700}
.g-kanta.zb{background:#E3F5F2;box-shadow:0 0 0 4px #1F9E94,0 6px 0 #1F9E94;color:#137A72}
.g-kanta.gr{background:#FDF0DF;box-shadow:0 0 0 4px #E58A1F,0 6px 0 #E58A1F;color:#B4650C}
.g-kanta.ob{background:#EDF1F6;box-shadow:0 0 0 4px #7A8CA5,0 6px 0 #7A8CA5;color:#56677F}
.g-kanta:hover{transform:translateY(-4px)}
.g-kanta.skok{animation:skoci .5s cubic-bezier(.2,1.6,.4,1)}
/* kraj igre */
.igra-kraj{padding:30px;text-align:center}
.kraj-zv{display:flex;justify-content:center;gap:10px;font-size:64px;line-height:1}
.kraj-zv span{color:var(--linija);animation:zvijezda .6s cubic-bezier(.2,1.6,.4,1) both}
.kraj-zv span.puna{color:var(--zuta);text-shadow:0 4px 0 #D9A620}
@keyframes zvijezda{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
.igra-kraj h3{font-size:34px;margin:8px 0}
.igra-kraj p{color:var(--muted);font-size:18px}
.kraj-pecat{display:flex;justify-content:center;margin:10px 0 22px}
.pecat-krug{width:150px;height:150px;border-radius:50%;border:6px double var(--a);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transform:rotate(-12deg);animation:pecatIn .7s .7s cubic-bezier(.2,1.6,.4,1) both;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--a)}
.pecat-krug svg{width:84px;height:84px}
.pecat-krug span{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--a);text-transform:uppercase;letter-spacing:.08em;font-size:15px}
@keyframes pecatIn{from{opacity:0;transform:scale(3) rotate(-40deg)}to{opacity:1;transform:rotate(-12deg)}}
.kraj-btn{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* konfete, iskrice, tost */
.konfete{position:fixed;inset:0;pointer-events:none;z-index:95}
.konfete i{position:absolute;left:0;top:0;display:block}
.konfete b{display:block;width:100%;height:100%;border-radius:50%;border:2px solid #1F2B3D}
.iskra{position:fixed;width:10px;height:10px;margin:-5px 0 0 -5px;pointer-events:none;z-index:96;background:hsl(var(--h) 85% 62%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:iskra .8s ease-out forwards}
@keyframes iskra{to{transform:translateY(24px) scale(0) rotate(180deg);opacity:0}}
.tost{position:fixed;left:50%;bottom:30px;transform:translate(-50%,40px);background:var(--tinta);color:#fff;border-radius:18px;padding:14px 22px;max-width:min(560px,92vw);font-size:17px;z-index:97;opacity:0;transition:opacity .3s,transform .45s cubic-bezier(.2,1.5,.4,1);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.tost.on{opacity:1;transform:translate(-50%,0)}
.v-grad~.tost,body[data-ruta="grad"] .tost{bottom:110px}

/* ================= ZBORNICA ================= */
.zb-hero{padding:24px 24px 10px;background:linear-gradient(#EFE6D2,var(--papir))}
.tabla-skolska{position:relative;max-width:1180px;margin:14px auto 0;background:#8B5E3C;border-radius:22px;padding:18px;box-shadow:inset 0 0 0 4px #6A4429,0 18px 40px -18px rgba(0,0,0,.45)}
.tabla-in{background:radial-gradient(ellipse at 30% 20%,#3F6B4F,#2C4E3A 70%);border-radius:12px;padding:36px 40px 40px;color:#F4F1E8;position:relative;overflow:hidden}
.tabla-in:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-8deg,rgba(255,255,255,.025) 0 2px,transparent 2px 9px);pointer-events:none}
.kreda-mala{font-family:'Fredoka',sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.75;font-size:14px}
.kreda{font-family:'Caveat',cursive;font-size:clamp(54px,8vw,104px);font-weight:700;line-height:1;margin:6px 0 4px;text-shadow:0 0 1px rgba(255,255,255,.6)}
.kreda-pod{font-size:20px;margin:0;opacity:.92}
.kreda-moto{font-family:'Caveat',cursive;font-size:clamp(26px,3vw,36px);margin:18px 0 10px;max-width:760px;line-height:1.2}
.kreda-likovi{display:flex;gap:16px;margin-top:10px}
.kreda-likovi a{width:76px;height:80px;background:rgba(255,255,255,.12);border-radius:18px;padding:6px;transition:transform .2s}
.kreda-likovi a:hover{transform:translateY(-6px) rotate(-4deg);background:rgba(255,255,255,.22)}
.kreda-likovi svg{width:100%;height:100%}
.spuzva{position:absolute;right:60px;bottom:-4px;width:90px;height:26px;background:#3A4866;border-radius:6px;box-shadow:inset 0 -8px 0 #F7C948}
.kreda-komad{position:absolute;right:170px;bottom:2px;width:46px;height:10px;background:#fff;border-radius:4px;transform:rotate(-8deg)}
.brojke{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:26px}
.brojke div{background:#fff;border-radius:22px;padding:18px;text-align:center;box-shadow:var(--sjena)}
.brojke b{display:block;font-family:'Fredoka',sans-serif;font-size:46px;color:var(--tirkiz);line-height:1}
.brojke div:nth-child(2) b{color:var(--zlatna)}.brojke div:nth-child(3) b{color:var(--plava)}.brojke div:nth-child(4) b{color:#D94F70}.brojke div:nth-child(5) b{color:var(--zelena)}
.brojke span{font-size:15px;color:var(--muted);font-weight:700}
.o-meni{font-size:21px;max-width:860px;margin:0 auto;text-align:center;line-height:1.5}
.sek-recept{background:linear-gradient(var(--papir),#F4EEDF,var(--papir))}
.recept{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:10px 4px 18px}
.korak{flex:1 0 170px;background:#fff;border-radius:24px;padding:18px 16px;text-align:center;box-shadow:var(--sjena);position:relative}
.korak-br{position:absolute;left:12px;top:10px;width:30px;height:30px;border-radius:50%;background:var(--tinta);color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center}
.korak-ik{width:90px;height:76px;margin:6px auto 6px}
.korak-ik svg{width:100%;height:100%}
.korak b{font-family:'Fredoka',sans-serif;font-size:20px}
.korak p{font-size:14.5px;color:var(--muted);margin:6px 0 0;line-height:1.35}
.korak-str{flex:0 0 34px;align-self:center;height:6px;background:repeating-linear-gradient(90deg,var(--zlatna) 0 8px,transparent 8px 14px);position:relative}
.korak-str:after{content:'';position:absolute;right:-4px;top:-6px;border:9px solid transparent;border-left:11px solid var(--zlatna);border-right:0}
.filter{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 20px}
.filter button{border:0;background:#fff;border-radius:999px;padding:8px 16px;font-family:'Fredoka',sans-serif;font-weight:600;box-shadow:0 0 0 2.5px var(--linija)}
.filter button.on{background:var(--tinta);color:#fff;box-shadow:none}
.kartice{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
.kartica{background:#fff;border-radius:28px;overflow:hidden;box-shadow:var(--sjena);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,1.5,.4,1),opacity .3s;border:3px solid color-mix(in srgb,var(--a) 25%,#fff)}
.kartica:hover{transform:translateY(-6px)}
.kartica.skriven{display:none}
.k-slika{position:relative;display:block;aspect-ratio:16/9;background:var(--krem);overflow:hidden}
.k-slika img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.kartica:hover .k-slika img{transform:scale(1.05)}
.k-lik{position:absolute;right:10px;bottom:-6px;width:96px;height:100px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.k-lik svg{width:100%;height:100%}
.k-tekst{padding:16px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.k-chips{display:flex;gap:6px;flex-wrap:wrap}
.k-chips span{background:color-mix(in srgb,var(--a) 14%,#fff);color:var(--a);border-radius:8px;padding:2px 10px;font-weight:800;font-size:13px}
.kartica h3{font-size:24px}.kartica h3 a{text-decoration:none}
.kartica p{margin:0;color:var(--muted);font-size:15px}
.k-npp{font-size:13.5px!important;background:var(--krem);border-radius:12px;padding:8px 10px}
.k-btn{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.kartica.uskoro{border-style:dashed;border-color:var(--zlatna);background:#FFFBF2}
.kartica.uskoro .k-slika{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#FFF3D6 0 18px,#FFE9B8 18px 36px)}
.kartica.uskoro .k-slika svg{width:150px;height:150px}
.ntc-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;font-size:18px}
.ntc-grid .mala{font-size:14px;color:var(--muted)}
.ntc-lista{display:flex;flex-direction:column;gap:12px}
.ntc-lista>div{background:#fff;border-radius:18px;padding:12px 14px;box-shadow:var(--sjena);border-left:8px solid var(--a);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ntc-lista b{font-family:'Fredoka',sans-serif;margin-right:6px}
.ntc-lista span{background:var(--krem);border-radius:10px;padding:3px 9px;font-size:13.5px;font-weight:700}
.napomena{background:#fff;border:3px dashed var(--tirkiz);border-radius:22px;padding:18px 22px;font-size:17px}

/* ================= PASOŠ I DIPLOMA ================= */
.pasos-str{max-width:1100px;margin:0 auto;padding:24px}
.pasos-knjiga{display:grid;grid-template-columns:320px 1fr;margin-top:16px;border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);animation:rise .8s both}
.pasos-korica{background:linear-gradient(160deg,#1F6E68,#13524D);color:#F7E7B4;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;font-family:'Fredoka',sans-serif;position:relative}
.pasos-korica:after{content:'';position:absolute;right:0;top:0;bottom:0;width:18px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.25))}
.pk-grb{width:130px;height:130px;border-radius:50%;border:4px solid #F7E7B4;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pk-grb svg{width:140px;height:140px;margin-top:10px}
.pk-nas{font-size:46px;letter-spacing:.2em;font-weight:700;margin-top:18px}
.pk-pod{font-size:16px;letter-spacing:.08em;opacity:.9}
.pk-zvj{margin-top:12px;letter-spacing:.4em}
.pasos-strana{background:#FFFBF2;background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(31,158,148,.08) 31px 32px);padding:30px 34px}
.pasos-ime{display:flex;flex-direction:column;font-weight:800;color:var(--muted);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.pasos-ime input{font-family:'Caveat',cursive;font-size:36px;border:0;border-bottom:3px dashed var(--tinta);background:none;padding:2px 0;color:var(--tinta);outline:none;text-transform:none;letter-spacing:0}
.pasos-napredak{margin:18px 0;font-family:'Fredoka',sans-serif;font-size:18px}
.pn-traka{height:14px;border-radius:7px;background:#E9E1CF;overflow:hidden;margin-top:6px}
.pn-traka i{display:block;height:100%;background:linear-gradient(90deg,var(--tirkiz),var(--zlatna));border-radius:7px;transition:width 1s}
.pecati{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px;margin-bottom:22px}
.pecat{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.pecat .pecat-krug{width:140px;height:140px;animation:none;transform:rotate(-8deg);filter:grayscale(1);opacity:.35;border-style:dashed}
.pecat.ima .pecat-krug{filter:none;opacity:1;border-style:double;animation:pecatIn .7s cubic-bezier(.2,1.6,.4,1) both}
.pecat:nth-child(2n) .pecat-krug{transform:rotate(7deg)}
.pecat-tekst{text-align:center;color:var(--zlatna);font-size:22px;line-height:1.1}
.pecat-tekst small{display:block;color:var(--muted);font-size:13px}
.pasos-savjet{font-size:18px}
.diploma-str{padding:24px}
.diploma-akcije{display:flex;gap:12px;justify-content:center;margin-bottom:18px}
.diploma{max-width:1000px;margin:0 auto;aspect-ratio:1.414;background:#FFFBF0;padding:26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.d-okvir{height:100%;border:10px double var(--tirkiz);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 40px;background:radial-gradient(ellipse at 50% 0%,rgba(247,201,72,.18),transparent 60%)}
.d-nas{font-family:'Fredoka',sans-serif;font-size:clamp(40px,7vw,84px);letter-spacing:.2em;color:var(--tirkiz);font-weight:700}
.d-pod{font-family:'Fredoka',sans-serif;font-size:22px;color:var(--zlatna);letter-spacing:.3em;text-transform:uppercase}
.d-tekst{font-size:19px;max-width:700px;margin:10px 0}
.d-ime{font-family:'Caveat',cursive;font-size:clamp(40px,6vw,66px);font-weight:700;border-bottom:3px solid var(--tinta);padding:0 30px;line-height:1.2}
.d-likovi{display:flex;gap:18px;margin:10px 0}
.d-likovi div{width:70px;height:72px}
.d-likovi svg{width:100%;height:100%}
.d-potpis{display:flex;gap:80px;margin-top:18px}
.d-potpis div{display:flex;flex-direction:column;font-size:13px;color:var(--muted);min-width:200px}
.d-potpis div span{border-bottom:2px solid var(--tinta);padding-bottom:2px}
.d-potpis span{font-size:18px;color:var(--tinta);order:-1;margin-bottom:4px}
.d-ruk{font-family:'Caveat',cursive;font-size:30px!important}
@media print{
  .hud,.no-print,#prelaz,.preskoci{display:none!important}
  .v-diploma{padding:0}
  .diploma{box-shadow:none;max-width:none;width:100%}
  @page{size:A4 landscape;margin:8mm}
  body{background:#fff}
}

/* ================= ODZIVNOST ================= */
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr}
  .hero-lik{order:-1}
  .lik-svg{width:220px}
  .prica-grid,.kol-grid,.ntc-grid{grid-template-columns:1fr}
  .brojke{grid-template-columns:repeat(3,1fr)}
  .m-wrap{grid-template-columns:1fr}
  .m-tijelo{max-width:260px;margin:0 auto}
  .pasos-knjiga{grid-template-columns:1fr}
  .pasos-korica{padding:24px}
}
@media (max-width:720px){
  body{font-size:16px}
  :root{--hud:58px}
  .logo-t small{display:none}
  .logo-t b{font-size:18px}
  .hud{gap:8px;padding:0 10px}
  .hud-nav a{padding:6px 8px;font-size:15px}
  .nacin button{padding:6px 8px;font-size:0}
  .nacin button:first-letter{font-size:18px}
  .hud-zvuk{width:36px;height:36px}
  .logo-t{display:none}
  .sek{padding:40px 16px}
  .cas-hero{padding:20px 16px 80px}
  .igra-start{grid-template-columns:1fr;text-align:center;padding:22px}
  .igra-lik{width:170px;height:180px;margin:0 auto}
  .brojke{grid-template-columns:repeat(2,1fr)}
  .brojke b{font-size:36px}
  .cas-nav{grid-template-columns:1fr}
  .cas-nav .cn-d{text-align:left}
  .g-kante{gap:8px}.g-kanta b{font-size:16px}.g-kanta span{display:none}.g-kanta svg{width:46px;height:46px}
  .f-traka{grid-template-columns:repeat(7,1fr);gap:3px;padding:12px 6px}
  .f-slot span{font-size:8px}.f-slot em{display:none}
  .grad-hud{gap:6px}.strelica{width:44px;height:44px;font-size:28px}.mapa button{width:36px;height:36px}.mapa button svg{width:30px;height:30px}
  .zg-bubble{width:300px}
  .kartice{grid-template-columns:1fr}
  .tabla-in{padding:24px 20px 30px}
  .recept{flex-direction:column}.korak-str{flex:0 0 26px;width:6px;height:26px;align-self:center;background:repeating-linear-gradient(180deg,var(--zlatna) 0 8px,transparent 8px 14px)}.korak-str:after{right:auto;left:-6px;top:auto;bottom:-6px;border:9px solid transparent;border-top:11px solid var(--zlatna);border-bottom:0}
  .diploma{aspect-ratio:auto}.d-potpis{gap:20px;flex-wrap:wrap;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* uskršnja jaja u gradu */
.bus,.leti-zvrka,.macka,.pcela,.balon,.zvrka-top,.zvono,.kuka,.zraka,.beskrajka-krov,.mjerka-trava{cursor:pointer}
.ee-skok{animation:eeSkok .5s cubic-bezier(.2,1.6,.4,1)!important;transform-box:fill-box;transform-origin:50% 100%}
@keyframes eeSkok{30%{transform:translateY(-14px) scale(1.08)}}
.ee-balon{position:fixed;z-index:60;transform:translate(-50%,-100%);background:#fff;border:3px solid var(--tinta);border-radius:18px;padding:8px 14px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;max-width:280px;text-align:center;box-shadow:0 6px 0 rgba(31,43,61,.12);pointer-events:none;animation:eeBalon 2.4s cubic-bezier(.2,1.4,.4,1) forwards}
.ee-balon:after{content:'';position:absolute;left:50%;bottom:-14px;margin-left:-9px;border:9px solid transparent;border-top:12px solid var(--tinta);border-bottom:0}
@keyframes eeBalon{0%{opacity:0;transform:translate(-50%,-80%) scale(.6)}12%{opacity:1;transform:translate(-50%,-100%) scale(1)}80%{opacity:1;transform:translate(-50%,-110%)}100%{opacity:0;transform:translate(-50%,-125%)}}
.hero-dekor,.hero-lik{will-change:transform}
.setac-mrvo,.setac-zrnka{cursor:pointer}
.setac-mrvo .korak{animation:korak .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes korak{from{transform:rotate(-4deg) translateY(0)}to{transform:rotate(4deg) translateY(-4px)}}
.setac-zrnka .skok{animation:hop .6s cubic-bezier(.3,0,.6,1) infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes hop{0%,100%{transform:translateY(0) scaleY(.92)}45%{transform:translateY(-34px) scaleY(1.05)}}