/* ========== КАСТОМИЗАЦИЯ ИГРОКОВ ========== */
/* Рамки, эффекты имен, аватары */

/* ========== ТЕСТОВОЕ ФОТО ДЛЯ ВСЕХ АВАТАРОВ ========== */
.player-avatar,
.profile-avatar,
.chat-avatar,
.ladder-avatar,
.member-frame,
.leader-frame,
.preview-frame {
    background-image: url('/images/photo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ========== БАЗОВЫЕ СТИЛИ АВАТАРОВ ========== */
.player-avatar,
.profile-avatar,
.chat-avatar,
.ladder-avatar,
.member-frame,
.leader-frame,
.preview-frame {
    display: inline-block;
    border-radius: 50%;
    border: 3px solid #666;
    box-sizing: border-box;
}

/* Размеры */
.profile-avatar {
    width: 100px;
    height: 100px;
}

.ladder-avatar,
.member-frame,
.leader-frame,
.preview-frame {
    width: 28px;
    height: 28px;
}

.chat-avatar {
    width: 24px;
    height: 24px;
    border-width: 2px;
}

/* Аватары участников в игре */
.participant-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid;
    background-image: url('/images/photo.png');
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.participant-item .avatar-with-vip {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 4px;
}

.participant-item .avatar-with-vip .vip-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5px;
    padding: 1px 2px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    border-radius: 2px;
    font-weight: bold;
    white-space: nowrap;
}

/* Аватар в превью турнира */
.preview-frame {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid;
    background-image: url('/images/photo.png');
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* Аватар в сетке bracket */
.match-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid;
    background-image: url('/images/photo.png');
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    margin-right: 4px;
}

/* Обёртка игрока в матче */
.match-player-wrap {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.match-player-wrap.clickable:hover {
    background: rgba(102, 126, 234, 0.1);
}

.match-player-wrap.winner {
    background: rgba(40, 167, 69, 0.1);
}

.match-player-wrap.winner .match-player-name {
    font-weight: bold;
}

.match-player-wrap.me {
    background: rgba(102, 126, 234, 0.15);
}

.match-player-name {
    font-size: 0.9em;
}

/* ========== УНИФИЦИРОВАННЫЙ СТИЛЬ НИКОВ ========== */
/* Базовый стиль для всех ников игроков */
.player-name-styled {
    color: #333;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
}

/* Убираем стандартные стили ссылок */
a.player-name-styled,
span.player-name-styled {
    color: #333;
    text-decoration: none;
}

/* Эффекты ников переопределяют только цвет и добавляют эффекты */
.player-name-styled.name-effect-gold {
    color: #B8860B !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.player-name-styled.name-effect-rainbow {
    background: linear-gradient(90deg, 
        #ff0000, #ff7f00, #ffff00, #00ff00, 
        #0000ff, #8b00ff, #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowText 3s linear infinite;
}

.player-name-styled.name-effect-fire {
    color: #FF4500 !important;
    text-shadow: 
        0 0 5px #FF4500,
        0 0 10px #FF6B00;
    animation: fireFlicker 0.5s ease-in-out infinite alternate;
}

.player-name-styled.name-effect-ice {
    color: #00BFFF !important;
    text-shadow: 0 0 5px #00BFFF;
}

.player-name-styled.name-effect-purple {
    color: #9400D3 !important;
    text-shadow: 0 0 5px #9400D3;
}

.player-name-styled.name-effect-champion {
    background: linear-gradient(90deg, #FF00FF, #FFD700, #FF00FF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: championGradient 2s linear infinite;
}

/* Красный эффект (доступен всем для тестирования) */
.player-name-styled.name-effect-red {
    color: #DC3545 !important;
    text-shadow: 0 0 5px rgba(220, 53, 69, 0.4);
}

/* Маркеры рядом с ником */
.you-marker {
    color: #667eea;
    font-size: 0.85em;
    margin-left: 4px;
}

.finished-marker {
    color: #28a745;
    margin-left: 4px;
}

/* Ячейка с ником в ladder таблице */
.ladder-player-cell {
    cursor: pointer;
    transition: background 0.2s;
}

.ladder-player-cell:hover {
    background: rgba(102, 126, 234, 0.1);
}

/* Ник в модалах профиля */
.profile-player-name.player-name-styled {
    font-size: 1.3em;
    cursor: default;
}

/* Ники в чате */
.chat-msg-header .player-name-styled {
    font-size: 0.85em;
}

/* Ники в лидерборде */
.player-leader-item .player-name-styled {
    flex: 1;
}

/* Ники в списке участников клана */
.member-info .player-name-styled {
    flex: 1;
}

/* Ники в превью турнира */
.preview-participant .player-name-styled {
    flex: 1;
}

/* Ники в таблице clan preview */
.clan-member-item .player-name-styled {
    flex: 1;
}

/* Ники участников игры */
.participant-item .player-name-styled {
    flex: 1;
}

/* Кликабельные участники в превью */
.preview-participant.clickable {
    cursor: pointer;
    transition: background 0.2s;
}

.preview-participant.clickable:hover {
    background: rgba(102, 126, 234, 0.1);
}

/* ========== РАМКИ АВАТАРОВ ========== */

/* Default - обычная серая */
.frame-default {
    border-color: #666666 !important;
}

/* Bronze - бронзовая */
.frame-bronze {
    border-color: #CD7F32 !important;
    box-shadow: 0 0 8px rgba(205, 127, 50, 0.5);
}

/* Silver - серебряная */
.frame-silver {
    border-color: #C0C0C0 !important;
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.5);
}

/* Gold - золотая */
.frame-gold {
    border-color: #FFD700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* Platinum - платиновая */
.frame-platinum {
    border-color: #E5E4E2 !important;
    box-shadow: 0 0 12px rgba(229, 228, 226, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Diamond - алмазная с анимацией */
.frame-diamond {
    border-color: #B9F2FF !important;
    box-shadow: 0 0 15px rgba(185, 242, 255, 0.8), 0 0 30px rgba(185, 242, 255, 0.4);
    animation: diamondShine 2s ease-in-out infinite;
}

@keyframes diamondShine {
    0%, 100% {
        box-shadow: 0 0 15px rgba(185, 242, 255, 0.8), 0 0 30px rgba(185, 242, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 25px rgba(185, 242, 255, 1), 0 0 50px rgba(185, 242, 255, 0.6);
    }
}

/* Morning Champion - утренний чемпион (оранжевый) */
.frame-morningChamp {
    border-color: #FFA500 !important;
    box-shadow: 0 0 12px rgba(255, 165, 0, 0.7);
    animation: morningGlow 3s ease-in-out infinite;
}

@keyframes morningGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 165, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 200, 50, 0.9);
    }
}

/* Day Champion - дневной чемпион (ярко-золотой) */
.frame-dayChamp {
    border-color: #FFD700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    animation: dayGlow 2.5s ease-in-out infinite;
}

@keyframes dayGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
        border-color: #FFD700;
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 230, 100, 1);
        border-color: #FFE44D;
    }
}

/* Evening Champion - вечерний чемпион (тёмно-красный) */
.frame-eveningChamp {
    border-color: #8B0000 !important;
    box-shadow: 0 0 12px rgba(139, 0, 0, 0.7);
    animation: eveningGlow 3s ease-in-out infinite;
}

@keyframes eveningGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(139, 0, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 20px rgba(200, 50, 50, 0.9);
    }
}

/* Season Champion - чемпион сезона (пурпурная анимация) */
.frame-seasonChamp {
    border-color: #FF00FF !important;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
    animation: seasonChampion 2s linear infinite;
}

@keyframes seasonChampion {
    0% {
        border-color: #FF00FF;
        box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
    }
    33% {
        border-color: #00FFFF;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    }
    66% {
        border-color: #FFD700;
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
    100% {
        border-color: #FF00FF;
        box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
    }
}

/* Clan Champion - клановый чемпион (зелёный) */
.frame-clanChamp {
    border-color: #00FF00 !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
    animation: clanGlow 2.5s ease-in-out infinite;
}

@keyframes clanGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 25px rgba(100, 255, 100, 0.9);
    }
}

/* ========== НЕОНОВЫЕ РАМКИ ========== */
.frame-neonPink {
    border-color: #FF1493 !important;
    box-shadow: 0 0 15px rgba(255, 20, 147, 0.8), inset 0 0 10px rgba(255, 20, 147, 0.3);
}
.frame-neonBlue {
    border-color: #00FFFF !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), inset 0 0 10px rgba(0, 255, 255, 0.3);
}
.frame-neonGreen {
    border-color: #39FF14 !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.8), inset 0 0 10px rgba(57, 255, 20, 0.3);
}
.frame-neonOrange {
    border-color: #FF6600 !important;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.8), inset 0 0 10px rgba(255, 102, 0, 0.3);
}
.frame-neonPurple {
    border-color: #BF00FF !important;
    box-shadow: 0 0 15px rgba(191, 0, 255, 0.8), inset 0 0 10px rgba(191, 0, 255, 0.3);
}

/* ========== ГРАДИЕНТНЫЕ РАМКИ ========== */
.frame-sunset {
    border: 3px solid !important;
    border-image: linear-gradient(135deg, #FF512F, #DD2476) 1;
    box-shadow: 0 0 12px rgba(255, 81, 47, 0.5);
}
.frame-ocean {
    border: 3px solid !important;
    border-image: linear-gradient(135deg, #2193B0, #6DD5ED) 1;
    box-shadow: 0 0 12px rgba(33, 147, 176, 0.5);
}
.frame-forest {
    border: 3px solid !important;
    border-image: linear-gradient(135deg, #134E5E, #71B280) 1;
    box-shadow: 0 0 12px rgba(113, 178, 128, 0.5);
}
.frame-fire {
    border: 3px solid !important;
    border-image: linear-gradient(135deg, #F12711, #F5AF19) 1;
    box-shadow: 0 0 12px rgba(241, 39, 17, 0.5);
}
.frame-aurora {
    border: 3px solid !important;
    border-image: linear-gradient(135deg, #00C9FF, #92FE9D) 1;
    box-shadow: 0 0 12px rgba(0, 201, 255, 0.5);
}
.frame-lavender {
    border: 3px solid !important;
    border-image: linear-gradient(135deg, #834D9B, #D04ED6) 1;
    box-shadow: 0 0 12px rgba(131, 77, 155, 0.5);
}
.frame-candy {
    border: 3px solid !important;
    border-image: linear-gradient(135deg, #FF61D2, #FE9090) 1;
    box-shadow: 0 0 12px rgba(255, 97, 210, 0.5);
}
.frame-midnight {
    border: 3px solid !important;
    border-image: linear-gradient(135deg, #232526, #414345) 1;
    box-shadow: 0 0 12px rgba(65, 67, 69, 0.5);
}

/* ========== АНИМИРОВАННЫЕ РАМКИ ========== */
.frame-pulse {
    border-color: #E91E63 !important;
    animation: framePulse 1.5s ease-in-out infinite;
}
@keyframes framePulse {
    0%, 100% { box-shadow: 0 0 5px rgba(233, 30, 99, 0.5); transform: scale(1); }
    50% { box-shadow: 0 0 20px rgba(233, 30, 99, 0.8); transform: scale(1.02); }
}

.frame-rainbow {
    border: 3px solid #ff0000 !important;
    animation: rainbowBorder 3s linear infinite;
}
@keyframes rainbowBorder {
    0% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000; }
    16% { border-color: #ff7f00; box-shadow: 0 0 10px #ff7f00; }
    33% { border-color: #ffff00; box-shadow: 0 0 10px #ffff00; }
    50% { border-color: #00ff00; box-shadow: 0 0 10px #00ff00; }
    66% { border-color: #0000ff; box-shadow: 0 0 10px #0000ff; }
    83% { border-color: #8b00ff; box-shadow: 0 0 10px #8b00ff; }
    100% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000; }
}

.frame-spin {
    border: 3px solid #667eea !important;
    animation: frameSpin 2s linear infinite;
}
@keyframes frameSpin {
    0% { border-color: #667eea; box-shadow: 0 0 10px #667eea; }
    50% { border-color: #764ba2; box-shadow: 0 0 10px #764ba2; }
    100% { border-color: #667eea; box-shadow: 0 0 10px #667eea; }
}

.frame-breathe {
    border-color: #4FC3F7 !important;
    animation: frameBreathe 3s ease-in-out infinite;
}
@keyframes frameBreathe {
    0%, 100% { box-shadow: 0 0 5px rgba(79, 195, 247, 0.3); opacity: 0.7; }
    50% { box-shadow: 0 0 25px rgba(79, 195, 247, 0.9); opacity: 1; }
}

.frame-glitch {
    border-color: #00FF00 !important;
    animation: frameGlitch 0.3s ease-in-out infinite;
}
@keyframes frameGlitch {
    0%, 100% { box-shadow: 2px 0 #ff0000, -2px 0 #00ffff; }
    25% { box-shadow: -2px 0 #ff0000, 2px 0 #00ffff; }
    50% { box-shadow: 2px 2px #ff0000, -2px -2px #00ffff; }
    75% { box-shadow: -2px 2px #ff0000, 2px -2px #00ffff; }
}

.frame-electricity {
    border-color: #FFEB3B !important;
    animation: frameElectricity 0.1s linear infinite;
}
@keyframes frameElectricity {
    0%, 100% { box-shadow: 0 0 5px #FFEB3B, 0 0 10px #FFC107; }
    50% { box-shadow: 0 0 15px #FFEB3B, 0 0 30px #FFC107, 0 0 45px #FF9800; }
}

/* ========== ОСОБЫЕ РАМКИ ========== */
.frame-glass {
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.frame-hologram {
    border-color: #00FFFF !important;
    box-shadow: 0 0 10px #00FFFF, 0 0 20px #FF00FF;
    animation: frameHologram 2s ease-in-out infinite;
}
@keyframes frameHologram {
    0%, 100% { border-color: #00FFFF; box-shadow: 0 0 10px #00FFFF, 0 0 20px #FF00FF; }
    50% { border-color: #FF00FF; box-shadow: 0 0 10px #FF00FF, 0 0 20px #00FFFF; }
}

.frame-portal {
    border: 3px solid #8E2DE2 !important;
    animation: framePortal 2s ease-in-out infinite;
}
@keyframes framePortal {
    0%, 100% { border-color: #8E2DE2; box-shadow: 0 0 10px #8E2DE2, 0 0 20px #4A00E0; }
    50% { border-color: #4A00E0; box-shadow: 0 0 20px #8E2DE2, 0 0 40px #4A00E0, 0 0 60px #8E2DE2; }
}

.frame-matrix {
    border-color: #00FF00 !important;
    box-shadow: 0 0 10px #00FF00;
    animation: frameMatrix 0.5s steps(2) infinite;
}
@keyframes frameMatrix {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
}

.frame-cosmic {
    border: 3px solid #2C5364 !important;
    box-shadow: 0 0 15px rgba(44, 83, 100, 0.6);
}

/* ========== ДРАГОЦЕННЫЕ РАМКИ ========== */
.frame-ruby {
    border-color: #E0115F !important;
    box-shadow: 0 0 12px rgba(224, 17, 95, 0.6);
}
.frame-emerald {
    border-color: #50C878 !important;
    box-shadow: 0 0 12px rgba(80, 200, 120, 0.6);
}
.frame-sapphire {
    border-color: #0F52BA !important;
    box-shadow: 0 0 12px rgba(15, 82, 186, 0.6);
}
.frame-amethyst {
    border-color: #9966CC !important;
    box-shadow: 0 0 12px rgba(153, 102, 204, 0.6);
}
.frame-topaz {
    border-color: #FFC87C !important;
    box-shadow: 0 0 12px rgba(255, 200, 124, 0.6);
}
.frame-obsidian {
    border-color: #1C1C1C !important;
    box-shadow: 0 0 12px rgba(28, 28, 28, 0.8), inset 0 0 5px rgba(255, 255, 255, 0.1);
}

/* ========== СЕЗОННЫЕ РАМКИ ========== */
.frame-snowflake {
    border-color: #AFDCEC !important;
    box-shadow: 0 0 15px rgba(175, 220, 236, 0.7);
    animation: snowflakeGlow 2s ease-in-out infinite;
}
@keyframes snowflakeGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(175, 220, 236, 0.7); }
    50% { box-shadow: 0 0 25px rgba(255, 255, 255, 0.9); }
}

.frame-cherry {
    border-color: #FFB7C5 !important;
    box-shadow: 0 0 12px rgba(255, 183, 197, 0.6);
}
.frame-autumn {
    border: 3px solid #DAA520 !important;
    box-shadow: 0 0 12px rgba(218, 165, 32, 0.5);
}
.frame-spring {
    border: 3px solid #00FF7F !important;
    box-shadow: 0 0 12px rgba(0, 255, 127, 0.5);
}

/* ========== РЕДКИЕ РАМКИ ========== */
.frame-legendary {
    border: 3px solid #FFD700 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    animation: legendaryFrame 2s ease-in-out infinite;
}
@keyframes legendaryFrame {
    0%, 100% { border-color: #FFD700; box-shadow: 0 0 20px rgba(255, 215, 0, 0.7); }
    50% { border-color: #FF8C00; box-shadow: 0 0 35px rgba(255, 140, 0, 0.9); }
}

.frame-mythic {
    border: 3px solid #FF00FF !important;
    animation: mythicFrame 3s linear infinite;
}
@keyframes mythicFrame {
    0% { border-color: #FF00FF; box-shadow: 0 0 20px #FF00FF; }
    50% { border-color: #00FFFF; box-shadow: 0 0 20px #00FFFF; }
    100% { border-color: #FF00FF; box-shadow: 0 0 20px #FF00FF; }
}

.frame-divine {
    border-color: #FFFFFF !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 215, 0, 0.5);
    animation: divineFrame 2s ease-in-out infinite;
}
@keyframes divineFrame {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 60px rgba(255, 215, 0, 0.8); }
}

.frame-shadow {
    border-color: #1A1A1A !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.5);
    animation: shadowFrame 3s ease-in-out infinite;
}
@keyframes shadowFrame {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); }
    50% { box-shadow: 0 0 35px rgba(0, 0, 0, 0.9), 0 0 50px rgba(50, 50, 50, 0.4); }
}

.frame-phoenix {
    border: 3px solid #FF4500 !important;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.7);
    animation: phoenixFrame 2s ease-in-out infinite;
}
@keyframes phoenixFrame {
    0%, 100% { border-color: #FF4500; box-shadow: 0 0 15px rgba(255, 69, 0, 0.7); }
    50% { border-color: #FFD700; box-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 45px rgba(255, 0, 0, 0.5); }
}

/* ========== ЭФФЕКТЫ ИМЁН (50 вариантов) ========== */

/* === БАЗОВЫЕ === */
.name-effect-default { color: inherit; }

/* === ЦВЕТНЫЕ === */
.name-effect-red { color: #DC3545 !important; }
.name-effect-blue { color: #007BFF !important; }
.name-effect-green { color: #28A745 !important; }
.name-effect-orange { color: #FD7E14 !important; }
.name-effect-purple { color: #9400D3 !important; }
.name-effect-pink { color: #E91E63 !important; }
.name-effect-cyan { color: #17A2B8 !important; }
.name-effect-lime { color: #32CD32 !important; }

/* === СВЕЧЕНИЕ === */
.name-effect-glowRed {
    color: #FF0000 !important;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 15px rgba(255, 0, 0, 0.5);
}
.name-effect-glowBlue {
    color: #00BFFF !important;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.8), 0 0 15px rgba(0, 191, 255, 0.5);
}
.name-effect-glowGreen {
    color: #00FF00 !important;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.8), 0 0 15px rgba(0, 255, 0, 0.5);
}
.name-effect-glowGold {
    color: #FFD700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 15px rgba(255, 215, 0, 0.5);
}
.name-effect-glowPink {
    color: #FF69B4 !important;
    text-shadow: 0 0 8px rgba(255, 105, 180, 0.8), 0 0 15px rgba(255, 105, 180, 0.5);
}
.name-effect-glowPurple {
    color: #9400D3 !important;
    text-shadow: 0 0 8px rgba(148, 0, 211, 0.8), 0 0 15px rgba(148, 0, 211, 0.5);
}

/* === ГРАДИЕНТЫ === */
.name-effect-gradientSunset {
    background: linear-gradient(90deg, #FF512F, #DD2476);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.name-effect-gradientOcean {
    background: linear-gradient(90deg, #2193B0, #6DD5ED);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.name-effect-gradientFire {
    background: linear-gradient(90deg, #F12711, #F5AF19);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.name-effect-gradientForest {
    background: linear-gradient(90deg, #134E5E, #71B280);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.name-effect-gradientCandy {
    background: linear-gradient(90deg, #FF61D2, #FE9090);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.name-effect-gradientGalaxy {
    background: linear-gradient(90deg, #8E2DE2, #4A00E0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.name-effect-gradientMint {
    background: linear-gradient(90deg, #00C9FF, #92FE9D);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === АНИМИРОВАННЫЕ === */
.name-effect-rainbow {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowText 3s linear infinite;
}
@keyframes rainbowText {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.name-effect-fire {
    color: #FF4500 !important;
    text-shadow: 0 0 5px #FF4500, 0 0 10px #FF6B00, 0 0 15px #FF8C00;
    animation: fireFlicker 0.5s ease-in-out infinite alternate;
}
@keyframes fireFlicker {
    0% { text-shadow: 0 0 5px #FF4500, 0 0 10px #FF6B00, 0 0 15px #FF8C00; }
    100% { text-shadow: 0 0 8px #FF6B00, 0 0 15px #FF8C00, 0 0 20px #FFA500; }
}

.name-effect-ice {
    color: #00BFFF !important;
    text-shadow: 0 0 5px #00BFFF, 0 0 10px #87CEEB, 0 0 15px #E0FFFF;
    animation: iceShimmer 2s ease-in-out infinite;
}
@keyframes iceShimmer {
    0%, 100% { text-shadow: 0 0 5px #00BFFF, 0 0 10px #87CEEB; }
    50% { text-shadow: 0 0 10px #00BFFF, 0 0 20px #E0FFFF, 0 0 30px #87CEEB; }
}

.name-effect-pulse {
    color: #E91E63 !important;
    animation: textPulse 1.5s ease-in-out infinite;
}
@keyframes textPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

.name-effect-wave {
    background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: waveText 2s ease-in-out infinite;
}
@keyframes waveText {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.name-effect-sparkle {
    color: #FFD700 !important;
    animation: sparkleText 1s steps(2) infinite;
}
@keyframes sparkleText {
    0% { text-shadow: 0 0 5px #FFD700, 2px -2px 5px #FFF, -2px 2px 5px #FFF; }
    50% { text-shadow: 0 0 10px #FFD700, -2px -2px 5px #FFF, 2px 2px 5px #FFF; }
}

.name-effect-glitch {
    color: #00FF00 !important;
    animation: glitchText 0.3s ease-in-out infinite;
}
@keyframes glitchText {
    0%, 100% { text-shadow: 2px 0 #ff0000, -2px 0 #00ffff; }
    25% { text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; }
    50% { text-shadow: 2px 2px #ff0000, -2px -2px #00ffff; }
    75% { text-shadow: -2px 2px #ff0000, 2px -2px #00ffff; }
}

.name-effect-neon {
    color: #FF00FF !important;
    text-shadow: 0 0 5px #FF00FF, 0 0 10px #FF00FF, 0 0 20px #FF00FF, 0 0 40px #FF00FF;
    animation: neonFlicker 1.5s ease-in-out infinite alternate;
}
@keyframes neonFlicker {
    0% { text-shadow: 0 0 5px #FF00FF, 0 0 10px #FF00FF, 0 0 20px #FF00FF; }
    100% { text-shadow: 0 0 10px #FF00FF, 0 0 20px #FF00FF, 0 0 40px #FF00FF, 0 0 80px #FF00FF; }
}

.name-effect-shake {
    color: #FF6347 !important;
    animation: shakeText 0.5s ease-in-out infinite;
}
@keyframes shakeText {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.name-effect-bounce {
    color: #32CD32 !important;
    animation: bounceText 0.6s ease-in-out infinite;
}
@keyframes bounceText {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* === ОСОБЫЕ === */
.name-effect-shadow {
    color: #1A1A1A !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

.name-effect-outline {
    color: #FFFFFF !important;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.name-effect-doubleShadow {
    color: #333333 !important;
    text-shadow: 2px 2px 0 #999, 4px 4px 0 #666;
}

.name-effect-blur {
    color: #6C757D !important;
    text-shadow: 0 0 8px rgba(108, 117, 125, 0.8);
    filter: blur(0.5px);
}

.name-effect-retro {
    color: #FF6B6B !important;
    text-shadow: 3px 3px 0 #4ECDC4;
    font-weight: bold;
}

.name-effect-matrix {
    color: #00FF00 !important;
    text-shadow: 0 0 5px #00FF00;
    animation: matrixText 0.5s steps(2) infinite;
}
@keyframes matrixText {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
}

.name-effect-hologram {
    color: #00FFFF !important;
    text-shadow: 0 0 5px #00FFFF, 0 0 10px #FF00FF;
    animation: hologramText 2s ease-in-out infinite;
}
@keyframes hologramText {
    0%, 100% { color: #00FFFF; text-shadow: 0 0 5px #00FFFF, 0 0 10px #FF00FF; }
    50% { color: #FF00FF; text-shadow: 0 0 5px #FF00FF, 0 0 10px #00FFFF; }
}

/* === РЕДКИЕ === */
.name-effect-champion {
    background: linear-gradient(90deg, #FFD700, #FF8C00, #FFD700);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: championGradient 2s linear infinite;
    font-weight: bold;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}
@keyframes championGradient {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.name-effect-legendary {
    background: linear-gradient(90deg, #FF4500, #FFD700, #FF4500);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: legendaryGradient 2s linear infinite;
    font-weight: bold;
    filter: drop-shadow(0 0 5px rgba(255, 69, 0, 0.6));
}
@keyframes legendaryGradient {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.name-effect-mythic {
    background: linear-gradient(90deg, #FF00FF, #00FFFF, #FF00FF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mythicGradient 3s linear infinite;
    font-weight: bold;
    filter: drop-shadow(0 0 5px rgba(255, 0, 255, 0.5));
}
@keyframes mythicGradient {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.name-effect-divine {
    color: #FFFFFF !important;
    text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFD700, 0 0 30px #FFD700;
    animation: divineGlow 2s ease-in-out infinite;
    font-weight: bold;
}
@keyframes divineGlow {
    0%, 100% { text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFD700; }
    50% { text-shadow: 0 0 15px #FFFFFF, 0 0 30px #FFD700, 0 0 45px #FFFFFF; }
}

.name-effect-cosmic {
    background: linear-gradient(90deg, #0F2027, #203A43, #2C5364, #203A43, #0F2027);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cosmicFlow 4s ease-in-out infinite;
}
@keyframes cosmicFlow {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.name-effect-phoenix {
    background: linear-gradient(90deg, #FF4500, #FFD700, #FF0000, #FFD700, #FF4500);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: phoenixText 3s ease-in-out infinite;
    font-weight: bold;
    filter: drop-shadow(0 0 5px rgba(255, 69, 0, 0.7));
}
@keyframes phoenixText {
    0%, 100% { background-position: 0% center; filter: brightness(1); }
    50% { background-position: 100% center; filter: brightness(1.3); }
}

.name-effect-aurora {
    background: linear-gradient(90deg, #00C9FF, #92FE9D, #667eea, #00C9FF);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: auroraText 4s ease-in-out infinite;
}
@keyframes auroraText {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* === СТИЛИЗОВАННЫЕ === */
.name-effect-typewriter {
    color: #2C3E50 !important;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.name-effect-handwritten {
    color: #8B4513 !important;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.3);
}

.name-effect-pixel {
    color: #4CAF50 !important;
    font-family: monospace;
    text-shadow: 2px 0 0 #388E3C, 0 2px 0 #388E3C;
}

.name-effect-chrome {
    background: linear-gradient(180deg, #C0C0C0, #FFFFFF, #C0C0C0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

/* ========== КОМБИНИРОВАННЫЕ СТИЛИ ДЛЯ ПРОФИЛЯ ========== */
/* Рамка вокруг аватара в модале (абсолютная позиция) */
.profile-avatar-container .profile-frame,
.profile-avatar-container .profile-frame-display,
.profile-frame-display {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 4px solid #666;
    background: transparent !important;
    pointer-events: none;
}

/* Рамка в хедере (инлайновая) */
.profile-btn .profile-frame {
    position: static;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-image: url('/images/photo.png');
    background-size: cover;
    background-position: center;
    border: 2px solid;
    flex-shrink: 0;
}

/* Ник в хедере */
.profile-btn .profile-name {
    color: white;
    font-weight: normal;
    text-decoration: none;
}

.profile-btn .profile-name.player-name-styled {
    color: white;
}

/* Переопределяем эффекты для хедера (на светлом фоне другие цвета) */
.profile-btn .name-effect-gold {
    color: #FFD700 !important;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.6);
}

.profile-btn .name-effect-fire {
    color: #FF6B00 !important;
}

.profile-btn .name-effect-ice {
    color: #87CEEB !important;
}

.profile-btn .name-effect-purple {
    color: #DDA0DD !important;
}

/* Переопределяем рамки для профиля (толще) */
.profile-frame.frame-default { border-color: #666666; }
.profile-frame.frame-bronze { 
    border-color: #CD7F32; 
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
}
.profile-frame.frame-silver { 
    border-color: #C0C0C0; 
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
}
.profile-frame.frame-gold { 
    border-color: #FFD700; 
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
.profile-frame.frame-platinum { 
    border-color: #E5E4E2; 
    box-shadow: 0 0 25px rgba(229, 228, 226, 0.8);
}
.profile-frame.frame-diamond { 
    border-color: #B9F2FF; 
    box-shadow: 0 0 30px rgba(185, 242, 255, 0.8);
    animation: diamondShine 2s ease-in-out infinite;
}
.profile-frame.frame-morningChamp { 
    border-color: #FFA500; 
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.7);
    animation: morningGlow 3s ease-in-out infinite;
}
.profile-frame.frame-dayChamp { 
    border-color: #FFD700; 
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
    animation: dayGlow 2.5s ease-in-out infinite;
}
.profile-frame.frame-eveningChamp { 
    border-color: #8B0000; 
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.7);
    animation: eveningGlow 3s ease-in-out infinite;
}
.profile-frame.frame-seasonChamp { 
    border-color: #FF00FF; 
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.8);
    animation: seasonChampion 2s linear infinite;
}
.profile-frame.frame-clanChamp { 
    border-color: #00FF00; 
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.7);
    animation: clanGlow 2.5s ease-in-out infinite;
}

/* ========== КНОПКИ ВЫБОРА КАСТОМИЗАЦИИ ========== */
.customization-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 15px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 2px solid #dee2e6;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95em;
}

.customization-btn:hover {
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.current-frame-preview {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url('/images/photo.png');
    background-size: cover;
    background-position: center;
    border: 3px solid #666;
    flex-shrink: 0;
}

.current-effect-preview {
    font-size: 1.1em;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Фон только для default эффекта, чтобы не мешать градиентным эффектам */
.current-effect-preview.name-effect-default,
.current-effect-preview:not([class*="name-effect-"]) {
    background: rgba(102, 126, 234, 0.1);
}

.customization-btn span:nth-child(2) {
    flex: 1;
    text-align: left;
    color: #333;
}

.btn-arrow {
    font-size: 1.5em;
    color: #999;
    transition: transform 0.2s;
}

.customization-btn:hover .btn-arrow {
    transform: translateX(3px);
    color: #667eea;
}

/* ========== МОДАЛЬНОЕ ОКНО ВЫБОРА ========== */
.customization-selector-modal {
    max-width: 600px;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
}

.customization-selector-modal h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.4em;
    color: #333;
}

/* ========== СЕТКА ВЫБОРА ========== */
.customization-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    padding: 10px;
}

.customization-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 3px solid #e9ecef;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.customization-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.25);
    border-color: #667eea;
}

.customization-item.active {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea15, #764ba215);
}

.customization-item.active::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 1.2em;
    color: #667eea;
}

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

.customization-item.locked::before {
    content: '🔒';
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 1em;
}

.customization-item.locked:hover {
    transform: none;
    box-shadow: none;
    border-color: #e9ecef;
}

/* Превью рамки */
.frame-preview-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-image: url('/images/photo.png');
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
}

/* Превью эффекта ника */
.effect-preview-text {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 8px 15px;
    text-align: center;
}

.customization-item-name {
    font-size: 0.85em;
    color: #666;
    text-align: center;
    word-break: break-word;
}

/* ========== СКРОЛЛБАР МОДАЛКИ ========== */
.customization-selector-modal::-webkit-scrollbar {
    width: 8px;
}

.customization-selector-modal::-webkit-scrollbar-track {
    background: #e9ecef;
    border-radius: 4px;
}

.customization-selector-modal::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 4px;
}

/* ========== МОБИЛЬНАЯ ВЕРСИЯ ========== */
@media (max-width: 600px) {
    .customization-selector-modal {
        max-width: 100%;
        width: 100%;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        margin-top: auto;
    }
    
    .customization-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .customization-item {
        padding: 12px;
    }
    
    .frame-preview-avatar {
        width: 55px;
        height: 55px;
    }
    
    .effect-preview-text {
        font-size: 1.1em;
        padding: 6px 10px;
    }
    
    .customization-item-name {
        font-size: 0.75em;
    }
}

@media (max-width: 400px) {
    .customization-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .frame-preview-avatar {
        width: 45px;
        height: 45px;
    }
}