*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    /* margin-top: 50px; */
    /* overflow: hidden; */
}
#login {
    display: block;
}
#gameSelection, #gameScrabble, #gameKarty{
    display: none;
}
#playerList {
    list-style-type: none;
    padding: 0;
    width: 50%;
    margin: 0 auto;
}
#playerList li {
    cursor: pointer;
    padding: 5px;
    border: 1px solid #000;
    margin: 5px;
}
#playerList li:hover {
    background-color: #ddd;
}
.gameButton {
    padding: 10px;
    margin: 10px;
    cursor: pointer;
}
.gameButton.selected {
    background-color: green;
    color: white;
}

/* *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
} */


body {
    
    width:100%;
    height:99vh;
    background: rgb(119, 136, 153);
    /* display:flex;
    flex-wrap: wrap; */
    /* border:3px solid red ; */
    
}

.scrabble {
    
    width:90%;
    border:5px solid lightslategray;
    /* margin: 0 auto; */
    /* background: black; */
    /* margin-top: 10px; */
    /* border: 2px solid yellow; */
}

.pismena {
    background: lightslategray;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    /* border: 1px solid black; */
    /* width: 813px; */
    padding-left: 28px;
    
}

.pismena_na_vyber {
    display: flex;
    /* width: 375px; */
    /* height:56px; */
    /* border: 2px solid black; */
    /* background: lightyellow; */
    /* position: absolute; */
    /* right: 10%;
    top:20%; */
    user-select: none;
    /* width: 100%; */
    justify-content: center;
    margin-top: 5px;
    visibility: block;
    /* position: absolute; */
    min-width: auto;
   
}

.pismena_na_vyber div {
    /* display: inline-block; */
    margin: 0px 1px;
    /* padding: 5px; */
    /* background-color: lightblue; */
    /* border: 1px solid #ddd; */
    cursor: pointer;
}

.pnv {
    width: 55px;
    /* height:55px; */
    border: 2px solid black;
    /* font-size: 28px; */
    font-weight: bold;
    /* line-height: 53px; */
    /* text-align: center; */
    background: lightyellow;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

.hraciPlocha {
    display: flex;
   justify-content:space-around;
}

.ui-draggable-dragging {
    z-index: 1000; /* Nastaví vysokou hodnotu z-index, aby byl element vidět nad ostatními */
}

.selected {
    background-color: yellow !important;
}

sub {
    position: relative;
    top: 10px;
    left:1px;
    font-size: 12px
}

.pnv:hover {
    transform: scale(1.05);
}

.zasobnik_pismen{
    display: flex;
    justify-content: center;
    
}

#gameArea {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
#playerNames {
    display: flex;
    justify-content:space-around;
    margin-bottom: 10px;
}
#controls {
    text-align: center;
    margin-top: 10px;
    display: none;
}

#naTahuJe{
    font-size: 2rem;
}

#scoreLeft, #scoreRight {
    text-align: center;
    font-size: 1.5rem;
}

.score {
    text-align: center;
}

#playerName, #opponentName {
    font-size: 2rem;
    text-decoration: underline;
}

#btnChangeLetters, #btnNextTurn {
    padding: 5px 8px;
    margin: 2px 20px;
    border: 1px solid;
    border-radius: 3px;
    box-shadow: 4px 4px 4px rgb(19, 18, 18);
}

#btnChangeLetters:hover, #btnNextTurn:hover {
    background-color: burlywood;
    transition: 0.2s;
}

#zobrazSouhlas{
    display: none;
}
#checkSouhlasSlova, #checkSouhlasAno{
    margin-top: 3px;
    width: 20px;
    height: 20px;
}

#controls_zobraAnoNe{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}




/* -----------------------Modální okna------------------------------- */

/* -------------------------------Modální okno výměna písmenek--------------------- */
 /* Styl pro modální okno */
 .modal {
    display: none; /* Skryté ve výchozím nastavení */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Černé pozadí s průhledností */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    /* width: 80%; */
    /* max-width: 400px; */
    max-width: min-content;
    text-align: center;
}

 .btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    cursor: pointer;
}

/* .close {
    background-color: red;
} */

 .btn:hover {
    opacity: 0.8;
}

.letters {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.letter {
    background-color: lightyellow;
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 18px;
    width: 40px;
    text-align: center;
}

/* -------------------konec modální okno----------------------- */

/* Styl pro modální okno Nesouhlasím --------------------------------------*/
.modalNesouhlas {
    display: none; /* Skryté ve výchozím stavu */
    position: absolute; 
    z-index: 100; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content h2 {
    margin-bottom: 8px;
}

#message {
    overflow-y: auto;
    padding: 0px 10px;
    box-sizing: border-box;
    scroll-behavior: smooth;
    
    
}

.btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    cursor: pointer;
}

/* .close {
    background-color: red;
} */

 .btn:hover {
    opacity: 0.8;
}


/* -------------------konec modální okno----Nesouhlas------------------- */

/* nastavení checkboxu a informace o ukonční hry */

.info-ukoncit-hru{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
}

.konecHr {
    margin-left: 10px;
}

#checkUkonceniHry {
    width: 20px;
    height: 20px;
    margin: 0;
}

.konecHrBtn {
    display: none;
    margin-top: 5px;
    
}

.btnPotOdm {
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 3px 4px 10px 0px black;
    background-color: antiquewhite;
    border: 1px solid;
}

.btnPotOdm:hover {
    background-color: rgb(241, 185, 112);
    transform: scale(1.05); 
}

.modalVysledekZapasu {
    display: none; /* Skryté ve výchozím stavu */
    position: absolute; 
    z-index: 100; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content-zapas {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    /* width: 80%; */
    max-width: 460px;
    /* max-width: min-content; */
    text-align: center;
}


/* --------------modal okno nactení z databaze -------- */
.modalHraDatabaze {
    display: none; /* Skryté ve výchozím stavu */
    position: absolute; 
    z-index: 100; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: beige;
}

#nacistHruHr1, #nacistHruHr2{
    width:20px;
    height:20px;
}


/* ----------TABULKA----------- */
/* Stylování tabulky */
.disabledTable{
    pointer-events: none;
    opacity: 0.5; /* Volitelné, aby bylo vidět, že je tabulka zakázaná */
}
table {
    width: 70%;
    border-collapse: collapse;
    margin-top: 10px;
    margin-left: 20px;
}

/* Stylování hlavičky tabulky */
table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

table tr {
    border: 1px solid #ddd; /* Nastaví ohraničení kolem tabulky, záhlaví a buněk */
}

/* Barva pozadí hlavičky tabulky */
table th {
    background-color: #f2f2f2;
    color: black;
}

/* Změna barvy pozadí řádků tabulky */
table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Stylování řádků při najetí myší */
table tr:hover {
    background-color: #ddd;
}

/* Zvýraznění prvního sloupce (pořadí) */
table td:first-child {
    font-weight: bold;
}

.button-select {
    background-color: lightgreen;
    padding: 4px 2px;
    margin: 2px;
    border-radius: 2px;
}
.button-select:hover {
    background-color: green;
    transition: 1s;
}

.button-delete {
    background-color: lightcoral;
    padding: 4px 2px;
    margin: 2px;
    border-radius: 2px;
    visibility: hidden;
}
.button-delete:hover {
    background-color: red;
    transition: 1s;
}

.labelVymaz{
    font-size: 1rem;
    margin: 5px 10px;
}
#ChckVymazani {
    width: 20px;
    height: 20px;
    background-color: lightskyblue;
    margin: 5px;
}

 #passwordVymazani, #provedVymazani {
    padding: 5px 10px;
    margin: 5px;
    border: 1px solid black;
    border-radius: 3px;
    font-size: 1rem;
    visibility: hidden;
}

.table-row.disabled {
    pointer-events: none;
    opacity: 0.5;
    background-color: #f0f0f0;
}

#btnBezVyberuDB {
    padding: 10px 8px;
    margin-top: 20px;
    border: 1px solid black;
    border-radius: 3px;
    font-size: 1rem;
}
#btnBezVyberuDB:hover {
    background-color: blanchedalmond;
    transition: 1s;

}

/* ---------KONEC TABULKA------ */

/* -----------------------KARTY--------------------- */
#playerListKarty li{
    color: black;
    
}
#playerListKarty li:hover{
    color: red;
    font-size: 1rem;
    transition: 0.2s;
}

#uvodStranka img{
    width: 50px;
    height: 67px;
    border-radius: 5px;
    box-shadow: 4px 4px 25px #131111;
    margin: 5px 5px;
}

.karty {
    display: none;
    /* display: flex; */
    flex-direction: row;
}
.karty img:hover{
    scale: 1.8;
}

.herco img{
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay:calc(0.1s*var(--i));
}

.karo img{
    visibility: hidden;
}
.show{
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay:calc((0.1s*var(--i))) ;
}

.kriz img{
    visibility: hidden;

}
.showKriz{
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay:calc(0.1s*var(--i)) ;

}

.piko img{
    visibility: hidden;
}
.showPiko{
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay:calc(0.1s*var(--i)) ;
}

.joker img{
    visibility: hidden;

}

.showJoker{
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay:calc(0.1s*var(--i)) ;

}

@keyframes slideRight {
    0% {
       transform: translateX(1500px) rotateZ(0deg); 
       opacity: 0;
    }
    100% {
        transform: translateX(0px) rotateZ(1800deg);
        opacity: 1; 
     }
}

.table {
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
}
.table-full {
    background-color: lightgray;
}
.table-not-full {
    background-color: lightgreen;
}
/* ---------------------------------------------------------------Hraci Stůl------------------------------------------------ */


#hraciStul {
    /* display: flex; */
    display: none;
    align-items: center;
    /* border: 1px solid red; */
    justify-content: center;
}

.table-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 50px; /* Přidáno pro prostor mezi tabulkou a info-container */
    /* border: 1px solid blue; */
}

.stul {
    position: relative;
    width: 70vw;
    height: 65vh;
    background-color: green;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}


.table-id {
    font-size: 24px;
    color: rgb(0, 0, 0);
}

.player {
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px 10px;
    border-radius: 5px;
}
.hracnatahujmeno{
    position: absolute;
    transform: translate(-50%, -50%);
    /* background-color: rgba(255, 255, 255, 0.7);
    padding: 5px 10px;
    border-radius: 5px; */
}

.rub {
    /* position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top:50%; */
    position: relative;
    z-index: 100;
    width: 50px;
    height: 67px;
    margin-left: 10px;
    
    
}
.rub img {
    /* position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top:50%; */

    position: absolute;
    top: 0;
    left: 0;
    border-radius:8px ;
    border: 2px solid black;
    width: 50px;
    height:67px
}

.vsechnykartyimg {
    /* position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top:50%; */
}

.vsechnykartyimg img {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top:50%;
    width: 50px;
    height: 67px;
    border-radius: 8px;
    border: 2px solid black;

    /* box-shadow: 4px 4px 25px #131111; */
}

.hand {
    width: 80%;
    background-color: #ccc;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid;
    height: 122px;
}

.hand-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.cards {
    display: flex;
    /* float: left; */
    justify-content: center;
    width: 100%;
    /* border: 1px solid rgb(230, 230, 205); */
}

.cards img {
    width: 50px;
    height: 67px;
    margin-left:5px;
    border: 1px solid black;
    border-radius: 5px;
}

.cards img:hover {
   scale: 1.1;
}

.info-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* border: 1px solid yellow; */
}

.players-list {
    background-color: #e0e0e0;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
    width: 150px; /* Nastavení pevné šířky */
}

h3 {
    margin: 0 0 10px 0;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    padding: 5px 0;
    border-bottom: 1px solid #ccc;
}

li:last-child {
    border-bottom: none;
}

#startHry, #odejitZeHry, #uzavritstul{
    margin: 0 auto;
    padding: 10px 15px;
    font-size: 1rem;
    border-radius: 5px;
    border:1px solid lightseagreen;
    background-color: lightgrey;
    margin-bottom: 50px;
}
#startHry:hover, #odejitZeHry:hover, #uzavritstul:hover{
    background-color: lightskyblue;
    scale: 1.04;
    transition: 0.2s;
}

#uzavritstul{
    display: none;
}

.uzhraji{
    background-color: yellow;
    
}
.odpojiljsemse{
    background-color: grey;
    text-decoration: line-through;
}

.kartyUprostredStolu{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* border: 2px solid yellow; */
}
.pocetSekund{
    position:absolute;
    top: 20px;
    left: -50px;
    display: none;
}
.barvaDamy{
    position: absolute;
    left:11px;
    top: 59px;
    /* border: 1px solid yellow; */
    
}
.damaPiko, .damaKriz{
    position: absolute;
    color:black;
    font-size: 35px;
    display: none;
}
.damaKaro, .damaHerco{
    position: absolute;
    color:red;
    font-size: 35px;
    display: none;
}
.damaPiko:hover, .damaKriz:hover,.damaKaro:hover, .damaHerco:hover {
    /* font-size: 35px; */
    color: rgb(145, 155, 156);
}

.pocetKaretNaDobrani{
    position: absolute;
    right: 20px;
    bottom: -20px;
}

.prvniKarta {
    width: 50px;
    height: 67px;
    margin-right: 10px;
    position: relative;
}

.prvniKarta img{
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 67px;
    border-radius:8px ;
    border: 2px solid black;
}

.pck {
    position: absolute;
    transform: translate(-50%, -50%);
}

/* ----------modal okno pro výběr barvy Dámy---------------------------- */
.modalDama {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

/* Styl pro obsah modálního okna */
.modal-content-dama {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 300px;
    text-align: center;
    border-radius: 10px;
}
      
/* Styl pro symboly */
.symbols {
    display: flex;
    justify-content: space-around;
    font-size: 2em;
    margin-top: 20px;
}

.symbol {
    cursor: pointer;
    transition: color 0.3s;
}

.symbol:hover {
    color: #007bff;
}


/* Styl pro obrazovky menší než 600px */
@media (max-width: 600px) {
    .stul {
        height: 200px;
        /* border: 10px solid rgb(248, 20, 115); */
    }
}

/* Styl pro obrazovky větší než 1200px */
/* @media (min-width: 1200px) {
    body {
        background-color: lightgreen;
    }
} */