*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
height:100vh;
overflow:hidden;
font-family:Arial,sans-serif;
background:#111;
color:white;
}

/* ========================= */
/* Еловый дом */
/* ========================= */

.room{
position:relative;
width:100%;
height:100vh;

background:
repeating-linear-gradient(
90deg,
#60452b 0px,
#60452b 80px,
#53391f 80px,
#53391f 160px
);

}

/* ========================= */
/* Пол */
/* ========================= */

.floor{

position:absolute;
bottom:0;

width:100%;
height:25%;

background:
repeating-linear-gradient(
90deg,
#80572e 0px,
#80572e 90px,
#684421 90px,
#684421 180px
);

}

/* ========================= */
/* Окна */
/* ========================= */

.window{

position:absolute;

top:90px;

width:260px;
height:260px;

background:rgba(120,180,220,.25);

border:15px solid #3d2817;

overflow:hidden;

}

.window.one{

left:250px;

}

.window.two{

left:550px;

}

/* ========================= */
/* Дождь */
/* ========================= */

.rain{

position:absolute;

width:3px;
height:35px;

background:#9fd5ff;

opacity:.7;

animation:rain 1s linear infinite;

}

@keyframes rain{

from{
transform:translateY(-50px);
}

to{
transform:translateY(300px);
}

}

/* ========================= */
/* Кровать */
/* ========================= */

.bed{

position:absolute;

left:430px;
bottom:150px;

width:240px;
height:100px;

background:#b32b35;

border-radius:10px;

box-shadow:
0 15px 0 #4b2c18;

}

.pillow{

position:absolute;

right:15px;
top:15px;

width:70px;
height:55px;

background:#eee;

border-radius:15px;

}

.leg{

position:absolute;

bottom:-20px;

width:25px;
height:35px;

background:#5b361b;

}

.l1{
left:20px;
}

.l2{
right:20px;
}

/* ========================= */
/* Фонарь */
/* ========================= */

.lanternBox{

position:absolute;

right:80px;
top:40px;

transform-origin:top center;

animation:swing 3s infinite ease-in-out;

}

.chain{

width:8px;

height:170px;

background:#777;

margin:auto;

}

.lantern{

width:120px;
height:180px;

background:#222;

border:12px solid #555;

border-radius:20px;

position:relative;

box-shadow:
0 0 40px orange;

}

.light{

position:absolute;

left:25px;
top:35px;

width:70px;
height:100px;

animation: flicker 3s infinite ease-in-out;

background:#ffd85c;

border-radius:20px;

box-shadow:
0 0 60px #ffd85c;

}

@keyframes swing{

0%,100%{
transform:rotate(-6deg);
}

50%{
transform:rotate(6deg);
}

}

/* ========================= */
/* Центральная панель */
/* ========================= */

.panel{

position:absolute;

left:50%;
top:55%;

transform:translate(-50%,-50%);

background:rgba(0,0,0,.7);

padding:25px;

border-radius:20px;

text-align:center;

}

button{

margin-top:15px;

padding:12px 20px;

border:none;

border-radius:10px;

cursor:pointer;

font-size:16px;

transition:.2s;

}

button:hover{

transform:scale(1.05);

}
/* ========================= */
/* Верхняя панель */
/* ========================= */

.topbar{

position:fixed;

top:0;
left:0;

width:100%;
height:70px;

background:rgba(0,0,0,.45);
backdrop-filter:blur(10px);

display:flex;
align-items:center;
justify-content:center;

z-index:999;

}

.logo{

font-size:34px;

font-weight:bold;

text-shadow:
0 0 15px orange;

user-select:none;

}

.menuButton{

position:absolute;

left:20px;

font-size:34px;

cursor:pointer;

transition:.25s;

user-select:none;

}

.menuButton:hover{

transform:scale(1.15);

}

/* ========================= */
/* Боковое меню */
/* ========================= */

.sidebar{

position:fixed;

top:0;
left:-330px;

width:320px;
height:100vh;

background:#1c1c1c;

padding:90px 30px;

transition:.35s;

z-index:1000;

box-shadow:
8px 0 30px rgba(0,0,0,.5);

overflow-y:auto;

}

.sidebar.open{

left:0;

}

.sidebar h2{

margin-bottom:20px;

}

.sidebar h3{

margin-top:20px;

color:#ffd85c;

}

.sidebar p{

line-height:1.6;

}

/* ========================= */
/* Затемнение */
/* ========================= */

.overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.45);

opacity:0;

pointer-events:none;

transition:.3s;

z-index:998;

}

.overlay.show{

opacity:1;

pointer-events:auto;

}
.sidebar a{

color:#8fd6ff;

text-decoration:none;

font-weight:bold;

}

.sidebar a:hover{

text-decoration:underline;

}

.removed{

color:#888;

font-style:italic;

}
/* ========================= */
/* Мерцание лампы */
/* ========================= */

@keyframes flicker{

0%{
opacity:1;
transform:scale(1);
box-shadow:0 0 60px #ffd85c;
}

20%{
opacity:.85;
transform:scale(.98);
box-shadow:0 0 45px #ffd85c;
}

40%{
opacity:1;
transform:scale(1.03);
box-shadow:0 0 75px #ffe27d;
}

60%{
opacity:.9;
transform:scale(1);
box-shadow:0 0 55px #ffd85c;
}

80%{
opacity:.8;
transform:scale(.99);
box-shadow:0 0 40px #ffcc33;
}

100%{
opacity:1;
transform:scale(1);
box-shadow:0 0 60px #ffd85c;
}

}
/* ========================= */
/* Вспышка молнии */
/* ========================= */

.flash{

position:fixed;

inset:0;

background:white;

opacity:0;

pointer-events:none;

z-index:500;

}

.flash.active{

animation:lightning .25s;

}

@keyframes lightning{

0%{
opacity:0;
}

15%{
opacity:.8;
}

35%{
opacity:.15;
}

55%{
opacity:.9;
}

100%{
opacity:0;
}

}