@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;600;700;800;900&display=swap');
:root{font-family:Heebo,Arial,sans-serif;color:#fff;background:#120e1f;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:radial-gradient(circle at 50% 0%,#2d2145,#120e1f 74%)}
button{font:inherit;cursor:pointer;border:0;touch-action:manipulation}
button:disabled{cursor:not-allowed;opacity:.43}
.shell{max-width:1320px;margin:0 auto;padding:12px 12px max(14px,env(safe-area-inset-bottom))}
.topline{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:32px;font-size:14px}
.brand{font-weight:900;letter-spacing:.01em}.spark{color:#ffc978}.prototype{color:#b7adc7;font-size:12px}
.game-frame{background:#03040a;border:1px solid #816aa0;border-radius:17px;overflow:hidden;box-shadow:0 20px 60px #000a}
.stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;outline:0;background:#0c0b18}
.room-backdrop{position:absolute;inset:0;background:url('assets/ship-kitchen.webp') center/100% 100% no-repeat;transform:scale(1.005)}
.stage.hit .room-backdrop{animation:shake .43s ease-out}.stage.hit:after{content:'';position:absolute;inset:0;z-index:12;background:#ff9d5f55;animation:hitFlash .5s forwards;pointer-events:none}
.corridor-screen{position:absolute;left:31.4%;top:30.8%;width:19.5%;height:26.6%;z-index:1;overflow:hidden;clip-path:polygon(10% 0,90% 0,100% 12%,100% 100%,0 100%,0 12%);opacity:.75;mix-blend-mode:screen}
.corridor-screen video{position:absolute;width:100%;height:100%;object-fit:cover;display:none}
.corridor-screen.video-on video{display:block}.corridor-screen.video-on .corridor-fallback{display:none}
.corridor-fallback{position:absolute;inset:0;background:linear-gradient(180deg,#23345177,#4c365166);overflow:hidden}
.figure{position:absolute;bottom:5%;height:44%;width:11%;border-radius:40% 40% 20% 20%;background:#14172a;filter:drop-shadow(0 0 5px #88bafa);opacity:.75}
.figure:before{content:'';position:absolute;width:85%;aspect-ratio:1;top:-24%;left:8%;border-radius:50%;background:inherit}
.figure.ortal{left:24%;animation:walkBack 7s ease-in-out infinite alternate}.figure.alien{right:24%;height:50%;background:#152532;animation:walkBack 8.3s ease-in-out infinite alternate-reverse}
.corridor-screen.action .figure.ortal{animation:actionOrtal .9s ease-in-out 3}.corridor-screen.action .figure.alien{animation:actionAlien .9s ease-in-out 3}
.corridor-occlusion{position:absolute;left:29.8%;top:28.5%;width:22%;height:31%;z-index:2;pointer-events:none;border:clamp(2px,.4vw,6px) solid #4d425f55;border-bottom:0;clip-path:polygon(0 0,100% 0,100% 100%,94% 100%,94% 12%,6% 12%,6% 100%,0 100%)}
.space-glint{position:absolute;inset:4% 1% 61% 63%;z-index:2;pointer-events:none;background:radial-gradient(circle at 75% 27%,#fff9 0 1px,transparent 2px),radial-gradient(circle at 35% 65%,#c7d9ff8c 0 1px,transparent 2px);animation:twinkle 5s ease-in-out infinite alternate}
.laser{position:absolute;z-index:3;left:72%;top:15%;width:23%;height:2px;opacity:0;background:linear-gradient(90deg,transparent,#ff5893,#fff,transparent);box-shadow:0 0 12px 4px #ff468a;transform:rotate(-14deg);pointer-events:none}.laser.fire{animation:laser .55s ease-out}
.flash{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;background:radial-gradient(circle at 87% 30%,#ffb96777,transparent 36%)}.flash.on{animation:flash .5s ease-out}
.bread-layer{position:absolute;inset:0;z-index:5;pointer-events:none}.bread{position:absolute;width:8%;aspect-ratio:1.4;transform:translate(-50%,-50%);filter:drop-shadow(0 7px 4px #100a1db0);will-change:left,top}.bread img{width:100%;height:100%;object-fit:contain}.bread.landed{animation:breadSettle .5s ease-out}
.foot-shadow{position:absolute;z-index:6;left:44%;top:93%;width:12%;height:3%;border-radius:50%;background:radial-gradient(ellipse,#19102b99,transparent 70%);transform:translate(-50%,-50%);pointer-events:none;will-change:left,top,width}
.batchen{position:absolute;z-index:7;bottom:3%;left:44%;width:22%;aspect-ratio:2/3;transform:translateX(-50%);will-change:left;filter:drop-shadow(3px 7px 8px #150c25aa)}
.batchen-art{position:relative;width:100%;height:100%;container-type:inline-size;transform-origin:50% 86%}
.batchen-art>img{width:100%;height:100%;display:block;object-fit:contain;user-select:none}
.batchen.walk .batchen-art{animation:step .27s ease-in-out infinite alternate}.batchen.idle .batchen-art{animation:breath 3.7s ease-in-out infinite}.batchen.holding .batchen-art{animation:reverent .9s ease-in-out infinite alternate}.batchen.kissing .batchen-art{animation:kissBend .58s ease-in-out}
.shirt-print{position:absolute;left:38%;top:29.2%;width:28%;height:10%;direction:rtl;display:flex;flex-direction:column;justify-content:center;align-items:center;white-space:nowrap;color:#5b2636;font-size:5.4cqw;line-height:1.03;font-weight:900;letter-spacing:-.04em;text-align:center;text-shadow:0 .4px #a17b7f;transform:rotate(1.5deg);pointer-events:none}
.beauty-mark{position:absolute;left:53.5%;top:16.0%;width:.9%;aspect-ratio:1;border-radius:50%;background:#713d38;box-shadow:0 0 0 .3px #301b1a;pointer-events:none}
.held-bread{position:absolute;left:49%;top:70%;width:8%;aspect-ratio:1.4;z-index:9;display:none;transform:translate(-50%,-50%);filter:drop-shadow(0 5px 7px #ffc17a8a)}.held-bread.visible{display:block}.held-bread img{width:100%;height:100%;object-fit:contain}
.blessing{position:absolute;z-index:9;left:44%;top:62%;color:#ffe394;font-size:clamp(18px,3.3vw,46px);text-shadow:0 0 20px #ffe992;opacity:0;pointer-events:none}.blessing.show{animation:bless .7s ease-out}
.hud{position:absolute;z-index:11;top:2.5%;left:2.5%;display:flex;gap:6px}.hud-block{min-width:68px;padding:5px 9px;border:1px solid #e6c27977;border-radius:10px;background:#140d2dbb;backdrop-filter:blur(7px);text-align:center}.hud-block small{display:block;color:#f8e6bb;font-size:clamp(8px,1.1vw,12px)}.hud-block strong{font-size:clamp(15px,2.1vw,25px);line-height:1}
.toast{position:absolute;z-index:12;right:3%;bottom:5%;max-width:50%;padding:7px 12px;border-radius:9px;background:#1b123bbf;color:#fff4d8;font-size:clamp(10px,1.5vw,18px);font-weight:800;opacity:0;transform:translateY(7px);transition:opacity .2s,transform .2s;pointer-events:none}.toast.show{opacity:1;transform:none}
.intro-panel{position:absolute;z-index:30;inset:0;background:linear-gradient(90deg,#100b2394,#100b23bf 52%,#100b23bb),url('assets/shedai-exterior.webp') center/cover;display:flex;align-items:center;justify-content:flex-start;padding:5% 7%;transition:opacity .65s,transform .65s}.intro-panel.exit{opacity:0;transform:scale(1.14);pointer-events:none}
.intro-copy{position:relative;z-index:1;width:min(56%,680px);text-shadow:0 3px 10px #090719}.intro-copy .eyebrow{color:#ffe2a5;font-size:clamp(11px,1.5vw,21px);font-weight:800}.intro-copy h1{font-size:clamp(30px,4.4vw,70px);line-height:1.06;margin:.1em 0 .15em;color:#fff1c3}.intro-copy p{font-size:clamp(13px,1.7vw,22px);line-height:1.35;margin:0 0 1.1em}.intro-actions{display:flex;flex-wrap:wrap;gap:9px}.intro-actions button{border-radius:999px;padding:9px 16px;font-weight:900;font-size:clamp(11px,1.35vw,18px)}.intro-actions .primary{color:#20112b;background:linear-gradient(#ffeec2,#efbb66);box-shadow:0 6px 24px #f8b66666}.intro-actions .secondary{background:#140d2cc9;border:1px solid #d9bc80;color:#fff7e9}.mic-status{display:block;min-height:1.7em;font-size:clamp(10px,1.1vw,14px);color:#f3dcb9;padding-top:8px}
.start-curtain{position:absolute;z-index:20;inset:0;background:#080717bb;display:grid;place-items:center;font-size:clamp(26px,5vw,66px);font-weight:900;color:#ffeab8;text-shadow:0 0 25px #fa8d55}.start-curtain[hidden]{display:none}
.controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 3px 0}.move-controls{display:flex;align-items:center;gap:7px}.move-controls button{width:56px;height:48px;border-radius:12px;background:#372d50;color:#ffe3ab;font-size:24px;border:1px solid #ac91c5}.move-controls button:active{background:#63506d}.depth-controls{display:flex;flex-direction:column;gap:3px}.depth-controls button{width:45px;height:23px;font-size:14px}.kiss-button{min-width:180px;height:48px;border-radius:99px;background:linear-gradient(180deg,#ffe8ae,#e6a74b);color:#2d1735;font-weight:900;box-shadow:0 5px 15px #0007}.kiss-button.ready{animation:callToKiss 1.4s ease-in-out infinite}.instruction{flex:1;color:#e5d4ea;text-align:center;font-size:clamp(12px,1.4vw,17px);font-weight:700}.pause-button{border-radius:10px;background:#372d50;color:#fff;padding:10px}.pause-button[hidden]{display:none}
.note{color:#b4a4bd;font-size:12px;text-align:center;margin:8px 0 0}
@keyframes shake{0%,100%{transform:scale(1.005)}18%{transform:translate(1.1%,-.7%) scale(1.01)}35%{transform:translate(-.9%,.6%) scale(1.01)}55%{transform:translate(.5%,.2%) scale(1.01)}75%{transform:translate(-.3%,-.3%) scale(1.01)}}
@keyframes hitFlash{to{background:transparent}}@keyframes flash{20%{opacity:1}100%{opacity:0}}@keyframes laser{20%{opacity:1}100%{opacity:0;transform:translate(-36%,14%) rotate(-14deg)}}@keyframes twinkle{from{opacity:.25}to{opacity:1}}
@keyframes walkBack{from{transform:translateX(-18%) rotate(-4deg)}to{transform:translateX(30%) rotate(5deg)}}@keyframes actionOrtal{50%{transform:translateX(150%) rotate(28deg)}}@keyframes actionAlien{50%{transform:translateX(-130%) rotate(-30deg)}}
@keyframes breadSettle{0%{transform:translate(-50%,-60%) rotate(-13deg)}55%{transform:translate(-50%,-46%) rotate(8deg)}100%{transform:translate(-50%,-50%) rotate(0)}}
@keyframes breath{50%{transform:translateY(-.35%) scale(1.003)}}@keyframes step{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-1.3%) rotate(1deg)}}@keyframes reverent{from{transform:translateY(0)}to{transform:translateY(-.65%)}}@keyframes kissBend{40%{transform:translateY(-1.4%) rotate(-3deg)}75%{transform:translateY(.6%) rotate(2deg)}}@keyframes bless{0%{opacity:0;transform:translateY(8px) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-50px) scale(1.4)}}@keyframes callToKiss{50%{box-shadow:0 0 0 7px #fce4af33,0 5px 15px #0007}}
@media(max-width:700px){.shell{padding:5px 5px max(5px,env(safe-area-inset-bottom))}.topline{min-height:27px;padding:0 5px}.prototype{display:none}.game-frame{border-radius:8px}.stage{aspect-ratio:10/9}.room-backdrop{background-position:50% 50%}.intro-panel{background-position:50%}.intro-copy{width:92%;align-self:flex-end;margin-bottom:5%}.intro-copy h1{font-size:clamp(28px,7vw,54px)}.intro-copy p{font-size:clamp(12px,3vw,17px)}.intro-actions button{font-size:12px}.batchen{width:37%;bottom:3%;left:44%}.held-bread{width:14%}.bread{width:13%}.controls{flex-wrap:wrap;justify-content:center}.instruction{order:3;flex-basis:100%;font-size:13px}.move-controls button{width:53px;height:55px}.depth-controls button{height:26px;width:42px;font-size:13px}.kiss-button{height:55px;min-width:165px}.note{font-size:10px}.hud-block{min-width:56px;padding:4px 6px}.hud-block small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.space-glint,.batchen-art,.figure{animation-duration:10s!important}.room-backdrop{animation:none!important}}

/* Mobile-first portrait game. Desktop remains a narrow development preview. */
.shell{max-width:500px;padding:5px 5px max(5px,env(safe-area-inset-bottom))}
.topline{min-height:26px;padding:0 5px;font-size:12px}.prototype{display:none}
.game-frame{border-radius:10px}
.stage{aspect-ratio:9/16}
.room-backdrop{background-image:url('assets/ship-kitchen-portrait.webp');background-size:100% 100%;background-position:center}
.corridor-screen{left:35.4%;top:26.3%;width:28%;height:17.5%}
.corridor-occlusion{left:32.2%;top:24.1%;width:34.5%;height:22%}
.space-glint{inset:12% 1% 66% 64%}
.laser{left:72%;top:19%;width:22%}
.hud{top:1.4%;left:1.5%}
.hud-block{min-width:55px;padding:3px 6px}.hud-block small{font-size:9px}.hud-block strong{font-size:17px}
.batchen{width:46%;left:50%;bottom:3%}
.held-bread{width:18%}.bread{width:15%;aspect-ratio:1.4;pointer-events:auto;cursor:pointer;touch-action:manipulation}
.bread:before{content:'';position:absolute;inset:-30%;border-radius:50%}
.bread.selected{filter:drop-shadow(0 0 8px #ffdfa3) drop-shadow(0 0 15px #ffc479)}
.bread.saved{pointer-events:none;filter:drop-shadow(0 3px 3px #201222aa)}
.foot-shadow{width:25%;height:1.8%}
.shirt-print{color:#652938}
.toast{right:3%;bottom:7%;max-width:78%;font-size:clamp(12px,3.7vw,17px)}
.intro-panel{padding:0 6%;background:linear-gradient(180deg,#100b237d,#100b23a8 53%,#100b23eb),url('assets/shedai-exterior.webp') center/cover}
.sesame-galaxy{position:absolute;top:3%;left:-14%;width:128%;height:65%;object-fit:contain;opacity:.78;mix-blend-mode:screen;pointer-events:none;animation:galaxyTurn 85s linear infinite}
.intro-copy{align-self:flex-end;width:100%;margin-bottom:11%;text-align:center}
.intro-copy .eyebrow{font-size:clamp(10px,2.8vw,14px);color:#ffe8b1}
.game-logo{display:flex;flex-direction:column;align-items:center;margin:.1em 0 .2em!important;color:#fff0c7!important;font-weight:900;line-height:.81!important;letter-spacing:-.06em;font-size:clamp(55px,15vw,84px)!important;-webkit-text-stroke:1.4px #5b2d36;text-shadow:0 3px 0 #aa6539,0 7px 0 #52253c,0 11px 16px #08020f,0 0 28px #ffca69}
.game-logo span:last-child{font-size:1.08em;color:#ffe29a}
.intro-copy p{font-size:clamp(13px,3.8vw,18px);line-height:1.3;margin:.55em auto 1.2em;max-width:340px}
.intro-actions{justify-content:center;flex-direction:column;align-items:center}.intro-actions button{font-size:clamp(13px,3.7vw,17px);min-width:82%;padding:11px 16px}
.intro-actions .secondary{border:0;text-decoration:underline;color:#f9e9c6;background:transparent;box-shadow:none;padding:4px}
.mic-status{font-size:12px}
.controls{padding:6px 4px 0;justify-content:center;flex-wrap:wrap;gap:5px}.instruction{font-size:clamp(13px,3.7vw,17px);flex-basis:100%;order:0;min-height:22px}.kiss-button{order:1;height:45px;min-width:70%;font-size:14px}.pause-button{order:2;padding:6px 8px;font-size:11px}.note{font-size:10px;line-height:1.2;margin:5px 5px 0}
.stage.slowmo:before{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(circle at 50% 72%,#ffe49a11,#10071e66);animation:holyMoment 1.35s ease-in-out forwards}
.stage.slowmo .batchen{filter:drop-shadow(0 0 16px #ffdf91aa) drop-shadow(3px 7px 8px #150c25aa)}
.kiss-cut-in{position:absolute;z-index:14;inset:0;pointer-events:none;display:grid;place-items:end center;opacity:0;background:radial-gradient(circle at 50% 57%,#ffe5aa33,#150c2ed9 67%)}
.kiss-cut-in img{width:115%;height:78%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 23px #13091a)}
.stage.slowmo .kiss-cut-in{animation:cutIn 1.35s ease-in-out both}
.stage.slowmo .kiss-cut-in img{animation:holyPush 1.35s ease-out both}
@keyframes galaxyTurn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes holyMoment{0%{opacity:0}38%{opacity:1}100%{opacity:0}}
@keyframes cutIn{0%,100%{opacity:0}15%,85%{opacity:1}}
@keyframes holyPush{0%{transform:scale(.92)}100%{transform:scale(1.09)}}
@media(max-width:700px){.stage{aspect-ratio:9/16}.room-backdrop{background-size:100% 100%}.batchen{width:46%}.held-bread{width:18%}.bread{width:15%}.intro-copy{align-self:flex-end;margin-bottom:11%}}

/* Exterior airlock: the entrance is on Shadai herself, not on the galley window. */
[hidden]{display:none!important}
.intro-panel{background:linear-gradient(180deg,#080d2600 0%,#080d2600 48%,#080d26b8 68%,#07071bea 100%),url('assets/shedai-exterior-entrance.webp') center/100% 100% no-repeat}
.intro-panel .sesame-galaxy{width:90%;height:50%;left:5%;top:0;opacity:.12;mix-blend-mode:screen}
.intro-copy{margin-bottom:2%;padding:7px;border-radius:18px;background:#0d0b22a6;backdrop-filter:blur(3px)}
.intro-copy .eyebrow{font-size:clamp(10px,2.6vw,13px)}
.intro-copy .game-logo{font-size:clamp(44px,12vw,62px)!important}
.intro-copy p{font-size:clamp(12px,3.3vw,15px);margin:.4em auto .8em}
.intro-actions button{font-size:clamp(12px,3.2vw,15px);min-width:80%;padding:8px 12px}
.exterior-hatch{position:absolute;z-index:2;left:45.4%;top:46%;width:9.2%;height:13.2%;overflow:hidden;border:2px solid #1b273d;border-radius:22% 22% 13% 13%;background:radial-gradient(circle at 50% 60%,#ffd38a88,#25284b 37%,#080c1e 72%);box-shadow:inset 0 0 11px #070814,0 0 10px #5dcfff88;pointer-events:none}
.exterior-hatch span{position:absolute;top:0;width:52%;height:100%;background:linear-gradient(90deg,#10172c,#35465e 35%,#1b233b 72%,#0d1529);border:1px solid #506982;transition:transform .74s cubic-bezier(.16,.8,.23,1)}
.hatch-left{left:0;border-right:1px solid #8eb4c9}.hatch-right{right:0;border-left:1px solid #8eb4c9}
.exterior-hatch.open .hatch-left{transform:translateX(-96%)}.exterior-hatch.open .hatch-right{transform:translateX(96%)}
.exterior-hatch.open{box-shadow:0 0 20px 5px #ffd59088,inset 0 0 14px #070814}
.door-prompt{font-weight:900;color:#ffedbb;font-size:clamp(14px,3.8vw,18px);text-shadow:0 2px 6px #120818;margin:6px 0}
.door-touch-button{background:#1f2046c9;border:1px solid #efd291;border-radius:99px;color:#ffebbf;padding:7px 13px;font-size:12px;font-weight:800}

/* Calm baking keyframes make the story legible before gameplay starts. */
.baking-sequence{position:absolute;inset:0;z-index:15;opacity:0;pointer-events:none;transition:opacity .62s;background:#10132e}
.stage.baking .baking-sequence{opacity:1}
.baking-sequence img{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}
.braiding-frame{animation:preludeBreath 4.8s ease-in-out infinite alternate}
.oven-frame{opacity:0;transition:opacity .9s ease-in-out;animation:preludeBreath 4.8s ease-in-out infinite alternate-reverse}
.stage.baking-oven .oven-frame{opacity:1}
.baking-caption{position:absolute;bottom:8%;right:5%;left:5%;padding:7px 12px;border-radius:12px;background:#140d2fc9;color:#fff0ca;font-size:clamp(13px,3.7vw,18px);font-weight:900;text-align:center;text-shadow:0 2px 5px #000}
.emergency-light{position:absolute;inset:0;z-index:16;pointer-events:none;opacity:0;background:radial-gradient(circle at 21% 2%,#ff3b4b77,transparent 30%),radial-gradient(circle at 76% 4%,#ff425f88,transparent 33%),linear-gradient(180deg,#da14312b,transparent 45%)}
.stage.alert .emergency-light{animation:emergencyPulse 1.8s ease-in-out infinite}
@keyframes preludeBreath{from{transform:scale(1.01)}to{transform:scale(1.035) translateY(-.5%)}}
@keyframes emergencyPulse{0%,100%{opacity:.12}18%,48%{opacity:.68}25%,55%{opacity:.22}}

/* Laser fire stays inside the exterior window; the cabin itself responds to hits. */
.battle-window{position:absolute;left:62%;top:6%;width:38%;height:26%;z-index:2;overflow:hidden;clip-path:polygon(27% 3%,100% 0,100% 90%,0 100%);pointer-events:none}
.stage.alert .battle-window{z-index:17}
.stage.alert .battle-window:after{content:'';position:absolute;right:2%;top:37%;width:25%;aspect-ratio:1;border:2px solid #c8ebff99;border-radius:50%;opacity:0;box-shadow:0 0 14px 6px #80d6ff88;animation:shieldRipple 2.5s ease-out infinite}
.battle-window i{position:absolute;left:105%;width:62%;height:2px;border-radius:100%;background:linear-gradient(90deg,transparent,#ff739f 23%,#fff4dc 55%,#ff437d 75%,transparent);box-shadow:0 0 8px 3px #f9478f;transform:rotate(-20deg);opacity:0;animation:windowFire 6.4s linear infinite}
.battle-window i:nth-child(1){top:24%;animation-delay:-.6s}.battle-window i:nth-child(2){top:55%;animation-delay:-3.1s;animation-duration:8.1s}.battle-window i:nth-child(3){top:79%;animation-delay:-5.4s;animation-duration:9.2s}
.stage.hit{animation:shipJolt .56s cubic-bezier(.2,.05,.4,1)}
.stage.hit .room-backdrop{animation:none}
.stage.playing .space-glint{animation:twinkle 3.2s ease-in-out infinite alternate}
.table-breads{position:absolute;left:69%;top:39.8%;width:23%;height:5.4%;z-index:4;pointer-events:none;filter:drop-shadow(0 2px 3px #221728aa)}
.table-breads img{position:absolute;bottom:0;width:48%;height:100%;object-fit:contain}.table-breads img:nth-child(1){left:0;transform:rotate(-10deg)}.table-breads img:nth-child(2){left:27%;bottom:7%;transform:rotate(4deg)}.table-breads img:nth-child(3){left:52%;transform:rotate(13deg)}
.table-breads img.fallen{visibility:hidden}
.table-breads.jolt{animation:tableJolt .55s ease-out}
.bread.falling{pointer-events:none;filter:drop-shadow(0 8px 5px #130d2ac7)}
@keyframes shipJolt{0%,100%{transform:translate(0,0) rotate(0)}12%{transform:translate(1.2%,-.45%) rotate(.35deg)}25%{transform:translate(-1.8%,.75%) rotate(-.65deg)}40%{transform:translate(1%,.22%) rotate(.3deg)}60%{transform:translate(-.7%,.3%) rotate(-.15deg)}82%{transform:translate(.28%,-.18%)}}
@keyframes tableJolt{0%,100%{transform:none}25%{transform:translateX(7%) rotate(8deg)}45%{transform:translateX(-6%) rotate(-8deg)}70%{transform:translateX(3%) rotate(4deg)}}
@keyframes windowFire{0%,12%{left:108%;opacity:0}14%{opacity:1}21%{left:-75%;opacity:1}24%,100%{left:-85%;opacity:0}}
@keyframes shieldRipple{0%,31%{opacity:0;transform:scale(.2)}34%{opacity:.95}70%,100%{opacity:0;transform:scale(3.5)}}
@media(prefers-reduced-motion:reduce){.battle-window i{animation:none}.stage.hit{animation-duration:.2s}.table-breads.jolt{animation-duration:.2s}}

/* ---- upgrade 29.09: pressure, lives, ending, back door ---- */
.batchen,.batchen *{pointer-events:none}
.bread.landed{pointer-events:auto}
.rule-ring{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.rule-ring:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(#ffd98a calc(var(--left,1)*360deg),#ffffff14 0);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);opacity:.9}
.bread.urgent .rule-ring:before{background:conic-gradient(#ff5a4a calc(var(--left,1)*360deg),#ffffff14 0)}
.bread.urgent{animation:urgent .35s ease-in-out infinite alternate}
@keyframes urgent{to{filter:drop-shadow(0 0 10px #ff6a55) brightness(1.08)}}
.bread.lost{animation:lost .7s ease-in forwards;pointer-events:none}
@keyframes lost{40%{transform:translate(-50%,-50%) scale(1.15);filter:grayscale(1) brightness(.6)}to{transform:translate(-50%,-80%) scale(.2);opacity:0;filter:grayscale(1)}}
.lives{display:flex;gap:2px;height:18px;align-items:center}.lives img{height:100%;width:auto}.lives img.gone{filter:grayscale(1) brightness(.5);opacity:.45}
.score-pop{position:absolute;z-index:14;transform:translate(-50%,0);font:900 clamp(16px,4.6vw,26px)/1 Heebo,Arial,sans-serif;color:#ffe29a;text-shadow:0 2px 0 #6b3b12,0 0 12px #000a;pointer-events:none;animation:pop 1.1s ease-out forwards;white-space:nowrap}
@keyframes pop{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%{opacity:1;transform:translate(-50%,0) scale(1.1)}to{opacity:0;transform:translate(-50%,-40px) scale(1)}}
.stage.hit{animation:bigShake .45s ease-out}
@keyframes bigShake{15%{transform:translate(calc(-6px*var(--shake,1)),calc(3px*var(--shake,1))) rotate(calc(-.6deg*var(--shake,1)))}35%{transform:translate(calc(5px*var(--shake,1)),calc(-3px*var(--shake,1))) rotate(calc(.5deg*var(--shake,1)))}55%{transform:translate(calc(-3px*var(--shake,1)),calc(2px*var(--shake,1)))}75%{transform:translate(calc(2px*var(--shake,1)),-1px)}}
/* the back door is cut from the background itself, so closed it looks exactly like the painted door */
.back-door{position:absolute;left:37.4%;top:23.2%;width:13.6%;height:13.4%;z-index:1;overflow:hidden;pointer-events:none}
.back-space{position:absolute;inset:0;background:radial-gradient(circle at 70% 40%,#3b6d8a 0 8%,transparent 9%),radial-gradient(circle at 30% 70%,#fff 0 1px,transparent 2px),radial-gradient(circle at 60% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 80% 80%,#fff 0 1px,transparent 2px),radial-gradient(ellipse at 50% 50%,#2a1850,#07060f 70%)}
.door-wind{position:absolute;inset:-40%;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 50%,#ffffff10 0 6deg,transparent 6deg 18deg);transition:opacity .3s}
.back-door.open .door-wind{opacity:1;animation:suck 1.2s linear infinite}
@keyframes suck{to{transform:rotate(40deg) scale(.85)}}
.door-half{position:absolute;top:0;width:50.5%;height:100%;background-image:url('assets/ship-kitchen-portrait.webp');background-size:1456.03% 746.27%;transition:transform .7s cubic-bezier(.6,0,.2,1)}
.door-half.l{left:0;background-position:40.158% 26.790%}
.door-half.r{right:0;background-position:47.387% 26.790%}
.back-door.open .door-half.l{transform:translateX(-100%)}.back-door.open .door-half.r{transform:translateX(100%)}
.game-over{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#0b0716cc;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.over-card{display:grid;justify-items:center;gap:8px;width:min(86%,360px);padding:22px 18px;border-radius:22px;background:linear-gradient(170deg,#2a1840,#140c22);border:1px solid #e4bc7655;box-shadow:0 30px 70px #000b;text-align:center;color:#f7ecd8}
.over-score{font:900 clamp(58px,17vw,96px)/1 Heebo,Arial,sans-serif;color:#ffdc8f;text-shadow:0 4px 0 #6b3b12}
.over-label{font-weight:700;margin-top:-4px}.over-best{font-size:13px;color:#e4bc76}.over-line{margin:4px 0 8px;font-size:15px;color:#ddd0c4}
.over-card button{width:100%}.over-series{margin-top:4px;font-size:13px;color:#e4bc76;text-decoration:underline}
.game-over .eyebrow{font-size:11px;letter-spacing:1px;color:#e4bc76}
.over-card button{font:800 16px/1 Heebo,Arial,sans-serif;min-height:48px;border-radius:999px;cursor:pointer}
.over-card #again-button{color:#20112b;background:linear-gradient(#ffeec2,#efbb66);border:0;box-shadow:0 6px 24px #f8b66666}
.over-card #share-button{color:#fff7e9;background:#140d2cc9;border:1px solid #d9bc80}

.rule-ring{display:grid;place-items:center;font:900 clamp(13px,3.6vw,18px)/1 Heebo,Arial,sans-serif;color:#fff4d6;text-shadow:0 1px 3px #000,0 0 6px #000}
.bread.urgent .rule-ring{color:#ffd0c8}

/* super move: בל תשחית */
.super-button{position:relative;overflow:hidden;min-width:92px;height:55px;border-radius:999px;border:1px solid #d9bc8066;background:#1a1030;color:#b9a98f;font:900 15px/1 Heebo,Arial,sans-serif;cursor:pointer}
.super-button:disabled{cursor:default}
.super-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#6b3b12,#c98a32);opacity:.55;transition:width .4s}
.super-label{position:relative}
.super-button.ready{color:#20112b;background:linear-gradient(#fff3cf,#f0b653);border-color:#fff3cf;animation:superReady .8s ease-in-out infinite alternate}
.super-button.ready .super-fill{opacity:0}
@keyframes superReady{to{box-shadow:0 0 22px #ffcf6e,0 0 4px #fff}}
.super-title{position:absolute;inset:0;z-index:25;display:grid;place-content:center;justify-items:center;pointer-events:none;opacity:0;
  font:900 clamp(56px,18vw,120px)/.9 Heebo,Arial,sans-serif;color:#fff1c4;text-shadow:0 5px 0 #7a3d0e,0 0 30px #ffb43c,0 0 80px #ff7a1a}
.super-title span:last-child{color:#ffd46b}
.super-title.show{animation:slam 1.6s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes slam{0%{opacity:0;transform:scale(2.6) rotate(-6deg)}14%{opacity:1;transform:scale(.92) rotate(-3deg)}22%{transform:scale(1.04) rotate(-3deg)}75%{opacity:1;transform:scale(1) rotate(-3deg)}100%{opacity:0;transform:scale(1.15) rotate(-3deg)}}
.stage.super:before{content:'';position:absolute;inset:0;z-index:20;pointer-events:none;background:radial-gradient(circle at 50% 50%,#fff6d655,#ffb43c33 40%,transparent 70%);animation:hitFlash 1.2s forwards}
.music-button{min-width:44px;font-size:18px}
@media(max-width:700px){.super-button{min-width:84px;height:55px;font-size:14px}.kiss-button{min-width:140px}}

/* Ortal's corridor behind the back door: three short clips (fight loop, open, close). The door and glass are inside the clips, so the painted door halves step aside once a clip is showing. */
.door-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .1s linear;pointer-events:none}
.door-clip.on{opacity:1}
.back-door.video-on .door-half,.back-door.video-on .door-wind{display:none}
.back-door.zap:after{content:'';position:absolute;inset:0;z-index:999;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#ff3d6e00 35%,#ff3d6e7a);animation:doorZap .32s ease-out forwards}
@keyframes doorZap{from{opacity:1}to{opacity:0}}

/* challot on the floor are always drawn in front of Bat-Chen, so none can hide behind her; messages sit high, clear of the floor where challot land */
.bread-layer{z-index:8}
.toast{top:12.5%;bottom:auto;right:3%}
.bread.queued{filter:drop-shadow(0 0 6px #ffdfa3)}
.bread.queued:after{content:'הבאה';position:absolute;left:50%;bottom:108%;transform:translateX(-50%);padding:1px 7px;border-radius:999px;background:#1b123bd9;color:#ffe29a;font:800 clamp(10px,2.8vw,13px)/1.4 Heebo,Arial,sans-serif;white-space:nowrap}

/* ---------- One screen, no scrolling ----------
   The page fills the viewport; the 9:16 stage takes whatever height is left after the controls. */
html,body{height:100%;overflow:hidden}
body{min-height:0}
.shell{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:none;padding:max(4px,env(safe-area-inset-top)) 4px max(4px,env(safe-area-inset-bottom))}
.topline{flex:none;justify-content:center;min-height:22px}
.game-frame{flex:1;min-height:0;container-type:size;display:grid;place-items:center;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.stage{width:min(100cqw,100cqh * 9 / 16);height:min(100cqh,100cqw * 16 / 9);aspect-ratio:auto;border:1px solid #816aa0;border-radius:12px;box-shadow:0 20px 60px #000a;container-type:size}
.controls{flex:none;padding:6px 4px 0;gap:8px}
.instruction,.toast,.baking-caption{display:none!important}
.note{flex:none;margin:4px 5px 0}
body:not(.intro-mode) .note{display:none}
body.intro-mode .controls{display:none}
/* the poster's text scales with the stage, so it always fits inside it */
.intro-copy .eyebrow{font-size:clamp(9px,3.2cqw,14px)}
.intro-copy .game-logo{font-size:clamp(34px,13cqw,64px)!important}
.intro-copy p{font-size:clamp(11px,3.6cqw,16px);margin:.35em auto .7em}
.intro-actions button{font-size:clamp(12px,3.8cqw,16px);padding:clamp(6px,1.8cqw,10px) 12px}
.door-prompt{font-size:clamp(12px,3.9cqw,18px)}

/* ---------- Bat-Chen ----------
   Her motion is drawn frame by frame in game.js; the old looping keyframes step aside (the kiss keeps its own). */
.batchen.walk .batchen-art,.batchen.idle .batchen-art,.batchen.holding .batchen-art{animation:none}
.batchen.face-left{transform:translateX(-50%) scaleX(-1)}
.batchen.face-left .shirt-print{transform:scaleX(-1) rotate(-1.5deg)}

/* ---------- The kiss ----------
   The lips button floats beside her face whenever she holds a challah; tapping Bat-Chen works too. */
.stage-kiss{position:absolute;z-index:13;width:clamp(58px,19cqw,92px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;
  background:radial-gradient(circle at 38% 32%,#fff6dc,#f6c46a 55%,#c9872f);border:2px solid #fff3cf;box-shadow:0 0 0 5px #ffd98a44,0 8px 22px #000b;
  font-size:clamp(28px,9.5cqw,46px);line-height:1;display:grid;place-items:center;transition:opacity .18s,transform .18s}
.stage-kiss.ready{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);animation:kissPulse .75s ease-in-out infinite alternate}
.stage-kiss:disabled{opacity:0}
@keyframes kissPulse{to{box-shadow:0 0 0 11px #ffd98a22,0 0 26px #ffc46e,0 8px 22px #000b;transform:translate(-50%,-50%) scale(1.08)}}
.kiss-pop{position:absolute;z-index:15;left:58%;top:50%;font-size:clamp(20px,8cqw,40px);pointer-events:none;opacity:0;transform:translate(-50%,-50%);animation:kissFly 1.1s cubic-bezier(.15,.7,.3,1) both}
@keyframes kissFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(var(--s))}}

/* ---------- Challot rest on the floor ----------
   The layer adds no stacking of its own, so each challah sorts in depth with Bat-Chen (see sortBread). */
.bread-layer{z-index:auto}

/* ---------- Redesign 30.09: poster with the logo, one kiss, the whole screen is thrown by the blast ---------- */

/* Poster: the logo on top, one instruction at the bottom, the airlock hatch stays visible in the middle. */
.intro-panel{flex-direction:column;align-items:center;justify-content:space-between;padding:clamp(8px,3.5cqw,20px) 6% clamp(10px,5cqw,26px);
  background:linear-gradient(180deg,#080d2680 0%,#080d2600 26%,#080d2600 50%,#080d26b8 70%,#07071bf0 100%),url('assets/shedai-exterior-entrance.webp') center/100% 100% no-repeat}
.game-logo{position:relative;z-index:2;display:block;width:min(94%,440px);margin:0!important;line-height:0!important;font-size:0!important;text-shadow:none;-webkit-text-stroke:0;filter:drop-shadow(0 10px 18px #000a);animation:logoFloat 5.5s ease-in-out infinite alternate}
.game-logo img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
@keyframes logoFloat{from{transform:translateY(0) rotate(-.6deg)}to{transform:translateY(-1.6%) rotate(.6deg)}}
.intro-copy{position:relative;z-index:2;width:100%;margin:0!important;padding:0!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;display:grid;justify-items:center;gap:clamp(7px,2.2cqw,12px);text-shadow:0 2px 8px #05040f}
.intro-copy #mic-button span{display:inline-block}
.intro-copy #mic-button{text-wrap:balance;width:min(88%,360px);min-height:clamp(52px,15cqw,68px);padding:10px 18px;border-radius:999px;font:900 clamp(15px,4.6cqw,20px)/1.25 Heebo,Arial,sans-serif;color:#20112b;text-shadow:none;background:linear-gradient(#fff3cf,#f0b653);box-shadow:0 6px 26px #f8b666aa;animation:micPulse 1.6s ease-in-out infinite}
@keyframes micPulse{50%{box-shadow:0 6px 26px #f8b666aa,0 0 0 9px #ffdc8f33}}
.intro-line{margin:0;font:900 clamp(26px,9cqw,40px)/1.1 Heebo,Arial,sans-serif;color:#fff1c4;text-shadow:0 3px 0 #7a3d0e,0 0 24px #ffb43c;animation:kissCall .8s ease-in-out infinite alternate}
@keyframes kissCall{to{transform:scale(1.07)}}
.kiss-meter{width:min(64%,240px);height:8px;border-radius:9px;background:#ffffff26;overflow:hidden;direction:rtl}
.kiss-meter i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffb43c,#fff1c4);transform-origin:100% 50%;transform:scaleX(calc(var(--lvl,0) / 1.25));transition:transform 60ms linear}
.intro-copy #skip-button{background:none;border:0;box-shadow:none;color:#f9e9c6;text-decoration:underline;font:700 clamp(12px,3.4cqw,15px)/1.2 Heebo,Arial,sans-serif;padding:4px 8px;opacity:.85}
.intro-copy .door-touch-button{font-size:clamp(12px,3.6cqw,15px);padding:8px 16px}
.intro-copy .mic-status{min-height:1.2em;padding-top:0}

/* The title over the live game: "בל תשחית!!!", the three moves, the warning. It never blocks touch. */
.start-title{position:absolute;inset:0;z-index:24;display:grid;align-content:center;justify-items:center;gap:clamp(6px,2.4cqw,12px);padding:0 4% 22%;text-align:center;pointer-events:none;opacity:0;background:radial-gradient(ellipse 78% 24% at 50% 39%,#0b0716d9,#0b071680 55%,transparent 100%)}
.start-title.show{animation:titleLife 4.6s linear both}
.st-main{white-space:nowrap;font:900 clamp(36px,13cqw,72px)/1 Heebo,Arial,sans-serif;color:#fff1c4;text-shadow:0 5px 0 #7a3d0e,0 0 30px #ffb43c,0 0 80px #ff7a1a;transform:rotate(-3deg)}
.start-title.show .st-main{animation:titleSlam .55s cubic-bezier(.2,.9,.2,1) both}
.st-steps{display:flex;gap:clamp(10px,3.4cqw,18px);direction:rtl}
.st-steps em{font:900 clamp(22px,8cqw,38px)/1.1 Heebo,Arial,sans-serif;font-style:normal;color:#ffe29a;text-shadow:0 3px 0 #6b3b12,0 0 14px #000a;opacity:0}
.start-title.show .st-steps em{animation:stepPop .38s cubic-bezier(.2,1.3,.4,1) both}
.start-title.show .st-steps em:nth-child(1){animation-delay:.55s}
.start-title.show .st-steps em:nth-child(2){animation-delay:.95s}
.start-title.show .st-steps em:nth-child(3){animation-delay:1.35s}
.st-hurry{font:900 clamp(20px,7cqw,32px)/1.15 Heebo,Arial,sans-serif;color:#fff;background:#d8203cdd;padding:.08em .5em .14em;border-radius:.4em;box-shadow:0 4px 18px #ff3b4b88;text-shadow:0 2px 0 #5a1420;opacity:0}
.start-title.show .st-hurry{animation:hurryIn .5s 2.1s ease-out both,hurryPulse .35s 2.6s ease-in-out infinite alternate}
@keyframes titleLife{0%,86%{opacity:1}100%{opacity:0}}
@keyframes titleSlam{0%{opacity:0;transform:scale(2.4) rotate(-6deg)}60%{opacity:1;transform:scale(.94) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(-3deg)}}
@keyframes stepPop{0%{opacity:0;transform:translateY(14px) scale(.5)}100%{opacity:1;transform:none}}
@keyframes hurryIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes hurryPulse{to{transform:scale(1.06)}}

/* The blast throws the whole screen: a hard lurch, then a damped shudder. --k is the strength (about 1 = a normal hit). */
.shell{--a:calc(var(--k,1) * min(11px,3vmin))}
.shell.blast{animation:shellBlast .85s cubic-bezier(.2,.7,.3,1) both;will-change:transform}
@keyframes shellBlast{
  0%{transform:translate(0,0) rotate(0) scale(1)}
  5%{transform:translate(calc(var(--a) * -1),calc(var(--a) * .6)) rotate(calc(var(--k,1) * -.9deg)) scale(1.014)}
  13%{transform:translate(calc(var(--a) * .95),calc(var(--a) * -.75)) rotate(calc(var(--k,1) * .8deg)) scale(1.008)}
  22%{transform:translate(calc(var(--a) * -.75),calc(var(--a) * .55)) rotate(calc(var(--k,1) * -.55deg)) scale(1.01)}
  33%{transform:translate(calc(var(--a) * .55),calc(var(--a) * -.4)) rotate(calc(var(--k,1) * .4deg)) scale(1.004)}
  46%{transform:translate(calc(var(--a) * -.35),calc(var(--a) * .28)) rotate(calc(var(--k,1) * -.28deg))}
  60%{transform:translate(calc(var(--a) * .22),calc(var(--a) * -.16)) rotate(calc(var(--k,1) * .16deg))}
  76%{transform:translate(calc(var(--a) * -.1),calc(var(--a) * .08))}
  100%{transform:translate(0,0) rotate(0) scale(1)}
}
.stage.hit{animation:none}
@media(prefers-reduced-motion:reduce){.shell{--a:calc(var(--k,1) * min(3px,.8vmin))}.shell.blast{animation-duration:.3s}.game-logo,.intro-line,.intro-copy #mic-button{animation:none}}

/* How to play: three short steps on the poster, above the microphone button */
.how-to{list-style:none;margin:0;padding:clamp(8px,2.6cqw,14px) clamp(12px,4cqw,20px);display:grid;gap:clamp(3px,1.2cqw,6px);width:min(88%,360px);
  border-radius:16px;background:#0d0b22c4;border:1px solid #e6c27955;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);counter-reset:step;text-align:right}
.how-to li{counter-increment:step;display:flex;align-items:baseline;gap:8px;font:600 clamp(14px,4.2cqw,19px)/1.3 Heebo,Arial,sans-serif;color:#fff4d8}
.how-to li:before{content:counter(step);flex:none;display:grid;place-items:center;width:1.45em;height:1.45em;border-radius:50%;background:linear-gradient(#fff3cf,#f0b653);color:#20112b;font-weight:900;font-size:.85em}
.how-to b{color:#ffe29a;font-weight:900}
.how-to small{font-size:.78em;color:#e8d6ff;font-weight:500}
body:not(.intro-mode) .how-to,.intro-panel.exit .how-to{display:none}
.stage:not(.intro) .how-to{display:none}
.site-hamsa{flex:none;display:block;width:max-content;margin:4px auto 0;padding:2px 8px;opacity:.9}.site-hamsa img{display:block;height:30px;width:auto;filter:drop-shadow(0 0 6px #ffc97855)}.site-hamsa:hover{opacity:1}