White theme + responsive

web/assets/css/game.css

@@ -4,40 +4,37 @@
     box-sizing: border-box;
 }
 
+:root {
+    --page-padding: clamp(12px, 3vw, 32px);
+    --map-padding: clamp(12px, 2.5vw, 20px);
+    --map-radius: clamp(20px, 4vw, 50px);
+    --cell-size: clamp(20px, 5vw, 60px);
+    --laser-width: clamp(14px, 3vw, 35px);
+    --laser-height: clamp(3px, 0.7vw, 7px);
+}
+
 html, body {
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
+    min-height: 100%;
 }
 
 body {
-    background: #1a1a1a;
+    min-height: 100vh;
+    background: #f7f7f7;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Arial', sans-serif;
+    padding: var(--page-padding);
+    overflow-x: auto;
 }
 
-main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    border-radius: 10px;
-    min-width: fit-content;
-    flex-shrink: 0;
-}
-
-.map {
-    display: flex;
-    flex-direction: column;
-    gap: 0px;
-    padding: 10px;
-    background: #222222;
-    border-radius: 5px;
+#map {
+    background-color: #DADEEF;
+    padding: var(--map-padding);
+    margin: 0;
+    border-radius: var(--map-radius);
     width: fit-content;
-    height: fit-content;
+    max-width: 100%;
 }
 
 .lign {
@@ -47,11 +44,10 @@ main {
 }
 
 .cell {
-    border: 1px solid #333333;
-    min-width: 60px;
-    width: auto;
-    min-height: 60px;
-    height: auto;
+    width: var(--cell-size);
+    min-width: var(--cell-size);
+    height: var(--cell-size);
+    min-height: var(--cell-size);
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
@@ -62,7 +58,7 @@ main {
 }
 
 .empty {
-    background-color: #2a2a2a;
+    background-color: #DADEEF;
     border-color: #333333;
 }
 
@@ -113,9 +109,23 @@ main {
 }
 
 .light-laser {
-    margin-top: 14px;
-    height: 7px;
-    width: 35px;
+    margin-top: calc(var(--cell-size) * 0.23);
+    height: var(--laser-height);
+    width: var(--laser-width);
     background-color: red;
     display: flex;
 }
+
+.btn-mirror {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background: linear-gradient(135deg, transparent 46%, #f0f0f0 46%, #f0f0f0 54%, transparent 54%);
+    cursor: pointer;
+}
+
+@media (max-width: 768px) {
+    body {
+        align-items: flex-start;
+    }
+}