/*--------------------- MAIN BOARD ------------------------*/
.container-wrapper {
    display: grid;
    grid-area: main;
}

.main-eval-bar {
    grid-area: eval;
    overflow: hidden;
    align-self: stretch;
}

.eval-black {
    width: 100%;
}

.eval-white {
    width: 100%;
    bottom: 0;
    transition: height 0.3s ease;
}

.main-board {
    display: flex;
    grid-area: board;
    justify-content: center;
    justify-self: center;
    width: 100%;
    align-items: stretch;
}

.myBoard {
    width: 100% !important;
    /* height: 100% !important; */
    transition: width 0.1s ease, height 0.1s ease;
    flex: 1;
}

.pgn-table {
    background-color: var(--off-white);
}

.notify-state {
    grid-area: notify-state;
}

.pgn-move {
    display: flex;
    justify-content: center;
    flex: 0 0 41.666%;
    cursor: pointer;
}

.pgn-move:hover {
    background: var(--text-choose);
}

.black-captured {
    grid-area: cap-top;
}

.white-captured {
    grid-area: cap-bot;
}

.top-player {
    grid-area: top-player;
}

.bot-player {
    grid-area: bottom-player;
}

.controls {
    grid-area: control;
    background: transparent;
}

.btn {
    background: none;
    border: none;
    outline: none;
    align-items: normal;
    flex: 1;
    border: 1px solid var(--border-pgn-color);
}

.moves {
    grid-area: moves;
    border: 1px solid var(--border-pgn-color);
    /* min-height: 0; */
}

.flex-nav {
    display: flex;
    flex-flow: column;
}

.moves .nav-btn {
    display: flex;
    flex: 0 0 2.5rem;
    font-size: .9em;
    background-color: var(--blue-bg);
}

#move-list {
    display: flex;
    flex-flow: row wrap;
    will-change: scroll-position;
    align-items: center;
    overflow-y: auto;
    align-content: flex-start;
    line-height: 1.7;
    flex: 0 0 14rem;
}

.move-list::-webkit-scrollbar-thumb {
    background: var(--Platinum);
}

.move-index {
    flex: 0 0 16.666%;
    display: flex;
    justify-content: center;
}

.fa-rotate-left:active {
    transform: rotate(-90deg);
}

.btn:hover {
    background-color: var(--icon-pick);
}

button {
    cursor: pointer;
}

.controls .control-icon {
    display: flex;
    flex: 0 0 2.5rem;
}

.controls .control-icon i {
    font-size: 20px;
}

/* white square color */
.white-1e1d7 {
    background-color: #e3e3e3 !important;
}

/* black square color */
.black-3c85d {
    background-color: #85644d !important;
}

[class^="square-"].last-move {
    position: relative;
}

[class^="square-"].last-move::after {
    content: "";
    position: absolute;
    background-color: var(--square-move);
    inset: 0;
    z-index: 1;
}

[class^="square-"].highlightwrong {
    background-color: var(--color-red-400) !important;
}

[class^="square-"].highlightmissing {
    background-color: var(--color-yellow-300) !important;
}


/* float the piece on the square */
.piece-417db {
    position: relative;
    z-index: 2;
}

/*check animation*/
.check {
    animation: checkanimation 0.6s infinite;
}

@keyframes checkanimation {
    0% {
        box-shadow: inset 0 0 0 4px red;
    }

    50% {
        box-shadow: inset 0 0 0 4px yellow;
    }

    100% {
        box-shadow: inset 0 0 0 4px red;
    }
}

.btn-select-promotion:hover {
    background-color: var(--color-gray-100);
}

.notify-waiting {
    color: var(--color-orange-400);
}

.notify-ready {
    color: var(--color-green-500);
}

.notify-checkinit {
    color: var(--color-blue-600);
}

.notify-disconnect {
    color: var(--color-red-400);
}

.main-log {
    grid-area: main;
}

/* Responsive for all screen */
@media ((min-width: 320px) and (max-width: 767px)) {
    .container-wrapper {
        /* grid-template-columns: 30px 1fr 1fr; */
        grid-template-areas:
            ". cap-top top-player"
            "eval board board"
            ". cap-bot bottom-player"
            "notify-state notify-state notify-state"
            "moves moves moves"
            "control control control";
        width: 100%;
    }

    #move-list {
        /* flex: 1; */
        min-height: 0;
        flex: 0 0 6rem;
    }

    .bot-player,.top-player {
        display: flex;
        justify-content: end;
        padding: .5rem;
        align-items: center;
    }

    .top-player i {
        display: none;
    }

    .bot-player i {
        display: none;
    }

    .black-captured {
        display: flex;
        align-items: center;
    }

    .white-captured {
        display: flex;
        align-items: center;
    }

    .main-eval-bar {
        margin-left: .2rem;
    }

    .black-piece img {
        width: 20px;
    }

    .white-piece img {
        width: 20px;
    }

    /* .flex-nav-control {
        display: none;
    } */
}

@media (min-width: 768px) {
    .container-wrapper {
        grid-template-columns: 1fr minmax(40px, 1.5vw) minmax(250px, calc(100dvh - 180px)) minmax(0, 26.3vw) 1fr;
        grid-template-areas:
            ". . top-player . ."
            ". eval board . ."
            ". eval board notify-state ."
            ". eval board cap-top ."
            ". eval board moves ."
            ". eval board control ."
            ". eval board cap-bot ."
            ". eval board . ."
            ". . bottom-player . .";
        column-gap: 15px;
        grid-template-rows: 1fr;
        padding-top: 2rem;
    }

    .top-player {
        border-radius: 15px 15px 0 0;
        border: 2px solid var(--color-gray-900);
        border-bottom: none;
        box-sizing: border-box;
    }

    .bot-player {
        border-radius: 0 0 15px 15px;
        border: 2px solid var(--color-gray-900);
        border-top: none;
        box-sizing: border-box;
    }

    .black-captured {
        display: flex;
        align-items: center;
        border: 1px solid var(--border-pgn-color);
    }

    .white-captured {
        display: flex;
        align-items: center;
        border: 1px solid var(--border-pgn-color);
    }

    .flex-nav-control {
        display: flex;
        flex-flow: column;
    }
}

@media (min-width: 800px),
(orientation: landscape) {
    .pgn-table {
        grid-area: 3/3/10/4;
    }
}

@media(min-width: 800px), (orientation: landscape) {
    .user {
        padding: .5em .5em .5em .3em;
    }
}

@media(max-height: 550px) {
    .moves {
        overflow: hidden;
    }

    #move-list {
        display: none !important;
    }

    #move-list {
        flex: 0 0 0 !important;
        height: 0 !important;
    }

    .moves .move-list {
        display: flex;
        line-height: 1.7;
        flex-flow: row wrap;
    }
}