*{box-sizing:border-box}

body{
margin:0;
min-height:100vh;
padding:15px;
overflow-x:hidden;
background:radial-gradient(circle at top,#1e40af,#020617 70%);
font-family:Arial,sans-serif;
color:white
}

.container{
width:100%;
max-width:420px;
margin:auto;
text-align:center
}

h1{
font-size:38px;
margin:10px 0 20px;
color:#fde047;
text-shadow:0 0 25px #facc15
}

.toggle-btn,
#leaderboard_btn{
width:100%;
padding:14px;
border:none;
border-radius:18px;
background:linear-gradient(135deg,#fde047,#eab308);
color:#111;
font-size:18px;
font-weight:bold;
cursor:pointer;
margin-bottom:10px
}

.toggle-box,
.stats,
.upgrade-box,
.boost-box{
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.15);
border-radius:25px;
padding:18px;
margin-bottom:16px;
box-shadow:0 10px 35px rgba(0,0,0,.35)
}

.toggle-box{
display:none
}

.avatar-box{
display:flex;
justify-content:center;
margin-bottom:12px
}

#profile_image{
width:95px;
height:95px;
border-radius:50%;
object-fit:cover;
border:4px solid #facc15;
box-shadow:0 0 30px #facc15
}

.profile-rank{
display:inline-block;
padding:8px 20px;
border-radius:20px;
background:linear-gradient(135deg,#facc15,#f59e0b);
color:#111;
font-weight:bold;
margin-bottom:15px
}

.profile-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px
}

.profile-stats div,
.stats div{
background:rgba(255,255,255,.1);
border-radius:18px;
padding:15px 8px;
font-size:17px;
font-weight:bold
}

.profile-stats b{
display:block;
font-size:22px;
color:#fde047
}

.profile-stats small{
opacity:.8
}

.stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px
}

.stats span{
display:block;
margin-top:8px;
font-size:22px;
color:#fde047
}

.level-bar-box{
margin-top:15px
}

.level-bar{
height:16px;
background:rgba(255,255,255,.15);
border-radius:20px;
overflow:hidden
}

#level_progress{
height:100%;
background:linear-gradient(90deg,#22c55e,#4ade80)
}

.tap-area{
display:flex;
justify-content:center;
margin:25px 0;
position:relative
}

#tap{
width:240px;
height:240px;
border-radius:50%;
object-fit:cover;
cursor:pointer;
border:6px solid #facc15;
box-shadow:0 0 35px #facc15,0 0 80px rgba(250,204,21,.5);
transition:.15s
}

#tap:active{
transform:scale(.9)
}

button{
width:100%;
padding:14px;
border:none;
border-radius:18px;
font-size:18px;
font-weight:bold;
cursor:pointer;
margin-top:10px
}

button:active{
transform:scale(.96)
}

#upgrade{
background:linear-gradient(135deg,#38bdf8,#2563eb);
color:white
}

#upgrade:disabled{
background:#475569
}

.upgrade-box p{
font-size:18px;
margin:10px
}

.quest-item{
background:rgba(255,255,255,.08);
border-radius:18px;
padding:14px;
margin:10px 0;
text-align:right;
border:1px solid rgba(255,255,255,.1)
}

#claim_quest{
background:linear-gradient(135deg,#22c55e,#16a34a);
color:white
}

#daily{
background:linear-gradient(135deg,#22c55e,#16a34a);
color:white
}

#boost_energy{
background:linear-gradient(135deg,#06b6d4,#0284c7);
color:white
}

#boost_tap{
background:linear-gradient(135deg,#ef4444,#b91c1c);
color:white
}

#copy_ref{
background:linear-gradient(135deg,#a855f7,#7e22ce);
color:white
}

input{
width:100%;
padding:12px;
border:none;
border-radius:15px;
margin-top:10px;
text-align:center
}

.leader-item{
display:flex;
justify-content:space-between;
padding:12px;
margin:8px 0;
border-radius:15px;
background:rgba(255,255,255,.08)
}

.my-rank{
margin-top:15px;
font-size:18px;
font-weight:bold
}

.coin-effect{
position:absolute;
font-size:35px;
color:#fde047;
font-weight:bold;
animation:fly .8s forwards
}

@keyframes fly{
from{
opacity:1;
transform:translateY(0)
}
to{
opacity:0;
transform:translateY(-80px)
}
}

#questTimer,
#daily_timer{
margin-top:12px;
color:#fde047;
font-weight:bold
}