/* ==========================================================================
   Flappy Dunk - Pixel-Perfect Responsive Style & Layout
   Coordinate Standard: 368 x 448 Virtual Space
   ========================================================================== */

/* 1. Global Box Sizing & Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2. Root & Document Setup */
html,
body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow: hidden;
  background-color: #1a1a1a; /* Deep dark letterboxing background */
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Touch & Drag Prevention */
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  
  /* Notch / Safe Area Inset Support */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 3. Game Container (Letterboxing & Centering) */
#game-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 4. Canvas Styling & High-DPI Pixel-Art Rendering */
#game-canvas,
canvas {
  display: block;
  background-color: #fee170; /* Pastel yellow basketball court base */
  
  /* High-DPI Crisp Pixel-Art Rendering */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  
  /* Subtle drop shadow to delineate virtual viewport */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65), 0 2px 10px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  
  /* Prevent pointer interactions triggering browser navigation */
  touch-action: none;
  outline: none;
}

/* 5. Audio Unlock Banner / Floating Helpers (Optional overlay) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 6. UI Overlay System */
#ui-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 368px; /* Fixed virtual width */
  height: 448px; /* Fixed virtual height */
  transform: translate(-50%, -50%);
  pointer-events: none; /* Let clicks pass through by default */
  font-family: 'Press Start 2P', cursive;
  box-sizing: border-box;
}

#ui-layer * {
  box-sizing: border-box;
}

.ui-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* Catch clicks on UI elements */
}

.ui-screen.hidden {
  display: none !important;
}

/* Buttons and Panels general */
.pixel-btn {
  background-color: #D84A1B;
  color: #FFFFFF;
  border: 4px solid #381E12;
  border-radius: 2px;
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  text-shadow: 1px 1px 0 #000;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.2);
  transition: transform 0.1s;
}
.pixel-btn:active {
  transform: scale(0.95);
}

/* Start Menu Specifics */
#ui-start-menu .top-left-box {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: #E2C08D;
  border: 4px solid #4F3533;
  padding: 8px 12px;
  color: #331B12;
  text-align: center;
  border-radius: 4px;
}
#ui-start-menu .best-score-label {
  font-size: 8px;
  margin-bottom: 4px;
}
#ui-start-menu .best-score-val {
  font-size: 12px;
}

#ui-start-menu .top-right-text {
  position: absolute;
  top: 20px;
  right: 15px;
  font-size: 12px;
  color: #FFFFFF;
  text-shadow: 2px 2px 0 #4F3533, -2px -2px 0 #4F3533, 2px -2px 0 #4F3533, -2px 2px 0 #4F3533;
}

#ui-start-menu .main-title {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  text-align: center;
  white-space: nowrap;
  
  /* Create the gradient text with stroke */
  background: linear-gradient(to bottom, #FFF4CC 0%, #E2854F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(3px 3px 0 #401E18) drop-shadow(-2px -2px 0 #FFFFFF);
}

#ui-start-menu .start-controls-container {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#ui-start-menu .tap-to-shoot {
  background-color: #E2C08D;
  border: 4px solid #4F3533;
  color: #A36B32;
  padding: 10px 15px;
  font-size: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
}

#ui-start-menu .main-buttons-box {
  background-color: #E2C08D;
  border: 4px solid #4F3533;
  padding: 15px;
  width: 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#ui-start-menu .main-buttons-box .pixel-btn {
  width: 100%;
}

#ui-start-menu .author-credits {
  font-size: 8px;
  color: #331B12;
  text-align: center;
  margin-top: 8px;
}

/* Settings & Events Screens Specifics */
#ui-settings-menu, #ui-events-menu {
  background-image: url('./assets/media_1786914162876.jpg');
  background-size: 100% 100%;
  border: none;
  border-radius: 0;
  width: 100%;
  max-height: none;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: transparent !important;
}

#ui-settings-menu *, #ui-events-menu * {
  color: transparent !important;
  text-shadow: none !important;
  border-color: transparent !important;
  background-color: transparent !important;
}

#ui-start-menu {
  background-image: url('./assets/media_1786914162828.jpg');
  background-size: 100% 100%;
  border: none;
  width: 100%;
  height: 100%;
  padding: 0;
  color: transparent !important;
}

#ui-start-menu * {
  color: transparent !important;
  text-shadow: none !important;
  border-color: transparent !important;
  background-color: transparent !important;
}

/* Make transparent buttons functional by adding an active/hover overlay */
.pixel-btn:active, .key-btn:active, .back-btn:active {
  background-color: rgba(0, 0, 0, 0.4) !important;
  transform: scale(0.95);
}
.pixel-btn:hover, .key-btn:hover, .back-btn:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

#game-canvas {
  background-image: url('./assets/media_1786914162767.jpg');
  background-size: 100% 100%;
  display: block;
}

.section-title {
  font-size: 9px;
  margin-bottom: 8px;
  text-align: center;
  line-height: 1.4;
}

.slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 8px;
  margin-bottom: 8px;
}

.keys-row {
  display: flex;
  justify-content: space-around;
  font-size: 8px;
  text-align: center;
}

.key-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

.key-btn {
  background-color: #CBA373;
  border: 2px solid #4F3533;
  font-family: 'Press Start 2P', cursive;
  font-size: 8px;
  padding: 4px 6px;
  color: #341C1D;
  border-radius: 2px;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2);
}

.auto-play-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.center-row {
  align-items: center;
  gap: 10px;
}

.back-btn {
  background-color: transparent !important;
  border: 2px solid #4F3533 !important;
  color: #341C1D !important;
  text-shadow: none !important;
  box-shadow: none !important;
  margin-top: auto;
  font-size: 8px;
  padding: 8px;
  white-space: normal;
  line-height: 1.4;
}

.text-center { text-align: center; }

/* Events Panel Additions */
.add-action-btn {
  background-color: #CBA373 !important;
  border: 2px solid #4F3533 !important;
  color: #341C1D !important;
  text-shadow: none !important;
  box-shadow: none !important;
  margin-bottom: 10px;
}

.action-box {
  border: 4px solid #4F3533;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 5px;
  font-size: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.action-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  line-height: 1.4;
  gap: 4px;
}

.action-body {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.timer-amt {
  text-align: right;
  margin-left: auto;
  line-height: 1.4;
}