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

html, body { 
    background-color: darkgray; 
    overflow: hidden; 
    width: 100vw; 
    height: 100vh;
    position: fixed; 
}

.phase, #phase1-bg, .desk-bg, .portal-wrapper, .text-phase, .transparent-phase {
    position: absolute; top:0; left:0; width:100vw; height:100vh;
}

/* ========================================== */
/* COULEURS PAR PHASE                         */
/* ========================================== */
.phase-start { background-color: rgb(221, 229, 231); }
.phase-grey  { background-color: #818181; }
.phase-dark  { background-color: #454545; }
.phase-darker { background-color: #252525; }
.phase-black { background-color: #050505 !important; }
.transparent-phase { background-color: transparent !important; }

/* ========================================== */
/* Z-INDEX STRICTS DES PHASES                 */
/* ========================================== */
#phase1-bg { z-index: 100; }
#portal-wrapper { z-index: 101; }
#metaballs-layer { z-index: 102; }
#phase2 { z-index: 90; }
#phase2b { z-index: 85; } 
#phase3 { z-index: 80; }
#phase4-bg { z-index: 70; }
#portal2-wrapper { z-index: 71; }
#phase5 { z-index: 60; }
#phase6 { z-index: 50; }
#phase7-bg { z-index: 40; }
#portal3-wrapper { z-index: 41; }
#phase8 { z-index: 30; }
#phase9 { z-index: 20; }
#phase10-bg { z-index: 10; }
#portal4-wrapper { z-index: 11; }
#phase11 { z-index: 5; }

/* ========================================== */
/* PORTAILS ET FONDS BUREAU                   */
/* ========================================== */
.desk-bg { transition: opacity 1s ease-in-out; pointer-events: none; }

/* Masques découpés parfaitement aux proportions des portails */
#phase1-bg {
    -webkit-mask-image: radial-gradient(ellipse 150px 300px at 50% 50%, transparent 20%, black 80%);
    mask-image: radial-gradient(ellipse 150px 300px at 50% 50%, transparent 20%, black 80%);
}
#phase4-bg {
    -webkit-mask-image: radial-gradient(ellipse 125px 250px at 50% 50%, transparent 20%, black 80%);
    mask-image: radial-gradient(ellipse 125px 250px at 50% 50%, transparent 20%, black 80%);
}
#phase7-bg {
    -webkit-mask-image: radial-gradient(ellipse 100px 200px at 50% 50%, transparent 20%, black 80%);
    mask-image: radial-gradient(ellipse 100px 200px at 50% 50%, transparent 20%, black 80%);
}
/* Le trou du portail 4 laisse apparaître le noir profond de la Phase 11 derrière */
#phase10-bg {
    -webkit-mask-image: radial-gradient(ellipse 70px 130px at 50% 50%, transparent 20%, black 80%);
    mask-image: radial-gradient(ellipse 70px 130px at 50% 50%, transparent 20%, black 80%);
}

.portal-wrapper { display: flex; justify-content: center; align-items: center; pointer-events: none; }

.portal {
    position: relative; width: 270px; height: 480px; cursor: pointer; pointer-events: auto; 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(8px);
}

.portal-size-2 { width: 225px; height: 400px; }
.portal-size-3 { width: 180px; height: 320px; }
.portal-small  { width: 135px; height: 240px; background-color: transparent; } 

.portal-pop { animation: portal-pop 0.4s ease-in-out; }
@keyframes portal-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

.portal.zoom-in { transform: scale(25) !important; opacity: 0; transition: transform 1.2s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.4s ease-in 0.8s; pointer-events: none; }
.portal-img { width: 100%; height: 100%; object-fit: contain; }
#phase1-bg, .desk-bg, .portal-wrapper { height: 110vh; top: -5vh; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(8px) translateX(-3px); } }

/* ========================================== */
/* TEXTES ET BOUTONS OK                       */
/* ========================================== */
.text-phase { display: flex; justify-content: center; align-items: center; flex-direction: column; color: white; transition: opacity 1.5s ease-in-out; }
.content { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
section { display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-10vh); }

/* Alignement parfait et même interlignage (1.2) partout */
.text {
    transform: scaleY(1.9) scaleX(1.4);
    display: block; text-align: center; width: min(90vw, 700px); max-width: 90vw;
    font-size: 1.9rem; line-height: 1.2; color: #f7f1e5; pointer-events: auto;
}
.btn-ok {
    position: absolute; bottom: 12vh; left: 50%; transform: translateX(-50%) scaleY(1.9) scaleX(1.4);
    padding: 8px 24px; font-size: 1.5rem; color: #f7f1e5; background-color: transparent;
    border: 2px solid #f7f1e5; border-radius: 10px; text-decoration: none; transition: all 0.3s ease;
    border-width: 2px;
    cursor: pointer; z-index: 10; font-family: 'Times New Roman', Times, serif; text-align: center; pointer-events: auto;
}
.btn-ok:hover { background-color: #f7f1e5; color: darkgray; box-shadow: 0 0 15px rgba(247, 241, 229, 0.6); }

#btn-restart:hover {
    background-color: #8a0303 !important; color: #050505 !important;
    box-shadow: 0 0 15px rgba(138, 3, 3, 0.6) !important; border-color: #8a0303 !important;
}

/* La classe rajoutée par le JS pour colorer les mots entre { } */
.red-word .letter { color: #9e1010; }

.word { display: inline-block; white-space: nowrap; }
section .text .letter { position: relative; display: inline-block; cursor: pointer; }
section .text .letter.active { animation: smoke 6s linear forwards; transform-origin: bottom; }
@keyframes smoke { 0% { opacity: 1; filter: blur(0); transform: translateX(0) translateY(0) rotate(0deg) scale(1); } 50% { opacity: 1; pointer-events: none; } 100% { opacity: 0; filter: blur(20px); transform: translateX(300px) translateY(-300px) rotate(720deg) scale(4); } }

/* ========================================== */
/* BUREAUX ET FEUILLES                        */
/* ========================================== */
.transparent-phase { display: flex; flex-direction: column; pointer-events: none; transition: opacity 1s ease-in-out; }
.nav-container { width: 100%; text-align: center; padding: 30px 0; pointer-events: auto; position: relative; z-index: 10; }
.nav-text { font-family: 'Times New Roman', Times, serif; font-size: 24px; color: #ffffff; display: inline-block; transform: scaleY(1.2); }

.bottom-nav { position: absolute; bottom: 30px; left: 0; width: 100vw; display: flex; justify-content: space-between; padding: 0 50px; pointer-events: none; z-index: 10; }
.rank-text, .counter-text { font-family: 'Times New Roman', Times, serif; font-size: 24px; color: #ffffff; transform: scaleY(1.2); }

.desk { flex-grow: 1; position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; pointer-events: none; }

.sheet { position: absolute; box-shadow: 1px 2px 5px rgba(0,0,0,0.2); cursor: grab; transition: opacity 1.2s ease, transform 1.2s ease; pointer-events: auto; }
.sheet:active { cursor: grabbing; }

.dream-sheet {
    width: 500px; height: 650px; background-color: #fcfbf9; 
    background-image: url('img/papertexture.jpg'); background-size: cover; background-position: center;
    border: 1px solid #d3d3d3; padding: 60px 50px;
}
.dream-text { font-family: "pd-americano-short", sans-serif; font-weight: 400; font-style: normal; font-size: 1.4rem; color: #4a4a4a; line-height: 1.6; text-align: left; }

.dream-intro { font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; font-weight: bold; color: #4a4a4a; font-style: normal; line-height: 1.1; display: inline-block; padding-bottom: 5px; }

.decision-buttons { position: absolute; bottom: 30px; left: 0; width: 100%; display: flex; justify-content: space-around; padding: 0 40px; pointer-events: auto; }
.btn-decision { font-family: "pd-americano-short", sans-serif; font-size: 1.2rem; padding: 8px 16px; background: transparent; border: 2px solid #1a1a1a; color: #1a1a1a; cursor: pointer; transition: all 0.3s; 
 border-radius: 8px; }
.btn-decision:hover { background-color: #1a1a1a; color: #fcfbf9; }

.slide-left { transform: translate(-100vw, -10vh) rotate(-15deg) !important; opacity: 0; pointer-events: none; }
.slide-right { transform: translate(100vw, -10vh) rotate(15deg) !important; opacity: 0; pointer-events: none; }

.clue-word { color: #c70334; text-decoration: underline; cursor: pointer; position: relative; z-index: 20; transition: color 0.3s; pointer-events: auto; }
.clue-word:hover { color: #ff9da4; } 

#sheet-3 { z-index: 1; transform: translate(6px, 12px) rotate(0.5deg); }
#sheet-2 { z-index: 2; transform: translate(3px, 6px) rotate(-0.5deg); } 
#sheet-1 { z-index: 3; transform: translate(0px, 0px) rotate(0deg); }

#sheet6-5 { z-index: 4; transform: translate(12px, 24px) rotate(-1.5deg); }
#sheet6-4 { z-index: 5; transform: translate(9px, 18px) rotate(0.5deg); }
#sheet6-3 { z-index: 6; transform: translate(6px, 12px) rotate(-0.5deg); }
#sheet6-2 { z-index: 7; transform: translate(3px, 6px) rotate(1deg); }
#sheet6-1 { z-index: 8; transform: translate(0px, 0px) rotate(0deg); }

.sheet.removed { opacity: 0; pointer-events: none; transform: translateY(-40px) rotate(5deg) !important; }
.chaos-sheet { width: 170px; height: auto; transition: none; object-fit: cover; }
.chaos-vanish { transform: scale(0) !important; opacity: 0; pointer-events: none; }

/* ========================================== */
/* YEUX ET METABALLS                          */
/* ========================================== */
.eyes-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; }
.eye-box { position: absolute; width: 150px; height: 150px; pointer-events: none; }
.eye-lid { position: absolute; width: 100%; height: 100%; background: url('img/lid.png') no-repeat center; background-size: contain; z-index: 2; }
.eye-iris { position: absolute; width: 80%; height: 80%; background: url('img/iris.png') no-repeat center; background-size: contain; top: 10%; left: 10%; z-index: 1; }
.eye-iris-red { background-image: url('img/irisred.png'); }

.metaballs-heavy, .metaballs-light { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; transition: opacity 1s ease-in-out; }
.metaballs-heavy { z-index: 50; }
.metaballs-light { z-index: 50; opacity: 0.5; }
#metaballs-phase3, #metaballs-phase6 { z-index: 5; }

.container { position: relative; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: space-between; filter: url(#gooey); pointer-events: none; }
.container .circle { position: absolute; min-width: 220px; height: 250px; border-radius: 50%; opacity: 45%; pointer-events: auto; cursor: default; }
.container .circle:active { cursor: grabbing; }

.clickable-ball { transition: transform 0.4s ease, opacity 0.4s ease; cursor: default; }
.clickable-ball:active { cursor: grabbing; }

.container .circle:before { content: ''; position: absolute; top: -50px; left: -50px; right: -50px; bottom: -50px; border-radius: 50%; z-index: -1; filter: blur(50px); }
.container .circle.circle1, .container .circle.circle1:before { background: linear-gradient(90deg, #c6cbd1d5, #d9d8e0d5); }
.container .circle.circle2, .container .circle.circle2:before { background: linear-gradient(90deg, #cad5dbc8, #b7cad1cf); }
.container .circle.circle1 { animation: animate1 15s linear infinite; }
.container .circle.circle2 { animation: animate2 15s linear infinite; }
@keyframes animate1 { 0% { transform: rotate(0deg); } 50% { transform: rotate(360deg); } 100% { transform: rotate(720deg); } }
@keyframes animate2 { 0% { transform: rotate(0deg); } 50% { transform: rotate(-360deg); } 100% { transform: rotate(-720deg); } }

/* ========================================== */
/* RESPONSIVE DESIGN (MOBILES ET TABLETTES)   */
/* ========================================== */

@media screen and (max-width: 768px) {
    /* 1. Maintien de l'étirement des textes principaux */
    .text {
        transform: scaleY(1.9) scaleX(1.4);
        width: 65vw; 
        font-size: 1rem;
    }
    
    .btn-ok {
        transform: translateX(-50%) scaleY(1.9) scaleX(1.4);
        bottom: 8vh;
        font-size: 0.9rem;
        border-radius: 10px;
        border-width: 2px/2px;
    }

    section {
        transform: translateY(-5vh);
    }

    /* 2. Titres et textes de navigation (Agrandis mais < 1rem) */
    .nav-container { 
        padding: 15px 0; 
        margin-top: 8vh; 
    }
    .nav-text { 
        font-size: 0.95rem; 
        transform: scaleY(1.2); 
        padding: 0 10px;
    }
    
    .bottom-nav { 
        padding: 0 15px; 
        bottom: 15px; 
    }
    .rank-text, .counter-text { 
        font-size: 0.9rem; 
        transform: scaleY(1.2); 
    }

    /* 3. Redimensionnement des feuilles de rêves (Mini-jeux) */
    .dream-sheet {
        width: 85vw;
        height: 65vh; 
        padding: 30px 20px;
    }
    .dream-text { font-size: 1rem; line-height: 1.3; }
    .decision-buttons { bottom: 15px; padding: 0 10px; }
    .btn-decision { font-size: 1rem; padding: 6px 12px; border-radius: 8px;}

    /* 4. Phase Chaos (Feuilles éparpillées) */
    .chaos-sheet {
        width: 80px !important; 
    }
    .chaos-sheet:nth-child(even) {
        display: none !important;
    }

    /* 5. Adaptation des tailles de portails et masques */
    .portal { width: 170px; height: 300px; }
    .portal-size-2 { width: 145px; height: 260px; }
    .portal-size-3 { width: 120px; height: 215px; }
    .portal-small  { width: 95px; height: 170px; }
    
    #phase1-bg {
        -webkit-mask-image: radial-gradient(ellipse 95px 170px at 50% 50%, transparent 20%, black 80%);
        mask-image: radial-gradient(ellipse 95px 170px at 50% 50%, transparent 20%, black 80%);
    }
    #phase4-bg {
        -webkit-mask-image: radial-gradient(ellipse 80px 145px at 50% 50%, transparent 20%, black 80%);
        mask-image: radial-gradient(ellipse 80px 145px at 50% 50%, transparent 20%, black 80%);
    }
    #phase7-bg {
        -webkit-mask-image: radial-gradient(ellipse 70px 125px at 50% 50%, transparent 20%, black 80%);
        mask-image: radial-gradient(ellipse 70px 125px at 50% 50%, transparent 20%, black 80%);
    }
    #phase10-bg {
        -webkit-mask-image: radial-gradient(ellipse 55px 100px at 50% 50%, transparent 20%, black 80%);
        mask-image: radial-gradient(ellipse 55px 100px at 50% 50%, transparent 20%, black 80%);
    }

    /* 6. Réduction Yeux & Metaballs */
    .eye-box { width: 70px !important; height: 70px !important; }
    #eyes-phase5 .eye-box { width: 120px !important; height: 120px !important; }
    .container .circle { min-width: 100px; height: 120px; }
}

/* ========================================== */
/* RESPONSIVE DESIGN (MOBILES ET TABLETTES)   */
/* ========================================== */

@media screen and (max-width: 768px) {
    /* 1. Correction Safari */
    html, body, .phase, .text-phase, .transparent-phase, .content, .container {
        height: 100dvh; 
    }

    /* 2. Textes principaux */
    .text {
        transform: scaleY(1.9) scaleX(1.4);
        width: 65vw; 
        font-size: 1rem;
    }
    
    .btn-ok {
        transform: translateX(-50%) scaleY(1.9) scaleX(1.4);
        bottom: 12dvh; /* Juste milieu : évite Safari mais n'est pas trop haut */
        font-size: 0.9rem;
        border-radius: 10px;
        border-width: 2px;
    }

    section {
        transform: translateY(-8dvh); /* Redescendu */
    }

    /* 3. Titres et textes de navigation */
    .nav-container { 
        padding: 15px 0; 
        margin-top: 8dvh; /* Redescendu */
    }
    .nav-text { 
        font-size: 0.95rem; 
        transform: scaleY(1.2); 
        padding: 0 10px;
    }
    
    .bottom-nav { 
        padding: 0 15px; 
        bottom: 8dvh; /* Redescendu juste au-dessus de la zone critique */
    }
    .rank-text, .counter-text { 
        font-size: 0.9rem; 
        transform: scaleY(1.2); 
    }

    /* 4. Bureau et Feuilles */
    .desk {
        transform: translateY(-4dvh); /* Redescendu légèrement */
    }

    .dream-sheet {
        width: 85vw;
        height: 65dvh; /* Retour à la grande taille qui prend bien l'espace */
        padding: 25px 20px;
    }
    .dream-text { font-size: 1rem; line-height: 1.3; }
    .decision-buttons { bottom: 15px; padding: 0 10px; }
    .btn-decision { font-size: 1rem; padding: 6px 12px; border-radius: 8px;}

    /* 5. Phase Chaos (Feuilles éparpillées) */
    .chaos-sheet {
        width: 80px !important; 
    }
    .chaos-sheet:nth-child(even) {
        display: none !important;
    }

    /* 6. Adaptation des tailles de portails et masques */
    .portal { width: 170px; height: 300px; }
    .portal-size-2 { width: 145px; height: 260px; }
    .portal-size-3 { width: 120px; height: 215px; }
    .portal-small  { width: 95px; height: 170px; }
    
    #phase1-bg {
        -webkit-mask-image: radial-gradient(ellipse 95px 170px at 50% 50%, transparent 20%, black 80%);
        mask-image: radial-gradient(ellipse 95px 170px at 50% 50%, transparent 20%, black 80%);
    }
    #phase4-bg {
        -webkit-mask-image: radial-gradient(ellipse 80px 145px at 50% 50%, transparent 20%, black 80%);
        mask-image: radial-gradient(ellipse 80px 145px at 50% 50%, transparent 20%, black 80%);
    }
    #phase7-bg {
        -webkit-mask-image: radial-gradient(ellipse 70px 125px at 50% 50%, transparent 20%, black 80%);
        mask-image: radial-gradient(ellipse 70px 125px at 50% 50%, transparent 20%, black 80%);
    }
    #phase10-bg {
        -webkit-mask-image: radial-gradient(ellipse 55px 100px at 50% 50%, transparent 20%, black 80%);
        mask-image: radial-gradient(ellipse 55px 100px at 50% 50%, transparent 20%, black 80%);
    }

    /* 7. Réduction Yeux & Metaballs */
    .eye-box { width: 70px !important; height: 70px !important; }
    #eyes-phase5 .eye-box { width: 120px !important; height: 120px !important; }
    .container .circle { min-width: 100px; height: 120px; }
}