/* Colouring Studio (ZEKASTRA Kids design system v3). Swatch colours mirror PALETTE in kids-coloring-core.js. */
.kc-c-red{--sw:#ef4452}.kc-c-orange{--sw:#ff8a3d}.kc-c-yellow{--sw:#ffd43b}.kc-c-lime{--sw:#a6e04a}
.kc-c-green{--sw:#2fb36d}.kc-c-teal{--sw:#22c3b4}.kc-c-sky{--sw:#62c9f7}.kc-c-blue{--sw:#3b6ef0}
.kc-c-purple{--sw:#8b5cf0}.kc-c-lilac{--sw:#cbb2ff}.kc-c-pink{--sw:#ff94c8}.kc-c-magenta{--sw:#e63e9b}
.kc-c-peach{--sw:#ffd0a8}.kc-c-brown{--sw:#9c5e35}.kc-c-grey{--sw:#a3abbd}.kc-c-black{--sw:#2c2b38}
.kc-c-eraser{--sw:#ffffff}
.kc-c-rainbow{--sw:conic-gradient(from 0deg,#ef4452,#ff8a3d,#ffd43b,#a6e04a,#2fb36d,#22c3b4,#62c9f7,#3b6ef0,#8b5cf0,#e63e9b,#ef4452)}

.kc-stage{position:relative;overflow:clip}
.kc-stage:before{content:"";position:absolute;inset:-120px -80px auto auto;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,159,211,.16),transparent);pointer-events:none}
.kc-stage>*{position:relative}
.kc-label{font-family:"Manrope",Inter,sans-serif;font-size:.8rem!important;letter-spacing:.1em;text-transform:uppercase;color:var(--k-gold)!important;margin:0 0 10px!important}

/* ----- Picture picker ----- */
.kc-picker{margin:0 0 22px}
.kc-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.kc-thumb{appearance:none;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;min-height:44px;padding:7px 7px 9px;border-radius:20px;border:2px solid var(--k-line);background:var(--k-surface-2);color:var(--k-ink-2);font:800 .82rem/1.2 "Manrope",Inter,sans-serif;cursor:pointer;transition:transform .15s ease,border-color .15s,box-shadow .15s,background .15s}
.kc-thumb svg{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:14px}
.kc-thumb span{display:block;text-align:center;overflow-wrap:anywhere;padding:0 2px}
.kc-thumb:hover{transform:translateY(-3px);border-color:#4757b0;background:var(--k-surface-3)}
.kc-thumb[aria-pressed="true"]{border-color:var(--k-pink);background:#2a2266;color:var(--k-ink);box-shadow:0 0 0 4px rgba(255,159,211,.28),0 12px 26px rgba(2,4,20,.45)}
.kc-thumb:focus-visible,.kc-swatch:focus-visible,.kc-round:focus-visible{outline:4px solid var(--k-gold);outline-offset:3px}

/* ----- Work area ----- */
.kc-work{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px);grid-template-areas:"canvas palette" "canvas tools";grid-template-rows:auto 1fr;gap:18px 26px;align-items:start}
.kc-canvas{grid-area:canvas;min-width:0}
.kc-palette-panel{grid-area:palette;min-width:0}
.kc-tools{grid-area:tools;min-width:0}
.kc-paper{margin:0 auto;width:min(100%,640px);background:#fff;border-radius:30px;padding:clamp(8px,1.4vw,14px);box-shadow:0 0 0 6px rgba(255,255,255,.07),0 24px 60px rgba(2,4,20,.55)}
.kc-svg{display:block;width:100%;height:auto;aspect-ratio:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.kc-r{cursor:pointer;transition:fill .22s ease}
.kc-r:hover{filter:brightness(.96)}
.kc-r:focus{outline:none}
.kc-overlay{pointer-events:none}
.kc-hl-under{fill:none;stroke:#fff;stroke-width:12;stroke-linejoin:round}
.kc-hl{fill:none;stroke:#e63e9b;stroke-width:6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:14 10;animation:kc-march 1s linear infinite}
@keyframes kc-march{to{stroke-dashoffset:-24}}
.kc-splash{opacity:.55;transform-box:fill-box;transform-origin:center;animation:kc-splash .6s ease-out forwards}
@keyframes kc-splash{from{transform:scale(.1);opacity:.6}to{transform:scale(1.25);opacity:0}}
.kc-wiggle{animation:kc-wiggle .5s ease}
@keyframes kc-wiggle{25%{transform:rotate(-1.5deg) scale(1.01)}60%{transform:rotate(1.2deg)}100%{transform:none}}
.kc-caption{display:flex;justify-content:center;gap:10px;margin:10px 0 2px;font:800 1.05rem/1.2 "Manrope",Inter,sans-serif;color:#2a2550}
.kc-print-brand{display:none}
.kc-progress{height:10px;border-radius:999px;background:var(--k-bg-2);border:1px solid var(--k-line-soft);margin:16px auto 0;width:min(100%,640px);overflow:hidden}
.kc-progress span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--k-pink),var(--k-gold),var(--k-mint));transition:width .3s ease}

.kc-partnav{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px auto 0;width:min(100%,640px)}
.kc-round{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:2px solid var(--k-line);background:rgba(255,255,255,.04);color:var(--k-ink);cursor:pointer}
.kc-round:hover{background:var(--k-surface-2);border-color:#3b4a9a}
.kc-round svg{width:24px;height:24px}
.kc-fillpart{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;flex:0 1 auto}
.kc-fillpart svg,.kc-tool svg{width:22px;height:22px;flex:none}
.kc-status{text-align:center;max-width:640px;margin-inline:auto!important}

.kc-win h3{color:var(--k-ink)}
.kc-win-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.kc-winstar{width:40px;height:40px}
.kc-winstar-1{width:52px;height:52px;margin-top:-8px}
.kc-win:not([hidden]) .kc-winstar{animation:kc-pop .5s cubic-bezier(.3,1.6,.5,1) both}
.kc-win:not([hidden]) .kc-winstar-1{animation-delay:.12s}
.kc-win:not([hidden]) .kc-winstar-2{animation-delay:.24s}
@keyframes kc-pop{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}

/* ----- Palette ----- */
.kc-palette-panel{background:var(--k-bg-2);border:1px solid var(--k-line-soft);border-radius:24px;padding:16px}
.kc-current{display:flex;align-items:center;gap:14px;padding:4px 2px 16px;margin-bottom:14px;border-bottom:1px solid var(--k-line-soft)}
.kc-current-dot{flex:none;width:56px;height:56px;border-radius:50%;background:var(--sw);border:4px solid #fff;box-shadow:0 0 0 3px var(--k-line),0 8px 18px rgba(0,0,0,.35)}
.kc-current-text{display:flex;flex-direction:column;min-width:0}
.kc-current-text small{color:var(--k-muted);font-weight:700;font-size:.8rem}
.kc-current-text strong{color:var(--k-ink);font:800 1.3rem/1.15 "Manrope",Inter,sans-serif;overflow-wrap:anywhere}
.kc-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:10px;justify-items:center}
.kc-swatch{position:relative;display:grid;place-items:center;width:50px;height:50px;padding:0;border-radius:50%;border:3px solid rgba(255,255,255,.16);background:var(--sw);cursor:pointer;box-shadow:inset 0 -5px 0 rgba(0,0,0,.14),0 4px 10px rgba(0,0,0,.3);transition:transform .14s ease,box-shadow .14s}
.kc-swatch:hover{transform:translateY(-2px) scale(1.06)}
.kc-swatch[aria-pressed="true"]{border-color:#fff;transform:scale(1.1);box-shadow:0 0 0 4px rgba(255,255,255,.28),0 8px 16px rgba(0,0,0,.4)}
.kc-swatch-icon{width:26px;height:26px}
.kc-tick{position:absolute;right:-5px;bottom:-5px;display:none;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#1d1a33;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.kc-tick svg{width:14px;height:14px}
.kc-swatch[aria-pressed="true"] .kc-tick{display:grid}

/* ----- Tools ----- */
.kc-tools{background:var(--k-bg-2);border:1px solid var(--k-line-soft);border-radius:24px;padding:16px}
.kc-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kc-tool{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;padding:10px 12px;font-size:.92rem;line-height:1.15;text-align:center}
.kc-tool span{min-width:0;overflow-wrap:anywhere}
#kc-print,#kc-print-blank{grid-column:1/-1}
.kc-surprise{grid-column:1/-1;background:linear-gradient(100deg,var(--k-pink),var(--k-gold))!important;box-shadow:0 8px 24px rgba(255,159,211,.28)!important;color:#2a1030!important}
.kc-hint{margin:14px 0 0;font-size:.82rem}

/* ----- Responsive ----- */
@media(max-width:900px){
 .kc-work{grid-template-columns:minmax(0,1fr);grid-template-areas:"canvas" "palette" "tools";grid-template-rows:auto}
 .kc-palette-panel{position:sticky;bottom:8px;z-index:6;padding:10px 12px;background:rgba(12,18,52,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -6px 30px rgba(2,4,20,.6);border-color:var(--k-line)}
 .kc-palette-panel .kc-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .kc-current{display:none}
 .kc-palette{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:8px 6px 10px;scrollbar-width:thin}
 .kc-swatch{flex:none;scroll-snap-align:center}
}
@media(max-width:700px){
 .kc-thumbs{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:10px;padding:4px 4px 10px;scrollbar-width:thin}
 .kc-thumb{flex:0 0 96px;scroll-snap-align:start}
 .kc-paper{border-radius:22px}
}
@media(max-width:420px){
 .kc-tool-grid{grid-template-columns:minmax(0,1fr)}
 .kc-partnav{gap:6px}
 .kc-round{width:48px;height:48px}
 .kc-fillpart{padding-inline:14px;font-size:.95rem;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
 .kc-r,.kc-thumb,.kc-swatch,.kc-progress span{transition:none!important}
 .kc-hl,.kc-splash,.kc-wiggle,.kc-win .kc-winstar{animation:none!important}
 .kc-thumb:hover,.kc-swatch:hover{transform:none}
}

/* ----- Print: only the picture, large, on white A4 ----- */
@media print{
 @page{size:A4 portrait;margin:12mm}
 html,body{background:#fff!important}
 body *{visibility:hidden}
 .kp-header,.kp-footer,.kids-skip,.kp-back,.kg-hero,.kg-grownups,.kg-toolbar,.kc-picker,.kc-palette-panel,.kc-tools,.kc-partnav,.kc-progress,.kg-status,.kc-win,footer{display:none!important}
 .kc-paper,.kc-paper *{visibility:visible}
 .kg-stage,.kc-stage{background:#fff!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible}
 .kc-stage:before{display:none}
 .kc-work{display:block}
 .kc-paper{width:100%;max-width:180mm;margin:0 auto;padding:0;box-shadow:none;border-radius:0;break-inside:avoid}
 .kc-svg{width:100%;height:auto}
 .kc-r{print-color-adjust:exact;-webkit-print-color-adjust:exact}
 .kc-overlay{display:none}
 .kc-print-blank .kc-r{fill:#fff!important}
 .kc-caption{color:#000;justify-content:space-between;font-size:14pt;margin-top:6mm}
 .kc-print-brand{display:inline;color:#555;font-weight:700}
}