/* style.css - Оптимизировано для высокой производительности (GPU Acceleration) */

:root {
    --primary: #5bc9b8;
    --primary-glow: rgba(125, 210, 190, 0.4);
    --surface-bg: rgba(8, 16, 22, 0.65);
    --glass-border: rgba(255, 255, 255, 0.08);
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; 
    background-color: #081016; 
    font-family: 'Space Grotesk', sans-serif;
    /* Блокируем выделение во всем документе надежно */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

canvas { 
    display: block; 
    width: 100%; 
    height: 100%; 
    /* Переносим канвас на отдельный композитный слой GPU */
    transform: translateZ(0);
    will-change: transform;
}

/* === ИКОНКИ И ТИПОГРАФИКА === */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal; font-style: normal;
    font-size: 24px; line-height: 1; letter-spacing: normal;
    text-transform: none; display: inline-block;
    white-space: nowrap; word-wrap: normal; direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.icon-filled { font-variation-settings: 'FILL' 1; }
.gold-glow { color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.6); }

/* === БАЗОВЫЕ КНОПКИ И UI === */
.icon-btn {
    background: transparent; border: none; outline: none;
    color: rgba(255, 255, 255, 0.5); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative; transition: color 0.3s ease;
}
.icon-btn:hover { color: var(--primary); }
.icon-btn span { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 300; }
.icon-btn:hover span { transform: rotate(90deg); }

/* === СТИЛЬ ДЛЯ КЛАН-ТЕГА (РАМКА) === */
.clan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    color: inherit; 
    background: transparent; 
    border: 1px solid currentColor; 
    border-radius: 4px;
    margin-right: 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
    opacity: 0.85; 
}

.leaderboard-item.me .clan-badge {
    background: rgba(73, 221, 181, 0.15); 
    border-color: var(--primary);
    color: var(--primary);
    opacity: 1;
    text-shadow: none;
}

/* =======================================================
   === ПРЕМИУМ-РАМКИ ДЛЯ КНОПОК ГЛАВНОГО МЕНЮ ===
   ======================================================= */
.btn-premium-rect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(8, 16, 22, 0.7);
    border: 1px solid rgba(73, 221, 181, 0.25);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(73, 221, 181, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #49ddb5;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-premium-rect:hover {
    background: rgba(8, 16, 22, 0.85);
    border-color: var(--primary);
    box-shadow: 0 0 18px rgba(73, 221, 181, 0.35), inset 0 0 12px rgba(73, 221, 181, 0.15);
    color: #ffffff;
}

.btn-premium-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(8, 16, 22, 0.7);
    border: 1px solid rgba(73, 221, 181, 0.25);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(73, 221, 181, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #49ddb5;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-premium-square:hover {
    background: rgba(8, 16, 22, 0.85);
    border-color: var(--primary);
    box-shadow: 0 0 18px rgba(73, 221, 181, 0.35), inset 0 0 12px rgba(73, 221, 181, 0.15);
    color: #ffffff;
}

.btn-premium-square span,
.btn-premium-square .menu-icon-canvas {
    transition: transform 0.3s ease;
}

.btn-premium-square:hover span,
.btn-premium-square:hover .menu-icon-canvas {
    transform: scale(1.1);
}

/* === ЛИДЕРБОРД В ИГРЕ === */
#leaderboard {
    position: fixed; top: 20px; right: 20px; z-index: 50;
    background: rgba(8, 16, 22, 0.5); border: 1px solid rgba(125, 210, 190, 0.12); 
    border-radius: 10px; padding: 16px; width: 220px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); pointer-events: none;
    display: flex; flex-direction: column;
}
.leaderboard-title {
    font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 900;
    color: var(--primary); text-transform: uppercase; letter-spacing: 0.1em;
    text-align: center; margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(125, 210, 190, 0.12);
}
.leaderboard-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.7); }
.leaderboard-item.me { color: #fff; font-weight: 700; }
.leaderboard-rank { width: 34px; flex-shrink: 0; color: rgba(255,255,255,0.4); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.leaderboard-name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; display: flex; align-items: center; }
.leaderboard-item.me .leaderboard-name { color: var(--primary); font-weight: 500; }
.leaderboard-mass { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--primary); text-align: right; }
.leaderboard-separator { text-align: center; color: rgba(255,255,255,0.3); margin: 4px 0; line-height: 1; }

/* === ПАНЕЛЬ ОТЛАДКИ === */
#debug-panel {
    position: fixed; bottom: 20px; left: 20px; z-index: 60;
    background: rgba(0, 0, 0, 0.8); border: 1px solid rgba(0, 195, 255, 0.2);
    border-radius: 8px; padding: 12px 16px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: rgba(255,255,255,0.7); backdrop-filter: blur(5px);
    pointer-events: none; min-width: 180px;
}
.debug-title {
    color: #00C3FF; font-weight: 700; margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px dashed rgba(0, 195, 255, 0.3); padding-bottom: 6px;
}
.debug-row { display: flex; justify-content: space-between; margin-bottom: 4px; gap: 16px; }
.debug-val { color: var(--primary); font-weight: 600; }
.debug-val.high { color: #ffb4ab; text-shadow: 0 0 8px rgba(255, 180, 171, 0.4); }

/* =========================================
   === ДИЗАЙН ВСПЛЫВАЮЩИХ ОКОН (МОДАЛКИ) === 
   ========================================= */

.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(6, 14, 18, 0.85); backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }

.glass-window {
    background: linear-gradient(135deg, rgba(8, 16, 22, 0.98) 0%, rgba(6, 14, 18, 0.99) 100%);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(108, 250, 208, 0.15);
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.9);
    transform: scale(0.95); opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    will-change: transform, opacity;
}
.modal-overlay.active .glass-window { transform: scale(1); opacity: 1; }

.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(108, 250, 208, 0.2); border-radius: 4px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(108, 250, 208, 0.5); }

/* Убираем белый браузерный контур при фокусе на полях ввода */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible {
    outline: none;
}

#mobile-blocker { background: #081016; z-index: 9999; }

/* === ЛИГИ (КНОПКИ И ТАБЛИЦА) === */
.league-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border-radius: 12px; cursor: pointer; min-width: 100px;
    height: 56px;
}

.league-card:hover { 
    background: rgba(255, 255, 255, 0.06); 
    border-color: rgba(255, 255, 255, 0.1);
}

.league-card.active { 
    background: rgba(73, 221, 181, 0.15);
    border-color: rgba(73, 221, 181, 0.4);
    box-shadow: 0 0 18px rgba(73, 221, 181, 0.08);
}

.league-card .l-text {
    font-family: 'Rubik', sans-serif;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.league-card .l-mass {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.league-card.active .l-text { 
    color: #49ddb5;
}

.league-card.active .l-mass { 
    color: rgba(73, 221, 181, 0.6);
}

.table-grid {
    display: grid; 
    grid-template-columns: 40px minmax(140px, 1fr) 110px 110px 100px 95px;
    align-items: center; gap: 12px; 
}

.table-grid > div:nth-child(1) { text-align: center; } 
.table-grid > div:nth-child(2) { text-align: left !important; display: flex; align-items: center; } 
.table-grid > div:nth-child(3), 
.table-grid > div:nth-child(4),
.table-grid > div:nth-child(5), 
.table-grid > div:nth-child(6) { text-align: center; } 

.row-hover {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.15s;
}

.row-hover:hover { background: rgba(255, 255, 255, 0.025); }

.row-hover.my-row {
    background: rgba(73, 221, 181, 0.04);
    border-bottom-color: rgba(73, 221, 181, 0.08);
}

.row-hover.my-row:hover { background: rgba(73, 221, 181, 0.07); }

.data-cell {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    letter-spacing: 0.03em; 
}

.row-hover.my-row .data-cell {
    color: rgba(255, 255, 255, 0.7);
}

#league-buttons-container { scrollbar-width: none; }
#league-buttons-container::-webkit-scrollbar { display: none; }


/* =======================================================
   === ПРЕМИУМ-ЯЧЕЙКИ УЛУЧШЕНИЙ                        ===
   ======================================================= */
.upg-card {
    background: rgba(8, 16, 22, 0.6);
    border: 1px solid rgba(73, 221, 181, 0.1);
    border-radius: 20px; 
    padding: 20px;
    display: flex; 
    flex-direction: column;
    position: relative; 
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.upg-card:hover {
    border-color: rgba(73, 221, 181, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(73, 221, 181, 0.05);
    background: rgba(12, 22, 30, 0.8);
}

.upg-card::before {
    content: ''; 
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--tier-color), transparent);
    opacity: 0.3; 
    transition: opacity 0.3s ease;
}
.upg-card:hover::before { 
    opacity: 1; 
    box-shadow: 0 2px 10px var(--tier-color); 
}

.upg-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.icon-box {
    width: 44px; 
    height: 44px; 
    border-radius: 12px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--tier-color); 
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.upg-card:hover .icon-box {
    background: var(--tier-color-alpha);
    border-color: var(--tier-color);
    box-shadow: 0 0 15px var(--tier-color-alpha);
    transform: scale(1.05);
}
.icon-box span { font-size: 24px; font-variation-settings: 'FILL' 1; }

/* Иконки улучшений из спрайт-листа (канвас) */
.upg-icon-canvas {
    display: block;
    pointer-events: none;
}

.title-area { flex-grow: 1; }

.upg-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; 
    font-size: 14px;
    text-transform: uppercase; 
    letter-spacing: 0.05em;
    color: #ffffff; 
    margin-bottom: 6px;
    line-height: 1.1;
}

.level-segments { display: flex; gap: 3px; }
.segment {
    flex: 1; height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px; transition: background 0.3s ease, box-shadow 0.3s ease;
}
.segment.active { background: var(--tier-color); box-shadow: 0 0 6px var(--tier-color); }
.upg-desc { font-size: 11px; color: #8fa69c; line-height: 1.5; margin-bottom: 16px; min-height: 33px; }

.stat-box {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px; padding: 10px 12px;
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; margin-bottom: 16px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.stat-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: #6a8278; font-weight: 700; }
.stat-values { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.stat-current { color: var(--tier-color); text-shadow: 0 0 8px var(--tier-color-alpha); }
.stat-arrow { color: rgba(255, 255, 255, 0.2); font-size: 10px !important; }
.stat-next { color: rgba(255, 255, 255, 0.4); }

.action-dock { display: flex; gap: 8px; }

.btn-sell {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease; flex-shrink: 0;
}
.btn-sell:hover:not(:disabled) { background: rgba(255, 51, 102, 0.1); color: #FF3366; border-color: rgba(255, 51, 102, 0.3); }
.btn-sell:disabled { opacity: 0.1; cursor: not-allowed; color: rgba(255,255,255,0.05); border-color: transparent; }

.btn-buy { flex-grow: 1; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tier-color); color: var(--tier-color);
    display: flex; align-items: center; justify-content: center;
    gap: 8px; cursor: pointer; transition: all 0.2s ease;
    font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 13px; text-transform: uppercase;
}

.upg-card:hover .btn-buy:not(:disabled) { background: var(--tier-color); color: #081016; box-shadow: 0 4px 15px var(--tier-color-alpha); }
.btn-buy:active:not(:disabled) { transform: scale(0.97); }
.btn-buy:disabled { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.05); color: rgba(255,255,255,0.15); cursor: not-allowed; box-shadow: none; }
.btn-buy .mutagen-icon-canvas { vertical-align: middle; }
.maxed .btn-buy { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: #ffffff; cursor: not-allowed; }
.maxed:hover .btn-buy { background: rgba(255, 255, 255, 0.05); color: #ffffff; box-shadow: none; }


/* =======================================================
   === СКИЛЛЫ (Кнопки Q, W, E - Minimalist AAA)        ===
   ======================================================= */
#ui { 
    position: fixed; 
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 50; 
    pointer-events: none; 
}

/* =======================================================
   === ПАНЕЛЬ УМЕНИЙ (PULSE RING HUD)                    ===
   ======================================================= */
.skillbar {
    display: flex;
    gap: 30px;
    transform: scale(0.55);
    transform-origin: center bottom;
}

/* Кнопки управляются только клавиатурой: мышь их не трогает */
.cell { display: flex; flex-direction: column; align-items: center; }
.cell[data-k="q"] { --c: #ffb336; --cd: rgba(255, 179, 54, 0.16); --g: rgba(255, 179, 54, 0.45); }
.cell[data-k="w"] { --c: #3ee2ea; --cd: rgba(62, 226, 234, 0.14); --g: rgba(62, 226, 234, 0.45); }
.cell[data-k="e"] { --c: #a88bff; --cd: rgba(168, 139, 255, 0.16); --g: rgba(168, 139, 255, 0.45); }
.cell[data-k="z"] { --c: #b0bec5; --cd: rgba(176, 190, 197, 0.14); --g: rgba(176, 190, 197, 0.45); }
.cell[data-k="z"] .num { font-size: 32px; }

.btnwrap { position: relative; width: 124px; height: 124px; }
.rings {
    position: absolute; inset: 0; width: 124px; height: 124px;
    pointer-events: none; overflow: visible;
    filter: drop-shadow(0 0 6px var(--g));
}
.track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 7; }
.arc-out {
    fill: none; stroke: var(--c); stroke-width: 7; stroke-linecap: round;
    stroke-dasharray: 100; transition: opacity 0.25s;
}

.ab {
    position: absolute; inset: 15px; border-radius: 50%; border: 0; padding: 0; font-family: inherit;
    display: grid; place-items: center; pointer-events: none;
    background: radial-gradient(circle at 50% 30%, #1a2540 0%, #0d1526 68%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 18px 38px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.25s;
}

.letter {
    font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 32px; line-height: 1; color: var(--c);
    text-shadow: 0 0 18px var(--g); transition: color 0.25s, opacity 0.18s;
}
.num {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 24px; line-height: 1;
    color: var(--c); font-variant-numeric: tabular-nums; opacity: 0;
    transition: opacity 0.18s; pointer-events: none;
}
.cap {
    margin-top: 10px; font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 16px;
    letter-spacing: 0.32em; text-transform: uppercase; color: #61708a; transition: color 0.25s;
}
.cell.st-active .cap { color: var(--c); }

/* ---------- состояния ---------- */
.cell.st-cool .letter { opacity: 0; }
.cell.st-cool .num { opacity: 1; }
.cell.st-cool .arc-out { opacity: 0.45; }

/* у W и E во время действия буква уступает место таймеру */
.cell.timed.st-active .letter { opacity: 0; }
.cell.timed.st-active .num { opacity: 1; color: #ffffff; text-shadow: 0 0 16px var(--g); }

.cell.st-active .ab {
    box-shadow: inset 0 0 0 999px var(--cd), inset 0 0 0 1.5px var(--c),
                inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.5);
}
.cell.st-active .letter { color: #ffffff; }
.cell.st-active .rings { filter: drop-shadow(0 0 11px var(--g)); }
.cell.st-ready .rings { animation: skillBreath 2.8s ease-in-out infinite; }
.cell.st-ready .letter { animation: skillLetterBreath 3s ease-in-out infinite; }
.cell.st-ready .arc-out { opacity: 0.8; }
.cell.q-on .rings { animation: skillQGlow 1.5s ease-in-out infinite; }

/* ---------- применение (вспышка + волна) ---------- */
.ripple {
    position: absolute; inset: 15px; border-radius: 50%; border: 2px solid var(--c);
    opacity: 0; pointer-events: none;
}
.cell.st-cast .ab { animation: skillCastPop 0.5s cubic-bezier(0.34, 1.56, 0.5, 1); }
.cell.st-cast.rip .ripple { animation: skillRippleOut 0.65s ease-out; }
.cell.deny { animation: skillDenyShake 0.32s; }

@keyframes skillBreath { 0%,100% { filter: drop-shadow(0 0 5px var(--g)); } 50% { filter: drop-shadow(0 0 13px var(--g)); } }
@keyframes skillQGlow { 0%,100% { filter: drop-shadow(0 0 9px var(--g)); } 50% { filter: drop-shadow(0 0 18px var(--g)); } }
@keyframes skillLetterBreath { 0%,100% { opacity: 0.66; } 50% { opacity: 1; } }
@keyframes skillCastPop { 0% { transform: scale(1); } 30% { transform: scale(0.88); } 100% { transform: scale(1); } }
@keyframes skillRippleOut { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes skillDenyShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
    .skillbar * { animation: none !important; transition: none !important; }
}
@media (max-width: 600px) {
    .skillbar { gap: 16px; transform: scale(0.46); transform-origin: center bottom; }
    #ui { bottom: 30px; }
}

/* === СТИЛИ ДЛЯ ОКНА ДРУЗЕЙ === */
.friend-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.friend-row:hover {
    background: rgba(73, 221, 181, 0.05);
    border-color: rgba(73, 221, 181, 0.15);
}
.friend-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(73, 221, 181, 0.15), rgba(0, 186, 148, 0.1));
    border: 1px solid rgba(73, 221, 181, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    color: #49ddb5;
}
.friend-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.friend-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.friend-id-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.05em;
}
.friend-record {
    width: 150px;
    padding: 6px 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #49ddb5;
    flex-shrink: 0;
    white-space: nowrap;
}
.friend-row--list {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 150px 96px 32px;
}
.friend-league {
    width: 96px;
    padding: 6px 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #49ddb5;
    flex-shrink: 0;
    white-space: nowrap;
}
.friend-status {
    padding: 4px 12px;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.status-online {
    background: rgba(73, 221, 181, 0.12);
    color: #49ddb5;
    border: 1px solid rgba(73, 221, 181, 0.25);
}
.status-offline {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.friend-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.friend-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.4);
}
.friend-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(73, 221, 181, 0.3);
}
.friend-action-btn.danger:hover {
    background: rgba(255, 180, 171, 0.15);
    color: #ffb4ab;
    border-color: rgba(255, 180, 171, 0.4);
}
.friend-action-btn.accept {
    color: rgba(73, 221, 181, 0.5);
    border-color: rgba(73, 221, 181, 0.2);
}
.friend-action-btn.accept:hover {
    background: rgba(73, 221, 181, 0.15);
    color: #49ddb5;
    border-color: rgba(73, 221, 181, 0.5);
}
.request-row {
    background: rgba(255, 255, 255, 0.01);
}
.request-row .friend-avatar {
    background: linear-gradient(135deg, rgba(255, 208, 0, 0.12), rgba(255, 180, 0, 0.08));
    border-color: rgba(255, 208, 0, 0.2);
    color: #ffd000;
}
.friend-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}
.friend-show-more:hover {
    background: rgba(73, 221, 181, 0.08);
    color: #49ddb5;
    border-color: rgba(73, 221, 181, 0.3);
}

/* === ИНДИКАТОРЫ БУСТЕРОВ (ЛЕВЫЙ ВЕРХНИЙ УГОЛ) === */
#boosters-container {
    position: fixed;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 50;
    pointer-events: none;
}

.booster-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(8, 16, 22, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(73, 221, 181, 0.25);
    border-radius: 12px;
    padding: 8px 14px;
    min-width: 90px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.booster-indicator.hidden {
    display: none;
}

.booster-icon {
    font-size: 22px !important;
    color: #49ddb5;
    font-variation-settings: 'FILL' 1;
}

.booster-timer {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    min-width: 32px;
    text-align: right;
}

.booster-timer.urgent {
    color: #ffb4ab;
    animation: booster-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes booster-pulse {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

/* === ИНДИКАТОРЫ ЖИЗНЕЙ (НАД МИНИКАРТОЙ, ПРАВЫЙ НИЖНИЙ УГОЛ) === */
#lives-container {
    position: fixed;
    bottom: 250px;
    right: 20px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 50;
    pointer-events: none;
}

.lives-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(8, 16, 22, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(73, 221, 181, 0.25);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.lives-slot.lost {
    display: none;
}

.lives-heart {
    font-size: 26px !important;
    color: #ff3366;
    text-shadow: 0 0 12px rgba(255, 51, 102, 0.5);
}

/* =======================================================
   === КАРТОЧКИ ЗАДАНИЙ — МИНИМАЛИЗМ                   ===
   ======================================================= */
.quest {
    position: relative;
    width: 100%;
    display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px;
    padding: 20px 20px 18px;
    border-radius: 20px;
    background: rgba(10, 18, 26, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.quest:hover { border-color: rgba(125, 210, 190, 0.22); }

.quest.is-ready {
    background: rgba(12, 22, 28, 0.88);
    border-color: rgba(73, 221, 181, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 34px -14px rgba(73, 221, 181, 0.28);
}

.quest__icon { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.quest__icon .ico { font-size: 26px; color: #49ddb5; position: relative; z-index: 1; }
/* Имя quest-ring вместо ring — чтобы не конфликтовать с Tailwind-утилитой .ring
   (она добавляет квадратную box-shadow рамку вокруг квадратного SVG). */
.quest-ring { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); }
.quest-ring circle { fill: none; stroke-width: 3; }
.quest-ring__bg { stroke: rgba(125, 210, 190, 0.12); }
.quest-ring__prog {
    stroke: #49ddb5; stroke-linecap: round;
    stroke-dasharray: 175.9; stroke-dashoffset: 175.9;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.25, 0.8, 0.3, 1);
}

.quest__main { min-width: 0; }

.quest__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.quest__kicker { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); }
.quest__title { margin: 5px 0 0; font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: 0.02em; color: #fff; }

.quest__reward {
    display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; flex: none;
    background: rgba(73, 221, 181, 0.06); border: 1px solid rgba(73, 221, 181, 0.18);
}
.quest__reward b { font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 700; color: #6cfad0; }

.quest__desc { margin: 8px 0 14px; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, 0.4); }

.qbar {
    position: relative; height: 10px; border-radius: 6px; overflow: hidden;
    background: rgba(125, 210, 190, 0.09); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
}
.qbar__fill {
    position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 6px;
    background: linear-gradient(180deg, #69eac5 0%, #49ddb5 48%, #2fb898 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 5px -3px rgba(18, 72, 56, 0.5);
    transition: width 0.9s cubic-bezier(0.25, 0.8, 0.3, 1);
}

.qrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 7px; }
.qvals { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.4); }
.qvals b { font-family: 'Rubik', sans-serif; font-size: 13px; font-weight: 700; color: #6cfad0; margin-right: 4px; }
.qvals .sep { margin-right: 4px; opacity: 0.5; }
.qpct { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.35); white-space: nowrap; }
.quest.is-ready .qpct { color: #49ddb5; }

.quest__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.quest__meta { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); }
.quest.is-ready .quest__meta { color: #49ddb5; }

/* КНОПКА «ЗАБРАТЬ» — глянцевая клавиша */
.card__buy {
    position: relative; overflow: hidden;
    width: 148px; height: 40px; flex: none;
    border: 0; border-radius: 12px; cursor: pointer; user-select: none;
    color: #0a1a14;
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 11px;
    letter-spacing: 0.2em; text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    background: linear-gradient(180deg, #69eac5 0%, #49ddb5 48%, #2fb898 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -7px 9px -7px rgba(18, 72, 56, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 3px 0 #1e7056,
        0 9px 18px -8px rgba(8, 30, 22, 0.75);
    transition: filter 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}
.card__buy::after {
    content: '';
    position: absolute; top: -25%; bottom: -25%; left: -70%; width: 36%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0));
    transform: skewX(-16deg); pointer-events: none;
}
.card__buy[disabled] {
    cursor: not-allowed;
    background: rgba(73, 221, 181, 0.07);
    color: rgba(108, 250, 208, 0.5);
    text-shadow: none;
    box-shadow: inset 0 0 0 1px rgba(73, 221, 181, 0.22);
}
.quest.is-ready .card__buy:not([disabled]) { animation: claim-pulse 2.6s ease-in-out infinite; }
@keyframes claim-pulse { 50% { filter: brightness(1.12) drop-shadow(0 0 7px rgba(73, 221, 181, 0.4)); } }

@media (hover:hover) {
    .card__buy:hover:not([disabled]) {
        animation: none;
        filter: brightness(1.05);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            inset 0 -7px 9px -7px rgba(18, 72, 56, 0.4),
            inset 0 0 0 1px rgba(255, 255, 255, 0.18),
            0 3px 0 #1e7056,
            0 0 22px -2px rgba(73, 221, 181, 0.4);
    }
    .card__buy:hover:not([disabled])::after {
        transition: left 0.55s cubic-bezier(0.25, 0.6, 0.2, 1);
        left: 135%;
    }
    .card__buy:active:not([disabled]) {
        transform: translateY(2px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            inset 0 -7px 9px -7px rgba(18, 72, 56, 0.5),
            inset 0 0 0 1px rgba(255, 255, 255, 0.1),
            0 0 0 #1e7056,
            0 4px 10px -8px rgba(8, 30, 22, 0.7);
    }
}

/* Кнопка выбора скина — глянцевая клавиша в стиле активной «Забрать» (со свечением) */
.btn-equip {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 168px; height: 48px; padding: 0 40px;
    border: 0; border-radius: 14px; cursor: pointer; user-select: none;
    color: #0a1a14;
    font-family: 'Inter', sans-serif; font-weight: 900; font-size: 13px;
    letter-spacing: 0.22em; text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    background: linear-gradient(180deg, #69eac5 0%, #49ddb5 48%, #2fb898 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -7px 9px -7px rgba(18, 72, 56, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 3px 0 #1e7056,
        0 9px 18px -8px rgba(8, 30, 22, 0.75);
    transition: filter 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}
.btn-equip::after {
    content: '';
    position: absolute; top: -25%; bottom: -25%; left: -70%; width: 36%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0));
    transform: skewX(-16deg); pointer-events: none;
}
.btn-equip:not([disabled]) { animation: claim-pulse 2.6s ease-in-out infinite; }
.btn-equip[disabled] {
    cursor: not-allowed;
    filter: drop-shadow(0 0 7px rgba(73, 221, 181, 0.4));
}

@media (hover:hover) {
    .btn-equip:hover:not([disabled]) {
        animation: none;
        filter: brightness(1.05);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            inset 0 -7px 9px -7px rgba(18, 72, 56, 0.4),
            inset 0 0 0 1px rgba(255, 255, 255, 0.18),
            0 3px 0 #1e7056,
            0 0 22px -2px rgba(73, 221, 181, 0.4);
    }
    .btn-equip:hover:not([disabled])::after {
        transition: left 0.55s cubic-bezier(0.25, 0.6, 0.2, 1);
        left: 135%;
    }
    .btn-equip:active:not([disabled]) {
        transform: translateY(2px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            inset 0 -7px 9px -7px rgba(18, 72, 56, 0.5),
            inset 0 0 0 1px rgba(255, 255, 255, 0.1),
            0 0 0 #1e7056,
            0 4px 10px -8px rgba(8, 30, 22, 0.7);
    }
}

.q-done {
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
    opacity: 0.5; color: #49ddb5;
}

.q-done-t {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
}

/* =======================================================
   === ПОЛЯ РЕАКЦИЙ В LOGIN-ДРОПДАУНЕ                ===
   ======================================================= */
.reaction-input {
    transition: border-color 0.2s ease, color 0.2s ease;
}

.reaction-input:focus {
    color: #fff;
}

.reaction-input.invalid {
    border-color: rgba(255, 180, 171, 0.4) !important;
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* =======================================================
   === КАРТОЧКИ МАГАЗИНА МУТАГЕНОВ (GOLD-дизайн)       ===
   ======================================================= */
.shop-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 14px 16px;
    border-radius: 16px;
    background: rgba(12, 20, 28, 0.85);
    border: 1px solid rgba(125, 210, 190, 0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.shop-card--sale { border-color: rgba(245,184,74,0.14); }
.shop-card:hover {
    background: rgba(18,28,38,0.95);
    border-color: rgba(125,210,190,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 22px 36px -24px rgba(0,0,0,0.95);
}
.shop-card--sale:hover { border-color: rgba(245,184,74,0.38); }
.shop-card__badge {
    position: absolute; top: 11px; left: 11px; z-index: 2;
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 10px; letter-spacing: 0.02em;
    color: #241803; background: #f5b84a;
    padding: 5px 7px 4px; border-radius: 8px;
    box-shadow: 0 6px 14px -7px rgba(245,184,74,0.6);
}
.shop-card__vial { display: flex; justify-content: center; margin-bottom: 8px; }
.shop-card__vial .s-vial { width: 42px; height: 63px; }
.s-vial__glass { fill: rgba(73,221,181,0.03); stroke: rgba(125,210,190,0.45); stroke-width: 2; stroke-linecap: round; }
.s-vial__cap { fill: #0d1b1f; stroke: rgba(125,210,190,0.45); stroke-width: 2; }
.s-vial__shine { fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 1.5; stroke-linecap: round; }
.s-vial__fill { fill: #49ddb5; opacity: 0.75; transition: opacity 0.35s; }
.s-vial__surface { fill: #8cf5d8; }
.s-vial__liquid { transform: translateY(calc((1 - var(--lv,0.5)) * 39px)); }
.s-vial__bub { fill: #cdfdea; opacity: 0; }
@keyframes shop-bub {
    0%   { opacity: 0; transform: translateY(3px); }
    30%  { opacity: 0.9; }
    100% { opacity: 0; transform: translateY(-11px); }
}
.shop-card:hover .s-vial__fill { opacity: 0.95; }
.shop-card:hover .s-vial__bub {
    animation-name: shop-bub; animation-duration: 1.5s;
    animation-timing-function: ease-in; animation-iteration-count: infinite;
    animation-delay: var(--d,0s);
}
.shop-card__amount { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 0.01em; color: #fff; }
.shop-card__unit { margin-top: 4px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.3); }

.shop-card__pricebox {
    margin-top: 11px; margin-bottom: 14px;
    display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 6px;
}

.shop-card__old {
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px;
    color: rgba(255,255,255,0.22);
    text-decoration: line-through;
    text-decoration-color: rgba(245,184,74,0.5); text-decoration-thickness: 1.5px;
}

.shop-card__price {
    font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 19px;
    letter-spacing: 0.01em; color: #eef7f2;
}

.shop-card__price .s-rub {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px;
    color: rgba(255,255,255,0.4); margin-left: 3px;
}

.shop-card__meta {
    margin-top: 2px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 9.5px;
    letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.25);
}

.shop-card__meta--save { color: #f5b84a; }

.shop-card__buy {
    margin-top: auto; position: relative; overflow: hidden;
    width: 100%; height: 36px;
    border: 0; border-radius: 10px; cursor: pointer; user-select: none;
    color: #0a1a14;
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 10px;
    letter-spacing: 0.2em; text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    background: linear-gradient(180deg, #69eac5 0%, #49ddb5 48%, #2fb898 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -7px 9px -7px rgba(18,72,56,0.45),
        inset 0 0 0 1px rgba(255,255,255,0.14),
        0 3px 0 #1e7056,
        0 9px 18px -8px rgba(8,30,22,0.75);
    transition: filter 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}

.shop-card__buy:focus-visible { outline: 2px solid #8cf5d8; outline-offset: 2px; }

.shop-card__buy::after {
    content: '';
    position: absolute; top: -25%; bottom: -25%; left: -70%; width: 36%;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.55) 50%, rgba(255,255,255,0));
    transform: skewX(-16deg); pointer-events: none;
}

.shop-card__buy .btn__lbl { display: block; padding-left: 0.2em; }
.shop-card__buy[disabled] { cursor: default; }

.shop-card__buy.is-loading {
    filter: saturate(0.75) brightness(0.92); transform: translateY(2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -7px 9px -7px rgba(18,72,56,0.45),
        inset 0 0 0 1px rgba(255,255,255,0.12),
        0 1px 0 #1e7056,
        0 5px 12px -8px rgba(8,30,22,0.7);
}

.shop-card__buy.is-done { animation: shop-pop 0.35s ease; }
@keyframes shop-pop { 40% { transform: scale(1.05); } }

.btn__spin, .btn__done {
    display: none; position: absolute; inset: 0;
    align-items: center; justify-content: center; gap: 7px;
}

.shop-card__buy.is-loading .btn__lbl { visibility: hidden; }
.shop-card__buy.is-loading .btn__spin { display: flex; }
.shop-card__buy.is-done .btn__lbl { visibility: hidden; }
.shop-card__buy.is-done .btn__done { display: flex; }

.btn__spin::after {
    content: '';
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid rgba(10,26,20,0.25); border-top-color: #0a1a14;
    animation: shop-spin 0.7s linear infinite;
}

.btn__done svg {
    width: 15px; height: 15px;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.35));
}

@keyframes shop-spin { to { transform: rotate(360deg); } }

@media (hover:hover) {
    .shop-card__buy:hover:not([disabled]) {
        filter: brightness(1.05);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.8),
            inset 0 -7px 9px -7px rgba(18,72,56,0.4),
            inset 0 0 0 1px rgba(255,255,255,0.18),
            0 3px 0 #1e7056,
            0 0 22px -2px rgba(73,221,181,0.4);
    }
    .shop-card__buy:active:not([disabled]) { transform: translateY(2px); }
}

.shop-card__name {
    font-family: 'Rubik', sans-serif;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
}

.shop-card__desc {
    margin: 8px 0 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4);
    flex: 1 1 auto;
}

/* ================================================================
   НИЖНЯЯ ПАНЕЛЬ (главное меню)
   ================================================================ */
.bottom-link {
    background: none; border: none; cursor: pointer;
    font-family: 'Rubik', sans-serif; font-weight: 300; font-size: 10.5px;
    letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 250, 235, 0.23);
    transition: color 0.2s;
    white-space: pre-line; text-align: center; line-height: 1.5;
}
.bottom-link:hover { color: #ffffff; }

.bottom-brand {
    font-family: 'Rubik', sans-serif; font-weight: 300; font-size: 10.5px;
    letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 250, 235, 0.5);
}

.worm-wrap {
    position: relative;
    display: inline-flex;
}
.worm-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: rgba(12, 23, 16, 0.92);
    border-radius: 999px;
    padding: 4px 10px;
    font-family: 'Rubik', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(240, 250, 235, 0.85);
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.worm-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: calc(50% + 12px);
    transform: translateX(-50%);
    width: 1px;
    height: 12px;
    background: linear-gradient(to bottom, rgba(240, 250, 235, 0.45), rgba(240, 250, 235, 0));
}
.worm-wrap:hover .worm-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.lang-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 999px; cursor: pointer;
    background: rgba(16, 28, 19, 0.5); border: 1px solid rgba(190, 255, 205, 0.2);
    transition: border-color 0.2s;
}
.lang-btn:hover { border-color: rgba(255, 206, 61, 0.6); }
.lang-btn .globe { color: rgba(240, 250, 235, 0.45); }
.lang-btn b { font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); }
.lang-btn .chev { color: rgba(240, 250, 235, 0.45); transition: transform 0.22s; }
#lang-wrap.open .lang-btn .chev { transform: rotate(180deg); }

.lang-menu {
    position: absolute; bottom: calc(100% + 12px); right: 0;
    width: 214px; max-height: 248px; overflow-y: auto;
    background: rgba(12, 23, 16, 0.95); border: 1px solid rgba(190, 255, 205, 0.18); border-radius: 14px;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.5); padding: 6px; z-index: 6;
    display: none;
}
#lang-wrap.open .lang-menu { display: block; }

.lang-opt {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: none; border: none; cursor: pointer;
    padding: 8px 10px; border-radius: 9px;
    font-family: 'Rubik', sans-serif; font-size: 12.5px; color: #ffffff;
}
.lang-opt:hover { background: rgba(190, 255, 205, 0.08); }
.lang-opt .lc {
    font-family: ui-monospace, Menlo, monospace; font-size: 9px; color: rgba(240, 250, 235, 0.45);
    border: 1px solid rgba(190, 255, 205, 0.25); border-radius: 6px;
    padding: 3px 5px; min-width: 28px; text-align: center;
}
.lang-opt.active .lc { border-color: rgba(255, 206, 61, 0.7); color: #ffce3d; }
.lang-opt svg { margin-left: auto; width: 12px; height: 12px; color: #ffce3d; opacity: 0; }
.lang-opt.active svg { opacity: 1; }

.discord-link {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 18px; border-radius: 999px; cursor: pointer;
    background: rgba(88, 101, 242, 0.14); border: 1px solid rgba(190, 255, 205, 0.2);
    color: rgba(170, 180, 255, 0.5); text-decoration: none;
    font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.18em;
    transition: 0.22s;
}
.discord-link:hover {
    background: #5865F2; border-color: rgba(255, 206, 61, 0.6); color: #ffffff;
    transform: translateY(-1px); box-shadow: 0 10px 24px rgba(88, 101, 242, 0.35);
}

/* Модалка Info */
#info-body h3 {
    font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 10.5px;
    letter-spacing: 0.18em; text-transform: uppercase; color: #ffce3d; margin: 16px 0 6px;
}
#info-body h3:first-child { margin-top: 4px; }
#info-body p { font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 13px; line-height: 1.68; color: rgba(240, 250, 235, 0.78); }

/* Тосты (Discord / язык) */
#toasts {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 84px; z-index: 3000;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 10px;
    background: rgba(12, 23, 16, 0.95); border: 1px solid rgba(190, 255, 205, 0.2);
    border-radius: 999px; padding: 10px 18px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    font-family: 'Rubik', sans-serif; font-size: 12px; color: #ffffff; white-space: nowrap;
    animation: toastIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast .tdot { width: 6px; height: 6px; border-radius: 50%; background: #ffce3d; flex: none; }
.toast.out { animation: toastOut 0.28s forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(0.94); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

@media (max-width: 760px) {
    #bottom-bar { flex-direction: column; gap: 12px; padding: 14px 16px; }
    #bottom-bar nav { flex-wrap: wrap; justify-content: center; gap: 14px; }
    #bottom-bar nav i { display: none; }
    #bottom-bar small { display: none; }
}