/* =========================
   ОСНОВА
========================= */

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    font-family: Arial, sans-serif;
    background: #000;
}


/* =========================
   КАЛЕНДАРЬ
========================= */

.calendar {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background-image: url("./assets/images/день.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =========================
   ЗАГОЛОВОК КАЛЕНДАРЯ
========================= */

.calendar-title {
    position: absolute;

    top: 1.2%;
    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    width: 90%;

    text-align: center;

    color: rgb(255, 255, 255);

    font-size: clamp(20px, 5vw, 30px);
    font-weight: bold;

    letter-spacing: 1px;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(255, 255, 255, 0.3);

    pointer-events: none;
}
/* =========================
   ДВЕРИ
========================= */

.door {
    position: absolute;

    width: 21vw;
    height: 29vw;

    max-width: 110px;
    max-height: 150px;

    min-width: 65px;
    min-height: 90px;

    border: none;
    padding: 0;

    overflow: hidden;

    cursor: pointer;

    background: transparent;
}


/* Статичная картинка двери */

.door-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    pointer-events: none;
}


/* Номер двери */

.door-number {
    position: absolute;
    inset: 0;

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

    color: white;

    font-size: clamp(15px, 4vw, 24px);
    font-weight: bold;

    text-shadow: 0 2px 6px black;

    pointer-events: none;
}


/* =========================
   РАСПОЛОЖЕНИЕ ДВЕРЕЙ
========================= */

.door-1 {
    top: 8%;
    left: 8%;
}

.door-2 {
    top: 6%;
    right: 8%;
}

.door-3 {
    top: 29%;
    left: 38%;
}

.door-4 {
    top: 46%;
    left: 7%;
}

.door-5 {
    top: 51%;
    right: 7%;
}

.door-6 {
    bottom: 8%;
    left: 18%;
}

.door-7 {
    bottom: 7%;
    right: 18%;
}


/* =========================
   ЭФФЕКТ НАЖАТИЯ
========================= */

.door:active {
    transform: scale(0.94);
}


/* =========================
   ПОЛНОЭКРАННЫЙ КОНТЕНТ
========================= */

.content-screen {
    position: fixed;
    inset: 0;

    display: none;

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

    background: #000;
    color: white;

    z-index: 200;
}

.content-screen.active {
    display: flex;
}

.content {
    width: 100%;
    height: 100%;

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

    padding: 30px;

    text-align: center;
    font-size: 28px;
}


/* =========================
   КНОПКА ЗАКРЫТИЯ
========================= */

.close-btn {
    position: absolute;

    top: 15px;
    right: 20px;

    z-index: 210;

    border: none;
    background: transparent;

    color: white;

    font-size: 45px;
    line-height: 1;

    cursor: pointer;
}


/* =========================
   ДЕСКТОП
========================= */

@media (min-width: 700px) {

    .calendar {
        width: min(100vw, 430px);
        height: 100vh;

        margin: 0 auto;
    }

}
/* =========================
   ВИДЕО ПЕСНИ
========================= */

.song-video {
    width: 100%;
    height: 100%;

    object-fit: contain;

    background: black;
}
/* =========================
   ЕЩЁ НЕ ВРЕМЯ
========================= */

.not-yet {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

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

    gap: 25px;

    padding: 30px;
}

.not-yet-cat {
    width: min(75vw, 330px);
    max-height: 55vh;

    object-fit: contain;

    border-radius: 20px;
}

.not-yet-text {
    margin: 0;

    color: white;

    font-size: clamp(24px, 7vw, 38px);

    text-align: center;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}