[+] Auto adapt to smaller puzzle sizes

src/App.svelte

@@ -24,6 +24,12 @@
   let [hStates, vStates] = [zero8(eRows * eCols), zero8(eRows * eCols)]
   let [solutionHStates, solutionVStates] = [zero8(eRows * eCols), zero8(eRows * eCols)]
 
+  if (rows < 10 && cols < 10) {
+    cfg.cellW = 50
+    cfg.lineW = 8
+    cfg.totalW = cfg.cellW + cfg.lineW
+  }
+
   // Colors
   let [hColors, vColors, colors, css, ci] = [zero8(eRows * eCols), zero8(eRows * eCols), ["#90A4AE"], document.createElement('style'), 0]
   document.head.appendChild(css)
@@ -281,7 +287,8 @@
   }
 </script>
 
-<main class:color-mode={mode === 'color'} class:colorful-cross={colorfulCross} class:mobile={hasTouch}>
+<main class:color-mode={mode === 'color'} class:colorful-cross={colorfulCross} class:mobile={hasTouch} 
+  style="--gcw: {cfg.cellW}px; --glw: {cfg.lineW}px; --gtw: {cfg.totalW}px;">
   <div class="heading">Azalea's Colorful Slither Link</div>
   <div class="sub-heading">
     <img src={viteLogo} alt="Logo"/>

src/puzzle.sass

@@ -11,10 +11,13 @@
 
 .grid-number
   position: absolute
-  width: 20px
-  height: 20px
+  width: var(--gcw)
+  height: var(--gcw)
   text-align: center
-  font-size: 11px
+  font-size: calc(var(--gcw) * 0.6)
+
+  // Vertical center
+  line-height: calc(var(--gcw) * 0.9)
 
   &.error
     color: colors.$cross
@@ -27,18 +30,18 @@
   position: absolute
 
   &.vertical
-    width: 4px
-    height: 20px
-    border-top: 4px solid colors.$dot
-    border-bottom: 4px solid colors.$dot
+    width: var(--glw)
+    height: var(--gcw)
+    border-top: var(--glw) solid colors.$dot
+    border-bottom: var(--glw) solid colors.$dot
 
     &.crossed:before, &.auto-crossed:before
       left: 0
       top: 2px
 
   &:not(.vertical)
-    width: 24px
-    height: 4px
+    width: var(--gtw)
+    height: var(--glw)
 
   &.selected
     background: var(--c)
@@ -48,10 +51,10 @@
 
   &.crossed:before, &.auto-crossed:before
     content: "x"
-    font-size: 10px
+    font-size: calc(var(--gcw) * 0.5)
     color: colors.$cross
     position: absolute
-    top: -7px
+    top: calc(var(--gcw) * -0.35)
 
 main:not(.mobile) .grid-line:hover
   background: var(--c)