/* Reuse the puzzle's tested game layout; the palette replaces its piece tray. */
.coloring-board { display: block; --ratio: 1000 / 680; background: white; touch-action: manipulation; }
.coloring-board[data-tool=brush] { touch-action: none; cursor: crosshair; }
.coloring-board > svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.coloring-board [data-region] { cursor: pointer; }
.coloring-board[data-tool=brush] [data-region] { cursor: crosshair; }
.coloring-board [data-region]:focus-visible { outline: none; stroke: #087e9c; stroke-width: 8; }
.coloring-controls button[aria-pressed=true] { border-color: #b58b20; background: #f6c64c3d; }
.coloring-controls { gap: 8px; }
.coloring-progress { justify-content: center; color: var(--muted); font-weight: 500; }
.coloring-palette { grid-auto-columns: 86px; }
.coloring-palette .color-swatch { position: relative; display: grid; place-items: center; background: white; border: 2px solid transparent; border-radius: 12px; padding: 8px; width: 100%; height: 100%; min-width: 0; touch-action: pan-x; }
.color-swatch::before { content: ''; display: block; width: 48px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px #061d4530, 0 3px 5px #061d451a; }
.color-swatch[aria-pressed=true] { border-color: var(--navy); }
.color-swatch[aria-pressed=true]::after { content: '✓'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--mark); font-size: 1.25rem; font-weight: 800; }
.coloring-palette-wrap[data-overflow=x] h2::after { content: " ↔"; color: var(--muted); }
.coloring-palette-wrap[data-overflow=y] h2::after { content: " ↕"; color: var(--muted); }
.brush-size { max-width: 52%; }
#coloring .brush-size select { min-height: 32px; padding: 3px 6px; font-size: .85rem; }
.coloring-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px), (max-height: 540px) and (max-width: 1100px) {
  .coloring-controls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .coloring-controls button { min-width: 0; padding-inline: 0; }
  .coloring-palette { grid-auto-columns: 64px; }
  .coloring-palette .color-swatch { height: var(--tray-row-height, 72px); padding: 6px; }
}
@media (max-height: 540px) and (max-width: 1100px) and (orientation: landscape) {
  /* Two short tool rows preserve accessible 44px targets in the narrow sidebar. */
  .coloring-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coloring-palette .color-swatch { height: 64px; touch-action: pan-y; }
}

/* Keep the motif selector above the six touch-friendly painting tools. */
@media (max-width:760px),(max-height:540px) and (max-width:1100px){.puzzle-controls.coloring-controls:has(.picture-control){display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.coloring-controls .picture-control{grid-column:1/-1;min-width:0}.coloring-controls .picture-control select{max-width:100%;min-width:0}}