:root{font-family:Inter,"Noto Sans TC",system-ui,sans-serif;color-scheme:dark;--deep:#052d2b;--panel:rgba(5,48,44,.94);--mint:#79f2c1;--gold:#ffd762;--ink:#f7fff9;--line:rgba(132,247,197,.38)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#031e20;color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}button,select{font:inherit}button{cursor:pointer}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.main-group{width:min(100%,980px);margin:auto}.main-screen{min-height:min(780px,100svh);display:grid;grid-template-rows:72px 1fr;gap:14px;padding:16px;background:linear-gradient(rgba(2,27,27,.16),rgba(2,31,29,.78)),url('../../assets/animal-block-grove-background.webp') center/cover}.main-header{display:grid;grid-template-columns:76px minmax(0,1fr) 142px;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:22px;background:rgba(2,30,30,.9)}.main-header>strong{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:25px}.main-return{width:56px;height:56px;border-radius:15px;background:#fff;display:grid;grid-template-columns:1fr 23px;place-items:center;color:#157ca4;text-decoration:none;font-size:28px;font-weight:1000}.main-return img{width:22px}.locale-control select{width:100%;min-height:44px;border-radius:12px;background:#124a43;color:#fff;border:1px solid #65a98d;padding:0 8px}.main-hero{display:grid;grid-template-columns:minmax(300px,1fr) minmax(280px,.8fr);align-items:center;gap:24px;padding:20px;border:1px solid var(--line);border-radius:28px;background:rgba(4,48,43,.75);backdrop-filter:blur(9px)}.main-poster{width:100%;aspect-ratio:1;object-fit:cover;border-radius:24px;box-shadow:0 18px 58px #001a17cc}.main-copy{display:grid;gap:14px}.main-copy small{color:#9effd7;font-weight:1000}.main-copy h1{font-size:clamp(38px,5vw,56px);line-height:1.03;margin:0}.main-copy p{font-size:19px;line-height:1.5;margin:0}.main-progress{padding:14px;border-radius:16px;background:rgba(1,27,28,.86);color:#c5ffea;font-weight:900}.primary-action{min-height:58px;border:0;border-radius:16px;background:linear-gradient(#ffe987,#ffc43d);color:#362900;font-weight:1000;font-size:19px;box-shadow:0 7px 0 #a96d00}.game-page-info{width:100%}body[data-screen="stage"] .main-group,body[data-screen="battle"] .main-group{display:none}

.stage-screen{position:fixed;inset:0;width:100%;background:#031e20}.battle-screen{position:fixed;inset:0;width:100%;background:#031e20}.stage-canvas,.battle-canvas{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;background:linear-gradient(rgba(3,37,34,.56),rgba(2,28,29,.9)),url('../../assets/animal-block-grove-background.webp') center/cover}.stage-header{position:absolute;z-index:4;left:18px;right:18px;top:18px;height:84px;display:grid;grid-template-columns:60px minmax(0,1fr) 72px;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:22px;background:rgba(3,39,37,.95)}.stage-header button,.battle-header>button{width:52px;height:52px;border-radius:14px;border:1px solid #6cf1bf;background:#fff;color:#147ca6;font-size:28px;font-weight:1000}.stage-header div{display:grid;gap:3px;min-width:0}.stage-header strong{font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-header span{color:#b8ead8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-header img{width:70px;height:70px;object-fit:contain}.stage-mode-tabs{position:absolute;z-index:4;left:24px;right:24px;top:116px;height:48px;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px;border:1px solid var(--line);border-radius:15px;background:rgba(3,32,32,.9)}.stage-mode-tabs button{border:0;border-radius:11px;background:transparent;color:#c3ddd5;font-weight:1000}.stage-mode-tabs button[aria-pressed="true"]{color:#172b23;background:linear-gradient(#fff09b,#ffc845);box-shadow:0 0 16px #ffd55a66}.chapter-panel{position:absolute;z-index:3;left:24px;right:24px;top:178px;min-height:96px;padding:14px 18px;border-radius:18px;background:rgba(5,55,47,.92);border:1px solid rgba(255,226,105,.5);display:grid;gap:4px}.chapter-panel small{color:#ffe275;font-weight:1000}.chapter-panel strong{font-size:22px}.chapter-panel p{margin:0;color:#d0eee4}.stage-canvas::before{content:"";position:absolute;z-index:0;left:50%;top:250px;width:min(70%,560px);aspect-ratio:1;transform:translateX(-50%);background:url('../../assets/animal-block-grove-cover.webp') center/contain no-repeat;opacity:.16;mask-image:radial-gradient(circle,#000 45%,transparent 76%);pointer-events:none}.stage-rail{position:absolute;z-index:2;left:18px;right:18px;bottom:42px;height:330px;display:flex;gap:18px;align-items:center;overflow-x:auto;overflow-y:hidden;padding:28px calc(50% - 132px);scroll-snap-type:x mandatory;touch-action:pan-x}.stage-card{flex:0 0 264px;height:208px;scroll-snap-align:center;border-radius:24px;border:2px solid rgba(149,255,220,.36);background:linear-gradient(rgba(3,55,45,.42),rgba(2,31,32,.96)),url('../../assets/animal-block-grove-cover.webp') center/cover;color:#fff;padding:16px;text-align:left;display:grid;grid-template-rows:auto 1fr auto;box-shadow:0 18px 40px #001a1a80}.stage-card.is-centered,.stage-card.selected{border-color:#64ffd0;box-shadow:0 0 0 5px #55ffc833,0 0 28px #65ffd099,0 18px 40px #001a1a}.stage-card.locked{filter:saturate(.28) brightness(.56)}.stage-card strong{font-size:30px;line-height:1.08}.stage-card small{display:flex;justify-content:space-between;color:#d2ffee}.stage-card.challenge-card{border-color:#ffd667;background:linear-gradient(rgba(35,70,46,.48),rgba(18,32,37,.95)),url('../../assets/animal-block-grove-cover.webp') center/cover}

.battle-canvas{display:grid;grid-template-rows:78px 44px minmax(0,1fr) 150px 58px;gap:7px;padding:8px}.battle-header{display:grid;grid-template-columns:54px minmax(0,1fr) 72px 84px;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:18px;background:rgba(2,36,35,.95)}.battle-header>button{width:48px;height:48px}.battle-progress{display:grid;gap:2px;min-width:0}.battle-progress span,.battle-progress strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battle-progress strong{color:#ffe070}.battle-stat{text-align:center;display:grid;min-width:0}.battle-stat small{color:#a4ddcd;font-size:12px}.objective-row{display:flex;gap:8px;align-items:center;justify-content:center;min-width:0;padding:6px 10px;border-radius:13px;background:rgba(5,61,51,.94);overflow:hidden}.objective-chip{display:flex;align-items:center;gap:4px;min-width:0;padding:3px 8px;border-radius:999px;background:#042e2c;font-weight:900;white-space:nowrap}.objective-chip img{width:23px;height:23px;object-fit:contain}.objective-chip.done{background:#175f46;color:#b9ffd4}.board-zone{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:rgba(1,24,26,.7);container-type:size}.game-board{width:min(100cqw,100cqh,590px);height:min(100cqw,100cqh,590px);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:4px;padding:7px;border:4px solid #8ba66f;border-radius:20px;background:#344b3f;touch-action:none;user-select:none;outline:none;box-shadow:0 16px 40px #001a1699}.board-cell{position:relative;min-width:0;min-height:0;border:1px solid rgba(225,246,202,.18);border-radius:9px;background:rgba(213,229,193,.14);overflow:hidden}.board-cell>img.tile-image{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:contain;filter:drop-shadow(0 2px 3px #0018)}.board-cell>img.object-image{position:absolute;z-index:2;left:17%;top:17%;width:66%;height:66%;object-fit:contain;filter:drop-shadow(0 2px 2px #0008)}.board-cell.preview{background:#7af1b766;box-shadow:inset 0 0 0 2px #b8ffe0}.board-cell.preview.invalid{background:#ff696655;box-shadow:inset 0 0 0 2px #ff9b92}.board-cell.hint{animation:hintPulse .8s ease-in-out infinite alternate}.board-cell.clearing{animation:clearPop .34s ease both}.combo-toast{position:absolute;z-index:5;top:8px;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:#042d2be8;color:#fff18a;font-weight:1000;pointer-events:none}.combo-toast:empty{display:none}@keyframes hintPulse{to{filter:brightness(1.6);box-shadow:inset 0 0 0 3px #fff278,0 0 13px #fff278aa}}@keyframes clearPop{45%{transform:scale(1.13);filter:brightness(1.8)}100%{transform:scale(.2);opacity:0}}
.piece-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;min-height:0}.piece-card{position:relative;min-width:0;border:2px solid rgba(122,237,192,.36);border-radius:16px;background:rgba(3,44,40,.94);color:#fff;display:grid;place-items:center;padding:7px;touch-action:none}.piece-card.selected{border-color:#fff079;box-shadow:0 0 0 3px #fff07944,0 0 18px #fff07966}.piece-card.used{opacity:.2;pointer-events:none}.piece-grid{display:grid;gap:3px;width:min(104px,90%);height:min(104px,90%);place-content:center}.piece-bit{width:20px;height:20px;border-radius:5px;background:url('../../assets/animal-block-grove-tile-leaf.webp') center/contain no-repeat;filter:drop-shadow(0 2px 2px #0007)}.battle-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.battle-actions button{border:1px solid #66e5ba;border-radius:14px;background:#10534b;color:#fff;font-weight:1000;display:flex;align-items:center;justify-content:center;gap:8px}.battle-actions button:disabled{opacity:.42}.battle-actions img{width:32px;height:32px;object-fit:contain}.drag-ghost{position:fixed;z-index:80;pointer-events:none;display:grid;gap:3px;opacity:.86;filter:drop-shadow(0 6px 9px #0009);transform:translate(-50%,-115%)}.drag-ghost .piece-bit{width:34px;height:34px}
.result-overlay,.leave-overlay,.tutorial-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:rgba(0,20,23,.84)}.result-card,.leave-card,.tutorial-card{width:min(560px,100%);max-height:100%;overflow:auto;padding:20px;border-radius:26px;background:linear-gradient(145deg,#0a5b4b,#052f34);border:2px solid #6ff4c5;text-align:center;display:grid;gap:12px}.result-card>img,.tutorial-card>img{width:106px;height:106px;object-fit:contain;margin:-10px auto -18px}.result-card h2,.result-card p,.leave-card h2,.leave-card p,.tutorial-card h2{margin:0}.result-stars{font-size:38px;color:#ffd95e;letter-spacing:8px}.result-actions{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:9px;min-height:58px}.result-actions button,.leave-card button{border:1px solid #66e5ba;border-radius:14px;background:#10534b;color:#fff;font-weight:1000}.result-actions .primary-action,.leave-card .primary-action{color:#332700;background:linear-gradient(#ffe888,#ffc638);border-color:#ffe169}.leave-card{width:min(460px,100%)}.leave-card>div{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tutorial-overlay{position:fixed;z-index:90;width:100%}.tutorial-card{position:relative;width:min(510px,100%);text-align:left}.tutorial-card h2{text-align:center}.tutorial-card li{margin:8px 0}.tutorial-card>button:first-child{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#12616a;font-size:25px}.tutorial-card .primary-action{width:100%}

@media(max-width:700px){.main-screen{padding:8px;grid-template-rows:68px auto}.main-header{grid-template-columns:62px minmax(0,1fr) 112px;padding:6px}.main-return{width:52px;height:52px}.main-header>strong{font-size:19px}.main-hero{grid-template-columns:1fr;padding:12px;gap:12px}.main-poster{width:min(100%,340px);margin:auto}.main-copy{gap:9px}.main-copy h1{font-size:36px}.main-copy p{font-size:16px}.stage-header{left:8px;right:8px;top:8px}.stage-mode-tabs{left:10px;right:10px;top:100px}.chapter-panel{left:10px;right:10px;top:154px}.stage-rail{left:4px;right:4px;bottom:12px;height:310px}.battle-canvas{grid-template-rows:68px 68px minmax(0,1fr) 126px 54px;padding:5px;gap:5px}.battle-header{grid-template-columns:48px minmax(0,1fr) 54px 64px;padding:4px 6px}.battle-header>button{width:44px;height:44px}.battle-stat small{font-size:10px}.objective-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:4px;padding:4px}.objective-chip{min-width:0;justify-content:center;font-size:11px;padding:2px 4px;overflow:hidden}.objective-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis}.objective-chip img{width:19px;height:19px;flex:0 0 auto}.game-board{gap:3px;padding:5px;border-width:3px;border-radius:16px}.board-cell{border-radius:6px}.piece-card{padding:4px}.piece-bit{width:17px;height:17px}.result-card{padding:15px}.result-actions{grid-template-columns:1fr 1fr}.result-actions .primary-action{grid-column:1/-1}}
@media(max-height:520px) and (orientation:landscape){.main-screen{height:100svh;min-height:0;grid-template-rows:58px minmax(0,1fr);gap:6px;padding:6px}.main-header{grid-template-columns:62px minmax(0,1fr) 132px;padding:3px 8px}.main-hero{min-height:0;grid-template-columns:minmax(240px,38%) 1fr;gap:12px;padding:8px}.main-poster{width:auto;height:100%;max-height:300px}.main-copy{gap:5px}.main-copy h1{font-size:30px}.main-copy p{font-size:14px}.stage-header{height:64px}.chapter-panel{top:168px;left:12px;right:auto;width:34%}.stage-rail{left:36%;top:150px;bottom:4px;height:auto}.battle-canvas{grid-template-columns:minmax(0,1fr) 235px;grid-template-rows:58px 40px minmax(0,1fr);grid-template-areas:"head head" "objective side" "board side";gap:4px;padding:4px}.battle-header{grid-area:head}.objective-row{grid-area:objective}.board-zone{grid-area:board}.piece-tray{grid-area:side;align-self:start;height:125px}.battle-actions{grid-area:side;align-self:end;height:52px}.game-board{width:min(100cqw,100cqh,590px);height:min(100cqw,100cqh,590px)}.result-card{width:min(760px,96%)}}
body[data-screen="stage"] .sound-toggle,body[data-screen="battle"] .sound-toggle{display:none!important}:is(button,select,a,.game-board):focus-visible{outline:3px solid #fff27a;outline-offset:3px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.board-cell.clearing{z-index:3;animation:wpClearPop .42s cubic-bezier(.2,.8,.2,1) both}
.board-cell.clearing:after{content:"";position:absolute;inset:7%;z-index:4;border:3px solid #fff6a7;border-radius:50%;box-shadow:0 0 14px #fff6a7,0 0 26px #6fffd5;animation:wpClearRing .42s ease-out both;pointer-events:none}
.battle-screen[data-animating="true"] .game-board,.battle-screen[data-animating="true"] .piece-tray,.battle-screen[data-animating="true"] .battle-actions{pointer-events:none}
@keyframes wpClearPop{0%{transform:scale(1);opacity:1}38%{transform:scale(1.16) rotate(2deg);filter:brightness(1.9) saturate(1.35)}100%{transform:scale(.15) rotate(-8deg);filter:brightness(2);opacity:0}}
@keyframes wpClearRing{0%{transform:scale(.25);opacity:0}35%{opacity:1}100%{transform:scale(1.65);opacity:0}}

/* Game-owned responsive Canvas: portrait and short landscape each keep usable
   logical controls while the outer envelope fills the complete Kids viewport. */
.block-grove-battle-canvas{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;background:linear-gradient(rgba(3,37,34,.56),rgba(2,28,29,.9)),url('../../assets/animal-block-grove-background.webp') center/cover;display:grid;grid-template-rows:78px 44px minmax(0,1fr) 150px 58px;gap:7px;padding:8px}
@media(max-width:700px){.block-grove-battle-canvas{grid-template-rows:68px 68px minmax(0,1fr) 126px 54px;padding:5px;gap:5px}}
@media(max-height:520px) and (orientation:landscape){.block-grove-battle-canvas{grid-template-columns:minmax(0,1fr) 235px;grid-template-rows:58px 72px minmax(0,1fr);grid-template-areas:"head head" "objective side" "board side";gap:4px;padding:4px}.block-grove-battle-canvas .objective-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px;padding:4px}.block-grove-battle-canvas .objective-chip{min-width:0;justify-content:center;font-size:12px;padding:2px 5px}.block-grove-battle-canvas .objective-chip img{width:20px;height:20px}}
.stage-rail{touch-action:pan-y}
@media(max-height:520px) and (orientation:landscape){.block-grove-battle-canvas .battle-header{grid-area:head}.block-grove-battle-canvas .objective-row{grid-area:objective}.block-grove-battle-canvas .board-zone{grid-area:board}.block-grove-battle-canvas .piece-tray{grid-area:side;align-self:start;height:250px}.block-grove-battle-canvas .battle-actions{grid-area:side;align-self:end;height:96px}.block-grove-battle-canvas .leave-card button,.block-grove-battle-canvas .result-card button{min-height:96px}}