*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#241812;overscroll-behavior:none;position:fixed;width:100%;}
body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#fff;user-select:none;}
#app{max-width:1100px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;}
#hud{display:flex;gap:8px;align-items:center;padding:8px 10px;flex-wrap:wrap;
  background:linear-gradient(#8a5a33,#6e4526);border-bottom:3px solid #4a2f1a;}
.hcell{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.28);border-radius:16px;padding:4px 11px;font-size:14px;}
.hcell .lab{opacity:.7;font-size:12px;}
.hcell b{color:#f2b632;font-size:15px;}
.hcell.wide{gap:7px;}
.combo{width:56px;height:7px;background:#00000055;border-radius:5px;overflow:hidden;}
.combo i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f2b632,#ff6b4a);transition:width .18s;}
#stagewrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;}
#stage{width:100%;height:100%;display:block;touch-action:manipulation;}
#tips{color:#c9b48f;text-align:center;font-size:12px;padding:5px;letter-spacing:.5px;}
.hide{display:none!important;}
#overlay{position:absolute;inset:0;background:#1a1008e0;display:flex;align-items:center;justify-content:center;z-index:20;overflow:auto;}
.panel{background:#fff6e8;color:#3a2b20;border-radius:18px;padding:22px 26px;max-width:460px;width:90%;
  box-shadow:0 10px 0 rgba(0,0,0,.35);text-align:center;}
.panel h1{margin:4px 0 8px;font-size:30px;letter-spacing:3px;}
.panel h2{margin:4px 0 10px;font-size:24px;}
.panel p{margin:6px 0;font-size:15px;line-height:1.7;}
.panel .em{font-size:52px;line-height:1;}
.panel ul{text-align:left;font-size:14px;line-height:1.85;margin:8px 0;padding-left:20px;}
.btn{border:none;cursor:pointer;font-family:inherit;background:linear-gradient(#f2b632,#d99a1e);color:#4a2f1a;
  font-weight:800;font-size:17px;padding:11px 26px;border-radius:13px;box-shadow:0 5px 0 #a8720f;margin:5px;transition:transform .08s;}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 #a8720f;}
.btn.g{background:linear-gradient(#63c795,#4caf7d);color:#fff;box-shadow:0 5px 0 #2e7d54;}
.btn.r{background:linear-gradient(#f0705f,#e05a4e);color:#fff;box-shadow:0 5px 0 #a83a30;}
.lvrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0;}
.lvbtn{width:74px;padding:8px 0;background:#fff;border:2px solid #d8c3a5;border-radius:12px;cursor:pointer;text-align:center;}
.lvbtn .n{font-size:20px;font-weight:800;}
.lvbtn .s{font-size:12px;color:#c9940a;}
.lvbtn.lock{filter:grayscale(1);opacity:.5;cursor:not-allowed;}
.lvbtn.cur{border-color:#e05a4e;background:#fff0ec;}

/* ---- portrait phone tuning ---- */
@media (orientation:portrait){
  #hud{padding:6px 8px;gap:6px;}
  .hcell{padding:3px 9px;font-size:12px;border-radius:13px;}
  .hcell b{font-size:13px;}
  .combo{width:34px;}
  #tips{font-size:11px;padding:4px;}
  .panel{padding:16px 16px;max-width:400px;}
  .panel h1{font-size:26px;}
  .panel ul{font-size:13px;line-height:1.7;}
  .btn{font-size:16px;padding:12px 24px;}
  .lvbtn{width:84px;padding:10px 0;}
  .lvbtn .n{font-size:22px;}
}

/* ---- svg interactive states ---- */
.tappable{cursor:pointer;}
.tappable:hover{filter:brightness(1.08);}
.custG{cursor:pointer;}
.custG.dim{opacity:.4;pointer-events:none;}
.custG.sel .custBody{filter:drop-shadow(0 0 8px #f2b632);}
.bubble{animation:bpop .35s cubic-bezier(.2,1.6,.4,1);}
@keyframes bpop{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.ig{cursor:pointer;transition:transform .12s;}
.ig:active{transform:scale(.9);}
.ig.got{pointer-events:none;}
.ig.bad{animation:badshake .35s;}
@keyframes badshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.steamA{animation:steamup 2.4s infinite ease-in;transform-origin:center bottom;}
@keyframes steamup{0%{opacity:0;transform:translateY(6px) scale(.85)}30%{opacity:.75}100%{opacity:0;transform:translateY(-16px) scale(1.15)}}
#flames path{animation:flick .28s infinite alternate;transform-origin:center bottom;}
@keyframes flick{0%{transform:scaleY(.82) scaleX(1.04)}100%{transform:scaleY(1.12) scaleX(.94)}}
.shake{animation:shk .3s;}
@keyframes shk{0%,100%{transform:translate(0,0)}20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
.pop{animation:popin .3s cubic-bezier(.2,1.7,.4,1);}
@keyframes popin{0%{transform:scale(.3)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
.floatTxt{font-size:26px;font-weight:800;paint-order:stroke;stroke:#3a2b20;stroke-width:4px;
  animation:floatup 1s forwards;pointer-events:none;}
@keyframes floatup{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1;transform:translateY(-10px) scale(1.15)}100%{opacity:0;transform:translateY(-58px) scale(1)}}
.spark{animation:sparkout .55s forwards;pointer-events:none;}
@keyframes sparkout{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
.ring{animation:ringout .5s forwards;pointer-events:none;}
@keyframes ringout{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}
.pbar rect{transition:width .25s linear;}
.hint{font-size:15px;font-weight:700;fill:#fff6e8;paint-order:stroke;stroke:#3a2b20;stroke-width:4px;}
.srvMark{animation:bob .8s infinite ease-in-out;pointer-events:none;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.pulse{animation:pulse 1.1s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.warnPulse{animation:wpulse .7s infinite;}
@keyframes wpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.14)}}
/* idle life: blink + breathe */
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.4s infinite;}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}
.head{transform-box:fill-box;transform-origin:center bottom;animation:breathe 2.8s infinite ease-in-out;}
@keyframes breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.6px) rotate(-1.5deg)}}
.custG:nth-child(2n) .eyes{animation-delay:1.7s;}
.custG:nth-child(3n) .eyes{animation-delay:2.9s;}
.custG:nth-child(2n) .head{animation-delay:1.1s;}
.custG.jump .custBody{animation:jump .42s cubic-bezier(.2,1.5,.4,1);}
@keyframes jump{0%{transform:translateY(0)}40%{transform:translateY(-14px)}70%{transform:translateY(2px)}100%{transform:translateY(0)}}
.custG.nod .head{animation:nod .5s ease-in-out;}
@keyframes nod{0%,100%{transform:rotate(0)}30%{transform:rotate(9deg)}60%{transform:rotate(-4deg)}}