/* Mythologie — client de playtest v2. Scène logique 1440 × 900, mise à l'échelle de la fenêtre. */

/* ---------- Jetons ---------- */
:root {
  --sky-1: #e6f0ef; --sky-2: #f5eee1;
  --plaster: #f3e9d6; --plaster-2: #ead9bb;
  --ink: #241d18; --ink-soft: #5b4d40; --paper: #fbf5e6;
  --terracotta: #b4552d; --terracotta-deep: #8f3c1d;
  --bronze: #9a7438; --gold: #d8a93a; --favor: #e2a72e;
  --olive: #66733a; --bordeaux: #7d2636; --rose: #d48a78; --aegean: #2f7f86;
  --legal: #e7b536; --danger: #c2412a; --glory: #6d8a2f; --action: #3b6f8f;
  --display: "Marcellus", Georgia, serif;
  --text: "Alegreya Sans", "Gill Sans", "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.2);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a241e; }
body { font-family: var(--text); color: var(--ink); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }

#viewport { position: fixed; inset: 0; display: grid; place-items: center; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1440px; height: 900px; overflow: hidden; flex: none;
  transform-origin: center center;
  background:
    radial-gradient(ellipse 900px 380px at 50% 47%, rgba(255, 252, 240, .95), transparent 70%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, #efe2c9 100%);
}
#stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; mix-blend-mode: multiply; z-index: 90;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.demo-flag {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 95;
  font: 600 10.5px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: .6;
}

/* ---------- Fresques ---------- */
.fresco {
  position: absolute; left: 16px; right: 16px; border-radius: 6px;
  background:
    radial-gradient(ellipse 60% 90% at 30% 40%, rgba(255, 250, 236, .9), transparent 70%),
    linear-gradient(180deg, var(--plaster) 0%, var(--plaster-2) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px rgba(90, 60, 30, .12);
  transition: filter .5s;
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 11h22V1H6v6h10V4h-6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}
.fresco::before, .fresco::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px; background-color: var(--band); opacity: .55;
  -webkit-mask: var(--meander) repeat-x center / 24px 12px; mask: var(--meander) repeat-x center / 24px 12px;
}
.fresco::before { top: 0; } .fresco::after { bottom: 0; }
.fresco.top { top: 12px; height: 268px; }
.fresco.bottom { top: 352px; height: 280px; }
.fresco.active { box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 2px color-mix(in srgb, var(--band) 45%, transparent), 0 8px 22px rgba(90, 60, 30, .16); }
.fresco.dimmed { filter: saturate(.5) brightness(.97); }
.fresco .ground { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 70px; background: linear-gradient(180deg, transparent, rgba(180, 120, 70, .16)); }
.fresco .path { position: absolute; top: 26px; bottom: 26px; left: 716px; width: 34px;
  background: radial-gradient(circle at 50% 10%, rgba(120,80,40,.35) 2px, transparent 3px) 0 0 / 34px 22px; }
.fresco .zone-label { position: absolute; top: 18px; font: 600 13px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); opacity: .75; }
.fresco .sweep { position: absolute; inset: 12px 0; overflow: hidden; pointer-events: none; }
.fresco .sweep::before { content: ""; position: absolute; top: 0; bottom: 0; width: 34%; left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 250, 228, .42), transparent); mix-blend-mode: soft-light;
  animation: sweep 9s ease-in-out infinite; }
.fresco.top .sweep::before { animation-delay: -4.5s; }
@keyframes sweep { from { left: -40%; } to { left: 110%; } }
.ident { position: absolute; left: 22px; top: 22px; display: flex; align-items: center; gap: 10px; }
.ident .hero-name { font: 700 30px/1 var(--display); }
.ident .god { font: 600 12px/1.1 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.ident .god { color: var(--band); }

/* ---------- Figures ---------- */
.ent { position: absolute; bottom: 14px; width: 150px; height: 226px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  transition: left .5s var(--ease-out), opacity .4s; }
.ent.hero { width: 230px; height: 240px; }
.ent.small { bottom: auto; top: 14px; width: 104px; height: 104px; }
.ent.small .vig, .ent.small .fig-ph { width: 62px !important; height: 62px !important; font-size: 28px !important; box-shadow: 0 0 0 2px rgba(36,29,24,.85); }
.ent.small .plaque { padding: 2px 7px; }
.ent.small .plaque .nm { font-size: 13px; }
.ent.compact .plaque { gap: 3px; padding: 2px 5px; max-width: 128px; }
.ent.compact .plaque .nm { max-width: 62px; overflow: hidden; text-overflow: ellipsis; }
.ent.compact .stat { min-width: 20px; height: 20px; line-height: 20px; font-size: 12px; padding: 0 4px; }
.ent.compact .tag { display: none; }
.ent.compact.exhausted .plaque::after { content: "épuisé"; font: 700 9px/1 var(--text); text-transform: uppercase; color: #6b5d4f; }
.ent .fig { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ent .fig > * { transition: filter .5s, transform .5s, rotate .5s; }
.ent .hit { position: absolute; inset: 10px 0 34px; cursor: pointer; z-index: 3; }
.vig { width: 134px; height: 134px; border-radius: 50%; background-size: cover; background-position: center 25%;
  -webkit-mask: radial-gradient(circle, #000 56%, transparent 71%); mask: radial-gradient(circle, #000 56%, transparent 71%); }
.ent.small .vig, .ent.small .fig-ph { width: 92px; height: 92px; font-size: 38px; }
.fig-ph { width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; color: #f6e7cc; font: 700 50px/1 var(--display);
  background: repeating-radial-gradient(circle, rgba(255,255,255,0) 0 9px, rgba(255,255,255,.12) 9px 10px), radial-gradient(circle at 40% 35%, #c96a3d, var(--terracotta-deep));
  box-shadow: 0 0 0 3px rgba(36,29,24,.85), 0 6px 10px rgba(80,40,10,.2); }
.fig-ph.destin { background: repeating-linear-gradient(170deg, rgba(255,255,255,0) 0 10px, rgba(255,255,255,.14) 10px 12px), radial-gradient(circle at 40% 35%, #4f8f96, #24525a); }
.fig-ph.objet { background: repeating-radial-gradient(circle, rgba(255,255,255,0) 0 7px, rgba(255,255,255,.14) 7px 8px), radial-gradient(circle at 40% 35%, #c9a463, #7c5a25); }
img.cut { max-height: 100%; max-width: 100%; filter: drop-shadow(0 6px 6px rgba(80, 40, 10, .25)); }
.ent.exhausted .fig > * { filter: none; rotate: -4deg; transform-origin: bottom center; }   /* (27/10, l'utilisateur) pas de gris    /* « rotate » : s'ajoute à la respiration (figure.js) */
.ent.hades .fig > * { filter: grayscale(1) brightness(1.25) opacity(.35); }
.ent.empty .fig::before { content: ""; width: 116px; height: 116px; border-radius: 50%; border: 2px dashed rgba(90, 70, 45, .3); }

.plaque { margin-top: 4px; display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 14px;
  background: rgba(250, 244, 230, .94); box-shadow: 0 0 0 1px rgba(90, 70, 45, .25), 0 2px 4px rgba(80, 50, 20, .12); white-space: nowrap; position: relative; z-index: 4; }
.plaque .nm { font: 700 15px/1 var(--display); }
.hero .plaque .nm { font-size: 19px; }
.stat { display: inline-flex; align-items: baseline; justify-content: center; min-width: 24px; height: 24px; line-height: 24px; padding: 0 5px; border-radius: 12px; font: 700 14px/24px var(--text); }
.stat.f { background: var(--terracotta); color: #fff6e6; }
.stat.f.up { background: var(--glory); }
.stat.v { padding: 0 7px; background: #fbf6ea; color: var(--olive); box-shadow: 0 0 0 2px var(--olive) inset; }
.stat.v.hurt { color: var(--danger); box-shadow: 0 0 0 2px var(--danger) inset; }
.stat.v small { font-size: 11px; opacity: .75; margin-left: 1px; }
.hero .stat { height: 28px; line-height: 28px; font-size: 16px; border-radius: 14px; }
.tag { font: 700 10px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 8px; }
.tag.exhaust { background: #d9d0c0; color: #6b5d4f; }
.tag.entrave { background: var(--ink); color: #f3e6cc; }
.tag.cond { background: #4b5d8c; color: #fff; }
.tag.weapon { background: var(--bronze); color: #fff; }
.tag.hades { background: #4a4a55; color: #fff; }
.exploit-chip { position: absolute; top: 4px; right: 2px; display: flex; align-items: center; gap: 2px; padding: 2px 7px 2px 4px; border-radius: 12px;
  background: rgba(250, 244, 230, .95); box-shadow: 0 0 0 1px rgba(109, 138, 47, .55); font: 700 13px/1 var(--text); color: var(--glory); z-index: 4; }
.markers { position: absolute; top: 32px; right: 8px; display: flex; gap: 3px; z-index: 4; }
.markers i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--aegean); }
.markers i.on { background: var(--aegean); }

/* États d'interaction sur les figures */
.ent.legal .fig::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%;
  box-shadow: 0 0 0 4px var(--legal), 0 0 0 12px rgba(231,181,54,.25), 0 0 30px 8px rgba(231,181,54,.4); animation: breathe 1.6s ease-in-out infinite; pointer-events: none; }
.ent.hero.legal .fig::after { width: 200px; height: 200px; margin-left: -100px; bottom: 6px; }
.ent.legal.hot .fig::after { box-shadow: 0 0 0 5px var(--legal), 0 0 0 16px rgba(231,181,54,.35), 0 0 44px 14px rgba(231,181,54,.6); }
.ent.illegal { opacity: .55; }   /* (27/10, l'utilisateur) pas de gris */
.ent.bystander { opacity: .28; filter: saturate(.4); transition: opacity .25s, filter .25s; }
.ent.can-act .plaque { box-shadow: 0 0 0 2px var(--legal), 0 2px 6px rgba(80, 50, 20, .2); }
.ent.selected .plaque { box-shadow: 0 0 0 3px var(--legal), 0 0 14px rgba(231,181,54,.6); }
@keyframes breathe { 0%,100% { opacity: .75; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
.why { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); white-space: nowrap; z-index: 5;
  font: 700 10.5px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: #7d6e5c; background: rgba(243,234,216,.95); padding: 4px 7px; border-radius: 8px; }

/* Rig articulé */
.rig { position: relative; filter: drop-shadow(0 6px 6px rgba(80, 40, 10, .28)); }
.rig .p { position: absolute; inset: 0; }
.rig { transform-origin: 45% 100%; }
.rig img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rig.bronze img, .rig.bronze canvas { filter: sepia(1) saturate(.7) hue-rotate(-12deg) brightness(.5) contrast(1.35); }
.rig-wrap.mirror { transform: scaleX(-1); }

/* ---------- Ligne d'horizon ---------- */
.horizon { position: absolute; left: 16px; right: 16px; top: 284px; height: 64px; }
.race { position: absolute; left: 40px; right: 310px; top: 26px; height: 12px; }
.race .rail { position: absolute; inset: 4px 0; border-radius: 3px; background: linear-gradient(90deg, rgba(109,138,47,.25), rgba(109,138,47,.55)); }
.race .step { position: absolute; top: -2px; width: 2px; height: 16px; background: rgba(90,70,45,.25); }
.race .step.five { height: 20px; top: -4px; background: rgba(90,70,45,.5); }
.race .label { position: absolute; right: 6px; top: -20px; font: 600 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.race .goal { position: absolute; right: -40px; top: -16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fbf5e8; box-shadow: 0 0 0 2px var(--gold); }
.token { position: absolute; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; display: grid; place-items: center;
  font: 700 17px/1 var(--text); color: #fff; box-shadow: 0 0 0 3px #fbf5e8, 0 3px 6px rgba(60,40,20,.3); transition: left .9s var(--ease-out); }
.token { background: var(--c); }
.token.top { top: -31px; }
.token.bottom { top: 5px; }
.token small { position: absolute; left: 44px; top: 13px; font: 700 11.5px/1 var(--text); white-space: nowrap; }
.token small { color: var(--c); }
.turn { position: absolute; right: 16px; top: 6px; width: 240px; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 26px;
  background: rgba(252, 247, 236, .92); box-shadow: 0 0 0 1px rgba(90,70,45,.2), 0 3px 8px rgba(80,50,20,.12); }
.turn .num { font: 700 13px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.turn .who { font: 700 22px/1 var(--display); }
.turn .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 4px rgba(102,115,58,.2); flex: none; }
.turn .dot { background: var(--c, var(--olive)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--olive)) 22%, transparent); }

/* ---------- Compteurs ---------- */
.counter { display: flex; align-items: center; gap: 8px; }
.counter .val { font: 700 26px/1 var(--display); }
.counter .val small { font: 600 14px/1 var(--text); color: var(--ink-soft); margin-left: 2px; }
.lab { font: 600 10.5px/1.1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.pips { display: flex; gap: 4px; margin-top: 4px; }
.pips i { width: 13px; height: 13px; border-radius: 50%; background: var(--favor); box-shadow: 0 0 0 1.5px #a9781a inset, 0 1px 1px rgba(80,50,10,.3); transition: background .3s, box-shadow .3s; }
.pips i.spent { background: #efe3c8; box-shadow: 0 0 0 1.5px rgba(169,120,26,.55) inset; }
.pips i.cap { background: transparent; box-shadow: 0 0 0 1.5px rgba(169,120,26,.25) inset; }
.pips i.cost { background: #fff3cf; box-shadow: 0 0 0 2px var(--danger) inset; }
.opp-counters { position: absolute; left: 22px; top: 70px; display: flex; flex-direction: column; gap: 12px; z-index: 5; }
.cardbacks { display: flex; }
.cardback { width: 18px; height: 26px; border-radius: 3px; background: linear-gradient(135deg, var(--bordeaux), #4d1520); box-shadow: 0 0 0 1.5px #f3e6cc inset, 0 1px 2px rgba(0,0,0,.25); }
.cardback + .cardback { margin-left: -9px; }
.me-counters { position: absolute; left: 30px; top: 652px; width: 260px; display: grid; gap: 14px; z-index: 20; }
.act-token { width: 30px; height: 30px; border-radius: 50%; background: var(--action); display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(59,111,143,.18); flex: none; }
.act-token.used { background: #c9cfd3; box-shadow: none; }
.act-token + .act-token { margin-left: -12px; box-shadow: 0 0 0 2px var(--paper); }
.aristie { display: flex; align-items: center; gap: 10px; }
.aristie .medal { width: 46px; height: 46px; flex: none; transition: filter .6s; }
.aristie b { display: block; font: 700 18px/1 var(--display); }
.aristie span { font: 500 12px/1.2 var(--text); color: var(--ink-soft); }
.aristie.awake .medal { filter: drop-shadow(0 0 10px rgba(231,181,54,.9)); }
.right-dock { position: absolute; right: 30px; top: 652px; width: 240px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; z-index: 20; }
.piles { display: flex; gap: 16px; }
.pile { text-align: center; }
.pile .stack { width: 54px; height: 76px; border-radius: 5px; position: relative; background: linear-gradient(135deg, var(--olive), #3e4720);
  box-shadow: 0 0 0 2px #f3e6cc inset, 2px 2px 0 #d9c7a2, 4px 4px 0 #cdb88f, 0 6px 10px rgba(60,40,20,.25); }
.pile .stack.discard { background: linear-gradient(135deg, #e9dcc1, #cdb994); box-shadow: 0 0 0 2px #a99069 inset, 0 4px 8px rgba(60,40,20,.15); }
.pile .stack b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 22px/1 var(--display); color: #fbf3e2; }
.pile .stack.discard b { color: var(--ink-soft); }
.pile span { display: block; margin-top: 7px; }
.main-btn { width: 210px; height: 64px; border: 0; border-radius: 32px; font: 700 22px/1 var(--display); letter-spacing: .04em; color: #fff8ea; cursor: pointer;
  background: radial-gradient(ellipse at 50% 20%, #d7b26b, var(--bronze) 60%, #7c5a25);
  box-shadow: 0 0 0 3px #f8eed8, 0 0 0 4px rgba(124,90,37,.5), 0 6px 14px rgba(90,60,20,.3); transition: transform .15s, filter .3s; }
.main-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.main-btn small { display: block; font: 600 11px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.main-btn.waiting { background: #e6dccb; color: #8a7b68; box-shadow: 0 0 0 3px #f8eed8, 0 0 0 4px rgba(124,90,37,.25); cursor: default; transform: none; }
.main-btn.pass { background: #f8eedb; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 6px 14px rgba(60,40,20,.2); }
.dock-q { text-align: right; }
.dock-q b { display: block; font: 700 24px/1.05 var(--display); }
.dock-q span { font: 500 13px/1.3 var(--text); color: var(--ink-soft); }

/* ---------- Cartes ---------- */
.hand { position: absolute; left: 0; right: 0; top: 642px; height: 258px; z-index: 30; pointer-events: none; }
.card { position: absolute; width: 170px; height: 232px; border-radius: 11px; background: var(--paper); overflow: hidden; pointer-events: auto; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(90,70,45,.35), 0 0 0 4px var(--frame), 0 0 0 5px rgba(90,70,45,.35), 0 10px 18px rgba(60,40,20,.22);
  transform-origin: 50% 120%; --frame: #e4e3c4;
  transition: left .35s var(--ease-out), top .35s var(--ease-out), transform .35s var(--ease-spring), box-shadow .25s, filter .25s, opacity .25s; }
.card .art { position: absolute; left: 0; right: 0; top: 0; height: 47%; background-size: cover; background-position: center 30%; }
.card .art.ph { background: repeating-radial-gradient(circle at 70% 120%, rgba(255,255,255,0) 0 12px, rgba(255,255,255,.1) 12px 13px), linear-gradient(160deg, #c46a40, var(--terracotta-deep)); }
.card .art.ph.blue { background: repeating-radial-gradient(circle at 70% 120%, rgba(255,255,255,0) 0 12px, rgba(255,255,255,.1) 12px 13px), linear-gradient(160deg, #5d9aa0, #2a5d65); }
.card .art.ph.gold { background: repeating-radial-gradient(circle at 70% 120%, rgba(255,255,255,0) 0 12px, rgba(255,255,255,.12) 12px 13px), linear-gradient(160deg, #c9a463, #7c5a25); }
.card .cost { position: absolute; left: 7px; top: 7px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 21px/1 var(--display); color: #3a2706;
  background: radial-gradient(circle at 35% 30%, #fbe3a0, var(--favor) 60%, #b07d17); box-shadow: 0 0 0 2px var(--paper), 0 2px 4px rgba(0,0,0,.3); }
.card .rar { position: absolute; right: 9px; top: 10px; width: 12px; height: 12px; transform: rotate(45deg); box-shadow: 0 0 0 2px var(--paper); }
.r-commune { background: #b9ad97; } .r-rare { background: var(--aegean); } .r-epique { background: #8a4fa0; } .r-legendaire { background: var(--gold); }
.card .body { position: absolute; left: 0; right: 0; top: 47%; bottom: 0; padding: 7px 10px 8px; display: flex; flex-direction: column; }
.card .nm { font: 700 17px/1.02 var(--display); }
.card .ty { margin-top: 3px; font: 700 9.5px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--tycol); }
.card .tx { margin-top: 5px; font: 400 11.5px/1.25 var(--text); color: #2e261f; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.card .ribbon { position: absolute; left: 0; top: 47%; bottom: 0; width: 4px; background: var(--tycol); }
.card .ex { display: none; }
.t-etre { --tycol: var(--terracotta-deep); } .t-intervention { --tycol: var(--olive); } .t-reaction { --tycol: var(--aegean); }
.t-destin { --tycol: #4b5d8c; } .t-objet, .t-equipement { --tycol: var(--bronze); }
.card.playable { --frame: #f1e2b0; }
.card.unplayable { filter: saturate(.55) brightness(.97); }
.card.dim { filter: saturate(.3) brightness(.93); opacity: .7; }
.card.legal-react { box-shadow: 0 0 0 1px rgba(90,70,45,.35), 0 0 0 4px var(--legal), 0 0 0 9px rgba(231,181,54,.3), 0 18px 28px rgba(60,40,20,.3); }
.card.big { width: 262px; height: 368px; border-radius: 15px; }
.card.big .nm { font-size: 25px; } .card.big .ty { font-size: 11px; margin-top: 5px; }
.card.big .tx { font-size: 15px; line-height: 1.3; margin-top: 9px; display: block; overflow: visible; }
.card.big .cost { width: 46px; height: 46px; font-size: 28px; left: 10px; top: 10px; }
.card.big .ex { display: block; margin-top: auto; padding: 7px 9px; border-radius: 8px; background: rgba(109,138,47,.1); box-shadow: 0 0 0 1px rgba(109,138,47,.35) inset; font: 400 12.5px/1.25 var(--text); }
.card.big .ex b { color: var(--glory); }
.card.zoom { position: absolute; z-index: 50; pointer-events: none; transition: none; }
.card.zoom.survol { transform-origin: 0 0; scale: var(--zoom-carte, 1.4); z-index: 60; }   /* ZOOM de cards.js */
.card.zoom.tenue { transform-origin: 0 0; scale: 1.5; }   /* TENUE d'interaction.js : la carte prise en main */
.card .react-badge { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); padding: 5px 9px; border-radius: 10px; background: var(--ink); color: #fff3d6;
  font: 700 12px/1.15 var(--text); text-align: center; white-space: nowrap; }
.card .react-badge small { display: block; font-weight: 500; opacity: .8; font-size: 10.5px; }
.card-back { position: absolute; width: 170px; height: 232px; border-radius: 11px; background: linear-gradient(135deg, var(--bordeaux), #4d1520);
  box-shadow: 0 0 0 4px #f3e6cc, 0 10px 18px rgba(60,40,20,.3); backface-visibility: hidden; }

/* Carte tenue (sélection) et commandes associées */
.held-tools { position: absolute; z-index: 52; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 20px; border: 0; cursor: pointer;
  background: #fffaf0; box-shadow: 0 0 0 1px rgba(90,70,45,.3), 0 4px 10px rgba(60,40,20,.15); font: 600 13px/1 var(--text); color: var(--ink); }
.chip .ic { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 13px/1 var(--text); }
.chip.go .ic { background: var(--glory); } .chip.offer .ic { background: var(--favor); color: #3a2706; }
.chip kbd { font: 600 11px/1 var(--text); padding: 3px 5px; border-radius: 4px; background: #efe5d2; box-shadow: 0 1px 0 #cbb994; color: var(--ink-soft); }
.hint { position: absolute; z-index: 52; padding: 8px 16px; border-radius: 20px; background: rgba(36,29,24,.88); color: #f8eedb; font: 600 14px/1 var(--text); white-space: nowrap; }
.preview { position: absolute; z-index: 52; padding: 10px 14px; border-radius: 10px; background: #fffaf0; max-width: 360px;
  box-shadow: 0 0 0 1.5px var(--legal), 0 8px 18px rgba(60,40,20,.2); font: 400 14px/1.3 var(--text); }
.preview .k { font: 700 10.5px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); display: block; margin-bottom: 4px; }
.hero-menu { position: absolute; z-index: 52; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Annonce de l'action en cours ---------- */
.stage-banner { position: absolute; left: 700px; top: 286px; width: 478px; z-index: 40; display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 14px; border-radius: 14px; background: rgba(255,250,240,.97); box-shadow: 0 0 0 1.5px var(--c, var(--bordeaux)), 0 10px 24px rgba(60,20,20,.18);
  opacity: 0; transform: translateY(-12px); pointer-events: none; }
.stage-banner .who { font: 700 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--c, var(--bordeaux)); }
.stage-banner .what { font: 700 24px/1.05 var(--display); margin: 3px 0 5px; }
.stage-banner .line { font: 400 13.5px/1.35 var(--text); }
.steps { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.steps .st { display: flex; align-items: center; gap: 8px; font: 600 13px/1.1 var(--text); color: #9a8b78; }
.steps .st i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; flex: none; display: grid; place-items: center; font: 700 10px/1 var(--text); font-style: normal; }
.steps .st.done { color: var(--olive); } .steps .st.done i { background: var(--olive); border-color: var(--olive); color: #fff; }
.steps .st.now { color: var(--c, var(--bordeaux)); } .steps .st.now i { border-color: currentColor; box-shadow: 0 0 0 4px rgba(125,38,54,.15); }
.chronicle { position: absolute; left: 1150px; top: 60px; width: 250px; z-index: 6; display: flex; flex-direction: column; gap: 3px; }
.chronicle .title { font: 700 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 5px; }
.chronicle .row { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1.2 var(--text); color: var(--ink-soft); }
.chronicle .row i { font-style: normal; width: 19px; height: 19px; border-radius: 50%; background: #e9dcc2; display: grid; place-items: center; font: 700 10.5px/1 var(--text); flex: none; }
.chronicle .row.now { color: var(--bordeaux); font-weight: 700; } .chronicle .row.now i { background: var(--bordeaux); color: #fff; }
.toast { position: absolute; left: 50%; top: 300px; transform: translateX(-50%); z-index: 60; padding: 10px 22px; border-radius: 24px;
  background: rgba(36,29,24,.9); color: #f8eedb; font: 700 20px/1.1 var(--display); white-space: nowrap; pointer-events: none; opacity: 0; }
.toast small { display: block; font: 500 12.5px/1.3 var(--text); opacity: .85; text-align: center; }
.fallback-panel { position: absolute; left: 50%; top: 380px; transform: translateX(-50%); z-index: 70; min-width: 360px; max-width: 560px; padding: 16px 18px; border-radius: 14px;
  background: #fffaf0; box-shadow: 0 0 0 1.5px var(--ink), 0 16px 34px rgba(40,20,10,.3); }
.fallback-panel h3 { margin: 0 0 4px; font: 700 22px/1.1 var(--display); }
.fallback-panel p { margin: 0 0 10px; font: 400 13px/1.35 var(--text); color: var(--ink-soft); }
.fallback-panel button { display: block; width: 100%; text-align: left; margin-top: 6px; padding: 9px 12px; border-radius: 10px; border: 0; background: #f3ead6; font: 600 14px/1.2 var(--text); cursor: pointer; }
.fallback-panel button:hover { background: #ecdcb8; }

/* ---------- Effets ---------- */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 80; }
#dust { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fx-num { position: absolute; font: 700 64px/1 var(--display); opacity: 0; text-shadow: 0 3px 0 rgba(0,0,0,.18); white-space: nowrap; }
.fx-num.dmg { color: #fff1e0; -webkit-text-stroke: 2px var(--danger); }
.fx-num.heal { color: #f3fbe6; -webkit-text-stroke: 2px var(--glory); font-size: 48px; }
.fx-num.prev { color: #fff3c9; -webkit-text-stroke: 2px #a97c18; font-size: 34px; }
.fx-num.fav { color: #fff3c9; -webkit-text-stroke: 1.5px #a97c18; font-size: 28px; }
.fx-num.glory { color: #f2f8e2; -webkit-text-stroke: 2px var(--glory); font-size: 46px; }
.fx-num.act { color: #eaf4fb; -webkit-text-stroke: 2px var(--action); font-size: 34px; }
.fx-flash { position: absolute; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,250,230,.95), rgba(255,220,170,.4) 40%, transparent 70%); }
.fx-ring { position: absolute; border-radius: 50%; opacity: 0; box-shadow: 0 0 0 5px var(--legal), 0 0 46px 16px rgba(231,181,54,.6); }
.fx-wave { position: absolute; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; }
.fx-leaf { position: absolute; width: 10px; height: 20px; border-radius: 50%; background: var(--glory); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .fresco .sweep::before, .ent.legal .fig::after { animation: none; }
}

/* Combat sur la céramique : personne ne bouge ; les figures non concernées s'estompent. */
.ent .fig { z-index: 1; }
#scene-fx { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.ent.bystander-soft { opacity: .5; transition: opacity .25s; }
.cutbox { position: relative; display: inline-block; line-height: 0; }
.rig .key-pose { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }

/* Plan rapproché du combat : un bandeau de fresque s'ouvre par-dessus le plateau, les deux adversaires en grand. */
.duel { position: absolute; inset: 0; z-index: 70; pointer-events: none; --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 11h22V1H6v6h10V4h-6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.duel-veil { position: absolute; inset: 0; background: rgba(46, 32, 20, .5); opacity: 0; }
.duel-band { position: absolute; left: 0; right: 0; top: 352px; height: 430px; overflow: hidden;
  background: radial-gradient(ellipse 50% 80% at 50% 45%, rgba(255, 250, 236, .95), transparent 75%), linear-gradient(180deg, var(--plaster) 0%, var(--plaster-2) 100%);
  box-shadow: 0 0 0 1px rgba(90, 60, 30, .3), 0 18px 40px rgba(40, 20, 5, .35); }
.duel-band::before, .duel-band::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; z-index: 3; background-color: var(--band, var(--bronze)); opacity: .6;
  -webkit-mask: var(--meander) repeat-x 0 50% / 28px 14px; mask: var(--meander) repeat-x 0 50% / 28px 14px; }
.duel-band::before { top: 6px; } .duel-band::after { bottom: 6px; }
.duel-cam, .duel-punch { position: absolute; inset: 0; transform-origin: 50% 55%; }
.duel-ent { position: absolute; bottom: 30px; width: 420px; display: flex; flex-direction: column; align-items: center; }
.duel-ent .fig { display: flex; align-items: flex-end; justify-content: center; position: relative; }
.duel-ent .plaque .nm { font-size: 22px; }
.duel-ent .stat { height: 30px; line-height: 30px; font-size: 17px; border-radius: 15px; min-width: 30px; }

/* Rang des Menaces (charte : halos permis quand ils portent un sens). Mineur : plaque simple.
   Majeur : plaque cerclée de bronze. Légendaire : plaque noire à lettres d'or, lavis rouge terre au sol, lueur lente. */
.ent.rang-major .plaque { box-shadow: 0 0 0 2px var(--bronze), 0 2px 4px rgba(80, 50, 20, .15); }
.ent.rang-legendary .plaque { background: #241d18; box-shadow: 0 0 0 2px #c79a3a, 0 2px 6px rgba(60, 20, 5, .35); }
.ent.rang-legendary .plaque .nm { color: #f1d189; letter-spacing: .03em; }
.ent.rang-legendary .tag.entrave { box-shadow: 0 0 0 1px #c79a3a; }
.ent.rang-legendary .fig::before { content: ""; position: absolute; left: 50%; bottom: -6px; width: 250px; height: 210px; margin-left: -125px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 13% at 50% 94%, rgba(150, 44, 28, .42), transparent 100%),
              radial-gradient(ellipse 50% 50% at 50% 62%, rgba(176, 58, 34, .26), transparent 72%);
  animation: rang-lueur 4.6s ease-in-out infinite; }
@keyframes rang-lueur { 0%, 100% { opacity: .65; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .ent.rang-legendary .fig::before { animation: none; } }

/* ---------- Variante Périls : route, dé, métopes ---------- */
.fresco.perils::after { display: none; }
.fresco.perils .ent:not(.small) { bottom: 32px; }
.fresco.perils .zl-periple { visibility: hidden; }
.route { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 24px; display: flex; gap: 4px; z-index: 3; pointer-events: none; }
.route .rang { flex: 1; display: flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 12px; min-width: 0;
  background: color-mix(in srgb, var(--band) 10%, #fbf6ea); box-shadow: 0 0 0 1px color-mix(in srgb, var(--band) 35%, transparent) inset; }
.route .rang.fait { background: color-mix(in srgb, var(--band) 22%, #fbf6ea); }
.route .rang.ici { box-shadow: 0 0 0 2px var(--band) inset; background: #fffaf0; }
.route .nom { font: 700 12px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; margin-right: auto; overflow: hidden; text-overflow: ellipsis; }
.route .nom b { font: 700 13px/1 var(--display); color: var(--band); margin-right: 5px; }
.route .et { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--band) 55%, transparent); background: #fffaf0; flex: none; box-sizing: border-box; }
.route .et.fait { background: var(--band); border-color: var(--band); }
.route .et.heros { width: 22px; height: 22px; border: 2px solid var(--band); display: grid; place-items: center; box-shadow: 0 0 0 4px color-mix(in srgb, var(--band) 25%, transparent); }
.route .et.heros svg { width: 18px; height: 18px; }
.route .et.depart { align-self: center; margin-right: 2px; }
.token small .titre { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }

.de-panneau { position: absolute; left: 470px; top: 290px; width: 500px; min-height: 56px; z-index: 75; display: flex; align-items: center; gap: 14px; padding: 6px 16px; box-sizing: border-box;
  background: #fffaf0; border-radius: 14px; box-shadow: 0 0 0 2px var(--c), 0 10px 26px rgba(60,30,10,.22); pointer-events: none; }
.de-panneau .de { width: 40px; height: 40px; flex: none; border-radius: 9px; background: #f6ecd6; box-shadow: 0 0 0 2px #3a2a1c inset; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 6px; box-sizing: border-box; }
.de-panneau .de i { width: 7px; height: 7px; border-radius: 50%; background: #241d18; place-self: center; }
.de-panneau .t1 { font: 700 12px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.de-panneau .t2 { font: 700 19px/1.15 var(--display); color: #241d18; margin-top: 3px; }

.fresco.revelation .ent.periple, .fresco.revelation .ent.empty { visibility: hidden; }
.metope { position: absolute; top: 10px; width: 186px; height: 226px; z-index: 6; border-radius: 10px; background: #fbf4e4; display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 0 0 1px rgba(90,60,30,.3), 0 8px 18px rgba(80,40,10,.18); padding: 8px 8px 7px; box-sizing: border-box; transition: opacity .4s, transform .4s, filter .4s; }
.metope .img { height: 84px; display: flex; align-items: flex-end; justify-content: center; }
.metope .img img { max-height: 84px; max-width: 168px; }
.metope .img .vig, .metope .img .fig-ph { width: 82px; height: 82px; font-size: 36px; }
.metope .nm { font: 700 17px/1 var(--display); margin-top: 6px; text-align: center; }
.metope .rg { font: 700 12px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; padding: 3px 7px; border-radius: 8px; background: #efe5cf; color: #6b5d4f; white-space: nowrap; }
.metope .rg.r3 { box-shadow: 0 0 0 2px var(--bronze) inset; }
.metope .rg.r4, .metope .rg.r5 { background: #241d18; color: #f1d189; }
.metope .tx { font: 500 12px/1.2 var(--text); color: #3a2f25; text-align: center; margin: 5px 0 6px; overflow: hidden; flex: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.metope .go { margin-top: auto; font: 700 13px/1 var(--text); color: #fff; background: var(--olive); padding: 7px 12px; border: 0; border-radius: 14px; cursor: pointer; box-shadow: 0 0 0 3px rgba(109,138,47,.25); }
.metope .go:hover { filter: brightness(1.1); box-shadow: 0 0 0 4px rgba(231,181,54,.55); }
.metope.choix { box-shadow: 0 0 0 3px var(--legal), 0 0 0 10px rgba(231,181,54,.25), 0 8px 18px rgba(80,40,10,.2); }
.metope.ecarte { opacity: .35; transform: translateY(14px) scale(.94); filter: saturate(.3); }

/* Rangs des Périls (I à V) : III bronze, IV et V noir et or, V avec la lueur des géants. */
.ent.rang-r3 .plaque { box-shadow: 0 0 0 2px var(--bronze), 0 2px 4px rgba(80, 50, 20, .15); }
.ent.rang-r4 .plaque, .ent.rang-r5 .plaque { background: #241d18; box-shadow: 0 0 0 2px #c79a3a, 0 2px 6px rgba(60, 20, 5, .35); }
.ent.rang-r4 .plaque .nm, .ent.rang-r5 .plaque .nm { color: #f1d189; letter-spacing: .03em; }
.ent.rang-r4 .tag.entrave, .ent.rang-r5 .tag.entrave { box-shadow: 0 0 0 1px #c79a3a; }
.ent.rang-r5 .fig::before { content: ""; position: absolute; left: 50%; bottom: -6px; width: 250px; height: 210px; margin-left: -125px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 13% at 50% 94%, rgba(150, 44, 28, .42), transparent 100%), radial-gradient(ellipse 50% 50% at 50% 62%, rgba(176, 58, 34, .26), transparent 72%);
  animation: rang-lueur 4.6s ease-in-out infinite; }
.race .steps-g { display: contents; }
.extra-actions { position: absolute; right: 30px; bottom: 112px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 40; pointer-events: auto; }
.extra-actions button { font: 700 13px/1 var(--text); padding: 7px 12px; border-radius: 14px; border: 0; cursor: pointer; background: #fffaf0; color: var(--ink);
  box-shadow: 0 0 0 2px var(--legal), 0 3px 8px rgba(80,50,20,.18); max-width: 260px; text-align: right; }
.extra-actions button:hover { background: #fff3cf; }

/* Trophées : médaillons d'or au pied du héros (gauche de la fresque), au-dessus de la route. */
.ent.small.trophy { top: auto; bottom: calc(40px + var(--rang, 0) * 52px); width: 48px; height: 48px; }
.fresco.perils .ent.small.trophy { bottom: calc(40px + var(--rang, 0) * 52px); }
.ent.trophy .plaque { display: none; }
.ent.trophy .hit { inset: 0; }
.ent.trophy .fig-ph, .ent.trophy .vig { width: 44px !important; height: 44px !important; font-size: 20px !important;
  background: radial-gradient(circle at 40% 35%, #fff1c2, #d8a93a 70%, #a77a1b) !important; color: #5a3f0c !important;
  box-shadow: 0 0 0 2px #7a5a12, 0 3px 6px rgba(80,50,10,.3) !important; }
.ent.trophy.can-act .fig > * { box-shadow: 0 0 0 3px var(--legal), 0 0 14px 4px rgba(231,181,54,.6) !important; }
.tag .trempe { margin-left: 4px; letter-spacing: 1px; color: #f6e2b0; }
.tag .trempe.pleine { color: #ffd76a; text-shadow: 0 0 6px rgba(255,215,106,.8); }
/* Survol d'une métope : le texte entier et l'Exploit du Péril, par-dessus la route. */
.metope .ex { display: none; font: 500 12px/1.25 var(--text); color: #3a2f25; text-align: center; margin: 0 0 6px; padding-top: 5px; border-top: 1px solid rgba(90,60,30,.2); }
.metope .ex b { color: var(--glory); }
.metope:hover { height: auto; min-height: 226px; z-index: 30; box-shadow: 0 0 0 2px var(--bronze), 0 14px 28px rgba(80,40,10,.28); }
.metope:hover .tx { -webkit-line-clamp: unset; display: block; }
.metope:hover .ex { display: block; }

/* ---------- Climats des Épreuves ---------- */
.climat { position: absolute; left: 0; right: 0; pointer-events: none; overflow: hidden; border-radius: 6px; }
.climat.mer { bottom: 12px; height: 74px; z-index: 0; opacity: 0; transform: translateY(40px); transition: opacity 1.2s, transform 1.4s cubic-bezier(.3,0,.2,1); }
.climat.mer.la { opacity: .82; transform: translateY(0); }
.climat.mer.part { opacity: 0; transform: translateY(50px); }
.climat.mer canvas { position: absolute; left: 0; bottom: 0; }
.fresco.perils .climat.mer { bottom: 30px; }
.climat.vent { inset: 12px 0; z-index: 5; }
.climat.vent .grain { position: absolute; left: 0; width: 3px; height: 2px; border-radius: 50%; background: #d9a85a; box-shadow: -6px 0 4px -1px rgba(217,168,90,.5); }
.climat.vent .plume { position: absolute; left: 0; filter: drop-shadow(0 3px 2px rgba(60,30,10,.25)); }
.fresco.climat-vent .ent:not(.periple):not(.small) .fig { transform-origin: 50% 100%; animation: ploie 2.8s ease-in-out infinite; }
@keyframes ploie { 0%, 100% { transform: skewX(-1deg); } 50% { transform: skewX(-3.5deg); } }
@media (prefers-reduced-motion: reduce) { .fresco.climat-vent .ent .fig { animation: none; } }
/* Figures détourées dans l'Entourage resserré (deux rangées) ou sur l'étagère des Objets : à la taille de la case. */
.ent.compact img.cut, .ent.small img.cut { max-height: 92px !important; max-width: 104px !important; }
.ent.compact .cutbox, .ent.small .cutbox { line-height: 0; }
.climat.averse { inset: 12px 0; z-index: 4; opacity: 0; transition: opacity 1.2s;
  background: url('../../modular-assets/averse.png') repeat 0 0 / 270px 90px; animation: averse .55s linear infinite; }
.climat.averse.la { opacity: .38; }
.climat.averse.part { opacity: 0; }
@keyframes averse { from { background-position: 0 0; } to { background-position: -45px 90px; } }
@media (prefers-reduced-motion: reduce) { .climat.averse { animation: none; } }

/* ---------- Climats de rang V ---------- */
.climat.styx, .climat.moires, .climat.zeus, .climat.rage, .climat.troie { inset: 12px 0; opacity: 0; transition: opacity 1.4s; }
.climat.styx.la, .climat.moires.la, .climat.zeus.la, .climat.rage.la, .climat.troie.la { opacity: 1; }
.climat.part { opacity: 0 !important; }
/* Styx */
.fresco.climat-styx { filter: saturate(.55) brightness(1.03); }
.climat.styx .eau { position: absolute; left: 0; right: 0; bottom: 6px; height: 62px; }
.fresco.perils .climat.styx .eau { bottom: 24px; }
.climat.styx .nappe { position: absolute; bottom: 0; width: 380px; height: 62px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  animation: nappe 7s ease-in-out infinite; }
.climat.styx .nappe:nth-child(2n) { animation-delay: -3.5s; }
@keyframes nappe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.06) translateX(4px); } }
.climat.styx .nappe > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.climat.styx .nappe .corps { background: linear-gradient(180deg, #5d6e75, #34424a 70%, #263137);
  -webkit-mask: url('../../modular-assets/climats/eaux-styx.png') center / 100% 100%; mask: url('../../modular-assets/climats/eaux-styx.png') center / 100% 100%; }
.climat.styx .nappe img { mix-blend-mode: screen; }
.climat.styx .nappe .rouge { background: linear-gradient(180deg, #ff5a26, #c81e0a 70%, #8a1206); opacity: 0; }
.climat.styx .ame { position: absolute; left: 0; top: 0; z-index: 2; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
/* Moires : les trois fileuses dans le ciel de la fresque, estompées ; leur fil descend jusqu'au héros */
.climat.moires .vision { position: absolute; left: 0; right: 0; margin: 0 auto; top: 2px; height: 124px; opacity: .9;
  -webkit-mask: linear-gradient(0deg, transparent 2%, #000 34%); mask: linear-gradient(0deg, transparent 2%, #000 34%); animation: veille 9s ease-in-out infinite; }
@keyframes veille { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.climat.moires .fil { position: absolute; left: 0; top: 0; overflow: visible; }
/* Zeus : l'aigle dans ses nuées, estompé, au-dessus du héros */
.climat.zeus .vision { position: absolute; left: 0; right: 0; margin: 0 auto; top: 2px; height: 92px; filter: drop-shadow(0 4px 4px rgba(60,30,10,.25)); animation: veille 7s ease-in-out infinite; }
/* Lyssa */
.climat.rage { border-radius: 6px; box-shadow: inset 0 0 0 3px rgba(168,40,30,.45), inset 0 0 40px 10px rgba(168,40,30,.35); animation: pouls 1.1s ease-in-out infinite; }
@keyframes pouls { 0%, 100% { opacity: .5; } 12% { opacity: 1; } 24% { opacity: .6; } 36% { opacity: .95; } }
.fresco.climat-rage .ent.hero .fig { animation: tremble .18s linear infinite; }
@keyframes tremble { 0%, 100% { translate: 0 0; } 25% { translate: -1px 0; } 75% { translate: 1px 0; } }
/* Guerre de Troie */
.climat.troie .lueur { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(214,104,40,.32), rgba(214,104,40,.08) 55%, transparent); animation: lueur 2.2s ease-in-out infinite; }
@keyframes lueur { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.climat.troie .lances { position: absolute; left: 0; right: 0; bottom: 52px; height: 46px; background-repeat: repeat-x; background-size: auto 46px; opacity: .55; }
.climat.troie .flammes { position: absolute; left: 0; right: 0; bottom: 16px; height: 58px; background-repeat: repeat-x; background-size: auto 58px; opacity: .8; animation: crepite 1.3s ease-in-out infinite; transform-origin: 50% 100%; }
.fresco.perils .climat.troie .flammes { bottom: 30px; }
@keyframes crepite { 0%, 100% { transform: scaleY(1); } 33% { transform: scaleY(1.08); } 66% { transform: scaleY(.94); } }
.climat.troie .fumee { position: absolute; bottom: 60px; height: 100px; filter: blur(1.5px); }
@media (prefers-reduced-motion: reduce) { .climat.rage, .climat.troie .flammes, .climat.troie .lueur, .climat.styx .nappe, .fresco.climat-rage .ent.hero .fig { animation: none; } }

/* ---------- Fresque adverse en rouleau (maquettes/ciel_v1) ----------
   .pli (posée par pli.js quand une Épreuve occupe le Périple du joueur) : la fresque adverse se replie en
   frise basse, plaques seules, et la fresque du joueur gagne un vrai ciel. Déroulée (tour adverse, cible,
   métope ou clic) : la fresque adverse reprend sa hauteur par-dessus ce ciel, la fresque du joueur s'estompe. */
.deroule { display: none; }
.pli:not(.deroulee) .fresco.top { height: 104px; }
.pli:not(.deroulee) .fresco.top .ent .fig, .pli:not(.deroulee) .fresco.top .zone-label, .pli:not(.deroulee) .fresco.top .path,
.pli:not(.deroulee) .fresco.top .ent.empty, .pli:not(.deroulee) .fresco.top .climat { display: none; }
.pli:not(.deroulee) .fresco.top .ent { height: auto; bottom: 18px; width: auto; top: auto !important; left: var(--pli-x, 24px) !important; }
.pli:not(.deroulee) .fresco.top .ent.compact .plaque { max-width: none; gap: 5px; padding: 3px 8px 3px 6px; }
.pli:not(.deroulee) .fresco.top .ent.compact .plaque .nm { max-width: none; }
.pli:not(.deroulee) .fresco.top .ent.compact .stat { min-width: 24px; height: 24px; line-height: 24px; font-size: 14px; padding: 0 5px; }
.pli:not(.deroulee) .fresco.top.serre .ent .plaque .nm { max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.pli:not(.deroulee) .fresco.top.perils { height: 124px; }
.pli:not(.deroulee) .fresco.top.perils .ent { bottom: 38px; }
.pli:not(.deroulee) .fresco.top .ident { top: 14px; }
.pli:not(.deroulee) .fresco.top .ident .hero-name { font-size: 24px; }
.pli:not(.deroulee) .fresco.top .opp-counters { flex-direction: row; left: auto; right: 24px; top: 16px; gap: 22px; }
.pli .deroule { display: block; position: absolute; left: 520px; top: 16px; z-index: 9; border: 0; cursor: pointer; font: 700 12px/1 var(--text); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); background: #fbf6ea; padding: 6px 14px; border-radius: 12px; box-shadow: 0 1px 4px rgba(80,50,20,.18); }
.pli .deroule:hover { color: var(--ink); background: #fffaf0; }
.pli .deroule[hidden] { display: none; }
.horizon { transition: top .7s cubic-bezier(.2,.8,.2,1); }
.pli:not(.deroulee) .horizon { top: 122px; }
.pli:not(.deroulee):has(.fresco.top.perils) .horizon { top: 138px; }
/* La fresque du joueur, haute : 170 px de ciel au-dessus des figures. */
.fresco.bottom { transition: top .7s cubic-bezier(.2,.8,.2,1), height .7s cubic-bezier(.2,.8,.2,1), filter .35s; }
.fresco.top { transition: height .7s cubic-bezier(.2,.8,.2,1), box-shadow .45s, filter .5s; }
.pli .fresco.bottom { top: 190px; height: 442px; }
.pli .fresco.bottom .climat.zeus .vision { top: 38px; height: 114px; }
.pli .fresco.bottom .climat.moires .vision { top: 36px; height: 132px; }
.pli.deroulee .fresco.top { z-index: 40; box-shadow: 0 14px 30px rgba(60,30,10,.35); }
.pli.deroulee .horizon { z-index: 41; }
.pli.deroulee .fresco.top .ent .fig { animation: deroule-fig .5s ease-out; }
@keyframes deroule-fig { from { opacity: 0; transform: translateY(-14px); } }
.pli.deroulee .stage-banner { top: 358px; z-index: 42; }
/* Estompée pendant le tour adverse, sauf quand elle porte une cible (Réaction sur ses propres figures). */
.pli.deroulee.deroulee-auto .fresco.bottom:not(:has(.ent.legal)) { filter: saturate(.6) brightness(.5); }   /* pas quand on la déroule soi-même */

/* ---------- Fresques attiques (décision du 8 octobre) ----------
   Fond noir de vase, figures orange, décor peint assombri derrière elles (un décor par rang de la route, à venir). */
.fresco, .decor-fondu { --decor: url('../../modular-assets/decors/terres-connues.jpg');
  background: linear-gradient(rgba(20,14,10, calc(var(--voile, .54) + .06)), rgba(20,14,10, var(--voile, .54))), #17110c var(--decor) center bottom / cover no-repeat; }
/* Décision de l'utilisateur (octobre 2026) : le décor est montré à pleine couleur, presque sans voile ; ce sont les
   figures jouables qui se détachent, par un liseré sombre et un léger halo, et non le fond qui s'efface. */
.fresco { --voile: .04; }
.fresco[data-decor="confins"] { --voile: .14; }
.fresco[data-decor="bords-du-monde"] { --voile: .1; }
.fresco .ent .fig > * { filter: drop-shadow(0 0 1.5px #0d0805) drop-shadow(0 0 1.5px #0d0805) drop-shadow(0 0 7px rgba(255, 214, 150, .32)); }
.decor-fondu { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.fresco {
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 18px rgba(40, 25, 10, .35); }
.fresco.active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--band) 55%, transparent), 0 8px 22px rgba(40, 25, 10, .4); }
.fresco .ground { display: none; }
.fresco .sweep::before { opacity: .35; }
.fresco .zone-label { color: #d9a46a; opacity: .85; }
.fresco .ident .hero-name { color: #f3e3c4; }
.fresco .ident .god { filter: brightness(1.6); }
.fresco .path { background: radial-gradient(circle at 50% 10%, rgba(230,160,90,.45) 2px, transparent 3px) 0 0 / 34px 22px; }
.fresco .opp-counters .val, .fresco .opp-counters .val small, .fresco .opp-counters .lab { color: #f3e3c4; }
.pli:not(.deroulee) .fresco.top { background: #17110c; }
.fresco .ent.empty .fig::before { border-color: rgba(230, 170, 110, .32); }
.fresco .ent.empty .nm { color: #d9a46a; }
/* Peintures sombres (flèches, lances, fumée de Troie) : éclaircies pour rester visibles sur le fond noir. */
.climat.troie .lances { filter: brightness(1.9); opacity: .7; }
.climat.troie .fumee { filter: blur(1.5px) brightness(1.7); }

/* ---------- Climats des rangs III et IV ---------- */
.climat.allecto { inset: 12px 0; opacity: 0; transition: opacity 1.4s; }
.climat.allecto.la { opacity: 1; }
/* Fureur d'Allecto : la torche dans le ciel, lueur rouge vacillante sur toute la fresque */
.climat.allecto .torche { position: absolute; top: 4px; height: 96px; rotate: 14deg; filter: drop-shadow(0 0 10px rgba(255, 120, 40, .7)); animation: veille 5s ease-in-out infinite; }
.pli .fresco.bottom .climat.allecto .torche { top: 34px; height: 140px; }
.climat.allecto .lueur { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .7;
  background: radial-gradient(ellipse 60% 80% at var(--ciel-x, 555px) 10%, rgba(200, 50, 20, .35), rgba(150, 30, 10, .12) 60%, transparent 85%); animation: vacille 1.7s steps(6) infinite; }
@keyframes vacille { 0% { filter: brightness(1); } 30% { filter: brightness(1.35); } 55% { filter: brightness(.85); } 80% { filter: brightness(1.2); } 100% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .climat.allecto .lueur, .climat.allecto .torche { animation: none; } }
/* Visions peintes des rangs III et IV : même place que l'aigle de Zeus. */
.climat.calypso, .climat.symplegades, .climat.hera-paon, .climat.nessos, .climat.sirenes, .climat.sphinx, .climat.labyrinthe { inset: 12px 0; opacity: 0; transition: opacity 1.4s; }
.climat.calypso.la, .climat.symplegades.la, .climat.hera-paon.la, .climat.nessos.la, .climat.sirenes.la, .climat.sphinx.la, .climat.labyrinthe.la { opacity: 1; }
.climat.sirenes .vision, .climat.sphinx .vision, .climat.labyrinthe .vision { position: absolute; top: 4px; height: 92px; animation: veille 8s ease-in-out infinite; }
.climat.sirenes .vision { height: 70px; }
.pli .fresco.bottom .climat.sirenes .vision { top: 40px; height: 108px; }
.pli .fresco.bottom .climat.sphinx .vision, .pli .fresco.bottom .climat.labyrinthe .vision { top: 22px; height: 146px; }
.climat.calypso .vision, .climat.symplegades .vision, .climat.hera-paon .vision, .climat.nessos .vision { position: absolute; top: 4px; height: 56px; animation: veille 8s ease-in-out infinite; }
.climat.nessos .vision { height: 92px; animation: veille 4s ease-in-out infinite; }
.pli .fresco.bottom .climat.calypso .vision, .pli .fresco.bottom .climat.symplegades .vision { top: 46px; height: 84px; }
.pli .fresco.bottom .climat.hera-paon .vision { top: 40px; height: 92px; }
.pli .fresco.bottom .climat.nessos .vision { top: 22px; height: 146px; }
/* Petites visions des rangs I et II : un objet seul, plus petit, un peu estompé. */
.climat.petite { inset: 12px 0; opacity: 0; transition: opacity 1.4s; }
.climat.petite.la { opacity: .78; }
.climat.petite .vision { position: absolute; top: 8px; width: auto; height: auto; max-height: 80px; max-width: 100px; animation: veille 9s ease-in-out infinite; }
.pli .fresco.bottom .climat.petite .vision { top: 40px; max-height: 118px; max-width: 140px; }
/* Visions célestes (Zeus, Moires, torche d'Allecto…) : dans le ciel, centrées au-dessus de l'Entourage. */
.climat .vision, .climat.allecto .torche { left: var(--ciel-x, 555px) !important; right: auto !important; margin: 0 !important; transform: translateX(-50%); }

/* Le nom du héros reste lisible par-dessus les climats (falaises, rameaux). */
.fresco .ident { z-index: 8; }
/* Plan des figures : les climats de fond (z 0-1 : mer, Moires, Troie, vigne, falaises, roue d'Héra) passent derrière elles,
   ceux de premier plan (z 3 et plus : Styx, pluie, vent, Zeus, Lyssa, Allecto, Nessos) devant. */
.fresco .ent { z-index: 2; }
/* Ciel ouvert : les malédictions et l'Entourage compact descendent d'autant que la fresque a grandi
   (442 - 280 = 162 px), pour rester au niveau des figures et laisser le ciel aux visions. */
.pli .fresco.bottom .ent.small:not(.trophy):not(.objet), .pli .fresco.bottom .ent.compact { translate: 0 162px; transition: translate .7s cubic-bezier(.2,.8,.2,1), left .5s var(--ease-out); }
.pli .fresco.bottom .ent.small:not(.trophy):not(.compact):not(.objet) { translate: 0 192px; }   /* un peu plus bas encore : la vision garde son ciel */

/* Objets : petits, à part, en colonne contre le chemin du Périple ; le nom et l'effet au survol. */
.ent.small.objet { top: auto; bottom: calc(44px + var(--rang, 0) * 58px); width: 54px; height: 54px; }
.fresco.perils .ent.small.objet { bottom: calc(60px + var(--rang, 0) * 58px); }
.ent.objet img.cut { max-height: 50px !important; max-width: 54px !important; }
.ent.objet .vig, .ent.objet .fig-ph { width: 44px !important; height: 44px !important; font-size: 20px !important; }
.ent.objet .plaque { position: absolute; left: 50%; bottom: 100%; translate: -50% -4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 5; }
.ent.objet:hover .plaque, .ent.objet.legal .plaque, .ent.objet.selected .plaque { opacity: 1; }
.ent.objet .hit { inset: 0; }

/* Choix parmi des cartes (Plan dans l'ombre, défausse…) : les cartes en grand, cliquables. */
.fallback-panel.avec-cartes { top: 120px; max-width: 1240px; text-align: center; }
.fallback-cartes { display: flex; gap: 16px; justify-content: center; margin-top: 8px; }
.fallback-cartes .card.choix { position: relative; left: auto !important; top: auto !important; flex: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
/* Défausse : toute la main en deux rangées lisibles ; la carte touchée se soulève, un bouton confirme. */
.fallback-panel.defausse { top: 112px; width: 1160px; max-width: 1160px; }
.fallback-panel.defausse .fallback-cartes { flex-wrap: wrap; gap: 12px 14px; margin: 18px auto 0; }
.fallback-panel.defausse .card.choix { zoom: .62; }
.fallback-panel.defausse .card.choix.choisie { transform: translateY(-14px); box-shadow: 0 0 0 4px #d9534f, 0 14px 26px rgba(60,40,20,.4); }
.fallback-panel .valider-defausse { display: table; width: auto; margin: 10px auto 0; padding: 10px 26px; text-align: center; background: #8c2f22; color: #fff3e0; font-size: 16px; }
.fallback-panel .valider-defausse:hover { background: #a63a2b; }
.fallback-panel .valider-defausse:disabled { background: #d8ccb4; color: #6e6152; cursor: default; }
.fallback-cartes .card.choix:hover { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--legal), 0 12px 24px rgba(60,40,20,.35); }
/* Bouclier de bronze qui pare (fx.shieldOn avec image) ; sandales d'Hermès au-dessus de la route. */
.fx-bouclier { position: absolute; aspect-ratio: 277 / 827; background: center / contain no-repeat; opacity: 0;
  filter: drop-shadow(0 0 10px rgba(231,181,54,.7)) drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.sandales-vol { position: absolute; width: 90px; z-index: 60; pointer-events: none; filter: drop-shadow(0 0 8px rgba(231,181,54,.6)); }

/* Entourage compact (plus de trois Compagnons) : plaque sur deux lignes, nom au-dessus des valeurs, pour tenir dans sa case. */
.ent.compact .plaque { flex-wrap: wrap; justify-content: center; max-width: 74px; row-gap: 1px; padding: 2px 4px; }
.ent.compact .plaque .nm { flex: 0 0 100%; max-width: 70px; text-align: center; font-size: 12px; }
.pli:not(.deroulee) .fresco.top .ent.compact .plaque { flex-wrap: nowrap; } .pli:not(.deroulee) .fresco.top .ent.compact .plaque .nm { flex: none; }
.ent.embleme, .cutbox.embleme img { filter: drop-shadow(0 0 6px rgba(231,181,54,.35)); }

/* ---------- Fresque épurée (octobre 2026) ----------
   Plus de plaques : Force et Vitalité en deux petits disques de glaçure noire (chiffres en Marcellus), filet vert / filet rouge, en bas à droite
   de la figure ; nom et carte au survol. Ni « Entrave » ni « Épuisé » écrits (la figure épuisée est grisée) ; les
   étiquettes utiles (Arme, Hadès, conditions) restent en petit italique sous les disques. La fresque adverse repliée
   (frise du ciel ouvert) garde ses plaques. Le pointillé entre Entourage et Périple disparaît. */
.fresco.bottom .path, #stage:not(.pli) .fresco.top .path, #stage.deroulee .fresco.top .path { display: none; }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent:not(.objet):not(.trophy) .plaque {
  position: absolute; left: calc(50% + 26px); bottom: 6px; margin: 0; padding: 0; min-height: 0; max-width: none; gap: 5px;
  flex-wrap: nowrap; background: none !important; box-shadow: none !important; border-radius: 0; }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent.hero .plaque { left: calc(50% + 44px); }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent.compact:not(.objet) .plaque { left: calc(50% + 14px); }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent:not(.objet):not(.trophy) .plaque .nm,
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent .tag:is(.entrave, .exhaust),
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent.empty .plaque,
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent.compact.exhausted .plaque::after { display: none; }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent:not(.objet) .tag:not(.entrave):not(.exhaust) {
  position: absolute; top: 100%; left: 0; margin-top: 4px; display: flex !important; background: none; padding: 0; border-radius: 0; box-shadow: none;
  font: italic 500 12px/1 var(--text); letter-spacing: 0; text-transform: none; color: rgba(238,222,190,.6); white-space: nowrap; }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent .stat {
  position: relative; width: 21px; min-width: 0; height: 21px; padding: 0; display: block; text-align: center; border-radius: 50%;
  background: #17110c; box-shadow: 0 0 0 1.2px #7f9a4a, 0 0 0 2.5px #17110c; color: #e9dcbc;
  font: 400 14px/21px "Marcellus", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent .stat.f.up { color: #f1d189; }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent .stat.v { box-shadow: 0 0 0 1.2px #c0503a, 0 0 0 2.5px #17110c; }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent .stat.v.hurt { color: #f0a080; }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent .stat.v small {
  position: absolute; left: 100%; bottom: 0; margin-left: 5px; font-size: 12px; line-height: 21px; opacity: 1; color: rgba(238,222,190,.55); }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent .stat.v:not(.hurt) small { display: none; }
/* Figure qui peut agir : ses disques prennent un second filet, d'or ; figure choisie : ils brillent. */
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent.can-act .stat.f { box-shadow: 0 0 0 1.2px #7f9a4a, 0 0 0 2.5px #17110c, 0 0 0 3.7px var(--legal); }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent.can-act .stat.v { box-shadow: 0 0 0 1.2px #c0503a, 0 0 0 2.5px #17110c, 0 0 0 3.7px var(--legal); }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent.selected .stat { box-shadow: 0 0 0 2px var(--legal), 0 0 8px 2px rgba(231,181,54,.7); }

/* Le compteur d'Action de Héros est retiré : la figure du Héros porte déjà le filet d'or quand elle peut agir. */
.me-counters .c-action { display: none; }

/* ---------- Compteurs peints (octobre 2026) : jetons d'Encens, flammes d'Aristie ---------- */
.me-counters .pips, .opp-counters .pips { gap: 3px; align-items: flex-end; }
.me-counters .pips i, .opp-counters .pips i { width: 20px; height: 30px; border-radius: 0; box-shadow: none; background: url('/modular-assets/compteurs/encens.png') center bottom / contain no-repeat; }
.opp-counters .pips i { width: 14px; height: 21px; }
.me-counters .pips i.spent, .opp-counters .pips i.spent { background-image: url('/modular-assets/compteurs/encens-eteint.png'); }
.me-counters .pips i.cost { background-image: url('/modular-assets/compteurs/encens.png'); box-shadow: none; opacity: .4; }
.me-counters .pips i.cap, .opp-counters .pips i.cap { display: none; }
.aristie .m, .aristie .t { display: none; }
.aristie .flammes { display: flex; gap: 4px; align-items: flex-end; }
.aristie .flammes i { width: 18px; height: 28px; background: url('/modular-assets/compteurs/aristie-eteinte.png') center bottom / contain no-repeat; }
.aristie .flammes i.allumee { background-image: url('/modular-assets/compteurs/aristie-allumee.png'); }
.aristie .flammes i.ardente { background-image: url('/modular-assets/compteurs/aristie-ardente.png'); }

/* ---------- Aura de l'Aristie : un liseré de feu qui épouse la silhouette du Héros et ondule, et s'intensifie avec les Exploits du tour :
   même rouge feu, plus épaisse et plus lumineuse au deuxième puis au troisième Exploit (filtres #aura-1 à #aura-3, index.html) ---------- */
.ent.hero.aristie .fig > * { filter: url(#aura-1); animation: aura-pouls 1.6s ease-in-out infinite; }
.ent.hero.aristie[data-aristie="2"] .fig > * { filter: url(#aura-2); }
.ent.hero.aristie[data-aristie="3"] .fig > * { filter: url(#aura-3); }
@keyframes aura-pouls { 0%, 100% { opacity: 1; } 50% { opacity: .93; } }
@media (prefers-reduced-motion: reduce) { .ent.hero.aristie .fig > * { animation: none; } }

/* ---------- Main en éventail (octobre 2026) : la carte survolée s'efface, sa version agrandie la remplace ---------- */
.hand .card.ouverte { opacity: 0; }

/* ---------- Vraies cartes (octobre 2026) : cadre peint du dieu (modular-assets/cartes, découpés de card-templates.jpg) ----------
   Les zones sont en % du cadre : coût dans le médaillon haut gauche, nom dans le bandeau du haut, illustration dans la grande
   fenêtre (figure rouge sur fond noir de vase quand la carte n'a pas d'illustration propre), type dans le cartouche rouge,
   texte dans le cartouche bas (resserré par ajuster()), Force et Vitalité sur l'épée et le cœur. Le cadre neutre a sa
   propre disposition (pas de cartouche rouge, épée et cœur à droite du texte). Tailles en em : 10px petite, 15.4px grande. */
.card.cadre { width: 170px; height: 236px; border-radius: 9px; background: #e9dcc0; font-size: 10px; color: #2b2116;
  box-shadow: 0 0 0 1px rgba(40,25,10,.45), 0 8px 16px rgba(40,25,10,.35); }
.card.cadre.big { width: 262px; height: 364px; border-radius: 13px; font-size: 15.4px; }
.card.cadre .fond { position: absolute; inset: 0; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.c-athena .fond { background-image: url('/modular-assets/cartes/cadre-athena.jpg'); }
.c-aphrodite .fond { background-image: url('/modular-assets/cartes/cadre-aphrodite.jpg'); }
.c-hera .fond { background-image: url('/modular-assets/cartes/cadre-hera.jpg'); }
.c-zeus .fond { background-image: url('/modular-assets/cartes/cadre-zeus.jpg'); }
.c-poseidon .fond { background-image: url('/modular-assets/cartes/cadre-poseidon.jpg'); }
.c-neutre .fond { background-image: url('/modular-assets/cartes/cadre-neutre.jpg'); }
/* L'illustration se pose PAR-DESSUS le cadre, exactement dans sa grande fenêtre. */
.card.cadre .art { position: absolute; z-index: 1; left: 20.5%; top: 12.6%; width: 72%; height: 45.6%; box-shadow: 0 0 0 1px rgba(60,40,15,.5); background-size: cover; background-position: center 28%; }
.card.cadre.c-neutre .art { left: 19.6%; top: 13.6%; width: 72.6%; height: 52%; }
.card.cadre .art.vase { background: radial-gradient(ellipse at 50% 40%, #2a1e15, #120c08 75%); display: flex; align-items: flex-end; justify-content: center; }
.card.cadre .art.vase img { max-width: 88%; max-height: 92%; margin-bottom: 4%; object-fit: contain; }
.card.cadre .cost { left: 5.4%; top: 2.3%; width: 13.4%; height: 9.6%; border-radius: 50%; background: none; box-shadow: none;
  font: 400 2.1em/1 var(--display); color: #f6ecd2; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.card.cadre .rar { display: none; }
.card.cadre .nm { position: absolute; left: 22.5%; top: 3%; width: 55%; height: 6.6%; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 400 1.18em/1 var(--display); color: #2b2116; white-space: nowrap; overflow: hidden; }
.card.cadre:not(.c-neutre) .nm { left: 24.5%; width: 51%; }
.card.cadre .nm.moyen { font-size: .96em; } .card.cadre .nm.long { font-size: .74em; }
.card.cadre .ty { position: absolute; left: 39%; top: 65.1%; width: 34%; height: 3.3%; margin: 0; display: flex; align-items: center; justify-content: center;
  font: 600 .5em/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: #f3e3c4; white-space: nowrap; overflow: hidden; }
.card.cadre .tx { position: absolute; left: 16.5%; top: 69.4%; width: 76%; height: 15.6%; margin: 0; display: block; -webkit-line-clamp: unset; overflow: hidden;
  font: 400 .9em/1.2 var(--text); color: #2b2116; text-align: center; }
.card.cadre .tx .ex { display: block; margin-top: .3em; font-size: .92em; color: #4f5d26; }
.card.cadre .tx .ex b { color: #4f5d26; }
.card.cadre .tx .ex svg { width: 1em; height: 1em; vertical-align: -.1em; }
.card.cadre .pf, .card.cadre .pv { position: absolute; top: 87.4%; width: 8.4%; height: 6.2%; display: grid; place-items: center; border-radius: 50%;
  background: #17110c; box-shadow: 0 0 0 1px #c9a84e; font: 400 1.25em/1 var(--display); color: #f6ecd2; }
.card.cadre .pf { left: 73.8%; } .card.cadre .pv { left: 85.6%; }
/* Neutre : pas de cartouche rouge ; type dans le bandeau bas, épée et cœur à droite du texte. */
.card.cadre.c-neutre .ty { left: 20%; top: 90.4%; width: 60%; height: 3.6%; color: #5a4a30; font-size: .56em; }
.card.cadre.c-neutre .tx { left: 9%; top: 69.4%; width: 71%; height: 18%; }
.card.cadre.c-neutre .pf, .card.cadre.c-neutre .pv { left: 83.6%; width: 10.6%; height: 7.6%; font-size: 1.45em; }
.card.cadre.c-neutre .pf { top: 70.2%; } .card.cadre.c-neutre .pv { top: 79.4%; }
.card.cadre .body, .card.cadre .ribbon { display: none; }
.card.cadre.playable { box-shadow: 0 0 0 1px rgba(40,25,10,.45), 0 0 0 3px #e7c46a, 0 8px 16px rgba(40,25,10,.35); }

/* ---------- Cartes à cadre décoratif (2e génération, Athéna d'abord) ----------
   Le cadre (modular-assets/cartes/<dieu>/cadre.jpg) ne porte que la décoration ; chaque pièce est posée selon le genre
   de la carte (g-compagnon, g-destin, g-intervention, g-reaction, g-objet, g-equipement). Positions en % de la carte.
   Le casque peint en bas à gauche du cadre est contourné par le texte (flottant .casque). */
.card.v3 { width: 170px; height: 238px; border-radius: 10px; font-size: 10px; color: #2b2116; background: #efe2c3;
  box-shadow: 0 0 0 1px rgba(40,25,10,.5), 0 8px 16px rgba(40,25,10,.35); --img-h: 44%; --tx-t: 60.5%; }
.card.v3.big { width: 262px; height: 367px; border-radius: 15px; font-size: 15.4px; }
.card.v3 .fond { position: absolute; inset: 0; background: var(--d) center / 100% 100% no-repeat; pointer-events: none; }
.card.v3 .art { position: absolute; z-index: 1; left: 10.5%; width: 79%; top: 12.5%; height: var(--img-h); background-size: cover; background-position: center 28%;
  box-shadow: 0 0 0 1px #3f5226, 0 0 0 2.5px #c9a84e, 0 0 0 3.5px #3f5226; border-radius: 2px; }
.card.v3 .art.vase { background: radial-gradient(ellipse at 50% 40%, #2a1e15, #120c08 75%); display: flex; align-items: flex-end; justify-content: center; }
.card.v3 .art.vase img { max-width: 86%; max-height: 90%; margin-bottom: 4%; object-fit: contain; }
.card.v3 .cost { position: absolute; z-index: 3; left: 2.5%; top: 1.4%; width: 21%; height: 15%; border-radius: 50%; box-shadow: none;
  background: center / contain no-repeat; display: grid; place-items: center; font: 400 2.3em/1 var(--display); color: #f6ecd2; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.card.v3 .nm { position: absolute; z-index: 2; left: 25%; width: 48%; top: 3.6%; height: 7.4%; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 400 1.32em/1 var(--display); color: #2b2116; white-space: nowrap; overflow: hidden; }
.card.v3 .ty { position: absolute; z-index: 3; left: 26%; width: 48%; height: 6.6%; top: calc(12.5% + var(--img-h) - 3.4%); margin: 0;
  background: center / 100% 100% no-repeat; display: flex; align-items: center; justify-content: center; }
.card.v3 .ty span { font: 700 .62em/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #f6e7c8; white-space: nowrap; }
.card.v3 .tx { position: absolute; z-index: 2; left: 11.5%; width: 77.5%; top: var(--tx-t); bottom: 7.4%; margin: 0; display: block; -webkit-line-clamp: unset; overflow: hidden;
  font: 400 1.02em/1.24 var(--text); color: #2b2116; text-align: center; }
/* Le texte contourne le casque peint : une colonne vide en bas à gauche, de la hauteur du casque (de 74 % au bas du texte). */
.card.v3 .tx::before { content: ""; float: left; width: 0; height: calc(100% - var(--casque-h)); }
.card.v3 .tx em { font-style: normal; color: inherit; }
.card.v3 .tx .casque { float: left; clear: left; width: 17%; height: var(--casque-h); }
/* Force et Vitalité : un cartel peint (rameau d'olivier portant deux médaillons) incrusté au milieu du bord inférieur ;
   chiffre dans chaque médaillon, petite épée droite / petit cœur dessous. Variante bouclier : .card.v3.cartel-bouclier. */
.card.v3 .cartel { position: absolute; z-index: 3; left: 24%; width: 52%; top: 88.6%; height: 10.4%; background: var(--cartel) center / 100% 100% no-repeat;
  filter: drop-shadow(0 .06em .12em rgba(40,25,10,.45)); pointer-events: none; }
.card.v3 .pf, .card.v3 .pv { position: absolute; z-index: 4; top: 93.6%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: .02em;
  font: 400 1.5em/1 var(--display); color: #f6ecd2; text-shadow: 0 .05em .1em rgba(0,0,0,.7); }
.card.v3 .pf { left: 40.1%; } .card.v3 .pv { left: 59.9%; }
.card.v3 .pf::after, .card.v3 .pv::after { content: ""; width: .32em; height: .4em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 24'%3E%3Cpath d='M5 0 6.6 3V15H3.4V3zM1 15.6h8v1.6H5.8v4.2h1.2V23H3v-1.6h1.2v-4.2H1z' fill='%23E7C46A'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .9; }
.card.v3 .pv::after { width: .38em; height: .34em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z' fill='%23E7C46A'/%3E%3C/svg%3E"); }
.card.v3.g-compagnon .tx { bottom: 12.5%; }
.card.v3.g-compagnon { --casque-h: 41%; }
.card.v3 .slot { position: absolute; z-index: 3; left: 71%; top: 11.6%; width: 15%; height: 10.7%; background: center / contain no-repeat; }
/* Même fenêtre d'image pour toutes les cartes (3 : 2) ; seul le départ du texte change (Réaction : sous son déclencheur). */
.card.v3 { --img-h: 38%; --tx-t: 56%; --casque-h: 50.8%; }
.card.v3.playable { box-shadow: 0 0 0 1px rgba(40,25,10,.45), 0 0 0 3px #e7c46a, 0 8px 16px rgba(40,25,10,.35); }

/* ---------- Cadres gravés (Athéna, Compagnon) : emplacements sculptés dans le cadre ; texte gravé, aucune pièce ajoutée ----------
   Chiffres fins, à la taille de leur logement, centrés sur leur boîte (pas sur la ligne de base) : une boîte carrée centrée
   au point mesuré sur l'image, le chiffre en flex au centre, avec une légère correction de la hauteur des chiffres. */
.card.v3.grave .art { left: 8.9%; width: 82.1%; top: 14.9%; height: 39.06%; box-shadow: none; border-radius: 0; background-position: center 45%; }
.card.v3.grave .nm { left: 27%; width: 45%; top: 3.6%; height: 7.6%; font-size: 1.22em; letter-spacing: .02em; }
/* Le type : bandeau peint avec son mot (modular-assets/cartes/<dieu>/type-<genre>.png), posé exactement sur celui du cadre. */
.card.v3.grave .ty.peint { left: 8.58%; width: 82.64%; top: 54.52%; height: 5.66%; background: center / 100% 100% no-repeat; box-shadow: none; }
.card.v3.grave .tx { left: 12%; width: 76%; top: 61.96%; bottom: 17%; --casque-h: 37.8%; font-size: .96em; }
.card.v3.grave:not(.g-compagnon) .tx { bottom: 12%; --casque-h: 65.3%; }
.card.v3.grave :is(.cost, .pf, .pv) { position: absolute; z-index: 4; width: 7.4%; height: 5.3%; translate: -50% -50%; padding: 0 0 .06em; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; background: none; box-shadow: none; border-radius: 0;
  font: 400 1.18em/1 var(--display); font-variant-numeric: lining-nums; color: #4a3518; letter-spacing: 0;
  text-shadow: 0 .045em 0 rgba(255,244,214,.75), 0 -.03em .02em rgba(70,45,10,.35); }
.card.v3.grave .cost { left: 12.2%; top: 7.3%; font-size: 1.12em; }
.card.v3.grave .pf { left: 42.55%; top: 91.24%; } .card.v3.grave .pv { left: 56.93%; top: 91.11%; }
.card.v3.grave .pf::after, .card.v3.grave .pv::after { display: none; }
/* Intitulé gravé : le nom, et son épithète en petite ligne italique dessous (police du nom à choisir : maquettes/cartes/intitules.png). */
.card.v3.grave .nm { flex-direction: column; gap: .18em; padding-top: .1em; white-space: nowrap; overflow: visible; }
.card.v3.grave .nm .n2 { display: block; font: italic 400 .5em/1 var(--text); letter-spacing: .04em; color: #6b5a3a; }
.card.v3.grave .nm:has(.n2) .n1 { font-size: .8em; }
/* Nom en lettres peintes : chaque glyphe à sa hauteur (en hauteurs de capitale), posé sur la ligne de base. */
.card.v3.grave .nm .n1.peint { display: flex; align-items: baseline; font-size: .62em; line-height: 1; }
.card.v3.grave .nm .n1.peint .gl { display: inline-block; height: calc(var(--h) * 1em); width: auto; margin: 0 .055em; position: relative; top: calc(var(--d) * 1em); }
.card.v3.grave .nm .n1.peint .esp { display: inline-block; width: .38em; }
.card.v3.grave .nm:has(.n2) .n1.peint { font-size: .56em; }
.card.v3.grave .nm:has(.n2) { gap: .2em; padding-top: 0; }
.card.v3.grave .nm:has(.n1.peint) .n2 { font-size: .42em; letter-spacing: .06em; }
/* Nom peint : même échelle pour tous (le champ de titre de la planche, 1067 px, couvre 90 % de la carte ; un nom trop long est ramené à la largeur du bandeau), centré dans le bandeau. */
.card.v3.grave .ty.mot { left: 8.58%; width: 82.64%; top: 54.52%; height: 5.66%; background: none; box-shadow: none; display: flex; align-items: center; justify-content: center; }
.card.v3.grave .ty.mot span { font: 600 .82em/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #d9bd7a; text-shadow: 0 1px 0 #000; }
.card.v3.grave.c-neutre .cost { left: 10.9%; top: 7.45%; }   /* médaillon mesuré : centre 10.9 % ; 7.08 % (chiffre un peu abaissé : centrage optique) */
.card.v3.grave.c-neutre .nm { top: 4.4%; height: 7.6%; }      /* bandeau du nom mesuré : 3.98-12.13 % */
.card.v3.grave.c-neutre .ty.mot { top: 54.18%; height: 4.85%; }   /* bandeau noir mesuré sur le cadre (723-794 px sur 1484) */
.card.v3.grave .ty.mot span { line-height: 1; padding-top: .08em; }
.card.v3.grave.c-neutre .pf { left: 43.21%; top: 89.45%; } .card.v3.grave.c-neutre .pv { left: 56.65%; top: 89.45%; }
.card.v3.grave.c-neutre .nm .n1 { font: 600 .74em/1.05 var(--display); text-transform: uppercase; letter-spacing: .06em; color: #2b2116; white-space: nowrap; }
.card.v3.grave .tx .cit { display: block; margin-top: .55em; font-style: italic; font-size: .7em; line-height: 1.22; color: #6b5a3a; }
.card.v3.grave .tx .ambiance { display: block; font-style: italic; font-size: .88em; line-height: 1.3; color: #5b4a30; }
.card.v3.grave .nm-peint { position: absolute; z-index: 2; left: 50%; top: 7.6%; translate: -50% -50%; width: min(calc(var(--w) / 1067 * 90%), 45%); height: auto; pointer-events: none; }
/* Recadrage propre à certaines illustrations (sujet haut placé). */
.card.v3 .art[style*="/moly.png"] { background-position: center 0%; }
.card.v3 .art[style*="/voile_dino.png"] { background-position: center 85%; }
.card.v3 .art[style*="/telemaque.png"], .card.v3 .art[style*="/cheval_de_bois.png"] { background-position: center 0%; }
.card.v3 .art[style*="/casque_dhades__parure.png"], .card.v3 .art[style*="/diomede__compagnon_dincursion.png"], .card.v3 .art[style*="/personne_ne_me_connait.png"], .card.v3 .art[style*="/chant_aede.png"], .card.v3 .art[style*="/jurer_devant_les_dieux.png"], .card.v3 .art[style*="/soins_du_camp.png"], .card.v3 .art[style*="/egide_instant.png"], .card.v3 .art[style*="/torche_de_resine.png"], .card.v3 .art[style*="/elan_irresistible.png"], .card.v3 .art[style*="/sceau_hermes.png"], .card.v3 .art[style*="/sandales_dhermes.png"], .card.v3 .art[style*="/priere_propitiatoire.png"], .card.v3 .art[style*="/aede_itinerant.png"], .card.v3 .art[style*="/bouclier_de_bronze.png"], .card.v3 .art[style*="/hoplite_acheen.png"], .card.v3 .art[style*="/dernier_souffle_athena.png"], .card.v3 .art[style*="/vent_favorable_hera.png"], .card.v3 .art[style*="/filet_de_chasse.png"], .card.v3 .art[style*="/offrande_vainqueurs.png"] { background-position: center 0%; }

/* ---------- Épreuves-récits (docs/65) : texte et choix en orange fin, au centre de la fresque, sur le fond ---------- */
.livre { position: absolute; z-index: 75; width: 660px; transform: translateX(-50%); text-align: center; pointer-events: auto;
  color: #e9965c; text-shadow: 0 0 4px #0d0805, 0 0 10px #0d0805, 0 0 18px #0d0805; }
.livre h3 { margin: 0 0 10px; font: 400 15px/1.2 var(--display); letter-spacing: .32em; text-transform: uppercase; color: #f0b27a; }
.livre p { margin: 4px 0; font: italic 300 19px/1.4 var(--text); }
.livre p.fait { font-style: normal; font-weight: 400; letter-spacing: .04em; color: #f0b27a; }
.livre p.exploit { font: 400 17px/1.3 var(--display); letter-spacing: .08em; color: #ffd08a; margin-top: 10px; }
.livre .choix { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.livre .choix button { background: none; border: 0; padding: 3px 10px; cursor: pointer; color: #e9965c;
  font: 300 20px/1.3 var(--text); letter-spacing: .03em; text-shadow: inherit; transition: color .15s, letter-spacing .2s; }
.livre .choix button::before { content: '— '; opacity: .6; }
.livre .choix button:hover { color: #ffd08a; letter-spacing: .06em; }
.livre.recit { pointer-events: none; }

/* Plume du paon (docs/68) : la main adverse, visible, en petites cartes nommées ; survol = la carte en grand. */
.cardbacks.vue { display: flex; gap: 3px; flex-wrap: wrap; max-width: 330px; }
.cardback.vue { width: auto; min-width: 0; height: auto; padding: 3px 6px; background: #f3e3c4; color: #3a2414; border-radius: 3px;
  font: 600 10px/1.15 'Alegreya Sans', sans-serif; white-space: nowrap; cursor: help; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.cardback.vue:hover { background: #e9965c; color: #1d120a; }

/* Résultat chiffré d'un choix de récit (tirage) : droit, plus clair que le récit en italique. */
.livre .bilan { font-style: normal; font-weight: 600; color: #f3c79a; }

/* Rang V, style de Kertch : l'or du décor scintille très légèrement (calque des seuls pixels dorés, en mode « screen »). */
.decor-or { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--or) center bottom / cover no-repeat; mix-blend-mode: screen; opacity: 0;
  animation: or-scintille 4.8s ease-in-out infinite; }
@keyframes or-scintille { 0%, 100% { opacity: 0; filter: brightness(1); } 45% { opacity: .55; filter: brightness(1.35); } 60% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .decor-or { animation: none; } }

/* Cadre des Objets légendaires (vase de Kertch), emplacements mesurés sur l'image 1060 x 1484. */
.card.v3.grave.c-legendaire .cost { left: 10.9%; top: 6.6%; }
.card.v3.grave.c-legendaire .nm { left: 25%; width: 50%; top: 5.1%; height: 6%; }
.card.v3.grave.c-legendaire .nm .n1 { font: 600 .74em/1.05 var(--display); text-transform: uppercase; letter-spacing: .06em; color: #2b2116; white-space: nowrap; }
.card.v3.grave.c-legendaire .art { left: 9.3%; width: 81.6%; top: 15.5%; height: 37.56%; }
.card.v3.grave.c-legendaire .ty.mot { top: 53.91%; height: 5.1%; }
.card.v3.grave.c-legendaire .tx { left: 13%; width: 74%; top: 61.46%; bottom: 11.5%; }
/* Coût des Objets légendaires : centré sur le disque du brûle-parfum (mesuré : centre 10.99 % / 7.38 %). */
.card.v3.grave.c-legendaire .cost { left: 10.85%; top: 7.23%; }   /* recalé sur le disque rendu (mesure à 4x) */
.card.v3.grave.c-legendaire .cost { color: transparent; text-shadow: none; width: 4%; height: 3.5%;
  background: url('/modular-assets/cartes/legendaire/cout-0.png') center / contain no-repeat; }
/* Cadre neutre en marbre (octobre 2026), emplacements mesurés sur l'image 1060 x 1484. Cadre Compagnon : mêmes emplacements,
   boucliers mesurés (centres 42.69 % / 88.71 % et 57.12 % / 88.68 %). */
.card.v3.grave.c-neutre .cost { left: 10.9%; top: 7.15%; }
.card.v3.grave.c-neutre .nm { top: 4.3%; height: 7.3%; }
.card.v3.grave.c-neutre .art { left: 8.8%; width: 82.4%; top: 15.5%; height: 37.56%; }
.card.v3.grave.c-neutre .ty.mot { top: 53.78%; height: 5.12%; }
.card.v3.grave.c-neutre .ty.mot span { color: #f1e8d4; }
.card.v3.grave.c-neutre .pf { left: 42.69%; top: 88.71%; } .card.v3.grave.c-neutre .pv { left: 57.12%; top: 88.68%; }

/* Athéna en marbre (même disposition que le marbre neutre). */
.card.v3.grave.marbre .cost { left: 10.9%; top: 7.15%; }
.card.v3.grave.marbre .nm { left: 25%; width: 50%; top: 4.3%; height: 7.3%; }
.card.v3.grave.marbre .art { left: 8.8%; width: 82.4%; top: 15.5%; height: 37.56%; }
.card.v3.grave.marbre .ty.mot { top: 53.84%; height: 6%; }
.card.v3.grave.marbre .ty.mot span { color: #f1e8d4; }
.card.v3.grave.marbre .nm .n1 { font: 600 .74em/1.05 var(--display); text-transform: uppercase; letter-spacing: .06em; color: #2b2116; white-space: nowrap; }
.card.v3.grave.marbre .pf { left: 42.27%; top: 88.18%; } .card.v3.grave.marbre .pv { left: 57.19%; top: 88.2%; }   /* boucliers mesurés sur les 5 dieux */

/* Monstres des Périls : cadre de marbre à frise de bêtes (1060 x 1484), rang en chiffres romains dans le médaillon. */
.card.v3.grave.c-monstre .cost { display: none; }   /* les Monstres ne se paient pas (Périls) */
.card.v3.grave.c-monstre .nm { left: 25%; width: 50%; top: 4.3%; height: 7.3%; }
.card.v3.grave.c-monstre .nm .n1 { font: 600 .74em/1.05 var(--display); text-transform: uppercase; letter-spacing: .06em; color: #2b2116; white-space: nowrap; }
.card.v3.grave.c-monstre .art { left: 9.1%; width: 81.8%; top: 15.7%; height: 37.06%; }
.card.v3.grave.c-monstre .ty.mot { top: 53.56%; height: 5.6%; }
.card.v3.grave.c-monstre .ty.mot span { color: #f1e8d4; }
.card.v3.grave.c-monstre .tx { left: 12%; width: 76%; top: 61.46%; bottom: 17.5%; font-size: .9em; }
.card.v3.grave.c-monstre .tx .ex { display: block; margin: .5em 0 0; padding: .35em 0 0; font-size: .8em; line-height: 1.22; color: #5b2a1a; background: none; border: 0; border-top: 1px solid rgba(91,42,26,.35); border-radius: 0; box-shadow: none; }
.card.v3.grave.c-monstre .tx .ex b { font-weight: 700; color: #7a2a17; }
.card.v3.grave.c-monstre .pf { left: 42.74%; top: 88.51%; } .card.v3.grave.c-monstre .pv { left: 57.03%; top: 88.44%; }
.card.v3.grave.c-monstre .rang-monstre { position: absolute; z-index: 4; left: 10.85%; top: 7.05%; translate: -50% -50%;
  font: 600 1.2em/1 var(--display); color: #4a3518; letter-spacing: .02em; text-shadow: 0 .045em 0 rgba(255,244,214,.75); }
/* Monstres à épithète (Céto, mère des monstres ; Les Géants, fils de la Terre) : nom et sous-titre tiennent dans le bandeau. */
.card.v3.grave.c-monstre .nm:has(.n2) { gap: .05em; padding-top: 0; justify-content: center; }
.card.v3.grave.c-monstre .nm:has(.n2) .n1 { font-size: .6em; line-height: 1; }
.card.v3.grave.c-monstre .nm .n2 { font-size: .42em; line-height: 1; }
/* Cadrage de l'illustration quand le sujet est en haut de l'image. */
.card.v3.grave .art[style*="/cerbere.png"] { background-position: center 0%; }

/* Cadre des Monstres épuré (octobre 2026), emplacements mesurés sur l'image 1060 x 1484. */
.card.v3.grave.c-monstre .nm { left: 18%; width: 64%; top: 4.3%; height: 6.7%; }
.card.v3.grave.c-monstre .art { left: 6.9%; width: 86.2%; top: 13.34%; height: 38.21%; }
.card.v3.grave.c-monstre .ty.mot { top: 52.06%; height: 6.6%; }
.card.v3.grave.c-monstre .tx { left: 10%; width: 80%; top: 59.96%; bottom: 16.5%; font-size: .86em; }
.card.v3.grave.c-monstre .pf { left: 42.41%; top: 89.86%; } .card.v3.grave.c-monstre .pv { left: 57.31%; top: 89.79%; }
.card.v3.grave.c-monstre .rang-monstre { left: 10.66%; top: 7.51%; }
/* Cadre pierre brute archaïque (Monstres), adopté — remplace les positions du cadre sobre ci-dessus */
.card.v3.grave.c-monstre .nm { left: 18.5%; width: 62.3%; top: 4.72%; height: 6.27%; }
.card.v3.grave.c-monstre .art { left: 7.83%; width: 84.15%; top: 15.5%; height: 36.39%; }
.card.v3.grave.c-monstre .ty.mot { top: 52.76%; height: 5.2%; }
.card.v3.grave.c-monstre .tx { left: 10%; width: 80%; top: 60.06%; bottom: 19.5%; font-size: .86em; }
.card.v3.grave.c-monstre .pf { left: 41.98%; top: 89.4%; } .card.v3.grave.c-monstre .pv { left: 57.08%; top: 89.3%; }
.card.v3.grave.c-monstre .rang-monstre { left: 10.66%; top: 7.51%; }
/* Gorgone des Monstres (disque en haut à droite, mesuré : centre 88.77 % / 7.55 %, diamètre 15.1 %) : sa matière marque le rang. */
.card.v3.grave.c-monstre .meduse { position: absolute; z-index: 4; left: 88.77%; top: 7.55%; width: 15.1%; aspect-ratio: 1; translate: -50% -50%;
  background: center / contain no-repeat; filter: drop-shadow(0 .06em .08em rgba(60,30,15,.45)); }
/* ESSAI (docs/84-87) : état du ménos, de la Piété, du pouvoir et des Moires. */
.etat-essai { position: absolute; left: 50%; bottom: 236px; transform: translateX(-50%); z-index: 45; padding: 5px 14px; border-radius: 14px;
  background: rgba(251,244,228,.94); box-shadow: 0 2px 8px rgba(0,0,0,.25); font: 500 13px/1.3 var(--text); color: #3a2f25; white-space: nowrap; }
.etat-essai .jauge { display: inline-flex; gap: 3px; vertical-align: -2px; margin-right: 4px; }
.etat-essai .jauge i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #8a2a1a; background: transparent; }
.etat-essai .jauge i.plein { background: #b23a1e; }
.etat-essai .jauge i.seuil { box-shadow: 0 0 0 2px rgba(201,162,74,.8); }

/* ESSAI : les ordres du Héros, en orange au centre de sa fresque (comme les Épreuves-récits). */
.livre.ordres { width: 520px; }
.livre.ordres .choix { margin-top: 6px; gap: 2px; }
.livre.ordres .choix button { font-size: 21px; }
.livre.ordres .choix button.retour { font-size: 16px; opacity: .75; margin-top: 6px; }
.livre.ordres .choix button.retour::before { content: '← '; }
.livre.ordres p { font-size: 15px; }

/* Offrande : ce qui peut être sacrifié s'illumine, avec son gain d'Encens. */
.livre.ordres.offrande p.note { font-size: 13px; opacity: .8; }
.livre.ordres.offrande .choix button.retour::before { content: ''; }
.sacrifiable { cursor: pointer; border-radius: 12px; box-shadow: 0 0 0 2px #e9965c, 0 0 18px 4px rgba(233,150,92,.65);
  animation: sacrifiable 1.6s ease-in-out infinite; }
@keyframes sacrifiable { 50% { box-shadow: 0 0 0 2px #ffd08a, 0 0 26px 8px rgba(255,208,138,.7); } }
.badge-offrande { position: absolute; z-index: 6; right: -6px; top: -10px; padding: 2px 7px; border-radius: 10px; pointer-events: none;
  background: #1d120a; color: #ffd08a; border: 1px solid #e9965c; font: 600 13px/1.2 var(--display); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .sacrifiable { animation: none; } }
.badge-offrande.fig { right: auto; z-index: 60; font-size: 15px; }
.route.sacrifiable { border-radius: 14px; }

/* Fiche du héros au survol : manière de gagner, don (l'unique effet passif), Aristie à 6 ménos. */
.fiche-heros { position: absolute; z-index: 80; width: 450px; padding: 12px 16px; border-radius: 12px; pointer-events: none;
  background: rgba(23,17,12,.94); color: #f3e3c4; box-shadow: 0 0 0 1px rgba(233,150,92,.55), 0 8px 24px rgba(0,0,0,.5); }
.fiche-heros .fiche-nom { font: 400 15px/1.2 var(--display); letter-spacing: .3em; text-transform: uppercase; color: #f0b27a; margin-bottom: 6px; }
.fiche-heros .fiche-l { padding: 5px 0; } .fiche-heros .fiche-l + .fiche-l { border-top: 1px solid rgba(233,150,92,.2); }
.fiche-heros .fiche-e { display: block; font: 600 10px/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #c9875a; }
.fiche-heros .fiche-l b { display: block; font: 600 17px/1.25 var(--display); color: #ffd08a; }
.fiche-heros .fiche-t { display: block; font: 300 14px/1.35 var(--text); }
.etat-essai .aide { opacity: .6; font-size: .9em; }

/* Compagnon Épuisé avec son propre dessin : pas de grisé par-dessus. */
.ent.exhausted.dessin-epuise .fig > * { filter: none; rotate: none; }

/* Compagnon retenu par une Épreuve (Siège, Sirènes, Lotophages…) : à recueillir, sinon perdu. */
.tag.retenu { background: #7a2a17; color: #ffe2c2; border-color: #c8662f; font-style: italic; cursor: help; }
.ent.compact .tag.retenu { display: inline-block; }

/* Enfers (docs/91) : le décor inverse les couleurs (figures noires sur fond orange) ; les figures orange prennent un
   liseré noir et le texte des récits passe en noir, pour rester lisibles. */
.fresco.enfers .ent .fig > * { filter: drop-shadow(0 0 1.5px #120c08) drop-shadow(0 0 5px rgba(18,12,8,.75)); }
.fresco.enfers .ent.exhausted:not(.dessin-epuise) .fig > * { filter: drop-shadow(0 0 1.5px #120c08) drop-shadow(0 0 5px rgba(18,12,8,.75)); }
.livre.enfers { padding: 12px 22px 14px; border-radius: 4px; background: rgba(243,176,122,.93);
  box-shadow: 0 0 0 1px rgba(26,17,10,.35), 0 0 24px 10px rgba(243,176,122,.55); }
.livre.enfers, .livre.enfers .choix button { color: #1a110a; text-shadow: none; }
.livre.enfers h3, .livre.enfers p.fait, .livre.enfers .bilan { color: #120c08; }
.livre.enfers .choix button:hover { color: #000; }
/* Le héros aux Enfers devient une ombre, comme les morts du décor : silhouette noire cernée d'un fil orange, qui flotte
   doucement (docs/91). Hors des Périls, le grisé d'origine reste. */
.fresco.enfers .ent.hero.hades .fig > * { filter: brightness(0) drop-shadow(0 0 1.5px #f3b07a) drop-shadow(0 0 6px rgba(243,176,122,.7)) opacity(.85);
  animation: ombre-erre 5.5s ease-in-out infinite; }
@keyframes ombre-erre { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .fresco.enfers .ent.hero.hades .fig > * { animation: none; } }

/* Monde à part (docs/91) : aux Enfers, la fresque ne montre que l'ombre du héros ; Compagnons et Périls attendent. */
.fresco .ent:not(.hero) { transition: opacity .9s ease; }
.fresco.enfers .ent:not(.hero) { opacity: 0; pointer-events: none; }
.attente-enfers { position: absolute; z-index: 6; left: 50%; top: 14px; translate: -50% 0; white-space: nowrap; pointer-events: none;
  padding: 5px 18px; border-radius: 3px; background: rgba(243,176,122,.82); box-shadow: 0 0 14px 6px rgba(243,176,122,.6);
  font: italic 400 15px/1.2 var(--text); letter-spacing: .04em; color: #140c06; }

/* Cartes-Épreuves (docs/95) : rouleau de papyrus (1060 x 1484, bords transparents), emplacements mesurés sur l'image. */
.card.v3.c-epreuve { background: transparent; box-shadow: none; filter: drop-shadow(0 6px 10px rgba(40,25,10,.35)); }
.card.v3.c-epreuve .rang-ep { position: absolute; z-index: 4; left: 11.5%; top: 8.7%; translate: -50% -50%;
  font: 600 1.25em/1 var(--display); color: #3a2414; letter-spacing: .02em; }
.card.v3.c-epreuve .nm { left: 24.5%; width: 51%; top: 6.9%; height: 6%; }
.card.v3.c-epreuve .nm .n1 { font: 600 .74em/1.05 var(--display); text-transform: uppercase; letter-spacing: .06em; color: #2b2116; white-space: nowrap; }
.card.v3.c-epreuve .art { left: 10.6%; width: 78.8%; top: 17%; height: 30.7%; box-shadow: 0 0 0 1px rgba(43,33,22,.6); border-radius: 0; }
.card.v3.c-epreuve .art.vide { background: repeating-linear-gradient(90deg, rgba(120,90,50,.05) 0 2px, transparent 2px 5px); box-shadow: none; }
.card.v3.c-epreuve .ty { left: 19%; width: 62%; top: 49.1%; height: 4%; }
.card.v3.c-epreuve .ty span { font-size: .56em; color: #f1e3c2; }
.card.v3.c-epreuve .tx { left: 12.5%; width: 75%; top: 56%; bottom: 13.5%; display: flex; flex-direction: column; justify-content: center; gap: .55em;
  font-size: .9em; line-height: 1.25; }
.card.v3.c-epreuve .tx::before { content: none; }
.card.v3.c-epreuve .tx .ouv { font-style: italic; color: #3a2414; }
.card.v3.c-epreuve .tx .nb { font: 600 .82em/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #7a2a17; }
.card.v3.c-epreuve .tx .ex { display: block; margin: 0; padding: .4em 0 0; font: 400 .82em/1.2 var(--text); color: #5b2a1a; background: none;
  box-shadow: none; border-radius: 0; border-top: 1px solid rgba(91,42,26,.3); }
.card.v3.c-epreuve .tx .ex b { font-weight: 700; color: #7a2a17; }

/* ---------- Sans course (docs/96) : compteurs de Gloire et fil des Moires dans la bande de l'horizon ---------- */
.gloires, .fil { display: none; }
.horizon.sans-course .race { display: none; }
.horizon.sans-course .gloires { display: flex; position: absolute; left: 40px; top: 2px; height: 60px; gap: 26px; align-items: center; }
.gl { display: flex; align-items: center; gap: 8px; }
.gl .lau { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: #fbf5e8; box-shadow: 0 0 0 2px var(--c), 0 0 0 4px #fbf5e8, 0 0 0 5px color-mix(in srgb, var(--c) 45%, transparent); }
.gl .lau svg { position: absolute; left: -9px; top: -6px; width: 64px; height: 64px; opacity: .55; pointer-events: none; }
.gl .lau b { position: relative; font: 700 21px/1 var(--display); color: #2b2116; }
.gl .nom { display: flex; flex-direction: column; font: 700 14px/1.1 var(--text); color: var(--c); }
.gl .nom small { font: 700 10px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.gl.pulse .lau { animation: gl-pulse .9s ease-out; }
@keyframes gl-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.28); filter: drop-shadow(0 0 8px var(--c)); } 100% { transform: scale(1); } }
.horizon.sans-course .fil { display: block; position: absolute; left: 420px; right: 300px; top: 4px; height: 56px; }
.fil-etapes { display: flex; justify-content: space-between; font: 600 10.5px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); opacity: .55; }
.fil-etapes .fe.on { opacity: 1; color: #7a2a17; }
.fil-etapes .fe { opacity: .55; }
.fil-etapes { opacity: 1; }
.fil-ligne { position: relative; height: 14px; margin: 5px 0 4px; }
.fil-ligne .brin { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, #8a6a3a 0 6px, #b8925a 6px 9px); }
.fil[data-etape="2"] .fil-ligne .brin { right: 9%; }
.fil[data-etape="2"] .fil-ligne::after { content: ""; position: absolute; right: 0; width: 7%; top: 9px; height: 2px; rotate: 14deg; transform-origin: right;
  background: repeating-linear-gradient(90deg, #8a6a3a 0 6px, #b8925a 6px 9px); opacity: .7; }
.fil-ligne .ciseaux { position: absolute; top: -3px; width: 18px; height: 18px; translate: -50% 0; transition: left .8s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a2a17' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.1 8.1 20 20M8.1 15.9 20 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.fil[data-etape="0"] .ciseaux { left: 3%; opacity: .45; }
.fil[data-etape="1"] .ciseaux { left: 50%; }
.fil[data-etape="2"] .ciseaux { left: 92%; }
.fil-txt { text-align: center; font: italic 400 15px/1.2 var(--text); color: var(--ink, #2b2116); }
.fil-txt b { font-style: normal; color: #7a2a17; }

/* Recadrage par illustration et par cadre (revue du 13 octobre) : le sujet reste dans la fenêtre. */
.card.cadre .art[style*="/colere_poseidon.png"] { background-position: 25% 50%; }
.card.cadre .art[style*="/oiseaux.png"] { background-position: 12% 50%; }
.card.cadre .art[style*="/hydre.png"] { background-position: 4% 50%; }
.card.cadre .art[style*="/sciron.png"] { background-position: 78% 50%; }
.card.cadre .art[style*="/sanglier.png"] { background-position: 88% 50%; }
.card.cadre .art[style*="/talos.png"] { background-position: 50% 2%; }
.card.cadre .art[style*="/cacus.png"] { background-position: 75% 50%; }
.card.cadre .art[style*="/sirenes.png"] { background-position: 40% 50%; }
.card.v3.grave .art[style*="/lie_au_mat.png"] { background-position: 50% 15%; }
.card.v3.grave .art[style*="/argo__navire_des_heros.png"] { background-position: 50% 22%; }
.card.v3.grave .art[style*="/toison_dor.png"] { background-position: 50% 12%; }
.card.v3.grave .art[style*="/voile_dhestia.png"] { background-position: 50% 60%; }
.card.v3.grave .art[style*="/ceinture_daphrodite.png"] { background-position: 50% 5%; }
.card.v3.grave .art[style*="/pomme_de_discorde.png"] { background-position: 50% 70%; }
.card.v3.grave .art[style*="/conseil_dathena.png"] { background-position: 50% 15%; }
.card.v3.grave .art[style*="/nausicaa.png"] { background-position: 50% 15%; }
.card.v3.grave .art[style*="/vent_portant.png"] { background-position: 50% 20%; }
.card.v3.grave .art[style*="/timonier.png"] { background-position: 50% 0%; }
.card.v3.grave .art[style*="/chaussures_ailees.png"] { background-position: 50% 0%; }
.card.v3.grave .art[style*="/lance_de_pallas.png"] { background-position: 50% 5%; }
.card.v3.grave .art[style*="/nuee_daphrodite.png"] { background-position: 50% 0%; }
.card.v3.grave .art[style*="/colere_dhera.png"] { background-position: 50% 15%; }
.card.v3.grave .art[style*="/monstre_marin.png"] { background-position: 50% 30%; }
.card.v3.grave .art[style*="/jugement_de_zeus.png"] { background-position: 50% 0%; }
.card.v3.grave .art[style*="/eclair.png"] { background-position: 50% 15%; }
.card.v3.grave .art[style*="/detourner_le_peril.png"] { background-position: 50% 15%; }
.card.v3.grave .art[style*="/rumeur.png"] { background-position: 50% 30%; }
.card.v3.grave .art[style*="/rivalite.png"] { background-position: 50% 0%; }
.card.v3.grave .art[style*="/flamme_oeta.png"] { background-position: 50% 0%; }
.card.v3.grave .art[style*="/feu_promethee.png"] { background-position: 50% 0%; }
.card.v3.grave .art[style*="/pierre_athena.png"] { background-position: 50% 20%; }
.card.v3.grave .art[style*="/sanglier.png"] { background-position: 50% 30%; }
.card.v3.grave .art[style*="/cercyon.png"] { background-position: 50% 8%; }
.card.v3.grave .art[style*="/lestrygons.png"] { background-position: 50% 0%; }
.card.v3.grave .art[style*="/amycos.png"] { background-position: 50% 20%; }
.card.v3.grave .art[style*="/oiseaux.png"] { background-position: 50% 15%; }
.card.v3.grave .art[style*="/biche.png"] { background-position: 50% 30%; }
.card.v3.grave .art[style*="/ketos.png"] { background-position: 50% 20%; }
.card.v3.grave .art[style*="/lion.png"] { background-position: 50% 30%; }
.card.v3.grave .art[style*="/cacus.png"] { background-position: 50% 8%; }
.card.v3.grave .art[style*="/procuste.png"] { background-position: 50% 15%; }
.card.v3.grave .art[style*="/scylla.png"] { background-position: 50% 8%; }
.card.v3.grave .art[style*="/hydre.png"] { background-position: 50% 0%; }
.card.v3.grave .art[style*="/minotaure.png"] { background-position: 50% 0%; }
.card.v3.grave .art[style*="/polypheme.png"] { background-position: 50% 15%; }
.card.v3.grave .art[style*="/turnus.png"] { background-position: 50% 30%; }
.card.v3.grave .art[style*="/amazones.png"] { background-position: 50% 30%; }
.card.v3.grave .art[style*="/chimere.png"] { background-position: 50% 0%; }
.card.v3.grave .art[style*="/typhon.png"] { background-position: 50% 12%; }
.card.v3.grave .art[style*="/python.png"] { background-position: 50% 8%; }
.card.v3.grave .art[style*="/geants.png"] { background-position: 50% 8%; }
.card.v3.c-epreuve .art[style*="/gue.png"] { background-position: 50% 15%; }
.card.v3.c-epreuve .art[style*="/zeus.png"] { background-position: 50% 0%; }
.card.v3.c-epreuve .art[style*="/tunique.png"] { background-position: 50% 5%; }
.card.v3.c-epreuve .art[style*="/hesperides.png"] { background-position: 50% 15%; }
.card.v3.grave .art[style*="/desir.png"] { background-position: 50% 25%; }
.card.v3.grave .art[style*="/embuscade.png"] { background-position: 50% 10%; }
.card.v3.grave .art[style*="/casque_defenses_sanglier.png"] { background-position: 50% 32%; }
.card.v3.grave .art[style*="/sandale_unique.png"] { background-position: 50% 30%; }
.card.v3.grave .art[style*="/cnemides_de_bronze.png"] { background-position: 50% 55%; }
.card.v3.grave .art[style*="/gorgoneion.png"] { background-position: 50% 35%; }
.card.v3.grave .art[style*="/couronne_dolivier.png"] { background-position: 50% 50%; }
.card.v3.grave .art[style*="/lance_de_frene.png"] { background-position: 50% 60%; }
/* Revue du cadrage des Équipements (14 octobre) */
.card.v3.grave .art[style*="/casque_dhades__parure.png"] { background-position: 50% 40%; }
.card.v3.grave .art[style*="/armure_faconnee_par_vulcain.png"] { background-position: 50% 20%; }
.card.v3.grave .art[style*="/epee_de_pelee.png"] { background-position: 50% 65%; }
/* Équipements portés par le Héros : petites étiquettes lisibles à droite des disques, une par Équipement, que l'on
   survole pour voir la carte (interaction.js, data-eq). Avant, elles se superposaient sous les disques, illisibles. */
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent.hero .tag[data-eq].weapon {
  position: static !important; margin: 0 0 0 2px !important; padding: 3px 7px !important; border-radius: 9px !important; cursor: help; pointer-events: auto;
  background: rgba(23,17,12,.88) !important; box-shadow: 0 0 0 1px #c79a3a !important; color: #f1d189 !important; font: italic 600 12px/1 var(--text) !important; }
:is(.fresco.bottom, #stage:not(.pli) .fresco.top, #stage.deroulee .fresco.top) .ent.hero .tag[data-eq].weapon:hover { background: #3a2a18 !important; color: #fff3cf !important; }
/* Emplacements libres du Périple : seulement chez le joueur, plus chez l'adversaire (demande de l'utilisateur). */
.fresco.top .ent.empty { display: none; }
/* Pastilles « +2 » d'Exploit au-dessus des Périls : retirées (demande de l'utilisateur) ; l'Exploit se lit sur la carte. */
.exploit-chip { display: none !important; }
.ent.hero .tag[data-eq].rangeable { cursor: pointer; }
.eq-ranger { position: absolute; z-index: 60; pointer-events: none; text-align: center; font: italic 600 14px/1 var(--text); color: #fff3cf;
  background: rgba(23,17,12,.88); padding: 6px 8px; border-radius: 8px; }

/* Progresser : le décor glisse vers la gauche en s'approchant un peu, puis revient ; le Héros marche sur place. */
.fresco.avance { animation: avance-decor 2.1s ease-in-out; }
.fresco.avance .ent.hero .fig { animation: avance-pas .35s ease-in-out 5 alternate; }
@keyframes avance-decor {
  0%, 100% { background-size: auto, 100% auto; background-position: 0 0, 50% 100%; }
  55% { background-size: auto, 114% auto; background-position: 0 0, 18% 100%; } }
@keyframes avance-pas { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .fresco.avance, .fresco.avance .ent.hero .fig { animation: none; } }

/* Au doigt : les boutons de la carte tenue (Jouer, Offrande, Annuler) en colonne, à la taille d'un doigt. */
.held-tools.tactile { flex-direction: column; align-items: flex-start; gap: 14px; transform-origin: 0 0; scale: 1.9; }
.held-tools.tactile kbd { display: none; }

/* Au doigt : la carte effleurée se lève et grandit un peu au-dessus de l'éventail (le survol de Hearthstone). */
.hand .card.effleuree { scale: 2.3; transform-origin: 50% 100%; }
#stage.carte-levee .hand { z-index: 80; }   /* devant la plaque des ordres, qui s'efface */
#stage.carte-levee .livre { opacity: 0; pointer-events: none; transition: opacity .12s; }
@media (hover: none) {
  .hand .card { touch-action: none;
    transition: left .14s var(--ease-out), top .14s var(--ease-out), transform .14s var(--ease-out), scale .14s var(--ease-out), box-shadow .25s, filter .25s, opacity .25s; }
}

/* Téléphone tenu droit : une invitation à le tourner (le jeu est composé en paysage). */
.tournez { display: none; }
@media (hover: none) and (orientation: portrait) {
  .tournez { position: fixed; inset: 0; z-index: 9000; display: grid; place-content: center; gap: 18px; padding: 32px; text-align: center;
    background: #0b0806; color: #f0a46a; }
  .tournez p { margin: 0; font: 400 26px/1.2 Marcellus, serif; letter-spacing: .04em; }
  .tournez small { font: 15px/1.4 'Alegreya Sans', sans-serif; color: #d9a46a; opacity: .8; }
  .tournez .tel { justify-self: center; width: 46px; height: 80px; border: 3px solid #f0a46a; border-radius: 9px; animation: tourne 2.4s ease-in-out infinite; }
}
@keyframes tourne { 0%, 25% { rotate: 0deg; } 55%, 100% { rotate: -90deg; } }
/* Héros Épuisé : son dessin assis remplace la figure (animée ou non). */
.rig > img.heros-epuise { position: absolute; display: none; pointer-events: none; }
.rig.montre-epuise > img.heros-epuise { display: block; }
.rig.montre-epuise > :not(img.heros-epuise) { visibility: hidden; }

/* Cadrage vertical par illustration : la fenêtre (≈ 1,83) rogne 18 % de la hauteur d'une image 3:2 ; on épargne têtes, casques et armes du haut. */
.card.v3 .art[style*="/ardeur_guerriere.png"], .card.v3.grave .art[style*="/ardeur_guerriere.png"] { background-position: center 15%; }
.card.v3 .art[style*="/invoquer_les_muses.png"], .card.v3.grave .art[style*="/invoquer_les_muses.png"] { background-position: center 25%; }
.card.v3 .art[style*="/foudre_vengeresse.png"], .card.v3.grave .art[style*="/foudre_vengeresse.png"] { background-position: center 25%; }
.card.v3 .art[style*="/nestor.png"], .card.v3.grave .art[style*="/nestor.png"] { background-position: center 25%; }
.card.v3 .art[style*="/machaon.png"], .card.v3.grave .art[style*="/machaon.png"] { background-position: center 20%; }
.card.v3 .art[style*="/atalante.png"], .card.v3.grave .art[style*="/atalante.png"] { background-position: center 20%; }
.card.v3 .art[style*="/chiron.png"], .card.v3.grave .art[style*="/chiron.png"] { background-position: center 30%; }
.card.v3 .art[style*="/casque_a_cimier.png"], .card.v3.grave .art[style*="/casque_a_cimier.png"] { background-position: center 20%; }
.card.v3 .art[style*="/oracle_de_delphes.png"], .card.v3.grave .art[style*="/oracle_de_delphes.png"] { background-position: center 25%; }
.card.v3 .art[style*="/fraternite_d_armes.png"], .card.v3.grave .art[style*="/fraternite_d_armes.png"] { background-position: center 20%; }
.card.v3 .art[style*="/rage_du_combat.png"], .card.v3.grave .art[style*="/rage_du_combat.png"] { background-position: center 20%; }
.card.v3 .art[style*="/coup_double.png"], .card.v3.grave .art[style*="/coup_double.png"] { background-position: center 30%; }
.card.v3 .art[style*="/fureur_sacree.png"], .card.v3.grave .art[style*="/fureur_sacree.png"] { background-position: center 25%; }
.card.v3 .art[style*="/recrutement.png"], .card.v3.grave .art[style*="/recrutement.png"] { background-position: center 15%; }
.card.v3 .art[style*="/coup_de_grace.png"], .card.v3.grave .art[style*="/coup_de_grace.png"] { background-position: center 15%; }
.card.v3 .art[style*="/elan_de_la_bataille.png"], .card.v3.grave .art[style*="/elan_de_la_bataille.png"] { background-position: center 25%; }
.card.v3 .art[style*="/voeu_aux_dieux.png"], .card.v3.grave .art[style*="/voeu_aux_dieux.png"] { background-position: center 30%; }
.card.v3 .art[style*="/heroisme.png"], .card.v3.grave .art[style*="/heroisme.png"] { background-position: center 20%; }
.card.v3 .art[style*="/heros_de_l_age_d_or.png"], .card.v3.grave .art[style*="/heros_de_l_age_d_or.png"] { background-position: center 20%; }
.card.v3 .art[style*="/jour_des_heros.png"], .card.v3.grave .art[style*="/jour_des_heros.png"] { background-position: center 25%; }
.card.v3 .art[style*="/euryclee.png"], .card.v3.grave .art[style*="/euryclee.png"] { background-position: center 0%; }
.card.v3 .art[style*="/colere_du_fils_de_zeus.png"], .card.v3.grave .art[style*="/colere_du_fils_de_zeus.png"] { background-position: center 15%; }
.card.v3 .art[style*="/telamon.png"], .card.v3.grave .art[style*="/telamon.png"] { background-position: center 20%; }
.card.v3 .art[style*="/fureur_d_heracles.png"], .card.v3.grave .art[style*="/fureur_d_heracles.png"] { background-position: center 20%; }
.card.v3 .art[style*="/lancer_de_rocher.png"], .card.v3.grave .art[style*="/lancer_de_rocher.png"] { background-position: center 25%; }
.card.v3 .art[style*="/second_assaut.png"], .card.v3.grave .art[style*="/second_assaut.png"] { background-position: center 30%; }
.card.v3 .art[style*="/coup_de_massue.png"], .card.v3.grave .art[style*="/coup_de_massue.png"] { background-position: center 25%; }
.card.v3 .art[style*="/travaux_deurysthee.png"], .card.v3.grave .art[style*="/travaux_deurysthee.png"] { background-position: center 25%; }
.card.v3 .art[style*="/pacte_des_argonautes.png"], .card.v3.grave .art[style*="/pacte_des_argonautes.png"] { background-position: center 20%; }
.card.v3 .art[style*="/pelee.png"], .card.v3.grave .art[style*="/pelee.png"] { background-position: center 20%; }
.card.v3 .art[style*="/zetes.png"], .card.v3.grave .art[style*="/zetes.png"] { background-position: center 30%; }
.card.v3 .art[style*="/calais.png"], .card.v3.grave .art[style*="/calais.png"] { background-position: center 20%; }
.card.v3 .art[style*="/ancee.png"], .card.v3.grave .art[style*="/ancee.png"] { background-position: center 15%; }
.card.v3 .art[style*="/lyncee.png"], .card.v3.grave .art[style*="/lyncee.png"] { background-position: center 15%; }
.card.v3 .art[style*="/vainqueur_du_minotaure.png"], .card.v3.grave .art[style*="/vainqueur_du_minotaure.png"] { background-position: center 25%; }
.card.v3 .art[style*="/elan_du_vainqueur.png"], .card.v3.grave .art[style*="/elan_du_vainqueur.png"] { background-position: center 15%; }
.card.v3 .art[style*="/coup_du_heros.png"], .card.v3.grave .art[style*="/coup_du_heros.png"] { background-position: center 25%; }
.card.v3 .art[style*="/affronter_seul.png"], .card.v3.grave .art[style*="/affronter_seul.png"] { background-position: center 20%; }
.card.v3 .art[style*="/pelote_deroulee.png"], .card.v3.grave .art[style*="/pelote_deroulee.png"] { background-position: center 25%; }
.card.v3 .art[style*="/duel_contre_turnus.png"], .card.v3.grave .art[style*="/duel_contre_turnus.png"] { background-position: center 20%; }
.card.v3 .art[style*="/casque_a_aigrette.png"], .card.v3.grave .art[style*="/casque_a_aigrette.png"] { background-position: center 25%; }
.card.v3 .art[style*="/lance_du_troyen.png"], .card.v3.grave .art[style*="/lance_du_troyen.png"] { background-position: center 15%; }
.card.v3 .art[style*="/pius.png"], .card.v3.grave .art[style*="/pius.png"] { background-position: center 20%; }
.card.v3 .art[style*="/anchise.png"], .card.v3.grave .art[style*="/anchise.png"] { background-position: center 20%; }
.card.v3 .art[style*="/achate.png"], .card.v3.grave .art[style*="/achate.png"] { background-position: center 15%; }
.card.v3 .art[style*="/piete_d_enee.png"], .card.v3.grave .art[style*="/piete_d_enee.png"] { background-position: center 30%; }
.fiche-heros .fiche-commun { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid rgba(233,150,92,.2); font: italic 300 13px/1.35 var(--text); opacity: .85; }

/* Les cartes en figures rouges (cards.js, carteRouge ; 19/10) : le cadre peint de ChatGPT et ses zones, mesurées sur
   l'image (1060 × 1484). Tailles en em : 10px sur une carte de la main, 15.4px sur une carte en grand. */
.card.rouge { width: 170px; height: 238px; border-radius: 9px; font-size: 10px; color: #2a1608; overflow: hidden;
  background: #0b0705 url('/modular-assets/cartes/rouge/cadre.jpg') 0 0 / 100% 100% no-repeat; box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.card.rouge.avec-stats { background-image: url('/modular-assets/cartes/rouge/cadre-compagnon.jpg'); }
.card.rouge.big { width: 262px; height: 368px; border-radius: 13px; font-size: 15.4px; }
.card.rouge .fond { display: none; }
.card.rouge .art { position: absolute; left: 9.4%; right: 9%; top: 14.6%; height: 43%; background: #000 center / cover no-repeat; border-radius: .4em; }
.card.rouge .art.vase { display: grid; place-items: end center; background: #120a05; }
.card.rouge .art.vase img { max-width: 92%; max-height: 96%; }
.card.rouge .cost { position: absolute; left: 7.1%; top: 3.4%; width: 13.6%; height: 9.7%; display: grid; place-items: center;
  font: 400 2em/1 var(--display); color: #1a0f08; background: none; box-shadow: none; border-radius: 0; }
.card.rouge .emb { position: absolute; left: 78.3%; top: 3.4%; width: 13.6%; height: 9.7%; display: grid; place-items: center; }
.card.rouge .emb svg { width: 72%; height: 72%; }
.card.rouge .nm { position: absolute; left: 23.6%; right: 23.6%; top: 5.6%; height: 6.4%; display: flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden; font: 400 .9em/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #1a0f08; }
.card.rouge .ty { position: absolute; left: 12.3%; right: 12.3%; top: 59.4%; height: 4.6%; display: grid; place-items: center; margin: 0;
  white-space: nowrap; overflow: hidden; font: 400 .66em/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #f0a46a; background: none; }
.card.rouge .tx { position: absolute; left: 8.6%; right: 8.6%; top: 66.6%; height: 24.8%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 0 .55em; box-sizing: border-box; overflow: hidden; margin: 0;
  font: 500 .9em/1.25 var(--text); color: #2a1608; }
.card.rouge.avec-stats .tx { height: 16.2%; }
.card.rouge .tx em { font-style: italic; }
.card.rouge .tx .ambiance { font-style: italic; opacity: .8; }
.card.rouge .pf, .card.rouge .pv { position: absolute; top: 83.2%; width: 11.7%; height: 8.4%; display: grid; place-items: center;
  font: 400 1.5em/1 var(--display); background: none; box-shadow: none; border-radius: 0; margin: 0; }
.card.rouge .pf { left: 69.9%; right: auto; color: #1a0f08; }
.card.rouge .pv { left: 82.1%; right: auto; color: #f0a46a; }
.card.rouge .nm .n1 { display: inline-block; flex: none; white-space: nowrap; }
/* Le cadre apulien (validé le 23/10) : zones mesurées sur modular-assets/cartes/apulien/cadre.jpg. */
.card.rouge.apulien .art { left: 9.2%; right: 8.6%; top: 15%; height: 42.6%; }
.card.rouge.apulien .cost { top: 3.1%; height: 10.6%; }
.card.rouge.apulien .emb { left: 77.9%; top: 3.1%; height: 10.6%; }
.card.rouge.apulien .nm { top: 6.1%; height: 6.2%; }
.card.rouge.apulien .ty { left: 12%; right: 12%; top: 59.3%; height: 4.7%; color: #f2b072; }
.card.rouge.apulien .tx { left: 7.6%; right: 7.6%; top: 65.6%; height: 26.2%; }
.card.rouge.apulien.avec-stats .tx { height: 17.4%; }
.card.rouge.apulien .pf, .card.rouge.apulien .pv { top: 84.3%; width: 8.9%; height: 6.6%; font-size: 1.3em; }
.card.rouge.apulien .pf { left: 70.6%; }
.card.rouge.apulien .pv { left: 81.1%; }

/* (25/10) Troie : la loupe du choix des guerriers, une carte en grand par-dessus le panneau. */
.loupe-echange { position: absolute; inset: 0; z-index: 95; background: rgba(18,10,5,.82); }
.loupe-echange .place { position: absolute; left: 50%; top: 40px; width: 262px; height: 368px; transform: translateX(-50%); }
.loupe-echange .card.grande { position: absolute; left: 0; top: 0; transform-origin: 50% 0; scale: 2.2; translate: 0 0; }
.loupe-echange .card.grande.choisie { box-shadow: 0 0 0 3px #d9534f, 0 0 24px rgba(217,83,79,.7); }
.loupe-echange .fl { position: absolute; top: 330px; width: 110px; height: 150px; border: 0; background: rgba(255,240,220,.12); color: #f6e6c8;
  font: 400 96px/1 var(--display); border-radius: 18px; cursor: pointer; }
.loupe-echange .fl.g { left: 150px; } .loupe-echange .fl.d { right: 150px; }
.loupe-echange .actions { position: absolute; right: 60px; top: 520px; display: grid; gap: 18px; justify-items: stretch; width: 260px; }
.loupe-echange .rang { color: #f3e3c4; font: 600 26px/1 var(--text); text-align: center; }
.loupe-echange .actions button { padding: 22px 18px; border-radius: 16px; border: 2px solid #d9a24a; background: #f3ead6; color: #2e2016;
  font: 700 30px/1.1 var(--text); cursor: pointer; }
.loupe-echange .actions .bascule.active { background: #a8452e; color: #fff4e6; border-color: #a8452e; }
.loupe-echange .actions .retour { background: transparent; color: #f3e3c4; }

/* (26/10) Pagases : le héros qui se présente (carte en grand) et les choix à côté, au milieu de l'écran. */
.fallback-panel.argo-panel { top: 96px; left: 50%; transform: translateX(-50%); width: 1000px; max-width: 1000px; min-width: 0;
  display: flex; gap: 34px; align-items: center; padding: 22px 30px; background: rgba(24,14,8,.94); border: 2px solid #d9a24a; color: #f3e3c4; }
.argo-panel .argo-carte { width: 262px; height: 368px; flex: none; position: relative; }
.argo-panel .argo-carte .card.grande { position: absolute; left: 0; top: 0; transform-origin: 0 0; scale: 1.25; }
.argo-panel .argo-carte { width: 328px; height: 460px; }
.argo-panel .argo-texte { flex: 1; min-width: 0; }
.argo-panel h3 { font-size: 40px; color: #f0c070; margin: 0 0 12px; }
.argo-panel p { font-size: 24px; line-height: 1.3; color: #f3e3c4; margin: 0 0 22px; }
.argo-panel .argo-choix { display: grid; gap: 14px; }
.argo-panel .argo-choix button { font-size: 30px; padding: 16px 18px; border-radius: 14px; border: 2px solid #d9a24a; background: #f3ead6; color: #2e2016; text-align: center; }
.argo-panel .argo-choix button.pousser { background: #a8452e; color: #fff4e6; border-color: #a8452e; }
.argo-panel .argo-chiffres { display: inline-block; font-size: 38px; color: #f0c070; margin: 10px 0 2px; letter-spacing: .03em; }
.argo-panel p small { font-size: 21px; color: #c9b08a; }
.fiche-monstre { width: 470px; font-size: 21px; line-height: 1.3; }
.fiche-monstre .fiche-nom { font-size: 18px; } .fiche-monstre .fiche-e { font-size: 12px; margin-bottom: 2px; }
.fresco .ent.deplace { filter: drop-shadow(0 0 10px rgba(255,214,150,.9)); cursor: grabbing; z-index: 50 !important; }
/* (26/10) Le nuage de bagarre (director.js, ouvrirNuage) : trois dessins alternés vite. */
.nuage-bagarre { position: absolute; z-index: 60; pointer-events: none; background: center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.nuage-bagarre[data-n="1"] { background-image: url('/modular-assets/nuage-bagarre-1.png?v=apulie'); }
.nuage-bagarre[data-n="2"] { background-image: url('/modular-assets/nuage-bagarre-2.png?v=apulie'); }
.nuage-bagarre[data-n="3"] { background-image: url('/modular-assets/nuage-bagarre-3.png?v=apulie'); }