@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&family=ZCOOL+XiaoWei&display=swap";html{height:100%}:root{--wood-deep:#5c3d2e;--wood:#8b5e3c;--wood-light:#c4a484;--cream:#fff6e8;--cream-dark:#f0e0c8;--tomato:#d62828;--yolk:#f4a261;--leaf:#2a9d8f;--ink:#2b1d14;--ink-soft:#5a4030;--flame:#e85d04;--success:#2a9d8f;--warn:#bc6c25;--shadow:#2b1d142e;--radius:18px;color:var(--ink);background:var(--cream);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Noto Sans TC,Microsoft JhengHei,sans-serif;font-weight:500;line-height:1.45}*{box-sizing:border-box}html,body,#root{height:100%;min-height:100%;margin:0}body{background:radial-gradient(at 20% 0,#ffe8c8 0%,#0000 50%),radial-gradient(at 90% 10%,#ffd7a8 0%,#0000 45%),linear-gradient(#fff8ee 0%,#f3e2c8 55%,#e8d0a8 100%);min-width:320px}button{font:inherit;cursor:pointer}.app{flex-direction:column;height:100%;min-height:100%;display:flex}.app--playing{gap:10px;max-width:1400px;margin:0 auto;padding:12px 16px 16px}.screen{flex:1;place-items:center;padding:24px;display:grid}.screen-start{grid-template-columns:1.1fr .9fr;align-items:center;gap:24px;width:100%;max-width:1100px;margin:0 auto}.brand{color:var(--wood);letter-spacing:.08em;margin:0 0 8px;font-family:ZCOOL XiaoWei,Noto Sans TC,serif;font-size:clamp(1.4rem,3vw,2rem)}.title{color:var(--tomato);text-shadow:0 4px #ffffff80;margin:0 0 12px;font-family:ZCOOL XiaoWei,Noto Sans TC,serif;font-size:clamp(3.2rem,8vw,5.5rem);line-height:1.05}.lead{color:var(--ink-soft);max-width:28ch;margin:0 0 18px;font-size:clamp(1.15rem,2.4vw,1.45rem)}.start-points{color:var(--ink-soft);gap:10px;margin:0 0 28px;padding:0;font-size:1.1rem;list-style:none;display:grid}.start-points li{padding-left:1.6em;position:relative}.start-points li:before{content:"●";color:var(--yolk);font-size:.75em;position:absolute;top:.35em;left:0}.btn-primary{appearance:none;color:#fff;box-shadow:0 8px 0 #8f1d1d, 0 12px 24px var(--shadow);background:linear-gradient(#ef6c3a 0%,#d62828 100%);border:none;border-radius:999px;padding:.85em 1.8em;font-size:clamp(1.35rem,3vw,1.75rem);font-weight:900;transition:transform .15s,box-shadow .15s}.btn-primary:hover{transform:translateY(-2px)}.btn-primary:active{box-shadow:0 3px 0 #8f1d1d, 0 6px 12px var(--shadow);transform:translateY(4px)}.start-note{color:var(--ink-soft);margin:16px 0 0;font-size:1rem}.start-visual{background:linear-gradient(#0000 40%,#8b5e3c26 40%,#8b5e3c40 100%),radial-gradient(circle at 50% 40%,#fff 0%,#ffe8cc 55%,#0000 70%);border-radius:40% 40% 12px 12px;place-items:center;min-height:280px;animation:4s ease-in-out infinite floaty;display:grid;position:relative}.start-dish{filter:drop-shadow(0 12px 16px #00000026);font-size:clamp(6rem,16vw,9rem)}.start-steam{background:radial-gradient(at 30% 80%,#ffffffb3,#0000 60%),radial-gradient(at 70% 70%,#ffffff8c,#0000 55%);width:80px;height:60px;animation:2.8s ease-in-out infinite steam;position:absolute;top:18%}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes steam{0%,to{opacity:.35;transform:translateY(0)scaleX(1)}50%{opacity:.8;transform:translateY(-16px)scaleX(1.15)}}.screen-complete{background:radial-gradient(circle at 50% 30%,#fff8e8,#0000 55%),linear-gradient(#fff6e8,#f0d9b0)}.complete-card{text-align:center;border:3px solid var(--wood-light);box-shadow:0 18px 40px var(--shadow);background:#fffaf0eb;border-radius:28px;width:100%;max-width:480px;padding:36px 40px 40px;animation:.55s cubic-bezier(.2,.9,.3,1.2) both pop-in}@keyframes pop-in{0%{opacity:0;transform:scale(.88)translateY(12px)}to{opacity:1;transform:scale(1)translateY(0)}}.complete-dish{height:120px;margin-bottom:8px;position:relative}.complete-dish__plate{font-size:5.5rem;animation:3s ease-in-out infinite floaty;display:inline-block}.complete-dish__food{font-size:2.4rem;animation:3s ease-in-out .2s infinite floaty;position:absolute;top:28%;left:50%;transform:translate(-50%)}.complete-card h1{color:var(--wood-deep);margin:0 0 6px;font-family:ZCOOL XiaoWei,serif;font-size:clamp(2.2rem,5vw,3rem)}.complete-rating{color:var(--tomato);margin:0 0 8px;font-size:clamp(1.6rem,4vw,2.1rem);font-weight:900}.complete-score{margin:0 0 12px;font-size:1.4rem}.complete-score strong{color:var(--flame);font-size:2.2rem}.complete-breakdown{color:var(--ink-soft);gap:4px;margin:0 0 28px;padding:0;font-size:1.05rem;list-style:none;display:grid}.hud{justify-content:space-between;align-items:stretch;gap:16px;display:flex}.hud-step{border:2px solid var(--wood-light);border-radius:var(--radius);box-shadow:0 6px 16px var(--shadow);background:#fffaf0eb;flex:1;align-items:flex-start;gap:14px;padding:12px 16px;display:flex}.hud-step__icon{font-size:2.8rem;line-height:1}.hud-step__meta{color:var(--ink-soft);margin:0;font-size:1rem;font-weight:700}.hud-step__title{color:var(--ink);margin:2px 0 4px;font-size:clamp(1.5rem,3vw,2rem);font-weight:900}.hud-step__hint{color:var(--ink-soft);margin:0;font-size:clamp(1.05rem,2vw,1.25rem)}.hud-score{border:2px solid var(--yolk);border-radius:var(--radius);text-align:center;min-width:110px;box-shadow:0 6px 16px var(--shadow);background:linear-gradient(#fff8ee,#ffe0b8);place-content:center;padding:8px 16px;display:grid}.hud-score__label{color:var(--ink-soft);font-size:1rem;font-weight:700}.hud-score__value{color:var(--flame);font-size:2.4rem;font-weight:900;line-height:1.1}.play-layout{flex:1;grid-template-columns:minmax(200px,280px) 1fr;gap:14px;min-height:0;display:grid}.play-layout>.scene-stage{min-height:0}.camera-panel{flex-direction:column;gap:8px;min-height:0;display:flex}.camera-frame{border-radius:var(--radius);border:3px solid var(--wood);min-height:180px;box-shadow:0 8px 20px var(--shadow);background:#1a120c;flex:1;position:relative;overflow:hidden}.camera-video,.camera-skeleton{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.camera-skeleton{opacity:.75;pointer-events:none}.camera-overlay{text-align:center;color:#fff8ee;background:#1e120ab8;place-content:center;gap:6px;padding:16px;font-size:1.05rem;font-weight:700;display:grid;position:absolute;inset:0}.camera-overlay span{opacity:.9;font-size:.95rem;font-weight:500}.camera-badge{color:#fff;background:#2a9d8feb;border-radius:999px;padding:4px 10px;font-size:.85rem;font-weight:700;position:absolute;bottom:10px;left:10px}.camera-tip{color:var(--ink-soft);text-align:center;margin:0;font-size:.95rem}.kitchen{border:3px solid var(--wood);box-shadow:0 10px 28px var(--shadow);touch-action:none;cursor:none;background:#d9b896;border-radius:22px;min-height:360px;transition:filter .35s;position:relative;overflow:hidden}.kitchen--paused{filter:saturate(.85)}.scene-stage{flex:1;min-height:0;display:flex;position:relative}.scene-stage .kitchen{flex:1;width:100%}.scene-banner{z-index:6;border:2px solid var(--wood-light);color:var(--wood-deep);pointer-events:none;box-shadow:0 4px 12px var(--shadow);background:#fff8eeeb;border-radius:999px;align-items:center;gap:8px;padding:6px 16px;font-size:1.15rem;font-weight:900;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%)}.scene-banner__icon{font-size:1.4rem;line-height:1}.hud-step__scene{color:var(--flame);font-weight:900}.kitchen--theme-prep .kitchen__wall{background:linear-gradient(#f7ebda,#e8d2b0)}.kitchen--theme-chop .kitchen__counter{background:linear-gradient(#b8895a 0%,#8b5e3c 14%,#6e4528 100%)}.kitchen--theme-egg .kitchen__wall{background:linear-gradient(#fff3d6,#f0d9a8)}.kitchen--theme-stir .kitchen__wall{background:linear-gradient(#ffe8c8,#f0c98a)}.kitchen--theme-stove .kitchen__wall{background:linear-gradient(#3d2a22,#5c3d2e 40%,#8b5e3c)}.kitchen--theme-stove .kitchen__counter{background:linear-gradient(#4a3528 0%,#2b1d14 100%)}.kitchen--theme-stove .zone__label{background:#000000a6}.kitchen--theme-cook .kitchen__wall{background:linear-gradient(#4a3228,#7a4f32)}.kitchen--theme-fry .kitchen__wall{background:linear-gradient(#2b1d14,#5c3d2e)}.kitchen--theme-fry .kitchen__counter{background:linear-gradient(#3d2a22,#1a120c)}.kitchen--theme-plate .kitchen__wall{background:linear-gradient(#fff6e8,#f0d9b0)}.kitchen--theme-plate .kitchen__counter{background:linear-gradient(#c99562,#8b5e3c)}.scene-transition{z-index:30;background:#2b1d148c;border-radius:22px;place-items:center;animation:.35s both fade-veil;display:grid;position:absolute;inset:0}.scene-transition__card{text-align:center;border:3px solid var(--yolk);background:#fffaf0f5;border-radius:24px;min-width:min(320px,80%);padding:28px 36px;animation:.45s cubic-bezier(.2,.9,.3,1.15) both pop-in;box-shadow:0 16px 40px #00000047}.scene-transition__label{color:var(--ink-soft);letter-spacing:.12em;margin:0;font-size:1.1rem;font-weight:700}.scene-transition__icon{margin:8px 0;font-size:4rem;line-height:1;animation:2.2s ease-in-out infinite floaty}.scene-transition__title{color:var(--tomato);margin:0 0 6px;font-family:ZCOOL XiaoWei,Noto Sans TC,serif;font-size:clamp(2rem,5vw,2.8rem)}.scene-transition__hint{color:var(--ink-soft);margin:0;font-size:1.2rem}@keyframes fade-veil{0%{opacity:0}to{opacity:1}}.kitchen__wall{background:repeating-linear-gradient(90deg,#f2e2cc 0 48px,#ebd6b8 48px 50px),linear-gradient(#f7ebda,#e8d2b0);position:absolute;inset:0 0 42%}.kitchen__counter{background:linear-gradient(#a87345 0%,#8b5e3c 12%,#7a4f32 100%);height:58%;position:absolute;bottom:0;left:0;right:0;box-shadow:inset 0 10px #ffdcb440}.kitchen__counter:before{content:"";background:linear-gradient(#c99562,#a87345);height:14px;position:absolute;top:0;left:0;right:0}.zone{z-index:2;border:2px dashed #0000;border-radius:16px;transition:border-color .2s,background .2s,box-shadow .2s;position:absolute}.zone--active{background:#ffc87847;border-color:#e85d04f2;animation:1.4s ease-in-out infinite pulse-zone;box-shadow:0 0 0 4px #e85d0433,inset 0 0 20px #ffdc9659}@keyframes pulse-zone{0%,to{box-shadow:0 0 0 4px #e85d042e,inset 0 0 16px #ffdc964d}50%{box-shadow:0 0 0 8px #e85d0447,inset 0 0 24px #ffdc9673}}.zone__label{color:#fff8ee;white-space:nowrap;pointer-events:none;background:#2b1d14bf;border-radius:999px;padding:2px 10px;font-size:.95rem;font-weight:700;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.prop{z-index:3;filter:drop-shadow(0 4px 4px #0003);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1;transition:transform .2s,opacity .2s;position:absolute}.prop-float{font-size:clamp(2.6rem,6vw,4.2rem);transform:translate(-50%,-50%)}.prop-float--xl{font-size:clamp(4rem,10vw,7rem)}.prop--held{opacity:.35;transform:translate(-50%,-50%)scale(.9)}.prop-float.is-chopped{font-size:clamp(2.2rem,5vw,3.4rem)}.prop-float.is-mixed{filter:drop-shadow(0 0 8px #f4a261b3)}.prop-float.is-on{animation:.6s ease-in-out infinite alternate flicker}@keyframes flicker{0%{filter:drop-shadow(0 0 4px #e85d04);transform:translate(-50%,-50%)scale(1)}to{filter:drop-shadow(0 0 12px #ffba08);transform:translate(-50%,-50%)scale(1.08)}}.prop-float.is-hot{filter:drop-shadow(0 0 10px #e85d0473)}.prop-float.is-done{animation:2.5s ease-in-out infinite floaty}.zone--stove.zone--active{background:#ff782852;border-color:#dc3c14}.motion-bar{z-index:5;background:#2b1d148c;border-radius:999px;place-items:center;width:min(280px,50%);height:28px;display:grid;position:absolute;bottom:10px;left:50%;overflow:hidden;transform:translate(-50%)}.motion-bar span{z-index:1;color:#fff8ee;font-size:.9rem;font-weight:700;position:relative}.motion-bar__fill{background:linear-gradient(90deg,#2a9d8f,#e9c46a);transition:width .15s linear;position:absolute;top:0;bottom:0;left:0}.hand-cursor{z-index:20;pointer-events:none;will-change:left, top;width:64px;height:64px;transition:left 70ms linear,top 70ms linear;position:absolute;transform:translate(-50%,-50%)}.hand-cursor__ring{opacity:.95;border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 calc(100% - 6px))}.hand-cursor__dot{border:3px solid var(--flame);background:#fff8eeeb;border-radius:50%;place-items:center;font-size:1.6rem;display:grid;position:absolute;inset:8px;box-shadow:0 4px 12px #00000040}.hand-cursor--holding .hand-cursor__dot{border-color:var(--tomato);background:#ffe0b0;width:auto;min-width:48px;font-size:1.8rem;inset:4px}.hud-footer{border:1px solid var(--wood-light);background:#fffaf0d9;border-radius:14px;flex-wrap:wrap;align-items:center;gap:14px;padding:8px 12px;display:flex}.progress-dots{gap:8px;display:flex}.dot{border:2px solid var(--wood-light);background:#d9c4a8;border-radius:50%;width:14px;height:14px}.dot--done{background:var(--leaf);border-color:var(--leaf)}.dot--current{background:var(--flame);border-color:var(--flame);box-shadow:0 0 0 3px #e85d0440}.hud-footer__tip{color:var(--ink-soft);flex:1;margin:0;font-size:1.05rem}.btn-ghost{appearance:none;border:2px solid var(--wood);color:var(--wood-deep);background:0 0;border-radius:999px;padding:.45em 1em;font-size:1.05rem;font-weight:700}.btn-ghost:hover{background:#8b5e3c1a}.toast{z-index:50;pointer-events:none;text-align:center;border-radius:18px;max-width:90vw;padding:.55em 1.1em;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;animation:1.8s both toast-in;position:fixed;top:18%;left:50%;transform:translate(-50%);box-shadow:0 12px 32px #0003}.toast--success{color:#fff;background:#2a9d8f}.toast--hint{color:var(--ink);border:2px solid var(--yolk);background:#fff3d6;font-size:clamp(1.2rem,3vw,1.6rem)}.toast--warn{color:#fff;background:#bc6c25}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,12px)scale(.92)}12%{opacity:1;transform:translate(-50%)scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-8px)}}@media (width<=900px){.screen-start{grid-template-columns:1fr}.start-visual{order:-1;min-height:200px}.play-layout{grid-template-rows:160px 1fr;grid-template-columns:1fr}.camera-tip{display:none}.kitchen{cursor:crosshair}}@media (width<=600px){.hud{flex-direction:column}.hud-score{flex-direction:row;justify-content:space-between;align-items:center;min-width:0;display:flex}.hud-score__value{font-size:1.8rem}}