/* ==========================================================================
   TRUCACHO GD - TIPOGRAFÍAS PROPIAS (2026-11-01)
   Archivos en /fonts (guardados en el proyecto: funcionan sin internet).
   - Lilita One      (licencia OFL, fonts/OFL-LilitaOne.txt): títulos y diálogos. Redonda,
                     de dibujo animado, muy legible, con ñ, acentos y ¿¡.
   - Permanent Marker (licencia Apache 2.0, fonts/LICENSE-PermanentMarker.txt): detalles de
                     "pizarrón de bar" (escrito a marcador).
   Para usar una en cualquier parte: font-family: var(--tg-fuente-titulo) / var(--tg-fuente-pizarron)
   ========================================================================== */
@font-face {
    font-family: 'Lilita One';
    src: url('../fonts/LilitaOne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Permanent Marker';
    src: url('../fonts/PermanentMarker-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --tg-fuente-titulo: 'Lilita One', 'Arial Black', Impact, sans-serif;
    --tg-fuente-pizarron: 'Permanent Marker', 'Comic Sans MS', cursive;
}

/* ---------- Pantalla donde el Gordo del bar pregunta el nombre ---------- */
#bienvenida-screen .texto-rival-dialogo-flotante {
    font-family: var(--tg-fuente-titulo);
    font-size: clamp(1.7rem, 2.9cqw, 2.7rem);
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.25;
    text-align: center;
    color: #ffefb8;
    -webkit-text-stroke: 5px #1b0f08;
    paint-order: stroke fill;
    text-shadow: 3px 4px 0 #000;
    text-transform: none;
}

#bienvenida-screen .input-nombre-arcade {
    font-family: var(--tg-fuente-titulo);
    font-style: normal;
    font-weight: 400;
    font-size: 2.3rem;
    letter-spacing: .08em;
    color: #ffefb8;
    caret-color: #f1c40f;
    text-shadow: 2px 3px 0 #000;
    background: linear-gradient(180deg, rgba(74, 44, 22, .96), rgba(30, 17, 9, .96));
    border: 4px solid #f1c40f;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .9), inset 0 0 14px rgba(241, 196, 15, .35), inset 0 3px 0 rgba(255, 255, 255, .12);
}
#bienvenida-screen .input-nombre-arcade::placeholder {
    font-family: var(--tg-fuente-pizarron);
    font-size: 1.7rem;
    letter-spacing: .04em;
    color: rgba(255, 239, 184, .42);
    text-transform: none;
    text-shadow: none;
}
#bienvenida-screen .input-nombre-arcade:focus {
    border-color: #ffe066;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .9), 0 0 0 4px rgba(241, 196, 15, .35), inset 0 0 14px rgba(241, 196, 15, .5);
}

#bienvenida-screen .btn-confirmar-nombre {
    font-family: var(--tg-fuente-titulo);
    font-style: normal;
    font-weight: 400;
    font-size: 1.7rem;
    letter-spacing: .08em;
    padding: 12px 42px;
    border-radius: 14px;
}

/* ---------- Subtítulos de los rivales ---------- */
.tg-sub { font-family: var(--tg-fuente-titulo); font-weight: 400; }
.tg-sub-nombre { font-family: var(--tg-fuente-pizarron); letter-spacing: .04em; }
.tg-sub-texto { font-family: var(--tg-fuente-titulo); font-weight: 400; letter-spacing: .01em; }