.kids-catalogue-card.kids-paint{background:#ffe2ed}
.kids-catalogue-card.kids-drive{background:#d9eefc}
html[data-theme] .kids-catalogue-card.kids-paint{background:var(--card-b)}
html[data-theme] .kids-catalogue-card.kids-drive{background:var(--card-d)}
.creative-dialog h2:focus{outline:none}
.creative-dialog{max-width:960px}
.creative-hint{margin:0 0 16px;line-height:1.5}
.creative-note{font-size:13px;line-height:1.5;margin:12px 0 0;color:var(--muted,#536657)}
.creative-button{min-height:44px;padding:9px 14px;background:var(--surface,#fff);color:var(--ink,#253044);border:2px solid var(--ink,#253044);border-radius:12px;font:inherit;font-weight:700;cursor:pointer}
.creative-button[aria-pressed=true]{background:var(--forest,#205b43);color:var(--button-ink,#fff);box-shadow:0 3px 0 var(--ink,#253044)}
.creative-button:disabled{opacity:.4;cursor:default}
.creative-dialog button:focus-visible,.paint-size select:focus-visible{outline:3px solid #de7300;outline-offset:3px}

/* Matching vector icons and a consistent grid keep the paint controls easy to scan. */
.creative-dialog[data-game=paint]{--paint-border:#d5ded7;--paint-accent:#205b43;--paint-ink:#203b30;background:var(--surface,#fffdf7);color:var(--ink,#203b30);padding:24px}
.creative-dialog[data-game=paint] .dialog-head{align-items:center;margin-bottom:4px}
.creative-dialog[data-game=paint] h2{display:flex;align-items:center;gap:12px}
.creative-dialog[data-game=paint] h2 .paint-icon{width:32px;height:32px;color:var(--forest,var(--paint-accent))}
.creative-dialog[data-game=paint] .creative-hint{color:var(--muted,#607369);font-size:14px;margin-bottom:20px}
.paint-icon{display:block;width:24px;height:24px;flex-shrink:0;pointer-events:none}
.paint-section{margin-bottom:16px}
.paint-section h3,.paint-size label{font-size:12px;font-weight:750;line-height:1.4;letter-spacing:.025em;color:var(--muted,#607369);margin:0 0 8px}
.paint-pages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.paint-pages .creative-button,.paint-tools .creative-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;border:1px solid var(--paint-border);background:#fff;color:var(--paint-ink);box-shadow:none;font-size:12px;font-weight:700;line-height:1.2;padding:10px 6px}
.paint-pages .creative-button{min-height:78px}
.paint-pages .paint-icon{width:32px;height:32px}
.paint-pages .creative-button[aria-pressed=true],.paint-tools .creative-button[aria-pressed=true]{border-color:var(--paint-accent);background:#e8f3eb;color:var(--paint-accent);box-shadow:inset 0 0 0 1px var(--paint-accent)}
.paint-pages .creative-button:hover,.paint-tools .creative-button:hover{border-color:var(--paint-accent);background:#f1f7f2}
.paint-tool-section{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:end;gap:16px}
.paint-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.paint-tools .creative-button{min-height:64px}
.paint-size label{display:flex;flex-direction:column;gap:8px;margin:0}
.paint-size select{width:100%;min-height:64px;border:1px solid var(--paint-border);border-radius:12px;background:#fff;color:var(--paint-ink);font:inherit;font-size:14px;letter-spacing:normal;padding:10px;cursor:pointer}
.paint-colours{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:10px}
.paint-colours .creative-button{padding:0;min-width:0;min-height:44px;border:1px solid #25304440;border-radius:50%;box-shadow:inset 0 -2px 0 #0000000d;position:relative;aspect-ratio:1;max-height:48px;width:100%;max-width:48px;justify-self:center}
.paint-colours [aria-pressed=true]{outline:2px solid var(--paint-accent);outline-offset:3px}
.paint-colours [aria-pressed=true]::after{content:'✓';position:absolute;inset:0;margin:auto;width:22px;height:22px;line-height:22px;border-radius:50%;color:#253044;background:#fff;font-size:15px;font-weight:900;text-align:center;box-shadow:0 0 0 1px #25304430}
.paint-workspace{padding:16px;border:1px solid var(--paint-border);border-radius:16px;background:#eef1eb}
.paint-paper{position:relative;width:100%;max-width:800px;margin:0 auto;border:1px solid #cbd4ce;overflow:hidden;background:#fff;box-shadow:0 2px 8px #203b3010}
.paint-paper canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
.paint-paper .paint-preview{position:absolute;inset:0;pointer-events:none}
.paint-actions{display:flex;gap:8px;margin-top:16px}
.paint-actions .creative-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--paint-border);background:#fff;color:var(--paint-ink);font-size:13px;padding:10px 14px}
.paint-actions .paint-icon{width:19px;height:19px}
.paint-actions .creative-button:last-child{margin-left:auto;background:var(--paint-accent);border-color:var(--paint-accent);color:#fff}
.creative-dialog[data-game=paint] .creative-note{color:var(--muted,#607369);font-size:12px}

.creative-dialog[data-game=drive] h2{display:flex;align-items:center;gap:12px}
.creative-dialog[data-game=drive] h2 .paint-icon{width:32px;height:32px}
.drive-cars{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.drive-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.drive-stages .creative-button{font-size:13px;padding:9px 6px}
.drive-pace{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700}
.drive-pace select{min-height:44px;border:2px solid var(--ink);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;padding:6px 12px}
.drive-stage-note{font-size:13px;font-weight:700;color:var(--muted);margin:10px 0}
@media(max-width:600px){.drive-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
.drive-cars .creative-button,.drive-reset{display:inline-flex;align-items:center;gap:8px}
.petrol-button .paint-icon{width:30px;height:30px}
.drive-world{display:block;width:100%;height:auto;border:2px solid #253044;border-radius:16px;background:#d9f2fc}
.drive-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.drive-controls output{font-size:24px;font-weight:800;min-width:80px;font-variant-numeric:tabular-nums}
.drive-stats{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;max-width:100%}
.drive-controls .drive-stars{display:inline-flex;align-items:center;gap:6px;min-width:60px;padding:6px 10px;border:2px solid #e9c96b;border-radius:14px;background:#fff2c7;color:#70531c;font-size:20px}
.drive-stars .paint-icon{width:23px;height:23px;fill:#ffcf58}
.petrol-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:78px;min-width:190px;border:3px solid #253044;border-radius:22px;background:#ffdc45;color:#253044;box-shadow:0 5px 0 #253044;font:inherit;font-size:22px;font-weight:800;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.petrol-button.is-driving{transform:translateY(4px);box-shadow:0 1px 0 #253044;background:#9fe29b}
@media(min-width:701px) and (min-height:700px){.paint-paper{width:min(100%,max(480px,calc((100dvh - 615px)*1.538)))}}
/* Two wide cards keep the four-column kids catalogue in full rows. */
@media(min-width:1001px){.kids-discover .kids-catalogue-card:is(.kids-paint,.kids-drive){grid-column:span 2}}
@media(max-width:700px){
    .creative-dialog[data-game=paint]{padding:16px}
    .creative-dialog[data-game=paint] .creative-hint{margin-bottom:16px}
    .paint-pages{grid-template-columns:repeat(3,minmax(0,1fr))}
    .paint-pages .creative-button{flex-direction:row;min-height:60px;gap:8px;font-size:11px;padding:8px}
    .paint-pages .paint-icon{width:26px;height:26px}
    .paint-pages .creative-button span{max-width:60px;text-align:left}
    .paint-tool-section{grid-template-columns:1fr;gap:10px}
    .paint-tools{gap:6px}
    .paint-tools .creative-button{font-size:11px;padding:8px 2px}
    .paint-size label{flex-direction:row;align-items:center;justify-content:flex-end;gap:10px}
    .paint-size select{width:110px;min-height:44px;padding:6px 10px}
    .paint-colours .creative-button{max-width:44px;max-height:44px}
    .paint-workspace{padding:8px;border-radius:12px}
    .paint-actions{gap:6px}
    .paint-actions .creative-button{gap:6px;font-size:11px;padding:8px}
    .paint-actions .paint-icon{width:17px;height:17px}
}
@media(max-width:600px){.creative-dialog{padding:15px}.creative-button{font-size:13px;padding:8px 10px}.drive-controls{gap:12px}.petrol-button{min-width:155px;flex:1}.drive-reset{margin-left:auto}.creative-hint{font-size:14px}.drive-world{aspect-ratio:1.45;object-fit:cover;object-position:25%}}
@media(max-width:360px){.paint-tools{grid-template-columns:repeat(3,minmax(0,1fr))}.paint-pages .creative-button{flex-direction:column;gap:5px}.paint-pages .creative-button span{max-width:none;text-align:center}.paint-colours{gap:8px}.paint-actions .creative-button{flex-direction:column;gap:4px;flex:1}}