:root {
    --scoreBoard-bg: #090909;
    --first: #676767;
    --second: #202020;
    --third: #0e0e0e;
    --tlacitkoZmena-bg: #1e1e1e;
    --disabled-bg: #323232;
    --selected-bg: #3a3a3a;
    --txt-color: #fff;
    --infoIcon: #e8e8e8;
    --infoIcon-hover: #fff;
}

[data-theme="light"] {
     --scoreBoard-bg: #f3f3f3;
     --first: #d3d32c;
     --second: #b1b1aa;
     --third: #aa7a57;
     --tlacitkoZmena-bg: #fff;
     --disabled-bg: #989898;
     --selected-bg: #b8b8b8;
     --txt-color: #000;
    --infoIcon: #494949;
    --infoIcon-hover: #323232;
 }
/*
body {
    height: 100vh;
    background-color: #121212;
    color: var(--txt-color);
    margin: 0;
}*/

/* div s tim vsim game over + score -> aby se to zobrazovalo tam kde ma*/
.gameOverDiv{
    height: 500px;
    width: 625px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

/* div ve kterym je jenom text - game over a score */
.textVboxiku{
    position: absolute;
    text-align: center;
    padding: 25px;
    opacity: 75%;
    box-shadow: 0 0 20px 8px rgba(67, 83, 89, 0.65);
    background-color: #989898;
    border-radius: 10px;
    display: none;
}

/* text Game Over JENOM */
.gameOverTxt{
    font-size: 45px;
    font-family: system-ui;
    color: #000;
}

/* text ktery zobrazuje skore hrace */
.scoreTxt{
    font-size: 30px;
    font-family: system-ui;
    color: #000;
}

/* boxik ve kterym je ta tabulka ve ktery se pohybuje had */
.boxik{
    display: flex;
    height: 500px;
    max-height: 500px;
    width: 625px;
    max-width: 625px;
    min-width: 625px;
    border-radius: 5px;
    border: 0;
    position: relative;
    background-color: transparent !important;
}

/* v tomhle je ten boxik s tou tabulkou - aby to bylo na spravnym miste */
.toVcemJeBoxik{
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

/* zase aby byly ty tlacitka na spravnym miste - v tomhle divu jsou uplne vsechny*/
.toVcemSouTlacitkaProZmenu{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* v tomhle jsou tlacitka pro praci s replayem */
.replayControll{
    display: flex;
    justify-content: space-between;
    width: 600px;
}

/* radky ve kterych se zobrazuji tlacitka pro meneni rychlosti a velikost */
.tlacitkaProZmenu{
    display: flex;
    justify-content: space-between;
    width: 550px;
}

/* ty dany tlacitka ktery meni rychlost a velikost pole */
.tlacitkoZmena{
    transition: all 0.3s ease;
    height: 50px;
    width: 125px;
    background-color: var(--tlacitkoZmena-bg);
    text-align: center;
    align-content: center;
    font-family: "system-ui";
    font-size: 20px;
    border-radius: 7px;
    cursor: pointer;
}

/* po najeti na tlacitko ktere meni velikost a rychlost */
.tlacitkoZmena:hover{
    background-color: #39a338;;
    margin-top: -3px;
}

/* div ve kterym je tlacitko play again - aby bylo na spravnym miste */
.tlacitkaProZmenuPlayAgain{
    justify-content: space-evenly;
}

/* tlacitko play again */
.playAgainTlacitko{
    transition: all 0.3s ease;
    height: 50px;
    width: 125px;
    background-color: var(--tlacitkoZmena-bg);
    text-align: center;
    align-content: center;
    font-family: "system-ui";
    font-size: 20px;
    border-radius: 7px;
    cursor: pointer;
}

/* kdyz je tlactiko play again aktivni (to znamena ze nema class .disabled) - po najeti je zelene */
.playAgainTlacitko:hover{
    background-color: #39a338;
}

/* pro tlacitko play again, kdyz nema byt aktivni */
.disabled{
    background-color: var(--disabled-bg);
    color: #232323;
}

/* kdyz je uzivatel ve hre - nemuze menit game mode*/
.disabledTlacitkoZmena:hover{
    background-color: #954545;
    margin-top: 0;
}

/* disabled play again po najeti */
.disabled:hover{
    background-color: #954545;
}

/* class pro tlacitka ktera jsou aktualne vybrana - je to videt */
.selected{
    background-color: var(--selected-bg) !important;
    margin-top: -3px !important;
}

/* div pro dolni info aby bylo uprostred na spravnem miste */
.toVcemJeDolniInfo{
    display: flex;
    justify-content: center;
    margin-top: 35px;
    height: 100vh;
}

/* div s dolnim infem - best score a bude tam leaderboard */
.dolniInfo{
    max-width: 625px;
    background-color: var(--scoreBoard-bg);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* policka score boradu*/
.first{
    background-color: var(--first);
}
.second{
    background-color: var(--second);
}
.third{
    background-color: var(--third);
}

/* tlacitko ve scoreboardu pres ktere se pousti replay */
.replayButton{
    padding-left: 5px;
    color: var(--text-color);
}

.replayButton:hover{
    color: #3c7ce8;
}

/* text s best score */
.highScore{
    height: min-content;
    margin-top: 15px;
    font-family: system-ui;
    font-size: 25px;
}

/* div ve kterym je all time best a rychlost hada a velikost pole na kterych byl tenhle rekord */
.bestScoreDivIsRychlostiAvelikosti{
    width: 100%;
    display: flex;
    justify-content: space-around;
}

/* jednotliva policka scoreboardu*/
.polickoScoreBoardu{
    text-align: center;
    font-family: system-ui;
}

/* ikony ktere znaci jestli je hrac online nebo offline*/
.onlineIkonka, .offlineIkonka{
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #00c10a;
}

.offlineIkonka{
    background-color: #919191;
}

/* div ve kterym je ta ikonka pro zobrazeni infa */
.infoButton{
    position: absolute;
    width: 100%;
    margin-top: 15px;
    margin-left: -10px;
    display: flex;
    flex-direction: row-reverse;
}

/* div ve kterem je info o hre - cele info - je to tam aby bylo na spravnem miste - jak hrat*/
.infoDiv{
    height: 500px;
    width: 625px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

/* v tomhle divu je uz ten text */
.infoTxtBokix{
    position: absolute;
    text-align: center;
    padding: 25px;
    opacity: 75%;
    box-shadow: 0 0 20px 8px rgba(67, 83, 89, 0.65);
    background-color: #989898;
    border-radius: 10px;
}

/* jednotlive odstavce textu */
.infoTxt{
    line-height: 1;
    font-size: 23px;
    font-family: system-ui;
    color: #000;
}

/* ikona na kterou kdyz kliknu -> zobrazi se info */
.infoIcon{
    color: var(--infoIcon);
    font-size: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.infoIcon:hover{
    scale: 1.15;
    color: var(--infoIcon-hover);
}

/* div aby byla ikona krizku na spravnem miste*/
.toVcemJeCrossIcon{
    position: absolute;
    width: 88%;
    display: flex;
    flex-direction: row-reverse;
}

/* ikonka krizku - na zavreni divu s infem */
.closeInfoCross{
    font-size: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #000;
}

.closeInfoCross:hover{
    scale: 1.15;
}

/* class kterou davam divu s infem */
.hidden {
    display: none !important;
}


.ovladaniNaMobilu{
    margin-top: 5px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.sipkyProMobilEMPTY{
    height: 125px;
    width: 175px;
    background-color: transparent;
}

.sipkyProMobil{
    height: 125px;
    width: 175px;
    background-color: var(--scoreBoard-bg);
    border-radius: 15px;
    font-size: 50px;

}

.sipkyProMobilIconDiv{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}