/* =====================================================================
   Jeux de perception Cap555 (clairvoyance avec cartes Zener, précognition,
   psychokinèse) - bloc autonome, avec outils/commun/fenetre.css.
   La couleur de la fenêtre change avec le jeu choisi.
   ===================================================================== */

.jx[data-jeu="zener"] {
  --of-1: #571a2b; --of-2: #3e1120; --of-3: #1a060d;
  --of-lueur-haut: rgba(232, 104, 128, .30); --of-lueur-bas: rgba(255, 122, 26, .18);
}
.jx[data-jeu="precog"] {
  --of-1: #44256b; --of-2: #2d1849; --of-3: #120a22;
  --of-lueur-haut: rgba(160, 120, 240, .32); --of-lueur-bas: rgba(156, 49, 69, .32);
}
.jx[data-jeu="pk"] {
  --of-1: #12523f; --of-2: #0b3b2e; --of-3: #041a14;
  --of-lueur-haut: rgba(96, 210, 168, .26); --of-lueur-bas: rgba(255, 122, 26, .16);
}

.jx-onglets { margin: 0 auto 1.4rem; }
.jx-panneau { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.jx-panneau[hidden] { display: none; }
.jx-scene { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
.jx-cote { display: flex; flex-direction: column; gap: 1rem; }
.jx .jx-titre { margin: 0; padding: 0; border: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.8rem); color: #ffb27a; line-height: 1.2; }
.jx .jx-titre small { display: block; font-family: 'Varela Round', system-ui, sans-serif; font-size: .9rem; font-weight: 400; color: var(--of-doux); margin-top: .2rem; }
.jx .jx-regle { font-size: .92rem; color: var(--of-doux); }
.jx .jx-etat {
  display: inline-block;
  padding: .25rem .9rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  color: var(--of-vert-clair);
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(198, 227, 207, .28);
}
.jx .jx-msg { min-height: 1.6em; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.3rem; color: var(--of-texte); text-wrap: balance; }
.jx .jx-msg.ok { color: #ffb27a; text-shadow: 0 0 18px rgba(255, 122, 26, .55); }

/* ---------- Carte Zener qui se retourne ---------- */
.jx-table { position: relative; width: 9.5rem; height: 13rem; perspective: 900px; margin: .4rem 0 .2rem; }
.jx-table::before, .jx-table::after {           /* le paquet, sous la carte */
  content: ""; position: absolute; inset: 0;
  border-radius: 14px;
  background: linear-gradient(160deg, #7a2236, #3d0e14);
  border: 1px solid rgba(255, 178, 122, .35);
}
.jx-table::before { transform: translate(7px, 7px) rotate(3deg); opacity: .55; }
.jx-table::after { transform: translate(3.5px, 3.5px) rotate(1.5deg); opacity: .8; }
.jx-carte { position: relative; z-index: 1; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .7, .3, 1); }
.jx-carte.retournee { transform: rotateY(180deg); }
.jx-dos, .jx-face {
  position: absolute; inset: 0;
  border-radius: 14px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.jx-dos {
  background: radial-gradient(circle at 50% 45%, #a3324a 0%, #6b1d2b 55%, #3d0e14 100%);
  border: 1px solid rgba(255, 178, 122, .6);
  overflow: hidden;
}
.jx-dos svg { width: 100%; height: 100%; }
.jx-face {
  transform: rotateY(180deg);
  background: radial-gradient(circle at 50% 40%, #2a1420 0%, #120810 75%);
  border: 1px solid #ff7a1a;
  color: #ffd9b0;
}
.jx-face svg { width: 66%; height: auto; filter: drop-shadow(0 0 6px rgba(255, 150, 80, .8)); }
@media (prefers-reduced-motion: reduce) { .jx-carte { transition: none; } }

/* ---------- Boutons de symboles et d'éléments ---------- */
.jx-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.jx .jx-choix button {
  width: 4.7rem; height: 5.7rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  padding: 0;
  font: inherit; font-size: .8rem;
  color: #f3d9c0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .3));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, border-color .15s, box-shadow .15s, opacity .2s;
}
.jx .jx-choix button svg { width: 2.4rem; height: 2.4rem; }
.jx .jx-choix.elements button { width: 5.6rem; }
.jx .jx-choix button:hover:not(:disabled) { transform: translateY(-2px); border-color: #ff7a1a; box-shadow: 0 6px 16px rgba(0, 0, 0, .35), 0 0 14px rgba(255, 122, 26, .25); }
.jx .jx-choix button:focus-visible { outline: 2px solid var(--of-vert-clair); outline-offset: 3px; }
.jx .jx-choix button:disabled { opacity: .4; cursor: default; }
.jx .jx-choix button.choisi { opacity: 1; background: linear-gradient(180deg, #9c3145, #6b1d2b); border-color: #ffb27a; color: #fff4ea; }
.jx .jx-choix button.cible { opacity: 1; border-color: #ff7a1a; color: #ffb27a; box-shadow: 0 0 0 2px #ff7a1a, 0 0 22px rgba(255, 122, 26, .55); }
.jx .jx-choix button.cible svg { filter: drop-shadow(0 0 5px rgba(255, 150, 80, .9)); }
.jx .sym { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Précognition : l'oracle ---------- */
.jx-oracle {
  position: relative;
  width: 9.5rem; height: 9.5rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 45% 38%, rgba(200, 170, 255, .35), rgba(60, 30, 100, .55) 55%, rgba(10, 5, 25, .9) 100%);
  border: 1px solid rgba(200, 170, 255, .55);
  box-shadow: 0 0 40px rgba(160, 120, 240, .35), inset 0 0 30px rgba(0, 0, 0, .5);
  color: #f3e6ff;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 3rem;
}
.jx-oracle::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed rgba(200, 170, 255, .35); }
.jx-oracle svg { width: 58%; height: auto; color: #ffb27a; filter: drop-shadow(0 0 6px rgba(255, 150, 80, .9)); }
.jx-oracle.attente::after { animation: jx-tour 6s linear infinite; }
@keyframes jx-tour { to { transform: rotate(360deg); } }

/* ---------- Psychokinèse : la colonne ---------- */
.jx-intentions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.jx .jx-intentions button {
  font: inherit; font-size: .95rem;
  padding: .5rem 1.2rem;
  border-radius: 999px;
  color: var(--of-doux);
  background: var(--of-champ);
  border: 1px solid rgba(255, 255, 255, .18);
  cursor: pointer;
}
.jx .jx-intentions button:hover:not(:disabled) { border-color: #ff7a1a; color: var(--of-texte); }
.jx .jx-intentions button[aria-pressed="true"] { color: #fff4ea; background: linear-gradient(180deg, #9c3145, #6b1d2b); border-color: #ff7a1a; }
.jx .jx-intentions button:disabled:not([aria-pressed="true"]) { opacity: .4; cursor: default; }
.jx .jx-intentions button:focus-visible { outline: 2px solid var(--of-vert-clair); outline-offset: 3px; }
.jx-jauge-zone { display: flex; align-items: center; gap: 1.4rem; }
.jx-jauge {
  position: relative;
  width: 3.4rem; height: 15rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .06) 50%, rgba(0, 0, 0, .5));
  border: 1px solid rgba(198, 227, 207, .45);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .6), 0 0 26px rgba(96, 210, 168, .15);
  overflow: hidden;
}
.jx-jauge::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(198, 227, 207, .8); }
.jx-jauge-fill { position: absolute; left: 4px; right: 4px; height: 0; top: 50%; border-radius: 999px; transition: top .5s ease-out, height .5s ease-out; }
.jx-jauge-fill.haut { background: linear-gradient(180deg, #ffd2a8, #ff7a1a); box-shadow: 0 0 16px rgba(255, 122, 26, .7); }
.jx-jauge-fill.bas { background: linear-gradient(180deg, #c4566b, #6b1d2b); box-shadow: 0 0 16px rgba(196, 86, 107, .6); }
.jx-valeur { min-width: 3ch; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 2.6rem; font-variant-numeric: tabular-nums; color: var(--of-texte); }

/* ---------- Bilan et totaux ---------- */
.jx-bilan {
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  background: rgba(0, 0, 0, .3);
  border: 1px solid #ff7a1a;
  box-shadow: 0 0 24px rgba(255, 122, 26, .15);
}
.jx .jx-bilan h3 { margin: 0 0 .7rem; padding: 0; border: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.2rem; color: #ffb27a; text-align: center; }
.jx-bilan dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; font-variant-numeric: tabular-nums; font-size: .92rem; }
.jx-bilan dt { margin: 0; color: var(--of-doux); }
.jx-bilan dd { margin: 0; text-align: right; font-weight: 600; color: var(--of-texte); }
.jx .jx-cumul { font-size: .84rem; color: var(--of-doux); }
.jx .jx-cumul span { display: block; margin-top: .45rem; }
.jx .jx-cc { display: flex; flex-direction: column; gap: .45rem; }

@media (max-width: 820px) {
  .jx-panneau { grid-template-columns: 1fr; gap: 1rem; }
  .jx-onglets { margin-bottom: 1rem; }
}
@media (max-width: 520px) {
  .jx .jx-onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 16px; }
  .jx .jx-onglets button { padding: .45rem .2rem; font-size: .8rem; text-align: center; border-radius: 12px; }
}
@media (max-width: 420px) {
  .jx-choix { gap: .4rem; }
  .jx .jx-choix button { width: 3.3rem; height: 4.5rem; font-size: .72rem; }
  .jx .jx-choix.elements button { width: 4.4rem; }
  .jx .jx-choix button svg { width: 1.8rem; height: 1.8rem; }
  .jx-table { width: 8.2rem; height: 11.2rem; }
}