@import "board-pieces.css";
@import "square-positions.css";

/* Variables */
:root {
    --brown-board-color: rgb(181, 136, 99);
    --brown-light-square-color: rgb(240, 217, 181);

    --green-board-color: rgb(115, 149, 82);
    --green-light-square-color: rgb(235, 236, 208);

    --red-board-color: rgb(187, 87, 70);
    --red-light-square-color: rgb(245, 219, 195);

    --blue-board-color: rgb(85, 150, 242);
    --blue-light-square-color: rgb(242, 246, 250);

    --board-color: var(--brown-board-color);
    --light-square-color: var(--brown-light-square-color);

    --move-indicator-color: rgba(0, 0, 0, 0.2);

    --piece-animation: ease-out;
    --show-moves: 1;

    --board-square-width: round(down, min(
        calc((100vh - 2*var(--padding) - 2*48px - 6*2px - 2*var(--margin)) / 8),
        calc((100vw - 2*var(--padding) - 32px - 4*2px - 2*var(--margin)) / 8)), 1px);

    --evaluation: 0.22;
    --evaluation-text: "0.2";
}

.square-18 {border-radius: var(--box-radius) 0 0 0;}
.square-88 {border-radius: 0 var(--box-radius) 0 0;}
.square-81 {border-radius: 0 0 var(--box-radius) 0;}
.square-11 {border-radius: 0 0 0 var(--box-radius);}
.flipped {
    .square-18 {border-radius: 0 0 var(--box-radius) 0;}
    .square-88 {border-radius: 0 0 0 var(--box-radius);}
    .square-81 {border-radius: var(--box-radius) 0 0 0;}
    .square-11 {border-radius: 0 var(--box-radius) 0 0;}
}

/* Evaluation bar */
#eval-bar {
    font-weight: 600;
    text-align: center;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    overflow: hidden;
    position: relative;
    float: left;
    width: 32px;
    padding: var(--padding) 0;
    border: var(--border);
    border-radius: var(--box-radius);
    background-color: white;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--dark-gray);
        transform: translateY(calc(50% * clamp(-1, -1 * var(--evaluation) / 5, 1) - 50%));
        transition: transform 0.3s ease-out;
    }
    &::after {
        content: var(--evaluation-text);
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        color: var(--dark-gray);
    }
}
.flipped ~ #eval-bar {
    transform: rotate(180deg);
    &::after {
        transform: translateX(-50%) rotate(180deg);
    }
}

/* Board squares */
.chess-board {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    overflow: hidden;
    position: relative;
    width: calc(8 * var(--board-square-width));
    aspect-ratio: 1;
    margin: 0 var(--padding) 0 0;
    border: var(--border);
    border-radius: var(--box-radius);
    background-color: var(--board-color);
    cursor: default;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.chess-board > .background {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
}
.background > .board-square {
    width: var(--board-square-width);
    aspect-ratio: 1;
    background-color: var(--board-color);
    &.light-square {
        background-color: var(--light-square-color);
    }
}

/* Chess pieces */
.chess-piece {
    position: absolute;
    width: var(--board-square-width);
    aspect-ratio: 1;
    outline-offset: round(up, calc(var(--board-square-width) / -25), 1px);
    z-index: 6;
    transition: opacity 0.3s ease-out;
    &:hover {
        outline: round(down, calc(var(--board-square-width) / 25), 1px) solid white;
    }
    &.sliding {
        outline: none;
        z-index: 9;
        transition: opacity 0.3s ease-out, transform 0.3s var(--piece-animation);
    }
    &.dragged {
        position: fixed;
        transform: translate(-50%, -50%) scale(1.3);
        outline: none;
        z-index: 9;
        filter: drop-shadow(6px 6px 2px rgba(0, 0, 0, 0.2));
        transition: none !important;
        cursor: grabbing !important;
    }
    &.removed {
        opacity: 0;
        z-index: 5;
        pointer-events: none;
    }
}

/* Promotion box */
.promotion-box {
    position: absolute;
    width: var(--board-square-width);
    height: var(--board-square-width);
    box-shadow: 8px 16px 16px rgba(0, 0, 0, 0.2);
    animation: appear 0.3s ease-in-out;
    z-index: 8;
    display: flex;
    flex-direction: column;
    & > button {
        width: var(--board-square-width);
        aspect-ratio: 1;
        padding: 0;
        margin: 0;
        border-right: 2px solid gainsboro;
        border-left: 2px solid gainsboro;
        border-radius: 0;
        outline-offset: -2px;
        background-color: whitesmoke;
        &:first-child {
            border-top: 2px solid gainsboro;
        }
        &:last-child {
            border-bottom: 2px solid gainsboro;
        }
        &.cancel-button {
            aspect-ratio: 2 / 1;
            justify-content: center;
            position: relative;
        }
        &.cancel-button::before, &.cancel-button::after {
          content: "";
          position: absolute;
          background-color: var(--dark-gray);
          width: 20px;
          height: 4px;
          top: 50%;
          left: 50%;
        }
        &.cancel-button::before {
          transform: translate(-50%, -50%) rotate(45deg);
        }
        &.cancel-button::after {
          transform: translate(-50%, -50%) rotate(-45deg);
        }
    }
    & > button:hover, & > button:focus-visible {
        background-color: rgb(232.75, 232.75, 232.75);
    }
    & > button:focus-visible {
        outline: 2px solid rgb(42, 100, 227);
    }
}
.flipped .promotion-box:not(.black), .promotion-box.black:not(.flipped *) {
    flex-direction: column-reverse;
    & > button {
        &:first-child {
            border-top: none;
            border-bottom: 2px solid gainsboro;
        }
        &:last-child {
            border-top: 2px solid gainsboro;
            border-bottom: none;
        }
    }
}

/* File and rank indicators */
.files-container, .ranks-container {
    font-weight: bold;
    display: flex;
    position: absolute;
    z-index: 4;
    pointer-events: none;
    & > div {
        font-size: calc(var(--board-square-width) / 5);
        line-height: calc(var(--board-square-width) / 5);
        text-align: right;
        color: var(--light-square-color);
        &:nth-child(2n) {
            color: var(--board-color);
        }
    }
}
.files-container {
    bottom: calc(var(--board-square-width) / 24);
    right: calc(var(--board-square-width) / 24);
    & > div {
        width: var(--board-square-width);
    }
}
.ranks-container {
    flex-direction: column-reverse;
    top: calc(var(--board-square-width) / 24);
    left: calc(var(--board-square-width) / 24);
    & > div {
        height: var(--board-square-width);
    }
}
.flipped {
    & .files-container, & .ranks-container {
        & > div {
            color: var(--board-color);
            &:nth-child(2n) {
                color: var(--light-square-color);
            }
        }
    }
    & .files-container {
        flex-direction: row-reverse;
    }
    & .ranks-container {
        flex-direction: column;
    }
}

/* Ripple when any square is clicked */
.ripple {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--board-square-width);
    aspect-ratio: 1;
    &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        aspect-ratio: 1;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: ripple-effect 0.5s ease-out;
    }
}

/* Highlighted squares */
.square-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--board-square-width);
    aspect-ratio: 1;
    border-radius: 0;
    background-color: rgba(255, 255, 0, 0.5);
    z-index: 2;
    pointer-events: none;
    animation: appear 0.25s ease;
    transition: opacity 0.25s ease;
    &.yellow {
        background-color: rgba(255, 170, 0, 0.8);
    }
    &.red {
        background-color: rgba(235, 97, 80, 0.8);
    }
    &.green {
        background-color: rgba(172, 206, 89, 0.8);
    }
    &.blue {
        background-color: rgba(82, 176, 220, 0.8);
    }
    &.hint {
        background-color: rgb(27, 172, 166, 0.5);
    }
}
.square-highlight.permanent {
    z-index: 1;
}
.square-highlight.removed {
    opacity: 0;
}

/* Legal move indicators */
.move-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--board-square-width);
    aspect-ratio: 1;
    opacity: var(--show-moves);
    z-index: 5;
    &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: fade-in 0.25s var(--emphasis-animation);
        transition: width 0.25s var(--emphasis-animation), height 0.25s var(--emphasis-animation), opacity 0.25s var(--emphasis-animation);
    }
    &.fade-out::after {
        width: 25%;
        opacity: 0;
    }
}
.empty-move-indicator {
    &::after {
        width: 30%;
        aspect-ratio: 1;
        background-color: var(--move-indicator-color);
    }
    &.hovered::after, &:hover::after {
        width: 50%;
    }
}
.capture-indicator {
    &::after {
        width: 80%;
        aspect-ratio: 1;
        border: calc(var(--board-square-width) / 10) solid var(--move-indicator-color);
        box-shadow: inset 0 0 var(--move-indicator-color);
        transition: box-shadow 0.2s var(--emphasis-animation);
    }
    &.hovered::after {
        width: 70%;
        box-shadow: inset 0 0 0 calc(var(--board-square-width) / 4) var(--move-indicator-color);
    }
    &:hover::after {
        width: 70%;
        box-shadow: inset 0 0 0 calc(var(--board-square-width) / 4) var(--move-indicator-color);
    }
}

/* Drag effect */
#drag-effect {
    position: absolute;
    width: var(--board-square-width);
    aspect-ratio: 1;
    outline: round(down, calc(var(--board-square-width) / 25), 1px) solid white;
    outline-offset: round(up, calc(var(--board-square-width) / -25), 1px);
    visibility: hidden;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 calc(var(--board-square-width) * 3/50) calc(var(--board-square-width) / 100) rgba(0, 0, 0, 0.6);
    &.touch-drag {
        outline: none;
        box-shadow: none;
        z-index: 9;
    }
    &.touch-drag::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200%;
        height: 200%;
        border-radius: 50%;
        box-shadow: inset 0 0 0 var(--board-square-width) var(--move-indicator-color);
        transform: translate(-50%, -50%);
    }
}

/* Animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
}
@keyframes ripple-effect {
    from {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0.5;
    }
    to {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}
@keyframes appear {
    from {
        opacity: 0;
    }
}

:root {
    &:not(.light):not(.dark) {
        @media (prefers-color-scheme: dark) {
            #eval-bar {
                background-color: whitesmoke;
                &::before {
                    background-color: black;
                }
            }
        }
    }
    &.dark {
        #eval-bar {
            background-color: whitesmoke;
            &::before {
                background-color: black;
            }
        }
    }
}