/* ═══════════════════════════════════════════════════════════════════════════
   Гомоку — таблица стилей
   Тёплая деревянная тема с адаптивностью от 320px до 3840px.
   ═══════════════════════════════════════════════════════════════════════════ */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    background: #1a1814;
    color: #d5cfc4;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 0 20px 20px 20px;
}

.app {
    max-width: 1200px;
    width: 100%;
}

.hidden { display: none !important; }

/* ─── User bar ─────────────────────────────────────────────────────────── */
.user-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 4px 0 2px 0;
    font-size: 0.9rem;
}

.gear-icon {
    font-size: 1.4rem;
    cursor: pointer;
    color: #a8a294;
    transition: color 0.2s, transform 0.2s;
    user-select: none;
    padding: 0 2px;
}
.gear-icon:hover { color: #d4a843; transform: rotate(30deg); }

.sound-icon-top {
    font-size: 1.3rem;
    cursor: pointer;
    color: #a8a294;
    transition: transform 0.15s, opacity 0.15s;
    user-select: none;
    opacity: 0.8;
    padding: 0 2px;
}
.sound-icon-top:hover { transform: scale(1.2); opacity: 1; }

.user-login {
    color: #c9b87a;
    text-decoration: none;
    font-weight: 600;
    padding: 0 4px;
}
.user-login:hover { color: #e8dba0; text-decoration: underline; }

.user-logout {
    color: #8b8578;
    text-decoration: none;
    font-size: 0.8rem;
    margin-left: 8px;
}
.user-logout:hover { color: #c48a6a; }

/* ─── Layout: левая панель + доска по центру экрана ─────────────────── */
.game-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding-left: 286px; /* компенсация левой панели — доска по центру */
}

/* Левая колонка (+30% ширины) */
.game-left {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: -286px; /* выезжает в левый отступ */
}

/* Центр: доска (всегда по центру экрана) */
.game-center {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -45px;
}

/* Индикатор правил над доской */
.rules-label {
    font-size: 0.75rem;
    color: #8b8578;
    text-align: center;
    margin: 0 0 6px 0;
    letter-spacing: 0.6px;
}
.rules-label.hidden { display: none; }

/* ─── Табло (режим "Играть") ──────────────────────────────────────────── */
.scoreboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 45px;
    width: min(480px, 75vw);
    padding: 16px;
    background: #26231c;
    border-radius: 12px;
    border: 2px solid #3d3830;
}
.scoreboard.hidden { display: none; }

.scoreboard-title {
    font-size: 0.9rem;
    color: #8b8578;
    text-align: center;
    margin: 0;
}

.scoreboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.score-btn {
    background: #2a2720;
    border: 1px solid #3d3830;
    border-radius: 10px;
    color: #c9b87a;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    white-space: nowrap;
}
.score-btn:hover {
    background: #3a3528;
    border-color: #c9a94e;
    color: #e8dba0;
    box-shadow: 0 0 12px rgba(201, 169, 78, 0.3);
}
.score-btn:active {
    transform: scale(0.96);
    background: linear-gradient(135deg, #c9a94e, #a6842c);
    color: #1a1812;
    border-color: #c9a94e;
    box-shadow: 0 0 16px rgba(201, 169, 78, 0.4);
}

/* ─── Онлайн-пользователи ─────────────────────────────────────────────── */
.online-users-panel {
    background: #26231c;
    border: 1px solid #3d3830;
    border-radius: 14px;
    padding: 16px;
}
.online-users-panel.hidden { display: none; }

.online-users-panel h3 {
    font-size: 0.8rem;
    color: #8b8578;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.online-users-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.online-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-bottom: 1px solid #2a2720;
    font-size: 0.82rem;
}

.online-user-item:last-child {
    border-bottom: none;
}

.online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5c7a4a;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(92, 122, 74, 0.6);
}

.online-user-login {
    color: #c9b87a;
    font-weight: 600;
    flex: 1;
}

.online-user-mode {
    color: #6b6558;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.online-users-empty {
    color: #6b6558;
    text-align: center;
    padding: 10px 0;
    font-size: 0.8rem;
    list-style: none;
}

.mode-btn {
    flex: 1 1 0;
    padding: 8px 10px;
    background: #1e1c17;
    border: 1px solid #2a2720;
    border-radius: 8px;
    color: #6b6558;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    white-space: nowrap;
}

.mode-btn:hover {
    background: #2a2720;
    color: #a8a294;
    border-color: #3d3830;
}

.mode-btn.mode-active {
    background: linear-gradient(135deg, #c9a94e, #a6842c);
    color: #1a1812;
    border-color: #c9a94e;
    font-weight: 700;
    box-shadow: 0 0 16px rgba(201, 169, 78, 0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    transform: scale(1.04);
}

.mode-btn:active {
    transform: scale(0.96);
}

.mode-btn.mode-active:active {
    transform: scale(1.0);
}

/* Правая колонка: профиль + настройки */
.game-right {
    flex: 0 0 210px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Правая колонка: режим игры + онлайн */
.game-right-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* ─── Заголовок (слева) ──────────────────────────────────────────────── */
.game-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #d5cfc4;
    margin: 0;
}

.game-subtitle {
    font-size: 0.82rem;
    color: #8b8578;
    margin: 0 0 2px 0;
}

/* ─── Боковые карточки (профиль + настройки, как auth-card) ──────────── */
.side-card {
    background: #26231c;
    border: 1px solid #3d3830;
    border-radius: 14px;
    padding: 18px;
}

.side-card h3 {
    font-size: 0.95rem;
    color: #a8a294;
    margin-bottom: 12px;
    text-align: center;
}

.side-card-login {
    color: #c9b87a;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 10px;
}

.btn-side {
    display: block;
    width: 100%;
    background: #5c7a4a;
    color: #f0ede4;
    text-align: center;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-side:hover { background: #4a6338; }

/* Переключатель режима (X - 0 | Гомоку | Рэндзю) */
.side-card.mode-toggle-card {
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 8px;
    min-width: 276px;
}
.side-card.mode-toggle-card .mode-btn-row {
    display: flex;
    flex-direction: row;
    gap: 3px;
    width: 100%;
}
.side-card.mode-toggle-card h3 {
    flex-basis: 100%;
    font-size: 0.72rem;
    color: #6b6558;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
}

/* Крупная иконка звука */
.sound-icon-large {
    font-size: 1.6rem;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s, opacity 0.15s;
    opacity: 0.8;
}
.sound-icon-large:hover {
    transform: scale(1.2);
    opacity: 1;
}

/* Переключатель Играть / Анализировать / Турниры (+30% size) */
.play-toggle {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px;
    background: #1e1c17;
    border: 1px solid #2a2720;
    border-radius: 12px;
}

.play-btn {
    flex: 1;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #6b6558;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    white-space: nowrap;
}

.play-btn:hover {
    color: #a8a294;
    background: #2a2720;
}

.play-btn.play-active {
    background: linear-gradient(135deg, #c9a94e, #a6842c);
    color: #1a1812;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(201, 169, 78, 0.3);
}

.play-btn:active {
    transform: scale(0.96);
}

/* ─── Статус-бар ───────────────────────────────────────────────────────── */
.status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #26231c;
    border: 1px solid #3d3830;
    font-size: 0.85rem;
}

.status-finished {
    border-color: #c9a94e;
    background: #2a2418;
}

.turn-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
}
.turn-indicator.hidden { display: none; }

.turn-symbol {
    width: 26px; height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
}
.symbol-x {
    background: radial-gradient(circle at 35% 30%, #333, #0a0804);
    box-shadow: 1px 2px 4px rgba(0,0,0,0.55);
}
.symbol-o {
    background: radial-gradient(circle at 35% 30%, #f2ede4, #d4c9b3);
    box-shadow: 1px 2px 4px rgba(0,0,0,0.25);
}
.turn-text { font-size: 0.9rem; color: #a8a294; }

/* ─── Баннер победы ────────────────────────────────────────────────────── */
.win-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #c9a94e, #a6842c);
    color: #1a1812;
    font-size: 1rem;
    font-weight: 700;
    animation: pop-in 0.4s ease;
}
.win-banner.hidden { display: none; }
.win-emoji { font-size: 1.3rem; }

@keyframes pop-in {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ─── Нотация (таблица: # | X | O) ──────────────────────────────────────── */
.notation-panel {
    background: #26231c;
    border: 1px solid #3d3830;
    border-radius: 10px;
    padding: 10px;
    max-height: 420px;
    overflow-y: auto;
    flex: 0 0 auto;
    min-width: 170px;
}

.notation-panel h3 {
    font-size: 0.85rem;
    color: #8b8578;
    margin-bottom: 8px;
    text-align: center;
}

.notation-controls {
    display: none;
    justify-content: center;
    gap: 4px;
    margin-bottom: 6px;
}

.notation-empty {
    color: #6b6558;
    text-align: center;
    padding: 12px 0;
    font-size: 0.8rem;
}

.notation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.notation-table th {
    color: #6b6558;
    font-weight: 600;
    font-size: 0.72rem;
    padding: 2px 6px 6px;
    text-align: center;
    border-bottom: 1px solid #3d3830;
}

.notation-table th:first-child { width: 28px; }

.notation-num {
    color: #6b6558;
    text-align: right;
    padding: 2px 6px;
    font-size: 0.72rem;
    width: 28px;
}

.notation-cell {
    padding: 2px 6px;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.12s;
    white-space: nowrap;
}
.notation-cell:hover { background: #3a3528; }
.notation-x { color: #c9b87a; }
.notation-o { color: #e8dba0; }

.notation-current {
    background: #3d3830;
    color: #d4a843 !important;
    font-weight: 700;
}
.notation-future { opacity: 0.35; }
.notation-empty-cell { cursor: default; }

/* ─── Доска ────────────────────────────────────────────────────────────── */
.board-wrapper {
    background: #26231c;
    border-radius: 12px;
    border: 2px solid #3d3830;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Координатные линейки */
.coord-bar { display: flex; user-select: none; }

.coord-bar-top, .coord-bar-bottom {
    box-sizing: border-box;
    padding: 0 3px;
    margin-left: 21px;
    width: calc(min(585px, 85vw) + 6px);
    height: 20px;
}
.coord-bar-left, .coord-bar-right {
    flex-direction: column;
    box-sizing: border-box;
    padding: 3px 0;
    width: 26px;
    height: calc(min(585px, 85vw) + 6px);
}

.coord-bar-top .coord-label,
.coord-bar-bottom .coord-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5c4a2e;
    font-size: 0.65rem;
    font-weight: 700;
}
.coord-bar-left .coord-label,
.coord-bar-right .coord-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5c4a2e;
    font-size: 0.65rem;
    font-weight: 700;
}

.board-middle {
    display: flex;
    gap: 2px;
    align-items: stretch;
}

/* Превью координат */
.hover-preview {
    height: 22px;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 700;
    color: #d4a843;
    padding: 15px 0 4px 0;
    min-height: 26px;
    transition: color 0.1s;
    align-self: flex-start;
}

/* Игровая доска 15×15 */
.board {
    --line: #2c2416;
    --wood: #c4b99e;
    --hover: #d4a843;
    --margin: calc(min(585px, 85vw) / 30);

    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);
    width: min(585px, 85vw);
    height: min(585px, 85vw);
    border: 3px solid #5c4a2e;
    border-radius: 2px;

    box-shadow:
        inset 0 0 0 var(--margin) var(--wood),
        inset 0 0 60px rgba(80, 60, 30, 0.25);
    background-color: var(--wood);

    background-image:
        repeating-linear-gradient(to bottom,
            transparent 0,
            transparent calc(100%/30 - 0.5px),
            var(--line) calc(100%/30 - 0.5px),
            var(--line) calc(100%/30 + 0.5px),
            transparent calc(100%/30 + 0.5px),
            transparent calc(100%/15)
        ),
        repeating-linear-gradient(to right,
            transparent 0,
            transparent calc(100%/30 - 0.5px),
            var(--line) calc(100%/30 - 0.5px),
            var(--line) calc(100%/30 + 0.5px),
            transparent calc(100%/30 + 0.5px),
            transparent calc(100%/15)
        );
}

/* Клетка */
.cell {
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    aspect-ratio: 1;
    min-width: 0; min-height: 0;
    position: relative;
}

/* Звёздные точки */
.star-dot {
    position: absolute;
    width: 22%; height: 22%;
    background: var(--line, #2c2416);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.cell-x .star-dot, .cell-o .star-dot { display: none; }

/* Подсветка перекрестья при наведении */
.cell:hover::before, .cell:hover::after {
    content: '';
    position: absolute;
    background: var(--hover, #d4a843);
    z-index: 1;
}
.cell:hover::before {
    width: 100%; height: 2px;
    top: 50%; left: 0;
    transform: translateY(-1px);
}
.cell:hover::after {
    width: 2px; height: 100%;
    left: 50%; top: 0;
    transform: translateX(-1px);
}

/* Камни */
.cell-x .marker {
    width: 84%; height: 84%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #333, #0a0804);
    box-shadow: 2px 3px 8px rgba(0,0,0,0.65);
    z-index: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cell-o .marker {
    width: 84%; height: 84%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f2ede4, #d4c9b3);
    box-shadow: 2px 3px 8px rgba(0,0,0,0.30);
    z-index: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Номер хода на камне */
.move-number {
    font-size: 1.1rem;
    font-weight: 700;
    z-index: 3;
    pointer-events: none;
    line-height: 1;
    width: 100%;
    text-align: center;
    display: block;
}
.cell-x .move-number { color: #e8dba0; }
.cell-o .move-number { color: #3d3830; }

/* Номера предложений 1-10 на камнях Taraguchi */
.offer-number {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.65rem;
    font-weight: 700;
    color: #e8dba0;
    text-shadow: 0 0 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 2;
    line-height: 1;
}

/* Занятые клетки */
.cell-x, .cell-o { cursor: default; }
.cell-x:hover::before, .cell-x:hover::after,
.cell-o:hover::before, .cell-o:hover::after { display: none; }

/* Запрещённая клетка (Рендзю) */
.cell-forbidden { cursor: not-allowed; }
.cell-forbidden::before {
    content: '';
    position: absolute;
    width: 120%; height: 1.5px;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    background: rgba(255,64,64,0.5);
    z-index: 8;
    pointer-events: none;
}
.cell-forbidden::after {
    content: '';
    position: absolute;
    width: 120%; height: 1.5px;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
    background: rgba(255,64,64,0.5);
    z-index: 8;
    pointer-events: none;
}

/* Подсветка последнего хода */
.cell-last .marker {
    box-shadow: 0 0 0 3px #d4a843, 0 0 18px rgba(212,168,67,0.7) !important;
    animation: last-move-pulse 0.6s ease;
}

@keyframes last-move-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(212,168,67,0.7), 0 0 20px rgba(212,168,67,0.3); }
    100% { box-shadow: 0 0 0 3px #d4a843, 0 0 18px rgba(212,168,67,0.7); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ЭЛЕМЕНТЫ УПРАВЛЕНИЯ
   ═══════════════════════════════════════════════════════════════════════════ */

.controls { display: flex; gap: 10px; justify-content: center; }

.btn {
    padding: 9px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    font-family: inherit;
}
.btn:active { transform: scale(0.97); }

.btn-new-game {
    background: #5c7a4a;
    color: #f0ede4;
    width: 100%;
}
.btn-new-game:hover { background: #4a6338; }

/* Панель воспроизведения */
.replay-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: #26231c;
    border: 1px solid #5c4a2e;
    border-radius: 10px;
    animation: pop-in 0.3s ease;
    flex-wrap: wrap;
}
.replay-controls.hidden { display: none; }

.btn-arrow {
    width: 36px; height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3d3830;
    color: #c9b87a;
    font-size: 1rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-arrow:hover { background: #5c4a2e; color: #e8dba0; }
.btn-arrow:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-notation {
    width: 28px; height: 28px;
    font-size: 0.75rem;
}

.step-counter {
    min-width: 90px;
    text-align: center;
    font-size: 0.85rem;
    color: #c9b87a;
    font-weight: 600;
}

.btn-back-current {
    background: #3d3830;
    color: #c9c0a8;
    font-size: 0.8rem;
    padding: 7px 14px;
    display: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
.btn-back-current:hover { background: #544d3c; }

/* Подсказка горячих клавиш */
.hotkey-hint {
    font-size: 0.7rem;
    color: #6b6558;
    padding: 10px 16px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ИСТОРИЯ ПАРТИЙ
   ═══════════════════════════════════════════════════════════════════════════ */

.history-section {
    margin-top: 28px;
    padding: 20px;
    background: #26231c;
    border-radius: 12px;
    border: 1px solid #3d3830;
}

.history-section h2 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: #a8a294;
}

.history-empty {
    color: #6b6558;
    text-align: center;
    padding: 12px 0;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.history-table th {
    text-align: left;
    padding: 8px 12px;
    color: #8b8578;
    font-weight: 600;
    border-bottom: 1px solid #3d3830;
}
.history-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #2a2720;
    color: #c5bfb0;
}

.history-row {
    cursor: pointer;
    transition: background 0.15s;
}
.history-row:hover { background: #3a3528 !important; }
.history-row-active {
    background: #4a3d28 !important;
    outline: 1px solid #c9a94e;
}
.history-row-active:hover { background: #5c4a2e !important; }

.result-x { color: #c9b87a !important; font-weight: 700; }
.result-o { color: #e8dba0 !important; font-weight: 700; }
.result-draw { color: #a08050 !important; font-weight: 700; }
.result-analysis { color: #8b8578 !important; font-style: italic; }
.result-aborted { color: #6b6560 !important; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   МОДАЛЬНЫЕ ОКНА
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in 0.2s ease;
}
#feedback-modal { z-index: 1010; }
.modal-overlay.hidden { display: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
    position: relative;
    background: #26231c;
    border: 1px solid #3d3830;
    border-radius: 14px;
    padding: 28px;
    max-width: 480px;
    width: 90vw;
    animation: pop-in 0.25s ease;
}

.modal-card h2 {
    font-size: 1.2rem;
    color: #d5cfc4;
    margin-bottom: 18px;
}

.setting-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #2a2720;
}
.sound-row { gap: 4px; }

.setting-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #c5bfb0;
    font-size: 0.9rem;
    flex: 1;
}

.setting-label input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #c9a94e;
    cursor: pointer;
}

.setting-row select {
    padding: 5px 8px;
    background: #1a1814;
    border: 1px solid #3d3830;
    border-radius: 6px;
    color: #d5cfc4;
    font-size: 0.85rem;
    font-family: inherit;
    width: 100%;
    margin-top: 4px;
}

.setting-section {
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #3d3830;
}
.setting-section p {
    color: #8b8578;
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.modal-close {
    background: #3d3830;
    color: #c9c0a8;
    font-size: 0.85rem;
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 12px;
}
.modal-close:hover { background: #544d3c; }

.btn-feedback {
    background: #5c7a4a;
    color: #f0ede4;
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
}
.btn-feedback:hover { background: #4a6338; }

/* Поля в модалках */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.form-group textarea {
    padding: 10px 14px;
    background: #1a1814;
    border: 1px solid #3d3830;
    border-radius: 8px;
    color: #d5cfc4;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    width: 100%;
}
.form-group textarea:focus {
    outline: none;
    border-color: #c9a94e;
}

.btn-submit {
    background: #5c7a4a;
    color: #f0ede4;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.btn-submit:hover { background: #4a6338; }

/* ═══════════════════════════════════════════════════════════════════════════
   БАГ-РЕПОРТ (фиксированная иконка)
   ═══════════════════════════════════════════════════════════════════════════ */

.bug-icon {
    position: fixed;
    top: auto;
    right: auto;
    bottom: 16px;
    left: 16px;
    font-size: 1.6rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 900;
    user-select: none;
}
.bug-icon:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ФОРМЫ АВТОРИЗАЦИИ
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-page { align-items: flex-start; padding-top: 40px; }

.auth-container { width: 100%; max-width: 480px; }

.auth-card {
    position: relative;
    background: #26231c;
    border: 1px solid #3d3830;
    border-radius: 16px;
    padding: 32px;
}
.auth-card-wide { max-width: 560px; }

.auth-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 1.6rem;
    color: #8b8578;
    text-decoration: none;
    line-height: 1;
    transition: color 0.15s;
}
.auth-close:hover { color: #c48a6a; }

.auth-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #d5cfc4;
    text-align: center;
    margin-bottom: 4px;
}
/* Logo — login page, centered above title */
.auth-logo { display: block; width: 120px; height: 120px; margin: 0 auto 8px auto; }

.auth-subtitle {
    text-align: center;
    color: #8b8578;
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.auth-msg {
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}
.auth-msg-success {
    background: #1e2a1a; color: #a0c48a; border: 1px solid #3a5430;
}
.auth-msg-error {
    background: #2a1a1a; color: #c48a8a; border: 1px solid #543030;
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }

.auth-form .form-group label {
    color: #a8a294; font-size: 0.85rem; font-weight: 600;
}

.required { color: #c48a6a; }

.auth-form .form-group input,
.auth-form .form-group select {
    padding: 10px 14px;
    background: #1a1814;
    border: 1px solid #3d3830;
    border-radius: 8px;
    color: #d5cfc4;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s;
    width: 100%;
}
.auth-form .form-group input:focus,
.auth-form .form-group select:focus {
    outline: none; border-color: #c9a94e;
}
.auth-form .form-group input:disabled {
    opacity: 0.5; cursor: not-allowed;
}

.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

.form-hint { font-size: 0.75rem; color: #6b6558; }
.form-error { font-size: 0.8rem; color: #c46a6a; }

.email-status { font-size: 0.75rem; font-weight: 400; margin-left: 6px; }
.email-confirmed { color: #8ab86a; }
.email-unconfirmed { color: #c48a6a; }

.btn-link {
    background: none; border: none;
    color: #c9b87a; cursor: pointer;
    font-size: 0.8rem; padding: 4px 0;
    text-align: left; text-decoration: underline;
    font-family: inherit;
}
.btn-link:hover { color: #e8dba0; }

.form-fieldset {
    border: 1px solid #3d3830;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 4px;
}
.form-fieldset legend {
    color: #8b8578; font-size: 0.85rem; font-weight: 600; padding: 0 8px;
}

.auth-links {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 0.9rem;
}
.auth-links a { color: #c9b87a; text-decoration: none; }
.auth-links a:hover { color: #e8dba0; text-decoration: underline; }
.auth-links-sep { color: #3d3830; }
/* Back link — tournament detail, lesson, etc. */
.back-link { color: #c9b87a; text-decoration: none; font-size: 0.9rem; display: inline-block; margin-bottom: 0.5rem; }
.back-link:hover { color: #e8dba0; text-decoration: underline; }

/* Блок обратной связи в профиле */
.feedback-block {
    padding: 12px 0;
    border-top: 1px solid #3d3830;
    margin-top: 6px;
}
.feedback-block p {
    color: #8b8578;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

/* Языковой селектор */
select[name="lang"] {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   АДАПТИВНЫЙ ДИЗАЙН (320px → 3840px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ≥ 1600px — 4K / ultrawide */
@media (min-width: 1600px) {
    .app { max-width: 1500px; }
    .game-left { flex: 0 0 350px; }
    .game-title { font-size: 1.8rem; }
    .game-subtitle { font-size: 0.95rem; }
    .board {
        width: min(780px, 55vw);
        height: min(780px, 55vw);
    }
    .coord-bar-top, .coord-bar-bottom {
        width: calc(min(780px, 55vw) + 6px);
        margin-left: 24px;
    }
    .coord-bar-left, .coord-bar-right {
        width: 30px;
        height: calc(min(780px, 55vw) + 6px);
    }
    .notation-panel { max-height: 600px; }
    .notation-table { font-size: 0.9rem; }
    .move-number { font-size: 1.4rem; }
    .cell-x .marker, .cell-o .marker { width: 86%; height: 86%; }
    .scoreboard { width: min(640px, 45vw); }
    .score-btn { font-size: 1.6rem; }
    .tree-pane { max-height: 55vh; }
}

/* 1200–1599px */
@media (min-width: 1200px) and (max-width: 1599px) {
    .app { max-width: 1250px; }
    .game-left { width: 273px; margin-left: -299px; }
    .game-layout { padding-left: 299px; }
    .board {
        width: min(585px, 48vw);
        height: min(585px, 48vw);
    }
    .coord-bar-top, .coord-bar-bottom {
        width: calc(min(585px, 48vw) + 6px);
    }
    .coord-bar-left, .coord-bar-right {
        height: calc(min(585px, 48vw) + 6px);
    }
    .notation-panel { max-height: 480px; }
    .scoreboard { width: min(500px, 40vw); }
}

/* 900–1199px */
@media (min-width: 900px) and (max-width: 1199px) {
    .app { max-width: 1050px; }
    .game-layout { gap: 14px; padding-left: 254px; }
    .game-left { width: 228px; margin-left: -254px; }
    .game-title { font-size: 1.25rem; }
    .game-subtitle { font-size: 0.75rem; }
    .board {
        width: min(480px, 52vw);
        height: min(480px, 52vw);
    }
    .coord-bar-top, .coord-bar-bottom {
        width: calc(min(480px, 52vw) + 6px);
        margin-left: 16px;
    }
    .coord-bar-left, .coord-bar-right {
        width: 22px;
        height: calc(min(480px, 52vw) + 6px);
    }
    .notation-table { font-size: 0.72rem; }
    .notation-panel { max-height: 350px; }
    .side-card { padding: 14px; font-size: 0.85rem; }
    .side-card h3 { font-size: 0.82rem; }
    .setting-label { font-size: 0.8rem; }
    .status-bar { font-size: 0.8rem; }
    .scoreboard { width: min(400px, 45vw); }
    .score-btn { font-size: 1.1rem; }
}

/* 600–899px — планшет */
@media (max-width: 899px) {
    .game-layout { flex-direction: column; align-items: center; gap: 14px; padding-left: 0; }
    .game-left { margin-left: 0; width: 100%; max-width: 520px; }
    .game-left { flex: 0 0 auto; width: 100%; max-width: 520px; align-items: center; text-align: center; }
    .game-title { font-size: 1.3rem; }
    .game-subtitle { font-size: 0.78rem; }
    .board {
        width: min(480px, 75vw);
        height: min(480px, 75vw);
    }
    .coord-bar-top, .coord-bar-bottom {
        width: calc(min(480px, 75vw) + 6px);
        margin-left: 16px;
    }
    .coord-bar-left, .coord-bar-right {
        width: 22px;
        height: calc(min(480px, 75vw) + 6px);
    }
    .coord-bar-top .coord-label,
    .coord-bar-bottom .coord-label,
    .coord-bar-left .coord-label,
    .coord-bar-right .coord-label { font-size: 0.5rem; }

    .notation-panel { max-height: 180px; min-width: 140px; }
    .notation-table { font-size: 0.72rem; }
    .notation-controls { display: flex !important; }

    .tree-pane { max-height: 200px; }
    .comment-panel { min-width: auto; }

    .status-bar { font-size: 0.8rem; }
    .controls { width: 100%; }
    .btn-new-game { font-size: 0.85rem; }

    .history-section h2 { font-size: 1rem; }
    .history-table { font-size: 0.8rem; }

    .auth-container { max-width: 100%; }
    .auth-card { padding: 24px; }
    .scoreboard { width: min(400px, 65vw); }
    .score-btn { font-size: 1.1rem; }
}

/* 400–599px */
@media (max-width: 599px) {
    body { padding: 10px; }
    .app { max-width: 100%; }
    .game-layout { gap: 8px; padding-left: 0; }
    .game-left { margin-left: 0; width: 100%; }

    .board {
        width: 85vw;
        height: 85vw;
    }
    .coord-bar-top, .coord-bar-bottom {
        width: calc(85vw + 6px);
        margin-left: 14px;
        height: 16px;
    }
    .coord-bar-left, .coord-bar-right {
        width: 20px;
        height: calc(85vw + 6px);
    }
    .coord-bar-top .coord-label,
    .coord-bar-bottom .coord-label,
    .coord-bar-left .coord-label,
    .coord-bar-right .coord-label { font-size: 0.42rem; }

    .notation-panel { max-height: 140px; min-width: 120px; }
    .notation-table { font-size: 0.65rem; }

    .user-bar { gap: 4px; font-size: 0.8rem; }
    .sound-icon-large { font-size: 1.3rem; }

    .hover-preview { font-size: 0.7rem; }
    .hotkey-hint { font-size: 0.6rem; padding: 6px 8px; }

    .cell-x .marker, .cell-o .marker { width: 74%; height: 74%; }
    .move-number { font-size: 0.84rem; }

    .history-table { font-size: 0.7rem; }
    .history-table th, .history-table td { padding: 6px 8px; }

    .modal-card { padding: 18px; width: 95vw; }
    .auth-card { padding: 20px; }
    .side-card { padding: 14px; }
    .scoreboard { width: 85vw; padding: 10px; }
    .scoreboard-grid { gap: 5px; }
    .score-btn { font-size: 0.9rem; border-radius: 8px; }
}

/* < 400px */
@media (max-width: 399px) {
    body { padding: 6px; }
    .game-layout { flex-direction: column; align-items: center; padding-left: 0; }
    .game-left { margin-left: 0; width: 100%; }
    .game-left { text-align: center; }
    .board {
        width: 92vw;
        height: 92vw;
    }
    .coord-bar-top, .coord-bar-bottom {
        width: calc(92vw + 4px);
        margin-left: 12px;
        height: 14px;
    }
    .coord-bar-left, .coord-bar-right {
        width: 16px;
        height: calc(92vw + 4px);
    }
    .coord-bar-top .coord-label,
    .coord-bar-bottom .coord-label,
    .coord-bar-left .coord-label,
    .coord-bar-right .coord-label { font-size: 0.38rem; }

    .game-title { font-size: 1.2rem; }
    .game-subtitle { font-size: 0.7rem; }

    .notation-panel { max-height: 110px; min-width: 100px; }
    .notation-table { font-size: 0.6rem; }

    .cell-x .marker, .cell-o .marker { width: 68%; height: 68%; }
    .move-number { font-size: 0.72rem; }

    .history-table { font-size: 0.65rem; }
    .history-section h2 { font-size: 0.9rem; }

    .bug-icon { font-size: 1.2rem; bottom: 10px; left: 10px; }
    .user-bar { font-size: 0.7rem; gap: 2px; }
    .btn { padding: 7px 14px; font-size: 0.8rem; }
    .form-row { flex-direction: column; gap: 8px; }
    .side-card { padding: 10px; }
    .scoreboard { width: 92vw; padding: 8px; }
    .scoreboard-grid { gap: 4px; }
    .score-btn { font-size: 0.78rem; border-radius: 6px; }
}

/* =========================================================================
   ONLINE MULTIPLAYER STYLES
   ========================================================================= */

/* ─── Player cards (in game-left and game-right-col for game.php) ─────── */
.player-card {
    background: #26231c;
    border: 1px solid #3d3830;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    min-width: 180px;
}

.player-card .player-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #d5cfc4;
}

.player-card .stone-indicator {
    font-size: 1.6rem;
    vertical-align: middle;
    margin-right: 2px;
}

.player-card .player-rating {
    font-size: 0.85rem;
    color: #c9b87a;
    margin-top: 4px;
}

.player-card .player-score {
    font-size: 0.75rem;
    color: #8b8578;
    margin-top: 6px;
}

.player-card .player-status {
    font-size: 0.75rem;
    color: #6b6558;
    margin-top: 4px;
}

.player-card.player-disconnected .player-name::after {
    content: ' *';
    color: #c48a6a;
}

.player-card.player-active .player-name {
    color: #e8d496;
}

/* ─── Clock display ──────────────────────────────────────────────────── */
.clock-display {
    font-family: 'Courier New', 'DejaVu Sans Mono', monospace;
    font-size: 1.8rem;
    font-weight: 700;
    color: #d5cfc4;
    background: #1a1814;
    border: 1px solid #3d3830;
    border-radius: 8px;
    padding: 8px 16px;
    text-align: center;
    transition: color 0.3s, background 0.3s;
}

.clock-display.clock-warning {
    color: #d4a843;
}

.clock-display.clock-critical {
    color: #ff4040;
    background: #2a1010;
    animation: clock-flash 0.5s ease infinite alternate;
}

@keyframes clock-flash {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}

/* ─── Board overlays (Start Game, Play Again, Draw Offer) ────────────── */
.board-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(26, 24, 20, 0.92);
    z-index: 1000;
    border-radius: 14px;
    padding: 36px 52px;
    gap: 16px;
    min-width: 280px;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.board-area {
    position: relative;
    display: inline-block;
}

.board-overlay .overlay-text {
    color: #d5cfc4;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.btn-start-game,
.btn-play-again {
    padding: 14px 40px;
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #c9a94e, #a6842c);
    color: #1a1812;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    font-family: inherit;
    box-shadow: 0 0 20px rgba(201, 169, 78, 0.4);
}

.btn-start-game:hover,
.btn-play-again:hover {
    transform: scale(1.05);
    box-shadow: 0 0 28px rgba(201, 169, 78, 0.6);
}

.btn-start-game:active,
.btn-play-again:active {
    transform: scale(0.97);
}

.btn-start-game:disabled,
.btn-play-again:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ─── Menu button ("…") ──────────────────────────────────────────────── */
.btn-menu {
    background: #3d3830;
    color: #c9b87a;
    border: 1px solid #4a4438;
    border-radius: 8px;
    font-size: 1.2rem;
    padding: 6px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.btn-menu:hover {
    background: #4a4438;
}

.menu-container {
    position: relative;
}

.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #26231c;
    border: 1px solid #3d3830;
    border-radius: 10px;
    padding: 4px;
    z-index: 100;
    min-width: 160px;
}

.menu-dropdown.open {
    display: block;
}

.menu-dropdown button {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: #c9b87a;
    cursor: pointer;
    text-align: left;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    transition: background 0.1s;
}

.menu-dropdown button:hover {
    background: #3a3528;
}

.menu-dropdown button.btn-danger {
    color: #c48a6a;
}

.menu-dropdown button.btn-danger:hover {
    background: #3a2020;
}

/* ─── Matchmaking modal ──────────────────────────────────────────────── */
.mm-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #3d3830;
    border-top-color: #c9a94e;
    border-radius: 50%;
    animation: mm-spin 0.8s linear infinite;
    margin: 20px auto;
}

@keyframes mm-spin {
    to { transform: rotate(360deg); }
}

.mm-detail {
    color: #8b8578;
    font-size: 0.85rem;
    margin-bottom: 16px;
    text-align: center;
}

/* ─── Draw offer modal ───────────────────────────────────────────────── */
.draw-offer-modal .modal-card {
    text-align: center;
    max-width: 380px;
}

.draw-offer-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.btn-accept {
    background: #5c7a4a;
    color: #f0ede4;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.15s;
}

.btn-accept:hover {
    background: #4e683e;
}

.btn-decline {
    background: #3d3830;
    color: #c9c0a8;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.15s;
}

.btn-decline:hover {
    background: #4a4438;
}

/* ─── Rating change display ──────────────────────────────────────────── */
.rating-change {
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 4px;
}

.rating-change.rating-up {
    color: #8ab86a;
}

.rating-change.rating-down {
    color: #c48a6a;
}

/* ─── Online status badges in user list ──────────────────────────────── */
.online-user-item .user-status-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.online-user-item .status-in-queue {
    background: #3a3528;
    color: #d4a843;
}

.online-user-item .status-in-game {
    background: #2a3020;
    color: #8ab86a;
}

.online-user-item .user-rating {
    font-size: 0.7rem;
    color: #8b8578;
    margin-left: auto;
    padding-left: 8px;
}

/* ─── Swap2 overlay ─────────────────────────────────────────────────── */
.swap2-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(26, 24, 20, 0.92);
    z-index: 1001;
    border-radius: 14px;
    padding: 36px 52px;
    gap: 16px;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.swap2-info {
    color: #d5cfc4;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.6;
}

.swap2-info small {
    color: #8b8578;
    font-weight: 400;
}

.swap2-buttons {
    display: flex;
    gap: 12px;
}

.swap2-btn {
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #c9a94e, #a6842c);
    color: #1a1812;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s;
    font-family: inherit;
}

.swap2-btn:hover {
    transform: scale(1.05);
}

.swap2-btn-white {
    background: linear-gradient(135deg, #e8e0d0, #c4b99e);
    color: #2a2416;
}

/* ─── Swap2 temp markers on board ───────────────────────────────────── */
.swap2-temp {
    opacity: 1;
}

/* ─── Variation markers — только буквы (стиль RenjuNote) ────────────── */
.var-marker {
    position: absolute;
    inset: 22%;
    border-radius: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: transform 0.1s;
}

.var-marker:hover {
    transform: scale(1.3);
}

.var-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: #3b7bb5;
    pointer-events: none;
    text-shadow: 0 0 2px rgba(0,0,0,0.4);
}

/* Все буквы одинакового тёмно-синего цвета */
.var-marker.var-main .var-number,
.var-number.var-main-letter {
    color: #3b7bb5;
}

.var-marker.var-main {
    background: transparent;
    border: none;
}

.cell.has-variation {
    /* зарезервировано */
}

/* Активная вариация — ярче и крупнее */
.var-marker.var-active .var-number {
    color: #7cb8f0;
    font-size: 0.9rem;
    text-shadow: 0 0 6px rgba(100, 160, 240, 0.7);
}

.var-marker.var-active {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: scale(1.25);
}

/* Точка-маркер для одиночного продолжения (без развилки) */
.var-marker.var-dot {
    inset: auto;
    width: 14px; height: 14px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #3060c0;
    border: 2px solid #4a80e0;
    border-radius: 50%;
}
.var-marker.var-dot:hover {
    transform: translate(-50%, -50%) scale(1.3);
}
.var-marker.var-dot.var-active {
    background: #4a80e0;
    box-shadow: 0 0 8px rgba(48, 96, 192, 0.7);
    transform: translate(-50%, -50%) scale(1.25);
}

/* ─── Дерево вариаций в нотации ─── */

/* Отступ для ходов на ветке */
.notation-cell.notation-indent {
    padding-left: 24px !important;
    position: relative;
}

/* Метка ветки (A, B, C...) */
.branch-tag {
    display: inline-block;
    background: #c9a94e;
    color: #1a1814;
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

/* Индикатор «есть варианты» у хода */
.branch-hint {
    color: #a08050;
    font-size: 0.75rem;
    cursor: default;
    opacity: 0.7;
}

/* Подсказка при наведении на пустую клетку в режиме анализа */
.play-mode .cell:not(.cell-x):not(.cell-o):hover {
    cursor: pointer;
}

/* ─── Кнопки выбора варианта (A, B, C...) ─── */
.branch-buttons { margin-top: 8px; }
.branch-buttons-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.branch-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(90, 150, 210, 0.5);
    background: rgba(70, 130, 200, 0.18);
    color: #5b9bd5;
    font-size: 1.15rem; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}
.branch-btn:hover { background: rgba(80, 140, 220, 0.35); border-color: rgba(110, 170, 240, 0.8); }
.branch-btn.branch-active { background: rgba(80, 140, 220, 0.4); border-color: rgba(120, 180, 250, 0.9); box-shadow: 0 0 8px rgba(70, 130, 210, 0.5); }

/* ─── Дерево вариантов (RenjuNote-style) ─── */
.tree-breadcrumb {
    margin-top: 8px;
    padding: 6px 10px;
    background: #1e1c18;
    border: 1px solid rgba(140, 120, 90, 0.2);
    border-radius: 4px;
    font-size: 0.8rem;
    color: #8a7a6a;
    min-height: 20px;
    display: flex; align-items: center; gap: 4px;
    flex-wrap: wrap;
}
.breadcrumb-item {
    color: #5b9bd5;
    cursor: pointer;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    transition: background 0.15s;
}
.breadcrumb-item:hover { background: rgba(80, 140, 220, 0.2); }
.breadcrumb-item.active { color: #d4a84b; }
.breadcrumb-sep { color: #5a4a3a; font-size: 0.75rem; }

.tree-pane {
    margin-top: 6px;
    background: #1a1814;
    border: 1px solid rgba(140, 120, 90, 0.2);
    border-radius: 4px;
    overflow: auto;
    min-height: 200px;
    max-height: 50vh;
}
.tree-pane svg { display: block; }
.tree-node-group { cursor: pointer; }

.tree-hover-preview {
    box-shadow: inset 0 0 0 3px rgba(212, 168, 75, 0.7) !important;
    z-index: 5;
}

/* ─── Комментарий к ходу ─── */
.comment-panel { margin-top: 8px; min-width: 320px; }
.move-comment {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-family: inherit;
    color: #c9c0b0;
    background: #1e1c18;
    border: 1px solid rgba(140, 120, 90, 0.25);
    border-radius: 4px;
    resize: vertical;
    min-height: 280px;
}
.move-comment:focus {
    outline: none;
    border-color: rgba(180, 150, 110, 0.5);
    background: #252320;
}
.move-comment:disabled { opacity: 0.4; }
.move-comment::placeholder { color: #5a5550; }

/* ─── SGF кнопки (правая колонка, компактно) ─── */
.sgf-btn-row {
    display: flex; gap: 4px; margin-top: 8px;
}
.sgf-btn {
    flex: 1;
    padding: 6px 0;
    font-size: 0.8rem;
    background: rgba(120, 100, 70, 0.2);
    border: 1px solid rgba(140, 120, 90, 0.3);
    color: #b0a080;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    text-align: center;
}
.sgf-btn:hover {
    background: rgba(160, 140, 100, 0.35);
    color: #d4c9a0;
    border-color: rgba(180, 150, 110, 0.5);
}

/* Online game board position */
.game-online-center { gap: 2px; }
.game-online-center .hover-preview { padding-bottom: 0; position: relative; z-index: 5; margin-top: -25px; }
.game-online-center .rules-label { margin-bottom: 0; position: relative; z-index: 5; margin-top: -25px; }
.game-online-layout .board-wrapper {
    margin-top: -5px;
}

/* ─── Rules label locked state ───────────────────────────────────────── */
.rules-label.locked {
    opacity: 0.7;
    cursor: default;
}

/* ─── Game online layout (for game.php) ──────────────────────────────── */
.game-online-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 0 10px;
}

.game-online-left,
.game-online-right {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.game-online-center {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ─── Game result overlay ────────────────────────────────────────────── */
.game-result-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(26, 24, 20, 0.92);
    z-index: 1002;
    border-radius: 14px;
    padding: 36px 52px;
    gap: 12px;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.game-result-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e8d496;
}

.game-result-sub {
    font-size: 0.85rem;
    color: #8b8578;
}

/* ─── Responsive for online game ─────────────────────────────────────── */
@media (max-width: 900px) {
    .game-online-layout {
        flex-direction: column;
        align-items: center;
    }
    .game-online-left,
    .game-online-right {
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
    }
    .clock-display {
        font-size: 1.3rem;
        padding: 6px 12px;
    }
}

/* ─── Toast popup (вместо alert) ───────────────────────────────────── */
.toast-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(20, 18, 14, 0.92);
    color: #e0d8c0;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    max-width: 80vw;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.toast-popup.toast-visible {
    opacity: 1 !important;
}

/* ─── Online panel: tabs & search ──────────────────────────────────── */
.online-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
    border-bottom: 2px solid #2a2720;
}
.online-tab {
    flex: 1;
    padding: 6px 0;
    background: none;
    border: none;
    color: #6b6558;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}
.online-tab:hover { color: #a8a294; }
.online-tab.active {
    color: #c9b87a;
    border-bottom: 2px solid #c9a94e;
    margin-bottom: -2px;
}

.online-search {
    width: 100%;
    padding: 6px 10px;
    background: #1a1814;
    border: 1px solid #3d3830;
    border-radius: 6px;
    color: #d5cfc4;
    font-size: 0.78rem;
    font-family: inherit;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.online-search::placeholder { color: #5a5548; }
.online-search:focus { outline: none; border-color: #c9a94e; }

/* ─── Online user item enhancements ────────────────────────────────── */
.online-user-item { cursor: pointer; transition: background 0.15s; }
.online-user-item:hover { background: #2a2720; }

.online-dot.offline { background: #4a4440; box-shadow: none; }

.online-user-item .fav-star { color: #c9a94e; font-size: 0.65rem; margin-left: 2px; }
.online-user-item .status-label {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}
.online-user-item .status-free { color: #8ab86a; background: #2a3020; }
.online-user-item .status-playing { color: #d4a843; background: #3a3528; }
.online-user-item .status-queue { color: #8aa8c8; background: #252a30; }

.online-user-item.offline-item { opacity: 0.5; }
.online-user-item.offline-item:hover { opacity: 0.8; }

/* ─── Player info modal ────────────────────────────────────────────── */
.player-info-card { max-width: 420px; }
.player-info-header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.player-info-name { font-size: 1.1rem; color: #d5cfc4; font-weight: 600; }
.player-info-location { font-size: 0.78rem; color: #8b8578; }
.player-info-status {
    font-size: 0.78rem;
    padding: 2px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 4px;
}
.player-info-status.online-status { background: #2a3020; color: #8ab86a; }
.player-info-status.offline-status { background: #2a2720; color: #8b8578; }
.player-info-status.playing-status { background: #3a3528; color: #d4a843; }

.player-info-ratings {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}
.player-info-ratings th, .player-info-ratings td {
    padding: 5px 8px;
    font-size: 0.75rem;
    border-bottom: 1px solid #2a2720;
    text-align: center;
}
.player-info-ratings th {
    color: #8b8578;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.65rem;
}
.player-info-ratings td { color: #c5bfb0; }
.player-info-ratings .mode-name { text-align: left; color: #c9b87a; font-weight: 600; }
.player-info-ratings tr:last-child td { border-bottom: none; }

.player-info-actions { display: flex; gap: 8px; margin-top: 14px; }
.player-info-actions .btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.player-info-actions .btn-fav { background: #3a3528; color: #c9a94e; }
.player-info-actions .btn-fav:hover { background: #4a4534; }
.player-info-actions .btn-invite { background: #3a5a2e; color: #f0ede4; }
.player-info-actions .btn-invite:hover { background: #4a6a3e; }

/* ─── Invitation form: custom time control inputs ──────────────────── */
.tc-inputs { display: flex; gap: 10px; }
.tc-field { flex: 1; }
.tc-field input[type="number"] {
    width: 100%;
    padding: 8px 12px;
    background: #1a1814;
    border: 1px solid #3d3830;
    border-radius: 8px;
    color: #e0d8c0;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    box-sizing: border-box;
    -moz-appearance: textfield;
}
.tc-field input[type="number"]::-webkit-outer-spin-button,
.tc-field input[type="number"]::-webkit-inner-spin-button { opacity: 1; }
.tc-field input[type="number"]:focus { outline: none; border-color: #c9a94e; }
.tc-label { display: block; text-align: center; color: #6b6558; font-size: 0.7rem; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.3px; }

/* ─── Invitation form modal ────────────────────────────────────────── */
#invite-form-modal .form-group { margin-bottom: 12px; }
#invite-form-modal .form-group label {
    display: block;
    color: #8b8578;
    font-size: 0.78rem;
    margin-bottom: 4px;
}
#invite-form-modal .form-group select {
    width: 100%;
    padding: 8px 12px;
    background: #1a1814;
    border: 1px solid #3d3830;
    border-radius: 8px;
    color: #d5cfc4;
    font-size: 0.9rem;
    font-family: inherit;
}
#invite-form-modal .btn-submit { display: block; width: 100%; margin-bottom: 8px; }

/* ─── Invitation waiting countdown ─────────────────────────────────── */
.iw-countdown { font-size: 1.4rem; font-weight: 700; margin: 8px 0 0; font-variant-numeric: tabular-nums; }

/* ─── Invitation received modal ────────────────────────────────────── */
.invitation-received-card { text-align: center; }
.invitation-detail { color: #c5bfb0; font-size: 0.95rem; margin: 12px 0 20px; line-height: 1.5; }
.invitation-detail strong { color: #c9b87a; }
.invitation-actions { display: flex; gap: 10px; justify-content: center; }
.invitation-actions .btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    border: none;
}
.invitation-actions .btn-submit { background: #5c7a4a; color: #f0ede4; }
.invitation-actions .btn-submit:hover { background: #4a6338; }

/* ─── Favorites management (in settings) ───────────────────────────── */
.favorites-manage { margin-top: 10px; }
.favorites-manage.hidden { display: none; }
.fav-manage-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid #2a2720;
    font-size: 0.82rem;
    color: #c9b87a;
}
.fav-manage-item .btn-remove-fav {
    background: none;
    border: none;
    color: #8b8578;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 8px;
    font-family: inherit;
}
.fav-manage-item .btn-remove-fav:hover { color: #c48a6a; }
.fav-manage-empty { color: #6b6558; font-size: 0.8rem; text-align: center; padding: 8px 0; }

/* ─── Profile tab content ──────────────────────────────────────────── */
.auth-card-profile { max-width: 600px; }
.profile-tab-content { display: none !important; }
.profile-tab-content.active { display: block !important; }

.profile-stats-card {
    background: #1e1b17;
    border: 1px solid #2e2a24;
    border-radius: 12px;
    padding: 16px 14px;
}

.profile-stats-card h3 {
    font-size: 0.82rem;
    color: #c9a94e;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

.profile-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.profile-stats-table th, .profile-stats-table td {
    padding: 6px 6px;
    border-bottom: 1px solid #2a2720;
    text-align: center;
    color: #c5bfb0;
}
.profile-stats-table th {
    color: #7a7468;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.3px;
}
.profile-stats-table .mode-name { text-align: left; color: #c9b87a; font-weight: 600; }
.profile-stats-table .stat-rating { color: #e0d8c0; font-weight: 700; font-size: 0.85rem; }
.profile-stats-table .stat-pct { color: #c9a94e; font-weight: 600; }
.profile-stats-table tr:last-child td { border-bottom: none; }
.profile-stats-table tbody tr:hover { background: #25221c; }

/* ─── Invitation form link in player modal ─────────────────────────── */
.player-info-invite-area { margin-top: 8px; text-align: center; }
.player-info-invite-area .btn-invite-link {
    background: none;
    border: 1px solid #3d3830;
    color: #8b8578;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
    transition: all 0.2s;
}
.player-info-invite-area .btn-invite-link:hover { border-color: #c9a94e; color: #c9b87a; }

/* ═══════════════════════════════════════════════════════════════════════════
   CROSS-BROWSER FIXES (Chrome, Firefox, Safari, Edge, Yandex)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Safari: -webkit- prefixes for user-select ─────────────────────────── */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
a, button, .btn, .cell, .online-user-item, .history-row, .notation-cell {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ─── Safari 14 fallback for `inset` ───────────────────────────────────── */
.modal-overlay,
.var-marker,
.cell-forbidden::before,
.cell-forbidden::after {
    top: 0; right: 0; bottom: 0; left: 0;
}

/* ─── Safari: -webkit-appearance: none on buttons ─────────────────────── */
button, .btn, .btn-submit, .btn-start-game, .btn-play-again,
.btn-accept, .btn-decline, .btn-menu, .btn-link, .score-btn,
.mode-btn, .play-btn, .btn-feedback, .btn-side, .swap2-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ─── Older Safari: aspect-ratio fallback via padding ──────────────────── */
@supports not (aspect-ratio: 1) {
    .cell {
        height: 0;
        padding-bottom: 100%;
    }
    .scoreboard-grid {
        height: 0;
        padding-bottom: 100%;
    }
}

/* ─── Firefox: scrollbar styling ───────────────────────────────────────── */
.notation-panel {
    scrollbar-width: thin;
    scrollbar-color: #3d3830 #1a1814;
}

/* ─── Font smoothing for consistent text across browsers ───────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ─── Safari: @keyframes prefix for older versions ─────────────────────── */
@-webkit-keyframes pop-in {
    0% { -webkit-transform: scale(0.8); opacity: 0; }
    100% { -webkit-transform: scale(1); opacity: 1; }
}
@-webkit-keyframes fade-in {
    from { opacity: 0; } to { opacity: 1; }
}
@-webkit-keyframes mm-spin {
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes last-move-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(212,168,67,0.7), 0 0 20px rgba(212,168,67,0.3); }
    100% { box-shadow: 0 0 0 3px #d4a843, 0 0 18px rgba(212,168,67,0.7); }
}
@-webkit-keyframes clock-flash {
    from { opacity: 1; } to { opacity: 0.5; }
}

/* ─── Edge/Chrome: ensure grid works with older syntax ─────────────────── */
.board {
    display: -ms-grid;
    display: grid;
}

/* ─── Number input: hide spinners in Firefox ───────────────────────────── */
.tc-field input[type="number"] {
    -moz-appearance: textfield;
}

/* ─── Fix 100vw on mobile Safari (no scrollbar accounted) ──────────────── */
.modal-card {
    width: min(480px, 90vw);
    max-width: calc(100vw - 40px);
}

/* ─── Ensure flex gap works in older Safari ────────────────────────────── */
@supports not (gap: 8px) {
    .user-bar > * + * { margin-left: 8px; }
    .game-layout > * + * { margin-left: 20px; }
    .game-online-layout > * + * { margin-left: 20px; }
}

/* ─── Команды (Teams) ──────────────────────────────────────── */

.team-create-form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.team-create-form input {
    flex: 1;
}

.team-invite-list {
    margin-top: 12px;
}

.team-invite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(201, 169, 78, 0.08);
    border: 1px solid rgba(201, 169, 78, 0.15);
    border-radius: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 8px;
}

.team-invite-from {
    color: #aaa;
    font-size: 0.85em;
    margin: 0 8px;
}

.team-invite-actions {
    display: flex;
    gap: 6px;
}

.team-name {
    color: #c9a94e;
    margin-bottom: 4px;
}

.team-info {
    color: #888;
    margin-bottom: 12px;
}

.captain-row {
    font-weight: 600;
    color: #c9a94e !important;
}

.captain-row td {
    color: #c9a94e !important;
}

.team-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.team-no-invites {
    color: #888;
    font-size: 0.9em;
}

.transfer-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0;
}

.transfer-option {
    width: 100%;
    text-align: left;
}

.btn-team-invite {
    margin-top: 8px;
}

.player-info-team {
    margin: 4px 0;
    color: #ccc;
}

.player-info-team strong {
    color: #c9a94e;
}

/* ─── Турниры ─────────────────────────── */

/* Tournament pages: reset negative margin, add top spacing */
.tournaments-page .game-center,
.tournament-page .game-center {
    margin-top: 0;
}
.tournaments-page .game-layout,
.tournament-page .game-layout {
    padding-top: 60px;
}
.tournaments-page .game-left,
.tournament-page .game-left {
    padding-top: 60px;
}

/* Container cards */
.tournaments-container, .tournament-detail {
    padding: 24px;
    background: #26231c;
    border: 1px solid #3d3830;
    border-radius: 14px;
}
.tournaments-container h1, .tournament-detail h1 {
    font-size: 1.3rem;
    color: #d5cfc4;
    margin-bottom: 4px;
}
.tournaments-section { margin-bottom: 32px; }
.tournaments-section h2 {
    color: #a8a294;
    font-size: 1rem;
    margin-bottom: 12px;
}
.tournaments-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.tournaments-table th { color: #c9a94e; border-bottom: 2px solid rgba(201,169,78,0.3); padding: 8px 6px; text-align: left; }
.tournaments-table td { padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #ccc; }
.tournaments-table a { color: #c9a94e; text-decoration: none; }
.tournaments-table a:hover { text-decoration: underline; }
.tournaments-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.btn-join { background: rgba(76,175,80,0.3); color: #4CAF50; border-color: #4CAF50; }
.btn-leave { background: rgba(244,67,54,0.3); color: #F44336; border-color: #F44336; }
.btn-watch { background: rgba(201,169,78,0.2); color: #c9a94e; border-color: #c9a94e; text-decoration: none; padding: 4px 12px; border-radius: 4px; }
.empty-msg { color: #888; font-style: italic; padding: 16px 0; }
.tournament-detail { max-width: 900px; }
.tournament-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; color: #aaa; }
.tournament-meta span { background: rgba(201,169,78,0.08); padding: 4px 10px; border-radius: 4px; }
.tournament-meta strong { color: #c9a94e; }
.tournament-actions { margin: 16px 0; }
.tournament-actions .btn-start { background: rgba(76,175,80,0.3); color: #4CAF50; border-color: #4CAF50; }
.tournament-actions .btn-next-round { background: rgba(33,150,243,0.3); color: #2196F3; border-color: #2196F3; }

/* Tournament modal form inputs */
.tournaments-page .modal-content input,
.tournaments-page .modal-content select,
.tournament-page .modal-content input,
.tournament-page .modal-content select {
    padding: 8px 12px;
    background: #1a1814;
    border: 1px solid #3d3830;
    border-radius: 8px;
    color: #d5cfc4;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.tournaments-page .modal-content input:focus,
.tournaments-page .modal-content select:focus,
.tournament-page .modal-content input:focus,
.tournament-page .modal-content select:focus {
    outline: none;
    border-color: #c9a94e;
}
.tournaments-page .modal-content label,
.tournament-page .modal-content label {
    color: #a8a294;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 2px;
}
.tournaments-page .modal-content .form-group,
.tournament-page .modal-content .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

/* Tournament pairs + standings layout (in_progress / finished) */
.tournament-layout { display: flex; gap: 24px; margin-top: 20px; }
.tournament-pairs-column { flex: 1; min-width: 0; }
.tournament-standings-column { flex: 1; min-width: 0; }

.tournament-pairs-column h2, .tournament-standings-column h2 { color: #c9a94e; font-size: 1.1em; margin-bottom: 12px; }

/* Pairs list */
.pairs-list { list-style: none; padding: 0; margin: 0; }
.pair-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; margin-bottom: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; }
.pair-item:hover { background: rgba(255,255,255,0.06); }
.pair-board { color: #888; font-size: 0.85em; min-width: 50px; }
.pair-players { flex: 1; text-align: center; }
.pair-players .black-name { color: #eee; }
.pair-players .vs { color: #666; margin: 0 8px; }
.pair-players .white-name { color: #bbb; }
.pair-players .pair-bye { color: #888; font-style: italic; }
.pair-status { min-width: 80px; text-align: right; }
.pair-status a { color: #c9a94e; text-decoration: none; font-size: 0.85em; }
.pair-status a:hover { text-decoration: underline; }
.pair-status .status-winner { color: #4CAF50; font-size: 0.85em; }
.pair-status .status-draw { color: #FFA726; font-size: 0.85em; }
.pair-status .status-playing { color: #2196F3; font-size: 0.85em; }

/* Standings table */
.standings-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.standings-table th { color: #c9a94e; border-bottom: 2px solid rgba(201,169,78,0.3); padding: 6px 4px; text-align: center; font-weight: normal; }
.standings-table td { padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #ccc; text-align: center; }
.standings-table tr.top-1 td { color: #FFD700; font-weight: bold; }
.standings-table tr.top-2 td { color: #C0C0C0; font-weight: bold; }
.standings-table tr.top-3 td { color: #CD7F32; font-weight: bold; }
.standings-table .pos { color: #888; width: 30px; }

/* Countdown overlay */
.tournament-countdown { display: none; text-align: center; padding: 12px; margin-top: 16px; background: rgba(201,169,78,0.1); border: 1px solid rgba(201,169,78,0.3); border-radius: 8px; }
.tournament-countdown.visible { display: block; }
.tournament-countdown .countdown-text { color: #c9a94e; font-size: 1em; }
.tournament-countdown .countdown-number { color: #fff; font-size: 1.4em; font-weight: bold; margin-left: 8px; }

/* ─── Team Tournament: Board assignments & substitution ───────── */
.team-boards-panel { margin-top: 16px; padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(201,169,78,0.2); border-radius: 8px; }
.team-boards-panel h3 { color: #c9a94e; font-size: 1em; margin-bottom: 8px; }
.team-boards-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.team-boards-table th { color: #c9a94e; border-bottom: 1px solid rgba(201,169,78,0.3); padding: 6px 8px; text-align: left; font-weight: normal; }
.team-boards-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #ccc; }
.team-boards-table .board-num { color: #888; width: 40px; text-align: center; }
.team-boards-table .board-player { color: #eee; }
.team-boards-table .board-player.selected { color: #c9a94e; font-weight: bold; }
.team-boards-table .board-player.placeholder { color: #666; font-style: italic; }

.btn-board-assign { padding: 2px 8px; font-size: 0.8em; background: rgba(201,169,78,0.15); color: #c9a94e; border: 1px solid rgba(201,169,78,0.3); border-radius: 4px; cursor: pointer; }
.btn-board-assign:hover { background: rgba(201,169,78,0.3); }

.btn-substitute { padding: 2px 8px; font-size: 0.8em; background: rgba(33,150,243,0.15); color: #2196F3; border: 1px solid rgba(33,150,243,0.3); border-radius: 4px; cursor: pointer; }
.btn-substitute:hover { background: rgba(33,150,243,0.3); }

.team-forfeit-btn { padding: 4px 12px; font-size: 0.85em; background: rgba(244,67,54,0.12); color: #F44336; border: 1px solid rgba(244,67,54,0.3); border-radius: 4px; cursor: pointer; }
.team-forfeit-btn:hover { background: rgba(244,67,54,0.25); }

/* Team standings with team column */
.standings-table .team-col { min-width: 120px; text-align: left; padding-left: 8px; }
.standings-table .team-name-cell { color: #c9a94e; font-weight: bold; }
.standings-table .team-score-cell { font-weight: bold; }
.standings-table .team-games-cell { color: #888; }
.standings-table .team-diff-cell { color: #aaa; }
.standings-table .team-streak-cell { font-size: 0.85em; }
.standings-table .team-streak-cell.win { color: #4CAF50; }
.standings-table .team-streak-cell.loss { color: #F44336; }
.standings-table .team-streak-cell.draw { color: #FFA726; }

/* Team tournament info header */
.team-tournament-header { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: rgba(201,169,78,0.08); border: 1px solid rgba(201,169,78,0.15); border-radius: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.team-tournament-header .team-info-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; background: rgba(201,169,78,0.12); border-radius: 12px; color: #c9a94e; font-size: 0.85em; }
.team-tournament-header .team-info-badge strong { color: #fff; font-weight: bold; }

/* Team picker (captain's team selection in modal) */
.team-picker { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.team-picker-option { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; cursor: pointer; transition: background 0.15s; }
.team-picker-option:hover { background: rgba(201,169,78,0.1); border-color: rgba(201,169,78,0.3); }
.team-picker-option.selected { background: rgba(201,169,78,0.12); border-color: #c9a94e; }
.team-picker-option .team-picker-name { color: #eee; flex: 1; }
.team-picker-option .team-picker-count { color: #888; font-size: 0.85em; }

/* Round control for team tournaments */
.round-control { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.round-control .round-label { color: #c9a94e; font-weight: bold; font-size: 1.1em; }
.round-control .round-status { color: #888; font-size: 0.9em; }
.round-control .round-timer { color: #2196F3; font-size: 0.9em; font-weight: bold; }

/* Forfeit confirmation dialog */
.forfeit-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.forfeit-dialog.hidden { display: none; }
.forfeit-dialog-content { background: #26231c; border: 1px solid rgba(201,169,78,0.3); border-radius: 12px; padding: 24px; max-width: 400px; width: 90%; text-align: center; }
.forfeit-dialog-content h3 { color: #F44336; font-size: 1.1em; margin-bottom: 12px; }
.forfeit-dialog-content p { color: #ccc; margin-bottom: 16px; font-size: 0.9em; }
.forfeit-dialog-actions { display: flex; gap: 8px; justify-content: center; }
.forfeit-dialog-actions .btn-confirm { padding: 8px 20px; background: #F44336; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.forfeit-dialog-actions .btn-cancel { padding: 8px 20px; background: rgba(255,255,255,0.08); color: #ccc; border: none; border-radius: 6px; cursor: pointer; }
.forfeit-dialog-actions .btn-confirm:hover { background: #D32F2F; }

/* ─── Help icon in user-bar ─────────────────────────────────────────────── */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid #a8a294;
    border-radius: 50%;
    color: #a8a294;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.help-icon:hover {
    color: #d4a843;
    border-color: #d4a843;
}

/* ─── Help modal ────────────────────────────────────────────────────────── */
.help-modal-card {
    max-width: 800px;
    width: 90vw;
    height: 70vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.help-title {
    padding: 20px 24px 0 24px;
    margin: 0;
    color: #c9b87a;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.help-modal-card .auth-close {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 10;
}

.help-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    margin-top: 16px;
}

/* ─── Left tab bar ──────────────────────────────────────────────────────── */
.help-tabs {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid #2a2720;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    overflow-y: auto;
}

.help-tab {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: #a8a294;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
    flex-shrink: 0;
}
.help-tab:hover {
    background: #221f1a;
    color: #c9b87a;
}
.help-tab.active {
    background: #2a2720;
    border-left-color: #c9a94e;
    color: #c9a94e;
    font-weight: 600;
}

/* ─── Right content area ────────────────────────────────────────────────── */
.help-content {
    flex: 1;
    padding: 8px 24px 24px 24px;
    overflow-y: auto;
    color: #c5bfb3;
    line-height: 1.65;
}

.help-pane h2 {
    color: #c9b87a;
    font-size: 1.15rem;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a2720;
}

.help-pane h3 {
    color: #b8a878;
    font-size: 1.02rem;
    margin: 18px 0 8px 0;
}

.help-pane h4 {
    color: #a89868;
    font-size: 0.95rem;
    margin: 14px 0 6px 0;
}

.help-pane p {
    margin: 0 0 10px 0;
}

.help-pane ul, .help-pane ol {
    margin: 0 0 12px 0;
    padding-left: 22px;
}

.help-pane li {
    margin-bottom: 4px;
}

.help-pane strong {
    color: #d5cfc4;
}

.help-pane table {
    margin: 10px 0 16px 0;
}

.help-pane th {
    color: #c9b87a;
}

.help-pane td {
    color: #b8a898;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .help-modal-card {
        width: 95vw;
        height: 85vh;
    }
    .help-layout {
        flex-direction: column;
    }
    .help-tabs {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid #2a2720;
        padding: 4px 8px;
        flex-shrink: 0;
    }
    .help-tab {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 0.82rem;
        flex-shrink: 0;
    }
    .help-tab.active {
        border-left-color: transparent;
        border-bottom-color: #c9a94e;
    }
    .help-content {
        padding: 12px 16px 20px 16px;
    }
}

/* Fixed help icon for profile page (no user-bar) */
.help-icon-fixed {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 300;
}
.forfeit-dialog-actions .btn-cancel:hover { background: rgba(255,255,255,0.15); }

/* ─── Задачи (Tasks) ─────────────────────────────────────────────────── */

/* Panel container — shown only in tasks mode */
.task-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #1e1c17;
    border: 1px solid #2a2720;
    border-radius: 12px;
    margin-top: 8px;
}

body.tasks-mode .task-panel { display: flex; }
body.tasks-mode .mode-toggle-card { display: block; width: 100%; align-self: stretch; }

/* Hide non-task elements in tasks mode */
body.tasks-mode .scoreboard,
body.tasks-mode .online-users-panel { display: none !important; }

body.tasks-mode .board-wrapper,
body.tasks-mode .hover-preview,
body.tasks-mode .hotkey-hint { display: block; }

body.tasks-mode .notation-panel,
body.tasks-mode #btn-new-game,
body.tasks-mode .sgf-btn-row,
body.tasks-mode .comment-panel,
body.tasks-mode .branch-buttons,
body.tasks-mode .tree-pane,
body.tasks-mode .tree-breadcrumb { display: none !important; }

/* Difficulty slider */
.difficulty-slider-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.difficulty-label {
    font-size: 0.85rem;
    color: #8a8370;
    font-weight: 500;
}

.difficulty-slider {
    -webkit-appearance: none;
    width: calc(100% - 5px);
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #2a6b2a, #c9a94e, #c94e4e);
    outline: none;
    cursor: pointer;
    margin: 0 2px;
}

.difficulty-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9a94e, #a6842c);
    border: 2px solid #1e1c17;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(201, 169, 78, 0.4);
    transition: transform 0.15s ease;
}

.difficulty-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.difficulty-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9a94e, #a6842c);
    border: 2px solid #1e1c17;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(201, 169, 78, 0.4);
}

.difficulty-ticks {
    display: flex;
    justify-content: space-between;
    padding: 0 3px;
    font-size: 0.7rem;
    color: #6b6558;
    user-select: none;
}

.difficulty-value {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #c9a94e;
}

/* Task buttons */
.btn-task {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #c9a94e, #a6842c);
    color: #1a1812;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s ease;
    box-shadow: 0 0 12px rgba(201, 169, 78, 0.3);
}

.btn-task:hover {
    box-shadow: 0 0 20px rgba(201, 169, 78, 0.5);
    transform: translateY(-1px);
}

.btn-task:active {
    transform: scale(0.97);
}

.btn-task:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Task feedback */
.task-feedback {
    text-align: center;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    display: none;
}

.task-feedback.error {
    display: block;
    background: rgba(220, 80, 60, 0.15);
    border: 1px solid rgba(220, 80, 60, 0.3);
    color: #e8988a;
}

.task-feedback.success {
    display: block;
    background: rgba(80, 180, 80, 0.15);
    border: 1px solid rgba(80, 180, 80, 0.3);
    color: #8cd88c;
}

/* Task action buttons row */
.task-actions {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.task-actions.visible { display: flex; }

.btn-task-secondary {
    width: 100%;
    padding: 10px 16px;
    background: #2a2720;
    color: #a8a294;
    border: 1px solid #3a3730;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s ease;
}

.btn-task-secondary:hover {
    background: #3a3730;
    color: #d4cfc4;
}