/* ==========================================================================
   DUKE DUCK: THE BATTLE FOR BOSTON - Custom Styles
   ========================================================================== */

/* Import Fun Google Fonts for Arcade / Comic Duke Nukem style */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Bangers&family=Outfit:wght@400;600;800;900&display=swap');

:root {
  --color-duke-yellow: #FACC15;
  --color-duke-orange: #F97316;
  --color-boston-blue: #1E3A8A;
  --color-liberal-red: #EF4444;
  --color-green-monster: #15803D;
  --color-dunkin-pink: #EC4899;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: #0f172a;
  color: #f8fafc;
  overflow-x: hidden;
  user-select: none;
}

.font-arcade {
  font-family: 'Press Start 2P', monospace;
}

.font-comic {
  font-family: 'Bangers', cursive;
  letter-spacing: 0.05em;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1e293b;
}
::-webkit-scrollbar-thumb {
  background: var(--color-duke-yellow);
  border-radius: 4px;
}

/* Arcade Glow Effects */
.arcade-glow-yellow {
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.7), 0 0 20px rgba(250, 204, 21, 0.5);
}

.arcade-glow-red {
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.8), 0 0 20px rgba(239, 68, 68, 0.5);
}

.box-glow {
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.3), inset 0 0 15px rgba(250, 204, 21, 0.1);
}

.boss-glow {
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.5), inset 0 0 20px rgba(239, 68, 68, 0.2);
}

/* CRT Scanline Effect Overlay */
.crt-overlay {
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 3px, 3px 100%;
  pointer-events: none;
}

/* Witty Speech Bubble Animation */
@keyframes quip Float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.02); }
}

.speech-bubble {
  animation: quipFloat 3s ease-in-out infinite;
  position: relative;
  background: #ffffff;
  color: #0f172a;
  border-radius: 0.75rem;
  padding: 0.75rem 1.25rem;
  font-weight: 800;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  border: 3px solid #facc15;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #ffffff;
  border-bottom: 0;
  border-left: 0;
  margin-left: -6px;
  margin-bottom: -12px;
}

/* Button Push Bounce */
.btn-arcade {
  transition: all 0.1s active;
  position: relative;
  border-bottom: 5px solid rgba(0,0,0,0.4);
}

.btn-arcade:active {
  transform: translateY(3px);
  border-bottom: 2px solid rgba(0,0,0,0.4);
}

/* Character Card Hover */
.char-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.char-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: #facc15;
  box-shadow: 0 20px 25px -5px rgba(250, 204, 21, 0.2);
}

/* Gameplay Canvas Container */
#game-canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
}

/* Mobile Virtual Joystick overlays */
#joystick-container, #shoot-stick-container {
  touch-action: none;
}

/* Damage / Screen Flash Overlay */
@keyframes damageFlash {
  0% { background-color: rgba(239, 68, 68, 0.6); }
  100% { background-color: rgba(239, 68, 68, 0); }
}

.flash-damage {
  animation: damageFlash 0.25s ease-out;
}

/* Boss Warning Banner */
@keyframes warningBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.05); }
}

.boss-warning {
  animation: warningBlink 0.8s infinite ease-in-out;
}