*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:
linear-gradient(
to bottom,
#020024,
#0f172a,
#000
);

overflow-x:hidden;
overflow-y:auto;

min-height:100vh;

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

padding:40px 20px;

position:relative;
}

/* Moon */

.moon{

position:fixed;

top:30px;
right:30px;

width:140px;
height:140px;

border-radius:50%;

background:
radial-gradient(
circle,
#ffffff,
#fff8dc,
#f5deb3
);

box-shadow:
0 0 50px #fff8dc,
0 0 100px #fff8dc,
0 0 180px #fff8dc;

z-index:1;
}

/* Main Container */

.container{

width:100%;

display:flex;

justify-content:center;

align-items:flex-start;

position:relative;

padding:40px 20px;
}

/* Glass Card */

.glass-card{

width:100%;
max-width:550px;
overflow:hidden;

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

backdrop-filter:
blur(15px);

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

border-radius:30px;

padding:25px;

text-align:center;

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

box-shadow:
0 0 40px rgba(255,0,128,.3);

}

@keyframes cardFloat{

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

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

}

/* Image */

.proposal-img{

width:100%;
max-width:320px;
height:auto;
display:block;
margin:auto;

border-radius:25px;

box-shadow:
0 0 30px rgba(255,105,180,.7);

transition:.5s;
}

.proposal-img:hover{

transform:scale(1.03);

}

/* Title */

#title{

margin-top:20px;

font-size:48px;

font-weight:700;

color:white;

text-shadow:
0 0 15px #ff69b4;

}

/* Typing Text */

#typing{

margin-top:15px;

color:#ffd1dc;

font-size:18px;

line-height:1.9;

min-height:220px;

white-space:pre-line;
}

/* Cursor */

#typing::after{

content:"|";

animation:
blinkCursor .8s infinite;

}

@keyframes blinkCursor{

50%{
opacity:0;
}

}

/* Buttons */

.btn-area{

margin-top:25px;

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;
}

.yes-btn,
.no-btn,
.submit-btn{

padding:14px 35px;

border:none;

border-radius:50px;

cursor:pointer;

font-size:18px;

transition:.3s;
}

.yes-btn{

background:#ff4da6;

color:white;

box-shadow:
0 0 20px #ff4da6;
}

.no-btn{

background:#444;

color:white;
}

.submit-btn{

background:#ff4da6;

color:white;

width:100%;

margin-top:10px;
}

.yes-btn:hover,
.submit-btn:hover{

transform:scale(1.08);
}

/* Reason Box */

#reasonBox{

display:none;

margin-top:20px;
}

#reason{

width:100%;

height:120px;

padding:15px;

border:none;

border-radius:15px;

resize:none;

font-size:16px;
}

/* Floating Hearts */

.heart{

position:fixed;

bottom:-50px;

font-size:22px;

pointer-events:none;

z-index:5;

animation:
heartFloat linear infinite;
}

@keyframes heartFloat{

0%{
transform:
translateY(0);
opacity:1;
}

100%{
transform:
translateY(-120vh);
opacity:0;
}

}

/* Stars */

.star{

position:fixed;

background:white;

border-radius:50%;

animation:
twinkle 2s infinite;
}

@keyframes twinkle{

50%{
opacity:.2;
}

}

/* Rain */

.rain{

position:fixed;

width:2px;
height:25px;

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

animation:
rainFall linear infinite;

pointer-events:none;
}

@keyframes rainFall{

opacity:0.01;

from{
transform:translateY(-100vh);
}

to{
transform:translateY(100vh);
}

}

/* Clouds */

.cloud{

position:fixed;

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

border-radius:100px;

filter:blur(5px);

animation:
cloudMove 60s linear infinite;

z-index:2;
}

@keyframes cloudMove{

from{
transform:translateX(-250px);
}

to{
transform:translateX(120vw);
}

}

/* Rose */

.rose{

position:fixed;

top:-50px;

font-size:22px;

animation:
roseFall linear infinite;

z-index:6;
}

@keyframes roseFall{

from{
transform:
translateY(-50px)
rotate(0deg);
}

to{
transform:
translateY(120vh)
rotate(360deg);
}

}

/* Shooting Star */

.shooting-star{

position:fixed;

width:2px;
height:100px;

background:
linear-gradient(
transparent,
white
);

transform:
rotate(45deg);

animation:
shoot 5s linear infinite;
}

@keyframes shoot{

0%{
opacity:0;
}

10%{
opacity:1;
}

100%{

transform:
translate(500px,500px)
rotate(45deg);

opacity:0;

}

}

/* Success Screen */

.success{

height:100vh;

display:flex;

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

flex-direction:column;

text-align:center;

color:white;

font-size:32px;
}

/* Mobile */

@media(max-width:768px){

.moon{

width:90px;
height:90px;

top:15px;
right:15px;
}

#title{

font-size:34px;
}

#typing{

font-size:16px;
}

.glass-card{

padding:18px;
}

.yes-btn,
.no-btn{

width:100%;
}

}
#startScreen{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
to bottom,
#020024,
#0f172a,
#000
);

display:flex;

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

z-index:99999;
}

.enter-box{

text-align:center;

padding:30px;

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

backdrop-filter:blur(15px);

border-radius:25px;

width:90%;
max-width:400px;

color:white;
}

.enter-box h1{

margin-bottom:15px;

text-shadow:
0 0 15px #ff69b4;
}

.enter-box p{

margin-bottom:20px;
}

.enter-box button{

padding:14px 30px;

border:none;

border-radius:50px;

background:#ff4da6;

color:white;

font-size:18px;

cursor:pointer;

box-shadow:
0 0 20px #ff4da6;
}

/* Camera consent dialog */
.camera-consent{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.78);
}
.camera-consent-box{
    width:min(420px,100%);
    padding:28px 22px;
    border-radius:20px;
    background:#fff;
    color:#222;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.camera-consent-box h2{
    margin-bottom:12px;
}
.camera-consent-box p{
    margin-bottom:22px;
    line-height:1.6;
}
.camera-consent-buttons{
    display:flex;
    gap:12px;
    justify-content:center;
}
.camera-consent-buttons button{
    border:0;
    border-radius:12px;
    padding:12px 28px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
}
#cameraAllowBtn{background:#16a34a;color:#fff}
#cameraDenyBtn{background:#e5e7eb;color:#222}