/* ============================================================================
   Home (pantalla de título — ver ui/overlays.js showTitle).

   Todo lo acomodable vive acá como CSS variable, y el lab /ui/home las edita
   en vivo con sliders. Para calibrar: abrir /ui/home, mover, "Copiar CSS" y
   pegar el bloque resultante sobre las variables de `.title-wrap` de abajo.

   El preview del personaje muestra SOLO LA CABEZA (sin cuerpo): el modo lo
   decide --head-only, que ui/facepicker.js lee al montarse.
   ========================================================================== */

.title-wrap {
  /* ---- Cabeza ---- */
  --head-only: 1;              /* 1 = solo cabeza, 0 = busto con cuerpo */
  --head-box-w: 240px;         /* ancho del recuadro del preview */
  --head-box-h: 200px;         /* alto del recuadro del preview */
  --head-zoom: 1;              /* acercamiento de cámara: >1 la cabeza se ve más grande */
  --head-offset-x: 0px;        /* corrimiento horizontal de la cabeza dentro del recuadro */
  --head-offset-y: 0px;        /* corrimiento vertical (negativo = sube) */
  --head-tilt: 0deg;           /* inclinación de la cabeza */
  --head-spin: 0;              /* 1 = gira sola despacio, 0 = quieta */

  /* ---- Panel del personaje ---- */
  --picker-pad: 14px;          /* padding interno de la tarjeta del personaje */
  --picker-gap: 10px;          /* separación entre la cabeza y los controles de cara */
  --picker-width: 260px;       /* ancho de la tarjeta del personaje */
  --picker-rows-h: 232px;      /* alto de la lista de sliders de cara (scrollea) */

  /* ---- Layout del home ---- */
  --title-row-gap: 22px;       /* separación entre la tarjeta del personaje y la del nombre */
  --title-card-width: 320px;   /* ancho de la tarjeta de nombre/color/play */
  --title-top-margin: 0px;     /* separación entre el logo y la fila de tarjetas */
  --logo-scale: 1;             /* tamaño del logo STAR RUMBLE */

  /* ---- Campos ---- */
  --field-gap: 12px;           /* separación vertical entre nombre, color, idioma y play */
  --skin-size: 30px;           /* lado de cada botón de color */
  --skin-gap: 8px;             /* separación entre botones de color */
  --play-height: 52px;         /* alto del botón JUGAR */
  --play-font-size: 22px;      /* tamaño de fuente del botón JUGAR */
}

/* Las reglas que consumen las variables. Se aplican tanto al home real como
   al lab, porque el lab monta el mismo showTitle() dentro de su escenario. */
.title-wrap .title-row { gap: var(--title-row-gap); margin-top: var(--title-top-margin); }
.title-wrap .logo { transform: scale(var(--logo-scale)); transform-origin: center bottom; }
.title-wrap .title-card { width: var(--title-card-width); gap: var(--field-gap); }
.title-wrap .face-picker { width: var(--picker-width); padding: var(--picker-pad); gap: var(--picker-gap); }
.title-wrap .fp-view { width: var(--head-box-w); height: var(--head-box-h); }
.title-wrap .fp-rows { max-height: var(--picker-rows-h); }
.title-wrap .skins { gap: var(--skin-gap); }
.title-wrap .skin { width: var(--skin-size); height: var(--skin-size); }
.title-wrap #playBtn { height: var(--play-height); font-size: var(--play-font-size); }