/* Reset & base styling */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #121820;
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
}

#gameCanvas {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background-color: #7EC8E3;
}

/* Glass and HUD styles */
.hud-card {
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45);
}

/* Overlay transitions */
.overlay {
  transition: opacity 0.25s ease-out;
}

.overlay.hidden {
  display: none !important;
}

/* Arcade Dock & Physical-feel Buttons */
#arcadeDock {
  min-height: 70px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.99) 100%);
}

.arcade-btn {
  position: relative;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  border-width: 2px;
  border-style: solid;
  cursor: pointer;
}

/* Directional Buttons (Left / Right) */
.arcade-btn-dir {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-color: #38bdf8;
  box-shadow: 0 4px 0 #0284c7, 0 8px 16px rgba(0, 0, 0, 0.45);
}

.arcade-btn-dir:hover {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
}

.arcade-btn-dir.btn-pressed,
.arcade-btn-dir:active {
  transform: translateY(3px) scale(0.96);
  box-shadow: 0 1px 0 #0284c7, 0 0 14px rgba(56, 189, 248, 0.6);
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
}

/* Swipe / Tail Whip Button */
.arcade-btn-swipe {
  background: linear-gradient(180deg, #ea580c 0%, #c2410c 100%);
  border-color: #fde047;
  box-shadow: 0 4px 0 #9a3412, 0 8px 16px rgba(234, 88, 12, 0.35);
}

.arcade-btn-swipe:hover {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
}

.arcade-btn-swipe.btn-pressed,
.arcade-btn-swipe:active {
  transform: translateY(3px) scale(0.96);
  box-shadow: 0 1px 0 #9a3412, 0 0 16px rgba(251, 146, 60, 0.8);
  background: linear-gradient(180deg, #f97316 0%, #c2410c 100%);
}

/* Jump Button */
.arcade-btn-jump {
  background: linear-gradient(180deg, #10b981 0%, #047857 100%);
  border-color: #6ee7b7;
  box-shadow: 0 4px 0 #065f46, 0 8px 16px rgba(16, 185, 129, 0.35);
}

.arcade-btn-jump:hover {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
}

.arcade-btn-jump.btn-pressed,
.arcade-btn-jump:active {
  transform: translateY(3px) scale(0.96);
  box-shadow: 0 1px 0 #065f46, 0 0 16px rgba(52, 211, 153, 0.8);
  background: linear-gradient(180deg, #059669 0%, #047857 100%);
}

/* Canvas crisp render */
#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Banner animations */
.banner-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Heart pulsing when damaged */
.heart-lost {
  opacity: 0.25;
  filter: grayscale(1);
  transform: scale(0.85);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Custom scrollbars hidden */
::-webkit-scrollbar {
  display: none;
}
/* Reserve stable controls independently of the canvas and native safe area. */
#arcadeDock { min-height: 0; }
#btnPause { width: 44px; height: 44px; flex-shrink: 0; }
#arcadeDock > div:has(button) { display: flex; flex: 1 1 0%; min-width: 0; max-width: 168px; gap: 8px; }
#arcadeDock button { touch-action: none; }
@media (max-height: 500px) {
  #startScreen h1 { font-size: 22px; line-height: 1.2; }
  #startScreen p { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .overlay, button { transition: none; }
  .animate-pulse { animation: none; }
}