/*
 #board {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     position: relative;
     width: min(95vw, 95vh, 820px);
     aspect-ratio: 1 / 1;
     border: 2px solid #333;
     margin: 10px auto;
     transform: rotateZ(180deg);
     box-shadow: 0 0 1rem rgba(40, 40, 40, 0.9);
 }
*/

/* nowa klasa dla label*/
#board {
  display: grid;
  grid-template-columns: auto repeat(8, 1fr) auto;
  grid-template-rows: auto repeat(8, 1fr) auto;
  position: relative;
  width: min(95vw, 95vh, 820px);
  aspect-ratio: 1 / 1;
  border: 2px solid #333;
  margin: 10px auto;
  transform: rotateZ(180deg);
  box-shadow: 0 0 1rem rgba(40, 40, 40, 0.9);
  background: #d4a574;
}

.pojemnik{
    position: relative;
}

#tahy{
    font-size: 1rem;
    position: absolute;
    top:0;
    right:0;
}

.label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d4a574;
  font-weight: bold;
  font-size: 0.9rem;
  color: #333;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  transform: rotateZ(180deg); /* Odwraca etykiety  */
}

.corner {
  background: #d4a574;
}

 /* Komórka */
 .cell {
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: relative;
 }

 .cell.selected {
     filter: brightness(1.3);
     box-shadow: inset 0 0 0 3px red;
 }

 /* Tło bez sztywnych rozmiarów */
 .black {
     background-image: url("/gamesImg/warcaby/darkFieldWarcaby.webp");
     background-position: center;
     background-size: cover;
     background-color: #6d6d6d;
 }

 .white {
     background-image: url("/gamesImg/warcaby/lightFieldWarcaby.webp");
     background-position: center;
     background-size: cover;
     background-color: #ccc;
 }

 /* Pionki  */
 .piece {
     width: 80%;
     height: 80%;
     max-width: 90px;
     max-height: 90px;
     border-radius: 50%; /* kolko */
     display: inline-block;
     box-shadow: 0 -5px 6px rgba(40, 40, 40, 0.8);
     outline: 2px solid rgb(255, 255, 255);
     object-fit: contain;
     position: relative;
 }

 .infoPiece {
     display: inline-block;
     width: 1rem;
     height: 1rem;
     border-radius: 50%;
 }

 .red {
     background: #da6517;
 }

 .black-piece {
     background: #2f8a24;
 }

 .king {
     transform: scale(-1, -1);
     position: relative;
 }

 .king::after {
     content: "♔";
     color: rgb(255, 217, 0);
     font-size: 3rem;
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     pointer-events: none;
     line-height: 1;
 }

 #message {
     font-size: 1.3rem;
 }

 @media (max-width: 779px) {
     #message {
         font-size: 1rem;
     }

     .king::after {
         font-size: 1.5rem;
     }
     .label{
        font-size: 0.5rem;
          padding-left: 0.1rem;
  padding-right: 0.1rem;
     }
 }

 /************************************************** modal ***********************************************/
.modal-dialog{
    opacity: 0.9 !important;

}
.modal-content {
    width: 95%;
    margin: 0 auto;  
}

.modal-body {
    padding: 20px;
    object-fit: cover;
    -webkit-box-shadow: 0px 0px 12px 11px rgba(78, 190, 60, 1);
    -moz-box-shadow: 0px 0px 12px 11px rgba(78, 190, 60, 1);
    box-shadow: 0px 0px 12px 11px rgba(77, 190, 60, 0.523);
    border: 6px solid #ffffff;
    border-radius: 1em;
}

.modal-warcaby-body {
    padding: 20px;
    object-fit: cover;
    border: 6px solid #ffffff;
    border-radius: 1em;
}

.modal-body>img {
    width: auto;
    max-width: 50%;
    max-height: 300px;
    border-radius: 4px;
    opacity: 1;
}

.modal-backdrop {
    opacity: 0 !important;
}

.noai{
    max-width: 150px;
    height: auto;
}