:root{font-family:system-ui,sans-serif;color:#173f38;background:#cfeee1}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:linear-gradient(145deg,#effbe6,#adddd2)}button,select{font:inherit}button{cursor:pointer}.screen{width:min(100%,920px);margin:auto}.main{min-height:100svh;padding:16px 20px;display:grid;grid-template-rows:56px 1fr}.main header,.canvas>header{display:grid;grid-template-columns:90px 1fr 110px;align-items:center;text-align:center}.main header a,.canvas header button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:13px;background:#f9fff2;color:#173f38;text-decoration:none;font-size:1.3rem}.main header strong{letter-spacing:.15em}.main select{justify-self:end;max-width:110px}.hero{display:grid;grid-template-columns:minmax(250px,470px) 1fr;gap:clamp(26px,6vw,70px);align-items:center}.hero img{width:100%;border-radius:30px;box-shadow:0 18px 45px #174b3e2b}.hero h1{font-size:clamp(2.8rem,7vw,5rem);line-height:.95;margin:.1em 0}.hero p{line-height:1.5}.hero button,.tools button,dialog button{border:0;border-radius:13px;padding:12px 20px;background:#236d60;color:#fff;font-weight:800}.hero details{margin-top:18px}.canvas{height:calc(100svh - 56px);background:#f4fff3;overflow:hidden}.canvas>header{height:76px;padding:10px 16px;background:#216257;color:#fff}.canvas>header h2{margin:0;font-size:1.1rem}.canvas>header span{justify-self:end;font-weight:800;font-size:.8rem}#stage{display:grid;grid-template-rows:76px minmax(0,1fr);background:linear-gradient(#153f38dd,#153f38dd),var(--wp-stage-art) center/cover}#stageGrid{display:flex;align-items:center;gap:16px;padding-inline:calc(50% - 132px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-y}#stageGrid::-webkit-scrollbar{display:none}.stage-card{width:264px;min-width:264px;height:190px;scroll-snap-align:center;border:2px solid #a8cbb9;border-radius:19px;padding:16px;background:linear-gradient(180deg,#103c3314 15%,#082c26e8 100%),var(--wp-stage-art) center/cover no-repeat;color:#fff;text-align:left;text-shadow:0 2px 5px #071d19;display:grid;align-content:end;gap:8px;box-shadow:0 12px 26px #102e2866;overflow:hidden}.stage-card b{font-size:1.35rem}.stage-card small{font-weight:800}.stage-card.selected,.stage-card.centered{border-color:#fff0a0;box-shadow:0 0 0 3px #46a58d,0 0 28px #fff0a0}.stage-card.locked{filter:saturate(.35) brightness(.72)}.battle{height:calc(100% - 76px);display:grid;grid-template-rows:42px minmax(0,1fr) 52px;gap:10px;padding:14px 16px;place-items:center}.battle #board{position:relative;grid-row:2;width:min(92vw,500px,calc(100svh - 274px));aspect-ratio:1;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:5px;padding:8px;background:#236257;border-radius:22px;box-shadow:0 15px 30px #174b3e30}.cell{position:relative;z-index:0;background:#edf9e8;border-radius:9px}.block{position:relative;z-index:2;inset:auto;margin:1px;border:0;border-radius:8px;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:contain;color:#173f38;font-size:0;font-weight:900;touch-action:none;filter:drop-shadow(0 4px 2px #173f3840)}.block.hero{color:#fff;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #ff5a47)}.block.h,.block.v{width:auto;height:auto}.art-hero{background-image:url("../../assets/animal-unblock-hero-v2.webp")}.art-h2{background-image:url("../../assets/animal-unblock-block-h2-v2.webp")}.art-h3{background-image:url("../../assets/animal-unblock-block-h3-v2.webp")}.art-v2{background-image:url("../../assets/animal-unblock-block-v2-v2.webp")}.art-v3{background-image:url("../../assets/animal-unblock-block-v3-v2.webp")}.exit{outline:0;background:#fff3bf url("../../assets/animal-unblock-gate-v1.webp") center/78% no-repeat;box-shadow:inset 0 0 0 3px #f3bd3f}.exit::after{content:"→";position:absolute;right:3px;bottom:3px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#b76500;font-size:16px;font-weight:950;line-height:1;box-shadow:0 2px 5px #173f3850}.tools{grid-row:3;display:flex;gap:8px}.tools button{background:#fff;color:#236257;border:1px solid #a8cbb9}.status{grid-row:1;max-width:34rem;margin:0;color:#174c43;font-size:.92rem;font-weight:850;line-height:1.35;text-align:center}.goal-coach .exit{animation:unblock-goal-pulse 1.4s ease-in-out infinite}@keyframes unblock-goal-pulse{50%{box-shadow:inset 0 0 0 3px #f3bd3f,0 0 0 5px #ffd86666}}@media(prefers-reduced-motion:reduce){.goal-coach .exit{animation:none}}dialog{border:0;border-radius:22px;text-align:center;padding:28px;color:#173f38}dialog::backdrop{background:#123b3699}#generalReserve{width:min(100%,920px);height:56px;margin:auto;background:#17243a}.result-character{display:block;width:112px;height:112px;margin:0 auto 8px;object-fit:contain;filter:drop-shadow(0 8px 12px #174b3e38)} @media(max-width:680px){.hero{grid-template-columns:1fr;text-align:center;gap:18px}.hero img{width:min(70vw,320px);justify-self:center}}@media(max-height:500px) and (min-width:681px){.battle{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:minmax(0,1fr) 44px;padding:8px 20px;gap:8px}.battle #board{grid-column:1;grid-row:1/3;width:220px}.tools{grid-column:2;grid-row:1;align-self:end}.status{grid-column:2;grid-row:2;align-self:start;text-align:center}}
.block{will-change:transform}.block.dragging{z-index:5;filter:drop-shadow(0 8px 5px #173f385c);transition:none}.block.settling{z-index:5;transition:transform 220ms cubic-bezier(.2,.78,.25,1),filter 220ms ease}