html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background: #05060f;
}

#game {
  height: 100vh;
  height: 100dvh;
}

#cv {
  touch-action: none;
  image-rendering: auto;
}

/* notch / home-indicator safe areas */
.t-safe { top: calc(0.5rem + env(safe-area-inset-top, 0px)); }
.t-boss { top: max(4rem, calc(env(safe-area-inset-top, 0px) + 3.5rem)); }
.b-safe { bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
.b-hint { bottom: max(2.5rem, calc(env(safe-area-inset-bottom, 0px) + 2.25rem)); }
.safe-t { padding-top: max(1rem, env(safe-area-inset-top, 0px)); }
.safe-b { padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); }

/* menu screens: smooth, contained scrolling on touch */
#screen-title,
#screen-complete,
#screen-gameover,
#screen-victory,
#screen-pause {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: rgba(129,140,248,0.5); border-radius: 3px; }

@keyframes float-bob {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes banner-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.banner-anim { animation: banner-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }

input { -webkit-user-select: text; user-select: text; }