.hud{display:flex;align-items:center;gap:10px;height:var(--hud-h);padding:0 12px;flex:0 0 auto;background:var(--c-surface-alt);box-shadow:0 2px 8px #4a3f3514;z-index:20}.hud-btn{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink);box-shadow:var(--sh-card);transition:transform var(--t-quick) var(--e-out)}.hud-btn:active{transform:scale(.92)}.hud-center{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.25}.hud-title{font-size:var(--fs-md);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.hud-progress{font-size:var(--fs-sm);color:var(--c-ink-soft);font-variant-numeric:tabular-nums}.btn{min-height:56px;padding:0 26px;border-radius:var(--r-pill);font-size:var(--fs-md);font-weight:700;box-shadow:var(--sh-card);transition:transform var(--t-quick) var(--e-out)}.btn:active{transform:scale(.95)}.btn--primary{background:var(--c-char-1);color:#fff}.btn--ghost{background:var(--c-surface);color:var(--c-ink)}.dialog-mask{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#4a3f3557;z-index:200;animation:dialog-fade .26s var(--e-out) .18s both;padding:20px}.dialog{width:min(420px,100%);padding:30px 26px;border-radius:var(--r-xl);background:var(--c-surface);box-shadow:var(--sh-dialog);text-align:center}.dialog-title{font-size:var(--fs-xl);color:var(--c-char-1)}.dialog-stars{display:flex;justify-content:center;gap:10px;margin:20px 0 26px}.dialog-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}@keyframes dialog-fade{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.home{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px 20px;text-align:center}.home-title{font-size:var(--fs-display);color:var(--c-char-1);letter-spacing:2px}.home-sub{font-size:var(--fs-sm);color:var(--c-ink-soft);margin-top:-12px}.home-modes{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;width:100%;max-width:720px}.mode-card{flex:1 1 190px;min-width:190px;min-height:var(--tap-min);padding:20px 16px 18px;border-radius:var(--r-xl);background:var(--c-surface);box-shadow:var(--sh-card);display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform var(--t-quick) var(--e-out)}.mode-card:active{transform:scale(.96)}.mode-card-preview{display:flex;gap:2px}.mode-card-name{font-size:var(--fs-lg);font-weight:700}.mode-card-desc{font-size:var(--fs-xs);color:var(--c-ink-soft)}.home-footer{display:flex;gap:12px}.map{flex:1;overflow-y:auto;padding:18px 20px 40px}.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px;max-width:640px;margin:0 auto}.map-node{aspect-ratio:1;border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--sh-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:transform var(--t-quick) var(--e-out)}.map-node:active:not(:disabled){transform:scale(.95)}.map-node:disabled{background:var(--c-bg-deep);color:var(--c-locked);box-shadow:none;cursor:default}.map-node-index{font-size:var(--fs-xl);font-weight:800}.map-node-stars{display:flex;gap:2px;min-height:20px}.map-node-title{font-size:var(--fs-xs);color:var(--c-ink-soft);padding:0 6px;text-align:center}.topbar{display:flex;align-items:center;gap:10px;padding:10px 12px;flex:0 0 auto}.topbar-title{font-size:var(--fs-lg);font-weight:700;flex:1}.sheet-mask{position:absolute;top:0;right:0;bottom:0;left:0;background:#4a3f3557;display:grid;place-items:end center;z-index:210}.sheet{width:min(520px,100%);background:var(--c-surface);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:22px 22px calc(22px + env(safe-area-inset-bottom));box-shadow:var(--sh-dialog);animation:sheet-up .26s var(--e-out) both}@keyframes sheet-up{0%{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}.sheet-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:2px solid var(--c-bg-deep)}.sheet-row:last-of-type{border-bottom:none}.sheet-label{font-size:var(--fs-md);font-weight:600}.seg{display:flex;gap:6px;background:var(--c-bg-deep);padding:4px;border-radius:var(--r-pill)}.seg-item{padding:8px 16px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;color:var(--c-ink-soft)}.seg-item[aria-pressed=true]{background:var(--c-surface);color:var(--c-ink);box-shadow:var(--sh-card)}.danger-btn{width:100%;min-height:52px;border-radius:var(--r-md);background:var(--c-bg-deep);color:#b1493a;font-weight:700;position:relative;overflow:hidden}.danger-btn-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:#b1493a38;transform-origin:left;transform:scaleX(0);transition:transform 2s linear}.danger-btn--holding .danger-btn-fill{transform:scaleX(1)}.danger-btn-label{position:relative}.sheet-note{margin-top:10px;font-size:var(--fs-xs);color:var(--c-ink-soft);text-align:center;min-height:18px}.mode-complete{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:30px 20px;text-align:center}.target-slot{position:relative;display:grid;place-items:center;border-radius:var(--r-lg);background:var(--c-slot);transition:transform var(--t-quick) var(--e-bounce),box-shadow var(--t-quick) var(--e-out),background-color var(--t-quick) var(--e-out)}.target-slot-frame{position:absolute;top:7px;right:7px;bottom:7px;left:7px;z-index:1;border:3px dashed var(--c-slot-hint);border-radius:calc(var(--r-lg) - 7px);pointer-events:none;transition:border-color var(--t-quick) var(--e-out),opacity var(--t-quick) var(--e-out)}.target-slot-hint{position:absolute;top:16%;right:16%;bottom:16%;left:16%;z-index:0;display:grid;place-items:center;opacity:1;pointer-events:none}.target-slot-hint>svg{width:100%;height:100%}.target-slot-content{position:relative;z-index:2;display:grid;place-items:center;width:100%;height:100%}.target-slot--active{transform:scale(1.08);background:var(--c-surface-alt);box-shadow:0 0 0 4px var(--c-slot-active),0 0 26px 8px var(--c-slot-active-glow)}.target-slot--active .target-slot-frame{border-color:var(--c-slot-active)}.target-slot--filled .target-slot-frame{opacity:0}.target-slot-glow{position:absolute;top:6%;right:6%;bottom:6%;left:6%;z-index:3;border:5px solid var(--c-slot-active);border-radius:50%}.decor-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;pointer-events:none;--decor-sky-top: #dcf0fe;--decor-sky-top: color-mix(in srgb, var(--c-char-4) 26%, white);--decor-sky-bottom: #f4fbff;--decor-sky-bottom: color-mix(in srgb, var(--c-char-4) 7%, white);--decor-cloud: #ffffff;--decor-cloud: var(--c-surface);--decor-grass-far: #cdefe0;--decor-grass-far: color-mix(in srgb, var(--c-char-3) 42%, white);--decor-grass: #a9e6cb;--decor-grass: color-mix(in srgb, var(--c-char-3) 66%, white);--decor-tuft: #4fbf94;--decor-tuft: color-mix(in srgb, var(--c-char-3), var(--c-ink) 14%)}.star-pop{transform-origin:center;animation:star-pop var(--t-settle) var(--e-bounce) 1 both}@keyframes star-pop{0%{transform:scale(0)}60%{transform:scale(1.25)}to{transform:scale(1)}}.confetti-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;overflow:hidden;pointer-events:none}.confetti-piece{position:absolute;top:0;will-change:transform,opacity;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:1;animation-fill-mode:both}@keyframes confetti-fall{0%{transform:translate3d(0,-14vh,0) rotate(0);opacity:0}6%{opacity:1}86%{opacity:1}to{transform:translate3d(var(--cf-drift, 0px),110vh,0) rotate(var(--cf-rot, 360deg));opacity:0}}.sparks-layer{position:absolute;z-index:6;width:0;height:0;pointer-events:none}.spark-dot{position:absolute;will-change:transform,opacity}.hand-hint-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none}.hand-hint-anchor{position:absolute;width:0;height:0}.hand-hint-glyph{position:absolute;left:-20px;top:-5px;width:60px;height:78px}.hand-hint-glyph--travel{animation:hand-hint-travel 2.2s var(--e-in-out) infinite}@keyframes hand-hint-travel{0%{transform:translateZ(0) scale(1);opacity:0}8%{transform:translateZ(0) scale(1);opacity:1}18%{transform:translateZ(0) scale(.92);opacity:1}68%{transform:translate3d(var(--hh-dx, 0px),var(--hh-dy, 0px),0) scale(.92);opacity:1}80%{transform:translate3d(var(--hh-dx, 0px),var(--hh-dy, 0px),0) scale(1);opacity:1}to{transform:translate3d(var(--hh-dx, 0px),var(--hh-dy, 0px),0) scale(1);opacity:0}}.hand-hint-arrow{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible}@media(prefers-reduced-motion:reduce){.target-slot--active{transform:none}.star-pop,.hand-hint-glyph--travel{animation:none}.confetti-layer{display:none}}.level-stage{position:relative;flex:1;width:100%;overflow:hidden;background:var(--c-bg)}.level-slot{position:absolute;z-index:2}.slot-hint{display:block;width:100%;height:100%}.slot-hint--outline{opacity:.24}.slot-hint--silhouette{opacity:.95}.preview{height:100%;overflow-y:auto;padding:16px 20px 60px;background:var(--c-bg)}.preview-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 0;background:var(--c-bg);border-bottom:2px solid var(--c-bg-deep)}.preview-bar button{padding:8px 16px;border-radius:var(--r-pill);background:var(--c-surface);box-shadow:var(--sh-card);font-weight:600}.preview-bar label{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--c-ink-soft)}.preview-heading{margin:24px 0 12px;font-size:var(--fs-lg)}.preview-heading span{color:var(--c-ink-soft);font-weight:400;font-size:var(--fs-sm)}.preview-grid{display:flex;flex-wrap:wrap;gap:12px}.preview-cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:var(--r-md);background:var(--c-surface);box-shadow:var(--sh-card)}.preview-cell figcaption{font-size:var(--fs-xs);color:var(--c-ink-soft);text-align:center}:root{--c-bg: #fff6e5;--c-bg-deep: #ffe9c7;--c-surface: #ffffff;--c-surface-alt: #fff1dc;--c-ink: #4a3f35;--c-ink-soft: #8a7a6a;--c-char-1: #ff7a5c;--c-char-2: #ffc94d;--c-char-3: #5fd6a8;--c-char-4: #5bc0f8;--c-char-5: #a98bf0;--c-char-6: #ff9dbb;--c-shadow-fill: #3e3a52;--c-slot: #e8dcc8;--c-slot-hint: #cbb99e;--c-slot-active: #ffd97a;--c-slot-active-glow: rgba(255, 201, 77, .55);--c-star: #ffc94d;--c-star-empty: #e2d5c0;--c-locked: #cdbfae;--r-sm: 8px;--r-md: 16px;--r-lg: 24px;--r-xl: 32px;--r-pill: 999px;--sh-char: 0 4px 10px rgba(74, 63, 53, .18);--sh-char-grabbed: 0 14px 28px rgba(74, 63, 53, .32);--sh-card: 0 6px 18px rgba(74, 63, 53, .14);--sh-dialog: 0 18px 48px rgba(74, 63, 53, .28);--fs-xs: 13px;--fs-sm: 15px;--fs-md: 18px;--fs-lg: 24px;--fs-xl: 34px;--fs-display: 46px;--t-grab: .15s;--t-quick: .2s;--t-settle: .42s;--t-shake: .4s;--t-light-up: .4s;--t-calm: .6s;--t-pupil: .3s;--e-out: cubic-bezier(.22, 1, .36, 1);--e-in-out: cubic-bezier(.65, 0, .35, 1);--e-bounce: cubic-bezier(.34, 1.56, .64, 1);--stage-max-w: 1100px;--tap-min: 88px;--hud-h: 64px}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html,body,#root{height:100%}html{-webkit-text-size-adjust:100%;touch-action:manipulation}body{font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Segoe UI,Roboto,sans-serif;color:var(--c-ink);background:var(--c-bg);overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}svg{display:block}.no-touch-scroll{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.app-root{position:relative;width:100%;height:100dvh;height:var(--app-h, 100dvh);overflow:hidden;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.char-position{position:absolute;top:0;left:0;will-change:transform;touch-action:none;-webkit-touch-callout:none;transition:transform var(--t-settle) var(--e-out)}.char-position.char--grabbed{transition:none}.char-position.char--returning{transition:transform var(--t-settle) var(--e-bounce)}.char-position.char--settled,.char-position.char--settling{pointer-events:none}.char-grab{display:block;transform:scale(1);transition:transform var(--t-grab) var(--e-bounce)}.char--grabbed .char-grab{transform:scale(1.18)}.char-motion{display:block;transform-origin:50% 62%;will-change:transform}.char--idle .char-motion{animation:char-breath var(--breath-dur, 2.6s) ease-in-out infinite;animation-delay:var(--phase, 0s)}@keyframes char-breath{0%,to{transform:translateY(0) rotate(var(--rest-tilt, 0deg)) scale(1)}50%{transform:translateY(-3.4%) rotate(var(--rest-tilt, 0deg)) scale(.994,1.008)}}.char--grabbed .char-motion{animation:char-wiggle .34s ease-in-out infinite}@keyframes char-wiggle{0%{transform:rotate(-11deg) scale(1)}25%{transform:rotate(0) scale(1.05,.95)}50%{transform:rotate(11deg) scale(1)}75%{transform:rotate(0) scale(.95,1.05)}to{transform:rotate(-11deg) scale(1)}}.char--shaking .char-motion{animation:char-shake var(--t-shake) var(--e-in-out) 1}@keyframes char-shake{0%,to{transform:rotate(0)}15%{transform:rotate(-13deg)}40%{transform:rotate(13deg)}65%{transform:rotate(-9deg)}85%{transform:rotate(6deg)}}.char--settling .char-grab{animation:char-pop var(--t-settle) var(--e-bounce) 1}@keyframes char-pop{0%{transform:scale(1.18)}45%{transform:scale(1.25)}to{transform:scale(1)}}.char--settled .char-motion,.char--settled .char-grab,.char--settled .creature-eyes{animation:none}.creature-eyes{transform-box:fill-box;transform-origin:center}.char--idle .creature-eyes{animation:creature-blink var(--blink-dur, 4.6s) infinite;animation-delay:var(--phase, 0s)}@keyframes creature-blink{0%,93%,to{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}.creature-pupils{transform-box:view-box;transition:transform var(--t-pupil) var(--e-out)}.char--grabbed .creature-pupils{transition:transform 70ms linear}.creature-hand{transform-box:view-box;transition:transform var(--t-quick) var(--e-out)}.char--grabbed .creature-hand--left{animation:hand-swing-left .34s ease-in-out infinite}.char--grabbed .creature-hand--right{animation:hand-swing-right .34s ease-in-out infinite}@keyframes hand-swing-left{0%,to{transform:rotate(-52deg) translateY(-3px)}50%{transform:rotate(-32deg) translateY(-5px)}}@keyframes hand-swing-right{0%,to{transform:rotate(52deg) translateY(-3px)}50%{transform:rotate(32deg) translateY(-5px)}}.slot-glow{pointer-events:none;animation:slot-ring var(--t-settle) var(--e-out) 1 forwards}@keyframes slot-ring{0%{transform:scale(.7);opacity:.85}to{transform:scale(1.9);opacity:0}}.spark{pointer-events:none;animation:spark-fly var(--spark-dur, .62s) var(--e-out) 1 forwards}@keyframes spark-fly{0%{transform:translate(0) scale(.4);opacity:1}to{transform:translate(var(--spark-dx, 0px),var(--spark-dy, 0px)) scale(1.1);opacity:0}}.shadow-lightup{animation:shadow-lightup var(--t-light-up) var(--e-out) 1 forwards}@keyframes shadow-lightup{0%{clip-path:inset(100% 0 0 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}@media(prefers-reduced-motion:reduce){.char--idle .char-motion,.char--grabbed .char-motion,.char--shaking .char-motion,.char--idle .creature-eyes,.char--grabbed .creature-hand--left,.char--grabbed .creature-hand--right,.char--settling .char-grab{animation:none!important}.char-grab{transition:transform .12s linear}.spark,.slot-glow{display:none}.shadow-lightup{animation:none;clip-path:none;opacity:1}}