style.css

/* Niby hidden zawsze ukrywa ale lepiej się upewnić. */
#komunikat[hidden]
{
    display: none;
}
/* Wyśrodkowanie wszystkiego */
#komunikat,
#tresc,
#przycisk
{
    text-align: center;
    display: block;
    margin: auto;
}
/*Ostylowanie planszy według uznania */
#plansza
{
    /*position relative ponieważ będę przykrywać planszę przez pseudoklasę before na position absolute */
    position: relative;
    /*Żeby obeamowania się łączyły */
    border-collapse: collapse;
    /*Wyśrodkowanie */
    margin: auto;
    margin-top: 100px;
}
/* Blokowanie planszy gdy nikt nie ma ruchu */
#plansza:not([ruch])::before
{
    padding-top: 40%;
    box-sizing: border-box;
    font-size: 20px;
    color: white;
    text-align: center;
    content: "Gra zawieszona";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}
/*Stylowanie komórki (pojedyńczego pola) */
th
{
    border: 1px solid black;
    font-size: 30px;
    width: 80px;
    height: 80px;
}
/*Stylkowanie pustego pola po najechaniu myszką */
th:not([pole]):hover
{
    background-color: #0f0;
    cursor: pointer;
}
/* Stylkowanie pełnego pola po nahechaniu myszką */
th[pole]:hover
{
    background-color: #f00;
    cursor: not-allowed;
}
/* Wypełnienie pola obstaionego x i po najechaniu myszka gdy mamy ruch x */
#plansza[ruch=x] th:not([pole]):hover::before,
th[pole=x]::before
{
    content: "X";
}
/* To samo tylko że z o */
#plansza[ruch=o] th:not([pole]):hover::before,
th[pole=o]::before
{
    content: "O";
}