@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:#8fd3f4;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}
.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}
.quiz h2{font-size:32px;margin-bottom:4px}
/* v1.4: račun – broj iznad svojih (većih) mrkvica; odgovori su redovi preko cijele širine */
#quizOv{grid-template-columns:minmax(0,1fr)}
.quiz.card{min-width:0;max-width:100%;justify-self:center}
.quiz .opt .cr{overflow:hidden}
.sum{display:flex;align-items:center;justify-content:center;gap:8px 10px;flex-wrap:wrap;margin:6px 0 12px}
.sum .grp{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff3e0;border-radius:18px;padding:6px 8px 8px;min-width:64px}
.sum .cr{display:grid;justify-content:center;gap:4px 3px}
.sum .qc{width:var(--qcw,36px);height:auto;aspect-ratio:134/220;display:block}
.sum b,.sum .op,.sum .q{font-size:40px;font-weight:800;line-height:1;color:#7a4a12}
.sum .op{color:#2f7a52}
.sum .q{min-width:52px;height:64px;display:grid;place-items:center;background:#fff;border:3px dashed #f2a43a;border-radius:16px;color:#f08a24}
.opts{display:flex;flex-direction:column;gap:10px;width:100%}
.opt{font:inherit;display:flex;flex-direction:row;align-items:center;gap:14px;width:100%;min-height:64px;padding:6px 12px;border-radius:20px;border:3px solid #cfe7d8;background:#fff;cursor:pointer;box-shadow:0 4px 0 rgba(47,61,54,.12);color:#2f7a52;text-align:left}
.opt b{font-size:40px;line-height:1;min-width:48px;text-align:center;flex:none}
.opt .cr{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-width:0}
.opt .five{display:flex;gap:2px;flex:none}
.opt .oc{width:var(--ocw,30px);height:auto;aspect-ratio:134/220;display:block}
.opt:active{transform:translateY(2px)}
.opt.ok{background:#dff5e6;border-color:#4f9d72;animation:okp .5s ease}
.opt.no{background:#fde8e4;border-color:#e59a8a}
@keyframes okp{50%{transform:scale(1.12)}}
@media (max-width:420px){#quizOv{padding:8px}.quiz.card{padding:12px 10px 12px}.quiz .opt{padding:6px 8px;gap:10px}.quiz .opt b{min-width:40px;font-size:36px}.quiz .opt .cr{gap:10px}.quiz .opt .five{gap:1px}.quiz h2{font-size:28px}.sum b,.sum .op,.sum .q{font-size:34px}.sum .q{height:54px;min-width:46px}}
/* položen mobitel: račun lijevo, odgovori desno */
@media (orientation:landscape) and (max-height:540px){
  .card.wide.quiz{width:min(860px,100%);display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-items:center;padding:8px 12px 10px}
  .card.wide.quiz>h2{grid-column:1/span 2;font-size:24px;margin-bottom:2px}
  .card.wide.quiz>.sum{grid-column:1;margin:0}
  .card.wide.quiz>.opts{grid-column:2;gap:6px}
  .quiz .opt{min-height:52px;padding:3px 10px}.quiz .opt b{font-size:32px;min-width:38px}
  .quiz .sum b,.quiz .sum .op,.quiz .sum .q{font-size:32px}.quiz .sum .q{height:50px}
}
@media (max-height:480px){.hero{height:90px}h1{font-size:36px}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:22vh}}
@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 (max-width:360px){.pill .pl{display:none}}
@media (prefers-reduced-motion:reduce){.hero,.go,.friends img{animation:none}}
/* 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}}