/* Punto de entrada CSS. Importa todo en orden de cascada:
   tokens → reset → layout → componentes → pantallas.
   El HTML solo enlaza este archivo. */

@import url('base/variables.css');
@import url('base/reset.css');
@import url('base/utilities.css');

@import url('layout/app-shell.css');

@import url('components/match-bg.css');
@import url('components/image-overlay.css');
@import url('components/brand.css');
@import url('components/progress-ring.css');
@import url('components/voice-toggle.css');
@import url('components/narrate-toggle.css');
@import url('components/voice-aura.css');
/* Los CSS por-juego (memory-game.css, aliens-game.css, …) y
   games-fullscreen.css NO se importan aquí: app.js los inyecta bajo
   demanda al pulsar una tarjeta de minijuego. games-fullscreen.css
   vive como <link id="games-fullscreen-anchor"> en index.html, y los
   CSS por-juego se insertan ANTES de ese ancla para que la cascada
   de fullscreen pueda sobrescribirlos. */
@import url('components/game-icon.css');
/* La cáscara común de los minijuegos (marquesina, logo 3D y tabla de
   marcas): sí va aquí, porque la marquesina se enseña ANTES de cargar
   el módulo del juego y su CSS. */
@import url('components/game-chrome.css');
@import url('components/minigame-card.css');
@import url('components/reward-picker.css');
@import url('components/activity-cards.css');
@import url('components/config-cards.css');
@import url('components/duo.css');
@import url('components/challenges.css');
@import url('components/board-game.css');
@import url('components/board-3d.css');
@import url('components/button.css');
@import url('components/badge.css');
@import url('components/error-banner.css');
@import url('components/feedback.css');
@import url('components/reaction.css');
@import url('components/player-card.css');
@import url('components/option.css');
@import url('components/answer-form.css');
@import url('components/field.css');
@import url('components/stats.css');
@import url('components/actividades.css');
@import url('components/marcas.css');
@import url('components/catalog.css');
@import url('components/profile.css');
@import url('components/auth-form.css');
@import url('components/auth-overlay.css');
@import url('components/landing.css');
@import url('components/pin-modal.css');
@import url('components/app-footer.css');
@import url('components/question-credit.css');

@import url('screens/question.css');
@import url('screens/result.css');

/* La capa de teléfono va la ÚLTIMA: gana por orden, sin !important. */
@import url('layout/mobile.css');