/* Выделение текста — яркое и читаемое на тёмном фоне */
::selection {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

::-moz-selection {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

 /* Основные стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    user-select: none;
}

/* ===== ГЛОБАЛЬНЫЕ КАСТОМНЫЕ СКРОЛЛБАРЫ (серый дизайн) ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(26, 29, 46, 0.4);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(120, 130, 160, 0.5) 0%, rgba(90, 100, 130, 0.5) 100%);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(140, 150, 180, 0.7) 0%, rgba(110, 120, 150, 0.7) 100%);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, rgba(160, 170, 200, 0.9) 0%, rgba(130, 140, 170, 0.9) 100%);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 130, 160, 0.5) rgba(26, 29, 46, 0.4);
}

/* Начальный экран */
.start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 30%, #1e1e1e 60%, #252525 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: hidden;
}

/* Анимированная сетка на фоне стартового экрана (Matrix-стиль) */
.start-screen-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
    background:
        /* Крупная сетка */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 79px,
            rgba(100, 180, 255, 0.06) 79px,
            rgba(100, 180, 255, 0.06) 80px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 79px,
            rgba(100, 180, 255, 0.06) 79px,
            rgba(100, 180, 255, 0.06) 80px
        ),
        /* Мелкая сетка */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 39px,
            rgba(100, 180, 255, 0.03) 39px,
            rgba(100, 180, 255, 0.03) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 39px,
            rgba(100, 180, 255, 0.03) 39px,
            rgba(100, 180, 255, 0.03) 40px
        );
    animation: grid-drift 12s linear infinite;
}

/* Вторая сетка для эффекта переливания (сдвинутая фаза) */
.start-screen-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 79px,
            rgba(150, 100, 255, 0.04) 79px,
            rgba(150, 100, 255, 0.04) 80px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 79px,
            rgba(150, 100, 255, 0.04) 79px,
            rgba(150, 100, 255, 0.04) 80px
        );
    animation: grid-drift-reverse 18s linear infinite;
    opacity: 0.6;
}

/* Плавающие частицы (цифровой дождь / Matrix-эффект) */
.start-screen-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.start-screen-particles span {
    position: absolute;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 2px;
    animation: particle-fall linear infinite;
    pointer-events: none;
    user-select: none;
}

/* Анимация дрейфа сетки */
@keyframes grid-drift {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(80px, 80px);
    }
}

@keyframes grid-drift-reverse {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-80px, 80px);
    }
}

/* Анимация падения частиц */
@keyframes particle-fall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0;
    }
}

/* Контент поверх сетки */
.start-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: radial-gradient(ellipse at center, rgba(30, 30, 30, 0.5) 0%, rgba(26, 26, 26, 0.8) 60%, transparent 100%);
}

.game-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 0.4rem;
    letter-spacing: 2px;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.6);
    background: linear-gradient(135deg, #f0f0f0 0%, #ffffff 20%, #c0c0c0 40%, #e8e8e8 60%, #ffffff 80%, #d0d0d0 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-shimmer 6s ease-in-out infinite alternate;
    line-height: 1.2;
}

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

.game-subtitle {
    font-size: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1rem, 3vh, 2.5rem);
    opacity: 0.85;
    min-height: 2.2rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    letter-spacing: 1px;
}

/* Анимация мигающего курсора для подзаголовка (только для type/delete анимаций) */
#subtitle-text.typing::after {
    content: '|';
    animation: blink-cursor 0.7s step-end infinite;
    margin-left: 2px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
}

#subtitle-text.hidden-cursor::after {
    content: none;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Базовые настройки для CSS-анимаций подзаголовка */
#subtitle-text {
    display: inline-block;
    transition: none;
}

/* Классы анимаций — используются для отслеживания, стили задаются через inline */
#subtitle-text.anim-fadeIn,
#subtitle-text.anim-blurIn,
#subtitle-text.anim-slideUp,
#subtitle-text.anim-fadeOut,
#subtitle-text.anim-blurOut,
#subtitle-text.anim-slideDown {
    /* CSS-анимации управляются через inline style в JS */
}

.play-button {
    padding: 1.2rem 4rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.play-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.play-button:active {
    transform: scale(0.98);
}

/* Главное меню */
.main-menu {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vh, 18px);
    margin-top: clamp(1.5rem, 4vh, 3.5rem);
    width: 100%;
    max-width: 420px;
    padding: 0 16px;
}

/* Глобальный класс скрытия */
.hidden {
    display: none !important;
}

.main-menu.hidden {
    display: none !important;
}

.menu-button {
    padding: clamp(0.75rem, 1.8vh, 1.2rem) clamp(1.5rem, 4vw, 3rem);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    background: linear-gradient(135deg, #2a2a2a 0%, #323232 50%, #2a2a2a 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.menu-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.menu-button.primary {
    border-color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #323232 0%, #3a3a3a 50%, #323232 100%);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 20px rgba(255, 255, 255, 0.04);
}

.menu-button.secondary {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(42, 42, 42, 0.7);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.menu-button.logout {
    border-color: rgba(255, 80, 80, 0.2);
    background: rgba(60, 25, 25, 0.7);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 80, 80, 0.06);
}

.menu-button.logout:hover {
    border-color: rgba(255, 80, 80, 0.4);
    background: linear-gradient(135deg, #4a2525 0%, #5a3535 50%, #4a2525 100%);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 80, 80, 0.1);
    transform: translateY(-2px);
}

.menu-button:hover {
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 255, 255, 0.06);
    background: linear-gradient(135deg, #323232 0%, #3a3a3a 50%, #323232 100%);
}

.menu-button:active {
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Disabled button styles */
.menu-button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
    filter: grayscale(0.5);
}

.menu-button.disabled:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, #2a2a2a 0%, #323232 50%, #2a2a2a 100%);
}

.button-badge {
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    pointer-events: none;
    white-space: nowrap;
}

.button-text {
    font-size: clamp(0.95rem, 1.3vw, 1.2rem);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.btn-icon-left,
.btn-icon-right {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.menu-button:hover .btn-icon-left,
.menu-button:hover .btn-icon-right {
    opacity: 1;
}

/* Copyright notice */
.copyright-notice {
    margin-top: 2rem;
    padding: 1rem;
    max-width: 900px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(5px);
}

.copyright-notice p {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

/* Экран выбора класса — золотое сечение */
.class-selection {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    animation: classSlideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 20px;
}

.class-selection.hidden {
    display: none !important;
}

@keyframes classSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cardAppear {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Верхняя секция: заголовок (38.2% от золотого сечения) */
.selection-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 0.5rem;
}

.selection-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #ceadff 0%, #9c6dff 50%, #b84ad0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}

.selection-subtitle {
    font-size: 0.95rem;
    opacity: 0.6;
    color: #aaa;
}

/* Основная секция: карточки (61.8% от золотого сечения) */
.class-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1050px;
    margin: 0 auto 0;
}

.class-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: cardAppear 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    display: flex;
    flex-direction: column;
}

.class-card:nth-child(1) { animation-delay: 0.1s; }
.class-card:nth-child(2) { animation-delay: 0.2s; }
.class-card:nth-child(3) { animation-delay: 0.3s; }

.class-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.25);
}

.card-header {
    padding: 16px 16px 12px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    transition: height 0.3s ease;
}

.class-card:hover .card-header::after {
    height: 5px;
}

.lower-class {
    background: linear-gradient(135deg, #e53935 0%, #b71c1c 100%);
}

.middle-class {
    background: linear-gradient(135deg, #fb8c00 0%, #e65100 100%);
}

.upper-class {
    background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
}

.class-icon {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.class-card:hover .class-icon {
    transform: scale(1.15) rotate(-5deg);
}

.class-name {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.card-body {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.class-description {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
    line-height: 1.4;
    font-style: italic;
    text-align: center;
}

.class-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.class-features li {
    padding: 5px 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: padding-left 0.3s ease;
}

.class-card:hover .class-features li {
    padding-left: 4px;
}

.class-features li:last-child {
    border-bottom: none;
}

.class-details {
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: block !important;
    width: 100%;
    max-height: 120px;
    overflow-y: auto;
}

.class-details::-webkit-scrollbar {
    width: 3px;
}

.class-details::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.class-details strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    display: inline;
}

.class-details br {
    display: none;
}

.class-details strong:not(:first-child)::before {
    content: '';
    display: block;
    height: 6px;
}

/* Подсказка при наведении на класс */
.class-hint {
    max-width: 1050px;
    margin: 1.2rem auto 0;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.class-hint.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Нижняя секция: навигация (золотое сечение 38.2%) */
.class-selection-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
}

.class-selection-footer .footer-hint {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.5px;
}

.class-selection-footer .menu-button {
    min-width: auto;
    padding: 0.7rem 1.8rem;
    font-size: 0.95rem;
}

.class-selection-footer .menu-button .button-text {
    font-size: 0.95rem;
    gap: 8px;
}

.class-selection-footer .menu-button .btn-icon-left,
.class-selection-footer .menu-button .btn-icon-right {
    font-size: 1rem;
}

/* Экран загрузки онлайн-мира */
.online-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0e1a 0%, #111633 40%, #0f2840 100%);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.online-loading.hidden {
    display: none;
}

.online-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* Анимированные кольца спиннера */
.online-loading-spinner {
    position: relative;
    width: 80px;
    height: 80px;
}

.spinner-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: #00d4ff;
    border-radius: 50%;
    animation: online-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring-2 {
    width: 60px;
    height: 60px;
    top: 10px;
    left: 10px;
    border-top-color: #7c3aed;
    animation-delay: -0.3s;
    animation-direction: reverse;
}

.spinner-ring-3 {
    width: 40px;
    height: 40px;
    top: 20px;
    left: 20px;
    border-top-color: #10b981;
    animation-delay: -0.6s;
}

@keyframes online-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Текст загрузки */
.online-loading-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.loading-title {
    font-size: 1.2rem;
    color: #e0e0e0;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.loading-subtitle {
    font-size: 0.85rem;
    color: #888;
    font-weight: 400;
}

/* Прогресс-бар */
.online-loading-bar {
    width: 280px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.online-loading-bar-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #7c3aed, #10b981);
    border-radius: 2px;
    transition: width 0.5s ease;
    animation: online-loading-bar 3s ease-in-out infinite;
}

@keyframes online-loading-bar {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* Кнопки ошибки загрузки онлайн-мира */
.loading-error-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.loading-error-buttons button {
    padding: 10px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.loading-error-buttons button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.loading-error-buttons .loading-retry-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.loading-error-buttons .loading-menu-btn {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

/* Игровой интерфейс */
.game-interface {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 30%, #1e1e1e 60%, #252525 100%);
    background-size: cover;
    background-position: center;
    z-index: 500;
}

.game-interface.hidden {
    display: none;
}

.start-screen.hidden {
    display: none !important;
}

/* ===== SESSION KICK MODAL — полноэкранный стиль как главное меню ===== */
#session-kick-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0d0f1c 0%, #1a1d3a 30%, #12142a 60%, #0a0b16 100%);
    z-index: 99999;
    display: flex !important;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#session-kick-modal.visible {
    opacity: 1;
}

/* Анимированная сетка (Matrix-стиль, как в start-screen) */
.session-kick-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
    background:
        /* Крупная сетка */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 79px,
            rgba(100, 180, 255, 0.06) 79px,
            rgba(100, 180, 255, 0.06) 80px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 79px,
            rgba(100, 180, 255, 0.06) 79px,
            rgba(100, 180, 255, 0.06) 80px
        ),
        /* Мелкая сетка */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 39px,
            rgba(100, 180, 255, 0.03) 39px,
            rgba(100, 180, 255, 0.03) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 39px,
            rgba(100, 180, 255, 0.03) 39px,
            rgba(100, 180, 255, 0.03) 40px
        );
    animation: sessionKickGridDrift 20s linear infinite;
}

@keyframes sessionKickGridDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(80px, 80px); }
}

/* Цветовая адаптация сетки под тип */
.session-kick-modal--kick .session-kick-grid {
    opacity: 0.3;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(255, 60, 60, 0.06) 79px, rgba(255, 60, 60, 0.06) 80px),
        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255, 60, 60, 0.06) 79px, rgba(255, 60, 60, 0.06) 80px),
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 60, 60, 0.03) 39px, rgba(255, 60, 60, 0.03) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255, 60, 60, 0.03) 39px, rgba(255, 60, 60, 0.03) 40px);
}

.session-kick-modal--disconnect .session-kick-grid {
    opacity: 0.3;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(60, 120, 255, 0.06) 79px, rgba(60, 120, 255, 0.06) 80px),
        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(60, 120, 255, 0.06) 79px, rgba(60, 120, 255, 0.06) 80px),
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(60, 120, 255, 0.03) 39px, rgba(60, 120, 255, 0.03) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(60, 120, 255, 0.03) 39px, rgba(60, 120, 255, 0.03) 40px);
}

.session-kick-modal--error .session-kick-grid {
    opacity: 0.3;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(255, 150, 50, 0.06) 79px, rgba(255, 150, 50, 0.06) 80px),
        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255, 150, 50, 0.06) 79px, rgba(255, 150, 50, 0.06) 80px),
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 150, 50, 0.03) 39px, rgba(255, 150, 50, 0.03) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255, 150, 50, 0.03) 39px, rgba(255, 150, 50, 0.03) 40px);
}

/* Частицы (цифровой дождь) */
.session-kick-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.session-kick-particles span {
    position: absolute;
    color: rgba(100, 200, 255, 0.08);
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 2px;
    animation: sessionKickParticleFall linear infinite;
    pointer-events: none;
    user-select: none;
}

@keyframes sessionKickParticleFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0;
    }
}

/* Контент поверх сетки */
.session-kick-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 85vh;
    padding: 40px 20px;
    width: 100%;
    max-width: 800px;
}

/* Верхняя часть — иконка и название нарушения */
.session-kick-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.session-kick-icon {
    font-size: 3.5rem;
    animation: sessionKickIconPulse 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 30px currentColor);
}

.session-kick-modal--kick .session-kick-icon {
    color: rgba(255, 60, 60, 0.6);
}

.session-kick-modal--disconnect .session-kick-icon {
    color: rgba(60, 120, 255, 0.6);
}

.session-kick-modal--error .session-kick-icon {
    color: rgba(255, 150, 50, 0.6);
}

.session-kick-modal--ban .session-kick-icon {
    color: rgba(180, 60, 255, 0.6);
}

.session-kick-modal--ban .session-kick-grid {
    opacity: 0.3;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(180, 60, 255, 0.06) 79px, rgba(180, 60, 255, 0.06) 80px),
        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(180, 60, 255, 0.06) 79px, rgba(180, 60, 255, 0.06) 80px),
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(180, 60, 255, 0.03) 39px, rgba(180, 60, 255, 0.03) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(180, 60, 255, 0.03) 39px, rgba(180, 60, 255, 0.03) 40px);
}

@keyframes sessionKickIconPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; }
}

.session-kick-violation {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 3px;
    text-transform: uppercase;
    max-width: 500px;
    line-height: 1.4;
}

/* Центральная часть — название игры */
.session-kick-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: -40px 0; /* смещение для визуального центрирования */
}

.session-kick-game-title {
    font-size: 4.5rem;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(156, 80, 255, 0.3), 2px 2px 6px rgba(0, 0, 0, 0.8);
    background: linear-gradient(135deg, #ceadff 0%, #9c6dff 40%, #b84ad0 60%, #9c6dff 80%, #ceadff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: sessionKickTitleShimmer 6s ease-in-out infinite alternate;
}

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

.session-kick-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 500px;
    line-height: 1.5;
}

/* Нижняя часть — причина и кнопка */
.session-kick-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.session-kick-reason {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.6;
    padding: 12px 18px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-family: 'Courier New', monospace;
    word-break: break-word;
    max-width: 500px;
    width: 100%;
    text-align: left;
    white-space: pre-line;
}

.session-kick-btn {
    padding: 16px 48px;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 1px;
    text-transform: uppercase;
    min-width: 240px;
}

.session-kick-btn--exit {
    background: linear-gradient(135deg, #ff4444 0%, #cc2222 100%);
    color: white;
    box-shadow: 0 4px 25px rgba(255, 60, 60, 0.3);
}

.session-kick-btn--exit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 35px rgba(255, 60, 60, 0.5);
    background: linear-gradient(135deg, #ff5555 0%, #dd3333 100%);
}

.session-kick-btn--exit:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 60, 60, 0.3);
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .session-kick-game-title {
        font-size: 2.8rem;
    }

    .session-kick-icon {
        font-size: 2.5rem;
    }

    .session-kick-violation {
        font-size: 0.9rem;
        letter-spacing: 2px;
    }

    .session-kick-subtitle {
        font-size: 1rem;
    }

    .session-kick-content {
        min-height: 90vh;
        padding: 30px 15px;
    }

    .session-kick-title-block {
        margin: -20px 0;
    }

    .session-kick-btn {
        padding: 14px 36px;
        font-size: 1rem;
        min-width: 200px;
    }

    .session-kick-reason {
        font-size: 0.65rem;
        padding: 10px 14px;
    }
}

@media (max-width: 480px) {
    .session-kick-game-title {
        font-size: 2rem;
    }

    .session-kick-violation {
        font-size: 0.8rem;
    }

    .session-kick-btn {
        padding: 12px 28px;
        font-size: 0.9rem;
        min-width: 160px;
    }
}

/* ==================== ОНЛАЙН-ЛОББИ (интуитивный дизайн для новичков) ==================== */
.online-lobby {
    position: relative;
    width: 100%;
    max-width: min(900px, 95vw);
    margin: 0 auto;
    padding: clamp(12px, 2vh, 24px);
    animation: lobbyFadeIn 0.5s ease;
}

.online-lobby.hidden {
    display: none !important;
}

@keyframes lobbyFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== ПРИВЕТСТВЕННАЯ КАРТОЧКА ===== */
.lobby-welcome-card {
    position: relative;
    background: linear-gradient(135deg, rgba(26, 29, 62, 0.8) 0%, rgba(42, 45, 110, 0.8) 50%, rgba(26, 29, 62, 0.8) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: clamp(16px, 2.5vh, 28px);
    margin-bottom: clamp(12px, 2vh, 20px);
    overflow: hidden;
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lobby-welcome-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: min(300px, 50vw);
    height: min(300px, 50vw);
    background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.lobby-welcome-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 18px);
    flex-wrap: wrap;
}

.lobby-welcome-avatar {
    width: clamp(48px, 6vw, 60px);
    height: clamp(48px, 6vw, 60px);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.5rem, 3vw, 2rem);
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.lobby-welcome-text {
    flex: 1;
    min-width: 0;
}

.lobby-welcome-title {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.lobby-welcome-subtitle {
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.lobby-welcome-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 16px);
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.25);
    border-radius: 20px;
    flex-shrink: 0;
}

.lobby-online-dot {
    width: clamp(6px, 1vw, 8px);
    height: clamp(6px, 1vw, 8px);
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
    animation: lobbyPulse 2s ease-in-out infinite;
}

@keyframes lobbyPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.lobby-online-count {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 700;
    color: #00ff88;
}

.lobby-online-label {
    font-size: clamp(0.7rem, 1vw, 0.8rem);
    color: rgba(255, 255, 255, 0.6);
}

/* ===== ОСНОВНОЙ КОНТЕНТ ===== */
.lobby-main-content {
    display: flex;
    gap: clamp(12px, 2vw, 16px);
    margin-bottom: clamp(12px, 2vh, 16px);
}

.lobby-left-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vh, 16px);
}

.lobby-right-col {
    width: clamp(300px, 32vw, 360px);
    flex-shrink: 0;
    min-width: 0;
}

/* ===== КАРТОЧКИ-ШАГИ ДЛЯ НОВИЧКОВ ===== */
.lobby-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, 1vh, 8px);
}

.lobby-step-card {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 12px);
    padding: clamp(10px, 1.5vh, 14px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: default;
}

.lobby-step-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(102, 126, 234, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.lobby-step-icon {
    width: clamp(32px, 4vw, 38px);
    height: clamp(32px, 4vw, 38px);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    flex-shrink: 0;
    border: 1px solid rgba(102, 126, 234, 0.15);
}

.lobby-step-info {
    flex: 1;
    min-width: 0;
}

.lobby-step-title {
    font-size: clamp(0.75rem, 1.1vw, 0.82rem);
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 1px;
}

.lobby-step-desc {
    font-size: clamp(0.65rem, 0.9vw, 0.72rem);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.2;
}

/* ===== СПИСОК ИГРОКОВ ===== */
.lobby-players-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
}

.lobby-players-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 500;
}

.lobby-players-count-badge {
    background: rgba(102, 126, 234, 0.2);
    color: #667eea;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
}

.lobby-players-body {
    padding: 6px 0;
    max-height: 160px;
    overflow-y: auto;
}

.lobby-player-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    font-size: 0.88rem;
    color: #d0d0e0;
    transition: background 0.2s;
}

.lobby-player-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lobby-player-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

.lobby-player-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff88;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
}

.lobby-player-nickname {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lobby-no-players {
    padding: 24px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
}

/* ===== ЧАТ В ЛОББИ ===== */
.lobby-chat {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    min-height: 300px;
}

.lobby-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 500;
}

.lobby-chat-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

.lobby-chat-messages {
    flex: 1;
    padding: 12px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lobby-chat-welcome {
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    padding: 30px 0;
}

.lobby-chat-msg {
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    animation: msgSlideIn 0.2s ease;
}

@keyframes msgSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.lobby-chat-msg-nick {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    margin-right: 6px;
}

.lobby-chat-msg-text {
    color: #d0d0e0;
}

.lobby-chat-input-area {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
}

.lobby-chat-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: #e0e0e0;
    font-size: 0.88rem;
    outline: none;
    transition: all 0.2s;
}

.lobby-chat-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.lobby-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.lobby-chat-send {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, #323232 0%, #3a3a3a 100%);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.lobby-chat-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.08);
}

.lobby-chat-send:active {
    transform: translateY(0);
}

/* ===== НИЖНЯЯ ПАНЕЛЬ ===== */
.lobby-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lobby-btn-primary {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
    position: relative;
    overflow: hidden;
}

.lobby-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: lobbyBtnShimmer 3s ease-in-out infinite;
}

@keyframes lobbyBtnShimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

.lobby-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
}

.lobby-btn-primary:active {
    transform: translateY(-1px);
}

.lobby-btn-icon {
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.lobby-btn-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.lobby-btn-hint {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.lobby-footer-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.lobby-btn-secondary {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.lobby-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.lobby-btn-danger {
    padding: 10px 16px;
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 10px;
    color: rgba(255, 80, 80, 0.7);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.lobby-btn-danger:hover {
    background: rgba(255, 80, 80, 0.2);
    color: #ff6b6b;
    border-color: rgba(255, 80, 80, 0.4);
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
    .online-lobby {
        padding: 12px;
    }

    .lobby-main-content {
        flex-direction: column;
    }

    .lobby-right-col {
        width: 100%;
    }

    .lobby-steps {
        grid-template-columns: 1fr;
    }

    .lobby-welcome-content {
        flex-direction: column;
        text-align: center;
    }

    .lobby-welcome-badge {
        align-self: center;
    }

    .lobby-footer {
        flex-direction: column;
        gap: 10px;
    }

    .lobby-btn-primary {
        width: 100%;
        padding: 12px 20px;
    }

    .lobby-footer-actions {
        width: 100%;
        justify-content: center;
    }

    .lobby-chat {
        min-height: 220px;
        height: 280px;
    }
}

/* Рабочий стол */
.desktop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 48px);
    padding: 20px;
    overflow: hidden;
}

/* Контейнер для окон */
.window-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.window-container .report-window,
.window-container .app-window {
    pointer-events: auto;
}

/* Иконки на рабочем столе */
.desktop-icons {
    position: relative;
    width: 100%;
    height: 100%;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    padding: 6px 10px 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
    user-select: none;
    position: relative;
}

.desktop-icon:hover {
    background: rgba(255, 255, 255, 0.1);
}

.desktop-icon:active {
    cursor: grabbing;
}

.desktop-icon[style*="position: absolute"] {
    transition: none;
}

.desktop-icon.dragging {
    opacity: 0.8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.icon-image {
    font-size: 2.5rem;
    margin-bottom: 2px;
    line-height: 1;
}

.icon-label {
    color: white;
    font-size: 0.75rem;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    width: 100%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.2;
    padding: 2px 0;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 4px;
    backdrop-filter: blur(2px);
}

/* Окно отчета */
.report-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: box-shadow 0.3s ease, opacity 0.3s ease;
}

.report-window.minimizing {
    animation: minimizeWindow 0.3s ease-out forwards;
}

.report-window.minimized {
    height: auto;
    display: none !important;
}

@keyframes minimizeWindow {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    50% {
        transform: scale(0.95) translateY(20px);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.3) translateY(100vh);
        opacity: 0;
    }
}

.report-window.minimized .window-content {
    display: none;
    animation: fadeOutContent 0.2s ease-out;
}

@keyframes fadeOutContent {
    from {
        opacity: 1;
        max-height: 500px;
    }
    to {
        opacity: 0;
        max-height: 0;
    }
}

.report-window.minimized .window-header {
    cursor: pointer;
    border-radius: 8px;
}

/* Анимация разворачивания окна */
.report-window.restoring {
    display: block !important;
    animation: restoreWindow 0.3s ease-out forwards;
}

@keyframes restoreWindow {
    0% {
        transform: scale(0.3) translateY(100vh);
        opacity: 0;
    }
    50% {
        transform: scale(0.95) translateY(20px);
        opacity: 0.7;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(243, 243, 243, 0.9);
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: border-radius 0.3s ease, background 0.2s ease;
    cursor: grab;
    user-select: none;
}

.window-header:active {
    cursor: grabbing;
}

/* Состояние перетаскивания окна */
.game-window.dragging {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.2s ease;
}

/* Отключаем все transition при перетаскивании для мгновенной реакции */
.game-window.dragging * {
    transition: none !important;
}

/* Явно отключаем transition для transform при перетаскивании */
.game-window.dragging {
    transition: box-shadow 0.2s ease !important;
}

.game-window.dragging .window-header {
    background: rgba(255, 255, 255, 0.95);
}

.window-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
}

.window-controls {
    display: flex;
    gap: 8px;
}

.window-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    color: #1a1a1a;
    transition: background 0.2s ease, transform 0.1s ease;
}

.window-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.window-btn:active {
    transform: scale(0.9);
}

.window-btn.close:hover {
    background: #e81123;
    color: white;
}

.window-content {
    padding: 20px;
    overflow-y: auto;
    height: calc(100% - 48px); /* Высота окна минус высота заголовка */
}

.report-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.info-label {
    font-weight: 600;
    color: #1a1a1a;
}

.info-value {
    color: #1a237e;
    font-weight: 500;
}

/* Панель задач */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background: rgba(243, 243, 243, 0.85);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    z-index: 100;
}

.taskbar-left,
.taskbar-center,
.taskbar-right {
    display: flex;
    align-items: center;
}

.taskbar-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.taskbar-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.taskbar-icons {
    display: flex;
    gap: 4px;
}

.taskbar-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.taskbar-icon:hover {
    background: rgba(0, 0, 0, 0.05);
}

.taskbar-icon.active {
    background: rgba(26, 35, 126, 0.1);
    border-bottom: 3px solid #1a237e;
}

.taskbar-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    pointer-events: none;
}

.system-tray {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pause-btn {
    font-size: 1.2rem;
}

.time-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.time-display:hover {
    background: rgba(0, 0, 0, 0.05);
}

.game-time {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
}

.game-date {
    font-size: 0.75rem;
    color: #666;
}

/* Меню Пуск */
.start-menu {
    position: fixed;
    bottom: 56px;
    left: 8px;
    width: 320px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 200;
    max-height: 70vh;
    overflow-y: auto;
    animation: slideUp 0.2s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.start-menu.hidden {
    display: none;
}

.start-menu-header {
    padding: 16px;
    background: rgba(0, 120, 212, 0.1);
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.start-menu-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1a1a1a;
}

.start-menu-content {
    padding: 8px;
}

.menu-section {
    margin-bottom: 16px;
}

.menu-section h4 {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 8px 0;
    padding: 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 0.95rem;
    color: #1a1a1a;
}

.menu-item:hover {
    background: rgba(0, 120, 212, 0.1);
}

.menu-item:active {
    background: rgba(0, 120, 212, 0.2);
}

.menu-item.danger {
    color: #e81123;
}

.menu-item.danger:hover {
    background: rgba(232, 17, 35, 0.1);
}

.menu-icon {
    margin-right: 12px;
    font-size: 1.1rem;
}

.menu-text {
    flex: 1;
    text-align: left;
}

.start-menu-footer {
    padding: 12px 16px;
    background: rgba(243, 243, 243, 0.9);
    border-radius: 0 0 8px 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.save-status {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
}

/* Sound Settings Modal */
.sound-settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease;
}

.sound-settings-content {
    background: white;
    border-radius: 12px;
    width: min(95%, 420px);
    max-height: 90vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.sound-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.sound-settings-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.sound-settings-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.sound-settings-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sound-settings-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.sound-setting-row {
    margin-bottom: 16px;
}

.sound-setting-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
}

.sound-volume-value {
    font-size: 0.85rem;
    color: #667eea;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

.sound-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.sound-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 2px solid #667eea;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.sound-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.sound-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 2px solid #667eea;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.sound-setting-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 16px 0;
}

/* Toggle Switch */
.sound-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.sound-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sound-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background 0.3s;
}

.sound-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sound-toggle input:checked + .sound-toggle-slider {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.sound-toggle input:checked + .sound-toggle-slider::before {
    transform: translateX(20px);
}

.sound-settings-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
}

.sound-settings-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s;
}

.sound-settings-btn.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.sound-settings-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.sound-settings-btn.secondary {
    background: #f44336;
    color: white;
}

.sound-settings-btn.secondary:hover {
    background: #d32f2f;
}

/* Sound button in system tray */
.sound-tray-btn {
    font-size: 1.1rem;
}

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

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Анимации уведомлений */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* Пульсация для непрочитанных новостей */
@keyframes pulse-blue {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Адаптивность для планшетов */
@media (max-width: 768px) {
    .game-title {
        font-size: 2.5rem;
    }

    .game-subtitle {
        font-size: 1.2rem;
        min-height: 1.8rem;
    }

    .play-button {
        padding: 1rem 3rem;
        font-size: 1.2rem;
    }

    .report-window {
        width: 90%;
        max-width: 400px;
    }

    .desktop-icons {
        max-width: 300px;
    }
}

/* ===== АДАПТИВНОСТЬ ДЛЯ НОУТБУКОВ (1024px–1366px) ===== */

/* Маленькие ноутбуки / большие планшеты (1024px–1199px) */
@media (max-width: 1199px) and (min-width: 1025px) {
    .game-title {
        font-size: clamp(2.8rem, 5vw, 3.5rem);
    }

    .game-subtitle {
        font-size: clamp(1.1rem, 1.8vw, 1.3rem);
        margin-bottom: clamp(1.2rem, 2.5vh, 1.8rem);
        min-height: 1.8rem;
    }

    .main-menu {
        gap: clamp(10px, 1.5vh, 14px);
        margin-top: clamp(1.5rem, 3vh, 2.5rem);
        max-width: 380px;
    }

    .menu-button {
        padding: clamp(0.7rem, 1.5vh, 0.95rem) clamp(1.5rem, 3vw, 2.5rem);
        font-size: clamp(0.9rem, 1.3vw, 1.05rem);
        min-width: 0;
        width: 100%;
        border-radius: 14px;
    }

    .button-text {
        font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    }

    .btn-icon-left,
    .btn-icon-right {
        font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    }

    .class-selection {
        max-width: min(960px, 98vw);
        padding: 0 clamp(12px, 2vw, 20px);
    }

    .selection-header {
        margin-bottom: clamp(1rem, 2vh, 1.5rem);
    }

    .selection-title {
        font-size: clamp(1.4rem, 2.5vw, 1.7rem);
    }

    .selection-subtitle {
        font-size: clamp(0.75rem, 1.2vw, 0.85rem);
    }

    .class-cards {
        gap: clamp(12px, 2vw, 16px);
        max-width: min(920px, 100%);
    }

    .class-card {
        border-radius: 14px;
    }

    .card-header {
        padding: clamp(10px, 1.5vh, 14px) clamp(10px, 1.5vw, 14px) clamp(8px, 1vh, 12px);
    }

    .class-icon {
        font-size: clamp(1.6rem, 3vw, 2.2rem);
    }

    .class-name {
        font-size: clamp(0.75rem, 1.2vw, 0.88rem);
        letter-spacing: 1.5px;
    }

    .card-body {
        padding: clamp(8px, 1.2vh, 12px) clamp(10px, 1.5vw, 14px) clamp(10px, 1.5vh, 14px);
    }

    .class-description {
        font-size: clamp(0.65rem, 1vw, 0.75rem);
        margin-bottom: clamp(6px, 1vh, 10px);
    }

    .class-features li {
        font-size: clamp(0.62rem, 0.9vw, 0.72rem);
        padding: clamp(3px, 0.5vh, 5px) 0;
    }

    .class-details {
        font-size: clamp(0.58rem, 0.85vw, 0.68rem);
        max-height: clamp(70px, 12vh, 100px);
    }

    .class-selection-footer {
        margin-top: clamp(0.8rem, 2vh, 1.4rem);
        padding-top: clamp(0.6rem, 1.5vh, 1rem);
    }

    .class-selection-footer .menu-button {
        padding: clamp(0.5rem, 1vh, 0.7rem) clamp(1.2rem, 2vw, 1.8rem);
        font-size: clamp(0.8rem, 1.1vw, 0.9rem);
    }

    .copyright-notice {
        margin-top: clamp(1rem, 2vh, 1.8rem);
        padding: clamp(0.6rem, 1vh, 0.9rem);
        max-width: min(700px, 90vw);
    }

    .copyright-notice p {
        font-size: clamp(0.55rem, 0.8vw, 0.62rem);
    }

    /* Online lobby laptop fixes */
    .online-lobby {
        max-width: min(860px, 98vw);
        padding: clamp(10px, 1.5vh, 18px);
    }

    .lobby-main-content {
        gap: clamp(10px, 1.5vw, 14px);
    }

    .lobby-left-col {
        min-width: 0;
    }

    .lobby-right-col {
        width: clamp(260px, 32vw, 320px);
    }

    .lobby-chat {
        min-height: clamp(260px, 40vh, 320px);
        height: 100%;
    }

    .lobby-steps {
        grid-template-columns: 1fr 1fr;
    }

    .lobby-welcome-card {
        padding: clamp(14px, 2vh, 22px);
    }

    .lobby-welcome-title {
        font-size: clamp(1rem, 1.8vw, 1.25rem);
    }

    .lobby-btn-primary {
        padding: clamp(10px, 1.5vh, 14px) clamp(18px, 3vw, 28px);
    }

    .lobby-btn-text {
        font-size: clamp(1rem, 1.5vw, 1.15rem);
    }

    .lobby-btn-icon {
        font-size: clamp(1.2rem, 2vw, 1.4rem);
    }

    .lobby-btn-hint {
        font-size: clamp(0.65rem, 1vw, 0.75rem);
    }

    .lobby-players-body {
        max-height: clamp(120px, 20vh, 160px);
    }
}

/* Средние ноутбуки (1200px–1366px) */
@media (max-width: 1366px) and (min-width: 1200px) {
    .game-title {
        font-size: clamp(3.2rem, 5vw, 3.8rem);
    }

    .game-subtitle {
        font-size: clamp(1.2rem, 1.8vw, 1.4rem);
        margin-bottom: clamp(1.4rem, 2.5vh, 2rem);
    }

    .main-menu {
        gap: clamp(12px, 1.8vh, 16px);
        margin-top: clamp(2rem, 3.5vh, 3rem);
        max-width: 400px;
    }

    .menu-button {
        padding: clamp(0.8rem, 1.8vh, 1.1rem) clamp(1.8rem, 3.5vw, 2.8rem);
        font-size: clamp(0.95rem, 1.4vw, 1.1rem);
        min-width: 0;
        width: 100%;
    }

    .button-text {
        font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    }

    .class-selection {
        max-width: min(1050px, 96vw);
    }

    .selection-title {
        font-size: clamp(1.6rem, 2.8vw, 1.9rem);
    }

    .selection-subtitle {
        font-size: clamp(0.8rem, 1.2vw, 0.9rem);
    }

    .class-cards {
        gap: clamp(14px, 2vw, 18px);
        max-width: min(1000px, 100%);
    }

    .card-header {
        padding: clamp(12px, 1.8vh, 16px) clamp(12px, 1.8vw, 16px) clamp(10px, 1.2vh, 13px);
    }

    .class-icon {
        font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    }

    .class-name {
        font-size: clamp(0.8rem, 1.3vw, 0.92rem);
    }

    .card-body {
        padding: clamp(10px, 1.4vh, 14px) clamp(12px, 1.8vw, 16px) clamp(12px, 1.8vh, 16px);
    }

    .class-description {
        font-size: clamp(0.7rem, 1.1vw, 0.78rem);
    }

    .class-features li {
        font-size: clamp(0.68rem, 1vw, 0.76rem);
    }

    .class-details {
        font-size: clamp(0.62rem, 0.9vw, 0.7rem);
        max-height: clamp(80px, 14vh, 110px);
    }

    .copyright-notice {
        max-width: min(800px, 90vw);
    }

    /* Online lobby laptop fixes */
    .online-lobby {
        max-width: min(880px, 96vw);
    }

    .lobby-right-col {
        width: clamp(260px, 33vw, 320px);
    }

    .lobby-chat {
        min-height: clamp(280px, 42vh, 340px);
        height: 100%;
    }
}

/* Ноутбуки с маленькой высотой экрана (< 800px height) */
@media (max-height: 800px) {
    .start-content {
        min-height: 100vh;
        padding: clamp(8px, 1.5vh, 16px) clamp(12px, 2vw, 24px);
        justify-content: flex-start;
        padding-top: clamp(10px, 2vh, 30px);
    }

    .game-title {
        font-size: min(3.5rem, 7vh);
        margin-bottom: clamp(0.1rem, 0.4vh, 0.3rem);
    }

    .game-subtitle {
        font-size: min(1.3rem, 2.2vh);
        margin-bottom: clamp(0.5rem, 1.2vh, 1.2rem);
        min-height: clamp(1.2rem, 2vh, 1.5rem);
    }

    .main-menu {
        gap: clamp(6px, 1.2vh, 12px);
        margin-top: clamp(0.8rem, 2vh, 2rem);
        max-width: 360px;
    }

    .menu-button {
        padding: clamp(0.5rem, 1.2vh, 0.85rem) clamp(1.2rem, 3vw, 2.5rem);
        font-size: clamp(0.8rem, 1.4vw, 1rem);
        min-width: 0;
        width: 100%;
        border-radius: 12px;
    }

    .button-text {
        font-size: clamp(0.8rem, 1.3vw, 1rem);
        gap: clamp(6px, 1vw, 10px);
    }

    .btn-icon-left,
    .btn-icon-right {
        font-size: clamp(0.85rem, 1.2vw, 1.1rem);
    }

    .class-selection {
        padding: 0 clamp(8px, 1.5vw, 16px);
    }

    .selection-header {
        margin-bottom: clamp(0.5rem, 1.2vh, 1rem);
        padding-top: clamp(0.1rem, 0.3vh, 0.3rem);
    }

    .selection-title {
        font-size: clamp(1.2rem, 2.5vw, 1.5rem);
        margin-bottom: clamp(0.1rem, 0.2vh, 0.2rem);
    }

    .selection-subtitle {
        font-size: clamp(0.7rem, 1.2vw, 0.8rem);
    }

    .class-cards {
        gap: clamp(8px, 1.5vh, 14px);
    }

    .class-card {
        border-radius: 12px;
    }

    .card-header {
        padding: clamp(6px, 1vh, 12px) clamp(8px, 1.2vw, 12px) clamp(5px, 0.8vh, 10px);
    }

    .class-icon {
        font-size: clamp(1.4rem, 3vw, 1.8rem);
        margin-bottom: clamp(1px, 0.3vh, 2px);
    }

    .class-name {
        font-size: clamp(0.7rem, 1.2vw, 0.8rem);
        letter-spacing: 1px;
    }

    .card-body {
        padding: clamp(6px, 1vh, 10px) clamp(8px, 1.2vw, 12px) clamp(8px, 1.2vh, 12px);
    }

    .class-description {
        font-size: clamp(0.6rem, 1vw, 0.7rem);
        margin-bottom: clamp(4px, 0.6vh, 8px);
    }

    .class-features li {
        font-size: clamp(0.58rem, 0.9vw, 0.67rem);
        padding: clamp(2px, 0.4vh, 4px) 0;
    }

    .class-details {
        font-size: clamp(0.55rem, 0.8vw, 0.62rem);
        max-height: clamp(50px, 8vh, 80px);
        padding-top: clamp(2px, 0.4vh, 5px);
        margin-top: clamp(1px, 0.2vh, 3px);
    }

    .class-selection-footer {
        margin-top: clamp(0.4rem, 1vh, 0.8rem);
        padding-top: clamp(0.4rem, 1vh, 0.8rem);
    }

    .class-selection-footer .menu-button {
        padding: clamp(0.4rem, 0.8vh, 0.6rem) clamp(1rem, 2vw, 1.6rem);
        font-size: clamp(0.75rem, 1.1vw, 0.85rem);
        min-width: auto;
    }

    .copyright-notice {
        margin-top: clamp(0.5rem, 1.2vh, 1.2rem);
        padding: clamp(0.4rem, 0.8vh, 0.7rem);
    }

    .copyright-notice p {
        font-size: clamp(0.5rem, 0.7vw, 0.58rem);
    }

    /* Online lobby height fixes */
    .online-lobby {
        padding: clamp(8px, 1.5vh, 16px);
    }

    .lobby-welcome-card {
        padding: clamp(12px, 1.8vh, 20px);
        margin-bottom: clamp(8px, 1.2vh, 14px);
    }

    .lobby-welcome-title {
        font-size: clamp(0.95rem, 1.8vw, 1.2rem);
    }

    .lobby-main-content {
        gap: clamp(8px, 1.2vh, 12px);
        margin-bottom: clamp(8px, 1.2vh, 12px);
    }

    .lobby-left-col {
        gap: clamp(8px, 1.2vh, 12px);
    }

    .lobby-chat {
        min-height: clamp(200px, 32vh, 260px);
        height: 100%;
    }

    .lobby-steps {
        gap: clamp(6px, 1vh, 8px);
    }

    .lobby-step-card {
        padding: clamp(10px, 1.5vh, 14px);
    }

    .lobby-players-body {
        max-height: clamp(80px, 14vh, 120px);
    }

    .lobby-footer {
        gap: clamp(8px, 1.2vh, 12px);
    }

    .lobby-btn-primary {
        padding: clamp(8px, 1.2vh, 12px) clamp(14px, 2.5vw, 22px);
    }

    .lobby-btn-text {
        font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    }

    .lobby-btn-icon {
        font-size: clamp(1rem, 2vw, 1.2rem);
    }

    .lobby-btn-hint {
        font-size: clamp(0.6rem, 0.9vw, 0.7rem);
    }

    .lobby-btn-secondary,
    .lobby-btn-danger {
        padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 16px);
        font-size: clamp(0.75rem, 1.1vw, 0.85rem);
    }
}

/* Очень маленькая высота экрана (< 600px height) */
@media (max-height: 600px) {
    .start-content {
        padding-top: clamp(5px, 1vh, 15px);
    }

    .game-title {
        font-size: min(2.5rem, 5vh);
        margin-bottom: 0.1rem;
    }

    .game-subtitle {
        font-size: min(0.95rem, 1.8vh);
        margin-bottom: clamp(0.3rem, 0.8vh, 0.6rem);
        min-height: clamp(0.9rem, 1.5vh, 1.2rem);
    }

    .main-menu {
        gap: clamp(4px, 0.8vh, 8px);
        margin-top: clamp(0.4rem, 1.2vh, 1rem);
        max-width: 320px;
    }

    .menu-button {
        padding: clamp(0.35rem, 0.8vh, 0.6rem) clamp(1rem, 2.5vw, 2rem);
        font-size: clamp(0.7rem, 1.2vw, 0.85rem);
        min-width: 0;
        width: 100%;
        border-radius: 10px;
    }

    .button-text {
        font-size: clamp(0.7rem, 1.1vw, 0.85rem);
        gap: clamp(4px, 0.8vw, 8px);
    }

    .btn-icon-left,
    .btn-icon-right {
        font-size: clamp(0.8rem, 1.2vw, 1rem);
    }

    .class-cards {
        gap: clamp(5px, 1vh, 10px);
    }

    .class-card {
        border-radius: 10px;
    }

    .card-header {
        padding: clamp(4px, 0.6vh, 8px) clamp(6px, 1vw, 10px) clamp(4px, 0.5vh, 7px);
    }

    .class-icon {
        font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    }

    .class-name {
        font-size: clamp(0.6rem, 1vw, 0.7rem);
    }

    .card-body {
        padding: clamp(4px, 0.6vh, 8px) clamp(6px, 1vw, 10px) clamp(6px, 0.8vh, 10px);
    }

    .class-description {
        font-size: clamp(0.52rem, 0.9vw, 0.62rem);
        margin-bottom: clamp(2px, 0.4vh, 5px);
    }

    .class-features li {
        font-size: clamp(0.5rem, 0.8vw, 0.6rem);
        padding: clamp(1px, 0.2vh, 3px) 0;
    }

    .class-details {
        font-size: clamp(0.48rem, 0.75vw, 0.57rem);
        max-height: clamp(35px, 6vh, 55px);
    }

    .selection-header {
        margin-bottom: clamp(0.2rem, 0.5vh, 0.5rem);
    }

    .selection-title {
        font-size: clamp(1rem, 2vw, 1.2rem);
    }

    .selection-subtitle {
        font-size: clamp(0.6rem, 1vw, 0.7rem);
    }

    .class-selection-footer {
        margin-top: clamp(0.2rem, 0.5vh, 0.5rem);
        padding-top: clamp(0.2rem, 0.5vh, 0.5rem);
    }

    .copyright-notice {
        display: none;
    }

    /* Online lobby very short height */
    .online-lobby {
        padding: clamp(5px, 1vh, 10px);
    }

    .lobby-welcome-card {
        padding: clamp(8px, 1.2vh, 14px);
        margin-bottom: clamp(5px, 0.8vh, 10px);
    }

    .lobby-welcome-title {
        font-size: clamp(0.85rem, 1.5vw, 1rem);
    }

    .lobby-welcome-avatar {
        width: clamp(36px, 5vw, 44px);
        height: clamp(36px, 5vw, 44px);
        font-size: clamp(1.2rem, 2vw, 1.5rem);
    }

    .lobby-main-content {
        gap: clamp(5px, 0.8vh, 8px);
        margin-bottom: clamp(5px, 0.8vh, 8px);
    }

    .lobby-chat {
        min-height: clamp(140px, 24vh, 180px);
        height: 100%;
    }

    .lobby-steps {
        gap: clamp(4px, 0.5vh, 6px);
    }

    .lobby-step-card {
        padding: clamp(6px, 1vh, 10px);
        gap: clamp(6px, 1vw, 10px);
    }

    .lobby-step-icon {
        width: clamp(30px, 4vw, 36px);
        height: clamp(30px, 4vw, 36px);
        font-size: clamp(1rem, 1.5vw, 1.2rem);
    }

    .lobby-step-title {
        font-size: clamp(0.65rem, 1vw, 0.75rem);
    }

    .lobby-step-desc {
        font-size: clamp(0.6rem, 0.9vw, 0.68rem);
    }

    .lobby-players-body {
        max-height: clamp(60px, 10vh, 80px);
    }

    .lobby-footer {
        gap: clamp(5px, 0.8vh, 8px);
    }

    .lobby-btn-primary {
        padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 18px);
    }

    .lobby-btn-text {
        font-size: clamp(0.8rem, 1.2vw, 0.95rem);
    }

    .lobby-btn-icon {
        font-size: clamp(1rem, 2vw, 1.3rem);
    }

    .lobby-btn-hint {
        display: none;
    }

    .lobby-btn-secondary,
    .lobby-btn-danger {
        padding: clamp(5px, 0.8vh, 8px) clamp(10px, 1.5vw, 14px);
        font-size: clamp(0.65rem, 1vw, 0.8rem);
    }
}

/* ===== УЛУЧШЕНИЯ UX ДЛЯ НОВИЧКОВ ===== */

/* Плавное появление главного меню */
.main-menu {
    animation: menuFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes menuFadeIn {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Плавное появление каждой кнопки по очереди */
.main-menu .menu-button {
    opacity: 0;
    animation: buttonSlideIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.main-menu .menu-button:nth-child(1) { animation-delay: 0.1s; }
.main-menu .menu-button:nth-child(2) { animation-delay: 0.2s; }
.main-menu .menu-button:nth-child(3) { animation-delay: 0.3s; }
.main-menu .menu-button:nth-child(4) { animation-delay: 0.4s; }
.main-menu .menu-button:nth-child(5) { animation-delay: 0.5s; }

@keyframes buttonSlideIn {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Улучшенный hover для кнопок меню — мягкое свечение */
.menu-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.06),
        transparent
    );
    transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

.menu-button:hover::before {
    left: 100%;
}

/* Мягкое свечение при наведении на primary кнопку */
.menu-button.primary {
    background: rgba(50, 50, 50, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 25px rgba(255, 255, 255, 0.04);
}

.menu-button.primary:hover {
    background: rgba(58, 58, 58, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-3px);
}

/* Подсказка для новых игроков — мягкое пульсирующее свечение на кнопке "Одиночная игра" */
#new-game-btn {
    background: linear-gradient(135deg, #323232 0%, #3a3a3a 50%, #323232 100%) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 30px rgba(255, 255, 255, 0.06) !important;
    animation: newGamePulse 3s ease-in-out infinite;
    opacity: 1 !important;
}

#new-game-btn:hover {
    background: linear-gradient(135deg, #3a3a3a 0%, #424242 50%, #3a3a3a 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.4), 0 0 55px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-3px);
}

@keyframes newGamePulse {
    0%, 100% {
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 30px rgba(255, 255, 255, 0.06) !important;
    }
    50% {
        box-shadow: 0 4px 35px rgba(0, 0, 0, 0.4), 0 0 55px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
}

/* Плавное появление заголовка */
.game-title {
    animation: titleFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Плавное появление подзаголовка */
.game-subtitle {
    animation: subtitleFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
    opacity: 0;
}

@keyframes subtitleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   TRADING TERMINAL STYLES
   ============================================ */

/* Основной контейнер терминала */
.trading-terminal {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 20px;
    background:
        /* Крупная сетка */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 59px,
            rgba(255, 255, 255, 0.025) 59px,
            rgba(255, 255, 255, 0.025) 60px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 59px,
            rgba(255, 255, 255, 0.025) 59px,
            rgba(255, 255, 255, 0.025) 60px
        ),
        /* Мелкая сетка */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(255, 255, 255, 0.012) 29px,
            rgba(255, 255, 255, 0.012) 30px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(255, 255, 255, 0.012) 29px,
            rgba(255, 255, 255, 0.012) 30px
        ),
        /* Основной градиент */
        linear-gradient(160deg, #1a1d2e 0%, #232738 30%, #1e2233 60%, #181b2a 100%);
    color: #e0e0e0;
    font-family: 'Segoe UI', 'Roboto', monospace;
}

/* Серый скроллбар для страницы Рынок */
.trading-terminal::-webkit-scrollbar {
    width: 8px;
}

.trading-terminal::-webkit-scrollbar-track {
    background: rgba(30, 33, 50, 0.6);
    border-radius: 4px;
}

.trading-terminal::-webkit-scrollbar-thumb {
    background: rgba(180, 180, 180, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(100, 100, 100, 0.2);
}

.trading-terminal::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 200, 200, 0.7);
}

/* Firefox scrollbar for trading terminal */
.trading-terminal {
    scrollbar-width: thin;
    scrollbar-color: rgba(180, 180, 180, 0.5) rgba(30, 33, 50, 0.6);
}

/* Анимированная сетка для экрана "Доступ запрещён" (стиль менюшки) */
.access-denied-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
    background:
        /* Крупная сетка */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 79px,
            rgba(100, 180, 255, 0.06) 79px,
            rgba(100, 180, 255, 0.06) 80px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 79px,
            rgba(100, 180, 255, 0.06) 79px,
            rgba(100, 180, 255, 0.06) 80px
        ),
        /* Мелкая сетка */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 39px,
            rgba(100, 180, 255, 0.03) 39px,
            rgba(100, 180, 255, 0.03) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 39px,
            rgba(100, 180, 255, 0.03) 39px,
            rgba(100, 180, 255, 0.03) 40px
        );
    animation: accessDeniedGridDrift 12s linear infinite;
}

/* Вторая сетка для эффекта переливания (сдвинутая фаза) */
.access-denied-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 79px,
            rgba(150, 100, 255, 0.04) 79px,
            rgba(150, 100, 255, 0.04) 80px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 79px,
            rgba(150, 100, 255, 0.04) 79px,
            rgba(150, 100, 255, 0.04) 80px
        );
    animation: accessDeniedGridDriftReverse 18s linear infinite;
    opacity: 0.6;
}

@keyframes accessDeniedGridDrift {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(80px, 80px);
    }
}

@keyframes accessDeniedGridDriftReverse {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-80px, 80px);
    }
}

/* Верхняя панель терминала */
.terminal-header {
    background: rgba(26, 29, 46, 0.6);
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
    padding: 12px;
    backdrop-filter: blur(8px);
}

/* Бегущая строка тикера */
.ticker-bar {
    background: rgba(26, 29, 46, 0.8);
    border: 1px solid rgba(102, 126, 234, 0.3);
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.ticker-text {
    display: inline-block;
    animation: ticker-scroll 30s linear infinite;
    font-size: 0.9rem;
    font-weight: 600;
}

@keyframes ticker-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Панель поиска в левой панели (над таблицей активов) */
.terminal-left-panel .search-favorites-bar {
    display: flex;
    padding: 4px 6px;
    background: rgba(26, 29, 46, 0.5);
    border-bottom: 1px solid rgba(102, 126, 234, 0.15);
}

.terminal-left-panel .terminal-search-input {
    flex: 1;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 5px;
    color: #e0e0e0;
    font-size: 0.75rem;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    outline: none;
}

.terminal-left-panel .terminal-search-input:focus {
    border-color: #667eea;
    background: rgba(26, 29, 46, 0.9);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.terminal-left-panel .terminal-search-input::placeholder {
    color: #5a6380;
    font-size: 0.7rem;
}


/* Основной контейнер с тремя панелями */
.terminal-main-container {
    display: flex;
    gap: 10px;
    padding: 10px;
    flex: 1;
    overflow: visible;
    min-height: 400px;
}

/* Левая панель: фиксированная ширина при развернутом состоянии */
.terminal-left-panel:not(.collapsed) {
    width: 300px;
    flex-shrink: 0;
}

/* Центральная панель: занимает все доступное пространство */
.terminal-center-panel {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Правая панель: фиксированная ширина при развернутом состоянии */
.terminal-right-panel:not(.collapsed) {
    width: 350px;
    flex-shrink: 0;
}

/* Левая панель: Список активов */
.terminal-left-panel {
    display: flex;
    flex-direction: column;
    background: rgba(26, 29, 46, 0.6);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    position: relative;
    transition: width 0.3s ease;
}

/* Кнопка сворачивания панели — компактная, без фона, тёмно-серая */
.panel-collapse-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    color: rgba(180, 180, 190, 0.5);
    font-size: 12px;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, transform 0.2s;
    padding: 0;
    line-height: 1;
}

.panel-collapse-btn:hover {
    color: rgba(200, 200, 210, 0.9);
    transform: translateY(-50%) scale(1.15);
    background: none;
    box-shadow: none;
}

.collapse-left {
    right: -14px;
}

.collapse-right {
    left: -14px;
}

/* Свернутая левая панель — полностью скрывается */
.terminal-left-panel.collapsed {
    width: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    flex: 0 0 0;
}

.terminal-left-panel.collapsed #market-tabs-content,
.terminal-left-panel.collapsed #assets-list-content,
.terminal-left-panel.collapsed .search-favorites-bar,
.terminal-left-panel.collapsed .btn-favorites-toggle {
    display: none;
}

.terminal-left-panel.collapsed .panel-collapse-btn {
    display: none;
}

/* Кнопка восстановления левой панели (показывается когда панель скрыта) */
.terminal-center-panel .restore-left-panel-btn {
    display: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    color: rgba(180, 180, 190, 0.5);
    font-size: 12px;
    cursor: pointer;
    z-index: 100;
    padding: 0;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
}

.terminal-center-panel .restore-left-panel-btn:hover {
    color: rgba(200, 200, 210, 0.9);
    transform: translateY(-50%) scale(1.15);
}

.terminal-left-panel.collapsed ~ .terminal-center-panel .restore-left-panel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Свернутая правая панель */
.terminal-right-panel.collapsed {
    width: 40px;
}

.terminal-right-panel.collapsed #selected-asset-info,
.terminal-right-panel.collapsed #trading-panel-content {
    display: none;
}

.terminal-right-panel.collapsed .panel-collapse-btn {
    transform: translateY(-50%) rotate(180deg);
}

/* Кнопка избранного в левой панели (над вкладками категорий) */
.terminal-left-panel .btn-favorites-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: calc(100% - 12px);
    margin: 4px 6px 2px 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.7) 0%, rgba(118, 75, 162, 0.7) 100%);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.terminal-left-panel .btn-favorites-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    border-color: rgba(102, 126, 234, 0.6);
}

/* Вкладки категорий в терминале */
.terminal-left-panel .market-tabs {
    display: flex;
    gap: 3px;
    padding: 4px 6px;
    background: rgba(26, 29, 46, 0.8);
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
    overflow-x: auto;
    flex-wrap: wrap;
}

.terminal-left-panel .market-tab {
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 5px;
    color: #b0b0b0;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.terminal-left-panel .market-tab .tab-icon {
    font-size: 0.75rem;
}

.terminal-left-panel .market-tab.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
    border-color: #667eea;
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.terminal-left-panel .market-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(102, 126, 234, 0.5);
    transform: translateY(-1px);
}

/* Контейнер списка активов */
.assets-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 5px;
}

/* Таблица активов в терминале */
.terminal-assets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.terminal-assets-table thead {
    background: rgba(26, 29, 46, 0.9);
    position: sticky;
    top: 0;
    z-index: 10;
}

.terminal-assets-table th {
    padding: 10px 8px;
    text-align: left;
    color: #8892b0;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.terminal-assets-table td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.15);
}

.terminal-assets-table tbody tr {
    cursor: pointer;
    transition: background 0.2s;
}

.terminal-assets-table tbody tr:hover {
    background: rgba(102, 126, 234, 0.15);
}

.terminal-assets-table tbody tr.selected {
    background: rgba(102, 126, 234, 0.25);
    border-left: 3px solid #667eea;
}

.favorite-star {
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
    user-select: none;
}

.favorite-star:hover {
    transform: scale(1.2);
}

.favorite-star.active {
    color: #ffa500;
    text-shadow: 0 0 8px rgba(255, 165, 0, 0.6);
}

.asset-ticker-cell {
    font-weight: 600;
    color: #fff;
}

.asset-price-cell {
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.asset-change-cell.positive {
    color: #4caf50;
    font-weight: 600;
}

/* ===== Иконки активов в таблице терминала ===== */
.asset-icon-cell {
    width: 42px;
    padding: 6px 4px 6px 10px !important;
    text-align: center;
}

.asset-icon-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 6px rgba(102, 126, 234, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.terminal-assets-table tbody tr:hover .asset-icon-img {
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
}

.asset-icon-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    color: #8892b0;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

/* Ячейка с названием и тикером */
.asset-info-cell {
    padding: 6px 4px !important;
}

.asset-info-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #e6e9f0;
    line-height: 1.3;
}

.asset-info-ticker {
    font-size: 0.68rem;
    color: #8892b0;
    font-weight: 400;
    line-height: 1.2;
}

/* Строка с иконкой, названием и тикером */
.asset-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.asset-with-icon .asset-text-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.terminal-center-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    min-height: 0;
}

/* Переключатель режима торговли (в правой панели, компактный) */
.trading-mode-selector {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(26, 29, 46, 0.6);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    margin-bottom: 8px;
}

.mode-btn {
    flex: 1;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 6px;
    color: #b0b0b0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.75rem;
    backdrop-filter: blur(4px);
}

.mode-btn.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
    border-color: #667eea;
    color: white;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.mode-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(102, 126, 234, 0.5);
    transform: translateY(-1px);
}

/* Заблокированная кнопка фьючерсов */
.mode-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(255, 82, 82, 0.1);
    border-color: rgba(255, 82, 82, 0.3);
    color: #666;
}

.mode-btn.disabled:hover {
    background: rgba(255, 82, 82, 0.1);
    border-color: rgba(255, 82, 82, 0.3);
    transform: none;
}

/* Контейнер графика */
.chart-container {
    flex: 1;
    background: rgba(26, 29, 46, 0.8);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    position: relative;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

/* Панель выбора таймфрейма */
.timeframe-selector {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(26, 29, 46, 0.9);
    border-bottom: 1px solid rgba(102, 126, 234, 0.3);
    overflow-x: auto;
    flex-shrink: 0;
    align-items: center;
}

/* Dropdown для выбора таймфрейма */
.timeframe-dropdown {
    padding: 4px 10px;
    background: rgba(10, 14, 39, 0.9);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 4px;
    color: #ccd6f6;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Segoe UI', monospace;
    outline: none;
    min-width: 120px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.timeframe-dropdown:hover {
    border-color: #667eea;
    background-color: rgba(102, 126, 234, 0.1);
}

.timeframe-dropdown:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.timeframe-dropdown option {
    background: #0a0e27;
    color: #ccd6f6;
    padding: 8px;
}

/* Стилизация скроллбара для панели таймфреймов */
.timeframe-selector::-webkit-scrollbar {
    height: 3px;
}

.timeframe-selector::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.timeframe-selector::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.4);
    border-radius: 2px;
}

.timeframe-selector::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.6);
}

/* Кнопка полноэкранного режима */
.fullscreen-btn {
    margin-left: auto;
    padding: 3px 10px;
    background: transparent;
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 3px;
    color: #8892b0;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-btn:hover {
    background: rgba(102, 126, 234, 0.15);
    border-color: #667eea;
    color: #ccd6f6;
}

/* Полноэкранный режим графика */
.chart-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background: #0a0e27;
}

.chart-container.fullscreen .timeframe-selector {
    background: rgba(10, 14, 39, 0.95);
}

.chart-container.fullscreen #terminal-chart-canvas {
    width: 100%;
    height: calc(100vh - 40px);
}

#terminal-chart-canvas {
    flex: 1;
    width: 100%;
    display: block;
    cursor: crosshair;
    min-height: 0;
}

.chart-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
    font-size: 1rem;
    z-index: 10;
}

.chart-placeholder.hidden {
    display: none;
}

/* Стакан ордеров */
.order-book-container {
    flex: 0 0 auto;
    min-height: 250px;
    max-height: 450px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.order-book-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2d3561;
}

.order-book-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: #e0e0e0;
}

.spread-display {
    font-size: 0.8rem;
    color: #888;
    font-family: 'Courier New', monospace;
}

/* Order Book Controls */
.order-book-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    max-width: 100%;
    box-sizing: border-box;
}

.filter-buttons {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.filter-btn {
    padding: 3px 8px;
    border: 1px solid #2d3561;
    background: rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s;
    white-space: nowrap;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #4a5568;
}

.filter-btn.active {
    background: rgba(102, 126, 234, 0.3);
    border-color: #667eea;
    color: #fff;
}

.range-selector {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.range-selector label {
    font-size: 0.7rem;
    color: #888;
    white-space: nowrap;
}

.range-selector select {
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #2d3561;
    color: #e0e0e0;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    max-width: 100px;
}

.range-selector select:focus {
    outline: none;
    border-color: #667eea;
}

.order-book-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    min-height: 0;
}

.order-book-asks,
.order-book-bids {
    flex: 1;
    overflow-y: auto;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
}

.order-book-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 8px;
    margin: 2px 0;
    border-radius: 3px;
    position: relative;
}

.order-book-row.ask {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

.order-book-row.bid {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

/* Liquidity Walls - highlighted round number levels */
.order-book-row.wall {
    font-weight: bold;
    border-left: 3px solid;
}

.order-book-row.ask.wall {
    background: rgba(244, 67, 54, 0.25);
    border-left-color: #f44336;
}

.order-book-row.bid.wall {
    background: rgba(76, 175, 80, 0.25);
    border-left-color: #4caf50;
}

.order-book-current-price {
    text-align: center;
    padding: 8px;
    background: rgba(102, 126, 234, 0.2);
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #667eea;
    font-family: 'Courier New', monospace;
    margin: 5px 0;
}

/* Правая панель: Панель торговли */
.terminal-right-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    position: relative;
    transition: width 0.3s ease;
}

/* Карточка информации об активе */
.asset-info-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.25) 100%);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 8px;
    padding: 8px 12px;
    backdrop-filter: blur(8px);
}

.asset-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.asset-info-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-info-icon .asset-icon-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 6px rgba(102, 126, 234, 0.2);
}

.asset-info-icon .asset-icon-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #8892b0;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.asset-info-data {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.asset-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.asset-price-large {
    font-size: 1.1rem;
    font-weight: bold;
    color: #667eea;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

.asset-change {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.asset-change.positive {
    color: #4caf50;
}

.asset-change.negative {
    color: #f44336;
}

/* Панель торговли */
.trading-panel {
    background: rgba(26, 29, 46, 0.6);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 10px;
    padding: 10px;
    backdrop-filter: blur(8px);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.trading-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.trade-tab {
    flex: 1;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 6px;
    color: #b0b0b0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.8rem;
    backdrop-filter: blur(4px);
}

.trade-tab.active[data-side="buy"] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.8) 0%, rgba(139, 195, 74, 0.8) 100%);
    border-color: #4caf50;
    color: white;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.trade-tab.active[data-side="sell"] {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.8) 0%, rgba(255, 82, 82, 0.8) 100%);
    border-color: #f44336;
    color: white;
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

/* Форма торговли */
.trading-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 0.85rem;
    color: #888;
    font-weight: 600;
}

.trade-input {
    padding: 12px;
    background: rgba(26, 29, 46, 0.8);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 1rem;
    font-family: 'Courier New', monospace;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.trade-input:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(26, 29, 46, 0.9);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.commission-display,
.total-display {
    padding: 12px;
    background: rgba(26, 29, 46, 0.8);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Courier New', monospace;
    color: #ffa500;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.total-display {
    font-size: 1.2rem;
    color: #667eea;
    border-color: rgba(102, 126, 234, 0.4);
}

.balance-info {
    padding: 12px;
    background: rgba(26, 29, 46, 0.6);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #b0b0b0;
    border-left: 3px solid #667eea;
    backdrop-filter: blur(4px);
}

#asset-holdings {
    padding: 10px;
    background: rgba(0, 230, 118, 0.1);
    border-radius: 6px;
    font-size: 0.85rem;
    color: #b0b0b0;
    border-left: 3px solid #00E676;
    margin-top: 8px;
}

.btn-execute-trade {
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
}

.btn-execute-trade.btn-buy {
    background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
    color: white;
}

.btn-execute-trade.btn-sell {
    background: linear-gradient(135deg, #f44336 0%, #ff5252 100%);
    color: white;
}

.btn-execute-trade:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-execute-trade:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Стакан ордеров */
.order-book-container {
    margin-top: 15px;
    background: rgba(26, 29, 46, 0.8);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(8px);
}

.order-book-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.3);
}

.order-book-header h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #ccd6f6;
    font-weight: 600;
}

.spread-display {
    font-size: 0.8rem;
    color: #8892b0;
    font-family: 'Courier New', monospace;
    background: rgba(102, 126, 234, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.order-book-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.order-book-asks,
.order-book-bids {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.order-book-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    border-radius: 6px;
    transition: background 0.2s;
}

.order-book-row:hover {
    background: rgba(255, 255, 255, 0.08);
}

.order-book-row.ask {
    background: rgba(255, 23, 68, 0.12);
    color: #FF1744;
    border-left: 2px solid rgba(255, 23, 68, 0.4);
}

.order-book-row.bid {
    background: rgba(0, 230, 118, 0.12);
    color: #00E676;
    border-left: 2px solid rgba(0, 230, 118, 0.4);
}

.order-book-current-price {
    text-align: center;
    padding: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #667eea;
    border-top: 1px solid rgba(102, 126, 234, 0.4);
    border-bottom: 1px solid rgba(102, 126, 234, 0.4);
    margin: 6px 0;
    font-family: 'Courier New', monospace;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 6px;
}

/* Открытые позиции */
.open-positions-container {
    margin-top: 15px;
    background: rgba(26, 29, 46, 0.8);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    padding: 14px;
    backdrop-filter: blur(8px);
}

.positions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.3);
}

.positions-header h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #ccd6f6;
    font-weight: 600;
}

.positions-count {
    font-size: 0.8rem;
    color: #8892b0;
    background: rgba(102, 126, 234, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.positions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.no-positions-message {
    text-align: center;
    padding: 24px;
    color: #8892b0;
    font-size: 0.85rem;
}

.position-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s;
}

.position-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

.position-card.long {
    border-left: 4px solid #00E676;
}

.position-card.short {
    border-left: 4px solid #FF1744;
}

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

.position-ticker {
    font-weight: bold;
    font-size: 0.95rem;
    color: #ccd6f6;
}

.position-direction {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.position-direction.long {
    background: rgba(0, 230, 118, 0.2);
    color: #00E676;
}

.position-direction.short {
    background: rgba(255, 23, 68, 0.2);
    color: #FF1744;
}

.position-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    font-size: 0.8rem;
}

.position-detail {
    display: flex;
    justify-content: space-between;
}

.position-label {
    color: #8892b0;
}

.position-value {
    color: #ccd6f6;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.position-pnl.positive {
    color: #00E676;
}

.position-pnl.negative {
    color: #FF1744;
}

.position-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(102, 126, 234, 0.2);
}

.btn-add-margin {
    flex: 1;
    padding: 8px;
    background: rgba(0, 230, 118, 0.15);
    border: 1px solid rgba(0, 230, 118, 0.4);
    border-radius: 6px;
    color: #00E676;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}

.btn-add-margin:hover {
    background: rgba(0, 230, 118, 0.25);
    border-color: #00E676;
    transform: translateY(-1px);
}

.btn-close-position {
    flex: 1;
    padding: 8px;
    background: rgba(255, 23, 68, 0.15);
    border: 1px solid rgba(255, 23, 68, 0.4);
    border-radius: 6px;
    color: #FF1744;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}

.btn-close-position:hover {
    background: rgba(255, 23, 68, 0.25);
    border-color: #FF1744;
    transform: translateY(-1px);
}

/* Селектор направления фьючерсов */
.futures-direction-selector {
    display: flex;
    gap: 10px;
}

.direction-btn {
    flex: 1;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 8px;
    color: #b0b0b0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.direction-btn.long.active {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.8) 0%, rgba(139, 195, 74, 0.8) 100%);
    border-color: #4caf50;
    color: white;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.direction-btn.short.active {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.8) 0%, rgba(255, 82, 82, 0.8) 100%);
    border-color: #f44336;
    color: white;
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.direction-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(102, 126, 234, 0.5);
    transform: translateY(-1px);
}

/* Быстрые кнопки объема */
.quick-volume-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.quick-volume-buttons button {
    padding: 10px;
    background: rgba(26, 29, 46, 0.8);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 8px;
    color: #b0b0b0;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    font-weight: 600;
}

.quick-volume-buttons button:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: #667eea;
    color: white;
}

.position-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(102, 126, 234, 0.2);
}

.btn-add-margin {
    flex: 1;
    padding: 6px;
    background: rgba(0, 230, 118, 0.2);
    border: 1px solid #00E676;
    border-radius: 4px;
    color: #00E676;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-margin:hover {
    background: rgba(0, 230, 118, 0.3);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 1200px) {
    .terminal-main-container {
        grid-template-columns: 250px 1fr 300px;
    }
}

@media (max-width: 992px) {
    .terminal-main-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    
    .terminal-left-panel {
        max-height: 300px;
    }
    
    .terminal-center-panel {
        min-height: 400px;
    }
}

@media (max-width: 576px) {
    .timeframe-selector {
        gap: 6px;
        padding: 4px 8px;
    }
    
    .timeframe-dropdown {
        font-size: 0.7rem;
        min-width: 100px;
        padding: 3px 8px;
    }
}

/* ========================================
   Адаптивность для ноутбуков и малых экранов
   ======================================== */

/* Глобальный скроллбар для окон с переполнением */
.app-window .window-content {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Адаптивная высота окна рынка */
@media (max-height: 800px) {
    .terminal-right-panel:not(.collapsed) {
        width: 300px;
    }
    
    .terminal-left-panel:not(.collapsed) {
        width: 250px;
    }
    
    .terminal-right-panel {
        font-size: 0.85rem;
    }
    
    .asset-info-card {
        padding: 10px !important;
    }
    
    .asset-name {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }
    
    .asset-info-card {
        padding: 6px 10px !important;
    }
    
    .asset-info-icon .asset-icon-img,
    .asset-info-icon .asset-icon-placeholder {
        width: 26px !important;
        height: 26px !important;
    }
    
    .asset-price-large {
        font-size: 1rem !important;
    }
    
    .asset-name {
        font-size: 0.78rem !important;
    }
    
    .asset-change {
        font-size: 0.72rem !important;
    }
    
    .trading-panel {
        padding: 10px !important;
    }
    
    .trade-input {
        padding: 8px !important;
        font-size: 0.85rem !important;
    }
    
    .form-group {
        gap: 3px !important;
    }
    
    .trading-tabs {
        margin-bottom: 10px !important;
    }
    
    .trade-tab {
        padding: 8px !important;
        font-size: 0.8rem !important;
    }
    
    .order-book-container {
        padding: 10px !important;
        margin-top: 10px !important;
        min-height: 250px !important;
        max-height: 350px !important;
    }
    
    .open-positions-container {
        padding: 10px !important;
        margin-top: 10px !important;
    }
    
    .positions-list {
        max-height: 200px !important;
    }
    
    .quick-volume-buttons button {
        padding: 6px !important;
        font-size: 0.8rem !important;
    }
    
    .chart-container {
        min-height: 200px !important;
    }
    
    .timeframe-selector {
        padding: 4px 8px !important;
    }
    
    .timeframe-dropdown {
        font-size: 0.7rem !important;
        min-width: 90px !important;
        padding: 2px 8px !important;
    }
    
    .terminal-header {
        padding: 6px 10px !important;
    }
    
    .ticker-bar {
        padding: 6px 10px !important;
        margin-bottom: 6px !important;
    }
    
    .terminal-left-panel .search-favorites-bar {
        padding: 3px 4px !important;
    }
    
    .terminal-left-panel .terminal-search-input {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }
    
    .terminal-left-panel .btn-favorites-toggle {
        padding: 3px 8px !important;
        font-size: 0.7rem !important;
        margin: 2px 4px !important;
        width: calc(100% - 8px) !important;
    }
    
    .terminal-main-container {
        gap: 6px !important;
        padding: 6px !important;
    }
    
    .terminal-left-panel .market-tab {
        padding: 2px 6px !important;
        font-size: 0.65rem !important;
    }
    
    .terminal-left-panel .market-tab .tab-icon {
        font-size: 0.65rem !important;
    }
    
    .terminal-assets-table th {
        padding: 6px 6px !important;
        font-size: 0.65rem !important;
    }
    
    .terminal-assets-table td {
        padding: 6px 6px !important;
        font-size: 0.75rem !important;
    }
    
    .asset-info-name {
        font-size: 0.75rem !important;
    }
    
    .asset-info-ticker {
        font-size: 0.62rem !important;
    }
    
    .asset-icon-img {
        width: 22px !important;
        height: 22px !important;
    }
    
    .asset-icon-placeholder {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.6rem !important;
    }
    
    .asset-icon-cell {
        width: 34px !important;
        padding: 4px 2px 4px 6px !important;
    }
    
    .balance-info {
        padding: 8px !important;
        font-size: 0.75rem !important;
    }
    
    .btn-execute-trade {
        padding: 8px !important;
        font-size: 0.85rem !important;
        margin-top: 6px !important;
    }
    
    .commission-display,
    .total-display {
        padding: 8px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-height: 700px) {
    .terminal-right-panel:not(.collapsed) {
        width: 280px;
    }
    
    .terminal-left-panel:not(.collapsed) {
        width: 220px;
    }
    
    .order-book-container {
        min-height: 200px !important;
        max-height: 280px !important;
    }
    
    .positions-list {
        max-height: 150px !important;
    }
    
    .asset-info-card {
        padding: 5px 8px !important;
    }
    
    .asset-info-icon .asset-icon-img,
    .asset-info-icon .asset-icon-placeholder {
        width: 24px !important;
        height: 24px !important;
    }
    
    .asset-price-large {
        font-size: 0.95rem !important;
    }
    
    .asset-name {
        font-size: 0.75rem !important;
    }
    
    .asset-change {
        font-size: 0.7rem !important;
    }
    
    .chart-container {
        min-height: 150px !important;
    }
    
    .trading-panel {
        padding: 6px !important;
    }
    
    .trading-mode-selector {
        padding: 3px !important;
        gap: 3px !important;
        margin-bottom: 6px !important;
    }
    
    .mode-btn {
        padding: 3px 6px !important;
        font-size: 0.7rem !important;
    }
    
    .trading-tabs {
        margin-bottom: 6px !important;
    }
    
    .trade-tab {
        padding: 5px 8px !important;
        font-size: 0.75rem !important;
    }
    
    .order-book-row {
        padding: 2px 6px !important;
        font-size: 0.7rem !important;
    }
    
    .order-book-current-price {
        padding: 4px !important;
        font-size: 0.9rem !important;
    }
}

/* Глобальный скроллбар для контента окон */
.app-window .window-content::-webkit-scrollbar {
    width: 6px;
}

.app-window .window-content::-webkit-scrollbar-track {
    background: rgba(26, 29, 46, 0.3);
    border-radius: 3px;
}

.app-window .window-content::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.4);
    border-radius: 3px;
}

.app-window .window-content::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.6);
}

/* ========================================
   Full-Screen News Modal Styles
   ======================================== */

#news-detail-modal {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

#news-detail-modal > div {
    animation: modalSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideUp {
    from {
        transform: translateY(30px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Comments Section Styles */
#news-comments-section {
    transition: all 0.3s ease;
}

/* When comments are visible, ensure proper spacing */
#news-comments-section[style*="display: block"] {
    min-height: 250px !important;
}

.comment-item {
    animation: commentSlideIn 0.3s ease-out;
    animation-fill-mode: both;
}

/* Стили для веток комментариев (ответов) */
.comment-replies {
    margin-left: 20px;
    padding-left: 12px;
    border-left: 2px solid #e8ecf1;
    margin-top: 8px;
}

/* Визуальная лесенка для глубоких веток */
.comment-replies .comment-replies {
    border-left-color: #d1d5db;
}

.comment-replies .comment-replies .comment-replies {
    border-left-color: #9ca3af;
}

.comment-reply-indicator {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.comment-reply-indicator::before {
    content: '↳';
    font-size: 1rem;
    color: #667eea;
}

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

@keyframes commentSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scrollbar styling for comments */
#news-comments-section::-webkit-scrollbar,
#news-detail-body::-webkit-scrollbar {
    width: 8px;
}

#news-comments-section::-webkit-scrollbar-track,
#news-detail-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#news-comments-section::-webkit-scrollbar-thumb,
#news-detail-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: background 0.2s;
}

#news-comments-section::-webkit-scrollbar-thumb:hover,
#news-detail-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

#news-comments-section::-webkit-scrollbar-track,
#news-detail-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#news-comments-section::-webkit-scrollbar-thumb,
#news-detail-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: background 0.2s;
}

#news-comments-section::-webkit-scrollbar-thumb:hover,
#news-detail-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Empty state animation */
#news-comments-section > div:first-child {
    animation: emptyStatePulse 2s ease-in-out infinite;
}

@keyframes emptyStatePulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    #news-detail-modal {
        padding: 10px;
    }
    
    #news-detail-modal > div {
        width: 100%;
        max-height: 95vh;
    }
    
    #news-comments-section {
        max-height: 25vh;
        min-height: 120px;
    }
}

/* Fullscreen Mode Styles */
#news-detail-modal.fullscreen-mode {
    padding: 0 !important;
}

#news-detail-modal.fullscreen-mode > div {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Ensure modal doesn't go under Windows taskbar */
    margin-top: 0;
    margin-bottom: 0;
}

/* Smooth transitions for modal content elements */
#news-detail-body,
#news-comments-section,
#news-detail-headline,
#news-detail-meta {
    transition: all 0.3s ease;
}

/* ==================== APP ICON NAV COLLAPSE ==================== */

/* Collapsed state - hide the grid, keep the toggle button visible */
.app-icon-nav.collapsed .app-icon-nav-grid {
    display: none !important;
}

/* When collapsed, remove bottom margin from the nav container */
.app-icon-nav.collapsed {
    margin-bottom: 0 !important;
}

/* Rotate toggle arrow when collapsed (pointing down = collapsed, pointing up = expanded) */
.app-icon-nav.collapsed .app-icon-nav-toggle {
    transform: rotate(180deg);
}

/* Smooth transition for the toggle button rotation */
.app-icon-nav-toggle {
    transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease !important;
}

/* Smooth transition for the grid collapse/expand */
.app-icon-nav-grid {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Стили для ползунка скорости времени */
#time-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: 3px solid white;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
    transition: all 0.2s;
}

#time-speed-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 25px rgba(102, 126, 234, 0.7);
}

#time-speed-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: 3px solid white;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
}

/* Скрываем стрелки у number input */
#time-speed-custom-input::-webkit-outer-spin-button,
#time-speed-custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#time-speed-custom-input[type=number] {
    -moz-appearance: textfield;
}

/* ===== AUTH UI STYLES ===== */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.auth-overlay.visible {
    opacity: 1;
}

.auth-modal {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px;
    width: 420px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.auth-overlay.visible .auth-modal {
    transform: translateY(0);
}

.auth-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 4px;
}

.auth-tab {
    flex: 1;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.auth-tab.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.auth-tab:hover:not(.active) {
    color: rgba(255, 255, 255, 0.8);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
}

.auth-field {
    margin-bottom: 16px;
}

.auth-field label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.auth-field input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s ease;
}

.auth-field input:focus {
    border-color: rgba(255, 255, 255, 0.3);
}

.auth-field input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.auth-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #323232 0%, #3a3a3a 50%, #323232 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 8px;
}

.auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.08);
}

.auth-btn:active {
    transform: translateY(0);
}

.auth-error {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 12px;
    text-align: center;
    padding: 8px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 8px;
}

.auth-error.hidden {
    display: none;
}

.auth-skip-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-skip-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

/* ===== NICKNAME CHANGE MODAL ===== */
.nickname-modal {
    max-width: 420px;
}

.nickname-current {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 20px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.nickname-current strong {
    color: #4fc3f7;
}

.nickname-rules {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.nickname-rules p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-bottom: 6px;
    font-weight: 600;
}

.nickname-rules ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nickname-rules ul li {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    padding: 2px 0;
    padding-left: 12px;
    position: relative;
}

.nickname-rules ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.25);
}

.nickname-change-btn {
    background: linear-gradient(135deg, #4fc3f7, #2196f3) !important;
}

.nickname-change-btn:hover {
    background: linear-gradient(135deg, #5fcff7, #3aa3f3) !important;
}

.nickname-change-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.auth-success {
    color: #4caf50;
    font-size: 13px;
    margin-top: 12px;
    text-align: center;
    padding: 8px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
}

.auth-success.hidden {
    display: none;
}

/* ===== Life Category Cards (карточки с бором в окне Жизнь) ===== */
.life-category-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.life-category-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102,126,234,0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.2s;
}

.life-category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
    border-color: #667eea;
}

.life-category-card:hover::after {
    opacity: 1;
}

.life-category-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Энергия и здоровье — карточки */
#life-energy-card,
#life-health-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#life-energy-card:hover,
#life-health-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

/* Модальное окно расходников */
#consumables-modal-overlay {
    animation: fadeIn 0.2s ease;
}

#consumables-modal-overlay > div {
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Стили для табов рейтинга Forbes */
.forbes-tab-active {
    background: rgba(102,126,234,0.25) !important;
    border-color: rgba(102,126,234,0.6) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(102,126,234,0.2);
}

.forbes-tab:hover {
    transform: translateY(-1px);
    filter: brightness(1.2);
}