@charset "UTF-8";

/* public/style.css */

/* CSS-переменные для системы сеттингов */
:root {
    --setting-day-bg: linear-gradient(180deg, #f7ebe6 0%, #eedacc 100%);
    --setting-night-bg: linear-gradient(180deg, #76483c 0%, #6b4234 100%);
    --setting-day-text: #3a2b20;
    --setting-night-text: #f7efe6;
    /* Фоновая картинка сеттинга: по умолчанию — прозрачный 1px, чтобы не перебивать градиент */
    --setting-day-bg-image: linear-gradient(transparent, transparent);
    --setting-night-bg-image: linear-gradient(transparent, transparent);
    /* Утро (фаза «смерть жертвы»): прозрачно, пока сеттинг не дал background_morning.png */
    --setting-morning-bg-image: linear-gradient(transparent, transparent);
}

/* ОСНОВНЫЕ СТИЛИ СТРАНИЦЫ */
html, body {
    height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    transition: all 2s ease;
}

/* Дневной фон — ПОСТОЯННАЯ канва в обоих режимах: ночью его накрывает
   плавно проявляющийся слой body::before (см. ниже). Если оставить фон только
   на .day-mode, при смене класса канва мгновенно белела бы под fade-слоем. */
body.day-mode,
body.night-mode {
    background: var(--setting-day-bg-image), var(--setting-day-bg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Дневной режим (по умолчанию) */
body.day-mode {
    color: var(--setting-day-text);
}

/* Ночной режим.
   ВАЖНО: фон канвы здесь НЕ меняем — CSS-градиенты не анимируются, и смена
   background давала резкий скачок. Канва всегда дневная, а ночь приносит
   фиксированный слой body::before, плавно проявляющийся по opacity. */
body.night-mode {
    color: var(--setting-night-text);
}

/* Слой ночного фона поверх дневной канвы: плавный переход день/ночь */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--setting-night-bg-image), var(--setting-night-bg);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
}

body.night-mode::before {
    opacity: 1;
}

/* Слой утреннего фона (фаза «смерть жертвы»): рисуется ПОВЕРХ ночного слоя
   (::after идёт после ::before при одинаковом z-index). Если у сеттинга нет
   background_morning.png, переменная остаётся прозрачной и виден ночной фон. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--setting-morning-bg-image);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
}

body.morning-mode::after {
    opacity: 1;
}

/* Панели и крупные поверхности перекрашиваются в ночь плавно
   (фоновые цвета/текст/рамки — в отличие от градиентов, они анимируются) */
#chat-panel,
#chat-panel .chat-title,
#chat-panel .chat-input-area,
#chat-panel #chatInput,
#phase-display,
#phase-timer,
#gesture-panel {
    transition: background-color 1.6s ease, color 1.6s ease, border-color 1.6s ease, box-shadow 1.6s ease;
}

/* ГЛАВНЫЙ ЗАГОЛОВОК */
#site-title-wrapper {
    position: relative;
    display: inline-block;
    max-width: 400px;
    width: 60%;
    margin: 10px auto 0;
    z-index: 1;
}

#site-title {
    display: block;
    width: 100%;
    height: auto;
}

#site-symbol {
    position: absolute;
    top: -10%;
    right: -8%;
    width: 28%;
    height: auto;
    pointer-events: none;
}

#site-slogan {
    text-align: center;
    font-size: 15px;
    color: #dcbea0;
    margin: 4px auto 0;
    position: relative;
    z-index: 1;
    font-style: italic;
    opacity: 0.85;
}

/* НАЧАЛЬНЫЙ ИНТЕРФЕЙС */
#setup-ui {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* ============================================
   ИКОНКА-ПАСХАЛКА (левый верхний угол)
   ============================================ */
#easter-egg-corner {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 100;
}

#easter-egg-corner-den {
    position: fixed;
    top: 16px;
    left: 78px;
    z-index: 100;
}

#easter-egg-corner.active,
#easter-egg-corner-den.active {
    z-index: 140;
}

/* ============================================
   КНОПКА ОБРАТНОЙ СВЯЗИ (правый нижний угол)
   ============================================ */
#feedback-corner {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.feedback-trigger-btn {
    font-size: 12px;
    font-weight: 700;
    color: #5a3a1a;
    background: rgba(255,255,255,0.92);
    border: 2px solid #c8a070;
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    white-space: nowrap;
}

.feedback-trigger-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(0,0,0,0.18);
}

.feedback-bubble {
    margin-top: 6px;
    font-size: 12px;
    color: #3a2b20;
    background: rgba(255,255,255,0.95);
    border: 2px solid #c8a070;
    border-radius: 12px;
    padding: 6px 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    white-space: nowrap;
}

.feedback-bubble a {
    color: #b06020;
    font-weight: 700;
    text-decoration: none;
}

.feedback-bubble a:hover {
    text-decoration: underline;
}

/* ============================================
   СИСТЕМА ОПЛАТЫ ЧЕРЕЗ БАЛАНС
   ============================================ */
#botPriceTag {
    transition: opacity 0.2s;
}

#botPaymentMode .gender-label {
    font-size: 12px;
}

#promoResult.promo-success {
    color: #2e7d32;
    background: #e8f5e9;
    border-radius: 6px;
    padding: 8px 12px;
}

#promoResult.promo-error {
    color: #c62828;
    background: #ffebee;
    border-radius: 6px;
    padding: 8px 12px;
}

#promoCodeInput {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

#promoBalanceBadge:not(:empty)::before {
    content: '| ';
}

/* ============================================
   БАННЕР БЕТА-ВЕРСИИ (старые стили заменены на новые ниже)
   ============================================ */

#easter-egg-icon,
#easter-egg-icon-den {
    width: 52px;
    height: 52px;
    cursor: pointer;
    border-radius: 12px;
    border: 3px solid #000;
    background: rgba(255,255,255,0.95);
    padding: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: contain;
}

#easter-egg-icon:hover,
#easter-egg-icon-den:hover {
    transform: rotate(-8deg) scale(1.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.easter-egg-bubble {
    position: absolute;
    bottom: -500%;
    left: 0;
    margin-bottom: 8px;
    width: 260px;
    background: rgba(255,255,255,0.97);
    border: 3px solid #000;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    animation: fadeSlideUp 0.3s ease-out;
}

#easter-egg-text-den {
    bottom: -320%;
}

.easter-egg-bubble p {
    margin: 0 0 8px;
    font-size: 13px;
    color: #3a2b20;
    line-height: 1.5;
}

.easter-egg-bubble p:last-of-type {
    margin-bottom: 0;
}

.easter-egg-close {
    position: absolute;
    top: 8px;
    right: 12px;
    cursor: pointer;
    font-size: 16px;
    color: #999;
    transition: color 0.2s;
}

.easter-egg-close:hover {
    color: #333;
}

/* ============================================
   СЧЁТЧИК ОНЛАЙНА (правый верхний угол)
   ============================================ */
#online-counter {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.95);
    border: 3px solid #000;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    color: #3a2b20;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

#online-counter .online-dot {
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

/* Управление звуком в меню/лобби — левый верхний угол, ПОД иконками-пасхалками
   (#easter-egg-corner стоит на top:16px; left:16px, поэтому здесь смещено ниже). */
#menu-audio-controls {
    position: fixed;
    top: 80px;
    left: 16px;
    z-index: 100;
    display: flex;
    gap: 8px;
}
.menu-audio-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid #000;
    background: rgba(255,255,255,0.95);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.menu-audio-btn:hover { transform: scale(1.08); }
.menu-audio-btn.audio-off {
    background: rgba(210,210,210,0.85);
    opacity: 0.55;
}
@media (max-width: 480px) {
    .menu-audio-btn { width: 38px; height: 38px; font-size: 17px; }
    #menu-audio-controls { top: 64px; left: 12px; gap: 6px; }
}

/* ============================================
   3-КОЛОНОЧНЫЙ LAYOUT МЕНЮ
   ============================================ */
/* Фоновый SVG-арт на весь экран */
#menu-bg-art {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

#menu-bg-art .menu-scene-art {
    width: 100%;
    height: 100%;
    display: block;
}

.menu-layout {
    display: grid;
    grid-template-columns: 270px 1fr 270px;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    align-items: start;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
}

.menu-center {
    display: flex;
    justify-content: center;
}

.menu-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

.menu-left {
    justify-self: start;
    width: 100%;
}

.menu-right {
    justify-self: end;
    width: 100%;
}

.about-game-card .side-card-body p,
.from-author-card .side-card-body p {
    font-size: 13px;
    margin: 6px 0;
    color: #5a4a3a;
    line-height: 1.5;
}

.about-game-card .side-card-body ul {
    margin: 6px 0 6px 4px;
    padding-left: 4px;
    list-style: none;
}

.about-game-card .side-card-body li {
    font-size: 12px;
    color: #5a4a3a;
    line-height: 1.5;
    margin-bottom: 5px;
    padding-left: 2px;
}

.about-game-card.expanded .side-card-body {
    max-height: 500px;
}

.from-author-card.expanded .side-card-body {
    max-height: 380px;
}

/* ============================================
   КАРТОЧКА ОБНОВЛЕНИЙ
   ============================================ */
.changelog-card {
    background: linear-gradient(145deg, #1a0830, #2d1060, #1a0828);
    border-color: #261f32;
    box-shadow: 0 4px 24px rgba(124, 58, 237, 0.4), inset 0 0 0 1px rgba(196, 150, 255, 0.12);
}

.changelog-card .side-card-title {
    color: #e9d5ff;
    background: linear-gradient(90deg, #3b0d7a, #5b21b6);
    text-shadow: 0 0 14px rgba(231, 189, 255, 0.547);
}

.changelog-card .side-card-title:hover {
    background: linear-gradient(90deg, #4c1896, #6d28d9);
}

.changelog-card .side-card-title::after {
    color: #231630;
}

.changelog-card.expanded .side-card-title {
    border-bottom: 2px solid rgba(79, 47, 121, 0.3);
}

.changelog-card.expanded .side-card-body {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.changelog-card .side-card-body ul {
    margin: 8px 0 4px 0;
    padding-left: 4px;
    list-style: none;
}

.changelog-card .side-card-body li {
    font-size: 12px;
    color: #331a4b;
    line-height: 1.55;
    margin-bottom: 6px;
    padding-left: 2px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(196, 150, 255, 0.1);
}

.changelog-card .side-card-body li:last-child {
    border-bottom: none;
}

.changelog-version-label {
    font-size: 11px;
    color: rgba(83, 37, 123, 0.642);
    margin-top: 10px;
    text-align: right;
}

.changelog-history-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(91, 33, 182, 0.4);
    border-radius: 8px;
    background: rgba(91, 33, 182, 0.12);
    color: #4d2a78;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.changelog-history-btn:hover {
    background: rgba(91, 33, 182, 0.2);
    border-color: rgba(91, 33, 182, 0.6);
}

.changelog-history-modal-content {
    max-width: 560px;
    width: calc(100vw - 24px);
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.changelog-history-modal-body {
    overflow-y: auto;
    padding-right: 4px;
}

.changelog-history-version-block {
    border: 1px solid rgba(91, 33, 182, 0.18);
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(91, 33, 182, 0.05);
}

.changelog-history-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #4d2a78;
}

.support-author-btn {
    display: block;
    margin: 12px auto 4px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #c0813a, #a06020);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 20px;
    border: 2px solid #7a4a10;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 3px 10px rgba(120,70,10,0.25);
}

.support-author-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(120,70,10,0.35);
}

/* ============================================
   БОКОВЫЕ КАРТОЧКИ (новости, профиль, лидерборд)
   ============================================ */
.side-card {
    background: rgba(255,255,255,0.95);
    border: 3px solid #000;
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    animation: fadeSlideUp 0.5s ease-out both;
    overflow: hidden;
}

.side-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #3a2b20;
    margin: 0;
    padding: 12px 16px;
    border-bottom: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}

.side-card-title:hover {
    background: rgba(0,0,0,0.04);
}

.side-card-title::after {
    content: '▼';
    font-size: 11px;
    color: #a08060;
    transition: transform 0.3s;
}

.side-card.expanded .side-card-title::after {
    transform: rotate(180deg);
}

.side-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 16px;
}

.side-card.expanded .side-card-body {
    max-height: 600px;
    padding: 0 16px 14px;
}

.leaderboard-card.expanded .side-card-body {
    max-height: 420px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.side-card.expanded .side-card-title {
    border-bottom: 2px solid #f0e0d0;
}



/* Карточка профиля (правая сторона) */
.profile-side-card .profile-stats-header {
    margin-bottom: 14px;
    padding-bottom: 0;
    border-bottom: none;
}

.profile-side-card .profile-stats-grid {
    margin-top: 0;
}

/* Заглушка лидерборда */
.leaderboard-card {
    animation-delay: 0.15s;
}

.leaderboard-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    text-align: center;
}

.leaderboard-lock {
    font-size: 32px;
    opacity: 0.5;
}

.leaderboard-placeholder p {
    margin: 0;
    font-size: 13px;
    color: #8a7565;
    line-height: 1.4;
}

/* ============================================
   АДАПТИВНОСТЬ: мобильные/планшеты
   ============================================ */
@media (max-width: 1000px) {
    .menu-layout {
        grid-template-columns: 1fr;
        max-width: 500px;
        padding: 0 8px;
    }
    
    .menu-left {
        order: 3;
    }
    
    .menu-side {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 100% !important;
        justify-self: center !important;
        padding-top: 0;
    }
    
    .menu-center {
        order: 1;
    }
    
    .menu-right {
        order: 2;
    }
    
    .side-card {
        flex: 1;
        min-width: 200px;
    }
    
    #easter-egg-corner {
        position: absolute;
    }
    #easter-egg-corner-den {
        position: absolute;
        left: 78px;
    }
    
    #online-counter {
        position: absolute;
    }
}

@media (max-width: 480px) {
    .menu-side {
        flex-direction: column;
    }
    
    #online-counter {
        font-size: 12px;
        padding: 8px 14px;
    }
    
    #easter-egg-icon,
    #easter-egg-icon-den {
        width: 40px;
        height: 40px;
    }
}

/* ПАНЕЛЬ ВВОДА ИМЕНИ */
#name-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 34px;
    border-radius: 20px;
    border: 4px solid #000;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    min-width: 300px;
    max-width: 420px;
    box-sizing: border-box;
    margin: 40px auto;
}

#name-panel label {
    font-size: 20px;
    font-weight: bold;
}

#name-panel input {
    padding: 12px 16px;
    width: 280px;
    font-size: 16px;
    border-radius: 8px;
    border: 2px solid #8a5836;
}

/* ВЫБОР АВАТАРА */
#avatar-selector label {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

.avatar-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    max-width: 300px;
}

.avatar-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.avatar-option:hover {
    background-color: rgba(138, 88, 54, 0.1);
    border-color: #8a5836;
}

.avatar-option.selected {
    border-color: #ff6b6b;
    background-color: rgba(255, 107, 107, 0.1);
}

.avatar-preview {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ddd;
    -webkit-mask-image: url('kolobok.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('kolobok.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* Цвета аватаров */
.avatar-option[data-color="orange"] .avatar-preview { background-color: #FF8C00; }
.avatar-option[data-color="green"]  .avatar-preview { background-color: #2ECC40; }
.avatar-option[data-color="blue"]   .avatar-preview { background-color: #4DA6FF; }
.avatar-option[data-color="red"]    .avatar-preview { background-color: #FF4D4D; }
.avatar-option[data-color="yellow"] .avatar-preview { background-color: #FFDD57; }
.avatar-option[data-color="pink"]   .avatar-preview { background-color: #FF66CC; }
.avatar-option[data-color="cyan"]   .avatar-preview { background-color: #20E5D9; }
.avatar-option[data-color="violet"] .avatar-preview { background-color: #A66CFF; }
.avatar-option[data-color="violet"] .avatar-preview { background-color: #A66CFF; }
.avatar-option[data-color="black"] .avatar-preview { background-color: #121212; }
.avatar-option[data-color="white"] .avatar-preview { background-color: #f3eeee; }
.avatar-option[data-color="grey"] .avatar-preview { background-color: #626162; }

/* ============================================
   РЕДАКТОР АВАТАРА - МОДАЛЬНОЕ ОКНО
   ============================================ */

#avatar-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
}

.avatar-large-preview {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background-color: #FF8C00;
    -webkit-mask-image: url('kolobok.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('kolobok.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
}

/* Слой для узора поверх аватара */
.avatar-large-preview.has-pattern::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-mask-image: url('kolobok.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('kolobok.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    pointer-events: none;
    background-image: var(--pattern-url);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.5;
    mix-blend-mode: overlay;
}

#openAvatarEditorBtn {
    padding: 9px 18px;
    font-size: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#openAvatarEditorBtn:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Переключатель пола */
.gender-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 4px 0;
    order: 6;
}

.gender-selector-compact {
    margin: 5px 0;
}

.gender-option {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.gender-option input[type="radio"] {
    display: none;
}

.gender-label {
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    color: #5d5a5a;
    font-size: 14px;
    transition: all 0.2s ease;
    user-select: none;
}

.gender-option input[type="radio"]:checked + .gender-label {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: #e7e4e4;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
}

.gender-label:hover {
    border-color: rgba(135, 134, 134, 0.4);
    color: #444343;
}

/* Модальное окно редактора */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal.hidden {
    display: none;
}

.avatar-editor-content {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.avatar-editor-content .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.avatar-editor-content .modal-header > span {
    font-size: 20px;
    font-weight: bold;
}

.avatar-editor-tabs {
    display: flex;
    gap: 5px;
}

.tab-btn {
    flex: 1;
    padding: 10px 15px;
    border: none;
    background: rgba(255,255,255,0.2);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.tab-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: none;
    box-shadow: none;
}

.tab-btn.active {
    background: white;
    color: #764ba2;
    font-weight: bold;
}

.avatar-editor-body {
    padding: 20px;
}

.avatar-editor-preview {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#editor-avatar-preview {
    width: 120px;
    height: 120px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    text-align: center;
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.color-option {
    aspect-ratio: 1;
    border-radius: 12px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    position: relative;
}

.color-option:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.color-option.selected {
    border-color: #333;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

.color-option.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 10px), calc(-50% - 10px));
    font-size: 24px;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Опция "без градиента" */
.color-option.no-gradient {
    background: repeating-linear-gradient(
        45deg,
        #ddd,
        #ddd 5px,
        #eee 5px,
        #eee 10px
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
}

/* Сетка узоров */
.pattern-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pattern-option {
    aspect-ratio: 1;
    border-radius: 12px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
}

.pattern-option:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.pattern-option.selected {
    border-color: #764ba2;
    background-color: rgba(118, 75, 162, 0.1);
}

.pattern-preview {
    width: 40px;
    height: 40px;
    background-size: 15px 15px;
    border-radius: 8px;
}

.pattern-option span {
    font-size: 11px;
    color: #666;
}

.avatar-editor-content .modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-secondary {
    background-color: #6c757d;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Цвета для color-option */
.color-option.color-orange { background-color: #FF8C00; }
.color-option.color-green { background-color: #2ECC40; }
.color-option.color-blue { background-color: #4DA6FF; }
.color-option.color-red { background-color: #FF4D4D; }
.color-option.color-yellow { background-color: #FFDD57; }
.color-option.color-pink { background-color: #FF66CC; }
.color-option.color-cyan { background-color: #20E5D9; }
.color-option.color-violet { background-color: #A66CFF; }
.color-option.color-black { background-color: #121212; }
.color-option.color-white { background-color: #f3eeee; }
.color-option.color-grey { background-color: #626162; }

/* КНОПКИ */
button {
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #8a5836;
    color: white;
}

button:hover {
    background-color: #9a6b4a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

button:active {
    transform: translateY(0);
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#enterNameBtn {
    padding: 9px 10px;
    font-size: 13px;
    font-weight: bold;
}

/* ========== СИСТЕМА УВЕДОМЛЕНИЙ ========== */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.notification {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.notification:hover {
    transform: scale(1.02);
}

/* ПАНЕЛЬ КОМНАТ */
#rooms-panel {
    display: none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.rooms-grid {
    display: flex;
    gap: 40px;
    width: 100%;
}

.rooms-left, .rooms-right {
    flex: 1;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.rooms-left {
    display: flex;
    flex-direction: column;
}

.divider {
    width: 2px;
    background: #8a5836;
    opacity: 0.3;
}

.rooms-subtitle {
    font-size: 24px;
    margin: 0 0 20px 0;
    color: #3a2b20;
}

.rooms-info {
    font-style: italic;
    color: #666;
    margin-bottom: 20px;
}

.join-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.join-row input {
    flex: 1;
    padding: 10px;
    border: 2px solid #8a5836;
    border-radius: 6px;
    font-size: 16px;
}

#rooms-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    flex-shrink: 1;
    min-height: 60px;
}

/* Когда чат лобби виден — уменьшаем список комнат */
#rooms-list.with-lobby-chat {
    max-height: 180px;
}

/* ============================================
   ЧАТ ЛОББИ (в левой колонке)
   ============================================ */
#lobby-chat {
    margin-top: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.lobby-chat-title {
    padding: 10px 14px;
    font-weight: bold;
    font-size: 15px;
    color: #3a2b20;
    border-bottom: 1px solid #e0e0e0;
    background: rgba(138, 88, 54, 0.08);
    border-radius: 8px 8px 0 0;
}

#lobby-chat-messages {
    height: 200px;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#lobby-chat-messages::-webkit-scrollbar {
    width: 6px;
}

#lobby-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(138, 88, 54, 0.3);
    border-radius: 3px;
}

.lobby-msg {
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
    animation: fadeIn 0.2s ease;
}

.lobby-msg-sender {
    font-weight: bold;
    color: #8a5836;
    margin-right: 6px;
}

.lobby-msg-text {
    color: #3a2b20;
}

.lobby-msg-system {
    color: #999;
    font-style: italic;
    font-size: 12px;
    text-align: center;
    padding: 2px 0;
}

.lobby-msg-time {
    font-size: 11px;
    color: #bbb;
    margin-left: 6px;
}

.lobby-chat-input-area {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #e0e0e0;
    background: white;
    border-radius: 0 0 8px 8px;
}

.lobby-chat-input-area input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.lobby-chat-input-area input:focus {
    border-color: #8a5836;
}

.lobby-chat-input-area button {
    padding: 8px 14px;
    background: #8a5836;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
    min-width: 40px;
}

.lobby-chat-input-area button:hover {
    background: #6d4529;
}

/* ===== ОТВЕТЫ В ЛОББИ-ЧАТЕ ===== */
/* Строка сообщения: текст слева, кнопка «ответить» справа */
.lobby-msg-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.lobby-msg-line .lobby-msg-text {
    flex: 1;
    min-width: 0;
}
.lobby-msg-reply-btn {
    flex-shrink: 0;
    align-self: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #8a5836;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 50%;
    opacity: 0.45;
    transition: opacity 0.15s, background 0.15s;
}
.lobby-msg-line:hover .lobby-msg-reply-btn { opacity: 0.9; }
.lobby-msg-reply-btn:hover { opacity: 1; background: rgba(138, 88, 54, 0.12); }

/* Цитата над сообщением-ответом */
.lobby-msg-quote {
    font-size: 11px;
    color: #999;
    font-style: italic;
    border-left: 2px solid #ccc;
    padding-left: 6px;
    margin-bottom: 2px;
    word-break: break-word;
}
.lobby-msg-quote b { color: #8a5836; font-style: normal; }

/* Превью ответа над полем ввода */
.lobby-reply-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 10px;
    padding: 6px 10px;
    background: rgba(138, 88, 54, 0.08);
    border-left: 3px solid #8a5836;
    border-radius: 6px;
    font-size: 12px;
    color: #6b5a4a;
}
.lobby-reply-preview-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lobby-reply-preview-text b { color: #8a5836; }
.lobby-reply-cancel {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
}
.lobby-reply-cancel:hover { color: #c0392b; }

/* КНОПКА СОЗДАНИЯ КОМНАТЫ */
.create-btn {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
}

/* МОДАЛЬНОЕ ОКНО СОЗДАНИЯ КОМНАТЫ */
#bot-config-modal .modal-content {
    max-width: 420px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#bot-config-modal {
    align-items: flex-start;
    overflow-y: auto;
    padding: 10px 0;
}

#bot-config-modal .modal-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 2;
    padding-top: 2px;
}

#bot-config-modal .modal-footer {
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 3;
}

.modal-content {
    padding: 24px;
    background: white;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    color: #3a2b20;
}

.modal-header {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #3a2b20;
}

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

.form-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #555;
}

.form-field input {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
}

.form-field input:focus {
    border-color: #8a5836;
    outline: none;
}

.checkbox-field {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    align-items: start;
}
.checkbox-field input[type="checkbox"] {
    margin-top: 3px; /* выровнять визуально с первой строкой текста */
}
.checkbox-field label {
    white-space: normal; /* разрешаем переносы */
    display: block;
    word-break: break-word;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

/* ЛОББИ */
#lobby {
    margin-top: 30px;
    padding: 20px;
    background: #f8f4f0;
    border-radius: 12px;
}

.player-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.player-sprite {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 8px;
    background-color: #ddd;
    -webkit-mask-image: url('kolobok.png');
    mask-image: url('kolobok.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    position: relative;
    transform: scaleX(-1);
}

/* Слой узора для маленького спрайта */
.player-sprite.has-pattern::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-mask-image: url('kolobok.png');
    mask-image: url('kolobok.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-image: var(--pattern-url);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.5;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Overlay лица для маленького спрайта */
.player-sprite .avatar-face {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 100;
}

/* ИГРОВОЙ ИНТЕРФЕЙС */
#game-ui {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 100;
}

/* ПАНЕЛЬ ЧАТА */
#chat-panel {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 320px;
    height: 350px;
    min-width: 240px;
    min-height: 220px;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    z-index: 999;
    backdrop-filter: blur(10px);
    overflow: hidden;
    resize: both;            /* пользователь может увеличить чат перетаскиванием угла */
    display: flex;
    flex-direction: column;
    /* size/position НЕ анимируем — иначе перетаскивание угла лагает */
    transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* День - светлый стиль чата */
body.day-mode #chat-panel {
    background: rgba(255, 248, 240, 0.95);
    color: #5a4030;
    border: 2px solid #d4a574;
    box-shadow: 0 4px 15px rgba(212, 165, 116, 0.3);
}

body.day-mode #chat-panel .chat-title {
    background: rgba(212, 165, 116, 0.3);
    border-bottom: 1px solid #d4a574;
    color: #5a4030;
}

body.day-mode #chat-panel .chat-input-area {
    background: rgba(212, 165, 116, 0.2);
    border-top: 1px solid #d4a574;
}

body.day-mode #chat-panel #chatInput {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #d4a574;
    color: #5a4030;
}

body.day-mode #chat-panel #chatInput::placeholder {
    color: #8b7355;
}

body.day-mode #chat-panel #sendChatBtn {
    background: #d4a574;
    color: #fff;
}

body.day-mode #chat-panel .chat-message .sender {
    color: #8b5a3c;
}

body.day-mode #chat-panel .chat-message.system {
    color: #8b7355;
}

/* Ночь - тёмный стиль чата */
body.night-mode #chat-panel {
    background: rgba(40, 25, 20, 0.95);
    color: #e8d5c4;
    border: 2px solid #8b5a3c;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

body.night-mode #chat-panel .chat-title {
    background: rgba(139, 90, 60, 0.3);
    border-bottom: 1px solid #8b5a3c;
    color: #e8d5c4;
}

body.night-mode #chat-panel .chat-input-area {
    background: rgba(139, 90, 60, 0.2);
    border-top: 1px solid #8b5a3c;
}

body.night-mode #chat-panel #chatInput {
    background: rgba(60, 40, 30, 0.8);
    border: 1px solid #8b5a3c;
    color: #e8d5c4;
}

body.night-mode #chat-panel #chatInput::placeholder {
    color: #a08070;
}

body.night-mode #chat-panel #sendChatBtn {
    background: #8b5a3c;
    color: #fff;
}

body.night-mode #chat-panel .chat-message .sender {
    color: #ffcc88;
}

body.night-mode #chat-panel .chat-message.system {
    color: #a08070;
}

body.night-mode #speaker-status {
    display: none !important;
}

.chat-title {
    font-size: 14px;
    font-weight: bold;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.5s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.chat-close-mobile {
    display: none;
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1;
}
.chat-close-mobile:hover { background: rgba(255,255,255,0.15); }
@media (max-width: 1100px) {
    .chat-close-mobile { display: inline-block; }
}

#chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-message {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

.chat-message .sender {
    font-weight: bold;
    color: #ffeb3b;
    margin-right: 5px;
}

.chat-message.system {
    color: #aaa;
    font-style: italic;
    text-align: center;
    font-size: 12px;
}

body.bubbles-active .chat-message:not(.system) {
    display: block;
}

/* ===== Вкладки чата: «Чат» / «Связь с богом» (в строке заголовка) ===== */
.chat-tabs {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.chat-tab {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(127, 127, 127, 0.18);
    color: inherit;
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s, opacity 0.2s;
}
.chat-tab.active { opacity: 1; background: rgba(156, 39, 176, 0.28); font-weight: 700; }
.chat-tab:hover { opacity: 1; }
.chat-tab.chat-tab-unread::after { content: ' ●'; color: #ff5252; }

/* Личка с богом — отдельный список сообщений (показывается вместо #chat-messages) */
#god-dm-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    flex-direction: column;
    gap: 6px;
}
.god-dm-message {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
    padding: 4px 9px;
    border-radius: 9px;
    max-width: 92%;
}
.god-dm-message.dm-out { align-self: flex-end; background: rgba(76, 175, 80, 0.18); }
.god-dm-message.dm-in { align-self: flex-start; background: rgba(156, 39, 176, 0.20); }
.god-dm-message .sender { font-weight: bold; color: #ce93d8; margin-right: 4px; }

#godDmRecipient {
    flex: 1 1 100%;          /* занимает всю первую строку — поле и кнопка переносятся вниз */
    max-width: none;
    font-size: 12px;
    border-radius: 6px;
    padding: 5px;
}

/* Выбор адресата обычного чата у бога: игрокам / только зрителям */
#godChatTargetSelect {
    flex: 1 1 100%;
    max-width: none;
    font-size: 12px;
    border-radius: 6px;
    padding: 5px;
    background: rgba(156, 39, 176, 0.15);
    border: 1px solid rgba(156, 39, 176, 0.4);
    color: inherit;
}

/* Адаптив под телефон: вкладки крупнее для пальца */
@media (max-width: 1100px) {
    .chat-tab { font-size: 13px; padding: 9px 6px; }
    #godDmRecipient { font-size: 13px; }
    #godChatTargetSelect { font-size: 13px; }
}

/* ============================================
   ПОДСКАЗКИ ДЛЯ НОВИЧКОВ (онбординг)
   Адаптивные: баннер снизу + приветственная карточка.
   ============================================ */
.hint-banner {
    position: fixed;
    top: 50px;
    right: 16px;
    left: auto;
    bottom: auto;
    transform: translateY(-160%);
    z-index: 100050;
    max-width: min(360px, 88vw);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(30, 18, 45, 0.97);
    color: #f3ecff;
    border: 1px solid #9c6dd6;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.hint-banner.visible { transform: translateY(0); opacity: 1; }
.hint-banner-body { flex: 1; }
.hint-banner-body b { color: #d8b4ff; }
.hint-banner-close {
    flex-shrink: 0;
    background: #7e57c2;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.hint-banner-close:hover { background: #9575cd; }

.hint-welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 100060;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.hint-welcome-card {
    max-width: min(460px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    background: linear-gradient(160deg, #2a1840, #1c1230);
    color: #f3ecff;
    border: 1px solid #9c6dd6;
    border-radius: 16px;
    padding: 22px 22px 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
.hint-welcome-title { font-size: 20px; font-weight: 800; margin-bottom: 14px; text-align: center; }
.hint-welcome-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.hint-welcome-list li { font-size: 14px; line-height: 1.45; }
.hint-welcome-btn {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 15px;
    font-weight: 700;
    background: #7e57c2;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
.hint-welcome-btn:hover { background: #9575cd; }

@media (max-width: 600px) {
    .hint-banner { font-size: 13px; padding: 10px 12px; gap: 8px; flex-direction: column; align-items: stretch; top: 10px; right: 8px; left: 8px; max-width: none; }
    .hint-banner-close { width: 100%; padding: 9px; }
    .hint-welcome-title { font-size: 18px; }
    .hint-welcome-list li { font-size: 13px; }
}

.chat-input-area {
    display: flex;
    flex-wrap: wrap;          /* селект адресата — на 1-й строке, поле+кнопка — на 2-й */
    align-items: flex-end;    /* при увеличенном поле ввода кнопки прижаты к его низу */
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border-top: 1px solid rgba(255,255,255,0.1);
    gap: 8px;
}

#chatInput {
    flex: 1 1 auto;
    min-width: 0;            /* без этого поле не сжимается и кнопка «слезает» вниз */
    min-height: 38px;        /* одинаковая высота с кнопками микрофона/отправки */
    max-height: 220px;       /* не даём разрастись на весь чат */
    height: 38px;            /* стартовая высота = одна строка */
    box-sizing: border-box;
    resize: vertical;        /* пользователь может увеличить поле ввода по высоте */
    overflow-y: auto;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: white;
    padding: 6px 10px;
    font-family: inherit;    /* textarea иначе берёт моноширинный шрифт */
    font-size: 13px;
    line-height: 1.4;
}

#chatInput:focus {
    outline: none;
    border-color: #ffeb3b;
}

#sendChatBtn {
    background: #ffeb3b;
    border: none;
    border-radius: 6px;
    color: #333;
    font-weight: bold;
    width: 40px;
    height: 38px;             /* одинаковая высота с полем и микрофоном */
    box-sizing: border-box;
    flex-shrink: 0;          /* кнопка не сжимается и не переносится на новую строку */
    align-self: center;
    cursor: pointer;
    transition: transform 0.1s;
}

#sendChatBtn:active {
    transform: scale(0.9);
}

/* Кнопка голосового ввода (диктовка через STT) */
#dictation-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: white;
    font-size: 16px;
    width: 40px;
    height: 38px;             /* одинаковая высота с полем и кнопкой отправки */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}
#dictation-btn:hover {
    background: rgba(255,255,255,0.2);
}
#dictation-btn:active {
    transform: scale(0.9);
}
/* Идёт распознавание — красная пульсация */
#dictation-btn.listening {
    background: #e53935;
    border-color: #e53935;
    color: #fff;
    animation: dictation-pulse 1.2s ease-in-out infinite;
}
@keyframes dictation-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229,57,53,0.6); }
    50% { box-shadow: 0 0 0 6px rgba(229,57,53,0); }
}

/* ИСТОРИЯ ГОЛОСОВАНИЙ */
#voting-history {
    position: fixed;
    top: 20px;
    left: 360px; /* Смещаем правее от чата */
    max-width: 350px;
    max-height: 400px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    border-radius: 12px;
    z-index: 999;
    backdrop-filter: blur(10px);
    overflow: hidden;
    display: none; /* Скрыто по умолчанию */
}

#voting-history.visible {
    display: block;
}

.voting-history-title {
    font-size: 14px;
    font-weight: bold;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.voting-history-collapse-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, background 0.15s ease;
}

.voting-history-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

#voting-history.collapsed .voting-history-collapse-btn {
    transform: rotate(-90deg);
}

#voting-history.collapsed #voting-history-content {
    display: none;
}

#voting-history-content {
    max-height: 340px;
    overflow-y: auto;
    padding: 10px;
}

#voting-history-content::-webkit-scrollbar {
    width: 6px;
}

#voting-history-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

#voting-history-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.voting-day-block {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.voting-day-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.voting-day-header {
    font-size: 13px;
    font-weight: bold;
    color: #ffeb3b;
    margin-bottom: 8px;
}

.voting-candidate-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    flex-wrap: wrap;
}

.voting-candidate {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
    color: #ff9800;
}

.voting-candidate.executed {
    color: #ff4444;
    text-decoration: line-through;
}

.voting-arrow {
    color: #888;
    font-size: 14px;
}

.voting-voters {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}

.voting-voters-hidden {
    color: #d7c8a9;
    font-weight: 700;
    padding: 2px 8px;
    border: 1px solid rgba(215, 200, 169, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.voting-voter {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #aaa;
}

.voting-total {
    color: #4caf50;
    font-weight: bold;
    margin-left: auto;
}

.mini-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transform: scaleX(-1);
}

.mini-avatar.color-orange { background-color: #ff9800; }
.mini-avatar.color-green { background-color: #4caf50; }
.mini-avatar.color-blue { background-color: #2196f3; }
.mini-avatar.color-red { background-color: #f44336; }
.mini-avatar.color-yellow { background-color: #ffeb3b; }
.mini-avatar.color-pink { background-color: #e91e63; }
.mini-avatar.color-cyan { background-color: #00bcd4; }
.mini-avatar.color-violet { background-color: #9c27b0; }
.mini-avatar.color-black { background-color: #121212; }
.mini-avatar.color-white { background-color: #f3eeee; }
.mini-avatar.color-grey { background-color: #626162; }

/* ========== OVERLAY ЛИЦ ДЛЯ АВАТАРОВ ========== */
/* Overlay лица для маленького спрайта (lobby/room) */
.player-sprite .avatar-face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -55%);
    width: 50%;
    height: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 100;
}

/* Лицо внутри спрайта за столом — не используется (face вынесено на уровень seat) */
.player-sprite-table .avatar-face {
    display: none;
}

/* Overlay лица для мини-аватара */
.mini-avatar .avatar-face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-65%, -55%);
    width: 80%;
    height: 80%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 50;
}

/* КНОПКА ВОЗДЕРЖАТЬСЯ */
.abstain-btn {
    position: fixed;
    right: 30px;
    bottom: 50%;
    padding: 15px 30px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 1100;
    transition: all 0.2s ease;
    display: none;
}

.abstain-btn:hover {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

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

.abstain-btn.visible {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* ФИНАЛЬНОЕ ГОЛОСОВАНИЕ (казнить / помиловать) */
.final-vote-ui {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 20, 10, 0.95);
    border: 2px solid #ff9800;
    border-radius: 16px;
    padding: 24px 32px;
    z-index: 1200;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.4s ease;
    min-width: 320px;
}

.final-vote-title {
    color: #ff9800;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 8px;
}

.final-vote-subtitle {
    color: #ddd;
    font-size: 15px;
    margin-bottom: 20px;
}

.final-vote-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 16px;
}

.final-vote-btn {
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.final-vote-btn.execute-btn {
    background: linear-gradient(135deg, #e53935, #b71c1c);
    color: white;
}

.final-vote-btn.execute-btn:hover {
    background: linear-gradient(135deg, #f44336, #c62828);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(229, 57, 53, 0.4);
}

.final-vote-btn.spare-btn {
    background: linear-gradient(135deg, #43a047, #2e7d32);
    color: white;
}

.final-vote-btn.spare-btn:hover {
    background: linear-gradient(135deg, #4caf50, #388e3c);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 160, 71, 0.4);
}

.final-vote-btn.selected {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    outline: 3px solid #fff;
}

.final-vote-btn.dimmed {
    opacity: 0.4;
    pointer-events: none;
    transform: scale(0.95);
}

.final-vote-counter {
    color: #aaa;
    font-size: 14px;
    margin-top: 4px;
}

#phase-display {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1000;
    padding: 12px 30px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transition: all 0.5s ease;
}

/* День - светлый стиль */
body.day-mode #phase-display {
    background: rgba(255, 248, 240, 0.9);
    color: #5a4030;
    border: 2px solid #d4a574;
    box-shadow: 0 4px 15px rgba(212, 165, 116, 0.3);
}

/* Ночь - тёмный стиль */
body.night-mode #phase-display {
    background: rgba(40, 25, 20, 0.9);
    color: #e8d5c4;
    border: 2px solid #8b5a3c;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

#phase-title {
    margin: 0;
    font-size: 24px;
}

#phase-number {
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
}

/* КАРТОЧКА РОЛИ */
.role-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    border: 4px solid #8a5836;
    border-radius: 15px;
    padding: 30px 50px;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.role-card.visible {
    opacity: 1;
    pointer-events: auto;
}

.role-card h1 {
    margin: 20px 0 0 0;
    font-size: 36px;
    color: #8a5836;
}

/* ИГРОВОЙ СТОЛ */
#game-table-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* dvh учитывает текущую видимую высоту вьюпорта (без адресной строки на мобиле).
       vh — фолбек для старых браузеров. */
    height: 70vh;
    height: 70dvh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 50;
}

/* ИГРОВОЙ СТОЛ */
.game-table-wrapper {
    position: relative;
    /* Фиксированный natural-размер (design-size). На узких экранах
       уменьшается через transform: scale(...) — см. fitGameTable() в script.js */
    width: 1280px;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transform-origin: bottom center;
    will-change: transform;
    /* Важно: wrapper не должен иметь z-index, создающего изоляцию, если table имеет */
    z-index: auto;
}

.game-table {
    width: 1200px; 
    height: 600px; 
    position: absolute;
    bottom: -200px; 
    z-index: 55; /* Стол выше колобков/шапок/лиц, но ниже имён и табличек */
    background: url('table.png') center / contain no-repeat;
    pointer-events: none; /* Чтобы клики проходили к спрайтам, если они под ним, но тут спрайты под столом визуально */
}

/* Контейнер для игроков вокруг стола */
.players-around-table {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: auto; /* НЕ СОЗДАЕМ КОНТЕКСТ */
    top: 0;
    left: 0;
    pointer-events: none;
}

/* ИГРОК ЗА СТОЛОМ - ЯКОРЬ */
.player-at-table {
    position: absolute;
    display: flex; 
    width: 0;
    height: 0;
    transform: none;
    z-index: auto;
    
    justify-content: center;
    align-items: center;
    
    pointer-events: auto; /* Включаем события для контейнера */
}

/* Общие правила для частей игрока */
.player-at-table > * {
    position: absolute;
    left: 50%;
    /* transform переносим на детей */
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

/* Выноска позиционируется отдельно, без общего centering-трансформа */
.player-at-table > .speech-bubble {
    left: auto;
    transform: none;
}

/* НОМЕР ИГРОКА */
.player-number {
    background: rgba(255, 255, 255, 0.85);
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: bold;
    color: #333;
    pointer-events: none;
    white-space: nowrap;
    
    /* Позиция - ставим на ту же высоту, что и имя */
    top: 25px;
    margin-left: -50px; /* Сдвиг влево относительно центра, чтобы быть слева от имени */
    z-index: 60; /* ВЫШЕ СииииииТОЛА */
}

/* СПРАЙТ ИГРОКА ЗА СТОЛОМ */
.player-sprite-table {
    width: 170px;
    height: 170px;
    min-width: 170px;
    min-height: 170px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #FF8C00; /* Дефолтный цвет */
    background-size: cover;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -135px; /* Центрируем по вертикали относительно якоря */
    z-index: var(--seat-sprite-z, 34); /* Слой колобка задаётся симметрично от краёв к центру */
    /* Крайние места стоят на дробных координатах (calc(50% + float px)) — браузер
       рисует тонкий вертикальный шов по центру при субпиксельном композитинге.
       Выносим колобок на собственный слой → шов исчезает. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

/* Слой узора для спрайта за столом */
.player-sprite-table.has-pattern::after {
    content: '';
    position: absolute;
    top: -38px;
    left: -39px;
    width: 250px;
    height: 250px;
    background-image: var(--pattern-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Векторные (SVG) узоры заливают весь квадрат: за столом обрезаем слой по кругу
   аватара (border-radius клипует фон), иначе узор вылезает за спрайт.
   У растровых узоров своя форма-альфа — им большой слой 250×250 оставляем. */
.player-sprite-table.pattern-vector::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

/* Overlay лица для спрайта за столом — ВЫНЕСЕНО на уровень seat */
.player-at-table > .avatar-face-table {
    position: absolute;
    left: 50%;
    top: -135px; /* Совпадает с top спрайта */
    width: 170px;  /* Совпадает с размером спрайта */
    height: 170px;
    transform: translateX(-50%) translateX(-10px);
    z-index: var(--seat-face-z, 44); /* Лицо всегда выше шапки, но ниже стола */
    pointer-events: none;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: 43% 45%;
}

/* Зеркалирование лица для flipped игроков */
.player-at-table.flipped > .avatar-face-table {
    transform: translateX(-50%) translateX(10px) scaleX(-1);
}

/* Для игроков справа (flipped) — зеркалим весь спрайт */
.player-at-table.flipped .player-sprite-table {
    transform: translateX(-50%) scaleX(-1);
}

/* Имя игрока */
.player-name-table {
    background: rgba(255, 255, 255, 0.85);
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: bold;
    color: #333;
    pointer-events: none;
    white-space: nowrap;
    
    /* Позиция */
    top: 25px; /* Та же высота, что и у номера */
    margin-left: 20px; /* Сдвиг вправо, чтобы не накладывался на номер, а был рядом */
    z-index: 60; /* ВЫШЕ СТОЛА */
}


/* ТАЙМЕР */
#phase-timer {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 10px;
    z-index: 1000;
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: all 0.5s ease;
}

#phase-timer.visible-timer {
    opacity: 1;
}

/* Предупреждение о конце фазы — оранжевая пульсация (за 10 сек до конца) */
#phase-timer.timer-warn {
    animation: phase-timer-warn 1s ease-in-out infinite;
    border-color: #ff9800 !important;
    color: #ff9800 !important;
}
@keyframes phase-timer-warn {
    0%, 100% { box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4); transform: scale(1); }
    50%      { box-shadow: 0 4px 22px rgba(255, 152, 0, 0.85); transform: scale(1.06); }
}

/* Опасность — красная быстрая пульсация (за 5 сек до конца) */
#phase-timer.timer-danger {
    animation: phase-timer-danger 0.55s ease-in-out infinite;
    border-color: #f44336 !important;
    color: #f44336 !important;
    font-weight: 700;
}
@keyframes phase-timer-danger {
    0%, 100% { box-shadow: 0 4px 16px rgba(244, 67, 54, 0.5); transform: scale(1); }
    50%      { box-shadow: 0 4px 28px rgba(244, 67, 54, 1); transform: scale(1.1); }
}

/* День - светлый стиль таймера */
body.day-mode #phase-timer {
    background: rgba(255, 248, 240, 0.9);
    color: #5a4030;
    border: 2px solid #d4a574;
    box-shadow: 0 4px 15px rgba(212, 165, 116, 0.3);
}

/* Ночь - тёмный стиль таймера */
body.night-mode #phase-timer {
    background: rgba(40, 25, 20, 0.9);
    color: #e8d5c4;
    border: 2px solid #8b5a3c;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

#phase-label {
    font-size: 14px;
    opacity: 0.9;
}

#phase-time {
    font-size: 20px;
    font-weight: bold;
    font-family: monospace;
}

/* ЦВЕТА ДЛЯ СПРАЙТОВ */
.player-sprite.color-orange, .player-sprite-table.color-orange { background-color: #FF8C00; }
.player-sprite.color-green,  .player-sprite-table.color-green  { background-color: #2ECC40; }
.player-sprite.color-blue,   .player-sprite-table.color-blue   { background-color: #4DA6FF; }
.player-sprite.color-red,    .player-sprite-table.color-red    { background-color: #FF4D4D; }
.player-sprite.color-yellow, .player-sprite-table.color-yellow { background-color: #FFDD57; }
.player-sprite.color-pink,   .player-sprite-table.color-pink   { background-color: #FF66CC; }
.player-sprite.color-cyan,   .player-sprite-table.color-cyan   { background-color: #20E5D9; }
.player-sprite.color-violet, .player-sprite-table.color-violet { background-color: #A66CFF; }
.player-sprite.color-black,  .player-sprite-table.color-black  { background-color: #121212; }
.player-sprite.color-white,  .player-sprite-table.color-white  { background-color: #f3eeee; }
.player-sprite.color-grey,   .player-sprite-table.color-grey   { background-color: #626162; }

/* МЕРТВЫЙ ИГРОК */
.player-at-table.dead .player-sprite-table {
    filter: grayscale(50%) brightness(0.5) contrast(1.2);
}

/* Пасхалочный аватар-картинка: убираем обрезку по кругу */
.easter-egg-avatar {
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    /* Рамку и outline снимаем: у .profile-banner-avatar есть border 3px, и без
       маски-колобка + с border-radius:0 он рисовался ЗАМЕТНЫМ КВАДРАТОМ вокруг
       картинки (в профилях людей и ботов). Картиночному аватару рамка не нужна —
       у него своя форма. */
    border: none !important;
    outline: none !important;
}

/* Маска и размер картиночных аватаров правятся ВСЮДУ, КРОМЕ СТОЛА.
   За столом (.player-sprite-table) маски-колобка нет и картинка всегда заливала весь
   бокс 170×170 через cover — там всё отображалось верно, а общая ужимка до 72% делала
   уникальные аватары заметно мельче цветных. Стол не трогаем.
     - маска-колобок обрезала цельные PNG (шар с шапкой, основанием) по силуэту колобка,
       и в комнате/профиле был виден только центр → снимаем;
     - без маски цветной колобок занимает ~66% бокса, а картинка залила бы 100% →
       ужимаем картинку до близкой доли. Крутить размер ЗДЕСЬ. */
.easter-egg-avatar:not(.player-sprite-table) {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    /* 66%, а не 72%: измерено по картинкам. Непрозрачная часть kolobok.png (маска
       цветного колобка) занимает 65% ширины бокса, а уникальные спрайты залиты почти
       под края своего холста (~98.5%), поэтому 65 / 0.985 ≈ 66. На 72% уникальные
       колобки были заметно крупнее обычных — это и правил. */
    background-size: 66% !important;
    background-position: center !important;
}

/* Мини-аватар (список «кто как проголосовал», история голосований) — исключение:
   маски-колобка у него нет вовсе, это просто кружок 16px, и ЦВЕТНОЙ аватар занимает
   все 100% бокса. С общей ужимкой до 66% картиночные колобки выходили заметно мельче
   соседей-обычных, поэтому здесь картинка растягивается на весь бокс. */
.mini-avatar.easter-egg-avatar:not(.player-sprite-table) {
    background-size: contain !important;
}

/* Для пасхалочных аватаров: убираем outline (прямоугольный), оставляем только drop-shadow по контуру изображения */
.player-at-table.mafia-target:hover .player-sprite-table.easter-egg-avatar {
    outline: none;
    filter: drop-shadow(0 0 8px red) drop-shadow(0 0 15px rgba(255, 0, 0, 0.6));
}
.player-at-table.voting-target:hover .player-sprite-table.easter-egg-avatar {
    outline: none;
    filter: drop-shadow(0 0 8px #ff9800) drop-shadow(0 0 15px rgba(255, 152, 0, 0.6));
}
.player-at-table.nomination-target:hover .player-sprite-table.easter-egg-avatar {
    outline: none;
    filter: drop-shadow(0 0 8px #2196f3) drop-shadow(0 0 15px rgba(33, 150, 243, 0.6));
}

/* ========== СИСТЕМА ТАБЛИЧЕК ========== */

/* Контейнер для всех табличек под игроком */
.player-tags {
    position: absolute;
    top: 40px; /* Под номером и именем — поднято на 10px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 200; /* Выше стола */
    pointer-events: none;
}
/* Контейнер для табличек НАД игроком */
.player-top-tags {
    position: absolute;
    bottom: 190px; /* Над спрайтом и шапкой — не перекрывает колобка */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column; /* Голоса снизу, индикатор "Я" сверху */
    align-items: center;
    gap: 10px;
    z-index: 200; /* Выше стола */
    pointer-events: none;
}
/* Базовый стиль для всех табличек */
.player-tag {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(-10px);
    animation: tagAppear 0.3s ease forwards;
}

.player-tag::before {
    font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji", sans-serif;
    font-size: 1.1em;
    display: inline-block;
    vertical-align: middle;
}

.player-tag.my-role::before,
.player-tag.mafia-teammate::before,
.player-tag.mafia-ally::before,
.player-tag.killed::before,
.player-tag.executed::before,
.player-tag.dead-status::before,
.player-tag.final-role::before {
    content: none;
}

@keyframes tagAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Строка 1: Моя роль (только для себя) */
.player-tag.my-role {
    background: linear-gradient(135deg, #6a1b9a, #9c27b0);
    color: white;
    border: 2px solid #ce93d8;
}

/* Моя роль: мирный/мафия/союзник мафии */
.player-tag.my-role.role-peaceful {
    background: linear-gradient(135deg, #ef9a9a, #e57373);
    border: 2px solid #ffcdd2;
}
body.night-mode .player-tag.my-role.role-peaceful {
    background: linear-gradient(135deg, #b71c1c, #c62828);
    border-color: #ef5350;
}

.player-tag.my-role.role-mafia {
    background: linear-gradient(135deg, #ce93d8, #ba68c8);
    border: 2px solid #e1bee7;
}
body.night-mode .player-tag.my-role.role-mafia {
    background: linear-gradient(135deg, #4a148c, #6a1b9a);
    border-color: #ab47bc;
}

.player-tag.my-role.role-mafia-ally {
    background: linear-gradient(135deg, #9e9e9e, #8d8d8d);
    border: 2px solid #d0d0d0;
}
body.night-mode .player-tag.my-role.role-mafia-ally {
    background: linear-gradient(135deg, #4a148c, #7b1fa2);
    border-color: #ba68c8;
}

.player-tag.my-role::before {
    content: none;
}

.player-tag.mafia-teammate {
    background: linear-gradient(135deg, #000000, #333333);
    color: white;
    border: 2px solid #555555;
}

body.day-mode .player-tag.mafia-teammate {
    background: linear-gradient(135deg, #9e9e9e, #8d8d8d);
    border-color: #d0d0d0;
}

.player-tag.mafia-teammate::before {
    content: none;
}

.player-tag.mafia-ally {
    background: linear-gradient(135deg, #4a148c, #7b1fa2);
    color: white;
    border: 2px solid #ba68c8;
}

.player-tag.mafia-ally::before {
    content: none;
}

.player-tag.mafia-suggestion {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    font-size: 10px;
    border: 1px solid #e65100;
    animation: pulse 1s infinite alternate;
}

.player-tag.mafia-suggestion::before {
    content: "🎯";
}

@keyframes pulse {
    from { opacity: 0.7; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1.05); }
}

@keyframes botThinkPulse {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(0.8); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

/* Строка 2: Информация от шерифа */
.player-tag.sheriff-check {
    background: linear-gradient(135deg, #b71c1c, #d32f2f);
    color: white;
    border: 2px solid #ff5252;
}

.player-tag.sheriff-check::before {
    content: "🔍";
}

/* Проверка шерифа: "ЭТО МАФИЯ" (Черный с красной рамкой для акцента) */
.player-tag.sheriff-check.is-mafia {
    background: linear-gradient(135deg, #000000, #1a1a1a);
    border: 2px solid #ff0000; /* Яркая красная рамка - "ОПАСНОСТЬ" */
}

.player-tag.sheriff-check.is-mafia::before {
    content: "💀";
}

/* Информация от дона: ищет шерифа */
.player-tag.don-check {
    background: linear-gradient(135deg, #4a148c, #6a1b9a);
    color: white;
    border: 2px solid #ba68c8;
}

.player-tag.don-check::before {
    content: "🎩";
}

/* Проверка дона: "ЭТО ШЕРИФ" (синий акцент — цель найдена) */
.player-tag.don-check.is-sheriff {
    background: linear-gradient(135deg, #0d47a1, #1565c0);
    border: 2px solid #42a5f5;
}

.player-tag.don-check.is-sheriff::before {
    content: "⭐";
}

/* Строка 3: Убит (v1.8, п.21 — без указания, кто именно убил: мафия, бог, маньяк).
   Класс раньше назывался killed-by-mafia. */
.player-tag.killed {
    background: linear-gradient(135deg, #b71c1c, #c62828);
    color: white;
    border: 2px solid #ef5350;
}

body.day-mode .player-tag.killed {
    background: linear-gradient(135deg, #ef9a9a, #e57373);
    border-color: #ffcdd2;
}

.player-tag.killed::before {
    content: none;
}

/* Строка 3: Казнён голосованием */
.player-tag.executed {
    background: linear-gradient(135deg, #37474f, #455a64);
    color: white;
    border: 2px solid #90a4ae;
}

body.day-mode .player-tag.executed {
    background: linear-gradient(135deg, #90a4ae, #78909c);
    border-color: #cfd8dc;
}

.player-tag.executed::before {
    content: none;
}

/* Статус мертвеца (общий) */
.player-tag.dead-status::before {
    content: none;
}

.player-tag.final-role::before {
    content: none;
}

/* Значок мирного жителя (Домик или щит) */
.role-description.town::before,
.role-description.civilian::before {
    content: "🏠";
    margin-right: 5px;
}

/* Базовая табличка для мёртвого (когда неизвестно как умер) */
.player-tag.dead-status {
    background: linear-gradient(135deg, #424242, #616161);
    color: #bdbdbd;
    border: 2px solid #757575;
}

/* Табличка с голосами (днём) */
.player-tag.votes {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 98px;
    max-width: 170px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    color: #3d2415;
    background: rgba(255, 248, 235, 0.96);
    border: 1px solid rgba(155, 105, 63, 0.35);
    border-radius: 12px;
    box-shadow:
        0 6px 14px rgba(87, 53, 24, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    overflow: hidden;
}

.player-tag.votes::after {
    content: none;
}

.player-tag.votes .vote-count {
    width: 100%;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: #8f5e37;
}

.player-tag.votes .vote-names {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: #4e2f1d;
    white-space: normal;
}

body.day-mode .player-tag.votes {
    color: #3d2415;
    border-color: rgba(155, 105, 63, 0.35);
}

body.day-mode .player-tag.votes .vote-names {
    color: #4e2f1d;
}

/* Строка финала: Роль (при окончании игры) */
.player-tag.final-role {
    background: linear-gradient(135deg, #1976d2, #2196f3);
    color: white;
    border: 2px solid #64b5f6;
}

.player-tag.final-role.role-peaceful {
    background: linear-gradient(135deg, #ef9a9a, #e57373);
    border: 2px solid #ffcdd2;
}
body.night-mode .player-tag.final-role.role-peaceful {
    background: linear-gradient(135deg, #b71c1c, #c62828);
    border-color: #ef5350;
}

.player-tag.final-role.role-mafia {
    background: linear-gradient(135deg, #ce93d8, #ba68c8);
    border: 2px solid #e1bee7;
}
body.night-mode .player-tag.final-role.role-mafia {
    background: linear-gradient(135deg, #4a148c, #6a1b9a);
    border-color: #ab47bc;
}

.player-tag.final-role.role-mafia-ally {
    background: linear-gradient(135deg, #9e9e9e, #8d8d8d);
    border: 2px solid #d0d0d0;
}
body.night-mode .player-tag.final-role.role-mafia-ally {
    background: linear-gradient(135deg, #4a148c, #7b1fa2);
    border-color: #ba68c8;
}

/* ОБЩИЕ СТИЛИ */
* {
    box-sizing: border-box;
}

input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

.hidden {
    display: none !important;
}

.modal-open #setup-ui > *:not(#game-ui) {
    filter: blur(2px);
    pointer-events: none;
}

/* ИНДИКАТОР ИГРОКА (Я) */
.me-indicator {
    color: #ffeb3b; /* Ярко-желтый */
    font-size: 40px;
    font-weight: bold;
    text-shadow: 0 0 10px #ff9800, 0 4px 4px rgba(0,0,0,0.5);
    z-index: 70; 
    pointer-events: none;
    animation: bounce 1.5s infinite ease-in-out;
    order: -1; /* Быть выше других элементов в контейнере (голосов) */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.me-indicator::after {
    content: 'ВЫ';
    display: block;
    font-size: 14px;
    text-align: center;
    color: white;
    margin-top: 0px;
    text-shadow: 0 2px 4px black;
}

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

/* Индикатор бота на игровом столе */
.bot-badge-table {
    position: absolute;
    top: -140px;
    right: -10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 70;
    pointer-events: none;
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}

.lobby-player-summary {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 6px 0 0;
    color: #6f5848;
    border-bottom: none;
}

.lobby-player-summary__label {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #6f5848;
}

.lobby-player-summary__count {
    min-width: 54px;
    padding: 6px 12px;
    text-align: center;
    color: #fff7ef;
    font-size: 16px;
    font-weight: 700;
    background: #8a5836;
    border-radius: 999px;
    box-shadow: none;
}

.lobby-bot-badge {
    position: absolute;
    top: -12px;
    right: -8px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
    z-index: 10;
}

/* Подсветка для мафии ночью - только спрайт */
.player-at-table.mafia-target:hover .player-sprite-table {
    outline: 3px solid #ff4d4d;
    filter: drop-shadow(0 0 10px red);
    transition: all 0.2s ease;
}

/* Выбор цели ночной проверки (шериф/дон) — клик по колобку. Синяя подсветка,
   чтобы не путать с красным прицелом убийства: у дона это два разных действия. */
.player-at-table.investigate-target:hover .player-sprite-table {
    outline: 3px solid #64b5f6;
    filter: drop-shadow(0 0 10px #2196f3);
    transition: all 0.2s ease;
}

.player-at-table.investigate-target:hover .player-sprite-table.easter-egg-avatar {
    outline: none;
    filter: drop-shadow(0 0 8px #64b5f6) drop-shadow(0 0 15px rgba(33, 150, 243, 0.6));
}

/* Если цель уже выбрана */
.player-at-table.mafia-target.selected .player-sprite-table {
    border: 4px solid red;
    animation: blink 1s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Анимация появления баннера победы */
@keyframes bannerAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Анимация текста перехода фазы */
@keyframes fadeInText {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Пульсирующая анимация для важных элементов */
@keyframes gentlePulse {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(255, 152, 0, 0.3);
    }
    50% { 
        box-shadow: 0 0 15px rgba(255, 152, 0, 0.6);
    }
}

/* Анимация появления спрайта */
@keyframes spriteAppear {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes spriteAppearFlipped {
    0% {
        opacity: 0;
        transform: translateX(-50%) scaleX(-1) scaleY(0.5);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scaleX(-1) scaleY(1);
    }
}

/* Применяем анимацию к спрайтам */
.player-sprite-table {
    animation: spriteAppear 0.5s ease-out;
}

.player-at-table.flipped .player-sprite-table {
    animation: spriteAppearFlipped 0.5s ease-out;
}

/* Улучшенный hover эффект для игроков за столом */
.player-at-table:not(.dead) .player-sprite-table {
    transition: transform 0.3s ease, filter 0.3s ease;
}
.player-at-table:not(.dead) .avatar-hat {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.player-at-table:not(.dead):not(.flipped):hover .player-sprite-table {
    transform: translateX(-50%) scale(1.05);
}
.player-at-table:not(.dead):not(.flipped):hover .avatar-hat {
    transform: translateX(-50%) scale(1.05);
}

.player-at-table.flipped:not(.dead):hover .player-sprite-table {
    transform: translateX(-50%) scaleX(-1.05) scaleY(1.05);
}
.player-at-table.flipped:not(.dead):hover .avatar-hat {
    transform: translateX(-50%) scaleX(-1.05) scaleY(1.05);
}

/* Подсветка для днёвного режима голосования */
.player-at-table.voting-target:hover .player-sprite-table {
    outline: 3px solid #ff9800;
    filter: drop-shadow(0 0 10px #ff9800);
    transition: all 0.2s ease;
}

.player-at-table.voting-target {
    cursor: pointer;
}

/* Подсветка для номинации */
.player-at-table.nomination-target:hover .player-sprite-table {
    outline: 3px solid #2196f3;
    filter: drop-shadow(0 0 10px #2196f3);
    transition: all 0.2s ease;
}

/* Если цель уже выбрана */
.player-at-table.day-target.selected .player-sprite-table {
    border: 4px solid red;
    animation: blink 1s infinite;
}

/* ==================== РАСШИРЕННЫЕ НАСТРОЙКИ КОМНАТЫ ==================== */

/* Широкое модальное окно */
.modal-wide {
    max-width: 700px;
    width: 95vw; /* Viewport units — не зависит от родителя */
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0; /* Переопределяем padding от .modal-content — дети сами добавят */
}

/* Заголовок внутри modal-wide */
.modal-wide .modal-header {
    padding: 24px 24px 0;
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* Скроллируемая часть настроек внутри modal-wide */
.modal-wide .modal-settings {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 0 24px;
}

/* Footer внутри modal-wide всегда видимый */
.modal-wide .modal-footer {
    flex-shrink: 0;
    background: white;
    margin-top: 0;
    border-top: 1px solid #eee;
    padding: 16px 24px;
    border-radius: 0 0 18px 18px;
}

/* Секции настроек */
.settings-section {
    margin-bottom: 20px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
}

.settings-section-title {
    font-size: 16px;
    font-weight: bold;
    color: #3a2b20;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Кнопка показать/скрыть */
.btn-toggle {
    padding: 4px 12px;
    font-size: 12px;
    background: #8a5836;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-toggle:hover {
    background: #6b4227;
}

/* Настройки игры */
.advanced-settings {
    margin-top: 16px;
}

/* Группы настроек */
.settings-group {
    margin-bottom: 20px;
    padding: 14px;
    background: white;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.settings-group-title {
    font-size: 14px;
    font-weight: bold;
    color: #555;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* Селекты */
.form-field select {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
    background: white;
    cursor: pointer;
}

.form-field select:focus {
    border-color: #8a5836;
    outline: none;
}

/* Чекбоксы ролей */
.roles-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.role-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.role-checkbox input {
    width: auto;
    margin: 0;
}

.role-checkbox input:disabled + .role-badge {
    opacity: 0.7;
}

.role-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

/* Мафиозные роли: светло-чёрные (серые), выбранные — чёрные */
.role-badge.mafia {
    background: #d9d9d9;
    color: #333;
    border: 1px solid #a6a6a6;
}

/* Мирные роли: светло-красные, выбранные — красные */
.role-badge.town,
.role-badge.civilian {
    background: #ffd6d6;
    color: #b00000;
    border: 1px solid #f0a0a0;
}

/* Иные роли: светло-оранжевые, выбранные — оранжевые */
.role-badge.neutral {
    background: #ffe6bf;
    color: #a15c00;
    border: 1px solid #f0c080;
}

.role-checkbox input:checked + .role-badge.mafia {
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
}

.role-checkbox input:checked + .role-badge.town,
.role-checkbox input:checked + .role-badge.civilian {
    background: #e02020;
    color: white;
    border-color: #e02020;
}

.role-checkbox input:checked + .role-badge.neutral {
    background: #f08c00;
    color: white;
    border-color: #f08c00;
}

/* Адаптивность для настроек */
@media (max-width: 600px) {
    .modal-wide {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .settings-group {
        padding: 10px;
    }
    
    .roles-checkboxes {
        gap: 6px;
    }
    
    .role-badge {
        font-size: 12px;
        padding: 3px 8px;
    }
}

/* ==================== РЕЖИМ ВЫСТУПЛЕНИЙ ПО ОЧЕРЕДИ ==================== */

/* Индикатор текущего спикера */
.speaker-indicator {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 36px;
    animation: speakerPulse 1s infinite ease-in-out;
    z-index: 80;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}


@keyframes speakerPulse {
    0%, 100% { 
        transform: translateX(-50%) scale(1); 
        opacity: 1;
    }
    50% { 
        transform: translateX(-50%) scale(1.2); 
        opacity: 0.8;
    }
}

/* Подсветка текущего спикера */
.player-at-table.current-speaker .player-sprite {
    filter: drop-shadow(0 0 20px #4CAF50) drop-shadow(0 0 40px #4CAF50);
}

.player-at-table.current-speaker .player-name {
    color: #4CAF50;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

/* Статус спикера в чате */
#speaker-status {
    padding: 10px 15px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 8px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    border: 1px solid #a5d6a7;
}

#speaker-status .speaker-label {
    color: #2e7d32;
}

#speaker-status .queue-info {
    color: #666;
    font-size: 12px;
    margin-left: auto;
}

#speaker-status .speaker-timer-text {
    color: #d32f2f;
    font-weight: bold;
    font-family: monospace;
    font-size: 15px;
    margin-left: 8px;
}

/* Кнопка передачи слова. #finish-check-turn-btn — «Закончить ход» шерифа/дона:
   живёт в той же панели чата, поэтому выглядит так же (раньше ход проверяющего
   вообще нечем было закрыть). */
#pass-word-btn,
#finish-check-turn-btn {
    padding: 10px 16px;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s;
    margin-left: 10px;
    white-space: nowrap;
}

#pass-word-btn:hover:not(:disabled),
#finish-check-turn-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #45a049 0%, #388e3c 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(76, 175, 80, 0.3);
}

#pass-word-btn:disabled,
#finish-check-turn-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Адаптация чат-инпут для кнопки */
.chat-input-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;    /* при увеличенном поле ввода кнопки прижаты к его низу */
}

@media (max-width: 500px) {
    #pass-word-btn,
    #finish-check-turn-btn {
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
    }
}

/* ==================== СИСТЕМА НОМИНАЦИИ ==================== */

/* Табличка "Выставлен" */
.player-tag.nominated {
    background: linear-gradient(135deg, #ff5722, #e64a19);
    color: white;
    border: 2px solid #ff8a65;
    font-size: 12px;
    animation: nominatedPulse 1.5s infinite;
}

@keyframes nominatedPulse {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(255, 87, 34, 0.5);
    }
    50% { 
        box-shadow: 0 0 15px rgba(255, 87, 34, 0.8);
    }
}

/* Цель номинации */
.player-at-table.nomination-target:hover .player-sprite-table {
    outline: 3px solid #ff9800;
    filter: drop-shadow(0 0 10px #ff9800);
    transition: all 0.2s ease;
}

/* Подсветка номинированного при голосовании */
.player-at-table.voting-target.nominated-candidate {
    cursor: pointer;
}

.player-at-table.voting-target.nominated-candidate .player-sprite-table {
    outline: 3px solid #f44336;
    filter: drop-shadow(0 0 10px #f44336);
}

/* Кнопка "Закончить речь" */
#finish-defense-btn {
    position: fixed;
    right: 30px;
    bottom: calc(50% - 60px);
    padding: 15px 30px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
    z-index: 1100;
    transition: all 0.2s ease;
    display: none;
}

#finish-defense-btn:hover {
    background: linear-gradient(135deg, #45a049, #388e3c);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
}

#finish-defense-btn.visible {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Кнопка "Воздержаться от выставления" */
#skip-nomination-btn {
    position: fixed;
    right: 30px;
    bottom: 50%;
    padding: 15px 30px;
    background: #ff9800;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
    z-index: 1100;
    transition: all 0.2s ease;
    display: none;
}

#skip-nomination-btn:hover {
    background: #f57c00;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.5);
}

#skip-nomination-btn.visible {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Стиль для сообщений защиты в чате */
.chat-message.defense {
    background: rgba(255, 152, 0, 0.1);
    border-left: 3px solid #ff9800;
    padding-left: 8px;
    margin-left: -8px;
}

.chat-message.defense .sender {
    color: #ff9800;
}

/* Стиль для приватных размышлений ботов о голосовании (видит только бог) */
.chat-type-vote-reasoning {
    background: rgba(124, 77, 255, 0.1);
    border-left: 3px solid #7c4dff;
    padding-left: 8px;
    margin-left: -8px;
    font-style: italic;
}

.chat-type-vote-reasoning .sender {
    color: #b388ff;
}

/* Стиль для мыслей ботов в реальном времени (видит только бог) */
.chat-type-bot-thinking {
    background: rgba(0, 200, 83, 0.1);
    border-left: 3px solid #00c853;
    padding-left: 8px;
    margin-left: -8px;
    font-style: italic;
    font-size: 0.9em;
}

.chat-type-bot-thinking .sender {
    color: #69f0ae;
}

/* Стиль для ночного чата мафии */
.chat-type-mafia {
    background: rgba(244, 67, 54, 0.1);
    border-left: 3px solid #f44336;
    padding-left: 8px;
    margin-left: -8px;
}

.chat-type-mafia .sender {
    color: #ef5350;
}

/* Стиль ночного content мафии для бога */
.chat-type-mafia-night {
    background: rgba(183, 28, 28, 0.15);
    border-left: 3px solid #b71c1c;
    padding-left: 8px;
    margin-left: -8px;
    font-style: italic;
}

.chat-type-mafia-night .sender {
    color: #ef5350;
}

/* Сообщение зрителя — видно только призракам и богу (отдельный «загробный» канал) */
.chat-type-spectator {
    background: rgba(96, 125, 139, 0.12);
    border-left: 3px solid #607d8b;
    padding-left: 8px;
    margin-left: -8px;
    font-style: italic;
}
.chat-type-spectator .sender {
    color: #607d8b;
}

/* Сообщение бога, адресованное только зрителям — не видят живые игроки */
.chat-type-god-spectator {
    background: rgba(156, 39, 176, 0.12);
    border-left: 3px solid #9c27b0;
    padding-left: 8px;
    margin-left: -8px;
    font-style: italic;
}
.chat-type-god-spectator .sender {
    color: #ba68c8;
}

/* ===== Модальное окно помощи ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

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

.help-content {
    color: #333;
}

.help-section {
    margin-bottom: 24px;
}

.help-section h3 {
    color: #2196F3;
    border-bottom: 2px solid #2196F3;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.help-section ul {
    padding-left: 20px;
}

.help-section li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.role-description {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 12px;
    border-left: 4px solid #888;
}

.role-description h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.role-description p {
    margin: 4px 0;
    font-size: 14px;
}

.role-description.civilian {
    border-left-color: #f44336; /* Красный мирный */
    background: rgba(244, 67, 54, 0.1);
}

.role-description.mafia {
    border-left-color: #000000; /* Черная мафия */
    background: rgba(0, 0, 0, 0.05);
}

.role-description.town {
    border-left-color: #2196F3;
    background: rgba(33, 150, 243, 0.1);
}

/* Кнопка помощи и настроек в игре */
#help-btn:hover,
#game-settings-btn:hover {
    background: rgba(0,0,0,0.9) !important;
    transform: scale(1.1);
}

/* ========== ИНДИКАТОР СОЕДИНЕНИЯ ========== */
#connection-indicator {
    animation: fadeIn 0.3s ease;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========== УЛУЧШЕНИЯ ДОСТУПНОСТИ ========== */

/* Фокус для интерактивных элементов */
button:focus,
input:focus,
select:focus {
    outline: 2px solid #8a5836;
    outline-offset: 2px;
}

/* Улучшенный контраст для ночного режима */
body.night-mode input,
body.night-mode select {
    background: rgba(60, 40, 30, 0.8);
    border-color: #8b5a3c;
    color: #e8d5c4;
}

body.night-mode input::placeholder {
    color: #a08070;
}

/* Анимация загрузки */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ========== УЛУЧШЕННЫЕ ХОВЕР ЭФФЕКТЫ ========== */

/* Комната в списке */
.room-item {
    transition: all 0.2s ease !important;
}

.room-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Игрок в лобби */
.player-wrapper {
    transition: transform 0.2s ease;
}

.player-wrapper:hover {
    transform: scale(1.05);
}

/* ========== МОБИЛЬНАЯ АДАПТАЦИЯ ========== */
@media (max-width: 768px) {
    #chat-panel {
        width: 280px;
        height: 300px;
    }
    
    #voting-history {
        left: 20px;
        max-width: calc(100vw - 40px);
    }
    
    .abstain-btn {
        right: 10px;
        padding: 12px 20px;
        font-size: 16px;
    }
    
    #phase-display {
        padding: 8px 20px;
    }
    
    #phase-title {
        font-size: 18px;
    }
    
    #notification-container {
        right: 10px;
        left: 10px;
    }
    
    .notification {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    #chat-panel {
        width: calc(100vw - 40px);
        left: 10px;
    }
    /* Стол и спрайты теперь масштабируются через transform:scale на wrapper
       (см. fitGameTable() в script.js) — отдельные размеры тут не нужны */
}

/* ========== СИСТЕМА СЕТТИНГОВ (ТЕМ ОФОРМЛЕНИЯ) ========== */

/* Сетка выбора сеттинга в модалке создания комнаты */
.setting-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.setting-selector-grid::-webkit-scrollbar {
    width: 6px;
}

.setting-selector-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.setting-selector-grid::-webkit-scrollbar-thumb {
    background: rgba(138, 88, 54, 0.4);
    border-radius: 3px;
}

/* Карточка сеттинга */
.setting-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 80px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.setting-card:hover {
    border-color: #c89b6e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(138, 88, 54, 0.2);
}

.setting-card.selected {
    border-color: #8a5836;
    background: linear-gradient(135deg, #fdf3e7 0%, #f5e6d3 100%);
    box-shadow: 0 2px 8px rgba(138, 88, 54, 0.3);
}

.setting-card.selected::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 12px;
    color: #8a5836;
    font-weight: bold;
}

.setting-card-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 6px;
}

.setting-card-icon img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
}

.setting-card-emoji,
.setting-card-emoji-fallback {
    font-size: 32px;
    line-height: 1;
}

.setting-card-name {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}

.setting-card.selected .setting-card-name {
    color: #8a5836;
}

/* Задний слой шапки (за колобком) */
.avatar-hat-back {
    position: absolute;
    width: 230px;
    height: 230px;
    top: -165px;
    left: 5px;
    transform: translateX(-50%) rotate(var(--hat-rotate, 0deg));
    margin-left: var(--hat-offset-x, 0px);
    z-index: var(--seat-hat-back-z, 33); /* Ниже колобка (--seat-sprite-z ~34) */
    pointer-events: none;
    object-fit: contain;
    image-rendering: auto;
    animation: hatBackAppear 0.4s ease-out;
}

/* Зеркалирование заднего слоя для flipped игроков */
.player-at-table.flipped .avatar-hat-back {
    transform: translateX(-50%) scaleX(-1) rotate(var(--hat-rotate, 0deg));
    left: -5px;
    margin-left: calc(-1 * var(--hat-offset-x, 0px));
    animation: hatBackAppearFlipped 0.4s ease-out;
}

.player-at-table:not(.flipped) .avatar-hat-back {
    transform: translateX(-50%) rotate(var(--hat-rotate, 0deg));
}

/* Серый фильтр для заднего слоя шапки мертвых игроков */
.player-at-table.dead .avatar-hat-back {
    filter: grayscale(50%) brightness(0.5) contrast(1.2);
}

@keyframes hatBackAppear {
    from { opacity: 0; transform: translateX(-50%) translateY(-15px) rotate(-10deg); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) rotate(0deg); }
}

@keyframes hatBackAppearFlipped {
    from { opacity: 0; transform: translateX(-50%) scaleX(-1) translateY(-15px) rotate(10deg); }
    to   { opacity: 1; transform: translateX(-50%) scaleX(-1) translateY(0) rotate(0deg); }
}

/* Шляпы на аватарах */
.avatar-hat {
    position: absolute;
    width: 230px;  /* Размер шапки: ширина */
    height: 230px; /* Размер шапки: высота */
    top: -165px;   /* На голове колобка (спрайт top=-135px, высота 170px, центр=-50px) */
    left: 5px;
    transform: translateX(-50%) rotate(var(--hat-rotate, 0deg));
    margin-left: var(--hat-offset-x, 0px);
    z-index: var(--seat-hat-z, 39); /* Слой шапки задаётся отдельно и симметрично от краёв к центру */
    pointer-events: none;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: hatAppear 0.4s ease-out;
}

/* Зеркалирование шапки для flipped игроков */
.player-at-table.flipped .avatar-hat {
    transform: translateX(-50%) scaleX(-1) rotate(var(--hat-rotate, 0deg));
    animation: hatAppearFlipped 0.4s ease-out;
    left: -5px;
    margin-left: calc(-1 * var(--hat-offset-x, 0px));
}

/* Не-flipped игроки: шапку не зеркалим (совпадает с направлением лица) */
.player-at-table:not(.flipped) .avatar-hat {
    transform: translateX(-50%) rotate(var(--hat-rotate, 0deg));
}

/* Серый фильтр для шапки мертвых игроков */
.player-at-table.dead .avatar-hat {
    filter: grayscale(50%) brightness(0.5) contrast(1.2) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.avatar-hat-dead {
    opacity: 0.5;
    filter: grayscale(0.8) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@keyframes hatAppear {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-15px) rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) rotate(0deg);
    }
}

@keyframes hatAppearFlipped {
    from {
        opacity: 0;
        transform: translateX(-50%) scaleX(-1) translateY(-15px) rotate(10deg);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scaleX(-1) translateY(0) rotate(0deg);
    }
}

/* Декор на столе */
.table-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 5;
    opacity: 0.9;
}

/* Индикатор сеттинга в списке комнат */
.room-setting-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(138, 88, 54, 0.1);
    font-size: 12px;
    color: #8a5836;
    font-weight: 500;
}

.room-setting-badge .setting-emoji {
    font-size: 14px;
}

/* «С богом / без бога» в списке комнат: жёлтый — ведущий-человек, серый — без него */
.room-god-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    margin-left: 4px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.room-god-badge.with-god { background: #f7edd0; color: #7a5a10; }
.room-god-badge.no-god { background: #e8e8e8; color: #5a5a5a; }

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .setting-selector-grid {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
        gap: 6px;
        max-height: 200px;
    }
    
    .setting-card {
        padding: 8px 4px;
        min-height: 65px;
    }
    
    .setting-card-icon {
        font-size: 26px;
    }
    
    .setting-card-name {
        font-size: 10px;
    }
    /* ВНИМАНИЕ: не задавать здесь размер .avatar-hat!
       Шапка масштабируется вместе со столом (.game-table-wrapper имеет
       transform: scale). Отдельный мобильный размер рассинхронизировал её
       с головой — шапки «съезжали». Геометрия шапки одна для всех экранов. */
}

@media (max-width: 480px) {
    .setting-selector-grid {
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
        max-height: 180px;
    }
}

/* ============================================
   СИСТЕМА ПРОФИЛЯ И СТАТИСТИКИ
   ============================================ */

/* Плавающие декоративные элементы */
.floating-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.float-icon {
    position: absolute;
    left: var(--x);
    top: var(--y);
    font-size: 24px;
    opacity: 0.15;
    animation: floatIcon 4s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.15; }
    50% { transform: translateY(-12px) rotate(10deg); opacity: 0.3; }
}

/* name-panel — позиционирование для декораций */
#name-panel {
    position: relative;
    overflow: hidden;
}

#name-panel > *:not(.floating-decorations) {
    position: relative;
    z-index: 1;
}

/* Карточка статистики в меню входа */
.profile-stats-card {
    width: 100%;
    background: linear-gradient(135deg, #fef9f4 0%, #f5e6d3 100%);
    border-radius: 14px;
    padding: 16px;
    border: 2px solid #e0c9b3;
    box-shadow: 0 2px 12px rgba(138, 88, 54, 0.12);
    animation: fadeSlideUp 0.4s ease-out;
}

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

.profile-stats-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0c9b3;
}

.profile-rank-icon {
    font-size: 32px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.profile-rank-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-rank-title {
    font-size: 15px;
    font-weight: 700;
    color: #5c3d2e;
}

.profile-xp-bar {
    width: 100%;
    height: 8px;
    background: #e0d4c8;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.profile-xp-bar.large {
    height: 12px;
    border-radius: 6px;
}

.profile-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #f97316);
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.profile-xp-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent);
    border-radius: 4px 4px 0 0;
}

.profile-xp-text {
    font-size: 11px;
    color: #8a7565;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 4px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.profile-stat:hover {
    transform: scale(1.05);
}

.profile-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #3a2b20;
    line-height: 1;
}

.profile-stat-wins {
    color: #16a34a;
}

.profile-stat-label {
    font-size: 11px;
    color: #8a7565;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   ROOMS HEADER С МИНИ-ПРОФИЛЕМ
   ============================================ */

.rooms-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.rooms-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mini-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 40px;
    border: 2px solid #e0c9b3;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    cursor: default;
    transition: box-shadow 0.2s ease;
}

.mini-profile:hover {
    box-shadow: 0 4px 16px rgba(138, 88, 54, 0.2);
}

.mini-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #FF8C00;
    -webkit-mask-image: url('kolobok.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('kolobok.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    flex-shrink: 0;
}

.mini-profile-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mini-profile-name {
    font-size: 14px;
    font-weight: 700;
    color: #3a2b20;
    line-height: 1;
}

.mini-profile-rank {
    font-size: 11px;
    color: #8a7565;
    line-height: 1;
}

.profile-details-btn {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #f5e6d3 !important;
    color: #5c3d2e !important;
    border: 1px solid #d4b896 !important;
    transition: all 0.2s ease !important;
}

.profile-details-btn:hover {
    background: #e6d0b8 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* ============================================
   МОДАЛКА ПОДРОБНОГО ПРОФИЛЯ
   ============================================ */

.profile-modal-content {
    max-width: 440px !important;
    width: 90vw;
}

.profile-modal-body {
    padding: 24px;
}

.profile-modal-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0e0d0;
}

.profile-modal-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #FF8C00;
    -webkit-mask-image: url('kolobok.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('kolobok.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.profile-modal-rank-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-modal-name {
    font-size: 20px;
    font-weight: 800;
    color: #3a2b20;
}

.profile-modal-rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #fef9f4, #f5e6d3);
    border-radius: 20px;
    border: 1px solid #e0c9b3;
    font-size: 13px;
    font-weight: 600;
    color: #5c3d2e;
    width: fit-content;
}

.profile-modal-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-modal-stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.profile-modal-stat-row:hover {
    background: rgba(138, 88, 54, 0.06);
}

.profile-modal-stat-row:nth-child(odd) {
    background: rgba(138, 88, 54, 0.03);
}

.profile-modal-stat-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
}

.profile-modal-stat-label {
    flex: 1;
    font-size: 14px;
    color: #5c3d2e;
}

.profile-modal-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #3a2b20;
}

.btn-danger {
    background-color: #dc3545 !important;
    color: white !important;
}

.btn-danger:hover {
    background-color: #c82333 !important;
}

.btn-primary {
    background-color: #8a5836 !important;
    color: white !important;
}

/* ============================================
   PROFILE — НОВЫЙ ДИЗАЙН (БАННЕР + ДРУЗЬЯ + СТАТУС)
   ============================================ */

.profile-modal-content {
    max-width: 480px !important;
    width: 92vw;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
}
.profile-modal-body {
    padding: 0 !important;
    max-height: calc(85vh - 70px);
    max-height: calc(85dvh - 70px);
    overflow-y: auto;
}

/* Footer профиль-модалки — добавляем горизонтальный padding
   (по умолчанию у .modal-footer есть только padding-top, кнопка хлоплась к краю) */
.profile-modal-content .modal-footer {
    padding: 12px 18px;
    margin-top: 0;
    background: white;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

/* Индикатор "друзья в сети" в счётчике онлайна */
.online-friends-extra {
    color: #1e7a3a;
    font-weight: 600;
    font-size: 13px;
}

/* Бейдж "друг в комнате" в карточке комнаты */
.room-friends-badge {
    margin-top: 4px;
    font-size: 13px;
    color: #166534;
    font-weight: 600;
    background: rgba(74, 222, 128, 0.12);
    padding: 2px 8px;
    border-radius: 8px;
    width: fit-content;
}

/* === БАННЕР === */
.profile-banner {
    position: relative;
    width: 100%;
    min-height: 160px;
    background: linear-gradient(135deg, #4a3322 0%, #2b1d12 100%); /* fallback */
    overflow: hidden;
}
.profile-banner-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: repeat;
    background-size: 40px 40px;
    opacity: 0.25;
}
.profile-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 18px;
}

.profile-banner-avatar-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    /* Зеркалим спрайты в профиле (как flipped-сторона за столом) */
    transform: scaleX(-1);
}
/* Слои поверх аватара: лицо и шляпа из профиля.
   Лицо уменьшено в 2 раза — иначе занимает весь круг и выглядит огромным. */
.profile-banner-face,
.profile-banner-hat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
/* Лицо: уменьшено + сдвинуто к правому (визуально) краю колобка.
   wrap имеет scaleX(-1), поэтому translateX отрицательный → визуально сдвиг вправо. */
.profile-banner-face { z-index: 2; transform: scale(0.5) translateX(-10%); }
/* Задний слой шапки в профиле (под колобком) */
.profile-banner-hat-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 0;
    transform: translateY(-20%);
}
/* Шляпа: уменьшена в 2 раза от прежнего размера + чуть приподнята */
.profile-banner-hat { z-index: 3; transform: translateY(-20%);}
.profile-banner-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    background-color: #FF8C00;
    background-size: cover;
    -webkit-mask-image: url('kolobok.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('kolobok.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    border: 3px solid rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
}
/* Слой узора поверх профильного аватара (профиль игрока/бота, превью MAE).
   Раньше узор задавался в --pattern-url, но правила ::after не было → не отображался. */
.profile-banner-avatar.has-pattern::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-mask-image: url('kolobok.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('kolobok.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    pointer-events: none;
    background-image: var(--pattern-url);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.5;
    mix-blend-mode: overlay;
}

.profile-banner-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.profile-banner-name {
    font-size: 22px;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    word-break: break-word;
    line-height: 1.2;
}
.profile-banner-caption {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    word-break: break-word;
    line-height: 1.35;
    min-height: 1.35em;
}
.profile-banner-caption:empty::before {
    content: 'Без подписи';
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}
.profile-banner-status {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    font-size: 12px;
    color: white;
    align-self: flex-start;
}
.profile-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888; /* default offline */
}
.profile-banner-status.online .profile-status-dot { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.profile-banner-status.offline .profile-status-dot { background: #888; }
.profile-banner-status.invisible .profile-status-dot { background: #c084fc; }

.profile-edit-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    transition: background 0.2s;
}
.profile-edit-btn:hover { background: rgba(255, 255, 255, 0.3); }

/* === ACTIONS === */
.profile-actions {
    display: flex;
    gap: 8px;
    padding: 14px 18px 8px;
}
.profile-action-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #d4a574;
    background: #fef9f4;
    color: #5c3d2e;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.profile-action-btn:hover:not(:disabled) {
    background: #f5e6d3;
    transform: translateY(-1px);
}
.profile-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.profile-friend-btn.is-friend {
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    color: #166534;
}

/* === СЕКЦИИ === */
.profile-section {
    padding: 12px 18px;
    border-top: 1px solid #f0e0d0;
}
.profile-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #5c3d2e;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.profile-section-count {
    font-size: 12px;
    font-weight: 600;
    color: #8a7565;
    background: rgba(138, 88, 54, 0.1);
    padding: 1px 8px;
    border-radius: 10px;
}

/* === СПИСОК ДРУЗЕЙ === */
.profile-friends-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.profile-friends-empty {
    font-size: 13px;
    color: #8a7565;
    font-style: italic;
}
.profile-friend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    background: rgba(138, 88, 54, 0.06);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.profile-friend-item:hover {
    background: rgba(138, 88, 54, 0.15);
    border-color: #d4a574;
}
.profile-friend-item-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #FF8C00;
    -webkit-mask-image: url('kolobok.png');
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url('kolobok.png');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    flex-shrink: 0;
    position: relative;
}
.profile-friend-item-name {
    font-size: 13px;
    color: #3a2b20;
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-friend-item-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888;
    flex-shrink: 0;
}
.profile-friend-item.online .profile-friend-item-status {
    background: #4ade80;
    box-shadow: 0 0 5px #4ade80;
}

/* === СТАТИСТИКА (сетка) === */
.profile-stats-grid-modal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.profile-stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    background: rgba(138, 88, 54, 0.05);
    border-radius: 10px;
    text-align: center;
    gap: 2px;
}
.profile-stat-cell-icon {
    font-size: 18px;
}
.profile-stat-cell-value {
    font-size: 15px;
    font-weight: 700;
    color: #3a2b20;
}
.profile-stat-cell-label {
    font-size: 11px;
    color: #8a7565;
}

/* ============================================
   РЕДАКТОР ПРОФИЛЯ (Phase C)
   ============================================ */
.profile-editor-content {
    max-width: 460px !important;
    width: 92vw;
    max-height: 90vh;
    max-height: 90dvh;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden;
}
.profile-editor-content .modal-header {
    flex-shrink: 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 16px;
    font-weight: 700;
    border-radius: 18px 18px 0 0;
}
.profile-editor-content .modal-footer {
    flex-shrink: 0;
    padding: 12px 18px;
    margin-top: 0;
    background: white;
    border-radius: 0 0 18px 18px;
    border-top: 1px solid #eee;
}
.profile-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 18px;
}

/* Превью баннера в редакторе */
.profile-editor-banner-preview {
    position: relative;
    width: 100%;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #4a3322 0%, #2b1d12 100%);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.profile-editor-banner-overlay {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-size: 40px 40px;
    opacity: 0.25;
    pointer-events: none;
}
.profile-editor-banner-label {
    position: relative;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Секции */
.profile-editor-section {
    margin-bottom: 16px;
}
.profile-editor-section:last-child { margin-bottom: 0; }
.profile-editor-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #3a2b20;
    margin-bottom: 8px;
}

/* Табы баннера */
.profile-editor-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    background: #f5e6d3;
    padding: 3px;
    border-radius: 8px;
}
.profile-editor-tab-btn {
    flex: 1;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #6b5a4a;
    cursor: pointer;
    transition: all 0.15s;
}
.profile-editor-tab-btn.active {
    background: white;
    color: #5c3d2e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.profile-editor-tab-content { display: none; }
.profile-editor-tab-content.active { display: block; }

/* Подпись textarea */
#profile-editor-caption {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1.5px solid #d4a574;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    resize: none;
    background: #fef9f4;
    color: #3a2b20;
}
#profile-editor-caption:focus {
    outline: none;
    border-color: #8a5836;
}
.profile-editor-char-counter {
    text-align: right;
    font-size: 11px;
    color: #8a7565;
    margin-top: 3px;
}

/* Тогл невидимки */
.profile-editor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.profile-editor-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.profile-editor-toggle-label {
    font-size: 14px;
    color: #3a2b20;
    font-weight: 600;
}
.profile-editor-hint {
    font-size: 12px;
    color: #8a7565;
    margin-top: 4px;
    margin-left: 26px;
}

/* ============================================
   ИНВЕНТАРЬ (модалка с лицами/шляпами)
   ============================================ */
.inventory-content {
    max-width: 640px !important;
    width: 92vw;
    max-height: 90vh;
    max-height: 90dvh;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden;
}
.inventory-content .modal-header {
    flex-shrink: 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, #8a5836 0%, #5c3d2e 100%);
    color: white;
    font-size: 16px;
    font-weight: 700;
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inventory-content .modal-footer {
    flex-shrink: 0;
    padding: 12px 18px;
    margin-top: 0;
    background: white;
    border-radius: 0 0 18px 18px;
    border-top: 1px solid #eee;
}

.inventory-tabs {
    display: flex;
    gap: 5px;
}
.inventory-tab-btn {
    flex: 1;
    padding: 7px 12px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.inventory-tab-btn:hover { background: rgba(255, 255, 255, 0.3); }
.inventory-tab-btn.active {
    background: white;
    color: #5c3d2e;
}

.inventory-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
}

/* ===== ВКЛАДКА «МУЗЫКА» ===== */
.inventory-music-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fef9f4;
}
.inventory-music-hint {
    flex-shrink: 0;
    padding: 12px 16px;
    font-size: 12px;
    color: #8a7565;
    border-bottom: 1px solid #f0e0d0;
}
.inventory-music-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 14px;
}
.music-group-title {
    font-size: 12px;
    font-weight: 700;
    color: #8a5836;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 12px 4px 6px;
}
.music-group-title:first-child { margin-top: 4px; }
.music-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    transition: background 0.15s;
}
.music-row:hover { background: #f5e6d3; }
.music-row.playing { background: #efe0cc; }
.music-play-btn {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    min-width: 28px;          /* без этого глобальный стиль кнопки растягивал в овал */
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    border: none;
    background: #8a5836;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
}
.music-play-btn:hover { background: #6d4529; }
.music-play-btn:active { transform: scale(0.92); }
.music-row-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.music-row-name {
    font-size: 14px;
    color: #3a2b20;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-row-author {
    font-size: 11px;
    color: #a89880;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-dl-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #efe6da;
    color: #8a5836;
    font-size: 15px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.music-dl-btn:hover { background: #e0cdb6; }

/* Кнопка добавления трека в личный плейлист (★) */
.music-pl-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #efe6da;
    color: #b0a08c;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.music-pl-btn:hover { background: #e0cdb6; }
.music-pl-btn.in-playlist { color: #e6a817; background: #fbf0d0; }

/* Панель состояния личного плейлиста */
.inventory-music-playlist-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 12px;
    color: #6b5a4a;
    border-bottom: 1px solid #f0e0d0;
    background: #fffaf2;
}
.music-pl-empty { color: #a89880; }
.music-pl-count { flex: 1 1 auto; font-weight: 600; color: #8a5836; }
.music-pl-clear {
    flex-shrink: 0;
    border: 1px solid #d9c4a8;
    background: #fff;
    color: #8a5836;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}
.music-pl-clear:hover { background: #f3e7d6; }

.inventory-grid-wrap {
    overflow-y: auto;
    padding: 14px 16px;
    border-right: 1px solid #f0e0d0;
}
.inventory-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #8a7565;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
}
.inventory-section-title.unique { color: #b87333; }
.inventory-section-title.unavailable { color: #9e9e9e; }
.inventory-section-hint {
    font-size: 11px;
    color: #a89880;
    margin: -4px 0 8px;
}
.inventory-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #d4a574, transparent);
    margin: 14px 0;
}
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}
.inventory-cell {
    aspect-ratio: 1;
    border-radius: 10px;
    background: #f5e6d3;
    border: 2.5px solid transparent;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
    overflow: hidden;
}
.inventory-cell:hover {
    transform: scale(1.05);
    background: #ebd6b9;
}
.inventory-cell.selected {
    border-color: #8a5836;
    background: white;
}
.inventory-cell.active-now {
    border-color: #4ade80;
}
.inventory-cell.active-now::after {
    content: '✓';
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 11px;
    background: #4ade80;
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.inventory-cell.default-cell {
    font-size: 26px;
    color: #8a7565;
}
.inventory-cell img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    /* Flipped (как у игрока на левой стороне стола — сцена баннера/превью) */
    transform: scaleX(-1);
}
.inventory-cell.face-cell img {
    max-width: 50%;
    max-height: 50%;
}

/* Недоступная ячейка: затемнена, с замком. Кликабельна (для примерки). */
.inventory-cell.locked img { filter: grayscale(0.7) brightness(0.92); opacity: 0.75; }
.inventory-cell.locked { background: #ece4da; }
.inventory-cell.locked.selected { background: #fff; }
.inventory-lock-badge {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 11px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
    pointer-events: none;
}

.inventory-details {
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fef9f4;
    min-height: 0;
    overflow-y: hidden;
}
.inventory-details-preview {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 14px;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.inventory-preview-base {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #FF8C00;
    -webkit-mask-image: url('kolobok.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('kolobok.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.inventory-preview-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
/* Превью инвентаря — как в баннере профиля: flipped-сторона (как у игрока,
   сидящего слева за столом), лицо сдвинуто к визуально правому краю колобка,
   шляпа приподнята к макушке. Сам колобок и оверлеи зеркалятся отдельно
   (а не контейнером), чтобы белый фон и тень превью не отражались. */
.inventory-preview-base { transform: scaleX(-1); }
.inventory-preview-overlay.face { z-index: 2; transform: scaleX(-1) scale(0.5) translateX(-10%); }
.inventory-preview-overlay.hat  { z-index: 3; transform: scaleX(-1) translateY(-20%); }
/* Задний слой шапки в превью инвентаря (под колобком) */
.inventory-preview-overlay.hat-back { z-index: 0; transform: scaleX(-1) translateY(-20%); }

/* Оверлейные слои для уникальных аватаров (поверх колобка, под шапкой) */
.avatar-overlay {
    position: absolute;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* За столом — оверлейные части поверх колобка */
.player-at-table > .avatar-overlay {
    top: -135px;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    height: 170px;
    z-index: var(--seat-overlay-z, 32); /* Выше колобка (~34), ниже шапки (~35) */
}

.player-at-table.flipped > .avatar-overlay {
    transform: translateX(-50%) scaleX(-1);
}

/* В профиле/баннере */
.profile-banner-avatar-wrap .avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1; /* Выше колобка, ниже лица (z:2) и шапки (z:3) */
}

/* В превью инвентаря */
.inventory-details-preview .avatar-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1; /* Выше колобка, ниже лица/шапки */
}
.inventory-details-name {
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 700;
    color: #3a2b20;
    margin-bottom: 6px;
}
.inventory-details-desc {
    flex-shrink: 0;
    font-size: 13px;
    color: #6b5a4a;
    line-height: 1.4;
    margin-bottom: 14px;
    min-height: 40px;
}
.inventory-use-btn {
    flex-shrink: 0;
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    background: #8a5836;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.inventory-use-btn:hover:not(:disabled) { background: #6e4528; }
.inventory-use-btn:disabled {
    background: #4ade80;
    cursor: default;
    opacity: 1;
}
.inventory-unlock-hint {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff8ec;
    border: 1px solid #e8d4b8;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b5a4a;
    text-align: left;
    width: 100%;
}
.inventory-unlock-hint ol { margin: 6px 0; padding-left: 18px; }
.inventory-unlock-hint a { color: #b87333; text-decoration: underline; }

/* МОБИЛЬНАЯ адаптация — колонки в столбик */
@media (max-width: 700px) {
    .inventory-content {
        max-width: 360px !important;
        width: 94vw;
    }
    .inventory-content .modal-header { padding: 10px 14px; font-size: 14px; }
    .inventory-tab-btn { font-size: 12px; padding: 6px 8px; }
    .inventory-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    .inventory-grid-wrap {
        border-right: none;
        border-bottom: 1px solid #f0e0d0;
        padding: 10px 12px;
        max-height: 40vh;
    }
    .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; }
    .inventory-cell.default-cell { font-size: 20px; }
    .inventory-details { padding: 12px; }
    .inventory-details-preview { width: 80px; height: 80px; margin-bottom: 8px; }
    .inventory-details-name { font-size: 14px; }
    .inventory-details-desc { font-size: 12px; min-height: 30px; margin-bottom: 10px; }
    .inventory-use-btn { font-size: 13px; padding: 8px 14px; }
    .inventory-content .modal-footer { padding: 10px 14px; }
    .inventory-content .modal-footer button { font-size: 13px; padding: 8px 14px; }
    /* Музыка — компактнее на телефоне */
    .inventory-music-hint { padding: 8px 12px; font-size: 11px; }
    .inventory-music-list { padding: 6px 8px 10px; }
    .music-row { gap: 8px; padding: 6px 6px; }
    .music-play-btn { width: 30px; height: 30px; font-size: 13px; }
    .music-dl-btn { width: 28px; height: 28px; font-size: 13px; }
    .music-row-name { font-size: 13px; }
    .music-pl-btn { width: 28px; height: 28px; font-size: 13px; }
}

/* Телефон в ЛАНДШАФТЕ (а играют только так — портрет перекрыт заглушкой):
   экран широкий, но низкий. Возвращаем колонки бок-о-бок и используем всю
   ширину/высоту — иначе при стопке (грид сверху, детали снизу) ничего не влезает. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    .inventory-content {
        max-width: 94vw !important;
        width: 94vw;
        height: 94dvh;
    }
    .inventory-body {
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows: none;
    }
    .inventory-grid-wrap {
        max-height: none;
        border-right: 1px solid #f0e0d0;
        border-bottom: none;
    }
}

/* === МОБИЛЬНЫЕ ПРАВКИ — компактнее === */
@media (max-width: 700px) {
    .profile-editor-content {
        max-width: 340px !important;
        width: 94vw;
    }
    .profile-editor-content .modal-header { padding: 10px 14px; font-size: 14px; }
    .profile-editor-body { padding: 10px 14px; }
    .profile-editor-banner-preview { height: 60px; margin-bottom: 12px; }
    .profile-editor-banner-label { font-size: 11px; }
    .profile-editor-section { margin-bottom: 12px; }
    .profile-editor-label { font-size: 12px; margin-bottom: 6px; }
    .profile-editor-tab-btn { font-size: 11px; padding: 5px 8px; }
    #profile-editor-caption { font-size: 12px; padding: 6px 8px; }
    .profile-editor-toggle-label { font-size: 13px; }
    .profile-editor-hint { font-size: 11px; margin-left: 24px; }
    .profile-editor-content .modal-footer { padding: 10px 14px; }
    .profile-editor-content .modal-footer button { font-size: 13px; padding: 8px 14px; }

    .profile-modal-content {
        max-width: 360px !important;
        width: 94vw;
    }
    .profile-banner-content { padding: 14px 12px; gap: 10px; }
    .profile-banner-avatar,
    .profile-banner-avatar-wrap { width: 56px; height: 56px; }
    .profile-banner-name { font-size: 17px; }
    .profile-banner-caption { font-size: 12px; }
    .profile-banner-status { font-size: 11px; padding: 2px 8px; }
    .profile-edit-btn { width: 30px; height: 30px; font-size: 14px; }
    .profile-actions { padding: 10px 12px 6px; gap: 6px; }
    .profile-action-btn { padding: 8px 10px; font-size: 12px; }
    .profile-section { padding: 10px 12px; }
    .profile-section-title { font-size: 13px; margin-bottom: 8px; }
    .profile-stats-grid-modal { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .profile-stat-cell { padding: 6px 4px; }
    .profile-stat-cell-icon { font-size: 16px; }
    .profile-stat-cell-value { font-size: 13px; }
    .profile-stat-cell-label { font-size: 10px; }
    .profile-friend-item-avatar { width: 24px; height: 24px; }
    .profile-friend-item-name { font-size: 12px; max-width: 90px; }
}

/* ============================================
   ОНЛАЙН-СЧЁТЧИК НА ЭКРАНЕ ВХОДА
   ============================================ */
#name-panel .online-count {
    font-size: 13px;
    color: #8a7565;
    text-align: center;
    margin-top: -10px;
}

#name-panel .online-count .online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse 2s infinite;
}

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

/* ============================================
   СИСТЕМА ЖЕСТОВ
   ============================================ */

/* Кнопка управления звуком */
#audio-toggle-btn {
    position: fixed;
    top: 20px;
    right: 210px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 20px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

#audio-toggle-btn:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.9);
}

#tts-toggle-btn {
    position: fixed;
    top: 20px;
    right: 260px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 20px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

#tts-toggle-btn:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.9);
}

/* ===== Дневной/ночной стиль верхних кнопок (кроме голубой активной) ===== */
body.day-mode #tts-toggle-btn:not(.active),
body.day-mode #audio-toggle-btn:not(.active),
body.day-mode #volume-mixer-btn:not(.active),
body.day-mode #my-context-btn:not(.active),
body.day-mode #help-floating-btn:not(.active),
body.day-mode #room-settings-floating-btn:not(.active),
body.day-mode #profile-floating-btn:not(.active),
body.day-mode #speech-bubble-btn:not(.active) {
    background: rgba(255, 236, 210, 0.9);
    color: #5a4030;
    border-color: rgba(160, 115, 76, 0.7);
}

body.day-mode #tts-toggle-btn:not(.active):hover,
body.day-mode #audio-toggle-btn:not(.active):hover,
body.day-mode #volume-mixer-btn:not(.active):hover,
body.day-mode #my-context-btn:not(.active):hover,
body.day-mode #help-floating-btn:not(.active):hover,
body.day-mode #room-settings-floating-btn:not(.active):hover,
body.day-mode #profile-floating-btn:not(.active):hover,
body.day-mode #speech-bubble-btn:not(.active):hover {
    background: rgba(255, 244, 225, 0.97);
}

body.night-mode #tts-toggle-btn:not(.active),
body.night-mode #audio-toggle-btn:not(.active),
body.night-mode #volume-mixer-btn:not(.active),
body.night-mode #my-context-btn:not(.active),
body.night-mode #help-floating-btn:not(.active),
body.night-mode #room-settings-floating-btn:not(.active),
body.night-mode #profile-floating-btn:not(.active),
body.night-mode #speech-bubble-btn:not(.active) {
    background: rgba(24, 22, 40, 0.85);
    color: #ebe7ff;
    border-color: rgba(132, 121, 182, 0.7);
}

body.night-mode #tts-toggle-btn:not(.active):hover,
body.night-mode #audio-toggle-btn:not(.active):hover,
body.night-mode #volume-mixer-btn:not(.active):hover,
body.night-mode #my-context-btn:not(.active):hover,
body.night-mode #help-floating-btn:not(.active):hover,
body.night-mode #room-settings-floating-btn:not(.active):hover,
body.night-mode #profile-floating-btn:not(.active):hover,
body.night-mode #speech-bubble-btn:not(.active):hover {
    background: rgba(36, 32, 59, 0.93);
}

/* Кнопка микшера громкости */
#volume-mixer-btn {
    position: fixed;
    top: 20px;
    right: 310px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 20px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}
#volume-mixer-btn:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.9);
}

/* Панель микшера */
.volume-mixer-panel {
    position: fixed;
    top: 68px;
    right: 260px;
    background: rgba(20, 20, 35, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px 16px;
    z-index: 10000;
    min-width: 220px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}
.volume-mixer-panel.hidden { display: none; }
.volume-mixer-title {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}
.volume-mixer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.volume-mixer-row:last-child { margin-bottom: 0; }
.volume-mixer-label {
    color: #ccc;
    font-size: 12px;
    min-width: 72px;
    white-space: nowrap;
}
.volume-mixer-value {
    color: #aaa;
    font-size: 11px;
    min-width: 32px;
    text-align: right;
}
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #6c63ff;
    cursor: pointer;
    border: 2px solid #fff;
}
.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #6c63ff;
    cursor: pointer;
    border: 2px solid #fff;
}

/* ===== Кнопка выносок ===== */
#speech-bubble-btn {
    position: fixed;
    top: 20px;
    right: 360px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 20px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}
#speech-bubble-btn:hover { transform: scale(1.1); background: rgba(0, 0, 0, 0.9); }
#speech-bubble-btn.active { background: rgba(100, 99, 255, 0.5); border-color: #6c63ff; }

/* Кнопка просмотра своего контекста */
#my-context-btn {
    position: fixed;
    top: 20px;
    right: 560px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 18px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

.chat-message.local-draft {
    opacity: 0.7;
    color: #b8b8b8;
    font-style: italic;
}

.chat-message.local-draft .sender {
    color: #9e9e9e;
}
#my-context-btn:hover { transform: scale(1.1); background: rgba(0, 0, 0, 0.9); }

/* Плавающая кнопка помощи */
#help-floating-btn {
    position: fixed;
    top: 20px;
    right: 410px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 18px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}
#help-floating-btn:hover { transform: scale(1.1); background: rgba(0, 0, 0, 0.9); }

/* Плавающая кнопка настроек комнаты */
#room-settings-floating-btn {
    position: fixed;
    top: 20px;
    right: 460px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 20px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}
#room-settings-floating-btn:hover { transform: scale(1.1); background: rgba(0, 0, 0, 0.9); }

/* Плавающая кнопка профиля */
#profile-floating-btn {
    position: fixed;
    top: 20px;
    right: 510px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 20px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}
#profile-floating-btn:hover { transform: scale(1.1); background: rgba(0, 0, 0, 0.9); }

/* ============================================
   PHASE 2.1 — МОБИЛЬНОЕ МЕНЮ + АДАПТИВНЫЙ ЧАТ
   На узких экранах все вспомогательные кнопки прячутся в выпадающее меню.
   ============================================ */

#mobile-menu-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 22px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 1003;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}
#mobile-menu-btn:hover { transform: scale(1.05); background: rgba(0, 0, 0, 0.9); }

.mobile-menu-dropdown {
    position: fixed;
    top: 76px;
    right: 20px;
    width: 260px;
    background: rgba(20, 14, 8, 0.96);
    border-radius: 12px;
    z-index: 1004;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    max-height: 80vh;
    max-height: 80dvh;
    overflow-y: auto;
}
.mobile-menu-dropdown.hidden { display: none; }

.mobile-menu-item {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #f0e4d4;
    padding: 11px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 15px;
    text-align: left;
    transition: background 0.15s;
    font-family: inherit;
}
.mobile-menu-item:hover { background: rgba(255, 255, 255, 0.18); }
.mobile-menu-item:active { background: rgba(255, 255, 255, 0.25); }
.mobile-menu-icon {
    font-size: 20px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.mobile-menu-item-danger { color: #ff9292; }
.mobile-menu-item-danger:hover { background: rgba(255, 80, 80, 0.25); }
.mobile-menu-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 4px 0;
}

/* Чат — открытое (mobile-shown) состояние: фуллскрин-оверлей */
#chat-panel.mobile-shown {
    width: 92vw;
    max-width: 380px;
    height: 60vh;
    height: 60dvh;
    left: 4vw;
    top: 76px;
    resize: none;    /* в мобильном оверлее размер меняет mobile-ui.js (свой угловой хват) */
    min-width: 0;    /* десктопные ограничения размера не должны влиять на мобильный оверлей */
    min-height: 0;
}

/* === Компактный режим (узкие/мобильные экраны) === */
@media (max-width: 1100px) {
    /* Прячем индивидуальные плавающие кнопки — они теперь в меню */
    #audio-toggle-btn,
    #tts-toggle-btn,
    #volume-mixer-btn,
    #speech-bubble-btn,
    #help-floating-btn,
    #room-settings-floating-btn,
    #profile-floating-btn,
    #my-context-btn,
    #balance-game-btn,
    #voice-btn,
    #mic-toggle-btn,
    #afterparty-menu-btn,
    #leave-game-btn {
        display: none !important;
    }
    /* Чат по умолчанию скрыт; открывается через меню (класс .mobile-shown) */
    #chat-panel:not(.mobile-shown) {
        display: none !important;
    }
}

/* На широких экранах кнопка-меню всегда скрыта */
@media (min-width: 1101px) {
    #mobile-menu-btn,
    #mobile-menu-dropdown {
        display: none !important;
    }
}

/* ============================================
   PHASE 2.1.1 — КОМПАКТНЫЙ UI ДЛЯ МОБИЛЫ
   Уменьшаем «День N», таймер, "Воздержаться", уведомления.
   Делаем чат и модалки читаемыми. Фиксируем позицию микшера.
   ============================================ */
@media (max-width: 1100px) {
    /* "День 1" — компактнее */
    #phase-display {
        padding: 6px 14px !important;
    }
    #phase-title {
        font-size: 14px !important;
    }
    #phase-number {
        font-size: 12px !important;
    }

    /* Таймер фазы */
    #phase-timer {
        padding: 6px 10px !important;
        font-size: 13px !important;
        right: 76px !important; /* слева от кнопки-меню */
        top: 20px !important;
    }

    /* Кнопка "Воздержаться" / "Закончить речь" / "Пропустить номинацию" */
    .abstain-btn,
    #finish-defense-btn,
    #skip-nomination-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        right: 10px !important;
    }

    /* Уведомления — компактные */
    #notification-container {
        right: 10px !important;
        left: 10px !important;
        top: 70px !important;
    }
    .notification {
        max-width: 100% !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
    }

    /* === ЧАТ В МОБИЛЬНОМ ОВЕРЛЕЕ — крупнее текст === */
    #chat-panel.mobile-shown .chat-message,
    #chat-panel.mobile-shown #chat-messages {
        font-size: 15px !important;
        line-height: 1.4;
    }
    #chat-panel.mobile-shown .chat-message {
        font-size: 15px !important;
    }
    #chat-panel.mobile-shown #chatInput {
        font-size: 15px !important;
        padding: 8px 12px !important;
    }
    #chat-panel.mobile-shown #sendChatBtn {
        font-size: 18px !important;
        padding: 8px 14px !important;
    }
    #chat-panel.mobile-shown .chat-title {
        font-size: 15px !important;
        padding: 12px 14px !important;
    }

    /* === МОДАЛКИ — fit в маленький экран ===
       .modal-content — обычная модалка (с padding-ом сама)
       .modal-wide    — широкая модалка (settings/create-room), padding на детях */
    .modal-content:not(.modal-wide):not(.avatar-editor-content) {
        max-width: 95vw !important;
        width: auto !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
        overflow-y: auto !important;
        padding: 16px !important;
        font-size: 14px !important;
    }
    .modal-content:not(.modal-wide):not(.avatar-editor-content) .modal-header {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Широкая модалка (создание комнаты, расширенные настройки) — фуллскрин на мобиле */
    .modal-wide {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }
    .modal-wide .modal-header {
        font-size: 16px !important;
        padding: 12px 16px !important;
    }
    .modal-wide .modal-settings {
        padding: 0 14px !important;
    }
    .settings-section {
        padding: 10px 12px !important;
        margin-bottom: 12px !important;
    }
    .settings-section-title {
        font-size: 14px !important;
    }
    .settings-group {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }
    .settings-group-title {
        font-size: 13px !important;
    }
    .form-field {
        margin-bottom: 10px !important;
    }
    .form-field label {
        font-size: 13px !important;
    }
    .form-field input[type="text"],
    .form-field input[type="number"],
    .form-field select,
    .form-field textarea {
        font-size: 14px !important;
        padding: 8px 10px !important;
        min-height: 36px !important;
    }
    .form-actions,
    .modal-footer {
        padding: 12px 14px !important;
        gap: 8px !important;
    }
    .form-actions button,
    .modal-footer button {
        font-size: 14px !important;
        padding: 10px 16px !important;
    }
    /* Подсказки/help-tooltip — компактнее */
    .help-tooltip {
        font-size: 12px !important;
        width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
    }
    .help-tip-box {
        font-size: 12px !important;
        padding: 10px !important;
    }

    /* === РЕДАКТОР АВАТАРА — компактные размеры (без zoom) ===
       Цель: на телефоне в портрете 360×800 чтобы видно было одновременно:
       header + tabs + превью + текст + 2-3 ряда цветов + footer без скролла. */
    .avatar-editor-content {
        max-width: 340px !important;
        width: 90vw !important;
        max-height: 88dvh !important;
        border-radius: 12px !important;
    }
    /* Header — title и табы в одну строку, чтобы экономить вертикаль */
    .avatar-editor-content .modal-header {
        padding: 8px 12px !important;
        gap: 8px !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    .avatar-editor-content .modal-header > span {
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    .avatar-editor-tabs {
        flex: 1 !important;
        gap: 4px !important;
    }
    .avatar-editor-tabs .tab-btn {
        padding: 5px 6px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }
    /* Body — компактные отступы */
    .avatar-editor-body {
        padding: 10px 12px !important;
    }
    .avatar-editor-preview {
        margin-bottom: 6px !important;
    }
    #editor-avatar-preview {
        width: 56px !important;
        height: 56px !important;
    }
    .tab-description {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }
    /* Цвета — 6 в ряд, компактные квадратики */
    .color-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 5px !important;
    }
    .color-option {
        border-radius: 6px !important;
        border-width: 2px !important;
    }
    /* Узоры — 5 в ряд */
    .pattern-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 5px !important;
    }
    /* Footer — компактные кнопки */
    .avatar-editor-content .modal-footer {
        padding: 8px 12px !important;
        gap: 6px !important;
    }
    .avatar-editor-content .modal-footer button {
        padding: 6px 14px !important;
        font-size: 13px !important;
    }

    /* === МИКШЕР ГРОМКОСТИ — позиция фикс (был off-screen на узких экранах) === */
    .volume-mixer-panel {
        top: 76px !important;
        right: 10px !important;
        left: auto !important;
        max-width: calc(100vw - 20px);
        min-width: 0 !important;
        width: 280px;
    }
}

/* ============================================
   ФИКС СТРУКТУРЫ РЕДАКТОРА АВАТАРА
   Чтобы header + footer были фиксированы, а body скроллился — flex-column.
   Применяется на ВСЕХ экранах (не только мобиле) — это структурный фикс.
   ============================================ */
.avatar-editor-content {
    display: flex !important;
    flex-direction: column !important;
}
.avatar-editor-content .modal-header { flex-shrink: 0; }
.avatar-editor-content .modal-footer { flex-shrink: 0; }
.avatar-editor-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* ============================================
   КЛАВИАТУРА ОТКРЫТА — поднимаем модалки к верху видимой области.
   .modal обычно центрирует контент по вертикали; при открытой клавиатуре
   это значит что модалка может оказаться частично под ней. Прижимаем сверху.
   ============================================ */
body.keyboard-open .modal {
    align-items: flex-start !important;
    padding-top: 12px !important;
}
/* .modal-wide (фуллскрин на мобиле) — уже занимает всё, ничего не сдвигаем */
body.keyboard-open .modal-wide {
    padding-top: 0 !important;
}

/* ============================================
   СОСУЩЕСТВОВАНИЕ С САМОПИСНОЙ КЛАВИАТУРОЙ
   keyboard.js при показе ставит body.custom-kb-open и --kb-height.
   Ограничиваем высоту панелей, чтобы активный инпут не уходил под клавиатуру.
   ============================================ */
body.custom-kb-open .modal-content,
body.custom-kb-open .avatar-editor-content,
body.custom-kb-open .changelog-history-modal-content {
    max-height: calc(100vh - var(--kb-height) - 24px) !important;
    max-height: calc(100dvh - var(--kb-height) - 24px) !important;
    overflow-y: auto;
}
/* Чат-оверлей: ужимаем, чтобы поле ввода осталось над клавиатурой */
body.custom-kb-open #chat-panel.mobile-shown {
    max-height: calc(100vh - 84px - var(--kb-height));
    max-height: calc(100dvh - 84px - var(--kb-height));
}

/* ============================================
   ПЛАШКА «ПОСЛЕДНИЕ СЛОВА» НА ТЕЛЕФОНЕ
   #last-words-container создаётся инлайн-стилями в script.js, поэтому
   переопределяем через !important. Делаем компактным flex-столбцом
   с явными отступами — чтобы имя/таймер не наезжали на кнопку «Закончить речь».
   ============================================ */
@media (max-width: 1100px) {
    #last-words-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        top: 70px !important;
        padding: 12px 18px !important;
        min-width: 0 !important;
        max-width: min(92vw, 360px) !important;
        font-size: 15px !important;
    }
    #last-words-container > div { margin: 0 !important; }
    #last-words-speaker { font-size: 18px !important; }
    #last-words-timer { font-size: 26px !important; }
    #finish-last-words-btn { margin-top: 4px !important; padding: 10px 20px !important; font-size: 15px !important; }
}

/* Низкая альбомная высота телефона — ещё компактнее */
@media (orientation: landscape) and (max-height: 500px) {
    #last-words-container {
        top: 54px !important;
        padding: 8px 16px !important;
        gap: 4px !important;
    }
    #last-words-speaker { font-size: 16px !important; }
    #last-words-timer { font-size: 22px !important; }
    #finish-last-words-btn { margin-top: 2px !important; padding: 7px 16px !important; font-size: 14px !important; }
}

/* Поиск по моделям в модалках */
#botModelSearch,
#upgradeModelSearch {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid rgba(220, 220, 220, 0.);
    border-radius: 8px;
    background: rgba(245, 245, 245, 0.08);
    color: #C0C0C0;
}

/* Лейаут провайдеров TTS: browser + elevenlabs сверху, AI Studio ниже */
.tts-provider-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
}

.tts-provider-wide-row {
    grid-column: 1 / -1;
}

/* ===== Выноски (speech bubbles) ===== */
.speech-bubble {
    position: absolute;
    background:
        radial-gradient(circle at top left, rgba(167, 205, 255, 0.2), transparent 34%),
        linear-gradient(165deg, rgba(14, 25, 51, 0.97) 0%, rgba(27, 33, 68, 0.97) 100%);
    color: #f3f7ff;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    padding: 13px 17px 14px;
    border-radius: 16px;
    width: 360px;
    word-break: break-word;
    z-index: 2147483647 !important;
    pointer-events: none;
    box-shadow:
        0 14px 30px rgba(3, 10, 26, 0.46),
        0 0 0 1px rgba(169, 201, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(169, 201, 255, 0.38);
    animation: bubbleFadeIn 0.25s ease-out;
    transition: opacity 0.5s ease;
    overflow: visible;
}
.speech-bubble.fade-out { opacity: 0; }

.speech-bubble::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
    opacity: 0.9;
}

/* Говорящий игрок не должен подниматься над столом/UI только из-за состояния речи. */
.player-at-table.is-speaking { z-index: auto !important; }

/* Хвостик выноски — справа от игрока (по умолчанию) */
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: 12px;
    width: 0; height: 0;
    border: 7px solid transparent;
}
/* flipped-игрок — пузырь справа от спрайта, стрелка слева пузыря */
.speech-bubble.bubble-left::after {
    left: -13px;
    border-right-color: rgba(20, 20, 40, 0.96);
}
/* обычный игрок — пузырь слева от спрайта, стрелка справа пузыря */
.speech-bubble.bubble-right::after {
    right: -13px;
    border-left-color: rgba(20, 20, 40, 0.96);
}

/* === Выноска: дневной (светлый) режим === */
body.day-mode .speech-bubble {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 36%),
        linear-gradient(160deg, rgba(255, 252, 245, 0.98) 0%, rgba(255, 243, 219, 0.98) 100%);
    color: #2b2018;
    box-shadow:
        0 12px 28px rgba(100, 60, 20, 0.24),
        0 0 0 1px rgba(184, 140, 92, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(184, 140, 92, 0.52);
}
body.day-mode .speech-bubble::before {
    border-color: rgba(120, 82, 43, 0.12);
}
body.day-mode .speech-bubble.bubble-left::after {
    border-right-color: rgba(255, 248, 235, 0.98);
}
body.day-mode .speech-bubble.bubble-right::after {
    border-left-color: rgba(255, 248, 235, 0.98);
}
body.day-mode .speech-bubble .bubble-sender { color: #6b4030; }
body.day-mode .speech-bubble .bubble-sender.mafia-sender { color: #cc2200; }
body.day-mode .speech-bubble .bubble-sender.defense-sender { color: #aa7700; }

.speech-bubble .bubble-sender {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: #d6e7ff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.speech-bubble .bubble-sender.mafia-sender {
    color: #ffd3d3;
    background: rgba(173, 38, 38, 0.26);
    border-color: rgba(255, 110, 110, 0.2);
}
.speech-bubble .bubble-sender.defense-sender {
    color: #fff0b3;
    background: rgba(172, 128, 16, 0.24);
    border-color: rgba(255, 217, 61, 0.18);
}
body.day-mode .speech-bubble .bubble-sender {
    color: #6b4030;
    background: rgba(146, 96, 44, 0.08);
    border-color: rgba(146, 96, 44, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
body.day-mode .speech-bubble .bubble-sender.mafia-sender {
    color: #a82a14;
    background: rgba(194, 62, 32, 0.12);
    border-color: rgba(194, 62, 32, 0.18);
}
body.day-mode .speech-bubble .bubble-sender.defense-sender {
    color: #8a6400;
    background: rgba(214, 170, 49, 0.14);
    border-color: rgba(214, 170, 49, 0.2);
}

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

/* Кнопка открытия панели жестов */
#gesture-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 28px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

#gesture-btn:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.9);
}

#gesture-btn.active {
    background: #8a5836;
    border-color: #fff;
}

/* Панель жестов */
#gesture-panel {
    position: fixed;
    bottom: 86px;
    right: 20px;
    width: 320px;
    max-height: 480px;
    max-height: min(480px, 80dvh);
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.97);
    border: 2px solid #8a5836;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    padding: 12px;
    animation: gestureSlideUp 0.2s ease-out;
}

#gesture-panel.hidden {
    display: none;
}

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

.gesture-panel-title {
    font-weight: bold;
    font-size: 15px;
    color: #3a2b20;
    margin-bottom: 10px;
    text-align: center;
}

.gesture-section {
    margin-bottom: 10px;
}

.gesture-section-label {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    padding-left: 2px;
}

.gesture-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gesture-item {
    width: 44px;
    height: 44px;
    border: 2px solid #e0d6cc;
    border-radius: 10px;
    background: #faf6f2;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}

.gesture-item:hover {
    border-color: #8a5836;
    background: #f0e6dc;
    transform: scale(1.12);
}

.gesture-item:active {
    transform: scale(0.95);
}

.gesture-item.gesture-number {
    font-size: 16px;
    font-weight: bold;
    color: #3a2b20;
}

/* Всплывающий жест над аватаром */
.gesture-bubble {
    position: absolute;
    top: -210px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    z-index: 100;
    pointer-events: none;
    animation: gesturePop 0.3s ease-out;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.gesture-bubble.gesture-bubble-number {
    font-size: 32px;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid #8a5836;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #3a2b20;
}

.gesture-bubble.fade-out {
    animation: gestureFade 0.4s ease-in forwards;
}

@keyframes gesturePop {
    0% { transform: translateX(-50%) scale(0); opacity: 0; }
    60% { transform: translateX(-50%) scale(1.2); opacity: 1; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes gestureFade {
    0% { opacity: 1; transform: translateX(-50%) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.5) translateY(-20px); }
}

/* Жесты бога/зрителей — у них нет места за столом, поэтому вместо пузыря над
   сиденьем показываем эмодзи (того же размера, что и жесты игроков) сбоку справа,
   с именем отправителя под ним. Без окошка/рамки — просто эмодзи и подпись. */
#offtable-gesture-layer {
    position: fixed;
    top: 130px;
    right: 16px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    pointer-events: none;
}

.offtable-gesture-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    animation: offtableGesturePop 0.3s ease-out;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.offtable-gesture-item .offtable-gesture-emoji {
    font-size: 48px;
    line-height: 1;
}

/* Числовой жест — голая цифра без собственного цвета; даём подложку-бублик
   (как у жестов-цифр над столом), чтобы читалось на любом фоне. */
.offtable-gesture-item .offtable-gesture-emoji.offtable-gesture-number {
    font-size: 32px;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid #8a5836;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #3a2b20;
}

body.night-mode .offtable-gesture-item .offtable-gesture-emoji.offtable-gesture-number {
    background: rgba(50, 35, 25, 0.95);
    border-color: #8a5836;
    color: #e8d5c4;
}

.offtable-gesture-item .offtable-gesture-name {
    font-size: 11px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    white-space: nowrap;
}

.offtable-gesture-item.fade-out {
    animation: offtableGestureFade 0.4s ease-in forwards;
}

@keyframes offtableGesturePop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes offtableGestureFade {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.7) translateY(-14px); }
}

/* Кнопка «Жесты» приглушена, когда игрок лично скрыл у себя чужие жесты (ПКМ) */
#gesture-btn.gestures-hidden {
    opacity: 0.45;
    filter: grayscale(0.6);
}

/* Ночной стиль панели жестов */
body.night-mode #gesture-panel {
    background: rgba(50, 35, 25, 0.97);
    border-color: #6d4529;
}

body.night-mode .gesture-panel-title {
    color: #e8d5c4;
}

body.night-mode .gesture-section-label {
    color: #8a7565;
}

body.night-mode .gesture-item {
    border-color: #5a4030;
    background: #3a2b20;
}

body.night-mode .gesture-item:hover {
    border-color: #8a5836;
    background: #4a3828;
}

body.night-mode .gesture-item.gesture-number {
    color: #e8d5c4;
}

body.night-mode .gesture-bubble.gesture-bubble-number {
    background: rgba(50, 35, 25, 0.95);
    border-color: #8a5836;
    color: #e8d5c4;
}

/* ============================================
   ГОЛОСОВОЙ ЧАТ
   ============================================ */

/* Кнопка входа в голосовой чат — левый верхний угол, под чатом */
#voice-btn {
    position: fixed;
    top: 380px;
    left: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 22px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

#voice-btn:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.9);
}

body.day-mode #voice-btn:not(.active) {
    background: rgba(255, 236, 210, 0.9);
    color: #5a4030;
    border-color: rgba(160, 115, 76, 0.7);
}

body.day-mode #voice-btn:not(.active):hover {
    background: rgba(255, 244, 225, 0.97);
}

body.night-mode #voice-btn:not(.active) {
    background: rgba(24, 22, 40, 0.85);
    color: #ebe7ff;
    border-color: rgba(132, 121, 182, 0.7);
}

body.night-mode #voice-btn:not(.active):hover {
    background: rgba(36, 32, 59, 0.93);
}

#voice-btn.active {
    background: #2e7d32;
    border-color: #81c784;
    box-shadow: 0 0 16px rgba(76, 175, 80, 0.4);
}

/* === АВАТАР БОТА (компактный пикер) === */
.bot-avatar-preview {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #666;
    flex-shrink: 0;
    position: relative;
    /* Маска-колобок как у игровых аватаров — иначе превью было простым кругом
       и узор (::after ниже) не совпадал с тем, как бот выглядит в игре. */
    -webkit-mask-image: url('kolobok.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('kolobok.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
/* Слой узора для превью аватара бота (раньше правила не было → узор не показывался) */
.bot-avatar-preview.has-pattern::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url('kolobok.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('kolobok.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    pointer-events: none;
    background-image: var(--pattern-url);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.5;
    mix-blend-mode: overlay;
}
.color-grid-compact {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.color-grid-compact .color-option {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
}
.color-grid-compact .color-option:hover { transform: scale(1.15); }
.color-grid-compact .color-option.selected { border-color: #fff; box-shadow: 0 0 0 2px #4a90d9; }
.color-grid-compact .color-option.no-gradient {
    background: repeating-conic-gradient(#555 0% 25%, #333 0% 50%) 50% / 12px 12px;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}
.pattern-grid-compact {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.pattern-grid-compact .pattern-option-mini {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    background-size: cover;
    background-position: center;
    transition: transform 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #ccc;
    background-color: #444;
}
.pattern-grid-compact .pattern-option-mini:hover { transform: scale(1.1); }
.pattern-grid-compact .pattern-option-mini.selected { border-color: #4a90d9; }

/* === МЫСЛИ БОТОВ (после игры) === */
.bot-thoughts-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e1e2e;
    border: 1px solid #444;
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.bot-thoughts-header {
    padding: 16px 20px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #e0e0e0;
}
.bot-thoughts-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 20px;
    border-bottom: 1px solid #333;
    flex-wrap: wrap;
}
.bot-thoughts-tab {
    padding: 6px 14px;
    background: #2a2a3e;
    border: 1px solid #444;
    border-radius: 8px;
    color: #aaa;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.bot-thoughts-tab:hover { background: #3a3a4e; color: #fff; }
.bot-thoughts-tab.active { background: #4a90d9; border-color: #4a90d9; color: #fff; }
.bot-thoughts-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.thought-entry {
    margin-bottom: 16px;
    padding: 12px;
    background: #252538;
    border-radius: 10px;
    border-left: 3px solid #4a90d9;
}
.thought-entry .thought-phase {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.thought-entry .thought-text {
    font-size: 13px;
    color: #ccc;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* === GOD MODE ИНТЕРВЬЮ === */
.interview-panel {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 380px;
    max-height: 500px;
    background: #1e1e2e;
    border: 1px solid #555;
    border-radius: 14px;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.interview-header {
    padding: 12px 16px;
    border-bottom: 1px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    color: #e0e0e0;
}
.interview-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    min-height: 150px;
    max-height: 320px;
}
.interview-msg {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    max-width: 85%;
}
.interview-msg.user { background: #3a3a5e; color: #ddd; margin-left: auto; }
.interview-msg.bot { background: #252538; color: #ccc; margin-right: auto; }
.interview-input-area {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid #444;
}
.interview-input-area input {
    flex: 1;
    background: #2a2a3e;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 8px 12px;
    color: #ddd;
    font-size: 13px;
}
.interview-input-area button {
    padding: 8px 14px;
    background: #4a90d9;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

/* Кнопка микрофона */
#mic-toggle-btn {
    position: fixed;
    top: 380px;
    left: 76px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #2e7d32;
    color: white;
    font-size: 22px;
    border: 2px solid #81c784;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

#mic-toggle-btn:hover {
    transform: scale(1.1);
}

#mic-toggle-btn.muted {
    background: #c62828;
    border-color: #e57373;
    box-shadow: 0 0 16px rgba(198, 40, 40, 0.4);
}

#mic-toggle-btn.no-speak {
    background: #555;
    border-color: #888;
    opacity: 0.7;
}

/* Индикатор голосового чата на аватаре — виден ВСЕМ */
.voice-indicator {
    position: absolute;
    top: -70px;
    left: calc(50% + 55px);
    transform: none !important;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #546e7a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 70;
    pointer-events: none;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background 0.3s;
}

.voice-indicator::after {
    content: '🎤';
    font-size: 13px;
}

/* В голосе, но молчит */
.voice-indicator.muted {
    background: #546e7a;
}

.voice-indicator.muted::after {
    content: '🎤';
}

/* Активно говорит */
.voice-indicator.speaking {
    background: #4CAF50;
    animation: voicePulse 1.2s infinite;
}

@keyframes voicePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
}

/* Статус голоса — подпись рядом с кнопкой */
#voice-status {
    position: fixed;
    top: 432px;
    left: 20px;
    z-index: 1000;
    color: white;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 10px;
    border-radius: 12px;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
}

/* ========== GOD MODE CONTROLS ========== */

.god-next-phase-btn {
    margin: 10px 12px 12px;
    padding: 12px;
    background: linear-gradient(135deg, #7b1fa2, #9c27b0);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.god-next-phase-btn:hover {
    background: linear-gradient(135deg, #9c27b0, #ba68c8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.5);
}

.god-next-phase-btn:active {
    transform: translateY(0);
}

/* Мини-панель управления бога (вместо полной боковой панели) */
#god-controls-bar {
    position: fixed;
    top: 70px;
    right: 70px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 10, 30, 0.95);
    border: 2px solid #9c27b0;
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: 0 0 10px rgba(156, 39, 176, 0.3), 0 4px 12px rgba(0,0,0,0.4);
}

#god-controls-bar .god-next-phase-btn {
    margin: 0;
    padding: 5px 10px;
    font-size: 12px;
}

#god-controls-bar .god-next-phase-btn.god-waiting {
    animation: god-pulse 1s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.7);
    border-color: #ffc107;
}

@keyframes god-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

#god-controls-bar .god-auto-btn {
    margin: 0;
    padding: 5px 10px;
    font-size: 11px;
    background: rgba(100, 100, 100, 0.5);
    color: #aaa;
    border: 1px solid #666;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

#god-controls-bar .god-auto-btn:hover {
    background: rgba(156, 39, 176, 0.3);
    color: #ce93d8;
    border-color: #9c27b0;
}

#god-controls-bar .god-auto-btn.active {
    background: rgba(76, 175, 80, 0.3);
    color: #81c784;
    border-color: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}

/* На мобиле god-бар (top/right) перекрывал открытый чат-оверлей (он стартует с
   top:76px и занимает почти всю ширину). Переносим бар вниз по центру — вне
   зоны чата — и делаем компактнее. */
@media (max-width: 1100px) {
    #god-controls-bar {
        top: auto;
        right: auto;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px 10px;
        gap: 4px;
        max-width: 92vw;
        flex-wrap: wrap;
        justify-content: center;
    }
    #god-controls-bar .god-next-phase-btn,
    #god-controls-bar .god-auto-btn {
        font-size: 11px;
        padding: 5px 8px;
    }
}

/* Табличка роли для режима бога */
.player-tag.god-role {
    background: linear-gradient(135deg, #6a1b9a, #9c27b0);
    color: white;
    border: 2px solid #ce93d8;
}

.player-tag.god-role::before {
    content: none;
}

.player-tag.god-role.role-mafia {
    background: linear-gradient(135deg, #ce93d8, #ba68c8);
    border: 2px solid #e1bee7;
}

.player-tag.god-role.role-peaceful {
    background: linear-gradient(135deg, #ef9a9a, #e57373);
    border: 2px solid #ffcdd2;
}

.player-tag.god-role.role-neutral {
    background: linear-gradient(135deg, #9e9e9e, #8d8d8d);
    border: 2px solid #d0d0d0;
}

.god-mode-group {
    border: 1px solid rgba(156, 39, 176, 0.4) !important;
    background: rgba(156, 39, 176, 0.08) !important;
}

/* God Context Modal */
.god-context-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.god-context-modal-content {
    background: #1e1e2e;
    border: 1px solid rgba(156, 39, 176, 0.5);
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(156, 39, 176, 0.3);
}

.god-context-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(156, 39, 176, 0.3);
    font-size: 16px;
    font-weight: bold;
    color: #ce93d8;
}

.god-context-close-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}

.god-context-close-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.god-context-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 0 12px;
}

.god-tab {
    padding: 10px 16px;
    background: none;
    border: none;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

.god-tab:hover {
    color: #ccc;
}

.god-tab.active {
    color: #ce93d8;
    border-bottom-color: #9c27b0;
}

.god-context-body {
    padding: 14px 18px;
    overflow-y: auto;
    flex: 1;
    font-size: 13px;
    color: #ccc;
    line-height: 1.5;
}

.god-context-body pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 8px;
    font-size: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.god-thinking-entry {
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border-left: 3px solid #9c27b0;
}

.god-thinking-entry .thinking-label {
    font-size: 11px;
    color: #ce93d8;
    font-weight: bold;
    margin-bottom: 4px;
}

.god-thinking-entry .thinking-text {
    color: #b0bec5;
    font-size: 12px;
}

.god-memory-entry {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.god-memory-sender {
    font-weight: bold;
    color: #ce93d8;
    font-size: 12px;
}

.god-memory-content {
    color: #b0bec5;
    font-size: 12px;
    margin-top: 2px;
}

.god-memory-type {
    font-size: 10px;
    color: #666;
    margin-left: 8px;
}

/* ==================== КНОПКА ВЫХОДА ИЗ ИГРЫ ==================== */
#leave-game-btn {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(80, 20, 20, 0.85);
    border: 2px solid #c0392b;
    color: white;
    font-size: 22px;
    cursor: pointer;
    z-index: 1001;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(192, 57, 43, 0.4);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

#leave-game-btn:hover {
    background: rgba(120, 30, 30, 0.95);
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(192, 57, 43, 0.6);
}

#leave-game-btn:active {
    transform: scale(0.95);
}

/* ==================== ДИАЛОГ ПОДТВЕРЖДЕНИЯ ВЫХОДА ==================== */
#leave-game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.leave-dialog {
    background: #2a1a0a;
    border: 2px solid #8a5836;
    border-radius: 16px;
    padding: 30px 36px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.leave-dialog h3 {
    color: #e74c3c;
    margin: 0 0 12px;
    font-size: 20px;
}

.leave-dialog p {
    color: #bbb;
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.5;
}

.leave-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.leave-btn-confirm {
    padding: 10px 28px;
    background: #c0392b;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.leave-btn-confirm:hover {
    background: #e74c3c;
}

.leave-btn-cancel {
    padding: 10px 28px;
    background: #555;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.leave-btn-cancel:hover {
    background: #777;
}

/* ============================================
   ЗАБЛОКИРОВАННЫЕ СЕТТИНГИ
   ============================================ */
.setting-card.setting-locked {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
    filter: grayscale(0.6);
}

.setting-card.setting-locked:hover {
    border-color: #999;
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.setting-locked-badge {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: #c0392b;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255,255,255,0.9);
    padding: 1px 4px;
    border-radius: 3px;
}

/* ============================================
   ПОДСКАЗКИ (HELP TOOLTIPS)
   ============================================ */
.help-tooltip {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    border-radius: 50%;
    background: #c62828;
    color: white;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    user-select: none;
    transition: background 0.2s;
}

.help-tooltip:hover {
    background: #357abd;
}

/* Скрытый исходник для подсказки (содержимое копируется в popup) */
.help-tip-box {
    display: none !important;
}

/* Плавающий popup подсказки */
#help-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s;
}

.help-popup-box {
    background: #1e1e2e;
    color: #e8e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    max-width: 380px;
    width: 90%;
    position: relative;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.help-popup-box a {
    color: #ffcc00;
    font-weight: 600;
}

.help-popup-box b {
    color: #fff;
}

.help-popup-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #888;
    padding: 0;
    line-height: 1;
}

.help-popup-close:hover {
    color: #fff;
}

/* ============================================
   МОБИЛЬНАЯ ЗАГЛУШКА
   ============================================ */
#mobile-landing {
    /* Заглушка "Игра только под ПК" отключена — телефонам разрешён вход
       (в портретной ориентации показывается rotate-overlay).
       Элемент остаётся в DOM на случай если понадобится снова. */
    display: none !important;
}

.mobile-landing-bg {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #1c1510 0%, #2e2118 40%, #503a28 100%);
    z-index: -1;
}

.mobile-landing-stars span {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #f7ebe6;
    border-radius: 50%;
    animation: mobileStar 3s ease-in-out infinite;
}
.mobile-landing-stars span:nth-child(1) { top: 8%; left: 15%; animation-delay: 0s; }
.mobile-landing-stars span:nth-child(2) { top: 5%; left: 55%; animation-delay: 1.2s; }
.mobile-landing-stars span:nth-child(3) { top: 12%; left: 80%; animation-delay: 0.6s; }
.mobile-landing-stars span:nth-child(4) { top: 3%; left: 35%; animation-delay: 2s; }
.mobile-landing-stars span:nth-child(5) { top: 15%; left: 92%; animation-delay: 1.5s; }

@keyframes mobileStar {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

.mobile-landing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 30px;
    min-height: 100vh;
    color: #f0e4d4;
}

.mobile-landing-logo {
    width: 70%;
    max-width: 280px;
    height: auto;
    margin-bottom: 32px;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
}

/* Блок предупреждения */
.mobile-landing-warning {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 340px;
    gap: 12px;
    flex: 1;
}

.mobile-warning-icon {
    font-size: 52px;
    line-height: 1;
}

.mobile-warning-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #f5d89a;
    line-height: 1.3;
}

.mobile-warning-text {
    margin: 0;
    font-size: 15px;
    color: #c0a88a;
    line-height: 1.6;
}

.mobile-warning-action {
    color: #f0e4d4;
    font-weight: 600;
}

.mobile-warning-url {
    margin-top: 4px;
    padding: 10px 20px;
    background: rgba(245, 216, 154, 0.1);
    border: 1px solid rgba(245, 216, 154, 0.3);
    border-radius: 8px;
    font-size: 14px;
    font-family: monospace;
    color: #f5d89a;
    word-break: break-all;
}

/* Футер */
.mobile-landing-footer {
    text-align: center;
    margin-top: auto;
    padding-top: 24px;
}

/* Блок «Почему нет адаптации» */
.mobile-why-block {
    width: 100%;
    max-width: 340px;
    margin-top: 20px;
    border: 1px solid rgba(245, 216, 154, 0.25);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.mobile-why-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #f5d89a;
    -webkit-tap-highlight-color: transparent;
}

.mobile-why-arrow {
    font-size: 12px;
    transition: transform 0.3s;
    color: #c0a88a;
}

.mobile-why-block.open .mobile-why-arrow {
    transform: rotate(180deg);
}

.mobile-why-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 16px;
}

.mobile-why-block.open .mobile-why-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0 16px 16px;
}

.mobile-why-body p {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #c0a88a;
}

.mobile-why-body b {
    color: #e0cdb8;
}

.mobile-landing-footer p {
    margin: 0;
    font-size: 11px;
    color: #6b5a4a;
}

/* ============================================
   BETA BANNER (перенесён в feedback-corner)
   ============================================ */
#beta-banner {
    position: relative;
    bottom: auto;
    left: auto;
    z-index: 90;
    max-width: 280px;
    padding: 7px 14px;
    font-size: 11px;
    color: #7a5c00;
    background: rgba(255, 248, 225, 0.93);
    border: 1px solid #f0d88a;
    border-radius: 10px;
    line-height: 1.45;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 6px;
}

/* ============================================
   ПОДРОБНАЯ СТАТИСТИКА В БОКОВОЙ КАРТОЧКЕ
   ============================================ */
.profile-stats-detailed {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(138, 88, 54, 0.2);
}

.profile-stat-row-mini {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 2px 0;
    color: #8a7565;
}

.profile-stat-row-mini span:last-child {
    font-weight: 700;
    color: #5a3a1a;
}

.profile-stats-open-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #8a5836 0%, #6b3f25 100%);
    color: #fff8ec;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(74, 48, 24, 0.25);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.profile-stats-open-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(74, 48, 24, 0.32);
}

.profile-stats-open-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(74, 48, 24, 0.25);
}

/* ============================================
   ТАБЛИЦА ЛИДЕРОВ
   ============================================ */
/* Вкладки лидерборда (Люди / Модели) — v1.6 */
.leaderboard-tabs {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 8px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.95);
}
.leaderboard-tab-btn {
    flex: 1;
    padding: 5px 8px;
    line-height: 1.5;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: rgba(138, 88, 54, 0.08);
    color: #6b4a30;
    transition: background 0.15s ease, color 0.15s ease;
}
.leaderboard-tab-btn:hover {
    background: rgba(138, 88, 54, 0.18);
}
.leaderboard-tab-btn.active {
    background: #8a5836;
    color: #fff;
}

/* Список версий модели в профиле — v1.6 */
.mp-versions-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mp-version-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
    background: rgba(138, 88, 54, 0.06);
}
.mp-version-id {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #3a2b20;
}
.mp-version-stat {
    font-size: 11px;
    color: #8a5836;
    font-weight: 600;
    min-width: 46px;
    text-align: right;
}

/* Поля админ-редактора вида модели — v1.6 */
.mae-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.mae-field > label {
    flex: 0 0 110px;
    margin: 0;
}
.mae-field > input,
.mae-field > select {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid rgba(138, 88, 54, 0.4);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #3a2b20;
}

/* Строки предложения «добавить игру в память» — v1.6 (фича 3) */
.bot-memory-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(138, 88, 54, 0.15);
}
.bot-memory-name {
    color: #3a2b20;
    font-size: 14px;
    font-weight: 600;
}
.bot-memory-save-btn {
    padding: 5px 14px;
    font-size: 13px;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
    background: rgba(138, 88, 54, 0.05);
}

.leaderboard-row.leaderboard-clickable {
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.leaderboard-row.leaderboard-clickable:hover {
    background: rgba(138, 88, 54, 0.18);
    transform: translateX(2px);
}

.leaderboard-row.leaderboard-me {
    background: rgba(138, 88, 54, 0.15);
    font-weight: 700;
}

.leaderboard-pos {
    min-width: 22px;
    text-align: center;
    font-weight: 700;
}

.leaderboard-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #3a2b20;
}

.leaderboard-xp {
    font-size: 11px;
    color: #8a5836;
    font-weight: 600;
    min-width: 50px;
    text-align: right;
}

.leaderboard-wr {
    font-size: 11px;
    color: #666;
    min-width: 30px;
    text-align: right;
}

/* ============================================
   УВЕДОМЛЕНИЕ О ДОСТИЖЕНИИ
   ============================================ */
#achievement-notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    animation: achFadeIn 0.5s ease-out;
    pointer-events: none;
}

#achievement-notification.achievement-fade-out {
    animation: achFadeOut 0.5s ease-out forwards;
}

.achievement-content {
    text-align: center;
    z-index: 2;
}

.achievement-icon {
    font-size: 80px;
    animation: achBounce 0.6s ease-out;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}

.achievement-title {
    font-size: 28px;
    color: #ffd700;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 12px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 2px 4px rgba(0,0,0,0.5);
    animation: achSlideUp 0.6s ease-out 0.2s both;
}

.achievement-name {
    font-size: 42px;
    font-weight: 900;
    margin-top: 8px;
    text-shadow: 0 0 30px currentColor, 0 2px 4px rgba(0,0,0,0.5);
    animation: achSlideUp 0.6s ease-out 0.4s both;
}

.achievement-subtitle {
    font-size: 16px;
    color: #ccc;
    margin-top: 8px;
    animation: achSlideUp 0.6s ease-out 0.6s both;
}

.achievement-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, transparent 70%);
    animation: achPulse 1.5s ease-in-out infinite;
}

.achievement-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}

.achievement-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color, #ffd700);
    animation: achParticle 1.5s ease-out var(--delay, 0s) both;
}

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

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

@keyframes achBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

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

@keyframes achPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.2; }
}

@keyframes achParticle {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }
}
.auth-panel {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 10px 0;
}

.auth-panel input {
    width: 100%;
    box-sizing: border-box;
}

.auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.auth-actions button {
    min-height: 34px;
    border-radius: 8px;
}

.auth-status {
    font-size: 12px;
    line-height: 1.35;
    color: #7a5a47;
    text-align: center;
    max-width: 340px;
    order: 8;
}

.special-name-hint {
    min-height: 20px;
    width: 100%;
    max-width: 340px;
    font-size: 12px;
    line-height: 16px;
    color: #b88312;
    text-align: center;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.special-name-hint.visible {
    visibility: visible;
}

.special-name-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.special-name-actions button {
    border: 1px solid rgba(184, 131, 18, 0.35);
    border-radius: 999px;
    background: rgba(255, 248, 226, 0.85);
    color: #8a5d0f;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
}

.special-name-actions button.active {
    background: #b88312;
    color: #fff8e2;
}

.name-panel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: min(100%, 340px);
    order: 7;
}

.name-panel-actions button,
#openAuthModalBtn {
    min-height: 44px;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.auth-modal-content {
    max-width: 420px;
}

.auth-modal-body {
    display: grid;
    gap: 12px;
    padding: 20px 24px;
}

.auth-modal-body input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 2px solid #8a5836;
    border-radius: 8px;
    font-size: 16px;
}

.auth-modal-note {
    margin: 0 0 4px;
    color: #5d4638;
    line-height: 1.4;
}

.auth-modal-actions {
    gap: 8px;
    flex-wrap: wrap;
}


/* ========== MOBILE: PORTRAIT-MODE OVERLAY ========== */
#rotate-device-overlay {
    display: none;
}

/* Показываем оверлей только когда УЗКИЙ экран в портрете — т.е. телефон.
   Планшеты в портрете (768-1024px) и десктопы не получают эту заглушку,
   потому что у них достаточно места чтобы играть как есть. */
@media (orientation: portrait) and (max-width: 600px) {
    #rotate-device-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 999999;
        background: linear-gradient(135deg, #2b1d12 0%, #4a3322 100%);
        align-items: center;
        justify-content: center;
        padding: 24px;
        text-align: center;
        color: #e3c6b2;
    }
    /* При показанном оверлее прячем всё остальное содержимое body */
    body > *:not(#rotate-device-overlay) {
        display: none !important;
    }

    /* Набор текста на телефоне идёт через самописную клавиатуру (keyboard.js),
       которая не перекрывает экран как родная. Поэтому прежний костыль с
       раскрытием портрета во время набора и подсказка «поверните для набора»
       больше не нужны и удалены. */
}

.rotate-device-overlay__inner {
    max-width: 320px;
}
.rotate-device-overlay__icon {
    font-size: 80px;
    margin-bottom: 16px;
    animation: rotateDeviceHint 2s ease-in-out infinite;
}
@keyframes rotateDeviceHint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}
.rotate-device-overlay__title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}
.rotate-device-overlay__hint {
    font-size: 14px;
    opacity: 0.85;
    line-height: 1.4;
}