/* Elementos HTML, atributos globales, accesibilidad y movimiento reducido. */
* {
  box-sizing: border-box;
}
select,
input,
output {
  font: inherit;
}
button {
  font: inherit;
  cursor: pointer;
}
button:focus-visible {
  outline: 3px solid #8ab5ee;
  outline-offset: 2px;
}
button:disabled {
  opacity: 0.35;
  cursor: default;
}
[hidden] {
  display: none !important;
}
.small {
  border: 1px solid #d6e5f2;
  background: var(--color-surface);
  border-radius: 18px;
  color: #4c7198;
  font-size: calc(11px * var(--text-scale, 1));
  padding: 5px 10px;
}
kbd {
  display: inline-block;
  font: 9px inherit;
  margin-top: 4px;
  color: #8b9eb0;
  padding: 1px 4px;
  background: var(--ad-neutral-face);
  border-radius: 4px;
}
@media (max-height: 640px) and (min-width: 851px) {
  kbd {
    margin-top: 1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
/* Calm mode (Settings) applies the same restraint as the system preference. */
html[data-calm="true"] *,
html[data-calm="true"] *::before,
html[data-calm="true"] *::after {
  transition: none !important;
}
button {
  -webkit-tap-highlight-color: transparent;
}
/* Gameplay text should never be selected by dragging or holding a finger. */
html,
body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* A press should register visually at once; only the release eases back. */
.small,
[data-zoom],
[data-mobile-tab] {
  transition: transform 70ms ease-out;
}
button:active:not(:disabled) {
  transform: scale(0.96);
  transition: none;
  filter: brightness(0.96);
}
html[data-appearance="dark"] body {
  background: #162635;
  color: #dbeaf6;
}
html[data-appearance="dark"] button[aria-pressed="true"] {
  background: #305e63;
  color: var(--ad-mint-ink);
  border-color: #72a89c;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  kbd {
    display: none;
  }

  button {
    touch-action: manipulation;
  }
}
@media (forced-colors: active) {
  [aria-pressed="true"] {
    outline: 2px solid Highlight;
  }
}
.control-icon {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  font-size: 20px;
  line-height: 22px;
}
/* The zoom buttons are drawn at 34 px; an invisible margin brings the touch target to 44 px at any size. */
:is(#zoom-out, #zoom-in) {
  position: relative;
}
:is(#zoom-out, #zoom-in)::after {
  content: "";
  position: absolute;
  inset: -5px;
}
/* Compact phone controls keep their drawn size; an invisible margin brings the touch target to about 44 px. */
@media (max-width: 599px) {
  :where(
    .category-step,
    #category-open,
    #zoom-out,
    #zoom-in,
    [data-zoom],
    .speech #repeat-phrase,
    .speech #close-lesson
  ) {
    position: relative;
  }
  :is(.category-step, #category-open)::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
  :is(#zoom-out, #zoom-in, [data-zoom])::after {
    content: "";
    position: absolute;
    inset: -6px -7px;
  }
  .speech :is(#repeat-phrase, #close-lesson)::after {
    content: "";
    position: absolute;
    inset: -7px -9px;
  }
}

/* Narrow phones keep only the English half of a short bilingual label; the Spanish lives in the full text and for screen readers. */
@media (max-width: 380px) {
  .es-half {
    display: none;
  }
}