@font-face {
            font-family: 'Overseer';
            src: url(../assets/3193c49d25.ttf) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        /* --- Dynamic Theme Variables --- */

        :root {
            --pip-color: #18ff62;
            --pip-glow: 0 0 10px rgba(24, 255, 98, 0.4);
            --pip-bg-tint: brightness(1.3) contrast(1.2) sepia(0.8) hue-rotate(70deg) saturate(250%);
            --pip-dark: #020802;
            --pip-panel: rgba(2, 8, 2, 0.95);
            --pip-panel-solid: #051a05;
            --vignette-shadow: rgba(2, 25, 2, 0.85);
            --grit-opacity: 0.15;
            --vip-color: #00ffff;
            /* Default Cyan */
        }

        body.theme-fnv {
            --pip-color: #ffb642;
            --pip-glow: 0 0 10px rgba(255, 182, 66, 0.4);
            --pip-bg-tint: brightness(1.3) contrast(1.2) sepia(0.8) hue-rotate(5deg) saturate(250%);
            --pip-dark: #1a0f00;
            --pip-panel: rgba(26, 15, 0, 0.95);
            --pip-panel-solid: #261700;
            --vignette-shadow: rgba(40, 20, 0, 0.85);
            --grit-opacity: 0.22;
            --vip-color: #ff7700;
            /* FNV Orange/Red for VIP */
        }

        /* --- Fallout 4 Theme (Quantum Blue) --- */
        body.theme-fo4 {
            --pip-color: #22ccff;
            --pip-glow: 0 0 10px rgba(34, 204, 255, 0.5);
            --pip-bg-tint: brightness(1.2) contrast(1.1) sepia(0.4) hue-rotate(180deg) saturate(200%);
            --pip-dark: #00111a;
            --pip-panel: rgba(0, 17, 26, 0.95);
            --pip-panel-solid: #001a26;
            --vignette-shadow: rgba(0, 10, 20, 0.85);
            --grit-opacity: 0.15;
            --vip-color: #ffffff;
            /* Institute White for VIP stars */
        }

        body {
            background-color: #000;
            color: var(--pip-color);
            font-family: 'VT323', monospace;
            font-size: 18px;
            /* Increased from 14px to 18px */
            margin: 0;
            padding: 10px;
            height: 100vh;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            text-transform: uppercase; /* <-- THIS IS THE NEW LINE */

        }

        body::after {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            z-index: 20000;
            background-size: 100% 3px, 3px 100%;
            pointer-events: none;
        }

        cursor: auto;
        }

    /* Protect UI icons from being hijacked by the game board's Map CSS */
    .ui-svg-icon path, .ui-svg-icon polyline {
        stroke: currentColor !important;
        fill: none !important;
    }

    /* Brute-force the SVG lines to turn dark when the button is hovered */
    button#btn-save-game:hover svg path,
    button#btn-save-game:hover svg polyline,
    button#btn-load-game:hover svg path,
    button#btn-load-game:hover svg polyline {
        stroke: #1a1a1a !important; 
    }

        /* Standard pointer for interactive elements */
        button,
        select,
        input,
        .risk-card,
        .btn-diplomacy,
        #secret-dev-key {
            cursor: pointer !important;
        }

        /* Territories will have their cursor set by JavaScript */
        svg path,
        svg .area {
            /* No cursor property here - it will be added dynamically */
        }

    /* GOAL 1: Leaderboard Pulsing Animation */
    @keyframes activeTurnPulse {
        0% { box-shadow: 0 0 5px var(--pip-color), inset 0 0 2px var(--pip-color); border-color: var(--pip-color); transform: scale(1); }
        100% { box-shadow: 0 0 25px var(--pip-color), inset 0 0 12px var(--pip-color); border-color: #ffffff; transform: scale(1.03); filter: brightness(1.2); }
    }
    
    /* Apply pulse to the highlighted card */
    .highlight {
        animation: activeTurnPulse 0.5s infinite alternate !important;
        z-index: 10;
        position: relative;
    }

    
    /* Kill the pulse instantly if Turbo is active */
    .turbo-active .highlight {
        animation: none !important;
        box-shadow: 0 0 5px var(--pip-color) !important;
        border-color: var(--pip-color) !important;
    }

    /* GOAL 2: Make the "_" and "█" Cursors Actually Blink */
    @keyframes blinkCursorAnim {
        0%, 49% { opacity: 1; }
        50%, 100% { opacity: 0; }
    }
    .blinking-cursor, .terminal-cursor {
        animation: blinkCursorAnim 1s infinite !important;
        font-weight: bold;
    }

    /* GOAL 3: Force ALL Commander Text to Match the UI Theme */
    #cmdr-ui-container, 
    #cmdr-ui-container span, 
    #cmdr-ui-container div,
    #cmdr-hp-text,
    #cmdr-ap-text {
        color: var(--pip-color) !important;
        border-color: var(--pip-color) !important;
        text-shadow: 0 0 5px var(--pip-color) !important;
    }
    
    /* Keep the HP/AP fill bars solid (don't make them transparent text) */
    #cmdr-hp-fill, #cmdr-ap-fill {
        text-shadow: none !important;
        color: #1a1a1a !important; /* Dark text inside the bar so it's readable */
    }

        /* --- High-Visibility Button Flash --- */
        @keyframes quickFlash {
            0% { background-color: transparent; }
            50% { background-color: var(--pip-color); color: #000; }
            100% { background-color: transparent; }
        }
        .btn-flash {
            animation: quickFlash 0.3s ease-in-out 2;
        }


        /* --- Modals --- */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            /* Darkened the center so background is less distracting */
            background: radial-gradient(circle at center, rgba(0, 0, 0, 0.8) 20%, var(--vignette-shadow) 100%);
            backdrop-filter: blur(4px); /* Increased blur slightly for better focus */
            z-index: 9000;
        }



        .start-modal,
        .cards-modal,
        .win-content,
        #confirm-restart-modal .content {
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            background: var(--pip-panel-solid) !important;
            color: var(--pip-color) !important;
            padding: 25px 35px !important;
            border-radius: 4px !important;
            box-shadow: var(--pip-glow) !important;
            text-align: center;
            border: 2px solid var(--pip-color) !important;
            width: 650px;
            max-width: 90vw;
        }

        .help-modal-content {
            width: 850px !important;
            max-width: 95vw !important;
            text-align: left !important;
        }

        .manual-footer {
            font-size: 14px;
            margin-top: 30px;
            opacity: 0.7;
            font-family: 'VT323', monospace;
            text-transform: uppercase;
            text-align: center;
            line-height: 1.2;
        }

        .form-group {
            margin-bottom: 15px;
            text-align: left;
        }

        .form-group label {
            display: block;
            font-size: 16px;
            margin-bottom: 5px;
        }

        input[type="text"],
        select {
            width: 100%;
            padding: 8px 10px;
            font-family: 'VT323', monospace;
            font-size: 18px;
            background-color: var(--pip-dark);
            color: var(--pip-color);
            border: 1px solid var(--pip-color);
            box-sizing: border-box;
            text-transform: uppercase;
        }

        input:focus,
        select:focus {
            outline: none;
            box-shadow: var(--pip-glow);
        }

        button {
            width: 100%;
            padding: 12px;
            margin-top: 15px;
            font-size: 20px;
            font-family: 'VT323', monospace;
            background-color: var(--pip-dark);
            color: var(--pip-color);
            border: 2px solid var(--pip-color);
            box-shadow: inset 0 0 5px var(--pip-color), 0 0 5px var(--pip-color);
            cursor: pointer;
            text-transform: uppercase;
            transition: all 0.2s ease;
        }

        button:hover {
            background-color: var(--pip-color);
            color: var(--pip-dark);
            box-shadow: inset 0 0 10px var(--pip-dark), 0 0 15px var(--pip-color);
        }

        #restart:hover {
            background-color: #b74545;
            /* Rusted Red */
            color: #ffffff;
            border-color: #ff8080;
            box-shadow: inset 0 0 10px #000, 0 0 20px #ff0000;
        }

        /* --- NEW: FIX FOR INLINE-COLORED MODAL BUTTON HOVERS --- */
        #envoy-accept:hover, #betrayal-cancel:hover {
            background-color: #18ff62 !important;
            color: #000 !important;
            box-shadow: inset 0 0 10px #000, 0 0 15px #18ff62 !important;
        }

        #envoy-reject:hover, #tactical-ambush-btn:hover, #maneuver-cancel:hover, #dip-cancel:hover {
            background-color: #ffcc00 !important;
            color: #000 !important;
            box-shadow: inset 0 0 10px #000, 0 0 15px #ffcc00 !important;
        }

        #betrayal-confirm:hover, #confirm-nuke-btn:hover {
            background-color: #ff3333 !important;
            color: #fff !important;
            box-shadow: inset 0 0 10px #000, 0 0 15px #ff3333 !important;
        }

        #tactical-cancel-btn:hover {
            background-color: #555 !important;
            color: #fff !important;
            box-shadow: inset 0 0 10px #000, 0 0 15px #555 !important;
        }
        /* -------------------------------------------------------- */

        button:disabled {
            opacity: 0.5;
            cursor: not-allowed !important;
        }


        @keyframes stashPulse {
            0% {
                box-shadow: inset 0 0 5px var(--pip-color), 0 0 5px var(--pip-color);
                border-color: var(--pip-color);
                filter: brightness(1);
            }

            100% {
                box-shadow: inset 0 0 15px var(--pip-color), 0 0 25px var(--pip-color);
                border-color: #ffffff;
                filter: brightness(1.3);
            }
        }

        .ready-to-trade {
            animation: stashPulse 1s infinite alternate !important;
            font-weight: bold;
        }

        .nuke-ready {
            background: #ff0000 !important;
            color: #fff !important;
            border-color: #ff0000 !important;
            animation: stashPulse 0.5s infinite alternate !important;
            text-shadow: 0 0 5px #fff;
        }

        /* --- ADD THIS NEW CSS --- */
        @keyframes nukeTargetPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.2; }
        }
        .nuke-target-anim {
            animation: nukeTargetPulse 0.5s infinite;
        }
        /* ------------------------ */

        /* Syncs all range sliders to the active Pip-Boy theme */
        input[type=range] {
            accent-color: var(--pip-color);
            background: transparent;
        }

        input[type=range]::-webkit-slider-runnable-track {
            background: rgba(0, 255, 0, 0.1);
            border: 1px solid var(--pip-color);
            border-radius: 2px;
        }

        input[type=range]::-webkit-slider-thumb {
            background: var(--pip-color);
        }

        /* --- Side Panels --- */
        .player-panel {
            background: var(--pip-panel);
            padding: 15px;
            border-right: 3px solid var(--pip-color);
            box-shadow: 2px 0 15px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;
            width: 260px;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 100;
            overflow-y: auto;
        }

        .player-panel>div {
            border-bottom: 1px solid var(--pip-color);
            padding-bottom: 12px;
            margin-bottom: 12px;
        }

        .player-panel>div:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .player-panel h1 {

            font-family: 'Overseer', 'VT323', monospace;
            
            font-weight: normal;

            margin-top: 0;

            margin-bottom: 10px;

            font-size: 38px;

            text-shadow: var(--pip-glow);

            text-align: center;

            display: flex;

            align-items: baseline;

            justify-content: center;

        }

        .start-modal h1, 
        .start-modal h2 {
            font-family: 'Overseer', 'VT323', monospace;
            font-size: 50px; /* <-- Change this number to make it bigger or smaller! */
            font-weight: normal;
            text-transform: uppercase;
            text-shadow: var(--pip-glow);
            margin-bottom: 20px; /* Adds a little breathing room below the big text */
        }

        .start-modal h3, 
        .start-modal h4,
        .start-modal h5,
        .start-modal h6,
        .start-modal p {
            font-size: 20px !important; /* The !important forces it to ignore other rules */
            font-family: 'VT323', monospace; 
            font-weight: normal;
            margin-top: -10px; 
            margin-bottom: 20px;
            color: var(--pip-color);
        }


        .title-version {
            font-size: 15px;
            margin-left: 5px;
            opacity: 0.7;
        }

        .player-name {
            font-size: 22px;
            text-align: center;
        }

        .player-country {
            font-size: 15px;
            text-align: center;
            opacity: 0.8;
            margin-bottom: 10px;
        }

        .metric-box {
            background: var(--pip-panel-solid);
            border: 1px solid var(--pip-color);
            padding: 8px;
            margin-bottom: 10px;
            text-align: center;
            box-shadow: var(--pip-glow);
        }

        .reserve-title {
            font-size: 16px;
            margin: 0 0 5px 0;
        }

        .reserve {
            font-size: 32px !important;
            font-weight: bold;
            line-height: 1;
            text-shadow: var(--pip-glow);
        }

        .turn-info-message {
            white-space: normal !important;
            word-wrap: break-word;
            display: block;
            width: 90%;
            /* Changed from max-width to a hard width */
            margin: 5px auto;
            height: 85px !important;
            /* Increased height slightly to accommodate the larger font */
            min-height: 85px !important;
            /* Forces the box to NEVER shrink */
            max-height: 85px !important;
            /* Forces the box to NEVER grow */
            overflow: hidden !important;
            font-size: 18px !important;
            /* Forces the font to ALWAYS be exactly this size */
            line-height: 1.2 !important;
            /* Keeps the lines tightly spaced */
        }

        /* The new cursor animation */
        .terminal-cursor {
            display: inline-block;
            animation: hard-blink 1s step-end infinite;
            color: var(--pip-color);
        }

        @keyframes hard-blink {

            0%,
            100% {
                opacity: 1.0;
                text-shadow: 0 0 5px var(--pip-color);
            }

            50% {
                opacity: 0;
                text-shadow: none;
            }
        }

        .cards-panel div {
            font-size: 16px;
            margin-bottom: 8px;
        }

        .cards-panel span#card-count {
            font-size: 24px;
            margin-left: 8px;
        }

        .turbo-container {
            border: 1px solid var(--pip-color);
            padding: 5px;
            margin-top: 10px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--pip-dark);
            box-shadow: inset 0 0 5px rgba(24, 255, 98, 0.2);
        }

        .turbo-container input {
            width: 18px;
            height: 18px;
            margin-right: 8px;
            cursor: pointer;
            accent-color: var(--pip-color);
        }

        .turbo-container label {
            font-size: 16px;
            cursor: pointer;
        }

        /* --- REPLACEMENT LEADERBOARD CSS --- */

        /* Main container for all player info boxes */
        .info {
            background: var(--pip-panel);
            padding: 8px;
            border-left: 3px solid var(--pip-color);
            box-shadow: -2px 0 15px rgba(0, 0, 0, 0.5);
            width: 260px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 4px;
            /* Reduced gap to save vertical space */
            height: 100vh;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 100;
            overflow-y: auto;
        }

        /* Style for each individual player's box */
        .info-box {
            background: var(--pip-panel-solid);
            border: 1px solid var(--pip-color);
            padding: 6px 8px;
            text-align: center;
            /* Changed to center alignment */
            box-shadow: var(--pip-glow);
            position: relative;
            color: var(--pip-color);
            display: flex;
            flex-direction: column;
            gap: 2px;
            /* Tighter space between lines */
        }

        /* Style all text lines for uniform appearance */
        .leader,
        .faction,
        .reputation,
        .stats {
            font-size: 16px;
            font-weight: normal;
            color: var(--pip-color);
            text-shadow: var(--pip-glow);
            line-height: 1.2;
        }

        /* Make ONLY the player's name bold */
        .leader {
            font-weight: bold !important;
            font-size: 18px !important;
        }

        /* The stats line (Supply | Caps | Codes) */
        .stats {
            margin-top: 8px;
            /* Double space down from reputation */
        }

        /* The progress bar (no change from original) */
        .bar {
            display: none !important;
        }

        /* Diplomacy Button */
        .btn-diplomacy {
            background: var(--pip-dark);
            color: var(--pip-color);
            border: 1px solid var(--pip-color);
            cursor: pointer;
            padding: 6px;
            font-size: 14px;
            font-family: 'VT323';
            margin-top: 12px;
            /* Double space down from stats */
            text-transform: uppercase;
            width: 100%;
            box-sizing: border-box;
            transition: 0.2s;
        }

        .btn-diplomacy:hover {
            background: var(--pip-color);
            color: var(--pip-dark);
        }

        .btn-diplomacy:disabled {
            opacity: 0.8;
            pointer-events: none;
            border-color: transparent;
        }

        /* --- END OF REPLACEMENT CSS --- */









        .toast {
            visibility: hidden;
            min-width: 250px;
            background-color: var(--pip-panel-solid);
            color: var(--pip-color);
            text-align: center;
            border: 1px solid var(--pip-color);
            padding: 16px;
            position: fixed;
            z-index: 30000;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            font-size: 20px;
            box-shadow: var(--pip-glow);
            opacity: 0;
            transition: visibility 0.4s, opacity 0.4s linear;
        }

        .toast.show {
            visibility: visible;
            opacity: 1;
        }

        #vats-tooltip {
            position: fixed;
            background: var(--pip-panel-solid);
            border: 2px solid var(--pip-color);
            color: var(--pip-color);
            padding: 10px;
            font-family: 'VT323', monospace;
            text-transform: uppercase;
            box-shadow: var(--pip-glow);
            pointer-events: none;
            z-index: 10000;
            display: none;
            font-size: 18px;
            line-height: 1.2;
        }

        /* --- Map Settings --- */
        .map {
            position: absolute;
            left: 260px;
            right: 260px;
            top: 0;
            bottom: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), var(--pip-panel-solid);
        }

        .map::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
            pointer-events: none;
            background-image: radial-gradient(circle at center, transparent 40%, var(--vignette-shadow) 120%), url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="1"/%3E%3C/svg%3E');
            opacity: var(--grit-opacity);
            mix-blend-mode: hard-light;
        }

        svg path,
        svg .area {
            cursor: pointer;
        }

        svg path {
            stroke: var(--pip-color) !important;
            stroke-width: 1px !important;
            transition: stroke 0.3s;
        }

        svg path:hover {
            filter: brightness(1.3);
        }

        .allied-territory {
            stroke: #0088ff !important;
            stroke-width: 2px !important;
            stroke-dasharray: 4 4 !important;
            filter: drop-shadow(0 0 5px #0088ff);
        }

        svg text {
            fill: var(--pip-color) !important;
            stroke: #000000 !important;
            stroke-width: 2px !important;
            paint-order: stroke fill !important;
            font-size: 20px !important;
            /* Reduced to 16px to fit nicely inside territories */
            text-shadow: 0 0 10px rgba(0, 0, 0, 1) !important;
            pointer-events: none !important;
        }



        svg path.connection,
        svg line,
        svg polyline {
            stroke: var(--pip-color) !important;
            stroke-width: 3px !important;
            stroke-dasharray: 6 6 !important;
            opacity: 0.6 !important;
        }

        .vats-flash {
            fill: var(--pip-color) !important;
            filter: drop-shadow(0 0 20px var(--pip-color));
            transition: all 0.05s;
        }

        .radstorm-flash {
            fill: #ffcc00 !important;
            filter: drop-shadow(0 0 20px #ffcc00);
            transition: all 0.05s;
        }

        .flash {
            stroke: #ffffff !important;
            stroke-width: 4px !important;
            animation: targetPulse 1.2s infinite alternate !important;
            paint-order: stroke fill !important;
        }

        /* Scorched Earth Map FX */
        .crater {
            fill: #111 !important;
            stroke: #ff0000 !important;
            stroke-width: 3px !important;
            filter: drop-shadow(0 0 10px #ff0000);
            pointer-events: none;
        }

        @keyframes glowSeaPulse {
            0% {
                stroke: #ff5500;
                filter: drop-shadow(0 0 5px #ff5500);
            }

            100% {
                stroke: #ff0000;
                filter: drop-shadow(0 0 15px #ff0000);
            }
        }

        .glowing-sea {
            animation: glowSeaPulse 1.5s infinite alternate !important;
            stroke-width: 2px !important;
        }

        @keyframes targetPulse {
            0% {
                filter: brightness(1.2) drop-shadow(0 0 5px var(--pip-color));
            }

            100% {
                filter: brightness(2.0) drop-shadow(0 0 20px var(--pip-color));
            }
        }

        .combat-log-container {
            position: absolute;
            left: 260px;
            right: 260px;
            bottom: 0;
            height: 150px;
            background: var(--pip-panel) !important; 
            border-top: 3px solid var(--pip-color);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            z-index: 50;
            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5);
        }

        .combat-log-header {
            background: var(--pip-color);
            color: var(--pip-dark);
            padding: 5px 15px;
            font-weight: bold;
            font-size: 18px;
            text-transform: uppercase;
        }

        .combat-log-messages {
            flex-grow: 1;
            overflow-y: auto;
            padding: 10px 15px;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .log-entry {
            opacity: 0.9;
            font-size: 18px;
            /* Force the log text to be larger and more readable */
            margin-bottom: 2px;
            /* Adds a tiny bit of breathing room between lines */
        }

        /* Force ALL log entries to be the same larger size */
        .log-entry {
            opacity: 0.9; /* Restored to original for slight 'log' feel */
            font-size: 18px !important; /* Match the directive's explicit size */
            margin-bottom: 2px;
            text-shadow: none !important; /* This removes the glow */
            font-weight: normal !important; /* This removes the unwanted boldness */
        }



        /* Important messages just get bold and glow, no size difference */
        .log-entry.important {
            font-weight: bold;
            text-shadow: var(--pip-glow);
        }

        .log-entry.nuke {
            color: #ff3333;
            text-shadow: 0 0 5px #ff0000;
            font-weight: bold;
        }

        .log-entry.nuke {
            color: #ff3333;
            text-shadow: 0 0 5px #ff0000;
            font-weight: bold;
        }

        .risk-card {
            border: 1px solid var(--pip-color);
            padding: 10px;
            margin-bottom: 8px;
            cursor: pointer;
            background: var(--pip-dark);
            color: var(--pip-color);
            text-transform: uppercase;
            transition: all 0.1s ease;
        }

        .risk-card:hover {
            box-shadow: var(--pip-glow);
            filter: brightness(1.3);
        }

        .risk-card.selected {
            background: var(--pip-color);
            color: var(--pip-dark);
            box-shadow: var(--pip-glow);
            font-weight: bold;
        }

        .map-brackets {
            position: absolute;
            left: 260px;
            right: 260px;
            top: 0;
            bottom: 150px;
            pointer-events: none;
            z-index: 40;
            border-radius: 16px; 
            box-shadow: inset 0 0 100px 40px rgba(0, 0, 0, 0.95);

        }

        .map-brackets::before,
        .map-brackets::after {
            display: none;
        }




        .hp-bar {
            width: 100%;
            height: 15px;
            border: 1px solid var(--pip-color);
            margin-top: 5px;
            position: relative;
        }

        .hp-fill {
            background: var(--pip-color);
            width: 85%;
            height: 100%;
            box-shadow: var(--pip-glow);
        }

        .pip-nav {
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            border-top: 2px solid var(--pip-color);
            padding-top: 10px;
            margin-top: 10px;
        }

.pip-nav span {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        /* This only handles making the text clickable, NOT bright */
        .pip-nav span.interactive {
            cursor: pointer;
            pointer-events: auto;
        }

        /* Optional: Gives a slight glow when hovering over a clickable tab so players know it works */
        .pip-nav span.interactive:hover {
            opacity: 0.8;
        }

        /* This handles making the active screen bright */
        .pip-nav span.active {
            opacity: 1;
            font-weight: bold;
            text-shadow: var(--pip-glow);
        }


        .info>div.defeated {
            filter: grayscale(100%);
            border: 1px dashed var(--pip-color) !important;
            transition: all 0.5s ease;
        }

        .info>div.defeated .country,
        .info>div.defeated .leader {
            opacity: 0.4;
        }

        .info>div.defeated .income {
            color: var(--pip-color);
            opacity: 1;
            font-weight: bold;
            text-shadow: none;
            font-size: 16px;
        }

        .info>div.defeated .bar,
        .info>div.defeated .btn-diplomacy {
            display: none;
        }

        .download-link {
            text-decoration: none;
            transition: text-decoration 0.2s ease;
        }

        .download-link:hover {
            text-decoration: underline;
            filter: brightness(1.2);
        }

        .radio-on,
        .map-active {
            color: var(--pip-color) !important;
            font-weight: bold !important;
            text-shadow: none !important;
            opacity: 1 !important;
        }


        /* Custom Scrollbar for Patch Notes */
        .ticker-window {
            height: 250px;
            overflow-y: auto;
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border: 1px inset var(--pip-color);
            margin-top: 15px;
            padding: 10px;
            text-align: left;
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
        }

        .ticker-window::-webkit-scrollbar {
            width: 8px;
        }

        .ticker-window::-webkit-scrollbar-track {
            background: var(--pip-dark);
            border-left: 1px solid var(--pip-color);
        }

        .ticker-window::-webkit-scrollbar-thumb {
            background: var(--pip-color);
        }

        .ticker-text {
            width: 95%;
            position: relative;
        }

        .patch-version {
            font-weight: bold;
            text-shadow: 0 0 5px var(--pip-color);
            margin-top: 20px;
            border-bottom: 1px dashed var(--pip-color);
            display: inline-block;
        }

        .patch-note {
            margin-bottom: 8px;
            font-size: 15px;
            padding-left: 10px;
            border-left: 2px solid var(--pip-color);
        }

        .cmdr-stats {
            font-size: 14px;
            margin-top: 5px;
            color: var(--vip-color);
            text-shadow: 0 0 5px var(--vip-color);
            display: flex;
            justify-content: space-between;
        }

        .btn-stimpak {
            background: none;
            border: 1px solid var(--vip-color);
            color: var(--vip-color);
            cursor: pointer;
            font-family: 'VT323';
            font-size: 12px;
            padding: 2px 5px;
        }

        .btn-stimpak:hover {
            background: var(--vip-color);
            color: var(--pip-dark);
        }

        .btn-stimpak:disabled {
            opacity: 0.3;
            pointer-events: none;
            border-color: transparent;
        }

        /* --- MOBILE MODAL FIXES (BOOT, REBOOT, HELP, PATCH NOTES) --- */
        @media screen and (max-width: 950px) {
            
            /* ISOLATED MOBILE HEIGHT FIX */
            body, .overlay {
                height: 100dvh !important;
            }

            .start-modal,
            #confirm-restart-modal .content,

            .cards-modal,
            .win-content,
            .help-modal-content,
            #updates-modal .content {
                max-height: 90dvh !important;
                /* Shrunk from 95 to 90 for more bottom clearance */
                height: auto;
                overflow-y: auto !important;
                width: 95vw !important;
                padding: 10px 15px !important;
                box-sizing: border-box !important;
            }

            .start-modal h1.title {
                font-size: 22px;
                margin-top: 0;
                margin-bottom: 5px;
            }

            .form-group {
                margin-bottom: 6px !important;
            }

            .form-group label {
                font-size: 13px;
                margin-bottom: 2px;
            }

            input[type="text"],
            select {
                padding: 4px 8px;
                font-size: 14px;
            }

            /* Aggressively shrink the grid & buttons */
            .form-group[style*="grid-template-columns"] {
                gap: 6px 5px !important;
                margin-bottom: 10px !important;
            }

            .form-group[style*="grid-template-columns"] span {
                font-size: 11px !important;
            }

            #submit-name {
                padding: 6px;
                font-size: 16px;
                margin-top: 5px !important;
                margin-bottom: 0 !important;
            }

            /* Specific Help Modal Mobile Tweaks */
            .help-modal-content p,
            .help-modal-content div {
                font-size: 11px !important;
                margin-bottom: 6px !important;
                line-height: 1.1 !important;
            }

            .help-modal-content h2 {
                font-size: 16px !important;
                margin-bottom: 5px !important;
            }
        }

        /* --- ROTATION WARNING --- */
        #portrait-warning {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100dvh;
            background: var(--pip-dark);
            color: var(--pip-color);
            z-index: 100000;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 20px;
            border: 8px solid var(--pip-color);
            box-sizing: border-box;
            flex-direction: column;
            text-shadow: var(--pip-glow);
            padding: 20px;
        }

        @media screen and (max-width: 950px) and (orientation: portrait) {
            #portrait-warning {
                display: flex;
            }

            .container {
                display: none;
            }
        }

        /* --- MOBILE LANDSCAPE OVERRIDES --- */
        @media screen and (max-width: 950px) and (orientation: landscape) {

            /* Fix the mobile address bar bug and fix flex-scrolling */
            .player-panel,
            .info {
                height: 100dvh;
                justify-content: flex-start;
            }

            .player-panel {
                width: 140px;
                padding: 5px;
            }

            .info {
                width: 140px;
                padding: 5px;
                gap: 2px;
            }

            .map {
                left: 140px;
                right: 140px;
                bottom: 0;

            }

            /* --- NEW: Hide brackets completely on mobile --- */
            .map-brackets {
                display: none !important;
            }

            /* Force bottom buttons to stay scrollable but anchored to bottom */
            .player-panel>div:last-child {
                margin-top: auto;
                padding-bottom: 5px;
            }

            .info>button#help-btn {
                margin-top: auto;
            }

            /* Ultra-Tight UI for Left Panel */
            .player-panel h1 {
                font-size: 16px;
                margin-bottom: 5px;
            }

            .title-version {
                display: none;
            }

            .player-name {
                font-size: 14px;
            }

            .player-country {
                font-size: 10px;
                margin-bottom: 5px;
            }

            .reserve {
                font-size: 20px;
            }

            button {
                font-size: 10px;
                padding: 4px;
                margin-top: 4px;
            }

            /* HIDE DIRECTIVES COMPLETELY ON MOBILE */
            .turn-info,
            .turn-info-message {
                display: none !important;
            }
            
            /* PULL REINFORCEMENTS UP TO FILL THE GAP */
            .metric-box[style*="margin-top: 20px;"] {
                margin-top: 0 !important;
            }

            /* HIDE NON-ESSENTIALS TO SAVE VERTICAL SPACE */


            .player-panel>div:first-child>div:nth-of-type(3) {
                display: none !important;
            }

            #vats-tooltip {
                display: none !important;
            }

            .metric-box {
                padding: 2px;
                margin-bottom: 4px;
            }

            .cards-panel span#card-count {
                font-size: 14px;
            }

            .pip-nav {
                font-size: 10px;
                margin-top: 5px;
                padding-top: 5px;
            }

            /* HIDE TURBO CONTAINER COMPLETELY ON MOBILE */
            .turbo-container {
                display: none !important;
            }

            .pip-nav span {
                cursor: pointer;
            }


            /* Make all tabs clickable */

            /* New Rules for Inventory */
            .special-item {
                border: 1px solid var(--pip-color);
                background: rgba(0, 0, 0, 0.2);
                padding: 5px 8px;
                opacity: 0.4;
            }

            .special-item.found {
                opacity: 1;
                background: var(--pip-panel-solid);
                box-shadow: var(--pip-glow);
            }

            .special-title {
                font-weight: bold;
                font-size: 16px;
            }

            .special-desc {
                font-size: 12px;
                opacity: 0.8;
            }

            .bobble-activate-btn {
                width: auto !important;
                font-size: 12px !important;
                padding: 2px 6px !important;
                margin-top: 5px !important;
            }

            .cooldown-timer {
                font-size: 12px;
                color: #ffcc00;
                margin-top: 5px;
                font-weight: bold;
            }

            @keyframes pulse {
                0% {
                    text-shadow: 0 0 5px var(--pip-color);
                }

                50% {
                    text-shadow: 0 0 20px #fff, 0 0 25px #fff;
                }

                100% {
                    text-shadow: 0 0 5px var(--pip-color);
                }
            }

            .inv-pulse {
                animation: pulse 1.5s infinite;
                color: #fff !important;
            }


            /* Tighten Nuke/Commander Elements */
            #cmdr-ui-container {
                margin-top: 4px !important;
                padding: 2px !important;
            }

            .cmdr-stats {
                font-size: 9px;
                margin-top: 2px;
            }

            #btn-use-stimpak {
                font-size: 9px;
                padding: 2px;
            }

            #nuke-ui-container {
                margin-top: 4px !important;
            }

            #btn-launch-nuke {
                padding: 2px !important;
                font-size: 10px !important;
                margin-top: 2px !important;
            }

            /* ADJUSTED LEADERBOARD FOR SMALLER SCREENS */
            .info>div:not(.restart) {
                padding: 4px;
            }

            .info .leader {
                font-size: 16px;
                margin-bottom: 2px;
            }

            /* Increased from 12px to 16px */
            .info .country {
                font-size: 12px;
                margin-bottom: 2px;
            }

            /* Increased from 9px to 12px */
            .info .income {
                font-size: 16px;
                font-weight: bold;
            }

            /* Increased from 12px to 16px */
            .info>div>div:nth-child(3) {
                font-size: 12px;
            }

            /* "Reinforcements:" text */

            .caps-display {
                font-size: 12px !important;
                margin-top: 2px !important;
            }

            /* "Bottle Caps:" text */
            .caps-display span {
                font-size: 16px !important;
                font-weight: bold;
            }

            /* The actual number of caps */

            .btn-diplomacy {
                font-size: 11px;
                padding: 2px;
                margin-top: 4px;
            }

            .bar {
                margin-top: 4px;
                height: 3px;
            }


            /* The Ghost Log */
            .combat-log-container {
                left: 145px;
                right: 145px;
                bottom: 5px;
                height: auto;
                max-height: 80px;
                background: transparent;
                border: none;
                box-shadow: none;
                pointer-events: none;
                transition: opacity 0.5s ease;
                opacity: 0;
                z-index: 9000;
            }

            .combat-log-container.active-log {
                opacity: 1;
            }

            .combat-log-header {
                display: none;
            }

            .combat-log-messages {
                padding: 0;
                overflow: hidden;
                justify-content: flex-end;
            }

            .log-entry {
                text-shadow: 0 0 4px #000, 0 0 8px #000, 0 0 12px #000, 0 0 16px var(--pip-dark);
                font-weight: bold;
                font-size: 16px;
                /* Increased from 11px to 16px */
            }
        }

    /* Admin/Dev Menu Unified Buttons */

    #dev-modal button:hover {
        background-color: var(--pip-color);
        color: var(--pip-dark, #1a1a1a);
    }

        /* Specific override for the perk button to respect its unique color */

        /* Make the dev perk button match the standard theme */
        #dev-modal #dev-perk {
            color: var(--pip-color) !important;
            border-color: var(--pip-color) !important;
        }


        .pip-nav span {
            cursor: pointer;
        }

        .special-item {
            border: 1px solid var(--pip-color);
            background: rgba(0, 0, 0, 0.2);
            padding: 5px 8px;
            opacity: 0.4;
        }

        .special-item.found {
            opacity: 1;
            background: var(--pip-panel-solid);
            box-shadow: var(--pip-glow);
        }

        .special-title {
            font-weight: bold;
            font-size: 16px;
        }

        .special-desc {
            font-size: 12px;
            opacity: 0.8;
        }

        .bobble-activate-btn {
            width: auto !important;
            font-size: 12px !important;
            padding: 2px 6px !important;
            margin-top: 5px !important;
        }

        .cooldown-timer {
            font-size: 12px;
            color: #ffcc00;
            margin-top: 5px;
            font-weight: bold;
        }

        @keyframes pulse {
            0% {
                text-shadow: 0 0 5px var(--pip-color);
            }

            50% {
                text-shadow: 0 0 20px #fff, 0 0 25px #fff;
            }

            100% {
                text-shadow: 0 0 5px var(--pip-color);
            }
        }

        .inv-pulse {
            animation: pulse 1.5s infinite;
            color: #fff !important;
            text-shadow: 0 0 8px #fff;
        }

        /* --- Developer Menu & General Button Fixes --- */
        button:active {
            transform: translateY(2px);
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7);
        }

        #dev-modal button {
            color: var(--pip-color) !important;
        }

        #dev-modal button:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #ffffff !important;
            text-shadow: 0 0 5px #000000;
            box-shadow: 0 0 15px var(--pip-color);
        }

        #dev-modal button:active {
            transform: translateY(2px);
            background: rgba(0, 0, 0, 0.5);
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7);
        }

        #dev-modal #dev-perk {
            color: var(--vip-color) !important;
        }

        /* Dynamic Bobblehead Grid Buttons */
        .bobblehead-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* Centers content vertically */
            text-align: center;
            padding: 8px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid var(--pip-color);
            color: var(--pip-color);
            font-family: 'VT323', monospace;
            cursor: pointer;
            transition: all 0.2s ease;
            width: 100%;
            min-height: 85px;
            /* Shorter height for business card look */
        }

        .bobblehead-btn:hover:not(:disabled) {
            background: var(--pip-color);
            color: #fff !important;
            text-shadow: 0 0 5px #000;
            box-shadow: 0 0 10px var(--pip-color);
        }

        .bobblehead-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            background: transparent;
            border: 1px dashed var(--pip-color);
        }

        .bobblehead-btn.cooldown {
            opacity: 0.7;
            border: 1px solid #ffcc00;
            background: rgba(255, 204, 0, 0.1);
        }

        /* Corrected INV Pulse Animation */
        @keyframes invPulseFade {
            0% {
                opacity: 0.4;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0.4;
            }
        }

        .inv-pulse {
            animation: invPulseFade 1.5s infinite;
            color: var(--pip-color) !important;
            text-shadow: none !important;
            /* Ensure no glow */
            font-weight: bold !important;
            /* ADDED: Makes it match the brightness of MAP */
        }

        /* --- Aggressive Terminal Alerts (Diegetic Notifications) --- */
        #toast-container {
            position: fixed;
            top: 20%;
            /* Upper middle of the screen */
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            gap: 20px;
            /* More breathing room between alerts */
            z-index: 10005;
            pointer-events: none;
            width: 60%;
            max-width: 600px;
        }

        .dynamic-toast {
            position: relative;
            background: var(--pip-color);
            /* Solid theme color background */
            color: #000 !important;
            /* Harsh black text cutting through the glow */
            text-align: center;
            border: 3px solid #fff;
            /* Sharp white border to make it pop */
            padding: 15px 20px;
            font-size: 28px;
            font-weight: 900;
            font-family: 'VT323', monospace;
            box-shadow: 0 0 30px var(--pip-color), inset 0 0 10px #000;
            /* Massive outer glow */
            text-shadow: none !important;
            /* No text glow, we want it to look stamped out */
            text-transform: uppercase;
            letter-spacing: 2px;
            opacity: 0;
            transform: scale(0.9) translateY(-20px);
            /* Starts small and high */
            transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden;
        }

        /* Softened scanlines over the alert box */
        .dynamic-toast::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* Reduced the black line opacity from 0.4 to 0.15 for readability */
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
            background-size: 100% 4px, 3px 100%;
            pointer-events: none;
            z-index: 2;
        }


        /* Aggressive snap-into-place animation */
        .dynamic-toast.show {
            opacity: 1;
            transform: scale(1) translateY(0);
        }

        /* Specific override for Nuke Codes to make them terrifying */
        .dynamic-toast.nuke-alert {
            background: #ff0000 !important;
            border-color: #ffcc00 !important;
            box-shadow: 0 0 50px #ff0000, inset 0 0 15px #000 !important;
            animation: nukeFlash 0.1s infinite alternate;
        }

        @keyframes nukeFlash {
            0% {
                opacity: 0.8;
            }

            100% {
                opacity: 1;
                box-shadow: 0 0 80px #ff0000, inset 0 0 20px #000 !important;
            }
        }

        /* --- FOG OF WAR STYLES --- */

        .fog-shroud {
            /* The fill is now our self-contained, opaque static pattern! */
            fill: url(#gritty-grey-static) !important;

            /* Your approved grey border color */
            stroke: #797a79 !important;
            stroke-width: 1px !important;
            transition: fill 0.5s ease;
        }

        /* This colors the dots inside the pattern with your theme's --pip-color */
        .static-dot {
            fill: var(--pip-color, #00ff00);
            opacity: 0.35;
            /* You can adjust this to make the static more/less intense */
        }

        .static-overlay {
            fill: url(#themeable-static-pattern) !important;
            pointer-events: none;
            /* Prevents it from interfering with clicks */
        }

        /* --- LEADERBOARD INTEL STYLES (FINAL) --- */

        /* 1. This styles the actual numbers. It makes them bold and gives them the UI theme color. */
        .stat-value {
            color: var(--pip-color);
            font-weight: bold;
            font-size: 16px;
            text-shadow: var(--pip-glow);
        }


        /* --- NEW: Rigid Grid for Stats to Prevent Shifting --- */
        .stats-grid {
            display: grid;
            grid-template-columns: auto 30px auto 30px auto 30px;
            /* Label, Value, Label, Value... */
            gap: 0 4px;
            /* A small gap between columns */
            align-items: center;
            justify-content: center;
            margin-top: 8px;
            /* Double space */
        }

        .stats-grid>span {
            white-space: nowrap;
            /* Prevent labels from wrapping */
        }

        .stat-value {
            text-align: left;
            /* Align numbers to the left within their fixed cell */
            font-weight: bold;
        }
		
		
		/* --- FACTION ICON VARIABLES --- */
        :root {
            /* Fallout 3 Theme */
            --icon-enclave: url(''); 
            --icon-supermutants: url(''); 
            --icon-talon: url(''); 
            --icon-reilly: url(''); 
            --icon-outcasts: url(''); 

            /* New Vegas Theme */
            --icon-legion: url('');
            --icon-mrhouse: url('');
            --icon-khans: url('');
            --icon-boomers: url('');
            --icon-fiends: url('');

            /* Fallout 4 Theme */
            --icon-institute: url(''); 
            --icon-bos: url('');
            --icon-railroad: url(''); 
            --icon-gunners: url('');
            --icon-raiders: url('');
        }

        /* --- THE MAGIC MASK CLASS --- */
        .faction-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            vertical-align: middle;
            margin-right: 4px;
            background-color: currentColor; 
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
        }

        .faction-icon.enclave { -webkit-mask-image: var(--icon-enclave); mask-image: var(--icon-enclave); }
        .faction-icon.supermutants { -webkit-mask-image: var(--icon-supermutants); mask-image: var(--icon-supermutants); }
        .faction-icon.talon { -webkit-mask-image: var(--icon-talon); mask-image: var(--icon-talon); }
        .faction-icon.reilly { -webkit-mask-image: var(--icon-reilly); mask-image: var(--icon-reilly); }
        .faction-icon.outcasts { -webkit-mask-image: var(--icon-outcasts); mask-image: var(--icon-outcasts); }
        
        .faction-icon.legion { -webkit-mask-image: var(--icon-legion); mask-image: var(--icon-legion); }
        .faction-icon.mrhouse { -webkit-mask-image: var(--icon-mrhouse); mask-image: var(--icon-mrhouse); }
        .faction-icon.khans { -webkit-mask-image: var(--icon-khans); mask-image: var(--icon-khans); }
        .faction-icon.boomers { -webkit-mask-image: var(--icon-boomers); mask-image: var(--icon-boomers); }
        .faction-icon.fiends { -webkit-mask-image: var(--icon-fiends); mask-image: var(--icon-fiends); }
        
        .faction-icon.institute { -webkit-mask-image: var(--icon-institute); mask-image: var(--icon-institute); }
        .faction-icon.bos { -webkit-mask-image: var(--icon-bos); mask-image: var(--icon-bos); }
        .faction-icon.railroad { -webkit-mask-image: var(--icon-railroad); mask-image: var(--icon-railroad); }
        .faction-icon.gunners { -webkit-mask-image: var(--icon-gunners); mask-image: var(--icon-gunners); }
        .faction-icon.raiders { -webkit-mask-image: var(--icon-raiders); mask-image: var(--icon-raiders); }
        
        .faction-icon.default { background-color: transparent; }
		
        .faction-icon.default { background-color: transparent; }
        
        /* --- NEW: PURE CSS PAW PRINT FOR UI --- */
        .paw-icon {
            -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.5,4c-1.4,0-2.5,1.5-2.5,3.4S7.1,10.8,8.5,10.8s2.5-1.5,2.5-3.4S9.9,4,8.5,4z M15.5,4c-1.4,0-2.5,1.5-2.5,3.4s1.1,3.4,2.5,3.4s2.5-1.5,2.5-3.4S16.9,4,15.5,4z M3.5,9.6C2.1,9.6,1,11.2,1,13s1.1,3.4,2.5,3.4s2.5-1.5,2.5-3.4S4.9,9.6,3.5,9.6z M20.5,9.6c-1.4,0-2.5,1.5-2.5,3.4s1.1,3.4,2.5,3.4s2.5-1.5,2.5-3.4S21.9,9.6,20.5,9.6z M12,12.3c-3.1,0-5.6,2.2-5.6,5.3c0,2.6,2.5,4.4,5.6,4.4s5.6-1.8,5.6-4.4C17.6,14.5,15.1,12.3,12,12.3z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.5,4c-1.4,0-2.5,1.5-2.5,3.4S7.1,10.8,8.5,10.8s2.5-1.5,2.5-3.4S9.9,4,8.5,4z M15.5,4c-1.4,0-2.5,1.5-2.5,3.4s1.1,3.4,2.5,3.4s2.5-1.5,2.5-3.4S16.9,4,15.5,4z M3.5,9.6C2.1,9.6,1,11.2,1,13s1.1,3.4,2.5,3.4s2.5-1.5,2.5-3.4S4.9,9.6,3.5,9.6z M20.5,9.6c-1.4,0-2.5,1.5-2.5,3.4s1.1,3.4,2.5,3.4s2.5-1.5,2.5-3.4S21.9,9.6,20.5,9.6z M12,12.3c-3.1,0-5.6,2.2-5.6,5.3c0,2.6,2.5,4.4,5.6,4.4s5.6-1.8,5.6-4.4C17.6,14.5,15.1,12.3,12,12.3z"/></svg>');
            background-color: var(--pip-color);
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            filter: drop-shadow(0 0 3px var(--pip-color));
        }

		
/* --- ROBCO OS TERMINAL STYLES --- */
        .help-nav-item, .help-back-btn {
            cursor: pointer;
            padding: 2px 8px;
            margin-bottom: 4px;
            color: var(--pip-color);
            display: inline-block;
            width: fit-content;
            transition: none; /* Instant snap color change */
        }
        
        .help-nav-item:hover, .help-back-btn:hover {
            background-color: var(--pip-color);
            color: var(--pip-dark, #000) !important;
            text-shadow: none !important;
            font-weight: bold;
        }
		
        /* --- UPDATED LEVELING SYSTEM UI --- */
        #leveling-ui-container {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(0, 255, 0, 0.2);
        }


        .perk-choice-btn {
            background: rgba(0, 255, 0, 0.1) !important;
            border: 1px solid #00ff00 !important;
            padding: 15px !important;
            margin: 10px 0 !important;
            text-align: left !important;
            transition: all 0.2s !important;
        }
        .perk-choice-btn:hover {
            background: rgba(0, 255, 0, 0.3) !important;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.5) !important;
            transform: scale(1.02);
        }

		
		

/* ===== Rules previously injected at runtime by game.js (moved in v2.5) ===== */
/* moved from game.js (radstorm-styles) */
@keyframes radstormWarn { 0% { fill: #ffcc00; filter: drop-shadow(0 0 5px #ffcc00); } 100% { fill: #ff8800; filter: drop-shadow(0 0 15px #ff8800); } }
        @keyframes radstormAct { 0% { fill: #39ff14; filter: drop-shadow(0 0 10px #39ff14); } 100% { fill: #00ff00; filter: drop-shadow(0 0 25px #00ff00); } }
        .radstorm-warning { animation: radstormWarn 1s infinite alternate !important; opacity: 0.85; }
        .radstorm-active { animation: radstormAct 0.4s infinite alternate !important; opacity: 0.95; }

/* moved from game.js (cmdr-hp-pulse-style) */
@keyframes cmdr-pulse { 0% { opacity: 1; box-shadow: 0 0 10px #ff3333; } 100% { opacity: 0.7; box-shadow: 0 0 20px #ff0000; } }

/* moved from game.js (perk-custom-styles) */
/* STATE 1: READY */
                            @keyframes borderOnlyPulse {
                                0% { border-color: var(--pip-color); box-shadow: inset 0 0 5px var(--pip-color), 0 0 5px var(--pip-color); }
                                100% { border-color: #ffffff; box-shadow: inset 0 0 5px var(--pip-color), 0 0 15px var(--pip-color); }
                            }
                            .perk-ready-state {
                                animation: borderOnlyPulse 1s infinite alternate !important;
                                filter: none !important;
                                background-color: var(--pip-dark) !important; 
                            }
                            /* FIX: Tell the button how to correctly handle a mouse hover! */
                            .perk-ready-state:hover {
                                background-color: var(--pip-color) !important;
                                color: var(--pip-dark) !important;
                            }

                            /* STATE 2: RUNNING */
                            @keyframes textOnlyPulse {
                                0% { color: rgba(128, 128, 128, 0.5); text-shadow: none; border-color: rgba(128, 128, 128, 0.3); }
                                100% { color: var(--pip-color); text-shadow: 0 0 8px var(--pip-color); border-color: rgba(128, 128, 128, 0.3); }
                            }
                            .perk-running-state {
                                animation: textOnlyPulse 1.5s infinite alternate !important;
                                background-color: var(--pip-dark) !important; 
                                box-shadow: inset 0 0 5px rgba(0,0,0,0.5) !important; 
                            }
                            
                            /* STATE 3: DISABLED */
                            .perk-disabled-state {
                                background-color: var(--pip-dark) !important;
                                opacity: 0.5 !important;
                                box-shadow: inset 0 0 5px var(--pip-color), 0 0 5px var(--pip-color) !important;
                            }

/* moved from game.js (ui-polish-styles) */
/* Leaderboard Pulsing Animation */
                    @keyframes activeTurnPulse {
                        0% { box-shadow: 0 0 5px var(--pip-color), inset 0 0 2px var(--pip-color); border-color: var(--pip-color); }
                        100% { box-shadow: 0 0 15px var(--pip-color), inset 0 0 8px var(--pip-color); border-color: #ffffff; }
                    }

                    /* When highlighted (and turbo is OFF), pulse the card */
                    body:not(.turbo-active) .player-panel > div.highlight {
                        animation: activeTurnPulse 1.2s infinite alternate !important;
                        z-index: 10;
                    }

                    /* Force Commander UI to match theme (including all text inside it) */
                    #cmdr-ui-container, #cmdr-ui-container span, #cmdr-ui-container div {
                        border-color: var(--pip-color) !important;
                        color: var(--pip-color) !important;
                        text-shadow: 0 0 5px var(--pip-color) !important;
                    }
                    /* Ensure the health bar background itself doesn't turn transparent */
                    #cmdr-hp-fill {
                        text-shadow: none !important;
                    }