/* ==========================================================================
   Businessman v2.0 — Optimized Stylesheet
   ========================================================================== */

/* === RESET === */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === ROOT === */
:root {
    /* Палитра */
    --primary: #667eea;
    --primary-dark: #5568d3;
    --primary-light: #8b9bf0;
    --accent: #764ba2;
    --accent-dark: #5f3d81;
    --success: #27ae60;
    --success-light: #2ecc71;
    --danger: #c0392b;
    --danger-light: #e74c3c;
    --warning: #f39c12;
    --warning-dark: #e67e22;
    --info: #3498db;
    --info-light: #5dade2;
    --gold: #f39c12;
    --gold-light: #ffd700;

    /* Текст. --text-muted подобран под WCAG AA: был #999 (2.85:1 на белом,
       ниже порога 4.5:1), стал #6e6e6e — 5.10:1 на #fff и 4.68:1 на #f5f5f5. */
    --text: #1a1a1a;
    --text-secondary: #5c5c5c;
    --text-muted: #6e6e6e;
    --text-inverse: #fff;

    /* ТОНАЛЬНЫЕ ПАРЫ «подложка + текст». Введены в v6.9.4: раньше эти цвета
       были захардкожены в разметке и на пастельных подложках давали
       2.0–2.9 : 1 (ниже порога WCAG AA 4.5:1). */
    --tone-gold-bg: #fff8e1;   /* бейджи/статусы «в ожидании» */
    --tone-gold-fg: #9a5f08;   /* 4.92:1 на --tone-gold-bg */
    --tone-warn-bg: #fef9e7;   /* налог на прибыль */
    --tone-warn-fg: #a8560a;   /* 4.84:1 на --tone-warn-bg */
    --tone-purple-bg: #f3e5f5; /* соцвзносы */
    --tone-purple-fg: #7b3fa0; /* 6.28:1 на --tone-purple-bg */
    --tone-blue-bg: #e3f2fd;   /* налог на имущество */
    --tone-blue-fg: #1565c0;   /* 5.75:1 на --tone-blue-bg */
    --tone-green-fg: #1e7d46;  /* зелёный текст и фон бейджей, 4.7:1 на #fff */
    --tone-red-fg: #a8281c;    /* красный текст на светлом, 6.9:1 на #fff */
    --muted-on-tone: #5f5f5f;  /* приглушённый текст на пастельных подложках */

    /* Фоны */
    --bg: #fafafa;
    --bg-secondary: #f5f5f5;
    --bg-card: #fff;
    --bg-dark: #1a1a2e;
    --bg-overlay: rgba(0, 0, 0, 0.55);

    /* Границы */
    --border: #e0e0e0;
    --border-light: #f0f0f0;

    /* Тени. В v6.9.4 «Комфорт» они чуть мягче и многослойнее: карточки
       отделяются от фона без «грязной» серой каймы. */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow: 0 2px 4px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-md: 0 4px 8px rgba(16, 24, 40, 0.05), 0 8px 20px rgba(16, 24, 40, 0.09);
    --shadow-lg: 0 8px 16px rgba(16, 24, 40, 0.06), 0 16px 36px rgba(16, 24, 40, 0.10);
    --shadow-xl: 0 16px 40px rgba(16, 24, 40, 0.12), 0 32px 64px rgba(16, 24, 40, 0.14);
    --shadow-primary: 0 4px 14px rgba(102, 126, 234, 0.32);
    --shadow-success: 0 4px 14px rgba(30, 125, 70, 0.30);
    --shadow-danger: 0 4px 14px rgba(168, 40, 28, 0.30);

    /* Скругления. Чуть крупнее — «дружелюбнее» и современнее. */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-full: 9999px;

    /* Отступы */
    --space-xs: 4px;
    --space-sm: 8px;
    --space: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Типографика */
    --font-xs: 0.65em;
    --font-sm: 0.75em;
    --font: 0.85em;
    --font-md: 1em;
    --font-lg: 1.2em;
    --font-xl: 1.5em;
    --font-2xl: 2em;
    --font-3xl: 3em;

    /* Анимации */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --duration-fast: 0.15s;
    --duration: 0.25s;
    --duration-slow: 0.4s;
}

/* === BASE === */
html,
body {
    height: 100%;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    /* Фон из токена: единственная тема — светлая. Раньше здесь стоял
       жёсткий тёмный фон с !important, из-за чего светлая не работала. */
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background: var(--bg);
    z-index: 1;
}

.screen.active {
    display: flex;
}

/* === УТИЛИТЫ === */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.radius-sm { border-radius: var(--radius-sm); }
.radius { border-radius: var(--radius); }
.radius-lg { border-radius: var(--radius-lg); }
.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap { gap: var(--space); }

/* === LOADING === */
#screen-loading {
    justify-content: center;
    align-items: center;
    background: var(--bg-dark);
}

.loading-inner {
    text-align: center;
    animation: fadeInUp 0.6s;
}

.logo-icon {
    font-size: 60px;
    margin-bottom: 10px;
    animation: pulse 2s infinite;
}

.logo-text {
    color: #fff;
    font-size: 2.2em;
    font-weight: 800;
    letter-spacing: 6px;
    margin-bottom: 6px;
}

.logo-sub {
    color: #888;
    font-size: 0.95em;
    margin-bottom: 30px;
}

.logo-version {
    color: #666;
    font-size: 0.72em;
    letter-spacing: 1px;
    margin-top: 18px;
    user-select: text;
}

.loader-bar {
    width: 180px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.loader-fill {
    height: 100%;
    background: #fff;
    width: 0;
    transition: width 0.4s;
}

/* === BUTTONS === */
.btn {
    display: block;
    width: 260px;
    padding: 14px 20px;
    margin: 10px auto;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--font-md);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Мягкий отклик на нажатие — единый для всех кнопок. */
.btn:active {
    transform: translateY(1px) scale(0.995);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:active {
    transform: scale(0.97);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.5);
}

.btn-dark {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    width: 100%;
    box-shadow: var(--shadow-primary);
}

.btn-dark:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    transform: translateY(-1px);
}

.btn-sm {
    display: inline-block;
    width: auto;
    padding: 8px 16px;
    font-size: var(--font-sm);
    margin: 4px;
}

.btn-danger {
    background: #fff;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

.btn-success {
    background: linear-gradient(135deg, var(--success), var(--success-light));
    color: #fff;
    box-shadow: var(--shadow-success);
}

.btn-success:hover {
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.5);
    transform: translateY(-1px);
}

/* === NEWS TICKER === */
.news-ticker {
    background: #fff;
    border-bottom: 1px solid var(--border-light);
    padding: 6px 16px;
    font-size: 0.75em;
    color: var(--text-light);
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

.news-ticker span {
    display: inline-block;
    animation: marquee 25s linear infinite;
}

#politics-news-ticker span {
    display: inline-block;
    animation: marquee 30s linear infinite;
}

/* Премиальные SVG-иконки внутри бегущей строки: держим на строке,
   выравниваем по baseline и не даём анимации «дёргаться». */
.news-ticker .ico,
#news-text .ico {
    width: 1em;
    height: 1em;
    vertical-align: -0.18em;
    display: inline-block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

/* === ВИДЖЕТ КВЕСТА НА «ОБЗОРЕ» + ВХОД В «КРИМИНАЛ» === */
/* Общая высота виджета квеста «Путь бизнесмена» (карточки квеста). */
:root { --overview-entry-h: 108px; }
/* Виджет активного квеста «Путь бизнесмена» — на всю ширину строки. */
.overview-quest-widget {
    margin-bottom: 12px;
}
.overview-quest-widget > div {
    box-sizing: border-box;
    margin-bottom: 0 !important;
}
/* Карточка виджета квеста. */
.overview-quest-card {
    box-sizing: border-box;
    height: var(--overview-entry-h);
}
/* «Активный» квест (с прогрессом) центрируем по вертикали. Inline-стиль
   задаёт display:flex только у «claimable», поэтому для активной карточки
   раскладку задаём здесь. */
.overview-quest-card--v {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.news-ticker {
    position: relative;
    padding: 6px 16px;
}
.news-ticker-viewport {
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.news-ticker-viewport span {
    display: inline-block;
    animation: marquee 25s linear infinite;
}
/* Кнопка-вход в «Криминал»: круглая, с арт-картинкой, внизу справа «Обзора».
   Хост #crime-orb-host лежит в #screen-game вне scroll-контейнера #game-main,
   поэтому кнопка не зависит от потока содержимого и всегда прижата к правому
   нижнему углу экрана. Внутри — арт img/crime.jpg (неоновый «бандит»),
   обрезанный по кругу, поверх — тонкое фиолетовое кольцо и свечение. */
.crime-orb-host {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* слой прозрачен для кликов; сама кнопка — нет */
    z-index: 40;
}
.crime-orb {
    position: fixed;
    top: auto;
    left: auto;
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    width: 56px;
    height: 56px;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    overflow: hidden; /* обрезает картинку и кольцо строго по кругу */
    background: radial-gradient(circle at 50% 45%, #2a1040 0%, #0b0614 78%);
    cursor: pointer;
    pointer-events: auto; /* кликабельна, несмотря на pointer-events:none у хоста */
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.2s ease;
    box-shadow:
        0 0 0 2px rgba(168, 85, 247, 0.55),       /* неоновая окантовка */
        0 0 12px rgba(168, 85, 247, 0.45),        /* внутреннее свечение */
        0 3px 12px rgba(0, 0, 0, 0.55);           /* тень отрыва от фона */
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.35));
}
/* Круглая «линза» с артом: заполняет кнопку, обрезает картинку по кругу. */
.crime-orb-media {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    overflow: hidden;
}
.crime-orb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;      /* картинка-квадрат ровно заполняет круг */
    user-select: none;
    -webkit-user-drag: none;
}
/* Кольцо по краю круга: тонкий неоновый контур, «обыгрывает» свечение арта. */
.crime-orb-ring {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    border: 1.5px solid rgba(203, 145, 255, 0.85);
    box-shadow: inset 0 0 8px rgba(168, 85, 247, 0.55);
    pointer-events: none;
}
.crime-orb:hover {
    transform: scale(1.06);
    box-shadow:
        0 0 0 2px rgba(203, 145, 255, 0.95),
        0 0 20px rgba(168, 85, 247, 0.75),
        0 4px 16px rgba(0, 0, 0, 0.6);
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6));
}
.crime-orb:active { transform: scale(0.94); }
/* Прячем вход в криминал, пока открыт сам криминальный режим. */
body.crime-mode .crime-orb { display: none; }

/* Когда открыт криминал — обычный игровой экран скрыт. */
#screen-game.crime-hidden { display: none !important; }

/* === MAIN CONTENT === */
.game-main {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    -webkit-overflow-scrolling: touch;
}

.game-main::-webkit-scrollbar {
    width: 3px;
}

.game-main::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* === BOTTOM NAV === */
.bottom-nav {
    display: flex;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border-light);
    padding: 4px 2px 6px;
    flex-shrink: 0;
    z-index: 10;
    overflow-x: hidden;
    box-shadow: 0 -1px 0 rgba(16, 24, 40, 0.04), 0 -4px 16px rgba(16, 24, 40, 0.06);
    gap: 0;
    scrollbar-width: none;
}

.bottom-nav::-webkit-scrollbar {
    display: none;
}

.nav-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.65em;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 2px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.nav-icon {
    font-size: 1.3em;
    line-height: 1;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === INLINE SVG ICONS ===
   Иконки-глифы (вместо эмодзи): наследуют цвет через currentColor,
   одинаково выглядят на всех платформах. */
.ico {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    /* Аккуратный «дорогой» вид: лёгкая тень под градиентной заливкой */
    overflow: visible;
}

/* Иконка внутри «квадратика» хедера (фон #f5f5f5, 24×24) */
.ico-box {
    width: 15px;
    height: 15px;
    stroke-width: 2;
}

/* Иконка в нижней навигации: чуть крупнее метки */
.nav-icon.ico {
    width: 1.35em;
    height: 1.35em;
    vertical-align: middle;
}

/* Иконка в логотипе загрузки */
.logo-icon .ico {
    width: 60px;
    height: 60px;
    stroke-width: 1.6;
    color: #ffd700;
    display: block;
}

/* Текстовая подстановка вместо иконки-глифа (например '✓') */
.ico-emoji {
    display: inline-block;
    line-height: 1;
    vertical-align: -0.08em;
    font-weight: 700;
}

/* Премиальная иллюстрация бизнеса в заголовке строки/карточки:
   прижимаем по baseline и слегка отступаем от названия */
.biz-ico-inline {
    vertical-align: -0.18em;
    margin-right: 2px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

/* Иконка бизнеса в списке «Доступные»: центрируем SVG в квадрате */
.new-biz-icon .ico {
    width: 1em;
    height: 1em;
    display: block;
    margin: 0 auto;
}

/* Премиальная иллюстрация предмета аукциона в строке/чипе:
   держим на baseline, слегка отступаем от текста */
.item-ico-inline {
    vertical-align: -0.2em;
    margin-right: 3px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}
/* Предметы аукциона в списках коллекций: не раздувают строку */
.auction-item .ico,
#auction-container .ico {
    display: inline-block;
    vertical-align: middle;
}

/* Пустое состояние «Мои бизнесы»: белая карточка с крупной SVG-иллюстрацией */
.biz-empty-state {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 28px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.biz-empty-art {
    line-height: 0;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 10px rgba(102, 126, 234, 0.22));
}
.biz-empty-art .ico {
    width: 72px;
    height: 72px;
    display: block;
}
.biz-empty-title {
    font-weight: 800;
    font-size: 0.95em;
    color: var(--text, #2c3e50);
    margin-bottom: 4px;
}
.biz-empty-hint {
    font-size: 0.72em;
    color: var(--text-muted, #8a8a8a);
    max-width: 260px;
    line-height: 1.4;
    margin-bottom: 14px;
}
.biz-empty-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 0.75em;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.biz-empty-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
}
.biz-empty-btn:active {
    transform: translateY(0);
}

/* v6.9.3: универсальный empty-state для пустых списков (кредиты, депозиты,
   акции, почта, аренда). Компактнее biz-empty-state, но та же структура:
   иконка → заголовок → подсказка → (опц.) кнопка действия. */
.empty-block {
    background: #fff;
    border: 1px dashed #dfe3ec;
    border-radius: 12px;
    padding: 22px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.empty-block-icon {
    font-size: 2.2em;
    line-height: 1;
    margin-bottom: 8px;
    opacity: 0.85;
}
.empty-block-title {
    font-weight: 800;
    font-size: 0.9em;
    color: var(--text, #2c3e50);
    margin-bottom: 4px;
}
.empty-block-hint {
    font-size: 0.72em;
    color: var(--text-muted, #8a8a8a);
    max-width: 260px;
    line-height: 1.45;
}
.empty-block-btn {
    margin-top: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 0.72em;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.empty-block-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
}
.empty-block-btn:active {
    transform: translateY(0);
}

/* Символ «7» в слотах-автоматах (замена эмодзи 7️⃣) */
.slot-7 {
    font-weight: 900;
    color: #e74c3c;
    font-size: 1.05em;
    line-height: 1;
}

/* Партийный бейдж — однотипный цветной кружок (цвет задаётся inline через color) */
.party-badge {
    line-height: 0;
    flex-shrink: 0;
}
.party-badge .ico {
    width: 1em;
    height: 1em;
    vertical-align: 0;
}

/* Мягкое «премиальное» свечение для золотых иконок */
.ico[data-gold],
.icon-gold .ico,
#empire-name-top-icon .ico {
    filter: drop-shadow(0 1px 1px rgba(241, 196, 15, 0.45));
}

/* Иконки внутри кнопок и заголовков наследуют оптический размер строки */
button .ico,
.btn .ico,
h1 .ico, h2 .ico, h3 .ico, h4 .ico,
.modal-title .ico {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.16em;
}

.nav-label {
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.1;
}

.nav-btn.active {
    /* --primary (#667eea) на белом даёт 3.66:1 — ниже AA для текста 9px.
       --primary-dark (#5568d3) — 4.88:1, читается. */
    color: var(--primary-dark);
    font-weight: 700;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.10), rgba(118, 75, 162, 0.10));
    border-radius: 10px;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.18);
}

/* Золотая «искра» под активной вкладкой — мягкий акцент без текста. */
.nav-btn.active::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.6;
}

.nav-btn.active .nav-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 6px rgba(102, 126, 234, 0.4));
}

.nav-btn.active .nav-label {
    font-weight: 700;
}

/* Премиум-таб: золотой акцент «дорогого» раздела */
.nav-btn[data-tab="premium"] .nav-icon {
    color: var(--gold);
    filter: drop-shadow(0 1px 2px rgba(243, 156, 18, 0.35));
}

.nav-btn[data-tab="premium"].active {
    color: var(--tone-gold-fg);
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.14), rgba(255, 215, 0, 0.14));
}

.nav-btn[data-tab="premium"].active .nav-icon {
    filter: drop-shadow(0 2px 7px rgba(243, 156, 18, 0.55));
}

.nav-btn[data-tab="premium"].active .nav-label {
    color: var(--tone-gold-fg);
}

.nav-btn:active {
    transform: scale(0.92);
}

/* Точка контента */
.nav-btn.has-content .nav-icon::after {
    content: '';
    position: absolute;
    top: 4px;
    right: calc(50% - 10px);
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px #fff;
    animation: navDotPulse 2s ease infinite;
}

.nav-btn.has-important {
    animation: navBtnPulse 2s ease infinite;
}

/* Красный кружок в углу кнопки «Квесты коллекционера»:
   квест выполнен, но награда ещё не получена */
.quest-badge-red {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px #fff;
    pointer-events: none;
    animation: navDotPulse 2s ease infinite;
}

/* Красный кружок на кнопке навигации «Бизнес»: у какой-то точки уровень
   готов к ручному повышению (ждёт кнопку «Повысить»). Отдельный класс от
   зелёной точки has-content, чтобы можно было показывать оба одновременно. */
.nav-btn .biz-lvl-dot {
    position: absolute;
    top: 2px;
    right: calc(50% - 12px);
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px #fff;
    pointer-events: none;
    z-index: 2;
    animation: navDotPulse 2s ease infinite;
}

.nav-btn.biz-lvl-ready .nav-icon {
    animation: navDotPulse 2.4s ease infinite;
}

/* Красный кружок на карточке бизнеса в списке (готовый к повышению уровень). */
.biz-card-lvl-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: #e74c3c;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
    z-index: 3;
    animation: navDotPulse 2s ease infinite;
}


/* === CARDS === */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: var(--space-md);
    margin-bottom: var(--space);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration) var(--ease);
    animation: fadeInUp 0.35s var(--ease);
    position: relative;
    overflow: hidden;
}

/* Мягкая подсветка верхней кромки карточки: даёт «объём» на светлом фоне
   без резкой тени. Не влияет на текст — только декоративный слой.
   Используем ::after, т.к. ::before занят акцентной полоской при hover. */
.card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    pointer-events: none;
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--primary-light);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

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

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.card-title {
    font-weight: 700;
    font-size: 1.05em;
}

.card-badge {
    font-size: 0.7em;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.badge-green { background: #e8f5e9; color: var(--tone-green-fg); }
.badge-red { background: #fef2f2; color: var(--tone-red-fg); }
.badge-gold { background: var(--tone-gold-bg); color: var(--tone-gold-fg); }

/* === LIST === */
.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    transition: var(--transition);
    animation: fadeInUp 0.3s;
}

.list-info { flex: 1; }
.list-name { font-weight: 600; font-size: 0.95em; }
.list-detail { font-size: 0.75em; color: var(--text-light); margin-top: 2px; }

/* === MODAL === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: fadeIn 0.2s;
}

.modal-overlay.hidden {
    display: none;
}

.modal-box {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: 420px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-light);
    animation: scaleIn var(--duration) var(--ease-bounce);
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.modal-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-box h3 {
    font-size: var(--font-lg);
    font-weight: 800;
    margin-bottom: var(--space);
    color: var(--text);
    padding-top: var(--space-xs);
}

.modal-box p {
    color: var(--text-secondary);
    font-size: var(--font);
    line-height: 1.5;
    margin-bottom: var(--space);
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space);
}

/* === TOAST === */
.toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    z-index: 200;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    white-space: nowrap;
}

.toast.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(20px);
}

.toast-show {
    animation: toastIn 0.3s ease;
}

/* === HELP & TASKS === */
.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 0.9em;
    cursor: pointer;
    animation: helpPulse 2s infinite;
    transition: var(--transition);
}

.help-btn:hover {
    background: var(--accent-hover);
    transform: scale(1.1);
    animation: none;
}

.tasks-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0f0f0;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 0.75em;
    cursor: pointer;
    transition: var(--transition);
}

.tasks-mini:hover,
.tasks-mini.has-tasks {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.tasks-mini.has-tasks {
    animation: pulse 2s infinite;
}

.task-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 8px;
}

.task-card.task-done { opacity: 0.5; background: #f9fff9; }
.task-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.task-icon { font-size: 1.3em; }
.task-title { font-weight: 600; font-size: 0.9em; flex: 1; }
.task-difficulty { font-size: 0.65em; font-weight: 700; }
.task-desc { font-size: 0.75em; color: var(--text-light); margin: 4px 0; }
.task-reward-badge { font-size: 0.75em; font-weight: 600; color: var(--success); margin-top: 4px; background: #e8f5e9; display: inline-block; padding: 2px 8px; border-radius: 10px; }

/* === OVERVIEW METRICS === */
.metric-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.metric-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: var(--space-md) var(--space);
    text-align: center;
    border-top: 3px solid var(--accent);
    transition: all var(--duration) var(--ease);
    animation: metricIn 0.5s var(--ease) both;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.05), transparent 70%);
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.metric-card:hover::before { opacity: 1; }
.metric-icon { font-size: 1.8em; margin-bottom: var(--space-xs); transition: transform var(--duration) var(--ease); }
.metric-card:hover .metric-icon { transform: scale(1.15) rotate(-5deg); }
.metric-value { font-size: var(--font-lg); font-weight: 800; margin-bottom: 2px; color: var(--text); }
.metric-label { font-size: var(--font-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.metric-dark { border-top-color: #1a1a1a; }
.metric-green { border-top-color: var(--tone-green-fg); }
.metric-red { border-top-color: var(--tone-red-fg); }
.metric-gold { border-top-color: var(--tone-gold-fg); }
.metric-blue { border-top-color: #4a90d9; }
.metric-sub { font-size: 0.6em; color: var(--text-light); margin-top: 2px; background: var(--bg); display: inline-block; padding: 1px 8px; border-radius: 8px; }

/* === PANELS === */
.dual-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.panel {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
}

.panel-head {
    font-weight: 700;
    font-size: 0.75em;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-income .panel-head { color: var(--tone-green-fg); }
.panel-expense .panel-head { color: var(--tone-red-fg); }
.panel-body { padding: 6px 12px; }
.panel-empty { text-align: center; color: var(--text-muted); font-size: 0.7em; padding: 14px 0; }

.flow-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #fafafa; }
.flow-item:last-child { border-bottom: none; }
.flow-icon { font-size: 1em; width: 20px; text-align: center; flex-shrink: 0; }
.flow-info { flex: 1; min-width: 0; }
.flow-name { font-size: 0.68em; font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-bar { height: 3px; background: #f0f0f0; border-radius: 2px; overflow: hidden; }
.flow-fill { height: 100%; border-radius: 2px; transition: width 0.8s; }
.flow-income { background: linear-gradient(90deg, #27ae60, #2ecc71); }
.flow-expense { background: linear-gradient(90deg, #c0392b, #e74c3c); }
.flow-value { font-size: 0.7em; font-weight: 700; white-space: nowrap; text-align: right; min-width: 50px; }
.flow-total { display: flex; justify-content: space-between; font-size: 0.75em; font-weight: 700; padding: 6px 0 0; border-top: 1px solid var(--border-light); margin-top: 4px; }
.flow-total-income { color: var(--tone-green-fg); }
.flow-total-expense { color: var(--tone-red-fg); }

.passive-row .flow-name { color: #9b59b6; }
.temp-row .flow-name { color: var(--tone-gold-fg); }
.effect-row .flow-name { color: var(--text-light); }
.synergy-row .flow-name { color: #4a90d9; }
.asset-row .flow-name { color: var(--tone-purple-fg); }
.asset-save-row .flow-name { color: var(--tone-green-fg); }
.loan-row .flow-name { color: var(--tone-warn-fg); }
.deposit-row .flow-name { color: var(--tone-green-fg); }

/* === TAX PANEL === */
.tax-panel {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 12px;
}

.tax-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; font-size: 0.8em; }
.tax-system-badge { font-size: 0.75em; color: var(--text-muted); background: var(--bg); padding: 2px 8px; border-radius: 10px; }
.tax-chips { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.tax-chip { background: var(--bg); border-radius: var(--radius-sm); padding: 8px; text-align: center; }
.tax-chip-icon { font-size: 1.2em; margin-bottom: 2px; }
.tax-chip-name { font-size: 0.65em; font-weight: 600; }
.tax-chip-amount { font-size: 0.8em; font-weight: 700; margin: 2px 0; }
.tax-chip-timer { font-size: 0.6em; color: var(--text-muted); }
.tax-chip-progress { height: 3px; background: #e0e0e0; border-radius: 2px; margin-top: 5px; overflow: hidden; }
.tax-chip-bar { height: 100%; border-radius: 2px; transition: width 0.5s; }
.tax-debt-strip { display: flex; justify-content: space-between; align-items: center; background: #fff3cd; border: 1px solid #ffc107; border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 8px; font-size: 0.75em; }
.no-money-tag { color: var(--text-muted); font-size: 0.85em; }

/* === LOAN PANEL === */
.loan-panel { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.loan-panel-head { font-weight: 700; font-size: 0.8em; margin-bottom: 8px; }
.loan-row { display: flex; align-items: center; gap: 8px; font-size: 0.85em; margin-bottom: 5px; }
.loan-name { min-width: 80px; }
.loan-bar-wrap { flex: 1; }
.loan-bar { height: 4px; background: #f0f0f0; border-radius: 2px; overflow: hidden; }
.loan-bar-fill { height: 100%; background: linear-gradient(90deg, #e67e22, #f39c12); border-radius: 2px; transition: width 0.5s; }
.loan-amount { font-weight: 600; }

/* === EFFECTS & NEWS === */
.effects-panel,
.news-panel { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.effects-panel-head,
.news-panel-head { font-weight: 700; font-size: 0.8em; margin-bottom: 8px; }
.effects-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.effect-tag { background: var(--bg); border-radius: 12px; padding: 3px 10px; font-size: 0.68em; }
.effect-tag em { background: #e0e0e0; padding: 1px 5px; border-radius: 6px; font-style: normal; margin-left: 3px; font-size: 0.9em; }
.news-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #fafafa; font-size: 0.75em; }
.news-item:last-child { border-bottom: none; }

/* === BUSINESS === */
.biz-card { padding: 0; overflow: hidden; }
.biz-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-light); }
.biz-title { font-weight: 700; font-size: 1.05em; }
.biz-badge { font-size: 0.7em; background: var(--bg); padding: 4px 10px; border-radius: 12px; color: var(--text-muted); }
.biz-income { margin-left: auto; font-weight: 600; font-size: 0.9em; color: var(--success); }
.biz-tabs { display: flex; border-bottom: 2px solid var(--border-light); }
.biz-tab { flex: 1; padding: 10px; background: none; border: none; font-family: inherit; font-size: 0.8em; color: var(--text-muted); cursor: pointer; transition: var(--transition); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.biz-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* === ПОД-ВКЛАДКИ (Бизнес / Финансы / Активы / Социум / Премиум) ===
   Раньше стиль активной под-вкладки собирался в JS конкатенацией строк с
   хардкодом градиента (#667eea,#764ba2) и #f0f0f0 — 46 копий по файлу
   js/ui.js. В v6.9.4 это один класс, а градиент берётся из токенов темы. */
.sub-tab-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sub-tab-btn {
    flex: 1;
    padding: 12px;
    background: var(--bg-secondary);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.sub-tab-btn:hover { border-color: var(--primary-light); }
.sub-tab-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border-color: transparent;
}
.sub-tab-btn:active { transform: scale(0.98); }
.biz-content { padding: 12px; }
.biz-content.hidden { display: none; }

.upgrades-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.upgrade-item { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 10px; display: flex; gap: 8px; align-items: flex-start; transition: var(--transition); }
.upgrade-item.available { border-color: var(--tone-green-fg); background: #f0fff0; cursor: pointer; }
.upgrade-item.available:hover { border-color: #1e8449; background: #e0ffe0; }
.upgrade-item.cant-afford { border-color: #e0e0e0; background: #fafafa; opacity: 0.7; cursor: not-allowed; }
.upgrade-item.owned { cursor: pointer; opacity: 0.8; }
.upgrade-item.owned:hover { opacity: 1; border-color: var(--tone-warn-fg); }
.upgrade-icon { font-size: 1.3em; width: 24px; text-align: center; flex-shrink: 0; }
.upgrade-info { flex: 1; min-width: 0; }
.upgrade-name { font-weight: 600; font-size: 0.85em; margin-bottom: 2px; }
.upgrade-desc { font-size: 0.7em; color: var(--text-light); margin-bottom: 4px; }
.upgrade-cost { font-size: 0.7em; font-weight: 600; color: var(--text-muted); }
.available-text { color: var(--tone-green-fg) !important; font-weight: 700; }
.cant-afford-text { color: var(--tone-red-fg) !important; }
.owned-text { color: var(--tone-warn-fg) !important; }

.actions-grid { display: flex; flex-direction: column; gap: 8px; }
.action-item { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 12px; display: flex; gap: 10px; align-items: center; transition: var(--transition); }
.action-item:hover { border-color: var(--accent); background: #fafafa; }
.action-icon { font-size: 1.5em; width: 30px; text-align: center; }
.action-info { flex: 1; }
.action-name { font-weight: 600; font-size: 0.9em; margin-bottom: 2px; }
.action-desc { font-size: 0.75em; color: var(--text-light); }

.new-biz-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #fafafa; gap: 8px; }
.new-biz-row:last-child { border-bottom: none; }
.new-biz-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.new-biz-icon { font-size: 1.3em; }
.new-biz-desc { font-size: 0.7em; color: var(--text-light); margin: 2px 0 0; }
.new-biz-stats { font-size: 0.7em; color: var(--text-muted); text-align: right; line-height: 1.4; }
.tier-title { font-weight: 700; font-size: 0.85em; margin-bottom: 8px; color: var(--text); }

/* === RATING === */
.rating-hero {
    text-align: center;
    padding: 24px 16px 20px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    border-radius: var(--radius);
    margin-bottom: 16px;
    color: #fff;
}

.rating-hero-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%); animation: heroGlow 3s ease infinite; }
.rating-hero-title { font-size: 1.3em; font-weight: 800; margin-bottom: 2px; position: relative; z-index: 1; }
.rating-hero-sub { font-size: 0.75em; color: var(--text-muted); margin-bottom: 10px; position: relative; z-index: 1; }
.rating-hero-rank { display: inline-block; background: rgba(255, 255, 255, 0.1); padding: 6px 18px; border-radius: 20px; font-size: 0.85em; position: relative; z-index: 1; border: 1px solid rgba(255, 255, 255, 0.15); }
.rating-hero-rank strong { color: #ffd700; }
.rating-empty { text-align: center; padding: 40px; }
.rating-empty-icon { font-size: 4em; margin-bottom: 10px; }

.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-bottom: 20px; padding: 10px 5px 0; }
.podium-spot { text-align: center; width: 105px; animation: podiumRise 0.6s both; }
.podium-spot.gold { animation-delay: 0.3s; }
.podium-spot.silver { animation-delay: 0.1s; }
.podium-spot.bronze { animation-delay: 0.5s; }
.podium-crown { font-size: 1.8em; animation: crownFloat 2s ease infinite; margin-bottom: -6px; }
.podium-medal { font-size: 2em; margin: 2px 0; }
.podium-name { font-weight: 700; font-size: 0.78em; word-break: break-word; line-height: 1.2; }
.podium-stats { display: flex; justify-content: center; gap: 8px; margin: 6px 0; font-size: 0.7em; }
.podium-stat-val { display: block; font-weight: 700; color: #fff; }
.podium-stat-lbl { display: block; font-size: 0.75em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.podium-ach { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-bottom: 4px; }
.podium-ach span { font-size: 0.55em; padding: 2px 6px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; color: #ccc; white-space: nowrap; }
.podium-pillar { width: 100%; border-radius: 6px 6px 0 0; transition: height 0.5s; }
.podium-gold .podium-pillar { background: linear-gradient(180deg, #ffd700, #ff8c00); box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
.podium-silver .podium-pillar { background: linear-gradient(180deg, #c0c0c0, #808080); box-shadow: 0 0 15px rgba(192, 192, 192, 0.3); }
.podium-bronze .podium-pillar { background: linear-gradient(180deg, #cd7f32, #8b4513); box-shadow: 0 0 12px rgba(205, 127, 50, 0.3); }
.podium-label { font-size: 0.6em; color: var(--text-muted); margin-top: 4px; }

.rating-list { background: #fff; border-radius: var(--radius); border: 1px solid var(--border-light); overflow: hidden; }
.rating-item { display: flex; align-items: center; padding: 14px 14px; gap: 10px; border-bottom: 1px solid #f5f5f5; font-size: 0.88em; transition: background 0.2s; }
.rating-item:last-child { border-bottom: none; }
.rating-item:hover { background: #fafafa; }
.rating-item.me { background: #fffde7 !important; border-left: 3px solid #ffd700; }
.rating-item.top1 { background: linear-gradient(90deg, #fffde7, #fff); }
.rating-item.top2 { background: linear-gradient(90deg, #fafafa, #fff); }
.rating-item.top3 { background: linear-gradient(90deg, #fdf5e6, #fff); }
.rating-pos { width: 32px; text-align: center; font-weight: 800; font-size: 1.1em; flex-shrink: 0; color: var(--text-muted); }
.rating-pos.top1 { color: #ff8c00; }
.rating-pos.top2 { color: #808080; }
.rating-pos.top3 { color: #cd7f32; }
.rating-info { flex: 1; min-width: 0; }
.rating-player-name { font-weight: 700; font-size: 0.92em; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rating-player-name.golden { color: #c9a400 !important; }
.rating-player-name.diamond { color: #5dade2 !important; }
.rating-player-name em { font-style: normal; font-size: 0.7em; color: var(--text-muted); margin-left: 3px; }
.rating-player-ach { font-size: 0.68em; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rating-numbers { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.rating-num { text-align: center; min-width: 50px; }
.rating-num-val { font-weight: 700; font-size: 0.9em; white-space: nowrap; }
.rating-num-lbl { font-size: 0.6em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.rating-num.rating-val .rating-num-val { color: var(--gold); }

/* Компактная кнопка «поделиться» в своей строке рейтинга (share.js) */
.rating-share-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #1b1e2e, #0e1019);
    border: 1px solid rgba(255, 205, 79, 0.45);
    color: #ffcd4f;
    font-size: 0.95em;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.rating-share-btn:hover { transform: scale(1.08); box-shadow: 0 2px 10px rgba(255, 205, 79, 0.35); }
.rating-share-btn:active { transform: scale(0.96); }

/* Табы рейтинга */
.rating-tab-btn {
    flex: 1;
    padding: 10px 8px;
    background: #f5f5f5;
    color: #666;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: ratingTabIn 0.3s ease both;
}

.rating-tab-btn:nth-child(1) { animation-delay: 0s; }
.rating-tab-btn:nth-child(2) { animation-delay: 0.05s; }
.rating-tab-btn:nth-child(3) { animation-delay: 0.1s; }
.rating-tab-btn:hover { background: #e8e8ff; transform: scale(1.03); }
.rating-tab-btn.rating-tab-active { background: linear-gradient(135deg, #667eea, #764ba2) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); animation: ratingTabIn 0.3s ease both, ratingTabPulse 3s ease infinite; }
.rating-tab-btn.rating-tab-active:hover { background: linear-gradient(135deg, #667eea, #764ba2) !important; transform: scale(1.03); box-shadow: 0 6px 18px rgba(102, 126, 234, 0.5); }

.rating-refresh-btn { width: 42px; height: 42px; padding: 0; background: #f5f5f5; color: #667eea; border: none; border-radius: 12px; cursor: pointer; font-size: 1.1em; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }
.rating-refresh-btn:hover { background: #667eea; color: #fff; transform: rotate(180deg); }
.rating-refresh-btn:active { transform: rotate(180deg) scale(0.9); }

/* === ELITE & SHOP === */
.elite-section { margin-bottom: 20px; }
.elite-section-title { font-weight: 700; font-size: 0.9em; margin-bottom: 10px; color: var(--text); }
.elite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.elite-card { background: #fff; border: 2px solid var(--border-light); border-radius: var(--radius); padding: 14px 12px; text-align: center; transition: all 0.2s; }
.elite-available { border-color: var(--tone-green-fg); background: #fafffa; cursor: pointer; }
.elite-available:hover { border-color: #1e8449; background: #f0fff0; transform: translateY(-3px); }
.elite-owned { border-color: #ffd700; background: linear-gradient(135deg, #fffde7, #fff8e1); }
.elite-locked { opacity: 0.5; background: #fafafa; }
.elite-card-icon { font-size: 2em; margin-bottom: 6px; }
.elite-card-name { font-weight: 700; font-size: 0.85em; margin-bottom: 4px; line-height: 1.2; }
.elite-card-desc { font-size: 0.7em; color: var(--text-light); margin-bottom: 8px; line-height: 1.3; }
.elite-card-status { font-size: 0.68em; padding: 4px 10px; border-radius: 10px; display: inline-block; font-weight: 600; }
.elite-status-owned { background: #fff8e1; color: var(--tone-gold-fg); }
.elite-status-buy { background: #fff3e0; color: var(--tone-warn-fg); }
.elite-status-nomoney { background: #fef2f2; color: var(--tone-red-fg); }
.elite-status-locked { background: #f0f0f0; color: var(--text-muted); }

.achievements-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ach-card { background: #fff; border: 2px solid var(--border-light); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; transition: all 0.2s; }
.ach-card.earned { border-color: #ffd700; background: linear-gradient(135deg, #fffde7, #fff8e1); }
.ach-icon { font-size: 1.8em; margin-bottom: 4px; }
.ach-name { font-weight: 700; font-size: 0.8em; margin-bottom: 2px; }
.ach-desc { font-size: 0.65em; color: var(--text-light); margin-bottom: 6px; }
.ach-bonus { font-size: 0.65em; font-weight: 700; color: var(--gold); }

.shop-section { margin-bottom: 18px; }
.shop-section-title { font-weight: 700; font-size: 0.85em; margin-bottom: 8px; color: var(--text); }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shop-item { background: #fff; border: 2px solid var(--border-light); border-radius: var(--radius); padding: 14px 12px; text-align: center; transition: all 0.2s; }
.shop-item.available { border-color: var(--tone-purple-fg); background: #faf5ff; cursor: pointer; }
.shop-item.available:hover { border-color: #6c3483; background: #f3e8ff; transform: translateY(-2px); }
.shop-item.owned { border-color: #a5d6a7; background: linear-gradient(135deg, #f0fff0, #e8f5e9); }
.shop-item-icon { font-size: 2em; margin-bottom: 4px; }
.shop-item-name { font-weight: 700; font-size: 0.85em; margin-bottom: 4px; }
.shop-item-desc { font-size: 0.7em; color: var(--text-light); margin-bottom: 6px; line-height: 1.3; }
.shop-item-cost { font-size: 0.75em; font-weight: 700; color: var(--tone-purple-fg); }
.shop-item-status { font-size: 0.7em; color: var(--tone-green-fg); font-weight: 600; }

/* === ASSETS === */
.assets-unified-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.asset-card { background: #fff; border: 2px solid var(--border-light); border-radius: var(--radius); padding: 14px 12px; text-align: center; transition: all 0.2s; }
.asset-card.asset-owned { border-color: #a5d6a7; background: linear-gradient(135deg, #f0fff0, #e8f5e9); }
.asset-card.asset-can-buy { border-color: var(--tone-green-fg); background: #fafffa; cursor: pointer; }
.asset-card.asset-can-buy:hover { border-color: #1e8449; background: #f0fff0; transform: translateY(-3px); }
.asset-card.asset-locked { opacity: 0.6; background: #fafafa; }
.asset-card-icon { font-size: 2.2em; margin-bottom: 6px; }
.asset-card-name { font-weight: 700; font-size: 0.9em; margin-bottom: 4px; line-height: 1.2; }
.asset-card-effect { font-size: 0.75em; color: var(--text-light); margin-bottom: 8px; line-height: 1.4; }
.asset-card-status { font-size: 0.7em; padding: 4px 10px; border-radius: 10px; display: inline-block; font-weight: 600; }
.owned-status { background: #e8f5e9; color: var(--tone-green-fg); }
.buy-status { background: #fff3e0; color: var(--tone-warn-fg); }
.no-money-status { background: #fef2f2; color: var(--tone-red-fg); }
.locked-status { background: #f0f0f0; color: var(--text-muted); }

/* === LOANS === */
.loan-slider { margin: 10px 0; }
.loan-slider label { display: flex; justify-content: space-between; font-size: 0.85em; }
.loan-slider input { width: 100%; margin-top: 4px; }
.loan-summary { font-size: 0.8em; color: var(--text-light); margin: 8px 0; padding: 8px; background: var(--bg); border-radius: 4px; }
.banker-dialog { background: var(--bg); border-radius: var(--radius-sm); padding: 10px; margin: 8px 0; font-size: 0.85em; }
.banker-dialog .banker-name { font-weight: 700; color: var(--accent); }
.dialog-choice { display: block; width: 100%; padding: 8px; margin: 4px 0; background: #fff; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; text-align: left; font-family: inherit; font-size: 0.85em; transition: var(--transition); }
.dialog-choice:hover { border-color: var(--accent); background: #fafafa; }

/* === MINIGAMES === */
.wheel-result { text-align: center; padding: 20px; }
.wheel-result .prize-icon { font-size: 50px; margin-bottom: 10px; }
.minigame-card { background: #fff; border: 2px solid var(--border-light); border-radius: var(--radius); padding: 16px 10px; text-align: center; cursor: pointer; transition: all 0.25s; }
.minigame-card:hover { border-color: var(--accent); background: #fafafa; transform: translateY(-4px); }
.minigame-card:active { transform: scale(0.95); }
.minigame-icon { font-size: 2em; margin-bottom: 6px; transition: transform 0.2s; }
.minigame-card:hover .minigame-icon { transform: scale(1.2) rotate(-10deg); }
.minigame-name { font-weight: 700; font-size: 0.85em; margin-bottom: 2px; }
.minigame-desc { font-size: 0.65em; color: var(--text-light); }

.minigame-container { text-align: center; padding: 10px 0; }
.minigame-title { font-size: 1.3em; font-weight: 700; margin-bottom: 8px; }
.minigame-subtitle { font-size: 0.85em; color: var(--text-light); margin-bottom: 16px; }
.minigame-icon-large { font-size: 4em; margin: 10px 0; transition: transform 0.3s; display: inline-block; }
.minigame-icon-large.shake { animation: shake 0.5s ease; }
.minigame-icon-large.bounce { animation: iconBounce 0.6s ease; }
.minigame-icon-large.flip { animation: flipIcon 0.8s ease; }
.minigame-result { font-size: 1.1em; font-weight: 700; margin: 12px 0; padding: 12px; border-radius: var(--radius-sm); }
.minigame-result.win { background: #e8f5e9; color: var(--success); }
.minigame-result.lose { background: #fef2f2; color: var(--danger); }
.minigame-cards { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.minigame-card-btn { width: 80px; height: 100px; border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 2.5em; transition: all 0.3s; background: #fff; }
.minigame-card-btn:hover { border-color: var(--accent); transform: translateY(-4px); }
.minigame-card-btn.selected { border-color: var(--accent); background: #f0f0ff; }
.minigame-card-btn.winner { border-color: var(--success); background: #e8f5e9; animation: pulse 0.6s ease 3; }
.minigame-card-btn.loser { border-color: #ccc; opacity: 0.5; }
.minigame-card-btn .card-label { font-size: 0.35em; font-weight: 600; margin-top: 4px; }
.minigame-choices { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.minigame-choice-btn { padding: 16px 24px; border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 1.5em; background: #fff; transition: all 0.3s; }
.minigame-choice-btn:hover { border-color: var(--accent); transform: scale(1.05); }
.minigame-choice-btn.selected { border-color: var(--accent); background: #f0f0ff; }
.minigame-choice-btn.winner { border-color: var(--success); background: #e8f5e9; animation: pulse 0.6s ease 3; }
.minigame-choice-btn.loser { border-color: #ccc; opacity: 0.5; }
.minigame-choice-btn.wrong { border-color: var(--danger); background: #fef2f2; animation: shake 0.5s ease; }

/* ==========================================================================
   POKER — переработанный стол, карты, чипы, действия
   ========================================================================== */
.poker {
    --felt-1: #0f5132;
    --felt-2: #08301e;
    --poker-gold: #ffd77a;
    background: linear-gradient(160deg, #14352a 0%, #0b2019 55%, #071611 100%);
    border-radius: var(--radius-lg);
    padding: 14px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-variant-numeric: tabular-nums;
}
.poker__head { text-align: center; margin-bottom: 10px; }
.poker__title { font-size: 1.25em; font-weight: 800; letter-spacing: 0.5px; color: var(--poker-gold); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.poker__sub { font-size: 0.6em; color: rgba(255, 255, 255, 0.55); margin-top: 3px; }

/* --- места за столом --- */
.poker__seats { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.poker-seat {
    position: relative;
    min-width: 88px;
    padding: 7px 8px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.poker-seat.is-turn { border-color: var(--poker-gold); box-shadow: 0 0 0 1px var(--poker-gold), 0 6px 18px rgba(255, 215, 122, 0.25); transform: translateY(-3px); }
.poker-seat.is-folded { opacity: 0.42; filter: grayscale(0.6); }
.poker-seat.is-winner { border-color: #6ee7a0; box-shadow: 0 0 0 1px #6ee7a0, 0 6px 22px rgba(110, 231, 160, 0.35); animation: pokerWinPulse 1.1s ease infinite; }
.poker-seat--you { background: rgba(255, 215, 122, 0.08); }
.poker-seat__top { position: relative; }
.poker-seat__avatar { font-size: 1.35em; line-height: 1; }
.poker-seat__pos { position: absolute; top: -4px; right: -4px; font-size: 0.45em; font-weight: 800; padding: 2px 5px; border-radius: 999px; letter-spacing: 0.5px; }
.poker-seat__pos--btn { background: #fff; color: #111; }
.poker-seat__pos--sb { background: #4f7cff; color: #fff; }
.poker-seat__pos--bb { background: #e0533a; color: #fff; }
.poker-seat__name { font-size: 0.58em; font-weight: 700; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poker-seat__chips { font-size: 0.55em; color: var(--poker-gold); font-weight: 700; }
.poker-seat__cards { display: flex; gap: 2px; justify-content: center; margin-top: 4px; }
.poker-seat__status { margin-top: 3px; font-size: 0.5em; font-weight: 700; color: rgba(255,255,255,0.65); }
.poker-seat__status.is-allin { color: #ffb020; }
.poker-seat__status.is-turn { color: var(--poker-gold); animation: pulse 1.2s ease infinite; }
.poker-chip {
    display: inline-flex; align-items: center; gap: 3px;
    margin-top: 4px; padding: 2px 7px 2px 5px;
    background: rgba(0, 0, 0, 0.4); border-radius: 999px;
    font-size: 0.5em; font-weight: 800; color: #ffe9b3;
}
.poker-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff5d0, #e0a02c); box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }

/* --- сукно --- */
.poker-felt {
    margin: 6px 0 10px;
    padding: 12px 10px 14px;
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.10), transparent 60%),
        linear-gradient(180deg, var(--felt-1), var(--felt-2));
    border: 2px solid rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.08);
    text-align: center;
}
.poker-pot { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(0,0,0,0.42); border: 1px solid rgba(255, 215, 122, 0.25); }
.poker-pot__label { font-size: 0.6em; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.6px; }
.poker-pot__value { font-size: 1em; font-weight: 800; color: var(--poker-gold); }
.poker-board { display: flex; gap: 6px; justify-content: center; min-height: 78px; align-items: center; }
.poker-board__wait { font-size: 0.62em; color: rgba(255,255,255,0.4); animation: pulse 2s ease infinite; }
.poker-handhint { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 215, 122, 0.14); border: 1px solid rgba(255, 215, 122, 0.35); }
.poker-handhint__icon { font-size: 0.8em; }
.poker-handhint__name { font-size: 0.62em; font-weight: 700; color: var(--poker-gold); }

/* --- карты --- */
.poker-card {
    position: relative;
    width: 52px; height: 72px;
    border-radius: 7px;
    background: linear-gradient(160deg, #ffffff 0%, #eef1f5 100%);
    border: 1px solid rgba(0,0,0,0.14);
    box-shadow: 0 4px 10px rgba(0,0,0,0.45), inset 0 -6px 12px rgba(0,0,0,0.05);
    color: #16202b;
    animation: pokerDeal 0.38s var(--ease-bounce) both;
    user-select: none;
}
/* Карта уже была видна в этой раздаче — не проигрываем анимацию заново (нет «моргания»). */
.poker-card--static { animation: none; }
.poker-card--sm { width: 36px; height: 50px; border-radius: 5px; }
.poker-card--red { color: #cf2b2b; }
.poker-card__corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.poker-card__corner b { font-size: 0.72em; font-weight: 800; }
.poker-card__corner i { font-size: 0.6em; font-style: normal; }
.poker-card__corner--tl { top: 3px; left: 4px; }
.poker-card__corner--br { bottom: 3px; right: 4px; transform: rotate(180deg); }
.poker-card--sm .poker-card__corner b { font-size: 0.62em; }
.poker-card--sm .poker-card__corner i { font-size: 0.5em; }
.poker-card__pip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5em; opacity: 0.9; }
.poker-card--sm .poker-card__pip { font-size: 1.05em; }
.poker-card--back {
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.09) 0 4px, transparent 4px 8px),
        linear-gradient(150deg, #3b5bdb 0%, #5f3d94 100%);
    border: 1px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
}
.poker-card__emblem { font-size: 1.05em; color: rgba(255,255,255,0.7); }
.poker-card--sm .poker-card__emblem { font-size: 0.85em; }

/* --- игрок / лог / действия --- */
.poker__you { display: flex; justify-content: center; margin-bottom: 8px; }
.poker__you .poker-seat { min-width: 132px; background: rgba(255,215,122,0.1); }
.poker-log { max-height: 62px; overflow-y: auto; background: rgba(0,0,0,0.35); border-radius: 10px; padding: 5px 9px; margin-bottom: 10px; }
.poker-log__line { font-size: 0.55em; color: rgba(255,255,255,0.72); padding: 1px 0; }
.poker-actions__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.poker-actions__note { text-align: center; font-size: 0.65em; color: rgba(255,255,255,0.6); padding: 12px 6px; animation: pulse 1.6s ease infinite; }
.poker-actions__note.is-allin { color: #ffb020; font-weight: 700; }
.pbtn {
    border: 1px solid transparent; border-radius: 12px; padding: 11px 6px;
    font-size: 0.68em; font-weight: 800; cursor: pointer; font-family: inherit;
    transition: transform 0.15s var(--ease), filter 0.15s var(--ease), box-shadow 0.2s var(--ease);
    color: #fff;
}
.pbtn:active { transform: scale(0.96); }
.pbtn:hover { filter: brightness(1.12); }
.pbtn__amt { display: block; font-size: 0.82em; opacity: 0.85; }
.pbtn--fold { background: linear-gradient(160deg, #8e2c2c, #5c1a1a); box-shadow: 0 3px 10px rgba(142,44,44,0.4); }
.pbtn--check { background: linear-gradient(160deg, #2f6f4f, #1d4530); box-shadow: 0 3px 10px rgba(47,111,79,0.4); }
.pbtn--call { background: linear-gradient(160deg, #1f7a4d, #125330); box-shadow: 0 3px 10px rgba(31,122,77,0.45); }
.pbtn--raise { background: linear-gradient(160deg, #d99a1b, #9a6a0d); color: #1c1403; box-shadow: 0 3px 10px rgba(217,154,27,0.45); }
.pbtn--allin { background: linear-gradient(160deg, #c1121f, #7d0a13); box-shadow: 0 3px 10px rgba(193,18,31,0.45); }
.poker-raise { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 9px; }
.poker-raise__label { font-size: 0.55em; color: rgba(255,255,255,0.6); white-space: nowrap; }
.poker-raise__val { font-size: 0.68em; font-weight: 800; color: var(--poker-gold); min-width: 74px; text-align: right; }
.poker-raise__range { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #1f7a4d, var(--poker-gold)); outline: none; }
.poker-raise__range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--poker-gold); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.poker-raise__range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--poker-gold); cursor: pointer; }

/* --- модалка результата --- */
.poker-result { text-align: center; padding: 22px; border-radius: 16px; color: #fff; }
.poker-result--win { background: linear-gradient(150deg, #12522c, #0a2c17); }
.poker-result--lose { background: linear-gradient(150deg, #4a1a1a, #250d0d); }
.poker-result__emoji { font-size: 3.6em; animation: rewardBounce 0.8s var(--ease-bounce); }
.poker-result__title { margin: 10px 0; }
.poker-result__note { font-size: 0.7em; color: rgba(255,255,255,0.75); margin-bottom: 8px; }
.poker-result__row { display: flex; align-items: center; gap: 10px; margin: 8px 0; text-align: left; }
.poker-result__who { font-size: 0.62em; color: rgba(255,255,255,0.7); min-width: 70px; }
.poker-result-hand { flex: 1; background: rgba(0,0,0,0.28); border-radius: 10px; padding: 8px 10px; }
.poker-result-hand__icon { font-size: 0.9em; }
.poker-result-hand__name { font-size: 0.85em; font-weight: 800; color: var(--poker-gold); }
.poker-result-hand__desc { font-size: 0.55em; color: rgba(255,255,255,0.6); }
.poker-result__amount { font-size: 1.6em; font-weight: 800; margin: 12px 0; }
.poker-result__amount.is-win { color: #52d27a; }
.poker-result__amount.is-lose { color: #ff6b6b; }
.poker-result__streak { font-size: 0.7em; color: var(--poker-gold); margin-bottom: 8px; animation: streakGlow 1.6s ease infinite; }
.poker-result__actions { display: flex; gap: 8px; justify-content: center; }

@keyframes pokerDeal { from { opacity: 0; transform: translateY(-14px) rotate(-6deg) scale(0.85); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes pokerWinPulse { 0%, 100% { box-shadow: 0 0 0 1px #6ee7a0, 0 6px 22px rgba(110,231,160,0.3); } 50% { box-shadow: 0 0 0 2px #6ee7a0, 0 8px 28px rgba(110,231,160,0.55); } }

/* --- экран входа (бай-ин) --- */
.poker-intro { text-align: center; }
.poker-intro__hero { display: flex; justify-content: center; gap: 6px; font-size: 2.6em; line-height: 1; margin-bottom: 6px; }
.poker-intro__suit { animation: pokerSuitFloat 2.6s ease-in-out infinite; }
.poker-intro__suit--h, .poker-intro__suit--d { color: #cf2b2b; }
.poker-intro__suit--s, .poker-intro__suit--c { color: #1a1a1a; }
.poker-intro__suit:nth-child(2) { animation-delay: 0.2s; }
.poker-intro__suit:nth-child(3) { animation-delay: 0.4s; }
.poker-intro__suit:nth-child(4) { animation-delay: 0.6s; }
.poker-intro__title { margin-bottom: 6px; }
.poker-intro__desc { font-size: 0.85em; color: var(--text-muted); margin-bottom: 12px; }
.poker-intro__rules { display: flex; flex-direction: column; gap: 4px; background: var(--bg); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.poker-intro__rule { font-size: 0.78em; color: var(--text-secondary); }
.poker-intro__rule b { color: var(--text); margin-right: 4px; }
.poker-intro__bots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.poker-intro__bot { font-size: 0.68em; background: linear-gradient(150deg, #14352a, #0b2019); color: #fff; border-radius: 999px; padding: 4px 12px; }
.poker-intro__buyin { background: var(--bg); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.poker-intro__buyin-label { font-size: 0.75em; color: var(--text-muted); }
.poker-intro__chips { font-size: 1.3em; font-weight: 800; color: var(--warning); margin: 4px 0 10px; }
.poker-intro__options { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.poker-intro__btn {
    flex: 1; min-width: 96px; padding: 11px 8px; cursor: pointer; font-family: inherit;
    font-size: 0.75em; font-weight: 800; color: #fff; border: none; border-radius: 12px;
    background: linear-gradient(160deg, #1f7a4d, #125330);
    box-shadow: 0 3px 10px rgba(31,122,77,0.4);
    transition: transform 0.15s var(--ease), filter 0.15s var(--ease);
}
.poker-intro__btn:hover:not([disabled]) { filter: brightness(1.12); transform: translateY(-2px); }
.poker-intro__btn:active:not([disabled]) { transform: scale(0.97); }
.poker-intro__btn[disabled] { opacity: 0.4; cursor: not-allowed; background: #9aa0a6; box-shadow: none; }

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

/* === SUPPORT === */
.support-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; border-radius: 20px; padding: 8px 16px; font-size: 0.75em; font-weight: 600; cursor: pointer; transition: all 0.3s; font-family: inherit; }
.support-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }
.support-ticket { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; transition: all 0.3s; }
.support-ticket-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.support-ticket-id { font-weight: 700; font-size: 0.85em; color: var(--accent); }
.support-ticket-date { font-size: 0.7em; color: var(--text-muted); }
.support-ticket-status { font-size: 0.68em; padding: 4px 10px; border-radius: 12px; font-weight: 600; white-space: nowrap; }
.status-open { background: #fff3e0; color: var(--tone-warn-fg); }
.status-answered { background: #e8f5e9; color: var(--tone-green-fg); }
.status-rejected { background: #fef2f2; color: var(--tone-red-fg); }
.status-bug { background: #f3e5f5; color: var(--tone-purple-fg); }
.support-ticket-text { font-size: 0.85em; color: var(--text); line-height: 1.5; margin-bottom: 8px; word-break: break-word; }
.support-ticket-reply { background: var(--bg); border-left: 3px solid #667eea; padding: 10px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.8em; color: var(--text-light); line-height: 1.5; margin-top: 8px; }
.support-form { margin-bottom: 16px; }
.support-form textarea { width: 100%; min-height: 100px; border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-family: inherit; font-size: 0.9em; resize: vertical; transition: var(--transition); background: var(--bg); }
.support-form textarea:focus { outline: none; border-color: #667eea; background: #fff; }
.support-form .form-label { font-weight: 600; font-size: 0.85em; margin-bottom: 6px; display: block; }
.support-form .form-hint { font-size: 0.7em; color: var(--text-muted); margin-top: 4px; }
.support-form select { width: 100%; padding: 10px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.9em; background: var(--bg); margin-bottom: 8px; transition: var(--transition); }
.support-form select:focus { outline: none; border-color: #667eea; }
.bug-bounty-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #f39c12, #e67e22); color: #fff; padding: 6px 12px; border-radius: 20px; font-size: 0.75em; font-weight: 700; margin: 8px 0; animation: pulse 2s infinite; }
.support-tabs { display: flex; gap: 4px; margin-bottom: 14px; background: var(--bg); border-radius: var(--radius-sm); padding: 4px; }
.support-tab { flex: 1; padding: 8px 12px; background: none; border: none; border-radius: 6px; font-family: inherit; font-size: 0.8em; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: var(--transition); }
.support-tab.active { background: #fff; color: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }

/* === GROUPS === */
.group-hero { text-align: center; padding: 20px; background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: var(--radius); color: #fff; margin-bottom: 16px; }
.group-hero h2 { margin: 8px 0; }
.group-member { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: 4px; }

/* === TOOLTIP === */
.tooltip-container { position: relative !important; display: inline-block !important; }
.tooltip-text {
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    bottom: 125% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #1a1a1a !important;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 0.75em !important;
    font-weight: 500 !important;
    z-index: 1000 !important;
    pointer-events: none !important;
    transition: opacity 0.2s, visibility 0.2s !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
    max-width: 240px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    
}
.tooltip-text::after { content: '' !important; position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; border: 6px solid transparent !important; border-top-color: #1a1a1a !important; }
.tooltip-container:hover .tooltip-text { visibility: visible !important; opacity: 1 !important; }
.tooltip-container:focus-within .tooltip-text { visibility: visible !important; opacity: 1 !important; }

/* === ANIMATIONS === */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes helpPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(26, 26, 26, 0); } }
@keyframes podiumRise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes metricIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroGlow { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } }
@keyframes crownFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-5px); } }
@keyframes iconBounce { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.3) rotate(10deg); } 60% { transform: scale(0.9) rotate(-5deg); } }
@keyframes flipIcon { 0% { transform: perspective(400px) rotateY(0); } 50% { transform: perspective(400px) rotateY(90deg); } 100% { transform: perspective(400px) rotateY(0); } }
@keyframes glowText { 0%, 100% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.3); } 50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4); } }
@keyframes wheelBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sparkle { 0%, 100% { opacity: 0; transform: translate(-50%, 0) scale(0); } 50% { opacity: 1; transform: translate(-50%, -20px) scale(1.2); } }
@keyframes pulseBtn { 0%, 100% { box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.4); } 50% { box-shadow: 0 0 0 12px rgba(26, 26, 26, 0); } }
@keyframes questPulse { 0%, 100% { box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3); } 50% { box-shadow: 0 6px 25px rgba(39, 174, 96, 0.6), 0 0 0 2px rgba(39, 174, 96, 0.3); } }
@keyframes seasonalPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); transform: translateY(0); } 50% { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); transform: translateY(-2px); } }
@keyframes bountyPulsePurple { 0%, 100% { box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); } 50% { box-shadow: 0 4px 22px rgba(102, 126, 234, 0.7), 0 0 0 1px rgba(102, 126, 234, 0.4); } }
@keyframes bountyPulseBlue { 0%, 100% { box-shadow: 0 2px 10px rgba(79, 172, 254, 0.3); } 50% { box-shadow: 0 4px 22px rgba(79, 172, 254, 0.7), 0 0 0 1px rgba(79, 172, 254, 0.4); } }
@keyframes btnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.5); } 50% { box-shadow: 0 0 18px 5px rgba(39, 174, 96, 0.4); } }
@keyframes navDotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.7; } }
@keyframes navBtnPulse { 0%, 100% { background: transparent; } 50% { background: rgba(39, 174, 96, 0.1); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes rewardBounce { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rewardFadeUp { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes starFly { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 100% { transform: scale(1.5) rotate(180deg); opacity: 0; } }
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
@keyframes moneyPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); color: var(--tone-green-fg); } }
@keyframes badgePop { 0% { transform: scale(0); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes streakGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.3); } 50% { box-shadow: 0 0 15px 3px rgba(243, 156, 18, 0.5); } }
@keyframes chestPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes ratingTabIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ratingTabPulse { 0%, 100% { box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } 50% { box-shadow: 0 6px 18px rgba(102, 126, 234, 0.5); } }
/* === БИРЖИ: анимация иконок активной вкладки === */
@keyframes exchangeFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-4deg); } }
@keyframes purchaseBounce { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 60% { transform: scale(1.1) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes purchaseSpin { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes purchaseCoins { 0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 1; } 30% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(1.4) rotate(var(--rot)); opacity: 0; } }
@keyframes purchasePulse { 0%, 100% { transform: scale(1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } 50% { transform: scale(1.03); box-shadow: 0 25px 80px rgba(102, 126, 234, 0.8); } }

/* === УРОВНИ ТОЧЕК: бар, готовность, бегущий блик === */
@keyframes bizlvlPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.85; } }
@keyframes bizlvlShimmer { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } }
.bizlvl-ready-pulse { display: inline-block; animation: bizlvlPulse 1.4s ease-in-out infinite; }
.bizlvl-bar-fill { background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%), linear-gradient(90deg, #667eea, #764ba2); background-size: 120% 100%, 100% 100%; background-repeat: no-repeat; animation: bizlvlShimmer 2.2s linear infinite; }


/* === DYNAMIC CLASSES === */
.bounty-card-purple { animation: bountyPulsePurple 3s ease infinite !important; }
.bounty-card-blue { animation: bountyPulseBlue 3s ease infinite 1.5s !important; }
.btn-pulse { animation: btnPulse 2s ease infinite !important; position: relative; }
.btn-pulse::after { content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background: #27ae60; border-radius: 50%; animation: btnPulse 2s ease infinite; }
.streak-active { animation: streakGlow 2s ease infinite; }
.pulse-btn:hover { animation: none !important; transform: scale(1.05); }
.wheel-sparkle { position: absolute; top: 0; left: 50%; font-size: 1.5em; animation: sparkle 1s ease infinite; }

/* === SCROLLBAR === */
#game-main {
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100%;
}

#game-main > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#game-main > * > *,
#game-main > * > * > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#game-main [style*="grid-template-columns"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#game-main [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
}

#game-main [style*="display:flex"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#game-main [style*="flex-wrap:wrap"],
#game-main > div > div[style*="display:flex"]:not([id^="top-row"]) {
    flex-wrap: wrap !important;
}


/* === ДЕРЕВО ИССЛЕДОВАНИЙ (адаптивная сетка нод и «палочек») ===
   Ноды и коннекторы лежат в ОДНОЙ grid-сетке колонок (по pos.col),
   поэтому «палочка» всегда стоит ровно над своей нодой.
   Число колонок задаётся из JS через --tech-cols; колонки тянутся (1fr),
   поэтому дерево аккуратно вписывается и в ПК, и в телефонную ширину. */
.tech-tree {
    display: grid;
    grid-template-columns: repeat(var(--tech-cols, 1), minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    box-sizing: border-box;
}
.tech-tree-wrap {
    padding: 12px 8px 16px;
    width: 100%;
    box-sizing: border-box;
}
/* Ряд коннекторов над уровнем нод */
.tech-row-sticks {
    display: grid;
    grid-template-columns: repeat(var(--tech-cols, 1), minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: flex-end;
    height: 18px;
    margin-bottom: -1px;
}
.tech-stick-cell { text-align: center; }
.tech-stick {
    width: 2px;
    height: 18px;
    margin: 0 auto;
    border-radius: 1px;
}
/* Нода */
.tech-node {
    position: relative;
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    min-width: 0;
}
.tech-node-clickable { cursor: pointer; }
.tech-node-clickable:hover { transform: translateY(-2px); }
.tech-node-icon { font-size: 1.7em; line-height: 1; margin-bottom: 4px; }
.tech-node-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.72em;
    line-height: 1;
}
.tech-node-name {
    font-size: 0.66em;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
}
.tech-node-cost { font-size: 0.62em; font-weight: 700; }

@media (max-width: 767px) {
    .tech-tree,
    .tech-row-sticks { max-width: 100%; gap: 6px; }
    .tech-node { padding: 8px 4px; border-radius: 10px; }
    .tech-node-icon { font-size: 1.35em; }
    .tech-node-name { font-size: 0.6em; min-height: 2.2em; }
    .tech-node-cost { font-size: 0.56em; }
}

@media (max-width: 400px) {
    .tech-tree-wrap { padding: 10px 4px 14px; }
    .tech-tree,
    .tech-row-sticks { gap: 4px; }
    .tech-node { padding: 6px 3px; }
    .tech-node-icon { font-size: 1.15em; }
    .tech-node-name { font-size: 0.54em; }
    .tech-node-cost { font-size: 0.5em; }
}

/* === RESPONSIVE: MOBILE <= 480px === */
@media (max-width: 480px) {
    header { padding: 0 !important; }
    #empire-name-top { font-size: 0.75em !important; display: flex !important; align-items: center !important; }
    #money-display,
    #income-display,
    #rating-display { font-size: 0.9em !important; }
    #mail-badge,
    #ach-mini-badge,
    #daily-mini-badge { width: 14px !important; height: 14px !important; font-size: 8px !important; top: -3px !important; right: -3px !important; }
    .bottom-nav { padding: 4px 0 6px !important; justify-content: space-evenly !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; }
    .bottom-nav::-webkit-scrollbar { display: none !important; }
    .nav-btn { font-size: 0.5em !important; padding: 3px 4px !important; min-width: 42px !important; gap: 2px !important; flex-shrink: 0 !important; }
    .nav-btn span { font-size: 0.85em !important; line-height: 1.1 !important; }
    .game-main { padding: 8px !important; }
    .card { padding: 10px !important; margin-bottom: 8px !important; }
    .metric-row { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
    .metric-card { padding: 10px 8px !important; }
    .metric-value { font-size: 1em !important; }
    .metric-label { font-size: 0.55em !important; }
    .dual-panel { grid-template-columns: 1fr !important; gap: 8px !important; }
    .assets-unified-grid,
    .elite-grid,
    .shop-grid,
    .upgrades-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
    .achievements-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
    .tax-chips { grid-template-columns: 1fr !important; }
    .tax-debt-strip { flex-direction: column !important; gap: 6px !important; text-align: center !important; }
    .rating-item { padding: 8px 8px !important; gap: 6px !important; font-size: 0.8em !important; }
    .rating-pos { width: 26px !important; font-size: 0.95em !important; }
    .rating-info { min-width: 0 !important; }
    .rating-player-name { font-size: 0.82em !important; }
    .rating-player-ach { font-size: 0.6em !important; }
    .rating-numbers { gap: 6px !important; }
    .rating-num { min-width: 34px !important; }
    .rating-num-val { font-size: 0.72em !important; }
    .rating-num-lbl { font-size: 0.5em !important; }
    .rating-share-btn { width: 28px !important; height: 28px !important; font-size: 0.85em !important; }
    .podium { gap: 6px !important; }
    .podium-spot { width: 80px !important; }
    .podium-name { font-size: 0.62em !important; }
    .podium-medal { font-size: 1.6em !important; }
    .podium-stat-val { font-size: 0.62em !important; }
    .podium-stat-lbl { font-size: 0.48em !important; }
    .minigame-card { padding: 12px 8px !important; }
    .minigame-icon { font-size: 1.5em !important; }
    .minigame-card-btn { width: 55px !important; height: 70px !important; font-size: 1.8em !important; }
    .minigame-choice-btn { padding: 10px 14px !important; font-size: 1.2em !important; }
    .modal-box { padding: 16px !important; max-width: 95vw !important; max-height: 88vh !important; -webkit-overflow-scrolling: touch !important; }
    .modal-box .btn-sm { padding: 10px 14px !important; font-size: 0.85em !important; }
    .news-ticker { padding: 5px 10px !important; font-size: 0.65em !important; }
    .group-grid { grid-template-columns: 1fr !important; }
    .group-metrics { grid-template-columns: 1fr 1fr !important; }
    .group-actions { grid-template-columns: 1fr 1fr !important; }
    #group-chat-inline { max-height: 150px !important; }
    .support-form textarea { min-height: 80px !important; }
    /* Доступные бизнесы — компактнее */
    .new-biz-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 0 !important;
    }
    .new-biz-info {
        width: 100% !important;
    }
    .new-biz-stats {
        text-align: left !important;
        display: flex !important;
        gap: 10px !important;
        font-size: 0.72em !important;
    }
    .new-biz-row .btn,
    .new-biz-row .tooltip-container {
        width: 100% !important;
    }
    .new-biz-row .btn {
        padding: 10px !important;
        font-size: 0.8em !important;
    }

    /* ==================== КАРТОЧКА УЛУЧШЕНИЯ ==================== */
    .upgrades-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .upgrade-item {
        padding: 12px 10px !important;
        gap: 10px !important;
    }
    
    .upgrade-icon {
        font-size: 1.8em !important;
        min-width: 30px !important;
        width: 30px !important;
    }
    
    .upgrade-info {
        min-width: 0 !important;
    }
    
    .upgrade-name {
        font-size: 0.9em !important;
        line-height: 1.25 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .upgrade-desc {
        font-size: 0.72em !important;
        line-height: 1.4 !important;
        color: #777 !important;
        margin-bottom: 6px !important;
    }
    
    .upgrade-cost {
        font-size: 0.78em !important;
    }

    /* ==================== КАРТОЧКА БИЗНЕСА (ШАПКА) ==================== */
    .biz-header {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    
    .biz-title {
        font-size: 0.95em !important;
    }
    
    .biz-income {
        font-size: 0.85em !important;
    }
    
    .biz-tab {
        padding: 8px 6px !important;
        font-size: 0.75em !important;
    }
    
    .biz-content {
        padding: 10px !important;
    }
    /* ===== ДОСТУПНЫЕ БИЗНЕСЫ НА МОБИЛЬНЫХ ===== */
.new-biz-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 0 !important;
}

.new-biz-info {
    width: 100% !important;
    gap: 12px !important;
}

.new-biz-icon {
    font-size: 1.8em !important;
}

.new-biz-name {
    font-size: 0.95em !important;
    white-space: normal !important;
}

.new-biz-desc {
    font-size: 0.75em !important;
    line-height: 1.4 !important;
}

.new-biz-stats {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
    font-size: 0.78em !important;
    padding: 6px 10px !important;
    background: #fafafa !important;
    border-radius: 8px !important;
    gap: 12px !important;
}

.new-biz-cost,
.new-biz-income {
    white-space: nowrap !important;
}

.new-biz-btn-wrapper,
.new-biz-btn {
    width: 100% !important;
}

.new-biz-btn {
    padding: 12px !important;
    font-size: 0.85em !important;
    min-width: 0 !important;
}

/* Тултип на мобильных — по центру кнопки */
.new-biz-btn-wrapper .tooltip-text {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 260px !important;
}

.new-biz-btn-wrapper .tooltip-text::after {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}
    /* Poker — компактнее на мобильных */
    .poker { padding: 10px !important; }
    .poker-card { width: 42px !important; height: 60px !important; }
    .poker-card--sm { width: 30px !important; height: 42px !important; }
    .poker-card__pip { font-size: 1.2em !important; }
    .poker-seat { min-width: 72px !important; padding: 6px 6px 7px !important; }
    .poker-seat__name { font-size: 0.52em !important; }
    .poker__you .poker-seat { min-width: 112px !important; }
    .poker-board { min-height: 64px !important; gap: 4px !important; }
    .poker-board .poker-card { width: 38px !important; height: 54px !important; }
    .poker-actions__row { gap: 4px !important; }
    .pbtn { padding: 9px 4px !important; font-size: 0.6em !important; }
    .poker__title { font-size: 1.05em !important; }
}

/* === RESPONSIVE: SMALL MOBILE <= 380px === */
@media (max-width: 380px) {
    .nav-btn { padding: 3px 1px; }
    .nav-icon { font-size: 1.15em; }
    .nav-label { font-size: 0.75em; }
}

/* === RESPONSIVE: TINY <= 360px === */
@media (max-width: 360px) {
    #money-display,
    #income-display,
    #rating-display { font-size: 0.82em !important; }
    #empire-name-top { font-size: 0.6em !important; max-width: 80px !important; overflow: hidden !important; }
    #empire-name-top-text { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
    .nav-btn { font-size: 0.45em !important; min-width: 36px !important; padding: 3px 3px !important; }
    .game-main { padding: 6px !important; }
    .nav-icon { font-size: 1.1em; }
    .nav-label { font-size: 0.7em; }
    .modal-box [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* === FORBID SELECTION & CONTEXT MENU === */
input, textarea, select, button, .btn, .nav-btn, .biz-tab, .support-tab,
.minigame-card, .minigame-card-btn, .minigame-choice-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

input[type="text"], input[type="number"], input[type="password"], textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* === FLOATING MONEY === */
.floating-money {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    font-weight: 800;
    pointer-events: none;
    z-index: 9997;
    animation: floatingMoney 2s ease-out forwards;
}

@keyframes floatingMoney {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.5); }
    20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.2); }
    40% { transform: translateX(-50%) translateY(-10px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-100px) scale(0.8); }
}
/* ==================== HEADER ==================== */
.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    z-index: 10;
    min-height: 60px;
}

/* === ЛЕВАЯ ЧАСТЬ: имя + дата/таймер === */
.header-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-empire {
    font-size: 0.85em;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}

.header-dot {
    color: var(--border);
}

.header-timer {
    color: var(--warning-dark);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.header-skip {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 1px 7px;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.header-skip:hover {
    transform: scale(1.1);
}

/* === ЦЕНТР: метрики === */
.header-stats {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-shrink: 0;
}

.header-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 0 16px;
    border-right: 1px solid var(--border-light);
    min-width: 90px;
}

.header-stat:last-child {
    border-right: none;
}

.header-stat-label {
    font-size: 0.55em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 3px;
}

.header-stat-value {
    font-size: 0.95em;
    font-weight: 800;
    color: var(--text);
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.header-stat-sub {
    font-size: 0.55em;
    color: var(--text-muted);
    line-height: 1;
    margin-top: 2px;
}

.header-income {
    color: var(--success);
}

.header-rating {
    color: var(--warning);
}

/* === ПРАВАЯ ЧАСТЬ: иконки === */
.header-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.header-icon {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    padding: 0;
}

.header-icon:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
}

.header-icon:active {
    transform: scale(0.95);
}

.header-icon-help {
    font-weight: 700;
}

/* Бейджи на иконках */
.header-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    background: #c0392b;
    color: #fff;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fff;
    line-height: 1;
    box-sizing: border-box;
}

.header-badge-gold {
    background: #f39c12;
}

.header-badge-blue {
    background: #3498db;
}

.header-badge-orange {
    background: #e67e22;
}

/* Показ бейджа через JS — ставим display: flex */
.header-badge.visible {
    display: flex;
}

/* Числовые бейджи в топбаре (#mail-badge и др.) ставятся как .visible из ui.js,
   но раньше не имели правила display — из-за этого не показывались. */
#mail-badge.visible,
#ach-mini-badge.visible,
#daily-mini-badge.visible {
    display: flex !important;
}

/* Красная точка «есть непринятые награды» на иконке заданий в топбаре
   (переиспользует .quest-badge-red, но показывается через .visible). */
#tasks-mini-dot.visible {
    display: block !important;
}

/* ================================================================
   АДАПТАЦИЯ ТОПБАРА
   ================================================================ */

/* === БОЛЬШИЕ ЭКРАНЫ (>= 1200px) === */
@media (min-width: 1200px) {
    .game-header {
        max-width: 100% !important;
        padding: 14px 40px !important;
    }
    
    .game-main {
        max-width: 100% !important;
        padding: 28px 40px !important;
    }
    
    .bottom-nav {
        padding: 6px 40px 10px !important;
    }
    
    .header-stat-value {
        font-size: 1.2em;
    }
}

/* === МОБИЛЬНЫЕ (<= 767px) === */
@media (max-width: 767px) {
    .game-header {
        flex-wrap: wrap;
        padding: 8px 10px;
        gap: 8px;
        min-height: auto;
    }

    /* Левая часть — на всю ширину */
    .header-left {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .header-empire {
        font-size: 0.8em;
        max-width: 55%;
    }

    .header-meta {
        font-size: 0.65em;
        flex-shrink: 0;
    }

    /* Метрики — на всю ширину, растягиваются */
    .header-stats {
        flex: 1 1 100%;
        order: 3;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.04), rgba(118, 75, 162, 0.04));
        border-radius: 12px;
        padding: 8px 4px;
        justify-content: space-around;
    }

    .header-stat {
        flex: 1;
        padding: 0 4px;
        min-width: 0;
        align-items: center;
        text-align: center;
    }

    .header-stat-value {
        font-size: 0.9em;
    }

    .header-stat-label {
        font-size: 0.55em;
    }

    /* Иконки — сверху справа */
    .header-icons {
        order: 2;
        gap: 3px;
    }

    .header-icon {
        width: 28px;
        height: 28px;
        font-size: 0.85em;
        border-radius: 7px;
    }
}

/* === МАЛЕНЬКИЕ МОБИЛЬНЫЕ (<= 480px) === */
@media (max-width: 480px) {
    .game-header {
        padding: 6px 8px;
        gap: 6px;
    }

    .header-empire {
        font-size: 0.75em;
        max-width: 50%;
    }

    .header-meta {
        font-size: 0.6em;
        gap: 4px;
    }

    .header-skip {
        padding: 1px 5px;
        font-size: 0.8em;
    }

    .header-stats {
        padding: 6px 2px;
        border-radius: 10px;
    }

    .header-stat {
        padding: 0 2px;
    }

    .header-stat-label {
        font-size: 0.5em;
        letter-spacing: 0.2px;
    }

    .header-stat-value {
        font-size: 0.82em;
    }

    .header-stat-sub {
        font-size: 0.5em;
    }

    .header-icon {
        width: 26px;
        height: 26px;
        font-size: 0.8em;
    }

    .header-badge {
        min-width: 13px;
        height: 13px;
        font-size: 7px;
        top: -3px;
        right: -3px;
    }
}

/* === ОЧЕНЬ УЗКИЕ (<= 360px) === */
@media (max-width: 360px) {
    .header-empire {
        font-size: 0.7em;
        max-width: 45%;
    }

    .header-meta {
        font-size: 0.55em;
    }

    /* Скрываем 2 самых ненужных иконки */
    .header-icon:nth-child(1),
    .header-icon:nth-child(2) {
        display: none;
    }

    .header-icon {
        width: 24px;
        height: 24px;
        font-size: 0.75em;
    }

    .header-stat-value {
        font-size: 0.75em;
    }

    .header-stat-label {
        font-size: 0.45em;
    }
}

/* === МОБИЛА (по умолчанию) === */
.game-header,
.game-main,
.bottom-nav,
.news-ticker {
    width: 100%;
    max-width: 100%;
}

/* === ПК (>= 768px) === */
@media (min-width: 768px) {
    /* Топбар */
    .game-header {
        padding: 12px 32px !important;
        gap: 24px !important;
        min-height: 68px !important;
    }
    
    .header-empire {
        font-size: 0.95em !important;
    }
    
    .header-meta {
        font-size: 0.75em !important;
        gap: 8px !important;
    }
    
    .header-stat {
        padding: 0 20px !important;
        min-width: 110px !important;
    }
    
    .header-stat-label {
        font-size: 0.6em !important;
    }
    
    .header-stat-value {
        font-size: 1.1em !important;
    }
    
    .header-stat-sub {
        font-size: 0.6em !important;
    }
    
    .header-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.05em !important;
    }
    
    .header-icons {
        gap: 6px !important;
    }
    
    /* Контент — на всю ширину */
    .game-main,
    #game-main {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 24px 32px !important;
    }
    
    /* Модалки — компактные */
    .modal-box {
        max-width: 500px !important;
    }
    
    /* Нижняя навигация — на всю ширину */
    .bottom-nav {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 6px 32px 10px !important;
    }
    
    .nav-btn {
        font-size: 0.75em !important;
        padding: 6px 8px !important;
    }
    
    .nav-icon {
        font-size: 1.4em !important;
    }
}

/* === ОЧЕНЬ ШИРОКИЕ (>= 1600px) — ограничиваем комфортной шириной === */
@media (min-width: 1600px) {
    .game-main,
    #game-main {
        padding-left: calc((100vw - 1400px) / 2) !important;
        padding-right: calc((100vw - 1400px) / 2) !important;
    }
    
    .game-header {
        padding-left: calc((100vw - 1400px) / 2) !important;
        padding-right: calc((100vw - 1400px) / 2) !important;
    }
    
    .bottom-nav {
        padding-left: calc((100vw - 1400px) / 2) !important;
        padding-right: calc((100vw - 1400px) / 2) !important;
    }
}
.upgrades-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
/* ==================== ДОСТУПНЫЕ БИЗНЕСЫ ==================== */
.new-biz-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #fafafa;
}

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

.new-biz-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.new-biz-icon {
    font-size: 1.5em;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.new-biz-text {
    min-width: 0;
    flex: 1;
}

.new-biz-name {
    display: block;
    font-size: 0.9em;
    font-weight: 700;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.new-biz-desc {
    font-size: 0.72em;
    color: var(--text-light);
    margin: 0;
    line-height: 1.35;
}

.new-biz-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    font-size: 0.72em;
    text-align: right;
    white-space: nowrap;
}

.new-biz-cost {
    color: var(--text-secondary);
    font-weight: 600;
}

.new-biz-income {
    color: var(--success);
    font-weight: 700;
}

.new-biz-btn {
    flex-shrink: 0;
    min-width: 90px;
}

.new-biz-btn-wrapper {
    flex-shrink: 0;
}

/* Тултип в списке бизнесов — влево, чтобы не улетал */
.new-biz-btn-wrapper .tooltip-text {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    max-width: 200px !important;
}

.new-biz-btn-wrapper .tooltip-text::after {
    left: auto !important;
    right: 15px !important;
    transform: none !important;
}
/* Добавьте в конец css/style.css */
.biz-header-stats {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 10px;
}

.biz-header-stat {
    flex: 1;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 6px 4px;
    min-width: 0; /* Важно для сжатия */
}

.biz-header-stat-label {
    font-size: 0.6em;
    opacity: 0.8;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.biz-header-stat-value {
    font-size: 0.85em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.biz-header-stat-value.positive {
    color: #7dffa0;
}

.biz-header-stat-value.negative {
    color: #ff9a9e;
}
/* ==================== МОДАЛКА БИЗНЕСА ==================== */

/* Убираем лишние отступы в модалке бизнеса */
#modal-box .biz-modal {
    padding: 0;
}

/* Сетка улучшений внутри модалки — 1 колонка на мобильных, 2 на десктопе */
#modal-box .upgrades-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 480px) {
    #modal-box .upgrades-grid {
        grid-template-columns: 1fr;
    }
}

/* Скролл внутри модалки */
#modal-box {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Шапка модалки — убираем отступы padding родителя, чтобы градиент был во всю ширину */
#modal-box > div:first-child {
    margin-top: 0;
}

/* ==========================================================================
   ОБУЧЕНИЕ v7.1.0 — переходы и анимации
   --------------------------------------------------------------------------
   Один корневой слой `.tut-root`, внутри:
     .tut-spot    — затемнение с вырезом (плавный наплыв, пульс рамки)
     .tut-pointer — стрелка-указатель на цель (покачивается)
     .tut-card    — карточка шага (въезжает в сторону перехода)

   ИЕРАРХИЯ:
     400 — .tut-card (поверх всего обучения)
     350 — .tut-pointer
     300 — .tut-root / затемнение
    1000 — модалки игры (подтверждение покупки выше обучения)
     900 — #crime-screen
   ========================================================================== */

.tut-root {
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;          /* клики проходят к игре */
    font-family: inherit;
}
.tut-root * { box-sizing: border-box; }

/* --- Затемнение с вырезом -------------------------------------------- */
.tut-spot {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 18, 0.7);
    pointer-events: none;
    -webkit-clip-path: polygon(
        0 0, 100% 0, 100% 100%, 0 100%, 0 0,
        var(--cut-x, 0) var(--cut-y, 0),
        var(--cut-x, 0) calc(var(--cut-y, 0) + var(--cut-h, 0)),
        calc(var(--cut-x, 0) + var(--cut-w, 0)) calc(var(--cut-y, 0) + var(--cut-h, 0)),
        calc(var(--cut-x, 0) + var(--cut-w, 0)) var(--cut-y, 0),
        var(--cut-x, 0) var(--cut-y, 0)
    );
    clip-path: polygon(
        0 0, 100% 0, 100% 100%, 0 100%, 0 0,
        var(--cut-x, 0) var(--cut-y, 0),
        var(--cut-x, 0) calc(var(--cut-y, 0) + var(--cut-h, 0)),
        calc(var(--cut-x, 0) + var(--cut-w, 0)) calc(var(--cut-y, 0) + var(--cut-h, 0)),
        calc(var(--cut-x, 0) + var(--cut-w, 0)) var(--cut-y, 0),
        var(--cut-x, 0) var(--cut-y, 0)
    );
    transition: clip-path 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                -webkit-clip-path 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease;
    opacity: 1;
}
.tut-spot.tut-spot--in { animation: tutSpotIn 0.32s ease both; }
@keyframes tutSpotIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Страховка от «глухого экрана»: при нулевом вырезе заливки нет. */
.tut-spot[style*="--cut-w: 0px"],
.tut-spot[style*="--cut-h: 0px"] {
    background: transparent;
}

/* Рамка-кольцо вокруг выреза (v7.6.1).
   Раньше здесь был `::after` с box-shadow: из-за clip-path родителя «дырка»
   заливалась белым и накрывала кнопку (она выглядела перекрытой). Теперь
   рамка — отдельный элемент, отодвинутый НАРУЖУ от выреза: цель остаётся
   чистой, а белый контур + мягкий пульс ложатся на затемнение. */
.tut-ring {
    position: absolute;
    z-index: 340;
    pointer-events: none;
    left: calc(var(--cut-x, 0) - 6px);
    top: calc(var(--cut-y, 0) - 6px);
    width: calc(var(--cut-w, 0) + 12px);
    height: calc(var(--cut-h, 0) + 12px);
    border-radius: 18px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.30),
                0 0 28px 8px rgba(102, 126, 234, 0.5);
    animation: tutHalo 2s ease-in-out infinite;
    transition: left 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                top 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tutHalo {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.28),
                    0 0 22px 5px rgba(102, 126, 234, 0.45);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.16),
                    0 0 38px 12px rgba(102, 126, 234, 0.65);
    }
}

/* --- Стрелка-указатель ------------------------------------------------ */
.tut-pointer {
    position: absolute;
    z-index: 350;
    display: none;
    transform: translateX(-50%);
    pointer-events: none;
}
.tut-pointer__arrow {
    display: block;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    filter: drop-shadow(0 2px 6px rgba(102, 126, 234, 0.7));
}
.tut-pointer--above .tut-pointer__arrow {
    border-top: 15px solid #667eea;
    animation: tutArrowDown 1.15s ease-in-out infinite;
}
.tut-pointer--below .tut-pointer__arrow {
    border-bottom: 15px solid #667eea;
    animation: tutArrowUp 1.15s ease-in-out infinite;
}
@keyframes tutArrowDown {
    0%, 100% { transform: translateY(0);    opacity: 0.85; }
    50%      { transform: translateY(7px);  opacity: 1; }
}
@keyframes tutArrowUp {
    0%, 100% { transform: translateY(0);     opacity: 0.85; }
    50%      { transform: translateY(-7px);  opacity: 1; }
}


/* --- Карточка шага ---------------------------------------------------- */
/* V7.2.0: раскладка без «съезда вниз».
   Было: position absolute + max-height 78vh + overflow auto. У длинного
   текста карточка росла вниз и перекрывала меню, у короткого — висела
   прижатой к низу, потому что центрирование считалось от родителя.
   Теперь:
     • для текстовых шагов карточка центрируется через flex-обёртку;
     • max-height считается в vh от ВЬЮПОРТА, а не от родителя;
     • скролл внутри карточки, а не сдвиг самой карточки. */
.tut-card {
    position: absolute;
    z-index: 400;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 440px;
    /* Ограничение по ВЬЮПОРТУ: не выше экрана минус отступы сверху/снизу,
       чтобы карточка и меню игры были видны одновременно. */
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    padding: 0 20px 18px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 26px 64px rgba(6, 6, 18, 0.44),
                0 0 0 1px rgba(102, 126, 234, 0.14);
    text-align: center;
    color: #1c1c28;
}

/* Центр экрана: центрируем по вертикали относительно вьюпорта.
   --tut-y участвует в keyframes входа, поэтому карточка НЕ съезжает вниз
   после того, как анимация закончилась (см. комментарий у keyframes). */
.tut-card--center {
    top: 50%;
    --tut-y: -50%;
    transform: translate(-50%, -50%);
}
/* Прижатие к верхнему краю — когда подсветка снизу. */
.tut-card--top {
    top: 12px;
    bottom: auto;
    --tut-y: 0%;
}
/* Прижатие к нижнему краю — когда подсветка сверху.
   Важно: bottom считается от вьюпорта, поэтому карточка не «уходит вниз». */
.tut-card--bottom {
    top: auto;
    bottom: 12px;
    --tut-y: 0%;
}

/* Вход карточки в сторону перехода.
   V7.2.1 — ИСПРАВЛЕНИЕ «КАРТОЧКА УШЛА ВНИЗ».
   Было: `to { transform: translate(-50%, 0) ... }`. Из-за
   `animation-fill-mode: both` финальный кадр залипал НАВСЕГДА и перебивал
   `translate(-50%, -50%)` у центрированной карточки — она съезжала вниз
   ровно на половину своей высоты (верх карточки вставал по центру экрана).
   Теперь анимация двигает только X и масштаб, а вертикальное смещение
   задаётся отдельной переменной --tut-y, которая для каждого положения своя:
     --center → -50%,  --top/--bottom → 0. */
@keyframes tutCardFromRight {
    from { opacity: 0; transform: translate(-50%, var(--tut-y, 0)) translateX(28px) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, var(--tut-y, 0)) translateX(0) scale(1); }
}
@keyframes tutCardFromLeft {
    from { opacity: 0; transform: translate(-50%, var(--tut-y, 0)) translateX(-28px) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, var(--tut-y, 0)) translateX(0) scale(1); }
}
/* Центрированная карточка: вход сохраняет центровку по вертикали.
   V7.2.1: animation-name здесь НЕ задаётся — его выставляет JS
   (card.style.animation), и CSS-правило с более высокой специфичностью
   только конфликтовало с inline-стилем. */
@keyframes tutCardCenterIn {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes tutPop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* --- Прогресс-бар ----------------------------------------------------- */
/* V7.2.0: БЕЗ position: sticky. Он был причиной «всё ушло вниз»: sticky
   внутри контейнера со скроллом считается от padding-края карточки, и при
   коротком тексте полоса уезжала, толкая контент вниз. Теперь это обычный
   элемент потока — всегда сверху карточки, ничего не сдвигает. */
.tut-bar {
    height: 4px;
    margin: 0 -20px 14px;
    background: rgba(102, 126, 234, 0.12);
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}
.tut-bar > i {
    display: block;
    height: 100%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #667eea, #764ba2);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.65);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Шапка ------------------------------------------------------------ */
.tut-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    min-height: 26px;
}
.tut-count {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
.tut-back {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    font-weight: 700;
    color: #83839a;
    background: #f4f4fa;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.tut-back:hover { color: #667eea; background: #eaeaf6; transform: translateX(-1px); }
.tut-back:active { transform: scale(0.92); }

/* --- Иконка с мягким появлением -------------------------------------- */
.tut-icon {
    width: 68px;
    height: 68px;
    margin: 4px auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 31px;
    line-height: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, rgba(102, 126, 234, 0.18), rgba(118, 75, 162, 0.04));
    box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.1) inset;
    animation: tutIconIn 0.5s cubic-bezier(0.22, 1.4, 0.36, 1) 0.06s both;
}
@keyframes tutIconIn {
    from { opacity: 0; transform: scale(0.72) rotate(-8deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* --- Кнопки ----------------------------------------------------------- */
.tut-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: tutFadeUp 0.4s ease 0.22s both;
}
.tut-btn {
    position: relative;
    width: 100%;
    padding: 15px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 8px 22px rgba(102, 126, 234, 0.36);
    transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
/* Блик, пробегающий по кнопке — «живость» без навязчивости. */
.tut-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.34), transparent);
    transform: skewX(-18deg);
    animation: tutShine 3.4s ease-in-out infinite;
}
@keyframes tutShine {
    0%   { left: -60%; }
    55%  { left: 115%; }
    100% { left: 115%; }
}
.tut-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);
    filter: brightness(1.04);
}
.tut-btn:active { transform: translateY(0) scale(0.985); }

.tut-skip {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #83839a;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease;
}
.tut-skip:hover { color: #5a5a70; background: #f4f4fa; }

/* Плашка «выполните действие» вместо кнопки «Дальше» (v7.5.0).
   Шаг-действие нельзя пролистать: кнопки нет, пока игрок не сделает то,
   о чём просит обучение. Так обучение остаётся геймплеем, а не справкой. */
.tut-wait {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    font-size: 13.5px;
    font-weight: 700;
    color: #667eea;
    background: rgba(102, 126, 234, 0.09);
    border: 1.5px dashed rgba(102, 126, 234, 0.4);
    border-radius: 13px;
    animation: tutWaitPulse 1.9s ease-in-out infinite;
}
@keyframes tutWaitPulse {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}

/* --- Экран успеха ----------------------------------------------------- */
.tut-success {
    position: relative;
    width: 78px;
    height: 78px;
    margin: 6px auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tut-success__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(39, 174, 96, 0.35);
    animation: tutRingPulse 1.6s ease-out infinite;
}
@keyframes tutRingPulse {
    0%   { transform: scale(0.75); opacity: 0.9; }
    70%  { transform: scale(1.12); opacity: 0; }
    100% { transform: scale(1.12); opacity: 0; }
}
.tut-success__check {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, rgba(39, 174, 96, 0.24), rgba(39, 174, 96, 0.07));
    animation: tutCheckPop 0.52s cubic-bezier(0.22, 1.5, 0.36, 1) both;
}
@keyframes tutCheckPop {
    0%   { opacity: 0; transform: scale(0.4) rotate(-20deg); }
    65%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* --- Конфетти на финале (v7.6.0) -------------------------------------- */
.tut-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 360;
}
.tut-confetti i {
    position: absolute;
    border-radius: 2px;
    opacity: 0;
    animation-name: tutConfetti;
    animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1);
    animation-fill-mode: forwards;
}
@keyframes tutConfetti {
    0%   { transform: translate3d(0, -20px, 0) rotate(0); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate3d(var(--tut-conf-drift, 0), 110vh, 0) rotate(var(--tut-conf-rot, 540deg)); opacity: 0.55; }
}

/* ==========================================================================
   КОНТЕКСТНЫЕ ПОДСКАЗКИ (v7.6.0) — карточка снизу, не блокирует игру
   ========================================================================== */
.hint {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(92vw, 460px);
    padding: 14px 14px 14px 16px;
    background: linear-gradient(180deg, #ffffff, #f7f8ff);
    color: #1a1a2e;
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(16, 24, 40, 0.28), 0 2px 8px rgba(16, 24, 40, 0.12);
    animation: hintIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
    font-family: inherit;
    box-sizing: border-box;
}
.hint * { box-sizing: border-box; }
.hint--out { animation: hintOut 0.28s ease both; }
@keyframes hintIn {
    from { opacity: 0; transform: translate(-50%, 24px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes hintOut {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, 20px); }
}
.hint__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}
.hint__content { flex: 1 1 auto; min-width: 0; }
.hint__title { font-size: 15px; font-weight: 800; margin-bottom: 5px; }
.hint__body { font-size: 13px; line-height: 1.5; color: #45455f; }
.hint__btn {
    margin-top: 10px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 11px;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    -webkit-tap-highlight-color: transparent;
}
.hint__btn:hover { box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); }
.hint__btn:active { transform: scale(0.96); }
.hint__x {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -2px -2px 0 0;
    font-size: 13px;
    color: #8a8aa3;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.hint__x:hover { color: #5a5a70; background: #f0f0f8; }
@media (prefers-reduced-motion: reduce) {
    .hint { animation: none !important; }
}

/* --- Телефон ---------------------------------------------------------- */
@media (max-width: 480px) {
    .tut-card {
        max-height: 74vh;
        padding: 0 15px 14px;
        border-radius: 17px;
    }
    .tut-bar { margin: 0 -15px 12px; }
    .tut-icon { width: 56px; height: 56px; font-size: 26px; margin-bottom: 11px; }
    .tut-title { font-size: 16px; }
    .tut-body { font-size: 13.5px; margin-bottom: 15px; }
    .tut-btn { padding: 14px; font-size: 14.5px; }
    .tut-card--top { top: 8px; }
    .tut-card--bottom { bottom: 8px; }
    .tut-success, .tut-success__check { width: 66px; height: 66px; }
}

/* --- Уважение к настройкам доступности -------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tut-card,
    .tut-icon,
    .tut-title,
    .tut-body,
    .tut-actions,
    .tut-spot,
    .tut-ring,
    .tut-pointer__arrow,
    .tut-btn::after,
    .tut-success__ring,
    .tut-success__check,
    .tut-bar > i {
        animation: none !important;
        transition: none !important;
    }
}


/* --- Текст ------------------------------------------------------------ */
.tut-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.32;
    margin: 0 0 10px;
    color: #1c1c28;
    animation: tutFadeUp 0.4s ease 0.1s both;
}
.tut-body {
    font-size: 14px;
    line-height: 1.64;
    text-align: left;
    color: #4a4a5c;
    margin: 0 0 18px;
    overflow-wrap: break-word;
    animation: tutFadeUp 0.4s ease 0.16s both;
}
@keyframes tutFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Модалка игры поверх обучения -------------------------------------
   V7.5.2 — «модалка покупки закрывает туториал».
   #modal-overlay имеет z-index 100, а .tut-root — 300. Пока модалка открыта:
     • обучение опускается ПОД неё (иначе окно покупки не видно и не нажать);
     • затемнение и указатель прячутся — они не нужны и мешают читать;
     • карточка шага тоже прячется: она физически не помещается рядом с
       окном покупки на телефоне и перекрывала бы кнопку подтверждения.
   После закрытия модалки обучение возвращается САМО (в том же шаге). */
body.tut-modal-open .tut-root,
body:has(#modal-overlay:not(.hidden)) .tut-root {
    z-index: 50;
}
body.tut-modal-open .tut-spot,
body.tut-modal-open .tut-pointer,
body.tut-modal-open .tut-card,
body:has(#modal-overlay:not(.hidden)) .tut-spot,
body:has(#modal-overlay:not(.hidden)) .tut-pointer,
body:has(#modal-overlay:not(.hidden)) .tut-card {
    display: none !important;
}

/* --- Криминал: обучение выше игрового слоя ---------------------------- */
body.crime-mode .tut-root { z-index: 1020; }
body.crime-mode .tut-card { z-index: 1030; }

/* ==========================================================================
   КРИМИНАЛ — «вторая жизнь»
   Полноэкранный тёмный слой со своей навигацией. Открывается
   CrimeSystem.enter(), закрывается CrimeSystem.exit().
   ========================================================================== */
.crime-screen {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(231, 76, 60, 0.14), transparent 70%),
        linear-gradient(180deg, #0b0b14 0%, #05050a 100%);
    color: #e8e8ef;
    font-family: inherit;
    animation: crimeFadeIn 0.25s ease;
}
.crime-screen.hidden { display: none !important; }

/* Внутри криминала обычные слои (модалки/тосты) лежат под crime-screen
   (z-index:900). Поднимаем их поверх, иначе модалки, вызванные из криминала
   (Звания, тестовая реклама и пр.), не видны, пока не выйдешь в обычный режим. */
body.crime-mode .modal-overlay { z-index: 1000; }
body.crime-mode .toast { z-index: 1010; }


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

/* Шапка криминала */
.crime-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(231, 76, 60, 0.22);
    background: linear-gradient(180deg, rgba(26, 26, 46, 0.9), rgba(11, 11, 20, 0.6));
    backdrop-filter: blur(6px);
}
/* Кнопка-выход из «Криминала»: круглая, с арт-картинкой img/crime-exit.jpg
   (светлая шляпа с золотом), обрезанной по кругу. Висит в правом нижнем углу
   поверх нижнего бара (#crime-nav) — зеркально кнопке-входу .crime-orb на
   «Обзоре» — и ведёт обратно в обычную жизнь (CrimeSystem.exit()). */
.crime-exit {
    position: fixed;
    top: auto;
    left: auto;
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 950; /* выше нижнего бара .crime-nav, ниже модалок криминала */
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at 50% 45%, #2a2410 0%, #0b0a06 78%);
    border: none;
    border-radius: 50%;
    overflow: hidden; /* обрезает картинку строго по кругу */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.2s ease;
    box-shadow:
        0 0 0 2px rgba(241, 196, 15, 0.55),        /* золотая окантовка */
        0 0 12px rgba(241, 196, 15, 0.45),
        0 3px 12px rgba(0, 0, 0, 0.55);
    filter: drop-shadow(0 0 6px rgba(241, 196, 15, 0.35));
}
.crime-exit-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* квадрат-арт ровно заполняет круг */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.crime-exit:hover {
    transform: scale(1.06);
    box-shadow:
        0 0 0 2px rgba(255, 224, 130, 0.95),
        0 0 20px rgba(241, 196, 15, 0.75),
        0 4px 16px rgba(0, 0, 0, 0.6);
    filter: drop-shadow(0 0 10px rgba(241, 196, 15, 0.6));
}
.crime-exit:active { transform: scale(0.94); }

.crime-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 1.02em;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 16px rgba(231, 76, 60, 0.55);
}
.crime-title .ico { width: 1.4em; height: 1.4em; }

/* Ранг игрока в шапке */
.crime-rank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.08);
    border: 1px solid rgba(241, 196, 15, 0.3);
    border-radius: 10px;
    padding: 4px 9px;
    line-height: 1.1;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.crime-rank:hover { background: rgba(241, 196, 15, 0.16); }
.crime-rank:active { transform: scale(0.97); }
.crime-rank-ico .ico { width: 1.5em; height: 1.5em; }
.crime-rank-text { display: flex; flex-direction: column; align-items: flex-start; }
.crime-rank-title {
    font-size: 0.72em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #f7dc6f;
    white-space: nowrap;
}
.crime-rank-respect { font-size: 0.62em; font-weight: 700; color: #c9a227; white-space: nowrap; }
.crime-rank-unit { opacity: 0.75; }

/* Контент */
.crime-main {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
    -webkit-overflow-scrolling: touch;
}

/* Заглушка вкладки */
.crime-stub {
    max-width: 420px;
    margin: 32px auto 0;
    text-align: center;
    padding: 28px 20px;
    border: 1px solid rgba(231, 76, 60, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
}
.crime-stub-ico { margin-bottom: 14px; filter: drop-shadow(0 6px 18px rgba(231, 76, 60, 0.35)); }
.crime-stub-ico .ico { width: 96px; height: 96px; }
.crime-stub-title {
    font-size: 1.25em;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}
.crime-stub-text { font-size: 0.88em; color: #9a9ab0; line-height: 1.5; }

/* ---------------------------------------------------------------- HUD метрик */
.crime-hud {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.crime-stat {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    padding: 12px 12px 12px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.crime-stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #9a9ab0;
    margin-bottom: 6px;
}
.crime-stat-label .ico { width: 1.3em; height: 1.3em; }
.crime-stat-value {
    font-size: 1.25em;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crime-stat-sub { font-size: 0.62em; color: #8a8aa0; margin-top: 3px; }

/* Карточки-акценты */
.crime-stat.stat-respect   { border-color: rgba(241, 196, 15, 0.3); background: linear-gradient(135deg, rgba(241,196,15,0.14), rgba(241,196,15,0.03)); }
.crime-stat.stat-respect .crime-stat-value { color: #f7dc6f; }
.crime-stat.stat-influence { border-color: rgba(155, 89, 182, 0.35); background: linear-gradient(135deg, rgba(155,89,182,0.16), rgba(155,89,182,0.03)); }
.crime-stat.stat-influence .crime-stat-value { color: #c39bd3; }
.crime-stat.stat-dirty     { border-color: rgba(39, 174, 96, 0.35); background: linear-gradient(135deg, rgba(39,174,96,0.16), rgba(39,174,96,0.03)); }
.crime-stat.stat-dirty .crime-stat-value { color: #7ed6a2; }
.crime-stat.stat-heat      { border-color: rgba(231, 76, 60, 0.35); background: linear-gradient(135deg, rgba(231,76,60,0.16), rgba(231,76,60,0.03)); }

/* Прогресс-бар (ранг) */
.crime-bar {
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-top: 7px;
}
.crime-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #f1c40f, #f39c12);
    transition: width 0.35s ease;
}
.crime-bar.crime-bar-heat .crime-bar-fill { background: currentColor; }

/* Шкала «напряжения» */
.crime-heat-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
}
.crime-heat-row .crime-bar { flex: 1; margin-top: 0; }
.crime-heat-badge {
    font-size: 0.66em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 8px;
    color: #0b0b14;
    white-space: nowrap;
}

/* --------------------------------------------------- Таймер игрового дня */
.crime-day-timer-box {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.14), rgba(52, 152, 219, 0.03));
    border: 1px solid rgba(52, 152, 219, 0.32);
}
.crime-day-timer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.crime-day-timer-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72em;
    font-weight: 700;
    color: #a9c7e8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.crime-day-timer-label .ico { width: 1.3em; height: 1.3em; }
.crime-day-timer {
    font-size: 1.15em;
    font-weight: 900;
    color: #5dade2;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}
.crime-day-bar { margin-top: 8px; }
.crime-day-bar .crime-bar-fill { background: linear-gradient(90deg, #3498db, #5dade2); }
.crime-day-speedup {
    margin-top: 10px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(46, 204, 113, 0.4);
    border-radius: 10px;
    background: rgba(46, 204, 113, 0.12);
    color: #7ee2a8;
    font-size: 0.76em;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.crime-day-speedup:hover { background: rgba(46, 204, 113, 0.22); }
.crime-day-speedup:active { transform: scale(0.98); }
.crime-day-speedup .ico { width: 1.25em; height: 1.25em; }

/* ------------------------------------------------------ Модалка «Звания» */
/* Модалка открывается внутри криминала — перекрашиваем светлую оболочку
   .modal-box в тёмную «криминальную» тему (см. body.crime-mode ниже). */
.crime-ranks-modal { text-align: left; color: #e8e8ef; }
.crime-ranks-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    color: #f7dc6f;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-size: 1em;
}
.crime-ranks-title .ico { width: 1.3em; height: 1.3em; }
.crime-ranks-sub {
    font-size: 0.82em;
    color: #9a9ab0;
    margin: 0 0 14px;
    line-height: 1.45;
}
.crime-ranks-list { display: flex; flex-direction: column; gap: 10px; }
.crime-rank-row {
    border-radius: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.crime-rank-row.current {
    border-color: rgba(241, 196, 15, 0.6);
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.16), rgba(241, 196, 15, 0.03));
    box-shadow: 0 0 18px rgba(241, 196, 15, 0.22);
}
.crime-rank-row.done { opacity: 0.82; }
.crime-rank-row.locked { opacity: 0.55; }
.crime-rank-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.crime-rank-row-ico { color: #f1c40f; display: inline-flex; }
.crime-rank-row.locked .crime-rank-row-ico { color: #6c6c85; }
.crime-rank-row.done .crime-rank-row-ico { color: #7ed6a2; }
.crime-rank-row-ico .ico { width: 1.25em; height: 1.25em; }
.crime-rank-row-name { font-weight: 800; font-size: 0.98em; flex: 1; color: #fff; }
.crime-rank-row-badge.current {
    font-size: 0.62em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: 7px;
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #4a3a00;
}
.crime-rank-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 7px;
    font-size: 0.74em;
    color: #9a9ab0;
    font-weight: 600;
}
.crime-rank-row-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.crime-rank-row-meta .ico { width: 1.2em; height: 1.2em; }
.crime-rank-row-req { color: #f7dc6f; }
.crime-rank-row-mult { color: #7ed6a2; }
.crime-rank-row-slots { color: #aed6f1; }
.crime-rank-row-need {
    margin-top: 6px;
    font-size: 0.72em;
    font-weight: 700;
    color: #ff9f80;
}
.crime-rank-row-need.now { color: #7ed6a2; }

/* ===== Модалки-пояснения: «Напряжение» и «Район» ===== */
.crime-heat-info,
.crime-district-modal { text-align: left; color: #e8e8ef; }

.crime-heat-info-title,
.crime-district-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 1.1em;
    font-weight: 900;
    color: #f7dc6f;
}
.crime-heat-info-title .ico,
.crime-district-modal-title .ico { width: 1.3em; height: 1.3em; }

.crime-heat-info-state { margin-bottom: 12px; }
.crime-heat-info-meter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.crime-heat-info-meter .crime-bar { flex: 1; margin-top: 0; }
.crime-heat-info-val { font-size: 0.72em; font-weight: 800; color: #b9b9c9; white-space: nowrap; }
.crime-heat-info-effects { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.72em; }
.crime-heat-info-effects > span { display: inline-flex; align-items: center; gap: 4px; }
.crime-heat-info-effects .ico { width: 1.2em; height: 1.2em; }
.crime-heat-info-effects .eff-bonus { color: #7ed6a2; }
.crime-heat-info-effects .eff-risk  { color: #ff8a7a; }

.crime-heat-info-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.crime-heat-info-card {
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
.crime-heat-info-card.good { border-color: rgba(46, 204, 113, 0.3); }
.crime-heat-info-card.bad  { border-color: rgba(231, 76, 60, 0.3); }
.chc-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.78em;
    font-weight: 900;
    color: #fff;
}
.chc-head .ico { width: 1.2em; height: 1.2em; }
.chc-list { margin: 0; padding-left: 16px; font-size: 0.7em; line-height: 1.5; color: #b9b9c9; }
.chc-list li { margin-bottom: 4px; }

.crime-heat-info-line {
    display: flex;
    gap: 7px;
    margin: 0 0 12px;
    font-size: 0.72em;
    line-height: 1.5;
    color: #b9b9c9;
}
.crime-heat-info-line .ico { flex-shrink: 0; width: 1.15em; height: 1.15em; margin-top: 2px; }

.crime-heat-info-cool {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    margin-bottom: 14px;
    border-radius: 12px;
    border: 1px solid rgba(174, 214, 241, 0.25);
    background: rgba(52, 152, 219, 0.08);
}
.chc-cool-row { display: flex; align-items: center; gap: 6px; font-size: 0.72em; color: #aed6f1; }
.chc-cool-row .ico { width: 1.2em; height: 1.2em; }

.crime-heat-info-actions,
.crime-district-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crime-heat-info-actions .btn,
.crime-district-modal-actions .btn { flex: 1; min-width: 130px; }

.crime-district-modal-danger {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 0.74em;
    color: #f1c40f;
}
.crime-district-modal-danger .ico { width: 1.2em; height: 1.2em; }

.crime-district-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.cdm-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
.cdm-k { display: inline-flex; align-items: center; gap: 4px; font-size: 0.66em; font-weight: 800; color: #9a9ab0; }
.cdm-k .ico { width: 1.15em; height: 1.15em; }
.cdm-v { font-size: 1.05em; font-weight: 900; }
.cdm-h { font-size: 0.6em; line-height: 1.4; color: #8a8aa0; }
.cdm-cell.income .cdm-v { color: #7ed6a2; }
.cdm-cell.watch  .cdm-v { color: #ff8a7a; }
.cdm-cell.infl   .cdm-v { color: #c39bd3; }
.cdm-cell.cost   .cdm-v { color: #f7dc6f; }

.crime-district-modal-about {
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 12px;
    border: 1px solid rgba(241, 196, 15, 0.2);
    background: rgba(241, 196, 15, 0.06);
}
.cdm-about-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.78em;
    font-weight: 900;
    color: #fff;
}
.cdm-about-head .ico { width: 1.2em; height: 1.2em; }
.cdm-about-list { margin: 0; padding-left: 16px; font-size: 0.7em; line-height: 1.5; color: #b9b9c9; }
.cdm-about-list li { margin-bottom: 4px; }

.crime-district-modal-need {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.72em;
    color: #ff8a7a;
}
.crime-district-modal-need > span { display: inline-flex; align-items: center; gap: 4px; }
.crime-district-modal-need .ico { width: 1.15em; height: 1.15em; }

@media (max-width: 480px) {
    .crime-heat-info-cols,
    .crime-district-modal-grid { grid-template-columns: 1fr; }
}


/* Тёмная оболочка модалок внутри криминала (Звания, тестовая реклама и пр.).
   Обычная .modal-box — белая (светлая тема основного режима). */
body.crime-mode .modal-box {
    background:
        radial-gradient(600px 220px at 50% -30%, rgba(231, 76, 60, 0.16), transparent 70%),
        linear-gradient(180deg, #14141f 0%, #0b0b14 100%);
    border: 1px solid rgba(231, 76, 60, 0.3);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    color: #e8e8ef;
}
body.crime-mode .modal-box h3,
body.crime-mode .modal-box h4 { color: #fff; }
body.crime-mode .modal-box p { color: #b9b9c9; }
/* Верхняя акцент-полоска модалки — в цветах криминала (была сине-фиолетовой). */
body.crime-mode .modal-box::before {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    box-shadow: 0 0 14px rgba(231, 76, 60, 0.5);
}
/* Кнопки внутри криминальной модалки — «криминальный» красно-тёмный стиль. */
body.crime-mode .modal-box .btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e8e8ef;
    box-shadow: none;
}
body.crime-mode .modal-box .btn:hover { background: rgba(255, 255, 255, 0.1); }
body.crime-mode .modal-box .btn-dark {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(231, 76, 60, 0.35);
}
body.crime-mode .modal-box .btn-dark:hover { box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5); }


/* ------------------------------------------------------- Карточки районов */
.crime-districts { display: flex; flex-direction: column; gap: 10px; }
.crime-district {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: var(--transition);
}
.crime-district.owned { border-color: rgba(39, 174, 96, 0.4); background: linear-gradient(135deg, rgba(39,174,96,0.12), rgba(39,174,96,0.02)); }
.crime-district.locked { opacity: 0.62; }
.crime-district-ico { flex-shrink: 0; }
.crime-district-ico .ico { width: 40px; height: 40px; }
.crime-district-body { flex: 1; min-width: 0; }
.crime-district-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.98em;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
}
.crime-district-flag {
    font-size: 0.58em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 6px;
    color: #0b0b14;
    background: #2ecc71;
}
.crime-district-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.66em;
    color: #8a8aa0;
}
.crime-district-meta .ico { width: 1.1em; height: 1.1em; }
.crime-district-meta span { display: inline-flex; align-items: center; gap: 3px; }
.crime-district-danger { color: #f1c40f; letter-spacing: 1px; }

/* Кликабельные карточки районов */
.crime-district.clickable {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.crime-district.clickable:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(231, 76, 60, 0.4);
    transform: translateY(-1px);
}
.crime-district.clickable:active { transform: scale(0.99); }
.crime-district-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 0.62em;
    font-weight: 800;
    color: #9a9ab0;
}
.crime-district-cta .ico { width: 1.1em; height: 1.1em; }
.crime-district.home .crime-district-cta { color: #f1c40f; }
.crime-district.owned .crime-district-cta { color: #7ed6a2; }

/* Кликабельная шкала «Напряжения» + короткие эффекты под ней */
button.crime-heat-row {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
button.crime-heat-row:hover { border-color: rgba(231, 76, 60, 0.6); }
button.crime-heat-row:active { transform: scale(0.99); }
.crime-info-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.25);
    color: #ff8a7a;
    font-size: 0.7em;
    font-weight: 900;
}
.crime-heat-fx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: -6px;
    margin-bottom: 12px;
    font-size: 0.66em;
}
.crime-heat-fx > span { display: inline-flex; align-items: center; gap: 3px; }
.crime-heat-fx .ico { width: 1.15em; height: 1.15em; }
.crime-heat-fx .fx-good { color: #7ed6a2; }
.crime-heat-fx .fx-bad  { color: #ff8a7a; }
.crime-heat-fx .fx-cool { color: #aed6f1; }
.crime-heat-fx .fx-raid { color: #ffb347; font-weight: 800; }
.crime-laylow-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 5px 10px;
    border-radius: 9px;
    border: 1px solid rgba(174, 214, 241, 0.4);
    background: rgba(52, 152, 219, 0.16);
    color: #aed6f1;
    font: inherit;
    font-size: 1em;
    font-weight: 800;
    cursor: pointer;
}
.crime-laylow-btn .ico { width: 1.15em; height: 1.15em; }
.crime-laylow-btn:hover { background: rgba(52, 152, 219, 0.26); }
.crime-laylow-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.crime-laylow-btn.danger {
    margin-left: 0;
    border-color: rgba(255, 138, 122, 0.5);
    background: rgba(231, 76, 60, 0.2);
    color: #ff8a7a;
}


/* Нижняя навигация криминала */
.crime-nav {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    gap: 2px;
    padding: 6px 4px 8px;
    border-top: 1px solid rgba(231, 76, 60, 0.22);
    background: linear-gradient(0deg, rgba(11, 11, 20, 0.96), rgba(26, 26, 46, 0.7));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.crime-nav-btn {
    flex: 1 1 0;
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #7a7a92;
    font-family: inherit;
    font-size: 0.6em;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.crime-nav-ico .ico { width: 22px; height: 22px; }
.crime-nav-btn.active {
    color: #ff6b6b;
    background: rgba(231, 76, 60, 0.12);
}
.crime-nav-btn.active .ico { filter: drop-shadow(0 0 8px rgba(231, 76, 60, 0.6)); }

/* ================================================================ ДЕЛА (риск-экономика) */

/* Точка непрочитанного журнала на кнопке «Дела». */
.crime-nav-btn { position: relative; }
.crime-nav-dot {
    position: absolute;
    top: 2px;
    right: 12%;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: #e74c3c;
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    line-height: 15px;
    text-align: center;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.75);
}

/* HUD дел: слоты + деньги + heat */
.crime-jobs-hud .stat-jobs { border-color: rgba(127, 179, 213, 0.35); }
.crime-jobs-hud .stat-jobs .crime-stat-value { color: #aed6f1; }

/* Предупреждение об облаве */
.crime-jobs-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1.4;
    color: #ffd0c4;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.22), rgba(192, 57, 43, 0.08));
    border: 1px solid rgba(231, 76, 60, 0.45);
    animation: crime-alert-pulse 1.8s ease-in-out infinite;
}
.crime-jobs-alert .ico { flex-shrink: 0; width: 20px; height: 20px; color: #ff7b6b; }
@keyframes crime-alert-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(231, 76, 60, 0); }
    50% { box-shadow: 0 0 18px rgba(231, 76, 60, 0.3); }
}

/* Прогноз шанса рейда внутри алерта облавы */
.crime-raid-chance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 800;
    color: #ffb347;
    background: rgba(243, 156, 18, 0.14);
    border: 1px solid rgba(243, 156, 18, 0.4);
    white-space: nowrap;
}
.crime-raid-chance .ico { width: 13px; height: 13px; color: #ffb347; }

/* Блокировка крупняка после рейда */
.crime-jobs-alert.crime-raid-blocked {
    color: #cfe3ff;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.18), rgba(41, 128, 185, 0.06));
    border-color: rgba(52, 152, 219, 0.45);
    animation: none;
}
.crime-jobs-alert.crime-raid-blocked .ico { color: #5dade2; }

/* Итоги: выполнено / провалено / бонус риска */
.crime-jobs-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.crime-jobs-sum-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 9px;
    font-size: 0.68em;
    color: #9a9ab0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.crime-jobs-sum-item .ico { width: 1.2em; height: 1.2em; }
.crime-jobs-sum-item b { color: #fff; }
.crime-jobs-sum-item.ok .ico { color: #2ecc71; }
.crime-jobs-sum-item.bad .ico { color: #e74c3c; }

.crime-jobs-hint {
    font-size: 0.72em;
    line-height: 1.5;
    color: #8a8aa0;
    margin-bottom: 14px;
}

/* Список дел */
.crime-jobs { display: flex; flex-direction: column; gap: 12px; }

.crime-job {
    position: relative;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--job-color, #9a9ab0);
    transition: var(--transition);
}
.crime-job.ready { border-color: rgba(255, 255, 255, 0.12); }
.crime-job.ready:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-1px); }
.crime-job.waiting { opacity: 0.82; }
.crime-job.locked { opacity: 0.55; filter: grayscale(0.4); }

.crime-job-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.crime-job-ico { flex-shrink: 0; }
.crime-job-ico .ico { width: 34px; height: 34px; }
.crime-job-title { flex: 1; min-width: 0; }
.crime-job-name {
    font-size: 0.98em;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}
.crime-job-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crime-job-kind {
    font-size: 0.58em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.crime-job-risk { font-size: 0.68em; color: #f1c40f; letter-spacing: 1px; }
.crime-job-heat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    font-size: 0.68em;
    font-weight: 800;
    color: #ff8a65;
    background: rgba(230, 126, 34, 0.12);
    border-radius: 8px;
    padding: 3px 7px;
}
.crime-job-heat .ico { width: 1.2em; height: 1.2em; }

.crime-job-desc {
    font-size: 0.72em;
    line-height: 1.55;
    color: #9a9ab0;
    margin-bottom: 9px;
}

.crime-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.66em;
    color: #8a8aa0;
    margin-bottom: 10px;
}
.crime-job-meta span { display: inline-flex; align-items: center; gap: 3px; }
.crime-job-meta .ico { width: 1.15em; height: 1.15em; }
.crime-job-meta .meta-pay { color: #2ecc71; font-weight: 800; }
.crime-job-meta .meta-fail { color: #ff9f80; }
.crime-job-meta .meta-respect { color: #f7dc6f; }
.crime-job-meta .meta-infl { color: #aed6f1; }
/* Кнопка действия / причина отказа */
.crime-job-foot { display: flex; align-items: center; gap: 10px; }
.crime-job-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: none;
    border-radius: 11px;
    font-family: inherit;
    font-size: 0.8em;
    font-weight: 900;
    letter-spacing: 0.4px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    box-shadow: 0 4px 14px rgba(231, 76, 60, 0.35);
    transition: var(--transition);
}
.crime-job-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5); }
.crime-job-btn:active { transform: translateY(0) scale(0.98); }
.crime-job-btn .ico { width: 1.4em; height: 1.4em; }

.crime-job-locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72em;
    font-weight: 700;
    color: #8a8aa0;
}
.crime-job-locked .ico { width: 1.3em; height: 1.3em; }
.crime-job-cd-left {
    margin-left: auto;
    font-size: 0.72em;
    font-weight: 900;
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.12);
    border-radius: 8px;
    padding: 3px 9px;
}

/* Журнал дел */
.crime-jobs-log {
    margin-top: 16px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
/* Журнал событий (рейды/облавы) — красноватый акцент */
.crime-event-log {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.08), rgba(255, 255, 255, 0.01));
    border-color: rgba(231, 76, 60, 0.3);
}
.crime-event-log .crime-jobs-log-title { color: #ff9b8a; }
.crime-event-log .crime-jobs-log-title .ico { color: #ff7b6b; }
.crime-jobs-log-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.62em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #9a9ab0;
    margin-bottom: 9px;
}
.crime-jobs-log-title .ico { width: 1.4em; height: 1.4em; }
.crime-jobs-log-list { display: flex; flex-direction: column; gap: 5px; }
.crime-jobs-log-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 0.68em;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid #555;
}
.crime-jobs-log-row.ok { border-left-color: #2ecc71; }
.crime-jobs-log-row.bad { border-left-color: #e74c3c; }
.crime-jobs-log-row .log-ico { display: inline-flex; }
.crime-jobs-log-row .log-ico .ico { width: 1.3em; height: 1.3em; }
.crime-jobs-log-row.ok .log-ico .ico { color: #2ecc71; }
.crime-jobs-log-row.bad .log-ico .ico { color: #e74c3c; }
.crime-jobs-log-row .log-name { flex: 1; min-width: 0; color: #d7d7e6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crime-jobs-log-row .log-day { color: #6f6f85; font-size: 0.92em; }
.crime-jobs-log-row .log-val { font-weight: 800; color: #fff; }
.crime-jobs-log-row.ok .log-val { color: #2ecc71; }
.crime-jobs-log-row.bad .log-val { color: #ff8a65; }

/* Флаг «Дом» у района */
.crime-district-flag.home { background: #3498db; }
.crime-district.home { border-color: rgba(52, 152, 219, 0.35); }

/* ============================================================ МУТНЫЙ ДВИЖ */
/* Отдельная система грязных подработок: свой каталог, 15-мин перезарядка. */
.crime-shady-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(192, 57, 43, 0.20), rgba(192, 57, 43, 0.05));
    border: 1px solid rgba(192, 57, 43, 0.35);
}
.crime-shady-intro-ico { flex-shrink: 0; filter: drop-shadow(0 3px 10px rgba(192, 57, 43, 0.5)); }
.crime-shady-intro-ico .ico { width: 34px; height: 34px; }
.crime-shady-intro-title { font-size: 1em; font-weight: 800; color: #fff; margin-bottom: 4px; }
.crime-shady-intro-sub { font-size: 0.72em; color: #d7b3ad; line-height: 1.45; }
.crime-shady-hud .stat-dirty .crime-stat-value { color: #7ed6a2; }
.crime-shady-hud .stat-respect .crime-stat-value { color: #f7dc6f; }
.crime-shady-job { border-left: 3px solid rgba(192, 57, 43, 0.75); }
.crime-shady-job.ready { border-left-color: var(--tone-red-fg); }
.crime-shady-ready {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7em;
    font-weight: 800;
    color: #7ed6a2;
}
.crime-shady-ready .ico { width: 1.3em; height: 1.3em; }
.crime-shady-cd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.crime-shady-cd-label { font-size: 0.62em; color: #9a9ab0; text-transform: uppercase; letter-spacing: 0.4px; }
.crime-shady-cd-value { font-size: 0.85em; font-weight: 900; color: #ff9d8a; font-variant-numeric: tabular-nums; }
.crime-shady-need { font-size: 0.66em; color: #f7dc6f; }
.crime-shady-log .crime-jobs-log-row { border-left-color: var(--tone-red-fg); }

/* Кнопка «сбросить перезарядку (реклама)» — в карточке и в шапке «движа» */
.crime-shady-speedup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 13px;
    border: 1px solid rgba(241, 196, 15, 0.55);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.16), rgba(241, 196, 15, 0.05));
    color: #f7dc6f;
    font-family: inherit;
    font-size: 0.72em;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.crime-shady-speedup .ico { width: 1.25em; height: 1.25em; }
.crime-shady-speedup:hover {
    border-color: #f7dc6f;
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.26), rgba(241, 196, 15, 0.10));
    box-shadow: 0 0 14px rgba(241, 196, 15, 0.35);
}
.crime-shady-speedup:active { transform: scale(0.97); }

/* ============================================================ БАНДА */
/* Пассивный доход через НПС-бойцов: наём, прокачка, heat, аресты. */
.crime-gang-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.22), rgba(142, 68, 173, 0.05));
    border: 1px solid rgba(142, 68, 173, 0.38);
}
.crime-gang-intro-ico { flex-shrink: 0; filter: drop-shadow(0 3px 10px rgba(142, 68, 173, 0.5)); }
.crime-gang-intro-ico .ico { width: 34px; height: 34px; }
.crime-gang-intro-title { font-size: 1em; font-weight: 800; color: #fff; margin-bottom: 4px; }
.crime-gang-intro-sub { font-size: 0.72em; color: #c9b3d7; line-height: 1.45; }
.crime-gang-hud .stat-dirty .crime-stat-value { color: #7ed6a2; }
.crime-gang-hud .stat-slots .crime-stat-value { color: #d2a8e8; }

.crime-gang-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.crime-gang-sum-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 10px;
    font-size: 0.68em;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #cfcfe0;
}
.crime-gang-sum-item .ico { width: 1.25em; height: 1.25em; }
.crime-gang-sum-item b { color: #fff; }
.crime-gang-sum-item.income b { color: #7ed6a2; }
.crime-gang-sum-item.heat b { color: #ff9d8a; }
.crime-gang-sum-item.boss b { color: #f7dc6f; }

.crime-gang-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 10px;
    font-size: 0.82em;
    font-weight: 800;
    color: #e6d8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.crime-gang-section-title .ico { width: 1.3em; height: 1.3em; }

.crime-gang-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 14px;
    text-align: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(142, 68, 173, 0.4);
}
.crime-gang-empty .ico { width: 46px; height: 46px; opacity: 0.7; }
.crime-gang-empty-title { font-size: 0.85em; font-weight: 800; color: #d2a8e8; }
.crime-gang-empty-hint { font-size: 0.7em; color: #9a9ab0; max-width: 320px; line-height: 1.4; }

.crime-gang-list { display: flex; flex-direction: column; gap: 10px; }

.crime-gang-card {
    padding: 12px 13px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.12), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(142, 68, 173, 0.30);
    border-left: 3px solid rgba(142, 68, 173, 0.85);
}
.crime-gang-card.jailed {
    border-left-color: #e74c3c;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.12), rgba(255, 255, 255, 0.02));
}
.crime-gang-card-head { display: flex; align-items: center; gap: 10px; }
.crime-gang-card-ico { flex-shrink: 0; }
.crime-gang-card-ico .ico { width: 26px; height: 26px; }
.crime-gang-card-id { flex: 1; min-width: 0; }
.crime-gang-card-name {
    font-size: 0.85em;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.crime-gang-card-type {
    font-size: 0.72em;
    font-weight: 600;
    color: #b98fd6;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.crime-gang-card-lvl { margin-top: 3px; letter-spacing: 1px; }
.crime-gang-star { font-size: 0.8em; color: #4a4a5a; }
.crime-gang-star.on { color: #f1c40f; }

.crime-gang-card-jail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 0.66em;
    font-weight: 800;
    color: #ff9d8a;
    background: rgba(231, 76, 60, 0.14);
    border: 1px solid rgba(231, 76, 60, 0.35);
}

.crime-gang-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 9px;
    font-size: 0.68em;
    color: #b9b9ca;
}
.crime-gang-card-stats .ico { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.crime-gang-card-inc b { color: #7ed6a2; }
.crime-gang-card-heat b { color: #ff9d8a; }

.crime-gang-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.crime-gang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #e0e0ee;
    font-family: inherit;
    font-size: 0.7em;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.crime-gang-btn .ico { width: 1.2em; height: 1.2em; }
.crime-gang-btn em { font-style: normal; opacity: 0.75; font-weight: 700; }
.crime-gang-btn.up {
    border-color: rgba(46, 204, 113, 0.45);
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.16), rgba(46, 204, 113, 0.04));
    color: #7ed6a2;
}
.crime-gang-btn.up:hover { border-color: #7ed6a2; box-shadow: 0 0 12px rgba(46, 204, 113, 0.35); }
.crime-gang-btn.fire {
    border-color: rgba(231, 76, 60, 0.45);
    color: #ff9d8a;
}
.crime-gang-btn.fire:hover { border-color: #e74c3c; box-shadow: 0 0 12px rgba(231, 76, 60, 0.35); }
.crime-gang-btn.hire {
    border-color: rgba(142, 68, 173, 0.5);
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.2), rgba(142, 68, 173, 0.05));
    color: #d2a8e8;
}
.crime-gang-btn.hire:hover { border-color: #b98fd6; box-shadow: 0 0 12px rgba(142, 68, 173, 0.4); }
.crime-gang-btn:active { transform: scale(0.97); }
.crime-gang-maxed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    font-size: 0.66em;
    font-weight: 800;
    color: #7ed6a2;
}
.crime-gang-maxed .ico { width: 1.2em; height: 1.2em; }
.crime-gang-hire-list { display: flex; flex-direction: column; gap: 9px; }
.crime-gang-hire-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
.crime-gang-hire-card.locked { opacity: 0.62; }
.crime-gang-hire-ico { flex-shrink: 0; }
.crime-gang-hire-ico .ico { width: 24px; height: 24px; }
.crime-gang-hire-info { flex: 1; min-width: 0; }
.crime-gang-hire-name { font-size: 0.8em; font-weight: 800; color: #fff; margin-bottom: 2px; }
.crime-gang-hire-desc { font-size: 0.66em; color: #9a9ab0; line-height: 1.4; margin-bottom: 5px; }
.crime-gang-hire-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.64em;
    color: #b9b9ca;
}
.crime-gang-hire-stats .ico { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.crime-gang-hire-stats b { color: #e6d8f0; }
.crime-gang-hire-act { flex-shrink: 0; }
.crime-gang-hire-note { font-size: 0.64em; font-weight: 700; color: #f7dc6f; max-width: 120px; text-align: right; line-height: 1.35; }

.crime-gang-info {
    margin-top: 16px;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(142, 68, 173, 0.10);
    border: 1px solid rgba(142, 68, 173, 0.28);
}
.crime-gang-info .ico { width: 1.4em; height: 1.4em; vertical-align: -0.3em; margin-right: 5px; }
.crime-gang-info-title { font-size: 0.72em; font-weight: 800; color: #d2a8e8; }
.crime-gang-info-text { font-size: 0.68em; color: #b3b3c5; line-height: 1.5; margin-top: 6px; }

.crime-gang-log .crime-jobs-log-row { border-left-color: var(--tone-purple-fg); }
.crime-gang-log .crime-jobs-log-row.bad { border-left-color: #e74c3c; }
/* ===== ОТМЫВАНИЕ ДЕНЕГ (Фаза 5) — палитра «аквамарин/бирюза» ===== */
.crime-launder-intro {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(26, 188, 156, 0.14), rgba(26, 188, 156, 0.03));
    border: 1px solid rgba(26, 188, 156, 0.28);
    margin-bottom: 12px;
}
.crime-launder-intro-ico .ico { width: 34px; height: 34px; }
.crime-launder-intro-txt { min-width: 0; }
.crime-launder-intro-title { font-size: 0.98em; font-weight: 800; color: #a8e6cf; margin: 0 0 3px; }
.crime-launder-intro-sub { font-size: 0.72em; color: #9fb3ad; line-height: 1.45; margin: 0; }

.crime-launder-hud { margin-bottom: 12px; }
.crime-stat.stat-clean .crime-stat-value { color: #7ed6a2; }

.crime-launder-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.crime-launder-sum-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.66em;
    font-weight: 700;
    color: #b8c6c1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.crime-launder-sum-item .ico { width: 1.3em; height: 1.3em; }
.crime-launder-sum-item b { color: #eafff6; }
.crime-launder-sum-item.cut b { color: #7ed6a2; }
.crime-launder-sum-item.income b { color: #7ed6a2; }

.crime-launder-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    font-size: 0.68em;
    font-weight: 700;
    color: #ffb3a7;
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.4);
}
.crime-launder-warn .ico { width: 1.4em; height: 1.4em; flex-shrink: 0; }

.crime-launder-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78em;
    font-weight: 800;
    color: #a8e6cf;
    margin: 16px 0 9px;
}
.crime-launder-section-title .ico { width: 1.3em; height: 1.3em; }

.crime-launder-list { display: flex; flex-direction: column; gap: 11px; }
.crime-launder-card {
    padding: 12px 13px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(26, 188, 156, 0.2);
}
.crime-launder-card.locked { opacity: 0.6; }
.crime-launder-card.cd { opacity: 0.82; }
.crime-launder-card-head { display: flex; align-items: center; gap: 11px; }
.crime-launder-card-ico { flex-shrink: 0; }
.crime-launder-card-ico .ico { width: 26px; height: 26px; }
.crime-launder-card-info { flex: 1; min-width: 0; }
.crime-launder-card-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84em;
    font-weight: 800;
    color: #eafff6;
    margin-bottom: 2px;
}
.crime-launder-card-lvl {
    font-size: 0.72em;
    font-weight: 700;
    color: #7ed6a2;
    background: rgba(126, 214, 162, 0.12);
    padding: 1px 7px;
    border-radius: 8px;
}
.crime-launder-card-desc { font-size: 0.66em; color: #9a9ab0; line-height: 1.4; }

.crime-launder-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin: 10px 0 8px;
    font-size: 0.63em;
    color: #b9c6c2;
}
.crime-launder-card-stats .ico { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.crime-launder-card-stats b { color: #eafff6; }
.launder-stat.pale b { color: #f5b7a8; }
.launder-stat.heat { color: #f5b7a8; }

.crime-launder-cap-bar {
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 10px;
}
.crime-launder-cap-fill {
    height: 100%;
    background: linear-gradient(90deg, #16a085, #1abc9c);
    transition: width 0.3s ease;
}










.crime-launder-card-lock, .crime-launder-card-cd {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 0.66em;
    font-weight: 700;
    color: #cbb3f0;
    background: rgba(142, 68, 173, 0.12);
    border: 1px solid rgba(142, 68, 173, 0.3);
}
.crime-launder-card-cd { color: #f7dc6f; background: rgba(241, 196, 15, 0.08); border-color: rgba(241, 196, 15, 0.3); }
.crime-launder-card-lock .ico, .crime-launder-card-cd .ico { width: 1.3em; height: 1.3em; flex-shrink: 0; }

.crime-launder-form { display: flex; flex-direction: column; gap: 9px; }
.crime-launder-amount { display: flex; gap: 9px; align-items: stretch; }
.crime-launder-input {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(26, 188, 156, 0.3);
    color: #eafff6;
    font-size: 0.82em;
    font-weight: 700;
}
.crime-launder-quick { display: flex; gap: 5px; }
.crime-launder-quick button {
    padding: 0 10px;
    border-radius: 9px;
    background: rgba(26, 188, 156, 0.1);
    border: 1px solid rgba(26, 188, 156, 0.3);
    color: #a8e6cf;
    font-size: 0.68em;
    font-weight: 800;
    cursor: pointer;
}
.crime-launder-quick button:hover { background: rgba(26, 188, 156, 0.22); }

.crime-launder-prev-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 0.64em;
    color: #b9c6c2;
}
.crime-launder-prev-grid .ico { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.crime-launder-prev-grid .prev-cell.clean b { color: #7ed6a2; }
.crime-launder-prev-grid .prev-cell.loss b { color: #ff8a76; }
.crime-launder-prev-grid .prev-cell.heat { color: #f5b7a8; }
.crime-launder-prev-grid .prev-cell.pale b { color: #f5b7a8; }

.crime-launder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(26, 188, 156, 0.24), rgba(26, 188, 156, 0.06));
    border: 1px solid rgba(26, 188, 156, 0.5);
    color: #b8f0dd;
    font-size: 0.76em;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}
.crime-launder-btn:hover { border-color: #1abc9c; box-shadow: 0 0 12px rgba(26, 188, 156, 0.35); }
.crime-launder-btn em { font-style: normal; font-size: 0.86em; opacity: 0.85; }
.crime-launder-btn:active { transform: scale(0.97); }
.crime-launder-card-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.crime-launder-btn.upgrade, .crime-launder-btn.auto, .crime-launder-btn.buy {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
    color: #cdd8d4;
}
.crime-launder-btn.upgrade:hover, .crime-launder-btn.auto:hover, .crime-launder-btn.buy:hover {
    border-color: #1abc9c; box-shadow: 0 0 10px rgba(26, 188, 156, 0.28);
}
.crime-launder-btn.short { opacity: 0.5; }
.crime-launder-btn.auto.on {
    background: linear-gradient(135deg, rgba(26, 188, 156, 0.26), rgba(26, 188, 156, 0.06));
    border-color: #1abc9c;
    color: #b8f0dd;
}
.crime-launder-maxed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 11px;
    font-size: 0.66em;
    font-weight: 800;
    color: #7ed6a2;
}
.crime-launder-maxed .ico { width: 1.2em; height: 1.2em; }

.crime-launder-fronts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crime-launder-front {
    display: flex;
    gap: 10px;
    padding: 11px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
.crime-launder-front.locked { opacity: 0.6; }
.crime-launder-front.owned { border-color: rgba(126, 214, 162, 0.4); background: rgba(126, 214, 162, 0.06); }
.crime-launder-front-ico .ico { width: 24px; height: 24px; }
.crime-launder-front-info { flex: 1; min-width: 0; }
.crime-launder-front-name { font-size: 0.78em; font-weight: 800; color: #fff; }
.crime-launder-front-desc { font-size: 0.62em; color: #9a9ab0; line-height: 1.35; margin: 2px 0 5px; }
.crime-launder-front-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 0.62em;
    color: #b9c6c2;
}
.crime-launder-front-stats .ico { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.crime-launder-front-stats .owned-badge { color: #7ed6a2; font-weight: 800; }
.crime-launder-front-act { flex-shrink: 0; display: flex; align-items: center; }
.crime-launder-front-note { font-size: 0.62em; font-weight: 700; color: #f7dc6f; }
.crime-launder-front-note.ok { color: #7ed6a2; }

.crime-launder-log .crime-jobs-log-row { border-left-color: #1abc9c; }
.crime-launder-log .crime-jobs-log-row.bad { border-left-color: #e74c3c; }

.crime-launder-auto-modal { padding: 6px 4px; text-align: center; }
.crime-launder-auto-modal h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.05em;
    color: #a8e6cf;
    margin-bottom: 8px;
}
.crime-launder-auto-modal h3 .ico { width: 1.3em; height: 1.3em; }
.crime-launder-auto-sub { font-size: 0.75em; color: #cfd8d5; margin-bottom: 10px; }
.crime-launder-auto-label { display: block; font-size: 0.68em; color: #9fb3ad; margin-bottom: 5px; text-align: left; }
.crime-launder-auto-actions { display: flex; gap: 8px; margin-top: 10px; }
.crime-launder-auto-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.68em; font-weight: 700; color: #a8e6cf;
    background: rgba(26,188,156,0.14); border: 1px solid rgba(26,188,156,0.4);
    border-radius: 20px; padding: 3px 10px; margin-bottom: 10px;
}
.crime-launder-auto-status .ico { width: 1.1em; height: 1.1em; }
.crime-launder-auto-status.forever { color: #f7dc6f; background: rgba(241,196,15,0.14); border-color: rgba(241,196,15,0.45); }

/* Витрина авто-отмыва (тарифы за гемы) */
.crime-launder-shop { padding: 8px 4px; text-align: center; }
.crime-launder-shop h3 {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 1.05em; color: #a8e6cf; margin-bottom: 6px;
}
.crime-launder-shop h3 .ico { width: 1.3em; height: 1.3em; }
.crime-launder-shop-sub { font-size: 0.72em; color: #cfd8d5; margin-bottom: 10px; line-height: 1.4; }
.crime-launder-shop-balance {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75em; color: #e8f6f2; margin-bottom: 12px;
    background: rgba(142,68,173,0.14); border: 1px solid rgba(142,68,173,0.4);
    border-radius: 20px; padding: 4px 12px;
}
.crime-launder-shop-balance .ico { width: 1.1em; height: 1.1em; }
.crime-launder-shop-balance b { color: #d5a6e8; }
.crime-launder-shop-plan {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    text-align: left; padding: 10px 12px; margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(26,188,156,0.10), rgba(23,52,66,0.55));
    border: 1px solid rgba(26,188,156,0.35); border-radius: 10px;
}
.crime-launder-shop-plan.forever {
    background: linear-gradient(135deg, rgba(241,196,15,0.12), rgba(23,52,66,0.55));
    border-color: rgba(241,196,15,0.4);
}
.crime-launder-shop-plan.owned { opacity: 0.75; }
.crime-launder-shop-plan .plan-info { flex: 1; min-width: 0; }
.crime-launder-shop-plan .plan-title { font-size: 0.82em; font-weight: 800; color: #eaf7f3; }
.crime-launder-shop-plan.forever .plan-title { color: #f7dc6f; }
.crime-launder-shop-plan .plan-desc { font-size: 0.64em; color: #9fb3ad; margin-top: 2px; line-height: 1.35; }
.crime-launder-shop-plan .plan-price {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.8em; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #8e44ad, #6c3483);
    border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.crime-launder-shop-plan .plan-price .ico { width: 1.1em; height: 1.1em; }
.crime-launder-shop-plan .plan-price.short { background: linear-gradient(135deg, #7f8c8d, #566573); opacity: 0.85; }
.crime-launder-shop-plan .plan-price.owned { background: rgba(26,188,156,0.2); color: #a8e6cf; cursor: default; padding: 8px 10px; }

/* Снять напряжение (heat) за рекламу/гемы */
.crime-relief { padding: 6px 4px; text-align: center; }
.crime-relief-title {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 1.05em; color: #a8e6cf; margin-bottom: 6px;
}
.crime-relief-title .ico { width: 1.3em; height: 1.3em; }
.crime-relief-sub { font-size: 0.72em; color: #cfd8d5; margin-bottom: 8px; line-height: 1.4; }
.crime-relief-heat {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.75em; color: #e8f6f2;
    background: rgba(231,76,60,0.14); border: 1px solid rgba(231,76,60,0.4);
    border-radius: 20px; padding: 4px 12px; margin-bottom: 12px;
}
.crime-relief-heat .ico { width: 1.1em; height: 1.1em; }
.crime-relief-heat b { color: #ff9f8f; }
.crime-relief-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    text-align: left; padding: 10px 12px; margin-bottom: 8px;
    background: rgba(23,52,66,0.55); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}
.crime-relief-row.ad { border-color: rgba(52,152,219,0.4); }
.crime-relief-row.gem { border-color: rgba(142,68,173,0.4); }
.crime-relief-row .relief-info { flex: 1; min-width: 0; }
.crime-relief-row .relief-title { font-size: 0.8em; font-weight: 800; color: #eaf7f3; }
.crime-relief-row .relief-desc { font-size: 0.64em; color: #9fb3ad; margin-top: 2px; line-height: 1.35; }
.crime-relief-row .relief-extra { font-size: 0.64em; color: #7fd8c4; margin-top: 3px; font-weight: 700; }
.crime-relief-row .relief-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.crime-relief-row .relief-btn .ico { width: 1.1em; height: 1.1em; }


@media (max-width: 480px) {
    .crime-main { padding: 14px 12px; }
    .crime-stub-ico .ico { width: 76px; height: 76px; }
    .crime-stub-title { font-size: 1.1em; }
    .crime-job-desc { font-size: 0.68em; }
    .crime-job-btn { width: 100%; justify-content: center; }
    .crime-job-foot { flex-wrap: wrap; }
    .crime-jobs-summary { gap: 6px; }
    .crime-jobs-sum-item { font-size: 0.62em; }
    .crime-day-timer { font-size: 1em; }
    .crime-day-timer-box { padding: 10px 12px; }
    .crime-rank-row-meta { gap: 8px; font-size: 0.7em; }
    .crime-ranks-title { font-size: 1.05em; }
    /* «Мутный движ» */
    .crime-shady-intro { flex-direction: column; gap: 8px; padding: 10px 12px; }
    .crime-shady-intro-sub { font-size: 0.68em; }
    .crime-shady-cd { width: 100%; justify-content: space-between; }
    .crime-shady-speedup { width: 100%; }
    .crime-shady-log .crime-jobs-log-row { font-size: 0.62em; }
    /* «Банда» */
    .crime-gang-intro { flex-direction: column; gap: 8px; padding: 10px 12px; }
    .crime-gang-intro-sub { font-size: 0.68em; }
    .crime-gang-hire-card { flex-wrap: wrap; }
    .crime-gang-hire-act { width: 100%; }
    .crime-gang-hire-note { max-width: none; text-align: left; }
    .crime-gang-btn.hire { width: 100%; justify-content: center; }
    .crime-gang-card-actions { flex-wrap: wrap; }
    .crime-gang-log .crime-jobs-log-row { font-size: 0.62em; }
    /* «Отмывание» */
    .crime-launder-intro { flex-direction: column; gap: 8px; padding: 10px 12px; align-items: flex-start; }
    .crime-launder-intro-sub { font-size: 0.68em; }
    .crime-launder-card-stats { gap: 8px; font-size: 0.6em; }
    .crime-launder-amount { flex-direction: column; }
    .crime-launder-quick { width: 100%; }
    .crime-launder-quick button { flex: 1; }
    .crime-launder-btn { width: 100%; }
    .crime-launder-card-foot { flex-direction: column; }
    .crime-launder-fronts { grid-template-columns: 1fr; }
    .crime-launder-front { flex-wrap: wrap; }
    .crime-launder-front-act { width: 100%; }
    .crime-launder-front-act .crime-launder-btn { width: 100%; }
    .crime-launder-log .crime-jobs-log-row { font-size: 0.62em; }

    /* Виджет квеста на «Обзоре» + круглая кнопка входа в «Криминал» */
    :root { --overview-entry-h: 96px; }
    .crime-orb { width: 48px; height: 48px; right: 12px; }
}


/* ==========================================================================
   ПРОИЗВОДСТВО (v6.12.2)
   Отдельного полноэкранного слоя больше нет. Всё живёт внутри обычных
   вкладок: линия — вкладка «🏭 Производство» в модалке бизнеса, биржа —
   «Финансы → 💱 Биржи → 🏭 Биржа производств» (рендерится в #exchange-body).
   ========================================================================== */

/* --- Вкладки (общие для линии и биржи) --- */
.prod-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.prod-tab {
    flex: 1 0 auto;
    min-width: 0;
    padding: 9px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 11px;
    background: #fff;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.7em;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
}
.prod-tab:hover { border-color: #c9c9c9; }
.prod-tab.active {
    border-color: transparent;
    background: linear-gradient(135deg, #0f766e, #16a085);
    color: #fff;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.3);
}

/* --- «Приборная панель»: 4 живых цифры в строку --- */
.prod-strip {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #0f766e, #16a085);
    border-radius: 13px;
    padding: 9px 8px;
    box-shadow: 0 3px 12px rgba(15, 118, 110, 0.22);
}
.prod-strip.loss { background: linear-gradient(135deg, #b03a2e, #e74c3c); }
.prod-strip.full { background: linear-gradient(135deg, #b9770e, #f39c12); }
.prod-strip-cell {
    flex: 1;
    min-width: 0;
    text-align: center;
    color: #fff;
    padding: 0 2px;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
}
.prod-strip-cell:last-child { border-right: none; }
.prod-strip-lbl {
    font-size: 0.52em;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prod-strip-val {
    font-size: 0.78em;
    font-weight: 800;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prod-strip-val.red { color: #ffe08a; }
.prod-strip-sub { font-size: 0.78em; font-weight: 500; opacity: 0.85; }

/* --- Быстрые действия над линией --- */
.prod-quick {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.prod-quick .btn {
    flex: 1;
    min-width: 96px;
    font-size: 0.66em;
    padding: 9px 6px;
    border-radius: 10px;
}

/* --- Сворачиваемые секции линии (v6.12.2) ---
   Блоки «склады / экономика / поставщики / улучшения» по умолчанию свёрнуты:
   страница линии была длинной, а главное (метрики, цена, действия) — сверху. */
.prod-sec {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    overflow: hidden;
}
.prod-sec-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: #fafafa;
    border: none;
    font-family: inherit;
    font-size: 0.78em;
    font-weight: 800;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.prod-sec-head:hover { background: #f2f2f2; }
.prod-sec-icon { font-size: 1.05em; }
.prod-sec-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prod-sec-badge {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--text-muted);
    background: #eee;
    border-radius: 8px;
    padding: 1px 7px;
    white-space: nowrap;
}
.prod-sec-arrow {
    font-size: 0.9em;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.prod-sec.collapsed .prod-sec-arrow { transform: rotate(-90deg); }
.prod-sec-body { padding: 10px 12px; }
.prod-sec-body[hidden] { display: none; }

/* --- Действия линии (v6.15.0): один ряд, без повторных кнопок --- */
.prod-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.prod-actions-grid .btn {
    font-size: 0.66em;
    padding: 10px 6px;
    border-radius: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prod-ship-note {
    font-size: 0.6em;
    line-height: 1.45;
    color: var(--text-muted);
    background: #f6f6f6;
    border-radius: 8px;
    padding: 6px 8px;
}

/* --- Предупреждение о полном складе: подпись мелким шрифтом --- */
.prod-hero-alert { flex-wrap: wrap; }
.prod-hero-alert-sub {
    flex-basis: 100%;
    font-size: 0.82em;
    opacity: 0.85;
}

/* --- Биржа: сводка «что у меня лежит» (v6.15.0) --- */
.prod-sum-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.prod-sum-sub { color: var(--text-muted); font-weight: 400; }
.prod-sum-btn {
    width: 100%;
    margin-top: 6px;
    font-size: 0.62em;
}
.prod-sum-btn.is-off { opacity: 0.45; cursor: not-allowed; }

/* --- Биржа: строки «мои лоты» --- */
.prod-sec-title-line {
    font-size: 0.8em;
    font-weight: 800;
    margin: 10px 0 6px;
}
.prod-mylot {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eefaf3;
    border: 1px solid #bfe8d0;
    border-radius: 10px;
    padding: 7px 9px;
    margin-bottom: 5px;
}
.prod-mylot-icon { font-size: 1.05em; }
.prod-mylot-name {
    flex: 1;
    min-width: 0;
    font-size: 0.68em;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prod-mylot-qty { color: var(--text-muted); font-weight: 500; }
.prod-mylot-chain {
    display: block;
    font-size: 0.86em;
    font-weight: 600;
    color: var(--tone-green-fg);
}
.prod-mylot-price {
    font-size: 0.7em;
    font-weight: 800;
    color: var(--tone-green-fg);
    white-space: nowrap;
}
.prod-mylot-x {
    font-size: 0.6em;
    padding: 5px 8px;
}

/* --- Биржа: карточка товара в свёрнутой витрине --- */
.prod-lot-card {
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 7px;
}
.prod-lot-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.prod-lot-title {
    font-size: 0.72em;
    font-weight: 800;
    min-width: 0;
    overflow-wrap: anywhere;
}
.prod-lot-price {
    font-size: 0.72em;
    font-weight: 800;
    white-space: nowrap;
}
.prod-lot-meta {
    font-size: 0.58em;
    color: var(--text-muted);
    margin: 2px 0 6px;
}
.prod-lot-chain {
    font-size: 0.58em;
    color: var(--tone-green-fg);
    margin: -3px 0 6px;
}
.prod-lot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 5px 8px;
    margin-bottom: 4px;
}
.prod-lot-seller {
    flex: 1;
    min-width: 0;
    font-size: 0.64em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prod-lot-qty { color: var(--text-muted); }
.prod-lot-row-price {
    font-size: 0.66em;
    font-weight: 700;
    white-space: nowrap;
}
.prod-lot-buy {
    font-size: 0.6em;
    padding: 5px 10px;
}

/* --- Вкладка «Продать» --- */
.prod-hint-line {
    font-size: 0.64em;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.prod-sell-biz { margin-bottom: 8px; }
.prod-sell-biz > .prod-sec { margin-bottom: 6px; }
.prod-sell-biz-head {
    font-size: 0.62em;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 4px 2px;
}
.prod-sell-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.prod-sell-info { flex: 1; min-width: 0; }
.prod-sell-qty { font-size: 0.82em; font-weight: 800; }
.prod-sell-sub { color: var(--text-muted); font-weight: 400; font-size: 0.85em; }
.prod-sell-meta {
    font-size: 0.6em;
    color: var(--text-muted);
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.prod-sell-btn {
    font-size: 0.62em;
    padding: 8px 10px;
    white-space: nowrap;
    border-radius: 9px;
}

/* --- Статус «мира» как поставщика сырья (v6.12.2) --- */
.prod-world {
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 0.64em;
    line-height: 1.45;
    border: 1px solid transparent;
}
.prod-world.on {
    background: #eef4ff;
    border-color: #b9c8f2;
    color: #3b4a99;
}
.prod-world.off {
    background: #fdecea;
    border-color: #e74c3c;
    color: var(--tone-red-fg);
}
.prod-world-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    font-size: 1.06em;
}
.prod-world-count {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0 6px;
    font-weight: 800;
}
.prod-world-text { margin-top: 3px; opacity: 0.9; }

/* --- Продавцы сырья на бирже (v6.12.2) --- */
.prod-sellers {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 10px;
}
.prod-sellers-head {
    font-size: 0.74em;
    font-weight: 800;
    margin-bottom: 6px;
}
.prod-seller-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62em;
    padding: 4px 0;
    border-top: 1px solid #f0f0f0;
    min-width: 0;
}
.prod-seller-ico { font-size: 1.15em; }
.prod-seller-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prod-seller-tag {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-muted);
    background: #f0f0f0;
    border-radius: 6px;
    padding: 0 5px;
    white-space: nowrap;
}
.prod-seller-qty { color: var(--text-muted); white-space: nowrap; }
.prod-seller-price { font-weight: 800; white-space: nowrap; }

/* --- Сводка «что у тебя есть» на бирже --- */
.prod-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.prod-sum-row {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 13px;
    padding: 10px 12px;
    cursor: pointer;
    transition: var(--transition);
}
.prod-sum-row:hover { border-color: #0f766e; box-shadow: 0 4px 14px rgba(15, 118, 110, 0.12); }
.prod-sum-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.prod-sum-title { font-size: 0.8em; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-sum-biz {
    font-size: 0.6em;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.prod-sum-qty {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.prod-sum-cell {
    flex: 1;
    min-width: 0;
    background: #f7f9f9;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 8px;
    text-align: center;
}
.prod-sum-cell-lbl { font-size: 0.58em; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-sum-cell-val { font-size: 0.86em; font-weight: 800; margin-top: 2px; }
.prod-sum-foot {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.62em;
    color: var(--text-muted);

/* ==========================================================================
   «ГИД» БИРЖИ ПРОИЗВОДСТВ (v6.12.2)
   Полное стратегическое описание вместо свёрнутого аккордеона.
   ========================================================================== */
.prod-guide { display: flex; flex-direction: column; gap: 8px; }
.prod-guide-hero {
    background: linear-gradient(135deg, #0f766e, #16a085);
    color: #fff;
    border-radius: 14px;
    padding: 12px 14px;
}
.prod-guide-hero-title { font-size: 0.9em; font-weight: 800; }
.prod-guide-hero-sub {
    font-size: 0.66em;
    line-height: 1.55;
    margin-top: 5px;
    opacity: 0.95;
}
.prod-guide-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 13px;
    padding: 10px 12px;
}
.prod-guide-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76em;
    font-weight: 800;
    margin-bottom: 6px;
}
.prod-guide-row {
    font-size: 0.66em;
    line-height: 1.55;
    color: #444;
    padding: 5px 0;
    border-top: 1px dashed #eee;
    overflow-wrap: anywhere;
}
.prod-guide-row b { color: var(--text); }
.prod-guide-steps {
    background: #fff;
    border: 1px solid #cdeae4;
    border-radius: 13px;
    padding: 10px 12px;
}
.prod-guide-step {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.66em;
    line-height: 1.5;
    color: #444;
    padding: 5px 0;
}
.prod-guide-step-num {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f766e, #16a085);
    color: #fff;
    font-size: 0.9em;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Мобильные правки */
@media (max-width: 480px) {
    .prod-tab { font-size: 0.64em; padding: 8px 6px; }
    .prod-sum-cell-val { font-size: 0.8em; }
    .prod-strip { padding: 8px 6px; gap: 4px; }
    .prod-strip-lbl { font-size: 0.48em; }
    .prod-strip-val { font-size: 0.68em; }
    .prod-quick .btn { min-width: 84px; font-size: 0.62em; }
}

}

/* --- Пустое состояние --- */
.prod-empty {
    text-align: center;
    padding: 26px 16px;
    background: #fff;
    border: 1px dashed #d8d8d8;
    border-radius: 14px;
    margin-bottom: 10px;
}

/* ==========================================================================
   «ГЕРОЙ» ЛИНИИ ПРОИЗВОДСТВА (v6.12.1)
   Ключевые цифры линии в один взгляд: состояние, метрики, полосы складов.
   ========================================================================== */
.prod-hero {
    background: linear-gradient(135deg, #ffffff, #f4fbfa);
    border: 1px solid #cdeae4;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(15, 118, 110, 0.06);
}
.prod-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.prod-hero-line { font-size: 0.88em; font-weight: 800; min-width: 0; }

/* v6.13.0: рецепт линии и место в цепочке (готовый товар = сырьё). */
.prod-recipe {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f7f9ff;
    border: 1px solid #dfe6f7;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.prod-recipe-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 0.72em;
    font-weight: 700;
    color: var(--text-secondary);
}
.prod-recipe-cell { white-space: nowrap; }
.prod-recipe-arrow { color: #667eea; font-weight: 800; }
.prod-recipe-note {
    font-size: 0.62em;
    line-height: 1.45;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
.prod-recipe-note.ok { color: var(--tone-green-fg); }
.prod-hero-arrow { color: #16a085; margin: 0 4px; }
.prod-hero-state {
    font-size: 0.62em;
    font-weight: 800;
    border-radius: 9px;
    padding: 4px 9px;
    white-space: nowrap;
}
.prod-hero-state.ok { background: #e8f8f0; color: var(--tone-green-fg); border: 1px solid #27ae60; }
.prod-hero-state.warn { background: #fdecea; color: var(--tone-red-fg); border: 1px solid #e74c3c; }

/* v6.15.0: цепочка дня — сырьё → станок → склад → касса. */
.prod-flow {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin-top: 10px;
}
.prod-flow-arrow {
    align-self: center;
    color: var(--text-muted);
    font-size: 0.8em;
    flex: 0 0 auto;
}
.prod-flow-step {
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border: 1px solid #e6f4f1;
    border-radius: 11px;
    padding: 6px 4px;
    text-align: center;
}
.prod-flow-step.warn { border-color: #f3c0ba; background: #fff6f5; }
.prod-flow-icon { font-size: 1em; line-height: 1.2; }
.prod-flow-lbl {
    font-size: 0.52em;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prod-flow-val { font-size: 0.82em; font-weight: 800; margin-top: 1px; overflow-wrap: anywhere; }
.prod-flow-step.warn .prod-flow-val { color: var(--tone-red-fg); }
.prod-flow-hint {
    font-size: 0.48em;
    color: var(--text-muted);
    margin-top: 1px;
    overflow-wrap: anywhere;
}
.prod-flow-note {
    margin-top: 8px;
    font-size: 0.58em;
    line-height: 1.45;
    color: var(--text-muted);
    background: #f7fbfa;
    border-left: 3px solid #b8dfd6;
    border-radius: 0 8px 8px 0;
    padding: 5px 8px;
}
.prod-flow-note.warn {
    color: var(--tone-red-fg);
    background: #fdecea;
    border-left-color: #e74c3c;
}

.prod-hero-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.prod-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.62em;
    color: var(--text-muted);
}
.prod-bar-head b { color: var(--text); }
.prod-bar-track {
    height: 7px;
    background: #e8eeed;
    border-radius: 4px;
    margin-top: 4px;
    overflow: hidden;
}
.prod-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }

.prod-hero-foot {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 0.6em;
    color: var(--text-muted);
}
.prod-hero-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    background: #fdecea;
    border: 1px solid #e74c3c;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.66em;
    color: var(--tone-red-fg);
}

@media (max-width: 380px) {
    .prod-flow { gap: 2px; }
    .prod-flow-step { padding: 5px 2px; }
    .prod-flow-val { font-size: 0.72em; }
}

/* ===== Businessman visual refresh — 2026-10-31 ===== */
body:not(.crime-mode) { --ui-ink:#0f172a; --ui-ink-2:#334155; --ui-muted:#64748b; --ui-line:#e2e8f0; --ui-surface:#ffffff; --ui-surface-2:#f8fafc; --ui-accent:#087f6f; --ui-accent-soft:#ecfdf5; }
body:not(.crime-mode) { background:var(--bg); color:var(--ui-ink); }
body:not(.crime-mode) .card { background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:var(--radius,14px); box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.05); }
body:not(.crime-mode) .card-title { color:var(--ui-ink); font-weight:650; letter-spacing:.01em; }
body:not(.crime-mode) .card-header { border-bottom:1px solid var(--ui-line); }
body:not(.crime-mode) .biz-card { background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:var(--radius,14px); }
body:not(.crime-mode) .biz-header { border-bottom:1px solid var(--ui-line); }
body:not(.crime-mode) .biz-title { color:var(--ui-ink); font-weight:650; }
body:not(.crime-mode) .biz-tab { color:var(--ui-muted); border-radius:10px; min-height:36px; }
body:not(.crime-mode) .biz-tab.active { color:var(--ui-accent); background:var(--ui-accent-soft); }
body:not(.crime-mode) .biz-badge, body:not(.crime-mode) .card-badge { /* статусные цвета не трогаем */ }
body:not(.crime-mode) .biz-content { color:var(--ui-ink-2); }
body:not(.crime-mode) .new-biz-row { display:flex; align-items:center; gap:12px; padding:12px; background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:12px; }
body:not(.crime-mode) .new-biz-row + .new-biz-row { margin-top:8px; }
body:not(.crime-mode) .new-biz-icon { width:42px; height:42px; min-width:42px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--ui-surface-2); border:1px solid var(--ui-line); }
body:not(.crime-mode) .new-biz-icon .ico, body:not(.crime-mode) .new-biz-icon svg { width:28px; height:28px; }
body:not(.crime-mode) .new-biz-info { display:flex; flex-direction:row; align-items:center; gap:12px; min-width:0; }
body:not(.crime-mode) .new-biz-desc { color:var(--ui-muted); font-size:.85em; line-height:1.35; }
body:not(.crime-mode) .new-biz-stats { display:flex; gap:12px; color:var(--ui-ink-2); font-variant-numeric:tabular-nums; }
body:not(.crime-mode) .new-biz-cost { color:var(--ui-ink); font-weight:650; }
body:not(.crime-mode) .new-biz-income { color:var(--ui-accent); font-weight:650; }
body:not(.crime-mode) .btn { min-height:44px; border-radius:12px; font-weight:600; padding:0 16px; transition:background .15s var(--ease,ease),border-color .15s; }
body:not(.crime-mode) .btn-primary { background:var(--ui-accent); border:1px solid var(--ui-accent); color:#fff; }
body:not(.crime-mode) .btn-primary:hover { background:#047857; border-color:#047857; }
body:not(.crime-mode) .btn-primary:active { transform:translateY(1px); }
body:not(.crime-mode) .btn-dark { background:var(--ui-ink); border:1px solid var(--ui-ink); color:#fff; }
body:not(.crime-mode) .btn-sm { min-height:44px; padding:0 12px; }
body:not(.crime-mode) .btn:disabled { opacity:.55; cursor:not-allowed; }
body:not(.crime-mode) .nav-btn { color:var(--ui-muted); }
body:not(.crime-mode) .nav-btn.active { color:var(--ui-accent); }
body:not(.crime-mode) .nav-btn.active .nav-label { color:var(--ui-accent); font-weight:650; }
body:not(.crime-mode) .nav-btn:active { transform:scale(.97); }
body:not(.crime-mode) .biz-empty-state { background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:var(--radius,14px); }
body:not(.crime-mode) .biz-empty-title { color:var(--ui-ink); font-weight:650; }
body:not(.crime-mode) .biz-empty-hint { color:var(--ui-muted); }
body:not(.crime-mode) .biz-ico-inline { vertical-align:-.15em; margin-right:6px; }
body:not(.crime-mode) .biz-header-stats { display:flex; gap:16px; flex-wrap:wrap; }
body:not(.crime-mode) .biz-header-stat-label { color:var(--ui-muted); font-size:.78em; }
body:not(.crime-mode) .biz-header-stat-value { font-variant-numeric:tabular-nums; font-weight:650; }
body:not(.crime-mode) .biz-header-stat-value.positive { color:var(--ui-accent); }
body:not(.crime-mode) .biz-header-stat-value.negative { color:var(--tone-red-fg,#a8281c); }
body:not(.crime-mode) .tut-card { background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:16px; box-shadow:0 8px 24px rgba(15,23,42,.10); max-height:calc(100dvh - 32px); overflow:auto; padding:20px; color:var(--ui-ink); }
body:not(.crime-mode) .tut-title { color:var(--ui-ink); font-weight:650; }
body:not(.crime-mode) .tut-body { color:var(--ui-ink-2); line-height:1.5; }
body:not(.crime-mode) .tut-btn { background:var(--ui-accent); color:#fff; border:1px solid var(--ui-accent); min-height:44px; border-radius:12px; }
body:not(.crime-mode) .tut-btn:hover { background:#047857; }
body:not(.crime-mode) .tut-btn::after { display:none; }
body:not(.crime-mode) .tut-count { color:var(--ui-muted); }
body:not(.crime-mode) .prod-quick .btn, body:not(.crime-mode) .prod-actions-grid .btn { min-height:44px; }
@media (max-width:390px) {
  body:not(.crime-mode) .new-biz-row { flex-wrap:wrap; padding:10px; }
  body:not(.crime-mode) .new-biz-stats { gap:8px; }
  body:not(.crime-mode) .biz-tab { padding:0 10px; }
  body:not(.crime-mode) .new-biz-icon { width:40px; height:40px; min-width:40px; }
}
@media (max-width:320px) {
  body:not(.crime-mode) .new-biz-row { gap:8px; }
  body:not(.crime-mode) .btn { padding:0 12px; }
  body:not(.crime-mode) .biz-header-stats { gap:10px; }
}
@media (orientation:landscape) and (max-height:500px) {
  body:not(.crime-mode) .tut-card { max-height:88vh; padding:14px; }
  body:not(.crime-mode) .new-biz-row { padding:8px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.crime-mode) .btn, body:not(.crime-mode) .nav-btn, body:not(.crime-mode) .biz-tab { transition:none; }
  body:not(.crime-mode) .btn:active, body:not(.crime-mode) .nav-btn:active, body:not(.crime-mode) .btn-primary:active { transform:none; }
}
body:not(.crime-mode) { --primary:#087f6f; --primary-dark:#06685c; --primary-light:#399c8e; --accent:#087f6f; --accent-dark:#06685c; --shadow-primary:0 3px 10px rgba(8,127,111,.16); --bg:#f4f7f8; --text:#172b35; }
body:not(.crime-mode) .sub-tab-btn { min-height:48px; }
body:not(.crime-mode) .sub-tab-btn.active { background:#087f6f; border-color:#087f6f; box-shadow:0 2px 8px rgba(8,127,111,.13); }
body:not(.crime-mode) .new-biz-text { min-width:0; }
body:not(.crime-mode) .new-biz-name { line-height:1.35; }
body:not(.crime-mode) .new-biz-icon { color:#203e48; }
body:not(.crime-mode) .new-biz-btn { min-height:44px; }
body:not(.crime-mode) .tut-icon { width:48px; height:48px; margin-bottom:10px; background:#edf8f5; color:#087f6f; border-radius:14px; animation:none; box-shadow:none; }
body:not(.crime-mode) .tut-icon .ico { width:30px; height:30px; }
body:not(.crime-mode) .tut-bar > i { background:#087f6f; box-shadow:none; }
body:not(.crime-mode) .tut-count { color:#087565; background:#edf8f5; }
body:not(.crime-mode) .tut-back { min-width:36px; min-height:36px; }
body:not(.crime-mode) .tut-skip { min-height:44px; color:#526570; }
body:not(.crime-mode) .tut-btn--later { background:#edf8f5; color:#06685c; border-color:#c5e6dd; }
body:not(.crime-mode) .tut-btn--later:hover { color:#fff; }
body:not(.crime-mode) .tut-wait { color:#526570; }
body:not(.crime-mode) :is(button,[tabindex]):focus-visible { outline:3px solid #0b8f7d; outline-offset:3px; }
@media(max-width:560px) {
 body:not(.crime-mode) .new-biz-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
 body:not(.crime-mode) .new-biz-info { grid-column:1 / -1; }
 body:not(.crime-mode) .new-biz-stats { align-items:flex-start; text-align:left; gap:3px; }
 body:not(.crime-mode) .new-biz-btn-wrapper { justify-self:end; max-width:100%; }
 body:not(.crime-mode) .new-biz-btn-wrapper .btn { font-size:12px; }
 body:not(.crime-mode) .new-biz-desc { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
 .tut-card,.tut-icon,.tut-ring,.tut-pointer__arrow,.tut-success,.tut-confetti i { animation:none !important; }
}

body:not(.crime-mode) .tut-btn, body:not(.crime-mode) .tut-btn:hover { box-shadow:0 3px 8px rgba(8,127,111,.15); }
body:not(.crime-mode) .nav-btn.active:not([data-tab="premium"]) { background:#edf8f5; }
body:not(.crime-mode) .nav-btn.active .nav-icon { filter:none; }
body:not(.crime-mode) .tut-card:focus-visible { outline:none; }