:root {
--primary: #0078d4;
--bg-glass: rgba(255, 255, 255, 0.15);
--text-color: #ffffff;
}

body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
background-color: #333;
}

/* Fondo dinámico estilo Bing */
#background-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: -1;
transition: background-image 1s ease-in-out;
filter: brightness(0.7);
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.5));
display: flex;
align-items: center;
justify-content: center;
}

/* Contenedor del Quiz */
.quiz-card {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 30px;
border-radius: 12px;
width: 90%;
max-width: 500px;
color: var/text-color;
text-align: center;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
}

h2 { margin-top: 0; color: white; font-weight: 600; }
.progress { font-size: 0.9em; opacity: 0.8; margin-bottom: 20px; color: #ddd;}

.options-container {
display: grid;
gap: 12px;
margin-top: 20px;
}

.option-btn {
background: var(--bg-glass);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
font-size: 16px;
text-align: left;
}

.option-btn:hover { background: rgba(255, 255, 255, 0.3); }
.option-btn.correct { background: #28a745 !important; border-color: #28a745; }
.option-btn.wrong { background: #dc3545 !important; border-color: #dc3545; }

.feedback { margin-top: 20px; min-height: 40px; font-weight: 500; }

.hidden { display: none; }

.btn-next {
margin-top: 20px;
padding: 10px 25px;
background: var(--primary);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}

/* Pantalla de inicio personalizada */
.start-btn {
font-size: 3rem;
background: none;
border: none;
cursor: pointer;
color: white;
animation: pulse 2s infinite;
}

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

// Configuración de los 7 Quizzes (uno para cada día de la semana)
// 0 = Domingo, 1 = Lunes, etc.
const dailyQuizzes = [
{ // DOMINGO - Naturaleza
topic: "Naturaleza Salvaje",
bg: "https://images.unsplash.com/photo-1546182990-dffeafbe841d?q=80&w=1600",
questions: [
{ q: "¿Cuál es el mamífero más grande del mundo?", a: ["Elefante Africano", "Ballena Azul", "Tiburón Ballena"], correct: 1 },
{ q: "¿Qué animal es conocido como el 'Rey de la Selva'?", a: ["Tigre", "Gorila", "León"], correct: 2 },
{ q: "¿Cuántos corazones tiene un pulpo?", a: ["Uno", "Tres", "Ocho"], correct: 1 }
]
},
{ // LUNES - Geografía
topic: "Geografía Mundial",
bg: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1600",
questions: [
{ q: "¿Cuál es el país más grande del mundo?", a: ["Canadá", "China", "Rusia"], correct: 2 },
{ q: "¿En qué país se encuentra Machu Picchu?", a: ["Chile", "Perú", "Colombia"], correct: 1 },
{ q: "¿Cuál es el río más largo del mundo?", a: ["Nilo", "Amazonas", "Misisipi"], correct: 1 }
]
},
{ // MARTES - Espacio
topic: "El Espacio Infinito",
bg: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1600",
questions: [
{ q: "¿Cuál es el planeta más cercano al Sol?", a: ["Marte", "Venus", "Mercurio"], correct: 2 },
{ q: "¿Qué planeta es conocido como el 'Planeta Rojo'?", a: ["Marte", "Júpiter", "Saturno"], correct: 0 },
{ q: "¿Cuál es la galaxia en la que vivimos?", a: ["Andrómeda", "Vía Láctea", "Sombrero"], correct: 1 }
]
},
{ // MIÉRCOLES - Historia
topic: "Historia y Civilizaciones",
bg: "https://images.unsplash.com/photo-1503177119275-0aa32b3a9368?q=80&w=1600",
questions: [
{ q: "¿Quién pintó la Mona Lisa?", a: ["Miguel Ángel", "Leonardo da Vinci", "Rafael"], correct: 1 },
{ q: "¿En qué año llegó el hombre a la Luna?", a: ["1969", "1955", "1972"], correct: 0 },
{ q: "¿Qué civilización construyó las pirámides de Giza?", a: ["Aztecas", "Romanos", "Egipcios"], correct: 2 }
]
},
{ // JUEVES - Inventos
topic: "Grandes Inventos",
bg: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=1600",
questions: [
{ q: "¿Quién patentó la bombilla eléctrica?", a: ["Nikola Tesla", "Thomas Edison", "Alexander Graham Bell"], correct: 1 },
{ q: "¿Cuál fue el primer lenguaje de programación?", a: ["Fortran", "Ada Lovelace", "C"], correct: 1 },
{ q: "¿En qué siglo se inventó la imprenta?", a: ["Siglo XII", "Siglo XV", "Siglo XVIII"], correct: 1 }
]
},
{ // VIERNES - Cine y Pop
topic: "Cultura Pop",
bg: "https://images.unsplash.com/photo-1485846234645-a62644f84728?q=80&w=1600",
questions: [
{ q: "¿Quién interpreta a Iron Man en Marvel?", a: ["Chris Evans", "Robert Downey Jr.", "Chris Hemsworth"], correct: 1 },
{ q: "¿Cuál es la película más taquillera de la historia?", a: ["Avatar", "Avengers: Endgame", "Titanic"], correct: 0 },
{ q: "¿En qué ciudad viven los Simpson?", a: ["Shelbyville", "Quahog", "Springfield"], correct: 2 }
]
},
{ // SÁBADO - Curiosidades
topic: "Curiosidades del Mundo",
bg: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?q=80&w=1600",
questions: [
{ q: "¿Cuántos huesos tiene un adulto humano?", a: ["206", "180", "250"], correct: 0 },
{ q: "¿Cuál es la ciudad de los canales?", a: ["París", "Venecia", "Ámsterdam"], correct: 1 },
{ q: "¿Qué gas necesitamos para respirar?", a: ["Hidrógeno", "Oxígeno", "Nitrógeno"], correct: 1 }
]
}
];

// Lógica del juego
let currentQuiz;
let currentQuestionIndex = 0;
let score = 0;

function init() {
const today = new Date().getDay(); // Obtiene día del 0 al 6
currentQuiz = dailyQuizzes[today];

// Establecer fondo y tema
document.getElementById('background-container').style.backgroundImage = `url('${currentQuiz.bg}')`;
document.getElementById('today-topic-label').innerText = `Hoy toca: ${currentQuiz.topic}`;
}

function startQuiz() {
document.getElementById('start-screen').classList.add('hidden');
document.getElementById('quiz-screen').classList.remove('hidden');
showQuestion();
}

function showQuestion() {
const question = currentQuiz.questions[currentQuestionIndex];
document.getElementById('progress-text').innerText = `Pregunta ${currentQuestionIndex + 1} de 3`;
document.getElementById('question-text').innerText = question.q;
document.getElementById('feedback').innerText = "";
document.getElementById('next-btn').classList.add('hidden');

const optionsContainer = document.getElementById('options');
optionsContainer.innerHTML = "";

question.a.forEach((option, index) => {
const btn = document.createElement('button');
btn.className = 'option-btn';
btn.innerText = option;
btn.onclick = () => selectOption(index, btn);
optionsContainer.appendChild(btn);
});
}

function selectOption(selectedIndex, btn) {
const correctIndex = currentQuiz.questions[currentQuestionIndex].correct;
const buttons = document.querySelectorAll('.option-btn');

// Deshabilitar botones
buttons.forEach(b => b.style.pointerEvents = 'none');

if (selectedIndex === correctIndex) {
btn.classList.add('correct');
document.getElementById('feedback').innerText = "¡Correcto!";
score++;
} else {
btn.classList.add('wrong');
buttons[correctIndex].classList.add('correct');
document.getElementById('feedback').innerText = "Incorrecto.";
}

document.getElementById('next-btn').classList.remove('hidden');
}

function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < currentQuiz.questions.length) {
showQuestion();
} else {
showResults();
}
}

function showResults() {
document.getElementById('quiz-screen').classList.add('hidden');
document.getElementById('result-screen').classList.remove('hidden');
document.getElementById('score-text').innerText = `Tu puntaje: ${score} / 3`;
}

// Iniciar al cargar
init();