/* ============================================================
   🎨 VARIABLES DE MARCA (Modo Claro y Oscuro Sólidos)
   ============================================================ */
:root {
    /* ☀️ MODO CLARO */
    --bg-body: #FAF8F2;       /* Beige suave corporativo */
    --bg-card: #F0EAD8;       /* Tarjetas/recuerditos con volumen */
    --bg-sticky: rgba(250, 248, 242, 0.95);
    --main-color: #582C83;    /* Morado oficial */
    --accent-color: #FFC600;  /* Amarillo oficial */
    --border-color: #AD96DC;  /* Lavanda oficial */
    --input-bg: #FFFFFF;
    --text-number: #AD96DC;
    --detail-color: #E9EC6B;  /* Lemon Routine, insignia de racha */
}

@media (prefers-color-scheme: dark) {
    :root {
        /* 🌙 MODO OSCURO (Estilo Premium) */
        --bg-body: #120E1A;       /* Morado berenjena profundo */
        --bg-card: #1A1526;       
        --bg-sticky: rgba(18, 14, 26, 0.95); 
        --main-color: #F2EBF9;    /* Lavanda clarito anti-fatiga */
        --accent-color: #FFC600;  
        --border-color: #3D2D54;  /* Bordes discretos */
        --input-bg: #1F192E;
        --text-number: #765B9D;
        /* Más saturado que el tono claro: a igual opacidad, un lavado
           pastel se ve vívido sobre blanco pero apagado/gris sobre un
           fondo oscuro. Este valor mantiene la insignia de racha viva
           en modo oscuro en vez de lavada. */
        --detail-color: #D8DC3A;
    }
}

/* ============================================================
   📱 ESTRUCTURA GENERAL
   ============================================================ */
/* overflow-x: hidden en html Y body (no solo uno de los dos, ver más abajo):
   sin esto, cualquier elemento interno que se pase del ancho de la pantalla
   por accidente (p.ej. una palabra larga en #quote-section que no puede
   partirse a mitad de palabra) no se recorta — arrastra TODA la página a
   scroll horizontal, incluida la cabecera sticky, que es exactamente el
   bug reportado de "hay que mover el dedo por la pantalla" + elementos
   raros al hacer scroll cerca del borde superior. */
html {
    overflow-x: hidden;
}

body {
    background-color: var(--bg-body);
    color: var(--main-color);
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0 0 40px 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
}

#game-container {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

.separator {
    border: none;
    border-top: 1px dashed var(--border-color);
    margin: 20px 0;
    opacity: 0.5;
}

/* ============================================================
   🌐 SITE HEADER & TOOLBAR INTEGRADA (Inmune a roturas)
   ============================================================ */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 15px;
    background-color: var(--bg-sticky);
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.logo {
    font-family: -apple-system, 'SF Pro Rounded', 'Segoe UI', 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--main-color);
}

.dot-accent { color: var(--accent-color); }

/* ============================================================
   🌐 TOOLBAR EN DOS LÍNEAS (V3)
   Línea 1: logo + idioma + ayuda. Línea 2: racha/tiempo + acciones.
   ============================================================ */
.toolbar-row1, .toolbar-row2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 480px;
}

.row1-right, .status-cluster, .action-cluster {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ❓ BOTÓN "CÓMO JUGAR" */
.help-icon-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    white-space: nowrap;
    border-radius: 14px;
    border: 1.5px solid var(--border-color);
    background: none;
    color: var(--main-color);
    font-family: inherit;
    padding: 3px 10px 3px 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.help-icon-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.help-icon-label {
    font-size: 0.75rem;
    font-weight: bold;
    /* Solo escritorio: en móvil manda el espacio, se queda solo el "?". */
    display: none;
}

@media (min-width: 768px) {
    .help-icon-label { display: inline; }
}

/* Reglas separadas (no agrupadas): un pseudo-selector desconocido como
   :focus-visible en una lista puede invalidar TODA la regla en WebKit
   antiguo, así que :hover no debe depender de que :focus-visible exista. */
.help-icon-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    outline: none;
}

.help-icon-btn:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
    outline: none;
}

.timer-minimal {
    font-size: 0.9rem;
    font-weight: bold;
    opacity: 0.9;
    white-space: nowrap;
}

/* 🌐 SELECTOR DE IDIOMA */
.lang-toggle {
    display: flex;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}

.lang-btn {
    background: none;
    border: none;
    color: var(--main-color);
    padding: 5px 12px;
    font-weight: bold;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lang-btn.active {
    background-color: var(--main-color);
    color: var(--bg-body);
}

/* En modo oscuro, el idioma activo se marca en amarillo de acento, para
   que se distinga con el mismo contraste que el resto de acentos. */
@media (prefers-color-scheme: dark) {
    .lang-btn.active {
        background-color: var(--accent-color);
        color: #17121F;
    }
}

/* Cada botón lleva dos textos (abreviado y completo); CSS decide cuál se
   ve según el ancho disponible, sin duplicar botones ni tocar JS. */
.lang-full { display: none; }
.lang-abbr { display: inline; }

@media (min-width: 768px) {
    .lang-full { display: inline; }
    .lang-abbr { display: none; }
}

/* 🔥 RACHA — insignia orgánica (mancha) con el número dentro */
.streak-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.streak-label {
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
    /* Solo escritorio, igual que el idioma completo y "¿Cómo jugar?". */
    display: none;
}

@media (min-width: 768px) {
    .streak-label { display: inline; }
}

.streak-chip {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.streak-blob {
    position: absolute;
    inset: 0;
    background-color: var(--detail-color);
    opacity: 0.62;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
}

@media (prefers-color-scheme: dark) {
    /* A igual opacidad, el mismo tono se ve "lavado" sobre fondo oscuro;
       en vez de repetir el cálculo, aquí simplemente sube a color puro. */
    .streak-blob { opacity: 1; }
}

.streak-num {
    position: relative;
    font-weight: 800;
    font-size: 0.8rem;
    color: #3A2900;
}

@media (prefers-color-scheme: dark) {
    .streak-num { color: #241A00; }
}

/* 🏆 RACHA POR TRAMOS — insignia del día exacto de un hito, o aviso
   discreto de "ya casi" la víspera (nunca los dos a la vez). Los tramos
   reutilizan el mismo lenguaje visual que .streak-chip de la cabecera,
   escalando UN cambio más por tramo: anillo -> color de acierto (el
   mismo --accent-color que ya marca letra correcta en Modo Ayuda) ->
   resplandor + tamaño. El texto ("N días seguidos") no varía por tramo. */
#modal-milestone {
    margin: 4px 0 16px 0;
    text-align: center;
}

.milestone-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.milestone-chip {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.milestone-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0;
    filter: blur(8px);
}

.milestone-blob {
    position: absolute;
    inset: 0;
    background-color: var(--detail-color);
    opacity: 0.62;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
}

@media (prefers-color-scheme: dark) {
    .milestone-blob { opacity: 1; }
}

.milestone-num {
    position: relative;
    font-weight: 800;
    font-size: 1.2rem;
    color: #3A2900;
}

@media (prefers-color-scheme: dark) {
    .milestone-num { color: #241A00; }
}

.milestone-label {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--main-color);
}

/* Tramo 1 (7-29 días): + anillo. En amarillo (no --border-color): la
   lavanda se perdía contra el propio fondo del modal (poco contraste,
   apenas se notaba). El amarillo, además, adelanta visualmente el color
   de acierto al que pasa el blob entero a partir del tramo 2 (30+). */
.milestone-badge.tier-1 .milestone-chip {
    box-shadow: 0 0 6px 3px var(--accent-color);
    border-radius: 50%;
}

/* Tramo 2 (30-99 días): + el blob pasa a color de acierto. */
.milestone-badge.tier-2 .milestone-chip {
    box-shadow: 0 0 0 3px var(--accent-color);
    border-radius: 50%;
}

.milestone-badge.tier-2 .milestone-blob {
    background-color: var(--accent-color);
    opacity: 0.85;
}

/* Tramo 3 (100+ días): + resplandor y chip más grande. */
.milestone-badge.tier-3 .milestone-chip {
    width: 64px;
    height: 64px;
    box-shadow: 0 0 0 3px var(--accent-color);
    border-radius: 50%;
}

.milestone-badge.tier-3 .milestone-glow {
    opacity: 0.55;
}

.milestone-badge.tier-3 .milestone-blob {
    background-color: var(--accent-color);
    opacity: 1;
}

.milestone-badge.tier-3 .milestone-num {
    font-size: 1.4rem;
}

.almost-line {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--main-color);
    opacity: 0.75;
}

/* 💡 PISTAS — mismo lenguaje de píldora que el resto de la cabecera */
.hint-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    color: var(--main-color);
    font-family: inherit;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 6px 12px;
    cursor: pointer;
}

/* 🔎 REVISAR — sustituye al antiguo interruptor "Modo Ayuda" */
.check-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    color: var(--main-color);
    font-family: inherit;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.check-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.check-btn.cooldown {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: var(--border-color);
    color: var(--main-color);
}

/* Reto de hoy ya resuelto: el botón de pistas se queda en su sitio (sigue
   mostrando cuántas quedaron sin usar) pero deja de ser interactivo. */
.hint-chip.game-over {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   📌 CITA SUPERIOR (TABLERO DE JUEGO)
   ============================================================ */
#quote-section {
    padding: 16px 0;
    margin-bottom: 10px;
}

.quote-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

#quote-section .input-row {
    justify-content: flex-start;
    padding-left: 2px;
}

.author-row {
    margin-top: 8px;
    border-top: 1px dashed var(--border-color);
    padding-top: 10px;
}

.quote-word {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
}

.quote-cell, .clue-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* Inputs de las casillas */
.cell-input {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--input-bg);
    color: var(--main-color);
    box-sizing: border-box;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
}

#quote-section .cell-input {
    width: 28px;
    height: 36px;
    font-size: 15px;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
}

#clues-section .cell-input {
    width: 36px;
    height: 42px;
    font-size: 18px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
}

.cell-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 8px rgba(255, 198, 0, 0.4);
}

.clue-cell.free .cell-input {
    border-style: dashed;
    opacity: 0.6;
}

/* Modo Ayuda: letra descubierta y bloqueada (cita y pistas por igual).
   Fondo amarillo -> el texto SIEMPRE debe leerse en un tono oscuro fijo,
   nunca en var(--main-color) (que en modo oscuro es casi blanco). */
.cell-input.cell-locked:not(.cell-hinted),
.cell-input[readonly]:not(.cell-hinted) {
    background-color: var(--accent-color) !important;
    color: #17121f !important;
    -webkit-text-fill-color: #17121f !important;
    opacity: 1 !important;
}

.quote-cell.locked {
    font-size: 16px;
    font-weight: bold;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 8px;
}

.quote-space { width: 8px; height: 36px; }
.cell-number { font-size: 10px; color: var(--text-number); font-weight: 700; }

/* ============================================================
   🤝 RETO DE AMIGOS (banner desde un link compartido, ?c=&t_es=&t_en=)
   ============================================================ */
.challenge-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 16px 0;
    padding: 12px 16px;
    background-color: var(--bg-card);
    border: 1.5px solid var(--accent-color);
    border-left: 6px solid var(--accent-color);
    border-radius: 14px;
    box-sizing: border-box;
}

.challenge-banner-text {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--main-color);
    line-height: 1.4;
}

.challenge-banner-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--main-color);
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
}

/* ============================================================
   📜 TARJETAS DE DEFINICIONES ("Los recuerditos")
   ============================================================ */
.clue-block {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.clue-hint { 
    font-size: 0.95rem; 
    margin: 0 0 12px 0; 
    text-align: left; 
    line-height: 1.4;
    font-weight: 600;
}
.clue-word { justify-content: flex-start; }

/* ============================================================
   🚨 MODALES Y UTILIDADES
   ============================================================ */
.hidden { display: none !important; }

.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000;
}

.modal-content {
    position: relative;
    background-color: var(--input-bg);
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    border: 3px solid var(--main-color);
    max-width: 85%;
    /* Sin esto, el padding/border se suman POR ENCIMA de max-width en vez
       de contarse dentro -- en pantallas estrechas el cuadro real acababa
       siendo más ancho que el límite que max-width prometía. */
    box-sizing: border-box;
    /* Salvaguarda vertical: en pantallas bajas (iPhone X con la barra de
       Safari visible, apaisado, etc.) un modal con mucho contenido (como
       "Cómo jugar") podía salirse por arriba/abajo sin ninguna forma de
       hacer scroll hasta el botón final. */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    color: var(--main-color);
}

.modal-content h2 {
    font-family: -apple-system, 'SF Pro Rounded', 'Segoe UI', 'Inter', sans-serif;
    font-weight: 400;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--main-color);
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
}

.btn-primary {
    background-color: var(--accent-color); color: #17121F;
    border: none; padding: 12px 30px; font-weight: bold; border-radius: 25px; cursor: pointer;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    font-size: 1.05rem;
}

/* Botón discreto para el CTA secundario del modal de victoria (ej. "Retar
   en el otro idioma"), que no debe competir visualmente con "Compartir". */
.btn-secondary {
    background: none;
    color: var(--main-color);
    border: 1.5px solid var(--border-color);
    padding: 9px 24px;
    font-weight: bold;
    font-size: 0.8rem;
    border-radius: 25px;
    cursor: pointer;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 10px auto 0;
}

.btn-secondary:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.modal-farewell {
    margin: 14px 0 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--main-color);
}

/* ============================================================
   📊 TARJETA DE ESTADÍSTICAS (modal de victoria, screenshot-ready)
   ============================================================ */
.stats-grid-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    margin: 16px 0;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}

.stats-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 10px;
    box-sizing: border-box;
}

.stats-grid-wrapper.single-column .stats-column {
    flex: 0 1 220px;
}

/* Línea divisoria sutil entre columnas (solo si hay dos, es decir,
   cuando el segundo .stats-column existe justo a continuación). */
.stats-column + .stats-column {
    border-left: 1px solid var(--border-color);
}

.stats-column-title {
    font-family: -apple-system, 'SF Pro Rounded', 'Segoe UI', 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--main-color);
    margin-bottom: 6px;
}

.stat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Inter', 'Lato', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--main-color);
    line-height: 1.6;
}

.stat-badge {
    margin-top: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.stat-badge.badge-genius {
    background-color: rgba(94, 214, 150, 0.18);
    color: #2f9e63;
}

.stat-badge.badge-fast {
    background-color: rgba(255, 198, 0, 0.22);
    color: #a67c00;
}

@media (prefers-color-scheme: dark) {
    .stat-badge.badge-genius {
        background-color: rgba(94, 214, 150, 0.22);
        color: #7fe3ac;
    }
    .stat-badge.badge-fast {
        background-color: rgba(255, 198, 0, 0.22);
        color: var(--accent-color);
    }
}

/* ❓ MODAL "CÓMO JUGAR" (onboarding) */
.howto-content {
    /* 380px por defecto (igual que antes) en pantallas grandes, pero
       nunca más ancho que el viewport menos un margen -- en un iPhone X
       (375px de ancho) el límite fijo anterior por sí solo ya superaba
       la pantalla entera, antes incluso de sumar el padding del modal. */
    max-width: min(380px, calc(100vw - 32px));
    text-align: left;
}

.howto-content h2 {
    text-align: center;
    margin-top: 0;
}

.howto-list {
    margin: 0 0 22px 0;
    padding-left: 20px;
    line-height: 1.5;
    font-size: 0.95rem;
}

.howto-list li {
    margin-bottom: 10px;
}

/* 🧩 ESQUEMA GRÁFICO: cita <-> pistas (enseña que los números enlazan
   casillas concretas, no posiciones del abecedario). Las casillas imitan
   el aspecto de las del tablero real para que se reconozcan al instante. */
.howto-diagram {
    margin: 4px 0 22px 0;
}

.tutorial-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tutorial-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.tutorial-row-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-number);
}

.tutorial-cells-row,
.tutorial-words-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.tutorial-word {
    display: flex;
    flex-direction: row;
    gap: 3px;
}

.tutorial-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 30px;
    height: 44px;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--input-bg);
    box-sizing: border-box;
    flex-shrink: 0;
}

.tutorial-letter {
    font-weight: bold;
    font-size: 1rem;
    color: var(--main-color);
    line-height: 1;
}

.tutorial-number {
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.3;
    color: #17121F;
    background-color: var(--accent-color);
    border-radius: 4px;
    padding: 1px 5px;
}

.tutorial-connector {
    font-size: 1.1rem;
    color: var(--border-color);
}

.tutorial-warning {
    margin: 14px 0 22px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--main-color);
}

/* Comparación de tiempos en el modal de victoria (reto de amigos, ver
   app.js §12d) -- mismo patrón visual que .tutorial-warning, con el
   acento amarillo para que destaque como un resultado, no como un aviso. */
.modal-challenge-compare {
    margin: 10px 0 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background-color: var(--bg-card);
    border: 1.5px solid var(--accent-color);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--main-color);
}

.howto-content .btn-primary {
    display: block;
    width: 100%;
    font-size: 1.05rem;
    padding: 14px 30px;
    box-sizing: border-box;
}

footer { font-size: 12px; opacity: 0.7; padding: 30px 0; text-align: center; }
footer a { color: var(--main-color); }

/* Botón de texto del footer (abre el modal de Novedades): mismo aspecto
   que el enlace de "Textos Legales" de al lado, sin el cromado por
   defecto de <button> (fondo, borde), para que no se note que uno es
   <a> y el otro <button>. */
.footer-link-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--main-color);
    text-decoration: underline;
    cursor: pointer;
}

/* ============================================================
   🔗 ICONOS DE REDES SOCIALES (footer + modal de victoria)
   ============================================================ */
.social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    color: var(--main-color);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.social-link svg {
    width: 20px;
    height: 20px;
}

/* Mismo relleno sólido en acento que el idioma activo/botones primarios
   (.lang-btn.active en oscuro, .btn-primary), en vez de solo teñir el
   contorno como el resto de iconos del header. */
.social-link:hover,
.social-link:focus-visible {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #17121F;
    outline: none;
}

/* ============================================================
   📢 MODAL DE NOVEDADES
   ============================================================ */
.changelog-list {
    max-width: min(380px, calc(100vw - 32px));
}

.changelog-entry {
    margin-bottom: 18px;
}

.changelog-entry:last-child {
    margin-bottom: 0;
}

.changelog-entry-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.changelog-version {
    font-weight: 800;
    color: var(--main-color);
}

.changelog-date {
    font-size: 0.75rem;
    opacity: 0.6;
}

.changelog-items {
    margin: 0;
    padding-left: 20px;
    line-height: 1.5;
    font-size: 0.9rem;
}

.changelog-items li {
    margin-bottom: 6px;
}

/* ============================================================
   📱 RESPONSIVO: COMPRESIÓN EN MÓVIL AL HACER SCROLL
   ============================================================ */
@media (max-width: 767px) {
    /* Evita el zoom nativo de iOS/Android: bloquea la pantalla, no debe
       moverse ni un milímetro al enfocar un input (Safari fuerza zoom
       por debajo de 16px). !important porque el zoom es un bug crítico. */
    #quote-section .cell-input,
    #clues-section .cell-input {
        font-size: 16px !important;
    }

    /* Casillas de la cita en móvil: SOLO guion bajo (_), nunca recuadro.
       Sin fondo, sin bordes laterales/superiores, sin sombra: una línea
       de suelo pura que imita el aspecto de "_" bajo cada letra. */
    #quote-section .cell-input {
        background: transparent !important;
        border: none !important;
        border-bottom: 3px solid var(--main-color) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Letra correcta en Modo Ayuda: mismo guion bajo, coloreado de acento
       (sin recuadro amarillo, ya que aquí no hay fondo que iluminar). */
    #quote-section .cell-input[readonly]:not(.cell-hinted),
    #quote-section .cell-input.cell-locked:not(.cell-hinted) {
        background: transparent !important;
        border-bottom-color: var(--accent-color) !important;
        color: var(--accent-color) !important;
        -webkit-text-fill-color: var(--accent-color) !important;
    }

    /* Palabras de más de 10 letras (marcadas en app.js/renderQuote) nunca
       se parten a mitad, así que si no caben tienen que encogerse — el
       font-size se deja intacto a propósito (fijo en 16px más abajo,
       #quote-section .cell-input): bajar de eso reactiva el zoom
       automático de Safari al enfocar un input, ya arreglado antes como
       bug crítico.

       En vez de un único salto brusco (28px normal → 20px largas, que se
       notaba como un contraste raro entre palabras de la misma cita), esto
       encoge TODAS las casillas un poco de más según el ancho real de
       pantalla, y las largas ceden un poco extra sobre esa base — así la
       diferencia entre una palabra corta y una larga es siempre pequeña,
       nunca un salto brusco, y jamás hace falta scroll lateral: incluso al
       ancho más estrecho de aquí abajo, 13 letras (el máximo real hoy en
       el banco de citas) caben con margen de sobra.

       Orden importa: las reglas base van primero, las de @media más
       estrecho después, para que ganen en el cascade cuando ambas
       apliquen a la vez (misma especificidad — gana la última en el
       documento, no la más "anidada").

       BUG encontrado y corregido: "#quote-section .cell-input" (1 ID + 1
       clase) le gana en especificidad a ".quote-word--long .cell-input"
       (0 IDs + 2 clases) SIEMPRE, sin importar el orden — un ID pesa más
       que cualquier cantidad de clases. Con eso, el encogido de palabras
       largas nunca llegó a aplicarse de verdad desde que se escribió;
       todas las casillas, largas o no, seguían el ancho base. Verificado
       con un test aislado en Chromium y WebKit antes de corregirlo.
       Arreglo: anclar el propio selector a #quote-section también, para
       que gane en especificidad de verdad, no solo en orden. */
    .quote-word--long {
        gap: 3px;
    }
    #quote-section .quote-word--long .cell-input {
        width: 21px;
    }

    @media (max-width: 480px) {
        #quote-section .cell-input { width: 26px; }
        .quote-word { gap: 3px; }
        #quote-section .quote-word--long .cell-input { width: 21px; }
    }
    @media (max-width: 380px) {
        #quote-section .cell-input { width: 23px; }
        .quote-word { gap: 2px; }
        .quote-word--long { gap: 2px; }
        #quote-section .quote-word--long .cell-input { width: 18px; }
    }
}

/* ============================================================
   🖥️ RESPONSIVO: ESCRITORIO (Definiciones en 2 columnas)
   ============================================================ */
@media (min-width: 768px) {
    #game-container { max-width: 900px; padding: 20px; }

    #clues-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    /* El tope de 380px (ver .howto-content) es para no desbordar un
       móvil estrecho -- en escritorio, con espacio de sobra, se queda
       corto y el modal de "Cómo jugar" se ve raro, más estrecho que su
       propio contenido (lista + esquema de casillas + aviso). */
    .howto-content { max-width: 480px; }
}

/* ============================================================
   🧪 EXPERIMENTO VISUAL (aislado y reversible): cita literaria
   al ganar. Solo se activa vía experimentalRevealQuote() en
   triggerVictory(); quitar esa llamada revierte el efecto al 100%.
   ============================================================ */
.victory-quote-container {
    text-align: center;
    padding: 15px 0;
}

.final-literary-quote {
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.4rem;
    text-align: center;
    margin: 0;
    border: none;
    background: none;
    color: var(--main-color);
}

.final-literary-author {
    display: block;
    margin-top: 12px;
    font-family: 'Inter', 'Lato', sans-serif;
    font-weight: bold;
    font-size: 0.95rem;
    font-style: normal;
    color: var(--main-color);
}

@keyframes fadeInQuote {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeInQuote 0.5s ease;
}

/* ============================================================
   💡 PISTAS LIMITADAS (máx. 5 por partida)
   ============================================================ */

/* Letra revelada por pista estilo tradicional */
.cell-input.cell-hinted {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    color: var(--main-color) !important;
    -webkit-text-fill-color: var(--main-color) !important;
    opacity: 1 !important;
    pointer-events: none;
}

/* Efecto bombilla apagada y botón deshabilitado */
#hint-btn.spent-hints {
    opacity: 0.6;
    cursor: not-allowed;
}
#hint-btn.spent-hints #hint-icon {
    filter: grayscale(1);
    opacity: 0.4;
    display: inline-block;
}