:root {
    --bg-color: #0b0b10;
    --text-color: #f3f4f6;
    --secondary-bg: #151520;
    --hint-color: #9ca3af;
    --accent-purple: #8b5cf6;
    --accent-purple-glow: rgba(139, 92, 246, 0.4);
}

* { 
    box-sizing: border-box; 
    user-select: none; 
    -webkit-user-select: none; 
}

html, body {
    min-height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 10px 10px 75px 10px;
    overflow-x: hidden;
    max-width: 480px;
    margin: 0 auto;
}

.hidden { display: none !important; }

/* ==================== 1. ТЕМНЫЕ И ЦВЕТНЫЕ ТЕМЫ ==================== */
.theme-dark { background: linear-gradient(180deg, #181822 0%, #0e0e14 100%) !important; color: #f3f4f6 !important; }
.theme-onyx { background: linear-gradient(180deg, #2b2b30 0%, #121216 100%) !important; color: #f3f4f6 !important; }
.theme-midnight { background: linear-gradient(180deg, #132240 0%, #081122 100%) !important; color: #f3f4f6 !important; }
.theme-purple { background: linear-gradient(180deg, #32124d 0%, #170724 100%) !important; color: #f3f4f6 !important; }
.theme-forest { background: linear-gradient(180deg, #0e3020 0%, #05140d 100%) !important; color: #f3f4f6 !important; }
.theme-blood { background: linear-gradient(180deg, #3d1014 0%, #1c0507 100%) !important; color: #f3f4f6 !important; }
.theme-amber { background: linear-gradient(180deg, #3d240c 0%, #1c0e05 100%) !important; color: #f3f4f6 !important; }
.theme-rose { background: linear-gradient(180deg, #3d122b 0%, #1c0613 100%) !important; color: #f3f4f6 !important; }
.theme-cyan { background: linear-gradient(180deg, #09343d 0%, #04171c 100%) !important; color: #f3f4f6 !important; }
.theme-neon-pink { background: linear-gradient(180deg, #3d0c26 0%, #19030e 100%) !important; color: #f472b6 !important; }
.theme-sunset-orange { background: linear-gradient(180deg, #381504 0%, #140701 100%) !important; color: #fb923c !important; }
.theme-deep-navy { background: linear-gradient(180deg, #0a1733 0%, #040917 100%) !important; color: #93c5fd !important; }

/* ==================== 2. СВЕТЛЫЕ ТЕМЫ (ЧЕТКИЙ ЧЕРНЫЙ ТЕКСТ) ==================== */
.theme-light-gray {
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%) !important;
    color: #090d16 !important;
}

.theme-pure-white {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    color: #090d16 !important;
}

.theme-milk-cream {
    background: linear-gradient(180deg, #e7dfc6 0%, #d5cbb0 100%) !important;
    color: #1c1917 !important;
}

.theme-light-gray-pattern {
    background-color: #64748b !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctext x='16' y='42' font-size='26' opacity='0.25'%3E%F0%9F%90%B1%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    color: #090d16 !important;
}

.theme-white-pattern {
    background-color: #e2e8f0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctext x='16' y='42' font-size='26' opacity='0.25'%3E%E2%9C%A8%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    color: #090d16 !important;
}

/* Принудительно темный текст для светлых стилей */
.card.theme-light-gray, .card.theme-pure-white, .card.theme-milk-cream, .card.theme-light-gray-pattern, .card.theme-white-pattern,
.battle-card.theme-light-gray, .battle-card.theme-pure-white, .battle-card.theme-milk-cream, .battle-card.theme-light-gray-pattern, .battle-card.theme-white-pattern,
.leader-item.theme-light-gray, .leader-item.theme-pure-white, .leader-item.theme-milk-cream, .leader-item.theme-light-gray-pattern, .leader-item.theme-white-pattern,
.shop-item-card.theme-light-gray, .shop-item-card.theme-pure-white, .shop-item-card.theme-milk-cream, .shop-item-card.theme-light-gray-pattern, .shop-item-card.theme-white-pattern,
.visual-pill.theme-light-gray, .visual-pill.theme-pure-white, .visual-pill.theme-milk-cream, .visual-pill.theme-light-gray-pattern, .visual-pill.theme-white-pattern {
    color: #090d16 !important;
}

.theme-light-gray .shop-item-title, .theme-pure-white .shop-item-title, .theme-milk-cream .shop-item-title, .theme-light-gray-pattern .shop-item-title, .theme-white-pattern .shop-item-title,
.theme-light-gray h2, .theme-light-gray h3, .theme-pure-white h2, .theme-pure-white h3, .theme-milk-cream h2, .theme-milk-cream h3,
.theme-light-gray .battle-title, .theme-pure-white .battle-title, .theme-milk-cream .battle-title,
.theme-light-gray .leader-name, .theme-pure-white .leader-name, .theme-milk-cream .leader-name {
    color: #090d16 !important;
    font-weight: 900 !important;
}

.theme-light-gray .shop-item-desc, .theme-pure-white .shop-item-desc, .theme-milk-cream .shop-item-desc, .theme-light-gray-pattern .shop-item-desc, .theme-white-pattern .shop-item-desc,
.theme-light-gray .spec-label, .theme-pure-white .spec-label, .theme-milk-cream .spec-label,
.theme-light-gray .battle-specs, .theme-pure-white .battle-specs, .theme-milk-cream .battle-specs {
    color: #334155 !important;
    font-weight: 600 !important;
}

/* ==================== 3. ТЕМЫ С ПАТТЕРНАМИ ЭМОДЗИ ==================== */
.theme-jellyfish {
    background-color: #030a16 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctext x='16' y='42' font-size='28' opacity='0.25'%3E%F0%9F%AA%BC%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    color: #e0f2fe !important;
}

.theme-sakura-pattern {
    background-color: #170410 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctext x='16' y='42' font-size='28' opacity='0.25'%3E%F0%9F%8C%B8%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    color: #fbcfe8 !important;
}

.theme-fire-pattern {
    background-color: #160404 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctext x='16' y='42' font-size='28' opacity='0.22'%3E%F0%9F%94%A5%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    color: #fed7aa !important;
}

.theme-lightning-pattern {
    background-color: #0d061c !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctext x='16' y='42' font-size='28' opacity='0.24'%3E%E2%9A%A1%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    color: #fef08a !important;
}

.theme-skull-pattern {
    background-color: #0d0d12 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctext x='16' y='42' font-size='28' opacity='0.22'%3E%F0%9F%92%80%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    color: #f3f4f6 !important;
}

.theme-race-pattern {
    background-color: #0a0a0f !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctext x='16' y='42' font-size='28' opacity='0.22'%3E%F0%9F%8F%81%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    color: #ffffff !important;
}

.theme-crown-pattern {
    background-color: #171103 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctext x='16' y='42' font-size='28' opacity='0.24'%3E%F0%9F%91%91%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    color: #fde047 !important;
}

.theme-car-pattern {
    background-color: #080f1a !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctext x='16' y='42' font-size='28' opacity='0.22'%3E%F0%9F%8F%8E%EF%B8%8F%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    color: #93c5fd !important;
}

.theme-money-pattern {
    background-color: #041408 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctext x='16' y='42' font-size='28' opacity='0.22'%3E%F0%9F%92%B8%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    color: #86efac !important;
}

/* ==================== БАЗОВАЯ КАРТОЧКА ==================== */
.card {
    background-color: var(--secondary-bg);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    border: 2px solid #28283f;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.car-photo-wrapper {
    width: 100%;
    height: 190px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-color: #1f1f2e;
    margin-bottom: 10px;
}
.preview-wrapper {
    height: 150px;
    margin-bottom: 0;
}
.car-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.1s ease-out;
}

/* ИНПУТЫ */
.styled-input, 
input[type="text"].styled-input, 
input[list].styled-input, 
select.styled-input,
textarea.styled-input {
    width: 100%;
    background: #11111a !important;
    border: 1px solid #2d2d42 !important;
    color: #f3f4f6 !important;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.styled-input:focus {
    border-color: var(--accent-purple) !important;
}

.form-divider {
    border: 0;
    height: 1px;
    background: #252538;
    margin: 16px 0;
}

/* ПАЛИТРА НЕОНА */
.color-picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}
.color-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.color-dot.active {
    border-color: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.color-dot.locked::after {
    content: '🔒';
    font-size: 13px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.9));
}
.color-dot.locked {
    opacity: 0.55;
}

.empty-garage-card { text-align: center; margin-top: 5vh; padding: 28px 16px; }
.empty-icon { font-size: 52px; margin-bottom: 12px; }
.empty-desc { color: var(--hint-color); font-size: 13px; line-height: 1.5; margin-bottom: 20px; }

.garage-btn-group { display: flex; gap: 8px; margin-top: 14px; }
.btn-secondary { flex: 1; background: #262638; }
.btn-cancel { margin-top: 8px; background: transparent; border: 1px solid #33334d; }
.btn-start { max-width: 220px; margin: 0 auto; display: block; }

.spec-row { margin-bottom: 4px; font-size: 13px; }
.spec-label { color: var(--hint-color); }

.form-heading { margin-top: 0; margin-bottom: 12px; }
.form-group { margin-bottom: 14px; text-align: left; }
.form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--hint-color);
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}
.val-badge { color: var(--accent-purple); font-weight: bold; }
.hidden-input { display: none; }

input[type="range"] {
    width: 100%;
    accent-color: var(--accent-purple);
    cursor: pointer;
}

/* ==================== НОВАЯ СЕТКА КАРТОЧЕК В КОНФИГУРАТОРЕ ==================== */
.collapsible-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 120px; /* Показывает первые 2 ряда */
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
    position: relative;
}
.collapsible-grid.expanded {
    max-height: 900px; /* Раскрытие всех карточек */
}

/* Стильная крупная плашка в конфигураторе */
.visual-pill {
    min-height: 52px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    border: 2px solid #2d2d42;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
    background: #11111a;
}
.visual-pill:active {
    transform: scale(0.97);
}
.visual-pill.active {
    border-color: var(--accent-purple) !important;
    box-shadow: 0 0 12px var(--accent-purple) !important;
}
.visual-pill.locked {
    opacity: 0.65;
}
.visual-pill-name {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.visual-pill-lock {
    font-size: 12px;
    opacity: 0.85;
}

/* Кнопка «Показать все / Свернуть» */
.toggle-collapse-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed #3a3a55;
    color: var(--hint-color);
    font-size: 11px;
    font-weight: 700;
    padding: 6px;
    border-radius: 8px;
    margin-top: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}
.toggle-collapse-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Базовые пилюли (для топлива, коробки) */
.pill-selector { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.pill-opt {
    flex: 1;
    text-align: center;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 600;
    background: #11111a;
    border: 1px solid #2d2d42;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.pill-opt.active {
    background: var(--accent-purple);
    color: #fff;
    border-color: var(--accent-purple);
}

.preview-box {
    margin-bottom: 14px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px dashed #3a3a55;
}
.preview-badge {
    font-size: 10px;
    font-weight: bold;
    color: var(--accent-purple);
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: inline-block;
}
#prev-title { margin: 8px 0 2px 0; font-size: 16px; }
#prev-engine-line { font-size: 13px; font-weight: 700; color: #8b5cf6; margin-bottom: 4px; }
#prev-desc { font-size: 11px; color: var(--hint-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.photo-upload-trigger {
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
}
.photo-upload-trigger:active { opacity: 0.85; }
.upload-badge {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    pointer-events: none;
    white-space: nowrap;
}
.photo-adjust-box {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 8px;
    border: 1px solid #28283a;
}

button.standard-btn {
    width: 100%;
    background: linear-gradient(135deg, #8a2be2, #a855f7);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--accent-purple-glow);
}

/* БАТЛЫ */
#battle-start { text-align: center; margin-top: 20vh; padding: 0 20px; }
.battle-start-icon { font-size: 50px; margin-bottom: 12px; }
.start-title {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 900;
    background: linear-gradient(135deg, #c084fc, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.start-subtitle { color: #e9d5ff; font-size: 15px; font-weight: 500; margin: 0 0 12px 0; }
.start-instruction { color: #a855f7; font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 24px; }

#arena-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: calc(100vh - 140px);
    position: relative;
}
.battle-card {
    flex: 1 1 0;
    height: 50%;
    min-height: 0;
    border-radius: 14px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    will-change: transform, opacity;
    touch-action: none;
    border: 2px solid #28283f;
}
.battle-photo-wrapper {
    flex: 0 0 58%;
    height: 58%;
    width: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}
.battle-photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.zoom-hint {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 5px;
    pointer-events: none;
}
.battle-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px;
    cursor: grab;
    touch-action: none;
}
.battle-title { font-size: 15px; font-weight: 800; margin: 0 0 2px 0; }
.battle-engine { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.battle-specs { font-size: 11px; color: var(--hint-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swipe-hint {
    text-align: center;
    padding: 5px 0;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    pointer-events: none;
}
.vs-divider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #8a2be2, #4c1d95);
    color: white;
    font-weight: 900;
    font-size: 11px;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--bg-color);
    z-index: 10;
    box-shadow: 0 0 12px var(--accent-purple);
    pointer-events: none;
}

/* ЛИДЕРБОРД */
.top-title { margin-top: 0; margin-bottom: 12px; }
.leader-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: transform 0.15s ease;
    border: 2px solid #28283f;
    position: relative;
}
.leader-rank { font-size: 16px; font-weight: bold; width: 32px; text-align: center; }
.leader-photo { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; margin: 0 10px; background: #333; cursor: pointer; }
.leader-info { flex: 1; }
.leader-name { font-size: 14px; font-weight: 600; }
.leader-elo { font-size: 15px; font-weight: bold; color: var(--accent-purple); }
.my-leader-card { border: 2px solid var(--accent-purple); margin-top: 16px; }

/* НИЖНЯЯ НАВИГАЦИЯ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: 56px;
    background: #11111a;
    display: flex;
    border-top: 1px solid #222233;
    z-index: 9999;
}
.nav-btn {
    flex: 1;
    background: transparent;
    color: var(--hint-color);
    border: none;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.nav-btn.active { color: var(--accent-purple); font-weight: bold; }

/* КАРТА И СХОДКИ */
#tab-map {
    position: relative;
    width: 100%;
    height: calc(100vh - 140px);
}

.map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}
#meets-map {
    width: 100%;
    height: 100%;
    background: #0b0b10;
}

.map-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.crosshair-pin {
    font-size: 38px;
    filter: drop-shadow(0 4px 10px rgba(139, 92, 246, 0.8));
    animation: bouncePin 1s ease-in-out infinite alternate;
}
.crosshair-hint {
    background: rgba(15, 15, 23, 0.95);
    border: 1px solid var(--accent-purple);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    margin-top: -6px;
    white-space: nowrap;
}
@keyframes bouncePin {
    0% { transform: translateY(0); }
    100% { transform: translateY(-8px); }
}

.map-locate-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(22, 22, 34, 0.95);
    border: 1px solid #33334d;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    cursor: pointer;
    pointer-events: auto;
}

.map-bottom-bar {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5000 !important;
    width: calc(100% - 24px);
    max-width: 420px;
    pointer-events: auto !important;
}
.map-action-btn {
    padding: 12px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.8);
    pointer-events: auto !important;
}
.btn-list-meets {
    flex: 0 0 35%;
    background: #1b1b2a;
    border: 1px solid #363652 !important;
    color: #fff;
}
.btn-create-meet {
    flex: 1;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: #fff;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45);
}
.btn-cancel-target {
    flex: 1;
    background: #272738 !important;
    color: #e4e4e7 !important;
    border: 1px solid #3f3f5a !important;
}
.btn-confirm-target {
    flex: 1.5;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
}

.leaflet-control-attribution { display: none !important; }
.leaflet-tile {
    filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7) !important;
}
.leaflet-container { background: #0b0b10 !important; }

/* ПОЛНОЭКРАННЫЕ ПАНЕЛИ */
.full-screen-pane {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: calc(100vh - 56px);
    background: var(--bg-color);
    padding: 10px 10px 20px 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 6000;
}
.pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px 12px 4px;
    border-bottom: 1px solid #1f1f2e;
    margin-bottom: 12px;
}
.pane-header h3 { margin: 0; font-size: 18px; font-weight: 800; }
.close-pane-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid #2e2e42;
    color: #e4e4e7;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* ВЕРХНЯЯ ШАПКА И ВАЛЮТА */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px 10px 6px;
    margin-bottom: 4px;
}
.app-brand {
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #c084fc, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.currency-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid var(--accent-purple);
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
}
.currency-badge:active { transform: scale(0.95); }
.currency-icon { font-size: 14px; }
.currency-plus {
    background: var(--accent-purple);
    color: #fff;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    margin-left: 2px;
}

/* ==================== МАГАЗИН ==================== */
.shop-balance-banner {
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed #3a3a55;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
}
.shop-big-nuts { font-size: 18px; font-weight: 900; color: #a78bfa; }
.shop-section-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--hint-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.shop-item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a1a27;
    border: 2px solid #26263a;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    position: relative;
    transition: transform 0.15s ease;
}
.shop-card-large {
    min-height: 72px !important;
    padding: 16px 16px !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
}
.shop-item-title { font-size: 14px; font-weight: 800; color: #f3f4f6; margin-bottom: 4px; }
.shop-item-desc { font-size: 12px; color: var(--hint-color); line-height: 1.35; }

.buy-btn {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border: none;
    font-weight: 800;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}
.btn-owned {
    background: #272738 !important;
    color: #9ca3af !important;
    box-shadow: none !important;
    cursor: default !important;
}

.shop-colors-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shop-color-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #141420;
    border: 1px solid #28283d;
    padding: 10px 14px;
    border-radius: 12px;
}
.shop-color-preview { display: flex; align-items: center; gap: 12px; }
.shop-color-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
}
.shop-color-name { font-size: 13px; font-weight: 800; }

.shop-tabs-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.shop-tab-btn {
    flex: 1;
    padding: 10px 6px;
    font-size: 13px;
    font-weight: 800;
    background: #191929;
    border: 1px solid #2d2d46;
    color: var(--hint-color);
    border-radius: 10px;
    cursor: pointer;
}
.shop-tab-btn.active {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: #fff;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4);
}
.btn-rub {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
}

/* СЕЗОННЫЙ БАННЕР ТОПА */
.season-reward-banner {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(236, 72, 153, 0.18));
    border: 1px solid #8b5cf6;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.season-left { display: flex; flex-direction: column; gap: 2px; }
.season-badge { font-size: 10px; font-weight: 900; color: #c084fc; letter-spacing: 0.5px; }
.season-timer { font-size: 12px; font-weight: 700; color: #fff; }
.season-prizes { font-size: 11px; font-weight: 800; color: #e9d5ff; }

/* ЛЕНТА СЛОТОВ ГАРАЖА */
.garage-slots-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.garage-slots-bar::-webkit-scrollbar { display: none; }
.slot-pill-btn {
    flex: 0 0 auto;
    background: #181827;
    border: 1px solid #2b2b42;
    color: var(--hint-color);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.slot-pill-btn.active {
    background: #282842;
    border-color: var(--accent-purple);
    color: #fff;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}
.slot-pill-btn.btn-add-slot {
    background: rgba(139, 92, 246, 0.15);
    border: 1px dashed var(--accent-purple);
    color: #c084fc;
}

/* ОВЕРЛЕИ */
#fire-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(5, 5, 8, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(6px);
}
.choice-title {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 0 0 20px #8b5cf6;
}
.spark {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    animation: floatUp 0.8s ease-out forwards;
}
@keyframes floatUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-140px) scale(0); opacity: 0; }
}

#photo-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
}
#photo-modal img { max-width: 100%; max-height: 85vh; border-radius: 10px; object-fit: contain; }

.report-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    z-index: 15;
    backdrop-filter: blur(4px);
}
.report-btn:active { transform: scale(0.85); }
.leader-report-btn {
    background: transparent;
    border: none;
    font-size: 14px;
    padding: 6px;
    cursor: pointer;
    opacity: 0.6;
}

.banned-banner {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    color: #fca5a5;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.card-banned {
    border-color: #ef4444 !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3) !important;
}

.battle-history-box {
    margin-top: 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #28283f;
    border-radius: 10px;
    padding: 10px 12px;
}
.history-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    color: var(--hint-color);
    margin-bottom: 8px;
    text-transform: uppercase;
}
.history-sub { font-size: 11px; opacity: 0.6; font-weight: 500; }
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #12121c;
    border: 1px solid #212133;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
}
.history-opponent {
    font-weight: 600;
    color: #f3f4f6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.history-badge {
    font-weight: 800;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 5px;
}
.badge-win { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
.badge-loss { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.history-empty { font-size: 12px; color: #6b7280; text-align: center; padding: 8px 0; }

.share-box { display: flex; gap: 8px; margin-top: 14px; }
.btn-share-story {
    flex: 1;
    background: linear-gradient(135deg, #0284c7, #06b6d4) !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3) !important;
    font-size: 13px !important;
    padding: 10px 8px !important;
}
.btn-share-chat {
    flex: 1;
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3) !important;
    font-size: 13px !important;
    padding: 10px 8px !important;
}

.meet-price-box {
    margin: 10px 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}
.price-free {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid #22c55e;
    color: #4ade80;
}
.price-paid {
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid #eab308;
    color: #fde047;
}

.leaflet-popup-content-wrapper {
    background: #181824 !important;
    color: #fff !important;
    border: 1px solid #2f2f45 !important;
    border-radius: 12px !important;
    padding: 6px !important;
}
.leaflet-popup-tip { background: #181824 !important; }
.popup-title { font-size: 14px; font-weight: 800; color: #a78bfa; margin-bottom: 4px; }
.popup-info { font-size: 12px; color: #9ca3af; margin-bottom: 8px; }
.popup-cars {
    font-size: 11px;
    color: #d1d5db;
    background: rgba(0,0,0,0.3);
    padding: 4px 6px;
    border-radius: 6px;
    margin-bottom: 8px;
}
.popup-btn {
    width: 100%;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}
.btn-join { background: #22c55e; color: white; }
.btn-leave { background: #ef4444; color: white; }

.user-pulse-marker {
    width: 16px;
    height: 16px;
    background: #3b82f6;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 14px #3b82f6;
    position: relative;
}
.user-pulse-marker::after {
    content: '';
    position: absolute;
    top: -6px; left: -6px; right: -6px; bottom: -6px;
    border-radius: 50%;
    border: 2px solid #60a5fa;
    animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

.meets-filter-row { display: flex; gap: 8px; margin-bottom: 12px; }
.filter-select {
    background: #11111a;
    border: 1px solid #2d2d42;
    color: #f3f4f6;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
}
.meets-items-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 60vh;
}
.meet-card-item {
    background: #13131e;
    border: 1px solid #26263a;
    border-radius: 10px;
    padding: 10px 12px;
}
.meet-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}
.meet-card-title { font-weight: 800; font-size: 14px; color: #fff; }
.meet-card-dist { font-size: 11px; color: #a78bfa; font-weight: 700; background: rgba(139,92,246,0.15); padding: 2px 6px; border-radius: 6px; }
.meet-card-time { font-size: 12px; color: #9ca3af; margin-bottom: 6px; }
.meet-card-desc { font-size: 12px; color: #d1d5db; margin-bottom: 8px; }
.meet-card-clickable {
    cursor: pointer;
    transition: transform 0.15s ease;
}
.meet-card-clickable:active { transform: scale(0.98); }

.form-row { display: flex; gap: 8px; }
input[type="date"], input[type="time"] {
    color-scheme: dark !important;
    cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.8) !important;
    opacity: 0.9 !important;
    cursor: pointer;
    font-size: 16px;
}

/* МОДАЛКА ПОДТВЕРЖДЕНИЯ ПОКУПКИ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 4, 8, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(6px);
}
.confirm-modal-box {
    background: #181827;
    border: 1px solid var(--accent-purple);
    border-radius: 16px;
    padding: 20px;
    width: 90%;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    animation: popIn 0.2s ease-out;
}
@keyframes popIn {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.confirm-icon { font-size: 40px; margin-bottom: 8px; }
.confirm-title { margin: 0 0 8px 0; font-size: 17px; font-weight: 800; color: #fff; }
.confirm-text { font-size: 13px; color: var(--hint-color); margin-bottom: 20px; line-height: 1.4; }
.confirm-btn-row { display: flex; gap: 10px; }
.confirm-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    border: none;
    cursor: pointer;
}
.btn-cancel-buy { background: #2b2b3d; color: #e4e4e7; }
.btn-do-buy { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }

.shop-grid-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ==================== КВАДРАТНЫЕ ПЛАШКИ ДОНАТА (GRID 3 В РЯД) ==================== */
.donate-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}

.donate-square-card {
    background: #151522;
    border: 2px solid #28283e;
    border-radius: 16px;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    aspect-ratio: 1 / 1.15;
    position: relative;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.donate-square-card:active {
    transform: scale(0.95);
}

.donate-square-card.hot-card {
    border-color: #eab308;
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.15);
}

.donate-square-card.max-card {
    border-color: #ec4899;
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.15);
}

.donate-sq-icon {
    font-size: 26px;
    margin-top: 2px;
}

.donate-sq-nuts {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
}

.donate-sq-sub {
    font-size: 11px;
    font-weight: 700;
    color: var(--hint-color);
    margin-bottom: 6px;
}

.donate-sq-btn {
    width: 100%;
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 900;
    padding: 7px 0;
    cursor: pointer;
    text-align: center;
}

.donate-sq-btn.btn-star {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.donate-sq-btn.btn-rub {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.sq-badge-hot, .sq-badge-max {
    position: absolute;
    top: -7px;
    right: 50%;
    transform: translateX(50%);
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
    text-transform: uppercase;
}

.sq-badge-hot {
    background: #eab308;
    color: #000;
}

.sq-badge-max {
    background: #ec4899;
    color: #fff;
}

/* ==================== СТАТУСНЫЕ БЕЙДЖИ ==================== */
.card-badge-pill {
    font-size: 10px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-block;
    white-space: nowrap;
}
.badge-vip-style {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}
.badge-turbo-style {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}
.badge-drift-style {
    background: linear-gradient(135deg, #06b6d4, #0284c7);
    color: #fff !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
}
.badge-stage-style {
    background: linear-gradient(135deg, #a855f7, #6b21a8);
    color: #fff !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}
.badge-custom-style {
    background: linear-gradient(135deg, #10b981, #047857);
    color: #fff !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}
.badge-legend-style {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: #000 !important;
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.8);
}
.badge-champ-style {
    background: linear-gradient(135deg, #ec4899, #be185d);
    color: #fff !important;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.7);
}

/* ==================== АНИМАЦИИ РАМОК КАРТОЧЕК ==================== */

/* 1. RGB NEON WAVE */
.card.frame-rgb,
#prev-card.frame-rgb,
.battle-card.frame-rgb,
.leader-item.frame-rgb,
.shop-item-card.frame-rgb,
.visual-pill.frame-rgb {
    border: 2px solid #ff007f;
    animation: rgbFramePulseAnim 3s linear infinite;
    -webkit-animation: rgbFramePulseAnim 3s linear infinite;
}

@keyframes rgbFramePulseAnim {
    0% {
        border-color: #ff007f;
        box-shadow: 0 0 16px rgba(255, 0, 127, 0.8), inset 0 0 6px rgba(255, 0, 127, 0.3);
    }
    20% {
        border-color: #8b5cf6;
        box-shadow: 0 0 16px rgba(139, 92, 246, 0.8), inset 0 0 6px rgba(139, 92, 246, 0.3);
    }
    40% {
        border-color: #3b82f6;
        box-shadow: 0 0 16px rgba(59, 130, 246, 0.8), inset 0 0 6px rgba(59, 130, 246, 0.3);
    }
    60% {
        border-color: #06b6d4;
        box-shadow: 0 0 16px rgba(6, 182, 212, 0.8), inset 0 0 6px rgba(6, 182, 212, 0.3);
    }
    80% {
        border-color: #22c55e;
        box-shadow: 0 0 16px rgba(34, 197, 94, 0.8), inset 0 0 6px rgba(34, 197, 94, 0.3);
    }
    100% {
        border-color: #ff007f;
        box-shadow: 0 0 16px rgba(255, 0, 127, 0.8), inset 0 0 6px rgba(255, 0, 127, 0.3);
    }
}

/* 2. КАРБОНОВЫЙ БОРДЮР */
.card.frame-carbon,
#prev-card.frame-carbon,
.battle-card.frame-carbon,
.leader-item.frame-carbon,
.shop-item-card.frame-carbon,
.visual-pill.frame-carbon {
    border: 2px dashed #71717a !important;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.9), inset 0 0 6px rgba(255, 255, 255, 0.1) !important;
}

/* 3. ОГНЕННАЯ ПУЛЬСАЦИЯ */
.card.frame-fire,
#prev-card.frame-fire,
.battle-card.frame-fire,
.leader-item.frame-fire,
.shop-item-card.frame-fire,
.visual-pill.frame-fire {
    border: 2px solid #ea580c;
    animation: fireBreathingAnim 1.2s ease-in-out infinite alternate;
    -webkit-animation: fireBreathingAnim 1.2s ease-in-out infinite alternate;
}

@keyframes fireBreathingAnim {
    0% {
        border-color: #ea580c;
        box-shadow: 0 0 8px rgba(234, 88, 12, 0.6), inset 0 0 3px rgba(234, 88, 12, 0.25);
    }
    100% {
        border-color: #ef4444;
        box-shadow: 0 0 26px rgba(239, 68, 68, 0.95), inset 0 0 10px rgba(234, 88, 12, 0.5);
    }
}

/* 4. ЭЛЕКТРО-НЕОН */
.card.frame-electro,
#prev-card.frame-electro,
.battle-card.frame-electro,
.leader-item.frame-electro,
.shop-item-card.frame-electro,
.visual-pill.frame-electro {
    border: 2px solid #06b6d4;
    animation: electroPulseAnim 1.3s ease-in-out infinite alternate;
    -webkit-animation: electroPulseAnim 1.3s ease-in-out infinite alternate;
}

@keyframes electroPulseAnim {
    0% {
        border-color: #06b6d4;
        box-shadow: 0 0 8px rgba(6, 182, 212, 0.6), inset 0 0 3px rgba(6, 182, 212, 0.25);
    }
    100% {
        border-color: #38bdf8;
        box-shadow: 0 0 26px rgba(56, 189, 248, 0.95), inset 0 0 10px rgba(6, 182, 212, 0.5);
    }
}