/* =========================================================
   ROOT
========================================================= */

:root {
    --bg-body: #171411;

    --bg-panel: rgba(35, 31, 27, 0.72);
    --bg-panel-strong: rgba(28, 25, 22, 0.88);
    --bg-input: rgba(15, 13, 11, 0.72);

    --border-subtle: rgba(255, 255, 255, 0.12);

    --text-main: #f7f2e9;
    --text-muted: #b9b0a4;

    --primary: #c8955a;
    --primary-hover: #d5a66d;

    --secondary: rgba(255, 255, 255, 0.08);
    --secondary-hover: rgba(255, 255, 255, 0.14);

    /*
     * Шахматные клетки.
     *
     * Они теперь задаются напрямую
     * классами .light и .dark.
     */
    --board-light: #f0d9b5;
    --board-dark: #b58863;

    --board-border: #211c17;

    --piece-white: #fffaf0;
    --piece-black: #17130f;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --glass-shadow:
        0 12px 40px rgba(0, 0, 0, 0.34),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    min-height: 100%;
}


body {
    min-height: 100vh;

    background-color: var(--bg-body);

    background-image:
        linear-gradient(
            rgba(20, 16, 12, 0.48),
            rgba(20, 16, 12, 0.58)
        ),
        url("https://images.unsplash.com/photo-1529699211952-734e80c4d42b?q=80&w=2000&auto=format&fit=crop");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    color: var(--text-main);

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    padding: 20px;
}


button,
input,
select {
    font: inherit;
}


button {
    -webkit-tap-highlight-color: transparent;
}


.hidden {
    display: none !important;
}


/* =========================================================
   PAGE
========================================================= */

.page-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


.main-header {
    margin-bottom: 24px;
}


.main-header h1 {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 28px;
    font-weight: 800;

    color: #fff;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.55);
}


.chess-icon {
    color: var(--primary);
    font-size: 34px;
    line-height: 1;
}


/* =========================================================
   LAYOUT
========================================================= */

.app-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        360px;

    gap: 24px;

    align-items: start;
}


.sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* =========================================================
   PANELS
========================================================= */

.panel {
    background: var(--bg-panel);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid var(--border-subtle);

    border-radius: var(--radius-lg);

    padding: 24px;

    box-shadow: var(--glass-shadow);
}


.panel-head {
    margin-bottom: 20px;
}


.label {
    margin-bottom: 5px;

    font-size: 12px;
    line-height: 1.2;

    text-transform: uppercase;
    letter-spacing: 0.07em;

    font-weight: 700;

    color: var(--text-muted);
}


h2 {
    font-size: 20px;
    font-weight: 700;
}


h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}


/* =========================================================
   BUTTONS
========================================================= */

button {
    cursor: pointer;

    border: 0;

    border-radius: var(--radius-sm);

    font-weight: 600;
    font-size: 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 16px;

    color: #fff;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease;

    user-select: none;
}


button:active {
    transform: translateY(1px);
}


button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}


.primary-button {
    width: 100%;

    padding: 12px;

    background: var(--primary);
    color: #fff;

    box-shadow:
        0 5px 18px rgba(200, 149, 90, 0.25);
}


.primary-button:hover {
    background: var(--primary-hover);

    box-shadow:
        0 7px 22px rgba(200, 149, 90, 0.32);
}


.secondary-button {
    background: var(--secondary);

    border: 1px solid var(--border-subtle);

    color: #fff;
}


.secondary-button:hover {
    background: var(--secondary-hover);
}


.ghost-button {
    width: 100%;

    background: transparent;

    color: #ff8c82;

    border: 1px solid rgba(255, 120, 110, 0.45);
}


.ghost-button:hover {
    background: rgba(255, 100, 90, 0.12);
}


.icon-button {
    width: 42px;
    height: 42px;

    padding: 0;

    background: var(--secondary);

    border: 1px solid var(--border-subtle);

    color: #fff;
}


.icon-button:hover {
    background: var(--secondary-hover);
}


/* =========================================================
   MODE SWITCHER
========================================================= */

.mode-switcher {
    display: flex;

    padding: 4px;
    margin-bottom: 20px;

    background: rgba(0, 0, 0, 0.25);

    border: 1px solid var(--border-subtle);

    border-radius: var(--radius-sm);
}


.mode-button {
    flex: 1;

    padding: 9px 8px;

    background: transparent;

    color: var(--text-muted);

    border: 0;
}


.mode-button:hover {
    color: #fff;
}


.mode-button.active {
    background: var(--secondary-hover);

    color: #fff;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   FORMS
========================================================= */

.control-stack {
    display: flex;
    flex-direction: column;
}


.field {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-bottom: 18px;
}


.field > span {
    font-size: 13px;
    font-weight: 500;

    color: var(--text-muted);
}


.field-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


input[type="text"],
select {
    width: 100%;

    min-width: 0;

    background: var(--bg-input);

    border: 1px solid var(--border-subtle);

    color: #fff;

    padding: 12px;

    border-radius: var(--radius-sm);

    outline: none;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


input[type="text"]:focus,
select:focus {
    border-color: var(--primary);

    background: rgba(15, 13, 11, 0.88);

    box-shadow:
        0 0 0 3px rgba(200, 149, 90, 0.1);
}


input::placeholder {
    color: rgba(255, 255, 255, 0.32);
}


select option {
    background: #211c18;
    color: #fff;
}


.join-row {
    display: flex;
    gap: 8px;
}


.join-row input {
    flex: 1;
}


.muted-copy {
    margin-top: 10px;

    text-align: center;

    font-size: 12px;

    color: var(--text-muted);
}


/* =========================================================
   BOARD HEADER
========================================================= */

.board-toolbar {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 16px;

    margin-bottom: 24px;

    padding-bottom: 16px;

    border-bottom:
        1px solid var(--border-subtle);
}


.toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}


/* =========================================================
   BOARD STAGE
========================================================= */

.board-stage {
    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    padding: 12px;

    background:
        rgba(0, 0, 0, 0.32);

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: var(--radius-md);

    box-shadow:
        inset 0 2px 12px rgba(0, 0, 0, 0.55),
        0 10px 30px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   CHESS BOARD
========================================================= */

.board {
    width: 100%;

    aspect-ratio: 1 / 1;

    display: grid;

    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    grid-template-rows:
        repeat(8, minmax(0, 1fr));

    overflow: hidden;

    border:
        5px solid var(--board-border);

    border-radius: 5px;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 10px 30px rgba(0, 0, 0, 0.3);

    /*
     * Убираем любые промежутки между клетками.
     */
    gap: 0;

    isolation: isolate;
}


/* =========================================================
   BOARD SQUARES
========================================================= */

/*
 * ЭТО ГЛАВНОЕ ИСПРАВЛЕНИЕ.
 *
 * JS создаёт:
 *
 * <button class="square light">
 * <button class="square dark">
 *
 * Поэтому нельзя использовать:
 *
 * .board > div
 *
 * как было раньше.
 */

.board .square {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 0;

    overflow: hidden;

    appearance: none;
    -webkit-appearance: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    line-height: 1;

    transition:
        filter 0.12s ease,
        box-shadow 0.12s ease;
}


/*
 * Светлая клетка.
 */

.board .square.light {
    background-color: var(--board-light);
}


/*
 * Тёмная клетка.
 */

.board .square.dark {
    background-color: var(--board-dark);
}


/*
 * Никаких browser default button styles.
 */

.board .square:hover {
    filter: brightness(1.05);
}


/* =========================================================
   PIECES
========================================================= */

.board .piece {
    position: relative;

    z-index: 5;

    display: block;

    /*
     * Большой размер фигур.
     * clamp хорошо работает и на телефоне,
     * и на компьютере.
     */
    font-size: clamp(
        30px,
        7vw,
        62px
    );

    line-height: 0.9;

    font-family:
        "DejaVu Sans",
        "Noto Sans Symbols 2",
        "Segoe UI Symbol",
        "Arial Unicode MS",
        serif;

    font-weight: 400;

    pointer-events: none;

    user-select: none;

    transform:
        translateY(-1px);

    /*
     * Улучшает рендеринг Unicode-шахматных символов.
     */
    text-rendering: geometricPrecision;

    -webkit-font-smoothing: antialiased;
}


/*
 * БЕЛЫЕ ФИГУРЫ
 *
 * Белая фигура не должна быть просто #fff:
 * на светлой клетке она теряется.
 *
 * Поэтому добавляем тёмную обводку/тень.
 */

.board .piece.white {
    color: var(--piece-white);

    text-shadow:
        -1px -1px 0 rgba(40, 28, 18, 0.8),
         1px -1px 0 rgba(40, 28, 18, 0.8),
        -1px  1px 0 rgba(40, 28, 18, 0.8),
         1px  1px 0 rgba(40, 28, 18, 0.8),
         0 3px 5px rgba(0, 0, 0, 0.42);
}


/*
 * ЧЁРНЫЕ ФИГУРЫ
 *
 * Это второе важное исправление.
 */

.board .piece.black {
    color: var(--piece-black);

    text-shadow:
        0 1px 1px rgba(255, 255, 255, 0.18),
        0 3px 5px rgba(0, 0, 0, 0.35);
}


/* =========================================================
   SELECTED SQUARE
========================================================= */

.board .square.selected {
    box-shadow:
        inset 0 0 0 4px
        rgba(255, 214, 102, 0.95);

    z-index: 3;
}


/* =========================================================
   LAST MOVE
========================================================= */

.board .square.last-move::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(255, 214, 102, 0.28);

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   LEGAL MOVES
========================================================= */

.board .square.legal-target::after {
    content: "";

    position: absolute;

    width: 22%;
    height: 22%;

    border-radius: 50%;

    background:
        rgba(30, 25, 20, 0.28);

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   CAPTURE TARGET
========================================================= */

.board .square.capture-target {
    box-shadow:
        inset 0 0 0 5px
        rgba(190, 58, 46, 0.58);
}


/* =========================================================
   CHECK
========================================================= */

.board .square.check-square {
    background:
        radial-gradient(
            circle,
            rgba(220, 55, 42, 0.9) 0%,
            rgba(220, 55, 42, 0.6) 45%,
            rgba(220, 55, 42, 0.18) 100%
        ) !important;
}


/* =========================================================
   STATUS
========================================================= */

.status-strip {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 16px;

    margin-top: 24px;

    padding: 16px;

    background:
        rgba(25, 22, 19, 0.68);

    border:
        1px solid var(--border-subtle);

    border-radius: var(--radius-md);
}


.status-message {
    font-weight: 600;
    font-size: 15px;
}


.status-meta {
    display: flex;
    gap: 8px;

    flex-wrap: wrap;

    justify-content: flex-end;
}


.status-chip {
    padding: 5px 10px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;
}


.turn-white {
    background: #f4efe5;
    color: #1b1713;
}


.turn-black {
    background: #15120f;
    color: #fff;

    border:
        1px solid rgba(255, 255, 255, 0.18);
}


.connection-solo {
    background:
        rgba(255, 255, 255, 0.09);

    color: #fff;
}


.connection-party {
    background:
        rgba(200, 149, 90, 0.85);

    color: #20170e;
}


/* =========================================================
   ROSTER
========================================================= */

.roster-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;

    margin-bottom: 20px;
}


.roster-card {
    display: flex;

    flex-direction: row;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    padding: 13px 16px;

    background:
        rgba(0, 0, 0, 0.22);

    border:
        1px solid var(--border-subtle);

    border-radius: var(--radius-sm);
}


.roster-card.white-player {
    border-left:
        4px solid rgba(255, 255, 255, 0.85);
}


.roster-card.black-player {
    border-left:
        4px solid rgba(0, 0, 0, 0.8);
}


.roster-info {
    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.roster-role {
    font-size: 11px;

    text-transform: uppercase;

    color: var(--text-muted);
}


.roster-card strong {
    font-size: 14px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   CLOCKS
========================================================= */

.player-clock {
    flex-shrink: 0;

    min-width: 82px;

    padding: 6px 10px;

    text-align: center;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 19px;

    font-weight: 800;

    letter-spacing: 1px;

    background:
        rgba(0, 0, 0, 0.42);

    color: var(--text-main);

    border:
        1px solid var(--border-subtle);

    border-radius: var(--radius-sm);

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


.player-clock.active {
    background:
        rgba(200, 149, 90, 0.16);

    border-color:
        var(--primary);

    color:
        #e3b77d;

    box-shadow:
        0 0 12px rgba(200, 149, 90, 0.2);
}


.player-clock.low {
    color: #ffcc76;
}


.player-clock.danger {
    color: #ff7167;

    border-color:
        rgba(255, 90, 80, 0.7);

    background:
        rgba(150, 30, 20, 0.2);

    animation:
        pulse-danger 1s infinite;
}


@keyframes pulse-danger {
    0% {
        box-shadow:
            0 0 0 rgba(255, 80, 70, 0);
    }

    50% {
        box-shadow:
            0 0 14px rgba(255, 80, 70, 0.35);
    }

    100% {
        box-shadow:
            0 0 0 rgba(255, 80, 70, 0);
    }
}


/* =========================================================
   SPECTATORS
========================================================= */

.spectator-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 8px;
}


.badge {
    padding: 3px 8px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

    color: var(--text-muted);

    background:
        var(--bg-input);

    border:
        1px solid var(--border-subtle);
}


.spectator-list {
    list-style: none;

    font-size: 13px;

    color: var(--text-muted);
}


.spectator-list li {
    padding: 4px 0;
}


.empty-state {
    font-style: italic;
    opacity: 0.7;
}


/* =========================================================
   CAPTURED
========================================================= */

.captured-grid {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.captured-box {
    padding: 12px;

    background:
        rgba(0, 0, 0, 0.2);

    border:
        1px solid var(--border-subtle);

    border-radius: var(--radius-sm);
}


.captured-label {
    margin-bottom: 8px;

    font-size: 12px;

    color: var(--text-muted);
}


.captured-row {
    min-height: 28px;

    display: flex;

    align-items: center;

    gap: 4px;

    font-family:
        "DejaVu Sans",
        "Noto Sans Symbols 2",
        sans-serif;

    font-size: 22px;
}


.captured-row::first-letter {
    color: #fff;
}


/* =========================================================
   MOVE HISTORY
========================================================= */

.move-history {
    max-height: 220px;

    overflow-y: auto;

    list-style-position: inside;

    font-size: 14px;

    color: var(--text-muted);

    background:
        rgba(0, 0, 0, 0.2);

    border:
        1px solid var(--border-subtle);

    padding: 12px;

    border-radius: var(--radius-sm);
}


.move-history li {
    padding: 5px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);
}


.move-history li:last-child {
    border-bottom: 0;

    color: #fff;

    font-weight: 600;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    display: flex;

    justify-content: center;
    align-items: center;

    margin-top: 40px;

    padding: 20px 0;
}


.github-link {
    display: inline-flex;

    opacity: 0.6;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.github-link:hover {
    opacity: 1;

    transform:
        translateY(-3px)
        scale(1.05);
}


.github-icon {
    width: 32px;
    height: 32px;

    object-fit: contain;

    filter: invert(1);
}


/* =========================================================
   PROMOTION MODAL
========================================================= */

.modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.66);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.modal-card {
    min-width: 300px;

    padding: 30px;

    text-align: center;

    background:
        var(--bg-panel-strong);

    border:
        1px solid var(--border-subtle);

    border-radius: var(--radius-lg);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5);
}


.promotion-options {
    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 24px;
}


.promotion-button {
    width: 62px;
    height: 62px;

    padding: 0;

    font-family:
        "DejaVu Sans",
        "Noto Sans Symbols 2",
        serif;

    font-size: 38px;

    background:
        rgba(0, 0, 0, 0.3);

    border:
        1px solid var(--border-subtle);
}


.promotion-button:hover {
    background:
        var(--primary);

    border-color:
        var(--primary);
}


/* =========================================================
   TOAST
========================================================= */

.toast-host {
    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    gap: 10px;

    max-width: min(
        380px,
        calc(100vw - 40px)
    );
}


.toast {
    padding: 12px 16px;

    background:
        rgba(25, 22, 19, 0.94);

    border:
        1px solid var(--border-subtle);

    border-radius: var(--radius-md);

    color: #fff;

    font-size: 14px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(12px);
}


.toast.success {
    border-color:
        rgba(110, 180, 120, 0.45);
}


.toast.error {
    border-color:
        rgba(255, 100, 90, 0.55);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 960px) {

    body {
        padding: 12px;
    }


    .app-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .sidebar {
        gap: 18px;
    }


    .board-toolbar {
        flex-direction: column;

        align-items: stretch;
    }


    .toolbar-actions {
        width: 100%;
    }


    .toolbar-actions button {
        flex: 1;
    }


    .board-stage {
        padding: 8px;
    }


    .panel {
        padding: 18px;
    }

}


@media (max-width: 560px) {

    body {
        padding: 8px;
    }


    .main-header {
        margin-bottom: 14px;
    }


    .main-header h1 {
        font-size: 23px;
    }


    .chess-icon {
        font-size: 28px;
    }


    .panel {
        padding: 14px;

        border-radius: 11px;
    }


    .board-stage {
        padding: 6px;

        border-radius: 8px;
    }


    .board {
        border-width: 3px;
    }


    /*
     * На телефоне фигуры немного меньше,
     * чтобы не упирались в соседние клетки.
     */

    .board .piece {
        font-size: clamp(
            27px,
            10vw,
            48px
        );
    }


    .status-strip {
        flex-direction: column;

        align-items: stretch;

        margin-top: 14px;
    }


    .status-meta {
        justify-content: flex-start;
    }


    .field-grid {
        grid-template-columns: 1fr;
    }


    .toolbar-actions {
        display: grid;

        grid-template-columns:
            1fr
            auto
            1fr;
    }


    .icon-button {
        width: 44px;
    }


    .roster-card {
        padding: 11px 12px;
    }


    .player-clock {
        min-width: 76px;

        font-size: 17px;
    }


    .toast-host {
        right: 10px;
        bottom: 10px;

        max-width:
            calc(100vw - 20px);
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .board .square:hover {
        filter: none;
    }

}