/* teach - thematische kleurplaten met kwast en vlakvulling */
"use strict";

const COLORING_THEME_KEYS=Object.freeze({
  all:"colorThemeAll",animals:"colorThemeAnimals",seasons:"colorThemeSeasons",
  nature:"colorThemeNature",science:"colorThemeScience",culture:"colorThemeCulture"
});
const COLORING_COLORS=Object.freeze([
  "#26344a","#e0554d","#f28c3c","#f7c948","#3fae6a","#2fb7a8",
  "#3b7dd8","#7557c8","#d85aa5","#8b5a3c","#f2b38f","#ffffff"
]);

function coloringPart(tag,id,attrs="",level=1){
  const backdrop=tag==="rect"&&attrs==='x="4" y="4" width="792" height="592" rx="28"';
  return `<${tag} class="coloring-region" data-fillable="true" data-part="${id}"${backdrop?' data-role="backdrop"':""}${level>1?` data-level="${level}"`:""} ${attrs}/>`;
}
function coloringLine(tag,attrs="",level=1){
  return `<${tag} class="coloring-detail"${level>1?` data-level="${level}"`:""} ${attrs}/>`;
}
function coloringScene(content){
  return `<svg class="coloring-sheet" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
    <g class="coloring-svg-lines" fill="#fff" fill-rule="evenodd" clip-rule="evenodd" stroke="#26344a" stroke-width="5.6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="2">
      ${content}
    </g>
  </svg>`;
}
function coloringPetals(cx,cy,prefix,level=2){
  return [0,60,120,180,240,300].map((angle,index)=>{
    const rad=angle*Math.PI/180,x=(cx+Math.cos(rad)*27).toFixed(1),y=(cy+Math.sin(rad)*27).toFixed(1);
    return coloringPart("circle",`${prefix}-petal-${index}`,`cx="${x}" cy="${y}" r="20"`,level);
  }).join("")+coloringPart("circle",`${prefix}-heart`,`cx="${cx}" cy="${cy}" r="17"`,level);
}
function coloringStars(points,prefix,level=2){
  return points.map(([x,y,r],index)=>coloringPart("path",`${prefix}-${index}`,
    `d="M ${x} ${y-r} L ${x+r*.24} ${y-r*.25} L ${x+r} ${y} L ${x+r*.24} ${y+r*.25} L ${x} ${y+r} L ${x-r*.24} ${y+r*.25} L ${x-r} ${y} L ${x-r*.24} ${y-r*.25} Z"`,level)).join("");
}

function sceneButterfly(){return coloringScene(
  coloringPart("rect","sky",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("path","grass",'d="M 4 430 Q 170 390 320 438 T 796 420 L 796 596 L 4 596 Z"')+
  coloringPart("circle","sun",'cx="685" cy="105" r="62"')+
  coloringPart("path","wing-left-top",'d="M 378 300 C 335 155 250 95 190 145 C 130 195 185 315 355 345 C 370 335 380 320 378 300 Z"')+
  coloringPart("path","wing-right-top",'d="M 422 300 C 465 155 550 95 610 145 C 670 195 615 315 445 345 C 430 335 420 320 422 300 Z"')+
  coloringPart("path","wing-left-bottom",'d="M 365 330 C 245 320 205 405 255 470 C 305 525 380 440 390 350 C 385 340 378 334 365 330 Z"')+
  coloringPart("path","wing-right-bottom",'d="M 435 330 C 555 320 595 405 545 470 C 495 525 420 440 410 350 C 415 340 422 334 435 330 Z"')+
  coloringPart("path","body",'d="M 382 185 C 366 225 365 305 374 385 C 378 440 390 475 400 488 C 410 475 422 440 426 385 C 435 305 434 225 418 185 C 407 174 393 174 382 185 Z"')+
  coloringPart("path","head",'d="M 365 155 C 365 125 380 108 400 108 C 420 108 435 125 435 155 C 435 180 420 195 400 195 C 380 195 365 180 365 155 Z"')+
  coloringLine("path",'d="M 382 122 C 365 92 340 76 315 82 M 418 122 C 435 92 460 76 485 82" fill="none"')+
  [[293,220],[507,220],[325,382],[475,382]].map(([x,y],i)=>coloringPart("circle",`wing-dot-${i}`,`cx="${x}" cy="${y}" r="28"`,2)).join("")+
  coloringLine("path",'d="M 385 155 Q 400 170 415 155" fill="none"',2)+
  coloringPetals(125,475,"flower-a",2)+coloringPetals(665,492,"flower-b",3)
)}
function sceneAutumn(){return coloringScene(
  coloringPart("rect","sky",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("path","ground",'d="M 4 440 Q 190 405 380 448 T 796 430 L 796 596 L 4 596 Z"')+
  coloringPart("path","trunk",'d="M 337 500 Q 365 380 358 250 Q 398 285 420 250 Q 415 390 463 500 Z"')+
  [[390,162,115],[285,215,95],[505,225,104],[340,290,92],[460,315,88]].map(([x,y,r],i)=>
    coloringPart("circle",`crown-${i}`,`cx="${x}" cy="${y}" r="${r}"`,i>2?2:1)).join("")+
  [[115,175,-18],[660,165,20],[175,355,12],[610,390,-24],[90,505,15],[705,500,-8]].map(([x,y,a],i)=>
    coloringPart("path",`leaf-${i}`,`d="M ${x-35} ${y} Q ${x} ${y-45} ${x+35} ${y} Q ${x} ${y+45} ${x-35} ${y} Z" transform="rotate(${a} ${x} ${y})"`,2)).join("")+
  coloringStars([[155,90,20],[585,95,18],[730,300,16]],"wind-leaf",3)+
  coloringLine("path",'d="M 85 120 Q 170 80 240 118 M 560 120 Q 645 80 720 118" fill="none"',3)
)}
function sceneCake(){return coloringScene(
  coloringPart("rect","party-wall",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("path","table",'d="M 4 445 L 796 445 L 796 596 L 4 596 Z"')+
  coloringPart("rect","cake-bottom",'x="190" y="360" width="420" height="120" rx="24"')+
  coloringPart("rect","cake-middle",'x="245" y="265" width="310" height="105" rx="22"')+
  coloringPart("rect","cake-top",'x="305" y="180" width="190" height="95" rx="20"')+
  coloringPart("path","icing-bottom",'d="M 190 390 Q 225 430 260 390 Q 300 430 340 390 Q 380 430 420 390 Q 460 430 500 390 Q 555 430 610 390 L 610 360 L 190 360 Z"',2)+
  coloringPart("path","icing-middle",'d="M 245 295 Q 285 330 325 295 Q 365 330 405 295 Q 450 330 495 295 Q 525 325 555 295 L 555 265 L 245 265 Z"',2)+
  coloringPart("rect","candle",'x="382" y="93" width="36" height="92" rx="8"')+
  coloringPart("path","flame",'d="M 400 92 Q 355 55 400 20 Q 445 55 400 92 Z"')+
  [[110,115],[690,120],[135,280],[665,275]].map(([x,y],i)=>coloringPart("path",`balloon-${i}`,`d="M ${x} ${y+55} C ${x-65} ${y+20} ${x-48} ${y-65} ${x} ${y-65} C ${x+48} ${y-65} ${x+65} ${y+20} ${x} ${y+55} Z"`,i>1?2:1)).join("")+
  coloringLine("path",'d="M 110 170 Q 130 260 95 350 M 690 175 Q 670 260 705 350 M 135 335 Q 160 390 140 440 M 665 330 Q 640 390 660 440" fill="none"')+
  coloringStars([[205,95,22],[595,72,22],[90,405,15],[720,410,15]],"confetti",3)
)}
function sceneOcean(){return coloringScene(
  coloringPart("rect","water",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("path","sand",'d="M 4 475 Q 140 430 275 482 T 535 470 T 796 458 L 796 596 L 4 596 Z"')+
  coloringPart("path","fish-tail",'d="M 198 258 C 155 230 120 190 82 172 C 98 220 98 300 82 348 C 125 326 162 294 198 270 Z"')+
  coloringPart("path","fish-top-fin",'d="M 280 185 C 315 125 365 135 385 190 C 345 178 315 180 280 185 Z"',2)+
  coloringPart("path","fish-bottom-fin",'d="M 300 328 C 335 380 380 365 392 315 C 355 330 330 332 300 328 Z"',3)+
  coloringPart("path","fish-body",'d="M 185 260 C 235 165 370 145 458 215 C 490 240 490 280 458 305 C 365 375 235 350 185 260 Z"')+
  coloringPart("circle","fish-eye",'cx="395" cy="230" r="18"')+
  coloringPart("path","turtle-tail",'d="M 480 388 L 445 365 L 455 410 Z"',2)+
  [[515,342,-32],[520,438,32],[650,337,28],[650,443,-28]].map(([x,y,a],i)=>coloringPart("path",`flipper-${i}`,`d="M ${x-38} ${y-8} C ${x-12} ${y-32} ${x+35} ${y-25} ${x+48} ${y} C ${x+12} ${y+12} ${x-20} ${y+14} ${x-38} ${y-8} Z" transform="rotate(${a} ${x} ${y})"`,2)).join("")+
  coloringPart("path","turtle-shell",'d="M 478 390 C 485 320 545 292 610 305 C 670 315 705 352 700 400 C 692 455 635 475 575 465 C 515 455 480 430 478 390 Z"')+
  coloringPart("path","turtle-head",'d="M 688 365 C 708 340 748 342 765 370 C 780 395 760 425 728 425 C 702 425 685 400 688 365 Z"')+
  coloringLine("path",'d="M 270 220 Q 325 265 270 310 M 335 190 Q 370 260 335 330" fill="none"',2)+
  coloringLine("path",'d="M 485 390 H 695 M 535 330 Q 590 390 535 450 M 645 330 Q 590 390 645 450 M 520 390 Q 590 340 660 390 Q 590 440 520 390 Z" fill="none"',3)+
  [[115,105,18],[150,75,11],[640,100,22],[675,65,13],[730,145,15]].map(([x,y,r],i)=>coloringPart("circle",`bubble-${i}`,`cx="${x}" cy="${y}" r="${r}"`,3)).join("")+
  coloringPart("path","seaweed-a",'d="M 120 525 Q 70 455 120 385 Q 165 455 120 525 Z"',2)+
  coloringPart("path","seaweed-b",'d="M 190 535 Q 145 470 205 410 Q 240 475 190 535 Z"',3)
)}
function sceneGarden(){return coloringScene(
  coloringPart("rect","garden-sky",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("path","garden-ground",'d="M 4 390 Q 160 350 320 400 T 796 385 L 796 596 L 4 596 Z"')+
  coloringPart("circle","sun",'cx="690" cy="95" r="58"')+
  coloringPart("path","snail-body",'d="M 82 455 C 160 448 245 470 335 438 C 355 430 365 400 383 380 C 407 352 447 360 458 392 C 470 425 447 457 410 465 C 365 515 250 505 115 500 C 88 500 72 480 82 455 Z"')+
  coloringPart("path","snail-shell",'d="M 118 410 C 110 330 165 285 230 295 C 300 305 330 365 305 425 C 280 480 190 485 140 440 C 128 430 120 420 118 410 Z"')+
  coloringPart("path","snail-head",'d="M 365 410 C 365 372 385 350 415 350 C 447 350 465 378 458 412 C 452 445 425 465 393 452 C 375 445 365 430 365 410 Z"')+
  coloringLine("path",'d="M 388 365 C 382 338 375 320 365 305 M 435 368 C 443 338 452 320 463 306" fill="none"')+
  [[525,350,-25],[520,405,20],[675,350,25],[680,405,-20]].map(([x,y,a],i)=>coloringPart("path",`ladybird-leg-${i}`,`d="M ${x} ${y} C ${x+(i<2?-34:34)} ${y+4} ${x+(i<2?-48:48)} ${y+24} ${x+(i<2?-60:60)} ${y+38} L ${x+(i<2?-48:48)} ${y+45} C ${x+(i<2?-30:30)} ${y+28} ${x+(i<2?-15:15)} ${y+20} ${x} ${y+18} Z" transform="rotate(${a} ${x} ${y})"`,3)).join("")+
  coloringPart("path","ladybird",'d="M 520 390 C 520 335 555 305 600 305 C 645 305 680 335 680 390 C 680 448 648 475 600 475 C 552 475 520 448 520 390 Z"')+
  coloringPart("path","ladybird-head",'d="M 558 320 C 558 282 575 260 600 260 C 625 260 642 282 642 320 C 620 335 580 335 558 320 Z"')+
  coloringLine("path",'d="M 600 305 L 600 465 M 540 328 Q 600 385 540 440 M 660 328 Q 600 385 660 440" fill="none"',2)+
  [[565,360],[635,360],[560,415],[640,415]].map(([x,y],i)=>coloringPart("circle",`ladybird-dot-${i}`,`cx="${x}" cy="${y}" r="15"`,2)).join("")+
  coloringPetals(165,165,"garden-flower-a",2)+coloringPetals(430,145,"garden-flower-b",3)+
  coloringLine("path",'d="M 165 205 L 165 315 M 430 185 L 430 280" fill="none"',2)
)}
function sceneWindmill(){return coloringScene(
  coloringPart("rect","dutch-sky",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("path","polder",'d="M 4 410 Q 190 380 365 420 T 796 405 L 796 596 L 4 596 Z"')+
  coloringPart("path","water",'d="M 4 505 Q 200 475 400 515 T 796 500 L 796 596 L 4 596 Z"',2)+
  coloringPart("path","mill-body",'d="M 310 470 L 350 185 L 485 185 L 535 470 Z"')+
  coloringPart("path","mill-roof",'d="M 335 185 Q 420 78 500 185 Z"')+
  coloringPart("rect","mill-door",'x="392" y="375" width="65" height="95" rx="25"')+
  [["M 405 190 L 320 55 L 345 40 L 430 205 Z"],["M 447 208 L 630 120 L 645 150 L 448 235 Z"],["M 430 250 L 515 410 L 485 425 L 405 248 Z"],["M 389 232 L 205 325 L 190 295 L 388 205 Z"]].map((d,i)=>coloringPart("path",`sail-${i}`,`d="${d}"`,1)).join("")+
  coloringPart("circle","mill-hub",'cx="418" cy="220" r="35"')+
  coloringPart("rect","house",'x="80" y="345" width="165" height="125" rx="8"',2)+
  coloringPart("path","house-roof",'d="M 55 345 L 165 260 L 270 345 Z"',2)+
  coloringPart("rect","house-window-a",'x="105" y="375" width="45" height="45"',3)+
  coloringPart("rect","house-window-b",'x="175" y="375" width="45" height="45"',3)+
  coloringLine("path",'d="M 35 185 Q 75 155 115 185 Q 155 155 195 185 M 595 75 Q 630 50 665 75 Q 700 50 735 75" fill="none"',3)
)}
function sceneRocket(){return coloringScene(
  coloringPart("rect","space",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("circle","planet-large",'cx="650" cy="150" r="100"')+
  coloringPart("path","planet-ring",'d="M 535 120 Q 650 195 765 120 Q 650 255 535 120 Z"',2)+
  coloringPart("path","flame-outer",'d="M 350 420 Q 330 525 400 575 Q 470 525 450 420 Z"')+
  coloringPart("path","flame-inner",'d="M 380 420 Q 365 495 400 530 Q 435 495 420 420 Z"',2)+
  coloringPart("path","rocket-left-fin",'d="M 330 330 C 270 365 240 420 245 485 C 285 465 325 435 355 400 Z"')+
  coloringPart("path","rocket-right-fin",'d="M 470 330 C 530 365 560 420 555 485 C 515 465 475 435 445 400 Z"')+
  coloringPart("path","rocket-body",'d="M 350 425 C 325 355 320 245 345 165 C 360 118 382 88 400 65 C 418 88 440 118 455 165 C 480 245 475 355 450 425 C 425 440 375 440 350 425 Z"')+
  coloringPart("circle","rocket-window",'cx="400" cy="225" r="48"')+
  coloringStars([[110,105,30],[210,225,22],[680,350,28],[120,430,20],[575,80,15]],"space-star",2)+
  coloringPart("circle","moon",'cx="680" cy="475" r="62"',3)+
  [[655,458,13],[700,490,17],[690,445,9]].map(([x,y,r],i)=>coloringPart("circle",`crater-${i}`,`cx="${x}" cy="${y}" r="${r}"`,3)).join("")
)}
function sceneRainforest(){return coloringScene(
  coloringPart("rect","forest-sky",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("path","forest-canopy-left",'d="M 4 145 Q 45 35 145 80 Q 220 15 300 90 Q 335 150 270 185 H 4 Z"',2)+
  coloringPart("path","forest-canopy-right",'d="M 500 95 Q 575 20 645 80 Q 735 35 796 130 V 205 H 535 Q 475 165 500 95 Z"',2)+
  coloringPart("path","forest-floor",'d="M 4 475 Q 190 430 360 490 T 796 455 L 796 596 L 4 596 Z"')+
  coloringPart("path","tree-trunk-left",'d="M 40 500 Q 95 330 70 45 L 205 45 Q 165 330 235 500 Z"')+
  coloringPart("path","tree-trunk-right",'d="M 585 500 Q 640 300 615 35 L 760 35 Q 720 300 785 500 Z"')+
  coloringLine("path",'d="M 170 55 Q 300 175 230 315 Q 170 430 300 485 Q 400 525 455 425 Q 505 330 430 265" fill="none"',2)+
  coloringPart("path","parrot-branch",'d="M 245 408 Q 395 382 575 420 L 568 455 Q 405 425 255 447 Z"')+
  coloringPart("path","parrot-tail",'d="M 385 380 C 365 425 350 475 355 525 L 412 440 C 420 475 430 510 445 530 L 468 390 Z"',2)+
  coloringPart("path","parrot-body",'d="M 335 275 C 340 205 395 175 455 198 C 515 220 535 285 505 342 C 478 398 420 425 370 392 C 338 370 325 320 335 275 Z"')+
  coloringPart("path","parrot-wing",'d="M 365 275 C 400 240 465 255 480 310 C 480 355 435 392 390 375 C 360 355 350 305 365 275 Z"',2)+
  coloringPart("path","parrot-head",'d="M 390 205 C 390 158 425 125 468 132 C 515 140 540 185 522 225 C 505 265 458 278 422 252 C 402 240 390 225 390 205 Z"')+
  coloringPart("path","parrot-beak",'d="M 510 198 C 545 198 575 215 590 235 C 565 255 535 265 510 258 C 525 235 525 218 510 198 Z"')+
  coloringPart("circle","parrot-eye",'cx="470" cy="185" r="14"')+
  [[285,125,-25],[540,100,18],[265,405,15],[525,450,-20]].map(([x,y,a],i)=>coloringPart("path",`forest-leaf-${i}`,`d="M ${x-55} ${y} Q ${x} ${y-70} ${x+55} ${y} Q ${x} ${y+70} ${x-55} ${y} Z" transform="rotate(${a} ${x} ${y})"`,i<2?2:3)).join("")+
  coloringLine("path",'d="M 285 70 L 285 180 M 540 30 L 540 170 M 265 335 L 265 475 M 525 375 L 525 525" fill="none"',3)
)}
function sceneCastle(){return coloringScene(
  coloringPart("rect","castle-sky",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("path","castle-hill",'d="M 4 445 Q 200 380 400 450 T 796 420 L 796 596 L 4 596 Z"')+
  coloringPart("rect","castle-main",'x="225" y="245" width="350" height="250"')+
  coloringPart("rect","tower-left",'x="115" y="195" width="155" height="300"')+
  coloringPart("rect","tower-right",'x="530" y="195" width="155" height="300"')+
  coloringPart("path","roof-left",'d="M 85 195 L 193 75 L 300 195 Z"')+
  coloringPart("path","roof-right",'d="M 500 195 L 608 75 L 715 195 Z"')+
  coloringPart("path","gate",'d="M 350 495 L 350 385 Q 400 325 450 385 L 450 495 Z"')+
  coloringPart("rect","flag-left",'x="193" y="55" width="92" height="50"',2)+
  coloringPart("rect","flag-right",'x="608" y="55" width="92" height="50"',2)+
  [[160,255],[225,255],[575,255],[640,255],[280,300],[475,300]].map(([x,y],i)=>coloringPart("rect",`window-${i}`,`x="${x-20}" y="${y-25}" width="40" height="58" rx="18"`,i>3?3:2)).join("")+
  coloringLine("path",'d="M 225 345 L 575 345 M 155 385 L 230 385 M 570 385 L 645 385" fill="none"',3)+
  coloringPart("path","path",'d="M 350 596 Q 365 510 400 445 Q 435 510 470 596 Z"',2)
)}
function sceneFourSeasons(){return coloringScene(
  coloringPart("rect","season-sky",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("path","season-ground",'d="M 4 455 Q 190 420 390 465 T 796 440 L 796 596 L 4 596 Z"')+
  coloringPart("path","season-trunk",'d="M 345 510 Q 380 350 375 210 Q 420 255 445 205 Q 425 365 475 510 Z"')+
  coloringPart("path","spring-crown",'d="M 385 230 Q 245 250 210 165 Q 225 65 355 85 Q 430 125 385 230 Z"')+
  coloringPart("path","summer-crown",'d="M 395 230 Q 430 80 545 75 Q 675 95 620 220 Q 520 285 395 230 Z"')+
  coloringPart("path","autumn-crown",'d="M 405 240 Q 560 220 635 295 Q 670 415 535 425 Q 420 390 405 240 Z"')+
  coloringPart("path","winter-crown",'d="M 380 235 Q 335 385 225 420 Q 105 390 165 280 Q 250 210 380 235 Z"')+
  coloringPetals(280,145,"spring-flower",2)+
  coloringPart("circle","summer-fruit-a",'cx="515" cy="165" r="24"',2)+coloringPart("circle","summer-fruit-b",'cx="570" cy="215" r="24"',3)+
  [[500,310,-15],[575,355,20],[460,375,-30]].map(([x,y,a],i)=>coloringPart("path",`autumn-leaf-${i}`,`d="M ${x-28} ${y} Q ${x} ${y-38} ${x+28} ${y} Q ${x} ${y+38} ${x-28} ${y} Z" transform="rotate(${a} ${x} ${y})"`,i===2?3:2)).join("")+
  coloringStars([[205,310,17],[285,345,15],[160,365,13]],"snowflake",3)
)}
function sceneEcoCity(){return coloringScene(
  coloringPart("rect","city-sky",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("path","city-ground",'d="M 4 455 L 796 455 L 796 596 L 4 596 Z"')+
  coloringPart("rect","tower",'x="95" y="190" width="155" height="265" rx="8"')+
  coloringPart("rect","school",'x="285" y="275" width="235" height="180" rx="8"')+
  coloringPart("path","school-roof",'d="M 260 275 L 402 185 L 545 275 Z"')+
  coloringPart("rect","apartments",'x="565" y="135" width="145" height="320" rx="8"')+
  [[135,235],[205,235],[135,305],[205,305],[135,375],[205,375],[600,185],[670,185],[600,255],[670,255],[600,325],[670,325]].map(([x,y],i)=>coloringPart("rect",`city-window-${i}`,`x="${x-22}" y="${y-25}" width="44" height="50"`,i>5?2:1)).join("")+
  coloringPart("rect","school-door",'x="375" y="365" width="55" height="90" rx="12"')+
  coloringPart("circle","tree-crown",'cx="60" cy="410" r="55"',2)+coloringPart("rect","tree-trunk",'x="48" y="430" width="24" height="75"',2)+
  coloringLine("path",'d="M 240 520 L 280 470 L 330 520 H 270 L 300 480 M 275 462 h 26 M 300 480 l 28 -25 h 18" fill="none"',3)+
  coloringLine("circle",'cx="240" cy="520" r="34" fill="none"',3)+coloringLine("circle",'cx="330" cy="520" r="34" fill="none"',3)+
  coloringPart("path","solar-a",'d="M 100 190 L 125 135 L 245 135 L 225 190 Z"',2)+coloringPart("path","solar-b",'d="M 580 135 L 600 80 L 705 80 L 690 135 Z"',2)+
  coloringLine("path",'d="M 125 160 L 235 160 M 165 135 L 155 190 M 205 135 L 195 190 M 600 105 L 700 105 M 635 80 L 625 135 M 670 80 L 660 135" fill="none"',3)
)}
function sceneMandala(){
  const rings=[];
  for(let i=0;i<16;i++){
    const angle=i*Math.PI/8,cx=400+Math.cos(angle)*155,cy=300+Math.sin(angle)*155;
    rings.push(coloringPart("ellipse",`mandala-outer-${i}`,`cx="${cx.toFixed(1)}" cy="${cy.toFixed(1)}" rx="38" ry="82" transform="rotate(${i*22.5+90} ${cx.toFixed(1)} ${cy.toFixed(1)})"`,i%2?3:2));
  }
  for(let i=0;i<12;i++){
    const angle=i*Math.PI/6,cx=400+Math.cos(angle)*92,cy=300+Math.sin(angle)*92;
    rings.push(coloringPart("path",`mandala-inner-${i}`,`d="M 400 300 Q ${cx.toFixed(1)} ${cy.toFixed(1)} ${(400+Math.cos(angle+.28)*145).toFixed(1)} ${(300+Math.sin(angle+.28)*145).toFixed(1)} Q ${cx.toFixed(1)} ${cy.toFixed(1)} 400 300 Z"`,1));
  }
  return coloringScene(
    coloringPart("rect","mandala-bg",'x="4" y="4" width="792" height="592" rx="28"')+
    rings.join("")+coloringPart("circle","mandala-heart",'cx="400" cy="300" r="62"')+
    coloringStars([[400,300,34]],"mandala-star",3)
  );
}
function sceneEcosystem(){return coloringScene(
  coloringPart("rect","pond-sky",'x="4" y="4" width="792" height="592" rx="28"')+
  coloringPart("path","pond-bank",'d="M 4 390 Q 160 335 315 395 T 620 375 T 796 390 L 796 596 L 4 596 Z"')+
  coloringPart("ellipse","pond-water",'cx="405" cy="485" rx="310" ry="90"')+
  coloringPart("path","frog-leg-a",'d="M 350 425 C 300 405 265 430 245 475 C 275 485 315 478 365 455 Z"',2)+
  coloringPart("path","frog-leg-b",'d="M 460 425 C 510 405 550 430 568 475 C 535 488 495 478 448 455 Z"',2)+
  coloringPart("path","frog-body",'d="M 300 435 C 315 382 350 365 405 405 C 460 365 498 382 510 435 C 500 482 455 505 405 475 C 355 505 310 482 300 435 Z"')+
  coloringPart("circle","frog-eye-a",'cx="350" cy="385" r="34"')+coloringPart("circle","frog-eye-b",'cx="460" cy="385" r="34"')+
  coloringPart("path","lily-pad-a",'d="M 120 505 Q 205 430 280 510 Q 205 555 120 505 Z"',2)+
  coloringPart("path","lily-pad-b",'d="M 525 515 Q 610 435 690 510 Q 610 560 525 515 Z"',2)+
  coloringPart("path","dragonfly-body",'d="M 585 220 Q 600 300 585 365 Q 570 300 585 220 Z"',2)+
  [[545,250,-25],[625,250,25],[550,310,25],[620,310,-25]].map(([x,y,a],i)=>coloringPart("ellipse",`dragonfly-wing-${i}`,`cx="${x}" cy="${y}" rx="55" ry="22" transform="rotate(${a} ${x} ${y})"`,2)).join("")+
  coloringPart("circle","sun",'cx="115" cy="105" r="55"')+
  coloringPart("path","reed-a",'d="M 105 440 Q 75 320 105 210 Q 135 320 105 440 Z"',3)+coloringPart("path","reed-b",'d="M 160 430 Q 130 300 165 185 Q 195 310 160 430 Z"',3)+
  coloringLine("path",'d="M 105 310 L 65 270 M 160 325 L 205 270" fill="none"',3)
)}

const COLORING_REFINEMENTS=Object.freeze({
  butterfly:
    coloringLine("circle",'cx="385" cy="150" r="5" fill="#26344a" stroke="none"')+
    coloringLine("circle",'cx="415" cy="150" r="5" fill="#26344a" stroke="none"')+
    coloringLine("path",'d="M 375 250 Q 315 275 270 330 M 425 250 Q 485 275 530 330" fill="none"',2)+
    coloringLine("path",'d="M 372 300 L 428 300 M 368 345 L 432 345 M 375 390 L 425 390" fill="none"',2)+
    coloringLine("path",'d="M 255 190 Q 300 245 330 315 M 545 190 Q 500 245 470 315 M 285 355 Q 325 390 355 420 M 515 355 Q 475 390 445 420" fill="none"',2)+
    coloringLine("path",'d="M 95 430 l -18 -28 M 145 425 l 18 -30 M 645 435 l -15 -30 M 700 430 l 20 -28" fill="none"',3),
  autumn:
    coloringLine("path",'d="M 370 470 Q 385 390 382 305 M 425 470 Q 405 390 410 305" fill="none"')+
    coloringLine("path",'d="M 385 320 Q 320 270 275 235 M 410 300 Q 475 255 535 235" fill="none"',2)+
    coloringLine("path",'d="M 90 175 L 140 175 M 635 165 L 685 165 M 150 355 L 200 355 M 585 390 L 635 390" fill="none"',2)+
    coloringLine("ellipse",'cx="397" cy="402" rx="17" ry="25" fill="none"',2)+
    coloringLine("path",'d="M 350 505 q 18 -20 35 0 M 410 510 q 18 -22 38 0 M 365 350 q 20 -15 38 2" fill="none"',3),
  cake:
    coloringLine("ellipse",'cx="400" cy="492" rx="255" ry="24" fill="none"')+
    coloringLine("path",'d="M 235 445 Q 275 410 315 445 Q 355 410 395 445 Q 440 410 485 445 Q 525 410 565 445" fill="none"',2)+
    coloringLine("path",'d="M 325 245 H 475 M 270 340 H 530" fill="none"',2)+
    coloringLine("path",'d="M 382 115 L 418 135 M 382 145 L 418 165" fill="none"',3)+
    coloringLine("circle",'cx="340" cy="320" r="9" fill="none"',3)+coloringLine("circle",'cx="460" cy="320" r="9" fill="none"',3)+
    coloringLine("path",'d="M 285 420 l 12 9 M 350 432 l 12 -10 M 420 418 l 13 10 M 490 432 l 12 -10 M 535 410 l 12 9" fill="none"',3),
  ocean:
    coloringLine("path",'d="M 430 270 Q 455 285 475 270 M 375 200 Q 360 260 375 315" fill="none"')+
    coloringLine("path",'d="M 250 250 Q 290 215 330 250 Q 290 285 250 250 M 300 305 Q 335 275 365 305" fill="none"',2)+
    coloringLine("circle",'cx="732" cy="372" r="5" fill="#26344a" stroke="none"')+
    coloringLine("path",'d="M 728 398 Q 744 408 758 395" fill="none"',2)+
    coloringLine("path",'d="M 275 240 q 18 -18 36 0 M 305 280 q 18 -18 36 0 M 345 245 q 18 -18 36 0" fill="none"',3)+
    coloringLine("path",'d="M 60 545 Q 115 520 170 545 M 625 545 Q 680 520 740 545" fill="none"',3),
  garden:
    coloringLine("path",'d="M 175 405 C 175 340 265 340 265 405 C 265 455 205 455 205 410 C 205 382 240 382 240 407" fill="none"')+
    coloringLine("circle",'cx="394" cy="402" r="5" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="425" cy="402" r="5" fill="#26344a" stroke="none"')+
    coloringLine("path",'d="M 393 427 Q 410 440 428 426 M 565 292 Q 545 265 530 260 M 635 292 Q 655 265 670 260" fill="none"',2)+
    coloringLine("path",'d="M 525 365 L 485 345 M 525 410 L 480 420 M 675 365 L 715 345 M 675 410 L 720 420 M 552 333 q 48 30 96 0 M 550 438 q 50 -28 100 0" fill="none"',3),
  windmill:
    coloringLine("path",'d="M 380 250 H 455 V 320 H 380 Z M 417 250 V 320 M 380 285 H 455" fill="none"')+
    coloringLine("path",'d="M 328 65 L 414 210 M 625 135 L 445 220 M 500 410 L 422 245 M 200 310 L 392 220" fill="none"',2)+
    coloringLine("path",'d="M 325 82 L 345 68 M 605 135 L 615 160 M 500 388 L 475 402 M 218 304 L 230 330" fill="none"',3)+
    coloringLine("path",'d="M 337 345 H 505 M 330 390 H 515 M 365 300 v 45 M 455 345 v 45" fill="none"',3)+
    coloringLine("path",'d="M 65 520 Q 130 500 195 520 M 545 520 Q 620 495 700 520" fill="none"',2),
  rocket:
    coloringLine("path",'d="M 335 330 H 465 M 352 385 H 448" fill="none"')+
    coloringLine("circle",'cx="400" cy="225" r="32" fill="none"',2)+
    coloringLine("path",'d="M 383 225 Q 400 240 417 225" fill="none"',3)+
    coloringLine("circle",'cx="382" cy="210" r="4" fill="#26344a" stroke="none"',3)+coloringLine("circle",'cx="418" cy="210" r="4" fill="#26344a" stroke="none"',3)+
    coloringLine("path",'d="M 350 170 L 370 182 M 450 170 L 430 182 M 375 455 L 400 510 L 425 455" fill="none"',2)+
    coloringLine("circle",'cx="350" cy="365" r="7" fill="none"',3)+coloringLine("circle",'cx="450" cy="365" r="7" fill="none"',3),
  rainforest:
    coloringLine("path",'d="M 385 285 Q 415 315 445 345 M 375 315 Q 410 345 440 370" fill="none"',2)+
    coloringLine("path",'d="M 510 225 L 545 238 M 400 395 L 392 430 M 445 395 L 448 430" fill="none"')+
    coloringLine("path",'d="M 392 430 l -20 10 M 392 430 l 18 10 M 448 430 l -18 10 M 448 430 l 20 10" fill="none"',2)+
    coloringLine("path",'d="M 115 80 Q 135 165 110 250 M 680 65 Q 700 165 675 260" fill="none"',3)+
    coloringLine("path",'d="M 465 207 Q 478 215 488 204 M 520 228 L 548 238 M 105 150 q 35 20 68 0 M 642 145 q 38 22 75 0" fill="none"',3),
  castle:
    coloringLine("path",'d="M 365 400 V 490 M 400 365 V 490 M 435 400 V 490" fill="none"')+
    coloringLine("path",'d="M 240 280 H 330 M 470 280 H 560 M 280 370 H 350 M 450 370 H 525 M 140 330 H 245 M 555 330 H 665" fill="none"',2)+
    coloringLine("path",'d="M 160 255 V 290 M 225 255 V 290 M 575 255 V 290 M 640 255 V 290" fill="none"',2)+
    coloringLine("path",'d="M 193 55 V 25 M 608 55 V 25 M 193 80 H 285 M 608 80 H 700" fill="none"',3)+
    coloringLine("path",'d="M 250 410 h 55 M 495 410 h 55 M 135 445 h 55 M 610 445 h 55" fill="none"',3)+
    coloringLine("path",'d="M 365 535 Q 400 515 435 535 M 350 570 Q 400 545 450 570" fill="none"',3),
  "four-seasons":
    coloringLine("path",'d="M 395 230 Q 325 180 265 135 M 400 230 Q 485 175 565 135 M 405 250 Q 505 300 565 355 M 385 250 Q 300 315 225 355" fill="none"')+
    coloringLine("path",'d="M 495 165 l 18 -28 M 548 215 l 20 -25" fill="none"',2)+
    coloringLine("path",'d="M 500 310 l 45 45 M 545 310 l -45 45" fill="none"',3)+
    coloringLine("path",'d="M 170 310 h 70 M 205 275 v 70 M 180 285 l 50 50 M 230 285 l -50 50" fill="none"',3),
  "eco-city":
    coloringLine("circle",'cx="402" cy="240" r="22" fill="none"')+coloringLine("path",'d="M 402 240 L 402 225 M 402 240 L 415 248" fill="none"')+
    coloringLine("path",'d="M 120 160 H 235 M 160 135 L 150 190 M 205 135 L 195 190 M 600 105 H 700 M 635 80 L 625 135 M 670 80 L 660 135" fill="none"',2)+
    coloringLine("circle",'cx="285" cy="495" r="10" fill="none"',3)+
    coloringLine("path",'d="M 15 545 H 160 M 360 545 H 520 M 625 545 H 780" fill="none"',3),
  mandala:
    coloringLine("circle",'cx="400" cy="300" r="118" fill="none"',2)+coloringLine("circle",'cx="400" cy="300" r="205" fill="none"',3)+
    coloringLine("path",'d="M 400 95 V 505 M 195 300 H 605 M 255 155 L 545 445 M 545 155 L 255 445" fill="none"',3)+
    coloringLine("circle",'cx="400" cy="300" r="18" fill="none"',3),
  ecosystem:
    coloringLine("circle",'cx="350" cy="385" r="7" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="460" cy="385" r="7" fill="#26344a" stroke="none"')+
    coloringLine("path",'d="M 365 438 Q 405 465 445 438" fill="none"')+
    coloringLine("path",'d="M 320 465 l -35 28 M 340 475 l -20 35 M 470 465 l 35 28 M 450 475 l 20 35" fill="none"',2)+
    coloringLine("path",'d="M 570 255 H 600 M 568 280 H 602 M 570 305 H 600 M 220 500 Q 405 540 585 500" fill="none"',3)
});
function coloringRefined(id,svg){
  const details=COLORING_REFINEMENTS[id]||"";
  return svg.replace("\n    </g>\n  </svg>",`\n      <g class="coloring-recognition" data-scene="${id}">${details}</g>\n    </g>\n  </svg>`);
}

const COLORING_PAGES=Object.freeze([
  {id:"butterfly",theme:"animals",years:[1,2],title:{nl:"Blije vlinder",en:"Happy butterfly"},svg:coloringRefined("butterfly",sceneButterfly())},
  {id:"autumn",theme:"seasons",years:[1,2],title:{nl:"Herfstboom",en:"Autumn tree"},svg:coloringRefined("autumn",sceneAutumn())},
  {id:"cake",theme:"culture",years:[1,2],title:{nl:"Feesttaart",en:"Party cake"},svg:coloringRefined("cake",sceneCake())},
  {id:"farmyard",theme:"animals",years:[1,2],title:{nl:"Boerderijvrienden",en:"Farmyard friends"},svg:coloringRefined("farmyard",sceneFarmyard())},
  {id:"rainbow-weather",theme:"seasons",years:[1,2],title:{nl:"Regenboogweer",en:"Rainbow weather"},svg:coloringRefined("rainbow-weather",sceneRainbowWeather())},
  {id:"construction-site",theme:"science",years:[1,2],title:{nl:"Grote graafmachine",en:"Big excavator"},svg:coloringRefined("construction-site",sceneConstruction())},
  {id:"forest-picnic",theme:"nature",years:[1,2],title:{nl:"Picknick in het bos",en:"Forest picnic"},svg:coloringRefined("forest-picnic",sceneForestPicnic())},
  {id:"ocean",theme:"animals",years:[3,4],title:{nl:"Vrienden in zee",en:"Ocean friends"},svg:coloringRefined("ocean",sceneOcean())},
  {id:"garden",theme:"nature",years:[3,4],title:{nl:"Kleine tuindieren",en:"Little garden animals"},svg:coloringRefined("garden",sceneGarden())},
  {id:"windmill",theme:"culture",years:[3,4],title:{nl:"Molen in de polder",en:"Windmill in the polder"},svg:coloringRefined("windmill",sceneWindmill())},
  {id:"dinosaur-valley",theme:"science",years:[3,4],title:{nl:"Dinosaurusvallei",en:"Dinosaur valley"},svg:coloringRefined("dinosaur-valley",sceneDinosaurValley())},
  {id:"spring-nest",theme:"seasons",years:[3,4],title:{nl:"Vogelnest in de lente",en:"Spring bird nest"},svg:coloringRefined("spring-nest",sceneSpringNest())},
  {id:"fire-station",theme:"culture",years:[3,4],title:{nl:"Brandweerkazerne",en:"Fire station"},svg:coloringRefined("fire-station",sceneFireStation())},
  {id:"bee-meadow",theme:"nature",years:[3,4],title:{nl:"Bijen in de bloemenwei",en:"Bees in the meadow"},svg:coloringRefined("bee-meadow",sceneBeeMeadow())},
  {id:"rocket",theme:"science",years:[5,6],title:{nl:"Raket door de ruimte",en:"Rocket through space"},svg:coloringRefined("rocket",sceneRocket())},
  {id:"rainforest",theme:"nature",years:[5,6],title:{nl:"Regenwoud",en:"Rainforest"},svg:coloringRefined("rainforest",sceneRainforest())},
  {id:"castle",theme:"culture",years:[5,6],title:{nl:"Kasteel en dorp",en:"Castle and village"},svg:coloringRefined("castle",sceneCastle())},
  {id:"coral-reef",theme:"animals",years:[5,6],title:{nl:"Koraalrif",en:"Coral reef"},svg:coloringRefined("coral-reef",sceneCoralReef())},
  {id:"mountain-camp",theme:"seasons",years:[5,6],title:{nl:"Bergkamp",en:"Mountain camp"},svg:coloringRefined("mountain-camp",sceneMountainCamp())},
  {id:"robot-workshop",theme:"science",years:[5,6],title:{nl:"Robotwerkplaats",en:"Robot workshop"},svg:coloringRefined("robot-workshop",sceneRobotWorkshop())},
  {id:"canal-street",theme:"culture",years:[5,6],title:{nl:"Straat langs de gracht",en:"Canal street"},svg:coloringRefined("canal-street",sceneCanalStreet())},
  {id:"four-seasons",theme:"seasons",years:[7,8],title:{nl:"Boom van vier seizoenen",en:"Four seasons tree"},svg:coloringRefined("four-seasons",sceneFourSeasons())},
  {id:"eco-city",theme:"science",years:[7,8],title:{nl:"Duurzame stad",en:"Sustainable city"},svg:coloringRefined("eco-city",sceneEcoCity())},
  {id:"mandala",theme:"culture",years:[7,8],title:{nl:"Geometrische mandala",en:"Geometric mandala"},svg:coloringRefined("mandala",sceneMandala())},
  {id:"ecosystem",theme:"nature",years:[7,8],title:{nl:"Leven rond de vijver",en:"Life around the pond"},svg:coloringRefined("ecosystem",sceneEcosystem())},
  {id:"solar-observatory",theme:"science",years:[7,8],title:{nl:"Sterrenwacht",en:"Solar observatory"},svg:coloringRefined("solar-observatory",sceneSolarObservatory())},
  {id:"savanna-web",theme:"animals",years:[7,8],title:{nl:"Leven op de savanne",en:"Life on the savanna"},svg:coloringRefined("savanna-web",sceneSavannaWeb())},
  {id:"japanese-garden",theme:"culture",years:[7,8],title:{nl:"Japanse tuin",en:"Japanese garden"},svg:coloringRefined("japanese-garden",sceneJapaneseGarden())}
]);

function coloringPagesFor(yearGroup,theme="all"){
  const year=Math.max(1,Math.min(8,Number(yearGroup)||4));
  return COLORING_PAGES.filter(page=>year>=page.years[0]&&year<=page.years[1]&&(theme==="all"||page.theme===theme));
}
function coloringBrushWidth(size,pressure,pointerType){
  const base=Math.max(2,Math.min(18,Number(size)||6));
  return pointerType==="pen"&&pressure>0?base*(.45+pressure*1.2):base;
}
function coloringSafeColor(value,fallback=COLORING_COLORS[1]){
  return /^#[0-9a-f]{6}$/i.test(String(value||""))?String(value).toLowerCase():fallback;
}
let COLORING_INK_ID=0;
function coloringInkOverlay(svg,className){
  const overlay=svg.cloneNode(true);overlay.setAttribute("class",`coloring-ink-svg ${className}`);
  const filterId=`coloring-ink-filter-${++COLORING_INK_ID}`,svgNS="http://www.w3.org/2000/svg";
  const defs=document.createElementNS(svgNS,"defs"),filter=document.createElementNS(svgNS,"filter");
  filter.setAttribute("id",filterId);filter.setAttribute("x","-4%");filter.setAttribute("y","-4%");filter.setAttribute("width","108%");filter.setAttribute("height","108%");filter.setAttribute("color-interpolation-filters","sRGB");
  const alpha=document.createElementNS(svgNS,"feColorMatrix");
  alpha.setAttribute("in","SourceGraphic");alpha.setAttribute("result","ink-alpha");alpha.setAttribute("type","matrix");
  alpha.setAttribute("values","0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -.2126 -.7152 -.0722 1 0");filter.appendChild(alpha);
  let mask="ink-alpha";
  if(className==="coloring-ink-halo"){
    const spread=document.createElementNS(svgNS,"feMorphology");spread.setAttribute("in",mask);spread.setAttribute("operator","dilate");spread.setAttribute("radius","1.8");spread.setAttribute("result","ink-spread");filter.appendChild(spread);mask="ink-spread";
  }
  const flood=document.createElementNS(svgNS,"feFlood"),composite=document.createElementNS(svgNS,"feComposite");
  flood.setAttribute("flood-color",className==="coloring-ink-halo"?"#ffffff":"#1c293d");flood.setAttribute("result","ink-color");
  composite.setAttribute("in","ink-color");composite.setAttribute("in2",mask);composite.setAttribute("operator","in");
  filter.append(flood,composite);defs.appendChild(filter);overlay.prepend(defs);
  overlay.querySelectorAll(".coloring-detail[stroke=\"none\"]").forEach(node=>node.classList.add("coloring-ink-dot"));
  overlay.querySelectorAll("[data-fillable]").forEach(node=>{
    node.removeAttribute("data-fillable");node.removeAttribute("data-part");node.setAttribute("fill","#fff");
  });
  const drawing=overlay.querySelector(".coloring-svg-lines");if(drawing)drawing.setAttribute("filter",`url(#${filterId})`);
  return overlay;
}

function mountColoring(root,initState,opts={}){
  const yearGroup=Math.max(1,Math.min(8,Number(initState&&initState.yearGroup)||4));
  const level=Math.max(1,Math.min(3,Number(initState&&initState.level)||2));
  const savedTool=initState&&initState.tool==="pencil"?"brush":initState&&initState.tool;
  let tool=["brush","bucket","eraser"].includes(savedTool)?savedTool:"brush";
  let color=coloringSafeColor(initState&&initState.color);
  let size=[4,7,12].includes(Number(initState&&initState.size))?Number(initState.size):7;
  let theme=COLORING_THEME_KEYS[initState&&initState.theme]?initState.theme:"all";
  let pageId=String(initState&&initState.pageId||"");
  let fills=initState&&initState.pageId===pageId&&initState.fills&&typeof initState.fills==="object"?{...initState.fills}:{};
  let completed=!!(initState&&initState.completed),restoreInk=initState&&initState.ink;

  root.innerHTML=`<div class="coloring-app">
    <div class="coloring-choices">
      <label><span class="coloring-theme-label"></span><select class="coloring-theme"></select></label>
      <label><span class="coloring-page-label"></span><select class="coloring-page"></select></label>
      <span class="coloring-fit"></span>
    </div>
    <div class="coloring-tools">
      <div class="coloring-tool-buttons"></div>
      <div class="coloring-palette"></div>
      <label class="coloring-custom"><span></span><input type="color"></label>
      <div class="coloring-sizes"></div>
      <button class="coloring-reset" type="button">↺</button>
      <button class="coloring-done tbtn" type="button"></button>
    </div>
    <div class="coloring-stage"><div class="coloring-paper" role="img"><div class="coloring-art"></div><canvas width="800" height="600"></canvas><div class="coloring-ink" aria-hidden="true"></div></div></div>
    <div class="coloring-hint" aria-live="polite"></div>
  </div>`;
  const app=root.querySelector(".coloring-app"),themeSel=root.querySelector(".coloring-theme"),pageSel=root.querySelector(".coloring-page");
  const art=root.querySelector(".coloring-art"),inkHost=root.querySelector(".coloring-ink"),paper=root.querySelector(".coloring-paper"),canvas=root.querySelector("canvas"),ctx=canvas.getContext("2d");
  const toolHost=root.querySelector(".coloring-tool-buttons"),palette=root.querySelector(".coloring-palette"),sizes=root.querySelector(".coloring-sizes");
  const custom=root.querySelector(".coloring-custom input"),reset=root.querySelector(".coloring-reset"),done=root.querySelector(".coloring-done"),hint=root.querySelector(".coloring-hint");
  const TOOLS=[["brush","🖌️","colorToolBrush"],["bucket","🪣","colorToolBucket"],["eraser","🧽","eraser"]];

  TOOLS.forEach(([id,icon])=>{const button=document.createElement("button"),symbol=document.createElement("span"),label=document.createElement("span");button.type="button";button.dataset.tool=id;symbol.className="coloring-tool-icon";symbol.textContent=icon;symbol.setAttribute("aria-hidden","true");label.className="coloring-tool-label";button.append(symbol,label);button.onclick=()=>{tool=id;refreshTools()};toolHost.appendChild(button)});
  COLORING_COLORS.forEach((value,index)=>{const button=document.createElement("button");button.type="button";button.className="coloring-color";button.dataset.color=value;button.dataset.index=index+1;const dot=document.createElement("i");dot.style.background=value;button.appendChild(dot);button.onclick=()=>{color=value;custom.value=value;if(tool==="eraser")tool="brush";refreshTools()};palette.appendChild(button)});
  [4,7,12].forEach(value=>{const button=document.createElement("button");button.type="button";button.className="coloring-size";button.dataset.size=value;const dot=document.createElement("i");dot.style.width=dot.style.height=(value+5)+"px";button.appendChild(dot);button.onclick=()=>{size=value;refreshTools()};sizes.appendChild(button)});
  custom.value=color;custom.oninput=()=>{color=coloringSafeColor(custom.value,color);if(tool==="eraser")tool="brush";refreshTools()};

  function pageTitle(page){return page.title[LANG]||page.title.nl}
  function eligibleThemes(){return [...new Set(coloringPagesFor(yearGroup).map(page=>page.theme))]}
  function currentPages(){return coloringPagesFor(yearGroup,theme)}
  function rebuildThemeOptions(){
    const previous=theme;themeSel.replaceChildren();
    const all=new Option(T("colorThemeAll"),"all");themeSel.add(all);
    eligibleThemes().forEach(id=>themeSel.add(new Option(T(COLORING_THEME_KEYS[id]),id)));
    theme=themeSel.querySelector(`option[value="${previous}"]`)?previous:"all";themeSel.value=theme;
  }
  function rebuildPageOptions(prefer=pageId){
    const pages=currentPages();pageSel.replaceChildren();
    pages.forEach(page=>pageSel.add(new Option(pageTitle(page),page.id)));
    pageId=pages.some(page=>page.id===prefer)?prefer:(pages[0]&&pages[0].id)||"";pageSel.value=pageId;
  }
  function clearInk(){ctx.clearRect(0,0,canvas.width,canvas.height)}
  function loadInk(url){
    clearInk();if(!url)return;
    const image=new Image();image.onload=()=>{clearInk();ctx.drawImage(image,0,0,canvas.width,canvas.height)};image.src=url;
  }
  function renderPage(keepState){
    const page=COLORING_PAGES.find(item=>item.id===pageId)||currentPages()[0];if(!page)return;
    pageId=page.id;art.innerHTML=page.svg;
    const svg=art.querySelector("svg");paper.setAttribute("aria-label",pageTitle(page));
    svg.querySelectorAll("[data-level]").forEach(node=>node.toggleAttribute("hidden",Number(node.dataset.level)>level));
    if(!keepState){fills={};completed=false;restoreInk=null;clearInk()}
    svg.querySelectorAll("[data-fillable][data-part]").forEach(node=>{
      const saved=coloringSafeColor(fills[node.dataset.part],"");if(saved)node.setAttribute("fill",saved);
    });
    inkHost.replaceChildren(coloringInkOverlay(svg,"coloring-ink-halo"),coloringInkOverlay(svg,"coloring-ink-overlay"));
    if(keepState&&restoreInk){loadInk(restoreInk);restoreInk=null}
    refreshTools();updateTexts();
  }
  function updateTexts(){
    root.querySelector(".coloring-theme-label").textContent=T("colorTheme");
    root.querySelector(".coloring-page-label").textContent=T("colorPage");
    root.querySelector(".coloring-fit").textContent=T("colorProfile").replace("{year}",yearGroup).replace("{level}",level);
    toolHost.setAttribute("role","toolbar");toolHost.setAttribute("aria-label",T("penExtras"));palette.setAttribute("role","group");palette.setAttribute("aria-label",T("paletteColors"));sizes.setAttribute("role","group");sizes.setAttribute("aria-label",T("penSize"));
    TOOLS.forEach(([id,,key])=>{const button=toolHost.querySelector(`[data-tool="${id}"]`),text=T(key);button.title=text;button.setAttribute("aria-label",text);button.querySelector(".coloring-tool-label").textContent=text});
    palette.querySelectorAll("button").forEach(button=>button.setAttribute("aria-label",`${T("penColor")} ${button.dataset.index}`));
    custom.parentElement.querySelector("span").textContent=T("customColor");
    reset.title=T("colorReset");reset.setAttribute("aria-label",T("colorReset"));
    done.textContent=completed?"✓ "+T("colorFinished"):T("colorDone");
    hint.textContent=T(tool==="bucket"?"colorBucketHint":tool==="eraser"?"colorEraserHint":"colorBrushHint");
    const selected=pageId;rebuildPageOptions(selected);
  }
  function refreshTools(){
    toolHost.querySelectorAll("button").forEach(button=>{const on=button.dataset.tool===tool;button.classList.toggle("on",on);button.setAttribute("aria-pressed",String(on))});
    palette.querySelectorAll("button").forEach(button=>button.classList.toggle("on",button.dataset.color===color&&tool!=="eraser"));
    sizes.querySelectorAll("button").forEach(button=>{button.classList.toggle("on",Number(button.dataset.size)===size);button.title=T("penSize")});
    app.dataset.tool=tool;canvas.style.pointerEvents=tool==="bucket"?"none":"auto";art.style.pointerEvents=tool==="bucket"?"auto":"none";
    hint.textContent=T(tool==="bucket"?"colorBucketHint":tool==="eraser"?"colorEraserHint":"colorBrushHint");
  }
  themeSel.onchange=()=>{theme=themeSel.value;rebuildPageOptions("");renderPage(false)};
  pageSel.onchange=()=>{pageId=pageSel.value;renderPage(false)};
  art.addEventListener("click",event=>{
    if(tool!=="bucket")return;const part=event.target.closest("[data-fillable][data-part]");if(!part||part.hasAttribute("hidden"))return;
    part.setAttribute("fill",color);fills[part.dataset.part]=color;completed=false;updateTexts();
  });

  const point=event=>{const rect=canvas.getBoundingClientRect();return{x:(event.clientX-rect.left)*canvas.width/rect.width,y:(event.clientY-rect.top)*canvas.height/rect.height}};
  let drawing=false,last=null,mid=null;
  function brushSegment(next,event){
    const width=coloringBrushWidth(size,event.pressure,event.pointerType),erase=tool==="eraser";
    ctx.save();ctx.globalCompositeOperation=erase?"destination-out":"source-over";ctx.strokeStyle=color;ctx.globalAlpha=erase?1:.72;ctx.lineCap="round";ctx.lineJoin="round";ctx.lineWidth=erase?width*3.5:width;
    const nextMid={x:(last.x+next.x)/2,y:(last.y+next.y)/2};ctx.beginPath();ctx.moveTo(mid?mid.x:last.x,mid?mid.y:last.y);ctx.quadraticCurveTo(last.x,last.y,nextMid.x,nextMid.y);ctx.stroke();
    ctx.restore();last=next;mid=nextMid;
  }
  canvas.addEventListener("pointerdown",event=>{if(tool==="bucket"||(event.pointerType==="mouse"&&event.button!==0))return;event.preventDefault();canvas.setPointerCapture(event.pointerId);drawing=true;last=point(event);mid=null;brushSegment({x:last.x+.01,y:last.y+.01},event);completed=false;updateTexts()});
  canvas.addEventListener("pointermove",event=>{if(!drawing)return;(event.getCoalescedEvents?event.getCoalescedEvents():[event]).forEach(sample=>brushSegment(point(sample),sample))});
  const stop=()=>{drawing=false;last=mid=null};canvas.addEventListener("pointerup",stop);canvas.addEventListener("pointercancel",stop);
  reset.onclick=()=>{fills={};completed=false;clearInk();renderPage(false)};
  done.onclick=()=>{completed=true;updateTexts();if(typeof opts.onProgress==="function")opts.onProgress({attempts:1,correct:1,stars:1,detail:{question:pageTitle(COLORING_PAGES.find(page=>page.id===pageId)),answer:T("colorFinished"),correct:true}})};
  document.addEventListener("langchange",()=>{rebuildThemeOptions();updateTexts();renderPage(true)});

  rebuildThemeOptions();rebuildPageOptions(pageId);renderPage(true);
  return{getState:()=>{
    let ink=null;try{ink=canvas.toDataURL("image/png")}catch(_){/* een leeg canvas blijft gewoon herstelbaar */}
    return{theme,pageId,fills:{...fills},ink,tool,color,size,completed,yearGroup,level,managedLearningLevel:!!(initState&&initState.managedLearningLevel)};
  }};
}