.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999999;
    overflow-y:auto;
}

.modal.hidden{
    display:none;
}

.modal-content{
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../img/galaxy.jpg);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-color:rgba(255,255,255,0.08);
    backdrop-filter:blur(20px);
    padding:30px;
    border-radius:20px;
    width:80%;
    max-width:600px;
}

#resultContainer{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.close-btn{
    position:absolute;
    top:20px;
    right:20px;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
}

.close-btn img{
    display:block;
    transition:transform 0.2s cubic-bezier(.2, .8, .2, 1),opacity 0.2s ease,filter 0.2s ease;
}

.close-btn:hover img{
    transform:scale(1.3);
    filter:drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
}

.close-btn:active img{
    transform:scale(0.8);
    opacity:0.7;
    filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.star{
    position:absolute;
    width:12px;
    height:12px;
    background:white;
    border-radius:50%;
    cursor:pointer;
    transition:0.3s;
}

.star.active{
    background:#ff77b4;
    box-shadow:0 0 15px #ff77b4;
    transform:scale(1.3);
}

#puzzleContainer{
    position:relative;
    width:100%;
    height:400px;
}

#constellationCanvas{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
}

.star{
    position:absolute;
    width:12px;
    height:12px;
    background:white;
    border-radius:50%;
    z-index:2;
}

.star.active{
    background:#ff77b4;
    box-shadow:0 0 15px #ff77b4;
}

.shake{
    animation:shake 0.3s;
}

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

.constellation-template{
    display:none !important;
}

.active-template{
    display:block !important;
}

.result-active .modal-content{
    background-image:none !important;
    background-color:transparent !important;
    backdrop-filter:none !important;
}

.orion-layout{
    position:relative;
    display:inline-block;
    width:min(90vw,400px);
    aspect-ratio:9/16;
    max-width:90vw;
    max-height:80vh;
    background-image:url("../constellations/results/orion.png");
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    border-radius:16px;
    overflow:hidden;
    background-color:transparent;
}

.ursa-major-layout{
    position:relative;
    display:inline-block;
    width:min(90vw,400px);
    aspect-ratio:9/16;
    max-width:90vw;
    max-height:80vh;
    background-image:url("../constellations/results/ursa-major.gif");
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    border-radius:16px;
    overflow:hidden;
    background-color:transparent;
}

.cassiopeia-layout{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mirror-wrapper{
    position:relative;
    width:clamp(220px,70vw,500px);
    aspect-ratio:1024/1536;
    max-height:80vh !important;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 0 40px rgba(255,119,180,0.15),0 0 100px rgba(122,44,255,0.12);
}

.mirror-base,.mirror-text,.mirror-blur,#cassiopeiaScratch{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.mirror-base,.mirror-text{
    object-fit:fill;
    user-select:none;
    -webkit-user-drag:none;
}

.mirror-base{
    z-index:1;
}

.mirror-text,.mirror-blur{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    mask-repeat:no-repeat;
    -webkit-mask-repeat:no-repeat;
    mask-size:100% 100%;
    -webkit-mask-size:100% 100%;
}

.mirror-text{
    z-index:2;
    object-fit:fill;
}

.mirror-blur{
    z-index:3;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    opacity:0;
    transition:opacity 500ms ease,clip-path 500ms ease;
    will-change:clip-path,opacity;
}

#cassiopeiaScratch{
    z-index:4;
    touch-action:none;
    cursor:pointer;
}

.cassiopeia-layout h2{
    text-align:center;
    margin-right:20px;
    margin-left:0;
}

@media (max-width: 768px){
    .cassiopeia-layout h2{
        margin-left:20px;
        margin-right:0;
    }
}

.lyra-template{
    max-height:90vh;
    overflow-y:scroll;
}

.lyra-layout{
    display:flex;
    align-items:center;
    justify-content:center;
}

.lyra-musicbox-wrapper{
    margin-top:80px !important;
    position:relative;
    width:min(90vw,320px);
}

.lyra-musicbox{
    width:100%;
    display:block;
    border-radius:20px;
    user-select:none;
    pointer-events:none;
}

.lyra-click-zone{
    position:absolute;
    left:23.5%;
    width:53.4%;
    top:50.6%;
    height:16.6%;
    cursor:pointer;
    background:transparent;
}

.lyra-click-zone:hover{
    box-shadow:0 0 20px rgba(255,255,255,0.08);
}

#lyraInfo{
    margin-top:20px;
    width:min(90vw,320px);
    background:rgba(122,44,255,.35);
    border-radius:18px;
    padding:15px;
    transition:.35s;
}

.lyra-player{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

#lyraPlayPause{
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:rgba(255,255,255,.15);
    color:white;
}

#lyraSeek{
    flex:1;
    cursor:pointer;
}

#lyraSeek::-webkit-slider-thumb{
    cursor:pointer;
}

#lyraSeek::-moz-range-thumb{
    cursor:pointer;
}

.lyra-times{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    opacity:.75;
    margin-top:8px;
}

#lyraParagraph{
    text-align:center;
    line-height:1.7;
    margin-top:10px;
}

.cygnus-layout{
    position:relative;
    width:min(92vw,450px);
    aspect-ratio:4/5;
    max-height:90vh;
    overflow:hidden;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:black;
}

.cygnus-scene{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    background:black;
}

.cygnus-sky{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    animation:skyFloat 14s ease-in-out infinite;
}

@keyframes skyFloat{
    0%,100%{transform:scale(1.08) translateY(0px)}
    50%{transform:scale(1.12) translateY(-10px)}
}

.cygnus-swan{
    position:absolute;
    top:18%;
    left:-70%;
    width:75%;
    opacity:0;
    z-index:3;
    pointer-events:none;
    filter:drop-shadow(0 0 20px rgba(255,255,255,0.45)) drop-shadow(0 0 60px rgba(255,255,255,0.25));
}

.cygnus-feather-wrapper{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(0.2);
    z-index:5;
}

.cygnus-feather{
    width:78%;
    filter:drop-shadow(0 0 30px rgba(255,255,255,0.2)) drop-shadow(0 0 80px rgba(255,119,180,0.3));
}

.cygnus-feather:hover {
    transform:scale(1.25);
    cursor:pointer;
}

.cygnus-feather-wrapper.active{
    animation:featherReveal 2.6s cubic-bezier(.19,1,.22,1) forwards;
}

@keyframes featherReveal{
    0%{opacity:0;transform:scale(0.2);filter:blur(12px)}
    55%{opacity:1;transform:scale(1.08);filter:blur(0px)}
    100%{opacity:1;transform:scale(1);filter:blur(0px)}
}

.scorpius-layout{
    position:relative;
    aspect-ratio:9/16;
    width:min(92vw,430px);
    max-height:90vh;
    overflow:hidden;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:black;
}

.scorpius-bg{
    position:absolute;
    inset:0;
    background-image:url("../constellations/results/scorpius-bg.png");
    background-size:cover;
    background-position:center;
    animation:scorpiusBgReveal 2s ease forwards;
}

@keyframes scorpiusBgReveal{
    from{opacity:0;transform:scale(1.05);filter:blur(10px)}
    to{opacity:1;transform:scale(1);filter:blur(0px)}
}

.scorpius-content{
    position:relative;
    z-index:2;
    width:100%;
    padding:30px;
    text-align:center;
}

.scorpius-line{
    opacity:0;
    transform:translateY(20px);
    animation:scorpiusTextReveal 1.8s ease forwards;
    font-family:'Playfair Display',serif;
    text-shadow:0 0 20px rgba(255,120,180,.55);
    letter-spacing:1px;
}

.scorpius-line-1{
    animation-delay:1.2s;
    font-size:2rem;
    line-height:1.4;
}

.scorpius-line-2{
    animation-delay:3.2s;
    margin-top:40px;
    margin-bottom:24px;
    font-size:1rem;
    opacity:.85;
}

@keyframes scorpiusTextReveal{
    to{opacity:1;transform:translateY(0px)}
}

.scorpius-bottles{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
    gap:40px;
    opacity:0;
    animation:bottleReveal 1.5s ease forwards;
    animation-delay:4s;
}

@keyframes bottleReveal{
    to{opacity:1}
}

.scorpius-bottle{
    width:110px;
    cursor:pointer;
    transition:transform .4s ease,filter .4s ease;
}

.scorpius-bottle:hover{
    transform:translateY(-10px) scale(1.05);
    filter:brightness(1.2) drop-shadow(0 0 20px rgba(255,120,180,.55));
}

.scorpius-gif-wrapper{
    position:absolute;
    inset:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.65);
}

.scorpius-gif-wrapper{
    opacity:0;
    padding:20px;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .8s ease;
}

.scorpius-gif-wrapper.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.scorpius-gif{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    transform:scale(.9);
}

.scorpius-ending{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    text-align:center;
    font-size:2rem;
    line-height:1.5;
    font-family:'Playfair Display',serif;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(6px);
    color:white;
    text-shadow:0 0 25px rgba(255,120,180,.7);
    opacity:0;
    visibility:hidden;
    transform:scale(.96);
    filter:none;
    transition:opacity 1.8s ease,transform 1.8s ease,filter 1.8s ease;
    pointer-events:none;
}

.scorpius-ending.show{
    opacity:1;
    visibility:visible;
    transform:scale(1);
    filter:blur(0px);
}

.scorpius-ending.show{
    opacity:1;
}

@keyframes finalTextReveal{
    from{opacity:0;transform:scale(.96);filter:blur(8px)}
    to{opacity:1;transform:scale(1);filter:blur(0px)}
}

.hidden-element{
    opacity:0;
    transform:translateY(25px);
    pointer-events:none;
}

.reveal-element{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0px);
    transition:opacity 1.6s ease,transform 1.6s ease;
}

.scorpius-choice{
    margin-top:40px;
}

.scorpius-sequence{
    position:relative;
    z-index:2;
    width:100%;
    padding:30px;
    text-align:center;
}

.scorpius-layout,.scorpius-sequence,.scorpius-line-1,.scorpius-line-2,.scorpius-bottles,.scorpius-bottle,.scorpius-ending{
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-font-smoothing:antialiased;
    will-change:transform,opacity;
}

.scorpius-bottles{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:clamp(12px,4vw,40px);
    width:100%;
    flex-wrap:nowrap;
}

.scorpius-bottle{
    width:clamp(90px,28vw,180px);
    height:auto;
    max-height:55vh;
    object-fit:contain;
    transition:transform .35s ease;
}

@media (max-width: 768px){
    .scorpius-template,.scorpius-layout{
        width:100%;
        padding:20px 12px;
    }
    .scorpius-bottles{
        gap:14px;
    }
    .scorpius-bottle{
        width:min(38vw,140px);
        max-height:42vh;
    }
    .scorpius-choice{
        width:100%;
    }
}

@media (max-width: 420px){
    .scorpius-bottle{
        width:min(40vw,110px);
        max-height:38vh;
    }
    .scorpius-line-1,.scorpius-line-2{
        font-size:clamp(1rem,4vw,1.3rem);
    }
}

.andromeda-layout{
    position:relative;
    aspect-ratio:9/16;
    width:min(92vw,430px);
    max-height:85vh;
    padding:clamp(16px,4vw,40px);
    overflow-y:auto;
    overflow-x:hidden;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:black;
}

.andromeda-bg{
    position:absolute;
    inset:0;
    background-image:url("../constellations/results/andromeda-bg.png");
    background-size:cover;
    background-position:center;
    filter:brightness(.8);
}

.walkie-wrapper{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:30px;
}

.walkie-image{
    width:100%;
    user-select:none;
    pointer-events:none;
    filter:drop-shadow(0 0 25px rgba(120,180,255,.2));
    transition:transform .4s ease,filter .4s ease;
}

.walkie-button-hitbox{
    position:absolute;
    cursor:pointer;
    z-index:5;
}

.walkie-button-hitbox:hover{
    filter:brightness(1.1);
}

.walkie-subtitle{
    margin-top:24px;
    min-height:72px;
    width:100%;
    text-align:center;
    font-size:clamp(.9rem,3vw,1.15rem);
    line-height:1.7;
    color:white;
    opacity:0;
    transition:opacity .8s ease;
    text-shadow:0 0 15px rgba(180,220,255,.35);
    font-family:'Playfair Display',serif;
    letter-spacing:.5px;
    padding-inline:16px;
    overflow-wrap:break-word;
    display:flex;
    align-items:center;
    justify-content:center;
}

.walkie-subtitle.show{
    opacity:1;
}

.andromeda-final-text{
    position:absolute;
    inset:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    text-align:center;
    font-size:2.6rem;
    line-height:1.4;
    color:white;
    opacity:0;
    visibility:hidden;
    transition:opacity 2s ease;
    text-shadow:0 0 30px rgba(180,220,255,.35);
    font-family:'Playfair Display',serif;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(3px);
}

.andromeda-final-text.show{
    opacity:1;
    visibility:visible;
}

.walkie-image.active{
    animation:walkiePulse 2s infinite;
}

@keyframes walkiePulse{
    0%,100%{filter:drop-shadow(0 0 10px rgba(120,255,180,.2))}
    50%{filter:drop-shadow(0 0 30px rgba(120,255,180,.55))}
}

.walkie-container{
    position:relative;
    width:80%;
    max-width:280px;
    display:flex;
    align-items:center;
    justify-content:center;
}

@media (max-height: 740px){
    .walkie-wrapper{
        justify-content:flex-start;
        padding-top:40px;
    }
    .walkie-container{
        width:70%;
    }
    .walkie-subtitle{
        min-height:auto;
        margin-top:18px;
    }
    .andromeda-final-text{
        font-size:clamp(1.5rem, 6vw, 2.2rem);
        padding:24px;
    }
}

.leo-layout{
    position:relative;
    width:min(92vw,430px);
    height:90vh;
    max-height:90vh;
    overflow:hidden !important;
    border-radius:24px;
    background:black;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.leo-bg{
    position:absolute;
    inset:0;
    background-image:url("../constellations/results/leo-sky-bg.png");
    background-size:cover;
    background-position:center;
    filter:brightness(.82) saturate(1.08);
    z-index:1;
}

#leoFireworks{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:2;
}

.leo-image-wrapper{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    opacity:0;
    z-index:3;
    transition:opacity 2.5s ease,transform 2.5s ease;
    transform:translateY(40px) scale(.96);
    pointer-events:none;
    transition:.8s ease;
}

.leo-image-wrapper::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    z-index:0;
    width:100%;
    height:120px;
    background:linear-gradient(to top,rgba(0,0,0,.45),transparent);
    pointer-events:none;
}

.leo-image-wrapper.show{
    opacity:1;
    transform:translateY(0) scale(1);
}

.leo-dragons-image,.leo-final-image{
    position:relative;
    z-index:1;
    display:block;
    flex-shrink:0;
}

.leo-dragons-image{
    width:55%;
    height:auto;
    margin-top:20px;
    object-fit:contain;
    filter:drop-shadow(0 0 25px rgba(255,180,220,.22));
    animation:leoFloat 5s ease-in-out infinite,leoGlow 4s ease-in-out infinite;
}

.leo-final-image{
    width:68%;
    margin-bottom:5%;
    height:auto;
    object-fit:contain;
    object-position:bottom;
    filter:drop-shadow(0 0 25px rgba(255,180,220,.22));
    animation:leoFloat 5s ease-in-out infinite,leoGlow 4s ease-in-out infinite;
}

@keyframes leoFloat{
    0%,100%{transform:translateY(0px)}
    50%{transform:translateY(-10px)}
}

@keyframes leoGlow{
    0%,100%{filter:drop-shadow(0 0 25px rgba(255,180,220,.2))}
    50%{filter:drop-shadow(0 0 45px rgba(255,180,220,.45))}
}

@media (orientation: portrait){
    .leo-layout {
        max-height:70vh;
        aspect-ratio:9/13;
    }
    .leo-layout img,.leo-layout::before{
        object-fit:contain;
    }
}

.pisces-layout{
    position:relative;
    width:min(92vw,430px);
    height:90vh;
    max-height:90vh;
    overflow:hidden;
    border-radius:24px;
    background:black;
    display:flex;
    align-items:center;
    justify-content:center;
}

.pisces-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:2;
    transition:opacity 2.5s ease,transform 3s ease,filter 3s ease;
}

.pisces-video.fade-out{
    opacity:0;
    transform:scale(1.06);
    filter:blur(12px) brightness(.45);
}

.pisces-bg{
    position:absolute;
    inset:0;
    background-image:url("../constellations/results/pisces-sea.gif");
    background-size:cover;
    background-position:center;
    opacity:0;
    z-index:1;
    transform:scale(1.05);
    filter:brightness(.5) saturate(1.15) blur(1px);
    transition:opacity 2.5s ease,transform 6s ease;
}

.pisces-bg.active{
    opacity:1;
    transform:scale(1);
}

.pisces-ending{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    opacity:0;
    transition:opacity 3s ease;
}

.pisces-ending.show{
    opacity:1;
}

.pisces-text{
    position:relative;
    max-width:92%;
    text-align:center;
    color:white;
    font-size:clamp(1.15rem,3vw,1.9rem);
    line-height:1.9;
    font-family:'Playfair Display',serif;
    font-style:italic;
    letter-spacing:.5px;
    text-shadow:0 0 12px rgba(180,220,255,.35),0 0 30px rgba(130,170,255,.35),0 0 60px rgba(120,180,255,.2);
    animation:piscesWaterFloat 3.6s ease-in-out infinite,piscesTextReveal 1.4s ease-out;
    will-change:transform,opacity;
}

.pisces-glow{
    position:absolute;
    width:75%;
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,rgba(130,170,255,.16),transparent 70%);
    filter:blur(40px);
    animation:piscesPulse 6s ease-in-out infinite;
}

@keyframes piscesWaterFloat{
    0%{transform:translateX(0px) translateY(0px) rotate(0deg)}
    20%{transform:translateX(4px) translateY(-6px) rotate(.4deg)}
    50%{transform:translateX(-5px) translateY(4px) rotate(-.4deg)}
    75%{transform:translateX(3px) translateY(-3px) rotate(.3deg)}
    100%{transform:translateX(0px) translateY(0px) rotate(0deg)}
}

@keyframes piscesTextReveal{
    from{opacity:0;transform:translateY(25px) scale(.92);filter: blur(10px)}
    to{opacity:1;transform:translateY(0) scale(1);filter:blur(0px)}
}

@keyframes piscesPulse{
    0%,100%{transform:scale(1);opacity:.6}
    50%{transform:scale(1.08);opacity:1}
}

@media (max-width: 768px){
    .pisces-text{
        line-height:1.75;
        padding-inline:10px;
    }
}

.draco-layout{
    position:relative;
    width:min(90vw,500px);
    height:90vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.draco-scene{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.draco-dragon{
    position:relative;
    width:100%;
    height:100%;
    max-height:90vh;
    object-fit:contain;
    object-position:center;
    display:block;
}

.wake-dragon-btn{
    position:absolute;
    top:7%;
    left:50%;
    transform:translateX(-50%);
    z-index:100;
    padding:12px 30px;
    border:none;
    border-radius:999px;
    background:linear-gradient(135deg,rgba(255,90,120,0.35),rgba(255,60,0,0.25));
    color:white;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.15);
    cursor:pointer;
    box-shadow:0 0 25px rgba(255,80,80,0.35),inset 0 0 20px rgba(255,255,255,0.05);
    transition:0.35s ease;
}

.wake-dragon-btn:hover{
    transform:translateX(-50%) scale(1.05);
    box-shadow:0 0 45px rgba(255,60,0,0.55),0 0 90px rgba(255,0,0,0.25);
}

.wake-dragon-btn:active{
    transform:translateX(-50%) scale(0.96);
}

.dragon-eye{
    position:absolute;
    width:16%;
    height:7.5%;
    opacity:0;
    transform:scaleY(0);
    overflow:hidden;
    isolation:isolate;
    filter:blur(0.5px);
    clip-path: polygon(0% 50%,10% 28%,25% 12%,50% 0%,75% 12%,90% 28%,100% 50%,90% 72%,75% 88%,50% 100%,25% 88%,10% 72%);
    z-index:20;
}

.dragon-eye::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at center,rgba(255,255,220,1) 0%,rgba(255,220,120,1) 12%,rgba(255,140,0,0.95) 28%,rgba(255,60,0,0.92) 55%,rgba(120,0,0,0.8) 100%);
    filter:blur(1px) brightness(1.2);
    mask-image:radial-gradient(ellipse at center,black 55%,transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse at center,black 55%,transparent 100%);
    animation:dragonEyeFlicker 0.4s infinite alternate,dragonEyeMorph 2.2s infinite ease-in-out;
    box-shadow:0 0 18px rgba(255,120,0,0.6),0 0 40px rgba(255,60,0,0.4),0 0 70px rgba(255,0,0,0.25);
}

.dragon-eye::after{
    content:"";
    position:absolute;
    top:14%;
    left:50%;
    width:8%;
    height:72%;
    transform:translateX(-50%);
    border-radius:60% 40% 50% 50% / 15% 15% 85% 85%;
    background:linear-gradient(to bottom,rgba(0,0,0,0.95),rgba(20,0,0,1),rgba(0,0,0,0.95));
    filter:blur(0.4px);
    box-shadow:0 0 8px rgba(0,0,0,0.8),0 0 15px rgba(255,80,0,0.3);
    animation:pupilPulse 3s ease-in-out infinite;
}

@keyframes pupilPulse{
    0%,100%{transform:translateX(-50%) scaleY(1)}
    50%{transform: translateX(-50%) scaleY(0.82)}
}

@keyframes dragonEyeFlicker{
    from{filter: brightness(1) blur(1px)}
    to{filter:brightness(1.5) blur(2px)}
}

@keyframes dragonEyeMorph{
    0%,100%{clip-path: polygon(0% 50%,10% 30%,25% 15%,50% 5%,75% 15%,90% 30%,100% 50%,90% 70%,75% 85%,50% 95%,25% 85%,10% 70%);}
    50%{clip-path: polygon(0% 50%,8% 25%,20% 10%,50% 0%,80% 10%,92% 25%,100% 50%,92% 75%,80% 90%,50% 100%,20% 90%,8% 75%);}
}

.left-eye{
    left:18%;
    top:50%;
}

.right-eye{
    right:18%;
    top:50%;
}

.dragon-eye.awaken{
    animation:dragonEyeAppear 2.5s cubic-bezier(.16,.84,.44,1) forwards;
}

@keyframes dragonEyeAppear{
    0%{opacity:0;transform:scaleY(0) scaleX(0.2) rotate(-2deg)}
    25%{opacity:1}
    55%{transform:scaleY(1.5) scaleX(1.15) rotate(1deg)}
    100%{opacity:1;transform:scaleY(1) scaleX(1)}
}

.smoke-container{
    position:absolute;
    width:10%;
    height:10%;
    pointer-events:none;
}

.left-smoke{
    left:30.07%;
    top:78.16%;
}

.right-smoke{
    right:30.07%;
    top:78.16%;
}

.smoke{
    position:absolute;
    width:40px;
    height:40px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.28),rgba(180,180,180,.10),transparent 70%);
    filter:blur(5px);
    opacity:.6;
    animation:dragonSmoke 4s linear forwards;
}

@keyframes dragonSmoke{
    0%{opacity:0;transform:translate(0px,0px) scale(0.3)}
    10%{opacity:1}
    100%{opacity:0;transform:translate(var(--xDrift),-220px) scale(3.5)}
}

.fire-particle{
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:radial-gradient(circle,#fff6a8,#ff7b00 50%,#ff2200);
    box-shadow:0 0 12px #ff6600,0 0 25px #ff2200;
    animation:emberFly 1.8s linear forwards;
}

@keyframes emberFly{
    0%{opacity:1;transform:translate(0px,0px) scale(1)}
    100%{opacity:0;transform:translate(var(--xDrift),-140px) scale(0)}
}

.dragon-fire-burst{
    position:absolute;
    width:45px;
    height:45px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,220,0.95) 0%,rgba(255,180,0,0.95) 18%,rgba(255,90,0,0.85) 45%,rgba(255,0,0,0) 75%);
    filter:blur(6px) brightness(1.4);
    mix-blend-mode:screen;
    animation:dragonBurst 0.9s ease-out forwards;
}

@keyframes dragonBurst{
    0%{opacity:0;transform:scale(0.2) translateY(0px)}
    20%{opacity:1}
    100%{opacity:0;transform:scale(2.8) translateY(-50px)}
}

.draco-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px;
    opacity:0;
    pointer-events:none;
    transition:1.2s ease;
    z-index:50;
}

.draco-overlay.show{
    opacity:1;
}

.draco-overlay p{
    font-size:1.8rem;
    line-height:1.6;
    color:white;
    text-shadow:0 0 20px rgba(255,80,80,0.6);
    animation:overlayText 2s ease;
}

@keyframes overlayText{
    from{opacity:0;transform:translateY(20px) scale(0.95);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

.wake-dragon-btn.vanish{
    opacity:0;
    transform:translateX(-50%) translateY(-15px) scale(0.8);
    pointer-events:none;
}

.pegasus-layout{
    position:relative;
    width:min(90vw,500px);
    height:90vh;
    aspect-ratio:9/16;
    overflow:hidden;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
    box-shadow:0 0 40px rgba(180,220,255,0.12),0 0 90px rgba(120,180,255,0.08);
}

.pegasus-scene{
    position:relative;
    width:100%;
    height:100%;
}

.pegasus-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(0.9) contrast(1.08) saturate(1.05);
    transform:scale(1.02);
}

.pegasus-text{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:40%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px;
    z-index:20;
    pointer-events:none;
}

.pegasus-text h2{
    display:flex;
    flex-direction:column;
    gap:18px;
    font-size:clamp(1.7rem, 4vw, 2.6rem);
    font-weight:300;
    line-height:1.25;
    letter-spacing:1px;
    color:white;
    text-shadow:0 0 10px rgba(255,255,255,0.25),0 0 25px rgba(180,220,255,0.22),0 0 60px rgba(120,180,255,0.18);
    animation:pegasusTextReveal 3s ease;
}

.pegasus-text h2 span{
    opacity:0;
    transform:translateY(25px);
    animation:pegasusLineReveal 1.6s ease forwards;
}

.pegasus-text h2 span:nth-child(1){
    animation-delay:0.4s;
}

.pegasus-text h2 span:nth-child(2){
    animation-delay:1.2s;
}

.pegasus-fly{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:100%;
    max-height:40%;
    object-fit:contain;
    object-position:bottom center;
    z-index:15;
    filter:drop-shadow(0 0 20px rgba(255,255,255,0.25)) drop-shadow(0 0 45px rgba(160,220,255,0.18));
    animation:pegasusFloat 5s ease-in-out infinite;
}

@keyframes pegasusFloat{
    0%,100%{transform:translateX(-50%) translateY(0px);}
    50%{transform:translateX(-50%) translateY(-14px);}
}

@keyframes pegasusLineReveal{
    to{opacity:1;transform:translateY(0px);}
}

.pegasus-scene::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(0,0,0,0.12),transparent 30%,transparent 70%,rgba(0,0,0,0.25));
    z-index:5;
    pointer-events:none;
}

.aquarius-layout{
    position:relative;
    width:min(90vw,500px);
    height:90vh;
    aspect-ratio:9/16;
    overflow:hidden;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
}

.aquarius-scene{
    position:relative;
    width:100%;
    height:100%;
}

.aquarius-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.aquarius-puddle::before{
    content:"";
    position:absolute;
    inset:-20%;
    background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,0.08) 40%,transparent 60%);
    transform:translateX(-120%) rotate(8deg);
    pointer-events:none;
    opacity:0;
}

.aquarius-puddle.active::before{
    animation:waterLightSweep 2s ease forwards;
}

@keyframes waterLightSweep{
    0%{opacity:0;transform:translateX(-120%) rotate(8deg)}
    20%{opacity:1}
    100%{opacity:0;transform:translateX(120%) rotate(8deg)}
}

.aquarius-puddle{
    position:absolute;
    top:63.8%;
    left:14.55%;
    width:58.88%;
    height:20.86%;
    overflow:hidden;
    cursor:pointer;
    border-radius:50%;
    z-index:10;
}

.aquarius-puddle::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,0.06),transparent,rgba(180,220,255,0.04));
    mix-blend-mode:screen;
    opacity:0.5;
    pointer-events:none;
}

.water-ripple{
    position:absolute;
    inset:-20%;
    opacity:0;
    pointer-events:none;
    background:repeating-radial-gradient(circle at center,rgba(255,255,255,0.08) 0px,rgba(255,255,255,0.03) 12px,transparent 26px,transparent 40px);
    filter:blur(10px);
    transform:scale(0.6);

}

.aquarius-puddle.active .water-ripple{
    animation:puddleRipple 2s ease forwards;
}

.aquarius-puddle.active{
    animation:puddleDistort 2s ease-in-out,puddleWave 2s ease-in-out;
}

.aquarius-memory{
    position:absolute;
    left:54%;
    top:42%;
    width:62%;
    aspect-ratio:4/3;
    object-fit:cover;
    object-position:center;
    transform:translate(-50%, -50%) scale(0.7);
    opacity:0;
    z-index:20;
    border-radius:14px;
    filter:brightness(0.38) saturate(0.65) contrast(0.9) blur(1.2px);
    transition:opacity 3s ease,transform 3s ease,filter 3s ease;
    pointer-events:none;
    mix-blend-mode:screen;
    mask-image:radial-gradient(ellipse at center,black 42%,transparent 88%);
    -webkit-mask-image:radial-gradient(ellipse at center,black 42%,transparent 88%);
}

.aquarius-memory.show{
    opacity:0.55;
    transform:translate(-50%, -50%) scale(1);
    filter:brightness(0.52) saturate(0.8) contrast(0.95) blur(0.3px);
}

@keyframes puddleDistort{
    0%{transform:scale(1) skewX(0deg)}
    12%{transform:scale(1.02,0.97) skewX(-1deg)}
    24%{transform:scale(0.98,1.03) skewX(1deg)}
    38%{transform:scale(1.03,0.96) skewX(-0.5deg)}
    52%{transform:scale(0.99,1.01) skewX(0.4deg)}
    100%{transform:scale(1) skewX(0deg)}
}

@keyframes puddleWave{
    0%{filter:brightness(1) blur(0px)}
    30%{filter:brightness(1.08) blur(0.8px)}
    60%{filter:brightness(0.95) blur(0.4px)}
    100%{filter:brightness(1) blur(0px)}
}

@keyframes puddleRipple{
    0%{opacity:0;transform:scale(0.4) rotate(0deg)}
    20%{opacity:0.6}
    100%{opacity:0;transform:scale(1.8) rotate(8deg)}
}

.aquarius-text{
    position:absolute;
    top:10%;
    left:50%;
    transform:translateX(-50%);
    width:80%;
    text-align:center;
    z-index:30;
    pointer-events:none;
}

.aquarius-text h2{
    display:flex;
    flex-direction:column;
    gap:16px;
    color:white;
    font-size:clamp(1.5rem,3vw,2.4rem);
    font-weight:400;
    font-style:italic;
    line-height:1.35;
    letter-spacing:1px;
    text-shadow:0 0 12px rgba(255,255,255,0.2),0 0 30px rgba(120,180,255,0.18);
    animation:aquariusTextReveal 2.5s ease;
}

.aquarius-text span{
    opacity:0;
    transform:translateY(20px);
    animation:aquariusLineReveal 1.6s ease forwards;
}

.aquarius-text span:nth-child(1){
    animation-delay:0.4s;
}

.aquarius-text span:nth-child(2){
    animation-delay:1.2s;
}

@keyframes aquariusLineReveal{
    to{opacity:1;transform:translateY(0px)}
}

@media (max-width: 768px){
    .draco-layout{
        max-width:90vw;
        height:80svh;
        aspect-ratio:9/16;
    }
    .draco-layout img{
        object-fit:cover;
    }
    .left-eye {
        margin-left:-25px;
    }
    .right-eye {
        margin-right:-25px;
    }
    .aquarius-layout{
        transform:scale(0.85);
    }
    .pegasus-layout{
        aspect-ratio:9/13;
        transform:scale(0.85);
        transform-origin:top center;
        max-height:80svh;
        overflow:hidden;
    }
    .pegasus-layout img,.pegasus-layout video,.pegasus-layout canvas{
        max-width:100%;
        height:80svh;
    }
    .pegasus-layout h2 {
        padding-top:30px;
    }
    .pegasus-fly {
        padding-bottom:110px;
    }
}