/* css/styles.css */

body {
  font-family: Arial, sans-serif;
//  background-color: #f0f0f0;
  background: url('../images/background.jpg') no-repeat center center fixed;
  background-size: cover;
  text-align: center;
  margin: 0;
  padding: 20px;
}


h1 {
  margin-bottom: 20px;
}

#newGame {
  margin-bottom: 20px;
  padding: 10px 20px;
  font-size: 16px;
}

/* Flex kontejner pro umístění odkládacích polí vlevo a vpravo od herní plochy */
.game-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  
}

/* Herní plocha – mřížka 5×4 (celkem 20 karet) */
.pexeso-board {
  display: grid;
  grid-template-columns: repeat(6, 160px);
  grid-gap: 10px;
  margin: 0 20px; /* mezera mezi herní plochou a odkládacími kontejnery */
}

/* Odkládací sloty – kontejner se 5 sloty uspořádanými vertikálně.
   Sloty budou mít 126x126px, aby jejich celková výška odpovídala výšce herní plochy. */
.matched-slots-container {
  display: grid;
  grid-template-rows: repeat(5, 102px);
  grid-gap: 10px;
}

/* Vzhled jednotlivého slotu */
.matched-slot {
  width: 105px;
  height: 105px;
  border: 2px dashed #ccc;
//  background-color: #fff;
  background-size: cover;
}

/* Styl karet */
.card {
  width: 160px;
  height: 160px;
  perspective: 1000px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 
}

.card:hover
{

}


.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Zadní strana karty – společná textura */
.card-back {
  background-image: url('../images/card_back.png');
  background-size: cover;
}

/* Přední strana karty – zobrazí termín nebo definici */
.card-front {
  background-size: cover;
  transform: rotateY(180deg);
}

.newgame
{
position:fixed;
top:10px;
right:10px;

background-color: black;
border: 1px solid #eeeeee;
color: #eeeeee;
}

.start-middle
{
width: 100%;
    z-index: 10;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

.inside-start
{
width: 640px;
    left: 50%;
    position: absolute;
    margin-left: -320px;
}

.pocitadlo
{
position: absolute;
bottom: 10px;
color: #eeeeee;
}