/* ==========================================================
   FRIENDSHIP.EXE
   Designed by ChatGPT 😈
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

    --bg:#030712;
    --glass:rgba(255,255,255,.08);
    --glass-border:rgba(255,255,255,.12);

    --blue:#5fb7ff;
    --purple:#7d6bff;
    --cyan:#00f2ff;

    --white:#ffffff;
    --text:#d9e4ff;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{
    
    /* ================= LOGIN SCREEN ================= */

#loginScreen{

position:fixed;
top:0;
left:0;

width:100%;
height:100vh;

display:flex;
justify-content:center;
align-items:center;

background:
linear-gradient(
135deg,
#020617,
#1e1b4b
);

z-index:9999;

}


.loginBox{

background:rgba(255,255,255,0.12);

backdrop-filter:blur(15px);

padding:40px;

border-radius:25px;

text-align:center;

color:white;

box-shadow:
0 0 40px rgba(255,0,120,0.4);

}


.loginBox h1{

font-size:35px;

}


.loginBox input{

width:250px;

padding:15px;

border:none;

border-radius:20px;

margin:20px;

font-size:16px;

outline:none;

}


.loginBox button{

padding:12px 35px;

border:none;

border-radius:25px;

background:#ff4d88;

color:white;

font-size:18px;

cursor:pointer;

transition:.3s;

}


.loginBox button:hover{

transform:scale(1.1);

}


#error{

color:#ffaaaa;

margin-top:15px;

}


    font-family:"Poppins",sans-serif;

    background:var(--bg);

    color:white;

    overflow-x:hidden;

}

/* ==========================================================
   SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(var(--blue),var(--purple));

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#08101d;

}

/* ==========================================================
   GALAXY
==========================================================*/

#stars{

    position:fixed;

    inset:0;

    z-index:-10;

    background:
    radial-gradient(circle,#ffffff 1px,transparent 1px);

    background-size:40px 40px;

    animation:starsMove 120s linear infinite;

    opacity:.4;

}

@keyframes starsMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-1600px);

    }

}

/* ==========================================================
   NEBULA
==========================================================*/

#nebula{

    position:fixed;

    inset:0;

    z-index:-11;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(0,200,255,.25),
    transparent 30%),

    radial-gradient(circle at 75% 35%,
    rgba(146,0,255,.22),
    transparent 35%),

    radial-gradient(circle at 60% 80%,
    rgba(0,255,255,.12),
    transparent 30%),

    linear-gradient(150deg,
    #02040d,
    #071526,
    #02050c);

    filter:blur(20px);

    animation:nebula 20s ease-in-out infinite alternate;

}

@keyframes nebula{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.15);

    }

}

/* ==========================================================
   CURSOR GLOW
==========================================================*/

#cursorGlow{

    position:fixed;

    width:280px;

    height:280px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(0,255,255,.25),

    transparent 70%);

    transform:translate(-50%,-50%);

    pointer-events:none;

    z-index:-2;

    filter:blur(18px);

}

/* ==========================================================
   FLOATING EMOJIS
==========================================================*/

#floatingEmojis{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:-1;

}

/* ==========================================================
   SECTION
==========================================================*/

section{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    padding:80px 8%;

}

/* ==========================================================
   GLASS
==========================================================*/

.glass{

    width:min(900px,95%);

    padding:60px;

    text-align:center;

    background:var(--glass);

    backdrop-filter:blur(25px);

    border:1px solid var(--glass-border);

    border-radius:30px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.45);

    transition:.45s;

}

.glass:hover{

    transform:translateY(-8px);

    box-shadow:

    0 30px 80px rgba(0,191,255,.25);

}

/* ==========================================================
   HERO
==========================================================*/

#heroTitle{

    font-size:6rem;

    font-weight:800;

    background:

    linear-gradient(90deg,

    white,

    #78e8ff,

    #8e6cff);

    -webkit-background-clip:text;

    color:transparent;

    margin-bottom:20px;

}

#hero p{

    font-size:1.5rem;

    line-height:2;

    color:var(--text);

}

button{

    margin-top:45px;

    padding:18px 60px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:1.15rem;

    font-weight:700;

    color:white;

    background:

    linear-gradient(135deg,

    var(--blue),

    var(--purple));

    transition:.35s;

    box-shadow:

    0 15px 35px rgba(0,170,255,.35);

}

button:hover{

    transform:

    translateY(-6px)

    scale(1.05);

    box-shadow:

    0 25px 45px rgba(0,170,255,.45);

}

/* ==========================================================
   TITLES
==========================================================*/

h1{

    font-size:4rem;

    margin-bottom:25px;

}

h2{

    font-size:2rem;

}

p{

    font-size:1.3rem;

    line-height:1.9;

    color:var(--text);

}

/* ==========================================================
   TERMINAL
==========================================================*/

#bootScreen{

    background:black;

}

#terminal{

    color:#5bff7f;

    font-size:1.3rem;

    line-height:2;

    font-family:monospace;

}

/* ==========================================================
   FADE
==========================================================*/

.fade{

    opacity:0;

    transform:translateY(80px);

    transition:1s;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}

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

@media(max-width:900px){

#heroTitle{

font-size:3.7rem;

}

.glass{

padding:35px;

}

h1{

font-size:2.8rem;

}

p{

font-size:1.05rem;

}

}

@media(max-width:600px){

button{

width:100%;

}

#heroTitle{

font-size:2.7rem;

}

}
/* ==========================================================
   MEMORY VAULT
==========================================================*/

/* ===============================
   MEMORY VAULT FIX
================================ */

.memoryGrid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

max-width:900px;

margin:50px auto;

}


.memory{

height:180px;

width:180px;

border-radius:25px;

overflow:hidden;

cursor:pointer;

position:relative;

}


.memory img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}


.memory:hover img{

transform:scale(1.12);

}


/* MOBILE */

@media(max-width:800px){

.memoryGrid{

grid-template-columns:repeat(2,1fr);

}


.memory{

height:150px;

width:150px;

}

}


/* ==========================================================
   POPUP
==========================================================*/

#memoryPopup{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.popupCard{

    width:min(700px,90%);

    padding:45px;

    border-radius:30px;

    background:rgba(12,18,35,.95);

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
    0 30px 80px rgba(0,0,0,.5);

    animation:popup .4s ease;

}

@keyframes popup{

    from{

        transform:
        translateY(40px)
        scale(.9);

        opacity:0;

    }

    to{

        transform:
        translateY(0)
        scale(1);

        opacity:1;

    }

}

#closePopup{

    float:right;

    cursor:pointer;

    font-size:1.6rem;

    transition:.3s;

}

#closePopup:hover{

    color:#5fb7ff;

    transform:rotate(90deg);

}

#popupTitle{

    margin-bottom:20px;

}

#popupText{

    font-size:1.25rem;

    line-height:2;

}

/* ==========================================================
   ANALYSIS CARDS
==========================================================*/

.cards{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    width:100%;

    max-width:1200px;

}

.card{

    padding:35px;

    border-radius:25px;

    background:rgba(255,255,255,.07);

    border:1px solid rgba(255,255,255,.1);

    backdrop-filter:blur(18px);

    transition:.45s;

    position:relative;

    overflow:hidden;

}

.card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.12),
    transparent);

    transform:translateX(-120%);

}

.card:hover::after{

    transform:translateX(120%);

    transition:.9s;

}

.card:hover{

    transform:

    perspective(900px)

    rotateX(6deg)

    rotateY(-6deg)

    translateY(-10px);

    box-shadow:
    0 20px 45px rgba(0,170,255,.28);

}

.card h2{

    margin-bottom:15px;

}

/* ==========================================================
   RULES
==========================================================*/

#rules{

    text-align:center;

}

#rules .card{

    min-height:250px;

}

/* ==========================================================
   ACHIEVEMENTS
==========================================================*/

#achievements{

    text-align:center;

}

.achievementGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    margin-top:60px;

    width:100%;

    max-width:1000px;

}

.achievement{

    padding:30px;

    border-radius:25px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.1);

    backdrop-filter:blur(18px);

    transition:.4s;

}

.achievement:hover{

    transform:
    scale(1.08);

    box-shadow:
    0 20px 40px rgba(125,107,255,.3);

}

.achievement span{

    display:block;

    font-size:3rem;

    margin-bottom:20px;

}

/* ==========================================================
   FLOATING EFFECT
==========================================================*/

@keyframes floatSlow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.memory{

    animation:floatSlow 5s ease-in-out infinite;

}

.memory:nth-child(2){

    animation-delay:1s;

}

.memory:nth-child(3){

    animation-delay:2s;

}

.memory:nth-child(4){

    animation-delay:3s;

}
/* ==========================================================
   FINAL CHAPTER
==========================================================*/

#chapterTwo{

    text-align:center;
    position:relative;
    overflow:hidden;

}

#chapterTwo h1{

    font-size:5rem;

    background:linear-gradient(90deg,#ffffff,#8ce7ff,#8b7dff);

    -webkit-background-clip:text;
    color:transparent;

    margin-bottom:40px;

}

#chapterTwo p{

    max-width:900px;

    margin:auto;

    font-size:1.4rem;

    line-height:2.2;

}

#lastButton{

    margin-top:60px;

}

/* ==========================================================
   LOADING
==========================================================*/

#loading{

    display:none;

    text-align:center;

    background:#02030a;

}

#loading h1{

    font-size:3.8rem;

}

#bar{

    width:70%;

    max-width:700px;

    height:22px;

    background:rgba(255,255,255,.08);

    border-radius:50px;

    overflow:hidden;

    margin:50px auto;

}

#progress{

    width:0%;

    height:100%;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #00d4ff,
        #6d7cff,
        #b24dff
    );

    transition:width .3s linear;

}

#percent{

    font-size:2rem;

    margin-top:20px;

}

/* ==========================================================
   SHOOTING STARS
==========================================================*/

.shootingStar{

    position:fixed;

    width:180px;

    height:2px;

    background:linear-gradient(
        90deg,
        white,
        transparent
    );

    transform:rotate(-35deg);

    animation:shoot 2s linear forwards;

    z-index:-2;

}

@keyframes shoot{

    from{

        transform:
        translate(0,0)
        rotate(-35deg);

        opacity:1;

    }

    to{

        transform:
        translate(-1000px,700px)
        rotate(-35deg);

        opacity:0;

    }

}

/* ==========================================================
   FLOATING EMOJIS
==========================================================*/

.floatEmoji{

    position:fixed;

    font-size:2rem;

    pointer-events:none;

    animation:emojiFloat linear infinite;

    opacity:.35;

    z-index:-1;

}

@keyframes emojiFloat{

    from{

        transform:
        translateY(110vh)
        rotate(0deg);

    }

    to{

        transform:
        translateY(-120vh)
        rotate(360deg);

    }

}

/* ==========================================================
   BUTTON GLOW
==========================================================*/

button{

    position:relative;

    overflow:hidden;

}

button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.4),

        transparent

    );

}

button:hover::before{

    left:120%;

    transition:.8s;

}

/* ==========================================================
   SECTION ANIMATION
==========================================================*/

section{

    opacity:0;

    transform:translateY(80px);

    transition:1s;

}

section.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   GLOW TEXT
==========================================================*/

.glow{

    text-shadow:

    0 0 15px rgba(0,255,255,.6),

    0 0 30px rgba(0,170,255,.4);

}

/* ==========================================================
   IMAGE STYLE
==========================================================*/

.memory img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:20px;

}

/* ==========================================================
   GLASS HOVER
==========================================================*/

.glass:hover{

    border-color:#6fbfff;

}
/*==========================================================
    EPISODE 2C-2
    FINAL POLISH
==========================================================*/


/*==============================
        AURORA
==============================*/

body::before{

content:"";

position:fixed;

top:-40%;
left:-30%;

width:160%;
height:160%;

pointer-events:none;

z-index:-20;

background:

radial-gradient(circle at 20% 30%,rgba(0,255,255,.08),transparent 30%),

radial-gradient(circle at 70% 20%,rgba(155,89,255,.10),transparent 35%),

radial-gradient(circle at 60% 80%,rgba(0,180,255,.07),transparent 30%);

filter:blur(90px);

animation:auroraMove 18s ease-in-out infinite alternate;

}

@keyframes auroraMove{

0%{

transform:rotate(0deg) scale(1);

}

100%{

transform:rotate(10deg) scale(1.15);

}

}


/*==============================
      GLASS SHINE
==============================*/

.glass{

position:relative;

overflow:hidden;

}

.glass::before{

content:"";

position:absolute;

top:-120%;

left:-50%;

width:60%;

height:320%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transform:rotate(25deg);

transition:1.2s;

}

.glass:hover::before{

left:160%;

}


/*==============================
       HERO ANIMATION
==============================*/

#heroTitle{

animation:

heroFloat 5s ease-in-out infinite,

heroGlow 3s infinite alternate;

}

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

@keyframes heroGlow{

from{

filter:drop-shadow(0 0 10px #63d8ff);

}

to{

filter:drop-shadow(0 0 25px #8c6fff);

}

}


/*==============================
      CARD BORDER GLOW
==============================*/

.card{

border:1px solid rgba(255,255,255,.08);

}

.card:hover{

border-color:#66d6ff;

}


/*==============================
      MEMORY PULSE
==============================*/

.memory{

animation:

floatSlow 5s ease-in-out infinite,

pulseGlow 3s infinite alternate;

}

@keyframes pulseGlow{

from{

box-shadow:

0 0 15px rgba(0,170,255,.2);

}

to{

box-shadow:

0 0 35px rgba(130,90,255,.45);

}

}


/*==============================
       CONFETTI
==============================*/

.confetti{

position:fixed;

width:12px;

height:12px;

top:-20px;

pointer-events:none;

z-index:9999;

animation:confettiFall linear forwards;

}

@keyframes confettiFall{

0%{

transform:

translateY(-50px)

rotate(0deg);

opacity:1;

}

100%{

transform:

translateY(120vh)

rotate(900deg);

opacity:0;

}

}


/*==============================
      BUTTON CLICK
==============================*/

button:active{

transform:

scale(.95);

}


/*==============================
      IMAGE EFFECT
==============================*/

.memory img{

transition:.45s;

}

.memory:hover img{

transform:scale(1.1);

}


/*==============================
      FOOTER STYLE
==============================*/

footer{

padding:50px;

text-align:center;

color:#9cb8d9;

font-size:1rem;

opacity:.6;

}


/*==============================
      MOBILE
==============================*/

@media(max-width:900px){

.memoryGrid{

grid-template-columns:repeat(2,1fr);

}

.cards{

grid-template-columns:1fr;

}

#chapterTwo h1{

font-size:3rem;

}

#chapterTwo p{

font-size:1.1rem;

}

}

@media(max-width:600px){

.memoryGrid{

grid-template-columns:1fr;

}

.memory{

height:140px;

font-size:3.5rem;

}

button{

width:100%;

padding:16px;

}

.glass{

padding:25px;

}

}


/*==============================
      FADE HELPERS
==============================*/

.hidden{

display:none;

}

.visible{

display:block;

}


/*==============================
      SELECTION
==============================*/

::selection{

background:#5fc9ff;

color:#fff;

}


/*==============================
      END
==============================*/

/* ==========================================
   FRIEND ANALYSIS UPGRADE
========================================== */


#analysis{

padding:80px 5%;

}


#analysis h1{

text-align:center;

font-size:3.5rem;

margin-bottom:50px;

background:

linear-gradient(
90deg,
#ffffff,
#6dd5ff,
#b084ff
);

-webkit-background-clip:text;

color:transparent;

}


/* CARD GRID */

#analysis .cards{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:30px;

max-width:1100px;

margin:auto;

}



/* ANALYSIS CARD */

#analysis .card{

background:

linear-gradient(

145deg,

rgba(255,255,255,.12),

rgba(255,255,255,.03)

);


border:

1px solid rgba(255,255,255,.15);


border-radius:30px;


padding:35px 25px;


text-align:center;


backdrop-filter:blur(15px);


box-shadow:

0 20px 40px rgba(0,0,0,.25);


transition:.45s;


position:relative;

overflow:hidden;

}



/* glowing line */

#analysis .card::before{

content:"";

position:absolute;

top:0;

left:0;

height:5px;

width:100%;


background:

linear-gradient(

90deg,

#00eaff,

#9b5cff

);


transform:scaleX(0);

transition:.4s;

}


#analysis .card:hover::before{

transform:scaleX(1);

}



#analysis .card:hover{

transform:

translateY(-12px)

scale(1.03);


box-shadow:

0 25px 60px rgba(0,200,255,.25);

}



/* TITLE */

#analysis .card h2{

font-size:1.8rem;

margin-bottom:20px;


}


/* TEXT */

#analysis .card p{

font-size:1.2rem;

line-height:1.8;

color:#dbeafe;


}


/* DIFFERENT CARD COLORS */

#analysis .card:nth-child(1){

box-shadow:

0 0 30px rgba(0,255,255,.15);

}


#analysis .card:nth-child(2){

box-shadow:

0 0 30px rgba(255,100,150,.15);

}


#analysis .card:nth-child(3){

box-shadow:

0 0 30px rgba(255,200,50,.15);

}


#analysis .card:nth-child(4){

box-shadow:

0 0 30px rgba(160,100,255,.15);

}


#analysis .card:nth-child(5){

box-shadow:

0 0 30px rgba(100,150,255,.15);

}



/* MOBILE */

@media(max-width:600px){

#analysis h1{

font-size:2.5rem;

}


#analysis .card{

padding:25px 20px;

}


#analysis .card h2{

font-size:1.5rem;

}

}
/* ==========================================
      MEMORY POPUP IMAGE FIX
========================================== */


#memoryPopup{

display:none;

align-items:center;

justify-content:center;

padding:20px;

}



.popupCard{

max-width:600px;

width:90%;

max-height:85vh;

overflow:auto;

}



#popupImage{

width:100%;

max-width:450px;

height:280px;

object-fit:cover;

display:block;

margin:20px auto;

border-radius:20px;

}


/* Mobile */

@media(max-width:600px){

#popupImage{

height:220px;

max-width:320px;

}


.popupCard{

width:95%;

}

}
/* ==========================================
      MEMORY VAULT BIGGER CARDS
========================================== */

.memoryGrid{

    grid-template-columns:repeat(4,1fr);

    gap:45px;

    max-width:1300px;

}


.memory{

    width:260px;

    height:320px;

    border-radius:35px;

    font-size:5rem;

}



/* emoji positioning */

.memory{

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    padding:20px;

}



/* hover effect */

.memory:hover{

    transform:

    translateY(-15px)

    scale(1.05);

}


/* laptop/tablet */

@media(max-width:1200px){

.memoryGrid{

    grid-template-columns:repeat(2,1fr);

}


.memory{

    width:260px;

    height:300px;

}

}


/* mobile */

@media(max-width:600px){

.memoryGrid{

    grid-template-columns:1fr;

}


.memory{

    width:280px;

    height:280px;

}

}
/* ==========================================
      FRIEND ANALYSIS CARD FIX
========================================== */


#analysis .cards{

display:grid;

grid-template-columns:repeat(3, 1fr);

gap:35px;

max-width:1200px;

margin:auto;

align-items:stretch;

}


#analysis .card{

min-height:260px;

height:auto;

display:flex;

flex-direction:column;

justify-content:flex-start;

padding:35px 30px;

}


#analysis .card h2{

font-size:1.7rem;

line-height:1.3;

margin-bottom:20px;

}


#analysis .card p{

font-size:1.1rem;

line-height:1.7;

margin:0;

}


/* Model Mode special fix */

#analysis .card:nth-child(6){

min-height:260px;

}



/* Make cards equal height */

#analysis .cards .card{

height:100%;

}


/* Tablet */

@media(max-width:1000px){

#analysis .cards{

grid-template-columns:repeat(2,1fr);

}

}


/* Mobile */

@media(max-width:600px){

#analysis .cards{

grid-template-columns:1fr;

}

}

/* ==========================================
      VAULT OF MEMORIES ICON CENTER FIX
========================================== */

#vault .memory-card,
#vault .memory-icon,
#vault .card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

#vault img{
    display:;
    margin:0 auto;
}

/* Another Chapter button alignment */

#chapterTwo{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:30px;
}

#chapterTwo p{
    max-width:800px;
    margin:0 auto;
}

#chapterTwo button{
    margin-top:20px;
}