/* Hype City — correcciones transversales de movil y accesibilidad.
 *
 * Las paginas vienen del canvas de diseño y estilan casi todo con estilos en
 * linea, asi que lo que se arregla elemento por elemento va parcheado en el
 * portado (api/hype-city/tools/port-pages.py). Aca queda solo lo que es una
 * regla para toda la pagina y no tendria sentido repetir cien veces.
 */

/* --------------------------------------------------------------------------
 * Tacto
 * -------------------------------------------------------------------------- */

/* Quita el retraso de ~300ms que el navegador se guarda por si viene un
   doble-tap para hacer zoom. En juegos de reflejos ese retraso se siente como
   lag del juego, no del navegador. */
a[href],
button,
[role="button"],
[onclick] {
  touch-action: manipulation;
}

/* El resaltado azul por defecto de Android sobre una interfaz naranja/violeta
   se ve como un error de render. Se apaga y el feedback lo da :active. */
html {
  -webkit-tap-highlight-color: transparent;
}

/* Un juego no es un documento: seleccionar texto sin querer mientras se
   arrastra rompe el gesto. El texto largo (reglas, descripciones) se
   reactiva mas abajo. */
@media (pointer: coarse) {
  body {
    -webkit-user-select: none;
    user-select: none;
  }

  p, li,
  [data-hc-selectable] {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* Los canvas y las zonas de arrastre no deben disparar el scroll de la pagina
   ni el menu contextual al mantener pulsado. */
canvas {
  touch-action: none;
  -webkit-touch-callout: none;
}

/* --------------------------------------------------------------------------
 * Foco visible
 * -------------------------------------------------------------------------- */

/* El canvas de diseño no dejaba estados de foco: con teclado no se veia donde
   estabas. :focus-visible solo aparece en navegacion por teclado, asi que no
   ensucia el tacto ni el mouse. */
a[href]:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #F5B400;
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
 * Movimiento
 * -------------------------------------------------------------------------- */

/* Estas paginas animan en bucle: el punto que parpadea, la fiebre, las
   sirenas, el pollo que rebota. Para quien pidio menos movimiento en su
   sistema eso va de molesto a mareante.
   Se apagan los bucles decorativos y las transiciones, no la jugabilidad:
   el juego sigue respondiendo, simplemente deja de latir de fondo. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
 * Areas tocables
 * -------------------------------------------------------------------------- */

/* Red de seguridad: cualquier boton que se agregue despues y se quede corto
   llega igual a los 44px recomendados en pantallas tactiles. Los tamaños
   concretos van en los estilos en linea de cada pagina; esto solo evita que
   un elemento nuevo entre por debajo del piso. */
@media (pointer: coarse) {
  button,
  [role="button"] {
    min-height: 44px;
  }

  /* Los botones que son solo un icono ademas necesitan ancho. */
  button:empty,
  button > svg:only-child {
    min-width: 44px;
  }
}

/* --------------------------------------------------------------------------
 * Piso tipografico de los componentes del design system
 * -------------------------------------------------------------------------- */

/* Los estilos en linea de cada pagina ya vienen con el piso aplicado desde el
   portado, pero los componentes que se importan del design system (Badge,
   Chip...) toman su tamaño del token --fs-10, que son 10px. En pantalla tactil
   eso queda por debajo del piso practico de 11px, asi que se sube el token
   —solo ahi— en vez de tocar el bundle, que es un artefacto generado.
   El selector va duplicado (:root:root) a proposito: el runtime hoista las
   hojas del design system al final del <head>, o sea DESPUES de esta, asi que
   con la misma especificidad ganaria el token original por orden de carga. */
@media (pointer: coarse) {
  :root:root {
    --fs-10: 0.6875rem; /* 11px */
  }
}