/* XENA Universe 120% readability pass.
   rem/em based typography (the majority of the responsive UI) scales from
   this root value.  The touch-target rules cover legacy screens that still
   use fixed-pixel labels without applying `zoom`, which would otherwise
   distort canvases, fullscreen boards and mobile viewport math. */
:root { --xena-ui-scale: 1.2; font-size: 120%; }
html, body { max-inline-size: 100%; overflow-x: clip; }
body { min-inline-size: 0; }

button, input, select, textarea, [role="button"] {
  font-size: max(1em, 0.875rem);
  min-inline-size: 0;
}

button, [role="button"], input[type="button"], input[type="submit"] {
  min-block-size: max(2.45em, 38px);
}

img, video, canvas, svg { max-inline-size: 100%; }

/* Small screens retain the exact 120% text scale while containers are allowed
   to shrink.  This prevents the old fixed-size cards/buttons from creating a
   horizontal page scrollbar after the readability pass. */
@media (max-width: 760px) {
  :root { font-size: 120%; }
  body { overflow-x: clip; }
  button, input, select, textarea, [role="button"] { max-inline-size: 100%; }
  :is(.wrap, .container, .shell, .page, .content, main, section) { min-inline-size: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}