/** app.css */
:root {
    --ae-dark-color: chocolate;
    --ae-light-color: peru;
    --ae-accent-color: gold;
    --ae-color-valid-move: limegreen;
    --ae-grey-1: rgba(0, 0, 0, 0.01);
    --ae-grey-10: rgba(0, 0, 0, 0.1);
    --ae-grey-20: rgba(0, 0, 0, 0.2);
    --ae-grey-30: rgba(0, 0, 0, 0.3);
    --ae-grey-40: rgba(0, 0, 0, 0.4);
    --ae-grey-50: rgba(0, 0, 0, 0.5);
    --ae-grey-60: rgba(0, 0, 0, 0.6);
    --ae-grey-70: rgba(0, 0, 0, 0.7);
    --ae-grey-80: rgba(0, 0, 0, 0.8);
    --ae-grey-90: rgba(0, 0, 0, 0.9);
    --ae-grey-100: rgba(0, 0, 0, 1);
    --ae-color-player-1: navajowhite;
    --ae-color-player-2: black;
    --ae-cell-side: calc(12vmin * 0.8);
    --ae-cell-font-size: calc(var(--ae-cell-side) * 0.6);
    --ae-board-corner: calc(var(--ae-cell-side) * 0.2);
    --ae-board-corner-bg-color: #333333;
    --ae-board-corner-fg-color: white;
    --ae-board-corner-font-size: calc(var(--ae-cell-side) * 0.2);
    --cassiopeia-color-primary: var(--ae-color-player-2);
    --cassiopeia-color-link: var(--ae-grey-40);
    --cassiopeia-color-hover: var(--ae-color-player-1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    font-size: 16px;
    font-family: sans-serif;
}

.board-container {
    display: grid;
    justify-content: center;
    align-items: center;
}

.board-container__grid {
    display: grid;
    grid-template-rows: var(--ae-board-corner) repeat(8, var(--ae-cell-side)) var(
      --ae-board-corner
    );
    grid-gap: 0;
    justify-content: center;
    align-content: center;
    background-color: var(--ae-board-corner-bg-color);
}

.board-container__grid-border {
    opacity: 0;
}

.board-container__grid-border--visible {
    opacity: 1;
    color: var(--ae-board-corner-fg-color);
    font-size: var(--ae-board-corner-font-size);
    transition: 1s all ease-in-out;
}

[class^="board-container__grid-item"] {
    display: grid;
    justify-content: center;
    align-items: center;
}

.board-container__grid-border--top,
.board-container__grid-border--bottom {
    display: grid;
    grid-template-columns: var(--ae-board-corner) repeat(8, var(--ae-cell-side)) var(
      --ae-board-corner
    );
    justify-items: center;
    align-items: center;
}

.board-container__grid-border--start,
.board-container__grid-border--end {
    justify-items: center;
    align-items: center;
}

.board-container__grid-item--rank {
    grid-template-columns: var(--ae-board-corner) repeat(8, var(--ae-cell-side)) var(
      --ae-board-corner
    );
}

.board-container__grid-item--file {
    min-width: 100%;
    min-height: 100%;
}

/* standard board black piece at top white pieces bottom */

.board-container__grid-item--rank:nth-of-type(2n)
.board-container__grid-item--file:nth-of-type(2n) {
    background-color: var(--ae-light-color);
}

.board-container__grid-item--rank:nth-of-type(2n)
.board-container__grid-item--file:nth-of-type(2n + 1) {
    background-color: var(--ae-dark-color);
}

.board-container__grid-item--rank:nth-of-type(2n + 1)
.board-container__grid-item--file:nth-of-type(2n) {
    background-color: var(--ae-dark-color);
}

.board-container__grid-item--rank:nth-of-type(2n + 1)
.board-container__grid-item--file:nth-of-type(2n + 1) {
    background-color: var(--ae-light-color);
}

/* flipped board black piece at bottom white pieces top */
.is-flipped
.board-container__grid-item--rank:nth-of-type(2n)
.board-container__grid-item--file:nth-of-type(2n) {
    background-color: var(--ae-dark-color);
}

.is-flipped
.board-container__grid-item--rank:nth-of-type(2n)
.board-container__grid-item--file:nth-of-type(2n + 1) {
    background-color: var(--ae-light-color);
}

.is-flipped
.board-container__grid-item--rank:nth-of-type(2n + 1)
.board-container__grid-item--file:nth-of-type(2n) {
    background-color: var(--ae-light-color);
}

.is-flipped
.board-container__grid-item--rank:nth-of-type(2n + 1)
.board-container__grid-item--file:nth-of-type(2n + 1) {
    background-color: var(--ae-dark-color);
}

.board-container__grid-item--file.is-valid-move {
    background-color: var(--ae-color-valid-move);
}

.board-container__grid-item--file:hover {
    border: 2px dashed var(--ae-accent-color);
    filter: drop-shadow(2px 4px 10px var(--ae-accent-color));
    transition: all ease-in-out 300ms;
}

@media (hover: hover) and (pointer: fine) {
    .board-container__grid-item--file:hover {
        border: 2px dashed var(--ae-accent-color);
        filter: drop-shadow(2px 4px 10px var(--ae-accent-color));
        transition: all ease-in-out 300ms;
    }
}

.js-cell:target {
    border: 2px dashed var(--ae-accent-color);
    filter: drop-shadow(2px 4px 10px var(--ae-accent-color));
    transition: all ease-in-out 300ms;
}

.player-2 {
    color: var(--ae-color-player-2);
}

.player-1 {
    color: var(--ae-color-player-1);
}

.player-modifier {
    font-size: var(--ae-cell-font-size);
}

.message {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: black;
    border: 1px dotted silver;
    padding: 0.25rem;
}

.js-cell {
    text-decoration: none;
}

/* pieces du jeu */
.js-cell.piece {
    display: grid;
    align-content: center;
    justify-content: center;
}

.js-cell.piece.player-1.player-modifier.king::before {
    content: "\2654";
}

.js-cell.piece.player-1.player-modifier.queen::before {
    content: "\2655";
}

.js-cell.piece.player-1.player-modifier.rook::before {
    content: "\2656";
}

.js-cell.piece.player-1.player-modifier.bishop::before {
    content: "\2657";
}

.js-cell.piece.player-1.player-modifier.knight::before {
    content: "\2658";
}

.js-cell.piece.player-1.player-modifier.pawn::before {
    content: "\2659";
}

.js-cell.piece.player-2.player-modifier.king::before {
    content: "\265A";
}

.js-cell.piece.player-2.player-modifier.queen::before {
    content: "\265B";
}

.js-cell.piece.player-2.player-modifier.rook::before {
    content: "\265C";
}

.js-cell.piece.player-2.player-modifier.bishop::before {
    content: "\265D";
}

.js-cell.piece.player-2.player-modifier.knight::before {
    content: "\265E";
}

.js-cell.piece.player-2.player-modifier.pawn::before {
    content: "\265F";
}

/* En : Put custom code here */
/* Fr : Ici mettre code personnalisé */

body.home {
    background: transparent url('../../media/chess/images/homepage.jpg') center center fixed no-repeat
}