body {margin: 0; user-select: none;}
img {-webkit-user-drag: none;}

#sala {display: flex; height: 100vh;}

#taula{display:flex; height: 100vh;}

#SalaXat {
    width: 40%;
    height: 70%;
    display: flex;
    flex-direction: column;
    margin-left:12px;
}

.XatServidor {color: red;}
.XatJugador {color: black;}
.XatMissatges {
    flex: 1;
    overflow-y: auto;
    height: 100%;

    border: 1px solid #666;
    padding: 5px;
    box-sizing: border-box;

    font-family: Consolas, monospace;
    white-space: pre-wrap;
}

.XatEntrada {margin-top: 4px;}

#SalaControls{
    margin-top:12px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin-left:12px;
    gap:8px;
}

#Cadira {width: 30px;}

#SalaTaules {width: 45%; padding: 10px;}
.tauletes {
    border: 1px solid black;
    padding: 8px;
    margin-bottom: 10px;
    width: 160px;
    /* background-image: url("../img/tauletes/tauleta01D.png"); */
    /* Evita que la imatge es repeteixi si l'element és més gran */
    background-repeat: no-repeat;
  
    /* Centra la imatge verticalment i horitzontalment */
    background-position: center;
  
    /* COVRE tot l'element sense deformar la imatge (Súper útil) */
    background-size: contain; 
}

#SalaUsers {width: 10%; padding: 10px; font-size: 0.7em;}

#Esquerra{display:flex; flex-direction:column;
    width:510px; 
    margin-left:300px;
    flex:0 0 auto;
}

#Dreta{display:flex; flex-direction:column;  width:510px; margin-left:100px;}

#ControlsPartida{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:10%px;
}

.XatAmbBandera {
    display:flex;
    height:100%;
    flex-direction:row;
    /* align-items:center; */
    gap:8px;
}
/* .XatPartida {
    display:flex;
    height:100%;
} */

#PartidaXat {
    width:100%;
    height: 25%;
    display: flex;
    flex-direction: column;
    margin-left:0;
    margin-top:60%;
}

#Reportar {position:relative; z-index:10; color:red;}

#Moble {
    position: relative;
    border: 3px solid brown;
    height: 450px;
    width: 450px;
    margin: 30px auto 0;
}

#Tapete {
    position: absolute;
    background: radial-gradient(circle, #148a3c 0%, #0b6a2c 100%);
    border: 3px solid #4a2b18;
    border-radius: 12px;
    height: 320px;
    width: 320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#Trumfar
{
    position: absolute;
    width:240px;      /* 6 cartes × 40 px aprox */
    height:140px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 100;
}

#Ma {
    position: relative;
    width: 700px;
    height: 180px;
    margin: 20px auto 0;
    margin-left:40px;
}

.Popup{
    position: absolute;
    display: flex;
    top: 5px;
    /* padding: 8px; */
    width:fit-content;
 
    background: #ffffdd;
    border: 2px solid #444;
    border-radius: 6px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.35);
    z-index: 1000;
}
.MiniTapet{position:relative; width:160px; min-height:160px;}

#MiniTapetBasa img{position:absolute; width:40px;}
#MiniSud{top:55%; left:50%; transform: translateX(-50%);}
#MiniEst{top:50%;left:70%;  transform: translateY(-50%);}
#MiniNord{top:5%; left: 50%; transform: translateX(-50%);}
#MiniOest{top:50%; left:5%; transform: translateY(-50%);}

#JSud {position: absolute; top: 89%; left: 50%; transform: translateX(-50%); text-align: center;}
#JNord {position: absolute; top: 0%; left: 50%; transform: translateX(-50%); text-align: center;}
#JEst {position: absolute; top: 50%; left: 88%; transform: translateY(-50%); text-align: right;}
#JOest {position: absolute; top: 50%; left: 0%; transform: translateY(-50%); text-align: left;}

#paper {position: absolute; display:flex; top: 0%; left: 100%; width: 65px; aspect-ratio: 1442 / 2224;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
    transform: translateX(-100%); background-image: url("../img/altres/paper.png");}

.Nom {font-size: 0.7em;}

.Icones {
    display: flex;
    justify-content: center;
    margin-top: 4px;
    gap: 2px;
    /* min-height: 30px; */
}

.Icones img {width: 30px; height: auto;}

.IconesLateral {
    display: flex;
    flex-wrap: wrap;
    width: 62px;          /* 2 icones de 30px + 2px de separació */
    gap: 2px;
    justify-content: flex-start;
}

.IconesLateral img {width: 30px; height: auto;}

.CartaGUI {position: absolute; width: 80px;}

.DoblesGUI
{
    position:absolute;
    width:80px;
    height:120px;
    text-align:center;
    color:black;
    font-weight:bold;
    text-shadow:1px 1px 2px black;
    z-index:10;
    pointer-events:none;
}

.Boto{width:120px; height:32px; align-self:flex-start;}

.Modal {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);

    justify-content: center;
    align-items: center;
}

.ModalContingut {
    background: white;
    padding: 20px;
    border-radius: 10px;
    min-width: 300px;
}