:root{color-scheme:dark;--ink:#fffaf0;--muted:#d7e2da;--panel:rgba(19,42,35,.94);--line:rgba(239,199,101,.46);--mint:#55dac5;--gold:#f4c85d;--danger:#ff7e72;font-family:Inter,"Noto Sans TC","Noto Sans JP",system-ui,sans-serif;background:#10271f;color:var(--ink)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#10271f}button,select{font:inherit}button{border:0;color:inherit;cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}[hidden]{display:none!important}.loading-panel{z-index:90}.loading-card{background:rgba(19,42,35,.97)!important;border:1px solid var(--line)}.loading-track i{background:linear-gradient(90deg,var(--mint),var(--gold))!important}
.main-group{max-width:920px;margin:auto;background:#132d25}.main-screen{min-height:min(844px,100svh);padding:12px;background:linear-gradient(rgba(12,28,23,.08),rgba(10,26,22,.86)),url('../../assets/animal-screw-workshop-background.webp') center/cover}.main-header{height:58px;display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;align-items:center}.main-header>strong{font-size:clamp(.96rem,4.5vw,1.32rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-link{width:58px;min-height:48px;display:grid;grid-template-columns:16px 28px;gap:4px;align-items:center;padding:5px;border-radius:14px;background:#fff;color:#1676b8;text-decoration:none;font-size:1.35rem}.home-link img{width:28px;height:28px;object-fit:contain}.locale-control select{max-width:132px;min-height:42px;border:1px solid var(--line);border-radius:12px;background:rgba(20,46,38,.96);color:#fff;padding:0 28px 0 10px}.main-hero{min-height:calc(min(844px,100svh) - 86px);display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px}.main-poster{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 48%;border-radius:22px;border:2px solid rgba(244,200,93,.62);box-shadow:0 18px 42px #07130e}.main-copy{padding:12px 14px 14px;border-radius:18px;background:rgba(16,42,34,.96);border:1px solid var(--line);box-shadow:0 10px 26px #07150f}.main-copy small,.game-guide>small,.chapter-panel small,.result-card>small{color:var(--gold);font-weight:900}.main-copy h1{font-size:clamp(1.42rem,6vw,2rem);margin:3px 0}.main-copy p{margin:0 0 8px;color:var(--muted);line-height:1.42}.main-progress{font-weight:850;color:#8ff7dc;margin:5px 0 10px}.primary-action{background:linear-gradient(#ffe489,#f2b63f)!important;color:#3f2a0a!important;box-shadow:0 5px 0 #9b621b;font-weight:950}.main-copy .primary-action{width:100%;min-height:50px;border-radius:14px;font-size:1.1rem}.game-guide{padding:28px 22px 42px;background:#f4efdc;color:#18392f}.game-guide h2{margin:5px 0 10px;font-size:1.65rem}.game-guide p,.game-guide li{line-height:1.62}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.game-guide article{background:#fffdf5;border:1px solid #d6caa5;border-radius:18px;padding:18px}.game-guide h3{margin:3px 0 8px;color:#6e4819}.game-guide ol{padding-left:1.3rem;margin:0}
.stage-screen,.battle-screen{position:fixed;inset:0;background:#10271f;overflow:hidden}.stage-canvas,.battle-canvas{position:relative;width:100%;height:100%;margin:auto;overflow:hidden;background:linear-gradient(rgba(10,28,23,.55),rgba(10,28,23,.9)),url('../../assets/animal-screw-workshop-background.webp') center/cover}.stage-canvas{display:grid;grid-template-rows:82px 122px minmax(0,1fr);padding:12px;gap:10px}.stage-header,.battle-header{position:relative;z-index:4;display:grid;align-items:center;background:rgba(17,42,34,.95);border:1px solid var(--line);border-radius:18px}.stage-header{grid-template-columns:58px minmax(0,1fr) 58px;padding:8px;gap:10px}.stage-header button,.battle-header>button{width:52px;height:52px;border-radius:14px;background:#fff;color:#1676b8;font-size:1.6rem;font-weight:950}.stage-header div{display:grid;gap:3px;min-width:0}.stage-header strong{font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-header span{color:var(--muted);font-size:.9rem}.stage-header img{width:58px;height:58px;object-fit:contain}.chapter-panel{position:relative;z-index:3;display:grid;align-content:center;gap:4px;padding:14px 18px;background:rgba(35,54,36,.94);border:1px solid rgba(244,200,93,.6);border-radius:18px}.chapter-panel strong{font-size:1.35rem}.chapter-panel p{margin:0;color:var(--muted);line-height:1.35}.stage-canvas:before{content:"";position:absolute;inset:210px 12% 14px;background:url('../../assets/animal-screw-workshop-cover.webp') center/contain no-repeat;opacity:.13;mask-image:radial-gradient(circle,#000 28%,transparent 72%);pointer-events:none}.stage-rail{position:relative;z-index:2;display:flex!important;align-items:center;gap:16px;min-width:0;overflow-x:auto!important;overflow-y:hidden;padding:18px calc(50% - 132px)!important;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x}.stage-rail::-webkit-scrollbar{display:none}.stage-card{position:relative;flex:0 0 264px;height:190px;scroll-snap-align:center;border-radius:24px;border:2px solid rgba(230,207,145,.42);overflow:hidden;background:linear-gradient(rgba(13,32,25,.18),rgba(13,32,25,.94)),url('../../assets/animal-screw-workshop-cover.webp') center/cover;text-align:left;padding:22px;display:grid;align-content:end;gap:5px;box-shadow:0 12px 26px #07130f}.stage-card.is-centered,.stage-card.selected{border-color:#ffe17d;box-shadow:0 0 0 4px rgba(255,225,125,.25),0 0 28px #59e0c0,0 16px 34px #06120d}.stage-card.locked{filter:saturate(.25) brightness(.56);cursor:not-allowed}.stage-card small{color:var(--gold);font-weight:900}.stage-card strong{font-size:1.75rem}.stage-card span{color:#deeee6}.stage-card .stars{font-size:1.15rem;color:var(--gold);letter-spacing:2px}
.battle-canvas{display:grid;grid-template-rows:76px 42px minmax(0,1fr) 74px;padding:10px;gap:8px}.battle-header{grid-template-columns:52px minmax(0,1fr) 70px 70px;gap:8px;padding:6px}.battle-header>button{width:48px;height:48px}.battle-title{display:grid;min-width:0}.battle-title small{color:var(--gold);font-weight:900}.battle-title strong{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battle-stat{display:grid;text-align:center}.battle-stat small{color:var(--muted);font-size:.7rem}.battle-stat strong{font-size:1.15rem}.objective-bar{display:grid;place-items:center;padding:5px 12px;border:1px solid rgba(244,200,93,.45);border-radius:12px;background:rgba(15,54,44,.94);font-size:.88rem;font-weight:900;text-align:center;color:#f9e9b4}.puzzle-board{position:relative;align-self:stretch;justify-self:center;width:min(100%,720px);min-height:0;overflow:hidden;border:8px solid transparent;border-image:url('../../assets/animal-screw-workshop-wood-texture.webp') 90 round;border-radius:24px;background:linear-gradient(rgba(43,25,10,.42),rgba(40,24,10,.52)),url('../../assets/animal-screw-workshop-wood-texture.webp') center/280px auto;border-color:#a36a2f;box-shadow:inset 0 0 35px #1f0f07,0 18px 36px #05110c;touch-action:manipulation;isolation:isolate}.plate{position:absolute;z-index:var(--z);left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:rotate(var(--r));background-color:var(--plate-color);background-image:url('../../assets/animal-screw-workshop-wood-texture.webp');background-size:cover;background-blend-mode:multiply;border:4px solid color-mix(in srgb,var(--plate-color),#43240e 42%);box-shadow:inset 0 0 0 3px rgba(255,245,191,.3),0 10px 13px rgba(0,0,0,.48);transition:transform .36s cubic-bezier(.3,.8,.3,1),opacity .36s}.plate:after{content:"";position:absolute;inset:8px;border:2px solid rgba(255,244,195,.22);border-radius:inherit}.plate.shape-pill{border-radius:999px}.plate.shape-rect{border-radius:22px}.plate.shape-diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.plate.shape-chevron{clip-path:polygon(0 0,68% 0,100% 50%,68% 100%,0 100%,28% 50%)}.plate.shape-wing{border-radius:65% 15% 65% 15%}.plate.shape-leaf{border-radius:75% 10% 75% 10%}.plate.falling{animation:plateFall .48s cubic-bezier(.55,.05,.8,.45) forwards}.board-hole,.board-screw{position:absolute;z-index:12;width:clamp(42px,9vmin,62px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:transparent center/contain no-repeat;filter:drop-shadow(0 5px 4px #190d08aa);transition:filter .16s,transform .16s}.board-hole{background-image:url('../../assets/animal-screw-workshop-hole.webp');opacity:.9}.board-hole.valid{animation:holeGlow .8s ease-in-out infinite alternate}.board-hole.hint{animation:hintGlow .55s ease-in-out 4}.board-screw{background-image:url('../../assets/animal-screw-workshop-screw.webp')}.board-screw:hover{transform:translate(-50%,-54%) scale(1.04)}.board-screw.selected{transform:translate(-50%,-58%) scale(1.11);filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px #5ff4cf)}.board-screw.locked{background-image:url('../../assets/animal-screw-workshop-locked-screw.webp');filter:grayscale(.16) drop-shadow(0 4px 4px #190d08)}.board-screw.hint{animation:screwHint .55s ease-in-out 4}.board-screw img,.board-hole img{width:100%;height:100%;object-fit:contain}.battle-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.battle-actions button{min-height:62px;border-radius:16px;background:rgba(20,69,57,.96);border:1px solid var(--line);display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:8px}.battle-actions span{font-size:1.35rem;color:var(--gold)}.battle-actions b{font-size:.92rem}.battle-actions button:disabled{opacity:.38}.toast{position:fixed;z-index:70;left:50%;bottom:88px;transform:translate(-50%,16px);max-width:min(88vw,520px);padding:10px 16px;border-radius:999px;background:#102a22;border:1px solid var(--gold);box-shadow:0 10px 30px #000;color:#fff;text-align:center;font-weight:850;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-layer,.tutorial-layer{position:absolute;z-index:30;inset:0;display:grid;place-items:center;padding:18px;background:rgba(4,13,10,.82);backdrop-filter:blur(5px)}.tutorial-layer{position:fixed}.result-card,.dialog-card,.tutorial-card{position:relative;width:min(100%,460px);border-radius:24px;background:linear-gradient(160deg,#1d503f,#102c24);border:1px solid #f4cf71;padding:24px;text-align:center;box-shadow:0 25px 70px #000}.result-card>img,.tutorial-card>img{width:112px;height:112px;object-fit:contain;margin:-10px auto -5px}.result-card h2,.dialog-card h2,.tutorial-card h2{margin:6px 0 10px}.result-card p,.dialog-card p{color:var(--muted)}.result-stars{font-size:2rem;color:var(--gold);letter-spacing:4px}.best-text{font-weight:900;color:#8ff7dc!important}.modal-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dialog-card .modal-actions{grid-template-columns:1fr 1fr}.modal-actions button{min-height:48px;border-radius:13px;background:#245c4d;font-weight:900}.tutorial-card{text-align:left}.tutorial-card ol{line-height:1.55;padding-left:1.35rem}.tutorial-card .primary-action{width:100%;min-height:50px;border-radius:14px}.modal-close{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:50%;background:#245c4d;font-size:1.4rem}
@keyframes plateFall{40%{transform:rotate(calc(var(--r) + 6deg)) translateY(12px)}to{transform:rotate(calc(var(--r) + 18deg)) translateY(170px);opacity:0}}@keyframes holeGlow{to{filter:drop-shadow(0 0 12px #71ffd9) drop-shadow(0 0 18px #71ffd9);transform:translate(-50%,-50%) scale(1.06)}}@keyframes hintGlow{50%{filter:drop-shadow(0 0 16px #fff) drop-shadow(0 0 24px #ffe277)}}@keyframes screwHint{50%{transform:translate(-50%,-60%) scale(1.12);filter:drop-shadow(0 0 16px #fff)}}
@media(min-width:700px){.main-hero{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);grid-template-rows:1fr;align-items:end}.main-copy{margin-bottom:18px}}
@media(max-width:600px){.locale-control select{max-width:106px;font-size:.82rem}.main-header>strong{font-size:.9rem}.guide-grid{grid-template-columns:1fr}.game-guide{padding:24px 14px}.modal-actions{grid-template-columns:1fr}.result-card{padding:18px}.result-card>img{width:92px;height:92px}.battle-header{grid-template-columns:48px minmax(0,1fr) 56px 56px}.battle-stat strong{font-size:1rem}.battle-stat small{font-size:.62rem}.puzzle-board{border-width:6px}.board-hole,.board-screw{width:46px}}
@media(max-height:560px) and (orientation:landscape){.stage-canvas{grid-template-rows:66px 80px minmax(0,1fr);padding:7px}.stage-header{padding:4px}.chapter-panel{padding:7px 14px}.battle-canvas{grid-template-rows:58px 34px minmax(0,1fr) 54px;padding:6px;gap:5px}.battle-header>button{width:42px;height:42px}.battle-actions button{min-height:48px}.board-hole,.board-screw{width:40px}.modal-layer{padding:6px}.result-card{padding:8px 14px}.result-card>img{width:62px;height:62px;margin:-3px auto -8px}.result-card h2{font-size:1.3rem;margin:2px 0}.result-stars{font-size:1.45rem}.result-card p{margin:4px 0}.modal-actions button{min-height:42px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.stage-header button{width:48px;height:48px}