@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:#bfe6f7;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}
/* v1.11.34: stol je CSS pozadina platna (prozirno platno iznad nje) – promjena stola je trenutna, dijelovi se ne crtaju ponovno */
canvas.stol{background:radial-gradient(ellipse 80% 80% at 50% 55%,rgba(0,0,0,0) 45%,rgba(0,0,0,.16) 100%),var(--stol) center/cover no-repeat,var(--stolc)}
canvas.t-svijetlo{--stol:url(img/stol/stol-svijetlo.webp?v=1.11.34);--stolc:#d6b68c}
canvas.t-tamno{--stol:url(img/stol/stol-tamno.webp?v=1.11.34);--stolc:#64432c}
canvas.t-filc{background:radial-gradient(ellipse 80% 80% at 50% 55%,rgba(0,0,0,0) 45%,rgba(0,0,0,.16) 100%),url(img/stol/filc-zeleni.webp?v=1.5) 0 0/512px repeat,#587962}
[hidden]{display:none!important}
.hbtn{width:48px;height:48px;flex:none;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#2f3d36;display:grid;place-items:center;box-shadow:0 3px 0 rgba(47,61,54,.15);cursor:pointer;padding:0;text-decoration:none}
.hbtn svg{width:26px;height:26px}
.hbtn:active{transform:translateY(2px)}
#ghost{color:#9aa69f}#ghost.on{color:#2f7a52;background:#e3f4e9}
#ghost.glow{animation:eyeGlow .73s ease-in-out 3;position:relative;z-index:1}
@keyframes eyeGlow{0%,100%{transform:scale(1);box-shadow:0 3px 0 rgba(47,61,54,.15),0 0 0 0 rgba(255,196,40,.9)}50%{transform:scale(1.28);background:#fff4c2;color:#e08a00;box-shadow:0 3px 0 rgba(47,61,54,.15),0 0 0 10px rgba(255,196,40,.45),0 0 26px 12px rgba(255,214,90,.8)}}
@media (prefers-reduced-motion:reduce){#ghost.glow{animation:none;background:#fff4c2;box-shadow:0 0 0 6px rgba(255,196,40,.6)}}
.pill{display:flex;align-items:center;gap:6px;height:42px;padding:0 14px;border-radius:22px;background:rgba(255,255,255,.92);box-shadow:0 3px 0 rgba(47,61,54,.12);font-size:21px;font-weight:800;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill svg{width:22px;height:22px;flex:none}
.pill b{font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.hud .pill{flex:none}.hud .pill:nth-child(2){flex:0 1 auto;min-width:0}
.star{color:#ffb31a;font-size:24px}
.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}
.tables{margin-left:auto}
.pick{position:absolute;inset:0;overflow:auto;padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 24px calc(14px + env(safe-area-inset-left));background:linear-gradient(#bfe6f7,#e6f5dc);z-index:2;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.ptop{display:flex;align-items:center;gap:10px;max-width:1100px;margin:0 auto}
.ptop h1{flex:1;margin:0;font-size:38px;font-weight:800;color:#2f7a52;line-height:1}
.lead{max-width:1100px;margin:4px auto 10px;font-size:19px;color:#5f6f66}
.grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.tile{position:relative;font:inherit;border:0;padding:0 0 8px;border-radius:22px;background:#fffaf0;box-shadow:0 5px 0 rgba(47,61,54,.1),0 8px 18px rgba(47,61,54,.1);cursor:pointer;overflow:hidden;text-align:center;color:#2f3d36}
.tile img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.tile .nm{display:block;font-size:19px;font-weight:800;margin-top:4px;line-height:1.1;padding:0 6px}
.tile .pc{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.92);border-radius:14px;padding:2px 9px 1px;font-weight:800;font-size:17px;color:#2f7a52}
.tile .pc svg{width:16px;height:16px}
.tile .st{position:absolute;right:8px;top:4px;font-size:36px;color:#ffb31a;text-shadow:0 2px 0 #fff,0 0 6px rgba(255,255,255,.9);line-height:1}
.tile.done{box-shadow:0 0 0 4px #f2b632,0 0 0 7px #ffe9a8,0 5px 0 7px #e0a020,0 10px 22px rgba(201,140,20,.28)}.tile.done .nm{color:#9a6a00}.tier{grid-column:1/-1;margin:14px 4px 0;font-size:22px;font-weight:800;color:#2f7a52;display:flex;align-items:baseline;gap:10px}.tier:first-child{margin-top:0}.tier span{font-size:16px;color:#c48a12}
.tile:active{transform:translateY(3px)}
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(191,230,247,.4);overflow:auto;z-index:3}
.card{width:min(400px,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)}
h2{margin:0;font-size:36px;font-weight:800;line-height:1.05;color:#2f7a52}
.hero{display:block;height:140px;width:auto;margin:6px auto 4px;animation:jump 1s ease-in-out infinite}
@keyframes jump{0%,100%{transform:translateY(0)}45%{transform:translateY(-16px)}75%{transform:translateY(0) scale(1.05,.95)}}
.btns{display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center;align-items:center;margin:8px 0}
.go{font:inherit;font-size:24px;font-weight:800;color:#fff;background:#4f9d72;border:0;border-radius:999px;padding:10px 26px 8px;box-shadow:0 5px 0 #2f7a52;cursor:pointer;min-height:54px}
.go:active{transform:translateY(3px);box-shadow:0 2px 0 #2f7a52}
.go2{font:inherit;font-size:19px;font-weight:700;color:#2f7a52;background:#fff;border:2px solid #cfe7d8;border-radius:999px;padding:8px 18px 6px;cursor:pointer;min-height:48px}
.nojs{position:absolute;inset:auto 0 40%;text-align:center;font-size:20px}
@media (max-height:480px){.hero{height:80px}h2{font-size:30px}.card{padding:10px 16px}.ptop h1{font-size:32px}.lead{margin:2px auto 8px;font-size:17px}}
@media (max-width:380px){.grid{grid-template-columns:1fr 1fr;gap:10px}.tile .nm{font-size:17px}#pname{max-width:120px}}
@media (orientation:landscape) and (max-height:540px){.card{width:min(620px,100%);display:grid;grid-template-columns:140px 1fr;column-gap:14px;align-items:center}.card>*{grid-column:2}.card>.hero{grid-column:1;grid-row:1/span 3;height:auto;max-height:150px;max-width:140px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.hero{animation:none}}
#winOv{background:transparent;place-items:end center;pointer-events:none}
#winOv .card{pointer-events:auto;padding:12px 18px 10px}
#winOv .hero{height:96px}
@media (orientation:landscape) and (max-height:540px){#winOv{place-items:center end;padding:64px 12px 8px}#winOv .card{display:block;width:min(260px,32vw)}#winOv .hero{height:80px}#winOv h2{font-size:28px}#winOv .go{font-size:20px;padding:8px 18px 6px}}
a.go2{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
@media (orientation:landscape) and (max-height:540px){#winOv .hero{height:60px;margin:2px auto}#winOv .btns{gap:6px 8px;margin:4px 0}#winOv .go2{min-height:40px;padding:5px 12px 3px;font-size:17px}#winOv h2{font-size:24px;margin:0}}
/* 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}}
/* v1.10: neriješene slike blijede i gotovo bez boje (ali prepoznatljive), riješene (★) u punoj boji */
.tile:not(.done) img{filter:grayscale(.72) brightness(1.08);opacity:.55;transition:filter .3s,opacity .3s}
.tile:not(.done):hover img,.tile:not(.done):focus-visible img{opacity:.75;filter:grayscale(.45)}
.tile.done img{filter:none;opacity:1}
@media (max-width:340px){#play .hud{gap:4px;padding-left:6px;padding-right:6px}#play .hud .hbtn{width:36px;height:36px}#play .hud .hbtn svg{width:20px;height:20px}}
@media (max-width:400px){#play .hud .pill{padding:0 9px;font-size:18px}#play .hud .pill:nth-child(3) svg{display:none}#play .hud{padding-left:8px;padding-right:8px}}
/* v1.5: izbor stola (svijetlo drvo, tamno drvo, zeleni filc); na mobitelu se vidi samo odabrani, dodir otvori ostale */
.tables{display:flex;align-items:center;gap:6px;padding:4px;border-radius:24px;background:rgba(255,255,255,.55)}
.tbtn{width:34px;height:34px;flex:none;border-radius:50%;border:3px solid #fff;padding:0;cursor:pointer;background-size:160px;background-position:center;box-shadow:0 2px 0 rgba(47,61,54,.18)}
.tbtn.t-svijetlo{background-image:url(img/stol/stol-svijetlo.webp?v=1.11.34);background-color:#d6b68c;background-size:cover}
.tbtn.t-tamno{background-image:url(img/stol/stol-tamno.webp?v=1.11.34);background-color:#64432c;background-size:cover}
.tbtn.t-filc{background-image:url(img/stol/filc-zeleni.webp?v=1.5);background-color:#587962}
.tbtn.on{border-color:#ffd96b;box-shadow:0 0 0 3px #fff4c2,0 2px 0 rgba(47,61,54,.18)}
.tbtn:active{transform:translateY(2px)}
@media (max-width:600px){.tables{gap:4px;padding:3px}.tables:not(.open) .tbtn:not(.on){display:none}.tbtn{width:32px;height:32px}}
@media (max-width:400px){.tbtn{width:28px;height:28px;border-width:2px}}
/* v1.5: oko – izblijeđena (ne prozirna) slika: sredina → nakon 5 s klizne u kut gore desno; ne smeta micanju dijelova */
.eyepop{position:absolute;left:0;top:70px;z-index:2;pointer-events:none;padding:6px;border-radius:18px;background:#fffaf0;box-shadow:0 10px 28px rgba(40,25,10,.3);opacity:0;transition:opacity .4s ease,left .7s cubic-bezier(.4,0,.2,1),top .7s cubic-bezier(.4,0,.2,1),width .7s cubic-bezier(.4,0,.2,1),padding .7s,border-radius .7s}
.eyepop.show{opacity:1}
.eyepop.nomove{transition:none}
.eyepop.mini{padding:4px;border-radius:12px;box-shadow:0 5px 14px rgba(40,25,10,.28)}
.eyepop img{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:13px;filter:saturate(.25) brightness(1.15) contrast(.8);pointer-events:none}
.eyepop.mini img{border-radius:9px}
#ghost.mini{color:#2f7a52;background:#f0f8f2;box-shadow:0 3px 0 rgba(47,61,54,.15),inset 0 0 0 3px #9fd3b0}
@media (prefers-reduced-motion:reduce){.eyepop{transition:opacity .3s}}

/* v1.11.38: kartica Bravo – četiri četvrtasta gumba sa sličicom i sitnim natpisom (djeca ih razumiju bez čitanja) */
.ibtns{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin:10px 0 4px;--ib:66px}
.ib{font:inherit;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:0;margin:0;cursor:pointer;color:#2f7a52;text-decoration:none;-webkit-tap-highlight-color:transparent;min-width:var(--ib)}
.ib[hidden]{display:none}
.ib .ic{width:var(--ib);height:var(--ib);box-sizing:border-box;border-radius:22px;background:#fff;border:3px solid #cfe7d8;box-shadow:0 4px 0 #cfe7d8;display:grid;place-items:center;position:relative;transition:transform .12s}
.ib .ic svg{width:64%;height:64%}
.ib .cap{font-size:13px;font-weight:800;line-height:1.1;color:#4a6b58;white-space:nowrap}
.ib:active .ic{transform:translateY(3px);box-shadow:0 1px 0 #cfe7d8}
.ib:focus-visible .ic{outline:3px solid #ffb347;outline-offset:2px}
.ib.prim{--ib:80px;color:#fff;gap:9px}
.ib.prim .ic{background:#4f9d72;border-color:#4f9d72;box-shadow:0 5px 0 #2f7a52,0 0 0 5px rgba(255,214,90,.55);border-radius:26px;animation:ibPulse 1.6s ease-in-out infinite}
.ib.prim .ic svg{width:62%;height:62%}
.ib.prim .cap{color:#2f7a52;font-size:14px}
.ib.prim:active .ic{box-shadow:0 2px 0 #2f7a52,0 0 0 5px rgba(255,214,90,.55)}
@keyframes ibPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.ib .ic.emo{font-size:calc(var(--ib) * .5);line-height:1}
.ib .fan img{position:absolute;width:58%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:5px;border:2px solid #fff;box-shadow:0 1px 3px rgba(47,61,54,.35);left:21%;top:28%}
.ib .fan img:nth-child(1){transform:rotate(-16deg) translate(-22%,4%)}
.ib .fan img:nth-child(2){transform:rotate(14deg) translate(22%,4%)}
.ib .fan img:nth-child(3){transform:translateY(-8%);z-index:1}
@media (prefers-reduced-motion:reduce){.ib.prim .ic{animation:none}}
@media (max-width:360px){.ibtns{gap:8px;--ib:58px}.ib.prim{--ib:70px}}
@media (orientation:landscape) and (max-height:540px){.ibtns{gap:6px;margin:6px 0 2px;--ib:48px;flex-wrap:nowrap}.ib.prim{--ib:56px}.ib .ic{border-radius:16px;border-width:2px}.ib.prim .ic{border-radius:18px}.ib .cap{font-size:11px}.ib.prim .cap{font-size:12px}}
/* v1.11.38: u širokom prozoru kartica Bravo stoji desno (slika je lijevo od nje, ne ispod kartice) */
@media (min-aspect-ratio:5/4){#winOv{place-items:center end;padding:64px 16px 8px}#winOv .card{display:block;width:min(320px,36vw);box-sizing:border-box}}
@media (min-aspect-ratio:5/4) and (min-height:541px){.ibtns{gap:10px;--ib:58px}.ib.prim{--ib:70px}}