/* 80-s neon arcade look & feel */
html,body{
  margin:0;
  padding:0;
  height:100%;
  overflow:hidden;
  font-family:'Press Start 2P',cursive;
  color:#fff;
  background:#050012;
  background-image:
    radial-gradient(circle at center,#24126e 0%,#050012 70%),
    repeating-linear-gradient(135deg,transparent 0 7px,#10003a 7px 14px);
}

/* HUD */
#overlay{
  position:absolute;
  top:4%;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  text-align:center;
  z-index:10;
  pointer-events:none;
}
#overlay h1{
  font-size:3rem;
  letter-spacing:4px;
  text-shadow:0 0 8px #00eaff,0 0 18px #00eaff;
  background:linear-gradient(90deg,#ff00e6,#00eaff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color:transparent;
}
#overlay .tagline{
  font-size:.9rem;
  margin:.5rem 0 1rem;
  opacity:.8;
}
#scoreDisplay,#timerDisplay,#rankDisplay,#bestDisplay{
  font-size:1rem;
  margin:.3rem 0;
  text-shadow:0 0 6px #00eaff;
}

/* Buttons */
#controls{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  z-index:20;
}
button{
  font-family:'Press Start 2P',cursive;
  font-size:.7rem;
  padding:12px 18px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  color:#fff;
  background:#0a0038;
  box-shadow:0 0 10px #ff00e6 inset,0 0 6px #00eaff;
  transition:transform .1s;
}
button:hover{transform:translateY(-2px);}
button:active{transform:translateY(1px);}

/* Canvas */
canvas{display:block;}

/* Result / Leaderboard */
#resultScreen{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,.95);
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  z-index:100;
}
#resultScreen h2{
  font-size:2.2rem;
  margin-bottom:1rem;
  text-shadow:0 0 12px #ff00e6;
}
#resultScreen p{
  font-size:1rem;
  margin:.4rem 0;
}
#leaderboardArea{
  margin:1rem 0;
  width:260px;
}
#leaderboardArea h3{
  margin:.2rem 0 .8rem;
  font-size:1rem;
  text-shadow:0 0 10px #00eaff;
}
#leaderboardList{
  list-style:none;
  padding:0;
  margin:0;
}
#leaderboardList li{
  font-size:.85rem;
  margin:.25rem 0;
  display:flex;
  justify-content:space-between;
}
#playerIdArea{
  margin:1rem 0;
}
#playerIdArea input{
  font-family:'Press Start 2P',cursive;
  font-size:.7rem;
  padding:6px;
  width:170px;
  margin-left:4px;
  background:#10003a;
  border:1px solid #ff00e6;
  color:#fff;
}
.notice{
  font-size:.7rem;
  opacity:.7;
  width:80%;
  max-width:400px;
}

/* Floating orb glow */
@keyframes floatDown{
  0%{transform:translateY(-100%);opacity:1;}
  100%{transform:translateY(100%);opacity:0;}
}