/* Roguelike Game Styles - extends globals.css */
/* Retro Arcade Theme */

/* ============================================
   Settings Popup - Retro Arcade
   ============================================ */

.settings-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 11, 15, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeInArcade 0.2s ease-out;
}

.settings-popup.hidden {
  display: none;
}

.roguelike-settings {
  position: relative;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 4px solid #f4a261;
  border-radius: 8px;
  width: 400px;
  max-width: 90vw;
  overflow: hidden;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 0 0 #bc6c25,
    0 8px 0 0 #14151f,
    0 0 50px rgba(244, 162, 97, 0.3),
    0 15px 40px rgba(0, 0, 0, 0.6);
  
  animation: slideUpArcade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scanline overlay */
.roguelike-settings::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.roguelike-settings-header {
  background: linear-gradient(180deg, #f4a261 0%, #bc6c25 100%);
  padding: 15px 20px;
  position: relative;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 3px 0 0 #8b5a2b;
}

.roguelike-settings .settings-title {
  font-family: "Muro", sans-serif;
  font-size: 1.6rem;
  color: #14151f;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.roguelike-settings .close {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #14151f;
  cursor: pointer;
  transition: all 0.1s ease;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.roguelike-settings .close:hover {
  color: #7f1d1d;
  transform: translateY(-50%) scale(1.2);
}

.roguelike-settings .settings-content {
  padding: 25px 30px;
  position: relative;
  z-index: 2;
}

.roguelike-settings .settings-option {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.roguelike-settings .settings-option:last-child {
  margin-bottom: 0;
}

.roguelike-settings .settings-option label {
  font-family: "Muro", sans-serif;
  font-size: 1rem;
  color: #edf2f4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 #14151f;
}

/* Custom range slider - Retro Arcade style */
.roguelike-settings input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: linear-gradient(180deg, #14151f 0%, #0d0f14 100%);
  border: 3px solid #4b5563;
  border-radius: 10px;
  cursor: pointer;
  
  box-shadow: 
    inset 0 2px 5px rgba(0, 0, 0, 0.5),
    0 2px 0 0 #14151f;
}

.roguelike-settings input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
  border: 3px solid #86efac;
  border-radius: 50%;
  cursor: pointer;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 3px 0 0 #166534,
    0 0 15px rgba(74, 222, 128, 0.5);
  
  transition: all 0.1s ease;
}

.roguelike-settings input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 3px 0 0 #166534,
    0 0 25px rgba(74, 222, 128, 0.7);
}

.roguelike-settings input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
  border: 3px solid #86efac;
  border-radius: 50%;
  cursor: pointer;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 3px 0 0 #166534,
    0 0 15px rgba(74, 222, 128, 0.5);
}

.roguelike-settings input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 3px 0 0 #166534,
    0 0 25px rgba(74, 222, 128, 0.7);
}

/* Tutorial link in settings footer */
.settings-footer {
  padding: 18px 20px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-tutorial-link {
  font-family: "Muro", sans-serif;
  font-size: 0.85rem;
  color: #d1d5db;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  transition: all 0.15s ease;
}

.settings-tutorial-link:hover {
  color: #f4a261;
  border-color: #f4a261;
  background: rgba(244, 162, 97, 0.1);
}

/* Settings Button in Start Menu */
.settings-button-container {
  position: fixed;
  top: 20px;
  right: 70px;
  z-index: 100;
}

.btn-settings {
  position: relative;
  width: 50px;
  height: 50px;
  padding: 0;
  font-size: 1.6rem;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: linear-gradient(180deg, #3d4152 0%, #2b2d42 50%, #1a1d28 100%);
  border: 3px solid #6b7280;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 4px 0 0 #14151f,
    0 5px 0 0 #0a0b0f,
    0 6px 15px rgba(0, 0, 0, 0.4);
  
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.btn-settings:hover {
  transform: translateY(-2px);
  border-color: #9ca3af;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 6px 0 0 #14151f,
    0 7px 0 0 #0a0b0f,
    0 0 20px rgba(156, 163, 175, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.5);
}

.btn-settings:active {
  transform: translateY(2px);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 1px 0 0 #14151f,
    0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-settings img {
  width: 28px;
  height: 28px;
  filter: brightness(1.2) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

/* ============================================
   Body & Layout - Retro Arcade
   ============================================ */

.roguelike-body {
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.15) 3px,
      rgba(0, 0, 0, 0.15) 6px
    ),
    linear-gradient(180deg, #1a1d28 0%, #0d0f14 50%, #14151f 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  overflow: hidden;
}

/* Gray background with scanlines for battle and edit views */
.roguelike-body.roguelike-battle-bg {
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.15) 3px,
      rgba(0, 0, 0, 0.15) 6px
    ),
    #a3a8a7;
}

#view-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: auto;
}

/* ============================================
   View Base Styles
   ============================================ */

.view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.view.hidden {
  display: none;
}

/* Retro Arcade Title System */
.view-title {
  font-family: "Muro", sans-serif;
  font-size: 2.8rem;
  color: #edf2f4;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  
  /* Chunky 3D text shadow */
  text-shadow: 
    3px 3px 0 #14151f,
    5px 5px 0 rgba(0, 0, 0, 0.3),
    0 0 30px rgba(237, 242, 244, 0.3);
}

.view-subtitle {
  font-family: "Muro", sans-serif;
  font-size: 1.3rem;
  color: #9ca3af;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 0 #14151f;
}

/* ============================================
   Retro Arcade Button System
   ============================================ */

.btn {
  position: relative;
  padding: 14px 35px;
  font-family: "Muro", sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #edf2f4;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  
  /* Primary green gradient */
  background: linear-gradient(180deg, #34a853 0%, #2d8f47 50%, #1e6b33 100%);
  border: 4px solid #4ade80;
  
  /* Chunky 3D bevel effect */
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 6px 0 0 #166534,
    0 8px 0 0 #0a0b0f,
    0 10px 20px rgba(0, 0, 0, 0.4);
  
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Text styling */
  text-shadow: 
    2px 2px 0 #14532d,
    0 0 15px rgba(74, 222, 128, 0.5);
}

/* Decorative inner border */
.btn::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-3px);
  border-color: #86efac;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 9px 0 0 #166534,
    0 11px 0 0 #0a0b0f,
    0 0 25px rgba(74, 222, 128, 0.4),
    0 15px 30px rgba(0, 0, 0, 0.5);
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 
    inset 0 3px 5px rgba(0, 0, 0, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 2px 0 0 #166534,
    0 3px 5px rgba(0, 0, 0, 0.3);
}

.btn-large {
  padding: 18px 50px;
  font-size: 1.8rem;
}

/* Secondary - Blue/Steel */
.btn-secondary {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  border-color: #60a5fa;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 6px 0 0 #1e3a8a,
    0 8px 0 0 #0a0b0f,
    0 10px 20px rgba(0, 0, 0, 0.4);
  text-shadow: 
    2px 2px 0 #1e3a8a,
    0 0 15px rgba(96, 165, 250, 0.5);
}

.btn-secondary:hover {
  border-color: #93c5fd;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 9px 0 0 #1e3a8a,
    0 11px 0 0 #0a0b0f,
    0 0 25px rgba(96, 165, 250, 0.4),
    0 15px 30px rgba(0, 0, 0, 0.5);
}

/* Danger - Red */
.btn-danger {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
  border-color: #f87171;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 6px 0 0 #7f1d1d,
    0 8px 0 0 #0a0b0f,
    0 10px 20px rgba(0, 0, 0, 0.4);
  text-shadow: 
    2px 2px 0 #7f1d1d,
    0 0 15px rgba(248, 113, 113, 0.5);
}

.btn-danger:hover {
  border-color: #fca5a5;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 9px 0 0 #7f1d1d,
    0 11px 0 0 #0a0b0f,
    0 0 25px rgba(248, 113, 113, 0.4),
    0 15px 30px rgba(0, 0, 0, 0.5);
}

/* Back Button - Compact retro style */
.btn-back {
  position: relative;
  padding: 10px 20px;
  font-family: "Muro", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #edf2f4;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  
  background: linear-gradient(180deg, #4b5563 0%, #374151 50%, #1f2937 100%);
  border: 3px solid #6b7280;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 4px 0 0 #111827,
    0 5px 0 0 #0a0b0f,
    0 6px 12px rgba(0, 0, 0, 0.3);
  
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 1px 1px 0 #111827;
}

.btn-back::before {
  content: "◀";
  font-size: 0.9rem;
  margin-right: 2px;
}

.btn-back:hover {
  transform: translateY(-2px) translateX(-3px);
  border-color: #9ca3af;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 6px 0 0 #111827,
    0 7px 0 0 #0a0b0f,
    0 0 15px rgba(156, 163, 175, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.4);
}

.btn-back:active {
  transform: translateY(2px) translateX(-1px);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 1px 0 0 #111827,
    0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ============================================
   Panels & Cards
   ============================================ */

/* Retro Arcade Panel */
.panel {
  position: relative;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 4px solid #4b5563;
  border-radius: 8px;
  padding: 20px;
  
  /* 3D extruded effect */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 4px 0 0 #14151f,
    0 6px 0 0 #0a0b0f,
    0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Scanline overlay for panels */
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.1) 3px,
    rgba(0, 0, 0, 0.1) 6px
  );
  pointer-events: none;
  border-radius: 4px;
  z-index: 1;
}

/* Retro Arcade Card System */
.card {
  --card-accent: #6b7280;
  --card-accent-dark: #374151;
  --card-accent-glow: rgba(107, 114, 128, 0.5);
  
  position: relative;
  width: 280px;
  height: 400px;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* Outer 3D extruded border effect */
  background: linear-gradient(145deg, #3d4152 0%, #1a1d28 100%);
  border: 5px solid var(--card-accent);
  border-radius: 8px;
  
  /* Multi-layer shadow for depth */
  box-shadow: 
    0 6px 0 0 var(--card-accent-dark),
    0 8px 0 0 #14151f,
    0 12px 20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Scanline overlay effect */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
  z-index: 10;
  border-radius: 3px;
}

/* Corner accent decorations */
.card::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 2px solid var(--card-accent);
  border-radius: 4px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 14px 0 0 var(--card-accent-dark),
    0 16px 0 0 #14151f,
    0 20px 35px rgba(0, 0, 0, 0.5),
    0 0 30px var(--card-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card:active {
  transform: translateY(-2px);
  box-shadow: 
    0 2px 0 0 var(--card-accent-dark),
    0 3px 0 0 #14151f,
    0 5px 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Inner panel area */
.card-title {
  font-size: 1.5rem;
  color: #edf2f4;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 8px;
  padding: 8px 15px;
  text-shadow: 
    2px 2px 0 #14151f,
    -1px -1px 0 #14151f,
    1px -1px 0 #14151f,
    -1px 1px 0 #14151f;
  font-family: "Muro", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
  background: linear-gradient(180deg, var(--card-accent) 0%, var(--card-accent-dark) 100%);
  border-radius: 4px;
  border: 2px solid var(--card-accent);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #edf2f4;
  text-align: center;
  width: calc(100% - 30px);
  margin: 10px 15px;
  padding: 10px;
  z-index: 2;
  overflow-y: auto;

  /* Inset content panel */
  background: linear-gradient(180deg, #1a1d28 0%, #0d0f14 100%);
  border: 3px solid #14151f;
  border-radius: 6px;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.5),
    inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.card-footer {
  margin-top: auto;
  margin-bottom: 15px;
  padding: 10px 20px;
  width: calc(100% - 30px);
  text-align: center;
  z-index: 2;
  
  /* Footer bar styling */
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 2px solid var(--card-accent-dark);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ============================================
   Card Type Variants - Retro Arcade Colors
   ============================================ */

/* Battle Card - Aggressive Red */
.card-battle {
  --card-accent: #e63946;
  --card-accent-dark: #9d0208;
  --card-accent-glow: rgba(230, 57, 70, 0.6);
}

.card-battle .card-title {
  background: linear-gradient(180deg, #e63946 0%, #9d0208 100%);
  border-color: #ff6b6b;
}

/* Item Card - Treasure Gold */
.card-item {
  --card-accent: #f4a261;
  --card-accent-dark: #bc6c25;
  --card-accent-glow: rgba(244, 162, 97, 0.6);
}

.card-item .card-title {
  background: linear-gradient(180deg, #f4a261 0%, #bc6c25 100%);
  border-color: #ffd166;
}

/* Recruit Card - Fresh Green */
.card-recruit {
  --card-accent: #2a9d8f;
  --card-accent-dark: #1a7268;
  --card-accent-glow: rgba(42, 157, 143, 0.6);
}

.card-recruit .card-title {
  background: linear-gradient(180deg, #2a9d8f 0%, #1a7268 100%);
  border-color: #52c9b8;
}

/* Disabled/unaffordable cards */
.card.card-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.7) brightness(0.7);
}

.card.card-disabled:hover {
  transform: none;
  box-shadow: 
    0 6px 0 0 var(--card-accent-dark),
    0 8px 0 0 #14151f,
    0 12px 20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card .bounty, .card .cost {
  font-size: 1.3rem;
  font-weight: bold;
  text-shadow: 
    2px 2px 0 #14151f,
    0 0 10px currentColor;
  font-family: "Muro", sans-serif;
  letter-spacing: 0.05em;
}

.card .bounty {
  color: #ffd700;
}

.card .cost {
  color: #edf2f4;
}

.card .cost.unaffordable {
  color: #ff4444;
  animation: pulse-warning 1s ease-in-out infinite;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.card .driver-name {
  font-size: 1.2rem;
  color: #edf2f4;
  margin-bottom: 5px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #14151f;
}

.card .recruit-note {
  font-size: 0.85rem;
  color: #9ca3af;
  margin-top: 5px;
}

/* ============================================
   Shop View
   ============================================ */

.shop-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  max-width: 1200px;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
}

/* Retro Arcade Gold Display */
.gold-display {
  position: relative;
  background: linear-gradient(180deg, #f4a261 0%, #bc6c25 100%);
  color: #edf2f4;
  padding: 10px 22px 10px 38px;
  border-radius: 6px;
  font-size: 1.4rem;
  font-family: "Muro", sans-serif;
  letter-spacing: 0.05em;
  border: 3px solid #ffd166;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 4px 0 0 #8b5a2b,
    0 5px 0 0 #14151f,
    0 0 15px rgba(244, 162, 97, 0.4);
  
  text-shadow: 
    2px 2px 0 #8b5a2b,
    0 0 10px rgba(255, 209, 102, 0.5);
}

/* Gold coin icon */
.gold-display::before {
  content: "G";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: linear-gradient(180deg, #ffd166 0%, #d4af37 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
  color: #8b5a2b;
  text-shadow: none;
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Retro Arcade Wave Display */
.wave-display {
  font-family: "Muro", sans-serif;
  font-size: 1.2rem;
  color: #edf2f4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 16px;
  background: linear-gradient(180deg, #3d4152 0%, #1a1d28 100%);
  border: 3px solid #6b7280;
  border-radius: 5px;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 3px 0 0 #14151f;
  
  text-shadow: 2px 2px 0 #14151f;
}

/* ============================================
   Lives Display - Hearts in Header (Retro Pixel Style)
   ============================================ */

.lives-display {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  padding: 13px 16px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #3d4152 0%, #1a1d28 100%);
  border: 3px solid #6b7280;
  border-radius: 6px;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 4px 0 0 #14151f,
    0 5px 0 0 #0a0b0f;
}

/* Pixel heart using box-shadow technique for retro look */
.heart-icon {
  display: inline-block;
  width: 4px;
  height: 4px;
  position: relative;
  margin: 6px 8px;
}

.heart-filled {
  background: #ef4444;
  box-shadow:
    /* Row 1 - top bumps */
    -8px -8px 0 0 #ef4444,
    -4px -8px 0 0 #ef4444,
    4px -8px 0 0 #ef4444,
    8px -8px 0 0 #ef4444,
    /* Row 2 */
    -12px -4px 0 0 #ef4444,
    -8px -4px 0 0 #ff6b6b,
    -4px -4px 0 0 #ff6b6b,
    0px -4px 0 0 #ef4444,
    4px -4px 0 0 #ef4444,
    8px -4px 0 0 #ef4444,
    12px -4px 0 0 #ef4444,
    /* Row 3 */
    -12px 0px 0 0 #ef4444,
    -8px 0px 0 0 #ff6b6b,
    -4px 0px 0 0 #ef4444,
    4px 0px 0 0 #ef4444,
    8px 0px 0 0 #dc2626,
    12px 0px 0 0 #dc2626,
    /* Row 4 */
    -8px 4px 0 0 #ef4444,
    -4px 4px 0 0 #ef4444,
    0px 4px 0 0 #ef4444,
    4px 4px 0 0 #dc2626,
    8px 4px 0 0 #dc2626,
    /* Row 5 */
    -4px 8px 0 0 #dc2626,
    0px 8px 0 0 #dc2626,
    4px 8px 0 0 #b91c1c,
    /* Row 6 - bottom point */
    0px 12px 0 0 #b91c1c;
}

.heart-empty {
  background: #374151;
  box-shadow:
    /* Row 1 - top bumps */
    -8px -8px 0 0 #374151,
    -4px -8px 0 0 #374151,
    4px -8px 0 0 #374151,
    8px -8px 0 0 #374151,
    /* Row 2 */
    -12px -4px 0 0 #374151,
    -8px -4px 0 0 #4b5563,
    -4px -4px 0 0 #4b5563,
    0px -4px 0 0 #374151,
    4px -4px 0 0 #374151,
    8px -4px 0 0 #374151,
    12px -4px 0 0 #374151,
    /* Row 3 */
    -12px 0px 0 0 #374151,
    -8px 0px 0 0 #4b5563,
    -4px 0px 0 0 #374151,
    4px 0px 0 0 #374151,
    8px 0px 0 0 #1f2937,
    12px 0px 0 0 #1f2937,
    /* Row 4 */
    -8px 4px 0 0 #374151,
    -4px 4px 0 0 #374151,
    0px 4px 0 0 #374151,
    4px 4px 0 0 #1f2937,
    8px 4px 0 0 #1f2937,
    /* Row 5 */
    -4px 8px 0 0 #1f2937,
    0px 8px 0 0 #1f2937,
    4px 8px 0 0 #111827,
    /* Row 6 - bottom point */
    0px 12px 0 0 #111827;
}

/* Large hearts for defeat screen */
.heart-large {
  width: 6px;
  height: 6px;
  margin: 12px 16px 12px 16px;
  transform: scale(1.8);
}

/* Defeat screen lives display */
.defeat-lives-display {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 25px 0;
}

/* ============================================
   Heart Card Styling
   ============================================ */

.card-heart {
  border-color: #ef4444 !important;
  box-shadow: 
    0 0 20px rgba(239, 68, 68, 0.3),
    inset 0 0 15px rgba(239, 68, 68, 0.1) !important;
}

.card-heart .card-title {
  color: #ef4444;
}

.card-heart-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

/* Large pixel heart for card - using box-shadow pixel art technique */
.heart-card-icon {
  width: 8px;
  height: 8px;
  background: #ef4444;
  transform: scale(1.5);
  margin: 20px 0;
  box-shadow:
    /* Row 1 - top bumps */
    -16px -16px 0 0 #ef4444,
    -8px -16px 0 0 #ef4444,
    8px -16px 0 0 #ef4444,
    16px -16px 0 0 #ef4444,
    /* Row 2 */
    -24px -8px 0 0 #ef4444,
    -16px -8px 0 0 #ff6b6b,
    -8px -8px 0 0 #ff6b6b,
    0px -8px 0 0 #ef4444,
    8px -8px 0 0 #ef4444,
    16px -8px 0 0 #ef4444,
    24px -8px 0 0 #ef4444,
    /* Row 3 */
    -24px 0px 0 0 #ef4444,
    -16px 0px 0 0 #ff6b6b,
    -8px 0px 0 0 #ef4444,
    8px 0px 0 0 #ef4444,
    16px 0px 0 0 #dc2626,
    24px 0px 0 0 #dc2626,
    /* Row 4 */
    -16px 8px 0 0 #ef4444,
    -8px 8px 0 0 #ef4444,
    0px 8px 0 0 #ef4444,
    8px 8px 0 0 #dc2626,
    16px 8px 0 0 #dc2626,
    /* Row 5 */
    -8px 16px 0 0 #dc2626,
    0px 16px 0 0 #dc2626,
    8px 16px 0 0 #b91c1c,
    /* Row 6 - bottom point */
    0px 24px 0 0 #b91c1c;
}

.heart-card-description {
  font-family: "Muro", sans-serif;
  font-size: 1.1rem;
  color: #edf2f4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 2px 2px 0 #14151f;
}

.cards-container {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 30px 0;
}

/* ============================================
   Shop Title - Retro Arcade Text
   ============================================ */

.shop-title {
  font-family: "Muro", sans-serif;
  font-size: 4rem;
  color: #f4a261;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
  margin: 0 0 15px 0;
  position: relative;
  
  /* Chunky retro text shadow for 3D effect */
  text-shadow: 
    3px 3px 0 #bc6c25,
    6px 6px 0 #14151f,
    8px 8px 0 rgba(0, 0, 0, 0.3),
    0 0 40px rgba(244, 162, 97, 0.5);
}

/* Decorative underline */
.shop-title::after {
  content: "";
  display: block;
  width: 200px;
  height: 4px;
  margin: 15px auto 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #f4a261 20%, 
    #ffd166 50%, 
    #f4a261 80%, 
    transparent 100%
  );
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(244, 162, 97, 0.4);
}

.shop-actions {
  display: flex;
  flex-direction: row;
  gap: 25px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0;
}

/* ============================================
   Retro Arcade Shop Buttons
   ============================================ */

.btn-reroll,
.btn-garage {
  position: relative;
  padding: 18px 35px;
  font-family: "Muro", sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #edf2f4;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  
  /* Base button gradient */
  background: linear-gradient(180deg, #3d4152 0%, #2b2d42 50%, #1a1d28 100%);
  
  /* Chunky 3D bevel effect */
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 6px 0 0 #14151f,
    0 8px 0 0 #0a0b0f,
    0 10px 20px rgba(0, 0, 0, 0.4);
  
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Text styling */
  text-shadow: 
    2px 2px 0 #14151f,
    0 0 15px currentColor;
}

/* Decorative corner accents */
.btn-reroll::before,
.btn-garage::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  pointer-events: none;
}

.btn-reroll:hover,
.btn-garage:hover {
  transform: translateY(-3px);
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 9px 0 0 #14151f,
    0 11px 0 0 #0a0b0f,
    0 15px 30px rgba(0, 0, 0, 0.5);
}

.btn-reroll:active,
.btn-garage:active {
  transform: translateY(4px);
  box-shadow: 
    inset 0 3px 5px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 2px 0 0 #14151f,
    0 3px 5px rgba(0, 0, 0, 0.3);
}

/* Reroll Button - Orange/Amber accent */
.btn-reroll {
  background: linear-gradient(180deg, #5a4a35 0%, #3d3526 50%, #2a2419 100%);
  border: 4px solid #f4a261;
}

.btn-reroll::after {
  content: "🎲";
  margin-left: 10px;
  font-size: 1.2rem;
  filter: drop-shadow(2px 2px 0 #14151f);
}

.btn-reroll:hover {
  border-color: #ffd166;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 9px 0 0 #bc6c25,
    0 11px 0 0 #0a0b0f,
    0 0 25px rgba(244, 162, 97, 0.4),
    0 15px 30px rgba(0, 0, 0, 0.5);
}

/* Free reroll glow effect when player can't afford any cards */
.btn-reroll.reroll-free-glow {
  border-color: #7fff00;
  background: linear-gradient(180deg, #3a5a35 0%, #2a4a26 50%, #1a3a19 100%);
  animation: reroll-glow-pulse 1.2s ease-in-out infinite;
}

.btn-reroll.reroll-free-glow #reroll-cost {
  color: #7fff00;
  text-shadow: 0 0 8px #7fff00;
}

@keyframes reroll-glow-pulse {
  0%, 100% {
    box-shadow: 
      inset 0 2px 0 rgba(255, 255, 255, 0.15),
      inset 0 -3px 0 rgba(0, 0, 0, 0.3),
      0 6px 0 0 #2a5a20,
      0 8px 0 0 #0a0b0f,
      0 0 20px rgba(127, 255, 0, 0.5),
      0 0 40px rgba(127, 255, 0, 0.3),
      0 10px 20px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: 
      inset 0 2px 0 rgba(255, 255, 255, 0.15),
      inset 0 -3px 0 rgba(0, 0, 0, 0.3),
      0 6px 0 0 #2a5a20,
      0 8px 0 0 #0a0b0f,
      0 0 35px rgba(127, 255, 0, 0.7),
      0 0 60px rgba(127, 255, 0, 0.4),
      0 10px 20px rgba(0, 0, 0, 0.4);
  }
}

.btn-reroll.reroll-free-glow:hover {
  border-color: #9fff40;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 9px 0 0 #3a6a30,
    0 11px 0 0 #0a0b0f,
    0 0 40px rgba(127, 255, 0, 0.6),
    0 0 70px rgba(127, 255, 0, 0.4),
    0 15px 30px rgba(0, 0, 0, 0.5);
}

/* Garage Button - Teal/Green accent */
.btn-garage {
  background: linear-gradient(180deg, #2d4a47 0%, #1f3533 50%, #152625 100%);
  border: 4px solid #2a9d8f;
}

.btn-garage:hover {
  border-color: #52c9b8;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 9px 0 0 #1a7268,
    0 11px 0 0 #0a0b0f,
    0 0 25px rgba(42, 157, 143, 0.4),
    0 15px 30px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Garage View - Retro Arcade
   ============================================ */

.garage-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  max-width: 1400px;
}

.garage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.vehicle-slots-container {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
}

/* Retro Arcade Vehicle Slot */
.vehicle-slot {
  position: relative;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 4px solid #3b82f6;
  border-radius: 8px;
  width: 195px;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* 3D extruded effect */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 5px 0 0 #1e3a8a,
    0 7px 0 0 #14151f,
    0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Scanline overlay */
.vehicle-slot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  border-radius: 4px;
  z-index: 5;
}

.vehicle-slot:hover {
  transform: translateY(-4px);
  border-color: #60a5fa;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 9px 0 0 #1e3a8a,
    0 11px 0 0 #14151f,
    0 0 25px rgba(59, 130, 246, 0.3),
    0 15px 30px rgba(0, 0, 0, 0.4);
}

.vehicle-slot.empty {
  border-style: dashed;
  border-color: #4b5563;
  opacity: 0.6;
  box-shadow: 
    0 4px 0 0 #1f2937,
    0 6px 0 0 #14151f,
    0 8px 15px rgba(0, 0, 0, 0.3);
}

.vehicle-slot.empty:hover {
  border-color: #6b7280;
  opacity: 0.8;
}

.vehicle-slot-number {
  font-family: "Muro", sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  text-shadow: 1px 1px 0 #14151f;
}

.vehicle-slot-name {
  font-family: "Muro", sans-serif;
  font-size: 1rem;
  color: #edf2f4;
  margin-bottom: 8px;
  text-shadow: 2px 2px 0 #14151f;
  text-align: center;
}

/* Vehicle speed display */
.vehicle-slot-speed {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  padding: 4px 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vehicle-slot-speed .speed-label {
  color: #9ca3af;
  font-weight: normal;
}

.vehicle-slot-speed .speed-value {
  font-family: "Muro", sans-serif;
  font-weight: bold;
}

/* Speed calculating state - animated */
.vehicle-slot-speed.speed-calculating .speed-value {
  color: #9ca3af;
  animation: speedPulse 1.5s ease-in-out infinite;
}

@keyframes speedPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Speed slow (red) */
.vehicle-slot-speed.speed-slow .speed-value {
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Speed medium (yellow) */
.vehicle-slot-speed.speed-medium .speed-value {
  color: #eab308;
  text-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
}

/* Speed fast (green) */
.vehicle-slot-speed.speed-fast .speed-value {
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

/* Slow vehicle warning - positioned top right of card */
.vehicle-slow-warning {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}

.vehicle-slow-warning .slow-warning-icon {
  font-size: 1.2rem;
  cursor: help;
  animation: warningPulse 1.5s ease-in-out infinite;
}

@keyframes warningPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Slow warning tooltip - matches skill-tooltip style */
.vehicle-slow-warning .slow-warning-tooltip {
  position: absolute;
  display: none;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 2px solid #ef4444;
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 200px;
  max-width: 250px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.vehicle-slow-warning:hover .slow-warning-tooltip {
  display: block;
}

.vehicle-slow-warning .slow-warning-tooltip-header {
  font-family: "Muro", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #ef4444;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 0 #14151f;
}

.vehicle-slow-warning .slow-warning-tooltip-desc {
  font-family: "Muro", sans-serif;
  font-size: 0.85rem;
  color: #c8d0d8;
  line-height: 1.4;
}

/* Friendly fire warning - positioned top right, offset from slow warning */
.vehicle-friendly-fire-warning {
  position: absolute;
  top: 8px;
  right: 36px;
  z-index: 10;
}

.vehicle-friendly-fire-warning .friendly-fire-icon {
  font-size: 1.2rem;
  cursor: help;
  animation: warningPulse 1.5s ease-in-out infinite;
}

/* Friendly fire tooltip - matches skill-tooltip style */
.vehicle-friendly-fire-warning .friendly-fire-tooltip {
  position: absolute;
  display: none;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 2px solid #f97316;
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 220px;
  max-width: 280px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.vehicle-friendly-fire-warning:hover .friendly-fire-tooltip {
  display: block;
}

.vehicle-friendly-fire-warning .friendly-fire-tooltip-header {
  font-family: "Muro", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #f97316;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 0 #14151f;
}

.vehicle-friendly-fire-warning .friendly-fire-tooltip-desc {
  font-family: "Muro", sans-serif;
  font-size: 0.85rem;
  color: #c8d0d8;
  line-height: 1.4;
}

.vehicle-slot-preview {
  flex: 1;
  width: 100%;
  background: linear-gradient(180deg, #14151f 0%, #0d0f14 100%);
  border: 3px solid #374151;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4b5563;
  
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Legacy driver text - now replaced by driver-box */
.vehicle-slot-driver {
  display: none;
}

/* Drag and drop states */
.vehicle-slot[draggable="true"] {
  cursor: grab;
}

.vehicle-slot.dragging {
  opacity: 0.5;
  cursor: grabbing;
  transform: scale(0.95);
}

.vehicle-slot.drag-over {
  border-color: #4ade80 !important;
  background: linear-gradient(180deg, #1a3d2e 0%, #0d1f17 100%);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    inset 0 1px 0 rgba(74, 222, 128, 0.2),
    0 9px 0 0 #166534,
    0 11px 0 0 #14151f,
    0 0 30px rgba(74, 222, 128, 0.4),
    0 15px 30px rgba(0, 0, 0, 0.4);
}

/* ============================================
   Owned Packs Container - Retro Arcade
   ============================================ */

.packs-container {
  width: 100%;
  margin-top: 15px;
  position: relative;
  z-index: 2;
}

.packs-title {
  font-family: "Muro", sans-serif;
  font-size: 1.2rem;
  color: #f4a261;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 #14151f;
}

.packs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(180deg, #14151f 0%, #0d0f14 100%);
  border: 3px solid #374151;
  border-radius: 6px;
  padding: 15px;
  min-height: 80px;
  
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.packs-hint {
  font-family: "Muro", sans-serif;
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 10px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.3s ease;
}

.packs-hint.hint-active {
  color: #ffd166;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
}

/* Retro Arcade Pack Item */
.pack-item {
  position: relative;
  background: linear-gradient(180deg, #f4a261 0%, #bc6c25 100%);
  border: 3px solid #ffd166;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  min-width: 110px;
  cursor: grab;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 4px 0 0 #8b5a2b,
    0 5px 0 0 #14151f,
    0 6px 12px rgba(0, 0, 0, 0.3);
}

.pack-item:hover {
  transform: translateY(-3px);
  border-color: #ffe4a0;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 7px 0 0 #8b5a2b,
    0 8px 0 0 #14151f,
    0 0 20px rgba(244, 162, 97, 0.4),
    0 10px 20px rgba(0, 0, 0, 0.4);
}

.pack-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
  transform: scale(0.95);
}

.pack-item.pack-selected {
  border-color: #4ade80;
  background: linear-gradient(180deg, #34a853 0%, #1e6b33 100%);
  transform: translateY(-3px) scale(1.02);
  animation: pack-pulse-arcade 1s ease-in-out infinite;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 7px 0 0 #166534,
    0 8px 0 0 #14151f,
    0 0 25px rgba(74, 222, 128, 0.5),
    0 10px 20px rgba(0, 0, 0, 0.4);
}

@keyframes pack-pulse-arcade {
  0%, 100% { 
    box-shadow: 
      inset 0 2px 0 rgba(255, 255, 255, 0.3),
      inset 0 -2px 0 rgba(0, 0, 0, 0.2),
      0 7px 0 0 #166534,
      0 8px 0 0 #14151f,
      0 0 25px rgba(74, 222, 128, 0.5),
      0 10px 20px rgba(0, 0, 0, 0.4);
  }
  50% { 
    box-shadow: 
      inset 0 2px 0 rgba(255, 255, 255, 0.3),
      inset 0 -2px 0 rgba(0, 0, 0, 0.2),
      0 7px 0 0 #166534,
      0 8px 0 0 #14151f,
      0 0 40px rgba(74, 222, 128, 0.7),
      0 10px 20px rgba(0, 0, 0, 0.4);
  }
}

.pack-item .pack-name {
  font-family: "Muro", sans-serif;
  font-size: 0.9rem;
  color: #14151f;
  margin-bottom: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Pack rarity badge (small, in garage) */
.pack-rarity-badge {
  font-family: "Muro", sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 4px;
  display: inline-block;
}

.pack-rarity-badge.rarity-uncommon {
  color: #fff;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  text-shadow: 1px 1px 0 #14532d;
}

.pack-rarity-badge.rarity-rare {
  color: #fff;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  text-shadow: 1px 1px 0 #1e3a8a;
}

.pack-rarity-badge.rarity-epic {
  color: #fff;
  background: linear-gradient(180deg, #a855f7 0%, #7e22ce 100%);
  text-shadow: 1px 1px 0 #581c87;
}

.pack-rarity-badge.rarity-legendary {
  color: #14151f;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: legendary-badge-pulse 1.5s ease-in-out infinite;
}

@keyframes legendary-badge-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(251, 191, 36, 0.5); }
  50% { box-shadow: 0 0 12px rgba(251, 191, 36, 0.8); }
}

/* Pack item rarity border colors */
.pack-item.pack-rarity-uncommon {
  border-color: #22c55e;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 4px 0 0 #166534,
    0 5px 0 0 #14151f,
    0 0 10px rgba(34, 197, 94, 0.3);
}

.pack-item.pack-rarity-rare {
  border-color: #3b82f6;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 4px 0 0 #1e3a8a,
    0 5px 0 0 #14151f,
    0 0 10px rgba(59, 130, 246, 0.4);
}

.pack-item.pack-rarity-epic {
  border-color: #a855f7;
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 4px 0 0 #581c87,
    0 5px 0 0 #14151f,
    0 0 12px rgba(168, 85, 247, 0.5);
}

.pack-item.pack-rarity-legendary {
  border-color: #fbbf24;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 4px 0 0 #92400e,
    0 5px 0 0 #14151f,
    0 0 15px rgba(251, 191, 36, 0.6);
  animation: legendary-pack-glow 2s ease-in-out infinite;
}

@keyframes legendary-pack-glow {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 4px 0 0 #92400e, 0 5px 0 0 #14151f, 0 0 15px rgba(251, 191, 36, 0.6); }
  50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 4px 0 0 #92400e, 0 5px 0 0 #14151f, 0 0 25px rgba(251, 191, 36, 0.9); }
}

.pack-item .pack-contents {
  font-size: 0.7rem;
  color: #3d2a14;
  text-align: center;
  word-break: break-word;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pack Sell Zone */
.pack-sell-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 20px;
  background: linear-gradient(180deg, #1a1d28 0%, #0d0f14 100%);
  border: 3px dashed #ef4444;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;

  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pack-sell-zone:hover {
  border-color: #f87171;
  background: linear-gradient(180deg, #2a1a1a 0%, #1a0d0d 100%);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(239, 68, 68, 0.2);
}

.pack-sell-zone.sell-zone-drag-over {
  border-style: solid;
  border-color: #ef4444;
  background: linear-gradient(180deg, #3d1515 0%, #2a0d0d 100%);
  transform: scale(1.02);

  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(239, 68, 68, 0.5);
}

.sell-zone-icon {
  font-size: 1.5rem;
}

.sell-zone-text {
  font-family: "Muro", sans-serif;
  font-size: 1rem;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.pack-sell-zone.sell-zone-drag-over .sell-zone-text {
  color: #fca5a5;
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.8);
}

/* Sell Confirmation Overlay */
.sell-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 11, 15, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeInArcade 0.2s ease-out;
}

.sell-confirm-panel {
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 4px solid #ef4444;
  border-radius: 8px;
  padding: 24px 32px;
  text-align: center;
  min-width: 280px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 0 0 #7f1d1d,
    0 8px 0 0 #14151f,
    0 0 50px rgba(239, 68, 68, 0.3),
    0 15px 40px rgba(0, 0, 0, 0.6);

  animation: slideUpArcade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sell-confirm-title {
  font-family: "Muro", sans-serif;
  font-size: 1.5rem;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.sell-confirm-pack-name {
  font-family: "Muro", sans-serif;
  font-size: 1.1rem;
  color: #f4a261;
  margin-bottom: 12px;
}

.sell-confirm-price {
  font-size: 1rem;
  color: #9ca3af;
  margin-bottom: 20px;
}

.sell-confirm-gold {
  color: #ffd166;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 209, 102, 0.5);
}

.sell-confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.sell-confirm-yes {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
  border-color: #fca5a5 !important;
  color: #14151f !important;
}

.sell-confirm-yes:hover {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%) !important;
  border-color: #fecaca !important;
}

.sell-confirm-no {
  background: linear-gradient(180deg, #374151 0%, #1f2937 100%) !important;
  border-color: #6b7280 !important;
}

.sell-confirm-no:hover {
  background: linear-gradient(180deg, #4b5563 0%, #374151 100%) !important;
  border-color: #9ca3af !important;
}

/* Slot Upgrade Confirmation Overlay */
.slot-upgrade-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 11, 15, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeInArcade 0.2s ease-out;
}

.slot-upgrade-confirm-panel {
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 4px solid #10b981;
  border-radius: 8px;
  padding: 24px 32px;
  text-align: center;
  min-width: 300px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 0 0 #065f46,
    0 8px 0 0 #14151f,
    0 0 50px rgba(16, 185, 129, 0.3),
    0 15px 40px rgba(0, 0, 0, 0.6);

  animation: slideUpArcade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slot-upgrade-confirm-title {
  font-family: "Muro", sans-serif;
  font-size: 1.5rem;
  color: #10b981;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.slot-upgrade-confirm-vehicle {
  font-family: "Muro", sans-serif;
  font-size: 1.1rem;
  color: #f4a261;
  margin-bottom: 8px;
}

.slot-upgrade-confirm-desc {
  font-size: 0.95rem;
  color: #9ca3af;
  margin-bottom: 12px;
}

.slot-upgrade-confirm-cost {
  font-size: 1rem;
  color: #9ca3af;
  margin-bottom: 20px;
}

.slot-upgrade-confirm-gold {
  color: #ffd166;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 209, 102, 0.5);
}

.slot-upgrade-confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.slot-upgrade-confirm-yes {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  border-color: #6ee7b7 !important;
  color: #14151f !important;
}

.slot-upgrade-confirm-yes:hover {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%) !important;
  border-color: #a7f3d0 !important;
}

.slot-upgrade-confirm-no {
  background: linear-gradient(180deg, #374151 0%, #1f2937 100%) !important;
  border-color: #6b7280 !important;
}

.slot-upgrade-confirm-no:hover {
  background: linear-gradient(180deg, #4b5563 0%, #374151 100%) !important;
  border-color: #9ca3af !important;
}

/* ============================================
   Vehicle Pack Slots - Retro Arcade
   ============================================ */

.vehicle-pack-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 8px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.pack-slot {
  flex: 1 1 40%;
  max-width: calc(50% - 3px);
  background: linear-gradient(180deg, #1a1d28 0%, #0d0f14 100%);
  border: 2px dashed #4b5563;
  border-radius: 4px;
  padding: 6px 4px;
  font-family: "Muro", sans-serif;
  font-size: 0.65rem;
  color: #6b7280;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
}

.pack-slot:hover {
  border-color: #6b7280;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
}

.pack-slot.pack-slot-filled {
  border-style: solid;
  border-color: #f4a261;
  background: linear-gradient(180deg, rgba(244, 162, 97, 0.2) 0%, rgba(188, 108, 37, 0.15) 100%);
  color: #f4a261;
  text-shadow: 0 0 8px rgba(244, 162, 97, 0.5);
}

.pack-slot.pack-slot-filled:hover {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.2) 0%, rgba(185, 28, 28, 0.15) 100%);
  border-color: #f87171;
  color: #f87171;
}

.pack-slot.pack-slot-drag-over {
  border-color: #4ade80 !important;
  border-style: solid;
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.2) 0%, rgba(22, 101, 52, 0.15) 100%);
  transform: scale(1.05);
  box-shadow: 
    inset 0 1px 4px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(74, 222, 128, 0.4);
}

/* Highlight empty pack slots when carrying a pack */
.pack-carrying .pack-slot:not(.pack-slot-filled) {
  border-color: #4ade80;
  border-style: solid;
  animation: slot-pulse-arcade 1s ease-in-out infinite;
}

@keyframes slot-pulse-arcade {
  0%, 100% { 
    box-shadow: 
      inset 0 1px 4px rgba(0, 0, 0, 0.4),
      0 0 8px rgba(74, 222, 128, 0.3);
  }
  50% { 
    box-shadow: 
      inset 0 1px 4px rgba(0, 0, 0, 0.4),
      0 0 18px rgba(74, 222, 128, 0.6);
  }
}

.pack-slots-warning .pack-slot {
  border-color: #f87171;
}

/* Bonus (3rd) pack slot takes full row */
.pack-slot.pack-slot-bonus {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 2px;
}

/* Purchase button takes full row below the 2 pack slots */
.pack-slot-purchase {
  flex: 0 0 100%;
  margin-top: 2px;
}

/* Bonus (3rd) pack slot - special golden styling */
.pack-slot.pack-slot-bonus {
  border-color: #fbbf24;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.1) 0%, rgba(180, 130, 20, 0.08) 100%);
  position: relative;
}

.pack-slot.pack-slot-bonus::after {
  content: '★';
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0.6rem;
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}

.pack-slot.pack-slot-bonus:hover {
  border-color: #fcd34d;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.2) 0%, rgba(180, 130, 20, 0.15) 100%);
}

.pack-slot.pack-slot-bonus.pack-slot-filled {
  border-color: #f59e0b;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(180, 110, 10, 0.2) 100%);
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

/* 3rd Pack Slot Purchase Button */
.pack-slot-purchase {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.15) 0%, rgba(20, 120, 60, 0.1) 100%);
  border: 2px dashed #22c55e;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.pack-slot-purchase::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(34, 197, 94, 0.1) 50%,
    transparent 60%
  );
  background-size: 200% 200%;
  animation: shimmer-green 2s ease-in-out infinite;
}

@keyframes shimmer-green {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.pack-slot-purchase:hover {
  border-style: solid;
  border-color: #4ade80;
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.25) 0%, rgba(34, 197, 94, 0.2) 100%);
  transform: scale(1.05);
  box-shadow: 
    0 0 15px rgba(34, 197, 94, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pack-slot-purchase:active {
  transform: scale(0.98);
}

.pack-slot-purchase-icon {
  font-family: "Muro", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
  position: relative;
  z-index: 1;
}

.pack-slot-purchase-cost {
  font-family: "Muro", sans-serif;
  font-size: 0.55rem;
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
  position: relative;
  z-index: 1;
}

/* Cannot afford state */
.pack-slot-purchase.cannot-afford {
  border-color: #6b7280;
  background: linear-gradient(180deg, rgba(107, 114, 128, 0.1) 0%, rgba(75, 85, 99, 0.08) 100%);
  opacity: 0.6;
  cursor: not-allowed;
}

.pack-slot-purchase.cannot-afford::before {
  display: none;
}

.pack-slot-purchase.cannot-afford .pack-slot-purchase-icon {
  color: #6b7280;
  text-shadow: none;
}

.pack-slot-purchase.cannot-afford .pack-slot-purchase-cost {
  color: #ef4444;
  text-shadow: none;
}

.pack-slot-purchase.cannot-afford:hover {
  transform: none;
  box-shadow: none;
  border-style: dashed;
}

/* ============================================
   Vehicle Validation Warning - Retro Arcade
   ============================================ */

.vehicle-slot.vehicle-invalid {
  border-color: #f87171 !important;
  background: linear-gradient(180deg, #3d1f1f 0%, #1f1010 100%);
  animation: invalid-pulse 1.5s ease-in-out infinite;
}

@keyframes invalid-pulse {
  0%, 100% { box-shadow: 0 5px 0 0 #7f1d1d, 0 7px 0 0 #14151f, 0 0 15px rgba(248, 113, 113, 0.3); }
  50% { box-shadow: 0 5px 0 0 #7f1d1d, 0 7px 0 0 #14151f, 0 0 25px rgba(248, 113, 113, 0.5); }
}

.vehicle-slot.vehicle-invalid:hover {
  transform: translateY(-4px);
}

.vehicle-warning {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #edf2f4;
  padding: 6px 10px;
  border-radius: 4px;
  border: 2px solid #f87171;
  font-family: "Muro", sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 0 0 #7f1d1d,
    0 3px 8px rgba(0, 0, 0, 0.3);
  
  text-shadow: 1px 1px 0 #7f1d1d;
}

.vehicle-slot-warning {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 1.3rem;
  z-index: 10;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}

/* Skill Conflict Warning on Vehicle Slot */
.vehicle-slot.vehicle-skill-conflict {
  border-color: #ff6b4a !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 5px 0 0 #a33c22,
    0 7px 0 0 #14151f,
    0 0 15px rgba(255, 107, 74, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.4);
}

.vehicle-skill-conflict-warning {
  background: linear-gradient(180deg, #ff6b4a 0%, #cc4a30 100%) !important;
  border-color: #ff9a7a !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 0 0 #a33c22 !important;
}

/* ============================================
   Pre-Battle Validation Warning - Retro Arcade
   ============================================ */

.validation-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border: 4px solid #f87171;
  border-radius: 6px;
  padding: 14px 25px;
  margin-bottom: 20px;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    0 4px 0 0 #7f1d1d,
    0 6px 0 0 #14151f,
    0 0 20px rgba(248, 113, 113, 0.3);
}

.validation-warning .warning-icon {
  font-size: 1.6rem;
  filter: drop-shadow(2px 2px 0 #7f1d1d);
}

.validation-warning .warning-text {
  font-family: "Muro", sans-serif;
  color: #edf2f4;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 #7f1d1d;
}

/* Disabled button state */
.btn.btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* ============================================
   Vehicle Edit Parts Hint - Retro Arcade
   ============================================ */

.edit-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.parts-available-hint {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.2) 0%, rgba(22, 101, 52, 0.15) 100%);
  border: 2px solid #4ade80;
  border-radius: 4px;
  padding: 6px 16px;
  margin-top: 8px;
  font-family: "Muro", sans-serif;
  font-size: 0.8rem;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
  animation: hint-pulse-arcade 2s ease-in-out infinite;
  
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

@keyframes hint-pulse-arcade {
  0%, 100% {
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(74, 222, 128, 0.5);
  }
}

/* ============================================
   Battle View - Retro Arcade HUD
   ============================================ */

.battle-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 15px;
  pointer-events: none;
  z-index: 100;
}

.battle-hud-left,
.battle-hud-right {
  position: relative;
  background: linear-gradient(180deg, rgba(43, 45, 66, 0.95) 0%, rgba(26, 29, 40, 0.95) 100%);
  border: 3px solid #4b5563;
  border-radius: 6px;
  padding: 12px 18px;
  pointer-events: auto;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 0 0 #14151f,
    0 6px 15px rgba(0, 0, 0, 0.5);
}

/* Scanline overlay for HUD */
.battle-hud-left::before,
.battle-hud-right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  border-radius: 3px;
}

.battle-status {
  font-family: "Muro", sans-serif;
  font-size: 1.2rem;
  color: #edf2f4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-shadow: 2px 2px 0 #14151f;
}

.battle-timer {
  font-family: "Muro", sans-serif;
  font-size: 0.95rem;
  color: #9ca3af;
  text-shadow: 1px 1px 0 #14151f;
}

.battle-vehicles {
  font-family: "Muro", sans-serif;
  font-size: 0.95rem;
  color: #4ade80;
  margin-top: 6px;
  text-shadow: 
    1px 1px 0 #14151f,
    0 0 10px rgba(74, 222, 128, 0.4);
}

.battle-bounty {
  font-family: "Muro", sans-serif;
  font-size: 1.3rem;
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow:
    2px 2px 0 #8b5a2b,
    0 0 12px rgba(255, 209, 102, 0.5);
}

/* Battle Wave Badge */
.battle-wave-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #4f46e5 0%, #3730a3 100%);
  border: 3px solid #818cf8;
  border-radius: 8px;
  padding: 6px 14px;
  margin-bottom: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 3px 0 0 #1e1b4b,
    0 4px 8px rgba(0, 0, 0, 0.4);
}

.battle-wave-badge .wave-label {
  font-family: "Muro", sans-serif;
  font-size: 0.7rem;
  color: #c7d2fe;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.battle-wave-badge .wave-number {
  font-family: "Muro", sans-serif;
  font-size: 1.8rem;
  color: #fff;
  line-height: 1;
  text-shadow:
    2px 2px 0 #1e1b4b,
    0 0 15px rgba(129, 140, 248, 0.6);
}

/* Battle HUD Center - Forces Display */
.battle-hud-center {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.battle-forces {
  display: flex;
  align-items: center;
  gap: 15px;
  background: linear-gradient(180deg, rgba(43, 45, 66, 0.95) 0%, rgba(26, 29, 40, 0.95) 100%);
  border: 3px solid #4b5563;
  border-radius: 8px;
  padding: 10px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 3px 0 0 #14151f,
    0 4px 10px rgba(0, 0, 0, 0.5);
}

.battle-force {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.force-label {
  font-family: "Muro", sans-serif;
  font-size: 0.65rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.force-icons {
  display: flex;
  gap: 5px;
}

.force-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid;
  transition: all 0.3s ease;
  position: relative;
}

/* Player force icons */
.force-icon-player {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  border-color: #86efac;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 0 0 #166534,
    0 0 8px rgba(74, 222, 128, 0.4);
}

.force-icon-player.force-icon-alive {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  border-color: #86efac;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 0 0 #166534,
    0 0 8px rgba(74, 222, 128, 0.4);
}

.force-icon-player.force-icon-destroyed {
  background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
  border-color: #4b5563;
  box-shadow: none;
  opacity: 0.5;
}

.force-icon-player.force-icon-destroyed::after {
  content: "×";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #ef4444;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}

/* Enemy force icons */
.force-icon-enemy {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
  border-color: #fca5a5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 0 0 #7f1d1d,
    0 0 8px rgba(248, 113, 113, 0.4);
}

.force-icon-enemy.force-icon-alive {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
  border-color: #fca5a5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 0 0 #7f1d1d,
    0 0 8px rgba(248, 113, 113, 0.4);
}

.force-icon-enemy.force-icon-destroyed {
  background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
  border-color: #4b5563;
  box-shadow: none;
  opacity: 0.5;
}

.force-icon-enemy.force-icon-destroyed::after {
  content: "×";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #4ade80;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}

/* VS divider */
.battle-vs {
  font-family: "Muro", sans-serif;
  font-size: 1.2rem;
  color: #ffd166;
  text-shadow:
    2px 2px 0 #8b5a2b,
    0 0 10px rgba(255, 209, 102, 0.5);
  padding: 0 5px;
}

/* Responsive battle forces */
@media screen and (max-width: 768px) {
  .battle-forces {
    padding: 8px 12px;
    gap: 10px;
  }

  .force-icon {
    width: 18px;
    height: 18px;
  }

  .force-label {
    font-size: 0.55rem;
  }

  .battle-vs {
    font-size: 1rem;
  }

  .battle-wave-badge {
    padding: 4px 10px;
  }

  .battle-wave-badge .wave-number {
    font-size: 1.4rem;
  }
}

.battle-overlay {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  z-index: 100;
}

/* Give Up Confirmation Popup */
.give-up-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 11, 15, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeInArcade 0.2s ease-out;
}

.give-up-popup.hidden {
  display: none;
}

.give-up-popup-content {
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 4px solid #e63946;
  border-radius: 8px;
  padding: 30px 40px;
  text-align: center;
  max-width: 90vw;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 0 0 #9d2832,
    0 8px 0 0 #14151f,
    0 0 50px rgba(230, 57, 70, 0.3),
    0 15px 40px rgba(0, 0, 0, 0.6);

  animation: slideUpArcade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.give-up-popup-title {
  font-family: "Muro", sans-serif;
  font-size: 2rem;
  color: #e63946;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 15px;
  text-shadow: 0 0 10px rgba(230, 57, 70, 0.5);
}

.give-up-popup-message {
  font-family: "Muro", sans-serif;
  font-size: 1.1rem;
  color: #e5e7eb;
  margin-bottom: 25px;
}

.give-up-popup-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* ============================================
   Results & Game Over Screens - Retro Arcade
   ============================================ */

.results-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
}

.results-title {
  font-family: "Muro", sans-serif;
  font-size: 4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 25px;
}

.results-title.victory {
  color: #4ade80;
  text-shadow: 
    4px 4px 0 #166534,
    6px 6px 0 #14151f,
    0 0 50px rgba(74, 222, 128, 0.5);
  animation: victory-glow 2s ease-in-out infinite;
}

@keyframes victory-glow {
  0%, 100% { text-shadow: 4px 4px 0 #166534, 6px 6px 0 #14151f, 0 0 50px rgba(74, 222, 128, 0.5); }
  50% { text-shadow: 4px 4px 0 #166534, 6px 6px 0 #14151f, 0 0 80px rgba(74, 222, 128, 0.7); }
}

.results-title.defeat {
  color: #f87171;
  text-shadow: 
    4px 4px 0 #7f1d1d,
    6px 6px 0 #14151f,
    0 0 50px rgba(248, 113, 113, 0.5);
}

/* Results Stats Panel */
.results-stats {
  position: relative;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 4px solid #4b5563;
  border-radius: 8px;
  padding: 25px 45px;
  margin-bottom: 25px;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 5px 0 0 #14151f,
    0 7px 0 0 #0a0b0f,
    0 10px 25px rgba(0, 0, 0, 0.4);
}

/* Scanline overlay */
.results-stats::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  border-radius: 4px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin: 12px 0;
  font-size: 1.2rem;
  position: relative;
  z-index: 1;
}

.stat-label {
  font-family: "Muro", sans-serif;
  color: #9ca3af;
  margin-right: 35px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
  text-shadow: 1px 1px 0 #14151f;
}

.stat-value {
  font-family: "Muro", sans-serif;
  color: #edf2f4;
  font-size: 1.2rem;
  text-shadow: 2px 2px 0 #14151f;
}

/* ============================================
   Start Menu View - Retro Arcade
   ============================================ */

.start-menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  margin-top: -200px;
}

/* Game Title - Demolition Style */
.game-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}

.game-title-main {
  font-family: "Muro", sans-serif;
  font-size: 2.8rem;
  color: #edf2f4;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow: 
    3px 3px 0 #14151f,
    5px 5px 0 rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 1;
}

.game-title-sub {
  font-family: "Muro", sans-serif;
  font-size: 4.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: -8px;
  position: relative;
  
  /* Fiery orange-red gradient for demolition feel */
  background: linear-gradient(
    180deg,
    #ffd166 0%,
    #f4a261 25%,
    #e76f51 50%,
    #e63946 75%,
    #9d0208 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  /* Intense 3D shadow for impact */
  filter: drop-shadow(4px 4px 0 #14151f) 
          drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 30px rgba(230, 57, 70, 0.6));
  
  animation: demolition-pulse 2.5s ease-in-out infinite;
}

/* Subtle pulsing glow animation */
@keyframes demolition-pulse {
  0%, 100% {
    filter: drop-shadow(4px 4px 0 #14151f) 
            drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 30px rgba(230, 57, 70, 0.6));
  }
  50% {
    filter: drop-shadow(4px 4px 0 #14151f) 
            drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 50px rgba(244, 162, 97, 0.8));
  }
}

/* Responsive title sizing */
@media screen and (max-width: 768px) {
  .game-title-main {
    font-size: 1.8rem;
  }
  
  .game-title-sub {
    font-size: 2.8rem;
    margin-top: -4px;
  }
}

@media screen and (max-width: 480px) {
  .game-title-main {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
  }
  
  .game-title-sub {
    font-size: 2rem;
    letter-spacing: 0.08em;
  }
}

.start-menu-title {
  font-family: "Muro", sans-serif;
  font-size: 4.5rem;
  color: #edf2f4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  text-shadow: 
    4px 4px 0 #14151f,
    7px 7px 0 rgba(0, 0, 0, 0.4),
    0 0 50px rgba(237, 242, 244, 0.3);
}

.start-menu-subtitle {
  font-family: "Muro", sans-serif;
  font-size: 1.6rem;
  color: #f4a261;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 40px;
  padding: 8px 25px;
  
  /* Retro badge style */
  background: linear-gradient(180deg, rgba(244, 162, 97, 0.15) 0%, rgba(188, 108, 37, 0.1) 100%);
  border: 2px solid #f4a261;
  border-radius: 4px;
  
  text-shadow: 
    2px 2px 0 #14151f,
    0 0 20px rgba(244, 162, 97, 0.5);
  
  box-shadow: 
    0 0 20px rgba(244, 162, 97, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.start-menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

/* ============================================
   Pre-Battle View - Retro Arcade
   ============================================ */

.prebattle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 20px;
  width: 100%;
  max-width: 1600px;
  max-height: 100vh;
  overflow-y: auto;
}

/* Section title for prebattle */
.prebattle-section-title {
  font-family: "Muro", sans-serif;
  font-size: 1.1rem;
  color: #edf2f4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  text-align: center;
  text-shadow: 2px 2px 0 #14151f;
}

/* VS divider row */
.prebattle-vs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin: 15px 0;
  gap: 15px;
}

.prebattle-vs-line {
  flex: 1;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f87171, transparent);
}

.prebattle-vs {
  font-family: "Muro", sans-serif;
  font-size: 1.8rem;
  color: #f87171;
  text-shadow: 
    3px 3px 0 #7f1d1d,
    0 0 20px rgba(248, 113, 113, 0.5);
}

/* Enemy preview container */
.battle-enemies-preview {
  position: relative;
  background: linear-gradient(180deg, #3d1f1f 0%, #1f1010 100%);
  border: 4px solid #e63946;
  border-radius: 8px;
  padding: 15px 30px;
  min-height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 5px 0 0 #9d0208,
    0 7px 0 0 #14151f,
    0 0 30px rgba(230, 57, 70, 0.3),
    0 10px 25px rgba(0, 0, 0, 0.4);
}

/* Scanline overlay for enemies */
.battle-enemies-preview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  border-radius: 4px;
}

.battle-info-bounty {
  font-family: "Muro", sans-serif;
  font-size: 1.3rem;
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 
    2px 2px 0 #8b5a2b,
    0 0 15px rgba(255, 209, 102, 0.5);
  margin: 15px 0 10px 0;
  position: relative;
  z-index: 10;
}

/* Adjust vehicle slots container for prebattle - full width horizontal layout */
.prebattle-container .vehicle-slots-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 5px;
}

.prebattle-container .vehicle-slot {
  flex: 0 0 auto;
  width: 170px;
}

.prebattle-container .vehicle-slot.empty {
  min-height: 140px;
}

.prebattle-actions {
  display: flex;
  gap: 15px;
  margin-top: 8px;
  align-items: center;
}

.prebattle-actions button {
  padding: 12px 35px;
  font-size: 1.4rem;
}

/* Responsive layout for prebattle */
@media (max-width: 950px) {
  .prebattle-container .vehicle-slots-container {
    flex-wrap: wrap;
  }
  
  .prebattle-container .vehicle-slot {
    width: 150px;
  }
}

/* ============================================
   Vehicle Edit View - Retro Arcade
   ============================================ */

/* Edit view shows canvas - minimal overlay */
.vehicle-edit-view {
  background: transparent !important;
  pointer-events: none;
}

.vehicle-edit-view * {
  pointer-events: auto;
}

/* When editing, let clicks pass through to canvas and build menu */
/* Only apply when vehicle-edit-view is visible (not hidden) */
#view-container:has(.vehicle-edit-view:not(.hidden)) {
  pointer-events: none;
}

#view-container:has(.vehicle-edit-view:not(.hidden)) .vehicle-edit-overlay,
#view-container:has(.vehicle-edit-view:not(.hidden)) .vehicle-edit-overlay * {
  pointer-events: auto;
}

.vehicle-edit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 25px;
  background: linear-gradient(180deg, rgba(20, 21, 31, 0.95) 0%, rgba(20, 21, 31, 0.7) 60%, transparent 100%);
  z-index: 100;
  pointer-events: none;
}

.vehicle-edit-overlay * {
  pointer-events: auto;
}

.vehicle-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.vehicle-edit-header .view-title {
  font-family: "Muro", sans-serif;
  font-size: 1.6rem;
  color: #edf2f4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 
    2px 2px 0 #14151f,
    0 0 20px rgba(237, 242, 244, 0.3);
  margin: 0;
}

.vehicle-edit-header .btn {
  min-width: 90px;
  font-size: 0.9rem;
  padding: 10px 18px;
}

/* Test battle button in build menu */
.test-battle-btn {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
  border-color: #60a5fa !important;
}

.test-battle-btn:hover {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%) !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

/* Build menu positioning fix for vehicle edit view */
/* Make build menu fixed at bottom of viewport, not bottom of page */
.vehicle-edit-view ~ #game-container .build-menu,
body:has(.vehicle-edit-view) .build-menu {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 50 !important;
}

/* ============================================
   Build Menu - Retro Arcade Theme
   ============================================ */

/* Override build menu container for roguelike mode */
.roguelike-body .build-menu,
body:has(.vehicle-edit-view) .build-menu {
  position: relative;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 4px solid #4b5563;
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 15px;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 -4px 0 0 #14151f,
    0 -6px 0 0 #0a0b0f,
    0 -8px 25px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(75, 85, 99, 0.2);
}

/* Scanline overlay for build menu */
.roguelike-body .build-menu::before,
body:has(.vehicle-edit-view) .build-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  border-radius: 8px;
  z-index: 0;
}

/* Override build menu buttons */
.roguelike-body .build-menu-button,
body:has(.vehicle-edit-view) .build-menu-button {
  position: relative;
  background: linear-gradient(180deg, #3d4152 0%, #2b2d42 50%, #1a1d28 100%);
  border: 3px solid #6b7280;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 8px;
  cursor: pointer;
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 4px 0 0 #14151f,
    0 5px 0 0 #0a0b0f,
    0 6px 12px rgba(0, 0, 0, 0.3);
}

.roguelike-body .build-menu-button:hover,
body:has(.vehicle-edit-view) .build-menu-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #4b5563 0%, #3d4152 50%, #2b2d42 100%);
  border-color: #9ca3af;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 6px 0 0 #14151f,
    0 7px 0 0 #0a0b0f,
    0 0 15px rgba(156, 163, 175, 0.3),
    0 10px 18px rgba(0, 0, 0, 0.4);
}

.roguelike-body .build-menu-button:active,
body:has(.vehicle-edit-view) .build-menu-button:active {
  transform: translateY(2px);
  
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 1px 0 0 #14151f,
    0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Active/selected block button - Green highlight */
.roguelike-body .build-menu-button.active,
body:has(.vehicle-edit-view) .build-menu-button.active {
  background: linear-gradient(180deg, #34a853 0%, #2d8f47 50%, #1e6b33 100%);
  border-color: #4ade80;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 4px 0 0 #166534,
    0 5px 0 0 #0a0b0f,
    0 0 20px rgba(74, 222, 128, 0.4),
    0 6px 15px rgba(0, 0, 0, 0.4);
}

.roguelike-body .build-menu-button.active:hover,
body:has(.vehicle-edit-view) .build-menu-button.active:hover {
  transform: translateY(-2px);
  border-color: #86efac;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 6px 0 0 #166534,
    0 7px 0 0 #0a0b0f,
    0 0 30px rgba(74, 222, 128, 0.5),
    0 10px 20px rgba(0, 0, 0, 0.5);
}

/* Build menu button images */
.roguelike-body .build-menu-button-img,
body:has(.vehicle-edit-view) .build-menu-button-img {
  width: 36px;
  height: 36px;
  padding: 2px 6px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

/* Build menu button text (block count) */
.roguelike-body .build-menu-button p,
body:has(.vehicle-edit-view) .build-menu-button p {
  font-family: "Muro", sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 4px 0 0 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 0 #14151f;
}

.roguelike-body .build-menu-button.active p,
body:has(.vehicle-edit-view) .build-menu-button.active p {
  color: #bbf7d0;
  text-shadow: 1px 1px 0 #166534, 0 0 8px rgba(74, 222, 128, 0.5);
}

/* Build menu separator line */
.roguelike-body .build-menu-line,
body:has(.vehicle-edit-view) .build-menu-line {
  background: linear-gradient(180deg, #6b7280 0%, #4b5563 50%, #374151 100%);
  width: 4px;
  height: 50px;
  margin: 0 20px;
  border-radius: 2px;
  box-shadow: 
    inset 1px 0 0 rgba(255, 255, 255, 0.2),
    2px 0 4px rgba(0, 0, 0, 0.3);
}

/* Menu action buttons (Save, Load, Clear, etc) */
.roguelike-body .menu-action-button,
body:has(.vehicle-edit-view) .menu-action-button {
  position: relative;
  padding: 10px 18px;
  font-family: "Muro", sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #edf2f4;
  cursor: pointer;
  border-radius: 6px;
  margin: 0 8px;
  z-index: 1;
  
  background: linear-gradient(180deg, #4b5563 0%, #374151 50%, #1f2937 100%);
  border: 3px solid #6b7280;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 4px 0 0 #111827,
    0 5px 0 0 #0a0b0f,
    0 6px 12px rgba(0, 0, 0, 0.3);
  
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 1px 1px 0 #111827;
}

.roguelike-body .menu-action-button:hover,
body:has(.vehicle-edit-view) .menu-action-button:hover {
  transform: translateY(-2px);
  border-color: #9ca3af;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 6px 0 0 #111827,
    0 7px 0 0 #0a0b0f,
    0 0 15px rgba(156, 163, 175, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.4);
}

.roguelike-body .menu-action-button:active,
body:has(.vehicle-edit-view) .menu-action-button:active {
  transform: translateY(2px);
  
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 1px 0 0 #111827,
    0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Right-click menu styling */
.roguelike-body .right-click-menu,
body:has(.vehicle-edit-view) .right-click-menu {
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 3px solid #4b5563;
  border-radius: 8px;
  padding: 8px;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 0 0 #14151f,
    0 6px 20px rgba(0, 0, 0, 0.5);
}

.roguelike-body .right-click-menu-button,
body:has(.vehicle-edit-view) .right-click-menu-button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  margin: 4px 0;
  font-family: "Muro", sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #edf2f4;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  
  background: linear-gradient(180deg, #3d4152 0%, #2b2d42 100%);
  border: 2px solid #4b5563;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 0 0 #14151f;
  
  transition: all 0.1s ease;
  text-shadow: 1px 1px 0 #14151f;
}

.roguelike-body .right-click-menu-button:hover,
body:has(.vehicle-edit-view) .right-click-menu-button:hover {
  background: linear-gradient(180deg, #f4a261 0%, #bc6c25 100%);
  border-color: #f4a261;
  color: #14151f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 0 0 #8b5a2b,
    0 0 15px rgba(244, 162, 97, 0.4);
}

/* Vehicle Edit Skills Panel */
.vehicle-edit-skills-panel {
  position: fixed;
  top: 80px;
  right: 20px;
  width: 200px;
  background: linear-gradient(180deg, rgba(43, 45, 66, 0.95) 0%, rgba(26, 29, 40, 0.95) 100%);
  border: 3px solid #4b5563;
  border-radius: 8px;
  padding: 12px;
  z-index: 100;
  pointer-events: auto;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 0 0 #14151f,
    0 6px 15px rgba(0, 0, 0, 0.5);
}

.vehicle-edit-skills-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  border-radius: 5px;
}

.skills-panel-title {
  font-family: "Muro", sans-serif;
  font-size: 1rem;
  color: #f4a261;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 #14151f;
  position: relative;
  z-index: 1;
}

.skills-panel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.edit-skill-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(74, 158, 255, 0.15) 0%, rgba(74, 158, 255, 0.08) 100%);
  border: 2px solid #4a9eff;
  border-radius: 6px;
  transition: all 0.2s;
}

.edit-skill-item.skill-disabled {
  opacity: 0.4;
  border-color: #666;
  background: linear-gradient(180deg, rgba(100, 100, 100, 0.15) 0%, rgba(100, 100, 100, 0.08) 100%);
}

.edit-skill-item.skill-conflict {
  border-color: #ff6b4a;
  background: linear-gradient(180deg, rgba(255, 107, 74, 0.2) 0%, rgba(255, 107, 74, 0.1) 100%);
}

.edit-skill-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.edit-skill-info {
  flex: 1;
  min-width: 0;
}

.edit-skill-name {
  font-family: "Muro", sans-serif;
  font-size: 0.8rem;
  color: #ffd166;
  text-shadow: 1px 1px 0 #14151f;
}

.skill-key-hint {
  color: #9ca3af;
  font-size: 0.7rem;
  margin-left: 4px;
}

.edit-skill-conflict-warning {
  color: #ff6b4a;
  font-size: 0.65rem;
  margin-top: 2px;
  font-weight: bold;
}

.no-skills {
  font-family: "Muro", sans-serif;
  font-size: 0.8rem;
  color: #6b7280;
  text-align: center;
  padding: 10px;
}

/* Toggle Switch for Vehicle Edit Skills Panel */
.edit-skill-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.edit-skill-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.edit-skill-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #444;
  transition: 0.3s;
  border-radius: 20px;
  border: 2px solid #666;
}

.edit-skill-toggle .slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.edit-skill-toggle input:checked + .slider {
  background-color: #4a9eff;
  border-color: #4a9eff;
}

.edit-skill-toggle input:checked + .slider:before {
  transform: translateX(16px);
}

/* Skill Tooltip */
.skill-tooltip {
  position: absolute;
  display: none;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 2px solid #4a9eff;
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 180px;
  max-width: 250px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.skill-tooltip-header {
  font-family: "Muro", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #ffd166;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 0 #14151f;
}

.skill-tooltip-description {
  font-family: "Muro", sans-serif;
  font-size: 0.85rem;
  color: #c8d0d8;
  line-height: 1.4;
}

/* Toast error styling - Retro Arcade */
.toast-err {
  position: fixed;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #edf2f4;
  padding: 12px 28px;
  border: 3px solid #f87171;
  border-radius: 6px;
  font-family: "Muro", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1000;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 4px 0 0 #7f1d1d,
    0 6px 0 0 #14151f,
    0 0 25px rgba(248, 113, 113, 0.4),
    0 10px 30px rgba(0, 0, 0, 0.5);
  
  text-shadow: 2px 2px 0 #7f1d1d;
  animation: slideDownArcade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDownArcade {
  from {
    transform: translateX(-50%) translateY(-25px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* ============================================
   Responsive - Retro Arcade
   ============================================ */

@media screen and (max-width: 1024px) {
  .view-title {
    font-size: 2.2rem;
  }
  
  .card {
    width: 240px;
    height: 350px;
  }
  
  .vehicle-slot {
    width: 170px;
    min-height: 310px;
  }
  
  .driver-box {
    padding: 5px 8px;
  }
  
  .driver-icon-wrapper svg {
    width: 28px;
    height: 28px;
  }
  
  .pack-item {
    min-width: 90px;
    padding: 8px 10px;
  }
  
  .shop-title {
    font-size: 3.2rem;
  }
}

@media screen and (max-width: 768px) {
  .view-title {
    font-size: 1.8rem;
  }
  
  .btn {
    padding: 10px 22px;
    font-size: 1.1rem;
  }
  
  .btn-large {
    padding: 14px 35px;
    font-size: 1.4rem;
  }
  
  .cards-container {
    gap: 12px;
  }
  
  .card {
    width: 200px;
    height: 300px;
  }
  
  .card-title {
    font-size: 1.2rem;
    margin-top: 15px;
  }
  
  .vehicle-slot {
    width: 145px;
    min-height: 280px;
  }
  
  .driver-box {
    padding: 4px 6px;
    gap: 5px;
  }
  
  .driver-icon-wrapper svg {
    width: 24px;
    height: 24px;
  }
  
  .driver-box .driver-name {
    font-size: 0.7rem;
  }
  
  .start-menu-title {
    font-size: 2.8rem;
  }
  
  .start-menu-subtitle {
    font-size: 1.2rem;
    padding: 6px 18px;
  }
  
  .results-title {
    font-size: 2.8rem;
  }
  
  .pack-item {
    min-width: 80px;
    padding: 6px 8px;
  }
  
  .pack-item .pack-name {
    font-size: 0.8rem;
  }
  
  .pack-item .pack-contents {
    font-size: 0.6rem;
  }
  
  /* Vehicle info panel on mobile */
  .vehicle-info-panel {
    min-width: 300px;
    max-width: 90vw;
    padding: 18px;
  }
  
  .vehicle-info-title {
    font-size: 1.3rem;
  }
  
  .vehicle-info-driver-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .shop-title {
    font-size: 2.5rem;
  }
  
  .shop-title::after {
    width: 150px;
  }
  
  .btn-reroll,
  .btn-garage {
    padding: 14px 25px;
    font-size: 1.1rem;
  }
  
  .gold-display {
    padding: 8px 16px;
    font-size: 1.2rem;
  }
  
  .wave-display {
    font-size: 1rem;
    padding: 6px 12px;
  }
}

/* ============================================
   Block Image Grid (Pack Contents) - Retro Arcade
   ============================================ */

.pack-contents-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.block-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.block-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
}

.block-count {
  font-family: "Muro", sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
  color: #ffd166;
  text-shadow: 
    2px 2px 0 #14151f,
    0 0 12px rgba(255, 209, 102, 0.6);
}

.block-item-text {
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 2px solid #374151;
  border-radius: 4px;
  padding: 4px 8px;
  box-shadow: 0 2px 0 0 #14151f;
}

.block-name {
  font-family: "Muro", sans-serif;
  font-size: 0.65rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pack-empty {
  font-family: "Muro", sans-serif;
  font-size: 0.75rem;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================
   Vehicle Preview Canvas - Retro Arcade
   ============================================ */

.vehicle-preview-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 0;
  min-height: 100px;
}

.vehicle-preview-container canvas {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.vehicle-slot-preview {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.vehicle-slot-preview canvas {
  border-radius: 4px;
}

/* ============================================
   Enemy Badges - Retro Arcade
   ============================================ */

.enemy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}

.enemy-badge {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #edf2f4;
  padding: 4px 10px;
  border-radius: 4px;
  border: 2px solid #f87171;
  font-family: "Muro", sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 0 0 #7f1d1d;
  
  text-shadow: 1px 1px 0 #7f1d1d;
}

/* ============================================
   Pack Item in Garage - Retro Arcade
   ============================================ */

.pack-item {
  min-width: 115px;
}

.pack-item .pack-contents-grid {
  gap: 5px;
  padding: 4px;
}

.pack-item .block-icon {
  width: 22px;
  height: 22px;
}

.pack-item .block-count {
  font-size: 0.75rem;
  color: #14151f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ============================================
   Card Content Updates - Retro Arcade
   ============================================ */

.card .pack-contents-grid {
  gap: 10px;
}

.card .block-icon {
  width: 38px;
  height: 38px;
}

.card .block-count {
  font-size: 1.1rem;
}

/* ============================================
   Driver Box (Vehicle Slot) - Retro Arcade
   ============================================ */

.driver-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 3px solid var(--driver-color, #3b82f6);
  border-radius: 5px;
  padding: 7px 10px;
  margin: 8px 0;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 0 0 color-mix(in srgb, var(--driver-color, #3b82f6) 50%, #14151f);
}

.driver-box:hover {
  transform: translateY(-2px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 0 0 color-mix(in srgb, var(--driver-color, #3b82f6) 50%, #14151f),
    0 0 12px color-mix(in srgb, var(--driver-color, #3b82f6) 40%, transparent);
}

.driver-icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.driver-icon-wrapper svg {
  display: block;
}

.driver-box .driver-info {
  flex: 1;
  min-width: 0;
}

.driver-box .driver-name {
  font-family: "Muro", sans-serif;
  font-size: 0.8rem;
  color: var(--driver-color, #60a5fa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 
    1px 1px 0 #14151f,
    0 0 8px color-mix(in srgb, var(--driver-color, #60a5fa) 40%, transparent);
}

/* ============================================
   Vehicle Info Overlay & Panel - Retro Arcade
   ============================================ */

.vehicle-info-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 11, 15, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeInArcade 0.2s ease-out;
}

@keyframes fadeInArcade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.vehicle-info-panel {
  position: relative;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 4px solid #3b82f6;
  border-radius: 8px;
  padding: 22px 28px;
  min-width: 360px;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 0 0 #1e3a8a,
    0 8px 0 0 #14151f,
    0 0 50px rgba(59, 130, 246, 0.3),
    0 15px 40px rgba(0, 0, 0, 0.6);
  
  animation: slideUpArcade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scanline overlay */
.vehicle-info-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  border-radius: 4px;
  z-index: 1;
}

@keyframes slideUpArcade {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vehicle-info-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border: 2px solid #f87171;
  color: #edf2f4;
  font-size: 1rem;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 0 0 #7f1d1d;
  
  text-shadow: 1px 1px 0 #7f1d1d;
}

.vehicle-info-close:hover {
  transform: translateY(-2px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 0 0 #7f1d1d,
    0 0 15px rgba(248, 113, 113, 0.4);
}

.vehicle-info-close:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 0 #7f1d1d;
}

.vehicle-info-header {
  text-align: center;
  margin-bottom: 15px;
  border-bottom: 3px solid #374151;
  padding-bottom: 12px;
  position: relative;
  z-index: 2;
}

.vehicle-info-title {
  font-family: "Muro", sans-serif;
  font-size: 1.6rem;
  color: #edf2f4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 5px 0;
  text-shadow: 2px 2px 0 #14151f;
}

.vehicle-info-slot {
  font-family: "Muro", sans-serif;
  font-size: 0.8rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.vehicle-info-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #14151f 0%, #0d0f14 100%);
  border: 3px solid #374151;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 18px;
  min-height: 170px;
  position: relative;
  z-index: 2;
  
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.vehicle-info-preview canvas {
  border-radius: 4px;
}

/* Driver Section in Info Panel - Retro Arcade */
.vehicle-info-driver-section {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 3px solid var(--driver-color, #3b82f6);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 3px 0 0 color-mix(in srgb, var(--driver-color, #3b82f6) 50%, #14151f);
}

.vehicle-info-driver-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}

.vehicle-info-driver-icon svg {
  display: block;
}

.vehicle-info-driver-details {
  flex: 1;
}

.vehicle-info-driver-name {
  font-family: "Muro", sans-serif;
  font-size: 1.2rem;
  color: var(--driver-color, #60a5fa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  text-shadow: 
    2px 2px 0 #14151f,
    0 0 10px color-mix(in srgb, var(--driver-color, #60a5fa) 50%, transparent);
}

.vehicle-info-driver-desc {
  font-size: 0.85rem;
  color: #9ca3af;
  line-height: 1.4;
}

/* Packs Section in Info Panel */
.vehicle-info-packs-section {
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

.vehicle-info-section-title {
  font-family: "Muro", sans-serif;
  font-size: 1rem;
  color: #f4a261;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  text-shadow: 
    2px 2px 0 #14151f,
    0 0 10px rgba(244, 162, 97, 0.4);
}

.vehicle-info-packs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-packs-empty {
  font-family: "Muro", sans-serif;
  font-size: 0.8rem;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 15px;
  background: linear-gradient(180deg, #14151f 0%, #0d0f14 100%);
  border: 2px dashed #374151;
  border-radius: 6px;
}

.info-pack-item {
  background: linear-gradient(180deg, #f4a261 0%, #bc6c25 100%);
  border: 3px solid #ffd166;
  border-radius: 6px;
  padding: 12px;
  
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    0 3px 0 0 #8b5a2b;
}

.info-pack-name {
  font-family: "Muro", sans-serif;
  font-size: 0.9rem;
  color: #14151f;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.info-pack-item .pack-contents-grid {
  gap: 10px;
}

.info-pack-item .block-icon {
  width: 34px;
  height: 34px;
}

.info-pack-item .block-count {
  font-size: 0.8rem;
  color: #14151f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Actions */
.vehicle-info-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 3px solid #374151;
  position: relative;
  z-index: 2;
}

/* ============================================
   Tiebreaker UI - Retro Arcade (INTENSE)
   ============================================ */

.tiebreaker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5%;
  z-index: 200;
  pointer-events: none;
  
  /* No screen tint */
  background: none;
  
  animation: tiebreaker-overlay-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tiebreaker-overlay-enter {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  100% {
    opacity: 1;
    backdrop-filter: blur(2px);
  }
}

.tiebreaker-overlay.hidden {
  display: none;
}

/* Danger state - no screen tint */
.tiebreaker-overlay.tiebreaker-danger {
  background: none;
}

@keyframes danger-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(2px, -2px); }
  75% { transform: translate(-2px, -1px); }
}

/* Winning state - no screen tint */
.tiebreaker-overlay.tiebreaker-winning {
  background: none;
}

/* Victory celebration state - no screen tint */
.tiebreaker-overlay.tiebreaker-victory {
  background: none;
}

@keyframes victory-flash {
  0%, 100% {
    background: 
      radial-gradient(ellipse at center, rgba(74, 222, 128, 0.3) 0%, rgba(22, 101, 52, 0.5) 100%),
      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.05) 2px, rgba(0, 0, 0, 0.05) 4px);
  }
  50% {
    background: 
      radial-gradient(ellipse at center, rgba(134, 239, 172, 0.5) 0%, rgba(74, 222, 128, 0.6) 100%),
      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.05) 2px, rgba(0, 0, 0, 0.05) 4px);
  }
}

.tiebreaker-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Tiebreaker Title - Initial dramatic entrance */
.tiebreaker-title {
  font-family: "Muro", sans-serif;
  font-size: 4rem;
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
  
  /* Chunky 3D arcade text shadow with intense glow */
  text-shadow: 
    4px 4px 0 #bc6c25,
    6px 6px 0 #14151f,
    8px 8px 0 rgba(0, 0, 0, 0.3),
    0 0 60px rgba(255, 209, 102, 0.8),
    0 0 100px rgba(255, 209, 102, 0.4);
  
  animation: tiebreaker-title-entrance 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tiebreaker-title-entrance {
  0% {
    transform: scale(3) translateY(-20px);
    opacity: 0;
    filter: blur(10px);
  }
  60% {
    transform: scale(0.9);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scale(1);
  }
}

.tiebreaker-title.tiebreaker-title-active {
  color: #4ade80;
  text-shadow: 
    4px 4px 0 #166534,
    6px 6px 0 #14151f,
    8px 8px 0 rgba(0, 0, 0, 0.3),
    0 0 60px rgba(74, 222, 128, 0.8),
    0 0 100px rgba(74, 222, 128, 0.4);
}

@keyframes tiebreaker-title-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes tiebreaker-title-active-pulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 
      4px 4px 0 #166534,
      6px 6px 0 #14151f,
      8px 8px 0 rgba(0, 0, 0, 0.3),
      0 0 60px rgba(74, 222, 128, 0.8),
      0 0 100px rgba(74, 222, 128, 0.4);
  }
  50% {
    transform: scale(1.08);
    text-shadow: 
      4px 4px 0 #166534,
      6px 6px 0 #14151f,
      8px 8px 0 rgba(0, 0, 0, 0.3),
      0 0 80px rgba(74, 222, 128, 1),
      0 0 120px rgba(74, 222, 128, 0.6);
  }
}

/* Bar Wrapper - Dramatic entrance */
.tiebreaker-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 700px;
  max-width: 90vw;
  animation: bar-wrapper-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bar-wrapper-enter {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  60% {
    transform: scaleX(1.05);
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.tiebreaker-bar-wrapper.hidden {
  display: none;
}

/* Labels - Pulsing */
.tiebreaker-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 10px;
}

.tiebreaker-label-left,
.tiebreaker-label-right {
  font-family: "Muro", sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tiebreaker-label-left {
  color: #f87171;
  text-shadow: 
    2px 2px 0 #7f1d1d,
    0 0 20px rgba(248, 113, 113, 0.6);
  animation: label-pulse-red 1s ease-in-out infinite;
}

.tiebreaker-label-right {
  color: #4ade80;
  text-shadow: 
    2px 2px 0 #166534,
    0 0 20px rgba(74, 222, 128, 0.6);
  animation: label-pulse-green 1s ease-in-out infinite;
}

@keyframes label-pulse-red {
  0%, 100% { text-shadow: 2px 2px 0 #7f1d1d, 0 0 20px rgba(248, 113, 113, 0.6); }
  50% { text-shadow: 2px 2px 0 #7f1d1d, 0 0 35px rgba(248, 113, 113, 0.9); }
}

@keyframes label-pulse-green {
  0%, 100% { text-shadow: 2px 2px 0 #166534, 0 0 20px rgba(74, 222, 128, 0.6); }
  50% { text-shadow: 2px 2px 0 #166534, 0 0 35px rgba(74, 222, 128, 0.9); }
}

/* Bar Container - More dramatic */
.tiebreaker-bar-container {
  position: relative;
  width: 100%;
  height: 60px;
  border: 6px solid #6b7280;
  border-radius: 10px;
  overflow: visible;
  
  /* Intense 3D extruded effect */
  box-shadow: 
    inset 0 3px 0 rgba(255, 255, 255, 0.15),
    inset 0 -4px 0 rgba(0, 0, 0, 0.4),
    0 8px 0 0 #14151f,
    0 10px 0 0 #0a0b0f,
    0 0 40px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(107, 114, 128, 0.3);
  
  animation: bar-container-pulse 2s ease-in-out infinite;
}

@keyframes bar-container-pulse {
  0%, 100% {
    box-shadow: 
      inset 0 3px 0 rgba(255, 255, 255, 0.15),
      inset 0 -4px 0 rgba(0, 0, 0, 0.4),
      0 8px 0 0 #14151f,
      0 10px 0 0 #0a0b0f,
      0 0 40px rgba(0, 0, 0, 0.6),
      0 0 60px rgba(107, 114, 128, 0.3);
  }
  50% {
    box-shadow: 
      inset 0 3px 0 rgba(255, 255, 255, 0.15),
      inset 0 -4px 0 rgba(0, 0, 0, 0.4),
      0 8px 0 0 #14151f,
      0 10px 0 0 #0a0b0f,
      0 0 50px rgba(0, 0, 0, 0.7),
      0 0 80px rgba(107, 114, 128, 0.5);
  }
}

/* Bar Background - More vibrant gradient */
.tiebreaker-bar-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    #991b1b 0%,
    #dc2626 10%,
    #7f1d1d 20%,
    #1a1d28 35%,
    #1a1d28 65%,
    #14532d 80%,
    #16a34a 90%,
    #15803d 100%
  );
  border-radius: 4px;
}

.tiebreaker-bar-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.12) 3px,
    rgba(0, 0, 0, 0.12) 6px
  );
  pointer-events: none;
  border-radius: 4px;
}

/* Center line indicator - Glowing */
.tiebreaker-bar-bg::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 4px;
  height: calc(100% + 10px);
  background: linear-gradient(180deg, #9ca3af 0%, #6b7280 50%, #9ca3af 100%);
  transform: translateX(-50%);
  box-shadow: 
    0 0 15px rgba(156, 163, 175, 0.8),
    0 0 30px rgba(156, 163, 175, 0.4);
  border-radius: 2px;
}

/* Bar Fill - More intense glow */
.tiebreaker-bar-fill {
  position: absolute;
  top: 0;
  height: 100%;
  transition: none;
  border-radius: 2px;
}

.tiebreaker-bar-fill.tiebreaker-fill-advance {
  background: linear-gradient(180deg, #86efac 0%, #4ade80 30%, #22c55e 50%, #16a34a 100%);
  box-shadow: 
    inset 0 3px 0 rgba(255, 255, 255, 0.4),
    0 0 30px rgba(74, 222, 128, 0.8),
    0 0 60px rgba(74, 222, 128, 0.4);
  animation: fill-advance-glow 0.3s ease-in-out infinite alternate;
}

.tiebreaker-bar-fill.tiebreaker-fill-retreat {
  background: linear-gradient(180deg, #fca5a5 0%, #f87171 30%, #ef4444 50%, #dc2626 100%);
  box-shadow: 
    inset 0 3px 0 rgba(255, 255, 255, 0.4),
    0 0 30px rgba(248, 113, 113, 0.8),
    0 0 60px rgba(248, 113, 113, 0.4);
  animation: fill-retreat-glow 0.2s ease-in-out infinite alternate;
}

@keyframes fill-advance-glow {
  0% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), 0 0 30px rgba(74, 222, 128, 0.8), 0 0 60px rgba(74, 222, 128, 0.4); }
  100% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), 0 0 40px rgba(74, 222, 128, 1), 0 0 80px rgba(74, 222, 128, 0.6); }
}

@keyframes fill-retreat-glow {
  0% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), 0 0 30px rgba(248, 113, 113, 0.8), 0 0 60px rgba(248, 113, 113, 0.4); }
  100% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), 0 0 45px rgba(248, 113, 113, 1), 0 0 90px rgba(248, 113, 113, 0.6); }
}

/* Bar Marker - Intense glowing indicator */
.tiebreaker-bar-marker {
  position: absolute;
  top: -12px;
  width: 12px;
  height: calc(100% + 24px);
  background: linear-gradient(180deg, #ffe4a0 0%, #ffd166 30%, #f4a261 50%, #bc6c25 100%);
  border: 4px solid #edf2f4;
  border-radius: 6px;
  transform: translateX(-50%);
  left: 50%;
  transition: left 0.08s ease-out;
  z-index: 10;
  
  box-shadow: 
    0 0 20px rgba(255, 209, 102, 1),
    0 0 40px rgba(255, 209, 102, 0.7),
    0 0 60px rgba(255, 209, 102, 0.4),
    0 6px 0 0 #8b5a2b;
  
  animation: marker-intense-glow 0.25s ease-in-out infinite alternate;
}

@keyframes marker-intense-glow {
  0% {
    box-shadow: 
      0 0 20px rgba(255, 209, 102, 1),
      0 0 40px rgba(255, 209, 102, 0.7),
      0 0 60px rgba(255, 209, 102, 0.4),
      0 6px 0 0 #8b5a2b;
    transform: translateX(-50%) scaleY(1);
  }
  100% {
    box-shadow: 
      0 0 30px rgba(255, 209, 102, 1),
      0 0 60px rgba(255, 209, 102, 0.8),
      0 0 100px rgba(255, 209, 102, 0.5),
      0 6px 0 0 #8b5a2b;
    transform: translateX(-50%) scaleY(1.02);
  }
}

/* Timer Below Bar - More urgent styling */
.tiebreaker-timer {
  font-family: "Muro", sans-serif;
  font-size: 2rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  
  text-shadow: 
    2px 2px 0 #14151f,
    0 0 15px rgba(156, 163, 175, 0.4);
  
  transition: all 0.2s ease;
}

/* Urgent timer - last 5 seconds */
.tiebreaker-timer.tiebreaker-timer-urgent {
  color: #f87171;
  font-size: 2.4rem;
  text-shadow: 
    3px 3px 0 #7f1d1d,
    0 0 25px rgba(248, 113, 113, 0.8);
  animation: timer-urgent-pulse 0.5s ease-in-out infinite;
}

@keyframes timer-urgent-pulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 3px 3px 0 #7f1d1d, 0 0 25px rgba(248, 113, 113, 0.8);
  }
  50% {
    transform: scale(1.15);
    text-shadow: 3px 3px 0 #7f1d1d, 0 0 40px rgba(248, 113, 113, 1);
  }
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .tiebreaker-overlay {
    padding-top: 3%;
  }
  
  .tiebreaker-title {
    font-size: 2.5rem;
  }
  
  .tiebreaker-bar-wrapper {
    width: 90vw;
  }
  
  .tiebreaker-bar-container {
    height: 40px;
  }
  
  .tiebreaker-label-left,
  .tiebreaker-label-right {
    font-size: 0.9rem;
  }
  
  .tiebreaker-timer {
    font-size: 1.2rem;
  }
}

/* ============================================
   Contraption Lost View - Retro Arcade
   ============================================ */

.contraption-lost-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
  animation: fadeInArcade 0.3s ease-out;
}

.contraption-lost-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  max-width: 500px;
}

.contraption-lost-title {
  font-family: "Muro", sans-serif;
  font-size: 3.5rem;
  color: #f87171;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin: 0;
  
  text-shadow: 
    4px 4px 0 #7f1d1d,
    6px 6px 0 #14151f,
    0 0 60px rgba(248, 113, 113, 0.7);
  
  animation: contraption-lost-shake 0.5s ease-in-out,
             contraption-lost-pulse 1.5s ease-in-out infinite 0.5s;
}

@keyframes contraption-lost-shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-10px) rotate(-1deg); }
  20% { transform: translateX(10px) rotate(1deg); }
  30% { transform: translateX(-8px) rotate(-0.5deg); }
  40% { transform: translateX(8px) rotate(0.5deg); }
  50% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
  90% { transform: translateX(-1px); }
}

@keyframes contraption-lost-pulse {
  0%, 100% {
    text-shadow: 
      4px 4px 0 #7f1d1d,
      6px 6px 0 #14151f,
      0 0 60px rgba(248, 113, 113, 0.7);
  }
  50% {
    text-shadow: 
      4px 4px 0 #7f1d1d,
      6px 6px 0 #14151f,
      0 0 100px rgba(248, 113, 113, 0.9);
  }
}

.contraption-lost-vehicle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 25px;
  background: linear-gradient(180deg, #3d1f1f 0%, #1f1010 100%);
  border: 5px solid #f87171;
  border-radius: 10px;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 0 0 #7f1d1d,
    0 8px 0 0 #14151f,
    0 0 40px rgba(248, 113, 113, 0.4),
    0 15px 35px rgba(0, 0, 0, 0.5);
  
  animation: vehicle-entrance 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes vehicle-entrance {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Scanline overlay */
.contraption-lost-vehicle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  border-radius: 5px;
  z-index: 1;
}

/* Destruction effect overlay */
.lost-vehicle-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, 
    rgba(248, 113, 113, 0.2) 0%, 
    transparent 70%);
  pointer-events: none;
  z-index: 2;
  animation: destruction-pulse 1s ease-in-out infinite;
}

@keyframes destruction-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.lost-vehicle-name {
  font-family: "Muro", sans-serif;
  font-size: 1.5rem;
  color: #edf2f4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  position: relative;
  z-index: 3;
  
  text-shadow: 
    2px 2px 0 #14151f,
    0 0 15px rgba(237, 242, 244, 0.3);
}

.lost-vehicle-preview {
  position: relative;
  z-index: 3;
  background: linear-gradient(180deg, #14151f 0%, #0d0f14 100%);
  border: 3px solid #374151;
  border-radius: 8px;
  padding: 15px;
  min-width: 300px;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.6);
}

.lost-vehicle-preview canvas {
  border-radius: 4px;
  /* Apply a red tint effect */
  filter: sepia(0.3) saturate(1.5) hue-rotate(-10deg);
}

.contraption-lost-message {
  font-family: "Muro", sans-serif;
  font-size: 1.1rem;
  color: #9ca3af;
  text-align: center;
  max-width: 400px;
  line-height: 1.5;
  text-shadow: 1px 1px 0 #14151f;
  
  animation: fadeInArcade 0.5s ease-out 0.3s both;
}

.contraption-lost-remaining {
  font-family: "Muro", sans-serif;
  font-size: 1.3rem;
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 12px 25px;
  background: linear-gradient(180deg, rgba(244, 162, 97, 0.15) 0%, rgba(188, 108, 37, 0.1) 100%);
  border: 3px solid #f4a261;
  border-radius: 6px;
  
  text-shadow: 
    2px 2px 0 #14151f,
    0 0 15px rgba(255, 209, 102, 0.5);
  
  box-shadow: 
    0 0 20px rgba(244, 162, 97, 0.3),
    0 3px 0 0 #bc6c25;
  
  animation: fadeInArcade 0.5s ease-out 0.4s both;
}

.contraption-lost-remaining.remaining-zero {
  color: #f87171;
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.2) 0%, rgba(127, 29, 29, 0.15) 100%);
  border-color: #f87171;
  
  text-shadow: 
    2px 2px 0 #7f1d1d,
    0 0 20px rgba(248, 113, 113, 0.6);
  
  box-shadow: 
    0 0 25px rgba(248, 113, 113, 0.4),
    0 3px 0 0 #7f1d1d;
  
  animation: remaining-zero-pulse 1s ease-in-out infinite;
}

@keyframes remaining-zero-pulse {
  0%, 100% {
    box-shadow: 
      0 0 25px rgba(248, 113, 113, 0.4),
      0 3px 0 0 #7f1d1d;
  }
  50% {
    box-shadow: 
      0 0 40px rgba(248, 113, 113, 0.6),
      0 3px 0 0 #7f1d1d;
  }
}

.contraption-lost-container .btn {
  animation: fadeInArcade 0.5s ease-out 0.5s both;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .contraption-lost-title {
    font-size: 2.2rem;
  }
  
  .contraption-lost-vehicle {
    padding: 18px;
  }
  
  .lost-vehicle-preview {
    min-width: 250px;
    min-height: 150px;
  }
  
  .lost-vehicle-name {
    font-size: 1.2rem;
  }
  
  .contraption-lost-message {
    font-size: 0.95rem;
  }
  
  .contraption-lost-remaining {
    font-size: 1.1rem;
    padding: 10px 20px;
  }
}

/* ============================================
   Defeat Decision View
   ============================================ */

.defeat-decision-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.defeat-decision-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  max-width: 600px;
}

.defeat-decision-title {
  font-family: "Muro", sans-serif;
  font-size: 4rem;
  color: #f87171;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(248, 113, 113, 0.8),
    0 0 20px rgba(248, 113, 113, 0.6),
    0 0 40px rgba(248, 113, 113, 0.4),
    0 0 60px rgba(248, 113, 113, 0.3);
  animation: defeat-pulse 1.5s ease-in-out infinite;
}

@keyframes defeat-pulse {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(248, 113, 113, 0.8),
      0 0 20px rgba(248, 113, 113, 0.6),
      0 0 40px rgba(248, 113, 113, 0.4);
  }
  50% {
    text-shadow:
      0 0 15px rgba(248, 113, 113, 1),
      0 0 30px rgba(248, 113, 113, 0.8),
      0 0 60px rgba(248, 113, 113, 0.6);
  }
}

.defeat-decision-message {
  font-family: "Muro", sans-serif;
  font-size: 1.3rem;
  color: #e5e7eb;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.defeat-decision-info {
  font-family: "Muro", sans-serif;
  font-size: 1.1rem;
  color: #9ca3af;
  text-align: center;
  padding: 12px 24px;
  background: linear-gradient(180deg, rgba(55, 65, 81, 0.4) 0%, rgba(31, 41, 55, 0.3) 100%);
  border: 1px solid rgba(156, 163, 175, 0.3);
  border-radius: 8px;
}

.defeat-decision-info #vehicle-count {
  color: #60a5fa;
  font-weight: bold;
}

.defeat-decision-buttons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.defeat-decision-buttons .btn {
  min-width: 220px;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.defeat-decision-buttons .btn-title {
  font-size: 1.3rem;
  font-weight: bold;
}

.defeat-decision-buttons .btn-subtitle {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Warning button - Yellow/Orange */
.btn-warning {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  border-color: #fbbf24;
  box-shadow:
    0 4px 0 0 #92400e,
    0 6px 20px rgba(245, 158, 11, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-warning:hover {
  border-color: #fcd34d;
  box-shadow:
    0 4px 0 0 #92400e,
    0 6px 30px rgba(245, 158, 11, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-warning:active {
  box-shadow:
    0 2px 0 0 #92400e,
    0 3px 10px rgba(245, 158, 11, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(2px);
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .defeat-decision-title {
    font-size: 2.5rem;
  }
  
  .defeat-decision-message {
    font-size: 1.1rem;
  }
  
  .defeat-decision-buttons {
    flex-direction: column;
    gap: 15px;
  }
  
  .defeat-decision-buttons .btn {
    min-width: 200px;
    padding: 16px 24px;
  }
  
  .defeat-decision-buttons .btn-title {
    font-size: 1.1rem;
  }
}

/* ============================================
   Skills System
   ============================================ */

/* Skill Badges on Vehicle Slots */
.vehicle-skills-badges {
  display: flex;
  gap: 6px;
  margin: 8px 0;
  justify-content: center;
  flex-wrap: wrap;
}

.skill-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(74, 158, 255, 0.3) 0%, rgba(74, 158, 255, 0.15) 100%);
  border: 2px solid #4a9eff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
  box-shadow: 0 0 8px rgba(74, 158, 255, 0.4);
  transition: all 0.2s;
}

.skill-badge.skill-disabled {
  opacity: 0.4;
  border-color: #666;
  background: linear-gradient(180deg, rgba(100, 100, 100, 0.3) 0%, rgba(100, 100, 100, 0.15) 100%);
  box-shadow: none;
}

.skill-icon-small {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vehicle Info Panel Skills Section */
.vehicle-info-skills-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid rgba(59, 130, 246, 0.2);
}

.skill-toggle-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 2px solid #374151;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.2s;
}

.skill-toggle-item.skill-conflict {
  border-color: #ff6b4a;
  background: linear-gradient(180deg, rgba(255, 107, 74, 0.2) 0%, rgba(255, 107, 74, 0.1) 100%);
}

.skill-toggle-icon {
  width: 40px;
  height: 40px;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.skill-toggle-info {
  flex: 1;
}

.skill-toggle-name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 4px;
  color: #ffd166;
}

.skill-toggle-desc {
  font-size: 13px;
  color: #aaa;
  line-height: 1.3;
}

.skill-conflict-warning {
  color: #ff6b4a;
  font-size: 12px;
  margin-top: 6px;
  font-weight: bold;
}

/* Toggle Switch */
.skill-toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.skill-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.skill-toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #444;
  transition: 0.3s;
  border-radius: 26px;
  border: 2px solid #666;
}

.skill-toggle-switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.skill-toggle-switch input:checked + .slider {
  background-color: #4a9eff;
  border-color: #4a9eff;
}

.skill-toggle-switch input:checked + .slider:before {
  transform: translateX(22px);
}

/* Pack Card Skill Badge (Shop View) */
.card-skill-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(74, 158, 255, 0.2);
  border: 2px solid #4a9eff;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 14px;
}

.skill-badge-icon {
  font-size: 18px;
}

.skill-badge-name {
  font-weight: bold;
  color: #ffd166;
}

/* Pack Skill Badge in Inventory */
.pack-skill-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(74, 158, 255, 0.15);
  border: 1px solid #4a9eff;
  border-radius: 4px;
  margin-top: 6px;
  font-size: 11px;
}

.skill-badge-label {
  color: #4a9eff;
  font-weight: 600;
}

/* ============================================
   Pack Rarity Badges - Retro Arcade
   ============================================ */

.card-rarity-badge {
  font-family: "Muro", sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Common - Gray/White */
.card-rarity-badge.rarity-common {
  color: #9ca3af;
  background: linear-gradient(180deg, #4b5563 0%, #374151 100%);
  border: 2px solid #6b7280;
  text-shadow: 1px 1px 0 #1f2937;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 0 0 #1f2937;
}

/* Uncommon - Green */
.card-rarity-badge.rarity-uncommon {
  color: #4ade80;
  background: linear-gradient(180deg, #166534 0%, #14532d 100%);
  border: 2px solid #22c55e;
  text-shadow: 1px 1px 0 #052e16, 0 0 10px rgba(74, 222, 128, 0.5);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 0 0 #052e16,
    0 0 12px rgba(74, 222, 128, 0.3);
}

/* Rare - Blue */
.card-rarity-badge.rarity-rare {
  color: #60a5fa;
  background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
  border: 2px solid #3b82f6;
  text-shadow: 1px 1px 0 #172554, 0 0 10px rgba(96, 165, 250, 0.5);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 0 0 #172554,
    0 0 12px rgba(96, 165, 250, 0.4);
}

/* Epic - Purple */
.card-rarity-badge.rarity-epic {
  color: #c084fc;
  background: linear-gradient(180deg, #7e22ce 0%, #581c87 100%);
  border: 2px solid #a855f7;
  text-shadow: 1px 1px 0 #3b0764, 0 0 12px rgba(192, 132, 252, 0.6);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 0 0 #3b0764,
    0 0 15px rgba(168, 85, 247, 0.5);
  animation: epic-glow 2s ease-in-out infinite;
}

@keyframes epic-glow {
  0%, 100% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 2px 0 0 #3b0764,
      0 0 15px rgba(168, 85, 247, 0.5);
  }
  50% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 2px 0 0 #3b0764,
      0 0 25px rgba(168, 85, 247, 0.7);
  }
}

/* Legendary - Gold/Orange with shimmer */
.card-rarity-badge.rarity-legendary {
  color: #fef08a;
  background: linear-gradient(180deg, #d97706 0%, #b45309 50%, #92400e 100%);
  border: 2px solid #fbbf24;
  text-shadow: 1px 1px 0 #78350f, 0 0 15px rgba(251, 191, 36, 0.7);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 0 0 #78350f,
    0 0 20px rgba(251, 191, 36, 0.6);
  animation: legendary-shimmer 1.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

@keyframes legendary-shimmer {
  0%, 100% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 2px 0 0 #78350f,
      0 0 20px rgba(251, 191, 36, 0.6);
  }
  50% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 2px 0 0 #78350f,
      0 0 35px rgba(251, 191, 36, 0.9);
  }
}

/* Legendary shimmer effect overlay */
.card-rarity-badge.rarity-legendary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: legendary-shine 2s ease-in-out infinite;
}

@keyframes legendary-shine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 150%;
  }
}

/* Card border glow for higher rarities */
.card-item[data-rarity="epic"] {
  --card-accent: #a855f7;
  --card-accent-dark: #581c87;
  --card-accent-glow: rgba(168, 85, 247, 0.6);
}

.card-item[data-rarity="legendary"] {
  --card-accent: #fbbf24;
  --card-accent-dark: #92400e;
  --card-accent-glow: rgba(251, 191, 36, 0.7);
}

/* ============================================
   Game Complete View - Victory Celebration
   ============================================ */

.game-complete-view {
  background: 
    radial-gradient(ellipse at center, rgba(74, 222, 128, 0.15) 0%, transparent 60%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.15) 3px,
      rgba(0, 0, 0, 0.15) 6px
    ),
    linear-gradient(180deg, #1a1d28 0%, #0d0f14 50%, #14151f 100%);
}

.game-complete-title {
  font-size: 4.5rem !important;
  animation: victory-glow 2s ease-in-out infinite, game-complete-entrance 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes game-complete-entrance {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.game-complete-difficulty {
  font-family: "Muro", sans-serif;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 25px;
  padding: 12px 30px;
  border-radius: 8px;
  animation: fadeInArcade 0.5s ease-out 0.3s both;
}

.game-complete-difficulty.difficulty-easy {
  color: #4ade80;
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.2) 0%, rgba(22, 101, 52, 0.1) 100%);
  border: 3px solid #4ade80;
  text-shadow: 2px 2px 0 #166534, 0 0 20px rgba(74, 222, 128, 0.5);
  box-shadow: 0 0 25px rgba(74, 222, 128, 0.3), 0 4px 0 0 #166534;
}

.game-complete-difficulty.difficulty-normal {
  color: #60a5fa;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.2) 0%, rgba(30, 58, 138, 0.1) 100%);
  border: 3px solid #60a5fa;
  text-shadow: 2px 2px 0 #1e3a8a, 0 0 20px rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 25px rgba(96, 165, 250, 0.3), 0 4px 0 0 #1e3a8a;
}

.game-complete-difficulty.difficulty-hard {
  color: #f4a261;
  background: linear-gradient(180deg, rgba(244, 162, 97, 0.2) 0%, rgba(188, 108, 37, 0.1) 100%);
  border: 3px solid #f4a261;
  text-shadow: 2px 2px 0 #bc6c25, 0 0 20px rgba(244, 162, 97, 0.5);
  box-shadow: 0 0 25px rgba(244, 162, 97, 0.3), 0 4px 0 0 #bc6c25;
}

.game-complete-difficulty.difficulty-nightmare {
  color: #f87171;
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.2) 0%, rgba(127, 29, 29, 0.1) 100%);
  border: 3px solid #f87171;
  text-shadow: 2px 2px 0 #7f1d1d, 0 0 20px rgba(248, 113, 113, 0.5);
  box-shadow: 0 0 25px rgba(248, 113, 113, 0.3), 0 4px 0 0 #7f1d1d;
  animation: nightmare-pulse 1.5s ease-in-out infinite, fadeInArcade 0.5s ease-out 0.3s both;
}

@keyframes nightmare-pulse {
  0%, 100% {
    box-shadow: 0 0 25px rgba(248, 113, 113, 0.3), 0 4px 0 0 #7f1d1d;
  }
  50% {
    box-shadow: 0 0 40px rgba(248, 113, 113, 0.5), 0 4px 0 0 #7f1d1d;
  }
}

.game-complete-actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  margin-top: 20px;
  animation: fadeInArcade 0.5s ease-out 0.5s both;
}

.game-complete-actions .btn {
  min-width: 280px;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .game-complete-title {
    font-size: 2.5rem !important;
  }
  
  .game-complete-difficulty {
    font-size: 1.3rem;
    padding: 10px 20px;
  }
  
  .game-complete-actions .btn {
    min-width: 220px;
  }
}

/* ============================================
   Gold Notification - Floating +/- Animations
   ============================================ */

.gold-notification {
  position: absolute;
  transform: translateX(-50%);
  font-family: "Muro", sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  pointer-events: none;
  z-index: 10001;
  animation: goldFloat 1.5s ease-out forwards;
  text-shadow: 
    2px 2px 0 rgba(0, 0, 0, 0.8),
    -1px -1px 0 rgba(0, 0, 0, 0.5),
    0 0 10px currentColor;
  letter-spacing: 0.05em;
}

.gold-notification.gold-gain {
  color: #4ade80;
  text-shadow: 
    2px 2px 0 #166534,
    -1px -1px 0 rgba(0, 0, 0, 0.5),
    0 0 15px rgba(74, 222, 128, 0.8),
    0 0 30px rgba(74, 222, 128, 0.4);
}

.gold-notification.gold-loss {
  color: #f87171;
  text-shadow: 
    2px 2px 0 #7f1d1d,
    -1px -1px 0 rgba(0, 0, 0, 0.5),
    0 0 15px rgba(248, 113, 113, 0.8),
    0 0 30px rgba(248, 113, 113, 0.4);
}

@keyframes goldFloat {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px) scale(1.1);
  }
  40% {
    opacity: 1;
    transform: translateX(-50%) translateY(-15px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50px) scale(0.9);
  }
}

/* Pulse effect on gold display when gold changes */
.gold-display.gold-changed {
  animation: goldPulse 0.4s ease-out;
}

@keyframes goldPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

/* ============================================
   Battle Parallax Background System
   ============================================ */

.battle-parallax {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -15;
  overflow: hidden;
  pointer-events: none;
}

.battle-parallax.hidden {
  display: none;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  will-change: transform;
}

/* Sky Layer - Warm sunset gradient */
.parallax-sky {
  background: linear-gradient(
    180deg,
    #1a0a0a 0%,
    #2d1515 15%,
    #4a2020 30%,
    #6b3535 45%,
    #8b5040 55%,
    #a86850 65%,
    #c4856a 75%,
    #d9a088 85%,
    #e8bba0 95%,
    #d4a07a 100%
  );
  width: 100%;
}

/* Distant mountains - dark silhouettes */
.parallax-distant {
  bottom: 15%;
  top: auto;
  height: 50%;
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.distant-mountain {
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, #1a0f0a 0%, #0d0806 100%);
  border-radius: 50% 50% 0 0;
}

.dm-1 {
  left: 5%;
  width: 25vw;
  height: 35vh;
  transform: scaleY(0.7);
}

.dm-2 {
  left: 20%;
  width: 35vw;
  height: 50vh;
  background: linear-gradient(180deg, #241610 0%, #0d0806 100%);
}

.dm-3 {
  left: 45%;
  width: 20vw;
  height: 30vh;
  transform: scaleY(0.8);
}

.dm-4 {
  left: 60%;
  width: 40vw;
  height: 45vh;
  background: linear-gradient(180deg, #1f120c 0%, #0d0806 100%);
}

.dm-5 {
  left: 85%;
  width: 30vw;
  height: 40vh;
  transform: scaleY(0.75);
}

/* Industrial Structures */
.parallax-structures {
  bottom: 12%;
  top: auto;
  height: 40%;
}

.structure {
  position: absolute;
  bottom: 0;
}

/* Tower structures */
.structure-tower {
  width: 3vw;
  min-width: 30px;
  height: 25vh;
  background: linear-gradient(90deg, #1a1210 0%, #2a1f1a 50%, #1a1210 100%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.structure-tower::before {
  content: '';
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 20%;
  background: #2d2015;
  border-radius: 2px;
}

.structure-tower::after {
  content: '';
  position: absolute;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  height: 15%;
  background: linear-gradient(180deg, #ff6b35 0%, #f7941d 100%);
  border-radius: 50%;
  box-shadow: 0 0 15px #ff6b35, 0 0 30px rgba(255, 107, 53, 0.5);
  animation: beaconPulse 2s ease-in-out infinite;
}

/* Crane structures */
.structure-crane {
  width: 4vw;
  min-width: 40px;
  height: 30vh;
  background: transparent;
}

.structure-crane::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 40%;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, #1a1210 0%, #2a1f1a 50%, #1a1210 100%);
}

.structure-crane::after {
  content: '';
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 8%;
  background: linear-gradient(180deg, #2a1f1a 0%, #1a1210 100%);
}

/* Silo structures */
.structure-silo {
  width: 5vw;
  min-width: 50px;
  height: 20vh;
  background: linear-gradient(90deg, #2a2218 0%, #3d3028 30%, #2a2218 60%, #1a1510 100%);
  border-radius: 50% 50% 0 0;
}

.structure-silo::before {
  content: '';
  position: absolute;
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 10%;
  background: #1a1510;
  border-radius: 50%;
}

/* Structure positions */
.st-1 { left: 8%; height: 22vh; }
.st-2 { left: 25%; height: 28vh; }
.st-3 { left: 42%; height: 18vh; }
.st-4 { left: 58%; height: 25vh; }
.st-5 { left: 75%; height: 32vh; }
.st-6 { left: 90%; height: 20vh; }

/* Midground barriers/pillars */
.parallax-midground {
  bottom: 8%;
  top: auto;
  height: 35%;
}

.barrier {
  position: absolute;
  bottom: 0;
  background: linear-gradient(90deg, #3d3530 0%, #524840 40%, #3d3530 70%, #2a2520 100%);
}

.barrier-1 {
  left: 5%;
  width: 2.5vw;
  min-width: 25px;
  height: 15vh;
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
}

.barrier-2 {
  left: 22%;
  width: 4vw;
  min-width: 40px;
  height: 22vh;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(90deg, #453d35 0%, #5a5048 40%, #453d35 70%, #302a25 100%);
}

.barrier-3 {
  left: 38%;
  width: 2vw;
  min-width: 20px;
  height: 12vh;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.barrier-4 {
  left: 55%;
  width: 3.5vw;
  min-width: 35px;
  height: 18vh;
  clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(90deg, #4a4238 0%, #5f554a 40%, #4a4238 70%, #352f2a 100%);
}

.barrier-5 {
  left: 72%;
  width: 2.5vw;
  min-width: 25px;
  height: 14vh;
  clip-path: polygon(18% 0%, 82% 0%, 100% 100%, 0% 100%);
}

.barrier-6 {
  left: 88%;
  width: 3vw;
  min-width: 30px;
  height: 20vh;
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(90deg, #504840 0%, #655a50 40%, #504840 70%, #3a3530 100%);
}

/* Dust particles */
.parallax-dust {
  width: 100%;
  height: 100%;
}

.dust-particle {
  position: absolute;
  background: radial-gradient(circle, rgba(180, 150, 120, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  animation: dustFloat linear infinite;
}

.dp-1 {
  width: 4px;
  height: 4px;
  left: 10%;
  top: 60%;
  animation-duration: 15s;
  animation-delay: 0s;
}

.dp-2 {
  width: 6px;
  height: 6px;
  left: 25%;
  top: 70%;
  animation-duration: 20s;
  animation-delay: -5s;
}

.dp-3 {
  width: 3px;
  height: 3px;
  left: 40%;
  top: 55%;
  animation-duration: 12s;
  animation-delay: -2s;
}

.dp-4 {
  width: 5px;
  height: 5px;
  left: 55%;
  top: 65%;
  animation-duration: 18s;
  animation-delay: -8s;
}

.dp-5 {
  width: 4px;
  height: 4px;
  left: 70%;
  top: 50%;
  animation-duration: 14s;
  animation-delay: -3s;
}

.dp-6 {
  width: 7px;
  height: 7px;
  left: 82%;
  top: 75%;
  animation-duration: 22s;
  animation-delay: -10s;
}

.dp-7 {
  width: 3px;
  height: 3px;
  left: 15%;
  top: 45%;
  animation-duration: 16s;
  animation-delay: -7s;
}

.dp-8 {
  width: 5px;
  height: 5px;
  left: 92%;
  top: 58%;
  animation-duration: 19s;
  animation-delay: -4s;
}

@keyframes dustFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20vh) translateX(10vw);
    opacity: 0.4;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-40vh) translateX(20vw);
    opacity: 0;
  }
}

@keyframes beaconPulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 15px #ff6b35, 0 0 30px rgba(255, 107, 53, 0.5);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 8px #ff6b35, 0 0 15px rgba(255, 107, 53, 0.3);
  }
}

/* Ground haze/atmosphere layer - positioned above ground */
.parallax-haze {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 60%,
    rgba(180, 140, 100, 0.1) 75%,
    rgba(140, 100, 70, 0.15) 85%,
    rgba(100, 70, 50, 0.2) 95%,
    rgba(80, 50, 35, 0.25) 100%
  );
  pointer-events: none;
}

/* Updated battle background when parallax is active */
.roguelike-body.roguelike-battle-bg.parallax-active {
  background: transparent !important;
}


/* =============================================
   PHOTO MODE
   ============================================= */

/* Photo Mode Context Menu */
.photo-mode-menu {
  position: fixed;
  background: #1a1a2e;
  border: 3px solid #e94560;
  border-radius: 8px;
  padding: 8px 0;
  z-index: 1001;
  min-width: 180px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.photo-mode-menu.hidden {
  display: none;
}

.photo-mode-menu-item {
  padding: 10px 16px;
  color: #fff;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  transition: background 0.2s;
}

.photo-mode-menu-item:hover {
  background: #e94560;
}

/* Photo Mode Resume Button */
.photo-mode-resume-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1001;
  padding: 15px 25px;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  background: #e94560;
  color: white;
  border: 3px solid #fff;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 0 #b8354d;
  transition: all 0.1s;
}

.photo-mode-resume-btn:hover {
  background: #ff6b8a;
}

.photo-mode-resume-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b8354d;
}


/* =============================================
   BADGES
   ============================================= */

/* Badge Gallery in Settings */
.badge-gallery-container {
  padding: 15px 20px;
  border-top: 2px solid rgba(244, 162, 97, 0.3);
  margin-top: 10px;
}

/* Stats Section */
.badge-stats-section {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(244, 162, 97, 0.2);
}

.badge-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.badge-stat-value {
  font-family: "Muro", sans-serif;
  font-size: 1.8rem;
  color: #f4a261;
  line-height: 1;
}

.badge-stat-label {
  font-size: 0.7rem;
  color: #8d99ae;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.badge-gallery-header h3 {
  font-family: "Muro", sans-serif;
  font-size: 1.2rem;
  color: #f4a261;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.badge-gallery-count {
  font-family: monospace;
  font-size: 0.9rem;
  color: #8d99ae;
}

.badge-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.badge-gallery-item {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 2px solid rgba(244, 162, 97, 0.2);
  padding: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.badge-gallery-item:hover {
  border-color: #f4a261;
  transform: scale(1.1);
  z-index: 1;
}

.badge-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Unearned badge - greyscale and transparent */
.badge-gallery-item.badge-unearned {
  filter: grayscale(100%);
  opacity: 0.5;
}

.badge-gallery-item.badge-unearned:hover {
  filter: grayscale(100%);
  opacity: 0.7;
}

/* Earned badge - full color */
.badge-gallery-item.badge-earned {
  filter: none;
  opacity: 1;
  border-color: rgba(244, 162, 97, 0.5);
}

.badge-gallery-item.badge-earned:hover {
  box-shadow: 0 0 15px rgba(244, 162, 97, 0.5);
}

/* Badge Tooltip */
.badge-tooltip {
  position: fixed;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 2px solid #f4a261;
  border-radius: 6px;
  padding: 10px 14px;
  z-index: 2000;
  max-width: 220px;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.15s ease;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.badge-tooltip-show {
  opacity: 1;
  transform: translateY(0);
}

.badge-tooltip-name {
  font-family: "Muro", sans-serif;
  font-size: 0.9rem;
  color: #f4a261;
  margin-bottom: 5px;
}

.badge-tooltip-description {
  font-size: 0.75rem;
  color: #8d99ae;
  line-height: 1.4;
  margin-bottom: 8px;
}

.badge-tooltip-earned {
  font-size: 0.7rem;
  color: #27ae60;
  font-weight: bold;
  text-transform: uppercase;
}

.badge-tooltip-locked {
  font-size: 0.7rem;
  color: #7f8c8d;
  font-weight: bold;
  text-transform: uppercase;
}

/* Badge Unlock Popup */
.badge-unlock-popup {
  position: fixed;
  top: 20px;
  right: -350px;
  width: 300px;
  background: linear-gradient(180deg, #2b2d42 0%, #1a1d28 100%);
  border: 3px solid #f4a261;
  border-radius: 10px;
  padding: 15px;
  z-index: 3000;
  box-shadow: 
    0 0 30px rgba(244, 162, 97, 0.4),
    0 8px 30px rgba(0, 0, 0, 0.5);
  transition: right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.badge-unlock-popup.badge-unlock-show {
  right: 20px;
}

.badge-unlock-popup.badge-unlock-hide {
  right: -350px;
  transition: right 0.3s ease-in;
}

.badge-unlock-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.badge-unlock-header {
  font-family: "Muro", sans-serif;
  font-size: 0.9rem;
  color: #f4a261;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  animation: badgePulse 0.5s ease-in-out infinite alternate;
}

@keyframes badgePulse {
  from {
    text-shadow: 0 0 5px rgba(244, 162, 97, 0.5);
  }
  to {
    text-shadow: 0 0 15px rgba(244, 162, 97, 0.8);
  }
}

.badge-unlock-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
  animation: badgeBounce 0.6s ease-out;
}

@keyframes badgeBounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.badge-unlock-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.badge-unlock-name {
  font-family: "Muro", sans-serif;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 5px;
}

.badge-unlock-description {
  font-size: 0.75rem;
  color: #8d99ae;
  line-height: 1.4;
}