/* style.css — Стили для LifeGame */
/* На ПК — контент внутри рамки телефона, на мобильных — полный экран */

/* === Сброс и базовые стили === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Тёмный фон за рамкой телефона на ПК */
    background: #1a1a2e;
    position: relative;
    overflow: hidden;
}

/* === Рамка телефона (видна только на ПК) === */
.phone-frame {
    /* Размеры iPhone-подобной рамки */
    width: 390px;
    height: 844px;
    /* Чёрная рамка телефона */
    background: #000;
    border-radius: 50px;
    padding: 12px;
    /* Тень от телефона */
    box-shadow:
        0 0 0 2px #333,
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 2px #222;
    position: relative;
    overflow: hidden;
}

/* Вырез камеры сверху (Dynamic Island) */
.phone-frame::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 32px;
    background: #000;
    border-radius: 20px;
    z-index: 100;
}

/* === Экран телефона (внутренняя область) === */
.phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 40px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Светло-голубой градиентный фон экрана */
    background: linear-gradient(135deg, #e8f4f8 0%, #f0f4f8 50%, #e8f0f8 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 30px;
}

/* Скрываем скроллбар внутри экрана телефона */
.phone-screen::-webkit-scrollbar {
    display: none;
}

/* === Фоновые декоративные элементы === */
.bg-decoration {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    opacity: 0.08;
    pointer-events: none;
}

.bg-left {
    left: -80px;
    bottom: -40px;
    background: linear-gradient(135deg, #2c5aa0, #4a90d9);
}

.bg-right {
    right: -80px;
    bottom: -40px;
    background: linear-gradient(135deg, #4a90d9, #6bb5e0);
}

/* === Основная карточка === */
.card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 32px 24px;
    width: 100%;
    max-width: 340px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* === Логотип === */
.logo {
    margin-bottom: 24px;
}

.logo-icon {
    font-size: 52px;
    margin-bottom: 4px;
    transition: transform 0.3s ease;
}

.logo-icon:hover {
    transform: scale(1.1) rotate(5deg);
}

.logo-text {
    font-size: 28px;
    font-weight: 700;
    color: #1a4b8c;
    letter-spacing: 0.5px;
}

/* Подзаголовок под логотипом */
.logo-subtitle {
    font-size: 12px;
    color: #6b7b8d;
    margin-top: 4px;
    letter-spacing: 0.3px;
}

/* === Группа ввода (поле + иконка) === */
.input-group {
    position: relative;
    margin-bottom: 14px;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.5;
}

.input-group input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid #dde3ea;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    background: #fafbfc;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.input-group input::placeholder {
    color: #a0aab4;
}

.input-group input:focus {
    border-color: #3b82c4;
    box-shadow: 0 0 0 3px rgba(59, 130, 196, 0.15);
    background: white;
}

/* === Основная кнопка === */
.btn-primary {
    width: 100%;
    background: linear-gradient(to right, #1a5bb5, #2d7dd2);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    transition: background 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;
    display: block;
    text-decoration: none;
    text-align: center;
}

.btn-primary:hover {
    background: linear-gradient(to right, #154a96, #2468b0);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(26, 91, 181, 0.35);
}

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

/* Кнопка подтверждения выхода из игры (красная) */
.btn-leave-confirm {
    background: linear-gradient(to right, #dc2626, #ef4444) !important;
}
.btn-leave-confirm:hover {
    background: linear-gradient(to right, #b91c1c, #dc2626) !important;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.35);
}

/* Кнопка отмены (серая) */
.btn-leave-cancel {
    width: 100%;
    background: transparent;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 13px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s;
}
.btn-leave-cancel:active {
    background: #f3f4f6;
}

/* Кнопка выхода */
.btn-logout {
    background: linear-gradient(to right, #c0392b, #e74c3c);
    margin-top: 16px;
}

.btn-logout:hover {
    background: linear-gradient(to right, #a93226, #c0392b);
    box-shadow: 0 4px 15px rgba(192, 57, 43, 0.35);
}

/* === Разделитель === */
.divider {
    height: 1px;
    background: #e8ecf0;
    margin: 20px 0;
}

/* === Ссылки === */
.link-register {
    display: block;
    color: #2d7dd2;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
    transition: color 0.2s ease;
}

.link-register:hover {
    color: #1a5bb5;
    text-decoration: underline;
}

.link-guest {
    display: block;
    color: #6b7b8d;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
}

.link-guest:hover {
    color: #4a5a6b;
}

/* === Flash-сообщения (статичные, для страниц логина/регистрации) === */
.alert {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    text-align: left;
}

.alert-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* === Toast-уведомления (плавно сверху) === */
.toast-container {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    max-width: 390px;
    width: 100%;
    pointer-events: none;
}

.toast {
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    transform: translateY(-80px);
    opacity: 0;
    animation: toastIn 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards,
               toastOut 0.4s cubic-bezier(0.32, 0.72, 0, 1) 3s forwards;
}

/* Задержка для второго и третьего тоста */
.toast:nth-child(2) { animation-delay: 0.1s, 3.1s; }
.toast:nth-child(3) { animation-delay: 0.2s, 3.2s; }

.toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.toast-text {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

/* Варианты: успех */
.toast-success {
    background: white;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.toast-success .toast-icon {
    background: #dcfce7;
    color: #16a34a;
}

/* Варианты: ошибка */
.toast-error {
    background: white;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.toast-error .toast-icon {
    background: #fee2e2;
    color: #dc2626;
}

/* Варианты: информация */
.toast-info {
    background: white;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
.toast-info .toast-icon {
    background: #dbeafe;
    color: #2563eb;
}

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

@keyframes toastOut {
    to { transform: translateY(-80px); opacity: 0; }
}

/* === Приветственный блок === */
.welcome {
    padding: 16px 0;
}

.welcome h2 {
    color: #1a4b8c;
    font-size: 22px;
    margin-bottom: 8px;
}

.welcome-sub {
    color: #6b7b8d;
    font-size: 14px;
}

/* === Ссылка на админ-вход (на странице логина) === */
.link-admin {
    display: block;
    color: #8b5cf6;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.link-admin:hover {
    color: #6d28d9;
    text-decoration: underline;
}

/* === Админская страница — тёмная тема экрана === */
.admin-screen {
    /* Тёмный градиент вместо светлого */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* Карточка админа — тёмная с лёгкой прозрачностью */
.admin-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Белый текст логотипа на тёмном фоне */
.admin-card .logo-text {
    color: #e2e8f0;
}

/* Подзаголовок админа — фиолетовый акцент */
.admin-subtitle {
    color: #a78bfa;
    font-weight: 500;
}

/* Поля ввода на тёмном фоне */
.admin-card .input-group input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

.admin-card .input-group input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.admin-card .input-group input:focus {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
    background: rgba(255, 255, 255, 0.12);
}

/* Кнопка админа — фиолетовый градиент */
.btn-admin {
    background: linear-gradient(to right, #7c3aed, #8b5cf6);
}

.btn-admin:hover {
    background: linear-gradient(to right, #6d28d9, #7c3aed);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

/* Ссылки на тёмном фоне — белые */
.admin-card .link-register {
    color: #a78bfa;
}

.admin-card .link-register:hover {
    color: #c4b5fd;
}

/* Разделитель на тёмном фоне */
.admin-card .divider {
    background: rgba(255, 255, 255, 0.1);
}

/* Flash-сообщения на тёмном фоне */
.admin-card .alert-error {
    background: rgba(185, 28, 28, 0.15);
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.2);
}

.admin-card .alert-success {
    background: rgba(22, 101, 52, 0.15);
    color: #86efac;
    border-color: rgba(134, 239, 172, 0.2);
}

/* Декоративные круги на тёмном фоне — ярче */
.admin-screen .bg-decoration {
    opacity: 0.12;
}

.admin-screen .bg-left {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.admin-screen .bg-right {
    background: linear-gradient(135deg, #8b5cf6, #c4b5fd);
}

/* === Футер внизу экрана телефона === */
.phone-footer {
    margin-top: 20px;
    font-size: 11px;
    color: #9ca3af;
    z-index: 1;
}

.phone-footer a {
    color: #9ca3af;
    text-decoration: none;
}

.phone-footer a:hover {
    color: #6b7b8d;
    text-decoration: underline;
}

/* =============================================
   СТРАНИЦА КОМНАТ
   ============================================= */

/* Экран комнат — скролл сверху вниз, без центрирования */
.rooms-screen {
    justify-content: flex-start;
    padding: 60px 16px 20px;
    gap: 12px;
}

/* === Шапка страницы комнат === */
.rooms-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    z-index: 1;
}

.rooms-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rooms-logo {
    font-size: 28px;
}

.rooms-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a4b8c;
}

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

.rooms-user {
    font-size: 12px;
    color: #6b7b8d;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Кнопка выхода в шапке */
.btn-header-logout {
    background: #e74c3c;
    color: white;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-header-logout:hover {
    background: #c0392b;
}

/* Контейнер flash-сообщений на странице комнат */
.rooms-alerts {
    width: 100%;
    z-index: 1;
}

/* === Кнопки действий (создать, войти по коду) === */
.rooms-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 1;
}

.btn-admin-tools-wide {
    width: 100%;
    margin-bottom: 8px;
    height: 46px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef4ff, #d8e7ff);
    color: #1a4b8c;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(26, 75, 140, 0.16);
    transition: transform 0.15s, box-shadow 0.2s;
    text-align: center;
}

.btn-admin-tools-wide:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(26, 75, 140, 0.2);
}

.btn-admin-tools-wide:active {
    transform: translateY(0);
}

.btn-action {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.btn-action:hover {
    transform: translateY(-1px);
}

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

/* Кнопка «Создать комнату» */
.btn-create {
    background: linear-gradient(to right, #1a5bb5, #2d7dd2);
    color: white;
}

.btn-create:hover {
    background: linear-gradient(to right, #154a96, #2468b0);
}

/* Кнопка «Войти по коду» */
.btn-code {
    background: linear-gradient(to right, #6b7b8d, #8696a7);
    color: white;
}

.btn-code:hover {
    background: linear-gradient(to right, #5a6a7c, #758596);
}

.admin-tools-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.admin-tools-link {
    display: block;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fbff;
    border: 1px solid #d8e6f5;
    color: #1a4b8c;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}

/* === Список комнат === */
.room-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
    padding-bottom: 10px;
}

/* Заголовок секции комнат («Ваша группа», «Все комнаты») */
.room-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #6b7b8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 2px 0;
}

/* === Карточка комнаты === */
.room-card {
    background: white;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #e8ecf0;
}

/* Заголовок карточки: название + счётчик игроков */
.room-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.room-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a4b8c;
}

.room-players {
    font-size: 13px;
    color: #6b7b8d;
    font-weight: 500;
}

/* Строка с кодом приглашения */
.room-code-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.room-code-label {
    font-size: 12px;
    color: #6b7b8d;
}

.room-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    font-weight: 700;
    color: #2d7dd2;
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 2px;
}

/* === Список участников комнаты (для админа) === */
.room-members {
    border-top: 1px solid #e8ecf0;
    margin-top: 6px;
    padding-top: 8px;
    margin-bottom: 8px;
}

.room-members-title {
    font-size: 11px;
    color: #6b7b8d;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.room-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    gap: 8px;
    min-width: 0;
}

.member-email {
    font-size: 13px;
    color: #333;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Кнопка кика игрока (маленький крестик) */
.btn-kick {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.btn-kick:hover {
    background: #fee2e2;
}

/* === Кнопки действий в карточке комнаты === */
.room-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.btn-room {
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.btn-room:hover {
    transform: translateY(-1px);
}

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

/* Кнопка «Присоединиться» (зелёная) */
.btn-join {
    background: linear-gradient(to right, #16a34a, #22c55e);
    color: white;
    flex: 1;
}

.btn-join:hover {
    background: linear-gradient(to right, #15803d, #16a34a);
}

.btn-join:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

/* Кнопка «Покинуть» (серая) */
.btn-leave {
    background: linear-gradient(to right, #6b7b8d, #8696a7);
    color: white;
    flex: 1;
}

.btn-leave:hover {
    background: linear-gradient(to right, #5a6a7c, #758596);
}

/* Кнопка «Переименовать» (голубая) */
.btn-rename {
    background: #eff6ff;
    color: #2d7dd2;
    border: 1px solid #bfdbfe;
}

.btn-rename:hover {
    background: #dbeafe;
}

/* Кнопка «Удалить» (красная) */
.btn-delete {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.btn-delete:hover {
    background: #fee2e2;
}

/* Форма без отступов (для inline кнопок) */
.inline-form {
    display: inline;
    margin: 0;
    padding: 0;
}

/* === Пустой список комнат === */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    z-index: 1;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.empty-state p {
    color: #6b7b8d;
    font-size: 16px;
    margin-bottom: 4px;
}

.empty-hint {
    font-size: 13px !important;
    color: #9ca3af !important;
}

/* === Кликабельная карточка-ссылка === */
.room-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.room-card-link .room-card {
    transition: transform 0.15s, box-shadow 0.15s;
}

.room-card-link:hover .room-card {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.room-card-link:active .room-card {
    transform: translateY(0);
}

/* Статус пользователя в карточке (маленькая метка) */
.room-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 4px;
}

.room-status-joined {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.room-status-full {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* === Карточка комнаты «В игре» — затенённая === */
.room-card-in-game {
    background: #f3f4f6;
    border-color: #d1d5db;
    opacity: 0.85;
}

.room-card-in-game .room-name {
    color: #6b7b8d;
}

/* Статус «В игре» — оранжевый бейдж */
.room-status-ingame {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.room-status-archived {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

.room-status-room-detail {
    margin-top: 8px;
    width: fit-content;
}

/* Ряд: статус «В игре» + кнопка «Наблюдать» */
.room-card-game-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

/* Левая часть ряда «В игре»: статус + таймер */
.room-card-game-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Таймер длительности игры на карточке комнаты */
.room-game-timer {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/* Кнопка «Наблюдать» на карточке комнаты */
.btn-observe {
    background: #eff6ff;
    color: #2d7dd2;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-observe:hover {
    background: #dbeafe;
}

/* Бейдж «Хост» рядом с именем участника */
.host-badge {
    display: inline-block;
    background: #fef3c7;
    color: #b45309;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.3px;
}

/* Строка с кодом приглашения и кнопкой */
.room-invite-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}
.room-invite-row .room-detail-code {
    font-size: 12px;
    color: #6b7280;
}

/* Кнопка «Пригласить» */
.btn-copy-link {
    padding: 4px 10px;
    border-radius: 6px;
    background: #2d7dd2;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.btn-copy-link:active {
    background: #1b5fa0;
}

/* Чекбокс «Частная комната» */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    cursor: pointer;
}
.checkbox-input {
    width: 18px;
    height: 18px;
    accent-color: #2d7dd2;
    cursor: pointer;
}
.checkbox-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a2b4a;
}
.checkbox-hint {
    width: 100%;
    font-size: 12px;
    color: #9ca3af;
    margin-top: -4px;
}

/* Бейдж приватности на карточке комнаты */
.room-badge-private {
    font-size: 14px;
    vertical-align: middle;
}

/* Баннер «Вы наблюдаете за игрой» — прикреплён над навбаром снизу */
.spectator-banner {
    width: 100%;
    background: linear-gradient(135deg, #64748b, #475569);
    color: white;
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    border-top: 1px solid #4a5568;
}

.observer-screen .dash-content {
    gap: 14px;
}

.observer-card {
    cursor: default;
}

.observer-panel {
    display: block;
}

.observer-note-row {
    margin: -4px 0 10px 42px;
    color: #6b7b8d;
    font-size: 12px;
}

.observer-section-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(26, 75, 140, 0.08);
}

.observer-section-title {
    margin-bottom: 12px;
    color: #1a4b8c;
    font-size: 16px;
    font-weight: 700;
}

.observer-subtitle {
    margin: 8px 0 10px;
    color: #6b7b8d;
    font-size: 12px;
    font-weight: 600;
}

.observer-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.observer-metric-item {
    padding: 12px 10px;
    border-radius: 14px;
    background: #f8fbff;
    border: 1px solid #dbe6f3;
    text-align: center;
}

.observer-metric-item strong {
    display: block;
    color: #1a4b8c;
    font-size: 20px;
    font-weight: 700;
}

.observer-metric-item span {
    display: block;
    margin-top: 4px;
    color: #6b7b8d;
    font-size: 11px;
    line-height: 1.3;
}

/* === Кнопка «Назад» === */
.btn-back {
    color: #2d7dd2;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s;
}

.btn-back:hover {
    color: #1a5bb5;
}

/* =============================================
   СТРАНИЦА ВНУТРИ КОМНАТЫ (room_detail)
   ============================================= */

/* Карточка с деталями комнаты */
.room-detail-card {
    background: white;
    border-radius: 16px;
    padding: 24px 20px;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    z-index: 1;
}

/* Шапка с названием комнаты */
.room-detail-header {
    text-align: center;
    margin-bottom: 4px;
}

.room-detail-icon {
    font-size: 40px;
    margin-bottom: 8px;
}

.room-detail-name {
    font-size: 22px;
    font-weight: 700;
    color: #1a4b8c;
    margin-bottom: 8px;
}

.room-detail-info {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 13px;
    color: #6b7b8d;
}

.room-detail-code strong {
    font-family: 'Courier New', Courier, monospace;
    color: #2d7dd2;
    letter-spacing: 1px;
}

/* Плашка периода комнаты (период 0 до старта игры). */
.room-period-badge {
    margin-top: 12px;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 700;
}

.room-period-badge-active {
    background: #ecfdf3;
    border-color: #bbf7d0;
    color: #166534;
}

.room-period-hint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
}

/* Список участников */
.room-detail-members {
    margin: 4px 0;
}

.room-detail-members-title {
    font-size: 13px;
    font-weight: 600;
    color: #6b7b8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* Сетка команд в периоде 0. */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.team-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 10px;
    background: #fafcff;
}

.team-card-summary {
    list-style: none;
    cursor: pointer;
}

.team-card-summary::-webkit-details-marker {
    display: none;
}

.team-card-summary::marker {
    display: none;
}

.team-card-dropzone {
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.team-card-dropzone-active {
    border-color: #60a5fa;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

.team-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.team-card-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.team-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.team-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e3a8a;
}

.team-card-count {
    font-size: 11px;
    color: #475569;
    font-weight: 600;
}

.team-card-chevron {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.team-card[open] .team-card-chevron {
    transform: rotate(180deg);
    background: #dbeafe;
    border-color: #93c5fd;
}

.team-card-body {
    padding-top: 4px;
}

.period-zero-panel {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbeafe;
}

.period-zero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}

.period-zero-row:last-child {
    margin-bottom: 0;
}

.period-zero-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.period-zero-value {
    font-size: 12px;
    color: #0f172a;
    text-align: right;
}

/* Content cabinet */
.content-desktop-body {
    min-height: 100vh;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    background:
        radial-gradient(circle at top left, rgba(83, 143, 255, 0.18), transparent 34%),
        radial-gradient(circle at top right, rgba(44, 181, 125, 0.14), transparent 28%),
        linear-gradient(180deg, #eef4ff 0%, #f7f9fc 48%, #eef3fb 100%);
}

.content-desktop-shell {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
}

.content-desktop-bg {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    filter: blur(16px);
    opacity: 0.38;
    pointer-events: none;
    z-index: 0;
}

.content-desktop-bg-left {
    top: -120px;
    left: -80px;
    background: linear-gradient(135deg, rgba(52, 120, 246, 0.28), rgba(91, 171, 255, 0.14));
}

.content-desktop-bg-right {
    top: 120px;
    right: -120px;
    background: linear-gradient(135deg, rgba(21, 153, 114, 0.2), rgba(116, 226, 183, 0.12));
}

.content-desktop-page {
    position: relative;
    z-index: 1;
    width: min(1545px, calc(100% - 48px));
    margin: 0 auto;
    padding: 28px 0 48px;
}

.content-header-panel,
.content-table-card,
.content-sidebar-panel,
.content-editor-card {
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(22, 39, 74, 0.08);
    box-shadow: 0 20px 45px rgba(35, 58, 104, 0.08);
}

.content-header-panel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    border-radius: 28px;
    margin-bottom: 18px;
}

.content-header-copy {
    min-width: 0;
}

.content-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #3569d4;
    margin-bottom: 10px;
}

.content-page-title {
    margin: 0;
    font-size: 34px;
    line-height: 1.1;
    color: #11284d;
}

.content-page-subtitle {
    margin: 10px 0 0;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.6;
    color: #5c6f92;
}

.content-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.content-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.content-summary-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(22, 39, 74, 0.08);
    box-shadow: 0 12px 28px rgba(35, 58, 104, 0.06);
}

.content-summary-dropdown {
    padding: 0;
    overflow: hidden;
}

.content-summary-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    padding-right: 44px;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.content-summary-toggle::-webkit-details-marker {
    display: none;
}

.content-summary-toggle::after {
    content: '▾';
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 22px;
    line-height: 1;
    color: #6a7da0;
    transition: transform 0.18s ease;
}

.content-summary-dropdown[open] .content-summary-toggle::after {
    transform: rotate(180deg);
}

.content-summary-dropdown-body {
    display: grid;
    gap: 8px;
    padding: 0 20px 18px;
    border-top: 1px solid rgba(22, 39, 74, 0.08);
    background: rgba(243, 247, 255, 0.42);
}

.content-summary-dropdown-item {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(22, 39, 74, 0.08);
}

.content-summary-dropdown-item strong {
    font-size: 13px;
    color: #17305d;
}

.content-summary-dropdown-item span,
.content-summary-dropdown-empty {
    font-size: 13px;
    color: #5f7092;
}

.content-summary-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6a7da0;
}

.content-summary-value {
    font-size: 24px;
    font-weight: 800;
    color: #11284d;
}

.content-summary-note {
    font-size: 13px;
    color: #667a9e;
}

.content-workspace,
.content-products-layout,
.content-editor-shell {
    display: grid;
    gap: 18px;
}

.content-workspace {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    align-items: start;
}

.content-main-panel {
    display: grid;
    gap: 18px;
}

.content-sidebar-panel,
.content-table-card,
.content-editor-card {
    border-radius: 26px;
    padding: 24px;
}

.content-sidebar-panel {
    position: sticky;
    top: 24px;
}

.content-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.content-section-title {
    font-size: 20px;
    font-weight: 800;
    color: #142a4f;
}

.content-section-subtitle {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #64789d;
}

.content-create-form,
.content-version-actions,
.content-header-actions,
.content-form-footer,
.content-table-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.content-create-form {
    margin-bottom: 16px;
}

.content-create-form input,
.content-form input,
.content-form textarea,
.content-form select {
    width: 100%;
    border: 1px solid rgba(22, 39, 74, 0.14);
    border-radius: 14px;
    padding: 13px 15px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.96);
    color: #122a4f;
}

.content-create-form input:focus,
.content-form input:focus,
.content-form textarea:focus,
.content-form select:focus {
    outline: none;
    border-color: rgba(53, 105, 212, 0.5);
    box-shadow: 0 0 0 4px rgba(53, 105, 212, 0.08);
}

.content-create-form input {
    flex: 1 1 200px;
}

.content-version-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.content-version-card {
    padding: 16px;
    border-radius: 20px;
    background: rgba(244, 247, 255, 0.94);
    border: 1px solid rgba(22, 39, 74, 0.08);
}

.content-version-card-active {
    border-color: rgba(53, 105, 212, 0.35);
    box-shadow: 0 0 0 3px rgba(53, 105, 212, 0.08);
}

.content-version-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.content-version-name {
    font-size: 17px;
    font-weight: 800;
    color: #132b50;
}

.content-version-meta {
    margin-top: 5px;
    font-size: 13px;
    color: #6a7da0;
}

.content-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    color: #15305a;
    background: #e6edf9;
}

.content-status-published,
.content-status-active {
    color: #0d6b44;
    background: #dcfce7;
}

.content-status-draft {
    color: #8a5a00;
    background: #fef3c7;
}

.content-status-archived,
.content-status-inactive {
    color: #6b7280;
    background: #e5e7eb;
}

.content-version-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.content-fact-box {
    padding: 16px;
    border-radius: 18px;
    background: rgba(243, 247, 255, 0.96);
    border: 1px solid rgba(22, 39, 74, 0.08);
}

.content-fact-box span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7fa3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.content-fact-box strong {
    font-size: 18px;
    color: #10274b;
}

.content-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.content-table {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
}

.content-table thead th {
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    color: #6b7fa3;
    border-bottom: 1px solid rgba(22, 39, 74, 0.08);
}

.content-table tbody td {
    padding: 16px;
    vertical-align: top;
    color: #1c3458;
    border-bottom: 1px solid rgba(22, 39, 74, 0.08);
}

.content-table tbody tr:last-child td {
    border-bottom: none;
}

.content-table-primary {
    font-size: 15px;
    font-weight: 800;
    color: #132b50;
}

.content-table-secondary {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: #677b9e;
}

.content-table-code {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #2e61c8;
    font-size: 12px;
    font-weight: 800;
}

.content-table-actions-col {
    width: 220px;
}

.content-table-actions form {
    display: inline-flex;
    margin: 0;
}

.content-empty {
    padding: 18px;
    border-radius: 18px;
    background: rgba(244, 247, 255, 0.96);
    color: #5f7090;
    font-size: 14px;
}

.content-products-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, 420px);
    align-items: start;
}

.content-editor-shell {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    align-items: start;
}

.content-editor-sidebar {
    padding: 8px 4px;
}

.content-sidebar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.content-sidebar-actions form {
    margin: 0;
}

.content-editor-sidebar:has(.content-sidebar-actions) > a.btn-team-action {
    display: none;
}

.content-editor-card-sticky {
    position: sticky;
    top: 24px;
}

.content-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.content-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.content-version-rules-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.content-inline-actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
}

.content-field {
    min-width: 0;
}

.content-field label,
.content-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #31476f;
}

.content-field-full {
    grid-column: 1 / -1;
}

.content-field-check {
    display: flex;
    align-items: flex-end;
}

.content-field-help {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.45;
    color: #667a9e;
}

.content-field-help code,
.content-help-item code {
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef4ff;
    color: #2e61c8;
    font-size: 12px;
    font-weight: 700;
}

.content-field-conditional {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(243, 247, 255, 0.78);
    border: 1px solid rgba(38, 82, 158, 0.1);
}

.content-help-panel {
    margin-top: 18px;
    padding: 18px 20px;
}

.content-help-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.content-help-item {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(243, 247, 255, 0.92);
    border: 1px solid rgba(22, 39, 74, 0.08);
}

.content-help-item strong {
    font-size: 13px;
    color: #17305d;
}

.content-help-item span {
    font-size: 13px;
    line-height: 1.5;
    color: #64789d;
}

.content-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

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

.content-checkbox-stack {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 1180px) {
    .content-summary-grid,
    .content-version-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content-workspace,
    .content-products-layout,
    .content-editor-shell {
        grid-template-columns: 1fr;
    }

    .content-sidebar-panel,
    .content-editor-card-sticky {
        position: static;
    }

}

@media (max-width: 768px) {
    .content-desktop-page {
        width: calc(100% - 20px);
        padding: 16px 0 26px;
    }

    .content-header-panel,
    .content-sidebar-panel,
    .content-table-card,
    .content-editor-card {
        padding: 18px;
        border-radius: 22px;
    }

    .content-header-panel,
    .content-section-head,
    .content-header-actions,
    .content-create-form,
    .content-version-top,
    .content-version-actions,
    .content-form-footer,
    .content-table-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .content-page-title {
        font-size: 28px;
    }

    .content-summary-grid,
    .content-version-facts,
    .content-form-grid {
        grid-template-columns: 1fr;
    }

    .content-sidebar-actions {
        margin-top: 18px;
        flex-direction: column;
        align-items: stretch;
    }

    .content-table {
        min-width: 0;
    }

    .content-table thead {
        display: none;
    }

    .content-table,
    .content-table tbody,
    .content-table tr,
    .content-table td {
        display: block;
        width: 100%;
    }

    .content-table tbody tr {
        padding: 14px 0;
        border-bottom: 1px solid rgba(22, 39, 74, 0.08);
    }

    .content-table tbody tr:last-child {
        border-bottom: none;
    }

    .content-table tbody td {
        padding: 8px 0;
        border-bottom: none;
    }

    .content-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #7284a5;
    }

    .content-field-check {
        align-items: stretch;
    }
}

.period-zero-status {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.period-zero-status-ready {
    background: #dcfce7;
    color: #166534;
}

.period-zero-status-pending {
    background: #fef3c7;
    color: #92400e;
}

.period-zero-current-team {
    margin: 10px 0 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.period-zero-note {
    margin: 8px 0;
    font-size: 12px;
    line-height: 1.45;
    color: #334155;
}

.period-zero-products {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 10px;
}

.period-zero-goal-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 8px;
}

.period-zero-goal-rule {
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid #dbeafe;
    background: #f8fbff;
}

.period-zero-goal-rule-title {
    font-size: 12px;
    font-weight: 700;
    color: #1d4ed8;
}

.period-zero-goal-rule-detail {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: #475569;
}

.period-zero-goal-preview {
    display: none;
}

.period-zero-goal-preview-active {
    display: block;
}

.period-zero-bank-preview {
    display: none;
}

.period-zero-bank-preview-active {
    display: flex;
}

.period-zero-bank-empty-hidden {
    display: none;
}

.period-zero-goal-empty-hidden {
    display: none;
}

.period-zero-product {
    padding: 7px 8px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 12px;
}

.period-zero-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.period-zero-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.period-zero-choice-grid.period-zero-choice-grid-expanded .period-zero-choice-card-hidden {
    display: flex;
}

.period-zero-choice-card {
    width: 100%;
    min-height: 88px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #f8fbff;
    color: #1f2a44;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    text-align: left;
    cursor: pointer;
}

.period-zero-choice-card-hidden {
    display: none;
}

.period-zero-choice-card-active {
    border-color: #60a5fa;
    background: #eff6ff;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35);
}

.period-zero-choice-title {
    font-size: 13px;
    font-weight: 700;
    color: #1d4ed8;
}

.period-zero-choice-sub {
    font-size: 11px;
    line-height: 1.4;
    color: #475569;
}

.period-zero-field-label {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}

.btn-team-ready {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.btn-team-reset-ready {
    border-color: #fecaca;
    background: #fff1f2;
    color: #be123c;
}

.btn-team-secondary {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #334155;
}

.btn-team-settings {
    width: 100%;
    margin-top: 8px;
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.bottom-sheet-team-settings {
    max-height: min(80vh, 720px);
    overflow-y: auto;
}

.bottom-sheet-member-actions {
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

.bottom-sheet-invite-link {
    max-width: 520px;
    max-height: min(82vh, 760px);
    overflow: hidden;
}

.invite-sheet-status {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #eef4ff;
    color: #1a4b8c;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.invite-sheet-field {
    margin-bottom: 14px;
}

.invite-sheet-link {
    width: 100%;
    font-size: 13px;
}

.invite-sheet-qr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #dbe6f3;
}

.invite-sheet-qr {
    width: 220px;
    height: 220px;
    object-fit: contain;
    border-radius: 12px;
    background: #ffffff;
    padding: 10px;
    border: 1px solid #d7e3f1;
}

.invite-sheet-qr-caption {
    font-size: 12px;
    color: #6b7b8d;
    text-align: center;
}

.invite-sheet-team-list {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    max-height: calc(82vh - 210px);
    overflow-y: auto;
    padding-right: 4px;
}

.invite-sheet-team-card {
    padding: 14px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #dbe6f3;
}

.invite-sheet-team-title {
    font-size: 14px;
    font-weight: 700;
    color: #16345f;
    margin-bottom: 10px;
}

.invite-sheet-qr-card-compact {
    margin-top: 10px;
    margin-bottom: 0;
    padding: 10px;
    align-items: center;
}

.invite-sheet-qr-small {
    width: 170px;
    height: 170px;
}

.team-sheet-summary {
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.team-leader-badge {
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 9px;
    font-weight: 700;
    vertical-align: middle;
}

.host-badge {
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0c4a6e;
    font-size: 9px;
    font-weight: 700;
    vertical-align: middle;
}

.team-select {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    min-height: 42px;
    font-size: 13px;
    color: #334155;
    background: white;
}

.btn-team-action {
    border: 1px solid #cbd5e1;
    background: white;
    color: #334155;
    border-radius: 10px;
    padding: 10px 12px;
    min-height: 42px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-team-action:hover {
    background: #f8fafc;
}

.btn-team-leader {
    border-color: #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

.btn-member-remove {
    border-color: #fecaca;
    background: #fff1f2;
    color: #be123c;
}

/* Строка участника */
.room-detail-member {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
    min-width: 0;
}

.room-detail-member-draggable {
    cursor: grab;
    touch-action: manipulation;
}

.room-detail-member-selected {
    border-radius: 10px;
    background: #eff6ff;
    outline: 2px solid #93c5fd;
    padding-left: 6px;
    padding-right: 6px;
}

.room-detail-member:last-child {
    border-bottom: none;
}

/* Аватар участника (первая буква email) */
.member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2d7dd2, #4a90d9);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.member-info {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.member-name {
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
}

.member-name-text {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Контекстное меню действий участника (кнопка "⋯"). */
.member-actions-menu {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}

.member-actions-toggle {
    list-style: none;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #dbe3ef;
    background: #f8fbff;
    color: #445;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    user-select: none;
}

.member-actions-toggle::-webkit-details-marker {
    display: none;
}

.member-actions-menu[open] .member-actions-toggle {
    background: #edf4ff;
    border-color: #bcd2f7;
}

.member-actions-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    z-index: 20;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-action-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.member-action-form .btn-team-action,
.member-action-form .btn-kick-detail {
    width: 100%;
}

.member-action-form-move .team-select {
    flex: 1;
}

.member-action-form-move .btn-team-action {
    width: auto;
    white-space: nowrap;
}

/* Кнопка кика на странице комнаты */
.btn-kick-detail {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.btn-kick-detail:hover {
    background: #fee2e2;
}

.member-kick-form {
    margin-left: auto;
    flex-shrink: 0;
}

.btn-kick-icon {
    width: 38px;
    height: 38px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.btn-kick-icon:hover {
    background: #fee2e2;
}

.member-drag-handle {
    margin-left: auto;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

.drag-drop-hint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
}

/* Override old inline player-action styles with the new bottom-sheet trigger. */
.member-actions-trigger {
    margin-left: 8px;
    flex-shrink: 0;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #dbe3ef;
    background: #f8fbff;
    color: #445;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    user-select: none;
}

.member-actions-trigger:hover {
    background: #edf4ff;
    border-color: #bcd2f7;
}

.game-start-loader {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 20, 36, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
}

.game-start-loader.active {
    display: flex;
}

.game-start-loader-card {
    width: min(188px, 100%);
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    text-align: center;
}

.game-start-loader-spinner {
    width: 22px;
    height: 22px;
    margin: 0 auto 8px;
    border-radius: 50%;
    border: 2px solid #dbeafe;
    border-top-color: #2563eb;
    animation: spin-loader 0.9s linear infinite;
}

.game-start-loader-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e3a8a;
}

/* Пустой список участников */
.room-detail-empty {
    text-align: center;
    padding: 20px 0;
    color: #9ca3af;
}

.room-detail-empty p {
    margin-bottom: 4px;
}

/* Кнопки действий внутри комнаты */
.room-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Кнопка «Покинуть» внутри комнаты */
.btn-leave-detail {
    background: linear-gradient(to right, #6b7b8d, #8696a7);
}

.btn-leave-detail:hover {
    background: linear-gradient(to right, #5a6a7c, #758596);
    box-shadow: 0 4px 15px rgba(107, 123, 141, 0.35);
}

/* Кнопка «Присоединиться» внутри комнаты */
.btn-join-detail {
    background: linear-gradient(to right, #16a34a, #22c55e);
}

.btn-join-detail:hover {
    background: linear-gradient(to right, #15803d, #16a34a);
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.35);
}

.btn-join-detail:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Кнопка «Начать игру» */
.btn-start-game {
    background: linear-gradient(to right, #f59e0b, #f97316);
    margin-top: 4px;
}

.btn-start-game:hover {
    background: linear-gradient(to right, #d97706, #ea580c);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
}

/* Админские кнопки внутри комнаты */
.room-admin-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.room-admin-actions-secondary {
    margin-top: 8px;
}

.room-admin-actions .btn-room {
    flex: 1;
    text-align: center;
}

.btn-archive-wide {
    width: 100%;
}

/* inline-form внутри flex — должна растягиваться */
.room-admin-actions .inline-form {
    flex: 1;
    display: flex;
}

.room-admin-actions .inline-form .btn-room {
    width: 100%;
}

/* =============================================
   BOTTOM SHEET (выезд снизу)
   ============================================= */

/* Затемнённый фон — всегда в DOM, скрыт через visibility+opacity */
.bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease;
}

.bottom-sheet-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* Карточка снизу — плавный выезд */
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 12px 24px 32px;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1001;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
}

.bottom-sheet-scrollable {
    max-height: min(78vh, 760px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.bottom-sheet-overlay.active .bottom-sheet {
    transform: translateY(0);
}

/* Ручка для перетаскивания */
.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 0 auto 16px;
}

/* Заголовок bottom sheet */
.bottom-sheet-header {
    text-align: center;
    margin-bottom: 20px;
}

.bottom-sheet-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1a4b8c;
    margin-bottom: 4px;
}

.bottom-sheet-subtitle {
    font-size: 13px;
    color: #6b7b8d;
}

/* Поле ввода кода в bottom sheet */
.code-input-wrapper {
    margin-bottom: 14px;
}

.code-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.code-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #dde3ea;
    border-radius: 12px;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 6px;
    text-align: center;
    color: #1a4b8c;
    background: #fafbfc;
    outline: none;
    text-transform: uppercase;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.code-input::placeholder {
    color: #c5ccd4;
    letter-spacing: 4px;
}

.code-input:focus {
    border-color: #2d7dd2;
    box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.15);
    background: white;
}

/* РљРЅРѕРїРєР° РІ bottom sheet */
.btn-sheet-join {
    margin-top: 0;
}

/* Разделитель «или» */
.bottom-sheet-divider {
    display: flex;
    align-items: center;
    margin: 18px 0;
    color: #9ca3af;
    font-size: 13px;
}

.bottom-sheet-divider::before,
.bottom-sheet-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8ecf0;
}

.bottom-sheet-divider span {
    padding: 0 12px;
}

/* Подсказка */
.bottom-sheet-hint {
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
    margin: 0;
}

/* === Модальные окна (попапы) === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.25s, opacity 0.25s ease;
}

/* Активное состояние попапа */
.modal-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* Карточка попапа */
.modal {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 320px;
    max-width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal-overlay.active .modal {
    transform: translateY(0) scale(1);
}

/* Заголовок попапа */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.modal-header h3 {
    font-size: 18px;
    color: #1a4b8c;
    margin: 0;
}

/* Кнопка закрытия попапа */
.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #6b7b8d;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.modal-close:hover {
    color: #333;
}

/* =============================================
   ДАШБОРД ЭКОНОМИЧЕСКОЙ ИГРЫ (светлая тема)
   ============================================= */

/* Экран дашборда — светлая тема как на других страницах */
.dash-screen {
    justify-content: flex-start;
    padding: 50px 0 0 0 !important;
    gap: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden !important;
    height: 100%;
    min-height: 100%;
    position: relative;
    isolation: isolate;
    --phase-glow-color: rgba(41, 128, 85, 0.12);
}

/* === Шапка: период и раздел === */
.dash-header {
    text-align: center;
    padding: 8px 16px 0;
    flex-shrink: 0;
}

.dash-period {
    font-size: 13px;
    font-weight: 600;
    color: #6b7b8d;
}

.dash-dot {
    font-size: 13px;
    color: #9ca3af;
    margin: 0 6px;
}

.dash-section {
    font-size: 13px;
    font-weight: 700;
    color: #2d7dd2;
    letter-spacing: 1px;
}

/* === Большой таймер === */
.dash-timer {
    text-align: center;
    font-size: 52px;
    font-weight: 800;
    color: #1a4b8c;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 4px;
    padding: 4px 0 8px;
    flex-shrink: 0;
}

.dash-timer-secondary {
    font-size: 30px;
    letter-spacing: 2px;
    padding: 6px 0 10px;
}

/* === Бейджи-уведомления === */
.dash-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 16px 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.dash-team-caption {
    width: 100%;
    margin: -2px 0 12px;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7b8d;
    text-align: center;
    flex-shrink: 0;
}

.dash-team-caption span {
    color: #1a4b8c;
    font-weight: 800;
}

.dash-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-warning {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.badge-info {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* === Прокручиваемая область === */
.dash-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* === Карточка статистики === */
.dash-card {
    background: white;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #e8ecf0;
}

.dash-card-clickable {
    cursor: pointer;
    position: relative;
    transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dash-card-clickable::after {
    content: 'Нажмите';
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 11px;
    font-weight: 700;
    color: #2d7dd2;
    opacity: 0.78;
}

.dash-card-clickable:hover {
    border-color: #bfd7f5;
    box-shadow: 0 6px 18px rgba(45, 125, 210, 0.12);
}

.dash-card-clickable:active {
    transform: scale(0.985);
}

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

.dash-card-label {
    font-size: 12px;
    color: #6b7b8d;
    font-weight: 500;
    margin-bottom: 4px;
}

.dash-card-value {
    font-size: 20px;
    font-weight: 700;
    color: #1a4b8c;
}

.dash-card-value.value-red {
    color: #dc2626;
}

.dash-card-sub {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

/* Тренд рейтинга */
.trend-up {
    font-size: 13px;
    color: #16a34a;
    font-weight: 600;
    margin-left: 6px;
}

.trend-down {
    font-size: 13px;
    color: #dc2626;
    font-weight: 600;
    margin-left: 6px;
}

.trend-stable {
    font-size: 13px;
    color: #6b7b8d;
    font-weight: 600;
    margin-left: 6px;
}

/* Цветное кольцо-иконка справа */
.dash-card-right {
    flex-shrink: 0;
    margin-left: 12px;
}

.dash-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid;
}

.ring-green {
    border-color: #22c55e;
    background: #f0fdf4;
}

.ring-yellow {
    border-color: #f59e0b;
    background: #fffbeb;
}

.ring-red {
    border-color: #ef4444;
    background: #fef2f2;
}

.ring-blue {
    border-color: #3b82f6;
    background: #eff6ff;
}

.ring-icon {
    font-size: 18px;
}

/* === 4 квадрата-модуля (2x2 сетка) === */
.dash-modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

.dash-module {
    background: white;
    border-radius: 14px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #e8ecf0;
}

.dash-module:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.dash-module:active {
    transform: scale(0.97);
}

.module-icon {
    font-size: 28px;
    margin-bottom: 4px;
}

.module-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a4b8c;
}

.dash-module-disabled {
    opacity: 0.65;
    cursor: default;
    background: #f3f4f6;
    border-color: #d1d5db;
}

.dash-module-disabled:hover {
    transform: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.dash-phase-strip {
    margin: 10px 16px 14px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #d8e4f0;
    width: 100%;
    box-sizing: border-box;
}

.dash-phase-label {
    font-size: 12px;
    font-weight: 700;
    color: #1a4b8c;
    margin-bottom: 4px;
}

.dash-phase-note {
    font-size: 12px;
    line-height: 1.45;
    color: #5b6b7f;
}

.jobs-phase-strip {
    margin: 0 16px 12px;
}

.bank-phase-strip .dash-phase-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bank-phase-bank {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(45, 125, 210, 0.08);
    color: #305d95;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.bank-phase-strip .dash-phase-note {
    line-height: 1.5;
}

.dash-ranking-panel {
    margin-top: 12px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #dde7f0;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.dash-ranking-title {
    font-size: 14px;
    font-weight: 700;
    color: #133a6f;
    margin-bottom: 10px;
}

.dash-ranking-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #eef2f6;
}

.dash-ranking-row:first-of-type {
    border-top: 0;
}

.dash-ranking-row-current {
    color: #0f5132;
    font-weight: 700;
}

.dash-ranking-place {
    font-size: 13px;
    font-weight: 800;
    color: #1a4b8c;
}

.dash-ranking-team,
.dash-ranking-points {
    font-size: 13px;
}

.dash-finish-winner {
    border: 1px solid #fde68a;
    background: linear-gradient(180deg, #fffef2 0%, #ffffff 100%);
    margin: 0 16px 12px;
}

.game-finish-awards {
    display: grid;
    gap: 8px;
    margin: 0 16px 10px;
}

.game-finish-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 10px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.dash-finish-award-card {
    margin: 0;
    padding: 12px 14px;
}

.dash-finish-award-card .dash-card-value {
    font-size: 24px;
}

.dash-finish-award-card .dash-card-sub {
    font-size: 13px;
}

.dash-finish-winner-secondary {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
}

.game-finish-team,
details.game-finish-team.job-card {
    display: block !important;
    padding: 0;
}

.game-finish-team-summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.game-finish-team-summary::-webkit-details-marker {
    display: none;
}

.game-finish-team-body {
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px 14px 68px;
    border-top: 1px solid #e6edf8;
    display: grid;
    gap: 8px;
}

.game-finish-summary-line {
    font-size: 12px;
    line-height: 1.4;
    color: #64748b;
}

.game-finish-chevron {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
}

.game-finish-chevron::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #2d5dab;
    border-bottom: 2px solid #2d5dab;
    transform: translate(-50%, -65%) rotate(45deg);
    transition: transform 0.18s ease;
}

.game-finish-team[open] .game-finish-chevron::before {
    transform: translate(-50%, -35%) rotate(225deg);
}

.game-finish-ranks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 8px;
}

.game-finish-rank-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 700;
}

.game-finish-rank-badge-secondary {
    background: #effcf5;
    color: #15803d;
    border-color: #bbf7d0;
}

.game-finish-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0;
}

.game-finish-stat {
    padding: 8px;
    border-radius: 12px;
    background: #f8fbff;
    border: 1px solid #dbe7f5;
    min-width: 0;
}

.game-finish-stat span {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    font-weight: 700;
    color: #6b7fa3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.25;
    word-break: break-word;
}

.game-finish-stat strong {
    font-size: 15px;
    color: #132b50;
    line-height: 1.2;
    word-break: break-word;
}

.game-finish-breakdown {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.game-finish-breakdown-title {
    font-size: 12px;
    font-weight: 800;
    color: #31476f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.game-finish-breakdown-row {
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.game-finish-breakdown-row-positive {
    background: #eefbf3;
    color: #137a43;
    border: 1px solid #cdeed9;
}

.game-finish-breakdown-row-negative {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.profession-info-card {
    margin: 0 16px 12px;
}

.module-sub {
    font-size: 11px;
    color: #9ca3af;
}

/* === Нижняя навигационная панель === */
.dash-bottom-nav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 6px 4px calc(14px + env(safe-area-inset-bottom, 0px));
    background: white;
    border-top: 1px solid #e8ecf0;
    flex-shrink: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
}

.dash-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    padding: 3px 6px;
    transition: opacity 0.2s;
    border: none;
    background: none;
    font-family: inherit;
    text-decoration: none;
    color: inherit;
}

.dash-nav-item:active {
    transform: scale(0.9);
}

.dash-nav-item .nav-icon {
    font-size: 18px;
    line-height: 1;
}

.dash-nav-item .nav-label {
    font-size: 9px;
    color: #6b7b8d;
    font-weight: 500;
}

/* Активная вкладка навигации */
.dash-nav-item.active .nav-label {
    color: #2d7dd2;
}

.dash-nav-item.disabled {
    cursor: default;
    opacity: 0.45;
}

/* === Меню «Больше» === */
.dash-more-menu {
    position: absolute;
    bottom: 62px;
    right: 12px;
    background: white;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid #e8ecf0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s;
    z-index: 100;
}

.dash-more-menu.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.more-menu-form {
    display: contents;
}

.more-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    font-size: 14px;
    color: #333;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    font-family: inherit;
    white-space: nowrap;
}

.more-menu-item:hover {
    background: #f3f4f6;
}

.more-menu-danger {
    color: #dc2626;
}

/* =============================================
   БИРЖА ТРУДА (Job Market) — страница /game/<id>/jobs
   ============================================= */

/* Заголовок страницы «Биржа труда» */
.jobs-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #1a2b4a;
    margin: 4px 16px 12px;
}

/* Горизонтальная полоска фильтр-чипов */
.jobs-filters {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Отдельный чип фильтра (кнопка) */
.jobs-chip {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}

.jobs-chip:active {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* Обёртка поля поиска */
.jobs-search-wrap {
    width: 100%;
    position: relative;
    padding: 0 16px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

/* Иконка лупы внутри поля поиска */
.jobs-search-icon {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    pointer-events: none;
}

/* Поле поиска вакансий */
.jobs-search {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 12px;
    border: 1.5px solid #d1d5db;
    background: #f9fafb;
    font-size: 14px;
    font-family: inherit;
    color: #1a2b4a;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.jobs-search:focus {
    border-color: #2d7dd2;
    background: #fff;
}

.jobs-search::placeholder {
    color: #9ca3af;
}

/* Прокручиваемый список вакансий */
.jobs-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 12px;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
}

/* Карточка вакансии */
.job-card {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    gap: 12px;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s, background 0.2s;
    border: 1px solid transparent;
}

.job-card:active {
    transform: scale(0.98);
}

/* Иконка вакансии (эмодзи в квадрате) */
.job-card-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 10px;
}

/* Блок с информацией о вакансии */
.job-card-info {
    flex: 1;
    min-width: 0;
}

/* Название вакансии */
.job-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2b4a;
    line-height: 1.2;
}

/* Зарплата */
.job-card-salary {
    font-size: 13px;
    font-weight: 600;
    color: #2d7dd2;
    margin-top: 3px;
}

/* Время выполнения */
.job-card-duration {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* Звёзды сложности */
.job-card-stars {
    margin-top: 4px;
    font-size: 14px;
    color: #f59e0b;
    letter-spacing: 1px;
}

/* Правая часть карточки (статус + кнопка) */
.job-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Бейдж статуса вакансии (базовый) */
.job-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

/* Статус: Доступна — зелёный */
.job-status-available {
    background: #dcfce7;
    color: #16a34a;
}

/* Статус: Занята — красный */
.job-status-taken {
    background: #fee2e2;
    color: #dc2626;
}

/* Статус: Выполнена — оранжевый */
.job-status-completed {
    background: #ffedd5;
    color: #ea580c;
}

.job-status-done {
    background: #dcfce7;
    color: #166534;
}

.job-status-disabled {
    background: #e5e7eb;
    color: #6b7280;
}

/* Кнопка «Взять работу» */
.btn-take-job {
    padding: 6px 16px;
    border-radius: 8px;
    background: #2d5dab;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.btn-take-job:active {
    background: #1a4b8c;
}

.jobs-search-wrap-static {
    flex-shrink: 0;
}

.jobs-list-detail {
    padding: 0 16px 16px;
    width: 100%;
    box-sizing: border-box;
}

.market-page-content {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.job-card-work-state-success {
    background: linear-gradient(180deg, #f6fff9 0%, #ecfdf3 100%);
    border-color: #4ade80;
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.12);
}

.job-card-work-state-success .job-card-icon {
    background: #dcfce7;
}

.job-card-work-state-failed {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border-color: #cbd5e1;
    box-shadow: none;
    opacity: 0.92;
}

.job-card-work-state-failed .job-card-icon {
    background: #e5e7eb;
}

.job-card-work-state-failed .job-card-title,
.job-card-work-state-failed .job-card-salary,
.job-card-work-state-failed .job-card-duration {
    color: #6b7280;
}

.job-card-work-state-occupied {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.job-card-status-line {
    margin-top: 8px;
    font-weight: 600;
}

.job-card-info-full {
    width: 100%;
}

.job-options-list {
    margin-top: 12px;
}

.job-task-type-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.job-task-image-wrap {
    margin: 12px 0 14px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(29, 64, 175, 0.12);
    background: #eef5ff;
}

.job-task-image {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    background: #f8fbff;
    cursor: zoom-in;
}

.job-option-grid {
    display: grid;
    gap: 10px;
}

.job-option-card {
    display: block;
    position: relative;
    border: 1px solid #dbe5f3;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}

.job-option-card input {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    accent-color: #3b82f6;
    z-index: 2;
}

.job-option-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.job-option-card input:checked + .job-option-card-body {
    background: #eef5ff;
    outline: 2px solid #3b82f6;
}

.job-option-card-selected .job-option-card-body {
    background: #eef5ff;
    outline: 2px solid #3b82f6;
}

.job-option-media-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.14);
    background: #f8fbff;
}

.job-option-media {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    background: #f8fbff;
    cursor: zoom-in;
}

.job-option-text {
    color: #1f2937;
    font-size: 14px;
    line-height: 1.4;
}

.job-complex-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.job-complex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.job-complex-label {
    flex: 1;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.4;
}

.job-complex-inline-image {
    width: 40px;
    height: 40px;
    margin-right: 8px;
    vertical-align: middle;
    object-fit: cover;
    border-radius: 10px;
    cursor: zoom-in;
}

.job-complex-select {
    width: 120px;
    flex-shrink: 0;
}

.job-option-label {
    display: block;
    margin-bottom: 10px;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.4;
}

.job-option-label input {
    margin-right: 8px;
}

.job-work-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.job-submit-btn {
    width: 100%;
}

.dash-card-work-result-success {
    border: 2px solid #16a34a;
}

.dash-card-work-result-failed {
    border: 2px solid #9ca3af;
}

.dash-card-sub-strong,
.dash-card-work-result .job-card-duration {
    color: #334155;
}

.market-buy-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.market-qty-input {
    width: 72px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 13px;
    color: #334155;
    background: #fff;
}

.btn-market-buy[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Пустое состояние (нет вакансий по фильтру) */
.jobs-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.jobs-empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.jobs-empty p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}

.jobs-empty-hint {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    margin-top: 4px !important;
}

/* ---- Bottom Sheet: Фильтры вакансий ---- */

/* Кнопка закрытия фильтра (крестик в шапке) */
.jobs-filter-close {
    position: absolute;
    right: 20px;
    top: 20px;
    background: none;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
}

/* Секция фильтра (Профессия / Сложность / Статус) */
.jobs-filter-section {
    margin-bottom: 18px;
}

/* Заголовок секции фильтра */
.jobs-filter-label {
    font-size: 14px;
    font-weight: 700;
    color: #1a2b4a;
    margin-bottom: 10px;
}

/* Ряд тогглов (горизонтальный, с переносом) */
.jobs-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

/* Один тоггл-переключатель с подписью */
.jobs-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

/* Кастомный тоггл (вкл/выкл) */
.jobs-toggle input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #d1d5db;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

/* Тоггл включён — зелёный */
.jobs-toggle input[type="checkbox"]:checked {
    background: #22c55e;
}

/* Кружок-индикатор тоггла */
.jobs-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Кружок при включённом состоянии — сдвигается вправо */
.jobs-toggle input[type="checkbox"]:checked::after {
    left: 18px;
}

/* Обёртка слайдера сложности */
.jobs-range-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Подпись слайдера */
.jobs-range-label {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    min-width: 50px;
}

/* Сам слайдер (range input) */
.jobs-range-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #e5e7eb;
    outline: none;
}

.jobs-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.4);
}

.jobs-range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.4);
}

/* Кнопки фильтра (Сбросить + Применить) */
.jobs-filter-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Кнопка «Сбросить» (серая, с рамкой) */
.btn-filter-reset {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.btn-filter-reset:active {
    background: #f3f4f6;
}

/* =============================================
   БАНК (Bank) — страница /game/<id>/bank
   ============================================= */

/* Карточка баланса команды (синий градиент вверху страницы) */
.bank-balance-card {
    width: 90%;
    margin: 4px auto 16px;
    padding: 16px 16px 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1a4b8c 0%, #2d7dd2 50%, #5ba3e6 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(26, 75, 140, 0.3);
    box-sizing: border-box;
}

.bank-balance-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.bank-balance-main {
    min-width: 0;
}

/* Подпись «Баланс команды» */
.bank-balance-label {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.85;
    margin-bottom: 2px;
}

/* Сумма баланса */
.bank-balance-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 0;
}

/* Прогресс-бар (показывает долю долга) */
.bank-balance-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    overflow: hidden;
    margin: 10px 0 6px;
}

/* Красная часть бара (долг) */
.bank-bar-debt {
    height: 100%;
    background: #ef4444;
    border-radius: 4px;
    transition: width 0.5s ease;
    min-width: 0;
}

/* Подпись под баром */
.bank-balance-hint {
    font-size: 10px;
    opacity: 0.7;
    margin-bottom: 0;
}

/* Полоска табов (Кредиты / Карты / Вклады / История) */
.bank-tabs {
    width: 100%;
    display: flex;
    gap: 0;
    padding: 0 16px;
    margin-bottom: 14px;
    border-bottom: 1.5px solid #e5e7eb;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 3;
    background: inherit;
    backdrop-filter: blur(6px);
}

/* Отдельный таб */
.bank-tab {
    flex: 1;
    padding: 10px 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    transition: color 0.2s;
}

/* Активный таб — синий фон, белый текст */
.bank-tab.active {
    color: #fff;
    font-weight: 700;
    background: #2d5dab;
    border-radius: 8px;
    margin: -2px 2px;
    padding: 8px 4px;
}

/* Hover на неактивном табе */
.bank-tab:not(.active):active {
    color: #1a4b8c;
    background: #f3f4f6;
    border-radius: 8px;
}

/* Прокручиваемая область контента банка */
.bank-content {
    flex: 0 0 auto;
    overflow: visible;
    padding: 0 16px 12px;
    min-height: auto;
    -webkit-overflow-scrolling: touch;
}

.bank-page-screen {
    overflow: hidden !important;
}

.bank-scroll-area {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.bank-page-screen .bank-content {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}

.bank-analytics-grid {
    width: 90%;
    margin: 0 auto 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.bank-analytics-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(198, 215, 236, 0.9);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(19, 58, 111, 0.05);
    display: flex;
    flex-direction: column;
    min-height: 98px;
}

.bank-analytics-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.bank-analytics-pill {
    min-width: 0;
    padding: 8px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bank-analytics-pill-label {
    font-size: 9px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.76);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bank-analytics-pill-value {
    margin-top: 2px;
    font-size: 18px;
    line-height: 1.05;
    font-weight: 800;
    color: #fff;
}

.bank-analytics-pill-note {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.82);
}

.bank-analytics-label {
    font-size: 11px;
    line-height: 1.2;
    color: #6b7a93;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.bank-analytics-value {
    font-size: 22px;
    font-weight: 800;
    color: #143a73;
    line-height: 1.1;
}

.bank-analytics-note {
    margin-top: auto;
    font-size: 12px;
    color: #6f7f98;
    line-height: 1.35;
    padding-top: 6px;
}

/* Карточка кредитной карты */
.bank-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

/* Название карты */
.bank-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a2b4a;
    margin-bottom: 10px;
}

/* Строка статистики (Лимит | Использовано | Доступно) */
.bank-card-stats {
    font-size: 12px;
    color: #374151;
    margin-bottom: 6px;
    line-height: 1.5;
}

.bank-forecast-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f5f9ff;
    border: 1px solid #e3edf9;
}

.bank-forecast-item {
    font-size: 12px;
    line-height: 1.45;
    color: #587091;
}

.bank-forecast-item strong {
    color: #183f78;
}

/* Строка процентов (Процент | Кэшбек) */
.bank-card-rates {
    font-size: 12px;
    color: #374151;
    margin-bottom: 10px;
}

/* Разделитель | между значениями */
.bank-card-sep {
    color: #d1d5db;
    margin: 0 3px;
}

/* Горизонтальная линия-разделитель */
.bank-card-divider {
    height: 1px;
    background: #e5e7eb;
    margin-bottom: 10px;
}

/* Блок с кнопкой действия (выравнивание вправо) */
.bank-card-actions {
    display: flex;
    justify-content: flex-end;
}

.bank-inline-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: 12px;
}

.bank-product-card form {
    margin-top: 12px;
}

.bank-inline-form input {
    width: 100%;
    border: 1px solid #d7dfeb;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 14px;
    background: #fff;
    color: #133a6f;
}

.bank-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.bank-product-card {
    border: 1px solid #dbe7f4;
}

.bank-history-card {
    background: #fff;
}

.bank-amount-positive {
    color: #15803d;
}

.bank-amount-negative {
    color: #b91c1c;
}

/* Базовые стили кнопок банка */
.btn-bank {
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: #fff;
    transition: opacity 0.15s;
}

.btn-bank:active {
    opacity: 0.8;
}

/* Кнопка «Погасить» — красная */
.btn-bank-repay {
    background: #dc2626;
}

/* Кнопка «Оформить» — зелёная */
.btn-bank-apply {
    background: #16a34a;
}

/* Пустое состояние (заглушки табов) */
.bank-empty {
    text-align: center;
    padding: 50px 20px;
    color: #6b7280;
}

.bank-empty-icon {
    font-size: 44px;
    margin-bottom: 14px;
}

.bank-empty p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

.bank-empty-hint {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    margin-top: 6px !important;
}

.job-option-label-text input[type="text"] {
    width: 100%;
    border: 1px solid rgba(29, 64, 175, 0.16);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 15px;
    color: #12305f;
    background: #fff;
}

.content-field-hint {
    margin: 0 0 12px;
    color: #6c7fa2;
    font-size: 13px;
    line-height: 1.5;
}

.content-inline-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.content-task-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 12px 0 16px;
}

.content-task-toolbar .team-select {
    min-width: 240px;
}

.content-task-editor {
    display: grid;
    gap: 16px;
}

.content-task-card {
    border: 1px solid rgba(28, 58, 119, 0.12);
    border-radius: 20px;
    background: #f9fbff;
    padding: 18px;
}

.content-task-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.content-task-image-preview {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(28, 58, 119, 0.12);
    background: #edf4ff;
}

.content-task-image-preview img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    background: #f8fbff;
}

.job-image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1200;
}

.job-image-lightbox[hidden] {
    display: none;
}

.job-image-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
}

.job-image-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

body.job-image-lightbox-open {
    overflow: hidden;
}

/* =============================================
   МАРКЕТПЛЕЙС (Marketplace) — страница /game/<id>/market
   ============================================= */

/* Заголовок страницы «Маркетплейс» */
.market-title {
    display: none;
}

/* Бейдж цели (Goal) — по центру */
.market-goal {
    text-align: center;
    margin-bottom: 12px;
}

.market-goal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 18px;
    border-radius: 20px;
    background: #2d5dab;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
    box-sizing: border-box;
}

.market-goal-badge-success {
    background: #1f9d55;
}

.market-goal-badge-pending {
    background: #d97706;
}

.market-goal-summary {
    padding: 10px 14px;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.market-goal-summary-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    min-height: 34px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.market-goal-summary-toggle::-webkit-details-marker {
    display: none;
}

.market-goal-summary-toggle::marker {
    display: none;
}

.market-goal-summary-toggle-main {
    flex: 1 1 auto;
    min-width: 0;
}

.market-goal-summary-toggle-main .dash-card-value {
    font-size: 17px;
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-goal-summary-toggle-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.market-goal-progress-inline {
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
    color: #1d4ed8;
    white-space: nowrap;
}

.market-goal-summary-chevron {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.18);
    transition: transform 0.2s ease;
    position: relative;
}

.market-goal-summary-chevron::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #2563eb;
    border-bottom: 2px solid #2563eb;
    transform: rotate(45deg);
    margin-top: -2px;
}

.market-goal-summary[open] .market-goal-summary-chevron::before {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.market-goal-summary-body {
    display: block;
    width: 100%;
    max-width: 100%;
    clear: both;
    box-sizing: border-box;
    overflow: hidden;
    height: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    opacity: 0;
    transform: translateY(-4px);
    transition: height 0.28s ease, opacity 0.22s ease, transform 0.22s ease, margin-top 0.22s ease, padding-top 0.22s ease, border-top-color 0.22s ease;
}

.market-goal-summary-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.market-goal-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.market-goal-summary-top > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.market-goal-summary .dash-card-sub {
    margin-bottom: 8px;
    white-space: normal;
}

.market-goal-summary .job-card-duration {
    margin-top: 4px;
    white-space: normal;
    word-break: break-word;
}

.market-goal-summary.is-expanded .market-goal-summary-body {
    margin-top: 10px;
    padding-top: 8px;
    border-top-color: rgba(37, 99, 235, 0.12);
    opacity: 1;
    transform: translateY(0);
}

.market-goal-progress-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}

.market-goal-progress-label {
    font-size: 12px;
    font-weight: 700;
    color: #52627c;
}

.market-goal-progress-value {
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
    color: #1d4ed8;
}

.analyst-grid-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.analyst-list-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.analyst-line {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #d9e2f2;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.8);
    color: #31415f;
}

.analyst-line strong {
    color: #15305b;
    font-size: 14px;
}

.analyst-line span {
    font-size: 13px;
    line-height: 1.45;
}

/* Табы категорий (Основное / Бустеры / Стратегия) */
.market-tabs {
    width: 100%;
    max-width: 100%;
    display: flex;
    gap: 8px;
    box-sizing: border-box;
    padding: 0 10px;
    margin-bottom: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}

.market-tabs.dragging {
    cursor: grabbing;
}

.market-tabs::-webkit-scrollbar {
    display: none;
}

/* Отдельный таб категории */
.market-tab {
    flex: 0 0 auto;
    min-width: 110px;
    padding: 8px 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Активный таб — синий */
.market-tab.active {
    background: #2d5dab;
    color: #fff;
    border-color: #2d5dab;
    font-weight: 700;
}

.market-tab:not(.active):active {
    background: #f3f4f6;
}

/* Прокручиваемый список товаров */
.market-list {
    flex: 0 0 auto;
    overflow: visible;
    padding: 0 0 12px;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
}

/* Карточка товара */
.market-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    gap: 12px;
    border: 1px solid #e5e7eb;
}

.market-card-goal {
    border: 2px solid #f59e0b;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.18);
    background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%);
}

/* Иконка/картинка товара (эмодзи в квадрате) */
.market-card-img {
    font-size: 36px;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 10px;
}

/* Блок с информацией о товаре */
.market-card-info {
    flex: 1;
    min-width: 0;
}

/* Название товара */
.market-card-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a2b4a;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    word-break: break-word;
}

/* Цена с трендом */
.market-card-price {
    font-size: 15px;
    font-weight: 700;
    color: #1a2b4a;
    margin-bottom: 2px;
}

/* Стрелка тренда вверх — зелёная */
.market-trend-up {
    color: #16a34a;
    font-weight: 700;
}

/* Стрелка тренда вниз — красная */
.market-trend-down {
    color: #dc2626;
    font-weight: 700;
}

/* Очки удовольствия */
.market-card-pleasure {
    font-size: 13px;
    font-weight: 700;
    color: #1a2b4a;
    margin-bottom: 2px;
}

.market-pleasure-label {
    font-weight: 400;
    color: #6b7280;
    font-size: 12px;
}

.market-heart {
    font-size: 12px;
}

/* Доп. информация (на складе и т.д.) */
.market-card-note {
    font-size: 12px;
    color: #6b7280;
}

/* Подпись-описание (курсивом) */
.market-card-sub {
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
    margin-top: 2px;
}

/* Правая часть (кнопка «Купить») */
.market-card-right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    min-width: 88px;
}

.market-buy-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.market-qty-input {
    width: 56px;
    min-width: 56px;
}

/* Кнопка «Купить» — синяя */
.btn-market-buy {
    padding: 8px 14px;
    border-radius: 8px;
    background: #2d5dab;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    white-space: nowrap;
}

.btn-market-buy:active {
    background: #1a4b8c;
}

@media (max-width: 420px) {
    .market-tabs {
        padding: 0 10px;
    }

    .market-list {
        padding: 0 10px 12px;
    }

    .market-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .market-card-img {
        width: 44px;
        height: 44px;
        font-size: 28px;
    }

    .market-card-right {
        grid-column: 1 / -1;
        justify-content: flex-start;
        min-width: 0;
    }

    .market-card-price {
        font-size: 14px;
    }

    .market-buy-form {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }

    .market-qty-input {
        width: 64px;
        min-width: 64px;
    }

    .btn-market-buy {
        min-width: 96px;
        padding: 8px 12px;
    }

    .market-tab {
        min-width: 98px;
    }
}

/* Панель корзины (фиксированная, над навбаром) */
.market-cart {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    box-sizing: border-box;
    background: #fff;
    border-top: 1.5px solid #e5e7eb;
    flex-shrink: 0;
}

.market-cart-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.market-cart-icon {
    font-size: 20px;
}

.market-cart-count {
    font-size: 14px;
    font-weight: 600;
    color: #1a2b4a;
}

.market-cart-total {
    font-size: 16px;
    font-weight: 800;
    color: #1a2b4a;
}

/* Кнопка «Оформить» — зелёная */
.btn-market-checkout {
    padding: 10px 24px;
    border-radius: 10px;
    background: #16a34a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.btn-market-checkout:active {
    background: #15803d;
}

/* =============================================
   АДАПТИВНОСТЬ: На мобильных — полный экран
   ============================================= */
@media (max-width: 480px) {
    body {
        /* На мобильных — светлый фон вместо тёмного */
        background: linear-gradient(135deg, #e8f4f8 0%, #f0f4f8 50%, #e8f0f8 100%);
        display: block;
        align-items: stretch;
        justify-content: flex-start;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 100vh;
        min-height: 100dvh;
        -webkit-overflow-scrolling: touch;
    }

    /* Убираем рамку телефона */
    html, body, .phone-screen, .card, .room-card, button, a, span, div, p, h1, h2, h3, h4, h5, h6, label {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    input, textarea, select {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
        -webkit-touch-callout: default;
    }

    .phone-frame {
        width: 100%;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    /* Убираем Dynamic Island */
    .phone-frame::before {
        display: none;
    }

    /* Экран занимает весь viewport */
    .phone-screen {
        border-radius: 0;
        padding: 40px 16px 20px;
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        overflow-y: visible;
    }

    .phone-screen.dash-screen {
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: hidden !important;
        padding: 10px 0 0 0 !important;
    }

    .card {
        max-width: 100%;
        padding: 28px 20px;
    }

    .logo-icon {
        font-size: 44px;
    }

    .logo-text {
        font-size: 24px;
    }

    /* Страница комнат на мобильных */
    .rooms-screen {
        padding: 20px 12px 20px;
    }

    .rooms-user {
        max-width: 80px;
    }

    .room-card {
        padding: 12px;
    }

    .modal {
        width: 90%;
    }

    /* Bottom sheet на мобильных — на всю ширину */
    .bottom-sheet {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        padding: 12px 20px 28px;
    }

    /* Карточка комнаты внутри */
    .room-detail-card {
        padding: 20px 16px;
    }

    .member-info {
        max-width: min(54vw, 180px);
    }

    .period-zero-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .period-zero-value {
        text-align: right;
    }

    .room-detail-name {
        font-size: 20px;
    }

    /* Дашборд игры на мобильных */
    .dash-content {
        padding: 0 8px 80px;
    }

    .dash-timer {
        font-size: 44px;
    }

    /* Навбар: фиксируем внизу экрана над тулбаром браузера */
    .dash-bottom-nav {
        padding: 14px 4px calc(8px + env(safe-area-inset-bottom, 0px));
        background: white;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Меню «Больше»: поднимаем над фиксированным навбаром */
    .dash-more-menu {
        position: fixed;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        z-index: 101;
    }
}

/* Планшеты и маленькие ноутбуки */
@media (min-width: 481px) and (max-width: 768px) {
    .phone-frame {
        width: 375px;
        height: 780px;
        border-radius: 45px;
    }
}

.team-card-compact {
    padding: 14px 16px;
}

.room-detail-empty-compact {
    padding: 18px;
}

.bank-role-hint {
    margin: 8px 20px 0;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(33, 53, 85, 0.06);
    color: #66748e;
    font-size: 13px;
    line-height: 1.4;
}

.bank-content-readonly .bank-card,
.bank-content-readonly .bank-product-card {
    opacity: 0.58;
    filter: grayscale(0.15);
}

.market-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 16px 10px;
}

.market-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #52627d;
    font-size: 13px;
}

.market-sort select {
    min-width: 170px;
    border: 1px solid #c7d3e5;
    border-radius: 999px;
    padding: 10px 14px;
    background: #fff;
    color: #16325c;
}

.phase-main {
    background: linear-gradient(180deg, #e4fbe9 0%, #cdefd4 100%);
    box-shadow: inset 0 0 0 3px rgba(52, 173, 106, 0.18);
    --phase-glow-color: rgba(73, 196, 112, 0.16);
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.phase-extra {
    background: linear-gradient(180deg, #eef4ff 0%, #d9e6fb 100%);
    box-shadow: inset 0 0 0 3px rgba(66, 108, 214, 0.18);
    --phase-glow-color: rgba(86, 121, 219, 0.15);
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.phase-intro {
    background: linear-gradient(180deg, #fff8dc 0%, #fffdf2 100%);
    box-shadow: inset 0 0 0 3px rgba(216, 174, 58, 0.18);
    --phase-glow-color: rgba(236, 192, 64, 0.14);
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.dash-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 22%, var(--phase-glow-color) 0%, rgba(255, 255, 255, 0) 62%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.dash-screen > *:not(.dash-bottom-nav):not(.dash-more-menu):not(.toast-container) {
    position: relative;
    z-index: 1;
}

.dash-bottom-nav,
.dash-more-menu,
.toast-container {
    z-index: 20;
}

.dash-screen.phase-switching::before {
    animation: phaseGlowShift 1.1s ease;
}

.phase-finished {
    box-shadow: inset 0 0 0 3px rgba(221, 181, 56, 0.38);
    overflow: hidden !important;
    overflow-x: hidden !important;
}

.phase-finished .jobs-list.jobs-list-detail {
    flex: 0 0 auto;
    overflow: visible;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 0;
}

@media (max-width: 480px) {
    .game-finish-stats {
        grid-template-columns: 1fr;
    }

    .dash-finish-award-card .dash-card-value {
        font-size: 20px;
    }

    .game-finish-team-body {
        padding-left: 14px;
    }
}

.phase-transition-banner {
    margin: 10px 16px 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    border-radius: 18px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
    opacity: 0;
    transform: translateY(-6px);
}

.phase-transition-banner.active {
    max-height: 88px;
    padding: 16px 18px;
    opacity: 1;
    transform: translateY(0);
}

.phase-transition-banner.main {
    background: linear-gradient(135deg, #2d9f63, #49c57f);
}

.phase-transition-banner.extra {
    background: linear-gradient(135deg, #768091, #9aa4b3);
}

.phase-transition-banner.period {
    background: linear-gradient(135deg, #2f6dbe, #5290e2);
}

.game-events {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.game-event-card {
    border-radius: 18px;
    background: #ffffff;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(31, 54, 88, 0.08);
}

.game-event-card-fresh {
    animation: gameEventPulse 1.4s ease;
}

.game-event-title {
    color: #17325d;
    font-weight: 700;
    font-size: 14px;
}

.game-event-message {
    margin-top: 4px;
    color: #68758f;
    font-size: 13px;
    line-height: 1.45;
}

@keyframes gameEventPulse {
    0% { transform: scale(0.98); background: #eef7ff; }
    100% { transform: scale(1); background: #ffffff; }
}

@keyframes phaseGlowShift {
    0% { opacity: 0; transform: scale(1.02); }
    30% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

@keyframes spin-loader {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .bank-inline-form {
        grid-template-columns: 1fr;
    }

    .bank-inline-form .btn-bank {
        width: 100%;
    }

    .bank-analytics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: calc(100% - 32px);
        gap: 8px;
    }

    .bank-analytics-card {
        padding: 10px 10px 12px;
    }

    .bank-analytics-value {
        font-size: 18px;
    }

    .bank-analytics-note {
        font-size: 11px;
    }

    .market-toolbar {
        padding: 0 14px 6px;
    }

    .market-sort {
        width: 100%;
        justify-content: space-between;
    }

    .market-sort select {
        min-width: 0;
        width: 100%;
    }

    .market-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
    }

    .market-card-right {
        grid-column: 2;
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
    }

    .market-buy-form {
        width: 100%;
        display: grid;
        grid-template-columns: 68px 1fr;
        gap: 8px;
    }

    .btn-market-buy {
        width: 100%;
    }
}

/* Final UI overrides for game dashboard and marketplace */
.dash-card-clickable {
    transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.dash-card-clickable::after {
    content: '>';
    position: absolute;
    top: 14px;
    right: 16px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    color: #2d7dd2;
    background: #eef5ff;
    border: 1px solid #d8e7fb;
    opacity: 0.92;
}

.dash-card-clickable:hover {
    border-color: #bfd7f5;
    box-shadow: 0 6px 18px rgba(45, 125, 210, 0.12);
    background: #fcfdff;
}

.dash-phase-strip {
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
}

.jobs-phase-strip {
    margin-left: 16px;
    margin-right: 16px;
}

.dash-intro-banner {
    margin: 10px 16px 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(238, 244, 255, 0.98), rgba(225, 237, 255, 0.96));
    border: 1px solid rgba(67, 104, 184, 0.18);
    color: #38517c;
    font-size: 13px;
    line-height: 1.5;
}

.dash-intro-banner strong {
    display: block;
    margin-bottom: 4px;
    color: #16325c;
}

.phase-transition-banner {
    margin: 10px 16px 0;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    transition: max-height 0.42s ease, padding 0.42s ease, opacity 0.42s ease, transform 0.42s ease;
    transform: translateY(-10px);
    z-index: 3;
}

.phase-transition-banner.active {
    max-height: 96px;
    padding: 18px 20px;
}

.bank-page-screen .phase-transition-banner {
    margin-top: 8px;
    line-height: 1.3;
    border-radius: 16px;
}

.bank-page-screen .phase-transition-banner.active {
    max-height: 84px;
    padding: 14px 18px;
}

.market-toolbar {
    margin-top: 6px;
    padding-bottom: 12px;
    background: transparent;
}

.market-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
}

.market-card-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.market-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.market-card-price {
    white-space: nowrap;
    margin-bottom: 0;
}

.market-card-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.market-effect {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    border: 1px solid transparent;
}

.market-effect-positive {
    background: #eefbf3;
    color: #137a43;
    border-color: #cdeed9;
}

.market-effect-negative {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.market-card-sub {
    color: #6b7280;
    line-height: 1.45;
    font-style: normal;
}

.market-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.market-card-right {
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
    align-items: center;
}

.market-buy-form {
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .dash-phase-strip,
    .jobs-phase-strip,
    .phase-transition-banner {
        margin-left: 14px;
        margin-right: 14px;
    }

    .market-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
    }

    .market-card-top {
        flex-direction: column;
        gap: 4px;
    }

    .market-card-right {
        justify-content: flex-start;
    }

    .market-buy-form {
        width: 100%;
        display: grid;
        grid-template-columns: 68px 1fr;
        gap: 8px;
    }
}

/* Room detail overflow guards */
.team-card-header {
    gap: 8px;
    min-width: 0;
}

.team-card-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-card-count {
    flex-shrink: 0;
}

.period-zero-value {
    min-width: 0;
    max-width: 68%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.room-detail-member {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 8px;
    min-width: 0;
}

.member-info {
    min-width: 0;
    max-width: 100%;
}

.member-name {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
    max-width: 100%;
}

.member-name-text {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
}

.host-badge,
.team-leader-badge {
    order: 2;
    flex: 0 0 auto;
    max-width: 100%;
}

.member-drag-handle,
.member-actions-trigger {
    margin-left: 0;
}

@media (max-width: 640px) {
    .period-zero-value {
        max-width: 62%;
    }

    .room-detail-member {
        grid-template-columns: 32px minmax(0, 1fr) 26px 36px;
        column-gap: 6px;
    }

    .member-name-text {
        flex-basis: 100%;
    }
}

/* Compact bottom spacing for in-screen content. */
.jobs-list,
.jobs-list-detail,
.bank-content,
.market-list,
.market-page-content {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}