*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#f5f2ff;color:#2f2a47;font-family:Arial,Helvetica,sans-serif}
body{display:flex;justify-content:center}
button,input{font:inherit}
button{cursor:pointer}
.wrap{width:min(1180px,100%);padding:10px}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.brand{font-size:1.55rem;font-weight:1000;color:#9b42cb;text-shadow:0 0 18px rgba(190,88,225,.15)}
.sub{color:#837898;font-size:.82rem}
.stats{display:flex;gap:7px}.stats div{min-width:92px;background:#fff;border:1px solid #e8def2;border-radius:13px;padding:7px 10px;text-align:center;box-shadow:0 5px 18px rgba(87,58,120,.06)}.stats span{display:block;color:#9a8aa9;font-size:.57rem;text-transform:uppercase}.stats b{font-size:1rem}
.toolbar-top{display:flex;gap:7px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid #e8def2;border-radius:15px;padding:8px;margin-bottom:9px;box-shadow:0 5px 18px rgba(87,58,120,.05)}
.toolbar-top button,.art-head button,.bottom-actions button{border:0;border-radius:10px;background:#f1eaf8;color:#554666;padding:9px 11px;font-weight:900}.toolbar-top button.active{background:linear-gradient(135deg,#a94ed5,#ff69ad);color:#fff}.toolbar-top #saveBtn{margin-left:auto;background:linear-gradient(135deg,#4ecb93,#75db72);color:#153d28}.toolbar-top #zoomLabel{font-weight:900;color:#7a6789;min-width:48px;text-align:center}
.game{display:grid;grid-template-columns:220px 1fr;gap:10px}
.palette-panel,.art-panel{background:#fff;border:1px solid #e8def2;border-radius:20px;box-shadow:0 10px 32px rgba(87,58,120,.07)}
.palette-panel{padding:14px}.palette-panel h3{margin:0 0 8px}.palette-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}.palette-tabs button{border:0;border-radius:999px;background:#f1ebf7;color:#685476;padding:6px 8px;font-weight:900;font-size:.72rem}.palette-tabs button.active{background:#9350c1;color:#fff}
.colors{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.color{aspect-ratio:1;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #d8cde0;position:relative}.color.active:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:1000;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.brush-size{margin-top:16px}.brush-size label{display:block;font-size:.75rem;font-weight:900;color:#7b6b87;margin-bottom:5px}.brush-size input{width:100%}
.tip{margin-top:14px;background:#f7f0fc;border-radius:12px;padding:10px;color:#806e8c;font-size:.75rem;line-height:1.4}
.art-panel{padding:12px;min-width:0}.art-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.kicker,.gallery-kicker{color:#a854c9;font-size:.65rem;font-weight:1000;letter-spacing:.11em}.art-head h2{margin:2px 0}
.canvas-window{height:650px;overflow:auto;background:repeating-conic-gradient(#f8f6fb 0 25%,#eee9f3 0 50%) 50%/24px 24px;border-radius:16px;border:1px solid #e6ddec;display:grid;place-items:center;padding:22px}
.canvas-stage{position:relative;width:800px;height:600px;transform-origin:center center;transition:transform .12s}.canvas-stage svg,.canvas-stage canvas{position:absolute;inset:0;width:800px;height:600px}.canvas-stage svg{background:#fff;filter:drop-shadow(0 10px 18px rgba(61,42,74,.12));touch-action:none}.canvas-stage canvas{pointer-events:none;touch-action:none}
.area{fill:#fff;stroke:#393243;stroke-width:5;stroke-linejoin:round;cursor:pointer;transition:fill .08s}.thin{stroke-width:3}.outline-soft .area{stroke:#766b82}.outline-hidden .area{stroke:transparent}.decor{pointer-events:none}
.bottom-actions{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-top:9px}.bottom-actions #completeMessage{text-align:center;color:#786b87;font-size:.78rem;font-weight:800}
.gallery-overlay,.celebrate{position:fixed;inset:0;background:rgba(47,36,61,.58);display:flex;align-items:center;justify-content:center;padding:15px;z-index:50}.gallery-card{width:min(1050px,96%);max-height:92vh;overflow:auto;background:#fff;border-radius:24px;padding:18px;box-shadow:0 28px 80px rgba(40,24,55,.32)}.gallery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.gallery-head h1{margin:3px 0}.gallery-head p{margin:0;color:#85768f}.gallery-head button{border:0;background:#f1e9f7;border-radius:11px;width:42px;height:42px;font-size:1.2rem}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:15px}.gallery-item{border:1px solid #e5daed;background:#faf7fc;border-radius:17px;padding:9px;text-align:left}.gallery-item:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(76,50,92,.11)}.gallery-thumb{height:145px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:5rem;overflow:hidden}.gallery-item strong{display:block;margin-top:7px}.gallery-item small{color:#8a7c94}
.celebrate.hidden{display:none}.celebrate-card{width:min(420px,92%);background:#fff;border-radius:22px;padding:24px;text-align:center}.celebrate-icon{font-size:4rem}.celebrate-card h2{margin:7px}.celebrate-card p{color:#7b6f85}.celebrate-card button{border:0;border-radius:13px;background:linear-gradient(135deg,#9c4ecd,#ff69a9);color:#fff;font-weight:1000;padding:12px 17px}
@media(max-width:850px){.game{grid-template-columns:1fr}.palette-panel{order:2}.colors{grid-template-columns:repeat(8,1fr)}.canvas-window{height:610px}.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wrap{padding:5px}header{flex-direction:column;align-items:flex-start}.stats{width:100%}.stats div{flex:1;min-width:0}.brand{font-size:1.15rem}.sub{display:none}.toolbar-top{gap:4px}.toolbar-top button{padding:8px 7px;font-size:.7rem}.toolbar-top #saveBtn{margin-left:0}.palette-panel{padding:10px}.colors{grid-template-columns:repeat(6,1fr)}.canvas-window{height:470px;padding:12px;display:block}.canvas-stage{transform-origin:top left}.bottom-actions{grid-template-columns:1fr 1fr}.bottom-actions #completeMessage{grid-column:1/-1;grid-row:1}.gallery-grid{grid-template-columns:1fr 1fr}.gallery-thumb{height:110px;font-size:3.5rem}}