/* =========================================================
   ЧАСТЬ 1: БАЗОВЫЕ СТИЛИ (MOBILE FIRST И ГЛОБАЛЬНЫЕ)
   ========================================================= */

/* Блокировка системных штук на уровне всего документа */
html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Применяем touch-action: none ко всем важным элементам */
.game-container, .chess-board, .gm-btn, .btn-hint, .square {
    touch-action: none;
}
.piece {
    touch-action: none;
}

/* Разрешаем скролл ТОЛЬКО внутри списка ходов, если он нужен */
#move-history-list {
    touch-action: pan-y; /* Разрешаем только вертикальный скролл */
    -webkit-overflow-scrolling: touch;
}

/* Полный запрет на перетаскивание и выделение для картинок и аватарок */
img, .avatar, .avatar img, .loader-logo, .gm-menu-icon, .piece {
    /* Запрет системного перетаскивания (чтобы не появлялся "призрак" картинки) */
    -webkit-user-drag: none;
    user-drag: none;
    
    /* Запрет выделения текста и синего фона вокруг */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* Отключаем системное контекстное меню при долгом тапе на картинках */
    -webkit-touch-callout: none;
}

/* Делаем аватарки "прозрачными" для кликов, чтобы они не перехватывали события */
.avatar, .avatar img {
    pointer-events: none;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
}

:root {
    --board-light: #f0d9b5;
    --board-dark: #b58863;
    --highlight-yellow: rgba(204, 204, 80, 0.7); 
    --selected-yellow: rgba(204, 204, 80, 0.85);
    --hint-blue: rgba(34, 197, 94, 0.8);
    --move-hint: rgba(0, 0, 0, 0.15);
    --error-overlay: rgba(239, 68, 68, 0.5);
    --gray-100: #e3e3e3;
    --gray-200: #f4f4f4 ;
    --gray-300: #ffffff;
    --gray-1000: #f7f7f7;
    --gray-400: #3b3b3b;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #c2c1c1;
    --text-primary: #313131;
    --ai-name-color: #1f2937;
    --timer: #b9b9b9;
    --green: #92a88b;
    --green1: #92a88b;
    --white: #fff;
}

/* ТЁМНАЯ ТЕМА (chess.com style) */
html[data-theme="dark"] {
    --board-light: #EEEED2;
    --board-dark: #769656;
    --gray-100: #292929;
    --gray-200: #303030 ;
    --gray-300: rgb(43, 43, 43);
    --gray-400: #e7e7e7;
    --gray-900: #4d4d4d;
    --gray-1000: #2f2f2f;
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --text-primary: #f5f5f5;
    --text-secondary: #b0b0b0;
    --button-bg: #3a3a3a;
    --button-shadow: #1a1a1a;
    --ai-name-color: #f5f5f5;
    --timer: #494949;
    --green1: #2c2c2c;
    
}

#name-ai {
    color: var(--ai-name-color);
}

/* Значения по умолчанию (Classic) */
#board {
    --board-light: #f0d9b5;
    --board-dark: #b58863;
}

/* Переопределение для зеленой темы */
#board.board-green {
    --board-light: #ece8dd;
    --board-dark: #92a88b;
}

/* Переопределение для классики (явно) */
#board.board-classic {
    --board-light: #f0d9b5;
    --board-dark: #b58863;
}

#board.board-ash {
    --board-light: #f8fafc;
    --board-dark: #9ca3af;
}
.sq-p.ash-dark  { background: #9ca3af; }
.sq-p.ash-light { background: #f8fafc; }

/* Клетки используют эти переменные */
.square.light { background-color: var(--board-light); }
.square.dark { background-color: var(--board-dark); }

/* СТИЛИ ДЛЯ КНОПКИ ТЕМЫ */
#theme-btn .sun { display: block; }
#theme-btn .moon { display: none; }

html[data-theme="dark"] #theme-btn .sun { display: none; }
html[data-theme="dark"] #theme-btn .moon { display: block; }

.piece-preview {
    width: 13vh;
    height: 13vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 4px;
    border: 3px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}

.piece-preview:hover { transform: scale(1.1); }
.piece-preview.active { border-color: #3b82f6; }

.piece-preview .piece-cell {
    width: 10.5vh;
    height: 10.5vh;
    border-radius: 6px;
    background: var(--current-board-dark, #b58863);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.piece-preview.active .piece-cell {
    transform: scale(1.15);
}

.piece-preview .piece-cell img {
    width: 9vh !important;
    height: 9vh !important;
}

/* --- ПРОСТАЯ ПУЛЬСАЦИЯ ЦВЕТОМ --- */
.square.hint-blink::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2; /* Слой под фигурой */
    background-color: rgb(34, 197, 94); /* Чистый зеленый цвет */
    animation: simplePulse 1.2s ease-in-out infinite;
    pointer-events: none;
}

/* Координаты внутри клеток */
.coord {
    position: absolute;
    font-size: 2.5vw;
    font-weight: bold;
    pointer-events: none; /* Чтобы цифры не мешали кликам */
    z-index: 5;
    opacity: 0.8;
}

/* Цифры (ранги) — слева сверху */
.coord.rank {
    top: 0.1vw;
    left: 0.3vw;
}

/* Буквы (файлы) — справа снизу */
.coord.file {
    bottom: 0.2vw;
    right: 0.5vw;
}

/* Цвета для контраста: на светлых клетках — темный текст, на темных — светлый */
.square.light .coord { color: var(--board-dark); }
.square.dark .coord { color: var(--board-light); }

@keyframes simplePulse {
    0% { opacity: 0.2; }
    50% { opacity: 0.7; }
    100% { opacity: 0.2; }
}

* { 
    touch-action: none; 
    -webkit-user-select: none; 
    user-select: none; 
    box-sizing: border-box; 
}

body { 
    overscroll-behavior: none; 
    overflow: hidden; 
    height: 100vh; 
    background-color: var(--gray-100); 
    background-size: 20px 20px;
    background-attachment: fixed;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    margin: 0; 
}

/* --- ЭКРАН ЗАГРУЗКИ --- */
#loading-screen {
    position: fixed;
    inset: 0;
    background-color: var(--gray-100);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s;
}

.loader-logo {
    width: 160px;
    height: 160px;
    object-contain: contain;
    margin-bottom: 2rem;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(-10%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

.progress-container {
    width: 256px;
    background-color: var(--gray-200);
    border-radius: 9999px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.square.in-check {
    background-image: radial-gradient(circle, rgba(255, 0, 0, 0.9) 0%, rgba(255, 0, 0, 0.4) 50%, transparent 100%) !important;
}

#loading-bar {
    background-color: #2563eb;
    height: 100%;
    width: 0%;
    transition: width 0.3s;
}

#loading-text {
    color: var(--gray-500);
    font-weight: bold;
    font-size: 14px;
}

/* --- ВЕРХНЯЯ ПАНЕЛЬ (КАРТОЧКИ) --- */
.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.top-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.stat-card-left, .stat-card-right {
    background-color: white;
    border-bottom: 4px solid var(--gray-200);
    padding: 8px 20px;
    display: flex;
    flex-direction: column;
    min-width: 110px;
    transition: all 0.2s;
}

.stat-card-left {
    border-radius: 16px 8px 8px 16px;
    align-items: flex-end;
}

.stat-card-right {
    border-radius: 8px 16px 16px 8px;
    align-items: flex-start;
}

.stat-label {
    font-size: 8px;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--gray-400);
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: 24px;
    font-weight: 900;
    color: var(--gray-700);
    line-height: 1.2;
}

.vertical-divider {
    height: 32px;
    width: 2px;
    background-color: var(--gray-200);
    opacity: 0.5;
}

/* --- ДОСКА --- */
#board-wrapper { position: relative;}

.chess-board { 
    display: grid; 
    grid-template-columns: repeat(8, 1fr); 
    grid-template-rows: repeat(8, 1fr); 
    width: min(97vw, 85vh); 
    height: min(97vw, 85vh);
    aspect-ratio: 1 / 1; 
    overflow: hidden; 
    position: relative; 
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

.square { display: flex; align-items: center; justify-content: center; position: relative; }
.square.light { background-color: var(--board-light); }
.square.dark { background-color: var(--board-dark); }

.square.enemy-move::before, .square.selected::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
}
.square.enemy-move::before { background-color: var(--highlight-yellow); }
.square.selected::before { background-color: var(--selected-yellow); }

.piece {
    width: 94%;
    height: 94%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: none;
    z-index: 10;
    cursor: grab;
    position: absolute;
    top:3%;
    left: 2%;

    filter: drop-shadow(1px 1px 2px rgba(68, 68, 68, 0.4));
    transition: filter 0.2s ease; /* Чтобы тень менялась плавно */
}

/* --- КНОПКА --- */
.btn-hint {
    background-color: white;
    border: none;
    box-shadow: 0 4px 0 var(--gray-200);
    color: var(--gray-700);
    /* padding: 12px 40px; */
    /* border-radius: 16px; */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform 0.1s, box-shadow 0.1s;
    cursor: pointer;
    outline: none;
    position: relative;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 1vw; 
}

.video-icon svg {
    width: 6vw;
    height: 6vw;
    display: block;
    fill: currentColor; 
}

.btn-hint:active {
    box-shadow: 0 0px 0 var(--gray-200);
    transform: translateY(4px);
}

/* --- ПРОМОУШЕН (ВЫБОР ФИГУРЫ) --- */
#promotion-dialog {
    position: fixed;
    z-index: 10000;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    border-radius: 4px;
    display: none; 
    flex-direction: column;
}

.promotion-box {
    display: flex;
    flex-direction: column; 
}

.prom-option {
    cursor: pointer;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #f0f0f0;
    transition: background-color 0.2s;
}

.prom-option:hover {
    background-color: #d0d0d0;
}

.hidden { display: none !important; }

/* Ошибки и анимации */
.square.error-move::after {
    content: ""; position: absolute; inset: 0;
    background-color: var(--error-overlay); z-index: 200; pointer-events: none;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-1px); }
    40%, 80% { transform: translateX(1px); }
}
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }

.points-added { 
    animation: floatUp 1s ease-out forwards; 
    color: #16a34a; 
    position: absolute; 
    font-weight: 900; 
    font-size: 24px; 
    pointer-events: none; 
}

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


.gm-icon-giveaway {
    background-color: var(--white); 
    -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8" fill="black"/><circle cx="12" cy="12" r="5" fill="white" opacity="0.3"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8" fill="black"/><circle cx="12" cy="12" r="5" fill="white" opacity="0.3"/></svg>') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.gm-icon-random {
    background-color: var(--white); 
    -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8" fill="black"/><circle cx="12" cy="12" r="5" fill="white" opacity="0.3"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8" fill="black"/><circle cx="12" cy="12" r="5" fill="white" opacity="0.3"/></svg>') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* Контейнер для иконки */
.king-icon-container {
    width: 8vh;
    height: 8vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* По умолчанию картинка белой дамки */
    background-image: url('img/p/wQ.svg'); 
}

/* Если включена темная тема — меняем картинку на черную дамку (или наоборот) */
html[data-theme="dark"] .king-icon-container {
    background-image: url('img/p/bQ.svg');
}

#drag-follower {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    display: none;
    transform: translate(-50%, -50%); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
    transition: none;
}

/* Точка для пустого поля */
.hint-dot {
    position: absolute;
    width: 25%;
    height: 25%;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    z-index: 5; 
    pointer-events: none;
}

/* Кольцо для захвата фигуры */
.hint-ring {
    position: absolute;
    width: 90%;
    height: 90%;
    border: 6px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    z-index: 5;
    pointer-events: none;
    box-sizing: border-box;
}

/* -------- БАЗОВАЯ СТРУКТУРА (Глобальные и Mobile-First настройки) -------- */
.game-container {
    width: 100vw;
    height: 100vh;
    padding: 0vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5vw;
}

.chess-board {
    width: 100vw;
    height: 100vw;
    max-width: 85vh;
    max-height: 85vh;
}

.side-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.top-bar {
    display: flex;
    gap: 2vw;
    justify-content: center;
}

.stat-card {
    padding: 1.5vw 3vw;
    border-radius: 1.5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 18vw;
    gap: 3vw;   
}

.stat-label {
    font-size: 3.7vw;
    font-weight: 500;
    text-transform: uppercase;
}

.stat-value {
    font-size: 6vw;
    font-weight: 900;
}

.bottom-bar {
    display: flex;
    justify-content: center;

}

.btn-hint {
    /* padding: 1.5vw 5vw; */
    /* border-radius: 4vw; */
}

.text {
    font-size: 3vw;
    text-transform: uppercase;
    font-weight: 700;
    color: #484544;
}

/* --- ПРОФИЛИ ИГРОКОВ --- */
.main-play-area {
    display: flex;
    flex-direction: column;
    /* gap: 0vh; */
    align-items: center;
    height: 100%;
}

.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 24%;
    object-fit: cover; 
}
.avatar {
    width: 6vh;
    height: 6vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5vh;
}

.bg-player {
    background-color: #252527;
    background-size: contain; /* Измени с 75% на contain или cover */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 24%;
    display: block;
    overflow: hidden; /* Важно, чтобы фото не вылезало за края */
}

html[data-theme="dark"] .bg-player {
    background-color: #252527; 
}

.profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.name-row {
    display: flex;
    align-items: center;
    gap: 1vw;
}

.player-name {
    font-size: 2.5vh;
    font-weight: bold;
    color: var(--text-primary);
}

.score-diff {
    font-size: 2vh;
    font-weight: bold;
    color: var(--green); 
}

/* --- ОБНОВЛЕНИЕ ПАНЕЛИ КНОПОК --- */
.bottom-bar {
    display: flex;
    justify-content: center;
    /* gap: 9px;  */
    width: 100%;
}

.btn-secondary {
    background-color: #ebebeb;
    color: #484544;
    box-shadow: 0 4px 0 #d1d1d1;
}
.btn-secondary:active {
    box-shadow: 0 0px 0 var(--gray-400);
}

/* Базовый стиль кнопок выбора цвета */
.color-btn {
    width: 92px;
    height: 92px;
    background: var(--green);
    border: 3px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.color-btn:hover {
    background: var(--green);
    transform: translateY(-2px);
}

.color-btn.selected {
    border-color: #333;
    background: #b58863;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.color-icon {
    width: 90%;
    height: 90%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.random-king-icon { background-image: url('img/p/wbQ.svg');}
.white-king-icon { background-image: url('img/p/wQ.svg'); }
.black-king-icon { background-image: url('img/p/bQ.svg'); }

/* --- КОНТЕЙНЕР ИСТОРИИ (ОБНОВЛЕННЫЙ ВИЗУАЛ) --- */
.history-container {
    background: #f8f8f8;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0px 0 0 0;
}

.history-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100%;
    font-family: 'Roboto', -apple-system, sans-serif !important;
    font-size: .9vw !important;
    color: #333;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 0px !important;
    /*gap: 2px !important;*/
}

/* Визуальный ряд (объединяет 2 хода) */
.history-row {
    display: flex;
    width: 100%;
    padding: 0.4vw 0.2vw;
    gap: 0.1vw;
    border-radius: 0.1vw;
    transition: background-color 0.2s;
}

/* Зебра */
.history-row:nth-child(odd) {
    background-color: #eaeaea;
}
.history-row:nth-child(even) {
    background-color: transparent;
}

/* Подсветка всего активного ряда (светло-фиолетовый) */
.history-row.active-row {
    background-color: #e1e5e2 !important;
}

/* Блок одного полного хода (Белые + Черные) */
.move-block {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .1vw;
}

.move-number {
    color: #666;
    min-width: .3vw;
    text-align: right;
}

.move-text {
    padding: .1vw .3vw;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    color: #333;
    transition: all 0.2s;
}

.move-text:hover {
    background: rgb(0 0 0 / 64%);
}

/* Конкретный активный ход (темно-фиолетовый) */
.move-text.active {
    background: var(--green) !important;
    color: white !important;
}

/* --- ПОДДЕРЖКА ТЁМНОЙ ТЕМЫ --- */
html[data-theme="dark"] .history-container {
    background: #242424;
}
html[data-theme="dark"] .history-row:nth-child(odd) {
    background-color: #3e3e3e;
}
html[data-theme="dark"] .history-row.active-row {
    background-color: #363e38 !important;
}
html[data-theme="dark"] .move-text {
    color: #e5e5e5;
}
html[data-theme="dark"] .move-text.active {
    background: var(--green) !important;
    color: white !important;
}
html[data-theme="dark"] .move-number {
    color: #999;
}

/* Блок результата в истории ходов */
.game-result-history {
    width: 100%;
    padding: 1.2vh;
    /*margin-top: 10px;*/
    /*border-radius: 8px;*/
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1vw; 
    animation: slideInUp 0.4s ease-out;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.result-win { background-color: var(--gray-200); color: #7a9771; border: 0px solid #c7c7c7; }
.result-lose { background-color: var(--gray-200); color: #5e5e5e; border: 0px solid #ef4444; }
.result-draw { background-color: var(--gray-200); color: #374151; border: 0px solid #9ca3af; }

.result-score { font-size: 1.8vw; letter-spacing: 2px; }

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

/* Кнопки выбора времени в модалке */
.time-btn {
    background: #f3f4f6;
    border: 2px solid transparent;
    padding: 8px 11px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 24px;
    transition: all 0.2s;
}

.time-btn.selected {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #3b82f6;
}

/* Стили таймера */
.timer {
    margin-left: auto; 
    background: var(--timer);
    color: #ffffff;
    padding: 1.5vh 1.5vh;
    border-radius: 1.5vh;
    font-family: 'Courier New', monospace;
    font-size: 2.4vh;
    font-weight: bold;
    /*min-width: 70px;*/
    text-align: center;
}

.timer.active {
    background: #92a88b !important;
    color: white !important;
}

.timer.low-time {
    background: #ef4444 !important; 
    color: white !important;
}

.timer.blinking {
    animation: simplePulse 1s infinite;
}

/* Контейнер для сегментированного выбора */
#time-options-container {
    display: flex;
    background: #fff; 
    padding: 4px;
    border-radius: 12px;
    position: relative;
    gap: 0;
    border: 1px #d1d1d1 solid;
}

.time-segment-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 4vh;
    font-weight: 600;
    color: #4a4a4a;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    outline: none;
}

.time-segment-btn:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: #d1d1d1;
    transition: opacity 0.2s;
}

.time-segment-btn.selected {
    background: var(--green); 
    color: white;
    box-shadow: 0 2px 8px rgba(105, 105, 105, 0.4);
}

.time-segment-btn.selected::after,
.time-segment-btn.selected + .time-segment-btn::after {
    opacity: 0;
}

.time-segment-btn:hover:not(.selected) {
    background: rgba(0,0,0,0.05);
}

/* --- СТАРТОВОЕ МЕНЮ ("GRANDMASTER" STYLE) --- */
:root {
    --gm-bg-base: #f6f6f6;       
    --gm-bg-pattern: #ebebeb;    
    --gm-vignette: #d1d1d1;      
    
    --gm-title-color: #1a1a1a;   
    --gm-subtitle-color: #4a4a4a;
    --gm-line-color: #a0a0a0;
    --gm-title-shadow: 0 4px 10px rgba(0,0,0,0.05);
    
    --gm-btn-primary-bg: #272727; 
    --gm-btn-primary-text: #fcfcfc;
    --gm-btn-primary-shadow: 0 4px 15px rgba(231, 231, 231, 0.6);
    
    --gm-btn-secondary-bg: rgba(218, 218, 218, 0.8);
    --gm-btn-secondary-border: rgba(0, 0, 0, 0.1);
    --gm-btn-secondary-text: #383838e0;
    
    --gm-tool-bg: rgba(255, 255, 255, 0.8);
    --gm-tool-icon: #4a4a4a;
    --gm-tool-text: #666666;
    
    --gm-piece-color: #000000;
    --gm-piece-opacity: 0.04;
}

html[data-theme="dark"] {
    --gm-bg-base: #202020;
    --gm-bg-pattern: #1c1c1ccc;
    --gm-vignette: #0f0f0f;
    
    --gm-title-color: #f0eeec;   
    --gm-subtitle-color: #e5e0d8; 
    --gm-line-color: #e5e0d8;
    --gm-title-shadow: 0 4px 10px rgba(0,0,0,0.5);
    
    --gm-btn-primary-bg: #e6e6e6; 
    --gm-btn-primary-text: #0e0e0e;
    --gm-btn-primary-shadow: 0 4px 15px rgba(118, 150, 86, 0.2);
    
    --gm-btn-secondary-bg: rgba(43, 43, 43, 0.8);
    --gm-btn-secondary-border: rgba(255, 255, 255, 0.05);
    --gm-btn-secondary-text: #e4e4e4;
    
    --gm-tool-bg: rgba(41, 40, 40, 0.8);
    --gm-tool-icon: #b0b0b0;
    --gm-tool-text: #666666;
    
    --gm-piece-color: #ffffff;
    --gm-piece-opacity: 0.03;
}

body {
    background-color: var(--gm-bg-base); 
    background-image: 
        radial-gradient(ellipse at 50% 50%, var(--gm-bg-base) 70%, transparent 100%),
        linear-gradient(45deg, var(--gm-bg-pattern) 25%, transparent 25%, transparent 75%, var(--gm-bg-pattern) 75%, var(--gm-bg-pattern)),
        linear-gradient(45deg, var(--gm-bg-pattern) 25%, transparent 25%, transparent 75%, var(--gm-bg-pattern) 75%, var(--gm-bg-pattern));
    background-size: 100% 100%, 90px 90px, 90px 90px;
    background-position: center, 0 0, 45px 45px;
    background-repeat: no-repeat, repeat, repeat;
}

#start-menu {
    position: fixed;
    inset: 0;
    background-color: var(--gm-bg-base); 
    background-image: 
        radial-gradient(ellipse at 50% 50%, var(--gm-bg-base) 70%, transparent 100%),
        linear-gradient(45deg, var(--gm-bg-pattern) 25%, transparent 25%, transparent 75%, var(--gm-bg-pattern) 75%, var(--gm-bg-pattern)),
        linear-gradient(45deg, var(--gm-bg-pattern) 25%, transparent 25%, transparent 75%, var(--gm-bg-pattern) 75%, var(--gm-bg-pattern));
    background-size: 100% 100%, 90px 90px, 90px 90px;
    background-position: center, 0 0, 45px 45px;
    background-repeat: no-repeat, repeat, repeat;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gm-menu-icon {
    width: 5vh;
    height: 5vh;
    object-fit: contain;
    transition: filter 0.4s ease; 
    pointer-events: none;
}

.gm-icon-knight {
    background-color: var(--gm-btn-secondary-text); 
    -webkit-mask: url('img/p/wP.svg') no-repeat center;
    mask: url('img/p/wwP.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.gm-icon-queen {
    background-color: var(--gm-btn-primary-text); 
    -webkit-mask: url('img/p/wwQ.svg') no-repeat center;
    mask: url('img/p/wwQ.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.gm-icon-bishop {
    background-color: var(--gm-btn-secondary-text); /* ← свой цвет */
    -webkit-mask: url('img/p/wwB.svg') no-repeat center;
    mask: url('img/p/wwB.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Убедимся, что кнопка правильно выравнивает контент (объединенные свойства базовой кнопки) */
.gm-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    padding: 3.3vh 3vw; /* Приоритетный padding из оригинального кода */
    border: none;
    cursor: pointer;
    font-size: 3vh;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.gm-btn svg {
    width: 27px;
    height: 27px;
}

/* Фигура на фоне */
.gm-bg-piece {
    position: absolute;
    right: -10vw;
    bottom: -10vh;
    width: 60vmin;
    height: 60vmin;
    color: var(--gm-piece-color);
    opacity: var(--gm-piece-opacity);
    pointer-events: none;
    transition: color 0.4s ease, opacity 0.4s ease;
    display: none;
}

.gm-menu-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 65vh;
    max-width: 50vw;
}

.gm-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 9vh;
    font-weight: 900;
    color: var(--gm-title-color);
    margin: 0;
    letter-spacing: 2px;
    text-shadow: var(--gm-title-shadow);
    text-align: center;
    transition: color 0.4s ease;
}

.gm-subtitle-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 1vh;
    margin-bottom: 5vh;
    opacity: 0.6;
}

.gm-line {
    height: 1px;
    width: 3vw;
    background-color: var(--gm-line-color);
    transition: background-color 0.4s ease;
}

.gm-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 2.2vh;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--gm-subtitle-color);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.4s ease;
}
/* Кнопки режимов */
.gm-modes {
    display: flex;
    flex-direction: column;
    gap: 2vh;
    width: 100%;
    margin-bottom: 4vh;
    align-items: center;
}

.gm-btn-primary {
    background-color: var(--gm-btn-primary-bg);
    color: var(--gm-btn-primary-text);
    border-radius: 17px;
    box-shadow: var(--gm-btn-primary-shadow);
    width: 100%;
    padding: 3.2vh 3vw;
    font-size: 4.3vh;
}

.gm-btn-primary:active {
    transform: scale(0.98);
    filter: brightness(0.9);
}

.gm-btn-secondary {
    background-color: var(--green1);
    color: var(--white);
    border-radius: 15px;
    border: 0px solid var(--gm-btn-secondary-border);
    backdrop-filter: blur(5px);
}

.gm-btn-secondary:active {
    transform: scale(0.98);
    background-color: var(--gm-bg-pattern);
}

/* Нижние инструменты */
.gm-tools {
    display: flex;
    justify-content: center;
    gap: 1.2vw;
    width: 100%;
}

.gm-tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
    cursor: pointer;
    transition: opacity 0.2s;
}

.gm-tool-item:active {
    opacity: 0.6;
}

.gm-tool-btn {
    width: 10vh;
    height: 10vh;
    background-color: var(--gm-btn-secondary-bg);
    border: 0px solid var(--gm-btn-secondary-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gm-tool-icon);
    cursor: pointer;
    pointer-events: none;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.gm-tool-btn svg {
    width: 5vh; /* Изменено в оригинале на 24px */
    height: 5vh;
}

.gm-tool-item span {
    font-family: 'Roboto', sans-serif;
    font-size: 1.5vh;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--gm-tool-text);
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.sound-off-icon.hidden, .sound-on-icon.hidden {
    display: none !important;
}

/* --- КНОПКА ПЕРЕКЛЮЧЕНИЯ ТЕМЫ --- */
.theme-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 3999;
    background-color: var(--bg-secondary);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    color: var(--text-primary);
}

.theme-toggle-btn:hover {
    transform: scale(1.1);
}

.theme-toggle-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.theme-toggle-btn .sun { display: block; }
.theme-toggle-btn .moon { display: none; }

html[data-theme="dark"] .theme-toggle-btn .sun { display: none; }
html[data-theme="dark"] .theme-toggle-btn .moon { display: block; }

/* По умолчанию скрываем левую панель */
.side-panel-left {
    display: none; 
    width: 17vw;
    flex-direction: column;
    gap: 1.5vh;
    animation: fadeIn 0.3s ease;
}

/* --- БОКОВОЙ ЛИДЕРБОРД (Топ 7) --- */
.advice-box {
    background: #ffffff;
    border-radius: 1.6vh;
    padding: 0; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 0px solid #e5e5e5;
}

/* Шапка лидерборда (серый фон) */
.lb-header {
    background: #f4f4f4;
    padding: 1.5vh 1.2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
}

.lb-header-title {
    font-weight: 700;
    font-size: 1.6vh;
    color: #777;
    display: flex;
    align-items: center;
    gap: .9vh;
}

.lb-header-title svg {
    width: 1.8vh;
    height: 1.8vh;
    fill: #a0a0a0;
}

.lb-header-points {
    font-size: 1.5vh;
    color: #999;
    font-weight: 700;
}

/* Ряды списка */
#leaderboard-list {
    display: flex;
    flex-direction: column;
    padding: 0.6vh 0 .6vh 0;
}

.lb-row {
    display: flex;
    align-items: center;
    gap: .8vh;
    padding: 1vh 1vw;
    border-bottom: 1px solid #f0f0f0;
    background: #ffffff;
}

.lb-row:last-child {
    border-bottom: none;
}

/* Спец-ряд для "Вы", если не в топе */
.lb-row.lb-row-me {
    background: #fcfcfc;
    border-top: 2px dashed #e5e5e5;
}

/* Медали и номера */
.lb-place {
    width: 2.4vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: #4a4a4a;
}

.lb-place-num {
    font-size: 1.6vh;
    font-weight: 700;
    color: #cfcfcf;
}

.medal-svg {
    width: 2.2vh;
    height: 2.2vh;
}

.medal-gold { fill: #c5bd73; }   /* Фиолетовый оттенок 1 места */
.medal-silver { fill: #a3a3ab; } /* Серебристый 2 места */
.medal-bronze { fill: #b2998e; } /* Бронзовый 3 места */

/* Аватарка в виде скругленного квадрата */
.lb-avatar {
    width: 3.5vh;
    height: 3.5vh;
    border-radius: 1vh;
    object-fit: cover;
    background-color: #f3f3f3;
    flex-shrink: 0;
}

.lb-name {
    flex: 1;
    font-size: 1.6vh;
    font-weight: 600;
    color: #4a4a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-score {
    font-size: 1.5vh;
    font-weight: 700;
    color: #6d6d6d;
}

/* --- ТЁМНАЯ ТЕМА --- */
html[data-theme="dark"] .advice-box {
    background: #2b2b2b;
    border-color: #3a3a3a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .lb-header { background: #333333; border-bottom-color: #3d3d3d; }
html[data-theme="dark"] .lb-header-title { color: #d0d0d0; }
html[data-theme="dark"] .lb-header-points { color: #888; }
html[data-theme="dark"] .lb-row { background: #2b2b2b; border-bottom-color: #383838; }
html[data-theme="dark"] .lb-row.lb-row-me { background: #303030; border-top-color: #444; }
html[data-theme="dark"] .lb-name, 
html[data-theme="dark"] .lb-score { color: #e5e5e5; }
html[data-theme="dark"] .lb-avatar { background-color: #444; }
html[data-theme="dark"] .lb-place-num { color: #666; }

.advice-title {
    font-weight: bold;
    font-size: 1.6vh;
    color: var(--text-primary);
}

.advice-text {
    font-size: 1.6vh;
    line-height: 1.5;
    color: var(--text-secondary);
}

.advice-btn {
    padding: 8px 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.advice-btn:hover {
    background: #2563eb;
}


/* --- СТАТИСТИКА БАЗА (НОВЫЙ ДИЗАЙН) --- */
.stats-box {
    background: #f4f4f4;
    border-radius: 1.6vh;
    padding: 1.5vh 1.3vw;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.sb-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .1vh 0;
}

.sb-row-main {
    padding-bottom: .5vh;
}

.sb-label {
    font-size: 3.7vw;
    color: #666;
    font-weight: 400;
}

.sb-value-main {
    font-size: 4vw;
    color: #888;
    font-weight: 300;
}

.sb-value {
    font-size: 3.6vw;
    color: #555;
    font-weight: 500;
}

.sb-value-light {
    font-size: 3.6vw;
    color: #aaa;
    font-weight: 500;
}

.sb-divider {
    height: .1vh;
    background: #e0e0e0;
    margin: .3vh 0;
}

.sb-divider-light {
    height: .1vh;
    background: #ebebeb;
    margin: .3vh 0;
}

.sb-color-block {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    padding: .3vh 0;
}

.sb-color-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sb-color-title {
    display: flex;
    align-items: center;
    gap: 1vh;
    font-size: 3.6vw;
    color: #333;
    font-weight: 500;
}

.sb-circle {
    width: 3.8vw;
    height: 3.8vw;
    border-radius: 50%;
}

.sb-circle-black {
    background: #333;
}

.sb-circle-white {
    background: #fff;
    border: .1vh solid #ccc;
    box-sizing: border-box;
}

.sb-color-data {
    font-size: 3.6vw;
    color: #555;
    font-weight: 500;
}

.sb-bar-bg {
    width: 100%;
    height: 1vh;
    background: #e4e4e4;
    border-radius: 4px;
    overflow: hidden;
}

.sb-bar-fill {
    height: 100%;
    border-radius: .4vh;
    transition: width 0.5s ease;
}

.sb-fill-black {
    background: #444; 
}

.sb-fill-white {
    background: var(--green); /* Пыльно-фиолетовый как на скрине */
}

/* --- ТЁМНАЯ ТЕМА СТАТИСТИКИ --- */
html[data-theme="dark"] .stats-box { background: #2b2b2b; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
html[data-theme="dark"] .sb-label { color: #aaa; }
html[data-theme="dark"] .sb-value-main { color: #eee; }
html[data-theme="dark"] .sb-value { color: #ddd; }
html[data-theme="dark"] .sb-value-light { color: #666; }
html[data-theme="dark"] .sb-divider { background: #444; }
html[data-theme="dark"] .sb-divider-light { background: #383838; }
html[data-theme="dark"] .sb-color-title { color: #eee; }
html[data-theme="dark"] .sb-color-data { color: #999; }
html[data-theme="dark"] .sb-bar-bg { background: #3a3a3a; }
html[data-theme="dark"] .sb-circle-white { background: #e0e0e0; border-color: #eee; }
html[data-theme="dark"] .sb-circle-black { background: #1a1a1a; border: 1px solid #333; }
html[data-theme="dark"] .sb-fill-black { background: #777; }
html[data-theme="dark"] .sb-fill-white { background: var(--green); }

/* --- МОДАЛЬНОЕ ОКНО НАСТРОЕК --- */
.settings-modal-content {
    background: var(--gray-300);
    padding: 4vh;
    border-radius: 20px;
    width: auto;
    /* max-width: 330px; */
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.settings-title { margin: 0 0 20px 0; font-size: 22px; color: var(--text-primary); }
.settings-section { margin-bottom: 2vh; }
.settings-label { font-size: 1.7vh; text-transform: uppercase; font-weight: 900; color: var(--text-secondary); margin-bottom: 1.5vh; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 1.2vh 0; cursor: pointer; border-top: 1px solid rgba(0,0,0,0.05); }
.settings-info { text-align: left; }
.settings-row-title { font-weight: bold; color: var(--text-primary); font-size: 2.5vh; }
.settings-row-desc { font-size: 2vh; color: var(--gray-500); }

/* Switch */
.custom-switch { width: 54px; height: 30px; background: #c4c4c4; border-radius: 15px; position: relative; transition: background 0.3s; }
.switch-handle { width: 24px; height: 24px; background: white; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.custom-switch svg { width: 14px; height: 14px; fill: none; stroke: #64748b; stroke-width: 2; position: absolute; transition: opacity 0.2s; }
.moon-icon, .sound-off-svg { opacity: 0; }
.custom-switch.active { background: #3b82f6; }
.custom-switch.active .switch-handle { transform: translateX(24px); }
.custom-switch.active .sun-icon { opacity: 0; }
.custom-switch.active .moon-icon { opacity: 1; stroke: #3b82f6; }
.custom-switch.active .sound-on-svg { opacity: 1; stroke: #3b82f6; }
.custom-switch.active .sound-off-svg { opacity: 0; }

/* Превью досок */
.board-themes-row { display: flex; justify-content: center; gap: 3vh; }
.board-theme-preview { width: 10vh; height: 10vh; border: 3px solid transparent; border-radius: 10px; display: flex; flex-wrap: wrap; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
.board-theme-preview:hover { transform: scale(1.1); }
.board-theme-preview.active { border-color: #3b82f6; }
.sq-p { width: 50%; height: 50%; }
.sq-p.pale { background: #f0d9b5; } .sq-p.brown { background: #b58863; }
.sq-p.white { background: #eeeed2; } .sq-p.green { background: #769656; }

.settings-done-btn { margin-top: 2vh; width: 70%; padding: 1.5vh; border-radius: 12px; border: none; background: #3b82f6; color: white; font-weight: 900; font-size: 2.1vh; cursor: pointer; }

/* --- ТОСТ АНИМАЦИИ --- */
@keyframes toast-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }

/* --- МОДАЛЬНОЕ ОКНО СТАТИСТИКИ --- */
.stats-modal-card { background: var(--gray-300); border-radius: 24px; padding: 3vh 4vh 3vh; width: 90%;  box-shadow: 0 20px 60px rgba(0,0,0,0.4); display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1vh; }
.smc-title { font-size: 18px; font-weight: 900; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
.smc-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gray-200); }
.smc-row:last-of-type { border-bottom: none; }
.smc-label { font-size: 14px; font-weight: bold; color: var(--gray-500); }
.smc-value { font-size: 18px; font-weight: 900; color: var(--text-primary); }
.smc-highlight .smc-label { color: var(--text-primary); font-size: 15px; }
.smc-highlight .smc-value { font-size: 18px; }
.smc-bar-wrap { padding: 10px 0; }
.smc-bar-track { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--gray-200); }
.smc-bar-track div { transition: width 0.4s; }
.smc-bar-labels { display: flex; justify-content: space-between; font-size: 13px; font-weight: bold; padding: 6px 2px 0; }
.smc-lbl-win  { color: #16a34a; }
.smc-lbl-draw { color: #9ca3af; }
.smc-lbl-loss { color: #ef4444; }
.smc-color-bars { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--gray-200); }
.smc-color-row { display: flex; align-items: center; gap: 10px; }
.smc-piece { width: 22px; height: 22px; }
.smc-color-track { flex: 1; height: 8px; border-radius: 99px; background: var(--gray-200); overflow: hidden; }
.smc-color-track div { height: 100%; width: 0%; transition: width 0.4s; }
.smc-pct { font-size: 13px; font-weight: bold; color: var(--text-primary); width: 32px; text-align: right; }
.smc-streak-row { border-bottom: none; }
.smc-streak-val { font-size: 1.5vh; font-weight: bold; }
.smc-close-btn { margin-top: 2vh; width: 100%; padding: 2vh; border-radius: 3vh; border: none; background: #3b82f6; color: white; font-weight: 900; font-size: 3.6v; cursor: pointer; }




/* --- МОДАЛЬНОЕ ОКНО РЕЙТИНГА --- */
.lb-modal-card { background: var(--gray-300); border-radius: 24px; padding: 24px 20px 20px; width: 90%; max-width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); max-height: 90vh; overflow-y: auto; }
.lb-modal-title { font-size: 18px; font-weight: 900; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; text-align: center; margin-bottom: 20px; }
.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-bottom: 20px; }
.lb-podium-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.lb-podium-medal { font-size: 20px; margin-bottom: 6px; }
.lb-podium-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gray-200); margin-bottom: 6px; background-color: #d1d5db; }
.lb-podium-avatar-1 { width: 64px; height: 64px; border-color: #f59e0b; }
.lb-podium-name { font-size: 12px; font-weight: 900; color: var(--text-primary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; margin-bottom: 2px; }
.lb-podium-score { font-size: 13px; font-weight: 900; color: #3b82f6; margin-bottom: 8px; }
.lb-podium-base { width: 100%; border-radius: 6px 6px 0 0; }
.lb-podium-base-1 { height: 48px; background: #f59e0b; }
.lb-podium-base-2 { height: 32px; background: #9ca3af; }
.lb-podium-base-3 { height: 20px; background: #b45309; }
.lb-modal-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }

/* --- НИЖНЯЯ ПАНЕЛЬ С КНОПКАМИ --- */
.bottom-bar {
    display: flex;
    align-items: center; 
    justify-content: center;
    /* gap: .6vw; */
    /* height: 6vh;  */
    width: 100%;
    /* padding: 0 1vh; */
}

.bottom-bar .btn-hint {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; 
    height: 5vh;
}

#new-game-btn .text { font-size: 1vw; font-weight: 600; white-space: nowrap; text-align: center; color: white; }
#new-game-btn.wide-mode { background: #579b74 !important; color: white !important; padding: 1vh 1.2vw; }

/* --- СКРОЛЛБАРЫ --- */
/* Chrome, Edge, Safari (Webkit) */
#move-history-list::-webkit-scrollbar { width: 6px; height: 6px; }
#move-history-list::-webkit-scrollbar-track { background: transparent; border-radius: 10px; }
#move-history-list::-webkit-scrollbar-thumb { background: rgba(120, 120, 120, 0.4); border-radius: 10px; transition: background 0.3s; }
#move-history-list::-webkit-scrollbar-thumb:hover { background: rgba(150, 150, 150, 0.7); }

/* Firefox */
#move-history-list { scrollbar-width: thin; scrollbar-color: rgba(120, 120, 120, 0.4) transparent; }



    /* --- ОБЩИЕ СТИЛИ МОДАЛЬНОГО ОКНА --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px); /* Добавил легкое размытие фона */
}

.modal-card {
    background: white;
    padding: 5vw;
    border-radius: 3vw;
    /* width: 90%; */
    /* max-width: 350px; */
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.modal-main-title {
    margin: 0 0 3vw 0;
    font-size: 5vw;
    color: #1f2937; /* var(--gray-800) */
}

.modal-label {
    font-weight: bold;
    color: #6b7280; /* var(--gray-500) */
    margin-bottom: 2vw;
    font-size: 4vw;
    text-transform: uppercase;
    text-align: center;
}

.modal-section {
    margin-bottom: 4vw;
}

/* --- ВЫБОР ЦВЕТА --- */
.color-selector {
    display: flex;
    justify-content: center;
    gap: 2vw;
    margin-bottom: 3vw;
}

/* --- ВЫБОР УРОВНЯ (СЛАЙДЕР) --- */
#level-slider {
    width: 100%;
    accent-color: #494949;
    margin-bottom: 4vw;
    cursor: pointer;
}

/* --- ПРОФИЛЬ БОТА --- */
.opponent-profile-box {
    display: flex;
    align-items: center;
    gap: 2vw;
    justify-content: flex-start;
    padding: 0 3vw;
}

#level-avatar {
    width: 13vw;
    height: 13vw;
    border-radius: 2vw;
    object-fit: cover;
    -webkit-user-drag: none;
}

.opponent-info {
    text-align: left;
}

#level-name {
    font-size: 4vw;
    font-weight: 900;
    color: #1f2937; /* var(--gray-800) */
    line-height: 1.2;
}

#level-desc {
    font-size: 2.5vw;
    font-weight: bold;
    color: #888;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

.color-btn {
    width: 25vw;
    height: 25vw;
    background: #f0d9b5;
    border: 3px solid transparent;
    border-radius: 3vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* --- КНОПКИ ДЕЙСТВИЙ --- */
.modal-actions {
    display: flex;
    gap: 2vw;
}

.modal-btn {
    flex: 1;
    padding: 2.5vw;
    border-radius: 2vw;
    border: none;
    font-weight: bold;
    font-size: 5vw;
    cursor: pointer;
    transition: filter 0.2s;
}


.modal-btn.secondary {
    color: #333333;
    background: #fff;
    border: 2px solid var(--green);
}

.modal-btn.primary {
    background: var(--green);
    color: white;
}

/* =========================================================
   ЧАСТЬ 2: МЕДИАЗАПРОСЫ (АДАПТИВ)
   Собранные со всего исходного кода без потери логики
   ========================================================= */

/* --- ПОРТРЕТНАЯ ОРИЕНТАЦИЯ (МОБИЛЬНЫЕ ТЕЛЕФОНЫ) --- */
@media (orientation: portrait) {

        .gm-tool-btn {
    width: 15vw;
    height: 15vw;
    background-color: var(--gm-btn-secondary-bg);
    border: 0px solid var(--gm-btn-secondary-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gm-tool-icon);
    cursor: pointer;
    pointer-events: none;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}
.gm-tool-btn svg {
    width: 8vw;
    height: 8vw;
}

    /* Фон стартового меню */
    body {
        background-color: var(--gm-bg-base); 
        background-image: 
            radial-gradient(ellipse at 50% 50%, var(--gm-bg-base) 80%, transparent 100%),
            linear-gradient(45deg, var(--gm-bg-pattern) 25%, transparent 25%, transparent 75%, var(--gm-bg-pattern) 75%, var(--gm-bg-pattern)),
            linear-gradient(45deg, var(--gm-bg-pattern) 25%, transparent 25%, transparent 75%, var(--gm-bg-pattern) 75%, var(--gm-bg-pattern));
        background-size: 100% 100%, 60px 60px, 60px 60px;
        background-position: center, 0 0, 30px 30px;
        background-repeat: no-repeat, repeat, repeat;
    }
    
    /* Элементы стартового меню */
    .gm-menu-content { width: 85%; max-width: 850px; }
    .gm-title { font-size: 12vw; }
    .gm-subtitle-container { gap: 15px; margin-top: 1vw; margin-bottom: 5vw; opacity: 0.6; }
    .gm-subtitle { font-size: 2vw; }
    .gm-modes { gap: 2vh; width: 100%; margin-bottom: 6vw; }
    .gm-btn { width: 96%; padding: 6vw 6vw; border: none; cursor: pointer; font-size: 4vw; letter-spacing: 1px; text-align: left; }
    .gm-btn-primary { width: 100%; font-size: 5.5vw;}
    .gm-tools { gap: 3vw; width: 100%; }
    .gm-tool-item { display: flex; flex-direction: column; align-items: center; gap: 2vw; cursor: pointer; transition: opacity 0.2s; }
    .gm-tool-item span { font-family: 'Roboto', sans-serif; font-size: 2vw; font-weight: 700; letter-spacing: 0.1em; color: var(--gm-tool-text); text-transform: uppercase; transition: color 0.3s ease; }
    .gm-tool-btn {
            width: 13vw;
    height: 13vw;
    }
    .gm-tool-btn svg {
    width: 5vw;
    height: 5vw;
}
    /* Игровой экран */
    .player-name {
    font-size: 5.5vw; max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .game-container { display: flex; flex-direction: column; align-items: center; gap: 0vh; }
    .xmnozh { font-size: 3vw !important; top: -.5vw !important; }
    .player-profile { display: flex; align-items: center; gap: 2vh; 
        /* padding: 1.4vh 1.4vh;  */
        /* background: var(--gray-300);  */
        width: 88vw; border-radius: 4vw; color: white; }
    .btn-secondary { background-color: var(--gray-300); color: #484544; box-shadow: 0 0px 0 #d1d1d1; }
    .avatar { width: 9vh; height: 9vh; display: flex; align-items: center; justify-content: center; font-size: 2.5vh; }
    .side-panel { display: contents; } /* Магия: заставляем side-panel "исчезнуть" как контейнер */
    .text { display: none; } /* Скрыть слова на телефонах */
    .btn-hint { flex: 1; }
    
/* 1. Возвращаем видимость истории ходов и ставим ее наверх (order: 1) */
    #move-history { 
        order: 1; 
        width: 100vw; 
        height: 6.6vh; 
        /* min-height: 40px; */
        /* margin-bottom: 1vh;  */
        display: flex; /* Возвращаем видимость! Было display: none */
        background: var(--gray-200); /* Фон строки */
        border-radius: 0vw;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
         touch-action: pan-x !important;
    }

    /* 2. Делаем список горизонтальным */
    .history-list { 
        display: flex !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        overflow-x: auto !important; /* Включаем горизонтальный скролл */
        overflow-y: hidden !important; 
        align-items: center; 
        padding: 0 4vw !important; 
        gap: 2vw !important; 
        width: 100%;
        
        /* МАГИЯ ДЛЯ МОБИЛОК: разрешаем свайп вправо-влево */
        touch-action: pan-x !important; 
        -webkit-overflow-scrolling: touch !important; /* Плавный скролл (инерция) на iOS */
        
        /* Прячем ползунок в Firefox */
        scrollbar-width: none !important; 
    }
    
    #move-history-list::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
.move-text:hover {
    background: none;
}
    .history-row {
        display: flex;
        flex-direction: row !important;
        width: auto !important; 
        background: transparent !important; 
        padding: 0 !important;
        gap: 2vw;
    }

    .move-block {
        display: flex;
        align-items: center;
        gap: 1vw;
        white-space: nowrap; /* Текст не ломается */
    }

    .move-text {
        font-size: 4vw !important; /* Делаем текст читаемым на мобилке */
        padding: 1vw 2vw !important;
    }
    
    .move-number {
        font-size: 3.5vw !important;
    }
        #move-history, 
    #move-history-list, 
    #move-history-list * {
        touch-action: pan-x !important;
    }

    /* 2. Запрещаем элементам сжиматься (иначе флексбокс их сплющит, и скроллить будет нечего) */
    .history-row, 
    .move-block {
        flex-shrink: 0 !important;
    }
    .main-play-area { order: 2; }
    .bottom-bar { order: 3; width: auto; padding-bottom: env(safe-area-inset-bottom); margin: 0 auto 0 auto; background: var(--gray-300); padding: 0; border-radius: 2vh;
        width: 100%;
        padding: 0;
        border-radius: 0;}
    
    .video-icon svg { width: 5.6vh; height: 5.6vh; display: block; fill: var(--gm-btn-secondary-text); }
    .text { font-size: 2.5vw; text-transform: uppercase; font-weight: 700; }
    
    /* История ходов */
    .history-list { display: flex; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; gap: 12px; padding: 0 10px; align-items: center; height: 100%; }
    .move-group { scroll-snap-align: start; flex-shrink: 0; }
    .game-result-history { display: none; }
    .timer {
        margin-left: auto;
        background: var(--timer);
        color: #ffffff;
        padding: 2.5vw 2.8vw;
        border-radius: 1.5vw;
        font-family: 'Courier New', monospace;
        font-size: 4vw;
        font-weight: bold;
        /*min-width: 70px;*/
        text-align: center;
    }
    html[data-theme="dark"] .history-row.active-row {
    background-color: var(--gray-200) !important;
}
    .score-diff {
        font-size: 4vw;
        font-weight: bold;
        color: #16a34a;
    }
    .btn-hint {
        /* padding: 1.5vw 5vw; */
        border-radius: 0vw;
        height: 9vh  !important;;
    }
    /* Нижняя панель с кнопками */
    .bottom-bar { display: flex; align-items: center; justify-content: center; gap: 0px; background: none;}
    #new-game-btn .text { font-size: 5vw; font-weight: 600; white-space: nowrap; text-align: center; color: white; }
    #new-game-btn.wide-mode { background: #579b74 !important; color: white !important; padding: 2.5vw 4.9vw; margin: 0; border-radius: 0vw; }
    /* .is-game-over { background: none; gap: 1vw; } */
    .is-game-over-btn { padding: 1.5vw; }
    .main-play-area {
    display: flex;
    flex-direction: column;
    /* gap: 0vh; */
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
}

.piece-preview {
    width: 20vw;
    height: 20vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 4px;
    border: 3px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}
.smc-close-btn { margin-top: 2vh; width: 100%; padding: 3vw; border-radius: 3vh; border: none; background: #3b82f6; color: white; font-weight: 900; font-size: 3.6vw; cursor: pointer; }
.piece-preview:hover { transform: scale(1.1); }
.piece-preview.active { border-color: #3b82f6; }

.piece-preview .piece-cell {
    width: 16.5vw;
    height: 16.5vw;
    border-radius: 6px;
    background: var(--current-board-dark, #b58863);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.piece-preview.active .piece-cell {
    transform: scale(1.15);
}

.piece-preview .piece-cell img {
    width: 13vw !important;
    height: 13vw !important;
}
/* Превью досок */
.board-themes-row { display: flex; justify-content: center; gap: 3vh; }
.board-theme-preview { width: 15vw; height: 15vw; border: 3px solid transparent; border-radius: 1.5vw; display: flex; flex-wrap: wrap; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
.board-theme-preview:hover { transform: scale(1.1); }
.board-theme-preview.active { border-color: #3b82f6; }
.sq-p { width: 50%; height: 50%; }
.sq-p.pale { background: #f0d9b5; } .sq-p.brown { background: #b58863; }
.sq-p.white { background: #eeeed2; } .sq-p.green { background: #769656; }

.settings-done-btn { margin-top: 2vh; width: 70%; padding: 1.5vh; border-radius: 12px; border: none; background: #3b82f6; color: white; font-weight: 900; font-size: 2.1vh; cursor: pointer; }

}


/* --- ЛАНДШАФТНАЯ ОРИЕНТАЦИЯ (АЛЬБОМНАЯ) --- */
@media (orientation: landscape) {
    #home-btn {
        border-radius: 1vh 0 0 1vh;
    }
        #btn-bottom-lb, #btn-bottom-stats {
        display: none !important;
    }

    #settings-btn {
        border-radius: 0 1vh 1vh 0;
    }
    #new-game-btn.wide-mode {
        width: 75%;
        border-radius: 0 1vh 1vh 0;
    }
    
    .game-container { flex-direction: row; justify-content: center; align-items: center; gap: 2vw; display: flex; }
    .player-profile { display: flex; align-items: center; gap: 2vh; padding: 0vh 3vh; height: 6vh; width: 100%; }
    .coord { position: absolute; font-size: 2vh; font-weight: bold; pointer-events: none; z-index: 5; opacity: 0.8; }
    .coord.rank { top: 0.5vh; left: 0.5vh; }
    .coord.file { bottom: 0.5vh; right: 0.5vh; }
    
    .btn-secondary { background-color: #8b8b8b; color: #ffffff; box-shadow: 0 4px 0 #d1d1d1; }
    .player-name { font-size: 1.1vw; }
    .score-diff { font-size: 1vw; }
    .player-profile { gap: 2vh; padding: 0vh 1vw; }
    
    .chess-board { width: 85vh; height: 85vh; box-shadow: 0 10px 30px rgba(0,0,0,0.3); border-radius: 4px; }
    
    .side-panel { width: 18vw; align-items: stretch; gap: 4vw; display: flex; flex-direction: column; gap: 2vh; }
    .top-bar { flex-direction: column; gap: 1vw; }
    .stat-card { background: white; padding: 1.5vw 3vw; border-radius: 1.5vw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0vw; width: 100%; box-sizing: border-box; }
    .stat-label { font-size: 1.5vh; font-weight: 900; text-transform: uppercase; }
    .stat-value { font-size: 3.2vw; font-weight: 900; }
    
    .bottom-bar { display: flex; justify-content: center; margin: 0vh auto 0 auto; }
    .btn-hint { font-size: 1.5vw; padding: 1.5vh 2vw; border-radius: 0vh; gap: 1vw; }
    .video-icon svg { width: 2vw; height: 2vw; display: block; fill: currentColor; }
    .text { display: none; }
    
    .history-container { width: 100%; max-height: 40vh; min-height: 40vh; order: 0; }
    .history-list { flex-direction: row; flex-wrap: wrap; overflow-y: auto; align-content: flex-start; font-size: 18px; }
    
    .timer { font-size: 1.3vw; min-width: 5vw; }
    
    /* Новая правая колонка */
    .landscape-right-col { display: flex; flex-direction: column; gap: 0.8vw; width: 23vw; justify-content: center; align-items: flex-start; }
    .imgP { width: 2vh !important; height: 2vh !important; }
    .landscape-info-block { background: var(--gray-300); border-radius: 1vw; padding: 1.1vw; display: flex; flex-direction: column; gap: 1.6vh; width: 100%;     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
    
    .timer { font-size: 1.5vw !important; min-width: 5vw !important; margin-left: revert !important; box-shadow: 0 0px 0px rgba(0,0,0,0.2) !important; text-align: center; font-weight: 700; background: var(--gray-300) !important; color: var(--gray-400) !important; padding: 1vh 2vh !important; border-radius: 1vw !important; }
    
    .player-profile { padding: 0 !important; height: auto !important; gap: 1.5vh; }
    .avatar { width: 6vh; height: 6vh; border-radius: 20%; display: flex; align-items: center; justify-content: center; font-size: 2.5vh; }
    .profile-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; }
    .player-name { font-size: 1.1vw; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 11vw; }
    .name-row { display: flex; align-items: center; gap: 8px; }
    
    .history-container { width: 100%; max-height: 36vh; min-height: 34vh; order: 0; background: var(--gray-200) !important; border-radius: 0.5vw .5vw 0 0; }
    .history-list { flex-direction: row; flex-wrap: wrap; overflow-y: auto; align-content: flex-start; font-size: 1.6vh; }
    
    .bottom-bar { display: flex; justify-content: center; margin: 0vh auto 0 auto; 
        /* gap: .6vw;         background: var(--gray-200); */
        border-radius: 0 0 0.5vw 0.5vw;
        margin-top: -.9vh;}
    .btn-hint { font-size: 1vw; padding: 1vh 1vh; border-radius: 0vh; gap: 1vw; background-color: var(--gray-200); color: #484544; box-shadow: 0 0px 0 #d1d1d1;  width: 25%; }
    .video-icon svg { width: 2.5vw; height: 2.5vw; display: block; fill: var(--gm-btn-secondary-text);}
    
    .main-play-area { display: flex; align-items: center; justify-content: center; width: auto; }

/* --- СТАТИСТИКА БАЗА (НОВЫЙ ДИЗАЙН) --- */
.stats-box {
    background: #f4f4f4;
    border-radius: 1.6vh;
    padding: 1.5vh 1.3vw;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.sb-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .1vh 0;
}

.sb-row-main {
    padding-bottom: .5vh;
}

.sb-label {
    font-size: 1.7vh;
    color: #666;
    font-weight: 400;
}

.sb-value-main {
    font-size: 2vh;
    color: #888;
    font-weight: 300;
}

.sb-value {
    font-size: 1.6vh;
    color: #555;
    font-weight: 500;
}

.sb-value-light {
    font-size: 1.6vh;
    color: #aaa;
    font-weight: 500;
}

.sb-divider {
    height: .1vh;
    background: #e0e0e0;
    margin: .3vh 0;
}

.sb-divider-light {
    height: .1vh;
    background: #ebebeb;
    margin: .3vh 0;
}

.sb-color-block {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    padding: .3vh 0;
}

.sb-color-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sb-color-title {
    display: flex;
    align-items: center;
    gap: 1vh;
    font-size: 1.6vh;
    color: #333;
    font-weight: 500;
}
.bottom-bar .btn-hint {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 7vh;
}
.sb-circle {
    width: 1.8vh;
    height: 1.8vh;
    border-radius: 50%;
}

.sb-circle-black {
    background: #333;
}

.sb-circle-white {
    background: #fff;
    border: .1vh solid #ccc;
    box-sizing: border-box;
}

.sb-color-data {
    font-size: 1.6vh;
    color: #555;
    font-weight: 500;
}

.sb-bar-bg {
    width: 100%;
    height: 1vh;
    background: #e4e4e4;
    border-radius: 4px;
    overflow: hidden;
}

.sb-bar-fill {
    height: 100%;
    border-radius: .4vh;
    transition: width 0.5s ease;
}
/*=========================================*/

/* --- ОБЩИЕ СТИЛИ МОДАЛЬНОГО ОКНА --- */
.stats-modal-card {
max-width: 500px;

}
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px); /* Добавил легкое размытие фона */
}

.modal-card {
    background: white;
    padding: 2.4vh;
    border-radius: 2vh;
    /* width: 90%;
    max-width: 350px; */
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    max-height: 80vh;
}

.modal-main-title {
    margin: 0 0 2vh 0;
    font-size: 3vh;
    color: #1f2937; /* var(--gray-800) */
}

.modal-label {
    font-weight: bold;
    color: #6b7280; /* var(--gray-500) */
    margin-bottom: 1vh;
    font-size: 1.8vh;
    text-transform: uppercase;
    text-align: center;
}

.modal-section {
    margin-bottom: 2vh;
}
.time-segment-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 1vh 2vh;
    font-size: 2vh;
    font-weight: 600;
    color: #4a4a4a;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    outline: none;
}

.color-btn {
    width: 9.2vh;
    height: 9.2vh;
    background: #f0d9b5;
    border: 3px solid transparent;
    border-radius: 1.6vh;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* --- ВЫБОР ЦВЕТА --- */
.color-selector {
    display: flex;
    justify-content: center;
    gap: 2vh;
    margin-bottom: 2vh;
}

/* --- ВЫБОР УРОВНЯ (СЛАЙДЕР) --- */
#level-slider {
    width: 100%;
    accent-color: #494949;
    margin-bottom: 2vh;
    cursor: pointer;
}

/* --- ПРОФИЛЬ БОТА --- */
.opponent-profile-box {
    display: flex;
    align-items: center;
    gap: 1.2vh;
    justify-content: flex-start;
    padding: 0 1vw;
}

#level-avatar {
    width: 4.4vh;
    height: 4.4vh;
    border-radius: 10px;
    object-fit: cover;
    -webkit-user-drag: none;
}

.opponent-info {
    text-align: left;
}

#level-name {
    font-size: 2.5vh;
    font-weight: 900;
    color: #1f2937; /* var(--gray-800) */
    line-height: 1.2;
}

#level-desc {
    font-size: 1.5vh;
    font-weight: bold;
    color: #888;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

/* --- КНОПКИ ДЕЙСТВИЙ --- */
.modal-actions {
    display: flex;
    gap: 1.5vh;
}

.modal-btn {
    flex: 1;
    padding: 1.3vh;
    border-radius: 1.2vh;
    border: none;
    font-weight: bold;
    font-size: 2vh;
    cursor: pointer;
    transition: filter 0.2s;
}

.modal-btn:active {
    filter: brightness(0.9);
}

.modal-btn.secondary {
    background: var(--white); /* var(--gray-200) */
    color: #333; /* var(--text-primary) */
}

.modal-btn.primary {
    background: #3b82f6;
    color: white;
}

/* --- МОДАЛЬНОЕ ОКНО НАСТРОЕК --- */
.settings-modal-content {
    background: var(--gray-300);
    padding: 4vh;
    border-radius: 20px;
    width: 80vw;
    max-width: 50vh;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.settings-title { margin: 0 0 20px 0; font-size: 2vh; color: var(--text-primary); }
.settings-section { margin-bottom: 2vh; }
.settings-label { font-size: 2.7vh; text-transform: uppercase; font-weight: 900; color: var(--text-secondary); margin-bottom: 1.5vh; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 1.2vh 0; cursor: pointer; border-top: 1px solid rgba(0,0,0,0.05); }
.settings-info { text-align: left; }
.settings-row-title { font-weight: bold; color: var(--text-primary); font-size: 2.7vh; }
.settings-row-desc { font-size: 2.3vh; color: var(--gray-500); }

/* Switch */
.custom-switch { width: 54px; height: 30px; background: #c4c4c4; border-radius: 15px; position: relative; transition: background 0.3s; }
.switch-handle { width: 24px; height: 24px; background: white; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.custom-switch svg { width: 14px; height: 14px; fill: none; stroke: #64748b; stroke-width: 2; position: absolute; transition: opacity 0.2s; }
.moon-icon, .sound-off-svg { opacity: 0; }
.custom-switch.active { background: #3b82f6; }
.custom-switch.active .switch-handle { transform: translateX(24px); }
.custom-switch.active .sun-icon { opacity: 0; }
.custom-switch.active .moon-icon { opacity: 1; stroke: #3b82f6; }
.custom-switch.active .sound-on-svg { opacity: 1; stroke: #3b82f6; }
.custom-switch.active .sound-off-svg { opacity: 0; }



}


/* --- РАЗЛИЧНЫЕ ПРОПОРЦИИ ЭКРАНА (МЕДИАЗАПРОСЫ ПО СООТНОШЕНИЮ СТОРОН) --- */

@media (min-aspect-ratio: 2/3) and (max-aspect-ratio: 4/5) {
        #board-wrapper {
        position: relative;
        height: 100%;
    }
    .player-profile { display: flex; align-items: center; gap: 2vh; padding: .5vh 3vh;  width: 88vw; border-radius: 3vw;  }
    .chess-board { width: 100%; height: 100%; border-radius: 4px; }
    .side-panel { gap: 0vw; }
    .stat-label { font-size: 3.7vw; font-weight: 900; text-transform: uppercase; }
    .stat-value { font-size: 6vw; font-weight: 900; }
    .bottom-bar { display: flex; justify-content: center; }
    .btn-hint { font-size: 2vw !important; padding: 1vw 2vw !important; border-radius: 0vw !important; }
    .video-icon svg {
        width: 8vw;
        height: 8vw;
    }
    .text { display: none; }
    .game-container { gap: 0vw; }
    /* .main-play-area { gap: 1.5vh;} */
        .timer {
        margin-left: auto;
        background: var(--timer);
        color: #ffffff;
        padding: 1.5vw 2.8vw;
        border-radius: 1vw;
        font-family: 'Courier New', monospace;
        font-size: 3.5vw;
        font-weight: bold;
        /*min-width: 70px;*/
        text-align: center;
    }
    .score-diff {
        font-size: 3vw;
        font-weight: bold;
        color: #16a34a;
    }
    .player-name {
    font-size: 4vw; max-width: 30vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .avatar { width: 8vh; height: 8vh; display: flex; align-items: center; justify-content: center; font-size: 2.5vh; }
}

@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 4/4) {
        #board-wrapper {
        position: relative;
        height: 100%;
    }
    .chess-board { width: 100%; height: 100%; border-radius: 4px; }
    .side-panel { gap: 0vw; }
    .stat-label { font-size: 3vw; font-weight: 900; text-transform: uppercase; }
    .stat-value { font-size: 4.5vw; font-weight: 900; }
    .bottom-bar { display: flex; justify-content: center; width: 70vw; border-radius: 3vh 3vh 0 0;        background: var(--gray-300); }
    .btn-hint { font-size: 2vw !important; padding: 1vw 2vw !important; border-radius: 0vw !important; background: none; }
    .video-icon svg {
        width: 6vw;
        height: 6vw;
    }
    .text { display: none; }
    .game-container { gap: 0vw; }
    .player-profile { display: flex; align-items: center; gap: 2vh; padding: 4.5vh 2vh; height: 10vh; width: 70vw; border-radius: 3vw;  }
    .main-play-area { gap: 1vh;}
    .timer {
        margin-left: auto;
        background: var(--timer);
        color: #ffffff;
        padding: 1.5vw 1.8vw;
        border-radius: 1vw;
        font-family: 'Courier New', monospace;
        font-size: 2.5vw;
        font-weight: bold;
        /*min-width: 70px;*/
        text-align: center;
    }
    .score-diff {
        font-size: 3vw;
        font-weight: bold;
        color: #16a34a;
    }

    #move-history {
        order: 1;
        width: 75vw;
        height: 6vh;
        min-height: 40px;
        /* margin-bottom: 1vh; */
        display: flex;
        background: var(--gray-200);
        border-radius: 0vw 0 2.5vh 2.5vh;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .player-name {
    font-size: 3.1vw;}
    .avatar { width: 8vw; height: 8vw; display: flex; align-items: center; justify-content: center; font-size: 2.5vh; }
}

@media (min-aspect-ratio: 4/4) and (max-aspect-ratio: 5/4) {

    .coord { position: absolute; font-size: 1.5vh; font-weight: bold; pointer-events: none; z-index: 5; opacity: 0.8; }
    .coord.rank { top: 0.3vh; left: 0.3vh; }
    .coord.file { bottom: 0.3vh; right: 0.3vh; }
    .chess-board { width: 70vw; height: 70vw; }
    .side-panel { gap: 3vw; width: 10vw !important; min-width: 22vw; }
    .stat-label { font-size: 1.5vw; font-weight: 900; text-transform: uppercase; }
    .stat-value { font-size: 3.2vw; font-weight: 900; }
    .bottom-bar { display: flex; justify-content: center; background: none; gap: 0vw;}
    .btn-hint { font-size: 1.5vw; padding: 1vh 1vh; border-radius: 0vh; }
    .text { display: none; }
    .game-container { gap: 2vw; }
    .history-container { width: 100%; max-height: 36vh; min-height: 34vh; order: 0; background: var(--gray-200) !important; border-radius: 0.8vw; }
    .landscape-info-block { background: var(--gray-300); border-radius: 1vw; padding: 1.4vw; display: flex; flex-direction: column; gap: 1vh; width: 100%; }

}

@media (aspect-ratio: 4/4) {
        #board-wrapper {
        position: relative;
        height: 100%;
    }
    .chess-board { width: 100%; height: 100%; border-radius: 4px; }
    .side-panel { gap: 0vw; }
    .stat-label { font-size: 3vw; font-weight: 900; text-transform: uppercase; }
    .stat-value { font-size: 4.5vw; font-weight: 900; }
    .bottom-bar { display: flex; justify-content: center; width: 70vw; border-radius: 3vh 3vh 0 0; background: var(--bg-secondary);}
    .btn-hint { font-size: 2vw !important; padding: 1vw 2vw !important; border-radius: 0vw !important; }
    .video-icon svg {
        width: 6vw;
        height: 6vw;
    }
    .text { display: none; }
    .game-container { gap: 0vw; }
    .player-profile { display: flex; align-items: center; gap: 2vh; padding: 4.5vh 2vh; height: 10vh; width: 70vw; border-radius: 3vw;  }
    .main-play-area { gap: 1vh;}
    .timer {
        margin-left: auto;
        background: var(--timer);
        color: #ffffff;
        padding: 1.5vw 1.8vw;
        border-radius: 1vw;
        font-family: 'Courier New', monospace;
        font-size: 2.5vw;
        font-weight: bold;
        /*min-width: 70px;*/
        text-align: center;
    }
    .score-diff {
        font-size: 3vw;
        font-weight: bold;
        color: #16a34a;
    }
    .player-name {
    font-size: 3.1vw;}
    .avatar { width: 8vw; height: 8vw; display: flex; align-items: center; justify-content: center; font-size: 2.5vh; }
}

@media (min-aspect-ratio: 4/6) and (max-aspect-ratio: 4/4) {
    .gm-menu-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; width: 90%; max-width: 650px; }
}

/* Показываем левую панель ТОЛЬКО если экран шире, чем 6/4 (1.5) */
@media (min-aspect-ratio: 3/2) { 
    .side-panel-left { display: flex; }
    .landscape-right-col { display: flex; flex-direction: column; gap: 1.5vh; width: 19vw; justify-content: center; align-items: flex-start; }
    .btn-hint { font-size: 1vw; padding: 1vh .9vh; }
    .bottom-bar { display: flex; justify-content: center; border-radius: 0 0 0.5vw 0.5vw; margin-top: -.9vh;     height: 3.4vw;}
    .video-icon svg { width: 2vw; height: 2vw; display: block; fill: var(--gm-btn-secondary-text); }
.side-panel-left {
    width: 19vw;
}
}



html[data-theme="dark"] .stats-modal-card { background: #2b2b2b !important; }


.must-capture {
    animation: shake-piece 0.5s cubic-bezier(.36,.07,.19,.97) both;
    z-index: 100;
}

/* Красный индикатор в углу клетки для верности */
.must-capture::after {
    content: "!";
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ef4444;
    color: white;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 1000000;
    pointer-events: none;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.5); */
}

@keyframes shake-piece {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(1px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-1px, 0, 0); }
    40%, 60% { transform: translate3d(1px, 0, 0); }
}



/* --- НОВЫЙ ЛИДЕРБОРД (ДИЗАЙН ИЗ ЗАДАЧ) --- */
.leader-box {
    background: transparent !important; /* Убираем фон отсюда */
    border-radius: 0 !important;        /* Убираем скругление отсюда */
    overflow: visible !important;       /* ВАЖНО: разрешаем кнопке вылезать */
    width: 85%;
    /* max-width: 400px; */
    /* display: flex;
    flex-direction: column;
    align-items: center; */

        /* Ограничиваем высоту */
    max-height: 80vh; 
    display: flex;
    flex-direction: column; /* Делаем колонку */
    position: relative;

}

#leaderboard-container {

    background: var(--gray-300);    /* Фон теперь тут */
    border-radius: 2vh;            /* Скругление теперь тут */
    overflow: hidden;               /* Обрезаем только внутренний контент (список) */

    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Скролл будет только у списка */
        padding: 0 0 2vh 0;
}

/* ПЬЕДЕСТАЛ */
.podium-container {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    padding: 6vh 1vh 2vh;
    justify-content: center;
    width: 100%;
}

.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    width: 33%;
}

.podium-avatar-wrapper {
    position: relative;
    margin-bottom: 10px;
}

.podium-avatar {
    width: 15vw;
    height: 15vw;
    border-radius: 3vw;
    outline: 4px solid #769656; /* Ваш зеленый */
    object-fit: cover;
    background: #eee;
}

.podium-item.place-1 .podium-avatar {
    width: 20vw;
    height: 20vw;
}

.rank-badge {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background: #769656;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gray-300);
}

.crown-icon {
    position: absolute;
    top: -4vh;
    left: 50%;
    transform: translateX(-50%);
    width: 4vh;
    height: 4vh;
    fill: #769656;
}

.podium-name {
    font-weight: 800;
    font-size: min(4vw, 16px);
    color: var(--text-primary);
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podium-score {
    font-size: 3vw;
    color: var(--text-primary);
    opacity: 0.8;
    font-weight: 600;
}

/* СПИСОК */
.leaderboard-list {
     flex: 1;
      overflow-y: auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 40vh;
    width: 100%;
    padding: 0 10px;
    gap: 4px;
        scrollbar-width: thin;
    scrollbar-color: var(--green) transparent;
}

.leaderboard-list::-webkit-scrollbar {
    width: 4px;
}
.leaderboard-list::-webkit-scrollbar-thumb {
    background-color: var(--green);
    border-radius: 10px;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 12px;
    background: var(--gray-200);
    gap: 12px;
}
/* Строка "ВЫ" и разделитель — фиксированные снизу */
.lb-divider {
    flex-shrink: 0;
    height: 1px;
    background: var(--gray-900);
    margin: 10px 20px;
    opacity: 0.2;
}

.leaderboard-row.is-me {
    flex-shrink: 0; /* Не даем строке сжиматься */
    margin: 0 1vh 1vh 1vh; /* Отступы снизу */
    background: var(--gray-200);
    border: 1px solid var(--green); /* Выделяем себя */
}


.row-rank {
    font-weight: 900;
    color: var(--text-primary);
    /* width: 3vw; */
    font-size: 3vw;
}

.row-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
}

.row-name {
    flex-grow: 1;
    font-weight: 700;
    font-size: 3.3vw;
    color: var(--text-primary);
        white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-score {
    font-weight: 800;
    font-size: 3.5vw;
    color: #769656;
}

/* ТАБЫ */
.leaderboard-tabs {
    display: flex;
    background: var(--gray-200);
    border-radius: 14px;
    gap: 4px;
    margin: 25px 0 10px;
    width: 90%;
    padding: 4px;
}

.tab-btn {
    flex: 1;
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-weight: 800;
    color: var(--text-primary);
    background: transparent;
    cursor: pointer;
    transition: 0.2s;
}

.tab-btn.active {
    background: #769656;
    color: white;
}

/* КРЕСТИК */
.btn-close-cross {
    position: absolute;
    top: -4vw;
    right: -3.5vw;
     z-index: 99; 
    background: #769656;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    width: 12vw;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

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

@media (orientation: landscape) {
    /* --- НОВЫЙ ЛИДЕРБОРД (ДИЗАЙН ИЗ ЗАДАЧ) --- */
.leader-box {
    background: var(--gray-300);
    border-radius: 24px;
    width: 80vw;
    max-width: max(40vw, 350px);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    max-height: 80vh;
}

#leaderboard-container {
    width: 100%;
    padding-bottom: 2vh;
}

/* ПЬЕДЕСТАЛ */
.podium-container {
    display: flex;
    align-items: flex-end;
    padding: 7vh 1vw 1.5vh;
    justify-content: center;
    width: 100%;
}

.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    width: 33%;
}

.podium-avatar-wrapper {
    position: relative;
    margin-bottom: 1vh;
}

.podium-avatar {
    width: 10vh;
    height: 10vh;
    border-radius: 3vh;
    outline: .8vh solid #769656; /* Ваш зеленый */
    object-fit: cover;
    background: #eee;
}

.podium-item.place-1 .podium-avatar {
    width: 13vh;
    height: 13vh;
}

.rank-badge {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background: #769656;
    color: white;
    width: 2vh;
    height: 2vh;
    border-radius: 8px;
    font-size: 1.3vh;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gray-300);
}

.crown-icon {
    position: absolute;
    top: -5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 5vh;
    height: 5vh;
    fill: #769656;
}

.podium-name {
    font-weight: 800;
    font-size: min(2.3vh, 16px);
    color: var(--text-primary);
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podium-score {
    font-size: 1.2vh;
    color: var(--text-primary);
    opacity: 0.8;
    font-weight: 600;
}

/* СПИСОК */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 50vh;
    width: 100%;
    padding: 0 1vh;
    gap: 4px;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    padding: 1vh 1vw;
    border-radius: 12px;
    background: var(--gray-200);
    gap: 1.2vh;
}

.leaderboard-row.is-me {
    outline: 2px solid #769656;
}

.row-rank {
    font-weight: 900;
    color: var(--text-primary);
    width: 3vh;
    font-size: 2vh;
}

.row-avatar {
    width: 5vh;
    height: 5vh;
    border-radius: 8px;
    object-fit: cover;
}

.row-name {
    flex-grow: 1;
    font-weight: 700;
    font-size: 2vh;
    color: var(--text-primary);
        white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-score {
    font-weight: 800;
    color: #769656;
    font-size: 2.3vh;
}

/* ТАБЫ */
.leaderboard-tabs {
    display: flex;
    background: var(--gray-200);
    border-radius: 14px;
    gap: .4vh;
    margin: 3vh 0 1vw;
    width: 90%;
    padding: .4vh;
}

.tab-btn {
    flex: 1;
    border: none;
    padding: 1vh;
    border-radius: 10px;
    font-weight: 800;
    color: var(--text-primary);
    background: transparent;
    cursor: pointer;
    transition: 0.2s;
}

.tab-btn.active {
    background: #769656;
    color: white;
}

/* КРЕСТИК */
.btn-close-cross {
    position: absolute;
    top: -2vh;
    right: -2vh;
    background: #769656;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    width: 7vh;
    height: 7vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
}

@media (orientation: landscape) {
    /* 1. Главный контейнер — жесткие пропорции */
    .game-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        gap: 1.5vw;
        padding: 0 1vw;
        box-sizing: border-box;
    }

    /* 2. ЛЕВАЯ ПАНЕЛЬ (Статистика) */
    .side-panel-left {
        display: flex !important;
        flex: 0 0 19vw; /* Жестко 19% ширины экрана */
        flex-direction: column;
        gap: 1vh;
        /* Все внутренности теперь зависят от ШИРИНЫ (vw) */
        font-size: 1.2vw !important; 
    }

    /* 3. ЦЕНТРАЛЬНАЯ ЗОНА (Доска) */
    .main-play-area {
        /* Доска забирает 55% ширины, но не больше 85% высоты */
        flex: 0 0 55vw; 
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #board-wrapper {
        width: min(85vh, 55vw); 
        height: min(85vh, 55vw);
        aspect-ratio: 1 / 1;
    }

    .chess-board {
        width: 100% !important;
        height: 100% !important;
    }

    /* 4. ПРАВАЯ КОЛОНКА (История и кнопки) */
    .landscape-right-col {
        display: flex !important;
        flex: 0 0 21vw; /* Жестко 21% ширины экрана */
        flex-direction: column;
        gap: 1vh;
    }

    /* --- СЖАТИЕ ВНУТРЕННОСТЕЙ (через vw) --- */

    /* Блоки статистики и управления */
    .landscape-info-block {
        padding: 1vw !important;
        border-radius: 1vw !important;
        font-size: 0.9vw !important; /* Текст сжимается при сужении экрана */
    }

    /* Аватарки */
    .avatar {
        width: 2.8vw !important;
        height: 2.8vw !important;
        border-radius: 0.6vw !important;
    }

    /* Имена и Таймеры */
    .player-name {
        font-size: 1.3vw !important;
        max-width: 12vw !important;
    }

    .timer {
        font-size: 1.5vw !important;
        padding: 0.4vw 0.8vw !important;
        border-radius: 0.5vw !important;
        min-width: 5vw !important;
        /* box-shadow: none !important; */
        margin: 0 !important;
    }

    /* Кнопки в правой панели */
    .bottom-bar {
        /* gap: 0.4vw !important; */
        height: auto !important;
        padding: 0.5vw 0 0  !important;
    }

    .btn-hint {
        padding: 0.6vw !important;
        /* border-radius: 0.6vw !important; */
        /* Убираем текст, оставляем только иконки если совсем тесно, 
           либо делаем шрифт крошечным */
        font-size: 0.7vw !important; 
    }

    .video-icon svg {
        width: 2.5vw !important;
        height: 2.5vw !important;
    }

    /* История ходов */
    .history-container {
        height: 30vh !important;
        border-radius: 0.5vw !important;
    }

    .move-text {
        font-size: 0.9vw !important;
        padding: 0.2vw 0.4vw !important;
    }

    .move-number {
        font-size: 0.8vw !important;
        min-width: 1.5vw !important;
    }

    /* Скрываем лишнее */
    .mobile-top-bar { display: none !important; }
}


@media (orientation: landscape) {
    /* 1. Главный контейнер: центрируем всё содержимое */
    .game-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important; /* Центрируем группу (Бок + Доска + Бок) */
        align-items: center;
        gap: 2vw; /* Это РЕАЛЬНОЕ расстояние между доской и панелями */
        width: 100vw;
        height: 100vh;
    }

    /* 2. ЦЕНТРАЛЬНАЯ ОБЛАСТЬ (теперь она не "распирает" бока) */
    .main-play-area {
        flex: 0 0 auto !important; /* Не даем ей растягиваться */
        /* ШИРИНА этой области теперь всегда совпадает с ШИРИНОЙ доски */
        /* width: min(92vh, 55vw) !important;  */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* 3. ДОСКА (занимает 100% ширины своей области) */
    #board-wrapper {
        /* width: 100% !important;
        height: auto !important;
        max-width: 92vh; */
        aspect-ratio: 1 / 1;
    }

    .chess-board {
        width: 100% !important;
        height: 100% !important;
    }

    /* 4. БОКОВЫЕ ПАНЕЛИ */
    .side-panel-left {
        flex: 0 0 19vw !important; /* Ширина панелей */
        /* max-width: 300px; */
        /* Теперь они будут стоять рядом с main-play-area на расстоянии gap */
    }
}

@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 7/5) {
    /* 1. Уменьшаем ширину левой колонки, чтобы дать место доске */
    .side-panel-left {
        flex: 0 0 17vw !important; 
        gap: 1vh !important; /* Уменьшаем зазор между блоками статистики и совета */
    }
        #btn-bottom-lb, #btn-bottom-stats {
        display: none !important;
    }

.sb-label {
    font-size: 1vw;
    font-weight: 400;
}
.sb-value-main {
    font-size: 1.5vw;
    font-weight: 300;
}

.sb-color-title {
    gap: 1vh;
    font-size: 1.1vh;
    font-weight: 500;
}
.sb-color-data {
    font-size: 1.1vh;

    font-weight: 500;
}
    /* 2. Сжимаем внутренние отступы и шрифты еще сильнее */
    .stats-box  {
        padding: 1.5vh 1vw  !important;
        border-radius: 0.8vw !important;
        gap:.1vh
    }
    .advice-box {
       
        border-radius: 0.8vw !important;
    }
    /* 3. Делаем шрифты в левой колонке максимально компактными */
    .stats-label, .lb-name, .stats-value {
        font-size: 0.85vw !important;
        letter-spacing: 0 !important;
    }

    /* 4. Уменьшаем аватарки в рейтинге, чтобы они не занимали много места */
    .lb-avatar {
        width: 2.2vw !important;
        height: 2.2vw !important;
    }
    
.sb-color-block {
    display: flex;
    flex-direction: column;
    gap: .5vh;
    padding: .3vh 0;
}
    /* 5. Уменьшаем отступы в строках рейтинга */
    .lb-row {
        /* padding: 0.3vw 0 0.2vw !important; */
        gap: 0.4vw !important;
    }
    .lb-score {
        font-size: 1.1vw;
        font-weight: 700;
    }
    .stats-bar-labels {
        display: flex;
        justify-content: space-between;
        font-size: 1.1vw;
        font-weight: bold;
        padding: .7vh .5vw;
    }
.bottom-bar .btn-hint {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 5vh;
}
    /* 6. Поджимаем заголовок "Топ 7" или "Статистика" */
    .lb-header, .stats-title {
        padding: 1vh 0.9vw  !important;
        font-size: 0.8vw !important;
    }

    /* 7. Если на доске есть цифры/буквы координат, уменьшаем их */
    .coord {
        font-size: 1.2vw !important;
    }

    /* 8. Немного сужаем правую колонку тоже, чтобы доска не была микроскопической */
    .landscape-right-col {
        flex: 0 0 21vw !important;
    }

    /* 9. Пересчитываем доску под новые узкие бока */
    .main-play-area {
        flex: 0 0 57vw !important;
    }
    #board-wrapper {
        width: 100%!important;
        height: 57vw !important;
    }
        .game-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center;
        gap: 1vw;
        width: 100vw;
        height: 100vh;
    }
}





/* Начальная точка хода (шашка, которая должна бить) */
.hint-from {
    /* box-shadow: inset 0 0 15px 5px rgba(34, 197, 94, 0.8) !important; */
    /* animation: pulse-green 1.5s infinite; */
}

/* Промежуточные клетки и финальная клетка */
.hint-step::after {
    content: "";
    position: absolute;
    width: 20%;
    height: 20%;
    background: rgba(134, 134, 134, 0.6);
    border-radius: 50%;
    z-index: 5;
}

/* Финальная клетка (куда приземлится шашка) */
.hint-to::after {
    content: "";
    position: absolute;
    width: 60%;
    height: 60%;
    border: 4px solid rgba(105, 105, 105, 0.8);
    border-radius: 50%;
    z-index: 5;
    animation: pulse-ring 1.5s infinite;
}

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

@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.2); opacity: 0; }
}



/* =========================================
   ГЛОБАЛЬНЫЙ ФИКС РАЗМЕРА ДОСКИ (ПОРТРЕТ)
   ========================================= */
@media (orientation: portrait) {
    #board-wrapper {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .chess-board {
        /* Доска берет 95% ширины экрана ИЛИ 60% высоты экрана — что из этого МЕНЬШЕ. 
           60vh оставляет достаточно места для профилей игроков сверху и снизу. */
        width: min(100vw, 64vh) !important;
        height: min(100vw, 64vh) !important;
        aspect-ratio: 1 / 1 !important;
        max-width: 100% !important;
    }
}