importing styles from here

src/MazeRenderer.ts

@@ -1,5 +1,4 @@
 import type { MazeData } from "./types";
-import "./maze.css";
 
 export class MazeRenderer {
   private mazeData: MazeData;

src/game.css

@@ -1,9 +1,9 @@
 /* =========================================================
-   🔧 Controls (tweak these two)
+   🔧 Controls (tweak these)
    ========================================================= */
 :root {
-  --cell-size: 24px;         /* size of every grid box (maze cells + number cells) */
-  --number-font-size: 14px;  /* size of the digits around the maze */
+  --maze-cell-size: 24px;
+  --maze-number-font-size: 14px;
 }
 
 /* =========================================================
@@ -40,8 +40,8 @@
 /* Every grid box (maze cells + number cells) shares the same size */
 #maze .maze-row > div,
 #maze .number {
-  width: var(--cell-size);
-  height: var(--cell-size);
+  width: var(--maze-cell-size);
+  height: var(--maze-cell-size);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -52,14 +52,14 @@
   color: var(--muted-foreground, #828bb8);
   font-weight: 600;
   font-family: "Fira Code", monospace;
-  font-size: var(--number-font-size);
+  font-size: var(--maze-number-font-size);
   line-height: 1;
   opacity: 0.85;
   user-select: none;
 }
 
 #maze .number.corner {           /* top-left/top-right/bottom corners */
-  width: var(--cell-size);
+  width: var(--maze-cell-size);
 }
 
 /* Relative highlight (your tweak) */
@@ -87,7 +87,7 @@
     linear-gradient(225deg, color-mix(in srgb, var(--primary, #82aaff) 6%, transparent) 25%, transparent 25%),
     linear-gradient(45deg,  color-mix(in srgb, var(--primary, #82aaff) 4%, transparent) 25%, transparent 25%),
     linear-gradient(315deg, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 25%, transparent 25%);
-  background-size: var(--cell-size) var(--cell-size);
+  background-size: var(--maze-cell-size) var(--maze-cell-size);
   box-shadow: inset 0 0 3px rgba(27,29,43,0.4);
 }
 
@@ -99,7 +99,7 @@
   background-image:
     linear-gradient(45deg, rgba(27,29,43,0.5) 45%, transparent 55%),
     linear-gradient(to bottom, rgba(27,29,43,0.4) 45%, transparent 55%);
-  background-size: calc(var(--cell-size) * 0.5) calc(var(--cell-size) * 0.5);
+  background-size: calc(var(--maze-cell-size) * 0.5) calc(var(--maze-cell-size) * 0.5);
   box-shadow: inset 0 0 3px rgba(27,29,43,0.6);
 }
 
@@ -130,7 +130,7 @@
   top: -4px;
   text-align: center;
   text-shadow: 0 0 3px rgba(0,0,0,0.6);
-  font-size: calc(var(--cell-size) * 0.75); /* scale with cell */
+  font-size: calc(var(--maze-cell-size) * 0.75); /* scale with cell */
   z-index: 10;
 }
 

src/index.ts

@@ -1,3 +1,4 @@
+import './game.css';
 export { MazeGenerator } from "./MazeGenerator";
 export { MazeRenderer } from "./MazeRenderer";
 export * from './useGame';