/* ================= RESET ================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* ================= BODY ================= */

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at top, #2b2d42, #0f1020);
}

/* ================= GAME CARD ================= */

.game-container {
  background: #faf8ef;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}

/* ================= HEADER ================= */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.header h1 {
  font-size: 48px;
  color: #776e65;
}

.score {
  background: #bbada0;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: bold;
}

/* ================= GRID WRAPPER ================= */

.grid-wrapper {
  position: relative;
  width: 390px;
  height: 390px;
  background: #bbada0;
  border-radius: 15px;
  padding: 10px;
}


/* ================= GRID BACKGROUND ================= */

.grid-background {
  display: grid;
  grid-template-columns: repeat(5, 70px);
  grid-template-rows: repeat(5, 70px);
  gap: 10px;
}

.grid-cell {
  background: rgba(238, 228, 218, 0.35);
  border-radius: 10px;
}

/* ================= TILES LAYER ================= */

#tiles {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 290px;
  height: 290px;
}

/* ================= TILE ================= */

.tile {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden; /* OBLIGATOIRE */

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  font-weight: bold;
  color: #776e65;

  background: #eee4da;

  transition: transform 0.15s ease-in-out;
}

/* ================= TILE COLORS ================= */

.tile[data-value="2"]   { background: #eee4da; }
.tile[data-value="4"]   { background: #ede0c8; }
.tile[data-value="8"]   { background: #f2b179; color: #fff; }
.tile[data-value="16"]  { background: #f59563; color: #fff; }
.tile[data-value="32"]  { background: #f67c5f; color: #fff; }
.tile[data-value="64"]  { background: #f65e3b; color: #fff; }
.tile[data-value="128"] { background: #edcf72; color: #fff; }
.tile[data-value="256"] { background: #edcc61; color: #fff; }
.tile[data-value="512"] { background: #edc850; color: #fff; }
.tile[data-value="1024"]{ background: #edc53f; color: #fff; }
.tile[data-value="2048"]{
  background: #edc22e;
  color: #fff;
}

/* ================= IMAGES (AJOUT, RIEN SUPPRIMÉ) ================= */

.tile {
  background-size: contain;        /* 🔥 image jamais coupée */
  background-position: center;
  background-repeat: no-repeat;

  padding: 6px;                    /* marge interne */
  background-clip: content-box;    /* empêche débordement */

  color: transparent;              /* cache le chiffre */
}

/* IMAGES PAR VALEUR */

.tile[data-value="2"] {
  background-image: url("images/2.png");
}

.tile[data-value="4"] {
  background-image: url("images/4.png");
}

.tile[data-value="8"] {
  background-image: url("images/8.png");
}

.tile[data-value="16"] {
  background-image: url("images/16.png");
}

.tile[data-value="32"] {
  background-image: url("images/32.png");
}

.tile[data-value="64"] {
  background-image: url("images/64.png");
}

.tile[data-value="128"] {
  background-image: url("images/128.png");
}

.tile[data-value="256"] {
  background-image: url("images/256.png");
}

.tile[data-value="512"] {
  background-image: url("images/512.png");
}

.tile[data-value="1024"] {
  background-image: url("images/1024.png");
}

.tile[data-value="2048"] {
  background-image: url("images/2048.png");
}



/* ================= BUTTON ================= */

button {
  margin-top: 15px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: #8f7a66;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}

/* ================= ANIM APPARITION ================= */

@keyframes pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.tile.new {
  animation: pop 0.25s ease-out;
}

/* ================= ANIM MERGE ================= */

@keyframes merge {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.tile.merge {
  animation: merge 0.18s ease-out;
}

/* ================= SHAKE ================= */

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

.grid-wrapper.shake {
  animation: shake 0.2s ease;
}

/* ================= GLOW ================= */

.tile[data-value="128"],
.tile[data-value="256"],
.tile[data-value="512"],
.tile[data-value="1024"],
.tile[data-value="2048"] {
  box-shadow: 0 0 18px rgba(255, 200, 0, 0.6);
}
/* ================= FIX IMAGE COUPÉE ================= */

/* on enlève toute influence directe */
.tile {
  background-image: none !important;
  overflow: hidden; /* sécurité */
}

/* image réelle */
.tile::before {
  content: "";
  position: absolute;
  inset: 1px; /* marge interne propre */

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  border-radius: 8px;
}

/* images par valeur */
.tile[data-value="2"]::before    { background-image: url("images/2.png"); }
.tile[data-value="4"]::before    { background-image: url("images/4.png"); }
.tile[data-value="8"]::before    { background-image: url("images/8.png"); }
.tile[data-value="16"]::before   { background-image: url("images/16.png"); }
.tile[data-value="32"]::before   { background-image: url("images/32.png"); }
.tile[data-value="64"]::before   { background-image: url("images/64.png"); }
.tile[data-value="128"]::before  { background-image: url("images/128.png"); }
.tile[data-value="256"]::before  { background-image: url("images/256.png"); }
.tile[data-value="512"]::before  { background-image: url("images/512.png"); }
.tile[data-value="1024"]::before { background-image: url("images/1024.png"); }
.tile[data-value="2048"]::before { background-image: url("images/2048.png"); }
/* ================= IMAGE FULL CASE ================= */

.tile::before {
  content: "";
  position: absolute;
  inset: 0; /* PREND 100% DE LA CASE */

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* REMPLIT TOUTE LA CASE */

  border-radius: 10px; /* même radius que la tuile */
}

/* ================= GAME OVER ================= */

.game-over {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
}

.game-over.hidden {
  display: none;
}

.game-over-content {
  background: #faf8ef;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  animation: pop 0.4s ease;
}

.game-over-content img {
  width: 160px;
  margin-bottom: 15px;
}

.game-over-content h2 {
  font-size: 36px;
  color: #776e65;
  margin-bottom: 15px;
}

/* ================= ULTRA POLISH VISUEL (AJOUT) ================= */

/* Effet carte flottante */
.game-container {
  position: relative;
  transform: translateY(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.game-container:hover {
  transform: translateY(-6px);
  box-shadow: 0 35px 80px rgba(0,0,0,0.45);
}

/* Bord lumineux subtil autour de la grille */
.grid-wrapper::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.25),
    rgba(255,200,0,0.25),
    rgba(255,255,255,0.15)
  );
  z-index: -1;
  filter: blur(8px);
}

/* Effet glass sur le score */
.score {
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25),
              0 10px 20px rgba(0,0,0,0.25);
}

/* Tiles plus vivantes */
.tile {
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.35),
    inset 0 -2px 6px rgba(0,0,0,0.25),
    0 10px 18px rgba(0,0,0,0.35);
}

/* Hover très léger (desktop) */
.tile:hover {
  transform: scale(1.03);
}

/* Animation fluide lors des déplacements */
.tile {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/* Game Over encore plus impactant */
.game-over {
  animation: fadeIn 0.35s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.game-over-content {
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}

/* Bouton plus premium */
button {
  background: linear-gradient(135deg, #9c8570, #7b6654);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

button:active {
  transform: scale(0.96);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* =========================================================
   ULTIMATE GAME POLISH – NIVEAU PRO (AJOUT SEULEMENT)
   ========================================================= */

/* ----- AMBIANCE GLOBALE ----- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,200,0,0.08), transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* ----- GAME CARD CINÉMATIQUE ----- */
.game-container {
  position: relative;
  isolation: isolate;
}

.game-container::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.25),
    rgba(255,200,0,0.25),
    rgba(255,255,255,0.15)
  );
  z-index: -1;
  filter: blur(12px);
}

/* ----- GRILLE PLUS PROFONDE ----- */
.grid-wrapper {
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.25),
    inset 0 -4px 10px rgba(0,0,0,0.35),
    0 30px 70px rgba(0,0,0,0.5);
}

/* ----- CELLULES FOND PLUS RICHES ----- */
.grid-cell {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.18),
      rgba(0,0,0,0.08)
    );
}

/* ----- TUILES ULTRA PREMIUM ----- */
.tile {
  will-change: transform;
  transform-style: preserve-3d;

  box-shadow:
    inset 0 3px 6px rgba(255,255,255,0.45),
    inset 0 -4px 10px rgba(0,0,0,0.35),
    0 18px 28px rgba(0,0,0,0.45);
}

/* relief 3D subtil */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.35),
    transparent 45%,
    rgba(0,0,0,0.25)
  );
  pointer-events: none;
}

/* ----- IMPACT VISUEL DES GROS TILES ----- */
.tile[data-value="128"],
.tile[data-value="256"],
.tile[data-value="512"],
.tile[data-value="1024"],
.tile[data-value="2048"] {
  box-shadow:
    0 0 25px rgba(255,200,0,0.6),
    0 20px 40px rgba(0,0,0,0.55);
}

/* ----- MERGE PLUS SATISFAISANT ----- */
.tile.merge {
  animation: mergeUltimate 0.22s ease-out;
}

@keyframes mergeUltimate {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35) rotateZ(1deg); }
  100% { transform: scale(1); }
}

/* ----- APPARITION PLUS DYNAMIQUE ----- */
.tile.new {
  animation: popUltimate 0.3s cubic-bezier(.25,1.4,.5,1);
}

@keyframes popUltimate {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  70% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* ----- SCORE PLUS PRESTIGE ----- */
.score {
  position: relative;
  overflow: hidden;
}

.score::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  transform: translateX(-100%);
  animation: shine 3s infinite;
}

@keyframes shine {
  to {
    transform: translateX(100%);
  }
}

/* ----- GAME OVER CINÉMATIQUE ----- */
.game-over {
  animation: gameOverFade 0.45s ease forwards;
}

@keyframes gameOverFade {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
  }
}

.game-over-content {
  transform: scale(0.85);
  animation: gameOverPop 0.45s cubic-bezier(.2,1.4,.4,1) forwards;
}

@keyframes gameOverPop {
  to {
    transform: scale(1);
  }
}

/* ----- BOUTON FINAL BOSS ----- */
button {
  position: relative;
  overflow: hidden;
}

button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top left,
    rgba(255,255,255,0.35),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

button:hover::after {
  opacity: 1;
}

/* =========================================================
   ✅ FIX DÉFINITIF 5x5 – PLUS AUCUN DÉBORDEMENT
   ========================================================= */

/* 🔧 paramètres globaux */
:root {
  --grid-size: 5;
  --gap: 10px;
}

/* ----- GRID WRAPPER AUTO ----- */
.grid-wrapper {
  width: calc(70px * var(--grid-size) + var(--gap) * (var(--grid-size) - 1) + 20px);
  height: calc(70px * var(--grid-size) + var(--gap) * (var(--grid-size) - 1) + 20px);
}

/* ----- GRILLE DE FOND ----- */
.grid-background {
  grid-template-columns: repeat(var(--grid-size), 1fr);
  grid-template-rows: repeat(var(--grid-size), 1fr);
  width: 100%;
  height: 100%;
}

/* ----- CELLULES ----- */
.grid-cell {
  width: 100%;
  height: 100%;
}

/* ----- LAYER DES TUILES ----- */
#tiles {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

/* ----- TUILES RESPONSIVE ----- */
.tile {
  width: calc(
    (100% - (var(--grid-size) - 1) * var(--gap))
    / var(--grid-size)
  );
  height: calc(
    (100% - (var(--grid-size) - 1) * var(--gap))
    / var(--grid-size)
  );
}

/* ----- IMAGE = 100% DE LA CASE ----- */
.tile::before {
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.top-controls {
  position: fixed;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 10px;
  z-index: 1000;
}

.top-controls button {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
  font-size: 18px;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.3s ease, transform 0.2s ease;
}

.top-controls button:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.05);
}

.game-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}
.game-container {
  transition: opacity 0.4s ease, transform 0.4s ease;
}