/* General Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #2c2f33;
    color: #f0f0f0;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

h3 {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Layout and Container Styling */
.container {
    display: flex;
    width: 90vw;
    max-width: 1200px;
    height: 85vh;
    gap: 20px;
}

.tab {
    background-color: #36393f;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.settings {
    width: 30%;
    overflow-y: auto;
}

.board-container {
    display: inline-block;
    padding: 10px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Chessboard Styling */
.board {
    width: min(80vw, 80vh);
    height: min(80vw, 80vh);
    background: purple;
    position: relative;
    overflow: hidden;
}

.square,
.piece,
.highlight {
    width: 12.5%;
    height: 12.5%;
    position: absolute;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.piece {
    transition: margin-left .3s ease-in-out, margin-top .3s ease-in-out;
}

.grabbed {
    object-fit: contain; /* Prevents distortion when the piece is grabbed */
    cursor: grabbing; /* Indicates the piece is being dragged */
    z-index: 1000; /* Ensures it's above other elements */
    position: fixed; /* Removes the piece from the document flow and positions it relative to the viewport */
    pointer-events: none; /* Disables pointer interaction with other elements */
    transform: translate(-50%, -50%); /* Centers the element under the cursor */
    transition: none !important; /* Ensure transitions are disabled during drag */
}

/* Chessboard Square Colors */
#square01, #square03, #square05, #square07, #square10, #square12, #square14, #square16,
#square17, #square19, #square21, #square23, #square26, #square28, #square30, #square32,
#square33, #square35, #square37, #square39, #square42, #square44, #square46, #square48,
#square49, #square51, #square53, #square55, #square58, #square60, #square62, #square64 {
    background-color: #2c3e50;
}

#square02, #square04, #square06, #square08, #square09, #square11, #square13, #square15,
#square18, #square20, #square22, #square24, #square25, #square27, #square29, #square31,
#square34, #square36, #square38, #square40, #square41, #square43, #square45, #square47,
#square50, #square52, #square54, #square56, #square57, #square59, #square61, #square63 {
    background-color: #ecf0f1;
}

/* Button Styling */
button {
    background-color: #7289da;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #5a6bb2;
}

/* Input and Label Styling */
input[type="text"], 
input[type="number"] {
    background-color: #2f3136;
    border: none;
    padding: 8px;
    color: #ffffff;
    border-radius: 5px;
    margin-top: 5px;
    width: 100%;
}

input[type="checkbox"] {
    accent-color: #7289da;
}

label {
    margin-left: 8px;
    font-size: 14px;
}

/* Output Box Styling */
.output {
    background-color: #1e2228;
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    color: #b9bbbe;
    font-size: 14px;
    height: 150px;
    overflow-y: auto;
    overflow-x: auto;
    white-space: nowrap;
}