#app {
  position: relative; width: 100vw; height: 100vh; overflow: hidden; background: #222; z-index: 1;
  touch-action: none;
}

#startScreen, #endScreen { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.95); }
#startScreen.hidden, #endScreen.hidden { display: none; }

#hud { position: fixed; top: 16px; left: 16px; right: 16px; z-index: 8; display: flex; gap: 20px; font-size: 1.2em; font-weight: 700; color: #fff; }
#hud.hidden { display: none; }

#timeBar { flex: 1; height: 12px; background: #4a0f0d; border-radius: 2px; transition: width .2s; }

.lane-wrap { position: fixed; bottom: 0; left: 0; right: 0; height: 80px; background: rgba(255,255,255,.05); border-top: 1px solid #ffcf4d; z-index: 3; pointer-events: auto; }

.target {
  position: absolute; font-size: 96px; cursor: pointer; z-index: 5;
  animation: pop .25s ease-out;
}
.target::before {
  content: ''; position: absolute; inset: -8px; border: 2px solid #ffcf4d90;
  border-radius: 50%; animation: ring 1.1s ease-out infinite;
}
.target.bad::before { border-color: #ff4d4d90; }

@keyframes ring { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.hitfx {
  position: absolute; font-weight: 700; font-size: 1.6em; pointer-events: none; z-index: 7;
  text-shadow: 0 2px 8px #000; animation: rise .75s ease-out forwards;
}
.hitfx.good { color: #67e26a; }
.hitfx.bad { color: #ff5c5c; }
@keyframes rise { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(-60px) scale(1.15); opacity: 0; } }

.lane-icon {
  position: absolute; z-index: 2; cursor: pointer; filter: drop-shadow(0 4px 6px #000c);
  animation-name: laneMove; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes laneMove { from { transform: translateX(0); } to { transform: translateX(-130vw); } }

#combo {
  position: fixed; bottom: 100px; left: 50%; font-size: 2em; font-weight: 700; color: #ffcf4d;
  transform: translateX(-50%) scale(.8); opacity: 0; transition: all .15s; z-index: 6;
}
#combo.show { opacity: 1 !important; transform: translateX(-50%) scale(1) !important; }

button:active { transform: translateY(3px); box-shadow: 0 1px 0 #4a0f0d !important; }