/* === Неоновая вики героев (совместимо с hero-grid) === */
:root {
    /* Стекломорфизм */
    --glass-bg: rgba(15, 23, 42, 0.5);
    --glass-bg-hover: rgba(15, 23, 42, 0.65);
    --glass-blur: 12px;
    --glass-border: rgba(0, 230, 255, 0.12);
    --glass-border-hover: rgba(0, 230, 255, 0.35);
    /* Тонкие фоны для подзаголовков, кнопок, тегов */
    --glass-subtle: rgba(0, 255, 255, 0.04);
    --glass-subtle-hover: rgba(0, 255, 255, 0.08);
    --glass-tag-bg: rgba(0, 255, 255, 0.06);
    --glass-tag-border: rgba(0, 255, 255, 0.15);
    --glass-tag-active: rgba(0, 255, 255, 0.15);
    /* Текстовые цвета */
    --text-primary: #e0f0ff;
    --text-secondary: #8aa0c0;
    --text-muted: #6b7c99;
    --text-dim: #5a7a9a;
    --accent-cyan: #00e6ff;
    /* Неоновый glow */
    --neon-glow: 0 0 20px rgba(0, 230, 255, 0.2), 0 0 60px rgba(0, 230, 255, 0.08);
    --neon-glow-strong: 0 0 20px rgba(0, 230, 255, 0.4), 0 0 60px rgba(0, 230, 255, 0.15), inset 0 0 15px rgba(0, 230, 255, 0.03);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
}

body {
    background: #0b0e14;
    background-image: radial-gradient(circle at 30% 10%, #1a2330 0%, #05070a 100%);
    color: #e3e9f5;
    padding: 24px 32px;
    line-height: 1.5;
}

.wiki-container {
    max-width: 1400px;
    margin: 0 auto;
    background: rgba(10, 20, 40, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 230, 255, 0.08);
    border-radius: 16px;
    padding: 24px 28px;
    margin-top: 16px;
    margin-bottom: 24px;
}

h1 {
    font-size: 2.4rem;
    font-weight: 600;
    border-bottom: 2px solid #00e6ff;
    padding-bottom: 12px;
    margin-bottom: 24px;
    color: #ffffff;
    text-shadow: 0 0 12px #00e6ff88, 0 0 25px #00e6ff44;
    letter-spacing: 1px;
    /* Shimmer-перелив на заголовках */
    background: linear-gradient(90deg, #fff 0%, #00e6ff 45%, #fff 55%, #00e6ff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShimmer 6s ease-in-out infinite;
}

/* === Фильтры === */
.filters {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 30px 0;
    flex-wrap: wrap;
}
.filter-btn {
    background: #0f1a2b;
    border: 1px solid #2a5070;
    color: #b0c8f0;
    padding: 12px 24px;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 10px #00e6ff33;
    transition: 0.15s;
    text-transform: uppercase;
}
.filter-btn i { margin-right: 8px; }
.filter-btn:hover {
    background: #1a3050;
    color: white;
    box-shadow: 0 0 20px #00e6ffaa;
    border-color: #00e6ff;
}
.filter-btn.active {
    background: #00e6ff;
    border-color: white;
    color: #0b0e14;
    box-shadow: 0 0 25px #00e6ff;
}

/* === Сетка героев (4 в ряд) === */
.hero-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 20px;
    padding-top: 24px;
}
@media (max-width: 1200px) {
    .hero-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
    .hero-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .hero-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === Карточка героя === */
.hero-card {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: 12px;
    padding: 8px 8px 8px;
    text-align: center;
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 15px #00000080, 0 0 0 1px #00e6ff22 inset;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #d0e0ff;
    text-decoration: none;
    display: block;
}
.hero-card:hover {
    transform: translateY(-5px);
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow-strong);
}

/* Градиентная рамка при hover */
.hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, #00e6ff, #0080ff, #00e6ff);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.hero-card:hover::before {
    opacity: 1;
}

/* Цветные акценты по атрибуту */
.hero-card.strength    { border-bottom: 4px solid #ff5555; box-shadow: 0 0 15px #ff555555, 0 0 0 1px #00e6ff22 inset; }
.hero-card.agility     { border-bottom: 4px solid #55ff55; box-shadow: 0 0 15px #55ff5555, 0 0 0 1px #00e6ff22 inset; }
.hero-card.intelligence{ border-bottom: 4px solid #55aaff; box-shadow: 0 0 15px #55aaff55, 0 0 0 1px #00e6ff22 inset; }

.hero-image {
    width: 100%;
    height: 90px;
    background-color: #1e1e2a;
    border-radius: 10px;
    border: 2px solid #00e6ff66;
    box-shadow: inset 0 0 15px #000, 0 0 15px #00e6ff66;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
.hero-image.no-icon {
    font-size: 48px;
    color: #2a5070;
}
.hero-image.no-icon::after {
    content: '\f71d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 36px;
    color: #2a5070;
}
.hero-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 0 8px #00e6ff;
    margin-bottom: 1px;
    line-height: 1.2;
}
.hero-title {
    font-size: 0.68rem;
    color: #a0b5d0;
    margin-bottom: 4px;
}
.hero-attr-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    background: #162433;
    border: 1px solid;
}
.hero-card.strength .hero-attr-badge    { border-color: #ff5555; color: #ffaaaa; }
.hero-card.agility .hero-attr-badge     { border-color: #55ff55; color: #aaffaa; }
.hero-card.intelligence .hero-attr-badge{ border-color: #55aaff; color: #aaccff; }
.unique-badge {
    position: absolute;
    top: 8px;
    right: 40px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1a1a2e;
    border: 1px solid #ffd966;
    color: #ffd966;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px #ffd96666;
    z-index: 2;
}
.hero-card:hover .unique-badge {
    background: #ffd966;
    color: #0b0e14;
    box-shadow: 0 0 15px #ffd966aa;
}

.wip-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(10, 14, 20, 0.85);
    border: 1px solid #ff8844aa;
    color: #ff8844;
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    pointer-events: none;
    z-index: 2;
}

.hero-card:hover .wip-badge {
    background: rgba(255, 136, 68, 0.15);
    box-shadow: 0 0 8px #ff884466;
}

/* === Страница героя (панель деталей) === */
.hero-page-container {
    max-width: 1000px;
    margin: 0 auto;
    background: rgba(18, 25, 40, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 24px;
    border: 1px solid #2a4060;
    box-shadow: 0 0 30px #00000080, 0 0 0 1px #00e6ff22 inset, 0 0 20px #00e6ff33;
    padding: 25px;
}
.hero-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0 22px;
}
.hero-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #2a5070;
    background: rgba(15, 26, 43, 0.9);
    color: #d0e0ff;
    text-decoration: none;
    box-shadow: 0 0 12px #00e6ff22;
    transition: 0.2s ease;
    flex: 0 0 auto;
}
.hero-nav-btn:hover {
    border-color: #00e6ff;
    box-shadow: 0 0 18px #00e6ff55;
    transform: translateY(-1px);
}
.hero-nav-btn i {
    color: #00e6ff;
    flex: 0 0 auto;
    font-size: 0.95rem;
}
.hero-nav-next {
    margin-left: auto;
}
.hero-nav-prev {
    margin-right: auto;
}
.breadcrumbs {
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #5a7a9a;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.breadcrumbs a {
    color: #00e6ff;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-shadow: 0 0 8px #00e6ff;
}
.breadcrumbs .sep {
    margin: 0 6px;
    color: #3a5070;
}
.breadcrumbs .current {
    color: #c0e4ff;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}
.detail-icon {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 30% 20%, #1e3a5a, #0e1a2b);
    border-radius: 20px;
    border: 2px solid #00e6ff;
    box-shadow: 0 0 20px #00e6ff66;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: white;
    overflow: hidden;
}
.detail-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    border-radius: 18px;
}
.detail-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 0 12px #00e6ffcc;
}
.detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.detail-badge {
    display: inline-block;
    background: #1e3a5a;
    padding: 4px 14px;
    border-radius: 40px;
    font-size: 0.9rem;
    margin-left: 0;
    color: #c0e4ff;
    border: 1px solid #00e6ff88;
}
.detail-badge.badge-danger {
    background: #3a1a1a;
    color: #ff4444;
    border-color: #ff444488;
}
.detail-description {
    color: #b8cef0;
    margin: 20px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #2a4060;
}
.hero-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px 0;
    background: #101a28;
    padding: 15px 20px;
    border-radius: 12px;
}
.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c0d4ff;
}
.stat-value {
    font-weight: bold;
    color: white;
}
.recipe-title {
    font-size: 1rem;
    font-weight: 500;
    color: #00e6ff;
    margin: 25px 0 15px;
    text-shadow: 0 0 8px #00e6ffaa;
}

/* === Рекомендуемые предметы === */
.hero-build-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin: 12px 0 20px;
}
.build-slot {
    background: #0a0f1a;
    border: 1px solid #2a5070;
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    transition: 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.build-slot:hover {
    border-color: #00e6ff;
    box-shadow: 0 0 12px #00e6ff44;
    transform: translateY(-2px);
}
.build-slot .build-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.build-slot .build-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: auto;
    border-radius: 8px;
}
.build-slot .build-name {
    font-size: 0.65rem;
    color: #b0c4de;
    line-height: 1.2;
    word-break: break-word;
}
@media (max-width: 700px) {
    .hero-build-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .hero-build-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .build-slot .build-icon { width: 36px; height: 36px; }
    .build-slot .build-icon img { width: 36px; height: 36px; }
    .build-slot .build-name { font-size: 0.6rem; }
}

/* === Тактика и советы === */
.hero-tips {
    background: #0a1018;
    border: 1px solid #1a3050;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 12px 0 20px;
}
.hero-tips h4 {
    color: #ffcc66;
    font-size: 0.95rem;
    margin-bottom: 8px;
    text-shadow: 0 0 6px #ffb34744;
}
.hero-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hero-tips li {
    color: #8aa0c0;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 4px 0 4px 18px;
    position: relative;
}
.hero-tips li::before {
    content: '›';
    position: absolute;
    left: 4px;
    color: #00e6ff;
    font-weight: 700;
}
.abilities-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}
.ability-card {
    background: #101a28;
    border-left: 4px solid #00e6ff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: inset 0 0 10px #00000055, 0 0 10px #00e6ff22;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ability-card:hover {
    box-shadow: inset 0 0 10px #00000055, 0 0 15px #00e6ff44;
}
.ability-card.passive:hover {
    box-shadow: inset 0 0 10px #00000055, 0 0 15px #bf7fff44;
}
.ability-card.ultimate:hover {
    box-shadow: inset 0 0 10px #00000055, 0 0 15px #ff8c0044;
}
.ability-card.innate:hover {
    box-shadow: inset 0 0 10px #00000055, 0 0 15px #00ff8844;
}
.ability-card.passive {
    border-left-color: #bf7fff;
    box-shadow: inset 0 0 10px #00000055, 0 0 10px #bf7fff22;
}
.ability-card.ultimate {
    border-left-color: #ff8c00;
    box-shadow: inset 0 0 10px #00000055, 0 0 10px #ff8c0022;
}
.ability-card.innate {
    border-left-color: #00ff88;
    box-shadow: inset 0 0 10px #00000055, 0 0 10px #00ff8822;
}
.ability-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.ability-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    border: 2px solid #00e6ffaa;
    background: radial-gradient(circle at 30% 20%, #1e3a5a, #0e1a2b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #00e6ff;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 10px #00e6ff44;
    position: relative;
}
.ability-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 10px;
}
.ability-card.passive .ability-icon {
    border-color: #bf7fffaa;
    box-shadow: 0 0 10px #bf7fff44;
    color: #bf7fff;
}
.ability-card.ultimate .ability-icon {
    border-color: #ff8c00aa;
    box-shadow: 0 0 10px #ff8c0044;
    color: #ff8c00;
}
.ability-hotkey {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #0b0e14;
    border: 2px solid #00e6ff88;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #00e6ff;
    flex-shrink: 0;
    text-shadow: 0 0 6px #00e6ff88;
    box-shadow: 0 0 8px #00e6ff44;
}
.ability-card.passive .ability-hotkey {
    color: #bf7fff;
    border-color: #bf7fffaa;
    text-shadow: 0 0 6px #bf7fff88;
    box-shadow: 0 0 8px #bf7fff44;
}
.ability-card.ultimate .ability-hotkey {
    color: #ff8c00;
    border-color: #ff8c00aa;
    text-shadow: 0 0 6px #ff8c0088;
    box-shadow: 0 0 8px #ff8c0044;
}
.ability-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.ability-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: #ffcc66;
    text-shadow: 0 0 6px #ffb347;
    line-height: 1.3;
}
.ability-type-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #1a2a40;
    color: #8ab4f0;
    border: 1px solid #2a5070;
}
.ability-card.passive .ability-type-badge {
    background: #2a1a3a;
    color: #bf7fff;
    border-color: #bf7fff66;
}
.ability-card.ultimate .ability-type-badge {
    background: #2a1a0a;
    color: #ff8c00;
    border-color: #ff8c0066;
}
.ability-card.innate .ability-type-badge {
    background: #0a2a1a;
    color: #00ff88;
    border-color: #00ff8866;
}
.ability-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 6px;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
.ability-tag.dispellable {
    background: #3a1a0a;
    color: #ff9944;
    border: 1px solid #ff994466;
}
.ability-tag.scepter {
    background: #1a0a2a;
    color: #bf7fff;
    border: 1px solid #bf7fff66;
}
.param-row.scepter-row {
    background: #1a0a2a;
    border: 1px solid #bf7fff44;
    border-radius: 8px;
    padding: 6px 10px;
    margin: 6px 0;
}
.param-row.scepter-row .param-label {
    color: #bf7fff;
}
.param-row.scepter-row .param-values {
    color: #e0b0ff;
}
.param-row.passive-row {
    background: #0a1a1a;
    border: 1px solid #00cc6644;
    border-radius: 8px;
    padding: 6px 10px;
    margin: 6px 0;
}
.param-row.passive-row .param-label {
    color: #00cc66;
}
.param-row.passive-row .param-values {
    color: #66ffaa;
}
.ability-desc {
    color: #b0c4de;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 10px;
}
.ability-params {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-top: 8px;
    border-top: 1px solid #1e2a40;
}
.param-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}
.param-label {
    color: #7a8fa8;
    font-weight: 500;
    white-space: nowrap;
}
.param-label::after {
    content: ':';
}
.param-values {
    color: #e0f0ff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Подсветка ключевых параметров способностей */
.param-label.mana {
    color: #4da6ff;
}
.param-label.mana::before {
    content: '\f043';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75em;
    margin-right: 2px;
}
.param-label.cooldown {
    color: #ffcc44;
}
.param-label.cooldown::before {
    content: '\f017';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    font-size: 0.75em;
    margin-right: 2px;
}
.param-label.damage {
    color: #ff5555;
}
.param-label.damage::before {
    content: '\f6de';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75em;
    margin-right: 2px;
}
.param-label.radius {
    color: #00e6ff;
}
.param-label.radius::before {
    content: '\f05b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75em;
    margin-right: 2px;
}
/* === Вкладки форм способностей === */
.form-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.form-tab {
    flex: 1;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: #8aa0c0;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.form-tab:hover {
    border-color: #00e6ff;
    color: #c0d4ff;
}
.form-tab.active {
    background: #1a2a45;
    border-color: #00e6ff;
    color: #00e6ff;
    box-shadow: 0 0 12px #00e6ff44;
}
.form-tab.active.alt-form {
    border-color: #bf7fff;
    color: #bf7fff;
    box-shadow: 0 0 12px #bf7fff44;
}
.form-abilities {
    display: none;
}
.form-abilities.active {
    display: block;
}
/* === Цикличные способности (Q с вариантами) === */
.ability-cycle-group {
    margin-bottom: 12px;
}
.cycle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-size: 0.8rem;
    color: #8aa0c0;
}
.cycle-label .cycle-key {
    background: #00e6ff22;
    color: #00e6ff;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.75rem;
}
.cycle-label .cycle-hint {
    margin-left: auto;
    color: #5a7a9a;
    font-size: 0.75rem;
}
.ability-cycle-group .ability-card {
    border-left: 3px solid #00e6ff44;
}
.ability-cycle-group .ability-card:nth-child(1) { border-left-color: #bf7fff; }
.ability-cycle-group .ability-card:nth-child(2) { border-left-color: #ff5555; }
.ability-cycle-group .ability-card:nth-child(3) { border-left-color: #55aaff; }
.ability-cycle-group .ability-card:nth-child(4) { border-left-color: #8800ff; }
.back-button, .back-link {
    display: inline-block;
    margin-top: 20px;
    background: #162433;
    border: 1px solid #00e6ffcc;
    color: #e0f0ff;
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 0 10px #00e6ff33;
    transition: 0.15s;
}
.back-button:hover, .back-link:hover {
    background: #00e6ff;
    border-color: white;
    color: #0b0e14;
    box-shadow: 0 0 25px #00e6ff;
}

/* === Мобильная адаптация карточки героя === */
@media (max-width: 700px) {
    .hero-page-container {
        padding: 16px;
        border-radius: 16px;
    }
    .panel-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .detail-icon {
        width: 72px;
        height: 72px;
        font-size: 36px;
        border-radius: 16px;
    }
    .detail-icon img {
        width: 56px;
        height: 56px;
    }
    .detail-title {
        font-size: 1.6rem;
    }
    .detail-badge {
        margin-left: 0;
        display: block;
        margin-top: 4px;
    }
    .hero-stats {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
    }
    .hero-stats-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ability-card {
        padding: 12px;
    }
    .ability-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .ability-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    .ability-icon img {
        width: 48px;
        height: 48px;
    }
    .ability-info {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }
    .ability-name {
        font-size: 0.95rem;
    }
    .ability-desc {
        font-size: 0.85rem;
    }
    .ability-params {
        flex-direction: column;
        gap: 4px;
    }
    .param-row {
        flex-wrap: wrap;
    }
    .param-label {
        white-space: normal;
    }
    .param-values {
        white-space: normal;
        word-break: break-word;
    }
    .param-row.scepter-row {
        padding: 8px;
    }
    .back-button {
        width: 100%;
        display: block;
    }
}
@media (max-width: 480px) {
    .hero-page-container {
        padding: 10px;
        border-radius: 12px;
    }
    .detail-title {
        font-size: 1.3rem;
    }
    .recipe-title {
        font-size: 0.95rem;
    }
    .hero-stats-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 12px 0;
    }
    .hero-stats-table th,
    .hero-stats-table td {
        padding: 8px;
        font-size: 0.8rem;
    }
    .hero-build-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .hero-tips {
        padding: 14px 16px;
    }
    .ability-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .ability-icon img {
        width: 40px;
        height: 40px;
    }
    .ability-name {
        font-size: 0.9rem;
    }
    .ability-type-badge {
        font-size: 0.6rem;
        padding: 1px 6px;
    }
    .ability-tag {
        font-size: 0.55rem;
        padding: 1px 5px;
    }
}

/* === Кнопка «Наверх» === */

/* === Страница Лор === */
.lore-section {
    margin-bottom: 30px;
}
.lore-title {
    font-size: 1.8rem;
    color: #00e6ff;
    margin-bottom: 15px;
    text-shadow: 0 0 8px #00e6ffaa;
    border-left: 4px solid #00e6ff;
    padding-left: 20px;
    position: relative;
}
/* Shimmer-свип по левой границе заголовка */
.lore-title::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, transparent, #55ffff, transparent);
    background-size: 100% 200%;
    animation: loreBorderShimmer 3s ease-in-out infinite;
    border-radius: 2px;
}
@keyframes loreBorderShimmer {
    0%, 100% { background-position: 0 -100%; opacity: 0.4; }
    50% { background-position: 0 200%; opacity: 1; }
}
.lore-text {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: #c0d4ff;
    line-height: 1.7;
    font-size: 1.05rem;
    padding: 20px 25px;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 0 15px #00000055, 0 0 15px #00e6ff22;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
.lore-text:hover {
    border-color: var(--glass-border-hover);
    box-shadow: inset 0 0 15px #00000055, 0 0 25px #00e6ff44;
}
/* Блик-свип при hover */
.lore-text::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(120deg, transparent 30%, rgba(0,230,255,0.06) 50%, transparent 70%);
    background-size: 200% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.lore-text:hover::after {
    opacity: 1;
    animation: sparkleSweep 0.6s ease-out;
}
.lore-highlight {
    color: #ffd966;
    font-weight: 600;
}
.call-to-action {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 2px solid var(--glass-border-hover);
    border-radius: 20px;
    padding: 25px;
    margin-top: 30px;
    box-shadow: var(--neon-glow-strong);
    position: relative;
    overflow: hidden;
}
.call-to-action::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(0, 230, 255, 0.04) 35%,
        rgba(0, 128, 255, 0.03) 40%,
        transparent 45%
    );
    animation: auroraShift 8s ease-in-out infinite;
    pointer-events: none;
}
.cta-title {
    font-size: 1.5rem;
    color: #ffd966;
    margin-bottom: 12px;
}
/* Режимы игры */
.modes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.mode-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: 0.25s ease;
    box-shadow: inset 0 0 15px #00000055, 0 0 15px #00e6ff22;
}
.mode-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow);
    transform: translateY(-3px);
}
.mode-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}
.mode-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e0f0ff;
    margin-bottom: 6px;
}
.mode-desc {
    font-size: 0.85rem;
    color: #8aa0c0;
    line-height: 1.4;
}

/* Цветовые акценты карточек режимов */
.mode-spell-half .mechanic-icon {
    background: #2a0a1a;
    border: 1px solid #ff555544;
    color: #ff5555;
}
.mode-bosses .mechanic-icon {
    background: #1a0a2a;
    border: 1px solid #bf7fff44;
    color: #bf7fff;
}
.mode-gold-loss .mechanic-icon {
    background: #2a1a0a;
    border: 1px solid #ff994444;
    color: #ff9944;
}
.mode-turbo .mechanic-icon {
    background: #0a2a1a;
    border: 1px solid #55ff8844;
    color: #55ff88;
}
.mode-no-books .mechanic-icon {
    background: #0a1a2a;
    border: 1px solid #55aaff44;
    color: #55aaff;
}
.mode-team-rewards .mechanic-icon {
    background: #1a1a0a;
    border: 1px solid #aaaa4444;
    color: #aaaa44;
}
.mode-solo .mechanic-icon {
    background: #2a0a0a;
    border: 1px solid #ff444444;
    color: #ff4444;
}
.mode-hero-ban .mechanic-icon {
    background: #1a0a1a;
    border: 1px solid #aa44aa44;
    color: #aa44aa;
}
.mode-random-hero .mechanic-icon {
    background: #0a1a1a;
    border: 1px solid #55ffcc44;
    color: #55ffcc;
}

.scroll-top-btn {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #00e6ffaa;
    background: #0f172aee;
    color: #00e6ff;
    font-size: 18px;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s, background 0.15s, box-shadow 0.15s;
    box-shadow: 0 0 12px #00e6ff44;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.scroll-top-btn:hover {
    background: #00e6ff;
    color: #0b0e14;
    box-shadow: 0 0 25px #00e6ff;
}

/* === Шапка сайта (адаптивная) === */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: clamp(16px, 2.5vw, 26px) clamp(16px, 3vw, 32px);
    margin-bottom: clamp(20px, 3vw, 32px);
    border: 1px solid #2a4060;
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.86);
    box-shadow: 0 0 30px #00000055, 0 0 20px #00e6ff22;
    backdrop-filter: blur(8px);
    min-height: 68px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    transition: 0.2s;
    flex-shrink: 0;
    min-width: 0;
}
.logo:hover {
    text-shadow: 0 0 15px #00e6ff;
}
.logo-icon {
    width: 48px;
    height: 48px;
    background: radial-gradient(circle at 30% 20%, #1e3a5a, #0e1a2b);
    border-radius: 14px;
    border: 2px solid #00e6ff;
    box-shadow: 0 0 15px #00e6ff88, inset 0 0 8px #00e6ff44;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #00e6ff;
}
.logo-text {
    font-size: clamp(1.15rem, 1.4vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    text-shadow: 0 0 12px #00e6ffaa;
    line-height: 1.1;
}
.logo-text small {
    font-size: 0.8rem;
    font-weight: 400;
    color: #aac8ff;
    margin-left: 8px;
    text-shadow: none;
}

.header-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 0;
    flex: 1 1 520px;
    min-width: 0;
}
.nav-link {
    color: #b0c8f0;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 30px;
    border: 1px solid transparent;
    transition: 0.15s;
    background: #0f1a2b;
    box-shadow: 0 0 8px #00e6ff33;
    font-size: 0.84rem;
    white-space: nowrap;
    line-height: 1.35;
}
.nav-link i {
    margin-right: 5px;
}
.nav-link:hover {
    background: #1a3050;
    border-color: #00e6ff;
    color: white;
    box-shadow: 0 0 20px #00e6ffaa;
}
.nav-link.active {
    background: #00e6ff;
    border-color: white;
    color: #0b0e14;
    box-shadow: 0 0 20px #00e6ff;
}
.nav-download {
    color: #0b0e14;
    text-decoration: none;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 30px;
    border: 1px solid #00ff88;
    transition: 0.15s;
    background: linear-gradient(135deg, #00cc66, #00ff88);
    box-shadow: 0 0 12px #00ff8866;
    font-size: 0.84rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1.35;
}
.nav-download i {
    margin-right: 5px;
}
.nav-download:hover {
    box-shadow: 0 0 25px #00ff88aa;
    transform: translateY(-1px);
}

/* === Главная страница === */
.changelog-section {
    margin-bottom: 40px;
}
.version-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    transition: 0.25s ease;
    position: relative;
}
.version-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow);
    transform: translateY(-2px);
}
.version-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.version-badge {
    background: #00e6ff;
    color: #0b0e14;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
}
.version-badge.hot {
    background: #ff5555;
    color: #fff;
}
.version-date {
    color: #5a7a9a;
    font-size: 0.85rem;
}
.version-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #e0f0ff;
}
.change-list {
    list-style: none;
    padding: 0;
}
.change-list li {
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
    color: #b0c4de;
    font-size: 0.9rem;
    line-height: 1.5;
}
.change-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.change-list li.new::before { background: #00ff88; }
.change-list li.fix::before { background: #ff9944; }
.change-list li.balance::before { background: #ff5555; }
.change-list li.rework::before { background: #bf7fff; }

@media (max-width: 500px) {
    .changelog-section {
        margin-bottom: 28px;
    }
    .version-card {
        padding: 18px;
    }
    .version-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 12px;
    }
    .version-title {
        font-size: 1rem;
    }
    .version-date {
        font-size: 0.78rem;
    }
    .change-list li {
        font-size: 0.82rem;
        line-height: 1.45;
        padding-left: 18px;
    }
    .change-list li::before {
        top: 12px;
    }
}

/* === Механики === */
.mechanics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
    max-width: 1000px;
}
.mechanics-calc-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
@media (max-width: 800px) {
    .mechanics-grid { grid-template-columns: 1fr; }
    .mechanics-calc-links { gap: 8px; }
}
@media (max-width: 500px) {
    .mechanic-card {
        padding: 18px;
    }
    .mechanic-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
    .mechanic-card h3 {
        font-size: 1rem;
    }
    .mechanic-card p {
        font-size: 0.85rem;
    }
    .mechanic-formula {
        padding: 10px 12px;
        font-size: 0.78rem;
        overflow-wrap: anywhere;
    }
    .mechanics-calc-links .calc-link-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}
.mechanic-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    transition: 0.25s ease;
}
.mechanic-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow);
}
.mechanic-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

/* Цветные акценты иконок механик */
.mech-luck .mechanic-icon {
    background: #1a2a0a;
    border: 1px solid #00ff8844;
    color: #00ff88;
}
.mech-magic-crit .mechanic-icon {
    background: #2a0a1a;
    border: 1px solid #ff555544;
    color: #ff5555;
}
.mech-magic-vamp .mechanic-icon {
    background: #1a0a2a;
    border: 1px solid #bf7fff44;
    color: #bf7fff;
}
.mech-armor .mechanic-icon {
    background: #0a1a2a;
    border: 1px solid #55aaff44;
    color: #55aaff;
}
.mech-block .mechanic-icon {
    background: #0a1a2a;
    border: 1px solid #55aaff44;
    color: #55aaff;
}
.mech-stun-resist .mechanic-icon {
    background: #2a1a0a;
    border: 1px solid #ff994444;
    color: #ff9944;
}
.mech-phys-vamp .mechanic-icon {
    background: #2a0a0a;
    border: 1px solid #ff444444;
    color: #ff4444;
}
.mech-heal-reduce .mechanic-icon {
    background: #1a1a0a;
    border: 1px solid #aaaa4444;
    color: #aaaa44;
}
.mech-scepter .mechanic-icon {
    background: #1a0a2a;
    border: 1px solid #bf7fff44;
    color: #bf7fff;
}
.mech-spell-dmg .mechanic-icon {
    background: #2a0a1a;
    border: 1px solid #ff555544;
    color: #ff5555;
}
.mech-heal-amp .mechanic-icon {
    background: #0a2a1a;
    border: 1px solid #55ff8844;
    color: #55ff88;
}
.mech-magic-resist .mechanic-icon {
    background: #0a1a2a;
    border: 1px solid #55aaff44;
    color: #55aaff;
}
.mech-auto-build .mechanic-icon {
    background: #2a1a0a;
    border: 1px solid #ff994444;
    color: #ff9944;
}
.mech-corruption .mechanic-icon {
    background: #1a0a1a;
    border: 1px solid #aa44aa44;
    color: #aa44aa;
}
.mech-dmg-return .mechanic-icon {
    background: #2a0a0a;
    border: 1px solid #ff664444;
    color: #ff6644;
}
.mech-dispel .mechanic-icon {
    background: #0a1a2a;
    border: 1px solid #55ccff44;
    color: #55ccff;
}
.mech-mana-burn-resist .mechanic-icon {
    background: #0a1a1a;
    border: 1px solid #55ffcc44;
    color: #55ffcc;
}
.mech-pure-dmg .mechanic-icon {
    background: #1a1a1a;
    border: 1px solid #ffffff44;
    color: #ffffff;
}
.mech-motivation .mechanic-icon {
    background: #2a1a2a;
    border: 1px solid #bf7fff44;
    color: #bf7fff;
}
.mechanic-card h3 {
    font-size: 1.1rem;
    color: #e0f0ff;
    margin-bottom: 8px;
}
.mechanic-card p {
    color: #8aa0c0;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 12px;
}
.mechanic-card code {
    word-break: break-all;
}
.mechanic-formula {
    background: #0a0f1a;
    border: 1px solid #1a3050;
    border-radius: 10px;
    padding: 12px 16px;
    font-family: 'Consolas', 'Courier New', monospace;
    color: #00e6ff;
    font-size: 0.85rem;
    margin-top: 8px;
}

/* Кнопка «Рассчитать» внутри карточки механики */
.mech-calc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--glass-border);
    color: #5a8aa0;
    font-size: 0.78rem;
    border-radius: 6px;
    padding: 4px 10px;
    margin-top: 8px;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.mech-calc-link:hover {
    border-color: #00e6ff;
    color: #00e6ff;
}

/* ===== Уникальные анимации карточек механик ===== */

/* --- Удача — кубик перекатывается --- */
@keyframes mechDiceRoll {
    0%   { transform: rotateY(0deg) scale(1); }
    30%  { transform: rotateY(180deg) scale(1.15); }
    60%  { transform: rotateY(360deg) scale(1.05); }
    100% { transform: rotateY(360deg) scale(1); }
}
.mech-luck .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mech-luck:hover .mechanic-icon i {
    animation: mechDiceRoll 0.6s ease-out;
}
.mech-luck .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(120deg, transparent 30%, rgba(0,255,136,0.15) 50%, transparent 70%);
    background-size: 200% 100%;
    opacity: 0;
    pointer-events: none;
}
.mech-luck:hover .mechanic-icon::after {
    opacity: 1;
    animation: sparkleSweep 0.6s ease-out;
}

/* --- Магический крит — вспышка молнии --- */
@keyframes mechLightningFlash {
    0%   { transform: scale(1); opacity: 1; filter: brightness(1); }
    15%  { transform: scale(1.35); opacity: 1; filter: brightness(2.5); }
    30%  { transform: scale(1.1); opacity: 0.8; filter: brightness(1.5); }
    45%  { transform: scale(1.25); opacity: 1; filter: brightness(2); }
    100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}
.mech-magic-crit .mechanic-icon i {
    display: inline-block;
    transition: transform 0.2s ease;
}
.mech-magic-crit:hover .mechanic-icon i {
    animation: mechLightningFlash 0.5s ease-out;
}
.mech-magic-crit:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(255,85,85,0.3) 0%, transparent 70%);
    animation: mechFlashFade 0.5s ease-out forwards;
    pointer-events: none;
}
@keyframes mechFlashFade {
    0%   { opacity: 1; transform: scale(0.8); }
    100% { opacity: 0; transform: scale(1.4); }
}

/* --- Магический вампиризм — пульс высасывания --- */
@keyframes mechDrainPulse {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.85); }
    50%  { transform: scale(1.1); }
    75%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.mech-magic-vamp .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mech-magic-vamp:hover .mechanic-icon i {
    animation: mechDrainPulse 0.8s ease-in-out;
}
.mech-magic-vamp .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    border: 2px solid rgba(191,127,255,0.3);
    opacity: 0;
    pointer-events: none;
}
.mech-magic-vamp:hover .mechanic-icon::after {
    opacity: 1;
    animation: mechDrainRing 0.8s ease-out;
}
@keyframes mechDrainRing {
    0%   { inset: 0; opacity: 0.8; }
    100% { inset: -10px; opacity: 0; }
}

/* --- Броня — металлический блик --- */
@keyframes mechSheenSweep {
    0%   { left: -100%; }
    100% { left: 200%; }
}
.mech-armor .mechanic-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(85,170,255,0.25), transparent);
    border-radius: 12px;
    pointer-events: none;
}
.mech-armor:hover .mechanic-icon::after {
    animation: mechSheenSweep 0.5s ease-out;
}
.mech-armor .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mech-armor:hover .mechanic-icon i {
    transform: scale(1.08);
}

/* --- Блок урона — тряска от удара --- */
@keyframes mechBlockShake {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-4px); }
    30%  { transform: translateX(4px); }
    45%  { transform: translateX(-3px); }
    60%  { transform: translateX(2px); }
    75%  { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}
.mech-block .mechanic-icon i {
    display: inline-block;
    transition: transform 0.2s ease;
}
.mech-block:hover .mechanic-icon i {
    animation: mechBlockShake 0.4s ease-out;
}
.mech-block:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(85,170,255,0.2) 0%, transparent 70%);
    animation: mechFlashFade 0.4s ease-out forwards;
    pointer-events: none;
}

/* --- Сопротивление оглушению — замедляющиеся шестерёнки --- */
@keyframes mechClockSlowSpin {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(90deg); }
    50%  { transform: rotate(150deg); }
    80%  { transform: rotate(180deg); }
    100% { transform: rotate(200deg); }
}
.mech-stun-resist .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mech-stun-resist:hover .mechanic-icon i {
    animation: mechClockSlowSpin 1s ease-out;
}

/* --- Физический вампиризм — ритм пульса --- */
@keyframes mechHeartbeat {
    0%   { transform: scale(1); }
    10%  { transform: scale(1.2); }
    20%  { transform: scale(1); }
    30%  { transform: scale(1.15); }
    40%  { transform: scale(1); }
    100% { transform: scale(1); }
}
.mech-phys-vamp .mechanic-icon i {
    display: inline-block;
    transition: transform 0.2s ease;
}
.mech-phys-vamp:hover .mechanic-icon i {
    animation: mechHeartbeat 0.8s ease-out;
}
.mech-phys-vamp:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    box-shadow: 0 0 12px rgba(255,68,68,0.4);
    animation: mechHeartGlow 0.8s ease-out;
    pointer-events: none;
}
@keyframes mechHeartGlow {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    20%  { opacity: 0.3; }
    30%  { opacity: 0.8; }
    40%  { opacity: 0; }
    100% { opacity: 0; }
}

/* --- Снижение лечения — подавление --- */
@keyframes mechSuppressDim {
    0%   { opacity: 1; filter: brightness(1); }
    30%  { opacity: 0.4; filter: brightness(0.5); }
    60%  { opacity: 0.7; filter: brightness(0.7); }
    100% { opacity: 1; filter: brightness(1); }
}
.mech-heal-reduce .mechanic-icon i {
    display: inline-block;
    transition: all 0.3s ease;
}
.mech-heal-reduce:hover .mechanic-icon i {
    animation: mechSuppressDim 0.6s ease-out;
}
.mech-heal-reduce:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(170,170,68,0.15);
    animation: mechSuppressOverlay 0.6s ease-out;
    pointer-events: none;
}
@keyframes mechSuppressOverlay {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
}

/* --- Скипетр Владыки — призматический перелив --- */
@keyframes mechPrismatic {
    0%   { filter: hue-rotate(0deg); transform: scale(1); }
    25%  { filter: hue-rotate(90deg); transform: scale(1.1); }
    50%  { filter: hue-rotate(180deg); transform: scale(1.05); }
    75%  { filter: hue-rotate(270deg); transform: scale(1.1); }
    100% { filter: hue-rotate(360deg); transform: scale(1); }
}
.mech-scepter .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mech-scepter:hover .mechanic-icon i {
    animation: mechPrismatic 1s ease-in-out;
}
.mech-scepter .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: conic-gradient(from 0deg, rgba(191,127,255,0.2), rgba(0,230,255,0.2), rgba(255,85,85,0.2), rgba(0,255,136,0.2), rgba(191,127,255,0.2));
    opacity: 0;
    pointer-events: none;
}
.mech-scepter:hover .mechanic-icon::after {
    opacity: 1;
    animation: mechPrismaticRing 1s linear;
}
@keyframes mechPrismaticRing {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Усиление маг. урона — нарастающее пламя --- */
@keyframes mechFireEscalate {
    0%   { transform: scale(1); filter: brightness(1); }
    30%  { transform: scale(1.15); filter: brightness(1.5); }
    60%  { transform: scale(1.25); filter: brightness(2); }
    100% { transform: scale(1); filter: brightness(1); }
}
.mech-spell-dmg .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mech-spell-dmg:hover .mechanic-icon i {
    animation: mechFireEscalate 0.6s ease-out;
}
.mech-spell-dmg:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(255,85,85,0.25) 0%, transparent 70%);
    animation: mechFireGlow 0.6s ease-out;
    pointer-events: none;
}
@keyframes mechFireGlow {
    0%   { opacity: 0; transform: scale(0.5); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.5); }
}

/* --- Усиление маг. лечения — мягкое сияние --- */
@keyframes mechRadiance {
    0%   { transform: scale(1); box-shadow: 0 0 0 rgba(85,255,136,0); }
    50%  { transform: scale(1.08); box-shadow: 0 0 20px rgba(85,255,136,0.3); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(85,255,136,0); }
}
.mech-heal-amp .mechanic-icon {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mech-heal-amp:hover .mechanic-icon {
    animation: mechRadiance 0.8s ease-out;
}
.mech-heal-amp .mechanic-icon i {
    display: inline-block;
}

/* --- Магическая защита — кольцевой барьер --- */
@keyframes mechBarrierRing {
    0%   { inset: 4px; opacity: 0.8; border-width: 2px; }
    100% { inset: -8px; opacity: 0; border-width: 1px; }
}
.mech-magic-resist .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 2px solid rgba(85,170,255,0.4);
    opacity: 0;
    pointer-events: none;
}
.mech-magic-resist:hover .mechanic-icon::after {
    animation: mechBarrierRing 0.6s ease-out;
}
.mech-magic-resist .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mech-magic-resist:hover .mechanic-icon i {
    transform: scale(1.05);
}

/* --- Сборка в 1 клик — клик-нажатие --- */
@keyframes mechClickPress {
    0%   { transform: scale(1); }
    20%  { transform: scale(0.8); }
    40%  { transform: scale(1.1); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.mech-auto-build .mechanic-icon i {
    display: inline-block;
    transition: transform 0.2s ease;
}
.mech-auto-build:hover .mechanic-icon i {
    animation: mechClickPress 0.4s ease-out;
}
.mech-auto-build:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(255,153,68,0.2) 0%, transparent 70%);
    animation: mechFlashFade 0.4s ease-out forwards;
    pointer-events: none;
}

/* --- Порча — тёмные разводы --- */
@keyframes mechCorruptSpread {
    0%   { background-position: 0% 50%; opacity: 0; }
    30%  { opacity: 1; }
    100% { background-position: 100% 50%; opacity: 0; }
}
.mech-corruption .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(170,68,170,0.3), rgba(40,0,40,0.4), rgba(170,68,170,0.3));
    background-size: 200% 200%;
    opacity: 0;
    pointer-events: none;
}
.mech-corruption:hover .mechanic-icon::after {
    animation: mechCorruptSpread 0.8s ease-out;
}
.mech-corruption .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.mech-corruption:hover .mechanic-icon i {
    transform: scale(1.1);
    filter: brightness(0.7);
}

/* --- Возврат урона — отскок --- */
@keyframes mechReflectBounce {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(5px); }
    40%  { transform: translateX(-5px); }
    60%  { transform: translateX(3px); }
    80%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
.mech-dmg-return .mechanic-icon i {
    display: inline-block;
    transition: transform 0.2s ease;
}
.mech-dmg-return:hover .mechanic-icon i {
    animation: mechReflectBounce 0.5s ease-out;
}
.mech-dmg-return:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle at 30% 50%, rgba(255,102,68,0.2) 0%, transparent 70%);
    animation: mechFlashFade 0.5s ease-out forwards;
    pointer-events: none;
}

/* --- Развеивание — колыхание ветра --- */
@keyframes mechWindSway {
    0%   { transform: rotate(0deg) translateX(0); }
    20%  { transform: rotate(5deg) translateX(3px); }
    40%  { transform: rotate(-3deg) translateX(-2px); }
    60%  { transform: rotate(4deg) translateX(2px); }
    80%  { transform: rotate(-2deg) translateX(-1px); }
    100% { transform: rotate(0deg) translateX(0); }
}
.mech-dispel .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mech-dispel:hover .mechanic-icon i {
    animation: mechWindSway 0.7s ease-out;
}
.mech-dispel:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, transparent, rgba(85,204,255,0.15), transparent);
    background-size: 200% 100%;
    animation: sparkleSweep 0.7s ease-out;
    pointer-events: none;
}

/* --- Сопротивление сожжению маны — угасание пламени --- */
@keyframes mechFireDim {
    0%   { transform: scale(1); filter: brightness(1); opacity: 1; }
    30%  { transform: scale(1.1); filter: brightness(1.3); opacity: 1; }
    60%  { transform: scale(0.85); filter: brightness(0.4); opacity: 0.5; }
    100% { transform: scale(1); filter: brightness(1); opacity: 1; }
}
.mech-mana-burn-resist .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mech-mana-burn-resist:hover .mechanic-icon i {
    animation: mechFireDim 0.7s ease-out;
}
.mech-mana-burn-resist:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(85,255,204,0.15) 0%, transparent 70%);
    animation: mechFlashFade 0.7s ease-out forwards;
    pointer-events: none;
}

/* --- Чистый урон — белая вспышка --- */
@keyframes mechPureFlash {
    0%   { transform: scale(1); filter: brightness(1); }
    15%  { transform: scale(1.3); filter: brightness(3); }
    30%  { transform: scale(1.05); filter: brightness(1.5); }
    45%  { transform: scale(1.15); filter: brightness(2.5); }
    100% { transform: scale(1); filter: brightness(1); }
}
.mech-pure-dmg .mechanic-icon i {
    display: inline-block;
    transition: transform 0.2s ease;
}
.mech-pure-dmg:hover .mechanic-icon i {
    animation: mechPureFlash 0.5s ease-out;
}
.mech-pure-dmg:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 70%);
    animation: mechFlashFade 0.5s ease-out forwards;
    pointer-events: none;
}

/* Общий блик-свип для карточек с градиентным пробегом */
@keyframes sparkleSweep {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* ===== Анимации карточек игровых режимов (modes.html) ===== */

/* --- Урон заклинаний = 50% — ослабленная вспышка --- */
@keyframes modeSpellShrink {
    0%   { transform: scale(1); filter: brightness(1); }
    30%  { transform: scale(0.75); filter: brightness(0.5); }
    60%  { transform: scale(1.05); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}
.mode-spell-half .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mode-spell-half:hover .mechanic-icon i {
    animation: modeSpellShrink 0.6s ease-out;
}
.mode-spell-half:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(255,85,85,0.2) 0%, transparent 70%);
    animation: mechFlashFade 0.5s ease-out forwards;
    pointer-events: none;
}

/* --- Боссы — появление с пульсацией --- */
@keyframes modeBossAppear {
    0%   { transform: scale(0.6); opacity: 0.5; }
    50%  { transform: scale(1.2); opacity: 1; }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 1; }
}
.mode-bosses .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mode-bosses:hover .mechanic-icon i {
    animation: modeBossAppear 0.6s ease-out;
}
.mode-bosses:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    border: 2px solid rgba(191,127,255,0.4);
    animation: mechDrainRing 0.7s ease-out;
    pointer-events: none;
}

/* --- Потеря золота — тряска монет --- */
@keyframes modeGoldShake {
    0%   { transform: rotate(0deg) translateY(0); }
    20%  { transform: rotate(-12deg) translateY(-3px); }
    40%  { transform: rotate(10deg) translateY(2px); }
    60%  { transform: rotate(-6deg) translateY(-1px); }
    80%  { transform: rotate(3deg); }
    100% { transform: rotate(0deg) translateY(0); }
}
.mode-gold-loss .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mode-gold-loss:hover .mechanic-icon i {
    animation: modeGoldShake 0.5s ease-out;
}
.mode-gold-loss:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(120deg, transparent 30%, rgba(255,153,68,0.15) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: sparkleSweep 0.6s ease-out;
    pointer-events: none;
}

/* --- Турбо — ускоренный пульс --- */
@keyframes modeTurboPulse {
    0%   { transform: scale(1) translateX(0); }
    25%  { transform: scale(1.15) translateX(3px); }
    50%  { transform: scale(1) translateX(6px); }
    75%  { transform: scale(1.1) translateX(3px); }
    100% { transform: scale(1) translateX(0); }
}
.mode-turbo .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mode-turbo:hover .mechanic-icon i {
    animation: modeTurboPulse 0.4s ease-out;
}
.mode-turbo:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, transparent, rgba(85,255,136,0.15), transparent);
    background-size: 200% 100%;
    animation: sparkleSweep 0.4s ease-out;
    pointer-events: none;
}

/* --- Без книг — перечёркивание --- */
@keyframes modeNoBooksSlash {
    0%   { transform: scale(1); opacity: 1; }
    40%  { transform: scale(0.85); opacity: 0.6; }
    70%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.mode-no-books .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mode-no-books:hover .mechanic-icon i {
    animation: modeNoBooksSlash 0.5s ease-out;
}
.mode-no-books:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(85,170,255,0.6);
    border-radius: 2px;
    animation: modeSlashAppear 0.4s ease-out forwards;
    pointer-events: none;
}
@keyframes modeSlashAppear {
    0%   { transform: scaleX(0); opacity: 0; }
    50%  { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}

/* --- Командные награды — синхронный отскок --- */
@keyframes modeTeamBounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.2); }
    50%  { transform: scale(0.9); }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.mode-team-rewards .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mode-team-rewards:hover .mechanic-icon i {
    animation: modeTeamBounce 0.5s ease-out;
}
.mode-team-rewards:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(120deg, transparent 30%, rgba(170,170,68,0.12) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: sparkleSweep 0.6s ease-out;
    pointer-events: none;
}

/* --- Соло режим — затухание и дрожь --- */
@keyframes modeSoloFade {
    0%   { transform: scale(1); opacity: 1; }
    30%  { transform: scale(0.8); opacity: 0.4; }
    60%  { transform: scale(1.05); opacity: 1; }
    80%  { transform: scale(0.98); }
    100% { transform: scale(1); opacity: 1; }
}
.mode-solo .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mode-solo:hover .mechanic-icon i {
    animation: modeSoloFade 0.6s ease-out;
}
.mode-solo:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(255,68,68,0.15) 0%, transparent 70%);
    animation: mechFlashFade 0.5s ease-out forwards;
    pointer-events: none;
}

/* --- Бан героев — удар молота --- */
@keyframes modeBanSlam {
    0%   { transform: scale(1) rotate(0deg); }
    20%  { transform: scale(1.3) rotate(-15deg); }
    40%  { transform: scale(0.9) rotate(5deg); }
    60%  { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.mode-hero-ban .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mode-hero-ban:hover .mechanic-icon i {
    animation: modeBanSlam 0.5s ease-out;
}
.mode-hero-ban:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(170,68,170,0.25) 0%, transparent 70%);
    animation: mechFlashFade 0.5s ease-out forwards;
    pointer-events: none;
}

/* --- Случайный герой — вращение-перетасовка --- */
@keyframes modeRandomSpin {
    0%   { transform: rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) scale(0.8); }
    50%  { transform: rotate(180deg) scale(1.1); }
    75%  { transform: rotate(270deg) scale(0.9); }
    100% { transform: rotate(360deg) scale(1); }
}
.mode-random-hero .mechanic-icon i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.mode-random-hero:hover .mechanic-icon i {
    animation: modeRandomSpin 0.6s ease-out;
}
.mode-random-hero:hover .mechanic-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(120deg, transparent 20%, rgba(85,255,204,0.15) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: sparkleSweep 0.6s ease-out;
    pointer-events: none;
}

/* === Поддержать === */
.support-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.support-hero {
    font-size: 4rem;
    margin-bottom: 16px;
}
.support-desc {
    color: #8aa0c0;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 32px;
}
.support-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.support-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    transition: 0.25s ease;
    position: relative;
}
.support-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow);
    transform: translateY(-3px);
}
.support-card .method-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}
.support-card h3 {
    color: #e0f0ff;
    margin-bottom: 8px;
}
.support-card p {
    color: #5a7a9a;
    font-size: 0.85rem;
}
.support-card .method-link {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 20px;
    background: #00e6ff22;
    border: 1px solid #00e6ff;
    border-radius: 30px;
    color: #00e6ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: 0.2s;
}
.support-card .method-link:hover {
    background: #00e6ff;
    color: #0b0e14;
}
.support-thanks {
    color: #5a7a9a;
    font-size: 0.9rem;
    margin-top: 24px;
    font-style: italic;
}

/* === Монстры === */
.monsters-section {
    margin-bottom: 40px;
    padding-top: 24px;
}
.monsters-section h2 {
    font-size: 1.4rem;
    color: #e0f0ff;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Добыча боссов — наглядная схема */
.boss-drops-section {
    margin-bottom: 24px;
}
.boss-drops-title {
    font-size: 1.1rem;
    color: #8aa0c0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.boss-drops-title i {
    color: #00e6ff;
}
.boss-drops-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.boss-drop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    text-decoration: none;
    color: #d0e0ff;
    transition: 0.15s;
    cursor: pointer;
}
.boss-drop-row:hover {
    border-color: var(--glass-border-hover);
    box-shadow: 0 0 12px #00e6ff33;
}
.boss-drop-name {
    font-weight: 600;
    min-width: 140px;
}
.boss-drop-arrow {
    color: #2a5070;
    font-size: 0.7rem;
}
.boss-drop-item-name {
    color: #ff6b6b;
    text-decoration: none;
    font-weight: 500;
}
.boss-drop-item-name:hover {
    text-decoration: underline;
    color: #ff8888;
}
.boss-drop-chance {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 8px;
    background: #00e6ff22;
    color: #00e6ff;
    font-weight: 600;
}
.boss-drop-chance-low {
    background: #ff555522;
    color: #ff7777;
}
.boss-drops-section::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin-top: 20px;
    margin-bottom: 8px;
}
@media (max-width: 640px) {
    .boss-drop-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .boss-drop-name {
        min-width: 0;
        flex: 1;
    }
    .boss-drop-arrow {
        display: none;
    }
}
.monster-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: 0.25s ease;
    position: relative;
}
.monster-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow);
    transform: translateY(-2px);
}
.monster-card.boss {
    border-left: 4px solid #ff5555;
}
.monster-card.creep {
    border-left: 4px solid #ff9944;
}
.monster-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    transition: 0.15s;
}
.monster-header:hover {
    background: #1a2540;
}
.monster-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.monster-card.boss .monster-icon {
    background: #2a0a0a;
    border: 1px solid #ff555544;
    color: #ff5555;
}
.monster-card.creep .monster-icon {
    background: #2a1a0a;
    border: 1px solid #ff994444;
    color: #ff9944;
}
.monster-name {
    font-size: 1rem;
    font-weight: 600;
    color: #e0f0ff;
    flex: 1;
}
.monster-code {
    font-family: 'Consolas', monospace;
    font-size: 0.75rem;
    color: #5a7a9a;
    background: #0a0f1a;
    padding: 2px 8px;
    border-radius: 6px;
}
.monster-toggle {
    color: #5a7a9a;
    font-size: 0.8rem;
    transition: 0.2s;
    display: flex;
    align-items: center;
}
.monster-card.open .monster-toggle {
    transform: rotate(90deg);
}
.monster-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.monster-card.open .monster-body {
    max-height: 2000px;
}
.monster-body-inner {
    padding: 0 18px 16px;
    border-top: 1px solid #1a3050;
}
.monster-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.monster-stat {
    background: #0a0f1a;
    border-radius: 8px;
    padding: 8px 12px;
}
.monster-stat .stat-label {
    font-size: 0.75rem;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.monster-stat .stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: #e0f0ff;
    margin-top: 2px;
}
.monster-desc {
    color: #8aa0c0;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 12px;
}

/* Боссы и крипы: разный уровень детализации */
.monster-card.boss .monster-header {
    padding: 16px 18px;
}
.monster-card.boss .monster-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
}
.monster-card.boss .monster-body-inner {
    padding: 0 18px 18px;
}
.monster-card.boss .monster-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.monster-card.creep .monster-header {
    padding: 12px 16px;
}
.monster-card.creep .monster-icon {
    width: 34px;
    height: 34px;
    font-size: 16px;
}
.monster-card.creep .monster-name {
    font-size: 0.96rem;
}
.monster-card.creep .monster-body-inner {
    padding: 0 16px 14px;
}
.monster-card.creep .monster-stats-grid {
    grid-template-columns: 1fr;
}
.monster-card.creep .monster-abilities,
.monster-card.creep .monster-desc {
    display: none;
}
.monster-card.creep .monster-reward {
    margin-top: 12px;
}
.monster-card.creep .reward-row {
    padding: 5px 10px;
}

@media (max-width: 500px) {
    .monster-card.boss .monster-header {
        padding: 14px 14px;
    }
    .monster-card.boss .monster-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
    .monster-card.boss .monster-body-inner {
        padding: 0 14px 14px;
    }
    .monster-card.boss .monster-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Способности босса */
.boss-ability {
    background: #0a0f1a;
    border: 1px solid #1a3050;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
}
.boss-ability-name {
    font-weight: 600;
    color: #00e6ff;
    font-size: 0.9rem;
    margin-bottom: 4px;
}
.boss-ability-desc {
    color: #8aa0c0;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Вступительный текст на странице монстров */
.monsters-intro {
    color: #8aa0c0;
    margin-bottom: 24px;
    font-size: 1.05rem;
}

/* Иконка заголовка "Боссы" */
.boss-heading-icon {
    color: #ff5555;
}

/* Заголовки секций внутри карточки босса */
.boss-section-title {
    font-size: 1rem;
    font-weight: 500;
    color: #00e6ff;
    margin: 16px 0 8px;
    text-shadow: 0 0 8px #00e6ffaa;
}

/* Иконка босса/крипа */
.monster-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Пассивные способности босса */
.boss-passive {
    background: #0a1a0a;
    border: 1px solid #55ff8833;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
}
.boss-passive-name {
    font-weight: 600;
    color: #55ff88;
    font-size: 0.9rem;
    margin-bottom: 4px;
}
.boss-passive-desc {
    color: #8aa0c0;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Стадии босса */
.boss-stages {
    margin-top: 12px;
}
.boss-stage {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 12px;
    background: #0f0a1a;
    border: 1px solid #bf7fff22;
    border-radius: 8px;
    margin-bottom: 4px;
}
.boss-stage-threshold {
    font-weight: 700;
    color: #bf7fff;
    font-size: 0.85rem;
    min-width: 70px;
    flex-shrink: 0;
}
.boss-stage-desc {
    color: #8aa0c0;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Награда за босса */
.monster-reward {
    margin-top: 8px;
}
.reward-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    background: #0a0f1a;
}
.reward-row.drop {
    background: #1a0a0a;
    border: 1px solid #ff555544;
}
.reward-label {
    color: #8aa0c0;
    font-size: 0.85rem;
}
.reward-value {
    color: #e0f0ff;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}
.monster-require {
    color: #5a8aaa;
    font-size: 0.85rem;
    margin-top: 8px;
    padding: 8px 12px;
    background: #0a1525;
    border-left: 3px solid #ffd966;
    border-radius: 0 8px 8px 0;
}
.monster-require i {
    color: #ffd966;
    margin-right: 6px;
}
.motivation-badge {
    display: inline-block;
    background: #2a1a3a;
    color: #bf7fff;
    font-size: 0.75rem;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid #bf7fff44;
    margin-left: 6px;
    vertical-align: middle;
}
.item-link {
    color: #00e6ff;
    text-decoration: none;
    border-bottom: 1px dashed #00e6ff66;
    transition: 0.15s;
}
.item-link:hover {
    color: #fff;
    border-bottom-color: #00e6ff;
    text-shadow: 0 0 8px #00e6ff88;
}
.drop-bonus {
    color: #bf7fff;
    font-size: 0.8rem;
    margin-left: 4px;
}

/* === Главная страница === */

/* Героический баннер */
.hero-banner {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin: -24px -32px 0;
    padding: 80px 32px;
}
.hero-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    filter: blur(1px);
}
.hero-banner-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, #00e6ff15 0%, transparent 60%),
                radial-gradient(ellipse at 20% 80%, #ff555510 0%, transparent 50%),
                radial-gradient(ellipse at 80% 70%, #bf7fff10 0%, transparent 50%);
    z-index: 1;
    animation: auroraBanner 8s ease-in-out infinite;
}
@keyframes auroraBanner {
    0%, 100% { opacity: 1; transform: translateX(0) scale(1); }
    50% { opacity: 0.4; transform: translateX(-5%) scale(1.08); }
}
.hero-banner-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300e6ff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 2;
}
.hero-banner-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    animation: bannerFadeIn 1s ease forwards;
}
@keyframes bannerFadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-logo-img {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    border: 3px solid #00e6ff;
    box-shadow: 0 0 30px #00e6ff66, 0 0 60px #00e6ff33;
    margin-bottom: 24px;
    animation: float 3s ease-in-out infinite, logoBorderPulse 2.5s ease-in-out infinite;
    object-fit: cover;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
@keyframes logoBorderPulse {
    0%, 100% { border-color: #00e6ff; box-shadow: 0 0 30px #00e6ff66, 0 0 60px #00e6ff33; }
    50% { border-color: #55ffff; box-shadow: 0 0 40px #00e6ff88, 0 0 80px #00e6ff44; }
}
.hero-banner-title {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 30px #00e6ff88, 0 0 60px #00e6ff44, 0 0 100px #00e6ff22;
    margin-bottom: 12px;
    line-height: 1.1;
    /* Shimmer-эффект на заголовке */
    background: linear-gradient(90deg, #fff 0%, #00e6ff 40%, #fff 60%, #00e6ff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShimmer 4s ease-in-out infinite;
}
@keyframes titleShimmer {
    0%, 100% { background-position: 200% center; }
    50% { background-position: -200% center; }
}
.hero-subtitle {
    font-size: 1.2rem;
    color: #8aa0c0;
    letter-spacing: 2px;
    margin-bottom: 24px;
}
.hero-desc {
    font-size: 1.15rem;
    color: #b0c4de;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* Кнопки баннера */
.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: linear-gradient(135deg, #00cc66, #00ff88);
    color: #0b0e14;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 0 25px #00ff8866, 0 4px 15px #00000055;
    transition: 0.2s;
    letter-spacing: 0.5px;
}
.btn-primary:hover {
    box-shadow: 0 0 40px #00ff88aa, 0 4px 20px #00000077;
    transform: translateY(-2px);
}
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: transparent;
    color: #00e6ff;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 50px;
    border: 2px solid #00e6ff;
    text-decoration: none;
    box-shadow: 0 0 15px #00e6ff33;
    transition: 0.2s;
}
.btn-secondary:hover {
    background: #00e6ff15;
    box-shadow: 0 0 25px #00e6ff55;
    transform: translateY(-2px);
}

/* Статистика */
.stats-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 40px 0;
}
.stat-box {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    transition: 0.25s ease;
    text-decoration: none;
    display: block;
    color: inherit;
    cursor: pointer;
    position: relative;
}
.stat-box:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow-strong);
    transform: translateY(-5px);
}
.stat-box:hover .stat-icon {
    animation: statIconBounce 0.4s ease-out;
}
.stat-box:hover .stat-number {
    transform: scale(1.12);
    text-shadow: 0 0 20px #00e6ff66;
}
@keyframes statIconBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.stat-icon {
    font-size: 1.8rem;
    color: #00e6ff;
    margin-bottom: 8px;
}
.stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 15px #00e6ff44;
    transition: transform 0.25s ease, text-shadow 0.25s ease;
}
.stat-label {
    font-size: 0.85rem;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Секция с заголовком */
.section-title {
    font-size: 1.5rem;
    color: #e0f0ff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title i {
    color: #00e6ff;
}

/* Быстрые ссылки */
.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 40px;
}
.quick-link-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    text-decoration: none;
    transition: 0.25s ease;
    display: block;
    position: relative;
}
.quick-link-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow-strong);
    transform: translateY(-6px);
}
.quick-link-card:hover .quick-link-icon {
    animation: qlIconPop 0.35s ease-out;
    background: #00e6ff25;
    border-color: #00e6ff88;
}
.quick-link-card:hover .quick-link-icon i {
    color: #55ffff;
}
@keyframes qlIconPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.2) rotate(-5deg); }
    70%  { transform: scale(0.95) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}
/* Блик-свип при hover */
.quick-link-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(120deg, transparent 30%, rgba(0,230,255,0.08) 50%, transparent 70%);
    background-size: 200% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.quick-link-card:hover::after {
    opacity: 1;
    animation: sparkleSweep 0.6s ease-out;
}
.quick-link-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #00e6ff15;
    border: 1px solid #00e6ff44;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #00e6ff;
    margin-bottom: 12px;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.quick-link-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e0f0ff;
    margin-bottom: 6px;
}
.quick-link-desc {
    font-size: 0.85rem;
    color: #5a7a9a;
    line-height: 1.5;
}

/* Мини-обновления на главной */
.version-card-mini {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
}
.change-list-mini {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}
.change-list-mini li {
    padding: 4px 0 4px 16px;
    position: relative;
    color: #8aa0c0;
    font-size: 0.9rem;
}
.change-list-mini li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff88;
}
.updates-link {
    display: inline-block;
    margin-top: 12px;
    color: #00e6ff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.15s;
}
.updates-link:hover {
    text-shadow: 0 0 10px #00e6ff88;
}

/* Призыв к действию */
.cta-section {
    margin: 40px 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 48px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: ctaBorderPulse 3s ease-in-out infinite;
}
.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 25%,
        rgba(0, 230, 255, 0.1) 33%,
        rgba(0, 128, 255, 0.07) 40%,
        transparent 50%
    );
    animation: auroraShift 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ctaBorderPulse {
    0%, 100% { border-color: var(--glass-border); box-shadow: none; }
    50% { border-color: #00e6ff44; box-shadow: 0 0 30px rgba(0, 230, 255, 0.12); }
}
@keyframes auroraShift {
    0% { transform: translateX(-30%) translateY(-10%) rotate(0deg); }
    50% { transform: translateX(30%) translateY(10%) rotate(5deg); }
    100% { transform: translateX(-30%) translateY(-10%) rotate(0deg); }
}
.cta-content {
    position: relative;
    z-index: 1;
}
.cta-content h2 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 12px;
    text-shadow: 0 0 20px #00e6ff44;
}
.cta-content p {
    color: #8aa0c0;
    font-size: 1.05rem;
    margin-bottom: 24px;
}
.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: transparent;
    color: #bf7fff;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 50px;
    border: 2px solid #bf7fff;
    text-decoration: none;
    transition: 0.2s;
}
.btn-outline:hover {
    background: #bf7fff15;
    box-shadow: 0 0 25px #bf7fff55;
    transform: translateY(-2px);
}

/* Футер */
.site-footer {
    margin-top: 40px;
    border-top: 1px solid #2a4060;
    padding: 20px 0 12px;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.footer-brand .footer-logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: #e0f0ff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-logo-img {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}
.footer-brand p {
    color: #5a7a9a;
    font-size: 0.85rem;
    margin-top: 4px;
}
.footer-links {
    display: flex;
    gap: 20px;
}
.footer-links a {
    color: #8aa0c0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.15s;
}
.footer-links a:hover {
    color: #00e6ff;
}
.footer-social {
    display: flex;
    gap: 16px;
}
.footer-social a {
    color: #5a7a9a;
    font-size: 1.3rem;
    transition: 0.15s;
}
.footer-social a:hover {
    color: #00e6ff;
    text-shadow: 0 0 10px #00e6ff66;
}
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #1a3050;
}
.footer-bottom p {
    color: #3a5070;
    font-size: 0.8rem;
}

/* Адаптация главной */
@media (max-width: 800px) {
    .stats-section { grid-template-columns: repeat(2, 1fr); }
    .quick-links-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-banner-title { font-size: 2.2rem; }
    .hero-banner { min-height: 400px; padding: 60px 24px; margin: -16px -16px 0; }
    .support-banner { margin: -16px -16px 0; }
}
@media (max-width: 500px) {
    .stats-section { grid-template-columns: 1fr; }
    .quick-links-grid { grid-template-columns: 1fr; }
    .hero-banner-title { font-size: 1.8rem; }
    .hero-buttons { flex-direction: column; }
    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    .hero-banner { margin: -12px -12px 0; }
    .support-banner { margin: -12px -12px 0; }
    .footer-content { flex-direction: column; align-items: center; text-align: center; }
}

/* === Lore Banner === */
.lore-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    max-height: 420px;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 28px;
    display: flex;
    align-items: flex-end;
}
.lore-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.lore-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #05070a 0%, #05070acc 40%, #05070a66 70%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}
.lore-banner-content {
    position: relative;
    z-index: 2;
    padding: 32px 32px 36px;
    width: 100%;
}
.lore-banner-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 20px #00e6ff44;
    margin-bottom: 6px;
}
.lore-banner-subtitle {
    font-size: 0.95rem;
    color: #8aa0c0;
    line-height: 1.5;
}
@media (max-width: 900px) {
    .lore-banner { aspect-ratio: 16 / 9; border-radius: 16px; }
    .lore-banner-title { font-size: 1.6rem; }
    .lore-banner-content { padding: 26px 24px 30px; }
}
@media (max-width: 600px) {
    .lore-banner { aspect-ratio: 4 / 3; border-radius: 12px; max-height: 280px; }
    .lore-banner-title { font-size: 1.3rem; }
    .lore-banner-subtitle { font-size: 0.85rem; }
    .lore-banner-content { padding: 18px 16px 22px; }
}

/* === Страница Информация === */
.info-section {
    margin-bottom: 32px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 24px 28px;
    transition: background 0.2s, border-color 0.2s;
}
.info-section:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
}
.info-text {
    color: #c0d0e8;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 12px;
}
.info-list {
    list-style: none;
    padding: 0;
}
.info-list li {
    color: #c0d0e8;
    font-size: 0.92rem;
    padding: 8px 0;
    border-bottom: 1px solid #1a2a40;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: padding-left 0.25s ease;
}
.info-list li:hover {
    padding-left: 6px;
}
.info-list li:hover i {
    animation: infoListIconPop 0.3s ease-out;
    color: #55ffff;
}
.info-list li i {
    color: #00e6ff;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
@keyframes infoListIconPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.info-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.info-stat-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    transition: 0.25s ease;
    position: relative;
}
.info-stat-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow-strong);
    transform: translateY(-5px);
}
.info-stat-card:hover .info-stat-icon {
    animation: infoStatBounce 0.35s ease-out;
}
.info-stat-card:hover .info-stat-value {
    color: #55ffff;
    text-shadow: 0 0 10px #00e6ff44;
}
@keyframes infoStatBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.info-stat-icon {
    font-size: 1.3rem;
    color: #00e6ff;
    margin-bottom: 8px;
}
.info-stat-label {
    font-size: 0.72rem;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.info-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #e0f0ff;
}
.info-steps {
    color: #c0d0e8;
    font-size: 0.92rem;
    line-height: 1.8;
    padding-left: 24px;
    counter-reset: none;
}
.info-steps li {
    margin-bottom: 8px;
}
.info-steps code {
    background: #1a2a40;
    color: #00e6ff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.info-note {
    color: #5a8aaa;
    font-size: 0.85rem;
    margin-top: 16px;
    padding: 12px 16px;
    background: #0a1525;
    border-left: 3px solid #00e6ff;
    border-radius: 0 8px 8px 0;
}
.info-guides-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.info-guide-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px 16px;
    color: #c0d0e8;
    text-decoration: none;
    transition: 0.25s ease;
    position: relative;
}
.info-guide-card:hover {
    background: var(--glass-bg-hover);
    border-color: #ff0000;
    box-shadow: 0 0 20px #ff000044, 0 0 50px #ff000022;
    transform: translateY(-4px);
}
.info-guide-card:hover .guide-icon {
    animation: ytPulse 0.5s ease-out;
}
@keyframes ytPulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.25); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.guide-icon {
    font-size: 1.5rem;
    color: #ff0000;
    flex-shrink: 0;
}
.guide-title {
    font-size: 0.85rem;
    line-height: 1.3;
}
.info-author-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 12px;
    transition: 0.25s ease;
}
.info-author-card:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow);
}
.info-author-card:hover .author-avatar {
    box-shadow: 0 0 20px #00e6ff66;
    border-color: #55ffff;
}
.info-author-card:hover .author-avatar i {
    animation: crownFloat 1.5s ease-in-out infinite;
}
.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1a2a40;
    border: 2px solid #00e6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #00e6ff;
    flex-shrink: 0;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
@keyframes crownFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.author-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e0f0ff;
}
.author-role {
    font-size: 0.82rem;
    color: #5a7a9a;
    margin-top: 2px;
}
.info-links-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.info-link-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px 18px;
    color: #c0d0e8;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.25s ease;
    position: relative;
    overflow: hidden;
}
.info-link-card i {
    transition: transform 0.25s ease, color 0.25s ease;
}
.info-link-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow);
    transform: translateY(-3px);
}
.info-link-card:hover i {
    transform: translateX(3px);
    color: #55ffff;
}
.info-link-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(120deg, transparent 30%, rgba(0,230,255,0.06) 50%, transparent 70%);
    background-size: 200% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.info-link-card:hover::after {
    opacity: 1;
    animation: sparkleSweep 0.5s ease-out;
}
@media (max-width: 800px) {
    .info-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .info-guides-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
    .info-stats-grid { grid-template-columns: 1fr; }
    .info-stat-card {
        padding: 14px 10px;
    }
    .info-guides-grid {
        gap: 10px;
    }
    .info-guide-card {
        padding: 12px 14px;
    }
    .info-author-card {
        padding: 14px 16px;
        gap: 12px;
    }
    .info-links-grid {
        flex-direction: column;
    }
    .info-link-card {
        width: 100%;
        justify-content: center;
    }
}

/* === Лор: таймлайн === */
.lore-timeline {
    border-left: 2px solid #00e6ff44;
    padding-left: 24px;
    margin-top: 8px;
    margin-left: 12px;
}
.timeline-entry {
    position: relative;
    margin-bottom: 20px;
}
.timeline-entry::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00e6ff;
    box-shadow: 0 0 10px #00e6ff88;
    animation: timelinePulse 2.5s ease-in-out infinite;
}
@keyframes timelinePulse {
    0%, 100% { box-shadow: 0 0 6px #00e6ff66; transform: scale(1); }
    50% { box-shadow: 0 0 14px #00e6ffcc; transform: scale(1.3); }
}
@media (max-width: 500px) {
    .lore-section {
        margin-bottom: 24px;
    }
    .lore-title {
        font-size: 1.2rem;
        padding-left: 14px;
    }
    .lore-text {
        padding: 16px 18px;
        font-size: 0.95rem;
    }
    .modes-grid {
        grid-template-columns: 1fr;
    }
    .mode-card {
        padding: 16px;
    }
    .mode-icon {
        font-size: 1.7rem;
    }
    .cta-title {
        font-size: 1.25rem;
    }
    .call-to-action {
        padding: 18px;
        margin-top: 24px;
    }
    .lore-timeline { margin-left: 4px; padding-left: 18px; }
    .timeline-entry::before { left: -24px; width: 8px; height: 8px; }
}
.timeline-era {
    font-size: 1rem;
    font-weight: 700;
    color: #00e6ff;
    margin-bottom: 4px;
}
.timeline-entry p {
    color: #c0d0e8;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* === Баннер Поддержать === */
.support-banner {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin: -24px -32px 0;
    padding: 60px 32px;
}
.support-banner-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a0e18 0%, #1a0a1a 30%, #0a1628 60%, #050a12 100%);
    z-index: 0;
}
.support-banner-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 80%, #ff555522 0%, transparent 60%);
    z-index: 1;
}
.support-banner-content {
    position: relative;
    z-index: 2;
}
.support-logo-img {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    border: 3px solid #ff555588;
    box-shadow: 0 0 30px #ff555544, 0 0 60px #ff555522;
    margin-bottom: 16px;
    animation: float 3s ease-in-out infinite;
    object-fit: cover;
}
.support-banner-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 30px #ff555588, 0 0 60px #ff555544;
    margin-bottom: 12px;
    line-height: 1.1;
}
.support-banner-sub {
    font-size: 1rem;
    color: #c0a0b0;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.5;
}
.support-social-section {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #2a4060;
}
@media (max-width: 800px) {
    .support-banner { min-height: 260px; padding: 40px 24px; }
    .support-banner-title { font-size: 1.8rem; }
    .support-logo-img { width: 80px; height: 80px; }
}
@media (max-width: 500px) {
    .support-banner {
        min-height: 220px;
        padding: 32px 16px;
    }
    .support-banner-title { font-size: 1.5rem; }
    .support-banner-sub {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    .support-logo-img {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
    }
    .support-methods {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 24px;
    }
    .support-card {
        padding: 18px;
    }
    .support-card .method-link {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .support-thanks {
        font-size: 0.85rem;
    }
}

@media (max-width: 900px) {
    .site-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .logo {
        justify-content: center;
    }
    .header-nav {
        justify-content: center;
        margin-top: 0;
    }
    .nav-link,
    .nav-download {
        font-size: 0.82rem;
        padding: 8px 12px;
    }
    .logo-text {
        font-size: 1.3rem;
    }
}

/* Мобильная адаптация шапки */
@media (max-width: 600px) {
    .site-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 14px;
        border-radius: 18px;
    }
    .logo {
        justify-content: center;
        gap: 8px;
    }
    .logo-text {
        font-size: 1.15rem;
        text-align: center;
    }
    .logo-text small {
        display: block;
        margin-left: 0;
        margin-top: 2px;
        font-size: 0.7rem;
        letter-spacing: 0.3px;
    }
    .header-nav {
        display: none;
        flex-direction: column;
        gap: 4px;
        padding: 12px 0;
        border-top: 1px solid #1a3050;
    }
    .header-nav.hamburger-open {
        display: flex;
    }
    .header-nav .nav-link {
        width: 100%;
        text-align: center;
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

/* Кнопка поиска в хедере */
.search-header-btn {
    background: none;
    border: 1px solid #2a5070;
    border-radius: 8px;
    color: #8aa0c0;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-header-btn:hover {
    color: #00e6ff;
    border-color: #00e6ff;
    box-shadow: 0 0 12px #00e6ff44;
}

/* Гамбургер-кнопка */
.hamburger-btn {
    display: none;
    background: none;
    border: 1px solid #2a5070;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #00e6ff;
    border-radius: 2px;
    transition: 0.3s;
}
.hamburger-btn:hover {
    border-color: #00e6ff;
    box-shadow: 0 0 10px #00e6ff44;
}
.hamburger-btn.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger-btn.open span:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 600px) {
    .hamburger-btn {
        display: flex;
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
    }
    .site-header {
        position: relative;
    }
}

.logo-img {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 2px solid #00e6ff;
    box-shadow: 0 0 15px #00e6ff88;
    object-fit: cover;
}

/* Улучшение для логотипа-картинки при наведении */
.logo:hover .logo-img {
    box-shadow: 0 0 20px #00e6ff, 0 0 30px #00e6ffaa;
    border-color: #ffffff;
}

/* Уменьшаем отступы на мобильных */
@media (max-width: 600px) {
    body {
        padding: 10px 12px;
    }
}

/* ===== Стили для страницы предметов ===== */
.app-container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.catalog {
  flex: 3;
  min-width: 0;
}
.item-detail-panel {
  flex: 1.8;
  background: rgba(18, 25, 40, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  border: 1px solid #2a4060;
  box-shadow: 0 0 30px #00000080, 0 0 0 1px #00e6ff22 inset, 0 0 20px #00e6ff33;
  padding: 20px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  color: #d0dff0;
}
/* Переопределение detail-icon внутри панели предметов (меньше) */
.item-detail-panel .detail-icon {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.item-detail-panel .detail-icon img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
}
.item-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 1900;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.item-sheet-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.item-bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1910;
  background: rgba(18, 25, 40, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid #00e6ff88;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px #000000cc;
  max-height: 78vh;
  overflow-y: auto;
  padding: 16px 16px 20px;
  transform: translateY(110%);
  transition: transform 0.28s ease, opacity 0.2s ease;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.item-bottom-sheet.visible {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}
.item-sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #2a5070;
  background: #101a28;
  color: #8ab4f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.15s;
  z-index: 2;
}
.item-sheet-close:hover {
  border-color: #00e6ff;
  color: #00e6ff;
  box-shadow: 0 0 10px #00e6ff33;
}
body.item-sheet-open {
  overflow: hidden;
}
.component-tree {
  padding-left: 0;
}
.tree-node {
  margin: 8px 0;
}
.component-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tree-toggle {
  background: #101a28;
  border: 1px solid #2a5070;
  color: #6a9ec0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: 0.15s;
}
.tree-toggle:hover {
  background: #1a2e44;
  color: #00e6ff;
  border-color: #00e6ff88;
  box-shadow: 0 0 8px #00e6ff33;
}
.tree-toggle-spacer {
  width: 28px;
  flex-shrink: 0;
}
.component-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #101a28;
  padding: 8px 12px;
  border-radius: 40px;
  border-left: 4px solid #00e6ff;
  box-shadow: 0 0 8px #00e6ff33;
  cursor: pointer;
  transition: 0.15s;
  color: #d0e0ff;
}
.component-item:hover {
  background: #162433;
  border-left-color: #ff66c4;
  box-shadow: 0 0 15px #ff66c488;
  color: white;
}
.component-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #00e6ffaa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.component-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
}
.component-name {
  font-weight: 500;
  color: #e0ecff;
}
.component-cost {
  margin-left: auto;
  color: #ffd966;
  font-weight: 600;
  text-shadow: 0 0 8px #ffb347;
}
.children-tree {
  margin-left: 28px;
  padding-left: 12px;
  border-left: 2px dashed #2a5070;
}
.ability-box {
  background: #101a28;
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
  border: 1px solid #00e6ff66;
  box-shadow: inset 0 0 20px #00000055, 0 0 15px #00e6ff22;
}
/* .ability-name и .ability-stats уже определены выше в блоке героев */
.ability-box .ability-stats {
  display: flex;
  gap: 24px;
  margin: 8px 0;
  color: #aac4f0;
}
.ability-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: #2a1a0a;
  border: 1px solid #ff994444;
  border-radius: 10px;
  color: #ffbb66;
  font-size: 0.85rem;
  line-height: 1.5;
}
.used-in-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.used-in-chip {
  background: #162433;
  border: 1px solid #00e6ffaa;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.1s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d0e4ff;
  box-shadow: 0 0 6px #00e6ff33;
}
.used-in-chip:hover {
  background: #00e6ff;
  border-color: #ffffff;
  color: #0b0e14;
  box-shadow: 0 0 20px #00e6ff;
}

/* Босс-дроп ссылка */
.boss-drop-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a1020;
  border: 1px solid #ff880066;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.9rem;
  color: #ff8800;
  text-decoration: none;
  cursor: pointer;
  transition: 0.15s;
}

.boss-drop-link:hover {
  background: #ff8800;
  border-color: #ffffff;
  color: #0b0e14;
  box-shadow: 0 0 15px #ff880066;
}

/* Рекомендуется героям */
.hero-reco-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-reco-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #162433;
  border: 1px solid #00e6ffaa;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.9rem;
  color: #d0e4ff;
  text-decoration: none;
  cursor: pointer;
  transition: 0.15s;
}

.hero-reco-chip:hover {
  background: #00e6ff;
  border-color: #ffffff;
  color: #0b0e14;
  box-shadow: 0 0 20px #00e6ff;
}

.hero-reco-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-reco-toggle {
  background: #162433;
  border: 1px solid #00e6ffaa;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.9rem;
  color: #00e6ff;
  cursor: pointer;
  transition: 0.15s;
}

.hero-reco-toggle:hover {
  background: #00e6ff;
  border-color: #ffffff;
  color: #0b0e14;
  box-shadow: 0 0 20px #00e6ff;
}

.hero-reco-hidden {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.hero-reco-hidden.open {
  display: flex;
}

.upgrade-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 10px;
}
.upgrade-btn {
  background: #162433;
  border: 1px solid #00e6ffcc;
  color: #e0f0ff;
  padding: 8px 16px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.15s;
  box-shadow: 0 0 10px #00e6ff33;
}
.upgrade-btn:hover {
  background: #00e6ff;
  border-color: #ffffff;
  color: #0b0e14;
  box-shadow: 0 0 25px #00e6ff;
  transform: scale(1.02);
}
/* .back-button уже определён выше в блоке героев — добавляем только width:100% для предметов */
.item-detail-panel .back-button {
  width: 100%;
  text-align: center;
}
.empty-detail {
  text-align: center;
  color: #7a8faa;
  padding: 30px 0;
}
/* Бейджи стоимости в детальной панели */
.cost-badges {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cost-badge {
  background: #2a334a;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #e0f0ff;
}
.cost-badge.cost-crystals { border: 1px solid #55aaff55; color: #aaccff; }
.cost-badge.cost-wood     { border: 1px solid #55ff5555; color: #aaffaa; }
.cost-badge.cost-free      { border: 1px solid #00ffaa55; color: #00ffaa; }
.cost-badge.cost-total    { border: 1px solid #ffcc4455; color: #ffd966; }
.cost-badge.cost-base     { border: 1px solid #00e6ff55; color: #8ab4f0; }
.cost-badge.cost-recipe   { border: 1px solid #ff555555; color: #ffaaaa; }
.items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  max-width: 700px;
  overflow: hidden;
  padding-top: 24px;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}
.items-grid.collapsed {
  max-height: 0 !important;
  opacity: 0;
  margin-bottom: 0;
}
.category-section h2 {
  position: relative;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 150px;
  min-height: 48px;
}
.category-section h2 .collapse-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(90, 122, 154, 0.4);
  background: linear-gradient(180deg, rgba(13, 24, 42, 0.95), rgba(9, 15, 28, 0.95));
  color: #a9c7ff;
  font-size: 0.72em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(64, 160, 255, 0.12);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.category-section h2 .collapse-toggle:hover {
  border-color: rgba(106, 205, 255, 0.8);
  color: #d2f3ff;
  box-shadow: 0 0 16px rgba(64, 160, 255, 0.22);
  transform: translateY(-50%) translateY(-1px);
}
.category-section h2 .collapse-toggle .collapse-chevron {
  font-size: 0.85em;
  color: inherit;
  transition: transform 0.3s ease;
}
.category-section h2.collapsed-header .collapse-toggle .collapse-chevron {
  transform: rotate(-90deg);
}
@media (max-width: 600px) {
  .items-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .category-section h2 {
    padding-right: 126px;
    min-height: 44px;
  }
  .category-section h2 .collapse-toggle {
    width: 28px;
    height: 28px;
    font-size: 0.68em;
  }
  .item-detail-panel .detail-icon {
    width: 80px;
    height: 80px;
  }
  .item-detail-panel .detail-icon img {
    width: 80px;
    height: 80px;
  }
}
.item-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 16px;
  padding: 12px 8px 8px;
  text-align: center;
  transition: all 0.25s ease;
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 10px #00000080, 0 0 0 1px #00e6ff22 inset;
  cursor: pointer;
  display: block;
  color: #d0e0ff;
}
.item-card.consumable    { border-bottom: 4px solid #00ffaa; box-shadow: 0 0 15px #00ffaa55; }
.item-card.neutral       { border-bottom: 4px solid #bf7fff; box-shadow: 0 0 15px #bf7fff55; }
.item-card.boost         { border-bottom: 4px solid #ffaa33; box-shadow: 0 0 15px #ffaa3355; }
.item-card.strength      { border-bottom: 4px solid #ff5555; box-shadow: 0 0 15px #ff555555; }
.item-card.agility       { border-bottom: 4px solid #55ff55; box-shadow: 0 0 15px #55ff5555; }
.item-card.intelligence  { border-bottom: 4px solid #55aaff; box-shadow: 0 0 15px #55aaff55; }
.item-card.weapon        { border-bottom: 4px solid #ff8800; box-shadow: 0 0 15px #ff880055; }
.item-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-3px);
  box-shadow: var(--neon-glow-strong);
}
.item-card.strength:hover   { border-color: #ff5555; box-shadow: 0 0 20px #ff5555aa, 0 0 40px #ff555544; }
.item-card.agility:hover    { border-color: #55ff55; box-shadow: 0 0 20px #55ff55aa, 0 0 40px #55ff5544; }
.item-card.intelligence:hover { border-color: #55aaff; box-shadow: 0 0 20px #55aaffaa, 0 0 40px #55aaff44; }
.item-card.weapon:hover      { border-color: #ff8800; box-shadow: 0 0 20px #ff8800aa, 0 0 40px #ff880044; }
.item-card.boost:hover      { border-color: #ffaa33; box-shadow: 0 0 20px #ffaa33aa, 0 0 40px #ffaa3344; }
.item-card.neutral:hover    { border-color: #bf7fff; box-shadow: 0 0 20px #bf7fffaa, 0 0 40px #bf7fff44; }
.item-card.consumable:hover { border-color: #00ffaa; box-shadow: 0 0 20px #00ffaaaa, 0 0 40px #00ffaa44; }
/* Редкость предметов по стоимости */
.item-card.rarity-cheap  { opacity: 0.85; }
.item-card.rarity-mid    { opacity: 0.92; }
.item-card.rarity-expensive { opacity: 1; }
.item-card.rarity-cheap .item-name   { text-shadow: 0 0 4px #00e6ff44; }
.item-card.rarity-mid .item-name     { text-shadow: 0 0 6px #00e6ff; }
.item-card.rarity-expensive .item-name { text-shadow: 0 0 8px #00e6ff, 0 0 16px #00e6ff88; }

/* Градиентная рамка при hover — cyan → blue */
.item-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, #00e6ff, #0080ff, #00e6ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.item-card:hover::before {
  opacity: 1;
}
.item-card {
  position: relative;
}
.item-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.item-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 10px;
  border: 2px solid #00e6ffaa;
  box-shadow: 0 0 10px #00e6ff44;
}
.item-card.strength .item-icon img   { border-color: #ff5555aa; box-shadow: 0 0 10px #ff555544; }
.item-card.agility .item-icon img    { border-color: #55ff55aa; box-shadow: 0 0 10px #55ff5544; }
.item-card.intelligence .item-icon img { border-color: #55aaffaa; box-shadow: 0 0 10px #55aaff44; }
.item-card.weapon .item-icon img     { border-color: #ff8800aa; box-shadow: 0 0 10px #ff880044; }
.item-card.boost .item-icon img      { border-color: #ffaa33aa; box-shadow: 0 0 10px #ffaa3344; }
.item-card.neutral .item-icon img    { border-color: #bf7fffaa; box-shadow: 0 0 10px #bf7fff44; }
.item-card.consumable .item-icon img { border-color: #00ffaaaa; box-shadow: 0 0 10px #00ffaa44; }
.item-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #f0f5ff;
  text-shadow: 0 0 6px #00e6ff;
  word-break: break-word;
}
.hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  padding: 10px 20px;
  margin-bottom: 20px;
  max-width: 400px;
}
.hero-search i {
  color: #00e6ff;
  font-size: 16px;
}
.hero-search input {
  background: transparent;
  border: none;
  outline: none;
  color: #e0f0ff;
  font-size: 15px;
  width: 100%;
}
.hero-search input::placeholder {
  color: #6b7c99;
}
.hero-count {
  color: #7a8faa;
  font-size: 14px;
  margin-bottom: 15px;
}
.hero-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: #0f172acc;
  border: 1px solid #2a4060;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: #6b7c99;
  transition: 0.15s;
  z-index: 2;
}
.hero-fav-btn .fas {
  color: #ff5555;
}
.hero-fav-btn:hover {
  background: #ff555533;
  border-color: #ff5555;
}
.item-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  padding: 10px 20px;
  margin-bottom: 20px;
  max-width: 400px;
}
.item-search i {
  color: #00e6ff;
  font-size: 16px;
}
.item-search input {
  background: transparent;
  border: none;
  outline: none;
  color: #e0f0ff;
  font-size: 15px;
  width: 100%;
}
.item-search input::placeholder {
  color: #6b7c99;
}
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 16px;
  border-bottom: 1px solid #2a4060;
  padding-bottom: 10px;
}
.tab-btn {
  background: #0f1a2b;
  border: 1px solid #2a5070;
  color: #b0c8f0;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 0 6px #00e6ff22;
  transition: 0.1s;
}
.tab-btn:hover {
  background: #1a3050;
  color: #ffffff;
  box-shadow: 0 0 12px #00e6ff88;
  border-color: #00e6ff;
}
.tab-btn.active {
  background: #00e6ff;
  border-color: #ffffff;
  color: #0b0e14;
  box-shadow: 0 0 20px #00e6ff, 0 0 0 2px #00e6ff44 inset;
}
@media (max-width: 800px) {
  .app-container { flex-direction: column; }
  .item-detail-panel { display: none; }
  .item-search {
    width: 100%;
    max-width: none;
    padding: 8px 16px;
  }
  .category-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #00e6ff44 transparent;
    padding-bottom: 6px;
    gap: 6px;
  }
  .category-tabs::-webkit-scrollbar { height: 4px; }
  .category-tabs::-webkit-scrollbar-track { background: transparent; }
  .category-tabs::-webkit-scrollbar-thumb { background: #00e6ff44; border-radius: 2px; }
  .tab-btn { flex-shrink: 0; padding: 5px 12px; font-size: 0.78rem; line-height: 1.1; }
  .item-bottom-sheet {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 16px);
    padding: 14px 14px 18px;
  }
  .item-bottom-sheet .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-right: 44px;
  }
  .item-bottom-sheet .detail-icon {
    width: 76px;
    height: 76px;
    font-size: 36px;
  }
  .item-bottom-sheet .detail-icon img {
    width: 76px;
    height: 76px;
  }
  .item-bottom-sheet .detail-title {
    font-size: 1.35rem;
    line-height: 1.2;
  }
  .item-bottom-sheet .detail-badge {
    margin-left: 0;
    margin-top: 6px;
    display: inline-block;
  }
  .item-bottom-sheet .detail-description {
    margin: 14px 0;
    padding-bottom: 14px;
    font-size: 0.9rem;
    line-height: 1.55;
  }
  .item-bottom-sheet .cost-badges {
    gap: 8px;
  }
  .item-bottom-sheet .cost-badge {
    font-size: 0.8rem;
    padding: 4px 10px;
  }
  .item-bottom-sheet .component-item {
    padding: 7px 10px;
    gap: 8px;
  }
  .item-bottom-sheet .component-cost {
    font-size: 0.8rem;
  }
  .item-bottom-sheet .used-in-chip {
    padding: 5px 10px;
    font-size: 0.82rem;
  }
  .item-bottom-sheet .recipe-title {
    font-size: 0.9rem;
  }
}

@media (max-width: 560px) {
  .category-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    white-space: normal;
    text-align: center;
    padding: 6px 8px;
    font-size: 0.72rem;
  }

  .tab-btn i {
    margin-right: 5px;
  }

  .item-bottom-sheet {
    left: 6px;
    right: 6px;
    max-width: calc(100vw - 12px);
    border-radius: 18px 18px 0 0;
    padding: 10px 10px 14px;
  }

  .item-bottom-sheet .panel-header {
    gap: 6px;
    padding-right: 36px;
    margin-bottom: 12px;
  }

  .item-bottom-sheet .detail-icon {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }

  .item-bottom-sheet .detail-icon img {
    width: 52px;
    height: 52px;
  }

  .item-bottom-sheet .detail-title {
    font-size: 0.98rem;
    line-height: 1.15;
  }

  .item-bottom-sheet .detail-badge {
    font-size: 0.64rem;
    padding: 2px 7px;
    margin-top: 4px;
  }

  .item-bottom-sheet .detail-description {
    margin: 10px 0 12px;
    padding-bottom: 10px;
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .item-bottom-sheet .cost-badges {
    gap: 6px;
    margin-bottom: 10px;
  }

  .item-bottom-sheet .cost-badge {
    font-size: 0.72rem;
    padding: 3px 8px;
  }

  .item-bottom-sheet .recipe-title {
    margin: 12px 0 8px;
    font-size: 0.92rem;
  }

  .item-bottom-sheet .component-item {
    padding: 6px 8px;
    gap: 6px;
  }

  .item-bottom-sheet .component-icon {
    width: 30px;
    height: 30px;
  }

  .item-bottom-sheet .component-icon img {
    width: 30px;
    height: 30px;
  }

  .item-bottom-sheet .component-name {
    font-size: 0.8rem;
  }

  .item-bottom-sheet .component-cost {
    font-size: 0.72rem;
  }

  .item-bottom-sheet .used-in-chip {
    padding: 4px 8px;
    font-size: 0.78rem;
  }

  .item-bottom-sheet .boss-drop-link {
    font-size: 0.82rem;
    padding: 5px 10px;
  }

  .item-bottom-sheet .hero-reco-chip {
    font-size: 0.82rem;
    padding: 5px 10px;
  }

  .item-bottom-sheet .hero-reco-chip img {
    width: 16px;
    height: 16px;
  }
}

/* ===== Расширенные стили для карточек героев (Warcraft III style) ===== */
.hero-role {
    display: inline-block;
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 20px;
    background: #1e2a3a;
    color: #ffd966;
    margin-top: 5px;
    border: 1px solid #ffd96666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-tank { color: #ffaa66; border-color: #ffaa66; }
.role-damager { color: #ff6666; border-color: #ff6666; }
.role-support { color: #66aaff; border-color: #66aaff; }

.hero-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background: #101a28;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 0 10px #00000055, 0 0 10px #00e6ff22;
}
.hero-stats-table th {
    background: #1e3a5a;
    color: #ffd966;
    font-weight: 600;
    padding: 10px;
    text-align: center;
    border-bottom: 2px solid #00e6ff;
}
.hero-stats-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #2a4060;
    color: #d0e4ff;
}
.hero-stats-table tr:last-child td {
    border-bottom: none;
}
.stat-primary {
    color: #ffd966;
    font-weight: bold;
}
.stat-strength { color: #ff5555; }
.stat-agility { color: #55ff55; }
.stat-intelligence { color: #55aaff; }

/* passive-ability и ability-stats заменены на .ability-card.passive и .ability-params */

/* ===== Микро-анимации ===== */

/* Пульсация свечения при наведении */
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 230, 255, 0.3); }
    50% { box-shadow: 0 0 25px rgba(0, 230, 255, 0.5); }
}

/* Появление карточки снизу */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Пульсация свечения для карточек героев */
.hero-card:hover {
    box-shadow: 0 0 25px rgba(0, 230, 255, 0.5);
    animation: fadeSlideUp 0.4s ease-out both, glow-pulse 2s ease-in-out infinite 0.4s;
}

/* Пульсация свечения для карточек предметов */
.item-card:hover {
    box-shadow: 0 0 25px rgba(0, 230, 255, 0.5);
    animation: fadeSlideUp 0.4s ease-out both, glow-pulse 2s ease-in-out infinite 0.4s;
}

/* Пульсация свечения для stat-box */
.stat-box:hover {
    box-shadow: 0 0 25px rgba(0, 230, 255, 0.5);
    animation: fadeSlideUp 0.4s ease-out both, glow-pulse 2s ease-in-out infinite 0.4s;
}

/* Пульсация свечения для quick-link-card */
.quick-link-card:hover {
    box-shadow: 0 0 25px rgba(0, 230, 255, 0.5);
    animation: fadeSlideUp 0.4s ease-out both, glow-pulse 2s ease-in-out infinite 0.4s;
}

/* Появление карточек при загрузке */
.hero-card {
    animation: fadeSlideUp 0.4s ease-out both;
}
.item-card {
    animation: fadeSlideUp 0.4s ease-out both;
}
.stat-box {
    animation: fadeSlideUp 0.4s ease-out both;
}
.quick-link-card {
    animation: fadeSlideUp 0.4s ease-out both;
}

/* Staggered delay — первые 6 карточек появляются с задержкой */
.hero-card:nth-child(1) { animation-delay: 0.05s; }
.hero-card:nth-child(2) { animation-delay: 0.1s; }
.hero-card:nth-child(3) { animation-delay: 0.15s; }
.hero-card:nth-child(4) { animation-delay: 0.2s; }
.hero-card:nth-child(5) { animation-delay: 0.25s; }
.hero-card:nth-child(6) { animation-delay: 0.3s; }

.item-card:nth-child(1) { animation-delay: 0.05s; }
.item-card:nth-child(2) { animation-delay: 0.1s; }
.item-card:nth-child(3) { animation-delay: 0.15s; }
.item-card:nth-child(4) { animation-delay: 0.2s; }
.item-card:nth-child(5) { animation-delay: 0.25s; }
.item-card:nth-child(6) { animation-delay: 0.3s; }

.stat-box:nth-child(1) { animation-delay: 0.05s; }
.stat-box:nth-child(2) { animation-delay: 0.1s; }
.stat-box:nth-child(3) { animation-delay: 0.15s; }
.stat-box:nth-child(4) { animation-delay: 0.2s; }

.quick-link-card:nth-child(1) { animation-delay: 0.05s; }
.quick-link-card:nth-child(2) { animation-delay: 0.1s; }
.quick-link-card:nth-child(3) { animation-delay: 0.15s; }

/* Нажатие кнопки — эффект вдавливания */
.btn-primary:active,
.btn-secondary:active {
    transform: translateY(1px) !important;
    box-shadow: 0 0 8px rgba(0, 230, 255, 0.3) !important;
}
.filter-btn:active {
    transform: translateY(1px);
}

/* Способность при наведении — лёгкий сдвиг вправо */
.ability-card:hover {
    transform: translateX(4px);
}

/* ===== Текстуры и паттерны ===== */

/* Диагональные линии внутри карточек — «тканевая» текстура */
.hero-card,
.item-card,
.stat-box,
.quick-link-card,
.ability-card,
.mechanic-card,
.support-card,
.monster-card,
.version-card {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.008'%3E%3Cpath d='M0 40L40 0H20L0 20zM40 40V20L20 40z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Точечная сетка в футере */
.site-footer {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2300e6ff' fill-opacity='0.04'%3E%3Ccircle cx='10' cy='10' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== Страничные оттенки фона ===== */
/* Лёгкий сдвиг градиента + второй cyan-отсвет в разных точках — всё в рамках палитры */

/* Герои — cyan отсвет правее + лёгкий тёплый тон */
body.page-heroes {
    background-image:
        radial-gradient(ellipse at 70% 80%, rgba(0, 230, 255, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 30% 10%, #1c2230 0%, #05070a 100%);
}
/* Orb для стекла — правый нижний */
body.page-heroes::after {
    content: '';
    position: fixed;
    bottom: -10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 230, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Предметы — cyan отсвет ниже + лёгкий teal тон */
body.page-items {
    background-image:
        radial-gradient(ellipse at 50% 90%, rgba(0, 230, 255, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 30% 10%, #1a2430 0%, #05070a 100%);
}
/* Orb для стекла — левый верхний */
body.page-items::after {
    content: '';
    position: fixed;
    top: -5%;
    left: -5%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(0, 128, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Info — orb пульсация */
.info-orb {
    position: fixed;
    bottom: 10%;
    right: 5%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(0, 230, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: infoOrbPulse 6s ease-in-out infinite;
}
@keyframes infoOrbPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Механики — cyan отсвет левее + лёгкий фиолетовый тон */
body.page-mechanics {
    background-image:
        radial-gradient(ellipse at 20% 70%, rgba(0, 230, 255, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 30% 10%, #1e2230 0%, #05070a 100%);
}

/* Монстры — cyan отсвет выше + лёгкий тёплый тон */
body.page-monsters {
    background-image:
        radial-gradient(ellipse at 60% 20%, rgba(0, 230, 255, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 30% 10%, #1e2030 0%, #05070a 100%);
}
/* Orb для стекла — левый нижний */
body.page-monsters::after {
    content: '';
    position: fixed;
    bottom: -10%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 85, 85, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Лор — cyan отсвет шире + глубокий синий тон */
body.page-lore {
    background-image:
        radial-gradient(ellipse at 40% 60%, rgba(0, 230, 255, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 30% 10%, #182530 0%, #05070a 100%);
}
/* Orb для стекла — правый верхний */
body.page-lore::after {
    content: '';
    position: fixed;
    top: -5%;
    right: -5%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(0, 230, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

body.page-calculator,
body.page-build-constructor,
body.page-bot-builds {
    background-image:
        radial-gradient(ellipse at 60% 30%, rgba(0, 230, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, #182530 0%, #05070a 100%);
}

body.page-map-changes {
    background-image:
        radial-gradient(ellipse at 50% 20%, rgba(0, 230, 255, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, #182530 0%, #05070a 100%);
}

body.page-guides,
body.page-info,
body.page-support,
body.page-updates,
body.page-changelog,
body.page-modes,
body.page-faq,
body.page-compare,
body.page-home,
body.page-404 {
    background-image:
        radial-gradient(ellipse at 50% 50%, rgba(0, 230, 255, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 30% 10%, #1a2230 0%, #05070a 100%);
}
/* Orb для главной — два пятна */
body.page-home::after {
    content: '';
    position: fixed;
    top: 10%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 230, 255, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    box-shadow: -200px 300px 0 -100px rgba(0, 128, 255, 0.04);
    animation: homeOrbPulse 5s ease-in-out infinite;
}
@keyframes homeOrbPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}
.home-orb-secondary {
    position: fixed;
    bottom: 5%;
    left: 8%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(0, 128, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: homeOrb2Pulse 7s ease-in-out infinite 1s;
}
@keyframes homeOrb2Pulse {
    0%, 100% { opacity: 0.8; transform: scale(1) translate(0, 0); }
    33% { opacity: 0.4; transform: scale(1.1) translate(20px, -15px); }
    66% { opacity: 0.9; transform: scale(0.95) translate(-10px, 10px); }
}

/* Orb для калькулятора/конструктора/бот-сборок — правый нижний */
body.page-calculator::after,
body.page-build-constructor::after,
body.page-bot-builds::after {
    content: '';
    position: fixed;
    bottom: -10%;
    right: -5%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(0, 230, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Orb для сравнения — левый нижний */
body.page-compare::after {
    content: '';
    position: fixed;
    bottom: -10%;
    left: -5%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(0, 128, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

body.page-armor-calc,
body.page-formulas-calc {
    background-image:
        radial-gradient(ellipse at 70% 20%, rgba(0, 230, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, #182530 0%, #05070a 100%);
}

/* Orb для калькуляторов брони/формул — правый верхний */
body.page-armor-calc::after,
body.page-formulas-calc::after {
    content: '';
    position: fixed;
    top: -5%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 230, 255, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Orb для режимов — центр-правый */
body.page-modes::after {
    content: '';
    position: fixed;
    top: 20%;
    right: -8%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 230, 255, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Orb для FAQ — левый верхний */
body.page-faq::after {
    content: '';
    position: fixed;
    top: -5%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 128, 255, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Orb для гайдов — правый нижний */
body.page-guides::after {
    content: '';
    position: fixed;
    bottom: -10%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 230, 255, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Orb для изменений карты — левый нижний */
body.page-map-changes::after {
    content: '';
    position: fixed;
    bottom: -10%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 230, 255, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ===== Калькулятор сборок ===== */

.calc-intro {
    color: #b0b9d0;
    margin-bottom: 8px;
    font-size: 0.88rem;
}

.calc-top-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.calc-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8aa0c0;
    text-decoration: none;
    font-size: 0.8rem;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: 4px 10px;
    border-radius: 6px;
    transition: border-color 0.2s, color 0.2s;
}

.calc-back-link:hover {
    color: #00e6ff;
    border-color: #00e6ff88;
}

.calc-hero-import {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.calc-hero-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #c0d0e8;
    white-space: nowrap;
}

.calc-hero-select {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    color: #e0f0ff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    min-width: 140px;
}

.calc-hero-select:focus {
    outline: none;
    border-color: #00e6ff88;
    box-shadow: 0 0 6px #00e6ff22;
}

.calc-share-btn {
    background: transparent;
    border: 1px solid #2a4060;
    color: #8aa0c0;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.calc-share-btn:hover {
    border-color: #00e6ff88;
    color: #00e6ff;
}

.calc-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: #0f172aee;
    border: 1px solid #00e6ff66;
    color: #e0f0ff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 1000;
    box-shadow: 0 4px 16px #00000066;
}

.calc-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.calc-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #0a1a2a, #0f2535);
    border: 1px solid #00e6ff44;
    color: #00e6ff;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.calc-link-btn:hover {
    border-color: #00e6ff88;
    box-shadow: 0 0 12px #00e6ff33;
    transform: translateY(-2px);
}

/* ===== Калькуляторы брони и формул ===== */
.calc-page-note {
    color: #b0b9d0;
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.4;
}
.calc-inline-note {
    color: var(--text-muted);
    font-weight: 400;
}
.formula-result-value--warning {
    color: #ff9944;
}
.formula-source-input {
    width: 80px;
    background: #0a1020;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 6px 10px;
    color: #e0f0ff;
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
}
.formula-source-input:focus {
    border-color: #00e6ff;
}
.calc-page-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--accent-cyan);
    font-size: 0.85rem;
    text-decoration: none;
}
.calc-page-link--spaced {
    margin-left: 16px;
}

/* Отступ для второй ссылки в калькуляторе брони */
.armor-hero-link--spaced {
    margin-left: 16px;
}

/* ===== Сравнение героев ===== */
.compare-page-note {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 1.05rem;
}
.compare-clear-btn {
    align-self: flex-end;
}
.compare-back-link {
    margin-top: 32px;
}
.compare-attr-strength {
    color: #ff5555;
}
.compare-attr-agility {
    color: #55ff55;
}
.compare-attr-intelligence {
    color: #55aaff;
}
.compare-level-gain {
    color: #55ff88;
    font-size: 0.76rem;
}
.compare-level-total {
    color: var(--text-dim);
    font-size: 0.72rem;
}

.calc-container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.calc-left {
    flex: 1;
    min-width: 0;
}

.calc-right {
    width: 240px;
    flex-shrink: 0;
}

/* Слоты */
.calc-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.calc-slot {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 2px dashed #2a4060;
    border-radius: 8px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
}

.calc-slot:hover {
    border-color: #00e6ff66;
    box-shadow: 0 0 8px #00e6ff22;
}

.calc-slot-empty {
    color: #2a4060;
    font-size: 1.2rem;
}

.calc-slot-empty:hover {
    color: #00e6ff;
    border-color: #00e6ff88;
}

.calc-slot-filled {
    border-style: solid;
    border-color: #00e6ff44;
    background: var(--glass-bg-hover);
    cursor: default;
}

.calc-slot-filled:hover {
    border-color: #ff555588;
    box-shadow: 0 0 8px #ff555522;
}

/* Цвет рамки слота по атрибуту */
.calc-attr-strength { border-color: #ff555566; }
.calc-attr-strength .calc-slot-icon img { border-color: #ff5555aa; box-shadow: 0 0 8px #ff555544; }
.calc-attr-agility { border-color: #55ff5566; }
.calc-attr-agility .calc-slot-icon img { border-color: #55ff55aa; box-shadow: 0 0 8px #55ff5544; }
.calc-attr-intelligence { border-color: #55aaff66; }
.calc-attr-intelligence .calc-slot-icon img { border-color: #55aaffaa; box-shadow: 0 0 8px #55aaff44; }
.calc-attr-weapon { border-color: #ff880066; }
.calc-attr-weapon .calc-slot-icon img { border-color: #ff8800aa; box-shadow: 0 0 8px #ff880044; }
.calc-attr-armor { border-color: #00e6ff66; }
.calc-attr-armor .calc-slot-icon img { border-color: #00e6ffaa; box-shadow: 0 0 8px #00e6ff44; }
.calc-attr-boss { border-color: #ff880066; }
.calc-attr-boss .calc-slot-icon img { border-color: #ff8800aa; box-shadow: 0 0 8px #ff880044; }
.calc-attr-neutral { border-color: #bf7fff66; }
.calc-attr-neutral .calc-slot-icon img { border-color: #bf7fffaa; box-shadow: 0 0 8px #bf7fff44; }

.calc-slot-icon {
    margin-bottom: 2px;
}

.calc-slot-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 6px;
    border: 2px solid #00e6ffaa;
    box-shadow: 0 0 6px #00e6ff44;
}

.calc-slot-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: #e0f0ff;
    text-align: center;
    margin-bottom: 0;
    word-break: break-word;
    line-height: 1.2;
}

.calc-slot-cost {
    font-size: 0.65rem;
    color: #8aa0c0;
}

.calc-slot-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ff555533;
    border: none;
    color: #ff5555;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}

.calc-slot-filled:hover .calc-slot-remove {
    opacity: 1;
}

.calc-slot-remove:hover {
    background: #ff555566;
}

/* Кнопка toggle «продаётся» в калькуляторе */
.calc-slot-keep-toggle {
    position: absolute;
    top: 2px;
    left: 2px;
    background: rgba(0, 230, 255, 0.1);
    border: none;
    color: #00e6ff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}

.calc-slot-filled:hover .calc-slot-keep-toggle {
    opacity: 1;
}

.calc-slot-keep-toggle:hover {
    background: rgba(0, 230, 255, 0.25);
}

/* Продающийся предмет в калькуляторе */
.calc-slot-temp {
    border: 1px dashed rgba(255, 200, 0, 0.4) !important;
    opacity: 0.7;
}

.calc-slot-temp .calc-slot-name.temp-name {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 200, 0, 0.5);
}

.calc-badge-temp {
    background: rgba(255, 200, 0, 0.12);
    border: 1px solid rgba(255, 200, 0, 0.3);
    color: #ffc800;
    font-size: 0.55rem;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 3px;
}

/* Строка возврата в результатах */
.calc-results-refund .calc-results-row-value {
    color: #4ade80;
}

.calc-results-net .calc-results-row-label {
    font-weight: 700;
}

.calc-results-net .calc-results-row-value {
    color: #00e6ff;
    font-weight: 700;
}

.calc-slots-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.calc-slots-counter {
    font-size: 0.75rem;
    font-weight: 700;
    color: #00e6ff;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 3px 8px;
}

/* Кнопка очистки */
.calc-clear-btn {
    background: transparent;
    border: 1px solid #2a4060;
    color: #8aa0c0;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: border-color 0.2s, color 0.2s;
}

.calc-clear-btn:hover {
    border-color: #ff555588;
    color: #ff5555;
}

/* Результаты */
.calc-results {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px;
    position: sticky;
    top: 16px;
}

.calc-results-empty {
    color: #5a7a9a;
    text-align: center;
    padding: 16px 8px;
    font-size: 0.82rem;
}

.calc-results-empty i {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 6px;
    color: #2a4060;
}

.calc-results-total {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1a2a40;
}

.calc-results-label {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.calc-results-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffc800;
    text-shadow: 0 0 12px #ffc80044;
}

.calc-results-breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.calc-results-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
}

.calc-results-row-label {
    color: #8aa0c0;
}

.calc-results-row-value {
    color: #e0f0ff;
    font-weight: 600;
}

.calc-results-boss .calc-results-row-label {
    color: #ff8800;
}

.calc-results-boss .calc-results-row-value {
    color: #ff8800;
}

.calc-results-summary {
    font-size: 0.68rem;
    color: #5a7a9a;
    text-align: center;
    padding-top: 6px;
    border-top: 1px solid #1a2a40;
}

.calc-shopping-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #e0f0ff;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #1a2a40;
    margin-bottom: 4px;
}

.calc-bonuses-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #e0f0ff;
    margin-bottom: 6px;
}

.calc-shopping-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 150px;
    overflow-y: auto;
}

.calc-shopping-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    padding: 1px 0;
}

.calc-shopping-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 3px;
}

.calc-shopping-name {
    flex: 1;
    color: #c0d0e8;
    word-break: break-word;
}

.calc-shopping-cost {
    color: #8aa0c0;
    font-weight: 600;
    white-space: nowrap;
}

/* Дерево компонентов */
.calc-tree-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #e0f0ff;
    margin-bottom: 6px;
}

.calc-tree-item {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 6px;
}

.calc-tree-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.calc-tree-expandable {
    cursor: pointer;
    border-radius: 5px;
    padding: 3px;
    margin: -3px;
    transition: background 0.15s;
}

.calc-tree-expandable:hover {
    background: #1a2a40;
}

.calc-tree-chevron {
    font-size: 0.65rem;
    color: #5a7a9a;
    width: 12px;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.calc-tree-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 5px;
    border: 2px solid #00e6ffaa;
}

.calc-tree-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e0f0ff;
    flex: 1;
}

.calc-tree-cost {
    font-size: 0.72rem;
    color: #8aa0c0;
    font-weight: 600;
    white-space: nowrap;
}

.calc-tree-components {
    padding-left: 6px;
}

/* Каталог выбора */
.calc-catalog-section {
    margin-top: 16px;
}

.calc-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    padding: 6px 14px;
    margin-bottom: 8px;
    max-width: 320px;
}

.calc-search i {
    color: #00e6ff;
    font-size: 13px;
}

.calc-search input {
    background: transparent;
    border: none;
    outline: none;
    color: #e0f0ff;
    font-size: 13px;
    width: 100%;
}

.calc-search input::placeholder {
    color: #6b7c99;
}

.calc-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 6px;
}

.calc-catalog-item {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 6px 3px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.calc-catalog-item:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow);
    transform: translateY(-2px);
}

.calc-catalog-item.calc-catalog-in-build {
    border-color: #00e6ff44;
    background: #0a1520;
    opacity: 0.6;
}

.calc-catalog-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 5px;
    margin-bottom: 1px;
}

.calc-catalog-name {
    font-size: 0.66rem;
    font-weight: 600;
    color: #e0f0ff;
    word-break: break-word;
    margin-bottom: 0;
    line-height: 1.2;
}

.calc-catalog-cost {
    font-size: 0.58rem;
    color: #8aa0c0;
}

/* Мобильная адаптация калькулятора */
@media (max-width: 900px) {
    .calc-container {
        flex-direction: column;
        gap: 16px;
    }
    .calc-right {
        width: 100%;
    }
    .calc-results {
        position: static;
    }
}

@media (max-width: 800px) {
    .calc-top-bar {
        flex-direction: column;
    }

    .calc-slot-keep-toggle {
        opacity: 1;
        font-size: 0.5rem;
    }
    .calc-top-bar .calc-back-link {
        text-align: center;
    }
    .calc-slots {
        grid-template-columns: repeat(3, 1fr);
    }
    .calc-hero-import {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .calc-hero-select {
        min-width: 0;
        width: 100%;
    }
    .calc-share-btn {
        width: 100%;
        text-align: center;
    }
    .calc-search {
        max-width: 100%;
    }
    .calc-catalog-grid {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
        gap: 6px;
    }
    .calc-catalog-item {
        padding: 6px 3px;
    }
    .calc-catalog-icon img {
        width: 36px;
        height: 36px;
    }
    .calc-catalog-name {
        font-size: 0.68rem;
    }
    .calc-catalog-cost {
        font-size: 0.6rem;
    }
    /* Табы каталога — горизонтальный скролл */
    .calc-catalog-section .category-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .calc-catalog-section .category-tabs::-webkit-scrollbar {
        display: none;
    }
    .calc-catalog-section .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

@media (max-width: 500px) {
    .calc-slots {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .calc-slot {
        min-height: 80px;
        padding: 6px 4px;
    }
    .calc-slot-icon img {
        width: 40px;
        height: 40px;
    }
    .calc-slot-name {
        font-size: 0.68rem;
    }
    .calc-slot-cost {
        font-size: 0.62rem;
    }
    .calc-tree-icon img {
        width: 28px;
        height: 28px;
    }
    .calc-tree-name {
        font-size: 0.78rem;
    }
    .calc-tree-cost {
        font-size: 0.7rem;
    }
    .calc-shopping-list {
        max-height: 140px;
    }
    .calc-results-value {
        font-size: 1.3rem;
    }
}

/* ===== Глобальный поиск ===== */

/* Кнопка поиска в шапке */
.gs-trigger {
    background: #0f1a2b;
    border: 1px solid #2a5070;
    color: #8aa0c0;
    padding: 8px 14px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.84rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s;
    white-space: nowrap;
    line-height: 1.35;
}
.gs-trigger:hover {
    border-color: #00e6ff;
    color: #00e6ff;
    box-shadow: 0 0 12px #00e6ff44;
}
.gs-trigger kbd {
    background: #1a2a40;
    border: 1px solid #2a5070;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.7rem;
    font-family: inherit;
    color: #5a7a9a;
    margin-left: 4px;
}

/* Оверлей */
.gs-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
}
.gs-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Модальное окно */
.gs-modal {
    width: 90%;
    max-width: 560px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 0 40px #000000aa, 0 0 20px #00e6ff33;
    overflow: hidden;
    transform: translateY(-10px);
    transition: transform 0.2s;
}
.gs-overlay.active .gs-modal {
    transform: translateY(0);
}

/* Строка ввода */
.gs-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #1a3050;
}
.gs-search-icon {
    color: #5a7a9a;
    font-size: 1rem;
    flex-shrink: 0;
}
.gs-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #e0f0ff;
    font-size: 1.05rem;
    font-family: inherit;
}
.gs-input::placeholder {
    color: #5a7a9a;
}
.gs-close {
    background: none;
    border: 1px solid #2a5070;
    border-radius: 8px;
    color: #5a7a9a;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.15s;
    flex-shrink: 0;
}
.gs-close:hover {
    border-color: #ff5555;
    color: #ff5555;
    box-shadow: 0 0 8px #ff555544;
}

/* Результаты */
.gs-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: 8px 0;
}
.gs-group {
    margin-bottom: 8px;
}
.gs-group-title {
    padding: 8px 18px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gs-group-title i {
    color: #00e6ff;
    font-size: 0.8rem;
}

/* Строка результата */
.gs-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    text-decoration: none;
    color: #d0e0ff;
    transition: 0.1s;
}
.gs-result:hover {
    background: #1a2a40;
}
.gs-result-name {
    font-weight: 600;
    flex: 1;
}
.gs-result-name mark {
    background: #00e6ff33;
    color: #00e6ff;
    border-radius: 2px;
    padding: 0 2px;
}
.gs-result-sub {
    font-size: 0.8rem;
    color: #5a7a9a;
}
.gs-result-desc {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Пусто */
.gs-empty {
    padding: 32px 18px;
    text-align: center;
    color: #5a7a9a;
    font-size: 0.95rem;
}

/* Мобильная адаптация */
@media (max-width: 600px) {
    .gs-trigger kbd {
        display: none;
    }
    .gs-modal {
        width: 96%;
        border-radius: 16px;
    }
    .gs-overlay {
        padding-top: 6vh;
    }
}

/* ===== Доступность: отключение анимаций ===== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Fallback: устройства без backdrop-filter получают solid фон */
@supports not (backdrop-filter: blur(1px)) {
    .item-card,
    .hero-card,
    .quick-link-card,
    .stat-box,
    .mode-card,
    .mechanic-card,
    .info-stat-card,
    .info-guide-card,
    .info-link-card,
    .info-author-card,
    .info-section,
    .lore-text,
    .call-to-action,
    .version-card,
    .support-card,
    .monster-card,
    .wiki-container,
    .calc-slot,
    .calc-catalog-item,
    .bc-slot,
    .calc-results,
    .calc-tree-item,
    .gs-modal,
    .hero-search,
    .item-search,
    .calc-search,
    .form-tab,
    .cycle-label,
    .calc-back-link,
    .calc-hero-select,
    .calc-slots-counter {
        background: #0f172a !important;
    }
}

/* ==========================================================================
   Конструктор сборок (build-constructor)
   ========================================================================== */

.bc-intro {
    color: #8e97aa;
    margin-bottom: 14px;
    line-height: 1.4;
    font-size: 0.88rem;
}

.bc-top-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

/* Группа */
.bc-group-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: rgba(0, 230, 255, 0.04);
    border: 1px solid rgba(0, 230, 255, 0.1);
    border-radius: 6px;
}

.bc-group-label {
    color: #c0d0e0;
    font-size: 0.85rem;
    white-space: nowrap;
}

.bc-group-input {
    width: 50px;
    padding: 3px 6px;
    background: #0a1520;
    border: 1px solid rgba(0, 230, 255, 0.2);
    border-radius: 4px;
    color: #e0f0ff;
    font-size: 0.85rem;
    text-align: center;
}

.bc-group-hint {
    color: #5a6a7a;
    font-size: 0.75rem;
}

/* Стадии */
.bc-stages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.bc-stage {
    background: rgba(0, 230, 255, 0.03);
    border: 1px solid rgba(0, 230, 255, 0.1);
    border-radius: 6px;
    padding: 10px 12px;
}

.bc-stage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.bc-stage-num {
    font-weight: 600;
    color: #00e6ff;
    font-size: 0.9rem;
}

.bc-stage-header {
    cursor: pointer;
}

.bc-stage-chevron {
    color: #5a6a80;
    font-size: 0.7rem;
    margin-right: 4px;
    transition: transform 0.15s;
}

.bc-stage-level {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #8e97aa;
    font-size: 0.8rem;
}

.bc-level-input {
    width: 44px;
    padding: 2px 4px;
    background: #0a1520;
    border: 1px solid rgba(0, 230, 255, 0.2);
    border-radius: 4px;
    color: #e0f0ff;
    font-size: 0.8rem;
    text-align: center;
}

.bc-stage-cost {
    color: #8e97aa;
    font-size: 0.8rem;
    margin-left: auto;
}

.bc-stage-remove {
    background: none;
    border: none;
    color: #5a3a3a;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

.bc-stage-remove:hover {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.1);
}

/* Слоты */
.bc-stage-slots {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.bc-slot {
    min-height: 76px;
    border: 2px dashed rgba(0, 230, 255, 0.15);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    position: relative;
    padding: 4px 2px;
}

.bc-slot-empty {
    color: #3a4a5a;
}

.bc-slot-empty:hover,
.bc-slot-active {
    border-color: rgba(0, 230, 255, 0.5);
    background: rgba(0, 230, 255, 0.05);
}

.bc-slot-active {
    border-style: solid;
    box-shadow: 0 0 8px rgba(0, 230, 255, 0.15);
}

.bc-slot-filled {
    border-style: solid;
    border-color: var(--glass-border-hover);
    background: var(--glass-bg-hover);
}

.bc-slot-filled:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow);
}

.bc-slot-boss-drop {
    border-color: rgba(255, 68, 68, 0.3);
    background: rgba(255, 68, 68, 0.05);
}

.bc-slot-boss-craft {
    border-color: rgba(255, 165, 0, 0.3);
    background: rgba(255, 165, 0, 0.05);
}

.bc-slot-icon {
    margin-bottom: 1px;
}

.bc-slot-icon img {
    width: 40px;
    height: 40px;
}

.bc-slot-name {
    font-size: 0.62rem;
    color: #c0d0e0;
    text-align: center;
    line-height: 1.15;
    max-height: 2.3em;
    overflow: hidden;
    word-break: break-word;
}

.bc-slot-cost {
    font-size: 0.58rem;
    color: #8e97aa;
    margin-top: 1px;
}

.bc-slot-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #5a3a3a;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.65rem;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.bc-slot:hover .bc-slot-remove {
    opacity: 1;
}

.bc-slot-remove:hover {
    color: #ff4444;
}

/* Кнопка toggle «продаётся» на слоте */
.bc-slot-keep-toggle {
    position: absolute;
    top: 2px;
    left: 2px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #8e97aa;
    font-size: 0.6rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.bc-slot:hover .bc-slot-keep-toggle {
    opacity: 1;
}

.bc-slot-keep-toggle:hover {
    color: #ffc800;
}

/* Временный предмет (продаётся при переходе) */
.bc-slot-temp {
    border-style: dashed !important;
    border-color: rgba(255, 200, 0, 0.35) !important;
    background: rgba(255, 200, 0, 0.03) !important;
}

.bc-slot-temp .bc-slot-name.temp-name {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 200, 0, 0.5);
    opacity: 0.7;
}

/* Бейдж «Продаётся» в превью */
.bc-badge-temp {
    background: rgba(255, 200, 0, 0.12);
    border: 1px solid rgba(255, 200, 0, 0.3);
    color: #ffc800;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
}

/* Стоимость перехода между стадиями */
.bc-stage-delta {
    color: rgba(0, 230, 255, 0.5);
    font-size: 0.75em;
    font-weight: 400;
}

/* Кнопка добавления стадии */
.bc-add-stage-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    background: rgba(0, 230, 255, 0.05);
    border: 2px dashed rgba(0, 230, 255, 0.2);
    border-radius: 6px;
    color: #00e6ff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    margin-bottom: 16px;
}

.bc-add-stage-btn:hover {
    background: rgba(0, 230, 255, 0.1);
    border-color: rgba(0, 230, 255, 0.4);
}

.bc-stage-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.bc-stage-actions .bc-add-stage-btn {
    flex: 1;
    margin-bottom: 0;
}

.bc-paste-stage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(0, 230, 255, 0.05);
    border: 2px dashed rgba(0, 230, 255, 0.2);
    border-radius: 6px;
    color: #00e6ff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.bc-paste-stage-btn:hover {
    background: rgba(0, 230, 255, 0.1);
    border-color: rgba(0, 230, 255, 0.4);
}

.bc-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 80, 80, 0.05);
    border: 2px dashed rgba(255, 80, 80, 0.2);
    border-radius: 6px;
    color: #ff5050;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.bc-clear-btn:hover {
    background: rgba(255, 80, 80, 0.1);
    border-color: rgba(255, 80, 80, 0.4);
}

.bc-stage-copy {
    background: none;
    border: none;
    color: #5a6a7a;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.8rem;
    transition: color 0.2s;
}

.bc-stage-copy:hover {
    color: #00e6ff;
}

.bc-stage-paste {
    background: none;
    border: none;
    color: #5a6a7a;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.8rem;
    transition: color 0.2s;
}

.bc-stage-paste:hover {
    color: #4caf50;
}

.bc-section-toggle {
    cursor: pointer;
    user-select: none;
}

.bc-section-toggle:hover {
    opacity: 0.8;
}

/* Превью */
.bc-preview-section {
    margin-bottom: 16px;
    overflow-x: auto;
}

.bc-preview-empty {
    color: #5a6a7a;
    padding: 12px;
    text-align: center;
    font-size: 0.85rem;
}

.bc-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.bc-preview-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(0, 230, 255, 0.15);
    color: #00e6ff;
    font-weight: 600;
}

.bc-preview-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(0, 230, 255, 0.05);
    vertical-align: top;
}

.bc-td-stage {
    color: #00e6ff;
    font-weight: 600;
    width: 60px;
}

.bc-td-level {
    width: 60px;
    color: #8e97aa;
}

.bc-td-cost {
    width: 120px;
    color: #8e97aa;
    text-align: right;
}

.bc-preview-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.bc-preview-icon img {
    width: 24px;
    height: 24px;
}

.bc-preview-name {
    color: #c0d0e0;
}

.bc-preview-badge {
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

.bc-badge-drop {
    background: rgba(255, 68, 68, 0.15);
    color: #ff6666;
    border: 1px solid rgba(255, 68, 68, 0.3);
}

.bc-badge-craft {
    background: rgba(255, 165, 0, 0.15);
    color: #ffa500;
    border: 1px solid rgba(255, 165, 0, 0.3);
}

.bc-preview-boss-drop .bc-preview-name {
    color: #ff6666;
}

.bc-preview-boss-craft .bc-preview-name {
    color: #ffa500;
}

/* JASS-код */
.bc-jass-section {
    margin-bottom: 16px;
}

#bcJassToggle {
    cursor: pointer;
    user-select: none;
}

.bc-chevron {
    margin-left: 6px;
    font-size: 0.8rem;
    transition: transform 0.2s;
}

.bc-jass-content {
    margin-top: 8px;
}

.bc-jass-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.bc-copy-btn {
    padding: 4px 10px;
    background: rgba(0, 230, 255, 0.1);
    border: 1px solid rgba(0, 230, 255, 0.3);
    border-radius: 4px;
    color: #00e6ff;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.2s;
}

.bc-copy-btn:hover {
    background: rgba(0, 230, 255, 0.2);
}

.bc-jass-note {
    color: #5a6a7a;
    font-size: 0.7rem;
    font-style: italic;
}

.bc-jass-code {
    background: #060d14;
    border: 1px solid rgba(0, 230, 255, 0.1);
    border-radius: 4px;
    padding: 10px 12px;
    color: #a0c0e0;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    overflow-x: auto;
    white-space: pre;
    max-height: 300px;
}

/* Мобильная адаптация */
@media (max-width: 720px) {
    .bc-stage-slots {
        grid-template-columns: repeat(3, 1fr);
    }

    .bc-stage-header {
        flex-wrap: wrap;
    }

    .bc-stage-cost {
        margin-left: 0;
        width: 100%;
        margin-top: 4px;
    }

    .bc-group-row {
        flex-wrap: wrap;
    }

    .bc-group-hint {
        width: 100%;
        margin-top: 4px;
    }

    .bc-preview-table {
        font-size: 0.75rem;
    }

    .bc-preview-table th,
    .bc-preview-table td {
        padding: 4px 6px;
    }

    .bc-td-cost {
        width: auto;
    }

    .bc-preview-icon img {
        width: 20px;
        height: 20px;
    }

    .bc-jass-code {
        font-size: 0.7rem;
        padding: 10px;
        max-height: 250px;
    }

    .bc-jass-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .bc-top-bar {
        flex-direction: column;
        gap: 8px;
    }

    .bc-top-bar .calc-back-link {
        text-align: center;
    }

    .bc-slot {
        min-height: 72px;
    }

    .bc-slot-icon img {
        width: 36px;
        height: 36px;
    }

    .bc-slot-name {
        font-size: 0.58rem;
    }

    .bc-slot-cost {
        font-size: 0.54rem;
    }

    .bc-slot-keep-toggle {
        opacity: 1;
        font-size: 0.55rem;
    }

    .bc-add-stage-btn {
        font-size: 0.85rem;
        padding: 10px;
    }

    /* Каталог — горизонтальный скролл табов */
    .calc-catalog-section .category-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .calc-catalog-section .category-tabs::-webkit-scrollbar {
        display: none;
    }

    .calc-catalog-section .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .calc-catalog-grid {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
        gap: 6px;
    }

    .calc-catalog-item {
        padding: 6px 3px;
    }

    .calc-catalog-icon img {
        width: 36px;
        height: 36px;
    }

    .calc-catalog-name {
        font-size: 0.68rem;
    }

    .calc-catalog-cost {
        font-size: 0.6rem;
    }

    .calc-search {
        max-width: 100%;
    }
}

@media (max-width: 500px) {
    .bc-stage-slots {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .bc-slot {
        min-height: 68px;
    }

    .bc-slot-icon img {
        width: 36px;
        height: 36px;
    }

    .bc-slot-name {
        font-size: 0.58rem;
    }

    .bc-slot-keep-toggle {
        opacity: 1;
        font-size: 0.55rem;
    }

    .bc-stage {
        padding: 10px;
    }

    .bc-stage-num {
        font-size: 0.9rem;
    }

    .bc-preview-table {
        font-size: 0.68rem;
    }

    .bc-preview-table .bc-td-level {
        display: none;
    }

    .bc-preview-badge {
        font-size: 0.58rem;
    }

    .bc-jass-code {
        font-size: 0.65rem;
        padding: 8px;
    }

    .calc-catalog-grid {
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    }

    .calc-catalog-icon img {
        width: 32px;
        height: 32px;
    }
}