@import url("reset.css");
@import url("sq_transforms.css");

:root {
    --bg-color: #1e1e1e;
    --sq-light: #e3c16f;
    --sq-dark: #b88b4a;

    --cell-layer: 1;
    --piece-layer: 2;
}

body {
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#main-board-container {
    width: min(90vw, 90vh);
    height: auto;
    aspect-ratio: 1;
}

.board {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    position: relative;
}

.cell-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    z-index: var(--board-layer);
}

.piece-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


.sq {
    z-index: var(--cell-layer);
}

.sq.light { background-color: var(--sq-light); }
.sq.dark { background-color: var(--sq-dark); }

.wk { background-image: url("../images/pieces/wk.svg"); }
.wn { background-image: url("../images/pieces/wn.svg"); }
.wb { background-image: url("../images/pieces/wb.svg"); }
.wq { background-image: url("../images/pieces/wq.svg"); }
.wp { background-image: url("../images/pieces/wp.svg"); }
.wr { background-image: url("../images/pieces/wr.svg"); }

.bk { background-image: url("../images/pieces/bk.svg"); }
.bn { background-image: url("../images/pieces/bn.svg"); }
.bb { background-image: url("../images/pieces/bb.svg"); }
.bq { background-image: url("../images/pieces/bq.svg"); }
.bp { background-image: url("../images/pieces/bp.svg"); }
.br { background-image: url("../images/pieces/br.svg"); }

.wk, .wq, .wr, .wn, .wb, .wp,
.bk, .bq, .br, .bn, .bb, .bp,
.move-pip {
    width: 12.5%;
    height: 12.5%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.move-pip { 
    background-image: url("../images/move-pip.svg"); 
    position: absolute;
    z-index: var(--piece-layer);
}

.piece {
    position: absolute;
    z-index: var(--piece-layer);
    transition: transform 200ms ease;
}