/* /public/css/chess/chess.css */

/* Defines the visual layout and theming for the chess application.
   Utilizes CSS Grid for the 8x8 board to ensure perfect square proportions
   and responsive scaling across devices. Variables are used for board colors
   to allow for easy theme swapping (e.g., dark mode) in the future. */

:root {
    --light-square: #f0d9b5;
    --dark-square: #b58863;
    --highlight: rgba(255, 255, 51, 0.5);
    --possible-move: rgba(20, 85, 30, 0.5);
    --board-border: #4a2e15;
}

/* Container for the entire chess view to keep elements centered and readable */
.chess-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
}

.header-bar {
    width: 100%;
    text-align: center;
}

.header-bar h1 {
    margin-top: 0;
    margin-bottom: 5px;
}

/* Game wrapper maintains the layout hierarchy between player info and the board */
.game-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.board-container {
    width: 100%;
    max-width: 75vh; /* Prevents the board from becoming taller than the screen */
    margin: 0 auto;
}

/* The core 8x8 grid definition. 
   Using aspect-ratio ensures the board remains perfectly square 
   regardless of the viewport width. */
#chess-board {
    display: grid;
    grid-template-columns: repeat(8, 12.5%);
    grid-template-rows: repeat(8, 12.5%);
    aspect-ratio: 1 / 1;
    width: 100%;
    border: 4px solid var(--board-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    background-color: var(--light-square);
    overflow: hidden;
}

/* Individual squares on the board.
   Position relative is required so absolute-positioned piece images or
   highlight markers stay constrained within the specific square boundary. */
.square {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(2rem, 5vw, 3.5rem);
    user-select: none;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

/* Dark squares override the background color. 
   Light squares fall back to the board's default background color. */
.square.dark {
    background-color: var(--dark-square);
}

/* Visual indicator for a square that the user has currently clicked/selected */
.square.selected::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--highlight);
    z-index: 1;
}

/* Visual indicator for the last move made */
.square.last-move::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 0, 0.3); /* Pale yellow for last move */
    z-index: 1;
}

/* Visual indicator for a King in check */
.square.in-check::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 0, 0, 0.5); /* Red for check */
    z-index: 1;
}

/* Visual indicator for valid destination squares during a move calculation */
.square.valid-move::after {
    content: '';
    position: absolute;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    background-color: var(--possible-move);
    z-index: 2;
}

/* Elevates the actual chess piece above the highlight overlays */
.square .piece {
    position: relative;
    z-index: 3;
}

.white-piece {
    color: #ffffff;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.black-piece {
    color: #000000;
}

/* Styled action button for Header Bar */
.btn-action {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #334155;
    color: #f8fafc;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.btn-action:hover {
    background: #475569;
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Game Controls (Resign, Draw) */
.game-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.btn-control {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: transform 0.1s, opacity 0.2s;
    font-size: 1rem;
}

.btn-control:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-control.danger {
    background: #ef4444;
    color: white;
}

.btn-control.secondary {
    background: #64748b;
    color: white;
}

.btn-control.success {
    background: #22c55e;
    color: white;
}

.btn-control.lobby {
    background: #334155;
    color: #f8fafc;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.board-container {
    width: 100%;
    max-width: 75vh;
    margin: 0 auto;
    position: relative; /* Base for overlay */
}

.game-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    border-radius: 4px;
}

.overlay-content {
    background: #1e293b;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.overlay-buttons {
    display: flex;
    gap: 15px;
    margin-top: 1.5rem;
    justify-content: center;
}

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

.promo-btn {
    font-size: 2.5rem;
    background: #334155;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.promo-btn:hover {
    background: #475569;
    transform: scale(1.1);
}

#game-modal {
    z-index: 200; /* Higher than draw overlay */
}

#modal-message {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #f8fafc;
}

/* Status panel for turn tracking and debug information */
.status-panel {
    margin-top: 20px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
}