/* 90's Retro Game Screen Styles */
#game-screen {
    background: #0F1419; /* Dark retro background */
    font-family: 'Courier New', monospace; /* Retro monospace font */
}

/* Retro Teletype Message Bar */
.teletype-bar {
    background: #000000;
    padding: 6px 16px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    overflow: hidden;
    flex-shrink: 0;
}

.teletype-content {
    font-family: 'Courier New', monospace;
    color: #00FF88;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.teletype-content.teletype-scrolling {
    justify-content: flex-start;
}

.teletype-content.teletype-scrolling #teletype-text {
    display: inline-block;
    animation: teletype-scroll var(--scroll-duration, 15s) linear infinite;
    padding-right: 80px;
}

@keyframes teletype-scroll {
    0%, 10% { transform: translateX(0); }
    90%, 100% { transform: translateX(var(--scroll-offset, -50%)); }
}

.teletype-cursor {
    animation: teletype-blink 1s infinite;
    margin-left: 4px;
    color: #00FF88;
}

/* Debug Panel Styles */
.debug-panel {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 450px;
    background: rgba(0, 0, 0, 0.98);
    border: 2px solid #00FF88;
    font-family: 'Courier New', monospace;
    z-index: 2000;
    border-radius: 0;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.debug-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #000000;
    border-bottom: 1px solid #00FF88;
    color: #00FF88;
    font-size: 12px;
    font-weight: bold;
}

.debug-toggle {
    background: transparent;
    border: 1px solid #00FF88;
    color: #00FF88;
    padding: 4px 8px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.debug-toggle:hover {
    background: #00FF88;
    color: #000000;
}

.debug-content {
    max-height: 300px;
    overflow-y: auto;
}

.debug-log {
    padding: 8px;
    font-size: 11px;
    line-height: 1.3;
    color: #00FF88;
    max-height: 250px;
    overflow-y: auto;
}

/* Custom scrollbar for debug log */
.debug-log::-webkit-scrollbar {
    width: 8px;
}

.debug-log::-webkit-scrollbar-track {
    background: #000000;
}

.debug-log::-webkit-scrollbar-thumb {
    background: #00FF88;
    border-radius: 0;
}

.debug-log::-webkit-scrollbar-thumb:hover {
    background: #00CC6A;
}

.debug-log .debug-entry {
    margin-bottom: 4px;
    padding: 2px 4px;
    border-left: 2px solid #004400;
    word-wrap: break-word;
}

.debug-log .debug-entry.error {
    color: #FF6B6B;
    border-left-color: #FF6B6B;
}

.debug-log .debug-entry.warning {
    color: #FFD700;
    border-left-color: #FFD700;
}

.debug-log .debug-entry.info {
    color: #00AAFF;
    border-left-color: #00AAFF;
}

.debug-log .debug-entry.success {
    color: #00FF88;
    border-left-color: #00FF88;
}

.debug-btn {
    background: transparent;
    border: 1px solid #666666;
    color: #666666;
    padding: 4px 8px;
    margin: 8px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.debug-btn:hover {
    border-color: #00FF88;
    color: #00FF88;
}

@keyframes teletype-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.teletype-typing {
    border-right: none;
}

.teletype-typing .teletype-cursor {
    animation: none;
    opacity: 1;
}

.game-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 2px solid #00FF88; /* Bright retro border */
}

.game-header {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #000000;
    border-bottom: 2px solid #00FF88;
    box-shadow: 0 0 10px #00FF88;
    position: relative;
    z-index: 1500;
}

/* Top Navigation Bar — Row 1: Command Bar */
.top-nav-bar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    height: 52px;
    background: #000000;
    border-bottom: 1px solid #222;
}

.game-info-section {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
    flex: 0 0 auto;
}

.game-id-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-id-display #game-id-label {
    color: #666666;
    margin-bottom: 1px;
    font-weight: bold;
}

.game-id-display #game-id-value {
    color: #00FF88;
    font-weight: bold;
    text-shadow: 0 0 3px #00FF88;
    font-size: 0.8rem;
}

.game-title-compact {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 12px;
    font-family: 'Courier New', monospace;
    min-width: 0;
    overflow: hidden;
}

.game-title-compact #game-title {
    color: #00FF88;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 3px #00FF88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
    min-width: 60px;
    flex-shrink: 1;
}

.player-name-badge {
    color: #00DDFF;
    font-size: 0.75rem;
    font-weight: bold;
    background: rgba(0, 221, 255, 0.08);
    padding: 2px 8px;
    border: 1px solid rgba(0, 221, 255, 0.3);
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.turn-indicator {
    color: #FFD700;
    font-size: 0.8rem;
    font-weight: bold;
    background: rgba(255, 215, 0, 0.1);
    padding: 2px 6px;
    border: 1px solid #FFD700;
    border-radius: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Turn Countdown Timer */
.turn-countdown {
    color: #00ffc3;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0, 255, 195, 0.08);
    padding: 2px 8px;
    border: 1px solid rgba(0, 255, 195, 0.35);
    border-radius: 2px;
    margin-left: 6px;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
}
.turn-countdown .countdown-icon { margin-right: 3px; }
.turn-countdown.countdown-urgent {
    color: #FF4444;
    border-color: rgba(255, 68, 68, 0.6);
    background: rgba(255, 68, 68, 0.1);
    animation: countdown-pulse 1s ease-in-out infinite;
}
@keyframes countdown-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Turn Progress Indicator ("X / Y Ready") */
.turn-progress {
    color: #4CAF50;
    font-size: 0.7rem;
    font-weight: bold;
    background: rgba(76, 175, 80, 0.1);
    padding: 2px 7px;
    border: 1px solid rgba(76, 175, 80, 0.35);
    border-radius: 2px;
    margin-left: 6px;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    transition: color 0.3s, border-color 0.3s, text-shadow 0.3s, background 0.3s;
    cursor: default;
}
.turn-progress-all-ready {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.5);
    background: rgba(0, 255, 0, 0.12);
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.4);
}

/* Turn Mode Section in Create Game */
.turn-mode-section .info-icon {
    cursor: help;
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: 4px;
}

/* Custom Turn-Mode Dropdown */
.turn-mode-dropdown {
    position: relative;
    width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    user-select: none;
}
.turn-mode-selected {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #00FF88;
    background: #000000;
    color: #00FF88;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.turn-mode-selected::after {
    content: '▾';
    float: right;
    color: #00FF88;
}
.turn-mode-dropdown.open .turn-mode-selected {
    border-color: #FFD700;
    color: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.turn-mode-dropdown.open .turn-mode-selected::after {
    content: '▴';
    color: #FFD700;
}
.turn-mode-options {
    display: none;
    border: 2px solid #00FF88;
    border-top: none;
    background: #0a0a0a;
}
.turn-mode-dropdown.open .turn-mode-options {
    display: block;
}
.turn-mode-option {
    padding: 0.7rem 0.8rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 255, 136, 0.15);
    transition: background 0.15s ease;
}
.turn-mode-option:last-child {
    border-bottom: none;
}
.turn-mode-option:hover {
    background: rgba(0, 255, 136, 0.12);
}
.turn-mode-option.active {
    background: rgba(0, 255, 136, 0.08);
    border-left: 3px solid #00FF88;
    padding-left: calc(0.8rem - 3px);
}
.turn-mode-option-label {
    display: block;
    color: #00FF88;
    font-weight: bold;
    margin-bottom: 3px;
}
.turn-mode-option:hover .turn-mode-option-label {
    color: #FFD700;
}
.turn-mode-option-tip {
    display: block;
    color: #66AACC;
    font-size: 11px;
    line-height: 1.3;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.2s ease;
}
.turn-mode-option:hover .turn-mode-option-tip {
    opacity: 1;
    max-height: 40px;
}
.turn-pace-preview {
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.15);
    border-radius: 4px;
    padding: 10px 12px;
}
.pace-display {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pace-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}
.pace-label {
    color: #8899aa;
}
.pace-value {
    color: #00FF88;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

/* Status Strip — Row 2: Compact Resource HUD */
/* Status Strip — Row 2: Compact Resource HUD */
.status-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 6px 16px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(0, 255, 150, 0.12);
    border-bottom: 1px solid #222;
    overflow: hidden;
    opacity: 0.85;
    font-size: 13px;
}

/* Subtle grouping: economy | strategic */
.status-strip .resource-item:nth-child(4) {
    margin-right: 10px;
}
.status-strip .resource-item:nth-child(5) {
    margin-left: 10px;
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Courier New', monospace;
    cursor: help;
    position: relative;
    flex-shrink: 0;
    min-width: 58px;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.15s ease;
}

.resource-item:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* Icon = brighter, slightly larger */
.resource-item .resource-icon {
    font-size: 14px;
    opacity: 1;
    filter: brightness(1.1);
    flex-shrink: 0;
}

/* Value = slightly subdued weight */
.resource-item .resource-value {
    color: #e8fdf5;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-shadow: 0 0 2px rgba(0, 255, 136, 0.3);
    min-width: 20px;
    text-align: right;
    cursor: default;
    font-size: 13px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* State coloring — low (<20% capacity) */
.resource-item .resource-value.res-state-low {
    color: #ff6b6b;
}

/* State coloring — medium (20–60% capacity) */
.resource-item .resource-value.res-state-mid {
    color: #ffd166;
}

/* State coloring — healthy (>60% capacity) — default */
.resource-item .resource-value.res-state-healthy {
    color: #e8fdf5;
}

/* State coloring — near cap (>90% capacity) */
.resource-item .resource-value.res-state-capped {
    color: #00ffc3;
    animation: capPulse 1.8s ease-in-out infinite;
}

@keyframes capPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

/* Legacy resource-bar support (keep for other panels) */
.resource-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    flex: 1;
    justify-content: center;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.resource-bar::-webkit-scrollbar { display: none; }

/* Legacy resource-item-compact (used in other panels) */
.resource-item-compact {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 5px;
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.25);
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    transition: all 0.2s ease;
    cursor: help;
    position: relative;
    flex-shrink: 0;
}

.resource-item-compact:hover {
    background: rgba(0, 255, 136, 0.15);
    border-color: rgba(0, 255, 136, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 136, 0.2);
}

.resource-icon {
    font-size: 0.8rem;
    opacity: 0.9;
}

.resource-label {
    color: #888;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.resource-value {
    color: #00FF88;
    font-weight: bold;
    text-shadow: 0 0 2px #00FF88;
    min-width: 20px;
    text-align: right;
    cursor: default;
}

/* Legacy resource state classes (kept for other panels) */
.resource-value.res-pct-low { color: #ff6b6b; text-shadow: 0 0 2px #ff6b6b; }
.resource-value.res-pct-mid { color: #ffc107; text-shadow: 0 0 2px #ffc107; }
.resource-value.res-pct-high { color: #00ff88; text-shadow: 0 0 2px #00ff88; }

.control-section {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn.compact {
    padding: 5px 10px;
    font-size: 0.75rem;
    min-width: auto;
}

/* Navigation Tabs */
.game-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    background: linear-gradient(180deg, #111 0%, #000 100%);
    border-bottom: 1px solid #333;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
}
.game-nav::-webkit-scrollbar { display: none; }

/* ── Contextual Help "?" Button in Nav ───────────────────────── */
.nav-help-btn {
    padding: 2px 8px;
    margin-left: 4px;
    background: transparent;
    border: 1px solid #444;
    border-radius: 50%;
    color: #6a8faa;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    transition: all 0.2s;
    flex-shrink: 0;
    align-self: center;
}
.nav-help-btn:hover {
    color: #00FF88;
    border-color: #00FF88;
    background: rgba(0,255,136,0.08);
}

/* ── Tooltip System (TIP hover) ──────────────────────────────── */
.has-tip {
    position: relative;
    cursor: help;
}
.has-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #0f0;
    padding: 6px 10px;
    border: 1px solid rgba(0,255,0,0.25);
    border-radius: 4px;
    white-space: normal;
    max-width: 220px;
    text-align: center;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    z-index: 9999;
    box-shadow: 0 0 6px rgba(0,255,0,0.4);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.has-tip:hover::after {
    opacity: 1;
}

/* ── Commander Advice Panel ──────────────────────────────────── */
.commander-advice {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 340px;
    background: rgba(0, 0, 0, 0.85);
    color: #0f0;
    border: 1px solid rgba(0, 255, 136, 0.25);
    padding: 14px 16px;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.12);
    font-size: 13px;
    font-family: 'Courier New', monospace;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.commander-advice:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}
.commander-advice.hidden {
    display: none;
}
.commander-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6a8faa;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(106,143,170,0.25);
    padding-bottom: 4px;
}
.commander-header #advisor-icon {
    font-size: 13px;
}
.commander-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.commander-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}
.commander-link {
    cursor: pointer;
    text-decoration: underline;
    color: #6a8faa;
    font-size: 12px;
}
.commander-link:hover {
    color: #00FF88;
}
.commander-actions button {
    background: transparent;
    border: 1px solid rgba(0, 255, 136, 0.25);
    color: #6fbf73;
    padding: 3px 10px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.commander-actions button:hover {
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.5);
}

/* ── Advice Toggle in Nav ────────────────────────────────────── */
.advice-toggle {
    color: #6a8faa;
    font-size: 11px;
    margin-left: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
    user-select: none;
}
.advice-toggle input {
    accent-color: #0f0;
    cursor: pointer;
    margin: 0;
}
.advice-toggle:hover {
    color: #00FF88;
}

.nav-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
    position: relative;
    white-space: nowrap;
}

.nav-btn.active {
    background: rgba(0, 255, 136, 0.1);
    border-top-color: #00FF88;
    color: #00FF88;
    text-shadow: 0 0 3px #00FF88;
}

.nav-btn:hover:not(.active) {
    background: rgba(0, 68, 68, 0.5);
    color: #00FF88;
    border-top-color: rgba(0, 255, 136, 0.5);
}

/* Status Section */
.status-section {
    position: relative;
}

/* Compact teletype-style label indicating the user is the last pending player */
.last-player-label {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    border: 1px solid #FFD700;
    color: #FFD700;
    background: rgba(0, 0, 0, 0.9);
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 0 3px rgba(255,215,0,0.6);
    border-radius: 2px;
    z-index: 100;
}

/* Construction Summary Banner */
.construction-banner {
    background: linear-gradient(90deg, rgba(255, 136, 0, 0.12) 0%, rgba(0, 0, 0, 0.95) 50%, rgba(255, 136, 0, 0.12) 100%);
    border-top: 1px solid rgba(255, 136, 0, 0.3);
    border-bottom: 1px solid rgba(255, 136, 0, 0.3);
    padding: 4px 16px;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    position: relative;
}

.construction-banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
    animation: constructionScroll 30s linear infinite;
    white-space: nowrap;
    width: max-content;
}

.construction-banner-icon {
    font-size: 12px;
    flex-shrink: 0;
}

.construction-banner-text {
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #ff9900;
    text-shadow: 0 0 4px rgba(255, 136, 0, 0.4);
}

.construction-banner-text .cb-separator {
    color: #444;
    margin: 0 10px;
}

.construction-banner-text .cb-item {
    color: #ffaa00;
}

.construction-banner-text .cb-island {
    color: #00ccaa;
}

.construction-banner-text .cb-days {
    color: #66ff66;
}

.construction-banner-text .cb-idle {
    color: #666;
    font-style: italic;
}

@keyframes constructionScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Action Menu Styles */
.action-menu-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.action-section, .info-section {
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 4px;
    padding: 12px;
}

.action-section h4, .info-section h4 {
    margin: 0 0 8px 0;
    color: #00FF88;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.turn-info-display {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

.info-label {
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    color: #00FF88;
    font-weight: bold;
    text-shadow: 0 0 2px #00FF88;
}

/* Resource Tooltip Styles */
.resource-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #00FF88;
    border-radius: 6px;
    padding: 12px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #FFFFFF;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: all 0.2s ease;
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
    backdrop-filter: blur(10px);
    min-width: 200px;
}

.resource-tooltip.show {
    opacity: 1;
    transform: translate(-50%, 8px) scale(1);
}

.tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 255, 136, 0.3);
}

.tooltip-icon {
    font-size: 1.1rem;
}

.tooltip-title {
    color: #00FF88;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 3px #00FF88;
}

.tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.tooltip-label {
    color: #CCCCCC;
    font-size: 0.75rem;
}

.tooltip-current {
    color: #00FF88;
    font-weight: bold;
    text-shadow: 0 0 2px #00FF88;
}

.tooltip-last-gain {
    color: #87CEEB;
    font-weight: bold;
    text-shadow: 0 0 2px #87CEEB;
}

.tooltip-last-gain.negative {
    color: #FF6B6B;
    text-shadow: 0 0 2px #FF6B6B;
}

.game-content {
    flex: 1;
    display: flex;
    flex-direction: row; /* Ensure horizontal layout */
    height: calc(100vh - 120px); /* Adjusted for teletype bar */
}

/* When map is active, hide side panel and expand main content */
.game-content.map-active {
    display: block !important;
}

.game-content.map-active .main-content-area {
    width: 100% !important;
    height: 100% !important;
}

/* Ensure infrastructure mode uses full width */
.game-content.infrastructure-mode {
    flex-direction: row !important;
    display: flex !important;
}

.game-content.infrastructure-mode .main-content-area {
    flex: 1;
    order: 1;
    display: block !important;
    min-width: 400px;
    width: 100% !important;
}

/* Retro Map Panel */
.map-panel {
    flex: 1;
    position: relative;
    background: #0F1419;
    border-right: 2px solid #00FF88;
    border-left: 2px solid #00FF88;
}

.map-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#game-map {
    display: block;
    width: 100%;
    height: 100%;
    background: #0F1419; /* Retro dark background */
    cursor: crosshair;
    z-index: 1;
    border: none; /* Remove any borders */
}

/* ============================================================
   FANCY MAP BORDER FRAME — Old nautical chart style
   ============================================================ */
.map-border-frame {
    display: none; /* Hidden until map-active mode activates it */
    pointer-events: none;
    z-index: 1500; /* Above canvas, below controls */
    /* Outer ornamental border lines */
    border: 3px solid #00FF88;
    box-shadow:
        inset 0 0 0 2px #0F1419,
        inset 0 0 0 4px rgba(0, 255, 136, 0.35),
        inset 0 0 0 6px #0F1419,
        inset 0 0 0 7px rgba(0, 255, 136, 0.15),
        0 0 12px rgba(0, 255, 136, 0.15);
}

/* Ensure every descendant and pseudo-element passes through clicks */
.map-border-frame,
.map-border-frame *,
.map-border-frame *::before,
.map-border-frame *::after,
.map-border-frame::before,
.map-border-frame::after {
    pointer-events: none !important;
}

/* Show border only in full-screen map mode (uses fixed positioning — no parent position:relative needed) */
/* HTML overlay border DISABLED — border is now rendered as Fabric.js canvas objects */
.game-content.map-active .map-border-frame {
    display: none !important;
}

/* ---- Corner ornaments ---- */
.map-corner {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1502;
}

.corner-ornament {
    font-size: 18px;
    color: #00FF88;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.6);
    position: relative;
}

/* Decorative cross-hatch lines around corner ornaments */
.map-corner::before,
.map-corner::after {
    content: '';
    position: absolute;
    background: rgba(0, 255, 136, 0.3);
}

.map-corner::before {
    width: 100%;
    height: 1px;
    top: 50%;
}

.map-corner::after {
    width: 1px;
    height: 100%;
    left: 50%;
}

.map-corner-nw { top: -2px;  left: -2px; }
.map-corner-ne { top: -2px;  right: -2px; }
.map-corner-sw { bottom: -2px; left: -2px; }
.map-corner-se { bottom: -2px; right: -2px; }

/* Small decorative corner filigree via extra pseudo-element on ornament */
.map-corner-nw .corner-ornament::after,
.map-corner-ne .corner-ornament::after,
.map-corner-sw .corner-ornament::after,
.map-corner-se .corner-ornament::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 255, 136, 0.25);
    border-radius: 0;
}

.map-corner-nw .corner-ornament::after { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.map-corner-ne .corner-ornament::after { top: 4px; right: 4px; border-left: none; border-bottom: none; }
.map-corner-sw .corner-ornament::after { bottom: 4px; left: 4px; border-right: none; border-top: none; }
.map-corner-se .corner-ornament::after { bottom: 4px; right: 4px; border-left: none; border-top: none; }

/* ---- Edge bars (position tracks) ---- */
.map-edge {
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 1501;
    background: rgba(0, 0, 0, 0.6);
}

/* Horizontal edges (top / bottom) — taller for visibility */
.map-edge-top,
.map-edge-bottom {
    left: 44px;
    right: 44px;
    height: 32px;
    flex-direction: row;
}

.map-edge-top    { top: 0; border-bottom: 1px solid rgba(0, 255, 136, 0.3); }
.map-edge-bottom { bottom: 0; border-top: 1px solid rgba(0, 255, 136, 0.3); }

/* Vertical edges (left / right) — wider for visibility */
.map-edge-left,
.map-edge-right {
    top: 44px;
    bottom: 44px;
    width: 32px;
    flex-direction: column;
}

.map-edge-left  { left: 0; border-right: 1px solid rgba(0, 255, 136, 0.3); }
.map-edge-right { right: 0; border-left: 1px solid rgba(0, 255, 136, 0.3); }

/* ---- Compass-point labels ---- */
.edge-label {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    color: rgba(0, 255, 136, 0.7);
    text-shadow: 0 0 4px rgba(0, 255, 136, 0.4);
    flex-shrink: 0;
    text-align: center;
    letter-spacing: 1px;
}

.map-edge-top .edge-label,
.map-edge-bottom .edge-label {
    width: 16px;
}

.map-edge-left .edge-label,
.map-edge-right .edge-label {
    height: 16px;
    line-height: 16px;
}

/* ---- Position track (the bar area) ---- */
.map-position-track {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Horizontal tracks */
.map-edge-top .map-position-track,
.map-edge-bottom .map-position-track {
    height: 14px;
    margin: 0 4px;
    border-top: 1px solid rgba(0, 255, 136, 0.25);
    border-bottom: 1px solid rgba(0, 255, 136, 0.25);
    background: rgba(0, 255, 136, 0.03);
}

/* Vertical tracks */
.map-edge-left .map-position-track,
.map-edge-right .map-position-track {
    width: 14px;
    margin: 4px 0;
    border-left: 1px solid rgba(0, 255, 136, 0.25);
    border-right: 1px solid rgba(0, 255, 136, 0.25);
    background: rgba(0, 255, 136, 0.03);
}

/* Center the track within the edge visually */
.map-edge-top .map-position-track { margin-top: 14px; }
.map-edge-bottom .map-position-track { margin-bottom: 14px; }
.map-edge-left .map-position-track { margin-left: 14px; }
.map-edge-right .map-position-track { margin-right: 14px; }

/* ---- Tick marks (rendered by JS, but base style) ---- */
.position-ticks {
    position: absolute;
    inset: 0;
}

.position-ticks .tick {
    position: absolute;
    background: rgba(0, 255, 136, 0.2);
}

/* Horizontal ticks */
.map-edge-top .tick,
.map-edge-bottom .tick {
    width: 1px;
    height: 100%;
}

/* Vertical ticks */
.map-edge-left .tick,
.map-edge-right .tick {
    height: 1px;
    width: 100%;
}

/* Major tick accents */
.position-ticks .tick.major {
    background: rgba(0, 255, 136, 0.5);
}

/* ---- Viewport indicator (glowing bar showing current view) ---- */
.viewport-indicator {
    position: absolute;
    background: rgba(0, 255, 136, 0.35);
    border: 2px solid #00FF88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6), inset 0 0 6px rgba(0, 255, 136, 0.2);
    transition: left 0.12s ease-out, top 0.12s ease-out, width 0.12s ease-out, height 0.12s ease-out;
}

/* Horizontal viewport indicators */
.map-edge-top .viewport-indicator,
.map-edge-bottom .viewport-indicator {
    top: 0;
    height: 100%;
    min-width: 10px;
}

/* Vertical viewport indicators */
.map-edge-left .viewport-indicator,
.map-edge-right .viewport-indicator {
    left: 0;
    width: 100%;
    min-height: 10px;
}

/* Animated glow pulse on the viewport indicator */
@keyframes borderGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(0, 255, 136, 0.6), inset 0 0 6px rgba(0, 255, 136, 0.2); }
    50%      { box-shadow: 0 0 14px rgba(0, 255, 136, 0.9), inset 0 0 8px rgba(0, 255, 136, 0.4); }
}

.viewport-indicator {
    animation: borderGlow 3s ease-in-out infinite;
}

/* ---- Coordinate readout (bottom-left) ---- */
.map-coord-readout {
    position: absolute;
    bottom: 32px;
    left: 32px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(0, 255, 136, 0.4);
    padding: 3px 8px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #00FF88;
    display: flex;
    gap: 6px;
    align-items: center;
    text-shadow: 0 0 4px rgba(0, 255, 136, 0.3);
    z-index: 1502;
}

.map-coord-readout .coord-label {
    color: rgba(0, 255, 136, 0.5);
    font-size: 8px;
    letter-spacing: 1px;
}

.map-coord-readout .coord-value {
    color: #00FF88;
    font-weight: bold;
}

/* ---- Decorative rope/wave edge texture (CSS pattern on top/bottom edges) ---- */
.map-edge-top::before,
.map-edge-bottom::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        rgba(0, 255, 136, 0.3) 0px,
        rgba(0, 255, 136, 0.3) 4px,
        transparent 4px,
        transparent 8px
    );
}

.map-edge-top::before { bottom: 0; }
.map-edge-bottom::before { top: 0; }

.map-edge-left::before,
.map-edge-right::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: repeating-linear-gradient(
        180deg,
        rgba(0, 255, 136, 0.3) 0px,
        rgba(0, 255, 136, 0.3) 4px,
        transparent 4px,
        transparent 8px
    );
}

.map-edge-left::before { right: 0; }
.map-edge-right::before { left: 0; }

/* Scanline overlay on the border for CRT feel */
.map-border-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 136, 0.015) 2px,
        rgba(0, 255, 136, 0.015) 4px
    );
    pointer-events: none;
    z-index: 1503;
}

/* Full screen mode for map when map-active */
.game-content.map-active #game-map {
    position: fixed;
    top: 60px; /* Below header */
    left: 0;
    width: 100vw !important;
    height: calc(100vh - 120px) !important; /* Full viewport minus header/teletype */
    z-index: 1000;
}

/* CRITICAL FIX: Ensure upper-canvas is on top of lower-canvas for Fabric.js events */
.game-content.map-active .canvas-container .upper-canvas {
    z-index: 1001 !important; /* Must be above lower-canvas */
    pointer-events: auto !important;
}

.game-content.map-active .canvas-container .lower-canvas {
    z-index: 1000; /* Below upper-canvas */
}

.map-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.map-controls button {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0, 255, 136, 0.4);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.8);
    color: #00FF88;
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.map-controls button:hover {
    background: rgba(0, 255, 136, 0.12);
    border-color: #00FF88;
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.25);
}

.map-controls button.active {
    background: rgba(0, 255, 136, 0.15);
    border-color: #00FF88;
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.3);
}

.map-controls button.active:hover {
    background: rgba(0, 255, 136, 0.22);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* Sonar button — uses same green system, no blue */
.map-controls button#map-toggle-sonar.active {
    background: rgba(0, 255, 136, 0.15);
    color: #00ffc3;
    border-color: #00ffc3;
    box-shadow: 0 0 6px rgba(0, 255, 195, 0.3);
}

.map-controls button#map-toggle-sonar.active:hover {
    background: rgba(0, 255, 195, 0.22);
    box-shadow: 0 0 8px rgba(0, 255, 195, 0.4);
}

/* Retro Selected Unit Info */
.selected-unit-info {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: #000000;
    border: 2px solid #FFD700;
    border-radius: 0;
    padding: 1rem;
    min-width: 250px;
    backdrop-filter: blur(10px);
}

.selected-unit-info h3 {
    margin-bottom: 1rem;
    color: #4facfe;
}

.unit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.panel-content {
    display: none;
    padding: 1.5rem;
    height: 100%;
}

/* Map panel — border frame will be re-enabled later */
#map-panel.panel-content {
    padding: 0;
}

.panel-content.active {
    display: block;
    height: 100%;
    min-height: 500px;
}

/* Ensure infrastructure panel is always visible in infrastructure mode */
.game-content.infrastructure-mode #infrastructure-panel {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* CRITICAL: Hide infrastructure panel when Arsenal is active */
.game-content.arsenal-mode #infrastructure-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure Arsenal/build panel is visible and scrollable in Arsenal mode */
.game-content.arsenal-mode #build-panel {
    display: block !important;
    position: fixed !important;
    top: 90px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 100 !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-behavior: smooth !important;
}

/* Ensure upgrade options are immediately visible */
.game-content.infrastructure-mode #infrastructure-panel .upgrade-options-section {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 1rem;
}

/* Style the available infrastructure actions in the side panel */
.game-content.infrastructure-mode #infrastructure-panel .upgrade-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Main panel content for the main area */
.main-panel-content {
    display: none;
    padding: 1.5rem;
    height: 100%;
    width: 100%;
}

.main-panel-content.active {
    display: block !important;
    flex: 1 !important;
    min-width: 600px !important;
    max-width: none !important;
    width: auto !important;
    height: 100% !important;
}

.main-content-area {
    width: 100%;
    height: 100%;
    position: relative;
    order: 1; /* Place on the left side */
}

/* Ensure map panel content fills the area */
#map-main-content {
    width: 100%;
    height: 100%;
    position: relative;
}

.panel-content h3 {
    margin-bottom: 1.5rem;
    color: #00FF88;
    font-size: 1.1rem;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid #00FF88;
    padding-bottom: 0.5rem;
    text-shadow: 0 0 5px #00FF88;
}

/* Retro Resource Display */
.resource-display {
    background: #001122;
    border: 2px solid #00FF88;
    border-radius: 0;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.resource-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    color: #FFD700;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.resource-label {
    color: #FFFFFF;
}

.resource-item span:last-child {
    color: #00FF88;
    font-weight: bold;
}

/* ============================================
   INFRASTRUCTURE STYLES
   ============================================ */

/* Built Infrastructure Section (in main area) */
.built-infrastructure-section {
    background: transparent !important; /* Remove different colored background */
    border: none !important; /* Remove ugly border */
    border-radius: 0;
    padding: 1rem; /* Reduce padding */
    margin-bottom: 0; /* Remove margin */
    display: none; /* Hide by default when empty */
    visibility: visible !important;
    /* Remove internal scrolling - let parent handle it */
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    width: 100%;
}

.built-infrastructure-section.has-infrastructure {
    display: block !important;
}

.built-infrastructure-section h3 {
    margin: 0 0 1rem 0;
    color: #00FF88;
    font-size: 1.2rem;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid #00FF88;
    padding-bottom: 0.5rem;
    text-shadow: 0 0 5px #00FF88;
}

.infrastructure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    align-items: flex-start; /* let children shrink to content width */
}

.built-infrastructure-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
    align-items: stretch !important;
    padding: 0 !important;
}

.infrastructure-card {
    background: #001122;
    border: 2px solid #00FF88;
    border-radius: 0;
    padding: 0.75rem;
    transition: all 0.2s ease;
    font-family: 'Courier New', monospace;
    margin-bottom: 0.5rem;
}

.infrastructure-card:hover {
    background: #002244;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    border-color: #FFD700;
}

.infrastructure-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 255, 136, 0.3);
    padding-bottom: 0.3rem;
}

.infrastructure-card-title {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.infrastructure-level-badge {
    background: #FFD700;
    color: #000000;
    padding: 0.2rem 0.6rem;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: bold;
    border: 1px solid #FFD700;
}

.infrastructure-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.infrastructure-stats {
    margin-bottom: 0.75rem;
}

.infrastructure-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    padding: 2px 0;
}

.infrastructure-stat.primary {
    font-weight: bold;
    color: #00FF88;
    border-bottom: 1px solid rgba(0, 255, 136, 0.3);
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    font-size: 1rem;
}

.infrastructure-stat .stat-icon {
    margin-right: 6px;
    font-size: 1em;
    opacity: 0.9;
}

.infrastructure-stat span:first-child {
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
}

.infrastructure-description {
    display: none;
}

.infrastructure-stat-value {
    color: #00FF88;
    font-weight: bold;
}

.infrastructure-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #00FF88;
    font-size: 0.9rem;
}

.status-operational {
    color: #00FF88;
    font-weight: bold;
}

.status-building {
    color: #FFD700;
    font-weight: bold;
}

.status-damaged {
    color: #FF4444;
    font-weight: bold;
}

/* Upgrade Options Section (in sidebar) */
.upgrade-options-section {
    margin-top: 1.5rem;
}

.upgrade-options-section h4 {
    margin: 0 0 1rem 0;
    color: #FFD700;
    font-size: 1rem;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #FFD700;
    padding-bottom: 0.5rem;
}

.upgrade-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100px;
    width: 100%;
}

.upgrade-options-section {
    margin-top: 1rem;
    padding: 0.5rem;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid #00FF88;
    min-height: 200px;
    flex: 1;
}

.upgrade-options-section h4 {
    color: #00FF88;
    margin-bottom: 1rem;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #00FF88;
    padding-bottom: 0.5rem;
}

.upgrade-card {
    background: #001122;
    border: 1px solid #FFD700;
    border-radius: 0;
    padding: 1rem;
    transition: all 0.2s ease;
    font-family: 'Courier New', monospace;
}

.upgrade-card:hover {
    background: #002244;
    border-color: #00FF88;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.upgrade-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.upgrade-card-title {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.upgrade-cost {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: normal;
    margin-bottom: 0.5rem;
}

.upgrade-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.upgrade-button {
    width: 100%;
    background: #00FF88;
    color: #000000;
    border: 2px solid #00FF88;
    border-radius: 0;
    padding: 0.6rem 1rem;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upgrade-button:hover {
    background: #000000;
    color: #00FF88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.upgrade-button:disabled {
    background: #444444;
    color: #888888;
    border-color: #444444;
    cursor: not-allowed;
    box-shadow: none;
}

.upgrade-button:disabled:hover {
    background: #444444;
    color: #888888;
    box-shadow: none;
}

/* Infrastructure List (legacy, can be removed if not used) */
.infrastructure-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Infrastructure Panel Layout (Side Panel) */
#infrastructure-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-y: auto; /* Allow scrolling instead of hidden */
}

#infrastructure-panel .built-infrastructure-section {
    flex: 1;
    overflow-y: auto;
    border: none; /* Remove border for side panel */
    padding: 0;
    margin-bottom: 1rem;
    display: block !important; /* Always show, even when empty */
    min-height: 200px; /* Ensure minimum height */
    width: 100%;
}

#infrastructure-panel .built-infrastructure-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 0.5rem; /* Add some padding for the scrollbar */
    width: 100%;
    min-height: fit-content;
    /* Force dimensions */
    min-width: 300px;
    flex: 1;
}

#infrastructure-panel .infrastructure-card {
    min-width: unset; /* Remove min-width constraint */
    width: 100%; /* Full width of the side panel */
}

/* Force vertical layout for infrastructure panel SIDEBAR ONLY (not main content) */
#infrastructure-panel.panel-content .island-structures {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    min-height: fit-content;
}

#infrastructure-panel.panel-content .island-structures .infrastructure-card {
    width: 100%;
    min-width: 280px;
    min-height: 180px;
}

/* Style for the no structures message */
.no-structures, .test-message {
    color: #00FF88;
    text-align: center;
    padding: 2rem;
    font-family: 'Courier New', monospace;
    background: #001122;
    border: 1px solid #00FF88;
    border-radius: 4px;
    margin: 1rem 0;
}

/* Make the upgrade options section scrollable too if needed */
#infrastructure-panel .upgrade-options-section {
    flex-shrink: 0; /* Don't shrink the upgrade options */
    max-height: 300px;
    overflow-y: auto;
}

/* Keep main content area visible for infrastructure cards */
.game-content:has(#infrastructure-panel.active) .main-content-area {
    /* Show main content area for infrastructure cards */
    display: block !important;
}

/* Fallback for browsers that don't support :has() - use a specific class */
.game-content.infrastructure-mode .main-content-area {
    /* Show main content area for infrastructure cards */
    display: block !important;
    flex: 1 !important;
    min-width: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    order: 1 !important;
    padding: 0 !important;
}

/* Ensure built infrastructure section in main area is visible */
.game-content.infrastructure-mode #infrastructure-main-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

/* Style the built infrastructure grid in main content area */
.game-content.infrastructure-mode #built-infrastructure-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100%;
}

.infrastructure-item {
    background: #001122;
    border: 1px solid #00FF88;
    border-radius: 0;
    padding: 1rem;
    transition: all 0.2s ease;
}

.infrastructure-item:hover {
    background: #002244;
    box-shadow: 0 0 5px #00FF88;
}

.infrastructure-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.infrastructure-name {
    font-weight: 600;
    color: white;
}

.infrastructure-level {
    background: #4facfe;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.upgrade-btn {
    background: linear-gradient(45deg, #00b894, #00a085);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.upgrade-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 184, 148, 0.3);
}

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

/* Build Panel */
.build-categories {
    display: flex;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.category-btn {
    flex: 1;
    padding: 0.75rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-btn.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.build-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.build-item {
    /* Generic style; will be overridden in main content for retro look */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.build-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

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

.build-name {
    font-weight: 600;
    color: white;
}

.build-cost {
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}
.build-cost.missing { background: #e74c3c; color: #fff; }
.build-cost.ok { background: #2ecc71; }

.build-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.build-btn {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.build-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3);
}

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

/* Affordable state highlight */
.build-btn.can-afford {
    outline: 1px solid #44d86e;
    box-shadow: 0 0 8px rgba(68, 216, 110, 0.3);
}

/* Build page: compact, uniform tiles matching Infrastructure visuals */
#build-main-content .build-main-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Home forces (Fleet + Air Wing) side-by-side */
.home-forces.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.home-fleet, .home-airwing {
    background: #000000;
    border: 2px solid #00FF88;
    padding: 0.5rem;
}

.home-fleet-title {
    color: #00FF88;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.fleet-list {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 2px;
}
.fleet-row { display: contents; }
.fleet-row-name { color: #DDDDDD; font-size: 0.8rem; }
.fleet-row-count { color: #FFD700; font-size: 0.8rem; text-align: right; }

.fleet-empty { color: #AAAAAA; font-size: 0.8rem; font-style: italic; }
.fleet-loading { color: #AAAAAA; font-size: 0.8rem; display: flex; gap: 6px; align-items: center; }
.ow-spinner {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid rgba(0,255,136,0.3);
    border-top-color: #00FF88;
    animation: owspin 0.9s linear infinite;
}
@keyframes owspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Make build tiles uniform width/height within each island row */
#build-main-content .island-structures .build-item {
    flex: 0 0 300px;
    width: 300px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 150px; /* compact */
    background: #000000;
    border: 2px solid #00FF88;
    border-radius: 0;
    padding: 0.75rem;
    color: #DDDDDD;
    font-family: 'Courier New', monospace;
}

#build-main-content .build-header {
    margin-bottom: 0.4rem;
}

#build-main-content .build-name {
    color: #00FF88;
    font-size: 0.95rem;
}

#build-main-content .build-cost {
    font-size: 0.75rem;
}
#build-main-content .build-cost.missing { background: rgba(255, 69, 0, 0.85); color: #ffffff; }
#build-main-content .build-cost.ok { background: rgba(0, 255, 136, 0.85); color: #00150c; }

#build-main-content .build-description,
#build-main-content .infrastructure-stat {
    font-size: 0.8rem;
}

/* Retro button styling to match Infrastructure upgrade buttons */
#build-main-content .build-btn {
    background: #003322;
    border: 1px solid #00FF88;
    color: #00FF88;
    padding: 0.35rem 0.7rem;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto; /* push to bottom for uniform height */
}

#build-main-content .build-btn:hover:not([disabled]) {
    background: #00FF88;
    color: #000000;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

#build-main-content .build-btn:disabled {
    background: #333333;
    border-color: #666666;
    color: #666666;
}

/* Build log */
.build-log-section { margin-top: 1rem; }
.build-log .build-log-item {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.15);
}

/* Marketplace Panel */
.marketplace-main-area {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.marketplace-section {
    margin-bottom: 2rem;
}

.marketplace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}

.marketplace-title {
    color: #FFD700;
    font-weight: 600;
    font-size: 1.1rem;
}

.marketplace-credits {
    color: #FFD700;
    font-weight: bold;
}

.trade-offers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.trade-offer {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

.trade-offer:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #FFD700;
}

.trade-offer.available {
    border-color: #00b894;
}

.trade-offer.unavailable {
    opacity: 0.6;
    cursor: not-allowed;
}

.trade-item-name {
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
}

.trade-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.research-cost {
    color: #4facfe;
    font-size: 0.9rem;
}

/* Communications Panel */
.chat-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.message-list {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    overflow-y: auto;
    max-height: 400px;
}

.message {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
}

.message.own {
    background: rgba(79, 172, 254, 0.2);
    margin-left: 2rem;
}

.message.diplomatic {
    background: rgba(241, 196, 15, 0.2);
    border-left: 3px solid #f1c40f;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

.message-sender {
    font-weight: 600;
    color: #4facfe;
}

.message-time {
    color: rgba(255, 255, 255, 0.6);
}

.message-content {
    color: white;
}

.message-input {
    display: flex;
    gap: 0.5rem;
}

.message-input select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    color: white;
    padding: 0.5rem;
}

.message-input input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    color: white;
    padding: 0.5rem;
}

.message-input input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Scoreboard Panel */
.player-list {
    margin-bottom: 2rem;
}

.player-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.player-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.nation-name {
    font-weight: 600;
    color: white;
    font-size: 0.9rem;
}

.player-name {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
}

.nation-flag {
    width: 35px;
    height: 24px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}

.nation-flag.usa { background: linear-gradient(45deg, #ff0000, #ffffff, #0000ff); }
.nation-flag.uk { background: linear-gradient(45deg, #ff0000, #ffffff, #0000ff); }
.nation-flag.japan { background: linear-gradient(45deg, #ffffff, #ff0000); }
.nation-flag.germany { background: linear-gradient(45deg, #000000, #ff0000, #ffff00); }

.player-status {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.player-status.online {
    background: #00b894;
    color: white;
}

.player-status.turn-complete {
    background: #4facfe;
    color: white;
}

.player-status.waiting {
    background: #f39c12;
    color: white;
}

.game-stats {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: rgba(255, 255, 255, 0.8);
}

.stat-value {
    color: #4facfe;
    font-weight: 600;
}

/* Combat Modal */
.combat-details {
    padding: 2rem;
}

.combat-summary {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.combat-participants {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.participant {
    text-align: center;
    flex: 1;
}

.participant h4 {
    color: #4facfe;
    margin-bottom: 0.5rem;
}

.vs {
    align-self: center;
    font-size: 2rem;
    color: #e74c3c;
    font-weight: bold;
}

.combat-results {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem;
}

.damage-dealt {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

/* Responsive Design for New Header */
@media (max-width: 1400px) {
    .status-strip {
        gap: 12px;
    }
    .resource-item .resource-value {
        font-size: 12px;
    }
}

@media (max-width: 1200px) {
    .top-nav-bar {
        gap: 6px 8px;
        padding: 6px 12px;
        height: 48px;
    }
    
    .status-strip {
        gap: 10px;
        padding: 4px 10px;
        height: 36px;
    }
    
    .control-section {
        gap: 6px;
    }
}

@media (max-width: 968px) {
    .game-header {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    
    .top-nav-bar {
        padding: 6px 12px;
        min-height: 48px;
    }
    
    .game-info-section {
        gap: 12px;
    }
    
    .status-strip {
        gap: 8px;
        padding: 3px 8px;
        height: 34px;
    }
    
    .resource-item .resource-icon {
        font-size: 12px;
    }
    
    .resource-item .resource-value {
        font-size: 11px;
        min-width: 16px;
    }
    
    .btn.compact {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    .game-nav {
        padding: 0 12px;
    }
    
    .nav-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .teletype-content {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    
    .game-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .game-content {
        flex-direction: column;
    }
    
    .selected-unit-info {
        position: static;
        margin: 1rem;
    }
}

@media (max-width: 768px) {
    .top-nav-bar {
        gap: 4px 6px;
        padding: 4px 8px;
        min-height: auto;
    }
    
    .game-info-section {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
    
    .status-strip {
        gap: 6px;
        padding: 3px 6px;
        height: 30px;
    }
    
    .resource-item {
        min-width: 48px;
    }
    
    .resource-item .resource-value {
        font-size: 11px;
    }
    
    .control-section {
        order: 2;
        flex-shrink: 0;
        gap: 4px;
    }
    
    .game-nav {
        padding: 0 8px;
    }
    
    .nav-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
    
    /* Tooltip adjustments for mobile */
    .resource-tooltip {
        position: fixed;
        font-size: 0.7rem;
        padding: 8px;
        min-width: 160px;
        max-width: 90vw;
    }
    
    .tooltip-row {
        padding: 1px 0;
    }
    
    .tooltip-label {
        font-size: 0.65rem;
    }

    .game-controls {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .message-input {
        flex-direction: column;
    }
    
    .player-item {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

/* AI Turn Status Styles */
.ai-status-container {
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(74, 144, 226, 0.6);
    padding: 8px 16px;
    margin: 0;
    backdrop-filter: blur(5px);
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.ai-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.ai-status-title {
    color: #4A90E2;
    font-weight: bold;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
}

.ai-progress-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-progress-bar {
    width: 100px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.ai-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4A90E2, #63B8FF);
    border-radius: 3px;
    transition: width 0.5s ease;
    width: 0%;
}

.ai-progress-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
    font-weight: 500;
    font-family: 'Courier New', monospace;
    min-width: 100px;
}

.ai-status-details {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    font-family: 'Courier New', monospace;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-status-details::before {
    content: "⚡";
    animation: pulse 1.5s infinite;
}

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

/* Animation for AI processing */
.ai-processing {
    animation: aiProcessing 2s infinite;
}

@keyframes aiProcessing {
    0%, 100% { 
        background: rgba(0, 0, 0, 0.4);
        border-color: rgba(74, 144, 226, 0.6);
    }
    50% { 
        background: rgba(74, 144, 226, 0.1);
        border-color: rgba(74, 144, 226, 0.9);
    }
}

/* Map Panel Styles */
.map-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Removed conflicting #game-map rule - consolidated above */

#game-map:active {
    cursor: grabbing;
}

.map-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    pointer-events: none; /* Let clicks pass through to canvas */
    z-index: 1600; /* Above map canvas but below modals (10500) */
}

/* Only make interactive elements clickable, not the entire container */
.map-overlay button,
.map-overlay input,
.map-overlay select,
.map-overlay a {
    pointer-events: auto;
}

.map-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    padding: 0.5rem;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}

.map-controls .btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    min-width: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.map-controls .btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.map-status {
    background: rgba(0, 0, 0, 0.7);
    padding: 0.5rem;
    border-radius: 6px;
    backdrop-filter: blur(5px);
    min-width: 120px;
}

.status-item {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

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



.scale-mark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 1px 4px;
    border-radius: 2px;
}

.status-on {
    color: #00FF88;
    font-weight: bold;
}

.status-off {
    color: #FF4444;
    font-weight: bold;
}

.map-legend {
    background: #000000;
    border: 2px solid #00FF88;
    border-radius: 0;
    padding: 1rem;
}

.map-legend h4 {
    margin: 0 0 0.5rem 0;
    color: #00FF88;
    font-size: 1rem;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
    color: #FFFFFF;
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
}

.legend-item kbd {
    background: #FFD700;
    color: #000000;
    padding: 0.2rem 0.4rem;
    border-radius: 0;
    margin-right: 0.5rem;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    border: 2px solid #FFD700;
}

.map-stats {
    background: #000000;
    border: 2px solid #FFD700;
    border-radius: 0;
    padding: 1rem;
    margin-top: 1rem;
}

.map-stats h4 {
    margin: 0 0 0.5rem 0;
    color: #FFD700;
    font-size: 1rem;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
}

.stat-item {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    display: flex;
    justify-content: space-between;
}

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

/* ============================================
   RETRO LOADING SCREEN STYLES
   ============================================ */

.loading-terminal {
    max-width: 700px;
    margin: 100px auto;
}

.loading-status {
    text-align: center;
    margin-top: 40px;
}

.status-line {
    color: #00FF88;
    font-size: 12px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
}

.loading-bar {
    background: #003322;
    border: 2px solid #00FF88;
    height: 20px;
    margin: 20px auto;
    max-width: 400px;
    position: relative;
    overflow: hidden;
}

.loading-progress {
    background: linear-gradient(90deg, #00FF88, #FFD700);
    height: 100%;
    width: 0%;
    animation: loading-progress 3s ease-in-out infinite;
    position: relative;
}

.loading-progress::after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: loading-shimmer 1.5s ease-in-out infinite;
}

@keyframes loading-progress {
    0% { width: 0%; }
    50% { width: 85%; }
    100% { width: 100%; }
}

@keyframes loading-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================
   RETRO LOGIN & MENU TERMINAL STYLES
   ============================================ */

/* Retro Terminal Container */
.retro-terminal {
    background: #000000;
    border: 3px solid #00FF88;
    border-radius: 0;
    box-shadow: 
        0 0 20px rgba(0, 255, 136, 0.5),
        inset 0 0 20px rgba(0, 255, 136, 0.1);
    font-family: 'Courier New', monospace;
    color: #00FF88;
    max-width: 800px;
    margin: 50px auto;
    min-height: 500px;
    position: relative;
}

.terminal-header {
    background: #003322;
    border-bottom: 2px solid #00FF88;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.terminal-title {
    font-size: 14px;
    font-weight: bold;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.terminal-status {
    font-size: 12px;
    color: #00FF88;
    text-transform: uppercase;
}

.status-user {
    color: #FFD700;
    font-weight: bold;
}

.terminal-content {
    padding: 30px;
}

/* ASCII Logo */
.ascii-logo {
    font-family: 'Courier New', monospace;
    font-size: 8px;
    line-height: 1;
    color: #00FF88;
    text-align: center;
    margin-bottom: 30px;
    white-space: pre;
}

/* Retro Tabs */
.retro-tabs {
    margin-bottom: 30px;
}

.tab-header {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.retro-tab {
    background: transparent;
    border: 2px solid #00FF88;
    color: #00FF88;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 20px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.retro-tab:hover {
    background: #00FF88;
    color: #000000;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.retro-tab.active {
    background: #00FF88;
    color: #000000;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.8);
}

/* Retro Forms */
.retro-form {
    display: none;
}

.retro-form.active {
    display: block;
}

.form-section {
    max-width: 400px;
    margin: 0 auto;
}

.input-line {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    min-height: 30px;
}

.prompt {
    color: #FFD700;
    font-weight: bold;
    font-size: 12px;
    width: 120px;
    text-align: right;
    margin-right: 15px;
}

.retro-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid #00FF88;
    color: #00FF88;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    padding: 5px 0;
    flex: 1;
    outline: none;
    text-transform: uppercase;
}

/* Do NOT transform password fields (and confirm) so case is preserved exactly */
#login-password,
#register-password,
#register-confirm {
    text-transform: none !important;
}

/* Preserve original casing for username fields (allow mixed / lower / upper) */
#login-username,
#register-username {
    text-transform: none !important;
}

.retro-input:focus {
    border-bottom-color: #FFD700;
    box-shadow: 0 2px 5px rgba(255, 215, 0, 0.3);
}

.button-line {
    text-align: center;
    margin-top: 30px;
}

.retro-button {
    background: transparent;
    border: 1px solid rgba(0, 255, 136, 0.4);
    color: #00FF88;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    padding: 10px 24px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s ease;
    min-width: 150px;
    border-radius: 2px;
}

.retro-button:hover {
    background: rgba(0, 255, 136, 0.1);
    color: #00FF88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.retro-button.primary {
    border-color: #00aa66;
    color: #00ff88;
}

.retro-button.primary:hover {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.retro-button-warning {
    border-color: #FF6B6B;
    color: #FF6B6B;
}

.retro-button-warning:hover {
    background: #FF6B6B;
    color: #000000;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
}

/* Terminal Error Messages */
.terminal-error {
    color: #FF6B6B;
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Command Prompt */
.command-prompt {
    margin-bottom: 20px;
    text-align: center;
}

.prompt-line {
    color: #00FF88;
    font-size: 12px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* === Main Menu Two-Column Layout === */
/* ═══════════════════════════════════════════════════════
   MAIN PAGE — Full-viewport layout
   ═══════════════════════════════════════════════════════ */
.main-page {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    font-family: 'Courier New', monospace;
    color: #00FF88;
    overflow: hidden;
}

/* Header bar */
.mp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: #001a0e;
    border-bottom: 2px solid #00FF88;
    flex-shrink: 0;
}
.mp-header-left { display: flex; align-items: center; gap: 16px; }
.mp-logo {
    font-size: 18px;
    font-weight: bold;
    color: #FFD700;
    letter-spacing: 3px;
    text-shadow: 0 0 8px rgba(255,215,0,0.4);
}
.mp-version {
    font-size: 10px;
    color: #4a8a5a;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.mp-header-right { display: flex; align-items: center; gap: 12px; }
.mp-user-link {
    color: #FFD700;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 4px 8px;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.mp-user-link:hover {
    border-color: #FFD700;
    background: rgba(255,215,0,0.08);
    text-shadow: 0 0 6px rgba(255,215,0,0.4);
}
.mp-status { color: #00FF88; font-size: 10px; letter-spacing: 1px; }
.mp-header-sep { color: #1a3a2a; font-size: 12px; }
.mp-header-logout {
    background: transparent;
    border: 1px solid #4a2020;
    color: #FF6B6B;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.mp-header-logout:hover {
    background: rgba(255,107,107,0.08);
    border-color: #FF6B6B;
    box-shadow: 0 0 8px rgba(255,107,107,0.2);
    text-shadow: 0 0 6px rgba(255,107,107,0.4);
}

/* ── PROFILE MODAL ── */
.profile-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-modal {
    background: #0a1a0f;
    border: 2px solid #00FF88;
    width: 420px;
    max-width: 90vw;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 30px rgba(0,255,136,0.15);
}
.profile-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #1a3a2a;
    background: #000;
}
.profile-modal-title {
    color: #FFD700;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.profile-modal-close {
    background: transparent;
    border: none;
    color: #FF6B6B;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
}
.profile-modal-close:hover { color: #FF4444; }
.profile-modal-body {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.profile-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.profile-field label {
    color: #4a8a5a;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.profile-field input {
    background: #000;
    border: 1px solid #1a3a2a;
    color: #00FF88;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 8px 10px;
    outline: none;
}
.profile-field input:focus {
    border-color: #00FF88;
    box-shadow: 0 0 6px rgba(0,255,136,0.15);
}
.profile-field input:disabled {
    color: #3a6a4a;
    border-color: #0a1a0f;
}
.profile-field .profile-hint {
    color: #3a5a3a;
    font-size: 9px;
}
.profile-section-label {
    color: #2a6a4a;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding-top: 6px;
    border-top: 1px solid #1a3a2a;
}
.profile-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #1a3a2a;
    background: #000;
}
.profile-btn {
    background: transparent;
    border: 1px solid #1a4a2a;
    color: #00FF88;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 16px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.15s;
}
.profile-btn:hover {
    background: rgba(0,255,136,0.06);
    border-color: #00FF88;
}
.profile-btn-save {
    border-color: #FFD700;
    color: #FFD700;
}
.profile-btn-save:hover {
    background: rgba(255,215,0,0.08);
    border-color: #FFD700;
}
.profile-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.profile-error {
    color: #FF6B6B;
    font-size: 10px;
    display: none;
}
.profile-success {
    color: #00FF88;
    font-size: 10px;
    display: none;
}

/* Body: sidebar + main */
.mp-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* ── LEFT SIDEBAR ── */
.mp-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: #000a05;
    border-right: 1px solid #1a3a2a;
    display: flex;
    flex-direction: column;
    padding: 16px 12px 16px 24px;
    gap: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #1a3a2a #000;
}
.mp-nav-label {
    font-size: 10px;
    color: #2a6a4a;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0 4px 6px;
    border-bottom: 1px solid #1a3a2a;
    margin-bottom: 4px;
}

/* Sidebar buttons */
.mp-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 1px solid #1a4a2a;
    color: #00FF88;
    font-family: 'Courier New', monospace;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}
.mp-btn:hover {
    background: rgba(0,255,136,0.06);
    border-color: #00FF88;
    box-shadow: 0 0 8px rgba(0,255,136,0.15);
}
.mp-btn-icon {
    font-size: 11px;
    font-weight: bold;
    color: #FFD700;
    white-space: nowrap;
    flex-shrink: 0;
    width: 42px;
}
.mp-btn-label {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 1;
}
.mp-btn-desc {
    font-size: 9px;
    color: #3a6a4a;
    white-space: nowrap;
    display: none; /* hidden on sidebar width, show on wider screens */
}
.mp-btn-logout {
    border-color: #4a2020;
    color: #FF6B6B;
}
.mp-btn-logout:hover {
    background: rgba(255,107,107,0.08);
    border-color: #FF6B6B;
    box-shadow: 0 0 8px rgba(255,107,107,0.2);
}
.mp-btn-logout .mp-btn-icon { color: #FF6B6B; }
.mp-btn-admin {
    border-color: #4a4a10;
    color: #FFD700;
    display: none;
}
.mp-btn-admin.show-admin { display: flex; }
.mp-btn-admin:hover {
    background: rgba(255,215,0,0.06);
    border-color: #FFD700;
    box-shadow: 0 0 8px rgba(255,215,0,0.2);
}
.mp-btn-admin .mp-btn-icon { color: #FF8C00; }

.mp-btn-mini {
    background: rgba(0,40,20,0.6);
    border: 1px solid #1a5a3a;
    border-radius: 6px;
    color: #FFD700;
    font-size: 18px;
    width: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.mp-btn-mini:hover {
    background: rgba(255,215,0,0.1);
    border-color: #FFD700;
    box-shadow: 0 0 8px rgba(255,215,0,0.3);
    transform: scale(1.1);
}

/* Recent games section */
.mp-recent {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 2px solid #1a5a3a;
    position: relative;
}
.mp-recent::before {
    content: '\2500\2500\2500\2500  \2693  \2500\2500\2500\2500';
    display: block;
    text-align: center;
    color: #00CC66;
    font-size: 12px;
    letter-spacing: 3px;
    position: absolute;
    top: -9px;
    left: 0;
    right: 0;
    background: #050a07;
    width: fit-content;
    margin: 0 auto;
    padding: 0 8px;
}
.mp-recent-label {
    font-size: 13px;
    color: #FFD700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 4px 4px 8px;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(255,215,0,0.3);
}
.mp-recent-list { display: flex; flex-direction: column; gap: 6px; }
.mp-recent-empty {
    font-size: 11px;
    color: #4a7a5a;
    padding: 10px 4px;
    font-style: italic;
}
.mp-recent-game {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0,255,136,0.04);
    border: 1px solid #1a5a3a;
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 2px;
    min-height: 40px;
}
.mp-recent-game:hover {
    background: rgba(0,255,136,0.10);
    border-color: #00FF88;
    box-shadow: 0 0 8px rgba(0,255,136,0.15);
}
.mp-recent-turn {
    font-size: 10px;
    color: #FFD700;
    background: #0a1a0f;
    padding: 2px 6px;
    border: 1px solid #2a5a3a;
    white-space: nowrap;
    font-weight: bold;
}
.mp-recent-name {
    font-size: 12px;
    color: #00FF88;
    font-weight: bold;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    text-shadow: 0 0 4px rgba(0,255,136,0.2);
}

/* ── RIGHT MAIN AREA ── */
.mp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px;
    gap: 20px;
    min-width: 0;
}

/* ── Main Menu Announcements ────────────────────── */
.menu-announcements {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.menu-announcement-item {
    background: rgba(0, 10, 4, 0.85);
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 12px 16px;
    font-family: 'Courier New', monospace;
}
.menu-announcement-item .ann-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 255, 136, 0.15);
}
.menu-announcement-item .ann-category {
    font-size: 9px;
    letter-spacing: 2px;
    color: #00FF88;
    text-transform: uppercase;
    text-shadow: 0 0 4px rgba(0, 255, 136, 0.4);
}
.menu-announcement-item .ann-priority {
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(0, 255, 136, 0.5);
}
.menu-announcement-item .ann-title {
    font-size: 13px;
    font-weight: bold;
    color: #FFD700;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}
.menu-announcement-item .ann-content {
    font-size: 11px;
    color: #00DD77;
    line-height: 1.5;
    letter-spacing: 0.5px;
}
.menu-announcement-item .ann-cta {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 14px;
    border: 1px solid #FFD700;
    color: #FFD700;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    transition: all 0.2s;
}
.menu-announcement-item .ann-cta:hover {
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.menu-announcement-item.style-urgent {
    border-color: rgba(255, 107, 107, 0.5);
}
.menu-announcement-item.style-urgent .ann-category { color: #FF6B6B; }
.menu-announcement-item.style-urgent .ann-content { color: #FF9999; }
.menu-announcement-item.style-intel {
    border-color: rgba(100, 180, 255, 0.4);
}
.menu-announcement-item.style-intel .ann-category { color: #64B4FF; }
.menu-announcement-item.style-intel .ann-content { color: #88CCFF; }
.menu-announcement-item.style-victory {
    border-color: rgba(255, 215, 0, 0.4);
}
.menu-announcement-item.style-victory .ann-category { color: #FFD700; }

/* Newspaper — WW2 Parchment Style (matches in-game Tribune) */
.mp-newspaper {
    border: 3px double #8a7a4a;
    border-radius: 4px;
    background: linear-gradient(180deg, #211d11 0%, #2e2818 30%, #2e2818 70%, #211d11 100%);
    font-family: Georgia, 'Times New Roman', serif;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    flex-shrink: 0;
    overflow: hidden;
}
.mp-news-header {
    text-align: center;
    padding: 14px 24px 10px;
    border-bottom: 3px double #6c5a2a;
    background: linear-gradient(180deg, #2a2410 0%, #1e1a0e 100%);
}
.mp-news-ornament {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 8px;
    color: #7a6a4a;
    margin-bottom: 4px;
}
.mp-news-title {
    font-size: 28px;
    font-weight: bold;
    color: #e8d8a8;
    letter-spacing: 4px;
    font-variant: small-caps;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    border-bottom: 2px solid #5c4a2a;
    border-top: 2px solid #5c4a2a;
    padding: 6px 0;
    margin: 0 20px;
}
.mp-news-subtitle {
    font-size: 9px;
    color: #7a6a4a;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 6px;
}
.mp-news-body {
    padding: 20px 28px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mp-news-loading {
    text-align: center;
    color: #7a6a4a;
    font-size: 12px;
    padding: 30px 0;
    letter-spacing: 2px;
    column-span: all;
}
.mp-news-article {
    break-inside: avoid;
    margin-bottom: 14px;
}
.mp-news-headline {
    font-size: 13px;
    font-weight: bold;
    color: #f0e0b0;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3;
    margin-bottom: 4px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.mp-news-text {
    font-size: 11px;
    color: #b0a080;
    line-height: 1.7;
    text-align: justify;
}
.mp-news-text::first-letter {
    font-size: 22px;
    font-weight: bold;
    color: #e8d8a8;
    float: left;
    line-height: 1;
    margin-right: 4px;
    margin-top: 2px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.mp-news-meta {
    font-size: 8px;
    color: #6a5a3a;
    letter-spacing: 1px;
    margin-top: 4px;
    text-transform: uppercase;
    font-style: italic;
}
.mp-news-divider {
    border-top: 1px solid #4a3a20;
    margin: 10px 0;
    break-inside: avoid;
}

/* Dispatch rotation — single article display with fade */
.mp-dispatch-active {
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
    animation: dispatchPrintIn 0.6s ease-out;
}
.mp-dispatch-fading {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
@keyframes dispatchPrintIn {
    0%   { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Dateline — wartime correspondent credit line */
.mp-dispatch-dateline {
    font-size: 9px;
    color: #c0a860;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: bold;
    margin-bottom: 2px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Edition stamp — wartime date + time-of-day segment */
.mp-dispatch-edition {
    font-size: 8px;
    color: #7a6a4a;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    margin-bottom: 6px;
}

/* Thin ornamental rule between dateline block and headline */
.mp-dispatch-rule {
    border: none;
    border-top: 1px solid #4a3a20;
    margin: 6px auto 10px;
    width: 60%;
    opacity: 0.7;
}

/* Future content placeholder */
.mp-extra {
    min-height: 80px;
}

/* War Newsreel — Film-strip style ticker */
.mp-newsreel {
    border: 2px solid #2a3a2a;
    border-radius: 4px;
    background: linear-gradient(180deg, #0a0f0a 0%, #0f1a12 50%, #0a0f0a 100%);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.mp-newsreel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 16px;
    background: linear-gradient(180deg, #1a2a1a 0%, #0f1a0f 100%);
    border-bottom: 1px solid #2a4a2a;
}
.mp-newsreel-icon {
    font-size: 12px;
    opacity: 0.5;
}
.mp-newsreel-label {
    font-family: monospace;
    font-size: 10px;
    color: #4a8a4a;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: bold;
}
.mp-newsreel-content {
    padding: 14px 20px;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.mp-newsreel-loading {
    text-align: center;
    color: #3a5a3a;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: 2px;
}
.mp-newsreel-category {
    font-family: monospace;
    font-size: 9px;
    color: #3a7a3a;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0.8;
}
.mp-newsreel-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
    font-weight: bold;
    color: #a0d0a0;
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.mp-newsreel-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px;
    color: #7aaa7a;
    line-height: 1.7;
    text-align: justify;
}
.mp-newsreel-entry {
    transition: opacity 0.8s ease-in-out;
    opacity: 1;
}
.mp-newsreel-entry.fading {
    opacity: 0;
}

/* System announcement newsreel entries */
.mp-newsreel-system .mp-newsreel-category {
    color: #ff9800;
    border-color: #7a5a1a;
}
.mp-newsreel-system .mp-newsreel-title {
    color: #ffcc66;
}
.mp-newsreel-system .mp-newsreel-text {
    color: #ccaa66;
}

/* System status link in header */
.system-status-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.system-status-link:hover {
    text-decoration: underline;
}

/* TOS checkbox on registration */
.tos-line {
    margin: 8px 0;
}
.retro-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
}
.retro-checkbox-label input[type="checkbox"] {
    accent-color: #4a7a4a;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.tos-link {
    color: #8ab88a;
    text-decoration: underline;
    cursor: pointer;
}
.tos-link:hover {
    color: #aaddaa;
}

/* TOS Modal */
.tos-modal-content h1, .tos-modal-content h2, .tos-modal-content h3 {
    color: #e8d8a8;
}
.tos-modal-content h2 {
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
    margin-top: 20px;
}
.tos-modal-content h3 {
    color: #aaa;
}
.tos-modal-content ul, .tos-modal-content ol {
    padding-left: 20px;
}
.tos-modal-content li {
    margin-bottom: 4px;
}
.tos-modal-content a {
    color: #8ab88a;
}
.tos-modal-content hr {
    border: none;
    border-top: 1px solid #333;
    margin: 16px 0;
}

/* Responsive: collapse sidebar on small screens */
@media (max-width: 768px) {
    .mp-body { flex-direction: column; }
    .mp-sidebar { width: 100%; max-height: 50vh; border-right: none; border-bottom: 1px solid #1a3a2a; }
    .mp-news-body { padding: 16px 20px; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .retro-terminal {
        margin: 20px;
        max-width: none;
    }
    
    .menu-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    
    .ascii-logo {
        font-size: 6px;
    }
    
    .input-line {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .prompt {
        width: auto;
        text-align: left;
        margin-right: 0;
        margin-bottom: 5px;
    }
}

/* My Games Cards */
.my-games-card {
    background: rgba(0, 20, 10, 0.9);
    border: 1px solid #2a5a3a;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
    transition: border-color 0.2s;
}
.my-games-card:hover {
    border-color: #00FF88;
}
.my-games-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #1a3a2a;
    background: rgba(0, 255, 136, 0.04);
}
.my-games-name {
    color: #00FF88;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.my-games-status {
    font-size: 10px;
    padding: 2px 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid;
}
.my-games-status.active {
    color: #00FF88;
    border-color: #00FF88;
    background: rgba(0, 255, 136, 0.1);
}
.my-games-status.staging {
    color: #FFD700;
    border-color: #FFD700;
    background: rgba(255, 215, 0, 0.1);
}
.my-games-status.other {
    color: #888;
    border-color: #555;
    background: rgba(100, 100, 100, 0.1);
}
.my-games-card-body {
    padding: 10px 14px;
}
.my-games-info-row {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 12px;
}
.my-games-label {
    color: #5a8a5a;
    min-width: 70px;
}
.my-games-value {
    color: #CCFFDD;
}
.my-games-players-list {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.my-games-player-badge {
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid #2a5a3a;
    background: rgba(0, 255, 136, 0.05);
    color: #88cc88;
}
.my-games-player-badge.ai {
    color: #888;
    border-color: #444;
}
.my-games-card-footer {
    padding: 8px 14px;
    border-top: 1px solid #1a3a2a;
    text-align: right;
}
.my-games-rejoin-btn {
    background: transparent;
    border: 1px solid #00FF88;
    color: #00FF88;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 5px 14px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}
.my-games-rejoin-btn:hover {
    background: rgba(0, 255, 136, 0.15);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

/* Turn Report Popup */
#turn-report-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 11000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', monospace;
}
.turn-report-panel {
    background: #000;
    border: 2px solid #00FF88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.4), inset 0 0 60px rgba(0, 20, 10, 0.8);
    max-width: 480px;
    width: 90%;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}
.turn-report-header {
    padding: 14px 18px 10px;
    border-bottom: 1px solid #1a4a2a;
    text-align: center;
    background: rgba(0, 255, 136, 0.04);
}
.turn-report-title {
    color: #00FF88;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.turn-report-subtitle {
    color: #5a8a5a;
    font-size: 11px;
    letter-spacing: 1px;
    margin-top: 4px;
}
.turn-report-body {
    padding: 12px 18px;
    overflow-y: auto;
    flex: 1;
}
.turn-report-section {
    margin-bottom: 14px;
}
.turn-report-section:last-child {
    margin-bottom: 0;
}
.turn-report-section-title {
    color: #FFD700;
    font-size: 11px;
    letter-spacing: 2px;
    padding-bottom: 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid #2a3a1a;
}
.turn-report-item {
    color: #CCFFDD;
    font-size: 12px;
    padding: 3px 0;
    line-height: 1.5;
}
.turn-report-item strong {
    color: #00FF88;
}
.turn-report-icon {
    display: inline-block;
    width: 18px;
    text-align: center;
    color: #FFD700;
}
.turn-report-footer {
    padding: 10px 18px;
    border-top: 1px solid #1a4a2a;
    text-align: center;
}
.turn-report-dismiss {
    background: transparent;
    border: 1px solid #00FF88;
    color: #00FF88;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 6px 24px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.2s;
}
.turn-report-dismiss:hover {
    background: rgba(0, 255, 136, 0.15);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
}

/* Infrastructure Status Cards */
.infrastructure-status-section {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
}

.infrastructure-status-section h4 {
    color: #00FF88;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.infrastructure-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
}

.infrastructure-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 136, 0.4);
    border-radius: 3px;
    padding: 10px;
    transition: all 0.3s ease;
    line-height: 1.2;
}

.infrastructure-card:hover {
    border-color: #00FF88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.infrastructure-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(0, 255, 136, 0.15);
}

.infrastructure-card-name {
    color: #00FF88;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.infrastructure-card-level {
    color: #FFD700;
    font-size: 0.72rem;
    background: rgba(255, 215, 0, 0.08);
    padding: 1px 6px;
    border-radius: 2px;
    border: 1px solid rgba(255, 215, 0, 0.25);
    white-space: nowrap;
    flex-shrink: 0;
}

.infrastructure-card-description {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-style: italic;
    margin-bottom: 0.4rem;
}

/* Stat-description text (compact flavor text) */
.infrastructure-stat.stat-description {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    font-style: italic;
}

.infrastructure-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
}

.infrastructure-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #CCCCCC;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    padding: 1px 0;
}

.infrastructure-stat.primary {
    font-weight: bold;
    color: #00FF88;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2);
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    font-size: 0.85rem;
}

.infrastructure-stat .stat-icon {
    margin-right: 4px;
    font-size: 0.85em;
    opacity: 0.9;
}

.infrastructure-description {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-style: italic;
    margin-bottom: 0.3rem;
}

.infrastructure-stat-value {
    color: #00FF88;
    font-weight: bold;
}

.infrastructure-card.operational {
    border-color: rgba(0, 255, 136, 0.6);
}

.infrastructure-card.under-construction {
    border-color: rgba(255, 215, 0, 0.6);
}

.infrastructure-card.compact {
    padding: 10px;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.infrastructure-card.compact .infrastructure-card-header {
    margin-bottom: 0.2rem;
    padding-bottom: 0.2rem;
}

.infrastructure-card.compact .infrastructure-card-name {
    font-size: 0.8rem;
}

.infrastructure-card.compact .infrastructure-card-level {
    font-size: 0.7rem;
    padding: 1px 4px;
}

.infrastructure-card.compact .infrastructure-card-stats {
    gap: 0.2rem;
    margin-bottom: 0.3rem;
}

.infrastructure-card.compact .infrastructure-stat {
    font-size: 0.65rem;
    line-height: 1.2;
}

.infrastructure-card.damaged {
    border-color: rgba(255, 100, 100, 0.6);
}

.infrastructure-card.destroyed {
    border-color: rgba(128, 128, 128, 0.6);
    opacity: 0.75;
}

/* Fortress Health Bar */
.fortress-health-section {
    padding: 0.2rem 0.4rem;
    margin-bottom: 0.2rem;
}

.fortress-health-bar-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.15rem;
}

.fortress-health-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.fortress-health-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    font-family: 'Courier New', monospace;
}

.fortress-damage-status {
    color: #FF6666;
}

.fortress-health-value {
    color: #AAAAAA;
}

/* Fortress Repair Button */
.fortress-repair-section {
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.3);
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    margin-top: 0.3rem;
    transition: background 0.2s;
}

.fortress-repair-section:hover {
    background: rgba(255, 165, 0, 0.25);
    border-color: rgba(255, 165, 0, 0.6);
}

.repair-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.15rem;
}

.repair-icon {
    font-size: 0.75rem;
}

.repair-text {
    font-size: 0.65rem;
    font-weight: bold;
    color: #FFA500;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.repair-cost-info {
    display: flex;
    gap: 0.5rem;
    font-size: 0.6rem;
    color: #AACCAA;
    font-family: 'Courier New', monospace;
}

.repair-cost-item {
    white-space: nowrap;
}

/* Island Section Styles */
.island-section {
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 255, 136, 0.2) !important; /* Very subtle border */
    padding: 1rem;
    background: rgba(0, 20, 40, 0.1) !important; /* Very subtle background */
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    min-height: fit-content;
    border-radius: 4px;
    box-sizing: border-box !important;
}

.island-header {
    color: #00FF88;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(0, 255, 136, 0.4);
}

.island-structures {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: visible;
    overflow-y: visible;
    width: 100%;
    min-height: fit-content;
    padding-bottom: 0.5rem;
}

/* Infrastructure card sizing now managed by modular-panels.css */
.island-structures .infrastructure-card {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

.island-structures .infrastructure-card .infrastructure-card-actions {
    margin-top: auto; /* keep action area aligned at the bottom across cards */
    flex-shrink: 0;
}

.infrastructure-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 150, 0.15);
    border-radius: 3px;
    padding: 10px;
    transition: all 0.2s ease;
    font-family: 'Courier New', monospace;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.infrastructure-card .structure-stats {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.upgrade-timer {
    margin-top: 0.35rem;
    color: #FFD700;
    font-size: 0.75rem;
}

.upgrade-timer .time-remaining {
    color: #FFA500;
    font-weight: bold;
}

/* Main Infrastructure page: stack islands as rows and remove container border */
#infrastructure-main-content .built-infrastructure-section {
    border: none;
    padding-left: 0;
    padding-right: 0;
    margin-top: 20px; /* increased spacing below the teletype bar */
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
}

/* Ensure horizontal layout for main content area island structures */
#infrastructure-main-content .island-structures {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Infrastructure card sizing now managed by modular-panels.css */
#infrastructure-main-content .infrastructure-card {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Make card content more compact */
#infrastructure-main-content .infrastructure-card-header {
    margin-bottom: 0.4rem;
}

#infrastructure-main-content .infrastructure-card-name {
    color: #00FF88;
    font-size: 1.05rem;
}

#infrastructure-main-content .infrastructure-card-level {
    font-size: 0.75rem;
    padding: 1px 5px;
}

#infrastructure-main-content .infrastructure-card-description {\n    display: none;\n}

#infrastructure-main-content .infrastructure-card-stats {
    gap: 0.25rem;
}

#infrastructure-main-content .infrastructure-stat {
    font-size: 0.85rem;
}

#built-infrastructure-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start; /* Left-justify the island cards */
    width: 100%;
}

/* Structure per-turn production output display */
.structure-production-output {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    padding: 4px 8px;
    background: rgba(0, 255, 136, 0.03);
    border: 1px solid rgba(0, 255, 136, 0.1);
    border-left: 2px solid rgba(0, 255, 136, 0.3);
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    position: relative;
    z-index: 2;
}

.production-output-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 2px rgba(0, 255, 136, 0.3));
}

.production-output-label {
    color: rgba(0, 255, 136, 0.45);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.production-output-value {
    color: #00FF88;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(0, 255, 136, 0.3);
    font-size: 0.95rem;
}

/* ── Island Resource Banner ── */
.island-resource-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, rgba(0, 40, 20, 0.5) 0%, rgba(0, 20, 10, 0.3) 100%);
    border: 1px solid rgba(0, 255, 136, 0.12);
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

.island-resource-item {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 140px;
}

.island-res-icon {
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
}

.island-res-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 40px;
}

.island-res-bar {
    width: 50px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.island-res-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.island-res-value {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    min-width: 70px;
    text-align: right;
    font-weight: bold;
}

.island-res-pct-low { color: #ff6b6b; }
.island-res-pct-mid { color: #ffc107; }
.island-res-pct-high { color: #00ff88; }

/* ── Natural Resources Box ── */
.natural-resources-box {
    padding: 8px 12px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, rgba(34, 80, 34, 0.45) 0%, rgba(10, 40, 10, 0.3) 100%);
    border: 1px solid rgba(0, 200, 80, 0.18);
    border-left: 3px solid rgba(0, 200, 80, 0.4);
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

.natural-res-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.natural-res-title {
    color: rgba(0, 255, 136, 0.8);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: bold;
}

.natural-res-size {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-style: italic;
}

.natural-res-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.natural-res-item {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 130px;
}

.natural-res-icon {
    font-size: 0.8rem;
    width: 18px;
    text-align: center;
}

.natural-res-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 55px;
}

.natural-res-value {
    font-size: 0.75rem;
    font-weight: bold;
    text-shadow: 0 0 4px currentColor;
}

.natural-res-unit {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.58rem;
}

.natural-res-footer {
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px solid rgba(0, 200, 80, 0.12);
    color: rgba(0, 255, 136, 0.6);
    font-size: 0.62rem;
    text-align: right;
    letter-spacing: 0.5px;
}

/* ── Structure Card Storage Bars ── */
.structure-storage-section {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(0, 150, 255, 0.04);
    border: 1px solid rgba(0, 150, 255, 0.12);
    border-left: 2px solid rgba(0, 150, 255, 0.3);
    border-radius: 2px;
    font-family: 'Courier New', monospace;
}

.storage-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.storage-icon {
    font-size: 0.8rem;
}

.storage-label {
    color: rgba(0, 150, 255, 0.5);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.structure-res-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 2px 0;
}

.structure-res-icon {
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

.structure-res-name {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    min-width: 70px;
}

.structure-res-bar {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.structure-res-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.structure-res-qty {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.7rem;
    min-width: 45px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.infrastructure-card-actions {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(0, 255, 136, 0.12);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.upgrade-btn {
    background: #003322;
    border: 1px solid #00FF88;
    color: #00FF88;
    padding: 0.5rem 0.8rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.upgrade-btn:hover:not([disabled]) {
    background: #00FF88;
    color: #000000;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.upgrade-btn:disabled {
    background: #333333;
    border-color: #666666;
    color: #666666;
    cursor: not-allowed;
}

/* Timer display styling to make countdown stand out */
.upgrade-btn .timer-display {
    color: #FFD700 !important;
    font-weight: bold !important;
    font-size: 0.9rem !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    animation: timer-pulse 2s ease-in-out infinite;
    display: inline-block;
    border: 1px solid #FFD700;
    background: rgba(255, 215, 0, 0.15);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    margin: 0.1rem;
}

.upgrade-btn:disabled .timer-display {
    background: rgba(255, 215, 0, 0.25);
    border-color: #FFD700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

@keyframes timer-pulse {
    0%, 100% {
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
        border-color: #FFD700;
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 215, 0, 1.0), 0 0 8px rgba(255, 215, 0, 0.8);
        border-color: #FFF700;
    }
}

.no-structures {
    text-align: center;
    color: #AAAAAA;
    font-style: italic;
    padding: 2rem;
    border: 1px dashed rgba(170, 170, 170, 0.3);
    border-radius: 4px;
}

/* Page-standard: consistent top spacing under the teletype bar for all main panels */
#build-main-content,
#research-main-content,
#communications-main-content,
#scoreboard-main-content {
    margin-top: 20px; /* match infrastructure page */
}

/* Island Selection Modal Styles */
.modal-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #000000;
    border: 3px solid #00FF88;
    padding: 2rem;
    max-width: none;
    width: 80vw;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
    color: #00FF88;
    font-family: 'Courier New', monospace;
}

.modal-content h3 {
    color: #00FF88;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.island-selection-list {
    margin: 1rem 0;
}

.island-option {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid #00FF88;
    margin: 0.5rem 0;
    padding: 1rem;
}

.island-option h4 {
    color: #00FF88;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
}

.island-option p {
    margin: 0.25rem 0;
    color: #CCFFDD;
    font-size: 0.9rem;
}

.select-island-btn {
    background: #003322;
    border: 2px solid #00FF88;
    color: #00FF88;
    padding: 0.5rem 1rem;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 0.5rem;
}

.select-island-btn:hover {
    background: #00FF88;
    color: #000000;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

.cancel-btn {
    background: #330000;
    border: 2px solid #FF6666;
    color: #FF6666;
    padding: 0.5rem 1rem;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    cursor: pointer;
}

.cancel-btn:hover {
    background: #FF6666;
    color: #000000;
}

/* Floating tooltip for upgrade cost with sufficiency coloring */
.ow-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.92);
    color: #e6f4ff;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.3;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    min-width: 220px;
    max-width: 320px;
}
.ow-tooltip-title {
    font-weight: 700;
    color: #9ad1ff;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ow-tooltip .res-line { margin: 3px 0; }
.ow-tooltip .res-line .sep { opacity: 0.5; margin: 0 6px; }
.ow-tooltip .res-line.res-ok { color: #44d86e; }
.ow-tooltip .res-line.res-missing { color: #ff5b5b; }
.ow-tooltip .res-line .have { opacity: 0.85; }

/* --- OceanWar UI: Lightweight Spinner for Loading States --- */
.fleet-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00FF88;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ow-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 255, 136, 0.25);
    border-top-color: #00FF88;
    border-right-color: rgba(0, 255, 136, 0.25);
    border-bottom-color: rgba(0, 255, 136, 0.25);
    border-left-color: rgba(0, 255, 136, 0.25);
    border-radius: 50%;
    display: inline-block;
    animation: ow-spin 0.9s linear infinite;
}

@keyframes ow-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ow-spinner { animation: none; }
}

/* Build modal stats */
#build-modal .build-stats { color: #ddd; font-size: 13px; }
#build-modal .build-stats .stats-placeholder { opacity: 0.7; font-style: italic; color: #8affc2; }
#build-modal .build-stats .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 6px; }
#build-modal .build-stats .stat-row { display: contents; }
#build-modal .build-stats .stat-label { opacity: 0.85; color: #7FFFD4; }
#build-modal .build-stats .stat-value { text-align: right; font-weight: 700; color: #cfe; }
/* stat-offense class removed with Offensive Strength row */
#build-modal .build-stats .stats-grid.stats-compact { grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12px; }

/* Fabric.js Map Context Menu Styles */
.unit-context-menu {
    position: fixed;
    background: #1a1a2e;
    border: 2px solid #00ff41;
    border-radius: 4px;
    padding: 8px 0;
    z-index: 1000;
    display: none;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #00ff41;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    min-width: 120px;
}

.context-menu-item {
    padding: 6px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
}

.context-menu-item:hover {
    background-color: #2a2a3e;
}

.context-menu-item:active {
    background-color: #3a3a5e;
}

/* Removed conflicting #game-map rule - consolidated above */

/* Movement path styles (for future path preview) */
.movement-preview {
    stroke: #00ff41;
    stroke-width: 3;
    stroke-dasharray: 10, 5;
    fill: none;
    pointer-events: none;
}

/* Vision range indicators */
.vision-range {
    stroke: rgba(0, 255, 65, 0.3);
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    fill: none;
    pointer-events: none;
}

/* Unit selection highlight */
.unit-selected {
    stroke: #ffd700 !important;
    stroke-width: 3 !important;
}

/* Fog of war overlay */
.fog-of-war {
    fill: rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

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

.modal-content {
    background: #1a1a1a;
    border: 2px solid #00FF88;
    border-radius: 0;
    min-width: 600px;
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
}

.modal-header {
    padding: 15px 20px;
    background: #2a2a2a;
    border-bottom: 1px solid #00FF88;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    color: #00FF88;
    font-family: 'Courier New', monospace;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 16px;
    text-transform: uppercase;
    margin: 0;
    font-size: 16px;
    letter-spacing: 1px;
}

.modal-close {
    background: none;
    border: none;
    color: #00FF88;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-weight: bold;
}

.modal-close:hover {
    color: #ff6b6b;
    text-shadow: 0 0 5px #ff6b6b;
}

.modal-body {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.structure-build-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

/* ── Resource banner at top of Build Structure popup ── */
.build-resource-banner {
    grid-column: 1 / -1;
    background: rgba(0, 20, 40, 0.85);
    border: 1px solid rgba(255, 204, 0, 0.3);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 4px;
    font-size: 0.82rem;
}
.build-res-header,
.build-res-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 6px;
    padding: 3px 0;
    align-items: center;
}
.build-res-header {
    border-bottom: 1px solid rgba(255, 204, 0, 0.25);
    padding-bottom: 5px;
    margin-bottom: 2px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.build-res-row {
    color: #ccc;
}
.build-res-name {
    white-space: nowrap;
}
.build-res-island,
.build-res-stockpile,
.build-res-total {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.structure-option {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 136, 0.4);
    padding: 0.7rem;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.structure-option:hover {
    border-color: #00FF88;
    background: rgba(0, 255, 136, 0.05);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.structure-option.selected {
    border-color: #00FF88;
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

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

.structure-option h4 {
    color: #00FF88;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    margin: 0;
    font-size: 13px;
}

.available-badge {
    background: #1a2a1a;
    color: #00FF88;
    border: 1px solid #00FF88;
    padding: 2px 6px;
    font-size: 9px;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.unavailable-badge {
    background: #2a1a1a;
    color: #ff4444;
    border: 1px solid #ff4444;
    padding: 2px 6px;
    font-size: 9px;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.structure-option .description {
    color: #ccc;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.structure-option .quick-cost {
    color: #ccc;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    background: #1a1a1a;
    padding: 5px 8px;
    margin-top: 8px;
    border: 1px solid #333;
}

/* Unaffordable structure styles */
.structure-option.unaffordable {
    background: rgba(60, 10, 10, 0.6);
    border-color: rgba(255, 68, 68, 0.5);
    opacity: 0.85;
}

.structure-option.unaffordable:hover {
    border-color: rgba(255, 100, 100, 0.7);
    background: rgba(80, 15, 15, 0.6);
}

.structure-option.unaffordable .infrastructure-card-name {
    color: #ff4444;
}

.structure-option.unaffordable .build-cost-section {
    border-color: rgba(255, 68, 68, 0.2);
}

.structure-option.unaffordable .build-cost-label {
    color: #ff6666;
}

.structure-option .prerequisite-text {
    color: #ffaa44;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    background: #2a1a0a;
    padding: 4px 8px;
    margin-top: 4px;
    border: 1px solid #664422;
    border-radius: 3px;
    font-weight: bold;
}

/* Build Card - Production/Extraction Section */
.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-prod-label {
    color: #ff6b35;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

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

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

/* Build Card - Cost Section */
.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-cost-label {
    color: #aaa;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.build-cost-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

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

/* Build Card - Footer (time + badge) */
.build-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 6px;
}

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

.structure-details {
    background: #2a2a2a;
    padding: 20px;
    border-radius: 0;
    border: 1px solid #444;
}

.structure-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #444;
}

.structure-details h4 {
    color: #00FF88;
    font-family: 'Courier New', monospace;
    margin: 0;
}

.structure-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.info-section {
    background: #1a1a1a;
    padding: 15px;
    border: 1px solid #333;
}

.info-section h5 {
    color: #00FF88;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}

.cost-display, .resource-display, .stats-display {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stats-display .stat-section {
    margin-bottom: 10px;
}

.stats-display .stat-section h4 {
    margin: 0 0 5px 0;
    font-size: 0.9em;
    color: #00ff88;
    font-weight: bold;
}

.stats-display .stat-item {
    font-size: 0.8em;
    color: #e0e0e0;
    margin-left: 10px;
}

.resource-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    background: #333;
    border: 1px solid #444;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.resource-item.sufficient {
    border-color: #00FF88;
    background: rgba(0, 255, 136, 0.1);
    color: #00FF88;
}

.resource-item.insufficient {
    border-color: #ff4444;
    background: rgba(255, 68, 68, 0.1);
    color: #ff6666;
}

.resource-name {
    font-weight: bold;
    text-transform: uppercase;
}

.resource-amount {
    color: #ccc;
}

.build-actions {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #444;
}

.retro-button.small {
    padding: 5px 10px;
    font-size: 10px;
}

.retro-button.large {
    padding: 12px 30px;
    font-size: 14px;
    font-weight: bold;
}

.retro-button.disabled {
    background: #444;
    color: #666;
    border-color: #333;
    cursor: not-allowed;
}

.retro-button.disabled:hover {
    background: #444;
    color: #666;
    border-color: #333;
    text-shadow: none;
    box-shadow: none;
}

.structure-info {
    display: grid;
    gap: 20px;
}

.resource-requirements h5,
.current-resources h5 {
    color: #00FF88;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    font-size: 14px;
}

#resource-costs,
#current-resource-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.resource-item {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 8px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.resource-item.sufficient {
    border-color: #00FF88;
    color: #00FF88;
    background: rgba(0, 255, 136, 0.1);
}

.resource-item.sufficient .resource-name {
    color: #00FF88;
}

.resource-item.sufficient .resource-amount {
    color: #00FF88;
    font-weight: bold;
}

.resource-item.insufficient {
    border-color: #ff6b6b;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.resource-item.insufficient .resource-name {
    color: #ff6b6b;
}

.resource-item.insufficient .resource-amount {
    color: #ff6b6b;
}

.resource-item .resource-name {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.resource-item .resource-amount {
    color: #ccc;
}

.resource-item.sufficient .resource-amount {
    color: #00FF88 !important;
    font-weight: bold;
}

.resource-item.insufficient .resource-amount {
    color: #ff6b6b !important;
}

.build-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.build-structure-btn {
    background: none;
    border: none;
    color: #00FF88;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
    border: 1px solid transparent;
    letter-spacing: 1px;
    margin-left: 10px;
}

.build-structure-btn:hover {
    border-color: #00FF88;
    background: rgba(0, 255, 136, 0.1);
    text-shadow: 0 0 5px #00FF88;
}

/* Island Header Styling */
.island-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.island-header {
    color: #00FF88;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    margin: 0;
    font-size: 16px;
    letter-spacing: 1px;
}

.no-structures-on-island {
    color: #888;
    font-style: italic;
    padding: 20px;
    text-align: center;
    background: #1a1a1a;
    border: 1px dashed #333;
    border-radius: 4px;
}

/* FORCE INFRASTRUCTURE FULL WIDTH - HIGH PRIORITY OVERRIDE */
body .game-content.infrastructure-mode .main-content-area,
body .game-content.infrastructure-mode #infrastructure-main-content,
body .game-content.infrastructure-mode #infrastructure-main-content .built-infrastructure-section,
body .game-content.infrastructure-mode #infrastructure-main-content .built-infrastructure-grid,
body .game-content.infrastructure-mode #infrastructure-main-content .island-structures {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box !important;
}

/* FORCE INFRASTRUCTURE CARDS LAYOUT - HIGH PRIORITY OVERRIDE */
body .game-content.infrastructure-mode #infrastructure-main-content .island-structures {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 350px) !important;
    gap: 24px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

body .game-content.infrastructure-mode #infrastructure-main-content .infrastructure-card {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
}

/* FORCE RESET OF PROBLEMATIC STYLES */
body .game-content.infrastructure-mode #built-infrastructure-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Communications Panel Styles */
.communications-main-area {
    width: 100%;
    height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
}

.communications-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    background: linear-gradient(180deg, #111 0%, #000 100%);
    border-bottom: 1px solid #333;
}

.comm-tab-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

.comm-tab-btn:hover:not(.active) {
    background: rgba(0, 68, 68, 0.5);
    color: #00FF88;
    border-top-color: rgba(0, 255, 136, 0.5);
}

.comm-tab-btn.active {
    background: rgba(0, 255, 136, 0.08);
    border-top-color: #00FF88;
    color: #00FF88;
}

.comm-tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
}

.comm-tab-content.active {
    display: flex;
    flex-direction: column;
}

/* Events Tab Styles */
.events-header, .messages-header, .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 255, 136, 0.3);
}

.events-header h4, .messages-header h4, .history-header h4 {
    color: #00FF88;
    margin: 0;
    font-family: 'Courier New', monospace;
}

.events-controls, .history-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.retro-button-small {
    background: rgba(0, 50, 25, 0.8);
    border: 1px solid rgba(0, 255, 136, 0.5);
    color: #00FF88;
    padding: 0.3rem 0.6rem;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.retro-button-small:hover {
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 5px rgba(0, 255, 136, 0.3);
}

.retro-button-small .icon {
    margin-right: 0.3rem;
}

.retro-select {
    background: rgba(0, 50, 25, 0.8);
    border: 1px solid rgba(0, 255, 136, 0.5);
    color: #00FF88;
    padding: 0.3rem 0.6rem;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    border-radius: 2px;
}

/* Events Container */
.events-container {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.event-island-group {
    background: rgba(0, 50, 25, 0.3);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 5px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.event-island-header {
    background: rgba(0, 255, 136, 0.1);
    border-bottom: 1px solid rgba(0, 255, 136, 0.3);
    padding: 0.7rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}

.event-island-header:hover {
    background: rgba(0, 255, 136, 0.15);
}

.event-island-name {
    color: #00FF88;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

.event-count {
    background: rgba(0, 255, 136, 0.2);
    color: #00FF88;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.8rem;
}

.event-expand-icon {
    color: rgba(0, 255, 136, 0.7);
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.event-island-group.collapsed .event-expand-icon {
    transform: rotate(-90deg);
}

.event-island-content {
    display: block;
    padding: 0;
}

.event-island-group.collapsed .event-island-content {
    display: none;
}

.event-item {
    display: flex;
    align-items: flex-start;
    padding: 0.6rem;
    border-bottom: 1px solid rgba(0, 255, 136, 0.1);
    transition: background 0.3s ease;
}

.event-item:hover {
    background: rgba(0, 255, 136, 0.05);
}

.event-item:last-child {
    border-bottom: none;
}

.event-icon {
    font-size: 1.2rem;
    margin-right: 0.7rem;
    margin-top: 0.1rem;
    min-width: 20px;
}

.event-details {
    flex: 1;
}

.event-type {
    color: #00FF88;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.event-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.3rem;
}

.event-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: rgba(0, 255, 136, 0.7);
}

.event-time, .event-player, .event-resources {
    font-family: 'Courier New', monospace;
}

/* Loading and Empty States */
.loading-message, .empty-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: #4CAF50;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    opacity: 0.6;
}

.empty-message .icon {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

.empty-message p {
    margin: 0.3rem 0;
    color: #6fbf73;
}

.empty-message small {
    color: #3a5a3a;
    font-style: italic;
    font-size: 0.72rem;
}

/* Messages Tab Styles */
.messages-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.messages-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Battle Log Tab Styles */
.battlelog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 255, 136, 0.3);
}

.battlelog-header h4 {
    color: #00FF88;
    margin: 0;
    font-family: 'Courier New', monospace;
}

.battlelog-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.battlelog-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.battlelog-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.battlelog-entry {
    background: rgba(0, 30, 15, 0.6);
    border: 1px solid rgba(0, 255, 136, 0.25);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    transition: border-color 0.2s;
}

.battlelog-entry:hover {
    border-color: rgba(0, 255, 136, 0.6);
}

.battlelog-entry-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.battlelog-icon {
    font-size: 1.1rem;
}

.battlelog-type {
    color: #00FF88;
    font-weight: bold;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
}

.battlelog-turn {
    color: #888;
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    margin-left: auto;
}

.battlelog-role {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-transform: uppercase;
}

.battlelog-role.role-defender {
    background: rgba(0, 120, 255, 0.2);
    color: #66aaff;
    border: 1px solid rgba(0, 120, 255, 0.4);
}

.battlelog-role.role-attacker {
    background: rgba(255, 60, 60, 0.2);
    color: #ff6666;
    border: 1px solid rgba(255, 60, 60, 0.4);
}

.battlelog-entry-location {
    color: #aaffcc;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
    margin-bottom: 0.25rem;
}

.battlelog-entry-summary {
    color: #99aa99;
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    line-height: 1.4;
    margin-bottom: 0.4rem;
}

.battlelog-entry-actions {
    display: flex;
    justify-content: flex-end;
}

.battlelog-replay-btn {
    font-size: 0.75rem !important;
    padding: 0.2rem 0.5rem !important;
}

/* History Tab Styles */
.history-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Island Action Popup Styles */
.island-popup {
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #00FF88;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.4);
    z-index: 10000;
    min-width: 220px;
    font-family: 'Courier New', monospace;
    pointer-events: all;
    overflow: visible; /* Allow tooltips to extend outside */
}

.island-popup-header {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border-bottom: 1px solid #00FF88;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    user-select: none;
}

.island-popup-title {
    color: #00FF88;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.island-popup-close-btn {
    background: transparent;
    border: 1px solid #00FF88;
    color: #00FF88;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.island-popup-close-btn:hover {
    background: #00FF88;
    color: #000000;
}

.island-popup-content {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.island-popup-btn {
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 1px solid #00FF88;
    color: #00FF88;
    padding: 10px 14px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border-radius: 2px;
}

.island-popup-btn:hover {
    background: linear-gradient(180deg, #00FF88 0%, #00CC70 100%);
    color: #000000;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    transform: translateY(-1px);
}

.island-popup-btn:active {
    transform: translateY(0);
}

.island-popup-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.island-popup-label {
    flex: 1;
    text-align: left;
}

/* Fleet Action Popup */
.fleet-popup {
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #00AAFF;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 170, 255, 0.4);
    z-index: 10000;
    min-width: 300px;
    max-width: 400px;
    font-family: 'Courier New', monospace;
    pointer-events: all;
    display: none;
}

.fleet-popup.visible {
    display: block;
}

.fleet-popup-header {
    background: linear-gradient(180deg, #1a1a2a 0%, #0a0a1a 100%);
    border-bottom: 1px solid #00AAFF;
    padding: 8px 12px;
    cursor: grab;
    user-select: none;
}

.fleet-popup-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.fleet-popup-header-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fleet-popup-header-icon-btn {
    background: transparent;
    border: 1px solid #00AAFF;
    color: #00AAFF;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.fleet-popup-header-icon-btn:hover {
    background: rgba(0, 170, 255, 0.2);
    border-color: #00DDFF;
}

/* Anchor button & status */
.fleet-popup-header-icon-btn#fleet-anchor-btn {
    font-size: 15px;
}
.fleet-popup-header-icon-btn#fleet-anchor-btn.anchor-down {
    background: rgba(255, 180, 0, 0.25);
    border-color: #FFB400;
    color: #FFB400;
}
.fleet-anchor-status {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6699AA;
    margin-right: 4px;
}
.fleet-anchor-status.anchored {
    color: #FFB400;
    font-weight: bold;
}

/* Custom themed tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #1a2a3a 0%, #0a1520 100%);
    color: #00CCFF;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid #00AAFF;
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 100000;
    box-shadow: 0 0 6px rgba(0, 170, 255, 0.3);
}

[data-tooltip]:hover::after {
    opacity: 1;
}

.fleet-popup-name {
    color: #00AAFF;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fleet-popup-close-btn {
    background: transparent;
    border: 1px solid #00AAFF;
    color: #00AAFF;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.fleet-popup-close-btn:hover {
    background: #00AAFF;
    color: #000000;
}

.fleet-popup-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
}

.fleet-popup-location {
    color: #00AAFF;
}

.fleet-popup-status {
    color: #888;
}

.fleet-popup-status.status-moving {
    color: #FFD700;
}

.fleet-popup-status.status-idle {
    color: #00FF88;
}

/* Auto-Engage Toggle */
.fleet-auto-engage-row {
    padding: 4px 8px;
    border-top: 1px solid #333;
    display: flex;
    align-items: center;
}

.auto-engage-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 10px;
    user-select: none;
}

.auto-engage-toggle input[type="checkbox"] {
    display: none;
}

.auto-engage-slider {
    position: relative;
    width: 32px;
    height: 16px;
    background: #333;
    border-radius: 8px;
    border: 1px solid #555;
    transition: background 0.2s, border-color 0.2s;
}

.auto-engage-slider::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 10px;
    height: 10px;
    background: #888;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.auto-engage-toggle input:checked + .auto-engage-slider {
    background: rgba(255, 68, 68, 0.3);
    border-color: #FF4444;
}

.auto-engage-toggle input:checked + .auto-engage-slider::after {
    transform: translateX(16px);
    background: #FF4444;
}

.auto-engage-label {
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.auto-engage-toggle input:checked ~ .auto-engage-label {
    color: #FF4444;
}

/* Submarine Controls Row (submerge toggle + battery) */
.fleet-sub-controls-row {
    padding: 4px 8px;
    border-top: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sub-toggle input:checked + .sub-slider {
    background: rgba(0, 136, 255, 0.3);
    border-color: #0088ff;
}

.sub-toggle input:checked + .sub-slider::after {
    transform: translateX(16px);
    background: #0088ff;
}

.sub-toggle input:checked ~ .sub-label {
    color: #0088ff;
}

.sub-battery-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.sub-battery-text {
    font-size: 10px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #00FF88;
    white-space: nowrap;
}

.sub-battery-boxes {
    display: flex;
    gap: 3px;
}

.sub-battery-box {
    width: 10px;
    height: 10px;
    border: 1px solid #00aa00;
    border-radius: 1px;
}

.sub-battery-box.full {
    background: #00FF88;
    box-shadow: 0 0 3px #00FF88;
}

.sub-battery-box.empty {
    background: rgba(0, 255, 0, 0.1);
}

/* Fleet CAP Controls (header row) */
.fleet-cap-controls-row {
    padding: 4px 8px;
    border-top: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cap-toggle input:checked + .cap-slider {
    background: rgba(0, 170, 102, 0.3);
    border-color: #00AA66;
}

.cap-toggle input:checked + .cap-slider::after {
    transform: translateX(16px);
    background: #00FF88;
}

.cap-toggle input:checked ~ .cap-label {
    color: #00FF88;
}

/* Per-wing CAP button (inline) */
.cap-wing-btn {
    padding: 1px 5px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 7px;
    font-family: inherit;
    margin-left: auto;
    flex-shrink: 0;
}

.cap-wing-btn.cap-deploy-btn {
    background: #1a2a1a;
    color: #00FF88;
    border: 1px solid #00AA66;
}

.cap-wing-btn.cap-deploy-btn:hover {
    background: #2a3a2a;
}

.cap-wing-btn.cap-recall-btn {
    background: #2a1a1a;
    color: #FF6666;
    border: 1px solid #FF4444;
}

.cap-wing-btn.cap-recall-btn:hover {
    background: #3a2a2a;
}

/* Fleet/Aircraft Tab Bar */
.fleet-popup-tabs {
    display: flex;
    border-bottom: 1px solid #00AAFF;
    background: #0a0a1a;
}

.fleet-tab {
    flex: 1;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #668;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.fleet-tab:hover {
    color: #00AAFF;
    background: rgba(0, 170, 255, 0.05);
}

.fleet-tab.active {
    color: #00AAFF;
    border-bottom-color: #00AAFF;
    background: rgba(0, 170, 255, 0.1);
}

.fleet-popup-btn.tab-hidden {
    display: none !important;
}

.fleet-popup-content {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fleet-section {
    border: 1px solid #00AAFF;
    border-radius: 2px;
    background: rgba(0, 170, 255, 0.05);
}

.fleet-section h4 {
    margin: 0;
    padding: 6px 8px;
    background: rgba(0, 170, 255, 0.1);
    border-bottom: 1px solid #00AAFF;
    color: #00AAFF;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.fleet-ships-list,
.fleet-aircraft-list {
    padding: 6px;
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

.fleet-ship-item,
.fleet-aircraft-item {
    background: linear-gradient(180deg, #1a1a2a 0%, #0a0a1a 100%);
    border: 1px solid #00AAFF;
    padding: 6px 8px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    border-radius: 2px;
}

.fleet-ship-item.kia,
.fleet-aircraft-item.kia {
    border-color: #661111;
    background: linear-gradient(180deg, #1a0a0a 0%, #0a0505 100%);
    opacity: 0.8;
}

.kia-badge {
    color: #ff4444;
    font-weight: bold;
    font-size: 11px;
    margin-right: 6px;
    letter-spacing: 1px;
}

.kia-remove-btn {
    background: #1a0a0a;
    color: #ff6666;
    border: 1px solid #ff4444;
    border-radius: 3px;
    padding: 1px 6px;
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
}

.kia-remove-btn:hover {
    background: #ff4444;
    color: #fff;
}

/* === Cargo Panel (Send Resources) === */
.cargo-panel {
    padding: 6px;
}

.cargo-panel-header h4 {
    margin: 0 0 6px 0;
    color: #FFD700;
    font-size: 14px;
}

.cargo-warning {
    color: #FF8C00;
    font-size: 11px;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.3);
    border-radius: 4px;
}

.cargo-ship-section {
    background: rgba(0, 170, 255, 0.05);
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
}

.cargo-ship-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.cargo-ship-name {
    color: #00AAFF;
    font-weight: bold;
    font-size: 12px;
}

.cargo-ship-capacity {
    color: #aaa;
    font-size: 11px;
}

.cargo-bar-container {
    width: 100%;
    height: 6px;
    background: #1a1a2e;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.cargo-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00AAFF, #4ecca3);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.cargo-resources {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cargo-resource-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 2px 0;
}

.cargo-res-label {
    color: #bbb;
    min-width: 90px;
    font-size: 11px;
}

.cargo-res-amount {
    color: #e0f0ff;
    font-weight: bold;
    min-width: 40px;
    text-align: right;
}

.cargo-res-controls {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.cargo-input {
    width: 55px;
    background: #0a0a1e;
    color: #e0f0ff;
    border: 1px solid #333;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 10px;
    text-align: right;
}

.cargo-input:focus {
    border-color: #00AAFF;
    outline: none;
}

.cargo-load-btn,
.cargo-unload-btn {
    background: #1a1a2e;
    color: #00AAFF;
    border: 1px solid #00AAFF;
    border-radius: 3px;
    padding: 1px 5px;
    cursor: pointer;
    font-size: 9px;
    white-space: nowrap;
}

.cargo-load-btn:hover {
    background: #00AAFF;
    color: #fff;
}

.cargo-unload-btn {
    color: #4ecca3;
    border-color: #4ecca3;
}

.cargo-unload-btn:hover {
    background: #4ecca3;
    color: #fff;
}

.cargo-load-btn:disabled,
.cargo-unload-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cargo-bulk-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
}

.cargo-load-all-btn,
.cargo-unload-all-btn {
    background: #1a1a2e;
    border: 1px solid #00AAFF;
    color: #00AAFF;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 10px;
}

.cargo-load-all-btn:hover {
    background: #00AAFF;
    color: #fff;
}

.cargo-unload-all-btn {
    color: #4ecca3;
    border-color: #4ecca3;
}

.cargo-unload-all-btn:hover {
    background: #4ecca3;
    color: #fff;
}

.cargo-load-all-btn:disabled,
.cargo-unload-all-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cargo-panel-footer {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.cargo-close-btn {
    background: #1a1a2e;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 4px 16px;
    cursor: pointer;
    font-size: 11px;
}

.cargo-close-btn:hover {
    background: #333;
    color: #fff;
}

.ship-info,
.aircraft-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ship-type,
.aircraft-type {
    color: #00AAFF;
    font-weight: bold;
}

.ship-name {
    color: #888;
    font-size: 9px;
}

.ship-stats,
.aircraft-stats {
    text-align: right;
    color: #00FF88;
    font-size: 9px;
}

.loading {
    text-align: center;
    color: #888;
    padding: 12px;
    font-style: italic;
}

.empty-message {
    text-align: center;
    color: #4CAF50;
    padding: 12px;
    font-style: italic;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    opacity: 0.6;
}

.fleet-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #00AAFF;
    padding-top: 8px;
}

.fleet-popup-btn {
    background: linear-gradient(180deg, #2a2a3a 0%, #1a1a2a 100%);
    border: 1px solid #00AAFF;
    color: #00AAFF;
    padding: 8px 10px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    border-radius: 2px;
}

.fleet-popup-btn:hover {
    background: linear-gradient(180deg, #00AAFF 0%, #0088CC 100%);
    color: #000000;
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
    transform: translateY(-1px);
}

.fleet-popup-btn:active {
    transform: translateY(0);
}

.fleet-popup-btn.danger {
    border-color: #FF4444;
    color: #FF4444;
}

.fleet-popup-btn.danger:hover {
    background: linear-gradient(180deg, #FF4444 0%, #CC2222 100%);
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}

/* Submarine operations buttons */
.fleet-popup-btn.sub-ops {
    border-color: #00DDFF;
    color: #00DDFF;
}

.fleet-popup-btn.sub-ops:hover {
    background: linear-gradient(180deg, #00DDFF 0%, #0099BB 100%);
    color: #000;
    box-shadow: 0 0 10px rgba(0, 221, 255, 0.5);
}

/* Submarine status panel */
.sub-status-panel {
    background: rgba(0, 40, 60, 0.6);
    border: 1px solid #00DDFF;
    border-radius: 2px;
    padding: 6px 8px;
    margin-bottom: 6px;
    font-family: 'Courier New', monospace;
}

.sub-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.sub-status-label {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sub-battery-indicator {
    font-size: 10px;
    font-weight: bold;
}

.sub-battery-bar-container {
    width: 100%;
    height: 4px;
    background: #111;
    border-radius: 2px;
    margin-bottom: 4px;
    overflow: hidden;
}

.sub-battery-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background 0.3s ease;
}

.sub-status-details {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #888;
}

/* Submarine orders panel */
.sub-orders-panel {
    padding: 4px 0;
}

.sub-orders-field {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #aaa;
}

.sub-orders-field label {
    color: #ccc;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sub-orders-select {
    background: #1a1a2a;
    color: #00DDFF;
    border: 1px solid #00DDFF;
    padding: 3px 6px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    border-radius: 2px;
    flex: 1;
}

.sub-orders-number {
    background: #1a1a2a;
    color: #00DDFF;
    border: 1px solid #00DDFF;
    padding: 3px 6px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    border-radius: 2px;
    width: 40px;
    text-align: center;
}

.sub-orders-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

/* Carrier group in fleet popup */
.carrier-group {
    margin-bottom: 4px;
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.carrier-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(0, 170, 255, 0.12);
    border-bottom: 1px solid rgba(0, 170, 255, 0.2);
    font-size: 10px;
    color: #00CCFF;
    font-weight: bold;
    text-transform: uppercase;
}

.carrier-icon {
    font-size: 12px;
}

.carrier-label {
    flex: 1;
}

.carrier-capacity {
    color: #00FF88;
    font-size: 9px;
}

/* Send Aircraft Panel */
.send-aircraft-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.send-aircraft-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(0, 170, 255, 0.1);
    border: 1px solid #00AAFF;
    border-radius: 2px;
    color: #00AAFF;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.send-aircraft-cancel {
    background: none;
    border: 1px solid #FF4444;
    color: #FF4444;
    cursor: pointer;
    font-size: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.send-aircraft-cancel:hover {
    background: #FF4444;
    color: #000;
}

.send-aircraft-mission {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px;
}

.send-aircraft-mission-select {
    background: #0a0a1a;
    border: 1px solid #00AAFF;
    color: #00FFAA;
    padding: 4px 8px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    border-radius: 2px;
}

.send-aircraft-list {
    max-height: 180px;
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.send-aircraft-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: rgba(0, 170, 255, 0.05);
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
    font-size: 10px;
    color: #ccc;
}

.send-aircraft-row:hover {
    background: rgba(0, 170, 255, 0.12);
    border-color: #00AAFF;
}

.send-aircraft-checkbox {
    accent-color: #00AAFF;
}

.send-aircraft-label {
    flex: 1;
    color: #ddd;
}

.send-aircraft-cond {
    font-size: 9px;
    font-weight: bold;
}

.send-aircraft-actions {
    padding: 4px;
}

.island-popup-label {
    flex: 1;
    text-align: left;
}

/* Aircraft Selection Popup */
.aircraft-popup {
    min-width: 400px;
    max-width: 600px;
    max-height: 80vh;
    overflow: visible; /* Allow tooltips to extend outside */
}

.aircraft-popup-body {
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow: visible; /* Allow tooltips to extend outside */
}

.aircraft-list {
    padding: 10px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: visible; /* Allow tooltip to extend outside */
    border-bottom: 1px solid #00FF88;
}

.aircraft-item {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 1px solid #00FF88;
    padding: 8px 10px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative; /* Allow absolute positioning of tooltip */
}

.aircraft-item:hover {
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.aircraft-item.selected {
    background: linear-gradient(180deg, #003322 0%, #001a11 100%);
    border-color: #00FFAA;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
}

.aircraft-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #00FF88;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.aircraft-checkbox.checked {
    background: #00FF88;
}

.aircraft-checkbox.checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 14px;
    font-weight: bold;
}

.aircraft-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aircraft-name {
    color: #00FF88;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.aircraft-location {
    color: #00CCAA;
    font-size: 10px;
}

.aircraft-resources {
    color: #888;
    font-size: 10px;
    display: flex;
    gap: 12px;
}

.aircraft-resource {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Aircraft tooltip with detailed stats */
.aircraft-info {
    position: relative;
}

.aircraft-tooltip {
    display: none;
    position: fixed;
    background: rgba(0, 20, 20, 0.98);
    border: 1px solid #00FF88;
    border-radius: 4px;
    padding: 10px;
    min-width: 200px;
    z-index: 10001;
    font-size: 10px;
    box-shadow: 0 4px 8px rgba(0, 255, 136, 0.3);
    pointer-events: none; /* Don't interfere with mouse events */
}

/* Tooltip visibility is now handled by JavaScript for fixed positioning */

.aircraft-tooltip .tooltip-section {
    margin-bottom: 8px;
}

.aircraft-tooltip .tooltip-section:last-child {
    margin-bottom: 0;
}

.aircraft-tooltip strong {
    color: #00FF88;
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
}

.aircraft-tooltip div {
    color: #00CCAA;
    line-height: 1.6;
    padding-left: 4px;
}

.aircraft-popup-actions {
    padding: 10px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.aircraft-popup-actions button {
    flex: 1;
    padding: 10px;
    font-size: 11px;
}

/* Wing Group in Aircraft Popup */
.wing-group {
    margin-bottom: 8px;
    border: 1px solid #00FF88;
    background: linear-gradient(180deg, #0d1a0d 0%, #0a0a0a 100%);
}

.wing-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    transition: all 0.2s ease;
}

.wing-group-header:hover:not(.disabled) {
    background: linear-gradient(180deg, #1a2a1a 0%, #0d1a0d 100%);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.wing-group-header.selected {
    background: linear-gradient(180deg, #003322 0%, #001a11 100%);
    border-color: #00FFAA;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
}

.wing-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #00FF88;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.wing-checkbox.checked {
    background: #00FF88;
}

.wing-checkbox.checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 14px;
    font-weight: bold;
}

.wing-group-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wing-group-name {
    color: #00FF88;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.wing-group-count {
    color: #00CCAA;
    font-size: 11px;
}

.wing-group-summary {
    color: #888;
    font-size: 10px;
    display: flex;
    gap: 12px;
}

.wing-group-arrow {
    color: #00FF88;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    user-select: none;
    flex-shrink: 0;
}

.wing-group-arrow:hover {
    color: #00FFAA;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
}

.wing-group-aircraft {
    border-top: 1px solid rgba(0, 255, 136, 0.3);
    padding: 4px 8px 4px 30px;
}

.aircraft-child {
    padding: 4px 8px;
    margin-bottom: 3px;
    border: none;
    background: rgba(0, 20, 10, 0.5);
    font-size: 10px;
}

.aircraft-child .aircraft-name {
    font-size: 11px;
}

.aircraft-child .aircraft-resources {
    font-size: 9px;
}

/* Fleet/Ship Selection Popup */
.fleet-popup {
    min-width: 400px;
    max-width: 600px;
    max-height: 80vh;
    overflow: visible;
}

.fleet-popup-body {
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow: visible;
}

.ship-list {
    padding: 10px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: visible;
    border-bottom: 1px solid #00FF88;
}

.ship-item {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 1px solid #00FF88;
    padding: 8px 10px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.ship-item:hover {
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.ship-item.selected {
    background: linear-gradient(180deg, #003322 0%, #001a11 100%);
    border-color: #00FFAA;
    box-shadow: 0 0 12px rgba(0, 255, 170, 0.5);
}

.ship-checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid #00FF88;
    border-radius: 2px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

.ship-item.selected .ship-checkbox {
    background: #00FF88;
    border-color: #00FFAA;
}

.ship-item.selected .ship-checkbox::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 12px;
    font-weight: bold;
}

.ship-info {
    flex: 1;
    min-width: 0;
    position: relative;
}

.ship-name {
    color: #00FF88;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.ship-type {
    color: #00CCAA;
    font-size: 10px;
    margin-bottom: 4px;
}

.ship-resources {
    color: #888;
    font-size: 10px;
    display: flex;
    gap: 12px;
}

.ship-resource {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Ship tooltip with detailed stats */
.ship-tooltip {
    display: none;
    position: fixed;
    background: rgba(0, 20, 20, 0.98);
    border: 1px solid #00FF88;
    border-radius: 4px;
    padding: 10px;
    min-width: 250px;
    max-width: 350px;
    z-index: 10001;
    font-size: 10px;
    box-shadow: 0 4px 8px rgba(0, 255, 136, 0.3);
    pointer-events: none;
    max-height: 500px;
    overflow-y: auto;
}

.ship-tooltip .tooltip-section {
    margin-bottom: 8px;
}

.ship-tooltip .tooltip-section:last-child {
    margin-bottom: 0;
}

.ship-tooltip strong {
    color: #00FF88;
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
}

.ship-tooltip div {
    color: #00CCAA;
    line-height: 1.6;
    padding-left: 4px;
}

/* Enhanced ship tooltip styles */
.tooltip-ship {
    background: rgba(0, 30, 30, 0.6);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 3px;
    padding: 8px;
    margin-bottom: 8px;
}

.tooltip-ship:last-child {
    margin-bottom: 0;
}

.tooltip-ship-header {
    border-bottom: 1px solid rgba(0, 255, 136, 0.3);
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.tooltip-ship-header strong {
    color: #00FFAA;
    font-size: 11px;
    margin-bottom: 0;
}

.tooltip-ship-stats,
.tooltip-ship-combat,
.tooltip-ship-experience {
    margin-bottom: 6px;
}

.tooltip-ship-stats div,
.tooltip-ship-combat div,
.tooltip-ship-experience div {
    font-size: 10px;
    color: #00DDAA;
    padding-left: 8px;
    line-height: 1.5;
}

.tooltip-ship-experience div {
    color: #FFD700;
}

.fleet-popup-actions {
    padding: 10px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.fleet-popup-actions button {
    flex: 1;
    padding: 10px;
    font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════
   Fortress Combat Report Modal
   ═══════════════════════════════════════════════════════════════ */
.fortress-combat-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fortressFadeIn 0.3s ease;
}

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

.fortress-combat-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 2px solid #e94560;
    border-radius: 12px;
    width: 720px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(233, 69, 96, 0.3), 0 0 80px rgba(0, 0, 0, 0.5);
    color: #e0e0e0;
    font-family: 'Segoe UI', sans-serif;
}

.combat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(233, 69, 96, 0.2) 0%, transparent 100%);
    border-bottom: 1px solid rgba(233, 69, 96, 0.3);
}

.combat-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.combat-title {
    flex: 1;
}

.combat-title h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #e94560;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.combat-subtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.fortress-name {
    font-size: 13px;
    color: #a0c4ff;
}

.combat-turn {
    font-size: 12px;
    color: #888;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

.combat-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}

.combat-close-btn:hover {
    color: #e94560;
}

.combat-body {
    padding: 16px 20px;
}

.combat-section {
    margin-bottom: 16px;
}

.combat-section h3 {
    font-size: 14px;
    color: #ffd700;
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.combat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.combat-table thead th {
    background: rgba(255, 255, 255, 0.05);
    color: #a0a0a0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.combat-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
}

.combat-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.combat-table tbody td {
    padding: 6px 8px;
    vertical-align: middle;
}

.unit-name {
    color: #e0e0e0;
    font-weight: 500;
}

.unit-nation {
    color: #a0c4ff;
}

.unit-fleet, .unit-mission {
    color: #888;
    font-style: italic;
}

.engagement-distance {
    color: #ccc;
    text-align: center;
}

.incoming-fire {
    color: #ff8a65;
}

.engagement-result {
    font-weight: 700;
    text-align: center;
}

.engagement-result.hit {
    color: #4caf50;
}

.engagement-result.miss {
    color: #666;
}

.engagement-damage {
    color: #ff5252;
    font-weight: 600;
    text-align: center;
}

.unit-status {
    font-weight: 600;
    text-align: right;
}

.unit-status.destroyed {
    color: #ff1744;
    text-transform: uppercase;
}

.unit-status.damaged {
    color: #ff9800;
}

.unit-status.intact {
    color: #666;
}

/* Exchange-row styles for fortress combat (legacy) */
.exchange-row td { padding: 5px 8px; vertical-align: middle; }
.exchange-num { color: #666; text-align: center; width: 24px; font-size: 11px; }
.exchange-attacker { color: #e0e0e0; font-weight: 500; white-space: nowrap; }
.exchange-arrow { color: #555; text-align: center; width: 20px; font-size: 14px; }
.exchange-target { color: #a0c4ff; font-weight: 500; white-space: nowrap; }
.exchange-result { font-weight: 700; text-align: center; }
.exchange-result.hit { color: #ff5252; }
.exchange-result.miss { color: #666; }
.exchange-damage { color: #ff8a65; text-align: center; }
.exchange-hp { font-weight: 600; text-align: center; }
.exchange-hp.destroyed { color: #ff1744; }
.exchange-hp.damaged { color: #ff9800; }
.exchange-hp.intact { color: #4caf50; }
.attack-row { background: rgba(255, 140, 0, 0.05); }
.defense-row { background: rgba(100, 149, 237, 0.05); border-bottom: 1px solid rgba(255,255,255,0.08) !important; }

/* ── Fortress Combat Card System ── */
.fc-cards { display: flex; flex-direction: column; gap: 6px; }
.fc-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
}
.fc-attack { background: rgba(255, 140, 0, 0.08); border-left: 3px solid #ff8c00; }
.fc-defend { background: rgba(100, 149, 237, 0.08); border-left: 3px solid #6495ed; }
.fc-card-who { color: #e0e0e0; font-weight: 500; white-space: nowrap; }
.fc-card-who .fc-icon { font-size: 14px; margin-right: 4px; }
.fc-card-action { color: #666; font-style: italic; font-size: 11px; text-align: center; }
.fc-card-result {
    font-weight: 800; font-size: 13px; text-align: center;
    padding: 2px 10px; border-radius: 4px; text-transform: uppercase;
    min-width: 50px;
}
.fc-hit { color: #fff; background: rgba(255, 40, 40, 0.6); }
.fc-miss { color: #888; background: rgba(100, 100, 100, 0.3); }
.fc-card-dmg { color: #ff8a65; font-weight: 600; text-align: center; white-space: nowrap; }
.fc-card-destroyed {
    color: #ff1744; font-weight: 800; text-align: center;
    font-size: 13px; text-transform: uppercase;
}
.fc-hp-bar {
    position: relative; height: 16px; background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden; min-width: 80px;
}
.fc-hp-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.fc-hp-text {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.fc-mission { color: #888; font-style: italic; font-size: 10px; }
.fc-verdict {
    text-align: center; padding: 10px; margin: 12px 0 8px;
    border-radius: 6px; background: rgba(0,0,0,0.3); border: 1px solid;
    font-size: 14px; font-weight: bold;
}
.fc-summary {
    display: flex; gap: 16px; padding: 10px;
    background: rgba(0,0,0,0.3); border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}
.fc-stat { flex: 1; text-align: center; }
.fc-stat-num { display: block; font-size: 20px; font-weight: 700; color: #e0e0e0; }
.fc-stat-label { display: block; font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.combat-skip-btn {
    padding: 8px 24px; border: 1px solid #555; background: transparent;
    color: #888; border-radius: 5px; cursor: pointer; font-size: 13px;
}
.combat-skip-btn:hover { background: rgba(255,255,255,0.05); color: #aaa; }

.combat-summary {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-stat {
    flex: 1;
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #e0e0e0;
}

.stat-value.damage-dealt {
    color: #4caf50;
}

.stat-value.damage-received {
    color: #ff5252;
}

.combat-footer {
    padding: 12px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.combat-dismiss-btn {
    background: linear-gradient(135deg, #1a5276, #2980b9);
    color: #fff;
    border: 1px solid #3498db;
    padding: 8px 32px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.combat-dismiss-btn:hover {
    background: linear-gradient(135deg, #2980b9, #3498db);
    box-shadow: 0 0 12px rgba(52, 152, 219, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   Government in Exile Banner
   ═══════════════════════════════════════════════════════════════ */
.exile-banner {
    background: linear-gradient(180deg, #3b0d0d 0%, #1a0505 100%);
    border-top: 2px solid #ff4444;
    border-bottom: 2px solid #ff4444;
    padding: 4px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: exile-pulse 2s ease-in-out infinite;
}
@keyframes exile-pulse {
    0%, 100% { border-color: #ff4444; }
    50% { border-color: #ff8800; }
}
.exile-banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Courier New', monospace;
}
.exile-icon {
    font-size: 14px;
}
.exile-text {
    color: #ff6666;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.exile-penalty {
    color: #ffaa44;
    font-size: 10px;
    letter-spacing: 1px;
}
.exile-capital-btn {
    background: linear-gradient(135deg, #3b0d0d, #661a1a) !important;
    border: 1px solid #ff4444 !important;
    animation: exile-btn-pulse 2s ease-in-out infinite;
}
.exile-capital-btn:hover {
    background: linear-gradient(135deg, #661a1a, #993333) !important;
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.4) !important;
}
@keyframes exile-btn-pulse {
    0%, 100% { border-color: #ff4444; }
    50% { border-color: #ff8800; }
}

/* =============================================
   Communications Center – Courier / Radio / Diplomacy / Intelligence
   ============================================= */

/* Sub-tab bar container */
.comm-sub-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
    border-bottom: 1px solid #333;
    margin-bottom: 0.75rem;
}

/* Sub-tab buttons (Inbox / Sent / actions) */
.comm-sub-tab {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
}
.comm-sub-tab:hover:not(.active) {
    background: rgba(0, 68, 68, 0.5);
    color: #00FF88;
    border-top-color: rgba(0, 255, 136, 0.5);
}
.comm-sub-tab.active {
    background: rgba(0, 255, 136, 0.1);
    border-top-color: #00FF88;
    color: #00FF88;
}
/* Action sub-tabs (compose, refresh, etc.) — right-aligned with accent color */
.comm-sub-tab.action {
    margin-left: auto;
    color: #00ff88;
    border-top-color: transparent;
}
.comm-sub-tab.action + .comm-sub-tab.action {
    margin-left: 0;
}
.comm-sub-tab.action:hover {
    background: rgba(0, 255, 136, 0.08);
    border-top-color: rgba(0, 255, 136, 0.5);
    color: #00ff88;
}

/* Comm sub-tab tooltip */
.comm-sub-tab.has-tooltip {
    position: relative;
}
.comm-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    padding: 0.5rem 0.7rem;
    background: rgba(0, 20, 10, 0.95);
    border: 1px solid rgba(0, 255, 136, 0.5);
    border-radius: 3px;
    color: #a0ffc0;
    font-size: 0.75rem;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
    z-index: 100;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.15);
    pointer-events: none;
}
.comm-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgba(0, 255, 136, 0.5);
}
.comm-sub-tab.has-tooltip:hover .comm-tooltip {
    display: block;
}

/* Compose areas */
.compose-area {
    display: none;
    background: rgba(0, 40, 20, 0.6);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 4px;
    padding: 1rem;
    margin: 0.75rem 0;
}
.compose-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.compose-form select,
.compose-form input[type="text"],
.compose-form input[type="password"],
.compose-form textarea {
    background: rgba(0, 30, 15, 0.9);
    border: 1px solid rgba(0, 255, 136, 0.4);
    color: #e0ffe0;
    padding: 0.4rem 0.6rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    border-radius: 2px;
}
.compose-form textarea {
    min-height: 80px;
    resize: vertical;
}
.compose-form select:focus,
.compose-form input:focus,
.compose-form textarea:focus {
    outline: none;
    border-color: #00FF88;
    box-shadow: 0 0 4px rgba(0, 255, 136, 0.3);
}
.compose-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Communications Modal Overlay */
.comms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}
.comms-modal {
    background: linear-gradient(180deg, rgba(0, 30, 15, 0.98) 0%, rgba(0, 20, 10, 0.98) 100%);
    border: 2px solid rgba(0, 255, 136, 0.6);
    border-radius: 4px;
    width: 420px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.15), 0 0 60px rgba(0, 0, 0, 0.5);
    animation: commsModalIn 0.15s ease-out;
}
@keyframes commsModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.comms-modal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 255, 136, 0.3);
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #00FF88;
}
.comms-modal-close {
    margin-left: auto;
    background: none;
    border: 1px solid rgba(255, 100, 100, 0.4);
    color: #ff6b6b;
    font-size: 1.2rem;
    line-height: 1;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: all 0.2s ease;
}
.comms-modal-close:hover {
    background: rgba(255, 100, 100, 0.15);
    border-color: #ff6b6b;
    box-shadow: 0 0 6px rgba(255, 100, 100, 0.3);
}
.comms-modal-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
}
.comms-modal-body label {
    color: #80ffbb;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}
.comms-modal-body select,
.comms-modal-body input[type="text"],
.comms-modal-body input[type="password"],
.comms-modal-body textarea {
    background: rgba(0, 30, 15, 0.9);
    border: 1px solid rgba(0, 255, 136, 0.4);
    color: #e0ffe0;
    padding: 0.5rem 0.7rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    border-radius: 2px;
    width: 100%;
    box-sizing: border-box;
}
.comms-modal-body textarea {
    min-height: 90px;
    resize: vertical;
}
.comms-modal-body select:focus,
.comms-modal-body input:focus,
.comms-modal-body textarea:focus {
    outline: none;
    border-color: #00FF88;
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.3);
}
.comms-modal-body .radio-options {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #a0ffc0;
}
.comms-modal-body .route-status {
    font-size: 0.8rem;
    padding: 0.3rem 0;
}
.comms-modal-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(0, 255, 136, 0.3);
    display: flex;
    justify-content: flex-end;
}
.comms-modal-send {
    background: rgba(0, 80, 40, 0.8) !important;
    border-color: #00FF88 !important;
    padding: 0.4rem 1.2rem !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.comms-modal-send:hover {
    background: rgba(0, 255, 136, 0.2) !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4) !important;
}

/* Notice bar (e.g. "No Radio Tower") */
.notice-bar {
    background: rgba(100, 60, 0, 0.35);
    border: 1px solid rgba(255, 170, 0, 0.5);
    color: #ffcc66;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 3px;
    margin-bottom: 0.75rem;
}

/* Route status indicator */
.route-status {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    min-height: 1.2em;
}

/* Badge (unread count) */
.badge {
    display: inline-block;
    background: #d32f2f;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    margin-left: 0.3rem;
    vertical-align: middle;
}

/* Courier message card */
.courier-msg {
    background: rgba(0, 40, 20, 0.4);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    transition: border-color 0.2s;
}
.courier-msg.unread {
    border-left: 3px solid #00FF88;
    background: rgba(0, 60, 30, 0.5);
}
.courier-msg.sent {
    border-left: 3px solid rgba(0, 255, 136, 0.4);
}
.courier-msg-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}
.courier-msg-header strong {
    color: #00FF88;
    font-size: 0.9rem;
}
.courier-turn {
    color: rgba(0, 255, 136, 0.6);
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
}
.courier-status {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}
.courier-subject {
    color: #00ff88;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}
.courier-body {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: pre-wrap;
}
.courier-content {
    flex: 1;
    overflow-y: auto;
}

/* Radio message card */
.radio-msg {
    background: rgba(0, 30, 50, 0.4);
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.radio-msg.sent {
    border-left: 3px solid rgba(0, 170, 255, 0.4);
}
.radio-msg-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}
.radio-msg-header strong {
    color: #55ccff;
    font-size: 0.9rem;
}
.radio-turn {
    color: rgba(0, 170, 255, 0.6);
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
}
.radio-signal {
    color: rgba(0, 255, 136, 0.8);
    font-size: 0.75rem;
}
.radio-encrypted {
    font-size: 0.75rem;
    color: #ffcc00;
}
.radio-relayed {
    font-size: 0.75rem;
    color: #aa88ff;
}
.radio-intercepted {
    font-size: 0.75rem;
    color: #ff6644;
}
.radio-body {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: pre-wrap;
}
.radio-content {
    flex: 1;
    overflow-y: auto;
}

/* Towers panel */
.towers-panel {
    display: none;
    background: rgba(0, 30, 15, 0.5);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 4px;
    padding: 0.75rem;
    margin: 0.75rem 0;
}
.tower-card {
    background: rgba(0, 50, 25, 0.4);
    border: 1px solid rgba(0, 255, 136, 0.25);
    border-radius: 4px;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
}
.tower-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.tower-header strong {
    color: #00FF88;
}
.tower-tech {
    color: #55ccff;
    font-size: 0.8rem;
}
.tower-range {
    color: rgba(0, 255, 136, 0.7);
    font-size: 0.8rem;
}
.tower-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    align-items: center;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
}
.tower-settings label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}
.tower-settings input[type="checkbox"] {
    accent-color: #00FF88;
}

/* Diplomacy cards */
.diplo-section {
    margin-bottom: 1rem;
}
.diplo-section h5 {
    color: #00FF88;
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2);
    padding-bottom: 0.25rem;
}
.diplo-card {
    background: rgba(0, 40, 20, 0.4);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}
.diplo-card.pending {
    border-left: 3px solid #ffcc00;
}
.diplo-card.active {
    border-left: 3px solid #00FF88;
}
.diplo-card strong {
    color: #00FF88;
}
.diplo-terms {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin: 0.3rem 0;
    font-size: 0.8rem;
}
.diplo-since {
    color: rgba(0, 255, 136, 0.5);
    font-size: 0.75rem;
    margin-left: 0.5rem;
}
.diplo-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* Intelligence / Intercept reports */
.intel-report {
    background: rgba(50, 20, 0, 0.35);
    border: 1px solid rgba(255, 136, 0, 0.25);
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.intel-report.unread {
    border-left: 3px solid #ff8800;
    background: rgba(60, 30, 0, 0.45);
}
.intel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}
.intel-header strong {
    color: #ff8800;
    font-size: 0.9rem;
}
.intel-details {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.35rem;
}
.intel-message {
    font-size: 0.85rem;
    line-height: 1.4;
}
.garbled {
    color: rgba(255, 100, 100, 0.7);
    font-style: italic;
    letter-spacing: 0.5px;
}