From 1a91ff9ebb4d09844881e9c63529469aa449244e Mon Sep 17 00:00:00 2001
From: Giac <giac@sludge.link>
Date: Tue, 9 Dec 2025 08:12:20 -0600
Subject: [PATCH] Split Themes and added themes.js. Updated components

---
 src/lib/components/chartDisplay.svelte  |  63 +----
 src/lib/components/diceRoller.svelte    |  45 ----
 src/lib/components/themeSelector.svelte |   9 +-
 src/lib/styles/cyberPunk.css            |  48 ++++
 src/lib/styles/general.css              |  86 +++++++
 src/lib/styles/nightmare.css            |  49 ++++
 src/lib/styles/nintendo.css             |  64 +++++
 src/lib/styles/themes.css               | 263 --------------------
 src/lib/styles/themes.js                |  20 ++
 src/lib/styles/typewriter.css           |  42 ++++
 src/lib/styles/vaporWave.css            |  46 ++++
 src/lib/styles/win95.css                |  49 +---
 src/routes/play/+page.svelte            | 308 +-----------------------
 13 files changed, 367 insertions(+), 725 deletions(-)
 create mode 100644 src/lib/styles/cyberPunk.css
 create mode 100644 src/lib/styles/general.css
 create mode 100644 src/lib/styles/nightmare.css
 create mode 100644 src/lib/styles/nintendo.css
 delete mode 100644 src/lib/styles/themes.css
 create mode 100644 src/lib/styles/themes.js
 create mode 100644 src/lib/styles/typewriter.css
 create mode 100644 src/lib/styles/vaporWave.css

diff --git a/src/lib/components/chartDisplay.svelte b/src/lib/components/chartDisplay.svelte
index f28e420..0938ea7 100644
--- a/src/lib/components/chartDisplay.svelte
+++ b/src/lib/components/chartDisplay.svelte
@@ -15,65 +15,4 @@
   {:else}
     <div class="empty-state">Click Generate!</div>
   {/if}
-</div>
-
-<style>
-  .chart-display {
-    padding: 20px;
-    min-height: 120px;
-    margin: 15px 0;
-  }
-
-  :global(.theme-win95) .chart-display {
-    background: white;
-    border: 2px inset #808080;
-  }
-
-  :global(.theme-cyberpunk) .chart-display {
-    background: rgba(0, 255, 255, 0.05);
-    border: 1px solid #00ffff;
-  }
-
-  :global(.theme-typewriter) .chart-display {
-    background: #fffef7;
-    border: 1px solid #2c2416;
-  }
-
-  :global(.theme-nightmare) .chart-display {
-    background: #000000;
-    border: 2px solid #8b0000;
-  }
-
-  :global(.theme-vaporwave) .chart-display {
-    background: rgba(255, 255, 255, 0.15);
-    border: 2px solid #ff6ad5;
-  }
-
-  :global(.theme-nintendo) .chart-display {
-    background: #fff;
-    border: 3px solid #00a3e0;
-    border-radius: 10px;
-    color: #484848;
-  }
-
-  .axis {
-    margin: 10px 0;
-    padding: 10px;
-    border: 1px solid currentColor;
-    opacity: 0.9;
-  }
-
-  .axis-label {
-    font-weight: bold;
-    margin-bottom: 5px;
-    font-size: 11px;
-    text-transform: uppercase;
-  }
-
-  .empty-state {
-    font-style: italic;
-    text-align: center;
-    padding: 20px;
-    opacity: 0.7;
-  }
-</style>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/lib/components/diceRoller.svelte b/src/lib/components/diceRoller.svelte
index fffc455..abb17da 100644
--- a/src/lib/components/diceRoller.svelte
+++ b/src/lib/components/diceRoller.svelte
@@ -12,44 +12,6 @@
 </div>
 
 <style>
-  .dice-display {
-    padding: 20px;
-    min-height: 120px;
-    margin: 15px 0;
-  }
-
-  .theme-win95 .dice-display {
-    background: white;
-    border: 2px inset #808080;
-  }
-
-  .theme-cyberpunk .dice-display {
-    background: rgba(0, 255, 255, 0.05);
-    border: 1px solid #00ffff;
-  }
-
-  .theme-typewriter .dice-display {
-    background: #fffef7;
-    border: 1px solid #2c2416;
-  }
-
-  .theme-nightmare .dice-display {
-    background: #000000;
-    border: 2px solid #8b0000;
-  }
-
-  .theme-vaporwave .dice-display {
-    background: rgba(255, 255, 255, 0.15);
-    border: 2px solid #ff6ad5;
-  }
-
-  .theme-nintendo .dice-display {
-    background: #fff;
-    border: 3px solid #00a3e0;
-    border-radius: 10px;
-    color: #484848;
-  }
-
   .dice-emoji {
     font-size: 48px;
     text-align: center;
@@ -61,11 +23,4 @@
     margin-top: 10px;
     text-align: center;
   }
-
-  .empty-state {
-    font-style: italic;
-    text-align: center;
-    padding: 20px;
-    opacity: 0.7;
-  }
 </style>
\ No newline at end of file
diff --git a/src/lib/components/themeSelector.svelte b/src/lib/components/themeSelector.svelte
index 09f6c1c..2d3652d 100644
--- a/src/lib/components/themeSelector.svelte
+++ b/src/lib/components/themeSelector.svelte
@@ -1,23 +1,20 @@
 <script>
+  import { themeNames, themeDisplayNames } from '$lib/styles/themes.js';
   export let currentTheme;
-  
-  const themes = ['win95', 'cyberpunk', 'typewriter', 'nightmare', 'vaporwave', 'nintendo'];
 </script>
 
 <div class="button-row">
-  {#each themes as theme}
+  {#each themeNames as theme}
     <button 
       on:click={() => currentTheme = theme}
       class:active={currentTheme === theme}
     >
-      {theme.charAt(0).toUpperCase() + theme.slice(1)}
+      {themeDisplayNames[theme]}
     </button>
   {/each}
 </div>
 
 <style>
-  @import '$lib/styles/themes.css';
-  @import '$lib/styles/win95.css';
   .button-row {
     display: flex;
     gap: 10px;
diff --git a/src/lib/styles/cyberPunk.css b/src/lib/styles/cyberPunk.css
new file mode 100644
index 0000000..1980c83
--- /dev/null
+++ b/src/lib/styles/cyberPunk.css
@@ -0,0 +1,48 @@
+.theme-cyberpunk {
+  font-family: 'Courier New', monospace;
+  background: #0a0e27;
+  color: #00ffff;
+}
+
+.theme-cyberpunk .window {
+  background: rgba(10, 14, 39, 0.95);
+  border: 2px solid #00ffff;
+  box-shadow: 0 0 20px #ff00ff;
+}
+
+.theme-cyberpunk .title-bar {
+  background: linear-gradient(90deg, #ff00ff, #00ffff);
+  color: #000;
+  padding: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.theme-cyberpunk fieldset {
+  border: 1px solid #ff00ff;
+}
+
+.theme-cyberpunk legend {
+  color: #ff00ff;
+  text-transform: uppercase;
+}
+
+.theme-cyberpunk button {
+  background: transparent;
+  border: 2px solid #ff00ff;
+  color: #ff00ff;
+  font-family: 'Courier New', monospace;
+  text-transform: uppercase;
+  padding: 10px 25px;
+}
+
+.theme-cyberpunk button:hover {
+  background: #ff00ff;
+  color: #000;
+}
+
+.theme-cyberpunk .chart-display,
+.theme-cyberpunk .dice-display {
+  background: rgba(0, 255, 255, 0.05);
+  border: 1px solid #00ffff;
+}
\ No newline at end of file
diff --git a/src/lib/styles/general.css b/src/lib/styles/general.css
new file mode 100644
index 0000000..c77b234
--- /dev/null
+++ b/src/lib/styles/general.css
@@ -0,0 +1,86 @@
+/* Base styles that apply to all themes */
+.container {
+  padding: 20px;
+  min-height: 100vh;
+}
+
+.window {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.window-body {
+  padding: 20px;
+}
+
+.title-bar {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.home-button {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: inherit;
+  padding: 5px 10px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.home-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+fieldset {
+  padding: 15px;
+  margin: 15px 0;
+}
+
+legend {
+  font-weight: bold;
+  padding: 0 5px;
+}
+
+.button-row {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+
+button {
+  padding: 8px 24px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.chart-display,
+.dice-display {
+  padding: 20px;
+  min-height: 120px;
+  margin: 15px 0;
+}
+
+.axis {
+  margin: 10px 0;
+  padding: 10px;
+  border: 1px solid currentColor;
+  opacity: 0.9;
+}
+
+.axis-label {
+  font-weight: bold;
+  margin-bottom: 5px;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.empty-state {
+  font-style: italic;
+  text-align: center;
+  padding: 20px;
+  opacity: 0.7;
+}
\ No newline at end of file
diff --git a/src/lib/styles/nightmare.css b/src/lib/styles/nightmare.css
new file mode 100644
index 0000000..83019f1
--- /dev/null
+++ b/src/lib/styles/nightmare.css
@@ -0,0 +1,49 @@
+.theme-nightmare {
+  font-family: 'Georgia', serif;
+  background: #000000;
+  color: #8b0000;
+}
+
+.theme-nightmare .window {
+  background: #0d0000;
+  border: 3px solid #8b0000;
+  box-shadow: 0 0 30px #ff0000;
+}
+
+.theme-nightmare .title-bar {
+  background: linear-gradient(180deg, #3a0000, #000000);
+  color: #ff0000;
+  padding: 15px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 5px;
+  text-shadow: 0 0 10px #ff0000;
+}
+
+.theme-nightmare fieldset {
+  border: 2px solid #8b0000;
+}
+
+.theme-nightmare legend {
+  color: #ff0000;
+  text-shadow: 0 0 5px #ff0000;
+}
+
+.theme-nightmare button {
+  background: #3a0000;
+  border: 2px solid #8b0000;
+  color: #ff0000;
+  font-family: 'Georgia', serif;
+  text-transform: uppercase;
+  padding: 10px 25px;
+}
+
+.theme-nightmare button:hover {
+  background: #8b0000;
+}
+
+.theme-nightmare .chart-display,
+.theme-nightmare .dice-display {
+  background: #000000;
+  border: 2px solid #8b0000;
+}
\ No newline at end of file
diff --git a/src/lib/styles/nintendo.css b/src/lib/styles/nintendo.css
new file mode 100644
index 0000000..e6425aa
--- /dev/null
+++ b/src/lib/styles/nintendo.css
@@ -0,0 +1,64 @@
+.theme-nintendo {
+  font-family: 'Arial', sans-serif;
+  background: #e60012;
+  color: #fff;
+}
+
+.theme-nintendo .window {
+  background: #fff;
+  border: 8px solid #e60012;
+  border-radius: 20px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.theme-nintendo .title-bar {
+  background: #e60012;
+  color: #fff;
+  padding: 20px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 24px;
+  letter-spacing: 2px;
+}
+
+.theme-nintendo .window-body {
+  color: #484848;
+}
+
+.theme-nintendo fieldset {
+  border: 3px solid #e60012;
+  border-radius: 15px;
+  background: #f7f7f7;
+}
+
+.theme-nintendo legend {
+  color: #e60012;
+}
+
+.theme-nintendo button {
+  background: #e60012;
+  border: none;
+  border-radius: 25px;
+  color: #fff;
+  text-transform: uppercase;
+  padding: 12px 30px;
+  box-shadow: 0 4px 0 #a00009;
+}
+
+.theme-nintendo button:hover {
+  background: #ff0018;
+}
+
+.theme-nintendo button:active {
+  box-shadow: 0 2px 0 #a00009;
+  transform: translateY(2px);
+}
+
+.theme-nintendo .chart-display,
+.theme-nintendo .dice-display {
+  background: #fff;
+  border: 3px solid #00a3e0;
+  border-radius: 10px;
+  color: #484848;
+}
\ No newline at end of file
diff --git a/src/lib/styles/themes.css b/src/lib/styles/themes.css
deleted file mode 100644
index f530847..0000000
--- a/src/lib/styles/themes.css
+++ /dev/null
@@ -1,263 +0,0 @@
-:global(body) {
-  margin: 0;
-  padding: 0;
-}
-
-.container {
-  padding: 20px;
-  min-height: 100vh;
-}
-
-.window {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.window-body {
-  padding: 20px;
-}
-
-fieldset {
-  padding: 15px;
-  margin: 15px 0;
-}
-
-legend {
-  font-weight: bold;
-  padding: 0 5px;
-}
-
-.button-row {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  margin-top: 10px;
-}
-
-button {
-  padding: 8px 24px;
-  cursor: pointer;
-  font-weight: bold;
-}
-
-/* Cyberpunk Theme */
-.theme-cyberpunk {
-  font-family: 'Courier New', monospace;
-  background: #0a0e27;
-  color: #00ffff;
-}
-
-.theme-cyberpunk .window {
-  background: rgba(10, 14, 39, 0.95);
-  border: 2px solid #00ffff;
-  box-shadow: 0 0 20px #ff00ff;
-}
-
-.theme-cyberpunk .title-bar {
-  background: linear-gradient(90deg, #ff00ff, #00ffff);
-  color: #000;
-  padding: 12px;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-.theme-cyberpunk fieldset {
-  border: 1px solid #ff00ff;
-}
-
-.theme-cyberpunk legend {
-  color: #ff00ff;
-  text-transform: uppercase;
-}
-
-.theme-cyberpunk button {
-  background: transparent;
-  border: 2px solid #ff00ff;
-  color: #ff00ff;
-  font-family: 'Courier New', monospace;
-  text-transform: uppercase;
-  padding: 10px 25px;
-}
-
-.theme-cyberpunk button:hover {
-  background: #ff00ff;
-  color: #000;
-}
-
-/* Typewriter Theme */
-.theme-typewriter {
-  font-family: 'Courier', monospace;
-  background: #f4e8d0;
-  color: #2c2416;
-}
-
-.theme-typewriter .window {
-  background: #fffef7;
-  border: 3px double #2c2416;
-  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
-}
-
-.theme-typewriter .title-bar {
-  background: #2c2416;
-  color: #f4e8d0;
-  padding: 12px;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 3px;
-}
-
-.theme-typewriter fieldset {
-  border: 2px solid #2c2416;
-}
-
-.theme-typewriter button {
-  background: #2c2416;
-  border: 2px solid #2c2416;
-  color: #f4e8d0;
-  font-family: 'Courier', monospace;
-}
-
-/* Nightmare Theme */
-.theme-nightmare {
-  font-family: 'Georgia', serif;
-  background: #000000;
-  color: #8b0000;
-}
-
-.theme-nightmare .window {
-  background: #0d0000;
-  border: 3px solid #8b0000;
-  box-shadow: 0 0 30px #ff0000;
-}
-
-.theme-nightmare .title-bar {
-  background: linear-gradient(180deg, #3a0000, #000000);
-  color: #ff0000;
-  padding: 15px;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 5px;
-  text-shadow: 0 0 10px #ff0000;
-}
-
-.theme-nightmare fieldset {
-  border: 2px solid #8b0000;
-}
-
-.theme-nightmare legend {
-  color: #ff0000;
-  text-shadow: 0 0 5px #ff0000;
-}
-
-.theme-nightmare button {
-  background: #3a0000;
-  border: 2px solid #8b0000;
-  color: #ff0000;
-  font-family: 'Georgia', serif;
-  text-transform: uppercase;
-  padding: 10px 25px;
-}
-
-.theme-nightmare button:hover {
-  background: #8b0000;
-}
-
-/* Vaporwave Theme */
-.theme-vaporwave {
-  font-family: 'Arial', sans-serif;
-  background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%);
-  color: #fff;
-}
-
-.theme-vaporwave .window {
-  background: rgba(255, 106, 213, 0.3);
-  backdrop-filter: blur(10px);
-  border: 3px solid #00f0ff;
-  box-shadow: 0 8px 32px rgba(0, 240, 255, 0.4);
-}
-
-.theme-vaporwave .title-bar {
-  background: linear-gradient(90deg, #ff6ad5, #00f0ff);
-  color: #fff;
-  padding: 15px;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 4px;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.theme-vaporwave fieldset {
-  border: 2px solid #00f0ff;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.theme-vaporwave legend {
-  color: #00f0ff;
-  text-transform: uppercase;
-}
-
-.theme-vaporwave button {
-  background: linear-gradient(135deg, #ff6ad5, #c774e8);
-  border: 2px solid #00f0ff;
-  color: #fff;
-  text-transform: uppercase;
-  padding: 12px 30px;
-}
-
-/* Nintendo Theme */
-.theme-nintendo {
-  font-family: 'Arial', sans-serif;
-  background: #e60012;
-  color: #fff;
-}
-
-.theme-nintendo .window {
-  background: #fff;
-  border: 8px solid #e60012;
-  border-radius: 20px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-}
-
-.theme-nintendo .title-bar {
-  background: #e60012;
-  color: #fff;
-  padding: 20px;
-  text-align: center;
-  font-weight: bold;
-  font-size: 24px;
-  letter-spacing: 2px;
-}
-
-.theme-nintendo .window-body {
-  color: #484848;
-}
-
-.theme-nintendo fieldset {
-  border: 3px solid #e60012;
-  border-radius: 15px;
-  background: #f7f7f7;
-}
-
-.theme-nintendo legend {
-  color: #e60012;
-}
-
-.theme-nintendo button {
-  background: #e60012;
-  border: none;
-  border-radius: 25px;
-  color: #fff;
-  text-transform: uppercase;
-  padding: 12px 30px;
-  box-shadow: 0 4px 0 #a00009;
-}
-
-.theme-nintendo button:hover {
-  background: #ff0018;
-}
-
-.theme-nintendo button:active {
-  box-shadow: 0 2px 0 #a00009;
-  transform: translateY(2px);
-}
\ No newline at end of file
diff --git a/src/lib/styles/themes.js b/src/lib/styles/themes.js
new file mode 100644
index 0000000..00c1f42
--- /dev/null
+++ b/src/lib/styles/themes.js
@@ -0,0 +1,20 @@
+export const themeNames = ['win95', 'cyberpunk', 'typewriter', 'nightmare', 'vaporwave', 'nintendo'];
+
+export const themeDisplayNames = {
+  win95: 'Windows 95',
+  cyberpunk: 'Cyberpunk',
+  typewriter: 'Typewriter',
+  nightmare: 'Nightmare',
+  vaporwave: 'Vaporwave',
+  nintendo: 'Nintendo'
+};
+
+// Import all theme CSS files
+// These will be bundled and applied globally
+import './win95.css';
+import './cyberPunk.css';
+import './typewriter.css';
+import './nightmare.css';
+import './vaporWave.css';
+import './nintendo.css';
+import './general.css';
\ No newline at end of file
diff --git a/src/lib/styles/typewriter.css b/src/lib/styles/typewriter.css
new file mode 100644
index 0000000..b24c9e0
--- /dev/null
+++ b/src/lib/styles/typewriter.css
@@ -0,0 +1,42 @@
+.theme-typewriter {
+  font-family: 'Courier', monospace;
+  background: #f4e8d0;
+  color: #2c2416;
+}
+
+.theme-typewriter .window {
+  background: #fffef7;
+  border: 3px double #2c2416;
+  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
+}
+
+.theme-typewriter .title-bar {
+  background: #2c2416;
+  color: #f4e8d0;
+  padding: 12px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+}
+
+.theme-typewriter fieldset {
+  border: 2px solid #2c2416;
+}
+
+.theme-typewriter legend {
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.theme-typewriter button {
+  background: #2c2416;
+  border: 2px solid #2c2416;
+  color: #f4e8d0;
+  font-family: 'Courier', monospace;
+}
+
+.theme-typewriter .chart-display,
+.theme-typewriter .dice-display {
+  background: #fffef7;
+  border: 1px solid #2c2416;
+}
\ No newline at end of file
diff --git a/src/lib/styles/vaporWave.css b/src/lib/styles/vaporWave.css
new file mode 100644
index 0000000..f165c81
--- /dev/null
+++ b/src/lib/styles/vaporWave.css
@@ -0,0 +1,46 @@
+.theme-vaporwave {
+  font-family: 'Arial', sans-serif;
+  background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%);
+  color: #fff;
+}
+
+.theme-vaporwave .window {
+  background: rgba(255, 106, 213, 0.3);
+  backdrop-filter: blur(10px);
+  border: 3px solid #00f0ff;
+  box-shadow: 0 8px 32px rgba(0, 240, 255, 0.4);
+}
+
+.theme-vaporwave .title-bar {
+  background: linear-gradient(90deg, #ff6ad5, #00f0ff);
+  color: #fff;
+  padding: 15px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 4px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.theme-vaporwave fieldset {
+  border: 2px solid #00f0ff;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.theme-vaporwave legend {
+  color: #00f0ff;
+  text-transform: uppercase;
+}
+
+.theme-vaporwave button {
+  background: linear-gradient(135deg, #ff6ad5, #c774e8);
+  border: 2px solid #00f0ff;
+  color: #fff;
+  text-transform: uppercase;
+  padding: 12px 30px;
+}
+
+.theme-vaporwave .chart-display,
+.theme-vaporwave .dice-display {
+  background: rgba(255, 255, 255, 0.15);
+  border: 2px solid #ff6ad5;
+}
\ No newline at end of file
diff --git a/src/lib/styles/win95.css b/src/lib/styles/win95.css
index 5437f60..ec9dc34 100644
--- a/src/lib/styles/win95.css
+++ b/src/lib/styles/win95.css
@@ -1,46 +1,3 @@
-:global(body) {
-  margin: 0;
-  padding: 0;
-}
-
-.container {
-  padding: 20px;
-  min-height: 100vh;
-}
-
-.window {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.window-body {
-  padding: 20px;
-}
-
-fieldset {
-  padding: 15px;
-  margin: 15px 0;
-}
-
-legend {
-  font-weight: bold;
-  padding: 0 5px;
-}
-
-.button-row {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  margin-top: 10px;
-}
-
-button {
-  padding: 8px 24px;
-  cursor: pointer;
-  font-weight: bold;
-}
-
-/* Windows 95 Theme */
 .theme-win95 {
   font-family: 'MS Sans Serif', Arial, sans-serif;
   background: #008080;
@@ -73,4 +30,10 @@ button {
 
 .theme-win95 button:active {
   border-color: #000000 #ffffff #ffffff #000000;
+}
+
+.theme-win95 .chart-display,
+.theme-win95 .dice-display {
+  background: white;
+  border: 2px inset #808080;
 }
\ No newline at end of file
diff --git a/src/routes/play/+page.svelte b/src/routes/play/+page.svelte
index 3e459f0..e67e0e8 100644
--- a/src/routes/play/+page.svelte
+++ b/src/routes/play/+page.svelte
@@ -41,7 +41,7 @@
 <div class="container theme-{currentTheme}">
   <div class="window">
     <div class="title-bar">
-      <button class="home-button" on:click={goHome}>← Home</button>
+      <a href="/" class="home-button">← Home</a>
       <span>On the Spectrum - Party Game</span>
     </div>
     
@@ -73,308 +73,4 @@
       </fieldset>
     </div>
   </div>
-</div>
-<style>
-  @import '$lib/styles/themes.css';
-  @import '$lib/styles/win95.css';
-</style>
-<!-- <style>
-  :global(body) {
-    margin: 0;
-    padding: 0;
-  }
-
-  .container {
-    padding: 20px;
-    min-height: 100vh;
-  }
-
-  .window {
-    max-width: 800px;
-    margin: 0 auto;
-  }
-
-  .window-body {
-    padding: 20px;
-  }
-
-  fieldset {
-    padding: 15px;
-    margin: 15px 0;
-  }
-
-  legend {
-    font-weight: bold;
-    padding: 0 5px;
-  }
-
-  .button-row {
-    display: flex;
-    gap: 10px;
-    justify-content: center;
-    margin-top: 10px;
-  }
-
-  button {
-    padding: 8px 24px;
-    cursor: pointer;
-    font-weight: bold;
-  }
-
-  /* Windows 95 Theme */
-  .theme-win95 {
-    font-family: 'MS Sans Serif', Arial, sans-serif;
-    background: #008080;
-  }
-
-  .theme-win95 .window {
-    background: #c0c0c0;
-    border: 2px solid;
-    border-color: #dfdfdf #808080 #808080 #dfdfdf;
-    box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
-  }
-
-  .theme-win95 .title-bar {
-    background: linear-gradient(to right, #000080, #1084d0);
-    color: white;
-    padding: 8px;
-    font-weight: bold;
-  }
-
-  .theme-win95 fieldset {
-    border: 2px groove #c0c0c0;
-  }
-
-  .theme-win95 button {
-    background: #c0c0c0;
-    border: 2px solid;
-    border-color: #ffffff #000000 #000000 #ffffff;
-    font-family: 'MS Sans Serif', Arial, sans-serif;
-  }
-
-  .theme-win95 button:active {
-    border-color: #000000 #ffffff #ffffff #000000;
-  }
-
-  /* Cyberpunk Theme */
-  .theme-cyberpunk {
-    font-family: 'Courier New', monospace;
-    background: #0a0e27;
-    color: #00ffff;
-  }
-
-  .theme-cyberpunk .window {
-    background: rgba(10, 14, 39, 0.95);
-    border: 2px solid #00ffff;
-    box-shadow: 0 0 20px #ff00ff;
-  }
-
-  .theme-cyberpunk .title-bar {
-    background: linear-gradient(90deg, #ff00ff, #00ffff);
-    color: #000;
-    padding: 12px;
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-
-  .theme-cyberpunk fieldset {
-    border: 1px solid #ff00ff;
-  }
-
-  .theme-cyberpunk legend {
-    color: #ff00ff;
-    text-transform: uppercase;
-  }
-
-  .theme-cyberpunk button {
-    background: transparent;
-    border: 2px solid #ff00ff;
-    color: #ff00ff;
-    font-family: 'Courier New', monospace;
-    text-transform: uppercase;
-    padding: 10px 25px;
-  }
-
-  .theme-cyberpunk button:hover {
-    background: #ff00ff;
-    color: #000;
-  }
-
-  /* Typewriter Theme */
-  .theme-typewriter {
-    font-family: 'Courier', monospace;
-    background: #f4e8d0;
-    color: #2c2416;
-  }
-
-  .theme-typewriter .window {
-    background: #fffef7;
-    border: 3px double #2c2416;
-    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
-  }
-
-  .theme-typewriter .title-bar {
-    background: #2c2416;
-    color: #f4e8d0;
-    padding: 12px;
-    text-align: center;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-  }
-
-  .theme-typewriter fieldset {
-    border: 2px solid #2c2416;
-  }
-
-  .theme-typewriter button {
-    background: #2c2416;
-    border: 2px solid #2c2416;
-    color: #f4e8d0;
-    font-family: 'Courier', monospace;
-  }
-
-  /* Nightmare Theme */
-  .theme-nightmare {
-    font-family: 'Georgia', serif;
-    background: #000000;
-    color: #8b0000;
-  }
-
-  .theme-nightmare .window {
-    background: #0d0000;
-    border: 3px solid #8b0000;
-    box-shadow: 0 0 30px #ff0000;
-  }
-
-  .theme-nightmare .title-bar {
-    background: linear-gradient(180deg, #3a0000, #000000);
-    color: #ff0000;
-    padding: 15px;
-    text-align: center;
-    text-transform: uppercase;
-    letter-spacing: 5px;
-    text-shadow: 0 0 10px #ff0000;
-  }
-
-  .theme-nightmare fieldset {
-    border: 2px solid #8b0000;
-  }
-
-  .theme-nightmare legend {
-    color: #ff0000;
-    text-shadow: 0 0 5px #ff0000;
-  }
-
-  .theme-nightmare button {
-    background: #3a0000;
-    border: 2px solid #8b0000;
-    color: #ff0000;
-    font-family: 'Georgia', serif;
-    text-transform: uppercase;
-    padding: 10px 25px;
-  }
-
-  .theme-nightmare button:hover {
-    background: #8b0000;
-  }
-
-  /* Vaporwave Theme */
-  .theme-vaporwave {
-    font-family: 'Arial', sans-serif;
-    background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%);
-    color: #fff;
-  }
-
-  .theme-vaporwave .window {
-    background: rgba(255, 106, 213, 0.3);
-    backdrop-filter: blur(10px);
-    border: 3px solid #00f0ff;
-    box-shadow: 0 8px 32px rgba(0, 240, 255, 0.4);
-  }
-
-  .theme-vaporwave .title-bar {
-    background: linear-gradient(90deg, #ff6ad5, #00f0ff);
-    color: #fff;
-    padding: 15px;
-    text-align: center;
-    text-transform: uppercase;
-    letter-spacing: 4px;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-  }
-
-  .theme-vaporwave fieldset {
-    border: 2px solid #00f0ff;
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  .theme-vaporwave legend {
-    color: #00f0ff;
-    text-transform: uppercase;
-  }
-
-  .theme-vaporwave button {
-    background: linear-gradient(135deg, #ff6ad5, #c774e8);
-    border: 2px solid #00f0ff;
-    color: #fff;
-    text-transform: uppercase;
-    padding: 12px 30px;
-  }
-
-  /* Nintendo Theme */
-  .theme-nintendo {
-    font-family: 'Arial', sans-serif;
-    background: #e60012;
-    color: #fff;
-  }
-
-  .theme-nintendo .window {
-    background: #fff;
-    border: 8px solid #e60012;
-    border-radius: 20px;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-    overflow: hidden;
-  }
-
-  .theme-nintendo .title-bar {
-    background: #e60012;
-    color: #fff;
-    padding: 20px;
-    text-align: center;
-    font-weight: bold;
-    font-size: 24px;
-    letter-spacing: 2px;
-  }
-
-  .theme-nintendo .window-body {
-    color: #484848;
-  }
-
-  .theme-nintendo fieldset {
-    border: 3px solid #e60012;
-    border-radius: 15px;
-    background: #f7f7f7;
-  }
-
-  .theme-nintendo legend {
-    color: #e60012;
-  }
-
-  .theme-nintendo button {
-    background: #e60012;
-    border: none;
-    border-radius: 25px;
-    color: #fff;
-    text-transform: uppercase;
-    padding: 12px 30px;
-    box-shadow: 0 4px 0 #a00009;
-  }
-
-  .theme-nintendo button:hover {
-    background: #ff0018;
-  }
-
-  .theme-nintendo button:active {
-    box-shadow: 0 2px 0 #a00009;
-    transform: translateY(2px);
-  }
-</style> -->
\ No newline at end of file
+</div>
\ No newline at end of file