:root{
  --ink:#24194f;--muted:#6e648f;--purple:#6337d7;--purple-dark:#35179b;--pink:#f34fa8;
  --orange:#ff963d;--yellow:#ffd83e;--cyan:#24bce9;--mint:#57ddc4;--white:#fff;
  --panel:rgba(255,255,255,.89);--line:#30265f;--shadow:0 20px 60px rgba(55,27,125,.18);
  font-family:Inter,ui-rounded,"Nunito",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--ink)}
body{min-height:100dvh;background:linear-gradient(145deg,#fff2ad 0%,#fbd7f1 43%,#c7f2ff 100%);overflow-x:hidden}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:4px solid rgba(36,188,233,.38);outline-offset:2px}
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.blob{position:absolute;border-radius:50%;opacity:.4;filter:blur(7px);animation:float 8s ease-in-out infinite}.blob-a{width:280px;height:280px;left:-110px;top:7%;background:#ffe35b}.blob-b{width:360px;height:360px;right:-150px;top:24%;background:#f399d3;animation-delay:-3s}.blob-c{width:300px;height:300px;left:34%;bottom:-170px;background:#6fdcf8;animation-delay:-5s}.spark{position:absolute;color:#fff;font-size:30px;text-shadow:0 0 16px #fff;animation:twinkle 2.7s ease-in-out infinite}.spark-a{left:12%;top:18%}.spark-b{right:12%;top:13%;animation-delay:-1s}.spark-c{left:7%;bottom:11%;animation-delay:-2s}
.app{width:min(1320px,100%);margin:auto;padding:14px clamp(10px,2.5vw,28px) 30px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}.brand{width:clamp(155px,21vw,245px);height:67px;object-fit:contain;object-position:left center}.top-actions{display:flex;gap:9px}.icon-btn{width:52px;height:52px;border:2px solid rgba(255,255,255,.95);border-radius:17px;background:rgba(255,255,255,.78);color:var(--ink);font-size:23px;font-weight:900;box-shadow:0 8px 22px rgba(47,24,110,.12);backdrop-filter:blur(9px);transition:.18s}.icon-btn:hover{transform:translateY(-2px);background:#fff}
.status-row{display:grid;grid-template-columns:150px 1fr 160px;gap:10px;margin-bottom:10px}.status-card{min-height:70px;padding:11px 16px;border:2px solid rgba(255,255,255,.95);border-radius:21px;background:var(--panel);box-shadow:0 10px 26px rgba(49,23,111,.1);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center}.status-card>span,.status-label span{font-size:11px;font-weight:1000;letter-spacing:.1em;color:#756c95}.status-card>strong{font-size:24px}.status-card.grow{gap:7px}.status-label{display:flex;justify-content:space-between;align-items:center}.status-label strong{font-size:15px;color:var(--purple-dark)}.progress-track{height:12px;border-radius:999px;background:#ece6fb;overflow:hidden}.progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink),var(--orange));transition:width .35s ease}.color-status{align-items:center}.color-status i{display:block;width:32px;height:32px;margin-top:4px;border-radius:50%;background:#23b9ed;border:4px solid #fff;box-shadow:0 0 0 2px #ddd4f7,0 6px 12px rgba(42,21,99,.18)}
.game-shell{position:relative;padding:clamp(13px,2vw,22px);border:3px solid rgba(255,255,255,.96);border-radius:30px;background:rgba(255,255,255,.68);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}.eyebrow{margin:0;color:var(--pink);font-size:11px;font-weight:1000;letter-spacing:.16em}.game-heading h1{margin:2px 0 2px;font-size:clamp(23px,3vw,36px);line-height:1.05}.game-heading p:last-child{margin:0;color:var(--muted);font-size:14px}.scene-nav{display:flex;align-items:center;gap:8px}.scene-nav>button{width:47px;height:47px;border:0;border-radius:15px;background:linear-gradient(145deg,var(--purple),var(--purple-dark));color:#fff;font-size:35px;line-height:1;box-shadow:0 9px 18px rgba(74,37,174,.24)}.scene-nav>button:disabled{opacity:.38;cursor:not-allowed}.scene-dots{display:flex;gap:5px}.scene-dots button{width:12px;height:12px;padding:0;border:0;border-radius:50%;background:#d9cff4}.scene-dots button.selected{width:27px;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--pink))}.mobile-instruction{display:none}
.game-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:15px;align-items:stretch}.tool-panel{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:23px;background:rgba(255,255,255,.78);border:2px solid #fff;box-shadow:0 13px 30px rgba(45,20,107,.1)}.palette-section,.tool-section{padding:13px;border-radius:18px;background:#f8f5ff}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.panel-title span{font-weight:1000}.panel-title small{font-weight:850;color:var(--purple);text-align:right}.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.color-btn{position:relative;aspect-ratio:1;border:4px solid #fff;border-radius:50%;background:var(--color);box-shadow:0 0 0 2px #ddd5ef,0 5px 9px rgba(51,28,107,.16);transition:.16s transform,.16s box-shadow}.color-btn:hover{transform:scale(1.08)}.color-btn.selected{transform:scale(1.11);box-shadow:0 0 0 4px var(--ink),0 7px 15px rgba(54,27,117,.25)}.color-btn.selected:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--check,#fff);font-weight:1000;text-shadow:0 1px 3px rgba(0,0,0,.4)}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool-btn{min-height:54px;padding:6px;border:2px solid #e5def6;border-radius:14px;background:#fff;color:var(--ink);font-weight:900;display:flex;align-items:center;justify-content:center;gap:7px;transition:.16s}.tool-btn span{font-size:23px}.tool-btn:hover{transform:translateY(-2px);border-color:#cbbcf3}.tool-btn:disabled{opacity:.38;cursor:not-allowed;transform:none}.tool-btn.active{color:#fff;background:linear-gradient(135deg,#6f48dd,#f14ba4);border-color:transparent}.tool-btn.magic{background:linear-gradient(135deg,#fff7b7,#ffd752);border-color:#ffe171}.tool-btn.save{background:linear-gradient(135deg,#dffaff,#86e9f6);border-color:#9ee8f3}.lumi-tip{margin-top:auto;display:grid;grid-template-columns:70px 1fr;align-items:center;gap:5px;padding:7px 10px;border-radius:17px;background:linear-gradient(135deg,#fff8c5,#ffe0f3)}.lumi-tip img{width:70px;height:76px;object-fit:contain}.lumi-tip p{margin:0;font-size:12px;line-height:1.35;color:#5f557f}
.canvas-card{position:relative;min-height:620px;display:grid;place-items:center;overflow:hidden;border-radius:24px;background:#fff;border:3px solid #fff;box-shadow:inset 0 0 0 2px #e7e1f5,0 15px 35px rgba(40,19,95,.12)}.paper-pattern{position:absolute;inset:0;opacity:.24;background-image:radial-gradient(#cabdfa 1.2px,transparent 1.2px);background-size:23px 23px}.svg-stage{position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center;padding:8px}.coloring-svg{display:block;width:100%;height:100%;max-height:690px;touch-action:manipulation;filter:drop-shadow(0 13px 10px rgba(51,25,107,.1))}.paint-region{cursor:pointer;transition:fill .18s ease,stroke .18s ease,filter .15s ease,transform .15s ease;transform-box:fill-box;transform-origin:center}.paint-region:hover{filter:brightness(1.06) drop-shadow(0 0 4px rgba(99,55,215,.45))}.paint-region:active{transform:scale(.97)}.paint-region.paint-pop{animation:paintPop .36s ease}.line-art{fill:none;stroke:var(--line);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.fine-line{fill:none;stroke:var(--line);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.fixed-fill{pointer-events:none}.paint-burst{position:absolute;z-index:5;width:22px;height:22px;border-radius:50%;pointer-events:none;opacity:0;background:var(--burst,#ff4fa8);box-shadow:0 0 0 7px color-mix(in srgb,var(--burst) 45%,transparent),0 0 0 15px color-mix(in srgb,var(--burst) 20%,transparent)}.paint-burst.show{animation:burst .5s ease}.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));z-index:80;max-width:calc(100% - 28px);padding:12px 19px;border-radius:999px;background:#fff;color:var(--purple-dark);font-weight:950;text-align:center;box-shadow:0 14px 38px rgba(30,10,83,.26);opacity:0;transform:translate(-50%,20px) scale(.94);pointer-events:none}.toast.show{animation:toast 1.8s ease}
.overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));background:rgba(26,13,72,.62);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:.22s}.overlay.open{opacity:1;visibility:visible}.modal-card{position:relative;width:min(590px,100%);max-height:calc(100dvh - 24px);overflow:auto;padding:clamp(24px,5vw,40px);border:3px solid #fff;border-radius:30px;background:linear-gradient(155deg,#fff,#fff9fd);box-shadow:0 26px 80px rgba(20,8,72,.34);text-align:center}.close-btn{position:absolute;right:13px;top:13px;width:42px;height:42px;border:0;border-radius:50%;background:#eee8ff;color:var(--purple-dark);font-size:28px}.modal-mascot{width:150px;height:150px;object-fit:contain}.result-kicker{margin:0;color:var(--pink);font-weight:1000;letter-spacing:.16em;font-size:11px}.modal-card h2{margin:3px 0 10px;font-size:clamp(30px,5vw,43px);line-height:1}.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}.how-grid>div{display:grid;grid-template-columns:44px 1fr;align-items:center;text-align:left;padding:11px;border-radius:16px;background:#f5f0ff}.how-grid span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-weight:1000}.how-grid p{margin:0;font-size:13px;color:#625980}.primary-btn,.secondary-btn{width:100%;min-height:52px;border:0;border-radius:16px;font-weight:1000;transition:.18s}.primary-btn{background:linear-gradient(135deg,var(--purple),var(--pink) 62%,var(--orange));color:#fff;box-shadow:0 12px 26px rgba(90,50,205,.28)}.secondary-btn{margin-top:9px;background:#eee8ff;color:var(--purple-dark)}.primary-btn:hover,.secondary-btn:hover{transform:translateY(-2px);filter:brightness(1.03)}.celebration-stars{font-size:30px;letter-spacing:7px;animation:pulse 1.3s ease-in-out infinite}.celebration>p:not(.result-kicker){color:#665d84}.confetti{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-25px;width:10px;height:17px;border-radius:3px;animation:confettiFall var(--duration) linear forwards}
@keyframes float{50%{transform:translateY(-24px) scale(1.04)}}@keyframes twinkle{50%{opacity:.25;transform:scale(.65) rotate(45deg)}}@keyframes paintPop{45%{transform:scale(1.06);filter:brightness(1.08) drop-shadow(0 0 8px rgba(99,55,215,.5))}}@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}35%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}@keyframes toast{0%,100%{opacity:0;transform:translate(-50%,20px) scale(.94)}12%,82%{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes pulse{50%{transform:scale(1.08)}}@keyframes confettiFall{to{transform:translate(var(--drift),110dvh) rotate(760deg)}}
@media(max-width:850px){
  .app{padding:8px 8px 18px}.topbar{margin-bottom:6px}.brand{width:150px;height:52px}.top-actions{gap:5px}.icon-btn{width:43px;height:43px;border-radius:14px;font-size:19px}.status-row{grid-template-columns:88px 1fr 80px;gap:6px;margin-bottom:7px}.status-card{min-height:54px;padding:7px 8px;border-radius:15px}.status-card>span,.status-label span{font-size:8px;letter-spacing:.06em}.status-card>strong{font-size:19px}.status-label strong{font-size:11px}.progress-track{height:8px}.color-status i{width:26px;height:26px;border-width:3px}.game-shell{padding:9px 8px 10px;border-radius:22px}.game-heading{margin-bottom:6px}.eyebrow{font-size:8px}.game-heading h1{font-size:20px}.game-heading p:last-child{display:none}.scene-nav{gap:5px}.scene-nav>button{width:39px;height:39px;border-radius:12px;font-size:28px}.scene-dots{display:none}.mobile-instruction{display:block;margin-bottom:7px;padding:7px 9px;border-radius:12px;background:#fff7c9;color:#554876;font-size:12px;font-weight:850}.game-layout{display:flex;flex-direction:column;gap:8px}.tool-panel{order:0;padding:7px;border-radius:17px;gap:6px}.palette-section,.tool-section{padding:7px;border-radius:13px}.panel-title{margin-bottom:6px}.panel-title span{font-size:12px}.panel-title small{font-size:10px}.palette{display:flex;gap:7px;overflow-x:auto;padding:3px 4px 6px;scrollbar-width:none}.palette::-webkit-scrollbar{display:none}.color-btn{flex:0 0 39px;width:39px;height:39px;border-width:3px}.tool-section{padding-bottom:6px}.tool-grid{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:1px 1px 3px}.tool-grid::-webkit-scrollbar{display:none}.tool-btn{flex:0 0 auto;min-width:75px;min-height:43px;padding:4px 8px;border-radius:11px;font-size:10px;gap:4px;flex-direction:column}.tool-btn span{font-size:18px;line-height:1}.lumi-tip{display:none}.canvas-card{order:1;min-height:0;height:calc(100dvh - 330px);height:calc(100svh - 330px);max-height:660px;min-height:390px;border-radius:18px}.svg-stage{padding:2px}.coloring-svg{max-height:100%}.modal-card{padding:24px 15px 20px;border-radius:24px}.modal-mascot{width:125px;height:125px}.how-grid{grid-template-columns:1fr;gap:6px}.how-grid>div{padding:8px}.toast{font-size:13px}
}
@media(max-width:430px){.canvas-card{height:calc(100svh - 320px);min-height:360px}.status-row{grid-template-columns:78px 1fr 70px}.status-card{padding-left:6px;padding-right:6px}.mobile-instruction{font-size:11px}.game-heading h1{font-size:18px}.palette{gap:6px}.color-btn{flex-basis:36px;width:36px;height:36px}.tool-btn{min-width:68px}}
@media(max-height:700px) and (max-width:850px){.brand{height:42px}.icon-btn{width:38px;height:38px}.status-card{min-height:47px}.game-heading h1{font-size:17px}.mobile-instruction{padding:5px 8px}.palette-section,.tool-section{padding:5px}.color-btn{flex-basis:33px;width:33px;height:33px}.tool-btn{min-height:38px}.canvas-card{height:calc(100svh - 285px);min-height:315px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}