/* ============================================
   CSS VARIABLES & RESET (From index.html)
   ============================================ */
        :root {
            --yellow: #f4c025;
            --orange: #d15610;
            --bg-dark: #1a1a1b;
            --bg-darker: #0d0d0d;
            --neon-green: #39ff14;
            --neon-red: #ff073a;
            --neon-blue: #00d4ff;
            --neon-purple: #b026ff;
            --text-main: #e0e0e0;
            --border: 3px solid #000;
            --shadow: 6px 6px 0px #000;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background: var(--bg-darker);
            color: var(--text-main);
            font-family: 'Share Tech Mono', monospace;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
            background-image:
                radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.8) 100%),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.15) 2px, rgba(0, 0, 0, 0.15) 4px);
            display: flex;
            flex-direction: column;
            align-items: stretch; /* allow full-width game-layout */
        }

        /* CRT scanline overlay */
        body::after {
            content: "";
            position: fixed;
            inset: 0;
            background: repeating-linear-gradient(0deg,
                    rgba(0, 0, 0, 0) 0px,
                    rgba(0, 0, 0, 0) 2px,
                    rgba(0, 0, 0, 0.15) 2px,
                    rgba(0, 0, 0, 0.15) 4px);
            pointer-events: none;
            z-index: 999;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
        }

        /* ============================================
   HEADER / MARQUEE (From index.html)
   ============================================ */
        .header {
            text-align: center;
            padding: 2rem 1rem 1rem;
            width: 100%;
        }

        .marquee-sign {
            font-size: clamp(2rem, 5vw, 3.5rem);
            color: var(--yellow);
            text-shadow: 3px 3px 0 var(--orange), -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
            border: var(--border);
            padding: 0.8rem 2rem;
            background: var(--bg-dark);
            box-shadow: var(--shadow), 0 0 30px rgba(244, 192, 37, 0.4);
            display: inline-block;
            transform: rotate(-1.5deg);
            letter-spacing: 3px;
            animation: signFlicker 4s infinite;
            text-decoration: none;
        }

        @keyframes signFlicker {

            0%,
            93%,
            100% {
                box-shadow: var(--shadow), 0 0 30px rgba(244, 192, 37, 0.4);
            }

            95% {
                box-shadow: var(--shadow), 0 0 5px rgba(244, 192, 37, 0.1);
            }

            97% {
                box-shadow: var(--shadow), 0 0 40px rgba(244, 192, 37, 0.6);
            }
        }

        .sub-marquee {
            font-size: clamp(0.7rem, 2vw, 1rem);
            background: #000;
            color: var(--yellow);
            padding: 0.4rem 1rem;
            display: inline-block;
            margin-top: 10px;
            border: 2px solid var(--yellow);
            transform: rotate(1deg);
        }

        /* ============================================
   SLOT MACHINE
   ============================================ */

        .slot-machine-container {
            margin-top: 2rem;
            padding: 2rem;
            background: var(--bg-dark);
            border: var(--border);
            box-shadow: var(--shadow), 0 0 40px rgba(209, 86, 16, 0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            max-width: 900px;
            width: 95%;
            position: relative;
        }

        .slots-window {
            display: flex;
            gap: 1rem;
            background: #000;
            padding: 1rem;
            border: 4px inset #333;
            border-radius: 8px;
        }

        .slot-column {
            width: 210px;
            height: 210px;
            background: #111;
            border: 2px solid #444;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        .slot-reel {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            will-change: transform;
        }

        .slot-column.match-highlight {
            border-color: var(--neon-green);
            box-shadow: inset 0 0 20px rgba(57, 255, 20, 0.4), 0 0 15px var(--neon-green);
            animation: win-pulse 1s infinite alternate;
            z-index: 10;
        }

        .slot-column.triple-highlight {
            border-color: var(--yellow);
            box-shadow: inset 0 0 30px rgba(244, 192, 37, 0.5), 0 0 25px var(--yellow);
            animation: win-pulse 0.5s infinite alternate;
            z-index: 10;
        }

        .slot-item {
            width: 190px;
            height: 190px;
            flex-shrink: 0;
            text-align: center;
            font-family: 'Oswald', sans-serif;
            font-size: 0.9rem;
            color: #fff;
            padding: 10px;
            padding-top: 25px; /* Space for the brand tag */
            border: 2px solid var(--yellow);
            background: var(--bg-darker);
            margin: 10px 0; /* Vertical spacing */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            box-shadow: 2px 2px 0 #000;
            position: relative;
        }

        .slot-item.blur {
            filter: blur(2px);
            opacity: 0.8;
        }

        .slot-item .brand {
            position: absolute;
            top: 0;
            left: 0;
            background: var(--yellow);
            color: #000;
            font-size: 0.6rem;
            padding: 2px 6px;
            font-weight: bold;
            text-transform: uppercase;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            z-index: 2;
        }

        .stop-btn {
            font-family: 'Oswald', sans-serif;
            font-size: 2rem;
            font-weight: 700;
            text-transform: uppercase;
            padding: 1rem 3rem;
            background: var(--neon-red);
            color: #fff;
            border: var(--border);
            box-shadow: 6px 6px 0 #000;
            cursor: pointer;
            transition: all 0.1s;
            letter-spacing: 2px;
            text-shadow: 2px 2px 0 #000;
            min-width: 280px;
            /* Consistency for STOP vs SPIN AGAIN */
        }

        .stop-btn:hover:not(:disabled) {
            background: #ff3333;
            box-shadow: 4px 4px 0 #000, 0 0 20px var(--neon-red);
            transform: translate(2px, 2px);
        }

        .stop-btn:active:not(:disabled) {
            transform: translate(6px, 6px);
            box-shadow: 0px 0px 0 #000;
        }

        .stop-btn:disabled {
            background: #555;
            color: #888;
            cursor: not-allowed;
            box-shadow: 2px 2px 0 #000;
            transform: translate(4px, 4px);
            text-shadow: none;
        }

        /* ============================================
           CREDITS DISPLAY
           ============================================ */
        .credits-container {
            position: absolute;
            top: 70px;
            right: 20px;
            background: var(--bg-dark);
            border: var(--border);
            padding: 10px 20px;
            color: var(--neon-green);
            font-family: 'Share Tech Mono', monospace;
            box-shadow: var(--shadow);
            z-index: 100;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .credits-label {
            font-size: 0.7rem;
            color: var(--text-main);
            text-transform: uppercase;
        }

        .credits-value {
            font-size: 1.5rem;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
        }

        /* ============================================
           AMMO STATS — Sidebar (stacked, single column)
           ============================================ */
        .ammo-stats-display {
            margin-top: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ammo-stat-item {
            position: relative;
            background: linear-gradient(135deg, #1a1a1b 0%, #0d0d0d 100%);
            padding: 10px 15px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            border: 1px solid #333;
            border-left: 5px solid var(--yellow);
            box-shadow: 4px 4px 0 #000;
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
        }

        .ammo-stat-item:hover {
            transform: translateY(-2px);
            box-shadow: 6px 6px 0 #000, 0 0 15px rgba(244, 192, 37, 0.2);
            border-left-color: var(--neon-green);
        }

        .ammo-stat-item:first-child {
            grid-column: 1 / -1;
            border-left-color: var(--neon-red);
            background: linear-gradient(135deg, #221111 0%, #0d0d0d 100%);
        }

        .ammo-stat-item:first-child .ammo-stat-count {
            font-size: 2.2rem;
            color: var(--neon-red);
        }

        .ammo-stat-item::before {
            content: '9MM';
            position: absolute;
            right: 5px;
            bottom: -5px;
            font-family: 'Oswald', sans-serif;
            font-size: 3.5rem;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.03);
            pointer-events: none;
            z-index: 0;
            line-height: 1;
        }

        .ammo-stat-header {
            font-size: 0.75rem;
            color: #fff;
            text-transform: uppercase;
            font-family: 'Oswald', sans-serif;
            letter-spacing: 2px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 4px;
            z-index: 1;
            position: relative;
        }

        .ammo-stat-header span {
            font-size: 0.5rem;
            background: #fff;
            color: #000;
            padding: 2px 5px;
            font-weight: bold;
        }

        .ammo-stat-row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            z-index: 1;
            position: relative;
            margin-top: 2px;
        }

        .ammo-stat-icon {
            width: 12px;
            height: 12px;
            image-rendering: pixelated;
        }

        .ammo-stat-count {
            font-family: 'Oswald', sans-serif;
            font-size: 1.6rem;
            color: var(--text-main);
            font-weight: bold;
            line-height: 0.9;
            text-shadow: 2px 2px 0 #000;
        }

        .ammo-stat-count.empty {
            color: var(--neon-red);
            text-shadow: 0 0 10px var(--neon-red), 2px 2px 0 #000;
        }

        .misfire-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255, 7, 58, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            color: var(--neon-red);
            font-family: 'Oswald', sans-serif;
            font-weight: bold;
            text-shadow: 2px 2px 0 #000;
            z-index: 5;
            flex-direction: column;
            animation: misfireFlash 0.2s infinite alternate;
        }

        @keyframes misfireFlash {
            from { opacity: 0.6; }
            to { opacity: 1; }
        }

        .player-stats-container {
            margin-top: 10px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .stat-bar-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .stat-bar-label {
            font-size: 0.6rem;
            color: #888;
            text-transform: uppercase;
            display: flex;
            justify-content: space-between;
        }

        .stat-bar-bg {
            width: 100%;
            height: 6px;
            background: #222;
            border: 1px solid #444;
            overflow: hidden;
        }

        .stat-bar-fill {
            height: 100%;
            width: 100%;
            transition: width 0.3s ease-out;
        }

        .hp-fill {
            background: #ff073a;
            box-shadow: 0 0 5px #ff073a;
        }

        .armor-fill {
            background: #00d4ff;
            box-shadow: 0 0 5px #00d4ff;
        }

        /* ============================================
           VERTICAL VITALS (right sidebar)
           ============================================ */
        .vertical-vitals {
            display: flex;
            flex-direction: row;
            gap: 18px;
            justify-content: center;
            align-items: flex-end;
            margin-top: 10px;
        }

        .stat-bar-group.vertical {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        .stat-bar-label-v {
            font-size: 0.55rem;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-family: 'Share Tech Mono', monospace;
        }

        .stat-bar-bg.vertical {
            width: 18px;
            height: 160px;
            background: #111;
            border: 1px solid #444;
            overflow: hidden;
            display: flex;
            align-items: flex-end; /* bar fills from bottom */
            box-shadow: inset 0 0 8px #000;
        }

        .stat-bar-bg.vertical .stat-bar-fill {
            width: 100%;
            height: 100%;         /* JS controls width; we remap to height here */
            transition: height 0.4s ease-out;
        }

        .stat-val {
            font-family: 'Oswald', sans-serif;
            font-size: 0.65rem;
            color: #aaa;
            text-align: center;
            line-height: 1;
        }

        .player-damage-overlay {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 1000;
            border: 0 solid rgba(255, 0, 0, 0);
            transition: border-width 0.1s, border-color 0.1s;
        }

        .player-damage-overlay.hit {
            border: 50px solid rgba(255, 0, 0, 0.4);
            border-color: rgba(255, 0, 0, 0.6);
        }

        .screen-shake {
            animation: screenShake 0.4s ease-in-out;
        }

        @keyframes screenShake {
            0% { transform: translate(0, 0); }
            10% { transform: translate(-5px, -5px); }
            20% { transform: translate(5px, 5px); }
            30% { transform: translate(-5px, 5px); }
            40% { transform: translate(5px, -5px); }
            50% { transform: translate(-5px, 0); }
            60% { transform: translate(5px, 0); }
            70% { transform: translate(0, -5px); }
            80% { transform: translate(0, 5px); }
            100% { transform: translate(0, 0); }
        }

        @keyframes win-pulse {
            from { transform: scale(1); }
            to { transform: scale(1.05); }
        }

        .jackpot-shake {
            animation: screenShake 0.1s infinite;
        }

        /* Brutal Stop & Gunshot Effects */
        .impact-shake {
            animation: impactBounce 0.2s ease-out;
        }

        @keyframes impactBounce {
            0% { transform: translateY(0); }
            50% { transform: translateY(10px); }
            100% { transform: translateY(0); }
        }

        .gunshot-burst {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            z-index: 100;
            pointer-events: none;
        }

        .pixel-burst {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--yellow);
            box-shadow: 
                0 0 10px var(--yellow),
                0 0 20px var(--neon-orange);
            animation: burstExpand 0.3s ease-out forwards;
        }

        @keyframes burstExpand {
            0% {
                transform: scale(1);
                opacity: 1;
                box-shadow: 0 0 0 var(--yellow);
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: scale(20);
                opacity: 0;
                box-shadow: 
                    2px 2px 0 var(--neon-red),
                    -2px -2px 0 var(--yellow),
                    2px -2px 0 var(--neon-orange),
                    -2px 2px 0 var(--white);
            }
        }

        .result-display {
            font-family: 'Oswald', sans-serif;
            font-size: 1.5rem;
            color: var(--neon-green);
            text-align: center;
            min-height: 2.5rem;
            text-shadow: 1px 1px 0 #000;
            letter-spacing: 1px;
        }

        .nav-link {
            margin-top: 2rem;
            color: var(--yellow);
            font-family: 'Oswald', sans-serif;
            text-decoration: none;
            font-size: 1.2rem;
            border-bottom: 2px solid var(--yellow);
            padding-bottom: 2px;
            transition: color 0.2s, border-color 0.2s;
        }

        .nav-link:hover {
            color: var(--orange);
            border-color: var(--orange);
        }

        /* Small decorative lights */
        .slot-light {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #333;
            border: 2px solid #000;
            position: absolute;
        }

        .light-left {
            top: 10px;
            left: 10px;
        }

        .light-right {
            top: 10px;
            right: 10px;
        }

        .slot-light.active {
            background: var(--neon-red);
            box-shadow: 0 0 10px var(--neon-red);
        }

        /* ============================================
           LOOT SECTION
           ============================================ */
        .loot-section {
            margin-top: 3rem;
            width: 95%;
            max-width: 900px;
            background: rgba(0, 0, 0, 0.4);
            border: 2px dashed #444;
            padding: 2rem;
            position: relative;
        }

        .loot-section h2 {
            color: var(--orange);
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            text-align: center;
            letter-spacing: 2px;
            text-shadow: 2px 2px 0 #000;
        }

        .loot-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
        }

        .loot-card {
            background: var(--bg-dark);
            border: 2px solid #333;
            padding: 10px;
            font-size: 0.9rem;
            display: flex;
            flex-direction: column;
            gap: 5px;
            position: relative;
            transition: all 0.2s;
            animation: lootPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes lootPop {
            0% {
                transform: scale(0.5);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .loot-card:hover {
            border-color: var(--neon-green);
            box-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
            transform: translateY(-2px);
        }

        .loot-card .loot-brand {
            font-size: 0.7rem;
            color: var(--yellow);
            text-transform: uppercase;
        }

        .loot-card .loot-name {
            color: #fff;
            font-weight: bold;
        }

        .empty-loot {
            grid-column: 1 / -1;
            text-align: center;
            color: #666;
            font-style: italic;
            padding: 2rem;
        }

        .loot-count {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--orange);
            color: #000;
            font-weight: bold;
            padding: 2px 8px;
            border: 2px solid #000;
            font-size: 0.8rem;
            z-index: 2;
        }

        .box-progress-container {
            width: 100%;
            height: 10px;
            background: #222;
            border: 1px solid #444;
            margin-top: 5px;
            position: relative;
            overflow: hidden;
        }

        .box-progress-bar {
            height: 100%;
            background: var(--neon-blue);
            width: 0%;
            transition: width 0.3s;
        }

        .box-progress-bar.full {
            background: var(--neon-green);
            box-shadow: 0 0 10px var(--neon-green);
        }

        .sell-btn {
            margin-top: 10px;
            background: var(--neon-green);
            color: #000;
            border: none;
            padding: 5px;
            font-family: 'Oswald', sans-serif;
            font-weight: bold;
            cursor: pointer;
            text-transform: uppercase;
            font-size: 0.8rem;
            display: none;
        }

        .sell-btn.active {
            display: block;
            animation: pulseGreen 1s infinite alternate;
        }

        @keyframes pulseGreen {
            from {
                box-shadow: 0 0 5px var(--neon-green);
            }

            to {
                box-shadow: 0 0 15px var(--neon-green);
            }
        }

        @media (max-width: 768px) {
            .slots-window {
                flex-direction: column;
            }

            .slot-column {
                width: 250px;
            }
        }

        .reward-banner {
            position: absolute;
            background: var(--yellow);
            color: #000;
            font-weight: bold;
            padding: 5px 15px;
            font-size: 1.4rem;
            transform: rotate(-10deg) scale(0);
            border: 2px solid #000;
            box-shadow: 4px 4px 0 #000;
            z-index: 10;
            pointer-events: none;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-family: 'Oswald', sans-serif;
            bottom: 10px;
            right: 0px;
        }

        .reward-banner.show {
            transform: rotate(-10deg) scale(1);
        }

        /* ============================================
           DAMAGE INDICATORS
           ============================================ */
        .dmg-stats {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 5px;
            font-size: 0.9rem;
        }

        .dmg-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .dmg-icon {
            width: 16px;
            height: 16px;
            image-rendering: pixelated;
        }

        .dmg-health {
            color: #ff4d4d;
        }

        .dmg-armor {
            color: #4dadff;
        }

        /* ============================================
           MAIN GAME LAYOUT (two-column)
           ============================================ */
        .game-layout {
            display: grid;
            grid-template-columns: 1fr 280px;
            gap: 0;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            align-items: start;
        }

        .game-main {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 1rem 2rem;
            min-width: 0;
        }

        .game-right-panel {
            position: sticky;
            top: 80px;
            height: calc(100vh - 100px);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0;
            border-left: 3px solid #1a1a1a;
            background: rgba(8, 8, 8, 0.96);
            padding: 1.5rem 1rem;
        }

        .game-right-panel::-webkit-scrollbar { width: 4px; }
        .game-right-panel::-webkit-scrollbar-track { background: #000; }
        .game-right-panel::-webkit-scrollbar-thumb { background: #333; }

        .right-panel-block {
            padding: 1.2rem 0;
            border-bottom: 1px solid #1e1e1e;
        }

        .right-panel-block:last-child {
            border-bottom: none;
        }

        .panel-title {
            font-family: 'Share Tech Mono', monospace;
            font-size: 0.65rem;
            color: #555;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .panel-title::before {
            content: '';
            display: block;
            flex: 1;
            height: 1px;
            background: #1e1e1e;
        }

        @media (max-width: 900px) {
            .game-layout {
                grid-template-columns: 1fr;
            }
            .game-right-panel {
                position: static;
                height: auto;
                flex-direction: row;
                flex-wrap: wrap;
                border-left: none;
                border-top: 2px solid #1a1a1a;
            }
            .right-panel-block {
                flex: 1;
                min-width: 200px;
                border-bottom: none;
                border-right: 1px solid #1e1e1e;
            }
        }

        /* ============================================
           FULL SCREEN BOSS MONITOR (CRT)
           ============================================ */
        .boss-section {
            margin-top: 2rem;
            width: 98%;
            padding: 1.5rem;
            background: #2b3a32;
            border: 8px solid #444;
            border-radius: 12px;
            box-shadow: inset 0 0 30px #000, 0 8px 20px rgba(0, 0, 0, 0.6), 6px 6px 0 #000;
            position: relative;
            background-image: radial-gradient(circle, #3a4d42 20%, #1a241e 100%);
            overflow: hidden;
        }

        .boss-section::after {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(0deg,
                    rgba(0, 0, 0, 0) 0px,
                    rgba(0, 0, 0, 0) 2px,
                    rgba(0, 0, 0, 0.15) 2px,
                    rgba(0, 0, 0, 0.15) 4px);
            pointer-events: none;
            z-index: 5;
        }

        .monitor-screen {
            width: 100%;
            display: grid;
            grid-template-columns: 200px 1fr 200px;
            gap: 1.5rem;
            align-items: stretch;
            position: relative;
            z-index: 10;
        }

        @media (max-width: 850px) {
            .monitor-screen {
                grid-template-columns: 1fr;
            }
        }

        .boss-specs-side, .boss-combat-side {
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: rgba(0, 0, 0, 0.4);
            padding: 12px;
            border: 1px solid rgba(57, 255, 20, 0.2);
            border-radius: 4px;
        }

        .side-title {
            color: var(--neon-green);
            font-size: 0.8rem;
            text-shadow: 0 0 5px var(--neon-green);
            text-align: center;
            border-bottom: 1px dashed rgba(57, 255, 20, 0.4);
            padding-bottom: 4px;
            margin-bottom: 4px;
            font-family: 'Share Tech Mono', monospace;
        }

        .boss-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 1rem;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            padding: 1rem;
            box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .boss-title {
            color: var(--neon-purple);
            font-size: 1.4rem;
            text-shadow: 2px 2px 0 #000, 0 0 10px rgba(176, 38, 255, 0.7);
            margin: 0;
            white-space: nowrap;
        }

        .boss-lore {
            color: #88cfa1;
            font-style: italic;
            font-size: 0.85rem;
            font-family: 'Share Tech Mono', monospace;
            padding: 0.5rem;
            border-top: 1px dashed rgba(57, 255, 20, 0.3);
            border-bottom: 1px dashed rgba(57, 255, 20, 0.3);
            line-height: 1.2;
        }

        /* Pixel Boss */
        .pixel-boss {
            width: 80px;
            height: 80px;
            background: transparent;
            /* Box-shadow based pixel art */
            box-shadow:
                0 0 0 transparent;
            animation: bossFloat 3s ease-in-out infinite, bossGlow 2s ease-in-out infinite;
            filter: drop-shadow(0 0 10px var(--neon-purple));
        }

        /* Simple Space Invader style boss using box-shadow */
        .boss-shadow {
            box-shadow:
                20px 10px 0 #b026ff, 60px 10px 0 #b026ff,
                30px 20px 0 #b026ff, 50px 20px 0 #b026ff,
                20px 30px 0 #b026ff, 30px 30px 0 #b026ff, 40px 30px 0 #b026ff, 50px 30px 0 #b026ff, 60px 30px 0 #b026ff,
                10px 40px 0 #b026ff, 20px 40px 0 #b026ff, 40px 40px 0 #b026ff, 60px 40px 0 #b026ff, 70px 40px 0 #b026ff,
                0px 50px 0 #b026ff, 10px 50px 0 #b026ff, 20px 50px 0 #b026ff, 30px 50px 0 #b026ff, 40px 50px 0 #b026ff, 50px 50px 0 #b026ff, 60px 50px 0 #b026ff, 70px 50px 0 #b026ff, 80px 50px 0 #b026ff,
                0px 60px 0 #b026ff, 20px 60px 0 #b026ff, 30px 60px 0 #b026ff, 40px 60px 0 #b026ff, 50px 60px 0 #b026ff, 60px 60px 0 #b026ff, 80px 60px 0 #b026ff,
                0px 70px 0 #b026ff, 20px 70px 0 #b026ff, 60px 70px 0 #b026ff, 80px 70px 0 #b026ff,
                30px 80px 0 #b026ff, 50px 80px 0 #b026ff;
            width: 10px;
            height: 10px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .boss-eyes {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #fff;
            box-shadow: 20px 40px 0 #fff, 60px 40px 0 #fff;
            top: 0;
            left: 0;
            animation: eyesBlink 4s infinite;
        }

        @keyframes bossFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes bossGlow {

            0%,
            100% {
                filter: drop-shadow(0 0 10px var(--neon-purple));
            }

            50% {
                filter: drop-shadow(0 0 25px var(--neon-purple));
            }
        }

        .synergy-banner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            background: var(--neon-purple);
            color: #fff;
            padding: 20px 40px;
            font-size: 2.5rem;
            font-family: 'Oswald', sans-serif;
            border: 4px solid #fff;
            box-shadow: 0 0 50px var(--neon-purple), 10px 10px 0 #000;
            z-index: 1000;
            pointer-events: none;
            white-space: nowrap;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-shadow: 3px 3px 0 #000;
        }

        .synergy-banner.show {
            transform: translate(-50%, -50%) scale(1);
            animation: pulseBanner 0.5s infinite alternate;
        }

        @keyframes pulseBanner {
            from {
                transform: translate(-50%, -50%) scale(1);
            }

            to {
                transform: translate(-50%, -50%) scale(1.1);
            }
        }

        @keyframes eyesBlink {

            0%,
            90%,
            100% {
                transform: scaleY(1);
            }

            95% {
                transform: scaleY(0.1);
            }
        }

        .monitor-shake {
            animation: monitorShake 0.3s ease-in-out;
        }

        @keyframes monitorShake {
            0% {
                transform: translate(1px, 1px) rotate(0deg);
            }

            10% {
                transform: translate(-1px, -2px) rotate(-1deg);
            }

            20% {
                transform: translate(-3px, 0px) rotate(1deg);
            }

            30% {
                transform: translate(3px, 2px) rotate(0deg);
            }

            40% {
                transform: translate(1px, -1px) rotate(1deg);
            }

            50% {
                transform: translate(-1px, 2px) rotate(-1deg);
            }

            60% {
                transform: translate(-3px, 1px) rotate(0deg);
            }

            70% {
                transform: translate(3px, 1px) rotate(-1deg);
            }

            80% {
                transform: translate(-1px, -1px) rotate(1deg);
            }

            90% {
                transform: translate(1px, 2px) rotate(0deg);
            }

            100% {
                transform: translate(1px, -2px) rotate(-1deg);
            }
        }

        .hit-flash {
            animation: hitFlash 0.3s ease-out;
        }

        @keyframes hitFlash {
            0% {
                background-color: rgba(255, 0, 0, 0.4);
            }

            100% {
                background-color: transparent;
            }
        }

        .boss-stats-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
        }

        .boss-stat-card {
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid #444;
            padding: 8px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-left: 4px solid var(--neon-blue);
        }

        .boss-stat-card#bossHPBox { border-left-color: #ff073a; }
        .boss-stat-card#bossArmorBox { border-left-color: #00d4ff; }

        .boss-stat-label {
            font-size: 0.6rem;
            color: #888;
            margin-bottom: 2px;
            text-transform: uppercase;
        }

        .boss-stat-value {
            font-size: 0.9rem;
            color: var(--yellow);
            font-weight: bold;
        }

        .boss-stat-value.health {
            color: #ff073a;
        }

        .boss-stat-value.armor {
            color: #00d4ff;
        }

        /* ============================================
           AMMO ICONS (Pixel Art)
           ============================================ */
        .pixel-ammo {
            width: 40px;
            height: 40px;
            position: relative;
            margin-bottom: 5px;
            flex-shrink: 0;
        }

        .ammo-pixel-shadow {
            width: 4px;
            height: 4px;
            position: absolute;
            top: 0;
            left: 0;
        }

        /* FMJ Icon - Silver/Grey Pointy Bullet */
        .ammo-fmj {
            box-shadow:
                16px 4px 0 #888, 20px 4px 0 #888,
                12px 8px 0 #888, 16px 8px 0 #aaa, 20px 8px 0 #aaa, 24px 8px 0 #888,
                8px 12px 0 #888, 12px 12px 0 #aaa, 16px 12px 0 #fff, 20px 12px 0 #aaa, 24px 12px 0 #aaa, 28px 12px 0 #888,
                8px 16px 0 #888, 12px 16px 0 #aaa, 16px 16px 0 #fff, 20px 16px 0 #aaa, 24px 16px 0 #aaa, 28px 16px 0 #888,
                8px 20px 0 #888, 12px 20px 0 #aaa, 16px 20px 0 #fff, 20px 20px 0 #aaa, 24px 20px 0 #aaa, 28px 20px 0 #888,
                8px 24px 0 #d4af37, 12px 24px 0 #ffd700, 16px 24px 0 #ffd700, 20px 24px 0 #ffd700, 24px 24px 0 #ffd700, 28px 24px 0 #d4af37,
                8px 28px 0 #d4af37, 12px 28px 0 #ffd700, 16px 28px 0 #ffd700, 20px 28px 0 #ffd700, 24px 28px 0 #ffd700, 28px 28px 0 #d4af37,
                8px 32px 0 #8b4513, 12px 32px 0 #a0522d, 16px 32px 0 #a0522d, 20px 32px 0 #a0522d, 24px 32px 0 #a0522d, 28px 32px 0 #8b4513;
        }

        /* JHP Icon - Hollow point (red/orange center) */
        .ammo-jhp {
            box-shadow:
                12px 4px 0 #888, 16px 4px 0 #ff4500, 20px 4px 0 #ff4500, 24px 4px 0 #888,
                8px 8px 0 #888, 12px 8px 0 #aaa, 16px 8px 0 #ff6347, 20px 8px 0 #ff6347, 24px 8px 0 #aaa, 28px 8px 0 #888,
                8px 12px 0 #888, 12px 12px 0 #aaa, 16px 12px 0 #aaa, 20px 12px 0 #aaa, 24px 12px 0 #aaa, 28px 12px 0 #888,
                8px 16px 0 #888, 12px 16px 0 #aaa, 16px 16px 0 #aaa, 20px 16px 0 #aaa, 24px 16px 0 #aaa, 28px 16px 0 #888,
                8px 20px 0 #888, 12px 20px 0 #aaa, 16px 20px 0 #aaa, 20px 16px 0 #aaa, 24px 20px 0 #aaa, 28px 20px 0 #888,
                8px 24px 0 #d4af37, 12px 24px 0 #ffd700, 16px 24px 0 #ffd700, 20px 24px 0 #ffd700, 24px 24px 0 #ffd700, 28px 24px 0 #d4af37,
                8px 28px 0 #d4af37, 12px 28px 0 #ffd700, 16px 28px 0 #ffd700, 20px 28px 0 #ffd700, 24px 28px 0 #ffd700, 28px 28px 0 #d4af37,
                8px 32px 0 #8b4513, 12px 32px 0 #a0522d, 16px 32px 0 #a0522d, 20px 32px 0 #a0522d, 24px 32px 0 #a0522d, 28px 32px 0 #8b4513;
        }

        /* SUB Icon - Heavy/Blue-tipped */
        .ammo-sub {
            box-shadow:
                16px 4px 0 #0000cd, 20px 4px 0 #0000cd,
                12px 8px 0 #0000ff, 16px 8px 0 #1e90ff, 20px 8px 0 #1e90ff, 24px 8px 0 #0000ff,
                8px 12px 0 #888, 12px 12px 0 #aaa, 16px 12px 0 #aaa, 20px 12px 0 #aaa, 24px 12px 0 #aaa, 28px 12px 0 #888,
                8px 16px 0 #888, 12px 16px 0 #aaa, 16px 16px 0 #aaa, 20px 16px 0 #aaa, 24px 16px 0 #aaa, 28px 16px 0 #888,
                8px 20px 0 #888, 12px 20px 0 #aaa, 16px 20px 0 #aaa, 20px 20px 0 #aaa, 24px 20px 0 #aaa, 28px 20px 0 #888,
                8px 24px 0 #d4af37, 12px 24px 0 #ffd700, 16px 24px 0 #ffd700, 20px 24px 0 #ffd700, 24px 24px 0 #ffd700, 28px 24px 0 #d4af37,
                8px 28px 0 #d4af37, 12px 28px 0 #ffd700, 16px 28px 0 #ffd700, 20px 28px 0 #ffd700, 24px 28px 0 #ffd700, 28px 28px 0 #d4af37,
                8px 32px 0 #8b4513, 12px 32px 0 #a0522d, 16px 32px 0 #a0522d, 20px 32px 0 #a0522d, 24px 32px 0 #a0522d, 28px 32px 0 #8b4513;
        }

        /* PAK Icon - Blank/Yellow-tipped */
        .ammo-pak {
            box-shadow:
                16px 4px 0 #ffd700, 20px 4px 0 #ffd700,
                12px 8px 0 #ffd700, 16px 8px 0 #ffffed, 20px 8px 0 #ffffed, 24px 8px 0 #ffd700,
                8px 12px 0 #d4af37, 12px 12px 0 #ffd700, 16px 12px 0 #ffd700, 20px 12px 0 #ffd700, 24px 12px 0 #ffd700, 28px 12px 0 #d4af37,
                8px 16px 0 #d4af37, 12px 16px 0 #ffd700, 16px 16px 0 #ffd700, 20px 16px 0 #ffd700, 24px 16px 0 #ffd700, 28px 16px 0 #d4af37,
                8px 20px 0 #d4af37, 12px 20px 0 #ffd700, 16px 20px 0 #ffd700, 20px 20px 0 #ffd700, 24px 20px 0 #ffd700, 28px 20px 0 #d4af37,
                8px 24px 0 #d4af37, 12px 24px 0 #ffd700, 16px 24px 0 #ffd700, 20px 24px 0 #ffd700, 24px 24px 0 #ffd700, 28px 24px 0 #d4af37,
                8px 28px 0 #d4af37, 12px 28px 0 #ffd700, 16px 28px 0 #ffd700, 20px 28px 0 #ffd700, 24px 28px 0 #ffd700, 28px 28px 0 #d4af37,
                8px 32px 0 #8b4513, 12px 32px 0 #a0522d, 16px 32px 0 #a0522d, 20px 32px 0 #a0522d, 24px 32px 0 #a0522d, 28px 32px 0 #8b4513;
        }

        /* OVERKILL Icon - Neon Green/Glowing */
        .ammo-featured {
            box-shadow:
                16px 4px 0 var(--neon-green), 20px 4px 0 var(--neon-green),
                12px 8px 0 var(--neon-green), 16px 8px 0 #fff, 20px 8px 0 #fff, 24px 8px 0 var(--neon-green),
                8px 12px 0 var(--neon-green), 12px 12px 0 #fff, 16px 12px 0 #fff, 20px 12px 0 #fff, 24px 12px 0 #fff, 28px 12px 0 var(--neon-green),
                8px 16px 0 var(--neon-green), 12px 16px 0 #fff, 16px 16px 0 #fff, 20px 16px 0 #fff, 24px 16px 0 #fff, 28px 16px 0 var(--neon-green),
                8px 20px 0 var(--neon-green), 12px 20px 0 #fff, 16px 20px 0 #fff, 20px 20px 0 #fff, 24px 20px 0 #fff, 28px 20px 0 var(--neon-green),
                8px 24px 0 #d4af37, 12px 24px 0 #ffd700, 16px 24px 0 #ffd700, 20px 24px 0 #ffd700, 24px 24px 0 #ffd700, 28px 24px 0 #d4af37,
                8px 28px 0 #d4af37, 12px 28px 0 #ffd700, 16px 28px 0 #ffd700, 20px 28px 0 #ffd700, 24px 28px 0 #ffd700, 28px 28px 0 #d4af37,
                8px 32px 0 #8b4513, 12px 32px 0 #a0522d, 16px 32px 0 #a0522d, 20px 32px 0 #a0522d, 24px 32px 0 #a0522d, 28px 32px 0 #8b4513;
            filter: drop-shadow(0 0 5px var(--neon-green));
        }

        /* ARMOR PLATE - Blue Shield */
        .ammo-armor {
            box-shadow:
                16px 4px 0 #00d4ff, 20px 4px 0 #00d4ff,
                12px 8px 0 #00d4ff, 16px 8px 0 #fff, 20px 8px 0 #fff, 24px 8px 0 #00d4ff,
                8px 12px 0 #00d4ff, 12px 12px 0 #fff, 16px 12px 0 #fff, 20px 12px 0 #fff, 24px 12px 0 #fff, 28px 12px 0 #00d4ff,
                8px 16px 0 #00d4ff, 12px 16px 0 #fff, 16px 16px 0 #fff, 20px 16px 0 #fff, 24px 16px 0 #fff, 28px 16px 0 #00d4ff,
                8px 20px 0 #00d4ff, 12px 20px 0 #fff, 16px 20px 0 #fff, 20px 20px 0 #fff, 24px 20px 0 #fff, 28px 20px 0 #00d4ff,
                8px 24px 0 #00008b, 12px 24px 0 #0000ff, 16px 24px 0 #0000ff, 20px 24px 0 #0000ff, 24px 24px 0 #0000ff, 28px 24px 0 #00008b,
                12px 28px 0 #00008b, 16px 28px 0 #0000ff, 20px 28px 0 #0000ff, 24px 28px 0 #00008b,
                16px 32px 0 #00008b, 20px 32px 0 #00008b;
            filter: drop-shadow(0 0 5px #00d4ff);
        }

        /* ============================================
           SHOP MODAL
           ============================================ */
        .shop-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            backdrop-filter: blur(5px);
        }

        .shop-modal.show {
            opacity: 1;
            pointer-events: auto;
        }

        .shop-container {
            background: var(--bg-dark);
            border: 4px solid var(--orange);
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            padding: 2rem;
            position: relative;
            box-shadow: 0 0 50px rgba(209, 86, 16, 0.5), 10px 10px 0 #000;
            overflow-y: auto;
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .shop-modal.show .shop-container {
            transform: scale(1);
        }

        .close-shop-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--neon-red);
            color: #fff;
            border: 2px solid #000;
            font-family: 'Oswald', sans-serif;
            font-weight: bold;
            padding: 5px 12px;
            cursor: pointer;
            box-shadow: 3px 3px 0 #000;
        }

        .shop-header {
            text-align: center;
            border-bottom: 2px solid var(--orange);
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
        }

        .shop-title {
            color: var(--yellow);
            font-size: 2.5rem;
            text-shadow: 3px 3px 0 #000;
            letter-spacing: 2px;
        }

        .shop-subtitle {
            color: var(--orange);
            font-style: italic;
        }

        .shop-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.5rem;
        }

        .shop-category {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .category-title {
            color: var(--neon-blue);
            border-bottom: 1px solid #333;
            padding-bottom: 5px;
            font-size: 1.2rem;
        }

        .shop-item {
            background: #111;
            border: 1px solid #333;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            transition: border-color 0.2s;
        }

        .shop-item:hover {
            border-color: var(--yellow);
        }

        .shop-item-name {
            color: #fff;
            font-weight: bold;
        }

        .shop-item-desc {
            font-size: 0.7rem;
            color: #888;
        }

        .shop-item-price {
            color: var(--neon-green);
            font-weight: bold;
            font-family: 'Share Tech Mono', monospace;
        }

        .buy-btn {
            background: var(--yellow);
            color: #000;
            border: none;
            font-family: 'Oswald', sans-serif;
            font-weight: bold;
            padding: 4px;
            cursor: pointer;
            text-transform: uppercase;
            transition: all 0.1s;
            box-shadow: 2px 2px 0 #000;
        }

        .buy-btn:hover:not(:disabled) {
            background: #fff;
            transform: translate(-1px, -1px);
            box-shadow: 3px 3px 0 #000;
        }

        .buy-btn:active:not(:disabled) {
            transform: translate(1px, 1px);
            box-shadow: 1px 1px 0 #000;
        }

        .buy-btn:disabled {
            background: #444;
            color: #666;
            cursor: not-allowed;
            box-shadow: none;
        }

        .boss-defeated-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            z-index: 10;
            animation: fadeIn 0.5s ease-out forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .open-shop-btn {
            background: var(--neon-green);
            color: #000;
            border: 2px solid #000;
            padding: 10px 20px;
            font-family: 'Oswald', sans-serif;
            font-weight: bold;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 5px 5px 0 #000;
            transition: transform 0.1s, box-shadow 0.1s;
        }

        .open-shop-btn:hover {
            transform: scale(1.05);
            background: #fff;
        }

        .player-death-overlay {
            position: fixed;
            inset: 0;
            background: rgba(20, 0, 0, 0.95);
            z-index: 4000;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
            backdrop-filter: blur(10px);
        }

        .player-death-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

        .death-title {
            color: var(--neon-red);
            font-size: 4rem;
            text-shadow: 0 0 20px var(--neon-red), 4px 4px 0 #000;
            font-family: 'Oswald', sans-serif;
            letter-spacing: 5px;
            animation: glitch 0.2s infinite;
        }

        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0); }
        }


        /* ============================================
           SETTINGS MODAL
           ============================================ */
        .system-nav {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 100;
            width: 250px; /* Match credits-container if needed or just align */
            display: flex;
            justify-content: flex-end;
        }

        .menu-btn {
            background: var(--bg-dark);
            color: var(--orange);
            border: 2px solid var(--orange);
            font-family: 'Oswald', sans-serif;
            font-size: 0.8rem;
            font-weight: bold;
            padding: 5px 15px;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 3px 3px 0 #000;
            text-transform: uppercase;
        }

        .menu-btn:hover {
            background: var(--orange);
            color: #000;
            transform: scale(1.05);
            box-shadow: 6px 6px 0 #000;
        }


        .settings-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 3000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .settings-modal.show {
            opacity: 1;
            pointer-events: auto;
        }

        .settings-container {
            background: #0d0d0d;
            border: 4px solid var(--neon-red);
            padding: 2rem;
            text-align: center;
            box-shadow: 0 0 40px rgba(255, 7, 58, 0.4);
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            max-width: 400px;
            width: 90%;
        }

        .settings-modal.show .settings-container {
            transform: scale(1);
        }

        .new-game-btn {
            background: var(--neon-red);
            color: #fff;
            border: none;
            padding: 1rem 2rem;
            font-family: 'Oswald', sans-serif;
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 4px 4px 0 #000;
            margin-top: 1rem;
            transition: all 0.1s;
        }

        .new-game-btn:hover {
            background: #ff3333;
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 #000;
        }

        .new-game-btn:active {
            transform: translate(2px, 2px);
            box-shadow: 2px 2px 0 #000;
        }