:root{--b:#1084FE;--bg:rgba(16,132,254,.18);--panel:rgba(0,0,0,.82);--line:rgba(255,255,255,.14);--r:12px;--slot:52px;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:#eee;font-family:system-ui,-apple-system,sans-serif;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block}
h1{font-weight:800;color:#eee;font-size:min(9vh,15vw,76px);margin:0;letter-spacing:.05em;text-shadow:0 4px 0 #0008}h1 span{color:var(--b)}
h2{margin:0 0 4px;font-size:24px}
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;z-index:20}
.dim{background:rgba(0,0,0,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#app[data-screen=title] #title{display:flex;background:linear-gradient(#0006,#0000 40%,#0009)}
#app[data-screen=pause] #menu{display:flex}
#app[data-screen=fainted] #faint{display:flex}
.sub{color:#eee;margin:0 0 8px;text-shadow:0 1px 3px #000,0 0 8px #000}.fine{color:#ccc;text-shadow:0 1px 3px #000;font-size:13px;max-width:420px;text-align:center;margin:4px 0}
.col{display:flex;flex-direction:column;gap:10px;width:min(340px,86vw)}
.btn{font:inherit;font-weight:650;font-size:17px;min-height:52px;border-radius:var(--r);border:1px solid var(--line);background:#111;color:#eee;padding:10px 16px;cursor:pointer;touch-action:manipulation}
.btn.primary{background:var(--b);border-color:var(--b);color:#fff}.btn.ghost{background:transparent}.btn.small{min-height:40px;font-size:14px}
.btn:active{transform:scale(.97)}
.btn.world{display:flex;flex-direction:column;align-items:flex-start;flex:1;text-align:left}.btn.world small{color:#aaa;font-weight:400}
.wrow{display:flex;gap:8px;align-items:stretch}
.field{font:inherit;font-size:17px;min-height:48px;border-radius:var(--r);border:1px solid var(--line);background:#000;color:#eee;padding:0 14px;width:100%;user-select:text;-webkit-user-select:text}
.segs{display:flex;gap:6px}.seg{flex:1;font:inherit;font-weight:650;min-height:48px;border-radius:var(--r);border:1px solid var(--line);background:#111;color:#aaa;padding:0 14px}
.seg.on{background:var(--bg);border-color:var(--b);color:#eee}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#eee}.set input{width:150px;accent-color:var(--b)}.set .seg{flex:0 0 74px}
#ui{position:fixed;inset:0;z-index:5;pointer-events:none}
#ui>*{pointer-events:auto}
#touch{position:fixed;inset:0;z-index:1}
#hud{position:fixed;inset:0;pointer-events:none;z-index:2;display:none}
#hud>*{pointer-events:auto}
#app[data-screen=play] #hud,#app[data-screen=inventory] #hud{display:block}
#app[data-screen=title] #touch,#app[data-screen=pause] #touch{display:none}
.icon-btn{position:absolute;top:calc(10px + env(safe-area-inset-top));min-width:48px;height:48px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);color:#eee;font:inherit;font-weight:700;padding:0 12px}
#btn-pause{left:calc(10px + env(safe-area-inset-left))}#btn-bag-top{right:calc(10px + env(safe-area-inset-right))}
#quest{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;max-width:calc(100vw - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
#stats{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--slot) + 22px + env(safe-area-inset-bottom));display:flex;gap:14px;pointer-events:none}
.row{display:flex;gap:1px}
.heart,.drum{width:14px;height:14px;display:inline-block;background-size:contain;background-repeat:no-repeat}
.heart.full{background:radial-gradient(circle at 30% 35%,#ffa0a0 0 3px,#FF6B6B 4px 100%);clip-path:polygon(50% 95%,5% 45%,10% 15%,30% 5%,50% 22%,70% 5%,90% 15%,95% 45%);}
.heart.half{background:linear-gradient(90deg,#FF6B6B 50%,#3a2026 50%);clip-path:polygon(50% 95%,5% 45%,10% 15%,30% 5%,50% 22%,70% 5%,90% 15%,95% 45%)}
.heart.empty{background:#3a2026;clip-path:polygon(50% 95%,5% 45%,10% 15%,30% 5%,50% 22%,70% 5%,90% 15%,95% 45%)}
#hearts.low .heart.full{animation:pulse .7s infinite}
@keyframes pulse{50%{transform:scale(1.2)}}
.drum{border-radius:50% 50% 40% 40%}.drum.full{background:#E0913F;box-shadow:inset -3px -3px 0 #a8612a}.drum.half{background:linear-gradient(90deg,#E0913F 50%,#3a2d20 50%)}.drum.empty{background:#3a2d20}
#hotbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(8px + env(safe-area-inset-bottom));display:flex;gap:4px;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);align-items:center}
.slot{position:relative;width:var(--slot);height:var(--slot);border-radius:10px;border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);padding:0;color:#eee;font:inherit;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;touch-action:none}
.slot.sel{border-color:var(--b);background:var(--bg);box-shadow:0 0 0 2px #1084FE55}
.slot.bag{background:#1084FE33;border-color:#1084FE88}
.slot.picked{border-color:#FFC93C;background:#FFC93C22}
.slot.big{--slot:64px}
.dots{color:#aaa;font-size:10px;padding:0 2px}
.ic{width:32px;height:32px;background-image:var(--icons);background-size:var(--icons-w) auto;image-rendering:pixelated;position:relative;pointer-events:none}
.ic b{position:absolute;right:-8px;bottom:-8px;font-size:12px;text-shadow:0 1px 2px #000,0 0 2px #000}
.ic i{position:absolute;left:0;bottom:-6px;height:3px;border-radius:2px}
#cross{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;display:none}
#cross:before,#cross:after{content:"";position:absolute;background:#fff;opacity:.85;box-shadow:0 0 2px #000}
#cross:before{left:8px;top:0;width:2px;height:18px}#cross:after{top:8px;left:0;height:2px;width:18px}
html[data-input=mouse] #cross{display:block}
#ring{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;display:none;pointer-events:none;background:conic-gradient(#fff var(--p,0deg),#fff3 0);-webkit-mask:radial-gradient(circle,transparent 21px,#000 22px);mask:radial-gradient(circle,transparent 21px,#000 22px)}
#toast{position:absolute;left:50%;top:30%;transform:translate(-50%,-6px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 16px;font-weight:650;opacity:0;transition:.2s;pointer-events:none;text-align:center;max-width:80vw}
#toast.on{opacity:1;transform:translate(-50%,0)}
#tb{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(var(--slot) + 40px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:flex-end}
html[data-input=mouse] #tb{display:none}
.lefty #tb{right:auto;left:calc(14px + env(safe-area-inset-left))}
.tbtn{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#eee;font:inherit;font-weight:700;font-size:14px;touch-action:none}
.tbtn.on{background:var(--b);border-color:var(--b)}

#pad{position:fixed;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:rgba(0,0,0,.18);display:none;pointer-events:none;z-index:3}
#pad-knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.45)}
#sheet{position:fixed;left:0;right:0;bottom:0;max-height:78vh;height:78vh;background:#000;border-top:1px solid var(--line);border-radius:18px 18px 0 0;z-index:10;display:none;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
@media (min-width:700px){#sheet{left:50%;width:min(720px,94vw);transform:translateX(-50%);height:72vh}}
#app[data-screen=inventory] #sheet{display:flex}
#app[data-screen=inventory] #tb,#app[data-screen=inventory] #stats,#app[data-screen=inventory] #quest{display:none}
.sheet-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:6px;flex:1;overflow-x:auto}
.tab{font:inherit;font-weight:650;min-height:44px;border-radius:var(--r);border:1px solid var(--line);background:#111;color:#aaa;padding:0 14px;white-space:nowrap}
.tab.on{background:var(--bg);border-color:var(--b);color:#eee}
.close{font:inherit;font-weight:700;min-height:44px;border-radius:var(--r);border:0;background:var(--b);color:#fff;padding:0 16px}
.sheet-body{overflow-y:auto;padding:12px;flex:1;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.hint{color:#aaa;font-size:13px;margin:0 0 10px}
.recipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.recipe{display:flex;gap:12px;align-items:center;text-align:left;font:inherit;color:#aaa;background:#0b0b0b;border:1px solid var(--line);border-radius:var(--r);padding:10px;min-height:64px;opacity:.6}
.recipe.can{opacity:1;color:#eee;border-color:#1084FE88;background:#1084FE14}
.recipe .ic{flex:0 0 32px;transform:scale(1.25);margin:0 6px}
.rname{display:flex;flex-direction:column;gap:4px}.rname small{color:#FFC93C}
.need{display:flex;flex-wrap:wrap;gap:6px;font-size:12px}.need span{display:flex;align-items:center;gap:2px}.need .ic{transform:scale(.6);margin:-6px}
.need .no{color:#ff8a8a}
.grid{display:grid;grid-template-columns:repeat(9,minmax(0,var(--slot)));gap:5px;justify-content:center;margin-bottom:12px}
.grid.all{grid-template-columns:repeat(auto-fill,var(--slot));margin-top:10px}
.grid .sep{grid-column:1/-1;height:4px}
.grid .slot.hot{border-color:rgba(16,132,254,.35)}
@media (max-width:520px){.grid:not(.all){--slot:36px;gap:3px}.grid:not(.all) .ic{transform:scale(.8)}}
.oven{display:flex;align-items:center;justify-content:center;gap:20px;margin:6px 0 16px}
.ocol{display:flex;flex-direction:column;align-items:center;gap:6px}
.oslot{display:flex;flex-direction:column;align-items:center;gap:3px;color:#aaa}
.fire{width:22px;height:22px;border-radius:50% 50% 40% 40%;background:linear-gradient(0deg,#FF8A3C calc(var(--p,0)*100%),#222 0)}
.arrow{width:60px;height:12px;border-radius:6px;background:linear-gradient(90deg,#eee calc(var(--p,0)*100%),#222 0)}
.hidden{display:none}
.setcol{gap:14px}
body.hurt:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:30;box-shadow:inset 0 0 120px #ff2a2a;animation:hurt .45s forwards}
@keyframes hurt{to{opacity:0}}
@media (orientation:portrait) and (max-width:600px){:root{--slot:48px}}
#load-msg{color:#aaa}
#hint{position:absolute;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translate(-50%,-6px);background:#1084FE;color:#fff;border-radius:var(--r);padding:8px 14px;font-weight:650;font-size:14px;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}
#hint.on{opacity:1;transform:translate(-50%,0)}
#quest.done{background:#1E7D3A;border-color:#4CD964}
.btn.big{min-height:64px;font-size:22px}
.chip{margin:0 auto 12px;display:block}
.cgrid{display:grid;gap:5px}
.slot.can{border-color:#4CD964;background:#4CD96422}
#slot-menu{position:absolute;transform:translate(-50%,-100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px;display:flex;flex-direction:column;gap:6px;align-items:center;z-index:4}
#click-play{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:22px;font-weight:700;background:rgba(0,0,0,.35);cursor:pointer}
.qlist{display:flex;flex-direction:column;gap:3px;font-size:14px;color:#aaa;background:#111;border-radius:var(--r);padding:10px 12px;max-height:30vh;overflow:auto}.qlist .qd{color:#4CD964}.qlist .qn{color:#eee;font-weight:700}
#menu .col{max-height:80vh;overflow:auto}
#vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 90px 30px rgba(255,40,40,.65);opacity:0;z-index:3}
#vignette.on{animation:vig .35s ease-out}
@keyframes vig{0%{opacity:1}43%{opacity:1}100%{opacity:0}}
@media (pointer:fine) and (min-width:900px){:root{--slot:56px}}
@media (prefers-reduced-motion:reduce){#hearts.low .heart.full{animation:none}}
#menu .col>*{flex-shrink:0}
@media (max-height:500px){#menu h2{margin:4px 0 6px}#menu .col{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(760px,94vw)}#menu .col .qlist{grid-column:2;grid-row:1 / span 4;max-height:none}#menu .col>b{display:none}#menu .btn{min-height:46px}}