/**
 * Chess Club - тёмная премиум-тема, lichess-стиль.
 * @package ChessClub
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&family=JetBrains+Mono&display=swap');

/* ============================================================================
   КОРНЕВОЙ КОНТЕЙНЕР
   ============================================================================ */
#chess-club-app {
    --cc-bg-950:    #090d16;
    --cc-bg-900:    #0f172a;
    --cc-bg-800:    #1e293b;
    --cc-bg-700:    #334155;
    --cc-amber:     #f59e0b;
    --cc-amber-h:   #fbbf24;
    --cc-cyan:      #06b6d4;
    --cc-green:     #10b981;
    --cc-red:       #ef4444;
    --cc-text:      #f8fafc;
    --cc-muted:     #94a3b8;
    --cc-border:    rgba(255,255,255,0.08);
    --cc-r-sm:      6px;
    --cc-r-md:      8px;
    --cc-r-lg:      12px;
    --cc-board:     480px;

    font-family: 'Inter', system-ui, sans-serif;
    background: var(--cc-bg-950);
    color: var(--cc-text);
    line-height: 1.5;
    box-sizing: border-box;
    /* Занимаем всю ширину контента темы */
    width: 100%;
    margin: 0;
    padding: 0;
}

#chess-club-app *, #chess-club-app *::before, #chess-club-app *::after {
    box-sizing: border-box;
}


/* ============================================================================
   TOP-BAR (заголовок + профіль) всередині правої колонки
   ============================================================================ */
.chess-club-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.chess-club-top-bar .chess-club-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--cc-text);
    letter-spacing: -.3px;
    margin: 0;
}

.chess-club-top-bar .chess-club-subtitle {
    font-size: 11px;
    color: var(--cc-muted);
    margin: 2px 0 0;
}

.chess-club-top-bar .chess-club-user-panel {
    flex-shrink: 0;
    padding: 4px 8px;
}

/* ============================================================================
   ШАПКА (залишаємо стилі, але сама шапка прибрана з HTML)
   ============================================================================ */
.chess-club-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--cc-bg-900);
    border-bottom: 1px solid var(--cc-border);
    gap: 12px;
    flex-wrap: wrap;
}

.chess-club-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px; font-weight: 700;
    margin: 0; color: var(--cc-text); letter-spacing: -.3px;
}
.chess-club-title-icon { color: var(--cc-amber); }
.chess-club-subtitle   { color: var(--cc-muted); font-size: 12px; margin: 2px 0 0; }

.chess-club-user-panel {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,.04);
    border-radius: var(--cc-r-md);
    flex-shrink: 0;
}
.chess-club-avatar {
    width:30px; height:30px; border-radius:50%;
    background: linear-gradient(135deg,var(--cc-cyan),var(--cc-amber));
    display:flex; align-items:center; justify-content:center;
    font-weight:700; color:#fff; font-size:13px; flex-shrink:0;
}
.chess-club-user-name   { font-weight:600; font-size:13px; color:var(--cc-text); line-height:1.2; }
.chess-club-user-rating { font-size:11px; color:var(--cc-cyan); font-family:'JetBrains Mono',monospace; }
.chess-club-guest-notice { color:var(--cc-muted); font-size:12px; }

/* ============================================================================
   БАННЕР ПРИГЛАШЕНИЯ
   ============================================================================ */
.chess-club-invite-banner {
    display: none;
    align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 20px; flex-wrap: wrap;
    background: rgba(245,158,11,.1);
    border-bottom: 1px solid var(--cc-amber);
}
.chess-club-invite-banner.is-visible { display: flex; }
.chess-club-invite-info    { display:flex; align-items:center; gap:10px; }
.chess-club-invite-icon    { font-size:18px; }
.chess-club-invite-sender  { color:var(--cc-text); font-weight:600; }
.chess-club-invite-text    { color:var(--cc-muted); }
.chess-club-invite-actions { display:flex; gap:8px; }

/* ============================================================================
   ГЛАВНАЯ СЕТКА — доска слева, панели справа
   ============================================================================ */
.chess-club-main {
    display: flex;
    /* Высота задаётся динамически через JS (updateMainHeight) */
    min-height: 500px;
    overflow: visible;
}

/* ЛЕВАЯ — только доска, занимает весь доступный размер */
.chess-club-board-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--cc-bg-950);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* ПРАВАЯ — панели, скролл внутри */
.chess-club-side-column {
    flex: 1;
    min-width: 240px;

    background: var(--cc-bg-900);
    border-left: 1px solid var(--cc-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--cc-bg-700) transparent;
    /* растягиваем на всю высоту .chess-club-main */
    height: 100%;
}
.chess-club-side-column::-webkit-scrollbar { width:4px; }
.chess-club-side-column::-webkit-scrollbar-thumb { background:var(--cc-bg-700); border-radius:2px; }

/* ============================================================================
   ПАНЕЛЬ ИГРОКА (над/под доской)
   ============================================================================ */
.chess-club-player-bar {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; gap: 8px;
}
.chess-club-player-info { display:flex; align-items:center; gap:8px; min-width:0; }
.chess-club-player-name {
    color:var(--cc-text); font-weight:600; font-size:13px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.chess-club-status-dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--cc-green); flex-shrink:0;
    box-shadow:0 0 5px var(--cc-green);
}
.chess-club-status-dot.is-offline { background:#64748b; box-shadow:none; }

.chess-club-turn-badge {
    font-family:'JetBrains Mono',monospace;
    font-size:11px; font-weight:700; color:var(--cc-amber);
    background:rgba(245,158,11,.15);
    padding:3px 8px; border-radius:var(--cc-r-sm);
    letter-spacing:.5px; text-transform:uppercase; white-space:nowrap;
}
.chess-club-turn-badge.is-game-over { color:var(--cc-red); background:rgba(239,68,68,.15); }

/* ============================================================================
   ДОСКА
   ============================================================================ */
.chess-club-board-wrapper {
    /* Доска = квадрат, максимальный из доступных ширины и высоты колонки.
       Используем min() чтобы не вылезать за границы и CSS-переменную как лимит. */
    width:  min(var(--cc-board), 100%, calc(var(--cc-main-h, 100vh) - 24px));
    height: min(var(--cc-board), 100%, calc(var(--cc-main-h, 100vh) - 24px));
    aspect-ratio: 1/1;
    border-radius: var(--cc-r-lg);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
    border: 3px solid var(--cc-bg-800);
    flex-shrink: 0;
}

/* cm-chessboard цвета клеток */
#chess-club-app .cm-chessboard .board .square.white { fill:#4b586d !important; }
#chess-club-app .cm-chessboard .board .square.black { fill:#2b3543 !important; }
#chess-club-app .cm-chessboard .coordinates { fill:rgba(248,250,252,.6); font-size:9px; }

/* ============================================================================
   КНОПКИ ПОД ДОСКОЙ + ПОЛЗУНОК
   ============================================================================ */
.chess-club-board-actions {
    display: flex; gap: 8px; width: 100%; flex-wrap: wrap;
}

.chess-club-size-control {
    display: flex; align-items: center; gap: 8px; width: 100%;
}
.chess-club-size-label {
    font-size:11px; color:var(--cc-muted); white-space:nowrap; flex-shrink:0;
}
.chess-club-size-slider {
    flex:1; -webkit-appearance:none; appearance:none;
    height:4px; background:var(--cc-bg-700); border-radius:2px;
    outline:none; cursor:pointer;
}
.chess-club-size-slider::-webkit-slider-thumb {
    -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
    background:var(--cc-amber); cursor:pointer;
    box-shadow:0 0 5px rgba(245,158,11,.7);
    transition:transform .15s;
}
.chess-club-size-slider::-webkit-slider-thumb:hover { transform:scale(1.25); }
.chess-club-size-slider::-moz-range-thumb {
    width:14px; height:14px; border-radius:50%;
    background:var(--cc-amber); cursor:pointer; border:none;
}
.chess-club-size-value {
    font-size:11px; font-family:'JetBrains Mono',monospace;
    color:var(--cc-amber); min-width:36px; text-align:right; flex-shrink:0;
}

/* ============================================================================
   КНОПКИ
   ============================================================================ */
.chess-club-btn {
    background: linear-gradient(135deg,var(--cc-bg-800),var(--cc-bg-900)) !important;
    border: 1px solid var(--cc-border) !important;
    color: var(--cc-text) !important;
    padding: 8px 14px !important;
    border-radius: var(--cc-r-md) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: inherit !important;
    outline: none !important;
    user-select: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
}
.chess-club-btn:hover:not(:disabled) {
    background:var(--cc-amber); color:#000;
    border-color:var(--cc-amber);
    box-shadow:0 0 12px rgba(245,158,11,.4);
    transform:translateY(-1px);
}
.chess-club-btn:active:not(:disabled) { transform:translateY(0); }
.chess-club-btn:disabled { opacity:.5; cursor:not-allowed; }
.chess-club-btn.is-primary { background:var(--cc-amber); color:#000; border-color:var(--cc-amber); }
.chess-club-btn.is-primary:hover:not(:disabled) { filter:brightness(1.08); background:var(--cc-amber); color:#000; box-shadow:0 0 12px rgba(245,158,11,.4); }
.chess-club-btn.is-small   { padding:5px 10px; font-size:12px; }
.chess-club-btn.is-tiny    { padding:3px 8px; font-size:11px; }
.chess-club-btn.is-ghost   { background:transparent; }
.chess-club-btn.is-danger:hover:not(:disabled) {
    background:var(--cc-red); border-color:var(--cc-red); color:#fff;
    box-shadow:0 0 10px rgba(239,68,68,.4);
}

/* ============================================================================
   ПРАВАЯ КОЛОНКА — секции
   ============================================================================ */
.chess-club-side-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--cc-border);
    flex-shrink: 0;
}
/* Чат растягивается на оставшееся место */
.chess-club-side-section.is-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.chess-club-section-title {
    font-family:'Space Grotesk',sans-serif;
    font-size:11px; font-weight:700; color:var(--cc-muted);
    text-transform:uppercase; letter-spacing:.8px;
    margin:0 0 10px;
    display:flex; justify-content:space-between; align-items:center;
}
.chess-club-panel-count {
    font-size:11px; color:var(--cc-cyan);
    background:rgba(6,182,212,.15);
    padding:1px 6px; border-radius:8px;
    font-family:'JetBrains Mono',monospace;
    text-transform:none; letter-spacing:0;
}

.chess-club-mode-buttons {
    display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px;
}
.chess-club-difficulty-row {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.chess-club-difficulty-label { font-size:12px; color:var(--cc-muted); }
.chess-club-select {
    background: var(--cc-bg-800) !important;
    border: 1px solid var(--cc-border) !important;
    color: var(--cc-text) !important;
    padding: 5px 8px !important;
    border-radius: var(--cc-r-sm) !important;
    font-size: 12px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    outline: none !important;
    flex: 1 !important;
    transition: border-color .15s !important;
    box-shadow: none !important;
    -webkit-appearance: auto !important;
}
.chess-club-select:focus { border-color: var(--cc-amber) !important; }

/* ============================================================================
   ОНЛАЙН-ИГРОКИ
   ============================================================================ */
.chess-club-users-list {
    display:flex; flex-direction:column; gap:5px;
    max-height:140px; overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:var(--cc-bg-700) transparent;
}
.chess-club-users-list::-webkit-scrollbar { width:4px; }
.chess-club-users-list::-webkit-scrollbar-thumb { background:var(--cc-bg-700); border-radius:2px; }

.chess-club-user-item {
    display:flex; justify-content:space-between; align-items:center;
    gap:6px; padding:7px 10px;
    background:rgba(255,255,255,.03); border-radius:var(--cc-r-md);
    transition:background .15s;
}
.chess-club-user-item:hover { background:rgba(255,255,255,.06); }
.chess-club-user-item-info  { display:flex; align-items:center; gap:7px; min-width:0; flex:1; }
.chess-club-user-item-name  { color:var(--cc-text); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chess-club-user-item-rating { color:var(--cc-cyan); font-family:'JetBrains Mono',monospace; font-size:11px; margin-left:3px; }
.chess-club-user-item-badge  { font-size:10px; padding:1px 5px; border-radius:4px; background:rgba(6,182,212,.15); color:var(--cc-cyan); }
.chess-club-empty-message    { color:var(--cc-muted); font-size:12px; padding:8px 0; text-align:center; }

/* ============================================================================
   ЧАТ
   ============================================================================ */
.chess-club-chat-messages {
    flex:1; overflow-y:auto; min-height:80px;
    background:rgba(0,0,0,.2); border-radius:var(--cc-r-md);
    padding:8px 10px; font-size:13px;
    display:flex; flex-direction:column; gap:5px; margin-bottom:10px;
    scrollbar-width:thin; scrollbar-color:var(--cc-bg-700) transparent;
}
.chess-club-chat-messages::-webkit-scrollbar { width:4px; }
.chess-club-chat-messages::-webkit-scrollbar-thumb { background:var(--cc-bg-700); border-radius:2px; }

.chess-club-chat-message  { word-wrap:break-word; line-height:1.4; }
.chess-club-chat-author   { color:var(--cc-cyan); font-weight:600; margin-right:4px; }
.chess-club-chat-text     { color:var(--cc-text); }
.chess-club-chat-message.is-system .chess-club-chat-text { color:var(--cc-amber); font-style:italic; }

.chess-club-chat-input-row { display:flex; gap:6px; flex-shrink:0; }
.chess-club-input {
    flex-grow:1; background:var(--cc-bg-800); border:1px solid var(--cc-border);
    padding:8px 12px; border-radius:var(--cc-r-md);
    color:var(--cc-text); font-size:13px; font-family:inherit;
    outline:none; min-width:0; transition:border-color .15s;
}
.chess-club-input:focus { border-color:var(--cc-amber); }
.chess-club-input::placeholder { color:var(--cc-muted); }

/* ============================================================================
   ТРЕУГОЛЬНИК RESIZE (в правой колонке — sticky снизу)
   ============================================================================ */
.chess-club-resize-wrap {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    background: var(--cc-bg-900);
    border-top: 1px solid var(--cc-border);
}
.chess-club-resize-handle {
    width: 36px; height: 36px;
    cursor: ns-resize;
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 4px;
    position: relative;
}
.chess-club-resize-handle::after {
    content:''; display:block; width:0; height:0;
    border-style:solid; border-width:0 0 26px 26px;
    border-color:transparent transparent var(--cc-amber) transparent;
    filter:drop-shadow(0 0 5px rgba(245,158,11,.7));
    transition:filter .15s;
}
.chess-club-resize-handle:hover::after  { filter:drop-shadow(0 0 10px rgba(245,158,11,1)); }
.chess-club-resize-handle:active::after { border-color:transparent transparent #fff transparent; }
.chess-club-resize-handle::before {
    content:''; position:absolute; bottom:6px; right:6px;
    width:13px; height:13px;
    background:repeating-linear-gradient(
        -45deg,transparent,transparent 2px,
        rgba(0,0,0,.45) 2px,rgba(0,0,0,.45) 3px
    );
    pointer-events:none;
}

/* ============================================================================
   TOAST
   ============================================================================ */
.chess-club-toast-container {
    position:fixed; top:16px; right:16px;
    display:flex; flex-direction:column; gap:8px;
    z-index:9999; pointer-events:none; max-width:300px;
}
.chess-club-toast {
    background:var(--cc-bg-800); border:1px solid var(--cc-border);
    color:var(--cc-text); padding:10px 14px; border-radius:var(--cc-r-md);
    box-shadow:0 8px 24px rgba(0,0,0,.5); font-size:13px;
    animation:cc-ti .25s ease-out; pointer-events:auto; word-wrap:break-word;
}
.chess-club-toast.is-success { border-left:3px solid var(--cc-green); }
.chess-club-toast.is-error   { border-left:3px solid var(--cc-red);   }
.chess-club-toast.is-info    { border-left:3px solid var(--cc-cyan);   }
.chess-club-toast.is-warning { border-left:3px solid var(--cc-amber);  }
.chess-club-toast.is-leaving { animation:cc-to .2s ease-in forwards; }
@keyframes cc-ti { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
@keyframes cc-to { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(16px)} }

/* ============================================================================
   МОДАЛЬНОЕ ОКНО
   ============================================================================ */
.chess-club-modal-backdrop {
    display:none; position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.75); z-index:9998;
    align-items:center; justify-content:center;
}
.chess-club-modal-backdrop.is-visible { display:flex; }
.chess-club-modal {
    background:var(--cc-bg-900); border:1px solid var(--cc-border);
    border-radius:var(--cc-r-lg); padding:24px; max-width:380px; width:90%;
    box-shadow:0 25px 50px rgba(0,0,0,.5); text-align:center;
}
.chess-club-modal-title   { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; margin:0 0 10px; color:var(--cc-text); }
.chess-club-modal-body    { color:var(--cc-muted); margin:0 0 18px; line-height:1.5; }
.chess-club-modal-actions { display:flex; gap:10px; justify-content:center; }

/* ============================================================================
   АДАПТИВНОСТЬ — мобильные
   ============================================================================ */
@media (max-width: 700px) {
    .chess-club-main {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .chess-club-board-column {
        width: 100%;
        align-items: center;
    }
    .chess-club-board-wrapper {
        width: min(100%, var(--cc-board));
    }
    .chess-club-side-column {
        max-width: 100%;
        height: auto;
        border-left: none;
        border-top: 1px solid var(--cc-border);
        overflow-y: visible;
    }
}