/* ===== הַמִּטְבָּח שֶׁל הָאַרְיֵה · © נועה אריה ===== */
.card h2{color:#8a4a12}
.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:#8a4a12;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,#ffe6b8);box-shadow:0 5px 0 #dfae63,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,#ffe6b8);box-shadow:0 5px 0 #dfae63;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:#8a4a12;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:#fffaf0;box-shadow:0 4px 0 #e6c78f}
.pl-box{background:#eaf5ff}.pl-box input{border-color:#9cc9ee}
.pl-t{color:#8a4a12}
.rules-list li{background:#eef7ff;color:#3b2410;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 #e6c78f}
.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,#ffd27a);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}

/* 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(#fff4d6,#ffd27a);color:#5a3200}
/* 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:#8a4a12}
.end-sub{color:#3b2410}
@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)}}

.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:#8a4a12}
.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}
.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)}
}

/* ===== game: the king's kitchen ===== */
#s-game{background:#c98a3a}
.g-bg{position:absolute;inset:0;background:url(img/hall.webp?v=b3) center 40%/cover no-repeat}
.g-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,240,200,.05),rgba(90,50,10,.12))}
.panels{position:absolute;inset:0;display:flex;flex-direction:column}
.panels.duel{flex-direction:column-reverse}
/* duel: the old thin white line is replaced by the golden plank below */
.kp{position:relative;flex:1 1 0;min-height:0;min-width:0;display:grid;grid-template-columns:100%;grid-template-rows:auto minmax(0,1fr) auto auto auto;grid-template-areas:"hud" "stage" "eq" "instr" "tray";padding:calc(var(--sat) + 8px) 8px calc(var(--sab) + 8px);gap:4px}
.kp.flip{transform:rotate(180deg)}
.panels.duel .kp{padding:6px 8px 8px}
.panels.duel .kp:not(.flip){padding-bottom:calc(var(--sab) + 8px);background:linear-gradient(rgba(47,124,255,0),rgba(47,124,255,.14))}
.panels.duel .kp.flip{padding-bottom:calc(var(--sat) + 8px);background:linear-gradient(rgba(255,90,165,0),rgba(255,90,165,.14))}
/* hud */
.hud{grid-area:hud;display:flex;align-items:center;gap:8px;padding:0 104px 0 4px;min-height:44px;z-index:7;overflow:hidden}
.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:#3b2410}
.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;position:relative;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:#3b2410}
.opp:not(:empty){display:flex}
.opp>img{height:32px}.opp b{max-width:64px;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(#e8590c calc(var(--f,0)*360deg),rgba(232,89,12,.18) 0)}
.opp .opot{height:26px;margin-inline-start:2px}
.opp.boil .opot{animation:jig .18s 6 linear}
.opp.bump{animation:bump .4s}
.hud.has-opp .hnm,.hud.has-opp .prog{display:none}
.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}
/* stage: king + scale + pot */
.stage{grid-area:stage;position:relative;min-height:0}
.king{position:absolute;right:0;top:0;height:var(--kh,40%);z-index:2;transform-origin:50% 100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.king img{height:100%;width:auto;display:block}
.king .crown2{display:none}
.king.eat{animation:hop .45s 3 ease-in-out}
@keyframes hop{50%{transform:translateY(-7%) scale(1.02,.98)}}
.king.talking{animation:talk .32s ease-in-out infinite alternate}
@keyframes talk{to{transform:translateY(-1.6%) scale(1.012,.988)}}
.sp-gold .king img{filter:drop-shadow(0 0 12px #ffe066) drop-shadow(0 0 5px #ffb300)}
.order{position:absolute;z-index:5;top:2%;right:calc(var(--kw,30%) + 2px);background:#fff;border-radius:20px;padding:4px 8px 4px 14px;font-weight:800;color:#3b2410;font-size:var(--of,22px);line-height:1.35;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,.22);transform-origin:100% 50%;animation:pin .4s cubic-bezier(.3,1.5,.5,1) both;max-width:calc(100% - var(--kw,30%) - 6px)}
.order::after{content:"";position:absolute;right:-9px;top:46%;border:9px solid transparent;border-left-color:#fff;border-right:0}
.order .on{font-size:1.45em;color:#d9480f;direction:ltr;display:inline-block;line-height:1}
.order.talking{box-shadow:0 0 0 4px #ffd43b,0 4px 12px rgba(0,0,0,.2)}
.sp-gold .order{background:linear-gradient(#fffbe6,#ffe066)}.sp-gold .order::after{border-left-color:#ffe98a}
.bsay{flex:none;width:36px;height:36px;border-radius:50%;background:#fff1b8;box-shadow:0 2px 0 #e0c060;padding:0;font-size:18px;line-height:36px}
.bsay .e3{height:22px;vertical-align:middle}
.scale{position:absolute;left:50%;bottom:0;width:var(--sw,300px);height:calc(var(--sw,300px)*.8);transform:translateX(-50%);z-index:3}
.scale.sh{left:var(--sx,50%)}
.st-img{position:absolute;left:50%;bottom:0;height:75%;transform:translateX(-50%);filter:drop-shadow(0 6px 6px rgba(0,0,0,.28))}
.beam{position:absolute;left:8%;width:84%;top:calc(25% - var(--sw,300px)*.018);height:calc(var(--sw,300px)*.036);border-radius:999px;background:linear-gradient(#fff6c8,#f2c94c 35%,#b07a1c 75%,#e7b83f);box-shadow:0 2px 3px rgba(0,0,0,.35);transform-origin:50% 50%;z-index:2}
.beam::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--sw,300px)*.075);height:calc(var(--sw,300px)*.075);margin:calc(var(--sw,300px)*-.0375) 0 0 calc(var(--sw,300px)*-.0375);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe0,#e9b949 45%,#8d5e12)}
.beam .tick{position:absolute;left:50%;top:-180%;width:4px;height:180%;margin-left:-2px;background:#8d5e12;border-radius:2px}
.pan{position:absolute;width:34%;height:auto;top:0;left:0;z-index:4;pointer-events:none}
.pan>img.pimg{width:100%;display:block;filter:drop-shadow(0 4px 5px rgba(0,0,0,.25))}
.pan .load{position:absolute;left:6%;right:6%;bottom:21%;display:flex;flex-wrap:wrap-reverse;justify-content:center;align-items:flex-end;gap:0 2px;pointer-events:auto}
.pan .load .pf{position:relative;width:var(--pf,44px);height:var(--pf,44px);margin-bottom:-6%;animation:land .35s cubic-bezier(.3,1.5,.5,1)}
.pan .load .pf img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.pan .load .pf b{position:absolute;right:-12%;top:-14%;min-width:calc(var(--pf,44px)*.5);height:calc(var(--pf,44px)*.5);padding:0 3px;border-radius:999px;background:#1d5bd6;color:#fff;border:2px solid #fff;font-size:calc(var(--pf,44px)*.34);line-height:calc(var(--pf,44px)*.46);text-align:center;font-weight:800;direction:ltr;box-sizing:border-box}
@keyframes land{from{transform:translateY(-40%) scale(.7)}}
.pan .wt{position:absolute;left:50%;bottom:20%;width:44%;transform:translateX(-50%)}
.pan .wt img{width:100%;display:block;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.pan .wt b{position:absolute;left:0;right:0;top:44%;text-align:center;font-weight:900;color:#5a3200;font-size:calc(var(--sw,300px)*.085);line-height:1;direction:ltr;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.sp-gold .pan .wt img{filter:drop-shadow(0 0 10px #ffe066) drop-shadow(0 0 4px #ffb300)}
.scale.ok .beam{box-shadow:0 0 0 3px #8ce99a,0 2px 3px rgba(0,0,0,.35)}
.pot{position:absolute;left:0;bottom:0;width:var(--pw,90px);z-index:2}
.pot img{width:100%;display:block;filter:drop-shadow(0 4px 5px rgba(0,0,0,.3))}
.pot .bb{position:absolute;left:12%;right:12%;top:2%;height:0;pointer-events:none}
.pot .bb i{position:absolute;bottom:0;width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffe8cc 60%,#f4b26b);opacity:0}
.pot.boil .bb i{animation:bub 1.1s ease-out infinite}
.pot.boil{animation:jig .2s 5 linear}
@keyframes jig{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes bub{0%{opacity:0;transform:translateY(0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translateY(-260%) scale(1.1)}}
.pot .foam{position:absolute;left:-30%;right:-30%;bottom:62%;height:0;pointer-events:none}
.pot .foam i{position:absolute;bottom:0;left:50%;width:30%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffd8a8 55%,#ff922b);opacity:0}
.pot.blow .foam i{animation:blow 1.3s cubic-bezier(.15,.7,.3,1) both}
@keyframes blow{0%{opacity:0;transform:translate(-50%,0) scale(.2)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),var(--dy)) scale(var(--s,1.2))}}
.pot .boom{position:absolute;left:50%;top:-40%;font-size:calc(var(--pw,90px)*.7);transform:translate(-50%,0) scale(0);opacity:0;pointer-events:none}
.pot.blow .boom{animation:boom .9s cubic-bezier(.3,1.6,.5,1) both}
@keyframes boom{0%{opacity:0;transform:translate(-50%,0) scale(.2)}30%{opacity:1;transform:translate(-50%,-30%) scale(1.25)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}
/* the addition sentence (always left to right) */
.eq{grid-area:eq;justify-self:center;direction:ltr;unicode-bidi:isolate;min-height:46px;display:flex;align-items:center;gap:6px;background:rgba(255,253,245,.95);border-radius:999px;padding:2px 16px;font-weight:900;font-size:var(--ef,30px);color:#3b2410;box-shadow:0 4px 10px rgba(0,0,0,.2);z-index:4;white-space:nowrap}
.eq .n{color:#1d5bd6}.eq .op{color:#8a6a40}.eq .s{min-width:1.3em;text-align:center}
.eq.lo .s{color:#1c7ed6}.eq.hi .s{color:#e03131}.eq.ok{background:linear-gradient(#ebfbee,#b2f2bb)}.eq.ok .s{color:#2b8a3e}
.eq .ph{color:#b59a70;font-size:.8em}
.eq .bsay{width:32px;height:32px;line-height:32px;font-size:16px;margin-left:4px}
.instr{grid-area:instr;justify-self:center;max-width:100%;display:flex;align-items:center;gap:6px;background:rgba(255,253,245,.92);border-radius:16px;padding:2px 6px 2px 12px;font-weight:800;color:#3b2410;font-size:var(--if,17px);line-height:1.35;z-index:4;min-height:38px}
.instr.over{background:#ffe3e3;color:#c92a2a}.instr.talking{box-shadow:0 0 0 4px #ffd43b}
.instr .it{flex:1;text-align:center}
.tray{grid-area:tray;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:var(--tg,8px);background:linear-gradient(rgba(139,80,30,.82),rgba(110,60,20,.88));border-radius:22px;padding:8px;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 4px 10px rgba(0,0,0,.25);z-index:4;min-height:0}
.plate{position:relative;width:var(--ps,80px);height:var(--ps,80px);border-radius:50%;padding:0;background:radial-gradient(circle at 50% 42%,#fff 0 52%,#e9ecef 53% 60%,#fff 61% 66%,#ced4da 67%);box-shadow:0 5px 0 #8a5a2a,0 7px 10px rgba(0,0,0,.3);transition:transform .15s}
.plate img{position:absolute;left:12%;top:10%;width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.28));pointer-events:none}
.plate b{position:absolute;right:-6%;top:-8%;min-width:calc(var(--ps,80px)*.46);height:calc(var(--ps,80px)*.46);padding:0 4px;border-radius:999px;background:linear-gradient(#4c8dff,#1d5bd6);color:#fff;border:3px solid #fff;font-size:calc(var(--ps,80px)*.3);line-height:calc(var(--ps,80px)*.4);font-weight:900;direction:ltr;box-shadow:0 2px 4px rgba(0,0,0,.3);box-sizing:border-box;pointer-events:none}
.plate:active{transform:scale(.94)}
.plate.used img,.plate.used b{opacity:0}.plate.used{background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.35) 0 60%,rgba(255,255,255,.15) 61%);box-shadow:none}
.plate.glow{animation:glow 1s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 6px #ffe066,0 0 22px 8px #ffd43b,0 5px 0 #8a5a2a}}
.pf.glow{animation:glow 1s ease-in-out infinite;border-radius:50%}
.flyer{position:fixed;z-index:80;pointer-events:none;object-fit:contain}
.kp.locked .tray,.kp.locked .pan .load{pointer-events:none}
/* round banners inside each panel (they face their own player) */
.praise,.banner{position:absolute;left:50%;top:38%;z-index:9;transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none;text-align:center;font-weight:900;border-radius:24px;padding:8px 20px;white-space:nowrap}
.praise{background:linear-gradient(#fffbe6,#ffe066);border:4px solid #fff;color:#7a3c00;font-size:30px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.praise span{display:block;font-size:22px}.praise span img{height:26px;vertical-align:-5px}
.banner{background:rgba(255,255,255,.96);color:#3b2410;font-size:22px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.praise.on,.banner.on{animation:pop2 .45s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes pop2{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.kp.shake .scale{animation:shk .4s}
@keyframes shk{20%{transform:translateX(calc(-50% - 6px))}40%{transform:translateX(calc(-50% + 6px))}60%{transform:translateX(calc(-50% - 4px))}80%{transform:translateX(calc(-50% + 3px))}}
/* landscape single panel: stage | work */
.kp.land{grid-template-columns:56% 1fr;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"hud hud" "stage tray" "stage eq" "stage instr"}
/* very short panel (one phone held sideways in a duel) */
.kp.wide{grid-template-columns:40% 1fr;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hud hud" "stage tray" "stage eqi";padding-top:4px!important;gap:3px}
.kp.wide .eq{grid-area:eqi;justify-self:end;min-height:32px;--ef:20px}
.kp.wide .instr{display:none}
.kp.wide .hud{min-height:30px}.kp.wide .hav{height:24px}.kp.wide .hst{font-size:15px}.kp.wide .hst img{height:18px}
.kp.wide .tray{padding:4px;border-radius:16px}
.kp.compact .instr{--if:14px;min-height:30px}
.kp.compact .eq{min-height:36px}
.kp.compact .hud{min-height:34px}.kp.compact .hav{height:28px}
.kp.noking .king{display:none}.kp.noking .order{right:2px;max-width:100%}.kp.noking .order::after{display:none}
.kp.waiting .tray{opacity:.5}
/* popups in the middle */
.cpop.gold{background:linear-gradient(#fff3bf,#ffd43b)}
/* rules demo: 9 and 5 go onto the scale, it balances against 14 */
.demo{position:relative;width:270px;height:120px;margin:0 auto}
.demo .dsc{position:absolute;left:50%;bottom:0;width:170px;height:118px;transform:translateX(-50%)}
.demo .dsc .st-img{height:72%}
.demo .dbeam{position:absolute;left:6%;width:88%;top:30%;height:7px;border-radius:9px;background:linear-gradient(#fff6c8,#f2c94c 35%,#b07a1c 75%,#e7b83f);animation:dBeam 6s infinite;transform-origin:50% 50%}
.demo .dpan{position:absolute;top:30%;width:34%;animation:dPanL 6s infinite}
.demo .dpan img{width:100%;display:block}
.demo .dpan.r{animation-name:dPanR}
.demo .dpan.l{left:0}.demo .dpan.r{right:0}
.demo .dpan .wt{position:absolute;left:50%;bottom:24%;width:46%;transform:translateX(-50%)}.demo .dpan .wt img{width:100%}
.demo .dpan .wt b,.demo .df b{position:absolute;left:0;right:0;top:40%;text-align:center;font-weight:900;font-size:15px;color:#5a3200;direction:ltr}
.demo .df{position:absolute;width:34px;height:34px;z-index:3}
.demo .df img{width:100%;height:100%;object-fit:contain}
.demo .df b{top:auto;bottom:-4px;right:-8px;left:auto;background:#1d5bd6;color:#fff;border-radius:99px;padding:0 4px;border:2px solid #fff;font-size:12px;line-height:16px}
.demo .df1{animation:dF1 6s infinite}.demo .df2{animation:dF2 6s infinite}
.demo .deq{position:absolute;right:0;top:0;direction:ltr;font-weight:900;font-size:17px;background:#fff;border-radius:99px;padding:0 10px;color:#3b2410;box-shadow:0 2px 5px rgba(0,0,0,.15)}
.demo .deq i{font-style:normal;opacity:0;animation:dE1 6s infinite}.demo .deq i.e2{animation-name:dE2}.demo .deq i.e3{animation-name:dE3;color:#2b8a3e}
@keyframes dBeam{0%,20%{transform:rotate(14deg)}35%,55%{transform:rotate(5deg)}70%,100%{transform:rotate(0)}}
@keyframes dPanL{0%,20%{transform:translateY(-22px)}35%,55%{transform:translateY(-8px)}70%,100%{transform:translateY(-3px)}}
@keyframes dPanR{0%,20%{transform:translateY(16px)}35%,55%{transform:translateY(2px)}70%,100%{transform:translateY(-3px)}}
@keyframes dF1{0%,8%{left:80%;top:70%;opacity:0}12%{opacity:1;left:80%;top:70%}26%,100%{left:58px;top:12px;opacity:1}}
@keyframes dF2{0%,40%{left:88%;top:70%;opacity:0}44%{opacity:1;left:88%;top:70%}60%,100%{left:86px;top:12px;opacity:1}}
@keyframes dE1{0%,24%{opacity:0}28%,100%{opacity:1}}
@keyframes dE2{0%,58%{opacity:0}62%,100%{opacity:1}}
@keyframes dE3{0%,70%{opacity:0}74%,100%{opacity:1}}
.lvl-btn .ex{font-style:normal;font-weight:800;color:#1d5bd6;background:#fff;border-radius:8px;padding:0 6px;display:inline-block}

/* title: the king's kitchen; title + start button in the sky, the characters stay free */
#s-title{background:#f3c37a;justify-content:flex-start}
.splash{object-position:50% 60%}
.t-head{top:calc(var(--sat) + 2.2vh)}
.t-title{font-size:min(6.6vh,36px)}
#s-title #t-start{position:relative;margin:calc(var(--sat) + 2.2vh + min(6.6vh,36px)*2.6 + 4.6vh) 0 0;font-size:20px;padding:8px 24px;min-height:48px}
.splash-bg{position:absolute;inset:-20px;background:url(img/hall.webp?v=b3) center/cover;filter:blur(14px) brightness(.95);display:none}
@media (orientation:landscape){
 .splash-bg{display:block}
 .splash{object-fit:contain;object-position:50% 50%}
 .t-head{left:auto;right:3vw;top:calc(var(--sat) + 12vh);width:auto;max-width:34vw}
 .t-title{font-size:min(8vh,30px)}
 #s-title{justify-content:center;align-items:flex-end}
 #s-title #t-start{margin:24vh 3vw 0 0;font-size:17px;padding:6px 18px;min-height:40px}
}

/* v1b: king behind the counter, bigger food on the pan */
.king{top:auto;bottom:var(--kb,10px);right:-2%}
.order{top:var(--ot,2%);right:var(--or,30%);max-width:calc(100% - var(--or,30%) - 4px)}
.kp.noking .order{top:2px}
.lvl-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px 8px}
.lvl-btn b{font-size:22px}
.lvl-btn span{font-size:16px}
.lvl-btn .done{position:absolute;left:12px;top:8px}
.lvl-btn .vdef{align-self:flex-start}
#s-title .t-head{top:calc(var(--sat) + 56px)}
#s-title #t-start{margin-top:calc(var(--sat) + 56px + min(6.6vh,36px)*1.4 + 40px)}
@media (orientation:landscape){#s-title .t-head{top:calc(var(--sat) + 12vh)}#s-title #t-start{margin:30vh 3vw 0 0}}
.demo .dpan .dl{position:absolute;left:8%;right:8%;bottom:24%;display:flex;justify-content:center;gap:2px}
.demo .df{position:relative;opacity:0}
.demo .df1{animation:dF1 6s infinite}.demo .df2{animation:dF2 6s infinite}
@keyframes dF1{0%,10%{opacity:0;transform:translateY(-50px)}22%,100%{opacity:1;transform:none}}
@keyframes dF2{0%,40%{opacity:0;transform:translateY(-50px)}52%,100%{opacity:1;transform:none}}
.demo .deq{right:auto;left:50%;transform:translateX(-50%);top:-4px;font-size:19px}

.pan .load .pf{flex:none}
.eq .s.tg{color:#8a6a40}
.eq .ph{color:#e8590c;font-size:1em;min-width:.9em;text-align:center;animation:qp 1.4s ease-in-out infinite}
@keyframes qp{50%{transform:scale(1.18)}}
.pan .load{bottom:13%}.pan .wt{bottom:12%;width:46%}.pan .wt b{top:50%}
.pan .wt b{top:57%;color:#4a2a00;text-shadow:0 1px 0 rgba(255,240,180,.8)}
.panels.duel .kp:not(.wide) .instr{display:none}
.kp.wide{grid-template-columns:52% 1fr}
@media (orientation:landscape){#s-title{align-items:flex-start;justify-content:flex-start}#s-title #t-start{margin:calc(var(--sat) + 12vh + 90px) calc(3vw + 60px) 0 0}}

/* ===== one-phone duel: a thick golden wooden plank across the middle =====
   Each player's score row (.hud) is one half of the plank: the bottom player's row is its lower half,
   the top player's (rotated) row its upper half, so each score reads from its own side.
   The shading is symmetric about the middle (light glossy centre, darker rounded edges), so the two halves meet as one plank. */
.panels.duel .kp{padding-top:0}
.panels.duel .kp.wide{padding-top:0!important}
.panels.duel .hud{position:relative;height:40px;min-height:40px;margin:-1px 0 0;padding:0 56px;border-radius:0 0 22px 22px;
  background:
    linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0) 9px),
    repeating-linear-gradient(178deg,rgba(130,62,0,0) 0 7px,rgba(130,62,0,.10) 7px 8px,rgba(130,62,0,0) 8px 13px),
    radial-gradient(120% 140% at 50% -10%,rgba(255,250,220,.45),rgba(255,250,220,0) 55%),
    linear-gradient(#ffe39a 0%,#f7c35a 30%,#e59a2f 68%,#b8691a 100%);
  box-shadow:inset 0 -4px 0 rgba(110,55,0,.42),inset 0 -6px 8px -4px rgba(90,40,0,.35),0 7px 12px -3px rgba(70,35,0,.5),0 0 0 2px rgba(255,236,170,.35)}
.panels.duel .kp.compact .hud{height:36px;min-height:36px}
.panels.duel .kp.wide .hud{height:32px;min-height:32px;border-radius:0 0 16px 16px}
/* score pill and race bar sitting on the plank */
.panels.duel .me{background:linear-gradient(#ffffff,#fff3d6);border:2px solid #fff8e6;box-shadow:0 2px 0 rgba(140,70,0,.45),0 3px 8px rgba(80,40,0,.3)}
.panels.duel .hav{height:30px}
.panels.duel .kp.wide .hav{height:24px}
.panels.duel .prog{height:14px;background:rgba(100,48,0,.38);border:2px solid rgba(255,240,200,.75);box-shadow:inset 0 2px 3px rgba(60,25,0,.45)}
.panels.duel .prog i{background:linear-gradient(90deg,#ff8a1f,#ffd43b 60%,#fff3a0)}
/* each half its own tint, so it is clear whose side is whose */
.panels.duel .kp:not(.flip){background:linear-gradient(rgba(60,140,255,.46),rgba(60,140,255,.26) 22%,rgba(60,140,255,.30));box-shadow:inset 0 0 26px 2px rgba(40,120,255,.55)}
.panels.duel .kp.flip{background:linear-gradient(rgba(255,90,165,.46),rgba(255,90,165,.26) 22%,rgba(255,90,165,.30));box-shadow:inset 0 0 26px 2px rgba(255,70,160,.55)}
/* the back and ? buttons sit on the two ends of the plank */
body.duel-mid .noa-back,body.duel-mid .noa-help{box-shadow:0 0 0 3px rgba(140,70,0,.35),0 4px 10px rgba(60,30,0,.45)}
body.duel-mid .noa-back{right:8px}
body.duel-mid .noa-help{left:8px}