/* Combat spirituel : le plein écran de jeu (commandes, scène, jauge, dock des anges, encens et bouclier), les fenêtres de réglages et d'aide,
   puis la salle de préparation, la progression et le bilan (même identité : jetons --lb-*, voir la fin du fichier).
   Principe : la scène ne défile jamais (la page est verrouillée pendant la partie), les fenêtres et le dock défilent si leur contenu déborde. */

body.cb-playing { overflow: hidden; overscroll-behavior: none; }

.cb-stage {
  --ui: 1;
  --cb-gold: var(--lb-gold, #e7b24a);
  --cb-ink: #f4f7f2;
  position: fixed; inset: 0; z-index: 70;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: radial-gradient(130% 90% at 50% 0%, #17392d 0%, #0b1f18 52%, #07130f 100%);
  color: var(--cb-ink);
  font-size: calc(1rem * var(--ui));
  overscroll-behavior: contain;
}
.cb-stage[hidden] { display: none; }

/* ----- Barre de commandes ----- */
.cb-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(4, 14, 10, .78); border-bottom: 1px solid rgba(231, 178, 74, .3); }
.cb-bar-gap { flex: 1 1 auto; min-width: 4px; }
.cb-ibtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: none; min-width: 44px; min-height: 44px; padding: 0 9px;
  border: 1.5px solid rgba(244, 247, 242, .3); border-radius: var(--lb-r, 14px); background: rgba(255, 255, 255, .06);
  color: var(--cb-ink); font: 700 .8125rem/1 var(--font-body); text-decoration: none; cursor: pointer;
}
.cb-ibtn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cb-ibtn:hover { background: rgba(255, 255, 255, .15); }
.cb-ibtn:focus-visible, .cb-power:focus-visible, .cb-info:focus-visible, .cb-angel:focus-visible, .cb-stage canvas:focus-visible { outline: 3px solid var(--cb-gold); outline-offset: 2px; }
.cb-ibtn[aria-pressed="true"] { background: rgba(231, 178, 74, .22); border-color: var(--cb-gold); }
.cb-detente { flex: 0 1 auto; min-width: 44px; overflow: hidden; border-color: rgba(231, 178, 74, .6); }
.cb-quit:hover { background: rgba(214, 80, 66, .35); border-color: #ff9a8a; }
.cb-ibtn .i-play, .cb-ibtn .i-off { display: none; }
#cbPause[aria-pressed="true"] .i-play, #cbSound[aria-pressed="false"] .i-off { display: block; }
#cbPause[aria-pressed="true"] .i-pause, #cbSound[aria-pressed="false"] .i-on { display: none; }
/* Les libellés restent lisibles par les lecteurs d'écran même quand la place manque. */
.cb-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Le lien « Espace détente » garde toujours son nom ; sur petit écran, Aide et Recommencer passent dans la fenêtre de pause. */
.cb-detente .cb-lbl { position: static; width: auto; height: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; clip-path: none; }
@media (max-width: 349px) { .cb-detente .cb-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (max-width: 559px) { #cbHelpBtn, #cbRestart { display: none; } }
@media (min-width: 400px) { .cb-ibtn { min-width: 44px; padding: 0 11px; } }
@media (min-width: 860px) { .cb-lbl { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } .cb-bar { gap: 8px; padding: 8px 14px; } }

/* ----- Scène et dock ----- */
.cb-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.cb-stage[data-dock="side"] .cb-body { grid-template-columns: minmax(0, 1fr) clamp(240px, 23vw, 310px); grid-template-rows: minmax(0, 1fr); }
.cb-arena { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 6px; }
.cb-box { position: relative; overflow: hidden; border-radius: 14px; background: #0b1830; box-shadow: 0 0 0 1px rgba(231, 178, 74, .4), 0 14px 44px rgba(0, 0, 0, .5); transition: box-shadow .12s; }
/* Salves trop rapprochées (file pleine) : un liseré ambré très discret, fixe tant que les touchers sont refusés, sans texte ni clignotement. */
.cb-box.is-busy { box-shadow: 0 0 0 1px rgba(231, 178, 74, .4), 0 0 0 3px rgba(255, 179, 107, .36), 0 14px 44px rgba(0, 0, 0, .5); }
.cb-box canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

/* Informations de partie : une bande tout en haut de la scène, au-dessus des anges. Le moteur leur laisse cette place (api/lib/combat-defaults.mjs : world.angelY et world.heavenY) et la page l'y garde (legion-page.js : fitBand).
   Texte clair sur fond sombre : lisible sur les trois décors, même sur un ciel très clair. Les tailles suivent celles de la scène (--cb-k : largeur de la scène sur celle du monde, écrite par la page). */
.cb-hud { position: absolute; inset: 0; pointer-events: none; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .65); }
/* La scène n'est pas inversée en arabe (personnes, anges, renfort à droite) : la bande et la jauge gardent leur place, de gauche à droite ; les textes se lisent toujours de droite à gauche. */
.cb-hud { direction: ltr; }
:root[dir="rtl"] .cb-hud-stats > span, :root[dir="rtl"] .cb-gt-name, :root[dir="rtl"] .cb-gt-val, :root[dir="rtl"] .cb-hint { direction: rtl; }
.cb-hud-bar { position: absolute; inset: 0 0 auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: .1em .5em; padding: .2em .5em .25em; font-size: clamp(8px, calc(var(--cb-k, 1) * 10.5px), 13px); line-height: 1.25; color: #fff; background: rgba(4, 14, 10, .8); border-bottom: 1px solid rgba(231, 178, 74, .4); }
.cb-hud-stats { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: .1em .3em; min-width: 0; }
.cb-hud-stats > span { min-width: 0; max-width: 100%; padding: 0 .45em; border-radius: 999px; background: rgba(255, 255, 255, .12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-hud .cb-score { font-size: 1.15em; }
.cb-hud .cb-jesus { color: #ffe9a8; }
.cb-hud .cb-theme { color: #cfe9ff; }
.cb-hud .cb-theme[hidden] { display: none; }
.cb-hud .cb-state::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-inline-end: .5em; border-radius: 50%; background: #7ee0a8; }
.cb-stage[data-state="paused"] .cb-state::before { background: var(--cb-gold); }
.cb-stage[data-state="over"] .cb-state::before { background: #c9ccd2; }
/* La jauge dit son nom et son niveau sur la deuxième ligne de la bande ; le nom se raccourcit (…) avant le niveau si la place manque. */
.cb-gauge-text { display: flex; flex: 1 0 100%; align-items: baseline; gap: .4em; min-width: 0; margin: 0; padding: 0 .45em; color: #fff; }
.cb-gt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-gt-val { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; color: #ffe9a8; }
/* Panorama : une seule ligne, le score et les compteurs à gauche, la jauge à droite ; la place est large, les textes un peu plus grands. */
.cb-stage[data-layout="wide"] .cb-hud-bar { font-size: clamp(8px, calc(var(--cb-k, 1) * 12.5px), 16px); }
.cb-stage[data-layout="wide"] .cb-hud-stats { flex: 0 1 auto; }
.cb-stage[data-layout="wide"] .cb-gauge-text { flex: 0 1 auto; margin-inline-start: auto; }

/* La jauge de puissance : un filet vertical au bord gauche de la scène, sous les anges et leurs noms, aux couleurs de l'étape (huit pixels en panorama, sept en portrait : moitié moins qu'avant) */
.cb-gauge { position: absolute; left: 5px; top: 25%; bottom: 56px; width: 7px; border-radius: 6px; overflow: hidden; direction: ltr; background: rgba(4, 14, 10, .62); border: 1px solid rgba(255, 244, 214, .7); pointer-events: none; }
.cb-stage[data-layout="wide"] .cb-gauge { width: 8px; }
.cb-gauge-fill { position: absolute; inset: 0; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .18s linear; background: linear-gradient(0deg, #e9e3d8, #c3c9d3); }
.cb-gauge[data-stage="huile"] .cb-gauge-fill { background: linear-gradient(0deg, #c98a1c, #ffd96a); }
.cb-gauge[data-stage="puissance"] .cb-gauge-fill { background: linear-gradient(0deg, #ffd36a, #ffffff); }
.cb-gauge-fill::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .5) 14px 17px); background-size: 100% 34px; animation: cbRise 2.4s linear infinite; opacity: .55; }
.cb-gauge[data-stage="huile"] .cb-gauge-fill::after { animation-duration: 3.6s; opacity: .35; }
.cb-gauge-ticks i { position: absolute; inset-inline: 0; height: 2px; background: rgba(255, 244, 214, .9); }
.cb-gauge.is-full { animation: cbGaugeFull 2s ease-in-out infinite alternate; }
/* Jauge brisée par Satan : le filet se fissure et des morceaux tombent (sans flash, en moins d'une seconde), puis il disparaît jusqu'au retour de la jauge, qui revient vide avec un court fondu.
   La page tient data-broken (la brisure commence), data-gone (le filet a disparu : visibility, sans animation, donc aussi en mouvement réduit) et data-back (le fondu du retour). */
.cb-gauge::after { content: ""; position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(72deg, transparent 0 17px, rgba(255, 255, 255, .95) 17px 18.5px, transparent 18.5px 36px); }
.cb-gauge[data-broken="1"] { animation: cbGaugeBreak .85s ease-in forwards; }
.cb-gauge[data-broken="1"]::after { animation: cbGaugeCracks .85s linear forwards; }
.cb-gauge[data-gone="1"] { visibility: hidden; opacity: 0; animation: none; }
.cb-gauge[data-back="1"] { animation: cbGaugeBack .5s ease-out; }
.cb-gauge-shards { position: absolute; left: 5px; top: 25%; bottom: 56px; width: 7px; pointer-events: none; direction: ltr; }
.cb-stage[data-layout="wide"] .cb-gauge-shards { width: 8px; }
.cb-gauge-shards i { position: absolute; left: 0; top: var(--y); width: 100%; height: var(--h); opacity: 0; border: 1px solid rgba(255, 244, 214, .85); border-radius: 2px; background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(190, 200, 215, .5)); }
.cb-gauge-shards[data-on="1"] i { animation: cbShard .85s cubic-bezier(.4, .05, .8, .6) var(--d) forwards; }
.cb-gauge-shards[data-on="0"] { display: none; }
.cb-gauge-text.is-broken .cb-gt-name, .cb-gauge-text.is-broken .cb-gt-val { color: #ffb3a8; }
/* Fenêtre de protection après une reconstruction : une pastille « n s » à côté du nom de la jauge, un liseré doré sur le filet ; avec Satan sur le terrain, les dernières secondes ajoutent un clignotement
   (jamais plus d'une fois par seconde) et la bande le dit en mots. Sans animation (effets coupés, mouvement réduit, flashs limités), le liseré ambré reste fixe. */
.cb-guard { flex: none; display: inline-grid; place-items: center; min-width: 2.4em; padding: 0 .5em; border-radius: 999px; background: rgba(255, 233, 168, .2); box-shadow: inset 0 0 0 1px rgba(255, 233, 168, .75); color: #ffe9a8; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-guard[data-risk="1"] { background: rgba(255, 179, 107, .26); box-shadow: inset 0 0 0 1px #ffb36b; color: #ffe0c2; }
.cb-gauge[data-guard="1"] { box-shadow: 0 0 0 2px rgba(255, 233, 168, .6); }
.cb-gauge[data-blink="1"] { box-shadow: 0 0 0 3px #ffb36b; animation: cbGuardBlink 1s ease-in-out infinite alternate; }
@keyframes cbGuardBlink { from { opacity: 1; } to { opacity: .5; } }
@keyframes cbGaugeBreak { 0%, 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cbGaugeCracks { 0% { opacity: 0; } 10%, 60% { opacity: .9; } 100% { opacity: 0; } }
@keyframes cbGaugeBack { from { opacity: 0; } to { opacity: 1; } }
@keyframes cbShard { 0%, 12% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes cbRise { from { background-position: 0 0; } to { background-position: 0 -34px; } }
@keyframes cbGaugeFull { from { box-shadow: 0 0 0 0 rgba(255, 233, 160, .0); } to { box-shadow: 0 0 10px 2px rgba(255, 233, 160, .85); } }

.cb-banner { position: absolute; inset-inline: 12px; bottom: 10px; margin: 0 auto; width: fit-content; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 12px; background: rgba(4, 14, 10, .86); border: 1px solid rgba(231, 178, 74, .45); color: #fff; font: 600 .8125rem/1.35 var(--font-body); text-align: center; pointer-events: none; }
.cb-banner.is-danger { border-color: #ffb36b; }
.cb-banner.is-action { pointer-events: auto; cursor: pointer; min-height: 44px; border-color: var(--cb-gold); box-shadow: 0 0 0 2px rgba(231, 178, 74, .45); }
/* Scène finale (Séraphins) : Jésus relève le renfort tombé, un verset reste affiché cinq secondes dans une carte sobre au-dessus du jeu, qui reste visible ; l'interface de combat est atténuée pendant la scène. */
.cb-verse { position: absolute; inset-inline: 10px; bottom: 15%; margin: 0 auto; width: fit-content; max-width: min(32em, calc(100% - 20px)); padding: .7em 1.1em .8em; border-radius: 14px; background: rgba(4, 14, 10, .84); border: 1px solid rgba(255, 233, 168, .7); color: #fff; text-align: center; text-shadow: none; opacity: 0; pointer-events: none; transition: opacity .5s ease; font: 600 clamp(11px, calc(var(--cb-k, 1) * 13.5px), 18px)/1.45 var(--font-body); }
.cb-verse[data-on="1"] { opacity: 1; }
.cb-verse p { margin: 0; }
.cb-verse-lead { margin-bottom: .35em !important; color: #ffe9a8; font-size: .85em; font-weight: 700; }
.cb-verse-text { font-family: var(--font-display); font-size: 1.15em; font-weight: 600; }
.cb-verse-ref { margin-top: .4em !important; color: #ffe9a8; font-variant: small-caps; letter-spacing: .06em; font-size: .9em; font-weight: 700; }
.cb-verse-lead:empty, .cb-verse-text:empty, .cb-verse-ref:empty { display: none; }
.cb-stage[data-finale="1"] .cb-dock { opacity: .4; pointer-events: none; transition: opacity .4s ease; }
/* Aide discrète : un ange désactivé empêche de blesser une menace (le boss que seul Michel peut blesser). Posée juste sous la bande d'informations (elle en suit la hauteur), dans le ciel : les anges sont alors un peu descendus (un boss est là) et la hauteur de la scène ne change jamais. */
.cb-hint { position: absolute; inset-inline: 10px; top: calc(100% + .5em); margin: 0 auto; width: fit-content; max-width: calc(100% - 20px); padding: .25em .7em; border-radius: 10px; background: rgba(4, 14, 10, .86); border: 1px solid rgba(255, 179, 107, .65); color: #ffe9d4; font: 600 clamp(8.5px, calc(var(--cb-k, 1) * 10.5px), 12px)/1.3 var(--font-body); text-align: center; text-shadow: none; }
.cb-banner[hidden], .cb-hint[hidden], .cb-overlay[hidden] { display: none; }
.cb-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; text-align: center; background: rgba(4, 12, 9, .84); color: #fff; }
.cb-overlay h2 { color: #fff; margin: 0; }
.cb-overlay p { margin: 0; max-width: 30ch; }
.cb-overlay-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Dock : anges, encens, bouclier, menace en cours */
.cb-dock { display: grid; align-content: start; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: rgba(4, 14, 10, .78); border-top: 1px solid rgba(231, 178, 74, .3); }
.cb-stage[data-dock="side"] .cb-dock { border-top: 0; border-inline-start: 1px solid rgba(231, 178, 74, .3); gap: 12px; padding: 12px; }
.cb-loadout { display: none; margin: 0; gap: 6px; flex-wrap: wrap; font: 700 .75rem/1.4 var(--font-body); color: #ffe9a8; }
.cb-loadout span { padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.cb-loadout span[hidden] { display: none; }
.cb-stage[data-dock="side"] .cb-loadout { display: flex; }
.cb-angels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* Les trois anges gardiens sont des boutons à choix unique (vrais boutons, aria-pressed) : un seul ange agit à la fois, celui qu'on choisit ; on peut en changer à tout moment.
   L'ange choisi est en évidence (liseré doré, coche et « Ange choisi » en mots), les deux autres sont sombres et disent « Choisir ». Un point doré (et « Conseillé ») marque l'ange le plus adapté à la menace en cours. */
.cb-angel { appearance: none; -webkit-appearance: none; position: relative; overflow: hidden; display: grid; gap: 1px; justify-items: center; align-content: center; min-height: 54px; padding: 6px 4px; border: 2px solid rgba(255, 255, 255, .25); border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 -3px 0 var(--c); color: #fff; font: 600 .8125rem/1.15 var(--font-body); text-align: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s, opacity .2s; }
.cb-angel:not(:disabled):hover { background: rgba(255, 255, 255, .16); }
.cb-angel:focus-visible { outline: 3px solid var(--cb-gold); outline-offset: 2px; }
.cb-angel small:empty { display: none; }
.cb-onoff { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 1px; padding: 0 6px; white-space: nowrap; border-radius: 999px; background: rgba(255, 255, 255, .14); font-weight: 800; font-size: .65625rem; line-height: 1.5; opacity: 1; }
.cb-angel.is-chosen { border-color: var(--cb-gold); background: rgba(231, 178, 74, .24); box-shadow: inset 0 -3px 0 var(--c), 0 0 0 1px var(--cb-gold); }
.cb-angel.is-chosen .cb-onoff { background: rgba(231, 178, 74, .42); color: #fff; }
.cb-angel.is-chosen .cb-onoff::before { content: "\2713"; font-weight: 800; }
.cb-angel.is-dim { border-color: rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .3); box-shadow: none; }
.cb-angel.is-dim b, .cb-angel.is-dim small.cb-weapon { opacity: .72; }
.cb-angel.is-dim .cb-onoff { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
/* Le boss que seul cet ange peut blesser est là et l'ange est désactivé : un contour ambre fixe (l'aide est écrite sur la scène), jamais un clignotement. */
.cb-angel.is-needed { border-color: #ffb36b; border-width: 3px; padding: 5px 3px; }
.cb-angel.is-needed .cb-onoff { color: #ffe0c2; }
/* Le chiffre du raccourci, à la suite de l'état, n'est montré qu'avec une souris ou un clavier. */
@media (hover: hover) and (pointer: fine) { .cb-angel:not(:disabled) .cb-onoff::after { content: attr(data-key); margin-inline-start: 2px; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); font-size: .625rem; line-height: 1.4; } }
.cb-angel b { font-size: .875rem; }
.cb-angel small { opacity: .8; font-size: .6875rem; }
.cb-angel small.cb-weapon { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-stage[data-dock="side"] .cb-angel small.cb-weapon { white-space: normal; overflow-wrap: anywhere; }
.cb-angel.is-reco::after { content: ""; position: absolute; top: 5px; inset-inline-end: 7px; width: 9px; height: 9px; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 0 2px rgba(4, 14, 10, .7); }
.cb-angel.is-reco .cb-onoff { color: #ffe08a; box-shadow: inset 0 0 0 1px #ffe08a; }
.cb-angel.is-locked { opacity: .45; box-shadow: none; cursor: not-allowed; }
.cb-actions { display: flex; gap: 8px; align-items: stretch; }
.cb-target-row { display: flex; gap: 8px; align-items: stretch; }
.cb-target-row .cb-threat { flex: 1 1 auto; min-width: 0; }
.cb-stage[data-dock="side"] .cb-actions { flex-direction: column; }
/* Icône de l'encens selon l'étape : encensoir, goutte d'huile, étoile de lumière. */
.cb-power svg.i-huile, .cb-power svg.i-puissance { display: none; }
.cb-incense[data-stage="huile"] svg.i-encens, .cb-incense[data-stage="puissance"] svg.i-encens { display: none; }
.cb-incense[data-stage="huile"] svg.i-huile, .cb-incense[data-stage="puissance"] svg.i-puissance { display: block; }
/* Les noms des démons présents (sous Encens et Défense) : une ligne par menace, le vrai nom en caractères nets et, avec une thématique, le problème dans une pastille à côté. Satan et les boss d'abord, mis en valeur
   (trait doré, nom plus gras, étiquette « Boss ») ; la hauteur est réservée d'avance (trois lignes sous la scène, trois à quatre lignes à deux niveaux sur le côté ; la zone grandit au-delà, jusqu'à huit lignes) : la zone ne réarrange rien quand les menaces vont et viennent. */
.cb-names { display: grid; align-content: start; padding: 4px 8px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); color: var(--cb-ink); font-size: .75rem; line-height: 1.2; }
/* La place est réservée dans la liste (et non sur le cadre) : le cadre garde sa hauteur de contenu, la zone grandit quand les menaces sont nombreuses au lieu de déborder sur les anges. */
.cb-names-list { display: grid; gap: 2px; min-height: calc(4.7rem - 10px); margin: 0; padding: 0; list-style: none; }
.cb-stage[data-dock="side"] .cb-names-list { min-height: calc(9.2rem - 10px); }
@media (max-height: 699px) { .cb-stage[data-dock="bottom"] .cb-names-list { min-height: calc(3.2rem - 10px); } }
.cb-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; min-height: 1.4rem; padding-inline-start: 6px; border-inline-start: 3px solid transparent; }
.cb-name-n { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cb-name-p { flex: 0 1 auto; min-width: 0; max-width: 56%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-inline-start: auto; padding: 0 8px; border-radius: 999px; background: rgba(255, 233, 168, .16); box-shadow: inset 0 0 0 1px rgba(255, 233, 168, .5); color: #ffe9a8; font-size: .6875rem; font-weight: 700; line-height: 1.5; }
.cb-name-t { flex: none; padding: 0 6px; border-radius: 6px; background: rgba(255, 138, 118, .22); color: #ffd1c7; font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.cb-name.is-big { border-inline-start-color: #ff8a76; background: rgba(255, 138, 118, .1); }
.cb-name.is-big .cb-name-n { color: #ffe0d8; font-weight: 800; }
.cb-name.is-none, .cb-name.is-more { color: rgba(244, 247, 242, .72); font-weight: 600; }
/* Sur le côté (panneau étroit) et pour un boss (son étiquette est longue) : le nom seul sur sa ligne, puis l'étiquette et le problème dans sa pastille juste dessous ; rien n'est coupé par des points de suspension. */
.cb-stage[data-dock="side"] .cb-name, .cb-name.is-big { flex-wrap: wrap; justify-content: flex-start; gap: 2px 6px; padding-block: 1px; }
.cb-stage[data-dock="side"] .cb-name-n, .cb-name.is-big .cb-name-n { flex: 1 1 100%; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.cb-stage[data-dock="side"] .cb-name-p, .cb-name.is-big .cb-name-p { max-width: 100%; margin-inline-start: 0; white-space: normal; overflow-wrap: anywhere; border-radius: 10px; line-height: 1.35; }
.cb-stage[data-contrast="1"] .cb-names { background: #000; border-color: #fff; }
.cb-stage[data-contrast="1"] .cb-name-p { background: #000; box-shadow: inset 0 0 0 1.5px #fff; color: #fff; }
.cb-stage[data-contrast="1"] .cb-name.is-big { border-inline-start-color: #fff; background: #000; }
/* Dock du bas (téléphone droit) : les défenses sont des icônes seules, leur texte se lit dessous, entre elles et les anges. */
.cb-captions { display: none; }
.cb-stage[data-dock="bottom"] .cb-captions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-block: -2px 0; }
.cb-caption[hidden] { display: none; }
.cb-caption { margin: 0; min-width: 0; text-align: center; color: #fff; font-size: .75rem; line-height: 1.2; overflow-wrap: anywhere; }
.cb-caption small { margin-inline-start: 4px; font-size: .6875rem; opacity: .85; font-variant-numeric: tabular-nums; }
/* Le dock du bas reste bas : les anges perdent leur ligne de rôle (le nom suffit) pour que la scène garde sa hauteur. */
.cb-stage[data-dock="bottom"] .cb-dock { gap: 6px; padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
.cb-stage[data-dock="bottom"] .cb-angel { min-height: 48px; padding: 5px 4px; }
.cb-stage[data-dock="bottom"] .cb-angel b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: .8125rem; line-height: 1.12; text-align: center; }
.cb-stage[data-dock="bottom"] .cb-angel small.cb-weapon { display: none; } /* en bas, l'état (Actif, Inactif) prend la place de l'arme, qui reste dans l'infobulle du bouton et dans la salle de préparation */
.cb-stage[data-dock="bottom"] .cb-angel small.cb-role { display: none; }
.cb-stage[data-dock="bottom"] .cb-power { min-height: 50px; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 8px 8px 11px; }
.cb-stage[data-dock="bottom"] .cb-power svg { width: 30px; height: 30px; }
.cb-stage[data-dock="bottom"] .cb-power-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* Encens et bouclier : toujours visibles, jamais criards. L'état se lit au libellé, à la barre et à la teinte (jamais à la couleur seule). */
.cb-power { --pc: #c9d3dc; position: relative; overflow: hidden; flex: 1 1 0; min-width: 0; min-height: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 6px 8px 9px; border: 2px solid rgba(255, 255, 255, .3); border-radius: 14px; background: rgba(255, 255, 255, .07); color: #fff; text-align: start; font: 600 .8125rem/1.15 var(--font-body); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .25s, border-color .25s, opacity .25s; }
.cb-power svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cb-power-txt { display: grid; gap: 1px; min-width: 0; }
.cb-power-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .8125rem; line-height: 1.12; }
.cb-power-sub { font-size: .6875rem; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cb-power::before { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: rgba(255, 255, 255, .14); }
.cb-power-bar { position: absolute; inset: auto 0 0 0; height: 4px; background: var(--pc); transform-origin: left center; transform: scaleX(0); }
.cb-power:disabled { cursor: default; }
.cb-power:not(:disabled):hover { background: rgba(255, 255, 255, .16); }
.cb-stage[data-state="paused"] .cb-power, .cb-stage[data-state="over"] .cb-power, .cb-stage[data-state="paused"] .cb-angel, .cb-stage[data-state="over"] .cb-angel { opacity: .45; pointer-events: none; }

/* Encens : grisé tant que le premier palier n'est pas atteint (la barre montre la jauge vers le palier suivant), doré et plus vif ensuite selon le niveau. */
.cb-incense { --pc: #e7d9a8; }
.cb-incense[data-state="locked"] { opacity: .62; }
.cb-incense[data-state="ready"] { border-color: var(--cb-gold); background: rgba(231, 178, 74, .2); --pc: var(--cb-gold); animation: cbReady 2.6s ease-in-out infinite alternate; }
.cb-incense[data-state="ready"][data-level="2"] { background: rgba(231, 178, 74, .28); }
.cb-incense[data-state="ready"][data-level="3"] { background: rgba(255, 226, 150, .34); border-color: #ffe9a8; animation-duration: 2.1s; }
/* Jauge brisée : le bouton est inactif, en pointillés, et le dit (« brisée : 9 s ») ; la barre se remplit à mesure que le retour approche. */
.cb-incense[data-state="broken"] { opacity: .78; border-style: dashed; border-color: #ff9a8a; background: rgba(255, 120, 100, .12); --pc: #ff9a8a; }
@keyframes cbReady { from { box-shadow: 0 0 0 0 rgba(255, 226, 150, 0); } to { box-shadow: 0 0 12px 2px rgba(255, 226, 150, .55); } }

/* Bouclier : discret au repos ; dès qu'une riposte est signalée, il se détache (bordure ambrée, lueur lente, décompte) ; actif ou en recharge, il le dit. */
.cb-shield { --pc: #8fe3c2; }
.cb-shield[data-state="ready"] { border-color: rgba(143, 227, 194, .5); }
.cb-shield[data-state="alert"] { border-color: #ffb36b; background: rgba(255, 179, 107, .24); --pc: #ffb36b; animation: cbAlert 1.8s ease-in-out infinite alternate; }
.cb-shield[data-state="active"] { border-color: #8fe3c2; background: rgba(143, 227, 194, .26); --pc: #8fe3c2; }
.cb-shield[data-state="cooldown"] { opacity: .62; --pc: #c9d3dc; }
@keyframes cbAlert { from { box-shadow: 0 0 0 0 rgba(255, 179, 107, 0); } to { box-shadow: 0 0 10px 2px rgba(255, 179, 107, .5); } }
/* La Défense a six modes (bouclier prêt, alerte, bouclier levé, recharge, appel des assistants, reconstruction). L'appel attire l'œil par une pulsation douce, aux couleurs de l'assistant ; pendant la reconstruction,
   un anneau de progression suit le bord du bouton (page : --ring, de 0 à 1), le temps restant remplace l'icône au centre, et le bouton reste prêt à lever le bouclier. */
.cb-power[hidden] { display: none; }
.cb-shield .cb-ring-num, .cb-shield .cb-assist-ico { display: none; }
.cb-shield[data-state="summon"] { border-color: #ffe9a8; background: rgba(255, 233, 168, .22); --pc: #ffe9a8; animation: cbSummon 1.5s ease-in-out infinite alternate; }
.cb-shield[data-state="rebuilding"] { border-color: #ffe9a8; background: rgba(255, 233, 168, .14); --pc: #ffe9a8; }
.cb-shield[data-state="rebuilding"] svg.i-shield { display: none; }
.cb-shield[data-state="rebuilding"] .cb-ring-num { display: grid; place-items: center; width: 24px; min-height: 24px; font: 800 1.125rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: #ffe9a8; }
.cb-stage .cb-power svg.cb-assist-ico { position: absolute; top: 3px; inset-inline-end: 5px; width: 17px; height: 17px; stroke-width: 1.6; color: #ffe9a8; }
.cb-shield[data-state="summon"] .cb-assist-ico, .cb-shield[data-state="rebuilding"] .cb-assist-ico { display: block; }
.cb-stage[data-dock="bottom"] .cb-shield[data-state="rebuilding"] .cb-ring-num { width: 30px; min-height: 30px; font-size: 1.375rem; }
.cb-shield::after { content: ""; position: absolute; inset: 0; padding: 3px; border-radius: inherit; background: conic-gradient(from 0deg, var(--pc) calc(var(--ring, 0) * 1turn), rgba(255, 255, 255, .12) 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; }
.cb-shield[data-state="rebuilding"]::after { opacity: 1; }
@keyframes cbSummon { from { box-shadow: 0 0 0 0 rgba(255, 233, 168, 0); } to { box-shadow: 0 0 12px 3px rgba(255, 233, 168, .6); } }
/* Soin des Séraphins : à côté de la Défense, seulement avec eux ; doré, prêt, en recharge ou sans personne à soigner. */
.cb-heal { --pc: #f6d98a; }
.cb-heal[data-state="ready"] { border-color: rgba(246, 217, 138, .75); background: rgba(246, 217, 138, .14); }
.cb-heal[data-state="cooldown"] { opacity: .62; }
.cb-heal[data-state="full"], .cb-heal[data-state="none"] { opacity: .6; border-style: dashed; }

.cb-threat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #f4f7f2; }
.cb-threat p { margin: 0; }
.cb-threat .muted { color: rgba(244, 247, 242, .7); }
.cb-threat-head { display: flex; gap: 6px 8px; align-items: center; flex-wrap: nowrap; min-width: 0; }
.cb-threat-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 1rem/1.2 var(--font-display); color: #ffe9a8; }
.cb-compat { flex: none; }
.cb-compat { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 700; font-size: .75rem; }
.cb-compat.is-strong { background: #d4f0df; color: #0f4a2c; }
.cb-compat.is-fair { background: #f7ecc8; color: #5a4208; }
.cb-compat.is-poor { background: #f4d6d1; color: #7a1c14; }
.cb-immune { color: #ffb3a8; font-weight: 700; }
.cb-threat .cb-link { color: #ffe9a8; }
.cb-threat .dt-chip { background: rgba(255, 255, 255, .14); color: #fff; }
/* Le dock se limite à l'essentiel (nom, adéquation, bouton « i ») ; le reste se lit dans la fenêtre d'informations. */
.cb-stage[data-dock="bottom"] .cb-extra { display: none; }
.cb-threat-info { display: grid; gap: 10px; }
.cb-threat-info p { margin: 0; }
.cb-threat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-threat-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.cb-threat-info dt { color: var(--ink-2); }
.cb-threat-info dd { margin: 0; font-weight: 600; }

/* ----- Fenêtres de réglages et d'aide ----- */
.cb-set-panel { width: min(580px, 100%); max-height: min(88dvh, 780px); grid-template-rows: auto minmax(0, 1fr) auto; }
.cb-set-body { display: grid; gap: 18px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 4px; }
.cb-set-group { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.cb-set-group > legend, .cb-set-group > h3 { padding: 0; margin: 0 0 4px; font: 600 1.15rem/1.2 var(--font-display); color: var(--forest); }
.cb-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.cb-set-row label { flex: 1; cursor: pointer; }
.cb-set-row small { display: block; color: var(--ink-2); }
.cb-set-row.is-switch > label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; width: 100%; }
.cb-set-row output { min-width: 3.4em; text-align: end; }
.cb-set-row .btn { min-height: 44px; }
.cb-set-row input[type="checkbox"] { width: 24px; height: 24px; flex: none; accent-color: var(--forest); }
.cb-set-row input[type="range"] { width: min(46%, 200px); min-height: 44px; accent-color: var(--forest); }
.cb-set-row select { min-height: 44px; padding: 0 10px; border: 1.5px solid var(--line-2); border-radius: 12px; font: 500 1rem var(--font-body); background: #fff; }
.cb-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.cb-keys dt { white-space: nowrap; }
.cb-keys kbd { display: inline-block; min-width: 1.8em; padding: 1px 7px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: #f4f5f1; font: 700 .8125rem var(--font-body); text-align: center; }
.cb-keys dd { margin: 0; }

/* ----- Réglages de confort appliqués à la scène ----- */
.cb-stage[data-contrast="1"] { --cb-ink: #ffffff; }
.cb-stage[data-contrast="1"] .cb-hud-bar { background: #000; border-bottom: 2px solid #fff; }
.cb-stage[data-contrast="1"] .cb-hud-stats > span { background: #000; box-shadow: inset 0 0 0 1px #fff; }
.cb-stage[data-contrast="1"] .cb-ibtn, .cb-stage[data-contrast="1"] .cb-angel, .cb-stage[data-contrast="1"] .cb-power { border-color: #fff; background: #000; }
.cb-stage[data-contrast="1"] .cb-power[data-state="ready"], .cb-stage[data-contrast="1"] .cb-shield[data-state="alert"] { border-width: 3px; }
.cb-stage[data-contrast="1"] .cb-banner, .cb-stage[data-contrast="1"] .cb-threat, .cb-stage[data-contrast="1"] .cb-hint { background: #000; border-color: #fff; }
.cb-stage[data-contrast="1"] .cb-angel.is-dim b, .cb-stage[data-contrast="1"] .cb-angel.is-dim small.cb-weapon { opacity: 1; }
.cb-stage[data-contrast="1"] .cb-angel.is-chosen { border-width: 3px; padding: 5px 3px; }
.cb-stage[data-contrast="1"] .cb-verse { background: #000; border-color: #fff; }
.cb-stage[data-contrast="1"] .cb-guard { background: #000; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.cb-stage[data-contrast="1"] .cb-gauge { border-color: #fff; }
.cb-stage[data-effects="0"] *, .cb-stage[data-effects="0"] *::after, .cb-stage[data-effects="0"] *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .cb-stage *, .cb-stage *::after { animation: none !important; transition: none !important; } }

/* Bouton « i » de la fiche d'une menace (petit écran) ; sur le côté, le lien complet le remplace. */
.cb-info { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-inline: -6px -8px; margin-block: -10px; border: 0; background: transparent; text-decoration: none; font: 700 .8125rem/1 var(--font-body); color: inherit; cursor: pointer; }
.cb-info::before { content: "i"; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid currentColor; border-radius: 50%; }

/* Téléphone couché (peu de hauteur) : le dock se resserre pour que la menace en cours reste visible sans défiler. */
@media (max-height: 520px) {
  .cb-bar { padding-block: 4px; }
  .cb-stage[data-dock="side"] .cb-dock { gap: 8px; padding: 8px; }
  .cb-stage[data-dock="side"] .cb-angel { min-height: 58px; }
  .cb-stage[data-dock="side"] .cb-actions { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .cb-stage[data-dock="side"] .cb-power { min-height: 52px; padding-inline: 8px; gap: 6px; }
  .cb-stage[data-dock="side"] .cb-power svg { width: 22px; height: 22px; }
  .cb-stage[data-dock="side"] .cb-extra, .cb-stage[data-dock="side"] .cb-loadout { display: none; }
}

/* Les informations que la place manquerait à garder sur deux lignes (très petite scène, textes longs, panorama de téléphone couché) s'effacent une à une, les moins utiles d'abord : la page tient data-hide à jour
   (legion-page.js : fitBand). Le score, la vague et la jauge restent toujours. Une information effacée garde son texte pour les lecteurs d'écran. L'état (« En cours ») ne se voit pas en portrait : la fenêtre de pause et le bilan le disent. */
.cb-stage[data-layout="portrait"] .cb-state,
.cb-box[data-hide~="state"] .cb-hud .cb-state,
.cb-box[data-hide~="jesus"] .cb-hud .cb-jesus,
.cb-box[data-hide~="theme"] .cb-hud .cb-theme,
.cb-box[data-hide~="repelled"] .cb-hud .cb-repelled { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }


/* =====================================================================================================================
   Salle de préparation, progression, bilan : une seule identité (jetons --lb-*), partagée avec la barre de partie.
   Une teinte par catégorie (fond pâle, bordure et icône plus soutenues), une famille de boutons (44 px au moins),
   des cartes à rayon et ombre uniformes, une échelle d'espacement de 4 et 8 px, un anneau de focus de 3 px.
   Sauge = qui et où, bleu ciel = équipe, lavande = renfort, ambre = niveau, or = progression, ardoise = information.
   ===================================================================================================================== */

:root {
  --lb-gold: #e7b24a;
  --lb-gold-hi: #f0c264;
  --lb-r: 14px;        /* boutons, tuiles, champs */
  --lb-r-card: 20px;   /* cartes */
  --lb-shadow: 0 1px 2px rgba(11, 31, 24, .06), 0 4px 14px rgba(11, 31, 24, .06);
  --lb-shadow-up: 0 8px 24px rgba(11, 31, 24, .16);
  --lb-focus: #1c4a3b;
  --lb-who-bg: #eaf3e8;      --lb-who-line: #b4cfae;      --lb-who-ink: #2c5a39;
  --lb-gear-bg: #e8f2fa;     --lb-gear-line: #aecde6;     --lb-gear-ink: #1f5276;
  --lb-reinf-bg: #f0ecf8;    --lb-reinf-line: #c9bde6;    --lb-reinf-ink: #55318f;
  --lb-level-bg: #fcf1dc;    --lb-level-line: #ecc98a;    --lb-level-ink: #7a4b00;
  --lb-progress-bg: #fbf3d6; --lb-progress-line: #e7c866; --lb-progress-ink: #6e4f00;
  --lb-info-bg: #eceff3;     --lb-info-line: #c3ccd6;     --lb-info-ink: #37465a;
  --lb-dock-bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); /* au-dessus de la barre d'onglets fixe du site */
}
@media (min-width: 880px) { :root { --lb-dock-bottom: 12px; } }
:root { --lb-bar-h: 0px; } /* hauteur de la barre collante (elle ne l'est qu'à partir de 700 px) */
@media (min-width: 700px) { :root { --lb-bar-h: 100px; } }
@media (min-width: 1240px) { :root { --lb-bar-h: 52px; } }

.lb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.lb-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .lb-flip { transform: scaleX(-1); }

/* ----- Boutons : trois niveaux (principal or, secondaire contour vert forêt, tertiaire discret) ----- */
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 1.5px solid transparent; border-radius: var(--lb-r);
  font: 700 .9375rem/1.15 var(--font-body); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.lb-btn:active { transform: translateY(1px); }
.lb-btn[disabled], .lb-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.lb-btn-primary { background: var(--lb-gold); border-color: var(--lb-gold); color: var(--night); box-shadow: 0 2px 10px rgba(231, 178, 74, .4); }
.lb-btn-primary:hover:not([disabled]) { background: var(--lb-gold-hi); border-color: var(--lb-gold-hi); color: var(--night); }
.lb-btn-secondary { background: #fff; border-color: var(--forest); color: var(--forest); }
.lb-btn-secondary:hover:not([disabled]) { background: #eef4ef; color: var(--forest); }
.lb-btn-ghost { background: transparent; color: var(--forest-2); }
.lb-btn-ghost:hover:not([disabled]) { background: rgba(20, 56, 45, .08); color: var(--forest); }
.lb-btn-lg { min-height: 56px; padding: 0 24px; font-size: 1.125rem; }
.lb-btn-sm { padding: 0 12px; font-size: .875rem; }
.lb-btn:focus-visible, .lb-info:focus-visible, .lb-tab:focus-visible, .lb-tile:focus-visible, .lb-recap button:focus-visible { outline: 3px solid var(--lb-focus); outline-offset: 2px; }

.lb-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(20, 56, 45, .08); color: var(--forest); font: 700 .75rem/1 var(--font-body); white-space: nowrap; }
.lb-chip .lb-i { width: 13px; height: 13px; stroke-width: 2.2; }
.lb-chip.is-gold { background: #fbf1d4; color: var(--gold-deep); }
.lb-chip.is-new { background: var(--gold-deep); color: #fff; }
.lb-dot { display: inline-block; flex: none; width: 10px; height: 10px; margin-inline-start: 2px; border-radius: 50%; background: var(--lb-gold); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(128, 84, 10, .5); }
.lb-dot[hidden] { display: none; }

/* Bouton « i » : zone tactile de 44 px, cercle discret de 28 px */
.lb-info { position: relative; z-index: 2; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -8px -6px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cat-ink, var(--forest-2)); cursor: pointer; transition: background-color .15s ease; }
.lb-info .lb-i { width: 24px; height: 24px; }
.lb-info:hover { background: rgba(255, 255, 255, .7); }

/* ----- Bandeau de page compact ----- */
.page-head.lb-head { padding-block: 4px 20px; }
.lb-wide { width: min(1240px, 100% - 2 * var(--gutter)); }
.lb-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--on-night-2); }
.lb-crumbs li { display: inline-flex; align-items: center; min-height: 22px; }
.lb-crumbs li + li::before { content: "\203A"; margin-inline-end: 8px; opacity: .8; }
[dir="rtl"] .lb-crumbs li + li::before { content: "\2039"; }
.lb-crumbs a { color: var(--on-night); text-decoration: underline; text-decoration-color: rgba(231, 178, 74, .6); }
.lb-crumbs a:hover { color: var(--gold-soft); }
.lb-crumbs [aria-current] { color: var(--gold-soft); font-weight: 600; }
.lb-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 2px; }
.lb-head-row h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2rem); }
.lb-head-mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: var(--gold); border: 1.5px solid rgba(231, 178, 74, .55); background: radial-gradient(circle, rgba(231, 178, 74, .16), rgba(231, 178, 74, .04) 72%); }
.lb-head-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-lede { margin: 0; flex: 1 1 280px; min-width: 0; color: var(--on-night-2); font-size: .9375rem; line-height: 1.4; }
@media (min-width: 880px) { .lb-lede { padding-inline-start: 16px; border-inline-start: 1px solid rgba(231, 178, 74, .35); } }

.lb-main { padding-block: 0 28px; }
.lb-main .game-off { margin-top: 24px; }

/* ----- Barre d'actions collante (Espace détente, onglets, règles, paramètres, progression, autres espaces) ----- */
.lb-top { position: sticky; top: 0; z-index: 40; background: rgba(245, 248, 243, .94); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); }
.lb-top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 48px; padding-block: 2px; }
.lb-back { flex: none; }
.lb-tabs { display: flex; align-items: stretch; gap: 2px; order: 3; flex: 1 0 100%; min-width: 0; margin-inline: -4px; }
.lb-tab { position: relative; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; min-height: 44px; padding: 4px 10px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-2); font: 700 .8125rem/1.15 var(--font-body); text-align: center; cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.lb-tab:hover { color: var(--forest); background: rgba(20, 56, 45, .05); }
.lb-tab[aria-selected="true"] { color: var(--forest); border-bottom-color: var(--lb-gold); }
.lb-tools { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 2px; }
.lb-tool { position: relative; padding: 0 10px; }
.lb-tool .lb-dot { position: absolute; top: 7px; inset-inline-end: 6px; margin: 0; }
.lb-tool-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lb-more { position: relative; }
.lb-more .lb-chev { display: none; width: 16px; height: 16px; transition: transform .15s ease; }
.lb-more [aria-expanded="true"] .lb-chev { transform: rotate(180deg); }
.lb-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 5; min-width: 250px; max-width: calc(100vw - 24px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 34px rgba(11, 31, 24, .22); }
.lb-menu[hidden] { display: none; }
.lb-menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); font-weight: 600; text-decoration: none; }
.lb-menu a:hover { background: #eef4ef; }
.lb-menu a[aria-current="page"] { color: var(--forest); background: #fbf1d4; }
.lb-menu .lb-i { color: var(--forest-2); }
@media (min-width: 700px) {
  .lb-tool-lbl { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .lb-tool { padding: 0 8px; }
  .lb-more .lb-chev { display: block; }
  .lb-tool .lb-dot { position: static; }
  .lb-tab { flex: 0 1 auto; padding-inline: 14px; font-size: .875rem; }
  .lb-tabs { flex: 0 1 auto; margin-inline: 0; }
}
@media (min-width: 1240px) {
  .lb-top-in { flex-wrap: nowrap; gap: 8px 12px; }
  .lb-tabs { order: 0; flex: 1 1 auto; margin-inline: 8px; align-self: stretch; }
  .lb-tab { padding-inline: 16px; font-size: .9375rem; }
  .lb-tool { padding: 0 12px; }
  .lb-tools { flex: none; }
  #cbTopProgress { display: none; } /* l'onglet « Progression et équipement » est dans la même barre, avec la même pastille */
}
/* Téléphone : la barre défile avec la page (la barre du bas porte déjà le retour et le lancement) et se réduit aux icônes. */
@media (max-width: 699px) {
  .lb-top { position: relative; } /* pas collée, mais positionnée : son menu (z-index) reste au-dessus des cartes qui suivent, positionnées elles aussi */
  .lb-back { display: none; }
  .lb-top-in { gap: 0; padding-block: 4px 0; }
  .lb-tab { white-space: normal; }
  .lb-tools { flex: 1 0 100%; justify-content: space-between; padding-inline: 4px; }
  .lb-tool { flex: 1 1 0; min-width: 44px; }
  .lb-menu { inset-inline-end: -4px; }
}
/* Quatre onglets sur un petit téléphone : marges et corps réduits pour qu'aucun ne déborde (la largeur minimale de « Progression » est celle du mot). */
@media (max-width: 389px) {
  .lb-tab { gap: 3px; padding-inline: 2px; font-size: .75rem; }
}

/* ----- Mise en page : cartes à gauche, colonne « Votre partie » collante à droite ----- */
.lb-wrap { padding-top: 10px; }
.lb-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.lb-panels { min-width: 0; }
.lb-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.lb-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 700px) {
  .lb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-gear, .lb-reinf { grid-column: 1 / -1; }
  .lb-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 1024px) {
  .lb-board { grid-template-columns: minmax(0, 1fr) 316px; gap: 16px; }
  .lb-side { grid-template-columns: minmax(0, 1fr); position: sticky; top: calc(var(--lb-bar-h) + 12px); }
  .lb-side .lb-launch { display: grid; }
}
@media (min-width: 1240px) {
  .lb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-gear { grid-column: auto; }
}
/* Les autres onglets ne portent pas les cartes de préparation : sur tablette et téléphone, la colonne « Votre partie » se retire (la barre du bas reste). */
@media (max-width: 1023px) { #cbSetup:not([data-tab="prepare"]) .lb-side { display: none; } }

/* ----- Carte : fond pâle, bordure et icône plus soutenues ----- */
.lb-card { --cat-bg: var(--lb-info-bg); --cat-line: var(--lb-info-line); --cat-ink: var(--lb-info-ink); position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--cat-bg); border: 1px solid var(--cat-line); border-radius: var(--lb-r-card); box-shadow: var(--lb-shadow); container-type: inline-size; scroll-margin-top: calc(var(--lb-bar-h) + 16px); }
.lb-card[data-cat="who"] { --cat-bg: var(--lb-who-bg); --cat-line: var(--lb-who-line); --cat-ink: var(--lb-who-ink); }
.lb-card[data-cat="gear"] { --cat-bg: var(--lb-gear-bg); --cat-line: var(--lb-gear-line); --cat-ink: var(--lb-gear-ink); }
.lb-card[data-cat="reinf"] { --cat-bg: var(--lb-reinf-bg); --cat-line: var(--lb-reinf-line); --cat-ink: var(--lb-reinf-ink); }
.lb-card[data-cat="level"] { --cat-bg: var(--lb-level-bg); --cat-line: var(--lb-level-line); --cat-ink: var(--lb-level-ink); }
.lb-card[data-cat="progress"] { --cat-bg: var(--lb-progress-bg); --cat-line: var(--lb-progress-line); --cat-ink: var(--lb-progress-ink); }
.lb-card-top { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; }
.lb-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1.5px solid var(--cat-line); color: var(--cat-ink); }
.lb-card-title { flex: 1 1 auto; min-width: 0; }
.lb-card-title h2, .lb-recap-card h2, .lb-card > h3 { margin: 0; font: 600 1.25rem/1.15 var(--font-display); letter-spacing: 0; color: var(--forest); }
.lb-now { display: none; margin: 2px 0 0; color: var(--cat-ink); font: 700 .875rem/1.25 var(--font-body); overflow-wrap: anywhere; }
.lb-acc { display: none; }
.lb-card-body { display: grid; gap: 8px; align-content: start; flex: 1 1 auto; padding: 2px 14px 12px; }

/* Téléphone : chaque carte devient un accordéon dont l'en-tête dit déjà le choix en cours */
@media (max-width: 699px) {
  .lb-cards { gap: 10px; }
  .lb-side { gap: 10px; }
  .lb-recap-card { display: none; }
  .lb-card-top { min-height: 60px; padding: 8px 12px 8px 14px; }
  .lb-card-top .lb-info { margin-inline: -4px 28px; }
  .lb-card-title h2 { font-size: 1.15rem; }
  .lb-now { display: block; }
  .lb-acc { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: flex-end; width: 100%; padding: 0 14px; border: 0; border-radius: var(--lb-r-card); background: transparent; color: var(--cat-ink); cursor: pointer; }
  .lb-acc:focus-visible { outline: 3px solid var(--lb-focus); outline-offset: -3px; }
  .lb-acc .lb-chev { transition: transform .18s ease; }
  .lb-card[data-open="1"] .lb-acc .lb-chev { transform: rotate(180deg); }
  .lb-card[data-open="0"] .lb-card-body { display: none; }
  .lb-card-body { padding: 0 14px 14px; }
  .lb-card[data-open="1"] .lb-card-top { padding-bottom: 4px; }
  .lb-card[data-open="1"] .lb-now { display: none; }
}
@media (min-width: 700px) { .lb-card[data-open] .lb-card-body { display: grid; } }

/* ----- Options à choisir : de vrais boutons radio (flèches du clavier), étiquette cliquable, coche en plus de la couleur ----- */
.lb-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.lb-opt > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--lb-r); opacity: 0; cursor: pointer; }
.lb-opt-body { position: relative; display: grid; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--cat-line); border-radius: var(--lb-r); background: #fff; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.lb-opt:hover > input:not(:disabled) + .lb-opt-body { border-color: var(--cat-ink); }
.lb-opt > input:checked + .lb-opt-body { border-color: var(--cat-ink); box-shadow: inset 0 0 0 1.5px var(--cat-ink); }
.lb-opt > input:focus-visible + .lb-opt-body { outline: 3px solid var(--lb-focus); outline-offset: 2px; }
.lb-opt > input:disabled { cursor: not-allowed; }
.lb-opt > input:disabled + .lb-opt-body { border-style: dashed; background: #f3f5f2; color: var(--ink-2); }
.lb-check { position: absolute; top: 8px; inset-inline-end: 8px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--cat-ink); color: #fff; }
.lb-check .lb-i { width: 14px; height: 14px; stroke-width: 2.6; }
.lb-opt > input:checked + .lb-opt-body .lb-check { display: grid; }

/* Qui protéger : contrôle segmenté */
.lb-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lb-seg .lb-opt-body { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; text-align: center; font: 700 .875rem/1.15 var(--font-body); color: var(--ink); }
.lb-seg .lb-check { position: static; flex: none; width: 18px; height: 18px; }
.lb-seg .lb-check .lb-i { width: 12px; height: 12px; }
.lb-seg .lb-opt > input:checked + .lb-opt-body { background: #fff; color: var(--cat-ink); }
.lb-who-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center; }
.lb-preview-slot { display: grid; place-items: center; min-width: 0; }
.lb-who-side { display: grid; gap: 4px; align-content: center; min-width: 0; }
.cb-preview-box { display: grid; place-items: center; width: 100%; margin: 0; }
.cb-preview { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--cat-line, var(--line-2)); background: #1b2740; }
.cb-preview[data-layout="wide"] { aspect-ratio: 854 / 480; }
.cb-preview[data-layout="portrait"] { width: auto; max-width: 100%; height: 132px; aspect-ratio: 2 / 3; }
.lb-people-note { min-width: 0; line-height: 1.3; }
.lb-people-note p { margin: 0; font-size: .8125rem; }
.lb-names { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .75rem; line-height: 1.3; overflow-wrap: anywhere; }
.lb-custom { justify-self: start; min-height: 44px; margin-inline: -10px 0; padding-inline: 10px; color: var(--cat-ink); }
.lb-custom .lb-chev { width: 16px; height: 16px; transition: transform .15s ease; }
.lb-custom[aria-expanded="true"] .lb-chev { transform: rotate(180deg); }
.lb-people { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding: 10px; border: 1px solid var(--cat-line); border-radius: var(--lb-r); background: #fff; }
.lb-people[hidden] { display: none; }
.lb-people .cb-count { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; }
.lb-people .cb-count > span { flex: 1 0 100%; font-size: .8125rem; color: var(--ink-2); }
.lb-people .cb-count b { min-width: 1.6em; text-align: center; font-size: 1.1rem; }
.lb-people .cb-count .lb-btn { min-width: 44px; padding: 0; font-size: 1.25rem; }
.lb-people .cb-person { display: flex; align-items: center; gap: 8px; margin: 0; }
.lb-people .cb-person input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: var(--lb-r); }
.lb-people .cb-dot { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px #fff; }
.lb-avatars { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0 0; padding: 0; list-style: none; }
.lb-avatars li { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 7px 1px 2px; border-radius: 999px; background: #fff; border: 1px solid var(--cat-line); font-size: .6875rem; font-weight: 600; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-avatars i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px var(--c2, rgba(0, 0, 0, .2)); }
@container (min-width: 250px) {
  .lb-who-view { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px; }
}
@container (min-width: 520px) {
  .lb-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Étapes : trois cartes à état (choisie : le numéro devient une coche ; verrouillée : cadenas et progression), chacune avec son « i » dans le coin */
.lb-stages { display: grid; gap: 8px; }
.lb-stage-row { position: relative; }
.lb-stage-row .lb-info { position: absolute; top: 0; inset-inline-end: 0; margin: 0; width: 44px; height: 44px; z-index: 2; }
.lb-stage .lb-opt-body { grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 8px 40px 8px 10px; min-height: 56px; }
.lb-num { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cat-bg); border: 1.5px solid var(--cat-line); color: var(--cat-ink); font: 700 1.05rem/1 var(--font-display); font-variant-numeric: lining-nums; }
.lb-num .lb-i { width: 16px; height: 16px; stroke-width: 2.6; }
.lb-num .lb-i:not(:only-child) { display: none; }
.lb-stage .lb-opt > input:checked + .lb-opt-body .lb-num { background: var(--cat-ink); border-color: var(--cat-ink); color: #fff; }
.lb-stage .lb-opt > input:checked + .lb-opt-body .lb-num .lb-n { display: none; }
.lb-stage .lb-opt > input:checked + .lb-opt-body .lb-num .lb-i { display: block; }
.lb-stage-main { display: grid; gap: 1px; min-width: 0; }
.lb-stage-main strong { font: 600 1.15rem/1.1 var(--font-display); color: var(--forest); }
.lb-stage-main .lb-sum { color: var(--ink-2); font-size: .8125rem; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lb-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.lb-stage .lb-opt > input:disabled + .lb-opt-body .lb-num { background: #e7eae6; color: var(--ink-2); border-style: dashed; }
@media (min-width: 1240px) { .lb-stage .lb-sum { display: none; } } /* sur trois colonnes, le résumé de l'étape est dans son « i » */
@container (min-width: 480px) {
  .lb-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Vos anges gardiens : trois tuiles à choix unique (ange et arme portée, verrou), l'ange choisi marqué d'une coche, d'un liseré et de « Ange choisi » ; une colonne sur petit écran, trois dès que la place existe. */
.lb-tilegrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lb-tile-cell { position: relative; display: grid; min-width: 0; }
.lb-tile-cell .lb-info { position: absolute; top: -6px; inset-inline-end: -6px; margin: 0; z-index: 3; }
.lb-tile-cell .lb-tile { padding-inline-end: 34px; }
.lb-angel-tile.is-on .lb-state { color: var(--cat-ink); }
.lb-gear-rule { margin: 8px 0 0; }
.lb-tiles { display: contents; }
.lb-tile { --c: var(--lb-gear-line); position: relative; display: grid; align-content: start; gap: 1px; min-width: 0; min-height: 64px; padding: 8px 10px 10px; border: 1.5px solid var(--cat-line); border-radius: var(--lb-r); background: #fff; box-shadow: inset 0 -3px 0 var(--c); color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.lb-tile:hover { border-color: var(--cat-ink); }
.lb-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; min-width: 0; }
.lb-tile strong { font: 600 1.05rem/1.15 var(--font-display); color: var(--forest); overflow-wrap: anywhere; }
.lb-tile .lb-sub { color: var(--ink-2); font-size: .8125rem; line-height: 1.25; overflow-wrap: anywhere; }
.lb-tile .lb-state { color: var(--ink-2); font: 700 .75rem/1.25 var(--font-body); }
.lb-badge { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #e7eae6; color: var(--ink-2); }
.lb-badge.is-ok { background: var(--cat-ink); color: #fff; }
.lb-badge .lb-i { width: 12px; height: 12px; stroke-width: 2.6; }
.lb-tile.is-locked { background: #f3f5f2; border-style: dashed; box-shadow: none; }
.lb-tile.is-locked strong, .lb-tile.is-locked .lb-sub { color: var(--ink-2); }
label.lb-tile > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
label.lb-tile:has(> input:focus-visible) { outline: 3px solid var(--lb-focus); outline-offset: 2px; }
.lb-tile.is-on { border-color: var(--cat-ink); box-shadow: inset 0 0 0 1.5px var(--cat-ink), inset 0 -3px 0 var(--c); }
.lb-tile .lb-check { position: static; flex: none; width: 20px; height: 20px; }
.lb-tile.is-on .lb-check { display: grid; }
.lb-halos { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.lb-halos .lg-halo { min-height: 44px; padding: 0 10px 0 28px; border-radius: var(--lb-r); font-size: .875rem; }
.lb-halos .lg-halo::before { inset-inline-start: 9px; }
[dir="rtl"] .lb-halos .lg-halo { padding: 0 28px 0 10px; }
@container (min-width: 440px) {
  .lb-tilegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Renfort : sept tuiles (quatre de départ, trois à débloquer) sur deux lignes quand la place existe, la fiche du renfort choisi dessous */
.lb-theme-intro { margin: 0 0 8px; line-height: 1.4; }
.lb-theme-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@container (min-width: 520px) { .lb-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lb-theme-opt .lb-opt-body { gap: 2px; align-content: start; padding: 8px 40px 8px 12px; min-height: 56px; }
.lb-theme-name { font: 700 .9375rem/1.2 var(--font-body); color: var(--ink); }
.lb-theme-text { color: var(--ink-2); font-size: .8125rem; line-height: 1.35; }
.lb-reinf-rule { margin: 0 0 8px; color: var(--lb-reinf-ink); font: 700 .875rem/1.35 var(--font-body); }
.lb-reinf-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.lb-reinf-switch:empty { display: none; }
.lb-reinf-mode { position: relative; display: grid; align-content: center; gap: 2px; min-height: 56px; min-width: 0; padding: 8px 12px; border: 1.5px solid var(--cat-line); border-radius: var(--lb-r); background: #fff; color: var(--ink); font: 700 1rem/1.2 var(--font-body); text-align: start; cursor: pointer; touch-action: manipulation; transition: border-color .15s ease, box-shadow .15s ease; }
.lb-reinf-mode:hover { border-color: var(--cat-ink); }
.lb-reinf-mode.is-on { border-color: var(--cat-ink); box-shadow: inset 0 0 0 1.5px var(--cat-ink); color: var(--cat-ink); }
.lb-reinf-mode.is-locked { border-style: dashed; background: #f3f5f2; color: var(--ink-2); box-shadow: none; }
.lb-reinf-mode:focus-visible { outline: 3px solid var(--lb-focus); outline-offset: 2px; }
.lb-reinf-mode-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lb-reinf-mode-top .lb-i { width: 16px; height: 16px; flex: none; }
.lb-reinf-mode .lb-check { position: static; display: grid; flex: none; margin-inline-start: auto; }
.lb-reinf-mode .lb-state { color: var(--ink-2); font: 700 .75rem/1.25 var(--font-body); }
.cb-shot[data-shape="knight"] { width: 18px; height: 20px; border: 0; border-radius: 0; background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 52%, 50% 100%, 0 52%); }
.lb-reinf-detail .lb-rempart { margin-top: 6px; }
.lb-reinf-grid .cb-reinf-knight { grid-column: 1 / -1; }
.lb-reinf-layout { display: grid; gap: 8px; }
.lb-reinf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; align-content: start; }
.lb-reinf-grid .lb-opt-body { display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 7px 8px 7px 9px; }
.lb-reinf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; min-width: 0; }
.lb-reinf-name { font: 700 .8125rem/1.2 var(--font-body); color: var(--ink); overflow-wrap: break-word; hyphens: auto; }
.lb-micro { display: flex; flex-wrap: wrap; gap: 3px; }
.lb-micro i { display: inline-block; padding: 0 5px; border-radius: 999px; background: var(--lb-reinf-bg); color: var(--lb-reinf-ink); font: 700 .65625rem/1.55 var(--font-body); font-style: normal; white-space: nowrap; }
.lb-reinf-grid .lb-check { top: -7px; inset-inline-end: -7px; width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--cat-bg); }
/* Renfort à débloquer (sœur en Christ, frère chartreux, Séraphins) : bouton radio inactif, tuile pointillée et grisée, cadenas et décompte des conditions écrits, bouton « i » pour le détail et le coût. */
.lb-reinf-cell { position: relative; min-width: 0; display: grid; }
.lb-reinf-cell .lb-info { position: absolute; top: -6px; inset-inline-end: -6px; margin: 0; }
.lb-reinf-grid .is-locked .lb-reinf-name { color: var(--ink-2); padding-inline-end: 18px; }
.lb-reinf-grid .is-locked .cb-shot { opacity: .55; }
.lb-reinf-grid .lb-micro.lb-state { display: flex; align-items: flex-start; gap: 4px; color: var(--ink-2); font: 700 .6875rem/1.25 var(--font-body); }
.lb-reinf-grid .lb-micro.lb-state .lb-i { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.lb-reinf-detail { display: grid; align-content: start; gap: 2px 20px; min-width: 0; padding: 8px 14px 10px; border: 1.5px solid var(--cat-line); border-radius: var(--lb-r); background: #fff; }
.lb-reinf-detail h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 1.2rem/1.15 var(--font-display); color: var(--forest); }
.lb-reinf-detail p { margin: 0; font-size: .8125rem; line-height: 1.4; }
.lb-reinf-detail .lb-role { color: var(--ink); font-weight: 600; }
.lb-reinf-detail .lb-eff { color: var(--ink-2); }
.lb-reinf-detail .lb-chips { margin-top: 4px; }
.lb-reinf-detail .lb-chip { background: var(--lb-reinf-bg); color: var(--lb-reinf-ink); white-space: normal; }
.cb-shot { --c: #fff1c2; display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 1.5px solid rgba(11, 31, 24, .45); }
.cb-shot[data-shape="bible"] { border-radius: 3px; }
/* Charbon ardent des Séraphins, puis les armes secondaires (robe, baffle, micro) : chacune a sa forme, le nom est toujours écrit à côté. */
.cb-shot[data-shape="coal"] { border-radius: 52% 48% 46% 54%; background: radial-gradient(circle at 38% 34%, #fff1c2, var(--c) 52%, #7a2a00); }
.cb-shot-sec { position: relative; width: 14px; height: 14px; }
.cb-shot-sec[data-shape="robe"] { border-radius: 50% 50% 22% 22% / 62% 62% 22% 22%; }
.cb-shot-sec[data-shape="speaker"] { border-radius: 3px; background: radial-gradient(circle at 50% 66%, rgba(255, 255, 255, .92) 0 17%, transparent 19%), radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .7) 0 9%, transparent 11%), var(--c); }
.cb-shot-sec[data-shape="mic"] { width: 11px; height: 11px; margin-inline: 1.5px; margin-block-end: 3px; }
.cb-shot-sec[data-shape="mic"]::after { content: ""; position: absolute; left: 50%; top: 80%; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 0 0 2px 2px; background: rgba(11, 31, 24, .6); }
.lb-reinf-sec { display: flex; align-items: flex-start; gap: 5px; margin-top: 1px; padding-top: 4px; border-top: 1px dashed var(--cat-line); color: var(--ink-2); font: 600 .6875rem/1.25 var(--font-body); }
.lb-reinf-sec .cb-shot { margin-top: 1px; }
.lb-reinf-sec-txt { min-width: 0; overflow-wrap: break-word; }
/* La résistance de chaque renfort, écrite en mots sous son arme secondaire (jamais une couleur seule), et le rappel qu'un renfort tombé ne revient qu'à la partie suivante. */
.lb-reinf-res { margin-top: 1px; color: var(--ink-2); font: 600 .6875rem/1.25 var(--font-body); overflow-wrap: break-word; }
.lb-reinf-detail .lb-fallen { margin: 4px 0 0; }
.lb-tile .lb-sub + .lb-sub { margin-top: 1px; }
.lb-sec { display: grid; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--cat-line); }
.lb-sec-title { display: flex; align-items: center; gap: 8px; }
.lb-sec-title strong { font: 700 .875rem/1.2 var(--font-body); color: var(--forest); }
.lb-reinf-detail .lb-sec p { margin: 0; }
.lb-reinf-detail .lb-sec-text { color: var(--ink); }
.cb-shot[data-shape="rosary"] { width: 20px; height: 20px; border: 0; border-radius: 0; clip-path: polygon(36% 0, 64% 0, 64% 36%, 100% 36%, 100% 64%, 64% 64%, 64% 100%, 36% 100%, 36% 64%, 0 64%, 0 36%, 36% 36%); }
.lb-reinf-detail .cb-shot { width: 22px; height: 22px; }
.lb-reinf-detail .cb-shot[data-shape="knight"] { width: 20px; height: 24px; }
@container (min-width: 560px) {
  .lb-reinf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 800px) {
  .lb-reinf-detail { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .lb-reinf-detail h3 { grid-column: 1; grid-row: 1; }
  .lb-reinf-detail .lb-role { grid-column: 1; grid-row: 2; }
  .lb-reinf-detail .lb-eff { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .lb-reinf-detail .lb-chips { grid-column: 1 / -1; grid-row: 3; }
  .lb-reinf-detail .lb-sec { grid-column: 1 / -1; grid-row: 4; }
  .lb-reinf-detail .lb-fallen { grid-column: 1 / -1; grid-row: 5; }
}

/* Niveau : quatre pastilles colorées, de la plus douce à la plus exigeante (la couleur ne dit jamais seule : le nom et la mention sont écrits) */
.lb-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lb-levels .lb-opt-body { gap: 0; min-height: 46px; padding: 6px 10px 6px 14px; align-content: center; overflow: hidden; }
.lb-levels .lb-opt-body::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: var(--lvl); }
.lb-lvl-name { font: 700 .875rem/1.2 var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
.lb-lvl-mention { font-size: .75rem; line-height: 1.2; color: var(--ink-2); }
.lb-levels .lb-check { top: 6px; inset-inline-end: 6px; width: 18px; height: 18px; }
.lb-levels [data-lvl="catechese"] { --lvl: #4c9a6a; }
.lb-levels [data-lvl="baptise"] { --lvl: #3d86b8; }
.lb-levels [data-lvl="confirme"] { --lvl: #c98a1c; }
.lb-levels [data-lvl="guide"] { --lvl: #b4503a; }
.lb-diff { margin: 0; color: var(--ink-2); font-size: .8125rem; line-height: 1.2; }

/* ----- Colonne « Votre partie » ----- */
.lb-recap-card { padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--lb-r-card); box-shadow: var(--lb-shadow); }
.lb-recap-card h2 { margin-bottom: 2px; }
.lb-recap-note { margin: 8px 0 0; line-height: 1.35; }
.cb-problems { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--lb-info-line, #c9c9c9); }
.cb-problems h3 { margin: 0 0 4px; font: 600 1.05rem/1.2 var(--font-display); color: var(--forest); }
.cb-problem-list { display: grid; gap: 2px; margin: 0; padding-inline-start: 18px; line-height: 1.4; }
.lb-recap { display: grid; margin: 0; padding: 0; list-style: none; }
.lb-recap li { display: flex; align-items: center; gap: 4px 10px; min-height: 32px; padding: 0; border-top: 1px solid var(--line); }
.lb-recap li:first-child { border-top: 0; }
.lb-recap-k { flex: 0 0 auto; min-width: 5.2em; color: var(--ink-2); font-size: .8125rem; }
.lb-recap-v { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .875rem; line-height: 1.25; overflow-wrap: anywhere; }
.lb-recap button { flex: none; min-height: 44px; margin-block: -6px; padding: 0 6px; border: 0; background: none; color: var(--forest-2); font: 600 .8125rem var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lb-recap button:hover { color: var(--forest); }
.lb-launch { display: none; gap: 8px; } /* le lancement vit dans la barre du bas sur tablette et téléphone */
.lb-start { width: 100%; }
.lb-last { margin: 0; text-align: center; line-height: 1.35; }
.lb-last:empty { display: none; }
.lb-diff:empty { display: none; }

/* ----- Barre du bas (tablette et téléphone) ----- */
.lb-dock { display: flex; align-items: center; gap: 10px; position: sticky; bottom: var(--lb-dock-bottom); z-index: 45; margin-top: 14px; padding: 8px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--lb-shadow-up); }
.lb-dock-back { flex: 0 0 auto; }
.lb-dock-go { flex: 1 1 auto; min-height: 48px; font-size: 1rem; }
.lb-dock-recap { display: none; flex: 1 1 0; min-width: 0; margin: 0; color: var(--ink-2); line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
@media (min-width: 700px) { .lb-dock-recap { display: block; } .lb-dock-go { flex: 0 0 auto; padding-inline: 24px; } }
@media (max-width: 699px) { .lb-dock { padding: 6px; gap: 8px; } .lb-dock .lb-btn { padding-inline: 12px; gap: 6px; font-size: .875rem; } .lb-dock-back { flex: 0 0 auto; } .lb-dock-go { flex: 1 1 0; min-width: 0; line-height: 1.1; } }
@media (min-width: 1024px) { .lb-dock { display: none; } }
@media (max-width: 349px) { .lb-dock-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lb-dock-back { min-width: 48px; padding: 0 12px; } }
#cbSetup[data-tab="records"] .lb-dock-recap, #cbSetup[data-tab="progress"] .lb-dock-recap { visibility: hidden; }

/* ----- Première fois : choix de la Bible de référence, une bande en haut ----- */
.lb-canon { display: grid; gap: 8px 16px; margin-bottom: 14px; padding: 10px 14px; background: var(--lb-info-bg); border: 1px solid var(--lb-info-line); border-radius: var(--lb-r-card); box-shadow: var(--lb-shadow); }
.lb-canon[hidden] { display: none; }
.lb-canon h2 { margin: 0 0 1px; font: 600 1.2rem/1.15 var(--font-display); color: var(--forest); }
.lb-canon-text p { margin: 0; max-width: 78ch; font-size: .875rem; line-height: 1.35; }
.lb-canon-btns { display: flex; flex-wrap: wrap; gap: 8px; align-content: center; }
.lb-canon-btns .lb-btn[aria-pressed="true"] { background: var(--forest); color: #fff; }
@media (min-width: 880px) { .lb-canon { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* ----- Progression et équipement ----- */
.lb-pp { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--lb-progress-bg); border: 1px solid var(--lb-progress-line); border-radius: var(--lb-r-card); color: var(--lb-progress-ink); box-shadow: var(--lb-shadow); }
.lb-pp .lb-i { width: 24px; height: 24px; }
.cb-pp { margin: 0; font-weight: 700; color: var(--lb-progress-ink); }
.cb-unlock-msg { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--lb-r); background: #fff3cf; color: var(--gold-deep); font-weight: 700; }
.cb-unlock-msg[hidden] { display: none; }
.lb-fams { columns: 3 270px; column-gap: 16px; margin-top: 14px; }
.cb-family { --fam: #c3c9d3; break-inside: avoid; margin: 0 0 16px; padding: 14px; border: 1px solid var(--lb-progress-line); border-top: 5px solid var(--fam); border-radius: var(--lb-r-card); background: var(--lb-progress-bg); box-shadow: var(--lb-shadow); }
.cb-family h3 { margin: 0 0 4px; font: 600 1.3rem/1.2 var(--font-display); color: var(--forest); }
.cb-family h4 { margin: 12px 0 6px; font: 600 1.05rem/1.2 var(--font-display); color: var(--forest); }
.cb-family[data-family="stages"] { --fam: #7fb08a; }
.cb-family[data-family="angels"] { --fam: #8ab6d8; }
.cb-family[data-family="incense"] { --fam: #c3c9d3; }
.cb-family[data-family="weapons"] { --fam: var(--lb-gold); }
.cb-family[data-family="skills"] { --fam: #5fbf9b; }
.cb-family[data-family="companions"] { --fam: #c0392b; }
.cb-family[data-family="reinforcements"] { --fam: #8e6cd4; }
.cb-family[data-family="rosary"] { --fam: #e3c566; }
.lb-more-box { margin: 0 0 10px; border: 1px dashed var(--lb-progress-line); border-radius: var(--lb-r); background: rgba(255, 255, 255, .6); }
.lb-more-box summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; color: var(--lb-progress-ink); font: 700 .875rem var(--font-body); cursor: pointer; list-style: none; }
.lb-more-box summary::-webkit-details-marker { display: none; }
.lb-more-box summary::after { content: ""; width: 8px; height: 8px; margin-inline-start: auto; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.lb-more-box[open] summary::after { transform: rotate(-135deg); }
.lb-more-box > :not(summary) { margin: 0; padding: 0 12px 12px; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.lb-more-box summary:focus-visible { outline: 3px solid var(--lb-focus); outline-offset: -3px; border-radius: var(--lb-r); }
.cb-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cb-levels li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--lb-r); background: #fff; border: 1px solid var(--line); font-size: .875rem; }
.cb-levels strong { font-weight: 700; }
.cb-levels li > span + span { margin-top: 2px; }
.cb-node { display: grid; gap: 6px; padding: 12px; margin: 8px 0; border: 1.5px solid var(--line); border-radius: var(--lb-r); background: #fff; }
.cb-node p { margin: 0; font-size: .875rem; line-height: 1.4; }
.cb-node.is-open { background: #f1f8f3; border-color: #b9d8c3; }
.cb-node.is-ready { border-color: var(--lb-gold); }
.cb-node.is-new { border-color: var(--lb-gold); background: #fff8e3; animation: cbUnlock 2.6s ease-out 1; }
.cb-node-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cb-node-head strong { font-size: .9375rem; line-height: 1.25; overflow-wrap: anywhere; }
.cb-node .lb-btn { justify-self: start; }
.cb-conds { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .8125rem; }
.cb-conds .ok, .cb-challenges .ok { color: #1b6e43; font-weight: 600; }
.cb-lock { font-weight: 700; color: #8a5a00; }
.cb-news { margin: 4px 0; color: var(--gold-deep); font-weight: 700; }
.cb-news.is-new { animation: cbUnlock 2.6s ease-out 1; border-radius: 10px; padding: 2px 8px; margin-inline: -8px; background: #fff8e3; }
@keyframes cbUnlock { 0% { box-shadow: 0 0 0 0 rgba(231, 178, 74, 0); } 30% { box-shadow: 0 0 0 7px rgba(231, 178, 74, .38); } 100% { box-shadow: 0 0 0 0 rgba(231, 178, 74, 0); } }
#lgGame[data-calm="1"] .cb-node.is-new, #lgGame[data-calm="1"] .cb-news.is-new { animation: none; }
@media (prefers-reduced-motion: reduce) { .cb-node.is-new, .cb-news.is-new { animation: none; } }
.cb-goals h3 { margin: 12px 0 4px; font: 600 1.15rem/1.2 var(--font-display); color: var(--forest); }
.cb-goals ul { margin: 0; padding-inline-start: 20px; }

/* ----- Boutique du jeu : huit cartes (icône, nom, prix, description, achat), le solde toujours en vue ; équipement (reliques emportées) ; contextes de stage (décors) ----- */
.lb-shop { min-width: 0; }
.lb-shop-bal { position: sticky; top: calc(var(--lb-bar-h) + 8px); z-index: 6; }
.lb-shop-bal .cb-pp { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.lb-shop-intro { margin: 10px 0 0; max-width: 78ch; line-height: 1.4; }
.lb-shop .cb-unlock-msg { margin: 10px 0 0; }
.lb-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.lb-shop-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "ico main" "buy buy"; gap: 8px 12px; align-content: start; padding: 12px; background: #fff; border: 1.5px solid var(--lb-progress-line); border-radius: var(--lb-r-card); box-shadow: var(--lb-shadow); }
.lb-shop-card.is-owned { background: #f1f8f3; border-color: #b9d8c3; }
.lb-shop-card:focus-visible { outline: 3px solid var(--lb-focus); outline-offset: 2px; }
.lb-shop-ico { grid-area: ico; display: grid; place-items: start center; }
.lb-shop-svg { display: block; flex: none; width: 56px; height: 56px; }
.lb-disc { fill: #fffaf0; stroke: #c9a24a; stroke-width: 1.5; }
.lb-shop-main { grid-area: main; display: grid; gap: 4px; align-content: start; min-width: 0; }
.lb-shop-name { margin: 0; font: 600 1.2rem/1.15 var(--font-display); color: var(--forest); overflow-wrap: anywhere; }
.lb-shop-price { justify-self: start; margin: 0; padding: 0 10px; border-radius: 999px; background: #fbf1d4; color: var(--gold-deep); font: 700 .8125rem/1.7 var(--font-body); font-variant-numeric: tabular-nums; }
.lb-shop-text { margin: 0; color: var(--ink); font-size: .875rem; line-height: 1.4; }
.lb-shop-with { margin: 0; color: var(--ink-2); font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.lb-shop-for { justify-self: start; margin: 0; padding: 0 10px; border-radius: 999px; background: var(--lb-reinf-bg); color: var(--lb-reinf-ink); font: 700 .8125rem/1.7 var(--font-body); }
.lb-shop-buy { grid-area: buy; display: grid; gap: 4px; align-self: end; }
.lb-shop-btn { width: 100%; }
.lb-shop-missing { margin: 0; color: var(--ink-2); font: 600 .8125rem/1.3 var(--font-body); text-align: center; }
.lb-shop-owned { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: var(--lb-r); background: #e3f1e8; color: #1b6e43; font: 700 .9375rem/1.2 var(--font-body); }
.lb-shop-owned .lb-i { width: 18px; height: 18px; stroke-width: 2.6; }

/* Équipement : une ligne par relique, l'interrupteur « Emporter » à droite (toute la ligne se touche), trois au plus ; une relique pas encore achetée renvoie à la boutique. */
.lb-equip .lb-card-body { gap: 10px; }
.lb-relics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; }
.lb-relic, .lb-equip-weapon { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 64px; padding: 8px 12px; background: #fff; border: 1.5px solid var(--cat-line); border-radius: var(--lb-r); }
.lb-relics .cb-equip-none { grid-column: 1 / -1; margin: 0; color: var(--ink-2); }
label.lb-relic { cursor: pointer; }
label.lb-relic > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
label.lb-relic:has(> input:focus-visible) { outline: 3px solid var(--lb-focus); outline-offset: 2px; }
.lb-relic.is-on { border-color: var(--cat-ink); box-shadow: inset 0 0 0 1.5px var(--cat-ink); }
.lb-relic.is-locked { grid-template-columns: 44px minmax(0, 1fr); background: #f3f5f2; border-style: dashed; }
.lb-relic.is-locked .lb-shop-svg { opacity: .75; }
.lb-relic .lb-shop-svg, .lb-equip-weapon .lb-shop-svg { width: 44px; height: 44px; }
.lb-relic-body { display: grid; gap: 2px; min-width: 0; }
.lb-relic-name { font: 600 1.05rem/1.15 var(--font-display); color: var(--forest); overflow-wrap: anywhere; }
.lb-relic-text { color: var(--ink-2); font-size: .8125rem; line-height: 1.35; }
.lb-relic-switch { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; }
.lb-relic-track { position: relative; display: block; width: 44px; height: 26px; border-radius: 999px; background: #7b8794; transition: background-color .15s ease; }
.lb-relic-track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); transition: transform .15s ease; }
.lb-relic.is-on .lb-relic-track { background: var(--cat-ink); }
.lb-relic.is-on .lb-relic-track::after { transform: translateX(18px); }
[dir="rtl"] .lb-relic.is-on .lb-relic-track::after { transform: translateX(-18px); }
.lb-relic.is-on .lb-relic-track::before { content: "\2713"; position: absolute; top: 50%; inset-inline-start: 7px; z-index: 1; transform: translateY(-52%); color: #fff; font: 700 13px/1 var(--font-body); }
.lb-relic-take { color: var(--ink-2); font: 700 .6875rem/1.1 var(--font-body); }
.lb-relic.is-on .lb-relic-take { color: var(--cat-ink); }
.lb-relic-side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.cb-equip-msg { margin: 0; padding: 8px 12px; border-radius: var(--lb-r); background: #fff3cf; color: var(--gold-deep); font-size: .875rem; font-weight: 700; line-height: 1.35; }
.lb-equip-h { margin: 4px 0 2px; font: 600 1.05rem/1.2 var(--font-display); color: var(--forest); }
.lb-equip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.lb-equip-tips { margin: 0; padding-inline-start: 18px; line-height: 1.4; }
@container (max-width: 300px) {
  .lb-relic, .lb-equip-weapon { grid-template-columns: 44px minmax(0, 1fr); }
  .lb-relic-switch, .lb-equip-weapon > .lb-chip { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; justify-items: stretch; }
}

/* Contexte : le décor de l'étape d'abord, puis neuf décors, chacun avec son aperçu, son nom, sa description et « Choisir » ou ses conditions de déblocage (décompte et liste, chacune avec son état). */
.lb-ctx-intro { margin: 0; line-height: 1.4; }
.lb-ctx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 8px; }
.lb-ctx { display: grid; }
.lb-ctx .lb-opt-body { gap: 4px; align-content: start; padding: 8px; }
.lb-ctx-prev { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; border: 1px solid rgba(11, 31, 24, .28); background: linear-gradient(180deg, var(--top, #a4b9e0), var(--bottom, #141b47)); }
.lb-ctx-prev::before { content: ""; position: absolute; inset: 0; background: radial-gradient(62% 56% at 50% 44%, var(--accent, #fff1c2), transparent 72%); opacity: .55; }
.lb-ctx-prev::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .34)); }
.lb-ctx-prev[data-drawn="1"]::before, .lb-ctx-prev[data-drawn="1"]::after { display: none; }
.lb-ctx-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lb-ctx-canvas[hidden] { display: none; }
.lb-ctx.is-locked .lb-ctx-prev { filter: grayscale(.55) brightness(.92); }
.lb-ctx-lock { position: absolute; top: 6px; inset-inline-start: 6px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--lb-info-ink); }
.lb-ctx-lock .lb-i { width: 15px; height: 15px; }
.lb-ctx-name { font: 600 1.05rem/1.15 var(--font-display); color: var(--forest); overflow-wrap: anywhere; }
.lb-ctx-text { display: block; color: var(--ink-2); font-size: .8125rem; line-height: 1.35; }
.lb-ctx-state { display: block; margin-top: 2px; }
.lb-ctx-pick, .lb-ctx-picked { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--lb-r); font: 700 .875rem/1.2 var(--font-body); }
.lb-ctx-pick { background: #fff; border: 1.5px solid var(--cat-ink); color: var(--cat-ink); }
.lb-ctx-picked { display: none; background: var(--cat-ink); border: 1.5px solid var(--cat-ink); color: #fff; }
.lb-ctx-picked .lb-i { width: 16px; height: 16px; stroke-width: 2.6; }
.lb-ctx > input:checked + .lb-opt-body .lb-ctx-pick { display: none; }
.lb-ctx > input:checked + .lb-opt-body .lb-ctx-picked { display: inline-flex; }
.lb-ctx-state.is-locked { color: var(--ink-2); font: 700 .8125rem/1.25 var(--font-body); }
.lb-ctx-conds { display: grid; gap: 2px; color: var(--ink-2); font-size: .75rem; line-height: 1.3; }
.lb-ctx-cond { display: block; overflow-wrap: anywhere; }
.lb-ctx-cond.ok { color: #1b6e43; font-weight: 600; }
/* Téléphone : une rangée par contexte, l'aperçu à gauche, le nom, la description et l'état à droite, les conditions dessous (la carte n'a pas la place d'un aperçu en pleine largeur pour dix décors). */
@container (max-width: 520px) {
  .lb-ctx-grid { grid-template-columns: minmax(0, 1fr); }
  .lb-ctx .lb-opt-body { grid-template-columns: 112px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start; }
  .lb-ctx-prev { grid-column: 1; grid-row: 1 / span 3; }
  .lb-ctx-name, .lb-ctx-text, .lb-ctx-state { grid-column: 2; }
  .lb-ctx-conds { grid-column: 1 / -1; margin-top: 4px; }
}
@media (min-width: 700px) { .lb-context, .lb-equip { grid-column: 1 / -1; } }
@media (min-width: 1240px) { .lb-cards { grid-auto-flow: row dense; } } /* « Votre équipe » remonte dans la première rangée, à côté de « Étape » ; « Contexte » prend toute la rangée suivante */
.cb-family[data-family="contexts"] { --fam: #d9a66b; }
.cb-shop-note { display: grid; gap: 6px; margin: 8px 0 0; }
.cb-shop-note p { margin: 0; }
#cbSetup[data-tab="shop"] .lb-dock-recap { visibility: hidden; }
/* Contraste renforcé : médaillons et contours de la boutique, de l'équipement et des contextes plus marqués. */
#lgGame[data-contrast="1"] .lb-disc { fill: #fff; stroke: #000; stroke-width: 2.4; }
#lgGame[data-contrast="1"] .lb-shop-card, #lgGame[data-contrast="1"] .lb-relic, #lgGame[data-contrast="1"] .lb-equip-weapon, #lgGame[data-contrast="1"] .lb-ctx .lb-opt-body { border-color: #000; }
#lgGame[data-contrast="1"] .lb-ctx-prev { border-color: #000; }
#lgGame[data-contrast="1"] .lb-relic-take, #lgGame[data-contrast="1"] .lb-shop-with, #lgGame[data-contrast="1"] .lb-ctx-text, #lgGame[data-contrast="1"] .lb-relic-text { color: #000; }
@media (prefers-reduced-motion: reduce) { .lb-relic-track, .lb-relic-track::after { transition: none !important; } }

/* ----- Records et défis ----- */
.lb-records > h2 { margin: 0 0 12px; font: 600 1.5rem/1.15 var(--font-display); color: var(--forest); }
.lb-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block: 14px; }
.lb-kpi { display: grid; gap: 2px; padding: 12px 14px; background: #fff; border: 1px solid var(--lb-progress-line); border-radius: var(--lb-r); box-shadow: var(--lb-shadow); }
.lb-kpi b { font: 700 1.6rem/1.1 var(--font-display); color: var(--forest); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.lb-kpi span { color: var(--ink-2); font-size: .8125rem; line-height: 1.25; }
.lb-chal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lb-chal li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--lb-r); font-size: .9375rem; line-height: 1.3; }
.lb-chal li.ok { border-color: #b9d8c3; background: #f1f8f3; }
.lb-chal .lb-chal-ico { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #eef0ee; color: var(--ink-2); }
.lb-chal li.ok .lb-chal-ico { background: var(--ok); color: #fff; }
.lb-chal .lb-i { width: 15px; height: 15px; stroke-width: 2.4; }
.lb-chal small { display: block; color: var(--ink-2); }
.lb-records h3 { margin: 18px 0 10px; font: 600 1.25rem/1.15 var(--font-display); color: var(--forest); }
@media (min-width: 700px) { .lb-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ----- Bilan de partie ----- */
.lb-results { padding-block: 6px 12px; scroll-margin-top: calc(var(--lb-bar-h) + 8px); }
.lb-res-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--lb-r-card); background: linear-gradient(140deg, var(--forest), var(--night)); color: var(--on-night); box-shadow: var(--lb-shadow); }
.lb-res-mark { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; color: var(--gold); border: 1.5px solid rgba(231, 178, 74, .6); background: radial-gradient(circle, rgba(231, 178, 74, .2), rgba(231, 178, 74, .04) 72%); }
.lb-res-mark .lb-i { width: 28px; height: 28px; }
.lb-res-head h2 { margin: 0; font-size: clamp(1.6rem, 4.6vw, 2.2rem); color: #fff; }
.lb-res-lead { margin: 4px 0 0; color: var(--on-night-2); font-size: 1rem; line-height: 1.45; max-width: 60ch; }
.lb-res-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .lb-res-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.lb-results .lb-card { padding: 16px; }
.lb-results .lb-card > h3 { margin-bottom: 8px; }
.cb-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 12px; margin: 0; }
.cb-stats dt { padding: 7px 0; border-top: 1px solid var(--cat-line); color: var(--ink-2); font-size: .875rem; }
.cb-stats dd { margin: 0; padding: 7px 0; border-top: 1px solid var(--cat-line); font-weight: 700; font-size: .875rem; text-align: end; overflow-wrap: anywhere; }
.cb-stats dt:first-of-type, .cb-stats dt:first-of-type + dd { border-top: 0; }
.dt-spiri { font-weight: 800; color: var(--gold-deep); }
.lb-res-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.lb-res-actions .lb-btn-primary { flex: 1 1 100%; }
.lb-res-actions .lb-btn-secondary { flex: 1 1 220px; }
@media (min-width: 700px) { .lb-res-actions .lb-btn-primary { flex: 0 0 auto; min-width: 260px; } .lb-res-actions .lb-btn-secondary { flex: 0 1 auto; } }

/* Aide et règles : sections dépliables, la première ouverte */
.lb-help-sec { border: 1px solid var(--lb-info-line); border-radius: var(--lb-r); background: var(--lb-info-bg); }
.lb-help-sec summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; cursor: pointer; list-style: none; }
.lb-help-sec summary::-webkit-details-marker { display: none; }
.lb-help-sec summary h3 { flex: 1 1 auto; margin: 0; font: 600 1.15rem/1.2 var(--font-display); color: var(--forest); }
.lb-help-sec summary::after { content: ""; flex: none; width: 8px; height: 8px; border: solid var(--lb-info-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.lb-help-sec[open] > summary::after { transform: rotate(-135deg); }
.lb-help-sec summary:focus-visible { outline: 3px solid var(--lb-focus); outline-offset: -3px; border-radius: var(--lb-r); }
.lb-help-sec > :not(summary) { margin: 0 14px 14px; }
.lb-help-sec[open] > summary { margin-bottom: 10px; }

/* ----- Fenêtres : même langage, feuille du bas sur téléphone ----- */
.modal { overscroll-behavior: contain; }
.modal-panel { box-shadow: 0 24px 60px rgba(5, 16, 12, .35); }
.modal-panel h2 { font-size: 1.6rem; color: var(--forest); }
.modal-panel .cta-row { gap: 8px; }
.lb-info-panel { width: min(520px, 100%); max-height: min(88dvh, 720px); grid-template-rows: auto minmax(0, 1fr) auto; }
.lb-info-body { display: grid; gap: 10px; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 4px; }
.lb-info-body p { margin: 0; line-height: 1.5; }
.cb-help-panel { width: min(720px, 100%); }
.cb-ref-panel { max-height: 86dvh; overflow: auto; }
.cb-ref-item { margin: 10px 0; }
.cb-ref-item p { margin: 4px 0; }
.cb-narrative { font-style: italic; }
.cb-sources { margin: 4px 0 12px; padding-inline-start: 18px; }
.cb-link { border: 0; background: none; padding: 0; min-height: 24px; color: var(--forest-2); font: 600 .9rem var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cb-conds-box { padding: 10px 12px; border-radius: var(--lb-r); background: var(--lb-info-bg); }
.cb-stage-meta { margin: 0; color: var(--ink-2); font-size: .875rem; }
.lg-halos { display: flex; flex-wrap: wrap; gap: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .modal:not([hidden]) { animation: lbFade .16s ease-out; }
  .modal:not([hidden]) .modal-panel { animation: lbPop .2s ease-out; }
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbPop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
body.cb-modal-open { overflow: hidden; }
@media (max-width: 699px) {
  .modal { align-items: end; padding: 0; }
  .modal-panel { width: 100%; max-width: none; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; }
  .cb-set-panel, .lb-info-panel, .cb-help-panel { max-height: 90dvh; }
  .cb-ref-panel { max-height: 90dvh; }
  .modal-panel .cta-row .lb-btn { flex: 1 1 auto; }
}

/* ----- Visite de la première fois ----- */
.lb-tour { position: fixed; z-index: 80; width: min(330px, calc(100vw - 24px)); padding: 14px 16px; background: #fff; border: 2px solid var(--lb-gold); border-radius: 18px; box-shadow: 0 14px 38px rgba(5, 16, 12, .32); }
.lb-tour[hidden] { display: none; }
.lb-tour-step { margin: 0 0 4px; color: var(--gold-deep); font: 700 .75rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.lb-tour-text { margin: 0 0 10px; color: var(--ink); line-height: 1.45; }
.lb-tour-actions { display: flex; justify-content: flex-end; gap: 8px; }
.lb-tour-target { outline: 3px solid var(--lb-gold); outline-offset: 4px; border-radius: var(--lb-r-card); }
@media (max-width: 699px) { .lb-tour { inset-inline: 12px; width: auto; bottom: calc(var(--lb-dock-bottom) + 72px); } }

/* ----- Cadres de chargement : à la place des vraies cartes, sans saut de mise en page ----- */
.lb-skel[hidden] { display: none; }
.lb-skel { animation: lbSkelOut 0s 12s forwards; } /* si le script ne démarre jamais, les cadres ne restent pas indéfiniment */
@keyframes lbSkelOut { to { visibility: hidden; height: 0; overflow: hidden; } }
.lb-skel-bar { height: 56px; border-bottom: 1px solid var(--line); background: rgba(245, 248, 243, .94); }
.lb-skel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 28px; }
.lb-skel-grid i { display: block; min-height: 64px; border-radius: var(--lb-r-card); background: linear-gradient(90deg, #e7eee7 25%, #f2f6f2 40%, #e7eee7 60%); background-size: 300% 100%; animation: lbShimmer 1.6s ease-in-out infinite; }
.lb-skel-grid i.wide, .lb-skel-grid i.side { display: none; }
@media (min-width: 700px) { .lb-skel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lb-skel-grid i { min-height: 220px; } .lb-skel-grid i.wide { display: block; grid-column: 1 / -1; } }
@media (min-width: 1024px) { .lb-skel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) 316px; } .lb-skel-grid i.side { display: block; grid-column: 3; grid-row: 1 / span 3; min-height: 520px; } .lb-skel-grid i.wide { grid-column: 1 / 3; } }
@media (min-width: 1240px) { .lb-skel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) 316px; } .lb-skel-grid i.wide { grid-column: 1 / 4; min-height: 200px; } .lb-skel-grid i { min-height: 280px; } .lb-skel-grid i.side { grid-column: 4; grid-row: 1 / span 2; } }
@keyframes lbShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .lb-skel-grid i { animation: none; } }
@media (max-width: 699px) { .lb-skel-grid i { min-height: 60px; } .lb-skel-grid i:nth-child(n+6) { display: none; } }

/* ----- Cohérence avec le combat : mêmes rayons, même or, mêmes boutons dans la fenêtre de pause ----- */
.cb-overlay .lb-btn-secondary { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.cb-overlay .lb-btn-secondary:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.cb-overlay .lb-btn-primary { min-width: 160px; }
.cb-stage[data-calm="1"] .cb-incense, .cb-stage[data-calm="1"] .cb-shield, .cb-stage[data-calm="1"] .cb-gauge.is-full, .cb-stage[data-calm="1"] .cb-gauge[data-blink="1"] { animation: none; }
.cb-threat > p.muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Niveau de difficulté dans les paramètres : quatre boutons radio, le texte du niveau choisi dessous. */
.cb-level-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 400px) { .cb-level-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cb-level-choice { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; border: 2px solid var(--line-2); border-radius: var(--lb-r); background: #fff; cursor: pointer; }
.cb-level-choice:has(input:checked) { border-color: var(--forest); background: #eef6f1; }
.cb-level-choice:focus-within { outline: 3px solid var(--lb-focus); outline-offset: 2px; }
.cb-level-choice input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--forest); }
.cb-level-name { display: grid; min-width: 0; line-height: 1.15; overflow-wrap: break-word; }
.cb-level-name small { color: var(--ink-2); }
.cb-level-text { margin: 8px 0 0; min-height: 3.6em; color: var(--ink-2); }

/* Mouvement réduit : plus aucune transition décorative sur la salle de préparation */
@media (prefers-reduced-motion: reduce) {
  .lb-btn, .lb-tab, .lb-opt-body, .lb-tile, .lb-info, .lb-acc .lb-chev, .lb-custom .lb-chev, .lb-more .lb-chev, .lb-more-box summary::after { transition: none !important; animation: none !important; }
  .lb-btn:active { transform: none; }
}
@media print { .lb-top, .lb-dock, .lb-tour, .lb-skel { display: none; } }