/* CodePlay — comfort settings (see comfort.js). Loaded after style.css. */

/* Text size: everything in CodePlay is sized from this one number. */
html[data-text="large"] { font-size: 22px; }
html[data-text="huge"] { font-size: 25px; }

/* Less motion: switch off animations and transitions everywhere. */
html[data-motion="less"] *, html[data-motion="less"] *::before, html[data-motion="less"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* The settings page */
.settings { max-width: 760px; margin: 0 auto; }
.settings .card { margin-bottom: 1rem; }
.settings .sample { margin-top: .8rem; }
.switch-row { display: flex; gap: .6rem; align-items: center; cursor: pointer; }
.switch-row input { width: 1.2rem; height: 1.2rem; }

/* Bigger text: keep the top bar tidy (icons only, wrap if needed). */
html:is([data-text="large"], [data-text="huge"]) .topbar .level-name { display: none; }
html:is([data-text="large"], [data-text="huge"]) .topbar-right { flex-wrap: wrap; justify-content: flex-end; }
html:is([data-text="large"], [data-text="huge"]) .logo-text { display: flex; flex-direction: column; line-height: 1.1; }