/* Drawing Board. Builds on the Kids design system v3 tokens in kids-product.css. */
#kids-draw{--dr-cur:#2f6fe4;--dr-rot:0deg;--dr-ink:#14102e}
.dr-sw-black{--sw:#1f1d2b}.dr-sw-white{--sw:#ffffff}.dr-sw-red{--sw:#ef4444}.dr-sw-orange{--sw:#ff8a33}
.dr-sw-yellow{--sw:#fbc531}.dr-sw-lime{--sw:#a3e635}.dr-sw-green{--sw:#22a861}.dr-sw-teal{--sw:#14b8a6}
.dr-sw-sky{--sw:#38bdf8}.dr-sw-blue{--sw:#2f6fe4}.dr-sw-navy{--sw:#1e2a78}.dr-sw-purple{--sw:#8b5cf6}
.dr-sw-pink{--sw:#ff6fb5}.dr-sw-peach{--sw:#ffc9a3}.dr-sw-brown{--sw:#9a5b34}.dr-sw-grey{--sw:#8a93a8}

.dr-stage svg{flex:none}
.dr-stage button{-webkit-tap-highlight-color:transparent}
.dr-stage button:focus-visible{outline:4px solid var(--k-gold);outline-offset:3px}

/* ---------- Top: how to play + score ---------- */
.dr-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.dr-how{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;list-style:none;margin:0;padding:0;min-width:0}
.dr-how li{display:inline-flex;align-items:center;gap:7px;margin:0!important;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(255,159,211,.14);color:#ffd5ec!important;font:800 .9rem/1 "Manrope",Inter,sans-serif}
.dr-how li.dr-how-line{background:none;padding:0;color:var(--k-ink-2)!important;font:600 .95rem/1.4 Inter,sans-serif;flex:1 1 260px}
.dr-how-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--k-pink);color:#2a0b1e;font-size:.8rem}
.dr-how svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Idea card ---------- */
.dr-idea{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 18px;padding:14px 18px;margin-bottom:18px;border-radius:24px;background:linear-gradient(120deg,rgba(255,159,211,.18),rgba(165,148,255,.16) 60%,rgba(61,213,243,.12));border:1px solid #5b3f7c}
.dr-piko{width:64px;height:64px}
.dr-idea-label{margin:0!important;font:800 .78rem/1 "Manrope",Inter,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--k-gold)!important}
.dr-idea-text{margin:6px 0 0!important;font:800 clamp(1.2rem,2.6vw,1.6rem)/1.25 "Manrope",Inter,sans-serif;color:var(--k-ink)!important;overflow-wrap:anywhere}
@keyframes dr-pop{0%{transform:scale(.92);opacity:.2}60%{transform:scale(1.03);opacity:1}100%{transform:none}}
.dr-idea-text.dr-pop{animation:dr-pop .35s ease-out;transform-origin:left center}
.dr-idea-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.dr-levels button{min-height:44px;font-size:.88rem}
.dr-idea-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.dr-stage .kp-button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.dr-stage .kp-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#dr-idea-done{background:linear-gradient(100deg,var(--k-pink),var(--k-violet));box-shadow:0 8px 24px rgba(255,159,211,.28);color:#1d0a26}

/* ---------- Studio layout ---------- */
.dr-studio{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:20px;align-items:start}
.dr-side{display:flex;flex-direction:column;gap:16px;padding:16px;border-radius:24px;background:var(--k-bg-2);border:1px solid var(--k-line-soft)}
.dr-group{min-width:0}
.dr-label{margin:0 0 8px!important;font:800 .8rem/1 "Manrope",Inter,sans-serif!important;letter-spacing:.1em;text-transform:uppercase;color:var(--k-muted)!important}
.dr-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dr-tool{display:flex;align-items:center;gap:6px;min-height:56px;padding:6px 8px 6px 6px;border-radius:16px;border:2px solid var(--k-line);background:var(--k-surface);color:var(--k-ink);font:800 .88rem/1.15 "Manrope",Inter,sans-serif;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.dr-tool svg{width:36px;height:36px;padding:7px;border-radius:12px;box-sizing:border-box;background:var(--k-surface-3);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dr-tool span{min-width:0;overflow-wrap:normal;hyphens:manual}
.dr-tool:hover{border-color:#5a68c0;background:var(--k-surface-2)}
.dr-tool[aria-pressed="true"]{border-color:var(--k-pink);background:linear-gradient(135deg,rgba(255,159,211,.26),rgba(165,148,255,.2));box-shadow:0 6px 18px rgba(255,159,211,.2)}
.dr-tool[aria-pressed="true"] svg{background:var(--k-pink);color:#2a0b1e}
.dr-tool-rainbow svg{stroke:#ffb2d9}
.dr-tool-rainbow[aria-pressed="true"] svg{background:linear-gradient(135deg,#ff8f7f,#f6c96c,#62e3ab,#7cbcff,#a594ff);stroke:#1b0d2a}
.dr-tool-glitter svg{color:var(--k-gold)}

.dr-group-row{display:flex;flex-wrap:wrap;gap:14px}
.dr-sizes-wrap{flex:0 0 auto}
.dr-mirror-wrap{flex:1 1 auto;min-width:0}
.dr-seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:18px;background:var(--k-surface);border:1px solid var(--k-line-soft)}
.dr-seg button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;padding:4px 8px;border:0;border-radius:14px;background:transparent;color:var(--k-ink-2);font:800 .85rem/1 "Manrope",Inter,sans-serif;cursor:pointer}
.dr-seg button:hover{background:var(--k-surface-2)}
.dr-seg button[aria-pressed="true"]{background:var(--k-ink);color:#0b1030}
.dr-mirrors button{flex:1 1 auto;padding:4px 6px}
.dr-mirrors svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dr-dot{display:block;border-radius:50%;background:currentColor}
.dr-dot-0{width:8px;height:8px}.dr-dot-1{width:14px;height:14px}.dr-dot-2{width:22px;height:22px}

.dr-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.dr-swatch{position:relative;aspect-ratio:1;min-width:0;min-height:44px;padding:0;border-radius:50%;border:3px solid rgba(255,255,255,.12);background:var(--sw);cursor:pointer;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);transition:transform .12s}
.dr-swatch:hover{transform:scale(1.08)}
.dr-swatch[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 3px var(--k-pink),inset 0 -4px 0 rgba(0,0,0,.18);transform:scale(1.1)}
.dr-swatch[aria-pressed="true"]:after{content:"";position:absolute;inset:30%;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(20,16,46,.5)}
.dr-sw-white[aria-pressed="true"]:after{background:#1f1d2b}
.dr-keys{margin:0!important;font-size:.8rem;line-height:1.5;color:var(--k-muted)!important}
.dr-keys b{color:var(--k-ink-2)}

/* ---------- Stamps ---------- */
.dr-stamp-panel{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:12px;padding:10px 12px;border-radius:22px;background:var(--k-bg-2);border:1px solid var(--k-line-soft)}
.dr-stamps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;flex:1 1 480px;min-width:0}
.dr-stamp{display:grid;place-items:center;aspect-ratio:1;min-width:44px;min-height:44px;padding:4px;border-radius:14px;border:2px solid var(--k-line);background:var(--k-surface);cursor:pointer}
.dr-stamp svg{width:100%;height:100%;max-width:46px;max-height:46px;overflow:visible;transform:rotate(var(--dr-rot));transition:transform .2s}
.dr-stamp .dr-cur{fill:var(--dr-cur)}
.dr-stamp:hover{border-color:#5a68c0;background:var(--k-surface-2)}
.dr-stamp[aria-pressed="true"]{border-color:var(--k-pink);background:#2b2350;box-shadow:0 0 0 2px rgba(255,159,211,.35)}
.dr-turn{display:flex;align-items:center;gap:6px}
.dr-turn-label{font:800 .8rem/1 "Manrope",Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--k-muted);margin-right:2px}
.dr-icon-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:2px solid var(--k-line);background:var(--k-surface);color:var(--k-ink);cursor:pointer}
.dr-icon-btn:hover{background:var(--k-surface-2)}
.dr-icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dr-rot-value{min-width:3.2em;text-align:center;font:800 1rem/1 "Manrope",Inter,sans-serif;color:var(--k-ink)}

/* ---------- The board ---------- */
.dr-board{position:relative;width:100%;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 0 0 6px #f4f6ff,0 0 0 8px #ff9fd3,0 22px 50px rgba(2,4,20,.55);margin:8px 0 6px}
.dr-layer{position:absolute;inset:0;width:100%;height:100%;display:block}
.dr-live{touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
.dr-live.dr-soft{opacity:.62}
.dr-guides,.dr-fx{pointer-events:none}
.dr-guides line{stroke:#7a86c9;stroke-width:3;stroke-dasharray:14 12;opacity:.45;vector-effect:non-scaling-stroke}
.dr-guides circle{fill:#ff6fb5;opacity:.6}
.dr-dark .dr-guides line{stroke:#c9d2ff;opacity:.4}
.dr-stage[data-tool="fill"] .dr-live{cursor:cell}
.dr-stage[data-tool="stamp"] .dr-live{cursor:copy}

.dr-actions{margin-top:18px}
.dr-actions .kp-button{flex:1 1 auto}
#dr-clear[aria-expanded="true"]{border-color:var(--k-coral)}

.dr-confirm{margin-top:14px;padding:18px 20px;border-radius:22px;background:linear-gradient(135deg,rgba(255,143,127,.18),rgba(165,148,255,.14));border:1px solid #7a4a5e}
.dr-confirm-title{margin:0 0 4px!important;font:800 1.2rem/1.3 "Manrope",Inter,sans-serif;color:var(--k-ink)!important}
.dr-confirm-text{margin:0 0 14px!important}
.dr-confirm-actions{display:flex;flex-wrap:wrap;gap:10px}

.dr-status{text-align:center}
.dr-win .kg-stars{gap:8px}
.dr-star{width:48px;height:48px;fill:#3a447e}
.dr-star.dr-star-on{fill:var(--k-gold);filter:drop-shadow(0 4px 10px rgba(246,201,108,.45))}
@keyframes dr-star-in{0%{transform:scale(.2) rotate(-40deg);opacity:0}70%{transform:scale(1.15) rotate(8deg);opacity:1}100%{transform:none}}
.dr-win:not([hidden]) .dr-star-on{animation:dr-star-in .5s cubic-bezier(.2,.9,.3,1.3) both}
.dr-win:not([hidden]) .dr-star-on:nth-child(2){animation-delay:.12s}
.dr-win:not([hidden]) .dr-star-on:nth-child(3){animation-delay:.24s}
.dr-win-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.dr-win:focus{outline:none}
.dr-win:focus-visible{outline:4px solid var(--k-gold);outline-offset:3px}

/* ---------- Papers and pictures ---------- */
.dr-papers{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 22px;margin-top:20px;padding:16px;border-radius:24px;background:var(--k-bg-2);border:1px solid var(--k-line-soft)}
.dr-paper-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:520px}
.dr-picture-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.dr-paper,.dr-picture{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:56px;padding:6px 6px 8px;border-radius:16px;border:2px solid var(--k-line);background:var(--k-surface);color:var(--k-ink);font:800 .82rem/1.15 "Manrope",Inter,sans-serif;text-align:center;cursor:pointer}
.dr-paper:hover,.dr-picture:hover{border-color:#5a68c0;background:var(--k-surface-2)}
.dr-paper[aria-pressed="true"],.dr-picture[aria-pressed="true"]{border-color:var(--k-pink);background:#2b2350}
.dr-paper-sw{display:block;width:64px;height:44px;border-radius:8px;border:1px solid rgba(0,0,0,.15)}
.dr-paper-white .dr-paper-sw{background:#fff}
.dr-paper-night .dr-paper-sw{background:radial-gradient(1.5px 1.5px at 20% 30%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 70% 20%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 50% 70%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 85% 65%,#fff 50%,transparent 51%),linear-gradient(#0a0f33,#241c63)}
.dr-paper-grid .dr-paper-sw{background:linear-gradient(90deg,#d6e1f5 1px,transparent 1px) 0 0/8px 8px,linear-gradient(#d6e1f5 1px,transparent 1px) 0 0/8px 8px,#fbfcff}
.dr-paper-lined .dr-paper-sw{background:linear-gradient(90deg,transparent 10px,#f3a6a6 10px,#f3a6a6 11px,transparent 11px),linear-gradient(#c7d7f1 1px,transparent 1px) 0 6px/100% 9px,#fffdf6}
.dr-picture svg{width:100%;max-width:96px;aspect-ratio:4/3;height:auto;border-radius:8px;background:#fff;fill:none;stroke:#2a2c48;stroke-width:22;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Responsive ---------- */
@media(max-width:980px){
 .dr-studio{grid-template-columns:minmax(0,1fr)}
 .dr-main{order:-1}
 .dr-tools{grid-template-columns:repeat(auto-fill,minmax(min(100%,5.4em),1fr))}
 .dr-swatches{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
 .dr-keys{display:none}
 .dr-stamps{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}
}
@media(max-width:760px){
 .dr-idea{grid-template-columns:auto minmax(0,1fr)}
 .dr-idea-side{grid-column:1/-1;align-items:stretch}
 .dr-levels{justify-content:center;border-radius:22px}
 .dr-levels button{flex:1 1 auto;padding:6px 10px;font-size:.82rem}
 .dr-idea-actions .kp-button{flex:1 1 40%}
 .dr-papers{grid-template-columns:1fr}
 .dr-paper-list{grid-template-columns:repeat(4,minmax(0,1fr))}
 .dr-tool{flex-direction:column;justify-content:center;gap:4px;padding:6px 4px;text-align:center;font-size:.78rem}
 .dr-tool svg{width:36px;height:36px;padding:7px}
 .dr-how li.dr-how-line{flex-basis:100%}
}
@media(max-width:480px){
 .dr-side{padding:10px;gap:12px;margin-inline:-4px}
 .dr-tools{gap:5px}
 .dr-tool{min-height:64px;border-radius:14px}
 .dr-swatches{gap:5px}
 .dr-piko{width:48px;height:48px}
 .dr-idea{padding:12px}
 .dr-board{border-radius:14px;box-shadow:0 0 0 4px #f4f6ff,0 0 0 6px #ff9fd3,0 12px 30px rgba(2,4,20,.5)}
 .dr-actions .kp-button{flex:1 1 40%;padding-inline:10px}
 .dr-paper-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dr-picture-list{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
 .dr-turn{width:100%;justify-content:center}
 .dr-how li:not(.dr-how-line){display:none}
}
@media(prefers-reduced-motion:reduce){
 .dr-idea-text.dr-pop,.dr-win:not([hidden]) .dr-star-on{animation:none!important}
 .dr-tool,.dr-swatch,.dr-stamp svg{transition:none!important}
 .dr-swatch:hover{transform:none}
 .dr-fx{display:none}
}

/* ---------- Print: just the drawing, on A4 ---------- */
@media print{
 @page{size:A4 landscape;margin:10mm}
 .kp-header,.kp-footer,.kids-skip,.kp-back,.kg-hero,.kg-grownups,.dr-top,.dr-idea,.dr-side,.dr-stamp-panel,.dr-actions,.dr-confirm,.dr-status,.dr-win,.dr-papers,.dr-guides,.dr-fx,.dr-live{display:none!important}
 .kg-stage.dr-stage{background:#fff!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
 .dr-studio{display:block}
 .dr-board{width:auto;height:180mm;max-width:100%;aspect-ratio:4/3;margin:0 auto;border-radius:0;box-shadow:none;border:.3mm solid #999;break-inside:avoid;page-break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}