* {
    margin: 0;
    padding: 0;
    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 {
    min-height: 100%;
}

body {
    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;
}

#map {
    background-color: #DADEEF;
    padding: var(--map-padding);
    margin: 0;
    border-radius: var(--map-radius);
    width: fit-content;
    max-width: 100%;
}

.lign {
    display: flex;
    gap: 0px;
    margin: 0;
}

.cell {
    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;
    justify-content: center;
    margin: 0;
    position: relative;
    background-color: #2a2a2a;
}

.empty {
    background-color: #DADEEF;
    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;
}

.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: 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;
    }
}