* { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; } body { background: #1a1a1a; display: flex; align-items: center; justify-content: center; font-family: 'Arial', sans-serif; } 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; width: fit-content; height: fit-content; } .lign { display: flex; gap: 0px; margin: 0; } .cell { border: 1px solid #333333; width: 30px; height: 30px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; margin: 0; position: relative; background-color: #2a2a2a; } .empty { background-color: #2a2a2a; border-color: #333333; } .empty:hover { background-color: #333333; } .laser { background-color: #FFD700; border-color: #FFA500; } .colored-laser { background: linear-gradient(135deg, #FF1493 0%, #00CED1 100%); border-color: #FF1493; } .mirror { background-color: #1a1a1a; border-color: #444444; position: relative; overflow: hidden; } .door { background: linear-gradient(135deg, #8B4513 0%, #654321 100%); border-color: #654321; } .door::after { content: ''; position: absolute; width: 60%; height: 60%; border: 2px solid #FFD700; border-radius: 3px; } .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; } .target { background: radial-gradient(circle at 35% 35%, #00FF00 0%, #00CC00 50%, rgba(0, 255, 0, 0.2) 100%); border-color: #00FF00; } .light-laser { margin-top: 14px; height: 7px; width: 35px; background-color: red; display: flex; }