:root{font-family:Arial,"Noto Sans TC",sans-serif;color-scheme:light;--scale:1;--slot-w:390px;--slot-h:788px;--logical-w:390px;--logical-h:788px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#315f4c;color:#2b342d}button,select{font:inherit}.hidden{display:none!important}
.studio-app{width:min(100%,720px);min-height:100vh;margin:0 auto;background:#fff4d8}.main-screen{min-height:100vh;padding:14px 16px 22px;text-align:center;background:linear-gradient(#e9fbf5,#fff4d8)}
.main-topbar{height:52px;display:grid;grid-template-columns:58px minmax(0,1fr) 104px;gap:8px;align-items:center}.main-topbar h1{font-size:20px;line-height:1.1;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-link{width:58px;min-height:44px;display:grid;grid-template-columns:16px 28px;place-items:center;gap:4px;padding:4px;border-radius:10px;background:#fff;color:#275b54;text-decoration:none;font-size:22px;box-shadow:0 3px 10px #2345}.home-link img{width:28px;height:28px;object-fit:contain}.main-topbar select{width:104px;min-height:40px;border:2px solid #5e988c;border-radius:9px;background:#fff;padding:4px}
.cover{display:block;width:min(100%,390px);aspect-ratio:1;object-fit:cover;margin:8px auto 8px;border-radius:14px;box-shadow:0 8px 22px #573e2438}.intro{margin:6px auto 8px;font-size:16px}.primary,.secondary{min-height:48px;border:0;border-radius:11px;padding:0 20px;font-weight:800;cursor:pointer}.primary{background:#ffbe3f;color:#402a08;box-shadow:inset 0 -3px #dc8429}.secondary{background:#fff;color:#275b54;border:2px solid #5e988c}.main-screen>.primary{width:min(100%,340px)}
.first-steps{width:min(100%,360px);height:74px;margin:0 auto 8px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;list-style:none}.first-steps li{min-width:0;display:grid;grid-template-rows:48px 18px;place-items:center;padding:3px 4px;border:2px solid #b7d7cc;border-radius:12px;background:#fff;color:#234e45;font-size:12px;font-weight:800;line-height:1}.first-steps li+li{position:relative}.first-steps li+li::before{content:'\2192';position:absolute;left:-13px;top:22px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#ffbe3f;color:#402a08;font-size:13px}.first-steps i{display:block;width:44px;height:44px;background-repeat:no-repeat}.step-picture{border-radius:8px;background-image:url('../../assets/animal-coloring-studio-safari-pages/lion.webp');background-position:center 28%;background-size:cover}.step-color{background-image:url('../../assets/animal-coloring-studio-palette-swatches.webp');background-position:left center;background-size:700% 100%}.step-fill{background-image:url('../../assets/animal-coloring-studio-tool-icons.webp');background-position:14.2857% center;background-size:800% 100%}
.guide{max-width:520px;margin:14px auto 0;padding:10px;display:grid;grid-template-columns:72px 1fr;gap:10px;text-align:left;background:#ffffffd9;border:1px solid #cfdfd4;border-radius:12px}.guide img{width:72px;height:72px;object-fit:contain}.guide h2{font-size:16px;margin:2px 0 4px}.guide p{font-size:13px;line-height:1.35;margin:0}.game-info{padding:18px;background:#fff}.game-info h2{margin:0 0 8px}.game-info p{line-height:1.55;margin:0}
body.playing :is(.sound-toggle,.game-info,.game-page-info){display:none!important}
body.playing .first-steps li+li::before{content:none!important}
.play-shell{position:fixed;inset:0;width:100vw;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr);justify-items:center;overflow:hidden;background:#183d33}.play-shell[data-screen="stage"]{inset:0 auto 0 50%;width:min(100vw,920px);transform:translateX(-50%)}.canvas-slot{position:relative;width:var(--slot-w);height:var(--slot-h);min-width:0;min-height:0;overflow:hidden}.logical-canvas{position:absolute;left:0;top:0;width:var(--logical-w);height:var(--logical-h);transform:scale(var(--scale));transform-origin:top left;overflow:hidden;background:#fff4d8}
.play-return{width:48px;height:48px;border:0;border-radius:10px;background:#fff;color:#25776e;display:grid;place-items:center;font-size:28px;font-weight:800;box-shadow:0 2px 8px #1028}.stage-canvas{display:grid;grid-template-rows:64px 52px minmax(0,1fr) 48px;padding:8px;background-color:#173b34;background-image:linear-gradient(#1f5547dd,#173b34e8),url('../../assets/animal-coloring-studio-cover.webp');background-position:center;background-size:cover;contain:paint;isolation:isolate;backface-visibility:hidden}.stage-header,.battle-header{display:grid;grid-template-columns:52px minmax(0,1fr) 70px;gap:8px;align-items:center;color:#fff}.stage-header h2,.battle-header h2{margin:0;text-align:center;font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-header span,.battle-header span{text-align:right;font-weight:800}.album-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px}.tab{border:0;border-radius:9px;background:#f4efe0;color:#244d43;font-weight:800}.tab.active{background:#ffbe3f;color:#3b290d}.page-rail{display:flex;align-items:center;gap:14px;overflow-x:auto;overflow-anchor:none;scroll-snap-type:none;padding:16px calc(50% - 132px);touch-action:none;overscroll-behavior:contain;scrollbar-width:none;contain:layout paint style}.page-rail::-webkit-scrollbar{display:none}.page-card{flex:0 0 264px;height:190px;scroll-snap-align:none;position:relative;border:3px solid #b9d9cf;border-radius:14px;padding:10px;background:#fff;overflow:hidden;overflow-anchor:none;text-align:left;box-shadow:0 7px 18px #1028;cursor:pointer}.page-card.selected{border-color:#ffbe3f}.page-card.is-centered{border-color:#ffe16a;box-shadow:0 0 0 4px #fff1a8,0 0 24px 9px #62e6a7cc,0 7px 18px #1028}.page-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;opacity:.92}.page-card .label{position:absolute;inset:auto 8px 8px;padding:7px 9px;border-radius:8px;background:#173d34e8;color:#fff;font-weight:800}.page-card .done{float:right;color:#ffe05f}.stage-note{margin:0;display:grid;place-items:center;color:#fff;font-weight:800;text-align:center}
.battle-canvas{display:grid;grid-template:100%/100%;place-items:stretch;padding:0;background:linear-gradient(#e5f6eeea,#fff4d8ee),url('../../assets/animal-coloring-studio-bg.webp') center/cover}.battle-live,.result-canvas{grid-area:1/1;min-width:0;min-height:0;align-self:stretch;justify-self:stretch}.battle-live{width:100%;height:100%;display:grid;grid-template-rows:52px 38px 540px 54px 70px;align-content:center;gap:3px;padding:6px}.battle-header{color:#24453c}.battle-header .play-return{width:48px;height:48px}.objective{display:grid;place-items:center;padding:0 8px;border-radius:9px;background:#fff9dd;font-size:15px;font-weight:800;text-align:center}.board-wrap{position:relative;min-width:0;min-height:0;display:grid;place-items:center}.board-wrap canvas{display:block;width:360px;height:540px;border:4px solid #fff;border-radius:12px;background:#fff;box-shadow:0 8px 22px #2e3d3050;touch-action:none}.board-feedback{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);min-width:140px;max-width:290px;padding:6px 10px;border-radius:9px;background:#173d34e0;color:#fff;text-align:center;font-size:13px;font-weight:800;opacity:0;transition:opacity .15s}.board-feedback.show{opacity:1}.palette{display:grid;grid-template-columns:repeat(7,44px);justify-content:center;align-items:center;gap:7px}.swatch{width:44px;height:44px;border:3px solid #fff;border-radius:10px;background-image:url('../../assets/animal-coloring-studio-palette-swatches.webp');background-size:700% 100%;background-repeat:no-repeat;box-shadow:0 2px 8px #2038}.swatch.active{outline:4px solid #245f56;transform:translateY(-2px)}.board-wrap canvas:focus-visible{outline:5px solid #245f56;outline-offset:3px}.keyboard-cursor{position:absolute;z-index:3;width:22px;height:22px;border:3px solid #fff;border-radius:50%;background:#245f5688;box-shadow:0 0 0 3px #245f56,0 2px 7px #0008;pointer-events:none;opacity:0;transform:translate(-50%,-50%)}.board-wrap:focus-within .keyboard-cursor{opacity:1}
.tools{display:grid;grid-template-columns:repeat(5,52px) 84px;align-items:center;justify-content:center;gap:5px}.tool{height:70px;min-width:0;border:2px solid #d4e1da;border-radius:9px;background:#fff;color:#315348;font-size:11px;font-weight:800;display:grid;grid-template-rows:38px 18px;place-items:center;padding:3px}.tool.active{border-color:#2c8f80;background:#e1fff7}.tool.confirming{border-color:#d86536;background:#fff0d9;color:#7a2d16}.tool i{width:36px;height:36px;background:url('../../assets/animal-coloring-studio-tool-icons.webp') 0 center/800% 100% no-repeat}.tool span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:48px}.finish{height:70px;padding:0 8px}
.result-canvas{position:relative;inset:auto;width:100%;height:100%;min-width:0;min-height:0;align-self:stretch;justify-self:stretch;z-index:3;display:grid;grid-template-rows:390px 74px 70px 88px;align-content:center;justify-items:center;gap:14px;padding:34px 22px;text-align:center;background:linear-gradient(#effcf6,#fff1c7)}.result-art{position:relative;width:300px;height:390px}.result-art img{width:100%;height:100%;object-fit:contain}.result-art i{position:absolute;inset:28px;background:url('../../assets/animal-coloring-studio-complete-fx.webp') left center/300% 100% no-repeat;pointer-events:none}.result-canvas h2{font-size:31px;margin:0;align-self:end}.result-canvas p{margin:0;line-height:1.45}.skill{font-weight:800}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;align-items:center}.result-actions button{width:100%}.result-actions button:focus{outline:4px solid #245f56;outline-offset:3px;box-shadow:0 0 0 3px #fff}
.leave-confirm-canvas{grid-area:1/1;position:relative;z-index:4;width:100%;height:100%;display:grid;place-items:center;padding:20px;background:#173d34a8;backdrop-filter:blur(7px)}.leave-confirm-card{width:min(100%,350px);display:grid;gap:16px;padding:24px;border-radius:20px;background:#fff9e8;color:#29483f;text-align:center;box-shadow:0 20px 50px #102b}.leave-confirm-card h2,.leave-confirm-card p{margin:0}.leave-confirm-card h2{font-size:27px}.leave-confirm-card p{font-size:16px;line-height:1.45;font-weight:700}.leave-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.leave-confirm-actions button{width:100%;min-width:0;padding-inline:10px}.leave-confirm-actions button:focus{outline:4px solid #245f56;outline-offset:3px;box-shadow:0 0 0 3px #fff}
@media(max-height:500px){.logical-canvas{box-shadow:0 0 24px #0008}}@media(min-width:760px){.studio-app{box-shadow:0 0 40px #0007}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}