/* Générateur de cartes Gigi le jeu qui rit
 * Tout est limité à .gigi-gen pour ne pas entrer en conflit avec le thème.
 */

.gigi-gen {
  /* Dos des paquets (à remplacer idéalement par des images de la médiathèque) */
  --gigi-dos-blue: url('https://imagizer.imageshack.com/img924/4223/SgigOX.jpg');
  --gigi-dos-red: url('https://imagizer.imageshack.com/img922/818/yORbzS.jpg');
  --gigi-dos-green: url('https://imagizer.imageshack.com/img923/2371/B1J4Ff.jpg');
  --gigi-dos-pink: url('https://imagizer.imageshack.com/img922/4355/WsvfHl.jpg');
  --gigi-dos-all: url('https://imagizer.imageshack.com/img921/9302/uB2eFu.jpg');

  --gigi-font: 'Kabouter', 'Montserrat', sans-serif; /* police déjà chargée par le thème */
  --gigi-gap: .5rem;
  /* Largeur d'une carte : s'adapte à la largeur ET à la hauteur de l'écran
     (portrait ou paysage), max 11.5rem comme l'original */
  --gigi-w: clamp(5rem, min(calc((100vw - 3rem) / 3.15), calc((100svh - 7rem) / 1.48)), 11.5rem);

  box-sizing: border-box;
  margin: 1.5rem auto 4rem; /* espace sous le bouton Mélanger */
}
.gigi-gen *, .gigi-gen *::before, .gigi-gen *::after { box-sizing: border-box; }

/* Couleurs par carte */
.gigi-gen [data-color="blue"]      { --c: rgb(49, 146, 208);  --dos: var(--gigi-dos-blue); }
.gigi-gen [data-color="red"]       { --c: rgb(232, 66, 59);   --dos: var(--gigi-dos-red); }
.gigi-gen [data-color="green"]     { --c: rgb(149, 194, 61);  --dos: var(--gigi-dos-green); }
.gigi-gen [data-color="turquoise"] { --c: rgb(0, 167, 178); }
.gigi-gen [data-color="pink"]      { --c: rgb(212, 94, 159);  --dos: var(--gigi-dos-pink); }
.gigi-gen [data-color="all"]       { --c: #9a9a9a;            --dos: var(--gigi-dos-all); } /* neutre avant la première pige */

/* Disposition : bleu + rouge sur une ligne, vert + turquoise, puis rose */
.gigi-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem calc(var(--gigi-gap) * 4);
  max-width: calc(var(--gigi-w) * 4 + var(--gigi-gap) * 6);
  margin: 0 auto;
}
.gigi-pile {
  display: grid;
  grid-template-columns: repeat(2, var(--gigi-w));
  gap: var(--gigi-gap);
}
.gigi-pile--3 { grid-template-columns: repeat(3, var(--gigi-w)); }

/* Écrans à l'horizontale (ordinateur, tablette ou cellulaire en paysage) :
   2 rangées au lieu de 3. Rangée 1 : bleu + rouge. Rangée 2 : vert + turquoise + rose.
   La taille des cartes est calculée pour que les 2 rangées tiennent dans la hauteur de l'écran. */
@media (orientation: landscape) and (min-width: 600px) {
  .gigi-gen {
    --gigi-w: clamp(5rem, min(calc((100vw - 5.5rem) / 5), calc((100svh - 5rem) / 2.96)), 11.5rem);
  }
  .gigi-board--classique {
    max-width: calc(var(--gigi-w) * 5 + var(--gigi-gap) * 7 + 2px);
  }
}

/* Paquet (dos de carte cliquable) */
.gigi-gen .gigi-deck {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  aspect-ratio: 11.5 / 17;
  border-radius: .5rem;
  background-color: var(--c);
  background-image: var(--dos);
  background-size: calc(100% + 1rem) calc(100% + 1rem);
  background-position: center;
  cursor: pointer;
  /* Ombre douce en couches, comme une vraie carte posée sur une table */
  box-shadow:
    0 1px 1px rgba(20, 30, 50, .06),
    0 2px 4px rgba(20, 30, 50, .06),
    0 8px 16px -4px rgba(20, 30, 50, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Couleur de secours du paquet mélangé si l'image ne charge pas */
.gigi-gen .gigi-deck[data-color="all"] { background-color: rgb(0, 167, 178); }
.gigi-gen .gigi-deck:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 2px rgba(20, 30, 50, .05),
    0 6px 10px rgba(20, 30, 50, .07),
    0 16px 28px -6px rgba(20, 30, 50, .16);
}
.gigi-gen .gigi-deck:active { transform: scale(.96); }
.gigi-gen .gigi-deck.is-pressed { animation: gigi-press .22s ease-out; }
@keyframes gigi-press {
  0%   { transform: scale(.94); }
  100% { transform: scale(1); }
}
.gigi-gen .gigi-deck:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }

/* Carte retournée */
.gigi-card {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 11.5 / 17;
  border: 2px solid var(--c);
  border-radius: .5rem;
  background: #fff;
  color: var(--c);
  box-shadow: 0 1px 2px rgba(20, 30, 50, .05), 0 4px 10px -2px rgba(20, 30, 50, .06);
  font-family: var(--gigi-font);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gigi-card--plain { border-style: dashed; }

/* « ? » dans les cartes vides, disparaît à la première pige */
.gigi-card:not(.is-filled)::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40cqw;
  line-height: 1;
  opacity: .35;
  pointer-events: none;
}
.gigi-card.is-filled.gigi-card--plain { border-style: solid; }

.gigi-pts {
  position: absolute;
  font-size: 20cqw;
  line-height: 1;
}
.gigi-pts--top { top: 5cqw; left: 7cqw; }
.gigi-pts--bottom { bottom: 5cqw; right: 7cqw; } /* chiffre du bas à l'endroit */

.gigi-text {
  margin: 0;
  padding: 0 8cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4cqw;
  text-align: center;
  font-size: 13cqw;
  line-height: .9;
  overflow-wrap: anywhere;
  visibility: hidden;
}
.gigi-card.is-long .gigi-text { font-size: 10cqw; }
.gigi-card.is-xlong .gigi-text { font-size: 8.5cqw; } /* mots très longs, ex. SUPPLÉMENTAIRE */
.gigi-card.is-filled .gigi-text { visibility: visible; }
.gigi-sep { font-size: .6em; letter-spacing: .1em; }

/* Animation de retournement */
.gigi-card.is-flip { animation: gigi-flip .35s ease-out; }
@keyframes gigi-flip {
  from { transform: rotateY(90deg); }
  to   { transform: rotateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .gigi-card.is-flip, .gigi-gen .gigi-deck.is-pressed { animation: none; }
  .gigi-gen .gigi-deck { transition: none; }
}

/* Bouton mélanger */
.gigi-actions { text-align: center; margin-top: 1.25rem; }
.gigi-gen .gigi-shuffle {
  all: unset;
  box-sizing: border-box;
  display: inline-block;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  background: rgb(49, 146, 208);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .15s ease;
}
.gigi-gen .gigi-shuffle:hover { background: rgb(36, 120, 175); }
.gigi-gen .gigi-shuffle:focus-visible { outline: 3px solid rgb(49, 146, 208); outline-offset: 3px; }