* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #050508;
  overflow: hidden;
  font-family: 'Impact', 'Arial Black', sans-serif;
  user-select: none;
}
canvas#gameCanvas {
  display: block;
  width: 100vw;
  height: 100vh;
}
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 24px 36px;
  font-size: 28px;
  color: #fff;
  text-shadow: 0 0 12px #f00, 0 0 24px #f00;
  z-index: 10;
  pointer-events: none;
}
#combo {
  color: #ff6600;
  text-shadow: 0 0 12px #ff6600, 0 0 24px #ff6600;
}
#startScreen, #gameoverScreen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5,5,8,0.92);
  color: #fff;
  z-index: 20;
}
#startScreen h1 {
  font-size: 96px;
  color: #ff2222;
  text-shadow: 0 0 20px #ff2222, 0 0 40px #ff0000, 3px 3px 0 #ccc, -1px -1px 0 #900;
  letter-spacing: 4px;
  margin-bottom: 10px;
}
.tagline {
  font-size: 22px;
  color: #ff6600;
  letter-spacing: 6px;
  margin-bottom: 30px;
  text-shadow: 0 0 10px #ff6600;
}
.controls {
  font-size: 18px;
  color: #aaa;
  font-family: 'Courier New', monospace;
}
.blink {
  animation: blink 1s infinite;
  margin-top: 40px;
  font-size: 26px;
  color: #fff;
  letter-spacing: 2px;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
#gameoverScreen h1 {
  font-size: 80px;
  color: #ff2222;
  text-shadow: 0 0 20px #f00, 0 0 40px #f00;
  margin-bottom: 20px;
}
.hidden { display: none !important; }