/* ===============================
   Dés en 3D communs (421, Yahtzee) — voir js/des-3d.js
   Taille réglable par jeu avec --taille-de sur la piste (56px par défaut).
   =============================== */

/* Piste de casino : feutre vert dans un cadre en bois, vue en perspective.
   Le plateau est dessiné par ::before, incliné en 3D ; les dés restent sur
   un calque plat au-dessus, pour garder leur propre vue plongeante. */
.piste-des {
  position: relative;
  isolation: isolate; /* le plateau (z-index -1) reste derrière les dés */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--taille-de, 56px) * 0.46);
  min-height: calc(var(--taille-de, 56px) * 2.3);
  padding: 28px 22px 26px;
  margin-bottom: 14px; /* place pour l'épaisseur et l'ombre du plateau */
}
.piste-des::before {
  content: "";
  position: absolute;
  inset: -6px 0 0;
  z-index: -1;
  border: 14px solid transparent;
  border-radius: 80px;
  background:
    /* feutre : grain du tissu, zone éclairée au centre */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E")
      padding-box,
    radial-gradient(ellipse at 50% 45%, #27a860 0%, #178044 50%, #0c522b 100%) padding-box,
    /* cadre : veines du bois, éclairé par le haut */
    repeating-linear-gradient(100deg, #0000 0 6px, #00000018 6px 8px, #0000 8px 13px, #ffffff0d 13px 14px)
      border-box,
    linear-gradient(180deg, #a86434 0%, #7a4220 40%, #55290f 100%) border-box;
  box-shadow:
    /* biseau du cadre et ombre qu'il projette sur le feutre */
    inset 0 0 0 1px #0006,
    inset 0 12px 18px -4px #000c,
    inset 0 -3px 8px #0005,
    /* liseré doré, épaisseur du cadre à l'avant, ombre sur la table */
    0 0 0 2px #c9a24a,
    0 9px 0 1px #3d1d09,
    0 10px 0 2px #2a1306,
    0 22px 26px 2px #0006;
  transform: perspective(700px) rotateX(30deg);
  transform-origin: 50% 60%;
}

/* Emplacement d'un dé sur la piste */
.de3d-place {
  --taille: var(--taille-de, 56px);
  position: relative;
  display: flex;
  justify-content: center;
  transition: transform 0.3s;
}
/* Ombre du dé sur le feutre */
.de3d-place::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--taille) * -0.14);
  width: calc(var(--taille) * 1.07);
  height: calc(var(--taille) * 0.4);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #000a 0%, #0000 70%);
}

/* Le dé : .de3d porte la perspective, .de3d-cube tourne, 6 faces autour */
.de3d {
  position: relative;
  z-index: 1;
  width: var(--taille);
  height: var(--taille);
  perspective: calc(var(--taille) * 5.7);
  transition: transform 0.15s;
  user-select: none;
}
.de3d.cliquable {
  cursor: pointer;
}
.de3d.cliquable:hover {
  transform: translateY(-3px);
}
.de3d.garde {
  transform: translateY(-6px);
}
.de3d.garde.cliquable:hover {
  transform: translateY(-8px);
}
.de3d-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--duree, 1000ms) cubic-bezier(0.15, 0.6, 0.25, 1);
}
.de3d-face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: calc(var(--taille) * 0.125);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: linear-gradient(145deg, #fff 0%, #ececec 100%);
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  box-shadow: inset 0 0 6px #0000001f;
  backface-visibility: hidden;
  transition:
    background 0.15s,
    border-color 0.15s,
    filter var(--duree, 1000ms) ease-out;
}
/* Cube intérieur : bouche les coins arrondis vus de biais */
.de3d-coeur {
  position: absolute;
  inset: 2px;
  background: #9d9d9d; /* sombre : les arêtes se lisent comme de l'ombre */
}
.de3d.garde .de3d-face {
  background: linear-gradient(145deg, #f2fff2 0%, #cdeecd 100%);
  border-color: #1a7e1a;
}
.de3d.garde .de3d-coeur {
  background: #7fb97f;
}
.de3d-point {
  width: calc(var(--taille) * 0.18);
  height: calc(var(--taille) * 0.18);
  background: radial-gradient(circle at 35% 35%, #555 0%, #111 70%);
  border-radius: 50%;
  justify-self: center;
  align-self: center;
  transition: opacity 0.2s;
}
/* En attente du lancer : les dés précédents restent visibles, estompés */
.de3d.vide .de3d-point {
  opacity: 0.45;
}

/* Lancer : le dé part de --x0/--y0 (côté du lanceur), vole en arc,
   touche le feutre puis fait deux petits rebonds */
.de3d.roule {
  animation: de3d-lancer var(--duree, 1000ms) ease-out;
}
@keyframes de3d-lancer {
  0% {
    transform: translate(var(--x0), var(--y0)) scale(var(--s0));
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  30% {
    transform: translate(calc(var(--x0) * 0.4), calc(var(--y0) * 0.35 - 22px)) scale(1.08);
  }
  48% {
    transform: translate(calc(var(--x0) * 0.1), 0);
  }
  63% {
    transform: translate(calc(var(--x0) * 0.04), -10px);
  }
  75% {
    transform: translate(0, 0);
  }
  87% {
    transform: translate(0, -3px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .de3d.roule {
    animation: none;
  }
  .de3d-cube {
    transition: none;
  }
}