*{box-sizing:border-box}html,body{margin:0;min-width:0;min-height:100%;font-family:Arial,Noto Sans TC,sans-serif}button,select{font:inherit}.hidden{display:none!important}#main .main-content{display:grid;gap:16px;min-width:0}.first-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin:0;padding:0;list-style:none}.first-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;justify-items:center;gap:4px;min-width:0;min-height:44px;padding:4px;border:1px solid var(--wp-ui-line,#47747a);border-radius:10px;background:var(--wp-ui-background,#102c3a);color:var(--wp-ui-text,#f5f2df);font-size:12px;font-weight:700;line-height:1.15;text-align:center}.first-steps i{display:block;width:26px;height:26px;flex:none;background-repeat:no-repeat}.step-picture{border-radius:7px;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%}#battle .battle-content{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.battle-live{grid-area:1/1;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:6px;width:100%;height:100%;min-width:0;min-height:0;padding:8px;align-content:stretch}.objective{display:grid;place-items:center;min-height:32px;margin:0;padding:4px 8px;border:1px solid var(--wp-ui-line,#47747a);border-radius:10px;background:var(--wp-ui-surface,#123747);color:var(--wp-ui-text,#f5f2df);font-size:calc(14px * var(--wp-battle-canvas-inverse-scale,1));font-weight:700;line-height:1.25;text-align:center}.board-wrap{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden}.board-wrap canvas{display:block;max-width:100%;max-height:100%;border:3px solid #fff;border-radius:12px;background:#fff;box-shadow:0 6px 18px #06162488;touch-action:none}.board-wrap canvas:focus-visible{outline:4px solid var(--wp-i9-focus,#9ff3d6);outline-offset:3px}.keyboard-cursor{position:absolute;z-index:2;width:22px;height:22px;border:3px solid #fff;border-radius:50%;background:#247f76aa;box-shadow:0 0 0 3px #124b49,0 2px 7px #0008;pointer-events:none;opacity:0;transform:translate(-50%,-50%)}.board-wrap:focus-within .keyboard-cursor{opacity:1}.board-feedback{position:absolute;left:50%;bottom:8px;z-index:3;max-width:90%;padding:6px 10px;border-radius:9px;background:#102c3aee;color:#fff;text-align:center;font-size:calc(13px * var(--wp-battle-canvas-inverse-scale,1));font-weight:700;opacity:0;pointer-events:none;transform:translate(-50%);transition:opacity .15s}.board-feedback.show{opacity:1}.palette{display:flex;align-items:center;gap:calc(6px * var(--wp-battle-canvas-inverse-scale,1));width:100%;min-width:0;min-height:calc(48px * var(--wp-battle-canvas-inverse-scale,1));overflow-x:auto;overflow-y:hidden;padding:2px;overscroll-behavior-x:contain;scrollbar-width:thin;touch-action:pan-x}.swatch{flex:0 0 calc(44px * var(--wp-battle-canvas-inverse-scale,1));width:calc(44px * var(--wp-battle-canvas-inverse-scale,1));height:calc(44px * var(--wp-battle-canvas-inverse-scale,1));min-width:calc(44px * var(--wp-battle-canvas-inverse-scale,1));min-height:calc(44px * var(--wp-battle-canvas-inverse-scale,1));border:2px 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 7px #071c27aa;cursor:pointer}.swatch.active{outline:3px solid var(--wp-i9-focus,#9ff3d6);outline-offset:2px}.swatch:focus-visible,.tool:focus-visible,.result-actions button:focus-visible,.leave-confirm-actions button:focus-visible{outline:3px solid var(--wp-i9-focus,#9ff3d6);outline-offset:2px}.tools{display:flex;align-items:stretch;gap:calc(5px * var(--wp-battle-canvas-inverse-scale,1));width:100%;min-width:0;min-height:calc(64px * var(--wp-battle-canvas-inverse-scale,1));overflow-x:auto;overflow-y:hidden;padding:2px;overscroll-behavior-x:contain;scrollbar-width:thin}.tool{display:grid;grid-template-rows:calc(34px * var(--wp-battle-canvas-inverse-scale,1)) auto;place-items:center;gap:2px;flex:1 0 calc(48px * var(--wp-battle-canvas-inverse-scale,1));min-width:calc(48px * var(--wp-battle-canvas-inverse-scale,1));min-height:calc(56px * var(--wp-battle-canvas-inverse-scale,1));padding:3px;border:2px solid var(--wp-ui-line,#47747a);border-radius:10px;background:var(--wp-ui-button-image,#164252);color:var(--wp-ui-text,#f5f2df);font-size:calc(10px * var(--wp-battle-canvas-inverse-scale,1));font-weight:700;line-height:1.1;cursor:pointer}.tool i{display:block;width:calc(32px * var(--wp-battle-canvas-inverse-scale,1));height:calc(32px * var(--wp-battle-canvas-inverse-scale,1));background:url(../../assets/animal-coloring-studio-tool-icons.webp) 0 center/800% 100% no-repeat}.tool span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tool.active{border-color:#75dfc8;background:#164e59}.tool.confirming{border-color:#f5a26c;background:#603a35;color:#fff1df}.tools .finish{display:grid;place-items:center;flex:1.25 0 calc(64px * var(--wp-battle-canvas-inverse-scale,1));min-width:calc(64px * var(--wp-battle-canvas-inverse-scale,1));min-height:calc(56px * var(--wp-battle-canvas-inverse-scale,1));padding-inline:8px}.primary,.secondary{border-radius:10px;font-weight:800;cursor:pointer}.primary{border:2px solid #ffd271;background:#e6ad42;color:#2c2518;box-shadow:inset 0 2px #fff5c9,0 3px #754c26}.secondary{border:2px solid var(--wp-ui-line,#47747a);background:var(--wp-ui-button-image,#164252);color:var(--wp-ui-text,#f5f2df)}.result-panel,.leave-confirm-panel{position:absolute;inset:0;z-index:5;display:grid;place-items:center;min-width:0;min-height:0;overflow:auto;padding:calc(12px * var(--wp-battle-canvas-inverse-scale,1));background:#071c27cc;backdrop-filter:blur(5px)}.result-card,.leave-confirm-card{display:grid;justify-items:center;align-content:center;gap:calc(8px * var(--wp-battle-canvas-inverse-scale,1));width:min(100%,calc(460px * var(--wp-battle-canvas-inverse-scale,1)));max-height:100%;overflow:auto;border:2px solid var(--wp-ui-line,#47747a);border-radius:18px;background:var(--wp-ui-surface,#123747);color:var(--wp-ui-text,#f5f2df);text-align:center}.result-art{position:relative;width:min(100%,calc(220px * var(--wp-battle-canvas-inverse-scale,1)));height:calc(230px * var(--wp-battle-canvas-inverse-scale,1));min-height:0}.result-art img{display:block;width:100%;height:100%;object-fit:contain}.result-art i{position:absolute;inset:0;background:url(../../assets/animal-coloring-studio-complete-fx.webp) center/300% 100% no-repeat;pointer-events:none}.result-card h2,.leave-confirm-card h2{margin:0;font-size:calc(26px * var(--wp-battle-canvas-inverse-scale,1));line-height:1.2}.result-card p,.leave-confirm-card p{max-width:100%;margin:0;color:var(--wp-ui-muted,#c5d7dc);font-size:calc(14px * var(--wp-battle-canvas-inverse-scale,1));line-height:1.4;overflow-wrap:anywhere}.result-card .skill{font-weight:700}.result-actions,.leave-confirm-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(8px * var(--wp-battle-canvas-inverse-scale,1));width:100%;margin-top:calc(4px * var(--wp-battle-canvas-inverse-scale,1))}.result-actions button,.leave-confirm-actions button{flex:1 1 calc(100px * var(--wp-battle-canvas-inverse-scale,1));min-width:calc(44px * var(--wp-battle-canvas-inverse-scale,1));min-height:calc(44px * var(--wp-battle-canvas-inverse-scale,1));padding-inline:calc(8px * var(--wp-battle-canvas-inverse-scale,1));font-size:calc(13px * var(--wp-battle-canvas-inverse-scale,1))}.result-actions button:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}.leave-confirm-panel{z-index:6}.leave-confirm-card{width:min(100%,calc(350px * var(--wp-battle-canvas-inverse-scale,1)));padding:calc(20px * var(--wp-battle-canvas-inverse-scale,1))}@media(max-width:380px){.first-steps li{grid-template-columns:1fr;gap:1px;font-size:11px}.first-steps i{width:22px;height:22px}}@media(orientation:landscape)and (max-height:480px){.result-card,.leave-confirm-card{min-height:0;gap:calc(5px * var(--wp-battle-canvas-inverse-scale,1))}.result-card h2,.leave-confirm-card h2{font-size:calc(21px * var(--wp-battle-canvas-inverse-scale,1))}.result-actions,.leave-confirm-actions{gap:calc(4px * var(--wp-battle-canvas-inverse-scale,1));margin-top:calc(2px * var(--wp-battle-canvas-inverse-scale,1))}}@media(orientation:landscape)and (max-height:560px){.battle-live{grid-template-columns:minmax(0,1fr) minmax(calc(220px * var(--wp-battle-canvas-inverse-scale,1)),.62fr);grid-template-rows:auto minmax(0,1fr) auto;gap:4px;padding:6px}.objective{grid-column:1/-1;grid-row:1;min-height:calc(30px * var(--wp-battle-canvas-inverse-scale,1))}.board-wrap{grid-column:1;grid-row:2/4}.palette{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(calc(40px * var(--wp-battle-canvas-inverse-scale,1)),1fr));grid-auto-rows:calc(44px * var(--wp-battle-canvas-inverse-scale,1));justify-items:center;align-content:center;justify-content:center;overflow:hidden;gap:calc(4px * var(--wp-battle-canvas-inverse-scale,1));padding:2px}.swatch{flex:none;width:calc(40px * var(--wp-battle-canvas-inverse-scale,1));height:calc(40px * var(--wp-battle-canvas-inverse-scale,1));min-width:calc(40px * var(--wp-battle-canvas-inverse-scale,1));min-height:calc(40px * var(--wp-battle-canvas-inverse-scale,1))}.tools{grid-column:2;grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:calc(52px * var(--wp-battle-canvas-inverse-scale,1));gap:calc(4px * var(--wp-battle-canvas-inverse-scale,1));overflow:visible;padding:0}.tool,.tools .finish{min-width:0;min-height:calc(48px * var(--wp-battle-canvas-inverse-scale,1));font-size:calc(9px * var(--wp-battle-canvas-inverse-scale,1))}.tool{grid-template-rows:calc(28px * var(--wp-battle-canvas-inverse-scale,1)) auto}.tool i{width:calc(26px * var(--wp-battle-canvas-inverse-scale,1));height:calc(26px * var(--wp-battle-canvas-inverse-scale,1))}.tools .finish{flex:none;padding:2px}.result-art{height:calc(70px * var(--wp-battle-canvas-inverse-scale,1))}}@media(prefers-reduced-motion:reduce){.board-feedback,.swatch,.tool{transition:none!important}}