.story-loading{display:none;min-height:340px;aspect-ratio:9/16;width:min(100%,430px);margin:auto;background:radial-gradient(ellipse at 50% 40%,#285244,#111a2b 70%);border:1px solid #a68e6355;border-radius:16px;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#e6d7b6;padding:24px}.story-loading span{font-size:64px;color:#b7e8bd}.story-loading small{font:13px system-ui;color:#b9c9c5}#result[aria-busy=true] .story-loading{display:flex}
@media(max-width:700px){body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}main{height:calc(100svh - 58px - 64px - env(safe-area-inset-bottom,0px))}.cauldron-area{width:54%;max-width:248px;left:23%}.mobile-tray{flex-shrink:0;padding-right:24px;scroll-padding-right:24px}.mobile-tray .ingredient{flex-shrink:0}.actions button{min-height:44px}#result{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}.story-loading{width:100%;min-height:420px}}
@media(max-width:700px) and (max-height:710px){.cauldron-area{width:48%;left:26%}main{min-height:520px}}
@media(max-width:700px){body #result{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* Mobile geometry: one pot coordinate system scales spoon, legs and fire together. */
@media(max-width:700px){
 main{min-height:660px;grid-template-rows:60px minmax(410px,1fr) 144px 26px}
 .laboratory{container-type:size}
 .cauldron-area{width:min(46cqw,calc((100cqh - 245px) / 1.25));max-width:212px;left:50%;transform:translateX(-50%)}
 .cat{bottom:146px;right:1%;isolation:isolate}
 .cat:before{content:'';position:absolute;z-index:-1;left:14%;bottom:1%;width:70%;height:8%;border-radius:50%;background:radial-gradient(ellipse,#070812b0,transparent 72%);pointer-events:none}
 .surprise-bat{top:0;left:calc(50% - 54px);width:108px;min-height:76px;animation-name:bat-mobile-safe}
}
@media(max-width:700px) and (max-height:710px){.cat{bottom:137px}.cauldron-area{bottom:140px}}
@keyframes bat-mobile-safe{0%,100%{transform:translate(-24px,0) rotate(-3deg)}25%{transform:translate(-4px,4px)}50%{transform:translate(24px,0) rotate(3deg)}75%{transform:translate(4px,-2px)}}

#guardianOracle{position:fixed;z-index:90;right:max(16px,env(safe-area-inset-right));top:max(74px,env(safe-area-inset-top));width:min(360px,calc(100vw - 32px));box-sizing:border-box;padding:25px 24px 17px;border:1px solid #ac9161;border-radius:16px;background:linear-gradient(145deg,#25243bf5,#171b2cf5);color:#efe1c0;box-shadow:0 8px 38px #080d1c80;pointer-events:none}#guardianOracle[hidden]{display:none}#guardianOracle h2{margin:0 22px 10px 0;font:1.1rem/1.3 Georgia,serif;color:#ddc28d}#guardianOracle p{margin:0;font:1rem/1.5 Georgia,serif}#guardianOracle .close{position:absolute;right:2px;top:2px;min-width:44px;min-height:44px;pointer-events:auto}@media(max-width:600px){#guardianOracle{top:70px;width:min(330px,calc(100vw - 32px));padding:23px 20px 16px}#guardianOracle h2{font-size:1rem}#guardianOracle p{font-size:.94rem}}