/* =========================================================
   HUD Missions — style calqué sur #scorePanel (étalon bleuté)
   ========================================================= */

.missionsBox {
  padding: 10px;
  border-radius: 12px;
  font-family: monospace;
  /* 2026-07-28 — fix "HUD Missions sort de la page en basse résolution
     (≤1080px)" : #tileUI (deck.css) est en flex-column avec max-height ;
     .missionsBox (2e enfant, taille variable selon le nombre de missions
     actives) doit pouvoir rétrécir dans cet espace borné plutôt que déborder
     silencieusement hors du viewport. flex:1 1 auto + min-height:0 permet ce
     rétrécissement (comportement flex par défaut sinon bloqué).
     RÉGRESSION CORRIGÉE (même jour) : une 1ère version posait aussi
     overflow-y:auto directement ICI. Ça cassait ENTIÈREMENT le HUD (titre +
     liste invisibles) en thème médiéval, où l'enfant .missionsBox >
     .internal-parchment porte une marge négative de bleed -20px -25px
     (medieval.css, compense la bordure 9-slice 50px) — poser le scroll réel
     sur le PARENT de cet enfant le clippe hors de la zone scrollable
     atteignable (une boîte avec overflow:auto ne peut pas scroller vers un
     contenu qui déborde par une marge négative de son propre enfant : ce
     contenu reste hors de portée, jamais affiché). Exactement le même piège
     déjà rencontré et corrigé pour #scorePanel (base.css, CORRECTIFS v1→v3) :
     leur solution — poser le scroll réel sur l'élément qui porte LUI-MÊME la
     marge négative, jamais sur son parent — est reprise ci-dessous et dans
     medieval.css. Ici : overflow-y:auto reste posé directement (thème bleu,
     où .internal-parchment est display:contents et ne porte aucune marge —
     cf. bleu.css) ; le thème médiéval l'annule et le redéplace plus bas
     (cf. medieval.css). */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  scrollbar-width: thin;
}

/* Titre — identique à .score-title */
.missionsBox .title {
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
}

.missionList {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ligne de mission — position:relative + overflow:hidden pour le liseré ::before.
   flex-direction:column pour empiler le titre court au-dessus de la rangée
   bar+chiffres+icône (2026-07-11).
   2026-08-01 — plusieurs tentatives de resserrement de ce <li> ont toutes été
   rejetées par l'utilisateur (padding/gap réduits, titre raccourci, barre
   étirée...) — remis intégralement à l'état d'origine ci-dessous, à la demande
   explicite de l'utilisateur ("remets comme c'était"). NE PLUS RETOUCHER ce
   bloc (li/title/row/icon/bar) sans confirmation explicite très précise. */
.missionList li.mission-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 5px 8px 5px 13px;   /* padding-left laisse de la place au liseré */
  border-radius: 9px;
  font: 700 12px/1.2 monospace;
  overflow: hidden;
}

/* Titre court au-dessus de la barre (ex: "Construire un village de 17 maisons") */
.missionList .mission-title {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rangée bar + chiffres + icône (ex-contenu direct du li, avant l'ajout du titre) */
.missionList .mission-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Liseré gauche épais — même technique que .stats-card::before */
.missionList li.mission-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  opacity: 0.95;
}

.missionList .mission-empty {
  font-weight: 500;
  padding: 5px 8px;
}

/* ---- Couleurs par type — valeurs pixel-perfect identiques aux .stats-card ---- */

.missionList .mission-item.mission-type-grass  {
  background: linear-gradient(135deg, rgba(131,184,79,0.22), rgba(138,107,62,0.12));
  border-color: rgba(131,184,79,0.38);
}
.missionList .mission-item.mission-type-grass::before  { background: linear-gradient(180deg, #83b84f, #8a6b3e); }

.missionList .mission-item.mission-type-field  {
  background: linear-gradient(135deg, rgba(229,198,90,0.25), rgba(136,98,32,0.11));
  border-color: rgba(229,198,90,0.38);
}
.missionList .mission-item.mission-type-field::before  { background: #e5c65a; }

.missionList .mission-item.mission-type-forest {
  background: linear-gradient(135deg, rgba(63,147,64,0.23), rgba(31,90,43,0.13));
  border-color: rgba(63,147,64,0.38);
}
.missionList .mission-item.mission-type-forest::before { background: linear-gradient(180deg, #3f9340, #1f5a2b); }

.missionList .mission-item.mission-type-house  {
  background: linear-gradient(135deg, rgba(196,154,104,0.22), rgba(111,52,40,0.15));
  border-color: rgba(196,154,104,0.38);
}
.missionList .mission-item.mission-type-house::before  { background: linear-gradient(180deg, #c49a68, #6f3428); }

.missionList .mission-item.mission-type-water  {
  background: linear-gradient(135deg, rgba(95,168,211,0.25), rgba(35,88,130,0.13));
  border-color: rgba(95,168,211,0.38);
}
.missionList .mission-item.mission-type-water::before  { background: #5fa8d3; }

.missionList .mission-item.mission-type-rail   {
  background: linear-gradient(135deg, rgba(221,221,221,0.20), rgba(70,74,80,0.16));
  border-color: rgba(200,200,200,0.30);
}
.missionList .mission-item.mission-type-rail::before   { background: repeating-linear-gradient(180deg, #eeeeee 0 4px, #777777 4px 8px); }

.missionList .mission-item.mission-type-train  {
  background: linear-gradient(135deg, rgba(221,221,221,0.20), rgba(70,74,80,0.16));
  border-color: rgba(200,200,200,0.30);
}
.missionList .mission-item.mission-type-train::before  { background: repeating-linear-gradient(180deg, #eeeeee 0 4px, #777777 4px 8px); }

.missionList .mission-item.mission-type-mill   {
  background: linear-gradient(135deg, rgba(229,198,90,0.25), rgba(136,98,32,0.11));
  border-color: rgba(229,198,90,0.38);
}
.missionList .mission-item.mission-type-mill::before   { background: #e5c65a; }

.missionList .mission-item.mission-type-boat   {
  background: linear-gradient(135deg, rgba(74,184,212,0.22), rgba(30,100,150,0.13));
  border-color: rgba(74,184,212,0.38);
}
.missionList .mission-item.mission-type-boat::before   { background: linear-gradient(180deg, #4ab8d4, #1e6496); }

/* ---- Badge emoji (à droite) ---- */
.missionList .mission-type-icon {
  margin-left: 10px;
  flex: 0 0 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 22px;
  line-height: 1;
}

/* ---- Chiffres (au centre, largeur fixe) ---- */
.missionList .mission-numbers {
  flex: 0 0 95px;
  width: 95px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  white-space: nowrap;
  font-family: 'BebasNeue', system-ui, sans-serif;
}

.missionList .mission-cur {
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}

.missionList .mission-sep {
  font-size: 22px;
  font-weight: 400;
  margin: 0 1px;
  line-height: 1;
}

.missionList .mission-goal {
  font-family: 'BebasNeue', system-ui, sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
}

/* ---- Barre de progression continue (glossy, style CSSFlow/Thibaut Courouble) ──
   2026-07-15 : remplace la barre à graduations discrètes par un fondu continu
   (width% = ratio de progression) avec dégradé glossy + ombre interne, ET la
   palette de couleurs exacte du CodePen fourni par l'utilisateur (rouge->orange->
   jaune->vert selon l'avancement), au lieu de l'ancienne palette bleu/cyan/vert/or. */
.missionList .mission-bar {
  flex: 0 1 50%;
  height: 10px;
  padding: 2px;
  margin-left: 4px;
  background: rgba(0, 0, 0, 0.50);
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55), 0 1px rgba(255, 255, 255, 0.06);
}

.missionList .mission-bar-fill {
  height: 100%;
  min-width: 2px;
  border-radius: 3px;
  background-color: #f63a0f;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.05));
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.15);
  transition: width 0.4s linear, background-color 0.4s linear;
}

.missionList .mission-bar-fill.bar-mid {
  background-color: #f2b01e;
}

.missionList .mission-bar-fill.bar-near {
  background-color: #f2d31b;
}

.missionList .mission-bar-fill.bar-close {
  background-color: #86e01e;
  box-shadow: 0 0 5px rgba(134, 224, 30, 0.75), inset 0 1px rgba(255, 255, 255, 0.15);
}

/* ---- Mission réalisée ---- */
.missionList li.mission-completed {
  opacity: 0.70;
  filter: saturate(0%);
}

.missionList .mission-realised {
  flex: 0 0 auto;
  font-size: 10px;
  font-family: monospace;
  letter-spacing: 0.12em;
  margin-left: 4px;
}

/* ─── [data-theme="bleu"] — apparence actuelle par défaut ─────────────────── */
[data-theme="bleu"] .missionsBox {
  background: rgba(0, 0, 0, 0.68);
  border: 1px solid rgba(120, 180, 255, 0.38);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color: rgba(240, 250, 255, 0.96);
}
[data-theme="bleu"] .missionsBox .title { color: rgba(180, 215, 255, 0.82); }
[data-theme="bleu"] .missionList li.mission-item {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(240, 250, 255, 0.96);
}
[data-theme="bleu"] .missionList .mission-title { color: rgba(220, 235, 255, 0.72); }
[data-theme="bleu"] .missionList .mission-empty { color: rgba(180, 215, 255, 0.42); }
[data-theme="bleu"] .missionList .mission-cur,
[data-theme="bleu"] .missionList .mission-sep,
[data-theme="bleu"] .missionList .mission-goal { color: #ffffff; }
[data-theme="bleu"] .missionList .mission-cur,
[data-theme="bleu"] .missionList .mission-goal { text-shadow: 0 0 16px rgba(90, 170, 255, 0.42); }
[data-theme="bleu"] .missionList .mission-realised { color: rgba(180, 215, 255, 0.55); }

/* ─── [data-theme="ancien"] — parchemin 9-slice, même principe que #scorePanel
   (base.css §32). Padding retiré comme les autres parchemins ; les cartes de
   mission internes passent en fond translucide sombre pour rester lisibles
   sur le parchemin clair. ─── */
[data-theme="ancien"] .missionsBox {
  border: 50px solid transparent;
  border-image-source: url("../images/manuscrit-1.png");
  border-image-slice: 50 fill;
  border-image-repeat: repeat;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  color: #332415;
  font-family: Georgia, "Times New Roman", serif;
  /* 2026-07-28 — CORRECTIF (cf. note détaillée sur la règle .missionsBox non
     thémée ci-dessus) : annule le scroll direct hérité de la règle de base
     (overflow-y:auto), qui clippait le bleed négatif de .internal-parchment
     ci-dessous et rendait tout le HUD invisible. #scorePanel passe display:flex
     + overflow:visible pour la même raison (base.css, CORRECTIF v3) — même
     traitement ici. */
  display: flex;
  flex-direction: column;
  overflow: visible;
}
[data-theme="ancien"] .missionsBox[data-parchment-variant="2"] { border-image-source: url("../images/manuscrit-2.png"); }
[data-theme="ancien"] .missionsBox .title { color: #4a3623; }
/* 2026-07-28 — CORRECTIF : c'est désormais CET élément (et non plus
   .missionsBox, son parent) qui porte le scroll réel — même schéma que
   #scorePanel > .internal-parchment (base.css CORRECTIF v3) : une boîte ne
   clippe jamais sa propre bordure/marge, seulement le contenu débordant de
   SES enfants — le bleed négatif ci-dessous s'affiche donc normalement, et
   .missionList (l'enfant dont la hauteur varie avec le nombre de missions)
   peut scroller dans l'espace restant sans jamais pousser #tileUI hors du
   viewport. La coloration de la scrollbar (::-webkit-scrollbar sur
   .internal-parchment) est déjà générique dans ce fichier de thème,
   cf. medieval.css. */
[data-theme="ancien"] .missionsBox > .internal-parchment {
  margin: -20px -25px -20px -25px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-theme="ancien"] .missionList li.mission-item {
  border: 1px solid rgba(74, 54, 35, 0.20);
  background: rgba(0, 0, 0, 0.06);
  color: #332415;
}
[data-theme="ancien"] .missionList .mission-title { color: #4a3623; }
/* 2026-08-03 — demande explicite : typo Enchanted-Land sur li.mission-empty
   (message "aucune mission" — hérite déjà de Georgia via .missionsBox,
   ≥12px). Les autres lignes de la liste (mission-title/cur/sep/goal/realised,
   qui mêlent souvent des chiffres/progression) restent hors périmètre. */
[data-theme="ancien"] .missionList .mission-empty {
  color: rgba(74, 54, 35, 0.55);
  font-family: 'EnchantedLand', Georgia, "Times New Roman", serif;
  /* 2026-08-03 (round suivant) — jamais de gras sur Enchanted-Land : reset
     du font-weight:500 hérité de la règle de base non thémée. */
  font-weight: 400;
}
[data-theme="ancien"] .missionList .mission-cur,
[data-theme="ancien"] .missionList .mission-sep,
[data-theme="ancien"] .missionList .mission-goal { color: #332415; text-shadow: none; }
[data-theme="ancien"] .missionList .mission-realised { color: #4a3623; }

/* 2026-08-01 — demande explicite : "en dessous d'une certaine résolution
   horizontale, le HUD stats de partie (#scorePanel) est masqué, c'est
   nickel, ne change rien. Pour exactement les mêmes triggers, masque aussi
   .missionsBox." Seuil unique identifié dans base.css : @media
   (max-width: 1050px) { #scorePanel { display: none !important; } } (les
   2 thèmes, display:none !important pour l'emporter sur toute règle de
   spécificité plus élevée). Reprise à l'identique ici — même seuil, même
   !important, même mécanisme — pour .missionsBox. */
@media (max-width: 1050px) {
  .missionsBox {
    display: none !important;
  }
}

/* 2026-08-01 — demande explicite (2e round, "c'est validé, masque aussi ces
   2 HUD en dessous d'une certaine résolution VERTICALE") : équivalent en
   hauteur du masquage horizontal ci-dessus, seuil identique à celui posé
   pour #scorePanel (base.css) — 700px, cf. commentaire détaillé là-bas pour
   la justification du seuil. */
@media (max-height: 700px) {
  .missionsBox {
    display: none !important;
  }
}