/* ===== 🐧 פִּינְגְּוִינִים עָפִים · © נועה אריה ===== */
#s-title{background:#bfe6fb}
.splash{object-position:50% 60%}
.t-title{color:#ffffff;text-shadow:0 3px 0 #1f5fb0,0 6px 0 #174a8a,0 10px 18px rgba(0,0,0,.35)}
.t-title span{color:#ffe36e}
.t-world{background:rgba(23,90,160,.85)}
.t-scene{position:absolute;inset:0;pointer-events:none}
.t-scene img{position:absolute;filter:drop-shadow(0 8px 10px rgba(0,40,80,.3))}
.ts-sl{height:27vh;left:6%;bottom:17vh;animation:tsIn .9s .3s both}
.ts-b{height:25vh;right:30%;bottom:15vh;animation:tsIn .9s .5s both,bob 2.6s 1.5s ease-in-out infinite}
.ts-g{height:25vh;right:5%;bottom:14vh;animation:tsIn .9s .7s both,bob 2.6s 1.9s ease-in-out infinite}
.ts-f{height:8vh;left:38%;bottom:13vh;animation:tsIn .9s .9s both}
@keyframes tsIn{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
@keyframes bob{50%{transform:translateY(-8px)}}
.zoo-round{position:absolute;z-index:6;top:calc(var(--sat) + 10px);left:10px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;font-size:24px;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.mode-btn{background:linear-gradient(#ffffff,#d9f1ff);box-shadow:0 5px 0 #8fc4e6,0 8px 16px rgba(0,0,0,.1)}
.lvl-btn{background:linear-gradient(#ffffff,#d9f1ff);box-shadow:0 5px 0 #8fc4e6}
.card h2{color:#1b4f86}
.lvl-btn .ex{font-style:normal;font-weight:800;color:#1b2f6b;background:#eaf6ff;border-radius:8px;padding:0 6px;white-space:nowrap}

/* ----- game ----- */
.pg-bg{background:url(img/bg.webp?v=p3) center bottom/cover no-repeat}
#panels.panels{position:absolute;inset:0;display:flex;flex-direction:column}
.pp{position:relative;flex:1;min-height:0;overflow:hidden}
.panels.duel .pp{background:#cfe9fb}
.panels.duel .pp.flip{transform:rotate(180deg);border-bottom:3px solid rgba(255,255,255,.85)}
.pp-cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.pp-top{position:absolute;z-index:3;top:0;left:0;right:0;padding:calc(var(--sat) + 8px) 10px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.panels.duel .pp-top{padding-top:8px}
.pp-top>*{pointer-events:auto}
.pp-hud{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.fishc{direction:ltr;display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.92);border-radius:999px;padding:2px 12px 2px 8px;font-weight:800;color:#1b4f86;font-size:20px;box-shadow:0 3px 8px rgba(0,40,90,.2)}
.fishc img{height:26px}.fishc small{font-size:14px;color:#5a7ea6}
.fishc.bump,.opp.bump{animation:bump .45s}
@keyframes bump{40%{transform:scale(1.25)}}
.pp-name{background:#1f5fb0;color:#fff;border-radius:999px;padding:2px 12px;font-weight:800;font-size:16px}
.opp{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.88);border-radius:999px;padding:2px 10px 2px 4px;font-weight:800;color:#5a3c8a;font-size:15px}
.opp .ring{--f:0;width:34px;height:34px;border-radius:50%;background:conic-gradient(#ff9f1c calc(var(--f)*360deg),#e3ecf5 0);display:flex;align-items:center;justify-content:center}
.opp .ring img{height:28px;width:28px;object-fit:contain;background:#fff;border-radius:50%}
.opp .of{height:20px}.opp b{font-size:18px}
.pp-ex{display:flex;align-items:center;gap:10px;background:linear-gradient(#ffffff,#e4f4ff);border:4px solid #fff;border-radius:22px;padding:6px 14px;box-shadow:0 6px 0 #8fc4e6,0 10px 22px rgba(0,40,90,.25)}
.eq{display:flex;align-items:center;gap:8px;font-weight:800;font-size:min(11vw,46px);color:#1b2f6b;line-height:1.1}
.panels.duel .eq{font-size:min(8vw,36px)}
.eq .op{color:#2b7bd6}
.eq .q{min-width:1.3em;text-align:center;border:3px dashed #2b7bd6;border-radius:12px;color:#2b7bd6;padding:0 6px;background:#f2faff}
.eq .q.ok{border:3px solid #22a35a;color:#0f7a3a;background:#e5fbe9;animation:bump .5s}
.eq.pop{animation:eqIn .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes eqIn{from{transform:scale(.7);opacity:0}}
.exsay{font-size:26px;width:48px;height:48px;border-radius:50%;border:0;background:#2b7bd6;color:#fff;box-shadow:0 4px 0 #174a8a;display:flex;align-items:center;justify-content:center;flex:none}
.exsay img{height:28px}
.pp .ppraise{position:absolute;z-index:4;left:50%;top:42%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;background:linear-gradient(#fffbe6,#ffe066);border:5px solid #fff;border-radius:26px;padding:10px 24px;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.3);transition:.35s cubic-bezier(.3,1.5,.5,1)}
.pp .ppraise.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pp .ppraise b{display:block;font-size:34px;color:#7a3c00;white-space:nowrap}
.pp .ppraise span{display:inline-flex;align-items:center;gap:6px;font-size:24px;font-weight:800;color:#1b4f86}
.pp .ppraise img{height:30px}
.pp .pbanner{position:absolute;z-index:4;left:50%;bottom:16%;transform:translateX(-50%);opacity:0;pointer-events:none;background:rgba(255,255,255,.95);border-radius:18px;padding:8px 18px;font-weight:800;font-size:20px;color:#5a3c8a;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.2);transition:.3s}
.pp .pbanner.on{opacity:1}
.flyfish{position:absolute;z-index:5;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}

/* ----- rules demo ----- */
.pdemo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0}
.pd-eq{display:flex;gap:6px;font-weight:800;font-size:28px;color:#1b2f6b}
.pd-eq .q{border:3px dashed #2b7bd6;border-radius:10px;padding:0 6px;color:#2b7bd6}
.pd-row{position:relative;display:flex;align-items:flex-end;justify-content:space-between;width:min(300px,80vw);height:96px}
.pd-sl{height:80px}.pd-pg{position:absolute;left:14px;bottom:52px;height:38px;animation:pdFly 2.6s ease-in infinite}
@keyframes pdFly{0%,20%{transform:none}70%{transform:translate(min(190px,52vw),-34px) rotate(25deg)}71%,100%{opacity:0;transform:translate(min(190px,52vw),-34px)}}
.pd-tw{display:flex;flex-direction:column;align-items:center}.pd-r{display:flex}
.pd-tw b{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:url(img/block.webp?v=p3) center/cover;color:#1b2f6b;font-size:22px;font-weight:800}
.pd-tw b.ok{outline:3px solid #ffc61a;border-radius:8px}

/* ----- finale ----- */
.finale{position:absolute;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.85),rgba(160,215,245,.85));opacity:0;transition:opacity .5s}
.finale.on{display:flex}.finale.go{opacity:1}
.fin-in{display:flex;flex-direction:column;align-items:center;gap:8px}
.fin-fish{display:flex;flex-wrap:wrap;justify-content:center;max-width:320px;gap:4px}
.fin-fish img{height:44px;animation:fishIn .5s calc(var(--k)*.12s) both}
@keyframes fishIn{from{opacity:0;transform:translateY(-60px) rotate(-30deg)}}
.fin-p{display:flex;gap:12px}
.fin-p img{height:min(34vh,260px);animation:bob 1.2s ease-in-out infinite}
.fin-t{font-size:34px;font-weight:800;color:#1b4f86}
.end-chars .fishpile{height:90px;align-self:flex-end}

#s-title #t-start{position:absolute!important;margin:0!important;left:0;right:0;width:max-content;margin-inline:auto!important;bottom:calc(var(--sab) + 44px);top:auto!important;z-index:7}
#s-title .t-head{top:calc(var(--sat) + 70px)}
.school-logo{position:absolute;z-index:6;top:calc(var(--sat) + 10px);right:10px;height:46px;width:auto;background:rgba(255,255,255,.92);border-radius:12px;padding:3px 6px;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.ts-f{left:30%;bottom:12vh;height:7vh}
.panels.duel .pp-top{padding:8px 10px 4px}
.panels.duel .pp-hud{order:2}
.pp-hud{align-self:stretch;padding-right:96px;min-height:44px}
.panels.duel .pp-hud{padding-right:0}
.pp-ex{max-width:100%;box-sizing:border-box}
.eq{font-size:min(9.5vw,42px)}
.pp .pbanner{bottom:auto;top:46%}
.panels.duel .pp-top{flex-direction:row;justify-content:center;align-items:center;gap:8px;padding:6px 52px 2px}
.panels.duel .pp-hud{order:0;flex-direction:column;gap:3px;min-height:0;padding:0;align-self:center}
.panels.duel .fishc{font-size:16px;padding:1px 8px}.panels.duel .fishc img{height:20px}
.panels.duel .pp-name{font-size:13px;padding:1px 8px}
.panels.duel .pp-ex{padding:4px 10px;border-width:3px;border-radius:18px}
.panels.duel .eq{font-size:min(7.5vw,32px)}
.panels.duel .exsay{width:40px;height:40px;font-size:20px}

#cert-zoo.zoo-btn{background:linear-gradient(#5fd36a,#23a03a);color:#fff;text-decoration:none;box-shadow:0 6px 0 #17782a,0 10px 20px rgba(0,60,20,.3);display:flex;align-items:center;justify-content:center;text-align:center}