/* ===== LE SCEAU DES GEMMES (Med, 31/10/2026, lot L1) : js/sceau-gemmes.js =====
   Décor pour les joueurs qui voient : aria-hidden, aucun clic en L1, intérieur transparent (la scène se voit à travers).
   Formes ET mouvements disent l'état, jamais la seule couleur. Variables d'or et de camp de css/vue-pro.css, avec repli. */
.sg { position: fixed; left: 0; top: 0; width: var(--sg-taille, 260px); height: var(--sg-taille, 260px);
  z-index: 880; pointer-events: none; display: none; --sg-or: var(--vp-or, #e8b04a); --sg-or-clair: var(--vp-or-clair, #ffd27a);
  --sg-camp: var(--vp-heros, #6fbcff); --sg-ki: var(--vp-ki, #c9a8ff); --sg-g: calc(var(--sg-taille, 260px) * .19); }
.sg.sg-visible { display: block; animation: sg-apparait .25s ease-out both; }
.sg.sg-adverse { --sg-camp: var(--vp-adverse, #ff8b8b); }
.sg.sg-pause, .sg.sg-pause * { animation-play-state: paused !important; }
.sg.sg-pause { visibility: hidden; }   /* le menu de pause passe devant : la phase est gelée, le cercle revient à la reprise */

/* L'anneau runique : fin, doré, liseré extérieur à la couleur du camp, runes qui tournent lentement. */
.sg-anneau { position: absolute; inset: 0; border-radius: 50%;
  border: calc(var(--sg-taille, 260px) * .022) solid var(--sg-or);
  box-shadow: 0 0 0 3px var(--sg-camp), 0 0 18px 2px rgba(0,0,0,.75), inset 0 0 14px rgba(0,0,0,.6); }
.sg-runes { position: absolute; inset: 7%; border-radius: 50%; border: 2px dashed rgba(255, 210, 122, .55);
  animation: sg-tourne 24s linear infinite; }
.sg.sg-flamboie .sg-anneau { animation: sg-flamme var(--sg-duree, 2s) ease-out both; }

/* La croix en filigrane d'or. */
.sg-croix { position: absolute; inset: 0; }
.sg-bras { position: absolute; background: linear-gradient(90deg, transparent, var(--sg-or), transparent); opacity: .7; }
.sg-bras-v { left: calc(50% - 1.5px); width: 3px; top: 18%; bottom: 18%; background: linear-gradient(180deg, transparent, var(--sg-or), transparent); }
.sg-bras-h { top: calc(50% - 1.5px); height: 3px; left: 18%; right: 18%; }

/* Les gemmes : quatre taillées en losange au bout des bras, le cœur rond au centre. */
.sg-gemme { position: absolute; width: var(--sg-g); height: var(--sg-g); margin: calc(var(--sg-g) / -2) 0 0 calc(var(--sg-g) / -2); }
.sg-haut   { left: 50%; top: 14%; }
.sg-bas    { left: 50%; top: 86%; }
.sg-gauche { left: 14%; top: 50%; }
.sg-droite { left: 86%; top: 50%; }
.sg-coeur  { left: 50%; top: 50%; }
.sg-cristal { position: absolute; inset: 0; transform: rotate(45deg); border-radius: 18%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(70,70,90,.75) 45%, rgba(20,20,30,.9));
  border: 2px solid rgba(232, 176, 74, .75); box-shadow: 0 0 6px rgba(0,0,0,.8); transition: transform .12s, filter .12s; }
.sg-coeur .sg-cristal { transform: none; border-radius: 50%; }

/* Allumée : la gemme s'embrase en blanc doré, grossit d'un quart, pulse ; l'anneau de lumière se resserre sur elle
   et se referme pile à la fin de la fenêtre (--sg-duree). */
.sg-gemme.sg-allumee .sg-cristal { transform: rotate(45deg) scale(1.25); filter: brightness(1.9) saturate(1.2);
  background: radial-gradient(circle at 40% 35%, #fff, var(--sg-or-clair) 40%, var(--sg-or) 75%); border-color: #fff;
  box-shadow: 0 0 18px 6px rgba(255, 220, 140, .9); animation: sg-pulse .3s ease-in-out infinite alternate; }
.sg-coeur.sg-allumee .sg-cristal { transform: scale(1.25); }
.sg-compte { position: absolute; inset: -55%; border-radius: 50%; border: 3px solid var(--sg-or-clair); opacity: 0; }
.sg-gemme.sg-allumee .sg-compte { animation: sg-resserre var(--sg-duree, .6s) linear both; }

/* Leurre : une fumée violet sombre s'enroule autour de la gemme, sans jamais l'allumer. */
/* Fumée lisible sur fond sombre : volutes violettes claires autour d'un cœur sombre, la gemme elle-même s'assombrit (jamais allumée). */
.sg-gemme.sg-leurre .sg-aureole { position: absolute; inset: -50%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(170, 110, 230, 0), rgba(170, 110, 230, .95) 18%, rgba(60, 25, 90, .2) 35%, rgba(190, 130, 245, .9) 55%, rgba(60, 25, 90, .1) 75%, rgba(170, 110, 230, .85) 92%, rgba(170, 110, 230, 0));
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 42%, #000 68%, transparent 72%); mask: radial-gradient(circle, transparent 38%, #000 42%, #000 68%, transparent 72%);
  filter: blur(1.5px); animation: sg-fumee var(--sg-duree, .4s) linear both; }
.sg-gemme.sg-leurre .sg-cristal { filter: brightness(.6) saturate(.4); border-color: rgba(170, 110, 230, .9); }

/* Montrée (mémorisation) : un éclat bref au rythme du son. */
.sg-gemme.sg-montree .sg-cristal { filter: brightness(1.7); background: radial-gradient(circle at 40% 35%, #fff, var(--sg-or-clair) 50%, var(--sg-or));
  animation: sg-eclat var(--sg-duree, .22s) ease-out both; }

/* Réussie : éclat d'étincelles d'or, une coche gravée une demi-seconde. Ratée : une fêlure, légère secousse du cercle. */
.sg-gemme.sg-reussie .sg-cristal { background: radial-gradient(circle, #fff, var(--sg-or-clair) 45%, var(--sg-or)); animation: sg-reussite .5s ease-out both; }
.sg-gemme.sg-reussie .sg-signe::before { content: "✓"; position: absolute; left: 50%; top: -60%; transform: translateX(-50%);
  color: var(--sg-or-clair); font: 700 calc(var(--sg-g) * .7)/1 sans-serif; text-shadow: 0 0 6px #000, 0 0 2px #000; animation: sg-monte .5s ease-out both; }
.sg-gemme.sg-ratee .sg-signe::before { content: ""; position: absolute; left: 10%; right: 10%; top: 48%; height: 3px;
  background: #1a0d0d; box-shadow: 0 0 0 1px #ff8b8b; transform: rotate(-35deg); animation: sg-felure .55s ease-out both; }
.sg-gemme.sg-ratee .sg-cristal { filter: grayscale(.6) brightness(.8); }
.sg.sg-secousse { animation: sg-secousse .25s ease-in-out; }

/* Ki suffisant (le cœur se remplit de lumière violette, des grains qui montent) ; contre possible (second anneau violet en haut). */
.sg-coeur.sg-ki .sg-cristal { background: radial-gradient(circle at 50% 70%, #fff, var(--sg-ki) 45%, #4a2a7a); border-color: var(--sg-ki);
  box-shadow: 0 0 16px 4px rgba(201, 168, 255, .85); animation: sg-pulse .5s ease-in-out infinite alternate; }
.sg-coeur.sg-ki .sg-aureole { position: absolute; inset: -20%; border-radius: 50%;
  background: radial-gradient(circle at 30% 80%, var(--sg-ki) 0 2px, transparent 3px), radial-gradient(circle at 70% 70%, var(--sg-ki) 0 2px, transparent 3px);
  animation: sg-grains 1s linear infinite; }
.sg-haut.sg-contre .sg-aureole { position: absolute; inset: -45%; border-radius: 50%; border: 3px solid var(--sg-ki);
  box-shadow: 0 0 10px 2px rgba(201, 168, 255, .8); animation: sg-pulse .45s ease-in-out infinite alternate; }

/* Les perles autour de l'anneau : une par signal ; or quand c'est réussi, fêlée quand c'est raté. */
.sg-perles { position: absolute; inset: 0; }
.sg-perle { position: absolute; left: 50%; top: 50%; width: calc(var(--sg-taille, 260px) * .05); height: calc(var(--sg-taille, 260px) * .05);
  margin: calc(var(--sg-taille, 260px) * -.025); border-radius: 50%; border: 2px solid var(--sg-or); background: rgba(20, 20, 30, .85);
  transform: rotate(var(--sg-a, 0deg)) translateX(calc(var(--sg-taille, 260px) * .56)); }
.sg-perle.sg-perle-ok { background: var(--sg-or-clair); box-shadow: 0 0 8px var(--sg-or-clair); }
.sg-perle.sg-perle-ko { background: #2a1010; border-color: #ff8b8b; border-style: dashed; }

/* Sous-titre de l'annonceur : un mot court, en lettres d'or, au-dessus du cercle. */
.sg-mot { position: absolute; left: 50%; bottom: 104%; transform: translateX(-50%); white-space: nowrap;
  font: 700 calc(var(--sg-taille, 260px) * .1)/1.1 var(--vp-titre, serif); color: var(--sg-or-clair);
  text-shadow: 0 0 4px #000, 0 2px 3px #000, 0 0 1px #000; opacity: 0; }
.sg-mot.sg-mot-vu { animation: sg-mot 1.4s ease-out both; }
/* Magie (L3, 01/11/2026) : l'émotion entendue = un symbole (flamme, éclair, soleil, vague) et son nom ; la forme dit l'émotion, jamais la seule couleur. */
.sg-mot .sg-sym { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; filter: drop-shadow(0 0 2px #000); }
/* Fausse gemme de l'aide magie : une couleur étrange (vert acide) et un contour pointillé, qui ne ressemble ni à l'or, ni à la fumée du leurre sonore. */
.sg-gemme.sg-faux .sg-cristal { filter: none; background: radial-gradient(circle at 40% 35%, #f4ffd0, #7cff00 45%, #1f7a00 100%); border: 2px dashed #f0ff80; box-shadow: 0 0 14px 4px rgba(124, 255, 0, .75); animation: sg-eclat var(--sg-duree, .4s) ease-out both; }

@keyframes sg-apparait { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes sg-tourne { to { transform: rotate(360deg); } }
@keyframes sg-pulse { from { filter: brightness(1.6); } to { filter: brightness(2.1); } }
@keyframes sg-resserre { from { opacity: 1; transform: scale(1); } to { opacity: .9; transform: scale(.42); } }
@keyframes sg-fumee { from { opacity: 0; transform: rotate(0deg) scale(.8); } 15% { opacity: 1; } 80% { opacity: .9; } to { opacity: 0; transform: rotate(300deg) scale(1.1); } }
@keyframes sg-eclat { from { transform: rotate(45deg) scale(1.3); } to { transform: rotate(45deg) scale(1); filter: none; } }
@keyframes sg-reussite { from { transform: rotate(45deg) scale(1.45); box-shadow: 0 0 26px 10px rgba(255, 220, 140, 1); } to { transform: rotate(45deg) scale(1); box-shadow: 0 0 4px rgba(0,0,0,.8); } }
@keyframes sg-monte { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -40%); } }
@keyframes sg-felure { from { opacity: 1; } 70% { opacity: 1; } to { opacity: 0; } }
@keyframes sg-secousse { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes sg-flamme { from { box-shadow: 0 0 0 3px var(--sg-camp), 0 0 40px 14px rgba(255, 210, 122, .95); } 25% { box-shadow: 0 0 0 3px var(--sg-camp), 0 0 22px 6px rgba(255, 210, 122, .6); } to { box-shadow: 0 0 0 3px var(--sg-camp), 0 0 18px 2px rgba(0,0,0,.75); } }
@keyframes sg-grains { from { transform: translateY(20%); opacity: 1; } to { transform: translateY(-40%); opacity: 0; } }
@keyframes sg-mot { from { opacity: 0; transform: translate(-50%, 20%); } 15% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } to { opacity: 0; } }

/* Moins d'animations demandées par le système : pas de rotation ni de secousse ; les états restent lisibles par la forme. */
@media (prefers-reduced-motion: reduce) {
  .sg-runes, .sg.sg-secousse { animation: none !important; }
  .sg-gemme.sg-allumee .sg-cristal, .sg-coeur.sg-ki .sg-cristal, .sg-haut.sg-contre .sg-aureole { animation: none !important; }
  .sg-gemme.sg-leurre .sg-aureole { animation: none !important; opacity: .9; }
  .sg-gemme.sg-faux .sg-cristal, .sg-gemme.sg-montree .sg-cristal, .sg-gemme.sg-reussie .sg-cristal, .sg.sg-flamboie .sg-anneau, .sg-coeur.sg-ki .sg-aureole, .sg.sg-visible { animation: none !important; }
}
/* Contraste renforcé (case vue-contraste) : traits plus épais. */
body.vue-contraste .sg-anneau { border-color: #ffd27a; box-shadow: 0 0 0 4px var(--sg-camp), 0 0 0 7px #000; }
body.vue-contraste .sg-cristal { border-width: 3px; }