@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;600;800&family=Quicksand:wght@600;800&display=swap');

/* Shared HUD Top-Bar Layer */
.hud-layer, .game-hud {
  position: absolute !important;
  top: 62px !important; /* Pushed down below the 62px ad banner */
  left: 0 !important;
  right: 0 !important;
  height: 45px !important;
  background: #17332d !important; /* Dark slate green matching the mock design */
  border-bottom: 2px solid #137d71 !important; /* Bottom teal accent border */
  display: flex !important;
  justify-content: space-between !important;
  align-items: stretch !important; /* Fill height */
  padding: 0 !important;
  margin: 0 !important;
  z-index: 99 !important;
  box-sizing: border-box !important;
  pointer-events: auto !important; /* Capture click events on HUD panel */
  border-radius: 0 !important; /* Remove any rounding */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hud-layer.hidden, .game-hud.hidden {
  display: none !important;
}

/* Left Platform Return Button */
.hud-back-btn {
  background: #2b8880 !important; /* Kurumsal zemin rengi (#2b8880) */
  color: #ece213 !important; /* Yellow text */
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  height: 100% !important;
  cursor: pointer !important;
  border: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease !important;
  pointer-events: auto !important;
}

.hud-back-btn:hover {
  background: #35a59b !important;
}

.hud-back-arrows {
  font-family: 'Vox Round', 'Quicksand', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  margin-right: 4px !important;
  color: #ece213 !important;
  line-height: 1;
}

.hud-back-text {
  font-family: 'Dharma Gothic E', 'Bebas Neue', sans-serif !important;
  font-weight: bold !important;
  font-size: 20px !important;
  letter-spacing: 1px !important;
  color: #ece213 !important;
  line-height: 1;
}

/* HUD Game Title (Center-Left) */
.hud-game-title {
  color: #ece213 !important; /* Yellow game name */
  font-family: 'Dharma Gothic E', 'Bebas Neue', sans-serif !important;
  font-weight: bold !important;
  font-size: 22px !important;
  letter-spacing: 1px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  text-transform: uppercase !important;
}

/* Can / Hearts container (Center-Right) */
.hud-hearts {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  pointer-events: none !important;
}

.hud-hearts.hidden {
  display: none !important;
}

.heart-icon {
  color: #6ee7b7 !important; /* Teal green hearts */
  font-size: 18px !important;
  text-shadow: 0 0 8px rgba(110, 231, 183, 0.4) !important;
  display: inline-block !important;
}

/* Score Panel Container (Far Right) */
.hud-score-container, .hud-right, .hud-left {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  height: 100% !important;
  pointer-events: none !important;
}

.score-label, .hud-label {
  color: #24bfae !important; /* Teal SCORE label */
  font-family: 'Dharma Gothic E', 'Bebas Neue', sans-serif !important;
  font-size: 18px !important;
  font-weight: bold !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.score-value, .hud-value {
  color: #ece213 !important; /* Yellow score value */
  font-family: 'Dharma Gothic E', 'Bebas Neue', sans-serif !important;
  font-size: 22px !important;
  font-weight: bold !important;
  margin: 0 !important;
  text-shadow: 0 0 10px rgba(236, 226, 19, 0.3) !important;
}

/* Top Banner Container - Transparent */
.gameplay-ad-layer, .gameplay-ad-layer-bottom {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 62px !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99 !important;
  transition: opacity 0.3s ease !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gameplay-ad-layer.hidden, .gameplay-ad-layer-bottom.hidden {
  display: none !important;
}

/* Remove text labels on active ad containers */
.ad-label-top, .ad-label-bottom {
  display: none !important;
}

.ad-box-top, .ad-box-bottom {
  width: 320px !important;
  height: 50px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.hidden {
  display: none !important;
}

/* Shared D-pad Container styles (Horizontal 4-column layout) */
.dpad-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
  width: 100% !important;
  height: 60px !important;
  background: #17332d !important; /* Dark slate green matching the HUD bar */
  border-top: 2px solid #137d71 !important; /* Accent border on top */
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.dpad-arrow-btn {
  background: #2b8880 !important; /* Kurumsal zemin rengi (#2b8880) */
  border: none !important;
  border-left: 1px solid #137d71 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dpad-arrow-btn:first-child {
  border-left: none !important;
}

.dpad-arrow-btn:hover {
  background: #35a59b !important;
}

.dpad-arrow-btn:active {
  background: #40beb2 !important;
}

.dpad-arrows {
  font-family: 'Vox Round', 'Quicksand', sans-serif !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  color: #ece213 !important; /* Yellow arrows */
  line-height: 1 !important;
  text-shadow: 0 0 10px rgba(236, 226, 19, 0.3) !important;
}

/* Adjust game canvas container height dynamically for games with bottom D-pads */
.has-dpad .canvas-container {
  height: calc(100% - 60px) !important;
}

/* Fullscreen toggle button styles inside game HUD */
.hud-fullscreen-btn {
  background: none !important;
  border: none !important;
  color: #ece213 !important; /* Brand yellow */
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  outline: none !important;
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.2s ease !important;
  height: 100% !important;
  pointer-events: auto !important;
}

.hud-fullscreen-btn:hover {
  color: #ffffff !important;
  transform: scale(1.15);
}

.hud-fullscreen-btn:active {
  transform: scale(0.95);
}

.hud-fullscreen-btn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}