/* =====================================================================
   Jeu du Pendu
   ===================================================================== */
#pd-root {
  --ink: #17142e;
  --doux: #6c6a88;
  --violet: #7c5cff;
  --violet-fonce: #5b3ee6;
  --vert: #16a34a;
  --rouge: #e0365a;
  --ambre: #f59e0b;
  --bord: #e6e2f0;
  --fond: #f7f6fc;
  /* Barre commune (css/games.css) : couleurs du site par défaut */
  --mg-jeu-largeur: 784px;
  --mg-fs-fond: radial-gradient(ellipse at top, #2c2660, #17142e 70%);

  position: relative;
  color: var(--ink);
}
#pd-root,
#pd-root * {
  font-family:
    "Outfit",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
/* Le site colore tous les <b> : ici ils gardent la couleur du texte */
#pd-root b {
  color: inherit;
}
#pd-root *,
#pd-root *::before,
#pd-root *::after {
  box-sizing: border-box;
}

/* ---------- Catégories ---------- */
#pd-root .pd-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
#pd-root .pd-cat {
  margin: 0;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: #fff;
  color: #4a4566;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    transform 0.15s;
}
#pd-root .pd-cat:hover {
  border-color: var(--violet);
  transform: translateY(-1px);
}
#pd-root .pd-cat[aria-checked="true"] {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(124, 92, 255, 0.9);
}

/* ---------- Plateau ---------- */
#pd-root .pd-plateau {
  position: relative;
  overflow: hidden;
  padding: 20px 22px 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--bord);
  box-shadow:
    0 2px 6px rgba(23, 20, 46, 0.05),
    0 24px 48px -28px rgba(23, 20, 46, 0.35);
  transition:
    box-shadow 0.4s,
    border-color 0.4s;
}
#pd-root.gagne .pd-plateau {
  border-color: #b7e8c8;
  box-shadow:
    0 0 0 4px rgba(22, 163, 74, 0.12),
    0 24px 48px -28px rgba(23, 20, 46, 0.35);
}
#pd-root.perdu .pd-plateau {
  border-color: #f4c2cd;
}
#pd-root .pd-plateau.secoue {
  animation: pd-secoue 0.4s;
}
@keyframes pd-secoue {
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}

/* Hauteurs fixes partout : rien ne bouge pendant la partie ni d'un mot à l'autre */
#pd-root .pd-haut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 180px;
}
#pd-root .pd-etat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
}
#pd-root .pd-categorie {
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pd-root .pd-categorie small {
  font-weight: 500;
  color: var(--doux);
  font-size: 0.85rem;
}
#pd-root .pd-vies {
  font-size: 0.9rem;
  color: var(--doux);
}
#pd-root .pd-vies b {
  color: var(--ink);
}
#pd-root .pd-jauge {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  margin-top: 5px;
}
#pd-root .pd-jauge i {
  height: 8px;
  border-radius: 4px;
  background: #e8f6ee;
  transition: background 0.3s;
}
#pd-root .pd-jauge i.pris {
  background: var(--rouge);
}
#pd-root .pd-jauge[data-danger="1"] i.pris {
  animation: pd-clignote 0.9s infinite alternate;
}
@keyframes pd-clignote {
  to {
    opacity: 0.45;
  }
}
#pd-root .pd-ratees {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  height: 56px; /* deux lignes réservées */
  align-content: flex-start;
}
#pd-root .pd-ratees span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 26px;
  border-radius: 6px;
  background: #fdecef;
  color: var(--rouge);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: line-through;
  animation: pd-pop 0.3s;
}

/* ---------- Dessin ---------- */
#pd-root .pd-dessin svg {
  display: block;
  width: 180px;
  height: 180px;
  overflow: visible;
}
#pd-root .pd-dessin line,
#pd-root .pd-dessin circle,
#pd-root .pd-dessin path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#pd-root .pd-fantome {
  stroke: #eeecf6;
  stroke-width: 5px;
  stroke-dasharray: 0.04 0.06;
}
/* Partie finie : le fantôme s'efface (il ne suit pas le balancement) */
#pd-root.perdu .pd-fantome,
#pd-root.gagne .pd-fantome {
  opacity: 0;
  transition: opacity 0.4s;
}
#pd-root .pd-trait {
  stroke: var(--ink);
  stroke-width: 5px;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition:
    stroke-dashoffset 0.55s ease-out,
    stroke 0.4s;
}
#pd-root .pd-trait.t0,
#pd-root .pd-trait.t1,
#pd-root .pd-trait.t2 {
  stroke: #8a6a4a; /* bois */
}
#pd-root .pd-trait.t3 {
  stroke: #b08d57; /* corde */
  stroke-width: 3px;
}
#pd-root .pd-trait.on {
  stroke-dashoffset: 0;
}
/* Trait pas encore dessiné : caché, sinon son bout arrondi laisse un point
   (visible sur la tête, dont le tracé commence à droite du cercle) */
#pd-root .pd-trait:not(.on) {
  visibility: hidden;
}
#pd-root.perdu .pd-balance .pd-trait {
  stroke: var(--rouge);
}
#pd-root .pd-balance {
  transform-box: view-box;
  transform-origin: 152px 16px;
}
#pd-root.perdu .pd-balance {
  animation: pd-balance 2.4s ease-in-out infinite;
}
@keyframes pd-balance {
  0%,
  100% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
}
#pd-root .pd-yeux,
#pd-root .pd-sourire {
  opacity: 0;
  transition: opacity 0.3s 0.4s;
}
#pd-root .pd-yeux path {
  stroke: var(--rouge);
  stroke-width: 2.4px;
}
#pd-root .pd-sourire path {
  stroke: var(--vert);
  stroke-width: 2.4px;
}
#pd-root .pd-sourire circle {
  fill: var(--vert);
}
#pd-root.perdu.tete .pd-yeux,
#pd-root.gagne.tete .pd-sourire {
  opacity: 1;
}
/* Tête pleine : pendant le saut, la corde (fixe) passe derrière elle */
#pd-root .pd-trait.t4 {
  fill: #fff;
}
#pd-root.gagne .pd-corps {
  animation: pd-saute 0.5s ease-in-out 3;
}
@keyframes pd-saute {
  50% {
    transform: translateY(-8px);
  }
}

/* ---------- Mot à deviner ---------- */
#pd-root .pd-mot-zone {
  container-type: inline-size;
  display: flex;
  align-items: center;
  height: 60px; /* case la plus haute : 48 × 60 */
  margin: 18px 0 6px;
}
#pd-root .pd-mot {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 48px));
  justify-content: center;
  gap: clamp(3px, 1.2cqi, 8px);
  font-size: min(1.9rem, calc(62cqi / var(--n)));
  perspective: 600px;
}
#pd-root .pd-case {
  position: relative;
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.3, 1.5, 0.55, 1) var(--d, 0s);
  animation: pd-arrivee 0.4s backwards;
  animation-delay: calc(var(--i) * 0.035s);
}
@keyframes pd-arrivee {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
#pd-root .pd-case.vue {
  transform: rotateY(180deg);
}
#pd-root .pd-face,
#pd-root .pd-dos {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  backface-visibility: hidden;
  font-weight: 800;
}
#pd-root .pd-face {
  background: var(--fond);
  border: 2px dashed #d6d2ea;
}
#pd-root .pd-dos {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #8d72ff, var(--violet-fonce));
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(91, 62, 230, 0.9);
}
#pd-root .pd-case.indice .pd-dos {
  background: linear-gradient(160deg, #fbbf24, #d97706);
}
#pd-root .pd-case.manquee .pd-dos {
  background: #fdecef;
  color: var(--rouge);
  border: 2px solid #f4c2cd;
  box-shadow: none;
}
#pd-root.gagne .pd-case .pd-dos {
  animation: pd-vague 0.5s calc(0.6s + var(--i) * 0.06s);
}
@keyframes pd-vague {
  50% {
    transform: rotateY(180deg) translateY(-10px);
  }
}

/* ---------- Message ---------- */
#pd-root .pd-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 6px;
  height: 3.2em; /* deux lignes au plus, phrase de fin comprise */
  overflow: hidden;
  margin: 6px 0 10px;
  padding: 0 14px;
  border-radius: 14px;
  line-height: 1.3;
  font-size: 1.05rem;
  color: var(--doux);
  text-align: center;
}
#pd-root .pd-msg-bon,
#pd-root .pd-msg-rate,
#pd-root .pd-msg-indice {
  animation: pd-pop 0.3s;
  font-weight: 600;
}
#pd-root .pd-msg-bon {
  color: var(--vert);
}
#pd-root .pd-msg-rate {
  color: var(--rouge);
}
#pd-root .pd-msg-indice {
  color: #b45309;
}
#pd-root .pd-msg-fin {
  color: var(--ink);
  animation: pd-pop 0.4s;
}
#pd-root .pd-msg-gagne {
  background: #e9f8ef;
}
#pd-root .pd-msg-gagne > b:first-child {
  color: var(--vert);
}
#pd-root .pd-msg-perdu {
  background: #fdecef;
}
#pd-root .pd-msg-perdu > b:first-child {
  color: var(--rouge);
}
/* Fin de partie, par-dessus le clavier (qui ne sert plus) */
#pd-root .pd-bas {
  position: relative;
}
#pd-root .pd-fin {
  position: absolute;
  inset: -6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  animation: pd-pop 0.4s 0.3s backwards;
}
#pd-root .pd-fin[hidden] {
  display: none;
}
#pd-root .pd-badge {
  padding: 3px 12px;
  border-radius: 999px;
  background: #fff3df;
  color: #b45309;
  font-weight: 700;
  font-size: 0.9rem;
}
#pd-root .pd-rejouer {
  position: relative;
  overflow: hidden;
  margin: 4px 0 0;
  min-height: 46px;
  padding: 10px 24px;
  font-size: 1.05rem;
}
/* Compte à rebours : le bouton se remplit de gauche à droite */
#pd-root .pd-rejouer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.28);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
#pd-root .pd-rejouer.compte::before {
  animation: pd-compte var(--delai, 3s) linear forwards;
}
@keyframes pd-compte {
  to {
    transform: scaleX(1);
  }
}
@keyframes pd-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

/* ---------- Clavier ---------- */
#pd-root .pd-clavier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#pd-root .pd-ligne {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
#pd-root .pd-touche {
  flex: 0 1 46px;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #efecfb;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(23, 20, 46, 0.12);
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.1s,
    opacity 0.2s;
}
#pd-root .pd-touche:hover:not(:disabled) {
  background: var(--violet);
  color: #fff;
  transform: translateY(-2px);
}
#pd-root .pd-touche:active:not(:disabled),
#pd-root .pd-touche.appui {
  transform: translateY(1px) scale(0.95);
}
#pd-root .pd-touche:disabled {
  cursor: default;
  box-shadow: none;
}
#pd-root .pd-touche.bonne {
  background: var(--vert);
  color: #fff;
  animation: pd-pop 0.3s;
}
#pd-root .pd-touche.indice {
  background: var(--ambre);
  color: #fff;
  animation: pd-pop 0.3s;
}
#pd-root .pd-touche.fausse {
  background: #f3f2f7;
  color: #c3c0d4;
  text-decoration: line-through;
}
#pd-root.gagne .pd-touche:not(.bonne):not(.indice),
#pd-root.perdu .pd-touche:not(.fausse) {
  opacity: 0.55;
}

/* ---------- Confettis ---------- */
#pd-root .pd-confettis {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#pd-root .pd-confettis i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: pd-confetti linear forwards;
}
@keyframes pd-confetti {
  to {
    transform: translate(var(--dx), max(640px, 105vh)) rotate(var(--r));
    opacity: 0;
  }
}

/* ---------- Petits écrans ---------- */
@media (max-width: 560px) {
  #pd-root .pd-plateau {
    padding: 14px 10px 16px;
  }
  #pd-root .pd-haut {
    gap: 10px;
    height: 130px;
  }
  #pd-root .pd-ratees {
    height: 48px;
  }
  #pd-root .pd-ratees span {
    width: 20px;
    height: 22px;
    font-size: 0.8rem;
  }
  #pd-root .pd-msg {
    font-size: 0.95rem;
  }
  #pd-root .pd-dessin svg {
    width: 130px;
    height: 130px;
  }
  #pd-root .pd-etat {
    min-width: 0;
    flex: 1;
  }
  #pd-root .pd-ligne {
    gap: 4px;
  }
  #pd-root .pd-touche {
    height: 44px;
    font-size: 1rem;
  }
}

/* ---------- Plein écran : tout en grand ----------
   Écran large : la potence occupe la colonne de gauche sur toute la hauteur,
   catégorie, mot, message et clavier (touches agrandies) à droite.
   Écran en hauteur (téléphone) : une seule colonne, potence agrandie en haut. */

#pd-root.mg-fs {
  padding: 16px 24px 20px;
  --mgc-fond: rgba(255, 255, 255, 0.06);
  --mgc-bord: rgba(255, 255, 255, 0.1);
}
#pd-root.mg-fs .pd-cat:not([aria-checked="true"]) {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  color: #fff;
}

#pd-root.mg-fs .pd-plateau {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  grid-template-rows: 1fr auto auto auto auto 1fr;
  grid-template-areas:
    "dessin ."
    "dessin etat"
    "dessin mot"
    "dessin msg"
    "dessin bas"
    "dessin .";
  column-gap: 4vw;
  padding: 3vh 4vw;
}
#pd-root.mg-fs .pd-haut {
  display: contents;
}
#pd-root.mg-fs .pd-dessin {
  grid-area: dessin;
  align-self: center;
  justify-self: center;
  width: 100%;
}
#pd-root.mg-fs .pd-dessin svg {
  width: 100%;
  max-height: calc(100vh - 230px);
  height: auto;
  aspect-ratio: 1;
}
#pd-root.mg-fs .pd-etat {
  grid-area: etat;
  min-width: 0;
}
#pd-root.mg-fs .pd-categorie {
  font-size: 1.6rem;
}
#pd-root.mg-fs .pd-categorie small {
  font-size: 1rem;
}
#pd-root.mg-fs .pd-vies {
  font-size: 1.05rem;
}
#pd-root.mg-fs .pd-jauge i {
  height: 12px;
  border-radius: 6px;
}
#pd-root.mg-fs .pd-ratees {
  height: 36px;
}
#pd-root.mg-fs .pd-ratees span {
  width: 32px;
  height: 36px;
  font-size: 1.1rem;
}
#pd-root.mg-fs .pd-mot-zone {
  grid-area: mot;
  height: 100px;
  margin: 3vh 0 1vh;
}
#pd-root.mg-fs .pd-mot {
  grid-template-columns: repeat(var(--n), minmax(0, 80px));
  font-size: min(3rem, calc(62cqi / var(--n)));
}
#pd-root.mg-fs .pd-msg {
  grid-area: msg;
  font-size: 1.25rem;
}
#pd-root.mg-fs .pd-bas {
  grid-area: bas;
}
#pd-root.mg-fs .pd-ligne {
  gap: 8px;
}
#pd-root.mg-fs .pd-clavier {
  gap: 8px;
}
#pd-root.mg-fs .pd-touche {
  flex-basis: 66px;
  height: 64px;
  border-radius: 12px;
  font-size: 1.5rem;
}
#pd-root.mg-fs .pd-rejouer {
  min-height: 56px;
  font-size: 1.25rem;
}
@media (orientation: portrait) {
  #pd-root.mg-fs .pd-plateau {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2vh 12px;
  }
  #pd-root.mg-fs .pd-haut {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 8px;
  }
  #pd-root.mg-fs .pd-plateau {
    flex: 1 0 auto;
  }
  /* Aucune zone ne se tasse : la page défile s'il le faut */
  #pd-root.mg-fs .pd-plateau > *,
  #pd-root.mg-fs .pd-haut > * {
    flex-shrink: 0;
  }
  #pd-root.mg-fs .pd-dessin {
    width: auto;
  }
  #pd-root.mg-fs .pd-dessin svg {
    width: min(30vh, 72vw);
    max-height: none;
  }
  #pd-root.mg-fs .pd-mot-zone {
    height: 70px;
    margin: 1.5vh 0 0.5vh;
  }
  #pd-root.mg-fs .pd-cats {
    gap: 5px;
  }
  #pd-root.mg-fs .pd-cat {
    padding: 4px 10px;
    font-size: 0.82rem;
  }
  #pd-root.mg-fs .pd-etat {
    width: 100%;
  }
  #pd-root.mg-fs .pd-touche {
    height: 56px;
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pd-root *,
  #pd-root *::before,
  #pd-root *::after {
    animation: none !important;
    transition-duration: 0.01s !important;
  }
}

/* ---------- Infobulles (placées par game.js) ---------- */

/* Pointe vers l'élément survolé */