Added routs/Lib Components and assets.

src/lib/components/chartDisplay.svelte

@@ -0,0 +1,79 @@
+<script>
+  export let chart;
+</script>
+
+<div class="chart-display">
+  {#if chart}
+    <div class="axis">
+      <div class="axis-label">X-Axis (Horizontal)</div>
+      <div>{chart.x[0]} ↔ {chart.x[1]}</div>
+    </div>
+    <div class="axis">
+      <div class="axis-label">Y-Axis (Vertical)</div>
+      <div>{chart.y[0]} ↔ {chart.y[1]}</div>
+    </div>
+  {: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>

src/lib/components/diceRoller.svelte

@@ -0,0 +1,71 @@
+<script>
+  export let roll;
+</script>
+
+<div class="dice-display">
+  {#if roll}
+    <div class="dice-emoji">🎲 🎲</div>
+    <div class="dice-result">X: {roll.x} | Y: {roll.y}</div>
+  {:else}
+    <div class="empty-state">Click Roll!</div>
+  {/if}
+</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;
+  }
+
+  .dice-result {
+    font-size: 28px;
+    font-weight: bold;
+    margin-top: 10px;
+    text-align: center;
+  }
+
+  .empty-state {
+    font-style: italic;
+    text-align: center;
+    padding: 20px;
+    opacity: 0.7;
+  }
+</style>

src/lib/components/themeSelector.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let currentTheme;
+  
+  const themes = ['win95', 'cyberpunk', 'typewriter', 'nightmare', 'vaporwave', 'nintendo'];
+</script>
+
+<div class="button-row">
+  {#each themes as theme}
+    <button 
+      on:click={() => currentTheme = theme}
+      class:active={currentTheme === theme}
+    >
+      {theme.charAt(0).toUpperCase() + theme.slice(1)}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .button-row {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 10px;
+  }
+</style>

src/lib/components/toggle.svelte

@@ -0,0 +1,58 @@
+<script>
+  export let checked = false;
+</script>
+
+<div class="toggle-container">
+  <span>Family Friendly</span>
+  <div 
+    class="toggle-switch"
+    class:active={checked}
+    on:click={() => checked = !checked}
+    on:keypress={(e) => e.key === 'Enter' && (checked = !checked)}
+    role="switch"
+    aria-checked={checked}
+    tabindex="0"
+  >
+    <div class="toggle-slider"></div>
+  </div>
+  <span>Adult</span>
+</div>
+
+<style>
+  .toggle-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: center;
+    margin: 10px 0;
+  }
+
+  .toggle-switch {
+    position: relative;
+    width: 50px;
+    height: 24px;
+    background: #ccc;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: background 0.3s;
+  }
+
+  .toggle-switch.active {
+    background: #ff6b6b;
+  }
+
+  .toggle-slider {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.3s;
+  }
+
+  .toggle-switch.active .toggle-slider {
+    transform: translateX(26px);
+  }
+</style>

src/lib/data/xAxes.js

@@ -0,0 +1,15 @@
+export const xAxes = [
+  { values: ["Traditional", "Experimental"], adult: false },
+  { values: ["Budget", "Luxury"], adult: false },
+  { values: ["Old", "New"], adult: false },
+  { values: ["Simple", "Complex"], adult: false },
+  { values: ["Minimal", "Maximal"], adult: false },
+  
+  // Adult axes
+  { values: ["Beer", "Cocktails"], adult: true },
+  { values: ["Swipe-happy", "Selective"], adult: true },
+  { values: ["Casual", "Serious"], adult: true },
+  
+  // Add more X axes here...
+  // Format: { values: ["Left extreme", "Right extreme"], adult: true/false }
+];

src/lib/data/yAxes.js

@@ -0,0 +1,15 @@
+export const yAxes = [
+  { values: ["Thin", "Thick"], adult: false },
+  { values: ["Planned", "Spontaneous"], adult: false },
+  { values: ["Calm", "Upbeat"], adult: false },
+  { values: ["Indoor", "Outdoor"], adult: false },
+  { values: ["Solo", "Group"], adult: false },
+  
+  // Adult axes
+  { values: ["Occasional", "Frequent"], adult: true },
+  { values: ["Hookups", "Relationships"], adult: true },
+  { values: ["Private", "Public"], adult: true },
+  
+  // Add more Y axes here...
+  // Format: { values: ["Bottom extreme", "Top extreme"], adult: true/false }
+];

src/lib/styles/themes.css

@@ -0,0 +1,298 @@
+: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);
+}

src/routes/+layout.svelte

@@ -11,6 +11,7 @@
 <nav>
 	<h1>On the Spectrum</h1>
 	<ul>
+		<li><a href="/">Home</a></li>
 		<li><a href="play">Play</a></li>
 		<li><a href="rules">Rules</a></li>
 		<li><a href="submit">Submit</a></li>

src/routes/+page.svelte

@@ -1 +1,111 @@
-<h1>Are you <b>On The Spectrum?</b></h1>
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  
+  function navigate(page: string) {
+    goto(`/${page}`); 
+  }
+</script>
+
+<div class="home-container">
+  <div class="home-content">
+    <h1 class="title">On the Spectrum!</h1>
+    <p class="subtitle">Well...are ya?</p>
+    
+    <div class="tabs">
+      <button class="tab-button" on:click={() => navigate('play')}>
+        <span class="tab-icon">🎮</span>
+        <span>Play</span>
+      </button>
+      <button class="tab-button" on:click={() => navigate('rules')}>
+        <span class="tab-icon">📖</span>
+        <span>Rules</span>
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .home-container {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 20px;
+  }
+
+  .home-content {
+    text-align: center;
+    max-width: 600px;
+    width: 100%;
+  }
+
+  .title {
+    font-size: 3.5rem;
+    font-weight: bold;
+    color: white;
+    margin-bottom: 1rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    line-height: 1.2;
+  }
+
+  @media (max-width: 768px) {
+    .title {
+      font-size: 2.5rem;
+    }
+  }
+
+  .subtitle {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 3rem;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  .tabs {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .tab-button {
+    background: white;
+    border: none;
+    border-radius: 15px;
+    padding: 30px 50px;
+    font-size: 1.5rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    min-width: 200px;
+  }
+
+  .tab-button:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+  }
+
+  .tab-icon {
+    font-size: 3rem;
+  }
+
+  @media (max-width: 768px) {
+    .tab-button {
+      padding: 20px 40px;
+      font-size: 1.2rem;
+      min-width: 150px;
+    }
+
+    .tab-icon {
+      font-size: 2rem;
+    }
+  }
+</style>

src/routes/play/+page.svelte

@@ -1,72 +1,376 @@
 <script>
-	let { data } = $props();
+  import { goto } from '$app/navigation';
+  import { xAxes } from '$lib/data/xAxes.js';
+  import { yAxes } from '$lib/data/yAxes.js';
+  import ChartDisplay from '$lib/components/chartDisplay.svelte';
+  import DiceRoller from '$lib/components/diceRoller.svelte';
+  import ThemeSelector from '$lib/components/themeSelector.svelte';
+  import Toggle from '$lib/components/toggle.svelte';
 
-	let mode = $state('adult');
+  let currentTheme = 'win95';
-	let axes = $state({ x: [''], y: [''], empty: true });
+  let adultMode = false;
-	let position = $state({ x: 0, y: 0 });
+  let currentChart = null;
-	function generateAxes() {
+  let diceRoll = null;
-		// pull Axes in from data using a database
+
-		axes = { x: ['Spicy', 'Mild'], y: ['Expensive', 'Cheap'], empty: false };
+  function generateChart() {
-	}
+    const availableXAxes = adultMode ? xAxes : xAxes.filter(axis => !axis.adult);
-	function rollPosition() {
+    const availableYAxes = adultMode ? yAxes : yAxes.filter(axis => !axis.adult);
-		function rollD10() {
+    
-			return Math.floor(Math.random() * 10) + 1;
+    const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
-		}
+    const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
-		position = { x: rollD10(), y: rollD10() };
+    
-	}
+    currentChart = {
+      x: randomX.values,
+      y: randomY.values
+    };
+  }
+
+  function rollDice() {
+    diceRoll = {
+      x: Math.floor(Math.random() * 10) + 1,
+      y: Math.floor(Math.random() * 10) + 1
+    };
+  }
+
+  function goHome() {
+    goto('/'); 
+  }
 </script>
 
-<div>
+<div class="container theme-{currentTheme}">
-	<h2>On the Spectrum</h2>
+  <div class="window">
-	<fieldset>
+    <div class="title-bar">
-		<legend>Adult Mode (18+)</legend>
+      <button class="home-button" on:click={goHome}>← Home</button>
-		<div>
+      <span>On the Spectrum - Party Game</span>
-			<label>
+    </div>
-				<span>Adult</span>
+    
-				<input bind:group={mode} type="radio" value="adult" />
+    <div class="window-body">
-			</label>
+      <fieldset>
-			<label>
+        <legend>Theme Selector</legend>
-				<span>Family Friendly</span>
+        <ThemeSelector bind:currentTheme />
-				<input bind:group={mode} type="radio" value="family" />
+      </fieldset>
-			</label>
+
-		</div>
+      <fieldset>
-	</fieldset>
+        <legend>Adult Mode (18+)</legend>
-	<fieldset>
+        <Toggle bind:checked={adultMode} />
-		<legend>Axes Generator</legend>
+      </fieldset>
-		{#if axes.empty}
+
-			<div>
+      <fieldset>
-				<h3>Click Generate!</h3>
+        <legend>Chart Generator</legend>
-			</div>
+        <ChartDisplay chart={currentChart} />
-		{:else}
+        <div class="button-row">
-			<div>
+          <button on:click={generateChart}>Generate</button>
-				<div>
+        </div>
-					<h4>X-Axis</h4>
+      </fieldset>
-					<p>{axes.x[0]} ↔ {axes.x[1]}</p>
+
-				</div>
+      <fieldset>
-				<div>
+        <legend>Position Roller</legend>
-					<h4>Y-Axis</h4>
+        <DiceRoller roll={diceRoll} />
-					<p>{axes.y[0]} ↔ {axes.y[1]}</p>
+        <div class="button-row">
-				</div>
+          <button on:click={rollDice}>Roll Dice</button>
-			</div>
+        </div>
-		{/if}
+      </fieldset>
-		<div>
+    </div>
-			<button onclick={generateAxes}>Generate</button>
+  </div>
-		</div>
-	</fieldset>
-	<fieldset>
-		<legend>Position Roller</legend>
-		{#if position.x == 0}
-			<div>
-				<h3>Click Roll!</h3>
-			</div>
-		{:else}
-			<div>
-				<h4>Position</h4>
-				<p>X:{position.x} | Y:{position.y}</p>
-			</div>
-		{/if}
-		<div>
-			<button onclick={rollPosition}>Generate</button>
-		</div>
-	</fieldset>
 </div>
+
+<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>

src/routes/rules/+page.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  
+  function goHome() {
+    goto('/'); 
+  }
+</script>
+
+<div class="rules-container">
+  <div class="rules-content">
+    <button class="back-button" on:click={() => goHome()}>← Back to Home</button>
+    
+    <h1>How to Play</h1>
+    
+    <section>
+      <h2>🎯 Objective</h2>
+      <p>--</p>
+    </section>
+
+    <section>
+      <h2>🎮 Setup</h2>
+      <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+    </section>
+
+    <section>
+      <h2>📊 How to Play</h2>
+      <ol>
+        <li><strong>Generate a Chart:</strong> Click "Generate" to get a random spectrum with X and Y axes</li>
+      </ol>
+    </section>
+
+    <section>
+      <h2>Points</h2>
+      <p><strong>5 Points:</strong>0 away</p>
+      <p><strong>4 Points:</strong>1 away</p>
+      <p><strong>3 Points:</strong>2 away</p>
+      <p><strong>2 Points:</strong>3 away</p>
+      <p><strong>1 Point:</strong>4 away</p>
+      <p><strong>0 Points:</strong>5+ away</p>
+    </section>
+
+    <section>
+      <h2>💡 Tips</h2>
+      <ul>
+        <li>--</li>
+      </ul>
+    </section>
+  </div>
+</div>
+
+<style>
+  .rules-container {
+    min-height: 100vh;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 40px 20px;
+  }
+
+  .rules-content {
+    max-width: 800px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  }
+
+  .back-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    margin-bottom: 30px;
+    transition: transform 0.2s;
+  }
+
+  .back-button:hover {
+    transform: translateY(-2px);
+  }
+
+  h1 {
+    color: #333;
+    font-size: 2.5rem;
+    margin-bottom: 30px;
+    text-align: center;
+  }
+
+  h2 {
+    color: #667eea;
+    font-size: 1.8rem;
+    margin-top: 30px;
+    margin-bottom: 15px;
+  }
+
+  h3 {
+    color: #764ba2;
+    font-size: 1.3rem;
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+
+  section {
+    margin-bottom: 30px;
+  }
+
+  p {
+    color: #555;
+    line-height: 1.6;
+    margin-bottom: 10px;
+  }
+
+  ol, ul {
+    color: #555;
+    line-height: 1.8;
+    padding-left: 25px;
+  }
+
+  li {
+    margin-bottom: 10px;
+  }
+
+  strong {
+    color: #333;
+  }
+
+  @media (max-width: 768px) {
+    .rules-content {
+      padding: 20px;
+    }
+
+    h1 {
+      font-size: 2rem;
+    }
+
+    h2 {
+      font-size: 1.5rem;
+    }
+  }
+</style>

svelte.config.js

@@ -15,4 +15,4 @@ const config = {
 	}
 };
 
-export default config;
+export default config;

tsconfig.json

@@ -10,7 +10,8 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "bundler"
+		"moduleResolution": "bundler",
+		"noImplicitAny": false
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files