:root{--ink:#11192e;--paper:#fff8df;--purple:#6b48ff;--pink:#ff5277;--cyan:#25c9f5;--yellow:#ffcf45;--green:#48d17a;--panel:#17233d;--white:#fff;--shadow:0 10px 0 rgba(17,25,46,.22)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080d18;font-family:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;color:var(--ink);touch-action:none;user-select:none}
#app,#app *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
button{font:inherit;border:0;cursor:pointer;color:inherit}
#app{--control-inset:28px;--control-bottom:12px;position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:var(--panel);isolation:isolate}
.screen{position:absolute;inset:0;display:none;overflow:hidden}.screen.active{display:block}
.primary-button{display:inline-flex;align-items:center;justify-content:center;min-width:16rem;min-height:4rem;padding:.8rem 2rem;border:4px solid var(--ink);border-radius:1.1rem;background:var(--yellow);box-shadow:0 7px 0 var(--ink);font-size:1.25rem;font-weight:900;transition:transform .1s,box-shadow .1s}.primary-button:active{transform:translateY(5px);box-shadow:0 2px 0 var(--ink)}
.eyebrow{margin:0 0 .5rem;letter-spacing:.1em;font-weight:900;color:var(--yellow)}
#title-screen{background:radial-gradient(circle at 27% 30%,#39488d 0 4%,transparent 28%),linear-gradient(145deg,#17213f,#0d1328 65%);color:white}
#title-screen:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#fff 0 1.5px,transparent 2px);background-size:82px 82px;opacity:.3}
.title-copy{position:absolute;z-index:2;left:7vw;top:50%;transform:translateY(-50%);width:49vw}.title-copy h1{font-size:clamp(2.4rem,6vw,5.6rem);line-height:.9;margin:.2rem 0 1.2rem;letter-spacing:-.07em;text-shadow:0 .09em 0 #321e62}.title-copy h1 strong{color:#d9c8ff;font-size:.72em}.title-copy>p:not(.eyebrow):not(.keys){font-size:clamp(1rem,1.6vw,1.3rem);font-weight:800;margin:0 0 1.5rem}.title-copy .primary-button{background:linear-gradient(#ffe271,#ffb934)}.keys{font-size:.78rem;color:#b9c2df;margin:1.2rem 0 0}
.title-art{position:absolute;right:0;top:0;width:48vw;height:100%}.moon{position:absolute;width:18vw;height:18vw;border-radius:50%;background:#fff6c2;right:9vw;top:7vh;box-shadow:0 0 65px #f9dd7866}.castle{position:absolute;right:3vw;bottom:-8vh;font-size:45vw;color:#080d18;opacity:.72;line-height:1}.title-slime{position:absolute;width:min(32vw,420px);height:min(25vw,330px);right:8vw;bottom:8vh;background:url('assets/sprites.png') 0 66.666%/400% 400% no-repeat;filter:hue-rotate(235deg) saturate(1.3);transform:rotate(-4deg);animation:bob 1.8s ease-in-out infinite}
.debug-entry{display:flex;gap:10px;margin-top:14px}.debug-entry button{padding:9px 14px;border:2px solid #bdaeff;border-radius:12px;background:#211a43cc;color:#e8e1ff;font-size:.82rem;font-weight:900;box-shadow:0 4px 0 #080d18}.debug-entry button:last-child{border-color:#ffd56d;color:#ffe89e}.debug-entry button:active{transform:translateY(3px);box-shadow:0 1px 0 #080d18}
.debug-screen{background:radial-gradient(circle at 50% 0,#493470 0,transparent 43%),linear-gradient(145deg,#171229,#080c19 70%);color:white}.debug-screen:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:34px 34px;pointer-events:none}.debug-header{position:relative;z-index:2;height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 24px;background:#0c1022e8;border-bottom:4px solid #795fd4;box-shadow:0 8px 24px #0008}.debug-header button{justify-self:start;padding:10px 15px;border:3px solid #13182b;border-radius:12px;background:#f5f1ff;font-weight:900;box-shadow:0 4px 0 #13182b}.debug-header div{text-align:center}.debug-header span{color:#a996f2;font-size:.68rem;letter-spacing:.22em;font-weight:900}.debug-header h2{margin:0;color:#fff;font-size:1.6rem}.debug-header p{justify-self:end;margin:0;color:#ffe16b;font-weight:900}.debug-help{position:relative;z-index:2;display:flex;justify-content:center;gap:16px;align-items:center;margin:12px auto 8px}.debug-help b{padding:5px 12px;border-radius:999px;background:#5c46c8;color:#fff}.debug-help span{color:#bdc9e6;font-size:.86rem;font-weight:800}.debug-techniques{position:absolute;z-index:2;left:3%;right:3%;top:137px;bottom:3%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;align-content:start;overflow:auto;padding:2px 6px 18px}.debug-technique{min-height:74px;display:grid;grid-template-columns:52px 1fr;align-items:center;gap:9px;padding:8px;background:linear-gradient(145deg,#252e50,#151a31);color:white;border:3px solid #6673a7;border-radius:15px;text-align:left;box-shadow:0 5px 0 #070a15;transition:transform .1s,border-color .1s}.debug-technique:hover{border-color:#ffe36c;transform:translateY(-2px)}.debug-technique:active{transform:translateY(3px);box-shadow:0 1px 0 #070a15}.debug-technique .debug-icon{width:52px;height:52px;border-radius:12px;border:3px solid #fff7;background-color:#f7f4ff;background-repeat:no-repeat}.debug-technique strong,.debug-technique small{display:block}.debug-technique strong{font-size:.92rem;color:#ffe36c}.debug-technique small{margin-top:3px;color:#aebbdc;font-size:.67rem;font-weight:900}.debug-technique.recipe{border-color:#c05fea;background:linear-gradient(145deg,#402657,#1c1832)}.debug-technique.recipe strong{color:#f6baff}.debug-game-tools{display:none;position:absolute;z-index:14;top:94px;right:14px;align-items:center;gap:7px;padding:6px 7px 6px 12px;border:3px solid #ffe16d;border-radius:13px;background:#10172ee8;color:white;box-shadow:0 5px 0 #090d1b}.debug-game-tools.show{display:flex}.debug-game-tools b{margin-right:4px;color:#ffe16d;font-size:.76rem}.debug-game-tools button{padding:7px 10px;border-radius:9px;background:#ebe7ff;color:#1a2038;font-size:.72rem;font-weight:900}.debug-result-exit{display:none;width:100%;margin-top:9px;padding:10px;border:3px solid var(--ink);border-radius:12px;background:#e7e0ff;font-weight:900}.debug-result-exit.show{display:block}.debug-hidden{display:none!important}
@keyframes bob{50%{transform:translateY(-12px) rotate(3deg) scaleX(1.03)}}
.debug-technique .debug-icon{background-image:url('assets/sprites.png');background-size:400% 400%}.debug-technique .debug-icon.new-material{background-image:url('assets/materials-new.webp');background-size:500% 200%}
.topbar{position:absolute;z-index:10;left:0;right:0;top:0;height:76px;padding:10px 22px;display:flex;align-items:center;justify-content:space-between;background:#11192e;color:white;border-bottom:4px solid #070b14}.topbar.transparent{background:linear-gradient(#11192edd,transparent);border:0}.topbar>div:first-child{display:flex;flex-direction:column}.topbar strong{font-size:1.65rem}.mini-label{font-size:.72rem;color:#90a4cb;font-weight:900;letter-spacing:.12em}.mix-count{display:flex;align-items:baseline;gap:4px}.mix-count b{font-size:2rem;color:var(--yellow)}.mix-count i{width:2px;height:30px;background:#405276;margin:0 10px}.mix-count span{font-weight:900}
#mix-screen .topbar{background:linear-gradient(180deg,#12091f,#251036);border-bottom-color:#78388d;box-shadow:0 7px 20px #05020dbb}.lab{position:absolute;inset:76px 0 0;background:#140a24 url('assets/demon-lab.webp') center 42%/cover no-repeat;overflow:hidden}.lab:after{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(90deg,#09031344,transparent 22% 78%,#09031344),linear-gradient(180deg,#13072022 0 45%,#07020d55 100%);pointer-events:none}
.conveyor-wrap{position:absolute;z-index:2;left:1.5%;right:1.5%;top:5%;height:38%}.conveyor-wrap>p{margin:0 0 10px;text-align:center;font-weight:900;color:#f1e6ff;text-shadow:0 3px 0 #08030f,0 0 9px #08030f}.conveyor{position:relative;height:145px;overflow:visible;clip-path:inset(-400px 0 -400px 0);background:transparent;border:0;box-shadow:none;cursor:pointer}.conveyor:after{content:"";position:absolute;z-index:1;left:0;right:0;top:54px;height:5px;background:linear-gradient(90deg,transparent,#bd62ed88 8% 92%,transparent);border:0;box-shadow:0 0 14px #c55cff,0 0 28px #792f9c88;opacity:.75}.drop-gate{position:absolute;z-index:5;left:50%;bottom:-26px;transform:translateX(-50%);min-width:104px;text-align:center;background:#2c123fdd;color:#fff3ff;border:3px solid #d877ff;border-radius:18px;padding:7px 15px;font-size:.82rem;font-weight:900;box-shadow:0 0 16px #d05cff,0 5px 0 #090311aa}.drop-gate:before{content:"";position:absolute;left:50%;bottom:100%;width:120px;height:132px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,#f1a1ff77 0 16%,#b949e533 34%,transparent 70%);border-left:2px solid #e58cff66;border-right:2px solid #e58cff66;pointer-events:none}.drop-gate.miss{animation:gateMiss .28s 2}@keyframes gateMiss{50%{background:#ff5277;color:white;transform:translateX(-50%) scale(1.08)}}
.material{position:absolute;z-index:2;width:104px;height:104px;top:5px;border-radius:22px;background-color:#f8f4ffeb;background-image:url('assets/sprites.png');background-size:400% 400%;border:3px solid #d47aff;box-shadow:0 0 16px #b94cddaa,0 5px 0 #09031188;pointer-events:none;will-change:transform;backface-visibility:hidden}.material:after{content:attr(data-label);position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);white-space:nowrap;background:#160a27ee;color:white;border:2px solid #b95bd6;border-radius:10px;padding:2px 8px;font-size:.72rem;font-weight:900}.material.falling{z-index:12;filter:drop-shadow(0 0 12px #ed8fff) drop-shadow(0 8px 4px #11192e66)}
.beaker-zone{position:absolute;z-index:2;left:3%;right:3%;top:48%;bottom:4%;display:flex;justify-content:center;align-items:flex-end}.beaker{position:relative;width:210px;height:230px;border:10px solid #d9f7ff;border-top:0;border-radius:9px 9px 60px 60px;background:#b9eff522;box-shadow:inset 12px 0 #ffffff33,0 9px 0 #10182a55;overflow:hidden}.beaker.mix-hit{animation:beakerHit .48s ease-out}@keyframes beakerHit{25%{transform:scale(1.08) rotate(-3deg)}50%{transform:scale(.95) rotate(3deg)}75%{transform:scale(1.03) rotate(-1deg)}}.beaker:before{content:"";position:absolute;z-index:2;left:-12px;right:-12px;top:-2px;height:20px;border:9px solid #d9f7ff;border-radius:50%}.brew{position:absolute;left:0;right:0;bottom:0;height:6%;background:#6bd9ff;transition:height .25s,background .25s;border-radius:30% 30% 0 0}.brew:before,.brew:after{content:"";position:absolute;border-radius:50%;background:#fff8;width:16px;height:16px;left:27%;top:12%;animation:bubble 1.2s infinite}.brew:after{left:68%;top:36%;animation-delay:.4s;width:11px;height:11px}@keyframes bubble{to{transform:translateY(-65px);opacity:0}}.shine{position:absolute;z-index:3;left:20px;top:28px;width:14px;height:108px;border-radius:10px;background:#fff8;transform:rotate(4deg)}.mix-fx{position:absolute;left:50%;bottom:165px;pointer-events:none}.mix-fx span{position:absolute;left:0;top:0;white-space:nowrap;color:#fff36a;font-size:1.8rem;font-weight:900;text-shadow:-3px -3px 0 var(--ink),3px -3px 0 var(--ink),-3px 3px 0 var(--ink),3px 3px 0 var(--ink);animation:mixBurst .75s ease-out forwards}@keyframes mixBurst{from{transform:translate(-50%,20px) scale(.35) rotate(-8deg);opacity:0}40%{opacity:1;transform:translate(-50%,-18px) scale(1.2) rotate(4deg)}to{transform:translate(-50%,-70px) scale(.9);opacity:0}}
.picked-list{position:absolute;left:0;top:0;display:grid;grid-template-columns:repeat(5,78px);gap:10px}.picked-chip,.result-materials .sprite-icon{width:78px;height:78px;background-image:url('assets/sprites.png');background-size:400% 400%;background-color:#fff;border:5px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 #09031188;animation:pop .25s both}@keyframes pop{from{transform:scale(.2) rotate(-20deg)}}.demon-note{position:absolute;right:0;bottom:23%;background:#fff1bd;border:5px solid var(--ink);padding:17px 24px;transform:rotate(4deg);box-shadow:5px 7px 0 #11192e66;font-size:1rem}.demon-note b{font-size:1.55rem;color:#d63555}
.material.new-material,.picked-chip.new-material,.sprite-icon.new-material,.shop-icon.new-material{background-image:url('assets/materials-new.webp');background-size:500% 200%}.beaker.size-medium{width:230px;height:242px}.beaker.size-large{width:250px;height:255px}
#reveal-screen{background:radial-gradient(circle,#ffe96e 0,#ff9e43 35%,#c83c73 75%,#421b68);color:white}.reveal-rays{position:absolute;width:140vmax;height:140vmax;left:50%;top:50%;transform:translate(-50%,-50%);background:repeating-conic-gradient(#fff2 0 8deg,transparent 8deg 18deg);animation:spin 16s linear infinite}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}#reveal-canvas{position:absolute;inset:0;width:100%;height:100%}.topbar button{background:#fff;color:var(--ink);padding:10px 16px;border:3px solid var(--ink);border-radius:14px;font-weight:900}.stat-cards{position:absolute;left:3%;bottom:4%;display:grid;grid-template-columns:repeat(2,minmax(210px,240px));gap:9px}.stat-cards span{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:43px;padding:9px 12px;background:#11192ef0;border:3px solid #ffffff70;border-radius:12px;font-size:clamp(.9rem,1.2vw,1.08rem);font-weight:900;box-shadow:0 4px 0 #11192e66}.stat-cards b{color:var(--yellow);font-size:1.02em}.stars{display:inline-block;white-space:nowrap;font-style:normal;font-size:clamp(.74rem,1.08vw,.94rem);letter-spacing:.015em;color:#ffe14e;text-shadow:0 2px 0 #6e3c00}.launch-note{position:absolute;right:4%;bottom:3%;font-weight:900;font-size:1.2rem;animation:blink .8s infinite alternate}@keyframes blink{to{opacity:.25}}
#game-canvas{display:block;width:100%;height:100%;background:#64c8f0}.game-hud{position:absolute;z-index:5;top:12px;left:14px;right:14px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.stage-chip,.special-chip{background:#11192ee8;border:3px solid #fff6;border-radius:14px;color:white;padding:7px 14px;box-shadow:0 5px 0 #11192e55}.stage-chip span,.special-chip span{display:block;font-size:.62rem;letter-spacing:.15em;color:#9eb0d6}.stage-chip b{font-size:1.8rem}.special-chip{text-align:right}.special-chip b{font-size:1rem;color:var(--yellow)}.bars{display:flex;flex-direction:column;gap:5px;background:#11192ee8;padding:8px 12px;border-radius:14px;border:3px solid #fff6}.bars label{display:grid;grid-template-columns:28px 150px 34px;align-items:center;gap:7px;color:white;font-weight:900;font-size:.76rem}.bars i{height:14px;background:#070b14;border:2px solid #fff7;border-radius:8px;overflow:hidden}.bars i b{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff3960,#ff7c64);transition:width .15s}.bars label:nth-child(2) i b{background:linear-gradient(90deg,#1b9bff,#39e3f5)}
.controls{position:absolute;z-index:8;bottom:max(var(--control-bottom),env(safe-area-inset-bottom));display:flex;gap:10px}.left-controls{left:max(var(--control-inset),env(safe-area-inset-left))}.right-controls{right:max(var(--control-inset),env(safe-area-inset-right));align-items:flex-end}.controls button{width:76px;height:76px;border-radius:50%;background:#11192ecc;border:4px solid #fff9;color:white;font-size:1.8rem;font-weight:900;box-shadow:0 5px 0 #080d18aa}.controls button.pressed,.controls button:active{transform:translateY(4px);box-shadow:0 1px 0 #080d18aa;background:#354b7a}.controls small{display:block;font-size:.58rem}.controls .attack{background:#ff4d68dd}.controls .special{width:88px;height:88px;background:#6b48ffea}.controls .jump{background:#159dd9dd}.toast{position:absolute;z-index:9;left:50%;top:22%;transform:translateX(-50%) translateY(-10px);background:#11192eea;color:white;border:3px solid white;border-radius:14px;padding:10px 22px;font-weight:900;opacity:0;transition:.18s;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal-screen{display:none;background:#080d18cc;backdrop-filter:blur(8px);z-index:20;place-items:center}.modal-screen.active{display:grid}.result-card{width:min(620px,94vw);max-height:96vh;overflow:auto;background:var(--paper);border:6px solid var(--ink);border-radius:28px;padding:18px 28px 22px;box-shadow:0 14px 0 #080d18}.result-card .eyebrow{color:#7150d9}.result-card h2{margin:-5px 0 12px;font-size:clamp(2rem,5vh,3.5rem);line-height:1}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-grid>div{background:#17233d;color:white;border:4px solid var(--ink);border-radius:14px;padding:7px 15px}.result-grid span,.result-label{display:block;font-size:.7rem;color:#9fb1d4;font-weight:900}.result-grid b{font-size:1.65rem;color:var(--yellow)}.death-cause{font-weight:900;color:#9e3150;margin:9px 0}.gold-earned{display:flex;align-items:center;justify-content:space-between;background:#473063;color:white;border:3px solid var(--ink);border-radius:12px;padding:7px 13px;margin:0 0 8px}.gold-earned span{font-size:.75rem;font-weight:900}.gold-earned b{font-size:1.55rem;color:#ffe35e}.result-materials{display:flex;gap:7px;margin:5px 0 9px}.result-materials .sprite-icon{width:48px;height:48px}.record-row{display:flex;justify-content:space-between;background:#eadfb9;border-radius:10px;padding:7px 12px;margin-bottom:9px;font-size:.8rem}.record-row b{color:#5f3ed2}.shop-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}.shop-buttons button{padding:10px;border:3px solid var(--ink);border-radius:12px;background:#7c43a1;color:white;font-weight:900;box-shadow:0 4px 0 var(--ink)}.shop-buttons button+button{background:#48a654}.result-card .primary-button{width:100%;min-height:3.25rem}
.shop-screen{z-index:25;background-position:center;background-size:cover;color:white}.shop-screen.witch{background-image:url('assets/shop-witch.webp')}.shop-screen.home{background-image:url('assets/shop-home.webp')}.shop-shade{position:absolute;inset:0;background:linear-gradient(#090413b8,#09041344 23%,#090413d6)}.shop-screen.home .shop-shade{background:linear-gradient(#173045aa,#ffffff10 25%,#173045cc)}.shop-header{position:absolute;z-index:2;left:0;right:0;top:0;height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 18px;background:#10071bd9;border-bottom:4px solid #d273ed}.shop-screen.home .shop-header{background:#17374dd9;border-color:#8be483}.shop-header>div:nth-child(2){display:flex;flex-direction:column;text-align:center}.shop-header strong{font-size:1.55rem}.shop-header button,.gift-card button{justify-self:start;padding:9px 15px;border:3px solid var(--ink);border-radius:12px;background:white;font-weight:900;box-shadow:0 4px 0 var(--ink)}.wallet{justify-self:end;background:#2d2145;border:3px solid #fff6;border-radius:13px;padding:8px 13px;font-weight:900}.wallet b{color:#ffe45e;font-size:1.35rem}.shop-message{position:absolute;z-index:2;left:3%;right:3%;top:82px;display:flex;justify-content:space-between;align-items:center;background:#120a20d9;border:3px solid #fff6;border-radius:13px;padding:9px 15px}.shop-message span{color:#ffe368;font-weight:900}.shop-products{position:absolute;z-index:2;left:3%;right:3%;top:137px;bottom:3%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-content:start;overflow:auto;padding:2px}.product-card{min-width:0;display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;padding:8px;border:4px solid #251531;border-radius:16px;background:#fff5e9ed;box-shadow:0 6px 0 #160a23;color:var(--ink);text-align:left}.product-card:disabled{filter:saturate(.55);opacity:.8}.product-card .shop-icon{grid-row:1/3;width:62px;height:62px;border:3px solid var(--ink);border-radius:13px;background-color:white;background-repeat:no-repeat}.product-card strong{font-size:1rem;white-space:nowrap}.product-card small{font-weight:900;color:#6d4a82}.product-card b{color:#c24359;font-size:1.1rem}.product-card.owned b{color:#398b50}.gift-overlay{position:absolute;z-index:10;inset:0;display:none;place-items:center;background:#090311c9;backdrop-filter:blur(5px)}.gift-overlay.show{display:grid}.gift-card{position:relative;width:min(520px,90vw);background:#fff7d8;color:var(--ink);border:6px solid var(--ink);border-radius:26px;text-align:center;padding:18px 28px 24px;box-shadow:0 14px 0 #08030f;animation:giftPop .5s cubic-bezier(.2,1.5,.4,1)}@keyframes giftPop{from{transform:scale(.2) rotate(-7deg)}}.gift-beaker{width:220px;height:188px;margin:-4px auto 0;background:url('assets/beaker-gifts.webp') 0 center/200% 100% no-repeat}.gift-beaker.large{background-position:100% center}.receipt-stamp{position:absolute;right:34px;top:40px;border:7px double #d3314d;border-radius:50%;padding:16px 8px;color:#d3314d;font-size:1.4rem;font-weight:900;transform:rotate(-14deg);animation:stamp .38s .35s both}@keyframes stamp{from{transform:scale(2.8) rotate(-14deg);opacity:0}}.gift-card h2{margin:0;color:#70409a}.gift-card p{margin:8px 0 16px;font-weight:900}.gift-card button{justify-self:center;background:#ffcf45}
.product-card .shop-icon{background-image:url('assets/sprites.png');background-size:400% 400%}.product-card .shop-icon.new-material{background-image:url('assets/materials-new.webp');background-size:500% 200%}.shop-header button,.gift-card button{color:var(--ink)}.product-card>span:last-child{display:flex;min-width:0;flex-direction:column;align-items:flex-start}
#rotate-notice{display:none;position:absolute;z-index:100;inset:0;background:#11192e;color:white;align-items:center;justify-content:center;flex-direction:column;gap:15px;text-align:center;padding:20px}#rotate-notice b{font-size:4rem;color:var(--yellow)}
@media (orientation:portrait) and (max-width:700px){#rotate-notice{display:flex}}
@media (max-height:520px){.topbar{height:58px;padding:6px 16px}.topbar strong{font-size:1.25rem}.lab{inset:58px 0 0}.conveyor-wrap{top:3%}.conveyor{height:115px}.material{width:86px;height:86px}.beaker{width:158px;height:172px}.beaker.size-medium{width:174px;height:182px}.beaker.size-large{width:190px;height:193px}.picked-list{grid-template-columns:repeat(5,62px);gap:7px}.picked-chip{width:62px;height:62px;border-width:4px}.demon-note{bottom:17%;padding:12px 18px;font-size:.88rem}.demon-note b{font-size:1.35rem}.controls button{width:62px;height:62px}.controls .special{width:70px;height:70px}.title-copy{top:43%}.title-copy h1{margin-bottom:.75rem}.title-copy>p:not(.eyebrow):not(.keys){margin-bottom:.8rem}.debug-entry{margin-top:10px}.keys{margin-top:.7rem}.debug-header{height:62px}.debug-header h2{font-size:1.2rem}.debug-help{margin:7px auto 5px}.debug-techniques{top:102px;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.debug-technique{min-height:60px;grid-template-columns:42px 1fr;padding:5px}.debug-technique .debug-icon{width:42px;height:42px}.debug-game-tools{top:76px}.result-card{padding:10px 22px}.result-card h2{font-size:2rem}.result-grid b{font-size:1.25rem}.result-materials .sprite-icon{width:40px;height:40px}.shop-header{height:58px}.shop-header strong{font-size:1.15rem}.shop-message{top:64px;padding:6px 12px}.shop-products{top:108px;grid-template-columns:repeat(4,1fr);gap:7px}.product-card{grid-template-columns:48px 1fr;padding:5px}.product-card .shop-icon{width:48px;height:48px}.gift-beaker{width:170px;height:145px}.gift-card{padding:10px 24px 14px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* タッチ操作は左右とも、上にジャンプ・下に2ボタンの三角配置 */
.controls{
  --control-size:84px;--control-track:92px;
  display:grid;grid-template-columns:repeat(2,var(--control-track));grid-template-rows:repeat(2,var(--control-track));
  place-items:center;gap:6px;
}
.controls button{width:var(--control-size);height:var(--control-size);opacity:.68;backdrop-filter:blur(2px)}
.controls .special{width:calc(var(--control-size) + 8px);height:calc(var(--control-size) + 8px)}
.controls .jump{grid-column:1/3;grid-row:1;justify-self:center;opacity:.38}
.controls button.pressed,.controls button:active{opacity:.96}
@media (max-height:520px){.controls{--control-size:70px;--control-track:78px}}