:root{--ink:#362615;--red:#e94d36;--deep-red:#b92f25;--yellow:#ffd35a;--cream:#fff4cf;--jade:#2c947c;--paper:#fff9e7}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f5b943;color:var(--ink);font-family:"Noto Sans SC",sans-serif}body{overflow-x:hidden;background:linear-gradient(180deg,#69c9e7 0 58%,#86c765 58%)}button{font:inherit}.game-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;position:relative}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,64px);position:absolute;z-index:10;inset:0 0 auto;background:linear-gradient(180deg,rgba(255,244,207,.85),transparent);pointer-events:none}.brand{display:flex;align-items:center;gap:12px;pointer-events:auto}.brand-seal,.dialog-seal{width:48px;height:48px;border-radius:14px 9px 14px 8px;background:var(--red);color:#ffe68c;display:grid;place-items:center;font-family:"Ma Shan Zheng",serif;font-size:28px;border:3px solid #fff3c2;box-shadow:0 3px 0 var(--deep-red);transform:rotate(-4deg)}.brand div{display:flex;flex-direction:column}.brand strong{font-family:"Ma Shan Zheng",serif;font-size:28px;letter-spacing:.06em}.brand small{font-size:10px;letter-spacing:.16em;font-weight:900;opacity:.65}.round-button{pointer-events:auto;width:43px;height:43px;border-radius:50%;border:3px solid var(--ink);background:var(--cream);font-weight:900;font-size:20px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.stage-wrap{position:relative;min-height:clamp(500px,64vh,680px);overflow:hidden;background:linear-gradient(#76d2ec 0 55%,#a7d878 55%);border-bottom:4px solid var(--ink)}#scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}.cloud{position:absolute;width:120px;height:36px;border-radius:40px;background:rgba(255,255,255,.65);z-index:1}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:55px;height:55px;left:18px;top:-23px}.cloud:after{width:70px;height:70px;right:10px;top:-35px}.cloud-one{top:20%;left:8%;animation:cloud 18s linear infinite}.cloud-two{top:12%;right:9%;transform:scale(.65);animation:cloud 25s linear reverse infinite}.story-chip{position:absolute;z-index:5;left:clamp(18px,4vw,64px);top:110px;display:flex;gap:12px;align-items:center;background:rgba(255,249,231,.94);border:3px solid var(--ink);padding:12px 18px;border-radius:18px;box-shadow:6px 6px 0 rgba(54,38,21,.8);max-width:310px;transition:.4s}.story-chip p{margin:0;font-size:13px;line-height:1.5}.story-chip strong{font-size:16px}.story-icon{width:31px;height:31px;flex:0 0 auto;border-radius:50%;background:var(--red);color:white;display:grid;place-items:center;font-weight:900}.impact-word{position:absolute;z-index:7;left:57%;top:41%;font:72px "Ma Shan Zheng",serif;color:var(--red);text-shadow:4px 4px 0 #fff8d2,-2px -2px 0 #fff8d2;opacity:0;transform:scale(.3) rotate(-12deg);pointer-events:none}.impact-word.pop{animation:impact .65s ease-out}.success-card{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-45%) scale(.6) rotate(-3deg);background:var(--paper);border:4px solid var(--ink);border-radius:28px;text-align:center;padding:24px 46px 28px;box-shadow:12px 12px 0 var(--red);opacity:0;pointer-events:none;transition:.55s cubic-bezier(.2,1.5,.4,1)}.success-card.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}.success-card>span{font-size:32px;color:#f2ae20}.success-card h2{font:54px/1 "Ma Shan Zheng",serif;color:var(--red);margin:4px 0 10px}.success-card p{margin:0 0 18px;font-weight:800}.success-card button{border:3px solid var(--ink);background:var(--yellow);border-radius:100px;padding:10px 26px;font-weight:900;cursor:pointer;box-shadow:4px 4px 0 var(--ink)}.scene-label{position:absolute;z-index:5;font-size:12px;font-weight:900;background:rgba(255,249,231,.88);border:2px solid var(--ink);border-radius:100px;padding:7px 12px}.scene-label span{position:absolute;height:2px;background:var(--ink);width:42px;top:50%}.sima-label{left:24%;bottom:23%}.sima-label span{left:100%;transform:rotate(-23deg);transform-origin:left}.jar-label{right:19%;bottom:18%}.jar-label span{right:100%;transform:rotate(20deg);transform-origin:right}.control-deck{min-height:190px;background:var(--cream);padding:22px clamp(20px,4vw,64px);display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(25px,4vw,70px);align-items:center;position:relative;z-index:9}.meter-heading,.damage-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;font-size:13px;font-weight:900}.meter-heading strong,.damage-heading strong{font-size:12px;color:var(--red)}.volume-track,.damage-track{height:18px;border:3px solid var(--ink);border-radius:100px;background:#e9ddb7;position:relative;box-shadow:0 3px 0 rgba(54,38,21,.18)}.volume-fill,.damage-fill{height:100%;width:0;border-radius:100px;transition:width .08s;background:linear-gradient(90deg,#55b96d,#f6d24f 60%,#ed513d)}.threshold-line{position:absolute;left:57%;top:-8px;width:3px;height:30px;background:var(--ink)}.threshold-line span{position:absolute;top:-23px;left:50%;translate:-50%;white-space:nowrap;font-size:9px;font-weight:900}.mic-status{font-size:11px;margin:10px 0 0;color:rgba(54,38,21,.64)}.mic-status i{display:inline-block;width:7px;height:7px;background:#b6a98a;border-radius:50%;margin-right:5px}.mic-status.active i{background:#39a96b;box-shadow:0 0 0 4px rgba(57,169,107,.15);animation:pulse 1.2s infinite}.mic-status.error i{background:var(--red)}.main-action{display:flex;flex-direction:column;align-items:center;gap:8px}.shout-button{min-width:250px;border:4px solid var(--ink);border-radius:22px;background:var(--red);color:white;box-shadow:7px 7px 0 var(--ink);padding:13px 21px;display:flex;align-items:center;justify-content:center;gap:13px;cursor:pointer}.shout-button.listening{background:var(--jade)}.shout-button.done{background:#846b52}.shout-button span:last-child{display:flex;flex-direction:column;align-items:flex-start}.shout-button strong{font-size:18px}.shout-button small{font-size:10px;opacity:.8}.mic-symbol{width:35px;height:35px;border:3px solid white;border-radius:50%;display:grid;place-items:center;font-size:13px}.shout-button.listening .mic-symbol{animation:pulse 1s infinite}.fallback-button{border:0;background:transparent;color:var(--ink);font-size:11px;font-weight:800;cursor:pointer}.fallback-button:disabled{opacity:.35}.fallback-button kbd{background:#fff;border:1px solid #aa9a75;border-radius:4px;padding:1px 5px;box-shadow:0 2px 0 #aa9a75}.damage-fill{background:linear-gradient(90deg,var(--yellow),var(--red))}.hit-dots{display:flex;gap:5px;margin-top:12px}.hit-dots i{height:8px;flex:1;background:#d8cba8;border:1px solid rgba(54,38,21,.22);border-radius:9px;transition:.25s}.hit-dots i.on{background:var(--red);transform:translateY(-2px)}dialog{width:min(510px,calc(100% - 32px));border:4px solid var(--ink);border-radius:28px;background:var(--paper);color:var(--ink);padding:35px;box-shadow:12px 12px 0 var(--ink)}dialog::backdrop{background:rgba(29,36,29,.65);backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:17px;top:14px;border:0;background:transparent;font-size:29px;cursor:pointer}.dialog-seal{width:55px;height:55px;font-size:20px}.dialog-seal+h2{font:42px "Ma Shan Zheng",serif;margin:15px 0}dialog ol{list-style:none;margin:0;padding:0;display:grid;gap:16px}dialog li{display:flex;gap:13px;align-items:flex-start}dialog li>span{width:31px;height:31px;display:grid;place-items:center;background:var(--yellow);border:2px solid var(--ink);border-radius:50%;font-weight:900;flex:0 0 auto}dialog li p{margin:0;font-size:13px;line-height:1.65}dialog li strong{display:block;font-size:15px}.tip{background:#e8f3d3;border-radius:10px;padding:12px;font-size:11px;margin:20px 0 0}.loading{position:fixed;inset:0;z-index:50;background:#79d1e8;display:grid;place-content:center;text-align:center;transition:.5s opacity}.loading.hide{opacity:0;pointer-events:none}.loading-stone{width:65px;height:58px;margin:auto;background:#778392;border:4px solid var(--ink);border-radius:55% 48% 52% 44%;animation:bounce .7s infinite alternate}.loading p{font-weight:900}@keyframes cloud{50%{transform:translateX(45px)}}@keyframes impact{0%{opacity:0;transform:scale(.3) rotate(-18deg)}30%{opacity:1;transform:scale(1.25) rotate(6deg)}70%{opacity:1;transform:scale(1) rotate(-4deg)}100%{opacity:0;transform:scale(1.8) rotate(10deg)}}@keyframes pulse{50%{transform:scale(1.08)}}@keyframes bounce{to{transform:translateY(-20px) rotate(12deg)}}
@media(max-width:820px){.stage-wrap{min-height:65vh}.topbar{height:72px}.brand strong{font-size:23px}.brand small{display:none}.brand-seal{width:41px;height:41px}.story-chip{top:82px;max-width:245px;padding:9px 12px}.story-chip p{font-size:11px}.story-chip strong{font-size:13px}.scene-label{display:none}.control-deck{grid-template-columns:1fr;gap:17px;padding-block:20px}.main-action{grid-row:1}.success-card{padding:22px 30px;width:min(330px,86%)}.success-card h2{font-size:45px}.impact-word{font-size:54px;left:53%}.shout-button{min-width:min(280px,100%)}}
@media(prefers-reduced-motion:reduce){.cloud,.loading-stone,.mic-status.active i,.shout-button.listening .mic-symbol{animation:none}}