:root {
    --text-color: #2c3e50;
    --primary-gradient: linear-gradient(135deg, #FF512F 0%, #F09819 100%);
    --secondary-gradient: linear-gradient(135deg, #38ef7d 0%, #11998e 100%);
}

/* --- PERUSASETUKSET --- */
body {
    margin: 0; padding: 0;
    font-family: 'Nunito', sans-serif;
    color: var(--text-color);
    background: url('tausta.png') no-repeat center center fixed; 
    background-size: cover; 
    height: 100vh;
    overflow: hidden; /* Estää skrollauksen desktopilla */
    display: flex; justify-content: center; align-items: center;
}

/* --- PILVET --- */
.cloud-wrapper { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    overflow: hidden; z-index: 1; pointer-events: none; 
}
.cloud { position: absolute; opacity: 0.9; }
#cloud1 { top: 5%; width: 560px; }
#cloud2 { top: 25%; width: 400px; opacity: 0.8; }
#cloud3 { top: 40%; width: 700px; opacity: 0.9; }

/* --- PÄÄSISÄLTÖ --- */
.content-container {
    position: relative; z-index: 10;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    width: 100%; height: 100%; text-align: center;
    padding-top: 0;
}

.book-header { 
    margin-bottom: 25px; /* Pienennetty hieman, jotta mahtuu paremmin */
    animation: fadeIn 1.5s ease-out; 
    display: flex; flex-direction: column; align-items: center; 
}

.book-header h1 { 
    font-family: 'Fredoka', cursive; font-size: 5rem; 
    color: #fff; text-shadow: 3px 3px 15px rgba(0,0,0,0.4); 
    margin: 0; letter-spacing: 2px; line-height: 1.1; 
}

.subtitle { 
    font-size: 1.8rem; color: #fff; 
    text-shadow: 2px 2px 8px rgba(0,0,0,0.4); 
    margin-top: 10px; margin-bottom: 15px; font-weight: bold; 
}

/* --- MYYNTILINKIT (UUSI) --- */
.sales-text {
    font-size: 1.2rem;
    color: #f0f0f0;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    margin-top: 5px;
    margin-bottom: 10px;
    font-weight: 600;
}

.retailer-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 25px;
}

.retailer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    border-bottom: 2px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
    transition: all 0.2s ease;
}

.retailer-links a:hover {
    color: #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(255,255,255,0.6);
}

/* --- NAPIT --- */
.buttons-wrapper {
    display: flex; gap: 20px; justify-content: center; align-items: center;
}

.btn-read, .btn-listen {
    color: white; font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.4); 
    width: 220px; padding: 12px 0; 
    display: flex; justify-content: center; align-items: center;
    border-radius: 50px; cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2), inset 0 0 10px rgba(255,255,255,0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-read { background: var(--primary-gradient); }
.btn-read:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.1); }

.btn-listen { background: var(--secondary-gradient); }
.btn-listen:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.1); }

/* --- VIDEO JA KANSI (DESKTOP) --- */
.book-scene { position: relative; display: inline-block; margin-top: 10px; }

.book-cover { 
    width: auto; height: auto; 
    max-width: 60vw; max-height: 45vh; 
    animation: growFromDot 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
    opacity: 0; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

.video-popup {
    /* Desktop: Video oikealla */
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%); 
    margin-left: -20px; /* Tuo videon lähemmäs kirjaa */
    width: 350px; height: 350px; 
    opacity: 0; visibility: hidden; transition: all 0.5s ease; z-index: 100;
}
.video-popup.visible { opacity: 1; visibility: visible; }

.video-popup video { 
    width: 100%; height: 100%; object-fit: contain; 
    background: transparent; border: none; outline: none; pointer-events: none;
}

/* --- 3D MODAALI --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    /* KORJATTU: Läpinäkyvyys muutettu 0.95 -> 0.75, jotta sumennus näkyy */
    background: rgba(0, 0, 0, 0.75); 
    backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center;
    z-index: 2000;
    opacity: 0; visibility: hidden; transition: all 0.5s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.book-scene-3d { 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%; 
}

.book-container {
    position: relative; width: 948px; height: 689px; 
    perspective: 2500px; transform-style: preserve-3d; transition: transform 0.3s ease; 
}
.static-page, .page { width: 474px; height: 689px; position: absolute; top: 0; }
.static-page.left { left: 0; background: #fff; z-index: 0; }
.static-page.right { right: 0; background: #fff; z-index: 0; }
.page { right: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; }
.page.flipped { transform: rotateY(-180deg); }
.page-front, .page-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; background: #fff; }
.page-front { z-index: 2; border-left: 1px solid rgba(0,0,0,0.1); }
.page-back { z-index: 1; transform: rotateY(180deg); border-right: 1px solid rgba(0,0,0,0.1); }
.page-img, .static-page img { width: 100%; height: 100%; display: block; }

.book-controls { 
    display: flex; gap: 15px; z-index: 2005; margin-top: 20px; transition: margin-top 0.3s ease;
}
.book-controls button { 
    background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255,255,255,0.5); color: white; padding: 10px 25px; border-radius: 30px; cursor: pointer; font-weight: bold; transition: 0.3s; 
}
.book-controls button:hover:not(:disabled) { background: white; color: #333; }
.book-controls button:disabled { opacity: 0.5; }
#closeBtn { background: #e74c3c; border: none; }
.page-indicator { margin-top: 15px; color: #ccc; font-family: 'Nunito', sans-serif; }

/* KÄÄNTÖKEHOTE (Oletuksena piilossa) */
#orientation-warning {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.7); color: white; padding: 10px 20px; border-radius: 20px;
    text-align: center; z-index: 3000; display: none; pointer-events: none;
}
.rotate-icon { font-size: 2rem; margin-bottom: 5px; animation: spin 2s infinite linear; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@keyframes growFromDot { 0% { transform: scale(0.01); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }


/* ========================================= */
/* --- MOBIILI JA TABLETTI (ALLE 1024px) --- */
/* ========================================= */

@media (max-width: 1024px) {
    body { height: auto; min-height: 100vh; overflow-y: auto; display: block; }
    
    .content-container {
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        min-height: 100vh; padding: 40px 20px; box-sizing: border-box;
        /* Varmistetaan, että sisältö on keskellä eikä ylhäällä mobiilissa */
        margin-top: 0; 
    }

    /* Pienennetty välejä mobiilissa */
    .book-header { margin-top: 0; margin-bottom: 10px; }
    .book-header h1 { font-size: 3rem; line-height: 1.2; text-align: center; }
    .subtitle { font-size: 1.2rem; margin-bottom: 15px; text-align: center; }
    
    /* Lisätty: Myyntiteksti mobiilissa */
    .sales-text { font-size: 1rem; margin-bottom: 10px; }
    .retailer-links { gap: 12px; margin-bottom: 20px; }
    .retailer-links a { font-size: 1rem; }

    .buttons-wrapper { flex-direction: column; width: 100%; align-items: center; }
    
    /* Lisätty ylämarginaali kirjan kanteen mobiilissa */
    .book-scene {
        display: flex; 
        flex-direction: column; 
        align-items: center;
        width: 100%;
        margin-top: 20px; 
    }

    .book-cover { 
        order: 2; /* Kansi tulee videon jälkeen */
        max-width: 80vw; margin: 0 auto; display: block; 
        transition: margin-top 0.3s ease; 
    }

    .video-popup {
        order: -1; /* Video ylimmäiseksi */
        position: relative; left: auto; top: auto; right: auto; bottom: auto; transform: none;
        margin: 0 auto 5px auto; /* Pieni väli videon ja kannen väliin */
        width: 100%; max-width: 350px;
        height: auto; 
        display: none; opacity: 1; visibility: visible;
    }
    .video-popup.visible { display: block; animation: fadeIn 0.5s ease; }

    .book-container { transform: scale(0.65); margin-left: 0; }
    .book-controls { margin-top: -100px; }
}

/* --- PUHELIN PYSTYASENTO (ALLE 600px) --- */
@media (max-width: 600px) and (orientation: portrait) {
    .book-header h1 { font-size: 2.5rem; }
    .book-container { transform: scale(0.42); margin-left: 0; transform-origin: center center; }
    .book-controls { margin-top: -190px; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .book-controls button { padding: 10px 15px; font-size: 0.9rem; }
    .modal-overlay.open #orientation-warning { display: block; }
}

/* --- PUHELIN VAAKA-ASENTO (LANDSCAPE) --- */
@media (max-width: 900px) and (orientation: landscape) {
    
    .modal-overlay { 
        padding: 10px 0; 
        align-items: flex-start;
        overflow-y: auto; 
    }
    
    .book-scene-3d { 
        justify-content: flex-start;
        width: 100%;
        min-height: 100%;
    }

    .book-container {
        transform-origin: top center; 
        transform: scale(0.45); 
        margin-top: 10px;
        margin-bottom: -360px; 
    }
    
    @media (max-height: 400px) {
        .book-container { transform: scale(0.38); margin-bottom: -400px; }
    }

    .book-controls {
        margin-top: 20px;
        margin-bottom: 20px;
        position: relative;
        z-index: 5000;
        width: 100%;
        justify-content: center;
    }

    .book-controls button {
        background: rgba(0,0,0,0.6);
        border-color: rgba(255,255,255,0.8);
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    
    .page-indicator { display: none; }
}