/* =====================================================================
   EVOLUTION (2048)
   Les tuiles sont positionnees par variables --x et --y : un changement
   de case devient un glissement, une fusion un petit rebond.
   ===================================================================== */

.jeu-2048 {
  --cote-2048: min(90vw, calc(100vh - 240px - var(--hauteur-manette, 0px)), 470px);
  --cote-2048: min(90vw, calc(100dvh - 240px - var(--hauteur-manette, 0px)), 470px);
  --ecart-2048: calc(var(--cote-2048) / 36);
  --case-2048: calc((var(--cote-2048) - 5 * var(--ecart-2048)) / 4);
  gap: 10px;
}

.entete-2048,
.barre-2048 {
  width: var(--cote-2048);
  min-width: min(90vw, 340px);
  flex-wrap: wrap;
  gap: 6px 14px;
}

.barre-2048 {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.barre-2048 .jeu-quitter:disabled {
  opacity: 0.4;
  cursor: default;
}

.annulations-2048 strong {
  color: var(--texte);
}

.message-2048 {
  min-height: 1.3em;
  font-family: var(--police-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-align: center;
}

.plateau-2048 {
  position: relative;
  width: var(--cote-2048);
  height: var(--cote-2048);
  /* Plateau de bois laque, comme un bento */
  background: linear-gradient(180deg, #4a3226 0%, #3a2519 100%);
  border: 2px solid #6e4a34;
  box-shadow: inset 0 2px 0 rgba(255, 220, 180, 0.18), 0 10px 0 #24160e, 0 14px 24px rgba(0, 0, 0, 0.35);
  border-radius: 14px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}

.fond-2048 {
  position: absolute;
  inset: var(--ecart-2048);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--ecart-2048);
}

.case-2048 {
  background-color: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(255, 220, 180, 0.12);
  border-radius: 10px;
}

.tuiles-2048 {
  position: absolute;
  inset: 0;
}

.tuile-2048 {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--case-2048);
  height: var(--case-2048);
  transform: translate(
    calc(var(--ecart-2048) + var(--x) * (var(--case-2048) + var(--ecart-2048))),
    calc(var(--ecart-2048) + var(--y) * (var(--case-2048) + var(--ecart-2048)))
  );
  transition: transform 0.11s ease-out;
  z-index: 2;
}

.tuile-2048.absorbee {
  z-index: 1;
}

.corps-2048 {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  /* Tuile en volume : plus claire en haut, une tranche sombre en bas */
  background-color: var(--fond-tuile);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.08) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -5px 0 rgba(0, 0, 0, 0.22), 0 3px 0 rgba(0, 0, 0, 0.3);
  color: var(--texte-tuile);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
}

.icone-2048 {
  width: 58%;
  height: auto;
  aspect-ratio: 1;
  margin-top: 4%;
  pointer-events: none;
}

.nombre-2048 {
  font-family: var(--police-affichage);
  font-stretch: var(--etroit);
  font-weight: 700;
  font-size: calc(var(--case-2048) * 0.2);
  line-height: 1;
  margin-bottom: 6%;
  font-variant-numeric: tabular-nums;
}

.tuile-2048[data-chiffres="4"] .nombre-2048 {
  font-size: calc(var(--case-2048) * 0.17);
}

.tuile-2048[data-chiffres="5"] .nombre-2048 {
  font-size: calc(var(--case-2048) * 0.17);
}

/* Une nouvelle tuile pousse, une fusion rebondit : on voit ce qui a change */
.tuile-2048.apparait .corps-2048 {
  animation: apparait-2048 0.16s ease-out 0.06s backwards;
}

.tuile-2048.fusion .corps-2048 {
  animation: fusion-2048 0.18s ease-out;
}

@keyframes apparait-2048 {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fusion-2048 {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* Plus aucun coup : le plateau s'eteint */
.plateau-2048.bloque .tuiles-2048 {
  opacity: 0.45;
  transition: opacity 0.4s;
}

/* ===== Carnet ===== */
.carnet-2048 {
  position: absolute;
  inset: 0;
  z-index: 5;
  background-color: var(--fond-profond);
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 10px;
  overflow-y: auto;
}

.carnet-2048[hidden] {
  display: none;
}

.carnet-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carnet-titre {
  font-family: var(--police-affichage);
  font-weight: 800;
  font-stretch: var(--etroit);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--accent);
}

.carnet-liste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
}

.carnet-entree {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--bord);
}

.carnet-entree .icone-2048 {
  width: 26px;
  grid-row: span 2;
}

.carnet-nom {
  font-family: var(--police-texte);
  font-size: 0.78rem;
  color: var(--texte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carnet-jp {
  font-size: 0.72rem;
  color: #e0574b;
}

.carnet-nombre {
  grid-row: 1 / span 2;
  grid-column: 3;
  font-family: var(--police-mono);
  font-size: 0.6rem;
  color: var(--texte-sourd);
}

/* Un palier pas encore atteint : une silhouette sans couleur */
.carnet-entree.inconnue .icone-2048 {
  filter: brightness(0) invert(0.25);
}

.carnet-entree.inconnue .carnet-nom {
  color: var(--texte-eteint);
}

@media (max-width: 560px) {
  .barre-2048 {
    justify-content: center;
  }

  .barre-2048 .jeu-quitter {
    padding: 7px 9px;
    font-size: 0.6rem;
  }

  .entete-2048 .jeu-score strong {
    font-size: 1.5rem;
  }

  .entete-2048 .jeu-score.score-principal .valeur-score {
    font-size: 1.9rem;
  }
}

/* Le gain d'une fusion, qui monte au-dessus de la tuile */
.gain-2048 {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--case-2048);
  text-align: center;
  z-index: 4;
  pointer-events: none;
  font-family: var(--police-affichage);
  font-weight: 800;
  font-size: calc(var(--case-2048) * 0.26);
  color: #ffffff;
  -webkit-text-stroke: 4px #2a1a12;
  paint-order: stroke fill;
  transform: translate(
    calc(var(--ecart-2048) + var(--x) * (var(--case-2048) + var(--ecart-2048))),
    calc(var(--ecart-2048) + var(--y) * (var(--case-2048) + var(--ecart-2048)))
  );
  animation: gain-2048 0.75s ease-out forwards;
}

@keyframes gain-2048 {
  from { opacity: 1; margin-top: 0; }
  to { opacity: 0; margin-top: calc(var(--case-2048) * -0.7); }
}

/* 2048 atteint : confettis et carte de felicitations */
.fete-2048 {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  display: grid;
  place-items: center;
  background-color: rgba(20, 12, 8, 0.55);
}

.fete-2048 i {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: confetti-2048 1.8s ease-in forwards;
}

@keyframes confetti-2048 {
  to { transform: translate(var(--derive), calc(var(--cote-2048) + 30px)) rotate(var(--tour)); }
}

.fete-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 78%;
  padding: 18px 16px;
  text-align: center;
  background-color: #fbf1de;
  border: 4px solid #c8372d;
  border-radius: 18px;
  color: #3a2030;
  animation: fusion-2048 0.4s ease-out;
}

.fete-carte img {
  width: 34%;
}

.fete-carte strong {
  font-family: var(--police-affichage);
  font-weight: 800;
  font-size: 1.7rem;
  color: #c8372d;
}

.fete-carte span {
  font-family: var(--police-texte);
  font-size: 0.85rem;
}

.fete-carte .jeu-quitter {
  color: #3a2030;
  border-color: #c8372d;
}