* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: #202124;
    color: #e8eaed;
    font-family: Arial, sans-serif;
}

body {
    min-height: 100vh;
}


/* ============================================================
   MAIN DESKTOP LAYOUT
   ============================================================ */

.chess-app {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        220px
        minmax(560px, 680px)
        340px;

    gap: 18px;

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

    padding: 28px 18px;
}


/* ============================================================
   SHARED SIDE PANEL STYLE
   ============================================================ */

.control-panel,
.moves-panel {
    background: #2b2d30;

    border-radius: 8px;

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, 0.28);

    overflow: hidden;
}

.control-panel {
    padding: 22px;

    min-height: 430px;
}

.moves-panel {
    height: min(
        calc(100vh - 56px),
        680px
    );

    min-height: 430px;

    display: flex;
    flex-direction: column;
}


/* ============================================================
   PANEL HEADINGS
   ============================================================ */

.control-panel h1,
.moves-header h2 {
    margin: 0;

    font-size: 26px;

    line-height: 1.2;
}

.control-panel h1 {
    margin-bottom: 20px;
}

.moves-header {
    padding: 22px 18px 16px;

    border-bottom:
        1px solid #444;

    flex-shrink: 0;
}


/* ============================================================
   LEFT CONTROLS
   ============================================================ */

.new-game-button {
    width: 100%;

    margin-bottom: 18px;
}

.controls {
    display: grid;

    gap: 12px;
}

.control-group {
    display: grid;

    gap: 5px;
}

.control-group label {
    font-size: 14px;

    color: #d7d9dc;
}


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

button,
select {
    width: 100%;

    border: 0;

    border-radius: 5px;

    font-size: 15px;

    font-family: inherit;
}

button {
    padding: 11px 12px;

    cursor: pointer;

    background: #4c8c4a;

    color: white;

    font-weight: bold;
}

button:hover:not(:disabled) {
    background: #579f54;
}

button:disabled {
    cursor: default;

    opacity: 0.40;
}

select {
    padding: 10px 11px;

    background: #3a3c40;

    color: white;
}

select:disabled {
    opacity: 0.65;
}


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

.board-area {
    width: 100%;

    max-width: 680px;
}

#board {
    width: 100%;

    aspect-ratio: 1 / 1;

    display: grid;

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

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

    border:
        4px solid #111;

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, 0.45);
}

.square {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    user-select: none;
}


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

.piece {
    width: 84%;

    height: 84%;

    object-fit: contain;

    display: block;

    pointer-events: none;

    user-select: none;
}


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

.selectable {
    cursor: pointer;
}

.selected {
    box-shadow:
        inset 0 0 0 5px
        rgba(255, 215, 0, 0.85);
}

.legal-target {
    cursor: pointer;
}

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

    position: absolute;

    width: 22%;
    height: 22%;

    border-radius: 50%;

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

    pointer-events: none;
}

.legal-capture::after {
    width: 82%;
    height: 82%;

    background: transparent;

    border:
        6px solid
        rgba(0, 0, 0, 0.25);
}


/* ============================================================
   MOVE HIGHLIGHT
   ============================================================ */

.engine-move-from,
.engine-move-to {
    box-shadow:
        inset 0 0 0 5px
        rgba(255, 215, 0, 0.72);
}

.engine-move-to {
    background-image:
        linear-gradient(
            rgba(255, 215, 0, 0.16),
            rgba(255, 215, 0, 0.16)
        );
}


/* ============================================================
   BOARD COORDINATES
   ============================================================ */

.coordinate {
    position: absolute;

    font-size: 12px;

    font-weight: bold;

    pointer-events: none;
}

.rank-coordinate {
    top: 4px;

    left: 5px;
}

.file-coordinate {
    right: 5px;

    bottom: 3px;
}


/* ============================================================
   GREEN BOARD
   ============================================================ */

.theme-green .square.light {
    background: #eeeed2;
}

.theme-green .square.dark {
    background: #769656;
}

.theme-green
.square.light
.coordinate {
    color: #769656;
}

.theme-green
.square.dark
.coordinate {
    color: #eeeed2;
}


/* ============================================================
   BLUE BOARD
   ============================================================ */

.theme-blue .square.light {
    background: #dee3e6;
}

.theme-blue .square.dark {
    background: #6c8ebf;
}

.theme-blue
.square.light
.coordinate {
    color: #6c8ebf;
}

.theme-blue
.square.dark
.coordinate {
    color: #dee3e6;
}


/* ============================================================
   MOVES PANEL
   ============================================================ */

#move-list {
    flex: 1;

    min-height: 0;

    padding: 12px;

    overflow-y: auto;

    background: #202124;
}

.empty {
    margin: 0;

    color: #9aa0a6;
}

.move-row {
    display: grid;

    grid-template-columns:
        36px
        1fr
        1fr;

    gap: 7px;

    min-height: 31px;

    align-items: center;

    padding: 3px 4px;

    font-size: 15px;
}

.move-number {
    color: #9aa0a6;
}

.current-review-move {
    background:
        rgba(255, 215, 0, 0.28);

    border-radius: 4px;

    padding: 4px 5px;

    color: white;

    font-weight: bold;
}


/* ============================================================
   REVIEW CONTROLS
   ============================================================ */

.review-controls {
    flex-shrink: 0;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 9px;

    padding: 12px;

    border-top:
        1px solid #444;
}

.review-controls button {
    padding:
        10px
        5px;
}


/* ============================================================
   TABLET LANDSCAPE
   ============================================================ */

@media (max-width: 900px) {

    .chess-app {
        grid-template-columns:
            minmax(470px, 1fr)
            280px;

        grid-template-areas:
            "board moves"
            "controls moves";

        gap: 16px;

        align-items: start;

        padding: 16px;
    }

    .board-area {
        grid-area: board;

        max-width: 680px;

        justify-self: end;
    }

    .control-panel {
        grid-area: controls;

        width: 100%;

        max-width: 680px;

        justify-self: end;

        min-height: 0;

        padding: 14px;
    }

    .control-panel h1 {
        display: none;
    }

    .new-game-button {
        margin-bottom: 12px;
    }

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

        gap: 10px 12px;
    }

    .moves-panel {
        grid-area: moves;

        height:
            calc(100vh - 32px);

        min-height: 520px;
    }
}


/* ============================================================
   MOBILE / TABLET PORTRAIT
   ============================================================ */

@media (max-width: 760px) {

    .chess-app {
        display: flex;

        flex-direction: column;

        gap: 12px;

        padding: 10px;
    }

    .board-area {
        order: 1;

        width: 100%;

        max-width: none;
    }

    .control-panel {
        order: 2;

        width: 100%;

        min-height: 0;

        padding: 12px;
    }

    .moves-panel {
        order: 3;

        width: 100%;

        height: 280px;

        min-height: 280px;
    }

    .control-panel h1 {
        display: none;
    }

    .new-game-button {
        margin-bottom: 10px;
    }

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

        gap: 9px;
    }

    .control-group {
        gap: 4px;
    }

    .control-group label {
        font-size: 13px;
    }

    button,
    select {
        min-height: 44px;

        font-size: 14px;
    }

    .moves-header {
        padding:
            12px
            14px
            9px;
    }

    #move-list {
        padding: 8px 10px;
    }

    .review-controls {
        padding: 8px 10px;
    }
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 480px) {

    .chess-app {
        padding: 6px;
    }

    #board {
        border-width: 2px;
    }

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

    .moves-panel {
        height: 260px;

        min-height: 260px;
    }

    .coordinate {
        font-size: 10px;
    }
}


/* ============================================================
   COMPACT TOUCH LAYOUT - CHESNUT EVO / MOBILE
   ============================================================ */

@media (max-width: 900px) {

    /*
     * Board stays first and full width.
     */

    .board-area {
        order: 1;

        width: 100%;
        max-width: none;

        margin: 0;
    }


    /*
     * Compact settings card below the board.
     */

    .control-panel {
        order: 2;

        width: 100%;
        max-width: none;

        min-height: 0;

        padding: 10px;
    }

    .control-panel h1 {
        display: none;
    }


    /*
     * New Game spans the whole settings card.
     */

    .new-game-button {
        width: 100%;

        margin: 0 0 9px 0;

        min-height: 42px;
    }


    /*
     * Two-column settings:
     *
     * Engine    | Play as
     * Strength  | Board
     */

    .controls {
        display: grid;

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

        gap: 8px;
    }

    .control-group {
        display: grid;

        gap: 3px;

        min-width: 0;
    }

    .control-group label {
        font-size: 12px;

        line-height: 1.2;
    }

    .control-group select {
        width: 100%;

        min-width: 0;

        min-height: 42px;

        padding: 7px 8px;

        font-size: 13px;
    }


    /*
     * Moves directly below settings.
     */

    .moves-panel {
        order: 3;

        width: 100%;

        height: 220px;
        min-height: 220px;

        margin: 0;
    }

    .moves-header {
        padding: 9px 12px;
    }

    .moves-header h2 {
        font-size: 19px;
    }

    #move-list {
        padding: 7px 9px;
    }

    .move-row {
        min-height: 27px;

        font-size: 13px;
    }

    .review-controls {
        padding: 7px;

        gap: 7px;
    }

    .review-controls button {
        min-height: 40px;

        padding: 7px 4px;

        font-size: 13px;
    }
}


/*
 * Keep the two-column controls even on the narrow
 * Chesnut portrait screen.
 */

@media (max-width: 480px) {

    .controls {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .control-panel {
        padding: 8px;
    }

    .moves-panel {
        height: 210px;
        min-height: 210px;
    }
}


/* ============================================================
   GAME ACTION BUTTONS
   ============================================================ */

.game-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

    margin-bottom: 18px;
}

.game-actions .new-game-button {
    margin: 0;
}

.resign-button {
    background: #55585d;
}

.resign-button:hover:not(:disabled) {
    background: #666a70;
}


/* ============================================================
   CLICKABLE REVIEW MOVES
   ============================================================ */

.review-move {
    cursor: pointer;

    border-radius: 4px;

    padding: 4px 5px;
}

.review-move:hover {
    background:
        rgba(255, 255, 255, 0.10);
}


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

@media (max-width: 900px) {

    .game-actions {
        margin-bottom: 9px;
    }

    .game-actions button {
        min-height: 42px;
    }
}

/* Ensure hidden controls stay hidden */
[hidden] {
    display: none !important;
}


/* ============================================================
   BLUE THEME BUTTONS
   ============================================================ */

body.theme-blue .new-game-button,
body.theme-blue #review-previous:not(:disabled),
body.theme-blue #review-next:not(:disabled) {
    background: #6c8ebf;
}

body.theme-blue .new-game-button:hover,
body.theme-blue #review-previous:hover:not(:disabled),
body.theme-blue #review-next:hover:not(:disabled) {
    background: #7b9ccc;
}

/* Disabled review buttons stay neutral in both themes */
#review-previous:disabled,
#review-next:disabled {
    background: #44474b !important;
    color: #8f9398 !important;
}


/* ============================================================
   COPY PGN
   ============================================================ */

.copy-pgn-button {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 8px;
}

body.theme-green .copy-pgn-button:not(:disabled) {
    background: #769656;
}

body.theme-green .copy-pgn-button:hover:not(:disabled) {
    background: #86a866;
}

body.theme-blue .copy-pgn-button:not(:disabled) {
    background: #6c8ebf;
}

body.theme-blue .copy-pgn-button:hover:not(:disabled) {
    background: #7b9ccc;
}

.copy-pgn-button:disabled {
    background: #44474b !important;
    color: #8f9398 !important;
}