:root{color-scheme:light;--ink:#492719;--cream:#fff2d4;--paper:#fff8e8;--green:#285b4c;--red:#a44030;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-height:100%;background:#e9b078}
body{margin:0;padding:var(--safe-top) max(8px,env(safe-area-inset-right)) var(--safe-bottom) max(8px,env(safe-area-inset-left));background:#e9b078 url('./assets/play-ui/desk-backdrop.webp') center bottom/cover no-repeat;min-height:100dvh;color:var(--ink)}
button,select{font:inherit}
button{cursor:pointer;border:0;color:var(--ink);font-weight:800;min-height:44px;padding:0 14px;border-radius:12px;background:#f4dbad;touch-action:manipulation}
button:disabled{cursor:default;opacity:.6}
button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #3b7d65;outline-offset:3px}
button:hover:not(:disabled){filter:brightness(1.06)}
.primary{background:transparent url('./assets/play-ui/button.webp') center/100% 100% no-repeat;filter:drop-shadow(0 4px 5px #29392945)}
.play-shell{width:min(100%,430px,max(200px,calc((100svh - var(--safe-top) - var(--safe-bottom))*.4051)));margin:0 auto}
.board-wrap{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:572/1412}
.board-wrap canvas{width:100%;height:100%;display:block}
#game{position:relative;touch-action:none;outline-offset:-3px}
#battle-characters{position:absolute;inset:0;pointer-events:none}
#vacuum-stars{position:absolute;inset:0 auto auto 0;height:auto;pointer-events:none}
.battle-ui,.tutorial,.confetti{position:absolute;inset:0;pointer-events:none}
.stage-icon{--glyph:url('./assets/play-ui/stage.webp')}.time-icon{--glyph:url('./assets/play-ui/clock.webp')}.score-icon{--glyph:url('./assets/play-ui/star.webp')}
.play-icon{--glyph:url('./assets/play-ui/play.webp')}.next-icon{--glyph:url('./assets/play-ui/next.webp')}.back-icon{--glyph:url('./assets/play-ui/back.webp')}
.retry-icon{--glyph:url('./assets/play-ui/retry.webp')}.help-icon{--glyph:url('./assets/play-ui/help.webp')}.skip-icon{--glyph:url('./assets/play-ui/skip.webp')}
.meter-icon{position:absolute;top:1.24%;width:8%;height:3.64%;background:var(--glyph) center/contain no-repeat}
.battle-ui .stage-icon{left:3.7%}.battle-ui .time-icon{left:21.1%}.battle-ui .score-icon{left:50.4%}
.icon-button{position:relative;display:inline-grid;place-items:center;min-width:44px;font-size:0;line-height:0}
.icon-button::before{content:"";position:absolute;inset:0;margin:auto;width:24px;height:24px;background:var(--glyph) center/contain no-repeat}
.pause-button{--glyph:url('./assets/play-ui/pause.webp');position:absolute;right:1%;top:.27%;padding:0;background:transparent;pointer-events:auto}
.pause-button::before{width:32px;height:32px}
.pause-button[aria-pressed="true"]{visibility:hidden}
.enemy-meter{position:absolute;height:clamp(6px,1%,9px);padding:2px;border-radius:12px;background:linear-gradient(#91b3aa,#436e67);box-shadow:0 1px 2px #6a463c55;transition:opacity .18s,scale .18s,visibility 0s}
.enemy-meter[data-empty]{opacity:0;scale:.74 .65;visibility:hidden;transition-delay:0s,0s,.18s}
.health-well{position:relative;height:100%;overflow:hidden;border-radius:inherit;background:#48342f}
.health-well span{position:absolute;inset:0 auto 0 0}
#healthFill{background:linear-gradient(#ff9578,#ca4f43);transition:width .14s ease-out}
#healthTrail{background:#e9b672}
.energy-meter{position:absolute;bottom:2.2%;left:9.5%;width:12%;aspect-ratio:1;border-radius:50%;background:linear-gradient(150deg,#ffe1a2,#9c5d31);box-shadow:0 2px 4px #70432560}
.energy-well{position:absolute;inset:11%;overflow:hidden;border-radius:50%;background:#754a35;box-shadow:inset 0 1px 3px #4c2d23}
#energyFill{position:absolute;inset:auto 0 0;height:0;background:linear-gradient(#ffe48a,#e19a26);box-shadow:inset 0 1px #fff7c6}
.energy-well::after{content:"";position:absolute;inset:24%;background:url('./assets/play-ui/bolt.webp') center/contain no-repeat;filter:drop-shadow(0 1px 1px #6a4029)}
.battle-cue{position:absolute;top:20.15%;left:46%;width:8%;height:3.05%;background:url('./assets/play-ui/warning.webp') center/contain no-repeat}
.home{position:absolute;inset:49.8% 6% auto;text-align:center}
.home button{width:min(49%,160px);min-height:52px}
.home button::before{width:27px;height:27px}
.loading{position:absolute;inset:42% 8% auto;background:var(--paper);padding:14px;border-radius:14px;text-align:center;font-weight:800}
.guide-tip{position:absolute;left:4%;right:4%;bottom:23%;max-width:232px;margin:0 auto 4px;padding:4px 8px 5px 14px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.guide-tip p{margin:0;font-weight:850;font-size:13px}
.guide-tip button{pointer-events:auto;background:transparent;padding:0 8px}
.guide-tip button::before{width:20px;height:20px}
.guide-grid{position:absolute;inset:23.51275% 2.7972% 12.74788%;z-index:2;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s}
.guide-grid[data-mode]{visibility:visible;opacity:1;transition-delay:0s}
.guide-tile{position:absolute;width:11.111%;height:6.6667%;border:2px solid #fff6c7;box-shadow:0 0 0 2px #2b654c,inset 0 0 8px #ffffdf99;border-radius:5px}
.guide-grid[data-mode="idle"] .guide-tile{border:3px solid #ffe886;box-shadow:0 0 0 2px #593521,0 0 7px 2px #ffdc8a,inset 0 0 7px #ffdf79;animation:hint-glow 1.6s ease-in-out infinite}
@keyframes hint-glow{50%{box-shadow:0 0 0 2px #593521,0 0 11px 4px #ffe98d,inset 0 0 10px #ffffdfbb}}
/* The fingertip is at (23, 5) in the 48 × 56 viewBox. */
.guide-hand{display:none;position:absolute;left:var(--finger-x-start);top:var(--finger-y-start);width:14%;height:auto;transform:translate(-47.9167%,-8.9286%);filter:drop-shadow(0 3px 3px #42251985)}
.guide-grid[data-mode="first"] .guide-hand{display:block;animation:guide-move 1.9s ease-in-out infinite}
@keyframes guide-move{0%,18%,100%{left:var(--finger-x-start);top:var(--finger-y-start)}48%,74%{left:var(--finger-x-end);top:var(--finger-y-end)}}
.confetti i{position:absolute;top:30%;width:7px;height:12px;border-radius:2px;background:var(--piece);opacity:0}
.boss-warning{position:fixed;inset:0;z-index:3;pointer-events:none;display:grid;place-items:center}
.boss-warning::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,#ffd59d80,#ec644a);animation:boss-flash 1.15s ease-out 3 both}
.boss-banner{position:relative;display:flex;align-items:center;gap:12px;padding:12px 21px;border:2px solid #e8b879;border-radius:17px;background:#fff0d6;color:#83432b;font-size:clamp(22px,7vw,30px);font-weight:900;box-shadow:0 5px 0 #ae6443,0 10px 24px #512c2566;animation:boss-banner 3.45s both}
.boss-banner img{width:38px;height:38px;object-fit:contain}
@keyframes boss-flash{0%,57%,100%{opacity:0}14%{opacity:.42}}
@keyframes boss-banner{0%{opacity:0;transform:translateY(10px) scale(.85)}8%{opacity:1;transform:translateY(0) scale(1.045)}13%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-7px) scale(.98)}}
dialog{padding:8px;border:0;background:transparent;color:var(--ink);width:min(calc(100% - 16px),260px);max-height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 16px);overflow:auto}
dialog[aria-labelledby="helpHeading"]{width:min(calc(100% - 16px),306px)}
dialog[data-result]{width:min(calc(100% - 14px),360px);padding-block:18px 12px}
dialog::backdrop{background:#35241992}
dialog[open]::backdrop{animation:shade-in .22s ease-out both}
dialog[data-closing]::backdrop{animation:shade-out .19s ease-out both}
@keyframes shade-in{from{opacity:0}to{opacity:1}}
@keyframes shade-out{from{opacity:1}to{opacity:0}}
.sheet{position:relative;isolation:isolate;padding:17px 19px 19px;text-align:center}
.sheet-surface{position:absolute;inset:0;z-index:-1;border-radius:13px;box-shadow:0 6px 9px #24150c65;pointer-events:none}
.panel-skin{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.sheet-surface:not(:has(>.panel-skin)){background:var(--cream)}
.sheet h2{margin:0 0 9px;font-size:25px;line-height:1.2;letter-spacing:-.02em}
.sheet p{margin:0 0 15px;line-height:1.65;font-size:14px;color:#694531}
.sheet-badge{display:block;width:38px;height:38px;margin:0 auto 10px;background:var(--glyph) center/contain no-repeat}
.sheet .primary{width:114px;min-height:46px;background:linear-gradient(#668e76,#446950);box-shadow:inset 0 1px #a3bc9d,0 2px #355542;filter:none}
.sheet:is([data-kind="lose"],[data-kind="final"]) #start::before{filter:brightness(2.4) saturate(.55)}
.sheet-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:12px}
.sheet-tools button,.sheet section>button:not(.primary){background:linear-gradient(#fbe8c6,#f1cd9e);box-shadow:inset 0 1px #fff8e6,0 2px #c78f62;padding:0}
.sheet select{width:100%;min-height:44px;margin:2px 0 10px;padding:7px 12px;color:var(--ink);border:1px solid #cc9a6c;border-radius:10px;background:#fff8e7}
.sheet section>button:not(.primary){margin:0 3px}
#sheetHelp p{text-align:left;margin-bottom:10px}
dialog[data-result] .sheet{padding:0 23px 22px;transform-origin:center 67%}
dialog[data-result] .sheet-surface{top:76px}
.result-cat{display:block;width:172px;height:auto;margin:0 auto -9px;transform-origin:center 83%;filter:drop-shadow(0 3px 3px #804a3150)}
.result-stars{display:flex;justify-content:center;align-items:center;gap:8px;margin:0 auto 10px}
.result-stars i{display:block;width:45px;height:45px;background:url('./assets/play-ui/star.webp') center/contain no-repeat;filter:drop-shadow(0 3px 1px #a05e3033);rotate:-12deg}
.result-stars i:nth-child(2){width:54px;height:54px;rotate:0deg;translate:0 -3px}
.result-stars i:nth-child(3){rotate:12deg}
dialog[data-result] h2{margin:0 0 13px;color:#714124;font-size:clamp(25px,8vw,32px);font-weight:900}
dialog[data-result] .primary{width:min(72%,177px);min-height:49px}
dialog[data-result] .sheet-tools{margin-top:13px}
.sheet:is([data-kind="win"],[data-kind="final"]) .result-cat{animation:happy-bob 2.35s 1s ease-in-out infinite}
@keyframes happy-bob{0%,76%,100%{transform:none}84%{transform:translateY(2px) scale(1.02,.97)}92%{transform:translateY(-3px) scale(.99,1.03)}}
.sr{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-height:460px){.result-cat{width:132px}.result-stars{margin-bottom:7px}.result-stars i{width:36px;height:36px}.result-stars i:nth-child(2){width:43px;height:43px}}
@media(prefers-reduced-motion:reduce){.guide-grid[data-mode="first"] .guide-hand,.guide-grid[data-mode="idle"] .guide-tile,.sheet:is([data-kind="win"],[data-kind="final"]) .result-cat,dialog[open]::backdrop,.boss-banner{animation:none}.boss-warning::before{display:none}.enemy-meter,#healthFill,.guide-grid{transition:none}}