/* Hill Climb Racing 2D - Styles */
/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

/* CSS Custom Properties for easy customization */
:root {
  /* Font */
  --game-font: "Poppins", sans-serif;

  /* Background Colors */
  --body-bg: #f0f4f8;
  --game-gradient-top: #87ceeb;
  --game-gradient-bottom: #dcdcdc;
  --controls-bg: #333;

  /* UI Colors */
  --info-panel-bg: rgba(0, 0, 0, 0.5);
  --info-panel-text: white;
  --modal-overlay: rgba(0, 0, 0, 0.7);
  --modal-text: white;
  --button-bg: #fff;
  --button-text: #333;
  --control-border: #555;

  /* Control Button Colors */
  --gas-button-bg: #28a745;
  --gas-button-shadow: #1e7e34;
  --brake-button-bg: #dc3545;
  --brake-button-shadow: #b22222;

  /* Sizes */
  --control-button-size: 120px;
  --control-button-font-size: 24px;
  --control-button-border-width: 5px;
  --control-button-shadow-offset: 5px;
  --control-button-active-offset: 3px;

  /* Info Panel */
  --info-panel-font-size: 20px;
  --info-panel-gap: 20px;
  --info-panel-padding: 10px 20px;
  --info-panel-border-radius: 10px;
  --info-panel-position-top: 20px;
  --info-panel-position-left: 20px;

  /* Modal */
  --modal-title-font-size: 64px;
  --modal-text-font-size: 24px;
  --modal-button-font-size: 24px;
  --modal-button-padding: 15px 30px;
  --modal-button-border-radius: 10px;
  --modal-title-margin-bottom: 20px;
  --modal-text-margin-bottom: 30px;

  /* Transitions */
  --button-transition: all 0.1s ease-in-out;
  --restart-button-transition: transform 0.2s;

  /* Canvas */
  --canvas-height: 80%;
  --controls-height: 20%;
}

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--game-font);
  touch-action: none; /* Prevents pull-to-refresh and other touch gestures */
  overflow: hidden;
  background-color: var(--body-bg);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Game Container */
.game-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    to bottom,
    var(--game-gradient-top) 0%,
    var(--game-gradient-bottom) 100%
  );
}

/* Canvas */
canvas {
  background-color: transparent;
  display: block;
  width: 100%;
  height: var(--canvas-height);
  border: none;
  outline: none;
}

/* Controls Section */
.controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: var(--controls-height);
  background-color: var(--controls-bg);
  padding: 10px 0;
  user-select: none;
}

/* Control Buttons */
.control-btn {
  width: var(--control-button-size);
  height: var(--control-button-size);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--control-button-font-size);
  font-weight: bold;
  color: white;
  cursor: pointer;
  border: var(--control-button-border-width) solid var(--control-border);
  transition: var(--button-transition);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Gas Button */
.gas {
  background-color: var(--gas-button-bg);
  box-shadow: 0 var(--control-button-shadow-offset) 0 var(--gas-button-shadow);
}

.gas:active,
.gas:hover:active {
  transform: translateY(var(--control-button-active-offset));
  box-shadow: 0
    calc(
      var(--control-button-shadow-offset) - var(--control-button-active-offset)
    )
    0 var(--gas-button-shadow);
}

/* Brake Button */
.brake {
  background-color: var(--brake-button-bg);
  box-shadow: 0 var(--control-button-shadow-offset) 0 var(--brake-button-shadow);
}

.brake:active,
.brake:hover:active {
  transform: translateY(var(--control-button-active-offset));
  box-shadow: 0
    calc(
      var(--control-button-shadow-offset) - var(--control-button-active-offset)
    )
    0 var(--brake-button-shadow);
}

/* Info Panel */
.info-panel {
  position: absolute;
  top: var(--info-panel-position-top);
  left: var(--info-panel-position-left);
  background: var(--info-panel-bg);
  color: var(--info-panel-text);
  padding: var(--info-panel-padding);
  border-radius: var(--info-panel-border-radius);
  font-size: var(--info-panel-font-size);
  font-weight: 600;
  display: flex;
  gap: var(--info-panel-gap);
  z-index: 5;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Modal Base */
.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--modal-overlay);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--modal-text);
  text-align: center;
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal.hidden {
  display: none;
}

/* Modal Title */
.modal h1 {
  font-size: var(--modal-title-font-size);
  font-weight: bold;
  margin-bottom: var(--modal-title-margin-bottom);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Modal Text */
.modal p {
  font-size: var(--modal-text-font-size);
  margin-bottom: var(--modal-text-margin-bottom);
  font-weight: 400;
  opacity: 0.9;
}

/* Restart/Start Button */
.restart-btn {
  padding: var(--modal-button-padding);
  font-size: var(--modal-button-font-size);
  font-weight: bold;
  color: var(--button-text);
  background-color: var(--button-bg);
  border: none;
  border-radius: var(--modal-button-border-radius);
  cursor: pointer;
  transition: var(--restart-button-transition);
  font-family: var(--game-font);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.restart-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.restart-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --control-button-size: 100px;
    --control-button-font-size: 20px;
    --info-panel-font-size: 18px;
    --info-panel-gap: 15px;
    --modal-title-font-size: 48px;
    --modal-text-font-size: 20px;
    --modal-button-font-size: 20px;
  }

  .info-panel {
    top: 10px;
    left: 10px;
    padding: 8px 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --control-button-size: 80px;
    --control-button-font-size: 18px;
    --info-panel-font-size: 16px;
    --info-panel-gap: 10px;
    --modal-title-font-size: 36px;
    --modal-text-font-size: 18px;
    --modal-button-font-size: 18px;
  }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
  :root {
    --modal-title-font-size: 36px;
    --modal-text-font-size: 18px;
    --modal-title-margin-bottom: 10px;
    --modal-text-margin-bottom: 20px;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  :root {
    --button-transition: none;
    --restart-button-transition: none;
  }
}

/* Focus styles for keyboard navigation */
.control-btn:focus,
.restart-btn:focus {
  outline: 3px solid #4a90e2;
  outline-offset: 2px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #1a1a1a;
    --game-gradient-top: #2c3e50;
    --game-gradient-bottom: #34495e;
    --info-panel-bg: rgba(255, 255, 255, 0.1);
    --modal-overlay: rgba(0, 0, 0, 0.8);
  }
}

/* Print styles (hide game when printing) */
@media print {
  .game-container {
    display: none;
  }
}