/**
 * УНИФИЦИРОВАННАЯ СИСТЕМА ОТОБРАЖЕНИЯ ИКОНКИ КРИСТАЛЛА
 * =====================================================
 * 
 * Этот файл содержит все стили для IMG иконки кристалла (crystal-icon)
 * используемой в качестве индикатора внутриигровой валюты.
 * 
 * АРХИТЕКТУРА:
 * - Базовый класс: .crystal-icon
 * - Модификаторы размера: --small, --medium, --large, --xlarge
 * - Модификаторы контекста: --inline, --balance, --price, --stats, --button
 * 
 * ИСПОЛЬЗОВАНИЕ:
 * <img src="/static/images/icons/crystal.svg" class="crystal-icon crystal-icon--medium crystal-icon--price" alt="">
 */

/* ============================================================================
   БАЗОВЫЙ КЛАСС
   ============================================================================ */

.crystal-icon {
    /* Базовые размеры - средний размер по умолчанию */
    width: 1.1em;
    height: 1.1em;
    
    /* Общие свойства для img и svg */
    display: inline-block;
    flex-shrink: 0;
    object-fit: contain;
    
    /* Позиционирование */
    vertical-align: middle;
    position: relative;
    top: 0em; /* Используем middle для центрирования с текстом */
    
    /* Поведение */
    font-size: inherit;
    transition: none;
    transform: none;
    animation: none;
    
    /* Убираем отступы по умолчанию */
    margin: 0;
    
    /* Оставляем оригинальные цвета новой иконки */
    filter: none;
}

/* Специальные настройки для SVG иконок (используются в кнопках) */
svg.crystal-icon {
    /* Убираем object-fit для SVG */
    object-fit: unset;
    
    /* Цвет для SVG иконок - используем цвет кнопки Telegram */
    fill: var(--tg-theme-button-text-color, currentColor);
    color: var(--tg-theme-button-text-color, currentColor);
}

/* Для темной темы сохраняем оригинальные цвета */
@media (prefers-color-scheme: dark) {
    .crystal-icon {
        filter: none;
    }
}

/* ============================================================================
   МОДИФИКАТОРЫ РАЗМЕРА
   ============================================================================ */

/* Маленький размер - для текста и уведомлений */
.crystal-icon--small {
    width: 1.15em;
    height: 1.15em;
    top: 0em;
}

/* Средний размер - стандартный для большинства случаев */
.crystal-icon--medium {
    width: 1.15em;
    height: 1.15em;
    top: 0em;
}

/* Большой размер - для заголовков и важных элементов */
.crystal-icon--large {
    width: 1.15em;
    height: 1.15em;
    top: 0em;
}

/* Очень большой размер - для баланса в профиле */
.crystal-icon--xlarge {
    width: 1.15em;
    height: 1.15em;
    top: 0em;
}

/* ============================================================================
   МОДИФИКАТОРЫ КОНТЕКСТА
   ============================================================================ */

/* Для отображения в тексте */
.crystal-icon--inline {
    margin-left: 0em;
    top: -0.1em;
}

/* Для отображения баланса */
.crystal-icon--balance {
    margin-left: 0.2em;
    top: 0em;
}

/* Для отображения цены подарков */
.crystal-icon--price {
    margin-left: 0.2em;
    top: 0em;
}

/* Для отображения награды в карточках заданий */
.crystal-icon--task-reward {
    margin-left: 0.2em;
    top: -0.1em;
}

/* Для отображения награды в модальном окне завершения задания */
.crystal-icon--task-reward-modal {
    margin-left: 0.2em;
    top: -0.1em;
}

/* Для отображения в статистике */
.crystal-icon--stats {
    margin-left: 0.2em;
    top: 0em;
}

/* Для отображения в кнопках */
.crystal-icon--button {
    margin-left: 0.2em;
    top: 0em;
}

/* ============================================================================
   ФИКСИРОВАННЫЕ РАЗМЕРЫ ДЛЯ СПЕЦИАЛЬНЫХ СЛУЧАЕВ
   ============================================================================ */

/* Точные размеры в пикселях для случаев где em не подходит */
.crystal-icon--14px {
    width: 14px;
    height: 14px;
    top: -1px;
}

.crystal-icon--16px {
    width: 16px;
    height: 16px;
    top: 0px;
}

.crystal-icon--18px {
    width: 18px;
    height: 18px;
    top: 0px;
}

.crystal-icon--20px {
    width: 20px;
    height: 20px;
    top: 0px;
}

.crystal-icon--22px {
    width: 22px;
    height: 22px;
    top: 1px;
}

.crystal-icon--26px {
    width: 26px;
    height: 26px;
    top: 0px;
}

/* ============================================================================
   АДАПТИВНОСТЬ
   ============================================================================ */

/* На очень маленьких экранах уменьшаем размеры - только для модификаторов */
@media (max-width: 350px) {
    .crystal-icon--large {
        width: 1.2em;
        height: 1.2em;
    }
    
    .crystal-icon--xlarge {
        width: 1.4em;
        height: 1.4em;
    }
}



/* ============================================================================
   УТИЛИТЫ ДЛЯ ОТЛАДКИ
   ============================================================================ */

/* Класс для отладки выравнивания (добавляется временно) */
.crystal-icon--debug {
    border: 1px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

/* ============================================================================
   ИКОНКА КУБИКА (DICE ICON)
   ============================================================================ */

/* Базовый класс для иконки кубика */
.dice-icon {
    /* Размеры - небольшой размер по умолчанию для шансов */
    width: 1em;
    height: 1em;
    
    /* Общие свойства для img */
    display: inline-block;
    flex-shrink: 0;
    object-fit: contain;
    
    /* Позиционирование - выравниваем по центру с текстом */
    vertical-align: middle;
    position: relative;
    top: -0.05em; /* Небольшая коррекция для идеального центрирования */
    
    /* Поведение */
    font-size: inherit;
    transition: none;
    transform: none;
    animation: none;
    
    /* Убираем отступы по умолчанию */
    margin: 0;
    
    /* Применяем цвет через фильтр - делаем кубик того же цвета что и текст */
    filter: brightness(0) saturate(100%) invert(var(--text-invert, 0%)) 
            sepia(var(--text-sepia, 0%)) saturate(var(--text-saturate, 100%)) 
            hue-rotate(var(--text-hue, 0deg)) brightness(var(--text-brightness, 100%)) 
            contrast(var(--text-contrast, 100%));
}

/* Модификаторы размера для кубика */
.dice-icon--small {
    width: 0.9em;
    height: 0.9em;
    top: -0.02em; /* Меньшая коррекция для small размера */
}

.dice-icon--medium {
    width: 1em;
    height: 1em;
    top: -0.05em; /* Центрирование для medium размера */
}

.dice-icon--large {
    width: 1.1em;
    height: 1.1em;
    top: -0.05em; /* Центрирование для large размера */
}

/* Модификаторы контекста для кубика */
.dice-icon--chance {
    /* Для отображения шансов в блоке подарков (font-size: 12px) */
    /* Наследуем цвет текста подсказки */
    filter: brightness(0) saturate(100%) var(--hint-color-filter);
    /* Дополнительная коррекция для размера 12px */
    top: 0.01em;
}

.dice-icon--live-winnings {
    /* Для отображения в live выигрышах (font-size: 10px) */
    /* Наследуем цвет текста подсказки */
    filter: brightness(0) saturate(100%) var(--hint-color-filter);
    /* Коррекция для размера 10px - более точное центрирование */
    top: 0.0em;
}

/* CSS переменные для цветов в разных темах */
:root {
    /* Светлая тема */
    --hint-color-filter: invert(60%) sepia(5%) saturate(347%) hue-rotate(183deg) brightness(95%) contrast(87%);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Темная тема */
        --hint-color-filter: invert(70%) sepia(5%) saturate(347%) hue-rotate(183deg) brightness(95%) contrast(87%);
    }
}

/* Особая обработка цвета для Telegram Web App */
html[data-theme="light"] .dice-icon--chance,
html[data-theme="light"] .dice-icon--live-winnings {
    filter: brightness(0) saturate(100%) invert(60%) sepia(5%) saturate(347%) hue-rotate(183deg) brightness(95%) contrast(87%);
}

html[data-theme="dark"] .dice-icon--chance,
html[data-theme="dark"] .dice-icon--live-winnings {
    filter: brightness(0) saturate(100%) invert(70%) sepia(5%) saturate(347%) hue-rotate(183deg) brightness(95%) contrast(87%);
}

/* ============================================================================
   ПРАВИЛА ИСПОЛЬЗОВАНИЯ
   ============================================================================ */

/**
 * РЕКОМЕНДАЦИИ ПО ИСПОЛЬЗОВАНИЮ:
 * 
 * 1. СТАНДАРТНЫЕ КОМБИНАЦИИ:
 *    - Текст: crystal-icon crystal-icon--small crystal-icon--inline
 *    - Баланс: crystal-icon crystal-icon--large crystal-icon--balance  
 *    - Цена: crystal-icon crystal-icon--medium crystal-icon--price
 *    - Кнопка: crystal-icon crystal-icon--medium crystal-icon--button
 *    - Статистика: crystal-icon crystal-icon--small crystal-icon--stats
 *    - Награда в карточке задания: crystal-icon crystal-icon--medium crystal-icon--task-reward
 *    - Награда в модальном окне: crystal-icon crystal-icon--large crystal-icon--task-reward-modal
 *    - Шансы подарков: dice-icon dice-icon--small dice-icon--chance
 *    - Live выигрыши: dice-icon dice-icon--small dice-icon--live-winnings
 * 
 * 2. ИЗБЕГАЙТЕ:
 *    - Собственных размеров через width/height в inline стилях
 *    - Дополнительных margin/padding в родительских элементах
 *    - Изменения position или display в других CSS файлах
 * 
 * 3. НОВЫЕ ОСОБЕННОСТИ IMG:
 *    - Используется object-fit: contain для корректного масштабирования
 *    - Сохраняются оригинальные цвета новой SVG иконки
 *    - Легкая адаптация яркости для темной темы
 *    - Полная замена SVG спрайтов на IMG элементы
 *    - Иконка кубика автоматически подстраивается под цвет hint-текста
 */