/* --- ESTILOS: MODO MÁSTER (6 INTENTOS + SCOREBOARD) --- */

.hidden { display: none !important; }

.game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 40px;
}

.section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- CUADRÍCULA SUPERIOR (6 INTENTOS) --- */
.guesses-section {
    margin-bottom: 30px;
    width: 100%;
    max-width: 350px;
}

.top-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Al inyectar JS las 6 filas, se acomodarán con este gap */
    gap: 6px; 
    width: 100%;
}

.top-cell {
    aspect-ratio: 1 / 1;
    background: var(--bg-dark);
    border: 2px solid var(--border-dark);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-primary);
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.top-cell.pop {
    animation: popIn 0.1s ease;
    border-color: var(--neon-blue);
}

@keyframes popIn {
    50% { transform: scale(1.1); }
}

/* --- VIDEOMARCADOR INFERIOR (PALABRA OCULTA) --- */
.target-section {
    background: linear-gradient(to bottom, #131a26, #0a0e17);
    border: 2px solid var(--border-dark);
    border-radius: 16px;
    padding: 30px 20px 40px 20px;
    margin-bottom: 35px;
    width: 100%;
    max-width: 750px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4), inset 0 0 20px rgba(0, 242, 255, 0.05);
    position: relative;
    overflow: hidden;
}

/* Barra de neón superior del marcador */
.target-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: var(--neon-blue);
    box-shadow: 0 0 15px var(--neon-blue);
}

.scoreboard-header {
    text-align: center;
    color: var(--neon-blue);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 20px;
    opacity: 0.8;
}

.phrase-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 30px; /* Gap entre letras y entre palabras */
}

.phrase-word {
    display: flex;
    gap: 8px;
}

/* Estado oculto: Ranura vacía (Dashed border) */
.phrase-letter {
    width: 48px;
    height: 62px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px dashed #2a3441;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2rem;
    font-weight: 900;
    color: transparent; 
    text-transform: uppercase;
    transition: all 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

/* Estado revelado: Panel LED iluminado */
.phrase-letter.revealed {
    background: var(--correct-glass);
    border: 2px solid var(--correct-border);
    color: #ffffff;
    text-shadow: 0 0 12px var(--correct-border);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2), inset 0 0 10px rgba(0, 255, 136, 0.1);
    transform: scale(1.08); /* Hace un efecto de salto/pop al revelarse */
}

/* --- COLORES (Letras Acertadas vs Falladas) --- */
.correct { 
    background: var(--correct-glass) !important; 
    border-color: var(--correct-border) !important; 
    color: var(--correct-border) !important; 
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}
.absent { 
    background: rgba(255, 255, 255, 0.03) !important; 
    border-color: #222 !important; 
    color: #444 !important; 
}

/* --- TECLADO VIRTUAL --- */
.keyboard-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 500px;
    padding: 0 10px;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.key {
    flex: 1; height: 55px; background: var(--card-bg);
    border: 1px solid var(--border-dark); border-radius: 6px;
    color: var(--text-primary); font-weight: 700; font-size: 1rem;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    user-select: none; transition: all 0.2s;
}
.key.wide { flex: 1.5; font-size: 0.85rem; background: #1a2436; }
.key:active { transform: translateY(2px); }

/* --- TOAST & MODAL --- */
.toast {
    position: fixed; top: 10%; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9); color: #fff;
    padding: 10px 20px; border-radius: 5px;
    border: 1px solid var(--neon-blue);
    z-index: 2000; font-weight: bold;
}

.final-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    display: flex; justify-content: center; align-items: center; z-index: 3000;
}
.modal-backdrop {
    position: absolute; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px);
}
.modal-content {
    position: relative; background: var(--card-bg);
    border: 2px solid var(--border-dark); padding: 40px;
    border-radius: 20px; text-align: center; max-width: 400px; width: 90%;
    animation: modalPop 0.4s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- NAVEGACIÓN DIARIA --- */
.daily-nav { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; }
.btn-nav { padding: 5px 15px; font-size: 1.2rem; border-radius: 8px; cursor: pointer; background: transparent; border: 1px solid var(--neon-blue); color: var(--neon-blue); transition: all 0.3s; }
.btn-nav:hover:not(:disabled) { background: rgba(0, 242, 255, 0.1); box-shadow: 0 0 10px var(--neon-blue-glow); }
.btn-nav:disabled { opacity: 0.3; cursor: not-allowed; border-color: var(--text-secondary); color: var(--text-secondary); }
.day-info { text-align: center; min-width: 150px; }
.day-text { font-size: 1.5rem; font-weight: 900; color: var(--neon-blue); letter-spacing: 2px; text-shadow: 0 0 10px var(--neon-blue-glow); }

/* --- TARJETA DE RESULTADOS NEÓN (PUCKDLE) COMPACTA --- */

/* Ajuste clave: overflow-y: auto permite hacer scroll si la pantalla es enana */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000; overflow-y: auto; padding: 15px; box-sizing: border-box;
}

.neon-modal {
    background: var(--bg-color, #080a0f); border: 1px solid var(--neon-blue);
    box-shadow: 0 0 40px rgba(0, 242, 255, 0.15); border-radius: 12px;
    /* Reducimos el padding interior drásticamente */
    padding: 1.5rem 1.2rem; text-align: center; position: relative;
    width: 100%; max-width: 380px; margin: auto;
    background-image: radial-gradient(circle at top, #111827 0%, var(--bg-color) 70%);
}

.modal-header-title { font-size: 1.4rem; font-weight: 900; color: #fff; margin-bottom: 10px; letter-spacing: 2px; }
.modal-top-stats { display: flex; justify-content: center; gap: 30px; margin-bottom: 10px; }
.stat-big-box { display: flex; flex-direction: column; align-items: center; }
.big-number { font-size: 2.5rem; font-weight: 900; line-height: 1; }
.highlight { color: var(--neon-blue); text-shadow: 0 0 15px var(--neon-blue-glow); }
.big-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 700; letter-spacing: 1.5px; margin-top: 5px; text-transform: uppercase; }

/* Mini Grid Wordle - más apretado */
.mini-grid {
    display: grid; gap: 3px; justify-content: center; margin-bottom: 15px;
}
.mini-cell { border-radius: 3px; background-color: rgba(20, 24, 34, 0.8); border: 1px solid var(--border-dark); }
.mini-cell.correct { background-color: #00e676; border-color: #00e676; box-shadow: 0 0 10px rgba(0, 230, 118, 0.4); }
.mini-cell.present { background-color: #ffea00; border-color: #ffea00; box-shadow: 0 0 10px rgba(255, 234, 0, 0.4); }
.mini-cell.absent { background-color: #3a3a3c; border-color: #3a3a3c; }

/* Cronómetro más fino */
.modal-countdown { margin-bottom: 15px; padding: 10px; background: rgba(20, 24, 34, 0.6); border-radius: 8px; border: 1px dashed rgba(255, 255, 255, 0.1); }
.countdown-label { display: block; font-size: 0.7rem; color: var(--text-secondary); font-weight: 700; margin-bottom: 2px; text-transform: uppercase; }
.countdown-time { font-size: 1.8rem; font-weight: 900; color: #fff; letter-spacing: 2px; }

.modal-buttons { display: flex; gap: 10px; margin-bottom: 15px; }

/* Rejilla 2x2 Estadísticas comprimida */
.modal-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; border-top: 1px solid var(--border-dark); padding-top: 15px; }
.stat-box { background: rgba(20, 24, 34, 0.6); padding: 10px 5px; border-radius: 8px; border: 1px solid var(--border-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stat-num { display: block; font-size: 1.3rem; font-weight: 900; color: #fff; margin-bottom: 2px; text-align: center; }
.stat-text { font-size: 0.65rem; color: var(--text-secondary); font-weight: 800; letter-spacing: 1px; text-align: center; text-transform: uppercase; }

/* =========================================
   HOW TO PLAY / FAQ SECTION (Minimalist)
   ========================================= */

.faq-section {
    width: 100%;
    margin: 2rem 0 0 0;
    padding: 4rem 2rem;
    border-top: 1px solid rgba(0, 242, 255, 0.2); 
    border-bottom: 1px solid rgba(0, 242, 255, 0.2);
    background: rgba(13, 17, 26, 0.4); 
    box-sizing: border-box; 
}

.faq-container {
    max-width: 800px; 
    margin: 0 auto;
    text-align: left;
}

.faq-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 2rem;
    letter-spacing: -0.5px;
}

.faq-title .accent {
    color: var(--neon-blue, #00f2ff); 
}

.faq-question {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--neon-blue, #00f2ff);
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
    letter-spacing: -0.3px;
}

.faq-answer {
    font-size: 0.95rem;
    color: var(--text-secondary, #8892b0);
    line-height: 1.6;
    margin-bottom: 0;
}

.faq-answer strong {
    color: #fff;
    font-weight: 700;
}

/* =========================================
   AJUSTES PARA MÓVILES Y ANIMACIONES (Puckdle)
   ========================================= */

/* --- Animación de impacto para el Teclado --- */
.key {
    /* Hacemos que la transición sea un poco más rápida y elástica */
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.key:active {
    /* Efecto de hundimiento y destello neón al pulsar */
    transform: scale(0.85) translateY(2px);
    background-color: var(--neon-blue) !important;
    color: #000 !important;
    box-shadow: 0 0 15px var(--neon-blue);
    border-color: var(--neon-blue);
}

/* --- Ajustes exclusivos para Pantallas Pequeñas --- */
@media (max-width: 768px) {
    /* 1. Encoger el contenedor del marcador */
    .target-section {
        padding: 20px 10px;
        margin-bottom: 20px;
        width: 95%; /* Da un poco de aire a los lados */
    }

    .scoreboard-header {
        font-size: 0.65rem;
        margin-bottom: 15px;
    }

    /* 2. Reducir espacios entre palabras y letras */
    .phrase-container {
        gap: 10px 15px; 
    }

    .phrase-word {
        gap: 4px; 
    }

    /* 3. Encoger las casillas de las letras ocultas */
    .phrase-letter {
        width: 30px;
        height: 40px;
        font-size: 1.5rem;
        border-width: 1px;
        border-radius: 4px;
    }

    /* 4. Encoger ligeramente la cuadrícula superior de 6 intentos para ganar espacio */
    .guesses-section {
        max-width: 260px;
        margin-bottom: 20px;
    }

    .top-cell {
        font-size: 1.3rem;
        border-width: 1px;
        border-radius: 4px;
    }
}