html { background: #0b0420; }
body { margin: 0; overflow: hidden; touch-action: none; font-family: "Segoe UI", system-ui, sans-serif; }
canvas { position: fixed; inset: 0; display: block; }

.hud {
  position: fixed; inset: 0; pointer-events: none;
  color: #dff1ff; text-shadow: 0 0 8px #35f4ff;
}
.hud-score { position: absolute; top: 14px; left: 18px; font-size: 30px; font-weight: 800; letter-spacing: 1px; }
.hud-best { position: absolute; top: 46px; left: 18px; font-size: 13px; color: #b6ff4a; }
.hud-lives { position: absolute; top: 12px; right: 18px; font-size: 22px; color: #ff5a6e; text-shadow: 0 0 8px #ff3b8a; }
.hud-bar {
  position: absolute; top: 40px; right: 16px; width: 34vw; max-width: 260px; height: 8px;
  background: rgba(20,10,40,.65); border-radius: 5px;
}
.hud-barfill { position: absolute; inset: 0; border-radius: 5px; }
.hud-combo { position: absolute; top: 64px; left: 18px; font-size: 15px; color: #b6ff4a; }
.hud-combo-pop { font-weight: 800; }
.hud-combo-flash { animation: pop .25s; }
@keyframes pop { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }

.btn-left, .btn-right, .btn-up, .btn-down, .btn-boost {
  position: fixed; width: 64px; height: 64px; border-radius: 14px;
  background: rgba(20, 8, 45, .45); border: 2px solid #35f4ff;
  color: #35f4ff; display: flex; align-items: center; justify-content: center;
  font-size: 26px; pointer-events: auto; user-select: none; opacity: .9;
  touch-action: none;
}
.btn-left { left: 14px; bottom: 96px; } .btn-left::after { content: "\25C0"; }
.btn-right { right: 14px; bottom: 64px; } .btn-right::after { content: "\25B6"; }
.btn-up { left: 14px; bottom: 168px; } .btn-up::after { content: "\25B2"; }
.btn-down { right: 14px; bottom: 140px; } .btn-down::after { content: "\25BC"; }
.btn-boost { right: 14px; bottom: 214px; width: 56px; height: 56px; } .btn-boost::after { content: "BOOST"; font-size: 12px; }

.overlay { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; pointer-events: none; }
.overlay-start, .overlay-end { pointer-events: auto; text-align: center; padding: 8vh 0; }
.overlay h2 { font-size: 34px; color: #dff1ff; letter-spacing: 3px; text-shadow: 0 0 16px #ff3b8a; }
.overlay p { font-size: 14px; color: #9fd8e8; max-width: 46ch; margin: 8px auto; }
.overlay button {
  background: #35f4ff; color: #0b0420; border: none; border-radius: 10px;
  font-size: 18px; font-weight: 800; padding: 14px 26px; cursor: pointer; margin-top: 14px;
}
@media (max-width: 700px) {
  .hud-score { font-size: 22px; }
  .overlay h2 { font-size: 24px; }
  .btn-left, .btn-right, .btn-up, .btn-down { width: 56px; height: 56px; }
}