/* Загальні стилі сторінки */
body {
    margin: 20px auto;
    width: 1000px;
    font-family: arial, sans-serif;
    cursor: default;
}
#game-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}
#login-screen {
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}
h1, h2, h3, p {
    text-align: center;
}
h1 { font-size: 24px; line-height: 32px; margin-bottom: 20px; }

/* --- КЛЮЧОВЕ ВИПРАВЛЕННЯ --- */
#grid {
    display: grid; /* Вказуємо, що це grid-контейнер */
    border: 2px solid black;
    background-color: #6C77A0;
}

.cell {
    /* position: absolute; - ВИДАЛЕНО */
    border: 1px solid #9B9B9B;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #FFFFFF;
    background-size: contain; /* Для кращого відображення фішок */
}
/* ----------------------------- */

#game-info {
    width: 260px;
    text-align: center;
}
#endTurn_button {
    height: 65px;
    font-size: 20px;
    width: 100%;
    margin-top: 20px;
}
.selected {
    border: 3px solid red !important;
    box-sizing: border-box;
}

/* Фішки гравців */
.p1 { background-image: url(img/1.png); }
.p2 { background-image: url(img/2.png); }
.p3 { background-image: url(img/3.png); }
.p4 { background-image: url(img/4.png); }
.p5 { background-image: url(img/5.png); }
.p6 { background-image: url(img/6.png); }
.p7 { background-image: url(img/7.png); }
.p8 { background-image: url(img/8.png); }

/* ЗОНИ (кольори) */
.z1 { background-color: #828282; }
.z2 { background-color: #828282; }
.z3 { background-color: #D0D0D0; }
.z4 { background-color: #D0D0D0; }
.z5 { background-color: #E9E9E9; }
.z6 { background-color: #E9E9E9; }
.z7 { background-color: #E9E9E9; }
.z8 { background-color: #E9E9E9; }
.z9 { background-color: #D0D0D0; }