/* ---------- Écran de la refonte (js/refonte.js) ----------
   Une seule fresque, plein écran, sur l'écran peint d'un seul tenant (registres de vase), sans filtre : le décor et les
   figures ont les mêmes couleurs. Mesures prises sur l'écran des terres connues (1440 × 900) : cartouches à y 22-91,
   sol sablé à y 627-697, méandres à y 705-766, rayons à y 766-883, médaillons centrés en (163, 786) et (1280, 786). */
#stage.refonte { --sol: 222px; background: #0b0806; }
#stage.refonte #dust, #stage.refonte .demo-flag, #stage.refonte #cadre-plateau, #stage.refonte #frise-basse { display: none; }

/* La fresque du joueur couvre tout l'écran ; celle de l'adversaire n'est plus montrée. */
#stage.refonte .fresco.top { display: none; }
#stage.refonte .fresco.bottom { top: 0; left: 0; right: 0; width: 1440px; height: 900px; border-radius: 0; box-shadow: none;
  background: #0b0806 var(--ecran) 0 0 / 1440px 900px no-repeat !important; filter: none; }
#stage.refonte .fresco.bottom::before, #stage.refonte .fresco.bottom::after,
#stage.refonte .fresco .ground, #stage.refonte .fresco .path, #stage.refonte .fresco .sweep, #stage.refonte .fresco .zone-label,
#stage.refonte .fresco .ident, #stage.refonte .fresco .route, #stage.refonte .decor-fondu, #stage.refonte .fresco .ent.empty { display: none; }

/* Les figures détourées d'un trait noir net (décision de l'utilisateur) : sur l'écran orangé ou un paysage stylé, elles
   ne se confondent plus avec le fond. Les états à part (épuisé, Aristie, Enfers) gardent leurs filtres (game.css). */
#stage.refonte .fresco:not(.enfers) .ent:not(.exhausted:not(.dessin-epuise)):not(.hades):not(.aristie) .fig > * {
  filter: drop-shadow(2px 0 0 #0d0805) drop-shadow(-2px 0 0 #0d0805) drop-shadow(0 2px 0 #0d0805) drop-shadow(0 -2px 0 #0d0805)
    drop-shadow(0 0 6px rgba(13,8,5,.35)); }

/* Sur un paysage d'Épreuve (pas sur un décor de rang, qui garde le détourage noir), plus de finesse (décision de l'utilisateur) : un trait d'1 px dans un brun accordé à l'image,
   sans ombre ; l'invitation à toucher le Héros est une pulsation de ce trait, qui s'éclaire d'or pâle, sans halo. */
#stage.refonte.paysage-epreuve:not(.paysage-rang) .fresco:not(.enfers) .ent:not(.exhausted:not(.dessin-epuise)):not(.hades):not(.aristie) .fig > * {
  filter: drop-shadow(var(--trait-l, 1px) 0 0 var(--trait-figure)) drop-shadow(calc(-1 * var(--trait-l, 1px)) 0 0 var(--trait-figure))
    drop-shadow(0 var(--trait-l, 1px) 0 var(--trait-figure)) drop-shadow(0 calc(-1 * var(--trait-l, 1px)) 0 var(--trait-figure)); }
/* (20/10) plus de pulsation dorée sur les paysages d'Épreuve : le trait seul. */
#stage.refonte.paysage-epreuve:not(.paysage-rang) .fresco.bottom .rig.mesh .lueur { opacity: 0 !important; animation: none; }   /* figures animées : le trait suffit */
#stage.refonte.paysage-epreuve:not(.paysage-rang) .fresco .rig, #stage.refonte.paysage-epreuve:not(.paysage-rang) .fresco img.cut { filter: none; }   /* pas d'ombre portée */
@keyframes appel-paysage {
  0%, 100% { filter: drop-shadow(var(--trait-l, 1px) 0 0 var(--trait-figure)) drop-shadow(calc(-1 * var(--trait-l, 1px)) 0 0 var(--trait-figure)) drop-shadow(0 var(--trait-l, 1px) 0 var(--trait-figure)) drop-shadow(0 calc(-1 * var(--trait-l, 1px)) 0 var(--trait-figure)); }
  50% { filter: drop-shadow(1px 0 0 #f3d9a0) drop-shadow(-1px 0 0 #f3d9a0) drop-shadow(0 1px 0 #f3d9a0) drop-shadow(0 -1px 0 #f3d9a0) drop-shadow(0 0 2px rgba(255,236,190,.55)); } }

/* Les figures se tiennent sur le sol sablé, au bas du paysage. */
#stage.refonte .fresco.bottom .ent:not(.small) { bottom: var(--sol); }
#stage.refonte .fresco.bottom .ent.small.objet { bottom: calc(var(--sol) + 10px + var(--rang, 0) * 58px); top: auto; }
#stage.refonte .fresco.bottom .ent.small.trophy { bottom: calc(var(--sol) + 190px + var(--rang, 0) * 52px); top: auto; }
/* La cible annoncée d'un Monstre, au-dessus de lui. */
#stage.refonte .ent .vise { position: absolute; left: 50%; top: -6px; translate: -50% -100%; z-index: 4; white-space: nowrap;
  font: 500 12.5px/1 var(--text); color: #fff; background: rgba(176, 64, 44, .92); padding: 4px 10px; border-radius: 11px; pointer-events: none; }

/* Plus de course de Gloire, de jetons d'Action, de piles dessinées ni d'étapes de résolution. */
#stage.refonte .horizon, #stage.refonte .me-counters .c-action, #stage.refonte .piles,
#stage.refonte .stage-banner .steps { display: none; }

/* Les trois cartouches de la frise haute. */
#stage.refonte .cartouche { position: absolute; top: 24px; height: 66px; z-index: 25; display: flex; align-items: center;
  justify-content: center; text-align: center; color: #f3e3c4; pointer-events: none; }
#stage.refonte .c-tour { left: 82px; width: 250px; }
#stage.refonte .c-tour b { display: block; font: 400 21px/1.1 var(--display); color: #f6d48a; }
#stage.refonte .c-tour i { font: italic 13px/1.2 var(--text); opacity: .9; }
#stage.refonte .c-tour small { display: block; font: italic 12px/1.2 var(--text); opacity: .65; }
#stage.refonte .c-rang { left: 545px; width: 350px; font: 400 13px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; }
#stage.refonte .c-rang .points { display: flex; gap: 9px; justify-content: center; margin-bottom: 6px; letter-spacing: 0; }
#stage.refonte .c-rang .points span { width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid rgba(246,212,138,.55);
  font: 11px/19px var(--display); color: rgba(246,212,138,.75); }
#stage.refonte .c-rang .points span.fait { background: rgba(246,212,138,.25); }
#stage.refonte .c-rang .points span.ici { background: #f6d48a; color: #1a120c; border-color: #f6d48a; box-shadow: 0 0 12px rgba(246,212,138,.6); }
#stage.refonte .c-gloire { left: 1108px; width: 250px; gap: 16px; }
#stage.refonte .gl { display: flex; align-items: center; gap: 9px; font: 400 15px/1.1 var(--display); text-align: left; }
#stage.refonte .gl .n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 400 22px/1 var(--display); color: #1a120c;
  background: radial-gradient(circle at 40% 35%, #ffe7a8, #d9a548 70%, #a87428); box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
#stage.refonte .gl.adv .n { width: 34px; height: 34px; font-size: 16px; filter: saturate(.4) brightness(.85); }
#stage.refonte .gl small { display: block; font: 12px var(--text); opacity: .7; }

/* Le médaillon de gauche : l'Encens et le ménos. */
#stage.refonte .me-counters { left: 83px; top: 738px; width: 160px; gap: 4px; justify-items: center; }
#stage.refonte .me-counters .counter { gap: 0; }
/* L'Encens en clair : son nom, puis ce qui reste à dépenser ce tour, en grand, sur le total du tour. */
#stage.refonte .me-counters .c-favor > svg, #stage.refonte .me-counters .pips { display: none; }
#stage.refonte .me-counters .c-favor > div { display: flex; flex-direction: column; align-items: center; }
#stage.refonte .me-counters .lab { display: block; margin: 0; font: 400 15px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #e9c27e; }
#stage.refonte .me-counters .val { display: block; margin-top: 2px; font: 400 50px/1 var(--display); color: #f6d48a;
  text-shadow: 0 0 10px rgba(246, 212, 138, .35); }
#stage.refonte .me-counters .val small { font-size: 22px; color: #c9a86a; margin-left: 2px; }
#stage.refonte .me-counters .aristie { justify-content: center; }
#stage.refonte .me-counters .aristie .flammes i { width: 17px; height: 26px; }

/* Le médaillon de droite : la fin du tour. La chronique du tour adverse sous la frise haute, à droite. */
#stage.refonte .right-dock { inset: 0; width: auto; display: block; pointer-events: none; }
#stage.refonte .main-btn { position: absolute; left: 1215px; top: 721px; width: 130px; height: 130px; border-radius: 50%; pointer-events: auto;
  background: transparent; box-shadow: none; color: #f6d48a; font: 400 22px/1.1 var(--display); }
#stage.refonte .main-btn:hover { transform: none; background: radial-gradient(circle, rgba(246,212,138,.2), transparent 70%); }
#stage.refonte .main-btn small { color: rgba(246,212,138,.7); }
#stage.refonte .main-btn.waiting { background: transparent; box-shadow: none; color: rgba(246,212,138,.45); }
#stage.refonte .main-btn.pass { background: transparent; box-shadow: 0 0 0 2px rgba(246,212,138,.6) inset; color: #f6d48a; }
#stage.refonte .chronicle-dock { position: absolute; right: 28px; top: 120px; pointer-events: auto; padding: 14px 18px; border-radius: 14px;
  background: rgba(14,10,8,.88); box-shadow: 0 0 0 1px rgba(246,212,138,.28), 0 10px 26px rgba(0,0,0,.5); }
#stage.refonte .chronicle { width: 320px !important; }
#stage.refonte .chronicle .title { color: #f6d48a; }
#stage.refonte .chronicle .row { color: rgba(243,227,196,.6); font-size: 14px; }
#stage.refonte .chronicle .row i { background: rgba(246,212,138,.2); color: #f3e3c4; }
#stage.refonte .chronicle .row.now { color: #fff; }
#stage.refonte .chronicle .row.now i { background: #f6d48a; color: #1a120c; }
#stage.refonte .dock-q { position: absolute; left: 50%; top: 118px; translate: -50% 0; text-align: center; pointer-events: none; color: #f3e3c4;
  padding: 8px 18px; border-radius: 12px; background: rgba(14,10,8,.82); }
#stage.refonte .dock-q span { color: rgba(243,227,196,.75); }

/* La main en éventail, posée sur la frise de base. */
#stage.refonte .hand { top: 668px; }
#stage.refonte .stage-banner { top: 118px; left: 50%; translate: -50% 0; }
#stage.refonte .toast { top: 150px; }

/* Ce que l'écran simplifié n'a plus : le libellé de la jauge, la ligne d'essai (manière et don : au survol du héros). */
#stage.refonte .me-counters .aristie b, #stage.refonte .etat-essai { display: none; }
/* La Défense : un disque cerclé de bleu, entre l'Attaque (vert) et les PV (rouge). */
#stage.refonte .fresco.bottom .ent .stat.d { box-shadow: 0 0 0 1.2px #5f8fc4, 0 0 0 2.5px #17110c; }

/* Une Épreuve dans le Périple : comme dans l'ancienne fresque, son décor (perils.js, DECORS_EPREUVES) remplace le
   paysage du rang, entre la frise haute et la frise de base ; l'encadrement peint reste. Le décor est posé à sa taille
   naturelle (3 pour 1), sans filtre, calé sur le sol ; au-dessus, le noir de son ciel. */
#stage.refonte .fresco.bottom.decor-epreuve::before { display: block; content: ""; position: absolute; left: 0; right: 0; top: 110px; bottom: auto;
  height: 590px; z-index: 0; pointer-events: none; opacity: 1; -webkit-mask: none; mask: none;
  background: linear-gradient(#0b0806 0, #0b0806 60px, transparent 150px), #0b0806 var(--decor) center bottom / 1440px auto no-repeat; }

/* Nombreux : les figures se resserrent et rapetissent, les pieds toujours sur le sol. */
#stage.refonte .fresco.bottom .ent:not(.small) { scale: var(--serre, 1); transform-origin: 50% 100%; }

/* Une Épreuve qui a son écran peint (refonte.js, ECRANS_EPREUVES) : pas de décor par-dessus. */
#stage.refonte.ecran-epreuve .fresco.bottom.decor-epreuve::before { display: none; }

/* Essai : une Épreuve qui a son paysage stylé (refonte.js, PAYSAGES). Pendant l'Épreuve, plus de frises (décision de
   l'utilisateur) : le paysage couvre tout l'écran ; son sol est aux trois quarts de la hauteur, sous les pieds des
   figures. Les cartouches, le médaillon de l'Encens et la fin du tour se posent dessus sur la même plaque légère que
   les textes de la fresque. */
#stage.refonte.paysage-epreuve .fresco.bottom { background: #0b0806 var(--paysage) 0 0 / 1440px 900px no-repeat !important; }
#stage.refonte.paysage-epreuve .fresco.bottom.decor-epreuve::before { display: none; }
/* Les plaques prennent les couleurs du style de l'Épreuve (refonte.js, PAYSAGES : --plaque-fond, -filet, -texte, -titre). */
#stage.refonte.paysage-epreuve .cartouche, #stage.refonte.paysage-epreuve .livre, #stage.refonte.paysage-epreuve .livre.recit,
#stage.refonte.paysage-epreuve .me-counters, #stage.refonte.paysage-epreuve .main-btn, #stage.refonte.paysage-epreuve .main-btn.waiting,
#stage.refonte.paysage-epreuve .main-btn:hover {
  background: var(--plaque-fond); box-shadow: 0 0 0 1px var(--plaque-filet), 0 0 0 4px var(--plaque-fond), 0 0 0 5px var(--plaque-filet); border-radius: 3px; }
#stage.refonte.paysage-epreuve .me-counters { border-radius: 50%; left: 78px; top: 701px; width: 170px; height: 170px; box-sizing: border-box; padding-top: 30px; }
#stage.refonte.paysage-epreuve .main-btn { border-radius: 50%; }
#stage.refonte.paysage-epreuve .cartouche, #stage.refonte.paysage-epreuve .cartouche *, #stage.refonte.paysage-epreuve .livre,
#stage.refonte.paysage-epreuve .livre p, #stage.refonte.paysage-epreuve .livre .choix button, #stage.refonte.paysage-epreuve .me-counters .val,
#stage.refonte.paysage-epreuve .me-counters .val small, #stage.refonte.paysage-epreuve .main-btn, #stage.refonte.paysage-epreuve .main-btn small {
  color: var(--plaque-texte); text-shadow: none; }
#stage.refonte.paysage-epreuve .livre h3, #stage.refonte.paysage-epreuve .livre p.fait, #stage.refonte.paysage-epreuve .livre .bilan,
#stage.refonte.paysage-epreuve .livre .choix button:hover, #stage.refonte.paysage-epreuve .c-tour b, #stage.refonte.paysage-epreuve .me-counters .lab {
  color: var(--plaque-titre); }
#stage.refonte.paysage-epreuve .c-rang .points span { border-color: var(--plaque-filet); color: var(--plaque-texte); }
#stage.refonte.paysage-epreuve .c-rang .points span.fait { background: var(--plaque-filet); color: var(--plaque-fond); }
#stage.refonte.paysage-epreuve .livre p { font-weight: 400; }
#stage.refonte.paysage-epreuve .c-rang .points span.ici { background: var(--plaque-titre); border-color: var(--plaque-titre); color: var(--plaque-fond) !important; box-shadow: none; }

/* Sans Monstre en face, pendant une Épreuve à paysage : le Héros et son Entourage glissent au milieu (refonte.js). */
#stage.refonte .fresco.bottom .ent:not(.periple) { transition: translate .9s ease-in-out; }
#stage.refonte.au-centre .fresco.bottom .ent:not(.periple) { translate: var(--au-centre, 0px) 0; }
/* La plaque du récit d'une Épreuve à paysage, cachée tant qu'on ne touche pas l'image (interaction.js). */
#stage.refonte .livre { transition: opacity .25s; }
#stage.refonte .livre.cachee { opacity: 0; pointer-events: none; }
/* Plus de frise haute : les plaques de texte remontent, pour laisser la tête du Héros dégagée au milieu. */
#stage.refonte.paysage-epreuve .livre:not(.ordres) { margin-top: -30px; }

/* Les textes écrits sur la fresque (récit et choix des Épreuves, ordres du héros, exploration, offrande) : sur une plaque
   légère, un vernis noir à demi transparent cerné d'un filet de terre cuite (choix de l'utilisateur, variante C). Le
   paysage reste deviné derrière ; le texte reste lisible sur les nuées, les oiseaux et les montagnes. */
#stage.refonte .livre { margin-top: 22px; padding: 14px 26px 16px; background: rgba(11,8,6,.74); box-shadow: 0 0 0 1px rgba(217,119,58,.75); border-radius: 3px; }
#stage.refonte .livre.recit { background: rgba(11,8,6,.74); }

/* Une consigne de choix (défausse…) : sur la même plaque, sous la frise haute. */
#stage.refonte .hint.plaque { padding: 12px 24px; border-radius: 3px; background: rgba(11,8,6,.74); box-shadow: 0 0 0 1px rgba(217,119,58,.75);
  font: 400 19px/1.2 var(--display); letter-spacing: .03em; color: #f6d48a; }

/* ---------- Au doigt (téléphone) : la scène est réduite à 0,43 environ sur un iPhone en paysage ; les textes et les
   cibles grossissent d'autant pour rester lisibles (≈ 10 pt) et touchables (≈ 40 pt). La composition ne bouge pas. ---------- */
@media (hover: none) {
  body:has(#stage.refonte) { background: #0b0806; }
  #stage.refonte .livre { width: 820px; }
  #stage.refonte .livre p { font-size: 26px; }
  #stage.refonte .livre h3 { font-size: 20px; }
  #stage.refonte .livre .choix { gap: 4px; }
  #stage.refonte .livre .choix button { font-size: 30px; font-weight: 400; padding: 18px 28px; }
  #stage.refonte .hint.plaque { font-size: 24px; }
  #stage.refonte .c-tour b { font-size: 28px; }
  #stage.refonte .c-tour i { font-size: 19px; }
  #stage.refonte .c-tour small { display: none; }
  #stage.refonte .c-rang { font-size: 19px; letter-spacing: .14em; }
  #stage.refonte .gl { font-size: 21px; }
  #stage.refonte .gl small { font-size: 17px; }
  #stage.refonte .main-btn { font-size: 36px; }
  #stage.refonte .main-btn small { display: none; }
  .card.zoom.survol { z-index: 90; }
  /* La main remonte : on la touche loin du bord bas, où iOS prend le doigt (barre d'accueil, Siri). */
  #stage.refonte { --main-enfoncee: 44; }   /* (22/10) plus bas : les cartes ne couvrent plus les pieds du Héros ni des Monstres */
  #stage.refonte .hint:not(.plaque) { font-size: 24px; padding: 12px 22px; border-radius: 28px; }
}

/* ---------- Le voyage (voyage.js) : la carte marine des six rangs, le trajet en pointillés ---------- */
#stage.refonte .voyage { position: absolute; inset: 0; z-index: 95; background: #0f0a07 center / 1440px 900px no-repeat; pointer-events: auto; }
#stage.refonte .voyage svg { position: absolute; inset: 0; width: 1440px; height: 900px; }
#stage.refonte .voyage .route path { fill: none; }
#stage.refonte .voyage .titre { position: absolute; left: 0; right: 0; bottom: 46px; text-align: center; font: 400 34px/1 var(--display);
  letter-spacing: .14em; text-transform: uppercase; color: #f6d48a; text-shadow: 0 0 10px #0b0806, 0 0 22px #0b0806; }
/* Au début de la partie : le rang et son nom, brièvement, dans le ciel du décor. */
#stage.refonte .titre-ciel { position: absolute; left: 0; right: 0; top: 160px; z-index: 40; pointer-events: none; text-align: center; }
/* L'arrivée : le lieu seul, puis les figures entrent (voyage.js les fait reparaître une à une). */
#stage.refonte .fresco.arrivee .ent:not(.marche) { visibility: hidden; }
#stage.refonte .voyage { background-color: #070504; }
#stage.refonte .voyage .route path { stroke: #e98a45; stroke-width: 3.5; stroke-dasharray: 11 9; stroke-linecap: butt; }
#stage.refonte .voyage .route .faite { opacity: 1; }
#stage.refonte .voyage .escale { fill: #e98a45; transition: opacity .4s, r .4s; }
#stage.refonte .voyage .escale.a-venir { opacity: 0; }

/* Première page d'une Épreuve : son nom seul, et la figure symbolique du décor aux contours dorés (à toucher). */
#stage.refonte .titre-epreuve { position: absolute; z-index: 72; translate: -50% 0; cursor: pointer; }
#stage.refonte .halo-epreuve { position: absolute; z-index: 70; border: 0; padding: 0; cursor: pointer; pointer-events: auto;
  background: transparent center / 100% 100% no-repeat; }
/* La figure détourée, posée exactement sur elle-même : seul un fin liseré d'or, qui respire, la signale. */
#stage.refonte .halo-epreuve.detouree { animation: halo-epreuve 2.6s ease-in-out infinite; }
@keyframes halo-epreuve {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(255,226,150,.9)) drop-shadow(0 0 3px rgba(255,200,110,.35)); }
  50% { filter: drop-shadow(0 0 1.5px #ffe7a8) drop-shadow(0 0 6px rgba(255,205,120,.7)); } }
@media (hover: none) { #stage.refonte .titre-epreuve .pancarte b { font-size: 34px; } #stage.refonte .titre-epreuve .pancarte small { font-size: 19px; } }
#stage.refonte .voyage .titre.egare { opacity: 0; font: italic 400 32px/1 var(--display); letter-spacing: .04em; text-transform: none; }

/* La chute aux Enfers : un voile explique ce qui arrive, et le joueur descend quand il l'a lu. */
#stage.refonte .voile-enfers { position: absolute; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: rgba(8, 5, 3, .93); color: #f3d9b0; text-align: center; font-family: var(--display); }
#stage.refonte .voile-enfers h2 { margin: 0; font: 400 64px/1 var(--display); letter-spacing: .05em; color: #f0a46a; }
#stage.refonte .voile-enfers .sous { margin: 12px 0 30px; font: italic 400 28px/1.2 var(--display); }
#stage.refonte .voile-enfers ul { margin: 0 0 36px; padding: 0; list-style: none; font: 400 25px/1.7 var(--text); }
#stage.refonte .voile-enfers li::before { content: "— "; color: #f0a46a; }
#stage.refonte .voile-enfers b { color: #f6d48a; font-weight: 600; }
#stage.refonte .voile-enfers button { padding: 14px 34px; border: 1px solid #f0a46a; border-radius: 4px; background: transparent;
  color: #f6d48a; font: 400 24px/1 var(--display); letter-spacing: .1em; cursor: pointer; }
#stage.refonte .voile-enfers button:hover { background: rgba(240, 164, 106, .15); }
/* Pendant le tour aux Enfers : une plaque le rappelle, sous la frise haute. */
#stage.refonte .note-enfers { position: absolute; left: 50%; top: 128px; translate: -50% 0; z-index: 30; pointer-events: none;
  padding: 10px 26px; border: 1px solid #1a110a; background: rgba(243, 176, 122, .9); color: #1a110a; text-align: center;
  font: 400 19px/1.35 var(--text); }
#stage.refonte .note-enfers b { display: block; font: 400 24px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; }
/* L'ancienne étiquette des Périls (« Compagnons et Périls attendent son retour ») ne vaut pas pour la refonte. */
#stage.refonte .attente-enfers { display: none; }

/* La pancarte ornée des titres : plaque de vernis noir, double filet d'or, une palmette de la frise à chaque bout. */
#stage .pancarte { display: inline-flex; align-items: center; gap: 16px; padding: 10px 20px; text-align: center; white-space: nowrap;
  background: radial-gradient(ellipse at 50% 40%, #24160c, #0e0805 75%); border: 2px solid #c99a4a; border-radius: 3px;
  box-shadow: inset 0 0 0 4px #0e0805, inset 0 0 0 5px rgba(214, 168, 88, .75), 0 8px 24px rgba(0, 0, 0, .6); }
#stage .pancarte .orn { flex: none; width: 34px; height: 38px; background: url('/modular-assets/ornements/palmette.png') center / contain no-repeat; }
#stage .pancarte .pc { display: flex; flex-direction: column; align-items: center; padding: 0 6px; }
#stage .pancarte small { font: italic 400 16px/1.2 var(--text); color: #e9c27e; letter-spacing: .04em; }
#stage .pancarte b { font: 400 26px/1.15 var(--display); font-weight: 400; color: #f6d48a; letter-spacing: .14em; text-transform: uppercase; }
#stage .pancarte.rang small { font: 400 30px/1 var(--display); font-style: normal; color: #f6d48a; letter-spacing: .08em; }
#stage .pancarte.grande { padding: 14px 28px; gap: 22px; }
#stage .pancarte.grande .orn { width: 48px; height: 54px; }
#stage .pancarte.grande small { font-size: 64px; }
#stage .pancarte.grande b { font-size: 32px; margin-top: 4px; }
/* Aux Enfers, l'écran est inversé (noir sur orange) : les textes des cartouches et des médaillons passent à l'encre noire. */
#stage.refonte.aux-enfers .cartouche, #stage.refonte.aux-enfers .cartouche *, #stage.refonte.aux-enfers .me-counters .lab,
#stage.refonte.aux-enfers .me-counters .val, #stage.refonte.aux-enfers .me-counters .val small,
#stage.refonte.aux-enfers .main-btn, #stage.refonte.aux-enfers .main-btn small { color: #1a110a !important; text-shadow: none !important; }
#stage.refonte.aux-enfers .c-rang .points span { border-color: #1a110a; }
#stage.refonte.aux-enfers .c-rang .points span.ici { background: #1a110a; color: #f3b07a !important; box-shadow: none; }

/* Le menu de la partie : bouton rond sur la palmette de gauche de la frise haute ; panneau au centre. */
#stage .btn-menu-partie { position: absolute; left: 8px; top: 20px; z-index: 90; width: 62px; height: 62px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; pointer-events: auto;
  background: radial-gradient(circle at 45% 40%, #24160c, #0e0805 75%); border: 2px solid #c99a4a; box-shadow: 0 4px 12px rgba(0,0,0,.55); }
#stage .btn-menu-partie span { display: block; width: 26px; height: 3px; border-radius: 2px; background: #f6d48a; }
#stage .btn-menu-partie:hover { box-shadow: 0 0 0 3px rgba(246,212,138,.35), 0 4px 12px rgba(0,0,0,.55); }
#stage .menu-partie { position: absolute; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(8,5,3,.82); pointer-events: auto; }
#stage .menu-partie .cadre { min-width: 520px; padding: 30px 46px 26px; text-align: center; border: 2px solid #c99a4a; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 30%, #24160c, #0e0805 80%); box-shadow: inset 0 0 0 5px #0e0805, inset 0 0 0 6px rgba(214,168,88,.7), 0 12px 36px rgba(0,0,0,.7); }
#stage .menu-partie h2 { margin: 0; font: 400 40px/1.1 var(--display); color: #f0a46a; letter-spacing: .06em; }
#stage .menu-partie .qui { margin: 8px 0 22px; font: italic 400 20px/1.35 var(--text); color: #e9c27e; max-width: 460px; margin-inline: auto; }
#stage .menu-partie button { display: block; width: 100%; margin: 12px 0 0; padding: 16px 20px; border: 1px solid #c99a4a; border-radius: 4px;
  background: transparent; color: #f6d48a; font: 400 25px/1 var(--display); letter-spacing: .08em; cursor: pointer; }
#stage .menu-partie button:hover { background: rgba(240,164,106,.15); }
#stage .menu-partie .aide { margin: 18px 0 0; font: 400 16px/1.35 var(--text); color: rgba(243,227,196,.65); max-width: 460px; margin-inline: auto; }

/* Le Héros qui a des ordres à donner luit d'un fin liseré d'or, comme les figures des Épreuves : le toucher ouvre la plaque.
   La lueur entoure le trait noir de la figure, qui reste. */
#stage.refonte .fresco.bottom .ent.hero.appel-ordres { cursor: pointer; }
#stage.refonte .fresco.bottom .ent.hero.appel-ordres .fig > :not(:has(.rig.mesh)),
#stage.refonte .fresco.bottom .ent.can-act:not(.exhausted) .fig > :not(:has(.rig.mesh)),
#stage.refonte .fresco.bottom :is(.ent.hero.appel-ordres, .ent.can-act:not(.exhausted)) .rig.mesh .lueur { animation: none;   /* fixe (18/10) : plus de clignotement */
  /* Le contour noir seul, sans liseré ni halo doré (décision de l'utilisateur, 20/10). */
  filter: drop-shadow(2px 0 0 #0d0805) drop-shadow(-2px 0 0 #0d0805) drop-shadow(0 2px 0 #0d0805) drop-shadow(0 -2px 0 #0d0805)
    drop-shadow(0 0 6px rgba(13,8,5,.35)); }
/* Figure animée (canvas WebGL) : la lueur vient de la silhouette placée derrière, seule visible par ses ombres dorées. */
.rig.mesh .lueur { position: absolute; z-index: -1; opacity: 0; pointer-events: none; }
.rig.mesh canvas { position: relative; }
#stage.refonte .fresco.bottom :is(.ent.hero.appel-ordres, .ent.can-act:not(.exhausted)) .rig.mesh .lueur { opacity: 0; }   /* plus de lueur dorée (20/10) */
#stage.refonte .fresco.bottom .ent.can-act { cursor: pointer; }
/* Le filet réservé des vases (choix de l'utilisateur, variante « a ») : un trait noir, puis un fin trait terre cuite qui respire. */
@keyframes appel-ordres {
  0%, 100% { filter: drop-shadow(1.5px 0 0 #0d0805) drop-shadow(-1.5px 0 0 #0d0805) drop-shadow(0 1.5px 0 #0d0805) drop-shadow(0 -1.5px 0 #0d0805)
    drop-shadow(1.5px 0 0 rgba(232,140,80,.55)) drop-shadow(-1.5px 0 0 rgba(232,140,80,.55)) drop-shadow(0 -1.5px 0 rgba(232,140,80,.55)); }
  50% { filter: drop-shadow(1.5px 0 0 #0d0805) drop-shadow(-1.5px 0 0 #0d0805) drop-shadow(0 1.5px 0 #0d0805) drop-shadow(0 -1.5px 0 #0d0805)
    drop-shadow(2px 0 0 #f0a46a) drop-shadow(-2px 0 0 #f0a46a) drop-shadow(0 -2px 0 #f0a46a); } }
/* (21/10) Animations réduites (réglage de l'iPhone) : plus de liseré terre cuite, qui se fondait dans le sol orangé et
   effaçait le contour de Thésée, Héraclès et Jason ; le contour noir de la règle ci-dessus vaut aussi ici. */
@media (prefers-reduced-motion: reduce) { #stage.refonte .fresco.bottom :is(.ent.hero.appel-ordres, .ent.can-act:not(.exhausted)) :is(.fig > :not(:has(.rig.mesh)), .rig.mesh .lueur) { animation: none; } }

/* Offrande : les cartouches du haut (Gloire, trajet) deviennent cliquables quand on peut les sacrifier. */
#stage.refonte .cartouche.sacrifiable { pointer-events: auto; border-radius: 10px; }

/* Défis relevés (essai) : un petit médaillon par Défi dans le ciel, sous le cartouche du tour ; ses pas disent l'étape. */
#stage.refonte .ciel-defis { position: absolute; left: 262px; top: 150px; z-index: 26; display: flex; gap: 14px; }
#stage.refonte .medaillon-defi { all: unset; pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; }
#stage.refonte .medaillon-defi .disque { width: 62px; height: 62px; border-radius: 50%; background: #2a1c12 center / cover no-repeat;
  box-shadow: 0 0 0 2px #1a120c, 0 0 0 4px #d9a548, 0 0 0 5px #1a120c, 0 0 16px rgba(246,212,138,.45); }
#stage.refonte .medaillon-defi.mythe .disque { box-shadow: 0 0 0 2px #1a120c, 0 0 0 4px #f6d48a, 0 0 0 5px #1a120c, 0 0 22px rgba(255,214,120,.75); }
#stage.refonte .medaillon-defi:hover .disque { transform: scale(1.06); }
#stage.refonte .medaillon-defi .pas { display: flex; gap: 4px; }
#stage.refonte .medaillon-defi .pas i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(246,212,138,.7); box-sizing: border-box; }
#stage.refonte .medaillon-defi .pas i.fait { background: #d9a548; border-color: #d9a548; }
#stage.refonte .medaillon-defi .pas i.ici { background: #f6d48a; border-color: #f6d48a; box-shadow: 0 0 6px #f6d48a; }
#stage.refonte .livre.defi-detail { left: 720px; top: 150px; width: 600px; z-index: 80; pointer-events: auto; }
#stage.refonte .livre.defi-detail p { font-style: normal; font-size: 17px; }
#stage.refonte .livre.defi-detail p b { color: #f0b27a; margin-right: 6px; }
#stage.refonte .livre.defi-detail p.fait { opacity: .6; }
#stage.refonte .livre.defi-detail p.ici b { color: #ffd08a; }
#stage.refonte .livre.defi-detail p.ep { font-style: italic; opacity: .8; margin-bottom: 10px; }
#stage.refonte .livre.defi-detail p.gain { margin-top: 12px; color: #ffd08a; }
#stage.refonte .livre.defi-detail p.perte { color: #e9965c; font-size: 15px; }

/* Variante : l'étendard du Héros, planté derrière lui, à gauche (?defi=etendard) ; il porte Destins et Défis. */
/* À la limite de notre terrain, entre l'Entourage et le Périple. */
/* Planté juste derrière le Héros, à sa droite, au-dessus de ses médaillons (proposition de l'utilisateur, 20/10). */
/* Toujours derrière le Héros, dans son dos, sur la même ligne (demande de l'utilisateur, 20/10) : à sa gauche, dans sa
   fresque, au même sol ; il le suit au centre. Son trait noir le détache du décor. */
#stage.refonte .fresco.bottom > .sol-defis { position: absolute; left: 0px; bottom: calc(var(--sol) + 2px); z-index: 1; pointer-events: none; }
#stage.refonte.au-centre .fresco.bottom > .sol-defis { translate: var(--au-centre, 0px) 0; }
/* Pendant une Épreuve, l'étendard s'efface (décision de l'utilisateur). */
#stage.refonte:is(.paysage-epreuve:not(.paysage-rang), .ecran-epreuve) .sol-defis { display: none; }
#stage.refonte .etendard-heros { all: unset; pointer-events: auto; cursor: pointer; display: block; transform-origin: 0 100%;
  animation: etendard-vent 6s ease-in-out infinite, etendard-plante .5s cubic-bezier(.2,.9,.3,1.1); }
@keyframes etendard-plante { from { translate: 0 -60px; opacity: 0; } }
#stage.refonte .etendard-heros svg { display: block; overflow: visible; }
#stage.refonte .etendard-heros .peint { display: block; height: 322px; width: auto;   /* à sa taille, sans agrandissement après coup : net */
  /* détouré comme le Héros : trait noir net (demande de l'utilisateur) */
  filter: drop-shadow(2px 0 0 #0d0805) drop-shadow(-2px 0 0 #0d0805) drop-shadow(0 2px 0 #0d0805) drop-shadow(0 -2px 0 #0d0805)
    drop-shadow(0 0 6px rgba(13,8,5,.35)); }
#stage.refonte .etendard-heros.a-image svg { display: none; }
#stage.refonte .livre.defi-detail h3 small { font: italic 300 14px var(--text); letter-spacing: 0; text-transform: none; opacity: .85; }
#stage.refonte .etendard-heros .hampe { fill: #5a3a1e; stroke: #2a1a0c; stroke-width: 1; }
#stage.refonte .etendard-heros .traverse { fill: #6b4524; stroke: #2a1a0c; stroke-width: 1; }
#stage.refonte .etendard-heros .bouton, #stage.refonte .etendard-heros .pointe { fill: #d9a548; stroke: #6b4a14; stroke-width: 1; }
#stage.refonte .etendard-heros .fanion { stroke: #1a120c; stroke-width: 1; transform-origin: 54px 30px; animation: fanion-vent 2.4s ease-in-out infinite; }
#stage.refonte .etendard-heros .ombre { fill: rgba(0,0,0,.25); }
#stage.refonte .etendard-heros .lisere { fill: none; stroke: #e2b65a; stroke-width: 2.5; stroke-linejoin: round; }
#stage.refonte .etendard-heros .lisere.fin { stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
#stage.refonte .etendard-heros .fond-m { fill: #1a120c; }
#stage.refonte .etendard-heros .cercle { fill: none; stroke: #e2b65a; stroke-width: 2.5; }
#stage.refonte .etendard-heros .item.mythe .cercle { stroke: #ffe7a8; stroke-width: 3; filter: drop-shadow(0 0 4px #ffd27a); }
#stage.refonte .etendard-heros .item:hover .cercle { stroke: #ffe7a8; }
#stage.refonte .etendard-heros .pt { stroke: #f6d48a; stroke-width: 1.3; fill: rgba(26,18,12,.75); }
#stage.refonte .etendard-heros .pt.fait { fill: #d9a548; }
#stage.refonte .etendard-heros .pt.ici, #stage.refonte .etendard-heros .pt.reste { fill: #f6d48a; }
#stage.refonte .etendard-heros .pied { fill: rgba(40,20,8,.45); }
#stage.refonte .livre.defi-detail hr { border: 0; border-top: 1px solid rgba(240,178,122,.3); margin: 12px 40px; }
@keyframes etendard-vent { 0%, 100% { rotate: 0deg; } 50% { rotate: .6deg; } }
@keyframes fanion-vent { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(.9); } }
@media (prefers-reduced-motion: reduce) { #stage.refonte .etendard-heros, #stage.refonte .etendard-heros .fanion { animation: none; } }

/* Défis en cours : un éclat discret dans le ciel, comme une étoile lointaine qui scintille. */
#stage.refonte .eclat-defi { all: unset; pointer-events: auto; cursor: pointer; display: block; width: 30px; height: 30px; padding: 8px; }
#stage.refonte .eclat-defi svg { width: 100%; height: 100%; overflow: visible; fill: #fbe9c0; opacity: .85;
  filter: drop-shadow(0 0 3px rgba(251,233,192,.6)); animation: eclat-scintille 3.2s ease-in-out infinite; }
#stage.refonte .eclat-defi .petit { opacity: .55; }
#stage.refonte .eclat-defi:hover svg { opacity: 1; }
@keyframes eclat-scintille { 0%, 100% { transform: scale(.82) rotate(0deg); opacity: .6; } 45% { transform: scale(1.05) rotate(8deg); opacity: .95; } 55% { transform: scale(1) rotate(8deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { #stage.refonte .eclat-defi svg { animation: none; } }

/* L'Aristie en quatre temps (director.js) : le don, la Gloire de la série (de plus en plus grande), l'aura qui s'éteint. */
.fx-num.aristie-don { font: 400 28px/1 var(--display); letter-spacing: .06em; color: #fff0d0; -webkit-text-stroke: 0; padding: 6px 14px; border-radius: 3px;
  background: rgba(20,8,4,.82); box-shadow: 0 0 0 1px #e07a3a, 0 0 16px rgba(255,110,40,.6); }
.fx-num.aristie-g { color: #fff4cf; -webkit-text-stroke: 2.5px #4a2008; paint-order: stroke fill; text-shadow: 0 0 18px rgba(255,200,90,.95), 0 3px 0 #2a1004; }
.fx-num.aristie-g.ag1 { font-size: 40px; } .fx-num.aristie-g.ag2 { font-size: 54px; }
.fx-num.aristie-g.ag3 { font-size: 68px; } .fx-num.aristie-g.ag4 { font-size: 82px; }
#stage .ent.hero.aura-s-eteint .fig > * { animation: aura-s-eteint 1.5s ease-out forwards !important; }
@keyframes aura-s-eteint { from { filter: drop-shadow(0 0 3px #ff5a1e) drop-shadow(0 0 14px rgba(255,90,30,.9)); } to { filter: drop-shadow(0 0 0 rgba(255,90,30,0)); } }

/* Une carte jouée « se peint » sur la fresque (director.js, peindre) : le trait clair se dessine de gauche à droite,
   puis la couleur monte ; bords fondus, comme peint à même le mur. */
#stage .peinture { position: absolute; z-index: 60; width: 420px; height: 280px; transform: translate(-50%, -50%); pointer-events: none;
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
#stage .peinture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#stage .peinture .trait { filter: grayscale(1) contrast(2.2) brightness(.95) sepia(1) saturate(4) hue-rotate(-12deg); mix-blend-mode: screen; opacity: 0; }
#stage .peinture .couleur { opacity: 0; }

/* Bandes de côté sur un écran plus allongé que la scène (iPhone en paysage) : le décor en cours, agrandi, flouté et
   assombri, au lieu du noir (refonte.js : --fond). La scène reste par-dessus, intacte. */
html { background: #0b0806; }
body::before { content: ""; position: fixed; inset: -60px; z-index: 0; pointer-events: none; background: #0b0806 var(--fond, none) center / cover no-repeat;
  filter: blur(26px) brightness(.42) saturate(.85); transition: background-image .8s; }
/* La jointure scène / bandes : une ombre douce plutôt qu'une arête nette. */
#stage.refonte { box-shadow: 0 0 60px 24px rgba(6,4,3,.7); }
/* Paysage élargi : net, à l'échelle exacte de la scène et centré comme elle ; plus d'ombre à la jointure. */
html.fond-large body::before { inset: 0; filter: none; background-size: auto calc(900px * var(--s, 1)); }
html.fond-large #stage.refonte { box-shadow: none; }

/* ---------- Maquette « le cadre du dieu » (?cadre=zeus) ---------- */
/* La fresque est ce que le dieu regarde ; un cadre propre au dieu l'entoure et porte les commandes. Le cadre (ChatGPT,
   maquettes/cadres/, tools/preparer_cadre.py) est posé en « 9 parts » : coins d'origine, bords répétés, centre vide.
   La fresque, réduite, remplit l'ouverture (un peu de ciel est rogné en haut, sous le bandeau). */
#cadre-dieu { display: none; }
#stage.cadre #cadre-dieu { display: block; position: absolute; inset: 0; z-index: 24; pointer-events: none; box-sizing: border-box;
  border: 120px solid transparent; border-image: var(--cadre-9) 240 / 120px round; }
#stage.cadre #cadre-dieu .haut { position: absolute; left: 50%; top: -120px; width: 338px; height: 98px; translate: -50% 0;
  background: var(--cadre-haut) 0 0 / 100% 100% no-repeat; }
#stage.cadre .fresco.bottom { transform-origin: 0 0; translate: 79px 8px; scale: .8903; }
html.cadre, html.cadre body { background: #080a12; }
html.cadre body::before { display: none; }
#stage.refonte.cadre { box-shadow: none; background: #080a12; }
/* Les commandes sur le cadre : le tour à gauche de l'aigle, la Gloire à droite, le rang suspendu sous l'aigle ;
   l'Encens et la fin du tour sur les coins du bas. */
#stage.cadre .btn-menu-partie { left: 126px; top: 15px; }
#stage.refonte.cadre .cartouche { top: 13px; }
#stage.refonte.cadre .c-tour { left: 200px; width: 250px; }
#stage.refonte.cadre .c-gloire { left: 990px; width: 250px; }
#stage.refonte.cadre .c-rang { left: 570px; width: 300px; top: 96px; height: 58px; }
#stage.refonte.cadre .me-counters { left: 26px; top: 752px; }
#stage.refonte.cadre .main-btn { left: 1288px; top: 762px; }
#stage.refonte.cadre :is(.me-counters, .right-dock) { z-index: 26; }

/* ---------- Maquette « le vase » (?vase=1) ---------- */
/* L'écran entier est un cratère attique (ChatGPT, maquettes/vase/) : la fresque en est la frise, le col porte le tour,
   le rang et la Gloire, les disques des anses l'Encens et la fin du tour. main.js élargit la scène pour que le vase
   (1644 × 900) tienne en hauteur ; --vx, --vy : son coin haut gauche dans la scène. */
#vase-dieu { display: none; }
#stage.vase #vase-dieu { display: block; position: absolute; left: var(--vx); top: var(--vy); width: 1644px; height: 900px; z-index: 24;
  pointer-events: none; background: url('/modular-assets/cadres/vase-essai.png') 0 0 / 100% 100% no-repeat; }
#stage.refonte.vase { background: #000; box-shadow: none; }
html.vase body::before { display: none; }
html.vase, html.vase body { background: #000; }
#stage.vase .fresco.bottom { transform-origin: 0 0; translate: calc(var(--vx) + 296px) calc(var(--vy) + 107px); scale: .7306; }
#stage.refonte.vase .cartouche { top: calc(var(--vy) + 159px); height: 73px; background: none !important; box-shadow: none !important;
  border: 0 !important; color: #f0a46a; }
#stage.refonte.vase .c-tour { left: calc(var(--vx) + 383px); width: 134px; }
#stage.refonte.vase .c-tour b { font-size: 19px; color: #f0a46a; }
#stage.refonte.vase .c-tour i { font-size: 11px; }
#stage.refonte.vase .c-tour small { display: none; }
#stage.refonte.vase .c-rang { left: calc(var(--vx) + 681px); width: 281px; font-size: 11px; letter-spacing: .16em; color: #f0a46a; }
#stage.refonte.vase .c-rang .points { gap: 7px; margin-bottom: 5px; }
#stage.refonte.vase .c-rang .points span { width: 19px; height: 19px; font-size: 9px; border-color: rgba(240,164,106,.6); }
#stage.refonte.vase .c-rang .points span.ici { background: #f0a46a; border-color: #f0a46a; }
#stage.refonte.vase .c-gloire { left: calc(var(--vx) + 1125px); width: 134px; gap: 8px; }
#stage.refonte.vase .gl { gap: 5px; font-size: 11px; color: #f0a46a; }
#stage.refonte.vase .gl .n { width: 30px; height: 30px; font-size: 15px; }
#stage.refonte.vase .gl.adv .n { width: 24px; height: 24px; font-size: 12px; }
#stage.refonte.vase .gl small { display: none; }
#stage.vase .btn-menu-partie { left: calc(var(--vx) + 225px); top: calc(var(--vy) + 167px); width: 52px; height: 52px; background: none; box-shadow: none; }
#stage.vase .btn-menu-partie span { width: 22px; background: #f0a46a; }
#stage.refonte.vase :is(.me-counters, .right-dock) { z-index: 26; }
#stage.refonte.vase .me-counters { left: calc(var(--vx) + 46px); top: calc(var(--vy) + 72px); }
#stage.refonte.vase .me-counters .lab { font-size: 12px; color: #f0a46a; }
#stage.refonte.vase .me-counters .val { font-size: 40px; color: #f0a46a; }
#stage.refonte.vase .main-btn { left: calc(var(--vx) + 1450px); top: calc(var(--vy) + 57px); width: 130px; height: 130px; font-size: 19px; color: #f0a46a; }
#stage.refonte.vase .hand { top: calc(var(--vy) + 660px); }
/* Sur le vase, les commandes sont peintes à même l'argile : ni plaque ni cerne. */
#stage.refonte.vase :is(.me-counters, .main-btn, .main-btn.waiting, .main-btn.pass, .main-btn:hover, .btn-menu-partie) {
  background: none !important; box-shadow: none !important; border: 0 !important; }
#stage.refonte.vase .me-counters { width: 160px !important; height: auto !important; padding: 0 !important;
  left: calc(var(--vx) + 46px) !important; top: calc(var(--vy) + 78px) !important; }
#stage.refonte.vase .main-btn { left: calc(var(--vx) + 1450px) !important; top: calc(var(--vy) + 57px) !important; color: #f0a46a !important; }
#stage.refonte.vase .main-btn small { color: rgba(240,164,106,.7) !important; }
#stage.vase .hand { left: calc(var(--vx) + 102px); right: auto; width: 1440px; }
#stage.refonte.vase .c-gloire { gap: 4px; }
#stage.refonte.vase .gl { gap: 3px; font-size: 10.5px; }

/* ---------- Les boutons-objets (maquettes/boutons/, ChatGPT) ---------- */
/* La fin du tour : le médaillon peint au fond d'une coupe attique ; le texte s'inscrit dans le disque noir du centre. */
#stage.refonte .main-btn, #stage.refonte .main-btn.waiting, #stage.refonte .main-btn.pass, #stage.refonte .main-btn:hover,
#stage.refonte.paysage-epreuve .main-btn, #stage.refonte.paysage-epreuve .main-btn.waiting, #stage.refonte.paysage-epreuve .main-btn:hover {
  left: 1236px; top: 718px; width: 160px; height: 160px; padding: 0 34px; box-sizing: border-box; border-radius: 50%;
  background: url('/modular-assets/boutons/fin-tour.png') center / 100% 100% no-repeat !important; box-shadow: none !important;
  color: #f0a46a !important; font: 400 21px/1.08 var(--display); text-shadow: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); transition: filter .25s, scale .15s; }
#stage.refonte .main-btn small, #stage.refonte.paysage-epreuve .main-btn small { color: rgba(240,164,106,.65) !important; font-size: 10px; }
#stage.refonte .main-btn:hover { scale: 1.04; filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(240,164,106,.45)); }
#stage.refonte .main-btn.waiting, #stage.refonte.paysage-epreuve .main-btn.waiting { font-size: 17px; color: rgba(240,164,106,.6) !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)) brightness(.8); }
/* Plus rien à faire : le médaillon s'éclaire doucement pour inviter à finir le tour. */
#stage.refonte .main-btn.pass { animation: medaillon-appel 2.4s ease-in-out infinite; }
@keyframes medaillon-appel { 50% { filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(240,164,106,.7)); } }

/* L'Encens : une coupe à brûler l'encens, posée sur la fresque ; un filet de fumée monte, le chiffre flotte au-dessus. */
#stage.refonte .me-counters, #stage.refonte.paysage-epreuve .me-counters {
  left: 40px !important; top: 684px !important; width: 172px !important; height: auto !important; padding: 0 !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important; }
#stage.refonte .me-counters .lab { display: none; }
#stage.refonte .me-counters .c-favor > div { position: relative; }
#stage.refonte .me-counters .val, #stage.refonte.paysage-epreuve .me-counters .val { position: relative; z-index: 1; font-size: 48px; margin-bottom: -6px;
  color: #fff1d6 !important; text-shadow: 0 0 1px #140c07, 0 0 2px #140c07, 0 0 3px #140c07, 0 0 4px #140c07, 0 2px 10px rgba(0,0,0,.8) !important; }
#stage.refonte .me-counters .val small, #stage.refonte.paysage-epreuve .me-counters .val small { color: #f3d6a8 !important; }
#stage.refonte .me-counters .c-favor > div::after { content: ""; display: block; width: 160px; height: 153px; margin-top: 0;
  background: url('/modular-assets/boutons/encens-brasero.png') center bottom / contain no-repeat;
  filter: drop-shadow(0 6px 7px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,190,120,.18)); }
/* Deux volutes de fumée, décalées, qui montent de la coupe et se dissipent derrière le chiffre. */
#stage.refonte .me-counters .c-favor > div::before, #stage.refonte .me-counters .c-favor::after {
  content: ""; position: absolute; left: 50%; bottom: 138px; width: 46px; height: 80px; pointer-events: none;
  background: radial-gradient(ellipse 45% 60% at 50% 70%, rgba(250,246,238,.95), rgba(200,190,180,.35) 55%, transparent 72%); filter: blur(4px);
  animation: fumee 3.4s ease-out infinite; }
#stage.refonte .me-counters .c-favor { position: relative; }
#stage.refonte .me-counters .c-favor::after { margin-left: 8px; animation-delay: -1.7s; }
#stage.refonte .me-counters .c-favor > div::before { z-index: 0; }
@keyframes fumee {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.5, .4); }
  25% { opacity: .85; }
  100% { opacity: 0; transform: translate(-30%, -46px) scale(1.5, 1.4) rotate(8deg); } }
/* Variante à comparer (?encens=medaillon) : le médaillon entier, le chiffre dans le bas du disque noir. */
#stage.refonte.encens-medaillon .me-counters, #stage.refonte.encens-medaillon.paysage-epreuve .me-counters { left: 70px !important; top: 690px !important; width: 160px !important; }
#stage.refonte.encens-medaillon .me-counters .c-favor > div { width: 160px; height: 160px; justify-content: flex-end; padding-bottom: 30px; box-sizing: border-box;
  background: url('/modular-assets/boutons/encens-medaillon.png') center / 100% 100% no-repeat; filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
#stage.refonte.encens-medaillon .me-counters .c-favor > div::after { display: none; }
#stage.refonte.encens-medaillon .me-counters .val { font-size: 40px; margin: 0; color: #f0a46a !important; text-shadow: none !important; }
#stage.refonte.encens-medaillon .me-counters .val small { color: rgba(240,164,106,.7) !important; }
#stage.refonte.encens-medaillon .me-counters .c-favor > div::before, #stage.refonte.encens-medaillon .me-counters .c-favor::after { bottom: 112px; width: 26px; height: 48px; }
/* L'indicateur d'Aristie sous l'autel : retiré pour le moment (décision de l'utilisateur), on lui trouvera une autre place. */
#stage.refonte .me-counters .aristie { display: none; }
/* Pendant les choix d'une Épreuve, l'Encens ne sert pas : l'autel s'efface ; les cartes en main restent visibles. */
#stage.refonte .me-counters { transition: opacity .35s; }
#stage.refonte:has(#ui .livre.epreuve) .me-counters { opacity: 0; pointer-events: none; }
/* Le Héros un peu plus grand (et un peu plus avancé : scene.js, HERO_X) ; ses pastilles gardent leur taille. */
/* (22/10, décision de l'utilisateur) Toutes les figures +30 % : à l'échelle des décors peints (l'olivier, le village).
   Héros, Monstres et Compagnons ensemble, pour garder leurs proportions entre eux ; le héros garde son +15 %. */
#stage.refonte { --echelle-figures: 1.3; }
#stage.refonte .fresco.bottom .ent .fig { scale: var(--echelle-figures); transform-origin: 50% 100%; }
#stage.refonte .fresco.bottom .ent.hero .fig { scale: calc(1.15 * var(--echelle-figures)); transform-origin: 50% 100%; }
#stage.refonte .fresco.bottom .ent.periple { z-index: calc(12 - var(--ordre, 0)); }   /* grandes figures : le Monstre le plus proche devant, ses chiffres visibles */
/* Le rang : une tabula ansata en céramique (ChatGPT, maquettes/boutons/) ; les six ronds et le nom s'écrivent dans le
   champ noir du centre (19 %–81 % de la largeur, 23 %–77 % de la hauteur de l'image). */
#stage.refonte .c-rang, #stage.refonte.paysage-epreuve .c-rang { left: 490px; top: 4px; width: 460px; height: 124px;
  padding: 29px 89px 29px; box-sizing: border-box; flex-direction: column;
  background: url('/modular-assets/boutons/rang-tabula.png') center / 100% 100% no-repeat !important; box-shadow: none !important; border-radius: 0 !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); color: #f0a46a !important; font-size: 12.5px; letter-spacing: .2em; }
#stage.refonte .c-rang .points, #stage.refonte.paysage-epreuve .c-rang .points { gap: 8px; margin-bottom: 7px; }
#stage.refonte .c-rang .points span, #stage.refonte.paysage-epreuve .c-rang .points span { width: 20px; height: 20px; font-size: 9px;
  color: #f0a46a !important; border-color: rgba(240,164,106,.6); background: none; box-shadow: none; }
#stage.refonte .c-rang .points span.fait, #stage.refonte.paysage-epreuve .c-rang .points span.fait { background: rgba(240,164,106,.28); }
#stage.refonte .c-rang .points span.ici, #stage.refonte.paysage-epreuve .c-rang .points span.ici { background: #f0a46a; border-color: #f0a46a;
  color: #140c07 !important; box-shadow: 0 0 8px rgba(240,164,106,.55); }
/* Le tour : un tesson de poterie (ostrakon, ChatGPT) ; le texte s'écrit dans le champ noir. */
#stage.refonte .c-tour, #stage.refonte.paysage-epreuve .c-tour { left: 86px; top: 4px; width: 260px; height: 129px; padding: 6px 30px 0 46px; box-sizing: border-box;
  background: url('/modular-assets/boutons/tour-ostrakon.png') center / 100% 100% no-repeat !important; box-shadow: none !important; border-radius: 0 !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); color: #f0a46a !important; }
#stage.refonte .c-tour b, #stage.refonte.paysage-epreuve .c-tour b { color: #f0a46a !important; font-size: 22px; }
#stage.refonte .c-tour i, #stage.refonte.paysage-epreuve .c-tour i { color: #e8b98a !important; font-size: 13px; }
#stage.refonte .c-tour small, #stage.refonte.paysage-epreuve .c-tour small { color: rgba(232,185,138,.7) !important; font-size: 11px; }
/* La Gloire : deux médaillons ceints de laurier (ChatGPT), le chiffre au centre ; l'adversaire plus petit et éteint. */
#stage.refonte .c-gloire, #stage.refonte.paysage-epreuve .c-gloire { left: 1080px; top: 8px; width: 300px; height: 112px; gap: 14px;
  background: none !important; box-shadow: none !important; border: 0 !important; }
#stage.refonte .gl, #stage.refonte.paysage-epreuve .gl { color: #f6e3c4 !important; text-shadow: 0 0 3px #140c07, 0 0 6px #140c07, 0 1px 8px rgba(0,0,0,.8) !important; }
#stage.refonte .gl .n, #stage.refonte.paysage-epreuve .gl .n { width: 92px; height: 92px; font-size: 40px !important; line-height: 1 !important; color: #f0a46a !important; padding-bottom: 4px; box-sizing: border-box;
  background: url('/modular-assets/boutons/gloire-laurier.png') center / 100% 100% no-repeat !important; box-shadow: none !important; border: 0 !important;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.5)); text-shadow: none !important; }
#stage.refonte .gl.adv .n, #stage.refonte.paysage-epreuve .gl.adv .n { width: 64px; height: 64px; font-size: 27px !important; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)) saturate(.45) brightness(.8); }
#stage.refonte .gl small, #stage.refonte.paysage-epreuve .gl small { color: #e8cfae !important; opacity: .85; }
/* Le menu : une pièce de céramique aux trois barres (ChatGPT) ; les barres dessinées du bouton s'effacent. */
#stage.refonte .btn-menu-partie { left: 10px; top: 18px; width: 70px; height: 70px; border: 0 !important; box-shadow: none !important;
  background: url('/modular-assets/boutons/menu-piece.png') center / 100% 100% no-repeat !important; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); transition: scale .15s, filter .2s; }
#stage.refonte .btn-menu-partie span { display: none; }
#stage.refonte .btn-menu-partie:hover { scale: 1.06; box-shadow: none !important; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(240,164,106,.45)); }
/* Les pastilles Force / Défense / PV : trois jetons de céramique (ChatGPT), emblème sur le bord, chiffre au centre. */
#stage.refonte .fresco.bottom .ent .stat { width: 42px !important; height: 43px !important; padding-top: 10px !important; box-sizing: border-box; margin: 0 1px;
  line-height: 33px !important; font-size: 17px !important; color: #f3dcb8 !important; border-radius: 0 !important; box-shadow: none !important;
  background: url('/modular-assets/boutons/pastille-force.png') center / 100% 100% no-repeat !important; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
#stage.refonte .fresco.bottom .ent .stat.d { background-image: url('/modular-assets/boutons/pastille-defense.png') !important; }
#stage.refonte .fresco.bottom .ent .stat.v { background-image: url('/modular-assets/boutons/pastille-pv.png') !important; }
#stage.refonte .fresco.bottom .ent .stat.f.up { color: #ffd27a !important; }
#stage.refonte .fresco.bottom .ent .stat.v.hurt { color: #ff9a7a !important; }
#stage.refonte .fresco.bottom .ent.selected .stat { filter: drop-shadow(0 0 5px rgba(240,164,106,.9)); }
/* Jetons v2 : l'emblème occupe la moitié haute, le chiffre s'écrit dans la bande basse (63 %–89 % de la hauteur). */
#stage.refonte .fresco.bottom .ent .stat { width: 50px !important; height: 50px !important; padding-top: 30px !important;
  line-height: 14px !important; font-size: 15px !important; }
/* Jetons retenus (choix de l'utilisateur) : grand emblème centré, le chiffre par-dessus, au milieu. */
#stage.refonte .fresco.bottom .ent .stat { padding-top: 0 !important; line-height: 50px !important; font-size: 21px !important;
  color: #fff3dc !important; text-shadow: 0 0 2px #0d0805, 0 0 3px #0d0805, 0 0 4px #0d0805, 0 0 6px #0d0805 !important;
  background-image: url('/modular-assets/boutons/pastille-force-c.png') !important; }
#stage.refonte .fresco.bottom .ent .stat.d { background-image: url('/modular-assets/boutons/pastille-defense-c.png') !important; }
#stage.refonte .fresco.bottom .ent .stat.v { background-image: url('/modular-assets/boutons/pastille-pv-c.png') !important; }
#stage.refonte .fresco.bottom .ent .stat.f.up { color: #ffd27a !important; }
#stage.refonte .fresco.bottom .ent .stat.v.hurt { color: #ffab8f !important; }
/* La piété d'Énée : un quatrième jeton, la coupe à libation (provisoire, composé des pastilles en attendant ChatGPT). */
#stage.refonte .fresco .ent .stat.p { background-image: url('/modular-assets/boutons/pastille-piete-c.png') !important; color: #fff3dc !important; }
/* Les plaques de texte (récit, ordres, défis, chronique, menu) : une plaque de céramique à méandre (ChatGPT), posée en
   « 9 parts » : coins à rosette gardés, bords répétés, champ noir au centre. Partout, Épreuves comprises : les couleurs
   de plaque propres à chaque paysage sont remplacées par celles de la céramique. */
#stage.refonte.paysage-epreuve { --plaque-fond: #0d0906 !important; --plaque-filet: #f0a46a !important; --plaque-texte: #f3e3c4 !important; --plaque-titre: #f0a46a !important; }
#stage.refonte :is(.livre, .livre.recit, .chronicle-dock), #stage.refonte.paysage-epreuve :is(.livre, .livre.recit), #stage.refonte .menu-partie .cadre {
  background: #0d0906 !important; box-shadow: 0 6px 16px rgba(0,0,0,.5) !important; border-radius: 0 !important;
  border: 24px solid transparent !important; border-image: url('/modular-assets/boutons/plaque.png') 70 / 24px round !important;
  background-clip: padding-box !important; }
#stage.refonte .livre { padding: 6px 18px 8px; }
#stage.refonte .chronicle-dock { padding: 4px 8px; }
#stage.refonte .menu-partie .cadre { padding: 14px 30px 12px; }
#stage.refonte .livre:not(.defi-detail) { translate: 0 20px; }   /* sous la tabula du rang */
/* Plaques propres à une Épreuve : Circé, tissées comme sa tapisserie (ChatGPT, maquettes/boutons/*-circe.png). */
#stage.refonte[data-paysage="p_circe"] :is(.livre, .livre.recit, .chronicle-dock) {
  background: #1e130c !important; border-image: url('/modular-assets/boutons/plaque-circe.png') 64 / 26px round !important; border-width: 26px !important; }
#stage.refonte[data-paysage="p_circe"] .livre h3 { color: #e9b872 !important; }
/* Pendant une Épreuve (paysage p_…), la plaque du récit prend la place de la tabula du rang, en haut au centre. */
#stage.refonte[data-paysage^="p_"] .c-rang { display: none; }
#stage.refonte[data-paysage^="p_"] .livre:not(.defi-detail) { top: 6px !important; width: 680px !important; translate: 0 0; margin-top: 0 !important; }

/* Le début de son tour : la pancarte « Tour N » au centre ; la fin d'un tour : le bilan de Gloire (director.js). */
#stage .pancarte-tour { position: absolute; left: 720px; top: 330px; translate: -50% -50%; z-index: 95; pointer-events: none; }
#stage .pancarte-tour .pancarte b { font-size: 44px; }
#stage .plaque-bilan { position: absolute; left: 720px; top: 200px; translate: -50% 0; z-index: 96; width: 640px; box-sizing: border-box;
  padding: 10px 26px 12px; background: #0d0906; background-clip: padding-box; border: 24px solid transparent;
  border-image: url('/modular-assets/boutons/plaque.png') 70 / 24px round; box-shadow: 0 12px 30px rgba(0,0,0,.6);
  color: #f3e3c4; font: 400 19px/1.35 var(--text); animation: bilan-entre .35s ease-out both; }
#stage .plaque-bilan h3 { margin: 0 0 10px; text-align: center; font: 400 26px/1.2 var(--display); letter-spacing: .12em; color: #f0a46a; }
#stage .plaque-bilan ul { list-style: none; margin: 0; padding: 0; }
#stage .plaque-bilan li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(240,164,106,.18);
  animation: bilan-ligne .35s ease-out both; }
#stage .plaque-bilan li span { flex: 1; }
#stage .plaque-bilan li b { font: 400 24px/1 var(--display); color: #f6d48a; white-space: nowrap; }
#stage .plaque-bilan li.rien { justify-content: center; font-style: italic; opacity: .75; }
#stage .plaque-bilan .total { margin: 12px 0 0; text-align: center; font: 400 21px/1.2 var(--display); letter-spacing: .06em; color: #f0a46a;
  animation: bilan-ligne .35s ease-out both; }
#stage .plaque-bilan .total b { font-size: 34px; color: #f6d48a; margin-left: 6px; }
#stage .plaque-bilan .total small { display: block; margin-top: 4px; font: italic 400 15px/1.2 var(--text); color: #e8b98a; letter-spacing: 0; }
#stage .plaque-bilan .suite { margin: 10px 0 0; text-align: center; font: italic 400 14px/1 var(--text); opacity: .6; animation: bilan-ligne .5s 1.4s both; }
#stage .plaque-bilan.adverse { top: 150px; width: 520px; font-size: 16px; }
#stage .plaque-bilan.adverse h3 { font-size: 20px; }
@keyframes bilan-entre { from { opacity: 0; translate: -50% 14px; } }
@keyframes bilan-ligne { from { opacity: 0; transform: translateY(6px); } }
@media (hover: none) { #stage .plaque-bilan { width: 760px; font-size: 24px; } #stage .plaque-bilan h3 { font-size: 32px; }
  #stage .plaque-bilan li b { font-size: 30px; } #stage .plaque-bilan.adverse { width: 640px; font-size: 20px; } }

/* L'étoile filante d'une Intervention ou d'un Destin joué (director.js, peindre) : une tête d'or pâle, une traîne de
   terre cuite qui s'efface vers l'arrière (l'étoile en CSS, préférée par l'utilisateur au dessin de ChatGPT). */
#stage .etoile-filante { position: absolute; z-index: 60; width: 230px; height: 3px; margin: -1.5px 0 0 -230px; pointer-events: none;
  transform-origin: 100% 50%; border-radius: 3px;
  background: linear-gradient(90deg, rgba(240,164,106,0) 0%, rgba(240,164,106,.35) 55%, rgba(255,226,170,.9) 92%, #fff6dc 100%);
  filter: drop-shadow(0 0 4px rgba(255,214,150,.75)); }
#stage .etoile-filante::after { content: ""; position: absolute; right: -4px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: radial-gradient(circle, #fffaf0 0%, #ffe2aa 45%, rgba(240,164,106,0) 75%);
  box-shadow: 0 0 10px 3px rgba(255,220,160,.6); }
@media (prefers-reduced-motion: reduce) { #stage .etoile-filante { display: none; } }

/* L'autel (le brasero de l'Encens) se touche pour faire une offrande (décision de l'utilisateur, 18 octobre). */
#stage.refonte .me-counters { pointer-events: auto; cursor: pointer; }

/* La tabula à deux faces (refonte.js) : le rang devant, le ménos derrière ; elle pivote sur son axe vertical. */
#stage.refonte .c-rang, #stage.refonte.paysage-epreuve .c-rang { background: none !important; padding: 0; perspective: 900px;
  pointer-events: auto; cursor: pointer; }
#stage.refonte .c-rang .pivot { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.45,.05,.2,1); }
#stage.refonte .c-rang.retournee .pivot { transform: rotateY(180deg); }
#stage.refonte .c-rang .face { position: absolute; inset: 0; padding: 29px 89px; box-sizing: border-box; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: url('/modular-assets/boutons/rang-tabula.png') center / 100% 100% no-repeat; }
#stage.refonte .c-rang .face.arriere { transform: rotateY(180deg); }
/* Les cinq flammes du ménos : éteintes, un simple trait ; allumées, la terre cuite et un cœur d'or ; jauge pleine, elles
   brûlent doucement. La flamme qui vient de s'allumer jaillit quand la tabula a fini de pivoter. */
#stage.refonte .c-rang .flammes-menos { display: flex; gap: 11px; justify-content: center; margin-bottom: 5px; }
#stage.refonte .c-rang .flammes-menos span { width: 20px; height: 30px; display: block; }
#stage.refonte .c-rang .flammes-menos svg { width: 100%; height: 100%; overflow: visible; }
#stage.refonte .c-rang .flammes-menos path { fill: none; stroke: rgba(240,164,106,.55); stroke-width: 1.4; }
#stage.refonte .c-rang .flammes-menos path.coeur { stroke: none; }
#stage.refonte .c-rang .flammes-menos span.allumee path { fill: #f0a46a; stroke: #f0a46a; filter: drop-shadow(0 0 4px rgba(240,164,106,.7)); }
#stage.refonte .c-rang .flammes-menos span.allumee path.coeur { fill: #ffe2aa; stroke: none; filter: none; }
#stage.refonte .c-rang .flammes-menos span { transform-origin: 50% 100%; }
#stage.refonte .c-rang .flammes-menos.pleine span { animation: flamme-vive 1.6s ease-in-out infinite; }
#stage.refonte .c-rang .flammes-menos.pleine span:nth-child(2n) { animation-delay: -.8s; }
#stage.refonte .c-rang .flammes-menos span.nouvelle { animation: flamme-jaillit .9s .75s cubic-bezier(.2,.9,.3,1.3) backwards; }
@keyframes flamme-vive { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.94, 1.08); } }
@keyframes flamme-jaillit { 0% { transform: scale(.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #stage.refonte .c-rang .pivot { transition: none; } }

/* Les flammes peintes du ménos (ChatGPT, 18 octobre) remplacent le dessin en code : éteinte, allumée. */
#stage.refonte .c-rang .flammes-menos span { width: 21px; height: 32px; background: url('/modular-assets/boutons/menos-eteinte.png') center / contain no-repeat; }
#stage.refonte .c-rang .flammes-menos span.allumee { background-image: url('/modular-assets/boutons/menos-allumee.png'); filter: drop-shadow(0 0 4px rgba(255,190,110,.55)); }
#stage.refonte .c-rang .flammes-menos span svg { display: none; }

/* La trouvaille ramassée en explorant (director.js) : la plaque des ordres, l'effet en clair, la bête en rouge. */
#stage.refonte .livre.plaque-trouvaille { width: 560px; cursor: pointer; }
#stage.refonte .livre.plaque-trouvaille p.fait { font-size: 17px; }
#stage.refonte .livre.plaque-trouvaille p.morsure { margin: 8px 0 2px; color: #ff9a7a; font-style: italic; }

/* La fiche d'un héros, ouverte en touchant son médaillon de Gloire (refonte.js). */
#stage.refonte .c-gloire .gl { pointer-events: auto; cursor: pointer; }
#stage.refonte .livre.fiche-panneau { width: 640px; text-align: left; }
#stage.refonte .livre.fiche-panneau .fiche-nom { font: 400 17px/1.2 var(--display); letter-spacing: .3em; text-transform: uppercase; color: #f0b27a; margin-bottom: 8px; text-align: center; }
#stage.refonte .livre.fiche-panneau .fiche-l { padding: 6px 0; }
#stage.refonte .livre.fiche-panneau .fiche-l + .fiche-l { border-top: 1px solid rgba(233,150,92,.2); }
#stage.refonte .livre.fiche-panneau .fiche-e { display: block; font: 600 11px/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #c9875a; }
#stage.refonte .livre.fiche-panneau .fiche-l b { display: block; font: 600 18px/1.25 var(--display); color: #ffd08a; }
#stage.refonte .livre.fiche-panneau .fiche-t { display: block; font: 300 16px/1.35 var(--text); color: #f3dcc0; }
#stage.refonte .livre.fiche-panneau .fiche-commun { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid rgba(233,150,92,.2); font: italic 300 14px/1.35 var(--text); opacity: .85; }
#stage.refonte .livre.fiche-panneau .choix { text-align: center; }

/* Le don du Héros qui joue (director.js) : un petit signe doré au-dessus de lui, son effet et son nom. */
#stage .signe-don { position: absolute; z-index: 62; pointer-events: none; text-align: center; white-space: nowrap; transform: translate(-50%, 0); }
#stage .signe-don b { display: block; font: 400 26px/1 var(--display); color: #ffe2a0; -webkit-text-stroke: 1.5px #5a2c08; paint-order: stroke fill;
  text-shadow: 0 0 12px rgba(255,200,110,.8); }
#stage .signe-don small { display: block; margin-top: 2px; font: italic 500 14px/1.1 var(--text); color: #ffd9a8; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.8); }

/* Le décor des Moires (director.js) : plein écran, la plaque au centre haut ; à la fin, l'éclair des ciseaux d'Atropos. */
#stage .ecran-moires { position: absolute; inset: 0; z-index: 90; pointer-events: auto; cursor: pointer;
  background: #050302 center / cover no-repeat; }
#stage .ecran-moires .plaque-moires { position: absolute; left: 905px; top: 60px; transform: translate(-50%, 8px); width: 560px; padding: 18px 30px 20px;
  text-align: center; background: #050302; border: 30px solid transparent; border-image: url('/modular-assets/boutons/plaque-moires.png') 70 / 30px round;
  box-sizing: border-box; opacity: 0; transition: opacity .6s, transform .6s; }   /* le cadre peint des Moires (ChatGPT, 19/10) */
#stage .ecran-moires .plaque-moires.visible { opacity: 1; transform: translate(-50%, 0); }
#stage .ecran-moires h3 { margin: 0 0 6px; font: 400 26px/1.15 var(--display); letter-spacing: .22em; text-transform: uppercase; color: #f1c98a; }
#stage .ecran-moires p.phrase { margin: 0 0 10px; font: italic 400 20px/1.3 var(--text); color: #f3e1c2; }
#stage .ecran-moires p.note { margin: 10px 0 0; font: 400 15px/1.3 var(--text); color: rgba(243,225,194,.75); }
#stage .ecran-moires .fil-reste { display: flex; justify-content: center; gap: 6px; }
#stage .ecran-moires .fil-reste i { width: 90px; height: 4px; border-radius: 2px; background: rgba(222,170,90,.18); }
#stage .ecran-moires .fil-reste i.reste { background: linear-gradient(90deg, #b8862e, #ffe0a0, #b8862e); box-shadow: 0 0 8px rgba(255,210,130,.7); }
#stage .ecran-moires .scores { display: flex; justify-content: center; gap: 60px; margin: 8px 0 10px; }
#stage .ecran-moires .scores div { display: flex; flex-direction: column; align-items: center; opacity: .7; }
#stage .ecran-moires .scores div.premier { opacity: 1; }
#stage .ecran-moires .scores b { font: 400 54px/1 var(--display); color: #ffe0a0; text-shadow: 0 0 14px rgba(255,200,110,.6); }
#stage .ecran-moires .scores span { font: 400 16px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: #f1c98a; }
#stage .ecran-moires a.retour-menu { display: inline-block; margin-top: 6px; font: 400 18px/1 var(--display); color: #f1c98a; text-decoration: none;
  border-bottom: 1px solid rgba(241,201,138,.5); padding-bottom: 3px; }
/* Les ciseaux d'Atropos (dans l'image : vers 77 % de la largeur, à mi-hauteur) : un éclair, puis le fil s'éteint à droite. */
#stage .ecran-moires .eclair-ciseaux { position: absolute; left: 1116px; top: 462px; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0; }
#stage .ecran-moires.coupe .eclair-ciseaux { animation: eclair-ciseaux 1.1s ease-out forwards; }
@keyframes eclair-ciseaux { 0% { opacity: 0; box-shadow: 0 0 0 0 rgba(255,236,190,0); background: #fff; }
  15% { opacity: 1; box-shadow: 0 0 40px 22px rgba(255,226,160,.95); } 100% { opacity: 0; box-shadow: 0 0 120px 60px rgba(255,226,160,0); } }

/* Un trésor légendaire trouvé : l'illustration en plein écran, la pancarte et l'effet en bas (19/10). */
#stage .ecran-tresor { position: absolute; inset: 0; z-index: 91; pointer-events: auto; cursor: pointer;
  background: #0b0705 center / cover no-repeat; }
#stage .ecran-tresor::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
#stage .ecran-tresor .plaque-tresor { position: absolute; z-index: 1; left: 50%; bottom: 46px; transform: translate(-50%, 10px);
  display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; transition: opacity .6s ease, transform .6s ease; }
#stage .ecran-tresor .plaque-tresor.visible { opacity: 1; transform: translate(-50%, 0); }
#stage .ecran-tresor .pancarte b { font-size: 34px; }
#stage .ecran-tresor .effet { margin: 0; max-width: 720px; padding: 10px 22px; border-radius: 3px; text-align: center;
  background: rgba(12,8,5,.82); box-shadow: 0 0 0 1px rgba(226,182,90,.55); font: 400 19px/1.35 var(--text); color: #f3e1c2; }

/* L'étendard (20/10) : toujours planté ; il luit quand un Trophée ou un Objet peut servir. Les médaillons de Trophées
   ne sont plus posés au sol : on les retrouve dans l'écran de l'étendard. */
#stage.refonte.avec-etendard .ent.trophy { visibility: hidden; pointer-events: none; }
#stage.refonte .etendard-heros.utilisable .peint, #stage.refonte .etendard-heros.utilisable svg {
  filter: drop-shadow(0 0 2px #ffe7a8) drop-shadow(0 0 10px rgba(255,200,110,.75)); }
/* L'écran de l'étendard. */
#stage .ecran-etendard { position: absolute; inset: 0; z-index: 88; pointer-events: auto; cursor: pointer;
  background: radial-gradient(ellipse at 30% 50%, rgba(40,24,12,.92), rgba(8,5,3,.96)); display: flex; align-items: stretch; }
#stage .ecran-etendard .etendard-fond { flex: none; width: 330px; display: grid; place-items: center; padding-left: 30px; }
#stage .ecran-etendard .etendard-fond img { max-width: 300px; max-height: 640px; width: auto; height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
#stage .ecran-etendard .etendard-page { flex: 1; padding: 40px 540px 30px 10px; overflow-y: auto; cursor: default; color: #f3e1c2; }
#stage .ecran-etendard h2 { margin: 0 0 18px; font: 400 34px/1.1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #f1c98a; }
#stage .ecran-etendard h3 { margin: 22px 0 10px; font: 400 17px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #e2b65a; }
#stage .ecran-etendard .et-defi { max-width: 900px; font: 400 19px/1.35 var(--text); }
#stage .ecran-etendard .et-defi h3 + h3 { margin-top: 0; }
#stage .ecran-etendard .et-defi p { margin: 4px 0; }
#stage .ecran-etendard .et-defi p.ici b { color: #ffd08a; }
#stage .ecran-etendard .et-defi p.gain { color: #ffd08a; } #stage .ecran-etendard .et-defi p.perte { color: #e9965c; font-size: 16px; }
#stage .ecran-etendard .et-cartes { display: flex; flex-wrap: wrap; gap: 16px; }
#stage .ecran-etendard .et-carte { position: relative !important; left: auto !important; top: auto !important; transform: none !important; flex: none;
  zoom: .62; cursor: pointer; }
/* La carte touchée, en grand, à droite de l'écran de l'étendard (demande de l'utilisateur, 20/10). */
#stage .ecran-etendard .et-zoom { position: absolute; right: 70px; top: 96px; display: flex; flex-direction: column; align-items: center; gap: 16px; cursor: default; }
#stage .ecran-etendard .et-grande { position: relative !important; left: auto !important; top: auto !important; transform: none !important; zoom: 1.6;
  box-shadow: 0 14px 40px rgba(0,0,0,.65); }
#stage .ecran-etendard .et-servir { font: 400 20px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #1a0f07; cursor: pointer;
  background: linear-gradient(#ffe2a0, #e2a94e); border: 0; border-radius: 26px; padding: 14px 34px; box-shadow: 0 0 0 2px #6b4a14, 0 0 22px rgba(255,200,110,.55); }
#stage .ecran-etendard .et-carte.choisie { outline: 3px solid #f1c98a; outline-offset: 4px; border-radius: 14px; }
#stage .ecran-etendard .et-carte.utilisable { box-shadow: 0 0 0 4px #ffe7a8, 0 0 24px 8px rgba(255,200,110,.6); border-radius: 14px; }
#stage .ecran-etendard .vide { margin: 0; font: italic 400 17px/1.3 var(--text); opacity: .7; }
#stage .ecran-etendard .et-note { margin: 26px 0 0; font: 400 15px/1.3 var(--text); opacity: .6; }

/* La suite d'une Épreuve (nouveau modèle) : son décor revient, le Héros seul dedans (décision de l'utilisateur, 20/10). */
#stage.refonte.suite-epreuve .fresco.bottom .ent:not(.hero), #stage.refonte.suite-epreuve .sol-defis { display: none !important; }

/* La main rangée en tout petit, en bas à gauche, devant le décor d'une Épreuve (demande de l'utilisateur, 20/10). */
#stage.refonte .hand { transform-origin: 0 100%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
#stage.refonte.main-rangee .hand { transform: translate(-100px, -30px) scale(.55); pointer-events: auto; cursor: pointer; }
#stage.refonte.main-rangee .hand .card { pointer-events: none; }

/* Essai du 22/10 (demande de l'utilisateur) : l'étendard prend la place de l'autel, en bas à gauche ; l'autel de
   l'Encens et le médaillon de fin de tour, réduits, se rangent ensemble en bas à droite. */
#stage.refonte:not(.vase):not(.cadre) .fresco.bottom > .sol-defis { left: 18px !important; bottom: 10px !important; translate: none !important; z-index: 32; }
#stage.refonte:not(.vase):not(.cadre) .etendard-heros .peint { height: 236px; }   /* sous la ligne du sol (22/10), en attendant le tas d'armes */
#stage.refonte:not(.vase):not(.cadre) .me-counters, #stage.refonte.paysage-epreuve:not(.vase):not(.cadre) .me-counters {
  left: 1310px !important; top: 668px !important; transform: scale(.5); transform-origin: 0 0; }   /* au-dessus du bouton, sous la ligne du sol */
#stage.refonte:not(.vase):not(.cadre) .main-btn { left: 1308px; top: 776px; width: 104px; height: 104px; font-size: 16px; }
@media (hover: none) { #stage.refonte:not(.vase):not(.cadre) .main-btn { font-size: 19px; line-height: 1; } }
/* (22/10) Le trophée d'Ulysse devient un tas d'armes couché : large et bas, il tient sous la ligne du sol. */
#stage.refonte:not(.vase):not(.cadre) .etendard-heros[data-heros="Ulysse"] .peint { height: auto; width: 300px; }   /* avant la première carte de la main */
#stage.refonte:not(.vase):not(.cadre) .etendard-heros[data-heros="Ulysse"] { animation: etendard-plante .5s cubic-bezier(.2,.9,.3,1.1); }
/* (22/10) Rang I apulien : le décor porte, peints, le sanctuaire (temple et autel fumant, en haut à droite : on le touche
   pour l'offrande, l'Encens flotte au-dessus) et une pyxide commune à tous les héros (en bas à gauche : on le touche pour
   ouvrir l'étendard). Le jeu n'y pose que des zones à toucher, invisibles. */
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .me-counters { left: 1240px !important; top: 255px !important; width: 150px !important; height: 120px !important;
  transform: none !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .me-counters .c-favor > div::after,
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .me-counters .c-favor > div::before, #stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .me-counters .c-favor::after { display: none; }
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .me-counters .val { font-size: 44px !important; text-align: center; translate: 0 -62px; }
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .fresco.bottom > .sol-defis { left: 10px !important; bottom: 6px !important; }
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .etendard-heros { width: 265px; height: 165px; animation: none; }
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .etendard-heros > * { display: none !important; }
/* (22/10) Le médaillon de fin de tour est peint dans le décor du rang I (en bas à droite) : le bouton s'y pose, sans
   fond ni cercle, son texte au centre du disque noir. */
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .main-btn,
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .main-btn:hover,
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .main-btn.waiting,
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .main-btn.pass {
  left: 1252px !important; top: 739px !important; width: 160px !important; height: 160px !important;
  background: none !important; box-shadow: none !important; border: 0 !important; color: #f3d39a !important; }
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .main-btn::before,
#stage.refonte:is([data-paysage="rang1"], [data-paysage="rang2"], [data-paysage="rang3"], [data-paysage="rang4"], [data-paysage="rang5"], [data-paysage="rang6"]):not(.vase):not(.cadre) .main-btn::after { display: none !important; }
/* (22/10) Rang II figures rouges : pyxide et médaillon aux mêmes places qu'au rang I ; le temple est plus à droite et plus haut. */
#stage.refonte[data-paysage="rang2"]:not(.vase):not(.cadre) .me-counters { left: 1290px !important; top: 222px !important; width: 135px !important; height: 110px !important; }
#stage.refonte[data-paysage="rang5"]:not(.vase):not(.cadre) .me-counters { left: 1245px !important; top: 188px !important; width: 130px !important; height: 100px !important; }
#stage.refonte[data-paysage="rang3"]:not(.vase):not(.cadre) .me-counters { left: 1258px !important; top: 192px !important; width: 128px !important; height: 92px !important; }
#stage.refonte[data-paysage="rang4"]:not(.vase):not(.cadre) .me-counters { left: 1250px !important; top: 132px !important; width: 140px !important; height: 92px !important; }
#stage.refonte[data-paysage="rang4"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1256px !important; top: 706px !important; }
#stage.refonte[data-paysage="rang6"]:not(.vase):not(.cadre) .me-counters { left: 1240px !important; top: 185px !important; width: 150px !important; height: 100px !important; }
#stage.refonte[data-paysage="rang6"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1253px !important; top: 703px !important; }
/* (23/10) Décors propres à Ulysse : l'autel (et l'Encens au-dessus) à sa place peinte ; pyxide et médaillon aux places communes. */
#stage.refonte[data-decor="ulysse-troie"]:not(.vase):not(.cadre) .me-counters { left: 1255px !important; top: 215px !important; width: 160px !important; height: 135px !important; }
#stage.refonte[data-decor="ulysse-cyclope"]:not(.vase):not(.cadre) .me-counters { left: 145px !important; top: 492px !important; width: 140px !important; height: 90px !important; }
#stage.refonte[data-decor="ulysse-circe"]:not(.vase):not(.cadre) .me-counters { left: 45px !important; top: 478px !important; width: 220px !important; height: 115px !important; }
#stage.refonte[data-decor="ulysse-nekuia"]:not(.vase):not(.cadre) .me-counters { left: 1212px !important; top: 278px !important; width: 160px !important; height: 190px !important; }
#stage.refonte[data-decor="ulysse-sirenes"]:not(.vase):not(.cadre) .me-counters { left: 1268px !important; top: 92px !important; width: 112px !important; height: 38px !important; }
#stage.refonte[data-decor="ulysse-ithaque"]:not(.vase):not(.cadre) .me-counters { left: 103px !important; top: 195px !important; width: 108px !important; height: 82px !important; }
#stage.refonte[data-decor="ulysse-sirenes"]:not(.vase):not(.cadre) .me-counters .val { translate: 0 30px; }
/* (26/10) Décors de Jason : l'autel peint */
#stage.refonte[data-decor="jason-pagases"]:not(.vase):not(.cadre) .me-counters { left: 55px !important; top: 330px !important; width: 140px !important; height: 110px !important; }
#stage.refonte[data-decor="jason-lemnos"]:not(.vase):not(.cadre) .me-counters { left: 760px !important; top: 250px !important; width: 210px !important; height: 130px !important; }
#stage.refonte[data-decor="jason-cyzique"]:not(.vase):not(.cadre) .me-counters { left: 1080px !important; top: 170px !important; width: 180px !important; height: 150px !important; }
#stage.refonte[data-decor="jason-symplegades"]:not(.vase):not(.cadre) .me-counters { left: 1060px !important; top: 270px !important; width: 170px !important; height: 130px !important; }
#stage.refonte[data-decor="jason-toison"]:not(.vase):not(.cadre) .me-counters { left: 115px !important; top: 290px !important; width: 175px !important; height: 160px !important; }
/* (27/10) Héraclès : l'Encens sur l'autel peint de chaque décor */
#stage.refonte[data-decor="heracles-tirynthe"]:not(.vase):not(.cadre) .me-counters { left: 1140px !important; top: 365px !important; width: 150px !important; height: 135px !important; }
#stage.refonte[data-decor="heracles-nemee"]:not(.vase):not(.cadre) .me-counters { left: 200px !important; top: 330px !important; width: 140px !important; height: 110px !important; }
#stage.refonte[data-decor="heracles-lerne"]:not(.vase):not(.cadre) .me-counters { left: 815px !important; top: 300px !important; width: 140px !important; height: 105px !important; }
#stage.refonte[data-decor="heracles-augias"]:not(.vase):not(.cadre) .me-counters { left: 120px !important; top: 330px !important; width: 210px !important; height: 150px !important; }
#stage.refonte[data-decor="heracles-hesperides"]:not(.vase):not(.cadre) .me-counters { left: 470px !important; top: 290px !important; width: 140px !important; height: 140px !important; }
#stage.refonte[data-decor="heracles-tenare"]:not(.vase):not(.cadre) .me-counters { left: 955px !important; top: 120px !important; width: 170px !important; height: 90px !important; }
#stage.refonte[data-decor="jason-colchide"]:not(.vase):not(.cadre) .me-counters { left: 40px !important; top: 120px !important; width: 200px !important; height: 110px !important; }   /* le temple touche le haut : l'Encens sous lui */
/* (23/10) Épreuve de héros : le défi en cours, sous la frise haute ; dans l'antre, le gardien est peint dans le décor (sa
   figure s'efface ; ses chiffres et sa zone à toucher restent, posés sur le dessin). */
#stage.refonte .note-defi { position: absolute; left: 50%; top: 118px; translate: -50% 0; z-index: 30; pointer-events: none;
  padding: 6px 20px; border: 1px solid #1a110a; background: rgba(36, 22, 14, .88); color: #f3e3c4; text-align: center;
  font: 400 17px/1.3 var(--text); }
#stage.refonte .note-defi b { display: block; font: 400 20px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #e8b25a; }
#stage.refonte .fresco.bottom .ent.peint .fig { display: none; }
#stage.refonte .fresco.bottom .ent.peint { z-index: 1 !important; scale: 1 !important; translate: none !important; }   /* (26/10) sous les Compagnons : ils restent touchables */
#stage.refonte .fresco.bottom .ent.peint .plaque { position: absolute; top: -190px; bottom: auto; left: 8%; translate: -50% 0; width: max-content; flex-direction: row; }
#stage.refonte .fresco.bottom .ent.peint .plaque .stat.f { display: none; }   /* il dévore : pas d'Attaque */
#stage.refonte[data-paysage="h_cyclope"] .fresco.bottom .ent.peint { left: 880px !important; width: 400px; height: 520px; }   /* Polyphème peint, du genou à la tête */
/* (23/10) Dans l'antre et la grand-salle : « S'endormir » centré dans le disque noir ; pas de bandeau du rang ; l'autel à
   gauche, à sa taille. */
#stage.refonte.en-defi .main-btn, #stage.refonte.en-defi .main-btn:hover, #stage.refonte.en-defi .main-btn.pass {
  padding: 0 !important; font-size: 14px !important; line-height: 1.05 !important; white-space: nowrap; text-align: center; }
#stage.refonte.en-defi:not(.vase):not(.cadre) .main-btn { left: 1294px; top: 762px; width: 128px; height: 128px; }
/* (25/10) Troie, devant les portes : le médaillon peint est plus haut et plus à gauche */
#stage.refonte.en-defi[data-paysage="h_troie"]:not(.vase):not(.cadre) .main-btn { left: 1243px; top: 672px; width: 180px; height: 180px; }   /* il couvre le médaillon peint : un seul bouton */
#stage.refonte.en-defi[data-paysage="h_cyzique"]:not(.vase):not(.cadre) .main-btn { left: 1252px; top: 736px; width: 170px; height: 170px; white-space: normal !important; padding: 0 30px !important; font-size: 17px !important; }   /* (26/10) Cyzique : sur le médaillon peint */
#stage.refonte[data-paysage="h_cyzique"] .fresco.bottom .ent[data-key^="menace:"] { left: 1060px !important; }   /* (26/10) le géant à droite, devant la montagne : la passe reste visible */
#stage.refonte.en-defi .main-btn small { display: none; }
/* (28/10) Augias : le mur, les digues et le fumier sont peints dans le décor ; seules leurs plaques, posées dessus. */
#stage.refonte[data-paysage="h_augias"] .fresco.bottom .ent.peint { height: auto; width: 220px; }
#stage.refonte[data-paysage="h_augias"] .fresco.bottom .ent.peint .plaque { top: auto; bottom: 0; left: 50%; }
#stage.refonte[data-paysage="h_augias"] .fresco.bottom .ent.peint[data-peint="mur"] { left: 700px !important; bottom: 500px !important; height: 120px; }
#stage.refonte[data-paysage="h_augias"] .fresco.bottom .ent.peint[data-peint="alphee"] { left: 330px !important; bottom: 560px !important; height: 100px; }
#stage.refonte[data-paysage="h_augias"] .fresco.bottom .ent.peint[data-peint="penee"] { left: 1080px !important; bottom: 400px !important; height: 150px; }
#stage.refonte[data-paysage="h_augias"] .fresco.bottom .ent.peint[data-peint="fumier"] { left: 820px !important; bottom: 650px !important; height: 70px; }
/* (28/10, l'utilisateur : « deux médaillons, supprimer le petit ») Dans les décors d'Épreuve qui peignent le médaillon en bas
   à droite, le bouton se pose sur son disque noir, sans dessin à lui (mesuré sur chaque image). Ithaque, Circé, la
   Nekuia et le Cyclope n'en peignent pas : ils gardent le bouton dessiné. */
#stage.refonte.en-defi[data-paysage="h_toison"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass), #stage.refonte.en-defi[data-paysage="h_colchide"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass), #stage.refonte.en-defi[data-paysage="h_nemee"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass), #stage.refonte.en-defi[data-paysage="h_lerne"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass), #stage.refonte.en-defi[data-paysage="h_augias"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass), #stage.refonte.en-defi[data-paysage="h_tirynthe"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass), #stage.refonte.en-defi[data-paysage="h_phinee"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass), #stage.refonte.en-defi[data-paysage="h_cyzique"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass), #stage.refonte.en-defi[data-paysage="h_lemnos"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass), #stage.refonte.en-defi[data-paysage="h_pagases"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass), #stage.refonte.en-defi[data-paysage="h_troie"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) {
  background: none !important; box-shadow: none !important; border: 0 !important; filter: none !important; color: #f3d39a !important;
  white-space: normal !important; padding: 0 10px !important; font-size: 15px !important; }
#stage.refonte.en-defi[data-paysage="h_toison"]:not(.vase):not(.cadre) .main-btn::before, #stage.refonte.en-defi[data-paysage="h_toison"]:not(.vase):not(.cadre) .main-btn::after, #stage.refonte.en-defi[data-paysage="h_colchide"]:not(.vase):not(.cadre) .main-btn::before, #stage.refonte.en-defi[data-paysage="h_colchide"]:not(.vase):not(.cadre) .main-btn::after, #stage.refonte.en-defi[data-paysage="h_nemee"]:not(.vase):not(.cadre) .main-btn::before, #stage.refonte.en-defi[data-paysage="h_nemee"]:not(.vase):not(.cadre) .main-btn::after, #stage.refonte.en-defi[data-paysage="h_lerne"]:not(.vase):not(.cadre) .main-btn::before, #stage.refonte.en-defi[data-paysage="h_lerne"]:not(.vase):not(.cadre) .main-btn::after, #stage.refonte.en-defi[data-paysage="h_augias"]:not(.vase):not(.cadre) .main-btn::before, #stage.refonte.en-defi[data-paysage="h_augias"]:not(.vase):not(.cadre) .main-btn::after, #stage.refonte.en-defi[data-paysage="h_tirynthe"]:not(.vase):not(.cadre) .main-btn::before, #stage.refonte.en-defi[data-paysage="h_tirynthe"]:not(.vase):not(.cadre) .main-btn::after, #stage.refonte.en-defi[data-paysage="h_phinee"]:not(.vase):not(.cadre) .main-btn::before, #stage.refonte.en-defi[data-paysage="h_phinee"]:not(.vase):not(.cadre) .main-btn::after, #stage.refonte.en-defi[data-paysage="h_cyzique"]:not(.vase):not(.cadre) .main-btn::before, #stage.refonte.en-defi[data-paysage="h_cyzique"]:not(.vase):not(.cadre) .main-btn::after, #stage.refonte.en-defi[data-paysage="h_lemnos"]:not(.vase):not(.cadre) .main-btn::before, #stage.refonte.en-defi[data-paysage="h_lemnos"]:not(.vase):not(.cadre) .main-btn::after, #stage.refonte.en-defi[data-paysage="h_pagases"]:not(.vase):not(.cadre) .main-btn::before, #stage.refonte.en-defi[data-paysage="h_pagases"]:not(.vase):not(.cadre) .main-btn::after, #stage.refonte.en-defi[data-paysage="h_troie"]:not(.vase):not(.cadre) .main-btn::before, #stage.refonte.en-defi[data-paysage="h_troie"]:not(.vase):not(.cadre) .main-btn::after { display: none !important; }
#stage.refonte.en-defi[data-paysage="h_toison"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1276px !important; top: 772px !important; width: 130px !important; height: 130px !important; }
#stage.refonte.en-defi[data-paysage="h_colchide"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1270px !important; top: 749px !important; width: 129px !important; height: 129px !important; }
#stage.refonte.en-defi[data-paysage="h_nemee"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1261px !important; top: 730px !important; width: 128px !important; height: 128px !important; }
#stage.refonte.en-defi[data-paysage="h_lerne"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1265px !important; top: 732px !important; width: 127px !important; height: 127px !important; }
#stage.refonte.en-defi[data-paysage="h_augias"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1265px !important; top: 727px !important; width: 127px !important; height: 127px !important; }
#stage.refonte.en-defi[data-paysage="h_tirynthe"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1269px !important; top: 748px !important; width: 129px !important; height: 129px !important; }
#stage.refonte.en-defi[data-paysage="h_phinee"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1275px !important; top: 760px !important; width: 130px !important; height: 130px !important; }
#stage.refonte.en-defi[data-paysage="h_cyzique"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1275px !important; top: 761px !important; width: 129px !important; height: 129px !important; }
#stage.refonte.en-defi[data-paysage="h_lemnos"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1270px !important; top: 749px !important; width: 129px !important; height: 129px !important; }
#stage.refonte.en-defi[data-paysage="h_pagases"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1270px !important; top: 749px !important; width: 129px !important; height: 129px !important; }
#stage.refonte.en-defi[data-paysage="h_troie"]:not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) { left: 1269px !important; top: 697px !important; width: 129px !important; height: 129px !important; }
#stage.refonte.en-defi .c-rang { display: none; }
#stage.refonte.en-defi:not(.vase):not(.cadre) .me-counters { left: 46px !important; top: 652px !important; transform: scale(.82) !important; }
/* (23/10) La nuit tombe sur l'antre du Cyclope (« S'endormir ») : le noir monte, la phrase, puis le jour suivant. */
#stage.refonte .nuit-antre { position: absolute; inset: 0; z-index: 90; pointer-events: none; display: grid; place-content: center; gap: 14px;
  background: radial-gradient(ellipse at 70% 60%, rgba(70,28,8,.55), rgba(5,3,2,.97) 70%);
  animation: nuit-antre 3.6s ease-in-out forwards; text-align: center; color: #f0d6a8; }
#stage.refonte .nuit-antre p { margin: 0; font: 400 34px/1.2 var(--display); letter-spacing: .08em; opacity: 0; animation: nuit-texte 3.6s ease-in-out forwards; }
#stage.refonte .nuit-antre .jour { font-size: 26px; letter-spacing: .3em; text-transform: uppercase; color: #e8b25a; animation-name: nuit-jour; }
@keyframes nuit-antre { 0% { opacity: 0; } 25%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nuit-texte { 0%, 15% { opacity: 0; } 30%, 55% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes nuit-jour { 0%, 55% { opacity: 0; } 65%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #stage.refonte .nuit-antre { animation-duration: 1.6s; } }
#stage.refonte .note-defi { display: none !important; }   /* (23/10) l'utilisateur : la plaque du défi ne sert à rien dans l'antre */
#stage.refonte .note-defi.vivante { display: block !important; top: 14px; padding: 4px 16px; font-size: 16px; }   /* (28/10) Lerne, Tirynthe : l'état en direct, une ligne */
#stage.refonte.en-chant .fresco.bottom .ent:not(.small), #stage.refonte.en-chant .me-counters { opacity: 0 !important; pointer-events: none !important; transition: opacity .5s; }   /* le chant des Sirènes */
/* (23/10) Ithaque : les Compagnons à leur tâche. Au combat, à leur place ; à la porte, contre le seuil ; à la
   réserve, en haut de l'escalier, plus petit. */
#stage.refonte .fresco.bottom .ent[data-allie] { transition: left .6s, bottom .6s, scale .6s; }
#stage.refonte .fresco.bottom .ent[data-tache="porte"] { left: -10px !important; z-index: 1 !important; }
#stage.refonte .fresco.bottom .ent[data-tache="reserve"] { left: 1285px !important; bottom: 610px !important; scale: .42 !important; z-index: 1 !important; }

/* (23/10) Au doigt : la carte de la main ouverte en grand, au milieu ; ses flèches pour feuilleter la main (le glissé le
   long de l'éventail, au bas de l'écran, déclenchait le « changer d'app » d'iOS). */
.nav-main { position: absolute; z-index: 91; height: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.nav-main button { pointer-events: auto; width: 76px; height: 76px; margin-top: -38px; border-radius: 50%; border: 2px solid #e2803a;
  background: rgba(20, 12, 7, .82); color: #f0a46a; font: 400 54px/1 var(--display); display: grid; place-items: center; padding: 0 0 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.nav-main button:disabled { opacity: .25; }
.nav-main .rang { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; padding: 6px 16px; border-radius: 18px;
  background: rgba(20, 12, 7, .82); color: #f3d6a8; font: 400 20px/1 var(--display); letter-spacing: .06em; }

/* (23/10) L'aveuglement de Polyphème (director.js) : l’œil peint du géant est vers (928, 110) dans l'antre. */
#stage .scene-aveuglement { position: absolute; inset: 0; z-index: 95; pointer-events: none; }
#stage .scene-aveuglement .fond { position: absolute; inset: 0; background: #120a05 center / cover no-repeat; opacity: 0; }
#stage .scene-aveuglement .voile { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 60% 30%, rgba(60,10,0,.15), rgba(8,4,2,.75) 75%); }
#stage .scene-aveuglement .braise, #stage .scene-aveuglement .eclat, #stage .scene-aveuglement .oeil-eteint {
  position: absolute; left: 720px; top: 330px; translate: -50% -50%; border-radius: 50%; opacity: 0; }
#stage .scene-aveuglement .braise { width: 90px; height: 90px; background: radial-gradient(circle, #fff3c0, #ff8a2a 35%, rgba(200,40,0,.6) 60%, transparent 72%);
  filter: blur(1px); animation: braise 0.5s ease-in-out infinite alternate; }
@keyframes braise { to { filter: blur(3px) brightness(1.3); } }
#stage .scene-aveuglement .eclat { width: 900px; height: 900px; background: radial-gradient(circle, #fff, #ffd38a 25%, rgba(255,90,20,.5) 50%, transparent 70%); }
#stage .scene-aveuglement .oeil-eteint { width: 54px; height: 40px; background: radial-gradient(ellipse, #120604 45%, rgba(90,10,0,.8) 70%, transparent 80%); }
#stage .scene-aveuglement p { position: absolute; left: 50%; translate: -50% 0; margin: 0; width: 1000px; text-align: center; opacity: 0;
  color: #f3e3c4; text-shadow: 0 2px 10px #000, 0 0 3px #000; }
#stage .scene-aveuglement .l1, #stage .scene-aveuglement .l3 { top: 790px; font: italic 400 36px/1.3 var(--text); }
#stage .scene-aveuglement .l2 { top: 260px; left: 36% !important; font: 400 76px/1.1 var(--display); letter-spacing: .04em; color: #ffcf7a; }
#stage.refonte.en-salle .main-btn, #stage.refonte.en-salle .main-btn:hover, #stage.refonte.en-salle .main-btn.pass,
#stage.refonte.en-fosse .main-btn, #stage.refonte.en-fosse .main-btn:hover, #stage.refonte.en-fosse .main-btn.pass {
  white-space: normal !important; padding: 0 22px !important; }   /* « Fin de l'assaut » sur deux lignes */
/* (24/10) La pancarte d'un échec d'Épreuve (le naufrage des Sirènes) : sur le tableau assombri, elle attend un toucher. */
#stage .scene-echec .voile { background: rgba(8, 4, 2, .55); }
#stage .scene-echec .plaque-echec { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 760px; opacity: 0;
  padding: 26px 40px 22px; background: rgba(20, 12, 7, .94); border: 1px solid #c8a060; box-shadow: 0 0 0 4px rgba(20,12,7,.94), 0 0 0 5px #c8a060;
  text-align: center; color: #f3e3c4; }
#stage .scene-echec .plaque-echec h3 { margin: 0 0 12px; font: 400 40px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #e8b25a; }
#stage .scene-echec .plaque-echec p { margin: 0 0 12px; font: 400 26px/1.35 var(--text); }
#stage .scene-echec .plaque-echec .perdu { font-style: italic; color: #f0a46a; }
#stage .scene-echec .plaque-echec button { margin-top: 8px; padding: 10px 34px; border: 1px solid #e8b25a; border-radius: 4px; background: transparent;
  color: #f3e3c4; font: 400 26px/1 var(--display); letter-spacing: .08em; cursor: pointer; }
#stage .scene-echec .plaque-echec p { position: static; translate: none; width: auto; opacity: 1; text-shadow: none; }
#stage .scene-echec .plaque-echec, #stage .scene-echec .plaque-echec button { pointer-events: auto; }
/* (24/10) Les pancartes d'Épreuve (règles, bilans) : le jeu reste visible, assombri, derrière. */
#stage .scene-plaque .voile { background: rgba(8, 4, 2, .5); }
#stage .scene-plaque .plaque-echec { top: 46%; max-height: 780px; overflow: auto; }
#stage .scene-plaque .plaque-echec .lignes p { font-size: 25px; text-align: left; margin: 0 0 10px; }
/* (24/10, l'utilisateur) Pendant le chant des Sirènes, les cartes ne servent à rien : la main s'efface, la pancarte du chant
   descend en bas, ses deux choix côte à côte ; le navire et les Sirènes restent visibles. */
#stage.refonte.en-chant .hand { opacity: 0 !important; pointer-events: none !important; transition: opacity .4s; }
#stage.refonte.en-chant .livre:not(.defi-heros) { top: auto !important; bottom: 26px !important; transform: translateX(-50%) !important;
  width: 1080px !important; max-width: none !important; padding-top: 14px !important; padding-bottom: 14px !important; }
#stage.refonte.en-chant .livre:not(.defi-heros) .choix { display: flex !important; flex-direction: row !important; justify-content: center; gap: 50px; }
#stage.refonte.en-chant .livre:not(.defi-heros) .choix button { margin: 0 !important; }
#stage.refonte.en-chant .main-btn { opacity: 0 !important; pointer-events: none !important; }
#stage.refonte.en-chant .c-rang { display: none !important; }   /* (24/10) pas de tabula du rang pendant le chant, comme dans l'antre */
/* (24/10) Une pancarte ou une scène par-dessus : la main ne prend aucun toucher (le bouton de la pancarte passe avant). */
#stage:has(#ui .scene-aveuglement, #ui .loupe-echange, #ui .ecran-tresor, #ui .ecran-moires) .hand { pointer-events: none !important; }
#stage:has(#ui .scene-aveuglement, #ui .loupe-echange, #ui .ecran-tresor, #ui .ecran-moires) .hand .card { pointer-events: none !important; }
/* (24/10) Circé : la chasse au moly. Ni main, ni bouton de fin de tour, ni tabula ; la pancarte des lieux en bas, ses
   choix sur deux rangs. */
#stage.refonte.en-moly .hand, #stage.refonte.en-moly .main-btn { opacity: 0 !important; pointer-events: none !important; }
#stage.refonte.en-moly .fresco.bottom .ent.hero ~ .ent:not(.hero), #stage.refonte.en-moly .me-counters { opacity: 0 !important; pointer-events: none !important; }
#stage.refonte.en-moly .livre:not(.defi-heros) { top: auto !important; bottom: 22px !important; transform: translateX(-50%) !important;
  width: 1180px !important; max-width: none !important; padding-top: 12px !important; padding-bottom: 12px !important; }
#stage.refonte.en-moly .livre:not(.defi-heros) .choix { display: grid !important; grid-template-columns: repeat(6, auto); justify-content: center; gap: 6px 22px; }
#stage.refonte.en-moly .livre:not(.defi-heros) .choix button { font-size: 25px !important; white-space: nowrap; }
#stage.refonte.en-moly .livre:not(.defi-heros) .choix button { margin: 0 !important; }
/* (24/10, l'utilisateur) Chez Circé : Ulysse en bas à gauche, devant la salle ; la pancarte des lieux à sa droite. */
#stage.refonte.en-moly .fresco.bottom .ent.hero { translate: -110px 250px !important; transition: translate .5s; z-index: 30 !important; }
#stage.refonte.en-moly .livre:not(.defi-heros) { left: 900px !important; width: 1000px !important; }
#stage.refonte.en-moly .livre:not(.defi-heros) .choix { grid-template-columns: repeat(3, auto) !important; gap: 6px 34px !important; }
/* (24/10) Circé : les lieux du bois se touchent dans le décor. Pas de cadre, pas de nom : un scintillement doré, bref
   et décalé d'un lieu à l'autre, attire l'œil ; au toucher, une onde. Un lieu fouillé ne scintille plus. */
#stage .zone-moly { position: absolute; z-index: 40; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#stage .zone-moly .eclat-moly { position: absolute; left: var(--gx); top: var(--gy); width: 46px; height: 46px; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 248, 220, .95) 0 8%, rgba(255, 214, 140, .55) 22%, transparent 60%),
    conic-gradient(from 0deg, transparent 0 10%, rgba(255, 236, 180, .8) 12.5%, transparent 15% 35%, rgba(255, 236, 180, .8) 37.5%, transparent 40% 60%,
      rgba(255, 236, 180, .8) 62.5%, transparent 65% 85%, rgba(255, 236, 180, .8) 87.5%, transparent 90%);
  border-radius: 50%; opacity: 0; filter: blur(.4px); animation: eclat-moly 3.3s ease-in-out var(--delai) infinite; }
@keyframes eclat-moly { 0%, 62%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 74% { opacity: 1; transform: scale(1) rotate(25deg); }
  86% { opacity: 0; transform: scale(.6) rotate(45deg); } }
#stage .zone-moly.fouille .eclat-moly { display: none; }
#stage .zone-moly:active::after { content: ""; position: absolute; left: var(--gx); top: var(--gy); width: 120px; height: 120px; translate: -50% -50%;
  border-radius: 50%; border: 2px solid rgba(255, 230, 170, .7); animation: onde-moly .45s ease-out; }
@keyframes onde-moly { from { transform: scale(.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }
#stage .moly-titre { position: absolute; left: 50%; top: 18px; translate: -50% 0; z-index: 41; display: grid; gap: 4px; text-align: center; pointer-events: none;
  padding: 10px 30px; background: rgba(30, 18, 10, .86); border: 1px solid #c9963f; color: #f6e2bc; font: 400 22px/1.25 var(--text); max-width: 900px; }
#stage .moly-titre b { font: 400 28px/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #f0c070; }
#stage .moly-titre .deja { font-style: italic; color: #f0b880; }
/* (24/10) Le pays des morts : ni main, ni bouton, ni Compagnons ; la pancarte de l'ombre en bas, ses deux choix côte à côte. */
#stage.refonte.en-cheval .main-btn, #stage.refonte.en-argo .main-btn { opacity: 0 !important; pointer-events: none !important; }   /* Troie, la nuit (docs/150) */
/* (25/10) la fosse se joue aux cartes (les vagues d'ombres) : main, bouton et compteurs restent */
#stage.refonte.en-fosse .livre:not(.defi-heros) { top: auto !important; bottom: 24px !important; transform: translateX(-50%) !important;
  width: 1080px !important; max-width: none !important; padding-top: 12px !important; padding-bottom: 12px !important; }
#stage.refonte.en-fosse .livre:not(.defi-heros) .choix { display: flex !important; flex-direction: row !important; justify-content: center; gap: 60px; }
#stage.refonte.en-fosse .livre:not(.defi-heros) .choix button { margin: 0 !important; }
/* (25/10, l'utilisateur : « la pancarte cache encore trop l'illustration ») plus basse et plus serrée */
#stage.refonte.en-fosse .livre:not(.defi-heros) { bottom: 10px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
#stage.refonte.en-fosse .livre:not(.defi-heros) p { margin: 2px 0 !important; line-height: 1.2 !important; }
#stage.refonte.en-fosse .livre:not(.defi-heros) .choix { margin-top: 8px !important; gap: 40px; }
/* (25/10, suite) en bas, les boutons gênaient la barre de l'iPhone : la pancarte monte en haut à gauche, au-dessus de la mer
   (ni la fosse ni les ombres n'y sont) ; les deux choix l'un sous l'autre. */
#stage.refonte.en-fosse .livre:not(.defi-heros) { top: 120px !important; bottom: auto !important; left: 40px !important; transform: none !important;
  width: 600px !important; padding: 6px 18px 10px !important; }
#stage.refonte.en-fosse .livre:not(.defi-heros) h3 { font-size: 22px !important; margin: 4px 0 2px !important; }
#stage.refonte.en-fosse .livre:not(.defi-heros) p { font-size: 21px !important; text-align: left !important; }
#stage.refonte.en-fosse .livre:not(.defi-heros) .choix { flex-direction: column !important; align-items: stretch; gap: 6px !important; margin-top: 8px !important; }
#stage.refonte.en-fosse .livre:not(.defi-heros) .choix button { font-size: 25px !important; text-align: left !important; padding: 6px 4px !important; }
#stage.refonte.en-fosse .fresco.bottom .ent.hero { translate: -110px 0; }   /* (26/10) l'autel est sur l'autre rive : Ulysse à gauche, la fosse libre */

/* (26/10) Lemnos : la pancarte du séjour en haut à gauche, comme celle de la fosse (loin de la barre de l'iPhone) */
#stage.refonte.en-sejour .livre:not(.defi-heros) { top: 120px !important; bottom: auto !important; left: 660px !important; transform: none !important; width: 640px !important; max-width: none !important; padding: 6px 18px 10px !important; }
#stage.refonte.en-sejour .livre:not(.defi-heros) p { font-size: 22px !important; text-align: left !important; margin: 3px 0 !important; line-height: 1.25 !important; }
#stage.refonte.en-sejour .livre:not(.defi-heros) .choix { display: flex !important; flex-direction: column !important; align-items: stretch; gap: 6px !important; margin-top: 8px !important; }
#stage.refonte.en-sejour .livre:not(.defi-heros) .choix button { margin: 0 !important; font-size: 26px !important; text-align: left !important; padding: 6px 4px !important; }
/* (26/10, l'utilisateur : « l'autel ne devrait pas être là ») Dans une Épreuve, plus de brasero dessiné posé sur la
   pyxide : là où l'on ne joue pas de cartes (Troie, Circé, Pagases, Lemnos), pas d'Encens du tout ; ailleurs, le
   chiffre seul, en attendant l'autel peint dans le décor (comme dans les décors des rangs). */
/* (26/10, l'utilisateur) Dans les intérieurs (l'antre, la grand-salle), le brasero dessiné reste : il ne dérange pas. */
#stage.refonte.en-defi:not([data-paysage="h_cyclope"]):not([data-paysage="h_ithaque"]) .me-counters .c-favor > div::after,
#stage.refonte.en-defi:not([data-paysage="h_cyclope"]):not([data-paysage="h_ithaque"]) .me-counters .c-favor > div::before,
#stage.refonte.en-defi:not([data-paysage="h_cyclope"]):not([data-paysage="h_ithaque"]) .me-counters .c-favor::after { display: none !important; }
#stage.refonte:is(.en-argo, .en-sejour, .en-moly, .en-cheval, [data-paysage="h_troie"]) .me-counters { display: none !important; }
/* (26/10) L'Encens sur l'autel peint des décors d'Épreuve (le pays des morts, la passe de Cyzique). */
#stage.refonte[data-paysage="h_cyzique"]:not(.vase):not(.cadre) .me-counters { left: 75px !important; top: 268px !important; width: 120px !important; height: 90px !important; transform: none !important; }
#stage.refonte[data-paysage="h_nekuia"]:not(.vase):not(.cadre) .me-counters { left: 94px !important; top: 150px !important; width: 120px !important; height: 90px !important; transform: none !important; }
/* (26/10) Phinée (décor provisoire : celui des Roches) : l'Encens sur l'autel peint, le bouton sur le médaillon. */
#stage.refonte[data-paysage="h_phinee"]:not(.vase):not(.cadre) .me-counters { left: 82px !important; top: 205px !important; width: 120px !important; height: 90px !important; transform: none !important; }
#stage.refonte.en-defi[data-paysage="h_phinee"]:not(.vase):not(.cadre) .main-btn { left: 1252px; top: 736px; width: 170px; height: 170px; white-space: normal !important; padding: 0 28px !important; font-size: 17px !important; }
/* (26/10) Le champ d'Arès (décor provisoire : celui de la Colchide) : l'Encens sous le temple, le bouton sur le médaillon. */
#stage.refonte[data-paysage="h_colchide"]:not(.vase):not(.cadre) .me-counters { left: 150px !important; top: 110px !important; width: 140px !important; height: 90px !important; transform: none !important; }
#stage.refonte.en-defi[data-paysage="h_colchide"]:not(.vase):not(.cadre) .main-btn { left: 1252px; top: 739px; width: 160px; height: 160px; white-space: normal !important; padding: 0 28px !important; font-size: 17px !important; }
/* (26/10) La Toison : l'Encens sur l'autel peint, le bouton sur le médaillon. */
#stage.refonte[data-paysage="h_toison"]:not(.vase):not(.cadre) .me-counters { left: 48px !important; top: 330px !important; width: 120px !important; height: 90px !important; transform: none !important; }
#stage.refonte[data-paysage="h_toison"] .fresco.bottom .ent.peint { left: 880px !important; width: 540px; height: 560px; z-index: 1 !important; }   /* le dragon peint, autour du chêne ; (26/10) sous les Compagnons, qui restent touchables */
#stage.refonte.en-defi[data-paysage="h_toison"]:not(.vase):not(.cadre) .main-btn { left: 1252px; top: 739px; width: 160px; height: 160px; white-space: normal !important; padding: 0 28px !important; font-size: 17px !important; }
/* (26/10, l'utilisateur : « encore les deux ronds ») Dans les décors d'Épreuve où le médaillon est peint, le bouton
   n'a pas de fond à lui : seul le médaillon peint se voit, le texte au centre du disque noir (comme dans les rangs). */
#stage.refonte.en-defi:is([data-paysage="h_cyzique"], [data-paysage="h_phinee"], [data-paysage="h_colchide"], [data-paysage="h_toison"], [data-paysage="h_tirynthe"], [data-paysage="h_nemee"]):not(.vase):not(.cadre) :is(.main-btn, .main-btn:hover, .main-btn.waiting, .main-btn.pass) {
  left: 1258px !important; top: 739px !important; width: 152px !important; height: 152px !important;
  background: none !important; box-shadow: none !important; border: 0 !important; color: #f3d39a !important; }
#stage.refonte.en-defi:is([data-paysage="h_cyzique"], [data-paysage="h_phinee"], [data-paysage="h_colchide"], [data-paysage="h_toison"], [data-paysage="h_tirynthe"], [data-paysage="h_nemee"]):not(.vase):not(.cadre) .main-btn::before,
#stage.refonte.en-defi:is([data-paysage="h_cyzique"], [data-paysage="h_phinee"], [data-paysage="h_colchide"], [data-paysage="h_toison"], [data-paysage="h_tirynthe"], [data-paysage="h_nemee"]):not(.vase):not(.cadre) .main-btn::after { display: none !important; }
/* (27/10, l'utilisateur) Plus de bandeau blanc de combat : le nuage montre déjà la bagarre. */
#stage.refonte .stage-banner { display: none !important; }

/* (27/10, l'utilisateur : « on les voit à peine ») une figure qui ne peut pas agir reste pleine, pas à demi transparente */
#stage.refonte .fresco .ent.illegal { opacity: 1 !important; }
#stage.refonte[data-paysage="h_tirynthe"]:not(.vase):not(.cadre) .me-counters { left: 1150px !important; top: 380px !important; width: 120px !important; height: 105px !important; transform: none !important; }   /* (27/10) l'Encens sur l'autel d'Héra */
/* (27/10) Au-delà du VI : l'Encens sur l'autel peint de Phlégra, de l'Othrys, du Tartare */
#stage.refonte[data-decor="rang-phlegra"]:not(.vase):not(.cadre) .me-counters { left: 1205px !important; top: 345px !important; width: 190px !important; height: 150px !important; }
#stage.refonte[data-decor="rang-othrys"]:not(.vase):not(.cadre) .me-counters { left: 1185px !important; top: 395px !important; width: 125px !important; height: 110px !important; }
#stage.refonte[data-decor="rang-tartare"]:not(.vase):not(.cadre) .me-counters { left: 100px !important; top: 415px !important; width: 165px !important; height: 120px !important; }
#stage.refonte[data-paysage="h_nemee"]:not(.vase):not(.cadre) .me-counters { left: 65px !important; top: 375px !important; width: 160px !important; height: 125px !important; transform: none !important; }
/* (27/10, essai « Terre cuite », menu) le décor et les figures orangées en rouge-brun mat ; ni les héros (en couleurs) ni les cartes */
html.terre #stage.refonte .fresco.bottom { isolation: isolate; }
html.terre #stage.refonte .fresco.bottom::before { display: block !important; content: "" !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 1440px !important; height: 900px !important;
  margin: 0 !important; transform: none !important; opacity: 1 !important; z-index: -1 !important;
  background: inherit !important; filter: url(#terre) !important; pointer-events: none; mask: none !important; -webkit-mask: none !important; }
/* (27/10, l'utilisateur : « un vrai problème avec les figurines ») teintées, les figures se fondaient dans le décor :
   un contour noir franc les en détache, partout (rangs et Épreuves) */
html.terre #stage.refonte .fresco .ent:not(.hero) img.cut { filter: url(#terre) drop-shadow(2px 0 0 #0d0805) drop-shadow(-2px 0 0 #0d0805)
  drop-shadow(0 2px 0 #0d0805) drop-shadow(0 -2px 0 #0d0805); }
/* (27/10, l'utilisateur : « mon bel Héraclès a pris un coup de vieux ») le héros garde ses couleurs apuliennes */
html.terre #stage .nuage-bagarre { filter: url(#terre); }   /* (27/10) le nuage de bagarre aussi */
/* (27/10, essai « Apulien ») l'orange adouci à l'affichage, en gardant le jaune et le pourpre : décor et figures */
html.apulien #stage.refonte .fresco.bottom { isolation: isolate; }
html.apulien #stage.refonte .fresco.bottom::before { display: block !important; content: "" !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 1440px !important; height: 900px !important;
  margin: 0 !important; transform: none !important; opacity: 1 !important; z-index: -1 !important; mask: none !important; -webkit-mask: none !important;
  background: inherit !important; filter: saturate(.78) brightness(.93) sepia(.08) !important; pointer-events: none; }
html.apulien #stage.refonte .fresco .ent img.cut, html.apulien #stage .nuage-bagarre { filter: saturate(.78) brightness(.95) sepia(.08); }
html.apulien #stage.refonte .fresco:not(.enfers) .ent.hero:not(.exhausted):not(.hades):not(.aristie) .fig > * {
  filter: saturate(.78) brightness(.95) sepia(.08) drop-shadow(2px 0 0 #0d0805) drop-shadow(-2px 0 0 #0d0805) drop-shadow(0 2px 0 #0d0805)
    drop-shadow(0 -2px 0 #0d0805) drop-shadow(0 0 6px rgba(13,8,5,.35)) !important; }
/* (27/10) les Monstres refaits en apulien gardent leurs couleurs (pas de teinte), avec le contour noir */
html.terre #stage.refonte .fresco .ent:not(.hero) img.cut[src*="/apulien/"] { filter: drop-shadow(2px 0 0 #0d0805) drop-shadow(-2px 0 0 #0d0805)
  drop-shadow(0 2px 0 #0d0805) drop-shadow(0 -2px 0 #0d0805); }