/* Hand Display Styles */

.hand-display {
  margin-bottom: 30px;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 30px;
  align-items: start;
}

.hand-label {
  color: #ffffff;
  margin: 0;
  font-size: 1.2rem;
  white-space: nowrap;
}

.hand-tiles {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 3px;
  flex: 0 0 auto;
}

.hand-tile-item {
  padding: 0;
  text-align: center;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease;
}

/* Effet hover seulement sur la main interactive */
#interactive-hand .hand-tile-item:hover {
  transform: translateY(-10px);
}

/* Hand container - gère l'affichage des tuiles et du draw */
.hand-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.hand-tile-item.draw-tile {
  /* Le draw s'affiche simplement à droite grâce à flex */
  flex: 0 0 auto;
}

/* Orientation variations */
.hand-display.vertical {
  grid-template-columns: 100px 1fr;
}

.hand-display.horizontal {
  grid-template-columns: 1fr;
}

.hand-display.horizontal .hand-label {
  grid-column: 1;
  margin-bottom: 10px;
}

.hand-display.horizontal .hand-tiles {
  grid-column: 1;
}

/* Position variations */
.hand-display.left-label {
  grid-template-columns: 100px 1fr;
}

.hand-display.top-label {
  grid-template-columns: 1fr;
}

.hand-display.top-label .hand-label {
  grid-column: 1;
  margin-bottom: 10px;
}

.hand-display.top-label .hand-tiles {
  grid-column: 1;
}

/* Tilt variations */
.hand-display.tilt-left {
  transform: rotate(90deg);
  transform-origin: center;
}

.hand-display.tilt-right {
  transform: rotate(-90deg);
  transform-origin: center;
}

.hand-display.tilt-upside-down {
  transform: rotate(180deg);
  transform-origin: center;
}

.hand-display.tilt-none {
  transform: rotate(0deg);
  transform-origin: center;
}