body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#1e1e1e;

display:flex;
flex-direction:column;
height:100dvh;

overflow:hidden;
}

/* MENU SUPERIOR (PRETAS) */

#topMenu{
flex:1;
background:#f2f2f2;

display:flex;
justify-content:center;
align-items:center;
gap:24px;
}

/* MENU INFERIOR (BRANCAS) */

#bottomMenu{
flex:1;
background:#111;

display:flex;
justify-content:center;
align-items:center;
gap:24px;
}

/* PEÇAS DO MENU */

.menuPiece{
font-size:42px;
cursor:pointer;
transition:transform 0.15s;
}

.menuPiece:hover{
transform:scale(1.15);
}

/* CORES DAS PEÇAS */

#topMenu .menuPiece{
color:#111;
}

#bottomMenu .menuPiece{
color:#ffffff;
}

/* TABULEIRO */

#board{

flex:8;

width:100vw;
height:100%;

display:grid;
grid-template-columns:repeat(8,1fr);
grid-template-rows:repeat(8,1fr);
}

/* CASAS */

.cell{
display:flex;
align-items:center;
justify-content:center;

font-size:10.8vw;

cursor:pointer;

position:relative;
}

/* CORES DO TABULEIRO (MAIS CONTRASTE) */

.light{
background:#f0d9b5;
}

.dark{
background:#b58863;
}

/* PEÇAS */

.cell{
color:#ffffff;
}

.cell.black{
color:#111111;
}

/* CAMADA DE DESTAQUE */

.cell::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

/* MOVIMENTOS POSSÍVEIS */

.move::after{
background:rgba(0,200,90,0.35);
}

/* CASA BLOQUEADA (CARTA) */

.blocked-light::after{
background:rgba(255,140,0,0.35);
}

.blocked-dark::after{
background:rgba(255,120,0,0.35);
}

/* XEQUE */

.check::after{
background:rgba(255,0,0,0.45);
}

/* ÚLTIMO MOVIMENTO */

.lastMoveLight::after{
background:rgba(255,255,0,0.25);
}

.lastMoveDark::after{
background:rgba(255,255,0,0.25);
}

/* CASA SELECIONADA */

.selected{
outline:4px solid #00bfff;
}

/* PROMOÇÃO */

#promotionMenu{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);

background:#2c2c2c;

padding:20px;
border-radius:12px;

display:none;
gap:20px;
}

.promoPiece{
font-size:46px;
cursor:pointer;
color:white;
}

/* XEQUE-MATE */

#mateMessage{
position:fixed;
top:12px;
right:12px;

background:#202020;

color:white;

padding:10px 16px;

border-radius:8px;

font-size:15px;

display:none;
}