@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

/* =========================================
   1. REGLAS BASE Y FONDOS
========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Nunito', sans-serif;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    display: flex; justify-content: center; align-items: center;
    min-height: 100dvh; 
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* =========================================
   2. CONTENEDORES PRINCIPALES
========================================= */
.quiz-container, .minigame-container {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 30px 25px;
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    width: 95%;
    max-width: 480px;
    text-align: center;
    border: 4px solid #fff;
    animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin: 20px auto;
    max-height: 90dvh;
    overflow-y: auto;
}

.minigame-container { max-width: 800px; padding: 20px; }

/* Barras de scroll limpias */
.quiz-container::-webkit-scrollbar, .minigame-container::-webkit-scrollbar { width: 6px; }
.quiz-container::-webkit-scrollbar-thumb, .minigame-container::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 10px; }

h1 { color: #ff6b6b; font-size: 2.2em; margin-bottom: 10px; text-shadow: 2px 2px 0px #ffe0e0; }
p { color: #666; margin-bottom: 15px; }

/* =========================================
   3. BOTONES Y FORMULARIOS
========================================= */
input { width: 100%; padding: 12px; margin-bottom: 12px; border: 3px solid #e0e0e0; border-radius: 12px; font-family: inherit; text-align: center; font-size: 1.05em; transition: 0.3s; }
input:focus { border-color: #4facfe; outline: none; }

.options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 15px; }
button { padding: 12px; font-size: 1.1em; font-weight: bold; border-radius: 12px; cursor: pointer; border: none; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
button:hover { transform: translateY(-3px) scale(1.02); }

.btn-primary { background: #4facfe; color: white; box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3); width: 100%; }
.btn-secondary { background: #f0f0f0; color: #555; }
.nav-btn { background: #ff6b6b; color: white; padding: 10px 20px; text-decoration: none; border-radius: 12px; font-weight: bold; display: inline-block; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3); border: none; cursor: pointer;}

/* =========================================
   4. ELEMENTOS DEL JUEGO (NIVELES)
========================================= */
.header-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-weight: bold; color: #4facfe; font-size: 1.1em; }
.level-badge { background: #ffd700; color: #b8860b; padding: 6px 15px; border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

.voice-controls { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.btn-icon { background: #f0f4f8; color: #333; border-radius: 20px; padding: 10px 15px; border: 2px solid #e1e8ed; flex-grow: 1; }
.btn-icon:hover { background: #e1f5fe; border-color: #4facfe; color: #0288d1; }
.recording { background: #ff4757 !important; color: white !important; animation: pulseMic 1s infinite; }

.question { font-size: 1.2em; margin-bottom: 20px; color: #333; font-weight: 900; }
.correct { background-color: #a8e063 !important; color: white !important; }
.wrong { background-color: #ff9a9e !important; color: white !important; }
.hidden { display: none !important; }

#score-board { margin-top: 15px; font-size: 1.1em; font-weight: 900; color: #ff6b6b; background: #fff0f0; padding: 8px 15px; border-radius: 15px; display: inline-block; }

/* =========================================
   5. MEDIDOR DE ACENTO
========================================= */
#pronunciation-feedback { margin-bottom: 20px; padding: 15px; border-radius: 15px; text-align: center; font-size: 1.05em; animation: popIn 0.3s ease-out; }
.feedback-good { background-color: #e8f5e9; color: #2e7d32; border: 2px solid #81c784; }
.feedback-bad { background-color: #fff3e0; color: #e65100; border: 2px solid #ffb74d; }
.feedback-error { background-color: #ffebee; color: #c62828; border: 2px solid #ef5350; }
.accuracy-bar-bg { background: #e0e0e0; height: 12px; border-radius: 6px; margin-top: 12px; overflow: hidden; width: 100%; }
.accuracy-bar-fill { height: 100%; transition: width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* =========================================
   6. SECCIÓN DE MINIJUEGOS (MENÚ Y JUEGOS)
========================================= */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-top: 20px; padding-bottom: 10px;}
.menu-card { 
    background: #fff; border: 4px solid #4facfe; border-radius: 20px; padding: 20px 10px; 
    font-size: 1.2em; font-weight: 900; color: #333; cursor: pointer; 
    transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 8px 15px rgba(0,0,0,0.1); 
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.menu-card:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 12px 20px rgba(0,0,0,0.15); border-color: #ff6b6b; color: #ff6b6b; }
.menu-icon { font-size: 2.5em; }

.game-section { margin-bottom: 20px; margin-top: 10px; background: #fcfcfc; padding: 20px; border-radius: 20px; border: 2px solid #f0f0f0; animation: popIn 0.3s ease-out;}
.game-title { color: #4facfe; font-size: 1.6em; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;}
.game-msg { font-size: 1.1em; font-weight: bold; margin-bottom: 15px; color: #ff6b6b; min-height: 25px; }

/* Corrección de cuadrículas */
.alphabet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 10px; margin-top: 15px; }
.letter-card { 
    background: #fff; border: 3px solid #4facfe; border-radius: 15px; padding: 10px 5px; 
    font-size: 1.6em; font-weight: 900; color: #ff6b6b; cursor: pointer; transition: transform 0.2s; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.letter-card:hover { transform: scale(1.1); background: #e1f5fe; }
.phonetic { font-size: 0.45em; color: #888; margin-top: 2px; font-weight: bold; text-transform: lowercase; }

.color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
.color-card { height: 90px; border-radius: 15px; cursor: pointer; border: 4px solid #f0f0f0; transition: transform 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
.color-card:hover { transform: scale(1.05); border-color: #333; }

.safari-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
.animal-card { font-size: 3em; background: #fff; border: 4px solid #f0f0f0; border-radius: 20px; padding: 10px; cursor: pointer; transition: transform 0.2s; display: flex; justify-content: center; align-items: center;}
.animal-card:hover { transform: scale(1.1); border-color: #a8e063; }

.builder-box { min-height: 75px; background: #f0f4f8; border-radius: 15px; margin-bottom: 15px; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px; border: 3px dashed #ccc;}
.builder-letter { font-size: 1.8em; font-weight: bold; background: #fff; border: 3px solid #ffd700; color: #333; padding: 10px 20px; border-radius: 12px; cursor: pointer; transition: transform 0.2s; }
.builder-letter:hover { transform: scale(1.1); background: #fffde7; }

.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 15px; perspective: 1000px; }
.memory-card { background: #4facfe; color: transparent; font-size: 1.5em; font-weight: bold; border-radius: 12px; height: 80px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.4s, background 0.3s; user-select: none; border: 3px solid #2196f3; }
.memory-card.flipped { background: #fff; color: #333; border-color: #ff6b6b; transform: rotateY(180deg); cursor: default; }
.memory-card.matched { background: #a8e063; color: white; border-color: #8cc63f; transform: rotateY(180deg); cursor: default; }
.memory-card .content { transform: rotateY(180deg); display: none; }
.memory-card.flipped .content, .memory-card.matched .content { display: block; }

/* =========================================
   7. RANKING RETRO ARCADE (FIREBASE)
========================================= */
.crown-icon { cursor: pointer; transition: transform 0.2s; display: inline-block; filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.2)); font-size: 1.2em;}
.crown-icon:hover { transform: scale(1.3) rotate(15deg); }
.game-score { font-weight: 900; color: #ff9800; font-size: 1.2em; margin-bottom: 15px; background: #fff3e0; display: inline-block; padding: 5px 20px; border-radius: 15px; border: 2px dashed #ffb74d; }

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: white; padding: 35px 25px; border-radius: 25px; text-align: center; box-shadow: 0 15px 35px rgba(0,0,0,0.2); animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); max-width: 400px; width: 90%; }

/* Estilos de la máquina arcade */
.retro-board { background: #111 !important; border: 6px solid #f39c12 !important; box-shadow: 0 0 20px #f39c12, inset 0 0 20px #f39c12 !important; border-radius: 15px !important; padding: 25px !important;}
.retro-list-container { background: #000; padding: 15px; border: 2px solid #333; border-radius: 8px; margin-bottom: 20px;}
.retro-list { list-style: none; padding: 0; margin: 0; color: #0f0; font-family: 'Courier New', Courier, monospace; font-size: 1.3em; font-weight: bold; text-align: left; }
.retro-list li { display: flex; justify-content: space-between; border-bottom: 1px dashed #333; padding: 10px 0; text-transform: uppercase;}
.retro-list li:nth-child(1) { color: #ffd700; font-size: 1.2em; text-shadow: 0 0 5px #ffd700; }
.retro-list li:nth-child(2) { color: #c0c0c0; text-shadow: 0 0 3px #c0c0c0; }
.retro-list li:nth-child(3) { color: #cd7f32; }

.retro-input { width: 100% !important; max-width: 200px; text-align: center; text-transform: uppercase; font-family: 'Courier New', Courier, monospace !important; font-weight: bold; font-size: 1.2em !important; background: #222 !important; color: #0f0 !important; border: 2px solid #0f0 !important; margin-bottom: 10px; border-radius: 5px; }
.retro-input:focus { border-color: #fff !important; outline: none; box-shadow: 0 0 10px #0f0; }

/* =========================================
   8. MEDIA QUERIES (MÓVILES PEQUEÑOS)
========================================= */
@media (max-width: 480px) {
    h1 { font-size: 1.8em; }
    .quiz-container, .minigame-container { padding: 20px 15px; width: 95%; border-width: 2px; }
    .alphabet-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .color-grid, .safari-grid { grid-template-columns: repeat(2, 1fr); }
    .memory-grid { grid-template-columns: repeat(3, 1fr); }
    .retro-list { font-size: 1.1em; }
    .menu-grid { grid-template-columns: repeat(2, 1fr); }
}