/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  height:100%;
  overflow:hidden; /* prevents scrolling */
}

/* ===== ROOT ===== */
:root{
  --bg-primary:#050816;
  --bg-secondary:#0f172a;

  --text-color:#ffffff;
  --text-muted:rgba(255,255,255,0.7);

  --glass-bg:rgba(255,255,255,0.08);
  --glass-border:rgba(255,255,255,0.12);

  --primary-gradient:linear-gradient(135deg,#7c3aed,#06b6d4);
  --green-gradient:linear-gradient(135deg,#22c55e,#00ff99);

  --shadow:0 15px 40px rgba(0,0,0,0.35);
}

body.light-mode{
  --bg-primary:#eef2ff;
  --bg-secondary:#f8fafc;

  --text-color:#111827;
  --text-muted:rgba(0,0,0,0.6);

  --glass-bg:rgba(255,255,255,0.55);
  --glass-border:rgba(255,255,255,0.3);

  --primary-gradient: linear-gradient(135deg,#6366f1,#0ea5e9);
  --green-gradient: linear-gradient(135deg,#22c55e,#4ade80);
}

/* ===== BODY ===== */
body{
  font-family:"Inter",sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(135deg,var(--bg-primary),var(--bg-secondary));
  color:var(--text-color);
  position:relative;
  overflow:hidden;
}

/* ===== ANIMATED BACKGROUND ===== */
body::before,
body::after{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  filter:blur(120px);
  z-index:-2;
  animation:blobMove 10s infinite alternate ease-in-out;
}

body::before{
  background:#7c3aed;
  top:-150px;
  left:-100px;
}

body::after{
  background:#06b6d4;
  bottom:-150px;
  right:-100px;
}

/* animated grid */
.bg-animation{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:-1;
}

.bg-animation span{
  position:absolute;
  display:block;
  width:4px;
  height:4px;
  background:rgba(255,255,255,0.7);
  border-radius:50%;
  animation:floatParticle linear infinite;
}

/* create multiple particles */
.bg-animation span:nth-child(1){
  left:10%;
  animation-duration:12s;
  animation-delay:0s;
}

.bg-animation span:nth-child(2){
  left:20%;
  animation-duration:18s;
  animation-delay:2s;
}

.bg-animation span:nth-child(3){
  left:35%;
  animation-duration:10s;
  animation-delay:4s;
}

.bg-animation span:nth-child(4){
  left:50%;
  animation-duration:20s;
  animation-delay:1s;
}

.bg-animation span:nth-child(5){
  left:65%;
  animation-duration:15s;
  animation-delay:3s;
}

.bg-animation span:nth-child(6){
  left:80%;
  animation-duration:11s;
  animation-delay:5s;
}

.bg-animation span:nth-child(7){
  left:90%;
  animation-duration:16s;
  animation-delay:2s;
}

@keyframes floatParticle{
  from{
    transform:translateY(100vh) scale(0);
    opacity:0;
  }

  20%{
    opacity:1;
  }

  to{
    transform:translateY(-10vh) scale(1.5);
    opacity:0;
  }
}

@keyframes blobMove{
  from{
    transform:translate(0,0);
  }

  to{
    transform:translate(40px,40px);
  }
}

/* ===== MAIN CONTAINER ===== */
.container{
  width:95%;
  max-width:1350px;
  height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:35px;
  padding:20px;
}

/* ===== THEME BUTTON ===== */
.theme-toggle{
  position:fixed;
  top:20px;
  right:20px;
  z-index:1000;
}

.toggle-btn{
  border:none;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(15px);
  color:var(--text-color);
  padding:10px 20px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  transition:0.3s ease;
}

.toggle-btn:hover{
  transform:translateY(-3px);
}

/* ===== GAME SECTION ===== */
.game-section{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
}

/* ===== TITLE ===== */
.title{
  font-size:2.6rem;
  font-weight:900;
  text-align:center;
  line-height:1.2;
  background:linear-gradient(
    135deg,
    var(--text-color),
    var(--text-muted)
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:0.3s ease;
}

.title span{
  display:block;
  margin-top:10px;
  font-size:1rem;
  font-family: sans-serif;
  font-style: italic;
  font-weight:500;
  color:var(--text-muted);
  -webkit-text-fill-color:var(--text-muted);
  transition:0.3s ease;
}

/* ===== TRAFFIC SECTION ===== */
.traffic-light-container{
  display:flex;
  align-items:center;
  gap:30px;
  padding:25px 35px;
  border-radius:28px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}

/* ===== LIGHT ===== */
.traffic-light{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:20px;
  border-radius:22px;
  background:#111;
}

.light{
  width:85px;
  height:85px;
  border-radius:50%;
  background:#2a2a2a;
  transition:0.3s ease;
}

.light.red{
  background:#ff3b3b;
  box-shadow:0 0 30px #ff3b3b;
}

.light.orange{
  background:#ffae00;
  box-shadow:0 0 30px #ffae00;
}

.light.green{
  background:#00ff88;
  box-shadow:0 0 35px #00ff88;
}

/* ===== RIGHT SIDE ===== */
.controls-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

/* ===== COUNTDOWN ===== */
.countdown-text{
  font-size:3.5rem;
  font-weight:900;
}

/* ===== BUTTON ===== */
.action-btn{
  border:none;
  background:var(--primary-gradient);
  color:white;
  padding:16px 45px;
  border-radius:18px;
  font-size:16px;
  font-weight:800;
  letter-spacing:1px;
  cursor:pointer;
  transition:0.3s ease;
  box-shadow:0 10px 30px rgba(124,58,237,0.35);
}

body.light-mode .action-btn{
  box-shadow:0 10px 25px rgba(99,102,241,0.2);
}

.action-btn:hover{
  transform:translateY(-4px) scale(1.03);
}

.action-btn.green-mode{
  background:var(--green-gradient);

  color:#052e16;

  animation:pulse 0.7s infinite;
}

@keyframes pulse{
  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.06);
  }
}

/* ===== LEADERBOARD ===== */
.leaderboard-section{
  width:320px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px);
  border-radius:28px;
  padding:24px;
  box-shadow:var(--shadow);
}

.leaderboard-title{
  text-align:center;
  font-size:1.4rem;
  font-weight:800;
  margin-bottom:20px;
}

.leaderboard-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.leaderboard-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,0.07);
  transition:0.3s ease;
}

.leaderboard-item:hover{
  transform:translateX(6px);
}

.rank{
  font-size:1.3rem;
  font-weight:900;
  color:#ffd700;
}

.score-value{
  font-weight:700;
}

.empty-slot{
  text-align:center;
  padding:12px;
  color:var(--text-muted);
}

/* ===== RESPONSIVE ===== */
@media(max-width:950px){

  body{
    overflow-y:auto;
  }

  .container{
    flex-direction:column;
    height:auto;
    padding:90px 20px 30px;
  }

  .traffic-light-container{
    flex-direction:column;
  }

  .leaderboard-section{
    width:100%;
    max-width:450px;
  }

  .title{
    font-size:2rem;
  }

  .light{
    width:75px;
    height:75px;
  }

  .countdown-text{
    font-size:2.8rem;
  }
}