@font-face{font-family:"Baloo 2";src:url(../../fonts/baloo2.woff2) format("woff2");font-weight:400 800;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#f6c48f;overscroll-behavior:none}
body{font-family:"Baloo 2",ui-rounded,system-ui,sans-serif;color:#2f3d36;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
#app{position:fixed;inset:0}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));pointer-events:none}
.hud>*{pointer-events:auto}
#mute{margin-left:auto}
.hbtn{width:48px;height:48px;flex:none;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#2f3d36;display:grid;place-items:center;box-shadow:0 3px 0 rgba(47,61,54,.15);cursor:pointer;padding:0}
.hbtn svg{width:26px;height:26px}
.hbtn:active{transform:translateY(2px)}
.pill{display:flex;align-items:center;gap:6px;height:42px;padding:0 14px 0 12px;border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 3px 0 rgba(47,61,54,.12);font-size:22px;font-weight:800;line-height:1}
.pill .pl{font-size:16px;font-weight:700;color:#5f6f66}
.pill img{width:auto;height:26px}
.pill b{font-variant-numeric:tabular-nums}
.banner{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;top:calc(66px + env(safe-area-inset-top));transform:translateY(-12px);max-width:min(92vw,620px);background:rgba(255,251,243,.95);border-radius:22px;padding:8px 18px 6px;font-size:20px;font-weight:700;color:#2f7a52;text-align:center;box-shadow:0 4px 0 rgba(47,61,54,.1);opacity:0;transition:opacity .4s,transform .4s;pointer-events:none;line-height:1.25}
.banner.on{opacity:1;transform:translateY(0)}
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(143,211,244,.35);overflow:auto;z-index:3}
.overlay[hidden]{display:none}
.overlay{z-index:6}
#endOv .friends img{height:min(9vh,64px)}
@media (min-height:700px){#endOv .friends img{height:min(10vh,90px)}}
.card{width:min(380px,100%);text-align:center;background:rgba(255,251,243,.95);border-radius:32px;padding:18px 20px 16px;box-shadow:0 8px 0 rgba(47,61,54,.08),0 16px 40px rgba(47,61,54,.15)}
.card.wide{width:min(620px,100%)}
h1,h2{margin:0;font-weight:800;line-height:1.05;color:#2f7a52}
h1{font-size:46px}h2{font-size:36px}
.hero{display:block;height:150px;width:auto;margin:6px auto 4px;animation:bob 1.3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.go{font:inherit;font-size:26px;font-weight:800;color:#fff;background:#4f9d72;border:0;border-radius:999px;padding:12px 30px 10px;box-shadow:0 5px 0 #2f7a52;cursor:pointer;animation:pulse 1.8s ease-in-out infinite;min-height:56px}
.go[hidden],.go2[hidden]{display:none}
.go:active{transform:translateY(3px);box-shadow:0 2px 0 #2f7a52}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.go2{font:inherit;font-size:19px;font-weight:700;color:#2f7a52;background:#fff;border:2px solid #cfe7d8;border-radius:999px;padding:8px 20px 6px;cursor:pointer;text-decoration:none;display:inline-block;min-height:48px}
.go2:active{transform:translateY(2px)}
.btns{display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center;align-items:center;margin:8px 0 8px}
.help{list-style:none;margin:0;padding:0;font-size:17px;line-height:1.3;color:#5f6f66}
.help li{margin:4px 0}.help b{color:#2f3d36}
.sub{margin:4px 0 8px;font-size:19px;color:#5f6f66;line-height:1.3}
.friends{display:flex;justify-content:center;align-items:flex-end;gap:4px;flex-wrap:wrap;margin:8px 0}
.friends img{height:min(17vh,110px);width:auto;animation:jump .9s ease-in-out infinite}
@keyframes jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-18px) rotate(-4deg)}70%{transform:translateY(0) scale(1.05,.95)}}
.overlay.end{background:radial-gradient(circle at 50% 40%,rgba(255,240,180,.75),rgba(143,211,244,.55))}
.nojs{position:absolute;inset:auto 0 40%;text-align:center;font-size:20px}
#back{position:relative;z-index:5}
@media (max-height:480px){.hero{height:90px}h1{font-size:34px}h2{font-size:30px}.card{padding:10px 16px}.help{font-size:15px}.go{font-size:22px;min-height:50px;padding:8px 24px 6px}.banner{font-size:17px;top:calc(60px + env(safe-area-inset-top))}.friends img{height:20vh}}
@media (orientation:landscape) and (max-height:540px){
  .card{width:min(640px,100%);display:grid;grid-template-columns:150px 1fr;column-gap:16px;align-items:center}
  .card>*{grid-column:2}
  .card>.hero{grid-column:1;grid-row:1/span 6;height:auto;max-height:170px;max-width:150px;margin:0 auto}
  .card.nohero{display:block}
}
@media (prefers-reduced-motion:reduce){.hero,.go,.friends img,.spr.idle img{animation:none}}

/* --- Laku noć, šumo! --- */
#bg,#dark{position:absolute;inset:0;width:100%;height:100%;display:block}
#dark{pointer-events:none;z-index:2}
#stage{position:absolute;inset:0;touch-action:none;overflow:hidden;z-index:1}
.hud{z-index:4}
.banner{z-index:4}
.stars{display:flex;gap:2px;font-size:20px;line-height:1;color:#f2c94c;text-shadow:0 2px 0 rgba(47,61,54,.25);pointer-events:none}
.stars i{font-style:normal;opacity:.35}.stars i.on{opacity:1}
@media (max-width:400px){.stars{font-size:15px;gap:0}}
.spr{position:absolute;left:0;top:0;will-change:transform;-webkit-user-drag:none}
.spr img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.home{z-index:1;cursor:pointer}
.home.wig{animation:wig .45s ease}
@keyframes wig{20%{rotate:-5deg}40%{rotate:5deg}60%{rotate:-3deg}80%{rotate:2deg}}
.home .badge.gone{opacity:0;transition:opacity .5s}
.home .badge{position:absolute;right:-6%;top:-10%;width:42%;height:auto;opacity:.92;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));animation:bob 1.6s ease-in-out infinite}
.home.glow::after{content:"";position:absolute;inset:8% 12%;border-radius:50%;background:radial-gradient(circle,rgba(255,226,140,.55),rgba(255,226,140,0) 70%);pointer-events:none;animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{opacity:.55}}
.home.hintme{animation:hp .9s ease-in-out 3}
@keyframes hp{50%{scale:1.14}}
.ani{z-index:3;cursor:grab;touch-action:none}
.ani img{filter:drop-shadow(0 4px 3px rgba(40,40,60,.22))}
.ani.idle img{animation:breathe 2.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97)}}
.ani.sel img{filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #ffd76a)}
.ani.drag{z-index:6;cursor:grabbing}
.ani.flip img{scale:-1 1}
.ani.shiver img{animation:shiver .25s linear infinite}
@keyframes shiver{0%,100%{translate:0 0}25%{translate:-1.5px 0}75%{translate:1.5px 0}}
.ani.hidden{visibility:hidden}
.ani.slept{pointer-events:none;z-index:2}
.ani.slept img{animation:snooze 3s ease-in-out infinite;transform-origin:50% 100%}
@keyframes snooze{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.96)}}
.bush{z-index:4;cursor:pointer}
.bush.shake{animation:wig .5s ease}
.bush.open{pointer-events:none}
.zzz{position:absolute;z-index:5;font-weight:800;color:#fff;text-shadow:0 2px 3px rgba(30,40,80,.5);pointer-events:none;animation:zz 2.6s ease-out forwards;font-size:22px}
@keyframes zz{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(18px,-60px) scale(1.2)}}
.spark{position:absolute;z-index:5;pointer-events:none;font-size:22px;animation:spark .9s ease-out forwards}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2)}}
.hand{position:absolute;z-index:7;font-size:44px;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));transition:transform 1.2s ease-in-out,opacity .3s;opacity:0}
.hand.on{opacity:1}
.star-sky{position:absolute;z-index:5;width:56px;height:56px;margin:-28px 0 0 -28px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;font-size:40px;line-height:1;color:#7d86a8;text-shadow:0 0 6px rgba(255,255,255,.2);animation:tw 1.6s ease-in-out infinite}
.star-sky.lit{color:#ffe27a;text-shadow:0 0 14px #ffe27a,0 0 30px rgba(255,226,122,.8);animation:none;transform:scale(1.25);transition:transform .3s}
@keyframes tw{50%{transform:scale(1.15)}}
.flake{position:absolute;z-index:5;font-size:26px;color:#fff;pointer-events:auto;cursor:pointer;text-shadow:0 0 4px rgba(120,160,220,.8);user-select:none}
.butterfly{position:absolute;z-index:6;width:54px;pointer-events:none;transition:transform 2.6s ease-out,opacity 2.6s ease-in}
.zekoS{z-index:3}
.overlay.night{background:rgba(30,40,90,.35)}
.overlay.end{background:radial-gradient(circle at 50% 30%,rgba(255,240,180,.45),rgba(30,40,90,.65))}
.sleepers{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin:2px 0 6px}
.sleepers img{height:44px;width:auto}
.overlay[hidden]{display:none}

/* v1.6: Zeko spava unutra u stablu – toplo svjetlo u otvoru vrata */
.doorlight{position:absolute;left:0;top:0;z-index:2;pointer-events:none;border-radius:50% 50% 40% 40%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 72%,rgba(255,214,120,.75) 0,rgba(255,196,96,.35) 45%,rgba(255,190,90,0) 72%);transition:opacity .8s ease}
.ani.slept.insideTree{z-index:3}
.ani.slept.insideTree img{filter:drop-shadow(0 2px 2px rgba(60,30,10,.35))}
/* v1.10: gumb Glazba uz gumb za zvuk; na uskim mobitelima manji gumbi da sve stane */
.hbtn.off{color:#6b7a72}
@media (max-width:400px){.hud{gap:5px}.hud .hbtn{width:40px;height:40px}.hud .hbtn svg{width:22px;height:22px}}