html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Забороняємо "гумовий" скрол на iPhone */
    background-color: #000;
}


/* --- ГЛИБОКА ТЕМНА ТЕМА --- */

body {
    margin: 0;
    padding: 0;
    background-color: #1b1b1b; /* Дуже глибокий синьо-чорний фон */
    color: #e2e8f0; /* Світло-сірий текст, не ріже очі як чистий білий */
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

/* --- ГОЛОВНЕ МЕНЮ (У СТИЛІ ГРИ) --- */
/* Компактна панель для Меню та Вводу коду (повертаємо як було) */
.menu-panel {
    background: #141414;
    border: 1px solid #2a2f3a;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    margin-top: 25vh; /* Красиво висить ближче до центру */
}

/* Велика розтягнута панель СПЕЦІАЛЬНО для Лоббі */
.lobby-panel {
    background: #141414;
    border: 1px solid #2a2f3a;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 360px;
    height: calc(100dvh - 60px); 
    max-height: 640px; 
    box-sizing: border-box;
    position: relative;
}

.menu-title {
    font-size: 36px;
    color: #f8fafc;
    letter-spacing: 6px;
    margin: 0 0 35px 0;
    font-weight: 900;
    text-align: center;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* 🌟 Штовхаємо кнопки донизу ТІЛЬКИ в лоббі */
.lobby-panel .menu-buttons {
    margin-top: auto;
    margin-bottom: 10px;
}

/* Оформлення елементів лобі всередині нової великої панелі */
.lobby-code-title {
    color: #f8fafc; 
    font-size: 20px; 
    margin: 10px 0 5px 0; 
    text-align: center;
    letter-spacing: 1px;
}

#lobby-code {
    color: #3b82f6; 
    font-weight: 900;
    letter-spacing: 2px;
}

.lobby-divider {
    width: 100%; 
    border-bottom: 1px solid #2a2f3a; 
    margin: 15px 0;
}

.lobby-subtitle {
    color: #64748b; 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin: 0 0 15px 0; 
    text-align: center;
}

/* Список гравців тепер займає весь вільний центр екрана й красиво скролиться */
.players-list {
    width: 100%; 
    overflow-y: auto; 
    flex-grow: 1; 
    margin: 0 0 20px 0; 
    padding: 0 4px 0 0;
    list-style: none;
}

/* Центрувальник поля вводу коду */
.input-center-wrapper {
    width: 100%;
    margin: auto 0; /* Рівномірно центрує інпут по вертикалі між заголовком і кнопками */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Синя кнопка для "Приєднатися", щоб візуально розділити потоки */
.primary-btn {
    background: #2c569b; 
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}


/* --- СТИЛІ ДЛЯ ЕКРАНІВ ТА ЛОБІ --- */

.screen-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Клас для приховування елементів */
.hidden {
    display: none !important;
}

/* Текстові акценти */
.text-red {
    color: #ff4c4c;
}

.text-white {
    color: #ffffff;
}

.lobby-info {
    margin-bottom: 20px;
}

/* Список гравців */
.players-title {
    color: #888888;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    width: 80%;
}

.players-list {
    list-style-type: none;
    padding: 0;
    width: 80%;
    text-align: left;
    font-size: 1.2em;
}

.players-list li {
    margin: 10px 0;
}

.start-btn {
    margin-top: 30px;
}


/* --- ФОН ЕКРАНА ГРИ: ЛОКАЛЬНА КАРТИНКА --- */
.bunker-bg {
    background-image: url('bg.jpg') !important; /* 🌟 Вказуємо ім'я файлу нашої картинки */
    background-size: cover !important;          /* Розтягує картинку на весь екран */
    background-position: center !important;     /* Центрує її */
    background-repeat: no-repeat !important;    /* Щоб не дублювалася */
    
    height: 100dvh; 
    width: 100vw;
    display: flex;
    flex-direction: column;  
    justify-content: flex-start; 
    align-items: center;     
    padding: 10px 15px 15px 15px; 
    box-sizing: border-box;
    position: relative;
}
/* Головний контейнер (Планшет гравця) */
.game-content {
    background: #141414;
    border-radius: 14px; 
    border: 1px solid #2a2f3a;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    width: 100%;             
    max-width: 360px;        
    padding: 12px 10px;      
    box-sizing: border-box;
    
    /* 🌟 ЗМІНИ ТУТ: Планшет тепер динамічно підлаштовується під висоту екрана */
    flex-grow: 1;            
    max-height: calc(100dvh - 85px); /* Авто-захист, щоб нижня панель не вилазила за екран */
    margin: 0 auto;          
    overflow: hidden;
    position: relative;
}
/* Оформлення блоку катастрофи */
.info-box {
    background: rgba(255, 50, 50, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-left: 5px solid #4e3e3e;
    padding: 20px;
    margin: 10px 15px 20px 15px; /* Додали відступи, щоб не тиснуло в краї */
    border-radius: 12px;
    min-height: 120px;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 15px;
}

/* Сітка для карток персонажа */
.cards-grid {
    width: 100%;
    padding: 10px 15px;      /* Відступи тексту від країв самого скла */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Окрема картка (Професія, Здоров'я і тд) */
.bunker-card {
    display: flex;
    align-items: center;
    padding: 6px 10px !important;   /* Жорстко ставимо тонкі акуратні відступи */
    border-radius: 8px;
    margin-bottom: 5px;
    background: #202c26; 
    border: 1px solid #2d333e;
    transition: all 0.2s ease;
    text-align: left;
}

/* Назва картки (наприклад, "Факт:") */
.bunker-card strong {
    display: block;
    color: #aaa;
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/* Сам текст картки */
.bunker-card span {
    color: #a7a7a7;
    font-size: 16px; /* Трохи збільшили шрифт значення */
    font-weight: 600;
    line-height: 1.3;
}

.bunker-card:active {
    transform: scale(0.97);
}
/* Контейнер, який дозволяє гортати вбік */
.swipe-container {
    display: flex;
    overflow-x: auto; /* Повертаємо нормальний скрол */
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding-bottom: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-grow: 1; 
    -webkit-overflow-scrolling: touch; /* Плавність для iOS */
    scroll-behavior: auto !important;
}

.swipe-container::-webkit-scrollbar {
    display: none; 
}

/* Кожен окремий слайд */
.swipe-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    
    /* 🌟 СПРАВЖНІЙ АНТИ-БАГ ДЛЯ ANDROID 🌟 */
    scroll-snap-stop: always; /* Змушує скрол гальмувати НА КОЖНОМУ слайді, забороняє пролітати мимо */
    
    display: flex;
    flex-direction: column;
    overflow-y: auto; 
}
/* Точки індикації під слайдами */
.swipe-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: background 0.3s ease;
}

.dot.active {
    background: #ff4444; /* Активна точка червона */
}

/* Плашка гравця в лобі */
.player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- СТИЛІ ДЛЯ DRAG & DROP В ЛОББІ --- */

/* Іконка за яку тягнемо */
.drag-handle {
    color: #475569;
    font-size: 26px;
    font-weight: 900;
    cursor: grab;
    padding: 0 10px;
    touch-action: none; /* 🌟 Важливо для мобілок, щоб екран не скролився під час перетягування */
    transition: color 0.2s;
    user-select: none;
}

.drag-handle:active {
    cursor: grabbing;
    color: #3b82f6; /* Синіє, коли беремо пальцем */
}

/* Стиль плашки гравця, яку ми прямо зараз тягнемо (напівпрозора з синім пунктиром) */
.sortable-ghost {
    opacity: 0.5;
    background: #1e222b !important;
    border: 2px dashed #3b82f6 !important;
    transform: scale(0.98);
}

/* Щоб при перетягуванні не виділявся текст */
.player-item {
    user-select: none;
    -webkit-user-select: none;
}
.reveal-hint {
    display: block;
    font-size: 9px;
    opacity: 0.4;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Стиль для відкритої картки */
.bunker-card.revealed {
    border: 1px solid rgba(76, 175, 80, 0.6); /* Зелений бордюр */
    background: rgba(76, 175, 80, 0.15);      /* Легкий зелений фон */
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.2); /* Сяйво */
}

/* Прибираємо підказку, якщо картка вже відкрита */
.bunker-card.revealed .reveal-hint {
    display: none;
}

/* Панель для кнопок внизу екрану */
.bottom-action-panel {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Відстань між кнопками */
    margin-top: 20px;
    padding: 0 15px 20px 15px;
    width: 100%;
    box-sizing: border-box;
}

/* Спільний стиль для обох кнопок */
.action-btn {
    flex: 1; /* Кнопки ділять простір порівну */
    padding: 14px 10px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    color: #ffffff; /* Тільки білий текст! */
    text-align: center;
    text-transform: uppercase;
    transition: transform 0.1s;
}

.action-btn:active {
    transform: scale(0.95);
}

/* Стиль для кнопки голосування */
.danger-btn {
    background: #ff4444;
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
}

/* Стиль для майбутньої кнопки правил */
.info-btn {
    background: #333333;
    border: 1px solid #555555;
}

/* Важливо: щоб прихована кнопка не ламала Flexbox */
.action-btn.hidden {
    display: none !important;
}

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999; /* Поставив 9999, щоб точно була поверх усього */
}
.modal-overlay.hidden { 
    display: none !important; 
}

.vote-player-row {
    display: flex; justify-content: space-between; align-items: center;
    background: #2a2a2a; padding: 15px; margin-bottom: 10px;
    border-radius: 12px; cursor: pointer; border: 2px solid transparent;
    transition: all 0.2s ease;
}

/* Коли гравець обраний - світиться зеленим */


.disabled-row {
    opacity: 0.6; cursor: not-allowed; pointer-events: none;
}

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

/* Красива галочка замість кружечка */
.check-icon {
    font-size: 20px;
    opacity: 0; /* Прихована за замовчуванням */
    transition: 0.2s;
    transform: scale(0.5);
}
.vote-player-row.selected .check-icon {
    opacity: 1; /* З'являється при виборі */
    transform: scale(1);
}

.player-name { font-size: 16px; font-weight: bold; color: #fff; }
.me-tag { color: #888; font-size: 14px; font-weight: normal; }
.vote-crosses { color: #ff4444; font-size: 18px; letter-spacing: 2px; }

/* --- СТИЛІ ДЛЯ ВИГНАНОГО ГРАВЦЯ --- */

/* Перекреслене криваве ім'я */
.kicked-name {
    color: #ff4444 !important;
    

    text-decoration-color: rgba(255, 68, 68, 0.7);
    text-decoration-thickness: 3px;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}

/* Червонуватий фон для всіх карток вигнаного */
.swipe-slide.kicked .bunker-card {
    background: rgba(255, 68, 68, 0.15) !important;
    border: 1px solid rgba(255, 68, 68, 0.5) !important;
    box-shadow: inset 0 0 15px rgba(255, 68, 68, 0.1);
}

/* Текст характеристик стає яскраво-червоним (щоб виділявся) */
.swipe-slide.kicked .bunker-card span {
    color: #ff6b6b !important; 
}

/* Забороняємо клікати на картки вигнаного (вони вже відкриті назавжди) */
.swipe-slide.kicked .bunker-card {
    pointer-events: none;
}
.bunker-divider {
    display: flex;
    align-items: center;
    color: #4CAF50;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.bunker-divider::after {
    content: "";
    flex: 1;
    margin-left: 10px;
    height: 1px;
    background: rgba(76, 175, 80, 0.3);
}

/* Саме матове скло вікна */
.modal-glass {
    background: rgba(33, 33, 33, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    max-height: 85vh; /* Щоб вікно не вилазило за екран */
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    animation: slideUp 0.3s ease-out; /* Анімація появи */
}

/* Анімація виїзду знизу */
@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

/* Кнопка-хрестик */
.close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
    padding: 0;
}

/* Скрол-зона для тексту правил */
.modal-body {
    padding: 20px;
    overflow-y: auto; /* Дозволяє крутити текст */
    color: #c3c3c3;
    font-size: 14px;
    line-height: 1.6;
}

.modal-body h4 {
    color: #c7c7c7; 
    margin: 15px 0 5px 0;
    font-size: 15px;
}

.modal-body h4:first-child {
    margin-top: 0;
}

.modal-body p {
    margin: 0 0 10px 0;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* --- СТИЛІ КАРТОК (ПЛАШОК) --- */

.bunker-card {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #20242c; /* Базовий темний фон картки */
    border: 1px solid #2d333e;
    transition: all 0.2s ease;
    text-align: left;
}

.bunker-card:active {
    transform: scale(0.97);
}

/* Іконка зліва (тепер вона більша і чітко по центру) */
.card-icon {
    font-size: 28px;         /* Зменшили емодзі (було 32px) */
    margin-right: 10px;
    min-width: 32px;         /* Зменшили ширину блоку емодзі */
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

/* Блок з текстом (займає всю іншу частину справа від іконки) */
.card-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
}

/* 🌟 Посилений селектор для заголовка (тепер він точно стане дрібним і синьо-сірим) */
.bunker-card .card-title {
    font-size: 9px !important; 
    text-transform: uppercase;
    font-weight: 700;
    color: #64748b !important;      /* Красивий приглушений синьо-сірий колір */
    margin-bottom: 2px;
    letter-spacing: 0.8px;
    display: block;
}

/* 🌟 Посилений селектор для значення (зменшує шрифт до компактного і робить білим) */
.bunker-card .card-value {
    font-size: 13.5px !important;   /* Акуратний зменшений розмір */
    font-weight: 700;
    color: #f8fafc !important;      /* Контрастний яскраво-білий текст */
    line-height: 1.15;
    display: block;
}

/* Зберігаємо кольорові неонові лінії зліва для відкритих карток */
.card-opened.card-biology { border-left: 4px solid #00bcd4 !important; background: rgba(0, 188, 212, 0.05); } 
.card-opened.card-profession { border-left: 4px solid #3b82f6 !important; background: rgba(59, 130, 246, 0.05); } 
.card-opened.card-health { border-left: 4px solid #ec4899 !important; background: rgba(236, 72, 153, 0.05); } 
.card-opened.card-hobby { border-left: 4px solid #eab308 !important; background: rgba(234, 179, 8, 0.05); } 
.card-opened.card-trait { border-left: 4px solid #a855f7 !important; background: rgba(168, 85, 247, 0.05); } 
.card-opened.card-baggage { border-left: 4px solid #f97316 !important; background: rgba(249, 115, 22, 0.05); } 
.card-opened.card-fact { border-left: 4px solid #94a3b8 !important; background: rgba(148, 163, 184, 0.05); } 

.card-opened.card-action { 
    border-left: 4px solid #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.08); 
}
.card-opened.card-action .card-value {
    color: #fbbf24 !important;
}

/* Стиль закритих карток */
.card-classified {
    background: #15181d !important;
    border: 1px dashed #3f4756 !important;
}
.card-classified .card-title { color: #505a6e !important; }
.card-classified .card-value {
    color: #505a6e !important;
    font-style: italic;
    font-weight: normal;
}


/* Підказка для відкриття */
.reveal-hint {
    color: #10b981; /* Приємний зелений для дії */
    font-size: 10px;
    font-weight: bold;
    margin-top: 5px;
    opacity: 0.8;
}
/* --- ВЕРХНЯ КАПСУЛА (СТАТУС-БАР) --- */
.top-status-bar {
    position: relative; /* Дозволяє вільне переміщення елементів всередині */
    margin-bottom: 12px;
    width: 100%;
    display: flex;
    justify-content: center; /* 🌟 Ідеально центрує капсулу */
    align-items: center;
    z-index: 10;
    padding: 5px 0;
    box-sizing: border-box;
}

.status-capsule {
    background: rgba(54, 78, 60, 0.85); /* Напівпрозоре темне скло */
    backdrop-filter: blur(8px);
    border: 1px solid #2a2f3a;
    border-radius: 25px; /* Красива овальна форма */
    padding: 8px 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.status-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #e2e8f0;
}

.status-icon {
    font-size: 16px;
    margin-right: 6px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.status-divider {
    width: 1px;
    height: 16px;
    background: #3f4756;
    margin: 0 12px;
}

/* Маленька кругла кнопка правил */
.rules-btn-small {
    position: absolute; 
    right: 0; /* 🌟 Притискаємо кнопку до правого краю */
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(32, 36, 44, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid #2d333e;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    transition: 0.2s;
    padding: 0;
}

.rules-btn-small:active {
    transform: scale(0.9);
    background: #2d333e;
}
/* --- СТИЛЬ ЗАКРИТИХ КАРТОК (МОЇ ДАНІ) --- */
.card-classified {
    background: #15181d !important;
    border: 1px dashed #3f4756 !important;
}

.card-classified .card-title { 
    color: #64748b !important; 
}

/* 🌟 Робимо саму приховану характеристику світлішою і читабельною */
.card-classified .card-value {
    color: #cbd5e1 !important; /* Світло-сірий замість темного */
    font-style: italic;
    font-weight: 500 !important;
}

/* 🌟 Бронебійний стиль для підказки "Натисни, щоб відкрити" */
.bunker-card .reveal-hint {
    color: #10b981 !important;   /* Приглушений приємний зелений */
    font-size: 8.5px !important; /* Дуже дрібний шрифт */
    font-weight: 600 !important;
    margin-top: 4px;
    opacity: 0.7;                /* Злегка прозорий, щоб не перетягував увагу */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}
/* --- СТИЛІЗАЦІЯ КАТАСТРОФИ ТА БУНКЕРА --- */

/* Спільний стиль для інформаційних карток */
.bunker-alert-card {
    background: #1c1f26;
    border: 1px solid #2a2f3a;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Кольорові акценти (неонові лінії зліва та легкий градієнт) */
.catastrophe-theme {
    border-left: 4px solid #ef4444 !important; /* Тривожний червоний */
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%), #1c1f26;
}

.bunker-theme {
    border-left: 4px solid #3b82f6 !important; /* Технічний синій */
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%), #1c1f26;
}

/* Верхній бейдж над заголовком */
.alert-card-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #64748b;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
}

/* Назва катастрофи */
#catastrophe-title {
    font-size: 18px;
    font-weight: 700;
    color: #f8fafc !important;
    margin: 0 0 8px 0;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

/* Опис катастрофи та особливості бункера */
.alert-card-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: #cbd5e1;
    margin: 0;
}

/* 🌟 МАГІЯ ФОРМАТУВАННЯ: змушуємо списки від сервера переноситися по рядках красиво */
.alert-card-text.text-list {
    white-space: pre-line; /* Поважає символи переносу рядка \n */
    color: #94a3b8;
    font-family: system-ui, -apple-system, sans-serif;
}
/* --- СТИЛІ ДЛЯ ЕКРАНУ ВВОДУ КОДУ ТА ЛОББІ --- */

/* Красиве поле для вводу коду */
.cyber-input {
    width: 100%;
    padding: 15px;
    font-size: 28px;
    border-radius: 12px;
    border: 2px solid #2a2f3a;
    text-align: center;
    text-transform: uppercase;
    font-family: inherit;
    font-weight: 900;
    background-color: #0a0c10;
    color: #f8fafc;
    letter-spacing: 6px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

.cyber-input:focus {
    outline: none;
    border-color: #3b82f6; /* Підсвічується синім при натисканні */
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2), inset 0 2px 10px rgba(0,0,0,0.5);
}

/* Виправляємо відображення гравців у лоббі */
.player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1c1f26;
    margin-bottom: 8px;
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid #2a2f3a;
    color: #cbd5e1;
    font-weight: 600;
    font-size: 15px;
}

/* Красивий тонкий скрол для списку гравців (якщо їх буде багато) */
#players-list::-webkit-scrollbar {
    width: 4px;
}
#players-list::-webkit-scrollbar-thumb {
    background: #3f4756;
    border-radius: 4px;
}