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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #05060f;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Verdana, sans-serif;
  color: #fff;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#app { position: fixed; inset: 0; }

#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* ---------- Screens ---------- */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  background: radial-gradient(ellipse at 50% 30%, rgba(20,40,120,.55), rgba(3,4,12,.92) 70%);
  z-index: 20;
  text-align: center;
  padding: 20px;
}

.game-title {
  font-size: clamp(42px, 9vw, 96px);
  letter-spacing: 4px;
  text-shadow: 0 0 18px #26f, 0 0 50px rgba(40,110,255,.8);
}
.game-title .accent, .game-title.accent {
  color: #ffd23f;
  text-shadow: 0 0 18px #f80, 0 0 60px rgba(255,170,0,.8);
}
.tagline { font-size: clamp(16px, 3vw, 26px); color: #9fd4ff; text-shadow: 0 0 12px #08f; }

.mode-buttons { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }

.big-btn {
  display: flex; flex-direction: column; gap: 6px;
  font-family: inherit;
  font-size: clamp(20px, 3.4vw, 30px);
  font-weight: bold;
  color: #fff;
  background: linear-gradient(180deg, #1b2f7a, #101a45);
  border: 3px solid #4d7dff;
  border-radius: 18px;
  padding: 20px 34px;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(70,120,255,.55), inset 0 0 14px rgba(90,150,255,.3);
  transition: transform .12s, box-shadow .12s;
}
.big-btn small { font-size: .5em; font-weight: normal; color: #9fd4ff; }
.big-btn:hover, .big-btn:active {
  transform: scale(1.07);
  box-shadow: 0 0 34px rgba(90,150,255,.95), inset 0 0 18px rgba(120,170,255,.5);
}

.pick-label { font-size: 20px; color: #9fd4ff; margin-bottom: 10px; }
#difficulty-row { animation: pop-in .25s ease-out; }
.diff-btn {
  font-family: inherit; font-size: clamp(18px, 2.6vw, 26px); font-weight: bold;
  color: #fff; background: linear-gradient(180deg, #7a1b5e, #45102f);
  border: 3px solid #ff4dc4; border-radius: 14px;
  padding: 14px 22px; margin: 0 8px; cursor: pointer;
  box-shadow: 0 0 18px rgba(255,80,200,.5);
  transition: transform .12s;
}
.diff-btn:hover, .diff-btn:active { transform: scale(1.1); }

.credit { position: absolute; bottom: 14px; font-size: 13px; color: #56618f; }

/* ---------- HUD ---------- */
#hud { position: absolute; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none; }

#scoreboard {
  margin: 10px auto 0;
  width: max-content;
  display: flex; gap: 18px; align-items: center;
  font-size: clamp(34px, 6vw, 56px);
  font-weight: bold;
  background: rgba(5,8,25,.72);
  border: 2px solid rgba(90,130,255,.6);
  border-radius: 16px;
  padding: 4px 28px;
  box-shadow: 0 0 24px rgba(60,110,255,.45);
}
.score.p1 { color: #35e0ff; text-shadow: 0 0 14px #0cf; }
.score.p2 { color: #ff5c7a; text-shadow: 0 0 14px #f36; }
#score-divider { color: #8899dd; }
#target-note { text-align: center; font-size: 14px; color: #8fb3ff; margin-top: 4px; text-shadow: 0 0 8px #05f; }

#btn-mute {
  position: absolute; top: 12px; right: 14px;
  pointer-events: auto;
  font-size: 24px;
  background: rgba(10,15,40,.8);
  border: 2px solid rgba(100,140,255,.6);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

/* ---------- Banners & effects ---------- */
#banner {
  position: absolute; top: 38%; left: 0; right: 0;
  text-align: center;
  font-size: clamp(48px, 11vw, 120px);
  font-weight: bold;
  color: #ffd23f;
  text-shadow: 0 0 24px #f80, 0 0 80px rgba(255,150,0,.9);
  z-index: 15;
  pointer-events: none;
  animation: banner-pop .45s cubic-bezier(.2,2.4,.4,1);
}
@keyframes banner-pop { from { transform: scale(.2) rotate(-6deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#replay-bars {
  position: absolute; inset: 0; z-index: 12; pointer-events: none;
}
#replay-bars::before, #replay-bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 11%;
  background: #000;
}
#replay-bars::before { top: 0; } #replay-bars::after { bottom: 0; }
#replay-bars span {
  position: absolute; top: 2%; right: 3%;
  font-size: clamp(18px, 3vw, 30px); font-weight: bold; color: #fff;
  text-shadow: 0 0 10px #f00;
  animation: blink 1s steps(2) infinite;
  z-index: 13;
}
@keyframes blink { 50% { opacity: .25; } }

#powerup-toast {
  position: absolute; top: 22%; left: 0; right: 0;
  text-align: center;
  font-size: clamp(22px, 4.5vw, 40px);
  font-weight: bold;
  color: #7dffb0;
  text-shadow: 0 0 16px #0f8;
  z-index: 14; pointer-events: none;
  animation: banner-pop .35s ease-out;
}

.ctrl-hint {
  position: absolute; left: 0; right: 0;
  text-align: center;
  font-size: clamp(16px, 2.6vw, 24px);
  font-weight: bold;
  z-index: 14; pointer-events: none;
  text-shadow: 0 0 10px rgba(0,0,0,.9);
  animation: pop-in .3s ease-out;
}
.ctrl-hint.top { top: 12%; color: #ff8ba0; }
.ctrl-hint.bottom { bottom: 6%; color: #8fefff; }
.ctrl-hint kbd {
  font-family: inherit;
  background: rgba(15,20,50,.9);
  border: 2px solid currentColor;
  border-radius: 8px;
  padding: 2px 10px;
  margin: 0 3px;
}

#countdown {
  position: absolute; top: 34%; left: 0; right: 0;
  text-align: center;
  font-size: clamp(90px, 20vw, 200px);
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 30px #4af, 0 0 90px rgba(70,150,255,.9);
  z-index: 16; pointer-events: none;
  animation: banner-pop .3s ease-out;
}