/* Retro font standardization overrides - loaded last */
@font-face {
  font-family: 'realRetro';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/retropixel.ttf');
}

:root {
  --retro-font: 'realRetro', monospace;
  --retro-size-base: 12px;
  --retro-size-sm: 10px;
  --retro-size-lg: 16px;
  
  /* Sci-fi blue-cyan color palette for perks 3D view */
  /* Background */
  --bg-main: #020617;  /* near-black blue */
  --bg-secondary: #020b16;  /* subtle gradient */
  
  /* Card + panel frames */
  --frame-soft: #1f2937;  /* soft border */
  --frame-bright: #22d3ee;  /* cyan edge */
  --frame-accent: #6366f1;  /* indigo inner line */
  
  /* Text */
  --text-main: #e5e7eb;  /* main labels */
  --text-sub: #9ca3af;  /* descriptions */
  --text-muted: #6b7280;
  
  /* Status colors */
  --ok: #4ade80;  /* positive / money */
  --warn: #facc15;  /* highlight / price */
  --danger: #f97373;  /* risk */
  
  /* Glow + UI accents */
  --glow-cyan: #22d3ee;
  --glow-magenta: #a855f7;
}

/* Apply the retro font everywhere, override inline non-important styles */
html, body, h1, h2, h3, h4, h5, h6,
p, a, span, div, label, input, button, select, option, textarea,
.HUD, .coolFont, .tooltip2, .consoleRight, .consoleLeft,
.marker, .marker2, .pointMarker, .country, .xxcountry, .detail {
  font-family: var(--retro-font) !important;
  letter-spacing: 0.02em;
}

/* Smaller, consistent heading sizes */
h1 { font-size: 16px !important; }
h2 { font-size: 12px !important; }
h3, h4, h5, h6 { font-size: 11px !important; }

/* HUD + markers should be legible but compact */
#hudHeader, #hudHeader * { font-size: 12px !important; }
.marker, .marker2, #marker, #marker2, #target_marker,
.pointMarker, #ui-base-marker, #ui-target-marker {
  font-size: 12px !important;
}

/* Timer/clock */
#timerGroup, #gameClock {
  font-family: var(--retro-font) !important;
  font-size: var(--retro-size-sm) !important;
}

/* Menu buttons on the left */
#shell, #researchClick {
  display: block;
  width: auto !important;
  padding: 6px 10px !important;
  margin: 6px 0 !important;
  line-height: 1 !important;
  text-align: left !important;
  font-size: var(--retro-size-base) !important;
  pointer-events: auto !important; /* Ensure clickable */
  cursor: pointer !important;
}

.noPointer {
  pointer-events: none !important;
}

/* General input + chat */
input, textarea, select, button {
  font-family: var(--retro-font) !important;
  font-size: var(--retro-size-base) !important;
}

/* ============================================
   ACTION BARS - ALWAYS VISIBLE
   Force visibility to override hideHUD() jQuery
   ============================================ */
#upgradesBar,
#defenceBar,
#perksBar,
#buffsBar {
  visibility: visible !important;
  display: flex !important;
  opacity: 1 !important;
}

/* CRT Overlay - DISABLED: Vignette now handled by post-processing shader */
.crt-overlay {
  display: none !important; /* Post-processing RetroCompositeShader handles vignette */
  /* Original styles preserved for reference:
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.4) 100%);
  opacity: 0.4;
  */
}

/* Ensure CRT overlay stays on top within the Research panel */
#RESEARCH .crt-overlay {
  z-index: 2147483647;
  border-radius: inherit; /* Optional: match panel border radius if set */
}

/* Status bars (perks/buffs) - matching panel.png design */
.status-bar {
  position: fixed !important;
  overflow: hidden;
  z-index: 2147483642;
  display: flex !important;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 2px;
  border: 1px solid #2a4a7a;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.95) 0%, rgba(6, 14, 28, 0.98) 100%);
  box-shadow: 0 0 10px rgba(0, 100, 200, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  align-items: center;
  min-width: 100px;
  left: 20px !important;
  right: auto !important;
  transform: none;
  bottom: 12% !important;
}
.status-bar.HUD {
  /* Force visibility - override hideHUD() */
  visibility: visible !important;
  display: flex !important;
}

/* Buffs Bar - Active Effects - matching panel.png */
/* BUFFS sits BELOW PERKS (176px) */
.buffs-bar,
#buffsBar,
div.buffs-bar,
div#buffsBar {
  position: fixed !important;
  overflow: hidden;
  z-index: 2147483642;
  display: flex !important;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 2px;
  border: 1px solid #2a4a7a;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.95) 0%, rgba(6, 14, 28, 0.98) 100%);
  box-shadow: 0 0 10px rgba(0, 100, 200, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  align-items: center;
  min-width: 100px;
  left: 20px !important;
  right: auto !important;
  transform: none;
  bottom: calc(12% + 132px) !important;
}
.buffs-bar.HUD {
  /* Force visibility - override hideHUD() */
  visibility: visible !important;
  display: flex !important;
}

/* Empty placeholder for bars with no items */
.bar-empty-placeholder {
  position: relative;
  z-index: 1;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  min-width: 24px;
  text-align: center;
}

/* Clickable title styling for all bars */
.bar-title-clickable {
  cursor: pointer !important;
  transition: all 150ms ease;
}
.bar-title-clickable:hover {
  color: #6ee7a0 !important;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

/* Perks bar title */
.perks-title {
  position: relative;
  z-index: 1;
  font-family: 'realRetro', 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--glow-cyan, #22d3ee);
  text-shadow: 0 0 12px var(--glow-cyan, #22d3ee);
  padding-right: 6px;
  border-right: 1px solid rgba(34, 211, 238, 0.3);
  margin-right: 2px;
}

/* Perk item buttons - minimalist */
.perk-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 5px;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 4px;
  cursor: default;
  transition: all 100ms ease;
  font-family: 'realRetro', 'Press Start 2P', monospace;
}
.perk-item:hover {
  background: rgba(0, 255, 255, 0.3);
  border-color: rgba(100, 255, 255, 0.6);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 255, 255, 0.3);
}
.perk-item img {
  width: 18px;
  height: 18px;
  filter: invert(1) brightness(1.5);
}
/* Tooltip styles for perk/upgrade bars - MAX z-index to always be on top */
.bar-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 10, 30, 0.95);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: 'Silkscreen', monospace;
  font-size: 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2147483647 !important;
  border: 1px solid rgba(150, 100, 200, 0.5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 8px;
}
.bar-tooltip.upgrade-tooltip {
  background: rgba(30, 15, 50, 0.95);
  border-color: rgba(200, 80, 120, 0.6);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.perks-overflow {
  position: relative;
  z-index: 1;
  font-family: 'realRetro', 'Press Start 2P', monospace;
  font-size: 9px;
  color: #00ffff;
  padding: 2px 4px;
  background: rgba(0, 255, 255, 0.15);
  border-radius: 3px;
}

/* Buffs bar title - matching panel.png */
.buffs-title {
  position: relative;
  z-index: 1;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #a78bfa;
  text-shadow: none;
  padding-right: 8px;
  border-right: 1px solid #2a4a7a;
  margin-right: 6px;
  text-transform: uppercase;
}

/* Buff item buttons - matching panel.png */
.buff-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #a78bfa;
  border-radius: 2px;
  cursor: default;
  transition: all 150ms ease;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 10px;
  color: #a78bfa;
}
.buff-item:hover {
  background: rgba(167, 139, 250, 0.15);
  border-color: #c4b5fd;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.3);
}

/* Positive buff styling (green) - matching panel.png */
.buff-item.buff-positive-item {
  border-color: #4ade80;
  color: #4ade80;
}
.buff-item.buff-positive-item:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: #6ee7a0;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

/* Negative debuff styling (red) - matching panel.png */
.buff-item.buff-negative-item {
  border-color: #f87171;
  color: #f87171;
}
.buff-item.buff-negative-item:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: #fca5a5;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.3);
}

.buff-item img {
  width: 16px;
  height: 16px;
  filter: invert(73%) sepia(60%) saturate(400%) hue-rotate(220deg) brightness(95%);
}

/* Buff icon glow effects - green for positive, red for negative */
.buff-icon-wrapper.buff-glow-positive {
  filter: drop-shadow(0 0 4px rgba(100, 255, 150, 0.8)) drop-shadow(0 0 8px rgba(100, 255, 150, 0.4));
}

.buff-icon-wrapper.buff-glow-negative {
  filter: drop-shadow(0 0 4px rgba(255, 80, 100, 0.8)) drop-shadow(0 0 8px rgba(255, 80, 100, 0.4));
}

/* Buff icon wrapper with indicator */
.buff-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.buff-indicator {
  position: absolute;
  bottom: -3px;
  right: -5px;
  font-size: 8px;
  line-height: 1;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}
.buff-indicator.buff-positive {
  filter: drop-shadow(0 0 2px rgba(100, 255, 150, 0.6));
}
.buff-indicator.buff-negative {
  filter: drop-shadow(0 0 2px rgba(255, 80, 100, 0.6));
}

.buffs-overflow {
  position: relative;
  z-index: 1;
  font-family: 'realRetro', 'Press Start 2P', monospace;
  font-size: 9px;
  color: #cc88ff;
  padding: 2px 4px;
  background: rgba(180, 100, 220, 0.15);
  border-radius: 3px;
}

/* Buff tooltip styling */
.bar-tooltip.buff-tooltip {
  background: rgba(30, 10, 40, 0.95);
  border-color: rgba(180, 100, 220, 0.6);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
  text-align: center;
}

/* Ensure CRT overlay stays behind icons within status bars */
.status-bar .crt-overlay,
.buffs-bar .crt-overlay {
  z-index: 0 !important;
  border-radius: inherit;
}

.status-emoji {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: default;
  filter: grayscale(20%);
  transition: transform 120ms ease, filter 120ms ease;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}
.status-emoji:hover {
  transform: translateY(-1px) scale(1.05);
  filter: none;
}
.status-emoji.summary {
  width: 24px;
  height: 24px;
  font-size: 17px;
}
.status-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.25);
  margin: 0 4px;
}
.status-overflow {
  position: relative;
  z-index: 1; /* above overlay */
  font-size: 11px;
  opacity: 0.9;
  padding: 0 2px;
}

.status-bar .status-emoji,
.buffs-bar .status-emoji {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .status-bar,
  .buffs-bar,
  .upgrades-bar {
    gap: 3px;
    padding: 3px 6px;
    min-width: 70px;
  }
  .perk-item,
  .buff-item,
  .upgrade-action {
    padding: 2px 4px;
  }
  .perk-item img,
  .buff-item img,
  .upgrade-action img {
    width: 16px;
    height: 16px;
  }
  .perks-title,
  .buffs-title,
  .upgrades-title {
    font-size: 7px;
    padding-right: 4px;
  }
  .status-emoji {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
  .status-emoji.summary {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }
  .bar-tooltip {
    font-size: 8px;
    padding: 3px 6px;
  }
  .buff-indicator {
    font-size: 6px;
  }
  .bar-empty-placeholder {
    font-size: 10px;
    min-width: 20px;
  }
}

/* ============================================
   STATUS BARS - Matching panel.png design
   Dark navy background, blue border, green accents
   ============================================ */

/* Upgrades Bar - Action Buttons (ATTACKS) */
.upgrades-bar {
  position: fixed !important;
  overflow: hidden;
  z-index: 2147483642;
  display: flex !important;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 2px;
  border: 1px solid #2a4a7a;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.95) 0%, rgba(6, 14, 28, 0.98) 100%);
  box-shadow: 0 0 10px rgba(0, 100, 200, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  align-items: center;
  min-width: 100px;
  left: 20px !important;
  right: auto !important;
  transform: none;
  bottom: calc(12% + 88px) !important;
}

/* Defence Bar - Defensive Actions (DEFENCE) */
#defenceBar {
  position: fixed !important;
  overflow: hidden;
  z-index: 2147483642;
  display: flex !important;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 2px;
  border: 1px solid #2a4a7a;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.95) 0%, rgba(6, 14, 28, 0.98) 100%);
  box-shadow: 0 0 10px rgba(0, 100, 200, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  align-items: center;
  min-width: 100px;
  left: 20px !important;
  right: auto !important;
  transform: none;
  bottom: calc(12% + 44px) !important;
}

/* Perks Bar (from PerksSphere - purchased items/perks) */
.perks-bar,
#perksBar {
  position: fixed !important;
  overflow: hidden;
  z-index: 2147483642 !important;
  display: flex !important;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 2px;
  border: 1px solid #2a4a7a;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.95) 0%, rgba(6, 14, 28, 0.98) 100%);
  box-shadow: 0 0 10px rgba(0, 100, 200, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  align-items: center;
  min-width: 100px;
  left: 20px !important;
  right: auto !important;
  transform: none;
  bottom: calc(12% + 176px) !important;
}
.perks-bar.HUD,
#perksBar.HUD {
  /* Force visibility - override hideHUD() */
  visibility: visible !important;
  display: flex !important;
}
.perks-bar .crt-overlay,
#perksBar .crt-overlay {
  z-index: 0 !important;
  border-radius: inherit;
}
/* Perks bar title styling - matching panel.png */
.perks-bar-title,
.perks-bar > .perks-bar-title,
.perks-title {
  position: relative;
  z-index: 1;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #4ade80;
  text-shadow: none;
  padding-right: 8px;
  border-right: 1px solid #2a4a7a;
  margin-right: 6px;
  text-transform: uppercase;
}
/* Perk bar icons - matching panel.png button style */
.perks-bar .perk-bar-icon,
#perksBar .perk-bar-icon,
.perks-bar-icons .perk-bar-icon,
.perk-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #4ade80;
  border-radius: 2px;
  cursor: pointer;
  transition: all 150ms ease;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 10px;
  color: #4ade80;
}
.perks-bar .perk-bar-icon:hover,
#perksBar .perk-bar-icon:hover,
.perks-bar-icons .perk-bar-icon:hover,
.perk-item:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: #6ee7a0;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}
.perks-bar .perk-bar-icon img,
#perksBar .perk-bar-icon img,
.perk-item img {
  width: 16px;
  height: 16px;
  filter: invert(73%) sepia(60%) saturate(400%) hue-rotate(90deg) brightness(95%);
}
.upgrades-bar.HUD {
  /* Force visibility - override hideHUD() */
  visibility: visible !important;
  display: flex !important;
}
.upgrades-bar .crt-overlay {
  z-index: 0 !important;
  border-radius: inherit;
}
/* Bar titles - matching panel.png */
.upgrades-title {
  position: relative;
  z-index: 1;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #4ade80;
  text-shadow: none;
  padding-right: 8px;
  border-right: 1px solid #2a4a7a;
  margin-right: 6px;
  text-transform: uppercase;
}
/* DEFENCE bar title - same green style */
#defenceBar .upgrades-title {
  color: #22d3ee;
  border-right: 1px solid #2a4a7a;
}
/* Action buttons - matching panel.png button style */
.upgrade-action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #4ade80;
  border-radius: 2px;
  cursor: pointer;
  transition: all 150ms ease;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 10px;
  color: #4ade80;
}
.upgrade-action:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: #6ee7a0;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}
.upgrade-action:active {
  background: rgba(74, 222, 128, 0.25);
}
.upgrade-action img {
  width: 16px;
  height: 16px;
  filter: invert(73%) sepia(60%) saturate(400%) hue-rotate(90deg) brightness(95%);
}
/* Defensive actions (FORTIFY, DEFENCE, SHIELD, HEAL) - cyan styling */
#defenceBar .upgrade-action {
  border: 1px solid #22d3ee;
  color: #22d3ee;
}
#defenceBar .upgrade-action:hover {
  background: rgba(34, 211, 238, 0.15);
  border-color: #5ee7f5;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
}
#defenceBar .upgrade-action:active {
  background: rgba(34, 211, 238, 0.25);
}
#defenceBar .upgrade-action img {
  filter: invert(73%) sepia(60%) saturate(400%) hue-rotate(160deg) brightness(95%);
}
/* Greyed out state for actions requiring target */
.upgrade-action.disabled,
.upgrade-action[data-disabled="true"] {
  opacity: 0.4;
  filter: grayscale(100%);
  pointer-events: none;
  cursor: not-allowed;
}
/* Cooldown state for upgrade actions - dark grey */
.upgrade-action.upgrade-on-cooldown {
  opacity: 0.6;
  filter: grayscale(100%) brightness(0.3);
  background: rgba(60, 60, 60, 0.3) !important;
  border-color: rgba(80, 80, 80, 0.5) !important;
  pointer-events: none;
  cursor: not-allowed;
  transition: filter 200ms ease, opacity 200ms ease, background 200ms ease;
}
.upgrade-action.upgrade-on-cooldown:hover {
  transform: none;
  box-shadow: none;
}
.upgrade-countdown {
  position: absolute;
  top: -2px;
  left: 2px;
  background: rgba(0, 0, 0, 0.8);
  color: #ff6b6b;
  font-family: 'realRetro', 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 1px 3px;
  border-radius: 2px;
  white-space: nowrap;
  z-index: 10;
  text-shadow: 0 0 4px rgba(255, 107, 107, 0.8);
}

/* Tech Granted Flash Animation - 5 second pulsing glow */
@keyframes techGrantedFlash {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0, 255, 100, 0.5);
    border-color: #4ade80;
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 255, 100, 1), 0 0 60px rgba(0, 255, 100, 0.5);
    border-color: #00ff64;
  }
}

.upgrade-action.tech-granted-flash {
  animation: techGrantedFlash 0.5s ease-in-out 10; /* 10 cycles = 5 seconds */
  z-index: 100;
  position: relative;
}

@media (max-width: 900px) {
  .upgrades-bar {
    gap: 4px;
    padding: 5px 8px;
  }
  .upgrade-action {
    padding: 4px 6px;
  }
  .upgrade-action img {
    width: 20px;
    height: 20px;
  }
  .upgrades-title {
    font-size: 8px;
  }
}

/* ============================================================================
   OUT OF RANGE ACTION STYLING
   ============================================================================ */

/* Action button out of range state - crimson color indicates unavailable */
.upgrade-action.out-of-range {
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.6), rgba(220, 20, 60, 0.4)) !important;
  border-color: #DC143C !important;
  box-shadow: 0 0 8px rgba(220, 20, 60, 0.4), inset 0 0 6px rgba(139, 0, 0, 0.3) !important;
  opacity: 0.7;
}

.upgrade-action.out-of-range:hover {
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.8), rgba(220, 20, 60, 0.6)) !important;
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.6), inset 0 0 8px rgba(139, 0, 0, 0.4) !important;
  opacity: 0.85;
}

.upgrade-action.out-of-range img {
  filter: invert(1) brightness(1.2) sepia(1) saturate(5) hue-rotate(-30deg) !important;
}

/* Out of range tooltip indicator */
.out-of-range-indicator {
  color: #DC143C !important;
  font-size: 9px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(220, 20, 60, 0.8);
  margin-top: 2px;
}