From ef7b4817a0eb63536bd0e497c334aedb95a6daea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Can=20Erdog=CC=86an?= <can@canerdogan.net>
Date: Mon, 26 Jan 2026 15:02:08 +0300
Subject: [PATCH 01/10] feat(ui): Add gradient support to HexagonLevelButton
 with improved visuals

- Add fillBottom color option for vertical gradient effect
- Implement canvas texture-based gradient fill
- Enhance 3D bevel effects with better highlight/shadow
- Update hexagon color schemes with more vibrant palettes
- Export darkenColor utility function

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/ui/components/HexagonLevelButton.ts | 59 +++++++++++++++-----
 src/ui/themes/GameStyleUITheme.ts       | 74 ++++++++++++++-----------
 2 files changed, 87 insertions(+), 46 deletions(-)

diff --git a/src/ui/components/HexagonLevelButton.ts b/src/ui/components/HexagonLevelButton.ts
index f06e4c7..840a93f 100644
--- a/src/ui/components/HexagonLevelButton.ts
+++ b/src/ui/components/HexagonLevelButton.ts
@@ -1,7 +1,7 @@
 import { EventEmitter } from 'eventemitter3';
 import { IContainer, IGraphics, IText } from '../../contracts/Graphics';
 import { graphics } from '../../graphics/GraphicsEngine';
-import { GameStyleColors, numberToHex } from '../themes/GameStyleUITheme';
+import { GameStyleColors, numberToHex, darkenColor } from '../themes/GameStyleUITheme';
 
 /**
  * Level button state
@@ -13,6 +13,7 @@ export type LevelState = 'locked' | 'available' | 'current' | 'completed';
  */
 export interface HexagonColorScheme {
   fill: number;
+  fillBottom?: number; // Optional bottom gradient color (defaults to darker fill)
   border: number;
   highlight: number;
   text: number;
@@ -303,7 +304,7 @@ export class HexagonLevelButton extends EventEmitter {
    * Render hexagon graphics
    */
   private render(): void {
-    const { size, colorScheme, state } = this.config;
+    const { size, colorScheme } = this.config;
 
     // Clear graphics
     this.shadowGraphics.clear();
@@ -336,39 +337,71 @@ export class HexagonLevelButton extends EventEmitter {
       this.borderGraphics.fill({ color: colors.border });
     }
 
-    // 3. Main fill (blue hexagon)
-    this.drawHexagon(this.fillGraphics, 0, pressOffset, size - borderWidth * 2);
-    this.fillGraphics.fill({ color: colors.fill });
+    // 3. Main fill with gradient (top lighter, bottom darker)
+    const fillSize = size - borderWidth * 2;
+    const fillTop = colors.fill;
+    const fillBottom = colors.fillBottom || darkenColor(colors.fill, 0.15);
+
+    // Draw hexagon shape
+    this.drawHexagon(this.fillGraphics, 0, pressOffset, fillSize);
+
+    // Create gradient texture for fill
+    const textureSize = Math.ceil(fillSize);
+    const gradientTexture = graphics().createCanvasTexture(
+      textureSize,
+      textureSize,
+      (ctx: CanvasRenderingContext2D) => {
+        const gradient = ctx.createLinearGradient(0, 0, 0, textureSize);
+        gradient.addColorStop(0, numberToHex(fillTop));
+        gradient.addColorStop(0.35, numberToHex(fillTop));
+        gradient.addColorStop(1, numberToHex(fillBottom));
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, textureSize, textureSize);
+      }
+    );
+
+    // Apply texture fill with matrix transform to center it
+    try {
+      const matrix = {
+        a: 1, b: 0, c: 0, d: 1,
+        tx: -fillSize / 2,
+        ty: pressOffset - fillSize / 2
+      };
+      this.fillGraphics.fill({ texture: gradientTexture as any, matrix: matrix as any });
+    } catch {
+      // Fallback to solid color if texture fill not supported
+      this.fillGraphics.fill({ color: colors.fill });
+    }
 
     // 3.5 Inner bevel effect for 3D look
     if (colors.outerBorder) {
-      // Top inner highlight
+      // Top inner highlight (subtle white glow)
       this.drawHexagonBevel(
         this.fillGraphics,
         0,
         pressOffset - 3,
-        size - borderWidth * 2 - 6,
+        fillSize - 6,
         0xFFFFFF,
-        0.2
+        0.25
       );
       // Bottom inner shadow
       this.drawHexagonBevel(
         this.fillGraphics,
         0,
         pressOffset + 3,
-        size - borderWidth * 2 - 6,
+        fillSize - 6,
         0x000000,
-        0.15
+        0.2
       );
     }
 
-    // 4. Inner highlight (top half)
+    // 4. Inner highlight (top shine)
     if (!this.isPressed) {
       this.drawHexagonHighlight(
         this.highlightGraphics,
         0,
         pressOffset - 2,
-        size - borderWidth * 2 - 4,
+        fillSize - 4,
         colors.highlight
       );
     }
@@ -431,7 +464,7 @@ export class HexagonLevelButton extends EventEmitter {
     cx: number,
     cy: number,
     size: number,
-    color: number
+    _color: number
   ): void {
     // Create a highlight that covers top half of hexagon
     const halfSize = size / 2;
diff --git a/src/ui/themes/GameStyleUITheme.ts b/src/ui/themes/GameStyleUITheme.ts
index 84e27e8..41d5c61 100644
--- a/src/ui/themes/GameStyleUITheme.ts
+++ b/src/ui/themes/GameStyleUITheme.ts
@@ -1,4 +1,4 @@
-import { UITheme, Color } from '../../contracts/UI';
+import { UITheme } from '../../contracts/UI';
 
 /**
  * Game-style UI theme inspired by mobile games like Brawl Stars, Candy Crush, etc.
@@ -185,64 +185,72 @@ export const GameStyleColors = {
 
   // Hexagon level colors
   HEXAGON_BLUE: {
-    fill: 0x3D85C6,
+    fill: 0x4DA6FF,
+    fillBottom: 0x2E7BC9,
     border: 0x1A3A5C,
-    highlight: 0x6DB3F2,
+    highlight: 0x7DBFFF,
     text: 0xFFFFFF,
     textStroke: 0x1A3A5C
   },
 
   HEXAGON_LOCKED: {
-    fill: 0x5C6370,
-    border: 0x3A3F47,
-    highlight: 0x7A8089,
-    text: 0xCCCCCC,
-    textStroke: 0x2A2E35
+    fill: 0x6B7280,
+    fillBottom: 0x4B5563,
+    border: 0x374151,
+    highlight: 0x9CA3AF,
+    text: 0xD1D5DB,
+    textStroke: 0x1F2937
   },
 
   HEXAGON_COMPLETED: {
-    fill: 0x43A047,
-    border: 0x1B5E20,
-    highlight: 0x76D275,
+    fill: 0x4ADE80,
+    fillBottom: 0x22C55E,
+    border: 0x166534,
+    highlight: 0x86EFAC,
     text: 0xFFFFFF,
-    textStroke: 0x1B5E20
+    textStroke: 0x166534
   },
 
   HEXAGON_CURRENT: {
-    fill: 0x5C6BC0,
-    border: 0x283593,
-    highlight: 0x8E99F3,
+    fill: 0x818CF8,
+    fillBottom: 0x6366F1,
+    border: 0x3730A3,
+    highlight: 0xA5B4FC,
     text: 0xFFFFFF,
-    textStroke: 0x283593
+    textStroke: 0x3730A3,
+    glow: 0x818CF8
   },
 
   // Candy Crush style hexagon with golden border
   HEXAGON_CANDY_BLUE: {
-    fill: 0x4A7BB7,
-    border: 0xFFB300,
-    highlight: 0x6B9BD1,
+    fill: 0x5DADE2,
+    fillBottom: 0x3498DB,
+    border: 0xF1C40F,
+    highlight: 0x85C1E9,
     text: 0xFFFFFF,
-    textStroke: 0x2D4A6E,
-    outerBorder: 0xCC8800
+    textStroke: 0x21618C,
+    outerBorder: 0xD4AC0D
   },
 
   HEXAGON_CANDY_CURRENT: {
-    fill: 0x5A9BD4,
-    border: 0xFFB300,
-    highlight: 0x7BB8E8,
+    fill: 0x7FB3D5,
+    fillBottom: 0x5499C7,
+    border: 0xF1C40F,
+    highlight: 0xA9CCE3,
     text: 0xFFFFFF,
-    textStroke: 0x2D5A7E,
-    outerBorder: 0xCC8800,
-    glow: 0x00FFFF
+    textStroke: 0x2471A3,
+    outerBorder: 0xD4AC0D,
+    glow: 0x5DADE2
   },
 
   HEXAGON_CANDY_LOCKED: {
-    fill: 0x4A5568,
-    border: 0x718096,
-    highlight: 0x5A6578,
-    text: 0xA0AEC0,
-    textStroke: 0x2D3748,
-    outerBorder: 0x4A5568
+    fill: 0x7F8C8D,
+    fillBottom: 0x5D6D7E,
+    border: 0x95A5A6,
+    highlight: 0xAEB6BF,
+    text: 0xBDC3C7,
+    textStroke: 0x2C3E50,
+    outerBorder: 0x566573
   },
 
   // Panel color schemes (matches No Ads popup style)

From cddfc8ef74fd1bde0eeec08b4a903df395639ac5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Can=20Erdog=CC=86an?= <can@canerdogan.net>
Date: Mon, 26 Jan 2026 15:02:13 +0300
Subject: [PATCH 02/10] feat(docs): Add theme detection support to LiveDemo
 component

- Integrate with Docusaurus useColorMode hook
- Pass theme parameter to iframe demos via URL
- Force iframe reload on theme change for proper sync
- SSR-safe URL construction with fallback

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 docs-site/src/components/LiveDemo.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/docs-site/src/components/LiveDemo.tsx b/docs-site/src/components/LiveDemo.tsx
index 8095745..3f1a4cd 100644
--- a/docs-site/src/components/LiveDemo.tsx
+++ b/docs-site/src/components/LiveDemo.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
 
 interface LiveDemoProps {
   src: string;
@@ -27,6 +28,21 @@ export default function LiveDemo({
 }: LiveDemoProps): JSX.Element {
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
+  const { colorMode } = useColorMode();
+
+  // Build iframe URL with theme parameter (SSR-safe)
+  const iframeSrc = (() => {
+    if (typeof window === 'undefined') return src;
+    try {
+      const url = new URL(src, window.location.origin);
+      url.searchParams.set('theme', colorMode);
+      return url.toString();
+    } catch {
+      // Fallback for invalid URLs
+      const separator = src.includes('?') ? '&' : '?';
+      return `${src}${separator}theme=${colorMode}`;
+    }
+  })();
 
   const handleLoad = () => {
     setIsLoading(false);
@@ -101,7 +117,8 @@ export default function LiveDemo({
           </div>
         ) : (
           <iframe
-            src={src}
+            key={colorMode} // Force reload on theme change
+            src={iframeSrc}
             className="live-demo-iframe"
             style={{ height, display: isLoading ? 'none' : 'block' }}
             onLoad={handleLoad}

From b7cb646cba8c46b656c8558ca478598a0b2f6cc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Can=20Erdog=CC=86an?= <can@canerdogan.net>
Date: Mon, 26 Jan 2026 15:02:18 +0300
Subject: [PATCH 03/10] feat(demos): Add light/dark theme support to all demo
 pages

- Implement theme detection from parent Docusaurus, URL params, and system preference
- Add theme observer for real-time theme switching
- Update demos to use graphics() abstraction instead of direct PIXI
- Apply theme-aware color palettes across all UI demos

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 docs-site/static/demos/bottom-nav-demo.html   | 147 ++-
 .../static/demos/game-bottom-sheet-demo.html  | 548 ++++++-----
 docs-site/static/demos/game-button-demo.html  | 348 ++++---
 docs-site/static/demos/game-hud-demo.html     | 874 +++++++++--------
 .../static/demos/game-modal-panel-demo.html   | 678 +++++++------
 .../static/demos/game-settings-panel.html     | 392 +++++---
 docs-site/static/demos/game-topbar-demo.html  | 154 ++-
 docs-site/static/demos/game-ui-showcase.html  | 398 +++++---
 .../static/demos/hexagon-level-demo.html      | 359 ++++---
 docs-site/static/demos/hub-screen-demo.html   | 892 ++++++++++--------
 .../static/demos/no-ads-popup-css-demo.html   | 230 ++++-
 docs-site/static/demos/no-ads-popup-demo.html | 857 +++++++++--------
 .../static/demos/result-screen-demo.html      | 556 +++++------
 .../static/demos/screen-manager-demo.html     | 325 +++++--
 docs-site/static/demos/ui-button-effects.html | 147 ++-
 docs-site/static/demos/ui-panel-basic.html    | 187 +++-
 docs-site/static/demos/ui-panel-variants.html | 205 +++-
 docs-site/static/demos/ui-progress-bar.html   | 230 ++++-
 18 files changed, 4734 insertions(+), 2793 deletions(-)

diff --git a/docs-site/static/demos/bottom-nav-demo.html b/docs-site/static/demos/bottom-nav-demo.html
index 8f84750..59dfc52 100644
--- a/docs-site/static/demos/bottom-nav-demo.html
+++ b/docs-site/static/demos/bottom-nav-demo.html
@@ -6,7 +6,8 @@
     <title>GameBottomNav Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #4DA6FF; }
+        body { overflow: hidden; background: #4DA6FF; transition: background 0.3s ease; }
+        body.light-theme { background: #87CEEB; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,31 +16,112 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame, GameBottomNav } = GameByteFramework;
+        // =====================================================
+        // GameBottomNav Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - GameBottomNav component with navigation items
+        // - Badges, highlights, and locked states
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const { createGame, GameBottomNav, graphics, loadFrameworkFont } = GameByteFramework;
 
         const CONFIG = { width: 400, height: 250 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                gradientTop: '#4DA6FF',
+                gradientBottom: '#7DD3FF',
+                titleColor: 0xffffff,
+                nav1Bg: 0x1A237E,
+                nav2Bg: 0x283593
+            },
+            light: {
+                gradientTop: '#87CEEB',
+                gradientBottom: '#B0E0E6',
+                titleColor: 0x1A237E,
+                nav1Bg: 0x3949AB,
+                nav2Bg: 0x5C6BC0
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage;
 
-        (async () => {
-            await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+        function createScreen() {
+            const colors = getColors();
+            const gfx = graphics(); // Get graphics factory
 
-            // Sky gradient background
-            const bg = new PIXI.Graphics();
+            // Clear stage
+            while (stage.children.length > 0) {
+                stage.removeChildAt(0);
+            }
+
+            // ===== SKY GRADIENT BACKGROUND =====
+            const bg = gfx.createGraphics();
             const gradCanvas = document.createElement('canvas');
             gradCanvas.width = CONFIG.width;
             gradCanvas.height = CONFIG.height;
             const ctx = gradCanvas.getContext('2d');
             const gradient = ctx.createLinearGradient(0, 0, 0, CONFIG.height);
-            gradient.addColorStop(0, '#4DA6FF');
-            gradient.addColorStop(1, '#7DD3FF');
+            gradient.addColorStop(0, colors.gradientTop);
+            gradient.addColorStop(1, colors.gradientBottom);
             ctx.fillStyle = gradient;
             ctx.fillRect(0, 0, CONFIG.width, CONFIG.height);
             bg.texture(PIXI.Texture.from(gradCanvas));
@@ -47,16 +129,16 @@
             bg.fill();
             stage.addChild(bg);
 
-            // Title
-            const title = new PIXI.Text({
-                text: 'GameBottomNav',
-                style: { fontFamily: 'Arial Black', fontSize: 20, fill: 0xffffff }
+            // ===== TITLE - Using graphics() abstraction =====
+            const title = gfx.createText('GameBottomNav', {
+                fontSize: 20,
+                fill: colors.titleColor
             });
             title.x = CONFIG.width / 2 - title.width / 2;
             title.y = 15;
             stage.addChild(title);
 
-            // Bottom Nav - 3 items
+            // ===== BOTTOM NAV - 3 ITEMS =====
             const bottomNav1 = new GameBottomNav({
                 width: CONFIG.width,
                 height: 85,
@@ -65,12 +147,12 @@
                     { id: 'play', type: 'play', label: 'Start', highlighted: true },
                     { id: 'profile', type: 'profile', locked: true }
                 ],
-                backgroundColor: 0x1A237E
+                backgroundColor: colors.nav1Bg
             });
             bottomNav1.setPosition(0, 60);
             stage.addChild(bottomNav1.getContainer());
 
-            // Bottom Nav - 4 items with badge
+            // ===== BOTTOM NAV - 4 ITEMS WITH BADGE =====
             const bottomNav2 = new GameBottomNav({
                 width: CONFIG.width,
                 height: 85,
@@ -80,7 +162,7 @@
                     { id: 'leaderboard', type: 'leaderboard' },
                     { id: 'settings', type: 'settings' }
                 ],
-                backgroundColor: 0x283593
+                backgroundColor: colors.nav2Bg
             });
             bottomNav2.setPosition(0, 160);
             stage.addChild(bottomNav2.getContainer());
@@ -88,7 +170,36 @@
             // Click handlers
             bottomNav1.on('item-click', (id) => console.log(`Nav 1: ${id} clicked`));
             bottomNav2.on('item-click', (id) => console.log(`Nav 2: ${id} clicked`));
+        }
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createScreen) {
+                await loadFrameworkFont();
+                window.createScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
+
+        (async () => {
+            // Load framework font
+            await loadFrameworkFont();
+
+            await game.initialize(canvas, '2d');
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
+
+            setupThemeListener();
+
+            // Make createScreen globally accessible for theme switching
+            window.createScreen = createScreen;
 
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createScreen();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/game-bottom-sheet-demo.html b/docs-site/static/demos/game-bottom-sheet-demo.html
index efc653b..f0e4f52 100644
--- a/docs-site/static/demos/game-bottom-sheet-demo.html
+++ b/docs-site/static/demos/game-bottom-sheet-demo.html
@@ -6,7 +6,8 @@
     <title>GameBottomSheet Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #1a1a2e; }
+        body { overflow: hidden; background: #1a1a2e; transition: background 0.3s ease; }
+        body.light-theme { background: #e8eef5; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,10 +16,123 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame, CelebrationManager } = GameByteFramework;
+        // =====================================================
+        // GameBottomSheet Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - Bottom sheet with drag-to-dismiss
+        // - Selectable item list with rare items
+        // - CelebrationManager for sparkle effects
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const { createGame, CelebrationManager, graphics, loadFrameworkFont } = GameByteFramework;
 
         const CONFIG = { width: 360, height: 640 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                bgColor: 0x1a1a2e,
+                titleDecorColor: 0x6366f1,
+                titleTextColor: 0xffffff,
+                btnGlowColor: 0x6366f1,
+                btnBorderColor: 0x4F51C5,
+                btnFillColor: 0x6366f1,
+                btnTextColor: 0xffffff,
+                sheetGlowColor: 0x6366f1,
+                sheetBorderColor: 0x4d4d6c,
+                sheetBgColor: 0x2d2d44,
+                handleBgColor: 0x444455,
+                handleColor: 0x666677,
+                sheetTitleColor: 0xffffff,
+                closeBtnColor: 0x4b5563,
+                closeXColor: 0xffffff,
+                itemBorderColor: 0x4d4d6c,
+                itemBgColor: 0x3d3d5c,
+                itemNameColor: 0xffffff,
+                itemDescColor: 0x888888,
+                rareBorderColor: 0x8B5CF6,
+                rareNameColor: 0xC4B5FD,
+                rareBadgeColor: 0x8B5CF6,
+                instrColor: 0x888888
+            },
+            light: {
+                bgColor: 0xe8eef5,
+                titleDecorColor: 0x6366f1,
+                titleTextColor: 0x2d2d44,
+                btnGlowColor: 0x818cf8,
+                btnBorderColor: 0x6366f1,
+                btnFillColor: 0x818cf8,
+                btnTextColor: 0xffffff,
+                sheetGlowColor: 0x818cf8,
+                sheetBorderColor: 0xc5cae8,
+                sheetBgColor: 0xf5f7fa,
+                handleBgColor: 0xd0d5e0,
+                handleColor: 0xb0b8c8,
+                sheetTitleColor: 0x2d2d44,
+                closeBtnColor: 0x9ca3af,
+                closeXColor: 0xffffff,
+                itemBorderColor: 0xd0d5e0,
+                itemBgColor: 0xffffff,
+                itemNameColor: 0x2d2d44,
+                itemDescColor: 0x6b7280,
+                rareBorderColor: 0x8B5CF6,
+                rareNameColor: 0x7C3AED,
+                rareBadgeColor: 0x8B5CF6,
+                instrColor: 0x6b7280
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
@@ -26,116 +140,35 @@
 
         const game = createGame();
         let celebration = null;
+        let renderer, stage;
+        let sheetOverlay, sheet, dim;
+        let sheetHeight = 320;
+        let isDragging = false;
+        let dragStartY = 0;
+        let sheetStartY = 0;
+        let itemContainers = [];
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createScreen) {
+                await loadFrameworkFont();
+                window.createScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
 
         (async () => {
+            await loadFrameworkFont();
             await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
 
-            // Create celebration manager
             celebration = new CelebrationManager(stage, CONFIG.width, CONFIG.height);
-
-            // Background
-            const bg = new PIXI.Graphics();
-            bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill(0x1a1a2e);
-            stage.addChild(bg);
-
-            // Title with decoration
-            const titleDecorLeft = new PIXI.Graphics();
-            titleDecorLeft.roundRect(30, 60, 50, 3, 2);
-            titleDecorLeft.fill(0x6366f1);
-            stage.addChild(titleDecorLeft);
-
-            const titleDecorRight = new PIXI.Graphics();
-            titleDecorRight.roundRect(CONFIG.width - 80, 60, 50, 3, 2);
-            titleDecorRight.fill(0x6366f1);
-            stage.addChild(titleDecorRight);
-
-            const pageTitle = new PIXI.Text({
-                text: 'Select an Item',
-                style: {
-                    fontFamily: 'Arial',
-                    fontSize: 24,
-                    fontWeight: 'bold',
-                    fill: 0xffffff,
-                    dropShadow: true,
-                    dropShadowDistance: 2
-                }
-            });
-            pageTitle.anchor.set(0.5);
-            pageTitle.x = CONFIG.width / 2;
-            pageTitle.y = 60;
-            stage.addChild(pageTitle);
-
-            // Show Bottom Sheet buttons
-            const sizes = [
-                { label: 'Half Sheet', height: 'half', icon: '📋' },
-                { label: 'Full Sheet', height: 'full', icon: '📄' },
-                { label: 'Auto Sheet', height: 'auto', icon: '📑' }
-            ];
-
-            sizes.forEach((size, i) => {
-                // Button glow
-                const btnGlow = new PIXI.Graphics();
-                btnGlow.roundRect(35, 115 + i * 70, CONFIG.width - 70, 60, 14);
-                btnGlow.fill({ color: 0x6366f1, alpha: 0.2 });
-                stage.addChild(btnGlow);
-
-                // Button border
-                const btnBorder = new PIXI.Graphics();
-                btnBorder.roundRect(38, 118 + i * 70, CONFIG.width - 76, 57, 13);
-                btnBorder.fill(0x4F51C5);
-                stage.addChild(btnBorder);
-
-                const btn = new PIXI.Graphics();
-                btn.roundRect(40, 120 + i * 70, CONFIG.width - 80, 55, 12);
-                btn.fill(0x6366f1);
-                btn.eventMode = 'static';
-                btn.cursor = 'pointer';
-                stage.addChild(btn);
-
-                const icon = new PIXI.Text({
-                    text: size.icon,
-                    style: { fontSize: 20 }
-                });
-                icon.x = 60;
-                icon.y = 135 + i * 70;
-                stage.addChild(icon);
-
-                const text = new PIXI.Text({
-                    text: size.label,
-                    style: { fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold', fill: 0xffffff }
-                });
-                text.anchor.set(0.5);
-                text.x = CONFIG.width / 2 + 10;
-                text.y = 147 + i * 70;
-                stage.addChild(text);
-
-                btn.on('pointerdown', () => showBottomSheet(size.height));
-            });
-
-            // Bottom Sheet overlay
-            const sheetOverlay = new PIXI.Container();
-            sheetOverlay.visible = false;
-            stage.addChild(sheetOverlay);
-
-            // Dim background
-            const dim = new PIXI.Graphics();
-            dim.rect(0, 0, CONFIG.width, CONFIG.height);
-            dim.fill({ color: 0x000000, alpha: 0.6 });
-            dim.eventMode = 'static';
-            sheetOverlay.addChild(dim);
-
-            // Sheet container
-            const sheet = new PIXI.Container();
-            sheetOverlay.addChild(sheet);
-
-            let sheetHeight = 320;
-            let isDragging = false;
-            let dragStartY = 0;
-            let sheetStartY = 0;
-            let itemContainers = [];
+            setupThemeListener();
 
             function getSheetHeight(heightOption) {
                 switch (heightOption) {
@@ -146,8 +179,37 @@
                 }
             }
 
+            function animate(target, props, duration) {
+                return new Promise(resolve => {
+                    const start = {};
+                    for (const key in props) {
+                        start[key] = target[key];
+                    }
+                    const startTime = Date.now();
+
+                    const tick = () => {
+                        const elapsed = Date.now() - startTime;
+                        const progress = Math.min(elapsed / duration, 1);
+                        const eased = 1 - Math.pow(1 - progress, 3);
+
+                        for (const key in props) {
+                            target[key] = start[key] + (props[key] - start[key]) * eased;
+                        }
+
+                        if (progress < 1) {
+                            requestAnimationFrame(tick);
+                        } else {
+                            resolve();
+                        }
+                    };
+                    tick();
+                });
+            }
+
             function createSheetContent(height) {
-                // Clear previous content
+                const colors = getColors();
+                const gfx = graphics();
+
                 while (sheet.children.length > 0) {
                     sheet.removeChildAt(0);
                 }
@@ -157,36 +219,36 @@
                 sheet.y = CONFIG.height;
 
                 // Sheet outer glow
-                const sheetGlow = new PIXI.Graphics();
+                const sheetGlow = gfx.createGraphics();
                 sheetGlow.roundRect(-5, -5, CONFIG.width + 10, sheetHeight + 60, 28);
-                sheetGlow.fill({ color: 0x6366f1, alpha: 0.15 });
+                sheetGlow.fill({ color: colors.sheetGlowColor, alpha: 0.15 });
                 sheet.addChild(sheetGlow);
 
                 // Sheet border
-                const sheetBorder = new PIXI.Graphics();
+                const sheetBorder = gfx.createGraphics();
                 sheetBorder.roundRect(-2, -2, CONFIG.width + 4, sheetHeight + 54, 26);
-                sheetBorder.fill(0x4d4d6c);
+                sheetBorder.fill(colors.sheetBorderColor);
                 sheet.addChild(sheetBorder);
 
                 // Sheet background
-                const sheetBg = new PIXI.Graphics();
+                const sheetBg = gfx.createGraphics();
                 sheetBg.roundRect(0, 0, CONFIG.width, sheetHeight + 50, 24);
-                sheetBg.fill(0x2d2d44);
+                sheetBg.fill(colors.sheetBgColor);
                 sheet.addChild(sheetBg);
 
-                // Handle with highlight
-                const handleBg = new PIXI.Graphics();
+                // Handle
+                const handleBg = gfx.createGraphics();
                 handleBg.roundRect(CONFIG.width / 2 - 30, 10, 60, 8, 4);
-                handleBg.fill(0x444455);
+                handleBg.fill(colors.handleBgColor);
                 sheet.addChild(handleBg);
 
-                const handle = new PIXI.Graphics();
+                const handle = gfx.createGraphics();
                 handle.roundRect(CONFIG.width / 2 - 25, 12, 50, 5, 3);
-                handle.fill(0x666677);
+                handle.fill(colors.handleColor);
                 sheet.addChild(handle);
 
                 // Drag area
-                const dragArea = new PIXI.Graphics();
+                const dragArea = gfx.createGraphics();
                 dragArea.rect(0, 0, CONFIG.width, 50);
                 dragArea.fill({ color: 0xffffff, alpha: 0 });
                 dragArea.eventMode = 'static';
@@ -194,38 +256,34 @@
                 sheet.addChild(dragArea);
 
                 // Title
-                const title = new PIXI.Text({
-                    text: 'Select Item',
-                    style: {
-                        fontFamily: 'Arial',
-                        fontSize: 22,
-                        fontWeight: 'bold',
-                        fill: 0xffffff,
-                        dropShadow: true,
-                        dropShadowDistance: 1
-                    }
+                const title = gfx.createText('Select Item', {
+                    fontSize: 22,
+                    fontWeight: 'bold',
+                    fill: colors.sheetTitleColor,
+                    dropShadow: currentTheme === 'dark',
+                    dropShadowDistance: 1
                 });
                 title.anchor.set(0.5, 0);
                 title.x = CONFIG.width / 2;
                 title.y = 35;
                 sheet.addChild(title);
 
-                // Close button with glow
-                const closeBtnGlow = new PIXI.Graphics();
+                // Close button
+                const closeBtnGlow = gfx.createGraphics();
                 closeBtnGlow.circle(CONFIG.width - 30, 45, 20);
-                closeBtnGlow.fill({ color: 0x4b5563, alpha: 0.3 });
+                closeBtnGlow.fill({ color: colors.closeBtnColor, alpha: 0.3 });
                 sheet.addChild(closeBtnGlow);
 
-                const closeBtn = new PIXI.Graphics();
+                const closeBtn = gfx.createGraphics();
                 closeBtn.circle(CONFIG.width - 30, 45, 16);
-                closeBtn.fill(0x4b5563);
+                closeBtn.fill(colors.closeBtnColor);
                 closeBtn.eventMode = 'static';
                 closeBtn.cursor = 'pointer';
                 sheet.addChild(closeBtn);
 
-                const closeX = new PIXI.Text({
-                    text: '✕',
-                    style: { fontFamily: 'Arial', fontSize: 14, fill: 0xffffff }
+                const closeX = gfx.createText('\u2715', {
+                    fontSize: 14,
+                    fill: colors.closeXColor
                 });
                 closeX.anchor.set(0.5);
                 closeX.x = CONFIG.width - 30;
@@ -236,86 +294,74 @@
 
                 // Items
                 const items = [
-                    { icon: '⚔️', name: 'Sword', desc: 'Attack +10', type: 'weapon', rarity: 'common' },
-                    { icon: '🛡️', name: 'Shield', desc: 'Defense +15', type: 'armor', rarity: 'common' },
-                    { icon: '🧪', name: 'Potion', desc: 'Health +50', type: 'consumable', rarity: 'common' },
-                    { icon: '🔮', name: 'Magic Orb', desc: 'Magic +20', type: 'accessory', rarity: 'rare' },
-                    { icon: '👟', name: 'Boots', desc: 'Speed +5', type: 'armor', rarity: 'common' }
+                    { icon: '\u2694\ufe0f', name: 'Sword', desc: 'Attack +10', rarity: 'common' },
+                    { icon: '\ud83d\udee1\ufe0f', name: 'Shield', desc: 'Defense +15', rarity: 'common' },
+                    { icon: '\ud83e\uddea', name: 'Potion', desc: 'Health +50', rarity: 'common' },
+                    { icon: '\ud83d\udd2e', name: 'Magic Orb', desc: 'Magic +20', rarity: 'rare' },
+                    { icon: '\ud83d\udc5f', name: 'Boots', desc: 'Speed +5', rarity: 'common' }
                 ];
 
                 const visibleItems = height >= 400 ? items : items.slice(0, 3);
 
                 visibleItems.forEach((item, i) => {
-                    // Item container for shimmer
-                    const itemContainer = new PIXI.Container();
+                    const itemContainer = gfx.createContainer();
                     itemContainer.x = 0;
                     itemContainer.y = 80 + i * 60;
                     sheet.addChild(itemContainer);
                     itemContainers.push(itemContainer);
 
-                    // Item border (highlight for rare items)
-                    const itemBorder = new PIXI.Graphics();
+                    const itemBorder = gfx.createGraphics();
                     itemBorder.roundRect(18, 0, CONFIG.width - 36, 52, 11);
-                    itemBorder.fill(item.rarity === 'rare' ? 0x8B5CF6 : 0x4d4d6c);
+                    itemBorder.fill(item.rarity === 'rare' ? colors.rareBorderColor : colors.itemBorderColor);
                     itemContainer.addChild(itemBorder);
 
-                    // Item background
-                    const itemBg = new PIXI.Graphics();
+                    const itemBg = gfx.createGraphics();
                     itemBg.roundRect(20, 2, CONFIG.width - 40, 48, 10);
-                    itemBg.fill(0x3d3d5c);
+                    itemBg.fill(colors.itemBgColor);
                     itemBg.eventMode = 'static';
                     itemBg.cursor = 'pointer';
                     itemContainer.addChild(itemBg);
 
-                    // Icon container
-                    const iconContainer = new PIXI.Container();
+                    const iconContainer = gfx.createContainer();
                     iconContainer.x = 45;
                     iconContainer.y = 26;
                     itemContainer.addChild(iconContainer);
 
-                    const icon = new PIXI.Text({
-                        text: item.icon,
-                        style: { fontSize: 24 }
-                    });
+                    const icon = gfx.createText(item.icon, { fontSize: 24 });
                     icon.anchor.set(0.5);
                     iconContainer.addChild(icon);
 
-                    // Add shimmer to rare items
                     if (item.rarity === 'rare') {
                         celebration.addShimmer(iconContainer, 'gem');
                     }
 
-                    const name = new PIXI.Text({
-                        text: item.name,
-                        style: {
-                            fontFamily: 'Arial',
-                            fontSize: 16,
-                            fontWeight: 'bold',
-                            fill: item.rarity === 'rare' ? 0xC4B5FD : 0xffffff
-                        }
+                    const name = gfx.createText(item.name, {
+                        fontSize: 16,
+                        fontWeight: 'bold',
+                        fill: item.rarity === 'rare' ? colors.rareNameColor : colors.itemNameColor
                     });
                     name.x = 70;
                     name.y = 10;
                     itemContainer.addChild(name);
 
-                    const desc = new PIXI.Text({
-                        text: item.desc,
-                        style: { fontFamily: 'Arial', fontSize: 12, fill: 0x888888 }
+                    const desc = gfx.createText(item.desc, {
+                        fontSize: 12,
+                        fill: colors.itemDescColor
                     });
                     desc.x = 70;
                     desc.y = 30;
                     itemContainer.addChild(desc);
 
-                    // Rarity badge for rare items
                     if (item.rarity === 'rare') {
-                        const badge = new PIXI.Graphics();
+                        const badge = gfx.createGraphics();
                         badge.roundRect(CONFIG.width - 75, 15, 40, 20, 5);
-                        badge.fill(0x8B5CF6);
+                        badge.fill(colors.rareBadgeColor);
                         itemContainer.addChild(badge);
 
-                        const badgeText = new PIXI.Text({
-                            text: 'Rare',
-                            style: { fontFamily: 'Arial', fontSize: 10, fontWeight: 'bold', fill: 0xffffff }
+                        const badgeText = gfx.createText('Rare', {
+                            fontSize: 10,
+                            fontWeight: 'bold',
+                            fill: 0xffffff
                         });
                         badgeText.anchor.set(0.5);
                         badgeText.x = CONFIG.width - 55;
@@ -324,10 +370,8 @@
                     }
 
                     itemBg.on('pointerdown', () => {
-                        // Sparkle effect on item selection
                         const worldY = sheet.y + itemContainer.y + 26;
                         celebration.rewardReceived(CONFIG.width / 2, worldY);
-
                         console.log('Selected:', item.name);
                         setTimeout(() => hideBottomSheet(), 200);
                     });
@@ -354,44 +398,15 @@
                     isDragging = false;
                     dragArea.cursor = 'grab';
 
-                    // Check if should close (dragged > 100px down)
                     const dragDistance = sheet.y - (CONFIG.height - sheetHeight);
                     if (dragDistance > 100) {
                         hideBottomSheet();
                     } else {
-                        // Snap back
                         animate(sheet, { y: CONFIG.height - sheetHeight }, 200);
                     }
                 });
             }
 
-            function animate(target, props, duration) {
-                return new Promise(resolve => {
-                    const start = {};
-                    for (const key in props) {
-                        start[key] = target[key];
-                    }
-                    const startTime = Date.now();
-
-                    const tick = () => {
-                        const elapsed = Date.now() - startTime;
-                        const progress = Math.min(elapsed / duration, 1);
-                        const eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic
-
-                        for (const key in props) {
-                            target[key] = start[key] + (props[key] - start[key]) * eased;
-                        }
-
-                        if (progress < 1) {
-                            requestAnimationFrame(tick);
-                        } else {
-                            resolve();
-                        }
-                    };
-                    tick();
-                });
-            }
-
             async function showBottomSheet(heightOption) {
                 const height = getSheetHeight(heightOption);
                 createSheetContent(height);
@@ -412,23 +427,122 @@
                 sheetOverlay.visible = false;
             }
 
-            dim.on('pointerdown', hideBottomSheet);
+            function createScreen() {
+                const colors = getColors();
+                const gfx = graphics();
 
-            // Instructions
-            const instr = new PIXI.Text({
-                text: 'Drag handle down to close',
-                style: { fontFamily: 'Arial', fontSize: 12, fill: 0x888888 }
-            });
-            instr.anchor.set(0.5);
-            instr.x = CONFIG.width / 2;
-            instr.y = CONFIG.height - 30;
-            stage.addChild(instr);
+                while (stage.children.length > 0) {
+                    stage.removeChildAt(0);
+                }
+                celebration.clear();
+
+                // Background
+                const bg = gfx.createGraphics();
+                bg.rect(0, 0, CONFIG.width, CONFIG.height);
+                bg.fill(colors.bgColor);
+                stage.addChild(bg);
+
+                // Title decorations
+                const titleDecorLeft = gfx.createGraphics();
+                titleDecorLeft.roundRect(30, 60, 50, 3, 2);
+                titleDecorLeft.fill(colors.titleDecorColor);
+                stage.addChild(titleDecorLeft);
+
+                const titleDecorRight = gfx.createGraphics();
+                titleDecorRight.roundRect(CONFIG.width - 80, 60, 50, 3, 2);
+                titleDecorRight.fill(colors.titleDecorColor);
+                stage.addChild(titleDecorRight);
+
+                const pageTitle = gfx.createText('Select an Item', {
+                    fontSize: 24,
+                    fontWeight: 'bold',
+                    fill: colors.titleTextColor,
+                    dropShadow: currentTheme === 'dark',
+                    dropShadowDistance: 2
+                });
+                pageTitle.anchor.set(0.5);
+                pageTitle.x = CONFIG.width / 2;
+                pageTitle.y = 60;
+                stage.addChild(pageTitle);
+
+                // Buttons
+                const sizes = [
+                    { label: 'Half Sheet', height: 'half', icon: '\ud83d\udccb' },
+                    { label: 'Full Sheet', height: 'full', icon: '\ud83d\udcc4' },
+                    { label: 'Auto Sheet', height: 'auto', icon: '\ud83d\udcd1' }
+                ];
+
+                sizes.forEach((size, i) => {
+                    const btnGlow = gfx.createGraphics();
+                    btnGlow.roundRect(35, 115 + i * 70, CONFIG.width - 70, 60, 14);
+                    btnGlow.fill({ color: colors.btnGlowColor, alpha: 0.2 });
+                    stage.addChild(btnGlow);
+
+                    const btnBorder = gfx.createGraphics();
+                    btnBorder.roundRect(38, 118 + i * 70, CONFIG.width - 76, 57, 13);
+                    btnBorder.fill(colors.btnBorderColor);
+                    stage.addChild(btnBorder);
+
+                    const btn = gfx.createGraphics();
+                    btn.roundRect(40, 120 + i * 70, CONFIG.width - 80, 55, 12);
+                    btn.fill(colors.btnFillColor);
+                    btn.eventMode = 'static';
+                    btn.cursor = 'pointer';
+                    stage.addChild(btn);
+
+                    const icon = gfx.createText(size.icon, { fontSize: 20 });
+                    icon.x = 60;
+                    icon.y = 135 + i * 70;
+                    stage.addChild(icon);
+
+                    const text = gfx.createText(size.label, {
+                        fontSize: 18,
+                        fontWeight: 'bold',
+                        fill: colors.btnTextColor
+                    });
+                    text.anchor.set(0.5);
+                    text.x = CONFIG.width / 2 + 10;
+                    text.y = 147 + i * 70;
+                    stage.addChild(text);
+
+                    btn.on('pointerdown', () => showBottomSheet(size.height));
+                });
+
+                // Bottom Sheet overlay
+                sheetOverlay = gfx.createContainer();
+                sheetOverlay.visible = false;
+                stage.addChild(sheetOverlay);
+
+                dim = gfx.createGraphics();
+                dim.rect(0, 0, CONFIG.width, CONFIG.height);
+                dim.fill({ color: 0x000000, alpha: 0.6 });
+                dim.eventMode = 'static';
+                sheetOverlay.addChild(dim);
+
+                sheet = gfx.createContainer();
+                sheetOverlay.addChild(sheet);
+
+                dim.on('pointerdown', hideBottomSheet);
+
+                // Instructions
+                const instr = gfx.createText('Drag handle down to close', {
+                    fontSize: 12,
+                    fill: colors.instrColor
+                });
+                instr.anchor.set(0.5);
+                instr.x = CONFIG.width / 2;
+                instr.y = CONFIG.height - 30;
+                stage.addChild(instr);
+            }
+
+            window.createScreen = createScreen;
 
-            // Game loop for celebration updates
             game.on('update', (deltaTime) => {
                 celebration.update(deltaTime);
             });
 
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createScreen();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/game-button-demo.html b/docs-site/static/demos/game-button-demo.html
index 3fc0e60..95330ff 100644
--- a/docs-site/static/demos/game-button-demo.html
+++ b/docs-site/static/demos/game-button-demo.html
@@ -6,7 +6,8 @@
     <title>GameStyleButton Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #1a1a2e; }
+        body { overflow: hidden; background: #1a1a2e; transition: background 0.3s ease; }
+        body.light-theme { background: #e8eef5; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,176 +16,219 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame, GameStyleButton, GameStyleColors } = GameByteFramework;
+        // =====================================================
+        // GameStyleButton Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - GameStyleButton component with all color variants
+        // - GameButtons helper for common mini buttons
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const {
+            createGame,
+            GameStyleButton,
+            GameStyleColors,
+            GameButtons,
+            graphics,
+            loadFrameworkFont
+        } = GameByteFramework;
 
         const CONFIG = { width: 500, height: 680 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                bgColor: 0x1a1a2e,
+                titleColor: 0xffffff,
+                labelColor: 0x888888
+            },
+            light: {
+                bgColor: 0xe8eef5,
+                titleColor: 0x2d2d44,
+                labelColor: 0x6b7280
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage;
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createScreen) {
+                await loadFrameworkFont();
+                window.createScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
 
         (async () => {
+            // Load framework font
+            await loadFrameworkFont();
+
             await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
-
-            // Background
-            const bg = new PIXI.Graphics();
-            bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill(0x1a1a2e);
-            stage.addChild(bg);
-
-            // Title
-            const title = new PIXI.Text({
-                text: 'GameStyleButton',
-                style: { fontFamily: 'Arial Black', fontSize: 24, fill: 0xffffff }
-            });
-            title.x = CONFIG.width / 2 - title.width / 2;
-            title.y = 15;
-            stage.addChild(title);
-
-            // Style labels
-            const raisedLabel = new PIXI.Text({
-                text: "style: 'raised'",
-                style: { fontFamily: 'monospace', fontSize: 14, fill: 0x888888 }
-            });
-            raisedLabel.x = 70;
-            raisedLabel.y = 52;
-            stage.addChild(raisedLabel);
-
-            const flatLabel = new PIXI.Text({
-                text: "style: 'flat'",
-                style: { fontFamily: 'monospace', fontSize: 14, fill: 0x888888 }
-            });
-            flatLabel.x = 300;
-            flatLabel.y = 52;
-            stage.addChild(flatLabel);
-
-            // Button configurations
-            const buttonConfigs = [
-                { text: 'Play', colorScheme: GameStyleColors.YELLOW_BUTTON },
-                { text: 'Continue', colorScheme: GameStyleColors.GREEN_BUTTON },
-                { text: 'Shop', colorScheme: GameStyleColors.BLUE_BUTTON },
-                { text: 'Cancel', colorScheme: GameStyleColors.RED_BUTTON },
-                { text: 'Special', colorScheme: GameStyleColors.PURPLE_BUTTON },
-            ];
-
-            const startY = 75;
-            const buttonHeight = 60;
-            const buttonWidth = 180;
-            const gap = 15;
-
-            // Create raised style buttons (left column)
-            buttonConfigs.forEach((config, index) => {
-                const btn = new GameStyleButton({
-                    text: config.text,
-                    width: buttonWidth,
-                    height: buttonHeight,
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
+
+            setupThemeListener();
+
+            function createScreen() {
+                const colors = getColors();
+                const gfx = graphics(); // Get graphics factory
+
+                // Clear stage
+                while (stage.children.length > 0) {
+                    stage.removeChildAt(0);
+                }
+
+                // ===== BACKGROUND - Using graphics() abstraction =====
+                const bg = gfx.createGraphics();
+                bg.rect(0, 0, CONFIG.width, CONFIG.height);
+                bg.fill(colors.bgColor);
+                stage.addChild(bg);
+
+                // ===== TITLE - Using graphics() abstraction =====
+                const title = gfx.createText('GameStyleButton', {
                     fontSize: 24,
-                    buttonStyle: 'raised',
-                    colorScheme: config.colorScheme
+                    fill: colors.titleColor
                 });
-                btn.setPosition(30, startY + index * (buttonHeight + gap));
-                btn.on('click', () => console.log(`${config.text} (raised) clicked!`));
-                stage.addChild(btn.getContainer());
-            });
-
-            // Create flat style buttons (right column)
-            buttonConfigs.forEach((config, index) => {
-                const btn = new GameStyleButton({
-                    text: config.text,
+                title.x = CONFIG.width / 2 - title.width / 2;
+                title.y = 15;
+                stage.addChild(title);
+
+                // ===== BUTTON SHOWCASE =====
+                const buttonConfigs = [
+                    { text: 'Play', colorScheme: GameStyleColors.YELLOW_BUTTON },
+                    { text: 'Continue', colorScheme: GameStyleColors.GREEN_BUTTON },
+                    { text: 'Shop', colorScheme: GameStyleColors.BLUE_BUTTON },
+                    { text: 'Cancel', colorScheme: GameStyleColors.RED_BUTTON },
+                    { text: 'Special', colorScheme: GameStyleColors.PURPLE_BUTTON },
+                ];
+
+                const startY = 55;
+                const buttonHeight = 58;
+                const buttonWidth = 240;
+                const gap = 12;
+
+                // Create styled buttons
+                buttonConfigs.forEach((config, index) => {
+                    const btn = new GameStyleButton({
+                        text: config.text,
+                        width: buttonWidth,
+                        height: buttonHeight,
+                        fontSize: 24,
+                        colorScheme: config.colorScheme
+                    });
+                    btn.setPosition((CONFIG.width - buttonWidth) / 2, startY + index * (buttonHeight + gap));
+                    btn.on('click', () => console.log(`${config.text} clicked!`));
+                    stage.addChild(btn.getContainer());
+                });
+
+                // Disabled button example
+                const disabledBtn = new GameStyleButton({
+                    text: 'Locked',
                     width: buttonWidth,
                     height: buttonHeight,
                     fontSize: 24,
-                    buttonStyle: 'flat',
-                    colorScheme: config.colorScheme
+                    disabled: true
+                });
+                disabledBtn.setPosition((CONFIG.width - buttonWidth) / 2, startY + 5 * (buttonHeight + gap));
+                stage.addChild(disabledBtn.getContainer());
+
+                // ===== MINI BUTTONS SECTION =====
+                const miniLabel = gfx.createText('Mini Buttons:', {
+                    fontFamily: 'monospace',
+                    fontSize: 14,
+                    fill: colors.labelColor
+                });
+                miniLabel.x = 30;
+                miniLabel.y = startY + 6 * (buttonHeight + gap) + 10;
+                stage.addChild(miniLabel);
+
+                const miniY = startY + 6 * (buttonHeight + gap) + 35;
+                const miniSize = 36;
+                const miniGap = 10;
+
+                // GameButtons helper for common mini buttons
+                const miniButtons = [
+                    { create: () => GameButtons.close(miniSize), label: 'Close' },
+                    { create: () => GameButtons.settings(miniSize), label: 'Settings' },
+                    { create: () => GameButtons.pause(miniSize), label: 'Pause' },
+                    { create: () => GameButtons.playIcon(miniSize), label: 'Play' },
+                    { create: () => GameButtons.info(miniSize), label: 'Info' },
+                    { create: () => GameButtons.home(miniSize), label: 'Home' },
+                    { create: () => GameButtons.mini('\u2665', GameStyleColors.PURPLE_BUTTON, miniSize), label: 'Heart' },
+                ];
+
+                miniButtons.forEach((config, index) => {
+                    const btn = config.create();
+                    btn.setPosition(30 + index * (miniSize + miniGap), miniY);
+                    btn.on('click', () => console.log(`${config.label} clicked`));
+                    stage.addChild(btn.getContainer());
                 });
-                btn.setPosition(260, startY + index * (buttonHeight + gap));
-                btn.on('click', () => console.log(`${config.text} (flat) clicked!`));
-                stage.addChild(btn.getContainer());
-            });
-
-            // Disabled button example
-            const disabledRaised = new GameStyleButton({
-                text: 'Locked',
-                width: buttonWidth,
-                height: 50,
-                fontSize: 20,
-                buttonStyle: 'raised',
-                disabled: true
-            });
-            disabledRaised.setPosition(30, startY + 5 * (buttonHeight + gap));
-            stage.addChild(disabledRaised.getContainer());
-
-            const disabledFlat = new GameStyleButton({
-                text: 'Locked',
-                width: buttonWidth,
-                height: 50,
-                fontSize: 20,
-                buttonStyle: 'flat',
-                disabled: true
-            });
-            disabledFlat.setPosition(260, startY + 5 * (buttonHeight + gap));
-            stage.addChild(disabledFlat.getContainer());
-
-            // Icon buttons row
-            const iconLabel = new PIXI.Text({
-                text: 'Icon Buttons:',
-                style: { fontFamily: 'monospace', fontSize: 14, fill: 0x888888 }
-            });
-            iconLabel.x = 30;
-            iconLabel.y = startY + 6 * (buttonHeight + gap) + 10;
-            stage.addChild(iconLabel);
-
-            const iconY = startY + 6 * (buttonHeight + gap) + 35;
-            const iconSize = 44;
-            const iconGap = 12;
-
-            // Close button
-            const closeBtn = GameByteFramework.GameButtons.close(iconSize);
-            closeBtn.setPosition(30, iconY);
-            closeBtn.on('click', () => console.log('Close clicked'));
-            stage.addChild(closeBtn.getContainer());
-
-            // Settings button
-            const settingsBtn = GameByteFramework.GameButtons.settings(iconSize);
-            settingsBtn.setPosition(30 + (iconSize + iconGap), iconY);
-            settingsBtn.on('click', () => console.log('Settings clicked'));
-            stage.addChild(settingsBtn.getContainer());
-
-            // Pause button
-            const pauseBtn = GameByteFramework.GameButtons.pause(iconSize);
-            pauseBtn.setPosition(30 + 2 * (iconSize + iconGap), iconY);
-            pauseBtn.on('click', () => console.log('Pause clicked'));
-            stage.addChild(pauseBtn.getContainer());
-
-            // Play icon button
-            const playIconBtn = GameByteFramework.GameButtons.playIcon(iconSize);
-            playIconBtn.setPosition(30 + 3 * (iconSize + iconGap), iconY);
-            playIconBtn.on('click', () => console.log('Play icon clicked'));
-            stage.addChild(playIconBtn.getContainer());
-
-            // Info button
-            const infoBtn = GameByteFramework.GameButtons.info(iconSize);
-            infoBtn.setPosition(30 + 4 * (iconSize + iconGap), iconY);
-            infoBtn.on('click', () => console.log('Info clicked'));
-            stage.addChild(infoBtn.getContainer());
-
-            // Home button
-            const homeBtn = GameByteFramework.GameButtons.home(iconSize);
-            homeBtn.setPosition(30 + 5 * (iconSize + iconGap), iconY);
-            homeBtn.on('click', () => console.log('Home clicked'));
-            stage.addChild(homeBtn.getContainer());
-
-            // Custom icon button
-            const customIcon = GameByteFramework.GameButtons.icon('♥', GameStyleColors.PURPLE_BUTTON, iconSize);
-            customIcon.setPosition(30 + 6 * (iconSize + iconGap), iconY);
-            customIcon.on('click', () => console.log('Heart clicked'));
-            stage.addChild(customIcon.getContainer());
+            }
 
+            window.createScreen = createScreen;
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createScreen();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/game-hud-demo.html b/docs-site/static/demos/game-hud-demo.html
index bed4e2f..8e172f0 100644
--- a/docs-site/static/demos/game-hud-demo.html
+++ b/docs-site/static/demos/game-hud-demo.html
@@ -6,7 +6,8 @@
     <title>GameHUDScreen Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #87CEEB; }
+        body { overflow: hidden; background: #87CEEB; transition: background 0.3s ease; }
+        body.light-theme { background: #a8dcf8; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,16 +16,143 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame, CelebrationManager } = GameByteFramework;
+        // =====================================================
+        // GameHUDScreen Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - HUD with score, timer, lives, progress bar
+        // - Pause overlay with resume button
+        // - Collectible coins with sparkle effects
+        // - CelebrationManager for victory confetti
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const { createGame, CelebrationManager, graphics, loadFrameworkFont } = GameByteFramework;
 
         const CONFIG = { width: 360, height: 640 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                skyBg: 0x87CEEB,
+                groundBrown: 0x8B4513,
+                groundDirt: 0x5D3A1A,
+                grassGreen: 0x228B22,
+                hudBg: 0x000000,
+                hudBgAlpha: 0.6,
+                hudBorder: 0x333344,
+                timerGlowColor: 0x4CAF50,
+                timerBg: 0x2d2d44,
+                pauseBtnBorder: 0x444455,
+                pauseBtnBg: 0x2d2d44,
+                progressBorder: 0x444455,
+                progressBg: 0x2d2d44,
+                progressFill: 0x4CAF50,
+                pauseDim: 0x000000,
+                pauseDimAlpha: 0.7,
+                pausePanelBorder: 0x4d4d6c,
+                pausePanelBg: 0x2d2d44,
+                resumeBtnBorder: 0x2E7D32,
+                resumeBtnBg: 0x4CAF50,
+                loseLifeBtnBorder: 0xA33030,
+                loseLifeBtnBg: 0xE84C4C,
+                scoreText: 0xFFD700,
+                timerText: 0xffffff,
+                progressLabel: 0x888888,
+                instructionText: 0x333333,
+                instructionShadow: 0xffffff,
+                cloudColor: 0xffffff,
+                cloudAlpha: 0.8
+            },
+            light: {
+                skyBg: 0xa8dcf8,
+                groundBrown: 0x9B5523,
+                groundDirt: 0x6D4A2A,
+                grassGreen: 0x32AB32,
+                hudBg: 0x2a3a5a,
+                hudBgAlpha: 0.75,
+                hudBorder: 0x4a5a7a,
+                timerGlowColor: 0x5CBF60,
+                timerBg: 0x3d4d64,
+                pauseBtnBorder: 0x5a6a8a,
+                pauseBtnBg: 0x3d4d64,
+                progressBorder: 0x5a6a8a,
+                progressBg: 0x3d4d64,
+                progressFill: 0x5CBF60,
+                pauseDim: 0x1a2a4a,
+                pauseDimAlpha: 0.6,
+                pausePanelBorder: 0x6d7d9c,
+                pausePanelBg: 0x4d5d7c,
+                resumeBtnBorder: 0x3E8D42,
+                resumeBtnBg: 0x5CBF60,
+                loseLifeBtnBorder: 0xB34040,
+                loseLifeBtnBg: 0xF05C5C,
+                scoreText: 0xFFD700,
+                timerText: 0xffffff,
+                progressLabel: 0xaabbcc,
+                instructionText: 0x1a3a5a,
+                instructionShadow: 0xffffff,
+                cloudColor: 0xffffff,
+                cloudAlpha: 0.9
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage;
 
         // Game state
         let score = 0;
@@ -35,421 +163,425 @@
         let progress = 0;
         let celebration = null;
 
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createHUDScreen) {
+                await loadFrameworkFont();
+                window.createHUDScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
+
         (async () => {
+            await loadFrameworkFont();
             await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
 
-            // Create celebration manager
             celebration = new CelebrationManager(stage, CONFIG.width, CONFIG.height);
+            setupThemeListener();
 
-            // Sky background with gradient effect
-            const bg = new PIXI.Graphics();
-            bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill(0x87CEEB);
-            stage.addChild(bg);
-
-            // Clouds
-            for (let i = 0; i < 4; i++) {
-                const cloud = new PIXI.Graphics();
-                cloud.circle(0, 0, 30);
-                cloud.circle(25, 5, 25);
-                cloud.circle(50, 0, 30);
-                cloud.circle(25, -10, 20);
-                cloud.fill({ color: 0xffffff, alpha: 0.8 });
-                cloud.x = 50 + i * 100;
-                cloud.y = 120 + (i % 2) * 40;
-                stage.addChild(cloud);
-            }
+            function createHUDScreen() {
+                const colors = getColors();
+                const gfx = graphics();
 
-            // Ground with texture
-            const ground = new PIXI.Graphics();
-            ground.rect(0, CONFIG.height - 100, CONFIG.width, 100);
-            ground.fill(0x8B4513);
-            stage.addChild(ground);
-
-            // Ground pattern
-            for (let i = 0; i < 8; i++) {
-                const dirt = new PIXI.Graphics();
-                dirt.circle(20 + i * 50, CONFIG.height - 50, 8);
-                dirt.fill({ color: 0x5D3A1A, alpha: 0.5 });
-                stage.addChild(dirt);
-            }
+                while (stage.children.length > 0) {
+                    stage.removeChildAt(0);
+                }
+                celebration.clear();
+
+                // Reset game state
+                score = 0;
+                lives = 3;
+                timeLeft = 60;
+                isPaused = false;
+                progress = 0;
+
+                // Sky background
+                const bg = gfx.createGraphics();
+                bg.rect(0, 0, CONFIG.width, CONFIG.height);
+                bg.fill(colors.skyBg);
+                stage.addChild(bg);
+
+                // Clouds
+                for (let i = 0; i < 4; i++) {
+                    const cloud = gfx.createGraphics();
+                    cloud.circle(0, 0, 30);
+                    cloud.circle(25, 5, 25);
+                    cloud.circle(50, 0, 30);
+                    cloud.circle(25, -10, 20);
+                    cloud.fill({ color: colors.cloudColor, alpha: colors.cloudAlpha });
+                    cloud.x = 50 + i * 100;
+                    cloud.y = 120 + (i % 2) * 40;
+                    stage.addChild(cloud);
+                }
 
-            // Grass
-            const grass = new PIXI.Graphics();
-            grass.rect(0, CONFIG.height - 100, CONFIG.width, 15);
-            grass.fill(0x228B22);
-            stage.addChild(grass);
-
-            // Simple game elements (collectibles)
-            const collectibles = [];
-            for (let i = 0; i < 5; i++) {
-                const coinContainer = new PIXI.Container();
-                coinContainer.x = 50 + Math.random() * (CONFIG.width - 100);
-                coinContainer.y = 150 + Math.random() * 300;
-
-                // Coin glow
-                const glow = new PIXI.Graphics();
-                glow.circle(0, 0, 25);
-                glow.fill({ color: 0xFFD700, alpha: 0.3 });
-                coinContainer.addChild(glow);
-
-                // Coin
-                const coin = new PIXI.Graphics();
-                coin.circle(0, 0, 20);
-                coin.fill(0xFFD700);
-                coinContainer.addChild(coin);
-
-                // Coin inner
-                const coinInner = new PIXI.Graphics();
-                coinInner.circle(0, 0, 15);
-                coinInner.fill(0xFFC000);
-                coinContainer.addChild(coinInner);
-
-                // Coin symbol
-                const symbol = new PIXI.Text({
-                    text: '$',
-                    style: { fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold', fill: 0xDAA520 }
-                });
-                symbol.anchor.set(0.5);
-                coinContainer.addChild(symbol);
+                // Ground
+                const ground = gfx.createGraphics();
+                ground.rect(0, CONFIG.height - 100, CONFIG.width, 100);
+                ground.fill(colors.groundBrown);
+                stage.addChild(ground);
+
+                // Ground pattern
+                for (let i = 0; i < 8; i++) {
+                    const dirt = gfx.createGraphics();
+                    dirt.circle(20 + i * 50, CONFIG.height - 50, 8);
+                    dirt.fill({ color: colors.groundDirt, alpha: 0.5 });
+                    stage.addChild(dirt);
+                }
 
-                coinContainer.eventMode = 'static';
-                coinContainer.cursor = 'pointer';
+                // Grass
+                const grass = gfx.createGraphics();
+                grass.rect(0, CONFIG.height - 100, CONFIG.width, 15);
+                grass.fill(colors.grassGreen);
+                stage.addChild(grass);
+
+                // Collectible coins
+                for (let i = 0; i < 5; i++) {
+                    const coinContainer = gfx.createContainer();
+                    coinContainer.x = 50 + Math.random() * (CONFIG.width - 100);
+                    coinContainer.y = 150 + Math.random() * 300;
+
+                    const glow = gfx.createGraphics();
+                    glow.circle(0, 0, 25);
+                    glow.fill({ color: 0xFFD700, alpha: 0.3 });
+                    coinContainer.addChild(glow);
+
+                    const coin = gfx.createGraphics();
+                    coin.circle(0, 0, 20);
+                    coin.fill(0xFFD700);
+                    coinContainer.addChild(coin);
+
+                    const coinInner = gfx.createGraphics();
+                    coinInner.circle(0, 0, 15);
+                    coinInner.fill(0xFFC000);
+                    coinContainer.addChild(coinInner);
+
+                    const symbol = gfx.createText('$', {
+                        fontSize: 18,
+                        fontWeight: 'bold',
+                        fill: 0xDAA520
+                    });
+                    symbol.anchor.set(0.5);
+                    coinContainer.addChild(symbol);
+
+                    coinContainer.eventMode = 'static';
+                    coinContainer.cursor = 'pointer';
+
+                    celebration.addShimmer(coinContainer, 'gold');
+
+                    coinContainer.on('pointerdown', () => {
+                        if (isPaused) return;
+                        celebration.rewardReceived(coinContainer.x, coinContainer.y);
+                        score += 100;
+                        updateScore();
+                        progress = Math.min(100, progress + 20);
+                        updateProgress();
+                        coinContainer.visible = false;
+                        if (progress >= 100) {
+                            showVictory();
+                        }
+                    });
 
-                // Add shimmer to coins
-                celebration.addShimmer(coinContainer, 'gold');
+                    stage.addChild(coinContainer);
+                }
 
-                coinContainer.on('pointerdown', () => {
-                    if (isPaused) return;
+                // HUD Container
+                const hud = gfx.createContainer();
+                stage.addChild(hud);
 
-                    // Sparkle effect at coin position
-                    celebration.rewardReceived(coinContainer.x, coinContainer.y);
+                const hudBg = gfx.createGraphics();
+                hudBg.rect(0, 0, CONFIG.width, 75);
+                hudBg.fill({ color: colors.hudBg, alpha: colors.hudBgAlpha });
+                hud.addChild(hudBg);
 
-                    score += 100;
-                    updateScore();
-                    progress = Math.min(100, progress + 20);
-                    updateProgress();
-                    coinContainer.visible = false;
+                const hudBorder = gfx.createGraphics();
+                hudBorder.rect(0, 73, CONFIG.width, 3);
+                hudBorder.fill(colors.hudBorder);
+                hud.addChild(hudBorder);
 
-                    if (progress >= 100) {
-                        showVictory();
-                    }
+                // Score
+                const scoreIcon = gfx.createText('\ud83e\ude99', { fontSize: 20 });
+                scoreIcon.x = 10;
+                scoreIcon.y = 8;
+                hud.addChild(scoreIcon);
+
+                const scoreText = gfx.createText(`${score}`, {
+                    fontSize: 20,
+                    fontWeight: 'bold',
+                    fill: colors.scoreText
                 });
+                scoreText.x = 38;
+                scoreText.y = 10;
+                hud.addChild(scoreText);
 
-                stage.addChild(coinContainer);
-                collectibles.push(coinContainer);
-            }
+                function updateScore() {
+                    scoreText.text = `${score}`;
+                }
 
-            // HUD Container
-            const hud = new PIXI.Container();
-            stage.addChild(hud);
-
-            // HUD Background with gradient effect
-            const hudBg = new PIXI.Graphics();
-            hudBg.rect(0, 0, CONFIG.width, 75);
-            hudBg.fill({ color: 0x000000, alpha: 0.6 });
-            hud.addChild(hudBg);
-
-            // HUD border
-            const hudBorder = new PIXI.Graphics();
-            hudBorder.rect(0, 73, CONFIG.width, 3);
-            hudBorder.fill(0x333344);
-            hud.addChild(hudBorder);
-
-            // Score display with icon
-            const scoreIcon = new PIXI.Text({
-                text: '🪙',
-                style: { fontSize: 20 }
-            });
-            scoreIcon.x = 10;
-            scoreIcon.y = 8;
-            hud.addChild(scoreIcon);
+                // Timer
+                const timerGlow = gfx.createGraphics();
+                timerGlow.roundRect(CONFIG.width / 2 - 40, 5, 80, 35, 10);
+                timerGlow.fill({ color: colors.timerGlowColor, alpha: 0.3 });
+                hud.addChild(timerGlow);
+
+                const timerBg = gfx.createGraphics();
+                timerBg.roundRect(CONFIG.width / 2 - 38, 7, 76, 31, 8);
+                timerBg.fill(colors.timerBg);
+                hud.addChild(timerBg);
+
+                const timerIcon = gfx.createText('\u23f1\ufe0f', { fontSize: 14 });
+                timerIcon.x = CONFIG.width / 2 - 30;
+                timerIcon.y = 12;
+                hud.addChild(timerIcon);
+
+                function formatTime(seconds) {
+                    const m = Math.floor(seconds / 60);
+                    const s = seconds % 60;
+                    return `${m}:${s.toString().padStart(2, '0')}`;
+                }
 
-            const scoreText = new PIXI.Text({
-                text: `${score}`,
-                style: { fontFamily: 'Arial', fontSize: 20, fontWeight: 'bold', fill: 0xFFD700 }
-            });
-            scoreText.x = 38;
-            scoreText.y = 10;
-            hud.addChild(scoreText);
+                const timerText = gfx.createText(formatTime(timeLeft), {
+                    fontSize: 18,
+                    fontWeight: 'bold',
+                    fill: colors.timerText
+                });
+                timerText.x = CONFIG.width / 2 - 5;
+                timerText.y = 13;
+                hud.addChild(timerText);
+
+                // Lives
+                const livesContainer = gfx.createContainer();
+                livesContainer.x = 10;
+                livesContainer.y = 45;
+                hud.addChild(livesContainer);
+
+                function updateLives() {
+                    livesContainer.removeChildren();
+                    for (let i = 0; i < maxLives; i++) {
+                        const heart = gfx.createText(i < lives ? '\u2764\ufe0f' : '\ud83d\udda4', { fontSize: 18 });
+                        heart.x = i * 25;
+                        livesContainer.addChild(heart);
+                    }
+                }
+                updateLives();
 
-            function updateScore() {
-                scoreText.text = `${score}`;
-            }
+                // Pause button
+                const pauseBtnBorder = gfx.createGraphics();
+                pauseBtnBorder.roundRect(CONFIG.width - 53, 7, 46, 46, 10);
+                pauseBtnBorder.fill(colors.pauseBtnBorder);
+                hud.addChild(pauseBtnBorder);
+
+                const pauseBtn = gfx.createGraphics();
+                pauseBtn.roundRect(CONFIG.width - 50, 10, 40, 40, 8);
+                pauseBtn.fill(colors.pauseBtnBg);
+                pauseBtn.eventMode = 'static';
+                pauseBtn.cursor = 'pointer';
+                hud.addChild(pauseBtn);
+
+                const pauseIcon = gfx.createText('\u23f8', { fontSize: 22 });
+                pauseIcon.anchor.set(0.5);
+                pauseIcon.x = CONFIG.width - 30;
+                pauseIcon.y = 30;
+                hud.addChild(pauseIcon);
+
+                // Progress bar
+                const progressLabel = gfx.createText('Progress', {
+                    fontSize: 10,
+                    fill: colors.progressLabel
+                });
+                progressLabel.x = 100;
+                progressLabel.y = 43;
+                hud.addChild(progressLabel);
+
+                const progressBorder = gfx.createGraphics();
+                progressBorder.roundRect(98, 55, 164, 14, 7);
+                progressBorder.fill(colors.progressBorder);
+                hud.addChild(progressBorder);
+
+                const progressBg = gfx.createGraphics();
+                progressBg.roundRect(100, 57, 160, 10, 5);
+                progressBg.fill(colors.progressBg);
+                hud.addChild(progressBg);
+
+                const progressBar = gfx.createGraphics();
+                hud.addChild(progressBar);
+
+                function updateProgress() {
+                    progressBar.clear();
+                    const width = Math.max(0, (progress / 100) * 160);
+                    if (width > 0) {
+                        progressBar.roundRect(100, 57, width, 10, 5);
+                        progressBar.fill(colors.progressFill);
+                    }
+                }
+                updateProgress();
 
-            // Timer display with glow
-            const timerGlow = new PIXI.Graphics();
-            timerGlow.roundRect(CONFIG.width / 2 - 40, 5, 80, 35, 10);
-            timerGlow.fill({ color: 0x4CAF50, alpha: 0.3 });
-            hud.addChild(timerGlow);
+                // Pause overlay
+                const pauseOverlay = gfx.createContainer();
+                pauseOverlay.visible = false;
+                stage.addChild(pauseOverlay);
 
-            const timerBg = new PIXI.Graphics();
-            timerBg.roundRect(CONFIG.width / 2 - 38, 7, 76, 31, 8);
-            timerBg.fill(0x2d2d44);
-            hud.addChild(timerBg);
+                const pauseDim = gfx.createGraphics();
+                pauseDim.rect(0, 0, CONFIG.width, CONFIG.height);
+                pauseDim.fill({ color: colors.pauseDim, alpha: colors.pauseDimAlpha });
+                pauseOverlay.addChild(pauseDim);
 
-            const timerIcon = new PIXI.Text({
-                text: '⏱️',
-                style: { fontSize: 14 }
-            });
-            timerIcon.x = CONFIG.width / 2 - 30;
-            timerIcon.y = 12;
-            hud.addChild(timerIcon);
+                const pausePanelBorder = gfx.createGraphics();
+                pausePanelBorder.roundRect(CONFIG.width / 2 - 105, CONFIG.height / 2 - 105, 210, 210, 22);
+                pausePanelBorder.fill(colors.pausePanelBorder);
+                pauseOverlay.addChild(pausePanelBorder);
 
-            const timerText = new PIXI.Text({
-                text: formatTime(timeLeft),
-                style: { fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold', fill: 0xffffff }
-            });
-            timerText.x = CONFIG.width / 2 - 5;
-            timerText.y = 13;
-            hud.addChild(timerText);
-
-            function formatTime(seconds) {
-                const m = Math.floor(seconds / 60);
-                const s = seconds % 60;
-                return `${m}:${s.toString().padStart(2, '0')}`;
-            }
+                const pausePanel = gfx.createGraphics();
+                pausePanel.roundRect(CONFIG.width / 2 - 100, CONFIG.height / 2 - 100, 200, 200, 20);
+                pausePanel.fill(colors.pausePanelBg);
+                pauseOverlay.addChild(pausePanel);
 
-            // Lives display
-            const livesContainer = new PIXI.Container();
-            livesContainer.x = 10;
-            livesContainer.y = 45;
-            hud.addChild(livesContainer);
-
-            function updateLives() {
-                livesContainer.removeChildren();
-                for (let i = 0; i < maxLives; i++) {
-                    const heart = new PIXI.Text({
-                        text: i < lives ? '❤️' : '🖤',
-                        style: { fontSize: 18 }
-                    });
-                    heart.x = i * 25;
-                    livesContainer.addChild(heart);
-                }
-            }
-            updateLives();
-
-            // Pause button with border
-            const pauseBtnBorder = new PIXI.Graphics();
-            pauseBtnBorder.roundRect(CONFIG.width - 53, 7, 46, 46, 10);
-            pauseBtnBorder.fill(0x444455);
-            hud.addChild(pauseBtnBorder);
-
-            const pauseBtn = new PIXI.Graphics();
-            pauseBtn.roundRect(CONFIG.width - 50, 10, 40, 40, 8);
-            pauseBtn.fill(0x2d2d44);
-            pauseBtn.eventMode = 'static';
-            pauseBtn.cursor = 'pointer';
-            hud.addChild(pauseBtn);
-
-            const pauseIcon = new PIXI.Text({
-                text: '⏸',
-                style: { fontSize: 22 }
-            });
-            pauseIcon.anchor.set(0.5);
-            pauseIcon.x = CONFIG.width - 30;
-            pauseIcon.y = 30;
-            hud.addChild(pauseIcon);
-
-            // Progress bar with border
-            const progressLabel = new PIXI.Text({
-                text: 'Progress',
-                style: { fontFamily: 'Arial', fontSize: 10, fill: 0x888888 }
-            });
-            progressLabel.x = 100;
-            progressLabel.y = 43;
-            hud.addChild(progressLabel);
-
-            const progressBorder = new PIXI.Graphics();
-            progressBorder.roundRect(98, 55, 164, 14, 7);
-            progressBorder.fill(0x444455);
-            hud.addChild(progressBorder);
-
-            const progressBg = new PIXI.Graphics();
-            progressBg.roundRect(100, 57, 160, 10, 5);
-            progressBg.fill(0x2d2d44);
-            hud.addChild(progressBg);
-
-            const progressBar = new PIXI.Graphics();
-            hud.addChild(progressBar);
-
-            function updateProgress() {
-                progressBar.clear();
-                const width = Math.max(0, (progress / 100) * 160);
-                if (width > 0) {
-                    progressBar.roundRect(100, 57, width, 10, 5);
-                    progressBar.fill(0x4CAF50);
-                }
-            }
-            updateProgress();
-
-            // Pause overlay
-            const pauseOverlay = new PIXI.Container();
-            pauseOverlay.visible = false;
-            stage.addChild(pauseOverlay);
-
-            const pauseDim = new PIXI.Graphics();
-            pauseDim.rect(0, 0, CONFIG.width, CONFIG.height);
-            pauseDim.fill({ color: 0x000000, alpha: 0.7 });
-            pauseOverlay.addChild(pauseDim);
-
-            // Pause panel border
-            const pausePanelBorder = new PIXI.Graphics();
-            pausePanelBorder.roundRect(CONFIG.width / 2 - 105, CONFIG.height / 2 - 105, 210, 210, 22);
-            pausePanelBorder.fill(0x4d4d6c);
-            pauseOverlay.addChild(pausePanelBorder);
-
-            const pausePanel = new PIXI.Graphics();
-            pausePanel.roundRect(CONFIG.width / 2 - 100, CONFIG.height / 2 - 100, 200, 200, 20);
-            pausePanel.fill(0x2d2d44);
-            pauseOverlay.addChild(pausePanel);
-
-            const pausedText = new PIXI.Text({
-                text: 'PAUSED',
-                style: {
-                    fontFamily: 'Arial',
+                const pausedText = gfx.createText('PAUSED', {
                     fontSize: 28,
                     fontWeight: 'bold',
                     fill: 0xffffff,
                     dropShadow: true,
                     dropShadowDistance: 2
+                });
+                pausedText.anchor.set(0.5);
+                pausedText.x = CONFIG.width / 2;
+                pausedText.y = CONFIG.height / 2 - 50;
+                pauseOverlay.addChild(pausedText);
+
+                const resumeBtnBorder = gfx.createGraphics();
+                resumeBtnBorder.roundRect(CONFIG.width / 2 - 73, CONFIG.height / 2 - 3, 146, 56, 14);
+                resumeBtnBorder.fill(colors.resumeBtnBorder);
+                pauseOverlay.addChild(resumeBtnBorder);
+
+                const resumeBtn = gfx.createGraphics();
+                resumeBtn.roundRect(CONFIG.width / 2 - 70, CONFIG.height / 2, 140, 50, 12);
+                resumeBtn.fill(colors.resumeBtnBg);
+                resumeBtn.eventMode = 'static';
+                resumeBtn.cursor = 'pointer';
+                pauseOverlay.addChild(resumeBtn);
+
+                const resumeText = gfx.createText('RESUME', {
+                    fontSize: 20,
+                    fontWeight: 'bold',
+                    fill: 0xffffff
+                });
+                resumeText.anchor.set(0.5);
+                resumeText.x = CONFIG.width / 2;
+                resumeText.y = CONFIG.height / 2 + 25;
+                pauseOverlay.addChild(resumeText);
+
+                resumeBtn.on('pointerdown', togglePause);
+                pauseBtn.on('pointerdown', togglePause);
+
+                function togglePause() {
+                    isPaused = !isPaused;
+                    pauseOverlay.visible = isPaused;
+                    pauseIcon.text = isPaused ? '\u25b6' : '\u23f8';
                 }
-            });
-            pausedText.anchor.set(0.5);
-            pausedText.x = CONFIG.width / 2;
-            pausedText.y = CONFIG.height / 2 - 50;
-            pauseOverlay.addChild(pausedText);
-
-            // Resume button with border
-            const resumeBtnBorder = new PIXI.Graphics();
-            resumeBtnBorder.roundRect(CONFIG.width / 2 - 73, CONFIG.height / 2 - 3, 146, 56, 14);
-            resumeBtnBorder.fill(0x2E7D32);
-            pauseOverlay.addChild(resumeBtnBorder);
-
-            const resumeBtn = new PIXI.Graphics();
-            resumeBtn.roundRect(CONFIG.width / 2 - 70, CONFIG.height / 2, 140, 50, 12);
-            resumeBtn.fill(0x4CAF50);
-            resumeBtn.eventMode = 'static';
-            resumeBtn.cursor = 'pointer';
-            pauseOverlay.addChild(resumeBtn);
-
-            const resumeText = new PIXI.Text({
-                text: 'RESUME',
-                style: { fontFamily: 'Arial', fontSize: 20, fontWeight: 'bold', fill: 0xffffff }
-            });
-            resumeText.anchor.set(0.5);
-            resumeText.x = CONFIG.width / 2;
-            resumeText.y = CONFIG.height / 2 + 25;
-            pauseOverlay.addChild(resumeText);
-
-            resumeBtn.on('pointerdown', togglePause);
-            pauseBtn.on('pointerdown', togglePause);
-
-            function togglePause() {
-                isPaused = !isPaused;
-                pauseOverlay.visible = isPaused;
-                pauseIcon.text = isPaused ? '▶' : '⏸';
-            }
 
-            // Timer countdown
-            let lastTime = Date.now();
-            function updateTimer() {
-                if (isPaused || timeLeft <= 0) return;
-
-                const now = Date.now();
-                if (now - lastTime >= 1000) {
-                    lastTime = now;
-                    timeLeft--;
-                    timerText.text = formatTime(timeLeft);
-
-                    if (timeLeft <= 10) {
-                        timerText.style.fill = 0xFF4444;
-                        timerGlow.clear();
-                        timerGlow.roundRect(CONFIG.width / 2 - 40, 5, 80, 35, 10);
-                        timerGlow.fill({ color: 0xFF4444, alpha: 0.3 });
+                // Timer countdown
+                let lastTime = Date.now();
+                function updateTimer() {
+                    if (isPaused || timeLeft <= 0) return;
+
+                    const now = Date.now();
+                    if (now - lastTime >= 1000) {
+                        lastTime = now;
+                        timeLeft--;
+                        timerText.text = formatTime(timeLeft);
+
+                        if (timeLeft <= 10) {
+                            timerText.style.fill = 0xFF4444;
+                            timerGlow.clear();
+                            timerGlow.roundRect(CONFIG.width / 2 - 40, 5, 80, 35, 10);
+                            timerGlow.fill({ color: 0xFF4444, alpha: 0.3 });
+                        }
+
+                        if (timeLeft <= 0) {
+                            showDefeat();
+                        }
                     }
+                }
+
+                // Lose life button
+                const loseLifeBtnBorder = gfx.createGraphics();
+                loseLifeBtnBorder.roundRect(CONFIG.width / 2 - 63, CONFIG.height - 63, 126, 46, 10);
+                loseLifeBtnBorder.fill(colors.loseLifeBtnBorder);
+                stage.addChild(loseLifeBtnBorder);
 
-                    if (timeLeft <= 0) {
+                const loseLifeBtn = gfx.createGraphics();
+                loseLifeBtn.roundRect(CONFIG.width / 2 - 60, CONFIG.height - 60, 120, 40, 8);
+                loseLifeBtn.fill(colors.loseLifeBtnBg);
+                loseLifeBtn.eventMode = 'static';
+                loseLifeBtn.cursor = 'pointer';
+                stage.addChild(loseLifeBtn);
+
+                const loseLifeText = gfx.createText('Lose Life', {
+                    fontSize: 14,
+                    fontWeight: 'bold',
+                    fill: 0xffffff
+                });
+                loseLifeText.anchor.set(0.5);
+                loseLifeText.x = CONFIG.width / 2;
+                loseLifeText.y = CONFIG.height - 40;
+                stage.addChild(loseLifeText);
+
+                loseLifeBtn.on('pointerdown', () => {
+                    if (isPaused || lives <= 0) return;
+                    lives--;
+                    updateLives();
+                    if (lives <= 0) {
                         showDefeat();
                     }
-                }
-            }
+                });
 
-            // Lose life button (demo)
-            const loseLifeBtnBorder = new PIXI.Graphics();
-            loseLifeBtnBorder.roundRect(CONFIG.width / 2 - 63, CONFIG.height - 63, 126, 46, 10);
-            loseLifeBtnBorder.fill(0xA33030);
-            stage.addChild(loseLifeBtnBorder);
-
-            const loseLifeBtn = new PIXI.Graphics();
-            loseLifeBtn.roundRect(CONFIG.width / 2 - 60, CONFIG.height - 60, 120, 40, 8);
-            loseLifeBtn.fill(0xE84C4C);
-            loseLifeBtn.eventMode = 'static';
-            loseLifeBtn.cursor = 'pointer';
-            stage.addChild(loseLifeBtn);
-
-            const loseLifeText = new PIXI.Text({
-                text: 'Lose Life',
-                style: { fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold', fill: 0xffffff }
-            });
-            loseLifeText.anchor.set(0.5);
-            loseLifeText.x = CONFIG.width / 2;
-            loseLifeText.y = CONFIG.height - 40;
-            stage.addChild(loseLifeText);
-
-            loseLifeBtn.on('pointerdown', () => {
-                if (isPaused || lives <= 0) return;
-                lives--;
-                updateLives();
-                if (lives <= 0) {
-                    showDefeat();
+                function showVictory() {
+                    isPaused = true;
+                    pausedText.text = 'VICTORY!';
+                    pausedText.style.fill = 0x4CAF50;
+                    resumeText.text = 'Play Again';
+                    pauseOverlay.visible = true;
+                    celebration.victory();
                 }
-            });
 
-            function showVictory() {
-                isPaused = true;
-                pausedText.text = 'VICTORY!';
-                pausedText.style.fill = 0x4CAF50;
-                resumeText.text = 'Play Again';
-                pauseOverlay.visible = true;
-
-                // Victory celebration with confetti!
-                celebration.victory();
-            }
-
-            function showDefeat() {
-                isPaused = true;
-                pausedText.text = 'GAME OVER';
-                pausedText.style.fill = 0xE84C4C;
-                resumeText.text = 'Try Again';
-                pauseOverlay.visible = true;
-            }
+                function showDefeat() {
+                    isPaused = true;
+                    pausedText.text = 'GAME OVER';
+                    pausedText.style.fill = 0xE84C4C;
+                    resumeText.text = 'Try Again';
+                    pauseOverlay.visible = true;
+                }
 
-            // Instructions
-            const instr = new PIXI.Text({
-                text: 'Tap coins to collect!',
-                style: {
-                    fontFamily: 'Arial',
+                // Instructions
+                const instr = gfx.createText('Tap coins to collect!', {
                     fontSize: 14,
-                    fill: 0x333333,
+                    fill: colors.instructionText,
                     dropShadow: true,
-                    dropShadowColor: 0xffffff,
+                    dropShadowColor: colors.instructionShadow,
                     dropShadowDistance: 1
-                }
-            });
-            instr.anchor.set(0.5);
-            instr.x = CONFIG.width / 2;
-            instr.y = 100;
-            stage.addChild(instr);
+                });
+                instr.anchor.set(0.5);
+                instr.x = CONFIG.width / 2;
+                instr.y = 100;
+                stage.addChild(instr);
+
+                window.currentUpdateTimer = updateTimer;
+            }
+
+            window.createHUDScreen = createHUDScreen;
 
-            // Game loop
             game.on('update', (deltaTime) => {
-                updateTimer();
+                if (window.currentUpdateTimer) window.currentUpdateTimer();
                 celebration.update(deltaTime);
             });
 
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createHUDScreen();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/game-modal-panel-demo.html b/docs-site/static/demos/game-modal-panel-demo.html
index 9efda9d..02b3dcf 100644
--- a/docs-site/static/demos/game-modal-panel-demo.html
+++ b/docs-site/static/demos/game-modal-panel-demo.html
@@ -6,7 +6,8 @@
     <title>GameModalPanel Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #1a1a2e; }
+        body { overflow: hidden; background: #1a1a2e; transition: background 0.3s ease; }
+        body.light-theme { background: #e8ecf4; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,10 +16,131 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame, CelebrationManager } = GameByteFramework;
+        // =====================================================
+        // GameModalPanel Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - Modal panel with scale animation
+        // - Settings toggles with sparkle effects
+        // - CelebrationManager for confetti
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const { createGame, CelebrationManager, graphics, loadFrameworkFont } = GameByteFramework;
 
         const CONFIG = { width: 400, height: 500 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                mainBg: 0x1a1a2e,
+                dotColor: 0xffffff,
+                dotAlpha: 0.1,
+                btnGlow: 0x6366f1,
+                btnGlowAlpha: 0.3,
+                btnBorder: 0x4F51C5,
+                btnBg: 0x6366f1,
+                dimColor: 0x000000,
+                dimAlpha: 0.6,
+                panelGlow: 0x6366f1,
+                panelGlowAlpha: 0.2,
+                panelBorder: 0x4d4d6c,
+                panelBg: 0x2A3142,
+                titleDecor: 0x6366f1,
+                titleColor: 0xffffff,
+                closeBtnGlow: 0xE84C4C,
+                closeBtnBg: 0xE84C4C,
+                rowBg: 0x3d3d5c,
+                rowBgAlpha: 0.5,
+                labelText: 0xffffff,
+                toggleOnBorder: 0x2E7D32,
+                toggleOffBorder: 0x3d3d5c,
+                toggleOnBg: 0x4CAF50,
+                toggleOffBg: 0x4b5563,
+                textWhite: 0xffffff,
+                instructionText: 0x888888,
+                confettiColors: [0x6366f1, 0x8B5CF6, 0xffffff]
+            },
+            light: {
+                mainBg: 0xe8ecf4,
+                dotColor: 0x5a6a8a,
+                dotAlpha: 0.15,
+                btnGlow: 0x7376f5,
+                btnGlowAlpha: 0.35,
+                btnBorder: 0x5F61D5,
+                btnBg: 0x7376f5,
+                dimColor: 0x1a2a4a,
+                dimAlpha: 0.5,
+                panelGlow: 0x7376f5,
+                panelGlowAlpha: 0.25,
+                panelBorder: 0x8a9abc,
+                panelBg: 0xf0f4fa,
+                titleDecor: 0x7376f5,
+                titleColor: 0x2a3a5a,
+                closeBtnGlow: 0xF05C5C,
+                closeBtnBg: 0xF05C5C,
+                rowBg: 0xd8dce8,
+                rowBgAlpha: 0.7,
+                labelText: 0x2a3a5a,
+                toggleOnBorder: 0x3E8D42,
+                toggleOffBorder: 0xb8c0d0,
+                toggleOnBg: 0x5CBF60,
+                toggleOffBg: 0x9ba5b8,
+                textWhite: 0xffffff,
+                instructionText: 0x6a7a9a,
+                confettiColors: [0x7376f5, 0x9B6CF8, 0xffffff]
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
@@ -26,318 +148,324 @@
 
         const game = createGame();
         let celebration = null;
+        let renderer, stage;
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createModalScreen) {
+                await loadFrameworkFont();
+                window.createModalScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
 
         (async () => {
+            await loadFrameworkFont();
             await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
 
-            // Create celebration manager
             celebration = new CelebrationManager(stage, CONFIG.width, CONFIG.height);
+            setupThemeListener();
 
-            // Background
-            const bg = new PIXI.Graphics();
-            bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill(0x1a1a2e);
-            stage.addChild(bg);
-
-            // Background pattern (dots)
-            for (let x = 0; x < CONFIG.width; x += 30) {
-                for (let y = 0; y < CONFIG.height; y += 30) {
-                    const dot = new PIXI.Graphics();
-                    dot.circle(x, y, 2);
-                    dot.fill({ color: 0xffffff, alpha: 0.1 });
-                    stage.addChild(dot);
+            function createModalScreen() {
+                const colors = getColors();
+                const gfx = graphics();
+
+                while (stage.children.length > 0) {
+                    stage.removeChildAt(0);
+                }
+                celebration.clear();
+
+                // Background
+                const bg = gfx.createGraphics();
+                bg.rect(0, 0, CONFIG.width, CONFIG.height);
+                bg.fill(colors.mainBg);
+                stage.addChild(bg);
+
+                // Background dots pattern
+                for (let x = 0; x < CONFIG.width; x += 30) {
+                    for (let y = 0; y < CONFIG.height; y += 30) {
+                        const dot = gfx.createGraphics();
+                        dot.circle(x, y, 2);
+                        dot.fill({ color: colors.dotColor, alpha: colors.dotAlpha });
+                        stage.addChild(dot);
+                    }
                 }
-            }
 
-            // Show Modal button with glow effect
-            const btnGlow = new PIXI.Graphics();
-            btnGlow.roundRect(CONFIG.width / 2 - 85, CONFIG.height / 2 - 35, 170, 70, 16);
-            btnGlow.fill({ color: 0x6366f1, alpha: 0.3 });
-            stage.addChild(btnGlow);
-
-            const showBtnBorder = new PIXI.Graphics();
-            showBtnBorder.roundRect(CONFIG.width / 2 - 83, CONFIG.height / 2 - 33, 166, 66, 14);
-            showBtnBorder.fill(0x4F51C5);
-            stage.addChild(showBtnBorder);
-
-            const showBtn = new PIXI.Graphics();
-            showBtn.roundRect(CONFIG.width / 2 - 80, CONFIG.height / 2 - 30, 160, 60, 12);
-            showBtn.fill(0x6366f1);
-            showBtn.eventMode = 'static';
-            showBtn.cursor = 'pointer';
-            stage.addChild(showBtn);
-
-            const showText = new PIXI.Text({
-                text: 'Show Modal',
-                style: { fontFamily: 'Arial', fontSize: 20, fontWeight: 'bold', fill: 0xffffff }
-            });
-            showText.anchor.set(0.5);
-            showText.x = CONFIG.width / 2;
-            showText.y = CONFIG.height / 2;
-            stage.addChild(showText);
-
-            // Modal overlay
-            const modalOverlay = new PIXI.Container();
-            modalOverlay.visible = false;
-            stage.addChild(modalOverlay);
-
-            // Dim background
-            const dim = new PIXI.Graphics();
-            dim.rect(0, 0, CONFIG.width, CONFIG.height);
-            dim.fill({ color: 0x000000, alpha: 0.6 });
-            dim.eventMode = 'static';
-            modalOverlay.addChild(dim);
-
-            // Modal panel
-            const modal = new PIXI.Container();
-            modal.x = CONFIG.width / 2;
-            modal.y = CONFIG.height / 2;
-            modalOverlay.addChild(modal);
-
-            // Panel outer glow
-            const panelGlow = new PIXI.Graphics();
-            panelGlow.roundRect(-165, -185, 330, 370, 24);
-            panelGlow.fill({ color: 0x6366f1, alpha: 0.2 });
-            modal.addChild(panelGlow);
-
-            // Panel background with border
-            const panelBorder = new PIXI.Graphics();
-            panelBorder.roundRect(-158, -178, 316, 356, 20);
-            panelBorder.fill(0x4d4d6c);
-            modal.addChild(panelBorder);
-
-            const panelBg = new PIXI.Graphics();
-            panelBg.roundRect(-150, -170, 300, 340, 16);
-            panelBg.fill(0x2A3142);
-            modal.addChild(panelBg);
-
-            // Title with decoration
-            const titleDecorLeft = new PIXI.Graphics();
-            titleDecorLeft.roundRect(-130, -132, 40, 3, 2);
-            titleDecorLeft.fill(0x6366f1);
-            modal.addChild(titleDecorLeft);
-
-            const titleDecorRight = new PIXI.Graphics();
-            titleDecorRight.roundRect(90, -132, 40, 3, 2);
-            titleDecorRight.fill(0x6366f1);
-            modal.addChild(titleDecorRight);
-
-            const title = new PIXI.Text({
-                text: 'Settings',
-                style: {
-                    fontFamily: 'Arial',
+                // Show Modal button
+                const btnGlow = gfx.createGraphics();
+                btnGlow.roundRect(CONFIG.width / 2 - 85, CONFIG.height / 2 - 35, 170, 70, 16);
+                btnGlow.fill({ color: colors.btnGlow, alpha: colors.btnGlowAlpha });
+                stage.addChild(btnGlow);
+
+                const showBtnBorder = gfx.createGraphics();
+                showBtnBorder.roundRect(CONFIG.width / 2 - 83, CONFIG.height / 2 - 33, 166, 66, 14);
+                showBtnBorder.fill(colors.btnBorder);
+                stage.addChild(showBtnBorder);
+
+                const showBtn = gfx.createGraphics();
+                showBtn.roundRect(CONFIG.width / 2 - 80, CONFIG.height / 2 - 30, 160, 60, 12);
+                showBtn.fill(colors.btnBg);
+                showBtn.eventMode = 'static';
+                showBtn.cursor = 'pointer';
+                stage.addChild(showBtn);
+
+                const showText = gfx.createText('Show Modal', {
+                    fontSize: 20,
+                    fontWeight: 'bold',
+                    fill: colors.textWhite
+                });
+                showText.anchor.set(0.5);
+                showText.x = CONFIG.width / 2;
+                showText.y = CONFIG.height / 2;
+                stage.addChild(showText);
+
+                // Modal overlay
+                const modalOverlay = gfx.createContainer();
+                modalOverlay.visible = false;
+                stage.addChild(modalOverlay);
+
+                const dim = gfx.createGraphics();
+                dim.rect(0, 0, CONFIG.width, CONFIG.height);
+                dim.fill({ color: colors.dimColor, alpha: colors.dimAlpha });
+                dim.eventMode = 'static';
+                modalOverlay.addChild(dim);
+
+                // Modal panel
+                const modal = gfx.createContainer();
+                modal.x = CONFIG.width / 2;
+                modal.y = CONFIG.height / 2;
+                modalOverlay.addChild(modal);
+
+                const panelGlow = gfx.createGraphics();
+                panelGlow.roundRect(-165, -185, 330, 370, 24);
+                panelGlow.fill({ color: colors.panelGlow, alpha: colors.panelGlowAlpha });
+                modal.addChild(panelGlow);
+
+                const panelBorder = gfx.createGraphics();
+                panelBorder.roundRect(-158, -178, 316, 356, 20);
+                panelBorder.fill(colors.panelBorder);
+                modal.addChild(panelBorder);
+
+                const panelBg = gfx.createGraphics();
+                panelBg.roundRect(-150, -170, 300, 340, 16);
+                panelBg.fill(colors.panelBg);
+                modal.addChild(panelBg);
+
+                // Title decorations
+                const titleDecorLeft = gfx.createGraphics();
+                titleDecorLeft.roundRect(-130, -132, 40, 3, 2);
+                titleDecorLeft.fill(colors.titleDecor);
+                modal.addChild(titleDecorLeft);
+
+                const titleDecorRight = gfx.createGraphics();
+                titleDecorRight.roundRect(90, -132, 40, 3, 2);
+                titleDecorRight.fill(colors.titleDecor);
+                modal.addChild(titleDecorRight);
+
+                const title = gfx.createText('Settings', {
                     fontSize: 28,
                     fontWeight: 'bold',
-                    fill: 0xffffff,
-                    dropShadow: true,
+                    fill: colors.titleColor,
+                    dropShadow: currentTheme === 'dark',
                     dropShadowDistance: 2
-                }
-            });
-            title.anchor.set(0.5);
-            title.y = -130;
-            modal.addChild(title);
-
-            // Settings icon
-            const settingsIcon = new PIXI.Text({
-                text: '⚙️',
-                style: { fontSize: 24 }
-            });
-            settingsIcon.anchor.set(0.5);
-            settingsIcon.x = -70;
-            settingsIcon.y = -130;
-            modal.addChild(settingsIcon);
-
-            // Close button with glow
-            const closeBtnGlow = new PIXI.Graphics();
-            closeBtnGlow.circle(125, -145, 22);
-            closeBtnGlow.fill({ color: 0xE84C4C, alpha: 0.3 });
-            modal.addChild(closeBtnGlow);
-
-            const closeBtn = new PIXI.Graphics();
-            closeBtn.circle(125, -145, 18);
-            closeBtn.fill(0xE84C4C);
-            closeBtn.eventMode = 'static';
-            closeBtn.cursor = 'pointer';
-            modal.addChild(closeBtn);
-
-            const closeX = new PIXI.Text({
-                text: '✕',
-                style: { fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold', fill: 0xffffff }
-            });
-            closeX.anchor.set(0.5);
-            closeX.x = 125;
-            closeX.y = -145;
-            modal.addChild(closeX);
-
-            // Content - toggles
-            const toggles = [
-                { label: 'Music', icon: '🎵', value: true, y: -60 },
-                { label: 'Sound Effects', icon: '🔊', value: true, y: 10 },
-                { label: 'Vibration', icon: '📳', value: false, y: 80 }
-            ];
-
-            toggles.forEach((toggle) => {
-                // Row background
-                const rowBg = new PIXI.Graphics();
-                rowBg.roundRect(-130, toggle.y - 18, 260, 50, 10);
-                rowBg.fill({ color: 0x3d3d5c, alpha: 0.5 });
-                modal.addChild(rowBg);
-
-                // Icon
-                const icon = new PIXI.Text({
-                    text: toggle.icon,
-                    style: { fontSize: 20 }
                 });
-                icon.x = -110;
-                icon.y = toggle.y - 2;
-                modal.addChild(icon);
-
-                // Label
-                const label = new PIXI.Text({
-                    text: toggle.label,
-                    style: { fontFamily: 'Arial', fontSize: 18, fill: 0xffffff }
+                title.anchor.set(0.5);
+                title.y = -130;
+                modal.addChild(title);
+
+                const settingsIcon = gfx.createText('\u2699\ufe0f', { fontSize: 24 });
+                settingsIcon.anchor.set(0.5);
+                settingsIcon.x = -70;
+                settingsIcon.y = -130;
+                modal.addChild(settingsIcon);
+
+                // Close button
+                const closeBtnGlow = gfx.createGraphics();
+                closeBtnGlow.circle(125, -145, 22);
+                closeBtnGlow.fill({ color: colors.closeBtnGlow, alpha: 0.3 });
+                modal.addChild(closeBtnGlow);
+
+                const closeBtn = gfx.createGraphics();
+                closeBtn.circle(125, -145, 18);
+                closeBtn.fill(colors.closeBtnBg);
+                closeBtn.eventMode = 'static';
+                closeBtn.cursor = 'pointer';
+                modal.addChild(closeBtn);
+
+                const closeX = gfx.createText('\u2715', {
+                    fontSize: 18,
+                    fontWeight: 'bold',
+                    fill: colors.textWhite
                 });
-                label.x = -80;
-                label.y = toggle.y;
-                modal.addChild(label);
-
-                // Toggle background with border
-                const toggleBorder = new PIXI.Graphics();
-                toggleBorder.roundRect(68, toggle.y - 7, 64, 34, 17);
-                toggleBorder.fill(toggle.value ? 0x2E7D32 : 0x3d3d5c);
-                modal.addChild(toggleBorder);
-
-                const toggleBg = new PIXI.Graphics();
-                toggleBg.roundRect(70, toggle.y - 5, 60, 30, 15);
-                toggleBg.fill(toggle.value ? 0x4CAF50 : 0x4b5563);
-                toggleBg.eventMode = 'static';
-                toggleBg.cursor = 'pointer';
-                modal.addChild(toggleBg);
-
-                // Toggle knob with shadow
-                const knobShadow = new PIXI.Graphics();
-                knobShadow.circle(toggle.value ? 116 : 86, toggle.y + 11, 11);
-                knobShadow.fill({ color: 0x000000, alpha: 0.2 });
-                modal.addChild(knobShadow);
-
-                const knob = new PIXI.Graphics();
-                knob.circle(toggle.value ? 115 : 85, toggle.y + 10, 11);
-                knob.fill(0xffffff);
-                modal.addChild(knob);
-
-                toggleBg.on('pointerdown', () => {
-                    toggle.value = !toggle.value;
-
-                    // Update border
-                    toggleBorder.clear();
+                closeX.anchor.set(0.5);
+                closeX.x = 125;
+                closeX.y = -145;
+                modal.addChild(closeX);
+
+                // Toggle rows
+                const toggles = [
+                    { label: 'Music', icon: '\ud83c\udfb5', value: true, y: -60 },
+                    { label: 'Sound Effects', icon: '\ud83d\udd0a', value: true, y: 10 },
+                    { label: 'Vibration', icon: '\ud83d\udcf3', value: false, y: 80 }
+                ];
+
+                toggles.forEach((toggle) => {
+                    const rowBg = gfx.createGraphics();
+                    rowBg.roundRect(-130, toggle.y - 18, 260, 50, 10);
+                    rowBg.fill({ color: colors.rowBg, alpha: colors.rowBgAlpha });
+                    modal.addChild(rowBg);
+
+                    const icon = gfx.createText(toggle.icon, { fontSize: 20 });
+                    icon.x = -110;
+                    icon.y = toggle.y - 2;
+                    modal.addChild(icon);
+
+                    const label = gfx.createText(toggle.label, {
+                        fontSize: 18,
+                        fill: colors.labelText
+                    });
+                    label.x = -80;
+                    label.y = toggle.y;
+                    modal.addChild(label);
+
+                    const toggleBorder = gfx.createGraphics();
                     toggleBorder.roundRect(68, toggle.y - 7, 64, 34, 17);
-                    toggleBorder.fill(toggle.value ? 0x2E7D32 : 0x3d3d5c);
+                    toggleBorder.fill(toggle.value ? colors.toggleOnBorder : colors.toggleOffBorder);
+                    modal.addChild(toggleBorder);
 
-                    // Update background
-                    toggleBg.clear();
+                    const toggleBg = gfx.createGraphics();
                     toggleBg.roundRect(70, toggle.y - 5, 60, 30, 15);
-                    toggleBg.fill(toggle.value ? 0x4CAF50 : 0x4b5563);
+                    toggleBg.fill(toggle.value ? colors.toggleOnBg : colors.toggleOffBg);
+                    toggleBg.eventMode = 'static';
+                    toggleBg.cursor = 'pointer';
+                    modal.addChild(toggleBg);
 
-                    // Update knob
-                    knobShadow.clear();
+                    const knobShadow = gfx.createGraphics();
                     knobShadow.circle(toggle.value ? 116 : 86, toggle.y + 11, 11);
                     knobShadow.fill({ color: 0x000000, alpha: 0.2 });
+                    modal.addChild(knobShadow);
 
-                    knob.clear();
+                    const knob = gfx.createGraphics();
                     knob.circle(toggle.value ? 115 : 85, toggle.y + 10, 11);
                     knob.fill(0xffffff);
+                    modal.addChild(knob);
 
-                    // Sparkle effect when enabled
-                    if (toggle.value) {
-                        const sparkleX = modal.x + 100;
-                        const sparkleY = modal.y + toggle.y + 10;
-                        celebration.rewardReceived(sparkleX, sparkleY);
-                    }
-                });
-            });
+                    toggleBg.on('pointerdown', () => {
+                        toggle.value = !toggle.value;
 
-            // Animation functions
-            function easeOutBack(x) {
-                const c1 = 1.70158;
-                const c3 = c1 + 1;
-                return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
-            }
+                        toggleBorder.clear();
+                        toggleBorder.roundRect(68, toggle.y - 7, 64, 34, 17);
+                        toggleBorder.fill(toggle.value ? colors.toggleOnBorder : colors.toggleOffBorder);
 
-            function animate(target, props, duration, easing = (x) => x) {
-                return new Promise(resolve => {
-                    const start = {};
-                    for (const key in props) {
-                        start[key] = target[key];
-                    }
-                    const startTime = Date.now();
+                        toggleBg.clear();
+                        toggleBg.roundRect(70, toggle.y - 5, 60, 30, 15);
+                        toggleBg.fill(toggle.value ? colors.toggleOnBg : colors.toggleOffBg);
 
-                    const tick = () => {
-                        const elapsed = Date.now() - startTime;
-                        const progress = Math.min(elapsed / duration, 1);
-                        const eased = easing(progress);
+                        knobShadow.clear();
+                        knobShadow.circle(toggle.value ? 116 : 86, toggle.y + 11, 11);
+                        knobShadow.fill({ color: 0x000000, alpha: 0.2 });
 
-                        for (const key in props) {
-                            target[key] = start[key] + (props[key] - start[key]) * eased;
-                        }
+                        knob.clear();
+                        knob.circle(toggle.value ? 115 : 85, toggle.y + 10, 11);
+                        knob.fill(0xffffff);
 
-                        if (progress < 1) {
-                            requestAnimationFrame(tick);
-                        } else {
-                            resolve();
+                        if (toggle.value) {
+                            const sparkleX = modal.x + 100;
+                            const sparkleY = modal.y + toggle.y + 10;
+                            celebration.rewardReceived(sparkleX, sparkleY);
                         }
-                    };
-                    tick();
+                    });
                 });
-            }
 
-            async function showModal() {
-                modalOverlay.visible = true;
-                dim.alpha = 0;
-                modal.scale.x = 0;
-                modal.scale.y = 0;
-
-                await Promise.all([
-                    animate(dim, { alpha: 0.6 }, 200),
-                    animate(modal.scale, { x: 1, y: 1 }, 300, easeOutBack)
-                ]);
-
-                // Small burst celebration when modal opens
-                celebration.confetti.burst(CONFIG.width / 2, CONFIG.height / 2, {
-                    particleCount: 20,
-                    spread: 360,
-                    colors: [0x6366f1, 0x8B5CF6, 0xffffff]
-                });
-            }
+                // Animation functions
+                function easeOutBack(x) {
+                    const c1 = 1.70158;
+                    const c3 = c1 + 1;
+                    return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
+                }
 
-            async function hideModal() {
-                await Promise.all([
-                    animate(dim, { alpha: 0 }, 150),
-                    animate(modal.scale, { x: 0, y: 0 }, 200)
-                ]);
-                modalOverlay.visible = false;
-            }
+                function animate(target, props, duration, easing = (x) => x) {
+                    return new Promise(resolve => {
+                        const start = {};
+                        for (const key in props) {
+                            start[key] = target[key];
+                        }
+                        const startTime = Date.now();
+
+                        const tick = () => {
+                            const elapsed = Date.now() - startTime;
+                            const progress = Math.min(elapsed / duration, 1);
+                            const eased = easing(progress);
+
+                            for (const key in props) {
+                                target[key] = start[key] + (props[key] - start[key]) * eased;
+                            }
+
+                            if (progress < 1) {
+                                requestAnimationFrame(tick);
+                            } else {
+                                resolve();
+                            }
+                        };
+                        tick();
+                    });
+                }
 
-            showBtn.on('pointerdown', showModal);
-            closeBtn.on('pointerdown', hideModal);
-            dim.on('pointerdown', hideModal);
+                async function showModal() {
+                    modalOverlay.visible = true;
+                    dim.alpha = 0;
+                    modal.scale.x = 0;
+                    modal.scale.y = 0;
+
+                    await Promise.all([
+                        animate(dim, { alpha: colors.dimAlpha }, 200),
+                        animate(modal.scale, { x: 1, y: 1 }, 300, easeOutBack)
+                    ]);
+
+                    celebration.confetti.burst(CONFIG.width / 2, CONFIG.height / 2, {
+                        particleCount: 20,
+                        spread: 360,
+                        colors: colors.confettiColors
+                    });
+                }
 
-            // Instructions
-            const instr = new PIXI.Text({
-                text: 'Tap to show modal with scale animation',
-                style: { fontFamily: 'Arial', fontSize: 12, fill: 0x888888 }
-            });
-            instr.anchor.set(0.5);
-            instr.x = CONFIG.width / 2;
-            instr.y = CONFIG.height - 30;
-            stage.addChild(instr);
+                async function hideModal() {
+                    await Promise.all([
+                        animate(dim, { alpha: 0 }, 150),
+                        animate(modal.scale, { x: 0, y: 0 }, 200)
+                    ]);
+                    modalOverlay.visible = false;
+                }
+
+                showBtn.on('pointerdown', showModal);
+                closeBtn.on('pointerdown', hideModal);
+                dim.on('pointerdown', hideModal);
+
+                // Instructions
+                const instr = gfx.createText('Tap to show modal with scale animation', {
+                    fontSize: 12,
+                    fill: colors.instructionText
+                });
+                instr.anchor.set(0.5);
+                instr.x = CONFIG.width / 2;
+                instr.y = CONFIG.height - 30;
+                stage.addChild(instr);
+            }
+
+            window.createModalScreen = createModalScreen;
 
-            // Game loop for celebration updates
             game.on('update', (deltaTime) => {
                 celebration.update(deltaTime);
             });
 
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createModalScreen();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/game-settings-panel.html b/docs-site/static/demos/game-settings-panel.html
index a6fed59..ba86013 100644
--- a/docs-site/static/demos/game-settings-panel.html
+++ b/docs-site/static/demos/game-settings-panel.html
@@ -6,7 +6,8 @@
     <title>GameStylePanel Settings Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #1A2744; }
+        body { overflow: hidden; background: #1A2744; transition: background 0.3s ease; }
+        body.light-theme { background: #e5eaf4; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,154 +16,289 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame, GameStylePanel, GameToggle, GameStyleButton, GameStyleColors } = GameByteFramework;
+        // =====================================================
+        // GameStylePanel Settings Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - GameStylePanel component with title and close button
+        // - GameToggle and GameSlider components
+        // - GameStyleButton with different color schemes
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const {
+            createGame,
+            GameStylePanel,
+            GameToggle,
+            GameSlider,
+            GameSliderColors,
+            GameStyleButton,
+            GameStyleColors,
+            graphics,
+            loadFrameworkFont
+        } = GameByteFramework;
 
         const CONFIG = { width: 400, height: 550 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                mainBg: 0x1A2744,
+                labelText: 0xFFFFFF,
+                versionText: 0x6B8CB8,
+                panelScheme: GameStyleColors.PANEL_BLUE
+            },
+            light: {
+                mainBg: 0xe5eaf4,
+                labelText: 0x2a3a5a,
+                versionText: 0x5a7aa0,
+                panelScheme: GameStyleColors.PANEL_BLUE
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage;
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createSettingsScreen) {
+                await loadFrameworkFont();
+                window.createSettingsScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
 
         (async () => {
+            await loadFrameworkFont();
             await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
-
-            // Dark background
-            const bg = new PIXI.Graphics();
-            bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill(0x1A2744);
-            stage.addChild(bg);
-
-            // Create Settings Panel
-            const settingsPanel = new GameStylePanel({
-                width: 360,
-                height: 480,
-                title: 'SETTINGS',
-                showCloseButton: true,
-                colorScheme: GameStyleColors.PANEL_BLUE,
-                onClose: () => console.log('Panel closed!')
-            });
-            settingsPanel.setPosition(20, 30);
-            stage.addChild(settingsPanel.getContainer());
-
-            // Get content container reference
-            const content = settingsPanel.getContentContainer();
-
-            // Settings row helper
-            function createSettingRow(iconText, label, y, toggleValue) {
-                const row = new PIXI.Container();
-                row.y = y;
-
-                // Icon background
-                const iconBg = new PIXI.Graphics();
-                iconBg.roundRect(0, 0, 44, 44, 10);
-                iconBg.fill(0xFFFFFF);
-                row.addChild(iconBg);
-
-                // Icon (emoji text)
-                const icon = new PIXI.Text({
-                    text: iconText,
-                    style: { fontSize: 24 }
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
+
+            setupThemeListener();
+
+            function createSettingsScreen() {
+                const colors = getColors();
+                const gfx = graphics();
+
+                while (stage.children.length > 0) {
+                    stage.removeChildAt(0);
+                }
+
+                // Background
+                const bg = gfx.createGraphics();
+                bg.rect(0, 0, CONFIG.width, CONFIG.height);
+                bg.fill(colors.mainBg);
+                stage.addChild(bg);
+
+                // Settings Panel
+                const settingsPanel = new GameStylePanel({
+                    width: 360,
+                    height: 480,
+                    title: 'SETTINGS',
+                    showCloseButton: true,
+                    colorScheme: colors.panelScheme,
+                    onClose: () => console.log('Panel closed!')
                 });
-                icon.x = 10;
-                icon.y = 8;
-                row.addChild(icon);
-
-                // Label
-                const labelText = new PIXI.Text({
-                    text: label,
-                    style: {
-                        fontFamily: 'Arial Black',
+                settingsPanel.setPosition(20, 30);
+                stage.addChild(settingsPanel.getContainer());
+
+                const content = settingsPanel.getContentContainer();
+
+                // Settings row helper for toggle
+                function createToggleRow(iconText, label, y, toggleValue) {
+                    const row = gfx.createContainer();
+                    row.y = y;
+
+                    const iconBg = gfx.createGraphics();
+                    iconBg.roundRect(0, 0, 44, 44, 10);
+                    iconBg.fill(0xFFFFFF);
+                    row.addChild(iconBg);
+
+                    const icon = gfx.createText(iconText, { fontSize: 24 });
+                    icon.x = 10;
+                    icon.y = 8;
+                    row.addChild(icon);
+
+                    const labelText = gfx.createText(label, {
                         fontSize: 20,
-                        fill: 0xFFFFFF,
+                        fill: colors.labelText,
                         fontWeight: 'bold'
-                    }
+                    });
+                    labelText.x = 60;
+                    labelText.y = 10;
+                    row.addChild(labelText);
+
+                    const toggle = new GameToggle({
+                        width: 70,
+                        height: 36,
+                        value: toggleValue,
+                        onChange: (val) => console.log(`${label}: ${val}`)
+                    });
+                    toggle.setPosition(230, 4);
+                    row.addChild(toggle.getContainer());
+
+                    return row;
+                }
+
+                // Settings row helper for slider
+                function createSliderRow(iconText, label, y, sliderValue, colorScheme) {
+                    const row = gfx.createContainer();
+                    row.y = y;
+
+                    const iconBg = gfx.createGraphics();
+                    iconBg.roundRect(0, 0, 44, 44, 10);
+                    iconBg.fill(0xFFFFFF);
+                    row.addChild(iconBg);
+
+                    const icon = gfx.createText(iconText, { fontSize: 24 });
+                    icon.x = 10;
+                    icon.y = 8;
+                    row.addChild(icon);
+
+                    const labelText = gfx.createText(label, {
+                        fontSize: 20,
+                        fill: colors.labelText,
+                        fontWeight: 'bold'
+                    });
+                    labelText.x = 60;
+                    labelText.y = 10;
+                    row.addChild(labelText);
+
+                    const slider = new GameSlider({
+                        width: 140,
+                        height: 32,
+                        min: 0,
+                        max: 100,
+                        value: sliderValue,
+                        colorScheme: colorScheme || GameSliderColors.DEFAULT,
+                        onChange: (val) => console.log(`${label}: ${val}%`)
+                    });
+                    slider.setPosition(160, 6);
+                    row.addChild(slider.getContainer());
+
+                    return row;
+                }
+
+                // Add settings rows
+                const musicRow = createSliderRow('\ud83c\udfb5', 'Music', 0, 75, GameSliderColors.GREEN);
+                content.addChild(musicRow);
+
+                const soundsRow = createSliderRow('\ud83d\udd0a', 'Sounds', 60, 100, GameSliderColors.DEFAULT);
+                content.addChild(soundsRow);
+
+                const hapticRow = createToggleRow('\ud83d\udcf3', 'Haptic', 120, false);
+                content.addChild(hapticRow);
+
+                // Action buttons row
+                const buttonsRow1 = gfx.createContainer();
+                buttonsRow1.y = 195;
+                content.addChild(buttonsRow1);
+
+                const privacyBtn = new GameStyleButton({
+                    text: 'Privacy\nSettings',
+                    width: 145,
+                    height: 70,
+                    fontSize: 15,
+                    colorScheme: GameStyleColors.YELLOW_BUTTON
                 });
-                labelText.x = 60;
-                labelText.y = 10;
-                row.addChild(labelText);
-
-                // Toggle
-                const toggle = new GameToggle({
-                    width: 70,
-                    height: 36,
-                    value: toggleValue,
-                    onChange: (val) => console.log(`${label}: ${val}`)
+                privacyBtn.setPosition(0, 0);
+                privacyBtn.on('click', () => console.log('Privacy Settings'));
+                buttonsRow1.addChild(privacyBtn.getContainer());
+
+                const contactBtn = new GameStyleButton({
+                    text: 'Contact\nUs',
+                    width: 145,
+                    height: 70,
+                    fontSize: 15,
+                    colorScheme: GameStyleColors.GREEN_BUTTON
                 });
-                toggle.setPosition(230, 4);
-                row.addChild(toggle.getContainer());
+                contactBtn.setPosition(155, 0);
+                contactBtn.on('click', () => console.log('Contact Us'));
+                buttonsRow1.addChild(contactBtn.getContainer());
 
-                return row;
-            }
+                const restoreBtn = new GameStyleButton({
+                    text: 'Restore Purchases',
+                    width: 300,
+                    height: 60,
+                    fontSize: 18,
+                    colorScheme: GameStyleColors.PURPLE_BUTTON
+                });
+                restoreBtn.setPosition(0, 280);
+                restoreBtn.on('click', () => console.log('Restore Purchases'));
+                content.addChild(restoreBtn.getContainer());
 
-            // Add setting rows
-            const musicRow = createSettingRow('🎵', 'Music', 0, true);
-            content.addChild(musicRow);
-
-            const soundsRow = createSettingRow('🔊', 'Sounds', 60, true);
-            content.addChild(soundsRow);
-
-            const hapticRow = createSettingRow('📳', 'Haptic', 120, false);
-            content.addChild(hapticRow);
-
-            // Action buttons row
-            const buttonsRow1 = new PIXI.Container();
-            buttonsRow1.y = 195;
-            content.addChild(buttonsRow1);
-
-            // Privacy Settings button
-            const privacyBtn = new GameStyleButton({
-                text: 'Privacy\nSettings',
-                width: 145,
-                height: 70,
-                fontSize: 15,
-                colorScheme: GameStyleColors.YELLOW_BUTTON
-            });
-            privacyBtn.setPosition(0, 0);
-            privacyBtn.on('click', () => console.log('Privacy Settings'));
-            buttonsRow1.addChild(privacyBtn.getContainer());
-
-            // Contact Us button
-            const contactBtn = new GameStyleButton({
-                text: 'Contact\nUs',
-                width: 145,
-                height: 70,
-                fontSize: 15,
-                colorScheme: GameStyleColors.GREEN_BUTTON
-            });
-            contactBtn.setPosition(155, 0);
-            contactBtn.on('click', () => console.log('Contact Us'));
-            buttonsRow1.addChild(contactBtn.getContainer());
-
-            // Restore Purchases button
-            const restoreBtn = new GameStyleButton({
-                text: 'Restore Purchases',
-                width: 300,
-                height: 60,
-                fontSize: 18,
-                colorScheme: GameStyleColors.PURPLE_BUTTON
-            });
-            restoreBtn.setPosition(0, 280);
-            restoreBtn.on('click', () => console.log('Restore Purchases'));
-            content.addChild(restoreBtn.getContainer());
-
-            // Version text
-            const version = new PIXI.Text({
-                text: '0.15.0 (2)',
-                style: {
-                    fontFamily: 'Arial',
+                // Version text
+                const version = gfx.createText('0.15.0 (2)', {
                     fontSize: 14,
-                    fill: 0x6B8CB8
-                }
-            });
-            version.x = 120;
-            version.y = 365;
-            content.addChild(version);
+                    fill: colors.versionText
+                });
+                version.x = 120;
+                version.y = 365;
+                content.addChild(version);
+            }
+
+            window.createSettingsScreen = createSettingsScreen;
 
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createSettingsScreen();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/game-topbar-demo.html b/docs-site/static/demos/game-topbar-demo.html
index 188d787..150094e 100644
--- a/docs-site/static/demos/game-topbar-demo.html
+++ b/docs-site/static/demos/game-topbar-demo.html
@@ -6,7 +6,8 @@
     <title>GameTopBar Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #4DA6FF; }
+        body { overflow: hidden; background: #4DA6FF; transition: background 0.3s ease; }
+        body.light-theme { background: #87CEEB; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,31 +16,109 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame, GameTopBar } = GameByteFramework;
+        // =====================================================
+        // GameTopBar Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - GameTopBar component with resources display
+        // - Multiple resource types (lives, coins, gems, energy)
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const { createGame, GameTopBar, graphics, loadFrameworkFont } = GameByteFramework;
 
         const CONFIG = { width: 400, height: 200 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                gradientTop: '#4DA6FF',
+                gradientBottom: '#7DD3FF',
+                textColor: 0xffffff
+            },
+            light: {
+                gradientTop: '#87CEEB',
+                gradientBottom: '#B0E0E6',
+                textColor: 0x333333
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage;
+        let topBar = null; // Store reference for resource updates
 
-        (async () => {
-            await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+        function createScreen() {
+            const colors = getColors();
+            const gfx = graphics(); // Get graphics factory
 
-            // Sky gradient background
-            const bg = new PIXI.Graphics();
+            // Clear stage
+            while (stage.children.length > 0) {
+                stage.removeChildAt(0);
+            }
+
+            // ===== SKY GRADIENT BACKGROUND =====
+            const bg = gfx.createGraphics();
             const gradCanvas = document.createElement('canvas');
             gradCanvas.width = CONFIG.width;
             gradCanvas.height = CONFIG.height;
             const ctx = gradCanvas.getContext('2d');
             const gradient = ctx.createLinearGradient(0, 0, 0, CONFIG.height);
-            gradient.addColorStop(0, '#4DA6FF');
-            gradient.addColorStop(1, '#7DD3FF');
+            gradient.addColorStop(0, colors.gradientTop);
+            gradient.addColorStop(1, colors.gradientBottom);
             ctx.fillStyle = gradient;
             ctx.fillRect(0, 0, CONFIG.width, CONFIG.height);
             bg.texture(PIXI.Texture.from(gradCanvas));
@@ -47,8 +126,8 @@
             bg.fill();
             stage.addChild(bg);
 
-            // TopBar with all resources
-            const topBar = new GameTopBar({
+            // ===== TOPBAR WITH ALL RESOURCES =====
+            topBar = new GameTopBar({
                 width: CONFIG.width,
                 height: 55,
                 padding: 12,
@@ -62,7 +141,7 @@
             topBar.setPosition(0, 10);
             stage.addChild(topBar.getContainer());
 
-            // Second TopBar variant
+            // ===== SECOND TOPBAR VARIANT =====
             const topBar2 = new GameTopBar({
                 width: CONFIG.width,
                 height: 55,
@@ -76,10 +155,10 @@
             topBar2.setPosition(0, 80);
             stage.addChild(topBar2.getContainer());
 
-            // Instructions
-            const info = new PIXI.Text({
-                text: 'Click + to add resources | Click gear for settings',
-                style: { fontFamily: 'Arial', fontSize: 12, fill: 0xffffff }
+            // ===== INSTRUCTIONS - Using graphics() abstraction =====
+            const info = gfx.createText('Click + to add resources | Click gear for settings', {
+                fontSize: 12,
+                fill: colors.textColor
             });
             info.x = CONFIG.width / 2 - info.width / 2;
             info.y = 160;
@@ -87,11 +166,44 @@
 
             // Update coins periodically
             let coins = 1340;
-            setInterval(() => {
-                coins += Math.floor(Math.random() * 10);
-                topBar.updateResource('coins', coins);
-            }, 3000);
+            if (!window.coinInterval) {
+                window.coinInterval = setInterval(() => {
+                    coins += Math.floor(Math.random() * 10);
+                    if (topBar) {
+                        topBar.updateResource('coins', coins);
+                    }
+                }, 3000);
+            }
+        }
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createScreen) {
+                await loadFrameworkFont();
+                window.createScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
+
+        (async () => {
+            // Load framework font
+            await loadFrameworkFont();
+
+            await game.initialize(canvas, '2d');
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
+
+            setupThemeListener();
+
+            // Make createScreen globally accessible for theme switching
+            window.createScreen = createScreen;
 
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createScreen();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/game-ui-showcase.html b/docs-site/static/demos/game-ui-showcase.html
index 999c6d0..73b09c1 100644
--- a/docs-site/static/demos/game-ui-showcase.html
+++ b/docs-site/static/demos/game-ui-showcase.html
@@ -6,7 +6,8 @@
     <title>Game UI Showcase - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #0088EE; touch-action: none; }
+        body { overflow: hidden; background: #0088EE; touch-action: none; transition: background 0.3s ease; }
+        body.light-theme { background: #87CEEB; }
         canvas { display: block; }
     </style>
 </head>
@@ -15,6 +16,15 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
+        // =====================================================
+        // Game UI Showcase - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - GameTopBar, GameBottomNav, HexagonLevelButton components
+        // - SafeAreaLayout for responsive design
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
         const {
             createGame,
             GameStyleButton,
@@ -23,7 +33,9 @@
             GameBottomNav,
             GameStyleColors,
             GameButtons,
-            SafeAreaLayout
+            SafeAreaLayout,
+            graphics,
+            loadFrameworkFont
         } = GameByteFramework;
 
         // Design resolution (reference size - content designed for this)
@@ -32,6 +44,75 @@
             height: 844
         };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                backgroundColor: 0x4DA6FF,
+                bodyBg: '#0088EE',
+                pathShadow: 0x8B5A00,
+                pathMain: 0xFFB300,
+                pathHighlight: 0xFFD54F,
+                bottomNavBg: 0x1A237E
+            },
+            light: {
+                backgroundColor: 0x87CEEB,
+                bodyBg: '#87CEEB',
+                pathShadow: 0xA06800,
+                pathMain: 0xFFC000,
+                pathHighlight: 0xFFE082,
+                bottomNavBg: 0x3949AB
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         // Create full-screen canvas
         const canvas = document.createElement('canvas');
         canvas.width = window.innerWidth;
@@ -40,174 +121,197 @@
         canvas.style.height = '100%';
         document.body.appendChild(canvas);
 
-        // Create safe area layout
-        const safeArea = new SafeAreaLayout({
-            designWidth: DESIGN.width,
-            designHeight: DESIGN.height,
-            backgroundColor: 0x4DA6FF,
-            showPattern: true,
-            patternOpacity: 0.06
-        });
-
         const game = createGame();
+        let renderer, stage, safeArea;
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createScreen) {
+                await loadFrameworkFont();
+                window.createScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
 
         (async () => {
+            await loadFrameworkFont();
             await game.initialize(canvas, '2d');
 
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
 
-            // Initialize safe area layout with PIXI
-            safeArea.initialize(PIXI);
-            stage.addChild(safeArea.getContainer());
+            setupThemeListener();
 
-            // Get the game container (all content goes here)
-            const gameContent = safeArea.getGameContainer();
+            function createScreen() {
+                const colors = getColors();
+                const gfx = graphics();
 
-            // Handle resize
-            window.addEventListener('resize', () => {
-                renderer.resize(window.innerWidth, window.innerHeight);
-                canvas.width = window.innerWidth;
-                canvas.height = window.innerHeight;
-            });
+                while (stage.children.length > 0) {
+                    stage.removeChildAt(0);
+                }
 
-            // Use DESIGN dimensions for all positioning
-            const CONFIG = DESIGN;
-
-            // === TOP BAR ===
-            const topBar = new GameTopBar({
-                width: CONFIG.width,
-                height: 55,
-                padding: 12,
-                resources: [
-                    {
-                        type: 'lives',
-                        value: 5,
-                        label: 'MAX',
-                        icon: 'heart',
-                        backgroundColor: 0x1A1A2A,
-                        borderColor: 0x0D0D15
-                    },
-                    {
-                        type: 'coins',
-                        value: 1310,
-                        showAddButton: true,
-                        icon: 'coin',
-                        backgroundColor: 0x4CAF50,
-                        borderColor: 0x2E7D32
-                    }
-                ],
-                showSettings: true,
-                onSettingsClick: () => console.log('Settings clicked!')
-            });
-            topBar.setPosition(0, 8);
-            gameContent.addChild(topBar.getContainer());
-
-            // === LEVEL PATH CONTAINER ===
-            const levelContainer = new PIXI.Container();
-            levelContainer.y = 90;
-            gameContent.addChild(levelContainer);
-
-            // Draw golden path connecting levels
-            const pathGraphics = new PIXI.Graphics();
-            levelContainer.addChild(pathGraphics);
-
-            const centerX = CONFIG.width / 2;
-            const levelSpacing = 95;
-            const levels = [
-                { level: 20, state: 'locked', y: 0 },
-                { level: 19, state: 'available', y: levelSpacing },
-                { level: 18, state: 'available', y: levelSpacing * 2 },
-                { level: 17, state: 'current', y: levelSpacing * 3 }
-            ];
-
-            // Draw path segments
-            for (let i = 0; i < levels.length - 1; i++) {
-                const y1 = levels[i].y + 40;
-                const y2 = levels[i + 1].y + 40;
-
-                // Shadow
-                pathGraphics.moveTo(centerX, y1);
-                pathGraphics.lineTo(centerX, y2);
-                pathGraphics.stroke({ color: 0x8B5A00, width: 22, cap: 'round' });
-
-                // Main golden path
-                pathGraphics.moveTo(centerX, y1);
-                pathGraphics.lineTo(centerX, y2);
-                pathGraphics.stroke({ color: 0xFFB300, width: 16, cap: 'round' });
-
-                // Highlight
-                pathGraphics.moveTo(centerX - 3, y1);
-                pathGraphics.lineTo(centerX - 3, y2);
-                pathGraphics.stroke({ color: 0xFFD54F, width: 4, cap: 'round' });
-            }
+                // Create safe area layout with current theme colors
+                safeArea = new SafeAreaLayout({
+                    designWidth: DESIGN.width,
+                    designHeight: DESIGN.height,
+                    backgroundColor: colors.backgroundColor,
+                    showPattern: true,
+                    patternOpacity: 0.06
+                });
 
-            // Create hexagon buttons
-            const hexButtons = [];
-            levels.forEach((levelData, index) => {
-                let colorScheme;
-                if (levelData.state === 'locked') {
-                    colorScheme = GameStyleColors.HEXAGON_CANDY_LOCKED;
-                } else if (levelData.state === 'current') {
-                    colorScheme = GameStyleColors.HEXAGON_CANDY_CURRENT;
-                } else {
-                    colorScheme = GameStyleColors.HEXAGON_CANDY_BLUE;
-                }
+                safeArea.initialize(PIXI);
+                stage.addChild(safeArea.getContainer());
 
-                const hexButton = new HexagonLevelButton({
-                    level: levelData.level,
-                    size: 75,
-                    state: levelData.state,
-                    colorScheme: colorScheme,
-                    showStars: false
+                const gameContent = safeArea.getGameContainer();
+                const CONFIG = DESIGN;
+
+                // === TOP BAR ===
+                const topBar = new GameTopBar({
+                    width: CONFIG.width,
+                    height: 55,
+                    padding: 12,
+                    resources: [
+                        {
+                            type: 'lives',
+                            value: 5,
+                            label: 'MAX',
+                            icon: 'heart',
+                            backgroundColor: 0x1A1A2A,
+                            borderColor: 0x0D0D15
+                        },
+                        {
+                            type: 'coins',
+                            value: 1310,
+                            showAddButton: true,
+                            icon: 'coin',
+                            backgroundColor: 0x4CAF50,
+                            borderColor: 0x2E7D32
+                        }
+                    ],
+                    showSettings: true,
+                    onSettingsClick: () => console.log('Settings clicked!')
                 });
+                topBar.setPosition(0, 8);
+                gameContent.addChild(topBar.getContainer());
+
+                // === LEVEL PATH CONTAINER ===
+                const levelContainer = gfx.createContainer();
+                levelContainer.y = 90;
+                gameContent.addChild(levelContainer);
+
+                // Draw golden path connecting levels
+                const pathGraphics = gfx.createGraphics();
+                levelContainer.addChild(pathGraphics);
+
+                const centerX = CONFIG.width / 2;
+                const levelSpacing = 95;
+                const levels = [
+                    { level: 20, state: 'locked', y: 0 },
+                    { level: 19, state: 'available', y: levelSpacing },
+                    { level: 18, state: 'available', y: levelSpacing * 2 },
+                    { level: 17, state: 'current', y: levelSpacing * 3 }
+                ];
+
+                // Draw path segments
+                for (let i = 0; i < levels.length - 1; i++) {
+                    const y1 = levels[i].y + 40;
+                    const y2 = levels[i + 1].y + 40;
+
+                    pathGraphics.moveTo(centerX, y1);
+                    pathGraphics.lineTo(centerX, y2);
+                    pathGraphics.stroke({ color: colors.pathShadow, width: 22, cap: 'round' });
+
+                    pathGraphics.moveTo(centerX, y1);
+                    pathGraphics.lineTo(centerX, y2);
+                    pathGraphics.stroke({ color: colors.pathMain, width: 16, cap: 'round' });
+
+                    pathGraphics.moveTo(centerX - 3, y1);
+                    pathGraphics.lineTo(centerX - 3, y2);
+                    pathGraphics.stroke({ color: colors.pathHighlight, width: 4, cap: 'round' });
+                }
+
+                // Create hexagon buttons
+                const hexButtons = [];
+                levels.forEach((levelData, index) => {
+                    let colorScheme;
+                    if (levelData.state === 'locked') {
+                        colorScheme = GameStyleColors.HEXAGON_CANDY_LOCKED;
+                    } else if (levelData.state === 'current') {
+                        colorScheme = GameStyleColors.HEXAGON_CANDY_CURRENT;
+                    } else {
+                        colorScheme = GameStyleColors.HEXAGON_CANDY_BLUE;
+                    }
+
+                    const hexButton = new HexagonLevelButton({
+                        level: levelData.level,
+                        size: 75,
+                        state: levelData.state,
+                        colorScheme: colorScheme,
+                        showStars: false
+                    });
 
-                hexButton.setPosition(centerX, levelData.y + 40);
-                levelContainer.addChild(hexButton.getContainer());
-                hexButtons.push(hexButton);
+                    hexButton.setPosition(centerX, levelData.y + 40);
+                    levelContainer.addChild(hexButton.getContainer());
+                    hexButtons.push(hexButton);
 
-                hexButton.on('click', ({ level }) => {
-                    console.log(`Level ${level} clicked!`);
+                    hexButton.on('click', ({ level }) => {
+                        console.log(`Level ${level} clicked!`);
+                    });
                 });
-            });
 
-            // Animate glow on current level
-            const currentHex = hexButtons.find((h, i) => levels[i].state === 'current');
-            let time = 0;
-            if (currentHex) {
-                game.on('update', (dt) => {
-                    time += dt;
-                    currentHex.updateGlow(time);
+                // Animate glow on current level
+                const currentHex = hexButtons.find((h, i) => levels[i].state === 'current');
+                let time = 0;
+                if (currentHex) {
+                    game.off('update');
+                    game.on('update', (dt) => {
+                        time += dt;
+                        currentHex.updateGlow(time);
+                    });
+                }
+
+                // === PLAY BUTTON ===
+                const playButton = GameButtons.cream('Play', 220, 60);
+                playButton.setPosition((CONFIG.width - 220) / 2, CONFIG.height - 175);
+                gameContent.addChild(playButton.getContainer());
+
+                playButton.on('click', () => {
+                    console.log('Play button clicked!');
                 });
-            }
 
-            // === PLAY BUTTON ===
-            const playButton = GameButtons.cream('Play', 220, 60);
-            playButton.setPosition((CONFIG.width - 220) / 2, CONFIG.height - 175);
-            gameContent.addChild(playButton.getContainer());
+                // === BOTTOM NAV ===
+                const bottomNav = new GameBottomNav({
+                    width: CONFIG.width,
+                    height: 85,
+                    items: [
+                        { id: 'shop', type: 'shop', label: '' },
+                        { id: 'play', type: 'play', label: 'Start', highlighted: true },
+                        { id: 'profile', type: 'profile', locked: true }
+                    ],
+                    backgroundColor: colors.bottomNavBg
+                });
+                bottomNav.setPosition(0, CONFIG.height - 85);
+                gameContent.addChild(bottomNav.getContainer());
 
-            playButton.on('click', () => {
-                console.log('Play button clicked!');
-            });
+                bottomNav.on('item-click', (id, item) => {
+                    console.log(`Nav item ${id} clicked!`, item);
+                });
+            }
 
-            // === BOTTOM NAV ===
-            const bottomNav = new GameBottomNav({
-                width: CONFIG.width,
-                height: 85,
-                items: [
-                    { id: 'shop', type: 'shop', label: '' },
-                    { id: 'play', type: 'play', label: 'Start', highlighted: true },
-                    { id: 'profile', type: 'profile', locked: true }
-                ],
-                backgroundColor: 0x1A237E
-            });
-            bottomNav.setPosition(0, CONFIG.height - 85);
-            gameContent.addChild(bottomNav.getContainer());
+            window.createScreen = createScreen;
 
-            bottomNav.on('item-click', (id, item) => {
-                console.log(`Nav item ${id} clicked!`, item);
+            window.addEventListener('resize', () => {
+                renderer.resize(window.innerWidth, window.innerHeight);
+                canvas.width = window.innerWidth;
+                canvas.height = window.innerHeight;
             });
 
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createScreen();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/hexagon-level-demo.html b/docs-site/static/demos/hexagon-level-demo.html
index 3e987ba..9d19252 100644
--- a/docs-site/static/demos/hexagon-level-demo.html
+++ b/docs-site/static/demos/hexagon-level-demo.html
@@ -6,7 +6,8 @@
     <title>HexagonLevelButton Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #4DA6FF; }
+        body { overflow: hidden; background: #4DA6FF; transition: background 0.3s ease; }
+        body.light-theme { background: #87CEEB; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,149 +16,255 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame, HexagonLevelButton, GameStyleColors } = GameByteFramework;
+        // =====================================================
+        // HexagonLevelButton Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - HexagonLevelButton with different styles
+        // - Candy style and Classic style level buttons
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const {
+            createGame,
+            HexagonLevelButton,
+            GameStyleColors,
+            graphics,
+            loadFrameworkFont
+        } = GameByteFramework;
 
         const CONFIG = { width: 400, height: 450 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                gradientTop: '#4DA6FF',
+                gradientBottom: '#7DD3FF',
+                textWhite: 0xffffff
+            },
+            light: {
+                gradientTop: '#87CEEB',
+                gradientBottom: '#B0E0E6',
+                textWhite: 0x333333
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage;
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createScreen) {
+                await loadFrameworkFont();
+                window.createScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
 
         (async () => {
+            await loadFrameworkFont();
             await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
-
-            // Sky gradient background
-            const bg = new PIXI.Graphics();
-            const gradCanvas = document.createElement('canvas');
-            gradCanvas.width = CONFIG.width;
-            gradCanvas.height = CONFIG.height;
-            const ctx = gradCanvas.getContext('2d');
-            const gradient = ctx.createLinearGradient(0, 0, 0, CONFIG.height);
-            gradient.addColorStop(0, '#4DA6FF');
-            gradient.addColorStop(1, '#7DD3FF');
-            ctx.fillStyle = gradient;
-            ctx.fillRect(0, 0, CONFIG.width, CONFIG.height);
-            bg.texture(PIXI.Texture.from(gradCanvas));
-            bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill();
-            stage.addChild(bg);
-
-            // Title
-            const title = new PIXI.Text({
-                text: 'HexagonLevelButton',
-                style: { fontFamily: 'Arial Black', fontSize: 20, fill: 0xffffff }
-            });
-            title.x = CONFIG.width / 2 - title.width / 2;
-            title.y = 15;
-            stage.addChild(title);
-
-            // Row 1: Candy Crush Style (with golden border)
-            const label1 = new PIXI.Text({
-                text: 'Candy Style:',
-                style: { fontFamily: 'Arial', fontSize: 14, fill: 0xffffff }
-            });
-            label1.x = 20;
-            label1.y = 55;
-            stage.addChild(label1);
-
-            const candyCurrent = new HexagonLevelButton({
-                level: 17,
-                size: 70,
-                state: 'current',
-                colorScheme: GameStyleColors.HEXAGON_CANDY_CURRENT,
-                showStars: false
-            });
-            candyCurrent.setPosition(80, 130);
-            stage.addChild(candyCurrent.getContainer());
-
-            const candyAvailable = new HexagonLevelButton({
-                level: 18,
-                size: 70,
-                state: 'available',
-                colorScheme: GameStyleColors.HEXAGON_CANDY_BLUE,
-                showStars: false
-            });
-            candyAvailable.setPosition(170, 130);
-            stage.addChild(candyAvailable.getContainer());
-
-            const candyLocked = new HexagonLevelButton({
-                level: 19,
-                size: 70,
-                state: 'locked',
-                colorScheme: GameStyleColors.HEXAGON_CANDY_LOCKED,
-                showStars: false
-            });
-            candyLocked.setPosition(260, 130);
-            stage.addChild(candyLocked.getContainer());
-
-            // Row 2: Classic Style
-            const label2 = new PIXI.Text({
-                text: 'Classic Style:',
-                style: { fontFamily: 'Arial', fontSize: 14, fill: 0xffffff }
-            });
-            label2.x = 20;
-            label2.y = 190;
-            stage.addChild(label2);
-
-            const classicCurrent = new HexagonLevelButton({
-                level: 5,
-                size: 70,
-                state: 'current',
-                showStars: false
-            });
-            classicCurrent.setPosition(80, 265);
-            stage.addChild(classicCurrent.getContainer());
-
-            const classicCompleted = new HexagonLevelButton({
-                level: 4,
-                size: 70,
-                state: 'completed',
-                stars: 3,
-                showStars: true
-            });
-            classicCompleted.setPosition(170, 265);
-            stage.addChild(classicCompleted.getContainer());
-
-            const classicLocked = new HexagonLevelButton({
-                level: 6,
-                size: 70,
-                state: 'locked',
-                showStars: false
-            });
-            classicLocked.setPosition(260, 265);
-            stage.addChild(classicLocked.getContainer());
-
-            // Row 3: Small sizes
-            const label3 = new PIXI.Text({
-                text: 'Small Size:',
-                style: { fontFamily: 'Arial', fontSize: 14, fill: 0xffffff }
-            });
-            label3.x = 20;
-            label3.y = 330;
-            stage.addChild(label3);
-
-            for (let i = 0; i < 5; i++) {
-                const small = new HexagonLevelButton({
-                    level: i + 1,
-                    size: 50,
-                    state: i < 3 ? 'completed' : i === 3 ? 'current' : 'locked',
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
+
+            setupThemeListener();
+
+            function createScreen() {
+                const colors = getColors();
+                const gfx = graphics();
+
+                while (stage.children.length > 0) {
+                    stage.removeChildAt(0);
+                }
+
+                // Sky gradient background using framework abstraction
+                const bg = gfx.createGraphics();
+                const gradTexture = gfx.createCanvasTexture(CONFIG.width, CONFIG.height, (ctx) => {
+                    const gradient = ctx.createLinearGradient(0, 0, 0, CONFIG.height);
+                    gradient.addColorStop(0, colors.gradientTop);
+                    gradient.addColorStop(1, colors.gradientBottom);
+                    ctx.fillStyle = gradient;
+                    ctx.fillRect(0, 0, CONFIG.width, CONFIG.height);
+                });
+                bg.texture(gradTexture);
+                bg.rect(0, 0, CONFIG.width, CONFIG.height);
+                bg.fill();
+                stage.addChild(bg);
+
+                // Title
+                const title = gfx.createText('HexagonLevelButton', {
+                    fontSize: 20,
+                    fill: colors.textWhite
+                });
+                title.x = CONFIG.width / 2 - title.width / 2;
+                title.y = 15;
+                stage.addChild(title);
+
+                // Row 1: Candy Crush Style
+                const label1 = gfx.createText('Candy Style:', {
+                    fontSize: 14,
+                    fill: colors.textWhite
+                });
+                label1.x = 20;
+                label1.y = 55;
+                stage.addChild(label1);
+
+                const candyCurrent = new HexagonLevelButton({
+                    level: 17,
+                    size: 70,
+                    state: 'current',
+                    colorScheme: GameStyleColors.HEXAGON_CANDY_CURRENT,
+                    showStars: false
+                });
+                candyCurrent.setPosition(80, 130);
+                stage.addChild(candyCurrent.getContainer());
+
+                const candyAvailable = new HexagonLevelButton({
+                    level: 18,
+                    size: 70,
+                    state: 'available',
                     colorScheme: GameStyleColors.HEXAGON_CANDY_BLUE,
                     showStars: false
                 });
-                small.setPosition(60 + i * 70, 390);
-                stage.addChild(small.getContainer());
+                candyAvailable.setPosition(170, 130);
+                stage.addChild(candyAvailable.getContainer());
+
+                const candyLocked = new HexagonLevelButton({
+                    level: 19,
+                    size: 70,
+                    state: 'locked',
+                    colorScheme: GameStyleColors.HEXAGON_CANDY_LOCKED,
+                    showStars: false
+                });
+                candyLocked.setPosition(260, 130);
+                stage.addChild(candyLocked.getContainer());
+
+                // Row 2: Classic Style
+                const label2 = gfx.createText('Classic Style:', {
+                    fontSize: 14,
+                    fill: colors.textWhite
+                });
+                label2.x = 20;
+                label2.y = 190;
+                stage.addChild(label2);
+
+                const classicCurrent = new HexagonLevelButton({
+                    level: 5,
+                    size: 70,
+                    state: 'current',
+                    showStars: false
+                });
+                classicCurrent.setPosition(80, 265);
+                stage.addChild(classicCurrent.getContainer());
+
+                const classicCompleted = new HexagonLevelButton({
+                    level: 4,
+                    size: 70,
+                    state: 'completed',
+                    stars: 3,
+                    showStars: true
+                });
+                classicCompleted.setPosition(170, 265);
+                stage.addChild(classicCompleted.getContainer());
+
+                const classicLocked = new HexagonLevelButton({
+                    level: 6,
+                    size: 70,
+                    state: 'locked',
+                    showStars: false
+                });
+                classicLocked.setPosition(260, 265);
+                stage.addChild(classicLocked.getContainer());
+
+                // Row 3: Small sizes
+                const label3 = gfx.createText('Small Size:', {
+                    fontSize: 14,
+                    fill: colors.textWhite
+                });
+                label3.x = 20;
+                label3.y = 330;
+                stage.addChild(label3);
+
+                for (let i = 0; i < 5; i++) {
+                    const small = new HexagonLevelButton({
+                        level: i + 1,
+                        size: 50,
+                        state: i < 3 ? 'completed' : i === 3 ? 'current' : 'locked',
+                        colorScheme: GameStyleColors.HEXAGON_CANDY_BLUE,
+                        showStars: false
+                    });
+                    small.setPosition(60 + i * 70, 390);
+                    stage.addChild(small.getContainer());
+                }
+
+                // Click handlers
+                [candyCurrent, candyAvailable, classicCurrent, classicCompleted].forEach(btn => {
+                    btn.on('click', ({ level }) => console.log(`Level ${level} clicked!`));
+                });
             }
 
-            // Click handlers
-            [candyCurrent, candyAvailable, classicCurrent, classicCompleted].forEach(btn => {
-                btn.on('click', ({ level }) => console.log(`Level ${level} clicked!`));
-            });
+            window.createScreen = createScreen;
 
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createScreen();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/hub-screen-demo.html b/docs-site/static/demos/hub-screen-demo.html
index 090326f..13763b2 100644
--- a/docs-site/static/demos/hub-screen-demo.html
+++ b/docs-site/static/demos/hub-screen-demo.html
@@ -6,7 +6,8 @@
     <title>HubScreen Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #1a1a2e; }
+        body { overflow: hidden; background: #1a1a2e; transition: background 0.3s ease; }
+        body.light-theme { background: #e8eef5; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,10 +16,122 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame, CelebrationManager } = GameByteFramework;
+        // =====================================================
+        // HubScreen Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - Complete hub screen with tabbed navigation
+        // - Shop, Play, Profile tabs
+        // - CelebrationManager for shimmer and confetti effects
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const {
+            createGame,
+            CelebrationManager,
+            graphics,
+            loadFrameworkFont
+        } = GameByteFramework;
 
         const CONFIG = { width: 360, height: 640 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                bgDark: 0x1a1a2e,
+                topBarBg: 0x2d2d44,
+                topBarShadow: 0x000000,
+                currencyBg: 0x3d3d5c,
+                coinColor: 0xFFD700,
+                gemColor: 0x00BFFF,
+                navBg: 0x2d2d44,
+                navBorder: 0x3d3d5c,
+                navActive: 0x6366f1,
+                navInactive: 0x888888,
+                cardBg: 0x2d2d44,
+                cardShadow: 0x1a1a2e,
+                playBtnGlow: 0x4CAF50,
+                playBtnShadow: 0x2E7D32,
+                playBtn: 0x4CAF50,
+                buyBtn: 0x4CAF50,
+                avatarGlow: 0x6366f1,
+                avatarBg: 0x6366f1,
+                textWhite: 0xffffff,
+                textMuted: 0x888888
+            },
+            light: {
+                bgDark: 0xe8eef5,
+                topBarBg: 0xd0d8e8,
+                topBarShadow: 0x000000,
+                currencyBg: 0xb8c8d8,
+                coinColor: 0xD4A000,
+                gemColor: 0x0090C0,
+                navBg: 0xd0d8e8,
+                navBorder: 0xb8c8d8,
+                navActive: 0x5558e8,
+                navInactive: 0x6a7a8a,
+                cardBg: 0xd0d8e8,
+                cardShadow: 0xc0c8d0,
+                playBtnGlow: 0x3d9d40,
+                playBtnShadow: 0x2d7d30,
+                playBtn: 0x4CAF50,
+                buyBtn: 0x4CAF50,
+                avatarGlow: 0x7376f8,
+                avatarBg: 0x7376f8,
+                textWhite: 0xffffff,
+                textMuted: 0x5a6a7a
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
@@ -26,429 +139,438 @@
 
         const game = createGame();
 
-        // State
         let coins = 1234;
         let gems = 50;
         let currentTab = 'play';
         let celebration = null;
+        let renderer, stage;
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createHubScreen) {
+                await loadFrameworkFont();
+                window.createHubScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
 
         (async () => {
+            await loadFrameworkFont();
             await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
 
-            // Create celebration manager
             celebration = new CelebrationManager(stage, CONFIG.width, CONFIG.height);
 
-            // Background
-            const bg = new PIXI.Graphics();
-            bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill(0x1a1a2e);
-            stage.addChild(bg);
-
-            // TopBar background with gradient effect
-            const topBarShadow = new PIXI.Graphics();
-            topBarShadow.rect(0, 70, CONFIG.width, 4);
-            topBarShadow.fill({ color: 0x000000, alpha: 0.3 });
-            stage.addChild(topBarShadow);
-
-            const topBar = new PIXI.Graphics();
-            topBar.rect(0, 0, CONFIG.width, 70);
-            topBar.fill(0x2d2d44);
-            stage.addChild(topBar);
-
-            // Coins display with shimmer
-            const coinBg = new PIXI.Graphics();
-            coinBg.roundRect(10, 15, 100, 40, 20);
-            coinBg.fill(0x3d3d5c);
-            stage.addChild(coinBg);
-
-            // Coin icon container for shimmer
-            const coinIconContainer = new PIXI.Container();
-            coinIconContainer.x = 30;
-            coinIconContainer.y = 35;
-            stage.addChild(coinIconContainer);
-
-            const coinIcon = new PIXI.Text({ text: '🪙', style: { fontSize: 22 } });
-            coinIcon.anchor.set(0.5);
-            coinIconContainer.addChild(coinIcon);
-
-            // Add shimmer to coin icon
-            celebration.addShimmer(coinIconContainer, 'gold');
-
-            const coinText = new PIXI.Text({
-                text: coins.toLocaleString(),
-                style: { fontFamily: 'Arial', fontSize: 16, fontWeight: 'bold', fill: 0xFFD700 }
-            });
-            coinText.x = 50;
-            coinText.y = 28;
-            stage.addChild(coinText);
-
-            // Gems display with shimmer
-            const gemBg = new PIXI.Graphics();
-            gemBg.roundRect(120, 15, 90, 40, 20);
-            gemBg.fill(0x3d3d5c);
-            stage.addChild(gemBg);
-
-            // Gem icon container for shimmer
-            const gemIconContainer = new PIXI.Container();
-            gemIconContainer.x = 140;
-            gemIconContainer.y = 35;
-            stage.addChild(gemIconContainer);
-
-            const gemIcon = new PIXI.Text({ text: '💎', style: { fontSize: 20 } });
-            gemIcon.anchor.set(0.5);
-            gemIconContainer.addChild(gemIcon);
-
-            // Add shimmer to gem icon
-            celebration.addShimmer(gemIconContainer, 'gem');
-
-            const gemText = new PIXI.Text({
-                text: gems.toString(),
-                style: { fontFamily: 'Arial', fontSize: 16, fontWeight: 'bold', fill: 0x00BFFF }
-            });
-            gemText.x = 160;
-            gemText.y = 28;
-            stage.addChild(gemText);
-
-            // Settings button
-            const settingsBtn = new PIXI.Graphics();
-            settingsBtn.circle(CONFIG.width - 35, 35, 22);
-            settingsBtn.fill(0x3d3d5c);
-            settingsBtn.eventMode = 'static';
-            settingsBtn.cursor = 'pointer';
-            stage.addChild(settingsBtn);
-
-            const settingsIcon = new PIXI.Text({ text: '⚙️', style: { fontSize: 22 } });
-            settingsIcon.anchor.set(0.5);
-            settingsIcon.x = CONFIG.width - 35;
-            settingsIcon.y = 35;
-            stage.addChild(settingsIcon);
-
-            // Content area
-            const contentArea = new PIXI.Container();
-            contentArea.y = 70;
-            stage.addChild(contentArea);
-
-            // BottomNav background with top border
-            const bottomNavBorder = new PIXI.Graphics();
-            bottomNavBorder.rect(0, CONFIG.height - 84, CONFIG.width, 4);
-            bottomNavBorder.fill(0x3d3d5c);
-            stage.addChild(bottomNavBorder);
-
-            const bottomNav = new PIXI.Graphics();
-            bottomNav.rect(0, CONFIG.height - 80, CONFIG.width, 80);
-            bottomNav.fill(0x2d2d44);
-            stage.addChild(bottomNav);
-
-            // Nav items
-            const navItems = [
-                { id: 'shop', icon: '🛒', label: 'Shop' },
-                { id: 'play', icon: '▶️', label: 'Play' },
-                { id: 'profile', icon: '👤', label: 'Profile' }
-            ];
-
-            const navWidth = CONFIG.width / navItems.length;
-            const navButtons = [];
-
-            navItems.forEach((item, i) => {
-                const btn = new PIXI.Container();
-                btn.x = navWidth * i;
-                btn.y = CONFIG.height - 80;
-
-                const hitArea = new PIXI.Graphics();
-                hitArea.rect(0, 0, navWidth, 80);
-                hitArea.fill({ color: 0xffffff, alpha: 0 });
-                btn.addChild(hitArea);
-
-                const highlight = new PIXI.Graphics();
-                highlight.roundRect(navWidth / 2 - 30, 8, 60, 4, 2);
-                highlight.fill(item.id === currentTab ? 0x6366f1 : 0x2d2d44);
-                btn.addChild(highlight);
-
-                const icon = new PIXI.Text({
-                    text: item.icon,
-                    style: { fontSize: item.id === 'play' ? 32 : 24 }
+            setupThemeListener();
+
+            function createHubScreen() {
+                const colors = getColors();
+                const gfx = graphics();
+
+                while (stage.children.length > 0) {
+                    stage.removeChildAt(0);
+                }
+                celebration.clear();
+
+                // Background
+                const bg = gfx.createGraphics();
+                bg.rect(0, 0, CONFIG.width, CONFIG.height);
+                bg.fill(colors.bgDark);
+                stage.addChild(bg);
+
+                // TopBar background
+                const topBarShadow = gfx.createGraphics();
+                topBarShadow.rect(0, 70, CONFIG.width, 4);
+                topBarShadow.fill({ color: colors.topBarShadow, alpha: 0.3 });
+                stage.addChild(topBarShadow);
+
+                const topBar = gfx.createGraphics();
+                topBar.rect(0, 0, CONFIG.width, 70);
+                topBar.fill(colors.topBarBg);
+                stage.addChild(topBar);
+
+                // Coins display
+                const coinBg = gfx.createGraphics();
+                coinBg.roundRect(10, 15, 100, 40, 20);
+                coinBg.fill(colors.currencyBg);
+                stage.addChild(coinBg);
+
+                const coinIconContainer = gfx.createContainer();
+                coinIconContainer.x = 30;
+                coinIconContainer.y = 35;
+                stage.addChild(coinIconContainer);
+
+                const coinIcon = gfx.createText('\u{1FA99}', { fontSize: 22 });
+                coinIcon.anchor.set(0.5);
+                coinIconContainer.addChild(coinIcon);
+
+                celebration.addShimmer(coinIconContainer, 'gold');
+
+                const coinText = gfx.createText(coins.toLocaleString(), {
+                    fontSize: 16,
+                    fontWeight: 'bold',
+                    fill: colors.coinColor
                 });
-                icon.anchor.set(0.5);
-                icon.x = navWidth / 2;
-                icon.y = 35;
-                btn.addChild(icon);
-
-                const label = new PIXI.Text({
-                    text: item.label,
-                    style: {
-                        fontFamily: 'Arial',
-                        fontSize: 12,
-                        fill: item.id === currentTab ? 0x6366f1 : 0x888888
-                    }
+                coinText.x = 50;
+                coinText.y = 28;
+                stage.addChild(coinText);
+
+                // Gems display
+                const gemBg = gfx.createGraphics();
+                gemBg.roundRect(120, 15, 90, 40, 20);
+                gemBg.fill(colors.currencyBg);
+                stage.addChild(gemBg);
+
+                const gemIconContainer = gfx.createContainer();
+                gemIconContainer.x = 140;
+                gemIconContainer.y = 35;
+                stage.addChild(gemIconContainer);
+
+                const gemIcon = gfx.createText('\u{1F48E}', { fontSize: 20 });
+                gemIcon.anchor.set(0.5);
+                gemIconContainer.addChild(gemIcon);
+
+                celebration.addShimmer(gemIconContainer, 'gem');
+
+                const gemText = gfx.createText(gems.toString(), {
+                    fontSize: 16,
+                    fontWeight: 'bold',
+                    fill: colors.gemColor
                 });
-                label.anchor.set(0.5);
-                label.x = navWidth / 2;
-                label.y = 62;
-                btn.addChild(label);
+                gemText.x = 160;
+                gemText.y = 28;
+                stage.addChild(gemText);
+
+                // Settings button
+                const settingsBtn = gfx.createGraphics();
+                settingsBtn.circle(CONFIG.width - 35, 35, 22);
+                settingsBtn.fill(colors.currencyBg);
+                settingsBtn.eventMode = 'static';
+                settingsBtn.cursor = 'pointer';
+                stage.addChild(settingsBtn);
+
+                const settingsIcon = gfx.createText('\u2699\uFE0F', { fontSize: 22 });
+                settingsIcon.anchor.set(0.5);
+                settingsIcon.x = CONFIG.width - 35;
+                settingsIcon.y = 35;
+                stage.addChild(settingsIcon);
+
+                // Content area
+                const contentArea = gfx.createContainer();
+                contentArea.y = 70;
+                stage.addChild(contentArea);
+
+                // BottomNav
+                const bottomNavBorder = gfx.createGraphics();
+                bottomNavBorder.rect(0, CONFIG.height - 84, CONFIG.width, 4);
+                bottomNavBorder.fill(colors.navBorder);
+                stage.addChild(bottomNavBorder);
+
+                const bottomNav = gfx.createGraphics();
+                bottomNav.rect(0, CONFIG.height - 80, CONFIG.width, 80);
+                bottomNav.fill(colors.navBg);
+                stage.addChild(bottomNav);
+
+                // Nav items
+                const navItems = [
+                    { id: 'shop', icon: '\u{1F6D2}', label: 'Shop' },
+                    { id: 'play', icon: '\u25B6\uFE0F', label: 'Play' },
+                    { id: 'profile', icon: '\u{1F464}', label: 'Profile' }
+                ];
+
+                const navWidth = CONFIG.width / navItems.length;
+                const navButtons = [];
+
+                navItems.forEach((item, i) => {
+                    const btn = gfx.createContainer();
+                    btn.x = navWidth * i;
+                    btn.y = CONFIG.height - 80;
+
+                    const hitArea = gfx.createGraphics();
+                    hitArea.rect(0, 0, navWidth, 80);
+                    hitArea.fill({ color: 0xffffff, alpha: 0 });
+                    btn.addChild(hitArea);
+
+                    const highlight = gfx.createGraphics();
+                    highlight.roundRect(navWidth / 2 - 30, 8, 60, 4, 2);
+                    highlight.fill(item.id === currentTab ? colors.navActive : colors.navBg);
+                    btn.addChild(highlight);
+
+                    const icon = gfx.createText(item.icon, {
+                        fontSize: item.id === 'play' ? 32 : 24
+                    });
+                    icon.anchor.set(0.5);
+                    icon.x = navWidth / 2;
+                    icon.y = 35;
+                    btn.addChild(icon);
 
-                btn.eventMode = 'static';
-                btn.cursor = 'pointer';
-                btn.on('pointerdown', () => switchTab(item.id));
+                    const label = gfx.createText(item.label, {
+                        fontSize: 12,
+                        fill: item.id === currentTab ? colors.navActive : colors.navInactive
+                    });
+                    label.anchor.set(0.5);
+                    label.x = navWidth / 2;
+                    label.y = 62;
+                    btn.addChild(label);
 
-                navButtons.push({ btn, highlight, label, id: item.id });
-                stage.addChild(btn);
-            });
+                    btn.eventMode = 'static';
+                    btn.cursor = 'pointer';
+                    btn.on('pointerdown', () => switchTab(item.id));
 
-            // Tab content
-            function createTabContent(tabId) {
-                const content = new PIXI.Container();
+                    navButtons.push({ btn, highlight, label, id: item.id });
+                    stage.addChild(btn);
+                });
 
-                if (tabId === 'shop') {
-                    const title = new PIXI.Text({
-                        text: '🛒 Shop',
-                        style: { fontFamily: 'Arial', fontSize: 28, fontWeight: 'bold', fill: 0xffffff }
-                    });
-                    title.x = 20;
-                    title.y = 20;
-                    content.addChild(title);
-
-                    // Shop items with coin shimmer
-                    const items = [
-                        { name: '100 Coins', price: '💎 10', color: 0xFFD700, type: 'gold' },
-                        { name: '500 Coins', price: '💎 45', color: 0xFFD700, type: 'gold' },
-                        { name: 'No Ads', price: '$2.99', color: 0x4CAF50, type: 'none' }
-                    ];
-
-                    items.forEach((item, i) => {
-                        // Card shadow
-                        const cardShadow = new PIXI.Graphics();
-                        cardShadow.roundRect(20, 75 + i * 100, CONFIG.width - 40, 80, 12);
-                        cardShadow.fill(0x1a1a2e);
-                        content.addChild(cardShadow);
-
-                        const card = new PIXI.Graphics();
-                        card.roundRect(20, 70 + i * 100, CONFIG.width - 40, 80, 12);
-                        card.fill(0x2d2d44);
-                        card.eventMode = 'static';
-                        card.cursor = 'pointer';
-                        content.addChild(card);
-
-                        // Item icon with shimmer
-                        if (item.type === 'gold') {
-                            const iconContainer = new PIXI.Container();
-                            iconContainer.x = 55;
-                            iconContainer.y = 110 + i * 100;
-                            content.addChild(iconContainer);
-
-                            const itemIcon = new PIXI.Text({ text: '🪙', style: { fontSize: 28 } });
-                            itemIcon.anchor.set(0.5);
-                            iconContainer.addChild(itemIcon);
-
-                            celebration.addShimmer(iconContainer, 'gold');
-                        }
+                // Tab content
+                function createTabContent(tabId) {
+                    const content = gfx.createContainer();
 
-                        const name = new PIXI.Text({
-                            text: item.name,
-                            style: { fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold', fill: item.color }
+                    if (tabId === 'shop') {
+                        const title = gfx.createText('\u{1F6D2} Shop', {
+                            fontSize: 28,
+                            fontWeight: 'bold',
+                            fill: colors.textWhite
+                        });
+                        title.x = 20;
+                        title.y = 20;
+                        content.addChild(title);
+
+                        const items = [
+                            { name: '100 Coins', price: '\u{1F48E} 10', color: colors.coinColor, type: 'gold' },
+                            { name: '500 Coins', price: '\u{1F48E} 45', color: colors.coinColor, type: 'gold' },
+                            { name: 'No Ads', price: '$2.99', color: 0x4CAF50, type: 'none' }
+                        ];
+
+                        items.forEach((item, i) => {
+                            const cardShadow = gfx.createGraphics();
+                            cardShadow.roundRect(20, 75 + i * 100, CONFIG.width - 40, 80, 12);
+                            cardShadow.fill(colors.cardShadow);
+                            content.addChild(cardShadow);
+
+                            const card = gfx.createGraphics();
+                            card.roundRect(20, 70 + i * 100, CONFIG.width - 40, 80, 12);
+                            card.fill(colors.cardBg);
+                            card.eventMode = 'static';
+                            card.cursor = 'pointer';
+                            content.addChild(card);
+
+                            if (item.type === 'gold') {
+                                const iconContainer = gfx.createContainer();
+                                iconContainer.x = 55;
+                                iconContainer.y = 110 + i * 100;
+                                content.addChild(iconContainer);
+
+                                const itemIcon = gfx.createText('\u{1FA99}', { fontSize: 28 });
+                                itemIcon.anchor.set(0.5);
+                                iconContainer.addChild(itemIcon);
+
+                                celebration.addShimmer(iconContainer, 'gold');
+                            }
+
+                            const name = gfx.createText(item.name, {
+                                fontSize: 18,
+                                fontWeight: 'bold',
+                                fill: item.color
+                            });
+                            name.x = item.type === 'gold' ? 85 : 40;
+                            name.y = 95 + i * 100;
+                            content.addChild(name);
+
+                            const buyBtn = gfx.createGraphics();
+                            buyBtn.roundRect(CONFIG.width - 100, 85 + i * 100, 60, 30, 8);
+                            buyBtn.fill(colors.buyBtn);
+                            content.addChild(buyBtn);
+
+                            const price = gfx.createText(item.price, {
+                                fontSize: 12,
+                                fill: colors.textWhite
+                            });
+                            price.anchor.set(0.5);
+                            price.x = CONFIG.width - 70;
+                            price.y = 100 + i * 100;
+                            content.addChild(price);
+
+                            card.on('pointerdown', () => {
+                                celebration.sparkle(CONFIG.width / 2, 110 + i * 100);
+                            });
                         });
-                        name.x = item.type === 'gold' ? 85 : 40;
-                        name.y = 95 + i * 100;
-                        content.addChild(name);
-
-                        // Buy button
-                        const buyBtn = new PIXI.Graphics();
-                        buyBtn.roundRect(CONFIG.width - 100, 85 + i * 100, 60, 30, 8);
-                        buyBtn.fill(0x4CAF50);
-                        content.addChild(buyBtn);
 
-                        const price = new PIXI.Text({
-                            text: item.price,
-                            style: { fontFamily: 'Arial', fontSize: 12, fill: 0xffffff }
+                    } else if (tabId === 'play') {
+                        const title = gfx.createText('\u{1F3AE} Ready to Play!', {
+                            fontSize: 24,
+                            fontWeight: 'bold',
+                            fill: colors.textWhite
                         });
-                        price.anchor.set(0.5);
-                        price.x = CONFIG.width - 70;
-                        price.y = 100 + i * 100;
-                        content.addChild(price);
-
-                        // Click effect
-                        card.on('pointerdown', () => {
-                            celebration.sparkle(CONFIG.width / 2, 110 + i * 100);
+                        title.anchor.set(0.5);
+                        title.x = CONFIG.width / 2;
+                        title.y = 120;
+                        content.addChild(title);
+
+                        const playBtnGlow = gfx.createGraphics();
+                        playBtnGlow.roundRect(55, 175, CONFIG.width - 110, 90, 20);
+                        playBtnGlow.fill({ color: colors.playBtnGlow, alpha: 0.3 });
+                        content.addChild(playBtnGlow);
+
+                        const playBtnShadow = gfx.createGraphics();
+                        playBtnShadow.roundRect(60, 185, CONFIG.width - 120, 80, 16);
+                        playBtnShadow.fill(colors.playBtnShadow);
+                        content.addChild(playBtnShadow);
+
+                        const playBtn = gfx.createGraphics();
+                        playBtn.roundRect(60, 180, CONFIG.width - 120, 80, 16);
+                        playBtn.fill(colors.playBtn);
+                        playBtn.eventMode = 'static';
+                        playBtn.cursor = 'pointer';
+                        content.addChild(playBtn);
+
+                        const playText = gfx.createText('\u25B6  PLAY', {
+                            fontSize: 28,
+                            fontWeight: 'bold',
+                            fill: colors.textWhite
+                        });
+                        playText.anchor.set(0.5);
+                        playText.x = CONFIG.width / 2;
+                        playText.y = 220;
+                        content.addChild(playText);
+
+                        playBtn.on('pointerdown', () => {
+                            celebration.confettiBurst(CONFIG.width / 2, 220, {
+                                particleCount: 30,
+                                colors: [0x4CAF50, 0x6BCB77, 0xFFD700]
+                            });
                         });
-                    });
 
-                } else if (tabId === 'play') {
-                    const title = new PIXI.Text({
-                        text: '🎮 Ready to Play!',
-                        style: { fontFamily: 'Arial', fontSize: 24, fontWeight: 'bold', fill: 0xffffff }
-                    });
-                    title.anchor.set(0.5);
-                    title.x = CONFIG.width / 2;
-                    title.y = 120;
-                    content.addChild(title);
-
-                    // Play button with glow
-                    const playBtnGlow = new PIXI.Graphics();
-                    playBtnGlow.roundRect(55, 175, CONFIG.width - 110, 90, 20);
-                    playBtnGlow.fill({ color: 0x4CAF50, alpha: 0.3 });
-                    content.addChild(playBtnGlow);
-
-                    const playBtnShadow = new PIXI.Graphics();
-                    playBtnShadow.roundRect(60, 185, CONFIG.width - 120, 80, 16);
-                    playBtnShadow.fill(0x2E7D32);
-                    content.addChild(playBtnShadow);
-
-                    const playBtn = new PIXI.Graphics();
-                    playBtn.roundRect(60, 180, CONFIG.width - 120, 80, 16);
-                    playBtn.fill(0x4CAF50);
-                    playBtn.eventMode = 'static';
-                    playBtn.cursor = 'pointer';
-                    content.addChild(playBtn);
-
-                    const playText = new PIXI.Text({
-                        text: '▶  PLAY',
-                        style: { fontFamily: 'Arial', fontSize: 28, fontWeight: 'bold', fill: 0xffffff }
-                    });
-                    playText.anchor.set(0.5);
-                    playText.x = CONFIG.width / 2;
-                    playText.y = 220;
-                    content.addChild(playText);
-
-                    // Click effect - confetti burst
-                    playBtn.on('pointerdown', () => {
-                        celebration.confettiBurst(CONFIG.width / 2, 220, {
-                            particleCount: 30,
-                            colors: [0x4CAF50, 0x6BCB77, 0xFFD700]
+                        const levelText = gfx.createText('Level 5', {
+                            fontSize: 18,
+                            fill: colors.textMuted
                         });
-                    });
+                        levelText.anchor.set(0.5);
+                        levelText.x = CONFIG.width / 2;
+                        levelText.y = 300;
+                        content.addChild(levelText);
+
+                        const starsContainer = gfx.createContainer();
+                        starsContainer.x = CONFIG.width / 2;
+                        starsContainer.y = 340;
+                        content.addChild(starsContainer);
+
+                        for (let i = 0; i < 3; i++) {
+                            const starContainer = gfx.createContainer();
+                            starContainer.x = (i - 1) * 40;
+                            starsContainer.addChild(starContainer);
+
+                            const star = gfx.createText(i < 2 ? '\u2B50' : '\u2606', { fontSize: 28 });
+                            star.anchor.set(0.5);
+                            starContainer.addChild(star);
+
+                            if (i < 2) {
+                                celebration.addShimmer(starContainer, 'star');
+                            }
+                        }
 
-                    // Level info
-                    const levelText = new PIXI.Text({
-                        text: 'Level 5',
-                        style: { fontFamily: 'Arial', fontSize: 18, fill: 0x888888 }
-                    });
-                    levelText.anchor.set(0.5);
-                    levelText.x = CONFIG.width / 2;
-                    levelText.y = 300;
-                    content.addChild(levelText);
-
-                    // Stars earned
-                    const starsContainer = new PIXI.Container();
-                    starsContainer.x = CONFIG.width / 2;
-                    starsContainer.y = 340;
-                    content.addChild(starsContainer);
-
-                    for (let i = 0; i < 3; i++) {
-                        const starContainer = new PIXI.Container();
-                        starContainer.x = (i - 1) * 40;
-                        starsContainer.addChild(starContainer);
-
-                        const star = new PIXI.Text({
-                            text: i < 2 ? '⭐' : '☆',
-                            style: { fontSize: 28 }
+                    } else if (tabId === 'profile') {
+                        const avatarGlow = gfx.createGraphics();
+                        avatarGlow.circle(CONFIG.width / 2, 100, 55);
+                        avatarGlow.fill({ color: colors.avatarGlow, alpha: 0.3 });
+                        content.addChild(avatarGlow);
+
+                        const avatar = gfx.createGraphics();
+                        avatar.circle(CONFIG.width / 2, 100, 50);
+                        avatar.fill(colors.avatarBg);
+                        content.addChild(avatar);
+
+                        const avatarIcon = gfx.createText('\u{1F464}', { fontSize: 48 });
+                        avatarIcon.anchor.set(0.5);
+                        avatarIcon.x = CONFIG.width / 2;
+                        avatarIcon.y = 100;
+                        content.addChild(avatarIcon);
+
+                        const name = gfx.createText('Player123', {
+                            fontSize: 24,
+                            fontWeight: 'bold',
+                            fill: colors.textWhite
                         });
-                        star.anchor.set(0.5);
-                        starContainer.addChild(star);
+                        name.anchor.set(0.5);
+                        name.x = CONFIG.width / 2;
+                        name.y = 180;
+                        content.addChild(name);
 
-                        if (i < 2) {
-                            celebration.addShimmer(starContainer, 'star');
-                        }
+                        const stats = gfx.createText('Games: 42  |  Best: 12,450', {
+                            fontSize: 14,
+                            fill: colors.textMuted
+                        });
+                        stats.anchor.set(0.5);
+                        stats.x = CONFIG.width / 2;
+                        stats.y = 220;
+                        content.addChild(stats);
+
+                        const achieveTitle = gfx.createText('Achievements', {
+                            fontSize: 18,
+                            fontWeight: 'bold',
+                            fill: colors.textWhite
+                        });
+                        achieveTitle.x = 20;
+                        achieveTitle.y = 270;
+                        content.addChild(achieveTitle);
+
+                        const badges = ['\u{1F3C6}', '\u{1F3AF}', '\u26A1'];
+                        badges.forEach((badge, i) => {
+                            const badgeContainer = gfx.createContainer();
+                            badgeContainer.x = 50 + i * 60;
+                            badgeContainer.y = 320;
+                            content.addChild(badgeContainer);
+
+                            const badgeBg = gfx.createGraphics();
+                            badgeBg.circle(0, 0, 25);
+                            badgeBg.fill(colors.currencyBg);
+                            badgeContainer.addChild(badgeBg);
+
+                            const badgeIcon = gfx.createText(badge, { fontSize: 24 });
+                            badgeIcon.anchor.set(0.5);
+                            badgeContainer.addChild(badgeIcon);
+
+                            celebration.addShimmer(badgeContainer, 'gold');
+                        });
                     }
 
-                } else if (tabId === 'profile') {
-                    // Avatar with glow
-                    const avatarGlow = new PIXI.Graphics();
-                    avatarGlow.circle(CONFIG.width / 2, 100, 55);
-                    avatarGlow.fill({ color: 0x6366f1, alpha: 0.3 });
-                    content.addChild(avatarGlow);
-
-                    const avatar = new PIXI.Graphics();
-                    avatar.circle(CONFIG.width / 2, 100, 50);
-                    avatar.fill(0x6366f1);
-                    content.addChild(avatar);
-
-                    const avatarIcon = new PIXI.Text({ text: '👤', style: { fontSize: 48 } });
-                    avatarIcon.anchor.set(0.5);
-                    avatarIcon.x = CONFIG.width / 2;
-                    avatarIcon.y = 100;
-                    content.addChild(avatarIcon);
-
-                    const name = new PIXI.Text({
-                        text: 'Player123',
-                        style: { fontFamily: 'Arial', fontSize: 24, fontWeight: 'bold', fill: 0xffffff }
-                    });
-                    name.anchor.set(0.5);
-                    name.x = CONFIG.width / 2;
-                    name.y = 180;
-                    content.addChild(name);
-
-                    const stats = new PIXI.Text({
-                        text: 'Games: 42  |  Best: 12,450',
-                        style: { fontFamily: 'Arial', fontSize: 14, fill: 0x888888 }
-                    });
-                    stats.anchor.set(0.5);
-                    stats.x = CONFIG.width / 2;
-                    stats.y = 220;
-                    content.addChild(stats);
-
-                    // Achievements section
-                    const achieveTitle = new PIXI.Text({
-                        text: 'Achievements',
-                        style: { fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold', fill: 0xffffff }
-                    });
-                    achieveTitle.x = 20;
-                    achieveTitle.y = 270;
-                    content.addChild(achieveTitle);
-
-                    // Achievement badges with shimmer
-                    const badges = ['🏆', '🎯', '⚡'];
-                    badges.forEach((badge, i) => {
-                        const badgeContainer = new PIXI.Container();
-                        badgeContainer.x = 50 + i * 60;
-                        badgeContainer.y = 320;
-                        content.addChild(badgeContainer);
-
-                        const badgeBg = new PIXI.Graphics();
-                        badgeBg.circle(0, 0, 25);
-                        badgeBg.fill(0x3d3d5c);
-                        badgeContainer.addChild(badgeBg);
-
-                        const badgeIcon = new PIXI.Text({ text: badge, style: { fontSize: 24 } });
-                        badgeIcon.anchor.set(0.5);
-                        badgeContainer.addChild(badgeIcon);
-
-                        celebration.addShimmer(badgeContainer, 'gold');
-                    });
+                    return content;
                 }
 
-                return content;
-            }
-
-            let currentContent = null;
+                let currentContent = null;
 
-            function switchTab(tabId) {
-                currentTab = tabId;
+                function switchTab(tabId) {
+                    currentTab = tabId;
 
-                // Update nav highlights
-                navButtons.forEach(({ highlight, label, id }) => {
-                    highlight.clear();
-                    highlight.roundRect(CONFIG.width / navItems.length / 2 - 30, 8, 60, 4, 2);
-                    highlight.fill(id === tabId ? 0x6366f1 : 0x2d2d44);
-                    label.style.fill = id === tabId ? 0x6366f1 : 0x888888;
-                });
+                    navButtons.forEach(({ highlight, label, id }) => {
+                        highlight.clear();
+                        highlight.roundRect(CONFIG.width / navItems.length / 2 - 30, 8, 60, 4, 2);
+                        highlight.fill(id === tabId ? colors.navActive : colors.navBg);
+                        label.style.fill = id === tabId ? colors.navActive : colors.navInactive;
+                    });
 
-                // Switch content
-                if (currentContent) {
-                    contentArea.removeChild(currentContent);
+                    if (currentContent) {
+                        contentArea.removeChild(currentContent);
+                    }
+                    currentContent = createTabContent(tabId);
+                    contentArea.addChild(currentContent);
                 }
-                currentContent = createTabContent(tabId);
-                contentArea.addChild(currentContent);
+
+                switchTab('play');
             }
 
-            // Update celebration effects in game loop
+            window.createHubScreen = createHubScreen;
+
             game.on('update', (deltaTime) => {
                 celebration.update(deltaTime);
             });
 
-            // Initialize with play tab
-            switchTab('play');
-
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createHubScreen();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/no-ads-popup-css-demo.html b/docs-site/static/demos/no-ads-popup-css-demo.html
index 1592d35..ab83c8e 100644
--- a/docs-site/static/demos/no-ads-popup-css-demo.html
+++ b/docs-site/static/demos/no-ads-popup-css-demo.html
@@ -4,7 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>No Ads Modal - Pixel Perfect</title>
-    <link href="https://fonts.googleapis.com/css2?family=Lilita+One&display=swap" rel="stylesheet">
+    <style>
+        @font-face {
+            font-family: 'Lilita One';
+            font-style: normal;
+            font-weight: 400;
+            font-display: swap;
+            src: url(data:font/woff2;base64,d09GMgABAAAAACwIAA4AAAAAZ6QAACuwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbhFIcGAZgAIF0EQgKgbIcgY4gC4NKAAE2AiQDhxAEIAWDZAeDfxvoUgXs2COwcYAH9uStRgaCjQMBcdZFUTZHpeL/SwInY4fbuKUJjsKlGHaNRFIR8ta37ZxIFOQiYfmPBTu00zgSR+N7yrlFlAiGggYtWLf9lR33moll/REa+yQXolrDemYuTOgiDJCLDbtULJF7Lk+OSDgihY53eH6bPXWAhMAHvoGUhKKCYgUWoaCAhZGIUbN75lz0uSwXOufUpUsX7bbb7m431+XSSf/PH9Dmni8LvEkgYZ5oGARMAScF7y+3zwUuDT+XSmz6tF6lzBXlwv77xJy47GuXSbfyTQ7OTIGZlOrLXpfuB5YkNtCxoBVv7o/Pu/9v/rwDPtP6yksQi2Amu1l4ORBoMGv7qfeWv5n2D9fFxFbqAv/Etf6mLfKKZF0kUL5ZlCNOOpACqQYIEDiotRN7wQwD0kiTyWQy2XWvff8njVf8v7nS5heA1G0ZPKnKVti6CjX5gds/kyxMcbK3d9fy7BaYbYUC0uVsMQVARfh8nUXhVIV19f3W0l5R6L4KVWNrbfbNHEyBWQL9ZBayUALhgYWvtXf92qsGAmdZ6QjDeD+ApIDuT2bDm31hFRkZoYDBEjjg8XVEilVV6x2wbm3Z/H8EW8cV44bxcPrVZt/8Y6s6KyGUXMmF1v/Enixjq04M0hwKykTqvgMECAaUIireT+4OAkklYLD4q7wQGOMBXC+Chd+lBY+USQgF8jcil/+5hCryZOM7sD2rXfmcZ8xPO5UKI2dAKNlsOXAk4sKVBy/efCmoJTGg9wJN94yoQ04iFaJ1zFksQLxOOjBhgVkJ5pMyb0sqO0txMkowlEiHkXDvKuHdJVJyTbYWXCYQAspY+EEERToULaQlIYYSAQ3MnHyBIBu18N5wNiBFI4TJVbxLUobkCsEQAkqIhGhK4oEIz+E+yOUqCX+DItSVaO1FTANx+fijBCvaDGhGws1wRk3yUvI1JA7ZymDwSl4KifUbRtQJC1Z8owyZEkoyc5qQfZOkplZlCFhZTCDR8sQUhaTOj3ndXd7kC46qc1w1jWXqHHmXlUtbDAF6px6AHTiHvOTsJ6DM+1wHyn4AMOiOxn9GRoEArP8ZHR0PsGP/HZcx5HfjIn0joNqAaCsE6s/hjarGwq8rWqN9Zg2cFrSopa16jVvaRP/031fPorIYLDbLmiViebOkrI6ZzSb9anYWIN0mA3Na4CKnW/UatrRz0k6VZc6isVhVvYz9Hdfhc3LGZ5FmJTJphPL8g5j5PPNp6ujU2NTo1MjUwan+qS1Tq6dcHhz//xriITID5rML4mYRqMKHtDwyxlm15D/Ds77QwHYgdDz0hg+KbKgAKkziplyFAQtiWZiBmZooG/LS4OxY6vUQiiY9jNNtiwYP6gRwkalJOSkqDWZSEtJN39qKWQk4zznRD00NX6f5YSsAiPzbwsMeuHiAC4nXu+wEJcDxvtku9akUYwIT6qAimvBmy10dMTnbV0uT+3hOHmUzKio8VmENG+qp8Y0KJbQP3ptgpsp2wBmVvY3YtdbZMTcjtYPUt3JTCHH3/WC/RV6MmRvuI1RLAcIRSNJf+XKLssB66rAtpOglbK+CJHHq49zHtY/HXgIrDzrvXqnnXnugz5Q5K5ArHz0BDHjDIqanmMcjAnHQINGB64CnBEpgTYiJslcWeDzihYLhylDzecoQJ6EqMy5FjNiRGkyKElipJqOmcWSFmUZhbyV7U/dTRH80j5q1Biat9Um3ZyYRFsdbzLn8B6IIPzkQ+UGtLMjyL6EMtSCqMCTn4hWkc5ydAErQp1nyg99WleAeVUBzb7yM0FYaPcyRC2NNiNln/GGl2XLYTuCMiiQ/WoNTe7legxlhORqsJvuukIviUBFZ0WgFPzFP6b3oSIAoATNCuaEPEZg0ADhAtpgNYW8Up/QobeHnWEecmNQ3rDgkh39NvpI5iqST0NYjjtxZGvfhCXOJDypIijGJoiPuVTIKeilx4kpeWmcKJKfBbIYz/P1bwOBO/eZv5kgu7rMPInWz1j7Yi5yN1lTCL730u3biwCQlEeOyLJajihy2CmP5+Cw25rw/NC6JCgGY4+Tb2aIS269xkTZQ54SPHgBMlpXGzRFpUFSU9wMlKsBpbp/LkruHX7w3hQv7lAFA1EaJPVqf+8jZGaOMDpM1qcRfRj9FOpbUJFV+prqYgdnzwi3uU94brFQ0bgwm5Ae5qdZZ4+aAeeLICyr6RADpcXpK8ticG22yU2CKZ73HYJDHwsU9yBZBTj4WjV7FTfVeAjDbEuM6KhWVYg27XutYxAlvbR5nvDQpiR3KczDo8RDqAi0aQ/aWCf5MAubt1rqmZ8I1znG97SpJlbMjoWyO/rBVr1Mm82LVnjKaejGeq6/KdTCllcCEyC2pPx2E8rzNAvLCogyVfn+FLi3CKdh8g1hZx77TFPX2Lh7VFraEPnKBHfvBJh34N1WqTS8SZR1yvnTMuCR3/LLYROaiQXsKhidONefx0gmPedF2R53cAZWsKUKAizYV+ZEzUfmS2gntXZbDbjeYBDlSvCkThJ2pZVFLSuIStYJlbdMCT3UOKvC1Kmm0kObcB+qtxvqfkYVQHzZQQftzEQmYSybAZf4/VXe8/hxypOOp910lV1e1fE1KU0rhcHSshjeQlXW6jiQ1r3DRYOw0ULpZpmD0Gwy6xehNTyMi93eFhGMQ2Pv5qgTuU69BlTRF01ysndDRFd7/6F3KKj2YhSjxZkWJAMY006hFFRsma541TUr0Zpdz1eQR9QTpv9F+jgDS4igVlwMQyJF3SJk2kg80jl6SzE30uXSGWslGmpsY24SFoLNtXm1fQenCx1YwqE1ydo4REReGmtwEkthudHItQptepQmhj9X6GGuAqE3W99fCZxG0QWRHBEZIRZFcN9ewDM9NF42q+o0HJVHyNy8O136nn1RIXyvdd4Pb26YxA6jAj2G28FH4LDsHocxQpCy0xYp+Yt/Fi+12VcdZpEm3+Go0F7ggsIz7KoG65Cx5Xy5DRaKfmeJiBR95kDg3Zb1SYh9NJm7dXiJCzqaSaW8AR0dZV0AljWKQzW2r04nrpCQ/ppnlloizWUmkRzZxYQmgMXlzRHP4GZUkPJ1DGXEi+QX7knVkjkFDWHHP++Im/7xp9AAl6+zAJOVqxEb/EOl/vEXdrccCu7Kf7cxT/VxaD+Y2iS+UFMZynymuS6xEctTgx/WX2RnrRLy99H5knx4SVzNZBUTpvEO8RS45zEJC3HYwASXp4MXa2nAvuWFC1/R4ybFTfGWZcWhlk9fsjnfs4xbHdzg5Zx4zxVHpoAXVDVS6VUR6kWSCsjt1LSAfVCIpm2wwBVIZJ3RkjSG3oQAanyAJ0teHdWtZMB1CEoCBMlO088XVZGCgdL9M6vF4AlPjwrOBt23fsC7mcb/Ksx3jnE0EyfP64PPHVoDiPZORPF5s5diokAfyeH0K3l+j2gq6JeWcJYkz+zJom0SZLMiHr+nmsq3fLU+T8W3+ghWb1CPkvtdi5g0d2c0qT/LwkKJgCy8A38wXOu/5s+d1U5hloLZFtxNzHsHVrkYfAyPjXqpjakmLREf4HLKKIQrM+EijtWO1BIceXmw3qUAj/7Qcy7MIgkFkEIw7ewUX2zPcxKKKph3I3Y/ucM9YlqJSR+W45TBGvIG/aIVzZFOSYrWN+EO2AIfQo0UzY+KSCMx9XcS2HBDbInTiWqtyGPyMomVJTIzO3iNFhOh00qmfIDtt4SkAuFWQOb7uUZyQBn3IhKm7nzQKG7zGwUL3vgEz9gBg+us6fl7sUEmPEwqr6YaSPnGwLednYNztYP8t4+6TxHS+iyK5qRjYgoyc8NqN79UET0NAx24QScJ1N9RRzclgNLp/pfVCjlQ054+SNWkQaV97aB50xNTJQeescbPFm3YRGa7fvNnJwkZx1+QNDEp4urrBkzHn8JhL5swIW5rDh8W2tmUSUXLokLbwrB5qiSMH2fmvB026zEnIq0xnY+0a+7eFO+M6WaTbHa0QVDEEO8urOliV6m6qbq0MWrFWPkpOnNkgKn2yBqLAH41RnXHWbbXSGP99NClFoaslPyQSdwN3vcIUvfWgEwSczVxldw5/gMiwxMNKaNxxebnP5z+C3F46He6I1lcVSQYS21YOR1bXIO/SEGCDAP82qcKV1Yxv8b4WP7gXubN9APO6h5fwPE8CBRZO9E25bW7xImrV59IdlM7wfj3p9Dy+0gXmNMkqmVHYzZsbxaLXzXouw3G3tSvan2PVA1CxGQzn5DGTylPFWP+ofsFJhbNtoWNCkulUWAfb8hItD7iAaM8m7D0EgaHbYs83to6ObAoB2DRnQbLVpEzmRLBoOOWLbQBIhAorj9xbVnQK2cAeXBCOJNUkh02I1XPdPiyhrVsN3ovgh6NxevJAOqwKsYafqE/PU//qnHgE2iuLuwwZF0Cn1XKLOsx9B2JtkcxuJ96r+X8Oey2RQqZMNltUE7TNv+6wD0kQaiZSHjYDMyr2oopfyYuTwtKNu5QO+sX41amvhBftVgHrxi/zWl5qakBfDdxu5k8CXge8i4nj1l9XsXv4NkXuHYBxT6BdG9ziXUhO2M+9+P+QJOOskBptBTE7BlAuggDJlnz4n8OTFTPwFkPT837l5gknk3cmbXSC4cquGJDgDJnofiZBRLYcFVNLWxIRgOXVfogPlGVTh1TMNDGlz8Bwt0hL2ue1u4xf54+T6Y1WS8hSexWEBNY8MIo4jZLvcGpaG5/j+e9S6P5JTfekTyXazAkmPtJIzrEPtPapvhinC54ZzjA1+IDdCtKUIOztVdJGh8c0QzlxO/BrAqbNoFvt8Gh0CGbHoNpxrEy2qNIEyFv8GS9sN6mj5AK4zXBEwZQ4uIrw1PkYUzgfaCGKGAlrPzvaImZef7yqV+c2eDrDPj6z1+qCN6ZIxpVVjiKizD6SD9gJag8B5KYIy2nb5sjIgq45b82AAZcNYznkpOVRG/r04sGf2Rfwwc/sxQeIdbtnx31onLaRG5GlwH2bj7YpZuHhImkbHJP4JNcySa4BGYJT7eKookezpq9xAuQjplbQ7CQRbJoL7Si0AK94lj7jin+jAgIRfzC0VFsMLQ21XQDJ0V4XleyzW2vOhQLDvU+GWwt3IYuPm7WSzhCpSmRx2edGn3IaTxchlgJn7TWcwHN0xzEsGoFbFMdScL6JfA8aFlLqPAuQc0iQ3JaB+rfFinjsrU1BMGGmdda3u/WRfAJe4jG79ia86RrIbw5JrxCn+7c/JPu5Ydr+9iKXMzB5Y+EpE9czb6+FVZBbXCaZ1oJwj7PWuePcBMctKbDBk2254EaIh69THOWS4gPHTmu71ZEjJvc8JRquTU6+0qSeojMxBn/vxBEIueVJG+RmBg8Dn00KY9rhVUdqm9+ulRPTesnZjEV7NnFh6Pt/qkCJHwgoQeWzcvqMDCW8BpdiLrz1PiwqCJPltOp/POLo2pLdKWR2vbWWqP0xanDwxCHx0qDp2kte8BJZdd6JlnFGy4YNbKGBiXN7bl5ian208IFGJ4pU08hetmUOkdqT20RS8tN+gOSk2X/V+GtvSje0ETdvU87a1lHF2f5yTgcs8huvepB1dPoNyXBaGWVB1+StAsuQ3nQgDeDDrtuBGPs/7fY0glyEIL8xHkGN8lFjyMUYMzlwbeUkaWSSNjlBot8k2ZC5ZI8KwzqnyTuLtoWNgBP2pHoNXTCXvAJ47kwxh/Nub7drKvfcoTIzm0awbQjF5i+wFiM3FrKzS69mutxpaSqVknu6nFdULlpS0bXqc48Xd65MmV3R85jJIn5N12HLgMMfL4VhPpvD5GeWRrGNSm6gTiVmt+RiZKRQ1OTfpKAog2YPe09znjxcFI8ovIW7klBSpsf6sLwq5XZmUyVz5dgjDnbnCi6AmXPatGPRaR3alJNRurITgSmBzA12G/YXth1yGacTw7t1nOz6T10nhnv7KskVJL1AW5iIZmlh+eaTZ8wNaV4OgkzsehdNdfbz9uLBaD8/2WhT8eXKdC0UwEyoPb5HqJsWsad4ENEQDgIbttEmR0jkm6RYjjUn++/ZnwDHtmwx49zImXDMdehLAHt02/q6X2C4/yWM5IHvW1L25iWMvOHAb2/16baBPQkOfY65hiaPPYGMW20Ku+Cs00pNFCU30pciKQrvYrfiWPLZ+5CrrDAS80nHIrkS6k2NKkHlkPlQFgA68c5dpHo/ml89aVc/aWKScHqC1L+7Xn73zhmCqmWp62GDaK/Oy52wK9rItw5cOjaf1pr43wSuG6KOIQ+ijyEAPR2lpE8HbHfHkeku9vGMZxHbeFguOIleP6LfcHBmzVDe+oEteNeYjc7REc7aja5akE6ELkFv8wFDZ3WFSILUWDAYxjGRZFhrHzyLol3yf04vfBxAD6uZJ1ROTcRVHdQEXkBJ1V8BOZBmKV9tuDSAT/C6ZsjFKWmOA+OW+8ztQj3dBOGJjcLxfI2sJjugwbk2tb28QdMiAGw7zCpMIGjERqAZLRx8/USfbSQv4Z82j1JUIwIs3gdulF8Hu4+Qo6jGctxpEGKVn1N3eVHzI/96D0IG3kAip4Uas8JjtGCJK+RlywC7f1W4JeOq/HwyU3ISCzubX7TtXHto6615K8WCwRURImaMSoxjFeIsZcATp7k46jxn+8tLjDSrK8RkwJ8/LAMWN/W9da87Kk/qlBLv7S35F6szwF8zC1xTPB3pbFdDuruU7ZA/ZfqW7EIUSm1gULNXiQ+7FkRn5JaU/93a/qR1w9rTPde7d3sxzHQL0/kBHQFi2VowvSTOPdco0CykYPcciofJvsF0yxZIe+HB5Zta6OBSOOvZ7P3qe04BrzcsNQo9WPtNbU7rM73/bDZrm7dC2ss3LzzQQls2w5ng0VkN2VqolI05BFo6l63Qvk+1UC7iOIuLUqOsuSHyVa+ZDJwCI7mA3IZYZ2x++0EKzedc/7mBLcdePDu+bHCvcW1LPHPXgxctUomsoG9FioaxiGN5cQlxpFGi0JUVpy7Yurf3HT0uQrruZX+HqUBF5lmRq8kLGQBlEJvPat5Aq0tJEP1jNLDVmGS8ZxsqEcW0zBVcRQIaMifezSAwdlNlctEbKIbcjM3CPnnF3NSG0AVwNPaU760k+yZ5qD3460whX+6aRUJcfAN5yyN2hUR4mvUegXA4yxCKTZUwct6usah9J9sAPc6il7Jjw9YNe4q9+11OzNjDCQQPz4gTuwJA5TayHO7CNWWMQolse6wEH2PNbKOaZcGD8Fgm2HEEGoRGSmuhNcS6j3ilscVDBH4l8YIJ2HLdoBP/F1mvJRh5iqup6iWDRw6t2XtytbyYKkcJ6OGxkEMx1S9Ms1Mdkw0iiNBF6Fnvs3ajVsEX4de9L/HwEgsrGA/K+jOCoTyugJsHhUMJrgLXBEiSIYfy0MyXiBgJGMfTrcLEiTZPUg1ks+FCfw/vKO7Eu/rWzJFMN/DDhJBSSsZsgM5DoGa2oPYsQ4O9XhdMDR3+vmNNLvlGLLlHBLWF8CX41WpSobWI30RyNV0G3oJ4CmVxzQqfZmrDapOFeAXGST9tYNptXsvNxqQWeaf5dLfwsjB42iKsCg20MHy0cbuHB2mMtI6gYUZiFm5w8SYfJoOr6IGRtAPDlnsP5A8OHMEHxG4QR2f6aTcGaEGXQSKli80cWN5aU64Ta55XOYYP4ZTGSsJ6E86vcAM7QE86IH6Phufn70pm5oZEwRfesVYv2VRE6T5k4ifxzHwwIabqCL0c3gnUFT/HjGMNN6qOH1bbJ//DpK5EpGq4QXYg9LNDkovWilA580F+q3qgtTovpIZhbmTEsc9r/5DJNQ0ou6+/vCowMr+is9bAV0cO9oqkh4MUAuUcZboaKuA58AqgIWLAClC9g3KPcilrSbPBxnklR5zv/mlKaKIo0xRg9iFijGlFYdqR8JGkSnosCjGwwj8j2rgHIwaUQbucMrZoa+4u9VJV9h6vndRYlGWusHqlX66JVX2ihKSAnAJRJPanQKQT2LrxWAk92njOrvj9Sm6iMatpUHlccmZNJV2Lcl8Tv0nBjTNmNg5Jd4AFq0+V0dUo3rVNX6CsIffNWaR3d7a5xWOYdUMhl0AoAipgO4QsgEvFUKEH9qV+xMDAdJG7c+Ims3a0QzWD8zIPICcZd7EhsGV3C7n0u3R6HB0oOWScYln4M5Spku5iz8UqWtLuEKbigNFpBh1M518RqDgeA9t5Q9oHF25e1kJKOzhr9hlM+4DNin8FrInfe/CN2B8qRVslYIw2x2uNGbNokJ836G/cNRGRlLieDdnI2RKGO+518b00RXp28JbTHhgqnmmNnjCt5L1T0UTAaRS31+TUDtLNjx3Ni9+qXK+4Qz9P3Gb+GlJkg+vf9ErRJwIpiycLGG3uetu4ZLK1x76ReUFE6M9yZALbYYLGUo5EEjgW9TThAx+Ble2C3oztFd3f6jqSLYdZfZ6ZLr9tiLvRYDv1ybnOjvetS87PzVRsPixjIFny96Cx1meRmZ0tebsp090KRBU6EdoJTqZ5ceEbL5fyrCKGKVwbVziKFCA3C9DjBnHgaVpu/deenudK50/KKvVRhdkqcoAqiBbmYcPYQY6XZPovxbFPHT8AJpHoHfi9qNtwNOl8MT0sNrzQHa2ONURZO7FMz4DHCOMR1GvUCNLHSC/GnB5w6gpyGAEra2OSWhIYy5qJigKPxZhh5DLUMBAMEROjDTHN+kOFa+NbJleYk9VzqLoc/f37Jvtx4BEKnaUBqF2EtGhDFPg4B9WP5jhbQcMBmH5ssIWVjHniV0gQT3dn1f8pYdsuiKj+IZKGwQwCFZJuaCylUutoJszjlmFDS57uUyXnC3D9OCtnDkYkARZNX+q7b9V1f6nrvuWkGy0ZBUbDqH6UEdt8vlBw30dAx1gbBrmsLaqeKeqJsfnMV0E/Bw1gZFumFjw0Sspf8K6t/ZnKtcFkj8lolUVEevuml6wnhx9zAQqgEhMMkGGWRGv63ADhIU6IXMTzPmbDJGlc5uBNrH1B4FC4yJEBEzzqncuV+apVOUyqqV1w6Q5nSzIuoFqS9lUcnqvPDy5ztKPtBSQELjrdCK13ochI6Vi3OMouYgBWC/VCwcDmLXYPluvMMr8ViNmNCaGyA61u+LAl0+CsPC1RVwwQH2xOIoKj3NR8XZpN74vcqUbg8g7tUW+W9tTxriP/gfMDhwdWcc948bHASBgRqYKb4QgFiPvg4bDSu+Z37VOArEJZ+Pu6bRfvNS3UotyKn1ZMGyAvqGRIN9dNAP0OO2Ib/Fr61sO7PenVWkR+IpIScwPYRaHsK8j+KMdYLDj5eS+WGGyJluECCLbpMHT8fzB1AW3LjybPpZlkSnrruB/Mnfq/p0w/952VJp6H5V3fQ5SyWT+VfauAGbnBJ1y0Jg4d6PZDe3f0KX+y2FJoINF0eZh/0Kz40LS15/d+YPGBu7Y2o5IxTUFJvIDiIdeYzH4nYaq4cMBXohFuFYY+9YU+x8g60Qae3Pyy3B8EWCUcolOStC8w5RTZk+y/LILjxgj6/GU9+2p6mrdlcKDGbtIP9oTFBYi25Sbzlsw1Dj63J5hwEcyzS0KEv9tDquXac/NIMQ3+q9h9ERGoGC0+2sLUItrEl4TJu6f3rWT3//BPZfvT9GPlzqlim/OFlGhwd31Zo0StluJvxHSp1R7N5IgICZ52Ey8ND9e2ZWg0rvhxB7xLuMa1NVat7qoYxLv6uui47AypNEMqFzkD91sdZ6DsA3i6M2fqzALM6sR1ZkqzxGHL4FSkRXZgwtr4tVCJhRLFPUhPJ0R4kfkRxA5xByHVg2iTCnDjTQBbE/JfMiRI+xYkmI0XOyUyCPlhTJWtu9IpSeWicDCKTewtqlS3W5pyHdOXx1PnWnHT7FoibD2D+Ekqp8cOMnZyU0mnweIgQV4oU+F+2kEpYtjbU2UiLzBgg5yP6EUb7unC10wgKnVq7dqX9qhPGhoGauuH6hv2fz6HETrMGXQUWnDE0sOLvjuoXmQJSbhBUaperSaQZQUWxglEmwMXq8S55mYOtHyKNbt97leFU6DUUV/tSIJeClG9dBpu1JXCAvrXfab3d5zRkjuzyJltC9oXZZKzOsnahquNPYGZcNgT+oE36LT2BJnLba1B2TGbOmuimMPfYcZKl7WyWI+RS2iuOT3IOAWXhjMhELJL2oN9DW2sLK2AzeHt4fGLwhO2hicswv2bckpzIOWABugM0eXozN6+uN6eBXHtOQu7zy7tfcUM8YUV8XEPREkv0ozblLD9XJ0iXpVhBFE96cehbK4pW+mN5TywA7QFZO/YxRYiJsHOHIPsMEUTP1IpfjVuGG6wqd6HLXK4/Fh1J0dBAcVE9KSltXZzvBHmuZ6JlfaHossuVn3ky3YStwVRTm8jgFEKMVRTOlxYmLOX0inlO3fCziiyWam5ixnpJd5tCWWJDP8SynKmlGaB6buRwAuYUeVuaQUfhj3EvAg7E/4bjcBxGjzbHYCuQz8WEfII60hAvYqZU1l8YqVHFRHcp2WRq7LJme2L2hZkkrOqKNodZ+6b9t272njfwbcVSAWSKcX5ORtL8kaVZG7uEeteQ3AyBWR5ZjpRe22Xh92FYccehty6mvrO0tlH6gPifiYG1n24UfMTSngMoRZ+fV8d/L1IOffjeyyDpNnFPtKzGqW+Vm33v36wulRiABIbm8/s2UBvT1RkBvfJ9O+XZfCqJ/iENuUx5ELd31sLn/d2i1+hn4r50X1R6cbpxzsSjWaS0YYNinoFd2tNKC6ahN8mZp/ykYMykHjDhy9cxQxz+dajlDmzWwKiku2J1aZFMln1G/zb38cQouZ4ykb+hofgsfRDXe+R+negoiRILyTMoaKM42Abv4W8MvyiYdm+k22KBO+aOOkChRFNCtzvhphkT+eUDt13dy3KPi5EKJ98If8UiqJn3wNJ97rbl2UiaJn2WSd4FjfWpHMEgflVWx1/UVwvMD7+7xS+jQ3Cu2fIanlTaSQYI9k75QR7pCl0Oh2fzjnzp/YiDZyHD/bVjAd6Syg5ItomwNgHYzbx/uvkFj2HRxr7A8WkMdJegooRjlm4VRwQk4LrDYN241GKCpt+lFHBU5b/PmiE+5xMlz/sSZrhjAxYCHjzKFHdIu3mX9SSY6oo2qLikhIMqcwma6Gd4mItYdefXWS0VlIWFmbRtLSs7gSAZrlel31guNtNZRe5Gmt9z4REsY8uTKkbHFji3WqjyseTbzUmhfRpCgb1u0NyqItv+r/a4uOKF0cVgeoDlHuUO2mxyBmdMYoyCdshNFH4C7yEFp4ECjj8RjnC4oOx2qFUX+KA3w6GW+ceTyscfaHx6M74CPeA8DA+WW+EDt/cVlVZssidQ0C0mqeajQ88fxAsQqudrAXf8KwgEY++tFUA38WPcy5I//+b8X2cD7JxA7j2zHmZD8pj+z1SAxguuzbmFKUkvohNrU6FqALHOGx8QhkW6FpDb0zHmQr4O7PWkONK4QuBba1JQpWgm6THT61V+V6/dmlLP4otHo+cuZUYnKKXbTzijjYn+O4sjzhuY2bskeylCeYKUnLT5RsPBuHdHtCC/NMdYvmkGcV0Mp/P1fFdWFmIwaraj/k2L5Tafhi2RGFCSIdZG5lqXPa8qcwE6JUVYcz7Wn6AB8+a5f0kWpaqtWcUfFAAn18hRtSaW/DcFK+bgjEeRP2LHEQAv4m4rmUoy5zhCu4g2GDtoATJA7eTZL5Yz8RTibT0crPeIO84dz91SRRxTv2TL2q+U5pp+/rGnLLq8UKdViD0LrktduJ8tMYhxQLzjaDTrGu5mFcMwXYj9nDhbGjHmEaKeCeMH9QMG8gdOhbdrxAHF0FEV7ozpqxIQiyb04syYY+Ry5BED395n4N71TR1L0ykAPEe/rLp4jdhnr3PrUTL3NGhbc+DpD/quvOEob96MOyay5Ab66Fgbe3/Q0Rbf/m1SPucmntbCLZiGUiyDro7OwPDK0OD71HAWJZ6S2KIofcH3wSIYfF5Mcv8TV7J06BnHnXBRh73OO7FyIaWzdz82NrYU4SL2EGN4qpwKeXM2yQ0zHEnYU9M4yycFKKc2aGVADsiUmKBsTpR9WQFE+FWcwlMgHX1w+ka/iJVu9u6xJPCiHWAkgXkJn1ZPH31+UAu27823B/8v+N8qtyScViGI5hH8jr37sGx9IMjPaLdqfAB+IhemBQYu9FPm3UI2BQQY64tnd54/QAWpOE/Gb226LRBZUt0sTALoSKD8DPzhLD9b8IrAFLsqbKoCzYFArCLWeTLspuynShqxQNCW0ePfIp6lK487nezqs9YtrNRMkrJazIbGHVTWLhyAnu/OPIl3AoZlklRrsTIeJiclIhwgd6cCn/5aPhFkc719s0BJWea4SJPygYUbiYSdB7zsSNrIhKsOyaut76eHIi7NUleecpydaDPTdIOiSBqB5g/8j+602SdPem2yP+tC+dGn0LKch26Fbja8tRK8iOy7WZtEaoxKOF1hsB2xXnSxGP86QnS+TLyXAHdv5dUMnwvO1yaQ1NPAn1lxdufXbdTu14mnVcxuKzi44ovq4V4EDmlrlrke9KLOhxaDwfuTjUvMIS3arXNg1ZbtNr10mmNK+e95eBb8NYRcsAOJijauscBuWLdtyOAwdtAQeDrtjcBvIO92p/Y5BqKmfIhxsjqjCSeIzuATzUjmqXiT3AtjuFXEW1SCf1Oqijz9ThD45MWCsimSKhq3nMydPfxebJcPniXDFVB70TkIvJtShHF4ccrcjmEWsff7Bvua7sVuZFUTiKE2AQF64RrbFYu94jKAq9fVHBwfgqSMbdZj9uBS3/uspLc6Ai1c6F97J6s+45IOsy2tjSIRI4ZL8CMISX6bPFYOvEgZXwYbW6HLjSV2N0Qi13y752UWz6ZwQstzEbPbBoqm0UAQMn99qwJCfffHL1GcNOVdk7qncU1JmL2ewGvvE23WzGabSj31Q2HAbcq8SMhuNlldBQatLST7G96/3SU9331bb+YuBVVtAvh5tcg6Hp/miAEOkyf3vlmi+wYCJCTZIc/ym8cP7jacVb1lxDOuLBWdxbC/dr7pLGIbksYfL/f1k4g3Z/PzOP39WaqUs0DNCE9OHQrUz+IYPHVNyg4aNwmON/03nUOFRps2J907JQX3ownFPuZid4P++Nx48j3uzfKJBYUtJmZfy4/HX64CNpPyHRGEsO6Hz29cYL7FWM/YJwyvPzBONtZvnDhAGEfC/Zo61ZDeF6e7Ts6IC86J1ZoBSUB7kvdnWed1VZ1jITP/iy8ERn+hdQeZ4jsjOvV3bjzlTJuzxos8NZmAoS6LzW+Lpi5Hfu+vrgQCRPddYkEgzt9iyov4O17dVya11VbcjWwbIeZFu9HPNhf0dSIDLmv97Wqt4iDTKZ0EV5M2h+HacdQT+N6ejddMhX9uQkwGJ+q3b0O5tjZu0S+lEEZt1nDcVHyObBsh9Zic04P/3gue2NXTUDls94xMtUCVLnCzfh7zyHcn5U2bl60Hz0LJ74F4Gy3TuaN38iQ+uAssJLwhuTg3S5Wz25e3g3scPcJz4KCT+vw9bNZcoONSecWQgCXpzEAhK3v2a3rKgTfvx9Y+wLA02/mIlzyeo77xt4aAH8UZBo7Pu5EXxnjGqZXnpd8MEHVZcS481lIGuEuC3yBEiJjPwZOawgmJN8+qdsuNaGIEvDmxC0TsjxFSQzoGs5WIrT1iyLqGGgNdsg/G/WFed4sc8MfzNu8aBP5wDUpyU5xKUTQS2fTIgSdJM4JoxzOe8t5dwkrcGHewntBuwqti2nhIfw3n3NdiUYp7c2hU0Bqt0cy+qYhdPl/1xWwdhNcP1LZ17ngrUV4oaC1YLSfoHqOSxEcglD1p3I7UXND3TPUVaE0h8R9JRxEOILriUw4IuGjIGeDkgGJ2SNvFlDXi7JTLFaMHAs/NL76HVZLEDQBRh6wWB5G5WaWJ3yXwGMSRsTZK/Tuim0ZIOf6ysXfBdYNi95P4Q/BVJkkO8exY6LXil8UyXQ85oS+TMH54j8cqXPjvaUyZsl2hfj9J/4Fi3jhol4GWSECWwTf+mHbxY6NIF8Iq0EGkBZr7r2WsN8Lq6SMXiZsqpxwT8waxaGNIl1ffTBuYNjVnlF9LLFGTHV3b9ql+eHvhVVTkM4acE+sFJAeQJclhSOQX6x3G0JWIGwJ4yFDgTn6XnSPGGuvLbz9tm9KyB6bmXsVbxQcflDHB5NMK37e5Cvmlqv4SOTN57Z/X6CpFJ4p6i3g/d7h7GOAjsjCXtefH/fHCZ4+kaQulDpRGJybJSrIzmaYL+7PNCPECzhv/VOJNkK0fW2UUC7aGO10G3rMNj4kkrfxJZIrhaIGzCrfY8W8Oc5cJl2pXJfKnfoOymguUFGOsimtIRe2Y6BcktJ8XShTjBGlEipyFYtTkES7dqZUwWYKqcqiXE9kpvcs4o018Vk9LJLzG+S0U6SrslWQlBZfrWR2iSLFasyL7EYdnoUvna1WkmVm86weyvw8nggoUkGDNat0OaIc6Gddy5agFVU2IActijIHqNJSxuTL61As6kYUsHbPwrY/js2Q+RDdMGeJDz+I6v4y6nclSgCBBBFMCKGEEQ5CQkYBM2XGnAUqSzR0DEwsVtg4uHis2eCzZceegPAXD/+tOHHmwpUbdx48efHmw5eYH38BAgWRkJKRCxZCQSlUGBU1jXARIkWJphUjVpx4CRIlSZYilU6aLeZpd8xKL3RYaL51dtk6I7a1WeaTZ3+2wCpdTvvfR+vt9tUX0zbb64IJ++ilWyzDJZnOu+iay6646qUsk667Yb9sHyxxxy235XjtrW55cuUrMFehjYqUKFaqTIVylaq8Uq1WjToN6o3apEmjZi3eeOewvz3y2IBBTzx1xDPPbXfXQ/fdc8CQQ0accdCws1qd0qnfOcedcDRbr/fGnXxFYa7ozdkNgkDpnP9yBg==) format('woff2');
+        }
+    </style>
     <style>
         * {
             margin: 0;
@@ -19,6 +27,11 @@
             align-items: center;
             min-height: 100vh;
             font-family: 'Lilita One', cursive;
+            transition: background-color 0.3s ease;
+        }
+
+        body.light-theme {
+            background-color: #e8eef5;
         }
 
         /* --- ANA MODAL --- */
@@ -33,6 +46,15 @@
                 0 8px 25px rgba(0,0,0,0.5),
                 inset 0 1px 0 rgba(255,255,255,0.2);
             overflow: hidden;
+            transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        body.light-theme .modal-container {
+            background: linear-gradient(180deg, #90e0ff 0%, #60c0f8 50%, #50b0e8 100%);
+            border-color: #3060a0;
+            box-shadow:
+                0 8px 25px rgba(0,0,0,0.25),
+                inset 0 1px 0 rgba(255,255,255,0.3);
         }
 
         /* Sunburst Rays */
@@ -72,6 +94,33 @@
             pointer-events: none;
         }
 
+        body.light-theme .sunburst {
+            background: conic-gradient(
+                from 0deg,
+                transparent 0deg 25deg,
+                rgba(255,255,255,0.15) 25deg 35deg,
+                transparent 35deg 60deg,
+                rgba(255,255,255,0.15) 60deg 70deg,
+                transparent 70deg 95deg,
+                rgba(255,255,255,0.15) 95deg 105deg,
+                transparent 105deg 130deg,
+                rgba(255,255,255,0.15) 130deg 140deg,
+                transparent 140deg 165deg,
+                rgba(255,255,255,0.15) 165deg 175deg,
+                transparent 175deg 200deg,
+                rgba(255,255,255,0.15) 200deg 210deg,
+                transparent 210deg 235deg,
+                rgba(255,255,255,0.15) 235deg 245deg,
+                transparent 245deg 270deg,
+                rgba(255,255,255,0.15) 270deg 280deg,
+                transparent 280deg 305deg,
+                rgba(255,255,255,0.15) 305deg 315deg,
+                transparent 315deg 340deg,
+                rgba(255,255,255,0.15) 340deg 350deg,
+                transparent 350deg 360deg
+            );
+        }
+
         @keyframes spin {
             100% { transform: translateX(-50%) rotate(360deg); }
         }
@@ -102,6 +151,17 @@
             flex-grow: 1;
             text-align: center;
             padding-left: 40px;
+            transition: text-shadow 0.3s ease;
+        }
+
+        body.light-theme .title {
+            text-shadow:
+                -2px -2px 0 #2060a0,
+                2px -2px 0 #2060a0,
+                -2px 2px 0 #2060a0,
+                2px 2px 0 #2060a0,
+                3px 3px 0 #2060a0,
+                4px 4px 4px rgba(0,0,0,0.2);
         }
 
         .close-btn {
@@ -129,12 +189,20 @@
                 2px 2px 2px rgba(0,0,0,0.3);
             line-height: 1;
             padding-bottom: 2px;
+            transition: background 0.3s ease, box-shadow 0.3s ease;
         }
 
         .close-btn:hover {
             background: linear-gradient(180deg, #f05868 0%, #b04050 100%);
         }
 
+        body.light-theme .close-btn {
+            background: linear-gradient(180deg, #f05868 0%, #c04050 100%);
+            box-shadow:
+                0 3px 0 #903040,
+                0 5px 8px rgba(0,0,0,0.2);
+        }
+
         /* --- BADGE CONTAINER --- */
         .badge-container {
             position: relative;
@@ -158,9 +226,14 @@
                 0 6px 12px rgba(0,0,0,0.4),
                 inset 0 2px 4px rgba(255,255,255,0.2),
                 inset 0 -2px 4px rgba(0,0,0,0.2);
+            transition: background 0.3s ease;
         }
 
-        /* Kırmızı Yasak Halkası */
+        body.light-theme .badge-base {
+            background: linear-gradient(145deg, #8a9aaa 0%, #6a7a8a 50%, #5a6a7a 100%);
+        }
+
+        /* Kirmizi Yasak Halkasi */
         .prohibition-ring {
             position: absolute;
             width: 130px;
@@ -172,9 +245,18 @@
                 inset 4px 4px 8px rgba(255,150,150,0.5),
                 inset -3px -3px 6px rgba(0,0,0,0.3),
                 0 0 0 3px #b82030;
+            transition: border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        body.light-theme .prohibition-ring {
+            border-color: #f04050;
+            box-shadow:
+                inset 4px 4px 8px rgba(255,180,180,0.6),
+                inset -3px -3px 6px rgba(0,0,0,0.2),
+                0 0 0 3px #d03040;
         }
 
-        /* Çapraz Çizgi */
+        /* Capraz Cizgi */
         .prohibition-line {
             position: absolute;
             width: 120px;
@@ -187,9 +269,14 @@
                 inset 0 3px 3px rgba(255,200,200,0.4),
                 inset 0 -2px 3px rgba(0,0,0,0.2);
             z-index: 1;
+            transition: background 0.3s ease;
+        }
+
+        body.light-theme .prohibition-line {
+            background: linear-gradient(180deg, #ff7080 0%, #f04050 40%, #d83848 100%);
         }
 
-        /* "ADS" Yazısı */
+        /* "ADS" Yazisi */
         .ads-text {
             position: relative;
             z-index: 10;
@@ -205,9 +292,21 @@
                 5px 5px 0 #1a3050,
                 6px 6px 8px rgba(0,0,0,0.5);
             letter-spacing: 1px;
+            transition: text-shadow 0.3s ease;
         }
 
-        /* StarBurst Effect - Framework benzeri yıldız parlamaları */
+        body.light-theme .ads-text {
+            text-shadow:
+                -3px -3px 0 #2a4060,
+                3px -3px 0 #2a4060,
+                -3px 3px 0 #2a4060,
+                3px 3px 0 #2a4060,
+                4px 4px 0 #2a4060,
+                5px 5px 0 #2a4060,
+                6px 6px 8px rgba(0,0,0,0.3);
+        }
+
+        /* StarBurst Effect - Framework benzeri yildiz parlamalari */
         .starburst-container {
             position: absolute;
             width: 200px;
@@ -343,6 +442,11 @@
             border-radius: 16px;
             padding: 12px 14px;
             margin-bottom: 18px;
+            transition: background 0.3s ease;
+        }
+
+        body.light-theme .feature-box {
+            background: rgba(60, 100, 140, 0.4);
         }
 
         .feature-item {
@@ -355,7 +459,7 @@
             margin-bottom: 0;
         }
 
-        /* İkon Container */
+        /* Ikon Container */
         .icon-wrapper {
             position: relative;
             width: 38px;
@@ -375,11 +479,19 @@
             background: linear-gradient(180deg, #5cba47 0%, #3d9a30 100%);
         }
 
+        body.light-theme .icon-green {
+            background: linear-gradient(180deg, #6cca57 0%, #4daa40 100%);
+        }
+
         .icon-purple {
             background: linear-gradient(180deg, #7a6a9a 0%, #5a4a7a 100%);
         }
 
-        /* Mini overlay işaretler */
+        body.light-theme .icon-purple {
+            background: linear-gradient(180deg, #8a7aaa 0%, #6a5a8a 100%);
+        }
+
+        /* Mini overlay isaretler */
         .icon-overlay {
             position: absolute;
             bottom: -2px;
@@ -399,6 +511,16 @@
                 -1px 1px 0 #000,
                 1px 1px 0 #000,
                 2px 2px 3px rgba(0,0,0,0.4);
+            transition: text-shadow 0.3s ease;
+        }
+
+        body.light-theme .feature-text {
+            text-shadow:
+                -1px -1px 0 #2060a0,
+                1px -1px 0 #2060a0,
+                -1px 1px 0 #2060a0,
+                1px 1px 0 #2060a0,
+                2px 2px 3px rgba(0,0,0,0.2);
         }
 
         /* --- CTA BUTTON --- */
@@ -425,7 +547,22 @@
                 2px 2px 0 #000,
                 3px 3px 4px rgba(0,0,0,0.3);
             border: 3px solid #2d7a18;
-            transition: transform 0.1s, box-shadow 0.1s;
+            transition: transform 0.1s, box-shadow 0.1s, background 0.3s ease;
+        }
+
+        body.light-theme .cta-btn {
+            background: linear-gradient(180deg, #b8ff70 0%, #88f840 50%, #70e030 100%);
+            box-shadow:
+                0 5px 0 #3d8a28,
+                0 8px 15px rgba(0,0,0,0.2),
+                inset 0 2px 4px rgba(255,255,255,0.5);
+            border-color: #3d8a28;
+            text-shadow:
+                -2px -2px 0 #206010,
+                2px -2px 0 #206010,
+                -2px 2px 0 #206010,
+                2px 2px 0 #206010,
+                3px 3px 4px rgba(0,0,0,0.2);
         }
 
         .cta-btn:hover {
@@ -442,13 +579,78 @@
     </style>
 </head>
 <body>
+    <script>
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            // 1. Check parent document's data-theme (Docusaurus)
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) {
+                // Cross-origin access denied, fall back to media query
+            }
+
+            // 2. Check URL parameter
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            // 3. Fall back to system preference
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        // Listen for theme changes from parent
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                // Cross-origin, use media query listener instead
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // Apply theme - toggles body class
+        function applyTheme() {
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+        }
+
+        // Initialize theme on load
+        document.addEventListener('DOMContentLoaded', () => {
+            applyTheme();
+            setupThemeListener();
+        });
+    </script>
 
     <div class="modal-container">
         <div class="sunburst"></div>
 
         <div class="header">
             <h1 class="title">NO ADS</h1>
-            <div class="close-btn">✕</div>
+            <div class="close-btn">X</div>
         </div>
 
         <div class="badge-container">
@@ -471,21 +673,21 @@ <h1 class="title">NO ADS</h1>
         <div class="feature-box">
             <div class="feature-item">
                 <div class="icon-wrapper icon-green">
-                    📺
-                    <span class="icon-overlay">⛔</span>
+                    <span style="filter: none;">&#128250;</span>
+                    <span class="icon-overlay">&#9940;</span>
                 </div>
                 <div class="feature-text">Remove all intrusive ads forever!</div>
             </div>
             <div class="feature-item">
                 <div class="icon-wrapper icon-green">
-                    📶
-                    <span class="icon-overlay">✕</span>
+                    <span style="filter: none;">&#128246;</span>
+                    <span class="icon-overlay">X</span>
                 </div>
                 <div class="feature-text">Play without internet connection!</div>
             </div>
             <div class="feature-item">
                 <div class="icon-wrapper icon-purple">
-                    🎬
+                    <span style="filter: none;">&#127916;</span>
                 </div>
                 <div class="feature-text">Keep optional ads for rewards!</div>
             </div>
diff --git a/docs-site/static/demos/no-ads-popup-demo.html b/docs-site/static/demos/no-ads-popup-demo.html
index a82f68e..e69ba17 100644
--- a/docs-site/static/demos/no-ads-popup-demo.html
+++ b/docs-site/static/demos/no-ads-popup-demo.html
@@ -3,10 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>No Ads Popup - Pixel Perfect - GameByte Framework</title>
+    <title>No Ads Popup Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #0f1923; }
+        body { overflow: hidden; background: #0f1923; transition: background 0.3s ease; }
+        body.light-theme { background: #e8eef5; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,30 +16,155 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame } = GameByteFramework;
+        // =====================================================
+        // No Ads Popup Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - Complex modal popup with light rays
+        // - Prohibition badge with sparkle effects
+        // - GameStyleButton-like CTA styling
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const {
+            createGame,
+            graphics,
+            loadFrameworkFont,
+            getFrameworkFontFamily
+        } = GameByteFramework;
+
+        const CONFIG = { width: 390, height: 720 };
+
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
 
-        const CONFIG = {
-            width: 390,
-            height: 720
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                bgDark: 0x0f1923,
+                modalBorder: 0x1e3a5f,
+                modalBg: 0x41A7FB,
+                headerBg: 0x2889F0,
+                panelBg: 0x2484D3,
+                panelBorder: 0x0A5BA1,
+                prohibitRed: 0xe63946,
+                prohibitRedDark: 0xa82d38,
+                prohibitRedLight: 0xf07080,
+                ctaGreen: 0x2DE45A,
+                ctaGreenDark: 0x28A165,
+                closeBtnRed: 0xE84C4C,
+                closeBtnRedDark: 0xA83340,
+                iconGreen: 0x4CAF50,
+                iconPurple: 0x5a6a7a,
+                glowColor: 0xFFFAE6,
+                textStroke: 0x1a2a3a,
+                adsTextStroke: 0x2a4a60
+            },
+            light: {
+                bgDark: 0xe8eef5,
+                modalBorder: 0x3060a0,
+                modalBg: 0x60c0f8,
+                headerBg: 0x50b0e8,
+                panelBg: 0x40a0e0,
+                panelBorder: 0x2080c0,
+                prohibitRed: 0xf04050,
+                prohibitRedDark: 0xc83848,
+                prohibitRedLight: 0xff7080,
+                ctaGreen: 0x40f070,
+                ctaGreenDark: 0x30b060,
+                closeBtnRed: 0xf05868,
+                closeBtnRedDark: 0xc04858,
+                iconGreen: 0x5cbf60,
+                iconPurple: 0x7a8a9a,
+                glowColor: 0xFFF8E0,
+                textStroke: 0x2060a0,
+                adsTextStroke: 0x3a5a70
+            }
         };
 
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage;
+
+        // Sparkle system state
+        let sparkles = [];
+        let sparkleContainer = null;
+        let spawnTimer = 0;
+        let nextSpawnDelay = 200;
+        let badgeCenterX = 0;
+        let badgeCenterY = 0;
+
+        const sparkleConfig = {
+            radius: 75,
+            count: 1,
+            color: 0xFFFFFF,
+            duration: 600,
+            spawnDelayMin: 200,
+            spawnDelayMax: 500,
+            scaleMin: 0.6,
+            scaleMax: 1.0,
+            rotationSpeed: 0.005
+        };
 
-        // ===========================================
-        // TEXT STYLE FACTORY - Tüm yazılar için
-        // ===========================================
+        // Text style factory
         function createTextStyle(fontSize) {
+            const colors = getColors();
             return {
-                fontFamily: 'Arial Black, Arial',
+                fontFamily: getFrameworkFontFamily(),
                 fontSize: fontSize,
                 fontWeight: '900',
                 fill: 0xffffff,
-                stroke: { color: 0x1a2a3a, width: Math.max(3, fontSize * 0.12) },
+                stroke: { color: colors.textStroke, width: Math.max(3, fontSize * 0.12) },
                 dropShadow: {
                     color: 0x000000,
                     blur: 0,
@@ -49,14 +175,123 @@
             };
         }
 
-        (async () => {
-            await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+        // Draw star shape
+        function drawStar(gfx, graphicsObj, spikes, size, color) {
+            graphicsObj.clear();
+            const innerRatio = spikes === 4 ? 0.25 : 0.4;
+            const innerRadius = size * innerRatio;
+            const points = [];
+
+            for (let i = 0; i < spikes * 2; i++) {
+                const radius = i % 2 === 0 ? size : innerRadius;
+                const angle = (i * Math.PI) / spikes - Math.PI / 2;
+                points.push(Math.cos(angle) * radius);
+                points.push(Math.sin(angle) * radius);
+            }
+
+            graphicsObj.poly(points).fill(color);
+        }
+
+        // Sparkle spawn
+        function spawnSparkle(gfx) {
+            if (!sparkleContainer || sparkles.length >= sparkleConfig.count) return;
+
+            const graphic = gfx.createGraphics();
+            const size = 14;
+
+            drawStar(gfx, graphic, 4, size, sparkleConfig.color);
+
+            const angle = Math.random() * Math.PI * 2;
+            const distance = 30 + Math.random() * sparkleConfig.radius;
+
+            graphic.x = badgeCenterX + Math.cos(angle) * distance;
+            graphic.y = badgeCenterY + Math.sin(angle) * distance;
+            graphic.alpha = 0;
+            graphic.scale.set(0);
+
+            sparkleContainer.addChild(graphic);
+
+            const targetScale = sparkleConfig.scaleMin + Math.random() * (sparkleConfig.scaleMax - sparkleConfig.scaleMin);
+
+            sparkles.push({
+                graphic,
+                targetScale,
+                currentScale: 0,
+                rotation: Math.random() * Math.PI * 2,
+                rotationSpeed: sparkleConfig.rotationSpeed,
+                life: 0,
+                maxLife: sparkleConfig.duration,
+                phase: 'spawn'
+            });
+        }
+
+        // Sparkle update
+        function updateSparkles(deltaTime, gfx) {
+            spawnTimer += deltaTime;
+            if (spawnTimer >= nextSpawnDelay) {
+                spawnSparkle(gfx);
+                spawnTimer = 0;
+                nextSpawnDelay = sparkleConfig.spawnDelayMin + Math.random() * (sparkleConfig.spawnDelayMax - sparkleConfig.spawnDelayMin);
+            }
+
+            for (let i = sparkles.length - 1; i >= 0; i--) {
+                const p = sparkles[i];
+                p.life += deltaTime;
+                const progress = p.life / p.maxLife;
+
+                if (progress < 0.15) {
+                    p.phase = 'spawn';
+                } else if (progress < 0.35) {
+                    p.phase = 'hold';
+                } else {
+                    p.phase = 'fade';
+                }
+
+                switch (p.phase) {
+                    case 'spawn': {
+                        const spawnProgress = progress / 0.15;
+                        p.currentScale = p.targetScale * spawnProgress;
+                        p.graphic.alpha = spawnProgress;
+                        break;
+                    }
+                    case 'hold': {
+                        p.currentScale = p.targetScale;
+                        p.graphic.alpha = 1;
+                        break;
+                    }
+                    case 'fade': {
+                        const fadeProgress = (progress - 0.35) / 0.65;
+                        const eased = 1 - fadeProgress;
+                        p.currentScale = p.targetScale * eased;
+                        p.graphic.alpha = eased;
+                        break;
+                    }
+                }
+
+                p.rotation += p.rotationSpeed;
+                p.graphic.scale.set(p.currentScale);
+                p.graphic.rotation = p.rotation;
+
+                if (progress >= 1) {
+                    sparkleContainer.removeChild(p.graphic);
+                    p.graphic.destroy();
+                    sparkles.splice(i, 1);
+                }
+            }
+        }
+
+        function createNoAdsPopup() {
+            const colors = getColors();
+            const gfx = graphics();
+
+            // Clear stage and sparkles
+            while (stage.children.length > 0) {
+                stage.removeChildAt(0);
+            }
+            sparkles = [];
+            spawnTimer = 0;
 
-            // ===========================================
-            // MODAL DIMENSIONS
-            // ===========================================
+            // Modal dimensions
             const modalWidth = 340;
             const modalHeight = 560;
             const modalX = (CONFIG.width - modalWidth) / 2;
@@ -64,46 +299,20 @@
             const modalRadius = 18;
             const borderWidth = 4;
 
-            // ===========================================
-            // COLORS (Resimden çıkarılan)
-            // ===========================================
-            const COLORS = {
-                bgDark: 0x0f1923,
-                modalBorder: 0x1e3a5f,
-                modalBg: 0x41A7FB,
-                headerBorderBottom: 0x4a9cc8,
-                panelBg: 0x2484D3,
-                panelBorder: 0x0A5BA1,
-                prohibitRed: 0xe63946,
-                prohibitRedDark: 0xa82d38,
-                prohibitRedLight: 0xf07080,
-                ctaGreen: 0x7dd860,
-                ctaGreenDark: 0x4a9a35,
-                ctaGreenLight: 0x9de880,
-                closeBtnRed: 0xd94452,
-                closeBtnRedDark: 0xa83340,
-            };
-
-            // ===========================================
-            // BACKGROUND
-            // ===========================================
-            const bg = new PIXI.Graphics();
+            // Background
+            const bg = gfx.createGraphics();
             bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill(COLORS.bgDark);
+            bg.fill(colors.bgDark);
             stage.addChild(bg);
 
-            // ===========================================
-            // MODAL SHADOW
-            // ===========================================
-            const modalShadow = new PIXI.Graphics();
+            // Modal shadow
+            const modalShadow = gfx.createGraphics();
             modalShadow.roundRect(modalX, modalY + 8, modalWidth, modalHeight, modalRadius);
             modalShadow.fill({ color: 0x000000, alpha: 0.4 });
             stage.addChild(modalShadow);
 
-            // ===========================================
-            // MODAL BORDER (Koyu lacivert)
-            // ===========================================
-            const modalBorder = new PIXI.Graphics();
+            // Modal border
+            const modalBorder = gfx.createGraphics();
             modalBorder.roundRect(
                 modalX - borderWidth,
                 modalY - borderWidth,
@@ -111,86 +320,62 @@
                 modalHeight + borderWidth * 2,
                 modalRadius + borderWidth
             );
-            modalBorder.fill(COLORS.modalBorder);
+            modalBorder.fill(colors.modalBorder);
             stage.addChild(modalBorder);
 
-            // ===========================================
-            // MODAL BACKGROUND (Açık mavi)
-            // ===========================================
-            const modalBg = new PIXI.Graphics();
+            // Modal background
+            const modalBg = gfx.createGraphics();
             modalBg.roundRect(modalX, modalY, modalWidth, modalHeight, modalRadius);
-            modalBg.fill(COLORS.modalBg);
+            modalBg.fill(colors.modalBg);
             stage.addChild(modalBg);
 
-            // ===========================================
-            // HEADER
-            // ===========================================
+            // Header
             const headerHeight = 52;
-
-            // Header arka plan (koyu mavi)
-            const headerBg = new PIXI.Graphics();
+            const headerBg = gfx.createGraphics();
             headerBg.roundRect(modalX, modalY, modalWidth, headerHeight, modalRadius);
             headerBg.rect(modalX, modalY + headerHeight - modalRadius, modalWidth, modalRadius);
-            headerBg.fill(0x2889F0);
+            headerBg.fill(colors.headerBg);
             stage.addChild(headerBg);
 
-            // ===========================================
-            // LIGHT RAYS (SUNBURST) - 6 ray, maskelenmiş
-            // ===========================================
-            const raysContainer = new PIXI.Container();
+            // Light rays
+            const raysContainer = gfx.createContainer();
             const raysCenterX = modalX + modalWidth / 2;
-            const raysCenterY = modalY + 200; // Badge merkezi
+            const raysCenterY = modalY + 200;
 
-            // Rays mask - modal içinde, header altında
-            const raysMask = new PIXI.Graphics();
+            const raysMask = gfx.createGraphics();
             raysMask.rect(modalX, modalY + headerHeight, modalWidth, modalHeight * 0.6 - headerHeight);
             raysMask.fill(0xffffff);
             stage.addChild(raysMask);
 
-            // Radial gradient glow (BlurFilter ile smooth)
-            const glowCircle = new PIXI.Graphics();
-            glowCircle.circle(0, 0, 110); // Blur ile yayılacak
-            glowCircle.fill({ color: 0xFFFAE6, alpha: 0.75 }); // Sarımsı, %50 daha kuvvetli
+            const glowCircle = gfx.createGraphics();
+            glowCircle.circle(0, 0, 110);
+            glowCircle.fill({ color: colors.glowColor, alpha: 0.75 });
             glowCircle.x = raysCenterX;
             glowCircle.y = raysCenterY;
             glowCircle.filters = [new PIXI.BlurFilter({ strength: 60, quality: 4 })];
             glowCircle.mask = raysMask;
             stage.addChild(glowCircle);
 
-            // 6 ray, eşit olmayan aralıklar
-            const rayAngles = [0, 58, 120, 178, 240, 300]; // Derece cinsinden, hafif düzensiz
-            const rayWidth = 28; // Her ray'in açısal genişliği (derece)
+            const rayAngles = [0, 58, 120, 178, 240, 300];
+            const rayWidth = 28;
             const rayLength = 220;
 
             for (let i = 0; i < rayAngles.length; i++) {
                 const startAngle = (rayAngles[i] - rayWidth / 2) * Math.PI / 180;
                 const endAngle = (rayAngles[i] + rayWidth / 2) * Math.PI / 180;
 
-                const ray = new PIXI.Graphics();
-
-                // Linear gradient efekti için birden fazla segment
+                const ray = gfx.createGraphics();
                 const segments = 10;
+
                 for (let s = 0; s < segments; s++) {
                     const innerR = (rayLength / segments) * s;
                     const outerR = (rayLength / segments) * (s + 1);
-                    const alpha = 0.35 * (1 - s / segments); // Merkez opak, uç şeffaf
-
-                    ray.moveTo(
-                        Math.cos(startAngle) * innerR,
-                        Math.sin(startAngle) * innerR
-                    );
-                    ray.lineTo(
-                        Math.cos(startAngle) * outerR,
-                        Math.sin(startAngle) * outerR
-                    );
-                    ray.lineTo(
-                        Math.cos(endAngle) * outerR,
-                        Math.sin(endAngle) * outerR
-                    );
-                    ray.lineTo(
-                        Math.cos(endAngle) * innerR,
-                        Math.sin(endAngle) * innerR
-                    );
+                    const alpha = 0.35 * (1 - s / segments);
+
+                    ray.moveTo(Math.cos(startAngle) * innerR, Math.sin(startAngle) * innerR);
+                    ray.lineTo(Math.cos(startAngle) * outerR, Math.sin(startAngle) * outerR);
+                    ray.lineTo(Math.cos(endAngle) * outerR, Math.sin(endAngle) * outerR);
+                    ray.lineTo(Math.cos(endAngle) * innerR, Math.sin(endAngle) * innerR);
                     ray.closePath();
                     ray.fill({ color: 0xffffff, alpha: alpha });
                 }
@@ -202,337 +387,158 @@
             raysContainer.y = raysCenterY;
             raysContainer.mask = raysMask;
             stage.addChild(raysContainer);
+            window.raysContainer = raysContainer;
 
-            // Rays animasyonu
-            game.on('update', () => {
-                raysContainer.rotation += 0.002;
-            });
-
-            // ===========================================
-            // ADS BADGE
-            // ===========================================
-            const badgeCenterX = modalX + modalWidth / 2;
-            const badgeCenterY = modalY + 200;
+            // ADS badge
+            badgeCenterX = modalX + modalWidth / 2;
+            badgeCenterY = modalY + 200;
             const badgeOuterRadius = 80;
             const badgeInnerRadius = 55;
             const stripeWidth = 22;
 
-            // --- Katman 1: Kırmızı Yasak İşareti ---
-
-            // Badge drop shadow (90 derece - sadece Y offset)
-            const badgeShadow = new PIXI.Graphics();
+            // Badge shadow
+            const badgeShadow = gfx.createGraphics();
             badgeShadow.circle(badgeCenterX, badgeCenterY + 6, badgeOuterRadius);
             badgeShadow.fill({ color: 0x000000, alpha: 0.35 });
             stage.addChild(badgeShadow);
 
-            // Prohibition sign container (halka + çizgi tek bütün)
-            const prohibitSign = new PIXI.Container();
+            // Prohibition sign container
+            const prohibitSign = gfx.createContainer();
             prohibitSign.x = badgeCenterX;
             prohibitSign.y = badgeCenterY;
 
-            // Halka kalınlığı
             const ringThickness = badgeOuterRadius - badgeInnerRadius;
             const ringMidRadius = (badgeOuterRadius + badgeInnerRadius) / 2;
 
-            // Halka - dış koyu kenar (stroke ile)
-            const ringOuter = new PIXI.Graphics();
+            // Ring outer
+            const ringOuter = gfx.createGraphics();
             ringOuter.circle(0, 0, ringMidRadius);
-            ringOuter.stroke({ color: COLORS.prohibitRedDark, width: ringThickness + 4 });
+            ringOuter.stroke({ color: colors.prohibitRedDark, width: ringThickness + 4 });
             prohibitSign.addChild(ringOuter);
 
-            // Halka - ana kırmızı (stroke ile)
-            const ringMain = new PIXI.Graphics();
+            // Ring main
+            const ringMain = gfx.createGraphics();
             ringMain.circle(0, 0, ringMidRadius);
-            ringMain.stroke({ color: COLORS.prohibitRed, width: ringThickness - 2 });
+            ringMain.stroke({ color: colors.prohibitRed, width: ringThickness - 2 });
             prohibitSign.addChild(ringMain);
 
-            // Halka - üst highlight (arc ile)
-            const ringHighlight = new PIXI.Graphics();
+            // Ring highlight
+            const ringHighlight = gfx.createGraphics();
             ringHighlight.arc(0, 0, ringMidRadius, -Math.PI * 0.85, -Math.PI * 0.15);
-            ringHighlight.stroke({ color: COLORS.prohibitRedLight, width: ringThickness * 0.4, alpha: 0.6 });
+            ringHighlight.stroke({ color: colors.prohibitRedLight, width: ringThickness * 0.4, alpha: 0.6 });
             prohibitSign.addChild(ringHighlight);
 
-            // Çapraz çizgi - sol üstten sağ alta
-            const stripeAngle = Math.PI / 4; // 45 derece
+            // Stripe
+            const stripeAngle = Math.PI / 4;
             const stripeLength = badgeOuterRadius * 1.6;
 
-            // Çizgi koyu kenar
-            const stripeDark = new PIXI.Graphics();
+            const stripeDark = gfx.createGraphics();
             stripeDark.rect(-stripeLength / 2, -stripeWidth / 2 - 2, stripeLength, stripeWidth + 4);
-            stripeDark.fill(COLORS.prohibitRedDark);
+            stripeDark.fill(colors.prohibitRedDark);
             stripeDark.rotation = stripeAngle;
             prohibitSign.addChild(stripeDark);
 
-            // Çizgi ana
-            const stripeMain = new PIXI.Graphics();
+            const stripeMain = gfx.createGraphics();
             stripeMain.rect(-stripeLength / 2, -stripeWidth / 2, stripeLength, stripeWidth);
-            stripeMain.fill(COLORS.prohibitRed);
+            stripeMain.fill(colors.prohibitRed);
             stripeMain.rotation = stripeAngle;
             prohibitSign.addChild(stripeMain);
 
-            // Çizgi highlight
-            const stripeHighlight = new PIXI.Graphics();
+            const stripeHighlight = gfx.createGraphics();
             stripeHighlight.rect(-stripeLength / 2, -stripeWidth / 2, stripeLength, 5);
-            stripeHighlight.fill({ color: COLORS.prohibitRedLight, alpha: 0.5 });
+            stripeHighlight.fill({ color: colors.prohibitRedLight, alpha: 0.5 });
             stripeHighlight.rotation = stripeAngle;
             prohibitSign.addChild(stripeHighlight);
 
             stage.addChild(prohibitSign);
 
-            // --- Katman 2: Yazı Gölgesi ---
-            const adsTextShadow = new PIXI.Text({
-                text: 'ADS',
-                style: {
-                    fontFamily: 'Arial Black, Impact, Arial',
-                    fontSize: 78,
-                    fontWeight: '900',
-                    fontStyle: 'italic',
-                    fill: 0x000000,
-                }
+            // ADS text shadow
+            const adsTextShadow = gfx.createText('ADS', {
+                fontFamily: getFrameworkFontFamily(),
+                fontSize: 78,
+                fontWeight: '900',
+                fontStyle: 'italic',
+                fill: 0x000000
             });
             adsTextShadow.anchor.set(0.5);
             adsTextShadow.x = badgeCenterX;
             adsTextShadow.y = badgeCenterY + 5;
-            adsTextShadow.rotation = -20 * Math.PI / 180; // 20 derece sola
+            adsTextShadow.rotation = -20 * Math.PI / 180;
             adsTextShadow.alpha = 0.4;
             stage.addChild(adsTextShadow);
 
-            // --- Katman 3: "ADS" Yazısı (EN ÜST) ---
-            const adsText = new PIXI.Text({
-                text: 'ADS',
-                style: {
-                    fontFamily: 'Arial Black, Impact, Arial',
-                    fontSize: 78,
-                    fontWeight: '900',
-                    fontStyle: 'italic',
-                    fill: 0xffffff,
-                    stroke: { color: 0x2a4a60, width: 7 },
-                }
+            // ADS text
+            const adsText = gfx.createText('ADS', {
+                fontFamily: getFrameworkFontFamily(),
+                fontSize: 78,
+                fontWeight: '900',
+                fontStyle: 'italic',
+                fill: 0xffffff,
+                stroke: { color: colors.adsTextStroke, width: 7 }
             });
             adsText.anchor.set(0.5);
             adsText.x = badgeCenterX;
             adsText.y = badgeCenterY;
-            adsText.rotation = -20 * Math.PI / 180; // 20 derece sola
+            adsText.rotation = -20 * Math.PI / 180;
             stage.addChild(adsText);
 
-            // ===========================================
-            // STARBURST SPARKLE EFFECT
-            // ===========================================
-            const sparkleContainer = new PIXI.Container();
+            // Sparkle container
+            sparkleContainer = gfx.createContainer();
             stage.addChild(sparkleContainer);
 
-            const sparkleConfig = {
-                radius: 75,              // Badge etrafındaki alan
-                count: 1,                // Teker teker çıksın
-                color: 0xFFFFFF,         // Sadece beyaz
-                duration: 600,           // ms - %50 daha uzun
-                spawnDelayMin: 200,
-                spawnDelayMax: 500,
-                scaleMin: 0.6,
-                scaleMax: 1.0,           // Biraz daha büyük
-                rotationSpeed: 0.005     // Çok yavaş dönüş
-            };
-
-            const sparkles = [];
-            let spawnTimer = 0;
-            let nextSpawnDelay = sparkleConfig.spawnDelayMin + Math.random() * (sparkleConfig.spawnDelayMax - sparkleConfig.spawnDelayMin);
-
-            // Yıldız çizme fonksiyonu
-            function drawStar(graphics, spikes, size, color) {
-                graphics.clear();
-                const innerRatio = spikes === 4 ? 0.25 : 0.4;
-                const innerRadius = size * innerRatio;
-                const points = [];
-
-                for (let i = 0; i < spikes * 2; i++) {
-                    const radius = i % 2 === 0 ? size : innerRadius;
-                    const angle = (i * Math.PI) / spikes - Math.PI / 2;
-                    points.push(Math.cos(angle) * radius);
-                    points.push(Math.sin(angle) * radius);
-                }
-
-                graphics.poly(points).fill(color);
-            }
-
-            // Sparkle spawn
-            function spawnSparkle() {
-                if (sparkles.length >= sparkleConfig.count) return;
-
-                const graphic = new PIXI.Graphics();
-                const size = 14;  // Biraz daha büyük
-
-                // Sadece 4 kollu beyaz yıldız
-                drawStar(graphic, 4, size, sparkleConfig.color);
-
-                // Random pozisyon (badge etrafında)
-                const angle = Math.random() * Math.PI * 2;
-                const distance = 30 + Math.random() * sparkleConfig.radius;
-
-                graphic.x = badgeCenterX + Math.cos(angle) * distance;
-                graphic.y = badgeCenterY + Math.sin(angle) * distance;
-                graphic.alpha = 0;
-                graphic.scale.set(0);
-
-                sparkleContainer.addChild(graphic);
-
-                const targetScale = sparkleConfig.scaleMin + Math.random() * (sparkleConfig.scaleMax - sparkleConfig.scaleMin);
-
-                sparkles.push({
-                    graphic,
-                    targetScale,
-                    currentScale: 0,
-                    rotation: Math.random() * Math.PI * 2,
-                    rotationSpeed: sparkleConfig.rotationSpeed,
-                    life: 0,
-                    maxLife: sparkleConfig.duration,
-                    phase: 'spawn'
-                });
-            }
-
-            // Easing fonksiyonları
-            function easeOutBack(t) {
-                const c1 = 1.70158;
-                const c3 = c1 + 1;
-                return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
-            }
-
-            function easeInQuad(t) {
-                return t * t;
-            }
-
-            // Sparkle güncelleme
-            function updateSparkles(deltaTime) {
-                // Spawn timer
-                spawnTimer += deltaTime;
-                if (spawnTimer >= nextSpawnDelay) {
-                    spawnSparkle();
-                    spawnTimer = 0;
-                    nextSpawnDelay = sparkleConfig.spawnDelayMin + Math.random() * (sparkleConfig.spawnDelayMax - sparkleConfig.spawnDelayMin);
-                }
-
-                // Update particles
-                for (let i = sparkles.length - 1; i >= 0; i--) {
-                    const p = sparkles[i];
-                    p.life += deltaTime;
-                    const progress = p.life / p.maxLife;
-
-                    // Phase belirleme - hızlı büyü, hızlı küçül
-                    if (progress < 0.15) {
-                        p.phase = 'spawn';
-                    } else if (progress < 0.35) {
-                        p.phase = 'hold';
-                    } else {
-                        p.phase = 'fade';
-                    }
-
-                    // Phase'e göre güncelleme
-                    switch (p.phase) {
-                        case 'spawn': {
-                            // Hızlı büyüme
-                            const spawnProgress = progress / 0.15;
-                            p.currentScale = p.targetScale * spawnProgress;
-                            p.graphic.alpha = spawnProgress;
-                            break;
-                        }
-                        case 'hold': {
-                            // Kısa tutma
-                            p.currentScale = p.targetScale;
-                            p.graphic.alpha = 1;
-                            break;
-                        }
-                        case 'fade': {
-                            // Hızlı küçülme + fade
-                            const fadeProgress = (progress - 0.35) / 0.65;
-                            const eased = 1 - fadeProgress;
-                            p.currentScale = p.targetScale * eased;
-                            p.graphic.alpha = eased;
-                            break;
-                        }
-                    }
-
-                    // Rotation
-                    p.rotation += p.rotationSpeed;
-
-                    // Apply
-                    p.graphic.scale.set(p.currentScale);
-                    p.graphic.rotation = p.rotation;
-
-                    // Remove dead
-                    if (progress >= 1) {
-                        sparkleContainer.removeChild(p.graphic);
-                        p.graphic.destroy();
-                        sparkles.splice(i, 1);
-                    }
-                }
-            }
-
-            // ===========================================
-            // FEATURE PANEL
-            // ===========================================
+            // Feature panel
             const panelX = modalX + 18;
             const panelY = modalY + 320;
             const panelWidth = modalWidth - 36;
-            const panelHeight = 152; // Alt boşluk 2x
+            const panelHeight = 152;
             const panelRadius = 14;
 
-            // Panel background
-            const featurePanel = new PIXI.Graphics();
+            const featurePanel = gfx.createGraphics();
             featurePanel.roundRect(panelX, panelY, panelWidth, panelHeight, panelRadius);
-            featurePanel.fill(COLORS.panelBg);
+            featurePanel.fill(colors.panelBg);
             stage.addChild(featurePanel);
 
-            // Panel border
-            const panelBorderG = new PIXI.Graphics();
+            const panelBorderG = gfx.createGraphics();
             panelBorderG.roundRect(panelX, panelY, panelWidth, panelHeight, panelRadius);
-            panelBorderG.stroke({ color: COLORS.panelBorder, width: 2 });
+            panelBorderG.stroke({ color: colors.panelBorder, width: 2 });
             stage.addChild(panelBorderG);
 
-            // ===========================================
-            // FEATURE LIST
-            // ===========================================
+            // Feature list
             const features = [
-                { icon: '📺', text: 'Remove all intrusive ads\nforever!', iconBg: 0x4CAF50, hasBlock: true },
-                { icon: '📶', text: 'Play without internet\nconnection!', iconBg: 0x4CAF50, hasX: true },
-                { icon: '🎬', text: 'Keep optional ads for\nrewards!', iconBg: 0x5a6a7a }
+                { icon: '\ud83d\udcfa', text: 'Remove all intrusive ads\nforever!', iconBg: colors.iconGreen, hasBlock: true },
+                { icon: '\ud83d\udcf6', text: 'Play without internet\nconnection!', iconBg: colors.iconGreen, hasX: true },
+                { icon: '\ud83c\udfac', text: 'Keep optional ads for\nrewards!', iconBg: colors.iconPurple }
             ];
 
-            const featureStartY = panelY + 11; // Üst ve alt eşit boşluk
+            const featureStartY = panelY + 11;
             const featureSpacing = 42;
 
             features.forEach((feature, i) => {
                 const y = featureStartY + i * featureSpacing;
 
-                // İkon arka plan
-                const iconBg = new PIXI.Graphics();
+                const iconBg = gfx.createGraphics();
                 iconBg.roundRect(panelX + 12, y, 34, 34, 8);
                 iconBg.fill(feature.iconBg);
                 stage.addChild(iconBg);
 
-                // İkon
-                const icon = new PIXI.Text({
-                    text: feature.icon,
-                    style: { fontSize: 20 }
-                });
+                const icon = gfx.createText(feature.icon, { fontSize: 20 });
                 icon.anchor.set(0.5);
                 icon.x = panelX + 29;
                 icon.y = y + 17;
                 stage.addChild(icon);
 
-                // Block/X overlay
                 if (feature.hasBlock) {
-                    const block = new PIXI.Text({
-                        text: '⛔',
-                        style: { fontSize: 12 }
-                    });
+                    const block = gfx.createText('\u26d4', { fontSize: 12 });
                     block.anchor.set(0.5);
                     block.x = panelX + 38;
                     block.y = y + 26;
                     stage.addChild(block);
                 }
                 if (feature.hasX) {
-                    const xMark = new PIXI.Text({
-                        text: '✕',
-                        style: { fontSize: 12, fill: 0xe63946, fontWeight: 'bold' }
+                    const xMark = gfx.createText('\u2715', {
+                        fontSize: 12,
+                        fill: colors.prohibitRed,
+                        fontWeight: 'bold'
                     });
                     xMark.anchor.set(0.5);
                     xMark.x = panelX + 40;
@@ -540,26 +546,20 @@
                     stage.addChild(xMark);
                 }
 
-                // Feature text (shadow yok)
-                const featureText = new PIXI.Text({
-                    text: feature.text,
-                    style: {
-                        fontFamily: 'Arial Black, Arial',
-                        fontSize: 15,
-                        fontWeight: '900',
-                        fill: 0xffffff,
-                        stroke: { color: 0x1a2a3a, width: 3 },
-                        lineHeight: 18
-                    }
+                const featureText = gfx.createText(feature.text, {
+                    fontFamily: getFrameworkFontFamily(),
+                    fontSize: 15,
+                    fontWeight: '900',
+                    fill: 0xffffff,
+                    stroke: { color: colors.textStroke, width: 3 },
+                    lineHeight: 18
                 });
                 featureText.x = panelX + 55;
                 featureText.y = y + 2;
                 stage.addChild(featureText);
             });
 
-            // ===========================================
-            // CTA BUTTON
-            // ===========================================
+            // CTA Button
             const ctaWidth = 240;
             const ctaHeight = 58;
             const ctaX = modalX + (modalWidth - ctaWidth) / 2;
@@ -567,39 +567,36 @@
             const ctaRadius = 14;
             const shadowOffset = 3;
 
-            // 1. Black border (tüm butonu çerçeveleyen - shadow dahil, 1px)
-            const ctaOuterBorder = new PIXI.Graphics();
+            const ctaOuterBorder = gfx.createGraphics();
             ctaOuterBorder.roundRect(ctaX - 1, ctaY - 1, ctaWidth + 2, ctaHeight + shadowOffset + 2, ctaRadius + 1);
             ctaOuterBorder.stroke({ color: 0x000000, width: 1 });
             stage.addChild(ctaOuterBorder);
 
-            // 2. Shadow (alt kısım - yeşil)
-            const ctaShadow = new PIXI.Graphics();
+            const ctaShadow = gfx.createGraphics();
             ctaShadow.roundRect(ctaX, ctaY + shadowOffset, ctaWidth, ctaHeight, ctaRadius);
-            ctaShadow.fill(0x28A165);
+            ctaShadow.fill(colors.ctaGreenDark);
             stage.addChild(ctaShadow);
 
-            // 2.5. Top shine (üst parlaklık - border içinde kalacak, %60 opak)
-            const ctaTopShine = new PIXI.Graphics();
+            const ctaTopShine = gfx.createGraphics();
             ctaTopShine.roundRect(ctaX + 0.5, ctaY - 0.5, ctaWidth - 1, ctaHeight, ctaRadius);
             ctaTopShine.fill({ color: 0xFFFFFF, alpha: 0.60 });
             stage.addChild(ctaTopShine);
 
-            // 3. Button main (ana yüzey - yeşil)
-            const ctaBtn = new PIXI.Graphics();
+            const ctaBtn = gfx.createGraphics();
             ctaBtn.roundRect(ctaX, ctaY, ctaWidth, ctaHeight, ctaRadius);
-            ctaBtn.fill(0x2DE45A);
+            ctaBtn.fill(colors.ctaGreen);
             ctaBtn.eventMode = 'static';
             ctaBtn.cursor = 'pointer';
             stage.addChild(ctaBtn);
 
-            // 4. Highlight (parlama efekti - üst köşeler yuvarlak, alt keskin)
-            const ctaHighlightTop = new PIXI.Graphics();
+            // CTA highlight
             const hlX = ctaX + 3;
             const hlY = ctaY + 3;
             const hlW = ctaWidth - 6;
             const hlH = ctaHeight * 0.45;
             const hlR = ctaRadius - 2;
+
+            const ctaHighlightTop = gfx.createGraphics();
             ctaHighlightTop.moveTo(hlX + hlR, hlY);
             ctaHighlightTop.lineTo(hlX + hlW - hlR, hlY);
             ctaHighlightTop.arc(hlX + hlW - hlR, hlY + hlR, hlR, -Math.PI / 2, 0);
@@ -611,8 +608,8 @@
             ctaHighlightTop.fill({ color: 0xFFFFFF, alpha: 0.25 });
             stage.addChild(ctaHighlightTop);
 
-            // 5. Jellybean efekti (sol üst köşe - #E6FCE9, küçük, 25° sola eğik)
-            const ctaJellybean = new PIXI.Graphics();
+            // CTA jellybean
+            const ctaJellybean = gfx.createGraphics();
             ctaJellybean.ellipse(0, 0, 3.5, 2.6);
             ctaJellybean.fill(0xE6FCE9);
             ctaJellybean.x = ctaX + 10;
@@ -620,78 +617,56 @@
             ctaJellybean.rotation = -25 * Math.PI / 180;
             stage.addChild(ctaJellybean);
 
-            // Button text
-            const ctaText = new PIXI.Text({
-                text: 'TRY 399.99',
-                style: createTextStyle(28)
-            });
+            const ctaText = gfx.createText('TRY 399.99', createTextStyle(28));
             ctaText.anchor.set(0.5);
             ctaText.x = ctaX + ctaWidth / 2;
             ctaText.y = ctaY + ctaHeight / 2;
             stage.addChild(ctaText);
 
-            // ===========================================
-            // HEADER TEXT - "NO ADS"
-            // ===========================================
-            const headerText = new PIXI.Text({
-                text: 'NO ADS',
-                style: createTextStyle(30)
-            });
+            // Header text
+            const headerText = gfx.createText('NO ADS', createTextStyle(30));
             headerText.anchor.set(0.5);
-            headerText.x = modalX + modalWidth / 2; // Header'ı tam ortala
+            headerText.x = modalX + modalWidth / 2;
             headerText.y = modalY + headerHeight / 2;
             stage.addChild(headerText);
 
-            // ===========================================
-            // CLOSE BUTTON (Standart buton stili - kırmızı)
-            // ===========================================
+            // Close button
             const closeBtnSize = 38;
             const closeBtnX = modalX + modalWidth - closeBtnSize - 8;
             const closeBtnY = modalY + (headerHeight - closeBtnSize) / 2;
             const closeBtnRadius = 10;
             const closeShadowOffset = 3;
 
-            // Close button colors
-            const closeColors = {
-                main: 0xE84C4C,
-                shadow: 0xA83340,
-                jellybean: 0xFFE6E6
-            };
-
-            // 1. Black outer border
-            const closeOuterBorder = new PIXI.Graphics();
+            const closeOuterBorder = gfx.createGraphics();
             closeOuterBorder.roundRect(closeBtnX - 1, closeBtnY - 1, closeBtnSize + 2, closeBtnSize + closeShadowOffset + 2, closeBtnRadius + 1);
             closeOuterBorder.stroke({ color: 0x000000, width: 1 });
             stage.addChild(closeOuterBorder);
 
-            // 2. Shadow (kırmızı depth)
-            const closeShadow = new PIXI.Graphics();
+            const closeShadow = gfx.createGraphics();
             closeShadow.roundRect(closeBtnX, closeBtnY + closeShadowOffset, closeBtnSize, closeBtnSize, closeBtnRadius);
-            closeShadow.fill(closeColors.shadow);
+            closeShadow.fill(colors.closeBtnRedDark);
             stage.addChild(closeShadow);
 
-            // 3. Top shine
-            const closeTopShine = new PIXI.Graphics();
+            const closeTopShine = gfx.createGraphics();
             closeTopShine.roundRect(closeBtnX + 0.5, closeBtnY - 0.5, closeBtnSize - 1, closeBtnSize, closeBtnRadius);
             closeTopShine.fill({ color: 0xFFFFFF, alpha: 0.60 });
             stage.addChild(closeTopShine);
 
-            // 4. Main button
-            const closeBtn = new PIXI.Graphics();
+            const closeBtn = gfx.createGraphics();
             closeBtn.roundRect(closeBtnX, closeBtnY, closeBtnSize, closeBtnSize, closeBtnRadius);
-            closeBtn.fill(closeColors.main);
+            closeBtn.fill(colors.closeBtnRed);
             closeBtn.eventMode = 'static';
             closeBtn.cursor = 'pointer';
             stage.addChild(closeBtn);
 
-            // 5. Highlight (üst kısım, yuvarlak üst, keskin alt)
+            // Close highlight
             const closeHlX = closeBtnX + 3;
             const closeHlY = closeBtnY + 3;
             const closeHlW = closeBtnSize - 6;
             const closeHlH = closeBtnSize * 0.45;
             const closeHlR = closeBtnRadius - 2;
 
-            const closeHighlight = new PIXI.Graphics();
+            const closeHighlight = gfx.createGraphics();
             closeHighlight.moveTo(closeHlX + closeHlR, closeHlY);
             closeHighlight.lineTo(closeHlX + closeHlW - closeHlR, closeHlY);
             closeHighlight.arc(closeHlX + closeHlW - closeHlR, closeHlY + closeHlR, closeHlR, -Math.PI / 2, 0);
@@ -703,55 +678,79 @@
             closeHighlight.fill({ color: 0xFFFFFF, alpha: 0.25 });
             stage.addChild(closeHighlight);
 
-            // 6. Jellybean
-            const closeJellybean = new PIXI.Graphics();
+            // Close jellybean
+            const closeJellybean = gfx.createGraphics();
             closeJellybean.ellipse(0, 0, 3, 2.2);
-            closeJellybean.fill(closeColors.jellybean);
+            closeJellybean.fill(0xFFE6E6);
             closeJellybean.x = closeBtnX + 9;
             closeJellybean.y = closeBtnY + 8;
             closeJellybean.rotation = -25 * Math.PI / 180;
             stage.addChild(closeJellybean);
 
-            // 7. X text
-            const closeX = new PIXI.Text({
-                text: '✕',
-                style: {
-                    fontFamily: 'Arial Black, Arial',
-                    fontSize: 20,
-                    fontWeight: '900',
-                    fill: 0xffffff,
-                    stroke: { color: 0x000000, width: 1 }
-                }
+            const closeX = gfx.createText('\u2715', {
+                fontFamily: getFrameworkFontFamily(),
+                fontSize: 20,
+                fontWeight: '900',
+                fill: 0xffffff,
+                stroke: { color: 0x000000, width: 1 }
             });
             closeX.anchor.set(0.5);
             closeX.x = closeBtnX + closeBtnSize / 2;
             closeX.y = closeBtnY + closeBtnSize / 2;
             stage.addChild(closeX);
 
-            // ===========================================
-            // INTERACTIONS
-            // ===========================================
-            closeBtn.on('pointerdown', () => {
-                console.log('Close clicked');
-            });
+            // Interactions
+            closeBtn.on('pointerdown', () => console.log('Close clicked'));
+            ctaBtn.on('pointerdown', () => console.log('Purchase clicked: TRY 399.99'));
 
-            ctaBtn.on('pointerdown', () => {
-                console.log('Purchase clicked: TRY 399.99');
-            });
+            // Store gfx for animation
+            window.gfx = gfx;
+        }
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
 
-            // ===========================================
-            // ANIMATION LOOP
-            // ===========================================
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createNoAdsPopup) {
+                await loadFrameworkFont();
+                window.createNoAdsPopup();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
+
+        (async () => {
+            await loadFrameworkFont();
+            await game.initialize(canvas, '2d');
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
+
+            setupThemeListener();
+
+            window.createNoAdsPopup = createNoAdsPopup;
+
+            // Animation loop
             let lastTime = performance.now();
             function animate() {
                 const now = performance.now();
                 const deltaTime = now - lastTime;
                 lastTime = now;
 
-                updateSparkles(deltaTime);
+                // Rays rotation
+                if (window.raysContainer) {
+                    window.raysContainer.rotation += 0.002;
+                }
+
+                if (window.gfx) {
+                    updateSparkles(deltaTime, window.gfx);
+                }
+
                 requestAnimationFrame(animate);
             }
 
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createNoAdsPopup();
             game.start();
             animate();
         })();
diff --git a/docs-site/static/demos/result-screen-demo.html b/docs-site/static/demos/result-screen-demo.html
index b18fe45..3eaf7dd 100644
--- a/docs-site/static/demos/result-screen-demo.html
+++ b/docs-site/static/demos/result-screen-demo.html
@@ -6,7 +6,8 @@
     <title>ResultScreen Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #1c2333; }
+        body { overflow: hidden; background: #1c2333; transition: background 0.3s ease; }
+        body.light-theme { background: #e8eef5; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,58 +16,132 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame, CelebrationManager } = GameByteFramework;
+        // =====================================================
+        // ResultScreen Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - Victory/Result screen with trophy and rewards
+        // - Light rays and glow effects
+        // - CelebrationManager for confetti
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const {
+            createGame,
+            CelebrationManager,
+            graphics,
+            loadFrameworkFont
+        } = GameByteFramework;
 
         const CONFIG = { width: 360, height: 700 };
 
-        // Pixel-perfect color palette from reference
-        const COLORS = {
-            // Background
-            darkBg: 0x1c2333,
-
-            // Light rays
-            rayColor: 0x2a3f5f,
-            rayAlpha: 0.35,
-
-            // Trophy glow (olive-yellow tones)
-            glowOuter: 0xa5a845,
-            glowMiddle: 0xb8b850,
-            glowInner: 0xd4d870,
-
-            // Main panel
-            panelBg: 0x4a7ab5,
-            panelBorder: 0x2a4a75,
-            panelGradientTop: 0x5a8ac5,
-            panelGradientBottom: 0x3a6a95,
-
-            // Banner
-            bannerBlue: 0x5ab0e8,
-            bannerLight: 0x7ac8f8,
-            bannerDark: 0x3a90c8,
-
-            // Reward panel
-            rewardPanelBg: 0x5a8ab8,
-            rewardPanelBorder: 0x3a5a85,
-
-            // Buttons
-            greenBtn: 0x6ac46a,
-            greenBtnShadow: 0x3a8a3a,
-            greenBtnHighlight: 0x8ae88a,
-
-            orangeBtn: 0xe8c878,
-            orangeBtnShadow: 0xc8a050,
-            orangeBtnHighlight: 0xf8e0a0,
-
-            // Text
-            textWhite: 0xffffff,
-            textOutline: 0x2a4a6a,
-            textDark: 0x4a5a6a,
-
-            // Coin display
-            coinDisplayBg: 0x3a4a6a,
-            plusButton: 0xe8a040
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                darkBg: 0x1c2333,
+                rayColor: 0x2a3f5f,
+                rayAlpha: 0.35,
+                glowOuter: 0xa5a845,
+                glowMiddle: 0xb8b850,
+                glowInner: 0xd4d870,
+                panelBg: 0x4a7ab5,
+                panelBorder: 0x2a4a75,
+                panelGradientBottom: 0x3a6a95,
+                bannerBlue: 0x5ab0e8,
+                bannerLight: 0x7ac8f8,
+                bannerDark: 0x3a90c8,
+                rewardPanelBg: 0x5a8ab8,
+                rewardPanelBorder: 0x3a5a85,
+                greenBtn: 0x6ac46a,
+                greenBtnShadow: 0x3a8a3a,
+                greenBtnHighlight: 0x8ae88a,
+                orangeBtn: 0xe8c878,
+                orangeBtnShadow: 0xc8a050,
+                orangeBtnHighlight: 0xf8e0a0,
+                textWhite: 0xffffff,
+                textOutline: 0x2a4a6a,
+                textDark: 0x4a5a6a,
+                coinDisplayBg: 0x3a4a6a,
+                plusButton: 0xe8a040
+            },
+            light: {
+                darkBg: 0xe8eef5,
+                rayColor: 0xc5d5e8,
+                rayAlpha: 0.5,
+                glowOuter: 0xf5d060,
+                glowMiddle: 0xffd700,
+                glowInner: 0xffec80,
+                panelBg: 0x6a9fd8,
+                panelBorder: 0x4a7ab5,
+                panelGradientBottom: 0x5a90c8,
+                bannerBlue: 0x60b8f0,
+                bannerLight: 0x90d0ff,
+                bannerDark: 0x4a98d0,
+                rewardPanelBg: 0x7aa8d0,
+                rewardPanelBorder: 0x5a88b8,
+                greenBtn: 0x5cb85c,
+                greenBtnShadow: 0x449d44,
+                greenBtnHighlight: 0x8cd98c,
+                orangeBtn: 0xf5d070,
+                orangeBtnShadow: 0xd4a840,
+                orangeBtnHighlight: 0xffe8a0,
+                textWhite: 0xffffff,
+                textOutline: 0x3a5a7a,
+                textDark: 0x3a4a5a,
+                coinDisplayBg: 0x5a7a9a,
+                plusButton: 0xf0a830
+            }
         };
 
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
@@ -74,27 +149,26 @@
 
         const game = createGame();
         let celebration = null;
+        let renderer, stage;
 
         // ===== LIGHT RAYS HELPER =====
-        // Creates trapezoid-shaped light rays (not triangles!)
-        function createLightRays(config) {
-            const container = new PIXI.Container();
+        function createLightRays(gfx, config) {
+            const colors = getColors();
+            const container = gfx.createContainer();
             const {
                 rayCount = 16,
                 innerRadius = 20,
                 outerRadius = 350,
-                innerWidth = 0.08,  // Angular width at center (radians)
-                outerWidth = 0.12,  // Angular width at edge (radians)
-                color = COLORS.rayColor,
-                alpha = COLORS.rayAlpha
+                innerWidth = 0.08,
+                outerWidth = 0.12,
+                color = colors.rayColor,
+                alpha = colors.rayAlpha
             } = config;
 
             for (let i = 0; i < rayCount; i++) {
                 const angle = (i / rayCount) * Math.PI * 2;
+                const ray = gfx.createGraphics();
 
-                const ray = new PIXI.Graphics();
-
-                // Trapezoid points (clockwise from inner-left)
                 const innerLeft = {
                     x: Math.cos(angle - innerWidth / 2) * innerRadius,
                     y: Math.sin(angle - innerWidth / 2) * innerRadius
@@ -126,51 +200,46 @@
         }
 
         // ===== MULTI-LAYER GLOW HELPER =====
-        function createGlow() {
-            const container = new PIXI.Container();
+        function createGlow(gfx) {
+            const colors = getColors();
+            const container = gfx.createContainer();
 
-            // Outer glow layer
-            const outer = new PIXI.Graphics();
+            const outer = gfx.createGraphics();
             outer.circle(0, 0, 100);
-            outer.fill({ color: COLORS.glowOuter, alpha: 0.25 });
+            outer.fill({ color: colors.glowOuter, alpha: 0.25 });
             container.addChild(outer);
 
-            // Middle glow layer
-            const middle = new PIXI.Graphics();
+            const middle = gfx.createGraphics();
             middle.circle(0, 0, 70);
-            middle.fill({ color: COLORS.glowMiddle, alpha: 0.5 });
+            middle.fill({ color: colors.glowMiddle, alpha: 0.5 });
             container.addChild(middle);
 
-            // Inner glow layer (brightest)
-            const inner = new PIXI.Graphics();
+            const inner = gfx.createGraphics();
             inner.circle(0, 0, 50);
-            inner.fill({ color: COLORS.glowInner, alpha: 0.8 });
+            inner.fill({ color: colors.glowInner, alpha: 0.8 });
             container.addChild(inner);
 
             return container;
         }
 
         // ===== 3D BUTTON HELPER =====
-        function create3DButton(x, y, width, height, config) {
-            const container = new PIXI.Container();
+        function create3DButton(gfx, x, y, width, height, config) {
+            const container = gfx.createContainer();
             const { mainColor, shadowColor, highlightColor } = config;
 
-            // Shadow layer (bottom)
-            const shadow = new PIXI.Graphics();
+            const shadow = gfx.createGraphics();
             shadow.roundRect(x, y + 4, width, height, 12);
             shadow.fill(shadowColor);
             container.addChild(shadow);
 
-            // Main button
-            const btn = new PIXI.Graphics();
+            const btn = gfx.createGraphics();
             btn.roundRect(x, y, width, height, 12);
             btn.fill(mainColor);
             btn.eventMode = 'static';
             btn.cursor = 'pointer';
             container.addChild(btn);
 
-            // Highlight layer (top)
-            const highlight = new PIXI.Graphics();
+            const highlight = gfx.createGraphics();
             highlight.roundRect(x + 5, y + 3, width - 10, 15, 8);
             highlight.fill({ color: highlightColor, alpha: 0.4 });
             container.addChild(highlight);
@@ -179,15 +248,33 @@
             return container;
         }
 
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createVictoryScreen) {
+                await loadFrameworkFont();
+                window.createVictoryScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
+
         (async () => {
+            await loadFrameworkFont();
             await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
 
             celebration = new CelebrationManager(stage, CONFIG.width, CONFIG.height);
 
+            setupThemeListener();
+
             function createVictoryScreen() {
-                // Clear stage
+                const colors = getColors();
+                const gfx = graphics();
+
                 while (stage.children.length > 0) {
                     stage.removeChildAt(0);
                 }
@@ -195,16 +282,15 @@
 
                 const centerX = CONFIG.width / 2;
 
-                // ===== DARK BACKGROUND =====
-                const bg = new PIXI.Graphics();
+                // Background
+                const bg = gfx.createGraphics();
                 bg.rect(0, 0, CONFIG.width, CONFIG.height);
-                bg.fill(COLORS.darkBg);
+                bg.fill(colors.darkBg);
                 stage.addChild(bg);
 
-                // ===== TROPHY LIGHT RAYS (Behind everything, very long!) =====
+                // Trophy light rays
                 const trophyY = 110;
-
-                const trophyRays = createLightRays({
+                const trophyRays = createLightRays(gfx, {
                     rayCount: 16,
                     innerRadius: 15,
                     outerRadius: 350,
@@ -215,218 +301,191 @@
                 trophyRays.y = trophyY + 40;
                 stage.addChild(trophyRays);
 
-                // Animate rays slowly
                 game.on('update', () => {
                     trophyRays.rotation += 0.002;
                 });
 
-                // ===== TROPHY GLOW (3-layer olive-yellow) =====
-                const trophyGlow = createGlow();
+                // Trophy glow
+                const trophyGlow = createGlow(gfx);
                 trophyGlow.x = centerX;
                 trophyGlow.y = trophyY + 40;
                 stage.addChild(trophyGlow);
 
-                // ===== TOP RIGHT COIN DISPLAY =====
-                const coinDisplay = new PIXI.Container();
+                // Top right coin display
+                const coinDisplay = gfx.createContainer();
                 coinDisplay.x = CONFIG.width - 80;
                 coinDisplay.y = 25;
                 stage.addChild(coinDisplay);
 
-                // Pill background
-                const coinBg = new PIXI.Graphics();
+                const coinBg = gfx.createGraphics();
                 coinBg.roundRect(-50, -15, 100, 30, 15);
-                coinBg.fill(COLORS.coinDisplayBg);
+                coinBg.fill(colors.coinDisplayBg);
                 coinDisplay.addChild(coinBg);
 
-                // Coin icon
-                const coinIcon = new PIXI.Text({ text: '🪙', style: { fontSize: 22 } });
+                const coinIcon = gfx.createText('\u{1FA99}', { fontSize: 22 });
                 coinIcon.anchor.set(0.5);
                 coinIcon.x = -32;
                 coinDisplay.addChild(coinIcon);
 
-                // Amount text
-                const coinAmount = new PIXI.Text({
-                    text: '1460',
-                    style: { fontFamily: 'Arial', fontSize: 16, fontWeight: 'bold', fill: COLORS.textWhite }
+                const coinAmount = gfx.createText('1460', {
+                    fontSize: 16,
+                    fontWeight: 'bold',
+                    fill: colors.textWhite
                 });
                 coinAmount.anchor.set(0, 0.5);
                 coinAmount.x = -16;
                 coinDisplay.addChild(coinAmount);
 
-                // Plus button (orange circle)
-                const plusBtn = new PIXI.Graphics();
+                const plusBtn = gfx.createGraphics();
                 plusBtn.circle(35, 0, 12);
-                plusBtn.fill(COLORS.plusButton);
+                plusBtn.fill(colors.plusButton);
                 coinDisplay.addChild(plusBtn);
 
-                const plusText = new PIXI.Text({
-                    text: '+',
-                    style: { fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold', fill: COLORS.textWhite }
+                const plusText = gfx.createText('+', {
+                    fontSize: 18,
+                    fontWeight: 'bold',
+                    fill: colors.textWhite
                 });
                 plusText.anchor.set(0.5);
                 plusText.x = 35;
                 coinDisplay.addChild(plusText);
 
-                // ===== MAIN PANEL (Blue rounded rectangle) =====
+                // Main panel
                 const panelY = 100;
                 const panelWidth = 300;
                 const panelHeight = 480;
                 const panelX = centerX - panelWidth / 2;
 
-                // Panel border (dark outer)
-                const panelBorder = new PIXI.Graphics();
+                const panelBorder = gfx.createGraphics();
                 panelBorder.roundRect(panelX - 4, panelY - 4, panelWidth + 8, panelHeight + 8, 28);
-                panelBorder.fill(COLORS.panelBorder);
+                panelBorder.fill(colors.panelBorder);
                 stage.addChild(panelBorder);
 
-                // Panel main background
-                const panelBg = new PIXI.Graphics();
+                const panelBg = gfx.createGraphics();
                 panelBg.roundRect(panelX, panelY, panelWidth, panelHeight, 25);
-                panelBg.fill(COLORS.panelBg);
+                panelBg.fill(colors.panelBg);
                 stage.addChild(panelBg);
 
-                // Panel gradient overlay (darker at bottom)
-                const panelGradient = new PIXI.Graphics();
+                const panelGradient = gfx.createGraphics();
                 panelGradient.roundRect(panelX, panelY + panelHeight * 0.6, panelWidth, panelHeight * 0.4, 25);
-                panelGradient.fill({ color: COLORS.panelGradientBottom, alpha: 0.4 });
+                panelGradient.fill({ color: colors.panelGradientBottom, alpha: 0.4 });
                 stage.addChild(panelGradient);
 
-                // Panel top highlight line
-                const panelHighlight = new PIXI.Graphics();
+                const panelHighlight = gfx.createGraphics();
                 panelHighlight.roundRect(panelX + 10, panelY + 5, panelWidth - 20, 4, 2);
                 panelHighlight.fill({ color: 0xffffff, alpha: 0.15 });
                 stage.addChild(panelHighlight);
 
-                // ===== TROPHY EMOJI =====
-                const trophy = new PIXI.Text({ text: '🏆', style: { fontSize: 72 } });
+                // Trophy emoji
+                const trophy = gfx.createText('\u{1F3C6}', { fontSize: 72 });
                 trophy.anchor.set(0.5);
                 trophy.x = centerX;
                 trophy.y = trophyY + 40;
                 stage.addChild(trophy);
 
-                // ===== LEVEL COMPLETED BANNER =====
+                // Level completed banner
                 const ribbonY = panelY + 100;
                 const ribbonWidth = 260;
                 const ribbonHeight = 55;
 
-                // Banner shadow (3D bottom)
-                const bannerShadow = new PIXI.Graphics();
+                const bannerShadow = gfx.createGraphics();
                 bannerShadow.roundRect(centerX - ribbonWidth/2, ribbonY + 3, ribbonWidth, ribbonHeight, 8);
-                bannerShadow.fill(COLORS.bannerDark);
+                bannerShadow.fill(colors.bannerDark);
                 stage.addChild(bannerShadow);
 
-                // Banner main body
-                const banner = new PIXI.Graphics();
+                const banner = gfx.createGraphics();
                 banner.roundRect(centerX - ribbonWidth/2, ribbonY, ribbonWidth, ribbonHeight - 3, 8);
-                banner.fill(COLORS.bannerBlue);
+                banner.fill(colors.bannerBlue);
                 stage.addChild(banner);
 
-                // Banner top highlight
-                const bannerHighlight = new PIXI.Graphics();
+                const bannerHighlight = gfx.createGraphics();
                 bannerHighlight.roundRect(centerX - ribbonWidth/2 + 5, ribbonY + 2, ribbonWidth - 10, 3, 2);
-                bannerHighlight.fill(COLORS.bannerLight);
+                bannerHighlight.fill(colors.bannerLight);
                 stage.addChild(bannerHighlight);
 
-                // Left ribbon end (folded trapezoid)
-                const leftRibbon = new PIXI.Graphics();
+                // Ribbon ends
+                const leftRibbon = gfx.createGraphics();
                 leftRibbon.poly([
-                    centerX - ribbonWidth/2 - 10, ribbonY + 8,     // Outer top
-                    centerX - ribbonWidth/2, ribbonY + 8,          // Inner top
-                    centerX - ribbonWidth/2, ribbonY + 47,         // Inner bottom
-                    centerX - ribbonWidth/2 - 10, ribbonY + 47,    // Outer bottom
-                    centerX - ribbonWidth/2, ribbonY + 27          // Fold point (inward)
+                    centerX - ribbonWidth/2 - 10, ribbonY + 8,
+                    centerX - ribbonWidth/2, ribbonY + 8,
+                    centerX - ribbonWidth/2, ribbonY + 47,
+                    centerX - ribbonWidth/2 - 10, ribbonY + 47,
+                    centerX - ribbonWidth/2, ribbonY + 27
                 ]);
-                leftRibbon.fill(COLORS.bannerDark);
+                leftRibbon.fill(colors.bannerDark);
                 stage.addChild(leftRibbon);
 
-                // Right ribbon end (folded trapezoid)
-                const rightRibbon = new PIXI.Graphics();
+                const rightRibbon = gfx.createGraphics();
                 rightRibbon.poly([
-                    centerX + ribbonWidth/2 + 10, ribbonY + 8,     // Outer top
-                    centerX + ribbonWidth/2, ribbonY + 8,          // Inner top
-                    centerX + ribbonWidth/2, ribbonY + 47,         // Inner bottom
-                    centerX + ribbonWidth/2 + 10, ribbonY + 47,    // Outer bottom
-                    centerX + ribbonWidth/2, ribbonY + 27          // Fold point (inward)
+                    centerX + ribbonWidth/2 + 10, ribbonY + 8,
+                    centerX + ribbonWidth/2, ribbonY + 8,
+                    centerX + ribbonWidth/2, ribbonY + 47,
+                    centerX + ribbonWidth/2 + 10, ribbonY + 47,
+                    centerX + ribbonWidth/2, ribbonY + 27
                 ]);
-                rightRibbon.fill(COLORS.bannerDark);
+                rightRibbon.fill(colors.bannerDark);
                 stage.addChild(rightRibbon);
 
-                // "LEVEL 20" text
-                const levelText = new PIXI.Text({
-                    text: 'LEVEL 20',
-                    style: {
-                        fontFamily: 'Arial',
-                        fontSize: 24,
-                        fontWeight: 'bold',
-                        fill: COLORS.textWhite,
-                        dropShadow: true,
-                        dropShadowColor: 0x000000,
-                        dropShadowDistance: 2,
-                        dropShadowBlur: 2
-                    }
+                // Level text
+                const levelText = gfx.createText('LEVEL 20', {
+                    fontSize: 24,
+                    fontWeight: 'bold',
+                    fill: colors.textWhite,
+                    dropShadow: true,
+                    dropShadowColor: 0x000000,
+                    dropShadowDistance: 2,
+                    dropShadowBlur: 2
                 });
                 levelText.anchor.set(0.5);
                 levelText.x = centerX;
                 levelText.y = ribbonY + 18;
                 stage.addChild(levelText);
 
-                // "COMPLETED!" text
-                const completedText = new PIXI.Text({
-                    text: 'COMPLETED!',
-                    style: {
-                        fontFamily: 'Arial',
-                        fontSize: 12,
-                        fontWeight: 'bold',
-                        fill: COLORS.textWhite,
-                        dropShadow: true,
-                        dropShadowColor: 0x000000,
-                        dropShadowDistance: 2,
-                        dropShadowBlur: 2
-                    }
+                const completedText = gfx.createText('COMPLETED!', {
+                    fontSize: 12,
+                    fontWeight: 'bold',
+                    fill: colors.textWhite,
+                    dropShadow: true,
+                    dropShadowColor: 0x000000,
+                    dropShadowDistance: 2,
+                    dropShadowBlur: 2
                 });
                 completedText.anchor.set(0.5);
                 completedText.x = centerX;
                 completedText.y = ribbonY + 38;
                 stage.addChild(completedText);
 
-                // ===== REWARDS TITLE =====
+                // Rewards title
                 const rewardsY = ribbonY + 75;
-
-                const rewardsTitle = new PIXI.Text({
-                    text: 'REWARDS',
-                    style: {
-                        fontFamily: 'Arial',
-                        fontSize: 22,
-                        fontWeight: 'bold',
-                        fill: COLORS.textWhite,
-                        stroke: { color: COLORS.textOutline, width: 5 }
-                    }
+                const rewardsTitle = gfx.createText('REWARDS', {
+                    fontSize: 22,
+                    fontWeight: 'bold',
+                    fill: colors.textWhite,
+                    stroke: { color: colors.textOutline, width: 5 }
                 });
                 rewardsTitle.anchor.set(0.5);
                 rewardsTitle.x = centerX;
                 rewardsTitle.y = rewardsY;
                 stage.addChild(rewardsTitle);
 
-                // ===== REWARD PANEL (Inner panel with coin) =====
+                // Reward panel
                 const rewardPanelY = rewardsY + 25;
                 const rewardPanelWidth = 260;
                 const rewardPanelHeight = 140;
                 const rewardPanelX = centerX - rewardPanelWidth / 2;
 
-                // Reward panel border
-                const rewardBorder = new PIXI.Graphics();
+                const rewardBorder = gfx.createGraphics();
                 rewardBorder.roundRect(rewardPanelX - 3, rewardPanelY - 3, rewardPanelWidth + 6, rewardPanelHeight + 6, 18);
-                rewardBorder.fill(COLORS.rewardPanelBorder);
+                rewardBorder.fill(colors.rewardPanelBorder);
                 stage.addChild(rewardBorder);
 
-                // Reward panel background
-                const rewardPanel = new PIXI.Graphics();
+                const rewardPanel = gfx.createGraphics();
                 rewardPanel.roundRect(rewardPanelX, rewardPanelY, rewardPanelWidth, rewardPanelHeight, 15);
-                rewardPanel.fill(COLORS.rewardPanelBg);
+                rewardPanel.fill(colors.rewardPanelBg);
                 stage.addChild(rewardPanel);
 
-                // Coin light rays (inside reward panel)
-                const coinRays = createLightRays({
+                // Coin rays
+                const coinRays = createLightRays(gfx, {
                     rayCount: 18,
                     innerRadius: 10,
                     outerRadius: 90,
@@ -437,134 +496,103 @@
                 coinRays.y = rewardPanelY + 55;
                 stage.addChild(coinRays);
 
-                // Animate coin rays (opposite direction)
                 game.on('update', () => {
                     coinRays.rotation -= 0.003;
                 });
 
-                // Coin container (for shimmer effect)
-                const rewardCoinContainer = new PIXI.Container();
+                // Reward coin
+                const rewardCoinContainer = gfx.createContainer();
                 rewardCoinContainer.x = centerX;
                 rewardCoinContainer.y = rewardPanelY + 50;
                 stage.addChild(rewardCoinContainer);
 
-                // Large reward coin
-                const rewardCoin = new PIXI.Text({ text: '🪙', style: { fontSize: 56 } });
+                const rewardCoin = gfx.createText('\u{1FA99}', { fontSize: 56 });
                 rewardCoin.anchor.set(0.5);
                 rewardCoinContainer.addChild(rewardCoin);
 
-                // Add shimmer effect
                 setTimeout(() => {
                     celebration.addShimmer(rewardCoinContainer, 'gold');
                 }, 500);
 
-                // Reward amount "40"
-                const rewardAmount = new PIXI.Text({
-                    text: '40',
-                    style: {
-                        fontFamily: 'Arial',
-                        fontSize: 40,
-                        fontWeight: 'bold',
-                        fill: COLORS.textWhite,
-                        stroke: { color: COLORS.textOutline, width: 5 }
-                    }
+                // Reward amount
+                const rewardAmount = gfx.createText('40', {
+                    fontSize: 40,
+                    fontWeight: 'bold',
+                    fill: colors.textWhite,
+                    stroke: { color: colors.textOutline, width: 5 }
                 });
                 rewardAmount.anchor.set(0.5);
                 rewardAmount.x = centerX;
                 rewardAmount.y = rewardPanelY + 112;
                 stage.addChild(rewardAmount);
 
-                // ===== BUTTONS =====
+                // Buttons
                 const btnY = rewardPanelY + rewardPanelHeight + 30;
                 const btnWidth = 120;
                 const btnHeight = 50;
                 const btnGap = 20;
 
-                // Continue button (green, 3D)
-                const continueBtn = create3DButton(
-                    centerX - btnWidth - btnGap/2, btnY, btnWidth, btnHeight,
-                    {
-                        mainColor: COLORS.greenBtn,
-                        shadowColor: COLORS.greenBtnShadow,
-                        highlightColor: COLORS.greenBtnHighlight
-                    }
-                );
+                const continueBtn = create3DButton(gfx, centerX - btnWidth - btnGap/2, btnY, btnWidth, btnHeight, {
+                    mainColor: colors.greenBtn,
+                    shadowColor: colors.greenBtnShadow,
+                    highlightColor: colors.greenBtnHighlight
+                });
                 stage.addChild(continueBtn);
 
-                const continueText = new PIXI.Text({
-                    text: 'Continue',
-                    style: {
-                        fontFamily: 'Arial',
-                        fontSize: 18,
-                        fontWeight: 'bold',
-                        fill: COLORS.textWhite,
-                        dropShadow: true,
-                        dropShadowColor: 0x000000,
-                        dropShadowDistance: 1,
-                        dropShadowBlur: 1
-                    }
+                const continueText = gfx.createText('Continue', {
+                    fontSize: 18,
+                    fontWeight: 'bold',
+                    fill: colors.textWhite,
+                    dropShadow: true,
+                    dropShadowColor: 0x000000,
+                    dropShadowDistance: 1,
+                    dropShadowBlur: 1
                 });
                 continueText.anchor.set(0.5);
                 continueText.x = centerX - btnWidth/2 - btnGap/2;
                 continueText.y = btnY + btnHeight/2;
                 stage.addChild(continueText);
 
-                // Watch Ad button (beige-orange, 3D)
-                const adBtn = create3DButton(
-                    centerX + btnGap/2, btnY, btnWidth, btnHeight,
-                    {
-                        mainColor: COLORS.orangeBtn,
-                        shadowColor: COLORS.orangeBtnShadow,
-                        highlightColor: COLORS.orangeBtnHighlight
-                    }
-                );
+                const adBtn = create3DButton(gfx, centerX + btnGap/2, btnY, btnWidth, btnHeight, {
+                    mainColor: colors.orangeBtn,
+                    shadowColor: colors.orangeBtnShadow,
+                    highlightColor: colors.orangeBtnHighlight
+                });
                 stage.addChild(adBtn);
 
-                // Clapperboard icon
-                const videoIcon = new PIXI.Text({ text: '🎬', style: { fontSize: 18 } });
+                const videoIcon = gfx.createText('\u{1F3AC}', { fontSize: 18 });
                 videoIcon.anchor.set(0.5);
                 videoIcon.x = centerX + btnGap/2 + 20;
                 videoIcon.y = btnY + btnHeight/2;
                 stage.addChild(videoIcon);
 
-                // "80" text (darker color for contrast on beige)
-                const adAmountText = new PIXI.Text({
-                    text: '80',
-                    style: {
-                        fontFamily: 'Arial',
-                        fontSize: 18,
-                        fontWeight: 'bold',
-                        fill: COLORS.textDark
-                    }
+                const adAmountText = gfx.createText('80', {
+                    fontSize: 18,
+                    fontWeight: 'bold',
+                    fill: colors.textDark
                 });
                 adAmountText.anchor.set(0.5);
                 adAmountText.x = centerX + btnGap/2 + 55;
                 adAmountText.y = btnY + btnHeight/2 - 3;
                 stage.addChild(adAmountText);
 
-                // Small coin icon
-                const smallCoin = new PIXI.Text({ text: '🪙', style: { fontSize: 14 } });
+                const smallCoin = gfx.createText('\u{1FA99}', { fontSize: 14 });
                 smallCoin.anchor.set(0.5);
                 smallCoin.x = centerX + btnGap/2 + 82;
                 smallCoin.y = btnY + btnHeight/2 - 3;
                 stage.addChild(smallCoin);
 
-                // x2 badge (red-orange)
-                const x2Badge = new PIXI.Text({
-                    text: 'x2',
-                    style: {
-                        fontFamily: 'Arial',
-                        fontSize: 11,
-                        fontWeight: 'bold',
-                        fill: 0xe85050
-                    }
+                const x2Badge = gfx.createText('x2', {
+                    fontSize: 11,
+                    fontWeight: 'bold',
+                    fill: 0xe85050
                 });
                 x2Badge.anchor.set(0.5);
                 x2Badge.x = centerX + btnGap/2 + 100;
                 x2Badge.y = btnY + btnHeight/2 + 8;
                 stage.addChild(x2Badge);
 
-                // ===== VICTORY CONFETTI =====
+                // Victory confetti
                 setTimeout(() => {
                     celebration.victory();
                 }, 300);
@@ -576,11 +604,13 @@
                 adBtn.mainBtn.on('pointerout', () => adBtn.mainBtn.tint = 0xffffff);
             }
 
-            // Game loop for celebration updates
+            window.createVictoryScreen = createVictoryScreen;
+
             game.on('update', (deltaTime) => {
                 celebration.update(deltaTime);
             });
 
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
             createVictoryScreen();
             game.start();
         })();
diff --git a/docs-site/static/demos/screen-manager-demo.html b/docs-site/static/demos/screen-manager-demo.html
index ae0fedb..ccf5ac7 100644
--- a/docs-site/static/demos/screen-manager-demo.html
+++ b/docs-site/static/demos/screen-manager-demo.html
@@ -6,7 +6,8 @@
     <title>ScreenManager Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #1a1a2e; }
+        body { overflow: hidden; background: #1a1a2e; transition: background 0.3s ease; }
+        body.light-theme { background: #e8eef5; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,23 +16,107 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame } = GameByteFramework;
+        // =====================================================
+        // ScreenManager Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - Screen navigation with push/pop stack
+        // - Slide and fade transitions
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const {
+            createGame,
+            GameStyleButton,
+            GameStyleColors,
+            graphics,
+            loadFrameworkFont
+        } = GameByteFramework;
 
         const CONFIG = { width: 360, height: 640 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                background: 0x1a1a2e,
+                textPrimary: 0xffffff,
+                textSecondary: 0xcccccc,
+                screenColors: [0x2196F3, 0x9C27B0, 0xFF9800, 0xE91E63, 0x00BCD4],
+                homeScreen: 0x1a1a2e
+            },
+            light: {
+                background: 0xe8eef5,
+                textPrimary: 0x2d3748,
+                textSecondary: 0x4a5568,
+                screenColors: [0x63b3ed, 0xb794f4, 0xf6ad55, 0xf687b3, 0x4fd1c5],
+                homeScreen: 0xe8eef5
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage, screenManager;
 
-        // Simple screen stack for demo
+        // ===== DEMO SCREEN MANAGER =====
         class DemoScreenManager {
-            constructor(stage) {
+            constructor(stage, gfx) {
                 this.stage = stage;
+                this.gfx = gfx;
                 this.screens = [];
-                this.container = new PIXI.Container();
+                this.container = gfx.createContainer();
                 stage.addChild(this.container);
             }
 
@@ -69,24 +154,26 @@
                 } else {
                     await this.animate(current.container, { alpha: 0 }, 200);
                 }
+
                 this.container.removeChild(current.container);
+                if (current.destroy) current.destroy();
             }
 
-            async animate(target, props, duration) {
-                return new Promise(resolve => {
-                    const start = {};
+            animate(target, props, duration) {
+                return new Promise((resolve) => {
+                    const startProps = {};
                     for (const key in props) {
-                        start[key] = target[key];
+                        startProps[key] = target[key];
                     }
-                    const startTime = Date.now();
+                    const startTime = performance.now();
 
                     const tick = () => {
-                        const elapsed = Date.now() - startTime;
+                        const elapsed = performance.now() - startTime;
                         const progress = Math.min(elapsed / duration, 1);
                         const eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic
 
                         for (const key in props) {
-                            target[key] = start[key] + (props[key] - start[key]) * eased;
+                            target[key] = startProps[key] + (props[key] - startProps[key]) * eased;
                         }
 
                         if (progress < 1) {
@@ -95,112 +182,166 @@
                             resolve();
                         }
                     };
-                    tick();
+                    requestAnimationFrame(tick);
                 });
             }
+
+            get stackSize() {
+                return this.screens.length;
+            }
         }
 
-        // Create screens
-        function createScreen(color, title, screenManager, isFirst = false) {
-            const screen = { container: new PIXI.Container() };
+        // ===== SCREEN FACTORY =====
+        function createScreen(gfx, title, color, depth, onPush, onPop) {
+            const colors = getColors();
+            const container = gfx.createContainer();
 
             // Background
-            const bg = new PIXI.Graphics();
+            const bg = gfx.createGraphics();
             bg.rect(0, 0, CONFIG.width, CONFIG.height);
             bg.fill(color);
-            screen.container.addChild(bg);
+            container.addChild(bg);
 
-            // Title
-            const titleText = new PIXI.Text({
-                text: title,
-                style: { fontFamily: 'Arial', fontSize: 32, fontWeight: 'bold', fill: 0xffffff }
-            });
-            titleText.anchor.set(0.5);
-            titleText.x = CONFIG.width / 2;
-            titleText.y = 80;
-            screen.container.addChild(titleText);
-
-            // Stack indicator
-            const stackText = new PIXI.Text({
-                text: `Screen ${screenManager.screens.length + 1}`,
-                style: { fontFamily: 'Arial', fontSize: 18, fill: 0xffffff, alpha: 0.7 }
+            // Screen title
+            const titleText = gfx.createText(title, {
+                fontSize: 28,
+                fontWeight: 'bold',
+                fill: 0xffffff
             });
-            stackText.anchor.set(0.5);
-            stackText.x = CONFIG.width / 2;
-            stackText.y = 130;
-            screen.container.addChild(stackText);
-
-            // Push button
-            const pushBtn = new PIXI.Graphics();
-            pushBtn.roundRect(80, 200, 200, 60, 12);
-            pushBtn.fill(0x4CAF50);
-            pushBtn.eventMode = 'static';
-            pushBtn.cursor = 'pointer';
-            screen.container.addChild(pushBtn);
-
-            const pushText = new PIXI.Text({
-                text: 'Push Screen',
-                style: { fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold', fill: 0xffffff }
+            titleText.x = CONFIG.width / 2 - titleText.width / 2;
+            titleText.y = 50;
+            container.addChild(titleText);
+
+            // Depth indicator
+            const depthText = gfx.createText(`Stack Depth: ${depth}`, {
+                fontSize: 16,
+                fill: 0xffffff
             });
-            pushText.anchor.set(0.5);
-            pushText.x = 180;
-            pushText.y = 230;
-            screen.container.addChild(pushText);
-
-            pushBtn.on('pointerdown', () => {
-                const colors = [0x2196F3, 0x9C27B0, 0xFF9800, 0xE91E63, 0x00BCD4];
-                const nextColor = colors[screenManager.screens.length % colors.length];
-                const nextScreen = createScreen(nextColor, `Screen ${screenManager.screens.length + 1}`, screenManager);
-                screenManager.push(nextScreen, 'slide');
+            depthText.x = CONFIG.width / 2 - depthText.width / 2;
+            depthText.y = 95;
+            depthText.alpha = 0.8;
+            container.addChild(depthText);
+
+            // Decorative circles
+            for (let i = 0; i < 3; i++) {
+                const circle = gfx.createGraphics();
+                circle.circle(0, 0, 40 + i * 30);
+                circle.stroke({ width: 2, color: 0xffffff, alpha: 0.2 });
+                circle.x = CONFIG.width / 2;
+                circle.y = CONFIG.height / 2 - 50;
+                container.addChild(circle);
+            }
+
+            // Push button (slide transition)
+            const pushSlideBtn = new GameStyleButton({
+                text: 'Push (Slide)',
+                width: 140,
+                height: 50,
+                fontSize: 14,
+                colorScheme: GameStyleColors.GREEN_BUTTON
             });
+            pushSlideBtn.setPosition(30, CONFIG.height - 200);
+            pushSlideBtn.on('click', () => onPush('slide'));
+            container.addChild(pushSlideBtn.getContainer());
 
-            // Pop button (not on first screen)
-            if (!isFirst) {
-                const popBtn = new PIXI.Graphics();
-                popBtn.roundRect(80, 280, 200, 60, 12);
-                popBtn.fill(0xE84C4C);
-                popBtn.eventMode = 'static';
-                popBtn.cursor = 'pointer';
-                screen.container.addChild(popBtn);
-
-                const popText = new PIXI.Text({
-                    text: 'Pop (Go Back)',
-                    style: { fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold', fill: 0xffffff }
-                });
-                popText.anchor.set(0.5);
-                popText.x = 180;
-                popText.y = 310;
-                screen.container.addChild(popText);
+            // Push button (fade transition)
+            const pushFadeBtn = new GameStyleButton({
+                text: 'Push (Fade)',
+                width: 140,
+                height: 50,
+                fontSize: 14,
+                colorScheme: GameStyleColors.BLUE_BUTTON
+            });
+            pushFadeBtn.setPosition(190, CONFIG.height - 200);
+            pushFadeBtn.on('click', () => onPush('fade'));
+            container.addChild(pushFadeBtn.getContainer());
 
-                popBtn.on('pointerdown', () => {
-                    screenManager.pop('slide');
+            // Pop button
+            if (depth > 1) {
+                const popBtn = new GameStyleButton({
+                    text: 'Pop Screen',
+                    width: 300,
+                    height: 55,
+                    fontSize: 18,
+                    colorScheme: GameStyleColors.RED_BUTTON
                 });
+                popBtn.setPosition(30, CONFIG.height - 130);
+                popBtn.on('click', onPop);
+                container.addChild(popBtn.getContainer());
             }
 
-            // Instructions
-            const instr = new PIXI.Text({
-                text: 'Tap buttons to navigate\nbetween screens',
-                style: { fontFamily: 'Arial', fontSize: 14, fill: 0xffffff, alpha: 0.6, align: 'center' }
+            // Info text
+            const infoText = gfx.createText('Tap buttons to navigate screens', {
+                fontSize: 12,
+                fill: 0xffffff
             });
-            instr.anchor.set(0.5);
-            instr.x = CONFIG.width / 2;
-            instr.y = CONFIG.height - 60;
-            screen.container.addChild(instr);
+            infoText.x = CONFIG.width / 2 - infoText.width / 2;
+            infoText.y = CONFIG.height - 50;
+            infoText.alpha = 0.6;
+            container.addChild(infoText);
+
+            return { container };
+        }
+
+        function pushNewScreen(gfx, screenManager, transition) {
+            const colors = getColors();
+            const depth = screenManager.stackSize + 1;
+            const colorIndex = (depth - 1) % colors.screenColors.length;
+            const screenColor = depth === 1 ? colors.homeScreen : colors.screenColors[colorIndex];
+            const screenTitle = depth === 1 ? 'Home Screen' : `Screen ${depth}`;
+
+            const screen = createScreen(
+                gfx,
+                screenTitle,
+                screenColor,
+                depth,
+                (trans) => pushNewScreen(gfx, screenManager, trans),
+                () => screenManager.pop(transition)
+            );
 
-            return screen;
+            screenManager.push(screen, transition);
+        }
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createDemo) {
+                await loadFrameworkFont();
+                window.createDemo();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
         }
 
         (async () => {
+            await loadFrameworkFont();
             await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
+
+            setupThemeListener();
 
-            const screenManager = new DemoScreenManager(stage);
+            function createDemo() {
+                const gfx = graphics();
+
+                // Clear stage
+                while (stage.children.length > 0) {
+                    stage.removeChildAt(0);
+                }
+
+                // Create screen manager
+                screenManager = new DemoScreenManager(stage, gfx);
+
+                // Push initial home screen
+                pushNewScreen(gfx, screenManager, 'fade');
+            }
 
-            // Create first screen
-            const firstScreen = createScreen(0x1a1a2e, 'Home', screenManager, true);
-            await screenManager.push(firstScreen, 'fade');
+            window.createDemo = createDemo;
 
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createDemo();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/ui-button-effects.html b/docs-site/static/demos/ui-button-effects.html
index 2b2ca8c..e09a10a 100644
--- a/docs-site/static/demos/ui-button-effects.html
+++ b/docs-site/static/demos/ui-button-effects.html
@@ -6,7 +6,8 @@
     <title>UIButton Effects Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #1a1a2e; }
+        body { overflow: hidden; background: #1a1a2e; transition: background 0.3s ease; }
+        body.light-theme { background: #e8eef5; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,38 +16,115 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame, GameStyleButton, GameStyleColors } = GameByteFramework;
+        // =====================================================
+        // UIButton Effects Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - GameStyleButton with all color variants
+        // - Press animation effects
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const { createGame, GameStyleButton, GameStyleColors, graphics, loadFrameworkFont } = GameByteFramework;
 
         const CONFIG = { width: 400, height: 320 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                background: 0x1a1a2e,
+                textPrimary: 0xffffff,
+                textSecondary: 0x888888
+            },
+            light: {
+                background: 0xe8eef5,
+                textPrimary: 0x2d3748,
+                textSecondary: 0x718096
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage;
 
-        (async () => {
-            await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+        function createDemoContent() {
+            const colors = getColors();
+            const gfx = graphics(); // Get graphics factory
+
+            // Clear stage
+            while (stage.children.length > 0) {
+                stage.removeChildAt(0);
+            }
 
-            // Background
-            const bg = new PIXI.Graphics();
+            // ===== BACKGROUND - Using graphics() abstraction =====
+            const bg = gfx.createGraphics();
             bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill(0x1a1a2e);
+            bg.fill(colors.background);
             stage.addChild(bg);
 
-            // Title
-            const title = new PIXI.Text({
-                text: 'Button Effects',
-                style: { fontFamily: 'Arial Black', fontSize: 18, fill: 0xffffff }
+            // ===== TITLE - Using graphics() abstraction =====
+            const title = gfx.createText('Button Effects', {
+                fontSize: 18,
+                fill: colors.textPrimary
             });
             title.x = CONFIG.width / 2 - title.width / 2;
             title.y = 15;
             stage.addChild(title);
 
-            // Yellow button (Gradient)
+            // ===== YELLOW BUTTON (GRADIENT) =====
             const yellowBtn = new GameStyleButton({
                 text: 'GRADIENT',
                 width: 170,
@@ -57,7 +135,7 @@
             yellowBtn.setPosition(20, 55);
             stage.addChild(yellowBtn.getContainer());
 
-            // Green button (Glow)
+            // ===== GREEN BUTTON (GLOW) =====
             const greenBtn = new GameStyleButton({
                 text: 'GLOW',
                 width: 170,
@@ -68,7 +146,7 @@
             greenBtn.setPosition(210, 55);
             stage.addChild(greenBtn.getContainer());
 
-            // Blue button (Shadow)
+            // ===== BLUE BUTTON (SHADOW) =====
             const blueBtn = new GameStyleButton({
                 text: 'SHADOW',
                 width: 170,
@@ -79,7 +157,7 @@
             blueBtn.setPosition(20, 125);
             stage.addChild(blueBtn.getContainer());
 
-            // Red button (Ripple)
+            // ===== RED BUTTON (RIPPLE) =====
             const redBtn = new GameStyleButton({
                 text: 'RIPPLE',
                 width: 170,
@@ -90,7 +168,7 @@
             redBtn.setPosition(210, 125);
             stage.addChild(redBtn.getContainer());
 
-            // Purple button (All effects - pill shape)
+            // ===== PURPLE BUTTON (ALL EFFECTS - PILL SHAPE) =====
             const purpleBtn = new GameStyleButton({
                 text: 'ALL EFFECTS',
                 width: 360,
@@ -102,10 +180,10 @@
             purpleBtn.setPosition(20, 200);
             stage.addChild(purpleBtn.getContainer());
 
-            // Info text
-            const info = new PIXI.Text({
-                text: 'Click buttons to see press animation',
-                style: { fontFamily: 'Arial', fontSize: 12, fill: 0x888888 }
+            // ===== INFO TEXT - Using graphics() abstraction =====
+            const info = gfx.createText('Click buttons to see press animation', {
+                fontSize: 12,
+                fill: colors.textSecondary
             });
             info.x = CONFIG.width / 2 - info.width / 2;
             info.y = 285;
@@ -115,7 +193,32 @@
             [yellowBtn, greenBtn, blueBtn, redBtn, purpleBtn].forEach(btn => {
                 btn.on('click', () => console.log(`${btn.config?.text || 'Button'} clicked!`));
             });
+        }
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage) {
+                await loadFrameworkFont();
+                createDemoContent();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
+
+        (async () => {
+            // Load framework font
+            await loadFrameworkFont();
+
+            await game.initialize(canvas, '2d');
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
 
+            setupThemeListener();
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createDemoContent();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/ui-panel-basic.html b/docs-site/static/demos/ui-panel-basic.html
index 10a09cb..8426d81 100644
--- a/docs-site/static/demos/ui-panel-basic.html
+++ b/docs-site/static/demos/ui-panel-basic.html
@@ -6,7 +6,8 @@
     <title>UIPanel Basic Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #1a1a2e; }
+        body { overflow: hidden; background: #1a1a2e; transition: background 0.3s ease; }
+        body.light-theme { background: #e8eef5; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,77 +16,160 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame } = GameByteFramework;
+        // =====================================================
+        // UIPanel Basic Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - Basic settings panel with toggle buttons
+        // - graphics() abstraction instead of direct PIXI usage
+        // - loadFrameworkFont() for consistent font loading
+        // =====================================================
+
+        const { createGame, graphics, loadFrameworkFont } = GameByteFramework;
 
         const CONFIG = { width: 400, height: 280 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                background: 0x1a1a2e,
+                panelBg: 0x2d3748,
+                panelShadow: 0x000000,
+                textPrimary: 0xffffff,
+                buttonActive: 0x6366f1,
+                buttonInactive: 0x4b5563
+            },
+            light: {
+                background: 0xe8eef5,
+                panelBg: 0xffffff,
+                panelShadow: 0x94a3b8,
+                textPrimary: 0x2d3748,
+                buttonActive: 0x818cf8,
+                buttonInactive: 0xcbd5e1
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage;
 
-        (async () => {
-            await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+        // State for toggles
+        let soundOn = true;
+        let musicOn = true;
+
+        function createDemoContent() {
+            const colors = getColors();
+            const gfx = graphics(); // Get graphics factory
+
+            // Clear stage
+            while (stage.children.length > 0) {
+                stage.removeChildAt(0);
+            }
 
-            // Background
-            const bg = new PIXI.Graphics();
+            // ===== BACKGROUND - Using graphics() abstraction =====
+            const bg = gfx.createGraphics();
             bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill(0x1a1a2e);
+            bg.fill(colors.background);
             stage.addChild(bg);
 
-            // Panel with shadow
-            const shadowPanel = new PIXI.Graphics();
+            // ===== PANEL SHADOW - Using graphics() abstraction =====
+            const shadowPanel = gfx.createGraphics();
             shadowPanel.roundRect(65, 45, 280, 200, 16);
-            shadowPanel.fill({ color: 0x000000, alpha: 0.3 });
+            shadowPanel.fill({ color: colors.panelShadow, alpha: 0.3 });
             stage.addChild(shadowPanel);
 
-            // Main panel
-            const panel = new PIXI.Graphics();
+            // ===== MAIN PANEL - Using graphics() abstraction =====
+            const panel = gfx.createGraphics();
             panel.roundRect(60, 40, 280, 200, 16);
-            panel.fill(0x2d3748);
+            panel.fill(colors.panelBg);
             stage.addChild(panel);
 
-            // Title
-            const title = new PIXI.Text({
-                text: 'Settings',
-                style: {
-                    fontFamily: 'Arial',
-                    fontSize: 24,
-                    fontWeight: 'bold',
-                    fill: 0xffffff
-                }
+            // ===== TITLE - Using graphics() abstraction =====
+            const title = gfx.createText('Settings', {
+                fontSize: 24,
+                fontWeight: 'bold',
+                fill: colors.textPrimary
             });
             title.x = 160;
             title.y = 60;
             stage.addChild(title);
 
-            // Sound button
-            const soundBtn = new PIXI.Graphics();
+            // ===== SOUND BUTTON - Using graphics() abstraction =====
+            const soundBtn = gfx.createGraphics();
             soundBtn.roundRect(85, 110, 230, 44, 8);
-            soundBtn.fill(0x6366f1);
+            soundBtn.fill(soundOn ? colors.buttonActive : colors.buttonInactive);
             stage.addChild(soundBtn);
 
-            const soundText = new PIXI.Text({
-                text: 'Sound: ON',
-                style: { fontFamily: 'Arial', fontSize: 16, fill: 0xffffff }
+            const soundText = gfx.createText(`Sound: ${soundOn ? 'ON' : 'OFF'}`, {
+                fontSize: 16,
+                fill: 0xffffff
             });
             soundText.x = 160;
             soundText.y = 122;
             stage.addChild(soundText);
 
-            // Music button
-            const musicBtn = new PIXI.Graphics();
+            // ===== MUSIC BUTTON - Using graphics() abstraction =====
+            const musicBtn = gfx.createGraphics();
             musicBtn.roundRect(85, 165, 230, 44, 8);
-            musicBtn.fill(0x4b5563);
+            musicBtn.fill(musicOn ? colors.buttonActive : colors.buttonInactive);
             stage.addChild(musicBtn);
 
-            const musicText = new PIXI.Text({
-                text: 'Music: ON',
-                style: { fontFamily: 'Arial', fontSize: 16, fill: 0xffffff }
+            const musicText = gfx.createText(`Music: ${musicOn ? 'ON' : 'OFF'}`, {
+                fontSize: 16,
+                fill: 0xffffff
             });
             musicText.x = 163;
             musicText.y = 177;
@@ -94,26 +178,49 @@
             // Make buttons interactive
             soundBtn.eventMode = 'static';
             soundBtn.cursor = 'pointer';
-            let soundOn = true;
             soundBtn.on('pointerdown', () => {
                 soundOn = !soundOn;
                 soundText.text = `Sound: ${soundOn ? 'ON' : 'OFF'}`;
                 soundBtn.clear();
                 soundBtn.roundRect(85, 110, 230, 44, 8);
-                soundBtn.fill(soundOn ? 0x6366f1 : 0x4b5563);
+                soundBtn.fill(soundOn ? colors.buttonActive : colors.buttonInactive);
             });
 
             musicBtn.eventMode = 'static';
             musicBtn.cursor = 'pointer';
-            let musicOn = true;
             musicBtn.on('pointerdown', () => {
                 musicOn = !musicOn;
                 musicText.text = `Music: ${musicOn ? 'ON' : 'OFF'}`;
                 musicBtn.clear();
                 musicBtn.roundRect(85, 165, 230, 44, 8);
-                musicBtn.fill(musicOn ? 0x6366f1 : 0x4b5563);
+                musicBtn.fill(musicOn ? colors.buttonActive : colors.buttonInactive);
             });
+        }
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage) {
+                await loadFrameworkFont();
+                createDemoContent();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
+
+        (async () => {
+            // Load framework font
+            await loadFrameworkFont();
+
+            await game.initialize(canvas, '2d');
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
 
+            setupThemeListener();
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createDemoContent();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/ui-panel-variants.html b/docs-site/static/demos/ui-panel-variants.html
index 1fed9be..0aea4ac 100644
--- a/docs-site/static/demos/ui-panel-variants.html
+++ b/docs-site/static/demos/ui-panel-variants.html
@@ -6,7 +6,8 @@
     <title>UIPanel Variants Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #0f172a; }
+        body { overflow: hidden; background: #0f172a; transition: background 0.3s ease; }
+        body.light-theme { background: #e8eef5; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,112 +16,232 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame } = GameByteFramework;
+        // =====================================================
+        // UIPanel Variants Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - Different panel styles (card, glass, gradient, bordered)
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const { createGame, graphics, loadFrameworkFont } = GameByteFramework;
 
         const CONFIG = { width: 400, height: 330 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                background: 0x0f172a,
+                textPrimary: 0xffffff,
+                cardBg: 0x2d3748,
+                cardShadow: 0x000000,
+                glassBg: 0xffffff,
+                glassBgAlpha: 0.1,
+                glassBorder: 0xffffff,
+                glassBorderAlpha: 0.3,
+                borderedBg: 0x1e293b,
+                borderedStroke: 0x6366f1,
+                gradientTop: '#818cf8',
+                gradientBottom: '#4f46e5'
+            },
+            light: {
+                background: 0xe8eef5,
+                textPrimary: 0x2d3748,
+                cardBg: 0xffffff,
+                cardShadow: 0x94a3b8,
+                glassBg: 0x1e293b,
+                glassBgAlpha: 0.08,
+                glassBorder: 0x475569,
+                glassBorderAlpha: 0.2,
+                borderedBg: 0xffffff,
+                borderedStroke: 0x818cf8,
+                gradientTop: '#a5b4fc',
+                gradientBottom: '#6366f1'
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage;
 
-        (async () => {
-            await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+        function createDemoContent() {
+            const colors = getColors();
+            const gfx = graphics(); // Get graphics factory
+
+            // Clear stage
+            while (stage.children.length > 0) {
+                stage.removeChildAt(0);
+            }
 
-            // Background
-            const bg = new PIXI.Graphics();
+            // ===== BACKGROUND - Using graphics() abstraction =====
+            const bg = gfx.createGraphics();
             bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill(0x0f172a);
+            bg.fill(colors.background);
             stage.addChild(bg);
 
-            // Title
-            const title = new PIXI.Text({
-                text: 'Panel Variants',
-                style: { fontFamily: 'Arial Black', fontSize: 18, fill: 0xffffff }
+            // ===== TITLE - Using graphics() abstraction =====
+            const title = gfx.createText('Panel Variants', {
+                fontSize: 18,
+                fill: colors.textPrimary
             });
             title.x = CONFIG.width / 2 - title.width / 2;
             title.y = 15;
             stage.addChild(title);
 
-            // Card Style Panel (with shadow)
-            const cardShadow = new PIXI.Graphics();
+            // ===== CARD STYLE PANEL (WITH SHADOW) =====
+            const cardShadow = gfx.createGraphics();
             cardShadow.roundRect(25, 60, 170, 100, 16);
-            cardShadow.fill({ color: 0x000000, alpha: 0.3 });
+            cardShadow.fill({ color: colors.cardShadow, alpha: 0.3 });
             stage.addChild(cardShadow);
 
-            const card = new PIXI.Graphics();
+            const card = gfx.createGraphics();
             card.roundRect(20, 55, 170, 100, 16);
-            card.fill(0x2d3748);
+            card.fill(colors.cardBg);
             stage.addChild(card);
 
-            const cardLabel = new PIXI.Text({
-                text: 'Card Style',
-                style: { fontFamily: 'Arial', fontSize: 14, fill: 0xffffff }
+            const cardLabel = gfx.createText('Card Style', {
+                fontSize: 14,
+                fill: colors.textPrimary
             });
             cardLabel.x = 65;
             cardLabel.y = 95;
             stage.addChild(cardLabel);
 
-            // Glass Effect Panel
-            const glass = new PIXI.Graphics();
+            // ===== GLASS EFFECT PANEL =====
+            const glass = gfx.createGraphics();
             glass.roundRect(210, 55, 170, 100, 20);
-            glass.fill({ color: 0xffffff, alpha: 0.1 });
-            glass.stroke({ width: 1, color: 0xffffff, alpha: 0.3 });
+            glass.fill({ color: colors.glassBg, alpha: colors.glassBgAlpha });
+            glass.stroke({ width: 1, color: colors.glassBorder, alpha: colors.glassBorderAlpha });
             stage.addChild(glass);
 
-            const glassLabel = new PIXI.Text({
-                text: 'Glass Effect',
-                style: { fontFamily: 'Arial', fontSize: 14, fill: 0xffffff }
+            const glassLabel = gfx.createText('Glass Effect', {
+                fontSize: 14,
+                fill: colors.textPrimary
             });
             glassLabel.x = 250;
             glassLabel.y = 95;
             stage.addChild(glassLabel);
 
-            // Gradient Header Panel
+            // ===== GRADIENT HEADER PANEL =====
             const gradientCanvas = document.createElement('canvas');
             gradientCanvas.width = 360;
             gradientCanvas.height = 60;
             const ctx = gradientCanvas.getContext('2d');
             const gradient = ctx.createLinearGradient(0, 0, 0, 60);
-            gradient.addColorStop(0, '#818cf8');
-            gradient.addColorStop(1, '#4f46e5');
+            gradient.addColorStop(0, colors.gradientTop);
+            gradient.addColorStop(1, colors.gradientBottom);
             ctx.fillStyle = gradient;
             ctx.beginPath();
             ctx.roundRect(0, 0, 360, 60, 12);
             ctx.fill();
 
-            const gradPanel = new PIXI.Sprite(PIXI.Texture.from(gradientCanvas));
+            const gradPanel = gfx.createSprite(PIXI.Texture.from(gradientCanvas));
             gradPanel.x = 20;
             gradPanel.y = 175;
             stage.addChild(gradPanel);
 
-            const gradLabel = new PIXI.Text({
-                text: 'Gradient Header',
-                style: { fontFamily: 'Arial', fontSize: 16, fontWeight: 'bold', fill: 0xffffff }
+            const gradLabel = gfx.createText('Gradient Header', {
+                fontSize: 16,
+                fontWeight: 'bold',
+                fill: 0xffffff
             });
             gradLabel.x = 145;
             gradLabel.y = 195;
             stage.addChild(gradLabel);
 
-            // Bordered Panel
-            const bordered = new PIXI.Graphics();
+            // ===== BORDERED PANEL =====
+            const bordered = gfx.createGraphics();
             bordered.roundRect(20, 255, 360, 60, 8);
-            bordered.fill(0x1e293b);
-            bordered.stroke({ width: 2, color: 0x6366f1 });
+            bordered.fill(colors.borderedBg);
+            bordered.stroke({ width: 2, color: colors.borderedStroke });
             stage.addChild(bordered);
 
-            const borderedLabel = new PIXI.Text({
-                text: 'Bordered Panel',
-                style: { fontFamily: 'Arial', fontSize: 14, fill: 0xffffff }
+            const borderedLabel = gfx.createText('Bordered Panel', {
+                fontSize: 14,
+                fill: colors.textPrimary
             });
             borderedLabel.x = 150;
             borderedLabel.y = 278;
             stage.addChild(borderedLabel);
+        }
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage) {
+                await loadFrameworkFont();
+                createDemoContent();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
+
+        (async () => {
+            // Load framework font
+            await loadFrameworkFont();
+
+            await game.initialize(canvas, '2d');
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
 
+            setupThemeListener();
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createDemoContent();
             game.start();
         })();
     </script>
diff --git a/docs-site/static/demos/ui-progress-bar.html b/docs-site/static/demos/ui-progress-bar.html
index 714a951..3f54c5e 100644
--- a/docs-site/static/demos/ui-progress-bar.html
+++ b/docs-site/static/demos/ui-progress-bar.html
@@ -6,7 +6,8 @@
     <title>UIProgressBar Demo - GameByte Framework</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { overflow: hidden; background: #1a1a2e; }
+        body { overflow: hidden; background: #1a1a2e; transition: background 0.3s ease; }
+        body.light-theme { background: #e8eef5; }
         canvas { display: block; margin: 0 auto; }
     </style>
 </head>
@@ -15,134 +16,236 @@
     <script src="/gamebyte.umd.js"></script>
 
     <script>
-        const { createGame } = GameByteFramework;
+        // =====================================================
+        // UIProgressBar Demo - Using Framework Abstractions
+        // =====================================================
+        // This demo showcases:
+        // - Various progress bar styles (health, XP, segmented)
+        // - Animated progress updates
+        // - graphics() abstraction instead of direct PIXI usage
+        // =====================================================
+
+        const { createGame, graphics, loadFrameworkFont } = GameByteFramework;
 
         const CONFIG = { width: 400, height: 200 };
 
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                background: 0x1a1a2e,
+                textPrimary: 0xffffff,
+                textSecondary: 0x888888,
+                barBackground: 0x374151,
+                healthFill: 0x22c55e,
+                healthLow: 0xef4444,
+                xpFill: 0x8b5cf6,
+                energyFill: 0xfbbf24,
+                energyEmpty: 0x374151
+            },
+            light: {
+                background: 0xe8eef5,
+                textPrimary: 0x2d3748,
+                textSecondary: 0x718096,
+                barBackground: 0xcbd5e1,
+                healthFill: 0x48bb78,
+                healthLow: 0xf56565,
+                xpFill: 0xa78bfa,
+                energyFill: 0xf6ad55,
+                energyEmpty: 0xcbd5e1
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
         const canvas = document.createElement('canvas');
         canvas.width = CONFIG.width;
         canvas.height = CONFIG.height;
         document.body.appendChild(canvas);
 
         const game = createGame();
+        let renderer, stage;
 
-        (async () => {
-            await game.initialize(canvas, '2d');
-            const renderer = game.make('renderer');
-            const stage = renderer.getStage();
+        // Animation state
+        let healthValue = 75;
+        let xpValue = 60;
+        let energyValue = 3;
+        let animationInterval = null;
+
+        // Store references for animation updates
+        let healthFill, healthText, xpFill, xpText, energySegments;
 
-            // Background
-            const bg = new PIXI.Graphics();
+        function createDemoContent() {
+            const colors = getColors();
+            const gfx = graphics(); // Get graphics factory
+
+            // Clear stage
+            while (stage.children.length > 0) {
+                stage.removeChildAt(0);
+            }
+
+            // Clear existing animation interval
+            if (animationInterval) {
+                clearInterval(animationInterval);
+            }
+
+            // ===== BACKGROUND - Using graphics() abstraction =====
+            const bg = gfx.createGraphics();
             bg.rect(0, 0, CONFIG.width, CONFIG.height);
-            bg.fill(0x1a1a2e);
+            bg.fill(colors.background);
             stage.addChild(bg);
 
-            // Title
-            const title = new PIXI.Text({
-                text: 'Progress Bars',
-                style: { fontFamily: 'Arial Black', fontSize: 18, fill: 0xffffff }
+            // ===== TITLE - Using graphics() abstraction =====
+            const title = gfx.createText('Progress Bars', {
+                fontSize: 18,
+                fill: colors.textPrimary
             });
             title.x = CONFIG.width / 2 - title.width / 2;
             title.y = 10;
             stage.addChild(title);
 
-            // Health Bar
-            const healthLabel = new PIXI.Text({
-                text: 'Health',
-                style: { fontFamily: 'Arial', fontSize: 12, fill: 0x888888 }
+            // ===== HEALTH BAR SECTION =====
+            const healthLabel = gfx.createText('Health', {
+                fontSize: 12,
+                fill: colors.textSecondary
             });
             healthLabel.x = 30;
             healthLabel.y = 45;
             stage.addChild(healthLabel);
 
             // Health bar background
-            const healthBg = new PIXI.Graphics();
+            const healthBg = gfx.createGraphics();
             healthBg.roundRect(30, 65, 300, 20, 10);
-            healthBg.fill(0x374151);
+            healthBg.fill(colors.barBackground);
             stage.addChild(healthBg);
 
             // Health bar fill
-            let healthValue = 75;
-            const healthFill = new PIXI.Graphics();
+            healthFill = gfx.createGraphics();
             healthFill.roundRect(30, 65, 300 * (healthValue / 100), 20, 10);
-            healthFill.fill(0x22c55e);
+            healthFill.fill(healthValue > 30 ? colors.healthFill : colors.healthLow);
             stage.addChild(healthFill);
 
-            const healthText = new PIXI.Text({
-                text: '75/100',
-                style: { fontFamily: 'Arial', fontSize: 12, fill: 0xffffff }
+            healthText = gfx.createText(`${healthValue}/100`, {
+                fontSize: 12,
+                fill: colors.textPrimary
             });
             healthText.x = 345;
             healthText.y = 68;
             stage.addChild(healthText);
 
-            // XP Bar
-            const xpLabel = new PIXI.Text({
-                text: 'Experience',
-                style: { fontFamily: 'Arial', fontSize: 12, fill: 0x888888 }
+            // ===== XP BAR SECTION =====
+            const xpLabel = gfx.createText('Experience', {
+                fontSize: 12,
+                fill: colors.textSecondary
             });
             xpLabel.x = 30;
             xpLabel.y = 100;
             stage.addChild(xpLabel);
 
-            const xpBg = new PIXI.Graphics();
+            const xpBg = gfx.createGraphics();
             xpBg.roundRect(30, 120, 300, 14, 7);
-            xpBg.fill(0x374151);
+            xpBg.fill(colors.barBackground);
             stage.addChild(xpBg);
 
-            let xpValue = 60;
-            const xpFill = new PIXI.Graphics();
+            xpFill = gfx.createGraphics();
             xpFill.roundRect(30, 120, 300 * (xpValue / 100), 14, 7);
-            xpFill.fill(0x8b5cf6);
+            xpFill.fill(colors.xpFill);
             stage.addChild(xpFill);
 
-            const xpText = new PIXI.Text({
-                text: '60%',
-                style: { fontFamily: 'Arial', fontSize: 12, fill: 0xffffff }
+            xpText = gfx.createText(`${xpValue}%`, {
+                fontSize: 12,
+                fill: colors.textPrimary
             });
             xpText.x = 345;
             xpText.y = 118;
             stage.addChild(xpText);
 
-            // Energy Bar (segmented)
-            const energyLabel = new PIXI.Text({
-                text: 'Energy',
-                style: { fontFamily: 'Arial', fontSize: 12, fill: 0x888888 }
+            // ===== ENERGY BAR (SEGMENTED) =====
+            const energyLabel = gfx.createText('Energy', {
+                fontSize: 12,
+                fill: colors.textSecondary
             });
             energyLabel.x = 30;
             energyLabel.y = 150;
             stage.addChild(energyLabel);
 
-            let energyValue = 3;
             const segmentWidth = 56;
             const segmentGap = 6;
-            const energySegments = [];
+            energySegments = [];
 
             for (let i = 0; i < 5; i++) {
-                const segment = new PIXI.Graphics();
+                const segment = gfx.createGraphics();
                 const x = 30 + i * (segmentWidth + segmentGap);
                 const filled = i < energyValue;
                 segment.roundRect(x, 170, segmentWidth, 18, 4);
-                segment.fill(filled ? 0xfbbf24 : 0x374151);
+                segment.fill(filled ? colors.energyFill : colors.energyEmpty);
                 stage.addChild(segment);
                 energySegments.push(segment);
             }
 
-            const energyText = new PIXI.Text({
-                text: '3/5',
-                style: { fontFamily: 'Arial', fontSize: 12, fill: 0xffffff }
+            const energyText = gfx.createText(`${energyValue}/5`, {
+                fontSize: 12,
+                fill: colors.textPrimary
             });
             energyText.x = 345;
             energyText.y = 170;
             stage.addChild(energyText);
 
             // Animate bars periodically
-            setInterval(() => {
+            animationInterval = setInterval(() => {
+                const colors = getColors();
+
                 // Animate health
                 healthValue = Math.max(10, Math.min(100, healthValue + (Math.random() > 0.5 ? 5 : -5)));
                 healthFill.clear();
                 healthFill.roundRect(30, 65, 300 * (healthValue / 100), 20, 10);
-                healthFill.fill(healthValue > 30 ? 0x22c55e : 0xef4444);
+                healthFill.fill(healthValue > 30 ? colors.healthFill : colors.healthLow);
                 healthText.text = `${healthValue}/100`;
 
                 // Animate XP
@@ -150,10 +253,35 @@
                 if (xpValue >= 100) xpValue = 0;
                 xpFill.clear();
                 xpFill.roundRect(30, 120, 300 * (xpValue / 100), 14, 7);
-                xpFill.fill(0x8b5cf6);
+                xpFill.fill(colors.xpFill);
                 xpText.text = `${xpValue}%`;
             }, 1000);
+        }
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage) {
+                await loadFrameworkFont();
+                createDemoContent();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
+
+        (async () => {
+            // Load framework font
+            await loadFrameworkFont();
+
+            await game.initialize(canvas, '2d');
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
 
+            setupThemeListener();
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            createDemoContent();
             game.start();
         })();
     </script>

From 8d75fdb5c276470245c0c6ee38a09487593829f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Can=20Erdog=CC=86an?= <can@canerdogan.net>
Date: Mon, 26 Jan 2026 15:02:22 +0300
Subject: [PATCH 04/10] build: Update UMD bundle with HexagonLevelButton
 gradient support

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 docs-site/static/gamebyte.umd.js | 118 ++++++++++++++++++++-----------
 1 file changed, 76 insertions(+), 42 deletions(-)

diff --git a/docs-site/static/gamebyte.umd.js b/docs-site/static/gamebyte.umd.js
index 8f1878a..0c67af1 100644
--- a/docs-site/static/gamebyte.umd.js
+++ b/docs-site/static/gamebyte.umd.js
@@ -42074,58 +42074,66 @@
 	    },
 	    // Hexagon level colors
 	    HEXAGON_BLUE: {
-	        fill: 0x3D85C6,
+	        fill: 0x4DA6FF,
+	        fillBottom: 0x2E7BC9,
 	        border: 0x1A3A5C,
-	        highlight: 0x6DB3F2,
+	        highlight: 0x7DBFFF,
 	        text: 0xFFFFFF,
 	        textStroke: 0x1A3A5C
 	    },
 	    HEXAGON_LOCKED: {
-	        fill: 0x5C6370,
-	        border: 0x3A3F47,
-	        highlight: 0x7A8089,
-	        text: 0xCCCCCC,
-	        textStroke: 0x2A2E35
+	        fill: 0x6B7280,
+	        fillBottom: 0x4B5563,
+	        border: 0x374151,
+	        highlight: 0x9CA3AF,
+	        text: 0xD1D5DB,
+	        textStroke: 0x1F2937
 	    },
 	    HEXAGON_COMPLETED: {
-	        fill: 0x43A047,
-	        border: 0x1B5E20,
-	        highlight: 0x76D275,
+	        fill: 0x4ADE80,
+	        fillBottom: 0x22C55E,
+	        border: 0x166534,
+	        highlight: 0x86EFAC,
 	        text: 0xFFFFFF,
-	        textStroke: 0x1B5E20
+	        textStroke: 0x166534
 	    },
 	    HEXAGON_CURRENT: {
-	        fill: 0x5C6BC0,
-	        border: 0x283593,
-	        highlight: 0x8E99F3,
+	        fill: 0x818CF8,
+	        fillBottom: 0x6366F1,
+	        border: 0x3730A3,
+	        highlight: 0xA5B4FC,
 	        text: 0xFFFFFF,
-	        textStroke: 0x283593
+	        textStroke: 0x3730A3,
+	        glow: 0x818CF8
 	    },
 	    // Candy Crush style hexagon with golden border
 	    HEXAGON_CANDY_BLUE: {
-	        fill: 0x4A7BB7,
-	        border: 0xFFB300,
-	        highlight: 0x6B9BD1,
+	        fill: 0x5DADE2,
+	        fillBottom: 0x3498DB,
+	        border: 0xF1C40F,
+	        highlight: 0x85C1E9,
 	        text: 0xFFFFFF,
-	        textStroke: 0x2D4A6E,
-	        outerBorder: 0xCC8800
+	        textStroke: 0x21618C,
+	        outerBorder: 0xD4AC0D
 	    },
 	    HEXAGON_CANDY_CURRENT: {
-	        fill: 0x5A9BD4,
-	        border: 0xFFB300,
-	        highlight: 0x7BB8E8,
+	        fill: 0x7FB3D5,
+	        fillBottom: 0x5499C7,
+	        border: 0xF1C40F,
+	        highlight: 0xA9CCE3,
 	        text: 0xFFFFFF,
-	        textStroke: 0x2D5A7E,
-	        outerBorder: 0xCC8800,
-	        glow: 0x00FFFF
+	        textStroke: 0x2471A3,
+	        outerBorder: 0xD4AC0D,
+	        glow: 0x5DADE2
 	    },
 	    HEXAGON_CANDY_LOCKED: {
-	        fill: 0x4A5568,
-	        border: 0x718096,
-	        highlight: 0x5A6578,
-	        text: 0xA0AEC0,
-	        textStroke: 0x2D3748,
-	        outerBorder: 0x4A5568
+	        fill: 0x7F8C8D,
+	        fillBottom: 0x5D6D7E,
+	        border: 0x95A5A6,
+	        highlight: 0xAEB6BF,
+	        text: 0xBDC3C7,
+	        textStroke: 0x2C3E50,
+	        outerBorder: 0x566573
 	    },
 	    // Panel color schemes (matches No Ads popup style)
 	    PANEL_BLUE: {
@@ -44362,7 +44370,7 @@
 	     * Render hexagon graphics
 	     */
 	    render() {
-	        const { size, colorScheme, state } = this.config;
+	        const { size, colorScheme } = this.config;
 	        // Clear graphics
 	        this.shadowGraphics.clear();
 	        this.borderGraphics.clear();
@@ -44389,19 +44397,45 @@
 	            this.drawHexagon(this.borderGraphics, 0, pressOffset, size);
 	            this.borderGraphics.fill({ color: colors.border });
 	        }
-	        // 3. Main fill (blue hexagon)
-	        this.drawHexagon(this.fillGraphics, 0, pressOffset, size - borderWidth * 2);
-	        this.fillGraphics.fill({ color: colors.fill });
+	        // 3. Main fill with gradient (top lighter, bottom darker)
+	        const fillSize = size - borderWidth * 2;
+	        const fillTop = colors.fill;
+	        const fillBottom = colors.fillBottom || darkenColor$1(colors.fill, 0.15);
+	        // Draw hexagon shape
+	        this.drawHexagon(this.fillGraphics, 0, pressOffset, fillSize);
+	        // Create gradient texture for fill
+	        const textureSize = Math.ceil(fillSize);
+	        const gradientTexture = graphics().createCanvasTexture(textureSize, textureSize, (ctx) => {
+	            const gradient = ctx.createLinearGradient(0, 0, 0, textureSize);
+	            gradient.addColorStop(0, numberToHex(fillTop));
+	            gradient.addColorStop(0.35, numberToHex(fillTop));
+	            gradient.addColorStop(1, numberToHex(fillBottom));
+	            ctx.fillStyle = gradient;
+	            ctx.fillRect(0, 0, textureSize, textureSize);
+	        });
+	        // Apply texture fill with matrix transform to center it
+	        try {
+	            const matrix = {
+	                a: 1, b: 0, c: 0, d: 1,
+	                tx: -fillSize / 2,
+	                ty: pressOffset - fillSize / 2
+	            };
+	            this.fillGraphics.fill({ texture: gradientTexture, matrix: matrix });
+	        }
+	        catch {
+	            // Fallback to solid color if texture fill not supported
+	            this.fillGraphics.fill({ color: colors.fill });
+	        }
 	        // 3.5 Inner bevel effect for 3D look
 	        if (colors.outerBorder) {
-	            // Top inner highlight
-	            this.drawHexagonBevel(this.fillGraphics, 0, pressOffset - 3, size - borderWidth * 2 - 6, 0xFFFFFF, 0.2);
+	            // Top inner highlight (subtle white glow)
+	            this.drawHexagonBevel(this.fillGraphics, 0, pressOffset - 3, fillSize - 6, 0xFFFFFF, 0.25);
 	            // Bottom inner shadow
-	            this.drawHexagonBevel(this.fillGraphics, 0, pressOffset + 3, size - borderWidth * 2 - 6, 0x000000, 0.15);
+	            this.drawHexagonBevel(this.fillGraphics, 0, pressOffset + 3, fillSize - 6, 0x000000, 0.2);
 	        }
-	        // 4. Inner highlight (top half)
+	        // 4. Inner highlight (top shine)
 	        if (!this.isPressed) {
-	            this.drawHexagonHighlight(this.highlightGraphics, 0, pressOffset - 2, size - borderWidth * 2 - 4, colors.highlight);
+	            this.drawHexagonHighlight(this.highlightGraphics, 0, pressOffset - 2, fillSize - 4, colors.highlight);
 	        }
 	        // Update text position
 	        this.levelText.y = pressOffset;
@@ -44442,7 +44476,7 @@
 	    /**
 	     * Draw hexagon highlight (top portion only)
 	     */
-	    drawHexagonHighlight(g, cx, cy, size, color) {
+	    drawHexagonHighlight(g, cx, cy, size, _color) {
 	        // Create a highlight that covers top half of hexagon
 	        const halfSize = size / 2;
 	        const angleOffset = Math.PI / 6;

From db0e0fd3af471b45ea937d838bd92d50b2cd719f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Can=20Erdog=CC=86an?= <can@canerdogan.net>
Date: Mon, 26 Jan 2026 15:02:27 +0300
Subject: [PATCH 05/10] docs: Add CLAUDE.md with project instructions for
 Claude Code

- Document build commands and key directories
- Explain Laravel-inspired architecture patterns
- Add graphics abstraction and rendering API guidelines
- Include testing and code style conventions

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 CLAUDE.md | 190 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..70f8051
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,190 @@
+# GameByte Framework - Claude Code Instructions
+
+## Project Overview
+
+GameByte is a modern mobile-first game development framework that unifies 2D and 3D game development using **Laravel-inspired architecture**. Built with TypeScript, it provides service providers, dependency injection, facades, and a powerful abstraction layer over Pixi.js v8 (2D) and Three.js (3D).
+
+## Quick Reference
+
+### Build & Development
+
+```bash
+npm run build          # Build (TypeScript + Rollup ESM/CJS/UMD)
+npm run dev            # Watch mode (TypeScript only)
+npm test               # Run all tests
+npm run test:watch     # Watch tests
+npm run test:coverage  # Coverage report
+npm run lint           # ESLint check
+npx http-server -p 8080  # Serve demos locally
+```
+
+### Key Directories
+
+```
+src/
+├── core/           # ServiceContainer, GameByte main class
+├── contracts/      # TypeScript interfaces (Graphics, Audio, Physics, etc.)
+├── facades/        # Static facades (Renderer, Scenes, UI, Audio, Input, etc.)
+├── rendering/      # PixiRenderer, ThreeRenderer, HybridRenderer
+├── ui/             # UI components, screens, panels, themes
+│   ├── components/ # UIButton, UIPanel, GameStyleButton, TopBar, etc.
+│   ├── screens/    # BaseUIScreen, HubScreen, ResultScreen
+│   ├── panels/     # GameModalPanel, GameBottomSheet
+│   └── themes/     # DefaultUITheme, GameStyleUITheme
+├── scenes/         # BaseScene, scene management
+├── physics/        # Matter.js (2D) & Cannon.js (3D) integration
+├── audio/          # Audio system (music, SFX, spatial)
+├── input/          # Touch, keyboard, gamepad handling
+└── graphics/       # GraphicsEngine, PixiGraphicsFactory, ThreeGraphicsFactory
+```
+
+## Architecture Patterns
+
+### Laravel-Inspired Service Container
+
+```typescript
+// Bind services
+game.bind('my.service', () => new MyService());
+game.singleton('global.service', () => new GlobalService());
+
+// Resolve services
+const service = game.make('my.service');
+```
+
+### Facades (Static Access)
+
+```typescript
+import { Renderer, Scenes, UI, Audio, Input, Physics } from 'gamebyte-framework';
+
+Renderer.start();
+await Scenes.switchTo('game');
+Audio.playMusic('background');
+```
+
+### Graphics Abstraction Layer
+
+The framework uses `IGraphics`, `IContainer`, `IText`, `ISprite` interfaces defined in `src/contracts/Graphics.ts` to abstract over Pixi.js and Three.js. This allows UI components to work with both renderers.
+
+```typescript
+import { graphics } from '../../graphics/GraphicsEngine';
+
+const factory = graphics();
+const container = factory.createContainer();
+const text = factory.createText('Hello', { fontSize: 24 });
+const gfx = factory.createGraphics();
+gfx.roundRect(0, 0, 100, 50, 10).fill({ color: 0x4CAF50 });
+```
+
+## Testing
+
+- **Framework**: Jest with jsdom
+- **Config**: `jest.config.cjs`
+- **Tests location**: `tests/__tests__/`
+- **Mocking**: Create mock renderers for Pixi.js objects (see `tests/__tests__/core/GameByte.test.ts`)
+
+Run specific test patterns:
+```bash
+npm run test:unit         # Unit tests only
+npm run test:integration  # Integration tests only
+```
+
+## Common Patterns
+
+### Creating UI Components
+
+UI components extend `EventEmitter` and use the graphics factory:
+
+```typescript
+export class MyComponent extends EventEmitter {
+  private container: IContainer;
+
+  constructor() {
+    super();
+    const factory = graphics();
+    this.container = factory.createContainer();
+    // Build component...
+  }
+
+  getContainer(): IContainer {
+    return this.container;
+  }
+}
+```
+
+### Font Loading
+
+The framework uses Lilita One font loaded via `src/ui/utils/FontLoader.ts`:
+
+```typescript
+import { loadFrameworkFont, getFrameworkFontFamily } from '../utils/FontLoader';
+
+// In constructor (non-blocking)
+loadFrameworkFont();
+
+// For text styles
+const style = { fontFamily: getFrameworkFontFamily() };
+```
+
+## Rendering APIs
+
+### Pixi.js v8 Graphics API (Modern)
+
+Use the modern Pixi v8 API, NOT the legacy API:
+
+```typescript
+// CORRECT - Pixi v8 style
+graphics.roundRect(x, y, width, height, radius);
+graphics.fill({ color: 0xFF0000, alpha: 0.8 });
+graphics.stroke({ color: 0x000000, width: 2 });
+
+// WRONG - Legacy Pixi v7 style
+graphics.beginFill(0xFF0000);  // Don't use
+graphics.drawRoundedRect(...); // Don't use
+graphics.endFill();            // Don't use
+```
+
+### IGraphics Interface Methods
+
+- `rect()`, `roundRect()`, `circle()`, `ellipse()`, `poly()`
+- `fill()`, `stroke()`
+- `moveTo()`, `lineTo()`, `arc()`, `closePath()`
+- `clear()`
+
+## Important Notes
+
+### Breaking Changes
+
+When modifying interfaces in `src/contracts/`, ensure ALL implementations are updated:
+- `src/graphics/PixiGraphicsFactory.ts`
+- `src/graphics/ThreeGraphicsFactory.ts`
+- Any UI components using those interfaces
+
+### Module System
+
+The project uses ESM with `.js` extensions in TypeScript imports. Jest is configured to handle this via `moduleNameMapper`:
+
+```javascript
+// jest.config.cjs
+moduleNameMapper: {
+  '^(\\.{1,2}/.*)\\.js$': '$1'  // Maps .js imports to .ts files
+}
+```
+
+### UMD Build
+
+For browser usage without bundlers, use `dist/gamebyte.umd.js`. It exposes `window.GameByteFramework`.
+
+## Code Style
+
+- TypeScript strict mode
+- EventEmitter3 for event handling
+- Interfaces prefixed with `I` (e.g., `IContainer`, `IGraphics`)
+- Constants in SCREAMING_SNAKE_CASE
+- Private members prefixed with underscore or using `private` keyword
+
+## Documentation
+
+- Main README: `README.md`
+- Agent-specific docs: `docs/agent-guide/CORE_API.md`
+- 3D setup guide: `docs/guides/rendering-3d-setup.md`
+- Live demos: `docs-site/static/demos/`

From a7bbe7be1d64be67d9cf024a59efc81fa7e00c5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Can=20Erdog=CC=86an?= <can@canerdogan.net>
Date: Mon, 26 Jan 2026 15:02:30 +0300
Subject: [PATCH 06/10] chore: Update Claude Code local permissions

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .claude/settings.local.json | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 3388e7f..5d6127e 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -43,7 +43,23 @@
       "Bash(gh api:*)",
       "Bash(yes:*)",
       "Bash(/bin/rm:*)",
-      "Bash(/bin/cp:*)"
+      "Bash(/bin/cp:*)",
+      "Bash(while read commit)",
+      "Bash(do echo \"=== Commit: $commit ===\")",
+      "Skill(brainstorming)",
+      "mcp__context7__resolve-library-id",
+      "mcp__context7__query-docs",
+      "WebSearch",
+      "Skill(commit-commands:commit)",
+      "Bash(node --check:*)",
+      "Bash(do if grep -q \"detectTheme\" \"$f\")",
+      "Bash(__NEW_LINE_8f124783812c7d50__ echo \"\")",
+      "Bash(do)",
+      "Bash(if ! grep -q \"isRecreating\" \"$file\")",
+      "Bash(then)",
+      "Bash(node -e:*)",
+      "Bash(unalias:*)",
+      "Bash(gh repo view:*)"
     ],
     "deny": [],
     "ask": []

From 564f659e8af60c790f63174b7c9506ad7024d040 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Can=20Erdog=CC=86an?= <can@canerdogan.net>
Date: Mon, 26 Jan 2026 16:39:15 +0300
Subject: [PATCH 07/10] fix(demos): Use graphics abstraction for texture
 creation

Replace direct PIXI.Texture.from() calls with gfx.createTexture()
to follow the framework's graphics abstraction layer.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 docs-site/static/demos/bottom-nav-demo.html   |   2 +-
 docs-site/static/demos/game-tooltip-demo.html | 350 +++++++++++
 docs-site/static/demos/game-topbar-demo.html  |   2 +-
 docs-site/static/demos/ui-panel-variants.html |   2 +-
 docs-site/static/gamebyte.umd.js              | 421 ++++++++++++-
 docs-site/static/llms-full.txt                |  68 ++
 docs-site/static/llms.txt                     |  16 +
 docs/agent-guide/CORE_API.md                  |  19 +
 docs/agent-guide/QUICK_REFERENCE.md           |   4 +-
 docs/components/game-tooltip.md               | 263 ++++++++
 src/index.ts                                  |   3 +
 src/ui/components/GameTooltip.ts              | 583 ++++++++++++++++++
 12 files changed, 1727 insertions(+), 6 deletions(-)
 create mode 100644 docs-site/static/demos/game-tooltip-demo.html
 create mode 100644 docs/components/game-tooltip.md
 create mode 100644 src/ui/components/GameTooltip.ts

diff --git a/docs-site/static/demos/bottom-nav-demo.html b/docs-site/static/demos/bottom-nav-demo.html
index 59dfc52..226d645 100644
--- a/docs-site/static/demos/bottom-nav-demo.html
+++ b/docs-site/static/demos/bottom-nav-demo.html
@@ -124,7 +124,7 @@
             gradient.addColorStop(1, colors.gradientBottom);
             ctx.fillStyle = gradient;
             ctx.fillRect(0, 0, CONFIG.width, CONFIG.height);
-            bg.texture(PIXI.Texture.from(gradCanvas));
+            bg.texture(gfx.createTexture(gradCanvas));
             bg.rect(0, 0, CONFIG.width, CONFIG.height);
             bg.fill();
             stage.addChild(bg);
diff --git a/docs-site/static/demos/game-tooltip-demo.html b/docs-site/static/demos/game-tooltip-demo.html
new file mode 100644
index 0000000..a621e92
--- /dev/null
+++ b/docs-site/static/demos/game-tooltip-demo.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GameTooltip Demo - GameByte Framework</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { overflow: hidden; background: #1a1a2e; transition: background 0.3s ease; }
+        body.light-theme { background: #e8eef5; }
+        canvas { display: block; margin: 0 auto; }
+    </style>
+</head>
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.js"></script>
+    <script src="/gamebyte.umd.js"></script>
+
+    <script>
+        // =====================================================
+        // GameTooltip Demo - Speech Bubble Style Tooltips
+        // =====================================================
+        // This demo showcases:
+        // - GameTooltip component with various tail positions
+        // - Multiple color scheme presets
+        // - Auto-sizing based on text content
+        // - Interactive show/hide functionality
+        // =====================================================
+
+        const {
+            createGame,
+            GameTooltip,
+            GameTooltipColors,
+            GameStyleButton,
+            GameStyleColors,
+            graphics,
+            loadFrameworkFont
+        } = GameByteFramework;
+
+        const CONFIG = { width: 500, height: 700 };
+
+        // ===== THEME DETECTION =====
+        function detectTheme() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                    if (parentTheme) return parentTheme;
+                }
+            } catch (e) { /* Cross-origin */ }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const themeParam = urlParams.get('theme');
+            if (themeParam) return themeParam;
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                return 'light';
+            }
+            return 'dark';
+        }
+
+        let currentTheme = detectTheme();
+
+        function setupThemeListener() {
+            try {
+                if (window.parent && window.parent.document) {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.attributeName === 'data-theme') {
+                                const newTheme = window.parent.document.documentElement.getAttribute('data-theme');
+                                if (newTheme && newTheme !== currentTheme) {
+                                    currentTheme = newTheme;
+                                    applyTheme();
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(window.parent.document.documentElement, { attributes: true });
+                }
+            } catch (e) {
+                window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+                    currentTheme = e.matches ? 'light' : 'dark';
+                    applyTheme();
+                });
+            }
+        }
+
+        // ===== THEME COLOR PALETTES =====
+        const THEME_COLORS = {
+            dark: {
+                bgColor: 0x1a1a2e,
+                titleColor: 0xffffff,
+                labelColor: 0x888888
+            },
+            light: {
+                bgColor: 0xe8eef5,
+                titleColor: 0x2d2d44,
+                labelColor: 0x6b7280
+            }
+        };
+
+        function getColors() {
+            return THEME_COLORS[currentTheme] || THEME_COLORS.dark;
+        }
+
+        const canvas = document.createElement('canvas');
+        canvas.width = CONFIG.width;
+        canvas.height = CONFIG.height;
+        document.body.appendChild(canvas);
+
+        const game = createGame();
+        let renderer, stage;
+
+        let isRecreating = false;
+        async function applyTheme() {
+            if (isRecreating) return;
+            isRecreating = true;
+
+            document.body.classList.toggle('light-theme', currentTheme === 'light');
+            if (stage && window.createScreen) {
+                await loadFrameworkFont();
+                window.createScreen();
+            }
+            setTimeout(() => { isRecreating = false; }, 100);
+        }
+
+        (async () => {
+            // Load framework font
+            await loadFrameworkFont();
+
+            await game.initialize(canvas, '2d');
+            renderer = game.make('renderer');
+            stage = renderer.getStage();
+
+            setupThemeListener();
+
+            function createScreen() {
+                const colors = getColors();
+                const gfx = graphics();
+
+                // Clear stage
+                while (stage.children.length > 0) {
+                    stage.removeChildAt(0);
+                }
+
+                // ===== BACKGROUND =====
+                const bg = gfx.createGraphics();
+                bg.rect(0, 0, CONFIG.width, CONFIG.height);
+                bg.fill(colors.bgColor);
+                stage.addChild(bg);
+
+                // ===== TITLE =====
+                const title = gfx.createText('GameTooltip', {
+                    fontSize: 24,
+                    fontWeight: 'bold',
+                    fill: colors.titleColor
+                });
+                title.x = (CONFIG.width - title.width) / 2;
+                title.y = 20;
+                stage.addChild(title);
+
+                // ===== SECTION 1: Color Schemes =====
+                const section1Label = gfx.createText('Color Schemes', {
+                    fontSize: 14,
+                    fill: colors.labelColor
+                });
+                section1Label.x = 20;
+                section1Label.y = 65;
+                stage.addChild(section1Label);
+
+                // Row 1: CYAN (default), YELLOW, GREEN
+                const colorSchemes = [
+                    { scheme: GameTooltipColors.CYAN, text: 'Coming Soon', x: 50 },
+                    { scheme: GameTooltipColors.YELLOW, text: 'Warning!', x: 190 },
+                    { scheme: GameTooltipColors.GREEN, text: 'Success', x: 330 },
+                ];
+
+                colorSchemes.forEach((config, i) => {
+                    const tooltip = new GameTooltip({
+                        text: config.text,
+                        colorScheme: config.scheme,
+                        tailPosition: 'bottom-left',
+                        fontSize: 14
+                    });
+                    tooltip.setPosition(config.x, 95);
+                    stage.addChild(tooltip.getContainer());
+                });
+
+                // Row 2: RED, PURPLE, DARK
+                const colorSchemes2 = [
+                    { scheme: GameTooltipColors.RED, text: 'Error', x: 50 },
+                    { scheme: GameTooltipColors.PURPLE, text: 'Pro Tip', x: 190 },
+                    { scheme: GameTooltipColors.DARK, text: 'Hint', x: 330 },
+                ];
+
+                colorSchemes2.forEach((config, i) => {
+                    const tooltip = new GameTooltip({
+                        text: config.text,
+                        colorScheme: config.scheme,
+                        tailPosition: 'bottom-center',
+                        fontSize: 14
+                    });
+                    tooltip.setPosition(config.x, 165);
+                    stage.addChild(tooltip.getContainer());
+                });
+
+                // ===== SECTION 2: Tail Positions =====
+                const section2Label = gfx.createText('Tail Positions', {
+                    fontSize: 14,
+                    fill: colors.labelColor
+                });
+                section2Label.x = 20;
+                section2Label.y = 235;
+                stage.addChild(section2Label);
+
+                // Top tails
+                const topTails = [
+                    { pos: 'top-left', x: 50 },
+                    { pos: 'top-center', x: 190 },
+                    { pos: 'top-right', x: 330 },
+                ];
+
+                topTails.forEach((config) => {
+                    const tooltip = new GameTooltip({
+                        text: config.pos,
+                        tailPosition: config.pos,
+                        fontSize: 12,
+                        padding: 8
+                    });
+                    tooltip.setPosition(config.x, 280);
+                    stage.addChild(tooltip.getContainer());
+                });
+
+                // Bottom tails
+                const bottomTails = [
+                    { pos: 'bottom-left', x: 50 },
+                    { pos: 'bottom-center', x: 190 },
+                    { pos: 'bottom-right', x: 330 },
+                ];
+
+                bottomTails.forEach((config) => {
+                    const tooltip = new GameTooltip({
+                        text: config.pos,
+                        tailPosition: config.pos,
+                        fontSize: 12,
+                        padding: 8
+                    });
+                    tooltip.setPosition(config.x, 340);
+                    stage.addChild(tooltip.getContainer());
+                });
+
+                // Side tails
+                const sideTails = [
+                    { pos: 'left-center', x: 80 },
+                    { pos: 'right-center', x: 280 },
+                    { pos: 'none', x: 400 },
+                ];
+
+                sideTails.forEach((config) => {
+                    const tooltip = new GameTooltip({
+                        text: config.pos,
+                        tailPosition: config.pos,
+                        fontSize: 12,
+                        padding: 8,
+                        colorScheme: GameTooltipColors.PURPLE
+                    });
+                    tooltip.setPosition(config.x, 400);
+                    stage.addChild(tooltip.getContainer());
+                });
+
+                // ===== SECTION 3: Multi-line & Custom =====
+                const section3Label = gfx.createText('Multi-line & Custom', {
+                    fontSize: 14,
+                    fill: colors.labelColor
+                });
+                section3Label.x = 20;
+                section3Label.y = 470;
+                stage.addChild(section3Label);
+
+                // Multi-line tooltip
+                const multiLineTooltip = new GameTooltip({
+                    text: 'This is a longer tooltip\nwith multiple lines',
+                    maxWidth: 180,
+                    tailPosition: 'bottom-left',
+                    fontSize: 14
+                });
+                multiLineTooltip.setPosition(50, 505);
+                stage.addChild(multiLineTooltip.getContainer());
+
+                // Large custom tooltip
+                const customTooltip = new GameTooltip({
+                    text: 'New Feature!',
+                    colorScheme: {
+                        background: 0xFF6B6B,
+                        border: 0x8B0000,
+                        text: 0xFFFFFF,
+                        textStroke: 0x8B0000
+                    },
+                    tailPosition: 'top-center',
+                    fontSize: 18,
+                    borderRadius: 15,
+                    borderWidth: 4,
+                    tailSize: 12
+                });
+                customTooltip.setPosition(280, 530);
+                stage.addChild(customTooltip.getContainer());
+
+                // ===== SECTION 4: Interactive Demo =====
+                const section4Label = gfx.createText('Interactive (Click button)', {
+                    fontSize: 14,
+                    fill: colors.labelColor
+                });
+                section4Label.x = 20;
+                section4Label.y = 600;
+                stage.addChild(section4Label);
+
+                // Interactive tooltip (starts hidden)
+                const interactiveTooltip = new GameTooltip({
+                    text: 'Toggle me!',
+                    tailPosition: 'bottom-center',
+                    colorScheme: GameTooltipColors.GREEN
+                });
+                interactiveTooltip.setPosition(180, 590);
+                interactiveTooltip.hide();
+                stage.addChild(interactiveTooltip.getContainer());
+
+                // Toggle button
+                const toggleBtn = new GameStyleButton({
+                    text: 'Show',
+                    width: 100,
+                    height: 45,
+                    fontSize: 16,
+                    colorScheme: GameStyleColors.BUTTON_GREEN
+                });
+                toggleBtn.setPosition(190, 640);
+                toggleBtn.on('click', () => {
+                    interactiveTooltip.toggle();
+                    toggleBtn.setText(interactiveTooltip.isVisible() ? 'Hide' : 'Show');
+                });
+                stage.addChild(toggleBtn.getContainer());
+            }
+
+            // Expose for theme switching
+            window.createScreen = createScreen;
+
+            // Initial render
+            createScreen();
+            game.start();
+        })();
+    </script>
+</body>
+</html>
diff --git a/docs-site/static/demos/game-topbar-demo.html b/docs-site/static/demos/game-topbar-demo.html
index 150094e..8b6b9e3 100644
--- a/docs-site/static/demos/game-topbar-demo.html
+++ b/docs-site/static/demos/game-topbar-demo.html
@@ -121,7 +121,7 @@
             gradient.addColorStop(1, colors.gradientBottom);
             ctx.fillStyle = gradient;
             ctx.fillRect(0, 0, CONFIG.width, CONFIG.height);
-            bg.texture(PIXI.Texture.from(gradCanvas));
+            bg.texture(gfx.createTexture(gradCanvas));
             bg.rect(0, 0, CONFIG.width, CONFIG.height);
             bg.fill();
             stage.addChild(bg);
diff --git a/docs-site/static/demos/ui-panel-variants.html b/docs-site/static/demos/ui-panel-variants.html
index 0aea4ac..c3ff967 100644
--- a/docs-site/static/demos/ui-panel-variants.html
+++ b/docs-site/static/demos/ui-panel-variants.html
@@ -188,7 +188,7 @@
             ctx.roundRect(0, 0, 360, 60, 12);
             ctx.fill();
 
-            const gradPanel = gfx.createSprite(PIXI.Texture.from(gradientCanvas));
+            const gradPanel = gfx.createSprite(gfx.createTexture(gradientCanvas));
             gradPanel.x = 20;
             gradPanel.y = 175;
             stage.addChild(gradPanel);
diff --git a/docs-site/static/gamebyte.umd.js b/docs-site/static/gamebyte.umd.js
index 0c67af1..b47c684 100644
--- a/docs-site/static/gamebyte.umd.js
+++ b/docs-site/static/gamebyte.umd.js
@@ -45943,6 +45943,420 @@
 	    },
 	};
 
+	/**
+	 * Default color scheme matching the "Coming Soon" tooltip style
+	 */
+	const DEFAULT_TOOLTIP_COLORS = {
+	    background: 0x7DD3FC, // Light cyan/sky blue
+	    border: 0x1E3A5F, // Dark navy blue
+	    text: 0xFFFFFF, // White
+	    textStroke: 0x1E3A5F, // Dark navy for text stroke
+	    shadow: 0x000000, // Black shadow
+	};
+	/**
+	 * Preset color schemes for common tooltip styles
+	 */
+	const GameTooltipColors = {
+	    /** Light blue/cyan (default - matches the "Coming Soon" style) */
+	    CYAN: { ...DEFAULT_TOOLTIP_COLORS },
+	    /** Classic yellow warning tooltip */
+	    YELLOW: {
+	        background: 0xFDE047,
+	        border: 0x92400E,
+	        text: 0x422006,
+	        textStroke: undefined,
+	        shadow: 0x000000,
+	    },
+	    /** Green success tooltip */
+	    GREEN: {
+	        background: 0x86EFAC,
+	        border: 0x166534,
+	        text: 0xFFFFFF,
+	        textStroke: 0x166534,
+	        shadow: 0x000000,
+	    },
+	    /** Red error/warning tooltip */
+	    RED: {
+	        background: 0xFCA5A5,
+	        border: 0x991B1B,
+	        text: 0xFFFFFF,
+	        textStroke: 0x991B1B,
+	        shadow: 0x000000,
+	    },
+	    /** Purple/violet tooltip */
+	    PURPLE: {
+	        background: 0xD8B4FE,
+	        border: 0x6B21A8,
+	        text: 0xFFFFFF,
+	        textStroke: 0x6B21A8,
+	        shadow: 0x000000,
+	    },
+	    /** Dark tooltip (for light backgrounds) */
+	    DARK: {
+	        background: 0x374151,
+	        border: 0x111827,
+	        text: 0xFFFFFF,
+	        textStroke: undefined,
+	        shadow: 0x000000,
+	    },
+	    /** White tooltip (for dark backgrounds) */
+	    WHITE: {
+	        background: 0xFFFFFF,
+	        border: 0xD1D5DB,
+	        text: 0x374151,
+	        textStroke: undefined,
+	        shadow: 0x000000,
+	    },
+	};
+	/**
+	 * GameTooltip - Speech bubble style tooltip/popover component
+	 *
+	 * A versatile tooltip component that can be used for:
+	 * - Informational tooltips on hover
+	 * - Popovers on click/tap
+	 * - Status indicators (Coming Soon, New, etc.)
+	 * - Tutorial hints
+	 *
+	 * Features:
+	 * - Customizable tail/pointer position (12 positions + none)
+	 * - Multiple color scheme presets
+	 * - Auto-sizing based on text content
+	 * - Optional drop shadow
+	 * - Mobile-optimized rendering
+	 *
+	 * @example
+	 * ```typescript
+	 * const tooltip = new GameTooltip({
+	 *   text: 'Coming Soon',
+	 *   tailPosition: 'bottom-left',
+	 *   colorScheme: GameTooltipColors.CYAN
+	 * });
+	 *
+	 * tooltip.setPosition(100, 50);
+	 * stage.addChild(tooltip.getContainer());
+	 * ```
+	 */
+	class GameTooltip extends EventEmitter {
+	    constructor(config = {}) {
+	        super();
+	        this.bubbleWidth = 0;
+	        this.bubbleHeight = 0;
+	        // Trigger font loading (non-blocking)
+	        loadFrameworkFont();
+	        // Default configuration
+	        this.config = {
+	            text: config.text || 'Tooltip',
+	            maxWidth: config.maxWidth || 200,
+	            padding: config.padding || 12,
+	            fontSize: config.fontSize || 16,
+	            fontFamily: config.fontFamily || getFrameworkFontFamily(),
+	            colorScheme: config.colorScheme || DEFAULT_TOOLTIP_COLORS,
+	            borderRadius: config.borderRadius || 10,
+	            borderWidth: config.borderWidth || 3,
+	            tailPosition: config.tailPosition || 'bottom-left',
+	            tailSize: config.tailSize || 10,
+	            showShadow: config.showShadow !== false,
+	            shadowOffset: config.shadowOffset || 4,
+	            shadowAlpha: config.shadowAlpha || 0.3,
+	        };
+	        const factory = graphics();
+	        // Create container hierarchy
+	        this.container = factory.createContainer();
+	        // Create shadow layer
+	        this.shadowGraphics = factory.createGraphics();
+	        this.container.addChild(this.shadowGraphics);
+	        // Create bubble (background + border)
+	        this.bubbleGraphics = factory.createGraphics();
+	        this.container.addChild(this.bubbleGraphics);
+	        // Create text
+	        this.textField = this.createTextField();
+	        this.container.addChild(this.textField);
+	        // Initial render
+	        this.render();
+	    }
+	    /**
+	     * Create the text field
+	     */
+	    createTextField() {
+	        const { colorScheme, fontSize, fontFamily, maxWidth, padding } = this.config;
+	        const hasStroke = colorScheme.textStroke !== undefined;
+	        return graphics().createText(this.config.text, {
+	            fontFamily,
+	            fontSize,
+	            fontWeight: '700',
+	            fill: colorScheme.text,
+	            align: 'center',
+	            wordWrap: true,
+	            wordWrapWidth: maxWidth - padding * 2,
+	            ...(hasStroke && {
+	                stroke: colorScheme.textStroke,
+	                strokeThickness: Math.max(2, fontSize * 0.1),
+	            }),
+	        });
+	    }
+	    /**
+	     * Render the tooltip
+	     */
+	    render() {
+	        const { padding, borderWidth, colorScheme, showShadow, shadowOffset, shadowAlpha, } = this.config;
+	        // Calculate bubble dimensions based on text
+	        const textWidth = this.textField.width || 50;
+	        const textHeight = this.textField.height || 20;
+	        this.bubbleWidth = textWidth + padding * 2;
+	        this.bubbleHeight = textHeight + padding * 2;
+	        // Clear previous graphics
+	        this.shadowGraphics.clear();
+	        this.bubbleGraphics.clear();
+	        // Get tail info
+	        const tailInfo = this.getTailInfo();
+	        // Draw shadow (if enabled)
+	        if (showShadow && colorScheme.shadow !== undefined) {
+	            this.drawBubbleShape(this.shadowGraphics, shadowOffset, shadowOffset, colorScheme.shadow, shadowAlpha, tailInfo);
+	        }
+	        // Draw border (larger bubble behind)
+	        this.drawBubbleShape(this.bubbleGraphics, -borderWidth, -borderWidth, colorScheme.border, 1, tailInfo, borderWidth);
+	        // Draw main background
+	        this.drawBubbleShape(this.bubbleGraphics, 0, 0, colorScheme.background, 1, tailInfo);
+	        // Position text centered in bubble
+	        this.textField.x = padding;
+	        this.textField.y = padding;
+	    }
+	    /**
+	     * Get tail position and direction info
+	     */
+	    getTailInfo() {
+	        const { tailPosition } = this.config;
+	        if (tailPosition === 'none') {
+	            return { side: 'none', position: 'center' };
+	        }
+	        const [side, position] = tailPosition.split('-');
+	        // Normalize position names
+	        let normalizedPosition = 'center';
+	        if (position === 'left' || position === 'top') {
+	            normalizedPosition = 'start';
+	        }
+	        else if (position === 'right' || position === 'bottom') {
+	            normalizedPosition = 'end';
+	        }
+	        else if (position === 'center') {
+	            normalizedPosition = 'center';
+	        }
+	        return { side, position: normalizedPosition };
+	    }
+	    /**
+	     * Draw the bubble shape with optional tail
+	     */
+	    drawBubbleShape(gfx, offsetX, offsetY, color, alpha, tailInfo, extraSize = 0) {
+	        const { borderRadius, tailSize } = this.config;
+	        const w = this.bubbleWidth + extraSize * 2;
+	        const h = this.bubbleHeight + extraSize * 2;
+	        const r = Math.min(borderRadius + extraSize, w / 2, h / 2);
+	        const ts = tailSize + (extraSize > 0 ? extraSize * 0.5 : 0);
+	        const x = offsetX;
+	        const y = offsetY;
+	        // Start path
+	        gfx.moveTo(x + r, y);
+	        // Top edge
+	        if (tailInfo.side === 'top') {
+	            const tailX = this.getTailOffset(w, r, tailInfo.position);
+	            gfx.lineTo(x + tailX - ts, y);
+	            gfx.lineTo(x + tailX, y - ts);
+	            gfx.lineTo(x + tailX + ts, y);
+	        }
+	        gfx.lineTo(x + w - r, y);
+	        // Top-right corner
+	        gfx.arc(x + w - r, y + r, r, -Math.PI / 2, 0);
+	        // Right edge
+	        if (tailInfo.side === 'right') {
+	            const tailY = this.getTailOffset(h, r, tailInfo.position);
+	            gfx.lineTo(x + w, y + tailY - ts);
+	            gfx.lineTo(x + w + ts, y + tailY);
+	            gfx.lineTo(x + w, y + tailY + ts);
+	        }
+	        gfx.lineTo(x + w, y + h - r);
+	        // Bottom-right corner
+	        gfx.arc(x + w - r, y + h - r, r, 0, Math.PI / 2);
+	        // Bottom edge
+	        if (tailInfo.side === 'bottom') {
+	            const tailX = this.getTailOffset(w, r, tailInfo.position);
+	            gfx.lineTo(x + tailX + ts, y + h);
+	            gfx.lineTo(x + tailX, y + h + ts);
+	            gfx.lineTo(x + tailX - ts, y + h);
+	        }
+	        gfx.lineTo(x + r, y + h);
+	        // Bottom-left corner
+	        gfx.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI);
+	        // Left edge
+	        if (tailInfo.side === 'left') {
+	            const tailY = this.getTailOffset(h, r, tailInfo.position);
+	            gfx.lineTo(x, y + tailY + ts);
+	            gfx.lineTo(x - ts, y + tailY);
+	            gfx.lineTo(x, y + tailY - ts);
+	        }
+	        gfx.lineTo(x, y + r);
+	        // Top-left corner
+	        gfx.arc(x + r, y + r, r, Math.PI, -Math.PI / 2);
+	        // Close and fill
+	        gfx.closePath();
+	        gfx.fill({ color, alpha });
+	    }
+	    /**
+	     * Calculate tail offset based on position
+	     */
+	    getTailOffset(dimension, radius, position) {
+	        const { tailSize } = this.config;
+	        const minOffset = radius + tailSize + 5;
+	        const maxOffset = dimension - radius - tailSize - 5;
+	        switch (position) {
+	            case 'start':
+	                return Math.max(minOffset, dimension * 0.25);
+	            case 'center':
+	                return dimension / 2;
+	            case 'end':
+	                return Math.min(maxOffset, dimension * 0.75);
+	            default:
+	                return dimension / 2;
+	        }
+	    }
+	    /**
+	     * Set the tooltip text
+	     */
+	    setText(text) {
+	        this.config.text = text;
+	        this.textField.text = text;
+	        this.render();
+	        return this;
+	    }
+	    /**
+	     * Get the current text
+	     */
+	    getText() {
+	        return this.config.text;
+	    }
+	    /**
+	     * Set the tail position
+	     */
+	    setTailPosition(position) {
+	        this.config.tailPosition = position;
+	        this.render();
+	        return this;
+	    }
+	    /**
+	     * Set the color scheme
+	     */
+	    setColorScheme(scheme) {
+	        this.config.colorScheme = scheme;
+	        // Recreate text with new colors
+	        this.container.removeChild(this.textField);
+	        this.textField = this.createTextField();
+	        this.container.addChild(this.textField);
+	        this.render();
+	        return this;
+	    }
+	    /**
+	     * Set tooltip position
+	     */
+	    setPosition(x, y) {
+	        this.container.x = x;
+	        this.container.y = y;
+	        return this;
+	    }
+	    /**
+	     * Get tooltip position
+	     */
+	    getPosition() {
+	        return { x: this.container.x, y: this.container.y };
+	    }
+	    /**
+	     * Show the tooltip
+	     */
+	    show() {
+	        this.container.visible = true;
+	        this.emit('show');
+	        return this;
+	    }
+	    /**
+	     * Hide the tooltip
+	     */
+	    hide() {
+	        this.container.visible = false;
+	        this.emit('hide');
+	        return this;
+	    }
+	    /**
+	     * Toggle visibility
+	     */
+	    toggle() {
+	        if (this.container.visible) {
+	            this.hide();
+	        }
+	        else {
+	            this.show();
+	        }
+	        return this;
+	    }
+	    /**
+	     * Check if tooltip is visible
+	     */
+	    isVisible() {
+	        return this.container.visible;
+	    }
+	    /**
+	     * Set visibility
+	     */
+	    setVisible(visible) {
+	        this.container.visible = visible;
+	        return this;
+	    }
+	    /**
+	     * Get the bubble dimensions
+	     */
+	    getSize() {
+	        return {
+	            width: this.bubbleWidth,
+	            height: this.bubbleHeight,
+	        };
+	    }
+	    /**
+	     * Get the total bounds including tail and shadow
+	     */
+	    getTotalBounds() {
+	        const { tailSize, showShadow, shadowOffset } = this.config;
+	        const tailInfo = this.getTailInfo();
+	        let width = this.bubbleWidth;
+	        let height = this.bubbleHeight;
+	        let tailOffset = 0;
+	        // Add tail size to appropriate dimension
+	        if (tailInfo.side === 'left' || tailInfo.side === 'right') {
+	            width += tailSize;
+	            tailOffset = tailInfo.side === 'left' ? tailSize : 0;
+	        }
+	        else if (tailInfo.side === 'top' || tailInfo.side === 'bottom') {
+	            height += tailSize;
+	            tailOffset = tailInfo.side === 'top' ? tailSize : 0;
+	        }
+	        // Add shadow
+	        if (showShadow) {
+	            width += shadowOffset;
+	            height += shadowOffset;
+	        }
+	        return { width, height, tailOffset };
+	    }
+	    /**
+	     * Get the container
+	     */
+	    getContainer() {
+	        return this.container;
+	    }
+	    /**
+	     * Destroy the tooltip
+	     */
+	    destroy() {
+	        this.container.destroy();
+	        this.removeAllListeners();
+	    }
+	}
+
 	/**
 	 * ScreenManager - Stack-based screen navigation with animated transitions
 	 *
@@ -49390,6 +49804,7 @@
 	        this.boundPointerDown = this.handlePointerDown.bind(this);
 	        this.boundPointerMove = this.handlePointerMove.bind(this);
 	        this.boundPointerUp = this.handlePointerUp.bind(this);
+	        this.boundHandleResize = this.handleResize.bind(this);
 	        // Initial render
 	        this.render();
 	        // Setup based on mode
@@ -49408,7 +49823,7 @@
 	        // Setup event listeners
 	        this.setupEventListeners();
 	        // Listen for resize
-	        window.addEventListener('resize', this.handleResize.bind(this));
+	        window.addEventListener('resize', this.boundHandleResize);
 	    }
 	    /**
 	     * Render the joystick graphics
@@ -49807,7 +50222,7 @@
 	        }
 	        // Remove event listeners
 	        this.removeEventListeners();
-	        window.removeEventListener('resize', this.handleResize.bind(this));
+	        window.removeEventListener('resize', this.boundHandleResize);
 	        // Destroy graphics
 	        this.container.destroy();
 	        // Remove all event listeners
@@ -50825,6 +51240,8 @@
 	exports.GameStyleUITheme = GameStyleUITheme;
 	exports.GameToggle = GameToggle;
 	exports.GameToggleColors = GameToggleColors;
+	exports.GameTooltip = GameTooltip;
+	exports.GameTooltipColors = GameTooltipColors;
 	exports.GameTopBar = GameTopBar;
 	exports.GraphicsEngine = GraphicsEngine;
 	exports.HexagonLevelButton = HexagonLevelButton;
diff --git a/docs-site/static/llms-full.txt b/docs-site/static/llms-full.txt
index 9cfe509..fd9905a 100644
--- a/docs-site/static/llms-full.txt
+++ b/docs-site/static/llms-full.txt
@@ -125,6 +125,74 @@ const bar = new UIProgressBar({
 bar.setValue(50, true);
 ```
 
+### GameTooltip (Speech Bubble / Popover)
+```typescript
+import { GameTooltip, GameTooltipColors } from 'gamebyte-framework';
+
+// Basic tooltip
+const tooltip = new GameTooltip({
+    text: 'Coming Soon',
+    tailPosition: 'bottom-left',
+    colorScheme: GameTooltipColors.CYAN
+});
+tooltip.setPosition(100, 50);
+stage.addChild(tooltip.getContainer());
+
+// Configuration options
+const tooltip = new GameTooltip({
+    text: 'Multi-line\ntooltip text',
+    maxWidth: 200,              // Auto word-wrap width
+    padding: 12,                // Inner padding
+    fontSize: 16,
+    borderRadius: 10,
+    borderWidth: 3,
+    tailPosition: 'bottom-left', // 12 positions + 'none'
+    tailSize: 10,
+    showShadow: true,
+    shadowOffset: 4,
+    shadowAlpha: 0.3,
+    colorScheme: GameTooltipColors.CYAN
+});
+
+// Tail positions (12 options)
+// 'bottom-left' | 'bottom-center' | 'bottom-right'
+// 'top-left'    | 'top-center'    | 'top-right'
+// 'left-top'    | 'left-center'   | 'left-bottom'
+// 'right-top'   | 'right-center'  | 'right-bottom'
+// 'none'
+
+// Color schemes
+GameTooltipColors.CYAN    // Light blue (default, matches "Coming Soon" style)
+GameTooltipColors.YELLOW  // Warning style
+GameTooltipColors.GREEN   // Success style
+GameTooltipColors.RED     // Error style
+GameTooltipColors.PURPLE  // Pro tip style
+GameTooltipColors.DARK    // Dark tooltip (for light backgrounds)
+GameTooltipColors.WHITE   // White tooltip (for dark backgrounds)
+
+// Custom color scheme
+const customScheme = {
+    background: 0xFF6B6B,
+    border: 0x8B0000,
+    text: 0xFFFFFF,
+    textStroke: 0x8B0000, // optional
+    shadow: 0x000000      // optional
+};
+
+// Methods
+tooltip.setText('New text');
+tooltip.setTailPosition('top-center');
+tooltip.setColorScheme(GameTooltipColors.GREEN);
+tooltip.setPosition(x, y);
+tooltip.show();
+tooltip.hide();
+tooltip.toggle();
+tooltip.isVisible();
+tooltip.getSize();        // { width, height }
+tooltip.getTotalBounds(); // includes tail and shadow
+tooltip.destroy();
+```
+
 ## INPUT
 
 ### Keyboard
diff --git a/docs-site/static/llms.txt b/docs-site/static/llms.txt
index d4cd1a2..5fc0374 100644
--- a/docs-site/static/llms.txt
+++ b/docs-site/static/llms.txt
@@ -30,6 +30,7 @@ GameByte is a comprehensive JavaScript game framework that unifies 2D (Pixi.js v
 - /ui-components/overview - Mobile-first UI system
 - /ui-components/button - GameStyleButton, UIButton
 - /ui-components/panel - GameStylePanel, UIPanel
+- /ui-components/tooltip - GameTooltip (speech bubble popover)
 - /ui-components/text - UIText typography
 - /ui-components/topbar - GameTopBar, TopBar (HUD resources)
 - /ui-components/progress-bar - Health, loading bars
@@ -113,6 +114,19 @@ const btn = new GameStyleButton({
 btn.on('click', () => startGame());
 ```
 
+### Game-Style Tooltip (Speech Bubble)
+```typescript
+import { GameTooltip, GameTooltipColors } from '@gamebyte/framework';
+const tooltip = new GameTooltip({
+    text: 'Coming Soon',
+    tailPosition: 'bottom-left', // 12 positions + 'none'
+    colorScheme: GameTooltipColors.CYAN
+});
+tooltip.setPosition(100, 50);
+stage.addChild(tooltip.getContainer());
+tooltip.show(); tooltip.hide(); tooltip.toggle();
+```
+
 ### Screen Navigation
 ```typescript
 import { ScreenManager, HubScreen } from '@gamebyte/framework';
@@ -145,6 +159,7 @@ Physics.createBody({ x: 100, y: 100, width: 32, height: 48 });
 ### UI Components
 - `GameStyleButton`, `GameButtons` - Game-style buttons
 - `GameStylePanel` - Game-style panel with title/close
+- `GameTooltip`, `GameTooltipColors` - Speech bubble tooltip/popover
 - `GameTopBar` - Resource bar (lives, coins, gems)
 - `GameBottomNav` - Bottom navigation
 - `ArcheroMenu` - Animated bottom menu with particles
@@ -165,6 +180,7 @@ Physics.createBody({ x: 100, y: 100, width: 32, height: 48 });
 ### Color Schemes
 - `GameStyleColors.YELLOW_BUTTON`, `GREEN_BUTTON`, `BLUE_BUTTON`, `RED_BUTTON`, `PURPLE_BUTTON`
 - `GameStyleColors.PANEL_BLUE`, `PANEL_PURPLE`
+- `GameTooltipColors.CYAN`, `.YELLOW`, `.GREEN`, `.RED`, `.PURPLE`, `.DARK`, `.WHITE`
 - `ARCHERO_COLORS.red`, `.blue`, `.purple`, `.green`, `.activeYellow`
 
 ## Service Keys
diff --git a/docs/agent-guide/CORE_API.md b/docs/agent-guide/CORE_API.md
index a9f6785..8fca15f 100644
--- a/docs/agent-guide/CORE_API.md
+++ b/docs/agent-guide/CORE_API.md
@@ -196,6 +196,7 @@ await sceneManager.load('game');
 - `UIText` - Styled text labels
 - `UIProgressBar` - Animated progress bars
 - `UIContainer` - Layout containers
+- `GameTooltip` - Speech bubble tooltips/popovers with customizable tail
 - `ArcheroMenu` - Full-featured bottom navigation (670 lines → 3 lines)
 
 **Example: Button**
@@ -237,6 +238,24 @@ renderer.getStage().addChild(menu.getContainer());
 
 **Result:** Production-quality menu in 3 lines
 
+**Example: GameTooltip (Speech Bubble)**
+
+```typescript
+import { GameTooltip, GameTooltipColors } from 'gamebyte-framework';
+
+const tooltip = new GameTooltip({
+  text: 'Coming Soon',
+  tailPosition: 'bottom-left', // 12 positions + 'none'
+  colorScheme: GameTooltipColors.CYAN
+});
+
+tooltip.setPosition(100, 50);
+renderer.getStage().addChild(tooltip.getContainer());
+tooltip.show(); // or tooltip.hide(), tooltip.toggle()
+```
+
+**Available Color Schemes:** `CYAN`, `YELLOW`, `GREEN`, `RED`, `PURPLE`, `DARK`, `WHITE`
+
 ---
 
 ### Asset Loading
diff --git a/docs/agent-guide/QUICK_REFERENCE.md b/docs/agent-guide/QUICK_REFERENCE.md
index d37e7c9..eb7c16b 100644
--- a/docs/agent-guide/QUICK_REFERENCE.md
+++ b/docs/agent-guide/QUICK_REFERENCE.md
@@ -57,6 +57,7 @@ const asset = assetManager.get('sprite');
 ```typescript
 const button = new UIButton({ text: 'Play', width: 200, height: 60 });
 const menu = new ArcheroMenu({ sections: [...], activeSection: 0 });
+const tooltip = new GameTooltip({ text: 'Coming Soon', tailPosition: 'bottom-left' });
 ```
 
 ### Audio Playback
@@ -85,6 +86,7 @@ inputManager.on('swipe', (direction) => { /* ... */ });
 | `ArcheroMenu` | `gamebyte-framework` | ~670 |
 | `UIButton` | `gamebyte-framework` | ~120 |
 | `UIPanel` | `gamebyte-framework` | ~80 |
+| `GameTooltip` | `gamebyte-framework` | ~200 |
 | `UIProgressBar` | `gamebyte-framework` | ~100 |
 | `SplashScreen` | `gamebyte-framework` | ~150 |
 
@@ -165,7 +167,7 @@ grep -r "physics" docs/
 grep -r "collision" docs/
 
 # Find UI component documentation
-grep -r "UIButton\|UIPanel\|ArcheroMenu" docs/
+grep -r "UIButton\|UIPanel\|GameTooltip\|ArcheroMenu" docs/
 
 # Find mobile optimization docs
 grep -r "mobile.*optimi\|createMobileGame" docs/
diff --git a/docs/components/game-tooltip.md b/docs/components/game-tooltip.md
new file mode 100644
index 0000000..07bc9a6
--- /dev/null
+++ b/docs/components/game-tooltip.md
@@ -0,0 +1,263 @@
+# GameTooltip Component
+
+> Speech bubble style tooltip/popover with customizable tail position and color schemes
+
+<!-- keywords: tooltip, popover, speech-bubble, hint, tutorial, coming-soon, status -->
+
+---
+
+## Overview
+
+`GameTooltip` is a versatile speech bubble component that can be used for:
+- Informational tooltips on hover
+- Popovers on click/tap
+- Status indicators ("Coming Soon", "New", etc.)
+- Tutorial hints
+- Notification badges
+
+## Quick Start
+
+```typescript
+import { GameTooltip, GameTooltipColors } from 'gamebyte-framework';
+
+// Create a simple "Coming Soon" tooltip
+const tooltip = new GameTooltip({
+    text: 'Coming Soon',
+    tailPosition: 'bottom-left',
+    colorScheme: GameTooltipColors.CYAN
+});
+
+tooltip.setPosition(100, 50);
+stage.addChild(tooltip.getContainer());
+```
+
+## Configuration
+
+### GameTooltipConfig
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `text` | `string` | `'Tooltip'` | Text content |
+| `maxWidth` | `number` | `200` | Max width before word wrap |
+| `padding` | `number` | `12` | Inner padding |
+| `fontSize` | `number` | `16` | Text font size |
+| `fontFamily` | `string` | Framework font | Font family |
+| `colorScheme` | `GameTooltipColorScheme` | `CYAN` | Color scheme |
+| `borderRadius` | `number` | `10` | Corner radius |
+| `borderWidth` | `number` | `3` | Border thickness |
+| `tailPosition` | `TooltipTailPosition` | `'bottom-left'` | Tail/pointer position |
+| `tailSize` | `number` | `10` | Size of the tail triangle |
+| `showShadow` | `boolean` | `true` | Show drop shadow |
+| `shadowOffset` | `number` | `4` | Shadow offset in pixels |
+| `shadowAlpha` | `number` | `0.3` | Shadow transparency |
+
+## Tail Positions
+
+The tooltip supports 12 tail positions plus a "none" option:
+
+```
+                 top-left    top-center    top-right
+                    ▼           ▼            ▼
+               ┌─────────────────────────────────┐
+   left-top ▶  │                                 │  ◀ right-top
+               │                                 │
+left-center ▶  │          TOOLTIP TEXT           │  ◀ right-center
+               │                                 │
+left-bottom ▶  │                                 │  ◀ right-bottom
+               └─────────────────────────────────┘
+                    ▲           ▲            ▲
+              bottom-left  bottom-center  bottom-right
+```
+
+```typescript
+type TooltipTailPosition =
+  | 'bottom-left' | 'bottom-center' | 'bottom-right'
+  | 'top-left'    | 'top-center'    | 'top-right'
+  | 'left-top'    | 'left-center'   | 'left-bottom'
+  | 'right-top'   | 'right-center'  | 'right-bottom'
+  | 'none';
+```
+
+## Color Schemes
+
+### Built-in Presets
+
+```typescript
+import { GameTooltipColors } from 'gamebyte-framework';
+
+// Available presets
+GameTooltipColors.CYAN    // Light blue (default)
+GameTooltipColors.YELLOW  // Warning/attention
+GameTooltipColors.GREEN   // Success
+GameTooltipColors.RED     // Error/danger
+GameTooltipColors.PURPLE  // Pro tip/special
+GameTooltipColors.DARK    // Dark (for light backgrounds)
+GameTooltipColors.WHITE   // White (for dark backgrounds)
+```
+
+### Custom Color Scheme
+
+```typescript
+interface GameTooltipColorScheme {
+  background: number;    // Bubble fill color
+  border: number;        // Border color
+  text: number;          // Text color
+  textStroke?: number;   // Optional text outline
+  shadow?: number;       // Shadow color
+}
+
+// Example custom scheme
+const myScheme: GameTooltipColorScheme = {
+    background: 0xFF6B6B,
+    border: 0x8B0000,
+    text: 0xFFFFFF,
+    textStroke: 0x8B0000
+};
+
+const tooltip = new GameTooltip({
+    text: 'Custom!',
+    colorScheme: myScheme
+});
+```
+
+## Methods
+
+### Content & Appearance
+
+```typescript
+// Set text content
+tooltip.setText('New text');
+tooltip.getText(); // Returns current text
+
+// Change tail position
+tooltip.setTailPosition('top-center');
+
+// Change color scheme
+tooltip.setColorScheme(GameTooltipColors.GREEN);
+```
+
+### Position & Visibility
+
+```typescript
+// Position the tooltip
+tooltip.setPosition(x, y);
+tooltip.getPosition(); // { x, y }
+
+// Visibility control
+tooltip.show();
+tooltip.hide();
+tooltip.toggle();
+tooltip.isVisible();
+tooltip.setVisible(true/false);
+```
+
+### Size & Bounds
+
+```typescript
+// Get bubble dimensions
+tooltip.getSize(); // { width, height }
+
+// Get total bounds (including tail and shadow)
+tooltip.getTotalBounds(); // { width, height, tailOffset }
+```
+
+### Container Access
+
+```typescript
+// Get the PIXI container for adding to stage
+const container = tooltip.getContainer();
+stage.addChild(container);
+```
+
+### Cleanup
+
+```typescript
+tooltip.destroy(); // Clean up resources
+```
+
+## Events
+
+```typescript
+tooltip.on('show', () => console.log('Tooltip shown'));
+tooltip.on('hide', () => console.log('Tooltip hidden'));
+```
+
+## Use Cases
+
+### Status Indicator
+
+```typescript
+// "Coming Soon" badge on a locked feature
+const comingSoon = new GameTooltip({
+    text: 'Coming Soon',
+    tailPosition: 'bottom-left',
+    colorScheme: GameTooltipColors.CYAN
+});
+comingSoon.setPosition(button.x + button.width - 20, button.y - 30);
+```
+
+### Tutorial Hint
+
+```typescript
+// Tutorial tip pointing to a button
+const hint = new GameTooltip({
+    text: 'Tap here to start!',
+    tailPosition: 'bottom-center',
+    colorScheme: GameTooltipColors.YELLOW
+});
+hint.setPosition(targetButton.x, targetButton.y - 50);
+```
+
+### Error Message
+
+```typescript
+// Error feedback
+const error = new GameTooltip({
+    text: 'Not enough coins!',
+    tailPosition: 'left-center',
+    colorScheme: GameTooltipColors.RED
+});
+error.setPosition(priceLabel.x + priceLabel.width + 10, priceLabel.y);
+```
+
+### Interactive Popover
+
+```typescript
+// Toggle on button click
+const popover = new GameTooltip({
+    text: 'More info here...',
+    tailPosition: 'top-center'
+});
+popover.hide(); // Start hidden
+
+infoButton.on('click', () => {
+    popover.toggle();
+});
+```
+
+### Multi-line Content
+
+```typescript
+const tooltip = new GameTooltip({
+    text: 'This is a longer tooltip\nwith multiple lines',
+    maxWidth: 180,
+    tailPosition: 'bottom-left'
+});
+```
+
+## Demo
+
+Live demo: `/docs-site/static/demos/game-tooltip-demo.html`
+
+```bash
+npx http-server -p 8080
+# Open: http://localhost:8080/docs-site/static/demos/game-tooltip-demo.html
+```
+
+## Best Practices
+
+1. **Position relative to target** - Place tooltip so the tail points to the relevant element
+2. **Use appropriate colors** - Match color scheme to the message type (success=green, error=red, etc.)
+3. **Keep text concise** - Tooltips should be brief; use panels for longer content
+4. **Consider mobile** - Ensure tooltips don't go off-screen on smaller devices
+5. **Hide when not needed** - Don't clutter the UI with persistent tooltips
diff --git a/src/index.ts b/src/index.ts
index 33fd7b4..9ec09ca 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -396,6 +396,9 @@ export type { GameToggleConfig, GameToggleColorScheme } from './ui/components/Ga
 export { GameSlider, GameSliderColors } from './ui/components/GameSlider';
 export type { GameSliderConfig, GameSliderColorScheme } from './ui/components/GameSlider';
 
+export { GameTooltip, GameTooltipColors } from './ui/components/GameTooltip';
+export type { GameTooltipConfig, GameTooltipColorScheme, TooltipTailPosition } from './ui/components/GameTooltip';
+
 // Font Loader (auto-loads framework font)
 export { loadFrameworkFont, getFrameworkFontFamily, isFontReady } from './ui/utils/FontLoader';
 
diff --git a/src/ui/components/GameTooltip.ts b/src/ui/components/GameTooltip.ts
new file mode 100644
index 0000000..4656a8f
--- /dev/null
+++ b/src/ui/components/GameTooltip.ts
@@ -0,0 +1,583 @@
+import { EventEmitter } from 'eventemitter3';
+import { IContainer, IGraphics, IText } from '../../contracts/Graphics';
+import { graphics } from '../../graphics/GraphicsEngine';
+import { getFrameworkFontFamily, loadFrameworkFont } from '../utils/FontLoader';
+
+/**
+ * Tail/pointer position for the tooltip
+ */
+export type TooltipTailPosition =
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'left-top'
+  | 'left-center'
+  | 'left-bottom'
+  | 'right-top'
+  | 'right-center'
+  | 'right-bottom'
+  | 'none';
+
+/**
+ * Color scheme for the tooltip
+ */
+export interface GameTooltipColorScheme {
+  background: number;
+  border: number;
+  text: number;
+  textStroke?: number;
+  shadow?: number;
+}
+
+/**
+ * GameTooltip configuration
+ */
+export interface GameTooltipConfig {
+  text?: string;
+  maxWidth?: number;
+  padding?: number;
+  fontSize?: number;
+  fontFamily?: string;
+  colorScheme?: GameTooltipColorScheme;
+  borderRadius?: number;
+  borderWidth?: number;
+  tailPosition?: TooltipTailPosition;
+  tailSize?: number;
+  showShadow?: boolean;
+  shadowOffset?: number;
+  shadowAlpha?: number;
+}
+
+/**
+ * Default color scheme matching the "Coming Soon" tooltip style
+ */
+const DEFAULT_TOOLTIP_COLORS: GameTooltipColorScheme = {
+  background: 0x7DD3FC, // Light cyan/sky blue
+  border: 0x1E3A5F,     // Dark navy blue
+  text: 0xFFFFFF,       // White
+  textStroke: 0x1E3A5F, // Dark navy for text stroke
+  shadow: 0x000000,     // Black shadow
+};
+
+/**
+ * Preset color schemes for common tooltip styles
+ */
+export const GameTooltipColors = {
+  /** Light blue/cyan (default - matches the "Coming Soon" style) */
+  CYAN: { ...DEFAULT_TOOLTIP_COLORS },
+
+  /** Classic yellow warning tooltip */
+  YELLOW: {
+    background: 0xFDE047,
+    border: 0x92400E,
+    text: 0x422006,
+    textStroke: undefined,
+    shadow: 0x000000,
+  } as GameTooltipColorScheme,
+
+  /** Green success tooltip */
+  GREEN: {
+    background: 0x86EFAC,
+    border: 0x166534,
+    text: 0xFFFFFF,
+    textStroke: 0x166534,
+    shadow: 0x000000,
+  } as GameTooltipColorScheme,
+
+  /** Red error/warning tooltip */
+  RED: {
+    background: 0xFCA5A5,
+    border: 0x991B1B,
+    text: 0xFFFFFF,
+    textStroke: 0x991B1B,
+    shadow: 0x000000,
+  } as GameTooltipColorScheme,
+
+  /** Purple/violet tooltip */
+  PURPLE: {
+    background: 0xD8B4FE,
+    border: 0x6B21A8,
+    text: 0xFFFFFF,
+    textStroke: 0x6B21A8,
+    shadow: 0x000000,
+  } as GameTooltipColorScheme,
+
+  /** Dark tooltip (for light backgrounds) */
+  DARK: {
+    background: 0x374151,
+    border: 0x111827,
+    text: 0xFFFFFF,
+    textStroke: undefined,
+    shadow: 0x000000,
+  } as GameTooltipColorScheme,
+
+  /** White tooltip (for dark backgrounds) */
+  WHITE: {
+    background: 0xFFFFFF,
+    border: 0xD1D5DB,
+    text: 0x374151,
+    textStroke: undefined,
+    shadow: 0x000000,
+  } as GameTooltipColorScheme,
+};
+
+/**
+ * GameTooltip - Speech bubble style tooltip/popover component
+ *
+ * A versatile tooltip component that can be used for:
+ * - Informational tooltips on hover
+ * - Popovers on click/tap
+ * - Status indicators (Coming Soon, New, etc.)
+ * - Tutorial hints
+ *
+ * Features:
+ * - Customizable tail/pointer position (12 positions + none)
+ * - Multiple color scheme presets
+ * - Auto-sizing based on text content
+ * - Optional drop shadow
+ * - Mobile-optimized rendering
+ *
+ * @example
+ * ```typescript
+ * const tooltip = new GameTooltip({
+ *   text: 'Coming Soon',
+ *   tailPosition: 'bottom-left',
+ *   colorScheme: GameTooltipColors.CYAN
+ * });
+ *
+ * tooltip.setPosition(100, 50);
+ * stage.addChild(tooltip.getContainer());
+ * ```
+ */
+export class GameTooltip extends EventEmitter {
+  private container: IContainer;
+  private shadowGraphics: IGraphics;
+  private bubbleGraphics: IGraphics;
+  private textField: IText;
+
+  private config: Required<GameTooltipConfig>;
+  private bubbleWidth: number = 0;
+  private bubbleHeight: number = 0;
+
+  constructor(config: GameTooltipConfig = {}) {
+    super();
+
+    // Trigger font loading (non-blocking)
+    loadFrameworkFont();
+
+    // Default configuration
+    this.config = {
+      text: config.text || 'Tooltip',
+      maxWidth: config.maxWidth || 200,
+      padding: config.padding || 12,
+      fontSize: config.fontSize || 16,
+      fontFamily: config.fontFamily || getFrameworkFontFamily(),
+      colorScheme: config.colorScheme || DEFAULT_TOOLTIP_COLORS,
+      borderRadius: config.borderRadius || 10,
+      borderWidth: config.borderWidth || 3,
+      tailPosition: config.tailPosition || 'bottom-left',
+      tailSize: config.tailSize || 10,
+      showShadow: config.showShadow !== false,
+      shadowOffset: config.shadowOffset || 4,
+      shadowAlpha: config.shadowAlpha || 0.3,
+    };
+
+    const factory = graphics();
+
+    // Create container hierarchy
+    this.container = factory.createContainer();
+
+    // Create shadow layer
+    this.shadowGraphics = factory.createGraphics();
+    this.container.addChild(this.shadowGraphics);
+
+    // Create bubble (background + border)
+    this.bubbleGraphics = factory.createGraphics();
+    this.container.addChild(this.bubbleGraphics);
+
+    // Create text
+    this.textField = this.createTextField();
+    this.container.addChild(this.textField);
+
+    // Initial render
+    this.render();
+  }
+
+  /**
+   * Create the text field
+   */
+  private createTextField(): IText {
+    const { colorScheme, fontSize, fontFamily, maxWidth, padding } = this.config;
+    const hasStroke = colorScheme.textStroke !== undefined;
+
+    return graphics().createText(this.config.text, {
+      fontFamily,
+      fontSize,
+      fontWeight: '700',
+      fill: colorScheme.text,
+      align: 'center',
+      wordWrap: true,
+      wordWrapWidth: maxWidth - padding * 2,
+      ...(hasStroke && {
+        stroke: colorScheme.textStroke,
+        strokeThickness: Math.max(2, fontSize * 0.1),
+      }),
+    });
+  }
+
+  /**
+   * Render the tooltip
+   */
+  private render(): void {
+    const {
+      padding,
+      borderWidth,
+      colorScheme,
+      showShadow,
+      shadowOffset,
+      shadowAlpha,
+    } = this.config;
+
+    // Calculate bubble dimensions based on text
+    const textWidth = this.textField.width || 50;
+    const textHeight = this.textField.height || 20;
+
+    this.bubbleWidth = textWidth + padding * 2;
+    this.bubbleHeight = textHeight + padding * 2;
+
+    // Clear previous graphics
+    this.shadowGraphics.clear();
+    this.bubbleGraphics.clear();
+
+    // Get tail info
+    const tailInfo = this.getTailInfo();
+
+    // Draw shadow (if enabled)
+    if (showShadow && colorScheme.shadow !== undefined) {
+      this.drawBubbleShape(
+        this.shadowGraphics,
+        shadowOffset,
+        shadowOffset,
+        colorScheme.shadow,
+        shadowAlpha,
+        tailInfo
+      );
+    }
+
+    // Draw border (larger bubble behind)
+    this.drawBubbleShape(
+      this.bubbleGraphics,
+      -borderWidth,
+      -borderWidth,
+      colorScheme.border,
+      1,
+      tailInfo,
+      borderWidth
+    );
+
+    // Draw main background
+    this.drawBubbleShape(
+      this.bubbleGraphics,
+      0,
+      0,
+      colorScheme.background,
+      1,
+      tailInfo
+    );
+
+    // Position text centered in bubble
+    this.textField.x = padding;
+    this.textField.y = padding;
+  }
+
+  /**
+   * Get tail position and direction info
+   */
+  private getTailInfo(): {
+    side: 'top' | 'bottom' | 'left' | 'right' | 'none';
+    position: 'start' | 'center' | 'end';
+  } {
+    const { tailPosition } = this.config;
+
+    if (tailPosition === 'none') {
+      return { side: 'none', position: 'center' };
+    }
+
+    const [side, position] = tailPosition.split('-') as [
+      'top' | 'bottom' | 'left' | 'right',
+      'start' | 'center' | 'end' | 'left' | 'right' | 'top' | 'bottom'
+    ];
+
+    // Normalize position names
+    let normalizedPosition: 'start' | 'center' | 'end' = 'center';
+    if (position === 'left' || position === 'top') {
+      normalizedPosition = 'start';
+    } else if (position === 'right' || position === 'bottom') {
+      normalizedPosition = 'end';
+    } else if (position === 'center') {
+      normalizedPosition = 'center';
+    }
+
+    return { side, position: normalizedPosition };
+  }
+
+  /**
+   * Draw the bubble shape with optional tail
+   */
+  private drawBubbleShape(
+    gfx: IGraphics,
+    offsetX: number,
+    offsetY: number,
+    color: number,
+    alpha: number,
+    tailInfo: { side: 'top' | 'bottom' | 'left' | 'right' | 'none'; position: 'start' | 'center' | 'end' },
+    extraSize: number = 0
+  ): void {
+    const { borderRadius, tailSize } = this.config;
+    const w = this.bubbleWidth + extraSize * 2;
+    const h = this.bubbleHeight + extraSize * 2;
+    const r = Math.min(borderRadius + extraSize, w / 2, h / 2);
+    const ts = tailSize + (extraSize > 0 ? extraSize * 0.5 : 0);
+
+    const x = offsetX;
+    const y = offsetY;
+
+    // Start path
+    gfx.moveTo(x + r, y);
+
+    // Top edge
+    if (tailInfo.side === 'top') {
+      const tailX = this.getTailOffset(w, r, tailInfo.position);
+      gfx.lineTo(x + tailX - ts, y);
+      gfx.lineTo(x + tailX, y - ts);
+      gfx.lineTo(x + tailX + ts, y);
+    }
+    gfx.lineTo(x + w - r, y);
+
+    // Top-right corner
+    gfx.arc(x + w - r, y + r, r, -Math.PI / 2, 0);
+
+    // Right edge
+    if (tailInfo.side === 'right') {
+      const tailY = this.getTailOffset(h, r, tailInfo.position);
+      gfx.lineTo(x + w, y + tailY - ts);
+      gfx.lineTo(x + w + ts, y + tailY);
+      gfx.lineTo(x + w, y + tailY + ts);
+    }
+    gfx.lineTo(x + w, y + h - r);
+
+    // Bottom-right corner
+    gfx.arc(x + w - r, y + h - r, r, 0, Math.PI / 2);
+
+    // Bottom edge
+    if (tailInfo.side === 'bottom') {
+      const tailX = this.getTailOffset(w, r, tailInfo.position);
+      gfx.lineTo(x + tailX + ts, y + h);
+      gfx.lineTo(x + tailX, y + h + ts);
+      gfx.lineTo(x + tailX - ts, y + h);
+    }
+    gfx.lineTo(x + r, y + h);
+
+    // Bottom-left corner
+    gfx.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI);
+
+    // Left edge
+    if (tailInfo.side === 'left') {
+      const tailY = this.getTailOffset(h, r, tailInfo.position);
+      gfx.lineTo(x, y + tailY + ts);
+      gfx.lineTo(x - ts, y + tailY);
+      gfx.lineTo(x, y + tailY - ts);
+    }
+    gfx.lineTo(x, y + r);
+
+    // Top-left corner
+    gfx.arc(x + r, y + r, r, Math.PI, -Math.PI / 2);
+
+    // Close and fill
+    gfx.closePath();
+    gfx.fill({ color, alpha });
+  }
+
+  /**
+   * Calculate tail offset based on position
+   */
+  private getTailOffset(
+    dimension: number,
+    radius: number,
+    position: 'start' | 'center' | 'end'
+  ): number {
+    const { tailSize } = this.config;
+    const minOffset = radius + tailSize + 5;
+    const maxOffset = dimension - radius - tailSize - 5;
+
+    switch (position) {
+      case 'start':
+        return Math.max(minOffset, dimension * 0.25);
+      case 'center':
+        return dimension / 2;
+      case 'end':
+        return Math.min(maxOffset, dimension * 0.75);
+      default:
+        return dimension / 2;
+    }
+  }
+
+  /**
+   * Set the tooltip text
+   */
+  public setText(text: string): this {
+    this.config.text = text;
+    this.textField.text = text;
+    this.render();
+    return this;
+  }
+
+  /**
+   * Get the current text
+   */
+  public getText(): string {
+    return this.config.text;
+  }
+
+  /**
+   * Set the tail position
+   */
+  public setTailPosition(position: TooltipTailPosition): this {
+    this.config.tailPosition = position;
+    this.render();
+    return this;
+  }
+
+  /**
+   * Set the color scheme
+   */
+  public setColorScheme(scheme: GameTooltipColorScheme): this {
+    this.config.colorScheme = scheme;
+
+    // Recreate text with new colors
+    this.container.removeChild(this.textField);
+    this.textField = this.createTextField();
+    this.container.addChild(this.textField);
+
+    this.render();
+    return this;
+  }
+
+  /**
+   * Set tooltip position
+   */
+  public setPosition(x: number, y: number): this {
+    this.container.x = x;
+    this.container.y = y;
+    return this;
+  }
+
+  /**
+   * Get tooltip position
+   */
+  public getPosition(): { x: number; y: number } {
+    return { x: this.container.x, y: this.container.y };
+  }
+
+  /**
+   * Show the tooltip
+   */
+  public show(): this {
+    this.container.visible = true;
+    this.emit('show');
+    return this;
+  }
+
+  /**
+   * Hide the tooltip
+   */
+  public hide(): this {
+    this.container.visible = false;
+    this.emit('hide');
+    return this;
+  }
+
+  /**
+   * Toggle visibility
+   */
+  public toggle(): this {
+    if (this.container.visible) {
+      this.hide();
+    } else {
+      this.show();
+    }
+    return this;
+  }
+
+  /**
+   * Check if tooltip is visible
+   */
+  public isVisible(): boolean {
+    return this.container.visible;
+  }
+
+  /**
+   * Set visibility
+   */
+  public setVisible(visible: boolean): this {
+    this.container.visible = visible;
+    return this;
+  }
+
+  /**
+   * Get the bubble dimensions
+   */
+  public getSize(): { width: number; height: number } {
+    return {
+      width: this.bubbleWidth,
+      height: this.bubbleHeight,
+    };
+  }
+
+  /**
+   * Get the total bounds including tail and shadow
+   */
+  public getTotalBounds(): { width: number; height: number; tailOffset: number } {
+    const { tailSize, showShadow, shadowOffset } = this.config;
+    const tailInfo = this.getTailInfo();
+
+    let width = this.bubbleWidth;
+    let height = this.bubbleHeight;
+    let tailOffset = 0;
+
+    // Add tail size to appropriate dimension
+    if (tailInfo.side === 'left' || tailInfo.side === 'right') {
+      width += tailSize;
+      tailOffset = tailInfo.side === 'left' ? tailSize : 0;
+    } else if (tailInfo.side === 'top' || tailInfo.side === 'bottom') {
+      height += tailSize;
+      tailOffset = tailInfo.side === 'top' ? tailSize : 0;
+    }
+
+    // Add shadow
+    if (showShadow) {
+      width += shadowOffset;
+      height += shadowOffset;
+    }
+
+    return { width, height, tailOffset };
+  }
+
+  /**
+   * Get the container
+   */
+  public getContainer(): IContainer {
+    return this.container;
+  }
+
+  /**
+   * Destroy the tooltip
+   */
+  public destroy(): void {
+    this.container.destroy();
+    this.removeAllListeners();
+  }
+}

From eae992129f92a11dc8654b089aabf164c28c5539 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Can=20Erdog=CC=86an?= <can@canerdogan.net>
Date: Mon, 26 Jan 2026 17:09:11 +0300
Subject: [PATCH 08/10] fix(ui): Capture error variable in HexagonLevelButton
 catch block

Silence ESLint empty catch block warning by capturing the error
variable with underscore prefix to indicate intentional non-use.
The fallback to solid color fill is expected behavior when texture
fill is not supported.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 docs-site/static/gamebyte.umd.js        | 3 ++-
 src/ui/components/HexagonLevelButton.ts | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs-site/static/gamebyte.umd.js b/docs-site/static/gamebyte.umd.js
index b47c684..211a253 100644
--- a/docs-site/static/gamebyte.umd.js
+++ b/docs-site/static/gamebyte.umd.js
@@ -44422,8 +44422,9 @@
 	            };
 	            this.fillGraphics.fill({ texture: gradientTexture, matrix: matrix });
 	        }
-	        catch {
+	        catch (_e) {
 	            // Fallback to solid color if texture fill not supported
+	            // This can happen with older browsers or certain renderer configurations
 	            this.fillGraphics.fill({ color: colors.fill });
 	        }
 	        // 3.5 Inner bevel effect for 3D look
diff --git a/src/ui/components/HexagonLevelButton.ts b/src/ui/components/HexagonLevelButton.ts
index 840a93f..5576f63 100644
--- a/src/ui/components/HexagonLevelButton.ts
+++ b/src/ui/components/HexagonLevelButton.ts
@@ -368,8 +368,9 @@ export class HexagonLevelButton extends EventEmitter {
         ty: pressOffset - fillSize / 2
       };
       this.fillGraphics.fill({ texture: gradientTexture as any, matrix: matrix as any });
-    } catch {
+    } catch (_e) {
       // Fallback to solid color if texture fill not supported
+      // This can happen with older browsers or certain renderer configurations
       this.fillGraphics.fill({ color: colors.fill });
     }
 

From 61f72a18f0d640fdd2c6fd06905487931d48ddbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Can=20Erdog=CC=86an?= <can@canerdogan.net>
Date: Mon, 26 Jan 2026 17:14:12 +0300
Subject: [PATCH 09/10] refactor(ui): Simplify GameTooltip and
 HexagonLevelButton code

GameTooltip:
- Replace if-else chain with positionMap lookup in getTailInfo()
- Simplify toggle() to single ternary expression
- Consolidate switch cases in getTailOffset()

HexagonLevelButton:
- Remove redundant colors variable alias
- Simplify border drawing logic (remove duplicated drawHexagon call)
- Remove unused _color parameter from drawHexagonHighlight()
- Extract duplicated pointer event logic

Net reduction: 31 lines. No functionality changes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 docs-site/static/gamebyte.umd.js        | 79 ++++++++++---------------
 src/ui/components/GameTooltip.ts        | 29 ++++-----
 src/ui/components/HexagonLevelButton.ts | 53 +++++++----------
 3 files changed, 65 insertions(+), 96 deletions(-)

diff --git a/docs-site/static/gamebyte.umd.js b/docs-site/static/gamebyte.umd.js
index 211a253..248569c 100644
--- a/docs-site/static/gamebyte.umd.js
+++ b/docs-site/static/gamebyte.umd.js
@@ -44379,28 +44379,21 @@
 	        const pressOffset = this.isPressed ? 2 : 0;
 	        const shadowOffset = this.isPressed ? 2 : 6;
 	        const borderWidth = colorScheme.outerBorder ? 6 : 4; // Thicker border for candy style
-	        // Get colors
-	        const colors = colorScheme;
 	        // 1. Shadow
 	        this.drawHexagon(this.shadowGraphics, 0, shadowOffset, size - 4);
 	        this.shadowGraphics.fill({ color: 0x000000, alpha: 0.4 });
 	        // 2. Outer border (golden for candy style, dark otherwise)
-	        if (colors.outerBorder) {
+	        if (colorScheme.outerBorder) {
 	            // Draw darker outer ring first (3D effect)
 	            this.drawHexagon(this.borderGraphics, 0, pressOffset + 2, size + 4);
-	            this.borderGraphics.fill({ color: colors.outerBorder });
-	            // Then golden border
-	            this.drawHexagon(this.borderGraphics, 0, pressOffset, size);
-	            this.borderGraphics.fill({ color: colors.border });
-	        }
-	        else {
-	            this.drawHexagon(this.borderGraphics, 0, pressOffset, size);
-	            this.borderGraphics.fill({ color: colors.border });
+	            this.borderGraphics.fill({ color: colorScheme.outerBorder });
 	        }
+	        this.drawHexagon(this.borderGraphics, 0, pressOffset, size);
+	        this.borderGraphics.fill({ color: colorScheme.border });
 	        // 3. Main fill with gradient (top lighter, bottom darker)
 	        const fillSize = size - borderWidth * 2;
-	        const fillTop = colors.fill;
-	        const fillBottom = colors.fillBottom || darkenColor$1(colors.fill, 0.15);
+	        const fillTop = colorScheme.fill;
+	        const fillBottom = colorScheme.fillBottom || darkenColor$1(colorScheme.fill, 0.15);
 	        // Draw hexagon shape
 	        this.drawHexagon(this.fillGraphics, 0, pressOffset, fillSize);
 	        // Create gradient texture for fill
@@ -44425,10 +44418,10 @@
 	        catch (_e) {
 	            // Fallback to solid color if texture fill not supported
 	            // This can happen with older browsers or certain renderer configurations
-	            this.fillGraphics.fill({ color: colors.fill });
+	            this.fillGraphics.fill({ color: colorScheme.fill });
 	        }
 	        // 3.5 Inner bevel effect for 3D look
-	        if (colors.outerBorder) {
+	        if (colorScheme.outerBorder) {
 	            // Top inner highlight (subtle white glow)
 	            this.drawHexagonBevel(this.fillGraphics, 0, pressOffset - 3, fillSize - 6, 0xFFFFFF, 0.25);
 	            // Bottom inner shadow
@@ -44436,7 +44429,7 @@
 	        }
 	        // 4. Inner highlight (top shine)
 	        if (!this.isPressed) {
-	            this.drawHexagonHighlight(this.highlightGraphics, 0, pressOffset - 2, fillSize - 4, colors.highlight);
+	            this.drawHexagonHighlight(this.highlightGraphics, 0, pressOffset - 2, fillSize - 4);
 	        }
 	        // Update text position
 	        this.levelText.y = pressOffset;
@@ -44477,7 +44470,7 @@
 	    /**
 	     * Draw hexagon highlight (top portion only)
 	     */
-	    drawHexagonHighlight(g, cx, cy, size, _color) {
+	    drawHexagonHighlight(g, cx, cy, size) {
 	        // Create a highlight that covers top half of hexagon
 	        const halfSize = size / 2;
 	        const angleOffset = Math.PI / 6;
@@ -44499,27 +44492,29 @@
 	            return;
 	        this.isPressed = true;
 	        this.render();
-	        this.container.scale.x = 0.95;
-	        this.container.scale.y = 0.95;
+	        this.setScale(0.95);
 	        this.emit('press', { level: this.config.level, event });
 	    }
 	    onPointerUp(event) {
 	        if (this.config.state === 'locked')
 	            return;
-	        this.isPressed = false;
-	        this.render();
-	        this.container.scale.x = 1;
-	        this.container.scale.y = 1;
+	        this.resetPressState();
 	        this.emit('click', { level: this.config.level, event });
 	    }
 	    onPointerUpOutside() {
 	        if (this.config.state === 'locked')
 	            return;
+	        this.resetPressState();
+	        this.emit('cancel');
+	    }
+	    resetPressState() {
 	        this.isPressed = false;
 	        this.render();
-	        this.container.scale.x = 1;
-	        this.container.scale.y = 1;
-	        this.emit('cancel');
+	        this.setScale(1);
+	    }
+	    setScale(scale) {
+	        this.container.scale.x = scale;
+	        this.container.scale.y = scale;
 	    }
 	    /**
 	     * Public API
@@ -46131,18 +46126,15 @@
 	            return { side: 'none', position: 'center' };
 	        }
 	        const [side, position] = tailPosition.split('-');
-	        // Normalize position names
-	        let normalizedPosition = 'center';
-	        if (position === 'left' || position === 'top') {
-	            normalizedPosition = 'start';
-	        }
-	        else if (position === 'right' || position === 'bottom') {
-	            normalizedPosition = 'end';
-	        }
-	        else if (position === 'center') {
-	            normalizedPosition = 'center';
-	        }
-	        return { side, position: normalizedPosition };
+	        // Normalize position names: left/top -> start, right/bottom -> end
+	        const positionMap = {
+	            left: 'start',
+	            top: 'start',
+	            right: 'end',
+	            bottom: 'end',
+	            center: 'center',
+	        };
+	        return { side, position: positionMap[position] || 'center' };
 	    }
 	    /**
 	     * Draw the bubble shape with optional tail
@@ -46211,10 +46203,9 @@
 	        switch (position) {
 	            case 'start':
 	                return Math.max(minOffset, dimension * 0.25);
-	            case 'center':
-	                return dimension / 2;
 	            case 'end':
 	                return Math.min(maxOffset, dimension * 0.75);
+	            case 'center':
 	            default:
 	                return dimension / 2;
 	        }
@@ -46288,13 +46279,7 @@
 	     * Toggle visibility
 	     */
 	    toggle() {
-	        if (this.container.visible) {
-	            this.hide();
-	        }
-	        else {
-	            this.show();
-	        }
-	        return this;
+	        return this.container.visible ? this.hide() : this.show();
 	    }
 	    /**
 	     * Check if tooltip is visible
diff --git a/src/ui/components/GameTooltip.ts b/src/ui/components/GameTooltip.ts
index 4656a8f..9a916f8 100644
--- a/src/ui/components/GameTooltip.ts
+++ b/src/ui/components/GameTooltip.ts
@@ -311,17 +311,16 @@ export class GameTooltip extends EventEmitter {
       'start' | 'center' | 'end' | 'left' | 'right' | 'top' | 'bottom'
     ];
 
-    // Normalize position names
-    let normalizedPosition: 'start' | 'center' | 'end' = 'center';
-    if (position === 'left' || position === 'top') {
-      normalizedPosition = 'start';
-    } else if (position === 'right' || position === 'bottom') {
-      normalizedPosition = 'end';
-    } else if (position === 'center') {
-      normalizedPosition = 'center';
-    }
+    // Normalize position names: left/top -> start, right/bottom -> end
+    const positionMap: Record<string, 'start' | 'center' | 'end'> = {
+      left: 'start',
+      top: 'start',
+      right: 'end',
+      bottom: 'end',
+      center: 'center',
+    };
 
-    return { side, position: normalizedPosition };
+    return { side, position: positionMap[position] || 'center' };
   }
 
   /**
@@ -416,10 +415,9 @@ export class GameTooltip extends EventEmitter {
     switch (position) {
       case 'start':
         return Math.max(minOffset, dimension * 0.25);
-      case 'center':
-        return dimension / 2;
       case 'end':
         return Math.min(maxOffset, dimension * 0.75);
+      case 'center':
       default:
         return dimension / 2;
     }
@@ -504,12 +502,7 @@ export class GameTooltip extends EventEmitter {
    * Toggle visibility
    */
   public toggle(): this {
-    if (this.container.visible) {
-      this.hide();
-    } else {
-      this.show();
-    }
-    return this;
+    return this.container.visible ? this.hide() : this.show();
   }
 
   /**
diff --git a/src/ui/components/HexagonLevelButton.ts b/src/ui/components/HexagonLevelButton.ts
index 5576f63..3803e18 100644
--- a/src/ui/components/HexagonLevelButton.ts
+++ b/src/ui/components/HexagonLevelButton.ts
@@ -316,31 +316,23 @@ export class HexagonLevelButton extends EventEmitter {
     const shadowOffset = this.isPressed ? 2 : 6;
     const borderWidth = colorScheme.outerBorder ? 6 : 4; // Thicker border for candy style
 
-    // Get colors
-    const colors = colorScheme;
-
     // 1. Shadow
     this.drawHexagon(this.shadowGraphics, 0, shadowOffset, size - 4);
     this.shadowGraphics.fill({ color: 0x000000, alpha: 0.4 });
 
     // 2. Outer border (golden for candy style, dark otherwise)
-    if (colors.outerBorder) {
+    if (colorScheme.outerBorder) {
       // Draw darker outer ring first (3D effect)
       this.drawHexagon(this.borderGraphics, 0, pressOffset + 2, size + 4);
-      this.borderGraphics.fill({ color: colors.outerBorder });
-
-      // Then golden border
-      this.drawHexagon(this.borderGraphics, 0, pressOffset, size);
-      this.borderGraphics.fill({ color: colors.border });
-    } else {
-      this.drawHexagon(this.borderGraphics, 0, pressOffset, size);
-      this.borderGraphics.fill({ color: colors.border });
+      this.borderGraphics.fill({ color: colorScheme.outerBorder });
     }
+    this.drawHexagon(this.borderGraphics, 0, pressOffset, size);
+    this.borderGraphics.fill({ color: colorScheme.border });
 
     // 3. Main fill with gradient (top lighter, bottom darker)
     const fillSize = size - borderWidth * 2;
-    const fillTop = colors.fill;
-    const fillBottom = colors.fillBottom || darkenColor(colors.fill, 0.15);
+    const fillTop = colorScheme.fill;
+    const fillBottom = colorScheme.fillBottom || darkenColor(colorScheme.fill, 0.15);
 
     // Draw hexagon shape
     this.drawHexagon(this.fillGraphics, 0, pressOffset, fillSize);
@@ -371,11 +363,11 @@ export class HexagonLevelButton extends EventEmitter {
     } catch (_e) {
       // Fallback to solid color if texture fill not supported
       // This can happen with older browsers or certain renderer configurations
-      this.fillGraphics.fill({ color: colors.fill });
+      this.fillGraphics.fill({ color: colorScheme.fill });
     }
 
     // 3.5 Inner bevel effect for 3D look
-    if (colors.outerBorder) {
+    if (colorScheme.outerBorder) {
       // Top inner highlight (subtle white glow)
       this.drawHexagonBevel(
         this.fillGraphics,
@@ -402,8 +394,7 @@ export class HexagonLevelButton extends EventEmitter {
         this.highlightGraphics,
         0,
         pressOffset - 2,
-        fillSize - 4,
-        colors.highlight
+        fillSize - 4
       );
     }
 
@@ -464,8 +455,7 @@ export class HexagonLevelButton extends EventEmitter {
     g: IGraphics,
     cx: number,
     cy: number,
-    size: number,
-    _color: number
+    size: number
   ): void {
     // Create a highlight that covers top half of hexagon
     const halfSize = size / 2;
@@ -491,32 +481,33 @@ export class HexagonLevelButton extends EventEmitter {
 
     this.isPressed = true;
     this.render();
-    this.container.scale.x = 0.95;
-    this.container.scale.y = 0.95;
-
+    this.setScale(0.95);
     this.emit('press', { level: this.config.level, event });
   }
 
   private onPointerUp(event: any): void {
     if (this.config.state === 'locked') return;
 
-    this.isPressed = false;
-    this.render();
-    this.container.scale.x = 1;
-    this.container.scale.y = 1;
-
+    this.resetPressState();
     this.emit('click', { level: this.config.level, event });
   }
 
   private onPointerUpOutside(): void {
     if (this.config.state === 'locked') return;
 
+    this.resetPressState();
+    this.emit('cancel');
+  }
+
+  private resetPressState(): void {
     this.isPressed = false;
     this.render();
-    this.container.scale.x = 1;
-    this.container.scale.y = 1;
+    this.setScale(1);
+  }
 
-    this.emit('cancel');
+  private setScale(scale: number): void {
+    this.container.scale.x = scale;
+    this.container.scale.y = scale;
   }
 
   /**

From 15d0ad515cc7e0ef0ee3c8dc1456ef3d557be6d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Can=20Erdog=CC=86an?= <can@canerdogan.net>
Date: Mon, 26 Jan 2026 18:18:14 +0300
Subject: [PATCH 10/10] fix(demo): Correct GameStyleColors constant name

Changed BUTTON_GREEN to GREEN_BUTTON to match the actual constant
exported by GameStyleColors in the framework.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 docs-site/static/demos/game-tooltip-demo.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs-site/static/demos/game-tooltip-demo.html b/docs-site/static/demos/game-tooltip-demo.html
index a621e92..274dfba 100644
--- a/docs-site/static/demos/game-tooltip-demo.html
+++ b/docs-site/static/demos/game-tooltip-demo.html
@@ -328,7 +328,7 @@
                     width: 100,
                     height: 45,
                     fontSize: 16,
-                    colorScheme: GameStyleColors.BUTTON_GREEN
+                    colorScheme: GameStyleColors.GREEN_BUTTON
                 });
                 toggleBtn.setPosition(190, 640);
                 toggleBtn.on('click', () => {