/*  Board  */

.board {
    position: relative;
    height: 50%;
    display: flex;
    flex-direction: row;
    box-sizing: content-box;
    border: solid 5px var(--bg-light);
    box-shadow: 3px 3px 0 0 var(--shadow);
}

.board.diff-shape {
    border: 0px;
    box-shadow: none;
}


/*  Columns  */

.column {
    height: 100%;
    display: flex;
    flex-direction: column;
}


/*  Squares  */

.square {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .1s;
}

.square.can-go {
    cursor: pointer;
}

.square.disabled {
    opacity: 0;
}

.square > *:not(.piece) {
    pointer-events: none;
}

.light-square {
    background-color: var(--light-square);
    background-image: var(--light-square-grad);
}

.dark-square {
    background-color: var(--dark-square);
    background-image: var(--dark-square-grad);
}


/*  clicked  */

.column .square.clicked {
    transition: all 0s;
    background-image: none !important;
}
.light-square.clicked {
    background-color: var(--light-clicked);
}
.dark-square.clicked {
    background-color: var(--dark-clicked);
}


/*  ocean  */

.square.ocean-square {
    background-image: none !important;
}
.light-square.ocean-square {
    background-color: #003996 !important;
}
.dark-square.ocean-square {
    background-color: #012b78 !important;
}


/*  right-clicked  */

.column .square.right-clicked {
    transition: all 0s;
    background-image: none !important;
}
.light-square.right-clicked {
    background-color: var(--light-highlight);
}
.dark-square.right-clicked {
    background-color: var(--dark-highlight);
}


/*  jump-spell  */

.column .square.jump-spell-selected {
    transition: all 0s;
    background-image: none !important;
}
.light-square.jump-spell-selected {
    background-color: lime;
}
.dark-square.jump-spell-selected {
    background-color: #32cd32;
}


/*  piece-over  */

.light-square.piece-over {
    border: solid .6rem var(--light-highlight);
}
.dark-square.piece-over {
    border: solid .6rem var(--dark-highlight);
}


.column .square.piece-over.ranged-capture {
    border: solid .6rem var(--other-highlight);
}


/*  Highlights  */

.highlight {
    height: 30%;
    width: 30%;
    background-color: var(--dark-highlight);
    border-radius: 30%;
    transition: opacity .2s;
    z-index: -2;
    opacity: 0;
}

.can-go .highlight, .highlight.active {
    z-index: 120;
    opacity: 1;
}

.can-go.ranged-capture .highlight {
    background-color: var(--other-highlight);
}


/*  Pieces  */

.piece, .ghost-piece {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0s ease-in-out;
    z-index: 1;
    cursor: grab;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.board .piece-item {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 15;
}

/*  Game UI  */

.promotion-popup,
.ranged-capture-popup,
.swap-or-capture-popup,
.end-screen-popup {
    display: none;
}


.counter-piece-item, .ship-shot-dura-counter {
    color: black;
    font-weight: 500;
    z-index: 20 !important;
}


/*  Media Queries  */

@media only screen and (max-width: 1200px) {
    .board {
        height: 40%;
    }
}