/* =========================================
   CONFIGURACIÓN GENERAL
========================================= */

*  {
    box-sizing: border-box;
}

body {
    margin: 0;

    background: #09070d;

    color: #eee7f2;

    font-family: monospace;

    min-height: 100vh;
}


/* =========================================
   PÁGINA
========================================= */

.page {
    display: flex;

    width: 100%;
    min-height: 95vh;
}


/* =========================================
   BARRA LATERAL
========================================= */

.sidebar {

    width: 220px;

    padding: 25px 20px;

    background: #0d0a14;

    border-right: 1px solid #4e3c5e;

    flex-shrink: 0;
}

.sidebar h1 {
    font-size: 24px;

    margin-top: 0;

    color: #ead3ef;
}

.sidebar p {
    line-height: 1.5;

    color: #bca9c5;
}


/* =========================================
   MENÚ
========================================= */

nav {
    margin-top: 35px;
}

nav a {

    display: block;

    padding: 10px;

    margin-bottom: 8px;

    color: #e9d9ed;

    text-decoration: none;

    border: 1px solid transparent;
}

nav a:hover {

    background: #21182a;

    border: 1px solid #80618f;

    transform: translateX(4px);
}


/* =========================================
   TEXTO LATERAL
========================================= */

.instructions {

    margin-top: 60px;

    padding: 10px;

    font-size: 13px;
}


/* =========================================
   HABITACIÓN
========================================= */

.room {

    position: relative;

    flex: 1;

    min-height: 800px;

    overflow: hidden;

    background: #17121d;
}


/* =========================================
   FONDO
========================================= */

.room-background {

    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;

    left: 0;
    top: 0;

    z-index: 1;
}


/* =========================================
   PERSONAJES
========================================= */

.oc {

    position: absolute;

    display: block;

    z-index: 10;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}


/* IMPORTANTE:
   Las imágenes NO tendrán tamaño fijo.
   Puedes cambiar width individualmente.
*/

.oc img {

    display: block;

    width: 180px;

    height: auto;
}


/* Efecto cuando pasas el mouse */

.oc:hover {

    transform:
        translateY(-8px)
        scale(1.03);

    filter:
        drop-shadow(0 0 8px rgba(255,255,255,0.35));
}


/* =========================================
   POSICIONES DE LOS OCS
========================================= */

.oc1 {

    left: 5%;

    bottom: 18%;
}

.oc2 {

    left: 25%;

    bottom: 15%;
}

.oc3 {

    left: 45%;

    bottom: 16%;
}

.oc4 {

    right: 10%;

    bottom: 18%;
}


/* =========================================
   SECRETOS
========================================= */

.secret {

    position: absolute;

    display: block;

    z-index: 20;
}


/*
   Estos son botones INVISIBLES.

   Puedes ponerlos encima de:
   - cuadros
   - libros
   - plantas
   - lámparas
   - etc.
*/

.secret1 {

    width: 70px;
    height: 90px;

    left: 12%;
    top: 18%;
}


.secret2 {

    width: 50px;
    height: 50px;

    right: 18%;
    top: 25%;
}


/* =========================================
   TEXTO DENTRO DE LA HABITACIÓN
========================================= */

.room-text {

    position: absolute;

    right: 30px;
    bottom: 25px;

    z-index: 30;

    padding: 10px 15px;

    background: #100c16;

    border: 1px solid #776080;

    opacity: 0;

    transition: opacity 0.3s;
}


/*
   Aparece cuando pasas el mouse
   por encima.
*/

.room:hover .room-text {

    opacity: 1;
}


/* =========================================
   FOOTER
========================================= */

footer {

    text-align: center;

    padding: 10px;

    color: #8f7898;

    background: #09070d;

    border-top: 1px solid #33263c;

    font-size: 12px;
}