/**
 * Couche de lisibilité — interface joueur (téléphone).
 *
 * Plusieurs joueurs ont signalé que le texte était trop petit et les boutons
 * trop difficiles à viser. Le balisage utilise les utilitaires Tailwind
 * (text-xs, text-[10px]…) répartis sur des centaines d'occurrences dans
 * index.html, app.js et minigames.js : plutôt que de les réécrire une par une,
 * on REDÉFINIT ici le bas de l'échelle typographique.
 *
 * Les sélecteurs sont préfixés par `html body` (spécificité 0,2,1) pour battre
 * les utilitaires Tailwind (0,1,0) quel que soit l'ordre d'injection du CDN,
 * sans recourir à `!important` — les surcharges ponctuelles au style inline
 * continuent donc de fonctionner.
 *
 * Règle de conception : plus rien en dessous de 13px, corps de texte à 17px,
 * et 44px de zone tactile minimum (seuil des recommandations d'accessibilité).
 */

/* ── Échelle typographique ────────────────────────────────────────────────── */

/* Micro-libellés (badges, mentions) : plancher à 13px. */
html body .text-\[9px\],
html body .text-\[10px\],
html body .text-\[11px\] {
  font-size: 0.8125rem;
  line-height: 1.15rem;
}

html body .text-xs   { font-size: 0.9375rem; line-height: 1.3rem; }
html body .text-sm   { font-size: 1.0625rem; line-height: 1.5rem; }
html body .text-base { font-size: 1.125rem;  line-height: 1.6rem; }
html body .text-lg   { font-size: 1.25rem;   line-height: 1.7rem; }
html body .text-xl   { font-size: 1.4375rem; line-height: 1.85rem; }
html body .text-2xl  { font-size: 1.625rem;  line-height: 2rem; }

/* ── Zones de clic ────────────────────────────────────────────────────────── */

/*
 * 44px minimum sur tout ce qui se clique. `min-height` l'emporte sur les
 * hauteurs explicites plus petites (h-8, h-9…), si bien que les boutons
 * compacts — croix de fermeture en tête, actions du bandeau — s'agrandissent
 * sans qu'il faille retoucher leur balisage.
 */
html body button,
html body [role="button"],
html body select,
html body input:not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
  min-height: 44px;
  touch-action: manipulation;
}

html body button,
html body [role="button"] {
  min-width: 44px;
}

/*
 * 16px minimum dans les champs de saisie : en dessous, iOS zoome
 * automatiquement au focus et décadre la page.
 */
html body input,
html body textarea,
html body select {
  font-size: max(1rem, 1em);
}

html body textarea { min-height: 5rem; }

/* Puces de formulaire : increvables au doigt plutôt qu'à l'ongle. */
html body input[type="radio"],
html body input[type="checkbox"] {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
}

/*
 * Les emoji d'avatar servent de boutons dans la grille de sélection : on leur
 * garantit la même surface confortable.
 */
html body #avatar-picker-grid > * {
  min-height: 48px;
  min-width: 48px;
  font-size: 1.5rem;
}

/* ── Densité ──────────────────────────────────────────────────────────────── */

/*
 * Une police plus grande a besoin de respirer : sans cela les cartes denses
 * (listes de joueurs, grilles d'indices) se retrouvent tassées.
 */
html body .leading-relaxed { line-height: 1.7; }
html body .tracking-wider  { letter-spacing: 0.04em; }

/* Les icônes Material suivent la taille du texte qui les entoure. */
html body .material-icons.text-sm  { font-size: 1.25rem; }
html body .material-icons.text-base { font-size: 1.4rem; }

/* Mode "Grand" pour les joueurs malvoyants : on augmente la taille de base (16px -> 18.4px),
   ce qui agrandit proportionnellement toutes les valeurs en rem de Tailwind (textes, marges, paddings). */
html.a11y-large-text {
  font-size: 115%;
}