body {
    font-family: Arial, sans-serif;
    text-align: center;
}

#gameBoard {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.cell {
    width: 100px;
    height: 100px;
    position: relative;   /* Nutné pro správnou funkci absolutně umístěného obrázku */
    overflow: hidden;     /* Skryje případné přečnívající části obrázku */
    background-color: #d3d3d3;
    border-radius: 8px;
}

.cell img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#start-button {
    width: 150px; /* Šířka obrázku */
    height: auto; /* Automaticky přizpůsobí výšku */
    display: block;
    margin: 0 auto; /* Zarovná obrázek na střed */
}
#start-button:hover {
    transform: scale(1.1); /* Efekt zvětšení při najetí myší */
}


button {
    margin-top: 20px;
}
/* Zarovnání tlačítka na střed nad tabulku */
#start-container {
    text-align: center;
    margin: 20px 0; /* Prostor nad a pod tlačítkem */
}

#leaderboard-container {
    margin: 0px; /* Prostor okolo tabulky */
    text-align: center;
}

/* Tabulka na střed */
#leaderboard {
    margin: 0 auto;
    border-collapse: collapse; /* Sloučení hranic buněk */
    width: 80%; /* Přizpůsobit šířku */
    max-width: 600px; /* Maximální šířka */
}

/* Styl tlačítka */
#startButton {
    width: 110px; /* Změna velikosti dle potřeby */
    height: auto;
    display: inline-block; /* Aby se tlačítko správně umístilo */
}


#leaderboard-header {
    text-align: center; /* Centrovaní obrázku a textu */
    margin-bottom: 20px; /* Mezera pod obrázkem */
}

#leaderboard-image {
    width: 350px; /* Určete velikost obrázku */
    height: auto;
    margin-bottom: 0px; /* Mezera mezi obrázkem a textem */
}

#leaderboard-container {
    text-align: center;
    margin-top: 0px; /* Případná mezera nad tabulkou */
}

#leaderboard {
    margin: 0 auto; /* Centrovaní tabulky */
    border-collapse: collapse; /* Pro lepší vzhled tabulky */
    width: 80%; /* Tabulka bude zabírat 80% šířky obrazovky */
}

#leaderboard th, #leaderboard td {
    padding: 10px;
    border-radius: 10px;
}

#leaderboard th {
    background-color: #b97a57; /* Světle šedé pozadí pro hlavičky */
}

#leaderboard td {
    text-align: center;
}