/**
 * Modular Panel System Styles
 * Date: September 11, 2025
 * 
 * Prefix-specific styles to prevent cross-panel interference
 */

/* /* Ensure main game content is visible when infrastructure is active - HIGH SPECIFICITY */
body .game-content.infrastructure-mode,
.game-content.infrastructure-mode {
    background: #001100 !important;  /* Very dark green terminal background like screenshot */
    color: #4CAF50 !important;  /* Match upgrade button green text */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Infrastructure Panel Styles - RETRO TERMINAL THEME */
#infrastructure-panel .infrastructure-structure-card,
#infrastructure-panel .infrastructure-card {
    background: linear-gradient(180deg, #001a00 0%, #000d00 40%, #001100 100%) !important;
    border: 1px solid #2a6b2a !important;
    border-top: 2px solid #4CAF50 !important;
    border-radius: 2px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: 'Courier New', monospace !important;
    color: #4CAF50 !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Subtle CRT scanline overlay */
#infrastructure-panel .infrastructure-structure-card::before,
#infrastructure-panel .infrastructure-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 0, 0.015) 2px,
        rgba(0, 255, 0, 0.015) 4px
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#infrastructure-panel .infrastructure-structure-card:hover,
#infrastructure-panel .infrastructure-card:hover {
    border-color: #00ff00 !important;
    border-top-color: #00ff00 !important;
    background: linear-gradient(180deg, #002a00 0%, #001500 40%, #001a00 100%) !important;
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.25), inset 0 1px 0 rgba(0, 255, 0, 0.1) !important;
}

#infrastructure-panel .infrastructure-structure-header,
#infrastructure-panel .infrastructure-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 2px !important;
    border-bottom: 1px solid rgba(0, 170, 0, 0.3) !important;
    padding-bottom: 2px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    flex-wrap: wrap !important;
}

/* When header has a progress bar, remove the default border-bottom */
#infrastructure-panel .infrastructure-card-header:has(.header-progress) {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 6px !important;
}

/* Upgrade progress bar in card header — acts as the separator line */
#infrastructure-panel .upgrade-progress.header-progress {
    width: 100% !important;
    order: 3 !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
}

#infrastructure-panel .upgrade-progress.header-progress .progress-bar {
    width: 100% !important;
    height: 5px !important;
    background: #001100 !important;
    border: 1px solid rgba(0, 170, 0, 0.5) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

#infrastructure-panel .upgrade-progress.header-progress .progress-fill {
    height: 100% !important;
    width: 0%;
    background: linear-gradient(90deg, #ffcc00, #ff8800) !important;
    transition: width 1s linear !important;
    box-shadow: 0 0 6px rgba(255, 200, 0, 0.5) !important;
}

#infrastructure-panel .upgrade-progress.header-progress .progress-time {
    color: #ffcc00 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    text-align: center !important;
    font-weight: bold !important;
    text-shadow: 0 0 6px rgba(255, 200, 0, 0.4) !important;
    letter-spacing: 0.5px !important;
    animation: infrastructure-timer-pulse 2s infinite !important;
    padding-bottom: 4px !important;
}

#infrastructure-panel .infrastructure-structure-name,
#infrastructure-panel .infrastructure-card-name {
    color: #7ddb83 !important;
    font-size: 14px !important;
    margin: 0 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-family: 'Courier New', monospace !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 260px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 5px !important;
    letter-spacing: 0.8px !important;
    line-height: 1.3 !important;
    max-height: 2.6em !important;
    -webkit-line-clamp: 2 !important;
}

#infrastructure-panel .infrastructure-card-name .structure-icon {
    font-size: 16px !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 0 3px rgba(0, 255, 0, 0.4)) !important;
}

#infrastructure-panel .infrastructure-structure-level,
#infrastructure-panel .infrastructure-card-level {
    background: linear-gradient(180deg, #0a1a0a 0%, #000000 100%) !important;
    color: #00ff00 !important;
    border: 1px solid #338833 !important;
    padding: 3px 8px !important;
    border-radius: 2px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    font-family: 'Courier New', monospace !important;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.5) !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

/* Level badge as upgrade button - clickable state */
#infrastructure-panel .infrastructure-card-level.level-can-upgrade {
    cursor: pointer !important;
    border-color: #00cc44 !important;
}
#infrastructure-panel .infrastructure-card-level.level-can-upgrade:hover {
    background: linear-gradient(180deg, #0a2a0a 0%, #003300 100%) !important;
    border-color: #00ff66 !important;
    color: #66ff99 !important;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8) !important;
    transform: scale(1.08);
    box-shadow: 0 0 8px rgba(0, 255, 100, 0.4) !important;
}

/* Level badge - upgrading/disabled state */
#infrastructure-panel .infrastructure-card-level.level-upgrading {
    cursor: not-allowed !important;
    opacity: 1 !important;
    border-color: #aa8800 !important;
    color: #ffcc00 !important;
    text-shadow: 0 0 6px rgba(255, 204, 0, 0.6) !important;
    position: relative !important;
    overflow: hidden !important;
}
#infrastructure-panel .infrastructure-card-level.level-upgrading::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: repeating-linear-gradient(
        45deg,
        rgba(241, 196, 15, 0.25) 0px,
        rgba(241, 196, 15, 0.25) 4px,
        transparent 4px,
        transparent 8px
    ) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
}

/* Level badge - max level state */
#infrastructure-panel .infrastructure-card-level.level-max {
    opacity: 0.7 !important;
    border-color: #555555 !important;
}

/* Level badge - blocked (another structure on island is upgrading) */
#infrastructure-panel .infrastructure-card-level.level-blocked {
    cursor: not-allowed !important;
    opacity: 0.4 !important;
    border-color: #444444 !important;
    color: #667766 !important;
    text-shadow: none !important;
}

.infrastructure-upgrade-btn {
    background: #000000 !important;  /* Black terminal background */
    color: #00ff00 !important;  /* Bright green text */
    border: 2px solid #00aa00 !important;  /* Green border */
    border-radius: 0 !important;  /* Square corners */
    padding: 10px 16px !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    font-family: 'Courier New', monospace !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.2) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
}

.infrastructure-upgrade-btn:hover {
    background: #001100 !important;
    border-color: #00ff00 !important;
    box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.4), 0 0 10px rgba(0, 255, 0, 0.3) !important;
}

.infrastructure-upgrade-btn.infrastructure-upgrading {
    background: #110000 !important;  /* Darker red tint */
    color: #ff6600 !important;  /* Orange text for upgrading */
    border-color: #aa4400 !important;
    cursor: not-allowed !important;
}

.infrastructure-timer-display {
    color: #00ff00 !important;  /* Terminal green */
    font-weight: bold !important;
    font-family: 'Courier New', monospace !important;
    text-shadow: 0 0 8px #00ff00 !important;  /* Green glow */
    animation: infrastructure-timer-pulse 2s infinite !important;
    background: #000000 !important;  /* Black background */
    padding: 2px 6px !important;
    border: 1px solid #00aa00 !important;
    border-radius: 0 !important;
}

@keyframes infrastructure-timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Infrastructure Upgrade Progress Bar & Countdown */
#infrastructure-panel .upgrade-progress {
    margin: 4px 0 !important;
    padding: 4px !important;
    background: #000000 !important;
    border: 1px solid #00aa00 !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
}

#infrastructure-panel .upgrade-progress .progress-bar {
    width: 100% !important;
    height: 8px !important;
    background: #001100 !important;
    border: 1px solid #00aa00 !important;
    margin-bottom: 5px !important;
    overflow: hidden !important;
}

#infrastructure-panel .upgrade-progress .progress-fill {
    height: 100% !important;
    width: 0%;
    background: linear-gradient(90deg, #00ff00, #4CAF50) !important;
    transition: width 1s linear !important;
}

#infrastructure-panel .upgrade-progress .progress-text {
    color: #00ff00 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    text-align: center !important;
    font-weight: bold !important;
    text-shadow: 0 0 8px #00ff00 !important;
    animation: infrastructure-timer-pulse 2s infinite !important;
}

/* Infrastructure card content styles - RETRO TERMINAL THEME */
#infrastructure-panel .infrastructure-card-stats,
#infrastructure-panel .infrastructure-structure-stats {
    margin-top: 0 !important;
    color: #66cc66 !important;
    font-size: 11px !important;
    font-family: 'Courier New', monospace !important;
    line-height: 1.2 !important;
    flex: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 2px !important;
}

/* Reserve output-box space on cards that don't have a production output */
.airfield-card .infrastructure-card-stats,
.harbor-card .infrastructure-card-stats,
.aviation-plant-card .infrastructure-card-stats,
.shipyard-card .infrastructure-card-stats,
.radar-installation-card .infrastructure-card-stats,
.fortress-card .infrastructure-card-stats {
    padding-bottom: 0 !important;
}

/* Card actions — HIDDEN for compact row layout */
#infrastructure-panel .infrastructure-card-actions {
    display: none !important;
}

/* Compact description text in structure cards */
#infrastructure-panel .stat-description-text {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    font-style: italic;
}

#infrastructure-panel .stat-description.compact-description {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    font-style: italic;
}

/* Compact stats sections across ALL card types */
#infrastructure-panel .capacity-header,
#infrastructure-panel .production-section .capacity-header {
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

#infrastructure-panel .capacity-label,
#infrastructure-panel .radar-label {
    font-size: 11px !important;
    letter-spacing: 0.8px !important;
    color: #55aa55 !important;
    text-transform: uppercase !important;
}

#infrastructure-panel .capacity-icon,
#infrastructure-panel .radar-icon {
    font-size: 14px !important;
    filter: drop-shadow(0 0 2px rgba(0, 255, 0, 0.3)) !important;
}

#infrastructure-panel .capacity-value,
#infrastructure-panel .radar-value {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #33ff33 !important;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.2) !important;
    line-height: 1 !important;
}

#infrastructure-panel .capacity-types {
    display: none !important;
}

#infrastructure-panel .infrastructure-card-description,
#infrastructure-panel .infrastructure-structure-description {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.72rem !important;
    font-style: italic !important;
    margin-bottom: 0.3rem !important;
}

#infrastructure-panel .infrastructure-stat,
#infrastructure-panel .infrastructure-stat-value {
    display: inline-block !important;
    margin-right: 10px !important;
    color: #00ff00 !important;  /* Bright terminal green for stats */
    font-family: 'Courier New', monospace !important;
    font-weight: normal !important;
}

.infrastructure-island-section {
    margin-bottom: 30px !important;
    border-bottom: 2px solid #00aa00 !important;  /* Terminal divider */
    padding-bottom: 20px !important;
}

/* Ensure main game content is visible when infrastructure is active - HIGH SPECIFICITY */
body .game-content.infrastructure-mode,
.game-content.infrastructure-mode {
    background: #000000 !important;  /* Pure black terminal background like screenshot */
    color: #00ff00 !important;  /* Terminal green text */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Infrastructure Main Content Container - HIGH SPECIFICITY */
body .game-content.infrastructure-mode #infrastructure-main-content,
#infrastructure-panel #infrastructure-main-content,
#infrastructure-main-content {
    background: #001100 !important;  /* Very dark green like screenshot */
    padding: 15px !important;  /* Much less padding like screenshot */
    margin: 0 !important;  /* No top margin — island tabs are directly above */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Force visibility for infrastructure content */
.game-content.infrastructure-mode #infrastructure-panel {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Infrastructure Panel Background - RETRO TERMINAL THEME */
#infrastructure-panel {
    background: #001100 !important;  /* Very dark green background like screenshot */
    color: #00ff00 !important;  /* Terminal green text */
    font-family: 'Courier New', monospace !important;
    padding: 0 15px 15px 15px !important;  /* No top padding — island tabs handle it */
    overflow: hidden !important;
}

#infrastructure-panel.panel-content {
    padding: 0 15px 15px 15px !important;  /* Override generic .panel-content padding */
    background: #001100 !important;
    border: none !important;
}

/* Built Infrastructure Grid - Terminal Theme - HIGH SPECIFICITY */
body .game-content.infrastructure-mode #infrastructure-main-content #built-infrastructure-grid,
body .game-content.infrastructure-mode #built-infrastructure-grid,
#infrastructure-panel #built-infrastructure-grid,
#built-infrastructure-grid {
    background: #001100 !important;  /* Very dark green background like screenshot */
    border: none !important;  /* Remove border for cleaner look */
    padding: 10px !important;  /* Minimal padding like screenshot */
    margin-top: 0 !important;  /* No extra top margin */
    display: block !important;  /* Ensure proper layout */
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 200px !important;
    box-sizing: border-box !important;
}

#built-infrastructure-grid .infrastructure-island-section {
    margin-bottom: 30px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    visibility: visible !important;
}

/* Island Title Spacing - HIGH SPECIFICITY */
body .game-content.infrastructure-mode #infrastructure-main-content #built-infrastructure-grid .infrastructure-island-title,
body .game-content.infrastructure-mode #built-infrastructure-grid .infrastructure-island-title,
#infrastructure-panel #built-infrastructure-grid .infrastructure-island-title,
#built-infrastructure-grid .infrastructure-island-title {
    color: #5dbb63 !important;
    font-size: 15px !important;
    margin-bottom: 12px !important;
    margin-left: 0 !important;
    padding: 6px 12px !important;
    border-bottom: none !important;
    border-left: 3px solid #4CAF50 !important;
    background: linear-gradient(90deg, rgba(0, 50, 0, 0.4) 0%, transparent 100%) !important;
    font-family: 'Courier New', monospace !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    letter-spacing: 1.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

/* Upgrade Cards - Terminal Theme */
#upgrade-cards {
    background: #000000 !important;  /* Pure black background */
    border: none !important;  /* Remove border for cleaner look */
    padding: 30px !important;  /* More padding for spacious layout */
    display: block !important;  /* Ensure visible */
    visibility: visible !important;
}

.infrastructure-island-title {
    color: #3498db;
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #34495e;
    display: flex;
    align-items: center;
}

.island-pop-stats {
    display: inline-flex !important;
    gap: 20px !important;
    font-size: 13px !important;
    font-weight: normal !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    margin-left: 20px !important;
    padding-left: 20px !important;
    border-left: 1px solid #4a6a4a !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
}

.island-stat {
    color: #8cc8ff;
    white-space: nowrap;
    display: inline !important;
}

.island-pop-stats .stat-label {
    color: #7aaa7a !important;
    margin-right: 5px !important;
    font-weight: normal !important;
    text-transform: none !important;
}

.island-pop-stats .stat-value {
    color: #e0f0ff !important;
    font-weight: bold !important;
    text-transform: none !important;
}

.island-morale.high .stat-value { color: #5dbb63 !important; }
.island-morale.mid .stat-value  { color: #f0c040 !important; }
.island-morale.low .stat-value  { color: #e74c3c !important; }

/* Infrastructure Card Containers - HIGH SPECIFICITY */
body .game-content.infrastructure-mode #infrastructure-main-content .island-structures,
body .game-content.infrastructure-mode #infrastructure-main-content .built-infrastructure-grid .island-structures,
#infrastructure-panel .infrastructure-island-structures,
#infrastructure-panel .built-infrastructure-grid,
#infrastructure-panel .island-structures {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 350px) !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

/* Ensure infrastructure cards don't use negative margins */
#infrastructure-panel .infrastructure-card {
    margin: 0 !important;
}

/* Override legacy grid styles for infrastructure panel */
#infrastructure-panel .built-infrastructure-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;  /* Reduced gap between sections */
}

#infrastructure-panel .built-infrastructure-grid {
    display: block !important;
    gap: 10px !important;
}

/* Infrastructure Build Card Styles */
#infrastructure-panel .infrastructure-build-card {
    background: linear-gradient(180deg, #001a00 0%, #000d00 40%, #001100 100%) !important;
    border: 1px dashed #2a6b2a !important;
    border-radius: 2px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: 'Courier New', monospace !important;
    color: #4CAF50 !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
}

#infrastructure-panel .infrastructure-build-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 0, 0.015) 2px,
        rgba(0, 255, 0, 0.015) 4px
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#infrastructure-panel .infrastructure-build-card:hover {
    border-color: #00ff00 !important;
    border-style: solid !important;
    background: linear-gradient(180deg, #002a00 0%, #001500 40%, #001a00 100%) !important;
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.25), inset 0 1px 0 rgba(0, 255, 0, 0.1) !important;
}

#infrastructure-panel .infrastructure-build-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 15px !important;
}

#infrastructure-panel .infrastructure-build-icon {
    font-size: 2rem !important;
    margin-bottom: 8px !important;
    filter: drop-shadow(0 0 4px rgba(0, 255, 0, 0.3)) !important;
    position: relative !important;
    z-index: 2 !important;
}

#infrastructure-panel .infrastructure-build-title {
    font-size: 13px !important;
    font-weight: bold !important;
    color: #5dbb63 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    position: relative !important;
    z-index: 2 !important;
}

#infrastructure-panel .infrastructure-build-description {
    font-size: 10px !important;
    margin-bottom: 16px !important;
    color: #2a8a2a !important;
    opacity: 0.85 !important;
    position: relative !important;
    z-index: 2 !important;
}

#infrastructure-panel .infrastructure-build-actions {
    margin-top: auto !important;
    position: relative !important;
    z-index: 2 !important;
}

#infrastructure-panel .btn-build-structure {
    background: transparent !important;
    border: 1px solid #338833 !important;
    color: #4CAF50 !important;
    padding: 7px 18px !important;
    font-family: 'Courier New', monospace !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-radius: 2px !important;
    width: 100% !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

#infrastructure-panel .btn-build-structure:hover {
    background: #4CAF50 !important;
    color: #001100 !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4) !important;
}

/* Build Structure Popup Styles */
.build-structure-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.build-structure-popup {
    background: #001100;
    border: 3px solid #4CAF50;
    max-width: 85%;
    max-height: 80%;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    color: #4CAF50;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 20px;
    grid-auto-rows: min-content;
}

.build-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 2px solid #4CAF50;
    background: #002200;
    margin: -20px -20px 4px -20px;
    grid-column: 1 / -1;
}

.build-popup-header h3 {
    margin: 0;
    color: #00ff00;
    font-size: 1.3rem;
}

.build-popup-close {
    background: transparent;
    border: 1px solid #4CAF50;
    color: #4CAF50;
    padding: 5px 10px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    position: relative;
    z-index: 10;
}

.build-popup-close:hover {
    background: #4CAF50;
    color: #001100;
}

/* Removed build-popup-content - cards are now direct children of popup */

.build-structure-card {
    background: #001100;
    border: 2px solid #4CAF50;
    padding: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    min-height: 120px;
    border-radius: 4px;
}

.build-structure-card.clickable-card:hover {
    border-color: #00ff00;
    background: #002200;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
    transform: translateY(-2px);
}

.build-structure-card.clickable-card:hover::before {
    content: "► Click";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.65rem;
    color: #00ff00;
    opacity: 0.8;
    background: rgba(0, 17, 0, 0.9);
    padding: 1px 4px;
    border: 1px solid #4CAF50;
}

.build-structure-card.clickable-card:active {
    transform: translateY(0);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

/* Custom themed tooltip for build costs */
.build-structure-card {
    position: relative;
}

.build-cost-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #0a1a0a 0%, #000d00 100%);
    color: #00ff00;
    padding: 18px 22px;
    border-radius: 3px;
    font-size: 16px;
    line-height: 1.8;
    white-space: nowrap;
    z-index: 1000;
    border: 2px solid #338833;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    margin-bottom: 10px;
    min-width: 320px;
    max-width: 480px;
    text-align: left;
}

.build-cost-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #338833;
}

.build-structure-card:hover .build-cost-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Ensure tooltip text is styled properly */
.build-cost-tooltip .cost-resource {
    color: #ffff00;
    font-weight: bold;
    font-size: 16px;
}

.build-cost-tooltip .cost-amount {
    color: #ff6600;
    font-weight: bold;
    font-size: 16px;
}

.build-cost-tooltip .cost-label {
    color: #cccccc;
    font-size: 15px;
}

/* Resource availability color coding */
.build-cost-tooltip .resource-sufficient {
    color: #00ff00 !important;
    font-size: 16px;
}

.build-cost-tooltip .resource-insufficient {
    color: #ff3333 !important;
    font-size: 16px;
}

.build-cost-tooltip .player-has {
    color: #888888;
    font-size: 14px;
}

/* Visual indication for unbuildable structures */
.build-structure-card.insufficient-resources {
    opacity: 0.45;
    background-color: #1a0000 !important;
    border-color: #553333 !important;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

.build-structure-card.insufficient-resources:hover {
    background-color: #1a0000 !important;
    cursor: not-allowed;
}

.build-structure-card.insufficient-resources .build-structure-header h4 {
    color: #996666 !important;
}

.build-structure-card.insufficient-resources .build-structure-description {
    color: #666666 !important;
}

/* Missing resources warning text on dimmed cards */
.missing-resources-notice {
    color: #ff6666;
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid #553333;
    pointer-events: auto;
}

/* Build Card - Production/Extraction Section */
.build-structure-card .build-card-production {
    background: rgba(255, 107, 53, 0.08);
    border: 1px solid rgba(255, 107, 53, 0.25);
    border-radius: 3px;
    padding: 6px 8px;
    margin: 6px 0;
    text-align: center;
}

.build-structure-card .build-prod-label {
    color: #ff6b35;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.build-structure-card .build-prod-value {
    color: #ff8c69;
    font-size: 13px;
    font-weight: bold;
    margin: 2px 0;
}

.build-structure-card .build-prod-rate {
    font-size: 8px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Build Card - Cost Section */
.build-structure-card .build-cost-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 6px 8px;
    margin: 6px 0;
}

.build-structure-card .build-cost-label {
    color: #aaa;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.build-structure-card .build-cost-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.build-structure-card .build-cost-item {
    color: #ccc;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 5px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Build Card - Footer */
.build-structure-card .build-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(76, 175, 80, 0.2);
}

.build-structure-card .build-time {
    color: #888;
    font-size: 10px;
    font-family: 'Courier New', monospace;
}

.build-structure-card .available-badge {
    background: rgba(0, 255, 0, 0.1);
    color: #00FF88;
    border: 1px solid rgba(0, 255, 136, 0.4);
    padding: 2px 6px;
    font-size: 9px;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
}

.build-structure-card .unavailable-badge {
    background: rgba(255, 0, 0, 0.1);
    color: #ff4444;
    border: 1px solid rgba(255, 68, 68, 0.4);
    padding: 2px 6px;
    font-size: 9px;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
}

/* Infrastructure card header reuse in build cards */
.build-structure-card .infrastructure-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2);
}

.build-structure-card .infrastructure-card-name {
    color: #00FF88;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.build-structure-card .infrastructure-card-level {
    color: #FFD700;
    font-size: 0.7rem;
    background: rgba(255, 215, 0, 0.1);
    padding: 1px 5px;
    border-radius: 2px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.build-structure-card .infrastructure-description {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 4px;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.build-structure-card.insufficient-resources .infrastructure-card-name {
    color: #996666 !important;
}

.build-structure-card.insufficient-resources .infrastructure-description {
    color: #666666 !important;
}

/* Resource cost color coding */
.resource-sufficient {
    color: #00ff00;
}

.resource-insufficient {
    color: #ff4444;
    font-weight: bold;
}

.build-structure-header h4 {
    margin: 0 0 6px 0;
    color: #00ff00;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.2;
}

.build-structure-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.build-structure-description {
    opacity: 0.8;
    font-size: 0.75rem;
    line-height: 1.2;
    margin: 0;
}

/* Removed redundant build button styles - cards are now clickable */

/* Build Panel Styles */
.build-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
}

.build-modal-content {
    background: #2c3e50;
    margin: 5% auto;
    padding: 0;
    border: 1px solid #34495e;
    width: 90%;
    max-width: 1000px;
    border-radius: 8px;
}

.build-modal-header {
    background: #34495e;
    padding: 15px 20px;
    border-bottom: 1px solid #4a5f7a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.build-modal-close {
    color: #ecf0f1;
    font-size: 24px;
    cursor: pointer;
}

/* Build structure grid and card styles - consolidated above */

.build-island-card {
    background: #2c3e50;
    border: 2px solid #34495e;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
    cursor: pointer;
    transition: border-color 0.3s;
}

.build-island-card:hover {
    border-color: #3498db;
}

.build-island-card.build-selected {
    border-color: #27ae60;
}

.build-item {
    background: #2c3e50;
    border: 1px solid #34495e;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    transition: all 0.3s ease;
}

.build-item:hover {
    border-color: #3498db;
    background: #34495e;
}

.build-item.selected {
    border-color: #27ae60;
    background: #34495e;
}

.build-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.build-name {
    font-weight: bold;
    color: #ecf0f1;
    font-size: 1.1em;
}

.build-cost {
    color: #bdc3c7;
    font-size: 0.9em;
}

.build-description {
    color: #bdc3c7;
    margin: 10px 0;
    font-style: italic;
}

.build-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 100%;
}

.build-btn:hover:not(:disabled) {
    background: #229954;
    transform: translateY(-1px);
}

.build-btn.can-afford {
    background: #27ae60;
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.3);
}

.build-btn:disabled {
    background: #7f8c8d;
    cursor: not-allowed;
    transform: none;
}

.island-section {
    margin-bottom: 30px;
}

.island-header {
    color: #2ecc71;
    border-bottom: 2px solid #27ae60;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.island-structures {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.no-structures {
    background: #34495e;
    border: 1px dashed #7f8c8d;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: #bdc3c7;
    font-style: italic;
}

/* Map Panel Styles */
.map-game-canvas {
    border: 2px solid #34495e;
    border-radius: 8px;
}

.map-island-marker {
    position: absolute;
    background: #3498db;
    border: 2px solid #2980b9;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.map-island-marker:hover {
    background: #5dade2;
    transform: scale(1.2);
}

.map-island-marker.map-selected {
    background: #27ae60;
    border-color: #229954;
    box-shadow: 0 0 15px rgba(39, 174, 96, 0.6);
}

/* Marketplace Panel Styles */
.marketplace-credits-section {
    background: #2c3e50;
    border: 1px solid #34495e;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.marketplace-credits-value {
    color: #f1c40f;
    font-size: 24px;
    font-weight: bold;
}

.marketplace-listing {
    background: #34495e;
    border: 1px solid #4a5f7a;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
    transition: border-color 0.3s;
}

.marketplace-listing:hover {
    border-color: #3498db;
}

.marketplace-trade-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.marketplace-trade-btn:hover {
    background: #c0392b;
}

/* Communications Panel Styles */
.communications-conversation {
    background: #34495e;
    border: 1px solid #4a5f7a;
    border-radius: 8px;
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.communications-conversation:hover {
    background: #3c526d;
}

.communications-conversation.communications-selected {
    background: rgba(52, 152, 219, 0.2);
    border-color: #3498db;
}

.communications-message {
    background: #2c3e50;
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
}

.communications-message.communications-outgoing {
    background: rgba(39, 174, 96, 0.2);
    margin-left: 20%;
}

.communications-message.communications-incoming {
    background: rgba(52, 152, 219, 0.2);
    margin-right: 20%;
}

.communications-send-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

/* Scoreboard Panel Styles — WW2 Naval Command Theme */
.sb-header {
    padding: 16px 15px 12px;
    border-bottom: 2px solid #2a8a2a;
    background: linear-gradient(180deg, #0d1a0d 0%, #0a140a 100%);
    text-align: center;
}
.sb-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}
.sb-banner-line {
    flex: 0 1 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #2a8a2a 40%, #00ff00 100%);
}
.sb-banner-line:last-child {
    background: linear-gradient(90deg, #00ff00 0%, #2a8a2a 60%, transparent 100%);
}
.sb-title {
    color: #00ff88;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    margin: 0;
    letter-spacing: 2px;
    white-space: nowrap;
}
.sb-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.sb-tab {
    background: rgba(0, 0, 0, 0.3);
    color: #4CAF50;
    border: 1px solid rgba(0, 255, 136, 0.15);
    padding: 6px 18px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
    border-radius: 2px;
}
.sb-tab:hover {
    background: rgba(0, 255, 136, 0.04);
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.3);
}
.sb-tab-active {
    background: rgba(0, 255, 136, 0.06);
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.4);
}
.sb-body {
    padding: 14px 12px;
}
.sb-loading, .sb-empty {
    color: #4CAF50;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    text-align: center;
    padding: 30px 0;
    letter-spacing: 0.8px;
    opacity: 0.6;
}

/* List Layout */
.sb-list {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 136, 0.1);
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    transition: background 0.2s, border-color 0.2s;
}
.sb-row:hover {
    background: rgba(0, 255, 136, 0.03);
    border-color: rgba(0, 255, 136, 0.2);
}

/* Position number */
.sb-row-pos {
    width: 28px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #2a8a2a;
    flex-shrink: 0;
}

/* Rank insignia emoji */
.sb-row-insignia {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    cursor: help;
    filter: drop-shadow(0 0 3px rgba(0,255,0,0.25));
}

/* Name + detail block */
.sb-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sb-row-name {
    font-size: 12px;
    color: #00ff88;
    font-weight: bold;
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-row-detail {
    font-size: 10px;
    color: #2a8a2a;
    letter-spacing: 1px;
}
.sb-you {
    color: #00ff00;
    font-weight: bold;
    font-size: 9px;
    text-shadow: 0 0 4px rgba(0,255,0,0.4);
}

/* Score + awards (right side) */
.sb-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.sb-row-score {
    font-size: 16px;
    font-weight: bold;
    color: #4CAF50;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}
.sb-row-awards {
    display: flex;
    gap: 2px;
}

/* Top 3 embellishments */
.sb-row-top1 {
    border-color: rgba(0, 255, 136, 0.35);
    background: rgba(0, 255, 136, 0.04);
}
.sb-row-top1 .sb-row-pos { color: #00ff88; font-size: 17px; }
.sb-row-top1 .sb-row-score { color: #00ff88; font-size: 17px; }

.sb-row-top2 {
    border-color: #4CAF50;
}
.sb-row-top2 .sb-row-pos { color: #4CAF50; font-size: 17px; }

.sb-row-top3 {
    border-color: #2e7d32;
}
.sb-row-top3 .sb-row-pos { color: #2e7d32; }

/* Current player highlight */
.sb-row-me {
    background: rgba(0, 255, 136, 0.05) !important;
    border-color: rgba(0, 255, 136, 0.4) !important;
}
/* Awards */
.sb-award {
    font-size: 16px;
    margin: 0 2px;
    cursor: help;
    filter: drop-shadow(0 0 2px rgba(0,255,0,0.4));
}

/* Turn status indicator dot */
.sb-turn-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;
    vertical-align: middle;
    transition: background 0.3s, box-shadow 0.3s;
}
.sb-turn-dot-ready {
    background: #4CAF50;
    box-shadow: 0 0 3px rgba(76, 175, 80, 0.6);
}
.sb-turn-dot-waiting {
    background: #555;
    box-shadow: none;
}
@keyframes sb-turn-pulse {
    0%   { transform: scale(1);   box-shadow: 0 0 3px rgba(76, 175, 80, 0.6); }
    50%  { transform: scale(1.6); box-shadow: 0 0 8px rgba(76, 175, 80, 0.9); }
    100% { transform: scale(1);   box-shadow: 0 0 3px rgba(76, 175, 80, 0.6); }
}
.sb-turn-dot-pulse {
    animation: sb-turn-pulse 0.4s ease-out;
}

/* General Panel Styles */
.panel-content {
    display: none;
}

.panel-content.active {
    display: block;
}

.main-panel-content {
    display: none;
}

.main-panel-content.active {
    display: block;
}

/* Production-focused Build Panel Styling */
.build-panel .build-islands-container {
    padding: 1rem;
}

.build-panel .island-section {
    border: 1px solid #00aa00;
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(0, 170, 0, 0.1);
}

.build-panel .island-header {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ff00;
    margin-bottom: 1rem;
    border-bottom: 1px solid #00aa00;
    padding-bottom: 0.5rem;
}

/* Production Facility Sections */
.production-facility {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #006600;
    background: rgba(0, 102, 0, 0.05);
}

.production-facility h4 {
    color: #00cc00;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
}

.production-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Build Cards */
.build-card {
    border: 1px solid #00aa00;
    padding: 1rem;
    background: rgba(0, 170, 0, 0.1);
    transition: background-color 0.3s;
}

.build-card:hover {
    background: rgba(0, 170, 0, 0.2);
}

.build-card-header {
    margin-bottom: 0.5rem;
}

.unit-name {
    font-weight: bold;
    color: #00ff00;
    font-size: 1rem;
}

.unit-type {
    color: #00cc00;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.build-costs {
    margin: 0.5rem 0;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    margin: 0.25rem 0;
}

.cost-label {
    color: #00aa00;
}

.cost-value {
    color: #00ff00;
    font-weight: bold;
}

.build-btn {
    width: 100%;
    padding: 0.5rem;
    background: #004400;
    color: #00ff00;
    border: 1px solid #00aa00;
    cursor: pointer;
    font-family: inherit;
    margin-top: 0.5rem;
}

.build-btn:hover {
    background: #006600;
}

/* Home Fleet and Air Wing */
.home-units {
    margin-top: 1rem;
    padding: 0.5rem;
    border: 1px solid #004400;
    background: rgba(0, 68, 0, 0.1);
    border-radius: 4px;
}

.home-fleet, .home-air-wing {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #006600;
    background: rgba(0, 102, 0, 0.1);
    border-radius: 4px;
}

.home-fleet h5, .home-air-wing h5 {
    color: #00cc00;
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

.fleet-units, .air-wing-units {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fleet-unit, .air-wing-unit {
    background: rgba(0, 170, 0, 0.2);
    padding: 0.25rem 0.5rem;
    border: 1px solid #006600;
    font-size: 0.8rem;
}

.unit-entry {
    background: rgba(0, 170, 0, 0.15);
    padding: 0.3rem 0.6rem;
    border: 1px solid #00aa00;
    border-radius: 3px;
    margin: 0.2rem 0;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.unit-count {
    font-weight: bold;
    color: #00ff00;
}

.unit-name {
    color: #ccffcc;
}

.unit-tech {
    color: #66ff66;
    font-size: 0.8rem;
}

.no-units {
    color: #888;
    font-style: italic;
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
}

.loading {
    color: #999;
    font-style: italic;
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
}

/* No Production State */
.no-production {
    padding: 2rem;
    text-align: center;
    color: #00aa00;
    font-style: italic;
}

/* Structure Selection Popup Styles - Retro Terminal Theme */
.structure-selection-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', monospace;
}

.structure-selection-popup {
    background: #001100;
    border: 3px solid #00ff00;
    border-radius: 0;
    padding: 0;
    max-width: 90%;
    max-height: 80%;
    overflow-y: auto;
    box-shadow: 
        inset 0 0 20px rgba(0, 255, 0, 0.3),
        0 0 30px rgba(0, 255, 0, 0.6);
}

.popup-header {
    background: #002200;
    border-bottom: 2px solid #00ff00;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popup-header h3 {
    color: #00ff00;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

.close-button {
    background: none;
    border: 2px solid #00ff00;
    color: #00ff00;
    font-size: 20px;
    font-weight: bold;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    transition: all 0.3s ease;
}

.close-button:hover {
    background: #00ff00;
    color: #001100;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

.structures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.structure-card {
    background: #1a2332;
    border: 2px solid #00ff00;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #00ff00;
}

.structure-card:hover {
    background: #2a3342;
    border-color: #00ff88;
    box-shadow: 
        inset 0 0 15px rgba(0, 255, 0, 0.3),
        0 0 15px rgba(0, 255, 0, 0.5);
}

.structure-icon {
    font-size: 32px;
    text-align: center;
    margin-bottom: 10px;
}

.structure-name {
    font-size: 16px;
    font-weight: bold;
    color: #00ff00;
    text-align: center;
    margin-bottom: 5px;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.6);
}

.structure-type {
    font-size: 12px;
    color: #88cc88;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.structure-description {
    font-size: 11px;
    color: #cccccc;
    margin-bottom: 15px;
    line-height: 1.3;
    min-height: 40px;
}

.structure-costs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 15px;
    font-size: 11px;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.cost-label {
    color: #88cc88;
    font-weight: bold;
}

.cost-value {
    color: #ffffff;
    font-weight: bold;
}

.build-structure-btn {
    width: 100%;
    background: #003300;
    border: 2px solid #00ff00;
    color: #00ff00;
    padding: 8px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.6);
}

.build-structure-btn:hover {
    background: #00ff00;
    color: #001100;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.8);
}

.build-structure-btn:active {
    transform: translateY(1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .infrastructure-island-structures {
        flex-direction: column;
        align-items: center;
    }
    
    .infrastructure-structure-card {
        width: 90%;
        max-width: 300px;
    }
    
    .build-structure-popup {
        grid-template-columns: 1fr;
    }
    
    .scoreboard-table {
        font-size: 14px;
    }
    
    .scoreboard-table th,
    .scoreboard-table td {
        padding: 8px 4px;
    }
}

/* Construction Queue Styles */
.infrastructure-construction-queue {
    margin: 20px 0;
    border-top: 2px solid #34495e;
    padding-top: 15px;
}

.infrastructure-construction-queue h4 {
    color: #f1c40f;
    margin-bottom: 15px;
    font-size: 16px;
    text-shadow: 0 0 10px #f1c40f;
}

.construction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

/* Under-construction card styling with subtle amber diagonal bars */
#infrastructure-panel .construction-card,
.infrastructure-structure-card.construction-card {
    position: relative !important;
    overflow: hidden !important;
    border: 2px solid rgba(241, 196, 15, 0.7) !important;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.4) !important;
    animation: constructionPulse 3s ease-in-out infinite !important;
    min-height: 380px !important;
    padding-bottom: 90px !important;
}

#infrastructure-panel .construction-card::before,
.infrastructure-structure-card.construction-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: repeating-linear-gradient(
        45deg,
        rgba(241, 196, 15, 0.3) 0px,
        rgba(241, 196, 15, 0.3) 8px,
        transparent 8px,
        transparent 16px
    ) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
}

#infrastructure-panel .construction-card *,
.infrastructure-structure-card.construction-card * {
    position: relative !important;
    z-index: 2 !important;
}

/* Hide upgrade buttons and sections for construction cards */
#infrastructure-panel .construction-card .upgrade-preview-section,
.infrastructure-structure-card.construction-card .upgrade-preview-section {
    display: none !important;
}

.construction-progress-overlay {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.92) !important;
    border: 1px solid #f1c40f !important;
    color: #ffffff !important;
    text-align: center !important;
    z-index: 10 !important;
    margin: 0 !important;
}

.construction-progress-overlay .construction-timer {
    margin-bottom: 4px !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 13px !important;
    color: #f1c40f !important;
    line-height: 1.2 !important;
    text-shadow: 0 0 6px rgba(241, 196, 15, 0.4) !important;
}

.construction-progress-overlay .construction-timer .turns-remaining {
    font-size: 16px !important;
    color: #f1c40f !important;
}

.construction-progress-overlay .construction-progress-bar {
    height: 8px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(241, 196, 15, 0.3) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
}

.construction-progress-overlay .construction-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #f1c40f 0%, #f39c12 50%, #e67e22 100%) !important;
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.4) !important;
    border-radius: 4px !important;
}

.construction-progress-overlay .construction-percent {
    font-size: 11px !important;
    color: #cccccc !important;
    line-height: 1.2 !important;
}

@keyframes constructionPulse {
    0%, 100% { 
        box-shadow: 0 0 8px rgba(241, 196, 15, 0.2);
        border-color: rgba(241, 196, 15, 0.4);
    }
    50% { 
        box-shadow: 0 0 12px rgba(241, 196, 15, 0.3);
        border-color: rgba(241, 196, 15, 0.6);
    }
}

.construction-timer {
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #f1c40f;
}

.turns-remaining {
    color: #f1c40f;
    font-size: 18px;
}

.construction-progress {
    margin: 10px 0;
}

.construction-progress-bar {
    background: rgba(0, 0, 0, 0.3);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #34495e;
}

.construction-progress-fill {
    background: linear-gradient(90deg, #27ae60, #2ecc71);
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 3px;
}

/* Bottom progress bar for construction cards - no longer used, consolidated into overlay */

.btn-cancel-construction {
    background: #e74c3c !important;
    color: white !important;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 8px;
}

.btn-cancel-construction:hover {
    background: #c0392b !important;
    transform: translateY(-1px);
}

/* Upgrade Benefits Styling */
.upgrade-benefits {
    margin-bottom: 10px;
    padding: 8px;
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid #4CAF50;
    border-radius: 4px;
}

.benefit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
    color: #4CAF50;
}

.benefit-item:last-child {
    margin-bottom: 0;
}

.benefit-label {
    font-weight: bold;
    color: #00ff00;
}

.benefit-value {
    color: #4CAF50;
    font-family: 'Courier New', monospace;
}

.benefit-item.production .benefit-label::before {
    content: "🏭 ";
}

.benefit-item.extraction .benefit-label::before {
    content: "⛏️ ";
}

.benefit-item.capacity .benefit-label::before {
    content: "📦 ";
}

/* Enhanced upgrade section styling */
.upgrade-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #4CAF50;
}

.upgrade-cost {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.resource-cost {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    border: 1px solid transparent;
}

.resource-cost.affordable {
    background: rgba(0, 255, 0, 0.2);
    border-color: #4CAF50;
    color: #00ff00;
}

.resource-cost.unaffordable {
    background: rgba(255, 0, 0, 0.2);
    border-color: #ff4444;
    color: #ff6666;
}

.upgrade-time {
    font-size: 11px;
    color: #4CAF50;
    margin-bottom: 8px;
    font-family: 'Courier New', monospace;
}

.btn-upgrade {
    width: 100%;
    padding: 7px 12px;
    background: transparent !important;
    color: #4CAF50 !important;
    border: 1px solid #338833;
    border-radius: 2px;
    cursor: pointer;
    font-weight: bold;
    font-size: 11px;
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-upgrade:hover {
    background: #4CAF50 !important;
    color: #001100 !important;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.35);
    transform: none;
}

.btn-upgrade.disabled,
.btn-upgrade:disabled {
    background: transparent !important;
    color: #333 !important;
    border-color: #222;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.max-level-message {
    text-align: center;
    color: #887700;
    font-style: normal;
    font-size: 9px;
    padding: 4px 6px;
    border: 1px solid rgba(136, 119, 0, 0.3);
    border-radius: 2px;
    background: rgba(136, 119, 0, 0.05);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

/* Airfield Card Specific Styles */
.airfield-card {
    border-color: #1a5a8a !important; /* Subdued blue accent for aviation */
    border-top-color: #2288cc !important;
}

.airfield-card:hover {
    border-color: #2299dd !important;
    border-top-color: #33bbff !important;
    box-shadow: 0 0 12px rgba(0, 153, 255, 0.2), inset 0 1px 0 rgba(0, 153, 255, 0.1) !important;
}

.airfield-card .structure-icon {
    color: #00ccff;
    font-size: 20px;
    margin-right: 0;
    filter: drop-shadow(0 0 3px rgba(0, 153, 255, 0.4));
}

/* Compact description for Airfield */
.airfield-card .compact-description {
    margin: 0 !important;
}

.airfield-card .compact-description .stat-description-text {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-style: italic !important;
}

/* Airfield Primary Stats Layout — horizontal rows */
.airfield-primary-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 0;
    padding: 4px 8px;
    border-top: none;
    background: rgba(0, 153, 255, 0.04);
    border: 1px solid rgba(0, 153, 255, 0.12);
    border-left: 2px solid rgba(0, 153, 255, 0.35);
    border-radius: 2px;
}

.airfield-primary-stats.compact {
    margin-top: 0;
    padding: 0;
}

.aircraft-capacity-section, .radar-section {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.aircraft-capacity-section {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

/* Airfield Upgrade Preview Section */
.upgrade-preview-section {
    margin: 4px 0 0 0;
    padding: 4px 8px;
    border-radius: 2px;
    transition: all 0.2s ease;
    text-align: center;
}

.airfield-upgrade-preview.clickable {
    background: rgba(0, 255, 0, 0.05);
    border: 1px solid rgba(0, 255, 0, 0.2);
}

.airfield-upgrade-preview.clickable:hover {
    background: rgba(0, 255, 0, 0.1);
    border-color: rgba(0, 255, 0, 0.4);
    transform: none;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.15);
}

.airfield-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.05);
    border: 1px solid rgba(128, 128, 128, 0.15);
    opacity: 0.5;
}

.upgrade-preview-section.upgrading {
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.4);
}

.upgrade-preview-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.upgrade-icon {
    font-size: 12px;
    margin-right: 4px;
}

.upgrade-text {
    color: #4CAF50 !important;
    font-size: 10px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Upgrade Cost Tooltip */
.upgrade-preview-section {
    position: relative;
}

.upgrade-cost-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #0a1a0a 0%, #000d00 100%);
    color: #00ff00;
    padding: 12px 16px;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.6;
    white-space: nowrap;
    z-index: 1000;
    border: 2px solid #338833;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    margin-bottom: 10px;
    min-width: 320px;
    max-width: 480px;
    text-align: left;
}

.upgrade-cost-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #338833;
}

.upgrade-preview-section:hover .upgrade-cost-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Upgrade tooltip text styling */
.upgrade-cost-tooltip .cost-resource {
    color: #ffff00;
    font-weight: bold;
    font-size: 16px;
}

.upgrade-cost-tooltip .cost-amount {
    color: #ff6600;
    font-weight: bold;
    font-size: 16px;
}

.upgrade-cost-tooltip .cost-label {
    color: #cccccc;
    font-size: 15px;
}

.upgrade-cost-tooltip .resource-sufficient {
    color: #00ff00 !important;
    font-size: 16px;
}

.upgrade-cost-tooltip .resource-insufficient {
    color: #ff3333 !important;
    font-size: 16px;
}

.upgrade-cost-tooltip .player-has {
    color: #888888;
    font-size: 14px;
}

/* Harbor Card Specific Styles */
.harbor-card {
    border-color: #4a9eff !important; /* Navy blue accent for harbor */
}

.harbor-card:hover {
    border-color: #66b3ff !important;
    box-shadow: inset 0 0 15px rgba(74, 158, 255, 0.4), 0 0 15px rgba(74, 158, 255, 0.5) !important;
}

.harbor-card .structure-icon {
    color: #4a9eff;
    font-size: 20px;
    margin-right: 8px;
}

/* Compact description for Harbor */
.harbor-card .compact-description {
    margin: 0 !important;
}

.harbor-card .compact-description .stat-description-text {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-style: italic !important;
}

/* Harbor Primary Stats Layout */
.harbor-primary-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
    padding: 4px 8px;
    border-top: none;
    background: rgba(74, 158, 255, 0.04);
    border: 1px solid rgba(74, 158, 255, 0.12);
    border-left: 2px solid rgba(74, 158, 255, 0.35);
    border-radius: 2px;
}

.harbor-primary-stats.compact {
    margin-top: 0;
    padding: 4px 8px;
}

/* Fleet Berths Section */
.fleet-berths-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fleet-berths-section .roster-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fleet-berths-section .capacity-icon {
    font-size: 12px;
    color: #6bbbff;
}

.fleet-berths-section .roster-label {
    color: #6bbbff;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fleet-berths-section .roster-count {
    color: #88ccff;
    font-size: 12px;
    font-weight: bold;
}

.fleet-roster {
    padding-left: 8px;
}

.fleet-roster .roster-entry {
    font-size: 11px;
    color: #a0d8ff;
    padding: 1px 0;
    font-family: 'Courier New', monospace;
}

.fleet-roster .roster-entry .roster-name {
    color: #88ccff;
    font-weight: bold;
}

.fleet-roster .roster-entry .roster-units {
    color: #6b9fc4;
    font-size: 10px;
}

.fleet-roster .roster-empty {
    font-size: 10px;
    color: #556677;
    font-style: italic;
}

/* Harbor Stats Row (Ship Capacity + Storage) */
.harbor-stats-row {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-top: 4px;
    border-top: 1px solid rgba(74, 158, 255, 0.1);
}

.harbor-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.harbor-stat-item .capacity-icon,
.harbor-stat-item .storage-icon {
    font-size: 12px;
    color: #6bbbff;
}

.harbor-stat-item .capacity-label,
.harbor-stat-item .storage-label {
    color: #6bbbff;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.harbor-stat-item .capacity-value,
.harbor-stat-item .storage-value {
    color: #88ccff;
    font-size: 12px;
    font-weight: bold;
}



/* Harbor Upgrade Preview Section - Match Airfield exactly */
.harbor-card .infrastructure-card-actions {
    margin-top: auto;
    padding: 0;
}

.harbor-card .upgrade-preview-section {
    margin: 4px 0 0 0;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.harbor-upgrade-preview.clickable {
    background: rgba(0, 255, 0, 0.08);
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.harbor-upgrade-preview.clickable:hover {
    background: rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.25);
}

.harbor-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.harbor-card .upgrade-text {
    color: #00ff00;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.upgrade-preview-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px solid rgba(0, 255, 0, 0.15);
}

.upgrade-preview-details .upgrade-detail {
    font-size: 10px;
    color: #88ccaa;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.3px;
}

/* Ensure Airfield has matching container styles */
.airfield-card .infrastructure-card-actions {
    margin-top: auto;
    padding: 0;
}

.airfield-card .upgrade-preview-section {
    width: 100%;
    box-sizing: border-box;
}

/* Industrial Complex Card Specific Styles */
.industrial-complex-card {
    border-color: #ff6b35 !important; /* Orange-red for manufacturing */
}

.industrial-complex-card:hover {
    border-color: #ff8c69 !important;
    box-shadow: inset 0 0 15px rgba(255, 107, 53, 0.4), 0 0 15px rgba(255, 107, 53, 0.5) !important;
}

.industrial-complex-card .structure-icon {
    color: #ff6b35;
    font-size: 20px;
    margin-right: 8px;
}

.industrial-complex-primary-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    padding: 4px 8px;
    border-top: none;
    background: rgba(255, 107, 53, 0.04);
    border: 1px solid rgba(255, 107, 53, 0.12);
    border-left: 2px solid rgba(255, 107, 53, 0.35);
    border-radius: 2px;
}

/* ── Uniform Structure Resource Info (Production/Extraction) ── */
.structure-resource-info {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-family: 'Courier New', monospace;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.structure-resource-info .resource-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    padding: 5px 8px;
    line-height: 1.5;
    border-radius: 2px;
}

.structure-resource-info .resource-line.current {
    color: #44ff44;
    font-size: 12px;
    background: rgba(255, 170, 50, 0.05);
    border: 1px solid rgba(255, 170, 50, 0.15);
    border-left: 2px solid rgba(255, 170, 50, 0.40);
}

.structure-resource-info .resource-line.current.consumes {
    color: #ff9999;
    background: rgba(255, 100, 100, 0.04);
    border: 1px solid rgba(255, 100, 100, 0.12);
    border-left: 2px solid rgba(255, 100, 100, 0.35);
}

.structure-resource-info .resource-line.current.produces {
    color: #44ff44;
    background: rgba(0, 255, 100, 0.04);
    border: 1px solid rgba(0, 255, 100, 0.12);
    border-left: 2px solid rgba(0, 255, 100, 0.35);
}

.structure-resource-info .resource-line.upgrade {
    color: #55aa55;
    font-size: 11px;
    border-top: none;
    padding-top: 5px;
    margin-top: 0;
    background: rgba(100, 180, 255, 0.04);
    border: 1px solid rgba(100, 180, 255, 0.12);
    border-left: 2px solid rgba(100, 180, 255, 0.30);
}

.structure-resource-info .resource-line-label {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    min-width: 0;
    color: inherit;
    opacity: 0.85;
}

.structure-resource-info .resource-line.current .resource-line-label {
    color: #33dd33;
}

.structure-resource-info .resource-line.upgrade .resource-line-label {
    color: #66bb66;
}

.structure-resource-info .resource-line-value {
    flex: 1;
    color: inherit;
}

.structure-resource-info .res-gain {
    color: #44ff44;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
}

.structure-resource-info .res-cost {
    color: #ff6b6b;
    font-weight: bold;
}

.structure-resource-info .res-arrow {
    color: #669966;
    font-weight: bold;
}

.structure-resource-info .res-delta {
    font-weight: bold;
    margin-left: 2px;
}

.structure-resource-info .res-delta.delta-positive {
    color: #00ff00;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
}

.structure-resource-info .res-delta.delta-negative {
    color: #ff6b6b;
}

.structure-resource-info .res-input-delta {
    color: #ff9966;
    font-size: 10px;
    opacity: 0.8;
}
/* ── End Uniform Structure Resource Info ── */

/* ── Extraction Rate Control ── */
.extraction-control {
    margin: 4px 0 2px;
    padding: 5px 8px;
    background: linear-gradient(180deg, rgba(0, 25, 50, 0.5) 0%, rgba(0, 15, 35, 0.6) 100%);
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-left: 2px solid rgba(0, 180, 255, 0.4);
    border-radius: 3px;
}
.extraction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}
.extraction-label {
    font-size: 9px;
    font-weight: bold;
    color: #5599cc;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.extraction-efficiency {
    font-size: 10px;
    font-weight: bold;
}
.extraction-efficiency.eff-good { color: #00ff88; }
.extraction-efficiency.eff-strain { color: #ffcc00; }
.extraction-efficiency.eff-critical { color: #ff4444; }
.eff-warning-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 2px;
    background: rgba(255, 68, 68, 0.2);
    color: #ff6666;
    margin-left: 4px;
    font-weight: bold;
}
.eff-warning-badge.eff-strain-badge {
    background: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
}
.extraction-rate-selector {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
}
.ext-rate-btn {
    flex: 1;
    padding: 4px 0;
    font-size: 10px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    border: 1px solid rgba(100, 140, 180, 0.25);
    border-radius: 2px;
    background: rgba(10, 20, 40, 0.7);
    color: #667788;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    letter-spacing: 0.5px;
}
.ext-rate-btn:hover {
    background: rgba(0, 80, 160, 0.25);
    border-color: rgba(0, 180, 255, 0.5);
    color: #aabbcc;
}
.ext-rate-btn.active {
    border-color: #00aaff;
    color: #ffffff;
    text-shadow: 0 0 6px rgba(0, 170, 255, 0.5);
}
.ext-rate-btn.active.rate-low {
    background: rgba(0, 200, 100, 0.2);
    border-color: #00cc66;
    text-shadow: 0 0 6px rgba(0, 200, 100, 0.4);
}
.ext-rate-btn.active.rate-normal {
    background: rgba(0, 140, 255, 0.2);
    border-color: #00aaff;
    text-shadow: 0 0 6px rgba(0, 140, 255, 0.4);
}
.ext-rate-btn.active.rate-high {
    background: rgba(255, 100, 0, 0.2);
    border-color: #ff8844;
    text-shadow: 0 0 6px rgba(255, 100, 0, 0.4);
}
.extraction-feedback {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    margin-bottom: 0;
}
.extraction-output {
    font-size: 11px;
    color: #bbccdd;
}
.extraction-output strong {
    color: #ffffff;
    font-size: 12px;
}
.extraction-trend {
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.extraction-trend.trend-stable {
    color: #88aacc;
    background: rgba(100, 140, 200, 0.12);
    border: 1px solid rgba(100, 140, 200, 0.2);
}
.extraction-trend.trend-up {
    color: #00ff88;
    background: rgba(0, 200, 100, 0.12);
    border: 1px solid rgba(0, 200, 100, 0.2);
}
.extraction-trend.trend-down {
    color: #ff8844;
    background: rgba(255, 100, 0, 0.12);
    border: 1px solid rgba(255, 100, 0, 0.2);
}
.extraction-tooltip-hint {
    font-size: 8px;
    color: #556677;
    cursor: help;
    text-align: center;
    margin-top: 1px;
    letter-spacing: 0.3px;
}
/* ── End Extraction Rate Control ── */

.production-capacity-section {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.production-capacity-section .capacity-header {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.production-capacity-section .capacity-icon {
    font-size: 12px;
    margin-right: 3px;
    color: #ff8c55;
}

.production-capacity-section .capacity-label {
    color: #ff8c55 !important;
    font-size: 10px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.production-capacity-section .capacity-value {
    color: #ffaa88 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    margin: 0;
}

.production-capacity-section .capacity-types {
    display: none;
}

/* Industrial Complex Upgrade Preview Section - Match Airfield/Harbor */
.industrial-complex-card .infrastructure-card-actions {
    margin-top: auto;
    padding: 0;
}

.industrial-complex-card .upgrade-preview-section {
    margin: 8px 0 0 0;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.industrial-complex-upgrade-preview.clickable {
    background: rgba(0, 255, 0, 0.08);
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.industrial-complex-upgrade-preview.clickable:hover {
    background: rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.25);
}

.industrial-complex-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.industrial-complex-card .upgrade-text {
    color: #00ff00;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Aviation Plant Card Specific Styles - Match Airfield Design */
.aviation-plant-card {
    border-color: #00bfff !important; /* Sky blue for aviation */
}

.aviation-plant-card:hover {
    border-color: #1e90ff !important;
    box-shadow: inset 0 0 15px rgba(0, 191, 255, 0.4), 0 0 15px rgba(0, 191, 255, 0.5) !important;
}

.aviation-plant-card .structure-icon {
    color: #00bfff;
    font-size: 20px;
    margin-right: 8px;
}

.aviation-plant-card .stat-description-text {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-style: italic !important;
}

.aviation-plant-primary-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    padding: 4px 8px;
    border-top: none;
    background: rgba(85, 221, 255, 0.04);
    border: 1px solid rgba(85, 221, 255, 0.12);
    border-left: 2px solid rgba(85, 221, 255, 0.35);
    border-radius: 2px;
}

.aircraft-production-section {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.aircraft-production-section .capacity-header {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.aircraft-production-section .capacity-icon {
    font-size: 12px;
    margin-right: 3px;
    color: #00bfff;
}

.aircraft-production-section .capacity-label {
    color: #33ccff !important;
    font-size: 10px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aircraft-production-section .capacity-value {
    color: #55ddff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    margin: 0;
}

.aircraft-production-section .capacity-types {
    display: none;
}

/* Aviation Plant Upgrade Preview Section - Match Airfield */
.aviation-plant-card .infrastructure-card-actions {
    margin-top: auto;
    padding: 0;
}

.aviation-plant-card .upgrade-preview-section {
    margin: 8px 0 0 0;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.aviation-plant-upgrade-preview.clickable {
    background: rgba(0, 255, 0, 0.08);
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.aviation-plant-upgrade-preview.clickable:hover {
    background: rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.25);
}

.aviation-plant-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.aviation-plant-card .upgrade-text {
    color: #00ff00;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

/* Electronics Factory Card Specific Styles */
.electronics-factory-upgrade-preview.clickable {
    background: rgba(0, 255, 0, 0.08);
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.electronics-factory-upgrade-preview.clickable:hover {
    background: rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.25);
}

.electronics-factory-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.electronics-factory-card .upgrade-text {
    color: #00ff00;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

/* Food Processing Plant Card Specific Styles */
.food-processing-plant-card {
    border-color: #ffd700 !important; /* Gold for food/agriculture */
}

.food-processing-plant-card:hover {
    border-color: #ffed4e !important;
    box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.4), 0 0 15px rgba(255, 215, 0, 0.5) !important;
}

.food-processing-plant-card .structure-icon {
    color: #ffd700;
    font-size: 20px;
    margin-right: 8px;
}

.food-processing-plant-upgrade-preview.clickable {
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.food-processing-plant-upgrade-preview.clickable:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.25);
}

.food-processing-plant-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.food-processing-plant-card .upgrade-text {
    color: #ffd700;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

/* Food Processing Plant — Population Status Indicator */
.food-population-status {
    margin: 2px 0 0;
    padding: 4px 8px;
    border-radius: 2px;
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-left: 2px solid rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.04);
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.food-population-status .food-status-header {
    display: none;
}

.food-population-status .food-status-label {
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ccaa00;
}

.food-population-status .food-status-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.food-population-status .food-pop-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-bottom: 0;
    line-height: 1.5;
}

.food-population-status .food-pop-prefix,
.food-population-status .food-pop-suffix {
    font-size: 11px;
    color: #88aa88;
}

.food-population-status .food-pop-icon {
    font-size: 12px;
    opacity: 0.9;
}

.food-population-status .food-pop-value {
    font-size: 12px;
    font-weight: bold;
    color: #f0f0f0;
    text-shadow: none;
}

.food-population-status .food-pct-badge {
    font-size: 11px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

.food-pct-badge.food-surplus {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.3);
}

.food-pct-badge.food-adequate {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.3);
}

.food-pct-badge.food-warning {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

.food-pct-badge.food-critical {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    text-shadow: 0 0 6px rgba(255, 68, 68, 0.3);
    animation: food-critical-pulse 1.5s ease-in-out infinite;
}

@keyframes food-critical-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.food-population-status .food-status-detail {
    display: none;
}

.food-population-status .food-detail-text {
    font-size: 9px;
    color: #888888;
    letter-spacing: 0.3px;
}

.food-population-status .food-starvation-warning {
    margin-top: 4px;
    padding: 3px 6px;
    border-top: 1px solid rgba(255, 68, 68, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.food-population-status .starvation-icon {
    font-size: 11px;
}

.food-population-status .starvation-text {
    font-size: 10px;
    color: #ff6b6b;
    font-weight: bold;
    letter-spacing: 0.3px;
}

.food-population-status.food-warning .food-starvation-warning .starvation-text {
    color: #ffa500;
}

/* Material Mine Card Specific Styles */
.material-mine-card {
    border-color: #cd853f !important; /* Sandy brown for mining */
}

.material-mine-card:hover {
    border-color: #daa520 !important;
    box-shadow: inset 0 0 15px rgba(205, 133, 63, 0.4), 0 0 15px rgba(205, 133, 63, 0.5) !important;
}

.material-mine-card .structure-icon {
    color: #cd853f;
    font-size: 20px;
    margin-right: 8px;
}

.material-mine-upgrade-preview.clickable {
    background: rgba(205, 133, 63, 0.08);
    border: 1px solid rgba(205, 133, 63, 0.3);
}

.material-mine-upgrade-preview.clickable:hover {
    background: rgba(205, 133, 63, 0.15);
    border-color: rgba(205, 133, 63, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(205, 133, 63, 0.25);
}

.material-mine-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.material-mine-card .upgrade-text {
    color: #cd853f;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

/* Radar Installation Card Specific Styles */
.radar-installation-card {
    border-color: #00ffff !important; /* Cyan for radar/tech */
}

.radar-installation-card:hover {
    border-color: #33ffff !important;
    box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.4), 0 0 15px rgba(0, 255, 255, 0.5) !important;
}

.radar-installation-card .structure-icon {
    color: #00ffff;
    font-size: 20px;
    margin-right: 8px;
}

.radar-installation-upgrade-preview.clickable {
    background: rgba(0, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 255, 0.3);
}

.radar-installation-upgrade-preview.clickable:hover {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.25);
}

.radar-installation-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.radar-installation-card .upgrade-text {
    color: #00ffff;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

/* Rare Materials Extraction Site Card Specific Styles */
.rare-materials-extraction-site-card {
    border-color: #ff00ff !important; /* Magenta for rare materials */
}

.rare-materials-extraction-site-card:hover {
    border-color: #ff33ff !important;
    box-shadow: inset 0 0 15px rgba(255, 0, 255, 0.4), 0 0 15px rgba(255, 0, 255, 0.5) !important;
}

.rare-materials-extraction-site-card .structure-icon {
    color: #ff00ff;
    font-size: 20px;
    margin-right: 8px;
}

.rare-materials-extraction-site-upgrade-preview.clickable {
    background: rgba(255, 0, 255, 0.08);
    border: 1px solid rgba(255, 0, 255, 0.3);
}

.rare-materials-extraction-site-upgrade-preview.clickable:hover {
    background: rgba(255, 0, 255, 0.15);
    border-color: rgba(255, 0, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 0, 255, 0.25);
}

.rare-materials-extraction-site-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.rare-materials-extraction-site-card .upgrade-text {
    color: #ff00ff;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

/* Fuel Refinery Card Specific Styles */
.fuel-refinery-card {
    border-color: #ffa500 !important; /* Orange for fuel/petroleum */
}

.fuel-refinery-card:hover {
    border-color: #ffb84d !important;
    box-shadow: inset 0 0 15px rgba(255, 165, 0, 0.4), 0 0 15px rgba(255, 165, 0, 0.5) !important;
}

.fuel-refinery-card .structure-icon {
    color: #ffa500;
    font-size: 20px;
    margin-right: 8px;
}

.fuel-refinery-primary-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 0;
    padding: 4px 8px;
    border-top: none;
    background: rgba(255, 165, 0, 0.04);
    border: 1px solid rgba(255, 165, 0, 0.12);
    border-left: 2px solid rgba(255, 165, 0, 0.35);
    border-radius: 2px;
}

.fuel-refinery-primary-stats.compact {
    gap: 8px;
}

.production-capacity-section {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.conversion-efficiency-section {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.conversion-efficiency-section .conversion-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.conversion-efficiency-section .conversion-icon {
    font-size: 10px;
    margin-right: 3px;
    color: #ffa500;
}

.conversion-efficiency-section .conversion-label {
    color: #ffa500 !important;
    font-size: 8px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.conversion-efficiency-section .conversion-rate {
    color: #ffb84d !important;
    font-size: 12px !important;
    font-weight: bold !important;
    margin: 2px 0;
}

.conversion-efficiency-section .conversion-types {
    font-size: 7px;
    color: #888888;
    margin-top: 2px;
}

/* Fuel Refinery Upgrade Preview Section - Match Other Structure Cards */
.fuel-refinery-card .infrastructure-card-actions {
    margin-top: auto;
    padding: 0;
}

.fuel-refinery-card .upgrade-preview-section {
    margin: 8px 0 0 0;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.fuel-refinery-upgrade-preview.clickable {
    background: rgba(0, 255, 0, 0.08);
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.fuel-refinery-upgrade-preview.clickable:hover {
    background: rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.25);
}

.fuel-refinery-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.fuel-refinery-card .upgrade-text {
    color: #00ff00;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Fortress Upgrade Button Styles */
.fortress-upgrade-preview.clickable {
    background: rgba(0, 255, 0, 0.08);
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.fortress-upgrade-preview.clickable:hover {
    background: rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.25);
}

.fortress-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.fortress-card .upgrade-text {
    color: #00ff00;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Shipyard Card Specific Styles */
.shipyard-card {
    border-color: #4caf50 !important; /* Green matching airfield */
}

.shipyard-card:hover {
    border-color: #66bb6a !important;
    box-shadow: inset 0 0 15px rgba(76, 175, 80, 0.4), 0 0 15px rgba(76, 175, 80, 0.5) !important;
}

.shipyard-card .structure-icon {
    color: #4caf50;
    font-size: 20px;
    margin-right: 8px;
}

.shipyard-primary-stats {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    padding: 4px 8px;
    background: rgba(200, 200, 255, 0.04);
    border: 1px solid rgba(200, 200, 255, 0.12);
    border-left: 2px solid rgba(200, 200, 255, 0.35);
    border-radius: 2px;
}

.ship-production-section {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.production-header {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 0;
}

.production-icon {
    font-size: 12px;
    color: #4caf50;
}

.production-label {
    font-size: 9px;
    color: #66cc66;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.production-value {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 0;
}

.production-types {
    display: none;
}

/* Shipyard Upgrade Preview Section - Match Airfield */
.shipyard-upgrade-preview.clickable {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.shipyard-upgrade-preview.clickable:hover {
    background: rgba(76, 175, 80, 0.15);
    border-color: rgba(76, 175, 80, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
}

.shipyard-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.shipyard-card .upgrade-preview-section {
    margin: 8px 0 0 0;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-align: center;
}

.shipyard-upgrade-preview .upgrade-text {
    color: #00ccff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

.ship-capacity-section,
.production-capability-section {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.ship-capacity-section .stat-label,
.production-capability-section .stat-label {
    color: #4caf50 !important;
    font-size: 9px !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

.production-capability {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.capability-label {
    font-size: 8px;
    color: #4caf50;
    font-weight: bold;
    text-transform: uppercase;
}

.capability-value {
    font-size: 10px;
    color: #fff;
    font-weight: bold;
}

.ship-types-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    font-size: 7px;
    color: #b3b3b3;
}

.ship-type {
    white-space: nowrap;
}

/* Radar Installation Card Specific Styles */
.radar-card {
    border-color: #9c27b0 !important; /* Purple for radar/detection */
}

.radar-card:hover {
    border-color: #ab47bc !important;
    box-shadow: inset 0 0 15px rgba(156, 39, 176, 0.4), 0 0 15px rgba(156, 39, 176, 0.5) !important;
}

.radar-card .structure-icon {
    color: #9c27b0;
    font-size: 20px;
    margin-right: 8px;
}

.radar-primary-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    padding: 4px 8px;
    border-top: none;
    background: rgba(204, 119, 221, 0.04);
    border: 1px solid rgba(204, 119, 221, 0.12);
    border-left: 2px solid rgba(204, 119, 221, 0.35);
    border-radius: 2px;
}

.radar-range-section {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.radar-range-section .stat-label {
    color: #bb55cc !important;
    font-size: 10px !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

.range-display {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 0;
}

.current-range {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.range-value {
    color: #cc77dd !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.range-unit {
    color: #888888 !important;
    font-size: 8px !important;
    margin-left: 2px;
}

/* Fortress Card Specific Styles */
.fortress-card {
    border-color: #795548 !important; /* Brown for fortress/defense */
}

.fortress-card:hover {
    border-color: #8d6e63 !important;
    box-shadow: inset 0 0 15px rgba(121, 85, 72, 0.4), 0 0 15px rgba(121, 85, 72, 0.5) !important;
}

.fortress-card .structure-icon {
    color: #795548;
    font-size: 20px;
    margin-right: 8px;
}

.fortress-primary-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    padding: 4px 8px;
    border-top: none;
    background: rgba(170, 136, 119, 0.04);
    border: 1px solid rgba(170, 136, 119, 0.12);
    border-left: 2px solid rgba(170, 136, 119, 0.35);
    border-radius: 2px;
}

.defense-section {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* Combat Stats Section */
.combat-stats-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: -2px;
}

.combat-type {
    background: rgba(121, 85, 72, 0.1);
    border-radius: 4px;
    padding: 3px;
    border: 1px solid rgba(121, 85, 72, 0.2);
}

.combat-header {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
}

.combat-icon {
    font-size: 12px;
    margin-right: 4px;
    width: 14px;
    text-align: center;
}

.combat-label {
    font-size: 8px;
    font-weight: bold;
    color: #795548;
    letter-spacing: 0.3px;
}

.combat-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-top: 1px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-label {
    font-size: 7px;
    color: #666;
    font-weight: bold;
    margin-bottom: 0px;
    line-height: 1;
}

.stat-value {
    font-size: 9px;
    font-weight: bold;
    color: #333;
    line-height: 1.1;
}

.surface-combat {
    border-left: 3px solid #2196F3; /* Blue for naval */
}

.air-combat {
    border-left: 3px solid #FF9800; /* Orange for air */
}

/* Upgrade Preview for Combat */
.upgrade-combat-preview {
    margin-top: 2px;
    font-size: 8px;
}

.combat-preview-row {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
    padding: 1px 0;
    line-height: 1.2;
}

.combat-type-icon {
    font-size: 10px;
    margin-right: 4px;
    width: 12px;
    text-align: center;
}

.combat-improvements {
    color: #4CAF50;
    font-weight: bold;
    flex: 1;
}

.defense-section .stat-label {
    color: #795548 !important;
    font-size: 9px !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

.defense-display {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 0;
}

.current-defense {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.defense-value {
    color: #aa8877 !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.defense-unit {
    color: #888888 !important;
    font-size: 8px !important;
    margin-left: 2px;
}

/* Aircraft Capacity Section */
.capacity-header, .radar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.capacity-icon, .radar-icon {
    font-size: 12px;
    margin-right: 3px;
}

.capacity-label, .radar-label {
    color: #00ccff !important;
    font-size: 9px !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

.capacity-value, .radar-value {
    color: #00ccff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 1;
    margin-bottom: 2px;
}

.capacity-types {
    color: #888 !important;
    font-size: 8px !important;
    font-style: italic;
    line-height: 1.1;
}

/* Airfield Benefits */
.airfield-benefits {
    background: rgba(0, 153, 255, 0.1) !important;
    border: 1px solid #0099ff !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 3px;
    text-align: center;
}

.airfield-benefits .benefit-label {
    color: #00ccff !important;
    font-size: 12px !important;
    text-transform: uppercase;
}

.airfield-benefits .benefit-value {
    color: #00ff00 !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

/* Clean upgrade section styling */
.upgrade-section {
    padding-top: 10px;
}

.upgrade-section .btn-upgrade {
    width: 100% !important;
    padding: 10px !important;
    font-size: 13px !important;
    margin-top: 8px !important;
}

/* Steel Mill Upgrade Preview Styling */
.steel-mill-upgrade-preview.clickable {
    background: rgba(0, 255, 0, 0.08);
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.steel-mill-upgrade-preview.clickable:hover {
    background: rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.25);
}

.steel-mill-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.steel-mill-card .upgrade-preview-section {
    margin: 4px 0 0 0; /* Reduced top margin to move button up */
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-align: center;
}

.steel-mill-upgrade-preview .upgrade-text {
    color: #00ccff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

/* Supply Depot Upgrade Preview Styling */
.supply-depot-upgrade-preview.clickable {
    background: rgba(0, 255, 0, 0.08);
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.supply-depot-upgrade-preview.clickable:hover {
    background: rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.25);
}

.supply-depot-upgrade-preview.disabled {
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    opacity: 0.6;
}

.supply-depot-card .upgrade-preview-section {
    margin: 8px 0 0 0;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-align: center;
}

.supply-depot-upgrade-preview .upgrade-text {
    color: #00ccff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

/* Fortress Defense Display and Tooltip */
.fortress-defense-display {
    margin: 10px 0;
    text-align: center;
}

.defense-text-simple {
    display: inline-block;
    color: #4CAF50 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 6px 12px;
    border: 1px solid #4CAF50;
    border-radius: 3px;
    background: rgba(0, 255, 0, 0.1);
}

.defense-text-with-tooltip {
    position: relative;
    display: inline-block;
    color: #4CAF50 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid #4CAF50;
    border-radius: 3px;
    background: rgba(0, 255, 0, 0.1);
    transition: all 0.2s ease;
}

.defense-text-with-tooltip:hover {
    background: rgba(0, 255, 0, 0.2);
    border-color: #00ff00;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

/* Fortress Defense Tooltip */
.fortress-defense-tooltip {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: #001100 !important;
    border: 2px solid #4CAF50 !important;
    border-radius: 4px;
    padding: 15px;
    z-index: 9999;
    white-space: nowrap;
    min-width: 320px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 255, 0, 0.3);
}

.defense-text-with-tooltip:hover .fortress-defense-tooltip {
    display: none !important;
    visibility: hidden;
    opacity: 0;
}

.fortress-defense-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #4CAF50;
}

.defense-tooltip-content .combat-stats-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.defense-tooltip-content .combat-type {
    background: rgba(0, 255, 0, 0.05);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 3px;
    padding: 10px;
}

.defense-tooltip-content .combat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #00ff00 !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

.defense-tooltip-content .combat-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
}

.defense-tooltip-content .stat-item {
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 2px;
    padding: 4px;
}

.defense-tooltip-content .stat-label {
    display: block;
    font-size: 10px !important;
    color: #cccccc !important;
    margin-bottom: 2px;
}

.defense-tooltip-content .stat-value {
    display: block;
    font-size: 12px !important;
    color: #4CAF50 !important;
    font-weight: bold !important;
}

/* Enhanced Fortress Tooltip Styles */
.defense-label {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: bold !important;
    color: #4CAF50 !important;
    cursor: help !important;
}

.fortress-tooltip-header {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(0, 255, 0, 0.1)) !important;
    border: 1px solid rgba(76, 175, 80, 0.4) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.tooltip-title {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #00ff00 !important;
}

.tooltip-level {
    font-size: 12px !important;
    color: #cccccc !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 2px 6px !important;
    border-radius: 2px !important;
}

.combat-separator {
    height: 1px !important;
    background: linear-gradient(to right, transparent, rgba(76, 175, 80, 0.5), transparent) !important;
    margin: 8px 0 !important;
}

.defense-tooltip-content .combat-subtitle {
    font-size: 10px !important;
    color: #aaaaaa !important;
    font-style: italic !important;
    margin-left: 4px !important;
}

.naval-defense {
    border-left: 3px solid #2196F3 !important;
}

.air-defense {
    border-left: 3px solid #FF9800 !important;
}

.defense-tooltip-content .combat-header {
    flex-wrap: wrap !important;
}

.defense-tooltip-content .combat-label {
    flex: 1 !important;
}

.fortress-defense-tooltip {
    min-width: 360px !important;
    max-width: 400px !important;
}

.defense-tooltip-content .stat-label {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ============================================================
   POLISHED CARD NORMALIZATION — Overrides per-card-type styles
   for a cohesive, refined terminal look across ALL card types.
   ============================================================ */

/* Subdue all card-type border colors - less saturated, use top-border accent */
.harbor-card {
    border-color: #1a4a7a !important;
    border-top-color: #4a9eff !important;
}
.industrial-complex-card {
    border-color: #5a2a10 !important;
    border-top-color: #ff6b35 !important;
}
.aviation-plant-card {
    border-color: #0a4a6a !important;
    border-top-color: #00bfff !important;
}
.food-processing-plant-card {
    border-color: #5a4a00 !important;
    border-top-color: #ccaa00 !important;
}
.material-mine-card {
    border-color: #4a3520 !important;
    border-top-color: #cd853f !important;
}
.radar-installation-card {
    border-color: #0a4a4a !important;
    border-top-color: #00aaaa !important;
}
.rare-materials-extraction-site-card {
    border-color: #4a0a4a !important;
    border-top-color: #cc44cc !important;
}
.fuel-refinery-card {
    border-color: #4a3000 !important;
    border-top-color: #cc8800 !important;
}
.shipyard-card {
    border-color: #2a5a2a !important;
    border-top-color: #4caf50 !important;
}
.radar-card {
    border-color: #3a1a4a !important;
    border-top-color: #9c27b0 !important;
}
.fortress-card {
    border-color: #3a2520 !important;
    border-top-color: #795548 !important;
}
.steel-mill-card {
    border-color: #2a2a3a !important;
    border-top-color: #7788aa !important;
}
.supply-depot-card {
    border-color: #2a4a2a !important;
    border-top-color: #4caf50 !important;
}

/* Normalize ALL card-type hover glow — subtle outer glow + inset top highlight */
.harbor-card:hover {
    border-color: #4a9eff !important;
    border-top-color: #66b3ff !important;
    box-shadow: 0 0 12px rgba(74, 158, 255, 0.2), inset 0 1px 0 rgba(74, 158, 255, 0.1) !important;
}
.industrial-complex-card:hover {
    border-color: #ff6b35 !important;
    border-top-color: #ff8c69 !important;
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.2), inset 0 1px 0 rgba(255, 107, 53, 0.1) !important;
}
.aviation-plant-card:hover {
    border-color: #00bfff !important;
    border-top-color: #33ddff !important;
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.2), inset 0 1px 0 rgba(0, 191, 255, 0.1) !important;
}
.food-processing-plant-card:hover {
    border-color: #ccaa00 !important;
    border-top-color: #ffdd33 !important;
    box-shadow: 0 0 12px rgba(204, 170, 0, 0.2), inset 0 1px 0 rgba(204, 170, 0, 0.1) !important;
}
.material-mine-card:hover {
    border-color: #cd853f !important;
    border-top-color: #daa520 !important;
    box-shadow: 0 0 12px rgba(205, 133, 63, 0.2), inset 0 1px 0 rgba(205, 133, 63, 0.1) !important;
}
.radar-installation-card:hover {
    border-color: #00aaaa !important;
    border-top-color: #33cccc !important;
    box-shadow: 0 0 12px rgba(0, 170, 170, 0.2), inset 0 1px 0 rgba(0, 170, 170, 0.1) !important;
}
.rare-materials-extraction-site-card:hover {
    border-color: #cc44cc !important;
    border-top-color: #dd66dd !important;
    box-shadow: 0 0 12px rgba(204, 68, 204, 0.2), inset 0 1px 0 rgba(204, 68, 204, 0.1) !important;
}
.fuel-refinery-card:hover {
    border-color: #cc8800 !important;
    border-top-color: #ffaa33 !important;
    box-shadow: 0 0 12px rgba(204, 136, 0, 0.2), inset 0 1px 0 rgba(204, 136, 0, 0.1) !important;
}
.shipyard-card:hover {
    border-color: #4caf50 !important;
    border-top-color: #66cc6a !important;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.2), inset 0 1px 0 rgba(76, 175, 80, 0.1) !important;
}
.radar-card:hover {
    border-color: #9c27b0 !important;
    border-top-color: #bb44cc !important;
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.2), inset 0 1px 0 rgba(156, 39, 176, 0.1) !important;
}
.fortress-card:hover {
    border-color: #795548 !important;
    border-top-color: #8d6e63 !important;
    box-shadow: 0 0 12px rgba(121, 85, 72, 0.2), inset 0 1px 0 rgba(121, 85, 72, 0.1) !important;
}

/* Normalize ALL card-type structure icons — no margin-right, consistent glow */
.harbor-card .structure-icon,
.industrial-complex-card .structure-icon,
.aviation-plant-card .structure-icon,
.food-processing-plant-card .structure-icon,
.material-mine-card .structure-icon,
.radar-installation-card .structure-icon,
.rare-materials-extraction-site-card .structure-icon,
.fuel-refinery-card .structure-icon,
.shipyard-card .structure-icon,
.radar-card .structure-icon,
.fortress-card .structure-icon,
.steel-mill-card .structure-icon,
.supply-depot-card .structure-icon {
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 0 3px currentColor) !important;
    opacity: 0.9;
}

/* Compact description text styling for all card types */
.harbor-card .compact-description .stat-description-text,
.industrial-complex-card .compact-description .stat-description-text,
.aviation-plant-card .stat-description-text,
.food-processing-plant-card .stat-description-text,
.material-mine-card .stat-description-text,
.radar-installation-card .stat-description-text,
.rare-materials-extraction-site-card .stat-description-text,
.fuel-refinery-card .stat-description-text,
.shipyard-card .stat-description-text,
.radar-card .stat-description-text,
.fortress-card .stat-description-text,
.steel-mill-card .stat-description-text,
.supply-depot-card .stat-description-text {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.72rem !important;
    font-style: italic !important;
}

/* Normalize ALL upgrade preview sections — match output box sizing */
.harbor-card .upgrade-preview-section,
.industrial-complex-card .upgrade-preview-section,
.aviation-plant-card .upgrade-preview-section,
.fuel-refinery-card .upgrade-preview-section,
.shipyard-card .upgrade-preview-section,
.steel-mill-card .upgrade-preview-section,
.supply-depot-card .upgrade-preview-section,
.airfield-card .upgrade-preview-section,
.material-mine-card .upgrade-preview-section,
.radar-installation-card .upgrade-preview-section,
.food-processing-plant-card .upgrade-preview-section,
.rare-materials-extraction-site-card .upgrade-preview-section,
.fortress-card .upgrade-preview-section,
.upgrade-preview-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 4px 0 0 0 !important;
    padding: 4px 8px !important;
    background: rgba(0, 255, 0, 0.04) !important;
    border: 1px solid rgba(0, 255, 0, 0.15) !important;
    border-left: 2px solid rgba(0, 255, 0, 0.4) !important;
    border-radius: 2px !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
}

/* Normalize ALL upgrade preview clickable — accent hover */
[class*="-upgrade-preview"].clickable {
    background: rgba(0, 255, 0, 0.04) !important;
    border: 1px solid rgba(0, 255, 0, 0.15) !important;
    border-left: 2px solid rgba(0, 255, 0, 0.4) !important;
    cursor: pointer !important;
}
[class*="-upgrade-preview"].clickable:hover {
    background: rgba(0, 255, 0, 0.1) !important;
    border-color: rgba(0, 255, 0, 0.4) !important;
    border-left: 2px solid rgba(0, 255, 0, 0.6) !important;
    transform: none !important;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.15) !important;
}
[class*="-upgrade-preview"].disabled {
    background: rgba(128, 128, 128, 0.04) !important;
    border: 1px solid rgba(128, 128, 128, 0.15) !important;
    border-left: 2px solid rgba(128, 128, 128, 0.3) !important;
    opacity: 0.5 !important;
}

/* Normalize ALL upgrade text — consistent green terminal color */
.harbor-card .upgrade-text,
.industrial-complex-card .upgrade-text,
.aviation-plant-card .upgrade-text,
.fuel-refinery-card .upgrade-text,
.shipyard-card .upgrade-text,
.shipyard-upgrade-preview .upgrade-text,
.steel-mill-upgrade-preview .upgrade-text,
.supply-depot-upgrade-preview .upgrade-text,
.fortress-card .upgrade-text,
.food-processing-plant-card .upgrade-text,
.material-mine-card .upgrade-text,
.radar-installation-card .upgrade-text,
.rare-materials-extraction-site-card .upgrade-text {
    color: #4CAF50 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
}

/* Normalize ALL card-type primary-stats — inline row layout */
.harbor-primary-stats,
.industrial-complex-primary-stats,
.aviation-plant-primary-stats,
.fuel-refinery-primary-stats,
.shipyard-primary-stats,
.radar-primary-stats,
.fortress-primary-stats {
    border-top: none !important;
    margin-top: 0 !important;
}

/* Normalize card-actions for all card types */
.harbor-card .infrastructure-card-actions,
.industrial-complex-card .infrastructure-card-actions,
.aviation-plant-card .infrastructure-card-actions,
.fuel-refinery-card .infrastructure-card-actions,
.airfield-card .infrastructure-card-actions,
.shipyard-card .infrastructure-card-actions,
.steel-mill-card .infrastructure-card-actions,
.supply-depot-card .infrastructure-card-actions,
.fortress-card .infrastructure-card-actions {
    margin-top: auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* NEC Benefits Grid */
.nec-benefits-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    margin-top: 4px !important;
    padding: 4px 6px !important;
    background: rgba(0, 255, 0, 0.05) !important;
    border: 1px solid rgba(0, 255, 0, 0.15) !important;
}

.nec-benefit-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 10px !important;
    font-family: 'Courier New', monospace !important;
    line-height: 1.3 !important;
}

.nec-benefit-label {
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.nec-benefit-value {
    color: #00ff00 !important;
    font-weight: bold !important;
}

.nec-card .infrastructure-card-actions {
    margin-top: auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.upgrade-preview-detail {
    font-size: 10px !important;
    color: #00ccff !important;
    padding: 2px 0 0 20px !important;
    font-family: 'Courier New', monospace !important;
}

.upgrade-detail-text {
    font-style: italic !important;
}