:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--cream:#f7efe8;--cream-deep:#efe1d5;--mist:#ddebe5;--rose:#eecad5;--lavender:#d8c9f2;--butter:#f4ddaf;--sky:#bfdded;--ink:#4b5363;--ink-soft:#6d7483;--white-glass:#ffffffb8;--shadow:#574c422e;--radius-large:32px;--radius-medium:22px}*{box-sizing:border-box}[hidden]{display:none!important}html,body,#app{background:var(--cream);width:100%;height:100%;color:var(--ink);margin:0;font-family:Comic Sans MS,Comic Neue,Trebuchet MS,ui-rounded,system-ui,sans-serif;font-weight:800;overflow:hidden}button{font:inherit}.paint-framed{position:relative}.paint-framed:before{content:"";z-index:2;pointer-events:none;opacity:.98;filter:drop-shadow(0 16px 18px #574c422e);background:url(/kids/assets/ui/gouache-frame.png) 50%/100% 100% no-repeat;position:absolute;inset:-20px}.app-shell{isolation:isolate;position:fixed;inset:0}#game-canvas{touch-action:none;cursor:grab;width:100vw;height:100vh;display:block;position:absolute;inset:0}#game-canvas:active{cursor:grabbing}.ui-root{pointer-events:none;z-index:2;position:absolute;inset:0}.rotate-device-notice{z-index:20;pointer-events:auto;background:radial-gradient(circle at 50% 20%,#fffffff5,#ffffffad 34%,#dbf2f7db),linear-gradient(160deg,#f6cddcc7,#c4e8f3db);place-items:center;padding:22px;display:none;position:fixed;inset:0}.rotate-device-card{text-align:center;width:min(330px,88vw);color:var(--ink);background:#ffffffc2;border:3px solid #ffffffe0;border-radius:30px;justify-items:center;gap:12px;padding:24px 20px 22px;display:grid;box-shadow:inset 0 -8px #4b536314,0 28px 70px #4b536338}.rotate-device-card img{filter:drop-shadow(0 12px 20px #4b536324);width:min(235px,66vw);height:auto}.rotate-device-card strong{font-size:1.35rem;line-height:1}.rotate-device-card span{max-width:24ch;color:var(--ink-soft);font-size:.98rem;line-height:1.35}.rotate-phone-icon{background:linear-gradient(90deg,#fffffff2,#ffe881b8);border:7px solid #75d9f0;border-radius:18px;width:86px;height:54px;animation:1.45s ease-in-out infinite rotate-phone-pulse;position:relative;box-shadow:inset 0 -5px #4b536314,0 12px 22px #4b536324}.rotate-phone-icon:before,.rotate-phone-icon:after{content:"";position:absolute}.rotate-phone-icon:before{border-top:5px solid #f36fa4;border-right:5px solid #f36fa4;width:18px;height:18px;top:12px;right:-24px;transform:rotate(45deg)}.rotate-phone-icon:after{border:5px solid #f36fa4;border-color:#f36fa4 #f36fa4 #0000 #0000;border-radius:50%;width:35px;height:35px;top:2px;right:-34px}@keyframes rotate-phone-pulse{0%,to{transform:rotate(-6deg)translateY(0)}50%{transform:rotate(4deg)translateY(-4px)}}.hub-access-layer{pointer-events:none;position:absolute;inset:0}.astrax-return{top:max(16px, env(safe-area-inset-top));left:max(18px, env(safe-area-inset-left));cursor:pointer;pointer-events:auto;filter:drop-shadow(0 14px 22px #4b536324);background:0 0;border:0;border-radius:24px;width:172px;height:64px;padding:0;position:absolute}.astrax-return img{object-fit:contain;width:100%;height:100%}.classic-drawer{right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));pointer-events:auto;justify-items:end;gap:10px;width:min(420px,100vw - 36px);display:grid;position:absolute}.classic-drawer-toggle,.classic-mode-button{color:var(--ink);cursor:pointer;font:inherit;-webkit-backdrop-filter:blur(16px)saturate(1.1);backdrop-filter:blur(16px)saturate(1.1);background:#ffffffb8;border:0;box-shadow:inset 0 -5px #4b536314,0 14px 32px #4b536324}.classic-drawer-toggle{border-radius:24px;align-items:center;gap:10px;min-height:66px;padding:8px 16px 8px 9px;display:inline-flex}.classic-drawer-toggle img{object-fit:contain;width:62px;height:38px}.classic-drawer-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffff8f;border-radius:26px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;padding:10px;display:grid;box-shadow:inset 0 0 0 2px #ffffffb8,0 18px 42px #4b536324}.classic-mode-button{text-align:left;border-radius:18px;align-items:center;gap:10px;min-height:54px;padding:8px 10px;display:flex}.classic-mode-button img{object-fit:contain;width:36px;height:36px}.road-forge-hud{z-index:3;pointer-events:none;position:absolute;inset:0}.road-forge-top{top:max(14px, env(safe-area-inset-top));left:max(14px, env(safe-area-inset-left));right:max(14px, env(safe-area-inset-right));grid-template-columns:62px minmax(160px,1fr) auto;align-items:center;gap:12px;display:grid;position:absolute}.road-logo-plate{object-fit:contain;filter:drop-shadow(0 14px 24px #4b536324);justify-self:center;width:min(420px,48vw);height:128px}.road-icon-btn,.road-tool,.road-launch,.road-level-chip,.road-status{color:var(--ink);-webkit-backdrop-filter:blur(16px)saturate(1.12);backdrop-filter:blur(16px)saturate(1.12);background:#ffffffe6;border:0;box-shadow:inset 0 -5px #4b536314,inset 0 0 0 2px #75d9f047,0 14px 30px #4b536329}.road-icon-btn{pointer-events:auto;cursor:pointer;border-radius:22px;width:62px;height:62px;font-size:30px}.road-level-chip{white-space:nowrap;background:#fff4bdf0;border-radius:20px;justify-self:end;place-items:center;min-height:52px;padding:0 18px;font-size:15px;display:grid}.road-status{left:50%;top:max(104px, calc(env(safe-area-inset-top) + 88px));text-align:center;color:#3d4558;background:#fffffff0;border-radius:999px;place-items:center;max-width:min(560px,100vw - 36px);min-height:46px;padding:8px 18px;font-size:15px;display:grid;position:absolute;transform:translate(-50%)}.road-tutorial{left:max(18px, env(safe-area-inset-left));top:max(106px, calc(env(safe-area-inset-top) + 90px));pointer-events:none;gap:8px;width:min(318px,34vw);display:grid;position:absolute}.road-tutorial span{color:#354052;-webkit-backdrop-filter:blur(14px)saturate(1.12);backdrop-filter:blur(14px)saturate(1.12);background:#ffffffe6;border-radius:18px;align-items:center;min-height:38px;padding:8px 14px;font-size:13px;line-height:1.15;display:flex;box-shadow:inset 0 -4px #4b536312,inset 0 0 0 2px #ffe27961,0 12px 24px #4b53631f}.road-controls{left:50%;bottom:max(18px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);pointer-events:auto;background:#ffffffa3;border-radius:30px;justify-content:center;align-items:center;gap:10px;width:min(760px,100vw - 32px);padding:10px;display:flex;position:absolute;transform:translate(-50%);box-shadow:inset 0 0 0 2px #ffffffd1,0 18px 48px #4b53632e}.road-tool,.road-launch{cursor:pointer;border-radius:22px;justify-content:center;align-items:center;gap:8px;min-height:58px;padding:0 15px;font-size:14px;display:inline-flex}.road-tool img,.road-launch img{object-fit:contain;width:36px;height:36px}.road-tool.is-active{background:linear-gradient(135deg,#fff4bd,#fff);box-shadow:inset 0 -5px #f58ac229,inset 0 0 0 2px #75d9f094,0 14px 30px #4b536329}.road-launch{background:linear-gradient(135deg,#75d9f0,#fff4bd 46%,#f58ac2);min-width:136px;box-shadow:inset 0 -5px #4b53631a,inset 0 0 0 2px #ffffffd6,0 18px 36px #f58ac242}.road-ink{left:max(18px, env(safe-area-inset-left));bottom:max(22px, env(safe-area-inset-bottom));pointer-events:none;width:min(220px,30vw);height:54px;position:absolute}.road-ink img{object-fit:fill;filter:drop-shadow(0 10px 20px #4b53631f);width:100%;height:100%}.road-ink-fill{transform-origin:0;background:linear-gradient(90deg,#75d9f0,#f58ac2);border-radius:999px;width:calc(100% - 92px);height:8px;position:absolute;top:24px;left:45px}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden;transform:translate(-100vw,-100vh)}.topbar{top:max(18px, env(safe-area-inset-top));left:max(24px, env(safe-area-inset-left));right:max(24px, env(safe-area-inset-right));-webkit-backdrop-filter:blur(20px)saturate(1.15);backdrop-filter:blur(20px)saturate(1.15);pointer-events:auto;background:linear-gradient(135deg,#ffffffe0,#ffffffa8);border:1px solid #ffffffb8;border-radius:34px;justify-content:space-between;align-items:center;gap:18px;height:86px;padding:14px 16px;display:flex;position:absolute;box-shadow:0 18px 50px #574c4229}.topbar-left,.topbar-actions{align-items:center;gap:12px;min-width:0;display:flex}.brand-block{align-items:center;gap:14px;min-width:0;display:flex}.brand-block strong{letter-spacing:0;white-space:nowrap;text-shadow:0 2px #ffffffd6,0 8px 18px #574c421f;font-size:20px;display:block}.brand-block small{color:var(--ink-soft);white-space:nowrap;margin-top:2px;font-size:13px;display:block}.brand-logo{width:54px;height:54px;color:var(--ink);background:radial-gradient(circle at 32% 24%,#fffffff2 0 13%,#0000 14%),linear-gradient(135deg,#f7b9cb 0 26%,#a9dceb 27% 58%,#f6d96e 59% 100%);border-radius:22px;flex:none;place-items:center;font-size:28px;font-weight:1000;display:grid;transform:rotate(-3deg);box-shadow:inset 0 -6px #4b536317,0 12px 24px #8f708c38}.brand-logo span{text-shadow:0 2px #ffffffb8;transform:rotate(3deg)}.brand-title{padding-top:1px;display:inline-block}.icon-button,.soft-button,.lang-button{color:var(--ink);cursor:pointer;pointer-events:auto;background:#ffffffa3;border:0;transition:transform .16s,box-shadow .16s,background .16s;box-shadow:inset 0 -4px #4b536314,inset 0 0 0 2px #ffffffb8,0 10px 24px #574c421a}.icon-button:hover,.soft-button:hover,.lang-button:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px #ffffffd6,0 14px 28px #574c4226}.icon-button:active,.soft-button:active,.lang-button:active{transform:translateY(1px)scale(.98)}.icon-button{border-radius:18px;place-items:center;width:52px;height:52px;font-size:22px;font-weight:900;display:grid}.soft-button{letter-spacing:0;white-space:normal;border-radius:22px;min-height:54px;padding:0 22px;font-weight:850}.soft-button.primary{background:linear-gradient(135deg, var(--accent,#eecad5), var(--accent-deep,#dfa9ba));color:#37404d;text-shadow:0 1px #ffffff94}.soft-button.secondary{background:#ffffff9e}.soft-button.compact{border-radius:17px;min-height:46px;padding:0 18px;font-size:14px}.language-switch{background:#ffffff70;border-radius:20px;align-items:center;gap:6px;padding:5px;display:flex}.lang-button{border-radius:15px;width:42px;height:38px;font-size:12px;font-weight:900}.lang-button.is-active{background:var(--ink);color:#fff}.menu-panel{pointer-events:none;grid-template-rows:minmax(158px,.72fr) auto;align-content:end;gap:20px;padding:134px 24px 34px;display:grid;position:absolute;inset:0}.hero-copy{text-align:center;text-shadow:0 2px 18px #ffffffbd;place-self:center;width:min(720px,100vw - 48px);padding:10px 24px}.eyebrow{height:32px;color:var(--ink-soft);letter-spacing:0;background:#ffffffb8;border-radius:999px;align-items:center;padding:0 14px;font-size:12px;font-weight:900;display:inline-flex}.hero-copy h1,.instruction-card h1{color:var(--ink);letter-spacing:0;text-shadow:0 3px #ffffffc7,0 16px 28px #574c421f;margin:10px 0 8px;font-size:clamp(34px,5vw,62px);line-height:1.02}.hero-copy p{color:var(--ink-soft);margin:0;font-size:clamp(15px,2.3vw,19px);font-weight:680}.game-picker{pointer-events:auto;-webkit-backdrop-filter:blur(18px)saturate(1.1);backdrop-filter:blur(18px)saturate(1.1);background:linear-gradient(145deg,#ffffffe6,#fffaf4bd);border-radius:40px;justify-self:center;width:min(1120px,100vw - 48px);padding:28px 30px 32px;box-shadow:0 22px 70px #574c422e}.game-picker h2{z-index:3;letter-spacing:0;margin:0 0 14px;padding:0 8px;font-size:18px;position:relative}.game-cards{z-index:3;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid;position:relative}.game-card{background:linear-gradient(145deg, #ffffffe6, #ffffffa3), radial-gradient(circle at 86% 12%, var(--accent) 0 22%, transparent 23%);border-radius:28px;flex-direction:column;justify-content:space-between;align-items:flex-start;min-height:206px;padding:20px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffffd6,0 18px 42px #574c421f}.game-card:before{content:"";background:radial-gradient(circle, var(--accent) 0 0, var(--accent) 44%, transparent 45%);opacity:.58;border-radius:50%;width:142px;height:142px;position:absolute;top:-42px;right:-28px}.game-card:after{content:"";background:linear-gradient(135deg, var(--accent), var(--accent-deep));opacity:.2;border-radius:22px;width:68px;height:68px;position:absolute;bottom:72px;right:20px;transform:rotate(10deg)}.game-icon{z-index:1;background:linear-gradient(135deg, var(--accent), var(--accent-deep));text-shadow:0 2px #ffffff7a;border-radius:22px;place-items:center;width:56px;height:56px;font-size:24px;font-weight:900;display:grid;position:relative;box-shadow:0 12px 26px #574c421f}.game-card-art{z-index:1;object-fit:contain;filter:drop-shadow(0 14px 10px #574c4229);pointer-events:none;width:104px;height:104px;position:absolute;top:16px;right:12px;transform:rotate(5deg)}.game-card h3{z-index:1;letter-spacing:0;overflow-wrap:anywhere;margin:20px 0 6px;font-size:25px;position:relative}.game-card p{z-index:1;min-height:38px;color:var(--ink-soft);overflow-wrap:anywhere;margin:0 0 18px;font-weight:680;line-height:1.35;position:relative}.game-card .soft-button{z-index:1;width:100%;position:relative}.game-hud{left:max(24px, env(safe-area-inset-left));bottom:max(24px, env(safe-area-inset-bottom));pointer-events:none;width:min(420px,100vw - 48px);position:absolute}.instruction-card{-webkit-backdrop-filter:blur(18px)saturate(1.12);backdrop-filter:blur(18px)saturate(1.12);background:linear-gradient(145deg,#ffffffe0,#ffffffad);border-radius:34px;padding:28px;box-shadow:inset 0 0 0 1px #ffffffd1,0 18px 50px #574c4229}.instruction-card>*{z-index:3;position:relative}.mode-kicker{background:linear-gradient(135deg, var(--accent), var(--accent-deep));letter-spacing:0;border-radius:999px;align-items:center;gap:8px;min-height:34px;padding:0 14px;font-size:13px;font-weight:900;display:inline-flex}.instruction-card h1{overflow-wrap:anywhere;margin-top:14px;font-size:clamp(24px,3.4vw,34px);line-height:1.06}.progress-row{color:var(--ink-soft);justify-content:space-between;align-items:center;margin-top:18px;font-size:14px;font-weight:860;display:flex}.progress-row strong{color:var(--ink);font-size:16px}.progress-track{background:#4b53631a;border-radius:999px;height:12px;margin-top:10px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg, var(--accent), var(--accent-deep));width:0;height:100%;transition:width .28s}.toast{min-width:min(440px,100vw - 48px);min-height:58px;color:var(--ink);text-align:center;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffc7;border-radius:24px;place-items:center;padding:14px 22px;font-size:17px;font-weight:900;transition:opacity .18s,transform .18s;display:grid;position:absolute;bottom:36px;left:50%;transform:translate(-50%,22px)scale(.96);box-shadow:0 18px 44px #574c4224}.toast.is-visible{opacity:1;transform:translate(-50%)scale(1)}.toast[data-type=success]{background:#e8ffecd6}.toast[data-type=wrong]{background:#ffebeedb}.modal-layer{pointer-events:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#f7efe857;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.modal-layer[hidden]{display:none}.complete-modal{text-align:center;background:linear-gradient(145deg,#ffffffeb,#ffffffad);border-radius:38px;width:min(520px,100vw - 48px);padding:34px;animation:.28s cubic-bezier(.2,.9,.2,1.15) both modalIn;box-shadow:0 24px 80px #574c422e}.complete-modal>*{z-index:3;position:relative}.modal-star{background:linear-gradient(135deg, var(--butter), var(--rose));border-radius:28px;place-items:center;width:76px;height:76px;margin:0 auto 12px;font-size:34px;display:grid;box-shadow:0 18px 34px #574c4229}.complete-modal h2{letter-spacing:0;margin:0 0 10px;font-size:clamp(28px,4vw,42px);line-height:1}.complete-modal p{color:var(--ink-soft);margin:0;font-size:17px;font-weight:680;line-height:1.45}.modal-actions{grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;display:grid}.confetti-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti-piece{top:-24px;left:var(--x);width:var(--size);height:calc(var(--size) * .56);background:linear-gradient(135deg, var(--rose), var(--sky));opacity:0;animation:confettiFall var(--fall) var(--delay) ease-in forwards;border-radius:999px;position:absolute}.confetti-piece:nth-child(3n){background:linear-gradient(135deg, var(--butter), var(--lavender))}.confetti-piece:nth-child(4n){background:linear-gradient(135deg, var(--mist), var(--rose))}.creative-stage{top:max(22px, env(safe-area-inset-top));left:max(36px, env(safe-area-inset-left));right:max(28px, env(safe-area-inset-right));bottom:max(28px, env(safe-area-inset-bottom));pointer-events:auto;-webkit-backdrop-filter:blur(14px)saturate(1.12);backdrop-filter:blur(14px)saturate(1.12);background:linear-gradient(145deg,#ffffffe6,#fffaf4b8);border-radius:42px;grid-template-rows:auto 1fr;gap:16px;width:auto;min-width:0;padding:30px;display:grid;position:absolute;box-shadow:0 24px 80px #574c4233}.creative-mode-hud{display:none}.drawing-stage,.coloring-stage{grid-template-rows:auto minmax(0,1fr) auto}.drawing-premium-stage{-webkit-backdrop-filter:blur(10px)saturate(1.08);backdrop-filter:blur(10px)saturate(1.08);background:url(/kids/assets/ui/drawing/drawing-frame-v2.webp) 50%/100% 100% no-repeat,linear-gradient(145deg,#ffffffd6,#fffbf4ad);border-radius:38px;overflow:hidden;box-shadow:0 20px 58px #4b536324,inset 0 0 0 2px #ffffffd6}.drawing-studio-bar{-webkit-backdrop-filter:blur(16px)saturate(1.12);backdrop-filter:blur(16px)saturate(1.12);background:linear-gradient(135deg,#ffffffb8,#fff4bd85),url(/kids/assets/ui/drawing/drawing-frame-v2.webp) 50%/100% 100% no-repeat;border-radius:30px;grid-template-columns:62px minmax(160px,1fr) 172px;align-items:center;gap:12px;min-height:78px;padding:8px 10px;display:grid;box-shadow:inset 0 0 0 2px #ffffffc7,0 14px 32px #4b53631f}.drawing-nav-button,.drawing-astrax-button{cursor:pointer;color:#3f4758;background:#ffffffd6;border:0;box-shadow:inset 0 -5px #4b536314,inset 0 0 0 2px #75d9f047,0 12px 22px #4b53631f}.drawing-nav-button{border-radius:22px;width:58px;height:58px;font-size:30px}.drawing-studio-logo{object-fit:contain;filter:drop-shadow(0 10px 12px #4b53631f);justify-self:center;width:min(520px,100%);height:74px}.drawing-astrax-button{width:164px;height:58px;box-shadow:none;filter:drop-shadow(0 12px 18px #4b53631f);background:0 0;border-radius:22px;padding:0}.drawing-astrax-button img{object-fit:contain;width:100%;height:100%}.creative-stage>*{z-index:3;position:relative}.creative-tools{justify-content:space-between;align-items:center;gap:14px;min-width:0;padding:6px 2px 0;display:flex}.drawing-dock{-webkit-backdrop-filter:blur(16px)saturate(1.12);backdrop-filter:blur(16px)saturate(1.12);background:linear-gradient(135deg,#ffffffd1,#fff4bd6b),url(/kids/assets/ui/drawing/drawing-frame-v2.webp) 50%/100% 100% no-repeat;border-radius:30px;align-self:end;padding:10px;box-shadow:inset 0 0 0 2px #ffffffc7,0 16px 34px #4b536321}.paint-swatches,.shape-tabs,.tool-pills{flex-wrap:wrap;align-items:center;gap:10px;min-width:0;display:flex}.paint-swatch{background:radial-gradient(circle at 30% 24%, #ffffffd1 0 15%, transparent 16%), var(--swatch);cursor:pointer;border:0;border-radius:18px;width:46px;height:46px;box-shadow:inset 0 -5px #4b53631a,0 9px 18px #574c4224}.paint-swatch.is-active{outline:4px solid #fffffffa;transform:translateY(-2px)scale(1.04);box-shadow:inset 0 -5px #4b53631a,0 0 0 3px #75d9f073,0 12px 20px #574c4224}.brush-slider{background:#ffffffdb;border-radius:999px;align-items:center;gap:12px;width:min(180px,25vw);padding:12px 16px;display:flex;box-shadow:inset 0 -4px #4b536314,inset 0 0 0 2px #f58ac22e}.brush-slider input{width:100%;accent-color:var(--rose)}.paint-action,.shape-tab,.tool-pill{min-height:46px;color:var(--ink);cursor:pointer;background:#ffffffe0;border:0;border-radius:18px;padding:0 18px;box-shadow:inset 0 -4px #4b536314,inset 0 0 0 2px #75d9f02e,0 10px 20px #574c421f}.shape-tab.is-active,.tool-pill.is-active{background:linear-gradient(135deg,#fff4bd,#ffb8da);box-shadow:inset 0 -4px #4b536314,inset 0 0 0 2px #ffffffd6,0 12px 22px #f58ac22e}.tool-pill[data-tool=eraser].is-active{background:linear-gradient(135deg, #fff, var(--sky))}.icon-tool{place-items:center;width:54px;min-width:54px;padding:0;display:grid}.icon-tool img{object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 4px #4b53631f);width:34px;height:34px}.brush-preview{border-radius:999px;flex:none;display:block;box-shadow:inset 0 -3px #4b53631f,0 7px 12px #574c4224}.drawing-canvas,.coloring-canvas{touch-action:none;background:linear-gradient(145deg,#ffffffe0,#fffaee9e),repeating-linear-gradient(0deg,#75d9f00b 0 1px,#0000 1px 34px),repeating-linear-gradient(90deg,#f58ac20a 0 1px,#0000 1px 34px);border-radius:28px;width:100%;height:100%;min-height:320px;box-shadow:inset 0 0 0 2px #ffffffeb,inset 0 -10px #4b536309,0 10px 26px #4b536314}.drawing-canvas{cursor:crosshair}.drawing-canvas[data-tool=eraser]{cursor:cell}.coloring-board{aspect-ratio:1;touch-action:none;cursor:crosshair;background:radial-gradient(circle at 20% 18%,#ffffffeb 0 16%,#0000 17%),linear-gradient(145deg,#fffffff0,#fff8ebc7);border-radius:30px;place-self:center;width:min(100%,820px,100dvh - 238px);min-width:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 3px #ffffffeb,inset 0 -12px #4b53630a,0 16px 36px #4b536324}.coloring-board[data-tool=eraser]{cursor:cell}.coloring-paper-base,.coloring-line-layer,.coloring-paint-layer{width:100%;height:100%;position:absolute;inset:0}.coloring-paper-base,.coloring-line-layer{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.coloring-paper-base{z-index:1;opacity:.94}.coloring-paint-layer{pointer-events:none;touch-action:none}.coloring-paint-layer[data-paint-layer="0"]{z-index:2}.coloring-paint-layer[data-paint-layer="1"]{z-index:3;mix-blend-mode:multiply}.coloring-paint-layer[data-paint-layer="2"]{z-index:4;mix-blend-mode:screen}.coloring-paint-layer.is-active{filter:drop-shadow(0 0 8px #75d9f029)}.coloring-line-layer{z-index:8;filter:drop-shadow(0 2px #ffffffc2)drop-shadow(0 9px 14px #4b53631a)}.coloring-dock{gap:10px}.layer-tabs{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;display:flex}.layer-tab{color:#3f4758;cursor:pointer;white-space:nowrap;background:#ffffffe0;border:0;border-radius:18px;min-height:46px;padding:0 15px;box-shadow:inset 0 -4px #4b536314,inset 0 0 0 2px #75d9f02e,0 10px 20px #574c421f}.layer-tab.is-active{background:radial-gradient(circle at 24% 22%,#ffffffeb 0 14%,#0000 15%),linear-gradient(135deg,#e9fff3,#fff4bd 52%,#ffb8da);transform:translateY(-1px);box-shadow:inset 0 -4px #4b536314,inset 0 0 0 2px #ffffffe6,0 12px 22px #f58ac22e}@keyframes confettiFall{0%{opacity:0;transform:translateY(-20px)rotate(0)}12%{opacity:1}to{opacity:0;transform:translate3d(-30px, 105vh, 0) rotate(var(--rot))}}@keyframes modalIn{0%{opacity:0;transform:translateY(16px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=920px){.topbar{align-items:flex-start;height:auto;min-height:78px}.brand-block small{white-space:normal}.topbar-actions{flex-wrap:wrap;justify-content:flex-end}.menu-panel{grid-template-rows:auto 1fr;align-content:start;padding-top:112px;overflow-y:auto}.game-cards{grid-template-columns:1fr}.game-card{min-height:220px}.hero-copy{padding:22px}.game-hud{right:max(24px, env(safe-area-inset-right));width:auto}.creative-stage{left:18px;right:18px;top:max(18px, env(safe-area-inset-top));width:auto;min-width:0;padding:24px;bottom:18px}.creative-mode-hud{display:none}}@media (width<=820px) and (orientation:portrait){.rotate-device-notice{display:grid}}@media (width<=560px){.topbar{border-radius:24px;padding:12px;top:12px;left:12px;right:12px}.brand-block strong{font-size:15px}.brand-logo{border-radius:19px;width:48px;height:48px;font-size:25px}.brand-block small{font-size:11px}.language-switch,.soft-button.compact{display:none}.game-hud{bottom:12px;left:12px;right:12px}.instruction-card{border-radius:26px;padding:18px}.modal-actions{grid-template-columns:1fr}.game-picker{padding:26px 18px 28px}.game-card-art{width:92px;height:92px}.creative-stage{top:max(10px, env(safe-area-inset-top));gap:10px;padding:14px;bottom:12px;left:12px;right:12px}.drawing-studio-bar{border-radius:22px;grid-template-columns:48px minmax(120px,1fr) 70px;gap:6px;min-height:58px;padding:6px}.drawing-nav-button{border-radius:17px;width:46px;height:46px;font-size:24px}.drawing-studio-logo{height:50px}.drawing-astrax-button{width:66px;height:42px}.astrax-return{width:136px;height:52px}.creative-tools{padding-bottom:max(3px, env(safe-area-inset-bottom));flex-direction:column;align-items:flex-start;gap:9px}.paint-swatches,.tool-pills,.layer-tabs{scrollbar-width:none;flex-wrap:nowrap;width:100%;overflow:visible}.paint-swatches::-webkit-scrollbar{display:none}.tool-pills::-webkit-scrollbar{display:none}.layer-tabs::-webkit-scrollbar{display:none}.paint-swatch{border-radius:16px;flex:36px;width:36px;min-width:32px;max-width:40px;height:36px}.tool-pill{border-radius:16px;flex:none;min-height:42px;padding:0 15px;font-size:15px}.icon-tool{width:46px;min-width:46px;padding:0}.icon-tool img{width:30px;height:30px}.brush-slider{width:100%;min-height:44px;padding:8px 14px}.coloring-board{border-radius:24px;width:min(100%,100dvh - 252px)}.coloring-dock{gap:7px}.layer-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.layer-tab{border-radius:15px;min-height:40px;padding:0 6px;font-size:12px}.drawing-stage{grid-template-rows:auto minmax(0,1fr) auto}.drawing-dock{gap:8px;padding:9px}.drawing-canvas,.coloring-canvas{border-radius:26px;min-height:0}.classic-drawer{width:min(300px,100vw - 24px);bottom:12px;right:12px}.classic-drawer-toggle{border-radius:20px;min-height:56px;font-size:14px}.classic-drawer-toggle img{width:52px;height:32px}.road-forge-top{grid-template-columns:52px 1fr;gap:8px}.road-logo-plate{width:min(250px,58vw);height:92px}.road-icon-btn{border-radius:18px;width:52px;height:52px;font-size:25px}.road-level-chip{grid-column:1/-1;justify-self:center;min-height:40px;padding:0 12px;font-size:12px}.road-status{min-height:40px;padding:8px 12px;font-size:12px;top:142px}.road-tutorial{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:min(356px,100vw - 24px);top:198px;left:50%;transform:translate(-50%)}.road-tutorial span{text-align:center;border-radius:15px;justify-content:center;min-height:52px;padding:6px 7px;font-size:9.5px}.road-controls{width:calc(100vw - 18px);bottom:max(8px, env(safe-area-inset-bottom));border-radius:24px;justify-content:center;gap:5px;padding:6px;overflow:visible}.road-tool,.road-launch{border-radius:17px;flex:1 1 0;gap:4px;min-width:0;min-height:48px;padding:0 6px;font-size:11px}.road-tool span,.road-launch span{display:none}.road-tool img,.road-launch img{width:27px;height:27px}.road-launch{min-width:0}.road-ink{left:50%;bottom:max(78px, calc(env(safe-area-inset-bottom) + 78px));width:min(230px,64vw);transform:translate(-50%)}}

/* road-forge-ipad-20260617 */
.road-level-chip{text-align:center;line-height:1.12;overflow-wrap:anywhere}
.road-status{line-height:1.18}
@media (min-width:1181px){
  .road-status{top:max(150px,calc(env(safe-area-inset-top) + 138px))}
  .road-tutorial{top:max(146px,calc(env(safe-area-inset-top) + 132px))}
}
@media (min-width:561px) and (max-width:1180px) and (orientation:landscape){
  .road-forge-top{top:max(10px,env(safe-area-inset-top));grid-template-columns:56px minmax(220px,1fr) minmax(128px,230px);gap:10px;padding:0 12px}
  .road-logo-plate{width:min(318px,38vw);height:94px}
  .road-icon-btn{width:56px;height:56px;border-radius:18px;font-size:26px}
  .road-level-chip{min-height:46px;padding:0 12px;font-size:12px;line-height:1.1;white-space:normal}
  .road-status{top:max(112px,calc(env(safe-area-inset-top) + 106px));max-width:min(420px,42vw);min-height:40px;padding:7px 14px;border-radius:18px;font-size:13px}
  .road-tutorial{left:12px;top:max(126px,calc(env(safe-area-inset-top) + 120px));width:min(278px,28vw);gap:6px}
  .road-tutorial span{min-height:34px;padding:7px 10px;border-radius:14px;font-size:11px}
  .road-controls{bottom:max(10px,env(safe-area-inset-bottom));width:min(650px,calc(100vw - 250px));max-width:650px;gap:7px;padding:8px;border-radius:24px}
  .road-tool,.road-launch{min-height:52px;padding:0 10px;border-radius:18px;font-size:12px;gap:4px}
  .road-tool img,.road-launch img{width:30px;height:30px}
  .road-ink{left:14px;bottom:max(84px,calc(env(safe-area-inset-bottom) + 82px));width:min(204px,26vw);height:52px;padding:6px 10px}
}
@media (min-width:561px) and (max-width:900px) and (orientation:landscape){
  .road-status{left:auto;right:12px;top:max(70px,calc(env(safe-area-inset-top) + 64px));max-width:min(310px,34vw);transform:none}
  .road-controls{width:min(560px,calc(100vw - 220px))}
  .road-tool span,.road-launch span{font-size:11px}
}

/* threejs-hub-20260617 */
.hub-access-layer .classic-drawer{display:none!important}