/* Base styles */
        body { font-family: 'Inter', sans-serif; background-color: #1a202c; color: #e2e8f0; overscroll-behavior: none; }
        .ship-grid { display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(8, 1fr); gap: 1px; border: none; padding: 0; background-color: transparent; width: 100%; max-width: 600px; aspect-ratio: 15 / 8; margin: auto; position: relative; min-width: 0; }
        .ship-grid .rooms-layer { display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(8, 1fr); gap: 1px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center center; }
        .room { background-color: #4a5568; border: 1px solid #718096; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.75rem; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; position: relative; padding: 2px; text-align: center; overflow: hidden; min-width: 0; min-height: 0; }
        .room-name { font-weight: bold; font-size: 1rem; line-height: 1; margin-bottom: 1px; }
        .room-system, .enemy-room-system-details { font-size: 0.5rem; line-height: 1; color: #a0aec0; transition: color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
        .room:hover { background-color: #a0aec0; }
        .room.targeted-by-autofire::after { content: '🎯'; position: absolute; top: -5px; right: -5px; font-size: 1rem; background-color: rgba(255, 0, 0, 0.7); border-radius: 50%; padding: 1px; line-height: 1; pointer-events: none; z-index: 5; }
        .room.targeted-by-onetime::after { content: '🎯'; position: absolute; top: -5px; right: -5px; font-size: 1rem; background-color: rgba(255, 255, 0, 0.7); border-radius: 50%; padding: 1px; line-height: 1; pointer-events: none; z-index: 5; }
        .room.targeted-by-enemy::before { content: '💥'; position: absolute; top: -5px; left: -5px; font-size: 1rem; background-color: rgba(255, 165, 0, 0.7); border-radius: 50%; padding: 1px; line-height: 1; pointer-events: none; z-index: 5; }

        /* --- Status Indicator Styles --- */
        .room-system.damaged, .enemy-room-system-details.damaged { color: #f6ad55 !important; }
        .room-system.ion-disabled, .enemy-room-system-details.ion-disabled { color: #c084fc !important; }
        .room-system.destroyed, .enemy-room-system-details.destroyed { color: #f56565 !important; text-decoration: line-through; }
        .room.ion-disabled { border-color: #a855f7; background-color: #581c87; }
        .system-slot.ion-disabled, .weapon-slot.ion-disabled { border-color: #a855f7 !important; opacity: 0.7; }
        .system-slot.destroyed, .weapon-slot.destroyed { border-color: #e53e3e !important; opacity: 0.5; }
        .disabled-indicator { font-weight: bold; font-size: 0.7rem; margin-top: 2px; }
        .disabled-indicator.ion { color: #c084fc; }
        .disabled-indicator.destroyed { color: #f56565; }
        .system-slot.manned, .weapon-slot.manned { border-color: #63b3ed; }
        /* Teleporter Arrow Controls */
        .teleporter-controls { display: flex; flex-direction: column; gap: 2px; margin-left: 4px; }
        .teleporter-arrow-btn { width: 18px; height: 16px; padding: 0; border: 1px solid #4a5568; background: #2d3748; color: #a0aec0; cursor: pointer; font-size: 10px; line-height: 1; display: flex; align-items: center; justify-content: center; }
        .teleporter-arrow-btn:hover:not(:disabled) { background: #4a5568; color: #fff; }
        .teleporter-arrow-btn:disabled { opacity: 0.3; cursor: not-allowed; }
        .teleporter-arrow-btn.active { background: #805ad5; color: #fff; border-color: #9f7aea; }
        /* Cloaking Controls */
        .cloaking-controls { display: flex; flex-direction: column; gap: 2px; margin-left: 4px; min-width: 50px; }
        .cloaking-btn { padding: 2px 6px; border: 1px solid #4a5568; background: #2d3748; color: #a0aec0; cursor: pointer; font-size: 9px; font-weight: bold; border-radius: 3px; }
        .cloaking-btn:hover:not(:disabled) { background: #4a5568; color: #fff; }
        .cloaking-btn:disabled { opacity: 0.3; cursor: not-allowed; }
        .cloaking-btn.active { background: #805ad5; color: #fff; border-color: #9f7aea; animation: cloak-pulse 1s infinite; }
        .cloaking-btn.cooldown { background: #553c9a; opacity: 0.6; }
        .cloaking-status { font-size: 8px; color: #a0aec0; text-align: center; }
        .cloaking-status.active { color: #9f7aea; font-weight: bold; }
        .cloaking-status.cooldown { color: #718096; }
        @keyframes cloak-pulse { 0%, 100% { box-shadow: 0 0 4px #805ad5; } 50% { box-shadow: 0 0 8px #9f7aea; } }
        /* Clone Bay Styles */
        .clone-bay-display { display: flex; flex-direction: column; gap: 2px; margin-left: 4px; min-width: 40px; }
        .clone-bay-queue { display: flex; gap: 2px; min-height: 14px; }
        .clone-queue-portrait { width: 14px; height: 14px; border-radius: 50%; background: #4a5568; border: 1px solid #718096; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #e2e8f0; }
        .clone-queue-portrait.cloning { border-color: #48bb78; animation: cloning-pulse 1s infinite; }
        @keyframes cloning-pulse { 0%, 100% { box-shadow: 0 0 2px #48bb78; } 50% { box-shadow: 0 0 6px #48bb78; } }
        .clone-progress-container { width: 100%; height: 4px; background: #2d3748; border-radius: 2px; overflow: hidden; }
        .clone-progress-bar { height: 100%; background: #48bb78; transition: width 0.1s linear; }
        .clone-progress-bar.dna-loss { background: #f56565; }
        /* --- End Status Indicator Styles --- */

        /* --- Crew Styles --- */
        .crew-member { width: 14px; height: 22px; border-radius: 50%; border: 2px solid #fff; position: absolute; cursor: pointer; transition: transform 0.3s ease-out, border-color 0.2s; z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: bold; color: white; text-shadow: 1px 1px 1px black; box-sizing: border-box; background: rgba(0,0,0,0.3); }
        .crew-member.repairing { border-color: #68d391; }
        .crew-member::before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        /* Crew Body Colors - Faction based */
        .crew-member.player-crew { background-color: rgba(66, 153, 225, 0.8); } /* Blue body */
        .crew-member.enemy-crew { background-color: rgba(245, 101, 101, 0.8); } /* Red body */

        /* Race Head Colors */
        .crew-member.race-human::before { background-color: #f6ad55; } /* Skin/Orange */
        .crew-member.race-mechanic::before { background-color: #a0aec0; } /* Grey */
        .crew-member.race-hunter::before { background-color: #48bb78; } /* Green */
        .crew-member.race-heavy::before { background-color: #742a2a; } /* Dark Red/Brown */
        .crew-member.race-energy::before { background-color: #ecc94b; } /* Gold */
        .crew-member.race-psychic::before { background-color: #9f7aea; } /* Purple */
        .crew-member.race-anaerobic::before { background-color: #cbd5e0; } /* Metal */
        .crew-member.race-crystalline::before { background-color: #63b3ed; } /* Crystal Blue */

        .crew-member.selected { border-color: #f6e05e !important; transform: scale(1.2); border-image-source: none; }
        .crew-member.manning { border-color: #63b3ed !important; border-image-source: none; }
        /* Boarder (Enemy Crew) Styles */
        .crew-member.boarder { border-color: #e53e3e !important; box-shadow: 0 0 6px 2px rgba(229, 62, 62, 0.7); }
        /* .crew-member.boarder::before removed to allow race colors to show */
        .crew-member.boarder.fighting { animation: boarder-fighting 0.3s infinite; }
        .crew-member.boarder.sabotaging { animation: boarder-sabotaging 0.5s infinite; }
        /* Player Boarder (Player's crew teleported to enemy ship) */
        .crew-member.player-boarder { background-color: rgba(66, 153, 225, 0.8); border-color: #38a169 !important; box-shadow: 0 0 6px 2px rgba(56, 161, 105, 0.7); }
        @keyframes boarder-fighting { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
        @keyframes boarder-sabotaging { 0%, 100% { box-shadow: 0 0 6px 2px rgba(229, 62, 62, 0.7); } 50% { box-shadow: 0 0 10px 4px rgba(255, 165, 0, 0.9); } }
        /* Crew Health Indicators */
        .crew-member.health-critical { animation: pulse-critical 0.5s infinite; }
        @keyframes pulse-critical { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
        .crew-health-bar { position: absolute; width: 14px; height: 3px; background: #1a202c; border-radius: 1px; overflow: hidden; pointer-events: none; }
        .crew-health-fill { height: 100%; background: linear-gradient(90deg, #48bb78, #68d391); transition: width 0.3s; }
        .health-damaged .crew-health-fill { background: linear-gradient(90deg, #d69e2e, #ecc94b); }
        .health-injured .crew-health-fill { background: linear-gradient(90deg, #c05621, #ed8936); }
        .health-critical .crew-health-fill { background: linear-gradient(90deg, #c53030, #e53e3e); }
        .crew-name { display: none; }
        /* --- End Crew Styles --- */

        /* --- System Sprite Styles --- */
        .system-sprite {
            display: inline-block;
            background-repeat: no-repeat;
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: crisp-edges;
            filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white);
        }
        .room-name .system-sprite {
            display: block;
            margin: 0 auto;
        }
        .room-palette-item .system-sprite {
            display: block;
            margin: 0 auto;
        }
        /* --- End System Sprite Styles --- */

        /* --- Door Indicator Styles (Game UI) --- */
        .door-indicator {
            position: absolute;
            background-color: rgba(205, 115, 50, 0.8);
            border-radius: 2px;
            z-index: 3;
            pointer-events: none;
            transition: background-color 0.2s;
        }
        .door-indicator.clickable {
            pointer-events: auto;
            cursor: pointer;
        }
        .door-indicator.clickable:hover {
            filter: brightness(1.2);
            transform: scale(1.1);
        }
        .door-indicator.open {
            background-color: rgba(239, 68, 68, 0.9);
        }
        .door-indicator.airlock {
            background-color: rgba(237, 137, 54, 0.9);
        }
        .door-indicator.airlock.open {
            background-color: rgba(239, 68, 68, 0.9);
            animation: airlock-pulse 0.5s ease-in-out infinite alternate;
        }
        @keyframes airlock-pulse {
            0% { opacity: 0.7; }
            100% { opacity: 1; }
        }
        /* --- End Door Indicator Styles --- */

        /* --- Oxygen Level Room Styles --- */
        .room.low-oxygen {
            background-color: #5a4848 !important;
        }
        .room.very-low-oxygen {
            background-color: #6b4444 !important;
            animation: oxygen-warning 1s ease-in-out infinite alternate;
        }
        .room.no-oxygen {
            background-color: #7a3a3a !important;
            animation: oxygen-critical 0.5s ease-in-out infinite alternate;
        }
        @keyframes oxygen-warning {
            0% { opacity: 0.9; }
            100% { opacity: 1; }
        }
        @keyframes oxygen-critical {
            0% { background-color: #7a3a3a; }
            100% { background-color: #8a2a2a; }
        }
        /* --- End Oxygen Level Room Styles --- */

        /* --- Fire Indicator Styles --- */
        .room.on-fire {
            animation: fire-glow 0.5s ease-in-out infinite alternate;
        }
        @keyframes fire-glow {
            0% { box-shadow: inset 0 0 10px rgba(255, 100, 0, 0.4); }
            100% { box-shadow: inset 0 0 20px rgba(255, 50, 0, 0.6); }
        }
        .fire-indicator {
            position: absolute;
            width: 16px;
            height: 16px;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 4;
            animation: fire-flicker 0.3s ease-in-out infinite alternate;
        }
        .fire-indicator::before {
            content: '🔥';
            font-size: 14px;
            display: block;
            text-align: center;
            animation: fire-dance 0.4s ease-in-out infinite;
        }
        @keyframes fire-flicker {
            0% { transform: translate(-50%, -50%) scale(0.9); }
            100% { transform: translate(-50%, -50%) scale(1.1); }
        }
        @keyframes fire-dance {
            0%, 100% { transform: rotate(-5deg); }
            50% { transform: rotate(5deg); }
        }
        /* --- End Fire Indicator Styles --- */

        /* --- Hull Breach Indicator Styles --- */
        .room.breached {
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9);
            border-color: #718096; /* Ensure border is visible */
        }
        .breach-warning {
            position: absolute;
            top: 1px;
            right: 1px;
            font-size: 10px;
            pointer-events: none;
            z-index: 5;
            animation: warning-blink 1s infinite;
        }
        @keyframes warning-blink {
            0%, 100% { opacity: 1; text-shadow: 0 0 2px black; }
            50% { opacity: 0.3; }
        }
        .breach-indicator {
            position: absolute;
            width: 14px;
            height: 14px;
            background-color: #000;
            border: 2px solid #718096;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 2; /* Below fire (z-index 4), below crew (z-index 10) */
            box-shadow: inset 2px 2px 5px rgba(0,0,0,0.8);
        }
        .breach-indicator::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
        }
        .breach-indicator::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 1px dashed #555;
            animation: breach-pulse 2s infinite linear;
        }
        @keyframes breach-pulse {
            0% { opacity: 0.3; transform: rotate(0deg); }
            50% { opacity: 0.7; }
            100% { opacity: 0.3; transform: rotate(180deg); }
        }
        /* --- End Hull Breach Indicator Styles --- */

        /* --- Debug Panel Styles --- */
        .debug-panel {
            position: fixed;
            bottom: 90px;
            top: auto;
            right: 20px;
            background: rgba(26, 32, 44, 0.95);
            border: 1px solid #4a5568;
            border-radius: 8px;
            z-index: 1002;
            min-width: 250px;
            font-size: 0.8rem;
            display: flex;
            flex-direction: column-reverse;
        }
        .debug-panel.collapsed {
            min-width: auto;
            background: rgba(26, 32, 44, 0.8);
        }
        .debug-panel.collapsed .debug-header {
            padding: 6px 10px;
            border-radius: 8px;
        }
        .debug-panel.collapsed .debug-header-text {
            display: none;
        }
        .debug-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: #2d3748;
            border-radius: 0 0 8px 8px;
            cursor: pointer;
            font-weight: bold;
            color: #f6e05e;
        }
        .debug-header:hover { background: #4a5568; }
        .debug-content {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .debug-content.collapsed { display: none; }
        .debug-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .debug-row label { flex-shrink: 0; color: #a0aec0; }
        .debug-row input[type="range"] { flex: 1; min-width: 80px; }
        .debug-row span { min-width: 40px; text-align: right; color: #68d391; }
        .debug-btn {
            background: #4a5568;
            border: 1px solid #718096;
            border-radius: 4px;
            padding: 4px 8px;
            color: #e2e8f0;
            cursor: pointer;
            font-size: 0.75rem;
        }
        .debug-btn:hover { background: #718096; }
        .debug-section-title {
            font-weight: bold;
            color: #cbd5e0;
            margin-top: 8px;
            padding-bottom: 4px;
            border-bottom: 1px solid #4a5568;
        }
        .debug-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .debug-filter-item {
            display: flex;
            align-items: center;
            gap: 4px;
            background: #2d3748;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.7rem;
        }
        .debug-filter-item input[type="checkbox"] {
            width: 12px;
            height: 12px;
            cursor: pointer;
        }
        .debug-filter-item label {
            color: #a0aec0;
            cursor: pointer;
            user-select: none;
        }
        .debug-filter-item input:checked + label { color: #68d391; }
        /* --- End Debug Panel Styles --- */

        /* --- Event Log Button Styles --- */
        .log-toggle-btn {
            position: fixed;
            bottom: 20px;
            right: 180px; /* Left of pause button */
            padding: 10px 20px;
            font-size: 1rem;
            font-weight: bold;
            color: #e2e8f0;
            background-color: #4a5568;
            border: 2px solid #718096;
            border-radius: 6px;
            cursor: pointer;
            z-index: 1000;
            transition: all 0.2s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }
        .log-toggle-btn:hover {
            background-color: #2d3748;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
        }
        /* --- End Event Log Button Styles --- */

        /* --- System Power Pip Styles --- */
        .system-power-pips { display: flex; flex-direction: column-reverse; gap: 2px; width: 14px; cursor: default; touch-action: none; }
        .power-pip { width: 100%; height: 10px; background-color: #4a5568; border: 1px solid #718096; border-radius: 2px; cursor: default; transition: background-color 0.1s; position: relative; overflow: hidden; }
        .power-pip.allocated { background-color: #68d391; border-color: #38a169; }
        .power-pip.damaged { background-color: #c53030; border-color: #9b2c2c; }
        .power-pip.damaged.allocated { background-color: #c53030; border-color: #9b2c2c; }
        .power-pip.repairing::after { content: ''; position: absolute; bottom: 0; left: 0; height: 100%; width: var(--repair-progress, 0%); background-color: #ecc94b; transition: width 0.1s linear; }
        /* Weapon Power Pip */
        .weapon-power-pip { width: 30px; height: 12px; cursor: pointer; }
        .weapon-power-pip:hover { filter: brightness(1.2); }

        .weapon-power-group {
            position: absolute;
            top: -6px;
            left: -4px;
            display: flex;
            gap: 2px;
            background-color: transparent;
            z-index: 10;
            cursor: pointer;
        }

        .weapon-power-pip-individual {
            width: 12px;
            height: 12px;
            background-color: #1e293b; /* slate-800 matching background */
            border: 1px solid #475569; /* slate-600 */
            border-radius: 1px;
            transition: all 0.2s;
        }
        .weapon-power-pip-individual.active {
            background-color: #4ade80; /* green-400 */
            border-color: #22c55e; /* green-500 */
            box-shadow: 0 0 5px #22c55e;
        }

        /* Enemy System Health Pips (similar to power pips but for health display) */
        .enemy-system-health-pips { display: flex; gap: 1px; height: 5px; margin-top: 1px; }
        .enemy-health-pip { width: 6px; height: 100%; background-color: #718096; border-radius: 1px; }
        .enemy-health-pip.active { background-color: #f56565; } /* Red for enemy health */
        /* --- End System Power Pip Styles --- */

        .status-bar-container { background-color: #2d3748; padding: 2px; border-radius: 4px; border: 1px solid #4a5568; margin-bottom: 5px; height: 20px; position: relative; }
        .status-bar { height: 100%; border-radius: 2px; transition: width 0.3s ease-out; text-align: center; line-height: 16px; font-size: 0.75rem; font-weight: bold; position: relative; z-index: 1; }
        .status-bar-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; color: white; text-shadow: 1px 1px 2px black; z-index: 2; }
        .hull-bar { background-color: #48bb78; }

        #playerTopStatusArea { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
        #playerShieldAndSubsystemStatus { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        #playerShieldDisplay { display: flex; align-items: center; gap: 4px; }
        #playerShieldInfoContainer { display: flex; flex-direction: column; align-items: flex-start; }
        #playerShieldDotsContainer { display: flex; gap: 3px; height: 12px; align-items: center; }
        .shield-dot { width: 10px; height: 10px; background-color: #4a5568; border: 1px solid #718096; border-radius: 50%; }
        .shield-dot.active { background-color: #4299e1; border-color: #2b6cb0;}
        #playerShieldChargeBarContainer { width: 100%; max-width: 80px; height: 6px; background-color: #2d3748; border-radius: 2px; overflow: hidden; border: 1px solid #4a5568; margin-top: 1px; }
        #playerShieldChargeBar { height: 100%; background-color: #63b3ed; width: 0%; transition: width 0.1s linear; border-radius: 1px; }

        #playerSubsystemStatusBar { display: flex; gap: 4px; align-items: center; }
        .subsystem-status-item { font-size: 0.65rem; color: #a0aec0; padding: 1px 3px; border: 1px solid #4a5568; border-radius: 3px; background-color: #2d3748; min-width: 40px; text-align: center; white-space: nowrap; }
        .subsystem-status-item.manned { border-color: #63b3ed; color: #90cdf4; }
        .subsystem-status-item.damaged { color: #f6ad55 !important; }
        .subsystem-status-item.destroyed { color: #f56565 !important; text-decoration: line-through; opacity: 0.7; }
        .subsystem-status-item.ion-disabled { color: #c084fc !important; opacity: 0.8;}


        .evasion-bar { background-color: #a0aec0; }
        /* Power bar for the reactor display */
        .power-bar { width: 20px; height: 10px; border: 1px solid #a0aec0; cursor: pointer; background-color: #4a5568; transition: background-color 0.2s; }
        @media (min-width: 768px) { .power-bar { width: 80%; height: 12px; } } /* Larger on medium screens */
        .power-bar.allocated { background-color: #68d391; }

        .system-slot { border: 2px solid #4a5568; padding: 4px; margin-bottom: 5px; background-color: #2d3748; border-radius: 4px; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; gap: 4px; position: relative; transition: border-color 0.2s, opacity 0.2s; min-height: 55px; cursor: default; }
        .narrow-system-slot { flex-direction: column; min-width: 42px; width: 42px; padding: 2px; min-height: auto; align-items: center; justify-content: flex-end; gap: 2px; }
        .narrow-system-slot .system-power-pips { width: 100%; align-items: center; margin-bottom: 2px; }
        .narrow-system-slot .power-pip { width: 80%; height: 5px; }
        .narrow-system-slot .system-icon-container { width: 36px; height: 36px; padding: 0; flex-grow: 0; }
        .narrow-system-slot .system-name { display: none; }

        .weapon-slot {
            border: 2px solid #3b82f6; /* blue-500 */
            background-color: #1e293b; /* slate-800 */
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            position: relative;
            transition: all 0.2s;
            min-height: 60px; /* Fixed height match mock */
            padding: 4px;
            cursor: pointer;
            box-shadow: 0 0 5px rgba(59, 130, 246, 0.2);
        }
        .weapon-slot:hover {
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
        }
        .weapon-slot.empty {
             border-color: #334155; /* slate-700 */
             background-color: transparent;
             box-shadow: none;
             cursor: default;
        }

        .system-slot.subsystem { cursor: default; min-height: auto; padding: 2px 4px; justify-content: center; }
        .weapon-target-indicator { position: absolute; top: 2px; right: 4px; font-size: 0.65rem; color: #a0aec0; background-color: rgba(0,0,0,0.5); padding: 1px 3px; border-radius: 3px; }
        .system-icon-container { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; padding: 2px; border-radius: 4px; transition: background-color 0.15s; flex-grow: 1; }
        .system-icon-container:hover { background-color: rgba(255, 255, 255, 0.1); }
        .system-icon-container:active { background-color: rgba(255, 255, 255, 0.2); }
        .system-name { font-weight: bold; margin-bottom: 2px; font-size: 0.75rem; line-height: 1; text-align: center;}

        .weapon-name {
            margin-top: 8px; /* Space for pips */
            text-align: center;
            font-size: 0.7rem;
            font-weight: bold;
            color: white;
            line-height: 1.1;
        }

        .system-controls, .weapon-controls { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 4px; flex-wrap: wrap;}
        .control-button { padding: 2px 6px; border: 1px solid #a0aec0; border-radius: 4px; cursor: pointer; font-size: 0.75rem; background-color: #718096; color: white; min-width: 40px; text-align: center; }
        .control-button:disabled { opacity: 0.5; cursor: not-allowed; background-color: #4a5568; }
        .control-button.power-on { background-color: #68d391; }
        .control-button.autofire-on { background-color: #f56565; }
        .control-button.fire-ready { background-color: #ecc94b; color: #2d3748; font-weight: bold;}

        .charge-bar-container { width: 100%; height: 8px; background-color: #0f172a; /* slate-900 */ border-radius: 2px; overflow: hidden; border: 1px solid #475569; margin-top: auto; margin-bottom: 2px;}
        .charge-bar { height: 100%; background-color: #fbbf24; /* amber-400 */ width: 0%; transition: width 0.1s linear; border-radius: 1px; }

        .weapon-slot.targeting-selected { border-color: #63b3ed; box-shadow: 0 0 8px rgba(99, 179, 237, 0.5); }
        .weapon-slot.dragging { opacity: 0.5; border-color: #f6e05e; }
        .weapon-slot.drag-over { border-color: #f6e05e; box-shadow: inset 0 0 10px rgba(246, 224, 94, 0.5); }

        /* New Styles for Weapons Panel Layout */
        #weaponsPanel {
            border-color: #22d3ee; /* cyan-400 */
            border-width: 2px;
            padding-top: 15px; /* Space for header */
            position: relative;
            gap: 4px; /* Reduce gap between system and slots */
        }

        #autofireToggle {
            position: absolute;
            top: -12px;
            left: 10px;
            background-color: rgba(51, 65, 85, 0.9); /* slate-700 with transparency */
            color: #e2e8f0;
            font-size: 0.75rem;
            font-weight: bold;
            padding: 2px 8px;
            border: 1px solid #64748b; /* slate-500 */
            border-radius: 4px;
            cursor: pointer;
            z-index: 20;
        }
        #autofireToggle:hover {
            background-color: #475569;
        }
        #autofireToggle.on {
            background-color: #991b1b; /* red-800 */
            border-color: #ef4444; /* red-500 */
            color: #fca5a5;
        }

        /* Weapon System Status overrides */
        #weaponSystemStatus {
            margin-right: -4px; /* Pull closer to slots */
            padding-right: 4px;
        }
        #weaponSystemStatus .system-slot {
            border: none;
            background: transparent;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: auto;
            margin-bottom: 0;
        }
        #weaponSystemStatus .system-icon-container {
            margin-bottom: 4px;
            width: 28px;
            height: 28px;
        }
        #weaponSystemStatus .system-power-pips {
            flex-direction: column-reverse; /* Bottom up fill to match FTL vertical bars */
            gap: 3px;
            width: 20px;
        }
        #weaponSystemStatus .power-pip {
            width: 100%;
            height: 6px;
            border-radius: 1px;
            background-color: #334155;
            border-color: #475569;
        }
        #weaponSystemStatus .power-pip.allocated {
            background-color: #4ade80;
            border-color: #22c55e;
            box-shadow: 0 0 4px #4ade80;
        }
        /* Targeting mode cursor */
        .targeting-mode { cursor: crosshair !important; }
        .targeting-mode .room { cursor: crosshair !important; }
        /* Teleporter targeting mode */
        .teleporter-targeting { cursor: crosshair !important; box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
        .teleporter-targeting .room { cursor: crosshair !important; }
        .teleporter-targeting .room:hover { background-color: rgba(168, 85, 247, 0.3) !important; }
        /* Global autofire toggle */
        #globalAutofireToggle { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; margin-top: 8px; background-color: #1a202c; border: 1px solid #4a5568; border-radius: 4px; }
        #globalAutofireToggle label { font-size: 0.85rem; font-weight: 500; }
        #globalAutofireButton { padding: 4px 12px; border: 1px solid #a0aec0; border-radius: 4px; cursor: pointer; font-size: 0.85rem; background-color: #4a5568; color: white; transition: background-color 0.2s; }
        #globalAutofireButton.autofire-on { background-color: #f56565; border-color: #fc8181; }
        /* Drone UI Styles */
        .drone-count-container { text-align: center; margin-bottom: 8px; color: #c084fc; font-size: 0.85rem; }
        .drone-power-status { text-align: center; margin-bottom: 8px; color: #a0aec0; font-size: 0.8rem; padding: 4px; background-color: #1a202c; border-radius: 4px; }
        .drone-power-status.destroyed { color: #f56565; }
        .drone-power-status.offline { color: #a0aec0; }
        .drone-power-status.ion-disabled { color: #c084fc; }
        .available-drones-section, .active-drones-section { margin-bottom: 12px; }
        .section-header { font-size: 0.75rem; color: #a0aec0; margin-bottom: 4px; text-transform: uppercase; }
        .drone-option { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background-color: #2d3748; border: 1px solid #4a5568; border-radius: 4px; margin-bottom: 4px; }
        .drone-option .drone-name { font-size: 0.8rem; color: #e2e8f0; }
        .deploy-drone-btn { padding: 2px 8px; font-size: 0.7rem; background-color: #805ad5; border: 1px solid #9f7aea; }
        .deploy-drone-btn:hover:not(:disabled) { background-color: #9f7aea; }
        .active-drone-slot { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background-color: #2d3748; border: 2px solid #4a5568; border-radius: 4px; margin-bottom: 4px; }
        .active-drone-slot.powered { border-color: #805ad5; background-color: #322659; }
        .active-drone-slot .drone-name { font-size: 0.8rem; font-weight: bold; }
        .active-drone-slot .drone-status { font-size: 0.7rem; color: #a0aec0; margin-left: 8px; }
        .active-drone-slot.powered .drone-status { color: #9f7aea; }
        .drone-controls { display: flex; gap: 4px; }
        .drone-power-btn, .drone-recall-btn { padding: 2px 6px; font-size: 0.65rem; }
        .drone-recall-btn { background-color: #744210; border-color: #975a16; }
        .no-active-drones { color: #718096; font-size: 0.75rem; text-align: center; padding: 8px; }
        .no-drones { color: #718096; font-size: 0.8rem; text-align: center; padding: 12px; }
        .message-box { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px 20px; border-radius: 5px; z-index: 2000; display: none; font-size: 0.9rem; }
        .enemy-weapon-slot { border: 1px solid #718096; padding: 4px; margin-bottom: 4px; background-color: #4a5568; border-radius: 3px; font-size: 0.75rem; text-align: center; }
        .enemy-charge-bar-container { width: 80%; height: 6px; background-color: #2d3748; border-radius: 2px; overflow: hidden; border: 1px solid #718096; margin: 2px auto 0; }
        .enemy-charge-bar { height: 100%; background-color: #e53e3e; width: 0%; transition: width 0.1s linear; border-radius: 2px; }
        #logWindow { background-color: #1a202c; border: 1px solid #4a5568; border-radius: 4px; height: 400px; overflow-y: scroll; padding: 8px; font-family: monospace; font-size: 0.9rem; color: #cbd5e0; scroll-behavior: smooth; }
        #logWindow p { margin-bottom: 4px; line-height: 1.2; word-break: break-word; }
        #setupScreen { max-width: 800px; margin: 20px auto; padding: 15px; background-color: #2d3748; border-radius: 8px; border: 1px solid #4a5568; }
        @media (min-width: 768px) {
            #setupScreen { margin: 40px auto; padding: 20px; }
        }
        .setup-column { width: 100%; }
        @media (min-width: 768px) {
            .setup-column { width: 48%; }
        }
        .setup-section { margin-bottom: 15px; }
        .setup-label { display: block; margin-bottom: 5px; font-weight: 500; }
        .setup-input { width: 100%; padding: 8px; background-color: #1a202c; border: 1px solid #4a5568; border-radius: 4px; color: #e2e8f0; }
        .setup-input[type="number"] { width: 80px; }
        .weapon-choice { margin-bottom: 5px; }
        .weapon-choice label { margin-left: 8px; font-size: 0.8rem; }
        #startGameButton { display: block; width: 100%; padding: 10px; background-color: #38a169; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; transition: background-color 0.2s; margin-top: 20px; }
        #startGameButton:hover { background-color: #2f855a; }

        /* --- Animation Styles --- */
        #animationLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; overflow: hidden; }
        .projectile { position: absolute; width: 8px; height: 8px; border-radius: 50%; transition: transform 0.5s linear; box-shadow: 0 0 8px 2px currentColor; }
        .projectile.laser { background-color: #fef08a; color: #fef08a; }
        .projectile.ion { background-color: #7dd3fc; color: #7dd3fc; }
        .projectile.missile { background-color: #333; color: #555; border: 1px solid #555; width: 12px; height: 5px; border-radius: 3px; box-shadow: 0 0 5px 1px #777; }
        .hit-effect { position: absolute; width: 25px; height: 25px; background-color: rgba(255, 165, 0, 0.8); border-radius: 50%; opacity: 1; animation: hit-animation 0.3s ease-out forwards; box-shadow: 0 0 15px 5px rgba(255, 100, 0, 0.7); }
        .hit-effect.shield-hit { background-color: rgba(100, 200, 255, 0.9); box-shadow: 0 0 20px 10px rgba(66, 153, 225, 0.6); }
        .ship-image { transition: filter 0.3s ease; }
        .ship-image.shield-active { filter: drop-shadow(0 0 4px rgba(66, 153, 225, var(--shield-opacity, 0.6))) drop-shadow(0 0 8px rgba(66, 153, 225, var(--shield-opacity, 0.4))); }
        @keyframes hit-animation { 0% { transform: scale(0.3); opacity: 1; } 70% { transform: scale(1.2); opacity: 0.5; } 100% { transform: scale(1); opacity: 0; } }
        /* --- End Animation Styles --- */

        /* --- Room Builder Styles --- */
        #room-builder-container {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #4a5568;
        }
        #room-builder-grid {
            display: grid;
            /* Use minmax(0, 1fr) to prevent content from expanding cells */
            grid-template-columns: repeat(15, minmax(0, 1fr));
            grid-template-rows: repeat(8, minmax(0, 1fr));
            gap: 1px;
            border: 1px solid #718096;
            background-color: #2d3748;
            width: 100%;
            max-width: 750px;
            aspect-ratio: 15 / 8;
            margin: 0 auto 20px; /* Center it and add space below */
            position: relative;
        }
        .grid-cell {
            background-color: #4a5568;
            border: 1px solid #2d3748;
        }
        #room-palette {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
            gap: 10px;
            justify-content: center;
            padding: 10px;
            background-color: #1a202c;
            border-radius: 4px;
            border: 1px solid #4a5568;
            min-height: 120px;
        }
        .room-palette-item {
            background-color: #4a5568;
            border: 1px solid #718096;
            cursor: grab;
            text-align: center;
            font-size: 1.5rem;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            min-width: 50px;
            min-height: 50px;
            overflow: hidden;
        }
        /* When room items are in the grid, don't let min-width/height affect grid sizing */
        #room-builder-grid > .room-palette-item {
            min-width: 0;
            min-height: 0;
        }
        .room-palette-item.empty-room {
            /* Crosshatch removed */
        }

        /* Required system indicator - red border/glow */
        .room-palette-item.required-system {
            border: 2px solid #e53e3e;
            box-shadow: 0 0 6px rgba(229, 62, 62, 0.5);
        }

        .room-size-selector {
            position: absolute;
            bottom: 2px;
            right: 2px;
            font-size: 0.6rem;
            background-color: #2d3748;
            color: #e2e8f0;
            border: 1px solid #718096;
            border-radius: 3px;
            padding: 1px;
            cursor: pointer;
        }
        /* Enabled toggle for room builder */
        .room-enabled-toggle {
            position: absolute;
            bottom: 2px;
            left: 2px;
            display: flex;
            align-items: center;
            gap: 2px;
            font-size: 0.55rem;
            z-index: 5;
        }
        .room-enabled-toggle .enabled-checkbox {
            width: 10px;
            height: 10px;
            cursor: pointer;
            accent-color: #48bb78;
        }
        .room-enabled-toggle .enabled-label {
            color: #68d391;
            cursor: pointer;
            font-weight: bold;
        }
        .room-palette-item.room-disabled {
            opacity: 0.5;
            background-color: rgba(80, 80, 80, 0.8) !important;
        }
        .room-palette-item.room-disabled .enabled-label {
            color: #a0aec0;
        }
        #drag-preview {
            position: absolute;
            background-color: rgba(173, 216, 230, 0.3); /* Light blue, semi-transparent */
            border: 2px dashed #63b3ed; /* Dashed blue border */
            pointer-events: none; /* Allows drag events to pass through */
            z-index: 100;
            display: none; /* Hidden by default */
        }
        #drag-preview.invalid {
            background-color: rgba(255, 0, 0, 0.3); /* Red, semi-transparent */
            border-color: #f56565; /* Red border */
        }
        /* Connection/Door indicator styles */
        .connection-indicator {
            position: absolute;
            background-color: rgba(100, 100, 100, 0.6);
            cursor: pointer;
            z-index: 50;
            transition: background-color 0.2s;
        }
        .connection-indicator:hover {
            background-color: rgba(150, 150, 150, 0.8);
        }
        .connection-indicator.has-door {
            background-color: rgba(72, 187, 120, 0.8);
        }
        .connection-indicator.has-door:hover {
            background-color: rgba(72, 187, 120, 1);
        }
        .connection-indicator.airlock {
            background-color: rgba(80, 80, 120, 0.4);
        }
        .connection-indicator.airlock:hover {
            background-color: rgba(100, 100, 150, 0.6);
        }
        .connection-indicator.airlock.has-door {
            background-color: rgba(237, 137, 54, 0.8);
        }
        .connection-indicator.airlock.has-door:hover {
            background-color: rgba(237, 137, 54, 1);
        }
        .connection-indicator.horizontal {
            height: 8px;
            border-radius: 4px;
        }
        .connection-indicator.vertical {
            width: 8px;
            border-radius: 4px;
        }
        /* --- End Room Builder Styles --- */

        /* --- Ship Explosion Animation Styles --- */
        .ship-grid.exploding {
            animation: ship-explosion 2s ease-out forwards;
        }
        @keyframes ship-explosion {
            0% { transform: scale(1); opacity: 1; filter: brightness(1); }
            20% { transform: scale(1.05); filter: brightness(2) saturate(0.5); }
            40% { transform: scale(1.1); filter: brightness(3) saturate(0); }
            60% { transform: scale(1.15); opacity: 0.7; filter: brightness(2) blur(2px); }
            80% { transform: scale(1.2); opacity: 0.3; filter: brightness(1) blur(5px); }
            100% { transform: scale(1.3); opacity: 0; filter: blur(10px); }
        }
        .ship-grid.exploding .room {
            animation: room-explode 1.5s ease-out forwards;
        }
        @keyframes room-explode {
            0% { background-color: #4a5568; }
            30% { background-color: #ff6600; box-shadow: 0 0 20px #ff3300; }
            60% { background-color: #ff3300; box-shadow: 0 0 40px #ff0000; }
            100% { background-color: #1a1a1a; box-shadow: none; }
        }
        .ship-grid.destroyed {
            display: none;
        }

        /* Game Over Overlay */
        #gameOverOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            flex-direction: column;
        }
        #gameOverOverlay.visible {
            display: flex;
        }
        #gameOverText {
            font-size: 6rem;
            font-weight: bold;
            color: #e53e3e;
            text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff3300;
            animation: game-over-pulse 1s ease-in-out infinite alternate;
            text-align: center;
        }
        #victoryText {
            font-size: 6rem;
            font-weight: bold;
            color: #48bb78;
            text-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00, 0 0 60px #33ff33;
            animation: victory-pulse 1s ease-in-out infinite alternate;
            text-align: center;
        }
        @keyframes game-over-pulse {
            0% { transform: scale(1); opacity: 0.9; }
            100% { transform: scale(1.05); opacity: 1; }
        }
        @keyframes victory-pulse {
            0% { transform: scale(1); opacity: 0.9; }
            100% { transform: scale(1.05); opacity: 1; }
        }
        #gameOverSubtext {
            font-size: 1.5rem;
            color: #a0aec0;
            margin-top: 20px;
        }
        #playAgainButton {
            margin-top: 40px;
            padding: 15px 40px;
            font-size: 1.5rem;
            font-weight: bold;
            color: #1a202c;
            background: linear-gradient(135deg, #68d391, #48bb78);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        #playAgainButton:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(72, 187, 120, 0.6);
        }
        #playAgainButton:active {
            transform: scale(0.98);
        }
        /* --- End Ship Explosion Animation Styles --- */

        /* --- Top Status Bar Styles --- */
        #topStatusBar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
            border-bottom: 2px solid #0f3460;
            display: flex;
            align-items: center;
            padding: 0 16px;
            gap: 20px;
            z-index: 1001;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }
        #topStatusBar .stat-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        #topStatusBar .stat-label {
            font-size: 0.7rem;
            font-weight: bold;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        #topStatusBar .stat-value {
            font-size: 0.85rem;
            font-weight: bold;
            color: #4ade80;
            min-width: 40px;
        }
        #topStatusBar .stat-bar-container {
            width: 120px;
            height: 16px;
            background: #1a1a1a;
            border: 1px solid #333;
            border-radius: 2px;
            overflow: hidden;
            position: relative;
        }
        #topStatusBar .stat-bar {
            height: 100%;
            transition: width 0.3s ease;
        }
        #topStatusBar .stat-bar.hull {
            background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
        }
        #topStatusBar .stat-bar.hull.damaged {
            background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
        }
        #topStatusBar .stat-bar.hull.critical {
            background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
        }
        #topStatusBar .stat-bar-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.65rem;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
        }
        #topStatusBar .shield-dots {
            display: flex;
            gap: 4px;
        }
        #topStatusBar .shield-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
            border: 3px solid #93c5fd;
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.7), inset 0 -2px 4px rgba(0,0,0,0.3);
        }
        #topStatusBar .shield-dot.empty {
            background: linear-gradient(135deg, #1f1f1f 0%, #0a0a0a 100%);
            border-color: #333;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
        }
        #topStatusBar .shields-group {
            min-width: 100px;
        }
        #topStatusBar .shields-display {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        #topStatusBar .shield-charge-container {
            width: 100%;
            height: 6px;
            background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
            border: 1px solid #333;
            border-radius: 3px;
            overflow: hidden;
        }
        #topStatusBar .shield-charge-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
            border-radius: 2px;
            transition: width 0.1s linear;
            box-shadow: 0 0 4px rgba(59, 130, 246, 0.5);
        }
        #topStatusBar .spacer {
            flex: 1;
        }
        /* Jump Drive / Jump section */
        #jumpDriveSection {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 4px 16px;
            background: #0a0a15;
            border: 1px solid #333;
            border-radius: 4px;
            min-width: 80px;
        }
        #jumpDriveSection .jump-label {
            font-size: 0.6rem;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        #jumpDriveSection #jumpButton {
            font-size: 0.9rem;
            font-weight: bold;
            color: #fbbf24;
            background: none;
            border: none;
            cursor: default;
            padding: 2px 0;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        #jumpDriveSection #jumpButton.ready {
            color: #4ade80;
            cursor: pointer;
            animation: jump-ready-pulse 1s ease-in-out infinite alternate;
        }
        #jumpDriveSection #jumpButton.ready:hover {
            color: #86efac;
            text-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
        }
        @keyframes jump-ready-pulse {
            0% { text-shadow: 0 0 5px rgba(74, 222, 128, 0.3); }
            100% { text-shadow: 0 0 15px rgba(74, 222, 128, 0.8); }
        }
        /* Adjust game screen to account for top bar */
        #gameScreen {
            padding-top: 56px !important;
        }
        /* Enemy ship with compact sidebar layout */
        #enemyShipContainer {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 0.5rem;
        }
        .enemy-status-sidebar {
            min-width: 100px;
            max-width: 140px;
        }
        #enemyShipContainer #enemyShipGrid {
            /* No longer need scale transform - grids are now responsive */
            margin-left: 0;
            margin-right: 0;
        }
        /* Override explosion animation for enemy grid */
        #enemyShipContainer #enemyShipGrid.exploding {
            animation: enemy-ship-explosion 2s ease-out forwards;
        }
        @keyframes enemy-ship-explosion {
            0% { transform: scale(1); opacity: 1; filter: brightness(1); }
            20% { transform: scale(1.02); filter: brightness(2) saturate(0.5); }
            40% { transform: scale(1.05); filter: brightness(3) saturate(0); }
            60% { transform: scale(1.08); opacity: 0.7; filter: brightness(2) blur(2px); }
            80% { transform: scale(1.1); opacity: 0.3; filter: brightness(1) blur(5px); }
            100% { transform: scale(1.15); opacity: 0; filter: blur(10px); }
        }
        /* When enemy container is hidden, use display:none to allow centering */
        #enemyShipContainer.destroyed {
            display: none !important;
        }
        /* Fade out enemy ship when player jumps away (e.g., crew kill victory) */
        #enemyShipContainer.fading-out {
            animation: enemy-fade-out 0.8s ease-out forwards;
        }
        @keyframes enemy-fade-out {
            0% { opacity: 1; }
            100% { opacity: 0; visibility: hidden; }
        }
        /* Add top margin to ships area */
        .ships-container {
            margin-top: 20px;
        }

        /* Jump out animation (shrink) */
        .ship-grid.jumping-out {
            animation: jump-shrink 0.8s ease-in forwards;
        }
        @keyframes jump-shrink {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(0.7); opacity: 1; filter: brightness(1.5); }
        }

        /* Light wipe overlay */
        .jump-light-wipe {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255,255,255,0.8) 35%,
                rgba(200,230,255,1) 50%,
                rgba(255,255,255,0.8) 65%,
                transparent 100%);
            animation: light-sweep 0.5s ease-in-out forwards;
            pointer-events: none;
            z-index: 100;
        }
        @keyframes light-sweep {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        /* Jump in animation (reappear) */
        .ship-grid.jumping-in {
            animation: jump-reappear 0.6s ease-out forwards;
        }
        @keyframes jump-reappear {
            0% { transform: scale(0.7); opacity: 0.5; filter: brightness(2); }
            100% { transform: scale(1); opacity: 1; filter: brightness(1); }
        }
        /* --- End Jump Animation Styles --- */

        /* --- Cloaking Visual Effect --- */
        .ship-grid.cloaked {
            opacity: 0.4;
            filter: brightness(0.8) hue-rotate(240deg) saturate(1.5);
            animation: cloak-shimmer 2s infinite ease-in-out;
        }
        @keyframes cloak-shimmer {
            0%, 100% { opacity: 0.35; }
            50% { opacity: 0.5; }
        }
        .ship-grid.cloaked .room {
            border-color: rgba(138, 43, 226, 0.5);
        }
        /* --- End Cloaking Visual Effect --- */

        /* --- Pause Button Styles --- */
        #pauseButton {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 140px;
            text-align: center;
            justify-content: center;
            padding: 10px 25px;
            font-size: 1.25rem;
            font-weight: bold;
            color: #e2e8f0;
            background-color: #4a5568;
            border: 2px solid #718096;
            border-radius: 6px;
            cursor: pointer;
            z-index: 1000;
            transition: all 0.2s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }
        #pauseButton:hover {
            background-color: #2d3748;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
        }
        #pauseButton:active {
            transform: translateY(0);
        }
        #pauseButton.paused {
            background-color: #c53030; /* Red-700 */
            border-color: #e53e3e; /* Red-600 */
            color: #fff;
            animation: pause-pulse 2s infinite;
        }
        #pauseButton.paused:hover {
            background-color: #9b2c2c; /* Red-800 */
        }
        @keyframes pause-pulse {
            0% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(229, 62, 62, 0); }
            100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); }
        }
        /* --- End Pause Button Styles --- */

        /* --- Paused Indicator Styles --- */
        .paused-indicator {
            visibility: hidden;
            font-size: 4rem;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.8);
            text-align: center;
            width: 100%;
            margin-top: 10px;
            margin-bottom: 10px;
            pointer-events: none;
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
            letter-spacing: 0.5rem;
            text-transform: uppercase;
        }
        .paused-indicator.visible {
            visibility: visible;
            animation: pause-pulse-text 2s infinite ease-in-out;
        }
        @keyframes pause-pulse-text {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.05); }
        }
        /* --- End Paused Indicator Styles --- */

        /* --- Modal Styles --- */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            backdrop-filter: blur(5px);
        }
        .modal-overlay.visible {
            display: flex;
            animation: fadeIn 0.3s ease-out;
        }
        .modal-content {
            background-color: #2d3748;
            border: 1px solid #4a5568;
            border-radius: 8px;
            padding: 30px;
            max-width: 600px;
            width: 90%;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            color: #e2e8f0;
            position: relative;
        }
        .modal-header {
            font-size: 1.5rem;
            font-weight: bold;
            color: #63b3ed;
            margin-bottom: 20px;
            text-align: center;
            border-bottom: 1px solid #4a5568;
            padding-bottom: 10px;
        }
        .modal-body {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 25px;
        }
        .modal-body ul {
            list-style-type: disc;
            padding-left: 20px;
            margin-top: 10px;
        }
        .modal-body li {
            margin-bottom: 8px;
        }
        .modal-footer {
            text-align: center;
        }
        .modal-close-btn {
            background-color: #3182ce;
            color: white;
            border: none;
            padding: 10px 25px;
            font-size: 1rem;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .modal-close-btn:hover {
            background-color: #2b6cb0;
        }
        .key-badge {
            background-color: #4a5568;
            border: 1px solid #718096;
            border-radius: 4px;
            padding: 2px 6px;
            font-family: monospace;
            font-weight: bold;
            color: #f6e05e;
            font-size: 0.9em;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        /* --- End Modal Styles --- */

        /* --- Ship Upgrade UI Styles --- */
        .upgrade-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            border-bottom: 1px solid #4a5568;
            padding-bottom: 0.5rem;
        }
        .upgrade-scrap-display {
            font-size: 1.1rem;
            font-weight: bold;
            color: #a0aec0;
        }
        .upgrade-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1.5rem;
            max-height: 70vh;
            overflow-y: auto;
        }
        .upgrade-column {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .column-title {
            text-align: center;
            font-weight: bold;
            color: #a0aec0;
            text-transform: uppercase;
            font-size: 0.8rem;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid #4a5568;
        }
        .upgrade-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: #1a202c;
            padding: 0.5rem;
            border-radius: 0.25rem;
            border: 1px solid #4a5568;
        }
        .upgrade-icon {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .upgrade-info {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .system-name {
            font-weight: bold;
            font-size: 0.8rem;
            color: #e2e8f0;
        }
        .system-level {
            font-size: 0.7rem;
            color: #a0aec0;
        }
        .system-bars {
            display: flex;
            gap: 1px;
            margin-top: 2px;
        }
        .upgrade-bar-pip {
            width: 8px;
            height: 6px;
            background-color: #48bb78;
            border-radius: 1px;
        }
        .upgrade-buy-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid #718096;
            background: #2d3748;
            cursor: pointer;
            font-size: 0.7rem;
            min-width: 60px;
        }
        .upgrade-buy-btn:hover {
            background: #4a5568;
        }
        .upgrade-buy-btn.can-afford {
            border-color: #48bb78;
            color: #48bb78;
        }
        .upgrade-buy-btn.can-afford:hover {
            background: #2f855a;
            color: white;
        }
        .upgrade-buy-btn.cannot-afford {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .upgrade-btn-container {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cost {
            font-weight: bold;
        }
        .reactor-bars {
            flex-wrap: wrap;
            max-width: 100px;
        }
        .upgrade-bar-pip.reactor {
            width: 4px;
            height: 8px;
            background-color: #48bb78;
            margin-bottom: 1px;
        }
        /* --- End Ship Upgrade UI Styles --- */

        .grid-read-only {
            pointer-events: none;
        }

        /* --- System Tooltip Styles --- */
        .system-tooltip {
            position: fixed;
            background-color: rgba(0, 0, 0, 0.9);
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            padding: 8px;
            color: #e2e8f0;
            font-size: 0.8rem;
            z-index: 3000; /* Above modals */
            display: none;
            pointer-events: none;
            width: 250px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }
        .tooltip-title {
            font-weight: bold;
            font-size: 0.9rem;
            margin-bottom: 4px;
            color: #63b3ed;
        }
        .tooltip-desc {
            margin-bottom: 8px;
            line-height: 1.4;
        }
        .tooltip-stats {
            margin-bottom: 8px;
            color: #f6ad55;
            font-weight: bold;
        }
        .tooltip-status {
            margin-bottom: 8px;
            color: #9f7aea;
        }
        .tooltip-keys {
            margin-top: 8px;
            padding-top: 4px;
            border-top: 1px solid #4a5568;
            font-family: monospace;
            color: #f6e05e;
        }
        /* --- End System Tooltip Styles --- */