/* ============================================================
   text-scramble · base styles
   Optional. The effect is pure JS (textContent), so no CSS is
   required — these are just stability helpers. Override --ts-*.
   ============================================================ */

:root { --ts-accent: #C49A5E; }

/* Scramble reads best on tracking-wide / monospace labels, where every
   glyph occupies the same cell so the churn doesn't reflow. We don't
   force a font — opt in by adding [data-scramble] to a mono/tracked
   element, or lean on these defaults. */
[data-scramble] {
  font-variant-ligatures: none;   /* glyphs swap cleanly, no ligature popping */
  white-space: pre-wrap;          /* preserve the spaces we hold stable */
}

/* While a label is mid-decode you can theme it (e.g. accent the churn). */
[data-scramble-playing] { color: var(--ts-accent); }

@media (prefers-reduced-motion: reduce) {
  /* JS already shows final text & never animates; nothing to undo here. */
  [data-scramble-playing] { color: inherit; }
}