/* La Confrérie du Harness — « Cyber-Grimoire IDE » : la maquette Stitch (docs/stitch…zip, DESIGN.md) traduite
   en CSS maison. Les tokens du guide de style sont des variables ; zéro arrondi sauf les pastilles, l'orbe et les pièces. */
:root {
  /* surfaces */
  --obsidienne: #0b0f14; --grimoire: #121824; --encre: #070a0f; --cadre: #1e293b; --trait: #334155; --surface-haute: #262a30;
  --texte: #e2e8f0; --doux: #64748b; --doux-clair: #94a3b8; --parchemin: #d8c3ad;
  /* énergie, primaire, secondaire, tertiaire */
  --ambre: #f59e0b; --ambre-clair: #ffc174; --ambre-pale: #fcd34d; --sur-ambre: #1c1003;
  --cyan: #4cd7f6; --cyan-fonce: #03b5d3; --violet-clair: #e1bfff;
  /* jauge de contexte */
  --ctx-sain: #06b6d4; --ctx-pression: #f97316; --ctx-critique: #ef4444; --ctx-sature: #ec4899; --ctx-sature-2: #a855f7;
  /* disciplines des cartes */
  --c-attaque: #f43f5e; --c-defense: #3b82f6; --c-competence: #10b981; --c-pouvoir: #a855f7; --c-statut: #78716c;
  /* signaux de combat */
  --s-bouclier: #60a5fa; --s-force: #fb7185; --s-expose: #facc15;
  /* couleurs courtes des effets (flottants, pastilles, bannières) */
  --rouge: #f87171; --vert: #34d399; --bleu: #60a5fa; --jaune: #fcd34d; --violet: #c084fc; --orange: #fb923c;
  --titre: "Space Grotesk", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --ressort: cubic-bezier(.2, .9, .25, 1.15);
  --ombre-dure: 2px 2px 0 #000;
}
* { box-sizing: border-box; }
html { background: var(--obsidienne); }
html, body { margin: 0; color: var(--texte); font: 13px/1.55 var(--mono); overflow-x: hidden; }
body { min-height: 100vh; background: transparent; font-variant-numeric: tabular-nums; }
/* le fond de chaque écran (couche 0) : obsidienne, ou l'illustration de la maquette assombrie */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% -10%, rgba(30,58,95,.35), transparent 60%), radial-gradient(ellipse at 50% 120%, rgba(245,158,11,.05), transparent 55%), var(--obsidienne); }
body[data-ecran="titre"]::before { background: linear-gradient(90deg, rgba(8,11,16,.93) 0%, rgba(8,11,16,.6) 42%, rgba(8,11,16,.55) 58%, rgba(8,11,16,.9) 100%),
  linear-gradient(0deg, rgba(8,11,16,.95), transparent 28%), url(../assets/fonds/titre.webp) center / cover no-repeat, var(--obsidienne); }
body[data-ecran="modele"]::before { background: linear-gradient(180deg, rgba(8,11,16,.8) 0%, rgba(8,11,16,.3) 30%, rgba(8,11,16,.5) 48%, rgba(8,11,16,.9) 66%, var(--obsidienne) 92%),
  url(../assets/fonds/selection.webp) center top / cover no-repeat, var(--obsidienne); }
body[data-ecran="recompense"]::before, body[data-ecran="acte-fin"]::before, body[data-ecran="victoire"]::before {
  background: linear-gradient(180deg, rgba(8,11,16,.55), rgba(8,11,16,.78) 60%, rgba(8,11,16,.92)), url(../assets/fonds/victoire.webp) center / cover no-repeat, var(--obsidienne); }
body[data-ecran="mort"]::before { background: linear-gradient(180deg, rgba(12,4,6,.5), rgba(12,4,6,.82)), url(../assets/fonds/defaite.webp) center / cover no-repeat, var(--obsidienne); }
/* le feu de camp porte du texte et deux boutons peints : le haut et les coins sont assombris */
body[data-ecran="repos"]::before { background: linear-gradient(180deg, rgba(8,11,16,.97) 0%, rgba(8,11,16,.7) 22%, rgba(8,11,16,.3) 45%, rgba(8,11,16,.55) 70%, rgba(8,11,16,.95) 100%),
  radial-gradient(ellipse at 100% 88%, rgba(8,11,16,.95) 0, rgba(8,11,16,.7) 22%, transparent 38%), radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(8,11,16,.9) 80%), url(../assets/fonds/feu-de-camp.webp) center / cover no-repeat, var(--obsidienne); }
/* trame CRT : lignes de 2 px à 3 % et vignette, au-dessus de tout, sans capter la souris */
body::after { content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%); }
#app { max-width: 1440px; margin: 0 auto; padding: 0 24px 16px; }
button { font: inherit; color: inherit; }
.muet { color: var(--doux); }
.rouge { color: var(--rouge); } .violet { color: var(--violet); } .jaune { color: var(--jaune); }
.sprite { image-rendering: pixelated; display: block; margin: 0 auto; }
/* icônes Material Symbols Outlined (ligatures) */
.ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 500; vertical-align: middle; flex-shrink: 0; user-select: none; }

/* ---------- entrées en scène ---------- */
.entre { animation: entre .45s var(--ressort) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes entre { from { opacity: 0; transform: translateY(14px); } }
.distribue .carte { animation: distribue .55s var(--ressort) both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes distribue { from { opacity: 0; transform: translateY(60px) rotateY(90deg) scale(.7); } }
.vague span { display: inline-block; animation: entre .5s var(--ressort) both, vague 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 40ms), calc(var(--i) * 90ms + .6s); }
@keyframes vague { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-5px); } }

/* ---------- boutons, liens, puces ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; background: var(--cadre); border: 1px solid var(--trait);
  color: var(--texte); font: 700 12.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: var(--ombre-dure);
  transition: transform .12s, background .12s, color .12s, border-color .12s, box-shadow .2s, filter .12s; }
.bouton:hover:not(:disabled) { background: var(--ambre); color: var(--obsidienne); border-color: var(--ambre-pale); }
.bouton:active:not(:disabled) { transform: translateY(1px); }
.bouton:disabled { opacity: .4; cursor: default; filter: grayscale(.6); }
.bouton .ms { font-size: 18px; }
.bouton.gros { background: linear-gradient(180deg, #fbbf24, var(--ambre)); color: var(--sur-ambre); border: 2px solid #fde68a; font: 700 17px/1.1 var(--titre);
  letter-spacing: .1em; padding: 14px 28px; margin: 12px 0; box-shadow: 0 0 18px rgba(245,158,11,.5), 3px 3px 0 #000; }
.bouton.gros:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); background: linear-gradient(180deg, #fcd34d, #fbbf24); }
.bouton.invite { animation: invite 1.2s ease-in-out infinite; }
@keyframes invite { 50% { box-shadow: 0 0 0 6px rgba(245,158,11,.25), 0 0 26px rgba(245,158,11,.7), 3px 3px 0 #000; } }
.lien { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 0; color: var(--cyan); cursor: pointer;
  font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.lien:hover { color: var(--ambre-clair); }
.lien .ms { font-size: 18px; }
.saison, .incident-chip, .postale-chip { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px var(--mono); padding: 4px 10px; border: 1px solid currentColor;
  border-radius: 999px; cursor: help; white-space: nowrap; background: rgba(7,10,15,.6); }
.saison.s-gloire { color: var(--ambre-pale); } .saison.s-doute { color: var(--doux-clair); }
.incident-chip { color: var(--orange); border-style: dashed; }
.incident-chip.ton-bon { color: var(--vert); } .incident-chip.ton-mauvais { color: var(--rouge); }
.incident-chip .ms { font-size: 15px; }
.postale-chip { color: #d8b4fe; border-style: dashed; }
.terminal-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 10px; background: rgba(7,10,15,.65); color: var(--cyan);
  font: 700 12px var(--mono); letter-spacing: .1em; align-self: flex-start; }
.terminal-tag .ms { font-size: 16px; }
.sur-titre { margin: 0; font: 700 11px var(--mono); letter-spacing: .16em; color: var(--cyan); }
.recit { max-width: 680px; margin: 10px auto; font-size: 14px; line-height: 1.7; }
.encart { background: rgba(18,24,36,.92); border: 1px solid #263548; border-left: 3px solid var(--c-pouvoir); padding: 12px 16px; text-align: left; box-shadow: var(--ombre-dure); }
.encart .ms { font-size: 18px; color: var(--violet); margin-right: 4px; }
.panneau { background: rgba(18,24,36,.9); border: 1px solid var(--cadre); padding: 16px; box-shadow: var(--ombre-dure); }

/* ---------- en-tête (barre de run) ---------- */
.entete { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 -24px 10px; padding: 8px 24px;
  background: linear-gradient(180deg, #06090e, rgba(13,18,26,.96)); border-bottom: 1px solid rgba(37,47,62,.8); box-shadow: 0 4px 20px rgba(0,0,0,.8); }
.ent-id { display: flex; align-items: center; gap: 10px; padding-right: 14px; border-right: 1px solid #263548; }
.ent-logo { display: grid; place-items: center; width: 34px; height: 34px; background: linear-gradient(135deg, var(--ambre), #b45309); color: #181002;
  box-shadow: 0 0 12px rgba(245,158,11,.5); }
.ent-txt b { display: block; font: 700 15px/1.1 var(--titre); letter-spacing: .08em; color: var(--ambre-clair); }
.ent-txt small { display: block; font-size: 11px; color: var(--cyan); }
.ent-pv, .ent-acte { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 5px 12px; background: rgba(18,25,36,.9); border: 1px solid #2a3a50; }
.ent-pv > .ms { grid-row: span 2; color: var(--rouge); font-variation-settings: "FILL" 1, "wght" 500; }
.ent-pv-txt { font-size: 12px; color: var(--doux-clair); }
.ent-pv-txt b { font-size: 15px; color: #fff; }
.ent-pv .barre { display: block; width: 110px; height: 5px; margin-top: 3px; background: #0a0f16; border: 1px solid #253244; }
.ent-pv .barre i { display: block; height: 100%; background: linear-gradient(90deg, #dc2626, var(--rouge)); }
.ent-pv.bas > .ms { animation: alerte .6s steps(1) infinite; }
.ent-acte > .ms { color: var(--cyan); }
.ent-acte b { display: block; font: 700 11.5px var(--mono); letter-spacing: .08em; }
.ent-acte small { display: block; font-size: 11px; color: var(--doux-clair); }
.ent-acte .court { display: none; }
.ent-ext { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 8px; background: rgba(7,10,15,.6); border: 1px solid #263548; }
.ent-ext .lbl { font: 700 10.5px var(--mono); letter-spacing: .12em; color: var(--doux-clair); margin-right: 2px; }
.ext { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ambre); color: var(--ambre-clair); background: rgba(245,158,11,.1);
  cursor: help; animation: entre .5s var(--ressort) both; }
.ext:nth-child(3) { border-color: #818cf8; color: #c7d2fe; background: rgba(129,140,248,.1); }
.ext:nth-child(4) { border-color: var(--cyan); color: var(--cyan); background: rgba(76,215,246,.1); }
.ext:nth-child(5) { border-color: var(--c-competence); color: #6ee7b7; background: rgba(16,185,129,.1); }
.ext:nth-child(6) { border-color: var(--c-pouvoir); color: var(--violet); background: rgba(168,85,247,.1); }
.ext .ms { font-size: 18px; }
.ent-deck { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--cadre); border: 1px solid var(--trait); cursor: pointer;
  font: 700 12px var(--mono); letter-spacing: .08em; }
.ent-deck:hover { background: var(--ambre); color: var(--obsidienne); }
.ent-deck .ms { font-size: 18px; }
.ent-son { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: none; border: 1px solid var(--trait); color: var(--doux-clair); cursor: pointer; }
.ent-son:hover { color: var(--ambre-clair); border-color: var(--ambre); }
.ent-son .ms { font-size: 18px; }
.titre-son { position: fixed; top: 12px; right: 12px; z-index: 5; background: rgba(7,10,15,.75); }
/* l'engrenage des réglages : fixé en haut à droite sur les écrans sans en-tête (à gauche du son sur le titre) ;
   dans l'en-tête, il suit le bouton son */
.reglages-fixe { position: fixed; top: 12px; right: 12px; z-index: 5; background: rgba(7,10,15,.75); }
body[data-ecran="titre"] .reglages-fixe { right: 56px; }
.entete .ent-reglages { margin-left: 0; }

/* ---------- écrans à en-tête : l'en-tête reste en haut, l'écran tient dans la hauteur ---------- */
/* (le contenu défile dans sa page, jamais la fenêtre ; sur la carte, seule la grille des étages défile) */
#app:has(> .entete) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-bottom: 8px; }
#app:has(> .entete) > .entete { flex: none; }
#app:has(> .entete) > main.page { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.saison .ms { font-size: 15px; }

/* ---------- écran titre ---------- */
.accueil { display: flex; flex-direction: column; min-height: calc(100vh - 16px); padding: 26px 0 8px; }
.titre-grille { flex: 1; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 48px; padding: 24px 0; }
.protocole { margin: 0; font: 700 11px var(--mono); letter-spacing: .14em; color: var(--doux-clair); }
.protocole span { background: #1e293b; color: var(--ambre-clair); padding: 3px 8px; margin-right: 8px; }
.accueil h1 { margin: 16px 0 12px; font: 700 clamp(44px, 5.6vw, 82px)/.98 var(--titre); letter-spacing: -.02em;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.65)) drop-shadow(0 0 24px rgba(245,158,11,.3)); }
.accueil h1 span { background: linear-gradient(180deg, #ffe7c2 0%, var(--ambre-clair) 48%, #e8f4f8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sous-titre { margin: 0 0 22px; font: 500 clamp(14px, 1.5vw, 20px) var(--mono); letter-spacing: .18em; color: var(--cyan); }
.citation { max-width: 640px; margin: 0 0 14px; padding: 16px 20px; background: rgba(7,10,15,.74); color: var(--parchemin); font-style: italic; font-size: 14px; line-height: 1.75; }
.sauvegarde { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px; background: rgba(7,10,15,.6); font: 700 11.5px var(--mono); letter-spacing: .12em; color: var(--doux-clair); }
.sauvegarde i { width: 10px; height: 10px; background: var(--cyan); }
.sauvegarde b { color: var(--ambre-clair); }
.menu-jouer { display: flex; align-items: center; gap: 14px; width: 100%; padding: 20px 22px; border: 0; cursor: pointer; text-align: left; color: #2a1700;
  background: repeating-linear-gradient(0deg, #f5a524 0 3px, #e8951a 3px 5px); box-shadow: 0 0 30px rgba(245,158,11,.35), 3px 3px 0 #000; transition: filter .15s, transform .15s; }
.menu-jouer:hover { filter: brightness(1.12); transform: translateX(-4px); }
.menu-jouer > .ms { font-size: 34px; font-variation-settings: "FILL" 1, "wght" 600; }
.menu-jouer b { display: block; font: 700 22px var(--titre); letter-spacing: .02em; }
.menu-jouer small { display: block; font: 600 11px var(--mono); letter-spacing: .12em; color: #5c3b00; margin-top: 2px; }
.regles-menu p { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 15px 20px; background: rgba(10,14,20,.8); border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; line-height: 1.6; }
.regles-menu .ms { color: var(--ambre-clair); }
.regles-menu p:nth-child(2) .ms { color: var(--cyan); } .regles-menu p:nth-child(3) .ms { color: var(--rouge); } .regles-menu p:nth-child(4) .ms { color: var(--violet); }
/* sauvegarde : reprendre la run, nouvelle run, alerte d'une sauvegarde corrompue */
.menu-nouvelle { width: 100%; margin-top: 8px; justify-content: flex-start; padding: 12px 22px; font: 700 13px var(--mono); letter-spacing: .1em; }
.alerte-sauvegarde { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 12px 16px; background: rgba(60,10,16,.85); border: 1px solid var(--rouge); color: #ffd7d5; font: 600 12.5px var(--mono); }
.alerte-sauvegarde .ms { color: var(--rouge); }
.graine-fin { margin: 12px 0 0; text-align: center; font: 600 10.5px var(--mono); letter-spacing: .14em; color: var(--doux-clair); opacity: .75; }
.graine-fin b { color: var(--parchemin); user-select: all; }
.entete .ent-abandon { margin-left: 0; }
.ent-abandon:hover { color: var(--rouge); border-color: var(--rouge); }
.confirm-boite { width: min(460px, 100%); padding: 20px 22px; }
.confirm-boite .recit { margin: 12px 0 18px; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.bouton.danger { background: #5c1219; border-color: var(--rouge); color: #ffe1df; }
.bouton.danger:hover:not(:disabled) { background: var(--rouge); color: #fff; border-color: #ffb3ad; }
.raccourcis { margin: 0; font: 600 11px var(--mono); letter-spacing: .1em; color: var(--doux-clair); text-align: right; }
.raccourcis b { color: var(--ambre-clair); }

/* ---------- choix du modèle ---------- */
.modele-page { display: flex; flex-direction: column; padding: 24px 0 8px; }
.modele-page h2 { margin: 12px 0 0; font: 700 26px var(--titre); color: #fff; letter-spacing: -.01em; }
.modele-page > .recit { margin: 4px 0 0; color: var(--doux-clair); }
.modeles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: clamp(24px, 14vh, 150px) 0 22px; }
.modele { --mc2: color-mix(in srgb, var(--mc) 60%, #fff); position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 9px; padding: 14px 16px; text-align: left; cursor: pointer;
  color: var(--texte); background: rgba(12,17,26,.9); border: 1px solid #263548; border-top: 3px solid var(--mc); box-shadow: var(--ombre-dure);
  transition: transform .15s var(--ressort), border-color .15s, box-shadow .2s; }
.modele:hover:not(:disabled) { transform: translateY(-5px); border-color: var(--mc2); box-shadow: 0 0 0 1px var(--mc2), 0 0 26px color-mix(in srgb, var(--mc) 45%, transparent); }
.mod-etat { align-self: flex-start; padding: 2px 8px; background: var(--cadre); color: var(--doux-clair); font: 700 10.5px var(--mono); letter-spacing: .12em; }
.modele:hover:not(:disabled) .mod-etat { background: var(--mc2); color: #000; }
.mod-classe { font: 700 11px var(--mono); letter-spacing: .1em; color: var(--mc2); }
.mod-sprite { position: absolute; top: 12px; right: 14px; }
.modele b { font: 700 21px/1.1 var(--titre); letter-spacing: -.01em; text-transform: uppercase; color: #fff; padding-right: 60px; }
.stats-modele { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 4px; background: rgba(7,10,15,.72); text-align: center; font: 700 20px var(--titre); color: var(--ambre-clair); }
.stats-modele small { display: block; font: 600 9.5px var(--mono); letter-spacing: .12em; color: var(--doux-clair); }
.stats-modele .ms { font-size: 18px; color: var(--cyan); margin-right: 3px; }
.mod-passif { display: flex; gap: 8px; font-size: 12px; line-height: 1.55; color: var(--texte); }
.mod-passif .ms { font-size: 18px; color: var(--mc2); }
.mod-passif em { font-style: normal; font-weight: 700; color: var(--mc2); }
.mod-choix { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 8px 10px; background: rgba(7,10,15,.65); color: var(--mc2);
  font: 700 11px var(--mono); letter-spacing: .12em; }
.mod-choix .ms { font-size: 18px; }
.modele.verrou { opacity: .55; cursor: not-allowed; }
.modele.verrou .sprite { filter: brightness(0); }
.grimoire h3 { margin: 0 0 10px; font: 700 12px var(--mono); letter-spacing: .12em; }
.grimoire h3 span { color: var(--doux-clair); font-weight: 500; }
.mini-carte { position: relative; }
.compte { position: absolute; top: -8px; right: -8px; z-index: 2; padding: 2px 6px; background: var(--ambre); color: var(--sur-ambre); font: 700 11px var(--mono); }
.retour { align-self: flex-start; margin-top: 8px; }

/* ---------- carte de la run ---------- */
.carte-run { display: grid; grid-template-columns: 290px minmax(0, 1fr) 330px; gap: 18px; align-items: stretch; }
#app:has(> .entete) > main.carte-run { overflow: hidden; }
.carte-run > * { min-height: 0; overflow-y: auto; }
.arbre { display: flex; flex-direction: column; overflow: hidden; }
.carte-defile { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 0 0 8px; }
.carte-defile .carte-routes { margin-top: 0; }
.legende h3, .deck-junior h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 19px var(--titre); color: var(--ambre-clair); letter-spacing: .02em; }
.legende ul { list-style: none; margin: 0; padding: 0; }
.legende li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-bottom: 6px; background: rgba(7,10,15,.5); }
.legende li .ic { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid currentColor; }
.legende li .ic .ms { font-size: 18px; }
.legende li b { display: block; font-size: 13px; }
.legende li small { display: block; font-size: 11px; color: var(--doux-clair); }
.l-combat { color: #fb7185; } .l-elite { color: #fbbf24; } .l-evenement { color: var(--cyan); } .l-repos { color: var(--violet); } .l-boss { color: var(--rouge); }
.legende li span:last-child { color: var(--texte); }
.arbre h2 { margin: 4px 0 10px; font: 700 26px var(--titre); color: var(--ambre-clair); letter-spacing: -.01em; }
/* la carte à routes : nœuds placés en % de la grille, arêtes SVG en pointillés aux mêmes % */
.carte-routes { --pas: 76px; position: relative; height: calc(var(--rangs) * var(--pas)); max-width: calc(var(--cols) * 96px); margin: 14px auto 0; }
.routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arete { stroke: var(--doux-clair); stroke-width: 2.5; stroke-dasharray: 1 7; stroke-linecap: round; opacity: .55; }
.arete.morte { opacity: .16; }
.arete.parcourue { stroke: var(--ambre); stroke-dasharray: 6 5; stroke-width: 3; opacity: 1; }
.arete.ouverte { stroke: var(--ambre-clair); stroke-width: 3; opacity: 1; animation: fourmis 1s linear infinite; }
@keyframes fourmis { to { stroke-dashoffset: -8; } }
.num-etage { position: absolute; left: -6px; translate: 0 -50%; font: 700 10px var(--mono); letter-spacing: .06em; color: var(--trait); pointer-events: none; }
.num-etage.courant { color: var(--ambre-clair); }
.noeud { position: absolute; z-index: 1; translate: -50% -50%; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; background: none; border: 0; color: var(--texte); }
.noeud .ic { display: grid; place-items: center; width: 40px; height: 40px; background: #161d29; border: 1px solid var(--trait); border-radius: 50%; box-shadow: var(--ombre-dure);
  transition: transform .15s var(--ressort), background .15s, color .15s; }
.noeud .ic .ms { font-size: 22px; }
.n-combat .ic { color: #fb7185; } .n-elite .ic { color: #fbbf24; } .n-evenement .ic { color: var(--cyan); } .n-repos .ic { color: var(--violet); }
.noeud.n-boss { width: 80px; height: 72px; }
.n-boss .ic { width: 62px; height: 62px; border-radius: 6px; background: #fca5a5; color: #3b0606; border-color: #fecaca; box-shadow: 0 0 18px rgba(248,113,113,.45), var(--ombre-dure); }
.n-boss .ic .ms { font-size: 34px; animation: pouls 1.8s infinite; }
.n-boss .lib { position: absolute; top: calc(100% - 2px); left: 50%; translate: -50% 0; white-space: nowrap; font: 700 11px var(--mono); letter-spacing: .08em; color: #fca5a5; }
.noeud.passe { opacity: .3; }
.noeud.futur .ic { background: #121822; }
.noeud.parcouru .ic { border: 2px solid var(--ambre); background: rgba(245,158,11,.16); }
.noeud.ici .ic { box-shadow: 0 0 0 3px rgba(245,158,11,.35), 0 0 16px rgba(245,158,11,.55); }
.noeud.atteignable { cursor: pointer; z-index: 2; }
.noeud.atteignable .ic { border: 2px solid var(--ambre); background: #241a08; animation: pulse 1.6s infinite; }
.noeud.atteignable:hover .ic, .noeud.atteignable:focus-visible .ic { background: var(--ambre); color: var(--obsidienne); transform: scale(1.1); }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(245,158,11,.22), 0 0 18px rgba(245,158,11,.4); } }

/* la frise : les tours de combat à venir, chaque événement à son tour (bon, mauvais, mixte ; ??? tant qu'il est loin) */
.frise { display: flex; align-items: center; gap: 12px; padding: 2px 12px; background: rgba(7,10,15,.86); border: 1px solid var(--cadre); box-shadow: var(--ombre-dure); }
.combat > .frise { flex: none; margin-top: 4px; }
#app > .frise.compacte { flex: none; margin-top: 8px; }
.fr-horloge { display: flex; align-items: center; gap: 6px; flex: none; color: var(--cyan); }
.fr-horloge .ms { font-size: 18px; }
.fr-horloge small { display: block; font: 700 9px/1.1 var(--mono); letter-spacing: .14em; color: var(--doux-clair); }
.fr-horloge b { display: block; font: 700 13px/1.1 var(--titre); color: var(--texte); }
.fr-piste { position: relative; flex: 1 1 auto; min-width: 0; height: 26px; margin-right: 18px; border-left: 2px solid var(--cyan); }
.fr-piste::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; border-top: 1px dashed var(--trait); }
.fr-graduations i { position: absolute; left: var(--x); top: 13px; width: 1px; height: 6px; translate: 0 -50%; background: var(--trait); }
.fr-graduations i { height: 10px; background: var(--doux); }
.fr-graduations i.passe { opacity: .35; }
.fr-curseur { position: absolute; left: var(--x); top: 13px; width: 12px; height: 12px; translate: -50% -50%; rotate: 45deg; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.fr-evt { --tc: var(--doux-clair); position: absolute; left: var(--x); top: 2px; translate: -11px 0; display: flex; align-items: center; gap: 4px;
  padding: 0; background: none; border: 0; color: var(--tc); cursor: help; font: inherit; }
.fr-pt { flex: none; display: grid; place-items: center; box-sizing: border-box; width: 22px; height: 22px; border: 2px solid var(--tc); border-radius: 50%;
  background: color-mix(in srgb, var(--tc) 20%, var(--encre)); }
.fr-evt:not(.revele) .fr-pt { border-style: dashed; }
.fr-evt.en-cours .fr-pt { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 35%, transparent), 0 0 12px var(--tc); }
.fr-evt.en-cours, .fr-evt:hover, .fr-evt:focus-visible { z-index: 3; }
.fr-pt .ms { font-size: 14px; }
.fr-pt b { font: 700 14px/1 var(--titre); }
.fr-nom { min-width: 0; padding: 2px 4px 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px/1.1 var(--mono); color: var(--tc);
  background: rgba(7,10,15,.86); }
/* l'effet au survol : une bulle au-dessus de la pastille (au tap, un toast) */
.fr-bulle { display: none; position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; width: max-content; max-width: min(280px, 80vw); padding: 7px 10px;
  background: #0d121b; border: 1px solid var(--tc); box-shadow: var(--ombre-dure); color: var(--texte); font: 500 11.5px/1.45 var(--mono); text-align: left; white-space: normal;
  pointer-events: none; }
.fr-evt.a-droite .fr-bulle { left: auto; right: 0; }
.fr-nom .nom-court { display: none; }
.fr-evt.a-gauche { flex-direction: row-reverse; translate: calc(11px - 100%) 0; }
.fr-evt.a-gauche .fr-nom { padding: 2px 0 2px 4px; text-align: right; }
@media (hover: hover) { .fr-evt:hover .fr-bulle, .fr-evt:focus-visible .fr-bulle { display: block; } }
.ton-bon { --tc: var(--vert); } .ton-mauvais { --tc: var(--rouge); } .ton-mixte { --tc: var(--orange); }
.fr-vide { position: absolute; left: calc(var(--x) + 14px); max-width: calc(100% - var(--x) - 14px); top: 13px; translate: 0 -50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--doux); }
.fr-encours { display: flex; align-items: center; gap: 6px; flex: none; }
.fr-encours > small { font: 700 9px/1.1 var(--mono); letter-spacing: .14em; color: var(--doux-clair); }
.cote { display: flex; flex-direction: column; gap: 16px; }
.cote .recit { margin: 6px 0 10px; font-size: 13px; }
.saison-titre { margin: 4px 0 0; font: 700 20px var(--titre); }
.saison-titre.s-gloire { color: var(--ambre-pale); } .saison-titre.s-doute { color: var(--doux-clair); }
.incidents { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.incidents small { color: var(--doux-clair); }
.deck-junior h3 { justify-content: flex-start; }
.deck-junior h3 span { margin-left: auto; font: 700 12px var(--mono); letter-spacing: .1em; color: var(--ambre-clair); }
.compo { list-style: none; margin: 0; padding: 0; }
.compo li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin-bottom: 10px; font-size: 13px; }
.compo .carre { display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--c); }
.compo .barre { grid-column: 1 / -1; height: 6px; background: var(--cadre); }
.compo .barre i { display: block; height: 100%; background: var(--c); }
.inspecter { width: 100%; justify-content: space-between; padding: 10px 12px; margin-top: 4px; background: rgba(7,10,15,.6); }

/* ---------- récompense, retrait, choix de cartes ---------- */
.recompense, .retrait { text-align: center; padding-top: 18px; }
.recompense .sur-titre, .retrait .sur-titre { font-size: 14px; letter-spacing: .2em; color: var(--texte); }
.recompense h2, .retrait h2 { margin: 8px 0 4px; font: 700 30px var(--titre); color: #fff; text-shadow: 0 3px 0 #000; }
.encart.relique { display: flex; align-items: center; gap: 16px; max-width: 780px; margin: 16px auto; }
.relique-ic { display: grid; place-items: center; width: 54px; height: 54px; flex: none; background: rgba(168,85,247,.15); border: 1px solid var(--c-pouvoir); }
.encart .relique-ic .ms { font-size: 30px; margin: 0; }
.encart.relique p { flex: 1; margin: 0; }
.encart.relique p b { display: block; }
.encart.relique p span { color: var(--doux-clair); }
.bandeau { display: flex; align-items: center; gap: 10px; max-width: 1000px; margin: 22px auto 14px; padding-bottom: 8px; border-bottom: 1px solid #263548;
  font: 600 13px var(--mono); letter-spacing: .14em; text-align: left; }
.bandeau small { margin-left: auto; color: var(--ambre-clair); font-weight: 700; letter-spacing: .1em; }
.choix-cartes { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 16px; perspective: 800px; }
.recompense .choix-cartes, .retrait .choix-cartes { justify-content: center; }
.choix-cartes.grandes { gap: 26px; }
.choix-cartes .carte.choisie { animation: choisie .45s ease-in forwards; z-index: 5; }
@keyframes choisie { 30% { transform: translateY(-16px) scale(1.12); } to { transform: translateY(-120px) scale(.4); opacity: 0; } }
.carte.brule { animation: brule .5s ease-in forwards; }
@keyframes brule { 40% { filter: brightness(2) sepia(1) hue-rotate(-30deg); } to { filter: brightness(3); opacity: 0; transform: scale(.8) rotate(6deg); clip-path: inset(0 0 100% 0); } }
.passer { margin-top: 10px; }

/* ---------- pause café ---------- */
.repos { text-align: center; padding-top: 18px; }
.pastille { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 16px; border: 1px solid rgba(245,158,11,.5); border-radius: 999px;
  background: rgba(7,10,15,.75); color: var(--ambre-pale); font: 700 12px var(--mono); letter-spacing: .16em; }
.pastille i { width: 8px; height: 8px; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 8px var(--ambre); }
.repos h2 { margin: 10px 0 4px; font: 700 clamp(30px, 3.6vw, 48px) var(--titre); color: var(--ambre-pale); text-shadow: 0 0 22px rgba(245,158,11,.45), 0 3px 0 #000; }
.repos .recit { text-shadow: 0 2px 4px #000; }
.options-repos { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin-top: clamp(24px, 13vh, 150px); }
.option { --oc2: color-mix(in srgb, var(--oc) 70%, #fff); position: relative; display: flex; flex-direction: column; gap: 8px; width: 390px; padding: 26px 24px 22px; text-align: left;
  background: rgba(10,15,26,.92); border: 2px solid var(--oc); border-radius: 8px; box-shadow: 0 0 26px color-mix(in srgb, var(--oc) 32%, transparent); }
.o-cafe { --oc: var(--ambre); } .o-refacto { --oc: #22d3ee; }
.o-badge { position: absolute; top: -13px; left: 18px; padding: 3px 10px; background: var(--oc); color: #111; font: 700 11px var(--mono); letter-spacing: .14em; }
.o-tete { display: flex; justify-content: space-between; align-items: center; }
.o-ic { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--oc); background: color-mix(in srgb, var(--oc) 15%, transparent); border-radius: 4px; }
.o-ic .ms { font-size: 34px; color: var(--oc2); }
.o-cat { padding: 4px 10px; border: 1px solid var(--oc); color: var(--oc2); font: 700 11.5px var(--mono); letter-spacing: .1em; background: color-mix(in srgb, var(--oc) 12%, transparent); }
.option h3 { margin: 10px 0 0; font: 700 26px var(--titre); color: var(--oc2); }
.o-sous { margin: 0; font: 600 12px var(--mono); letter-spacing: .12em; color: var(--oc); }
.o-detail { margin-top: 6px; padding: 14px; background: rgba(7,10,15,.72); border: 1px solid var(--cadre); }
.o-detail p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; }
.o-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; margin: 0; padding-top: 10px; border-top: 1px solid var(--cadre); font-size: 12px; }
.o-detail dt { font-weight: 700; color: var(--oc2); }
.o-detail dd { margin: 0; font-weight: 700; justify-self: end; text-align: right; }
.o-gain { padding: 2px 8px; border: 1px solid var(--oc); color: var(--oc2); }
.bouton.o-btn { margin-top: 12px; width: 100%; padding: 14px; background: linear-gradient(180deg, var(--oc2), var(--oc)); color: #111; border: 0; font-size: 13px; letter-spacing: .14em; }
.bouton.o-btn:hover:not(:disabled) { filter: brightness(1.12); background: linear-gradient(180deg, var(--oc2), var(--oc)); color: #111; }

/* ---------- événement ---------- */
.evenement { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 48px; align-items: center; min-height: calc(100vh - 100px); padding: 8px 12px 20px; }
.ev-scene { position: relative; display: grid; place-items: center; height: min(560px, 68vh); overflow: hidden; border: 2px solid #0e7490; outline: 1px solid #164e63; outline-offset: 4px;
  background: radial-gradient(ellipse at 50% 72%, rgba(16,185,129,.2), transparent 55%), repeating-linear-gradient(0deg, rgba(76,215,246,.04) 0 1px, transparent 1px 4px), linear-gradient(#0c1520, var(--encre));
  box-shadow: 0 0 40px rgba(6,182,212,.18), inset 0 0 60px rgba(0,0,0,.8); }
.ev-tag { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #0e7490; background: rgba(7,10,15,.85);
  font: 700 11px var(--mono); letter-spacing: .12em; color: var(--cyan); }
.ev-tag .ms { font-size: 16px; }
.ev-glyphe { position: absolute; left: 50%; top: 46%; translate: -50% -50%; font: 700 300px/1 var(--titre); color: rgba(76,215,246,.07); pointer-events: none; }
.ev-sprite { position: relative; filter: drop-shadow(0 0 18px rgba(76,215,246,.25)); }
.ev-pied { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--cadre);
  background: rgba(7,10,15,.88); font: 700 11.5px var(--mono); letter-spacing: .1em; color: var(--ambre-clair); }
.ev-pied .ms { font-size: 16px; }
.ev-panneau { padding: 24px 28px; background: rgba(18,24,36,.94); border: 1px solid #2a3a50; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ev-titre { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #263548; }
.choix-ev .n .losange { background: var(--cc2); box-shadow: none; }
.losange { width: 12px; height: 12px; flex: none; rotate: 45deg; background: var(--ambre); box-shadow: 0 0 8px var(--ambre); }
.ev-titre h2 { margin: 0; font: 700 22px var(--titre); color: var(--ambre-pale); text-transform: uppercase; letter-spacing: .01em; }
.ev-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border: 1px solid rgba(245,158,11,.5); color: var(--ambre-pale);
  font: 700 11px var(--mono); letter-spacing: .12em; white-space: nowrap; }
.ev-badge .ms { font-size: 16px; }
.ev-panneau .recit { margin: 14px 0 0; max-width: none; }
.ev-choix { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.choix-ev { --cc2: color-mix(in srgb, var(--cc) 70%, #fff); display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; text-align: left; cursor: pointer; color: var(--texte);
  background: rgba(18,24,36,.94); border: 1px solid #263548; border-left: 4px solid var(--cc);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); transition: background .15s, transform .15s var(--ressort); }
.choix-ev.c0 { --cc: #ef4444; } .choix-ev.c1 { --cc: #22d3ee; } .choix-ev.c2 { --cc: #94a3b8; }
.choix-ev:hover { background: rgba(30,41,59,.96); transform: translateX(4px); }
.choix-ev .n { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--cc); color: var(--cc2); font: 700 16px var(--titre);
  background: color-mix(in srgb, var(--cc) 12%, transparent); }
.choix-corps { flex: 1; min-width: 0; }
.choix-corps b { display: block; font: 700 16px var(--titre); text-transform: uppercase; letter-spacing: .02em; }
.choix-corps small { display: inline-block; margin-top: 8px; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--cc) 60%, transparent); color: var(--cc2);
  background: color-mix(in srgb, var(--cc) 10%, transparent); font-size: 12px; }
.choix-ev .chev { font-size: 28px; color: var(--doux-clair); }
.evenement .encart { margin: 18px 0 14px; font-size: 14px; }

/* ---------- fins : défaite, fin d'acte, victoire ---------- */
.ecran-fin { display: grid; place-items: center; min-height: 100vh; padding: 24px 0; text-align: center; }
.fin-panneau { width: min(940px, 100%); padding: 24px 32px; background: rgba(8,10,14,.8); border: 1px solid #4c1d24; box-shadow: 0 0 40px rgba(0,0,0,.7); backdrop-filter: blur(2px); }
.acte-fin .fin-panneau, .victoire-finale .fin-panneau { border-color: rgba(245,158,11,.35); }
.fin-alerte { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0; font: 700 14px var(--mono); letter-spacing: .2em; color: #fca5a5; }
.fin-alerte.or { color: var(--ambre-pale); }
.ecran-fin h1 { margin: 12px 0 8px; font: 700 clamp(38px, 5vw, 66px)/1 var(--titre); letter-spacing: -.01em; }
.ecran-fin h1.rouge { color: #ef4444; text-shadow: 0 0 26px rgba(239,68,68,.6), 3px 3px 0 #450a0a; }
.ecran-fin h1.violet { color: var(--violet-clair); text-shadow: 0 0 24px rgba(168,85,247,.55), 3px 3px 0 #2c0051; }
.tue-par { margin: 6px 0; font: 600 13px var(--mono); letter-spacing: .08em; }
.tue-par b { color: #fca5a5; text-decoration: underline; }
.glitch-titre { position: relative; animation: tremble 2.5s infinite; }
@keyframes tremble { 0%, 90%, 100% { transform: none; } 92% { transform: translate(-3px, 1px) skewX(8deg); } 94% { transform: translate(3px, -1px); } 96% { transform: skewX(-6deg); } }
.telemetrie, .fin-ext { margin: 14px 0; padding: 14px 16px; text-align: left; background: rgba(7,10,15,.78); border: 1px solid var(--cadre); }
.telemetrie h3, .fin-ext h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 13px var(--mono); letter-spacing: .14em; }
.telemetrie h3 .ms, .fin-ext h3 .ms { color: var(--cyan); font-size: 18px; }
.stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; margin: 0; padding: 0; }
.stats li { display: flex; flex-direction: column; font: 600 11px var(--mono); letter-spacing: .12em; color: var(--doux-clair); }
.stats li b { font: 700 19px var(--titre); color: #fff; letter-spacing: 0; }
.fin-ext > div { display: flex; flex-wrap: wrap; gap: 10px; }
.ext-fin { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #263548; background: rgba(18,24,36,.7); }
.ext-fin .ms { color: var(--ambre-clair); }
.ext-fin b { display: block; font-size: 12px; } .ext-fin small { display: block; font-size: 11px; color: var(--doux-clair); }
.fin-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 8px; }
.duo { display: flex; align-items: flex-end; justify-content: center; gap: 40px; margin: 16px 0; }
.duo .sprite { margin: 0; }
.prochain { margin: 14px 0 0; font: 600 14px var(--mono); letter-spacing: .06em; color: var(--violet); }
.badge-merge { display: inline-block; margin: 0 0 6px; padding: 6px 14px; border-radius: 999px; background: #8957e5; color: #fff; font: 700 12px var(--mono); letter-spacing: .1em; }
.murmure { font-style: italic; color: var(--doux-clair); letter-spacing: .15em; margin: 18px auto; animation: murmure 3.5s ease-in both 1.4s; }
@keyframes murmure { from { opacity: 0; filter: blur(3px); } 60% { opacity: .6; } }
@keyframes pouls { 50% { transform: scale(1.2); text-shadow: 0 0 12px var(--rouge); } }
@keyframes alerte { 50% { filter: brightness(1.7); } }

/* ---------- combat : l'arène ---------- */
/* le combat occupe exactement l'écran : en-tête, arène (souple), relique, table ; les paliers de hauteur (plus bas)
   resserrent sprites, relique et main pour tenir sans défilement de 1024 × 700 à 1920 × 1080 */
body[data-ecran="combat"] #app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: 6px; }
body[data-ecran="combat"] .entete { flex: none; }
.combat { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.combat > .arene { flex: 1 1 auto; }
.combat > .ressources, .combat > .table { flex: none; width: 100%; }
.arene .sprite { width: auto; height: calc(var(--sh) * var(--k-sprite, 1)); }
.arene { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(200px, .85fr) minmax(260px, 1fr) minmax(0, 2fr);
  grid-template-areas: "joueur centre ennemis"; align-items: end; gap: 16px; min-height: 340px; padding: 6px 8px 4px; }
/* le sol : une grille en perspective, cyan (rouge au boss, orange à l'élite) */
.arene::before { content: ''; position: absolute; left: -24px; right: -24px; bottom: -6px; height: 46%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(76,215,246,.07)), repeating-linear-gradient(90deg, rgba(76,215,246,.09) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(76,215,246,.07) 0 1px, transparent 1px 34px);
  transform: perspective(500px) rotateX(58deg); transform-origin: 50% 100%; mask-image: linear-gradient(180deg, transparent, #000 40%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); }
.combat-boss .arene { background: radial-gradient(ellipse at 78% 80%, rgba(239,68,68,.13), transparent 60%); }
.combat-boss .arene::before { background: linear-gradient(180deg, transparent, rgba(239,68,68,.08)), repeating-linear-gradient(90deg, rgba(239,68,68,.1) 0 1px, transparent 1px 90px),
  repeating-linear-gradient(0deg, rgba(239,68,68,.08) 0 1px, transparent 1px 34px); }
.combat-elite .arene { background: radial-gradient(ellipse at 78% 80%, rgba(249,115,22,.11), transparent 60%); }
/* les fonds d'arène (illustrations Stitch, assets/fonds/combat-*.webp ; une rotation de 2 ou 3 par acte) : posés sur tout l'écran de combat (couche 0), voilés pour que
   sprites, intentions, PV et frise restent lisibles ; le voile fonce en haut (en-tête) et en bas (la main). Les fonds sont
   réduits, pas agrandis : image-rendering n'entre pas en jeu. Le boss a le rouge, l'élite la même image teintée d'orange. */
body[data-ecran="combat"][data-fond="acte1"]::before { background: linear-gradient(180deg, rgba(8,11,16,.7), rgba(8,11,16,.4) 22%, rgba(8,11,16,.48) 52%, rgba(8,11,16,.8) 72%, rgba(8,11,16,.92)),
  url(../assets/fonds/combat-acte1.webp) center / cover no-repeat, var(--obsidienne); }
body[data-ecran="combat"][data-fond="acte1-gele"]::before { background: linear-gradient(180deg, rgba(8,11,16,.7), rgba(8,11,16,.4) 22%, rgba(8,11,16,.48) 52%, rgba(8,11,16,.8) 72%, rgba(8,11,16,.92)),
  url(../assets/fonds/combat-acte1-gele.webp) center / cover no-repeat, var(--obsidienne); }
body[data-ecran="combat"][data-fond="acte1-foret"]::before { background: linear-gradient(180deg, rgba(8,11,16,.7), rgba(8,11,16,.4) 22%, rgba(8,11,16,.48) 52%, rgba(8,11,16,.8) 72%, rgba(8,11,16,.92)),
  url(../assets/fonds/combat-acte1-foret.webp) center / cover no-repeat, var(--obsidienne); }
body[data-ecran="combat"][data-fond="acte2"]::before { background: linear-gradient(180deg, rgba(8,11,16,.7), rgba(8,11,16,.4) 22%, rgba(8,11,16,.48) 52%, rgba(8,11,16,.8) 72%, rgba(8,11,16,.92)),
  url(../assets/fonds/combat-acte2.webp) center / cover no-repeat, var(--obsidienne); }
body[data-ecran="combat"][data-fond="acte2-decharge"]::before { background: linear-gradient(180deg, rgba(8,11,16,.7), rgba(8,11,16,.4) 22%, rgba(8,11,16,.48) 52%, rgba(8,11,16,.8) 72%, rgba(8,11,16,.92)),
  url(../assets/fonds/combat-acte2-decharge.webp) center / cover no-repeat, var(--obsidienne); }
body[data-ecran="combat"][data-fond="acte3"]::before { background: linear-gradient(180deg, rgba(8,11,16,.7), rgba(8,11,16,.4) 22%, rgba(8,11,16,.48) 52%, rgba(8,11,16,.8) 72%, rgba(8,11,16,.92)),
  url(../assets/fonds/combat-acte3.webp) center / cover no-repeat, var(--obsidienne); }
body[data-ecran="combat"][data-fond="acte3-latent"]::before { background: linear-gradient(180deg, rgba(8,11,16,.7), rgba(8,11,16,.4) 22%, rgba(8,11,16,.48) 52%, rgba(8,11,16,.8) 72%, rgba(8,11,16,.92)),
  url(../assets/fonds/combat-acte3-latent.webp) center / cover no-repeat, var(--obsidienne); }
body[data-ecran="combat"][data-fond="boss"]::before { background: radial-gradient(ellipse at 78% 80%, rgba(239,68,68,.16), transparent 60%),
  linear-gradient(180deg, rgba(8,11,16,.7), rgba(8,11,16,.42) 22%, rgba(8,11,16,.5) 52%, rgba(8,11,16,.8) 72%, rgba(8,11,16,.92)), url(../assets/fonds/combat-boss.webp) center / cover no-repeat, var(--obsidienne); }
body[data-ecran="combat"][data-fond="elite"]::before { background: radial-gradient(ellipse at 78% 80%, rgba(249,115,22,.18), transparent 60%),
  linear-gradient(180deg, rgba(20,10,4,.7), rgba(20,10,4,.48) 22%, rgba(20,10,4,.54) 52%, rgba(12,6,2,.82) 72%, rgba(12,6,2,.93)), url(../assets/fonds/combat-boss.webp) center / cover no-repeat, var(--obsidienne); }
.combattant { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.combattant.joueur { grid-area: joueur; }
.centre { grid-area: centre; align-self: center; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ennemis { grid-area: ennemis; }

/* panneau PV : losange de bouclier, barre de PV et de bouclier */
.fiche { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 270px; padding: 9px 12px 9px 10px; background: rgba(18,24,36,.93);
  border: 1px solid var(--trait); box-shadow: 0 0 0 1px #000, var(--ombre-dure); text-align: left; }
.armure { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; margin: 4px; rotate: 45deg;
  background: linear-gradient(135deg, #0e7490, #164e63); border: 2px solid var(--cyan); box-shadow: 0 0 12px rgba(76,215,246,.55); transition: background .2s, border-color .2s; }
.armure b { rotate: -45deg; font: 700 15px var(--titre); color: #fff; }
.armure.vide { background: var(--encre); border-color: var(--trait); box-shadow: none; }
.armure.vide b { color: var(--doux); }
.fiche-corps { flex: 1; min-width: 0; }
/* le nom et les PV partagent une ligne ; un nom trop long prend toute la ligne (sur deux au besoin), les PV passent dessous */
.fiche-ligne { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 8px; }
.fiche-titre, .fiche .nom-combattant { flex: 1 1 auto; min-width: 0; font: 700 11px/1.3 var(--mono); letter-spacing: .08em; color: var(--cyan); text-transform: uppercase;
  overflow-wrap: anywhere; }
.pv-txt { margin-left: auto; font: 700 13px/1.3 var(--mono); color: #fff; white-space: nowrap; }
.ennemi .fiche .nom-combattant { color: #fda4af; }
.pv { position: relative; height: 10px; margin-top: 5px; background: #0a0f16; border: 1px solid #253244; }
.pv-fantome, .pv-rempli, .pv-armure { position: absolute; left: 0; top: 0; bottom: 0; }
.pv-fantome { background: rgba(255,255,255,.7); transition: width .55s ease-in .35s; }
.pv-rempli { background: linear-gradient(90deg, #dc2626, var(--rouge)); transition: width .18s ease-out; }
.pv-armure { width: 0; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transition: width .2s, left .2s; }
/* pastilles de statut */
.statuts { min-height: 26px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 0; }
.statut { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border: 1px solid currentColor; border-radius: 999px; font: 700 11px/1.2 var(--mono);
  background: color-mix(in srgb, currentColor 12%, rgba(7,10,15,.8)); animation: entre .35s var(--ressort) both; }
.statut .ms { font-size: 14px; }
.statut.bleu { color: var(--s-bouclier); } .statut.violet { color: var(--violet); } .statut.jaune { color: var(--s-expose); }
.statut.rouge { color: var(--s-force); } .statut.doux { color: var(--doux-clair); } .statut.vert { color: var(--vert); }
/* le personnage, son halo, son socle lumineux, son étiquette */
.corps { position: relative; display: inline-block; margin-top: 10px; }
.corps.blinde .sprite { filter: drop-shadow(0 0 6px rgba(76,215,246,.85)); }
.aura { position: absolute; inset: -14px; border: 3px solid var(--bleu); border-radius: 50%; opacity: 0; pointer-events: none; box-shadow: 0 0 18px var(--bleu), inset 0 0 18px var(--bleu); }
.aura.violet { border-color: var(--violet); box-shadow: 0 0 18px var(--violet), inset 0 0 18px var(--violet); }
.aura.vert { border-color: var(--vert); box-shadow: 0 0 18px var(--vert), inset 0 0 18px var(--vert); }
.ombre { width: 150px; max-width: 90%; height: 16px; margin: -6px auto 0; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(6,182,212,.75), rgba(6,182,212,.15) 55%, transparent 72%); box-shadow: 0 0 24px rgba(6,182,212,.35); animation: ombre 1.6s steps(1) infinite; }
.ennemi .ombre { background: radial-gradient(ellipse, rgba(239,68,68,.75), rgba(239,68,68,.15) 55%, transparent 72%); box-shadow: 0 0 24px rgba(239,68,68,.35); }
@keyframes ombre { 50% { transform: scaleX(.9); } }
.etiquette { margin-top: 10px; padding: 4px 14px; max-width: 100%; border: 1px solid rgba(76,215,246,.55); background: rgba(7,10,15,.85); color: var(--cyan);
  font: 700 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
/* la règle d'un ennemi : deux lignes au plus (la coupe se fait dans le texte, pas dans le cadre) */
.etiquette .et-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ennemi .etiquette { cursor: help; }
.etiquette small { color: var(--doux-clair); letter-spacing: .06em; margin-left: 6px; }
.ennemi .etiquette { border-color: rgba(244,63,94,.6); color: #fda4af; }

/* l'intention de l'ennemi : une pastille compacte au-dessus de lui, l'icône et le chiffre (rouge : attaque ; bleu : le reste) */
.intention { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; margin-bottom: 8px; padding: 4px 12px 4px 8px; cursor: help;
  background: rgba(36,8,14,.9); border: 2px solid #ef4444; box-shadow: 0 0 14px rgba(239,68,68,.4); }
.intention.menace { animation: menace 1.4s ease-in-out infinite; }
@keyframes menace { 50% { box-shadow: 0 0 22px rgba(239,68,68,.7); } }
.int-ic { font-size: 26px; color: var(--rouge); }
.intention b { font: 700 20px/1.2 var(--mono); color: #fff; white-space: nowrap; }
.intention b .int-bl { font-size: 1em; margin: 0 2px 0 0; vertical-align: -2px; font-variation-settings: "FILL" 1, "wght" 500; color: var(--bleu); }
.intention.calme { background: rgba(8,20,40,.9); border-color: var(--c-defense); box-shadow: 0 0 12px rgba(59,130,246,.3); }
.intention.calme .int-ic { color: var(--bleu); }
.intention .frise { display: flex; align-items: center; gap: 3px; }
.intention .frise i { width: 12px; height: 8px; border: 1px solid var(--doux-clair); }
.intention .frise i.en-cours { background: var(--ambre); border-color: var(--ambre); }

/* plusieurs ennemis, ciblage */
.ennemis { display: flex; justify-content: center; align-items: flex-end; gap: 18px; flex-wrap: nowrap; min-width: 0; }
.combattant.ennemi { width: 250px; max-width: 100%; cursor: crosshair; padding-top: 16px; }
.ennemis.n1 .combattant.ennemi { width: 300px; }
.ennemis.n1 .fiche { max-width: 300px; }
.ennemis.n1 .etiquette { max-width: 360px; }
.ennemis.n2 .combattant.ennemi { width: 230px; }
.ennemis.n3 .combattant.ennemi, .ennemis.n4 .combattant.ennemi, .ennemis.n5 .combattant.ennemi { width: 180px; flex: 0 1 180px; min-width: 0; }
.ennemis.n3, .ennemis.n4, .ennemis.n5 { gap: 10px; }
.ennemis.n3 .int-ic, .ennemis.n4 .int-ic, .ennemis.n5 .int-ic { font-size: 22px; }
.ennemis.n3 .intention, .ennemis.n4 .intention, .ennemis.n5 .intention { gap: 4px; padding: 3px 8px 3px 6px; }
.ennemis.n3 .intention b, .ennemis.n4 .intention b, .ennemis.n5 .intention b { font-size: 17px; }
.ennemis.n3 .etiquette, .ennemis.n4 .etiquette, .ennemis.n5 .etiquette { padding: 3px 6px; font-size: 10px; letter-spacing: .05em; }
/* au-delà de trois ennemis : la fiche en colonne, le bouclier en pastille sur son coin (masquée à zéro), plus de place à droite */
.arene:has(.ennemis.n4), .arene:has(.ennemis.n5) { grid-template-columns: minmax(150px, .6fr) minmax(200px, .85fr) minmax(0, 2.6fr); }
.ennemis.n4 .fiche, .ennemis.n5 .fiche { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 8px; }
.ennemis.n4 .armure, .ennemis.n5 .armure { position: absolute; top: -9px; left: -7px; z-index: 1; width: 22px; height: 22px; margin: 0; }
.ennemis.n4 .armure b, .ennemis.n5 .armure b { font-size: 11px; }
.ennemis.n4 .armure.vide, .ennemis.n5 .armure.vide { display: none; }
.ennemis.n4 .pv-txt, .ennemis.n5 .pv-txt { font-size: 11.5px; }
.ennemis.n4 .fiche .nom-combattant, .ennemis.n5 .fiche .nom-combattant { font-size: 10px; letter-spacing: .04em; }
.combattant.ennemi.cible::before { content: '▼'; position: absolute; top: -6px; left: 50%; translate: -50% 0; color: var(--ambre); font: 700 16px var(--titre);
  text-shadow: 0 0 8px var(--ambre); animation: viseur .8s ease-in-out infinite; }
@keyframes viseur { 50% { translate: -50% 5px; } }
.combattant.ennemi.cible .corps .sprite { filter: drop-shadow(0 0 4px rgba(245,158,11,.75)); }
.combattant.ennemi.cible .fiche { border-color: var(--ambre); }
.combattant.ennemi.mort { pointer-events: none; }
.combattant.ennemi.mort .fiche, .combattant.ennemi.mort .etiquette, .combattant.ennemi.mort .statuts, .combattant.ennemi.mort .ombre { opacity: .25; transition: opacity .5s; }
.corps.fantome .sprite { opacity: .25; animation: fantome 1.4s ease-in-out infinite; }
@keyframes fantome { 50% { opacity: .1; translate: 0 -6px; } }

/* le centre : la revue de PR (répliques), la dernière action, l'horloge */
#c-bulle { min-height: 0; }
.bulle { position: relative; padding: 12px 16px; background: rgba(28,10,14,.93); border: 2px solid #ef4444; box-shadow: 0 0 20px rgba(239,68,68,.35), var(--ombre-dure); }
.bulle::after { content: ''; position: absolute; right: -11px; top: 38%; width: 16px; height: 16px; rotate: 45deg; background: rgba(28,10,14,.98);
  border-top: 2px solid #ef4444; border-right: 2px solid #ef4444; }
.bulle-tete { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid rgba(239,68,68,.35); font: 700 11px var(--mono); letter-spacing: .08em; color: #fca5a5; }
.bulle-tete .ms { font-size: 16px; }
.bulle-tete b { margin-left: auto; max-width: 48%; padding: 2px 7px; background: rgba(239,68,68,.22); color: #fecaca; font-size: 10px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulle p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--texte); }
.journal { list-style: none; margin: 0; padding: 0; font-size: 11.5px; color: var(--doux-clair); }
.journal li { padding: 2px 12px; opacity: .75; }
.journal li:first-child { padding: 7px 12px; border: 1px solid var(--trait); background: rgba(7,10,15,.86); color: var(--texte); opacity: 1; font-size: 12px; animation: entre .3s both; }
.journal li:first-child b { color: var(--ambre-clair); letter-spacing: .06em; }
.journal li:nth-child(n+4) { display: none; }
.horloge { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 6px 12px; background: rgba(18,24,36,.92); border: 1px solid #263548; }
.horloge b { font: 700 16px var(--titre); color: var(--ambre-clair); }
.cadran { display: inline-block; position: relative; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 2px solid currentColor; border-radius: 50%; }
.cadran::before, .cadran::after { content: ''; position: absolute; background: currentColor; }
.cadran::before { left: 3px; top: 0; width: 2px; height: 5px; }
.cadran::after { left: 3px; top: 3px; width: 4px; height: 2px; }
.horloge small { color: var(--doux-clair); font-size: 11px; }
.horloge.bientot { border-color: var(--ctx-pression); }
.horloge.bientot b { color: var(--orange); animation: pouls 1.2s ease-in-out infinite; }
.horloge.depasse { border-color: #ef4444; }
.horloge.depasse b { color: var(--rouge); }

/* ---------- la relique runique : fenêtre de contexte ---------- */
.ressources { max-width: 780px; margin: 10px auto 0; }
.combat > .ressources { width: 100%; }
.contexte { padding: 10px 14px 8px; cursor: help; background: rgba(18,24,36,.95); border: 2px solid rgba(245,158,11,.75); box-shadow: 0 0 18px rgba(245,158,11,.22), var(--ombre-dure);
  transition: border-color .2s, box-shadow .2s; }
.ctx-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ctx-ic { color: var(--ambre); }
.ctx-tete b { font: 700 15px var(--titre); letter-spacing: .03em; color: var(--ambre-clair); }
.ctx-slots { margin-left: auto; padding: 3px 9px; border: 1px solid rgba(245,158,11,.6); background: rgba(245,158,11,.12); color: var(--ambre-pale); font: 700 12px var(--mono); }
.ctx-slots small { margin-left: 5px; font-size: 10px; letter-spacing: .1em; }
.ctx-seuil { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid; font: 700 11px var(--mono); letter-spacing: .04em; }
.ctx-seuil .ms { font-size: 15px; }
.ctx-seuil.sain { color: #67e8f9; border-color: rgba(6,182,212,.5); background: rgba(6,182,212,.08); }
.ctx-seuil.pression { color: #fdba74; border-color: var(--ctx-pression); background: rgba(249,115,22,.13); }
.ctx-seuil.critique { color: #fca5a5; border-color: var(--ctx-critique); background: rgba(239,68,68,.15); animation: alerte .6s steps(1) infinite; }
.jauge { display: flex; gap: 4px; margin: 9px 0 6px; padding: 4px; background: var(--encre); border: 1px solid var(--cadre); }
.jauge i { flex: 1; height: 12px; background: #0f1520; border: 1px dashed; transition: background .2s, box-shadow .2s; }
.jauge i.z-sain { border-color: rgba(6,182,212,.35); } .jauge i.z-pression { border-color: rgba(249,115,22,.35); } .jauge i.z-critique { border-color: rgba(239,68,68,.4); }
.jauge i.plein { border-style: solid; border-color: #000; }
.jauge i.plein.z-sain { background: var(--ctx-sain); box-shadow: 0 0 8px rgba(6,182,212,.6); }
.jauge i.plein.z-pression { background: var(--ctx-pression); box-shadow: 0 0 8px rgba(249,115,22,.6); }
.jauge i.plein.z-critique { background: var(--ctx-critique); box-shadow: 0 0 10px rgba(239,68,68,.7); animation: critique .7s ease-in-out infinite; }
@keyframes critique { 50% { filter: brightness(1.5); } }
.jauge i.neuf { animation: case-neuve .35s var(--ressort); }
@keyframes case-neuve { from { transform: scaleY(0); } 60% { transform: scaleY(1.5); filter: brightness(2); } }
.jauge i.vide { animation: case-vide .4s ease-out; }
@keyframes case-vide { from { background: var(--cyan); transform: scale(1.3); } }
.ctx-pied { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--doux-clair); }
.ctx-sat { color: #f472b6; font-weight: 700; }
.contexte.pression { border-color: var(--ctx-pression); box-shadow: 0 0 18px rgba(249,115,22,.3), var(--ombre-dure); }
.contexte.alerte { border-color: var(--ctx-critique); box-shadow: 0 0 22px rgba(239,68,68,.4), var(--ombre-dure); }
.contexte.alerte .jauge { animation: alerte .6s steps(1) infinite; }
/* saturée : rayures magenta et violettes, l'hallucination */
.contexte.sature { border-color: var(--ctx-sature); box-shadow: 0 0 26px rgba(236,72,153,.6), var(--ombre-dure); }
.contexte.sature .ctx-tete b, .contexte.sature .ctx-sat { color: #f9a8d4; }
.contexte.sature .ctx-seuil { display: none; }
.contexte.sature .ctx-tete::after { content: 'SATURÉE : UNE HALLUCINATION ENTRE DANS LA PIOCHE'; padding: 3px 9px; border: 1px solid var(--ctx-sature); background: rgba(236,72,153,.15); color: #f9a8d4; font: 700 11px var(--mono); }
.contexte.sature .jauge i { background: repeating-linear-gradient(135deg, var(--ctx-sature) 0 5px, var(--ctx-sature-2) 5px 10px) !important; border-color: #000;
  box-shadow: 0 0 10px rgba(236,72,153,.7); animation: sature .3s steps(2) infinite; }
@keyframes sature { 50% { filter: hue-rotate(40deg) brightness(1.4); transform: translateX(1px); } }

/* ---------- la table : orbe de tokens, pioche, main en éventail, défausse, fin du tour ---------- */
.table { display: grid; grid-template-columns: 220px minmax(0, 1fr) 270px; align-items: end; gap: 12px; margin-top: 8px; }
.table-g, .table-d { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 12px; }
.table-d { justify-content: flex-end; }
.tokens { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.orbe { display: grid; place-content: center; width: 104px; height: 104px; border-radius: 50%; text-align: center; color: var(--sur-ambre);
  background: radial-gradient(circle at 35% 30%, #fde68a, var(--ambre) 46%, #b45309 82%); border: 3px solid var(--ambre-pale);
  box-shadow: 0 0 22px rgba(245,158,11,.7), inset 0 0 18px rgba(255,221,184,.6); animation: orbe 2.8s ease-in-out infinite; }
.orbe b { font: 700 36px/1 var(--titre); letter-spacing: -.02em; }
.orbe b span { font-size: 22px; opacity: .75; }
.orbe small { font: 700 10px var(--mono); letter-spacing: .12em; }
.orbe.vide { background: radial-gradient(circle at 35% 30%, #57421c, #2a1d08 70%); color: var(--ambre-pale); border-color: #78530f; box-shadow: 0 0 10px rgba(245,158,11,.25); animation: none; }
@keyframes orbe { 50% { box-shadow: 0 0 36px rgba(245,158,11,.9), 0 0 60px rgba(245,158,11,.35), inset 0 0 26px #ffddb8; } }
.pips { display: flex; gap: 6px; padding: 0 4px; }
.pips i { width: 11px; height: 11px; transform: rotate(45deg); border: 2px solid var(--ambre); transition: background .2s; }
.pips i.on { background: var(--ambre); box-shadow: 0 0 8px rgba(245,158,11,.7); }
.pips i.neuf { animation: token-neuf .4s var(--ressort); }
@keyframes token-neuf { from { transform: rotate(45deg) scale(0); } 60% { transform: rotate(45deg) scale(1.5); } }
.pips i.depense { animation: token-depense .45s ease-out; }
@keyframes token-depense { from { background: var(--ambre); transform: rotate(45deg) scale(1.6); box-shadow: 0 0 16px var(--ambre); } }
.tok-note { font: 700 10px var(--mono); letter-spacing: .12em; color: var(--ambre-pale); text-transform: uppercase; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--texte); }
.pile .tas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 66px; height: 86px;
  background: linear-gradient(180deg, #0f2a3a, #0b1724); border: 2px solid #22d3ee;
  box-shadow: 3px -3px 0 -1px #0b1724, 3px -3px 0 0 rgba(34,211,238,.55), 0 0 14px rgba(34,211,238,.3); transition: transform .15s; }
.pile .tas .ms { font-size: 22px; color: #67e8f9; }
.pile .tas b { font: 700 20px var(--titre); }
.pile small { font: 700 11px var(--mono); letter-spacing: .14em; color: #67e8f9; }
.pile:hover .tas { transform: translateY(-3px); }
.pile.defausse .tas { background: linear-gradient(180deg, #3a0f1a, #1f0a10); border-color: var(--c-attaque);
  box-shadow: 3px -3px 0 -1px #1f0a10, 3px -3px 0 0 rgba(244,63,94,.55), 0 0 14px rgba(244,63,94,.3); }
.pile.defausse .tas .ms, .pile.defausse small { color: #fda4af; }
.fin-bloc { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fin-bloc small { font: 700 10px var(--mono); letter-spacing: .12em; color: var(--ambre-clair); }
#c-epuise { font-size: 11px; }
.bouton.fin { padding: 14px 20px; background: linear-gradient(180deg, #fbbf24, var(--ambre)); color: var(--sur-ambre); border: 2px solid #fde68a;
  font: 700 18px var(--titre); letter-spacing: .1em; box-shadow: 0 0 18px rgba(245,158,11,.55), 3px 3px 0 #000; white-space: nowrap; }
.bouton.fin .ms { font-size: 22px; }
.bouton.fin:hover:not(:disabled) { background: linear-gradient(180deg, #fcd34d, #fbbf24); color: var(--sur-ambre); filter: brightness(1.08); transform: translateY(-2px); }

/* main en éventail : chaque carte est placée par --x --y --r --s */
.main { position: relative; height: 270px; }
.main .carte { position: absolute; left: 50%; top: 0; transform-origin: 50% 80%;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0)) scale(var(--s, 1));
  transition: transform .32s cubic-bezier(.2,.8,.25,1), opacity .3s, box-shadow .2s, border-color .2s; }
.main .carte.en-jeu { transition: transform .26s cubic-bezier(.3,.6,.3,1), opacity .2s; box-shadow: 0 0 30px rgba(245,158,11,.55); }
.carte.refus { animation: refus .3s; }
@keyframes refus { 20% { translate: -8px 0; } 40% { translate: 8px 0; } 60% { translate: -5px 0; } 80% { translate: 4px 0; } }
.carte.active { animation: active .5s; }
@keyframes active { 30% { filter: brightness(2.2); translate: 0 -10px; } }

/* ---------- cartes du grimoire (5:7) ---------- */
.t-attaque { --c: var(--c-attaque); } .t-defense { --c: var(--c-defense); } .t-competence { --c: var(--c-competence); }
.t-pouvoir { --c: var(--c-pouvoir); } .t-statut { --c: var(--c-statut); }
.carte { --c2: color-mix(in srgb, var(--c, var(--c-statut)) 65%, #fff); position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 154px; height: 216px; padding: 7px;
  overflow: hidden; text-align: left; color: var(--texte); font-family: var(--mono); cursor: default;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, var(--grimoire)), #0d121b 62%); border: 2px solid var(--c);
  box-shadow: 2px 2px 0 #000, inset 0 0 0 1px rgba(255,255,255,.05); }
.carte.t-statut { background: repeating-linear-gradient(45deg, #15181d 0 8px, #1b1f26 8px 16px); border-style: dashed; }
.carte.t-statut .nom { color: #fda4af; }
.carte.cliquable { cursor: pointer; }
.carte-tete { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.carte .cout { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; font: 700 15px var(--titre); color: var(--sur-ambre);
  background: radial-gradient(circle at 35% 30%, #fde68a, var(--ambre) 60%, #b45309); border: 2px solid var(--ambre-pale); box-shadow: 0 0 8px rgba(245,158,11,.55); }
.carte .cout.offert { background: radial-gradient(circle at 35% 30%, #a7f3d0, #10b981 60%, #047857); border-color: #6ee7b7; animation: token-neuf .4s var(--ressort); }
.carte .cout.modifie { background: radial-gradient(circle at 35% 30%, #f5d0fe, #c084fc 60%, #7e22ce); border-color: #e9d5ff; }
.carte .ctx { padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c2);
  font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* le nom, le texte, l'en-tête et le pied ne rétrécissent jamais : seule l'illustration cède la place */
.carte-tete, .carte .nom, .carte .texte, .carte .pied { flex-shrink: 0; }
.carte .nom { font: 700 13.5px/1.15 var(--titre); color: #fff; text-align: center; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.carte .nom.nom-long { font-size: 11.5px; letter-spacing: 0; }
.carte .nom.nom-tres-long { font-size: 10px; letter-spacing: 0; }
.carte .illu { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 24%, transparent), rgba(7,10,15,.6) 70%); }
.carte .illu .ms { font-size: 32px; color: var(--c2); filter: drop-shadow(0 0 6px var(--c)); }
.carte .texte { flex: none; padding: 5px 6px; background: rgba(7,10,15,.6); border: 1px solid rgba(255,255,255,.06); font-size: 11px; line-height: 1.38; color: #cbd5e1; }
.carte .texte.texte-long { font-size: 10px; line-height: 1.3; }
.carte .texte.texte-tres-long { font-size: 9.5px; line-height: 1.25; padding: 4px 5px; }
.carte .pied { display: flex; justify-content: space-between; align-items: center; font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c2); }
.choix-cartes .carte.cliquable { transition: transform .15s var(--ressort), box-shadow .15s; }
.choix-cartes .carte.cliquable:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 0 0 1px var(--c), 0 0 22px var(--c), 0 14px 26px rgba(0,0,0,.6); }
.main .carte.cliquable:hover { box-shadow: 0 0 0 1px var(--c), 0 0 18px var(--c), 0 16px 30px rgba(0,0,0,.7); }
.carte.trop-cher { filter: saturate(.3) brightness(.68); }
.carte.injouable { opacity: .72; cursor: not-allowed; }
.carte.volante { position: fixed; z-index: 25; pointer-events: none; }
.choix-cartes.grandes .carte { width: 196px; height: 274px; padding: 9px; gap: 7px; }
.choix-cartes.grandes .carte .nom { font-size: 17px; }
.choix-cartes.grandes .carte .nom.nom-long { font-size: 14px; } .choix-cartes.grandes .carte .nom.nom-tres-long { font-size: 12.5px; }
.choix-cartes.grandes .carte .cout { width: 32px; height: 32px; font-size: 18px; }
.choix-cartes.grandes .carte .illu .ms { font-size: 50px; }
.choix-cartes.grandes .carte .texte { font-size: 12.5px; padding: 7px 8px; }
.choix-cartes.grandes .carte .texte.texte-long { font-size: 11.5px; line-height: 1.32; } .choix-cartes.grandes .carte .texte.texte-tres-long { font-size: 10.5px; line-height: 1.28; }
.choix-cartes.mini .carte { width: 128px; height: 180px; }
.choix-cartes.mini .carte .illu .ms { font-size: 24px; }
.choix-cartes.mini .carte .texte { font-size: 10px; }
.choix-cartes.mini .carte .texte.texte-long { font-size: 9px; } .choix-cartes.mini .carte .texte.texte-tres-long { font-size: 8.5px; line-height: 1.2; }
.choix-cartes.mini .carte .nom { font-size: 12px; }
.choix-cartes.mini .carte .nom.nom-long { font-size: 10px; } .choix-cartes.mini .carte .nom.nom-tres-long { font-size: 9px; }

/* respirations : deux images par cycle, en pas de pixel */
.idle { animation: respire 1.6s steps(1) infinite; }
@keyframes respire { 50% { translate: 0 -4px; } }
.idle-boss { animation: respire-boss 2.2s steps(1) infinite; }
@keyframes respire-boss { 50% { translate: 0 -4px; scale: 1.02 1; } }
.idle-bug { animation: grouille .5s steps(1) infinite; }
@keyframes grouille { 25% { translate: -3px 0; } 50% { translate: 0 -2px; } 75% { translate: 3px 0; } }
.idle-flaky { animation: hoquet 2.4s infinite; }
@keyframes hoquet { 0%, 60%, 100% { translate: 0 0; scale: 1 1; } 65% { scale: 1.15 .85; } 75% { translate: 0 -28px; scale: .9 1.1; } 85% { translate: 0 0; scale: 1.1 .9; } }
.idle-jira { animation: tremblote 1.2s infinite; }
@keyframes tremblote { 0%, 80%, 100% { rotate: 0deg; } 84% { rotate: -6deg; } 88% { rotate: 6deg; } 92% { rotate: -4deg; } }
.idle-dette { animation: pese 3s ease-in-out infinite; transform-origin: bottom; }
@keyframes pese { 50% { scale: 1.06 .94; } }
.idle-prod { animation: incendie .35s steps(1) infinite; }
@keyframes incendie { 50% { filter: brightness(1.35) hue-rotate(-12deg); translate: 0 -1px; } }
.idle-victoire { animation: saute .8s ease-out infinite; }
@keyframes saute { 0%, 100% { translate: 0 0; } 40% { translate: 0 -24px; } }
/* respirations des nouveaux */
.idle-offbyone { animation: decale 1.4s steps(1) infinite; }
@keyframes decale { 50% { translate: 3px -2px; } }
.idle-e404 { animation: flotte404 2s ease-in-out infinite; }
@keyframes flotte404 { 50% { translate: 0 -8px; } }
.idle-nullptr { animation: vide 1.6s ease-in-out infinite; }
@keyframes vide { 50% { scale: .92; filter: drop-shadow(0 0 8px #f85149); } }
.idle-korrigan { animation: saute .6s ease-out infinite; }
.idle-typo { animation: tremblote 1.6s infinite; }
.idle-kerthulhu { animation: respire-boss 3s steps(1) infinite; }
.idle-retromonolith { animation: monolithe 4s ease-in-out infinite; }
@keyframes monolithe { 50% { filter: drop-shadow(0 0 14px rgba(227,179,65,.35)); } }
.idle-flixomancien { animation: respire 1.2s steps(1) infinite; }
.idle-bretonomicon { animation: respire 1.8s steps(1) infinite; }
/* ===== Acte II : le Saint Pipeline, incidents mondiaux, transitions d'acte ===== */
.idle-testrej { animation: ac2-tamponne .9s steps(1) infinite; }
@keyframes ac2-tamponne { 50% { scale: 1.06; translate: 1px 1px; } }
.idle-yaml { animation: ac2-indente 1.8s ease-in-out infinite; }
@keyframes ac2-indente { 50% { translate: 3px 0; rotate: -2deg; } }
.idle-ours { animation: ac2-hesite .6s steps(1) infinite; }
@keyframes ac2-hesite { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
.idle-theirs { animation: ac2-bondit 1s ease-out infinite; }
@keyframes ac2-bondit { 0% { translate: 0 0; } 40% { translate: 0 -10px; } 80%, 100% { translate: 0 0; } }
.idle-timeout { animation: ac2-sablier 2.4s steps(1) infinite; }
@keyframes ac2-sablier { 50% { scale: .92 1.08; } }
.idle-pbuild { animation: ac2-engrenage 2s steps(8) infinite; }
@keyframes ac2-engrenage { to { rotate: 360deg; } }
.idle-ptest { animation: ac2-bouillonne 1.4s ease-in-out infinite; }
@keyframes ac2-bouillonne { 50% { scale: 1.05 .96; translate: 0 -2px; } }
.idle-pdeploy { animation: ac2-decolle 1.2s steps(2) infinite; }
@keyframes ac2-decolle { 50% { translate: 0 -6px; } }
.idle-daemon { animation: ac2-queue 2.2s ease-in-out infinite; }
@keyframes ac2-queue { 50% { rotate: 3deg; translate: 2px 0; } }
.idle-cymonarch { animation: ac2-couronne 3.2s ease-in-out infinite; }
@keyframes ac2-couronne { 50% { translate: 0 -3px; rotate: -1deg; } }
.idle-groslarness { animation: ac2-marche .9s steps(1) infinite; }
@keyframes ac2-marche { 50% { translate: 3px -2px; } }
.idle-ardemarrage { animation: ac2-battement 1s steps(1) infinite; }
@keyframes ac2-battement { 50% { scale: 1.04; } }
.idle-pilounium { animation: ac2-bouillon 2.4s ease-in-out infinite; }
@keyframes ac2-bouillon { 50% { filter: drop-shadow(0 0 10px rgba(63,185,80,.45)); } }
.idle-memleak { animation: a3-fuite 1.8s ease-in-out infinite; }
@keyframes a3-fuite { 50% { scale: 1.06 .94; filter: drop-shadow(0 0 8px rgba(219,97,162,.6)); } }
.idle-deadlock { animation: a3-bloque .8s steps(1) infinite; }
@keyframes a3-bloque { 25% { translate: -2px 0; } 75% { translate: 2px 0; } }
.idle-racecond { animation: a3-course .5s steps(1) infinite; }
@keyframes a3-course { 50% { translate: 4px 0; filter: hue-rotate(40deg); } }
.idle-promptinj { animation: a3-injecte 1.3s steps(1) infinite; }
@keyframes a3-injecte { 33% { translate: 0 -2px; filter: hue-rotate(-30deg); } 66% { translate: 2px 0; } }
.idle-works { animation: a3-chezmoi 1.6s ease-in-out infinite; }
@keyframes a3-chezmoi { 50% { translate: 0 -4px; } }
.idle-pillard { animation: a3-rafale .5s steps(1) infinite; }
@keyframes a3-rafale { 50% { translate: 2px -3px; rotate: -3deg; } }
.idle-ombre { animation: a3-ombre 3.6s ease-in-out infinite; }
@keyframes a3-ombre { 50% { translate: 0 -6px; scale: 1.02; } }
.idle-ruche { animation: a3-ruche 1.4s ease-in-out infinite; }
@keyframes a3-ruche { 50% { scale: 1.05; } }
.idle-abeille { animation: a3-bzz .25s steps(1) infinite; }
@keyframes a3-bzz { 25% { translate: 2px -2px; } 75% { translate: -2px 1px; } }
.idle-agent { animation: a3-clignote 2.6s steps(1) infinite; }
@keyframes a3-clignote { 90% { filter: brightness(1.6); } }
.idle-latest { animation: a3-etiquette 2s steps(1) infinite; }
@keyframes a3-etiquette { 50% { rotate: -8deg; } }
.idle-vendredi { animation: a3-tic 1s steps(1) infinite; }
@keyframes a3-tic { 50% { rotate: 30deg; } }
.idle-arkkarness { animation: a3-vert 2.4s ease-in-out infinite; }
@keyframes a3-vert { 50% { filter: drop-shadow(0 0 12px rgba(46,160,67,.6)); } }
.idle-gxiglorithme { animation: a3-oracle 3s ease-in-out infinite; }
@keyframes a3-oracle { 50% { translate: 2px -3px; rotate: 1deg; } }
.idle-laputalypse { animation: a3-bourdonne 1.2s steps(1) infinite; }
@keyframes a3-bourdonne { 25% { translate: 1px -2px; } 75% { translate: -1px 1px; } }
.idle-harnemo { animation: a4-trone 3.4s ease-in-out infinite; }
@keyframes a4-trone { 50% { translate: 0 -3px; filter: drop-shadow(0 0 10px rgba(227,179,65,.5)); } }
.idle-juge { animation: a4-note 1.8s steps(1) infinite; }
@keyframes a4-note { 50% { rotate: -6deg; translate: 0 -2px; } }

/* ---------- effets ---------- */
#particules { position: fixed; inset: 0; pointer-events: none; z-index: 18; image-rendering: pixelated; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.flottant { position: fixed; transform: translateX(-50%); font: 700 22px var(--titre); letter-spacing: .02em; animation: flotte 1.2s ease-out forwards;
  text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0,0,0,.85); white-space: nowrap; }
.flottant.gros { font-size: 26px; }
.flottant.rouge { color: var(--rouge); } .flottant.jaune { color: var(--jaune); } .flottant.bleu { color: var(--cyan); }
.flottant.vert { color: var(--vert); } .flottant.violet { color: var(--violet); } .flottant.doux { color: var(--doux-clair); }
@keyframes flotte { 0% { opacity: 0; scale: .4; } 15% { opacity: 1; scale: 1.5; } 30% { scale: 1; } 100% { opacity: 0; translate: 0 -70px; } }
/* bannières : un bandeau d'obsidienne biseauté, liseré de la couleur de l'événement */
.banniere { position: fixed; left: 50%; top: 42%; z-index: 22; pointer-events: none; padding: 16px 64px; white-space: nowrap;
  font: 700 30px var(--titre); letter-spacing: .14em; text-shadow: 0 0 18px currentColor, 2px 2px 0 #000;
  background: linear-gradient(90deg, transparent, rgba(7,10,15,.95) 12%, rgba(7,10,15,.95) 88%, transparent); }
.banniere.joueur { color: var(--ambre-pale); border-top: 2px solid var(--ambre); border-bottom: 2px solid var(--ambre); }
.banniere.ennemi { color: var(--rouge); border-top: 2px solid #ef4444; border-bottom: 2px solid #ef4444; }
.banniere.boss { color: var(--ambre-pale); font-size: 36px; border-top: 2px solid #ef4444; border-bottom: 2px solid #ef4444; text-shadow: 0 0 22px #ef4444, 2px 2px 0 #000; }
.banniere.s-gloire { color: var(--ambre-pale); border-top: 2px solid var(--ambre); border-bottom: 2px solid var(--ambre); }
.banniere.s-doute { color: var(--doux-clair); border-top: 2px solid #475569; border-bottom: 2px solid #475569; }
.banniere.incident { color: var(--orange); border-top: 2px solid var(--ctx-pression); border-bottom: 2px solid var(--ctx-pression); }
/* contexte saturé : l'écran hallucine */
#app.glitch { animation: glitch .7s steps(2) both; }
@keyframes glitch {
  0% { filter: none; transform: none; }
  15% { filter: hue-rotate(90deg) saturate(3); transform: translate(-6px, 2px) skewX(4deg); clip-path: inset(10% 0 30% 0); }
  30% { filter: invert(.1) hue-rotate(-60deg); transform: translate(5px, -3px); clip-path: inset(40% 0 5% 0); }
  45% { filter: saturate(4) contrast(1.4); transform: translate(-3px, 0) skewX(-6deg); clip-path: none; }
  60% { filter: hue-rotate(180deg); transform: translate(4px, 2px); }
  100% { filter: none; transform: none; }
}
/* toasts : une ligne de console */
#toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; max-width: min(620px, 92vw); padding: 10px 16px; transform: translateX(-50%); pointer-events: none;
  background: rgba(7,10,15,.97); border: 1px solid var(--trait); border-left: 3px solid var(--cyan); box-shadow: 0 8px 24px rgba(0,0,0,.6), var(--ombre-dure);
  font-size: 12.5px; opacity: 0; translate: 0 10px; transition: opacity .2s, translate .2s; }
#toast::before { content: '[INFO] '; color: var(--cyan); font-weight: 700; }
#toast.visible { opacity: 1; translate: 0 0; }
/* modale : le deck, la pioche, la défausse */
.modale { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(3,5,8,.86); animation: fondu .2s both; }
@keyframes fondu { from { opacity: 0; } }
.modale-boite { width: min(1040px, 100%); max-height: 86vh; overflow: auto; padding: 0 18px 18px; background: #0d121b; border: 1px solid var(--trait);
  box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,.8); animation: entre .3s var(--ressort) both; }
.modale-tete { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 -18px 6px; padding: 14px 18px;
  background: #0d121b; border-bottom: 1px solid var(--cadre); }
.modale-boite h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 18px var(--titre); color: var(--ambre-clair); letter-spacing: .02em; }
.modale .carte.entre { animation-delay: calc(var(--i, 0) * 25ms); }

/* intro Flash : une fenêtre de lecteur, impossible à passer */
.intro-flash { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(0,0,0,.86); animation: fondu .3s both; }
.intro-flash.sortie { animation: fondu .35s reverse both; }
.intro-boite { width: min(460px, 90vw); padding: 22px 24px; text-align: center; color: var(--texte); font-family: var(--mono); background: #0d121b; border: 2px solid var(--ambre);
  box-shadow: 0 0 34px rgba(245,158,11,.4); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.intro-titre { margin-bottom: 14px; font: 700 18px var(--titre); letter-spacing: .1em; color: var(--ambre-pale); }
.intro-titre::before { content: '▶ '; color: var(--ambre); }
.intro-barre { height: 18px; padding: 2px; border: 1px solid var(--trait); background: var(--encre); }
.intro-barre i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--ambre) 0 10px, #b45309 10px 12px); transition: width .05s linear; }
.intro-pct { margin: 10px 0; font-size: 12.5px; color: var(--doux-clair); }
.intro-skip { padding: 6px 14px; background: var(--cadre); border: 1px solid var(--trait); color: var(--texte); font: 700 12px var(--mono); letter-spacing: .08em; cursor: pointer; }
.intro-skip.refusee { background: #ef4444; border-color: #fca5a5; color: #fff; animation: refus .3s; }

/* ---------- mécaniques des actes ---------- */
.carte.coupee { filter: grayscale(.9) brightness(.6); }
.carte.coupee .nom { text-decoration: line-through; }
.carte.version { border-style: dashed; }
.carte.echangee { animation: echangee .5s; }
@keyframes echangee { 30% { filter: hue-rotate(90deg) brightness(1.6); translate: 0 -14px; } }
.carte.nulle { animation: nulle .5s steps(4) forwards !important; }
@keyframes nulle { 30% { filter: invert(1); } 60% { clip-path: inset(30% 0 40% 0); } to { opacity: 0; clip-path: inset(50% 0 50% 0); } }
.carte.corrigee { animation: corrigee .5s ease-in forwards !important; }
@keyframes corrigee { 40% { filter: brightness(2) hue-rotate(60deg); } to { opacity: 0; translate: 0 -60px; } }
.carte.verrou { filter: grayscale(.8) brightness(.6); }
.carte.verrou::after { content: 'lock'; position: absolute; top: 38%; left: 50%; translate: -50% -50%; font: 36px "Material Symbols Outlined"; color: var(--ambre-pale); text-shadow: 0 0 10px #000; }
.carte.collante { box-shadow: 0 0 0 2px var(--ambre-pale), 0 0 14px rgba(245,158,11,.5); }
.carte.roastee { box-shadow: 0 0 0 2px #ef4444, 0 0 16px rgba(239,68,68,.65); }
.carte.roastee::after { content: 'ROASTÉE'; position: absolute; top: 40%; left: 0; right: 0; padding: 3px 0; text-align: center; background: rgba(239,68,68,.85); color: #fff;
  font: 700 11px var(--mono); letter-spacing: .2em; rotate: -8deg; }
.anciens { display: flex; gap: 14px; align-items: flex-end; }

/* ---------- grimoire v2 : merge, choix de carte, déblocage ---------- */
/* une carte mergée : même nom, bordure verte, l'icône merge au pied */
.carte.mergee { border-color: var(--vert); box-shadow: 2px 2px 0 #000, 0 0 0 1px rgba(52,211,153,.45), 0 0 14px rgba(52,211,153,.35), inset 0 0 0 1px rgba(255,255,255,.05); }
.carte.mergee .pied { color: var(--vert); }
.marque-merge { display: inline-flex; align-items: center; }
.marque-merge .ms { font-size: 14px; color: var(--vert); filter: drop-shadow(0 0 4px rgba(52,211,153,.8)); }
/* la modale de choix : les cartes en grand, un tap sélectionne, VALIDER confirme */
.choix-boite { display: flex; flex-direction: column; max-height: 90vh; padding-bottom: 0; }
.choix-boite .modale-tete { margin-bottom: 0; }
.choix-compte { font: 700 12px var(--mono); letter-spacing: .08em; color: var(--doux-clair); white-space: nowrap; }
.choix-aide { margin: 10px 0 4px; font-size: 13px; color: var(--texte); }
.choix-liste { justify-content: center; margin: 8px 0 12px; overflow-y: auto; }
.choix-liste .carte.cliquable, .modele-choix { cursor: pointer; transition: transform .15s var(--ressort), box-shadow .15s; }
.carte.selectionnee, .modele-choix.selectionnee { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--ambre-pale), 0 0 22px rgba(245,158,11,.7), 0 12px 24px rgba(0,0,0,.6) !important; }
.carte.selectionnee::after { content: 'check_circle'; position: absolute; top: 34%; left: 50%; translate: -50% -50%; font: 40px "Material Symbols Outlined"; color: var(--ambre-pale); text-shadow: 0 0 12px #000; }
.choix-actions { position: sticky; bottom: 0; display: flex; justify-content: center; margin: 0 -18px; padding: 12px 18px 14px; background: #0d121b; border-top: 1px solid var(--cadre); }
.choix-actions .bouton { min-width: 220px; }
.choix-actions .bouton:disabled { opacity: .45; cursor: not-allowed; }
.choix-modeles { gap: 12px; }
.modele-choix { --mc2: color-mix(in srgb, var(--mc) 60%, #fff); position: relative; display: flex; flex-direction: column; gap: 8px; width: 220px; padding: 12px 14px; text-align: left;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 16%, #0d121b), #0d121b 70%); border: 2px solid var(--mc); color: var(--texte); font: inherit; }
.modele-choix b { font: 700 17px/1.1 var(--titre); text-transform: uppercase; color: #fff; padding-right: 54px; }
.modele-choix .mod-sprite { top: 8px; right: 10px; }
.modele-choix .stats-modele { font-size: 16px; }
.modele-choix .mod-passif { font-size: 11.5px; line-height: 1.45; color: var(--doux-clair); }
/* pause café : la troisième option, Code review */
.o-review { --oc: var(--vert); }
.options-repos .option { flex: 1 1 300px; max-width: 390px; }
.bouton.o-btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
/* l'aperçu du merge : avant → après */
.merge-boite { width: min(560px, 100%); padding-bottom: 18px; }
.merge-duo { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 16px 0 8px; }
.merge-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.merge-col small { font: 700 10.5px var(--mono); letter-spacing: .14em; color: var(--doux-clair); }
.merge-col:last-child small { color: var(--vert); }
.merge-fleche { font-size: 30px; color: var(--vert); }
.merge-delta { margin: 4px 0 14px; text-align: center; font: 700 12px var(--mono); letter-spacing: .06em; color: var(--vert); }
.bouton.o-btn-merge { background: linear-gradient(180deg, #7ee787, #2ea043); color: #06210f; border: 0; letter-spacing: .12em; }
.bouton.o-btn-merge:hover { filter: brightness(1.1); background: linear-gradient(180deg, #7ee787, #2ea043); color: #06210f; }
.merge .sur-titre { color: var(--vert); }
/* fin de run : la barre d'XP et les cartes du prochain niveau en silhouette */
.fin-xp { margin: 14px 0; padding: 14px 16px; text-align: left; background: rgba(7,10,15,.78); border: 1px solid rgba(52,211,153,.35); }
.fin-xp h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 13px var(--mono); letter-spacing: .14em; color: var(--texte); }
.fin-xp h3 .ms { color: var(--vert); font-size: 18px; }
.fin-xp h3 span { margin-left: auto; color: var(--vert); letter-spacing: .06em; }
.xp-barre { height: 12px; padding: 2px; background: var(--encre); border: 1px solid var(--trait); }
.xp-barre i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--vert) 0 10px, #10b981 10px 12px); box-shadow: 0 0 10px rgba(52,211,153,.6); }
.xp-note { margin: 8px 0 10px; font-size: 12px; line-height: 1.5; color: var(--doux-clair); }
.xp-note b { color: var(--texte); }
.silhouettes { display: flex; flex-wrap: wrap; gap: 8px; }
.silhouette { position: relative; display: grid; place-items: center; width: 46px; height: 64px; border: 2px solid color-mix(in srgb, var(--c) 45%, #000);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, #05070a), #05070a); box-shadow: 2px 2px 0 #000; filter: brightness(.7); }
.silhouette .ms { font-size: 20px; color: color-mix(in srgb, var(--c) 40%, #111); }
.silhouette b { position: absolute; bottom: 3px; right: 5px; font: 700 12px var(--titre); color: var(--doux); }
/* la frise : un nom qui ne tient d'aucun côté se cache (nom et effet au survol ou au tap) */
.fr-evt.sans-nom .fr-nom { display: none; }

/* ===== Finale : la Tour des Juges, Harnémo, Clairoracle ===== */
.finale-boss .corps::before { content: ''; position: absolute; inset: -18px -22px 0; border-radius: 50% 50% 8px 8px;
  background: radial-gradient(ellipse at 50% 40%, rgba(245,158,11,.24), transparent 65%); pointer-events: none; }
.lettres-or { margin-top: 6px; font: 700 13px var(--titre); color: #6e4a00; letter-spacing: 3px; white-space: nowrap; }
.lettres-or span { display: inline-block; transition: color .3s, text-shadow .3s; }
.lettres-or.allumees span { color: var(--ambre-pale); text-shadow: 0 0 8px rgba(245,158,11,.9), 0 2px 0 #6e4a00;
  animation: lettre-or .5s var(--ressort) both, lettre-scintille 3s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms), calc(var(--i) * 140ms); }
@keyframes lettre-or { from { color: #6e4a00; translate: 0 6px; scale: 1.6; } }
@keyframes lettre-scintille { 0%, 85%, 100% { filter: none; } 92% { filter: brightness(1.8); } }
.corps.sur-trone .sprite { filter: drop-shadow(0 0 14px rgba(245,158,11,.85)) brightness(.8); }
.corps.sur-trone::after { content: 'INTOUCHABLE'; position: absolute; left: 50%; bottom: 6px; translate: -50% 0; padding: 2px 6px; font: 700 10px var(--mono); letter-spacing: .12em;
  color: var(--ambre-pale); background: rgba(7,10,15,.88); border: 1px solid var(--ambre); }
/* la Tour des Juges : Harnémo à gauche, les trois juges empilés à droite (celui du haut d'abord) */
.ennemis.tour-juges { display: grid; grid-template-columns: auto auto; column-gap: 18px; row-gap: 6px; align-items: center; justify-content: center; }
.ennemis.tour-juges > .combattant.finale-boss { grid-column: 1; grid-row: 1 / span 3; align-self: end; width: 270px; }
.ennemis.tour-juges > .combattant.juge { width: auto; }
.ennemis.tour-juges > .combattant:not(.finale-boss):not(.juge) { grid-row: auto; }
.combattant.juge { grid-column: 2; width: auto; display: grid; grid-template-columns: auto 230px; grid-template-areas: "corps intention" "corps fiche" "corps statuts";
  column-gap: 10px; row-gap: 4px; align-items: center; padding: 2px 6px 2px 16px; text-align: left; border-left: 2px solid #475569; }
.combattant.juge .corps { grid-area: corps; margin: 0; }
.combattant.juge .intention { grid-area: intention; justify-self: start; margin: 0; padding: 3px 10px 3px 6px; gap: 6px; }
.combattant.juge .int-ic { font-size: 20px; }
.combattant.juge .intention b { font-size: 13px; }
.combattant.juge .fiche { grid-area: fiche; padding: 4px 8px; gap: 8px; }
.combattant.juge .armure { width: 22px; height: 22px; margin: 2px; }
.combattant.juge .armure b { font-size: 11px; }
.combattant.juge .pv-txt { font-size: 12px; }
.combattant.juge .statuts { grid-area: statuts; justify-content: flex-start; min-height: 0; margin: 0; }
.combattant.juge .statuts:empty { display: none; }
.combattant.juge .ombre, .combattant.juge .etiquette { display: none; }
.combattant.juge.cible::before { left: 2px; top: 50%; translate: 0 -50%; content: '▶'; animation: none; }
.carte.agent { box-shadow: 0 0 0 2px var(--violet), 0 0 18px rgba(192,132,252,.7); --y: -60px !important; --s: 1.1 !important; }
/* Clairoracle : la carte postale, sans visage (un objet du monde : papier et encre) */
.postale { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; width: min(560px, 100%); min-height: 230px; margin: 18px auto;
  background: #f4ecd8; color: #3b2f20; border-radius: 3px; box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 40px rgba(192,132,252,.15); rotate: -2deg;
  font-family: Georgia, "Times New Roman", serif; }
.postale.entre { animation: postale-arrive .8s var(--ressort) both; }
@keyframes postale-arrive { from { opacity: 0; translate: 0 -40px; rotate: 8deg; } }
.postale-recto { display: flex; align-items: center; justify-content: center; padding: 24px 20px; font-size: 26px; font-style: italic;
  border-right: 1px dashed #b9a98a; background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(59,47,32,.08) 27px 28px); }
.postale-verso { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 16px 16px 22px; }
.timbre { position: absolute; top: 14px; right: 14px; width: 50px; height: 60px; background: linear-gradient(160deg, var(--ambre), var(--ctx-pression) 60%, var(--c-pouvoir));
  outline: 2px dotted #f4ecd8; outline-offset: -5px; box-shadow: 0 0 0 3px #f4ecd8, 0 0 0 4px #b9a98a; }
.tampon { position: absolute; top: 34px; right: 40px; width: 74px; height: 74px; display: grid; place-items: center; border: 2px solid rgba(110,64,201,.6);
  border-radius: 50%; rotate: -18deg; font: 700 9px var(--mono); letter-spacing: .1em; color: rgba(110,64,201,.8);
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(110,64,201,.35) 9px 10px); }
.adresse { display: block; min-height: 18px; border-bottom: 1px solid #b9a98a; font-size: 12px; font-style: italic; }
.ev-visuel .postale { margin: 0 auto; }
.victoire-finale h1 { font-size: clamp(40px, 5.4vw, 72px); }

/* ===== Glisser-déposer des cartes : flèche de visée, carte tenue, ennemis visables ===== */
.main .carte { touch-action: none; -webkit-user-select: none; user-select: none; }
.main .carte.tenue { transition: opacity .2s, box-shadow .2s; cursor: grabbing; }
.main .carte.prete { box-shadow: 0 0 0 2px var(--c), 0 0 26px var(--c); }
.main .carte.visee { border-color: var(--ambre); box-shadow: 0 0 0 2px var(--ambre), 0 0 22px rgba(245,158,11,.65); }
#fleche { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 24; display: none; overflow: visible; }
#fleche.visible { display: block; }
/* des segments carrés, comme des pixels, qui défilent vers la pointe */
#fleche .trait { fill: none; stroke: var(--ambre); stroke-width: 7; stroke-dasharray: 4 10; stroke-linecap: butt;
  filter: drop-shadow(0 0 4px rgba(245,158,11,.75)); animation: fleche-defile .45s linear infinite; }
#fleche .pointe { fill: none; stroke: var(--ambre); stroke-width: 7; stroke-linecap: square; stroke-linejoin: miter; filter: drop-shadow(0 0 4px rgba(245,158,11,.75)); }
#fleche.sur-cible .trait, #fleche.sur-cible .pointe { stroke: #ef4444; filter: drop-shadow(0 0 5px rgba(239,68,68,.85)); }
#fleche .fond, #fleche.sur-cible .fond { stroke: #010409; stroke-width: 11; filter: none; }
#fleche .pointe.fond { stroke-width: 12; }
@keyframes fleche-defile { to { stroke-dashoffset: -14; } }
.combattant.ennemi.visable .corps { filter: drop-shadow(0 0 3px rgba(245,158,11,.9)) drop-shadow(0 0 9px rgba(245,158,11,.55)); }
.combattant.ennemi.survolee .corps { filter: drop-shadow(0 0 10px rgba(239,68,68,.95)) brightness(1.2); }
.combattant.ennemi.survolee .fiche { border-color: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,.5); }
.combattant.ennemi.survolee .nom-combattant { color: var(--rouge); }
body.en-visee .combattant.ennemi:not(.visable) { cursor: not-allowed; }
body.en-visee .combattant.ennemi.visable { cursor: pointer; }

/* ---------- écrans moyens ---------- */
@media (max-width: 1180px) {
  .carte-run { grid-template-columns: minmax(0, 1fr) 300px; }
  .carte-run .legende { display: none; }
  .modeles { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
  .table { grid-template-columns: 190px minmax(0, 1fr) 240px; }
  .orbe { width: 92px; height: 92px; } .orbe b { font-size: 30px; }
  .bouton.fin { font-size: 16px; padding: 12px 14px; }
  .evenement { gap: 28px; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
  /* l'en-tête reste sur une ligne : saison et incident en icône (le nom au survol), barre de PV plus courte */
  .entete { gap: 8px 10px; }
  .ent-id { padding-right: 10px; }
  .entete .saison .lib, .entete .incident-chip .lib, .ent-ext .lbl, .frise .lib { display: none; }
  .ent-pv .barre { width: 84px; }
  /* trois ennemis : la fiche en colonne aussi */
  .ennemis.n3 .fiche { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 8px; }
  .ennemis.n3 .armure { position: absolute; top: -9px; left: -7px; z-index: 1; width: 22px; height: 22px; margin: 0; }
  .ennemis.n3 .armure b { font-size: 11px; }
  .ennemis.n3 .armure.vide { display: none; }
  .ennemis.n3 .fiche .nom-combattant { font-size: 10px; letter-spacing: .04em; }
  .arene:has(.ennemis.n3) { grid-template-columns: minmax(170px, .7fr) minmax(220px, .9fr) minmax(0, 2.3fr); }
  /* la Tour des Juges plus étroite : la revue de PR garde sa largeur */
  .ennemis.tour-juges { column-gap: 12px; }
  .ennemis.tour-juges > .combattant.finale-boss { width: 230px; }
  .combattant.juge { grid-template-columns: auto 200px; }
  .bulle-tete span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* ---------- paliers de hauteur (écrans larges mais bas) : le combat tient sans défilement ---------- */
/* (jusqu'à 920 px de haut : la frise du combat prend sa ligne en bas) */
@media (min-width: 641px) and (max-height: 920px) {
  .entete { margin-bottom: 4px; padding-top: 6px; padding-bottom: 6px; }
  .arene { min-height: 0; padding-top: 0; --k-sprite: .85; }
  .ressources { margin-top: 4px; }
  .contexte { padding: 7px 12px 6px; }
  .jauge { margin: 7px 0 1px; } .jauge i { height: 10px; }
  .ctx-pied { display: none; }
  .main { height: 246px; }
  .table-g, .table-d { padding-bottom: 6px; }
  .etiquette { margin-top: 6px; }
  .corps { margin-top: 6px; }
  .journal li:nth-child(n+3) { display: none; }
}
@media (min-width: 641px) and (max-height: 800px) {
  .options-repos { margin-top: clamp(16px, 6vh, 150px); }
  .option { padding: 20px 18px 16px; gap: 6px; }
  .o-ic { width: 52px; height: 52px; } .o-ic .ms { font-size: 28px; }
  .option h3 { margin-top: 4px; }
  .o-detail { padding: 10px 12px; } .o-detail p { margin-bottom: 8px; }
  .bouton.o-btn { margin-top: 8px; padding: 12px; }
  .arene { --k-sprite: .64; gap: 12px; }
  .statuts { min-height: 20px; margin-top: 4px; }
  .intention { margin-bottom: 4px; padding: 3px 10px 3px 6px; }
  .int-ic { font-size: 26px; }
  .intention b { font-size: 16px; }
  .combattant.ennemi { padding-top: 12px; }
  .bulle { padding: 9px 12px; } .bulle p { margin-top: 6px; font-size: 12.5px; line-height: 1.5; }
  .horloge { padding: 4px 10px; }
  .main { height: 224px; }
  .main .carte { width: 142px; height: 198px; padding: 6px; gap: 4px; }
  .main .carte .texte { font-size: 10.5px; line-height: 1.32; padding: 4px 5px; }
  .main .carte .texte.texte-long { font-size: 9.5px; line-height: 1.28; } .main .carte .texte.texte-tres-long { font-size: 9px; line-height: 1.22; }
  .main .carte .illu .ms { font-size: 26px; }
  .orbe { width: 84px; height: 84px; } .orbe b { font-size: 28px; } .orbe b span { font-size: 18px; }
  .pile .tas { width: 56px; height: 74px; }
  .bouton.fin { font-size: 16px; padding: 11px 14px; }
  .combattant.juge { row-gap: 2px; }
  .journal li:nth-child(n+2) { display: none; }
}
@media (min-width: 641px) and (max-height: 720px) {
  .cote { gap: 10px; } .cote .panneau { padding: 12px 14px; } .cote .recit { margin: 4px 0 2px; font-size: 12px; line-height: 1.5; }
  body[data-ecran="combat"] #app { padding-bottom: 0; }
  .arene { --k-sprite: .5; }
  .etiquette { margin-top: 4px; padding-top: 2px; padding-bottom: 2px; }
  .statuts { min-height: 0; }
  .lettres-or { margin-top: 2px; }
  /* la frise prend sa ligne en bas : la Tour des Juges perd ses étiquettes redondantes, comme sur mobile */
  .statut.trone, .ennemis.tour-juges .finale-boss .etiquette { display: none; }
  .combat > .frise { margin-top: 2px; padding-top: 0; padding-bottom: 0; }
  .combat .fr-piste { height: 24px; } .combat .fr-evt { top: 1px; } .combat .fr-piste::before, .combat .fr-graduations i, .combat .fr-curseur { top: 12px; }
}

/* ---------- mobile : le combat reste jouable à 390 × 844 ---------- */
@media (max-width: 640px) {
  #app { padding: 0 10px 12px; }
  .entete { margin: 0 -10px 6px; padding: 6px 10px; gap: 6px; }
  .ent-id { padding-right: 8px; gap: 6px; }
  .ent-logo { width: 26px; height: 26px; } .ent-logo .ms { font-size: 16px; }
  .ent-txt b { font-size: 12px; } .ent-txt small { font-size: 10px; }
  .ent-pv, .ent-acte { padding: 3px 7px; column-gap: 6px; }
  .ent-pv .barre { width: 52px; }
  .ent-acte small, .ent-ext .lbl, .ent-acte .long, .ent-acte > .ms, .ent-ext:has(.muet) { display: none; }
  .ent-acte .court { display: inline; }
  .ent-acte b { font-size: 10.5px; }
  .saison, .incident-chip, .postale-chip { font-size: 10.5px; padding: 2px 7px; }
  .ent-ext { margin-left: 0; padding: 2px 4px; }
  .ext { width: 24px; height: 24px; } .ext .ms { font-size: 15px; }
  .ent-deck { padding: 5px 8px; font-size: 11px; }
  .ent-son { width: 28px; height: 28px; margin-left: auto; } .ent-son .ms { font-size: 16px; }
  .ent-txt, .entete .lib, .ent-id { display: none; }
  /* la saison et l'incident de l'étage sont sur la frise (la pastille de l'étage en cours) : l'en-tête reste sur une ligne */
  .entete .saison, .entete .incident-chip { display: none; }
  .journal li.vide { display: none; }

  .arene { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); grid-template-areas: "centre centre" "joueur ennemis"; gap: 6px 8px; min-height: 0; padding: 0; }
  .arene::before { left: -10px; right: -10px; }
  .bulle { padding: 7px 10px; } .bulle::after { display: none; }
  .bulle-tete { font-size: 9.5px; padding-bottom: 4px; } .bulle p { margin-top: 5px; font-size: 11.5px; line-height: 1.5; }
  .journal li:first-child { padding: 4px 8px; font-size: 10.5px; }
  .journal li:nth-child(n+2) { display: none; }
  .horloge { padding: 3px 8px; } .horloge b { font-size: 13px; } .horloge small { font-size: 10px; }
  .fiche { padding: 4px 6px; gap: 6px; }
  .armure { width: 22px; height: 22px; margin: 3px; } .armure b { font-size: 11px; }
  .fiche-titre, .fiche .nom-combattant { font-size: 9.5px; letter-spacing: .04em; }
  .pv-txt { font-size: 11px; }
  .fiche-ligne { column-gap: 4px; }
  .pv { height: 8px; margin-top: 3px; }
  .intention { padding: 3px 8px 3px 5px; gap: 4px; margin-bottom: 4px; }
  .int-ic { font-size: 18px; } .intention b { font-size: 14px; }
  .statuts { min-height: 18px; gap: 3px; margin-top: 4px; }
  .statut { font-size: 9px; padding: 1px 5px; } .statut .ms { font-size: 11px; }
  .corps { margin-top: 4px; }
  .combattant.joueur .sprite { height: 96px; width: auto; }
  .ennemis .sprite { height: 80px; width: auto; }
  .ennemis.n2 .sprite { height: 58px; } .ennemis.n3 .sprite, .ennemis.n4 .sprite, .ennemis.n5 .sprite { height: 44px; }
  .ombre { width: 70px; height: 10px; }
  .etiquette { margin-top: 4px; padding: 2px 6px; font-size: 9px; letter-spacing: .08em; }
  .etiquette small { display: none; }
  .ennemis { gap: 6px; flex-wrap: nowrap; }
  .combattant.ennemi, .ennemis.n2 .combattant.ennemi { width: auto; flex: 1 1 0; min-width: 0; padding-top: 12px; }
  .ennemis.n3 .combattant.ennemi, .ennemis.n4 .combattant.ennemi, .ennemis.n5 .combattant.ennemi { width: auto; }
  .ennemis.n2 .fiche, .ennemis.n3 .fiche, .ennemis.n4 .fiche, .ennemis.n5 .fiche { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 5px; }
  .ennemis .armure { width: 18px; height: 18px; }
  .ennemis.n2 .armure, .ennemis.n3 .armure, .ennemis.n4 .armure, .ennemis.n5 .armure { position: absolute; top: -8px; left: -6px; z-index: 1; margin: 0; }
  .ennemis.n2 .armure.vide, .ennemis.n3 .armure.vide, .ennemis.n4 .armure.vide, .ennemis.n5 .armure.vide { display: none; }
  .ennemis .armure b { font-size: 9.5px; }
  .ennemis.n3 .pv-txt, .ennemis.n4 .pv-txt, .ennemis.n5 .pv-txt { font-size: 9.5px; }
  .ennemis.n3 .fiche .nom-combattant { font-size: 8.5px; letter-spacing: 0; }
  .fiche-titre { font-size: 0; } .fiche-titre::before { content: 'PV'; font-size: 9.5px; }
  .ennemis.n3 .etiquette, .ennemis.n4 .etiquette, .ennemis.n5 .etiquette { padding: 2px 3px; font-size: 8px; letter-spacing: 0; }
  .ennemis.n3 .etiquette .et-txt, .ennemis.n4 .etiquette .et-txt, .ennemis.n5 .etiquette .et-txt { -webkit-line-clamp: 3; }
  .ennemis.n4 .etiquette .rang, .ennemis.n5 .etiquette .rang { display: none; }
  /* quatre ennemis et plus : la colonne du junior se resserre, l'intention garde son chiffre et perd son icône */
  .arene:has(.ennemis.n3) { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); }
  .arene:has(.ennemis.n4), .arene:has(.ennemis.n5) { grid-template-columns: 78px minmax(0, 1fr); gap: 6px 4px; }
  .arene:has(.ennemis.n4) .combattant.joueur .sprite, .arene:has(.ennemis.n5) .combattant.joueur .sprite { height: 72px; }
  .arene:has(.ennemis.n4) .combattant.joueur .fiche, .arene:has(.ennemis.n5) .combattant.joueur .fiche { padding: 4px; gap: 4px; }
  .arene:has(.ennemis.n4) .combattant.joueur .armure, .arene:has(.ennemis.n5) .combattant.joueur .armure { width: 16px; height: 16px; margin: 2px; }
  .arene:has(.ennemis.n4) .combattant.joueur .armure.vide, .arene:has(.ennemis.n5) .combattant.joueur .armure.vide { display: none; }
  .arene:has(.ennemis.n4) .combattant.joueur .pv-txt, .arene:has(.ennemis.n5) .combattant.joueur .pv-txt { font-size: 9.5px; letter-spacing: -.03em; }
  .arene:has(.ennemis.n4) .combattant.joueur .etiquette small, .arene:has(.ennemis.n5) .combattant.joueur .etiquette small { display: none; }
  .ennemis.n4, .ennemis.n5 { gap: 3px; }
  .ennemis.n3 .int-ic, .ennemis.n4 .int-ic, .ennemis.n5 .int-ic { font-size: 15px; }
  .ennemis.n3 .intention, .ennemis.n4 .intention, .ennemis.n5 .intention { justify-content: center; padding: 3px 2px; }
  .ennemis.n3 .intention b, .ennemis.n4 .intention b, .ennemis.n5 .intention b { font-size: 13px; letter-spacing: -.02em; }
  .ennemis.n4 .fiche .nom-combattant, .ennemis.n5 .fiche .nom-combattant { font-size: 8px; letter-spacing: 0; }
  .ennemis.n4 .pv-txt, .ennemis.n5 .pv-txt { font-size: 8px; letter-spacing: -.05em; }
  .ennemis.n4 .fiche, .ennemis.n5 .fiche { padding: 4px 3px; }
  .ennemis.n4 .intention, .ennemis.n5 .intention { padding: 3px 1px; }
  .ressources { margin-top: 6px; }
  .contexte { padding: 6px 8px 5px; }
  .ctx-tete { gap: 4px 6px; } .ctx-tete b { font-size: 11px; } .ctx-ic { font-size: 16px; }
  .ctx-slots { padding: 1px 6px; font-size: 10.5px; } .ctx-slots small { display: none; }
  .ctx-seuil { font-size: 9.5px; padding: 1px 6px; } .ctx-seuil .ms { font-size: 12px; }
  .jauge { gap: 2px; margin: 5px 0 0; padding: 2px; } .jauge i { height: 8px; }
  .ctx-pied { display: none; }
  /* la main prend toute la hauteur qui reste sous la relique ; les cartes s'y ajustent (layoutMain) */
  body[data-ecran="combat"] #app { height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 8px; }
  .combat > .arene { flex: none; }
  .combat > .table { flex: 1 1 auto; min-height: 0; }
  .table { grid-template-columns: auto 1fr; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "main main" "g d"; gap: 0 8px; margin-top: 0; }
  .main { grid-area: main; height: auto; min-height: 0; align-self: stretch; }
  .table-g { grid-area: g; padding: 0; gap: 10px; align-items: center; }
  .table-d { grid-area: d; padding: 0; gap: 10px; align-items: center; }
  .tokens { flex-direction: row; gap: 6px; }
  .orbe { width: 58px; height: 58px; border-width: 2px; } .orbe b { font-size: 20px; } .orbe b span { font-size: 13px; } .orbe small { font-size: 7.5px; }
  .pips, .tok-note { display: none; }
  .pile { gap: 3px; } .pile .tas { width: 40px; height: 52px; gap: 2px; } .pile .tas .ms { font-size: 15px; } .pile .tas b { font-size: 14px; } .pile small { font-size: 8.5px; letter-spacing: .08em; }
  .fin-bloc small { display: none; }
  .bouton.fin { font-size: 13px; padding: 10px 10px; letter-spacing: .06em; } .bouton.fin .ms { font-size: 17px; }
  .main .carte { width: 118px; height: 178px; padding: 5px; gap: 3px; }
  .main .carte .illu { display: none; }
  .main .carte .cout { width: 21px; height: 21px; font-size: 12.5px; }
  .main .carte .ctx { font-size: 8.5px; padding: 0 4px; }
  .main .carte .nom { font-size: 11px; }
  .main .carte .nom.nom-long { font-size: 9.5px; } .main .carte .nom.nom-tres-long { font-size: 8px; line-height: 1.1; }
  .main .carte .texte { flex: 1 1 auto; font-size: 9.5px; line-height: 1.3; padding: 3px 4px; overflow: hidden; }
  .main .carte .texte.texte-long { font-size: 8.5px; line-height: 1.24; } .main .carte .texte.texte-tres-long { font-size: 8px; line-height: 1.2; padding: 2px 3px; }
  .main .carte .pied { font-size: 8px; }
  .banniere { font-size: 17px; padding: 12px 34px; } .banniere.boss { font-size: 19px; }
  .flottant { font-size: 17px; }

  .titre-grille { grid-template-columns: 1fr; gap: 20px; }
  .accueil h1 { font-size: 40px; }
  .raccourcis { text-align: left; }
  .modeles { grid-template-columns: 1fr; }
  /* la carte en une colonne : la page entre l'en-tête et la frise défile (la grille, puis le deck en dessous) */
  .carte-run { grid-template-columns: 1fr; align-items: start; }
  #app:has(> .entete) > main.carte-run { overflow-y: auto; }
  .carte-run > *, .arbre, .carte-defile { overflow: visible; min-height: auto; }
  .carte-defile { flex: none; }
  .arbre { padding: 12px 8px; }
  .arbre h2 { font-size: 20px; margin-bottom: 10px; }
  .carte-routes { --pas: 66px; margin-top: 10px; }
  .num-etage { display: none; }
  .noeud { width: 44px; height: 44px; } .noeud .ic { width: 38px; height: 38px; } .noeud .ic .ms { font-size: 20px; }
  .noeud.n-boss { width: 70px; height: 64px; } .n-boss .ic { width: 54px; height: 54px; }
  .frise { gap: 6px; padding: 3px 6px 1px; }
  .fr-horloge small, .frise .lib, .fr-encours > small { display: none; }
  /* la pastille de l'étage en cours porte déjà son nom : le rappel « cet étage » laisse sa place à la piste */
  .fr-encours, .fr-horloge { display: none; }
  .fr-piste { margin-right: 6px; }
  .fr-nom { font-size: 9px; line-height: 1.05; white-space: normal; overflow-wrap: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .fr-nom .nom-long { display: none; } .fr-nom .nom-court { display: inline; }
  .fr-horloge .ms { font-size: 15px; } .fr-horloge b { font-size: 12px; }
  .fr-piste { height: 26px; }
  .frise .saison, .frise .incident-chip { padding: 2px 5px; }
  .evenement { grid-template-columns: 1fr; gap: 16px; min-height: 0; padding: 4px 0 16px; }
  .ev-scene { height: 220px; } .ev-glyphe { font-size: 160px; }
  .ev-panneau { padding: 16px; }
  .option { width: 100%; }
  .choix-cartes.grandes { gap: 12px; }
  .choix-cartes .carte, .choix-cartes.grandes .carte { width: calc(50% - 8px); height: auto; min-height: 200px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .fin-panneau { padding: 18px 14px; }
  .duo { gap: 16px; } .duo .sprite { width: 96px; height: auto; }
  .ennemis.tour-juges { column-gap: 6px; }
  .ennemis.tour-juges > .combattant.finale-boss { width: 110px; }
  .combattant.juge { grid-template-columns: auto minmax(0, 120px); padding-left: 10px; }
  .combattant.juge .sprite { height: 36px; }
  .corps.sur-trone + .ombre, .statut.trone, .ennemis.tour-juges .finale-boss .etiquette, .combat:has(.horloge) .journal { display: none; }
  .lettres-or { font-size: 9px; letter-spacing: 1px; }
}
/* ---------- hors combat sur mobile : récompense, pause café, événement tiennent dans la hauteur ---------- */
@media (max-width: 640px) {
  .recompense, .retrait, .repos { padding-top: 6px; }
  .recompense .sur-titre, .retrait .sur-titre { font-size: 11px; letter-spacing: .12em; }
  .recompense h2, .retrait h2 { margin: 4px 0 2px; font-size: 22px; }
  .encart.relique { gap: 10px; margin: 8px 0; padding: 8px 10px; }
  .relique-ic { width: 36px; height: 36px; } .encart .relique-ic .ms { font-size: 20px; }
  .encart.relique p { font-size: 11.5px; line-height: 1.35; }
  .encart.relique .bouton { padding: 8px 10px; font-size: 11px; }
  .bandeau { margin: 8px 0 6px; padding-bottom: 4px; gap: 6px; font-size: 10px; letter-spacing: .06em; text-align: left; }
  .bandeau .ms { font-size: 16px; }
  .choix-cartes.grandes { flex-wrap: nowrap; gap: 8px; margin: 6px 0 4px; }
  .choix-cartes.grandes .carte, .choix-cartes .carte.cliquable { flex: 1 1 0; width: auto; min-width: 0; height: 200px; min-height: 0; padding: 5px; gap: 3px; }
  .choix-cartes.grandes:has(> .carte:nth-child(4)) { flex-wrap: wrap; }
  .choix-cartes.grandes:has(> .carte:nth-child(4)) .carte { flex: 1 1 calc(50% - 4px); height: 150px; }
  .choix-cartes.grandes .carte .illu { display: none; }
  .choix-cartes.grandes .carte .nom { font-size: 11px; }
  .choix-cartes.grandes .carte .nom.nom-long { font-size: 9.5px; } .choix-cartes.grandes .carte .nom.nom-tres-long { font-size: 8.5px; }
  .choix-cartes.grandes .carte .cout { width: 21px; height: 21px; font-size: 12.5px; }
  .choix-cartes.grandes .carte .texte { flex: 1 1 auto; font-size: 9.5px; line-height: 1.3; padding: 3px 4px; }
  .choix-cartes.grandes .carte .texte.texte-long { font-size: 8.5px; line-height: 1.25; } .choix-cartes.grandes .carte .texte.texte-tres-long { font-size: 8px; line-height: 1.2; }
  .choix-cartes.grandes .carte .pied { font-size: 8px; }
  .recompense .passer { margin-top: 2px; padding: 5px 0; font-size: 11.5px; }
  .pastille { padding: 4px 10px; font-size: 10px; }
  .repos h2 { margin: 6px 0 2px; font-size: 26px; }
  .repos .recit { margin: 0; font-size: 12px; }
  .options-repos { gap: 18px; margin-top: 18px; }
  .option { width: 100%; padding: 16px 14px 12px; gap: 4px; }
  .o-tete, .o-detail p { display: none; }
  .option h3 { margin: 0; font-size: 20px; }
  .o-detail { margin-top: 2px; padding: 8px 10px; }
  .o-detail dl { padding-top: 0; border-top: 0; gap: 4px 10px; }
  .bouton.o-btn { margin-top: 6px; padding: 10px; }
  .options-repos { gap: 12px; margin-top: 12px; }
  .options-repos .option { flex: none; max-width: none; padding: 12px 12px 8px; }
  .options-repos .o-detail { padding: 6px 10px; }
  .options-repos .bouton.o-btn { margin-top: 4px; padding: 9px; }
  .o-sous { display: none; }
  .option h3 { font-size: 18px; }
  .o-badge { top: -10px; font-size: 10px; padding: 2px 8px; }
  .choix-boite { max-height: 92vh; padding: 0 10px; }
  .choix-boite .modale-tete { margin: 0 -10px; padding: 10px; }
  .choix-boite h3 { font-size: 15px; }
  .choix-aide { margin: 8px 0 2px; font-size: 12px; }
  .choix-liste { gap: 8px; }
  .choix-liste .carte, .choix-liste .carte.cliquable { flex: 0 0 calc(50% - 4px); width: auto; height: 216px; min-height: 0; padding: 6px; gap: 4px; }
  .modale-choix, .apercu-merge { padding: 8px; }
  .choix-liste .carte .illu .ms { font-size: 22px; }
  .choix-actions { margin: 0 -10px; padding: 10px; }
  .modele-choix { width: calc(50% - 6px); padding: 10px; }
  .modele-choix .mod-sprite { display: none; } .modele-choix b { padding-right: 0; font-size: 14px; }
  .merge-boite { padding: 0 10px 12px; }
  .merge-boite .modale-tete { margin: 0 -10px; padding: 10px; } .merge-boite h3 { font-size: 15px; }
  .merge-duo { gap: 0; margin: 10px 0 6px; }
  .merge-duo .carte { width: 146px; height: 216px; padding: 6px; }
  .merge-duo .carte .illu { display: none; }
  .merge-fleche { width: 14px; margin: 0 -3px; font-size: 20px; z-index: 1; }
  .ev-scene { height: 130px; } .ev-glyphe { font-size: 110px; }
  .ev-sprite .sprite, .ev-sprite canvas, .ev-sprite img { height: 84px; width: auto; }
  .ev-tag { top: 8px; left: 8px; font-size: 10px; } .ev-pied { display: none; }
  .evenement { gap: 10px; padding-bottom: 8px; }
  .ev-panneau { padding: 12px 14px; border-radius: 10px; }
  .ev-titre { gap: 8px; padding-bottom: 8px; } .ev-titre h2 { font-size: 17px; }
  .ev-badge { padding: 3px 7px; font-size: 10px; }
  .ev-panneau .recit { margin-top: 8px; font-size: 12px; line-height: 1.5; }
  .ev-choix { gap: 8px; margin-top: 10px; }
  .choix-ev { gap: 10px; padding: 10px 12px; }
  .choix-ev .n { width: 24px; height: 24px; }
  .choix-corps b { font-size: 13.5px; } .choix-corps small { margin-top: 4px; padding: 2px 7px; font-size: 11px; }
  .choix-ev .chev { font-size: 22px; }
  .evenement .encart { margin: 10px 0 8px; font-size: 12.5px; }
  .postale { grid-template-columns: 1.3fr 1fr; min-height: 0; margin: 4px auto; rotate: -1deg; }
  .postale-recto { padding: 14px 10px; font-size: 18px; border-right: 1px dashed #b9a98a; border-bottom: 0; }
  .postale-verso { gap: 6px; padding: 54px 8px 10px; }
  .timbre { top: 8px; right: 8px; width: 32px; height: 40px; }
  .tampon { top: 16px; right: 26px; width: 48px; height: 48px; font-size: 7px; }
  .adresse { min-height: 14px; font-size: 9.5px; }
}
/* téléphones étroits : l'en-tête tient sur une ligne même avec des PV à trois chiffres */
@media (max-width: 400px) {
  .entete { gap: 4px; }
  .entete { padding-left: 8px; padding-right: 8px; }
  .ent-pv .barre { width: 40px; }
  .ent-pv, .ent-acte { padding: 3px 5px; column-gap: 4px; }
  .ent-acte b { letter-spacing: .02em; }
  /* l'écran titre : le grand titre tient dans 360 px (il débordait de 9 px) */
  .titre-grille > * { min-width: 0; }
  .accueil h1 { font-size: 40px; }
  .ent-deck { padding: 4px 6px; gap: 4px; }
  /* le bouton son et le drapeau d'abandon : un peu plus serrés, l'en-tête garde sa ligne */
  .ent-son { width: 24px; height: 26px; }
}
/* petits téléphones (360 × 740) : la frise du combat se fait plus fine, KISS · YAGNI (rappelé sur les cartes) s'efface */
@media (max-width: 640px) and (max-height: 760px) {
  .combat > .frise { padding-top: 0; padding-bottom: 0; margin-top: 2px; }
  .combat .fr-piste { height: 22px; } .combat .fr-evt { top: 1px; } .combat .fr-pt { width: 20px; height: 20px; } .combat .fr-pt .ms { font-size: 12px; }
  .combat .fr-piste::before, .combat .fr-graduations i, .combat .fr-curseur { top: 11px; }
  .ennemis.tour-juges .lettres-or { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .05s !important; }
  #fleche .trait { animation: none; }
}

/* ---------- réglages : une modale étroite, deux curseurs tactiles (44 px de haut), tout couper ---------- */
.reglages-boite { width: min(540px, 100%); }
.reglage { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.reglage label { display: flex; justify-content: space-between; align-items: baseline; font: 600 15px var(--titre); color: var(--texte); }
.reglage output { font: 600 13px var(--mono); color: var(--ambre-clair); }
.reglage input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--ambre); cursor: pointer; }
.reglages-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; }
.reglages-etat { color: var(--doux-clair); font-size: 12px; }

/* Les noms de cartes cités dans un texte (js/liens.js) : la couleur suit le type de la carte, et la bulle montre la
   carte en grand (même rendu que la main, zoomée). La bulle ne capte pas la souris, sauf quand elle porte un texte. */
.kw { color: var(--kw, #e2e8f0); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--kw, #e2e8f0) 70%, transparent); text-underline-offset: 3px; cursor: help; }
.kw[data-t="attaque"] { --kw: #f87171; }
.kw[data-t="defense"] { --kw: #93c5fd; }
.kw[data-t="competence"] { --kw: #6ee7b7; }
.kw[data-t="pouvoir"] { --kw: #d8b4fe; }
.kw[data-t="statut"] { --kw: #fda4af; text-decoration-style: dashed; } /* la couleur des cartes de statut, comme leur nom */
#toast .kw { pointer-events: auto; }
#infobulle, #infobulle-texte { position: fixed; left: 0; top: 0; z-index: 70; display: none; }
#infobulle { pointer-events: none; }
#infobulle.visible, #infobulle-texte.visible { display: block; animation: fondu .12s both; }
#infobulle .infobulle-carte { zoom: 1.3; }
#infobulle-texte { pointer-events: auto; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px; background: rgba(12,16,24,.97);
  border: 1px solid #2c3d55; border-left: 3px solid var(--cyan); box-shadow: var(--ombre-dure); }
#infobulle-texte p { margin: 0; font: 400 13px/1.55 var(--mono); color: var(--texte); }