/* ============================================================================
   game.css — langue visuelle du JEU, coque « Grimoire » (proto game-interface/a.html,
   DA verrouillée 2026-07). Chargé UNIQUEMENT par le layout `game`.
   Blend A×C : parchemin sombre chaud, or + rouge sang-de-bœuf, bougie.
   Typo : stacks système approchant Cormorant (serif), Oswald (condensé), Inter (sans)
   — pas de CDN (rules/frontend.md) ; le vendoring de vraies fontes = incrément 2.
   L'image de scène est injectée par game.js dans --scene-img (pas d'inline style).
   ========================================================================== */

:root{
  --ink:#100b06; --ink2:#1a1109;
  --parch:#ede1c6; --parch-dim:#c9b78f; --parch-soft:#cbb994; --muted:#94805d;
  --gold:#c9a24b; --gold-bright:#eaca7a; --gold-soft:rgba(201,162,75,.14);
  --blood:#b8402f; --blood-deep:#7c2a20;
  --border:#3c2f1c; --border-strong:#5a462a; --border-gold:rgba(201,162,75,.32);
  --serif:'Cormorant Garamond','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --cond:'Oswald','Bahnschrift SemiCondensed','Arial Narrow','Segoe UI',sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --scene-img:none;
  /* largeur de la colonne d'infos (1/3 droit, proto taverne.html) — vw (pas %) pour
     rester une longueur pure, réutilisable dans les calc() ; 0px sous 1180px. */
  --col:clamp(380px,31vw,600px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--serif); color:var(--parch); background:#000;
  overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block}
button{font:inherit;color:inherit}
.uc{font-family:var(--cond);text-transform:uppercase}
.lnum{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* ---------- SCÈNE (couches empilées, plein-cadre vivant) ---------- */
.scene{position:fixed;inset:0;overflow:hidden;background:#0a0603}
/* IMAGE : cover + ken-burns très lent. */
.scene__img{
  position:absolute;inset:-4%;
  background:var(--scene-img);
  background-size:cover;background-position:50% 42%;
  transform-origin:52% 60%;
  will-change:transform,filter;
  animation:kenburns 46s ease-in-out infinite alternate;
  transition:filter .7s ease;
}
@keyframes kenburns{
  0%{transform:scale(1.05) translate3d(0,0,0)}
  100%{transform:scale(1.12) translate3d(-1.4%,-1.2%,0)}
}
/* BRUME : deux nappes qui dérivent en parallaxe, teinte chaude, screen.
   Opacités BASSES (étalonnage taverne.html) : l'image reste lisible et chaude,
   fini la brume laiteuse qui délavait la scène. */
.scene__fog{
  position:absolute;inset:-25%;pointer-events:none;mix-blend-mode:screen;opacity:.3;
  background:
    radial-gradient(38% 30% at 30% 62%, rgba(210,180,140,.20), transparent 70%),
    radial-gradient(46% 34% at 70% 55%, rgba(190,160,120,.16), transparent 72%),
    radial-gradient(30% 22% at 52% 74%, rgba(230,200,160,.14), transparent 70%);
  will-change:transform;
  animation:fogdrift 66s linear infinite;
}
.scene__fog--2{
  opacity:.2;
  background:
    radial-gradient(40% 30% at 62% 40%, rgba(200,170,130,.16), transparent 72%),
    radial-gradient(34% 26% at 24% 48%, rgba(220,190,150,.12), transparent 70%);
  animation:fogdrift2 92s linear infinite;
}
@keyframes fogdrift{0%{transform:translate3d(-5%,1%,0)}100%{transform:translate3d(5%,-2%,0)}}
@keyframes fogdrift2{0%{transform:translate3d(4%,-1%,0) scale(1.05)}100%{transform:translate3d(-6%,2%,0) scale(1.12)}}
/* HALO DE BOUGIE : chaud, pulse doux. Opacité statique = repli si l'animation est
   coupée (prefers-reduced-motion) — jamais le halo à pleine puissance. */
.scene__candle{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:
    radial-gradient(15% 16% at 48% 72%, rgba(255,190,95,.55), rgba(255,160,60,.14) 45%, transparent 70%),
    radial-gradient(34% 30% at 48% 70%, rgba(240,150,50,.18), transparent 72%);
  will-change:opacity,transform;transform-origin:48% 72%;
  animation:candle 5.2s ease-in-out infinite;
}
@keyframes candle{
  0%,100%{opacity:.55;transform:scale(.99)}
  28%{opacity:.9;transform:scale(1.02)}
  46%{opacity:.66;transform:scale(1)}
  70%{opacity:.95;transform:scale(1.03)}
}
/* Grands viewports (split colonne) : en % du viewport le halo devenait une TACHE
   LAITEUSE au centre de l'image en 1900px (screen à ~.93 par-dessus les brumes).
   Ici : recadré sur les 2/3 de scène (right:var(--col)), tailles PLAFONNÉES en px
   (le halo ne grandit plus avec l'écran), alphas réduits et pulse assagi (candlesoft)
   — le sombre/chaud contrasté de la maquette tient aussi en desktop large. */
@keyframes candlesoft{
  0%,100%{opacity:.34;transform:scale(.99)}
  28%{opacity:.56;transform:scale(1.02)}
  46%{opacity:.4;transform:scale(1)}
  70%{opacity:.6;transform:scale(1.03)}
}
@media (min-width:1181px){
  .scene__candle{
    right:var(--col);opacity:.38;
    background:
      radial-gradient(200px 180px at 48% 72%, rgba(255,190,95,.42), rgba(255,160,60,.10) 45%, transparent 70%),
      radial-gradient(460px 360px at 48% 70%, rgba(240,150,50,.11), transparent 72%);
    animation-name:candlesoft;
  }
}
/* ÉTALONNAGE CHAUD (valeurs .grade de taverne.html) : or en haut, sang-de-bœuf au sol,
   assise sombre franche — l'or claque sur fond sombre. */
.scene__grade{position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(120% 90% at 50% 28%, rgba(201,162,75,.12), transparent 46%),
   radial-gradient(130% 120% at 50% 120%, rgba(124,42,32,.46), transparent 55%),
   linear-gradient(180deg, rgba(16,11,6,.66) 0%, rgba(16,11,6,.06) 20%, rgba(16,11,6,.10) 48%, rgba(16,11,6,.74) 80%, rgba(16,11,6,.97) 100%)}
/* GRAIN photographique léger. */
.scene__grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
/* VIGNETTE : lisibilité du texte ; couche du dessus. --biome-veil : voile teinté CR-04. */
.scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    var(--biome-veil, linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))),
    radial-gradient(circle at 50% 46%, transparent 33%, rgba(4,2,0,.76) 100%);
  box-shadow:inset 0 0 260px 50px rgba(0,0,0,.72);
}
body.open .scene__img,body.sack-open .scene__img{filter:brightness(.42) saturate(.85) blur(2px)}
body.open .scene__fog,body.open .scene__candle,
body.sack-open .scene__fog,body.sack-open .scene__candle{opacity:.18}

/* CR-04 : biome sans scène plein-cadre dédiée → tuile en fond d'ambiance (flou + voile). */
.scene--degraded .scene__img{
  filter:brightness(.72) saturate(.92) blur(4px);
  transform:scale(1.2);
}
.scene-biome-plaine{--biome-veil:linear-gradient(180deg, rgba(95,107,52,.20), rgba(40,45,20,.30));}
.scene-biome-foret{--biome-veil:linear-gradient(180deg, rgba(47,68,35,.28), rgba(20,35,20,.38));}
.scene-biome-colline{--biome-veil:linear-gradient(180deg, rgba(109,92,48,.22), rgba(45,35,15,.32));}
.scene-biome-montagne{--biome-veil:linear-gradient(180deg, rgba(86,95,102,.24), rgba(30,35,40,.34));}
.scene-biome-marais{--biome-veil:linear-gradient(180deg, rgba(61,74,48,.26), rgba(25,35,25,.36));}
.scene-biome-lac{--biome-veil:linear-gradient(180deg, rgba(47,90,107,.24), rgba(20,40,50,.34));}

/* ---------- BARRE HAUTE pleine largeur ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;gap:20px;
  padding:calc(18px + env(safe-area-inset-top)) 34px 24px;
  background:linear-gradient(180deg,rgba(10,6,2,.78),transparent);
  transition:opacity .3s ease;
}
body.open .topbar{opacity:0;pointer-events:none}
.brand{font-family:var(--cond);font-weight:400;letter-spacing:.62em;font-size:15px;
  color:var(--gold-bright);text-shadow:0 0 22px rgba(201,162,75,.35);padding-left:.62em}
.brand b{color:var(--parch);font-weight:500}
.topline{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border-gold),transparent)}
.clock{display:flex;align-items:center;gap:14px;min-width:0}
.clock .lbl{letter-spacing:.28em;font-size:10.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.clock .val{letter-spacing:.2em;font-size:12px;color:var(--parch-dim);white-space:nowrap}
/* fioles diégétiques (souffle / clarté). --f = niveau ; défaut 100% (donnée non câblée). */
.vials{display:flex;gap:12px;margin-left:6px}
.vial{position:relative;width:11px;height:34px;border:1px solid var(--border-gold);border-radius:0 0 6px 6px;
  background:rgba(0,0,0,.35);overflow:hidden}
.vial::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--f,100%)}
.vial--life::before{background:linear-gradient(180deg,var(--blood),var(--blood-deep))}
.vial--mind::before{background:linear-gradient(180deg,var(--gold-bright),var(--gold))}
.vial .glint{position:absolute;top:2px;left:2px;width:3px;height:60%;background:rgba(255,255,255,.25);border-radius:2px}

/* RECOMMENCER : discret, à droite de la barre. */
.restart-cta{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;flex:none;
  padding:7px 12px;border-radius:999px;
  color:var(--parch-soft);background:rgba(20,15,9,.42);
  border:1px solid var(--border-strong);
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:10px;
  text-shadow:0 1px 8px #000;backdrop-filter:blur(3px);
  opacity:.62;transition:opacity .25s ease,transform .25s ease,color .25s ease,background .25s ease;
}
.restart-cta svg{width:14px;height:14px;flex:none}
.restart-cta:hover{opacity:1;color:var(--gold-bright);background:rgba(20,15,9,.62);transform:translateY(-1px)}
.restart-cta:focus-visible{outline:none;opacity:1;color:var(--gold-bright);border-color:var(--gold)}
.restart-cta:disabled{opacity:.4;cursor:default}

/* INDICATEUR DE TOUR « le MJ tisse la suite » (T-004) — pulsation discrète en topbar,
   au-delà du loader texte de la colonne. Révélé par body.thinking (setBusy). */
.mj-working{display:none;align-items:center;gap:9px;flex:none;
  padding:5px 12px;border-radius:999px;
  border:1px solid var(--border-gold);background:rgba(20,15,9,.4);backdrop-filter:blur(3px)}
body.thinking .mj-working{display:inline-flex;animation:mjworkfade .5s ease}
@keyframes mjworkfade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.mj-working__pulse{width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--gold-bright);box-shadow:0 0 10px rgba(234,202,122,.7);
  animation:mjworkpulse 1.5s ease-in-out infinite}
@keyframes mjworkpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
.mj-working__label{font-family:var(--cond);letter-spacing:.2em;font-size:9.5px;color:var(--gold-bright);
  white-space:nowrap;text-shadow:0 0 10px rgba(234,202,122,.3)}

/* ---------- CRISTALLISATION : post-its épinglés DANS la colonne droite ----------
   Le mount .crystals vit dans le FLUX de la colonne (.lowband), entre la trace et le
   registre — fini le position:fixed haut-droit qui recouvrait le cartouche de dialogue.
   game.js prépend les nouveaux (récents en haut) et plafonne le DOM ; les plus anciens
   s'estompent (filter — l'anim `pin forwards` verrouille opacity, on ne la combat pas). */
.crystals{display:flex;flex-direction:column;gap:18px;align-items:center;flex:none}
.crystals:empty{display:none}
.crystals .crystal:nth-child(2){filter:brightness(.88) saturate(.85)}
.crystals .crystal:nth-child(n+3){filter:brightness(.74) saturate(.7)}
.crystal{
  position:relative;width:min(216px,100%);flex:none;
  font-family:var(--serif);opacity:0;transform:rotate(2.4deg) translateY(-14px) scale(.92);
  transform-origin:top center;
}
.crystal.grown{animation:pin .8s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes pin{
  from{opacity:0;transform:rotate(2.4deg) translateY(-14px) scale(.92)}
  to{opacity:1;transform:rotate(2.4deg) translateY(0) scale(1)}
}
.crystal .cr-cap{display:block;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.22em;font-size:9.5px;margin-bottom:6px}
.crystal .cr-label{display:block;font-size:17px;line-height:1.24;font-weight:500}
/* post-it « cristallisé » : papier chaud, punaise sang-de-bœuf, coin découpé. */
.crystal-carnet{
  padding:20px 18px 18px;color:#241a0c;
  background:linear-gradient(160deg,#e9d9a8,#d8c489);
  box-shadow:0 16px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
  clip-path:polygon(0 0,100% 2%,98% 100%,2% 97%);
}
.crystal-carnet::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--blood),#4c1712);box-shadow:0 3px 6px rgba(0,0,0,.5)}
.crystal-carnet .cr-cap{color:var(--blood-deep)}
/* carte-système : sombre, encadrée or, feutrée. */
.crystal-systeme{
  padding:14px 16px;border-radius:3px;
  background:linear-gradient(180deg,#241a0e,#1b130a);color:var(--parch);
  border:1px solid var(--border-strong);
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.18),0 8px 22px rgba(0,0,0,.55);
}
.crystal-systeme .cr-cap{color:var(--gold)}
.crystal-systeme .cr-label{color:var(--gold-bright);font-size:15px}

/* ---------- COLONNE D'INFOS (1/3 droit, proto taverne.html) ----------
   Split 2/3 scène + colonne fixe --col : liseré or à gauche, dégradé sombre.
   Empilement : scrollback + voix du Conteur (alignée à gauche) → trace du jet →
   post-its cristallisés → registre du scribe épinglé en bas (margin-top:auto).
   La colonne scrolle si le contenu déborde. Sous 1180px : --col:0, la colonne
   redevient la bande basse cinématique centrée (cf. @media plus bas). */
.lowband{position:fixed;top:0;right:0;bottom:0;z-index:25;width:var(--col);
  padding:calc(96px + env(safe-area-inset-top)) clamp(24px,2.6vw,40px) max(28px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:stretch;gap:22px;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:#5a462a transparent;
  background:linear-gradient(90deg,transparent,rgba(10,6,2,.30) 12%,rgba(9,6,2,.8) 50%,rgba(7,4,1,.92));
  border-left:1px solid var(--border-gold);
  transition:opacity .3s ease;
}
.lowband::-webkit-scrollbar{width:7px}
.lowband::-webkit-scrollbar-thumb{background:#5a462a;border-radius:6px}
body.open .lowband{opacity:0;pointer-events:none}

/* CR-09 : scrollback des narrations passées (estompé, fondu vers le haut, DOM plafonné JS). */
.voice-log{
  width:100%;max-height:min(24vh,220px);overflow-y:auto;flex:none;
  display:flex;flex-direction:column;gap:5px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%);
  mask-image:linear-gradient(180deg,transparent,#000 42%);
}
.voice-log:empty{display:none}
.voice-log::-webkit-scrollbar{width:0;height:0}
.voice-log__entry{
  margin:0;font-style:italic;text-align:left;color:var(--parch-soft);opacity:0;
  font-size:clamp(13px,2vw,15px);line-height:1.5;text-shadow:0 2px 12px #000;
  transition:opacity .6s ease;
}
.voice-log__entry.shown{opacity:.42}

/* CHECK TISSÉ : trace du dernier jet (données réelles du calque MJ uniquement). */
.trace{font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--muted);
  margin:0;flex:none;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:10px;
  opacity:0;transition:opacity .6s ease}
.trace.shown{opacity:1}
.trace[hidden]{display:none}
/* petite variante inline du d20 (T-004) : même icosaèdre SVG, taille trace */
.trace .die{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none}
.trace .die .d20-svg{display:block;width:100%;height:100%;overflow:visible}
.trace .die .f{stroke:var(--border-gold);stroke-width:.9;stroke-linejoin:round}
.trace .die .f-lo{fill:#0c0904}
.trace .die .f-mid{fill:#15100a}
.trace .die .f-hi{fill:#1e160c}
.trace .die .f-face{stroke:var(--border-gold);stroke-width:1.2}
.trace .die .f-rim{fill:none;stroke:rgba(201,162,75,.55);stroke-width:1.4;stroke-linejoin:round}
.trace .die .d20__num{font-family:var(--cond);font-weight:500;font-size:46px;
  fill:var(--gold-bright);paint-order:stroke;stroke:rgba(0,0,0,.5);stroke-width:1.4}
.trace.lost .die .f-rim,.trace.lost .die .f-face{stroke:rgba(184,64,47,.6)}
.trace.lost .die .d20__num{fill:#e79a80}
.trace .win{color:var(--gold-bright)}
.trace.lost .win{color:var(--blood)}

/* VOIX DU CONTEUR : alignée à gauche dans la colonne, ample, typewriter. */
.voice{max-width:none;text-align:left;margin:0;flex:none}
.voice .who{letter-spacing:.34em;font-size:10.5px;color:var(--gold);margin-bottom:10px}
.voice-body{display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.45vw,27px);line-height:1.5;color:var(--parch);
  text-shadow:0 2px 18px rgba(0,0,0,.85)}
.voice-text{opacity:.96;transition:opacity .22s ease}
.voice-text.typing::after{
  content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.14em;
  background:var(--gold-bright);box-shadow:0 0 8px var(--gold-bright);
  animation:caret .8s step-end infinite;
}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}
/* Chargement diégétique : libellé + 3 points qui respirent, jamais un spinner (CR-11). */
.voice-loading{display:none;margin-left:8px;vertical-align:baseline}
body.thinking .voice-loading{display:inline-flex;gap:5px;align-items:center}
.voice-loading__label{
  color:var(--gold-bright);font-style:italic;opacity:.92;margin-right:3px;font-size:.72em;
  text-shadow:0 0 10px rgba(234,202,122,.32),0 2px 12px #000;
}
.voice-loading i{width:5px;height:5px;border-radius:50%;background:var(--gold-bright);opacity:.35;
  animation:vbreathe 1.4s ease-in-out infinite}
.voice-loading i:nth-child(2){animation-delay:.22s}
.voice-loading i:nth-child(3){animation-delay:.44s}
@keyframes vbreathe{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.95;transform:scale(1.1)}}
/* Paupières : pendant l'attente, la scène se voile un peu plus. */
body.thinking .scene__img{filter:brightness(.5) saturate(.8) blur(1.5px)}
body.thinking .scene__candle{animation-duration:2.6s}

/* REGISTRE DU SCRIBE — épinglé en bas de la colonne (margin-top:auto) */
.scribe{width:100%;margin-top:auto;flex:none}
.scribe .cap{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  letter-spacing:.26em;font-size:10px;color:var(--gold)}
.scribe .cap .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 8px var(--gold);animation:caret 2.4s ease-in-out infinite}
.scribe .row{display:flex;gap:12px}
.field{position:relative;flex:1;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(20,12,4,.55));
  border:1px solid var(--border-gold);box-shadow:inset 0 2px 10px rgba(0,0,0,.6);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:border-color .3s ease}
.field:focus-within{border-color:var(--gold)}
.field input{width:100%;background:transparent;border:0;outline:0;color:var(--parch);
  font-family:var(--serif);font-size:clamp(16px,2.4vw,19px);font-style:italic;padding:14px 18px}
.field input::placeholder{color:var(--muted);opacity:.85}
.field input:disabled{opacity:.55}
.send{font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--ink);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));border:0;padding:0 24px;cursor:pointer;
  display:flex;align-items:center;gap:9px;transition:.2s;
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);box-shadow:0 4px 14px rgba(201,162,75,.28)}
.send:hover{filter:brightness(1.12);box-shadow:0 6px 22px rgba(201,162,75,.5)}
.send:active{transform:scale(.96)}
.send:disabled{opacity:.55;cursor:default;filter:none}
.send svg{width:15px;height:15px}
/* Onde de pression au clic (classe posée par game.js). */
.send.pressed{animation:sendpulse .5s ease-out}
@keyframes sendpulse{0%{filter:brightness(1.5)}100%{filter:brightness(1)}}

/* ---------- OBJETS DE COIN : grimoire & besace ---------- */
.corner{position:fixed;bottom:26px;z-index:28;cursor:pointer;text-align:center;
  background:none;border:0;
  transition:transform .3s cubic-bezier(.2,1,.3,1), opacity .3s ease}
.corner--left{left:34px}
/* le coin droit se décale de la largeur de la colonne (proto : calc(var(--col) + 34px)) */
.corner--right{right:calc(var(--col) + 34px)}
.corner:hover,.corner:focus-visible{transform:translateY(-8px);outline:none}
.corner .art{width:clamp(84px,10vw,118px);height:clamp(84px,10vw,118px);object-fit:cover;margin:0 auto;
  -webkit-mask-image:radial-gradient(circle,#000 46%,transparent 76%);mask-image:radial-gradient(circle,#000 46%,transparent 76%);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(201,162,75,.14));transition:.3s}
.corner:hover .art,.corner:focus-visible .art{
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(201,162,75,.42))}
.corner .lab{display:block;margin-top:-6px;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.24em;font-size:10px;color:var(--gold);opacity:0;transition:.3s}
.corner:hover .lab,.corner:focus-visible .lab{opacity:1}
body.open .corner{opacity:0;pointer-events:none}

/* ============================================================================
   CARTES-ENTITÉ en scène (proto a.html/taverne.html) — la grappe.
   game.js peuple .scene-cast__present (≤3 cartes compactes, engageables, survol →
   la carte repasse devant) et .scene-cast__lead (carte d'avant-scène + cartouche).
   ========================================================================== */
.scene-cast{
  position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;
  transition:opacity .3s ease, filter .3s ease;
}
body.open .scene-cast,body.sack-open .scene-cast{opacity:.1;filter:blur(3px) brightness(.6)}
body.thinking .scene-cast__lead{filter:brightness(.72) saturate(.85)}
.scene-cast__lead{position:absolute;inset:0}

/* coque de carte commune */
.ecard{position:absolute;pointer-events:auto}
.ecard .shell{position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(30,19,9,.86),rgba(12,8,4,.93));
  border:1px solid var(--border-gold);
  box-shadow:0 0 34px rgba(201,162,75,.13),0 24px 52px rgba(0,0,0,.62),inset 0 1px 0 rgba(201,162,75,.15);
  transition:box-shadow .3s ease}
.ecard:hover .shell{box-shadow:0 0 48px rgba(201,162,75,.3),0 30px 60px rgba(0,0,0,.72),inset 0 1px 0 rgba(201,162,75,.2)}
.cnr{position:absolute;width:15px;height:15px;border:1.5px solid var(--gold);pointer-events:none;z-index:6}
.cnr.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.cnr.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
/* pastille de statut */
.epill{position:absolute;top:-11px;left:14px;z-index:6;display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:20px;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.16em;font-size:9px;box-shadow:0 3px 11px rgba(0,0,0,.55);white-space:nowrap}
.epill .dot{width:6px;height:6px;border-radius:50%;animation:epulse 1.9s ease-in-out infinite}
.epill.calm{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#241a0c}
.epill.calm .dot{background:#3a2a08}
.epill.danger{background:linear-gradient(180deg,#d0503a,var(--blood-deep));color:var(--parch)}
.epill.danger .dot{background:var(--parch);box-shadow:0 0 8px rgba(255,222,200,.8)}
@keyframes epulse{50%{opacity:.32}}
/* portrait plein cadre */
.eportrait{position:relative;overflow:hidden}
.eportrait .cast-figure__img{width:100%;height:100%;object-fit:cover;object-position:center 12%;
  filter:contrast(1.04) saturate(1.02)}
/* silhouettes SVG de repli : contain sur fond sombre (pas de cover qui déforme) */
.eportrait .cast-figure__img[src$=".svg"]{object-fit:contain;object-position:center bottom;padding:8% 12% 0}
.eshade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0,transparent 32%,transparent 50%,rgba(10,6,2,.94))}
.ecaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:12px 14px}
.ecaption .role{font-family:var(--cond);text-transform:uppercase;letter-spacing:.28em;font-size:9px;
  color:var(--gold-bright);margin-bottom:5px}
.ecaption h3{font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.8vw,24px);line-height:1;color:var(--parch)}
/* ---- T-052 — FIGURE NON NOMMÉE : on la décrit, on ne la nomme pas ----------------------
   La légende n'est plus un patronyme mais une DÉSIGNATION (« une femme trapue au tablier de
   cuir »). Elle doit se LIRE comme une description : plus petite, en italique, moins dorée —
   une note d'observation, pas une plaque de nom. Le contraste avec une carte nommée doit être
   immédiat : c'est ce qui fait qu'apprendre un nom se remarque. */
.ecard--unnamed .ecaption h3{
  font-style:italic;font-weight:500;
  font-size:clamp(12px,1.15vw,15px);line-height:1.25;
  color:rgba(232,222,201,.82);
  text-shadow:0 1px 6px rgba(0,0,0,.7)}
.ecard--present.ecard--unnamed .ecaption h3{font-size:clamp(11px,1vw,13px)}

/* LE NOM S'INSCRIT — le moment où l'on apprend qui elle est.
   1. `is-naming` : la légende s'efface et se soulève (on cesse de la voir comme « quelqu'un ») ;
   2. `is-named`  : le nom revient, appuyé d'une brève montée d'or sur le cartouche. */
.ecard .ecaption h3{transition:opacity .26s ease,transform .26s ease,filter .26s ease}
.ecard.is-naming .ecaption h3{opacity:0;transform:translateY(-6px)}
.ecard.is-named .ecaption h3{opacity:1;transform:none;animation:enameIn .9s ease-out}
.ecard.is-named .shell{animation:enameGlow 1.4s ease-out}
@keyframes enameIn{
  0%{opacity:0;transform:translateY(8px);filter:blur(3px)}
  55%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none}}
@keyframes enameGlow{
  0%{box-shadow:0 0 0 rgba(201,162,75,0),0 24px 52px rgba(0,0,0,.62)}
  35%{box-shadow:0 0 54px rgba(201,162,75,.46),0 24px 52px rgba(0,0,0,.62)}
  100%{box-shadow:0 0 0 rgba(201,162,75,0),0 24px 52px rgba(0,0,0,.62)}}
@media (prefers-reduced-motion:reduce){
  .ecard .ecaption h3{transition:none}
  .ecard.is-naming .ecaption h3{opacity:1;transform:none}
  .ecard.is-named .ecaption h3{animation:none}
  .ecard.is-named .shell{animation:none}}

/* créature : traitement plus rouge, plus menaçant */
.ecard--creature .shell{border-color:rgba(184,64,47,.34);
  box-shadow:0 0 34px rgba(184,64,47,.15),0 24px 52px rgba(0,0,0,.62),inset 0 1px 0 rgba(184,64,47,.14)}
.ecard--creature:hover .shell{box-shadow:0 0 48px rgba(184,64,47,.32),0 30px 60px rgba(0,0,0,.72)}
.ecard--creature .ecaption .role{color:#e08a6f}

/* ---- INTERLOCUTEUR : carte d'avant-scène (droite de la SCÈNE, hors colonne) ---- */
.ecard--lead{
  right:calc(var(--col) + clamp(20px,4vw,60px));bottom:clamp(128px,17vh,190px);width:min(270px,24vw);
  opacity:0;transform:translateX(52px);
  transition:opacity .7s ease, transform .82s cubic-bezier(.16,1,.3,1);
}
.ecard--lead.is-in{opacity:1;transform:none}
.ecard--lead.is-leaving{opacity:0;transform:translateX(64px)}
.ecard--lead .ecard__float{animation:efloat 7s ease-in-out infinite}
@keyframes efloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ecard--lead .eportrait{height:clamp(200px,28vh,318px)}

/* ---- GRAPPE DES PRÉSENTS : cartes compactes, tuilées, repliées en rangs, hover → devant ---- */
/* La grappe DÉRIVE du nombre de cartes ; rien ici ne le connaît ni ne l'énumère.
   Historique de deux corrections successives, pour qu'on ne refasse pas le trajet :
   1. la feuille ne mettait en scène que 3 cartes (`nth-child(1..3)`) — les 4e et 5e présents,
      pourtant décidés par le moteur, n'arrivaient pas à l'écran ;
   2. le remède (chevauchement resserré à -48/-62 px) les faisait bien tenir, mais recouvrait
      le DÉBUT des cartes 3, 4 et 5 : à 390 px la 5e n'avait plus que 20 % de son nom visible.
      Elle était présente et anonyme — et le seul recours tactile pour l'identifier était le
      tap, qui JOUE un tour (`engagePresent` → `act()`). On demandait au joueur de s'adresser
      à quelqu'un pour savoir à qui il s'adressait.
   Mesure qui tranche : à 390 px la grappe dispose de 234 px (le reste est à la carte
   d'avant-scène). Cinq cartes lisibles n'y tiennent PAS sur une ligne — 70 px chacune. Ce
   n'est donc pas un réglage de pixels, c'est l'empilement qui était le mauvais outil.
   D'où : plus de chevauchement du tout, un vrai `gap`, et un RETOUR À LA LIGNE. Le tuilage
   reste porté par la seule ROTATION, qui met en scène sans rien masquer ni voler de clic.
   Conséquence voulue : `staging.max_staged` peut passer à 6 ou 12 en DONNÉE sans toucher au
   CSS — la grappe s'étale, puis se replie. Le plafond vit dans le catalogue, pas ici. */
.scene-cast__present{
  position:absolute;left:clamp(150px,16vw,240px);bottom:clamp(160px,19vh,240px);
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:var(--cast-gap,clamp(8px,.8vw,14px));
  /* Réserve explicitement la zone de la carte d'avant-scène, au lieu de l'approcher : la
     largeur disponible est la distance entre le bord gauche de la grappe et le bord gauche
     de `.ecard--lead` (mêmes expressions que ses `right` et `width`), moins un dégagement.
     L'ancienne formule (`100vw - --col - clamp(170px,18vw,300px)`) laissait la grappe passer
     SOUS l'avant-scène : mesuré à 1440 px, la 3e carte était recouverte à 100 % et son clic
     partait à l'interlocuteur. Le chevauchement serré le masquait ; le supprimer l'a révélé. */
  max-width:calc(100vw - var(--col) - clamp(20px,4vw,60px) - min(270px,24vw)
                 - clamp(150px,16vw,240px) - 12px);
  pointer-events:none;
}
.ecard--present{
  position:relative;
  /* Format resserré (avant : clamp(140px,15vw,200px), soit 207 px à 1440). La grappe dispose
     de ~420 px une fois la zone d'avant-scène réservée : à 207 px, TROIS cartes passaient déjà
     à la ligne — la scène à 3 présents, validée sur une rangée, se serait retrouvée sur deux.
     À ~132 px il en tient trois par rangée, donc 3 sur une rangée et 5 sur deux. Les présents
     sont des seconds rôles : leur carte n'a pas à peser autant que l'avant-scène. */
  flex:0 1 auto;width:var(--ecard-w,clamp(112px,8.8vw,136px));min-width:var(--ecard-min,112px);
  opacity:0;transform:translateY(22px) rotate(var(--r,0deg));
  transition:opacity .8s ease, transform .45s cubic-bezier(.2,1,.3,1), z-index 0s .45s;
  cursor:pointer;
}
.ecard--present.is-in{opacity:1;transform:rotate(var(--r,0deg))}
.ecard--present.is-leaving{opacity:0;transform:translateY(20px) rotate(var(--r,0deg))}
/* Tuilage : un CYCLE de trois inclinaisons, pas une liste de cartes. `3n+1/3n+2/3n` vaut pour
   la 4e comme pour la 40e — là où `nth-child(5)` rejouait en CSS un plafond qui appartient au
   catalogue. Les trois premières valeurs sont inchangées : même rendu qu'avant sur ≤3 cartes.
   Plus de `z-index` par rang : sans chevauchement, il n'y a plus rien à départager (et une 6e
   carte ne tombe donc plus en `z-index:auto` derrière la barre de saisie). */
.ecard--present:nth-child(3n+1){--r:-2.4deg}
.ecard--present:nth-child(3n+2){--r:1.2deg}
.ecard--present:nth-child(3n){--r:2.4deg}
/* survol/focus : la carte remonte ET repasse DEVANT (retombe derrière au leave —
   astuce transition z-index 0s .45s du proto) */
.ecard--present:hover,.ecard--present:focus-visible{
  outline:none;z-index:20;transform:translateY(-10px) rotate(var(--r,0deg));
  transition:opacity .8s ease, transform .45s cubic-bezier(.2,1,.3,1), z-index 0s 0s;
}
/* Portrait DÉRIVÉ de la largeur de carte : les proportions tiennent quel que soit le format
   retenu par le palier, au lieu d'une hauteur réglée à la main qui étire la vignette dès que
   la carte maigrit. */
.ecard--present .eportrait{height:calc(var(--ecard-w,clamp(112px,8.8vw,136px)) * 1.06)}
.ecard--present .ecaption{padding:8px 10px}
.ecard--present .ecaption .role{letter-spacing:.2em;font-size:8px;margin-bottom:3px}
.ecard--present .ecaption h3{font-size:clamp(13px,1.05vw,15px)}

/* ---- CARTOUCHE de réplique (dialogue) rattaché à la carte d'avant-scène ---- */
.cast-speech{
  position:absolute;bottom:calc(100% + 14px);right:20%;z-index:8;
  width:max-content;max-width:min(360px,58vw);
  padding:15px 20px 15px 26px;border-radius:4px;
  background:linear-gradient(180deg,rgba(34,24,14,.96),rgba(18,11,6,.97));
  border:1px solid var(--border-strong);
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.22), 0 14px 32px rgba(0,0,0,.62);
  opacity:0;transform:translateY(12px) scale(.97);transform-origin:bottom right;
  transition:opacity .42s ease, transform .5s cubic-bezier(.2,.85,.25,1);
  pointer-events:none;
}
.cast-speech.is-shown{opacity:1;transform:none}
.cast-speech::before{
  content:"\201C";position:absolute;top:-2px;left:7px;
  font-family:var(--serif);font-size:40px;line-height:1;color:var(--gold);opacity:.55;
}
.cast-speech::after{
  content:"";position:absolute;bottom:-8px;right:34px;width:15px;height:15px;
  background:linear-gradient(135deg,rgba(34,24,14,.97),rgba(18,11,6,.97));
  border-right:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);
  transform:rotate(45deg);
}
.cast-speech__text{
  font-family:var(--serif);font-style:italic;line-height:1.5;
  font-size:clamp(15px,2.1vw,18px);color:var(--parch);text-shadow:0 1px 8px #000;
}

/* ============================================================================
   OVERLAYS (carnet / besace) — voile chaud + blur.
   ========================================================================== */
.overlay{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 40%,rgba(20,12,4,.72),rgba(3,2,0,.93));
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.overlay.open{display:flex;animation:ov .35s ease}
@keyframes ov{from{opacity:0}to{opacity:1}}
.closeX{position:absolute;top:26px;right:30px;width:44px;height:44px;border:1px solid var(--border-gold);
  background:rgba(0,0,0,.4);color:var(--gold-bright);font-family:var(--cond);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;z-index:5}
.closeX:hover{background:var(--blood);color:var(--parch);border-color:var(--blood)}

/* ---------- CARNET (grimoire ouvert : reliure cuir + double page parchemin) ---------- */
.carnet-wrap{
  position:fixed;inset:0;z-index:62;display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vh,34px) clamp(8px,3vw,40px);
  opacity:0;pointer-events:none;transition:opacity .3s ease .05s;
  background:radial-gradient(120% 120% at 50% 40%,rgba(20,12,4,.6),rgba(3,2,0,.9));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  perspective:2600px;perspective-origin:38% 62%;
}
body.open .carnet-wrap{opacity:1;pointer-events:auto;transition:opacity .3s ease}
.carnet{
  position:relative;
  width:min(1280px,100%);height:min(806px,100%);
  display:grid;grid-template-rows:auto 1fr;
  transform-origin:14% 100%;transform-style:preserve-3d;
  transform:translate3d(-46px,54px,-40px) scale(.8) rotateZ(-5deg);
  opacity:0;
  transition:transform .78s cubic-bezier(.16,1,.3,1), opacity .5s ease;
  filter:drop-shadow(0 44px 74px rgba(0,0,0,.72));
}
body.open .carnet{transform:none;opacity:1}

/* COUVERTURE (cuir + emblème) : pivote en rotateY pour ouvrir le livre. */
.carnet-cover{
  position:absolute;inset:0;z-index:9;border-radius:8px;pointer-events:none;
  transform-origin:left center;backface-visibility:hidden;
  background:
    radial-gradient(120% 90% at 62% 30%, rgba(201,162,75,.10), transparent 55%),
    linear-gradient(135deg,#3c2a14,#241708 52%,#150c05);
  border:1px solid #55401f;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.2), inset 12px 0 26px rgba(0,0,0,.6),
    0 34px 64px rgba(0,0,0,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transform:rotateY(0deg);
  transition:transform .82s cubic-bezier(.66,0,.24,1);
}
.carnet-cover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:16px;
  background:linear-gradient(90deg,#0e0904,#2c1d0d);
  border-right:1px solid rgba(201,162,75,.24);border-radius:8px 0 0 8px;
}
.carnet-cover::after{
  content:"";position:absolute;inset:16px 14px 16px 30px;border-radius:5px;
  border:1px solid rgba(201,162,75,.28);box-shadow:inset 0 0 26px rgba(0,0,0,.5);
}
.carnet-cover .cover-emblem{width:96px;height:96px;opacity:.92;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.carnet-cover .cover-brand{font-family:var(--serif);font-size:30px;letter-spacing:.05em;
  color:var(--parch-soft);text-shadow:0 2px 12px #000}
.carnet-cover .cover-brand b{color:var(--gold-bright);font-weight:400}
body.open .carnet-cover{transform:rotateY(-176deg)}

/* tête du carnet : titre + onglets rubans + fermer */
.cn-head{
  display:flex;align-items:flex-end;gap:clamp(10px,2vw,26px);
  padding:10px clamp(10px,1.4vw,14px) 0;
}
.book-title{font-family:var(--cond);text-transform:uppercase;letter-spacing:.4em;font-size:13px;
  color:var(--gold-bright);text-shadow:0 0 18px rgba(201,162,75,.32);white-space:nowrap}
.book-title small{display:block;font-family:var(--serif);text-transform:none;letter-spacing:0;
  font-style:italic;font-size:13px;color:var(--muted);margin-top:3px}
.cn-head .meta{display:flex;gap:18px;text-align:left}
.cn-head .meta .k{display:block;font-size:9px;letter-spacing:.24em;color:var(--muted);margin-bottom:2px}
.cn-head .meta .v{font-size:15px;color:var(--parch);letter-spacing:.02em;font-family:var(--serif)}
.cn-head .meta .v.state{color:var(--gold-bright)}
/* onglets à signets rubans (proto) */
.tabs{display:flex;gap:8px;margin-left:auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{height:0}
.tab-btn{position:relative;font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;font-size:11px;
  color:var(--parch-dim);text-align:center;flex:none;
  background:linear-gradient(180deg,#3a2416,#2a1810);border:1px solid #6a4526;border-bottom:none;
  padding:9px 18px 11px;cursor:pointer;transition:.2s;border-radius:6px 6px 0 0;
  box-shadow:inset 0 1px 0 rgba(201,162,75,.16)}
.tab-btn .rk{display:block;font-family:var(--serif);text-transform:none;letter-spacing:0;
  font-style:italic;font-size:12px;color:var(--muted);margin-top:1px}
.tab-btn:hover{color:var(--parch);transform:translateY(-1px)}
.tab-btn.active{color:#241a0c;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold)}
.tab-btn.active .rk{color:#6a4712}
.tab-btn .signet{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:14px;height:16px;
  background:var(--blood-deep);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);opacity:0;transition:.2s}
.tab-btn.active .signet{opacity:1}
.cn-head .close{
  width:38px;height:38px;border-radius:0;flex:none;cursor:pointer;margin-bottom:2px;
  border:1px solid var(--border-gold);background:rgba(0,0,0,.4);
  color:var(--gold-bright);font-family:var(--cond);font-size:17px;line-height:1;
  transition:.2s;
}
.cn-head .close:hover{background:var(--blood);color:var(--parch);border-color:var(--blood)}

/* reliure cuir + double page parchemin */
.spread{
  position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:10px;
  color:#2a1f10;border-radius:9px;padding:clamp(9px,.9vw,15px);perspective:2400px;
  background:linear-gradient(180deg,#5a3a22,#3a2416 7%,#2a1810 93%,#1c0f08);
  box-shadow:inset 0 0 0 1px #6a4526,inset 0 0 0 4px #241407,inset 0 3px 22px rgba(0,0,0,.6),0 44px 84px rgba(0,0,0,.72);
  min-height:0;
}
.spread::before{content:"";position:absolute;inset:clamp(5px,.6vw,10px);border-radius:5px;pointer-events:none;z-index:9;
  border:1px solid rgba(201,162,75,.42);box-shadow:inset 0 0 0 1px rgba(201,162,75,.12)}
.gutter{position:absolute;top:clamp(9px,.9vw,15px);bottom:clamp(9px,.9vw,15px);left:calc(50% - 10px);width:20px;z-index:7;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,10,5,0),rgba(14,8,4,.6) 42%,rgba(70,42,20,.25) 50%,rgba(14,8,4,.6) 58%,rgba(20,10,5,0))}
.page{position:relative;overflow:auto;min-height:0;
  background:
    radial-gradient(130% 100% at 50% 0%,rgba(255,248,228,.5),transparent 60%),
    linear-gradient(180deg,rgba(232,217,186,.9),rgba(219,200,158,.93) 60%,rgba(211,192,150,.95)),
    url('../img/game/parchment.webp');
  background-size:cover,cover,cover;background-position:center;
  scrollbar-width:none;
}
.page::-webkit-scrollbar{width:0;height:0}
.page.left{border-radius:5px 0 0 5px;background-position:left center,center,left center}
.page.right{border-radius:0 5px 5px 0;background-position:right center,center,right center}
.page::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;z-index:1;
  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='0.62' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")}
.page.left::after{content:"";position:absolute;top:0;right:0;bottom:0;width:13%;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(60,36,18,.28) 78%,rgba(30,16,8,.5))}
.page.right::after{content:"";position:absolute;top:0;left:0;bottom:0;width:13%;pointer-events:none;z-index:2;
  background:linear-gradient(270deg,transparent,rgba(60,36,18,.28) 78%,rgba(30,16,8,.5))}
.page-in{position:relative;z-index:3;padding:clamp(20px,2.6vw,32px) clamp(22px,2.6vw,40px);min-height:100%;
  display:flex;flex-direction:column}
.page.left .page-in{padding-left:clamp(30px,3vw,62px)}
.page.right .page-in{padding-right:clamp(30px,3vw,62px)}

/* titres de page/section (langue proto) */
.hd{font-family:var(--cond);text-transform:uppercase;letter-spacing:.28em;font-size:11px;
  color:var(--blood-deep);margin-bottom:4px}
.page h2,.section h3{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.4vw,30px);
  line-height:1.1;margin-bottom:6px;color:#241a0c}
.section .lede{font-family:var(--serif);font-style:italic;font-size:15px;color:#6a5326;margin-bottom:16px}

.know{list-style:none;margin-top:10px}
.know li{list-style:none;padding:9px 0;border-bottom:1px dashed rgba(90,60,20,.32);
  display:flex;gap:10px;align-items:baseline;color:#4a3820;font-size:16px}
.know li .d{width:7px;height:7px;background:#b8402f;transform:rotate(45deg);flex:none;margin-top:6px}
.know li.void{color:#9c855c;font-style:italic}
.know li.void .d{background:#c9a24b;opacity:.4}
.foot-note{margin-top:22px;font-style:italic;color:#7a5f34;font-size:14px;border-top:1px solid rgba(90,60,20,.3);padding-top:12px}

.sections{position:relative;flex:1;min-height:0}
.section{position:absolute;inset:0;display:flex;flex-direction:column}
.section[hidden]{display:none}

/* tourne-page (feuille qui pivote) */
.flip{position:absolute;inset:0;transform-origin:left center;pointer-events:none;z-index:5;
  backface-visibility:hidden;
  background:
    linear-gradient(255deg, rgba(60,40,15,.32), rgba(120,90,45,.06) 32%, transparent 55%),
    radial-gradient(120% 130% at 30% 8%, #f3e8cf, #e7d7b3 52%, #d7c295 100%);
  border-left:1px solid rgba(90,60,20,.45);
  box-shadow:6px 0 26px rgba(40,25,8,.35);opacity:0;
}
.flip.run{animation:turn .66s cubic-bezier(.4,.05,.35,1) forwards}
@keyframes turn{
  0%{opacity:1;transform:rotateY(0deg);box-shadow:0 0 30px rgba(40,25,8,.2)}
  30%{opacity:1;box-shadow:22px 8px 40px rgba(40,25,8,.5)}
  100%{opacity:0;transform:rotateY(-168deg);box-shadow:0 0 60px rgba(40,25,8,.5)}
}

/* ---------- CARTE hexagonale (grande, zoomable) — inchangée fonctionnellement ---------- */
.section-map{min-height:100%}
.mapframe{
  position:relative;flex:1;min-height:min(48vh,400px);margin:4px 0 2px;border-radius:10px;
  overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 100% at 50% 36%, #271c10, #150d06 78%);
  box-shadow:inset 0 0 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(201,162,75,.16);
}
.mapframe::before{
  content:"";position:absolute;inset:-30%;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:
    radial-gradient(34% 26% at 30% 40%, rgba(150,130,95,.22), transparent 70%),
    radial-gradient(40% 30% at 70% 60%, rgba(130,112,80,.18), transparent 72%);
  animation:fogdrift 58s linear infinite;
}
.mapframe.zoomed::before{opacity:.22}
.map-stage{
  position:absolute;left:50%;top:50%;width:640px;height:520px;margin:-260px 0 0 -320px;
  transform-origin:center center;
  transition:transform .8s cubic-bezier(.2,1,.3,1);
  will-change:transform;z-index:2;
}
.map-world{
  position:absolute;inset:0;transform-origin:center center;
  transition:transform .85s cubic-bezier(.22,1,.3,1);will-change:transform;
}
.hex{
  position:absolute;width:132px;height:116px;margin:-58px 0 0 -66px;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  transition:filter .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
@keyframes hexfog{0%,100%{opacity:.35;transform:translateY(1px)}50%{opacity:.8;transform:translateY(-2px)}}
.hex .hex-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(165deg,#2b2114,#150d06);
  transition:opacity 1s ease .1s, transform 1.3s cubic-bezier(.2,.8,.2,1) .1s;
}
.hex.fog .hex-veil{opacity:.92;transform:none}
.hex.fog .hex-veil::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 55% at 50% 42%, rgba(172,150,112,.24), transparent 70%);
  opacity:.6;animation:hexfog 9s ease-in-out infinite;}
.hex.revealed .hex-veil{opacity:0;transform:translateY(-66%)}
.hex.revealed.veil-down .hex-veil{opacity:.92;transform:none;transition:none}
.hex.fog{background:linear-gradient(160deg,#221a10,#120b05);}
.hex.reachable.fog .hex-veil{opacity:.8}
.hex.revealed{background-size:cover;background-position:center;background-repeat:no-repeat;z-index:2;}
.hex.revealed.has-img{background-image:var(--tile-img);}
.hex.revealed.biome-plaine{background-color:#5f6b34;}
.hex.revealed.biome-foret{background-color:#2f4423;}
.hex.revealed.biome-colline{background-color:#6d5c30;}
.hex.revealed.biome-montagne{background-color:#565f66;}
.hex.revealed.biome-marais{background-color:#3d4a30;}
.hex.revealed.biome-lac{background-color:#2f5a6b;}
.hex.revealed.biome-village{background-color:#6b4a24;}
.hex .hex-name{
  position:absolute;left:0;right:0;bottom:13%;text-align:center;z-index:4;
  font-family:var(--cond);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:#fbe6c2;text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.9);pointer-events:none;
}
.hex.reachable{cursor:pointer;}
.hex.reachable::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(201,162,75,.55);opacity:.55;animation:reachpulse 2.4s ease-in-out infinite;}
@keyframes reachpulse{0%,100%{opacity:.28}50%{opacity:.85}}
.hex.reachable:hover{transform:scale(1.06);z-index:6;}
.hex.reachable:hover::before{opacity:1;box-shadow:inset 0 0 0 2px rgba(234,202,122,.95);}
.hex.reachable:focus-visible{outline:none;transform:scale(1.06);z-index:6;}
.hex.reachable:focus-visible::before{opacity:1;box-shadow:inset 0 0 0 2px rgba(234,202,122,1);}
.hex.current{
  cursor:zoom-in;z-index:5;
  filter:drop-shadow(0 0 20px rgba(224,180,90,.5)) drop-shadow(0 0 1.5px rgba(230,189,99,.9));
}
.hex.current::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 0 2px rgba(235,196,110,.95), inset 0 0 26px rgba(20,10,0,.45);}
.mapframe.zoomed .hex.current{cursor:zoom-out}
.hex.spawning{animation:hexspawn .7s ease both;}
@keyframes hexspawn{0%{opacity:0;transform:scale(.62)}100%{opacity:1;transform:scale(1)}}
.map-controls{position:absolute;right:10px;top:10px;z-index:6;display:flex;flex-direction:column;gap:6px}
.map-zoom{
  width:32px;height:32px;border-radius:7px;cursor:pointer;
  border:1px solid var(--border-strong);background:linear-gradient(180deg,#2b2013,#1b130a);
  color:var(--gold-bright);font-family:var(--serif);font-size:19px;line-height:1;
  box-shadow:0 3px 8px rgba(0,0,0,.5);transition:transform .15s ease, filter .2s ease;
}
.map-zoom:hover{filter:brightness(1.2)}
.map-zoom:active{transform:scale(.9)}
.map-back{
  position:absolute;left:10px;top:10px;z-index:6;cursor:pointer;
  border:1px solid var(--border-strong);border-radius:7px;
  background:linear-gradient(180deg,#2b2013,#1b130a);color:var(--parch-soft);
  font-family:var(--serif);font-size:13px;padding:7px 12px;letter-spacing:.02em;
  box-shadow:0 3px 8px rgba(0,0,0,.5);transition:transform .15s ease, filter .2s ease;
  display:inline-flex;align-items:center;gap:6px;
}
.map-back .chev{color:var(--gold-bright)}
.map-back:hover{filter:brightness(1.15)}
.map-back:active{transform:scale(.96)}
.map-back[hidden]{display:none}
.map-hint{
  position:absolute;left:0;right:0;bottom:12px;z-index:6;text-align:center;pointer-events:none;
  font-style:italic;color:var(--parch-soft);font-size:13px;text-shadow:0 1px 6px #000;opacity:.85;
  transition:opacity .3s ease;animation:hintpulse 3.2s ease-in-out infinite;
}
.mapframe.zoomed .map-hint{opacity:0;animation:none}
@keyframes hintpulse{0%,100%{opacity:.55}50%{opacity:.95}}
.maplegend{margin-top:8px;text-align:center;font-style:italic;color:#6a5326;font-size:14px}

/* ---------- CAPS « Ce que je veux » : fiches parchemin ---------- */
.section-caps{min-height:100%}
.caps-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:6px 0 0;padding:0}
.caps-list li{
  list-style:none;position:relative;display:flex;gap:13px;align-items:flex-start;
  padding:13px 15px 14px;border:0;border-radius:9px;
  background:linear-gradient(180deg,rgba(120,90,45,.12),rgba(90,60,20,.05));
  box-shadow:inset 0 0 0 1px rgba(120,90,45,.30), inset 0 0 0 2px rgba(243,232,207,.35),
    0 2px 7px rgba(60,40,15,.14);
}
.caps-list li::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#e7c877,#b8902f)}
.caps-list .cap-mark{flex:none;width:13px;height:13px;margin-top:3px;position:relative}
.caps-list .cap-mark::before{content:"";position:absolute;inset:2px;background:#c9a24b;transform:rotate(45deg);
  box-shadow:0 0 0 2px rgba(201,162,75,.28)}
.caps-list .cap-body{flex:1;min-width:0}
.caps-list .cap-label{display:block;font-weight:600;color:#2f2410;font-size:16px;letter-spacing:.01em;line-height:1.2}
.caps-list .cap-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.caps-list .cap-dir,.caps-list .cap-dist{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;font-weight:700;
  padding:3px 9px;border-radius:20px;line-height:1.3;white-space:nowrap;
}
.caps-list .cap-dir{background:rgba(120,90,45,.16);color:#6a5326;box-shadow:inset 0 0 0 1px rgba(120,90,45,.30)}
.caps-list .cap-dist{background:rgba(184,64,47,.10);color:#7c2a20;box-shadow:inset 0 0 0 1px rgba(184,64,47,.30)}
.caps-list li.void{color:#9c855c;font-style:italic;align-items:center;
  background:linear-gradient(180deg,rgba(120,90,45,.06),rgba(90,60,20,.02));
  box-shadow:inset 0 0 0 1px rgba(120,90,45,.20)}
.caps-list li.void::before{background:rgba(201,162,75,.35)}
.caps-list li.void .cap-mark::before{background:#c9a24b;opacity:.4;box-shadow:none}
.caps-list li.cap-appear{animation:capappear .55s cubic-bezier(.2,.85,.25,1) both}
@keyframes capappear{0%{opacity:0;transform:translateY(9px) scale(.97)}100%{opacity:1;transform:none}}
.caps-list li.cap-closer{animation:capcloser 1.1s ease}
@keyframes capcloser{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(120,90,45,.30), inset 0 0 0 2px rgba(243,232,207,.35), 0 2px 7px rgba(60,40,15,.14)}
  35%{box-shadow:inset 0 0 0 1px rgba(201,162,75,.6), 0 0 0 2px rgba(201,162,75,.45), 0 0 20px rgba(201,162,75,.4)}
}
.caps-foot{margin-top:14px;text-align:center;font-style:italic;color:#6a5326;font-size:14px}

/* ---------- AUTOPORTRAIT « Qui suis-je ? » (reveal) — inchangé fonctionnellement ---------- */
/* Scopé sur le hook [data-game-who] (bloc autoportrait du carnet) : la classe `.who`
   seule matcherait AUSSI le label de la voix (.voice .who) dans la colonne — le
   min-height:100% l'étirait et poussait le texte du Conteur ~150px plus bas. */
[data-game-who]{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100%;text-align:center;padding-top:2px}
[data-game-who] .portrait{
  width:clamp(96px,20%,138px);aspect-ratio:3/4;border-radius:6px;margin-bottom:13px;
  transition:width .5s ease, margin-bottom .5s ease;
  background:
    radial-gradient(60% 45% at 50% 34%, #4a3a22 0 40%, transparent 42%),
    linear-gradient(180deg,#2a2013,#171008);
  border:2px solid #6b5228;position:relative;
  box-shadow:inset 0 0 30px rgba(0,0,0,.6),0 8px 20px rgba(40,25,8,.5);
  display:flex;align-items:flex-end;justify-content:center;
}
[data-game-who] .portrait::before{content:"";position:absolute;left:50%;top:30%;transform:translate(-50%,-40%);
  width:40%;aspect-ratio:1;border-radius:50%;background:#0d0803;opacity:.55}
[data-game-who] .portrait::after{content:"";position:absolute;bottom:0;width:64%;height:38%;
  background:#0d0803;opacity:.55;border-radius:50% 50% 0 0}
[data-game-who] .q{font-size:48px;color:#8a6a2e;line-height:.7;margin-bottom:4px;font-family:var(--serif)}
[data-game-who] .scratch{width:70%;height:2px;background:repeating-linear-gradient(90deg,#7a5c28 0 14px,transparent 14px 22px);margin:5px 0;opacity:.5}
[data-game-who] .scratch.scratch-short{width:52%}
[data-game-who] .seal{
  margin-top:13px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:700;
  color:#7c2a20;border:1px solid #b8402f;border-radius:20px;padding:6px 14px;background:rgba(184,64,47,.08)
}
[data-game-who] .seal .dot{width:8px;height:8px;border-radius:50%;background:#b8402f}
[data-game-who].awake .portrait{width:clamp(80px,16%,108px);margin-bottom:8px}
[data-game-who].awake .q{opacity:0;font-size:0;height:0;margin:0;overflow:hidden;transition:all .5s ease}
[data-game-who].awake .scratch{opacity:0;height:0;margin:0;overflow:hidden}
[data-game-who].awake .seal{opacity:.55;filter:grayscale(.3);margin-top:10px}
.reveal-lines{list-style:none;margin:12px 0 0;padding:0;width:min(100%,300px);text-align:left}
.reveal-lines li{
  display:flex;align-items:center;gap:10px;
  padding:7px 2px;border-bottom:1px dashed rgba(90,60,20,.32);color:#4a3820;line-height:1.4;font-size:15px;
}
.reveal-lines li::before{content:"";flex:0 0 auto;width:7px;height:7px;
  background:#c9a24b;transform:rotate(45deg)}
.reveal-lines .rl-name{font-family:var(--serif);letter-spacing:.02em;color:#3a2c12}
.reveal-lines .rl-val{margin-left:auto;text-align:right;max-width:60%}
.reveal-lines li.band-scelle{opacity:.72}
.reveal-lines li.band-scelle .rl-name{color:#6f5528}
.reveal-lines .rl-sealed{font-family:var(--serif);letter-spacing:.2em;color:#9a7636;opacity:.65}
.reveal-lines .rl-impr{font-style:italic;color:#6a5326}
.reveal-lines .rl-num{font-variant-numeric:tabular-nums;color:#3a2c12;font-weight:600;white-space:nowrap}
.reveal-lines li.band-net .rl-net{color:#8a2f22}
.reveal-lines li.band-net::before{background:#b8402f}
.reveal-lines li.drawn{animation:inkwrite .6s ease both}
@keyframes inkwrite{0%{opacity:0;transform:translateX(-6px)}100%{opacity:1;transform:none}}

/* ---------- BESACE : grille d'objets uniques (overlay sombre) ---------- */
.sack{position:relative;width:min(1180px,94vw);max-height:88vh;display:flex;flex-direction:column;
  animation:rise .4s cubic-bezier(.2,1,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
.sack-head{display:flex;align-items:flex-end;gap:18px;margin-bottom:16px;padding:0 6px;flex-wrap:wrap}
.sack-head .t{letter-spacing:.4em;font-size:13px;color:var(--gold-bright)}
.sack-head .s{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);margin-left:auto}
.inv-list{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:18px;overflow:auto;padding:14px 4px 4px;margin:0;scrollbar-width:thin;scrollbar-color:#5a462a transparent;
}
.inv-list::-webkit-scrollbar{width:7px}
.inv-list::-webkit-scrollbar-thumb{background:#5a462a;border-radius:6px}
.inv-empty{
  grid-column:1/-1;list-style:none;margin:0;padding:26px 18px;
  font-style:italic;color:var(--muted);text-align:center;font-size:16px;
  border:1px dashed var(--border-gold);
}
/* carte-objet : plaque sombre or, portrait plein cadre (proto .obj) */
.inv-card{
  list-style:none;cursor:pointer;position:relative;overflow:hidden;text-align:left;
  background:linear-gradient(180deg,rgba(28,18,8,.92),rgba(14,9,4,.95));
  border:1px solid var(--border-gold);box-shadow:0 14px 30px rgba(0,0,0,.55);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  animation:capappear .45s cubic-bezier(.2,.85,.25,1) both;
}
.inv-card:hover{transform:translateY(-6px);border-color:var(--gold);
  box-shadow:0 22px 44px rgba(0,0,0,.7),0 0 26px rgba(201,162,75,.22)}
.inv-card:focus-visible{outline:none;border-color:var(--gold-bright);
  box-shadow:0 0 0 2px rgba(234,202,122,.6),0 22px 44px rgba(0,0,0,.7)}
.inv-card__frame{position:relative;display:block;aspect-ratio:1;overflow:hidden;
  background:radial-gradient(60% 50% at 50% 40%, #3a2c18 0 42%, transparent 44%),
    linear-gradient(180deg,#2a2013,#150d06)}
.inv-card__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(14,9,4,.9))}
.inv-card__img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.inv-card__img[src$=".svg"]{object-fit:contain;padding:14%}
.inv-card:hover .inv-card__img{transform:scale(1.06)}
.inv-card__img.revealed{animation:invreveal .55s ease}
@keyframes invreveal{0%{opacity:.15}100%{opacity:1}}
.inv-card__frame.is-unknown .inv-card__img,
.inv-detail__frame.is-unknown .inv-card__img{filter:brightness(.5) saturate(.5) blur(1px)}
.inv-card__seal{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:19px;color:#f0dcae;
  background:radial-gradient(circle at 40% 35%,#a1382b,#6d1f18);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.2),0 3px 8px rgba(0,0,0,.5);
}
.inv-card__name{display:block;position:relative;z-index:2;margin-top:-34px;
  padding:0 14px;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.1;
  color:var(--gold-bright);overflow-wrap:anywhere;text-shadow:0 2px 8px #000}
.inv-card--unknown .inv-card__name{font-style:italic;color:var(--parch-dim)}
.inv-card__status{display:block;padding:6px 14px 13px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:9px;color:var(--gold)}
.inv-card--unknown .inv-card__status{color:#e08a6f}
/* overlay « examiner » : l'étude d'objet en grand, au sein de la besace */
.inv-detail{
  position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:clamp(18px,4%,34px);
  background:radial-gradient(120% 100% at 50% 30%, rgba(28,18,8,.98), rgba(10,6,2,.99));
  border:1px solid var(--border-gold);
  opacity:0;transform:scale(.98);pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.85,.25,1);
}
.inv-detail[hidden]{display:none}
.inv-detail.is-open{opacity:1;transform:none;pointer-events:auto}
.inv-detail__frame{position:relative;width:min(62%,260px);aspect-ratio:1;overflow:hidden;
  border:1px solid var(--border-gold);
  background:radial-gradient(60% 50% at 50% 40%, #3a2c18 0 42%, transparent 44%),
    linear-gradient(180deg,#2a2013,#150d06)}
.inv-detail__frame .inv-card__img{filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
.inv-detail__name{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);font-weight:600;
  color:var(--gold-bright);text-align:center}
.inv-detail__status{font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;
  font-size:10px;color:var(--gold)}
.inv-detail__close{
  position:absolute;top:12px;right:12px;width:36px;height:36px;cursor:pointer;
  border:1px solid var(--border-gold);background:rgba(0,0,0,.4);
  color:var(--gold-bright);font-family:var(--cond);font-size:15px;line-height:1;transition:.2s;
}
.inv-detail__close:hover{background:var(--blood);color:var(--parch);border-color:var(--blood)}

/* ---------- RÉSOLUTION DE DÉ (flottante, au submit — données réelles) ----------
   Centrée sur la SCÈNE (les 2/3 gauches), pas sur l'écran entier (--col:0 sous 1180). */
.roll{position:fixed;z-index:70;left:calc((100% - var(--col)) / 2);top:40%;transform:translate(-50%,-50%);display:none;
  flex-direction:column;align-items:center;gap:16px;pointer-events:none}
.roll.show{display:flex;animation:ov .3s ease}
/* VRAI d20 (T-004) : icosaèdre SVG noir mat, chiffre gravé or. Markup dans
   templates/element/game/d20_shape.php ; ici l'échelle, l'aura et le roll sobre.
   Discret-by-design (verdict ux T-003) : la QUALITÉ monte, pas la taille. */
.d20{position:relative;width:96px;height:96px;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(201,162,75,.3))}
.d20-svg{display:block;width:100%;height:100%;overflow:visible}
/* facettes : 3 noirs très proches modèlent le relief (lumière haut-gauche) */
.d20 .f{stroke:var(--border-gold);stroke-width:.6;stroke-linejoin:round}
.d20 .f-lo{fill:#0c0904}
.d20 .f-mid{fill:#15100a}
.d20 .f-hi{fill:#1e160c}
.d20 .f-face{stroke:var(--border-gold);stroke-width:.9}
.d20 .f-rim{fill:none;stroke:rgba(201,162,75,.55);stroke-width:1;stroke-linejoin:round}
/* chiffre GRAVÉ or : liseré sombre (creux) + double ombre inset (haut sombre, bas doré) */
.d20 .d20__num{font-family:var(--cond);font-weight:500;font-size:30px;
  fill:var(--gold-bright);paint-order:stroke;stroke:rgba(0,0,0,.5);stroke-width:.7;
  filter:drop-shadow(0 -0.6px 0 rgba(0,0,0,.65)) drop-shadow(0 0.7px 0 rgba(234,202,122,.3))}
.d20.spin{animation:d20roll .7s cubic-bezier(.3,.1,.2,1)}
@keyframes d20roll{
  0%{transform:rotate(-30deg) scale(.6);opacity:.35}
  60%{transform:rotate(300deg) scale(1.12);opacity:1}
  100%{transform:rotate(360deg) scale(1)}
}
.roll .verdict{font-family:var(--cond);text-transform:uppercase;letter-spacing:.28em;font-size:13px;
  color:var(--gold-bright);text-align:center;padding:0 14px}
.roll.lost .verdict{color:var(--blood)}
/* échec : l'or vire au sang (le d20 reste noir), aura + gravure sang */
.roll.lost .d20{filter:drop-shadow(0 12px 26px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(184,64,47,.32))}
.roll.lost .d20 .f-rim,.roll.lost .d20 .f-face{stroke:rgba(184,64,47,.6)}
.roll.lost .d20 .d20__num{fill:#e79a80;
  filter:drop-shadow(0 -0.6px 0 rgba(0,0,0,.6)) drop-shadow(0 0.7px 0 rgba(184,64,47,.32))}

/* ---------- CALQUE MJ (debug) : hors-fiction, monospace, discret ----------
   Repositionné haut-GAUCHE (sous la topbar) : le haut-droit appartient désormais à la
   colonne d'infos. z-index sous .mj-trace (76) — le panneau de l'Œil le recouvre. */
.mj-debug{
  position:fixed;top:calc(72px + env(safe-area-inset-top));left:12px;z-index:74;
  min-width:210px;max-width:min(320px,80vw);
  background:rgba(12,16,20,.92);color:#a8c5b8;
  border:1px solid #2e3d38;border-radius:6px;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:11px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);backdrop-filter:blur(2px);
}
.mj-debug[hidden]{display:none}
.mj-debug .mj-head{
  padding:6px 10px;border-bottom:1px solid #2e3d38;
  text-transform:uppercase;letter-spacing:.18em;font-size:9px;font-weight:700;color:#6f8f83;
}
.mj-debug dl{margin:0;padding:8px 10px;display:grid;gap:5px}
.mj-debug dl>div{display:flex;gap:8px;align-items:baseline}
.mj-debug dt{flex:none;width:56px;color:#5f7d72;text-transform:uppercase;letter-spacing:.1em;font-size:9px}
.mj-debug dd{margin:0;color:#cfe6db;word-break:break-word}
.mj-debug [data-game-debug-roll]{color:#e6d08a}

/* ============================================================================
   ŒIL DU MJ — switch discret (barre haute) + panneau de trace des tours.
   Hors-fiction assumé mais dans la DA (parchemin sombre chaud, or + rouge sang,
   Oswald pour les labels, Cormorant pour les détails). Piloté par game-debug.js.
   ========================================================================== */
/* le switch : petit sceau « œil », estompé au repos, doré quand actif */
.mj-eye{
  display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer;
  width:32px;height:32px;border-radius:50%;
  color:var(--muted);background:rgba(20,15,9,.35);border:1px solid var(--border);
  opacity:.45;transition:opacity .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.mj-eye svg{width:15px;height:15px}
.mj-eye:hover,.mj-eye:focus-visible{outline:none;opacity:1;color:var(--gold-bright);border-color:var(--border-gold)}
/* panneau ouvert mais calque serveur PAS confirmé (refus ACL / POST en vol) : visible, pas doré */
.mj-eye.is-open{opacity:.85;color:var(--parch-dim);border-color:var(--border)}
/* le sceau ne se dore QUE si le serveur a confirmé le calque MJ ({ok, debug:true}) */
.mj-eye.is-on{
  opacity:1;color:var(--gold-bright);border-color:var(--gold);
  box-shadow:0 0 12px rgba(201,162,75,.35), inset 0 0 6px rgba(201,162,75,.2);
}

/* le panneau : glisse depuis la gauche, overlay (ne déforme pas la scène) */
.mj-trace{
  position:fixed;top:0;left:0;bottom:0;z-index:76;
  width:min(400px,94vw);display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(28,19,10,.97),rgba(13,8,4,.985));
  border-right:1px solid var(--border-strong);
  box-shadow:inset -1px 0 0 rgba(201,162,75,.16), 30px 0 70px rgba(0,0,0,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transform:translateX(-103%);visibility:hidden;
  transition:transform .45s cubic-bezier(.2,.85,.25,1), visibility 0s .45s;
}
.mj-trace.is-open{
  transform:none;visibility:visible;
  transition:transform .45s cubic-bezier(.2,.85,.25,1);
}
.mj-trace__head{
  flex:none;display:flex;align-items:center;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 12px;
  border-bottom:1px solid rgba(201,162,75,.18);
}
.mj-trace__title{letter-spacing:.3em;font-size:11px;color:var(--gold-bright);
  text-shadow:0 0 16px rgba(201,162,75,.3)}
.mj-trace__title small{display:block;font-family:var(--serif);text-transform:none;letter-spacing:0;
  font-style:italic;font-size:12px;color:var(--muted);margin-top:3px}
/* témoin « ● enregistrement » : le serveur grave les tours même panneau fermé
   (trace-history → recording:true, dévoilé par game-debug.js) — discret, dans la DA */
.mj-trace__rec{flex:none;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:8.5px;
  color:var(--muted);white-space:nowrap;cursor:default}
.mj-trace__rec i{width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--blood);box-shadow:0 0 6px rgba(184,64,47,.55);
  animation:mjrecpulse 2.6s ease-in-out infinite}
@keyframes mjrecpulse{0%,100%{opacity:1}50%{opacity:.35}}
.mj-trace__close{
  margin-left:auto;width:32px;height:32px;flex:none;cursor:pointer;
  border:1px solid var(--border-gold);background:rgba(0,0,0,.4);
  color:var(--gold-bright);font-family:var(--cond);font-size:15px;line-height:1;transition:.2s;
}
.mj-trace__close:hover{background:var(--blood);color:var(--parch);border-color:var(--blood)}
/* refus serveur du calque (anonyme / sans permission) : notice thémée, lisière sang */
.mj-trace__notice{flex:none;margin:14px 16px 0;padding:12px 14px;
  border:1px solid rgba(184,64,47,.35);background:rgba(184,64,47,.08);
  font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.5;color:var(--parch-dim)}
.mj-trace__notice a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px}
.mj-trace__notice a:hover,.mj-trace__notice a:focus-visible{outline:none;color:var(--gold)}
.mj-trace__turns{flex:1;overflow-y:auto;padding-bottom:22px;
  scrollbar-width:thin;scrollbar-color:#5a462a transparent}
.mj-trace__turns::-webkit-scrollbar{width:7px}
.mj-trace__turns::-webkit-scrollbar-thumb{background:#5a462a;border-radius:6px}
.mj-trace__empty{padding:28px 20px;font-family:var(--serif);font-style:italic;
  color:var(--muted);font-size:14px;text-align:center;line-height:1.5}

/* un tour = un bloc horodaté (les plus récents en haut) */
.mj-turn{padding:13px 16px 15px;border-bottom:1px solid rgba(201,162,75,.12);
  animation:capappear .4s ease both}
/* tour GRAVÉ (relu depuis trace-history, pas joué cette session) : à peine estompé */
.mj-turn--history{opacity:.82}
.mj-turn__top{display:flex;align-items:baseline;gap:10px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:9px;color:var(--muted)}
.mj-turn__num{color:var(--gold)}
.mj-turn__intent{margin:6px 0 8px;font-family:var(--serif);font-style:italic;
  font-size:14px;line-height:1.4;color:var(--parch)}
.mj-turn__note{font-family:var(--serif);font-style:italic;font-size:13px;
  line-height:1.45;color:var(--muted)}
.mj-turn--error .mj-turn__note{color:#c96a55}
/* en-tête de bloc : durée totale + source de délibération + badge dégradé */
.mj-turn__meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.mj-badge{font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;font-size:8.5px;
  padding:3px 9px;border-radius:20px;line-height:1.3;white-space:nowrap;
  background:rgba(201,162,75,.1);color:var(--gold-bright);box-shadow:inset 0 0 0 1px rgba(201,162,75,.3)}
.mj-badge--src{background:rgba(148,128,93,.12);color:var(--parch-dim);
  box-shadow:inset 0 0 0 1px rgba(148,128,93,.3)}
.mj-badge--degraded{background:rgba(184,64,47,.14);color:#e08a6f;
  box-shadow:inset 0 0 0 1px rgba(184,64,47,.4)}
/* les étapes : ✓ or / ✕ sang / — estompé, durée en chiffres tabulaires */
.mj-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mj-step{display:grid;grid-template-columns:16px 1fr auto;column-gap:8px;align-items:baseline;
  padding:5px 0;border-bottom:1px dashed rgba(201,162,75,.09)}
.mj-step:last-child{border-bottom:0}
.mj-step__glyph{font-family:var(--cond);font-size:10px;text-align:center;color:var(--gold)}
.mj-step__label{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:10px;color:var(--parch-dim)}
.mj-step__ms{font-family:var(--cond);font-size:9.5px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums}
.mj-step__detail{grid-column:2/4;font-family:var(--serif);font-style:italic;
  font-size:12.5px;line-height:1.35;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.mj-step--ko .mj-step__glyph,.mj-step--ko .mj-step__label{color:var(--blood)}
.mj-step--ko .mj-step__detail{color:#c96a55}
.mj-step--skip{opacity:.45}
/* flux LIVE (trace-live pendant le tour) : la dernière étape accomplie pulse doucement */
.mj-steps--live{margin-bottom:8px}
.mj-step--live{animation:mjlivepulse 1.3s ease-in-out infinite}
.mj-step--live .mj-step__label{color:var(--gold-bright)}
@keyframes mjlivepulse{0%,100%{opacity:1}50%{opacity:.55}}
/* pendant l'attente : « le MJ délibère… », points qui respirent (même langue que la voix) */
.mj-pending{display:flex;align-items:center;gap:8px;
  font-family:var(--serif);font-style:italic;font-size:14px;color:var(--gold-bright)}
.mj-pending i{width:5px;height:5px;border-radius:50%;background:var(--gold-bright);opacity:.35;
  animation:vbreathe 1.4s ease-in-out infinite}
.mj-pending i:nth-child(2){animation-delay:.22s}
.mj-pending i:nth-child(3){animation-delay:.44s}

/* ---------- §D8.4 SCÈNE DE MORT : voile sobre, langue codex ---------- */
.death-veil{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 40%,rgba(20,15,9,.86),#050302 78%);
  opacity:0;transition:opacity 2.2s ease;
}
.death-veil.is-visible{opacity:1}
.death-veil[hidden]{display:none}
.death-inner{max-width:520px;padding:0 28px;text-align:center;font-family:var(--serif)}
.death-flame{width:20px;height:32px;margin:0 auto 22px;display:block;opacity:.7;
  animation:deathflicker 3.4s ease-in-out infinite}
@keyframes deathflicker{0%,100%{opacity:.7}50%{opacity:.28}}
.death-title{color:var(--gold-bright);font-size:26px;font-weight:600;letter-spacing:.02em;margin-bottom:16px}
.death-text{color:var(--parch-soft);font-size:16px;line-height:1.7;margin-bottom:12px}
.death-rebirth{color:var(--muted);font-style:italic;font-size:14px;margin-bottom:28px}
.death-go{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:600;
  color:var(--parch);background:transparent;border:1px solid var(--border-strong);
  padding:11px 22px;border-radius:2px;cursor:pointer;transition:border-color .3s,color .3s;
}
.death-go:hover{border-color:var(--gold);color:var(--gold-bright)}

/* ============================================================================
   RESPONSIVE — mobile portrait (~390px) inclus.
   ========================================================================== */
/* Sous 1180px : le split 2/3 + 1/3 s'abandonne (proto taverne.html) — --col:0, la
   colonne d'infos redevient la bande basse cinématique centrée. Les positions calées
   sur var(--col) (coin droit, carte d'avant-scène, d20) se replacent d'elles-mêmes. */
@media (max-width:1180px){
  :root{--col:0px}
  .lowband{top:auto;left:0;right:0;bottom:0;width:100%;height:auto;
    overflow:visible;gap:0;border-left:0;align-items:center;
    padding:0 clamp(20px,6vw,80px) max(22px,env(safe-area-inset-bottom));
    background:linear-gradient(180deg,transparent, rgba(10,6,2,.55) 34%, rgba(8,5,2,.9) 100%)}
  .voice-log{width:min(840px,100%);max-height:min(20vh,170px);margin-bottom:8px}
  .voice-log__entry{text-align:center}
  .voice{max-width:760px;width:100%;text-align:center;margin:0 auto 18px}
  .voice-body{font-size:clamp(17px,2.3vw,24px)}
  .trace{justify-content:center;margin-bottom:14px}
  .crystals{margin-bottom:14px}
  /* bande basse : seul le post-it le plus récent reste visible (maquette) */
  .crystals .crystal:not(:first-child){display:none}
  .scribe{width:min(760px,100%);margin-top:0}
  /* Colonne effondrée (--col:0) : l'interlocuteur ET les présents remontent en haut
     de scène. Restés ancrés en bas (défaut hérité de la v1, corrigé ici), ils
     chevauchaient la bande voix centrée — le repositionnement n'existait qu'à ≤820. */
  .ecard--lead{right:clamp(20px,4vw,48px);bottom:auto;
    top:calc(104px + env(safe-area-inset-top));width:min(220px,30vw)}
  .scene-cast__present{left:clamp(20px,4vw,48px);right:auto;bottom:auto;
    top:calc(104px + env(safe-area-inset-top));max-width:min(58vw,760px)}
  /* la réplique suit la carte remontée : ancrée SOUS elle (au-dessus = hors écran). */
  .cast-speech{top:calc(100% + 14px);bottom:auto;transform-origin:top right}
  .cast-speech::after{top:-7px;bottom:auto;border:0;
    border-left:1px solid var(--border-strong);border-top:1px solid var(--border-strong)}
}

/* ---------------------------------------------------------------------------
   ≤ 860 px — LA PAUME : LE DOCUMENT REDEVIENT UN DOCUMENT.

   La coque du jeu fige `body{overflow:hidden}` et pose ses écrans en
   `position:fixed;inset:0` : « rien ne défile ». L'intention est juste, et elle
   reste ENTIÈRE au-dessus de ce palier — elle a été écrite pour l'écran COMMUN,
   celui qu'on pose au milieu de la table et qu'on regarde à plusieurs. Un écran
   de salon qui demanderait à la tablée de faire défiler serait un écran raté.

   Elle ne vaut pas pour l'écran TENU DANS UNE MAIN. Là, une scène verrouillée à
   la hauteur de la fenêtre ne peut pas contenir ce qu'on lui demande de
   contenir, et ce qui déborde n'est pas coupé : il est rendu dans le vide, hors
   d'atteinte de tout geste. Mesuré sur la paume à 390×844 (T-150, audit mobile
   du 2026-08-23) : le champ « Que fais-tu ? » posé à y=1277 et le bouton
   « Inscrire » à y=1418, dans une fenêtre de 844 px qui ne défile pas. 733 px de
   jeu injouables — le geste central du jeu, impossible sur téléphone.

   Sous ce palier, donc : le décor reste `fixed` derrière (c'est un fond, il n'a
   jamais eu à défiler), la scène repasse dans le flux, et le document défile.
   Rien d'autre ne change, et rien ne change au-dessus.

   ## Pourquoi 860 px, et pas un troisième nombre

   1. C'est DÉJÀ le palier auquel chaque écran du jeu prend sa forme de
      téléphone : `.paume` passe en une colonne, `.table-scene` met le sceau en
      premier, `.forge-scene` s'empile, `.revelation` se met debout, `.fil` perd
      son plafond. Le défilement du document est le membre manquant de cette
      même bascule. Un palier à lui seul ouvrirait une bande où la mise en page
      est déjà celle d'une paume mais où le document ne défile toujours pas —
      c'est-à-dire exactement le défaut qu'on répare ici.
   2. 844 px est la largeur d'un iPhone 14 COUCHÉ. Un palier à 820 laisserait le
      téléphone qu'on tourne sous la doctrine « rien ne défile » : cassé dans la
      main, et cassé sans qu'aucune mesure de portrait ne le dise. 860 le prend.
   --------------------------------------------------------------------------- */
@media (max-width:860px){
  /* `height:100%` bornait le document à la fenêtre. Il redevient ce qu'il est :
     au moins la fenêtre, et autant que son contenu demande. */
  html,body{height:auto;min-height:100%}
  body{overflow:auto}
}

@media (max-width:820px){
  .topbar{padding-left:16px;padding-right:16px;gap:12px}
  .brand{font-size:12px;letter-spacing:.42em}
  .clock .lbl{display:none}
  .clock .val{font-size:11px;letter-spacing:.14em}
  .restart-cta .restart-label{display:none}
  .restart-cta{padding:8px}
  /* mobile : la bande basse est déjà dense, les post-its cristallisés s'effacent
     (maquette) — le fil complet reste consultable dans le carnet */
  .crystals{display:none}
  .lowband{padding:0 14px max(14px,env(safe-area-inset-bottom))}
  .voice{margin-bottom:14px}
  .voice-body{font-size:clamp(15px,4.2vw,18px)}
  .voice-log{max-height:15vh}
  .trace{font-size:9.5px;letter-spacing:.14em;gap:8px;margin-bottom:10px}
  .trace .die{width:22px;height:22px;font-size:11px}
  .scribe .cap{margin-bottom:7px}
  .field input{padding:12px 14px}
  .send{padding:0 16px;font-size:11px}
  /* corners compacts, remontés au-dessus de la bande basse */
  .corner{bottom:auto;top:calc(58px + env(safe-area-inset-top))}
  .corner--left{left:10px}
  .corner--right{right:10px}
  .corner .art{width:64px;height:64px}
  .corner .lab{display:none}
  /* cartes-entité : compactes, flanquent le haut de la scène */
  .ecard--lead{right:8px;bottom:auto;top:calc(140px + env(safe-area-inset-top));width:150px}
  .ecard--lead .eportrait{height:150px}
  .ecaption{padding:8px 10px}
  .ecaption .role{letter-spacing:.2em;font-size:8px}
  .ecaption h3{font-size:16px}
  .epill{font-size:8px;padding:4px 9px}
  /* 60vw = la place laissée par la carte d'avant-scène (150 px + marges) : c'est le budget
     réel, pas un réglage. À 108 px + 8 px de gouttière, deux cartes par rang y tiennent, et
     la grappe se replie d'elle-même au-delà. Aucun nombre de cartes n'est écrit ici. */
  .scene-cast__present{left:10px;right:auto;bottom:auto;top:calc(140px + env(safe-area-inset-top));max-width:60vw;
    --cast-gap:8px}
  .ecard--present{--ecard-w:108px;--ecard-min:108px}
  .ecard--present .eportrait{height:104px}
  .ecard--present .ecaption h3{font-size:12px}
  .ecard--present .ecaption .role{display:none}
  .cast-speech{
    position:fixed;left:12px;right:12px;bottom:clamp(150px,24vh,220px);
    max-width:none;width:auto;transform:translateY(12px) scale(.98);
  }
  .cast-speech.is-shown{transform:none}
  .cast-speech::after{right:auto;left:40px}
  /* carnet plein écran, une page (la gauche s'efface), onglets scrollables */
  .carnet-wrap{padding:0}
  .carnet{width:100%;height:100%;transform:translateY(26px) scale(.96)}
  .carnet-cover{border-radius:0}
  .cn-head{flex-wrap:wrap;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 10px 0}
  .book-title small{display:none}
  .cn-head .meta{display:none}
  .tabs{order:3;width:100%;margin-left:0}
  .tab-btn{flex:1;padding:8px 8px 9px}
  .tab-btn .rk{display:none}
  .spread{grid-template-columns:1fr;margin-top:8px;border-radius:0;padding:7px}
  .gutter{display:none}
  .page.left{display:none}
  .page.right{border-radius:5px}
  .page.right::after{display:none}
  .page.right .page-in{padding:18px 16px}
  .mapframe{min-height:min(52vh,420px)}
  /* besace : grille resserrée */
  .sack{width:100%;max-height:100%;height:100%;padding:calc(60px + env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
  .sack-head{margin-bottom:10px}
  .sack-head .s{margin-left:0;width:100%}
  .inv-list{grid-template-columns:repeat(2,1fr);gap:12px}
  .inv-card__name{font-size:16px;margin-top:-28px;padding:0 10px}
  .closeX{top:calc(12px + env(safe-area-inset-top));right:12px;width:38px;height:38px}
  .mj-debug{top:auto;bottom:8px;left:8px;right:auto;min-width:0;font-size:10px}
  .d20{width:76px;height:76px;font-size:32px}
  .mj-eye{width:28px;height:28px}
  .mj-eye svg{width:13px;height:13px}
  .mj-trace{width:100vw;border-right:0}
}
@media (max-height:560px) and (min-width:821px){ .carnet{height:100%} }

/* ============ MODALE DE CONFIRMATION MAISON — DA « play » (T-004) ============
   Remplace toute popup SweetAlert2 blanche dans le jeu. Fond encre chaud, panneau
   parchemin sombre liséré or, titre Cormorant, boutons sang (confirmer) / encre
   (annuler). Montée par game.js (gameConfirm) : clavier-navigable, focus trap,
   Échap ferme, clic backdrop annule. Aucune dépendance lib. */
.gconfirm{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;transition:opacity .22s ease}
.gconfirm.is-open{opacity:1}
.gconfirm__backdrop{position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 40%,rgba(20,15,9,.72),rgba(5,3,2,.9));
  backdrop-filter:blur(3px)}
.gconfirm__panel{position:relative;width:min(440px,100%);padding:30px 30px 24px;text-align:center;
  border:1px solid var(--border-gold);border-radius:14px;
  background:linear-gradient(165deg,#211710,#140d07);
  box-shadow:0 30px 70px rgba(0,0,0,.7),inset 0 1px 0 rgba(234,202,122,.12);
  transform:translateY(10px) scale(.97);transition:transform .22s cubic-bezier(.2,1,.3,1)}
.gconfirm.is-open .gconfirm__panel{transform:none}
.gconfirm__icon{width:42px;height:42px;margin:0 auto 14px;display:block;color:var(--gold-bright)}
.gconfirm--warning .gconfirm__icon,.gconfirm--error .gconfirm__icon{color:var(--blood)}
.gconfirm__title{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.15;color:var(--parch)}
.gconfirm__text{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:15px;
  line-height:1.5;color:var(--parch-dim)}
.gconfirm__actions{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap-reverse}
.gconfirm__btn{cursor:pointer;padding:11px 22px;border-radius:999px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  border:1px solid var(--border-strong);transition:background .2s ease,color .2s ease,border-color .2s ease}
.gconfirm__btn--cancel{background:rgba(20,15,9,.6);color:var(--parch-soft)}
.gconfirm__btn--cancel:hover{color:var(--parch);border-color:var(--gold)}
.gconfirm__btn--confirm{background:var(--blood-deep);color:var(--parch);border-color:var(--blood)}
.gconfirm__btn--confirm:hover{background:var(--blood)}
.gconfirm__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ============ TOAST DIÉGÉTIQUE — bandeau parchemin/encre (T-004) ============
   Même contrat que l'admin (divs [data-toastr]) mais rendu DA : un bandeau discret
   sous la topbar. game.js (gameToast) le monte et l'auto-efface. */
.gtoast-wrap{position:fixed;top:0;left:0;right:0;z-index:110;display:flex;flex-direction:column;
  align-items:center;gap:10px;padding:calc(80px + env(safe-area-inset-top)) 16px 0;pointer-events:none}
.gtoast-wrap:empty{display:none}
.gtoast{pointer-events:auto;max-width:min(520px,100%);display:flex;align-items:center;gap:12px;
  padding:12px 18px;border-radius:10px;
  font-family:var(--serif);font-size:14.5px;line-height:1.4;color:#241a0c;
  background:linear-gradient(165deg,#ecdcb0,#d7c288);
  border:1px solid rgba(60,47,28,.5);border-left:4px solid var(--gold);
  box-shadow:0 14px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.4);
  animation:gtoastin .35s cubic-bezier(.2,1,.3,1)}
.gtoast.is-out{animation:gtoastout .35s ease forwards}
.gtoast--success{border-left-color:#5c7a3a}
.gtoast--error{border-left-color:var(--blood)}
.gtoast--warning{border-left-color:#b07a1e}
.gtoast__icon{flex:none;width:20px;height:20px;color:#4a3a1c}
.gtoast--error .gtoast__icon{color:var(--blood-deep)}
.gtoast__msg{flex:1;min-width:0}
@keyframes gtoastin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes gtoastout{to{opacity:0;transform:translateY(-10px)}}

/* ---------- ACCESSIBILITÉ : respect de prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .scene__img,.scene__fog,.scene__candle,
  .mapframe::before,.hex.fog .hex-veil::after,.hex.reachable::before,
  .hex.spawning,.map-hint,.scribe .cap .dot,
  .voice-loading i,.death-flame,.ecard--lead .ecard__float,.epill .dot,
  .mj-pending i,.mj-step--live,.mj-trace__rec i{
    animation:none !important;
  }
  .mj-trace,.mj-turn{transition-duration:.001s !important;animation-duration:.001s !important}
  .death-veil{transition-duration:.001s !important}
  .scene__img{transform:scale(1.06)}
  .carnet,.carnet-cover,.map-stage,.map-world,.hex .hex-veil,.flip,.tab-btn{transition-duration:.001s !important}
  .voice-text.typing::after{animation:none}
  .ecard--lead,.ecard--present,.cast-speech,.crystal{transition-duration:.001s !important;animation-duration:.001s !important}
  .ecard--lead{transform:none}
  .ecard--lead.is-in{transform:none}
  .voice-log__entry,.scene--degraded .scene__img{transition-duration:.001s !important}
  .inv-card,.inv-card__img.revealed,.d20.spin,.roll.show{animation:none !important}
  /* Feedback kit T-004 : modale, toast diégétique, témoin de tour. */
  .mj-working,.mj-working__pulse,.gtoast{animation:none !important}
  .gconfirm,.gconfirm__panel{transition-duration:.001s !important}
}