/* ===== הַמַּכֹּלֶת שֶׁל הַפִּינְגְּוִין · © נועה אריה ===== */
.card h2{color:#1f5f99}
.t-world{background:rgba(31,95,153,.8)}
.t-title{color:#fff3a8;-webkit-text-stroke:2px #154a7a;text-shadow:0 4px 0 #154a7a,0 8px 16px rgba(0,0,0,.45)}
#s-title{background:#9fd6ff}
.splash{object-position:50% 50%}
.splash-fade{background:linear-gradient(rgba(10,50,100,.45),rgba(10,50,100,0))}
.zoo-link{position:absolute;z-index:6;top:calc(var(--sat) + 10px);left:10px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border-radius:999px;padding:3px 12px 3px 4px;text-decoration:none;color:#1f5f99;font-weight:800;font-size:15px;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.zoo-link img{height:34px;width:34px;border-radius:50%;object-fit:cover;object-position:50% 40%}
.t-head{top:calc(var(--sat) + 7vh)}
.mode-btn{background:linear-gradient(#ffffff,#dcefff);box-shadow:0 5px 0 #8fbfe6,0 8px 16px rgba(0,0,0,.1)}
.mode-btn .mt{color:#174d80}.mode-btn .ms{color:#4a6a8a}
.mode-btn .ico img{height:58px;width:auto;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}
.mode-btn .ico.duo{display:flex;justify-content:center}.mode-btn .ico.duo img{height:44px;margin-inline:-5px}
.lvl-btn{background:linear-gradient(#ffffff,#dcefff);box-shadow:0 5px 0 #8fbfe6;grid-template-rows:auto auto auto}
.lvl-btn b{color:#174d80;font-size:22px}.lvl-btn span{color:#4a6a8a}
.lvl-btn .vdef{grid-column:1;font-size:13px;font-weight:800;color:#3d7fc4}
.lv-ic{grid-column:2;grid-row:1/4;display:flex;gap:2px;align-items:center}
.lv-ic img{height:34px;width:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}.lv-ic img.nt{height:30px}
.lvl-btn .done{position:absolute;top:6px;left:8px;font-size:20px;font-style:normal}
.vpick{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:6px}
.vp-t{font-weight:800;color:#1f5f99;font-size:16px}
.seg{display:flex;background:#e2eefa;border-radius:999px;padding:4px;gap:3px;flex-wrap:wrap;justify-content:center}
.seg button{border-radius:999px;padding:8px 12px;font-size:15px;font-weight:800;background:transparent;color:#2d5f8a;min-height:40px}
.seg button.on{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);color:#0f3a63}
.hero img{height:120px}
.hero{background:#f5fbff;box-shadow:0 4px 0 #b8d6ee}
.pl-box{background:#eaf5ff}.pl-box input{border-color:#9cc9ee}
.pl-t{color:#1f5f99}
.rules-list li{background:#eef7ff;color:#173a5c;font-size:17px;line-height:1.45;padding:6px 10px}
.rules-list li:nth-child(3){background:#fff6e0}
.rules-list .ric{flex:0 0 46px;height:46px;background:#fff;box-shadow:0 2px 0 #b8d6ee}
.ric-i{width:40px;height:40px;object-fit:contain}
.rules-card{padding-top:12px}
.rules-ov{background:rgba(10,30,60,.55)}
@media (min-width:640px){.rules-card .rules-list,.ov-card .rules-list{display:grid;grid-template-columns:1fr 1fr}}
/* animated how-to: a coin and a coin go from the wallet to the counter, 5 + 2 = 7 ✓ */
.demo-box{display:flex;justify-content:center;margin:0 0 4px}
.demo{position:relative;width:260px;height:96px}
.d-wal{position:absolute;right:4px;bottom:2px;height:84px}
.d-ctr{position:absolute;left:4px;bottom:6px;width:150px;height:62px;border-radius:16px;background:linear-gradient(#e3f4ff,#a5d8ff);border:3px dashed #4a90c8;display:flex;align-items:center;justify-content:center;gap:4px}
.d-c1,.d-c2{height:46px;opacity:0;animation:dIn 5s infinite}.d-c2{height:42px;animation-name:dIn2}
.d-tag{position:absolute;top:-18px;left:-6px;background:#fffdf3;border:2px solid #e3c27a;border-radius:8px;padding:0 6px;font-weight:800;color:#b2290f;transform:rotate(-8deg);font-size:18px}
.d-ok{position:absolute;right:-10px;top:-16px;font-size:30px;font-weight:800;color:#2f9e44;opacity:0;animation:dOk 5s infinite}
.d-fly1,.d-fly2{position:absolute;right:40px;bottom:34px;height:46px;opacity:0;animation:dF1 5s infinite}.d-fly2{height:42px;animation-name:dF2}
@keyframes dF1{0%,4%{opacity:0;transform:none}8%{opacity:1;transform:translateY(-14px) scale(1.1)}24%{opacity:1;transform:translate(-118px,8px)}27%,100%{opacity:0;transform:translate(-118px,8px)}}
@keyframes dF2{0%,30%{opacity:0;transform:none}34%{opacity:1;transform:translateY(-14px) scale(1.1)}50%{opacity:1;transform:translate(-84px,8px)}53%,100%{opacity:0;transform:translate(-84px,8px)}}
@keyframes dIn{0%,25%{opacity:0}27%,92%{opacity:1}100%{opacity:0}}
@keyframes dIn2{0%,51%{opacity:0}53%,92%{opacity:1}100%{opacity:0}}
@keyframes dOk{0%,60%{opacity:0;transform:scale(.4)}66%,92%{opacity:1;transform:none}100%{opacity:0}}
.amt{direction:ltr;unicode-bidi:isolate;white-space:nowrap}

/* ===== game ===== */
#s-game{background:#2c5d8f}
.g-bg{position:absolute;inset:0;background:url(img/bg.webp) center 28%/cover no-repeat}
.g-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.08),rgba(20,60,110,.15))}
.panels{position:absolute;inset:0;display:flex;flex-direction:column}
.panels.duel{flex-direction:column-reverse}
.panels.duel::after{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:rgba(255,255,255,.9);box-shadow:0 0 8px rgba(0,0,0,.3);z-index:6;pointer-events:none}
.pnl{position:relative;flex:1 1 0;min-height:0;display:grid;grid-template-rows:auto 44% 1fr;grid-template-columns:100%;grid-template-areas:"hud" "stage" "work";padding:calc(var(--sat) + 8px) 8px calc(var(--sab) + 8px);gap:4px}
.pnl.flip{transform:rotate(180deg)}
.panels.duel .pnl{padding:6px 8px 8px}
.panels.duel .pnl:not(.flip){padding-bottom:calc(var(--sab) + 8px)}
.panels.duel .pnl.flip{padding-bottom:calc(var(--sat) + 8px)}
.panels.duel .pnl:not(.flip){background:linear-gradient(rgba(47,124,255,0),rgba(47,124,255,.12))}
.panels.duel .pnl.flip{background:linear-gradient(rgba(255,90,165,0),rgba(255,90,165,.12))}
/* hud */
.hud{grid-area:hud;display:flex;align-items:center;gap:8px;padding:0 112px 0 4px;min-height:44px;z-index:7}
.panels.duel .hud{padding:0 54px}
.me{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.94);border-radius:999px;padding:2px 10px 2px 4px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.15);min-width:0}
.hav{height:34px;width:auto}
.hnm{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:#173a5c}
.hst{display:flex;align-items:center;gap:2px;font-size:18px;color:#a05a00;direction:ltr;white-space:nowrap}
.hst img{height:22px}.hst.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.35)}}
.prog{flex:1;min-width:30px;height:12px;border-radius:999px;background:rgba(255,255,255,.6);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
.prog i{display:block;height:100%;background:linear-gradient(90deg,#ffa94d,#ffd43b);transform-origin:100% 50%;transform:scaleX(0);transition:transform .6s}
.opp{display:none;align-items:center;gap:4px;background:rgba(255,255,255,.94);border-radius:999px;padding:2px 8px 2px 4px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.15);font-size:15px;color:#173a5c}
.opp:not(:empty){display:flex}
.opp>img{height:32px}.opp b{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp .ost{display:flex;align-items:center;gap:2px;direction:ltr;color:#a05a00;font-size:17px}.opp .ost img{height:20px}
.opp .ring i{display:block;width:22px;height:22px;border-radius:50%;background:conic-gradient(#3d8fe0 calc(var(--f,0)*360deg),rgba(61,143,224,.18) 0)}
.opp.bump{animation:bump .4s}
.vtg{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;font-size:20px;padding:0;box-shadow:0 3px 0 #b8d6ee}
.vtg.off{background:#fff3bf;box-shadow:0 3px 0 #e0c060}
/* stage */
.stage{grid-area:stage;position:relative;min-height:0}
.keeper{position:absolute;left:0;bottom:-2px;height:54%;max-width:34%;object-fit:contain;object-position:50% 100%;z-index:2;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));transform-origin:50% 100%}
.keeper.talking{animation:talk .32s ease-in-out infinite alternate}
.cust{position:absolute;right:0;bottom:0;width:36%;height:74%;z-index:2}
.cimg{width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.28));transform-origin:50% 100%}
.cust.in{animation:cin .65s cubic-bezier(.2,.8,.3,1.15) both}
@keyframes cin{from{transform:translateX(115%)}}
.cust.out{animation:cout .42s ease-in forwards}
@keyframes cout{to{transform:translateX(125%);opacity:0}}
.cust.happy .cimg{animation:hop .45s 3 ease-in-out}
@keyframes hop{50%{transform:translateY(-9%) scale(1.02,.98)}}
.cust.puzzled .cimg{animation:tilt 1s ease-in-out}
@keyframes tilt{20%{transform:rotate(-7deg)}50%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}}
.cust.talking .cimg{animation:talk .32s ease-in-out infinite alternate}
@keyframes talk{to{transform:translateY(-2.2%) scale(1.012,.988)}}
.cust .qm{position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;background:#fff;color:#e8590c;font-size:30px;font-weight:800;display:none;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.25);z-index:3}
.cust.puzzled .qm{display:flex;animation:pin .3s cubic-bezier(.3,1.5,.5,1)}
.cust .crown{display:none;position:absolute;top:-6%;left:32%;width:36%;z-index:3;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));animation:crown 1.6s ease-in-out infinite}
@keyframes crown{50%{transform:translateY(-6%) rotate(-4deg)}}
.sp-gold .cust .crown{display:block}
.sp-gold .cimg{filter:drop-shadow(0 0 10px #ffe066) drop-shadow(0 0 4px #ffb300) drop-shadow(0 6px 8px rgba(0,0,0,.2))}
.c-giraffe .crown{left:12%;top:-5%}
/* speech bubbles */
.bub{position:absolute;z-index:5;background:#fff;border-radius:18px;padding:5px 12px 5px 6px;font-weight:800;font-size:var(--bf,19px);line-height:1.5;color:#173a5c;box-shadow:0 4px 12px rgba(0,0,0,.2);max-width:64%;display:flex;align-items:center;gap:6px;opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.bub.show{opacity:1;transform:none}
.bub.empty{display:none}
.bub .bt{flex:1}
.bub.talking{box-shadow:0 0 0 4px #ffd43b,0 4px 12px rgba(0,0,0,.2)}
.cb{top:1%;right:2%;transform-origin:80% 100%}
.cb::after{content:"";position:absolute;bottom:-11px;right:18%;border:12px solid transparent;border-top-color:#fff;border-bottom:0}
.kb{top:38%;left:2%;transform-origin:15% 100%;background:#eef7ff;max-width:56%}
.kb::after{content:"";position:absolute;bottom:-11px;left:16%;border:12px solid transparent;border-top-color:#eef7ff;border-bottom:0}
.bsay{flex:none;width:34px;height:34px;border-radius:50%;background:#e2f0ff;font-size:17px;padding:0;box-shadow:0 2px 0 #a9cdee;display:flex;align-items:center;justify-content:center;gap:3px}
.pnl.read .bsay{width:auto;padding:0 9px;border-radius:999px;background:#fff3bf;box-shadow:0 2px 0 #e0c060}
.pnl.read .bsay::after{content:"הַקְרָאָה";font-size:13px;font-weight:800;color:#7a4a00}
.pnl.read .bub .bsay::after{content:""}
/* goods on the counter */
.goods{position:absolute;z-index:3;left:30%;right:36%;bottom:0;height:36%;display:flex;align-items:flex-end;justify-content:center;gap:6%}
.good{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center}
.gi{position:relative;display:inline-block;line-height:0}
.gi img{display:block;max-height:var(--gh,90px);max-width:var(--gw,90px)}
.good img{object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.3))}
.tag{position:absolute;top:-14px;left:-18px;background:#fffdf3;border:2px solid #e3c27a;border-radius:9px;padding:0 7px;font-weight:800;font-size:var(--tf,19px);line-height:1.45;color:#b2290f;box-shadow:0 3px 6px rgba(0,0,0,.22);transform:rotate(-8deg);white-space:nowrap;z-index:2}
.paid{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;height:100%;max-width:56%}
.paid .pl{font-size:12px;font-weight:800;color:#fff;background:rgba(23,58,92,.8);border-radius:999px;padding:0 8px;white-space:nowrap}
.paid img.coin{width:calc(var(--cu)*.95);max-width:100%}
.paid img.note{width:calc(var(--cu)*1.6);max-width:100%;transform:rotate(-6deg)}
.paid img{filter:drop-shadow(0 4px 5px rgba(0,0,0,.3))}
.bag{position:absolute;z-index:4;right:31%;bottom:0;width:13%;max-width:70px;opacity:0;transform:scale(.4);transform-origin:50% 100%;transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1);filter:drop-shadow(0 4px 5px rgba(0,0,0,.3))}
.bag.on{opacity:1;transform:none}
/* surprise + praise */
.banner,.praise{position:absolute;z-index:9;left:50%;top:42%;display:flex;align-items:center;gap:8px;border:4px solid #fff;border-radius:24px;padding:8px 18px;font-weight:800;box-shadow:0 10px 26px rgba(0,0,0,.35);pointer-events:none;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.3)}
.banner{background:linear-gradient(#fff8d6,#ffd43b);color:#7a3c00;font-size:26px;line-height:1.2}
.banner small{font-size:17px}
.banner img{height:58px}
.sp-rush .banner{background:linear-gradient(#e7f5ff,#74c0fc);color:#0b3a6b}
.banner.on{animation:pop2 2.1s both}
.praise{background:linear-gradient(#ebfbee,#8ce99a);color:#1b5e20;font-size:28px;flex-direction:column;gap:0;line-height:1.25;top:30%}
.praise span{display:flex;align-items:center;gap:4px;font-size:24px;direction:ltr;color:#a05a00}.praise span img{height:28px}
.praise.on{animation:pop2 1.5s both}
.praise.x2{background:linear-gradient(#fff8d6,#ffd43b);color:#7a3c00}
@keyframes pop2{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}22%{transform:translate(-50%,-50%) scale(1)}82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(.9)}}
@keyframes pin{from{transform:scale(.4);opacity:0}}
.rush{position:absolute;top:1%;left:1%;z-index:6;display:none;align-items:center;gap:4px;width:38%;background:rgba(255,255,255,.85);border-radius:999px;padding:2px 8px 2px 4px}
.rush.on{display:flex}.rush img{height:30px}
.rbar{flex:1;height:12px;border-radius:999px;background:rgba(0,0,0,.12);overflow:hidden}
.rbar i{display:block;height:100%;background:linear-gradient(90deg,#ff6b6b,#ffd43b);transform-origin:100% 50%}
.rush.over{opacity:.45}
.sp-rush .kb{top:44%}
/* work area: counter + wallet/drawer */
.work{grid-area:work;display:flex;flex-direction:column;gap:6px;min-height:0;position:relative}
.instr{display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.92);border-radius:14px;padding:3px 10px;font-weight:800;font-size:17px;color:#174d80;line-height:1.35;text-align:center;min-height:38px;flex:none}
.instr.talking{box-shadow:0 0 0 4px #ffd43b}
.instr.noclip .isay{display:none}
.counter{position:relative;display:flex;gap:8px;align-items:stretch;background:linear-gradient(180deg,rgba(232,248,255,.95),rgba(168,214,242,.95));border:3px solid #fff;border-radius:20px;padding:6px;box-shadow:inset 0 2px 8px rgba(255,255,255,.8),0 6px 14px rgba(20,60,110,.28);flex:none}
.drop{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px 4px;border:3px dashed rgba(40,110,170,.45);border-radius:14px;padding:3px;min-height:calc(var(--cu,64px)*.98)}
.drop .ph{font-weight:800;color:#3d6f99;font-size:15px;text-align:center}
.pc{background:none;padding:0;line-height:0;border-radius:50%}
.pc img{display:block;pointer-events:none}
.pc.coin img{width:calc(var(--cu,64px)*.78*var(--k,1))}
.pc.note{border-radius:6px}.pc.note img{height:calc(var(--cu,64px)*.6)}
.drop.many .pc{margin-inline:-5px}.drop.lots .pc{margin-inline:-11px}
.m1{--k:.78}.m2{--k:.9}.m5{--k:1}.m10{--k:.96}
.side{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:28%}
.tot{font-weight:800;font-size:14px;color:#123d66;white-space:nowrap;text-align:center;line-height:1.2}
.tot .amt{display:inline-block;font-size:24px;color:#b2290f;margin-top:1px}
.pay{background:linear-gradient(#69db7c,#2f9e44);color:#fff;font-size:21px;font-weight:800;border-radius:16px;padding:5px 14px;box-shadow:0 4px 0 #237a35;min-height:46px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.pay:active{transform:translateY(3px);box-shadow:0 1px 0 #237a35}
.pay:disabled{filter:grayscale(.7) opacity(.55)}
.msg{position:absolute;left:50%;top:-16px;transform:translateX(-50%);background:#fff3bf;color:#c2410c;font-weight:800;border-radius:999px;padding:2px 14px;font-size:16px;opacity:0;white-space:nowrap;pointer-events:none;box-shadow:0 3px 8px rgba(0,0,0,.2);z-index:3}
.msg.on{opacity:1;animation:pin .3s cubic-bezier(.3,1.5,.5,1)}
.tray{flex:1;min-height:0;display:flex;align-items:center;gap:6px;background:linear-gradient(#cf9a63,#9a5a2a);border-radius:20px;padding:6px;border:3px solid #ecc28f;box-shadow:inset 0 2px 6px rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.25)}
.is-change .tray{background:linear-gradient(#f1f3f5,#adb5bd);border-color:#fff}
.tic{height:min(calc(var(--cu,64px)*.95),70%);width:auto;flex:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.stacks{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;align-content:center;min-height:0;height:100%}
.stk{position:relative;touch-action:none;cursor:grab;line-height:0;transition:opacity .15s}
.stk img{display:block;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.stk.coin img{width:calc(var(--cu,64px)*var(--k,1))}
.stk.note img{height:calc(var(--cu,64px)*.8)}
.stk.pile img.bk1,.stk.pile img.bk2{position:absolute;left:0;top:0}
.stk.pile img.bk1{transform:translate(3px,4px)}.stk.pile img.bk2{transform:translate(6px,8px)}
.stk.lifting{opacity:.2}
.glow{animation:glow 1s ease-in-out infinite;z-index:2}
@keyframes glow{50%{filter:drop-shadow(0 0 12px #fff59d) drop-shadow(0 0 6px #ffd43b) brightness(1.12);transform:scale(1.1)}}
.ghost{position:fixed;left:0;top:0;z-index:95;pointer-events:none;filter:drop-shadow(0 12px 10px rgba(0,0,0,.35))}
.flyer{position:fixed;z-index:94;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}
.shake{animation:shk .45s}
@keyframes shk{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
/* compare */
.cmp{display:none}
.is-cmp .counter,.is-cmp .tray{display:none}
.is-cmp .cmp{display:flex;flex:1;flex-direction:column;gap:8px;min-height:0}
.cards{flex:1;display:flex;gap:12px;min-height:0}
.cmp-card{flex:1;position:relative;background:rgba(255,255,255,.93);border-radius:22px;border:4px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;padding:10px;min-height:0}
.cmp-card img{max-height:78%;max-width:78%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.3));margin-top:8%}
.cmp-card .tag{top:8px;left:8px;font-size:24px}
.cmp-card.right{border-color:#40c057;background:#ebfbee}
.cmp-card .ok{display:none;position:absolute;top:4px;right:10px;color:#2f9e44;font-size:34px}
.cmp-card.right .ok{display:block}
.opts{display:none;gap:10px;justify-content:center;flex:none}
.opts.on{display:flex}
.opt{flex:1;max-width:130px;background:linear-gradient(#fff,#e7f5ff);border-radius:18px;font-size:24px;font-weight:800;padding:8px;box-shadow:0 4px 0 #74c0fc;color:#123d66;min-height:56px}
.opt.right{background:#d3f9d8;box-shadow:0 4px 0 #40c057}.opt.no{opacity:.45}
.pnl.waiting .work{opacity:.5;pointer-events:none}
/* compact panels (one-phone duel) */
.pnl.compact .kb{display:none}
.pnl.compact .bub{--bf:15px;padding:3px 8px 3px 4px;max-width:62%}
.pnl.compact .bsay{width:28px;height:28px;font-size:14px}
.pnl.compact .instr{font-size:14px;min-height:30px;padding:2px 8px}
.pnl.compact .tag{--tf:15px}
.pnl.compact .hud{min-height:36px}.pnl.compact .hav{height:28px}
.pnl.compact .keeper{height:58%}
.pnl.compact .cust{height:80%;width:30%}
.pnl.compact .goods{left:30%;right:31%;height:44%}
.pnl.compact .pay{font-size:18px;min-height:40px;padding:4px 10px}
.pnl.compact .tot{font-size:12px}.pnl.compact .tot .amt{font-size:19px}
.pnl.compact .opt{font-size:20px;min-height:44px}
.pnl.compact .cmp-card .tag{font-size:19px}
.pnl.compact .banner{font-size:20px}.pnl.compact .banner img{height:40px}
.pnl.compact .praise{font-size:22px}
/* landscape panel: the shop on one side, counter + wallet on the other */
.pnl.land{grid-template-columns:46% 1fr;grid-template-rows:auto 1fr;grid-template-areas:"hud hud" "stage work";column-gap:10px}
.pnl.land .cust{height:70%;width:34%}
.pnl.land .keeper{height:50%}
/* very wide panel (a duel on a phone held sideways): stage | counter | wallet */
.pnl.wide{grid-template-columns:34% 1fr;grid-template-rows:auto 1fr;grid-template-areas:"hud hud" "stage work"}
.pnl.wide .work{display:grid;grid-template-columns:1fr 1.25fr;grid-template-rows:auto 1fr;gap:6px}
.pnl.wide .instr{grid-column:1/3}
.pnl.wide .counter{flex-direction:row}
.pnl.wide .cmp{grid-column:1/3}
.pnl.wide .tray{min-height:0}
/* popups in the middle */
.g-center{position:fixed;inset:0;z-index:60;display:none;pointer-events:none;align-items:center;justify-content:center}
.g-center.on{display:flex}
.g-center.duel{flex-direction:column;justify-content:space-around}
.cpop{background:linear-gradient(#fffbe6,#ffe066);border:5px solid #fff;border-radius:28px;padding:14px 26px;font-size:30px;font-weight:800;color:#7a3c00;box-shadow:0 14px 40px rgba(0,0,0,.4);display:flex;align-items:center;gap:10px;animation:pin .45s cubic-bezier(.3,1.5,.5,1) both;text-align:center;flex-direction:column;line-height:1.3}
.cpop.flip{rotate:180deg}
.cpop img{height:70px}
.cpop small{font-size:18px}
.cpop.start{background:linear-gradient(#e7f5ff,#a5d8ff);color:#0b3a6b}
/* duel: back and help sit on the middle line */
body.duel-mid .noa-back{top:var(--midy,50%);margin-top:-22px;right:6px}
body.duel-mid .noa-help{top:var(--midy,50%);margin-top:-22px;right:auto;left:6px}
.e3{display:inline-block;height:1.25em;width:auto;vertical-align:-0.28em;filter:drop-shadow(0 2px 2px rgba(0,0,0,.22));pointer-events:none}
.mode-btn .ico .e3{height:52px}
.bsay .e3,.vtg .e3{height:22px;vertical-align:middle}
.end-wrap h2,#end-h{color:#1f5f99}
.end-sub{color:#173a5c}
@media (orientation:landscape) and (max-height:500px){.card{margin-top:calc(var(--sat) + 8px);max-height:calc(100% - 16px)}.t-head{top:calc(var(--sat) + 2vh)}.t-title{font-size:min(9vh,44px)}#t-start{margin-bottom:calc(var(--sab) + 7vh)}}

.tag.gone{opacity:0;transition:opacity .3s}
.paid .pl{display:block}
.bpaid{display:inline-block;vertical-align:middle;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));margin-inline-start:2px}
.bpaid.coin{height:2.1em}.bpaid.note{height:1.9em;transform:rotate(-5deg)}
.pnl.compact .bpaid.coin{height:1.8em}
.hud.has-opp .hnm,.hud.has-opp .prog{display:none}
.hud.has-opp{justify-content:flex-start}
.hud.has-opp .me{flex:none}
.hud .vs-x{font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);font-size:15px}
.end-flip{position:relative;z-index:2;transform:rotate(180deg);text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px;background:rgba(255,253,243,.93);border-radius:24px;width:min(92vw,440px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.end-flip h2{margin:2px 0 0;font-size:24px;line-height:1.4;color:#1f5f99}
.end-flip .end-sub{font-size:18px}
#s-end.dual{justify-content:space-between;padding:calc(var(--sat,0px) + 62px) 0 calc(var(--sab,0px) + 14px)}
#s-end.dual .end-chars img{height:96px}
#s-end.dual .end-chars img.lose{height:72px}
#s-end.dual #end-h{font-size:24px}
#s-end.dual .end-sub{font-size:18px}
#s-end.dual .end-wrap{gap:6px;padding:14px 16px}
.pnl.compact:not(.land){grid-template-rows:auto 36% 1fr}
.pnl.compact .counter{padding:4px;gap:5px}
.pnl.compact .drop{min-height:calc(var(--cu,60px)*.85)}
.pnl.compact .work{gap:4px}
.pnl.wide{padding-top:4px!important;padding-bottom:calc(var(--sab) + 4px);gap:2px}
.panels.duel .pnl.wide.flip{padding-bottom:calc(var(--sat) + 4px)!important}
.pnl.wide .hud{min-height:30px}.pnl.wide .hav{height:24px}.pnl.wide .hst{font-size:15px}.pnl.wide .hst img{height:18px}
.pnl.wide .instr{min-height:26px;font-size:13px;padding:1px 8px}
.pnl.wide .side{min-width:0}.pnl.wide .tot{font-size:11px}.pnl.wide .tot .amt{font-size:17px}
.pnl.wide .pay{font-size:16px;min-height:34px;padding:2px 10px}
.pnl.wide .drop .ph{font-size:12px}
.pnl.wide .tray{padding:3px}
.pnl.wide .bub{--bf:13px}
.pnl.wide .cust{height:84%}.pnl.wide .keeper{height:60%}
.pnl.wide .opts .opt{min-height:36px;font-size:18px;padding:3px}
.pnl.wide .cmp{flex-direction:row!important}
.pnl.wide .cards{gap:6px}
.pnl.wide .cmp-card .tag{font-size:15px}
.hud{overflow:hidden}
.hud.has-opp .opp b{max-width:56px}
.vtg{width:38px;height:38px}
@media (orientation:landscape){.splash{object-position:50% 74%}}

/* v4: smaller title + start button moved above the animals (her note Oct 31 23:16) */
.t-title{font-size:min(7vh,36px)}
.t-world{font-size:min(2.4vh,15px)}
#s-title #t-start{font-size:20px;padding:8px 24px;min-height:48px;margin-bottom:calc(var(--sab) + 25vh)}
@media (orientation:landscape){#s-title #t-start{margin-bottom:calc(var(--sab) + 4vh)}.t-title{font-size:min(8vh,32px)}}

#gi .gi-title{font-size:min(6.2vw,3.1vh)!important}
#gi .gi-sub{font-size:clamp(10px,1.4vh,13px)!important}

@media (orientation:landscape){
 .t-head{left:auto;right:2vw;top:calc(var(--sat) + 9vh);width:auto}
 .t-title{font-size:min(7vh,26px)}
 .t-world{font-size:11px}
 #s-title #t-start{font-size:17px;padding:6px 18px;min-height:40px;margin-bottom:calc(var(--sab) + 9vh)}
}

/* 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)}