@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:#9fd8f5;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}
.hud[hidden]{display:none}
.hbtn{width:44px;height:44px;flex:none;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:#2f3d36;display:grid;place-items:center;box-shadow:0 3px 0 rgba(47,61,54,.15);cursor:pointer;padding:0}
.hbtn svg{width:24px;height:24px}
.hbtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(47,61,54,.15)}
.pill{display:flex;align-items:center;gap:5px;height:40px;padding:0 14px 0 10px;border-radius:22px;background:rgba(255,255,255,.88);box-shadow:0 3px 0 rgba(47,61,54,.12);font-size:22px;font-weight:800;line-height:1}
.pill svg{width:22px;height:22px}.pill img{width:20px;height:24px}
.pill b{min-width:1.2em;font-variant-numeric:tabular-nums}
.hearts{display:flex;flex-direction:row-reverse;gap:2px;margin-left:auto}
.hearts img{width:34px;height:34px;display:block;filter:drop-shadow(0 2px 0 rgba(47,61,54,.18));transition:transform .3s,opacity .3s,filter .3s}
.hearts img.lost{opacity:.4;filter:grayscale(1) drop-shadow(0 2px 0 rgba(47,61,54,.1))}
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(159,216,245,.35);overflow:auto}
.overlay[hidden]{display:none}
.card{width:min(380px,100%);text-align:center;background:rgba(255,251,243,.94);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)}
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.1s ease-in-out infinite}
.hero.small{height:110px}
@keyframes bob{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-14px) scale(.96,1.04)}90%{transform:translateY(0) scale(1.06,.94)}}
.go{font:inherit;font-size:26px;font-weight:800;color:#fff;background:#4f9d72;border:0;border-radius:999px;padding:10px 28px 8px;box-shadow:0 5px 0 #2f7a52;cursor:pointer;animation:pulse 1.6s ease-in-out infinite;margin:4px 0 10px}
.go:active{transform:translateY(3px);box-shadow:0 2px 0 #2f7a52}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.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}
.best{margin:8px 0 0;font-size:17px;color:#a77a00;font-weight:700}
.best:empty{display:none}
.big{margin:0;font-size:30px;font-weight:800}
.newbest{margin:0;font-size:22px;font-weight:800;color:#c24b72;animation:pulse 1s ease-in-out infinite}
.stats{list-style:none;margin:6px 0 8px;padding:0;font-size:18px;color:#5f6f66;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.stats b{color:#2f3d36}
.nojs{position:absolute;inset:auto 0 40%;text-align:center;font-size:20px}
@media (max-height:480px){.hero{height:96px}.hero.small{height:70px}h1{font-size:38px}.card{padding:12px 18px}.help{font-size:15px}.go{font-size:22px;margin:2px 0 6px}}
@media (prefers-reduced-motion:reduce){.hero,.go,.newbest{animation:none}}
.btns{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;align-items:center;margin:4px 0 6px}
.btns .go{margin:4px 0}
.go2{font:inherit;font-size:18px;font-weight:700;color:#2f7a52;background:#fff;border:2px solid #cfe7d8;border-radius:999px;padding:6px 18px 5px;cursor:pointer;text-decoration:none;display:inline-block}
.go2[hidden]{display:none}
.go2:active{transform:translateY(2px)}
.sub{margin:4px 0 8px;font-size:18px;color:#5f6f66;line-height:1.3}
.overlay.rot{background:linear-gradient(#9fd8f5,#dff4e7);z-index:5}
.rotbox{text-align:center;max-width:340px}
.rotbox h2{font-size:34px;margin-top:6px}
.phone{width:130px;height:130px;display:block;margin:0 auto}
.phone .ph{transform-origin:60px 60px;animation:turn 2.2s ease-in-out infinite}
@keyframes turn{0%,20%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
/* položeni mobitel: kartice u dva stupca da sve stane bez skrolanja */
@media (orientation:landscape) and (max-height:540px){
  .overlay{padding:10px}
  .card{width:min(660px,100%);display:grid;grid-template-columns:170px 1fr;column-gap:18px;align-items:center;padding:12px 20px}
  .card>*{grid-column:2}
  .card>.hero{grid-column:1;grid-row:1/span 8;height:auto;max-height:190px;width:auto;max-width:170px;margin:0 auto}
  .card.nohero{display:block;width:min(460px,100%)}
  h1{font-size:40px}h2{font-size:32px}
  .help{font-size:15px}
  .go{font-size:22px;padding:8px 24px 6px;margin:2px 0 6px}
  .stats{grid-template-columns:repeat(4,auto);justify-content:center;gap:2px 14px;font-size:16px;margin:4px 0}
  .big{font-size:26px}.newbest{font-size:19px}.best{margin-top:4px;font-size:15px}
  .hud .hbtn{width:40px;height:40px}.pill{height:36px;font-size:20px}
}
@media (max-width:460px){
  .hud{gap:5px;padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}
  .hbtn{width:38px;height:38px}.hbtn svg{width:21px;height:21px}
  .pill{height:34px;font-size:18px;padding:0 10px 0 7px;gap:3px}.pill svg{width:18px;height:18px}.pill img{width:16px;height:20px}
  .hearts img{width:27px;height:27px}.hearts{gap:0}
}
/* natpis pri promjeni etape */
.banner{position:absolute;left:50%;top:calc(66px + env(safe-area-inset-top));transform:translate(-50%,-14px) scale(.92);opacity:0;pointer-events:none;
  background:rgba(255,255,255,.93);color:#2f7a52;font-weight:800;font-size:22px;line-height:1.2;padding:8px 22px 7px;border-radius:999px;
  box-shadow:0 4px 0 rgba(47,61,54,.13);white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;transition:opacity .5s ease,transform .5s ease;z-index:2}
.banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
@media (max-width:460px){.banner{font-size:18px;padding:7px 16px 6px;top:calc(56px + env(safe-area-inset-top))}}
@media (orientation:landscape) and (max-height:540px){.stats{grid-template-columns:repeat(3,auto)}.banner{top:calc(58px + env(safe-area-inset-top))}}
/* v1.3: razine, kraj igre */
.pill.lvl{padding:0 12px;font-size:19px}
.pill.lvl b{min-width:0}
@media (max-width:620px){.pill.score{display:none}}
@media (max-width:460px){.pill.lvl{font-size:16px;padding:0 9px}}
/* v1.4: svi životi uvijek iste veličine (i skupljeni i izgubljeni) */
.overlay.win .card{text-align:center}
.wincar{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 2px;font-size:34px;font-weight:800;color:#e8691a}
.wincar img{width:30px;height:36px}
.winstage{position:relative;height:170px;margin:4px auto 8px;width:200px}
.winzeko{position:absolute;left:50%;bottom:10px;height:130px;width:auto;transform-origin:50% 100%;animation:winhop .9s cubic-bezier(.3,.7,.4,1) infinite;margin-left:-48px}
.wshadow{position:absolute;left:50%;bottom:4px;width:90px;height:14px;margin-left:-45px;border-radius:50%;background:rgba(40,70,30,.22);animation:winshadow .9s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes winhop{0%{transform:translateY(0) scale(1.08,.9)}12%{transform:translateY(0) scale(.95,1.06)}50%{transform:translateY(-38px) scale(1,1) rotate(-4deg)}88%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1.08,.9)}}
@keyframes winshadow{0%,12%,88%,100%{transform:scale(1);opacity:1}50%{transform:scale(.65);opacity:.6}}
@media (max-height:480px){.winstage{height:120px}.winzeko{height:92px;margin-left:-34px}.wincar{font-size:28px}}
@media (prefers-reduced-motion:reduce){.winzeko,.wshadow{animation:none}}

/* v1.0: oznaka razine (samo broj), novi život skoči slijeva, leptirićevo ubrzanje, brojalica razine */
.pill.lvl{min-width:40px;justify-content:center;padding:0 10px;background:#ffd23f;color:#5a3d00}
@media (max-width:460px){.pill.lvl{min-width:34px;padding:0 8px}}
.hearts img.new{animation:headpop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes headpop{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1)}}
.boost{position:absolute;left:calc(12px + env(safe-area-inset-left));top:calc(58px + env(safe-area-inset-top));display:flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 6px;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 3px 0 rgba(47,61,54,.12),0 0 0 3px rgba(123,108,255,.45);pointer-events:none;animation:boostglow .6s ease-in-out infinite alternate}
.boost[hidden]{display:none}
.boost .bfi{font-size:22px;line-height:1;animation:bflap .25s ease-in-out infinite alternate}
.boost .bbar{display:block;width:56px;height:10px;border-radius:5px;background:#e6e0ff;overflow:hidden}
.boost .bbar i{display:block;height:100%;background:linear-gradient(90deg,#7b6cff,#ff6fb5);transform-origin:left center}
@keyframes boostglow{from{box-shadow:0 3px 0 rgba(47,61,54,.12),0 0 0 2px rgba(123,108,255,.35)}to{box-shadow:0 3px 0 rgba(47,61,54,.12),0 0 0 5px rgba(255,111,181,.5)}}
@keyframes bflap{from{transform:scaleX(1)}to{transform:scaleX(.6)}}
@media (max-width:460px),(max-height:430px){.boost{top:calc(50px + env(safe-area-inset-top));height:30px}.boost .bfi{font-size:19px}.boost .bbar{width:44px}}
.count{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;font-family:"Baloo 2",system-ui,sans-serif;font-weight:800}
.count[hidden]{display:none}
.count .nums{display:flex;align-items:flex-end;justify-content:center;gap:.12em;font-size:min(21vh,13vw);line-height:1}
.count .nums span{display:inline-block;-webkit-text-stroke:.06em #fff;paint-order:stroke fill;text-shadow:0 .06em 0 rgba(47,61,54,.25);animation:cntpop .45s cubic-bezier(.3,1.7,.5,1) both,cntbob 1.1s .45s ease-in-out infinite alternate}
.count .nums span.last{font-size:1.9em;animation:cntpop .5s cubic-bezier(.3,1.7,.5,1) both,cntbig .5s .5s ease-in-out infinite alternate}
.count.many .nums{font-size:min(14vh,6.4vw)}
.count .kreni{margin-top:.1em;font-size:min(11vh,8vw);color:#fff;-webkit-text-stroke:.08em #2f7a52;paint-order:stroke fill;text-shadow:0 .07em 0 rgba(47,61,54,.3);opacity:0;transform:scale(.4)}
.count.kr .kreni{animation:kreni .5s cubic-bezier(.3,1.7,.5,1) forwards}
@keyframes cntpop{0%{transform:translateY(40%) scale(0) rotate(-20deg);opacity:0}70%{transform:translateY(-12%) scale(1.25) rotate(6deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes cntbob{from{transform:translateY(0)}to{transform:translateY(-8%)}}
@keyframes cntbig{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.08) rotate(3deg)}}
@keyframes kreni{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.count .nums span,.count .nums span.last{animation:none}.count.kr .kreni{animation:none;opacity:1;transform:none}.boost,.boost .bfi{animation:none}}
/* v1.9: završni ekran – velike crtane ikone × broj (bez riječi) */
.pill img.jic{width:22px;height:30px;object-fit:contain;transform:rotate(-8deg)}
.istats{list-style:none;margin:8px 0 10px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.istats li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:84px;padding:8px 10px 6px;border-radius:22px;background:var(--tc,#fff3d6);box-shadow:0 4px 0 rgba(47,61,54,.12);animation:popIn .45s cubic-bezier(.3,1.6,.5,1) both}
.istats li:nth-child(2){animation-delay:.08s}.istats li:nth-child(3){animation-delay:.16s}.istats li:nth-child(4){animation-delay:.24s}.istats li:nth-child(5){animation-delay:.32s}
.istats .ic{position:relative;height:62px;width:64px;display:grid;place-items:center}
.istats .ic img{max-height:62px;max-width:64px;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(47,61,54,.15))}
.istats .ic svg.arc{position:absolute;inset:-4px;width:72px;height:70px;pointer-events:none}
.istats .ic img.salto{transform:rotate(-120deg) scale(.82)}
.istats .ic img.air{transform:rotate(-10deg)}
.istats .ic img.fly{animation:flap .5s ease-in-out infinite alternate}
.istats b{font-size:28px;font-weight:800;line-height:1.1;color:#2f3d36;white-space:nowrap}
.istats b small{font-size:20px;color:#7a8a80;margin-right:2px}
.toGames{display:inline-block}
#back{position:relative;z-index:6}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.72)}}
@media (max-height:480px){.istats{gap:7px;margin:4px 0 6px}.istats li{min-width:70px;padding:5px 8px 4px}.istats .ic{height:46px;width:52px}.istats .ic img{max-height:46px;max-width:52px}.istats .ic svg.arc{width:58px;height:54px}.istats b{font-size:23px}}
@media (prefers-reduced-motion:reduce){.istats li,.istats .ic img.fly{animation:none}}

/* v1.9: gumb za glazbu (isti stil kao gumb za zvuk); uski zasloni – malo manji gumbi da sve stane */
.hbtn.off{color:#6b7a72}
@media (max-width:400px){
  .hud{gap:3px;padding-left:calc(5px + env(safe-area-inset-left));padding-right:calc(5px + env(safe-area-inset-right))}
  .hud .hbtn{width:32px;height:32px}.hud .hbtn svg{width:18px;height:18px}
  .pill{height:30px;font-size:15px;padding:0 7px 0 5px;gap:2px}.pill img{width:14px;height:17px}.pill.lvl{min-width:28px;padding:0 6px;font-size:14px}
  .hearts img{width:22px;height:22px}.hearts img+img{margin-right:-3px}
}

/* v1.12: kraj na proplanku – natpis dolje i kartica sa statistikom */
.hud.fade{opacity:0;pointer-events:none;transition:opacity .8s ease}
.hud.fade>*{pointer-events:none}
.fintxt{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));margin:0;transform:translate(-50%,18px);opacity:0;pointer-events:none;z-index:2;white-space:nowrap;
  font-weight:800;font-size:clamp(26px,5.4vw,52px);line-height:1;color:#fff;-webkit-text-stroke:.09em #2f7a52;paint-order:stroke fill;text-shadow:0 .08em 0 rgba(47,61,54,.3);transition:opacity 1.6s ease,transform 1.6s cubic-bezier(.2,.8,.3,1)}
.fintxt[hidden]{display:none}
.fintxt.show{opacity:1;transform:translate(-50%,0);animation:finbob 3.2s 1.6s ease-in-out infinite}
@keyframes finbob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
.fincard{position:absolute;left:50%;top:calc(12px + env(safe-area-inset-top));z-index:3;width:max-content;max-width:calc(100% - 20px);text-align:center;
  background:rgba(255,251,243,.95);border-radius:28px;padding:12px 16px 10px;box-shadow:0 7px 0 rgba(47,61,54,.08),0 14px 34px rgba(47,61,54,.16);
  transform:translate(-50%,-10px) scale(.7);opacity:0;transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.5,.5,1)}
.fincard[hidden]{display:none}
.fincard.show{opacity:1;transform:translate(-50%,0) scale(1)}
.fstats{list-style:none;margin:0 0 8px;padding:0;display:flex;gap:8px;justify-content:center;flex-wrap:nowrap}
.fstats li{background:var(--tc);border-radius:18px;padding:6px 10px 4px;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:1px;opacity:0;transform:scale(.4) translateY(12px)}
.fincard.show .fstats li{animation:fpop .55s var(--d) cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes fpop{to{opacity:1;transform:none}}
.fstats .ic{height:36px;display:flex;align-items:center;justify-content:center}
.fstats .ic img{height:34px;width:auto}.fstats .ic svg{width:32px;height:32px}
.fstats li.hl{justify-content:space-between}
.fstats .fh{display:flex;gap:1px;margin-top:4px}.fstats .fh img{height:32px;width:32px;filter:drop-shadow(0 2px 0 rgba(47,61,54,.15))}
.fstats .fh img.lost{opacity:.35;filter:grayscale(1)}
.fstats .v{font-size:26px;font-weight:800;line-height:1.05;color:#2f3d36;font-variant-numeric:tabular-nums;white-space:nowrap}
.fstats .v small{font-size:.62em;color:#7a8a80;font-weight:700}
.fstats .lb{font-size:14px;font-weight:700;color:#5f6f66;line-height:1.1}
.fstats li.hl .ic{height:auto;min-height:36px;flex:1}
.fstats li{min-width:96px}.fstats .v{font-size:30px}.fstats .lb{font-size:15px}
.fback{display:inline-block;text-decoration:none;font-size:22px;padding:8px 26px 6px;margin:2px 0 2px;animation:none}
.fincard.show .fback{animation:pulse 1.6s 2.2s ease-in-out infinite}
@media (max-width:620px),(max-height:430px){
  .fincard{padding:8px 10px 8px;border-radius:22px;top:calc(8px + env(safe-area-inset-top))}
  .fstats{gap:5px;margin-bottom:6px}
  .fstats li{min-width:62px;padding:4px 6px 3px;border-radius:14px}
  .fstats .ic{height:26px}.fstats .ic img{height:25px}.fstats .ic svg{width:24px;height:24px}
  .fstats .fh img{height:22px;width:22px}
  .fstats li.hl .ic{min-height:26px}
  .fstats .v{font-size:19px}.fstats .lb{font-size:11px}
  .fback{font-size:18px;padding:6px 20px 5px}
}
@media (max-width:420px){.fstats{flex-wrap:wrap;max-width:300px;margin-left:auto;margin-right:auto}.fstats li{min-width:84px}}
@media (prefers-reduced-motion:reduce){.fintxt.show,.fincard.show .fback{animation:none}.fincard.show .fstats li{animation:none;opacity:1;transform:none}}