/* ==========================================================================
   JUNGLE JUMP - MAIN STYLESHEET
   Description: Professional styling for an original 2D platform adventure.
   Designed for: Desktop and mobile web browsers (including Android screens).
   Destination: JungleJump/css/style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design System & Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Color Palette - Jungle & Earthy African-Inspired Tones */
  --color-bg-deep: #0a140f;        /* Dark forest night */
  --color-panel-bg: #15291c;       /* Dense canopy green */
  --color-panel-border: #2c4c36;   /* Moss green border */
  --color-text-bright: #f4fbf7;    /* Crisp off-white */
  --color-text-muted: #8fa898;     /* Pale sage green */
  
  /* Accent Colors */
  --color-gold: #f1a918;           /* Sunlit gold */
  --color-gold-hover: #ffca58;     /* Bright gold */
  --color-gold-active: #c5860d;    /* Deep gold */
  --color-accent-red: #b33925;     /* Ochre / Terracotta red */
  --color-accent-red-hover: #d24e37;
  
  /* Button Specifics */
  --color-btn-default: #1d3e29;
  --color-btn-hover: #29573a;
  --color-btn-text: #f4fbf7;
  --color-btn-disabled: #2d3831;
  --color-btn-disabled-text: #596a5f;

  /* Layout & Spacing */
  --max-width-game: 960px;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 4px;
  --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.25s ease-in-out;
  
  /* Shadows */
  --shadow-depth: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-inset: inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   2. Reset & Global Styles
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-deep);
  color: var(--color-text-bright);
  font-family: var(--font-primary);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent; /* Prevents gray highlight on tap in mobile Chrome */
}

/* --------------------------------------------------------------------------
   3. Main Layout Structure
   -------------------------------------------------------------------------- */
#gameApp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 1rem;
  max-width: var(--max-width-game);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   4. Header Section
   -------------------------------------------------------------------------- */
#gameHeader {
  text-align: center;
  margin-bottom: 1.5rem;
  width: 100%;
}

#gameHeader h1 {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0 0 0.25rem 0;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
}

#gameHeader p {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Game Viewport & Canvas Container
   -------------------------------------------------------------------------- */
#gameViewport {
  width: 100%;
  max-width: var(--max-width-game);
  margin-bottom: 1rem;
}

#gameContainer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* Enforces 16:9 ratio layout responsively */
  background-color: #050a07; /* Fallback deep canvas color */
  border: 4px solid var(--color-panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-depth);
  overflow: hidden;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Prevents aspect-ratio stretching */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* --------------------------------------------------------------------------
   6. Game Status Overlay
   -------------------------------------------------------------------------- */
#gameStatus {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 20, 15, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  padding: 2rem;
  pointer-events: none; /* Allows clicks to register on elements beneath if needed */
  transition: opacity var(--transition-normal);
  z-index: 10;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* When the game starts or status is empty, it can be hidden programmatically */
#gameStatus:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   7. Score & Game Control Panel
   -------------------------------------------------------------------------- */
#gameInfo {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--color-panel-bg);
  border: 2px solid var(--color-panel-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-depth);
}

#scoreDisplay {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-gold);
  background-color: rgba(0, 0, 0, 0.3);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-gold);
  letter-spacing: 0.05em;
}

#gameControls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   8. Button Styling (Common & Specific)
   -------------------------------------------------------------------------- */
button {
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

/* Focus rings for accessibility */
button:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

/* Game Controls (Start, Pause, Restart) */
#gameControls button {
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-inset);
}

#startButton {
  background-color: var(--color-gold);
  color: var(--color-bg-deep);
}

#startButton:hover:not(:disabled) {
  background-color: var(--color-gold-hover);
  transform: translateY(-1px);
}

#startButton:active:not(:disabled) {
  background-color: var(--color-gold-active);
  transform: translateY(1px);
}

#pauseButton {
  background-color: var(--color-btn-default);
  color: var(--color-btn-text);
  border: 1px solid var(--color-panel-border);
}

#pauseButton:hover:not(:disabled) {
  background-color: var(--color-btn-hover);
}

#restartButton {
  background-color: var(--color-accent-red);
  color: var(--color-text-bright);
}

#restartButton:hover:not(:disabled) {
  background-color: var(--color-accent-red-hover);
  transform: translateY(-1px);
}

#restartButton:active:not(:disabled) {
  background-color: var(--color-accent-red);
  transform: translateY(1px);
}

/* Universal Disabled State */
button:disabled {
  background-color: var(--color-btn-disabled) !important;
  color: var(--color-btn-disabled-text) !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   9. Mobile Touch Controls
   -------------------------------------------------------------------------- */
#mobileControls {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
}

#movementButtons, #actionButtons {
  display: flex;
  gap: 1rem;
}

/* Touch Control Buttons (Arrow Keys & Jump) */
#mobileControls button {
  min-width: 64px;
  min-height: 64px;
  border-radius: 50%;
  background-color: var(--color-panel-bg);
  border: 3px solid var(--color-panel-border);
  color: var(--color-text-bright);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-depth), var(--shadow-inset);
  touch-action: manipulation; /* Disables double-tap-to-zoom for faster button response */
}

#mobileControls button:hover {
  background-color: var(--color-btn-hover);
}

#mobileControls button:active {
  background-color: var(--color-gold);
  border-color: var(--color-gold-hover);
  color: var(--color-bg-deep);
  transform: scale(0.92);
}

/* Specialized styling for the Jump button to differentiate actions */
#jumpButton {
  min-width: 100px !important;
  border-radius: 32px !important; /* Pill shape */
  font-size: 1.1rem !important;
  font-weight: 800;
  letter-spacing: 0.05em;
  background-color: var(--color-btn-default);
}

/* --------------------------------------------------------------------------
   10. Instructions Area
   -------------------------------------------------------------------------- */
#instructions {
  width: 100%;
  background-color: rgba(21, 41, 28, 0.4);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

#instructions h2 {
  font-size: 1.1rem;
  margin: 0 0 0.75rem 0;
  text-transform: uppercase;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-panel-border);
  padding-bottom: 0.25rem;
}

#instructions ul {
  margin: 0;
  padding-left: 1.25rem;
}

#instructions li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

#instructions li strong {
  color: var(--color-text-bright);
}

#instructions kbd {
  background-color: var(--color-panel-bg);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-sm);
  color: var(--color-gold);
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* --------------------------------------------------------------------------
   11. Footer Section
   -------------------------------------------------------------------------- */
#gameFooter {
  text-align: center;
  width: 100%;
  margin-top: auto;
  padding: 1rem 0;
}

#gameFooter p {
  font-size: 0.8rem;
  margin: 0;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12. Responsive Adjustments
   -------------------------------------------------------------------------- */

/* Small Devices (Landscape / Portrait Phones) */
@media (max-width: 600px) {
  #gameHeader h1 {
    font-size: 1.8rem;
  }
  
  #gameInfo {
    flex-direction: column;
    align-items: stretch;
  }
  
  #scoreDisplay {
    text-align: center;
  }
  
  #gameControls {
    justify-content: center;
  }
  
  #mobileControls {
    gap: 1rem;
  }
  
  #mobileControls button {
    min-width: 52px;
    min-height: 52px;
    font-size: 1.25rem;
  }
  
  #jumpButton {
    min-width: 80px !important;
    font-size: 0.95rem !important;
  }
}

/* Ultra Small Screens (e.g. Android devices around 320px wide) */
@media (max-width: 350px) {
  #gameHeader h1 {
    font-size: 1.5rem;
  }

  #gameControls button {
    font-size: 0.8rem;
    padding: 0.5rem 0.8rem;
  }

  #mobileControls button {
    min-width: 48px;
    min-height: 48px;
    font-size: 1.1rem;
  }
  
  #jumpButton {
    min-width: 70px !important;
  }
}

/* --------------------------------------------------------------------------
   13. Accessibility Options (Reduced Motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}