/* timaBeans – Slon: igralni zaslon z nagradami, nalepke in album. */
/* Slon: igralni zaslon z nagradami */
.slon-play{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;gap:12px;padding:max(12px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom));background:linear-gradient(170deg,#2f5fb8,#6a3fd6 60%,#d6416a);overflow-y:auto;text-align:center}
.sp-head{display:flex;align-items:center;gap:10px;justify-content:space-between}.sp-quit,.sp-mute{min-width:52px;min-height:52px;border-radius:50%;font-size:22px;padding:0}.sp-dots{display:flex;gap:8px;flex:1;justify-content:center}.sp-dot{width:22px;height:22px;border-radius:50%;background:#ffffff3a;border:3px solid #fff8}.sp-dot.now{background:#ffd54a;transform:scale(1.25)}.sp-dot.done{background:#7dff9b}
.sp-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:150px}.sp-elephant{width:min(34vw,130px);height:auto;transform-origin:50% 100%}.sp-elephant.big{width:min(55vw,220px)}.sp-elephant.hop{animation:sp-hop .7s ease}.sp-elephant.shake{animation:sp-shake .4s ease}
.sp-bubble{min-height:34px;font-size:clamp(24px,7vw,34px);font-weight:900;text-transform:uppercase;color:#fff;text-shadow:0 3px 0 #0006}
.sp-word{align-self:center;min-height:64px;padding:8px 22px;border-radius:24px;border:3px solid #fff;background:#ffffff26;color:#fff;font-size:clamp(30px,9vw,46px);font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.sp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}.sp-card{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:26px;border:4px solid #fff;background:#ffffff2e;box-shadow:0 6px 0 #0004;padding:6px}.sp-card .mini-img{width:80%;height:80%}.sp-card.right{background:#3ddc84;animation:sp-pop .5s ease}.sp-card.wrong{animation:sp-shake .4s ease;background:#ff7a7a55}.sp-card.hint{animation:sp-pulse .8s ease infinite;border-color:#ffd54a}.sp-cards.locked .sp-card:not(.right){opacity:.4}
.confetti{position:absolute;top:40%;font-size:26px;pointer-events:none;animation:sp-fly 1s ease-out forwards}
.sp-result{display:flex;flex-direction:column;align-items:center;gap:12px;margin:auto;width:100%;max-width:420px;position:relative}.sp-stars{font-size:clamp(44px,14vw,70px);letter-spacing:.1em}.sp-line{font-size:clamp(30px,9vw,44px);font-weight:900;text-transform:uppercase;color:#fff;margin:0}.sp-again{width:100%;min-height:68px;font-size:24px}.sp-result .secondary{width:100%}
.sticker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.sticker{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:16px;background:#fff;box-shadow:0 3px 0 #0005;transform:rotate(-4deg)}.sticker:nth-child(even){transform:rotate(4deg)}.sticker .mini-img{width:80%;height:80%}.sticker-grid.small{grid-template-columns:repeat(5,minmax(0,1fr));width:100%}
.mini-album{margin-top:12px;width:100%;min-height:56px;font-size:18px}
@keyframes sp-hop{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-36px) scale(1.12,.92)}60%{transform:translateY(0) scale(.94,1.08)}100%{transform:none}}
@keyframes sp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px) rotate(-3deg)}75%{transform:translateX(8px) rotate(3deg)}}
@keyframes sp-pop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}@keyframes sp-pulse{50%{transform:scale(1.06)}}
@keyframes sp-fly{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion:reduce){.sp-elephant.hop,.sp-elephant.shake,.sp-card.right,.sp-card.wrong,.sp-card.hint,.confetti{animation:none}}
.sp-cards{margin-block:auto}.sp-card .mini-img{width:84%;height:84%}
/* razporeditev: ime slike ne prekriva slike Slona in kartic; kartice so omejene na višino zaslona in širino 1000 px */
.sp-stage{min-height:0;gap:10px}
.sp-word{display:flex;align-items:center;justify-content:center;gap:12px;line-height:1.2;padding:12px 26px;margin:6px auto 10px;position:relative;z-index:1}
.sp-cards{width:min(100%,max(300px,calc(3 * (100dvh - 400px) + 20px)));max-width:1000px;margin-inline:auto}
.sp-cards{margin-block:14px auto}
/* imena pod sličicami: pokažejo se po pravilnem odgovoru in po prvi napaki (otrok brez zvoka vidi, kako se sličica imenuje) */
.sp-card{flex-direction:column;gap:2px}.sp-card .sp-name{display:none;font-weight:900;font-size:clamp(14px,3.8vw,24px);line-height:1.1;text-transform:uppercase;letter-spacing:.04em;text-align:center;overflow-wrap:anywhere;color:#fff;text-shadow:0 2px 0 #0006}
.sp-cards.named .sp-card .sp-name{display:block}.sp-cards.named .sp-card .mini-img{width:62%;height:62%}
body.mini .sp-card .sp-name{color:#4b3151;text-shadow:none}