fix emojis

fix-emojis.ps1

@@ -0,0 +1,67 @@
+$content = Get-Content 'index.html' -Raw -Encoding UTF8
+
+# Replace broken emoji placeholders with proper Unicode emojis
+# Line 171 - Profile icon
+$content = $content -replace '<span class="utility-icon">\?\?</span>\s*<span class="utility-label">Profile</span>', '<span class="utility-icon">👤</span><span class="utility-label">Profile</span>'
+
+# Line 175 - Guide icon  
+$content = $content -replace '<span class="utility-icon">\?\?</span>\s*<span class="utility-label">Guide</span>', '<span class="utility-icon">📖</span><span class="utility-label">Guide</span>'
+
+# Line 179 - Options icon
+$content = $content -replace '<span class="utility-icon">\?\?</span>\s*<span class="utility-label">Options</span>', '<span class="utility-icon">⚙️</span><span class="utility-label">Options</span>'
+
+# Line 198-210 - Feature icons
+$content = $content -replace '<span class="feature-icon">\?\?</span>\s*<span class="feature-text">Advanced Training', '<span class="feature-icon">🎯</span><span class="feature-text">Advanced Training'
+$content = $content -replace '<span class="feature-icon">\?\?</span>\s*<span class="feature-text">Quick Sessions', '<span class="feature-icon">⚡</span><span class="feature-text">Quick Sessions'
+$content = $content -replace '<span class="feature-icon">\?\?</span>\s*<span class="feature-text">Cinema Mode', '<span class="feature-icon">🎬</span><span class="feature-text">Cinema Mode'
+$content = $content -replace '<span class="feature-icon">\?\?</span>\s*<span class="feature-text">Hypno Gallery', '<span class="feature-icon">🌀</span><span class="feature-text">Hypno Gallery'
+
+# Music controls
+$content = $content -replace 'title="Music Controls">\?\?</button>', 'title="Music Controls">🎵</button>'
+$content = $content -replace 'title="Play/Pause">\?\?</button>', 'title="Play/Pause">⏯️</button>'
+$content = $content -replace 'title="Loop">\?\?</button>', 'title="Loop">🔁</button>'
+$content = $content -replace 'title="Shuffle">\?\?</button>', 'title="Shuffle">🔀</button>'
+$content = $content -replace '<span class="volume-icon">\?\?</span>', '<span class="volume-icon">🔊</span>'
+
+# Image library icons
+$content = $content -replace '<h2>\?\?\? Image Library Management</h2>', '<h2>🖼️ Image Library Management</h2>'
+$content = $content -replace '<h3>\?\? Import Image Files</h3>', '<h3>📂 Import Image Files</h3>'
+$content = $content -replace '>\?\? Task Images</button>', '>📸 Task Images</button>'
+$content = $content -replace '>\?\? Consequence Images</button>', '>⚠️ Consequence Images</button>'
+$content = $content -replace '<span>\?\? Desktop:', '<span>💻 Desktop:'
+$content = $content -replace '<span>\?\? Web:', '<span>🌐 Web:'
+$content = $content -replace '>\?\? Storage Info</button>', '>💾 Storage Info</button>'
+$content = $content -replace '>\?\? Cleanup</button>', '>🧹 Cleanup</button>'
+$content = $content -replace '>\?\?\? Clear All</button>', '>🗑️ Clear All</button>'
+$content = $content -replace '<span class="scan-info">\?\? Auto-scan', '<span class="scan-info">🔍 Auto-scan'
+$content = $content -replace '<h3>\?\?\? Current Image Library</h3>', '<h3>📚 Current Image Library</h3>'
+$content = $content -replace '>\?\? Refresh</button>', '>🔄 Refresh</button>'
+$content = $content -replace '<h4>\?\?\? Image Preview</h4>', '<h4>👁️ Image Preview</h4>'
+
+# Audio library icons
+$content = $content -replace '<h2>\?\? Audio Library Management</h2>', '<h2>🎵 Audio Library Management</h2>'
+$content = $content -replace '<h3>\?\? Import Audio Files</h3>', '<h3>📂 Import Audio Files</h3>'
+$content = $content -replace '>\?\? Background Music</button>', '>🎶 Background Music</button>'
+$content = $content -replace '>\?\? Ambient Sounds</button>', '>🌊 Ambient Sounds</button>'
+$content = $content -replace '>\?\? Scan Directories</button>', '>🔍 Scan Directories</button>'
+$content = $content -replace '<h3>\?\? Current Audio Library</h3>', '<h3>🎵 Current Audio Library</h3>'
+$content = $content -replace '<h4>\?\? Audio Preview</h4>', '<h4>🔊 Audio Preview</h4>'
+
+# Video library icons
+$content = $content -replace '<h2>\?\? Video Library Management</h2>', '<h2>🎥 Video Library Management</h2>'
+$content = $content -replace '<h3>\?\? Video Library Management</h3>', '<h3>🎬 Video Library Management</h3>'
+$content = $content -replace '>\?\? Refresh All</button>', '>🔄 Refresh All</button>'
+$content = $content -replace '>\?\? Clear All</button>', '>🗑️ Clear All</button>'
+$content = $content -replace '<h3>\?\? Video Library</h3>', '<h3>📹 Video Library</h3>'
+$content = $content -replace '<h4>\?\? Video Preview</h4>', '<h4>👁️ Video Preview</h4>'
+
+# Console log emojis (keeping existing format)
+$content = $content -replace "console\.log\('\?\?", "console.log('🔧"
+$content = $content -replace "console\.log\(`\?\?", "console.log\`🔧"
+$content = $content -replace "console\.warn\('\?\?", "console.warn('⚠️"
+$content = $content -replace "console\.error\('\?\?", "console.error('❌"
+$content = $content -replace "console\.error\('\?", "console.error('❌"
+
+$content | Set-Content 'index.html' -Encoding UTF8 -NoNewline
+
+Write-Host "Emoji fix complete!"

src/styles/styles.css

@@ -111,7 +111,7 @@ body {
 
 .game-header h1 {
     font-family: 'Audiowide', cursive;
-    font-size: 8rem;
+    font-size: clamp(3rem, 8vw, 8rem);
     margin: 0 0 var(--space-base) 0;
     color: var(--color-primary);
     text-shadow: 0 0 30px rgba(138, 43, 226, 0.7);
@@ -7242,10 +7242,18 @@ button#start-mirror-btn:disabled {
 }
 
 /* Responsive adjustments */
+@media (max-width: 1400px) {
+    .video-billboard-container {
+        width: 400px;
+        height: 260px;
+        right: 40px;
+    }
+}
+
 @media (max-width: 1200px) {
     .video-billboard-container {
-        width: 450px;
+        width: 350px;
-        height: 280px;
+        height: 220px;
         right: 30px;
     }
 }
@@ -7254,8 +7262,8 @@ button#start-mirror-btn:disabled {
 
 @media (max-width: 992px) {
     .video-billboard-container {
-        width: 380px;
+        width: 300px;
-        height: 240px;
+        height: 190px;
         right: 20px;
         top: 20%;
     }
@@ -7272,6 +7280,26 @@ button#start-mirror-btn:disabled {
     }
 }
 
+@media (max-width: 768px) {
+    .video-billboard-container {
+        width: 250px;
+        height: 160px;
+        right: 15px;
+        top: 22%;
+    }
+    
+    .billboard-controls {
+        bottom: 8px;
+        right: 8px;
+        gap: 6px;
+    }
+    
+    .billboard-btn {
+        padding: 5px 8px;
+        font-size: 11px;
+    }
+}
+
 /* Character Images Toggle Button */
 .character-toggle-btn {
     position: fixed;