body {
    margin: 0;
}

/* TODAS LAS PAREDES */
#paret1, #paret2, #paret3, #paret4, #paret5, #paret6 {
    border: solid;
    width: min(100vw, 100vh);
    aspect-ratio: 1/1;
    margin: auto;
    background-size: cover;
    position: relative;
    display: none;
}

/* PARED INICIAL */
#paret1 {
    display: block;
    background-image: url(img/paret4.png);
}

/* PAREDES 2-4 */
#paret2, #paret3, #paret4 {
    background-image: url(img/paret1-2-3.png);
}

/* TECHO Y SUELO NEGROS */
#paret5, #paret6 {
    background-color: black;
}

/* BOTÓN PARED 1 */
.botton {
    background-image: url(img/boton.png);
    background-size: cover;
    position: absolute;
    top: 40%;
    right: 60%;
    width: 20%;
    height: 20%;
    background-repeat: no-repeat;
}

/* PUERTA */
.puerta1block {
    background-image: url("img/puerta1.png");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    width: 400px;
    height: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* BOTÓN PUERTA */
.puerta-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

#paret8,#paret10{
border:solid;
width:min(100vw,100vh);
aspect-ratio:1/1;
margin:auto;
background-size:cover;
position:relative;
display:none;

background-image: url(img/paret2.2.png) ;
}

#paret7,#paret9{
border:solid;
width:min(100vw,100vh);
aspect-ratio:1/1;
margin:auto;
background-size:cover;
position:relative;
display:none;

background-image: url(img/paret1.2.png) ;
}
#paret7 .botton {
    top: 50%;
    left: 40%;
}

/* PUERTA PEQUEÑA */
.puerta-small, .puerta-big {
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Tamaños distintos */
.puerta-small {
    width: 150px;
    height: 250px;
    background-image: url('img/puerta_small.png');
}

.puerta-big {
    width: 300px;
    height: 500px;
    background-image: url('img/puerta_big.png');
}

/* Colores */
.azul { background-color: #007bff; }
.rojo { background-color: #dc3545; }
.verde { background-color: #28a745; }

/* FLECHAS */
.bt_left, .bt_right, .bt_up, .bt_down {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    width: 8%;
    height: 12%;
    cursor: pointer;
}

.bt_left {
    background-image: url(img/izquierda.png);
    top: 45%;
    left: 1%;
}

.bt_right {
    background-image: url(img/derecha.png);
    top: 45%;
    right: 1%;
}

.bt_up {
    background-image: url(img/arriba.png);
    top: 1%;
    left: 45%;
}

.bt_down {
    background-image: url(img/abajo.png);
    bottom: 1%;
    left: 45%;
}

.bt_left:hover,
.bt_right:hover,
.bt_up:hover,
.bt_down:hover {
    opacity: 0.5;
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.6));
}

/* NOTA */
.nota {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 400px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
    z-index: 100;
    cursor: pointer;
}

/* GAME OVER */
.gameover {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 999;
    cursor: pointer;
}