:root{--ink:#382c53;--muted:#74627e;--purple:#7353bb;--board-size:360px;--stage-x:0%;--stage-y:0%;--tree-hue:0deg;--aura-hue:40deg;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--ink)}body{overflow-x:hidden}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:3px solid #9c5ccb;outline-offset:3px}button:disabled{opacity:.5;cursor:default}.glass{background:rgba(255,250,241,.92);border:1px solid rgba(255,255,255,.95);box-shadow:0 12px 35px #67476717;backdrop-filter:blur(12px)}
.app-shell{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:12px 16px calc(12px + var(--safe-bottom))}.view{display:none}.view.active{display:block}.round-btn{width:44px;height:44px;border-radius:15px;background:#fff9;font-size:22px;flex-shrink:0}.primary-btn,.soft-btn{padding:13px 18px;border-radius:16px;font-weight:700;min-height:46px}.primary-btn{background:linear-gradient(120deg,#7759b8,#a85cab);color:white;box-shadow:0 7px 20px #8058b52b}.soft-btn{background:#fff9;border:1px solid #d5c6de}.primary-btn:hover,.soft-btn:hover{filter:brightness(1.05)}
.hero-card{width:min(440px,calc(100vw - 32px));padding:24px 28px;border-radius:30px;text-align:center}.hero-card h1{font-size:36px;margin:0 0 8px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:#9a6944}.home-art{width:min(200px,25vh);margin:0 auto}.subtitle{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 20px}.hero-card>.primary-btn{width:100%}.home-actions{display:flex;gap:10px;margin-top:10px}.home-actions .soft-btn{flex:1}.home-meta{display:flex;justify-content:space-between;font-size:14px;margin-top:20px}.sound-hint{color:var(--muted);font-size:12px;line-height:1.7;margin:12px 0 0}
#gameView{--board-size:max(224px,min(500px,calc(100vh - 246px),calc(100vw - 358px)));--board-size:max(224px,min(500px,calc(100dvh - 246px - var(--safe-bottom)),calc(100vw - 358px)));width:calc(var(--board-size) + 304px)}#gameView.active{display:grid;grid-template-columns:280px var(--board-size);grid-template-rows:56px auto 66px 18px;gap:10px 24px}.game-top{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;border-radius:20px;padding:5px 10px}.level-title{text-align:center;display:flex;align-items:center;gap:16px}.level-title>span{font-size:14px}.level-title small{font-size:12px;color:var(--muted)}.level-title strong{font-size:20px}.tree-panel{grid-row:2 / 4;grid-column:1;border-radius:28px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;text-align:center}.tree-portrait{position:relative;width:100%;isolation:isolate}.tree-art{aspect-ratio:1;background-image:url("assets/tree-stages.png");background-size:300% 200%;background-position:var(--stage-x) var(--stage-y);background-repeat:no-repeat;filter:hue-rotate(var(--tree-hue));transition:filter .8s}.tree-portrait>.tree-art{position:relative;z-index:1;width:100%}.tree-copy{padding:8px 18px 24px}.tree-copy h2{font-size:28px;margin:6px 0;color:#805329}.tree-copy p{font-size:14px;line-height:1.7;color:var(--muted);margin:6px 0 16px}.growth-steps{display:flex;justify-content:center;gap:7px}.growth-steps i{height:6px;width:20px;border-radius:6px;background:#cbbbcb}.growth-steps i.done{background:linear-gradient(90deg,#c58b46,#eed092)}.tree-stage{grid-row:2;grid-column:2;min-width:0;display:grid;gap:8px;grid-template-rows:62px var(--board-size) 48px}.objective{border-radius:18px;display:flex;justify-content:space-between;align-items:center;padding:6px 12px;gap:8px}.label{font-size:12px;font-weight:700;color:var(--muted)}.goal-list{display:flex;gap:6px;margin-top:2px}.goal-pill{display:flex;align-items:center;gap:4px;border-radius:20px;background:#fff;padding:3px 7px;font-size:14px;font-weight:700;white-space:nowrap}.goal-pill .z{font-size:18px}.goal-pill.done{color:#2e7854;background:#e6f6e9}.moves-block{text-align:center;flex-shrink:0}.moves-block strong{display:block;font-size:26px;line-height:1.1;color:var(--purple)}
.board-wrap{position:relative;width:var(--board-size);height:var(--board-size);border-radius:22px;padding:9px;isolation:isolate;overflow:hidden;background:#ab7a468c;border:1px solid #f9ddb4;box-shadow:0 14px 30px #73472426}.board-tree{position:absolute;inset:0;opacity:.52;z-index:-1}.board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));gap:5px;width:100%;height:100%;touch-action:manipulation}.tile{min-width:0;min-height:0;position:relative;display:grid;place-items:center;padding:0;border-radius:12px;font-size:clamp(22px,calc(var(--board-size) / 13),40px);background:linear-gradient(145deg,#fff4dcf5,#edc787e8);box-shadow:inset 0 -4px 0 #9f672026,0 3px 6px #69351014;user-select:none;transition:transform .12s}.tile:hover{filter:brightness(1.06)}.tile.selected{outline:3px solid #ab5bca;outline-offset:-3px;transform:scale(.93)}.tile.matched{animation:pop .24s ease forwards}.tile.special-rocket:after,.tile.special-rainbow:after,.tile.special-bomb:after{position:absolute;right:0;bottom:0;font-size:13px}.tile.special-rocket:after{content:"🚀"}.tile.special-rainbow:after{content:"✨"}.tile.special-bomb:after{content:"💥"}.hud-row{display:grid;grid-template-columns:100px 1fr;gap:8px}.score-card,.progress-card{border-radius:15px;padding:5px 10px}.score-card strong{display:block;font-size:18px;line-height:1.1}.progress-track{height:7px;background:#e2d6d2;border-radius:10px;margin-top:6px;overflow:hidden}.progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5eae8c,#efc469,#e68fb5);transition:width .2s}
.tools{grid-column:2;grid-row:3;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-radius:20px;padding:5px}.tool-btn{background:#fff9;border-radius:14px;position:relative;padding:3px 8px;min-height:44px;display:flex;align-items:center;justify-content:center;flex-direction:column}.tool-btn>span{font-size:23px;line-height:1.1}.tool-btn>b{font-size:14px}.tool-btn small{position:absolute;right:5px;top:3px;min-width:18px;height:18px;background:var(--purple);color:#fff;border-radius:20px;font-size:12px;line-height:18px}.tool-btn.active{outline:3px solid #e798c8;outline-offset:-2px}.tool-hint{grid-column:1 / -1;grid-row:4;margin:0;text-align:center;font-size:12px;color:#66506d;line-height:18px}.combo-banner{position:absolute;z-index:5;inset:40% 0 auto;text-align:center;pointer-events:none;font-weight:900;font-size:28px;color:#fff9d8;text-shadow:0 3px 9px #6e358b;opacity:0}.combo-banner.show{animation:combo .8s ease}
.modal{position:fixed;z-index:20;inset:0;display:grid;place-items:center;background:#34234d70;backdrop-filter:blur(6px);padding:20px;overflow-y:auto}.hidden{display:none!important}.modal-card{width:min(100%,390px);max-height:calc(100dvh - 40px);overflow-y:auto;border-radius:28px;padding:24px;text-align:center}.modal-card h2{font-size:26px;margin:8px 0}.modal-card p{font-size:14px;line-height:1.7;color:var(--muted)}.modal-tree{width:min(160px,22vh);margin:auto}.modal-actions{display:grid;grid-template-columns:1fr 1.1fr;gap:10px}.star-row{font-size:32px;color:#d99b35;letter-spacing:5px;margin:12px 0}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #d9cdd9}.setting-row input{width:22px;height:22px;accent-color:var(--purple)}#testSoundBtn{margin-top:16px}#closeSettings{margin-top:16px;width:100%}
@media(max-width:759px){.app-shell{padding:8px 12px calc(8px + var(--safe-bottom))}#gameView{--board-size:max(224px,min(460px,calc(100vw - 24px),calc(100vh - 324px)));--board-size:max(224px,min(460px,calc(100vw - 24px),calc(100dvh - 324px - var(--safe-bottom))));width:var(--board-size)}#gameView.active{grid-template-columns:1fr;grid-template-rows:48px 86px auto 60px 18px;gap:7px}.game-top{grid-column:1;grid-row:1;padding:2px 5px}.level-title{gap:8px}.level-title>span{font-size:12px}.level-title strong{font-size:16px}.tree-panel{grid-column:1;grid-row:2;flex-direction:row;text-align:left;justify-content:flex-start;align-items:center;border-radius:20px;padding:0 8px;gap:6px}.tree-portrait{width:88px;flex-shrink:0}.tree-copy{padding:0;min-width:0}.tree-copy .eyebrow,.growth-steps{display:none}.tree-copy h2{font-size:19px;margin:0 0 3px}.tree-copy p{font-size:12px;line-height:1.4;margin:0}.tree-stage{grid-column:1;grid-row:3}.tools{grid-column:1;grid-row:4}.tool-hint{grid-column:1;grid-row:5;font-size:12px}.board-wrap{padding:7px;border-radius:18px}.board{gap:4px}.tile{border-radius:10px}.hero-card{padding:18px 24px}.home-art{width:min(180px,24vh)}.hero-card h1{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.tile.matched{opacity:.35}.combo-banner.show{opacity:1}}
@keyframes pop{50%{transform:scale(1.08)}to{transform:scale(.2);opacity:0}}@keyframes combo{0%{opacity:0;transform:scale(.6)}25%,75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-20px)}}
/* Full vertical budget: header + objectives + HUD + tools + gaps + safe area.
   Never use overflow:hidden to conceal essential controls; tiny windows may scroll. */
#gameView{--board-size:max(224px,min(500px,calc(100vh - 324px),calc(100vw - 358px)));--board-size:max(224px,min(500px,calc(100dvh - 324px - var(--safe-bottom)),calc(100vw - 358px)))}
.tree-panel{min-height:0}
@media(max-width:759px){
  #gameView{--board-size:max(224px,min(460px,calc(100vw - 24px),calc(100vh - 342px)));--board-size:max(224px,min(460px,calc(100vw - 24px),calc(100dvh - 342px - var(--safe-bottom))))}
  #gameView.active{grid-template-rows:44px 58px auto 56px 18px;gap:6px}
  .tree-stage{gap:6px}.tree-portrait{width:60px}.tree-copy h2{font-size:17px;margin:0 0 2px}.tree-copy p{font-size:12px}
  .game-top .round-btn{width:36px;height:36px;font-size:20px}
}