@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Orbitron:wght@400;700;900&family=Bangers&display=swap');

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

body { 
    overflow: hidden; 
    font-family: 'Rajdhani', sans-serif; 
    background: #0a1a0a; 
    color: #fff;
    user-select: none;
}

/* ============================================
   LUCIDE ICONS STYLES
   ============================================ */
.lucide-icon {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    display: inline-block;
    vertical-align: middle;
}

/* Navigation icons */
.nav-icon .lucide-icon {
    width: 24px;
    height: 24px;
}

/* Logo icon */
.logo-icon .lucide-icon {
    width: 32px;
    height: 32px;
    color: #32CD32;
    filter: drop-shadow(0 0 8px rgba(50, 205, 50, 0.6));
}

/* Currency icon */
.currency-icon .lucide-icon {
    width: 18px;
    height: 18px;
    color: #FFD700;
}

/* User avatar icon */
.user-avatar .lucide-icon {
    width: 24px;
    height: 24px;
    color: #90EE90;
}

/* Play card icons */
.play-card-icon .lucide-icon {
    width: 48px;
    height: 48px;
    transition: transform 0.3s ease;
}

.main-play-btn .play-card-icon .lucide-icon {
    width: 64px;
    height: 64px;
    color: #32CD32;
    filter: drop-shadow(0 0 15px rgba(50, 205, 50, 0.5));
}

.main-play-btn:hover .play-card-icon .lucide-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 25px rgba(50, 205, 50, 0.8));
}

.mode-card .play-card-icon .lucide-icon {
    width: 36px;
    height: 36px;
    opacity: 0.8;
}

.mode-card:hover .play-card-icon .lucide-icon {
    opacity: 1;
    transform: scale(1.15);
}

/* Section title icons */
.section-title .lucide-icon,
.shop-section-title .lucide-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Weapon icons */
.weapon-icon .lucide-icon {
    width: 32px;
    height: 32px;
    color: #90EE90;
}

/* ===== MAIN MENU - CACTUS CUSTOMIZATION ===== */
#nickname-screen {
    position: fixed;
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(145deg, #0d1a0d 0%, #1a2810 50%, #0d150d 100%);
    z-index: 200;
}

#nickname-screen::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="60" font-size="40" text-anchor="middle" fill="%2332CD3210">&#127797;</text></svg>') repeat;
    background-size: 100px 100px;
    animation: bgScroll 40s linear infinite;
    pointer-events: none;
}

@keyframes bgScroll {
    from { background-position: 0 0; }
    to { background-position: 400px 400px; }
}

.menu-container {
    display: flex;
    gap: 40px;
    background: rgba(0, 20, 0, 0.85);
    border: 3px solid #32CD32;
    border-radius: 20px;
    padding: 30px 40px;
    box-shadow: 0 0 60px rgba(50, 205, 50, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    max-width: 900px;
}

/* Left side - Preview */
.menu-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 300px;
}

#nickname-screen h1 {
    font-family: 'Bangers', cursive;
    font-size: 2.8em;
    font-weight: 400;
    color: #32CD32;
    text-shadow: 
        0 0 40px rgba(50,205,50,0.6), 
        3px 3px 0 #228B22, 
        6px 6px 0 #006400;
    letter-spacing: 4px;
    margin-bottom: 5px;
    animation: titleGlow 2s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

#nickname-screen .subtitle {
    font-family: 'Bangers', cursive;
    font-size: 1em;
    color: #FFD700;
    letter-spacing: 4px;
    margin-bottom: 20px;
    text-shadow: 1px 1px 0 #8B4513;
}

/* Preview Container */
#preview-container {
    width: 250px;
    height: 280px;
    background: radial-gradient(ellipse at bottom, #1a2810 0%, #0a0f0a 100%);
    border: 2px solid #228B22;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
}

#preview-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.preview-label {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #7CFC00;
    padding: 4px 15px;
    border-radius: 10px;
    font-family: 'Bangers', cursive;
    font-size: 0.9em;
    letter-spacing: 2px;
}

/* Right side - Customization */
.menu-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 320px;
}

.menu-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-title {
    font-family: 'Bangers', cursive;
    font-size: 1.1em;
    color: #90EE90;
    letter-spacing: 2px;
}

#nickname-input {
    width: 100%;
    padding: 12px 18px;
    font-size: 1.2em;
    font-family: 'Rajdhani', sans-serif;
    background: rgba(0,30,0,0.9);
    border: 2px solid #32CD32;
    border-radius: 10px;
    color: #90EE90;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

#nickname-input:focus {
    border-color: #7CFC00;
    box-shadow: 0 0 30px rgba(50,205,50,0.5), inset 0 0 20px rgba(50,205,50,0.1);
    transform: scale(1.02);
}

#nickname-input::placeholder {
    color: #4a7c4a;
}

#join-btn {
    padding: 16px 60px;
    font-size: 1.3em;
    font-family: 'Bangers', cursive;
    font-weight: 400;
    background: linear-gradient(180deg, #32CD32 0%, #228B22 50%, #006400 100%);
    border: 3px solid #7CFC00;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    letter-spacing: 3px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    box-shadow: 0 6px 0 #006400, 0 8px 20px rgba(0,0,0,0.3);
}

#join-btn:hover {
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 10px 0 #006400, 0 15px 40px rgba(50,205,50,0.4);
    background: linear-gradient(180deg, #7CFC00 0%, #32CD32 50%, #228B22 100%);
}

#join-btn:active {
    transform: scale(1.02) translateY(2px);
    box-shadow: 0 2px 0 #006400;
}

/* Color Options */
.color-options {
    display: flex;
    gap: 10px;
}

.color-btn {
    width: 50px;
    height: 50px;
    border: 3px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 3px 0 rgba(0,0,0,0.3);
}

.color-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

.color-btn.selected {
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
    transform: scale(1.1);
}

.color-check {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    color: #fff;
    text-shadow: 0 0 10px #000;
}

.color-btn.selected .color-check {
    display: block;
}

/* Accessory Options */
.accessory-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* Map Options */
.map-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 15px;
    background: rgba(0, 30, 0, 0.8);
    border: 2px solid #228B22;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.map-btn:hover {
    background: rgba(50, 205, 50, 0.2);
    border-color: #32CD32;
    transform: translateX(5px);
}

.map-btn.selected {
    background: rgba(50, 205, 50, 0.3);
    border-color: #7CFC00;
    box-shadow: 0 0 15px rgba(50,205,50,0.4);
}

.map-icon {
    font-size: 1.5em;
    margin-bottom: 2px;
}

.map-name {
    font-family: 'Bangers', cursive;
    font-size: 1.1em;
    color: #90EE90;
    letter-spacing: 1px;
}

.map-desc {
    font-size: 0.75em;
    color: #6B8E6B;
    font-family: 'Rajdhani', sans-serif;
}

.map-btn.selected .map-name {
    color: #7CFC00;
}

.accessory-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    background: rgba(0, 30, 0, 0.8);
    border: 2px solid #228B22;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.accessory-btn:hover {
    background: rgba(50, 205, 50, 0.2);
    border-color: #32CD32;
    transform: translateY(-2px);
}

.accessory-btn.selected {
    background: rgba(50, 205, 50, 0.3);
    border-color: #7CFC00;
    box-shadow: 0 0 15px rgba(50,205,50,0.4);
}

.accessory-icon {
    font-size: 1.5em;
}

.accessory-name {
    font-size: 0.75em;
    color: #90EE90;
    margin-top: 4px;
    font-family: 'Rajdhani', sans-serif;
}

/* Controls Details */
.controls-details {
    margin-top: 10px;
}

.controls-details summary {
    cursor: pointer;
    color: #7CFC00;
    font-family: 'Bangers', cursive;
    letter-spacing: 2px;
    padding: 8px;
    background: rgba(0, 30, 0, 0.5);
    border-radius: 8px;
    transition: all 0.2s;
}

.controls-details summary:hover {
    background: rgba(50, 205, 50, 0.2);
}

.controls-details[open] summary {
    margin-bottom: 10px;
}

.controls-info {
    padding: 15px;
    background: rgba(0,0,0,0.5);
    border: 1px solid #228B22;
    border-radius: 8px;
    font-size: 0.85em;
    line-height: 2;
    color: #90EE90;
}

.controls-info kbd {
    background: #1a3a1a;
    border: 1px solid #32CD32;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    margin: 0 2px;
}

.controls-info strong {
    color: #ff9933;
    font-size: 1.1em;
}

.controls-info kbd {
    background: rgba(255,102,0,0.2);
    padding: 2px 8px;
    border-radius: 3px;
    font-family: 'Orbitron', monospace;
    font-size: 0.85em;
    color: #ffcc66;
    border: 1px solid rgba(255,102,0,0.3);
}

/* ===== LOADING SCREEN ===== */
#loading-screen {
    position: fixed;
    width: 100%; height: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #0a0a0a;
    z-index: 150;
}

#loading-screen.active { display: flex; }

.loader {
    width: 60px; height: 60px;
    border: 4px solid #222;
    border-top-color: #ff6600;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

#loading-text {
    margin-top: 25px;
    color: #ff9933;
    font-size: 1.2em;
    letter-spacing: 2px;
}

.loading-tip {
    margin-top: 40px;
    color: #666;
    font-size: 0.9em;
    max-width: 400px;
    text-align: center;
}

/* ===== GAME UI ===== */
#game-ui {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10;
}

#game-ui > * { pointer-events: auto; }

/* Health Bar */
#health-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 28px;
    background: rgba(0,0,0,0.9);
    border: 2px solid #ff6600;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,0,0,0.5);
    z-index: 15; /* Au-dessus du scope */
}

/* Armor Bar - Blue bar above health */
#armor-container {
    position: fixed;
    bottom: 62px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 14px;
    background: rgba(0,0,0,0.85);
    border: 2px solid #0088ff;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 15; /* Au-dessus du scope */
}

#armor-container.active {
    opacity: 1;
}

#armor-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0066cc, #00aaff, #44ccff);
    transition: width 0.25s ease-out;
    box-shadow: inset 0 -2px 8px rgba(0,0,0,0.3), 0 0 10px rgba(0,136,255,0.5);
}

#armor-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 0.7em;
    color: #aaddff;
    text-shadow: 0 0 5px #000;
}

#armor-icon {
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    color: #00aaff;
}

#health-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #cc0000 0%, #ff4400 25%, #ffaa00 50%, #88cc00 75%, #00cc44 100%);
    background-size: 300% 100%;
    transition: width 0.25s ease-out;
    box-shadow: inset 0 -2px 10px rgba(0,0,0,0.3);
}

#health-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 0.9em;
    text-shadow: 0 0 8px #000, 0 2px 4px #000;
    letter-spacing: 1px;
}

#health-icon {
    position: absolute;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
}

/* Ammo Display */
#ammo-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    text-align: right;
    z-index: 15; /* Au-dessus du scope (z-index: 12) */
}

#weapon-icon {
    font-size: 2.5em;
    margin-bottom: 5px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

#weapon-name {
    font-size: 1.1em;
    font-weight: 600;
    color: #ffcc00;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 8px;
}

#ammo-display {
    font-family: 'Orbitron', monospace;
    font-size: 2em;
    font-weight: 700;
    color: #ff9933;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

#ammo-display .current {
    color: #fff;
    font-size: 1.2em;
}

#ammo-display .divider {
    color: #555;
    margin: 0 6px;
}

#ammo-display .reserve {
    color: #888;
}

#ammo-display.reloading {
    animation: reloadBlink 0.3s infinite;
}

@keyframes reloadBlink {
    50% { opacity: 0.3; }
}

#reload-bar {
    width: 120px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin-top: 8px;
    margin-left: auto;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s;
}

#reload-bar.active {
    opacity: 1;
}

#reload-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff6600, #ffcc00);
    border-radius: 2px;
    transition: width 0.1s linear;
}

/* Weapon Slots */
#weapon-slots {
    position: fixed;
    bottom: 110px;
    right: 25px;
    display: flex;
    gap: 8px;
}

.weapon-slot {
    padding: 8px 14px;
    background: rgba(0,0,0,0.8);
    border: 2px solid #333;
    border-radius: 4px;
    font-size: 0.85em;
    color: #666;
    transition: all 0.2s ease;
}

.weapon-slot.active {
    border-color: #ff6600;
    color: #ffcc00;
    background: rgba(255,102,0,0.2);
    box-shadow: 0 0 15px rgba(255,102,0,0.3);
}

.weapon-slot .slot-key {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    margin-right: 4px;
}

/* Money & Stats */
#stats-container {
    position: fixed;
    top: 15px;
    left: 15px;
}

#money-display {
    font-family: 'Orbitron', monospace;
    font-size: 1.6em;
    font-weight: 700;
    color: #44ff44;
    text-shadow: 0 0 10px rgba(68,255,68,0.3), 0 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 8px;
}

#stats-display {
    font-size: 1.1em;
    color: #aaa;
}

#stats-display .kills {
    color: #ff6666;
    margin-right: 20px;
}

#stats-display .deaths {
    color: #888;
}

#stats-display .kd {
    color: #ffcc00;
    margin-left: 20px;
    font-size: 0.9em;
}

/* Crosshair */
#crosshair {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 15;
    --spread: 12px;
}

.ch-dot {
    position: absolute;
    width: 3px; height: 3px;
    background: rgba(0,255,0,0.95);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.ch-line {
    position: absolute;
    background: rgba(0,255,0,0.9);
    box-shadow: 0 0 2px rgba(0,0,0,0.8);
    transition: all 0.08s ease-out;
}

.ch-line.top { width: 2px; height: 8px; left: 50%; transform: translateX(-50%); top: calc(-1 * var(--spread)); }
.ch-line.bottom { width: 2px; height: 8px; left: 50%; transform: translateX(-50%); bottom: calc(-1 * var(--spread)); }
.ch-line.left { width: 8px; height: 2px; top: 50%; transform: translateY(-50%); left: calc(-1 * var(--spread)); }
.ch-line.right { width: 8px; height: 2px; top: 50%; transform: translateY(-50%); right: calc(-1 * var(--spread)); }

/* Hit confirmation - crosshair turns white briefly */
#crosshair.hit .ch-line,
#crosshair.hit .ch-dot {
    background: rgba(255,255,255,1);
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
}

/* Headshot - crosshair turns red */
#crosshair.headshot .ch-line,
#crosshair.headshot .ch-dot {
    background: rgba(255,50,50,1);
    box-shadow: 0 0 12px rgba(255,0,0,0.9);
}

/* Kill - crosshair pulses */
#crosshair.kill .ch-line,
#crosshair.kill .ch-dot {
    background: rgba(255,215,0,1);
    box-shadow: 0 0 15px rgba(255,215,0,1);
    animation: killPulse 0.3s ease-out;
}

@keyframes killPulse {
    0% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* Scope Overlay */
#scope-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 12;
    transition: opacity 0.15s ease;
}

#scope-overlay.active {
    opacity: 1;
    background: radial-gradient(circle at center, transparent 38vh, rgba(0,0,0,0.98) 40vh);
}

/* Ligne horizontale du scope */
#scope-overlay.active::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 0; 
    right: 0;
    height: 2px;
    background: #000;
    transform: translateY(-50%);
}

/* Ligne verticale du scope */
#scope-overlay.active::after {
    content: '';
    position: absolute;
    left: 50%; 
    top: 0; 
    bottom: 0;
    width: 2px;
    background: #000;
    transform: translateX(-50%);
}

/* Reticule central - croix fine */
#scope-reticle {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 13;
    opacity: 0;
}

#scope-overlay.active + #scope-reticle,
#scope-overlay.active ~ #scope-reticle {
    opacity: 1;
}

#scope-reticle::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: #000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#scope-reticle::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 20px;
    background: #000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#scope-reticle.active {
    opacity: 1;
}

/* Hit Marker - Enhanced */
#hitmarker {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 16;
    opacity: 0;
    transition: opacity 0.05s;
}

#hitmarker svg {
    width: 40px; height: 40px;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
}

#hitmarker svg line {
    stroke: white;
    stroke-width: 2.5;
}

#hitmarker.active { 
    opacity: 1; 
    animation: hitPop 0.15s ease-out;
}

@keyframes hitPop {
    0% { transform: translate(-50%, -50%) scale(0.5); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

#hitmarker.headshot svg { 
    filter: drop-shadow(0 0 12px rgba(255,50,50,1)); 
    width: 50px; height: 50px;
}
#hitmarker.headshot svg line { 
    stroke: #ff3333; 
    stroke-width: 3;
}

#hitmarker.kill svg { 
    filter: drop-shadow(0 0 15px rgba(255,215,0,1)); 
    width: 55px; height: 55px;
}
#hitmarker.kill svg line { 
    stroke: #ffd700; 
    stroke-width: 3.5;
}

/* Damage Effects - [cactus] CACTUS GREEN THEME */
#damage-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 30%, rgba(34,139,34,0.5) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 11;
    transition: opacity 0.1s;
}

#low-health-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 40%, rgba(139,69,19,0.4) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.5s;
    animation: lowHealthPulse 1s ease-in-out infinite;
}

@keyframes lowHealthPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: var(--pulse-opacity, 0); }
}

.damage-indicator {
    position: fixed;
    width: 120px; height: 50px;
    pointer-events: none;
    z-index: 14;
    opacity: 0;
    transition: opacity 0.15s;
}

.damage-indicator.active { 
    opacity: 1; 
    animation: damageFlash 0.5s ease-out;
}

@keyframes damageFlash {
    0%, 50% { opacity: 1; }
    100% { opacity: 0; }
}

.damage-indicator-arrow {
    width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(255,50,50,0.95), rgba(255,50,50,0.3));
    clip-path: polygon(0% 50%, 40% 0%, 40% 25%, 100% 25%, 100% 75%, 40% 75%, 40% 100%);
    filter: drop-shadow(0 0 10px rgba(255,0,0,0.8));
}

/* Floating Damage Numbers - [cactus] CACTUS COLORS */
.damage-number {
    position: fixed;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 1.2em;
    pointer-events: none;
    z-index: 17;
    animation: damageFloat 0.8s ease-out forwards;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.damage-number.body { color: #7CFC00; }
.damage-number.headshot { color: #32CD32; font-size: 1.6em; text-shadow: 0 0 10px #00FF00; }
.damage-number.heal { color: #00BFFF; }

@keyframes damageFloat {
    0% { opacity: 1; transform: translateY(0) scale(1.2); }
    100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}

/* Kill Feed - Enhanced with team colors */
#kill-feed {
    position: fixed;
    top: 15px;
    right: 15px;
    text-align: right;
    font-size: 0.85em;
    z-index: 18;
    max-width: 350px;
}

.kill-entry {
    padding: 8px 14px;
    margin-bottom: 5px;
    background: rgba(0,0,0,0.8);
    border-radius: 4px;
    animation: killSlide 5s forwards;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.1);
}

.kill-entry .killer { 
    font-weight: 700; 
    text-shadow: 0 0 8px currentColor;
}
.kill-entry .killer.team-a { color: #ff6b6b; }
.kill-entry .killer.team-b { color: #4dabf7; }

.kill-entry .victim { 
    font-weight: 700; 
}
.kill-entry .victim.team-a { color: #ff6b6b; }
.kill-entry .victim.team-b { color: #4dabf7; }

.kill-entry .weapon { 
    color: #aaa; 
    font-size: 0.85em;
    background: rgba(255,255,255,0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.kill-entry .headshot-icon { 
    color: #ffd700; 
    font-size: 1.2em;
    text-shadow: 0 0 10px #ffd700;
    animation: headshotGlow 0.5s ease-out;
}

.kill-entry .hitzone {
    color: #888;
    font-size: 0.8em;
    font-style: italic;
}

@keyframes headshotGlow {
    0% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

@keyframes killSlide {
    0% { opacity: 0; transform: translateX(30px); }
    5% { opacity: 1; transform: translateX(0); }
    85% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(30px); }
}

/* Scoreboard */
/* ============================================
   SCOREBOARD - CS:GO STYLE
   ============================================ */
#scoreboard {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 950px;
    max-width: 95vw;
    background: rgba(10, 12, 15, 0.97);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    display: none;
    z-index: 100;
    overflow: hidden;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 60px rgba(0,0,0,0.9);
    font-family: 'Segoe UI', 'Roboto', sans-serif;
}

#scoreboard.active { display: block; animation: sbFadeIn 0.15s ease-out; }

@keyframes sbFadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Header */
.scoreboard-header {
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(30,35,40,0.95), rgba(20,25,30,0.98));
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0;
}

.sb-team-score {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 15px 25px;
    gap: 15px;
}

.sb-team-a { 
    background: linear-gradient(90deg, rgba(255,70,70,0.15), transparent);
    justify-content: flex-start;
}

.sb-team-b { 
    background: linear-gradient(270deg, rgba(70,150,255,0.15), transparent);
    justify-content: flex-end;
}

.sb-team-name {
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.7);
}

.sb-team-a .sb-team-name { color: #ff6b6b; }
.sb-team-b .sb-team-name { color: #4dabf7; }

/* Badge "YOUR TEAM" */
.your-team-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700, #ff9500);
    color: #000;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: 700;
    margin: 0 6px;
    animation: yourTeamPulse 2s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes yourTeamPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 215, 0, 0.8); }
}

.sb-team-points {
    font-family: 'Orbitron', monospace;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1;
}

.sb-team-a .sb-team-points { color: #ff6b6b; text-shadow: 0 0 20px rgba(255,100,100,0.5); }
.sb-team-b .sb-team-points { color: #4dabf7; text-shadow: 0 0 20px rgba(70,150,255,0.5); }

.sb-center {
    padding: 12px 30px;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,0.05);
    border-right: 1px solid rgba(255,255,255,0.05);
}

.sb-map-name {
    font-family: 'Orbitron', monospace;
    font-size: 1.1em;
    font-weight: 700;
    color: #ff9500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.sb-round-info {
    font-size: 0.75em;
    color: rgba(255,255,255,0.5);
    margin: 4px 0;
}

.sb-timer {
    font-family: 'Orbitron', monospace;
    font-size: 1.4em;
    font-weight: 700;
    color: #fff;
}

/* Body */
.scoreboard-body {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
}

.sb-team-section {
    padding: 10px 15px;
}

.sb-section-a {
    background: linear-gradient(180deg, rgba(255,70,70,0.05), transparent);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sb-section-b {
    background: linear-gradient(180deg, rgba(70,150,255,0.05), transparent);
}

/* Rows */
.sb-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 3px;
    margin-bottom: 2px;
    transition: background 0.1s;
}

.sb-header-row {
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.4);
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 5px;
}

.sb-player-row {
    background: rgba(255,255,255,0.02);
}

.sb-player-row:hover {
    background: rgba(255,255,255,0.06);
}

.sb-player-row.is-self {
    background: rgba(255,150,0,0.15);
    border-left: 3px solid #ff9500;
}

.sb-section-a .sb-player-row.is-self { background: rgba(255,100,100,0.2); border-left-color: #ff6b6b; }
.sb-section-b .sb-player-row.is-self { background: rgba(70,150,255,0.2); border-left-color: #4dabf7; }

.sb-player-row.is-dead {
    opacity: 0.5;
}

.sb-player-row.is-dead .sb-col-name::after {
    content: ' \2620\FE0F';
    font-size: 0.85em;
}

/* Columns */
.sb-col {
    text-align: center;
}

.sb-col-status {
    width: 30px;
    font-size: 0.9em;
}

.sb-col-name {
    flex: 1;
    text-align: left;
    padding-left: 10px;
    font-weight: 500;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-player-row .sb-col-name .bot-tag {
    color: #888;
    font-size: 0.75em;
    margin-right: 5px;
}

.sb-col-kills {
    width: 45px;
    font-weight: 700;
    color: #7CFC00;
}

.sb-col-assists {
    width: 45px;
    color: #aaa;
}

.sb-col-deaths {
    width: 45px;
    color: #ff6b6b;
}

.sb-col-score {
    width: 55px;
    font-weight: 700;
    color: #ffd700;
}

.sb-col-money {
    width: 70px;
    font-family: 'Orbitron', monospace;
    font-size: 0.85em;
    color: #4ade80;
}

.sb-col-ping {
    width: 50px;
    font-size: 0.85em;
    color: #888;
}

.sb-col-ping.ping-good { color: #4ade80; }
.sb-col-ping.ping-medium { color: #fbbf24; }
.sb-col-ping.ping-bad { color: #f87171; }

/* Footer */
.scoreboard-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background: rgba(0,0,0,0.4);
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.75em;
    color: rgba(255,255,255,0.4);
}

.sb-player-list {
    min-height: 100px;
}

/* Chat */
#chat-container {
    position: fixed;
    top: 90px;
    left: 15px;
    width: 350px;
    z-index: 20;
}

#chat-messages {
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: #ff6600 transparent;
}

.chat-message {
    padding: 6px 10px;
    margin-bottom: 3px;
    background: rgba(0,0,0,0.7);
    border-radius: 4px;
    font-size: 0.9em;
    backdrop-filter: blur(4px);
    animation: chatFade 20s forwards;
}

@keyframes chatFade {
    0%, 90% { opacity: 1; }
    100% { opacity: 0.3; }
}

.chat-message .sender {
    color: #ff9966;
    font-weight: 600;
    margin-right: 8px;
}

.chat-message.system .sender { color: #ffcc00; }
.chat-message.system { border-left: 2px solid #ffcc00; }

#chat-input-container {
    display: none;
}

#chat-input-container.active { display: block; }

#chat-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0,0,0,0.9);
    border: 2px solid #ff6600;
    border-radius: 4px;
    color: #fff;
    font-size: 1em;
    outline: none;
}

#chat-input:focus {
    box-shadow: 0 0 20px rgba(255,102,0,0.3);
}

/* Buy Menu */
#buy-menu {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    background: rgba(0,0,0,0.95);
    border: 2px solid #ff6600;
    border-radius: 8px;
    display: none;
    z-index: 100;
    padding: 20px;
    backdrop-filter: blur(10px);
}

#buy-menu.active { display: block; }

#buy-menu h2 {
    font-family: 'Orbitron', monospace;
    color: #ff9933;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.4em;
    letter-spacing: 3px;
}

.buy-category {
    margin-bottom: 15px;
}

.buy-category-title {
    color: #888;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #333;
}

.buy-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.buy-item:hover {
    background: rgba(255,102,0,0.15);
    border-color: #ff6600;
    transform: translateX(5px);
}

.buy-item.disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.buy-item.disabled:hover {
    background: rgba(255,255,255,0.03);
    border-color: #333;
    transform: none;
}

.buy-item .name {
    color: #ffcc66;
    font-weight: 600;
}

.buy-item .stats {
    color: #888;
    font-size: 0.8em;
    margin-left: 10px;
}

.buy-item .price {
    color: #44ff44;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
}

.buy-item .key-hint {
    color: #666;
    font-size: 0.8em;
    margin-right: 15px;
}

#buy-menu .close-hint {
    text-align: center;
    color: #555;
    font-size: 0.85em;
    margin-top: 15px;
}

/* Pickup Hint */
#pickup-hint {
    position: fixed;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    color: #ffcc00;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

#pickup-hint.visible { opacity: 1; }

#pickup-hint kbd {
    background: rgba(255,204,0,0.2);
    padding: 3px 10px;
    border-radius: 3px;
    border: 1px solid rgba(255,204,0,0.4);
}

/* Death Screen */
#death-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: deathFadeIn 0.5s ease;
}

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

#death-screen .death-content {
    text-align: center;
    animation: deathSlideIn 0.5s ease;
}

@keyframes deathSlideIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#death-screen h1 {
    font-family: 'Orbitron', monospace;
    font-size: 4em;
    color: #ff0000;
    text-shadow: 0 0 50px rgba(255,0,0,0.8), 0 0 100px rgba(255,0,0,0.4);
    animation: deathPulse 1.5s infinite;
    letter-spacing: 8px;
    margin-bottom: 20px;
}

@keyframes deathPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}

#death-screen .headshot-badge {
    display: none;
    font-family: 'Orbitron', monospace;
    font-size: 1.8em;
    color: #ffcc00;
    text-shadow: 0 0 20px rgba(255,204,0,0.8);
    margin-bottom: 25px;
    animation: headshotBounce 0.5s ease;
}

@keyframes headshotBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

#death-screen .killer-info {
    font-size: 1.5em;
    color: #aaa;
    margin-bottom: 10px;
}

#death-screen .killer-info .killed-by {
    color: #888;
}

#death-screen .killer-info .killer-name {
    color: #ff4444;
    font-weight: 700;
    font-size: 1.2em;
    text-shadow: 0 0 10px rgba(255,68,68,0.5);
}

#death-screen .weapon-info {
    font-size: 1.2em;
    color: #888;
    margin-bottom: 30px;
}

#death-screen .weapon-info span {
    color: #ffaa00;
    font-weight: 600;
}

#death-screen .respawn-timer {
    font-size: 2.2em;
    color: #fff;
    margin-bottom: 30px;
}

#death-screen .respawn-timer span {
    color: #00ff00;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 1.3em;
    text-shadow: 0 0 20px rgba(0,255,0,0.5);
}

#death-screen .death-tip {
    font-size: 1em;
    color: #666;
    font-style: italic;
    margin-top: 20px;
}

/* Spawn Protection */
#spawn-protection {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', monospace;
    font-size: 1.1em;
    color: #00ffff;
    text-shadow: 0 0 20px rgba(0,255,255,0.5);
    opacity: 0;
    letter-spacing: 3px;
}

#spawn-protection.active {
    opacity: 1;
    animation: protectionBlink 0.6s infinite;
}

@keyframes protectionBlink {
    50% { opacity: 0.5; }
}

/* Connection Status */
#connection-status {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 40px;
    background: rgba(200,0,0,0.9);
    border-radius: 8px;
    font-size: 1.2em;
    display: none;
    z-index: 200;
    text-align: center;
}

#connection-status.active { display: block; }

#connection-status .reconnect-btn {
    margin-top: 15px;
    padding: 10px 30px;
    background: #fff;
    color: #c00;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
}

/* Minimap (old style - kept for compatibility) */
#minimap {
    position: fixed;
    bottom: 80px;
    left: 15px;
    width: 150px;
    height: 150px;
    background: rgba(0,0,0,0.85);
    border: 2px solid #ff6600;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* Kill Streak */
#killstreak {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', monospace;
    font-size: 2em;
    color: #ffcc00;
    text-shadow: 0 0 30px rgba(255,204,0,0.8);
    opacity: 0;
    pointer-events: none;
    z-index: 25;
}

#killstreak.active {
    animation: killstreakPop 2s forwards;
}

@keyframes killstreakPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    30% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(0.8); }
}

/* FPS Counter */
#fps-counter {
    position: fixed;
    top: 15px;
    right: 15px;
    font-family: 'Orbitron', monospace;
    font-size: 0.8em;
    color: #666;
    z-index: 5;
}

/* Blocker Overlays */
.game-blocker {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    backdrop-filter: blur(5px);
}

.game-blocker h2 {
    font-family: 'Orbitron', monospace;
    font-size: 2em;
    color: #fff;
    text-shadow: 0 0 30px rgba(255,255,255,0.5);
    letter-spacing: 4px;
    animation: blockerPulse 1.5s infinite;
}

.game-blocker p {
    color: #888;
    margin-top: 15px;
}

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

/* HEADSHOT Indicator */
.headshot-indicator {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 36px;
    font-weight: bold;
    color: #ff4444;
    text-shadow: 
        0 0 20px #ff0000,
        0 0 40px #ff0000,
        2px 2px 0 #000,
        -2px -2px 0 #000;
    z-index: 1000;
    pointer-events: none;
    animation: headshotPop 0.6s ease-out forwards;
    font-family: 'Impact', sans-serif;
    letter-spacing: 4px;
}

/* Kill Indicator */
.kill-indicator {
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 2px 2px 0 #000;
    z-index: 1000;
    pointer-events: none;
    animation: killPop 0.8s ease-out forwards;
}

@keyframes headshotPop {
    0% { transform: translateX(-50%) scale(0.3); opacity: 0; }
    15% { transform: translateX(-50%) scale(1.4); opacity: 1; }
    30% { transform: translateX(-50%) scale(1.0); }
    100% { transform: translateX(-50%) scale(1.0); opacity: 0; }
}

@keyframes killPop {
    0% { transform: translateX(-50%) translateY(20px); opacity: 0; }
    20% { transform: translateX(-50%) translateY(0); opacity: 1; }
    80% { transform: translateX(-50%) translateY(0); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-20px); opacity: 0; }
}

/* Hitmarker headshot style */
.hit.headshot {
    border-color: #ff0000 !important;
    box-shadow: 0 0 10px #ff0000;
}

/* ============================================
   CLIENT PERFORMANCE MONITOR
   ============================================ */
#perf-monitor {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1000;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
}

#perf-toggle {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 102, 0, 0.8);
    border-radius: 5px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-left: auto;
}

#perf-toggle:hover {
    background: rgba(255, 102, 0, 0.3);
}

#perf-details {
    display: none;
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid rgba(255, 102, 0, 0.8);
    border-radius: 5px;
    padding: 10px;
    margin-top: 5px;
    min-width: 180px;
    color: #fff;
}

#perf-details.visible {
    display: block;
}

#perf-details .perf-title {
    color: #ff6600;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 102, 0, 0.5);
    padding-bottom: 5px;
}

#perf-details hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 8px 0;
}

#perf-details div {
    margin: 3px 0;
}

.perf-good { color: #44ff44; }
.perf-warn { color: #ffaa00; }
.perf-bad { color: #ff4444; }

/* ============================================
   MINIMAP - PRO STYLE
   ============================================ */
#minimap-container {
    position: fixed;
    top: 15px;
    left: 15px;
    width: 180px;
    height: 180px;
    z-index: 100;
    pointer-events: none;
}

#minimap {
    width: 180px;
    height: 180px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.7);
}

#minimap-border {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 7px;
    pointer-events: none;
}

.scoreboard-open #minimap-container {
    opacity: 0.3;
}

/* ============================================
   ROUND SYSTEM UI
   ============================================ */
#round-hud {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 90;
    pointer-events: none;
}

#round-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.8);
    padding: 8px 25px;
    border-radius: 0 0 10px 10px;
    border: 2px solid rgba(255, 102, 0, 0.6);
    border-top: none;
}

#team-score-a {
    font-family: 'Orbitron', monospace;
    font-size: 2em;
    font-weight: bold;
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
    min-width: 50px;
    text-align: center;
}

#team-score-b {
    font-family: 'Orbitron', monospace;
    font-size: 2em;
    font-weight: bold;
    color: #4488ff;
    text-shadow: 0 0 10px rgba(68, 136, 255, 0.5);
    min-width: 50px;
    text-align: center;
}

#round-timer {
    font-family: 'Orbitron', monospace;
    font-size: 1.8em;
    font-weight: bold;
    color: #ffffff;
    min-width: 80px;
    text-align: center;
}

#round-timer.warning {
    color: #ffaa00;
    animation: timerPulse 0.5s infinite;
}

#round-timer.critical {
    color: #ff0000;
    animation: timerPulse 0.25s infinite;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

#round-info {
    font-size: 0.9em;
    color: #888;
    text-align: center;
    margin-top: 5px;
}

#round-kills {
    display: flex;
    gap: 30px;
    font-size: 0.85em;
    margin-top: 3px;
}

#round-kills-a {
    color: #ff6666;
}

#round-kills-b {
    color: #6699ff;
}

/* Round Announcement Screen */
#round-announcement {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 150;
    pointer-events: none;
}

#round-announcement.active {
    display: flex;
    animation: announceFadeIn 0.3s ease-out;
}

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

#round-announcement .round-title {
    font-family: 'Orbitron', monospace;
    font-size: 4em;
    font-weight: 900;
    color: #ff6600;
    text-shadow: 0 0 50px rgba(255, 102, 0, 0.8);
    letter-spacing: 8px;
    animation: roundTitlePop 0.5s ease-out;
}

@keyframes roundTitlePop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

#round-announcement .round-subtitle {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2em;
    color: #ffffff;
    margin-top: 20px;
    letter-spacing: 4px;
}

#round-announcement .round-scores {
    display: flex;
    gap: 40px;
    margin-top: 30px;
    font-family: 'Orbitron', monospace;
    font-size: 3em;
}

#round-announcement .score-a {
    color: #ff4444;
}

#round-announcement .score-b {
    color: #4488ff;
}

#round-announcement .winner-text {
    font-family: 'Orbitron', monospace;
    font-size: 2.5em;
    margin-top: 20px;
    animation: winnerGlow 1s infinite;
}

#round-announcement .winner-text.team-a {
    color: #ff4444;
}

#round-announcement .winner-text.team-b {
    color: #4488ff;
}

@keyframes winnerGlow {
    0%, 100% { text-shadow: 0 0 20px currentColor; }
    50% { text-shadow: 0 0 40px currentColor, 0 0 60px currentColor; }
}

/* Warmup indicator */
#warmup-indicator {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', monospace;
    font-size: 1.2em;
    color: #ffcc00;
    text-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
    display: none;
    z-index: 95;
    animation: warmupBlink 0.8s infinite;
}

#warmup-indicator.active {
    display: block;
}

@keyframes warmupBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Freeze Time Overlay */
#freeze-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 100, 200, 0.15);
    pointer-events: none;
    z-index: 85;
    display: none;
    border: 4px solid rgba(0, 150, 255, 0.5);
}

#freeze-overlay.active {
    display: block;
    animation: freezePulse 1s infinite;
}

@keyframes freezePulse {
    0%, 100% { border-color: rgba(0, 150, 255, 0.5); }
    50% { border-color: rgba(0, 150, 255, 0.8); }
}

#freeze-text {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', monospace;
    font-size: 2em;
    color: #00aaff;
    text-shadow: 0 0 20px rgba(0, 170, 255, 0.8);
    display: none;
    z-index: 95;
}

#freeze-text.active {
    display: block;
    animation: freezeTextPulse 0.5s infinite;
}

@keyframes freezeTextPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
}

/* Buy Zone Indicator */
#buy-zone-indicator {
    position: fixed;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', monospace;
    font-size: 1em;
    padding: 8px 20px;
    border-radius: 5px;
    z-index: 90;
    display: none;
}

#buy-zone-indicator.in-zone {
    display: block;
    background: rgba(0, 200, 0, 0.3);
    border: 2px solid #00ff00;
    color: #00ff00;
}

#buy-zone-indicator.out-zone {
    display: block;
    background: rgba(200, 0, 0, 0.3);
    border: 2px solid #ff4444;
    color: #ff4444;
}

#buy-zone-indicator.hidden {
    display: none;
}

/* Buy Time remaining */
#buy-time-remaining {
    position: fixed;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', monospace;
    font-size: 1.2em;
    color: #ffcc00;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
    display: none;
    z-index: 95;
}

#buy-time-remaining.active {
    display: block;
}

/* Round bonus notification */
#round-bonus {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', monospace;
    font-size: 1.5em;
    padding: 15px 30px;
    border-radius: 10px;
    z-index: 120;
    display: none;
    animation: bonusPopIn 0.3s ease-out;
}

#round-bonus.win {
    display: block;
    background: rgba(0, 100, 0, 0.9);
    border: 2px solid #00ff00;
    color: #00ff00;
}

#round-bonus.lose {
    display: block;
    background: rgba(100, 0, 0, 0.9);
    border: 2px solid #ff4444;
    color: #ff8888;
}

@keyframes bonusPopIn {
    0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* ============================================
   KILLCAM UI
   ============================================ */
#killcam-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 60;
    display: none;
}

#killcam-overlay.active {
    display: block;
}

.killcam-banner {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(139, 0, 0, 0.9);
    border: 3px solid #ff0000;
    border-radius: 8px;
    padding: 15px 40px;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: killcamPulse 1s ease-in-out infinite;
}

.killcam-icon {
    font-size: 28px;
}

.killcam-text {
    font-family: 'Orbitron', monospace;
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 6px;
    text-shadow: 0 0 10px #ff0000;
}

.killcam-killer {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    font-size: 18px;
}

.killcam-killer .killer-label {
    color: #aaa;
    margin-bottom: 5px;
}

.killcam-killer .killer-name-display {
    font-size: 32px;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-family: 'Orbitron', monospace;
}

@keyframes killcamPulse {
    0%, 100% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
    50% { border-color: #ff6600; box-shadow: 0 0 30px rgba(255, 102, 0, 0.8); }
}



/* ============================================
   OPTIONS MENU
   ============================================ */
#options-menu {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
    backdrop-filter: blur(10px);
}

#options-menu.active {
    display: flex;
    animation: optFadeIn 0.2s ease-out;
}

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

.options-container {
    background: linear-gradient(180deg, #1a1d21, #12151a);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    width: 600px;
    max-width: 95vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

.options-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: linear-gradient(90deg, rgba(255,150,0,0.1), transparent);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.options-header h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1.4em;
    color: #ff9500;
    margin: 0;
    letter-spacing: 2px;
}

.close-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #888;
    font-size: 1.5em;
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.close-btn:hover {
    background: rgba(255,50,50,0.3);
    color: #ff5555;
}

/* Tabs */
.options-tabs {
    display: flex;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.opt-tab {
    flex: 1;
    padding: 15px;
    background: none;
    border: none;
    color: #888;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.opt-tab:hover {
    background: rgba(255,255,255,0.05);
    color: #ccc;
}

.opt-tab.active {
    color: #ff9500;
    border-bottom-color: #ff9500;
    background: rgba(255,150,0,0.1);
}

/* Content */
.options-content {
    padding: 25px;
    max-height: 50vh;
    overflow-y: auto;
}

.opt-panel {
    display: none;
}

.opt-panel.active {
    display: block;
    animation: panelFadeIn 0.2s ease-out;
}

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

/* Option Groups */
.opt-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.opt-group:last-child {
    border-bottom: none;
}

.opt-label {
    color: #ddd;
    font-size: 0.95em;
}

/* Sliders */
.opt-slider-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

input[type="range"] {
    width: 150px;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    background: linear-gradient(135deg, #ff9500, #ff6600);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(255,150,0,0.4);
    transition: transform 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.opt-value {
    min-width: 50px;
    text-align: right;
    font-family: 'Orbitron', monospace;
    font-size: 0.9em;
    color: #ff9500;
}

/* Toggle */
.opt-toggle {
    position: relative;
    width: 50px;
    height: 26px;
    cursor: pointer;
}

.opt-toggle input {
    opacity: 0;
    width: 0; height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 26px;
    transition: 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    left: 3px; bottom: 3px;
    background: #666;
    border-radius: 50%;
    transition: 0.3s;
}

.opt-toggle input:checked + .toggle-slider {
    background: rgba(255,150,0,0.4);
}

.opt-toggle input:checked + .toggle-slider::before {
    transform: translateX(24px);
    background: #ff9500;
}

/* Select */
.opt-select {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.9em;
    cursor: pointer;
    outline: none;
    min-width: 150px;
}

.opt-select:focus {
    border-color: #ff9500;
}

.opt-select option {
    background: #1a1d21;
    color: #fff;
}

/* Crosshair Preview */
.crosshair-preview {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#crosshair-preview-box {
    width: 150px; height: 150px;
    background: linear-gradient(135deg, #2a2d32, #1a1d21);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#preview-crosshair {
    position: relative;
}

#preview-crosshair .ch-dot {
    position: absolute;
    width: 3px; height: 3px;
    background: #00ff00;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

#preview-crosshair .ch-line {
    position: absolute;
    background: #00ff00;
}

#preview-crosshair .ch-line.top,
#preview-crosshair .ch-line.bottom {
    width: 2px; height: 8px;
    left: 50%; transform: translateX(-50%);
}

#preview-crosshair .ch-line.top { top: -16px; }
#preview-crosshair .ch-line.bottom { bottom: -16px; }

#preview-crosshair .ch-line.left,
#preview-crosshair .ch-line.right {
    width: 8px; height: 2px;
    top: 50%; transform: translateY(-50%);
}

#preview-crosshair .ch-line.left { left: -16px; }
#preview-crosshair .ch-line.right { right: -16px; }

/* Color Picker */
.color-picker-row {
    display: flex;
    gap: 8px;
}

.ch-color-btn {
    width: 32px; height: 32px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.ch-color-btn:hover {
    transform: scale(1.1);
}

.ch-color-btn.selected {
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* Footer */
.options-footer {
    display: flex;
    justify-content: space-between;
    padding: 20px 25px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255,255,255,0.05);
}

.opt-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.opt-btn.primary {
    background: linear-gradient(135deg, #ff9500, #ff6600);
    color: #fff;
}

.opt-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255,150,0,0.4);
}

.opt-btn.secondary {
    background: rgba(255,255,255,0.1);
    color: #aaa;
}

.opt-btn.secondary:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* Secondary Button in Menu */
.secondary-btn {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #aaa;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s;
}

.secondary-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}

/* In-game Options (ESC menu) */
#ingame-options-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    color: #888;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 50;
    font-size: 1.2em;
    transition: all 0.2s;
    display: none;
}

#ingame-options-btn:hover {
    background: rgba(255,150,0,0.2);
    color: #ff9500;
    border-color: #ff9500;
}

.game-active #ingame-options-btn {
    display: block;
}

/* ============================================
   PAUSE MENU (ESC)
   ============================================ */
#pause-menu {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 150;
    backdrop-filter: blur(8px);
}

#pause-menu.active {
    display: flex;
    animation: pauseFadeIn 0.15s ease-out;
}

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

.pause-container {
    background: linear-gradient(180deg, #1a1d21, #12151a);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    min-width: 300px;
}

.pause-container h2 {
    font-family: 'Orbitron', monospace;
    font-size: 2em;
    color: #ff9500;
    margin: 0 0 30px 0;
    letter-spacing: 3px;
}

.pause-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pause-btn {
    padding: 15px 30px;
    font-size: 1.1em;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pause-btn.primary {
    background: linear-gradient(135deg, #ff9500, #ff6600);
    color: #fff;
}

.pause-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255,150,0,0.4);
}

.pause-btn:not(.primary):not(.danger) {
    background: rgba(255,255,255,0.1);
    color: #ccc;
    border: 1px solid rgba(255,255,255,0.1);
}

.pause-btn:not(.primary):not(.danger):hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.pause-btn.danger {
    background: rgba(255,50,50,0.2);
    color: #ff6b6b;
    border: 1px solid rgba(255,50,50,0.3);
}

.pause-btn.danger:hover {
    background: rgba(255,50,50,0.3);
    color: #ff8888;
}

.pause-hint {
    margin-top: 25px;
    font-size: 0.85em;
    color: rgba(255,255,255,0.4);
}

/* ============================================
   BUY MENU IMPROVEMENTS
   ============================================ */
.buy-columns {
    display: flex;
    gap: 15px;
}

.buy-column {
    flex: 1;
}

.grenade-item {
    border-left: 3px solid #ff6600;
}

.grenade-item:hover {
    border-left-color: #ffaa00;
}

.grenade-inventory {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    margin-top: 15px;
    font-size: 0.9em;
}

.inv-label {
    color: #888;
    font-weight: 600;
}

.inv-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}

.inv-item span {
    font-family: 'Orbitron', monospace;
    color: #ff9500;
}

/* ============================================
   GRENADE HUD (bottom right, above weapon slots)
   ============================================ */
#grenade-hud {
    position: fixed;
    bottom: 185px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 30;
}

.grenade-slot {
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.grenade-slot:hover {
    border-color: rgba(255,150,0,0.5);
    background: rgba(255,150,0,0.1);
}

.grenade-slot.selected {
    border-color: #ff9500;
    background: rgba(255,150,0,0.2);
    box-shadow: 0 0 15px rgba(255,150,0,0.4);
}

.grenade-slot.empty {
    opacity: 0.3;
    pointer-events: none;
}

.grenade-slot .g-icon {
    font-size: 1.4em;
}

.grenade-slot .g-count {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-family: 'Orbitron', monospace;
    font-size: 0.7em;
    color: #ff9500;
}

.grenade-slot .g-key {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.6em;
    color: rgba(255,255,255,0.4);
}

/* ============================================
   FLASH EFFECT
   ============================================ */
#flash-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 500;
    transition: opacity 0.1s;
}

#flash-overlay.active {
    opacity: 1;
}

/* ============================================
   SMOKE EFFECT (3D rendered in game)
   ============================================ */

/* ============================================
   FIRE EFFECT INDICATOR
   ============================================ */
#fire-damage-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 45;
    opacity: 0;
    background: radial-gradient(circle at center, transparent 40%, rgba(255, 100, 0, 0.3) 100%);
    transition: opacity 0.2s;
}

#fire-damage-overlay.active {
    opacity: 1;
    animation: fireFlicker 0.3s infinite;
}

@keyframes fireFlicker {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.8; }
}

/* ============================================
   GRENADE TRAJECTORY PREVIEW (when holding)
   ============================================ */
#grenade-preview {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #ff9500;
    font-family: 'Orbitron', monospace;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 35;
    text-shadow: 0 0 10px rgba(255,150,0,0.8);
}

#grenade-preview.active {
    opacity: 1;
}

/* ============================================
   MAIN MENU - PROFESSIONAL CS2/VALORANT STYLE
   ============================================ */

/* Hide old nickname screen if still referenced */
#nickname-screen {
    display: none !important;
}

/* ===== MAIN MENU CONTAINER ===== */
#main-menu {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #0a0b0d;
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#main-menu.hidden {
    display: none;
}

/* ===== ANIMATED BACKGROUND ===== */
.menu-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.menu-bg-gradient {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(50, 205, 50, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(255, 150, 0, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.5) 0%, transparent 100%),
        linear-gradient(180deg, #0d1210 0%, #1a1f1a 50%, #0d1210 100%);
    animation: bgPulse 8s ease-in-out infinite;
}

@keyframes bgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.menu-bg-particles {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="%2332CD3220"/></svg>') repeat;
    background-size: 50px 50px;
    animation: particleFloat 20s linear infinite;
}

@keyframes particleFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-100px); }
}

.menu-bg-cactus {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 400px; height: 400px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="70" font-size="60" text-anchor="middle" fill="%2332CD3208">&#127797;</text></svg>') no-repeat center;
    background-size: contain;
    opacity: 0.5;
    animation: cactusFloat 6s ease-in-out infinite;
}

@keyframes cactusFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* ===== TOP BAR ===== */
.menu-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(50, 205, 50, 0.2);
    position: relative;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.menu-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    font-size: 2.2em;
    animation: logoWiggle 3s ease-in-out infinite;
}

@keyframes logoWiggle {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.logo-text {
    font-family: 'Bangers', cursive;
    font-size: 1.8em;
    color: #32CD32;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(50, 205, 50, 0.5), 2px 2px 0 #006400;
}

.menu-user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-currency {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 8px 15px;
    border-radius: 20px;
}

.currency-icon {
    font-size: 1.2em;
}

.currency-amount {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    color: #FFD700;
    font-size: 1.1em;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(50, 205, 50, 0.1);
    border: 1px solid rgba(50, 205, 50, 0.3);
    padding: 8px 15px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-profile:hover {
    background: rgba(50, 205, 50, 0.2);
    border-color: rgba(50, 205, 50, 0.5);
    transform: translateY(-2px);
}

.user-avatar {
    width: 35px; height: 35px;
    background: linear-gradient(135deg, #32CD32, #228B22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
}

.user-name {
    font-weight: 600;
    color: #90EE90;
}

.user-level {
    font-size: 0.8em;
    color: #FFD700;
    background: rgba(255, 215, 0, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ===== NAVIGATION TABS ===== */
.menu-nav {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 10;
}

.nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 25px;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 8px;
}

.nav-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #32CD32, #7CFC00);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.nav-tab:hover {
    color: #aaa;
    background: rgba(255, 255, 255, 0.05);
}

.nav-tab:hover::after {
    width: 30px;
}

.nav-tab.active {
    color: #32CD32;
    background: rgba(50, 205, 50, 0.1);
}

.nav-tab.active::after {
    width: 60%;
    background: linear-gradient(90deg, #32CD32, #7CFC00);
    box-shadow: 0 0 10px rgba(50, 205, 50, 0.5);
}

.nav-icon {
    font-size: 1.4em;
}

.nav-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 1px;
}

.nav-tab.active .nav-icon {
    animation: navIconPop 0.3s ease;
}

@keyframes navIconPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ===== MENU CONTENT AREA ===== */
.menu-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 30px;
    position: relative;
    z-index: 5;
}

/* Panel container - uses stacking for smooth transitions */
.menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.menu-panel.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* ===== PLAY PANEL ===== */
.play-container {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 25px;
    max-width: 1400px;
    margin: 0 auto;
    height: calc(100vh - 220px);
    min-height: 500px;
}

/* Play Left - Character Preview */
.play-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.character-showcase {
    flex: 1;
    background: linear-gradient(180deg, rgba(50, 205, 50, 0.05) 0%, rgba(0, 0, 0, 0.3) 100%);
    border: 1px solid rgba(50, 205, 50, 0.2);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    min-height: 350px;
}

.character-showcase canvas {
    width: 100%;
    height: 100%;
}

.character-name-tag {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #7CFC00;
    padding: 8px 20px;
    border-radius: 20px;
    font-family: 'Orbitron', monospace;
    font-size: 0.85em;
    letter-spacing: 2px;
    border: 1px solid rgba(50, 205, 50, 0.3);
}

.character-quick-customize {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.quick-btn {
    width: 40px; height: 40px;
    background: rgba(50, 205, 50, 0.2);
    border: 1px solid rgba(50, 205, 50, 0.4);
    border-radius: 50%;
    color: #32CD32;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-btn .lucide-icon {
    pointer-events: none; /* Prevent icon from capturing clicks */
    width: 20px;
    height: 20px;
}

.quick-btn:hover {
    background: rgba(50, 205, 50, 0.4);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(50, 205, 50, 0.4);
}

.quick-btn:active {
    transform: scale(0.95);
}

.skin-name {
    color: #90EE90;
    font-weight: 600;
    min-width: 120px;
    text-align: center;
}

/* ===== PLAY CENTER - Main Play Buttons ===== */
.play-center {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

/* Main Play Button */
.play-card {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.play-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.play-card:hover::before {
    opacity: 1;
}

.play-card:hover {
    transform: translateY(-3px);
    border-color: rgba(50, 205, 50, 0.5);
    box-shadow: 0 10px 40px rgba(50, 205, 50, 0.2);
}

.play-card-glow {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(50, 205, 50, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.play-card:hover .play-card-glow {
    opacity: 1;
    animation: glowRotate 4s linear infinite;
}

@keyframes glowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.play-card-icon {
    font-size: 3em;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.play-card-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.8em;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 3px;
    position: relative;
    z-index: 1;
}

.play-card-desc {
    color: #888;
    font-size: 1em;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.play-card-players {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #32CD32;
    font-size: 0.9em;
    position: relative;
    z-index: 1;
}

.online-dot {
    width: 8px; height: 8px;
    background: #32CD32;
    border-radius: 50%;
    animation: onlinePulse 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(50, 205, 50, 0.8);
}

@keyframes onlinePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* Main Play Button Special Style */
.main-play-btn {
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.15) 0%, rgba(0, 100, 0, 0.2) 100%);
    border: 2px solid rgba(50, 205, 50, 0.4);
    text-align: center;
    padding: 40px 30px;
}

.main-play-btn:hover {
    border-color: #32CD32;
    box-shadow: 0 0 50px rgba(50, 205, 50, 0.3), inset 0 0 30px rgba(50, 205, 50, 0.1);
}

.main-play-btn .play-card-icon {
    font-size: 4em;
    animation: swordFloat 2s ease-in-out infinite;
}

@keyframes swordFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.main-play-btn .play-card-title {
    font-size: 2.2em;
    color: #7CFC00;
    text-shadow: 0 0 20px rgba(50, 205, 50, 0.5);
}

/* Game Mode Cards Grid */
.play-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.mode-card {
    text-align: center;
    padding: 20px 15px;
    background: rgba(0, 0, 0, 0.4);
}

.mode-card .play-card-icon {
    font-size: 2em;
    margin-bottom: 8px;
}

.mode-card .play-card-title {
    font-size: 1em;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.mode-card .play-card-desc {
    font-size: 0.8em;
    margin-bottom: 0;
}

.mode-card:hover {
    border-color: rgba(255, 150, 0, 0.5);
}

/* Espresso mode - active playable card */
.mode-card.mode-active {
    border-color: rgba(255, 170, 0, 0.6);
    background: rgba(255, 150, 0, 0.08);
    cursor: pointer;
}

.mode-card.mode-active:hover {
    border-color: rgba(255, 170, 0, 0.9);
    background: rgba(255, 150, 0, 0.15);
    box-shadow: 0 0 20px rgba(255, 150, 0, 0.2);
}

.mode-card.mode-active .play-card-icon .lucide-icon {
    color: #ffaa00;
}

.mode-card.mode-active .play-card-title {
    color: #ffcc44;
}

/* ===== DEATHMATCH HUD ===== */
#dm-hud {
    text-align: center;
    margin-top: 4px;
}

#dm-your-kills {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ff4444;
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
    letter-spacing: 2px;
}

#dm-kill-count {
    font-size: 18px;
    color: #ff6666;
}

#dm-leaderboard {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
}

.dm-lb-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
}

.dm-lb-self {
    color: #ffcc44;
    font-weight: 700;
}

.dm-lb-rank {
    color: rgba(255, 255, 255, 0.4);
    min-width: 24px;
}

.dm-lb-name {
    min-width: 80px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-lb-kills {
    color: #ff6666;
    min-width: 24px;
    text-align: right;
}

/* Card Badge (SOON, NEW, etc.) */
.card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 1px;
}

.card-badge.soon {
    background: linear-gradient(135deg, #ff9500, #ff6600);
    color: #fff;
}

.card-badge.new {
    background: linear-gradient(135deg, #32CD32, #228B22);
    color: #fff;
    animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 5px rgba(50, 205, 50, 0.5); }
    50% { box-shadow: 0 0 15px rgba(50, 205, 50, 0.8); }
}

.card-badge.hot {
    background: linear-gradient(135deg, #ff4444, #cc0000);
    color: #fff;
}

/* ===== MENU FOOTER ===== */
.menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 30px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 10;
}

.footer-left,
.footer-center,
.footer-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.version {
    font-family: 'Orbitron', monospace;
    font-size: 0.8em;
    color: #444;
}

.separator {
    color: #333;
}

.footer-link {
    color: #666;
    text-decoration: none;
    font-size: 0.85em;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #32CD32;
}

.server-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    color: #888;
}

.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
}

.status-dot.online {
    background: #32CD32;
    box-shadow: 0 0 8px rgba(50, 205, 50, 0.8);
    animation: statusPulse 2s ease-in-out infinite;
}

.status-dot.offline {
    background: #ff4444;
}

.status-dot.maintenance {
    background: #ff9500;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.copyright {
    font-size: 0.8em;
    color: #444;
}

/* ============================================
   LOADOUT PANEL - Character Customization
   ============================================ */
.loadout-container {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 500px;
}

.loadout-section {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 20px;
}

.loadout-section .section-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.1em;
    color: #32CD32;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(50, 205, 50, 0.2);
    letter-spacing: 2px;
}

.loadout-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.loadout-category {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-label {
    font-size: 0.85em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Color Options in Loadout */
.loadout-container .color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.loadout-container .color-btn {
    width: 45px;
    height: 45px;
    border: 3px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 3px 0 rgba(0,0,0,0.3);
}

.loadout-container .color-btn:hover:not(.locked) {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

.loadout-container .color-btn.selected {
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
    transform: scale(1.1);
}

.loadout-container .color-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(50%);
    position: relative;
}

.loadout-container .color-btn.locked:hover {
    transform: none;
    opacity: 0.7;
}

/* Price tag on locked items */
.color-btn .price-tag,
.accessory-btn .price-tag {
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
}

.color-btn .price-tag::before,
.accessory-btn .price-tag::before {
    content: '\1FA99';
    margin-right: 2px;
    font-size: 0.6rem;
}

.color-check {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3em;
    color: #fff;
    text-shadow: 0 0 10px #000;
}

.color-btn.selected .color-check {
    display: block;
}

.lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1em;
}

/* ============================================
   RARITY SYSTEM - Visual Effects
   ============================================ */

/* Rarity color definitions */
:root {
    --rarity-common: #9CA3AF;
    --rarity-common-glow: rgba(156, 163, 175, 0.4);
    --rarity-uncommon: #22C55E;
    --rarity-uncommon-glow: rgba(34, 197, 94, 0.5);
    --rarity-rare: #3B82F6;
    --rarity-rare-glow: rgba(59, 130, 246, 0.6);
    --rarity-epic: #A855F7;
    --rarity-epic-glow: rgba(168, 85, 247, 0.6);
    --rarity-legendary: #F59E0B;
    --rarity-legendary-glow: rgba(245, 158, 11, 0.8);
}

/* Rarity Badge Base */
.rarity-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.65em;
    padding: 3px 6px;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Common - Gris simple */
.rarity-badge.common {
    background: linear-gradient(135deg, #6B7280, #9CA3AF);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Uncommon - Vert avec leger glow */
.rarity-badge.uncommon {
    background: linear-gradient(135deg, #16A34A, #22C55E);
    box-shadow: 0 0 8px var(--rarity-uncommon-glow);
    animation: uncommonPulse 3s ease-in-out infinite;
}

/* Rare - Bleu avec glow */
.rarity-badge.rare {
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    box-shadow: 0 0 12px var(--rarity-rare-glow);
    animation: rarePulse 2.5s ease-in-out infinite;
}

/* Epic - Violet avec glow anime */
.rarity-badge.epic {
    background: linear-gradient(135deg, #7C3AED, #A855F7);
    box-shadow: 0 0 15px var(--rarity-epic-glow);
    animation: epicPulse 2s ease-in-out infinite;
}

/* Legendary - Or avec glow pulsant intense */
.rarity-badge.legendary {
    background: linear-gradient(135deg, #D97706, #F59E0B, #FBBF24);
    box-shadow: 0 0 20px var(--rarity-legendary-glow);
    animation: legendaryPulse 1.5s ease-in-out infinite, legendaryShine 3s linear infinite;
}

/* Rarity Pulse Animations */
@keyframes uncommonPulse {
    0%, 100% { box-shadow: 0 0 8px var(--rarity-uncommon-glow); }
    50% { box-shadow: 0 0 12px var(--rarity-uncommon-glow); }
}

@keyframes rarePulse {
    0%, 100% { box-shadow: 0 0 12px var(--rarity-rare-glow); }
    50% { box-shadow: 0 0 18px var(--rarity-rare-glow); }
}

@keyframes epicPulse {
    0%, 100% { box-shadow: 0 0 15px var(--rarity-epic-glow); transform: scale(1); }
    50% { box-shadow: 0 0 25px var(--rarity-epic-glow); transform: scale(1.05); }
}

@keyframes legendaryPulse {
    0%, 100% { box-shadow: 0 0 20px var(--rarity-legendary-glow); transform: scale(1); }
    50% { box-shadow: 0 0 35px var(--rarity-legendary-glow), 0 0 50px rgba(245, 158, 11, 0.3); transform: scale(1.08); }
}

@keyframes legendaryShine {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================
   RARITY BORDERS for Items
   ============================================ */

/* Color buttons with rarity borders */
.loadout-container .color-btn[data-rarity="common"] {
    border: 3px solid var(--rarity-common);
}
.loadout-container .color-btn[data-rarity="uncommon"] {
    border: 3px solid var(--rarity-uncommon);
    box-shadow: 0 0 8px var(--rarity-uncommon-glow), inset 0 0 8px rgba(34, 197, 94, 0.1);
}
.loadout-container .color-btn[data-rarity="rare"] {
    border: 3px solid var(--rarity-rare);
    box-shadow: 0 0 12px var(--rarity-rare-glow), inset 0 0 10px rgba(59, 130, 246, 0.15);
    animation: rareBorderGlow 2.5s ease-in-out infinite;
}
.loadout-container .color-btn[data-rarity="epic"] {
    border: 3px solid var(--rarity-epic);
    box-shadow: 0 0 15px var(--rarity-epic-glow), inset 0 0 12px rgba(168, 85, 247, 0.2);
    animation: epicBorderGlow 2s ease-in-out infinite;
}
.loadout-container .color-btn[data-rarity="legendary"] {
    border: 3px solid var(--rarity-legendary);
    box-shadow: 0 0 20px var(--rarity-legendary-glow), inset 0 0 15px rgba(245, 158, 11, 0.25);
    animation: legendaryBorderGlow 1.5s ease-in-out infinite;
    position: relative;
    overflow: visible;
}

/* Legendary particles effect */
.loadout-container .color-btn[data-rarity="legendary"]::before {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    background: linear-gradient(45deg, 
        transparent 40%, 
        rgba(255, 215, 0, 0.4) 45%, 
        rgba(255, 215, 0, 0.8) 50%, 
        rgba(255, 215, 0, 0.4) 55%, 
        transparent 60%
    );
    background-size: 200% 200%;
    border-radius: 12px;
    z-index: -1;
    animation: legendaryShimmer 2s linear infinite;
}

@keyframes legendaryShimmer {
    0% { background-position: -100% -100%; }
    100% { background-position: 200% 200%; }
}

@keyframes rareBorderGlow {
    0%, 100% { box-shadow: 0 0 12px var(--rarity-rare-glow), inset 0 0 10px rgba(59, 130, 246, 0.15); }
    50% { box-shadow: 0 0 20px var(--rarity-rare-glow), inset 0 0 15px rgba(59, 130, 246, 0.25); }
}

@keyframes epicBorderGlow {
    0%, 100% { box-shadow: 0 0 15px var(--rarity-epic-glow), inset 0 0 12px rgba(168, 85, 247, 0.2); }
    50% { box-shadow: 0 0 25px var(--rarity-epic-glow), inset 0 0 18px rgba(168, 85, 247, 0.3); }
}

@keyframes legendaryBorderGlow {
    0%, 100% { 
        box-shadow: 0 0 20px var(--rarity-legendary-glow), inset 0 0 15px rgba(245, 158, 11, 0.25);
        border-color: #F59E0B;
    }
    50% { 
        box-shadow: 0 0 35px var(--rarity-legendary-glow), 0 0 50px rgba(255, 215, 0, 0.3), inset 0 0 20px rgba(245, 158, 11, 0.35);
        border-color: #FBBF24;
    }
}

/* Accessory buttons with rarity */
.loadout-container .accessory-btn[data-rarity="common"] {
    border: 2px solid rgba(156, 163, 175, 0.4);
}
.loadout-container .accessory-btn[data-rarity="uncommon"] {
    border: 2px solid var(--rarity-uncommon);
    box-shadow: 0 0 6px var(--rarity-uncommon-glow);
}
.loadout-container .accessory-btn[data-rarity="rare"] {
    border: 2px solid var(--rarity-rare);
    box-shadow: 0 0 10px var(--rarity-rare-glow);
    animation: rareBorderGlow 2.5s ease-in-out infinite;
}
.loadout-container .accessory-btn[data-rarity="epic"] {
    border: 2px solid var(--rarity-epic);
    box-shadow: 0 0 12px var(--rarity-epic-glow);
    animation: epicBorderGlow 2s ease-in-out infinite;
}
.loadout-container .accessory-btn[data-rarity="legendary"] {
    border: 2px solid var(--rarity-legendary);
    box-shadow: 0 0 15px var(--rarity-legendary-glow);
    animation: legendaryBorderGlow 1.5s ease-in-out infinite;
    position: relative;
}

/* Rarity label under item name */
.rarity-label {
    font-size: 0.65em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.rarity-label.common { color: var(--rarity-common); }
.rarity-label.uncommon { color: var(--rarity-uncommon); }
.rarity-label.rare { color: var(--rarity-rare); }
.rarity-label.epic { color: var(--rarity-epic); }
.rarity-label.legendary { color: var(--rarity-legendary); text-shadow: 0 0 8px var(--rarity-legendary-glow); }

/* Hover enhancement for rarity items */
.loadout-container .color-btn[data-rarity="legendary"]:hover:not(.locked),
.loadout-container .accessory-btn[data-rarity="legendary"]:hover:not(.locked) {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 0 40px var(--rarity-legendary-glow), 0 8px 25px rgba(0,0,0,0.4);
}

.loadout-container .color-btn[data-rarity="epic"]:hover:not(.locked),
.loadout-container .accessory-btn[data-rarity="epic"]:hover:not(.locked) {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 0 30px var(--rarity-epic-glow), 0 6px 20px rgba(0,0,0,0.3);
}

.loadout-container .color-btn[data-rarity="rare"]:hover:not(.locked),
.loadout-container .accessory-btn[data-rarity="rare"]:hover:not(.locked) {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 0 25px var(--rarity-rare-glow), 0 5px 15px rgba(0,0,0,0.3);
}

/* Accessory Options in Loadout */
.loadout-container .accessory-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.loadout-container .accessory-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: rgba(0, 30, 0, 0.6);
    border: 2px solid rgba(50, 205, 50, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.loadout-container .accessory-btn:hover:not(.locked) {
    background: rgba(50, 205, 50, 0.15);
    border-color: rgba(50, 205, 50, 0.4);
    transform: translateY(-2px);
}

.loadout-container .accessory-btn.selected {
    background: rgba(50, 205, 50, 0.25);
    border-color: #7CFC00;
    box-shadow: 0 0 15px rgba(50, 205, 50, 0.4);
}

.loadout-container .accessory-btn.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.loadout-container .accessory-btn.locked:hover {
    transform: none;
    background: rgba(0, 30, 0, 0.6);
    border-color: rgba(50, 205, 50, 0.2);
}

.loadout-container .accessory-icon {
    font-size: 1.8em;
    margin-bottom: 5px;
}

.loadout-container .accessory-name {
    font-size: 0.75em;
    color: #90EE90;
    text-align: center;
}

.loadout-container .accessory-btn.locked .accessory-name {
    color: #666;
}

/* Loadout Preview (Center) - Enhanced 3D Preview */
.loadout-preview {
    background: linear-gradient(180deg, rgba(50, 205, 50, 0.05) 0%, rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid rgba(50, 205, 50, 0.3);
    border-radius: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 450px;
}

.loadout-preview canvas,
#loadout-preview-canvas {
    flex: 1;
    width: 100%;
    min-height: 380px;
    cursor: grab;
    touch-action: none;
}

.loadout-preview canvas:active,
#loadout-preview-canvas:active {
    cursor: grabbing;
}

/* Preview info overlay */
.preview-info {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 5;
}

.preview-item-name {
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 15px;
    border-radius: 8px;
    border-left: 3px solid #32CD32;
}

.preview-item-name .item-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.preview-item-name .item-rarity {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.preview-item-name .item-rarity.common { color: var(--rarity-common); }
.preview-item-name .item-rarity.uncommon { color: var(--rarity-uncommon); }
.preview-item-name .item-rarity.rare { color: var(--rarity-rare); }
.preview-item-name .item-rarity.epic { color: var(--rarity-epic); }
.preview-item-name .item-rarity.legendary { 
    color: var(--rarity-legendary); 
    text-shadow: 0 0 10px var(--rarity-legendary-glow);
    animation: legendaryTextPulse 1.5s ease-in-out infinite;
}

@keyframes legendaryTextPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; text-shadow: 0 0 15px var(--rarity-legendary-glow); }
}

/* Preview controls bar */
.preview-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(50, 205, 50, 0.2);
}

.preview-rotate {
    width: 42px; 
    height: 42px;
    background: rgba(50, 205, 50, 0.15);
    border: 1px solid rgba(50, 205, 50, 0.4);
    border-radius: 50%;
    color: #32CD32;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-rotate:hover {
    background: rgba(50, 205, 50, 0.3);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(50, 205, 50, 0.4);
}

.preview-rotate:active {
    transform: scale(0.95);
}

/* Zoom controls */
.preview-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    border-left: 1px solid rgba(50, 205, 50, 0.2);
    border-right: 1px solid rgba(50, 205, 50, 0.2);
}

.preview-zoom-btn {
    width: 32px;
    height: 32px;
    background: rgba(50, 205, 50, 0.1);
    border: 1px solid rgba(50, 205, 50, 0.3);
    border-radius: 6px;
    color: #90EE90;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preview-zoom-btn:hover {
    background: rgba(50, 205, 50, 0.25);
    color: #32CD32;
}

.preview-zoom-label {
    font-size: 0.75em;
    color: #666;
    min-width: 40px;
    text-align: center;
}

/* Reset view button */
.preview-reset {
    padding: 8px 16px;
    background: rgba(50, 205, 50, 0.1);
    border: 1px solid rgba(50, 205, 50, 0.3);
    border-radius: 6px;
    color: #90EE90;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preview-reset:hover {
    background: rgba(50, 205, 50, 0.25);
    color: #32CD32;
}

/* Hint text */
.preview-hint {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7em;
    color: rgba(144, 238, 144, 0.5);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.loadout-preview:hover .preview-hint {
    opacity: 0;
}

/* Weapon Skins Grid */
.weapon-skins-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.weapon-skin-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: linear-gradient(145deg, rgba(20, 40, 20, 0.8), rgba(10, 25, 10, 0.9));
    border: 1px solid rgba(50, 205, 50, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.weapon-skin-slot::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(50, 205, 50, 0.1), transparent);
    transition: left 0.5s ease;
}

.weapon-skin-slot:hover::before {
    left: 100%;
}

.weapon-skin-slot:hover {
    background: linear-gradient(145deg, rgba(30, 60, 30, 0.9), rgba(20, 45, 20, 0.95));
    border-color: rgba(50, 205, 50, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(50, 205, 50, 0.15);
}

.weapon-skin-slot.has-skin {
    border-color: rgba(50, 205, 50, 0.3);
}

.weapon-skin-slot.has-skin::after {
    content: '\2714';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    background: #32CD32;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #000;
    font-weight: bold;
}

.weapon-preview-mini {
    width: 120px;
    height: 80px;
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(20, 40, 20, 0.5));
}

.weapon-preview-mini canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.weapon-info {
    text-align: center;
    margin-bottom: 6px;
}

.weapon-skin-slot .weapon-name {
    font-weight: 700;
    color: #fff;
    font-size: 0.85em;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.weapon-skin-slot .skin-name {
    font-size: 0.7em;
    color: #32CD32;
    font-weight: 600;
    margin-top: 2px;
    transition: color 0.3s ease;
}

.weapon-skin-slot .skin-name.default {
    color: #666;
}

.weapon-colors {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.weapon-colors .color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.weapon-colors .color-dot.main {
    background: #32CD32;
}

.weapon-colors .color-dot.accent {
    background: #1E90FF;
}

/* Rarity borders */
.weapon-skin-slot.rarity-common { border-color: rgba(180, 180, 180, 0.3); }
.weapon-skin-slot.rarity-uncommon { border-color: rgba(50, 205, 50, 0.4); }
.weapon-skin-slot.rarity-rare { border-color: rgba(30, 144, 255, 0.5); }
.weapon-skin-slot.rarity-epic { border-color: rgba(138, 43, 226, 0.5); }
.weapon-skin-slot.rarity-legendary { border-color: rgba(255, 215, 0, 0.5); }
.weapon-skin-slot.rarity-mythic { border-color: rgba(255, 69, 0, 0.6); }

.weapon-skin-slot.rarity-legendary::before,
.weapon-skin-slot.rarity-mythic::before {
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
}

/* Weapon Skin Selector Modal */
.weapon-selector-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.weapon-selector-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.weapon-selector-content {
    position: relative;
    background: linear-gradient(145deg, rgba(20, 40, 20, 0.98), rgba(10, 25, 10, 0.99));
    border: 2px solid rgba(50, 205, 50, 0.3);
    border-radius: 16px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(50, 205, 50, 0.1);
}

.weapon-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(50, 205, 50, 0.2);
}

.weapon-selector-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.3em;
    color: #32CD32;
    letter-spacing: 2px;
}

.weapon-selector-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5em;
    cursor: pointer;
    transition: color 0.2s;
    padding: 5px;
}

.weapon-selector-close:hover {
    color: #ff4444;
}

.weapon-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.weapon-selector-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.weapon-selector-item:hover {
    background: rgba(50, 205, 50, 0.1);
    border-color: rgba(50, 205, 50, 0.4);
}

.weapon-selector-item.equipped {
    border-color: #32CD32;
    background: rgba(50, 205, 50, 0.15);
}

.weapon-selector-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.weapon-selector-item .skin-preview {
    width: 100px;
    height: 60px;
    border-radius: 6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weapon-selector-item .skin-info {
    text-align: center;
}

.weapon-selector-item .skin-item-name {
    font-weight: 600;
    color: #fff;
    font-size: 0.85em;
}

.weapon-selector-item .skin-item-rarity {
    font-size: 0.7em;
    text-transform: uppercase;
    margin-top: 3px;
}

/* Rarity colors for selector */
.weapon-selector-item.rarity-common .skin-item-rarity { color: #b4b4b4; }
.weapon-selector-item.rarity-uncommon .skin-item-rarity { color: #32CD32; }
.weapon-selector-item.rarity-rare .skin-item-rarity { color: #1E90FF; }
.weapon-selector-item.rarity-epic .skin-item-rarity { color: #8A2BE2; }
.weapon-selector-item.rarity-legendary .skin-item-rarity { color: #FFD700; }
.weapon-selector-item.rarity-mythic .skin-item-rarity { color: #FF4500; }

/* ============================================
   SHOP PANEL
   ============================================ */
.shop-container {
    max-width: 1200px;
    margin: 0 auto;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-header h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1.8em;
    color: #32CD32;
    letter-spacing: 3px;
    margin: 0;
}

.shop-currency {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 10px 20px;
    border-radius: 25px;
}

.shop-currency .currency-amount {
    font-family: 'Orbitron', monospace;
    font-size: 1.2em;
    font-weight: 700;
    color: #FFD700;
}

.buy-coins-btn {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border: none;
    color: #000;
    padding: 8px 15px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.buy-coins-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* Shop Sections */
.shop-section {
    margin-bottom: 30px;
}

.shop-section-title {
    font-family: 'Orbitron', monospace;
    font-size: 1em;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.shop-section-title .timer {
    font-size: 0.85em;
    color: #ff9500;
    background: rgba(255, 150, 0, 0.15);
    padding: 4px 12px;
    border-radius: 12px;
}

/* Featured Items */
.shop-featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.shop-item {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.shop-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.shop-item:hover::before {
    opacity: 1;
}

.shop-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.shop-item.featured {
    padding: 25px;
}

.shop-item.legendary {
    border-color: rgba(255, 215, 0, 0.3);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.shop-item.legendary:hover {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.2);
}

.shop-item.epic {
    border-color: rgba(153, 50, 204, 0.3);
    background: linear-gradient(180deg, rgba(153, 50, 204, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.shop-item.epic:hover {
    border-color: rgba(153, 50, 204, 0.6);
    box-shadow: 0 10px 40px rgba(153, 50, 204, 0.2);
}

.shop-item.rare {
    border-color: rgba(65, 105, 225, 0.3);
    background: linear-gradient(180deg, rgba(65, 105, 225, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.item-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}

.shop-item.legendary .item-badge {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
}

.shop-item.epic .item-badge {
    background: linear-gradient(135deg, #9932CC, #6B238E);
}

.shop-item.rare .item-badge {
    background: linear-gradient(135deg, #4169E1, #1E90FF);
}

.item-preview {
    font-size: 3.5em;
    margin: 15px 0;
}

.shop-item.featured .item-preview {
    font-size: 4em;
    margin: 20px 0;
}

.item-name {
    font-weight: 600;
    color: #fff;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.item-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.price-icon {
    font-size: 1.1em;
}

.price-value {
    font-family: 'Orbitron', monospace;
    font-size: 1.2em;
    font-weight: 700;
    color: #FFD700;
}

.price-old {
    font-size: 0.9em;
    color: #666;
    text-decoration: line-through;
    margin-left: 5px;
}

.buy-btn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #32CD32, #228B22);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.buy-btn:hover {
    background: linear-gradient(135deg, #7CFC00, #32CD32);
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(50, 205, 50, 0.4);
}

/* Shop Grid (smaller items) */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.shop-grid .shop-item {
    padding: 15px;
}

.shop-grid .item-preview {
    font-size: 2.5em;
    margin: 10px 0;
}

.shop-grid .item-name {
    font-size: 0.95em;
}

.shop-grid .item-price {
    margin-bottom: 0;
}

/* ============================================
   BATTLE PASS PANEL
   ============================================ */
.battlepass-container {
    max-width: 1200px;
    margin: 0 auto;
}

.bp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px 25px;
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.15) 0%, rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid rgba(50, 205, 50, 0.3);
    border-radius: 15px;
}

.bp-season {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bp-season-icon {
    font-size: 2em;
    animation: bpIconFloat 3s ease-in-out infinite;
}

@keyframes bpIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.bp-season-name {
    font-family: 'Orbitron', monospace;
    font-size: 1.4em;
    font-weight: 700;
    color: #7CFC00;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(50, 205, 50, 0.5);
}

.bp-timer {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888;
    font-size: 0.95em;
}

.bp-countdown {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    color: #ff9500;
    padding: 8px 15px;
    background: rgba(255, 150, 0, 0.15);
    border: 1px solid rgba(255, 150, 0, 0.3);
    border-radius: 20px;
}

/* Progress Container */
.bp-progress-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.bp-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.bp-level-num {
    font-family: 'Orbitron', monospace;
    font-size: 2.2em;
    font-weight: 900;
    color: #32CD32;
    text-shadow: 0 0 15px rgba(50, 205, 50, 0.6);
}

.bp-level.next .bp-level-num {
    color: #444;
    text-shadow: none;
}

.bp-level-label {
    font-size: 0.7em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.bp-progress-bar {
    flex: 1;
    height: 25px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #228B22, #32CD32, #7CFC00);
    border-radius: 15px;
    position: relative;
    transition: width 0.5s ease;
    box-shadow: 0 0 20px rgba(50, 205, 50, 0.5);
}

.bp-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.bp-xp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', monospace;
    font-size: 0.8em;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Battle Pass Track */
.bp-track {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    overflow-x: auto;
    margin-bottom: 25px;
}

.bp-track::-webkit-scrollbar {
    height: 8px;
}

.bp-track::-webkit-scrollbar-thumb {
    background: rgba(50, 205, 50, 0.5);
    border-radius: 4px;
}

.bp-track::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.bp-reward {
    min-width: 120px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.bp-reward:hover:not(.locked) {
    transform: translateY(-5px);
    border-color: rgba(50, 205, 50, 0.4);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.bp-reward.claimed {
    background: rgba(50, 205, 50, 0.15);
    border-color: rgba(50, 205, 50, 0.4);
}

.bp-reward.current {
    background: linear-gradient(180deg, rgba(50, 205, 50, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%);
    border-color: #32CD32;
    box-shadow: 0 0 25px rgba(50, 205, 50, 0.3);
    animation: currentRewardPulse 2s ease-in-out infinite;
}

@keyframes currentRewardPulse {
    0%, 100% { box-shadow: 0 0 25px rgba(50, 205, 50, 0.3); }
    50% { box-shadow: 0 0 35px rgba(50, 205, 50, 0.5); }
}

.bp-reward.locked {
    opacity: 0.5;
    filter: grayscale(30%);
}

.bp-reward.premium {
    border-color: rgba(255, 215, 0, 0.3);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.bp-reward.premium.locked {
    opacity: 0.6;
}

.bp-reward-level {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #888;
    padding: 3px 12px;
    border-radius: 10px;
    font-family: 'Orbitron', monospace;
    font-size: 0.75em;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bp-reward.claimed .bp-reward-level {
    background: rgba(50, 205, 50, 0.8);
    color: #fff;
    border-color: #32CD32;
}

.bp-reward.current .bp-reward-level {
    background: #32CD32;
    color: #000;
    border-color: #7CFC00;
}

.bp-premium-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.9em;
}

.bp-reward-icon {
    font-size: 2.5em;
    margin: 15px 0 10px;
}

.bp-reward-name {
    font-size: 0.85em;
    color: #aaa;
}

.bp-reward.claimed .bp-reward-name {
    color: #7CFC00;
}

.bp-claimed-check {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 22px; height: 22px;
    background: #32CD32;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: #000;
    font-weight: 700;
}

/* Upgrade Button */
.bp-upgrade {
    display: flex;
    justify-content: center;
}

.bp-upgrade-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 40px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 25px rgba(255, 215, 0, 0.3);
}

.bp-upgrade-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.5);
}

.upgrade-icon {
    font-size: 1.5em;
}

.upgrade-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.1em;
    font-weight: 700;
    color: #000;
    letter-spacing: 2px;
}

.upgrade-price {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    color: #000;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px 12px;
    border-radius: 15px;
}

/* ============================================
   STATS PANEL
   ============================================ */
.stats-container {
    max-width: 1000px;
    margin: 0 auto;
}

.stats-header {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.stats-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 25px 50px;
    background: linear-gradient(180deg, rgba(50, 205, 50, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid rgba(50, 205, 50, 0.3);
    border-radius: 20px;
}

.stats-avatar {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, #32CD32, #228B22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em;
    box-shadow: 0 0 30px rgba(50, 205, 50, 0.4);
}

.stats-name {
    font-family: 'Orbitron', monospace;
    font-size: 1.5em;
    font-weight: 700;
    color: #7CFC00;
}

.stats-rank {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(205, 127, 50, 0.2);
    border: 1px solid rgba(205, 127, 50, 0.4);
    border-radius: 20px;
}

.rank-icon {
    font-size: 1.2em;
}

.rank-name {
    font-weight: 600;
    color: #CD7F32;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(50, 205, 50, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-card-icon {
    font-size: 2em;
    margin-bottom: 10px;
}

.stat-card-value {
    font-family: 'Orbitron', monospace;
    font-size: 2.2em;
    font-weight: 900;
    color: #32CD32;
    text-shadow: 0 0 15px rgba(50, 205, 50, 0.4);
    margin-bottom: 5px;
}

.stat-card-label {
    font-size: 0.9em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Stats Section */
.stats-section {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 25px;
}

.stats-section h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1em;
    color: #32CD32;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.weapon-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.weapon-stat-row {
    display: grid;
    grid-template-columns: 100px 1fr 80px;
    align-items: center;
    gap: 15px;
}

.weapon-stat-row .weapon-name {
    font-weight: 600;
    color: #fff;
}

.weapon-bar {
    height: 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    overflow: hidden;
}

.weapon-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #228B22, #32CD32);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.weapon-kills {
    font-family: 'Orbitron', monospace;
    font-size: 0.85em;
    color: #7CFC00;
    text-align: right;
}

/* ============================================
   PARTIE 2K : SETTINGS PANEL (IN MAIN MENU)
   ============================================ */

.settings-container {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    overflow: hidden;
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-tab {
    flex: 1;
    padding: 15px 20px;
    background: transparent;
    border: none;
    color: #666;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.settings-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
}

.settings-tab.active {
    color: #32CD32;
    background: rgba(50, 205, 50, 0.1);
    border-bottom-color: #32CD32;
}

/* Settings Content */
.settings-content {
    padding: 25px 30px;
    max-height: 55vh;
    overflow-y: auto;
}

/* Custom Scrollbar for Settings */
.settings-content::-webkit-scrollbar {
    width: 8px;
}

.settings-content::-webkit-scrollbar-thumb {
    background: rgba(50, 205, 50, 0.4);
    border-radius: 4px;
}

.settings-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

/* Settings Panel (Individual Tab Content) */
.settings-panel {
    display: none;
    animation: settingsFadeIn 0.25s ease;
}

.settings-panel.active {
    display: block;
}

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

/* Setting Row */
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-row:last-child {
    border-bottom: none;
}

.setting-row label:first-child {
    color: #ddd;
    font-size: 1em;
    font-weight: 500;
}

/* Setting Control (Slider + Value) */
.setting-control {
    display: flex;
    align-items: center;
    gap: 15px;
}

.setting-control input[type="range"] {
    width: 180px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.setting-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #32CD32, #228B22);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(50, 205, 50, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.setting-control input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 15px rgba(50, 205, 50, 0.6);
}

.setting-control input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #32CD32, #228B22);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.setting-control .setting-value {
    min-width: 55px;
    text-align: right;
    font-family: 'Orbitron', monospace;
    font-size: 0.95em;
    color: #7CFC00;
}

/* Setting Select (Dropdown) */
.setting-select {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(50, 205, 50, 0.3);
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1em;
    cursor: pointer;
    outline: none;
    min-width: 150px;
    transition: all 0.2s ease;
}

.setting-select:hover {
    border-color: rgba(50, 205, 50, 0.5);
}

.setting-select:focus {
    border-color: #32CD32;
    box-shadow: 0 0 15px rgba(50, 205, 50, 0.2);
}

.setting-select option {
    background: #1a1d21;
    color: #fff;
    padding: 10px;
}

/* Toggle Switch (New Style for Menu Settings) */
.toggle-switch {
    position: relative;
    width: 55px;
    height: 28px;
    cursor: pointer;
    display: inline-block;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider-new {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.toggle-slider-new::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    bottom: 2px;
    background: #666;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.toggle-switch input:checked + .toggle-slider-new {
    background: rgba(50, 205, 50, 0.3);
    border-color: rgba(50, 205, 50, 0.5);
}

.toggle-switch input:checked + .toggle-slider-new::before {
    transform: translateX(26px);
    background: linear-gradient(135deg, #32CD32, #228B22);
    box-shadow: 0 2px 10px rgba(50, 205, 50, 0.5);
}

/* Crosshair Preview Box (In Settings) */
.crosshair-preview-box {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

#menu-crosshair-preview {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #2a2d32, #1a1d21);
    border: 1px solid rgba(50, 205, 50, 0.2);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#menu-crosshair-preview .ch-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00ff00;
    border-radius: 50%;
}

#menu-crosshair-preview .ch-line {
    position: absolute;
    background: #00ff00;
}

#menu-crosshair-preview .ch-line.top,
#menu-crosshair-preview .ch-line.bottom {
    width: 2px;
    height: 10px;
}

#menu-crosshair-preview .ch-line.top {
    top: calc(50% - 20px);
    left: calc(50% - 1px);
}

#menu-crosshair-preview .ch-line.bottom {
    bottom: calc(50% - 20px);
    left: calc(50% - 1px);
}

#menu-crosshair-preview .ch-line.left,
#menu-crosshair-preview .ch-line.right {
    width: 10px;
    height: 2px;
}

#menu-crosshair-preview .ch-line.left {
    left: calc(50% - 20px);
    top: calc(50% - 1px);
}

#menu-crosshair-preview .ch-line.right {
    right: calc(50% - 20px);
    top: calc(50% - 1px);
}

/* Crosshair Color Buttons (In Settings) */
.crosshair-colors {
    display: flex;
    gap: 10px;
}

.ch-color {
    width: 35px;
    height: 35px;
    border: 3px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ch-color:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.ch-color.selected {
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* ============================================
   PLAY RIGHT PANEL (Player Card & Map Select)
   ============================================ */

.play-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Player Card */
.player-card {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(50, 205, 50, 0.2);
    border-radius: 15px;
    padding: 20px;
}

.player-card-header {
    margin-bottom: 15px;
}

.player-card #nickname-input {
    width: 100%;
    padding: 12px 18px;
    font-size: 1.1em;
    font-family: 'Orbitron', monospace;
    background: rgba(0, 30, 0, 0.8);
    border: 2px solid rgba(50, 205, 50, 0.4);
    border-radius: 10px;
    color: #7CFC00;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
}

.player-card #nickname-input:focus {
    border-color: #32CD32;
    box-shadow: 0 0 25px rgba(50, 205, 50, 0.3);
    transform: scale(1.02);
}

.player-card #nickname-input::placeholder {
    color: #4a7c4a;
}

.player-stats-mini {
    display: flex;
    justify-content: space-around;
    gap: 10px;
}

.player-stats-mini .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    flex: 1;
}

.player-stats-mini .stat-value {
    font-family: 'Orbitron', monospace;
    font-size: 1.4em;
    font-weight: 700;
    color: #32CD32;
}

.player-stats-mini .stat-label {
    font-size: 0.75em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 3px;
}

/* Map Selection Container */
.map-select-container {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 15px;
}

.section-label {
    font-family: 'Orbitron', monospace;
    font-size: 0.8em;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.map-carousel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.map-card:hover {
    background: rgba(50, 205, 50, 0.1);
    border-color: rgba(50, 205, 50, 0.3);
    transform: translateX(5px);
}

.map-card.selected {
    background: rgba(50, 205, 50, 0.15);
    border-color: #32CD32;
    box-shadow: 0 0 20px rgba(50, 205, 50, 0.2);
}

.map-preview {
    width: 60px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
}

.map-info {
    display: flex;
    flex-direction: column;
}

.map-info .map-name {
    font-weight: 600;
    color: #fff;
    font-size: 0.95em;
}

.map-info .map-type {
    font-size: 0.75em;
    color: #666;
}

.map-card.selected .map-info .map-name {
    color: #7CFC00;
}

/* Region Select */
.region-select {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 15px;
}

.styled-select {
    width: 100%;
    padding: 12px 15px;
    background: rgba(0, 30, 0, 0.6);
    border: 1px solid rgba(50, 205, 50, 0.3);
    border-radius: 8px;
    color: #90EE90;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1em;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.styled-select:hover {
    border-color: rgba(50, 205, 50, 0.5);
}

.styled-select:focus {
    border-color: #32CD32;
    box-shadow: 0 0 15px rgba(50, 205, 50, 0.2);
}

.styled-select option {
    background: #1a2810;
    color: #90EE90;
    padding: 10px;
}


/* ============================================
   PARTIE 2L : RESPONSIVE DESIGN
   ============================================ */

/* ===== LARGE DESKTOP (1400px+) ===== */
@media (min-width: 1400px) {
    .play-container {
        grid-template-columns: 300px 1fr 350px;
        gap: 30px;
    }
    
    .menu-content {
        padding: 25px 40px;
    }
}

/* ===== STANDARD DESKTOP (1200px - 1399px) ===== */
@media (max-width: 1399px) {
    .play-container {
        grid-template-columns: 260px 1fr 300px;
        gap: 20px;
    }
    
    .loadout-container {
        grid-template-columns: 1fr 280px 1fr;
        gap: 20px;
    }
}

/* ===== SMALL DESKTOP / LARGE TABLET (992px - 1199px) ===== */
@media (max-width: 1199px) {
    .play-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    
    .play-left {
        grid-column: 1;
        grid-row: 1;
    }
    
    .play-center {
        grid-column: 2;
        grid-row: 1 / 3;
    }
    
    .play-right {
        grid-column: 1;
        grid-row: 2;
    }
    
    .loadout-container {
        grid-template-columns: 1fr 250px 1fr;
        gap: 15px;
    }
    
    .shop-featured {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .shop-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== TABLET (768px - 991px) ===== */
@media (max-width: 991px) {
    /* Top Bar */
    .menu-topbar {
        padding: 12px 20px;
    }
    
    .logo-text {
        font-size: 1.4em;
    }
    
    .user-currency,
    .user-profile {
        padding: 6px 12px;
    }
    
    /* Navigation */
    .menu-nav {
        padding: 10px 15px;
        gap: 3px;
        overflow-x: auto;
    }
    
    .nav-tab {
        padding: 10px 15px;
        min-width: auto;
    }
    
    .nav-text {
        font-size: 0.75em;
    }
    
    /* Play Container - Stack vertically */
    .play-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
    }
    
    .play-left {
        grid-column: 1;
        grid-row: auto;
        max-width: 350px;
        margin: 0 auto;
    }
    
    .play-center {
        grid-column: 1;
        grid-row: auto;
    }
    
    .play-right {
        grid-column: 1;
        grid-row: auto;
    }
    
    .play-modes {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Loadout - Stack */
    .loadout-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .loadout-preview {
        order: -1;
        max-height: 300px;
    }
    
    /* Shop */
    .shop-featured {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Battle Pass */
    .bp-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .bp-track {
        padding: 15px;
    }
    
    .bp-reward {
        min-width: 100px;
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Settings */
    .settings-container {
        max-width: 100%;
    }
    
    .settings-tabs {
        flex-wrap: wrap;
    }
    
    .settings-tab {
        flex: 1 1 45%;
        padding: 12px 10px;
        font-size: 0.9em;
    }
    
    /* Footer */
    .menu-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 15px;
    }
    
    .footer-left,
    .footer-center,
    .footer-right {
        justify-content: center;
    }
}

/* ===== MOBILE LANDSCAPE / SMALL TABLET (576px - 767px) ===== */
@media (max-width: 767px) {
    /* Top Bar */
    .menu-topbar {
        flex-direction: column;
        gap: 12px;
        padding: 10px 15px;
    }
    
    .menu-logo {
        justify-content: center;
    }
    
    .logo-text {
        font-size: 1.3em;
    }
    
    .menu-user-info {
        width: 100%;
        justify-content: center;
    }
    
    /* Navigation - Horizontal scroll */
    .menu-nav {
        justify-content: flex-start;
        padding: 8px 10px;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-tab {
        flex-shrink: 0;
        padding: 8px 12px;
    }
    
    .nav-icon {
        font-size: 1.2em;
    }
    
    .nav-text {
        display: none;
    }
    
    /* Content */
    .menu-content {
        padding: 15px;
    }
    
    /* Play */
    .character-showcase {
        min-height: 280px;
    }
    
    .play-modes {
        grid-template-columns: 1fr;
    }
    
    .mode-card {
        padding: 15px;
    }
    
    .main-play-btn {
        padding: 30px 20px;
    }
    
    .main-play-btn .play-card-title {
        font-size: 1.6em;
    }
    
    .main-play-btn .play-card-icon {
        font-size: 3em;
    }
    
    /* Shop */
    .shop-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .shop-header h2 {
        text-align: center;
    }
    
    .shop-currency {
        justify-content: center;
    }
    
    .shop-featured {
        grid-template-columns: 1fr;
    }
    
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    /* Battle Pass */
    .bp-season-name {
        font-size: 1.1em;
    }
    
    .bp-progress-container {
        flex-direction: column;
        gap: 15px;
    }
    
    .bp-progress-bar {
        width: 100%;
    }
    
    .bp-level {
        flex-direction: row;
        gap: 10px;
    }
    
    .bp-upgrade-btn {
        flex-direction: column;
        padding: 15px 30px;
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .stat-card {
        padding: 18px;
    }
    
    .stat-card-value {
        font-size: 1.8em;
    }
    
    /* Settings */
    .settings-tabs {
        flex-wrap: wrap;
    }
    
    .settings-tab {
        flex: 1 1 48%;
        padding: 10px;
        font-size: 0.85em;
    }
    
    .setting-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .setting-control {
        width: 100%;
    }
    
    .setting-control input[type="range"] {
        flex: 1;
        width: 100%;
    }
    
    .crosshair-colors {
        flex-wrap: wrap;
    }
}

/* ===== MOBILE PORTRAIT (< 576px) ===== */
@media (max-width: 575px) {
    /* Top Bar */
    .menu-topbar {
        padding: 8px 12px;
    }
    
    .logo-icon {
        font-size: 1.8em;
    }
    
    .logo-text {
        font-size: 1.1em;
        letter-spacing: 1px;
    }
    
    .user-currency,
    .user-profile {
        padding: 5px 10px;
        font-size: 0.9em;
    }
    
    .user-level {
        display: none;
    }
    
    /* Navigation - Icons only */
    .menu-nav {
        padding: 5px 8px;
    }
    
    .nav-tab {
        padding: 8px 10px;
    }
    
    .nav-icon {
        font-size: 1.1em;
    }
    
    /* Content */
    .menu-content {
        padding: 12px;
    }
    
    /* Play */
    .play-left {
        max-width: 100%;
    }
    
    .character-showcase {
        min-height: 220px;
    }
    
    .character-name-tag {
        font-size: 0.75em;
        padding: 5px 12px;
    }
    
    .main-play-btn {
        padding: 25px 15px;
    }
    
    .main-play-btn .play-card-title {
        font-size: 1.4em;
        letter-spacing: 2px;
    }
    
    .main-play-btn .play-card-icon {
        font-size: 2.5em;
    }
    
    .player-stats-mini {
        flex-wrap: wrap;
    }
    
    .player-stats-mini .stat-item {
        flex: 1 1 45%;
    }
    
    /* Loadout */
    .loadout-container .color-options {
        gap: 8px;
    }
    
    .loadout-container .color-btn {
        width: 38px;
        height: 38px;
    }
    
    .loadout-container .accessory-options {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .loadout-container .accessory-btn {
        padding: 10px 5px;
    }
    
    .loadout-container .accessory-icon {
        font-size: 1.5em;
    }
    
    .loadout-container .accessory-name {
        font-size: 0.65em;
    }
    
    /* Shop */
    .shop-item {
        padding: 15px 12px;
    }
    
    .shop-item.featured {
        padding: 18px 15px;
    }
    
    .item-preview {
        font-size: 2.5em !important;
    }
    
    .shop-featured .item-preview {
        font-size: 3em !important;
    }
    
    .shop-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    /* Battle Pass */
    .bp-header {
        padding: 15px;
    }
    
    .bp-season-icon {
        font-size: 1.5em;
    }
    
    .bp-season-name {
        font-size: 0.95em;
    }
    
    .bp-track {
        gap: 10px;
    }
    
    .bp-reward {
        min-width: 85px;
        padding: 12px 10px;
    }
    
    .bp-reward-icon {
        font-size: 2em;
    }
    
    .bp-reward-name {
        font-size: 0.75em;
    }
    
    /* Stats */
    .stats-player {
        padding: 20px 30px;
    }
    
    .stats-avatar {
        width: 60px;
        height: 60px;
        font-size: 2em;
    }
    
    .stats-name {
        font-size: 1.2em;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .stat-card {
        padding: 15px 10px;
    }
    
    .stat-card-icon {
        font-size: 1.5em;
    }
    
    .stat-card-value {
        font-size: 1.5em;
    }
    
    .stat-card-label {
        font-size: 0.75em;
    }
    
    .weapon-stat-row {
        grid-template-columns: 70px 1fr 60px;
        gap: 10px;
    }
    
    .weapon-stat-row .weapon-name {
        font-size: 0.85em;
    }
    
    .weapon-kills {
        font-size: 0.75em;
    }
    
    /* Settings */
    .settings-content {
        padding: 15px;
    }
    
    .setting-row label:first-child {
        font-size: 0.95em;
    }
    
    .crosshair-preview-box,
    #menu-crosshair-preview {
        width: 120px;
        height: 120px;
    }
    
    .ch-color {
        width: 30px;
        height: 30px;
    }
    
    /* Footer */
    .menu-footer {
        padding: 10px 12px;
    }
    
    .footer-link {
        font-size: 0.8em;
    }
    
    .version,
    .copyright {
        font-size: 0.7em;
    }
}

/* ===== VERY SMALL MOBILE (< 400px) ===== */
@media (max-width: 399px) {
    .logo-text {
        font-size: 1em;
    }
    
    .nav-tab {
        padding: 6px 8px;
    }
    
    .play-card-title {
        font-size: 0.9em;
    }
    
    .main-play-btn .play-card-title {
        font-size: 1.2em;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .shop-grid {
        grid-template-columns: 1fr;
    }
    
    .settings-tab {
        flex: 1 1 100%;
    }
}


/* ============================================
   PARTIE 2L (SUITE) : ANIMATIONS FINALES
   ============================================ */

/* ===== BUTTON HOVER EFFECTS ===== */
.play-card,
.mode-card,
.map-card,
.shop-item,
.bp-reward,
.stat-card {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== PAGE LOAD ANIMATION ===== */
@keyframes menuFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#main-menu {
    animation: menuFadeIn 0.5s ease-out;
}

/* ===== TAB SWITCH ANIMATION ===== */
@keyframes tabSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Panel animation handled by main .menu-panel transition */

/* ===== STAGGER ANIMATION FOR LISTS ===== */
@keyframes staggerFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shop-item,
.bp-reward,
.stat-card,
.map-card {
    animation: staggerFadeIn 0.4s ease-out both;
}

.shop-featured .shop-item:nth-child(1) { animation-delay: 0.05s; }
.shop-featured .shop-item:nth-child(2) { animation-delay: 0.1s; }
.shop-featured .shop-item:nth-child(3) { animation-delay: 0.15s; }

.shop-grid .shop-item:nth-child(1) { animation-delay: 0.1s; }
.shop-grid .shop-item:nth-child(2) { animation-delay: 0.15s; }
.shop-grid .shop-item:nth-child(3) { animation-delay: 0.2s; }
.shop-grid .shop-item:nth-child(4) { animation-delay: 0.25s; }

.stats-grid .stat-card:nth-child(1) { animation-delay: 0.05s; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 0.1s; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 0.15s; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 0.2s; }
.stats-grid .stat-card:nth-child(5) { animation-delay: 0.25s; }
.stats-grid .stat-card:nth-child(6) { animation-delay: 0.3s; }

.bp-track .bp-reward:nth-child(1) { animation-delay: 0.05s; }
.bp-track .bp-reward:nth-child(2) { animation-delay: 0.1s; }
.bp-track .bp-reward:nth-child(3) { animation-delay: 0.15s; }
.bp-track .bp-reward:nth-child(4) { animation-delay: 0.2s; }
.bp-track .bp-reward:nth-child(5) { animation-delay: 0.25s; }

/* ===== GLOW PULSE ANIMATION ===== */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(50, 205, 50, 0.3);
    }
    50% {
        box-shadow: 0 0 35px rgba(50, 205, 50, 0.5);
    }
}

.main-play-btn:hover {
    animation: glowPulse 1.5s ease-in-out infinite;
}

/* ===== SHAKE ANIMATION (for errors) ===== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* ===== BOUNCE ANIMATION ===== */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.card-badge.new {
    animation: bounce 2s ease infinite, badgePulse 1.5s ease-in-out infinite;
}

/* ===== SPIN ANIMATION (for loading) ===== */
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-spinner {
    animation: spinSlow 1.5s linear infinite;
}

/* ===== RIPPLE EFFECT ON CLICK ===== */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    animation: ripple 0.6s ease-out;
}

/* ===== TYPING CURSOR (for nickname input) ===== */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

#nickname-input:focus::after {
    content: '|';
    animation: blink 1s infinite;
}

/* ===== GRADIENT SHIFT ANIMATION ===== */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.main-play-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(270deg, 
        rgba(50, 205, 50, 0.2), 
        rgba(124, 252, 0, 0.2), 
        rgba(0, 100, 0, 0.2),
        rgba(50, 205, 50, 0.2)
    );
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.main-play-btn:hover::before {
    opacity: 1;
    animation: gradientShift 3s ease infinite;
}

/* ===== FLOAT ANIMATION (decorative) ===== */
@keyframes floatUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.play-card-icon {
    animation: floatUpDown 3s ease-in-out infinite;
}

.mode-card .play-card-icon {
    animation: floatUpDown 4s ease-in-out infinite;
}

.mode-card:nth-child(2) .play-card-icon {
    animation-delay: 0.5s;
}

.mode-card:nth-child(3) .play-card-icon {
    animation-delay: 1s;
}

/* ===== FOCUS VISIBLE FOR ACCESSIBILITY ===== */
.nav-tab:focus-visible,
.play-card:focus-visible,
.settings-tab:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #7CFC00;
    outline-offset: 2px;
}

/* ===== REDUCED MOTION (Accessibility) ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .menu-bg-particles,
    .menu-bg-cactus {
        animation: none;
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-tab {
        min-height: 48px;
    }
    
    .color-btn,
    .ch-color {
        min-width: 44px;
        min-height: 44px;
    }
    
    .toggle-switch {
        width: 60px;
        height: 32px;
    }
    
    /* Remove hover effects on touch */
    .play-card:hover,
    .shop-item:hover,
    .map-card:hover {
        transform: none;
    }
    
    /* Add active states instead */
    .play-card:active,
    .shop-item:active,
    .map-card:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ===== LANDSCAPE MOBILE SPECIFIC ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .menu-topbar {
        padding: 8px 15px;
    }
    
    .menu-nav {
        padding: 5px 10px;
    }
    
    .menu-content {
        padding: 10px 15px;
    }
    
    .menu-footer {
        padding: 8px 15px;
    }
    
    .play-container {
        grid-template-columns: 200px 1fr 220px;
    }
    
    .character-showcase {
        min-height: 180px;
    }
    
    .main-play-btn {
        padding: 20px 15px;
    }
}

/* ===== PRINT STYLES (for stats page) ===== */
@media print {
    #main-menu {
        background: #fff !important;
    }
    
    .menu-bg,
    .menu-topbar,
    .menu-nav,
    .menu-footer {
        display: none !important;
    }
    
    .stats-container {
        color: #000 !important;
    }
    
    .stat-card {
        border: 1px solid #ccc !important;
        background: #fff !important;
    }
    
    .stat-card-value {
        color: #000 !important;
    }
}
/* Notification icons */
.notif-icon .lucide-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.menu-notification.success .notif-icon .lucide-icon {
    color: #90EE90;
}

.menu-notification.error .notif-icon .lucide-icon {
    color: #FFB6C1;
}

.menu-notification.warning .notif-icon .lucide-icon {
    color: #FFD700;
}

.menu-notification.info .notif-icon .lucide-icon {
    color: #87CEEB;
}


/* ============================================
   P1 - ANIMATIONS & TRANSITIONS
   ============================================ */

/* Panel transitions are now in main .menu-panel styles above */

/* Enhanced hover effects for buttons */
.nav-tab {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.nav-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(50, 205, 50, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-tab:hover::before {
    left: 100%;
}

.nav-tab:hover {
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(50, 205, 50, 0.5);
}

.nav-tab.active {
    transform: translateY(-2px);
}

/* Play card hover effects */
.play-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.play-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 40px rgba(50, 205, 50, 0.3);
}

.main-play-btn:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 15px 50px rgba(50, 205, 50, 0.4);
}

/* Main play button pulse animation */
.main-play-btn::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(45deg, #32CD32, #228B22, #32CD32);
    z-index: -1;
    animation: playBtnPulse 2s ease-in-out infinite;
    opacity: 0.5;
}

@keyframes playBtnPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Color/Accessory button hover */
.color-btn:not(.locked):hover,
.accessory-btn:not(.locked):hover {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(50, 205, 50, 0.4);
}

.color-btn:not(.locked):active,
.accessory-btn:not(.locked):active {
    transform: scale(0.95);
}

/* Map card hover */
.map-card {
    transition: all 0.3s ease;
}

.map-card:hover {
    transform: scale(1.03);
    border-color: #32CD32;
    box-shadow: 0 5px 25px rgba(50, 205, 50, 0.3);
}

.map-card.selected {
    animation: mapSelected 0.3s ease;
}

@keyframes mapSelected {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Notification animations */
@keyframes notifSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes notifSlideOut {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

/* Stagger animation for list items */
.accessory-btn {
    animation: itemFadeIn 0.3s ease backwards;
}

.accessory-btn:nth-child(1) { animation-delay: 0.05s; }
.accessory-btn:nth-child(2) { animation-delay: 0.1s; }
.accessory-btn:nth-child(3) { animation-delay: 0.15s; }
.accessory-btn:nth-child(4) { animation-delay: 0.2s; }
.accessory-btn:nth-child(5) { animation-delay: 0.25s; }
.accessory-btn:nth-child(6) { animation-delay: 0.3s; }
.accessory-btn:nth-child(7) { animation-delay: 0.35s; }
.accessory-btn:nth-child(8) { animation-delay: 0.4s; }
.accessory-btn:nth-child(9) { animation-delay: 0.45s; }

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

/* Weapon skin card hover */
.weapon-skin-card {
    transition: all 0.3s ease;
}

.weapon-skin-card:hover {
    transform: translateY(-3px);
    border-color: rgba(50, 205, 50, 0.6);
    box-shadow: 0 5px 20px rgba(50, 205, 50, 0.2);
}

/* Quick Play online indicator pulse */
.online-dot {
    animation: onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(50, 205, 50, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(50, 205, 50, 0);
    }
}

/* Shop item hover */
.shop-item {
    transition: all 0.3s ease;
}

.shop-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Stats card hover */
.stat-card {
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(50, 205, 50, 0.5);
}

/* Settings slider animation */
input[type="range"] {
    transition: all 0.2s ease;
}

input[type="range"]:hover {
    filter: brightness(1.2);
}

/* Button press effect */
button:active {
    transform: scale(0.97);
}

/* Loading shimmer for content */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.loading-shimmer {
    background: linear-gradient(90deg, 
        rgba(50, 205, 50, 0.1) 25%, 
        rgba(50, 205, 50, 0.2) 50%, 
        rgba(50, 205, 50, 0.1) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ============================================
   P2 - PROFILE & STATS STYLES
   ============================================ */

/* ===== USER PROFILE IN TOP BAR ===== */
.user-profile-wrapper {
    position: relative;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(50, 205, 50, 0.1);
    border: 1px solid rgba(50, 205, 50, 0.3);
    border-radius: 12px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-profile:hover {
    background: rgba(50, 205, 50, 0.2);
    border-color: rgba(50, 205, 50, 0.5);
}

.user-avatar-container {
    position: relative;
    width: 40px;
    height: 40px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1a3a1a, #2d5a2d);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #32CD32;
    font-size: 20px;
    position: relative;
    z-index: 2;
}

.user-avatar .lucide-icon {
    width: 22px;
    height: 22px;
}

.avatar-level-ring {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 2px solid #32CD32;
    border-top-color: transparent;
    animation: levelRingSpin 3s linear infinite;
}

@keyframes levelRingSpin {
    to { transform: rotate(360deg); }
}

.user-info-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-name {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.user-level-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-level-badge {
    background: linear-gradient(135deg, #32CD32, #228B22);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.user-xp-bar {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.user-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #32CD32, #90EE90);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.user-xp-text {
    font-size: 10px;
    color: #888;
}

.dropdown-arrow {
    width: 16px;
    height: 16px;
    color: #888;
    transition: transform 0.2s ease;
}

.user-profile-wrapper.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* ===== PROFILE DROPDOWN ===== */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: rgba(10, 26, 10, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(50, 205, 50, 0.3);
    border-radius: 12px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.user-profile-wrapper.open .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgba(50, 205, 50, 0.2);
}

.dropdown-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #1a3a1a, #2d5a2d);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #32CD32;
    border: 2px solid #32CD32;
}

.dropdown-avatar .lucide-icon {
    width: 28px;
    height: 28px;
}

.dropdown-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dropdown-username {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.dropdown-rank {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #FFD700;
    font-size: 12px;
}

.dropdown-rank .lucide-icon {
    width: 14px;
    height: 14px;
}

.dropdown-stats {
    display: flex;
    justify-content: space-around;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
}

.dropdown-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.dropdown-stat-value {
    color: #32CD32;
    font-size: 18px;
    font-weight: 700;
}

.dropdown-stat-label {
    color: #888;
    font-size: 10px;
    text-transform: uppercase;
}

.dropdown-divider {
    height: 1px;
    background: rgba(50, 205, 50, 0.2);
    margin: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.dropdown-item:hover {
    background: rgba(50, 205, 50, 0.1);
    color: #fff;
}

.dropdown-item .lucide-icon {
    width: 18px;
    height: 18px;
    color: #32CD32;
}

.dropdown-item.logout {
    color: #ff6b6b;
}

.dropdown-item.logout .lucide-icon {
    color: #ff6b6b;
}

.dropdown-item.logout:hover {
    background: rgba(255, 107, 107, 0.1);
}

/* ===== STATS PAGE STYLES ===== */
.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Stats Header Card */
.stats-header-card {
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.1), rgba(34, 139, 34, 0.05));
    border: 1px solid rgba(50, 205, 50, 0.3);
    border-radius: 16px;
    padding: 24px;
}

.stats-player-card {
    display: flex;
    align-items: center;
    gap: 24px;
}

.stats-avatar-large {
    position: relative;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #1a3a1a, #2d5a2d);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #32CD32;
}

.stats-avatar-large .lucide-icon {
    width: 50px;
    height: 50px;
}

.stats-avatar-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid #32CD32;
    border-top-color: transparent;
    border-right-color: transparent;
    animation: levelRingSpin 2s linear infinite;
}

.stats-player-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-player-name {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.stats-rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    width: fit-content;
}

.stats-rank-badge .lucide-icon {
    width: 14px;
    height: 14px;
}

.stats-level-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.stats-level {
    color: #90EE90;
    font-weight: 600;
}

.stats-xp-bar-large {
    flex: 1;
    max-width: 300px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.stats-xp-fill-large {
    height: 100%;
    background: linear-gradient(90deg, #32CD32, #90EE90);
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(50, 205, 50, 0.5);
}

.stats-xp {
    color: #888;
    font-size: 12px;
}

.stats-playtime {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.stats-playtime .lucide-icon {
    width: 24px;
    height: 24px;
    color: #32CD32;
}

.stats-playtime span {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.stats-playtime label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card {
    background: rgba(0, 20, 0, 0.6);
    border: 1px solid rgba(50, 205, 50, 0.2);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.stat-card:hover {
    border-color: rgba(50, 205, 50, 0.4);
    transform: translateY(-2px);
}

.stat-card.highlight {
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.15), rgba(34, 139, 34, 0.1));
    border-color: rgba(50, 205, 50, 0.4);
}

.stat-card-icon {
    width: 40px;
    height: 40px;
    background: rgba(50, 205, 50, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #32CD32;
}

.stat-card-icon .lucide-icon {
    width: 22px;
    height: 22px;
}

.stat-card-value {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.stat-card-label {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
}

.stat-card-trend {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.stat-card-trend.up {
    background: rgba(50, 205, 50, 0.2);
    color: #32CD32;
}

.stat-card-trend.down {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.stat-card-subtext {
    font-size: 11px;
    color: #666;
}

/* Stats Graph */
.stats-graph-section {
    background: rgba(0, 20, 0, 0.6);
    border: 1px solid rgba(50, 205, 50, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.stats-graph-container {
    position: relative;
}

#stats-graph {
    width: 100%;
    height: 200px;
}

.stats-graph-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #888;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-item.kills .legend-dot {
    background: #32CD32;
}

.legend-item.deaths .legend-dot {
    background: #ff6b6b;
}

/* Stats Section */
.stats-section {
    background: rgba(0, 20, 0, 0.6);
    border: 1px solid rgba(50, 205, 50, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.stats-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #32CD32;
    font-size: 14px;
    margin: 0 0 16px 0;
    text-transform: uppercase;
}

.stats-section h3 .lucide-icon {
    width: 18px;
    height: 18px;
}

/* Weapon Stats */
.weapon-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.weapon-stat-row:last-child {
    border-bottom: none;
}

.weapon-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
}

.weapon-rank {
    color: #FFD700;
    font-weight: 700;
    font-size: 12px;
}

.weapon-name {
    color: #fff;
    font-weight: 500;
}

.weapon-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.weapon-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #32CD32, #228B22);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.weapon-kills {
    color: #888;
    font-size: 12px;
    min-width: 70px;
    text-align: right;
}

/* Recent Matches */
.recent-matches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.match-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border-left: 3px solid;
}

.match-row.win {
    border-color: #32CD32;
}

.match-row.loss {
    border-color: #ff6b6b;
}

.match-result {
    font-weight: 700;
    font-size: 12px;
    min-width: 40px;
}

.match-row.win .match-result {
    color: #32CD32;
}

.match-row.loss .match-result {
    color: #ff6b6b;
}

.match-map {
    color: #fff;
    flex: 1;
}

.match-score {
    color: #90EE90;
    font-weight: 600;
}

.match-kd {
    color: #888;
    min-width: 50px;
}

.match-time {
    color: #666;
    font-size: 12px;
    min-width: 80px;
    text-align: right;
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-player-card {
        flex-direction: column;
        text-align: center;
    }
    
    .stats-playtime {
        width: 100%;
    }
}

/* ============================================
   P2 - XP & LEVEL UP ANIMATIONS
   ============================================ */

/* XP gain floating animation */
@keyframes xpFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) scale(0.8);
    }
}

/* XP bar pulse on gain */
.user-xp-fill.gaining {
    animation: xpBarPulse 0.5s ease;
}

@keyframes xpBarPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(50, 205, 50, 0.7);
    }
    50% {
        box-shadow: 0 0 10px 3px rgba(50, 205, 50, 0.7);
    }
}

/* Level up overlay */
@keyframes levelUpFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(5px);
    }
}

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

.level-up-content {
    text-align: center;
    animation: levelUpBounce 0.5s ease;
}

@keyframes levelUpBounce {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.level-up-icon {
    font-size: 60px;
    color: #FFD700;
    margin-bottom: 20px;
    animation: levelUpIconPulse 1s ease infinite;
}

.level-up-icon .lucide-icon {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 20px #FFD700);
}

@keyframes levelUpIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.level-up-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    letter-spacing: 5px;
    margin-bottom: 10px;
}

.level-up-level {
    font-family: 'Rajdhani', sans-serif;
    font-size: 28px;
    color: #90EE90;
    font-weight: 600;
}

/* Stats graph container improvements */
.stats-graph-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(50, 205, 50, 0.2);
}

#stats-graph {
    width: 100%;
    border-radius: 8px;
}

.stats-graph-legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 15px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #aaa;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-item.kills .legend-dot {
    background: #32CD32;
    box-shadow: 0 0 8px #32CD32;
}

.legend-item.deaths .legend-dot {
    background: #ff6b6b;
    box-shadow: 0 0 8px #ff6b6b;
}

/* Recent matches improvements */
.recent-matches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.match-row {
    display: grid;
    grid-template-columns: 60px 1fr 80px 60px 100px;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.match-row:hover {
    background: rgba(50, 205, 50, 0.1);
}

.match-row.win {
    border-left-color: #32CD32;
}

.match-row.loss {
    border-left-color: #ff6b6b;
}

.match-result {
    font-weight: 700;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}

.match-row.win .match-result {
    background: rgba(50, 205, 50, 0.2);
    color: #32CD32;
}

.match-row.loss .match-result {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.match-map {
    color: #fff;
    font-weight: 600;
}

.match-score {
    color: #90EE90;
    font-weight: 600;
}

.match-kd {
    color: #aaa;
}

.match-time {
    color: #666;
    font-size: 12px;
    text-align: right;
}

/* Weapon stats improvements */
.weapon-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.weapon-stat-row {
    display: grid;
    grid-template-columns: 100px 1fr 80px;
    align-items: center;
    gap: 15px;
}

.weapon-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.weapon-rank {
    color: #FFD700;
    font-weight: 700;
    font-size: 14px;
}

.weapon-name {
    color: #fff;
    font-weight: 600;
}

.weapon-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.weapon-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #32CD32, #90EE90);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.weapon-kills {
    color: #90EE90;
    font-weight: 600;
    text-align: right;
}

/* ============================================
   PURCHASE CONFIRMATION MODAL
   ============================================ */
.purchase-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: modalFadeIn 0.2s ease;
}

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

.purchase-modal-content {
    background: linear-gradient(135deg, rgba(10, 26, 10, 0.98), rgba(20, 40, 20, 0.98));
    border: 2px solid #32CD32;
    border-radius: 16px;
    padding: 30px 40px;
    text-align: center;
    min-width: 320px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(50, 205, 50, 0.2);
    animation: modalContentSlide 0.3s ease;
}

@keyframes modalContentSlide {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.purchase-modal-content h3 {
    color: #32CD32;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 15px 0;
}

.purchase-item-name {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    margin: 10px 0;
}

.purchase-price {
    color: #FFD700;
    font-size: 24px;
    font-weight: 700;
    margin: 15px 0;
}

.purchase-price .price-coins::before {
    content: '\1FA99  ';
}

.purchase-balance {
    color: #aaa;
    font-size: 14px;
    margin: 10px 0;
}

.purchase-balance .enough {
    color: #32CD32;
    font-weight: 600;
}

.purchase-balance .not-enough {
    color: #ff6b6b;
    font-weight: 600;
}

.purchase-warning {
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 600;
    margin: 10px 0;
    padding: 8px 16px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 8px;
}

.purchase-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.purchase-buttons button {
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.purchase-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #aaa;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.purchase-cancel:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.purchase-confirm {
    background: linear-gradient(135deg, #32CD32, #228B22);
    color: #000;
}

.purchase-confirm:hover {
    background: linear-gradient(135deg, #3ce03c, #2d9a2d);
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(50, 205, 50, 0.4);
}

.purchase-confirm:active {
    transform: scale(0.98);
}

/* ============================================
   NO DATA MESSAGES
   ============================================ */
.no-data-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #666;
    text-align: center;
}

.no-data-message .lucide-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.no-data-message p {
    margin: 0;
    font-size: 14px;
}

.stats-section .no-data-message {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* ============================================
   RANKED DASHBOARD OVERLAY
   ============================================ */

.ranked-dashboard {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
}

.ranked-dashboard-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
}

.ranked-dashboard-panel {
    position: relative;
    width: 460px;
    max-width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(170deg, #0d1117 0%, #0a0f14 50%, #0d1117 100%);
    border: 1px solid rgba(50, 205, 50, 0.25);
    border-radius: 20px;
    padding: 30px 28px 24px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(50, 205, 50, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation: rankedSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rankedSlideIn {
    from { transform: translateY(30px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.ranked-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #888;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.ranked-close-btn:hover {
    color: #fff;
    background: rgba(255, 50, 50, 0.2);
    border-color: rgba(255, 50, 50, 0.4);
}

/* --- Header: Rank Icon + Info --- */

.ranked-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ranked-rank-icon {
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(50, 205, 50, 0.3));
}

.ranked-rank-info {
    flex: 1;
}

.ranked-rank-name {
    font-size: 16px;
    font-weight: 700;
    color: #32CD32;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.ranked-elo-display {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ranked-elo-value {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 15px rgba(50, 205, 50, 0.2);
}

.ranked-elo-label {
    font-size: 12px;
    color: #666;
    letter-spacing: 2px;
}

.ranked-season-badge {
    padding: 5px 12px;
    background: rgba(255, 165, 0, 0.12);
    border: 1px solid rgba(255, 165, 0, 0.25);
    border-radius: 20px;
    font-size: 10px;
    color: #ffa500;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* --- Progress Bar --- */

.ranked-progress-section {
    margin-bottom: 18px;
}

.ranked-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #666;
    margin-bottom: 6px;
}

.ranked-progress-bar {
    position: relative;
    width: 100%;
    height: 22px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 11px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ranked-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #228B22, #32CD32, #50fa50);
    border-radius: 11px;
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 0 12px rgba(50, 205, 50, 0.3);
}

.ranked-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* --- Placement Notice --- */

.ranked-placement {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 165, 0, 0.08);
    border: 1px solid rgba(255, 165, 0, 0.2);
    border-radius: 10px;
    margin-bottom: 18px;
}

.ranked-placement-icon {
    font-size: 22px;
}

.ranked-placement-text {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    color: #ffa500;
    letter-spacing: 1px;
    font-weight: 700;
}

.ranked-placement-progress {
    font-size: 14px;
    color: #fff;
    margin-top: 2px;
}

/* --- Stats Grid --- */

.ranked-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 22px;
}

.ranked-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: border-color 0.2s;
}

.ranked-stat-box:hover {
    border-color: rgba(50, 205, 50, 0.2);
}

.ranked-stat-val {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}

.ranked-stat-lbl {
    font-size: 9px;
    color: #666;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
}

.ranked-stat-win .ranked-stat-val { color: #32CD32; }
.ranked-stat-loss .ranked-stat-val { color: #ff4444; }

/* --- Find Match Button --- */

.ranked-find-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #1a4d1a, #228B22);
    border: 2px solid #32CD32;
    border-radius: 12px;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.25s;
    box-shadow: 0 0 20px rgba(50, 205, 50, 0.15);
    margin-bottom: 12px;
}

.ranked-find-btn:hover {
    background: linear-gradient(135deg, #228B22, #32CD32);
    box-shadow: 0 0 35px rgba(50, 205, 50, 0.3);
    transform: translateY(-1px);
}

.ranked-find-btn:active {
    transform: translateY(1px);
}

.ranked-find-icon {
    font-size: 22px;
}

/* --- Queue Status --- */

.ranked-queue-status {
    text-align: center;
    padding: 20px;
    background: rgba(50, 205, 50, 0.04);
    border: 1px solid rgba(50, 205, 50, 0.15);
    border-radius: 12px;
    margin-bottom: 12px;
}

.ranked-queue-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(50, 205, 50, 0.15);
    border-top: 3px solid #32CD32;
    border-radius: 50%;
    animation: rankedSpin 1s linear infinite;
    margin: 0 auto 12px;
}

@keyframes rankedSpin {
    to { transform: rotate(360deg); }
}

.ranked-queue-text {
    font-size: 13px;
    color: #32CD32;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.ranked-queue-timer {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 14px;
}

.ranked-cancel-btn {
    padding: 10px 30px;
    background: rgba(255, 50, 50, 0.1);
    border: 1px solid rgba(255, 50, 50, 0.3);
    border-radius: 8px;
    color: #ff4444;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.ranked-cancel-btn:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: #ff4444;
}

/* --- Bottom Note --- */

.ranked-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: #444;
    letter-spacing: 0.5px;
    text-align: center;
}

/* --- Mobile Responsive --- */

@media (max-width: 520px) {
    .ranked-dashboard-panel {
        padding: 22px 16px 18px;
        border-radius: 14px;
    }
    .ranked-elo-value { font-size: 26px; }
    .ranked-rank-icon { font-size: 38px; }
    .ranked-rank-name { font-size: 13px; }
    .ranked-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .ranked-stat-val { font-size: 16px; }
    .ranked-find-btn { font-size: 15px; padding: 14px; }
}