/* ============================================================
   Chess styles (itch.io 800x600 build)
   One stylesheet for both pages: the match-selection front page
   and the board. Holds the palette, page chrome, the 8x8 grid,
   the captured-piece trays, the promotion picker, and the
   match-selection grid. Sized to fit inside an 800x600 frame
   without scrolling, so it embeds cleanly on itch.io.
   ============================================================ */

/* ===== Palette (shared by both pages) ===== */
:root {
    --primary-color: #2c3e50;
    --secondary-color: #34495e;
    --accent-color: #1abc9c;
    --text-color: #ecf0f1;
    --danger-color: #e74c3c;

    /* Board-specific colors */
    --light-square: #f0d9b5;
    --dark-square: #b58863;
    --selected-square: #f7ec74;          /* highlight for the picked-up piece */
    --legal-move: rgba(26, 188, 156, 0.55); /* dot shown on reachable squares */
    --check-square: #e74c3c;             /* king square when in check */

    /* One square edge length; the board is 8 of these wide.
       Sized so the whole board fits within the 800x600 frame. */
    --square-size: 54px;
}

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

/* Fill the browser window so the game stage can be centered inside it.
   Inside itch.io's 800x600 frame the window IS the stage; in a maximized
   standalone window the stage is centered on the gradient background. */
html, body {
    min-height: 100vh;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;      /* center the fixed-size stage in the viewport */
}

/* The fixed 800x600 play area, centered in the viewport by the body flexbox.
   Also the positioning context for the nav, capture trays and check banner,
   so those stay pinned to the game's corners rather than the window's. */
.stage {
    position: relative;
    width: 800px;
    height: 600px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;           /* never squash below 800x600 */
}

/* The centered dark panel that frames a page's main content */
.game-container {
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ===== Top-right navigation ===== */
.nav {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.nav a {
    font-size: 14px;
    color: var(--text-color);
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--secondary-color);
    border-radius: 7px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.nav a:hover {
    color: #fff;
    border-color: var(--accent-color);
}

/* ===== Board page ===== */

/* Turn indicator and check/checkmate status line */
.status-board {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 1.1em;
    min-height: 1.4em;
}

#status {
    color: var(--accent-color);
    font-weight: bold;
}

/* The board is an 8x8 CSS grid of fixed-size squares */
.board {
    display: grid;
    grid-template-columns: repeat(8, var(--square-size));
    grid-template-rows: repeat(8, var(--square-size));
    border: 4px solid var(--secondary-color);
    border-radius: 6px;
    overflow: hidden;
    margin: 0 auto;
}

/* A single square; the piece glyph sits centered inside it */
.square {
    width: var(--square-size);
    height: var(--square-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--square-size) * 0.7);
    line-height: 1;
    cursor: pointer;
    position: relative;
    user-select: none;
}

/* Square address (e.g. "B2") pinned to the square's lower-left corner */
.square-coord {
    position: absolute;
    left: 3px;
    bottom: 2px;
    font-size: 10px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.45);
    pointer-events: none;          /* never block clicks on the square */
    user-select: none;
}

/* Piece glyph: a soft drop shadow lifts it off the square */
.piece {
    line-height: 1;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.55);
}

/* White pieces: light fill with a thin dark outline for contrast */
.piece-white {
    color: #f8f8f8;
}

/* Black pieces: solid black fill */
.piece-black {
    color: #1a1a1a;
}

/* Alternating board colors, assigned by board.js per (row + col) parity */
.square.light {
    background: var(--light-square);
}

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

/* Currently selected piece's square */
.square.selected {
    background: var(--selected-square);
}

/* The king's square while it is in check */
.square.in-check {
    background: var(--check-square);
}

/* A small dot marks an empty square the selected piece may move to */
.square.legal-move::after {
    content: "";
    position: absolute;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: var(--legal-move);
}

/* A ring marks an occupied square the selected piece may capture */
.square.legal-capture::after {
    content: "";
    position: absolute;
    width: 86%;
    height: 86%;
    border-radius: 50%;
    border: 4px solid var(--legal-move);
    box-sizing: border-box;
}

/* Captured-piece trays: rows of piece glyphs pinned outside the board panel.
   Sized down from the full-page build so they fit beside the board at 800px. */
.captures {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 140px;
    font-size: 1.9em;
    line-height: 1;
}

/* Pieces Black captured (White pieces): upper-left corner */
.captures-black {
    top: 1rem;
    left: 1rem;
}

/* Pieces White captured (Black pieces): lower-right corner */
.captures-white {
    bottom: 1rem;
    right: 1rem;
    justify-content: flex-end;
}

/* Piece-name tooltip shown beside the back button while hovering a piece.
   Matches the nav links' size and padding, but in blue. Empty when idle. */
.piece-tooltip {
    font-size: 14px;
    color: #3498db;
    padding: 5px 10px;
}

/* Check / checkmate banner pinned to the right edge of the frame.
   Hidden until board.js adds the .show class with a message. */
.check-indicator {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    display: none;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--danger-color);
    color: #fff;
    font-size: 1.15em;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Revealed whenever there is a check or checkmate to announce */
.check-indicator.show {
    display: block;
}

/* Promotion picker is hidden until a pawn reaches the back rank */
.promotion {
    display: none;
    margin-top: 15px;
}

.promotion.show {
    display: block;
}

.promotion-choices {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

/* Each promotion option is a big clickable piece glyph */
.promotion-choices span {
    font-size: 2.2em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.2s;
}

.promotion-choices span:hover {
    background: var(--accent-color);
}

/* ===== Front page (match selection) ===== */

/* Title above the match grid */
.front-title {
    font-size: 2em;
    margin-bottom: 18px;
    letter-spacing: 2px;
}

/* Match-selection grid: ten square buttons, five per row */
.match-grid {
    display: grid;
    grid-template-columns: repeat(5, 80px);
    gap: 14px;
    justify-content: center;
}

/* A single square match button */
.match-button {
    width: 80px;
    height: 80px;
    font-size: 1.6em;
    font-weight: bold;
    color: var(--text-color);
    background: var(--accent-color);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: background 0.2s, transform 0.2s;
}

.match-button:hover {
    background: #16a085;
    transform: translateY(-2px);
}

/* Matches that are not yet available are dimmed and unclickable */
.match-button:disabled {
    background: var(--secondary-color);
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

/* Won matches: disabled but proudly marked with a shiny gold border and a
   checkmark. Overrides the dim disabled look so the win stays visible. */
.match-button.completed,
.match-button.completed:disabled {
    position: relative;
    opacity: 1;
    background: var(--secondary-color);
    border: 2px solid #ffd700;                   /* shiny gold border */
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8); /* warm yellow glow */
}

/* Gold checkmark badge in the corner of a won match */
.match-button.completed::after {
    content: "✓";
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.6em;
    color: #ffd700;
}