SVG overflow: visible;

src/lib/components/diceRoller.svelte

@@ -24,7 +24,7 @@
         
         <!-- Numbers -->
         {#each {length: 10} as _, i}
-          <text x={20 + i * 20} y="235" text-anchor="end" font-size="10" fill="currentColor">{i+1}</text>
+          <text x={20 + i * 20} y="235" text-anchor="middle" font-size="10" fill="currentColor">{i+1}</text>
           <text x="8" y={225 - i * 20} text-anchor="middle" font-size="10" fill="currentColor">{i+1}</text>
         {/each}
         
@@ -33,7 +33,7 @@
           x1={roll.x * 20} 
           y1="40" 
           x2={roll.x * 20} 
-          y2="240" 
+          y2="220" 
           stroke="currentColor" 
           stroke-width="1" 
           stroke-dasharray="3,3" 
@@ -81,6 +81,7 @@
   svg {
     display: flex;
     justify-content: center;
+    overflow: visible;
     max-width: 75%;
     height: auto;
   }
@@ -90,13 +91,36 @@
     stroke: none;
   }
 
+  /* Theme-specific point colors */
+  :global(.theme-win95) .point {
+    fill: #000080;
+    stroke: #000080;
+  }
+
   :global(.theme-cyberpunk) .point {
     fill: #ff00ff;
-    filter: drop-shadow(0 0 8px #ff00ff);
+    filter: drop-shadow(0 0 5px #ff00ff);
+  }
+
+  :global(.theme-typewriter) .point {
+    fill: #2c2416;
+    stroke: #2c2416;
   }
 
   :global(.theme-nightmare) .point {
     fill: #ff0000;
+    stroke: #ff0000;
     filter: drop-shadow(0 0 10px #ff0000);
   }
+
+  :global(.theme-vaporwave) .point {
+    fill: #00f0ff;
+    filter: drop-shadow(0 0 5px #00f0ff);
+    stroke-width: 3;
+  }
+
+  :global(.theme-nintendo) .point {
+    fill: #e60012;
+    stroke: #e60012;
+  }
 </style>