/* ================= GLOBAL ================= */
body{
  background:#050510;
  color:#0ff;
  font-family:monospace;
  margin:0;
  padding:0;
}

/* ================= LAYOUT ================= */
.container{
  max-width:100px;
  margin:auto;
  padding:20px;
}

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

/* ================= TEXT ================= */
h1{
  text-align:center;
  color:#0ff;
}

/* ================= CARD ================= */
.card{
  background:rgba(0,0,0,0.85);
  padding:30px;
  border-radius:15px;
  box-shadow:0 0 25px rgba(255,77,166,0.4);
  backdrop-filter:blur(10px);
  width:100%;
  max-width:400px;
  text-align:center;
  margin-bottom:20px;
}

.admin-card{
  max-width:400px;
}

/* ================= BOX (CHALLENGES) ================= */
.box{
  background:#111;
  padding:15px;
  margin:10px 0;
  border-radius:10px;
  border:1px solid #333;
}
.glow{
  text-shadow:0 0 10px #0ff;
}
.leaderboard-box{
  max-width:500px;
  margin:30px auto;
  background:linear-gradient(145deg,#0f0f1a,#1c1c2b);
  border-radius:15px;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  color:#fff;
}

.leaderboard-title{
  text-align:center;
  font-size:24px;
  margin-bottom:15px;
  letter-spacing:1px;
  text-shadow:0 0 10px #00f0ff;
}

#leaderboard{
  list-style:none;
  padding:0;
  margin:0;
}

#leaderboard li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 15px;
  margin:10px 0;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  transition:all 0.3s ease;
}

#leaderboard li:hover{
  transform:scale(1.03);
  background:rgba(0,255,255,0.1);
  box-shadow:0 0 15px rgba(0,255,255,0.3);
}

.rank{
  font-size:20px;
  width:40px;
}

.name{
  flex:1;
  font-weight:500;
}

.score{
  font-weight:bold;
  color:#00f0ff;
}

/* Top 3 styling */
.gold{ color:#FFD700; }
.silver{ color:#C0C0C0; }
.bronze{ color:#CD7F32; }

/* ================= INPUT ================= */
input{
  width:100%;
  padding:12px;
  margin:8px 0;
  border:none;
  border-radius:8px;
  background:#111;
  color:white;
  border:1px solid #333;
}

input:focus{
  border-color:#ff4da6;
  box-shadow:0 0 10px #ff4da6;
}

/* ================= BUTTON ================= */
button{
  padding:12px;
  width:100%;
  border:none;
  background:linear-gradient(90deg,#a64dff,#ff4da6);
  color:white;
  border-radius:8px;
  cursor:pointer;
  font-weight:bold;
  transition:0.3s;
  margin-top:5px;
}

button:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px #ff4da6;
}

/* ================= RESULT BOX ================= */
.result-box{
  background:#111;
  padding:15px;
  border-radius:10px;
  margin-top:15px;
  text-align:left;
  border:1px solid #333;
}

/* ================= IMAGE ================= */
img{
  width:120px;
  height:120px;
  border-radius:50%;
  border:4px solid #ff4da6;
  box-shadow:0 0 15px #ff4da6;
  margin-bottom:10px;
}

/* ================= HR ================= */
hr{
  border:0;
  height:1px;
  background:#333;
  margin:20px 0;
}

/* ================= HIDDEN ================= */
.hidden{
  display:none;
}

/* ================= ANIMATION ================= */
@keyframes gradientMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* ================= RESPONSIVE ================= */
@media(max-width:500px){
  .card{
    padding:20px;
  }
}