/*
    CSS overview:
    - Root variables set board sizing and theme colors.
    - Layout and container styles center the app and create the card UI.
    - Board styles (.square, .light, .dark, .selected) control chessboard visuals and interactions.
    - Moves/history panel and responsive rules handle the right-side move list.
    - Coordinate labels render file/rank markers around the board.
*/
/* CSS: variables, layout, board visuals, history panel, labels */

/* Root variables: board size and theme colors */
:root {
    --board-size: 56px;
    --accent: #6b82ff;
    --bg-start: #f3f7fb;
    --bg-end: #eef4f8;
    /* coordinate label defaults (kept here to simplify overrides) */
    --rank-label-width: 24px;
    --rank-label-gap: 6px;
    --min-board-size: 36px;
    --max-board-size: 64px;
}

/* Page base: set height and system font */
html,
body {
    height: 100%;
    margin: 0;
    font-family: system-ui, Arial, sans-serif
}

/* Page body layout: centered background card */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background: linear-gradient(180deg, var(--bg-start), var(--bg-end));
    color: #213547;
}

/* App card container */
.container {
    width: min(96vw, 820px);
    background: rgba(255, 255, 255, 0.72);
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(16, 24, 40, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Heading */
h1 {
    margin: 0;
    font-size: 20px;
    color: #102a43;
    letter-spacing: 0.2px;
}

/* The join form is handled by #join-form rules below; no generic form layout. */

/* Form inputs */
form input {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(16, 24, 40, 0.08);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Buttons (primary) */
button {
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(107, 130, 255, 0.18);
}

/* Game area (hidden until join) */
#game {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

/* Players list chips */
#players {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center
}

#players>div {
    background: rgba(16, 24, 40, 0.04);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px
}

/* Status text */
#status {
    margin-top: 6px;
    color: #334e68;
    font-size: 14px
}

/* Board wrapper */
#board {
    display: inline-block;
    margin-top: 12px;
    padding: 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(250, 250, 250, 0.6));
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    width: 100%;
    max-width: calc(8 * var(--board-size) + var(--rank-label-width) + var(--rank-label-gap));
    box-sizing: border-box;
    --square-size: var(--board-size);
}

/* Rank row inside board (left label + rank) */
#board .rank {
    display: flex
}

/* Square cell */
.square {
    width: var(--square-size);
    height: var(--square-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--square-size) * 0.56);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    user-select: none;
}

/* Square hover effect */
.square:hover {
    transform: translateY(-3px)
}

/* Light square color */
.light {
    background: #f8efe0
}

/* Dark square color */
.dark {
    background: #c3aa87
}

/* Selected square highlight */
.selected {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.95);
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.12)
}

/* Highlight for legal move targets */
.move-target {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.95);
    border-radius: 6px;
}

/* Chess piece glyph styling */
.piece {
    cursor: pointer;
    font-size: inherit;
    line-height: 1;
}

/* Responsive: larger board/piece sizes on wide screens */
@media (min-width:720px) {
    :root {
        --board-size: 64px
    }
}

/* Join status line */
.join-status {
    margin-top: 10px;
    font-size: 13px;
    color: #334e68;
    text-align: center
}

.join-status.error {
    color: #b91c1c
}

.join-status.success {
    color: #157d4a
}

/* Disabled join button */
#join-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed
}

/* Inline spinner loader */
.spinner {
    width: 16px;
    height: 16px;
    border: 3px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px
}

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

/* Moves history panel */
#play-area {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 12px
}

#history {
    width: 240px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    color: #334e68;
    font-size: 14px
}

#moves-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 448px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px
}

#moves-list li {
    padding: 8px;
    border-radius: 8px;
    background: rgba(16, 24, 40, 0.02);
    font-family: monospace;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media (max-width:720px) {
    #play-area {
        flex-direction: column
    }

    #history {
        width: 100%;
        max-height: 220px
    }
}

/* Coordinate label variables consolidated into the main :root above. */

/* Rank-row (adds left-side numeric labels) */
.rank-row {
    display: flex;
    align-items: center
}

/* Rank label (left of each board row) */
.rank-label {
    width: var(--rank-label-width);
    margin-right: var(--rank-label-gap);
    color: #334e68;
    font-weight: 600;
    text-align: center
}

/* File labels (bottom A..H) */
.file-labels {
    display: flex;
    align-items: center;
    margin-top: 8px
}

.file-label-spacer {
    width: var(--rank-label-width);
    margin-right: var(--rank-label-gap)
}

.file-label {
    width: var(--square-size);
    text-align: center;
    color: #334e68;
    font-weight: 600;
    font-size: calc(var(--square-size) * 0.35);
}

/* join form layout is consolidated below */

/* join form: consolidated grid layout and responsive rules */
#join-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    max-width: 520px;
    grid-auto-flow: dense;
}

#join-form>#room {
    grid-column: 1;
    grid-row: 1;
}

#join-form>#terms label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

#join-form>#terms input[type="checkbox"] {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 8px 0 0;
    vertical-align: middle;
}

#join-form>#generate {
    grid-column: 2;
    grid-row: 1;
}

#join-form>#name {
    grid-column: 1;
    grid-row: 2;
}

/* hide only the name field when local mode is selected; generate/room disabled via JS */
#join-form.local-mode> :is(#name, #generate, #room) {
    display: none;
}

/* local names area spans full width */
#join-form>#local-names {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: center;
}

#join-form>#hcaptcha-container {
    grid-column: 1 / -1;
}

/* Join button layout */
#join-form>#join-btn {
    grid-column: 1 / -1;
}

#join-form.local-mode>#join-btn {
    grid-column: 1 / -1;
    grid-row: 3;
}

#join-form input {
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
}

#join-form button {
    padding: 8px 12px;
}

#join-form>#terms {
    grid-column: 1 / 2;
    grid-row: 4;
}

#join-form>#terms label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

#join-form>#terms input[type="checkbox"] {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 8px 0 0;
    vertical-align: middle;
}

/* Board rotation styles */
#board {
    transition: transform 0.25s ease;
    transform-origin: center center;
}

#board.rotated {
    transform: rotate(180deg);
}

#board.rotated .piece {
    transform: rotate(180deg);
}

/* Responsive square sizing for small screens */
@media (max-width: 720px) {
    :root {
        --rank-label-width: 20px;
    }

    #board {
        max-width: 100%;
        --square-size: clamp(var(--min-board-size), calc((100vw - 48px - var(--rank-label-width) - var(--rank-label-gap)) / 8), var(--max-board-size));
    }

    .rank-label {
        font-size: 12px;
    }

    .file-label {
        font-size: calc(var(--square-size) * 0.35);
    }
}

@media (max-width: 520px) {
    #join-form {
        grid-template-columns: 1fr;
    }

    #join-form>#generate,
    #join-form>#join-btn {
        grid-column: 1;
        width: 100%;
    }

    #join-form>#local-names {
        flex-direction: column;
        align-items: stretch;
    }
}