/* ============================================================================
   Arreglos de interfaz — textos que se salían de los botones
   ----------------------------------------------------------------------------
   El problema: el tamaño de letra dependía del tamaño de la PANTALLA, así que en
   algunas resoluciones el texto quedaba más grande que su botón y se veía cortado.
   La solución: que cada texto se mida respecto al ANCHO DE SU PROPIO BOTÓN
   (unidad cqw). Así encaja igual en un móvil de 320 px que en un monitor 8K.

   Solo se tocan TAMAÑOS DE TEXTO: la composición de las tarjetas, los avatares
   y los iconos quedan exactamente como los diseñó el juego.
   Los selectores llevan #menu por delante para ganar a las reglas del juego.
   ========================================================================== */

/* --------------------------------------------------- botón grande (JUGAR) */
#menu .mn-grande {
  container-type: inline-size;
  padding-left: 7%; padding-right: 7%;
  font-size: min(11cqw, 2.5rem);
  line-height: .95;
  white-space: normal;
  text-align: center;
}
#menu .mn-grande > span { display: block; max-width: 100%; }

/* --------------------- botones medianos (Clásico / Versus / Continuar partida) */
#menu .mn-med {
  container-type: inline-size;
  padding-left: 9%; padding-right: 9%;
  font-size: min(10cqw, 1.5rem);
  line-height: .95;
  white-space: normal;
  text-align: center;
}
#menu .mn-med > span { display: block; max-width: 100%; }
#menu .mn-med.continuar { font-size: min(8cqw, 1.25rem); }

/* ------------------------------------- modos (bot / 2 jugadores / en línea) */
#menu .mn-modo { container-type: inline-size; min-width: 0; max-width: 33%; }
#menu .mn-modo span {
  display: block; width: 100%;
  font-size: clamp(.55rem, min(13cqw, 1.8vh), 1rem);
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

/* --------------------------- textos de las tarjetas de dificultad --------- */
#menu .mn-carta,
#menu .mn-cuerpo.con-cartas .mn-carta { container-type: inline-size; }
#menu .mn-carta b,
#menu .mn-cuerpo.con-cartas .mn-carta b {
  font-size: min(16cqw, 1.3rem); line-height: 1;
  white-space: normal; overflow-wrap: anywhere; max-width: 100%;
}
#menu .mn-carta small,
#menu .mn-cuerpo.con-cartas .mn-carta small {
  font-size: min(8.5cqw, .72rem); line-height: 1.05;
  white-space: normal; overflow-wrap: anywhere; max-width: 100%;
}
/* en pantallas muy bajas el juego oculta ese texto a propósito: se respeta */
@media (orientation: landscape) and (max-height: 520px) {
  #menu .mn-cuerpo.con-cartas .mn-carta small { display: none; }
}
/* la estrella de "elegido" no debe quedar debajo de la tarjeta vecina */
#menu .mn-carta.sel, #menu .mn-med.activo, #menu .mn-modo.sel { position: relative; z-index: 2; }

/* --------------------------------------------- barra inferior del menú */
#menu .mn-redondo { min-width: 0; }
#menu .mn-redondo span {
  /* una sola línea: si no cabe, encoge; nunca se parte letra a letra */
  display: block; white-space: nowrap; text-align: center;
  font-size: clamp(.5rem, min(1.6vh, 2.4vw), .85rem);
  line-height: 1.1;
}
#menu .mn-barra { padding-left: 3%; padding-right: 3%; }

/* ------- respaldo para navegadores antiguos sin unidades de contenedor ----- */
@supports not (width: 1cqw) {
  #menu .mn-grande { font-size: clamp(1.1rem, 4.2vw, 2.1rem); }
  #menu .mn-med { font-size: clamp(.8rem, 2.8vw, 1.3rem); }
  #menu .mn-med.continuar { font-size: clamp(.7rem, 2.2vw, 1.05rem); }
  #menu .mn-carta b { font-size: clamp(.7rem, 2.4vw, 1.2rem); }
  #menu .mn-carta small { font-size: clamp(.5rem, 1.5vw, .7rem); }
  #menu .mn-modo span { font-size: clamp(.55rem, 1.8vw, .85rem); }
  #menu .mn-redondo span { font-size: clamp(.5rem, 1.6vw, .8rem); }
}