/* Screen-only colors keep the printed activity sheet light and ink-friendly. */
@media screen {
  :root {
    --purple: var(--theme-accent, #7b5ad8);
    --paper: #fcfaf7;
    --surface: #fffdfb;
    --surface-soft: color-mix(in srgb, var(--purple) 7%, var(--surface));
    --accent-soft: color-mix(in srgb, var(--purple) 12%, var(--surface));
    --stage-color: color-mix(in srgb, var(--purple) 8%, var(--surface));
    --line: color-mix(in srgb, var(--purple) 16%, var(--surface));
    --control-ink: color-mix(in srgb, var(--purple) 74%, #30253d);
    --soft-shadow: #30204e12;
  }
  :root[data-mode="dark"] {
    color-scheme: dark;
    --ink: #eeeaf5;
    --muted: #bcb3ca;
    --purple: var(--theme-bright, #c4a7ff);
    --paper: #191720;
    --surface: #24212d;
    --surface-soft: color-mix(in srgb, var(--purple) 9%, var(--surface));
    --accent-soft: color-mix(in srgb, var(--purple) 19%, var(--surface));
    --stage-color: color-mix(in srgb, var(--purple) 13%, var(--surface));
    --line: color-mix(in srgb, var(--purple) 24%, var(--surface));
    --control-ink: var(--purple);
    --soft-shadow: #00000030;
  }
  body { background-color: var(--paper); background-image: radial-gradient(color-mix(in srgb, var(--muted) 12%, transparent) .8px, transparent .8px); }
  .play-label,
  .board-bottom, .page-footer, .dialog-kicker, dialog > p,
  .mobile-navigation { color: var(--muted); }
  .play-label > span { background: var(--purple); }
  .utility-button { border-color: var(--line); background: var(--surface); color: var(--control-ink); }
  .utility-button:hover { background: var(--accent-soft); }
  .playground { background: var(--surface); border-color: var(--line); box-shadow: 0 5px 0 var(--soft-shadow), 0 14px 40px var(--soft-shadow); }
  .board-scroll { scrollbar-color: color-mix(in srgb, var(--purple) 45%, var(--surface)) transparent; }
  .discovery-stage:before { background: var(--stage-color); }
  .board-bottom { border-color: var(--line); }
  .little-heart, .doodle-two { color: var(--purple); }
  .page-footer kbd { background: var(--surface-soft); color: var(--muted); }
  dialog { background: var(--surface); border-color: var(--line); }
  dialog h2 { color: var(--ink); }
  .close-button { background: var(--accent-soft); color: var(--control-ink); }
  .large-stage { background: radial-gradient(ellipse at center, var(--stage-color) 0, transparent 70%); }
  .expression-buttons button { background: var(--surface); border-color: var(--line); color: var(--control-ink); }
  .expression-buttons button:hover, .expression-buttons button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--purple); color: var(--control-ink); }
  .mobile-navigation button { background: var(--surface-soft); border-color: var(--line); color: var(--control-ink); }
  .appearance-panel { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 35px var(--soft-shadow); }
  .appearance-control { color: var(--muted); }
  .appearance-control select, .appearance-select { color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line); }
  select:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
  :root[data-mode="dark"] .number-column { background: color-mix(in srgb, var(--tint) 10%, var(--surface)); border-color: color-mix(in srgb, var(--edge) 35%, var(--surface)); box-shadow: 0 3px 0 #00000022; }
  :root[data-mode="dark"] .column-heading { --column-heading-ink: color-mix(in srgb, var(--color) 72%, #fff); color: var(--column-heading-ink); text-shadow: 0 2px 0 #00000030; }
  :root[data-mode="dark"] .column-heading:after { border-color: color-mix(in srgb, var(--edge) 45%, var(--surface)); }
  :root[data-mode="dark"] .block-cell { background: #ffffff05; border-color: #ffffff10; }
  :root[data-mode="dark"] .block-cell:hover { background: #ffffff0d; }
  :root[data-mode="dark"] .block-cell.selected { background: color-mix(in srgb, var(--color) 18%, var(--surface)); border-color: var(--color); }
  :root[data-mode="dark"] .character-number { color: #fff8e8; text-shadow: 0 2px 3px #171021b3; }
  :root[data-mode="dark"] .creature-shadow { background: #08040f55; }
  :root[data-mode="dark"] .pink { background: #503044; color: #f4a6cb; }
  :root[data-mode="dark"] .yellow { background: #473d27; color: #efd087; }
  :root[data-mode="dark"] dialog::backdrop { background: #090610a8; }
}