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

body{
background:linear-gradient(180deg,#eef7ff,#dbeeff);
color:#24324d;
min-height:100vh;
transition:0.3s;
}

body.dark{
background:#0f172a;
color:white;
}

/* INTRO */

.intro-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:linear-gradient(135deg,#4facfe,#00c6fb);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
padding:20px;
}

.intro-content{
text-align:center;
color:white;
max-width:500px;
}

.intro-ilancito{
width:180px;
margin-bottom:20px;
animation:float 2s infinite;
}

.intro-content h1{
font-size:42px;
margin-bottom:20px;
font-weight:900;
}

.intro-content p{
font-size:22px;
margin-bottom:25px;
line-height:1.5;
}

/* BUTTONS */

button{
border:none;
cursor:pointer;
transition:0.3s;
}

button:hover{
transform:scale(1.03);
}

.main-btn{
width:100%;
padding:15px;
border-radius:18px;
background:linear-gradient(135deg,#4facfe,#00c6fb);
color:white;
font-weight:800;
margin-top:12px;
font-size:16px;
}

/* LOGIN */

.auth-screen{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
}

.auth-box{
background:white;
padding:35px;
border-radius:35px;
width:100%;
max-width:430px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

body.dark .auth-box{
background:#1e293b;
}

.logo-title{
text-align:center;
font-size:42px;
font-weight:900;
color:#2196f3;
margin-bottom:25px;
}

/* INPUTS */

input,
textarea,
select{
width:100%;
padding:15px;
border:none;
border-radius:18px;
margin-top:12px;
background:#eef6ff;
font-size:16px;
outline:none;
}

body.dark input,
body.dark textarea,
body.dark select{
background:#334155;
color:white;
}

textarea{
resize:none;
min-height:100px;
}

.switch{
text-align:center;
margin-top:15px;
color:#2196f3;
font-weight:700;
cursor:pointer;
}

/* APP */

.app{
display:none;
max-width:520px;
margin:auto;
padding-bottom:120px;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:white;
position:sticky;
top:0;
z-index:99;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

body.dark header{
background:#1e293b;
}

header h2{
font-size:28px;
color:#2196f3;
font-weight:900;
}

.header-buttons{
display:flex;
gap:10px;
}

.header-buttons button{
width:50px;
height:50px;
border-radius:15px;
font-size:20px;
}

/* PAGE */

.page{
display:none;
padding:20px;
}

.page.active{
display:block;
}

/* HERO */

.hero{
background:linear-gradient(135deg,#4facfe,#00c6fb);
padding:25px;
border-radius:30px;
display:flex;
align-items:center;
gap:15px;
color:white;
}

.hero img{
width:100px;
}

.hero h1{
font-size:30px;
margin-bottom:10px;
}

/* RECORD */

.record-box{
background:white;
padding:20px;
border-radius:25px;
margin-top:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

body.dark .record-box{
background:#1e293b;
}

.record-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:15px;
margin-top:15px;
}

.record-card{
background:#eef6ff;
padding:18px;
border-radius:20px;
text-align:center;
}

body.dark .record-card{
background:#334155;
}

.record-card h3{
font-size:30px;
color:#2196f3;
margin-bottom:5px;
}

/* VERSE */

.verse-box{
background:white;
padding:20px;
border-radius:25px;
margin-top:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

body.dark .verse-box{
background:#1e293b;
}

.verse-box h3{
color:#2196f3;
margin-bottom:10px;
font-size:22px;
}

/* MENU */

.menu-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-top:25px;
}

.menu-card{
padding:28px;
border-radius:28px;
text-align:center;
font-size:34px;
font-weight:900;
color:white;
cursor:pointer;
transition:0.3s;
}

.menu-card:hover{
transform:translateY(-5px);
}

.menu-card p{
font-size:17px;
margin-top:10px;
}

.blue{
background:linear-gradient(135deg,#4facfe,#00c6fb);
}

.green{
background:linear-gradient(135deg,#84fab0,#8fd3f4);
}

.yellow{
background:linear-gradient(135deg,#f6d365,#fda085);
}

.pink{
background:linear-gradient(135deg,#f093fb,#f5576c);
}

.purple{
background:linear-gradient(135deg,#a18cd1,#fbc2eb);
}

/* ACTIVITIES */

.activity{
background:white;
padding:20px;
border-radius:22px;
margin-top:15px;
display:flex;
justify-content:space-between;
align-items:center;
font-weight:700;
font-size:18px;
}

body.dark .activity{
background:#1e293b;
}

.circle{
width:40px;
height:40px;
border-radius:50%;
border:3px solid #cbd5e1;
cursor:pointer;
position:relative;
transition:0.3s;
}

.done{
background:#4facfe;
border-color:#4facfe;
}

.done::after{
content:"✔";
position:absolute;
top:6px;
left:10px;
color:white;
font-weight:900;
}

/* GAMES */

.game-box{
background:white;
padding:22px;
border-radius:24px;
margin-top:20px;
}

body.dark .game-box{
background:#1e293b;
}

.game-box h2{
margin-bottom:15px;
}

.game-box button{
width:100%;
padding:12px;
margin-top:10px;
border-radius:15px;
background:#eef6ff;
font-weight:700;
}

.correct-answer{
background:#22c55e !important;
color:white;
}

.wrong-answer{
background:#ef4444 !important;
color:white;
}

/* POSTS */

.facebook-post-box,
.facebook-post{
background:white;
padding:20px;
border-radius:24px;
margin-top:20px;
}

body.dark .facebook-post-box,
body.dark .facebook-post{
background:#1e293b;
}

.post-header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:15px;
}

.post-avatar{
width:55px;
height:55px;
border-radius:50%;
background:#4facfe;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-weight:900;
font-size:22px;
}

.post-actions{
display:flex;
gap:10px;
margin-top:15px;
}

.post-actions button{
flex:1;
padding:12px;
border-radius:15px;
background:#eef6ff;
font-weight:700;
}

.comment-item{
background:#eef6ff;
padding:12px;
border-radius:15px;
margin-top:10px;
}

body.dark .comment-item{
background:#334155;
}

/* AVATAR */

.avatar-box{
background:white;
padding:25px;
border-radius:24px;
text-align:center;
}

body.dark .avatar-box{
background:#1e293b;
}

.avatar-preview{
margin:auto;
width:160px;
}

.avatar-head{
width:100px;
height:100px;
border-radius:50%;
margin:auto;
position:relative;
overflow:hidden;
}

.avatar-hair{
position:absolute;
top:0;
left:10px;
width:80%;
height:40px;
border-radius:50px 50px 20px 20px;
z-index:1;
}

.girl-hair{
height:75px !important;
width:100%;
left:0;
border-radius:50px 50px 40px 40px;
}

.avatar-eyes{
display:flex;
justify-content:center;
gap:15px;
padding-top:45px;
position:relative;
z-index:5;
}

.avatar-eyes div{
width:12px;
height:12px;
background:black;
border-radius:50%;
}

.avatar-mouth{
width:30px;
height:12px;
border-bottom:3px solid black;
margin:10px auto;
border-radius:0 0 20px 20px;
position:relative;
z-index:5;
}

.avatar-body{
width:80px;
height:120px;
background:#4facfe;
margin:auto;
border-radius:20px;
}

/* FRIENDS */

.friend-card{
background:white;
padding:18px;
border-radius:22px;
margin-top:15px;
display:flex;
justify-content:space-between;
align-items:center;
}

body.dark .friend-card{
background:#1e293b;
}

/* NAV */

nav{
position:fixed;
bottom:0;
width:100%;
max-width:520px;
display:flex;
justify-content:space-around;
background:white;
padding:12px;
box-shadow:0 -5px 15px rgba(0,0,0,0.08);
}

body.dark nav{
background:#1e293b;
}

nav button{
padding:12px 15px;
border-radius:15px;
font-size:20px;
}

/* ILANCITO */

#ilancito{
position:fixed;
bottom:90px;
right:20px;
width:85px;
height:85px;
background:white;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 8px 20px rgba(0,0,0,0.2);
z-index:999;
animation:float 2s infinite;
}

#ilancito img{
width:75px;
cursor:pointer;
}

#messageBox{
position:fixed;
bottom:190px;
right:20px;
background:white;
padding:18px;
border-radius:22px;
display:none;
max-width:250px;
z-index:999;
}

/* ANIMATION */

@keyframes float{

0%{
transform:translateY(0px);
}

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

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

}