:root {
    --sidebar-width: 260px;
    --primary-color: #ffc107;
    --primary-color-rgb: 255, 193, 7;
    --dark-blue: #1a1a2e;
    --secondary-color: #28a745;
}
.hidden {
    display: none !important;
}
body, html {
    margin: 0;
    background-color: #1a1a2e;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}
body.mobile-nav-open {
    overflow: hidden;
}
main { padding-left: var(--sidebar-width); }
.mobile-menu-trigger {
    display: none; position: fixed; bottom: 20px; left: 50%;
    transform: translateX(-50%); z-index: 1001; padding: 10px 25px;
    background: rgba(26, 26, 46, 0.8); backdrop-filter: blur(5px);
    border: 1px solid rgba(254, 202, 87, 0.6); border-radius: 50px;
    color: white; font-family: 'Poppins', sans-serif; font-size: 0.9rem;
    font-weight: 500; letter-spacing: 3px; cursor: pointer;
    animation: gold-glow 4s ease-in-out infinite; transition: background-color 0.3s;
    width: 150px; text-align: center;
}
.mobile-menu-trigger:hover { background: rgba(40, 40, 60, 0.9); }
@keyframes gold-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(254, 202, 87, 0.5), 0 0 8px rgba(254, 202, 87, 0.4); }
    50% { box-shadow: 0 0 8px rgba(254, 202, 87, 0.8), 0 0 16px rgba(254, 202, 87, 0.8); }
}
.side-panel {
    position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh;
    display: flex; flex-direction: column; align-items: center; padding: 2rem 0;
    background: #19192e; z-index: 1000;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 5px 0 25px rgba(0,0,0,0.3); transition: transform 0.4s ease-in-out;
}
.panel-logo {
    font-family: 'Bangers', cursive; font-size: 2.5rem; color: white;
    text-decoration: none; letter-spacing: 2px; margin-bottom: 3rem;
    text-shadow: 0 0 10px rgba(255, 202, 87, 0.7);
}
.panel-nav { width: 100%; }
.panel-nav a {
    display: flex; align-items: center; gap: 1rem; color: #e0e0e0;
    text-decoration: none; font-family: 'Dancing Script', cursive; font-weight: 700; 
    padding: 1.2rem 2.5rem; transition: color 0.3s ease, background-color 0.3s ease, text-shadow 0.3s ease;
    font-size: 1.8rem; text-shadow: 0 0 8px rgba(254, 202, 87, 0.5);
}
.panel-nav a:hover, .panel-nav a.active {
    color: white; background-color: rgba(254, 202, 87, 0.1);
    text-shadow: 0 0 15px rgba(254, 202, 87, 1);
}
.panel-nav i { width: 20px; text-align: center; color: #feca57; }
.parallax-container {
    height: 100vh; background-image: url('https://cyferlandia.pl/cyferlandia_background.jpg');
    background-position: center; background-repeat: no-repeat; background-size: cover;
    position: relative; display: flex; justify-content: center; align-items: flex-start;
    padding-top: 8vh; text-align: center; color: white;
}
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); z-index: 1; }
.content { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; }
.cyferiusz-main {
    width: clamp(220px, 18vw, 320px); height: auto; margin-top: 1rem;
    filter: drop-shadow(0 0 15px rgba(254, 202, 87, 0.7)); 
    animation: float-hero 8s ease-in-out infinite;
}
@keyframes float-hero {
    0% { transform: translateY(0px); filter: drop-shadow(0 0 15px rgba(254, 202, 87, 0.7)); } 
    50% { transform: translateY(-20px); filter: drop-shadow(0 0 25px rgba(254, 202, 87, 1)); } 
    100% { transform: translateY(0px); filter: drop-shadow(0 0 15px rgba(254, 202, 87, 0.7)); }
}
.main-title {
    font-family: 'Bangers', cursive; font-size: clamp(2.5rem, 7vw, 5rem);
    letter-spacing: 3px;
    background: linear-gradient(270deg, #ff6b6b, #feca57, #48dbfb, #5f27cd, #ff6b6b);
    background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: rainbow-flow 8s ease-in-out infinite;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
@keyframes rainbow-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
#cyferiusz-play-btn, #cyferiusz-replay-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 10; padding: 3px; border: none; border-radius: 50px; cursor: pointer;
    background: linear-gradient(270deg, #ff6b6b, #feca57, #48dbfb, #5f27cd, #ff6b6b);
    background-size: 400% 400%; animation: rainbow-flow 8s ease-in-out infinite, pulse 2.5s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
#cyferiusz-play-btn .btn-content, #cyferiusz-replay-btn .btn-content {
    background-color: white; border-radius: 47px; padding: 10px 25px 10px 15px;
    display: flex; align-items: center; gap: 15px;
}
#cyferiusz-play-btn span, #cyferiusz-replay-btn span {
    color: black; font-family: 'Bangers', cursive; font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: 1px; white-space: nowrap;
}
#cyferiusz-play-btn img { height: 50px; width: auto; }
#cyferiusz-replay-btn i { font-size: 2.5rem; color: black; padding-left: 10px; }
@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
    50% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); }
    100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
}
#star-container, #music-bubble-container, #activity-bubble-container, #game-box-container, #book-bubble-container, #interactive-triggers-container {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; overflow: hidden;
}
#star-container { z-index: 2; }
#music-bubble-container, #activity-bubble-container, #game-box-container, #book-bubble-container { z-index: 3; }
#interactive-triggers-container { z-index: 6; }
.interactive-trigger { position: absolute; width: 110px; height: 110px; background: transparent; cursor: pointer; pointer-events: all; border-radius: 50%; }
.floating-star { position: absolute; pointer-events: all; cursor: pointer; animation: star-pulsate-spin 6s linear infinite; z-index: 5; }
@keyframes star-pulsate-spin {
    0% { transform: translateY(0px) scale(1) rotate(0deg); filter: drop-shadow(0 0 8px #ff6b6b); opacity: 0.7; }
    25% { transform: translateY(-15px) scale(1.2) rotate(90deg); filter: drop-shadow(0 0 18px #feca57); opacity: 1; }
    50% { transform: translateY(0px) scale(1) rotate(180deg); filter: drop-shadow(0 0 8px #48dbfb); opacity: 0.7; }
    75% { transform: translateY(15px) scale(1.2) rotate(270deg); filter: drop-shadow(0 0 18px #5f27cd); opacity: 1; }
    100% { transform: translateY(0px) scale(1) rotate(360deg); filter: drop-shadow(0 0 8px #ff6b6b); opacity: 0.7; }
}
.temp-character { position: absolute; width: 180px; height: auto; z-index: 10; pointer-events: none; animation: float-hero 8s ease-in-out infinite, character-glow-animation 4s linear infinite; transition: opacity 0.5s ease-out; }
@keyframes character-glow-animation {
    0% { filter: drop-shadow(0 0 8px #ff6b6b); } 25% { filter: drop-shadow(0 0 12px #feca57); }
    50% { filter: drop-shadow(0 0 8px #48dbfb); } 75% { filter: drop-shadow(0 0 12px #5f27cd); }
    100% { filter: drop-shadow(0 0 8px #ff6b6b); }
}
.music-bubble, .activity-bubble, .game-box, .book-bubble {
    position: absolute; width: 110px; height: 110px; background-size: contain; background-repeat: no-repeat;
    background-position: center; display: flex; align-items: center; justify-content: center;
    color: white; text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    transition: filter 0.3s ease-out; will-change: transform;
}
.music-bubble.playing { animation: pulsate-white-glow 1.5s ease-in-out infinite; }
.bubble-content, .pause-icon-container { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; text-align: center; }
.play-icon { font-size: 2rem; transition: transform 0.2s; }
.play-icon.glowing { animation: pulsate-icon 2s ease-in-out infinite; }
.play-text { font-family: 'Bangers', cursive; font-size: 1rem; letter-spacing: 1px; margin-top: 4px; }
.pause-icon-container { display: none; }
@keyframes pulsate-white-glow { 0% { filter: drop-shadow(0 0 5px rgba(255,255,255,0.7)); } 50% { filter: drop-shadow(0 0 20px rgba(255,255,255,1)); } 100% { filter: drop-shadow(0 0 5px rgba(255,255,255,0.7)); } }
@keyframes pulsate-icon { 0% { transform: scale(1); text-shadow: 0 0 4px #fff, 0 0 8px #fff; } 50% { transform: scale(1.15); text-shadow: 0 0 8px #fff, 0 0 15px #feca57, 0 0 20px #feca57; } 100% { transform: scale(1); text-shadow: 0 0 4px #fff, 0 0 8px #fff; } }

@media (max-width: 1024px) { main { padding-left: 0; } .mobile-menu-trigger { display: block; } .side-panel { transform: translateY(-100%); top: 0; bottom: auto; width: 100vw; height: auto; border-right: none; border-bottom: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0 5px 25px rgba(0,0,0,0.3); padding-top: 1.5rem; padding-bottom: 2rem; } .side-panel.is-open { transform: translateY(0); } }
@media (max-width: 768px) { .parallax-container { padding-top: 5vh; } .cyferiusz-main { margin-top: 1rem; } .music-bubble, .activity-bubble, .game-box, .book-bubble, .interactive-trigger { width: 70px; height: 70px; } .play-icon { font-size: 1.5rem; } .play-text { font-size: 0.7rem; } .temp-character { width: 120px; } }
#rotate-to-portrait-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: var(--dark-blue); color: white; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#rotate-to-portrait-overlay .rotate-icon { width: 40vw; max-width: 150px; margin-bottom: 20px; transform: rotate(90deg); }
#rotate-to-portrait-overlay p { font-family: 'Bangers', cursive; font-size: 2.5rem; color: var(--primary-color); margin: 0; }
#rotate-to-portrait-overlay span { font-family: 'Poppins', sans-serif; font-size: 1.2rem; margin-top: 10px; }
@media (orientation: landscape) and (max-height: 600px) { main, .side-panel, .mobile-menu-trigger { display: none; } #rotate-to-portrait-overlay { display: flex; } }

/* ======================================================= */
/* === PRZYWRÓCONE I POPRAWNE STYLE SEKCJI PREMIERY === */
/* ======================================================= */
#premiere-section { background: linear-gradient(180deg, #10101e 0%, #1a1a2e 50%, #10101e 100%); padding: 80px 20px; text-align: center; color: white; font-family: 'Poppins', sans-serif; overflow: hidden; }
.premiere-container { max-width: 1200px; margin: 0 auto; position: relative; }
.premiere-display-area { display: flex; justify-content: center; align-items: flex-end; gap: 0px; margin-bottom: 60px; position: relative; z-index: 5; }
.section-title, .section-subtitle { position: relative; z-index: 5; }
.section-title { font-family: 'Bangers', cursive; font-size: clamp(2.2rem, 10vw, 2.6rem); letter-spacing: 2px; background: linear-gradient(270deg, #ff6b6b, #feca57, #48dbfb, #5f27cd, #ff6b6b); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rainbow-flow 8s ease-in-out infinite; text-shadow: 0 0 15px rgba(255, 255, 255, 0.3); margin: 0; }
.section-subtitle { font-size: 1.2rem; margin: 10px 0 40px 0; color: #e0e0e0; }
#video-stage { background-color: #000; border: 3px solid #feca57; border-radius: 15px; padding: 15px; box-shadow: 0 0 20px rgba(254, 202, 87, 0.5), 0 0 40px rgba(254, 202, 87, 0.3); max-width: 480px; width: 100%; min-height: 600px; display: flex; justify-content: center; align-items: center; transition: all 0.5s ease-in-out; flex-shrink: 0; }
#countdown-wrapper, #premiere-video-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
#full-date-countdown { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; width: 100%; }
.time-block { display: flex; flex-direction: column; align-items: center; }
.time-block label { font-family: 'Poppins', sans-serif; font-size: 0.8rem; color: #e0e0e0; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; }
.time-block span { font-family: 'Bangers', cursive; font-size: 4rem; color: var(--primary-color); line-height: 1; text-shadow: none; transition: color 0.1s linear; }
#ten-second-countdown { animation: pulse-final-countdown 1s infinite; }
#ten-second-countdown #seconds-left { font-family: 'Bangers', cursive; font-size: 15rem; color: #ffc107; line-height: 1; text-shadow: none; }
@keyframes pulse-final-countdown { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
#premiere-video-container { position: relative; }
#premiere-video { width: 100%; max-width: 100%; height: auto; border-radius: 8px; }
#custom-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: white; animation: pulse-play-button 2s ease-in-out infinite; }
#custom-play-button i { font-size: 8rem; text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8); }
#custom-play-button span { font-family: 'Bangers', cursive; font-size: 3rem; letter-spacing: 4px; margin-top: 10px; text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.9); }
@keyframes pulse-play-button { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } }
.playlists-container { display: grid; grid-template-columns: 1fr; gap: 50px; margin-top: 40px; max-width: 900px; margin-left: auto; margin-right: auto; }
.playlist-title { font-family: 'Bangers', cursive; font-size: 1.8rem; color: #feca57; margin-bottom: 15px; position: relative; z-index: 5; }
.playlist-wrapper { background: rgba(26, 26, 46, 0.5); border: 1px solid rgba(254, 202, 87, 0.4); border-radius: 15px; padding: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; }
.playlist-wrapper:hover { transform: translateY(-5px); }
.playlist-wrapper iframe, .youtube-embed-square { position: relative; z-index: 5; }
.playlist-wrapper iframe { width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; }
.youtube-embed-square { padding-bottom: 100%; height: 0; overflow: hidden; border-radius: 12px; }
.youtube-embed-square iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.side-character { display: none; width: 400px; height: auto; pointer-events: none; filter: drop-shadow(0 0 15px rgba(0,0,0,0.5)); }
#char-right { transform: scaleX(-1); }
.upcoming-section { padding: 60px 20px 120px 20px; text-align: center; }
.upcoming-section h2 { font-family: 'Bangers', cursive; font-size: 2.5rem; color: var(--primary-color); letter-spacing: 2px; text-shadow: 0 0 10px rgba(0,0,0,0.5); position: relative; z-index: 5; }
@media (min-width: 1200px) { .side-character { display: block; } }
@media (min-width: 821px) { .playlists-container { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 820px) { #premiere-section { padding: 60px 10px; } .section-title { font-size: clamp(2.2rem, 10vw, 2.8rem); } .premiere-display-area { gap: 0; } #video-stage { max-width: 60vw; min-height: 400px; padding: 10px; } .side-character { display: block; width: 26vw; max-width: 130px; } #char-left { transform: translateX(15px); } #char-right { transform: translateX(-15px) scaleX(-1); } .time-block span { font-size: 3rem; } #ten-second-countdown #seconds-left { font-size: 10rem; } .playlist-wrapper { padding: 20px 15px; } .playlist-title { font-size: 1.5rem; } #custom-play-button i { font-size: 4.8rem; } #custom-play-button span { font-size: 1.8rem; } }
@media (max-width: 480px) { #video-stage { min-height: 320px; max-width: 55vw; } .side-character { width: 28vw; } .time-block span { font-size: 2.5rem; } .time-block label { font-size: 0.7rem; } .section-subtitle { font-size: 1rem; padding: 0 10px; } }
@media (max-width: 820px) { #countdown-wrapper { display: none !important; } #premiere-video-container.hidden, #premiere-video-container { display: flex !important; flex-direction: column; justify-content: center; align-items: center; } }

/* ======================================================= */
/* === POPRAWIONE STYLE MODALA I JEGO PRZYCISKÓW === */
/* ======================================================= */
#book-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
#book-modal.visible { opacity: 1; pointer-events: all; }
.book-modal-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 25px; font-family: 'Bangers', cursive; }
#book-modal-image { max-width: 75vw; max-height: 60vh; }
.book-modal-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 15px;
    padding: 12px 30px; font-size: 1.8rem; font-family: 'Bangers', cursive; color: white;
    text-decoration: none; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); letter-spacing: 1px;
    border: none; border-radius: 50px;
    background: linear-gradient(270deg, #ff6b6b, #feca57, #48dbfb, #5f27cd, #ff6b6b);
    background-size: 400% 400%;
    box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7), 0 0 20px rgba(var(--primary-color-rgb), 0.5);
    cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulse-book-button 3s ease-in-out infinite;
}
.book-modal-button:hover, .book-modal-button:focus { transform: scale(1.05); box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.9), 0 0 35px rgba(var(--primary-color-rgb), 0.7); outline: none; }
.book-modal-button i { font-size: 1.5rem; filter: drop-shadow(0 0 5px white); }
@keyframes pulse-book-button {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7), 0 0 20px rgba(var(--primary-color-rgb), 0.5); }
    50% { transform: scale(1.03); box-shadow: 0 0 13px rgba(var(--primary-color-rgb), 0.8), 0 0 28px rgba(var(--primary-color-rgb), 0.6); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7), 0 0 20px rgba(var(--primary-color-rgb), 0.5); }
}
.book-modal-close {
    position: absolute; top: -20px; right: -20px;
    width: 50px; height: 50px; background: white; color: black;
    border: 3px solid black; border-radius: 50%;
    font-size: 0; /* Ukryj tekst z HTML na desktopie */
    cursor: pointer; z-index: 1; display: flex;
    justify-content: center; align-items: center; padding: 0;
}
.book-modal-close::before {
    content: '\00D7'; /* Wygeneruj krzyżyk */
    font-size: 2.5rem;
    line-height: 1;
}
@media (max-width: 768px) {
    .book-modal-content { gap: 15px; }
    .book-modal-button { font-size: 1.4rem; padding: 10px 20px; }
    .book-modal-close {
        position: static; width: auto; height: auto; margin-top: 10px;
        padding: 8px 20px;
        font-size: 1.2rem; /* Przywróć widoczność tekstu "Zamknij" */
        font-family: 'Poppins', sans-serif; font-weight: 500;
        background: transparent; color: white;
        border: 1px solid white; border-radius: 20px;
    }
    .book-modal-close::before {
        content: none; /* Ukryj wygenerowany krzyżyk na mobile */
    }
}
3. Kompletny i Poprawny Kod JavaScript (script.js)
Ten kod pozostaje bez zmian w stosunku do poprzedniej wersji, która wprowadzała osobne warstwy interaktywne. Jest on w pełni poprawny.
code
JavaScript
document.addEventListener('DOMContentLoaded', function () {

    window.dataLayer = window.dataLayer || [];
    const loopVideoUrl = 'https://cyferlandia.pl/multimedia/webm/cyferiusz3_480_128.webm';
    const introVideoUrl = 'https://cyferlandia.pl/multimedia/webm/cyferiusz2_480_128_with_audio.webm';
    let gravity = { x: 0, y: 0 };
    let isGyroActive = false;
    let allFloatingObjects = [];

    const bookModal = document.getElementById('book-modal');
    const bookModalImage = document.getElementById('book-modal-image');
    const bookModalCloseBtn = document.querySelector('.book-modal-close');
    const triggerContainer = document.getElementById('interactive-triggers-container');

    const clickSound = new Audio('https://cyferlandia.pl/multimedia/audio_effect/klik_clunk_ding.mp3');
    clickSound.preload = 'auto';

    function playClickSound() {
        clickSound.currentTime = 0;
        clickSound.play().catch(error => console.log(`Błąd odtwarzania dźwięku: ${error}`));
    }

    function revertCyferiuszToSilentLoop() {
        const video = document.getElementById('cyferiusz-video');
        const replayBtn = document.getElementById('cyferiusz-replay-btn');
        if (video && video.src.includes('cyferiusz2')) {
            video.src = loopVideoUrl;
            video.loop = true;
            video.muted = true;
            video.play().catch(e => console.error("Nie udało się przełączyć na cichą pętlę.", e));
            if (replayBtn) {
                replayBtn.classList.remove('hidden');
            }
        }
    }

    createFloatingStars();
    createMusicBubbles();
    createActivityBubbles();
    createGameBoxes();
    createBookBubbles();
    animateFloatingObjects();
    setupMobileMenu();
    setupCyferiuszVideo();
    setupGyroscope();
    setupPremiereCountdown();
    setupCustomPlayButton();
    setupScrollStopListener();
    setupIframeInteractionListener();
    setupBookModal();

    function setupBookModal() {
        if (bookModal && bookModalCloseBtn) {
            const closeModal = () => {
                playClickSound();
                bookModal.classList.remove('visible');
            }
            bookModalCloseBtn.addEventListener('click', closeModal);
            bookModal.addEventListener('click', (e) => {
                if (e.target === bookModal) closeModal();
            });
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && bookModal.classList.contains('visible')) closeModal();
            });
        }
    }
    
    function createBubbleElement(className, imageUrl, type) {
        const visual = document.createElement('div');
        visual.className = className;
        visual.style.backgroundImage = `url('${imageUrl}')`;
        const img = new Image();
        img.src = imageUrl;
        img.onerror = () => { visual.style.display = 'none'; };
        if (type === 'music') {
            visual.innerHTML = `<div class="bubble-content"><i class="fas fa-play play-icon glowing"></i><span class="play-text">PLAY</span></div><div class="pause-icon-container"><i class="fas fa-pause play-icon"></i></div>`;
        }

        const trigger = document.createElement('div');
        trigger.className = 'interactive-trigger';
        trigger.setAttribute('role', 'button');
        trigger.setAttribute('tabindex', '0');

        const size = window.innerWidth <= 768 ? 70 : 110;
        const physics = {
            x: Math.random() * (window.innerWidth - size),
            y: Math.random() * (window.innerHeight - size),
            vx: (Math.random() - 0.5) * 1.2,
            vy: (Math.random() - 0.5) * 1.2,
            rotation: Math.random() * 360,
            vRotation: (Math.random() - 0.5) * 4,
            mass: className.includes('game-box') ? 1.5 : (className.includes('activity-bubble') ? 1.0 : 0.8),
            visual: visual,
            trigger: trigger
        };
        
        return physics;
    }

    function createBookBubbles() {
        const container = document.getElementById('book-bubble-container');
        if (!container) return;
        const items = [{ cover: 'https://cyferlandia.pl/multimedia/ksiazka_okladka_czesc_pierwsza.png', open: 'https://cyferlandia.pl/multimedia/ksiazka_okladka_otwarta_cze1.png' }, { cover: 'https://cyferlandia.pl/multimedia/ksiazka_okladka_czesc_druga.png', open: 'https://cyferlandia.pl/multimedia/ksiazka_okladka_otwarta_cze2.png' }, { cover: 'https://cyferlandia.pl/multimedia/ksiazka_okladka_czesc_trzecia.png', open: 'https://cyferlandia.pl/multimedia/ksiazka_okladka_otwarta_cze3.png' }];
        items.forEach((bookData, index) => {
            const bubbleObject = createBubbleElement('book-bubble', bookData.cover, 'book');
            bubbleObject.trigger.setAttribute('aria-label', `Zobacz informacje o książce ${index + 1}`);
            const openBookModal = () => {
                playClickSound();
                revertCyferiuszToSilentLoop();
                if (bookModal && bookModalImage) {
                    dataLayer.push({ 'event': 'click_book_bubble', 'book_version': `czesc_${index + 1}` });
                    bookModalImage.src = bookData.open;
                    bookModal.classList.add('visible');
                }
            };
            bubbleObject.trigger.addEventListener('click', openBookModal);
            bubbleObject.trigger.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openBookModal(); } });
            container.appendChild(bubbleObject.visual);
            triggerContainer.appendChild(bubbleObject.trigger);
            allFloatingObjects.push(bubbleObject);
        });
    }

    function setupCyferiuszVideo() {
        const video = document.getElementById('cyferiusz-video');
        const playBtn = document.getElementById('cyferiusz-play-btn');
        const replayBtn = document.getElementById('cyferiusz-replay-btn');
        if (!video || !playBtn || !replayBtn) return;
        playBtn.addEventListener('click', () => {
            playClickSound();
            dataLayer.push({'event': 'play_intro_video'});
            video.src = introVideoUrl;
            video.muted = false;
            video.loop = false;
            video.play();
            playBtn.classList.add('hidden');
        });
        replayBtn.addEventListener('click', () => {
            playClickSound();
            dataLayer.push({'event': 'replay_intro_video'});
            replayBtn.classList.add('hidden');
            video.src = introVideoUrl;
            video.loop = false;
            video.muted = false;
            video.currentTime = 0;
            video.play().catch(e => console.error("Nie udało się odtworzyć wideo replay.", e));
        });
        video.addEventListener('ended', () => {
            if (video.src.includes('cyferiusz2')) revertCyferiuszToSilentLoop();
        });
    }

    function createMusicBubbles() {
        const container = document.getElementById('music-bubble-container');
        if (!container) return;
        const items = [ { song: 'https://cyferlandia.pl/cyferlandia_1.mp3', image: 'https://cyferlandia.pl/cyferlandia_banka_yellow.png' }, { song: 'https://cyferlandia.pl/cyferlandia_2.mp3', image: 'https://cyferlandia.pl/cyferlandia_banka_blue.png' }, { song: 'https://cyferlandia.pl/cyferlandia_3.mp3', image: 'https://cyferlandia.pl/cyferlandia_banka_red.png' }, { song: 'https://cyferlandia.pl/cyferlandia_4.mp3', image: 'https://cyferlandia.pl/cyferlandia_banka_green.png' } ];
        const audioPlayers = [];
        items.forEach((data, index) => {
            const bubbleObject = createBubbleElement('music-bubble', data.image, 'music');
            bubbleObject.trigger.setAttribute('aria-label', `Odtwórz utwór numer ${index + 1}`);
            audioPlayers[index] = new Audio(data.song);
            bubbleObject.audioPlayer = audioPlayers[index];
            const togglePlay = () => {
                playClickSound();
                revertCyferiuszToSilentLoop();
                const isPlaying = bubbleObject.visual.classList.contains('playing');
                allFloatingObjects.forEach((b) => {
                    if (b.visual.classList.contains('music-bubble') && b.visual.classList.contains('playing') && b !== bubbleObject) {
                        b.visual.classList.remove('playing');
                        if(b.audioPlayer) { b.audioPlayer.pause(); b.audioPlayer.currentTime = 0; }
                        b.visual.querySelector('.bubble-content').style.display = 'flex';
                        b.visual.querySelector('.pause-icon-container').style.display = 'none';
                        b.trigger.setAttribute('aria-label', `Odtwórz utwór`);
                    }
                });
                if (isPlaying) {
                    bubbleObject.visual.classList.remove('playing');
                    audioPlayers[index].pause();
                    bubbleObject.visual.querySelector('.bubble-content').style.display = 'flex';
                    bubbleObject.visual.querySelector('.pause-icon-container').style.display = 'none';
                    bubbleObject.trigger.setAttribute('aria-label', `Odtwórz utwór numer ${index + 1}`);
                } else {
                    dataLayer.push({ 'event': 'play_music_bubble', 'song_name': data.song.split('/').pop() });
                    bubbleObject.visual.classList.add('playing');
                    audioPlayers[index].play().catch(e => console.error("Audio play failed:", e));
                    bubbleObject.visual.querySelector('.bubble-content').style.display = 'none';
                    bubbleObject.visual.querySelector('.pause-icon-container').style.display = 'flex';
                    bubbleObject.trigger.setAttribute('aria-label', `Zatrzymaj utwór numer ${index + 1}`);
                }
            };
            bubbleObject.trigger.addEventListener('click', togglePlay);
            bubbleObject.trigger.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); togglePlay(); } });
            audioPlayers[index].onended = () => {
                bubbleObject.visual.classList.remove('playing');
                bubbleObject.visual.querySelector('.bubble-content').style.display = 'flex';
                bubbleObject.visual.querySelector('.pause-icon-container').style.display = 'none';
                bubbleObject.trigger.setAttribute('aria-label', `Odtwórz utwór numer ${index + 1}`);
            };
            container.appendChild(bubbleObject.visual);
            triggerContainer.appendChild(bubbleObject.trigger);
            allFloatingObjects.push(bubbleObject);
        });
    }

    function animateFloatingObjects() {
        const animate = () => {
            for (let i = 0; i < allFloatingObjects.length; i++) {
                const objA = allFloatingObjects[i];
                if (objA.visual.classList.contains('playing')) continue;
                const size = window.innerWidth <= 768 ? 70 : 110;
                let leftBoundary = (window.innerWidth > 1024) ? parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width')) : 0;
                if (isGyroActive) { objA.vx += gravity.x; objA.vy += gravity.y; objA.vRotation *= 0.99; }
                objA.x += objA.vx; objA.y += objA.vy; objA.rotation += objA.vRotation;
                const bounce = isGyroActive ? -0.8 : -1;
                if (objA.x < leftBoundary) { objA.x = leftBoundary; objA.vx *= bounce; objA.vRotation += (Math.random() - 0.5) * 1; }
                else if (objA.x > window.innerWidth - size) { objA.x = window.innerWidth - size; objA.vx *= bounce; objA.vRotation += (Math.random() - 0.5) * 0.5; }
                if (objA.y < 0) { objA.y = 0; objA.vy *= bounce; objA.vRotation += (Math.random() - 0.5) * 0.5; }
                else if (objA.y > window.innerHeight - size) { objA.y = window.innerHeight - size; objA.vy *= bounce; objA.vRotation += (Math.random() - 0.5) * 0.5; }
                for (let j = i + 1; j < allFloatingObjects.length; j++) {
                    const objB = allFloatingObjects[j];
                    if (objB.visual.classList.contains('playing')) continue;
                    const radius = size / 2;
                    const dx = (objB.x + radius) - (objA.x + radius);
                    const dy = (objB.y + radius) - (objA.y + radius);
                    const distanceSquared = dx * dx + dy * dy;
                    const sumOfRadiiSquared = (radius * 2) * (radius * 2);
                    if (distanceSquared < sumOfRadiiSquared) {
                        const distance = Math.sqrt(distanceSquared); if (distance === 0) continue;
                        const overlap = (radius * 2) - distance;
                        const moveX = (overlap * dx / distance) / 2; const moveY = (overlap * dy / distance) / 2;
                        objA.x -= moveX; objA.y -= moveY; objB.x += moveX; objB.y += moveY;
                        const m1 = objA.mass; const m2 = objB.mass; const totalMass = m1 + m2;
                        const newAVx = (objA.vx * (m1 - m2) + 2 * m2 * objB.vx) / totalMass;
                        const newBVx = (objB.vx * (m2 - m1) + 2 * m1 * objA.vx) / totalMass;
                        const newAVy = (objA.vy * (m1 - m2) + 2 * m2 * objB.vy) / totalMass;
                        const newBVy = (objB.vy * (m2 - m1) + 2 * m1 * objA.vy) / totalMass;
                        objA.vx = newAVx; objA.vy = newAVy; objB.vx = newBVx; objB.vy = newBVy;
                        const rotationKick = (Math.random() - 0.5) * 0.8;
                        objA.vRotation += rotationKick; objB.vRotation -= rotationKick;
                    }
                }
            }
            allFloatingObjects.forEach(obj => {
                if (!obj.visual.classList.contains('playing')) {
                    const transformStyle = `translate(${obj.x}px, ${obj.y}px) rotate(${obj.rotation}deg)`;
                    obj.visual.style.transform = transformStyle;
                    obj.trigger.style.transform = transformStyle;
                }
            });
            requestAnimationFrame(animate);
        };
        animate();
    }
    
    function setupScrollStopListener() { const s = document.getElementById('parallax-bg'); if(!s) return; new IntersectionObserver(e=>{e.forEach(en=>{if(!en.isIntersecting)revertCyferiuszToSilentLoop()})},{threshold:.1}).observe(s) }
    function setupIframeInteractionListener() { window.addEventListener('blur', () => { if (document.activeElement && document.activeElement.tagName === 'IFRAME') revertCyferiuszToSilentLoop(); }) }
    function setupGyroscope() { if(typeof DeviceOrientationEvent.requestPermission==='function'){}else if(window.DeviceOrientationEvent)window.addEventListener('deviceorientation',handleOrientation) }
    function handleOrientation(e) { if(!isGyroActive)isGyroActive=true;gravity.x=(e.gamma/90)*.1;gravity.y=(e.beta/90)*.1 }
    function setupMobileMenu() { const t=document.getElementById('mobile-menu-toggle-btn'),e=document.getElementById('side-panel'),o=document.querySelectorAll('.panel-nav a');t&&e&&t.addEventListener('click',()=>{playClickSound();const o=e.classList.toggle('is-open');document.body.classList.toggle('mobile-nav-open'),t.setAttribute('aria-expanded',o),t.textContent=o?'ZAMKNIJ':'MENU ...'}),o.forEach(t=>{t.addEventListener('click',playClickSound)}) }
    function setupCustomPlayButton() { const t=document.getElementById('custom-play-button'),e=document.getElementById('premiere-video');t&&e&&(t.addEventListener('click',()=>{playClickSound(),revertCyferiuszToSilentLoop(),dataLayer.push({event:'play_premiere_video'}),e.play()}),e.addEventListener('play',()=>{t.style.display='none'}),e.addEventListener('pause',()=>{e.ended||(t.style.display='flex')}),e.addEventListener('ended',()=>{dataLayer.push({event:'finish_premiere_video'}),t.style.display='flex'})) }
    function createFloatingStars() { const t=document.getElementById('star-container');if(!t)return;const e=['yellow','fiolet','orange','rgreen','rozowa'].map(t=>`https://cyferlandia.pl/gwiazdka_${t}.png`),o=['https://cyferlandia.pl/lis_przekret_noga_na_kamieniu.png','https://cyferlandia.pl/minusik_rozklada_rece.png','https://cyferlandia.pl/misia_mnozka_na_wprost.png','https://cyferlandia.pl/mnozny_stoi_z_rekami.png'];for(let n=0;n<8;n++){const a=document.createElement('img');a.src=e[n%e.length],a.className='floating-star',a.setAttribute('role','button'),a.setAttribute('tabindex','0'),a.setAttribute('aria-label','Błyszcząca gwiazdka');const i=60*Math.random()+20;a.style.width=`${i}px`,a.style.top=`${100*Math.random()}%`,a.style.left=`${100*Math.random()}%`,a.style.animationDelay=`${6*Math.random()}s`,a.onerror=function(){this.style.display='none'};const d=t=>{playClickSound(),dataLayer.push({event:'click_floating_star'}),a.classList.contains('active')||(a.classList.add('active'),function(t){const e=document.createElement('img');e.className='temp-character',e.src=o[Math.floor(Math.random()*o.length)],e.style.left=`${t.pageX-90}px`,e.style.top=`${t.pageY-100}px`,e.onerror=function(){this.remove()},document.body.appendChild(e),setTimeout(()=>{e.style.opacity='0',setTimeout(()=>{e.remove(),a.classList.remove('active')},500)},5000)}(t))};a.addEventListener('click',d),a.addEventListener('keydown',t=>{('Enter'===t.key||' '===t.key)&&(t.preventDefault(),d(t))}),t.appendChild(a)}}
    function createActivityBubbles() { const t=document.getElementById('activity-bubble-container');if(!t)return;const e=[{image:'https://cyferlandia.pl/pencil_1.png'},{image:'https://cyferlandia.pl/pencil_2.png'}];e.forEach((e,o)=>{const n=createBubbleElement('activity-bubble',e.image,'activity');n.trigger.setAttribute('aria-label',`Otwórz kolorowankę numer ${o+1}`);const a=()=>{playClickSound(),revertCyferiuszToSilentLoop(),dataLayer.push({event:'click_coloring_bubble'}),window.open('https://cyferlandia.pl/kolorowanki/sumka/kolorowanka_cyferlandia_zabka_sumka.html','_blank')};n.trigger.addEventListener('click',a),n.trigger.addEventListener('keydown',t=>{('Enter'===t.key||' '===t.key)&&(t.preventDefault(),a())}),t.appendChild(n.visual),triggerContainer.appendChild(n.trigger),allFloatingObjects.push(n)})}
    function createGameBoxes() { const t=document.getElementById('game-box-container');if(!t)return;const e='https://cyferlandia.pl/multimedia/pudelko_zabawa.png';for(let o=0;o<2;o++){const n=createBubbleElement('game-box',e,'game');n.trigger.setAttribute('aria-label','Przejdź do strony z zabawami');const a=()=>{playClickSound(),revertCyferiuszToSilentLoop(),dataLayer.push({event:'click_game_box'}),window.location.href='gra.html'};n.trigger.addEventListener('click',a),n.trigger.addEventListener('keydown',t=>{('Enter'===t.key||' '===t.key)&&(t.preventDefault(),a())}),t.appendChild(n.visual),triggerContainer.appendChild(n.trigger),allFloatingObjects.push(n)}}
    function setupPremiereCountdown() { const t=document.getElementById('premiere-section');if(!t)return;const e=[document.getElementById('music-bubble-container'),document.getElementById('activity-bubble-container'),document.getElementById('game-box-container'),document.getElementById('book-bubble-container')],o=document.getElementById('countdown-wrapper'),n=document.getElementById('premiere-video-container'),a=document.getElementById('days'),i=document.getElementById('hours'),d=document.getElementById('minutes'),l=document.getElementById('seconds');if(!o||!n||!a||!i||!d||!l)return;const r=[a,i,d,l];let s=!1;const c=()=>{if(s)return;s=!0,dataLayer.push({event:'view_premiere_countdown'});const t=1e4,e={r:255,g:193,b:7},c={r:255,g:107,b:107};let u=null;const m=p=>{u||(u=p);const f=p-u,y=Math.min(f/t,1),g=e.r+(c.r-e.r)*y,k=e.g+(c.g-e.g)*y,v=e.b+(c.b-e.b)*y,h=`rgb(${Math.round(g)}, ${Math.round(k)}, ${Math.round(v)})`;r.forEach(t=>{t&&(t.style.color=h)}),f<2500?a.textContent=Math.floor(10*(1-f/2500)).toString().padStart(2,'0'):f<5e3?(a.textContent='00',i.textContent=Math.floor(24*(1-(f-2500)/2500)).toString().padStart(2,'0')):f<7e3?(i.textContent='00',d.textContent=Math.floor(60*(1-(f-5e3)/2e3)).toString().padStart(2,'0')):f<9e3?(d.textContent='00',l.textContent=(4+Math.floor(56*(1-(f-7e3)/2e3))).toString().padStart(2,'0')):f<t&&(t-f>666.66 ?l.textContent='03':t-f>333.33?l.textContent='02':l.textContent='01'),y<1?requestAnimationFrame(m):(l.textContent='00',setTimeout(()=>{o.classList.add('hidden'),n.classList.remove('hidden')},200))};requestAnimationFrame(m)};new IntersectionObserver(o=>{o.forEach(o=>{o.isIntersecting?(e.forEach(t=>{t&&(t.style.display='none')}),c()):e.forEach(t=>{t&&(t.style.display='block')})})},{threshold:.5}).observe(t)}
});