@font-face {
    font-family: 'Reaver';
    src: url('/fonts/Reaver-Bold.woff') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Radiance';
    src: url('/fonts/radiance.woff') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ============================================
   ТЕМАТИЧЕСКИЕ ПЕРЕМЕННЫЕ
   ============================================ */

/* snow */
:root {
    /* Основные цвета */
    --color-bg-primary: #0a1628;
    --color-bg-secondary: #0f1f3a;
    --color-bg-tertiary: rgba(15, 31, 58, 0.85);
    --color-bg-overlay: rgba(0, 0, 0, 0.4);
    --color-bg-overlay-dark: rgba(0, 0, 0, 0.7);
    --color-bg-overlay-darker: rgba(0, 0, 0, 0.8);

    /* Текст */
    --color-text-primary: #ffffff;
    --color-text-secondary: #e8f4f8;
    --color-text-accent: #87ceeb;
    --color-text-accent-bright: #b0e0e6;
    --color-text-muted: #b8d4e0;
    --color-text-dark: #000000;

    /* Акцентные цвета */
    --color-accent-primary: #4a9eff;
    --color-accent-secondary: #6bb6ff;
    --color-accent-bright: #87ceeb;
    --color-accent-glow: #b0e0e6;

    /* Границы */
    --color-border-primary: rgba(255, 255, 255, 0.1);
    --color-border-accent: rgba(74, 158, 255, 0.3);
    --color-border-accent-bright: rgba(135, 206, 235, 0.5);
    --color-border-accent-strong: #87ceeb;

    /* Градиенты */
    --gradient-accent: linear-gradient(90deg, rgba(74, 158, 255, 0.2), rgba(135, 206, 235, 0.2));
    --gradient-accent-bright: linear-gradient(90deg, rgba(74, 158, 255, 0.3), rgba(135, 206, 235, 0.3));
    --gradient-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1));

    /* Тени */
    --shadow-accent: 0 0 15px rgba(135, 206, 235, 0.1);
    --shadow-accent-bright: 0 0 20px rgba(135, 206, 235, 0.4);
    --shadow-accent-strong: 0 0 30px rgba(135, 206, 235, 0.6);

    /* Цвета для main.js */
    --js-mana-gradient-start: #4a9eff;
    --js-mana-gradient-end: #2a7acc;
    --js-hp-gradient-start: #D80000;
    --js-hp-gradient-end: #7A0000;
    --js-false-info-color: #b8d4e0;
    --js-modal-bg: rgba(10, 22, 40, 0.85);
    --js-modal-gradient-start: #0f1f3a;
    --js-modal-gradient-middle: #1a2f4a;
    --js-modal-gradient-end: #152840;
    --js-modal-border: rgb(135, 206, 235);
    --js-modal-shadow-1: rgba(135, 206, 235, 0.3);
    --js-modal-shadow-2: rgba(135, 206, 235, 0.1);
    --js-modal-overlay-gradient-start: rgba(135, 206, 235, 0.05);
    --js-modal-overlay-gradient-middle: rgba(135, 206, 235, 0.02);
    --js-modal-title-color: rgb(135, 206, 235);
    --js-modal-title-shadow: rgba(135, 206, 235, 0.5);
    --js-button-bg: rgba(135, 206, 235, 0.15);
    --js-button-color: rgb(135, 206, 235);
    --js-button-border: rgb(135, 206, 235);
    --js-button-secondary-bg: rgba(135, 206, 235, 0.05);
    --js-button-secondary-color: rgba(135, 206, 235, 0.8);
    --js-button-secondary-border: rgba(135, 206, 235, 0.6);
    --js-button-hover-bg: rgba(135, 206, 235, 0.25);
    --js-button-hover-shadow: rgba(135, 206, 235, 0.4);
    --js-button-hover-shadow-small: rgba(135, 206, 235, 0.3);
    --js-error-color: #ffb6c1;
    --js-support-gradient-start: #87ceeb;
    --js-support-gradient-end: #4a9eff;
    --js-support-text-color: #0a1628;
    --js-support-shadow: rgba(135, 206, 235, 0.3);
    --js-donation-item-bg: rgba(255, 255, 255, 0.1);
    --js-donation-item-bg-hover: rgba(255, 255, 255, 0.2);
    --js-donation-border: rgba(10, 22, 40, 0.3);
    --js-donation-text-color: #0a1628;
    --js-close-button-color: #87ceeb;
    --js-close-button-hover: #fff;
    --js-overlay-bg: rgba(0, 0, 0, 0.7);
    --js-donation-modal-gradient-start: #0f1f3a;
    --js-donation-modal-gradient-end: #0a1628;
    --js-donation-modal-border: #87ceeb;
    --js-donation-modal-shadow: rgba(135, 206, 235, 0.4);
    --js-donation-modal-title-color: #87ceeb;
    --js-donation-modal-timer-color: #fff;
    --js-donation-modal-timer-bg: rgba(135, 206, 235, 0.2);
    --js-donation-modal-timer-border: rgba(135, 206, 235, 0.5);
    --js-donation-modal-button-gradient-start: #87ceeb;
    --js-donation-modal-button-gradient-end: #4a9eff;
    --js-donation-modal-button-shadow: rgba(135, 206, 235, 0.4);

    /* Дополнительные переменные для страниц */
    --js-input-color: #87ceeb;
    --js-input-border-focus: #87ceeb;
    --js-filter-active-bg: rgba(135, 206, 235, 0.2);
    --js-filter-active-border: #87ceeb;
    --js-filter-active-shadow: rgba(135, 206, 235, 0.3);
    --js-filter-hover-bg: rgba(135, 206, 235, 0.3);
    --js-progress-bar-bg: rgba(135, 206, 235, 0.2);
    --js-progress-bar-border: rgba(135, 206, 235, 0.3);
    --js-progress-bar-shadow: rgba(135, 206, 235, 0.2);
    --js-promocode-hover-border: #87ceeb;
    --js-promocode-hover-bg: rgba(135, 206, 235, 0.1);
    --js-promocode-hover-shadow: rgba(135, 206, 235, 0.2);
    --js-section-title-border: rgba(135, 206, 235, 0.3);

    /* Переменные для модальных окон и футера */
    --js-modal-wings-bg: linear-gradient(145deg, rgba(30, 45, 70, 0.95), rgba(35, 50, 75, 0.95));
    --js-modal-naga-bg: rgba(40, 55, 80, 0.95);
    --js-footer-bg: rgba(25, 35, 50, 0.95);
    --js-footer-text-color: rgba(200, 220, 240, 0.9);
    --js-ticker-text-color: rgba(200, 220, 240, 0.95);
    --js-ticker-border-color: rgba(135, 206, 235, 0.3);

    /* Переменные для эффекта снега на блоках */
    --js-snow-cap-color-1: rgba(255, 255, 255, 0.95);
    --js-snow-cap-color-2: rgba(255, 255, 255, 0.85);
    --js-snow-cap-color-3: rgba(255, 255, 255, 0.65);
    --js-snow-cap-color-4: rgba(255, 255, 255, 0.4);
    --js-snow-cap-color-5: rgba(255, 255, 255, 0.2);
    --js-snow-cap-shadow-1: rgba(255, 255, 255, 0.4);
    --js-snow-cap-shadow-2: rgba(255, 255, 255, 0.3);
    --js-snow-cap-shadow-3: rgba(255, 255, 255, 0.2);
    --js-snow-cap-inset-1: rgba(255, 255, 255, 0.2);
    --js-snow-cap-inset-2: rgba(255, 255, 255, 0.1);
    --js-snow-cap-inset-3: rgba(255, 255, 255, 0.3);

    /* Дополнительные переменные для модалок и эффектов */
    --js-modal-shadow-yellow: 0 0 20px rgba(135, 206, 235, 0.2);
    --js-modal-inset-yellow: inset 0 0 20px rgba(135, 206, 235, 0.1);
    --js-modal-inset-yellow-strong: inset 0 0 30px rgba(135, 206, 235, 0.15);
    --js-toggle-active-gradient: linear-gradient(135deg, rgba(135, 206, 235, 0.3), rgba(135, 206, 235, 0.1));
    --js-input-placeholder: rgba(135, 206, 235, 0.6);
    --js-search-results-bg: linear-gradient(135deg, rgba(135, 206, 235, 0.3), rgba(135, 206, 235, 0.1));
    --js-search-results-color: rgb(135, 206, 235);
    --js-level-indicator-border: rgba(135, 206, 235, 0.2);
    --js-level-btn-border: rgba(135, 206, 235, 0.4);
    --js-level-btn-hover-bg: rgba(135, 206, 235, 0.4);
    --js-level-dot-hover-bg: rgba(135, 206, 235, 0.6);
    --js-trait-glow-bg: radial-gradient(circle at center, rgba(135, 206, 235, 0.1) 0%, transparent 70%);
    --js-evolution-checkmark: #87ceeb;
    --js-star-shadow-outer: 0 0 20px rgba(135, 206, 235, 0.4);
    --js-star-shadow-inset: inset 0 0 20px rgba(135, 206, 235, 0.1);
    --js-star-filter-shadow: drop-shadow(0 0 5px rgba(135, 206, 235, 0.8));
    --js-star-modal-shadow: 0 0 30px rgba(135, 206, 235, 0.3);
    --js-star-description-border: rgba(135, 206, 235, 0.3);
    --js-star-close-hover-bg: rgba(135, 206, 235, 0.1);
    --js-title-border-strong: rgba(135, 206, 235, 0.6);
    --js-title-modal-shadow-inset: inset 0 0 30px rgba(135, 206, 235, 0.15);
    --js-level-8-gradient: linear-gradient(135deg, rgba(135, 206, 235, 0.3), rgba(20, 20, 20, 0.8));
    --js-treasure-hover-border: rgba(135, 206, 235, 0.7);
    --js-treasure-hover-shadow: 0 0 20px rgba(135, 206, 235, 0.2);
    --js-treasure-shimmer-gradient: linear-gradient(45deg, rgba(135, 206, 235, 0.1) 0%, rgba(135, 206, 235, 0.3) 25%, rgba(135, 206, 235, 0.1) 50%, rgba(135, 206, 235, 0.3) 75%, rgba(135, 206, 235, 0.1) 100%);
    --js-treasure-image-shadow: drop-shadow(0 0 10px rgba(135, 206, 235, 0.3));
    --js-wings-progress-gradient: linear-gradient(180deg, rgba(135, 206, 235, 0.8) 0%, rgba(135, 206, 235, 0.4) 50%, rgba(135, 206, 235, 0.8) 100%);
    --js-wings-progress-shadow: 0 0 8px rgba(135, 206, 235, 0.3);
    --js-wings-info-bg: rgba(135, 206, 235, 0.3);
    --js-wings-info-border: rgba(135, 206, 235, 0.5);
    --js-wings-info-hover-bg: rgba(135, 206, 235, 0.5);
    --js-wings-tooltip-border: rgba(135, 206, 235, 0.4);
    --js-wings-nav-hover-bg: rgba(135, 206, 235, 0.4);
    --js-wings-image-shadow: drop-shadow(0 0 20px rgba(135, 206, 235, 0.3));
    --js-naga-tooltip-border: rgba(135, 206, 235, 0.45);
    --js-naga-tooltip-close-color: rgba(135, 206, 235, 0.6);
    --js-naga-tooltip-close-hover: rgba(135, 206, 235, 1);
    --js-treasure-text-muted: rgba(135, 206, 235, 0.6);
}

/* original - закомментировано, раскомментируйте для возврата к оригинальной теме
:root {
    Основные цвета
    --color-bg-primary: #0e0e0e;
    --color-bg-secondary: #1a1a1a;
    --color-bg-tertiary: rgba(30, 30, 30, 0.85);
    --color-bg-overlay: rgba(0, 0, 0, 0.4);
    --color-bg-overlay-dark: rgba(0, 0, 0, 0.7);
    --color-bg-overlay-darker: rgba(0, 0, 0, 0.8);

    Текст
    --color-text-primary: #fff;
    --color-text-secondary: #eee;
    --color-text-accent: #ffd57a;
    --color-text-accent-bright: #f0d080;
    --color-text-muted: #ccc;
    --color-text-dark: #000;

    Акцентные цвета
    --color-accent-primary: #ff6600;
    --color-accent-secondary: #ff8c00;
    --color-accent-bright: #ffd57a;
    --color-accent-glow: #f0d080;

    Границы
    --color-border-primary: rgba(255, 255, 255, 0.1);
    --color-border-accent: rgba(255, 213, 122, 0.3);
    --color-border-accent-bright: rgba(255, 213, 122, 0.5);
    --color-border-accent-strong: #ffd57a;

    Градиенты
    --gradient-accent: linear-gradient(90deg, rgba(255, 102, 0, 0.2), rgba(255, 213, 122, 0.2));
    --gradient-accent-bright: linear-gradient(90deg, rgba(255, 102, 0, 0.3), rgba(255, 213, 122, 0.3));
    --gradient-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1));

    Тени
    --shadow-accent: 0 0 15px rgba(255, 213, 122, 0.1);
    --shadow-accent-bright: 0 0 20px rgba(255, 213, 122, 0.4);
    --shadow-accent-strong: 0 0 20px rgba(255, 102, 0, 0.6);

    Цвета для main.js
    --js-mana-gradient-start: #00A4DB;
    --js-mana-gradient-end: #007196;
    --js-hp-gradient-start: #D80000;
    --js-hp-gradient-end: #7A0000;
    --js-false-info-color: #888;
    --js-modal-bg: rgba(0, 0, 0, 0.85);
    --js-modal-gradient-start: #1a1a1a;
    --js-modal-gradient-middle: #2a2a2a;
    --js-modal-gradient-end: #1e1e1e;
    --js-modal-border: rgb(240, 208, 128);
    --js-modal-shadow-1: rgba(240, 208, 128, 0.3);
    --js-modal-shadow-2: rgba(240, 208, 128, 0.1);
    --js-modal-overlay-gradient-start: rgba(240, 208, 128, 0.05);
    --js-modal-overlay-gradient-middle: rgba(240, 208, 128, 0.02);
    --js-modal-title-color: rgb(240, 208, 128);
    --js-modal-title-shadow: rgba(240, 208, 128, 0.5);
    --js-button-bg: rgba(240, 208, 128, 0.15);
    --js-button-color: rgb(240, 208, 128);
    --js-button-border: rgb(240, 208, 128);
    --js-button-secondary-bg: rgba(240, 208, 128, 0.05);
    --js-button-secondary-color: rgba(240, 208, 128, 0.8);
    --js-button-secondary-border: rgba(240, 208, 128, 0.6);
    --js-button-hover-bg: rgba(240, 208, 128, 0.25);
    --js-button-hover-shadow: rgba(240, 208, 128, 0.4);
    --js-button-hover-shadow-small: rgba(240, 208, 128, 0.3);
    --js-error-color: #ff9e9e;
    --js-support-gradient-start: #f0d080;
    --js-support-gradient-end: #ff8c00;
    --js-support-text-color: #0e0e0e;
    --js-support-shadow: rgba(240, 208, 128, 0.3);
    --js-donation-item-bg: rgba(255, 255, 255, 0.1);
    --js-donation-item-bg-hover: rgba(255, 255, 255, 0.2);
    --js-donation-border: rgba(14, 14, 14, 0.3);
    --js-donation-text-color: #0e0e0e;
    --js-close-button-color: #f0d080;
    --js-close-button-hover: #fff;
    --js-overlay-bg: rgba(0, 0, 0, 0.7);
    --js-donation-modal-gradient-start: #1a1a1a;
    --js-donation-modal-gradient-end: #0e0e0e;
    --js-donation-modal-border: #f0d080;
    --js-donation-modal-shadow: rgba(240, 208, 128, 0.4);
    --js-donation-modal-title-color: #f0d080;
    --js-donation-modal-timer-color: #fff;
    --js-donation-modal-timer-bg: rgba(240, 208, 128, 0.2);
    --js-donation-modal-timer-border: rgba(240, 208, 128, 0.5);
    --js-donation-modal-button-gradient-start: #f0d080;
    --js-donation-modal-button-gradient-end: #ff8c00;
    --js-donation-modal-button-shadow: rgba(240, 208, 128, 0.4);
    
    Дополнительные переменные для страниц
    --js-input-color: #ffd57a;
    --js-input-border-focus: #ffd57a;
    --js-filter-active-bg: rgba(240, 208, 128, 0.2);
    --js-filter-active-border: #f0d080;
    --js-filter-active-shadow: rgba(240, 208, 128, 0.3);
    --js-filter-hover-bg: rgba(240, 208, 128, 0.3);
    --js-progress-bar-bg: rgba(240, 208, 128, 0.2);
    --js-progress-bar-border: rgba(240, 208, 128, 0.3);
    --js-progress-bar-shadow: rgba(240, 208, 128, 0.2);
    --js-promocode-hover-border: #f0d080;
    --js-promocode-hover-bg: rgba(240, 208, 128, 0.1);
    --js-promocode-hover-shadow: rgba(240, 208, 128, 0.2);
    --js-section-title-border: rgba(255, 213, 122, 0.3);
    
    Дополнительные переменные для модалок и эффектов
    --js-modal-shadow-yellow: 0 0 20px rgba(255, 213, 122, 0.2);
    --js-modal-inset-yellow: inset 0 0 20px rgba(255, 215, 0, 0.1);
    --js-modal-inset-yellow-strong: inset 0 0 30px rgba(255, 215, 0, 0.15);
    --js-toggle-active-gradient: linear-gradient(135deg, rgba(255, 213, 122, 0.3), rgba(255, 213, 122, 0.1));
    --js-input-placeholder: rgba(255, 213, 122, 0.6);
    --js-search-results-bg: linear-gradient(135deg, rgba(255, 213, 122, 0.3), rgba(255, 213, 122, 0.1));
    --js-search-results-color: rgb(255, 213, 122);
    --js-level-indicator-border: rgba(255, 213, 122, 0.2);
    --js-level-btn-border: rgba(255, 213, 122, 0.4);
    --js-level-btn-hover-bg: rgba(255, 213, 122, 0.4);
    --js-level-dot-hover-bg: rgba(255, 213, 122, 0.6);
    --js-trait-glow-bg: radial-gradient(circle at center, rgba(255, 213, 122, 0.1) 0%, transparent 70%);
    --js-evolution-checkmark: #ffd700;
    --js-star-shadow-outer: 0 0 20px rgba(240, 208, 128, 0.4);
    --js-star-shadow-inset: inset 0 0 20px rgba(255, 215, 0, 0.1);
    --js-star-filter-shadow: drop-shadow(0 0 5px rgba(255, 215, 0, 0.8));
    --js-star-modal-shadow: 0 0 30px rgba(255, 213, 122, 0.3);
    --js-star-description-border: rgba(255, 213, 122, 0.3);
    --js-star-close-hover-bg: rgba(240, 208, 128, 0.1);
    --js-title-border-strong: rgba(255, 213, 122, 0.6);
    --js-title-modal-shadow-inset: inset 0 0 30px rgba(255, 215, 0, 0.15);
    --js-level-8-gradient: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(20, 20, 20, 0.8));
    --js-treasure-hover-border: rgba(255, 213, 122, 0.7);
    --js-treasure-hover-shadow: 0 0 20px rgba(255, 213, 122, 0.2);
    --js-treasure-shimmer-gradient: linear-gradient(45deg, rgba(255, 213, 122, 0.1) 0%, rgba(255, 213, 122, 0.3) 25%, rgba(255, 213, 122, 0.1) 50%, rgba(255, 213, 122, 0.3) 75%, rgba(255, 213, 122, 0.1) 100%);
    --js-treasure-image-shadow: drop-shadow(0 0 10px rgba(255, 213, 122, 0.3));
    --js-wings-progress-gradient: linear-gradient(180deg, rgba(240, 208, 128, 0.8) 0%, rgba(240, 208, 128, 0.4) 50%, rgba(240, 208, 128, 0.8) 100%);
    --js-wings-progress-shadow: 0 0 8px rgba(240, 208, 128, 0.3);
    --js-wings-info-bg: rgba(255, 213, 122, 0.3);
    --js-wings-info-border: rgba(255, 213, 122, 0.5);
    --js-wings-info-hover-bg: rgba(255, 213, 122, 0.5);
    --js-wings-tooltip-border: rgba(255, 213, 122, 0.4);
    --js-wings-nav-hover-bg: rgba(255, 213, 122, 0.4);
    --js-wings-image-shadow: drop-shadow(0 0 20px rgba(255, 213, 122, 0.3));
    --js-naga-tooltip-border: rgba(255, 213, 122, 0.45);
    --js-naga-tooltip-close-color: rgba(255, 213, 122, 0.6);
    --js-naga-tooltip-close-hover: rgba(255, 213, 122, 1);
    --js-treasure-text-muted: rgba(240, 208, 128, 0.6);
    
    Переменные для модальных окон и футера
    --js-modal-wings-bg: linear-gradient(145deg, rgba(60, 50, 40, 0.95), rgba(70, 60, 50, 0.95));
    --js-modal-naga-bg: rgba(70, 60, 50, 0.95);
    --js-footer-bg: rgba(50, 40, 30, 0.95);
    --js-footer-text-color: rgba(240, 220, 200, 0.9);
    --js-ticker-text-color: rgba(240, 208, 128, 0.95);
    --js-ticker-border-color: rgba(240, 208, 128, 0.3);
    
    Переменные для эффекта снега на блоках
    --js-snow-cap-color-1: rgba(255, 255, 255, 0.95);
    --js-snow-cap-color-2: rgba(255, 255, 255, 0.85);
    --js-snow-cap-color-3: rgba(255, 255, 255, 0.65);
    --js-snow-cap-color-4: rgba(255, 255, 255, 0.4);
    --js-snow-cap-color-5: rgba(255, 255, 255, 0.2);
    --js-snow-cap-shadow-1: rgba(255, 255, 255, 0.4);
    --js-snow-cap-shadow-2: rgba(255, 255, 255, 0.3);
    --js-snow-cap-shadow-3: rgba(255, 255, 255, 0.2);
    --js-snow-cap-inset-1: rgba(255, 255, 255, 0.2);
    --js-snow-cap-inset-2: rgba(255, 255, 255, 0.1);
    --js-snow-cap-inset-3: rgba(255, 255, 255, 0.3);
}
*/

* {
    box-sizing: border-box;
    font-weight: normal;

}

body {
    margin: 0;
    background: var(--color-bg-primary);
    /* было: #0e0e0e */
    font-family: 'Reaver', serif;
    color: var(--color-text-primary);
    /* было: #fff */
    overflow-x: hidden;
    position: relative;
}

.aghanim-title,
.legendary-title {
    font-family: 'Reaver', serif !important;
}

.ability-desc,

.ability div div div span,
.level-bonuses ol {
    font-family: 'Radiance', "Noto Sans", sans-serif;
}



/* Базовые стили для header */
header {
    padding: 10px;
    text-align: center;
    font-size: 36px;
    color: var(--color-text-accent-bright);
    /* было: #f0d080 */
    border-bottom: 2px solid var(--color-border-primary);
    /* было: rgba(255, 255, 255, 0.1) */
    position: relative;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Розкладка елементів у хедері на десктопі */
.back-button.visible,
.updates-button.visible {
    grid-column: 1;
    justify-self: start;
}

.main_name.lang-visible {
    grid-column: 2;
    justify-self: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}

.lang-select {
    grid-column: 3;
    justify-self: end;
}



[data-lang] {
    display: none;
}

[data-lang="en"].lang-visible,
[data-lang="ua"].lang-visible,
[data-lang="ru"].lang-visible,
[data-lang="zh"].lang-visible {
    display: block;
}



/* Секция обновлений */
.updates-section {
    display: none;
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.updates-content {
    background: var(--color-bg-tertiary);
    border-radius: 15px;
    padding: 30px;
    border: 2px solid var(--color-border-accent);
    box-shadow: var(--shadow-accent);
    overflow-wrap: anywhere;
}

.updates-content h2 {
    color: var(--color-text-accent-bright);
    font-size: 2.5em;
    margin-bottom: 30px;
    text-align: center;

    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 8px var(--shadow-accent-bright);
}

/* Отдельный блок обновления */
.update-block {
    border: 1px solid var(--color-border-primary);
    border-radius: 10px;
    margin: 20px 0;
    overflow: hidden;
    background: var(--color-bg-overlay);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-accent);
}

/* Заголовок блока */
.update-header {
    background: var(--gradient-accent);
    padding: 12px 18px;
    cursor: pointer;
    font-weight: bold;
    font-family: 'Reaver', serif;
    font-size: 1.1em;
    color: var(--color-text-accent-bright);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border-primary);
    transition: background 0.3s ease;
}

.update-header:hover {
    background: var(--js-button-hover-bg);
}

/* Контент внутри блока */
.update-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 18px;
    transition: max-height 0.4s ease, padding 0.4s ease;
    font-family: 'Radiance', sans-serif;
    font-size: 0.95em;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.update-body li {

    margin-left: 18px;
}

.update-block.open .update-body {
    max-height: 100%;
    padding: 18px;
}

/* Иконка + / − */
.toggle-icon {
    font-size: 18px;
    color: var(--color-text-accent-bright);
    margin-left: 10px;
    transition: transform 0.3s ease;
}

/* Контейнер для кнопки "Показать ещё" */
.show-more-updates-container {
    text-align: center;
    margin: 30px 0;
    padding: 20px 0;
}

.show-more-updates-btn {
    background: var(--gradient-accent);
    border: 2px solid var(--color-border-accent-bright);
    color: var(--color-text-accent-bright);
    padding: 12px 30px;
    border-radius: 8px;
    font-family: 'Reaver', serif;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px var(--shadow-accent);
}

.show-more-updates-btn:hover {
    background: var(--gradient-accent-bright);
    border-color: var(--color-border-accent-strong);
    box-shadow: var(--shadow-accent-bright);
    transform: translateY(-2px);
}

.show-more-updates-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Мобільна адаптація сторінки оновлень */
@media (max-width: 769px) {
    .updates-section {
        padding: 16px 10px;
        max-width: 100%;
    }

    .updates-content {
        padding: 14px;
        border-radius: 10px;
    }

    .updates-content h2 {
        font-size: 1.6em;
        margin-bottom: 16px;
    }

    .update-block {
        margin: 14px 0;
        border-radius: 10px;
    }

    .update-header {
        padding: 12px;
        font-size: 1em;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .update-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .toggle-icon {
        font-size: 20px;
        margin-left: 12px;
    }

    .update-body {
        padding: 0 12px;
        font-size: 0.95em;
        line-height: 1.5;
    }

    .update-block.open .update-body {
        padding: 12px;
    }

    .update-body h2 {
        font-size: 1.2em;
        margin: 12px 0 8px;
    }

    .update-body p {
        margin: 8px 0;
    }

    .update-body ul {
        padding-left: 18px;
        margin: 8px 0;
    }

    .update-body li {
        margin-bottom: 6px;
    }

    .update-body img,
    .update-body video {
        max-width: 100%;
        height: auto;
        border-radius: 6px;
    }
}

@media (max-width: 480px) {
    .updates-content h2 {
        font-size: 1.4em;
    }

    .update-header {
        padding: 10px;
        font-size: 0.95em;
    }

    .toggle-icon {
        font-size: 18px;
    }

    .update-body {
        font-size: 0.92em;
    }
}



/* Back/Updates buttons — в ряд, центруються разом з назвою і вибором мови */
.back-button,
.updates-button {
    position: static;
    background: var(--js-button-bg);
    border: 2px solid var(--color-border-accent-strong);
    color: var(--color-text-accent-bright);
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    display: none;
    /* показуємо лише коли .visible */
    white-space: nowrap;
}

.back-button.visible,
.updates-button.visible {
    display: inline-flex;
    align-items: center;
}

.back-button:hover,
.updates-button:hover {
    background: var(--color-accent-bright);
    color: var(--color-text-dark);
}

/* Main container */
.main-container {
    min-height: calc(100vh - 86px);
    position: relative;
    overflow-x: hidden;

}

/* Attribute blocks selection view */
.attribute-blocks-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
    gap: 20px;
    flex-wrap: wrap;
    transition: all 0.5s ease;
}

.attribute-blocks-container.hidden {
    opacity: 0;
    pointer-events: none;
    display: none;
}

.attribute-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-overlay);
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 2;
}

.attribute-block:hover::after {
    opacity: 0;
}

.attribute-block.selected::after {
    display: none;
}

.attribute-block {
    width: 280px;
    height: 350px;
    background: var(--color-bg-overlay);
    border-radius: 15px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.4s ease;
    border: 2px solid var(--color-border-primary);
    position: relative;
    overflow: hidden;
}

.attribute-block:hover {
    background: var(--color-bg-overlay-dark);
    border-color: var(--color-border-accent-strong);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px var(--shadow-accent);
}

.attribute-block.selected {
    position: fixed;
    top: 105px;
    left: 20px;
    width: 300px;
    height: auto;
    background: var(--color-bg-overlay-darker);
    border-color: var(--color-accent-primary);
    box-shadow: var(--shadow-accent-strong);
    z-index: 50;
    cursor: default;
}

.attribute-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--color-text-accent-bright);
    text-transform: uppercase;

}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    justify-content: center;
}

.hero-card {
    position: relative;
    width: 100%;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.hero-card:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-accent);
    border-color: var(--color-accent-primary);
}

.hero-card.selected {
    border-color: var(--color-accent-primary);
    box-shadow: var(--shadow-accent-strong);
}

.hero-image-wrapper {
    width: 100%;
    height: 100%;
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.4s ease;
}

.attribute-block.selected .hero-card:hover .hero-image-wrapper img {
    transform: scale(1.1);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-overlay);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hero-card:hover .hero-overlay {
    opacity: 1;
}

.hero-name {
    position: absolute;
    bottom: 3px;
    width: 100%;
    text-align: center;
    font-size: 10px;

    color: var(--color-text-accent-bright);
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.4s ease;
    z-index: 2;
    text-transform: uppercase;
    pointer-events: none;
}

.hero-card:hover .hero-name {
    opacity: 1;
    transform: translateY(0);
}

/* Hero details view */
.hero-details-container {
    position: absolute;
    top: 0;
    margin-left: 320px;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    display: flex;
    padding: 20px;
    gap: 20px;
}



.hero-details-container.visible {

    opacity: 1;
    pointer-events: auto;
}

/* Hero video section */
.hero-video-section {
    flex: 0 0 300px;
    background: var(--color-bg-overlay-dark);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid var(--color-border-accent);
    height: fit-content;
}

.hero-video-section video {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
    pointer-events: none;
}

.hero-video-section video::-webkit-media-controls {
    display: none !important;
}

.hero-video-section video::-webkit-media-controls-panel {
    display: none !important;
}

.hero-video-section img[data-hero-id] {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.hero-video-section h2 {
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
    margin: 0;
    color: var(--color-text-accent-bright);
    font-size: 1.8em;



    line-height: 40px;
    overflow: hidden;

    text-overflow: ellipsis;
}

/* Hero abilities section */
.hero-abilities-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: calc(100% - 640px);
}

.lang-select {
    position: relative;
    font-size: 14px;
    color: var(--color-text-accent-bright);
    cursor: pointer;
    user-select: none;
    z-index: 2000;
}

.current-lang::after {
    content: " ▼";
    font-size: 10px;
}

.lang-options {
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-accent-strong);
    border-radius: 4px;
    position: absolute;

    right: 0;
    z-index: 100;
    overflow: hidden;
    min-width: 200px;
}

.lang-options li {
    padding: 6px 12px;
    transition: background 0.2s;
}

.lang-options li:hover {
    background: var(--color-accent-bright);
    color: var(--color-text-dark);
}

.hidden {
    display: none;
}

.abilities-row {
    display: flex;
    gap: 20px;
}

.ability {
    background: var(--color-bg-overlay-dark);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--color-border-accent);
    width: 60%;
}

.ability img {
    width: 68px;
    height: 68px;
    vertical-align: middle;
    margin-right: 15px;
    border-radius: 5px;
    border: 1px solid var(--color-border-accent-bright);
    transition: all 0.2s ease;
}

.ability img[data-toggle-icons] {
    border-color: var(--color-border-accent-bright);
}

.ability-name {

    font-size: 1.5em !important;
    display: inline-block;
    vertical-align: middle;
    color: var(--color-text-accent-bright);

}

.ability div div div {
    font-size: 1em;
}

.ability-desc {
    font-size: 0.9em;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: 10px;
}

.level-bonuses {
    background: var(--color-bg-overlay-dark);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--color-border-accent);
    width: 40%;
}

.level-bonuses h3 {
    margin-top: 0;

    font-size: 1.5em;
    color: var(--color-text-accent-bright);
}

.level-bonuses ol {
    padding-left: 20px;
    color: var(--color-text-muted);
    font-size: 0.9em;
}

.level-bonuses li {
    margin-bottom: 5px;
}

/* Disable interactions for non-selected blocks */
.attribute-block:not(.selected) .hero-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.attribute-block:not(.selected) .hero-card:hover .hero-overlay {
    opacity: 0;
}

.attribute-block:not(.selected) .hero-card:hover .hero-name {
    opacity: 0;
    transform: translateY(6px);
}

.attribute-block:not(.selected) .hero-card {
    pointer-events: none;
}

/* Планшеты большого размера 1025-1300px */
@media (min-width: 770px) and (max-width: 1350px) {
    .ability div[style*="display: flex"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .hero-video-section {
        display: none;
    }

    .ability img {
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }

    .ability div[style*="line-height: 1.2"] {
        width: 100% !important;
    }

    .ability-name {
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    .ability div[style*="line-height: 1.2"]>div {
        text-align: center !important;
        margin-bottom: 4px !important;
    }

    .attribute-block.selected {
        width: 280px;
        left: 15px;
    }

    .hero-details-container {
        margin-left: 300px;
        padding: 15px;
        gap: 15px;
    }

    .hero-video-section {
        flex: 0 0 260px;
        padding: 15px;
    }

    .hero-video-section h2 {
        font-size: 1.5em;
    }

    .hero-abilities-section {
        max-width: calc(100% - 300px);
        gap: 15px;
    }

    .abilities-row {
        flex-direction: column;
        gap: 15px;
    }

    .ability {
        width: 100%;
        padding: 15px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }

    .ability img {
        width: 50px;
        height: 50px;
        margin-right: 0;
        flex-shrink: 0;
    }

    .ability-name {
        font-size: 1.3em;
        margin-bottom: 8px;
    }

    .ability-desc {
        font-size: 0.85em;
        line-height: 1.3;
    }

    .level-bonuses {
        width: 100%;
        padding: 15px;
        margin-top: 0;
    }

    .level-bonuses h3 {
        font-size: 1.3em;
        margin-bottom: 10px;
    }

    .level-bonuses ol {
        padding-left: 18px;
    }

    .level-bonuses li {
        font-size: 0.85em;
        margin-bottom: 4px;
    }

    /* Компактное отображение иконок кулдауна и маны */
    .ability-desc img[src*="cooldown"],
    .ability-desc img[src*="mana"] {
        width: 20px;
        height: 20px;
    }

}



/* Mobile optimizations */
@media (max-width: 769px) {

    /* Компактна, рівна мобільна сітка: кнопки/мова зверху, назва нижче по центру */
    header {
        grid-template-columns: 1fr auto;
        grid-auto-rows: auto;
        row-gap: 8px;
        column-gap: 10px;
        padding: 12px 10px;
        font-size: 22px;
    }

    .back-button.visible,
    .updates-button.visible {
        grid-column: 1;
        justify-self: start;
        padding: 6px 10px;
        font-size: 12px;
        max-width: 44vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lang-select {
        grid-column: 2;
        justify-self: end;
        font-size: 12px;
    }

    .main_name.lang-visible {
        grid-column: 1 / -1;
        justify-self: center;
        font-size: 18px;
        max-width: 90vw;
    }

    .attribute-blocks-container {
        gap: 15px;
        padding: 20px 10px 0px;
        min-height: auto;
        align-items: flex-start;
    }

    .attribute-block {
        width: 100%;
        max-width: 340px;
        height: auto;
        min-height: 300px;
        padding: 15px;
    }

    .attribute-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .attribute-block.selected {
        position: relative;
        width: 100%;
        max-width: none;
        height: auto;
        margin-bottom: 15px;
        top: auto;
        left: auto;
        transform: none;
        box-shadow: var(--shadow-accent-strong);
        order: -1;
    }

    .hero-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .hero-card {
        height: 50px;
        border-radius: 8px;
    }

    .hero-image-wrapper img {
        object-fit: cover;
        object-position: center center;
        min-height: 100%;
    }

    .hero-name {
        font-size: 8px;
        bottom: 2px;
    }

    .hero-details-container {

        margin-left: 0;
        width: 100%;
        height: auto;
        flex-direction: column;
        padding: 0 10px 10px 10px;
        gap: 15px;
    }

    .hero-details-container.visible {
        position: unset;

    }

    .hero-video-section {
        flex: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 15px;
    }

    .hero-video-section h2 {
        font-size: 1.4em;
        height: 35px;
        line-height: 35px;
    }

    .hero-abilities-section {
        max-width: 100%;
        gap: 15px;
    }

    .abilities-row {
        flex-direction: column;
        gap: 15px;
    }

    .ability {
        width: 100%;
        padding: 15px;
    }

    .ability img {
        width: 65px;
        height: 65px;
        margin-right: 10px;
    }

    .ability-name {
        font-size: 1.1em;
    }

    .ability-desc {
        font-size: 0.85em;
    }

    .level-bonuses {
        width: 100%;
        padding: 15px;
    }

    .level-bonuses h3 {
        font-size: 1.1em;
    }

    .level-bonuses ol {
        padding-left: 15px;
    }

    .level-bonuses li {
        font-size: 0.9em;
    }
}

/* Extra small devices */
@media (max-width: 480px) {

    header {
        font-size: 18px;
        padding: 10px;
    }

    .main_name.lang-visible {
        font-size: 16px !important;
    }

    .updates-button.visible,
    .back-button.visible {
        font-size: 11px;
        padding: 5px 8px;
        max-width: 100px;
    }

    .lang-select {
        font-size: 11px;
    }

    .attribute-block {
        height: auto;
        min-height: 280px;
        padding: 10px;
    }

    .hero-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    .hero-card {
        height: 45px;
        border-radius: 6px;
    }

    .hero-name {
        font-size: 7px;
    }

    .hero-video-section {
        padding: 10px;
    }

    .hero-video-section h2 {
        font-size: 1.2em;
        height: 30px;
        line-height: 30px;
    }

    .ability {
        padding: 10px;
    }

    .ability img {
        width: 32px;
        height: 32px;
        margin-right: 8px;
    }

    .ability-name {
        font-size: 1em;
    }

    .ability-desc {
        font-size: 0.8em;
    }

    .level-bonuses {
        padding: 10px;
    }

    .level-bonuses h3 {
        font-size: 1em;
    }

    .level-bonuses li {
        font-size: 0.8em;
    }
}

@media (max-width: 399px) {

    .main_name.lang-visible {
        font-size: 14px !important;
    }

    .updates-button.visible,
    .back-button.visible {
        font-size: 10px;
        padding: 4px 6px;
        max-width: 90px;
    }

    .lang-select {
        font-size: 10px;
    }

    .back-button,
    .updates-button,
    .main_name {
        font-size: 10px;
    }

}

@media (max-width: 423px) {

    .main_name.lang-visible {
        font-size: 17px !important;
    }

}

@media (max-width: 415px) {

    .main_name.lang-visible {
        font-size: 14px !important;
    }

}

/* Landscape mobile optimization */
@media (max-width: 769px) and (orientation: landscape) {
    .hero-details-container {
        flex-direction: row;
        gap: 15px;
    }

    .hero-video-section {
        flex: 0 0 250px;
    }

    .abilities-row {
        flex-direction: row;
        gap: 15px;
    }

    .ability {
        width: 50%;
    }

    .level-bonuses {
        width: 100%;
    }
}



/* Очень маленькие экраны */
@media (max-width: 360px) {
    .hero-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 4px;
    }

    .hero-card {
        height: 40px;
    }

    .hero-name {
        font-size: 6px;
    }

    .attribute-block {
        min-height: 250px;
        padding: 8px;
    }

    .attribute-title {
        font-size: 18px;
        margin-bottom: 12px;
    }
}

/* Header: точне вирівнювання для десктопа і мобільних */
@media (min-width: 770px) {
    header {
        display: block !important;
        position: relative;
    }

    .main_name.lang-visible {
        display: block;
        text-align: center;
        margin: 0;
    }

    .back-button.visible,
    .updates-button.visible {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
    }

    .lang-select {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }
}



/* Header layout overrides: desktop pin left/right, mobile grid alignment */
/* Desktop: прижимаємо оновлення ліворуч, мову праворуч, назва по центру */
header {
    display: block;
}

.main_name.lang-visible {
    display: inline-block;
    margin: 0 auto;
}

.updates-button {
    left: 12px;
}

.lang-select {
    right: 12px;
}

/* Mobile: рівне вирівнювання і компактні розміри */
/* Мобильная версия */
@media (max-width: 769px) {
    header {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 12px 10px;
        font-size: 20px;
        gap: 10px;
    }

    /* На главной странице (когда нет кнопки "назад") */
    .main_name.lang-visible {
        order: 1;
        font-size: 18px;
        text-align: center;
        margin: 0;
        max-width: 90vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Контейнер для кнопок под заголовком */
    .mobile-controls {
        order: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 300px;
    }

    .updates-button.visible,
    .back-button.visible {
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        padding: 6px 10px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    .lang-select {
        position: static !important;
        font-size: 12px;
    }

    /* Когда есть кнопка "назад" - используем старую сетку */
    .back-button.visible~.main_name.lang-visible {
        order: 2;
    }




}

@media (max-width: 399px) {

    .updates-button.visible,
    .back-button.visible {
        font-size: 10px;
        padding: 4px 8px;
        max-width: 46vw;
    }

    .lang-select {
        font-size: 10px;
    }
}

str {
    color: red;
    text-transform: uppercase;

}

agi {
    color: green;
    text-transform: uppercase;

}

int {
    color: blue;
    text-transform: uppercase;

}

uni {
    color: orange;
    text-transform: uppercase;

}

cur,
max {
    color: yellow;
    text-transform: uppercase;
}

red {
    color: red;
    text-transform: uppercase;
}

em {
    margin-top: 10px;
    color: var(--color-accent-bright);
    font-size: 1em;
}

/* Визуальные эффекты и анимации */

/* Анимация загрузки для атрибутных блоков */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 20px var(--color-accent-primary);
    }

    50% {
        box-shadow: 0 0 40px var(--color-accent-primary);
    }
}

@keyframes heroAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Анимированное появление блоков */
.attribute-block {
    animation: slideInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.attribute-block:nth-child(1) {
    animation-delay: 0.1s;
}

.attribute-block:nth-child(2) {
    animation-delay: 0.2s;
}

.attribute-block:nth-child(3) {
    animation-delay: 0.3s;
}

.attribute-block:nth-child(4) {
    animation-delay: 0.4s;
}

/* Улучшенное свечение для выбранного блока */
.attribute-block.selected {
    animation: glowPulse 3s ease-in-out infinite;


}

/* Анимация для карточек героев */
.hero-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
    z-index: 1;
}

.hero-card:hover::before {
    left: 100%;
}

.hero-card:hover {
    transform: scale(1.08) rotateY(5deg);
    box-shadow:
        0 8px 25px var(--shadow-accent-strong),
        0 0 20px var(--shadow-accent);
}

/* Анимация для выбранного героя */
.hero-card.selected {
    animation: heroAppear 0.5s ease-out;
    box-shadow:
        0 0 25px var(--shadow-accent-strong),
        inset 0 0 15px var(--shadow-accent);
}




/* Анимированные частицы для фона */
.main-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 20%, var(--color-border-accent) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--color-border-accent) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, var(--color-border-accent) 0%, transparent 50%);
    animation: particleFloat 10s ease-in-out infinite;
    pointer-events: none;
}


/* Улучшенная анимация для видео героя */
.hero-video-section {
    position: relative;
    overflow: hidden;
}

.hero-video-section::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            var(--color-accent-primary), var(--color-accent-bright), var(--color-accent-primary), var(--color-accent-bright));
    background-size: 300% 300%;
    animation: borderGlow 4s linear infinite;
    border-radius: 17px;
    z-index: -1;
}

@keyframes borderGlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero-video-section video {
    transition: all 0.3s ease;
}

.hero-video-section:hover video {
    transform: scale(1.02);
    filter: brightness(1.1) contrast(1.1);
}

/* Анимация для заголовков */
.hero-video-section h2 {
    position: relative;
    overflow: hidden;
}

.hero-video-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent-bright), transparent);
    transition: all 0.6s ease;
    transform: translateX(-50%);
}

.hero-video-section:hover h2::after {
    width: 100%;
}




/* Плавное появление деталей героя */
.hero-details-container {
    transform: translateX(50px);
}

.hero-details-container.visible {
    transform: translateX(0);
    animation: slideInRight 0.6s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}



/* Заменить существующий блок .aghanim-effect */
.aghanim-effect {
    margin-top: 15px;
    padding: 12px;
    background: linear-gradient(135deg,
            rgba(70, 130, 180, 0.3) 0%,
            rgba(30, 144, 255, 0.2) 50%,
            rgba(70, 130, 180, 0.3) 100%);
    border: 2px solid #5671ff;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(70, 130, 180, 0.4);
}

/* Заменить существующий блок .aghanim-title */
.aghanim-title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: #5671ff;
    font-size: 1.1em;
    position: relative;
    z-index: 1;

}

/* Заменить существующий блок .aghanim-icon */
.aghanim-icon {
    width: 35px !important;
    height: 35px !important;
    margin-right: 8px;
    filter: drop-shadow(0 0 8px #5671ff);
}

/* Заменить существующий блок .aghanim-content */
.aghanim-content {
    color: #B0C4DE;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}


@keyframes aghanimGlow {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}



/* Заменить существующий блок .legendary-effect */
.legendary-effect {
    margin-top: 15px;
    padding: 12px;
    background: linear-gradient(135deg,
            rgba(255, 20, 147, 0.3) 0%,
            rgba(220, 20, 60, 0.2) 50%,
            rgba(255, 20, 147, 0.3) 100%);
    border: 2px solid #FF1493;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 20, 147, 0.5);
}

.legendary-effect::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -100%;
    width: 100%;
    height: calc(100% + 4px);
    background: linear-gradient(90deg, transparent, rgba(255, 20, 147, 0.7), transparent);

    z-index: 0;
}

@keyframes legendaryGlow {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Заменить существующий блок .legendary-title */
.legendary-title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: #FF1493;
    font-size: 1.1em;
    position: relative;
    z-index: 1;

}

/* Заменить существующий блок .legendary-icon */
.legendary-icon {
    width: 35px !important;
    height: 35px !important;
    margin-right: 8px;
    filter: drop-shadow(0 0 8px #FF1493);
}

/* Заменить существующий блок .legendary-content */
.legendary-content {
    color: #FFB6C1;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

/* Улучшение для мобильных устройств */
@media (max-width: 768px) {
    .legendary-effect {
        padding: 10px;
        margin-top: 12px;
    }

    .legendary-title {
        font-size: 1em;
    }

    .legendary-icon {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Улучшение для мобильных устройств */
@media (max-width: 768px) {

    .aghanim-effect,
    .legendary-effect,
    .souls-effect {
        padding: 10px;
        margin-top: 12px;
    }

    .aghanim-title,
    .legendary-title,
    .souls-title {
        font-size: 1em;
    }

    .aghanim-icon,
    .legendary-icon,
    .souls-icon {
        width: 20px !important;
        height: 20px !important;
    }
}

.souls-content b {
    font-weight: bold;
}

/* Заменить существующий блок .souls-effect */
.souls-effect {
    margin-top: 15px;
    padding: 12px;
    background: linear-gradient(135deg,
            rgba(220, 20, 60, 0.3) 0%,
            rgba(255, 0, 0, 0.2) 50%,
            rgba(220, 20, 60, 0.3) 100%);
    border: 2px solid #f73058;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(220, 20, 60, 0.4);
}

.souls-effect::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -100%;
    width: 100%;
    height: calc(100% + 4px);
    background: linear-gradient(90deg, transparent, rgba(220, 20, 60, 0.6), transparent);

    z-index: 0;
}

@keyframes soulsGlow {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Заменить существующий блок .souls-title */
.souls-title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: #f73058;
    font-size: 1.1em;
    position: relative;
    z-index: 1;
    font-family: 'Reaver', serif !important;
}

/* Заменить существующий блок .souls-icon */
.souls-icon {
    width: 35px !important;
    height: 35px !important;
    margin-right: 8px;
    filter: drop-shadow(0 0 8px #f73058);
}

/* Заменить существующий блок .souls-content */
.souls-content {
    color: #FFB6C1;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

/* Улучшение для мобильных устройств */
@media (max-width: 768px) {
    .souls-effect {
        padding: 10px;
        margin-top: 12px;
    }

    .souls-title {
        font-size: 1em;
    }

    .souls-icon {
        width: 20px !important;
        height: 20px !important;
    }
}

.enhancement-controls {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: none;
    flex-direction: row;
    align-items: center;
    z-index: 100;
    transition: transform 0.4s ease;
}

.enhancement-controls.visible {
    display: flex;
}

.enhancement-controls.collapsed {
    transform: translateY(-50%) translateX(calc(100% - 40px));
}

.controls-toggle {
    width: 40px;
    height: 60px;
    background: var(--color-bg-overlay-darker);
    border: 2px solid var(--color-border-accent);
    border-right: none;
    border-radius: 10px 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    order: 1;
    /* Размещаем кнопку слева */
}

.controls-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--color-bg-overlay-darker);
    padding: 15px;
    border-radius: 0 10px 10px 0;
    border: 2px solid var(--color-border-accent);
    border-left: none;
    backdrop-filter: blur(10px);
    order: 2;
    /* Размещаем контент справа */
}

.controls-toggle:hover {
    background: var(--js-button-bg);
    border-color: var(--color-border-accent-bright);
}

.toggle-arrow {
    color: var(--color-text-accent-bright);
    font-size: 16px;
    transition: transform 0.4s ease;
    user-select: none;
    transform: rotate(180deg);
    /* Стрелочка направлена влево по умолчанию */
}

.enhancement-controls.collapsed .toggle-arrow {
    transform: rotate(0deg);
    /* При свертывании стрелочка направлена вправо */
}

.enhancement-toggle {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 2px solid;
    background: var(--color-bg-overlay-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

.enhancement-toggle img {
    width: 30px;
    height: 30px;
    filter: grayscale(1) opacity(0.5);
    transition: all 0.3s ease;
}

.enhancement-toggle.active img {
    filter: none;
    opacity: 1;
}

.enhancement-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-accent-bright);
}

/* Специальные цвета для каждого типа */
.enhancement-toggle.aghanim {
    border-color: #5671ff;
}

.enhancement-toggle.aghanim.active {
    background: rgba(70, 130, 180, 0.3);
    box-shadow: 0 0 10px rgba(70, 130, 180, 0.4);
}

.enhancement-toggle.legendary {
    border-color: #FF1493;
}

.enhancement-toggle.legendary.active {
    background: rgba(255, 20, 147, 0.3);
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.4);
}

.enhancement-toggle.souls {
    border-color: #f73058;
}

.enhancement-toggle.souls.active {
    background: rgba(220, 20, 60, 0.3);
    box-shadow: 0 0 10px rgba(220, 20, 60, 0.4);
}

/* Скрытие блоков при отключенных опциях */
.aghanim-effect.hidden,
.legendary-effect.hidden,
.souls-effect.hidden {
    display: none !important;
}

/* Главная */
.home-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    padding: 30px 20px;
    max-width: 980px;
    margin: 40px auto;
}

.home-card {
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid var(--color-border-accent);
    border-radius: 14px;

    width: 250px;
    margin: auto;
    height: 120px;
    text-align: center;
    color: var(--color-text-accent-bright);
    text-transform: uppercase;
    font-size: 22px;
    cursor: pointer;
    transition: .25s ease;
    position: relative;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.home-menu .home-card .title {
    width: 100%;
    line-height: 1.2;
    display: block;
}

.home-card:hover {
    border-color: var(--color-border-accent-strong);
    transform: translateY(-4px);
    box-shadow: 0 8px 28px var(--shadow-accent);
}

.home-card .subtitle {
    margin-top: 8px;
    font-size: 13px;
    color: #ddd;
    text-transform: none;
    opacity: .9;
}

.promocode-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(76, 175, 80, 0.9);
    color: var(--color-text-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 10px;
    text-transform: none;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.home-card.disabled {
    cursor: not-allowed;
    opacity: .55;
}

.home-card.disabled:hover {
    transform: none;
    border-color: var(--color-border-accent);
    box-shadow: none;
}

/* Адаптивные стили для главной страницы */
/* Планшеты */
@media (max-width: 1024px) and (min-width: 769px) {
    .home-menu {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 25px 20px;
        margin: 30px auto;
    }

    .home-card {
        width: 100%;
        height: 110px;
        font-size: 20px;
    }
}

/* Мобильные устройства */
@media (max-width: 768px) {
    .home-menu {
        grid-template-columns: 1fr;
        /* Одна колонка на мобильных */
        gap: 15px;
        padding: 20px 15px;
        margin: 20px auto;
        max-width: 100%;
    }

    .home-card {
        width: 100%;
        height: 80px;
        font-size: 18px;
        border-radius: 12px;
        margin: 0;
        /* Убираем автоматические отступы */
    }

    .home-menu .home-card .title {
        line-height: 1.2;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .home-menu {
        gap: 12px;
        padding: 15px 10px;
        margin: 15px auto;
    }

    .home-card {
        height: 70px;
        font-size: 16px;
        border-radius: 10px;
    }

    .home-menu .home-card .title {
        line-height: 1.1;
        font-size: 16px;
    }

    .home-card .subtitle {
        font-size: 12px;
        margin-top: 4px;
    }
}


/* Лоадинг бар для обновлений */
.updates-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.updates-loading-text {
    color: var(--color-text-accent-bright);
    font-size: 18px;
    margin-bottom: 30px;
    font-family: 'Reaver', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.updates-progress-bar {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: var(--js-button-bg);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-bottom: 15px;
}

.updates-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-bright), var(--color-accent-glow), var(--color-accent-bright));
    background-size: 200% 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
    animation: progressShimmer 1.5s infinite;
}

.updates-progress-text {
    color: var(--color-text-accent);
    font-size: 14px;
    font-family: 'Radiance', sans-serif;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* Страница предметов */
.items-page {
    max-width: 1100px;
    margin: 20px auto;
    padding: 10px 16px;
}

.items-tier {
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    margin: 12px 0;
    overflow: hidden;
}

.items-tier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    color: var(--color-text-accent-bright);
    background: var(--gradient-accent);
}

.items-tier-header:hover {
    background: var(--js-button-hover-bg);
}

.items-tier-title {
    font-size: 18px;
}

.items-tier-toggle {
    font-size: 18px;
    color: var(--color-text-accent-bright);
}

.items-tier-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.items-tier.open .items-tier-body {
    max-height: 1800px;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 12px;
}

.item-card {
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.item-card img {
    width: 40px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .15);
    object-fit: cover;
}

.item-card .item-name {
    font-size: 14px;
    color: var(--color-text-primary);
}

.item-card .item-name small {
    display: block;
    color: #aaa;
    font-size: 12px;
    margin-top: 2px;
}

#homeMenu.hidden {
    display: none !important;
}

/* ============================
   ITEMS: иконки + поповер
   ============================ */

/* Сетка под иконки */
.items-grid.icons-only {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 20px;
    padding: 12px;
}

/* Карточка-иконка */
.item-card {
    position: relative;
    height: 56px;
    width: 56px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    outline: none;
}

/* Сама иконка */
.item-card .item-icon {
    width: 64px;

    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .14);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    box-shadow: 0 0 0 0 transparent;
}

/* Подсветка только при наведении (на десктопе клик больше не держит подсветку) */
.item-card:hover .item-icon {
    transform: scale(1.04);
    border-color: var(--color-border-accent-bright);
    box-shadow: 0 0 14px var(--shadow-accent);
}




/* Контейнер поповера (якорится к карточке) */
.item-popover-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* чтобы ховер по иконке не сбивался */
}

/* Поповер */
.item-popover {
    position: absolute !important;
    z-index: 50;
    min-width: 280px;
    max-width: 420px;
    background: rgba(18, 18, 18, .96);
    border: 1px solid var(--color-border-accent-bright);
    border-radius: 10px;
    padding: 12px;
    display: none;
    /* по умолчанию скрыт */
    pointer-events: auto;
    /* кликабелен, когда виден */
    box-shadow:
        0 10px 30px rgba(0, 0, 0, .6),
        0 0 16px var(--shadow-accent);
}

/* Показ поповера: при ховере/пине */
.item-card.popover-open .item-popover {
    display: block;
}

/* Визуальная пометка закреплённого окна
.item-card.pinned .item-popover {
  border-color: rgba(255,132,0,.75);
  box-shadow:
    0 10px 30px rgba(0,0,0,.6),
    0 0 18px rgba(255,132,0,.35);
} */

/* Маленькая стрелочка к иконке (когда поповер справа) */
.item-card.popover-open .item-popover::after {
    content: "";
    position: absolute;
    left: -8px;
    top: 14px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent var(--color-border-accent-bright) transparent transparent;
}

.item-card.popover-open .item-popover::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 15px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent rgba(18, 18, 18, .96) transparent transparent;
}

/* Шапка поповера */
.item-popover-header {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.item-popover-icon {
    width: 50px !important;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .14);
}

.item-popover-title {
    font-size: 16px;
    color: var(--color-text-accent-bright);
    letter-spacing: .2px;
}

.item-popover-tier {
    font-size: 13px;
    color: #ddd;
    white-space: nowrap;
    font-family: Radiance, "Noto Sans", sans-serif;
}

/* Секции описаний */
.item-popover-section {
    margin-top: 8px;
}

.item-popover-section-title {
    font-size: 12.5px;
    color: var(--color-text-accent-bright);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 4px;
    opacity: .9;
}

.item-popover-list {
    margin: 0;
    padding-left: 18px;
    color: var(--color-text-secondary);
    line-height: 1.45;
    font-family: Radiance, "Noto Sans", sans-serif;
    font-size: 13px;
}

/* На случай длинных описаний — скролл внутри поповера */
.item-popover-body {
    max-height: 60vh;
    overflow: auto;
}

/* Аккордеон тиров (минимальные стили, если у тебя нет своих) */
.items-tier {
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    margin: 10px 12px;
    overflow: hidden;
}

.items-tier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
}

.items-tier-title {
    font-weight: 600;
    color: #f3f3f3;
}

.items-tier-toggle {
    color: var(--color-text-accent-bright);
    font-weight: 700;
}

.items-tier-body {
    display: none;
    background: rgba(0, 0, 0, .25);
}

.items-tier.open .items-tier-body {
    display: block;
}

/* Мобилки: поповер под иконкой и на всю ширину экрана */
@media (max-width: 769px) {
    .item-popover {
        position: fixed !important;
        top: 25% !important;
        left: 0 !important;
        right: auto !important;

    }

    .item-card.popover-open .item-popover::after,
    .item-card.popover-open .item-popover::before {
        display: none;
    }

}

/* Предпочтение «меньше анимаций» */
@media (prefers-reduced-motion: reduce) {
    .item-card .item-icon {
        transition: none;
    }
}

/* — не обрезаем поповер родителями — */
.items-tier,
.items-tier-body,
.items-grid.icons-only {
    overflow: visible !important;
}

/* — поповер и карточка поверх соседей — */
.item-card {
    position: relative;
}


/* на всякий случай, если где-то создан стек через transform/filter */
#itemsPage,
.items-page {
    position: relative;
    z-index: 0;
}


/* --- отступ у поповера 12px и адаптация --- */

/* Контейнеры не обрезают всплывашку */
.items-tier,
.items-tier-body,
.items-grid.icons-only {
    overflow: visible !important;
}

/* Слойность, чтобы поповер не прятался */
.item-card {
    position: relative;
}

.item-popover {
    z-index: 1000 !important;
}

/* Базовый вид поповера (как было) */
.item-popover {
    position: absolute;
    min-width: 280px;
    max-width: 420px;
    background: rgba(18, 18, 18, .96);
    border: 1px solid var(--color-border-accent-bright);
    border-radius: 10px;
    padding: 12px;
    display: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 16px var(--shadow-accent);
}

.item-card.popover-open .item-popover {
    display: block;
}

/* Стрелка, когда поповер СПРАВА от иконки */
.item-popover[data-side="right"]::after,
.item-popover[data-side="right"]::before {
    content: "";
    position: absolute;
    top: 14px;
    border-style: solid;
}

.item-popover[data-side="right"]::after {
    left: -8px;
    border-width: 8px;
    border-color: transparent var(--color-border-accent-bright) transparent transparent;
}

.item-popover[data-side="right"]::before {
    left: -7px;
    top: 15px;
    border-width: 7px;
    border-color: transparent rgba(18, 18, 18, .96) transparent transparent;
}

/* Стрелка, когда поповер СЛЕВА от иконки */
.item-popover[data-side="left"]::after,
.item-popover[data-side="left"]::before {
    content: "";
    position: absolute;
    top: 14px;
    border-style: solid;
}

.item-popover[data-side="left"]::after {
    right: -8px;
    border-width: 8px;
    border-color: transparent transparent transparent var(--color-border-accent-bright);
}

.item-popover[data-side="left"]::before {
    right: -7px;
    top: 15px;
    border-width: 7px;
    border-color: transparent transparent transparent rgba(18, 18, 18, .96);
}

/* Если поповер снизу (мобилки) — стрелку прячем */
.item-popover[data-side="bottom"]::after,
.item-popover[data-side="bottom"]::before {
    display: none;
}

/* Мобилки: поповер под иконкой, по центру, шире экрана (с отступами) */
@media (max-width: 769px),
(hover: none),
(pointer: coarse) {


    /* Чуть крупнее тач-таргеты */
    .items-grid.icons-only {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));

    }

    .item-card {
        width: 60px;
        height: 60px;
    }

    .item-popover-body {
        max-height: 68vh;
    }

    /* больше места под скролл на телефоне */
}

/* Предпочтение «меньше анимаций» */
@media (prefers-reduced-motion: reduce) {
    .item-card .item-icon {
        transition: none;
    }
}

@media (hover: hover) and (pointer: fine) {

    /* подсветка ТОЛЬКО при настоящем hover (десктоп) */
    .item-card:hover .item-icon {
        transform: scale(1.04);
        border-color: var(--color-border-accent-bright);
        box-shadow: 0 0 14px var(--shadow-accent);
    }
}

@media (hover: none),
(pointer: coarse) {
    .item-card:hover .item-icon {
        transform: none;
        border-color: rgba(255, 255, 255, .14);
        box-shadow: none;
    }
}

@media (hover: hover) and (pointer: fine) {
    .item-card.popover-open:not(:hover) .item-popover {
        display: none !important;
    }

    .item-card.popover-open .item-popover {
        pointer-events: none;
    }
}




/* Стили для загрузки и прогресс бара */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 20px;
    max-width: 400px;
    margin: 0 auto;
}

.loading-text {
    font-family: 'Radiance', 'Noto Sans', sans-serif;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    opacity: 0.8;
    animation: pulse 2s ease-in-out infinite;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--js-progress-bar-bg);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--js-progress-bar-border);
    box-shadow:
        0 0 10px var(--js-progress-bar-shadow),
        inset 0 0 5px rgba(0, 0, 0, 0.3);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
            var(--color-accent-glow) 0%,
            var(--color-accent-bright) 50%,
            var(--color-accent-glow) 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
    box-shadow: var(--shadow-accent-bright);
    animation: shimmer 2s infinite;
}

.progress-text {
    font-family: 'Reaver', serif;
    font-size: 14px;
    color: var(--color-text-accent-bright);
    font-weight: bold;
    text-shadow: 0 0 5px var(--shadow-accent);
    letter-spacing: 1px;
}

.error-message {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.error-message p {
    font-family: 'Radiance', 'Noto Sans', sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 20px;
    border: 2px solid rgba(255, 158, 158, 0.3);
    border-radius: 8px;
    background: rgba(255, 158, 158, 0.1);
    backdrop-filter: blur(5px);
}

/* Анимации */
@keyframes pulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

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

    100% {
        background-position: 100% 0;
    }
}

.progress-fill {
    background: linear-gradient(90deg,
            var(--color-accent-glow) 0%,
            rgba(255, 255, 255, 0.3) 25%,
            var(--color-accent-glow) 50%,
            rgba(255, 255, 255, 0.3) 75%,
            var(--color-accent-glow) 100%);
    background-size: 200% 100%;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 769px) {
    .loading-container {
        padding: 30px 15px;
    }

    .loading-text {
        font-size: 14px;
    }

    .progress-text {
        font-size: 12px;
    }

    .progress-bar {
        height: 4px;
    }
}




/* Мобильное модальное окно для предметов */
.mobile-item-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(5px);
}

.mobile-item-modal.active {
    display: flex;
}

.mobile-item-modal-content {
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    background: rgba(18, 18, 18, 0.98);
    border: 2px solid var(--color-border-accent-bright);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.8),
        var(--js-modal-shadow-yellow),
        var(--js-modal-inset-yellow);
    animation: modalSlideIn 0.3s ease-out;
}

.mobile-item-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--gradient-accent);
    border-bottom: 1px solid var(--color-border-accent);
}

.mobile-item-modal-icon {
    width: 56px !important;
    height: 56px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.mobile-item-modal-info {
    flex: 1;
    min-width: 0;
}

.mobile-item-modal-title {
    font-size: 18px;
    color: var(--color-text-accent-bright);
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.2;
}

.mobile-item-modal-tier {
    font-size: 14px;
    color: #ddd;
    opacity: 0.9;
}

.mobile-item-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.mobile-item-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mobile-item-modal-body {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(80vh - 100px);
}

/* Стили для секций внутри модального окна */
.mobile-item-modal .item-popover-section {
    margin-bottom: 16px;
}

.mobile-item-modal .item-popover-section:last-child {
    margin-bottom: 0;
}

.mobile-item-modal .item-popover-section-title {
    font-size: 14px;
    color: var(--color-text-accent-bright);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.mobile-item-modal .item-popover-list {
    margin: 0;
    padding-left: 20px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    font-size: 14px;
    font-family: Radiance, "Noto Sans", sans-serif;
}

.mobile-item-modal .item-popover-list li {
    margin-bottom: 4px;

}

/* Анимация появления */
@keyframes modalSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Обновленные медиа-запросы для мобильных устройств */
@media (max-width: 769px),
(hover: none),
(pointer: coarse) {

    /* Скрываем обычные поповеры на мобильных */
    .item-popover {
        display: none !important;
    }

    .item-card.popover-open .item-popover {
        display: none !important;
    }

    /* Увеличиваем тач-таргеты */
    .items-grid.icons-only {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 1px;
        padding: 16px;
    }

    .item-card {
        width: 60px;
        height: 60px;
    }



    /* Убираем hover эффекты на мобильных */
    .item-card:hover .item-icon {
        transform: none;
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow: none;
    }

    /* Добавляем активное состояние для тача */
    .item-card:active .item-icon {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
    .mobile-item-modal {
        padding: 10px;
    }

    .mobile-item-modal-content {
        max-height: 85vh;
    }

    .mobile-item-modal-header {
        padding: 12px;
    }

    .mobile-item-modal-icon {
        width: 48px !important;
        height: 48px;
    }

    .mobile-item-modal-title {
        font-size: 16px;
    }

    .mobile-item-modal-body {
        padding: 12px;
        max-height: calc(85vh - 90px);
    }
}


.update-body img {
    width: 100px;
}

.update-body p {
    margin: 0;
}

/* Страница бессмертных */
.immortals-section {
    display: none;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 86px);
}

.immortals-container {
    background: var(--color-bg-tertiary);
    border-radius: 20px;
    padding: 40px;
    border: 2px solid var(--color-border-accent);
    box-shadow: 0 0 30px var(--shadow-accent);
    backdrop-filter: blur(10px);
}

/* Переключатель режимов отображения */
.immortals-view-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    gap: 10px;
}

.toggle-btn {
    background: var(--js-button-bg);
    border: 2px solid var(--color-border-accent);
    color: var(--color-text-accent-bright);
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    font-family: 'Reaver', serif;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    user-select: none;
}

.toggle-btn:hover {
    background: var(--js-button-bg);
    border-color: var(--color-border-accent-bright);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--shadow-accent);
}

.toggle-btn.active {
    background: var(--js-toggle-active-gradient);
    border-color: var(--color-border-accent-strong);
    box-shadow: var(--shadow-accent-bright);
    text-shadow: 0 0 10px var(--shadow-accent-bright);
}

.toggle-btn.active:hover {
    transform: translateY(-2px) scale(1.05);
}

.immortals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.immortal-trait-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(20, 20, 20, 0.8));
    border: 2px solid var(--color-border-accent);
    border-radius: 15px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(30px);
    cursor: pointer;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.immortal-trait-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.immortal-trait-card:hover {
    border-color: var(--color-border-accent-bright);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px var(--shadow-accent);
}

.immortal-trait-card.selected {
    border-color: var(--color-border-accent-strong);
    background: linear-gradient(135deg, var(--color-border-accent), rgba(20, 20, 20, 0.9));
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 50px var(--shadow-accent);
}

.immortal-trait-card.selected .trait-glow {
    opacity: 1;
}

/* Уровневые фоны */
.immortal-trait-card.level-1 {
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.3), rgba(20, 20, 20, 0.8));
}

.immortal-trait-card.level-2 {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.3), rgba(20, 20, 20, 0.8));
}

.immortal-trait-card.level-3 {
    background: linear-gradient(135deg, rgba(0, 128, 0, 0.3), rgba(20, 20, 20, 0.8));
}

.immortal-trait-card.level-4 {
    background: linear-gradient(135deg, rgba(0, 100, 200, 0.3), rgba(20, 20, 20, 0.8));
}

.immortal-trait-card.level-5 {
    background: linear-gradient(135deg, rgba(128, 0, 128, 0.3), rgba(20, 20, 20, 0.8));
}

.immortal-trait-card.level-6 {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.3), rgba(20, 20, 20, 0.8));
}

.immortal-trait-card.level-7 {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(20, 20, 20, 0.8));
}

.immortal-trait-card.level-8 {
    background: var(--js-level-8-gradient);
}

.immortal-trait-card.level-9 {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.4), rgba(20, 20, 20, 0.8));
}

.immortal-trait-card.level-10 {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(50, 0, 50, 0.8));
}

.immortal-trait-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--color-border-accent), transparent);
    transition: left 0.6s ease;
}

.immortal-trait-card:hover::before {
    left: 100%;
}

/* Индикатор уровня */
.trait-level-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 8px 12px;
    background: var(--color-bg-overlay);
    border-radius: 20px;
    border: 1px solid var(--color-border-accent);
}

.level-number {
    color: var(--color-text-accent-bright);
    font-weight: bold;
    font-size: 1.2em;
    min-width: 20px;
    text-align: center;
    font-family: 'Reaver', serif;
    text-shadow: 0 0 5px var(--shadow-accent);
}

.level-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.level-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-bright), var(--color-accent-primary));
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: var(--shadow-accent-bright);
    position: relative;
}

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

@keyframes progressShine {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.trait-content {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.trait-name {
    color: var(--color-text-accent-bright);
    font-size: 1.6em;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Reaver', serif;
    text-shadow: 0 0 10px var(--shadow-accent);
}

.trait-description {
    color: var(--color-text-secondary);
    font-size: 0.95em;
    line-height: 1.5;
    margin: 0;
    font-family: 'Radiance', sans-serif;
    opacity: 0.9;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Панель поиска */
.immortals-search {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(30, 30, 30, 0.8);
    border: 2px solid var(--color-border-accent);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.immortals-search input {
    flex: 1;
    padding: 10px 15px;
    background: var(--color-bg-overlay-dark);
    border: 2px solid var(--color-border-accent);
    border-radius: 8px;
    color: var(--js-input-color);
    font-size: 14px;
    font-family: 'Radiance', sans-serif;
    outline: none;
    transition: all 0.3s ease;
}

.immortals-search input:focus {
    border-color: var(--js-input-border-focus);
    box-shadow: var(--shadow-accent-bright);
    background: var(--color-bg-overlay-darker);
}

.immortals-search input::placeholder {
    color: var(--js-input-placeholder);
}

.search-results-count {
    padding: 5px 10px;
    background: var(--js-toggle-active-gradient);
    border-color: var(--color-border-accent-strong);
    border: 1px solid;
    border-radius: 6px;
    color: var(--js-search-results-color);
    font-size: 12px;
    font-weight: bold;
    display: none;
}

/* Панель массовых операций */
.immortals-bulk-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(30, 30, 30, 0.8);
    border: 2px solid var(--color-border-accent);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
}

/* Стили для toggle кнопок внутри bulk controls */
.immortals-bulk-controls .toggle-btn {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Reaver', serif;
    transition: all 0.3s ease;
    background: var(--js-button-bg);
    border: 2px solid var(--color-border-accent);
    color: var(--color-text-accent-bright);
    cursor: pointer;
}

.immortals-bulk-controls .toggle-btn:hover {
    background: var(--js-button-bg);
    border-color: var(--color-border-accent-bright);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--shadow-accent);
}

.immortals-bulk-controls .toggle-btn.active {
    background: var(--js-toggle-active-gradient);
    border-color: var(--color-border-accent-strong);
    box-shadow: var(--shadow-accent-bright);
    text-shadow: 0 0 10px var(--shadow-accent-bright);
}

.immortals-bulk-controls .toggle-btn.active:hover {
    transform: translateY(-2px) scale(1.05);
}

.bulk-btn {
    padding: 10px 20px;
    background: var(--js-button-bg);
    border: 2px solid var(--color-border-accent);
    border-radius: 8px;
    color: var(--color-text-accent-bright);
    font-size: 14px;
    font-weight: bold;
    font-family: 'Reaver', serif;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.bulk-btn:hover {
    background: var(--js-button-bg);
    border-color: var(--color-border-accent-bright);

    box-shadow: 0 5px 15px var(--shadow-accent);
}

.bulk-btn:active {
    background: var(--js-toggle-active-gradient);
    border-color: var(--color-border-accent-strong);
    box-shadow: var(--shadow-accent-bright);
    text-shadow: 0 0 10px var(--shadow-accent-bright);
}

.bulk-level-control {
    display: none;
    align-items: center;
    gap: 10px;
}

/* Показывать bulk-level-control только когда активна кнопка single */
.toggle-btn[data-mode="single"].active~.bulk-level-control {
    display: flex;
}

.bulk-level-control label {
    color: var(--js-input-color);
    font-size: 14px;
    font-family: 'Radiance', sans-serif;
    white-space: nowrap;
}

.bulk-level-control select {
    padding: 8px 12px;
    background: var(--color-bg-overlay-dark);
    border: 2px solid var(--color-border-accent);
    border-radius: 6px;
    color: var(--js-input-color);
    font-size: 14px;
    font-family: 'Radiance', sans-serif;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bulk-level-control select:focus {
    border-color: var(--js-input-border-focus);
    box-shadow: var(--shadow-accent-bright);
}

/* Адаптивность для новых элементов */
@media (max-width: 768px) {
    .immortals-search {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .immortals-bulk-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .bulk-level-control {
        justify-content: space-between;
    }

    .bulk-level-control label {
        font-size: 12px;
    }

    .immortals-bulk-controls .toggle-btn {
        padding: 8px 16px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {

    .immortals-search,
    .immortals-bulk-controls {
        padding: 10px;
        margin-bottom: 15px;
    }

    .immortals-search input {
        padding: 8px 12px;
        font-size: 13px;
    }

    .bulk-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .bulk-level-control select {
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* Контролы уровней */
.trait-level-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    padding: 10px;
    background: var(--color-bg-overlay);
    border-radius: 25px;
    border: 1px solid var(--js-level-indicator-border);
}

.level-btn {
    background: var(--js-button-bg);
    border: 1px solid var(--js-level-btn-border);
    color: var(--color-text-accent-bright);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    user-select: none;
}

.level-btn:hover:not(:disabled) {
    background: var(--js-level-btn-hover-bg);
    border-color: var(--color-border-accent-bright);
    transform: scale(1.1);
    box-shadow: var(--shadow-accent);
}

.level-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.level-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.level-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border-primary);
}

.level-dot.active {
    background: var(--color-accent-bright);
    box-shadow: var(--shadow-accent-bright);
    transform: scale(1.3);
    border-color: var(--color-border-accent-strong);
}

.level-dot:hover {
    background: var(--js-level-dot-hover-bg);
    transform: scale(1.2);
    box-shadow: var(--shadow-accent);
}

.trait-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    background: var(--js-trait-glow-bg);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.immortal-trait-card:hover .trait-glow {
    opacity: 1;
}

/* Адаптивность для планшетов */
@media (max-width: 1024px) {
    .immortals-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .immortal-trait-card {
        padding: 18px;
        min-height: 280px;
    }

    .trait-name {
        font-size: 1.5em;
    }

    .trait-description {
        font-size: 0.9em;
        min-height: 50px;
    }

    .level-dots {
        gap: 5px;
    }

    .level-dot {
        width: 7px;
        height: 7px;
    }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .immortals-section {
        padding: 20px 15px;
    }

    .immortals-container {
        padding: 25px 20px;
        border-radius: 15px;
    }

    .immortals-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .immortal-trait-card {
        padding: 16px;
        min-height: 260px;
        border-radius: 12px;
    }

    .trait-name {
        font-size: 1.3em;
    }

    .trait-description {
        font-size: 0.85em;
        min-height: 45px;
    }

    .trait-level-indicator {
        padding: 6px 10px;
        margin-bottom: 12px;
    }

    .level-number {
        font-size: 1em;
        min-width: 18px;
    }

    .level-bar {
        height: 6px;
    }

    .trait-level-controls {
        gap: 12px;
        padding: 8px;
        margin-top: 12px;
    }

    .level-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .level-dots {
        gap: 4px;
    }

    .level-dot {
        width: 6px;
        height: 6px;
    }

    .level-dot.active {
        transform: scale(1.2);
    }

    .level-dot:hover {
        transform: scale(1.1);
    }

    .immortals-view-toggle {
        margin-bottom: 20px;
        gap: 8px;
    }

    .toggle-btn {
        padding: 10px 18px;
        font-size: 0.9em;
    }
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 480px) {
    .immortals-section {
        padding: 15px 10px;
    }

    .immortals-container {
        padding: 20px 15px;
    }

    .immortal-trait-card {
        padding: 18px;
    }

    .trait-name {
        font-size: 1.3em;
    }

    .trait-description {
        font-size: 0.9em;
    }
}

/* Анимация появления карточек */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.immortal-trait-card {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Стили для кнопок поддержки проекта */
.support-buttons {
    position: fixed;
    bottom: 45px;
    left: 20px;
    z-index: 99999;
    pointer-events: none;
}

.support-buttons.hidden {
    display: none !important;
}

.support-button-wrapper {
    position: relative;
    display: inline-block;
    pointer-events: auto;
}

.support-button {
    background: linear-gradient(45deg, var(--color-accent-primary), var(--color-accent-secondary));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Reaver', serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.support-button:hover {
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-glow));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--js-button-hover-shadow);
}

.support-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px var(--js-button-hover-shadow);
}

/* Убираем старые позиционирования */
.support-button-left {
    position: static !important;
    width: auto !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
}

/* Кнопка закрытия */
.close-button-above {
    position: absolute;
    top: -15px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
}

.close-button-above:hover {
    background: #ff6666;
    transform: scale(1.1) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.close-button-above:active {
    transform: scale(0.95) !important;
}

/* Glow анимация */
@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 4px 15px var(--js-button-hover-shadow-small), 0 0 20px var(--js-button-hover-shadow);
    }

    50% {
        box-shadow: 0 4px 15px var(--js-button-hover-shadow-small), 0 0 30px var(--js-button-hover-shadow);
    }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .support-buttons {

        left: 15px;
    }

    .support-button {
        padding: 10px 16px;
        font-size: 12px;
    }

    .close-button-above {
        width: 20px;
        height: 20px;
        font-size: 12px;
        top: -10px;
        right: -10px;
    }
}

@media (max-width: 480px) {
    .support-buttons {

        left: 10px;
    }

    .support-button {
        padding: 8px 14px;
        font-size: 11px;
    }

    .close-button-above {
        width: 18px;
        height: 18px;
        font-size: 10px;
        top: -9px;
        right: -9px;
    }
}

/* Stars Page Styles */
.stars-page {
    padding: 25px;
    /* 20px + 25% */
    max-width: 1200px;
    /* 1200px + 25% */
    margin: 0 auto 25px;
}

/* Evolution Page Styles */
.evolution-page {
    padding: 25px;
    max-width: 1200px;
    margin: 0 auto 25px;
}

.evolution-section {
    display: none;
}

.evolution-section:not(.hidden) {
    display: block;
}

.evolution-grid {
    max-width: 1200px;
    margin: 0 auto;
}

.stars-filters {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.rarity-filters,
.donate-filters {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rarity-filter,
.donate-filter,
.evolution-filter {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--color-border-accent);
    color: var(--color-text-accent-bright);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Reaver', serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rarity-filter.active,
.donate-filter.active,
.evolution-filter.active {
    background: var(--js-filter-active-bg);
    border-color: var(--js-filter-active-border);
    box-shadow: 0 0 15px var(--js-filter-active-shadow);
}

/* Специальные стили для donate фильтров */
.donate-filter.active,
.evolution-filter.active {
    background: var(--js-filter-active-bg);
    border-color: var(--js-filter-active-border);
    box-shadow: 0 0 20px var(--js-filter-active-shadow);
    color: var(--color-text-primary);
    font-weight: bold;
}

.donate-filter.active::before,
.evolution-filter.active::before {
    content: "✓";
    color: var(--js-evolution-checkmark);
    font-weight: bold;
    margin-right: 5px;
}

img.rarity-icon {
    width: 40px;
}

button.rarity-filter.sss {
    padding: 0px 10px !important;
}

/* .rarity-filter:hover,
.donate-filter:hover {
    background: var(--js-star-close-hover-bg);
    border-color: var(--color-border-accent-strong);
    transform: translateY(-2px);
} */

/* Стили для неактивных donate фильтров */
.donate-filter:not(.active),
.evolution-filter:not(.active) {
    background: rgba(100, 100, 100, 0.2);
    border-color: rgba(150, 150, 150, 0.5);
    color: #999;
    opacity: 0.7;
}

.donate-filter:not(.active)::before,
.evolution-filter:not(.active)::before {
    content: "○";
    color: #666;
    margin-right: 5px;
}

.rarity-icon {

    object-fit: contain;
}

.stars-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.star-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* .star-item:hover {
    transform: translateY(-5px);
}

.star-item:hover .star-container {
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.8),
        inset 0 0 30px rgba(255, 215, 0, 0.3);
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.5), rgba(240, 208, 128, 0.4));
} */

.star-container {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid transparent;
    border-radius: 12px;

    box-shadow:
        var(--js-star-shadow-outer),
        var(--js-star-shadow-inset);
    transition: all 0.3s ease;
}

.donate-icon {
    position: absolute;
    width: 40px;
    /* height: 24px; */
    top: -6px;
    left: -18px;

    z-index: 2;
    filter: var(--js-star-filter-shadow);
}

.star-image {
    width: 200px;

    object-fit: contain;
    border-radius: 8px;

}

.rarity-badge {
    position: absolute;
    top: -13px;
    right: -19px;
    width: 45px;
    width: 45px;
    /* height: 32px; */
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.new-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.promocode-wrapper {
    position: relative;
    display: inline-block;
    margin: 5px;
}

.star-name {
    margin-top: 10px;
    font-size: 14px;
    color: var(--color-text-accent-bright);
    text-align: center;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Tooltip Styles */
.star-tooltip {
    background: rgba(18, 18, 18, 0.98);
    border: 2px solid var(--color-border-accent-bright);
    border-radius: 12px;
    padding: 16px;
    min-width: 300px;
    max-width: 400px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.8),
        var(--js-star-modal-shadow),
        var(--js-modal-inset-yellow-strong);
    display: none;
    backdrop-filter: blur(10px);
    opacity: 1;
}

.tooltip-content {
    color: var(--color-text-primary);
    text-align: center;
}

/* Стили для позиционирования tooltip */
/* Классы tooltip-top и tooltip-bottom используются для JavaScript логики позиционирования */

.tooltip-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    height: 80px;
}

.tooltip-donate-icon {
    position: absolute;
    width: 40px;
    top: -15px;
    left: -15px;
    filter: var(--js-star-filter-shadow);
}

.tooltip-star-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 6px;
}

.tooltip-rarity-badge {
    position: absolute;
    top: -20px;
    right: -15px;
    width: 50px;
}

.tooltip-name {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-text-accent-bright);
    text-align: center;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.tooltip-sub-name {
    font-size: 10px;
    font-weight: normal;
    color: #888;
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tooltip-desc {
    font-family: 'Radiance', "Noto Sans", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #ddd;
    text-align: center;
}

.tooltip-desc div {
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border-left: 3px solid var(--js-star-description-border);
    text-align: center;
}

.tooltip-desc div:last-child {
    margin-bottom: 0;
}

/* Mobile responsiveness for stars */
@media (max-width: 768px) {
    .stars-page {
        padding: 18px;
        /* 15px + 25% */
    }

    .stars-filters {
        gap: 20px;
        margin-bottom: 20px;
    }

    .rarity-filters,
    .donate-filters {
        flex-wrap: wrap;
        justify-content: center;
    }

    .donate-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .donate-filters .evolution-filter {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 140px;
    }

    .rarity-filter,
    .donate-filter,
    .evolution-filter {
        padding: 6px 12px;
        font-size: 12px;
    }

    img.rarity-icon {
        width: 29px;
    }

    .rarity-badge {

        top: -13px;
        right: -19px;
        width: 45px;
        height: 32px;
    }

    .stars-grid {
        gap: 15px;
    }

    .star-container {
        width: 100px;
        height: 100px;
    }

    .star-image {
        width: 100px;
        height: 100px;
    }

    /* .rarity-badge {
        width: 28px;
        height: 28px;
        top: -6px;
        right: -6px;
    } */

    .donate-icon {
        width: 24px;

        top: -10px;
        left: -11px;

    }

    .star-name {
        font-size: 12px;
        margin-top: 8px;
    }

    .star-tooltip {
        min-width: 250px;
        max-width: 300px;
        padding: 12px;
    }

    .tooltip-header {
        gap: 8px;
        height: 70px;
    }

    .tooltip-star-image {
        width: 100px;
        height: 100px;
    }

    .tooltip-name {
        font-size: 16px;
    }

    .tooltip-desc {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .stars-grid {
        gap: 10px;
    }

    .star-container {
        width: 80px;
        height: 80px;
    }

    .star-image {
        width: 80px;
        height: 80px;
    }

    /* 
    .rarity-badge {
        width: 24px;
        height: 24px;
    } */



    .star-name {
        font-size: 11px;
    }
}

/* Мобильное модальное окно для звёзд */
.mobile-star-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(5px);
}

.mobile-star-modal.active {
    display: flex;
}

.mobile-star-modal-content {
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    background: rgba(18, 18, 18, 0.98);
    border: 2px solid var(--color-border-accent-bright);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.8),
        var(--js-modal-shadow-yellow),
        var(--js-modal-inset-yellow);
}

.mobile-star-modal-header {
    position: relative;
    padding: 20px;
    border-bottom: 1px solid var(--color-border-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
}



.mobile-star-modal-donate {
    position: absolute;
    top: 10px;
    left: 5px;
    width: 50px;
    height: 50px;
    border-radius: 6px;
}

.mobile-star-modal-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.mobile-star-modal-icon {
    width: 120px;

    border-radius: 8px;
    margin-bottom: 15px;
}

.mobile-star-modal-rarity-icon {
    position: absolute;
    top: 10px;
    right: 5px;
    width: 55px;

    border-radius: 6px;
}



.mobile-star-modal-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--color-text-accent-bright);
    margin-bottom: 3px;
    text-align: center;
}

.mobile-star-modal-subtitle {
    font-size: 16px;
    font-weight: normal;
    color: #888;
    margin-bottom: 8px;
    text-align: center;
}



.mobile-star-modal-close {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(18, 18, 18, 0.9);
    border: 2px solid var(--color-border-accent-bright);
    color: var(--color-text-accent-bright);
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    z-index: 10002;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        var(--js-modal-shadow-yellow);
}

.mobile-star-modal-close:hover {
    background: var(--js-star-close-hover-bg);
    transform: scale(1.1);
}

.mobile-star-modal-body {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
    color: #ddd;
    font-family: 'Radiance', "Noto Sans", sans-serif;
    line-height: 1.5;
    text-align: center;
}

.mobile-star-desc-line {
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border-left: 3px solid var(--js-star-description-border);
    text-align: center;
}

.mobile-star-desc-line:last-child {
    margin-bottom: 0;
}

/* Мобильные стили для модального окна звёзд */
@media (max-width: 480px) {
    .mobile-star-modal-content {
        max-width: 95vw;
        max-height: 85vh;
    }


    .mobile-star-modal-header {
        padding: 15px;
    }

    .mobile-star-modal-donate {
        width: 45px;
        height: 45px;
        left: 0px;
        top: 0px;
    }

    .mobile-star-modal-rarity-icon {

        top: 0px;
        right: 0px;
    }

    .mobile-star-modal-center {
        margin-top: 5px;
    }

    .mobile-star-modal-icon {

        margin-bottom: 12px;
    }

    .mobile-star-modal-title {
        font-size: 18px;
    }

    .mobile-star-modal-close {
        top: 15px;
        right: 15px;
        font-size: 32px;
        width: 50px;
        height: 50px;
        padding: 10px;
    }

    .mobile-star-modal-close:hover {
        background: var(--js-star-close-hover-bg);
        transform: scale(1.1);
    }

    .mobile-star-modal-body {
        padding: 15px;
        max-height: 55vh;
    }
}

/* Immortals Slot Filters */
.immortals-slot-filters {
    margin: 20px 0;
    padding: 15px;
    background: var(--color-bg-overlay);
    border-radius: 8px;
    backdrop-filter: blur(5px);
}

.slot-filters-title {
    color: var(--color-text-accent-bright);
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.slot-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.slot-filter {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.3s ease;

    font-family: Radiance, sans-serif;
    font-size: 14px;
    min-width: 80px;
    justify-content: center;
}

.slot-filter.active {
    background: var(--js-filter-active-bg);
    border-color: var(--js-filter-active-border);
    color: var(--color-text-accent-bright);
    box-shadow: 0 0 10px var(--js-filter-active-shadow);
}

.slot-filter:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.slot-filter.active:hover {
    background: var(--js-filter-hover-bg);
}

/* Immortals Cards Slot Text */
.trait-slots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 0;
    flex-wrap: wrap;
}

.slot-text {
    font-size: 11px;
    color: #888;

    padding: 2px 6px;
    border-radius: 3px;
    text-transform: lowercase;
    font-weight: 500;
}

/* Mobile responsiveness for slot filters */
@media (max-width: 768px) {
    .slot-filter-buttons {
        gap: 6px;
    }

    .slot-filter {
        padding: 6px 8px;
        min-width: 60px;
        font-size: 11px;
    }


    .immortals-slot-filters {
        margin: 15px 0;
        padding: 10px;
    }
}

/* Промокоды стили */
.promocodes-section {
    padding: 20px;
    max-width: 80%;
    margin: 0 auto;
}

.promocodes-page {
    display: flex;

    align-items: center;
    min-height: 60vh;
}

.promocodes-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    width: 80%;
    max-width: none;
}

.promocode-item {
    background: var(--color-bg-overlay-dark);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.promocode-item:hover {
    border-color: var(--js-promocode-hover-border);
    background: var(--js-promocode-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--js-promocode-hover-shadow);
}

.promocode-item.copied {
    background: rgba(76, 175, 80, 0.3);
    border-color: #4caf50;
    animation: copiedAnimation 0.3s ease;
}

@keyframes copiedAnimation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.promocode-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text-accent-bright);
    font-family: 'Radiance', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}


@media (max-width: 768px) {
    .promocodes-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .promocode-item {
        padding: 10px;
        min-height: 40px;
    }

    .promocode-text {
        font-size: 12px;
    }
}

/* Новые стили для промокодов */
.promocodes-instruction {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--color-text-accent-bright);
    font-family: 'Reaver', serif;
}

.promocodes-controls {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.remember-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text-accent-bright);
    font-family: 'Radiance', "Noto Sans", sans-serif;
    user-select: none;
}

.remember-checkbox input[type="checkbox"] {
    display: none;
}

.checkmark {
    position: relative;
    width: 20px;
    height: 20px;
    background: var(--color-bg-overlay-dark);
    border: 2px solid var(--color-border-accent-strong);
    border-radius: 6px;
    margin-right: 12px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remember-checkbox input[type="checkbox"]:checked+.checkmark {
    background: linear-gradient(135deg, #4caf50, #45a049);
    border-color: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}

.checkmark::after {
    content: "✓";
    position: absolute;
    display: none;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

.remember-checkbox input[type="checkbox"]:checked+.checkmark::after {
    display: block;
}

.remember-checkbox:hover .checkmark {
    border-color: #fff;
    box-shadow: var(--shadow-accent);
}

.promocodes-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 60vh;
}

.promocode-item {
    position: relative;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promocode-item:hover .promocode-overlay {
    opacity: 0;
}

.promocode-item.copied .promocode-overlay {
    opacity: 0;
}

.promocode-text {
    position: relative;
    z-index: 2;
}

.promocode-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-overlay-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.copy-instruction {
    font-size: 12px;
    color: var(--color-text-accent-bright);
    font-family: 'Radiance', "Noto Sans", sans-serif;
}


@media (max-width: 768px) {
    .promocodes-instruction {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .promocodes-controls {
        margin-bottom: 20px;
    }

    .remember-checkbox {
        font-size: 12px;
    }

    .checkmark {
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }

    .promocode-item {
        min-height: 40px;
    }
}

/* Стили для титулов */
.titles-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 400px 20px;
}

.titles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.title-card {
    background: #0e0e0e;
    border: 2px solid var(--color-border-accent);
    border-radius: 15px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    height: 190px;
    opacity: 0;
    transform: translateY(30px);
}

.title-card.visible {
    opacity: 1;
    transform: translateY(0);
}


.title-card:hover {
    border-color: var(--color-border-accent-bright);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 5px 15px var(--shadow-accent);
    z-index: 10;
}

.title-card:hover .title-description {
    border-color: var(--color-border-accent-bright);
}

.title-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    height: 60px;
    flex-shrink: 0;
}

.title-icon img {
    width: 100%;

    border-radius: 8px;
    object-fit: cover;
}

.title-info {
    text-align: center;

    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.title-name {
    font-family: 'Reaver', serif;
    font-size: 14px;
    color: var(--color-text-accent-bright);
    margin-bottom: 6px;
    font-weight: bold;
}

.title-sub-name {
    font-family: 'Radiance', sans-serif;
    font-size: 14px;
    color: #ddd;
    font-style: italic;
}

.title-description {
    position: absolute;
    top: calc(100% - 2px);
    left: -2px;
    right: -2px;
    background: #0e0e0e;
    border: 2px solid var(--js-title-border-strong);
    border-top: none;
    border-radius: 0 0 15px 15px;
    padding: 15px;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    backdrop-filter: blur(10px);

    max-width: none;
    min-height: 150px;
}

.title-card:hover .title-description {
    opacity: 1;
    pointer-events: auto;
}

.title-description.hidden {
    display: none;
}

.title-desc {
    font-family: 'Radiance', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #ddd;
    text-align: center;
}

.title-desc p {
    margin: 0 0 6px 0;
    padding: 0;
    background: none;
    border: none;
}

.title-desc p:last-child {
    margin-bottom: 0;
}


/* Адаптивность для титулов */
@media (max-width: 1024px) {
    .titles-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .title-card {
        height: 220px;
        padding: 18px;
    }
}

@media (max-width: 768px) {
    .titles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 15px;
    }

    .title-card {
        height: 180px;
        padding: 12px;
        cursor: pointer;
    }

    .title-card:hover {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    .title-icon img {
        width: 100%;
        margin-top: 30px;

    }

    .title-name {
        font-size: 20px;
    }

    .title-sub-name {
        font-size: 15px;
    }

    /* Скрываем описание на мобильных - будем использовать модальное окно */
    .title-description {
        display: none;
    }
}

@media (max-width: 480px) {
    .titles-grid {
        grid-template-columns: 1fr;
    }
}



/* Стили для модального окна титулов */
.title-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg-overlay-darker);
    backdrop-filter: blur(5px);
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

.title-modal.active {
    display: flex;
}

.title-modal-content {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(20, 20, 20, 0.95));
    border: 2px solid var(--js-title-border-strong);
    border-radius: 15px;
    padding: 25px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        var(--js-title-modal-shadow-inset);
    backdrop-filter: blur(10px);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.title-tooltip-content {
    padding: 15px;
}

.title-tooltip-header {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.title-tooltip-image {
    width: 100%;
    margin: -30px 0 -10px 0;
    border-radius: 8px;
}

.title-tooltip-name {
    font-family: 'Reaver', serif;
    font-size: 18px;
    color: var(--color-text-accent-bright);
    text-align: center;
    margin-bottom: 5px;
}

.title-tooltip-sub-name {
    font-family: 'Radiance', sans-serif;
    font-size: 14px;
    color: #ddd;
    text-align: center;
    margin-bottom: 15px;
    font-style: italic;
}

.title-tooltip-desc {
    font-family: 'Radiance', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #ddd;
}

.title-tooltip-desc p {
    margin: 0 0 8px 0;
}

.title-tooltip-desc p:last-child {
    margin-bottom: 0;
}

.title-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--color-text-accent-bright);
    font-size: 24px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.title-modal-close:hover {
    background: var(--js-button-bg);
}


/* Сетка для карточек эволюции */
.evolution-stars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 20px 0;
}

/* Стили для карточек эволюции звёзд */
.evolution-star-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(20, 20, 20, 0.8));
    border: 2px solid var(--color-border-accent);
    border-radius: 15px;
    padding: 20px;
    text-align: left;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    cursor: auto;
    opacity: 0;
    transform: translateY(20px);
    min-height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.evolution-star-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.evolution-star-card:hover {
    border-color: var(--color-border-accent-bright);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.evolution-star-name {
    font-family: 'Reaver', serif;
    font-size: 18px;
    color: var(--color-text-accent-bright);
    text-align: left;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    margin: 0;
    font-weight: bold;
    flex-shrink: 0;
    min-width: 90px;
    position: relative;
    padding-right: 15px;
}

.evolution-star-name::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 200%;
    background: var(--js-wings-progress-gradient);
    border-radius: 1px;
    box-shadow: var(--js-wings-progress-shadow);
}

.evolution-star-desc {
    font-family: 'Radiance', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #bbb;
    text-align: left;
    margin: 0;
    flex: 1;
    padding-left: 10px;
}

.evolution-stat-line {
    display: inline;
    margin: 0;
}

.evolution-stat-line:not(:last-child)::after {
    content: ", ";
}

/* Адаптивные стили для эволюции */
@media (max-width: 768px) {
    .evolution-star-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 15px;
    }

    .evolution-star-name {
        font-size: 16px;
        min-width: auto;
        padding-right: 0;
        padding-bottom: 8px;
        text-align: center;
        width: 100%;
    }

    .evolution-star-name::after {
        left: 0;
        right: auto;
        top: 100%;
        transform: translateY(0);
        width: 100%;
        height: 2px;
        background: var(--js-wings-progress-gradient);
    }

    .evolution-star-desc {
        font-size: 13px;
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .evolution-star-card {
        padding: 12px;
        gap: 6px;
    }

    .evolution-star-name {
        font-size: 14px;
        padding-bottom: 6px;
        text-align: center;
        width: 100%;
    }

    .evolution-star-desc {
        font-size: 12px;
    }
}

/* Стили для сокровищ */
.treasures-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 400px 20px;
}

.treasures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.treasure-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(20, 20, 20, 0.9));
    border: 2px solid var(--color-border-accent);
    border-radius: 15px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    min-height: 200px;
}

.treasure-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.treasure-card:hover {
    border-color: var(--js-treasure-hover-border);
    transform: translateY(-5px);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.6),
        var(--js-treasure-hover-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.treasure-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--js-treasure-shimmer-gradient);
    border-radius: 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

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

.treasure-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
}

.treasure-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.treasure-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: var(--js-treasure-image-shadow);
}

.treasure-name {
    font-family: 'Reaver', serif;
    font-size: 20px;
    color: var(--color-text-accent-bright);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    margin: 0;
    font-weight: bold;
    flex: 1;
}

.treasure-content {
    margin-top: 15px;
}

.treasure-section {
    margin-bottom: 20px;
}

.treasure-section:last-child {
    margin-bottom: 0;
}

.treasure-section-title {
    font-family: 'Reaver', serif;
    font-size: 14px;
    color: var(--color-text-accent-bright);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--js-section-title-border);
    padding-bottom: 4px;
}

.treasure-description {
    font-family: 'Radiance', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #bbb;
    text-align: left;
    margin: 0;
}

.treasure-set-items {
    margin-bottom: 10px;
}

.set-item {
    font-family: 'Radiance', sans-serif;
    font-size: 12px;
    color: var(--color-text-accent-bright);
    margin-bottom: 3px;
    padding-left: 8px;
    position: relative;
}

.set-item::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--js-treasure-text-muted);
}

.treasure-sets {
    font-family: 'Radiance', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #ddd;
    text-align: left;
    margin: 0;
}

/* Адаптивность для сокровищ */
@media (max-width: 1024px) {
    .treasures-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .treasures-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }

    .treasure-card {
        min-height: auto;
        padding: 15px;
    }

    .treasure-header {
        gap: 12px;
        margin-bottom: 12px;
    }

    .treasure-icon {
        width: 50px;
        height: 50px;
    }

    .treasure-name {
        font-size: 18px;
    }

    .treasure-section-title {
        font-size: 13px;
    }

    .treasure-description,
    .treasure-sets {
        font-size: 12px;
    }

    .set-item {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .treasures-page {
        padding: 15px 15px 400px 15px;
    }

    .treasures-grid {
        padding: 10px;
        gap: 12px;
    }

    .treasure-card {
        padding: 12px;
    }

    .treasure-header {
        gap: 10px;
        margin-bottom: 10px;
    }

    .treasure-icon {
        width: 45px;
        height: 45px;
    }

    .treasure-name {
        font-size: 16px;
    }

    .treasure-section-title {
        font-size: 12px;
    }


    .treasure-description,
    .treasure-sets {
        font-size: 11px;
    }

    .set-item {
        font-size: 10px;
    }
}

/* Wings Section Styles */
.wings-section {
    width: 100%;
    /* inherit page background; allow animated particles from .main-container::before to show */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* Wings Sets Styles */
.wings-sets-section {
    width: 100%;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    border: 1px solid var(--js-level-indicator-border);
    backdrop-filter: blur(5px);
    padding: 0 0 20px 0;
}

.wings-sets-title {
    color: var(--color-text-accent-bright);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Reaver', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wings-sets-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px;
    justify-items: center;
    max-width: 700px;
    margin: 0 auto;
}

.wings-set-item {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 10px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--color-border-accent);
}

.wings-set-item:hover {
    transform: scale(1.1);
    background: var(--js-button-bg);
    border-color: var(--color-border-accent-strong);
}

.wings-set-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

.wings-set-item .set-name {
    color: var(--color-text-primary);
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    font-weight: 500;
}

/* Wings Set Modal Styles */
.modal-wings-set {
    display: none;
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-content-wings-set {
    background: var(--js-modal-wings-bg);
    margin: 5% auto;
    padding: 30px;
    border-radius: 20px;
    border: 2px solid var(--color-border-accent-bright);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.modal-close-button {
    color: var(--color-text-accent-bright);
    float: right;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 20px;
    transition: color 0.3s ease;
}

.modal-close-button:hover {
    color: var(--color-text-primary);
}

.modal-wings-set-content {
    color: white;
    margin-top: 20px;
}

.wings-set-modal-title {
    color: var(--color-text-accent-bright);
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Reaver', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wings-set-modal-images {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.set-item-icon {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid var(--color-border-accent-bright);
}

/* Requirements section */
.requirements-section {
    margin-bottom: 25px;
    text-align: center;
}

.requirements-title {
    color: #aaa;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    font-family: 'Reaver-Semibold', serif;
}

.requirements-list {
    color: var(--color-text-muted);
    font-size: 14px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-border-primary);
    font-family: 'Radiance', "Noto Sans", sans-serif;
}

.requirements-text {
    flex: 1;
}


.info-icon {
    position: relative;
    width: 20px;
    height: 20px;
    background: var(--js-wings-info-bg);
    color: var(--color-text-accent-bright);
    border: 1px solid var(--js-wings-info-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    user-select: none;
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

.info-icon:hover {
    background: var(--js-wings-info-hover-bg);
}

.info-icon[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: fixed;

    left: 50%;
    transform: translateX(-50%);
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    width: 350px;
    line-height: 1.5;
    z-index: 10000;
    white-space: normal;
    text-align: center;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid var(--js-wings-tooltip-border);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    color: var(--color-text-primary);
}

/* Bonuses section */
.bonuses-section {
    text-align: center;
}

.bonuses-title {
    color: var(--color-text-accent-bright);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    font-family: 'Reaver-Semibold', serif;
}

.current-bonuses {
    color: var(--color-text-accent-bright);
    font-size: 14px;
    line-height: 1.6;
    background: var(--js-button-bg);
    padding: 15px;
    border-radius: 12px;
    border: 2px solid var(--color-border-accent);
    box-shadow: var(--shadow-accent);
    font-family: 'Radiance', "Noto Sans", sans-serif;
}

.bonus-line {
    display: block;
    margin-bottom: 2px;
}

.bonus-line:last-child {
    margin-bottom: 0;
}

/* Previous descriptions section */
.previous-descriptions-section {
    margin-bottom: 20px;
    text-align: left;
}

.previous-set-desc {
    color: #bbb;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid rgba(255, 255, 255, 0.1);
    font-family: 'Radiance', "Noto Sans", sans-serif;
}

.previous-set-desc strong {
    color: #ddd;
}

.wings-set-modal-desc {
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--js-level-indicator-border);
}

/* Responsive styles for wings sets */
@media (max-width: 768px) {
    .wings-sets-section {
        padding: 15px;
        margin-bottom: 20px;
    }

    .wings-sets-title {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .wings-sets-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        max-width: 500px;
    }

    .wings-set-item img {
        width: 50px;
        height: 50px;
    }

    .wings-set-item .set-name {
        font-size: 11px;
    }

    .modal-content-wings-set {
        margin: 10% auto;
        padding: 20px;
        width: 95%;
        max-width: 500px;
    }

    .wings-set-modal-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .wings-set-modal-images {
        gap: 10px;
        margin-bottom: 20px;
    }

    .set-item-icon {
        width: 60px;
        height: 60px;
    }

    .bonuses-title {
        font-size: 16px;
    }

    .current-bonuses {
        font-size: 13px;
        padding: 12px;
    }

    .previous-set-desc {
        font-size: 12px;
        padding: 8px;
    }

    .info-icon {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }


    .wings-set-modal-desc {
        font-size: 13px;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .wings-sets-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .wings-set-item img {
        width: 45px;
        height: 45px;
    }

    .wings-set-item .set-name {
        font-size: 10px;
    }

    .modal-content-wings-set {
        margin: 5% auto;
        padding: 15px;
        width: 95%;
        max-height: 90vh;
    }

    .wings-set-modal-title {
        font-size: 18px;
    }

    .set-item-icon {
        width: 50px;
        height: 50px;
    }

    .bonuses-title {
        font-size: 14px;
    }

    .current-bonuses {
        font-size: 12px;
        padding: 10px;
    }

    .previous-set-desc {
        font-size: 11px;
        padding: 7px;
    }

    .info-icon {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

}

.wings-section.hidden {
    display: none !important;
}

.wings-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.wings-slider-container {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 600px;
    background: var(--color-bg-overlay);
    border-radius: 20px;
    border: 2px solid var(--color-border-accent);
    backdrop-filter: blur(10px);
    padding: 40px;
    overflow: hidden;
    touch-action: pan-y;
}

.wings-slider {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.wings-slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.wings-image {
    width: 80%;
    margin-top: -120px;
    object-fit: contain;
    margin-bottom: -20px;
    filter: var(--js-wings-image-shadow);
    transition: transform 0.3s ease;
}

.wings-image:hover {
    transform: scale(1.05);
}

.wings-stats-table {
    width: 100%;
    max-width: 650px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid var(--js-level-indicator-border);
    overflow: visible;
}

.wings-table-row {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.wings-table-row.header-row {
    background: var(--js-button-bg);
    font-weight: bold;
    font-size: 16px;
    color: var(--color-text-accent-bright);
    border-radius: 15px 15px 0 0;
}

.wings-table-row.data-row {
    font-size: 14px;
}

.wings-table-cell {
    flex: 0 0 30%;
    color: var(--color-text-primary);
    text-align: center;
    padding: 0 10px;
}

.wings-table-cell.label-cell {
    flex: 0 0 40%;
    text-align: left;
    color: var(--color-text-accent-bright);
    font-weight: 500;
}

.wings-table-cell.wings-title-cell {
    flex: 0 0 40%;
    text-align: left;
}

.wings-table-cell.cost-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.wings-cost-item {

    align-items: center;
    gap: 8px;
    color: var(--color-text-accent-bright);
    font-weight: bold;
}

.wings-cost-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.wings-tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wings-tooltip-trigger {
    width: 20px;
    height: 20px;
    background: var(--js-wings-info-bg);
    color: var(--color-text-accent-bright);
    border: 1px solid var(--js-wings-info-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
    user-select: none;
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
}

.wings-tooltip-trigger:hover {
    background: var(--js-wings-info-hover-bg);
    transform: scale(1.1);
}

.wings-tooltip {
    position: absolute;
    top: auto;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    color: var(--color-text-primary);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--color-border-accent);
    font-size: 13px;
    white-space: normal;
    max-width: 300px;
    min-width: 180px;
    text-align: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    margin-top: 0;
    line-height: 1.4;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.wings-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.95);
}

.wings-tooltip.visible {
    opacity: 1;
    pointer-events: auto;
}

.wings-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 10;
}

.wings-nav-btn {
    background: var(--js-button-bg);
    color: var(--color-text-accent-bright);
    border: 1px solid var(--js-wings-info-border);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    transition: all 0.3s ease;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    margin: 0 20px;
}

.wings-nav-btn:hover {
    background: var(--js-wings-nav-hover-bg);
    transform: scale(1.1);
}

.wings-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.wings-dots {
    display: none;
}

/* Mobile adaptations for wings */
@media (max-width: 1024px) {
    .wings-slider-container {
        padding: 30px 20px;
        min-height: 650px;
    }

    .wings-image {
        width: 450px;
        height: 450px;
    }

    .wings-stats-table {
        max-width: 450px;
    }

    .wings-nav-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin: 0 15px;
    }
}

@media (max-width: 768px) {
    .wings-section {
        padding: 15px;
    }

    .wings-slider-container {
        padding: 20px 15px;
        min-height: 550px;
    }

    .wings-image {
        width: 360px;
        height: 360px;
        margin-bottom: 20px;
    }

    .wings-stats-table {
        max-width: 100%;
    }

    .wings-table-row {
        padding: 2px 8px;
        display: grid;
        grid-template-columns: 40% 30% 30%;
        align-items: center;
    }

    .wings-table-row.header-row {
        font-size: 12px;
        padding: 8px;
        display: grid;
        grid-template-columns: 40% 30% 30%;
    }

    .wings-table-row.value-row {
        font-size: 12px;
        padding: 1px 8px;
    }

    .wings-table-cell {
        padding: 0 5px;
        /* отменяем flex-ширины для грид-режима */
        flex: initial;
        width: auto;
    }

    .wings-cost-item {
        gap: 3px;
    }

    .wings-cost-icon {
        width: 16px;
        height: 16px;
    }

    .wings-nav-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
        margin: 0 10px;
    }

    .wings-tooltip {
        max-width: 280px;
        min-width: 160px;
        font-size: 12px;
        padding: 8px 10px;
    }

    .wings-tooltip-trigger {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .wings-slider-container {
        padding: 15px 10px;
        min-height: 400px;
    }

    .wings-image {

        margin-bottom: -80px;
    }

    .wings-table-row {
        padding: 2px 6px;
        display: grid;
        grid-template-columns: 46% 27% 27%;
        align-items: center;
    }

    .wings-table-row.header-row {
        font-size: 10px;
        padding: 6px;
        display: grid;
        grid-template-columns: 46% 27% 27%;
    }

    .wings-table-row.value-row {
        font-size: 11px;
        padding: 1px 6px;
    }

    .wings-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
        margin: 0 8px;
    }

    .wings-tooltip {
        max-width: 240px;
        min-width: 140px;
        font-size: 11px;
        padding: 6px 8px;
    }

    .wings-tooltip-trigger {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }
}

/* Футер */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--js-footer-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 0;
    text-align: center;
    z-index: 1000;
}

.footer-content p {
    margin: 0;
    color: var(--js-footer-text-color);
    font-size: 12px;
    font-family: 'Radiance', "Noto Sans", sans-serif;
}

/* Кнопка переключения снега */
.snow-toggle {
    position: fixed;
    bottom: 45px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border-accent-bright);
    color: var(--color-text-accent-bright);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-accent);
    user-select: none;
}

.snow-toggle:hover {
    background: var(--js-button-hover-bg);
    border-color: var(--color-accent-bright);
    box-shadow: var(--shadow-accent-bright);
    transform: scale(1.1);
}

.snow-toggle:active {
    transform: scale(0.95);
}

.snow-toggle.snow-off {
    opacity: 0.6;
}

.snow-toggle.snow-off:hover {
    opacity: 1;
}

/* Мобильная версия футера */
@media (max-width: 769px) {
    .site-footer {
        padding: 8px 0;
    }

    .footer-content p {
        font-size: 11px;
    }

    .snow-toggle {
        bottom: 40px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    /* Naga responsiveness */
    .naga-section {
        padding: 12px;
    }

    .naga-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        max-width: none !important;
        margin: 0 !important;
    }

    .naga-card {
        align-items: center;
    }

    .naga-tooltip {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 92vw;
        max-width: 520px;
    }
}

/* Naga section */
.naga-section {
    display: none;
    padding: 16px;
    max-width: 1100px;
    margin: 0 auto 80px;
}

.naga-section:not(.hidden) {
    display: block;
}

.naga-title {
    margin: 8px 0 16px;
    font-size: 20px;
}

.naga-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    max-width: 800px;
    margin: 0 auto;
}

.naga-card {
    background: var(--color-bg-overlay);
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.naga-card:hover {
    outline: 2px solid var(--color-border-accent-bright);
    box-shadow: var(--shadow-accent);
}

.naga-card.hover-open {
    outline: 2px solid var(--color-border-accent-strong);
    box-shadow: var(--shadow-accent-bright);
}

.naga-card .naga-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.naga-card .naga-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.naga-value {
    font-weight: 600;
    font-size: 14px;
}

.naga-sword {
    height: 30px;
    cursor: pointer;
    opacity: 0.9;
    object-fit: contain;
}

.naga-icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Naga modal */
.modal-naga {
    position: fixed;
    inset: 0;
    background: var(--color-bg-overlay-dark);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-naga.show {
    display: flex;
}

.modal-content-naga {
    position: relative;
    background: var(--js-modal-naga-bg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 16px;
    max-width: 520px;
    width: calc(100% - 24px);
}

.modal-naga-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}

.naga-reward {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 120px;
}

.naga-reward-image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
}

.naga-reward-image-wrapper img {
    width: 74px;
    height: 74px;
    object-fit: contain;
}

.naga-reward-image-wrapper .qty {
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    background: var(--color-bg-overlay-dark);
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    min-width: calc(100% + 16px);
    text-align: center;
    pointer-events: none;
}

.naga-reward-with-alt {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.naga-reward-option.has-star {
    cursor: pointer;
}

.naga-or-label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-accent-bright);
    font-weight: 600;
    font-size: 14px;
    padding: 4px 8px;
    text-align: center;
}

.naga-reward.alternative {
    border-style: dashed;
    border-color: var(--color-border-accent-bright);
}

.modal-close-button#modalNagaClose {
    position: absolute;
    top: 8px;
    right: 12px;
}

/* Naga tooltip anchored to card */
.naga-card {
    position: relative;
}

.naga-tooltip {
    position: fixed;
    left: auto;
    right: auto;
    top: 0;
    margin: 0;
    width: max-content;
    max-width: calc(100vw - 16px);
    background: var(--color-bg-secondary);
    border: 1px solid var(--js-naga-tooltip-border);
    border-radius: 8px;
    padding: 10px 12px;
    display: none;
    z-index: 3000;
}

.naga-tooltip.show {
    display: block;
    box-shadow: var(--shadow-accent);
}

.naga-tooltip-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--js-naga-tooltip-close-color);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    z-index: 1;
}

.naga-tooltip-close:hover {
    color: var(--js-naga-tooltip-close-hover);
}

@media (max-width: 769px) {
    .naga-tooltip-close {
        display: flex;
    }
}

.naga-tooltip-content {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    white-space: normal;
}

.naga-tooltip-content .naga-reward {
    min-width: 80px;
}

@media (max-width: 769px) {
    .naga-tooltip-content {
        justify-content: center;
        flex-wrap: wrap;
        white-space: normal;
        max-width: calc(100vw - 16px);
        gap: 6px;
    }

    .naga-tooltip-content .naga-reward {
        min-width: 70px;
        flex: 0 0 auto;
    }

    /* Smart layout based on number of items */
    .naga-tooltip-content[data-items-per-row="1"] {
        justify-content: center;
    }

    .naga-tooltip-content[data-items-per-row="2"] {
        justify-content: center;
    }

    .naga-tooltip-content[data-items-per-row="3"] {
        justify-content: center;
    }

    .naga-tooltip-content[data-items-per-row="4"] {
        justify-content: center;
    }

    /* For 5 items: 3 on top, 2 on bottom - better centering */
    .naga-tooltip-content[data-items-per-row="3"] {
        justify-content: center;
    }

    .naga-tooltip-content[data-items-per-row="3"] .naga-reward:nth-child(4) {
        margin-left: 35px;
        /* Center the 4th item */
    }

    .naga-tooltip-content[data-items-per-row="3"] .naga-reward:nth-child(5) {
        margin-left: 0;
        /* 5th item follows 4th */
    }
}


.update-body .ability img {
    width: 64px;
    height: 64px;
}

img.icon-text {
    width: 50px;
}

/* ============================================
   НОВОГОДНЯЯ ТЕМА - СНЕГ
   ============================================ */

/* Анимация падающего снега */
@keyframes snowfall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0.3;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        transform: translateY(calc(100vh + 20px)) rotate(360deg);
        opacity: 0;
    }
}

.snowflake {
    position: fixed;
    top: -20px;
    color: white;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    user-select: none;
    pointer-events: none;
    z-index: 999999;
    animation: snowfall linear;
    will-change: transform, opacity;
}

/* Контейнер для снежинок */
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999998;
    overflow: hidden;
}

/* Эффект снега поверх блоков */
table,
.hero-ability,
.ability,
.hero-card,
.item-card,
.naga-item,
.wings-item,
.star-item,
.treasure-item,
.title-item,
.update-item,
.home-menu-item,
.attribute-block,
.updates-section,
.naga-section,
.wings-section,
.modal-content,
.modal-content-wings-set,
.modal-content-naga,

.ability-card,
.update-body,
.mobile-item-modal-content,
.title-modal-content,
.naga-card,
.wings-set-item,
.treasure-card,
.immortal-trait-card,
.evolution-filter,
.slot-filter,
.promocode-item,
.level-btn,

.home-card,
.items-tier,
.title-card.visible,
.treasure-card.visible,
.level-bonuses,
.hero-video-section,
.aghanim-effect,
.souls-effect,
.legendary-effect {
    position: relative;
}

/* Исключение: убираем снег с trait-level-controls */
.trait-level-controls {
    position: relative;
}

.trait-level-controls::before,
.trait-level-controls::after {
    display: none !important;
}

/* Снежная шапка сверху блоков */
table::before,
.hero-ability::before,
.ability::before,
.hero-card::before,
.item-card::before,
.naga-item::before,
.wings-item::before,
.bulk-btn::before,
.star-item::before,

.evolution-star-card::before,
.treasure-item::before,
.title-item::before,
.update-item::before,
.home-menu-item::before,
.attribute-block::before,
.updates-section::before,
.naga-section::before,
.wings-section::before,
.modal-content::before,
.modal-content-wings-set::before,
.modal-content-naga::before,
.hero-details-container::before,
.ability-card::before,
.update-body::before,
.mobile-item-modal-content::before,
.title-modal-content::before,
.naga-card::before,
.wings-set-item::before,

.immortal-trait-card::before,
.evolution-filter::before,
.slot-filter::before,
.promocode-item::before,


.home-card::before,
.items-tier::before,
.title-card.visible::before,
.level-bonuses::before,
.hero-video-section::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -1px;
    right: -1px;
    height: 10px;
    background: linear-gradient(to bottom,
            var(--js-snow-cap-color-1) 0%,
            var(--js-snow-cap-color-2) 20%,
            var(--js-snow-cap-color-3) 40%,
            var(--js-snow-cap-color-4) 60%,
            var(--js-snow-cap-color-5) 80%,
            rgba(255, 255, 255, 0.05) 95%,
            transparent 100%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
    z-index: 10;
    box-shadow:
        0 -3px 6px var(--js-snow-cap-shadow-1),
        inset 0 3px 6px var(--js-snow-cap-shadow-2),
        0 2px 4px var(--js-snow-cap-shadow-3);
    filter: blur(0.5px);
}

/* Дополнительный слой снега для больших блоков */
table::after,
.modal-content::after,
.modal-content-wings-set::after,
.modal-content-naga::after,
.mobile-item-modal-content::after,
.title-modal-content::after,
.hero-details-container::after,
.attribute-block::after,
.level-bonuses::after,
.evolution-star-card::after,
.hero-video-section::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 5%;
    right: 5%;
    height: 6px;
    background: linear-gradient(to bottom,
            var(--js-snow-cap-color-3) 0%,
            var(--js-snow-cap-color-4) 40%,
            rgba(255, 255, 255, 0.15) 70%,
            transparent 100%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
    z-index: 9;
    filter: blur(1px);
}

/* Снег на treasure-card через ::after, чтобы не конфликтовать с shimmer эффектом в ::before */
.treasure-card::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -1px;
    right: -1px;
    height: 10px;
    background: linear-gradient(to bottom,
            var(--js-snow-cap-color-1) 0%,
            var(--js-snow-cap-color-2) 20%,
            var(--js-snow-cap-color-3) 40%,
            var(--js-snow-cap-color-4) 60%,
            var(--js-snow-cap-color-5) 80%,
            rgba(255, 255, 255, 0.05) 95%,
            transparent 100%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
    z-index: 11;
    box-shadow:
        0 -3px 6px var(--js-snow-cap-shadow-1),
        inset 0 3px 6px var(--js-snow-cap-shadow-2),
        0 2px 4px var(--js-snow-cap-shadow-3);
    filter: blur(0.5px);
}

/* Эффект накопления снега по углам - только для больших блоков */
table,
.modal-content,
.modal-content-wings-set,
.modal-content-naga,
.mobile-item-modal-content,
.title-modal-content,
.hero-details-container,
.attribute-block,
.level-bonuses,
.hero-video-section {
    box-shadow:
        inset 0 3px 10px var(--js-snow-cap-inset-1),
        inset 0 6px 15px var(--js-snow-cap-inset-2),
        inset 0 1px 3px var(--js-snow-cap-inset-3);
}