body { background: #111; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; color: white; font-family: Arial; }
        
        /* Top Navigation Header bar containing controls */
        .header-container { display: flex; gap: 20px; margin-bottom: 15px; align-items: center; width: 600px; justify-content: space-between; }
        
        /* Fortnite-inspired Ranked Display Banner Container */
        .rank-banner { 
            font-size: 20px; font-weight: 900; background: linear-gradient(135deg, #1e1e24 0%, #2a2b36 100%); 
            padding: 12px 30px; border-radius: 8px; border: 2px solid #444; 
            display: flex; align-items: center; gap: 18px; text-transform: uppercase; letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        
        /* CSS Emblem Frame Container mirroring Fortnite geometric shapes */
        .emblem-box {
            position: relative; width: 34px; height: 34px;
            display: flex; align-items: center; justify-content: center;
        }

        /* Pure CSS Fortnite Emblem Shape Definitions */
        .fortnite-emblem { transition: all 0.3s ease; display: inline-block; vertical-align: middle; }
        
        /* BRONZE: Metallic Circular Ring Core Coin */
        .emblem-bronze {
            width: 24px; height: 24px; border-radius: 50%;
            background: radial-gradient(circle, #f3a364 20%, #873e16 100%);
            border: 3px solid #ffcd91; box-shadow: 0 0 10px #873e16;
        }
        
        /* SILVER: Upside Down Inverted Chevron Triangle Accent */
        .emblem-silver {
            width: 0; height: 0;
            border-left: 15px solid transparent; border-right: 15px solid transparent;
            border-top: 26px solid #b8c2cc; filter: drop-shadow(0 0 5px #708090);
            position: relative;
        }
        .emblem-silver::after {
            content: ''; position: absolute; top: -23px; left: -11px; width: 0; height: 0;
            border-left: 11px solid transparent; border-right: 11px solid transparent;
            border-top: 19px solid #5a646e;
        }

        /* GOLD: Angular 4-Sided Diamond Rhombus Crest */
        .emblem-gold {
            width: 20px; height: 20px; background: linear-gradient(135deg, #ffe066, #cc9900);
            transform: rotate(45deg); border: 2px solid #fff;
            box-shadow: 0 0 12px #cc9900;
        }

        /* PLATINUM: Sparkling Sharp Cross/4-Point Star Core Component */
        .emblem-platinum {
            width: 22px; height: 22px; background: linear-gradient(135deg, #99ffff, #009999);
            transform: rotate(45deg); border-radius: 2px; border: 2px solid #fff;
            box-shadow: 0 0 15px #00ffff; position: relative;
        }
        .emblem-platinum::before {
            content: ''; position: absolute; top: -2px; left: -2px; width: 22px; height: 22px;
            background: transparent; border: 2px solid #fff; transform: rotate(45deg);
        }

        /* DIAMOND: Radiant Glowing Geometric Hexagon Crystal */
        .emblem-diamond {
            width: 26px; height: 16px; background: linear-gradient(to right, #33ccff, #0044cc);
            position: relative; border-left: 2px solid #fff; border-right: 2px solid #fff;
            box-shadow: 0 0 20px #33ccff;
        }
        .emblem-diamond::before, .emblem-diamond::after {
            content: ""; position: absolute; left: -2px; width: 0; height: 0;
            border-left: 13px solid transparent; border-right: 13px solid transparent;
        }
        .emblem-diamond::before { top: -10px; border-bottom: 10px solid #33ccff; }
        .emblem-diamond::after { bottom: -10px; border-top: 10px solid #0044cc; }

        /* MASTER: Aggressive Glowing Red Spiked Crown Hex Shard */
        .emblem-master {
            width: 24px; height: 24px;
            clip-path: polygon(50% 0%, 100% 30%, 85% 100%, 15% 100%, 0% 30%);
            border: 2px solid #ff9999; box-shadow: 0 0 25px #ff0033;
            background: linear-gradient(135deg, #ff6666, #990011);
        }

        /* Menu / Header Control Action Buttons */
        .lobby-btn { font-size: 14px; font-weight: bold; background: #ff3366; color: #fff; border: none; padding: 12px 20px; border-radius: 5px; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 0.5px; display: none; }
        .lobby-btn:hover { background: #e02855; transform: scale(1.02); }
        
        .skin-button-wrapper { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
        .skin-btn { font-size: 14px; font-weight: bold; background: #00ffff; color: #111; border: none; padding: 12px 20px; border-radius: 5px; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 0.5px; width: 260px; text-align: center; }
        .skin-btn:hover { background: #00cccc; transform: scale(1.02); }

        /* Trail toggle customized wrapper styling layout */
        .trail-toggle-btn { font-size: 14px; font-weight: bold; background: #9933ff; color: #fff; border: none; padding: 12px 20px; border-radius: 5px; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 0.5px; width: 260px; text-align: center; box-shadow: 0 4px 10px rgba(153, 51, 255, 0.2); }
        .trail-toggle-btn:hover { background: #7f26d9; transform: scale(1.02); }
        
        /* Dropdown selection modal layout */
        .skin-select-menu { 
            position: absolute; bottom: 110%; left: 0; 
            background: #222; border: 2px solid #444; border-radius: 5px; 
            padding: 8px; display: none; flex-direction: column; gap: 5px; z-index: 10; width: 240px;
        }
        .skin-option { 
            background: #151515; border: 1px solid #333; color: white; padding: 8px 15px; 
            border-radius: 4px; cursor: pointer; text-align: left; font-size: 14px; 
            white-space: nowrap; transition: background 0.15s;
        }
        .skin-option:hover { background: #333; border-color: #00ffff; }
        
        /* Main Container for Canvas and UI Overlays */
        .game-container { position: relative; width: 600px; height: 400px; }
        canvas { background: #000; border: 2px solid #fff; display: block; }

        /* Start Match Menu Overlay Screen UI */
        .menu-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(10, 10, 12, 0.96);
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            border: 2px solid #fff; box-sizing: border-box; z-index: 5; gap: 10px;
        }
        .menu-title { font-size: 42px; font-weight: bold; letter-spacing: 2px; color: #fff; margin-bottom: 0px; text-shadow: 0 0 10px rgba(0,255,255,0.3); }
        .menu-subtitle { font-size: 14px; color: #666; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 2px; }
        
        /* Dedicated Lobby Profile Stats Display Card */
        .menu-stats-card {
            background: rgba(255, 255, 255, 0.05); border: 1px dashed #444; border-radius: 6px;
            padding: 8px 20px; font-weight: bold; font-size: 15px; color: #00ff66; margin-bottom: 10px;
            letter-spacing: 0.5px; text-align: center; width: 220px;
        }

        .start-btn { font-size: 18px; font-weight: bold; background: #00ff66; color: #111; border: none; padding: 15px 45px; border-radius: 30px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,255,102,0.3); transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 1px; width: 260px; text-align: center; }
        .start-btn:hover { background: #00dd55; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,255,102,0.5); }
        
        .practice-btn { font-size: 16px; font-weight: bold; background: #ffaa00; color: #111; border: none; padding: 12px 45px; border-radius: 30px; cursor: pointer; box-shadow: 0 4px 15px rgba(255,170,0,0.2); transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 1px; width: 260px; text-align: center; }
        .practice-btn:hover { background: #e69900; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,170,0,0.4); }

        .ranks-modal-btn { font-size: 13px; font-weight: bold; background: transparent; color: #aaa; border: 2px solid #444; padding: 10px 24px; border-radius: 20px; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 1px; width: 260px; text-align: center; }
        .ranks-modal-btn:hover { color: #fff; border-color: #aaa; background: rgba(255,255,255,0.05); }

        /* Ranks Compendium Grid Layout Menu Display Container */
        .ranks-view-menu {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(15, 15, 20, 0.98); display: none; flex-direction: column;
            align-items: center; justify-content: center; z-index: 6; border: 2px solid #fff; box-sizing: border-box;
        }

#cutscene-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #000;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: opacity 1s ease-in-out;
    }
    #cutscene-canvas {
        background: #09090f; /* Dark neon anime aesthetic background */
        border: 4px solid #331a4d;
        box-shadow: 0 0 40px rgba(153, 51, 255, 0.4);
    }
    #cutscene-title {
        position: absolute;
        font-size: 56px;
        font-weight: 900;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 6px;
        text-align: center;
        /* Intense neon purple and cyan styling */
        text-shadow: 0 0 10px #00ffff, 0 0 25px #9933ff, 0 0 50px #9933ff;
        opacity: 0;
        transform: scale(0.5) rotate(-3deg);
        transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
        font-family: 'Arial Black', Impact, sans-serif;
        pointer-events: none;
        font-style: italic;
    }
    #cutscene-title.visible {
        opacity: 1;
        transform: scale(1.1) rotate(-2deg);
    }
    .cutscene-crt-effect {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%), 
                    linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 255, 0, 0.04));
        background-size: 100% 4px, 6px 100%;
        pointer-events: none;
    }