/*!
 * ==============================================
 * GROETJES UIT DE STUDIO VAN JEFF
 * https://www.destudiovanjeff.nl
 *
 * Copyright © 2026 Jeffrey Dral | De studio van Jeff
 * All rights reserved.
 * ==============================================
 */

/**
 * ==============================================
 * LEES MEER ONZIN - HOOFDSTYLESHEET
 * ==============================================
 *
 * Inhoudsopgave:
 * 1. RESET & BASIS
 * 2. CSS VARIABELEN
 * 3. LAYOUT & STRUCTUUR
 * 4. PAGINA LOADER
 * 5. LOGO & BRANDING
 * 6. NAVIGATIE
 * 7. AUDIO CONTROLS
 * 8. MAGISCHE KNOP
 * 9. SEGMENTEN & KARAKTERS
 * 10. KARAKTER AFBEELDINGEN
 * 11. DECORATIE ELEMENTEN
 * 12. VERRASSINGEN
 * 13. MODALS
 * 14. ANIMATIES
 * 15. RESPONSIVE - MOBIEL LANDSCAPE
 * 16. RESPONSIVE - TABLET PORTRAIT
 * 17. RESPONSIVE - TABLET LANDSCAPE
 * 18. RESPONSIVE - DESKTOP KLEIN
 * 19. RESPONSIVE - DESKTOP MIDDEL
 * 20. RESPONSIVE - DESKTOP GROOT
 */

/* ==============================================
   1. RESET & BASIS
   ============================================== */

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

/* Screen-reader only: onzichtbaar voor gebruikers, wel indexeerbaar door crawlers */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Verwijder outer glow/focus ring overal */
*:focus,
*:active {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: hidden;
    /* Safari toolbar (onder) pakt html background-color op */
    /* DONKERBLAUW voor toolbar, theme-color meta tag bepaalt status bar (boven) */
    background-color: #03061E;
    overscroll-behavior: none;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: auto;
}

/* SAFARI TOOLBAR KLEUREN via html classes (compatibel met alle Safari versies) */
html.safari-loading {
    background-color: #E73A56 !important; /* Rood voor laadscherm */
}

html.safari-park {
    background-color: #03061E !important; /* Donkerblauw voor park */
}

html.safari-modal {
    background-color: #FFF076 !important; /* Geel voor modals */
}

html.safari-galaxy {
    background-color: #03061E !important; /* Donkerblauw voor galaxy */
}

/* Fallback :has() selectors voor als JS niet geladen is */
html:has(body.galaxy-mode) {
    background-color: #03061E !important;
}

html:has(body.modal-scroll-locked),
html:has(body.character-modal-open) {
    background-color: #FFF076 !important;
}

/* iOS Safari safe-area fix - donkerblauw aan de onderkant
   NIET in galaxy mode - daar wordt ::after gebruikt voor sterren */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body:not(.galaxy-mode)::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-bottom, 0);
        background-color: #03061E;
        z-index: 99999;
        pointer-events: none;
    }
}

body {
    position: relative;
    font-family: 'Gabarito', 'Arial', sans-serif;
    overflow: hidden;           /* body scrolt NOOIT meer */
    display: flex;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none;         /* JS vangt alle touch op */
    background-color: #03061E;  /* Donkerblauw fallback */
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: none;
    overscroll-behavior-x: none;
}

body::-webkit-scrollbar {
    display: none;
}

/* Scroll container - JS controleert alle scroll */
#scrollContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow-x: scroll;         /* scrollLeft werkt alleen met scroll overflow */
    overflow-y: hidden;
    touch-action: none;         /* JS vangt touch op, geen native */
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    z-index: 1;                 /* Boven sky-layer (0) */
    background: transparent;    /* Sky-layer moet doorschijnen */
}

#scrollContainer::-webkit-scrollbar {
    display: none;
}

body.loading {
    overflow: hidden;
}

/* Tijdens laden: html achtergrond rood (voor Safari toolbar) - fallback */
html:has(body.loading) {
    background-color: #E73A56 !important;
}

/* Safari loading class heeft hogere prioriteit */
html.safari-loading {
    background-color: #E73A56 !important;
}

/* Audio controls hoger tijdens laadscherm op mobile */
@media (max-width: 768px) {
    body.loading .audio-controls {
        top: 20px;
    }
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.character-image img,
.opening-background,
.background-world img,
.book-cover img {
    pointer-events: auto;
}

/* ==============================================
   2. CSS VARIABELEN
   ============================================== */

:root {
    --spacer-width: 20vw;
    /* Character hoogte is nu 100vh - karakters zijn even hoog als de achtergrond
       en schalen automatisch mee. Karakterafbeeldingen moeten 1080px hoog zijn. */
}

/* ==============================================
   3. LAYOUT & STRUCTUUR
   ============================================== */

/* Lucht achtergrond - herhalend patroon met parallax effect */
.sky-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    /* Boven body, onder scrollContainer */
    background-image: url('../images/lucht.png');
    background-repeat: repeat-x;
    background-size: auto 100%;
    /* Hoogte = 100vh, breedte volgt aspect ratio */
    background-position: 0 bottom;
    pointer-events: none;
    /* Parallax: lucht beweegt langzamer via background-position (gezet door JS) */
    background-position-x: var(--sky-parallax-x, 0px);
}

/* Galaxy mode: verberg de lucht */
body.galaxy-mode .sky-layer {
    opacity: 0;
    transition: opacity 1s ease;
}

.background-world {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 0;
    z-index: 1;
    /* Boven sky-layer (0) */
    pointer-events: none;
}

.background-world img {
    position: absolute;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: auto;
    display: block;
}

.sky,
.ground,
.ground::before {
    display: none !important;
}

/* ==============================================
   4. PAGINA LOADER
   ============================================== */

.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #E73A56;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Iris gat element - onzichtbaar totdat .hidden wordt toegevoegd */
.page-loader::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300vmax;
    height: 300vmax;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* Ring van rood - binnenste rand begint klein, buitenste is enorm */
    /* box-shadow: inset 0 0 0 [dikte] [kleur] */
    box-shadow: inset 0 0 0 150vmax #E73A56;
    pointer-events: none;
    opacity: 0;
    /* Boven patroon-laag zodat iris deze maskeert */
    z-index: 10;
}

.page-loader.hidden {
    pointer-events: none;
    /* Achtergrond direct weg, ::after neemt over */
    background: transparent;
}

.page-loader.hidden::after {
    opacity: 1;
    animation: irisOut 1.2s ease-out forwards;
}

.page-loader.hidden .loader-content,
.page-loader.hidden .loader-adults-button {
    opacity: 0;
    visibility: hidden;
}

/* Patroon vervaagt snel aan het begin van de iris */
.page-loader.hidden .loader-pattern-bg {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* Iris transitie - ring wordt dunner (gat groeit van binnen naar buiten) */
@keyframes irisOut {
    0% {
        box-shadow: inset 0 0 0 150vmax #E73A56;
    }

    100% {
        box-shadow: inset 0 0 0 0 #E73A56;
        visibility: hidden;
    }
}

.loader-content {
    text-align: center;
    color: white;
    /* Transitie voor soepele fade-out tijdens iris animatie */
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
    /* Vaste hoogte zodat tekst en knop op dezelfde plek staan */
    position: relative;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader-text {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    display: inline-flex;
    gap: 3px;
    /* Positioneer absoluut zodat het de layout niet beïnvloedt */
    position: absolute;
}

.loader-text span {
    display: inline-block;
    animation: waveUp 1.5s infinite ease-in-out;
    animation-delay: calc(var(--index) * 0.05s);
}

/* START knop in loader */
.loader-start-button {
    margin-top: 0;
    padding: 14px 45px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #071040;
    background: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 3px;
    transition: transform 0.15s ease;
    /* Start verborgen - verschijnt met animatie */
    opacity: 0;
    transform: scale(0) rotate(-10deg);
}

/* Knop verschijnt met vrolijke bounce */
.loader-start-button.visible {
    animation: buttonBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes buttonBounceIn {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-15deg);
    }

    40% {
        opacity: 1;
        transform: scale(1.15) rotate(5deg);
    }

    65% {
        transform: scale(0.92) rotate(-3deg);
    }

    82% {
        transform: scale(1.04) rotate(1deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Subtiele wiggle animatie na verschijnen */
.loader-start-button.visible.wiggle {
    /* Bounce is al klaar - alleen wiggle nu */
    opacity: 1;
    animation: buttonWiggle 2.5s ease-in-out infinite;
}

@keyframes buttonWiggle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.02) rotate(-2deg);
    }

    75% {
        transform: scale(1.02) rotate(2deg);
    }
}

.loader-start-button:hover {
    transform: scale(1.05);
}

.loader-start-button:active {
    transform: scale(0.95);
}

/* Volwassenen knop in loader */
.loader-adults-button {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 24px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #1a1a2e;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.2s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease-out, visibility 0.4s ease-out;
    transform: translateY(-100px);
}

.loader-adults-button.visible {
    transform: translateY(0);
}

.loader-adults-button:hover {
    background: white;
    transform: scale(1.05);
}

.loader-adults-button.visible:hover {
    transform: translateY(0) scale(1.05);
}

/* Volwassenen-knop mobile override - MOET na base styles staan */
@media (max-width: 768px) {
    .loader-adults-button {
        top: 20px;
        left: 20px;
        height: 40px;
        padding: 0 16px;
        font-size: 0.6rem;
        border-radius: 20px;
    }
}

/* Geanimeerde ONZIN? achtergrond in loader */
.loader-pattern-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Onder de iris (z-index 10) zodat iris deze maskeert */
    z-index: 5;
}

.loader-brick-container {
    position: absolute;
    width: 200%;
    height: 200%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 20px 0;
}

.loader-brick-row {
    display: flex;
    gap: 50px;
    flex-shrink: 0;
}

.loader-brick-row:nth-child(odd) {
    margin-left: 130px;
}

.loader-onzin-item {
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0);
    transform-origin: center center;
}

.loader-onzin-item.visible {
    animation: loaderBrickPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes loaderBrickPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-10deg);
    }

    60% {
        opacity: 0.3;
        transform: scale(1.15) rotate(5deg);
    }

    100% {
        opacity: 0.25;
        transform: scale(1) rotate(0deg);
    }
}

/* Wave pulse animatie wanneer volwassenen modal opent */
.loader-onzin-item.wave-pulse {
    animation: loaderBrickWave 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes loaderBrickWave {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.3) rotate(8deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.loader-onzin-item svg {
    width: 180px;
    height: 43px;
}

/* Loader content boven het patroon */
.page-loader .loader-content {
    position: relative;
    z-index: 8;
    /* Boven patroon (5), onder iris (10) */
}

/* Vignette effect overlay voor loader */
.loader-pattern-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center,
            transparent 0%,
            rgba(231, 58, 86, 0.4) 40%,
            rgba(231, 58, 86, 0.85) 100%);
    pointer-events: none;
}

/* Voor volwassenen modal */
.adults-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF076;
    z-index: 10010;
    justify-content: center;
    align-items: center;
}

.adults-modal.active {
    display: flex;
}

.adults-modal-content {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 600px;
    width: 90%;
    text-align: left;
    position: relative;
    z-index: 1;
    transform: scale(0.9) translateY(20px) rotate(-2deg);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid #071040;
}

.adults-modal.active .adults-modal-content {
    transform: scale(1) translateY(0) rotate(0deg);
}

.adults-modal-content h2 {
    color: #071040;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.adults-modal-content p {
    color: #071040;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.adults-modal-note {
    color: #071040;
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 1.5rem;
}

/* Geanimeerde ONZIN? achtergrond - verborgen zodat loader patroon zichtbaar blijft */
.adults-pattern-bg {
    display: none;
}

.adults-brick-container {
    position: absolute;
    width: 200%;
    height: 200%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 20px 0;
}

.adults-brick-row {
    display: flex;
    gap: 50px;
    flex-shrink: 0;
}

.adults-brick-row:nth-child(odd) {
    margin-left: 130px;
}

.adults-onzin-item {
    flex-shrink: 0;
    opacity: 0.25;
    transform-origin: center center;
}

.adults-onzin-item svg {
    width: 180px;
    height: 43px;
}

/* Shake animaties voor ONZIN? elementen */
@keyframes adultsShake1 {

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

    25% {
        transform: rotate(-2deg) translateY(-3px);
    }

    50% {
        transform: rotate(-5deg) translateY(2px);
    }

    75% {
        transform: rotate(-3deg) translateY(-1px);
    }
}

@keyframes adultsShake2 {

    0%,
    100% {
        transform: rotate(3deg) translateX(0);
    }

    33% {
        transform: rotate(5deg) translateX(4px);
    }

    66% {
        transform: rotate(2deg) translateX(-2px);
    }
}

@keyframes adultsShake3 {

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

    50% {
        transform: rotate(-3deg) scale(0.98);
    }
}

@keyframes adultsShake4 {

    0%,
    100% {
        transform: rotate(4deg) translateY(0) translateX(0);
    }

    25% {
        transform: rotate(6deg) translateY(-4px) translateX(2px);
    }

    50% {
        transform: rotate(3deg) translateY(0) translateX(-3px);
    }

    75% {
        transform: rotate(5deg) translateY(3px) translateX(1px);
    }
}

@keyframes adultsShake5 {

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

    20% {
        transform: rotate(-4deg) translateX(-2px);
    }

    40% {
        transform: rotate(0deg) translateX(3px);
    }

    60% {
        transform: rotate(-3deg) translateX(-1px);
    }

    80% {
        transform: rotate(-1deg) translateX(2px);
    }
}

@keyframes adultsShake6 {

    0%,
    100% {
        transform: rotate(2deg) scale(1.05);
    }

    50% {
        transform: rotate(-1deg) scale(1.02);
    }
}

/* Vignette effect overlay */
.adults-pattern-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
            transparent 0%,
            rgba(231, 58, 86, 0.4) 40%,
            rgba(231, 58, 86, 0.85) 100%);
    pointer-events: none;
}

.close-adults-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: #071040;
    border: none;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 36px;
    cursor: pointer;
    color: white;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
}

.close-adults-modal:hover {
    background: #0a1a5c;
    transform: scale(1.1);
}

/* ==============================================
   5. LOGO & BRANDING
   ============================================== */

.site-logo {
    position: fixed;
    top: 30px;
    left: 30px;
    height: 50px;
    width: auto;
    z-index: 1000;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

/* Toon site logo alleen na laden */
body:not(.loading) .site-logo {
    opacity: 1;
    visibility: visible;
}

.site-logo:hover {
    opacity: 0.8;
}

/* Credit link - De Studio van Jeff (linksonder) */
#credit {
    position: fixed;
    bottom: 12px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: white;
    pointer-events: auto;
    z-index: 1000;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
}

body:not(.loading) #credit {
    opacity: 0.85;
    visibility: visible;
}

body:not(.loading) #credit:hover {
    opacity: 1;
    transform: translateY(-1px);
}

#credit img {
    height: 13px;
    width: auto;
    /* SVG in zijn originele kleuren (donkerblauw + wit) */
}

@media (max-width: 768px) {
    #credit {
        font-size: 8px;
        gap: 4px;
        bottom: 10px;
        left: 12px;
    }

    #credit img {
        height: 10px;
    }
}

/* Logo Modal */
.logo-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10050;
    justify-content: center;
    align-items: center;
}

.logo-modal.active {
    display: flex;
}

.logo-modal-content {
    background: white;
    border-radius: 24px;
    padding: 3rem;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 3px solid #071040;
}

.logo-modal-content p {
    font-weight: 700;
    font-size: 1.2rem;
    color: #222850;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.logo-modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.logo-modal-button {
    padding: 0.8rem 2rem;
    border: 2px solid #222850;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Gabarito', 'Arial', sans-serif;
}

.logo-modal-button.back {
    background: white;
    color: #222850;
}

.logo-modal-button.back:hover {
    background: #f5f5f5;
}

.logo-modal-button.continue {
    background: #222850;
    color: white;
}

.logo-modal-button.continue:hover {
    background: #1a1f3a;
}

/* ==============================================
   6. NAVIGATIE
   ============================================== */

.nav-button {
    position: fixed;
    top: 50%;
    background: #222850;
    color: white;
    border: 2px solid white;
    border-left: none;
    width: 60px;
    height: 120px;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.4s ease-out, background 0.3s ease;
    pointer-events: none;
    display: none;
    /* TIJDELIJK UITGESCHAKELD - navigatieknoppen verborgen */
    align-items: center;
    justify-content: center;
    padding: 0;
}

.nav-button svg {
    width: 50px;
    height: 50px;
    fill: white;
    pointer-events: none;
    /* Touch events gaan naar parent button */
}

.nav-button path {
    pointer-events: none;
    /* Touch events gaan naar parent button */
}

/* Linker navigatieknop - schuift van links in/uit */
.nav-left {
    left: 0;
    border-radius: 0 60px 60px 0;
    border-right: 2px solid white;
    transform: translateY(-50%) translateX(-100%);
    /* Verborgen links */
}

.nav-left svg {
    transform: translateX(-8px);
}

.nav-left.visible {
    transform: translateY(-50%) translateX(0);
    /* Zichtbaar */
    pointer-events: auto;
}

.nav-left:hover {
    background: #1a1f3a;
    transform: translateY(-50%) translateX(0) scale(1.05);
}

/* Rechter navigatieknop - schuift van rechts in/uit */
.nav-right {
    right: 0;
    border-left: 2px solid white;
    border-right: none;
    border-radius: 60px 0 0 60px;
    transform: translateY(-50%) translateX(100%);
    /* Verborgen rechts */
}

.nav-right svg {
    transform: translateX(8px);
}

.nav-right.visible {
    transform: translateY(-50%) translateX(0);
    /* Zichtbaar */
    pointer-events: auto;
}

.nav-right:hover {
    background: #1a1f3a;
    transform: translateY(-50%) translateX(0) scale(1.05);
}

/* Pulse animatie voor rechter knop op startscherm */
.nav-right.animate {
    animation: navPulse 2s ease-in-out infinite;
}

@keyframes navPulse {

    0%,
    100% {
        transform: translateY(-50%) translateX(0) scale(1);
    }

    50% {
        transform: translateY(-50%) translateX(0) scale(1.1);
    }
}

/* Ontdek-knop */
.discover-button {
    position: fixed;
    top: 30px;
    right: 170px;
    background: #222850;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
}

/* Toon discover button alleen na laden */
body:not(.loading) .discover-button {
    opacity: 1;
    visibility: visible;
}

.discover-button:hover {
    background: #E73A56;
}

/* ==============================================
   7. AUDIO CONTROLS
   ============================================== */

.audio-controls {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 10015;
    /* Boven de page-loader (10000) en adults-modal (10010) zodat buttons altijd zichtbaar zijn */
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: 15px;
}

.audio-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2ECC71;
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.audio-button:hover {
    background: #27AE60;
    transform: scale(1.1);
}

.audio-button.muted {
    background: #B82D44;
}

.audio-button.muted:hover {
    background: #9E2539;
}

/* Audio iconen SVG */
.audio-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.audio-icon-off {
    display: none;
}

.audio-button.muted .audio-icon-on {
    display: none;
}

.audio-button.muted .audio-icon-off {
    display: block;
}

/* Geluidsindicatoren voor herhalende verrassingen - verborgen */
.sound-indicator {
    display: none;
}

/* ==============================================
   7.5. FULLSCREEN KNOP
   ============================================== */

.fullscreen-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #222850;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    z-index: 10000;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

/* Toon fullscreen knop pas na laden (wanneer body.loading verdwijnt) */
body:not(.loading) .fullscreen-button {
    opacity: 1;
    pointer-events: auto;
}

.fullscreen-button:hover {
    background: #1a1f3a;
    transform: scale(1.1);
}

.fullscreen-icon {
    width: 24px;
    height: 24px;
}

.fullscreen-icon-exit {
    display: none;
}

.fullscreen-button.is-fullscreen .fullscreen-icon-enter {
    display: none;
}

.fullscreen-button.is-fullscreen .fullscreen-icon-exit {
    display: block;
}

/* ==============================================
   8. MAGISCHE KNOP
   ============================================== */

.magic-button {
    position: fixed;
    bottom: 0;
    left: 50%;
    right: auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.4s ease-out;
    z-index: 10001;
    transform: translateX(-50%) translateY(100%);
    /* Verborgen onder scherm, gecentreerd */
    pointer-events: none;
}

.magic-button.visible {
    transform: translateX(-50%) translateY(0);
    /* Zichtbaar, gecentreerd */
    pointer-events: auto;
}

.magic-button img {
    display: block;
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 200px;
    pointer-events: none;
    /* Clicks gaan naar de button, niet de image */
}

/* Magische knop status - standaard: uitgeschakeld */
.magic-button .disabled-image {
    display: block !important;
}

.magic-button .allowed-normaal-image,
.magic-button .allowed-hover-image,
.magic-button .allowed-clicked-image {
    display: none !important;
}

/* Toegestane status - toon allowed-normaal */
.magic-button.state-allowed .disabled-image {
    display: none !important;
}

.magic-button.state-allowed .allowed-normaal-image {
    display: block !important;
}

.magic-button.state-allowed .allowed-hover-image,
.magic-button.state-allowed .allowed-clicked-image {
    display: none !important;
}

/* Hover-status (alleen desktop) */
.magic-button.state-allowed:hover .allowed-normaal-image {
    display: none !important;
}

.magic-button.state-allowed:hover .allowed-hover-image {
    display: block !important;
}

.magic-button.state-allowed:hover .allowed-clicked-image {
    display: none !important;
}

/* Geklikte status */
.magic-button.state-clicked .allowed-normaal-image,
.magic-button.state-clicked .allowed-hover-image {
    display: none;
}

.magic-button.state-clicked .allowed-clicked-image {
    display: block;
}

/* Uitgeschakelde status - voorkom klikken */
.magic-button.state-disabled {
    pointer-events: none;
    cursor: default;
}

.magic-button.state-disabled .disabled-image {
    display: block;
}

.magic-button.state-disabled .allowed-normaal-image,
.magic-button.state-disabled .allowed-hover-image,
.magic-button.state-disabled .allowed-clicked-image {
    display: none;
}

.magic-button.state-allowed,
.magic-button.state-clicked {
    pointer-events: auto;
    cursor: pointer;
}

.magic-button.state-clicked .disabled-image {
    display: none;
}

/* ==============================================
   9. SEGMENTEN & KARAKTERS
   ============================================== */

/* Basisstijl segment */
.segment {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    flex-shrink: 0;
    position: relative;
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* overflow: visible - karakters mogen uitsteken */
}

/* Openingsscherm */
.segment-opening {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: transparent;
    z-index: 200;
    /* Boven bosjes linksonder (150) */
    overflow: visible;
    pointer-events: none;
}

.segment-opening .sky,
.segment-opening .ground,
.segment-opening .ground::before {
    display: none !important;
}

.opening-background {
    display: none !important;
    /* Opening segment is nu transparant - panorama achtergrond loopt eronder */
}

/* Protest stok */
.protest-stick {
    position: absolute;
    bottom: auto;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100vh);
    width: 40px;
    background: #222850;
    z-index: 160;
    /* Boven bosjes linksonder (150) */
    border-radius: 5px 5px 0 0;
    transition: transform 0.8s ease-out;
    height: 100vh;
    height: 100dvh;
    opacity: 1;
    transition-delay: 0s;
    pointer-events: auto;
}

.protest-stick.animate-in {
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}

.protest-stick.animate-in.animation-complete {
    transition: transform 0.8s ease-out, top 0.3s ease-out, height 0.3s ease-out;
}

/* Protest board zakt weg bij scrollen */
.protest-stick.sunk {
    transform: translateX(-50%) translateY(100vh) !important;
    transition: transform 0.6s ease-in !important;
}

.opening-content.sunk {
    transform: translateY(100vh) !important;
    transition: transform 0.6s ease-in !important;
}

/* Intro blur overlay */
.intro-blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 13;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
}

.intro-blur-overlay.animate-in {
    opacity: 1;
    pointer-events: auto;
}

.intro-blur-overlay.sunk {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-in;
}

/* Opening content */
.opening-content {
    background: #FFF5E8;
    padding: 3rem;
    border-radius: 18px 24px 20px 26px;
    border: 4px solid #222850;
    max-width: 700px;
    width: 700px;
    text-align: center;
    position: relative;
    z-index: 161;
    /* Boven protest-stick (160) en bosjes (150) */
    transform: translateY(100vh);
    transition: transform 0.8s ease-out;
    margin: 0 auto;
    pointer-events: auto;
}

.opening-content.animate-in {
    transform: translateY(0);
}

/* Geel huis */
.yellow-house {
    position: absolute;
    left: -10px;
    bottom: 10vh;
    width: 60vw;
    height: 100vh;
    height: 100dvh;
    background: #FFE082;
    border: 1px solid #000000;
    z-index: 5;
}

.house-graffiti {
    position: absolute;
    left: calc(2% + 20px);
    bottom: calc(35vh + 40px);
    width: 25vw;
    height: auto;
    z-index: 6;
    transform: rotate(-5deg);
}

/* Vliegend vogeltje */
/* z-index 30 = BOVEN surprises (25) zodat vogels met boeken zichtbaar zijn */
.flying-bird {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 30;
    opacity: 1;
    pointer-events: none;
    will-change: transform, offset-distance;
    visibility: hidden;
    left: 0;
    top: 0;
    offset-path: path('M -100,450 C 300,420 500,380 700,320 C 760,300 800,220 760,160 C 720,100 650,130 690,200 C 730,270 820,300 950,260 C 1200,180 1600,80 2200,-150');
    offset-rotate: auto;
}

.flying-bird.animate {
    visibility: visible;
    animation: birdFlight 2.5s linear forwards;
}

/* Route 2: Hoog boog van links naar rechts */
.flying-bird.route-2 {
    offset-path: path('M -100,300 C 100,100 300,50 500,80 C 700,110 900,200 1100,150 C 1300,100 1500,50 1800,-100');
}

/* Route 3: Laag zigzag van links naar rechts */
.flying-bird.route-3 {
    offset-path: path('M -100,500 C 200,450 350,520 500,480 C 650,440 800,510 950,470 C 1100,430 1300,380 1600,300');
}

/* Route 4: Rechts naar links - hoog */
.flying-bird.route-4 {
    offset-path: path('M 1600,100 C 1300,80 1100,150 900,120 C 700,90 500,180 300,150 C 100,120 -50,200 -150,180');
    offset-rotate: 0deg;
    /* Geen auto-rotate voor R2L */
}

/* Route 5: Rechts naar links - midden met looping */
.flying-bird.route-5 {
    offset-path: path('M 1600,350 C 1400,320 1200,280 1000,320 C 800,360 700,280 600,320 C 500,360 300,400 100,350 C -50,310 -150,280 -200,300');
    offset-rotate: 0deg;
}

/* Route 6: Rechts naar links - laag zigzag */
.flying-bird.route-6 {
    offset-path: path('M 1600,500 C 1400,450 1200,520 1000,470 C 800,420 600,490 400,440 C 200,390 0,450 -150,400');
    offset-rotate: 0deg;
}

/* Spiegelen voor rechts-naar-links routes (route 4, 5, 6) */
.flying-bird.mirrored .bird-frame {
    transform: scaleX(-1);
}

/* Langere animatie voor sommige routes */
.flying-bird.animate.route-2 {
    animation: birdFlight 3s linear forwards;
}

.flying-bird.animate.route-3 {
    animation: birdFlight 2.8s linear forwards;
}

.flying-bird.animate.route-4,
.flying-bird.animate.route-5,
.flying-bird.animate.route-6 {
    animation: birdFlight 3s linear forwards;
}

/* Vogels met boeken vliegen veel langzamer (zwaar boek!) */
.flying-bird.animate.carrying-book {
    animation: birdFlight 6s linear forwards;
}

.flying-bird.animate.carrying-book.route-2 {
    animation: birdFlight 7s linear forwards;
}

.flying-bird.animate.carrying-book.route-3 {
    animation: birdFlight 6.5s linear forwards;
}

.flying-bird.animate.carrying-book.route-4,
.flying-bird.animate.carrying-book.route-5,
.flying-bird.animate.carrying-book.route-6 {
    animation: birdFlight 7s linear forwards;
}

.bird-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.flying-bird.animate .bird-frame-1 {
    animation: birdFlap1 0.2s steps(1) infinite;
}

.flying-bird.animate .bird-frame-2 {
    animation: birdFlap2 0.2s steps(1) infinite;
}

/* Fallback voor browsers zonder offset-path ondersteuning */
@supports not (offset-path: path('M 0,0')) {
    .flying-bird {
        left: -100px;
        top: 45vh;
    }

    .flying-bird.animate {
        animation: birdFlightFallback 2.5s linear forwards;
    }
}

.bird-carried-book img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

/* Tekst stijlen */
.logo {
    font-size: 3rem;
    font-weight: 800;
    color: #2C3E50;
    margin-bottom: 1.5rem;
}

.main-text {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #222850;
    margin-bottom: 2rem;
    font-weight: 500;
}

.main-text strong:first-of-type {
    font-size: 1.92rem;
}

.intro-text-svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem auto 0;
}

.instruction-text {
    font-style: italic;
    font-size: 1rem;
    color: #222850;
    margin-top: 1.5rem;
    text-align: center;
}

/* Karakter segment */
.character-segment {
    position: relative;
    width: 500px;
    min-width: 500px;
    height: 100vh;
    height: 100dvh;
    z-index: 10;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    display: block;
    box-sizing: border-box;
    /* overflow: visible - karakters mogen uitsteken */
}

/* Feature segment (Radio) */
.feature-segment {
    position: relative;
    width: 500px;
    min-width: 500px;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* overflow: visible - content mag uitsteken */
}

.radio-container {
    position: absolute;
    /* Met 100vh radio: bottom 0 zodat deze op de grond staat */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}

.radio-image {
    position: relative;
    /* 100vh = zelfde hoogte als achtergrond, radio schaalt automatisch mee */
    height: 100vh;
    height: 100dvh;
    width: auto;
    margin: 0 auto;
}

.radio-image img {
    height: 100%;
    width: auto;
    display: block;
}

.radio-image .normal-image {
    position: relative;
    z-index: 1;
    opacity: 1;
    will-change: opacity;
}

.radio-image .hover-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    will-change: opacity;
    pointer-events: none;
}

.radio-image:hover .normal-image,
.radio-image:has(.radio-clickable-area:hover) .normal-image {
    opacity: 0;
}

.radio-image:hover .hover-image,
.radio-image:has(.radio-clickable-area:hover) .hover-image {
    opacity: 1;
}

.radio-clickable-area {
    position: absolute;
    rotate: 0deg;
    top: 69.5%;
    left: 25.5%;
    width: 54%;
    height: 10%;
    bottom: auto;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    outline: none;
}

/* Radio klik animatie - subtiel springen en schudden */
.radio-image {
    transform-origin: center bottom;
}

.radio-image.radio-clicked {
    animation: radioBounce 0.4s ease-out;
}

@keyframes radioBounce {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    15% {
        transform: translateY(-12px) rotate(-1.5deg);
    }
    30% {
        transform: translateY(-8px) rotate(1deg);
    }
    45% {
        transform: translateY(-10px) rotate(-0.8deg);
    }
    60% {
        transform: translateY(-4px) rotate(0.5deg);
    }
    75% {
        transform: translateY(-2px) rotate(-0.3deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Spacer segment */
.spacer-segment {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    flex-shrink: 0;
    position: relative;
    display: flex;
    background: transparent;
    width: var(--spacer-width, 20vw);
    box-sizing: border-box;
    /* Surprises mogen buiten de spacer breedte uitsteken */
    overflow: visible;
}

/* Spacer tussen Subwoolfer 1 en 2 - kleinere tussenruimte */
.segment:has(.subwoolfer-1-container)+.spacer-segment {
    width: 0 !important;
    min-width: 0 !important;
}

/* Laatste spacer (vóór end-segment) - extra breed voor visuele afronding */
.spacer-segment:has(+ .segment-end) {
    width: 20vw !important;
    min-width: 20vw !important;
}

/* EIND segment */
.segment-end {
    width: 10vw;
    min-width: 10vw !important;
    max-width: 10vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    background: transparent;
    pointer-events: none;
}

/* Op mobile: kleinere eind-segmenten */
@media (max-width: 768px) {
    .segment-end {
        width: 5vw !important;
        min-width: 5vw !important;
        max-width: 5vw !important;
    }

    .spacer-segment:has(+ .segment-end) {
        width: 10vw !important;
        min-width: 10vw !important;
    }
}

/* Laatste segment krijgt extra ruimte, BEHALVE het end-segment */
.segment:last-child:not(.segment-end) {
    min-width: 100vw;
    padding-right: 0;
}

/* ==============================================
   10. KARAKTER AFBEELDINGEN
   ============================================== */

.character-container {
    position: absolute;
    /* Met 100vh karakters: bottom 0 zodat ze op de grond staan */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    /* Geen outer glow bij klikken/verslepen */
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.character-container:focus,
.character-container:active,
.character-container *:focus,
.character-container *:active {
    outline: none;
    box-shadow: none;
}

/* Mickey Mops naar rechts verschoven */
.mickeymops-container {
    left: 70%;
}

.character-image {
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
    /* 100vh = zelfde hoogte als achtergrond, karakters schalen automatisch mee */
    height: 100vh;
    height: 100dvh;
    width: auto;
    transform-origin: center bottom;
    background: transparent;
    /* Geen outer glow */
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.character-image img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    /* Geen outer glow */
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

.character-image img.loaded {
    width: 100%;
}

.character-image .hover-image {
    display: none;
}

.character-image .normal-image {
    transition: none;
}

.character-image:hover .normal-image {
    display: none;
}

.character-image:hover .hover-image {
    display: block;
}

/* Touch device hover simulatie */
.character-image.touch-hover-active .normal-image {
    display: none;
}

.character-image.touch-hover-active .hover-image {
    display: block;
}

.radio-image.touch-hover-active .normal-image {
    opacity: 0;
}

.radio-image.touch-hover-active .hover-image {
    opacity: 1;
}

/* Karakterspecifieke hoogte - niet meer nodig, alle karakters zijn nu 100vh */
/* Karakterafbeeldingen moeten 1080px hoog zijn (zelfde als achtergrond) */

/* Karakter animaties */
.character-image.bounce {
    animation: bounce 2s infinite ease-in-out;
}

.character-image.sway {
    animation: sway 3s infinite ease-in-out;
}

.character-image.wiggle {
    animation: wiggle 2.5s infinite ease-in-out;
}

/* Transparante klikvlakken voor karakterborden */
.sign-click-area {
    position: absolute;
    cursor: pointer;
    z-index: 15;
    transition: all 0.3s ease;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 10px;
}

.sign-click-area:hover {
    cursor: zoom-in;
}

/* ==============================================
   CLICK AREA POSITIONING - JAVASCRIPT CONTROLLED
   ==============================================
   De volgende karakters worden dynamisch gepositioneerd door JavaScript
   (main.js - CLICK_AREA_CONFIG) zodat click areas correct schalen
   bij viewport hoogte wijzigingen:
   - mickeymops
   - guard
   - getsie
   - scheidoma

   CSS fallback waarden (worden overschreven door JS):
*/
.mickeymops-container .sign-click-area,
.mickeymops-container .character-click-area,
.guard-container .sign-click-area,
.guard-container .character-click-area,
.getsie-container .sign-click-area,
.getsie-container .character-click-area,
.scheidoma-container .sign-click-area,
.scheidoma-container .character-click-area {
    /* Initiële waarden - JS overschrijft deze bij laden en resize */
    top: 0;
    left: 0;
    width: 50%;
    height: 10%;
}

.siem-container .sign-click-area {
    position: absolute;
    rotate: -17deg;
    top: 19%;
    left: 32%;
    width: 59%;
    height: 11%;
    cursor: pointer;
    z-index: 20;
}

.siem-container .character-click-area {
    rotate: 0deg;
    top: 34.5%;
    left: 15.5%;
    width: 59%;
    height: 46%;
}

.killerkaren-container .sign-click-area,
.subwoolfer-1-container .sign-click-area,
.subwoolfer-2-container .sign-click-area,
.subwoolfer-oma-container .sign-click-area,
.vriendschap-1-container .sign-click-area,
.vriendschap-2-container .sign-click-area {
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 50px;
}

/* Tacomonster click areas */
.tacomonster-1-container .sign-click-area {
    rotate: -23deg;
    top: 50%;
    left: 58.5%;
    width: 18%;
    height: 26%;
}

.tacomonster-1-container .character-click-area {
    rotate: 0deg;
    top: 49%;
    left: 28.5%;
    width: 31%;
    height: 37%;
}

/* Vijver-2 klik areas voor alle karakters */
/* Jongetje (hoofdkarakter) - gebruikt .jongetje-click-area */
.vijver-2-container .jongetje-click-area {
    position: absolute;
    rotate: 0deg;
    top: 55%;
    left: 61.5%;
    width: 19%;
    height: 24%;
    z-index: 14;
    pointer-events: auto;
    cursor: pointer;
}

.vijver-2-container .sign-click-area {
    rotate: 9deg;
    top: 46%;
    left: 65.5%;
    width: 29.8%;
    height: 10%;
}

/* Vijver-2: afbeelding is breder (meerdere dieren) */
/* Geen max-width beperking zodat de volledige afbeelding zichtbaar is */
.vijver-2-container .character-image {
    height: 100vh;
    height: 100dvh;
    overflow: visible;
}

/* Vijver-2 segment breder maken voor bredere afbeelding (807px origineel) */
.character-segment:has(.vijver-2-container) {
    width: 900px;
    min-width: 900px;
}

/* Vijver segment wrapper - container voor vijver + aparte dieren */
.vijver-segment-wrapper {
    position: relative;
}

/* Aparte zwiepbare dieren bij de vijver - alleen zichtbaar in galaxy mode */
.vijver-dier-container {
    position: absolute;
    cursor: grab;
    z-index: 15;
    transition: transform 0.15s ease-out, opacity 0.5s ease;
    /* Standaard verborgen - alleen zichtbaar in galaxy mode */
    opacity: 0;
    pointer-events: none;
}

/* Alleen zichtbaar in galaxy mode */
body.galaxy-mode .vijver-dier-container {
    opacity: 1;
    pointer-events: auto;
}

.vijver-dier-container:hover {
    transform: scale(1.05);
}

.vijver-dier-container:active {
    cursor: grabbing;
}

.vijver-dier-container .character-image {
    height: auto;
    width: 100%;
}

.vijver-dier-container .character-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Voorkom flikkering bij hover - vijver dieren hebben geen hover-image */
.vijver-dier-container .character-image:hover .normal-image,
.vijver-dier-container .character-image.touch-hover-active .normal-image {
    display: block !important;
}

/* Hond positie - linksonder */
.vijver-hond-container {
    bottom: 12%;
    left: 0%;
    width: 140px;
}

/* Kip positie - rechtsonder */
.vijver-kip-container {
    bottom: 10%;
    right: 3%;
    width: 100px;
}

/* Rups positie - helemaal rechtsonder */
.vijver-rups-container {
    bottom: 2%;
    right: 0%;
    width: 110px;
}

/* ==============================================
   SUFMUIS - Vliegend karakter met state system
   ============================================== */

/* Sufmuis segment smaller maken - negatieve margin voor compacter layout */
.character-segment:has(.sufmuis-container) {
    width: 280px;
    min-width: 280px;
    margin-left: -80px;
    margin-right: -80px;
}

/* Subwoolfer-2 dichter bij Subwoolfer-1 */
.character-segment:has(.subwoolfer-2-container) {
    margin-left: -120px;
}

.sufmuis-container {
    /* Subtiele floating animatie - altijd actief */
    animation: sufmuisFloat 3s ease-in-out infinite;
}

/* Floating animatie - subtiel op en neer */
@keyframes sufmuisFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-15px);
    }
}

/* Sufmuis klik areas */
.sufmuis-container .character-click-area {
    position: absolute;
    top: 40%;
    left: 30%;
    width: 40%;
    height: 35%;
    z-index: 14;
    pointer-events: auto;
    cursor: pointer;
}

.sufmuis-container .sign-click-area {
    width: 0;
    height: 0;
    display: none;
}

/* STATE SYSTEM - verberg alle states behalve de actieve */
.sufmuis-container .state-punk,
.sufmuis-container .state-galaxy,
.sufmuis-container .state-galaxy-punk {
    display: none !important;
}

/* Normale staat - standaard zichtbaar */
.sufmuis-container .state-normal {
    display: block;
}

/* Punk staat - zichtbaar wanneer .punk-mode actief */
.sufmuis-container.punk-mode .state-normal {
    display: none !important;
}

.sufmuis-container.punk-mode .state-punk {
    display: block !important;
}

/* Galaxy staat - zichtbaar in galaxy mode */
body.galaxy-mode .sufmuis-container .state-normal,
body.galaxy-mode .sufmuis-container .state-punk {
    display: none !important;
}

body.galaxy-mode .sufmuis-container .state-galaxy {
    display: block !important;
}

/* Galaxy + Punk staat */
body.galaxy-mode .sufmuis-container.punk-mode .state-galaxy {
    display: none !important;
}

body.galaxy-mode .sufmuis-container.punk-mode .state-galaxy-punk {
    display: block !important;
}

/* Hover gedrag behouden voor alle states */
.sufmuis-container .character-image .normal-image {
    display: block;
}

.sufmuis-container .character-image .hover-image {
    display: none;
}

.sufmuis-container .character-image:hover .normal-image,
.sufmuis-container .character-image.touch-hover-active .normal-image {
    display: none;
}

.sufmuis-container .character-image:hover .hover-image,
.sufmuis-container .character-image.touch-hover-active .hover-image {
    display: block;
}

/* Zorg dat state classes prioriteit hebben */
.sufmuis-container .character-image:hover .state-normal.normal-image,
.sufmuis-container .character-image.touch-hover-active .state-normal.normal-image {
    display: none;
}

.sufmuis-container .character-image:hover .state-normal.hover-image,
.sufmuis-container .character-image.touch-hover-active .state-normal.hover-image {
    display: block;
}

/* Punk state hover - !important nodig om de .state-punk { display: block !important } te overrulen */
.sufmuis-container.punk-mode .character-image .state-punk.normal-image {
    display: block !important;
}

.sufmuis-container.punk-mode .character-image .state-punk.hover-image {
    display: none !important;
}

.sufmuis-container.punk-mode .character-image:hover .state-punk.normal-image,
.sufmuis-container.punk-mode .character-image.touch-hover-active .state-punk.normal-image {
    display: none !important;
}

.sufmuis-container.punk-mode .character-image:hover .state-punk.hover-image,
.sufmuis-container.punk-mode .character-image.touch-hover-active .state-punk.hover-image {
    display: block !important;
}

/* Galaxy state hover - !important nodig om de .state-galaxy { display: block !important } te overrulen */
body.galaxy-mode .sufmuis-container .character-image .state-galaxy.normal-image {
    display: block !important;
}

body.galaxy-mode .sufmuis-container .character-image .state-galaxy.hover-image {
    display: none !important;
}

body.galaxy-mode .sufmuis-container .character-image:hover .state-galaxy.normal-image,
body.galaxy-mode .sufmuis-container .character-image.touch-hover-active .state-galaxy.normal-image {
    display: none !important;
}

body.galaxy-mode .sufmuis-container .character-image:hover .state-galaxy.hover-image,
body.galaxy-mode .sufmuis-container .character-image.touch-hover-active .state-galaxy.hover-image {
    display: block !important;
}

/* Galaxy punk state hover - !important nodig om de .state-galaxy-punk { display: block !important } te overrulen */
body.galaxy-mode .sufmuis-container.punk-mode .character-image .state-galaxy-punk.normal-image {
    display: block !important;
}

body.galaxy-mode .sufmuis-container.punk-mode .character-image .state-galaxy-punk.hover-image {
    display: none !important;
}

body.galaxy-mode .sufmuis-container.punk-mode .character-image:hover .state-galaxy-punk.normal-image,
body.galaxy-mode .sufmuis-container.punk-mode .character-image.touch-hover-active .state-galaxy-punk.normal-image {
    display: none !important;
}

body.galaxy-mode .sufmuis-container.punk-mode .character-image:hover .state-galaxy-punk.hover-image,
body.galaxy-mode .sufmuis-container.punk-mode .character-image.touch-hover-active .state-galaxy-punk.hover-image {
    display: block !important;
}

/* Punk transformatie animatie */
.sufmuis-container.transforming {
    animation: sufmuisPunkTransform 0.5s ease-out;
}

@keyframes sufmuisPunkTransform {
    0% {
        transform: translateX(-50%) scale(1) rotate(0deg);
        filter: brightness(1);
    }

    50% {
        transform: translateX(-50%) scale(1.2) rotate(10deg);
        filter: brightness(1.5) hue-rotate(30deg);
    }

    100% {
        transform: translateX(-50%) scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

/* Vriendschap-1 klik areas */
.vriendschap-1-container .sign-click-area {
    rotate: 15deg;
    top: 30%;
    left: 67%;
    width: 39%;
    height: 11%;
}

.vriendschap-1-container .vriendschap1-karakter1-click-area {
    position: absolute;
    rotate: -15deg;
    top: 32%;
    left: 33%;
    width: 20%;
    height: 14%;
    z-index: 14;
    pointer-events: auto;
    cursor: pointer;
}

.vriendschap-1-container .vriendschap1-karakter2-click-area {
    position: absolute;
    rotate: -16deg;
    top: 45.5%;
    left: 29%;
    width: 39%;
    height: 28%;
    z-index: 14;
    pointer-events: auto;
    cursor: pointer;
}

/* Tacomonster-1 segment */
.character-segment:has(.tacomonster-1-container) {
    width: 650px;
    min-width: 650px;
}

/* Tacomonster: altijd onderaan het scherm */
.tacomonster-1-container {
    bottom: 0 !important;
}

/* ==============================================
   TACOMONSTER-1 - Galaxy state system
   ============================================== */

/* STATE SYSTEM - verberg galaxy states standaard */
.tacomonster-1-container .state-galaxy {
    display: none !important;
}

/* Normale staat - standaard zichtbaar */
.tacomonster-1-container .state-normal {
    display: block;
}

/* Galaxy staat - zichtbaar in galaxy mode */
body.galaxy-mode .tacomonster-1-container .state-normal {
    display: none !important;
}

body.galaxy-mode .tacomonster-1-container .state-galaxy {
    display: block !important;
}

/* Hover gedrag behouden voor alle states */
.tacomonster-1-container .character-image .normal-image {
    display: block;
}

.tacomonster-1-container .character-image .hover-image {
    display: none;
}

.tacomonster-1-container .character-image:hover .normal-image,
.tacomonster-1-container .character-image.touch-hover-active .normal-image {
    display: none;
}

.tacomonster-1-container .character-image:hover .hover-image,
.tacomonster-1-container .character-image.touch-hover-active .hover-image {
    display: block;
}

/* Normale state hover */
.tacomonster-1-container .character-image:hover .state-normal.normal-image,
.tacomonster-1-container .character-image.touch-hover-active .state-normal.normal-image {
    display: none;
}

.tacomonster-1-container .character-image:hover .state-normal.hover-image,
.tacomonster-1-container .character-image.touch-hover-active .state-normal.hover-image {
    display: block;
}

/* Galaxy state hover - !important nodig om de .state-galaxy { display: block !important } te overrulen */
body.galaxy-mode .tacomonster-1-container .character-image .state-galaxy.normal-image {
    display: block !important;
}

body.galaxy-mode .tacomonster-1-container .character-image .state-galaxy.hover-image {
    display: none !important;
}

body.galaxy-mode .tacomonster-1-container .character-image:hover .state-galaxy.normal-image,
body.galaxy-mode .tacomonster-1-container .character-image.touch-hover-active .state-galaxy.normal-image {
    display: none !important;
}

body.galaxy-mode .tacomonster-1-container .character-image:hover .state-galaxy.hover-image,
body.galaxy-mode .tacomonster-1-container .character-image.touch-hover-active .state-galaxy.hover-image {
    display: block !important;
}

/* Vriendschap-1 segment - afbeelding is 1422x2158px (711px bij 100vh) */
.character-segment:has(.vriendschap-1-container) {
    width: 750px;
    min-width: 750px;
}

/* ==============================================
   VRIENDSCHAP-1 - Galaxy state system
   ============================================== */

/* STATE SYSTEM - verberg galaxy states standaard */
.vriendschap-1-container .state-galaxy {
    display: none !important;
}

/* Normale staat - standaard zichtbaar */
.vriendschap-1-container .state-normal {
    display: block;
}

/* Galaxy staat - zichtbaar in galaxy mode */
body.galaxy-mode .vriendschap-1-container .state-normal {
    display: none !important;
}

body.galaxy-mode .vriendschap-1-container .state-galaxy {
    display: block !important;
}

/* Hover gedrag behouden voor alle states */
.vriendschap-1-container .character-image .normal-image {
    display: block;
}

.vriendschap-1-container .character-image .hover-image {
    display: none;
}

.vriendschap-1-container .character-image:hover .normal-image,
.vriendschap-1-container .character-image.touch-hover-active .normal-image {
    display: none;
}

.vriendschap-1-container .character-image:hover .hover-image,
.vriendschap-1-container .character-image.touch-hover-active .hover-image {
    display: block;
}

/* Normale state hover */
.vriendschap-1-container .character-image:hover .state-normal.normal-image,
.vriendschap-1-container .character-image.touch-hover-active .state-normal.normal-image {
    display: none;
}

.vriendschap-1-container .character-image:hover .state-normal.hover-image,
.vriendschap-1-container .character-image.touch-hover-active .state-normal.hover-image {
    display: block;
}

/* Galaxy state hover - !important nodig om de .state-galaxy { display: block !important } te overrulen */
body.galaxy-mode .vriendschap-1-container .character-image .state-galaxy.normal-image {
    display: block !important;
}

body.galaxy-mode .vriendschap-1-container .character-image .state-galaxy.hover-image {
    display: none !important;
}

body.galaxy-mode .vriendschap-1-container .character-image:hover .state-galaxy.normal-image,
body.galaxy-mode .vriendschap-1-container .character-image.touch-hover-active .state-galaxy.normal-image {
    display: none !important;
}

body.galaxy-mode .vriendschap-1-container .character-image:hover .state-galaxy.hover-image,
body.galaxy-mode .vriendschap-1-container .character-image.touch-hover-active .state-galaxy.hover-image {
    display: block !important;
}

/* Karakter klik areas - voor het openen van de karakter modal */
.character-click-area {
    position: absolute;
    cursor: pointer;
    z-index: 14;
    transition: all 0.3s ease;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 10px;
    /* Default: vul de hele character-image */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.character-click-area:hover {
    cursor: pointer;
}

/* ==============================================
   11. DECORATIE ELEMENTEN
   ============================================== */

.decoration {
    position: absolute;
    pointer-events: none;
    z-index: 5;
}

.decoration img {
    display: block;
    height: 100%;
    width: auto;
    pointer-events: none;
}

/* Boom-afbeeldingen 100vh zodat ze automatisch meeschalen met viewport */
/* Afbeelding is 2160px hoog (2x retina), 100vh zorgt voor automatische schaling */
.decoration img[src*="boom"] {
    height: 100vh;
    height: 100dvh;
}

/* Appelbomen (images/boom.png) verborgen */
.decoration img[src*="images/boom.png"] {
    display: none !important;
}

/* Bomen niet schalen met responsive transforms - ze schalen via 100vh */
/* Bottom: 0 zodat de boom op de grond staat */
/* Height: auto overschrijft inline height: 70vh op de parent */
.decoration:has(img[src*="boom"]):not(.boom-hoek-links) {
    transform: none !important;
    bottom: 0 !important;
    top: auto !important;
    height: auto !important;
}

/* Voorgrond hoek decoraties - in de scene, scrollen mee, boven karakters */
.decoration.foreground-corner {
    position: absolute;
    z-index: 200;
    /* Boven segment-opening (100), karakters en veertjes (140) */
    pointer-events: none;
}

.decoration.foreground-corner.boom-hoek-links {
    top: 0;
    left: 0;
}

.decoration.foreground-corner.bosjes-linksonder {
    bottom: 0;
    left: 0;
}

/* Speeltoestellen onderaan - vast in de scene, geen parallax */
.decoration.speeltoestellen-onderaan {
    position: absolute;
    bottom: 0;
    left: 1100px;
    /* Ruimte na de bosjes linksonder */
    z-index: 200;
    /* Boven veertjes (140) */
}

/* Bosjes halverwege - na de speeltoestellen */
.decoration.bosjes-halverwege {
    position: absolute;
    bottom: 0;
    left: 2700px;
    /* Tussenruimte na speeltoestellen */
    z-index: 200;
    /* Boven veertjes (140) */
}

/* Bosje voorgrond bij Subwoolfer 2 - buiten character-segment voor hogere z-index */
.decoration.bosje-voorgrond-subwoolfer {
    position: absolute;
    bottom: 0;
    left: 3800px;
    /* Positie bij Subwoolfer 2 */
    z-index: 200;
    /* Boven veertjes (140) */
}

.decoration.foreground-corner img {
    height: auto !important;
    max-height: 35vh;
}

/* Voorgrond hoeken op mobile */
@media (max-width: 768px) {

    /* Bosje voorgrond verbergen op mobile */
    .decoration.bosje-voorgrond-subwoolfer {
        display: none;
    }

    /* Bosjes halverwege breder en meer naar rechts op mobile */
    .decoration.bosjes-halverwege {
        left: 2900px;
        /* Meer naar rechts */
    }

    .decoration.bosjes-halverwege img {
        max-height: 25vh !important;
        /* Iets breder/groter */
    }

    .decoration.bosje-voorgrond img {
        max-height: 50vh !important;
    }

    /* Hoek decoraties kleiner op mobile */
    .decoration.foreground-corner img {
        max-height: 25vh !important;
    }

    /* Speeltoestellen groter op mobile */
    .decoration.speeltoestellen-onderaan img {
        max-height: 35vh !important;
    }
}

.decoration.flip-x img {
    transform: scaleX(-1);
}

/* Z-index lagen */
.decoration.layer-background {
    z-index: 2;
}

.decoration.layer-behind-characters {
    z-index: 8;
}

.decoration.layer-front-characters {
    z-index: 12;
}

.decoration.layer-foreground {
    z-index: 20;
}

.decoration.no-scale {
    transform: none !important;
}

.decoration.hide-mobile {
    display: block;
}

.decoration.show-mobile-only {
    display: none;
}

/* ==============================================
   12. VERRASSINGEN
   ============================================== */

.hidden-surprise {
    position: absolute;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s ease;
    z-index: 25;
    pointer-events: none;
    /* Surprises mogen buiten spacer uitsteken en hun eigen grootte hebben */
    overflow: visible;
}

.hidden-surprise.revealed {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.hidden-surprise img {
    /* Afbeelding volgt de parent width (gedefinieerd per surprise class) */
    width: 100%;
    height: auto;
    max-width: none;
}

/* Paal surprise - 100vh hoog, geen klik-effect */
.surprise-paal {
    top: -50px;
    /* 50px omhoog */
    /* Rechts uitlijnen zodat paal naar LINKS uitsteekt (weg van radio) */
    /* Op desktop zijn spacers maar 10px breed - paal moet links uitsteken */
    left: auto;
    right: 0;
    translate: 0 0;
    width: 60px;
    height: 100vh;
    height: 100dvh;
    /* Override de standaard scale transition - paal verschijnt direct (POEF) */
    transition: opacity 0.3s ease;
}

/* Paal revealed: geen scale animatie, alleen opacity */
.surprise-paal.revealed {
    opacity: 1;
    transform: none;
    /* Dit overschrijft alleen transform, niet translate */
}

/* Paal: GEEN animatie, ook niet in galaxy mode - staat altijd stil */
.surprise-paal,
body.galaxy-mode .surprise-paal,
body.galaxy-mode .spacer-segment .surprise-paal {
    animation: none !important;
}

.surprise-paal img {
    width: auto;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
}

/* Paal groter in galaxy mode */
body.galaxy-mode .surprise-paal {
    width: 150px !important;
    height: 100vh !important;
    height: 100dvh !important;
}

body.galaxy-mode .surprise-paal img {
    width: auto !important;
    height: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
}

/* Geen klik-effect class - schakelt hover/click animaties uit */
.no-click-effect {
    cursor: default !important;
    pointer-events: none !important;
}

.no-click-effect.revealed {
    pointer-events: none !important;
}

/* Wolk animatie - BOVEN surprises (z-index 25) */
.cloud-animation {
    position: absolute;
    z-index: 30;
    opacity: 0;
    animation: cloudMagic 1.5s ease-out;
    pointer-events: none;
    transform-origin: center center;
}

.cloud-circle {
    position: absolute;
    background: #FFFFFF;
    border-radius: 50%;
    animation: cloudCircleMagic 1.5s ease-out;
}

/* Verrassingsposities (1-28) */
.surprise-1 {
    --surprise-1-top: 20%;
    --surprise-1-left: 20%;
    --surprise-1-right: auto;
    --surprise-1-bottom: auto;
    --surprise-1-width: 80px;
    top: var(--surprise-1-top);
    left: var(--surprise-1-left);
    right: var(--surprise-1-right);
    bottom: var(--surprise-1-bottom);
    width: var(--surprise-1-width);
}

.surprise-2 {
    --surprise-2-top: 15%;
    --surprise-2-left: auto;
    --surprise-2-right: 25%;
    --surprise-2-bottom: auto;
    --surprise-2-width: 100px;
    top: var(--surprise-2-top);
    left: var(--surprise-2-left);
    right: var(--surprise-2-right);
    bottom: var(--surprise-2-bottom);
    width: var(--surprise-2-width);
}

.surprise-3 {
    --surprise-3-top: auto;
    --surprise-3-left: 10%;
    --surprise-3-right: auto;
    --surprise-3-bottom: 50%;
    --surprise-3-width: 90px;
    top: var(--surprise-3-top);
    left: var(--surprise-3-left);
    right: var(--surprise-3-right);
    bottom: var(--surprise-3-bottom);
    width: var(--surprise-3-width);
}

.surprise-4 {
    --surprise-4-top: 25%;
    --surprise-4-left: 70%;
    --surprise-4-right: auto;
    --surprise-4-bottom: auto;
    --surprise-4-width: 70px;
    top: var(--surprise-4-top);
    left: var(--surprise-4-left);
    right: var(--surprise-4-right);
    bottom: var(--surprise-4-bottom);
    width: var(--surprise-4-width);
}

.surprise-5 {
    /* KOE - laag en groot! Geen bounce animatie */
    /* Rechts gepositioneerd, ONDER bosjes (z-index 150) */
    --surprise-5-top: auto;
    --surprise-5-left: auto;
    --surprise-5-right: calc(5% - 200px);
    --surprise-5-bottom: 3%;
    --surprise-5-width: 400px;
    top: var(--surprise-5-top);
    left: var(--surprise-5-left);
    right: var(--surprise-5-right);
    bottom: var(--surprise-5-bottom);
    width: var(--surprise-5-width);
    animation: none !important;
    z-index: 140 !important;
    /* Onder bosjes (150) maar boven karakters */
    /* Geen scale animatie - verschijnt direct op volle grootte */
    transform: scale(1) !important;
}

/* Spacer die de koe bevat: onder bosjes (150) maar boven karakters (10) */
.spacer-segment:has(.surprise-5) {
    z-index: 140 !important;
    width: 200px !important;
    min-width: 200px !important;
}

/* Koe-spacer smaller op mobile */
@media (max-width: 768px) {
    .spacer-segment:has(.surprise-5) {
        width: 120px !important;
        min-width: 120px !important;
    }

    .surprise-5 {
        width: 280px !important;
        --surprise-5-width: 280px;
        right: calc(50% - 140px) !important;
        /* Gecentreerd */
        bottom: 18% !important;
    }
}

/* Koe in galaxy mode: ONDER space-feathers en bananen (min z-index 5), maar BOVEN karakters (10) */
body.galaxy-mode .spacer-segment:has(.surprise-5) {
    z-index: 4 !important;
    /* Onder space-feathers/bananen (5+), boven planeten (3) */
}

body.galaxy-mode .surprise-5 {
    z-index: 4 !important;
    /* Koe iets kleiner in galaxy mode */
    width: 250px !important;
    max-width: 250px !important;
}

/* Koe als floating surprise clone - iets kleiner in galaxy mode */
body.galaxy-mode .floating-surprise-clone.surprise-5,
#floating-surprise-container .surprise-5,
#floating-surprise-container .floating-surprise-clone.surprise-5 {
    width: 250px !important;
    max-width: 250px !important;
}

body.galaxy-mode .floating-surprise-clone.surprise-5 img,
#floating-surprise-container .surprise-5 img {
    width: 100% !important;
    max-width: 250px !important;
    height: auto !important;
}

/* Spacer die slakkie bevat: BOVEN karakters (10) en bosjes (200) */
.spacer-segment:has(.surprise-6) {
    z-index: 220 !important;
}

body.galaxy-mode .surprise-6 {
    top: 10vw !important;
    left: var(--surprise-6-left);
    right: var(--surprise-6-right);
    bottom: var(--surprise-6-bottom);
    animation: none !important;
    /* Slakkie iets kleiner in galaxy mode */
    width: 180px !important;
    max-width: 180px !important;
}

/* Slakkie als floating surprise clone - iets kleiner in galaxy mode */
body.galaxy-mode .floating-surprise-clone.surprise-6,
#floating-surprise-container .surprise-6,
#floating-surprise-container .floating-surprise-clone.surprise-6 {
    width: 180px !important;
    max-width: 180px !important;
}

body.galaxy-mode .floating-surprise-clone.surprise-6 img,
#floating-surprise-container .surprise-6 img {
    width: 100% !important;
    max-width: 180px !important;
    height: auto !important;
}

.surprise-6 {
    /* SLAKKIE - onderaan gepositioneerd, geen bounce animatie */
    /* Links van bosje-voorgrond gepositioneerd, nooit er achter verstopt */
    --surprise-6-top: auto;
    --surprise-6-left: 2%;
    --surprise-6-right: auto;
    --surprise-6-bottom: 18%;
    --surprise-6-width: 280px;
    top: var(--surprise-6-top);
    left: var(--surprise-6-left);
    right: var(--surprise-6-right);
    bottom: var(--surprise-6-bottom);
    width: var(--surprise-6-width);
    z-index: 210;
    /* Boven bosje-voorgrond (200) */
    animation: none !important;
    /* Geen schaaleffect bij verschijnen - start op normale grootte */
    transform: scale(1) !important;
}

.surprise-7 {
    --surprise-7-top: auto;
    --surprise-7-left: 60%;
    --surprise-7-right: auto;
    --surprise-7-bottom: 45%;
    --surprise-7-width: 95px;
    top: var(--surprise-7-top);
    left: var(--surprise-7-left);
    right: var(--surprise-7-right);
    bottom: var(--surprise-7-bottom);
    width: var(--surprise-7-width);
}

.surprise-8 {
    --surprise-8-top: 40%;
    --surprise-8-left: auto;
    --surprise-8-right: 40%;
    --surprise-8-bottom: auto;
    --surprise-8-width: 75px;
    top: var(--surprise-8-top);
    left: var(--surprise-8-left);
    right: var(--surprise-8-right);
    bottom: var(--surprise-8-bottom);
    width: var(--surprise-8-width);
}

.surprise-9 {
    --surprise-9-top: auto;
    --surprise-9-left: 35%;
    --surprise-9-right: auto;
    --surprise-9-bottom: 55%;
    --surprise-9-width: 105px;
    top: var(--surprise-9-top);
    left: var(--surprise-9-left);
    right: var(--surprise-9-right);
    bottom: var(--surprise-9-bottom);
    width: var(--surprise-9-width);
}

.surprise-10 {
    --surprise-10-top: 30%;
    --surprise-10-left: auto;
    --surprise-10-right: 10%;
    --surprise-10-bottom: auto;
    --surprise-10-width: 80px;
    top: var(--surprise-10-top);
    left: var(--surprise-10-left);
    right: var(--surprise-10-right);
    bottom: var(--surprise-10-bottom);
    width: var(--surprise-10-width);
}

/* Verrassingen 11-28 volgen hetzelfde patroon */
.surprise-11,
.surprise-21 {
    top: 20%;
    left: 20%;
    width: 80px;
}

.surprise-12,
.surprise-22 {
    top: 15%;
    right: 25%;
    width: 100px;
}

.surprise-13,
.surprise-23 {
    bottom: 50%;
    left: 10%;
    width: 90px;
}

.surprise-14,
.surprise-24 {
    top: 25%;
    left: 70%;
    width: 70px;
}

.surprise-15 {
    bottom: 60%;
    right: 15%;
    width: 110px;
}

/* ANANAS GROEP - 7 ananassen drijven in de vijver */
.surprise-25.ananas-group {
    bottom: 5%;
    left: 38%;
    right: auto;
    width: 280px;
    height: 140px;
    z-index: 15;
    transform: scale(1) !important;
}

/* Individuele ananas styling */
.ananas {
    position: absolute;
    width: 45px;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ananas img {
    width: 100%;
    height: auto;
}

/* Gespiegelde ananassen */
.ananas.mirrored img {
    transform: scaleX(-1);
}

/* Wanneer revealed: toon alle ananassen */
.hidden-surprise.surprise-25.revealed .ananas {
    opacity: 1;
}

/* Individuele posities - meer gespreid, lager = hogere z-index (coulissen-effect) */
.ananas-1 {
    left: 0;
    bottom: 5px;
    width: 50px;
    z-index: 7;
}

.ananas-2 {
    left: 55px;
    bottom: 35px;
    width: 38px;
    z-index: 3;
}

.ananas-3 {
    left: 95px;
    bottom: 2px;
    width: 48px;
    z-index: 8;
}

.ananas-4 {
    left: 150px;
    bottom: 42px;
    width: 36px;
    z-index: 2;
}

.ananas-5 {
    left: 190px;
    bottom: 8px;
    width: 45px;
    z-index: 6;
}

.ananas-6 {
    left: 230px;
    bottom: 28px;
    width: 40px;
    z-index: 4;
}

.ananas-7 {
    left: 70px;
    bottom: 55px;
    width: 32px;
    z-index: 1;
}

/* Vissenkom - drijft boven de ananassen */
.vissenkom {
    position: absolute;
    left: 100px;
    bottom: 75px;
    width: 82px;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.vissenkom img {
    width: 100%;
    height: auto;
}

.hidden-surprise.surprise-25.revealed .vissenkom {
    opacity: 1;
    animation: vissenkomDrift 5.2s ease-in-out 0.6s infinite;
}

@keyframes vissenkomDrift {

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

    20% {
        transform: translate(3px, -5px) rotate(2deg);
    }

    45% {
        transform: translate(-4px, -8px) rotate(-2deg);
    }

    70% {
        transform: translate(5px, -3px) rotate(1deg);
    }
}

/* Individuele drijfanimaties wanneer revealed */
.hidden-surprise.surprise-25.revealed .ananas-1 {
    animation: ananasDrift1 4.2s ease-in-out infinite;
}

.hidden-surprise.surprise-25.revealed .ananas-2 {
    animation: ananasDrift2 3.8s ease-in-out 0.3s infinite;
}

.hidden-surprise.surprise-25.revealed .ananas-3 {
    animation: ananasDrift3 4.5s ease-in-out 0.7s infinite;
}

.hidden-surprise.surprise-25.revealed .ananas-4 {
    animation: ananasDrift4 3.6s ease-in-out 0.2s infinite;
}

.hidden-surprise.surprise-25.revealed .ananas-5 {
    animation: ananasDrift5 4.0s ease-in-out 0.5s infinite;
}

.hidden-surprise.surprise-25.revealed .ananas-6 {
    animation: ananasDrift6 4.3s ease-in-out 0.9s infinite;
}

.hidden-surprise.surprise-25.revealed .ananas-7 {
    animation: ananasDrift7 3.9s ease-in-out 0.4s infinite;
}

/* Verschillende drijfanimaties voor elk */
@keyframes ananasDrift1 {

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

    25% {
        transform: translate(4px, -4px) rotate(2deg);
    }

    50% {
        transform: translate(-2px, -6px) rotate(-1deg);
    }

    75% {
        transform: translate(-4px, -2px) rotate(3deg);
    }
}

@keyframes ananasDrift2 {

    0%,
    100% {
        transform: translate(0, 0) rotate(1deg) scaleX(-1);
    }

    30% {
        transform: translate(-5px, -3px) rotate(-2deg) scaleX(-1);
    }

    60% {
        transform: translate(3px, -5px) rotate(2deg) scaleX(-1);
    }
}

@keyframes ananasDrift3 {

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

    20% {
        transform: translate(6px, -2px) rotate(2deg);
    }

    50% {
        transform: translate(2px, -7px) rotate(-2deg);
    }

    80% {
        transform: translate(-3px, -3px) rotate(1deg);
    }
}

@keyframes ananasDrift4 {

    0%,
    100% {
        transform: translate(0, 0) rotate(2deg) scaleX(-1);
    }

    35% {
        transform: translate(-4px, -5px) rotate(-1deg) scaleX(-1);
    }

    70% {
        transform: translate(2px, -3px) rotate(3deg) scaleX(-1);
    }
}

@keyframes ananasDrift5 {

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

    25% {
        transform: translate(3px, -4px) rotate(1deg);
    }

    55% {
        transform: translate(-3px, -6px) rotate(-1deg);
    }

    80% {
        transform: translate(5px, -2px) rotate(2deg);
    }
}

@keyframes ananasDrift6 {

    0%,
    100% {
        transform: translate(0, 0) rotate(1deg) scaleX(-1);
    }

    40% {
        transform: translate(-6px, -4px) rotate(-2deg) scaleX(-1);
    }

    75% {
        transform: translate(2px, -5px) rotate(2deg) scaleX(-1);
    }
}

@keyframes ananasDrift7 {

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

    30% {
        transform: translate(5px, -5px) rotate(3deg);
    }

    65% {
        transform: translate(-4px, -4px) rotate(-1deg);
    }
}

/* Bounce animatie class voor surprises - dynamisch met tilt */
.hidden-surprise.bounce-animation {
    animation: surpriseBounce 0.8s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes surpriseBounce {
    0% {
        transform: translateY(0) rotate(0deg) scaleY(1);
    }

    15% {
        /* Omhoog met tilt naar rechts */
        transform: translateY(-25px) rotate(8deg) scaleY(1.05);
    }

    30% {
        /* Hoogste punt, tilt terug */
        transform: translateY(-35px) rotate(-5deg) scaleY(1);
    }

    45% {
        /* Naar beneden, tilt naar links */
        transform: translateY(-15px) rotate(-8deg) scaleY(0.98);
    }

    60% {
        /* Landing - squash effect */
        transform: translateY(0) rotate(3deg) scaleY(0.9) scaleX(1.1);
    }

    75% {
        /* Kleine bounce terug */
        transform: translateY(-10px) rotate(-3deg) scaleY(1.02);
    }

    100% {
        transform: translateY(0) rotate(0deg) scaleY(1);
    }
}

.surprise-16,
.surprise-26 {
    top: 35%;
    left: 40%;
    width: 85px;
}

.surprise-17,
.surprise-27 {
    bottom: 45%;
    left: 60%;
    width: 95px;
}

.surprise-18,
.surprise-28 {
    top: 40%;
    right: 40%;
    width: 75px;
}

.surprise-19 {
    bottom: 55%;
    left: 35%;
    width: 105px;
}

.surprise-20 {
    top: 30%;
    right: 10%;
    width: 80px;
}

/* ==============================================
   13. MODALS
   ============================================== */

/* Algemene modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFEB7B;
    z-index: 10005;
    /* Boven magic-button (10001) */
    justify-content: center;
    align-items: center;
    padding-left: max(5vw, env(safe-area-inset-left, 5vw));
    padding-right: max(5vw, env(safe-area-inset-right, 5vw));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}

.modal.active {
    display: flex;
}

/* Verberg audio controls wanneer karakter modal open is */
body.character-modal-open .audio-controls {
    display: none !important;
}

.modal-wrapper {
    position: relative;
    max-width: 600px;
    width: 90%;
    margin: 60px auto 0 auto;
}

.modal-content {
    background: white;
    padding: 3rem;
    padding-top: 80px;
    border-radius: 20px;
    width: 100%;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    text-align: center;
    position: relative;
    border: 3px solid #071040;
}

.character-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.character-avatar {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #071040;
    object-fit: cover;
    z-index: 10;
    background: white;
}

.character-name-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.2;
}

.character-label {
    font-size: 1.2rem;
    color: #2C3E50;
    font-weight: 400;
}

.modal-content h2 {
    color: #2C3E50;
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

.character-name-bold {
    font-weight: 700;
}

.character-name-light {
    font-weight: 400;
}

.modal-content p {
    color: #34495E;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 500;
}

.close-modal {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    background: #071040;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 44px;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
}

.close-modal:hover {
    background: #0a1a5c;
    transform: scale(1.1);
}

/* Karakter boeken sectie */
.character-books {
    margin-top: 1.5rem;
    text-align: left;
}

/* Character books grid - vergelijkbaar met books modal */
.character-books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.character-book-card {
    background: #F8F9FA;
    border-radius: 24px;
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.character-book-cover {
    width: auto;
    height: 180px;
    margin: 0 auto 1rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

/* Hover effect handled by JavaScript for random rotation */

.character-book-cover img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.character-book-title {
    color: #071040;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.character-book-description {
    color: #071040;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.character-book-author {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.character-book-author .author-link {
    color: #071040;
    text-decoration: underline;
}

.character-book-author .author-link:hover {
    color: #E73A56;
}

.character-book-author .author-separator {
    text-decoration: none;
    color: #071040;
}

.character-book-card .book-button {
    margin-top: auto;
}

/* Responsive character books */
@media (max-width: 768px) {
    .modal-wrapper {
        width: 90vw;
        max-width: 90vw;
    }

    .modal-content {
        padding: 2rem;
        padding-top: 60px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Avatar hoger op mobiel zodat deze niet over de naam valt */
    .character-avatar {
        top: -80px;
        width: 100px;
        height: 100px;
    }

    .character-books-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .character-book-card {
        padding: 1.25rem;
    }

    .character-book-cover {
        height: 150px;
    }

    .character-book-title {
        font-size: 0.95rem;
    }

    .character-book-description {
        font-size: 0.8rem;
    }
}

/* LEES MEER ONZIN modal */
.lees-meer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10003;
    /* Boven magic button (10001) en books-modal (10002) */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    pointer-events: auto;
}

/* Audio controls achter de blur wanneer LMO sign zichtbaar is */
body.lees-meer-open .audio-controls {
    z-index: 10002;
    /* Onder lees-meer-modal (10003) zodat blur eroverheen gaat */
}

.lees-meer-sign-container {
    position: relative;
    width: 80%;
    max-width: 80vw;
    height: auto;
    animation: slideUpSlam 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
}

.lees-meer-sign {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}

.sign-stick {
    position: absolute;
    bottom: -400px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 450px;
    background: #222850;
    border-radius: 0;
    z-index: 1;
}

.lees-meer-sign-container.landed {
    animation: slideUpSlam 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        signWobble 0.3s ease-in-out 1.2s;
}

.lees-meer-sign-container.closing {
    animation: slideDown 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

body.lees-meer-open {
    overflow-x: hidden !important;
}

body.modal-scroll-locked {
    overflow: hidden !important;
}

/* Boekenmodal */
.books-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF076;
    z-index: 10020;
    /* Boven audio-controls (10015) */
    overflow: hidden;
    padding: 5vh 5vw;
    padding-bottom: calc(5vh + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

.books-modal-content {
    background: white;
    border-radius: 20px;
    width: 90vw;
    height: 100%;
    max-height: 90vh;
    margin: 0;
    position: relative;
    padding: 2rem;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    box-sizing: border-box;
    border: 3px solid #071040;
}

.books-modal h2 {
    text-align: center;
    color: #071040;
    margin-bottom: 2rem;
    padding-top: 2rem;
    font-size: 2.5rem;
    font-weight: 800;
}

.books-modal-title {
    display: block;
    margin: 0 auto 1.5rem;
    padding-top: 1.5rem;
    max-width: 280px;
    height: auto;
}

/* Finale modal - erft van .books-modal */
/* Expliciet scrolling forceren - ook in galaxy mode */
.finale-modal,
body.galaxy-mode .finale-modal {
    /* Zorg dat touch events niet geblokkeerd worden */
    touch-action: manipulation !important;
    /* Zorg dat modal BOVEN alle galaxy elementen ligt */
    z-index: 20000 !important;
}

.finale-modal .books-modal-content,
body.galaxy-mode .finale-modal .books-modal-content {
    /* Forceer scrolling */
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y manipulation !important;
    overscroll-behavior-y: contain;
    /* Extra padding onderaan zodat laatste boek volledig zichtbaar is */
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}

/* Alle kinderen in finale modal moeten touch toestaan */
.finale-modal .books-modal-content *,
body.galaxy-mode .finale-modal .books-modal-content * {
    touch-action: pan-y !important;
}

.finale-modal-intro {
    text-align: center;
    padding: 2rem 1rem 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.finale-modal-intro .finale-title {
    font-size: 1.5rem;
    line-height: 1.4;
    color: #1a1a2e;
    margin: 0 0 1rem 0;
}

.finale-modal-intro .finale-subtitle {
    font-size: 1.1rem;
    color: #333;
    margin: 0 0 1.5rem 0;
}

.finale-modal-intro em {
    font-style: italic;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.book-card {
    background: #F8F9FA;
    padding: 1.5rem;
    text-align: center;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.book-card:hover {
    cursor: pointer;
}

.book-cover {
    width: auto;
    height: 300px;
    margin: 0 auto 1rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

/* Hover effect handled by JavaScript for random rotation */

.book-cover img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.book-title {
    font-family: 'Gabarito', 'Arial', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    font-style: italic;
    color: #071040;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.book-description {
    font-family: 'Gabarito', 'Arial', sans-serif;
    font-size: 0.95rem;
    color: #071040;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    font-weight: 400;
}

.book-author {
    font-family: 'Gabarito', 'Arial', sans-serif;
    font-size: 1rem;
    color: #071040;
    margin-bottom: 1rem;
    font-weight: 400;
    flex-grow: 1;
}

.book-author .author-link {
    color: #071040;
    text-decoration: underline;
}

.book-author .author-link:hover {
    color: #E73A56;
}

.book-author .author-separator {
    text-decoration: none;
    color: #071040;
}

.book-button {
    margin-top: auto;
    align-self: center;
    width: fit-content;
    --button-color: #071040;
    --button-border-color: #071040;
    background: var(--button-color);
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    border: 2px solid var(--button-color);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: lowercase;
}

.book-button:hover {
    background: transparent;
    color: var(--button-color);
    border: 2px solid var(--button-color);
}

/* Info voor volwassenen knop in boeken modal */
.books-modal-adults-button {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    height: 44px;
    padding: 0 20px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #071040;
    background: transparent;
    border: 2px solid #071040;
    border-radius: 22px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    z-index: 10;
    font-family: 'Gabarito', 'Arial', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.books-modal-adults-button:hover {
    background: #071040;
    color: white;
}

.close-books-modal {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    background: #071040;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 44px;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
}

.close-books-modal:hover {
    background: #0a1a5c;
    transform: scale(1.1);
}

/* Scroll indicator - donkerblauw rondje met wit pijltje */
.scroll-indicator {
    display: flex;
    position: fixed;
    bottom: calc(5vh - 22px);
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 10003;
    transition: opacity 0.3s ease;
}

.scroll-indicator-inner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #071040;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.scroll-indicator-dot {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid white;
    margin-top: 2px;
}

@keyframes arrowBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

.scroll-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .books-modal h2 {
        font-size: 1.6rem;
        padding-top: 1.5rem;
    }

    .books-modal-title {
        padding-top: 3.5rem;
    }
}

/* ==============================================
   SINGLE BOOK MODAL (voor vogel-boeken)
   ============================================== */

.single-book-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF076;
    z-index: 10020;
    justify-content: center;
    align-items: center;
}

.single-book-modal.active {
    display: flex;
}

.single-book-modal-content {
    background: white;
    border-radius: 24px;
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    position: relative;
    padding: 2rem;
    box-sizing: border-box;
    overflow-y: auto;
    animation: singleBookModalIn 0.3s ease-out;
    border: 3px solid #071040;
}

@keyframes singleBookModalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.close-single-book-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: #071040;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
}

.close-single-book-modal:hover {
    background: #0a1a5c;
    transform: scale(1.1);
}

.single-book-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
}

.single-book-cover {
    width: auto;
    height: 250px;
    margin: 0 auto 1.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Hover effect handled by JavaScript for random rotation */

.single-book-cover img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.single-book-title {
    color: #071040;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.single-book-description {
    color: #071040;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.single-book-author {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.single-book-author .author-link {
    color: #071040;
    text-decoration: underline;
}

.single-book-author .author-link:hover {
    color: #E73A56;
}

.single-book-author .author-separator {
    text-decoration: none;
    color: #071040;
}

.single-book-card .book-button {
    margin-top: auto;
}

@media (max-width: 480px) {
    .single-book-modal-content {
        padding: 1.5rem;
        max-width: 95%;
    }

    .single-book-cover {
        height: 200px;
    }

    .single-book-title {
        font-size: 1.2rem;
    }
}

/* Bord-zoom effect */
.sign-zoom {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}

.sign-zoom-content {
    background: linear-gradient(45deg, #FFE082, #FFECB3);
    padding: 4rem 6rem;
    border-radius: 25px;
    font-size: 3.5rem;
    font-weight: 800;
    color: #2C3E50;
    transform: scale(0);
    animation: signPop 2.5s ease-in-out;
    border: 5px solid #F39C12;
}

/* ==============================================
   14. ANIMATIES
   ============================================== */

@keyframes waveUp {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes soundPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* navScale verwijderd - vervangen door navPulse in navigatie sectie */

@keyframes pulse {
    0% {
        box-shadow: 0 5px 15px rgba(155, 89, 182, 0.4);
    }

    50% {
        box-shadow: 0 5px 25px rgba(155, 89, 182, 0.8);
    }

    100% {
        box-shadow: 0 5px 15px rgba(155, 89, 182, 0.4);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes sway {

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

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

@keyframes wiggle {

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

    25% {
        transform: rotate(-3deg);
    }

    75% {
        transform: rotate(3deg);
    }
}

@keyframes birdFlap1 {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes birdFlap2 {

    0%,
    49% {
        opacity: 0;
    }

    50%,
    100% {
        opacity: 1;
    }
}

@keyframes birdFlight {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}

@keyframes birdFlightFallback {
    0% {
        transform: translate(-100px, 0);
    }

    100% {
        transform: translate(150vw, -60vh);
    }
}

@keyframes cloudMagic {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(10px);
    }

    15% {
        opacity: 1;
        transform: scale(1) translateY(-5px);
    }

    40% {
        opacity: 1;
        transform: scale(1.1) translateY(-8px);
    }

    60% {
        opacity: 1;
        transform: scale(1.2) translateY(-10px);
    }

    80% {
        opacity: 0.8;
        transform: scale(1.4) translateY(-12px);
    }

    100% {
        opacity: 0;
        transform: scale(1.6) translateY(-15px);
    }
}

@keyframes cloudCircleMagic {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    15% {
        opacity: 1;
        transform: scale(1);
    }

    60% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

@keyframes slideUpSlam {
    0% {
        transform: translateY(150vh) rotate(-15deg) scale(0.8);
        opacity: 0;
    }

    40% {
        transform: translateY(-10vh) rotate(8deg) scale(1.1);
        opacity: 1;
    }

    55% {
        transform: translateY(5vh) rotate(-3deg) scale(0.95);
    }

    70% {
        transform: translateY(-2vh) rotate(2deg) scale(1.02);
    }

    85% {
        transform: translateY(1vh) rotate(-1deg) scale(0.99);
    }

    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

@keyframes signWobble {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(-2deg) scale(1.01);
    }

    75% {
        transform: rotate(2deg) scale(0.99);
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(150vh) rotate(15deg) scale(0.8);
        opacity: 0;
    }
}

@keyframes signPop {
    0% {
        transform: scale(0) rotate(-180deg);
    }

    30% {
        transform: scale(1.3) rotate(0deg);
    }

    70% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(0) rotate(180deg);
    }
}

/* ==============================================
   15. RESPONSIVE - MOBIEL LANDSCAPE
   ============================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .opening-content {
        padding: 1rem;
        max-width: calc(100vw - 140px);
    }

    .main-text {
        font-size: 0.75rem;
        line-height: 1.4;
        margin-bottom: 0.75rem;
    }

    .main-text strong:first-of-type {
        font-size: 1.125rem;
    }

    .instruction-text {
        font-size: 0.7rem;
        margin-top: 0.75rem;
    }

    .site-logo {
        height: 40px;
    }

    :root {
        /* Karakters zijn 100vh, geen aparte variabelen meer nodig */
        --spacer-width: 8vw;
    }

    .character-segment {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
        position: relative !important;
        display: flex !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    .spacer-segment {
        width: 15vw !important;
        min-width: 15vw !important;
        position: relative !important;
        display: flex !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    .segment {
        box-sizing: border-box !important;
    }

    .magic-button img {
        max-width: 100px !important;
        max-height: 100px !important;
    }

    /* Character schaling gebeurt nu automatisch via vh-units */
    .character-container {
        transform: translateX(-50%);
    }

    .flying-bird {
        width: 120px;
        height: 120px;
        offset-path: path('M -80,350 C 150,320 280,290 400,240 C 450,220 480,150 450,100 C 420,50 370,80 400,140 C 430,200 500,220 600,180 C 800,100 1100,0 1500,-200');
    }

    .flying-bird.animate {
        animation: birdFlight 2s linear forwards;
    }

    /* Mobiele routes */
    .flying-bird.route-2 {
        offset-path: path('M -80,200 C 80,80 200,40 350,60 C 500,80 650,150 800,100 C 950,50 1100,0 1300,-100');
    }

    .flying-bird.route-3 {
        offset-path: path('M -80,450 C 120,400 240,470 360,430 C 480,390 600,460 720,420 C 840,380 1000,330 1200,250');
    }

    .flying-bird.route-4 {
        offset-path: path('M 1200,80 C 1000,60 850,120 700,90 C 550,60 400,140 250,110 C 100,80 -30,150 -120,130');
        offset-rotate: 0deg;
    }

    .flying-bird.route-5 {
        offset-path: path('M 1200,280 C 1050,250 900,210 750,250 C 600,290 520,210 450,250 C 380,290 250,330 100,280 C -30,240 -120,210 -160,230');
        offset-rotate: 0deg;
    }

    .flying-bird.route-6 {
        offset-path: path('M 1200,420 C 1050,380 900,450 750,400 C 600,350 450,420 300,370 C 150,320 0,380 -120,330');
        offset-rotate: 0deg;
    }

    .house-graffiti {
        bottom: auto;
        top: 2vh;
        left: 2.5vw;
        width: 95vw;
        z-index: 10;
    }

    .decoration {
        transform: scale(0.4);
        transform-origin: bottom center;
    }
}

/* ==============================================
   16. RESPONSIVE - TABLET PORTRAIT
   ============================================== */

@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {

    /* Character schaling gebeurt nu automatisch via vh-units */
    .character-container {
        bottom: 10vh !important;
    }

    /* Vijver-2: onderkant raakt scherm */
    .vijver-2-container {
        bottom: 0 !important;
    }

    /* Tacomonster: onderkant raakt scherm */
    .tacomonster-1-container {
        bottom: 0 !important;
    }

    /* Getsie: iets omhoog */
    .getsie-container {
        bottom: 15vh !important;
    }

    /* Scheidoma: iets omhoog */
    .scheidoma-container {
        bottom: 15vh !important;
    }
}

/* ==============================================
   17. RESPONSIVE - TABLET LANDSCAPE
   ============================================== */

@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    /* Character schaling gebeurt nu automatisch via 100vh */
}

@media (max-width: 1024px) {
    :root {
        --spacer-width: 15vw;
    }

    .segment-opening {
        width: 100vw !important;
        min-width: 100vw !important;
    }

    .site-logo {
        height: 45px;
    }

    .character-segment {
        width: 350px;
        min-width: 350px;
    }

    .feature-segment {
        width: 350px;
        min-width: 350px;
    }

    .decoration {
        transform: scale(0.8);
        transform-origin: bottom center;
    }

    /* Karakter schaling wordt per specifieke breakpoint geregeld */
    .vijver-2-container {
        bottom: 0 !important;
    }
}

/* Schermen 769-1024px met bijna-vierkant of licht landscape aspect ratio (0.9 tot 1.3) */
@media (min-width: 769px) and (max-width: 1024px) and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 13/10) {
    /* Character schaling gebeurt nu automatisch via 100vh */
}

/* Tablet/Desktop Small (1025px - 1199px) */
@media (min-width: 1025px) and (max-width: 1199px) {
    .spacer-segment {
        width: 5vw !important;
        min-width: 5vw !important;
    }

    /* Character schaling gebeurt nu automatisch via 100vh */
}

/* ==============================================
   18. RESPONSIVE - DESKTOP KLEIN
   ============================================== */

@media (min-width: 1200px) and (max-width: 1400px) {
    .spacer-segment {
        width: 10px !important;
        min-width: 10px !important;
    }

    /* Character schaling gebeurt nu automatisch via 100vh */
}

/* ==============================================
   19. RESPONSIVE - DESKTOP MIDDEL
   ============================================== */

@media (min-width: 1401px) and (max-width: 1600px) {
    .spacer-segment {
        width: 10px !important;
        min-width: 10px !important;
    }

    /* Character schaling gebeurt nu automatisch via 100vh */
}

/* ==============================================
   20. RESPONSIVE - DESKTOP GROOT
   ============================================== */

@media (min-width: 1601px) {
    .spacer-segment {
        width: 10px !important;
        min-width: 10px !important;
    }

    /* Spacer tussen guard en radio (met paal) - smaller */
    .segment:has(.guard-container)+.spacer-segment {
        width: 0 !important;
        min-width: 0 !important;
    }

    /* Character schaling gebeurt nu automatisch via 100vh */
}

/* ==============================================
   MOBIEL ALGEMEEN
   ============================================== */

@media (max-width: 768px) {
    .opening-content {
        padding: 2rem;
        margin: 1rem;
        max-width: calc(100vw - 140px);
        border: 4px solid #222850;
        transform: translateY(100vh);
    }

    .opening-content.animate-in {
        transform: translateY(0);
    }

    .main-text {
        font-size: 1rem;
    }

    .main-text strong:first-of-type {
        font-size: 1.6rem;
    }

    .nav-button {
        width: 50px;
        height: 100px;
        font-size: 1.5rem;
    }

    .nav-button svg {
        width: 40px;
        height: 40px;
    }

    .nav-left svg {
        transform: translateX(-6px);
    }

    .nav-right svg {
        transform: translateX(6px);
    }

    .nav-left {
        border-radius: 0 50px 50px 0;
    }

    .nav-right {
        border-radius: 50px 0 0 50px;
    }

    :root {
        /* Karakters zijn 100vh, schalen automatisch mee */
        --spacer-width: 20vw;
    }

    .character-segment {
        width: 300px;
        min-width: 300px;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
    }

    .feature-segment {
        width: 300px;
        min-width: 300px;
    }

    .opening-background {
        /* Hoogte via JS, zelfde als background-world */
        right: 0;
        left: auto;
    }

    .site-logo {
        top: 20px;
        left: 20px;
        height: 40px;
    }

    .discover-button {
        top: 20px;
        right: 20px;
    }

    .audio-controls {
        top: 85px;
        right: 20px;
        flex-direction: row;
        gap: 10px;
        margin-left: 0;
        transition: top 0.4s ease;
    }

    .audio-button {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .fullscreen-button {
        display: none !important; /* Werkt niet op mobile */
    }

    .fullscreen-icon {
        width: 20px;
        height: 20px;
    }

    .lees-meer-sign-container {
        width: 85%;
        max-width: 500px;
    }

    .sign-stick {
        width: 20px;
        height: calc(100vh + 200px);
        bottom: calc(-100vh - 50px);
    }

    .decoration {
        transform: scale(0.6);
        transform-origin: bottom center;
    }

    .decoration.hide-mobile {
        display: none;
    }

    .decoration.show-mobile-only {
        display: block;
    }

    /* Mickey Mops 60px naar rechts op mobile */
    .mickeymops-container {
        transform: translateX(calc(-50% + 60px));
    }
}

/* Mobiel portret specifiek */
@media (max-width: 768px) and (orientation: portrait) {
    .magic-button img {
        max-width: 170px !important;
        max-height: 170px !important;
    }
}

@media (max-width: 480px) {
    .opening-content {
        padding: 1.5rem;
        border: 4px solid #222850;
    }

    .magic-button img {
        max-width: 150px;
        max-height: 150px;
    }

    .main-text {
        font-size: 0.9rem;
    }

    .main-text strong:first-of-type {
        font-size: 1.44rem;
    }

    .character-segment {
        width: 300px;
        min-width: 300px;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
    }

    .discover-button {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }

    /* Karakters zijn 100vh, schalen automatisch mee */

    .lees-meer-sign-container {
        width: 90%;
        max-width: 350px;
    }

    .sign-stick {
        width: 24px;
        height: calc(100vh + 300px);
        bottom: calc(-100vh - 100px);
    }

    @keyframes slideUpSlam {
        0% {
            transform: translateY(120vh) rotate(-10deg) scale(0.9);
            opacity: 0;
        }

        40% {
            transform: translateY(-5vh) rotate(5deg) scale(1.05);
            opacity: 1;
        }

        100% {
            transform: translateY(0) rotate(0deg) scale(1);
        }
    }
}

/* ==============================================
   21. GALAXY MODE
   ============================================== */

/* Galaxy mode: verberg de normale panorama achtergrond */
body.galaxy-mode .background-world {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Galaxy mode: geanimeerde gradient achtergrond
   Gradient gaat van licht (onder) naar donker (boven) - 0deg = bottom to top
   Animatie simuleert opstijgen: lichte lucht verdwijnt naar beneden, donkere ruimte komt */
body.galaxy-mode {
    background: linear-gradient(0deg,
            #C4E6F2 0%,
            #47CAA7 25%,
            #17677A 50%,
            #094662 75%,
            #001119 100%) !important;
    background-size: 100% 500% !important;
    animation: galaxyGradient 60s ease-in-out infinite !important;
}

body.galaxy-mode html {
    background: #001119 !important;
}

body[data-galaxy-mode="true"] {
    background: linear-gradient(0deg,
            #C4E6F2 0%,
            #47CAA7 25%,
            #17677A 50%,
            #094662 75%,
            #001119 100%) !important;
    background-size: 100% 500% !important;
    animation: galaxyGradient 60s ease-in-out infinite !important;
}

/* Verberg originele surprises die geconverteerd zijn */
.hidden-surprise.converted-to-floating {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Floating klonen - forceer alle styles */
.floating-surprise-clone {
    position: fixed !important;
    animation: none !important;
    transition: none !important;
}

#floating-surprise-container .floating-surprise-clone {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Zorg dat floating container BOVEN alles staat */
#floating-surprise-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 150 !important;
    overflow: visible !important;
}

#floating-surprise-container>* {
    pointer-events: auto !important;
}

/* Galaxy gradient animatie: opstijgen de ruimte in
   background-position 100% = lichte lucht zichtbaar (onderaan gradient)
   background-position 0% = donkere ruimte zichtbaar (bovenaan gradient) */
@keyframes galaxyGradient {
    0% {
        /* Start: lichte lucht onderaan zichtbaar */
        background-position: 0% 100%;
    }

    /* Snel opstijgen - de lichte lucht verdwijnt naar beneden */
    30% {
        background-position: 0% 30%;
    }

    /* In de donkere ruimte aangekomen */
    45% {
        background-position: 0% 0%;
    }

    /* Even in de donkere ruimte blijven */
    55% {
        background-position: 0% 0%;
    }

    /* Subtiele nevel/lichtpuls (iets terug) */
    65% {
        background-position: 0% 15%;
    }

    /* Weer helemaal donker */
    75% {
        background-position: 0% 5%;
    }

    /* Nog een kleine lichtpuls */
    85% {
        background-position: 0% 20%;
    }

    /* Terug naar donker voordat we opnieuw beginnen */
    95% {
        background-position: 0% 0%;
    }

    /* Reset naar begin (lichte lucht onder) */
    100% {
        background-position: 0% 100%;
    }
}

/* Galaxy mode achtergrond kleur voor elementen */
body.galaxy-mode .yellow-house {
    background: #1a1a3a !important;
    border-color: #3a3a6a !important;
}

body.galaxy-mode .opening-content {
    background: linear-gradient(135deg, #1a1a3a 0%, #2a2a5a 100%) !important;
    border-color: #5a5aaa !important;
    color: #fff !important;
}

body.galaxy-mode .opening-content .main-text,
body.galaxy-mode .opening-content .instruction-text {
    color: #e0e0ff !important;
}

body.galaxy-mode .protest-stick {
    background: linear-gradient(180deg, #3a3a8a 0%, #2a2a6a 100%) !important;
}

/* Galaxy sterren effect - PARALLAX: sterren lijken ver weg in de ruimte
   Bij scrollen naar rechts bewegen sterren LANGZAAM naar links (tegengesteld, maar trager)
   Twee lagen met verschillende snelheden voor diepte-effect */
body.galaxy-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: -50%;
    /* Start links van viewport voor parallax ruimte */
    width: 300%;
    /* Breder voor parallax bewegingsruimte */
    height: 200%;
    /* Grote heldere sterren, medium sterren, kleine sterren, extra kleine twinkels */
    background-image:
        radial-gradient(3px 3px at 50px 40px, white, transparent),
        radial-gradient(2px 2px at 120px 90px, white, transparent),
        radial-gradient(3px 3px at 200px 150px, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(2px 2px at 280px 60px, white, transparent),
        radial-gradient(3px 3px at 350px 200px, white, transparent),
        radial-gradient(2px 2px at 80px 180px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 240px 220px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(2px 2px at 320px 120px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 400px 80px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 30px 100px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 100px 250px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 180px 80px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 260px 170px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 340px 40px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 420px 190px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 60px 140px, rgba(200, 230, 255, 0.5), transparent),
        radial-gradient(1px 1px at 140px 200px, rgba(200, 230, 255, 0.4), transparent),
        radial-gradient(1px 1px at 220px 110px, rgba(200, 230, 255, 0.5), transparent),
        radial-gradient(1px 1px at 300px 260px, rgba(200, 230, 255, 0.4), transparent),
        radial-gradient(1px 1px at 380px 150px, rgba(200, 230, 255, 0.5), transparent);
    background-repeat: repeat;
    background-size: 450px 300px;
    pointer-events: none;
    z-index: 1;
    /* Alleen twinkle animatie - parallax beweging via JS */
    animation: starsTwinkle 4s ease-in-out infinite;
    /* Parallax offset via CSS variabele (gezet door JS bij scrollen) */
    transform: translate3d(var(--stars-x, 0px), 0, 0);
    will-change: transform;
}

/* Tweede sterrenlaag - VERDER WEG, langzamere parallax voor diepte-effect */
body.galaxy-mode::after {
    content: '';
    position: fixed;
    top: 0;
    left: -50%;
    /* Start links van viewport voor parallax ruimte */
    width: 300%;
    height: 200%;
    /* Verre sterren (kleiner, dimmer), gekleurde sterren (heel subtiel) */
    background-image:
        radial-gradient(1px 1px at 25px 35px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 75px 95px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 125px 55px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 175px 145px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 225px 25px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 275px 115px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 325px 75px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 375px 165px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 50px 125px, rgba(200, 220, 255, 0.3), transparent),
        radial-gradient(1px 1px at 150px 85px, rgba(255, 220, 200, 0.25), transparent),
        radial-gradient(1px 1px at 250px 185px, rgba(200, 255, 220, 0.3), transparent),
        radial-gradient(1px 1px at 350px 45px, rgba(220, 200, 255, 0.25), transparent);
    background-repeat: repeat;
    background-size: 400px 200px;
    pointer-events: none;
    z-index: 1;
    /* Langzamere twinkle voor verre sterren */
    animation: starsTwinkleSlow 6s ease-in-out infinite;
    opacity: 0.7;
    /* Langzamere parallax voor verre sterren - half zo snel als dichtbij */
    transform: translate3d(var(--stars-far-x, 0px), 0, 0);
    will-change: transform;
}

/* Twinkle animaties - ZONDER translate (parallax via JS) */
@keyframes starsTwinkle {

    0%,
    100% {
        opacity: 0.92;
    }

    50% {
        opacity: 1;
    }
}

/* Langzamere twinkle voor verre sterrenlaag */
@keyframes starsTwinkleSlow {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.75;
    }
}

/* Galaxy mode: verberg gras en bomen */
body.galaxy-mode .decoration img[src*="gras-pluk"],
body.galaxy-mode .decoration img[src*="boom"] {
    opacity: 0 !important;
    transition: opacity 0.5s ease;
}

/* Galaxy mode: verberg bosjes en speeltoestellen */
body.galaxy-mode .bosjes-linksonder,
body.galaxy-mode .bosjes-halverwege,
body.galaxy-mode .bosje-voorgrond-subwoolfer,
body.galaxy-mode .speeltoestellen-onderaan,
body.galaxy-mode .boom-hoek-links {
    display: none !important;
}

/* Galaxy mode: surprise floating animatie - traag drijven
   NIET voor floating surprises - die worden via JS geanimeerd */
body.galaxy-mode .hidden-surprise.revealed:not(.floating-surprise) {
    animation: floatInSpace 20s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important;
    animation-delay: calc(var(--float-delay, 0) * 1.5s);
    will-change: transform;
}

@keyframes floatInSpace {

    /* Subtiele rotatie - alleen lichte schommeling zoals een draaiknopje
       Maximaal ±3 graden zodat het niet lijkt alsof het 3D draait */
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    12% {
        transform: translate(20px, -15px) rotate(2deg) scale(1.02);
    }

    28% {
        transform: translate(40px, -35px) rotate(-1.5deg) scale(0.98);
    }

    42% {
        transform: translate(15px, -50px) rotate(3deg) scale(1.01);
    }

    58% {
        transform: translate(-25px, -40px) rotate(-2deg) scale(0.99);
    }

    72% {
        transform: translate(-35px, -20px) rotate(1.5deg) scale(1.02);
    }

    88% {
        transform: translate(-10px, -8px) rotate(-1deg) scale(1);
    }
}

/* ==============================================
   GALAXY MODE: ZWEVENDE PION ROND GUARD
   ============================================== */

/* Galaxy-only elementen: alleen zichtbaar in galaxy mode */
.galaxy-only {
    display: none;
    opacity: 0;
    visibility: hidden;
}

body.galaxy-mode .galaxy-only {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Zwevende pion - vrij drijvend in galaxy mode */
.orbiting-pion {
    position: absolute;
    width: 90px;
    height: 90px;
    top: 30%;
    left: 60%;
    pointer-events: none;
    z-index: 25;
    /* Vrije zweefanimatie - organisch en onvoorspelbaar */
    animation: pionFreeDrift 25s ease-in-out infinite;
    transform-origin: center center;
}

.orbiting-pion img {
    width: 100%;
    height: auto;
    /* Pion draait langzaam en wiebelt */
    animation: pionWobbleSpin 12s ease-in-out infinite;
}

/* Vrij drijvende beweging - geen vaste patronen */
@keyframes pionFreeDrift {
    0% {
        transform: translate(0, 0) rotate(-5deg);
    }

    8% {
        transform: translate(60px, -80px) rotate(8deg);
    }

    18% {
        transform: translate(-40px, -140px) rotate(-12deg);
    }

    28% {
        transform: translate(100px, -60px) rotate(5deg);
    }

    38% {
        transform: translate(30px, 50px) rotate(-8deg);
    }

    48% {
        transform: translate(-80px, -20px) rotate(15deg);
    }

    58% {
        transform: translate(-120px, -100px) rotate(-10deg);
    }

    68% {
        transform: translate(-50px, 30px) rotate(6deg);
    }

    78% {
        transform: translate(80px, -30px) rotate(-15deg);
    }

    88% {
        transform: translate(20px, -90px) rotate(10deg);
    }

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

/* Pion wiebelt en draait langzaam */
@keyframes pionWobbleSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(95deg) scale(1.05);
    }

    50% {
        transform: rotate(180deg) scale(0.95);
    }

    75% {
        transform: rotate(270deg) scale(1.08);
    }

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

/* Responsive: kleinere orbit op mobiel */
@media (max-width: 768px) {
    .orbiting-pion {
        width: 60px;
        height: 60px;
    }

    @keyframes orbitFigure8 {
        0% {
            transform: translate(-50%, -50%) translate(0, 0);
        }

        12.5% {
            transform: translate(-50%, -50%) translate(50px, -25px);
        }

        25% {
            transform: translate(-50%, -50%) translate(80px, 0);
        }

        37.5% {
            transform: translate(-50%, -50%) translate(50px, 25px);
        }

        50% {
            transform: translate(-50%, -50%) translate(0, 0);
        }

        62.5% {
            transform: translate(-50%, -50%) translate(-50px, -25px);
        }

        75% {
            transform: translate(-50%, -50%) translate(-80px, 0);
        }

        87.5% {
            transform: translate(-50%, -50%) translate(-50px, 25px);
        }

        100% {
            transform: translate(-50%, -50%) translate(0, 0);
        }
    }
}

/* ==============================================
   ZWEVENDE DIEREN BIJ VIJVER-2 (GALAXY MODE)
   Rups, hond en kip zweven vrij rond binnen de karakter div
   ============================================== */

.floating-animal {
    position: absolute;
    pointer-events: none;
    z-index: 25;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Alleen zichtbaar in galaxy mode */
body.galaxy-mode .floating-animal {
    opacity: 1;
}

.floating-animal img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 15px rgba(150, 200, 255, 0.3));
}

/* Rups - klein, zweeft linksboven */
.floating-rups {
    width: 50px;
    top: 15%;
    left: 10%;
    animation: floatRups 12s ease-in-out infinite;
}

/* Hond - groot, zweeft rechts */
.floating-hond {
    width: 140px;
    top: 30%;
    right: 5%;
    animation: floatHond 15s ease-in-out infinite;
    animation-delay: -3s;
}

/* Kip - middelgroot, zweeft onderaan */
.floating-kip {
    width: 60px;
    bottom: 25%;
    left: 25%;
    animation: floatKip 10s ease-in-out infinite;
    animation-delay: -7s;
}

/* Unieke zweef animaties voor elk dier */
@keyframes floatRups {

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

    25% {
        transform: translate(30px, 20px) rotate(10deg);
    }

    50% {
        transform: translate(50px, -15px) rotate(-8deg);
    }

    75% {
        transform: translate(20px, 30px) rotate(5deg);
    }
}

@keyframes floatHond {

    0%,
    100% {
        transform: translate(0, 0) rotate(3deg);
    }

    20% {
        transform: translate(-40px, 25px) rotate(-8deg);
    }

    40% {
        transform: translate(-20px, -30px) rotate(5deg);
    }

    60% {
        transform: translate(-50px, 10px) rotate(-3deg);
    }

    80% {
        transform: translate(-30px, -20px) rotate(8deg);
    }
}

@keyframes floatKip {

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

    33% {
        transform: translate(40px, -25px) rotate(12deg);
    }

    66% {
        transform: translate(-20px, -40px) rotate(-10deg);
    }
}

/* Responsive: kleinere dieren op mobiel */
@media (max-width: 768px) {
    .floating-rups {
        width: 35px;
    }

    .floating-hond {
        width: 100px;
    }

    .floating-kip {
        width: 40px;
    }

    @keyframes floatRups {

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

        25% {
            transform: translate(20px, 15px) rotate(10deg);
        }

        50% {
            transform: translate(35px, -10px) rotate(-8deg);
        }

        75% {
            transform: translate(15px, 20px) rotate(5deg);
        }
    }

    @keyframes floatHond {

        0%,
        100% {
            transform: translate(0, 0) rotate(3deg);
        }

        20% {
            transform: translate(-25px, 15px) rotate(-8deg);
        }

        40% {
            transform: translate(-15px, -20px) rotate(5deg);
        }

        60% {
            transform: translate(-35px, 8px) rotate(-3deg);
        }

        80% {
            transform: translate(-20px, -15px) rotate(8deg);
        }
    }

    @keyframes floatKip {

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

        33% {
            transform: translate(25px, -18px) rotate(12deg);
        }

        66% {
            transform: translate(-15px, -25px) rotate(-10deg);
        }
    }
}

/* Galaxy mode: karakter segmenten zacht zweven - SUBTIELE rotatie
   --rotate-intensity wordt per segment gezet via JS (0.5 tot 1.5)
   --rotate-direction is 1 of -1 voor afwisselende draairichting */
body.galaxy-mode .character-segment {
    animation: gentleFloat 14s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    animation-delay: calc(var(--segment-delay, 0) * 1s);
    will-change: transform;
    --rotate-intensity: 1;
    --rotate-direction: 1;
}

/* Guard karakter: BOVEN de vieze planeet (z-index 80) in galaxy mode */
body.galaxy-mode .character-segment:has(.guard-container) {
    z-index: 90 !important;
}

body.galaxy-mode .guard-container {
    z-index: 90 !important;
}

@keyframes gentleFloat {

    0%,
    100% {
        transform: translate(0, var(--float-base-y, 0px)) rotate(calc(0deg * var(--rotate-intensity, 1) * var(--rotate-direction, 1)));
    }

    12% {
        transform: translate(8px, calc(var(--float-base-y, 0px) - 15px)) rotate(calc(3deg * var(--rotate-intensity, 1) * var(--rotate-direction, 1)));
    }

    25% {
        transform: translate(15px, calc(var(--float-base-y, 0px) - 28px)) rotate(calc(-2deg * var(--rotate-intensity, 1) * var(--rotate-direction, 1)));
    }

    38% {
        transform: translate(5px, calc(var(--float-base-y, 0px) - 35px)) rotate(calc(4deg * var(--rotate-intensity, 1) * var(--rotate-direction, 1)));
    }

    50% {
        transform: translate(-8px, calc(var(--float-base-y, 0px) - 30px)) rotate(calc(-3deg * var(--rotate-intensity, 1) * var(--rotate-direction, 1)));
    }

    62% {
        transform: translate(-15px, calc(var(--float-base-y, 0px) - 22px)) rotate(calc(2deg * var(--rotate-intensity, 1) * var(--rotate-direction, 1)));
    }

    75% {
        transform: translate(-10px, calc(var(--float-base-y, 0px) - 12px)) rotate(calc(-4deg * var(--rotate-intensity, 1) * var(--rotate-direction, 1)));
    }

    88% {
        transform: translate(-3px, calc(var(--float-base-y, 0px) - 5px)) rotate(calc(2deg * var(--rotate-intensity, 1) * var(--rotate-direction, 1)));
    }
}

/* Floating surprises in galaxy mode - zweven vrij door de ruimte
   De originele surprises worden verborgen via JS, deze container bevat de clones */
#floating-surprise-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: visible;
    z-index: 100;
}

/* Floating surprise elementen - worden gepositioneerd via JS transform
   Hogere specificiteit om galaxy-mode animaties te overschrijven */
body.galaxy-mode .floating-surprise,
body.galaxy-mode .hidden-surprise.floating-surprise,
body.galaxy-mode .hidden-surprise.revealed.floating-surprise,
#floating-surprise-container .floating-surprise,
.floating-surprise {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    pointer-events: auto;
    cursor: pointer;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition: filter 0.3s ease;
    /* Reset alle CSS animaties - JS regelt de beweging */
    animation: none !important;
    animation-delay: 0s !important;
}

.floating-surprise:hover {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* Floating surprises in container - reset oude positioning */
#floating-surprise-container .hidden-surprise {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    animation: none !important;
}

/* Originele surprises worden verborgen in galaxy mode (via JS display:none)
   maar voeg hier een fallback toe voor robuustheid */
body.galaxy-mode .character-segment .hidden-surprise.revealed {
    /* Geen animatie meer - ze worden verplaatst naar floating container */
    animation: none !important;
}

/* Galaxy mode: radio segment - langzamer, groter bereik */
body.galaxy-mode .radio-segment {
    animation: radioFloat 15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    animation-delay: 1.2s;
    will-change: transform;
}

@keyframes radioFloat {

    0%,
    100% {
        transform: translate(0, -60px) rotate(0deg);
    }

    15% {
        transform: translate(15px, -85px) rotate(1deg);
    }

    35% {
        transform: translate(-8px, -110px) rotate(-0.5deg);
    }

    50% {
        transform: translate(-20px, -95px) rotate(-1.2deg);
    }

    70% {
        transform: translate(10px, -75px) rotate(0.8deg);
    }

    85% {
        transform: translate(5px, -65px) rotate(0.3deg);
    }
}

/* Galaxy mode: openingsscherm verbergen */
body.galaxy-mode .segment-opening {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

body.galaxy-mode .opening-content {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.galaxy-mode .protest-stick {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.galaxy-mode .opening-background {
    opacity: 0 !important;
}

/* Galaxy mode: discover button styling */
body.galaxy-mode .discover-button {
    background: #FFEB7B;
    color: #071040;
}

body.galaxy-mode .discover-button:hover {
    background: #FFD93D;
    color: #071040;
}

/* Galaxy mode: spacer segmenten "ademen" - willekeurige breedte variatie */
body.galaxy-mode .spacer-segment {
    animation: spacerBreathe var(--breathe-duration, 18s) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    animation-delay: var(--breathe-delay, 0s);
    will-change: transform;
    transform-origin: center center;
}

/* Elke spacer krijgt een andere timing via nth-child voor organisch effect */
body.galaxy-mode .spacer-segment:nth-child(4n+1) {
    --breathe-duration: 16s;
    --breathe-delay: 0s;
}

body.galaxy-mode .spacer-segment:nth-child(4n+2) {
    --breathe-duration: 22s;
    --breathe-delay: 3s;
}

body.galaxy-mode .spacer-segment:nth-child(4n+3) {
    --breathe-duration: 19s;
    --breathe-delay: 7s;
}

body.galaxy-mode .spacer-segment:nth-child(4n) {
    --breathe-duration: 25s;
    --breathe-delay: 2s;
}

@keyframes spacerBreathe {

    0%,
    100% {
        transform: scaleX(1) scaleY(1);
    }

    8% {
        transform: scaleX(0.92) scaleY(1.01);
    }

    18% {
        transform: scaleX(0.85) scaleY(1.02);
    }

    30% {
        transform: scaleX(0.95) scaleY(1.005);
    }

    42% {
        transform: scaleX(1.08) scaleY(0.99);
    }

    55% {
        transform: scaleX(0.88) scaleY(1.015);
    }

    68% {
        transform: scaleX(1.05) scaleY(0.995);
    }

    80% {
        transform: scaleX(0.93) scaleY(1.008);
    }

    92% {
        transform: scaleX(1.02) scaleY(0.998);
    }
}

/* ==============================================
   22. VEERTJES EFFECT
   ============================================== */

.falling-feather {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

#feather-container {
    contain: layout style;
    transform: translateZ(0);
}

/* Space feathers (galaxy mode) - JS-driven zero-gravity animatie
   Veren spawnen BUITEN viewport en drijven naar binnen
   Beweging wordt volledig door JavaScript gecontroleerd via requestAnimationFrame */
.space-feather {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* Geen CSS animaties - JS controleert transform en opacity direct */
}

#space-feather-container {
    contain: layout style;
    transform: translateZ(0);
    z-index: 600;
}

#flying-banana-container {
    contain: layout style;
    transform: translateZ(0);
    z-index: 600;
}

/* ==============================================
   POINTER-EVENTS FIX
   Zorgt ervoor dat doorzichtige/onzichtbare elementen
   klikken niet blokkeren op onderliggende elementen
   ============================================== */

/* Containers die GEEN klikken mogen opvangen */
#feather-container,
#space-feather-container,
#flying-banana-container,
#galaxy-planet-container,
#galaxy-rocket-container,
#floating-surprise-container {
    pointer-events: none !important;
}

/* Galaxy planet wrappers zijn standaard niet klikbaar */
.galaxy-planet-wrapper {
    pointer-events: none;
}

/* ALLEEN de vieze planeet is klikbaar - hogere z-index zodat deze boven spacers zit */
.galaxy-planet-wrapper:has(.stinky-planet-img) {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 50 !important;
}

/* Fallback voor browsers zonder :has() - JS zet dit al */
.galaxy-planet-wrapper[data-stinky="true"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 50 !important;
}

/* De stinky planet img zelf moet ook klikbaar zijn */
.stinky-planet-img {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Floating surprises moeten klikbaar blijven */
.floating-surprise-clone {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Karakters: de container laat klikken door, alleen de afbeeldingen en click areas vangen klikken op */
/* Dit zorgt ervoor dat transparante delen van de character-image div klikken doorlaten */
.character-image {
    pointer-events: none !important;
}

/* De karakter afbeeldingen zelf zijn wel klikbaar */
.character-image img {
    pointer-events: auto !important;
}

/* Click areas zijn klikbaar */
.sign-click-area {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.character-click-area {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Originele karakter click-areas uitschakelen tijdens zwiep/drag */
.zwieping-original,
.zwieping-original .sign-click-area,
.zwieping-original .character-click-area,
.zwieping-original .jongetje-click-area,
.zwieping-original img {
    pointer-events: none !important;
    cursor: default !important;
}

/* Galaxy mode zwevende elementen binnen character-image zijn klikbaar */
.orbiting-pion,
.floating-animal {
    pointer-events: none !important;
}

/* Radio moet klikbaar zijn */
.radio-image {
    pointer-events: auto !important;
}

.radio-clickable-area {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Magic button moet klikbaar zijn */
.magic-button {
    pointer-events: auto !important;
}

/* Scroll/navigatie knoppen moeten klikbaar zijn */
.nav-button,
.nav-left,
.nav-right,
#navLeft,
#navRight {
    pointer-events: auto !important;
}

/* Spacer segments mogen klikken niet blokkeren */
.spacer-segment {
    pointer-events: none;
}

/* Character segments: transparante delen mogen klikken niet blokkeren */
.character-segment {
    pointer-events: none;
}

/* Feature segment (radio): transparante delen mogen klikken niet blokkeren */
.feature-segment {
    pointer-events: none;
}

/* Radio moet BOVEN planeten zijn in galaxy mode (planeten z-index 3-50) */
body.galaxy-mode .feature-segment {
    z-index: 60;
    position: relative;
}

body.galaxy-mode .radio-container,
body.galaxy-mode .radio-image {
    z-index: 60;
    position: relative;
}

/* Character container moet ook pointer-events: none hebben, kinderen zijn auto */
.character-container {
    pointer-events: none;
}

/* Maar surprises IN spacers moeten wel klikbaar zijn */
.spacer-segment .hidden-surprise.revealed {
    pointer-events: auto;
    cursor: pointer;
}

/* Surprises in spacer-segmenten mogen NIET mee-schalen met de spacer breathe animatie */
body.galaxy-mode .spacer-segment .hidden-surprise {
    /* Counter-scale om de parent's scaleX/scaleY te neutraliseren */
    animation: counterSpacerBreathe var(--breathe-duration, 18s) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    animation-delay: var(--breathe-delay, 0s);
    will-change: transform;
}

@keyframes counterSpacerBreathe {

    0%,
    100% {
        transform: scaleX(1) scaleY(1);
    }

    8% {
        /* Parent: scaleX(0.92) -> counter: scaleX(1/0.92) = 1.087 */
        transform: scaleX(1.087) scaleY(0.99);
    }

    18% {
        transform: scaleX(0.935) scaleY(1.015);
    }

    28% {
        transform: scaleX(1.02) scaleY(0.99);
    }

    42% {
        transform: scaleX(1.075) scaleY(0.985);
    }

    58% {
        transform: scaleX(0.98) scaleY(1.005);
    }

    72% {
        transform: scaleX(1.045) scaleY(0.99);
    }

    85% {
        transform: scaleX(0.955) scaleY(1.01);
    }
}

/* ==============================================
   ZWIEP ELEMENTEN - GEEN 3D KANTELING
   ============================================== */

/* Force alle zwiep elementen plat te blijven - geen 3D effecten */
.zwiep-element,
.zwiep-character,
.zwiep-element *,
.zwiep-character * {
    transform-style: flat !important;
    animation: none !important;
    backface-visibility: visible !important;
}

/* Specifiek voor pion in zwiep modus */
.zwiep-element.orbiting-pion,
.zwiep-element.orbiting-pion img,
.zwiep-character .orbiting-pion,
.zwiep-character .orbiting-pion img {
    animation: none !important;
    transform-style: flat !important;
}

/* Hele zwiep container plat houden */
#zwiep-character-container,
#zwiep-character-container * {
    transform-style: flat !important;
    perspective: none !important;
}

/* Drag ghost tijdens slepen - ook plat */
.drag-ghost,
.drag-ghost * {
    transform-style: flat !important;
    animation: none !important;
    perspective: none !important;
}

/* ==============================================
   23. DEBUG MODE
   ============================================== */

/* Activeer met: document.body.classList.add('debug-mode') in console
   Of via URL parameter: ?debug=true (indien JS ondersteund) */

body.debug-mode .spacer-segment {
    background: rgba(255, 235, 59, 0.7) !important;
    border: 2px dashed #FFA000 !important;
    position: relative;
    pointer-events: auto;
}

/* CSS counter voor automatische nummering */
body.debug-mode {
    counter-reset: spacer-counter;
}

body.debug-mode .spacer-segment {
    counter-increment: spacer-counter;
}

body.debug-mode .spacer-segment::before {
    content: "S" counter(spacer-counter);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFA000;
    color: white;
    font-size: 1.2rem;
    font-weight: 800;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    z-index: 9999;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Character segments ook markeren in debug mode */
body.debug-mode .character-segment {
    background: rgba(33, 150, 243, 0.3) !important;
    border: 2px dashed #1976D2 !important;
}

body.debug-mode .character-segment::after {
    content: attr(data-character);
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #1976D2;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    z-index: 9999;
    white-space: nowrap;
}

/* ==============================================
   GALAXY MODE MOBILE: Touch scrolling fix
   Alle floating elementen krijgen pointer-events: none
   zodat touch events doorgelaten worden naar scroll
   ============================================== */
@media (max-width: 768px) {
    body.galaxy-mode #floating-surprise-container,
    body.galaxy-mode #floating-surprise-container *,
    body.galaxy-mode #floating-vijver-container,
    body.galaxy-mode #floating-vijver-container *,
    body.galaxy-mode #galaxy-flying-books-container,
    body.galaxy-mode #galaxy-flying-books-container *,
    body.galaxy-mode #flying-banana-container,
    body.galaxy-mode #flying-banana-container *,
    body.galaxy-mode #space-feather-container,
    body.galaxy-mode #space-feather-container *,
    body.galaxy-mode #stink-planet-container,
    body.galaxy-mode #stink-planet-container *,
    body.galaxy-mode .galaxy-planet-wrapper,
    body.galaxy-mode .galaxy-planet {
        pointer-events: none !important;
        touch-action: auto !important;
    }

    /* Navigatie knoppen moeten wel klikbaar blijven */
    body.galaxy-mode .nav-button {
        pointer-events: auto !important;
    }

    /* Magic button moet klikbaar blijven */
    body.galaxy-mode .magic-button {
        pointer-events: auto !important;
    }

    /* Audio controls moeten klikbaar blijven */
    body.galaxy-mode .audio-controls {
        pointer-events: auto !important;
    }

    body.galaxy-mode .audio-controls * {
        pointer-events: auto !important;
    }

    /* Stink planet moet wel klikbaar zijn op mobile - ID selector nodig voor hogere specificity */
    body.galaxy-mode #stink-planet-container .galaxy-planet-wrapper:has(.stinky-planet-img),
    body.galaxy-mode #stink-planet-container .galaxy-planet-wrapper[data-stinky="true"],
    body.galaxy-mode #stink-planet-container .stinky-planet-img,
    body.galaxy-mode #stink-planet-container .galaxy-planet-wrapper {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Flying books moeten wel klikbaar zijn op mobile - ID selector nodig voor hogere specificity */
    body.galaxy-mode #galaxy-flying-books-container .galaxy-flying-book,
    body.galaxy-mode #galaxy-flying-books-container .galaxy-flying-book * {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}