<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-color: #060b11;
}

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

    background: linear-gradient(90deg, #060b11 0%, #0d1b2a 50%, #060b11 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
}

// 🏆 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;

    // 🚀 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; /* The master vertical spacing rule between all rows */

    background: linear-gradient(90deg, #060b11 0%, #0d1b2a 50%, #060b11 100%);

    padding: 30px; 
    border-radius: 8px;
}

/* 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

    &: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: 645px; 
    }
}

/* 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: 1px solid #1a3a5f; }
.fighter-card.ai { border: 1px solid #5f1a1a; }

.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: #c0392b; height: 8px; border-radius: 1px; }
.armor-bar { background: #2980b9; height: 8px; border-radius: 1px; }
.mp-bar { background: #8e44ad; height: 8px; border-radius: 1px; }
.loadout-row { font-size: 11px; margin-top: 5px; color: #aaa; }

.vs-badge { font-size: 36px; font-weight: bold; color: #555; }

.side-spell-panel
{
    width: 22%;
    background: #0b0e14; // 🚀 Swapped from rgba
    border-radius: 6px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.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; }

.log-container
{
    width: 56%;
    height: 420px;
    min-height: 350px;
    background-color: #0a0a0a; // 🚀 Swapped from rgba
    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-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; }

.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;
}
.combat-btn:hover { background: #1e2638; transform: scale(1.02); transition: all 0.1s ease; } // 🚀 Swapped hover background from rgba
.btn-title { font-size: 12px; font-weight: bold; margin-bottom: 2px; }
.btn-desc { font-size: 10px; color: #777; }

// 🚀 CLEANED UP GLOW BORDERS (Removed rgba layers entirely)
.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>