*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;
  background:#f5e3ce;
  font-family:"Baloo 2","ZCOOL KuaiLe","PingFang SC","Microsoft YaHei",sans-serif;
  color:#3a2412;user-select:none}

#stage{position:fixed;inset:0}
svg#scene{width:100%;height:100%;display:block}

/* ---------- 摄像头 & 调试图层 ---------- */
#camWrap{position:absolute;right:16px;top:16px;width:128px;height:96px;
  border-radius:14px;overflow:hidden;border:3px solid rgba(255,214,150,.6);
  background:#000;opacity:.85;transition:opacity .3s;z-index:5;
  box-shadow:0 6px 22px rgba(60,30,10,.3)}
#camWrap.hidden{opacity:0;pointer-events:none}
#cam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}

/* 覆盖在视频上的调试画布 */
#debugCanvas{position:absolute;top:0;left:0;width:100%;height:100%;
  transform:scaleX(-1);pointer-events:none;z-index:6}

/* ---------- HUD ---------- */
#hud{position:absolute;left:0;right:0;top:0;padding:16px 22px;
  display:flex;justify-content:space-between;pointer-events:none;
  transition:opacity .3s;z-index:10}
#hud.hidden{opacity:0}
.chip{font-size:14px;letter-spacing:.08em;
  background:rgba(255,250,240,.95);
  border-radius:999px;padding:9px 20px;color:#6b4423;
  box-shadow:0 4px 0 rgba(140,90,45,.4),0 6px 16px rgba(80,45,15,.2);
  font-weight:800}
#hudProg{display:flex;gap:7px;align-items:center}
.pip{width:13px;height:13px;border-radius:50%;
  background:rgba(190,150,100,.3);transition:all .25s}
.pip.on{background:#f2a93b;box-shadow:0 0 0 3px rgba(242,169,59,.3)}
.pip.done{background:#7bc86c;box-shadow:0 0 0 3px rgba(123,200,108,.3)}

/* ---------- 提示条 ---------- */
#toast{position:absolute;left:50%;top:86px;
  transform:translate(-50%,-12px);
  background:rgba(255,250,240,.98);
  border-radius:999px;padding:12px 30px;font-size:15px;
  letter-spacing:.05em;color:#6b4423;white-space:nowrap;
  box-shadow:0 5px 0 rgba(140,90,45,.3),0 8px 24px rgba(80,45,15,.2);
  opacity:0;transition:opacity .3s,transform .3s;
  pointer-events:none;z-index:20;font-weight:800}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 底部标签 ---------- */
#tabs{position:absolute;left:0;right:0;bottom:0;height:90px;
  display:flex;align-items:center;justify-content:center;gap:16px;
  background:linear-gradient(to top,rgba(250,235,215,0.95) 30%,rgba(250,235,215,0.6) 70%,transparent);
  z-index:15;transition:opacity .3s}
#tabs.hidden{opacity:0;pointer-events:none}
.tab{font-family:inherit;font-size:16px;font-weight:800;
  letter-spacing:.06em;color:#8a5520;
  background:rgba(255,255,255,.85);border:none;
  padding:14px 32px;cursor:pointer;border-radius:999px;
  transition:all .18s;box-shadow:0 5px 0 rgba(140,90,45,.4);
  display:flex;align-items:center;gap:8px}
.tab:hover{color:#5c3712;transform:translateY(-2px);box-shadow:0 7px 0 rgba(140,90,45,.4)}
.tab:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(140,90,45,.4)}
.tab.active{background:linear-gradient(180deg,#ffc46b,#f2994a);color:#4a2a0c;
  box-shadow:0 5px 0 #b06a24,0 8px 20px rgba(242,153,74,.4)}
.tab .ico{font-size:18px}

/* ---------- 覆盖层 ---------- */
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 50% 40%,#5d3d1d,#2a1a0c 75%);
  transition:opacity .5s,visibility .5s;z-index:30}
.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}

.logo{font-family:"Fredoka One","Baloo 2","ZCOOL KuaiLe",sans-serif;
  font-size:clamp(30px,6.5vw,64px);font-weight:400;
  letter-spacing:.02em;color:#ffd89b;text-align:center;line-height:1.05;
  text-shadow:0 3px 0 #8a5520,0 6px 0 #5c3712,0 12px 34px rgba(255,180,90,.35)}
.logo .small-text{font-family:"Baloo 2","ZCOOL KuaiLe",sans-serif;
  font-size:0.55em;font-weight:800;letter-spacing:.18em;
  color:#e8b57a;display:block;margin:4px 0;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.logoSub{font-family:"Baloo 2","ZCOOL KuaiLe","PingFang SC",sans-serif;
  font-size:clamp(12px,1.8vw,16px);letter-spacing:.42em;
  color:#c49a6c;margin-bottom:8px;text-transform:uppercase;font-weight:600}

.pixbtn{font-family:"Baloo 2","ZCOOL KuaiLe",sans-serif;font-size:20px;font-weight:800;
  letter-spacing:.1em;color:#4a2a0c;
  background:linear-gradient(180deg,#ffd07a,#f2a03c);
  border:none;padding:17px 54px;cursor:pointer;border-radius:999px;
  box-shadow:0 7px 0 #b06a24,0 12px 30px rgba(242,160,60,.4);
  transition:transform .12s,box-shadow .12s;position:relative;z-index:2}
.pixbtn:hover{transform:translateY(-3px);box-shadow:0 10px 0 #b06a24,0 16px 36px rgba(242,160,60,.5)}
.pixbtn:active{transform:translateY(4px);box-shadow:0 2px 0 #b06a24}

.hintSmall{font-size:14px;color:#9c7850;letter-spacing:.08em;margin-top:8px;position:relative;z-index:2;font-weight:600}
#dishCard{background:rgba(255,246,230,.97);border-radius:22px;padding:16px;
  box-shadow:0 12px 0 rgba(120,75,35,.35),0 20px 50px rgba(0,0,0,.4);line-height:0}

/* ---------- 菜单页装饰 ---------- */
#menu{overflow:hidden;background:radial-gradient(circle at 50% 28%,#5d3d1d 0%,#2a1a0c 55%,#150d05 100%)}
#menu::before{content:'';position:absolute;inset:-10%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,196,107,.22),transparent 42%),
    radial-gradient(circle at 82% 76%,rgba(255,140,90,.18),transparent 45%),
    radial-gradient(circle at 62% 12%,rgba(168,232,120,.12),transparent 40%);
  animation:glowShift 9s ease-in-out infinite alternate}
@keyframes glowShift{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.12) rotate(6deg)}}

.decoLayer{position:absolute;inset:0;z-index:1;pointer-events:none}
.deco{position:absolute;display:block;will-change:transform;animation:bob 5s ease-in-out infinite}
.deco svg{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg)) scale(1)}
  50%{transform:translateY(-16px) rotate(calc(var(--r,0deg) + 9deg)) scale(1.05)}
}
.deco.spark{animation:spark 2.8s ease-in-out infinite}
@keyframes spark{
  0%,100%{opacity:.2;transform:scale(.65) rotate(var(--r,0deg))}
  50%{opacity:1;transform:scale(1.15) rotate(calc(var(--r,0deg) + 20deg))}
}

.menuInner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:0 22px;text-align:center;animation:menuIn .75s cubic-bezier(.22,1.15,.36,1) both}
@keyframes menuIn{from{opacity:0;transform:translateY(26px) scale(.93)}to{opacity:1;transform:none}}

.chefHat{width:clamp(72px,12vw,118px);margin-bottom:-4px;animation:bob 4s ease-in-out infinite;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.chefHat svg{width:100%;height:100%;display:block}

#menu .logo{animation:logoWobble 5.5s ease-in-out infinite}
@keyframes logoWobble{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(1deg) translateY(-6px)}}
#menu .pixbtn{font-size:clamp(18px,2.6vw,24px);padding:16px 46px;animation:btnGlow 2.6s ease-in-out infinite}
@keyframes btnGlow{
  0%,100%{box-shadow:0 7px 0 #b06a24,0 12px 30px rgba(242,160,60,.4)}
  50%{box-shadow:0 7px 0 #b06a24,0 12px 42px rgba(255,205,120,.9)}
}
@media (max-width:640px){.decoLayer{opacity:.55}}