/* ===== 🎂 יוֹם הַהֻלֶּדֶת הַמַּפְתִּיעַ שֶׁל הַמֶּלֶךְ · © נועה אריה ===== */
.bg{background-image:url(img/hall.webp?v=b3);background-position:center 60%}
.bg.dim::after{background:rgba(255,240,245,.22)}
.end-bg{background-image:url(img/finale.webp?v=b3);background-position:center 55%}
.card h2{color:#9c2f6b}
.mode-btn,.lvl-btn{background:linear-gradient(#ffffff,#ffe3ee);box-shadow:0 5px 0 #e9a7c4,0 8px 16px rgba(0,0,0,.1)}
.mode-btn .mt,.lvl-btn b{color:#7a2a5c}.mode-btn .ms,.lvl-btn span{color:#7a5a72}
.hero{background:#fff7fb;box-shadow:0 4px 0 #f0b8d0}
.pl-box{background:#fff0f6}.pl-box input{border-color:#f3a6c8}
.hero img{height:128px}
.rules-list li{background:#fff2f8}.rules-list li:nth-child(3),.rules-list li:nth-child(4){background:#fff6e0}

/* title */
#s-title{background:#f6c28a}
.splash{object-position:50% 62%}
.splash-fade{background:linear-gradient(rgba(120,40,80,.45),rgba(120,40,80,0))}
.t-world{background:rgba(156,47,107,.82)}
.t-title{color:#fff3a8;-webkit-text-stroke:2px #8c2a5e;text-shadow:0 4px 0 #8c2a5e,0 8px 16px rgba(0,0,0,.4);font-size:min(6.4vh,34px);line-height:1.18}
.t-title span{font-size:.72em}
.school-logo{position:absolute;z-index:6;top:calc(var(--sat) + 10px);right:10px;width:min(19vw,82px);height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));pointer-events:none}
#s-title .t-head{top:calc(var(--sat) + 58px)}
#s-title #t-start{margin-top:calc(var(--sat) + 58px + min(6.4vh,34px)*2.6 + 40px)}
@media (orientation:landscape){.school-logo{width:64px}#s-title .t-head{top:calc(var(--sat) + 10vh)}}

/* game: each player has a party hall of their own */
#s-game{background:#e9b77a}
.g-bg{background:url(img/hall.webp?v=b3) center 35%/cover no-repeat}
.kp>.hall{position:absolute;inset:0;z-index:0;background:url(img/hall.webp?v=b3) center 30%/cover no-repeat;pointer-events:none}
.kp>.hall::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,240,220,0) 55%,rgba(90,45,10,.28))}
.panels.duel .kp:not(.flip)>.hall::after{background:linear-gradient(rgba(60,140,255,.30),rgba(60,140,255,.12) 30%,rgba(60,140,255,.22));box-shadow:inset 0 0 26px 2px rgba(40,120,255,.55)}
.panels.duel .kp.flip>.hall::after{background:linear-gradient(rgba(255,90,165,.30),rgba(255,90,165,.12) 30%,rgba(255,90,165,.22));box-shadow:inset 0 0 26px 2px rgba(255,70,160,.55)}
.panels.duel .kp{background:none!important;box-shadow:none!important;overflow:hidden}
.stage{z-index:1}
.decor{position:absolute;inset:0;pointer-events:none;z-index:1}
.dc{position:absolute;display:block;opacity:0;transform:scale(.4);transition:opacity .35s,transform .45s cubic-bezier(.3,1.5,.5,1);filter:drop-shadow(0 4px 5px rgba(60,30,0,.28))}
.dc.on{opacity:1;transform:none}
.dc.pop{animation:dpop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes dpop{0%{transform:scale(.3) translateY(20%);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:none}}
.d-bunting{left:-3%;width:106%;top:-4%;max-height:30%;object-fit:contain;object-position:50% 0}
.d-lanterns{left:0;top:-3%;height:36%}
.d-rosettes{left:26%;top:9%;height:15%}
.d-balloonsL{left:-5%;top:6%;height:50%}
.d-balloonsR{right:-4%;top:0;height:44%}
.tgrp{left:1%;width:44%;top:44%;filter:none}
.tgrp .d-table{width:100%;display:block;filter:drop-shadow(0 5px 6px rgba(60,30,0,.3))}
.tgrp .d-cake{left:27%;width:42%;bottom:50%}
.tgrp .d-crown{right:-4%;width:28%;bottom:48%}
.d-gifts{left:-3%;bottom:-1%;height:24%}
.d-drum{left:19%;bottom:0;height:15%}
.fr{bottom:0;height:30%;left:1%;transform-origin:50% 100%}
.f-giraffe{height:46%;left:-1%}.f-elephant{left:10%;height:24%}.f-meerkat{left:24%;height:20%}.f-zebra{left:14%;height:28%}
.fr.walk{animation:walkin 1.6s ease-out}
@keyframes walkin{0%{transform:translateX(-140%);opacity:1}20%{transform:translateX(-110%) translateY(-4%)}40%{transform:translateX(-70%)}60%{transform:translateX(-35%) translateY(-4%)}80%{transform:translateX(-8%)}100%{transform:none}}
/* the cub in place of the king */
.king.cub{right:-1%;z-index:2}
.king.cub img{filter:drop-shadow(0 6px 8px rgba(0,0,0,.28))}
.king.jump{animation:cjump .55s 3 ease-in-out}
@keyframes cjump{50%{transform:translateY(-9%)}}
.sp-gold .king img{filter:drop-shadow(0 0 10px #ffe066) drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.order{background:#fff;color:#5a2347}
.order .on{color:#d6336c}
.sp-gold .order{background:linear-gradient(#fff0f6,#ffd6e8)}.sp-gold .order::after{border-left-color:#ffe3ef}
/* timed bonus round */
.timer{position:absolute;z-index:6;left:50%;top:2px;transform:translateX(-50%);display:none;align-items:center;gap:6px;background:rgba(255,255,255,.95);border-radius:999px;padding:3px 10px 3px 6px;box-shadow:0 3px 10px rgba(0,0,0,.25);font-weight:900;color:#c2255c;direction:ltr}
.timer.on{display:flex}
.timer img{height:26px}
.timer .tb{width:min(30vw,120px);height:12px;border-radius:99px;background:#ffe3ec;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
.timer .tb i{display:block;height:100%;background:linear-gradient(90deg,#ff6b9d,#ffd43b);transform-origin:0 50%}
.timer b{min-width:1.4em;text-align:center;font-size:18px}
.timer.out{opacity:.55}
.sp-bonus .order{box-shadow:0 0 0 3px #ff8cc6,0 4px 12px rgba(0,0,0,.22)}
.kp:not(.sp-bonus) .timer{display:none}
.timer.on~.order,.sp-bonus .order{margin-top:0}
/* prizes */
.prize{position:absolute;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.prize.on{display:flex}
.prize.msg{justify-content:flex-start;padding-top:6%}
.pz-t{background:linear-gradient(#fff0f6,#ffd6e8);border:4px solid #fff;border-radius:22px;padding:6px 18px;font-weight:900;font-size:24px;color:#8c2a5e;box-shadow:0 8px 22px rgba(0,0,0,.3);text-align:center;line-height:1.35;animation:pin .45s cubic-bezier(.3,1.5,.5,1) both}
.pz-t small{font-size:18px;color:#5a2347}
.pz-t img{height:26px;vertical-align:-5px}
.pz-box,.pz-bal{pointer-events:auto;background:none;padding:0;width:min(46%,190px);aspect-ratio:1;position:relative}
.pz-box img,.pz-bal img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.pz-box{animation:pzin .5s cubic-bezier(.3,1.5,.5,1) both,wob 1.4s .5s ease-in-out infinite}
@keyframes pzin{from{transform:scale(.2);opacity:0}}
@keyframes wob{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg) scale(1.04)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}}
.pz-box.open{animation:shake2 .38s linear}
@keyframes shake2{25%{transform:rotate(-10deg) scale(1.1)}50%{transform:rotate(10deg) scale(1.15)}75%{transform:rotate(-6deg) scale(1.2)}}
.pz-box.reveal{animation:pzin .5s cubic-bezier(.3,1.6,.5,1) both}
.pz-box.fly{transition:transform .55s ease-in,opacity .55s;transform:translate(-30%,-80%) scale(.3);opacity:0}
.pz-bal{width:min(26%,104px);aspect-ratio:.44;animation:rise 2.2s cubic-bezier(.2,.7,.3,1) both,sway 2.4s 2.2s ease-in-out infinite}
@keyframes rise{from{transform:translateY(120%)}}
@keyframes sway{50%{transform:translateY(-6%) rotate(4deg)}}
.pz-bal.popped img{transition:transform .14s,opacity .14s;transform:scale(1.4);opacity:0}
.poof{position:absolute;left:50%;top:32%;width:80%;aspect-ratio:1;border-radius:50%;border:6px solid #ff8787;transform:translate(-50%,-50%) scale(.3);opacity:1;animation:poof .45s ease-out forwards}
@keyframes poof{to{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
/* popups */
.cpop{background:linear-gradient(#fff6fa,#ffd6e8);color:#8c2a5e}
.cpop.start{background:linear-gradient(#fff6fa,#ffe3a0);color:#7a3c00}
.cpop.gold{background:linear-gradient(#fff6fa,#ffd6e8)}
.cpop.bonus{background:linear-gradient(#fffbe6,#ffd8a8);color:#a33b00}
.cpop.surprise{font-size:46px;padding:18px 36px;background:linear-gradient(#fffbe6,#ffd43b);color:#b5267a;border-width:6px}
.cpop.win{background:linear-gradient(#fffbe6,#ffe066)}
.praise{background:linear-gradient(#fff6fa,#ffd6e8);color:#8c2a5e}
/* finale */
.finale{position:absolute;inset:0;z-index:50;display:none;overflow:hidden;background:#3a1d0a}
.finale.on{display:block;animation:fin-in .6s ease-out}
@keyframes fin-in{from{opacity:0}}
.fin-box{position:absolute}
.fin-box>img{position:absolute;display:block}
.fin-bg{left:0;top:0;width:100%;height:100%}
.fd{filter:drop-shadow(0 5px 6px rgba(60,30,0,.3))}
.fd-bunting{left:-2%;width:104%;top:1%}
.fd-lanterns{left:10%;top:6%;height:16%}
.fd-rosettes{left:36%;top:12%;height:7%}
.fd-balloonsL{left:6%;top:22%;height:24%}
.fd-balloonsR{right:4%;top:6%;height:20%}
.fd-table{left:8%;width:50%;top:58.5%}
.fd-cake{left:19%;width:27%;top:48%}
.fd-crown{left:44%;width:12%;top:56%}
.fd-gifts{right:9%;top:63%;height:11%}
.fd-drum{left:10%;top:70%;height:7%}
.fin-king{left:69%;top:31%;height:31%;transform:translateX(-50%) scale(.55);transform-origin:50% 100%;opacity:0}
.finale.king-in .fin-king{animation:kwalk 2.2s ease-out forwards}
@keyframes kwalk{0%{opacity:0;transform:translateX(-50%) scale(.5)}12%{opacity:1}30%{transform:translateX(-50%) translateY(-2%) scale(.62)}50%{transform:translateX(-50%) scale(.74)}70%{transform:translateX(-50%) translateY(-2%) scale(.86)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
.finale.happy .fin-king{animation:none;opacity:1;transform:translateX(-50%);animation:khappy .6s 3 ease-in-out}
@keyframes khappy{50%{transform:translateX(-50%) translateY(-4%)}}
.fin-cub{bottom:4%;height:30%;opacity:0;transform:translateY(30%)}
.fin-cub.c0{left:9%}.fin-cub.c1{right:9%}
.fin-fr{opacity:0;transform:translateY(20%);height:15%}
.fin-fr.fr0{left:28%;bottom:9%;height:22%}.fin-fr.fr1{left:42%;bottom:6%;height:13%}.fin-fr.fr2{right:30%;bottom:7%;height:12%}.fin-fr.fr3{right:37%;bottom:13%;height:14%}
.finale.on .fin-cub,.finale.on .fin-fr{animation:fpop .6s cubic-bezier(.3,1.5,.5,1) forwards}
.finale.on .fin-cub.c1{animation-delay:.15s}.finale.on .fr0{animation-delay:.3s}.finale.on .fr1{animation-delay:.4s}.finale.on .fr2{animation-delay:.5s}.finale.on .fr3{animation-delay:.6s}
@keyframes fpop{to{opacity:1;transform:none}}
.finale.go .fin-cub,.finale.go .fin-fr{opacity:1;transform:none;animation:fjump .5s ease-in-out 6 alternate}
.finale.go .fin-cub.c1{animation-delay:.12s}.finale.go .fr1{animation-delay:.2s}.finale.go .fr3{animation-delay:.3s}
@keyframes fjump{from{transform:none}to{transform:translateY(-8%)}}
.fin-bal{position:absolute;inset:0;pointer-events:none}
.fin-bal img{position:absolute;bottom:-30%;width:calc(70px*var(--s,1));animation:bup 6s linear both}
@keyframes bup{0%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-70vh) rotate(5deg)}100%{transform:translateY(-150vh) rotate(-3deg)}}
/* end screen over the finale picture */
#s-end .end-wrap{background:rgba(255,250,252,.93)}
.order{white-space:nowrap;font-size:calc(var(--of,22px)*.86)}
.order .on{font-size:1.5em}
.kp .order{top:14%!important;left:0!important;right:0!important;margin:0 auto;width:max-content;max-width:96%!important;transform-origin:50% 50%}
.kp .order::after{display:none}
.kp.noking .order{top:2px!important}

/* zoo hub links (Nov 9 2026) */
.cert-btns{flex-wrap:wrap;justify-content:center}
.cert-img{max-height:calc(100% - 270px)}
.big-btn.zoo-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:linear-gradient(#8ff0a4,#26a84e);color:#fff;text-shadow:0 1px 2px rgba(0,60,20,.45);box-shadow:0 6px 0 #17803a,0 10px 22px rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.6)}
.big-btn.zoo-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #17803a}
.zoo-home{position:absolute;z-index:8;top:calc(var(--sat,0px) + 10px);left:10px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);box-shadow:0 4px 12px rgba(0,0,0,.3);font-size:24px;line-height:1;text-decoration:none}
.zoo-home:active{transform:scale(.92)}

/* v3: 🔊 on the surprise popups (nothing speaks on its own) */
.pz-t .pz-say{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;font-size:19px;margin-right:8px;vertical-align:middle;border:none;cursor:pointer}
.pz-t small+.pz-say{margin-right:6px}