* { margin:0; padding:0; box-sizing:border-box; }
body {
  background: radial-gradient(circle at 50% 30%, #0b1226 0%, #05070f 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; font-family: 'Segoe UI', Arial, sans-serif; color:#e8ecf1;
  overflow:hidden;
}
h1 {
  letter-spacing: 4px; font-size: 26px; margin-bottom: 6px;
  color:#5cffe0; text-shadow: 0 0 16px rgba(92,255,224,0.6);
}
#hud {
  display:flex; justify-content:space-between; width:900px; margin-bottom:8px;
  font-size:14px;
}
.p1 { color:#5cd6ff; }
.p2 { color:#ff5c8a; text-align:right; }
#score { font-size:16px; font-weight:bold; }
canvas {
  background:#070b16;
  border:2px solid #1c2740;
  border-radius: 10px;
  box-shadow: 0 0 50px rgba(92,255,224,0.08), inset 0 0 60px rgba(0,0,0,0.6);
}
#info {
  margin-top:10px; font-size:12px; color:#8a94a6; text-align:center; line-height:1.6;
}
#overlay { position:absolute; display:flex; flex-direction:column; align-items:center; }
#msg {
  font-size:40px; font-weight:bold;
  text-shadow: 0 0 20px rgba(0,0,0,0.9); display:none;
  background: rgba(5,7,15,0.9); padding: 20px 40px; border-radius: 14px;
  border: 1px solid #1c2740;
}
#restart {
  margin-top:16px; padding:10px 22px; font-size:14px; cursor:pointer;
  background:#5cffe0; color:#05070f; border:none; border-radius:8px; font-weight:bold;
  display:none;
}
#restart:hover { background:#8dffe9; }
#countdown {
  position:absolute; font-size:70px; font-weight:bold; color:#5cffe0;
  text-shadow: 0 0 30px rgba(92,255,224,0.7); display:none;
}