@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vh;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-image: url('/static/img/background.png');
    background-size: cover;
    background-position: center;
    background-color: #fdfafb;
}

.flipbook {
    width: clamp(280px, 90vw, 1000px);
    height: clamp(380px, 70vh, 550px);
    border-radius: clamp(3px, 0.5vw, 5px);
    position: relative;
    filter: drop-shadow(0 1vh 1.5vh rgba(0, 0, 0, 0.3));
}

@media (max-width: 768px) {
    .flipbook {
        height: 65vw;
        /* Fixed proper aspect ratio for mobile book */
    }

    .music-container {
        width: 100%;
        padding: 1.5vh 4vw;
        box-sizing: border-box;
    }

    .music-container h3,
    .music-container p {
        padding: 0 1vw;
    }
}

.flipbook .hard {
    background: #5e5c5c !important;
    color: #fff;
    font-weight: bold;
    border: none;
    text-align: center;
}

.flipbook .hard small {
    font-style: italic;
    font-weight: lighter;
    opacity: 0.7;
    font-size: clamp(10px, 1.5vw, 14px);
}

.flipbook .page {
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5vh;
    border: 1px solid rgba(0, 0, 0, 0.11);
}

.page img {
    width: 100%;
    object-fit: cover;
    margin: auto;
}


/* Music Container */
.music-container {
    background-color: transparent;
    color: rgb(135, 59, 4);
    padding: 1.5vh 2vw;
    text-align: center;
    width: clamp(250px, 80vw, 400px);
    /* Made slightly wider so text fits comfortably */
    box-shadow: none;
}

.music-container h3 {
    font-size: 0.9rem;
    margin-bottom: 0.5vh;
    font-weight: 600;
    text-transform: capitalize;
}

.music-container p {
    font-size: 0.7rem;
    font-style: italic;
    opacity: 0.9;
    margin-bottom: 1.5vh;
    line-height: 1.4;
}

/* Music Controls */
.music-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(5px, 1vw, 10px);
}

.song-select {
    padding: 0.8vh clamp(20px, 3.5vw, 35px) 0.8vh clamp(8px, 1.5vw, 15px);
    border-radius: 5vh;
    border: clamp(1px, 0.1vw, 2px) solid rgb(135, 59, 4);
    background-color: white;
    color: rgb(135, 59, 4);
    font-family: inherit;
    font-size: clamp(12px, 2vw, 14px);
    cursor: pointer;
    font-weight: 500;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(135, 59, 4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right clamp(6px, 1.2vw, 12px) center;
    background-size: clamp(10px, 1.6vw, 16px);
}

/* Music Control Button */
.music-toggle {
    border: none;
    background-color: rgb(135, 59, 4);
    color: white;
    cursor: pointer;
    font-size: clamp(12px, 2vw, 14px);
    font-family: "Poppins", sans-serif;
    padding: 0.8vh 2vw;
    border-radius: 5vh;
    font-weight: bold;
    transition: transform 0.2s;
}

.music-toggle:hover {
    transform: scale(1.05);
}

#loading-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
    font-size: 1.2rem;
    color: rgb(135, 59, 4);
    overflow: hidden;
}

/* Prevent background scrolling while loading overlay is active */
body.loading {
    overflow: hidden;
}

.spinner {
    border: clamp(3px, 0.5vh, 5px) solid rgb(237, 194, 163);
    border-top: clamp(3px, 0.5vh, 5px) solid rgb(135, 59, 4);
    border-radius: 50%;
    width: clamp(30px, 5vh, 50px);
    height: clamp(30px, 5vh, 50px);
    animation: spin 1s linear infinite;
    margin-bottom: clamp(10px, 2vh, 20px);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ── Video Page (page 22) ─────────────────────── */
.video-page {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.video-thumb-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    pointer-events: none;
}

.play-video-btn {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.8vh, 8px);
    background: rgb(135, 59, 4);
    border: none;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: clamp(12px, 2vw, 15px);
    font-weight: 600;
    padding: clamp(10px, 1.5vh, 14px) clamp(16px, 3vw, 28px);
    border-radius: 5vh;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
    box-shadow: 0 clamp(2px, 0.4vh, 4px) clamp(10px, 2vh, 20px) rgba(0, 0, 0, 0.35);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.play-video-btn .play-icon {
    font-size: clamp(22px, 4vw, 32px);
    line-height: 1;
}

.play-video-btn:hover {
    background: rgb(160, 75, 10);
    transform: scale(1.06);
    box-shadow: 0 clamp(3px, 0.6vh, 6px) clamp(14px, 2.8vh, 28px) rgba(0, 0, 0, 0.5);
}

/* ── Video Modal Overlay ──────────────────────── */
.video-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.video-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.video-modal-box {
    position: relative;
    width: clamp(300px, 90vw, 820px);
    background: #000;
    border-radius: clamp(8px, 1.2vh, 12px);
    overflow: hidden;
    box-shadow: 0 clamp(10px, 2vh, 20px) clamp(30px, 6vh, 60px) rgba(0, 0, 0, 0.7);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.video-modal-overlay.active .video-modal-box {
    transform: scale(1);
}

.popup-video {
    width: 100%;
    display: block;
    max-height: 80vh;
    background: #000;
}

.close-video-btn {
    position: absolute;
    top: clamp(5px, 1vh, 10px);
    right: clamp(8px, 1.5vw, 14px);
    z-index: 10001;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: clamp(1.2rem, 2vh, 1.6rem);
    line-height: 1;
    width: clamp(24px, 3.5vh, 36px);
    height: clamp(24px, 3.5vh, 36px);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 0.2s, transform 0.2s;
}

.close-video-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}