# Portal web

El portal web es la interfaz principal de NovelasVM. Muestra el catálogo de novelas disponibles y permite cambiar entre temas visuales.

## Archivos

- `var-www/index.html` — Estructura del portal.
- `var-www/assets/styles.css` — Tokens y estilos de los tres temas.
- `var-www/assets/app.js` — Lógica de carga del catálogo, renderizado y temas.

## Funcionalidades

- **Catálogo dinámico**: carga `/games.json` y renderiza tarjetas.
- **Selector de temas**: oscuro, claro, inmersivo. Persistencia en `localStorage`.
- **Badges de motor**: cada tarjeta muestra el motor (Ren'Py, Unity, Web, ONScripter-RU).
- **Portadas**: si `cover` está definido en `game.json`, se muestra; si no, placeholder.
- **Responsive**: de 1 columna en móvil hasta 4 en pantallas grandes.
- **Sin emojis**: todos los iconos son SVG inline.

## Metadatos mostrados

Cada tarjeta muestra:
- Portada (16:9)
- Badge del motor
- Título y subtítulo
- Descripción (máximo 2 líneas)
- Versión, autor y fecha
- Botón "Jugar"

## Personalización

### Cambiar tipografía

Edita la fuente en `var-www/index.html`:

```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&..." rel="stylesheet">
```

Y actualiza `--font-sans` en `styles.css`.

### Añadir un nuevo tema

1. Añade `[data-theme="mi-tema"]` en `styles.css` con sus tokens.
2. Añade un botón en `index.html` con `data-theme-value="mi-tema"`.
3. Opcionalmente actualiza `THEMES` en `app.js`.

### Añadir motor/badge

1. Añade el color `--engine-<motor>` en cada tema de `styles.css`.
2. Añade clase `.engine-badge.<motor>`.
3. Añade entrada en `engineConfig` de `app.js`.
4. Añade orden en `engineOrder` del sort.

## Ordenación

Los juegos se ordenan:
1. Por motor: `renpy`, `umineko-ru`, `unity`, `web`.
2. Por título alfabéticamente dentro de cada motor.