:root {
  --fond: #1b241c;
  --fond2: #263227;
  --carte: #2f3d30;
  --bord: #46574a;
  --texte: #eee8d5;
  --doux: #b5b09a;
  --or: #e8c547;
  --rouge: #e25b4a;
  --vert: #6fcf6f;
  --file: 34px;
  --cote: 200px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); overflow: hidden; }
body {
  font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
input, select { user-select: text; -webkit-user-select: text; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 1.25em; }
h2 { font-size: 1.05em; color: var(--or); margin-top: 1.2em; }

button, input, select {
  font: inherit;
  color: inherit;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 40px;
}
button { cursor: pointer; }
button:active:not(:disabled) { transform: translateY(1px); filter: brightness(1.2); }
button:disabled { opacity: .45; cursor: default; }
button.principal { background: #6b5320; border-color: var(--or); }
button.danger { border-color: var(--rouge); color: #ffb3a8; }
button.lien { background: none; border: none; color: var(--doux); text-decoration: underline; padding: 6px; min-height: 0; }
button.petit { min-height: 32px; padding: 4px 10px; }
input { width: 100%; background: #10170f; }
input[type="range"] { padding: 0; min-height: 28px; border: none; background: none; accent-color: var(--or); }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--or); }

.ligne { display: flex; gap: 8px; align-items: center; }
.ligne > input { flex: 1; }

/* ---------- Écrans ---------- */
.ecran { display: none; position: fixed; inset: 0; flex-direction: column; }
.ecran.actif { display: flex; }
.contenu { flex: 1; overflow-y: auto; padding: 12px 16px 24px; max-width: 900px; width: 100%; margin: 0 auto; }
.barre {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--fond2); border-bottom: 1px solid var(--bord);
}
.barre h1 { margin: 0; flex: 1; }
.barre nav { display: flex; gap: 6px; }
.barre nav button, .barre .retour { min-width: 44px; padding: 6px 10px; }
/* Retour des en-têtes : bouton carré du kit (flèche peinte) */
.retour, .barre .retour, .retour-carre { width: 44px; height: 45px; min-height: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; font-size: 0; background: url(img/carre-retour.webp) center / contain no-repeat; filter: drop-shadow(0 2px 3px #000a); }
.joueur { color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }

.boite { background: var(--fond2); border: 1px solid var(--bord); border-radius: 14px; padding: 18px; }
.centre { margin: auto; width: min(420px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; }
.titre { font-size: 1.8em; text-align: center; color: var(--or); letter-spacing: .03em; }

.liste { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.liste li { display: flex; gap: 8px; }
.liste .profil { flex: 1; display: flex; gap: 10px; align-items: center; text-align: left; }
.liste .profil b { flex: 1; }
.liste small, .vide { color: var(--doux); }


/* ---------- Partie ---------- */
#ecran-jeu {
  display: none;
  grid-template-columns: 1fr var(--cote);
  grid-template-rows: 1fr var(--file);
  grid-template-areas: "carte cote" "file file";
}
#ecran-jeu.actif { display: grid; }
#zone-carte { grid-area: carte; position: relative; min-height: 0; min-width: 0; }
#toile { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
#cote {
  grid-area: cote; display: flex; flex-direction: column; gap: 8px; padding: 8px;
  padding-right: max(8px, env(safe-area-inset-right));
  background: var(--fond2); border-left: 1px solid var(--bord); overflow-y: auto; min-height: 0;
}
#hud { display: flex; flex-direction: column; gap: 6px; }
.stats { display: flex; justify-content: space-between; font-size: 1.05em; }
.stats b { font-variant-numeric: tabular-nums; }
.compte { justify-content: space-between; font-size: .85em; color: var(--doux); min-height: 32px; }

#panneau { display: flex; flex-direction: column; gap: 6px; font-size: .9em; }
#panneau h3 { margin: 0; font-size: 1em; }
#panneau p { margin: 0; color: var(--doux); }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.choix button { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; min-height: 52px; font-size: .85em; }
.choix button i, .job i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; }
.choix button small { color: var(--or); }
.carac { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; font-size: .9em; }
.carac span:nth-child(odd) { color: var(--doux); }
.jauge { height: 6px; background: #0006; border-radius: 3px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--vert); }

#file {
  grid-area: file; display: flex; align-items: center; gap: 8px; padding: 0 8px;
  padding-left: max(8px, env(safe-area-inset-left));
  background: #141c15; border-top: 1px solid var(--bord); overflow-x: auto; white-space: nowrap; font-size: .8em;
}
.job { display: inline-flex; align-items: center; gap: 6px; background: var(--carte); border-radius: 6px; padding: 3px 8px; }
.job .barre-job { width: 46px; height: 5px; background: #0006; border-radius: 3px; overflow: hidden; }
.job .barre-job span { display: block; height: 100%; background: var(--or); }
.job.attente { opacity: .65; }
.job.fini { background: #2c4a2c; color: #c9f5c9; }

/* Paysage forcé : téléphone tenu droit, toute l'application est tournée d'un quart de tour
   (les écrans et fenêtres en position fixe suivent, car le corps transformé leur sert de repère) */
@media (orientation: portrait) {
  body { width: 100vh; height: 100vw; }
  body { position: fixed; top: 0; left: 0; width: 100dvh; height: 100dvw; transform-origin: top left; transform: translateX(100dvw) rotate(90deg); }
}

/* ---------- Réglages, classement, amis ---------- */
.case { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.code { font: 700 1.3em/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; color: var(--or); }
.secret { font-family: ui-monospace, Consolas, monospace; word-break: break-all; background: #10170f; padding: 8px; border-radius: 8px; user-select: all; -webkit-user-select: all; }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 8px 6px; border-bottom: 1px solid var(--bord); text-align: left; }
th { color: var(--doux); font-weight: 400; font-size: .85em; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.note { color: var(--doux); font-size: .9em; }

/* ---------- Fenêtres, aides, messages ---------- */
#modale { position: fixed; inset: 0; background: #000a; display: flex; z-index: 10; }
#modale[hidden], #astuce[hidden], #toast[hidden] { display: none; }
#modale-boite .grandes-etoiles { font-size: 2.2em; color: var(--or); letter-spacing: 4px; }
#modale-boite input { margin-top: 8px; }

#astuce {
  position: fixed; left: 50%; bottom: calc(var(--file) + 12px); transform: translateX(-50%); z-index: 9;
  width: min(460px, calc(100% - 32px)); background: #3b3220; border: 2px solid var(--or); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 6px 24px #000a;
}
#astuce p { margin: 0 0 10px; }
#astuce p::before { content: "💡 "; }

#toast {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 11;
  background: #000d; border: 1px solid var(--or); border-radius: 10px; padding: 8px 14px; max-width: calc(100% - 32px); text-align: center;
}

/* ---------- Habillage médiéval (d'après la planche d'interface) ---------- */
h1, h2, h3, .stats, #banniere b { font-family: Georgia, "Times New Roman", serif; font-variant: small-caps; letter-spacing: .04em; }
button, select {
  background: linear-gradient(#3b3326, #221c14);
  border: 1px solid #7a6235;
  box-shadow: inset 0 1px 0 #ffffff14, 0 2px 4px #0008;
}
button.principal { background: linear-gradient(#94722c, #5c4417); border-color: var(--or); box-shadow: inset 0 1px 0 #ffe9a050, 0 0 10px #e8c54740; }
button.danger { background: linear-gradient(#4a2420, #2a1412); }
button.lien { box-shadow: none; }
#cote { background: linear-gradient(#262d25, #191e18); border-left: 2px solid #6a5530; box-shadow: inset 3px 0 8px #0006; }
#file { background: linear-gradient(#1d231c, #121611); border-top: 2px solid #6a5530; }
.boite { border: 2px solid #7a6235; box-shadow: 0 0 0 1px #000, 0 10px 30px #000c; background: linear-gradient(#2b3329, #1c221b); }
.choix { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.choix button { gap: 1px; padding: 3px 1px; min-height: 0; font-size: .68em; line-height: 1.1; }
.choix button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.choix .icone { width: 32px; height: 32px; }
.icone { width: 46px; height: 46px; border-radius: 7px; display: block; }
.icone.petite { width: 26px; height: 26px; display: inline-block; vertical-align: -7px; border-radius: 5px; }

/* Annonce de vague : en bas à gauche de la carte, portraits et nombre des créatures ; un toucher la ferme */
#banniere {
  position: absolute; left: 8px; bottom: 8px; z-index: 3; max-width: calc(100% - 160px); cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; padding: 5px 10px 6px;
  background: linear-gradient(#8e2020f0, #5a1010f0); border: 2px solid #d6a640; border-radius: 6px;
  box-shadow: 0 6px 20px #000a; opacity: 0;
}
#banniere b { color: #f5e2b0; font-size: 1.05em; text-shadow: 0 2px 2px #000; }
#banniere div { display: flex; gap: 6px; flex-wrap: wrap; }
#banniere figure { margin: 0; display: flex; align-items: center; gap: 4px; }
#banniere img { width: 38px; height: 38px; object-fit: cover; object-position: top; background: #0006; border: 1px solid #d6a64088; border-radius: 6px; }
#banniere figcaption { font-size: .7em; line-height: 1.15; color: #f5e2b0; }
#banniere figcaption i { font-style: normal; font-weight: 700; color: #fff; }
#banniere.entre { animation: banniere-entre .4s ease-out forwards; }
#banniere.sort { animation: banniere-sort .4s ease-in forwards; }
@keyframes banniere-entre { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes banniere-sort { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-30px); } }

/* Raccourcis sur la carte : héros et pouvoirs, tour suivante (à gauche) ; vitesse et pause (en haut à droite) */
#raccourcis, #commandes { position: absolute; z-index: 2; display: flex; gap: 6px; }
#raccourcis { left: 6px; top: 6px; flex-direction: column; }
#commandes { right: 6px; top: 6px; }
#raccourcis button, #commandes button {
  position: relative; width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.2em;
  background: radial-gradient(#3b3326e6, #1c160fe6); border: 2px solid #b88f3e; box-shadow: 0 2px 6px #000b;
}
#commandes button { border-radius: 8px; font-size: 1em; font-weight: 700; }
#raccourcis button span { position: absolute; right: -4px; bottom: -4px; min-width: 18px; padding: 0 3px; border-radius: 9px; background: #000c; color: #f5e2b0; font-size: .55em; line-height: 16px; }
#raccourcis button span:empty { display: none; }
#raccourcis .r-heros { width: 48px; height: 48px; overflow: visible; }
#raccourcis .r-heros img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; border-radius: 50%; }
#raccourcis .r-heros.mort img { filter: grayscale(1) brightness(.6); }
#raccourcis .r-pouvoir.pret { border-color: #ffe27a; box-shadow: 0 0 10px #ffd86b99, 0 2px 6px #000b; }
#raccourcis .r-pouvoir.verrou { filter: grayscale(1); opacity: .55; }
#raccourcis button:disabled { opacity: .6; }
#raccourcis .r-pouvoir.verrou span { font-size: .5em; }
button.pouvoir { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 4px 8px; }
button.pouvoir small { color: var(--doux); font-size: .8em; }
#banniere[hidden] { display: none; }

/* ---------- Mini-carte ---------- */
#mini {
  position: absolute; right: 8px; bottom: 8px; width: 132px; height: 83px; z-index: 2;
  border: 2px solid #7a6235; border-radius: 4px; box-shadow: 0 2px 8px #000a; opacity: .92; touch-action: none;
}

/* ---------- Chargement et accueil (d'après la planche « écran titre ») ---------- */
@font-face { font-family: Cinzel; src: url(fonts/cinzel.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
:root {
  /* Cadre doré à coins coupés des boutons du menu, posé en border-image (le centre s'étire) */
  --cadre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23382a1b'/%3E%3Cstop offset='.5' stop-color='%231c140d'/%3E%3Cstop offset='1' stop-color='%23110b07'/%3E%3C/linearGradient%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f3d48a'/%3E%3Cstop offset='.5' stop-color='%23a87a2a'/%3E%3Cstop offset='1' stop-color='%23604010'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7 1H53L59 7V33L53 39H7L1 33V7Z' fill='url(%23f)' stroke='url(%23o)' stroke-width='2'/%3E%3Cpath d='M8.5 4.5H51.5L55.5 8.5V31.5L51.5 35.5H8.5L4.5 31.5V8.5Z' fill='none' stroke='%23c99a3a' stroke-opacity='.5'/%3E%3C/svg%3E");
  --cadre-voile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23382a1b' stop-opacity='.82'/%3E%3Cstop offset='.5' stop-color='%231c140d' stop-opacity='.78'/%3E%3Cstop offset='1' stop-color='%23110b07' stop-opacity='.86'/%3E%3C/linearGradient%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f3d48a'/%3E%3Cstop offset='.5' stop-color='%23a87a2a'/%3E%3Cstop offset='1' stop-color='%23604010'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7 1H53L59 7V33L53 39H7L1 33V7Z' fill='url(%23f)' stroke='url(%23o)' stroke-width='2'/%3E%3Cpath d='M8.5 4.5H51.5L55.5 8.5V31.5L51.5 35.5H8.5L4.5 31.5V8.5Z' fill='none' stroke='%23c99a3a' stroke-opacity='.5'/%3E%3C/svg%3E");
  --cadre-vif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236a4c22'/%3E%3Cstop offset='.5' stop-color='%23382511'/%3E%3Cstop offset='1' stop-color='%23201408'/%3E%3C/linearGradient%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b8'/%3E%3Cstop offset='.5' stop-color='%23e0a940'/%3E%3Cstop offset='1' stop-color='%238a5a14'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7 1H53L59 7V33L53 39H7L1 33V7Z' fill='url(%23f)' stroke='url(%23o)' stroke-width='2'/%3E%3Cpath d='M8.5 4.5H51.5L55.5 8.5V31.5L51.5 35.5H8.5L4.5 31.5V8.5Z' fill='none' stroke='%23ffd47a' stroke-opacity='.8'/%3E%3C/svg%3E");
}
.ecran { background: var(--fond); }
.ecran.sur-paysage { background: none; }
.logo { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 10px #000c); }
.logo.petit { width: min(200px, 50%, 30vh); margin: -6px auto 0; }

/* Boutons du kit doré (img/bouton-*) : embouts gauche et droit, pointes du centre, milieu répété entre les embouts.
   --h : hauteur, pointes comprises ; les embouts font 0,52 × la hauteur (voir BOUTONS dans tools/images.mjs). */
button.cadre {
  --h: 62px;
  --g: url(img/bouton-sombre-g.webp); --m: url(img/bouton-sombre-m.webp); --c: url(img/bouton-sombre-c.webp); --d: url(img/bouton-sombre-d.webp);
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); min-height: 0; padding: 0 calc(var(--h) * .52 - 1px); box-shadow: none; border-radius: 0; border: none;
  background: var(--m) 0 0 / auto 100% repeat-x content-box;
  font: 600 1.08em/1 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: #f1e2bd;
  text-shadow: 0 2px 2px #000, 0 0 10px #0008;
  filter: drop-shadow(0 3px 5px #000b); transition: filter .15s;
}
button.cadre::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--c) center / auto 100% no-repeat, var(--g) left / auto 100% no-repeat, var(--d) right / auto 100% no-repeat;
}
button.cadre .ic, button.cadre span { position: relative; }
button.cadre .ic { width: 1.35em; height: 1.35em; flex: none; color: #e8c06a; filter: drop-shadow(0 1px 1px #000); }
button.cadre span { flex: 1; text-align: center; padding-right: 1.35em; }
button.cadre.vif {
  --g: url(img/bouton-rouge-g.webp); --m: url(img/bouton-rouge-m.webp); --c: url(img/bouton-rouge-c.webp); --d: url(img/bouton-rouge-d.webp);
  color: #fff3d0; animation: lueur 2.4s ease-in-out infinite;
}
button.cadre:focus-visible { outline: none; }
button.cadre:focus-visible, button.cadre:active:not(:disabled) {
  --g: url(img/bouton-survol-g.webp); --m: url(img/bouton-survol-m.webp); --c: url(img/bouton-survol-c.webp); --d: url(img/bouton-survol-d.webp);
}
@media (hover: hover) {
  button.cadre:hover:not(:disabled) {
    --g: url(img/bouton-survol-g.webp); --m: url(img/bouton-survol-m.webp); --c: url(img/bouton-survol-c.webp); --d: url(img/bouton-survol-d.webp);
  }
}
button.cadre:disabled {
  --g: url(img/bouton-gris-g.webp); --m: url(img/bouton-gris-m.webp); --c: url(img/bouton-gris-c.webp); --d: url(img/bouton-gris-d.webp);
  opacity: 1; color: #a9a9a9; animation: none;
}
button.cadre:disabled .ic { color: #9a9a9a; }
button.cadre:active:not(:disabled) { transform: translateY(1px); filter: drop-shadow(0 1px 2px #000b) brightness(1.15); }
@keyframes lueur {
  0%, 100% { filter: drop-shadow(0 3px 5px #000b) drop-shadow(0 0 6px #f0b44a66); }
  50% { filter: drop-shadow(0 3px 5px #000b) drop-shadow(0 0 14px #f0b44acc); }
}

/* Écran de chargement */
#ecran-chargement { align-items: center; justify-content: center; cursor: pointer; }
.chargement { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(540px, 94%); padding-bottom: 5.4em; }
/* Textes dans une zone de hauteur fixe sous la jauge : quand ils changent, le blason et la jauge ne bougent pas */
.chargement-textes { position: absolute; left: 0; right: 0; bottom: 0; height: 5em; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#charge-texte { white-space: nowrap; }
.chargement .blason {
  display: block; width: min(340px, 78%, 46vh); aspect-ratio: 1; margin-bottom: -2%;
  filter: drop-shadow(0 8px 14px #000d); animation: blason 4s ease-in-out infinite;
}
@keyframes blason {
  0%, 100% { filter: drop-shadow(0 8px 14px #000d) drop-shadow(0 0 10px #ff6a2a33); }
  50% { filter: drop-shadow(0 8px 14px #000d) drop-shadow(0 0 22px #ff8a3a77); }
}
/* Jauge peinte (img/barre-vide) ; l'intérieur de la jauge pleine (img/barre-pleine) se découvre de gauche à droite.
   Canal plein dans barre-vide : 298, 140, 1522 × 82 sur 2132 × 380 (voir tools/images.mjs). */
.jauge-chargement { position: relative; width: 100%; filter: drop-shadow(0 4px 8px #000c); }
.jauge-chargement > img { display: block; width: 100%; height: auto; }
.jauge-chargement span {
  position: absolute; left: 13.977%; top: 36.842%; width: 71.388%; height: 21.579%;
  background: url(img/barre-pleine.webp) 0 0 / 100% 100%; clip-path: inset(0 100% 0 0); transition: clip-path .35s ease-out;
}
.jauge-chargement span i {
  position: absolute; inset: 14% 0; border-radius: 99px; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 30%, #fff7 50%, transparent 70%) no-repeat;
  background-size: 30% 100%; animation: balaye 2.2s linear infinite;
}
/* Front de remplissage : lueur qui avance avec la jauge */
.jauge-chargement b {
  position: absolute; top: 47.6%; left: 13.977%; width: 7%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(#fff6d0, #ffc24acc 30%, #ff8a1a44 55%, transparent 70%); mix-blend-mode: screen; opacity: 0;
  transition: left .35s ease-out, opacity .3s; animation: front 0.5s ease-in-out infinite alternate;
}
.jauge-chargement b.actif { opacity: 1; }
@keyframes front { to { scale: 1.25; } }
@keyframes balaye { from { background-position: -60% 0; } to { background-position: 160% 0; } }
#charge-texte, .pret { margin: 0; font: 600 .95em/1.3 Cinzel, Georgia, serif; letter-spacing: .05em; color: #e9dcbc; text-shadow: 0 2px 3px #000; text-align: center; min-height: 1.3em; }
.pret { color: #ffd77a; font-size: 1.1em; animation: clignote 1.6s ease-in-out infinite; }
.pret[hidden] { display: none; }
@keyframes clignote { 50% { opacity: .35; } }
.version { color: #b5a98a; font-size: .75em; text-shadow: 0 1px 2px #000; }

/* Accueil : logo en haut au centre, menu dessous, joueur en haut à droite, encart d'informations en bas à droite */
.accueil {
  position: absolute; inset: 0; display: grid; gap: 8px 20px;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  grid-template-columns: 1fr minmax(250px, 330px) 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: ". logo joueur" ". menu ." ". menu infos";
}
.accueil .logo { grid-area: logo; width: min(330px, 100%); max-height: 34vh; justify-self: center; }
.accueil .menu { grid-area: menu; display: flex; flex-direction: column; gap: 8px; align-self: start; padding: 0 18px; }
.accueil .menu button[hidden] { display: none; }

.badge-joueur {
  grid-area: joueur; justify-self: end; align-self: start; display: flex; align-items: center; gap: 8px; max-width: 220px;
  border: 10px solid transparent; border-image: var(--cadre) 13 fill / 10px stretch; padding: 0 6px; min-height: 0;
  background: none; box-shadow: none; border-radius: 0; color: #f1e2bd; text-align: left; filter: drop-shadow(0 3px 5px #000b);
}
#accueil-avatar { display: flex; flex: none; }
.badge-joueur span { display: flex; flex-direction: column; min-width: 0; }
.badge-joueur b { font: 700 .95em/1.2 Cinzel, Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-joueur small { color: var(--or); font-size: .8em; }

/* Encart d'informations qui défile (actualités, objectifs, conseils) */
.infos {
  grid-area: infos; align-self: end; justify-self: end; width: min(300px, 100%);
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 8px;
  background: linear-gradient(#1f1a14e8, #0f0c09f0); border: 1px solid #8a6a30; border-radius: 4px;
  box-shadow: inset 0 0 0 3px #0008, inset 0 0 0 4px #c99a3a44, 0 8px 20px #000c; backdrop-filter: blur(3px);
}
.infos header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #c99a3a55; padding-bottom: 4px; }
#info-genre { font: 700 .82em/1 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: #f1d58e; }
#info-pos { color: var(--doux); font-size: .72em; }
.info-corps { display: flex; gap: 10px; align-items: center; min-height: 74px; animation: entree .45s ease-out; }
.info-corps img { width: 54px; height: 54px; border-radius: 6px; border: 1px solid #c99a3a88; flex: none; }
.info-corps div { min-width: 0; flex: 1; }
.info-corps b { display: block; font: 700 .92em/1.25 Cinzel, Georgia, serif; color: #f3e6c6; margin-bottom: 2px; }
.info-corps p { margin: 0; font-size: .82em; line-height: 1.3; color: #d6ccb3; }
.info-corps .jauge-info { margin-top: 5px; height: 8px; background: #000a; border: 1px solid #6a5226; border-radius: 4px; overflow: hidden; }
.info-corps .jauge-info span { display: block; height: 100%; background: linear-gradient(#ffd77a, #d08a22); }
.info-corps small { color: var(--or); font-size: .75em; }
@keyframes entree { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.infos footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fleche { min-height: 0; padding: 2px; width: 26px; height: 22px; background: none; border: none; box-shadow: none; color: #e8b54a; }
.fleche svg { width: 100%; height: 100%; }
.points { display: flex; gap: 6px; }
.points i { width: 7px; height: 7px; border-radius: 50%; background: #5a4a30; }
.points i.actif { background: #ffcf5a; box-shadow: 0 0 6px #ffcf5a; }

/* Écrans bas (téléphone en paysage) : logo à gauche, menu au centre, joueur et encart à droite */
@media (max-height: 540px), (orientation: portrait) and (max-width: 540px) {
  .accueil { grid-template-columns: 1fr minmax(220px, 290px) 1fr; grid-template-rows: auto 1fr; grid-template-areas: "logo menu joueur" "logo menu infos"; gap: 6px 14px; }
  .accueil .logo { align-self: center; max-height: 70vh; }
  .accueil .menu { align-self: center; gap: 6px; }
  button.cadre { --h: 48px; font-size: .98em; }
  button.cadre.petit { --h: 40px; }
  .info-corps { min-height: 62px; }
}
@media (orientation: portrait) and (max-width: 540px) { .accueil .logo { max-height: 70vw; } }



/* ---------- Menu des modes de jeu et contrées fermées (fond : champ de bataille au vent) ---------- */
.entete {
  display: flex; align-items: center; gap: 14px; position: relative;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
}
button.cadre.petit { --h: 46px; font-size: .85em; gap: 6px; }
button.cadre.petit span { padding-right: 0; }
.titre-orne {
  flex: 1; margin: 0; text-align: center; font: 700 1.5em/1.1 Cinzel, Georgia, serif; font-variant: normal; letter-spacing: .06em;
  color: #f6e2ae; text-shadow: 0 2px 3px #000, 0 0 18px #ff9a3a55;
}
.titre-orne::before, .titre-orne::after { content: "❖"; color: #c99a3a; font-size: .6em; vertical-align: .25em; margin: 0 .6em; }
.badge-etoiles {
  font: 700 .9em/1 Cinzel, Georgia, serif; color: var(--or); white-space: nowrap; padding: 8px 12px;
  background: #0009; border: 1px solid #8a6a30; border-radius: 3px; text-shadow: 0 1px 2px #000;
}
.modes {
  flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 250px)); grid-auto-rows: minmax(0, 210px);
  gap: 14px 18px; justify-content: center; align-content: center; padding: 8px 16px 16px; overflow-y: auto;
}
.mode {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-height: 0;
  padding: 6px 8px; border-radius: 0; background: none; box-shadow: none; color: #f1e2bd;
  border: 14px solid transparent; border-image: var(--cadre-voile) 13 fill / 14px stretch; filter: drop-shadow(0 6px 10px #000c);
  transition: transform .15s, filter .15s;
}
.mode:hover, .mode:focus-visible { border-image-source: var(--cadre-vif); transform: translateY(-3px); outline: none; filter: drop-shadow(0 8px 14px #000c) drop-shadow(0 0 10px #f0b44a55); }
.mode > div { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; min-height: 0; }
.mode b { font: 700 1.05em/1.1 Cinzel, Georgia, serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 2px #000; }
.mode p { margin: 0; font-size: .8em; line-height: 1.3; color: #cfc4a8; }
.mode small { margin-top: auto; font: 600 .72em/1 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: var(--or); }
.mode.ferme small { color: #a89a80; }
.mode.ferme .medaillon svg:first-child { opacity: .45; }
.medaillon {
  position: relative; width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a4426, #1a120a 70%); border: 2px solid #c99a3a;
  box-shadow: 0 0 0 3px #0008, 0 0 14px #f0b44a44, inset 0 2px 6px #000a; color: #f2cf7a;
}
.medaillon > svg { width: 58%; height: 58%; filter: drop-shadow(0 1px 1px #000); }
.medaillon i {
  position: absolute; right: -6px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #2a1e14; border: 1.5px solid #c99a3a; color: #e8c06a;
}
.medaillon i svg { width: 14px; height: 14px; }
.contree {
  margin: auto; width: min(460px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 22px 24px 20px; background: linear-gradient(#1f1a14ee, #0f0c09f4); border: 1px solid #8a6a30; border-radius: 4px;
  box-shadow: inset 0 0 0 3px #0008, inset 0 0 0 4px #c99a3a44, 0 12px 30px #000d;
}
.contree .medaillon { width: 76px; height: 76px; }
.contree h2 { margin: 4px 0 0; font: 700 1.2em/1.2 Cinzel, Georgia, serif; font-variant: normal; letter-spacing: .08em; text-transform: uppercase; color: #f1d58e; }
.contree-message { margin: 0; font: 600 1.05em/1.35 Cinzel, Georgia, serif; color: #f3e6c6; text-shadow: 0 2px 2px #000; }
.contree .note { margin: 0 0 6px; }
.contree .cadre { min-width: 200px; }

@media (max-height: 540px), (orientation: portrait) and (max-width: 540px) {
  .titre-orne { font-size: 1.15em; }
  .modes { grid-template-columns: repeat(3, minmax(0, 240px)); grid-auto-rows: auto; gap: 10px 16px; padding-top: 2px; align-content: center; }
  .mode { flex-direction: row; flex-wrap: wrap; align-content: center; text-align: left; gap: 2px 10px; padding: 2px 4px; border-width: 11px; border-image-width: 11px; }
  .mode .medaillon { width: 42px; height: 42px; }
  .mode .medaillon i { width: 19px; height: 19px; right: -5px; }
  .mode .medaillon i svg { width: 11px; height: 11px; }
  .mode > div { min-width: 0; align-items: flex-start; gap: 2px; }
  .mode b { font-size: .92em; }
  .mode p { font-size: .72em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mode small { margin: 0; }
  .contree { padding: 14px 18px; gap: 6px; }
  .contree .medaillon { width: 56px; height: 56px; }
}

/* ---------- Décors peints (accueil, menus) ---------- */
#decor { position: fixed; inset: 0; overflow: hidden; background: #07080b; }
#decor[hidden] { display: none; }
.scene { position: absolute; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
/* Voiles floutés sur l'interface déjà peinte dans l'image, aux bords fondus */
.masques i {
  position: absolute; backdrop-filter: blur(26px) brightness(.22) saturate(.6); -webkit-backdrop-filter: blur(26px) brightness(.22) saturate(.6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect; transform: scale(1.12);
}
/* Colonne centrale et bandeau du bas : fondus larges, pour un voile de brume plutôt que des cadres */
.masques i.colonne { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); transform: none; }
.masques i.bas { -webkit-mask-image: linear-gradient(transparent, #000 28%); mask-image: linear-gradient(transparent, #000 28%); transform: none; }

/* ---------- Carte de campagne (d'après la planche « carte de campagne ») ---------- */
#ecran-carte { background: #07080b; overflow: hidden; }
/* Bandes autour de la carte quand l'écran n'a pas ses proportions : la même peinture, floutée */
#ecran-carte::before {
  content: ""; position: absolute; inset: -40px; background: var(--carte-fond) center / cover;
  filter: var(--carte-filtre, brightness(1)) blur(16px) brightness(.45);
}
.scene.carte { overflow: visible; }
.carte-peinture { position: absolute; inset: 0; }
.carte-peinture.retournee { transform: scaleX(-1); }
.masque-titre, .masque-fleche { position: absolute; backdrop-filter: blur(16px) brightness(.3); -webkit-backdrop-filter: blur(16px) brightness(.3); }
.masque-titre { left: 0; top: 0; width: 38%; height: 26%; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.masque-fleche { right: 0; top: 52%; width: 4.5%; height: 12%; }
#carte-noeuds { position: absolute; inset: 0; }
#ecran-carte .fx { z-index: 1; }

.noeud {
  position: absolute; z-index: 2; transform: translate(-50%, -50%); width: max(34px, calc(64px * var(--k))); aspect-ratio: 1; min-height: 0; padding: 0;
  display: grid; place-items: center; border-radius: 50%; color: #f5e6c0;
  background: radial-gradient(circle at 40% 35%, #4a3a26, #15100b 72%); border: 2px solid #b8872e;
  box-shadow: 0 0 0 2px #000a, 0 4px 10px #000c, inset 0 2px 6px #0009;
}
.noeud b { font: 700 max(14px, calc(26px * var(--k)))/1 Cinzel, Georgia, serif; text-shadow: 0 2px 2px #000; }
.noeud b svg { width: max(14px, calc(24px * var(--k))); height: max(14px, calc(24px * var(--k))); color: #b9a888; }
.noeud .etoiles {
  position: absolute; top: 92%; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; padding: 1px 6px 2px;
  background: #0d0a07e6; border: 1px solid #6a5226; border-radius: 10px; white-space: nowrap;
}
.noeud .etoiles i { font-style: normal; font-size: max(9px, calc(17px * var(--k))); line-height: 1; color: #4a4030; }
.noeud .etoiles i.on { color: #ffcf4a; text-shadow: 0 0 4px #ffb02088; }
.noeud.fait { border-color: #e7b54a; }
.noeud.ferme { filter: saturate(.3) brightness(.7); border-color: #5a4a30; }
.noeud.chef { border-color: #d8443a; box-shadow: 0 0 0 2px #000a, 0 0 12px #ff402866, inset 0 2px 6px #0009; }
.noeud.actuel { border-color: #ffd66e; animation: appel 1.6s ease-in-out infinite; }
@keyframes appel { 50% { box-shadow: 0 0 0 2px #000a, 0 0 18px 4px #ffc84aaa, inset 0 2px 6px #0009; } }
.noeud:active:not(:disabled) { transform: translate(-50%, -50%) scale(.94); }
.heros-pion {
  position: absolute; bottom: 96%; left: 50%; width: max(22px, calc(40px * var(--k))); height: max(22px, calc(40px * var(--k)));
  margin-left: calc(max(22px, calc(40px * var(--k))) / -2); color: #ffd66e; filter: drop-shadow(0 2px 3px #000) drop-shadow(0 0 6px #ffb02088);
  animation: flotte 1.4s ease-in-out infinite;
}
.heros-pion svg { width: 100%; height: 100%; }
@keyframes flotte { 50% { transform: translateY(-4px); } }
.en-cours { position: absolute; top: -10px; right: -18px; font: 700 9px/1 system-ui, sans-serif; background: var(--or); color: #221; padding: 2px 4px; border-radius: 4px; text-transform: uppercase; }
.plaque {
  position: absolute; z-index: 2; transform: translate(-50%, -50%); min-width: max(70px, calc(150px * var(--k))); min-height: 0;
  padding: max(3px, calc(7px * var(--k))) 10px; text-align: center; border-radius: 3px;
  font: 700 max(10px, calc(18px * var(--k)))/1 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: #f1e2bd;
  background: linear-gradient(#2a2016, #120d08); border: 1px solid #a07a32; box-shadow: 0 3px 8px #000c;
}
button.plaque:disabled { opacity: 1; }
.plaque.lien-suite { border-color: #ffd66e; color: #ffe7a8; animation: appel 1.6s ease-in-out infinite; }

.carte-haut {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 18px max(14px, env(safe-area-inset-left));
  background: linear-gradient(#000c, #0000);
}
.carte-titre { flex: 1; margin: 0; font: 700 1.35em/1 Cinzel, Georgia, serif; font-variant: normal; letter-spacing: .08em; text-transform: uppercase; color: #f1d58e; text-shadow: 0 2px 3px #000; }
.bouton-rond {
  width: 44px; height: 44px; min-height: 0; padding: 0; display: grid; place-items: center; color: #e8c06a;
  background: none; box-shadow: none; border-radius: 0; border: 10px solid transparent; border-image: var(--cadre) 13 fill / 10px stretch; box-sizing: border-box;
}
.bouton-rond svg { width: 20px; height: 20px; }
/* Réglages : bouton rond du kit (roue peinte) */
.bouton-rond[data-aller="reglages"] { border: none; background: url(img/rond-roue.webp) center / contain no-repeat; filter: drop-shadow(0 2px 3px #000a); }
.bouton-rond[data-aller="reglages"] svg { display: none; }
.carte-monde {
  position: absolute; z-index: 3; top: 58px; left: max(14px, env(safe-area-inset-left)); width: min(380px, 46%);
  padding: 8px 18px 10px 14px; background: linear-gradient(90deg, #0a0806ee 60%, #0a080600); border-left: 2px solid #c99a3a;
}
.carte-monde h2 { margin: 0 0 4px; font: 700 1.35em/1.1 Cinzel, Georgia, serif; font-variant: normal; letter-spacing: .04em; text-transform: uppercase; color: #f6e2ae; text-shadow: 0 2px 3px #000; }
.carte-monde p { margin: 0 0 4px; font-size: .85em; line-height: 1.3; color: #ddd0b0; }
.carte-monde small { font: 600 .74em/1 Cinzel, Georgia, serif; letter-spacing: .06em; color: var(--or); }
.page-fleche {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 40px; height: 64px; min-height: 0; padding: 6px;
  background: #000a; border: 1px solid #8a6a30; border-radius: 4px; color: #ffcf5a; box-shadow: 0 4px 10px #000c;
}
.page-fleche svg { width: 100%; height: 100%; }
.page-fleche:disabled { display: none; }
.page-fleche.gauche { left: max(8px, env(safe-area-inset-left)); }
.page-fleche.droite { right: max(8px, env(safe-area-inset-right)); }
.bandeau-mondes {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; overflow-x: auto;
  padding: 18px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: linear-gradient(#0000, #000d 35%);
}
.vignette-monde {
  position: relative; flex: 1 0 140px; max-width: 260px; height: 92px; padding: 0; overflow: hidden; border-radius: 3px;
  border: 1px solid #6a5226; background: #000; box-shadow: 0 4px 10px #000c;
}
.vignette-monde img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vignette-monde span {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px 5px;
  background: linear-gradient(#0000, #000e 45%);
}
.vignette-monde b { font: 700 .74em/1.1 Cinzel, Georgia, serif; text-transform: uppercase; letter-spacing: .04em; color: #f1e2bd; text-shadow: 0 1px 2px #000; }
.vignette-monde small { font-size: .72em; color: var(--or); }
.vignette-monde.actif { border: 2px solid #ffd66e; box-shadow: 0 0 14px #ffc84a88, 0 4px 10px #000c; }
.vignette-monde.ferme img { filter: grayscale(.6) brightness(.45); }
.vignette-monde.ferme small { color: #a89a80; }
.vignette-monde .cadenas { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; background: #0009; border: 1px solid #8a6a30; border-radius: 3px; color: #e8c06a; }
.vignette-monde .cadenas svg { width: 15px; height: 15px; }
#modale-boite .ennemis { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#modale-boite .ennemis img { width: 44px; height: 44px; background: #0006; border: 1px solid #7a6235; border-radius: 6px; }

@media (max-height: 540px), (orientation: portrait) and (max-width: 540px) {
  .carte-haut { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 10px; gap: 8px; }
  .carte-titre { font-size: 1.05em; }
  .bouton-rond { width: 38px; height: 38px; }
  .carte-monde { top: 46px; padding: 4px 12px 6px 10px; }
  .carte-monde h2 { font-size: 1em; margin-bottom: 2px; }
  .carte-monde p { display: none; }
  .carte-monde small { font-size: .64em; }
  .bandeau-mondes { padding-top: 10px; gap: 6px; }
  .vignette-monde { flex-basis: 120px; height: 54px; }
  .vignette-monde span { padding: 6px 4px 3px; }
  .vignette-monde b { font-size: .62em; }
  .vignette-monde small { font-size: .62em; }
  .page-fleche { width: 32px; height: 50px; }
}

/* ---------- Cinématiques de l'histoire ---------- */
.cine { position: fixed; inset: 0; z-index: 20; overflow: hidden; background: #000; cursor: pointer; transition: opacity .4s; }
.cine[hidden] { display: none; }
.cine.sortie { opacity: 0; }
.cine-plan { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.cine-plan.visible { opacity: 1; }
.cine-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.cine-fond.flou { filter: blur(12px) brightness(.4) saturate(1.2); }
.cine-tableau { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 8%; }
.cine-tableau[hidden] { display: none; }
.cine-plan.carton .cine-tableau img { filter: brightness(.5); }
.cine-tableau img {
  max-width: 62%; max-height: 66%; border: 3px solid #c99a3a; outline: 1px solid #000; outline-offset: 2px;
  box-shadow: 0 0 0 6px #120d08, 0 0 0 7px #8a6a30, 0 20px 50px #000;
}
.cine-fx, .cine-persos { position: absolute; inset: 0; pointer-events: none; }
.cine-fx { width: 100%; height: 100%; }
.cine-persos .perso {
  position: absolute; bottom: 12%; height: 50%; max-width: 40%; object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent);
  animation: perso-entre 1s ease-out backwards, flotte 3s ease-in-out 1s infinite;
}
.cine-persos .gauche { left: 3%; }
.cine-persos .droite { right: 3%; }
.cine-persos .ennemi { filter: drop-shadow(0 0 16px rgba(255, 40, 60, .55)); }
@keyframes perso-entre { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.cine-bande { position: absolute; left: 0; right: 0; height: 8%; background: #000; }
.cine-bande.haut { top: 0; }
.cine-bande.bas { bottom: 0; }
.cine-texte {
  position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); width: min(860px, 88%); text-align: center;
  padding: 10px 18px 12px; background: radial-gradient(ellipse at center, #000c 30%, #0000 72%);
}
#cine-chapitre { display: block; font: 700 .85em/1 Cinzel, Georgia, serif; letter-spacing: .3em; text-transform: uppercase; color: #c99a3a; }
#cine-titre { margin: 4px 0 0; font: 800 2.4em/1.1 Cinzel, Georgia, serif; font-variant: normal; letter-spacing: .05em; color: #f6dc94; text-shadow: 0 3px 4px #000, 0 0 24px #ff9a3a66; }
#cine-titre:empty { display: none; }
#cine-ligne { margin: 6px 0 0; font: 1.12em/1.45 Georgia, "Times New Roman", serif; color: #f3e9d2; text-shadow: 0 2px 3px #000; min-height: 1.45em; }
#cine-ligne:empty { display: none; }
.cine-texte.carton { bottom: 50%; transform: translate(-50%, 50%); background: radial-gradient(ellipse at center, #000b 20%, #0000 70%); }
.cine-texte.carton #cine-chapitre { font-size: 1em; }
.cine-passer {
  position: absolute; z-index: 2; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 2px; min-height: 34px; padding: 4px 10px 4px 14px;
  font: 700 .85em/1 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: #f1e2bd;
  background: #000a; border: 1px solid #8a6a30; border-radius: 3px; box-shadow: none;
}
.cine-passer svg { width: 12px; height: 12px; color: #e8c06a; }
.cine-passer svg + svg { margin-left: -6px; }
.cine-points { position: absolute; top: max(20px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.cine-points i { width: 18px; height: 3px; background: #ffffff33; border-radius: 2px; }
.cine-points i.actif { background: #e8c06a; }
.cine-suite { position: absolute; right: 4%; bottom: 2.4%; font: 600 .72em/1 Cinzel, Georgia, serif; letter-spacing: .1em; color: #c9b88e; opacity: 0; }
.cine-suite.visible { animation: clignote 1.6s ease-in-out infinite; opacity: 1; }
@media (max-height: 540px), (orientation: portrait) and (max-width: 540px) {
  #cine-titre { font-size: 1.7em; }
  #cine-ligne { font-size: .95em; }
  .cine-persos .perso { height: 46%; bottom: 14%; }
}

/* ---------- Avatars : image du joueur dans le blason doré (img/blason.webp, 135 × 144) ---------- */
/* Formes extérieure et intérieure du blason relevées sur la planche des lignes de classement */
.blason-avatar {
  --l: 96px; position: relative; display: block; flex: none; width: var(--l); aspect-ratio: 135 / 144;
  background: url(img/blason.webp) 0 0 / 100% 100%;
  clip-path: polygon(49.9% 1.4%, 65% 10%, 90% 9.2%, 98.3% 24.5%, 89% 73%, 49.9% 99%, 10.8% 73%, 1.7% 24.5%, 10% 9.2%, 35% 10%);
}
.blason-avatar > * {
  position: absolute; inset: 0;
  clip-path: polygon(49.9% 11%, 64% 16.2%, 84.8% 17%, 87.8% 24%, 84.8% 70.8%, 49.9% 89.4%, 14.7% 70.8%, 11.9% 24%, 15.6% 17%, 36% 16.2%);
}
.blason-avatar img { width: 100%; height: 100%; object-fit: cover; }
.blason-avatar i {
  display: grid; place-items: center; padding-bottom: 6%; font: 700 calc(var(--l) * .4)/1 Cinzel, Georgia, serif; font-style: normal;
  color: #f1d58e; text-shadow: 0 2px 3px #000;
}
.blason-avatar.petit { --l: 34px; }
.avatar-bouton { padding: 0; min-height: 0; background: none; border: none; box-shadow: none; filter: drop-shadow(0 4px 6px #000b); }

/* « Qui joue ? » : joueur actuel en haut, autres profils dessous, retour vers l'accueil en haut à gauche */
.profils h3 { margin: 4px 0 8px; font: 700 .9em/1.2 Cinzel, Georgia, serif; color: var(--doux); }
.profil-actuel { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; text-align: left; }
.profil-actuel b { display: block; font: 700 1.25em/1.2 Cinzel, Georgia, serif; color: #f1d58e; }
.profil-actuel small { display: block; }
.retour-carre { position: absolute; z-index: 2; top: max(10px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
.retour-carre[hidden] { display: none; }
@media (max-height: 540px) {
  .profils .logo.petit { display: none; }
  .profil-actuel .blason-avatar { --l: 72px; }
}

/* ---------- Classement : bannière, onglets, cadre des sous-menus, lignes peintes ---------- */
.classement {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.classement .retour { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
.titre-classement { flex: none; height: clamp(54px, 13vh, 104px); width: auto; filter: drop-shadow(0 4px 8px #000c); }
.onglets-or { flex: none; display: flex; gap: 8px; margin-top: -2px; }
.onglets-or button, .onglets-or select {
  width: clamp(140px, 21vw, 210px); height: auto; aspect-ratio: 500 / 182; min-height: 0; padding: 0 6% 5%;
  border: none; border-radius: 0; box-shadow: none; background: url(img/onglet.webp) 0 0 / 100% 100%;
  font: 600 .82em/1.1 Cinzel, Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #e9dcbc; text-shadow: 0 2px 2px #000; filter: drop-shadow(0 3px 5px #000b);
}
.onglets-or button.actif { background-image: url(img/onglet-actif.webp); color: #fff3d0; }
.onglets-or select { appearance: none; -webkit-appearance: none; text-align: center; text-align-last: center; cursor: pointer; }
.onglets-or option { background: #1a140e; color: #e9dcbc; }
.classement .cadre-menu { max-width: 920px; margin-top: 2px; }
#classement .note { text-align: center; }

/* Lignes : g (médaillon du rang, blason), m (milieu répété), d (hexagone des étoiles, pointe) ; --h : hauteur.
   Embouts : 1,84 et 2,02 × la hauteur ; repères relevés sur la planche (voir LIGNES_CLASSEMENT dans tools/images.mjs). */
.rangs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rang {
  --h: 58px; --g: url(img/ligne-autre-g.webp); --m: url(img/ligne-autre-m.webp); --d: url(img/ligne-autre-d.webp);
  position: relative; display: flex; align-items: center; gap: 10px; height: var(--h);
  padding: 0 calc(var(--h) * 2.02 - 1px) 0 calc(var(--h) * 1.84 - 1px);
  background: var(--m) 0 0 / auto 100% repeat-x content-box;
  font: 600 1em/1 Cinzel, Georgia, serif; color: #f1e2bd; text-shadow: 0 2px 2px #000;
}
.rang::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--g) left / auto 100% no-repeat, var(--d) right / auto 100% no-repeat;
}
.rang .nom, .rang .score { position: relative; top: calc(var(--h) * .08); }
.rang .nom { flex: 1; min-width: 0; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang .score { margin-right: calc(var(--h) * .2); color: #f1d58e; font-variant-numeric: tabular-nums; }
.rang .pos, .rang .etoiles { position: absolute; top: calc(var(--h) * .58); translate: -50% -50%; font-weight: 800; }
.rang .pos { left: calc(var(--h) * .657); font-size: calc(var(--h) * .32); color: #fff3d0; }
.rang .etoiles { right: calc(var(--h) * 1.72); translate: 50% -50%; font-size: calc(var(--h) * .26); }
.rang .blason-avatar.mini {
  --l: calc(var(--h) * .634); position: absolute; left: calc(var(--h) * 1.211); top: calc(var(--h) * .25);
  background: none; clip-path: none;
}
.rang.or { --g: url(img/ligne-or-g.webp); --m: url(img/ligne-or-m.webp); --d: url(img/ligne-or-d.webp); }
.rang.argent { --g: url(img/ligne-argent-g.webp); --m: url(img/ligne-argent-m.webp); --d: url(img/ligne-argent-d.webp); }
.rang.bronze { --g: url(img/ligne-bronze-g.webp); --m: url(img/ligne-bronze-m.webp); --d: url(img/ligne-bronze-d.webp); }
.rang.moi { --g: url(img/ligne-moi-g.webp); --m: url(img/ligne-moi-m.webp); --d: url(img/ligne-moi-d.webp); }
.rang.est-moi .nom { color: #ffe39a; }
@media (max-height: 540px) {
  .titre-classement { height: 50px; }
  .onglets-or button, .onglets-or select { width: 158px; font-size: .68em; }
  .rang { --h: 50px; font-size: .9em; }
}

/* ---------- Sous-menus : cadre doré (img/cadre.webp, 1672 × 941, en border-image), plaque du titre, pointe du bas ---------- */
/* --c : échelle du cadre. Bords peints de 190 (haut), 145 (côtés) et 176 px (bas) sur la planche */
.sous-menu {
  position: absolute; inset: 0; display: flex; justify-content: center;
  padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.cadre-menu {
  --c: .3; position: relative; flex: 1; min-height: 0; width: 100%; max-width: 1100px; display: flex; flex-direction: column;
  border-style: solid; border-color: transparent;
  border-width: calc(190px * var(--c)) calc(145px * var(--c)) calc(176px * var(--c));
  border-image: url(img/cadre.webp) 190 145 176 stretch;
}
/* Fond sombre glissé sous la bande du cadre (bords intérieurs de la bande à 135, 95 et 134 px de la planche) */
.cadre-menu::before { content: ""; position: absolute; z-index: -1; inset: calc(-55px * var(--c)) calc(-50px * var(--c)) calc(-42px * var(--c)); background: #0b0907d9; }
.cadre-menu > .titre-cadre {
  position: absolute; z-index: 1; top: calc(-190px * var(--c)); left: 50%; translate: -50% 0;
  width: calc(757px * var(--c)); height: calc(192px * var(--c)); margin: 0; display: grid; place-items: center;
  background: url(img/cadre-plaque.webp) 0 0 / 100% 100%;
  font: 700 max(13px, calc(46px * var(--c)))/1 Cinzel, Georgia, serif; font-variant: normal; letter-spacing: .08em; text-transform: uppercase;
  color: #f6e2ae; text-shadow: 0 2px 3px #000;
}
.cadre-menu > .pointe {
  position: absolute; z-index: 1; bottom: calc(-130px * var(--c)); left: 50%; translate: -50% 0; pointer-events: none;
  width: calc(262px * var(--c)); height: calc(125px * var(--c)); background: url(img/cadre-pointe.webp) 0 0 / 100% 100%;
}
.cadre-menu > .retour, .cadre-menu > .retour-carre { position: absolute; z-index: 2; top: calc(-90px * var(--c) - 22px); left: calc(15px * var(--c)); }
.cadre-contenu { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 4px; }
.cadre-menu.profils { max-width: 560px; }
.cadre-menu.profils .cadre-contenu { text-align: center; }
.cadre-menu.profils .profil-actuel, .cadre-menu.profils .liste { text-align: left; }
@media (max-height: 540px) { .cadre-menu { --c: .23; } }

/* Blocs des réglages et des amis : deux colonnes quand la place le permet */
.reglages, #amis { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 26px; align-content: start; }
.bloc { min-width: 0; }
.bloc.large { grid-column: 1 / -1; }
.bloc h2 {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #c99a3a55;
  font: 700 1.02em/1.2 Cinzel, Georgia, serif; color: #f1d58e; text-shadow: 0 2px 2px #000;
}
.bloc h2 img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.bloc .note { margin: 4px 0 8px; }
.option { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }

/* Interrupteur (img/interrupteur, 610 × 265) : allumé tel quel ; éteint, en miroir et terni, son bouton recouvert
   d'un bouton sans coche (centre du bouton à 71,3 % de la largeur, diamètre 32,1 %) */
.interrupteur {
  position: relative; flex: none; width: 92px; aspect-ratio: 610 / 265; min-height: 0; padding: 0;
  border: none; border-radius: 0; box-shadow: none; background: url(img/interrupteur.webp) 0 0 / 100% 100%;
}
.interrupteur::after {
  content: ""; display: none; position: absolute; left: 55.25%; top: 49%; width: 32.1%; aspect-ratio: 1; translate: 0 -50%;
  background: url(img/interrupteur-non.webp) 0 0 / 100% 100%;
}
.interrupteur[aria-checked="false"], .interrupteur[aria-checked="false"]:active { transform: scaleX(-1); filter: saturate(.3) brightness(.75); }
.interrupteur[aria-checked="false"]::after { display: block; }

/* Volumes : icône, nom, curseur, valeur. Le rail plein (img/rail-plein) se découvre jusqu'au centre du losange,
   posé sur un range transparent : le losange va de --t/2 à 100 % - --t/2 */
.son { display: grid; grid-template-columns: 26px minmax(6.5em, auto) 1fr 3.6em; align-items: center; gap: 8px; margin: 3px 0; }
.son img { width: 26px; height: 26px; object-fit: contain; }
.son output { text-align: right; font: 700 .88em/1 Cinzel, Georgia, serif; color: #f1d58e; }
.fader { --t: 24px; position: relative; display: block; height: 22px; background: url(img/rail-vide.webp) 0 0 / 100% 100%; }
.fader::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: url(img/rail-plein.webp) 0 0 / 100% 100%;
  clip-path: inset(0 calc(100% - var(--t) / 2 - (100% - var(--t)) * var(--v) / 100) 0 0);
}
.fader input {
  position: absolute; left: 0; top: -4px; width: 100%; height: 30px; min-height: 0; margin: 0; padding: 0;
  background: none; border: none; border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.fader input::-webkit-slider-runnable-track { height: 30px; background: none; }
.fader input::-webkit-slider-thumb { -webkit-appearance: none; width: var(--t); height: 30px; border: none; background: url(img/curseur.webp) center / 100% 100%; }
.fader input::-moz-range-track { background: none; }
.fader input::-moz-range-thumb { width: var(--t); height: 30px; border: none; border-radius: 0; background: url(img/curseur.webp) center / 100% 100%; }

/* Difficulté : cartes peintes, la choisie a sa lueur et sa gemme bleue */
.difficultes { display: grid; grid-template-columns: repeat(3, minmax(0, 210px)); justify-content: center; gap: 12px; }
.carte-diff { aspect-ratio: 586 / 400; min-height: 0; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; }
.carte-diff img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Codes : champ peint (embouts code-g et code-d, milieu étiré) et bouton « copier » posé sur son bout droit.
   Proportions sur la planche, en hauteurs de champ : embout gauche 0,857, droit 0,381, bouton 1,214 × 1,07 */
.champ-code {
  --h: 54px; position: relative; display: flex; align-items: center; height: var(--h); margin: 4px 0;
  padding: 0 calc(var(--h) * 1.57) 0 calc(var(--h) * .857 - 1px);
  background: url(img/code-m.webp) 0 0 / 100% 100% no-repeat content-box;
}
.champ-code::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(img/code-g.webp) left top / auto 100% no-repeat, url(img/code-d.webp) right calc(var(--h) * 1.19) top 0 / auto 100% no-repeat;
}
.champ-code span {
  position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  font: 700 1.25em/1 Cinzel, Georgia, serif; letter-spacing: .12em; color: #fff3d0; text-shadow: 0 2px 3px #000;
}
.champ-code.secret span { font: 600 .74em/1.25 ui-monospace, Consolas, monospace; letter-spacing: 0; white-space: normal; word-break: break-all; }
.champ-code .copier {
  position: absolute; right: 0; top: 50%; translate: 0 -50%; height: calc(var(--h) * 1.07); aspect-ratio: 255 / 225; min-height: 0; padding: 0;
  border: none; border-radius: 0; box-shadow: none; background: url(img/code-copier.webp) 0 0 / 100% 100%;
}

/* Boutons bleus et verts (planche du code ami) : embout gauche à icône, milieu étiré, embout droit */
.boutons-code { display: flex; flex-wrap: wrap; gap: 8px; }
.bouton-code {
  --h: 46px; --g: url(img/bleu-g.webp); --m: url(img/bleu-m.webp); --d: url(img/bleu-d.webp); --kg: 1.436; --kd: .8;
  position: relative; flex: 1 1 200px; height: var(--h); min-height: 0; border: none; border-radius: 0; box-shadow: none;
  padding: 0 calc(var(--h) * var(--kd) - 1px) 0 calc(var(--h) * var(--kg) - 1px);
  background: var(--m) 0 0 / 100% 100% no-repeat content-box;
  font: 600 .92em/1 Cinzel, Georgia, serif; color: #fff3d0; text-shadow: 0 2px 2px #000; filter: drop-shadow(0 3px 4px #000a);
}
.bouton-code::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--g) left / auto 100% no-repeat, var(--d) right / auto 100% no-repeat;
}
.bouton-code span { position: relative; }
.bouton-code.uni { --g: url(img/bleu-uni-g.webp); --kg: .8; }
.bouton-code.vert { --g: url(img/vert-g.webp); --m: url(img/vert-m.webp); --d: url(img/vert-d.webp); --kg: 1.49; --kd: .78; }
@media (max-height: 540px) {
  .champ-code { --h: 46px; }
  .bouton-code { --h: 40px; font-size: .82em; }
  .difficultes { grid-template-columns: repeat(3, minmax(0, 170px)); }
}

/* Petits écrans (téléphone en paysage) : panneau latéral resserré pour tenir sans défiler */
@media (max-height: 540px) {
  #cote { gap: 5px; padding: 5px; }
  .stats { font-size: .95em; }
  .compte { min-height: 28px; }
  #panneau { gap: 4px; font-size: .85em; }
  #panneau .ligne button:not(.cadre) { padding: 4px 6px; }
  #raccourcis button { width: 38px; height: 38px; }
  #raccourcis .r-heros { width: 44px; height: 44px; }
  #raccourcis { gap: 5px; }
}

/* ---------- Défi de la semaine et survie ---------- */
#modale-boite h3 { margin: 12px 0 6px; font-size: .95em; color: var(--or); }
.regle { margin: 10px 0; padding: 10px 12px; border: 1px solid #7a6235; border-radius: 10px; background: linear-gradient(#3a2e1c, #241c12); box-shadow: inset 0 0 12px #e8c54722; }
.regle small { display: block; font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.regle b { display: block; margin: 2px 0; font: 700 1.15em/1.2 Cinzel, Georgia, serif; color: #ffe39a; }
.regle p { margin: 0; font-size: .9em; }
.serie { color: #ffb45a; font-weight: 700; }
.badge-joueur small.serie { color: #ffb45a; }
/* Choix à bascule (monde, carte de survie) */
.opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.opts .opt { flex: 1 1 110px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 0; padding: 6px; font-size: .8em; line-height: 1.15; }
.opts .opt small { font-size: .85em; color: var(--doux); }
.opts .opt[aria-pressed="true"] { border-color: var(--or); background: linear-gradient(#6b5320, #3d2e12); box-shadow: inset 0 1px 0 #ffe9a050, 0 0 10px #e8c54755; }
.mondes-survie .opt { flex: 1 1 70px; max-width: 90px; }
.mondes-survie .opt img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 5px; }
.mondes-survie .opt:not([aria-pressed="true"]) img { filter: saturate(.5) brightness(.75); }
/* Cartes bonus de la survie */
#modale-boite button.carte-bonus { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-color: var(--or); }
#modale-boite button.carte-bonus b { font: 700 1.05em/1.1 Cinzel, Georgia, serif; color: #ffe39a; }
#modale-boite button.carte-bonus small { color: #e3d6b4; font-size: .85em; }
/* Défi « Sans héros » : ni Cristobal ni ses pouvoirs */
#raccourcis.sans-heros .r-heros, #raccourcis.sans-heros .r-pouvoir { display: none; }
#classement .legende { margin: 0 0 6px; }

/* ---------- Fenêtres (fiche d'épreuve, pause, fins de partie…) : le cadre doré des sous-menus, à la taille du contenu ---------- */
#modale-boite.fenetre {
  flex: none; margin: auto; width: min(600px, calc(100% - 24px)); max-height: calc(100% - 10px); text-align: center;
}
#modale-boite.fenetre > .titre-cadre { width: calc(640px * var(--c)); font-size: max(12px, calc(40px * var(--c))); padding: 0 calc(60px * var(--c)); line-height: 1.05; }
#modale-boite.fenetre.sans-titre { border-top-width: calc(150px * var(--c)); }
#modale-boite .cadre-contenu { padding: 2px 6px; }
#modale-boite .cadre-contenu > :first-child { margin-top: 0; }
#modale-boite .cadre-contenu p { margin: 6px 0; }
#modale-boite .boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 8px; flex: none; }
#modale-boite .boutons button.cadre { flex: 1 1 220px; max-width: 320px; font-size: .78em; }
#modale-boite .boutons button.cadre.principal { flex-basis: 100%; max-width: 380px; }
#modale-boite .boutons button.cadre.danger { color: #ffb3a8; }
#modale-boite .boutons button.cadre span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modale-boite .grandes-etoiles { font-size: 1.9em; line-height: 1.1; }
#modale-boite h3 { margin: 4px 0; }
/* Fiche d'épreuve : informations à gauche, créatures à droite (une colonne sur un écran étroit) */
.fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; align-items: center; }
.fiche > div + div { border-left: 1px solid #c99a3a44; padding-left: 14px; }
@media (max-width: 480px) { .fiche { grid-template-columns: 1fr; } .fiche > div + div { border: none; padding: 0; } }
@media (max-height: 420px) { #modale-boite .ennemis img { width: 38px; height: 38px; } }

/* Boutons du panneau de jeu (Appeler, Accélérer, Améliorer, Vendre) : le même kit doré, en petit */
button.cadre.mini { --h: 36px; gap: 4px; font-size: .7em; letter-spacing: .03em; flex: 1 1 auto; min-width: 0; }
button.cadre.mini span { padding-right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.cadre.mini.danger { color: #ffc2b8; }
#p-rush { width: 100%; margin: 6px 0; }
#btn-appeler { flex: none; padding-inline: 20px; }
#modale-boite button.carte-bonus span { display: flex; flex-direction: column; gap: 3px; }
#modale-boite.fenetre > .titre-cadre { width: max-content; min-width: calc(640px * var(--c)); max-width: 92%; white-space: nowrap; padding: 0 calc(110px * var(--c)); }

/* Boutons légers des fenêtres de la partie et du panneau de jeu : filet doré, texte qui passe à la ligne */
button.leger {
  min-height: 40px; padding: 6px 14px; border: 1px solid #a07a32; border-radius: 4px;
  background: linear-gradient(#2a2016, #140e09); box-shadow: inset 0 1px 0 #ffe9a01c, 0 2px 6px #0009;
  font: 600 .92em/1.15 Cinzel, Georgia, serif; letter-spacing: .02em; color: #f1e2bd; text-shadow: 0 1px 2px #000;
}
button.leger span { white-space: normal; }
button.leger.principal { border-color: #e8c547; background: linear-gradient(#6e4c1d, #3b2711); color: #fff1c8; box-shadow: inset 0 1px 0 #ffe9a040, 0 0 8px #e8c54733; }
button.leger.danger { border-color: #9a4a3c; color: #ffc2b8; }
button.leger:disabled { opacity: .5; }
#modale-boite .boutons button.leger { flex: 1 1 170px; max-width: 280px; }
#modale-boite .boutons button.leger.principal { flex-basis: 100%; max-width: 300px; }
button.leger.mini { min-height: 32px; padding: 4px 8px; font-size: .76em; flex: 1 1 auto; min-width: 0; }
#btn-appeler.leger { flex: none; }

/* ---------- Escarmouche : réglages en petits boutons à bascule ---------- */
.opts.petits .opt { flex: 1 1 auto; min-width: 64px; padding: 5px 8px; font-size: .78em; }
.tours-esc .opt { flex: 0 1 58px; min-width: 52px; padding: 4px 2px; font-size: .66em; }
.tours-esc .opt img { width: 30px; height: 30px; }
.tours-esc .opt:not([aria-pressed="true"]) img { filter: grayscale(1) brightness(.6); }

/* ---------- Héroïque : couronnes et carte plongée dans la nuit ---------- */
.couronne-noeud { position: absolute; top: 92%; left: 50%; transform: translateX(-50%); padding: 1px 6px 2px; font-size: max(10px, calc(16px * var(--k))); line-height: 1; background: #0d0a07e6; border: 1px solid #6a5226; border-radius: 10px; filter: grayscale(1) brightness(.5); }
.couronne-noeud.on { filter: drop-shadow(0 0 6px #ffc84acc); }
.couronne-grande { font-size: 2.4em; line-height: 1.1; filter: grayscale(1) brightness(.45); }
.couronne-grande.on { filter: drop-shadow(0 0 10px #ffc84acc); }
#ecran-carte.heroique .carte-peinture { filter: brightness(.62) saturate(.75) hue-rotate(-12deg); }
#ecran-carte.heroique .carte-titre { color: #ffcf7a; text-shadow: 0 2px 3px #000, 0 0 14px #ff6a2a88; }
.pouvoirs { margin: 6px 0 0; padding-left: 1.1em; text-align: left; font-size: .82em; color: #e9dcc0; }
.pouvoirs li { margin: 2px 0; }

/* ---------- Duel : lignes des duels et bilan contre chaque ami ---------- */
.duel-ligne { display: flex; align-items: center; gap: 10px; margin: 4px 0; padding: 6px 10px; text-align: left; border: 1px solid #7a623566; border-radius: 6px; background: #0004; }
.duel-ligne > span { flex: 1; min-width: 0; }
.duel-ligne b { display: block; font: 700 .95em/1.2 Cinzel, Georgia, serif; color: #f1d58e; }
.duel-ligne small { display: block; font-size: .8em; color: var(--doux); }
.duel-ligne button { flex: none; }
table.bilan { width: 100%; border-collapse: collapse; font-size: .85em; }
table.bilan td { padding: 3px 6px; border-bottom: 1px solid #c99a3a33; text-align: left; }
table.bilan td.n { text-align: right; white-space: nowrap; }
/* Escarmouche : une ligne par réglage, l'intitulé à gauche */
.reglage-esc { display: grid; grid-template-columns: 7.5em 1fr; gap: 4px 10px; align-items: center; margin: 5px 0; text-align: left; }
.reglage-esc > h3 { margin: 0 !important; font-size: .82em !important; }
.reglage-esc .opts { justify-content: flex-start; }
.reglage-esc .note { margin: 2px 0 0 !important; font-size: .75em; }
@media (max-width: 480px) { .reglage-esc { grid-template-columns: 1fr; } }
.duel-ligne button.leger { flex: none; }
/* Écran bas (téléphone en paysage) : les boutons d'une fenêtre tiennent sur une seule ligne quand ils sont peu nombreux */
@media (max-height: 500px) {
  #modale-boite .boutons button.cadre.principal, #modale-boite .boutons button.leger.principal { flex-basis: 220px; }
  #modale-boite .boutons { margin-top: 4px; }
}
.reglage-esc .opts .opt { flex: 0 1 auto; }