/* The approved 1448 × 1086 art is preserved at its original aspect ratio.
   Native controls sit on the illustrated controls, not on approximate redraws.
   Their labels remain in the DOM for assistive technology and translations. */
.color-picker-art, .color-picker-label-art, .pink-swatch-reset { display: none; }
.color-picker-extra-panel { display: none; }
.color-picker-extra-panel:has(#character-palette:not([hidden]), #extra-colors:not([hidden])) { display: block; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .color-picker-return {
    display: block; width: 100%; min-height: 56px; margin: 20px 0 0;
    border: 4px solid white; border-radius: 30px; background: #f7fbff;
    color: #18336e; font-family: 'Fredoka', sans-serif; font-size: 22px; font-weight: 700;
}
.coloring-studio-modal.touch-studio [data-open-tray="colors"] .studio-tool-drawer:has(.is-artwork-ready) {
    background: #cbdcff; border: 0; border-radius: 24px;
    box-shadow: 0 18px 60px #24387944;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray:has(.is-artwork-ready) { padding: 0; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray:has(.is-artwork-ready)::after { display: none; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .color-picker-design.is-artwork-ready {
    position: relative; width: 100%; aspect-ratio: 1448 / 1086; isolation: isolate;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-picker-art {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; user-select: none;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .tray-heading,
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .character-palettes,
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-swatches { display: contents; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .tray-heading strong {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready button {
    position: absolute; z-index: 2; min-width: 44px; min-height: 44px;
    margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
    outline: none; color: transparent; cursor: pointer; touch-action: manipulation;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .tray-heading button {
    left: 86.2%; top: 7.4%; width: 9.6%; height: 12.9%; border-radius: 50%;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .character-palette-button {
    left: 5.4%; top: 21.1%; width: 44.2%; height: 20.5%; border-radius: 12% / 34%;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .tumble-colors { left: 50.4%; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .character-palette-button img { display: none; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .character-palette-button > span,
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .more-colors-button > span { opacity: 0; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-swatches .color-swatch {
    --column: 0; --row-top: 44.1%;
    left: calc(6.4% + var(--column) * 14.82%); top: var(--row-top);
    width: 12.15%; height: 16.2%; max-width: none; max-height: none;
    aspect-ratio: 1; border-radius: 50%; transform: none;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-swatch:nth-child(6n + 2) { --column: 1; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-swatch:nth-child(6n + 3) { --column: 2; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-swatch:nth-child(6n + 4) { --column: 3; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-swatch:nth-child(6n + 5) { --column: 4; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-swatch:nth-child(6n + 6) { --column: 5; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-swatch:nth-child(n + 7) { --row-top: 61%; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-swatches .color-swatch span { display: none; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-swatches .color-swatch.is-selected {
    outline: .7cqw solid #863aee; outline-offset: .45cqw;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .color-swatches .color-swatch.is-selected span {
    display: grid; place-items: center; position: absolute; right: -3%; bottom: -3%;
    width: 36%; height: 36%; border: .5cqw solid white; border-radius: 50%;
    background: radial-gradient(ellipse at 30% 20%, #c28aff, #7935f3 65%);
    color: white; font-size: 3.1cqw; line-height: 1; box-shadow: 0 .2cqw .7cqw #4f359533;
}
/* Pink's original selected artwork is retained verbatim. Only its local ring
   area is replaced when another color is chosen; the rest of the art never changes. */
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready[data-art-color="#f35b8f"] .color-swatches .color-swatch:first-child {
    outline: none;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready[data-art-color="#f35b8f"] .color-swatches .color-swatch:first-child span { display: none; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready:not([data-art-color="#f35b8f"]) .pink-swatch-reset {
    display: block; position: absolute; z-index: 1;
    left: 5.52%; top: 42.82%; width: 14.1%; height: 17.7%;
    background: url('../web-assets/coloring-color-picker-unselected-v1.png') 6.43% 52.05% / 709.22% 564.97% no-repeat;
    pointer-events: none;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .more-colors-button {
    left: 20.8%; top: 78.55%; width: 58.4%; height: 11.7%; border-radius: 999px;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready button:focus-visible {
    outline: max(3px, .45cqw) solid #6021d4; outline-offset: 2px;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray:has(.is-artwork-ready) .color-picker-extra-panel {
    padding: 18px clamp(20px, 3vw, 44px) 30px;
    background: #dfe9ff url('../web-assets/coloring-case-sky-v2.webp') center bottom / cover;
}
/* The title retains its approved artwork. Character and More colors labels
   are live Fredoka text in every language, on precisely aligned clean patches.
   Only the old lettering is covered; portraits, rims and decorations stay put. */
html:not([lang="en"]) .coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .tray-heading strong {
    left: 10.5%; top: 8%; width: 60%; height: 11%; clip-path: none;
    background: #c8ddfb; color: #132968; font: 400 6cqw/1 'Titan One', sans-serif;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .character-palette-button > span {
    opacity: 1; position: absolute; left: 41%; right: 2%; top: 25%; bottom: 21%;
    display: flex; flex-direction: column; justify-content: center;
    background: url('../web-assets/coloring-color-picker-label-background-v1.png') 31.444% 29.491% / 396.920% 903.342% no-repeat;
    color: #132968; font: 700 2.9cqw/1.1 'Fredoka', sans-serif;
}
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .tumble-colors > span { background-position-x: 91.600%; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .character-palette-button small { font: 700 1.9cqw/1.2 'Fredoka', sans-serif; margin: .6cqw 0 0; }
.coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .more-colors-label {
    opacity: 1; position: absolute; left: 40.5%; right: 23.5%; top: 25%; bottom: 25%;
    display: flex; align-items: center; justify-content: center; white-space: nowrap;
    background: url('../web-assets/coloring-color-picker-label-background-v1.png') 56.286% 86.538% / 475.647% 1709.402% no-repeat;
    color: #132968; font: 700 3.3cqw/1 'Fredoka', sans-serif;
}
@media (forced-colors: active) {
    .coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready button {
        background: Canvas; color: ButtonText; border: 2px solid ButtonText;
    }
    .coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .character-palette-button > span,
    .coloring-studio-modal.touch-studio[data-pencil-case] #color-tray .is-artwork-ready .more-colors-label {
        opacity: 1; background: Canvas; color: ButtonText;
    }
}