/* SPARK LAB TOYS — Falling Sand + Magnetic Eyes (2026-07-28) */
/* Scoped exactly like canvas.css (js/canvas/play-sand.js + play-eyes.js only ever */
/* mount inside the Creative Canvas Play Zone, but kept consistent with the family). */

/* ── Falling Sand: material swatch dots inside the shared .cc-magicbtn tile ── */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-swdot {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #0a0a0a; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
/* ERASE material has no color — a clear "no" glyph instead of a bare emoji */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-swdot[data-erase] {
  background: #fafaf6;
  background-image: linear-gradient(45deg, transparent 44%, #FF2E7E 44%, #FF2E7E 56%, transparent 56%);
}
:is([data-app="canvas"]) .cc-play:not(.cc-mini) .cc-swdot[data-erase] { background: #232230; }

:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sandclear {
  display: block; width: 100%; margin: 4px 0 10px; padding: 7px 4px;
  background: #fafaf6; color: #4a4a52; border: 2px solid #e3e3de; border-radius: 10px;
  font: 800 10px 'JetBrains Mono', monospace; letter-spacing: .04em; cursor: pointer;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sandclear:hover { border-color: #0a0a0a; }
:is([data-app="canvas"]) .cc-play:not(.cc-mini) .cc-sandclear { background: #1f1e28; color: #c3c1d2; border-color: #2c2b38; }

/* ── shared: focus-visible + hit targets for the new buttons (a11y) ── */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sandmat:focus-visible,
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .cc-sandclear:focus-visible {
  outline: 2px solid #16E0E0; outline-offset: 2px;
}

/* ── Magnetic Eyes panel: eye-count segmented control reuses .cc-seg2 (no ── */
/* new rules needed there) — only the field label spacing needs a small nudge */
/* so it doesn't collide with the panel's default .cc-pfield gap. */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) #cc-eyespanel .cc-pfield { align-items: center; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) #cc-eyespanel .cc-seg2 { flex: 1; margin-bottom: 0; }