:root{--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='72' height='72' filter='url(%23n)'/%3E%3C/svg%3E");--bg: #f3eefc;--surface: #f3eefc;--shadow-dark: rgba(163, 143, 201, .45);--shadow-light: rgba(255, 255, 255, .95);--ink: #5b4a7a;--ink-soft: #9a8bb8;--accent: #ff8fb1;--accent-2: #8fd3ff;--accent-3: #ffd98f;--accent-4: #b7f0c0;--radius: 26px;--ease-bounce: cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--ink);font-family:ui-rounded,SF Pro Rounded,Hiragino Maru Gothic ProN,Comic Sans MS,Quicksand,system-ui,sans-serif;overflow:hidden}#root{height:100dvh;display:flex;flex-direction:column;align-items:center;padding:clamp(8px,2vh,20px) clamp(12px,3vw,28px);overflow:hidden}h1,h2,h3{margin:0;letter-spacing:.5px}.page{width:100%;max-width:540px;flex:1;min-height:0;display:flex;flex-direction:column;animation:page-in .45s var(--ease-bounce)}@keyframes page-in{0%{opacity:0;transform:translateY(18px) scale(.98)}}.loading-note{text-align:center;font-weight:800;color:var(--ink-soft);grid-column:1 / -1;animation:pulse-soft 1.2s ease-in-out infinite}@keyframes pulse-soft{0%,to{opacity:.5}50%{opacity:1}}.bg-pattern{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-3;pointer-events:none}.blob{position:fixed;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;z-index:-1;animation:blob-drift 16s ease-in-out infinite alternate}@keyframes blob-drift{0%{transform:translate(0) scale(1)}to{transform:translate(6vw,-8vh) scale(1.15)}}.neu{background:var(--surface);border-radius:var(--radius);box-shadow:8px 8px 20px var(--shadow-dark),-8px -8px 20px var(--shadow-light)}.neu-inset{background:var(--surface);border-radius:var(--radius);box-shadow:inset 6px 6px 14px var(--shadow-dark),inset -6px -6px 14px var(--shadow-light)}button{font-family:inherit;color:var(--ink);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}.btn{background:var(--surface);border-radius:22px;box-shadow:6px 6px 14px var(--shadow-dark),-6px -6px 14px var(--shadow-light);padding:clamp(12px,2vh,18px) clamp(20px,4vw,32px);font-size:clamp(1.05rem,2.4vh,1.3rem);font-weight:800;transition:transform .12s var(--ease-bounce),box-shadow .12s ease}.btn:hover{transform:translateY(-2px)}.btn:active{box-shadow:inset 5px 5px 12px var(--shadow-dark),inset -5px -5px 12px var(--shadow-light);transform:scale(.96)}.btn-big{font-size:clamp(1.2rem,3vh,1.7rem);padding:clamp(14px,2.6vh,24px) clamp(32px,8vw,52px);border-radius:30px}.btn-accent{color:#fff;background:linear-gradient(145deg,#ff9fbe,#ff7aa2);box-shadow:8px 8px 18px #ff7aa273,-6px -6px 14px var(--shadow-light)}.btn-accent:active{box-shadow:inset 5px 5px 12px #c8507880}.landing{text-align:center;align-items:center;justify-content:space-evenly;gap:clamp(6px,1.5vh,18px)}.landing-title{font-size:clamp(1.7rem,6vh,4.2rem);font-weight:900;background:linear-gradient(90deg,#ff7aa2,#ffb347,#6fd08c,#5ab8ff,#b28dff,#ff7aa2);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbow-slide 6s linear infinite}@keyframes rainbow-slide{to{background-position:200% 0}}.landing-sub{font-size:clamp(.9rem,2vh,1.2rem);color:var(--ink-soft);font-weight:700;max-width:380px;line-height:1.4;margin:0}.hero-card{padding:clamp(12px,2.4vh,26px);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,18px);min-height:0}.hero-pixels{display:grid;gap:clamp(2px,.5vh,4px);padding:clamp(8px,1.6vh,18px)}.hero-pixels span{width:clamp(6px,2.2vh,24px);height:clamp(6px,2.2vh,24px);border-radius:5px;animation:bob 2.4s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.06)}}.confetti-dot{position:fixed;width:12px;height:12px;border-radius:4px;pointer-events:none;z-index:50;animation:fall 1.2s ease-in forwards}@keyframes fall{to{transform:translateY(80vh) rotate(540deg);opacity:0}}.feature-row{display:flex;gap:clamp(8px,2vw,14px);width:100%}.feature{flex:1;padding:clamp(8px,1.6vh,16px) 8px;font-weight:800;font-size:clamp(.72rem,1.6vh,.95rem);color:var(--ink-soft);border-radius:20px;transition:transform .15s var(--ease-bounce);animation:card-in .5s var(--ease-bounce) backwards}.feature:nth-child(1){animation-delay:.15s}.feature:nth-child(2){animation-delay:.25s}.feature:nth-child(3){animation-delay:.35s}.feature:hover{transform:translateY(-4px) rotate(-1deg)}.feature .emoji{font-size:clamp(1.2rem,3vh,2rem);display:block;margin-bottom:4px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(8px,1.6vh,18px);flex-shrink:0}.topbar h1{font-size:clamp(1.15rem,3vh,1.7rem);font-weight:900}.title-block{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.hearts{display:flex;gap:4px;line-height:1;flex-shrink:0}.hearts .heart{font-size:clamp(.85rem,2.2vh,1.15rem);animation:heart-in .3s var(--ease-bounce)}.hearts .heart.empty{opacity:.6}.timer{font-size:clamp(.7rem,1.7vh,.85rem);font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums}.swatch.tool{background:var(--surface);font-size:clamp(1.3rem,3.4vh,1.8rem);display:grid;place-items:center}.hint-tool{margin-left:auto}@keyframes heart-in{0%{transform:scale(.4)}}.lockout-note{margin:0;font-weight:700;color:var(--ink-soft);line-height:1.5}.topbar-side{display:flex;gap:10px}.icon-btn{width:clamp(44px,7vh,58px);height:clamp(44px,7vh,58px);border-radius:18px;font-size:clamp(1.1rem,2.6vh,1.4rem);display:grid;place-items:center;flex-shrink:0;transition:transform .15s var(--ease-bounce)}.icon-btn:hover{transform:scale(1.08) rotate(-4deg)}.icon-btn:active{transform:scale(.9)}.tag-row{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:none;flex-shrink:0}.tag-row::-webkit-scrollbar{display:none}.tag-chip{flex-shrink:0;padding:clamp(9px,1.6vh,13px) clamp(14px,3vw,22px);border-radius:18px;font-weight:800;font-size:clamp(.85rem,2vh,1rem);color:var(--ink-soft);background:var(--surface);box-shadow:5px 5px 12px var(--shadow-dark),-5px -5px 12px var(--shadow-light);transition:all .18s var(--ease-bounce)}.tag-chip:hover{transform:translateY(-2px)}.tag-chip.active{color:#fff;background:linear-gradient(145deg,#a4c8ff,#7aaefc);box-shadow:inset 4px 4px 10px #5a82c866;transform:scale(1.05)}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:clamp(12px,2.5vw,20px);overflow-y:auto;flex:1;min-height:0;padding:6px 8px 20px;scrollbar-width:none;align-content:start}.gallery::-webkit-scrollbar{display:none}.card{position:relative;padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .18s var(--ease-bounce),box-shadow .18s ease;animation:card-in .5s var(--ease-bounce) backwards}@keyframes card-in{0%{opacity:0;transform:translateY(24px) scale(.9)}}.card:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:12px 14px 28px var(--shadow-dark),-8px -8px 20px var(--shadow-light)}.card:active{transform:scale(.95)}.card canvas{width:100%;image-rendering:pixelated;border-radius:14px;transition:transform .2s var(--ease-bounce)}.card:hover canvas{transform:scale(1.05)}.card .card-name{font-weight:900;font-size:1rem}.card .card-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.mini-tag{font-size:.68rem;font-weight:800;padding:4px 10px;border-radius:10px;color:var(--ink-soft);box-shadow:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light)}.level-badge{position:absolute;top:10px;left:10px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;display:grid;place-items:center;font-size:.75rem;font-weight:900;color:var(--ink-soft);box-shadow:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light)}.card.locked{opacity:.55}.card.locked canvas{filter:grayscale(1) opacity(.45)}.card.locked:hover{transform:none}.card.locked .card-name{color:var(--ink-soft)}.corner-lock{position:absolute;top:10px;right:10px;font-size:1rem}.card.shake{animation:locked-shake .4s ease}@keyframes locked-shake{20%{transform:translate(-6px) rotate(-2deg)}40%{transform:translate(6px) rotate(2deg)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.done-badge{position:absolute;top:10px;right:10px;font-size:1.3rem;animation:star-spin .6s var(--ease-bounce)}@keyframes star-spin{0%{transform:scale(0) rotate(-180deg)}}.editor{display:flex;flex-direction:column;gap:clamp(8px,1.6vh,16px)}.progress-wrap{height:clamp(20px,3.4vh,28px);border-radius:16px;overflow:hidden;position:relative;flex-shrink:0}.progress-fill{height:100%;border-radius:16px;background:linear-gradient(90deg,#ff9fbe,#ffd98f,#b7f0c0,#8fd3ff);width:0%;transition:width .35s var(--ease-bounce);position:relative;overflow:hidden}.progress-fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);animation:shimmer 1.8s ease-in-out infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-label{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:.8rem;font-weight:900;color:var(--ink)}.board-wrap{flex:1;min-height:0;padding:clamp(8px,1.6vh,16px);border-radius:28px;display:flex;align-items:center;justify-content:center;container-type:size}.board{display:grid;gap:0;touch-action:none;border-radius:14px;width:min(96cqw,calc(96cqh * var(--ar, 1)));height:min(96cqh,calc(96cqw / var(--ar, 1)));transform-origin:center}.board-wrap{overflow:hidden;touch-action:none}.board{position:relative}.cell{position:relative;border-radius:22%;padding:5%;background-clip:content-box;transition:background-color .12s ease}.cell[data-x]{background-image:linear-gradient(145deg,#ffffff4d,#fff0 55%),var(--grain);background-blend-mode:soft-light,soft-light}.cell.filled{background-image:linear-gradient(145deg,#ffffff73,#fff0 50%),linear-gradient(325deg,#6b57942e,#6b579400 45%),var(--grain);background-blend-mode:soft-light,multiply,soft-light}.cell[data-x]{cursor:pointer}.cell[data-x]:hover{filter:brightness(1.06)}.zone-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:5}.zone-elevated-shadow{fill:#5b4a7a47;fill-rule:nonzero;stroke:none;filter:blur(1.5px)}.zone-border-shadow{fill:none;stroke:#7a5c1e8c;stroke-width:.1;stroke-linejoin:round;stroke-linecap:round}.zone-border{fill:none;stroke-width:.08;stroke-linejoin:round;stroke-linecap:round}.diamond-spark{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;animation:spark-twinkle 4.2s ease-in-out infinite;pointer-events:none}@keyframes spark-twinkle{0%,to{opacity:0;transform:scale(.25) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(180deg)}}.tron-glow,.tron-core{fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:tron-draw 1.6s ease-in-out forwards}.tron-glow{stroke-width:.34;opacity:.85;filter:blur(1.5px) brightness(1.3)}.tron-core{stroke:#fff;stroke-width:.11;filter:drop-shadow(0 0 2px #fff)}.tron-core.fail{stroke:#ffd7dd;filter:drop-shadow(0 0 2px #ff5d73);animation-duration:.85s}@keyframes tron-draw{to{stroke-dashoffset:0}}.cell.zone-done{cursor:default;overflow:hidden;filter:saturate(1.15) brightness(1.05)}.cell.zone-done:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.95) 50%,transparent 75%);transform:translate(-130%);animation:zone-shine 1.1s ease-out 1.4s forwards}@keyframes zone-shine{to{transform:translate(130%)}}.cell.zone-done:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.6),transparent 60%);opacity:0;animation:zone-glow 2.8s ease-in-out 2.4s 3}@keyframes zone-glow{0%,to{opacity:.1}50%{opacity:.55}}.cell.filled{animation:paint-pop .3s var(--ease-bounce)}@keyframes paint-pop{0%{transform:scale(.5);border-radius:50%}70%{transform:scale(1.12)}to{transform:scale(1)}}.cell.hintpulse{animation:hintpulse .7s ease 2}@keyframes hintpulse{50%{transform:scale(.75);border-radius:50%}}.palette{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:clamp(8px,1.6vh,14px);padding:clamp(10px,1.8vh,16px) 12px;border-radius:26px;flex-shrink:0}.swatch{width:clamp(44px,7.5vh,64px);height:clamp(44px,7.5vh,64px);border-radius:18px;box-shadow:6px 6px 12px var(--shadow-dark),-6px -6px 12px var(--shadow-light);border:4px solid transparent;transition:transform .15s var(--ease-bounce),box-shadow .15s ease;position:relative}.swatch:hover{transform:translateY(-3px)}.swatch:active{transform:scale(.9)}.swatch.selected{border-color:#fff;transform:scale(1.12);box-shadow:0 0 0 4px var(--shadow-dark),6px 6px 14px var(--shadow-dark);animation:swatch-bounce .3s var(--ease-bounce)}@keyframes swatch-bounce{50%{transform:scale(1.25) rotate(4deg)}}.swatch.eraser{background:var(--surface);font-size:clamp(1.3rem,3.4vh,1.8rem);display:grid;place-items:center}.palette{justify-content:flex-start}.palette .swatch:first-child{margin-left:auto}.swatch .count{position:absolute;bottom:-6px;right:-6px;background:var(--surface);color:var(--ink);font-size:.68rem;font-weight:900;min-width:21px;height:21px;border-radius:11px;display:grid;place-items:center;box-shadow:3px 3px 6px var(--shadow-dark),-2px -2px 5px var(--shadow-light)}.swatch.completedcolor:after{content:"✓";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:1.4rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);animation:star-spin .5s var(--ease-bounce)}.win-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#f3eefcd9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:40;animation:fadein .3s ease;overflow:hidden}@keyframes fadein{0%{opacity:0}}.win-card{padding:clamp(22px,4vh,36px) clamp(22px,5vw,34px);text-align:center;display:flex;flex-direction:column;gap:clamp(10px,2vh,18px);align-items:center;max-width:min(340px,88vw);max-height:92dvh;animation:popin .45s var(--ease-bounce)}@keyframes popin{0%{transform:scale(.5) rotate(-4deg);opacity:0}}.win-card .big-emoji{font-size:clamp(2.4rem,6vh,3.5rem);animation:bob 1.6s ease-in-out infinite}.win-card h2{font-size:clamp(1.4rem,3.6vh,1.8rem);font-weight:900}.win-card canvas{image-rendering:pixelated;width:clamp(110px,22vh,180px)}.win-confetti{position:absolute;width:12px;height:12px;top:-20px;border-radius:3px;pointer-events:none;animation:confetti-fall linear forwards}@keyframes confetti-fall{to{transform:translateY(110vh) rotate(720deg)}}@media(min-width:720px){.page{max-width:700px}}@media(min-width:960px){.page{max-width:1100px}.editor{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"top top" "progress progress" "board palette";align-items:stretch}.editor .topbar{grid-area:top}.editor .progress-wrap{grid-area:progress}.editor .board-wrap{grid-area:board;min-height:0}.editor .palette{grid-area:palette;align-self:center}.landing{max-width:760px;margin:0 auto}}@media(max-height:540px){.feature-row,.landing-sub{display:none}.landing{justify-content:center;gap:clamp(8px,2vh,16px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}