Ruleta de Ciencias Sociales

[MODO] Actúa como un desarrollador de juegos HTML5 experto en gamificación, diseño UI/UX (Glassmorphism) y audio web (Tone.js, Chroma.js, Canvas API).

[AUDIENCIA] Docente de Ciencias Sociales.

[TAREA] Crea un juego de "Ruleta" evaluativo en un ÚNICO archivo HTML.

[TECNOLOGÍAS]
1.  **Archivo Único**: HTML + CSS + JavaScript.
2.  **Estilos**: **Glassmorphism** (fondo oscuro #0c0a18, paneles con `backdrop-filter: blur(12px)`).
3.  **Fuentes**: 'Orbitron' para títulos, 'Roboto' para texto.
4.  **Audio**: Usa **Tone.js** (cargado de CDN) para sonidos (spin, tick, correct, incorrect, powerup, win).
5.  **Gráficos**:
    * Usa la **API de Canvas** para dibujar la ruleta dinámicamente.
    * Usa **Chroma.js** (CDN) para generar una paleta de colores (`chroma.scale`) para los segmentos.
    * Usa un canvas de fondo (`particle-background`) para animar partículas flotantes.
6.  **Tailwind CSS**: Cargado de CDN.
7.  **MathJax**: Incluir soporte (aunque el banco de Sociales no lo use).

[BANCO DE PREGUNTAS (CIENCIAS SOCIALES)]
El banco (`questionDatabase`) debe ser un objeto JS interno con 3 categorías (`civilizaciones`, `historia_moderna`, `geografia`).
Cada pregunta debe tener: `question` (string), `options` (array de 4 strings), `correct` (index), `explanation` (string).

[MECÁNICA DEL JUEGO (EVALUATIVA)]

1.  **Pantalla de Inicio (`start-screen`)**:
    * Permitir seleccionar múltiples **Temas** (checkboxes).
    * Mostrar el conteo total de preguntas disponibles (`available-questions-count`).
    * Permitir elegir **Modo de Juego** (10, 15, 20, 30 preguntas).
    * Botón "Iniciar Desafío" deshabilitado hasta que se seleccione al menos 1 tema y 1 modo.

2.  **Pantalla de Juego (`game-screen`)**:
    * **Panel de Estadísticas (`stats-panel`)**: Vidas (5), Puntaje, Contestadas, Faltantes.
    * **Ruleta (Canvas)**:
        * Dibujar la ruleta con segmentos dinámicos usando `rCtx.arc`.
        * Los segmentos deben ser una mezcla de **Preguntas** (con ícono ❓ y color de `chroma.scale`) y 4 **Power-ups** fijos (con emoji y color propio).
        * **Power-ups**: 'Vida Extra' (❤️), 'Puntos Dobles' (⭐), 'Bomba de Preguntas' (💣), 'Escudo Divino' (🛡️).
    * **Botón "GIRAR"**:
        * Debe estar deshabilitado mientras gira (`isSpinning`).
        * Reproducir sonido `spin` de `Tone.NoiseSynth`.
        * Animar la rotación usando `ruletaCanvas.style.transform = 'rotate(Ndeg)'` con una transición CSS.
        * Calcular el segmento ganador y llamar a `handleSegmentResult`.

3.  **Flujo de Segmento**:
    * El segmento ganador se elimina de la ruleta (`gameState.segments.splice`) y se redibuja.
    * **Si es Power-up**: Aplicar efecto (`gameState.lives++`, `gameState.doublePoints = true`, etc.), mostrar `feedback-modal` con la descripción del power-up.
    * **Si es Pregunta**: Mostrar `question-modal` con la pregunta y opciones.

4.  **Flujo de Respuesta**:
    * Al responder: `questionsAnswered++`.
    * **Correcto**: `score += 100` (o 200 si `doublePoints`), sonido `correct`.
    * **Incorrecto**: `lives--` (a menos que `activeShield`), sonido `incorrect`.
    * Mostrar `feedback-modal` con la `explanation` de la pregunta.

5.  **Modales Colapsables**:
    * Todos los modales (`question`, `results`, `feedback`, `prompt`) deben ser "colapsables" (un botón `−` que oculta el cuerpo del modal y cambia a `⊕`).

6.  **Modal de Fin de Juego (`results-modal`)**:
    * Mostrar si `lives <= 0` o (preguntas restantes === 0).
    * **Contenido**:
        * Estrellas de calificación (⭐ o ☆).
        * Puntaje Final, Correctas, Vidas.
        * **Nota Final (0.0 a 5.0)**: ( (correctas / totalPreguntas) * 4.5 ) + ( (vidas / 5) * 0.5 ).
    * **Acción**: Botón "Jugar de Nuevo" (vuelve al Menú).

[RESTRICCIONES]
- El código debe estar bien comentado.
- El audio DEBE ser inicializado por una acción del usuario (ej. "Iniciar Desafío") usando `Tone.start()`.
- NO incluyas explicaciones antes/después del código.