body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-image: url(/assets/spgbb.jpg);
    color: white;
    font-family: sans-serif;
}

.game-container { text-align: center; }

#chessboard {
    display: grid;
    grid-template-columns: repeat(8, 60px);
    grid-template-rows: repeat(8, 60px);
    border: 5px solid #333;
    margin: 20px auto;
}

.square {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    cursor: pointer;
}

/* KOTAK PUTIH DENGAN GAMBAR */
.white-sq { 
    background-image: url(/assets/ctpk.jpg); 
    background-size: cover;
    filter: brightness(0.6); 
}
.black-sq { background-color: #111; }

/* Tambahkan ini untuk kontrol */
.controls {
    margin-top: 20px;
    background: rgba(255,255,255,0.1);
    padding: 10px;
    border-radius: 8px;
}

.selected { outline: 3px solid #53d4eb; background-color: rgba(255, 235, 59, 0.2) !important; }

/* WARNA BIDAK */
.piece-yellow { color: #ffeb3b; text-shadow: 0 0 10px yellow; }
.piece-red { color: #ff1744; text-shadow: 0 0 10px red; }