Upgrade of design of light of laser + add posibility to move a cursor and rotate mirror with keyboard

web/assets/css/game.css

@@ -4,7 +4,8 @@
     box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
@@ -29,6 +30,10 @@ main {
     flex-shrink: 0;
 }
 
+/* ================================
+   GRID
+================================ */
+
 .map {
     display: flex;
     flex-direction: column;
@@ -46,12 +51,14 @@ main {
     margin: 0;
 }
 
+/* ================================
+   CELLS
+================================ */
+
 .cell {
     border: 1px solid #333333;
-    min-width: 60px;
-    width: auto;
-    min-height: 60px;
-    height: auto;
+    width: clamp(28px, 5.5vmin, 60px);
+    height: clamp(28px, 5.5vmin, 60px);
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
@@ -61,6 +68,10 @@ main {
     background-color: #2a2a2a;
 }
 
+/* ================================
+   CASES TYPE
+================================ */
+
 .empty {
     background-color: #2a2a2a;
     border-color: #333333;
@@ -72,12 +83,6 @@ main {
 
 .laser {
     background-color: #FFD700;
-    border-color: #FFA500;
-}
-
-.colored-laser {
-    background: linear-gradient(135deg, #FF1493 0%, #00CED1 100%);
-    border-color: #FF1493;
 }
 
 .mirror {
@@ -87,34 +92,85 @@ main {
     overflow: hidden;
 }
 
-.door {
-    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
-    border-color: #654321;
-}
-
-.button {
-    background: radial-gradient(circle at 35% 35%, #FF4444 0%, #CC0000 100%);
-    border-color: #990000;
-}
-
 .wall {
-    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
-    border-color: #000000;
-}
-
-.demi-wall {
-    background: linear-gradient(90deg, #0f0f0f 0%, #0f0f0f 50%, #2a2a2a 50%, #2a2a2a 100%);
-    border-color: #333333;
+    background-color: #1a1a1a;
 }
 
 .target {
-    background: radial-gradient(circle at 35% 35%, #00FF00 0%, #00CC00 50%, rgba(0, 255, 0, 0.2) 100%);
-    border-color: #00FF00;
+    background: #00FF00;
 }
 
+/* ================================
+   CURSOR PLAYER
+================================ */
+
+.player-cursor {
+    outline: 2px solid #00e5ff;
+    outline-offset: -2px;
+    z-index: 10;
+}
+
+.player-cursor.mirror {
+    outline-color: #FFD700;
+}
+
+/* ================================
+   LIGHT LASER
+================================ */
+
 .light-laser {
+    position: relative;
+    background-color: #2a2a2a;
+}
+
+.laser-horizontal {
+    background: linear-gradient(to bottom, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #2a2a2a
+}
+
+.laser-vertical {
+    background: linear-gradient(to right,  transparent 0%,  transparent 45%,  red 45%,  red 55%,  transparent 55%,  transparent 100%), #2a2a2a;
+}
+
+/* ================================
+   MIRROR
+================================ */
+
+.btn-mirror {
+    background: none;
+    border: none;
+    cursor: pointer;
+    height: 100%;
+    position: relative;
+}
+
+.btn-mirror::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 10%;
+    width: 80%;
     height: 2px;
-    width: 35px;
-    background-color: red;
-    background-size: 2px 35px;
+    background-color: #aaaaaa;
+    transform-origin: center;
+}
+
+/* ================================
+   RESPONSIVE
+================================ */
+
+@media (max-width: 600px) {
+    .map {
+        padding: 5px;
+        border-radius: 3px;
+    }
+
+    main {
+        padding: 8px;
+    }
+}
+
+@media (max-height: 500px) {
+    .map {
+        padding: 4px;
+    }
 }