/* ================================
   VARIABLES : tailles des cartes
   ================================ */
:root {
  --card-w: 80px;
  --card-h: 120px;
  --scale-grid: 1;
}

/* Réduction automatique sur écrans moyens */
@media (max-width: 700px) {
  :root {
    --card-w: 60px;
    --card-h: 90px;
    --scale-grid: 0.8;
  }
}

/* Réduction automatique sur petits écrans */
@media (max-width: 500px) {
  :root {
    --card-w: 48px;
    --card-h: 72px;
    --scale-grid: 0.65;
  }
}

/* ================================
   TABLE DE JEU
   ================================ */
body {
  background: white;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh; /* hauteur réelle utile */
}

#table {
  width: min(800px, 95vw);
  height: min(600px, 95dvh);

  background: #0a5f2c;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  margin: auto;
}

/* ================================
   GRILLE 3×3 (scalable)
   ================================ */
#grid {
  width: calc(3 * var(--card-w) + 2 * 20px);
  height: calc(3 * var(--card-h) + 2 * 20px);

  display: grid;
  grid-template-columns: repeat(3, var(--card-w));
  grid-template-rows: repeat(3, var(--card-h));
  gap: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -55%) scale(var(--scale-grid));
  transform-origin: top left;
}

/* ================================
   PILES
   ================================ */
.pile {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 6px;
  position: relative;

  border: 2px solid yellow; /* debug */
}

/* ================================
   TALON (coin inférieur droit)
   ================================ */
#stock {
  position: absolute;
  bottom: 20px;
  right: 20px;

  width: var(--card-w);
  height: var(--card-h);
  border-radius: 6px;

  border: 2px solid yellow; /* debug */
}

/* ================================
   CARTES
   ================================ */
.card {
  width: var(--card-w);
  height: var(--card-h);
  background-size: cover;
  border-radius: 6px;

  position: absolute;
  top: 0;
  left: 0;

  cursor: pointer;
  transition: transform 0.2s;
}

.card.facedown {
  /* image de dos appliquée en JS */
}