/* =========================================================
   PROJECT MIMI — SURPRISE 4
   PREMIUM CONSTELLATION DISCOVERY
========================================================= */

#surprise4{
    position:fixed;
    inset:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:
        radial-gradient(circle at 50% 38%,rgba(225,190,112,.11),transparent 28%),
        radial-gradient(circle at 20% 68%,rgba(84,113,151,.09),transparent 34%),
        linear-gradient(180deg,#03050c 0%,#07101d 54%,#0a1728 100%);
    font-family:Georgia,"Times New Roman",serif;
}

#surprise4 *,
#surprise4 *::before,
#surprise4 *::after{
    box-sizing:border-box;
}

.s4-atmosphere,
.s4-vignette,
.s4-glow,
.s4-dust{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.s4-vignette{
    background:
        radial-gradient(circle,transparent 45%,rgba(0,0,0,.42) 100%);
}

.s4-glow{
    filter:blur(55px);
    opacity:.45;
}

.s4-glow-a{
    background:radial-gradient(circle at 50% 48%,rgba(222,184,105,.13),transparent 25%);
    animation:s4Pulse 7s ease-in-out infinite;
}

.s4-glow-b{
    background:radial-gradient(circle at 22% 62%,rgba(93,122,163,.09),transparent 30%);
}

.s4-dust{
    opacity:.35;
    background-image:
        radial-gradient(circle at 12% 18%,rgba(255,255,255,.45) 0 1px,transparent 1.5px),
        radial-gradient(circle at 78% 28%,rgba(255,255,255,.32) 0 1px,transparent 1.5px),
        radial-gradient(circle at 62% 72%,rgba(255,255,255,.25) 0 1px,transparent 1.5px),
        radial-gradient(circle at 31% 82%,rgba(255,255,255,.28) 0 1px,transparent 1.5px);
    background-size:240px 240px,310px 310px,360px 360px,280px 280px;
    animation:s4Dust 18s linear infinite;
}

.s4-stage{
    position:relative;
    z-index:2;
    width:min(92vw,520px);
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.s4-header{
    position:absolute;
    top:clamp(28px,7vh,58px);
    left:0;
    right:0;
    display:flex;
    justify-content:space-between;
    color:rgba(255,255,255,.38);
    font-size:9px;
    letter-spacing:4px;
}

.s4-header span:first-child{
    color:#e2bd73;
    font-size:11px;
}

.s4-footer{
    position:absolute;
    bottom:22px;
    left:0;
    right:0;
    text-align:center;
    color:rgba(255,255,255,.22);
    font-size:9px;
    letter-spacing:2px;
}

.s4-screen,
.s4-game,
.s4-reveal,
.s4-capsule,
.s4-choice-screen{
    width:100%;
    text-align:center;
}

.s4-intro{
    opacity:1;
    transform:none;
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,.61,.36,1),
        filter .8s ease;
}

.s4-intro.hide{
    opacity:0;
    transform:translateY(-24px) scale(.98);
    filter:blur(7px);
    pointer-events:none;
}

.s4-orbit{
    position:relative;
    width:104px;
    height:104px;
    margin:0 auto 28px;
    border:1px solid rgba(226,189,115,.28);
    border-radius:50%;
    box-shadow:0 0 45px rgba(226,189,115,.07);
}

.s4-orbit::before{
    content:"";
    position:absolute;
    inset:11px;
    border:1px dashed rgba(226,189,115,.18);
    border-radius:50%;
}

.s4-orbit-star{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:#f0cb78;
    font-size:25px;
    text-shadow:0 0 20px rgba(240,203,120,.55);
}

.s4-orbit-dot{
    position:absolute;
    width:5px;
    height:5px;
    top:9px;
    left:25px;
    border-radius:50%;
    background:#e8c67a;
    box-shadow:0 0 12px #e8c67a;
    animation:s4Orbit 4s linear infinite;
    transform-origin:27px 43px;
}

.s4-kicker{
    margin:0 0 20px;
    color:#dcb873;
    font-size:9px;
    letter-spacing:5px;
}

.s4-intro h1{
    margin:0;
    font-size:clamp(39px,10vw,54px);
    line-height:1.06;
    font-weight:500;
}

.s4-intro h1 em{
    color:#e4c27a;
    font-style:italic;
}

.s4-subtitle{
    margin:25px 0 0;
    color:rgba(255,255,255,.58);
    font-size:15px;
    line-height:1.7;
}

.s4-button{
    width:205px;
    min-height:54px;
    margin:30px auto 0;
    border:1px solid rgba(230,198,126,.42);
    border-radius:999px;
    background:rgba(255,255,255,.035);
    color:#f0d493;
    font:600 14px Georgia,"Times New Roman",serif;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.s4-button b{
    font-size:18px;
    font-weight:400;
}

.s4-button:hover{
    background:rgba(232,199,125,.08);
    border-color:rgba(232,199,125,.65);
    box-shadow:0 10px 35px rgba(0,0,0,.18);
}

.s4-button:active{
    transform:scale(.97);
}

/* =========================================================
   GAME
========================================================= */

.s4-game{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(22px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.s4-game.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
}

.s4-game-head{
    display:flex;
    justify-content:space-between;
    margin:0 8px 15px;
    color:rgba(255,255,255,.4);
    font-size:9px;
    letter-spacing:4px;
}

.s4-game-head i{
    color:#dcb873;
    font-style:normal;
}

.s4-sky{
    position:relative;
    width:min(88vw,430px);
    height:min(65vh,520px);
    margin:auto;
    overflow:hidden;
    border:1px solid rgba(226,189,115,.13);
    border-radius:28px;
    background:
        radial-gradient(circle at 50% 48%,rgba(226,189,115,.08),transparent 30%),
        radial-gradient(circle at 25% 30%,rgba(92,121,159,.08),transparent 28%),
        rgba(255,255,255,.012);
    box-shadow:
        inset 0 0 60px rgba(0,0,0,.24),
        0 25px 80px rgba(0,0,0,.22);
}

.s4-sky::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle at 18% 22%,rgba(255,255,255,.35) 0 1px,transparent 1.5px),
        radial-gradient(circle at 71% 17%,rgba(255,255,255,.26) 0 1px,transparent 1.5px),
        radial-gradient(circle at 86% 68%,rgba(255,255,255,.3) 0 1px,transparent 1.5px),
        radial-gradient(circle at 25% 76%,rgba(255,255,255,.2) 0 1px,transparent 1.5px);
    opacity:.65;
}

.s4-star{
    position:absolute;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    z-index:4;
}

.s4-star::before{
    content:"✦";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(.62);
    color:rgba(255,255,255,.42);
    font-size:18px;
    transition:
        transform .35s ease,
        color .35s ease,
        text-shadow .35s ease;
}

.s4-star::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:5px;
    height:5px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    background:rgba(226,189,115,.18);
    box-shadow:0 0 10px rgba(226,189,115,.12);
}

.s4-star.active::before{
    color:#f0cb78;
    transform:translate(-50%,-50%) scale(1.05);
    text-shadow:
        0 0 10px rgba(240,203,120,.7),
        0 0 28px rgba(240,203,120,.38);
}

.s4-star.wrong{
    animation:s4Wrong .32s ease;
}

.s4-star.found::before{
    color:#f0cb78;
    transform:translate(-50%,-50%) scale(1.2);
    text-shadow:0 0 24px rgba(240,203,120,.7);
}

.s4-star-1{left:12%;top:18%}
.s4-star-2{left:42%;top:10%}
.s4-star-3{left:73%;top:25%}
.s4-star-4{left:22%;top:45%}
.s4-star-5{left:54%;top:39%}
.s4-star-6{left:78%;top:57%}
.s4-star-7{left:38%;top:69%}
.s4-star-8{left:62%;top:81%}

.s4-constellation-line{
    position:absolute;
    height:1px;
    transform-origin:left center;
    background:linear-gradient(90deg,rgba(226,189,115,.0),rgba(226,189,115,.55),rgba(226,189,115,.0));
    opacity:0;
    transition:opacity .8s ease;
    z-index:2;
}

.s4-constellation-line.line-1{
    width:32%;
    left:22%;
    top:48%;
    transform:rotate(-48deg);
}

.s4-constellation-line.line-2{
    width:34%;
    left:42%;
    top:30%;
    transform:rotate(27deg);
}

.s4-constellation-line.line-3{
    width:29%;
    left:53%;
    top:49%;
    transform:rotate(38deg);
}

.s4-constellation-line.line-4{
    width:25%;
    left:38%;
    top:70%;
    transform:rotate(-35deg);
}

.s4-sky.complete .s4-constellation-line{
    opacity:.72;
}

.s4-sky-center{
    position:absolute;
    left:50%;
    top:50%;
    width:92px;
    height:92px;
    transform:translate(-50%,-50%) scale(.7);
    opacity:0;
    border:1px solid rgba(226,189,115,.3);
    border-radius:50%;
    display:grid;
    place-items:center;
    transition:
        opacity 1s ease,
        transform 1s ease;
}

.s4-sky.complete .s4-sky-center{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

.s4-sky-center span{
    color:#efc875;
    font-size:27px;
    text-shadow:0 0 25px rgba(239,200,117,.6);
}

.s4-game-hint{
    min-height:24px;
    margin:18px 0 7px;
    color:rgba(255,255,255,.58);
    font-size:14px;
}

.s4-game-status{
    display:flex;
    justify-content:center;
    gap:12px;
    min-height:18px;
    color:#dcb873;
    font-size:10px;
    letter-spacing:2px;
}

.s4-game-status #s4Message{
    color:rgba(255,255,255,.38);
    letter-spacing:1px;
}

/* =========================================================
   REVEAL / CAPSULE / CHOICE
========================================================= */

.s4-reveal,
.s4-capsule,
.s4-choice-screen{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(25px) scale(.98);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.s4-reveal.show,
.s4-capsule.show,
.s4-choice-screen.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
}

.s4-reveal-symbol{
    width:112px;
    height:112px;
    margin:0 auto 30px;
    border:1px solid rgba(226,189,115,.32);
    border-radius:50%;
    display:grid;
    place-items:center;
    box-shadow:
        0 0 45px rgba(226,189,115,.09),
        inset 0 0 25px rgba(226,189,115,.05);
    animation:s4Float 4s ease-in-out infinite;
}

.s4-reveal-symbol span{
    color:#efc875;
    font-size:35px;
    text-shadow:0 0 25px rgba(239,200,117,.65);
}

.s4-reveal h2,
.s4-choice-screen h2{
    margin:0;
    font-size:clamp(36px,9vw,48px);
    line-height:1.1;
    font-weight:500;
}

.s4-symbol-name{
    margin-top:20px;
    color:rgba(255,255,255,.32);
    font-size:9px;
    letter-spacing:5px;
}

.s4-capsule-orb{
    width:130px;
    height:130px;
    margin:0 auto 28px;
    border:1px solid rgba(226,189,115,.28);
    border-radius:50%;
    display:grid;
    place-items:center;
    box-shadow:
        0 0 70px rgba(226,189,115,.1),
        inset 0 0 40px rgba(226,189,115,.05);
    animation:s4Pulse 4s ease-in-out infinite;
}

.s4-capsule-orb span{
    color:#efc875;
    font-size:34px;
}

.s4-capsule-line{
    max-width:370px;
    margin:auto;
    color:#f2eadb;
    font-size:25px;
    line-height:1.35;
}

.s4-capsule-small{
    margin:14px 0 0;
    color:rgba(255,255,255,.4);
    font-size:13px;
}

.s4-choice-sub{
    margin:14px 0 28px;
    color:rgba(255,255,255,.45);
    font-size:14px;
}

.s4-objects{
    display:flex;
    justify-content:center;
    gap:15px;
}

.s4-object{
    width:92px;
    height:120px;
    border:1px solid rgba(226,189,115,.2);
    border-radius:18px;
    background:rgba(255,255,255,.025);
    color:#fff;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:13px;
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.s4-object:hover{
    transform:translateY(-6px);
    border-color:rgba(226,189,115,.52);
    background:rgba(226,189,115,.05);
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.s4-object.selected{
    transform:translateY(-8px) scale(1.03);
    border-color:#e4c27c;
    background:rgba(226,189,115,.09);
    box-shadow:0 0 35px rgba(226,189,115,.12);
}

.s4-object-icon{
    color:#eac778;
    font-size:28px;
}

.s4-object small{
    color:rgba(255,255,255,.38);
    font-size:8px;
    letter-spacing:2px;
}

.s4-choice-reveal{
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:
        max-height .8s ease,
        opacity .6s ease,
        margin .8s ease;
}

.s4-choice-reveal.show{
    max-height:210px;
    opacity:1;
    margin-top:25px;
}

.s4-choice-reveal > span{
    color:#eac778;
    font-size:22px;
}

.s4-choice-reveal p{
    max-width:330px;
    margin:10px auto 0;
    color:rgba(255,255,255,.68);
    font-size:15px;
    line-height:1.6;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:420px){

    .s4-stage{
        width:90vw;
    }

    .s4-header{
        top:25px;
    }

    .s4-intro h1{
        font-size:39px;
    }

    .s4-sky{
        height:56vh;
        min-height:390px;
    }

    .s4-capsule-line{
        font-size:22px;
        padding:0 15px;
    }

    .s4-object{
        width:82px;
        height:110px;
    }

}

@keyframes s4Pulse{
    50%{
        transform:scale(1.04);
        opacity:.8;
    }
}

@keyframes s4Orbit{
    to{
        transform:rotate(360deg);
    }
}

@keyframes s4Float{
    50%{
        transform:translateY(-7px);
    }
}

@keyframes s4Dust{
    to{
        background-position:
            20px 30px,
            -30px 20px,
            25px -30px,
            -20px 35px;
    }
}

@keyframes s4Wrong{
    25%{transform:translateX(-5px)}
    50%{transform:translateX(5px)}
    75%{transform:translateX(-3px)}
    100%{transform:translateX(0)}
}


/* =========================================================
   SURPRISE 4 — VISIBILITY SAFETY PATCH
   Prevent old/global CSS from hiding the initial screen.
========================================================= */

#surprise4 .s4-stage{
    position:relative !important;
    z-index:10 !important;
}

#surprise4 .s4-intro{
    position:relative !important;
    z-index:30 !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
    width:100% !important;
    max-width:520px !important;
}

#surprise4 .s4-intro.hide{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

#surprise4 .s4-orbit,
#surprise4 .s4-kicker,
#surprise4 .s4-intro h1,
#surprise4 .s4-intro .s4-subtitle,
#surprise4 #s4Begin{
    position:relative !important;
    z-index:31 !important;
}

#surprise4 #s4Begin{
    display:flex !important;
    visibility:visible !important;
}

#surprise4 .s4-game,
#surprise4 .s4-reveal,
#surprise4 .s4-capsule,
#surprise4 .s4-choice-screen{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) translateY(22px) !important;
    z-index:25 !important;
}

#surprise4 .s4-game.show,
#surprise4 .s4-reveal.show,
#surprise4 .s4-capsule.show,
#surprise4 .s4-choice-screen.show{
    transform:translate(-50%,-50%) !important;
}

@media(max-width:420px){

    #surprise4 .s4-intro{
        width:90vw !important;
    }

}