Fixed missing * in CSS comments.

- Add runners and sources charts to modern and platinum templates
- Update responsive layout to use grid for multiple charts
- Update .gitignore to exclude pga.db

.gitignore

@@ -259,3 +259,4 @@ flycheck_*.el
 # Built Visual Studio Code Extensions
 *.vsix
 
+pga.db

AGENTS.md

@@ -0,0 +1,80 @@
+# CLAUDE.md
+
+This file provides guidance to AI coding agents when working with code in this repository.
+
+## Project Overview
+
+Lutris Year in Review is a Python script that generates a static HTML playtime report from a Lutris gaming platform SQLite database. The report displays game playtime statistics with interactive Chart.js visualizations.
+
+## Commands
+
+Generate report with defaults:
+```bash
+python generate_report.py
+```
+
+Generate report with modern style:
+```bash
+python generate_report.py --style glassmorphism --output report.html
+python generate_report.py --style brutalism --output report.html
+python generate_report.py --style skeuo --output report.html
+python generate_report.py --style neumorphism --output report.html
+python generate_report.py --style material --output report.html
+python generate_report.py --style flat --output report.html
+python generate_report.py --style synthwave --output report.html
+python generate_report.py --style vaporwave --output report.html
+python generate_report.py --style terminal --output report.html
+python generate_report.py --style highcontrast --output report.html
+```
+
+Generate report with legacy Platinum template:
+```bash
+python generate_report.py --template templates/platinum.html --output report.html
+```
+
+All options:
+```bash
+python generate_report.py --db pga.db --output report.html --top 10 --background background.png --style glassmorphism
+```
+
+## Architecture
+
+**Report generator (`generate_report.py`):**
+- Reads Lutris SQLite database (`pga.db`) containing games, categories, and playtime data
+- Embeds all data (games JSON, background image as base64) directly into a self-contained HTML file
+- Loads HTML template from `templates/` folder (default: `templates/platinum.html`)
+
+**HTML templates (`templates/`):**
+- **modern.html**: Unified template for modern styles (brutalism, glassmorphism, skeuo, neumorphism, material, flat, synthwave, vaporwave, terminal, highcontrast)
+- **platinum.html**: Legacy Mac OS 9 Platinum visual style (separate template due to unique structure)
+- All templates use Chart.js doughnut charts and dynamic JavaScript filtering
+- Placeholder tokens like `__ALL_GAMES__`, `__BACKGROUND_IMAGE__` are replaced at generation time
+- Modern templates support light/dark/auto theme toggle button
+
+**Style system (`styles.py`):**
+- CSS definitions for each modern style (brutalism, glassmorphism, skeuo, neumorphism, material, flat, synthwave, vaporwave, terminal, highcontrast)
+- Theme configurations (colors, fonts, chart options) injected via `__THEME_CSS__`
+- Use `--style` argument to select a modern style instead of `--template`
+
+**Javascript (`templates/script.js`):**
+- A single common script is used for each modern style (brutalism, glassmorphism, skeuo, neumorphism, material, flat, synthwave, vaporwave, terminal, highcontrast)
+- Theme configurations (colors, fonts, chart options) injected via `__THEME_CONFIG__`
+- Data inserted via `__ALL_GAMES__` and `__TOP_N__`
+
+**Database schema (`schema.py`):**
+- Reference file documenting Lutris database structure
+- Key tables: `games` (with `playtime`, `service` fields), `categories`, `games_categories` (many-to-many join)
+
+**Generated output (`report.html`):**
+- Fully static, can be hosted on any web server
+- Client-side filtering by service (Steam, GOG, itch.io, local)
+- Expandable "Others" row in games table
+- Light/dark/auto theme toggle button with persistent preference
+- Responsive design for mobile and desktop
+
+## Key Data Relationships
+
+- Games have a `service` field (steam, gog, itchio, humblebundle, or NULL for local)
+- Games link to categories via `games_categories` join table
+- Categories like `.hidden` and `favorite` are filtered out in the report display
+- `playtime` is cumulative hours (REAL), not per-session data

CLAUDE.md

@@ -1,43 +1 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-Lutris Year in Review is a Python script that generates a static HTML playtime report from a Lutris gaming platform SQLite database. The report displays game playtime statistics with interactive Chart.js visualizations.
-
-## Commands
-
-Generate report with defaults:
-```bash
-python generate_report.py
-```
-
-Generate report with custom options:
-```bash
-python generate_report.py --db pga.db --output report.html --top 10 --background background.png
-```
-
-## Architecture
-
-**Single-file generator (`generate_report.py`):**
-- Reads Lutris SQLite database (`pga.db`) containing games, categories, and playtime data
-- Embeds all data (games JSON, background image as base64) directly into a self-contained HTML file
-- HTML template with Chart.js doughnut chart and dynamic JavaScript filtering is embedded as a string constant (`HTML_TEMPLATE`)
-
-**Database schema (`schema.py`):**
-- Reference file documenting Lutris database structure
-- Key tables: `games` (with `playtime`, `service` fields), `categories`, `games_categories` (many-to-many join)
-
-**Generated output (`report.html`):**
-- Fully static, can be hosted on any web server
-- Client-side filtering by service (Steam, GOG, itch.io, local)
-- Expandable "Others" row in games table
-- Light/dark mode support via CSS `prefers-color-scheme`
-
-## Key Data Relationships
-
-- Games have a `service` field (steam, gog, itchio, humblebundle, or NULL for local)
-- Games link to categories via `games_categories` join table
-- Categories like `.hidden`, `favorite`, `Horny` are filtered out in the report
-- `playtime` is cumulative hours (REAL), not per-session data
+@AGENTS.md

styles.py

@@ -0,0 +1,341 @@
+"""CSS styles and theme configurations for modern templates."""
+
+####################################################################################################
+# Copyright (C) 2026 by WallyHackenslacker wallyhackenslacker@noreply.git.hackenslacker.space      #
+#                                                                                                  #
+# Permission to use, copy, modify, and/or distribute this software for any purpose with or without #
+# fee is hereby granted.                                                                           #
+#                                                                                                  #
+# THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS     #
+# SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE  #
+# AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES      #
+# WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,        #
+# NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE #
+# OF THIS SOFTWARE.                                                                                #
+####################################################################################################
+
+import json
+from pathlib import Path
+
+# Directory where templates are located
+TEMPLATES_DIR = Path(__file__).parent / "templates"
+
+# Theme configurations for Chart.js
+THEME_CONFIGS = {
+    "brutalism": {
+        "colors": [
+            "#ff0000",
+            "#0000ff",
+            "#ffff00",
+            "#00ff00",
+            "#ff00ff",
+            "#00ffff",
+            "#ff8800",
+            "#8800ff",
+            "#0088ff",
+            "#88ff00",
+            "#888888",
+        ],
+        "fontFamily": "'Courier New', monospace",
+        "fontWeight": "bold",
+        "pointStyle": "rect",
+        "textColorLight": "#000000",
+        "textColorDark": "#ffffff",
+        "borderColorLight": "#000000",
+        "borderColorDark": "#ffffff",
+        "borderWidth": 3,
+        "tooltipBg": "#000000",
+        "tooltipTitleColor": "#ffffff",
+        "tooltipBodyColor": "#ffffff",
+        "tooltipBorderColor": "#ffffff",
+        "tooltipBorderWidth": 2,
+        "tooltipCornerRadius": 0,
+        "uppercaseTooltip": True,
+    },
+    "glassmorphism": {
+        "colors": [
+            "#6366f1",
+            "#8b5cf6",
+            "#ec4899",
+            "#f43f5e",
+            "#f97316",
+            "#eab308",
+            "#22c55e",
+            "#14b8a6",
+            "#06b6d4",
+            "#3b82f6",
+            "#64748b",
+        ],
+        "fontFamily": "'Inter', sans-serif",
+        "fontWeight": "normal",
+        "pointStyle": "circle",
+        "textColorLight": "#1a1a2e",
+        "textColorDark": "#f0f0f5",
+        "borderColorLight": "rgba(255, 255, 255, 0.2)",
+        "borderColorDark": "rgba(255, 255, 255, 0.2)",
+        "borderWidth": 2,
+        "tooltipBg": "rgba(0, 0, 0, 0.8)",
+        "tooltipTitleColor": "#ffffff",
+        "tooltipBodyColor": "#ffffff",
+        "tooltipBorderColor": "transparent",
+        "tooltipBorderWidth": 0,
+        "tooltipCornerRadius": 8,
+        "uppercaseTooltip": False,
+    },
+    "skeuo": {
+        "colors": [
+            "#8b4a2c",
+            "#a65d37",
+            "#bf7748",
+            "#d58a60",
+            "#e0a97f",
+            "#6d4f34",
+            "#857153",
+            "#9e8362",
+            "#b58f6c",
+            "#c9a67f",
+            "#7f7f7f",
+        ],
+        "fontFamily": "'Trebuchet MS', 'Lucida Grande', sans-serif",
+        "fontWeight": "600",
+        "pointStyle": "rectRounded",
+        "textColorLight": "#2c2218",
+        "textColorDark": "#f4e7d5",
+        "borderColorLight": "rgba(75, 55, 36, 0.35)",
+        "borderColorDark": "rgba(219, 188, 156, 0.3)",
+        "borderWidth": 2,
+        "tooltipBg": "rgba(46, 33, 23, 0.92)",
+        "tooltipTitleColor": "#f4e7d5",
+        "tooltipBodyColor": "#f4e7d5",
+        "tooltipBorderColor": "#d5a67f",
+        "tooltipBorderWidth": 1,
+        "tooltipCornerRadius": 10,
+        "uppercaseTooltip": False,
+    },
+    "neumorphism": {
+        "colors": [
+            "#6366f1",
+            "#8b5cf6",
+            "#ec4899",
+            "#f43f5e",
+            "#f97316",
+            "#eab308",
+            "#22c55e",
+            "#14b8a6",
+            "#06b6d4",
+            "#3b82f6",
+            "#64748b",
+        ],
+        "fontFamily": "'Inter', sans-serif",
+        "fontWeight": "normal",
+        "pointStyle": "circle",
+        "textColorLight": "#2d3436",
+        "textColorDark": "#f0f0f5",
+        "borderColorLight": "rgba(255, 255, 255, 0.3)",
+        "borderColorDark": "rgba(255, 255, 255, 0.3)",
+        "borderWidth": 3,
+        "tooltipBg": "rgba(0, 0, 0, 0.8)",
+        "tooltipTitleColor": "#ffffff",
+        "tooltipBodyColor": "#ffffff",
+        "tooltipBorderColor": "transparent",
+        "tooltipBorderWidth": 0,
+        "tooltipCornerRadius": 8,
+        "uppercaseTooltip": False,
+    },
+    "material": {
+        "colors": [
+            "#6200ee",
+            "#03dac6",
+            "#3700b3",
+            "#018786",
+            "#b00020",
+            "#ff0266",
+            "#aa00ff",
+            "#0091ea",
+            "#00c853",
+            "#ffd600",
+            "#757575",
+        ],
+        "fontFamily": "'Roboto', sans-serif",
+        "fontWeight": "normal",
+        "pointStyle": "circle",
+        "textColorLight": "#212121",
+        "textColorDark": "#ffffff",
+        "borderColorLight": "#ffffff",
+        "borderColorDark": "#1e1e1e",
+        "borderWidth": 2,
+        "tooltipBg": "rgba(97, 97, 97, 0.9)",
+        "tooltipTitleColor": "#ffffff",
+        "tooltipBodyColor": "#ffffff",
+        "tooltipBorderColor": "transparent",
+        "tooltipBorderWidth": 0,
+        "tooltipCornerRadius": 4,
+        "uppercaseTooltip": False,
+    },
+    "flat": {
+        "colors": [
+            "#ffadad",
+            "#ffd6a5",
+            "#fdffb6",
+            "#caffbf",
+            "#9bf6ff",
+            "#a0c4ff",
+            "#bdb2ff",
+            "#ffc6ff",
+            "#ff9aa2",
+            "#e2f0cb",
+            "#b5ead7",
+        ],
+        "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+        "fontWeight": "500",
+        "pointStyle": "circle",
+        "textColorLight": "#1d1d1f",
+        "textColorDark": "#f5f5f7",
+        "borderColorLight": "#ffffff",
+        "borderColorDark": "#1c1c1e",
+        "borderWidth": 2,
+        "tooltipBg": "rgba(0, 0, 0, 0.8)",
+        "tooltipTitleColor": "#ffffff",
+        "tooltipBodyColor": "#ffffff",
+        "tooltipBorderColor": "transparent",
+        "tooltipBorderWidth": 0,
+        "tooltipCornerRadius": 12,
+        "uppercaseTooltip": False,
+    },
+    "synthwave": {
+        "colors": [
+            "#ff00ff",
+            "#00ffff",
+            "#ffff00",
+            "#ff0055",
+            "#00ff99",
+            "#7a5af8",
+            "#ff8800",
+            "#ff00aa",
+            "#00ccff",
+            "#ccff00",
+            "#999999",
+        ],
+        "fontFamily": "'Orbitron', 'Segoe UI', sans-serif",
+        "fontWeight": "bold",
+        "pointStyle": "triangle",
+        "textColorLight": "#2d004d",
+        "textColorDark": "#ff00ff",
+        "borderColorLight": "rgba(255, 0, 255, 0.2)",
+        "borderColorDark": "rgba(0, 255, 255, 0.2)",
+        "borderWidth": 2,
+        "tooltipBg": "rgba(45, 0, 77, 0.9)",
+        "tooltipTitleColor": "#00ffff",
+        "tooltipBodyColor": "#ffffff",
+        "tooltipBorderColor": "#ff00ff",
+        "tooltipBorderWidth": 1,
+        "tooltipCornerRadius": 0,
+        "uppercaseTooltip": True,
+    },
+    "vaporwave": {
+        "colors": [
+            "#ff71ce",
+            "#01cdfe",
+            "#05ffa1",
+            "#b967ff",
+            "#fffb96",
+            "#ff99cc",
+            "#99ccff",
+            "#ccff99",
+            "#ffcc99",
+            "#ffffcc",
+            "#e0e0e0",
+        ],
+        "fontFamily": "'MS PGothic', 'Palatino Linotype', serif",
+        "fontWeight": "normal",
+        "pointStyle": "circle",
+        "textColorLight": "#ff71ce",
+        "textColorDark": "#01cdfe",
+        "borderColorLight": "rgba(255, 255, 255, 0.5)",
+        "borderColorDark": "rgba(255, 255, 255, 0.2)",
+        "borderWidth": 1,
+        "tooltipBg": "rgba(255, 113, 206, 0.8)",
+        "tooltipTitleColor": "#ffffff",
+        "tooltipBodyColor": "#ffffff",
+        "tooltipBorderColor": "#01cdfe",
+        "tooltipBorderWidth": 2,
+        "tooltipCornerRadius": 4,
+        "uppercaseTooltip": False,
+    },
+    "terminal": {
+        "colors": [
+            "#00ff00",
+            "#00cc00",
+            "#009900",
+            "#006600",
+            "#003300",
+            "#33ff33",
+            "#66ff66",
+            "#99ff99",
+            "#ccffcc",
+            "#ffffff",
+            "#888888",
+        ],
+        "fontFamily": "'Courier New', Courier, monospace",
+        "fontWeight": "bold",
+        "pointStyle": "rectRot",
+        "textColorLight": "#006600",
+        "textColorDark": "#00ff00",
+        "borderColorLight": "#000000",
+        "borderColorDark": "#00ff00",
+        "borderWidth": 1,
+        "tooltipBg": "#000000",
+        "tooltipTitleColor": "#00ff00",
+        "tooltipBodyColor": "#00ff00",
+        "tooltipBorderColor": "#00ff00",
+        "tooltipBorderWidth": 1,
+        "tooltipCornerRadius": 0,
+        "uppercaseTooltip": True,
+    },
+    "highcontrast": {
+        "colors": [
+            "#888888",
+            "#444444",
+            "#cccccc",
+            "#666666",
+            "#aaaaaa",
+            "#333333",
+            "#dddddd",
+            "#555555",
+            "#bbbbbb",
+            "#222222",
+            "#999999",
+        ],
+        "fontFamily": "Arial, Helvetica, sans-serif",
+        "fontWeight": "900",
+        "pointStyle": "rect",
+        "textColorLight": "#000000",
+        "textColorDark": "#ffffff",
+        "borderColorLight": "#000000",
+        "borderColorDark": "#ffffff",
+        "borderWidth": 4,
+        "tooltipBg": "#000000",
+        "tooltipTitleColor": "#ffffff",
+        "tooltipBodyColor": "#ffffff",
+        "tooltipBorderColor": "#ffffff",
+        "tooltipBorderWidth": 3,
+        "tooltipCornerRadius": 0,
+        "uppercaseTooltip": True,
+    },
+}
+
+
+def get_theme_css(style: str) -> str:
+    """Get the CSS for a given style by reading from the corresponding .css file."""
+    css_file = TEMPLATES_DIR / f"{style}.css"
+    if css_file.exists():
+        return css_file.read_text(encoding="utf-8")
+    # Fallback to glassmorphism if style not found
+    fallback = TEMPLATES_DIR / "glassmorphism.css"
+    return fallback.read_text(encoding="utf-8")
+
+
+def get_theme_config(style: str) -> str:
+    """Get the theme config as JSON string for a given style."""
+    config = THEME_CONFIGS.get(style, THEME_CONFIGS["glassmorphism"])
+    return json.dumps(config)