:root{--brown:#2a1d14;--brown2:#1a120c;--orange:#ffa23a;--orange2:#f0781e;--cream:#fff4dc;--gold:#ffd166;--font:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;--pop:"Mochiy Pop One","M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0e0906;overflow:hidden;overscroll-behavior:none;font-family:var(--font);color:#fff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
#stage{position:absolute;width:540px;height:960px;transform-origin:0 0;overflow:hidden;background:#1b120b}#gl{position:absolute;inset:0;display:block;touch-action:none}.hidden{display:none!important}button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;background:none;padding:0;touch-action:manipulation}button:disabled{opacity:.4;cursor:default}.screen{position:absolute;inset:0}
#hud{position:absolute;inset:0;pointer-events:none}#hud>*{pointer-events:auto}.ibtn{position:absolute;top:14px;width:46px;height:46px;border-radius:50%;background:rgba(40,28,18,.72);backdrop-filter:blur(4px);font-size:26px;line-height:44px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}#btnBack{left:12px}#btnMute{right:12px}
#steps{position:absolute;left:50%;top:18px;transform:translateX(-50%);display:flex;background:rgba(40,28,18,.72);backdrop-filter:blur(4px);border-radius:24px;padding:4px;box-shadow:0 2px 8px rgba(0,0,0,.35);white-space:nowrap}#steps i{font-style:normal;font-weight:800;font-size:14px;padding:7px 10px;border-radius:20px;color:rgba(255,255,255,.55)}#steps i.on{background:linear-gradient(#ffb04a,#f0781e);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}#steps i.done{color:#ffd9a0}
#caption{position:absolute;left:16px;right:16px;bottom:var(--dockh,190px);margin-bottom:14px;padding:12px 16px;border-radius:18px;background:rgba(44,31,22,.86);backdrop-filter:blur(6px);text-align:center;font-size:18px;line-height:1.55;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.4);transition:opacity .25s,transform .25s;pointer-events:none}#caption b{color:var(--orange)}#caption.off{opacity:0;transform:translateY(8px)}
#status{position:absolute;top:86px;left:50%;transform:translateX(-50%);max-width:480px;width:max-content;padding:8px 18px;border-radius:20px;background:rgba(40,28,18,.8);font-size:15px;font-weight:800;text-align:center;line-height:1.5;color:var(--cream);pointer-events:none;box-shadow:0 3px 10px #0003}#status:empty,#guide:empty{display:none}#guide{position:absolute;top:142px;left:22px;right:22px;padding:10px 14px;border-radius:14px;background:rgba(44,31,22,.86);font-size:14px;font-weight:700;color:#ffda9f;text-align:center;line-height:1.6;pointer-events:none}
#dock{position:absolute;left:0;right:0;bottom:0;min-height:96px;background:linear-gradient(#2d2016,#1a120c);border-top:2px solid #4a3524;box-shadow:0 -6px 18px rgba(0,0,0,.45);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:12px 12px 20px}#dock.empty{display:none}.dock-label{display:none}.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;justify-content:center;flex-wrap:nowrap}.chips::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;width:68px;height:84px;border-radius:16px;background:linear-gradient(#4a3626,#34261b);border:2px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12.5px;font-weight:800;position:relative}.chip img{width:62px;height:42px;object-fit:contain;display:block}.chip .dot{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 -4px 6px rgba(0,0,0,.35),inset 0 3px 4px rgba(255,255,255,.35)}.chip.on{border-color:var(--gold);background:linear-gradient(#6b4a2c,#4a3322)}.chip .badge{position:absolute;top:-4px;right:-2px;font-style:normal;font-size:12px;background:#e0412f;border-radius:9px;padding:1px 6px;font-weight:800}.chips.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;overflow:visible;padding-top:6px}.chips.grid .chip{width:auto;height:74px;font-size:11.5px}.chips.grid .chip img{width:54px;height:36px}
.acts{display:flex;gap:10px}.btn{flex:1;height:58px;border-radius:29px;padding:0 12px;font-size:21px;font-weight:800;letter-spacing:.06em;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.22)}.btn.pri,.hold-action{background:linear-gradient(#ffb04a,#f0781e);border:0;box-shadow:0 4px 0 #a8480b,0 6px 14px rgba(0,0,0,.4)}.btn.pri:active,.hold-action:active{transform:translateY(3px);box-shadow:0 1px 0 #a8480b}.btn.red{background:linear-gradient(#f0583f,#c4301c);border:0;box-shadow:0 4px 0 #7d170a,0 6px 14px rgba(0,0,0,.4)}.btn.red:active{transform:translateY(3px);box-shadow:0 1px 0 #7d170a}.btn.sm{flex:0 0 104px;font-size:16px}.hold-action{height:76px;border-radius:38px;font-size:24px;font-weight:800;letter-spacing:.08em;touch-action:none;text-shadow:0 2px 0 #a8480b}.hold-action small{display:block;font-size:12px;letter-spacing:.06em;margin-top:3px;opacity:.85}
#gauge{position:absolute;left:70px;right:70px;bottom:calc(var(--dockh,190px) + 116px);height:14px;border-radius:7px;background:rgba(30,20,12,.8);border:2px solid rgba(255,255,255,.25);box-shadow:0 4px 12px rgba(0,0,0,.4)}#gfill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#ffd166,#ff9a3a);border-radius:6px}#gauge.over{animation:shake .12s infinite;border-color:#ff4a3a}#gtxt{position:absolute;left:0;right:0;top:-34px;text-align:center;line-height:28px;font-weight:800;color:#fff;text-shadow:0 1px 5px #000,0 1px 10px #000;letter-spacing:.1em;font-size:17px}
#title{pointer-events:none}#title>*{pointer-events:auto}#title .noren{position:absolute;left:68px;right:68px;top:0;height:208px;display:flex;gap:7px;pointer-events:none;transform-origin:50% 0;animation:sway 7s ease-in-out infinite}#title .noren::before{content:'';position:absolute;left:-14px;right:-14px;top:-2px;height:14px;border-radius:7px;background:linear-gradient(#b98a52,#7a5126);box-shadow:0 3px 6px #0006;z-index:1}#title .noren i{flex:1;border-radius:0 0 12px 12px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px),linear-gradient(#4b2d18,#2e1b0d);box-shadow:inset 0 -6px 0 rgba(0,0,0,.22),0 10px 18px rgba(0,0,0,.35)}#title .noren i:nth-child(2){height:96%}#title .logo{position:absolute;left:0;right:0;top:52px;text-align:center;pointer-events:none;animation:sway 7s ease-in-out infinite;transform-origin:50% -52px}.l1{font-family:var(--pop);font-size:58px;line-height:1.1;color:#ffb347;background:linear-gradient(#fff1c9 8%,#ffb347 48%,#f0781e 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 #1a0d06) drop-shadow(0 0 1px #1a0d06);letter-spacing:.02em}.l1 span{background:linear-gradient(#ff8a6a,#e0412f);-webkit-background-clip:text;background-clip:text}.l2{display:inline-block;margin-top:12px;padding:5px 18px;border-radius:14px;background:#1f1209;border:2px solid #ffd16699;box-shadow:0 3px 8px #0006;font-size:15px;font-weight:800;letter-spacing:.38em;text-indent:.38em;color:#ffe08a;text-shadow:0 1px 2px #000}.best{position:absolute;left:50%;top:240px;transform:translateX(-50%);padding:6px 16px;border-radius:16px;background:rgba(40,28,18,.78);font-size:14px;font-weight:800;color:var(--cream);box-shadow:0 3px 10px #0004;pointer-events:none;white-space:nowrap}.best:empty{display:none}.best b{color:var(--gold);font-size:17px;margin:0 3px}.tcard{position:absolute;left:22px;right:22px;bottom:186px;background:rgba(36,25,17,.86);backdrop-filter:blur(6px);border-radius:20px;padding:12px 16px 10px;box-shadow:0 6px 18px rgba(0,0,0,.45);border:1px solid rgba(255,209,102,.18)}.thead{font-size:13px;font-weight:800;letter-spacing:.3em;color:var(--gold);text-align:center;margin-bottom:4px}.tcard p+p{border-top:1px dashed rgba(255,255,255,.1);padding-top:7px}.tcard p{display:flex;gap:10px;align-items:center;margin:6px 0;font-size:15px;line-height:1.45;font-weight:700}.tcard i{flex:0 0 24px;height:24px;border-radius:50%;background:var(--orange2);font-style:normal;text-align:center;line-height:24px;font-size:14px;font-weight:800}.tcard b{color:var(--orange)}.tbtns{position:absolute;left:34px;right:34px;bottom:48px;display:flex;flex-direction:column;gap:12px;align-items:center}.cta{width:100%;height:76px;border-radius:38px;background:linear-gradient(#ffb04a,#f0781e);font-family:var(--pop);font-size:34px;letter-spacing:.2em;box-shadow:0 6px 0 #a8480b,0 10px 22px rgba(0,0,0,.5);text-shadow:0 2px 0 rgba(120,50,0,.5)}.cta:active{transform:translateY(4px);box-shadow:0 2px 0 #a8480b}.sub{height:44px;padding:0 26px;border-radius:22px;background:rgba(40,28,18,.8);font-size:17px;font-weight:800;border:2px solid rgba(255,255,255,.2)}.sub em{font-style:normal;color:var(--gold);margin-left:6px}
#result{pointer-events:none}#result .sheet{position:absolute;left:0;right:0;bottom:0;pointer-events:auto;padding:16px 20px 22px;background:linear-gradient(rgba(26,18,12,.88),rgba(14,10,7,.98));border-top:3px solid #ffa23a;border-radius:26px 26px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.5);animation:rise .5s ease-out}.rtier{display:inline-block;padding:3px 14px;border-radius:14px;font-weight:800;font-size:14px;background:#6a4a2c;letter-spacing:.1em}.rtier em{font-style:normal;background:#e0412f;border-radius:8px;padding:0 6px;margin-left:8px;font-size:11px}.t-meat .rtier{background:#8a3a1c}.t-other .rtier{background:#c0507a}.t-legend .rtier{background:linear-gradient(90deg,#ffd166,#fff3c0);color:#5a3a00}.t-fail .rtier{background:#4a4a54}.t-lfail .rtier{background:#4a2a8a}.rstars{display:inline-block;margin-left:10px;color:#ffd166;font-size:22px;letter-spacing:.08em;vertical-align:middle;text-shadow:0 1px 4px #0008}.rsteps{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:13px;font-weight:800;color:#f1dfc1}.rsteps span,.rsteps b{padding:3px 9px;border-radius:10px;background:#ffffff14}.rsteps b{background:#c0507a55}.rsteps i{font-style:normal;color:#ffd166}.rsteps .rscore{background:#ffa23a33;color:#ffd166}.bstar{font-style:normal;color:#ffd166;margin-left:8px;font-size:14px}
.rname{font-family:var(--pop);font-size:36px;margin:6px 0 2px;letter-spacing:.04em}.rcomment{font-size:16px;font-weight:700;opacity:.92;line-height:1.5}.rnote{margin-top:6px;font-size:13px;color:#ffd9a0;font-weight:700}.radvice{margin:10px 0;padding:9px 12px;border-left:3px solid var(--gold);background:#ffffff0d;border-radius:0 8px 8px 0;color:#f1dfc1;font-size:14px;line-height:1.6}.rcount{margin:8px 0 2px;font-size:13px;color:#ffd166;font-weight:800}.rbtns{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}.rbtns .btn{height:46px;font-size:16px}.rbtns .wide{grid-column:1;height:58px;font-size:22px}.recipe-details{margin-top:10px;font-size:13px;color:#d9cdb4}.recipe-details summary{cursor:pointer}.rrecipe{margin-top:7px;font-size:13px;line-height:1.8;color:#d9cdb4}
.it.open{cursor:pointer}.it.open:active{background:rgba(255,255,255,.14)}#viewer{pointer-events:none}.vcard{position:absolute;left:0;right:0;bottom:0;pointer-events:auto;padding:16px 20px 22px;background:linear-gradient(rgba(26,18,12,.88),rgba(14,10,7,.98));border-top:3px solid #ffa23a;border-radius:26px 26px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.5);animation:rise .4s ease-out}.vcard .btn{width:100%;margin-top:14px;height:52px;font-size:19px}.vhint{margin-top:8px;font-size:12px;color:#d9cdb4;opacity:.8}
.dim{background:rgba(14,10,7,.95);overflow-y:auto;overflow-x:hidden}.card{margin:0 auto;padding:24px 18px 28px;width:504px}.card h2{margin:8px 0 12px;font-family:var(--pop);font-size:28px;text-align:center;letter-spacing:.12em;font-weight:400}.bsum{text-align:center;color:#ffd166;font-weight:800;margin:0 0 6px}.sec{margin:18px 0 6px;font-size:17px;color:var(--gold);letter-spacing:.12em;font-weight:800}.it{padding:12px;border-radius:12px;background:rgba(255,255,255,.08);margin:8px 0;font-size:15px;line-height:1.5;font-weight:700}.it.lock{opacity:.55}.it b{font-size:17px}.it span{display:block;font-size:13px;color:#d9cdb4;font-weight:600;margin-top:5px}.it small{margin-left:8px;color:#ffd166;font-size:12px}.it button{margin-top:9px;padding:8px 14px;border-radius:18px;background:#744c25;border:1px solid #ae804a;font-size:13px;font-weight:800}.book-close{position:sticky;bottom:0;padding:12px 0;background:#1a120cf2}.book-close .btn{width:100%}
#tapHint{position:absolute;left:0;top:0;pointer-events:none!important;opacity:0;transition:opacity .25s}#tapHint.on{opacity:1}#tapHint span{position:absolute;left:0;bottom:12px;transform:translateX(-50%);white-space:nowrap;padding:7px 14px;border-radius:16px;background:var(--orange2);font-size:16px;font-weight:800;box-shadow:0 3px 0 #a8480b,0 6px 12px #0006;animation:bob 1s ease-in-out infinite}#tapHint span::after{content:'';position:absolute;left:50%;bottom:-8px;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:var(--orange2)}
#toast{position:absolute;left:50%;top:250px;max-width:480px;width:max-content;transform:translate(-50%,-10px);background:rgba(20,14,9,.88);padding:8px 18px;border-radius:20px;font-weight:800;font-size:15px;opacity:0;transition:.25s;pointer-events:none;z-index:8}#toast.on{opacity:1;transform:translate(-50%,0)}#big{position:absolute;left:0;right:0;top:230px;text-align:center;font-family:var(--pop);font-size:60px;color:#fff;-webkit-text-stroke:10px #b8321e;paint-order:stroke fill;text-shadow:0 6px 0 rgba(0,0,0,.25);opacity:0;pointer-events:none}#big.on{animation:pop 1.6s ease-out forwards}#flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5}#loading{position:absolute;inset:0;background:#1b120b;display:flex;align-items:center;justify-content:center;font-size:22px;letter-spacing:.2em;transition:opacity .5s;z-index:9}#loading.off{opacity:0;pointer-events:none}#stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(18,8,0,.30) 100%)}button:focus-visible{outline:3px solid #fff0bc;outline-offset:3px}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(.6deg)}}@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}@keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(1.7) rotate(-4deg)}15%{opacity:1;transform:scale(1) rotate(-2deg)}85%{opacity:1}100%{opacity:0;transform:scale(1) rotate(-2deg)}}@keyframes shake{0%,100%{transform:none}25%{transform:translate(2px,-2px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}