<style>
/* THE ROOT ELEMENT: Treat it strictly as a screen-filling canvas layer */
.keyboard-warriors
{
    width: 100%;
    height: 100%;
    background: #0b0e14;
    color: #e0e0e0;
    font-family: monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    pointer-events: all;
}

.bg-image-layer {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    // Ensure no static system steps are running over the C# framework
    transition: none; 

    // 🚀 CRITICAL optimization hint for the game engine UI compositor
    will-change: transform; 
}

.selection-menu-wrapper
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    background: linear-gradient(90deg, rgba(6, 11, 17, 0.6) 0%, rgba(13, 27, 42, 0.4) 50%, rgba(6, 11, 17, 0.6) 100%);
    animation: ambient-glow 8s ease infinite alternate;
}

.selection-header
{
    font-family: 'Poppins', sans-serif, monospace;
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
    // 🚀 Swapped to 8-digit hex shadow (#00000099 is 60% opacity black)
    text-shadow: 2px 2px 4px #00000099;
    margin-bottom: 24px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.selection-grid
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;       // Allows row items to break cleanly down into columns
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 500px;      // Limits box expansion so it stays centered
}

.telemetry-tooltip-hud {
    position: absolute !important;
    width: 260px;
    background-color: rgba(10, 14, 22, 0.93) !important; // Sleek solid slate-black backdrop tint
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 12px;
    z-index: 10000 !important; // Multiplies layer bounds to pop above all menus
    pointer-events: none !important; // Clicks cleanly slip straight through to underneath nodes
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65);
    
    display: flex;
    flex-direction: column;
    gap: 6px;
    
    // Smooth micro fade-in overlay pop animation
    animation: tooltipPop 0.12s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

.tooltip-header {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}

.tooltip-sub {
    font-size: 10px;
    color: #888895;
    text-transform: uppercase;
}

.tooltip-body {
    font-size: 11px;
    color: #b5b5c5;
    line-height: 1.4;
    margin-top: 4px;
    margin-bottom: 4px;
}

.tooltip-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.08);
    margin-top: 2px;
    margin-bottom: 2px;
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-family: monospace;
    
    .label { color: #888895; }
    .val { font-weight: bold; color: #ffffff; }
}

@keyframes tooltipPop {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.leaderboard-panel-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
    margin-top: 25px;
    justify-content: center;
}

.leaderboard-panel {
    background-color: rgba(15, 15, 20, 0.9);
    border: 2px solid #555555;
    padding: 15px;
    width: 45%; // Split screen distribution size
    display: flex;
    flex-direction: column;
}

// Global leaderboard customization overrides
.global-leaderboard {
    border-color: #ffd700 !important; // Gold banner frame accent
    box-shadow: 0px 0px 15px rgba(255, 215, 0, 0.15);
}

.full-width-lb {
    width: 80% !important; // Makes the layout box wider when sitting alone in Enchantments
}

.scrollable-rows {
    max-height: 220px;
    overflow-y: scroll; // Allows viewing all top ten players without blowing up screen bounds
}

.loading-text {
    color: #8a8a9e;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    padding: 20px;
}

// Highlight styles when the player looks at their own position in global records
.local-user-highlight {
    background-color: rgba(255, 215, 0, 0.12) !important;
    border: 1px dashed #ffd700 !important;
}

// 🏆 Expanded Leaderboard Banner
.leaderboard-panel {
    width: 500px;        
    height: auto;        
    margin-top: 40px;    
    background: #0a121e; // 🚀 Swapped to solid hex to prevent alpha errors
    border: 1px solid #2a3f57;
    border-radius: 4px;
    padding: 16px 20px;  
    box-shadow: 0 4px 20px #000000; // 🚀 Clean hex shadow
    font-family: monospace;

    .leaderboard-header {
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px dashed #2a3f57;
        padding-bottom: 10px;
        margin-bottom: 16px;
        
        .leaderboard-title {
            font-size: 14px;
            font-weight: bold;
            color: #8fa3b3;
            letter-spacing: 1px;
            margin: 0;
            text-transform: uppercase;
        }
    }
}

.leaderboard-rows {
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.leaderboard-row {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    background: #111924; // 🚀 Swapped from transparent rgba to a nice dark tint hex
    padding: 10px 12px; 
    border-radius: 4px;
    border-left: 3px solid #2a3f57;
    min-width: 100px; 
    flex: 1;

    .stat-name {
        color: #627785;
        font-size: 9px;
        font-weight: bold;
        margin-bottom: 6px;
        text-transform: uppercase;
    }
    
    .stat-value {
        font-size: 13px; 
        font-weight: bold;
        white-space: nowrap; 
    }
}

// 👑 GLOW ACCENTS: Swapped out rgba entirely for ultra-safe hex glows!
.gold-glow { 
    color: #ffd700; 
    text-shadow: 0 0 8px #ffd700; 
}
.cyan-glow { 
    color: #00d2ff; 
    text-shadow: 0 0 8px #00d2ff; 
}
.green-glow { 
    color: #32cd32; 
    text-shadow: 0 0 8px #32cd32; 
}
.red-glow { 
    color: #ff4444; 
    text-shadow: 0 0 8px #ff4444; 
}

.selection-button
{
    background-color: #222;
    border: 2px solid #555;
    color: white;
    padding: 16px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    pointer-events: all;

    // 🚀 FORCE UNIFORM COLUMNS: 45% means exactly 2 buttons fit on each row perfectly!
    width: 45%; 
    
    transition: background-color 0.1s ease, border-color 0.1s ease, transform 0.05s ease;

    &:hover {
        background-color: #2a2a2a;
        border-color: #ff9d00;
        transform: scale(1.03);
    }
}

/* THE COMPLETE RE-ANCHOR LAYER: Enforces explicit top-to-bottom stack tracking */
.combat-layout-wrapper
{
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 25px;

    background: linear-gradient(90deg, rgba(6, 11, 17, 0.7) 0%, rgba(13, 27, 42, 0.4) 50%, rgba(6, 11, 17, 0.7) 100%);

    padding: 30px; 
    border-radius: 8px;
    
    z-index: 1; 
}

/* ROW 1: STATS CONTAINER */
.stats-container
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
}

/* ROW 2: THREE COLUMN MIDDLE SPLIT */
.middle-layout-row
{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 420px; /* Gives the middle log box row fixed vertical presence */
    gap: 15px;
}

/* ROW 3: ACTIONS GRID */
.actions-container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto;
}

/* HEADER TRACK (Tucked into column cleanly) */
.game-header
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; // Creates a clean structural split between left and right zones
    width: 100%;
    max-height: 120px;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 5px; 
    padding: 0px;
}

.prestige-panel
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    flex-shrink: 0; 
    min-width: 200px; // Guarantees consistent spatial presence on the left lane
}

// 🚀 Updated and Fixed Stylesheet Blocks
.progression-tracker {
    display: flex;
    flex-direction: column;
    font-family: monospace;
    font-size: 11px;
    color: #b0c4de !important; // Forces the primary label text to be silver-blue instead of black
}

.wallet-pts {
    color: #00d2ff !important;
    font-weight: bold;
    text-shadow: 0 0 6px #00d2ff; // 🚀 Swapped to safe hex glow
}

// Status Notifications
.ascend-alert {
    color: #32cd32 !important;
    font-weight: bold;
    text-shadow: 0 0 6px #32cd32; // 🚀 Swapped to safe hex glow
    animation: pulse 1.5s infinite;
}

.requirement-alert {
    color: #ff4444 !important;
    font-weight: bold;
    text-shadow: 0 0 6px #ff4444; // 🚀 Swapped to safe hex glow
    
    .req-weight {
        font-weight: bold;
        color: #ff6666;
    }
}

.prestige-btn
{
    background: #101c29; // 🚀 Swapped from transparent rgba to solid dark hex tint
    border: 1px solid #00d2ff;
    color: #00d2ff;
    padding: 8px 16px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-shadow: 0 0 8px #00d2ff; // 🚀 Swapped to safe hex glow
    box-shadow: 0 0 8px #00d2ff; // 🚀 Swapped to safe hex glow
    pointer-events: all;

    &:hover
    {  
        background: #00d2ff;
        color: #000000;
        box-shadow: 0 0 15px #00d2ff;
        text-shadow: none;
    }

    &.ready-to-ascend
    {
        border-color: #ffd700;
        color: #ffd700;
        text-shadow: 0 0 10px #ffd700; // 🚀 Swapped to safe hex glow
        box-shadow: 0 0 12px #ffd700; // 🚀 Consolidated to a clean hex box-shadow
        animation: critical-glow 2s infinite alternate;

        &:hover
        {
            background: #ffd700;
            color: #000000;
            box-shadow: 0 0 25px #ffd700;
        }
    }
}

@keyframes critical-glow 
{
    from { box-shadow: 0 0 8px #ffd700; } // 🚀 Swapped to hex
    to { box-shadow: 0 0 20px #ffd700; }   // 🚀 Swapped to hex
}

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

/* THE ASCII STYLING */
/* THE ASCII STYLING */
.header-ascii
{
    font-family: monospace;
    font-size: 13px;              
    letter-spacing: 2px;          
    line-height: 1.05;            
    font-weight: 900;             
    color: #00ffcc; 
    
    text-shadow: 
        0 0 4px #00ffcc,   
        0 0 12px #9b59b6,  
        0 0 20px #9b59b6;
    
    white-space: pre;        
    margin: 0;
    padding: 0;

    &.player-weapon-art, &.ai-weapon-art 
    {
        font-size: 7px;
        letter-spacing: 0.5px;
        line-height: 0.95;
        opacity: 0.85;
    }

    &.player-weapon-art
    {
        // 🚀 Keeps the spring pushing from the left side of the header box
        margin-left: auto; 
        margin-right: -5px; 
    }

    &.ai-weapon-art
    {
        margin-left: -5px;
        
        // 🎯 THE CENTER BALANCE: Pushes the title text to the absolute center of your screen
        margin-right: 300px; 
    }
}

.shop-trigger-btn {
    margin-top: 10px;
    padding: 8px 16px;
    background: #333;
    color: white;
    border: 1px solid #555;
    cursor: pointer;
    font-weight: bold;
    pointer-events: all;
}

.shop-trigger-btn:hover {
    background: #444;
    border-color: #777;
}

/* PANEL DETAILS FROM IMAGE SPECIFICATIONS */
.fighter-card
{
    width: 45%;
    background: #101621; // 🚀 Swapped from rgba
    border-radius: 6px;
    padding: 15px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    height: auto;
}
.fighter-card.player {
    border: 2px solid #00bfff !important;
    animation: playerBorderBreathe 4s infinite ease-in-out;
}

// 🔴 AI OVERLORD SIDE BORDER: Only breathes your menacing crimson border color and box-glow
.fighter-card.ai {
    border: 2px solid #ff4b4b !important;
    animation: aiBorderBreathe 4s infinite ease-in-out;
}

// =========================================================================
// 📊 CYBERUI BORDER LIGHTING ANIMATION MATHEMATICS
// =========================================================================

@keyframes playerBorderBreathe {
    0%, 100% { 
        border-color: rgba(0, 191, 255, 0.4) !important;
        box-shadow: 0 0 8px rgba(0, 191, 255, 0.2); 
    }
    50% { 
        border-color: rgba(0, 191, 255, 1.0) !important;
        box-shadow: 0 0 18px rgba(0, 191, 255, 0.55); 
    }
}

@keyframes aiBorderBreathe {
    0%, 100% { 
        border-color: rgba(255, 75, 75, 0.4) !important;
        box-shadow: 0 0 8px rgba(255, 75, 75, 0.2); 
    }
    50% { 
        border-color: rgba(255, 75, 75, 1.0) !important;
        box-shadow: 0 0 18px rgba(255, 75, 75, 0.55); 
    }
}

.vs-badge
{   
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    margin: 0 25px;
    font-size: 26px;
    font-weight: 900;
    font-style: italic;
    &, label, text, .label
	{
	color: #ff3333 !important;
	text-shadow:
	0 0 6px #ff3333,
	0 0 15px #ff4d4d,
	0 0 25px #ff0000 !important;
	}
	}

	.avatar-placeholder {
	width: 60px;
	height: 60px;
	font-size: 40px;
	background: #0f1626; // 🚀 Swapped from rgba
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	flex-shrink: 0;
	object-fit: cover;
	}

	.player-side {
	border: 1px solid #00ffcc;
	color: #00ffcc !important;
	text-shadow: 0 0 8px #00ffcc;
	box-shadow: 0 0 14px #00ffcc; // 🚀 Swapped from rgba glow
	}
	.player-name {
	font-family: monospace;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #00ffcc !important;
	text-shadow: 0 0 4px #00ffcc, 0 0 10px #00ffcc; // 🚀 Swapped from rgba glow
	}
	.ai-side {
	border: 1px solid #ff3333;
	color: #ff3333 !important;
	text-shadow: 0 0 8px #ff3333;
	box-shadow: 0 0 14px #ff3333; // 🚀 Swapped from rgba glow
	}
	.ai-name {
	font-family: monospace;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #ff3333 !important;
	text-shadow: 0 0 4px #ff3333, 0 0 10px #ff3333; // 🚀 Swapped from rgba glow
	}
	.fighter-info { display: flex; flex-direction: column; flex-grow: 1; gap: 4px; }
	.fighter-card .name { font-size: 20px; font-weight: bold; }
	.fighter-card.player .name { color: #3498db; }
	.fighter-card.ai .name { color: #e74c3c; }

	.stat-bar-row { display: flex; flex-direction: row; align-items: center; width: 100%; font-size: 11px; margin-top: 2px; }
	.stat-lbl { width: 50px; color: #888; }
	.stat-val { width: 70px; text-align: right; color: #bbb; margin-left: 5px; }
	.bar { flex-grow: 1; height: 8px; background: #222; border-radius: 2px; }
    .hp-bar {
        background: linear-gradient(90deg, #228b22 0%, #32cd32 50%, #228b22 100%);
        box-shadow: 0 0 12px rgba(50, 205, 50, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        height: 100%;
        border-radius: 2px;
        animation: barSheen 3s infinite linear;
    }
	.armor-bar {
        background: linear-gradient(90deg, #1e3f66 0%, #00bfff 50%, #1e3f66 100%);
        box-shadow: 0 0 12px rgba(0, 191, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.4);
        height: 100%;
        border-radius: 2px;
        animation: barSheen 2.5s infinite linear;
    }

    // 🧙‍♂️ THE PURPLE MANA OVERCLOCK ELEMENT: Radiates with unstable static power fields
    .mp-bar {
        background: linear-gradient(90deg, #8a2be2 0%, #da70d6 50%, #8a2be2 100%);
        box-shadow: 0 0 12px rgba(218, 112, 214, 0.7), 0 1px 0 rgba(255, 255, 255, 0.4);
        height: 100%;
        border-radius: 2px;
        animation: barSheen 2s infinite linear;
    }
	    .loadout-row { font-size: 11px; margin-top: 5px; color: #aaa; }

	    .vs-badge {
        font-size: 26px;
        font-weight: bold;
        color: #ffd700;
        text-shadow: 0 0 10px #ffd700, 0 0 20px rgba(255, 215, 0, 0.5);
        font-family: 'Courier New', Courier, monospace;
        animation: vsGlitchBreathe 1s infinite alternate;
    }

    @keyframes barSheen {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    @keyframes vsGlitchBreathe {
        0% { transform: scale(1) rotate(-2deg); opacity: 0.9; }
        100% { transform: scale(1.08) rotate(2deg); opacity: 1; text-shadow: 0 0 15px #ffd700, 0 0 30px #ff4b4b; }
    }
	.loadout-row { font-size: 11px; margin-top: 5px; color: #aaa; }

	.fighter-info {
	display: flex;
	flex-direction: column;
	height: auto !important;
	min-height: 140px;
	width: 100%;
	}

	// Layout Row Grid Configuration for active banners
	.status-effect-bar {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	margin-top: 8px;
	min-height: 22px;
	height: auto;
	width: 100%;
	}

	// Global Core Styles for All Status Items
	.status-badge {
	display: none;
	align-items: center;
	justify-content: center;
	background-color: #101014;
	border: 1px solid #40404a;
	padding: 3px 8px;
	border-radius: 3px;
	font-size: 10px;
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	}

	// 👑 THE ABSOLUTE FIX: Forcing explicit dimensions and flex parameters clears the sandbox 0px render bug
	.status-badge.is-active {
	display: flex !important; // Forces the layout block to exist
	visibility: visible !important;
	min-width: 65px !important; // Guarantees a physical layout box footprint
	height: 18px !important;    // Explicitly locks the height rendering engine
	flex-shrink: 0 !important;  // Prevents parent containers from squishing it to 0px
	animation: statusGlitchBreathe 2s infinite ease-in-out;
	}

	.status-badge.overclock {
	border: 1px solid #ffd700 !important;
	color: #ffd700 !important;
	}

	.status-badge.momentum {
	border: 1px solid #ff4b4b !important;
	color: #ff4b4b !important;
	}

	.status-badge.poison {
	border: 1px solid #32cd32 !important;
	color: #32cd32 !important;
	}

	.status-badge.event-buff {
	border: 1px solid #00ffff !important;
	color: #00ffff !important;
	}

	.status-badge.weight-debuff {
	border: 1px solid #a0a0b0 !important;
	color: #a0a0b0 !important;
	background-color: #1a1a24 !important;
	}

	@keyframes statusGlitchBreathe {
	0% {
	opacity: 0.8;
	transform: scale(0.97);
	}
	50% {
	opacity: 1;
	transform: scale(1.03);
	}
	100% {
	opacity: 0.8;
	transform: scale(0.97);
	}
	}

    .status-badge.defiance-core {
        background-color: rgba(40, 40, 45, 0.6);
        color: #888895;
        border: 1px solid rgba(255, 255, 255, 0.1);
    
        // When the token is active, it blossoms into a radioactive emerald matrix aura
        &.is-active {
            color: #ffffff !important;
            background-color: rgba(0, 50, 0, 0.8) !important;
            border: 1px solid #32cd32 !important;
            box-shadow: 0 0 10px rgba(50, 205, 50, 0.45);
            text-shadow: 0 0 4px #32cd32;
        }
    }

        .status-badge.malware-core.is-active {
        color: #ffffff !important;
        background-color: rgba(50, 0, 50, 0.8) !important; // Deep mainframe matrix violet
        border: 1px solid #da70d6 !important;
        box-shadow: 0 0 10px rgba(218, 112, 214, 0.45);
        text-shadow: 0 0 4px #da70d6;
    }

    .status-badge.rebound-core.is-active {
        color: #ffffff !important;
        background-color: rgba(0, 45, 60, 0.8) !important; // Electric polarized sapphire
        border: 1px solid #00ffff !important;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
        text-shadow: 0 0 4px #00ffff;
    }

    .status-badge.leak-core.is-active {
    color: #ffffff !important;
    background-color: rgba(60, 20, 60, 0.85) !important; // Digital dark magenta phasing
    border: 1px solid #da70d6 !important;
    box-shadow: 0 0 10px rgba(218, 112, 214, 0.5);
    text-shadow: 0 0 4px #da70d6;
    }

    .status-badge.master-core.is-active {
        color: #000000 !important;
        background-color: #ffd700 !important; // Pure radiant cyber gold crown layer
        border: 1px solid #ffffff !important;
        box-shadow: 0 0 14px #ffd700, inset 0 0 4px #ffffff;
        font-weight: bold;
        text-shadow: none;
    }

    .scanner-text-line {
    width: 100%;
    margin-top: 4px;
    font-size: 10px; // Micro-sized font to stay perfectly inside layout rows
    font-family: 'Courier New', Courier, monospace;
    color: #33ff33; // Classic terminal matrix green text
    letter-spacing: 0.5px;
    
    // Aligns the text cleanly underneath the badges inside the status container
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    }

    // 🟢 THE BLINKING DOT: Simulates live active packet traffic scanning
    .blink-dot {
        color: #33ff33;
        text-shadow: 0 0 3px #33ff33;
        animation: terminalDotBlink 1s infinite steps(2);
    }

    .scanner-text-line .stance-value {
        color: #ffffff; // White value highlights for high contrast scannability
        font-weight: bold;
    }

    .scanner-text-line .action-value {
        color: #00ffff; // Electric blue file names for Prestige 5 packet hits
    
        &.blocked {
            color: #ffd700 !important; // Cyber gold for blocked firewall signals
        }
    }

    // Simple blink timing rules
    @keyframes terminalDotBlink {
        0%, 100% { opacity: 0; }
        50% { opacity: 1; }
    }

	.side-spell-panel
	{
	width: 22%;
	background: #0b0e14; // 🚀 Swapped from rgba
	border-radius: 6px;
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 12px;
    background: transparent;
	}
	.side-spell-panel.player-spells { border: 1px solid #13243a; }
	.side-spell-panel.ai-spells { border: 1px solid #3a1313; }

	.panel-title { font-size: 14px; font-weight: bold; border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 5px; text-align: center; }
	.spell-item { font-size: 13px; display: flex; flex-direction: row; justify-content: space-between; color: #e0e0e0; margin-bottom: 4px; align-items: center; }
	.spell-type { color: #8fa3b3; font-size: 11px; font-style: italic; }
	.spell-emoji {
	margin-right: 6px;
	font-size: 16px;
	flex-shrink: 0;
	}
	.offensive-glow { text-shadow: 0 0 5px #ff5500, 0 0 10px #ff5500; }
	.defensive-glow { text-shadow: 0 0 5px #00d2ff, 0 0 10px #00d2ff; }
	.healing-glow { text-shadow: 0 0 5px #2ecc71, 0 0 10px #2ecc71; }
	.ultimate-glow { text-shadow: 0 0 5px #f1c40f, 0 0 10px #f1c40f; }

	.event-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	// Smooth retro terminal dark-room tint overlay
	background-color: rgba(6, 6, 9, 0.88);

	// Perfect cross-monitor absolute alignment
	display: flex;
	justify-content: center;
	align-items: center;

	// Captures mouse clicks to block the background battle buttons
	pointer-events: all;

	// Layer priority sitting safely above your standard views and ShopHUD
	z-index: 10005;
	}

	// The stylized warning interface box card
	.event-choice-box {
	background-color: #0b0b0f;
	border: 2px solid #ff3333;
	box-shadow: 0px 0px 20px rgba(255, 51, 51, 0.35); // Neon warning red pulse edge
	width: 650px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: 'Courier New', Courier, monospace;
	// FIXED: 'box-sizing: border-box;' removed completely to keep sandbox layout engine happy!
	}

	.event-title {
	font-size: 24px;
	font-weight: bold;
	color: #ff3333;
	text-shadow: 0px 0px 8px rgba(255, 51, 51, 0.5);
	margin-bottom: 12px;
	text-transform: uppercase;
	}

	.event-prompt {
	color: #d1d1d6;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 30px;
	width: 100%;
	}

	// Layout wrapper handling 2, 3, or 4 options smoothly
	.event-button-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; // Drops items neatly onto row 2 if things get crowded
	gap: 15px;
	width: 100%;
	justify-content: center;
	}

	// Dynamic button styling rules
	.choice-option-btn {
	min-width: 260px;
	flex: 1;
	background-color: #14141a;
	color: #ffffff;
	border: 1px solid #3a3a40;
	padding: 14px 20px;
	font-weight: bold;
	font-family: 'Courier New', Courier, monospace;
	font-size: 12px;
	pointer-events: all;
	transition: all 0.1s ease-in-out;

	&:hover {
        background-color: #ffffff;
        color: #000000;
        border-color: #ffffff;
    }
}

// Custom neon color hover highlights mapped on index loops
.dynamic-color-0:hover { border-color: #33ff99 !important; box-shadow: 0px 0px 8px rgba(51, 255, 153, 0.3); } // Green (Imp)
.dynamic-color-1:hover { border-color: #3399ff !important; box-shadow: 0px 0px 8px rgba(51, 153, 255, 0.3); } // Blue (Barbarian)
.dynamic-color-2:hover { border-color: #ffd700 !important; box-shadow: 0px 0px 8px rgba(255, 215, 0, 0.3); }   // Gold (Mystery Potion)

.timer-bar-wrapper {
    position: relative;
    width: 100%;
    height: 24px;
    background-color: #111116;
    border: 1px solid #33333d;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.timer-bar-fill {
    height: 100%;
    background-color: #ff3333;
    // Creates a wonderful neon hazard red warning pulse effect along the strip
    box-shadow: 0px 0px 12px rgba(255, 51, 51, 0.7); 
}

.timer-text-overlay {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    text-shadow: 1px 1px 2px #000000;
}

.log-container
{
    width: 56%;
    height: 420px;
    min-height: 350px;
    background-color: #0a0a0a;
    border: 2px solid #555;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.log-scroll-area
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}

.log-entry
{
    font-size: 12px;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.4;
    color: #ffffff; // Safe baseline default text color
}

// 🔵 LAYER BLUE: Player highlights glow bright cyber electric blue
.log-entry.player-text
{
    color: #00bfff !important;
    text-shadow: 0 0 4px rgba(0, 191, 255, 0.3);
}

// 🔴 LAYER RED: AI overloads glow menacing mainframe crimson red
.log-entry.ai-text
{
    color: #ff4b4b !important;
    text-shadow: 0 0 4px rgba(255, 75, 75, 0.3);
}

// ⚙️ LAYER DEFAULT SYSTEM: Fallback configurations or preset markers
.log-entry.system-text
{
    color: #ffffff;
}

// Existing fallback class maps from your welcome elements continue safely
.log-entry.text-yellow
{
    color: #ffd700;
}

.log-entry.text-muted
{
    color: #888895;
}

.log-header { text-align: center; font-size: 12px; color: #666; margin-bottom: 8px; }
.log-entry { font-family: monospace; font-size: 14px; flex-shrink: 0; color: #ffffff; white-space: pre-wrap;}
.log-entry.system { color: #f1c40f; }
.log-entry.blue { color: #3498db; }
.log-entry.red { color: #e74c3c; }

.log-entry.success-green { color: #32cd32 !important; }
.log-entry.fail-red { color: #ff4b4b !important; }

// 💥 CRITICAL HIT ANOMALY: Forces a rapid, electrical glitching strobe effect
.log-entry.flash-crit {
    font-weight: bold;
    animation: criticalGlitchStrobe 0.4s infinite alternate;
}

// 🔮 RANDOM EVENT MATRIX: Installs a slow, atmospheric cyber golden pulse
.log-entry.pulse-event {
    font-weight: bold;
    letter-spacing: 1px;
    animation: eventGoldenPulse 1.5s infinite ease-in-out;
}

// ❌ INTERFACE FAILURE: Shakes the text layout and vibrates deep red highlights
.log-entry.shake-fail {
    text-shadow: 0 0 6px #ff0000;
    animation: inputFailureShake 0.3s ease-in-out 2;
}

// 🟢 TRANSACTION SUCCESS: Generates a clean, swelling emerald light bloom
.log-entry.glow-success {
    text-shadow: 0 0 8px #32cd32;
    animation: successBloom 0.6s ease-out;
}

@keyframes criticalGlitchStrobe {
    0% { opacity: 0.7; text-shadow: -2px 0 #ffd700, 2px 0 #ff4b4b; transform: skewX(-3deg); }
    100% { opacity: 1; text-shadow: 2px 0 #00bfff, -2px 0 #ffd700; transform: skewX(3deg); }
}

@keyframes eventGoldenPulse {
    0%, 100% { color: #ffd700; text-shadow: 0 0 4px rgba(255, 215, 0, 0.3); }
    50% { color: #ffffff; text-shadow: 0 0 14px rgba(255, 215, 0, 0.9); }
}

@keyframes inputFailureShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

@keyframes successBloom {
    0% { opacity: 0.6; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.8); transform: scale(1.02); }
    100% { opacity: 1; filter: brightness(1); }
}

.button-row
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

.combat-btn
{
    flex-grow: 1;
    width: 23%;
    height: 54px;
    background: #141a26; // 🚀 Swapped from rgba
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 15px;
    pointer-events: all;
    cursor: pointer !important; 
}
.combat-btn:hover, &:active, &:focus {
    background: #1e2638; transform: scale(1.02); transition: all 0.1s ease;
    cursor: pointer !important;
}
.btn-title { font-size: 12px; font-weight: bold; margin-bottom: 2px; pointer-events: none; }
.btn-desc { font-size: 10px; color: #777; pointer-events: none; }


.border-red { border: 1px solid #ff3333; box-shadow: 0 0 8px #ff3333; background: transparent !important; }
.border-blue { border: 1px solid #00ffcc; box-shadow: 0 0 8px #00ffcc; background: transparent !important; }
.border-green { border: 1px solid #2ecc71; box-shadow: 0 0 8px #2ecc71; background: transparent !important; }
.border-yellow { border: 1px solid #f1c40f; box-shadow: 0 0 8px #f1c40f; background: transparent !important; }
.border-purple { border: 1px solid #9b59b6; box-shadow: 0 0 8px #9b59b6; background: transparent !important; }
.border-orange { border: 1px solid #e67e22; box-shadow: 0 0 8px #e67e22; background: transparent !important; }

.text-red { color: #ff3333 !important; text-shadow: 0 0 6px #ff3333; }
.text-blue { color: #00ffcc !important; text-shadow: 0 0 6px #00ffcc;  }
.text-green { color: #2ecc71 !important; text-shadow: 0 0 6px #2ecc71; }
.text-yellow { color: #f1c40f !important; text-shadow: 0 0 6px #f1c40f; }
.text-purple { color: #9b59b6 !important; text-shadow: 0 0 6px #9b59b6; }
.text-orange { color: #e67e22 !important; text-shadow: 0 0 6px #e67e22; }

.border-red:hover { background: transparent !important; border-color: #ff4d4d !important; box-shadow: 0 0 16px #ff3333; }
.border-blue:hover { background: transparent !important; border-color: #00ffcc !important; box-shadow: 0 0 16px #00ffcc; }
.border-green:hover { background: transparent !important; border-color: #2ecc71 !important; box-shadow: 0 0 16px #2ecc71; }
.border-yellow:hover { background: transparent !important; border-color: #f1c40f !important; box-shadow: 0 0 16px #f1c40f; }
.border-purple:hover { background: transparent !important; border-color: #9b59b6 !important; box-shadow: 0 0 16px #9b59b6; }
.border-orange:hover { background: transparent !important; border-color: #e67e22 !important; box-shadow: 0 0 16px #e67e22; }

.border-red:hover .text-red { color: #ff9999 !important; text-shadow: 0 0 8px #ff3333; }
.border-blue:hover .text-blue { color: #f0fffc !important; text-shadow: 0 0 8px #00ffcc; }
.border-green:hover .text-green { color: #a3ebc4 !important; text-shadow: 0 0 8px #2ecc71; }
.border-yellow:hover .text-yellow { color: #fffdf0 !important; text-shadow: 0 0 8px #f1c40f; }
.border-purple:hover .text-purple { color: #faf5fc !important; text-shadow: 0 0 8px #9b59b6; }
.border-orange:hover .text-orange { color: #ffffff !important; text-shadow: 0 0 8px #e67e22; }

.highlight-blue { color: #5dade2; font-weight: bold; }
.highlight-red { color: #f1948a; font-weight: bold; }

.footer-hint { font-size: 11px; color: #444; margin-top: 5px; }

/* SETUP SETUP SCREENS SCREEN PANELS */
.setup-screen
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 2px solid #2471a3;
    border-radius: 8px;
    padding: 40px;
    gap: 30px;

    // 🌌 Simple center-fading background (uses raw hex stops smoothly)
    background: radial-gradient(#0d1b2a 0%, #060b11 100%);
    
    // ⚡ Strict percentage stops mapped directly to the alpha channels
    background-image: 
        linear-gradient(rgba(0, 210, 255, 0.02) 0%, transparent 100%),
        linear-gradient(90deg, rgba(0, 210, 255, 0.02) 0%, transparent 100%);
        
    background-size: 40px 40px;
    background-position: center;
}

.setup-title { font-size: 36px; font-weight: bold; color: #ffffff; letter-spacing: 1px; }
.setup-subtitle { font-size: 18px; color: #888; }
.setup-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; }
.setup-btn { width: 240px; height: 70px; background: #1e2638; border: 1px solid #34495e; color: white; font-size: 22px; font-weight: bold; border-radius: 6px; display: flex; justify-content: center; align-items: center; pointer-events: all; }
.setup-btn:hover { background: #3498db; border-color: #5dade2; }
.setup-btn.enchant:hover { background: #e74c3c; border-color: #f1948a; }

.rematch { width: 250px; height: 70px; background: #2ecc71; font-size: 26px; font-weight: bold; color: white; border-radius: 6px; display: flex; justify-content: center; align-items: center; pointer-events: all; }
</style>