html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* Разрешаем прокрутку страницы на ПК, если контента много, 
       но убираем "прыжки" на мобильных через overscroll-behavior */
    min-height: 100dvh;
    overscroll-behavior: none; 
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #2c3e50; 
    color: white; 
    display: flex; 
    flex-direction: column; 
    align-items: center; /* Центрируем всё по горизонтали */
    padding: 20px;      /* Отступы, чтобы контент не прилипал к краям экрана */
    box-sizing: border-box;
    transition: all 0.3s ease;
}

#setup-screen {
    display: flex; /* Используем flex для центровки формы */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 80vh; /* На ПК форма будет по центру экрана */
    width: 100%;
}

.screen-layer { width: 100%; max-width: 400px; }

.form-card { 
    background: #34495e; 
    padding: 25px; 
    border-radius: 12px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    text-align: center;
}

.input-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; }

input { 
    padding: 14px; 
    width: 100%; 
    border-radius: 6px; 
    border: none; 
    box-sizing: border-box; 
    font-size: 16px;
    background: #2c3e50;
    color: white;
    outline: none;
}

button { 
    padding: 14px; 
    background: #27ae60; 
    color: white; 
    border: none; 
    border-radius: 6px; 
    font-size: 18px; 
    cursor: pointer; 
    transition: background 0.3s;
    font-weight: bold;
}
button:hover { background: #219150; }

/* --- Игровой экран --- */
#game-screen {
    display: none; /* Переключается через JS */
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px; /* Ограничиваем ширину на ПК, чтобы не растягивалось */
    gap: 15px;        /* Расстояние между элементами (статус, доска, игроки) */
}

/* Стилизация карточек игроков */
.player-card {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 15px;
    text-align: left;
    backdrop-filter: blur(5px); /* Эффект размытия заднего фона */
    transition: transform 0.3s ease;
    width: 100%;
}

.avatar {
    font-size: 2rem;
    margin-right: 15px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

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

.player-info .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

.player-info .name {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Специфические стили для противника (Красный/Опасный) */
.opponent-card {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #ff7675;
}

.me-card {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #55efc4;
    margin-top: 20px;
}

.board-container {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 8px;
    overflow: hidden; /* Чтобы углы доски не вылезали за рамки */
}

.emotion-selector {
    display: flex;
    gap: 5px;
    margin-top: 8px;
}

.emotion-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 2px 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
}

.emotion-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.2) translateY(-2px);
}

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


.game-status {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 5px;
    color: #ecf0f1;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Доска */
.chessboard-container { 
    width: 95vw; 
    max-width: 400px; 
    margin: auto; 
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Панели игроков */
.player-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    box-sizing: border-box;
    font-weight: bold;
    margin: 10px 0;
}

.player-panel.opponent {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}

.player-panel.me {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

.player-panel .label { opacity: 0.8; font-size: 0.85rem; margin-right: 10px; }
.player-panel .info-block { display: flex; align-items: center; gap: 10px; }

#opp-player-name, #my-player-name { font-size: 1.2rem; }
#opp-player-emotion, #my-player-emotion { font-size: 1.8rem; line-height: 1; }

.role-label {
    color: #f1c40f; 
    font-weight: bold; 
    text-transform: uppercase; 
    margin: 15px 0;
    background: rgba(0,0,0,0.2);
    padding: 5px 10px;
    border-radius: 20px;
}

#myBoard {
    width: 100%;      /* Доска занимает всю ширину контейнера */
    max-width: 450px; 
    touch-action: none; /* ЗАПРЕЩАЕТ прокрутку страницы при касании доски! */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* История ходов */
.history-box {
    margin-top: 20px; 
    padding: 15px; 
    background: #1a252f; 
    border-radius: 8px;
    max-height: 180px; 
    overflow-y: auto; 
    text-align: left;
    border: 1px solid #34495e;
    width: 100%;
}

.history-header {
    font-weight: bold;
    color: #bdc3c7;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-bottom: 1px solid #34495e;
    padding-bottom: 5px;
}

.move-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две колонки */
    gap: 5px;
}

.move-list li {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 5px;
}

/* Скроллбар */
.history-box::-webkit-scrollbar { width: 6px; }
.history-box::-webkit-scrollbar-track { background: #1a252f; }
.history-box::-webkit-scrollbar-thumb { background: #34495e; border-radius: 3px; }

/* Всплывающее окно ошибок */
#error-popup { 
    display: none; /* По умолчанию скрыт */
    position: fixed; 
    top: 20px;      /* Отступ от верха */
    left: 50%;
    transform: translateX(-50%); 
    background: rgba(231, 76, 60, 0.95); /* Красный полупрозрачный */
    color: white; 
    padding: 15px 25px; 
    border-radius: 10px; 
    z-index: 1000;  /* Поверх всего */
    width: 85%; 
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    font-weight: bold;
    
    /* Анимация появления */
    animation: popupFadeIn 0.4s ease-out;
}

@keyframes popupFadeIn {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.error-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Анимация зеленого свечения (АКТИВНЫЙ ИГРОК) */
@keyframes pulse-green {
    0%   { box-shadow: 0 0 5px rgba(46, 204, 113, 0.4); border-color: rgba(46, 204, 113, 0.3); }
    50%  { box-shadow: 0 0 20px rgba(46, 204, 113, 0.8); border-color: rgba(46, 204, 113, 1); }
    100% { box-shadow: 0 0 5px rgba(46, 204, 113, 0.4); border-color: rgba(46, 204, 113, 0.3); }
}

/* Анимация красного свечения (ОЖИДАЮЩИЙ ИГРОК) */
@keyframes pulse-red {
    0%   { box-shadow: 0 0 5px rgba(231, 76, 60, 0.4); border-color: rgba(231, 76, 60, 0.3); }
    50%  { box-shadow: 0 0 20px rgba(231, 76, 60, 0.8); border-color: rgba(231, 76, 60, 1); }
    100% { box-shadow: 0 0 5px rgba(231, 76, 60, 0.4); border-color: rgba(231, 76, 60, 0.3); }
}

/* Классы активации */
.active-green {
    animation: pulse-green 2s infinite ease-in-out;
}

.active-red {
    animation: pulse-red 2s infinite ease-in-out;
}

/* Блокировка доски (отключение перетаскивания) */
.no-pointer-events {
    pointer-events: none;
}

.move-list li {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 5px;
}
.move-num { color: #95a5a6; margin-right: 5px; }
.white-move { color: #f1c40f; font-weight: bold; } /* Желтый для белых */
.black-move { color: #ecf0f1; font-weight: bold; }

/* === Таймер хода === */
.timer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 450px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.move-timer {
    font-family: 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
}

.timer-normal { color: #ecf0f1; }
.timer-warning { 
    color: #f39c12; 
    animation: pulse-timer 1s infinite;
}
.timer-danger { 
    color: #e74c3c; 
    animation: pulse-timer 0.5s infinite;
}

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

/* === Подсветка возможных ходов (опционально) === */
.highlight-move {
    background: rgba(241, 196, 15, 0.3);
}

.highlight-capture {
    background: rgba(231, 76, 60, 0.3);
}

/* === Праздничный оверлей победы === */
#victory-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}

.fireworks-container {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden; background: rgba(0, 0, 0, 0.7);
    border-radius: 16px; pointer-events: none;
}

.firework-particle {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.firework-explosion {
    position: absolute; width: 60px; height: 60px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.9) 0%, rgba(255,100,0,0.6) 40%, transparent 70%);
    animation: explode-firework 1.2s ease-out forwards;
}

@keyframes explode-firework {
    0%   { transform: scale(0); opacity: 1; }
    50%  { transform: scale(2.5); opacity: 0.8; }
    100% { transform: scale(4); opacity: 0; }
}

.victory-content {
    position: relative; z-index: 2; text-align: center;
    background: rgba(15, 23, 42, 0.95); border: 3px solid #f59e0b;
    border-radius: 24px; padding: 48px 64px;
    box-shadow: 0 0 60px rgba(245, 158, 11, 0.4), 0 0 120px rgba(239, 68, 68, 0.2);
    animation: victory-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes victory-pop-in {
    0%   { transform: scale(0.3) rotate(-5deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.victory-emoji { font-size: 4rem; margin-bottom: 16px; display: inline-block; }

.animate-bounce { animation: bounce-emoji 0.8s ease-in-out infinite alternate; }

@keyframes bounce-emoji {
    from { transform: translateY(0); }
    to   { transform: translateY(-15px) scale(1.1); }
}

.victory-title {
    font-size: 2rem; font-weight: 900; color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.6), 2px 2px 0 #7c2d12;
    margin-bottom: 32px; line-height: 1.4;
}

.new-game-btn {
    font-size: 1.3rem; font-weight: bold; padding: 16px 40px;
    border: none; border-radius: 50px; cursor: pointer;
    background: linear-gradient(135deg, #f59e0b, #ef4444); color: white;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4); transition: all 0.3s ease;
}

.new-game-btn:hover { transform: scale(1.1); box-shadow: 0 12px 35px rgba(239, 68, 68, 0.6); }

.pulse-glow { animation: pulse-glow 1.5s ease-in-out infinite; }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4); }
    50%      { box-shadow: 0 8px 40px rgba(245, 158, 11, 0.8), 0 0 60px rgba(239, 68, 68, 0.3); }
}