.mode-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 20%, rgba(36, 52, 47, 0.95), rgba(7, 13, 16, 0.98));
  color: #f4efd7;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 2026-07-17 — 1er chantier "HUD in-game" du thème Ancien (cf. CONTEXT.md §32) :
   ces 2 écrans pre-game (choix géométrie de la planète, choix/création de partie)
   partagent le même .mode-panel (startupMenu.js/multiplayerRooms.js écrivent
   toutes deux dans .mode-copy/.mode-content du même conteneur), donc thémer
   .mode-panel une fois couvre les deux. Fond/bordure/rayon/couleurs déportés
   dans [data-theme="bleu"]/[data-theme="ancien"] ci-dessous — ce qui reste ici
   est le layout partagé (tailles, structure flex/grid, typographie non colorée). */
.mode-panel {
  width: min(560px, calc(100vw - 32px));
  padding: 28px;
}

.mode-panel h1 {
  margin: 0 0 8px;
  font-size: 30px;
  letter-spacing: 0.04em;
}

.mode-panel p {
  margin: 0 0 18px;
  line-height: 1.45;
}

.mode-actions,
.multi-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.mode-panel button {
  cursor: pointer;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mode-panel input,
.mode-panel select {
  width: 100%;
  box-sizing: border-box;
  margin: 7px 0 12px;
  padding: 11px 12px;
  border-radius: 10px;
  font: inherit;
}

.mode-panel select option {
  color: #111;
}

.mode-panel label {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.multi-status {
  margin-top: 14px;
  min-height: 22px;
  white-space: pre-wrap;
}

/* ─── [data-theme="bleu"] — apparence actuelle par défaut ─────────────────── */
[data-theme="bleu"] .mode-panel {
  border: 1px solid rgba(244, 239, 215, 0.22);
  border-radius: 18px;
  background: rgba(10, 18, 21, 0.82);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
[data-theme="bleu"] .mode-panel p { color: rgba(244, 239, 215, 0.72); }
[data-theme="bleu"] .mode-panel button {
  border: 1px solid rgba(244, 239, 215, 0.26);
  background: rgba(91, 143, 114, 0.92);
  color: #fff9df;
}
[data-theme="bleu"] .mode-panel button.secondary { background: rgba(40, 54, 58, 0.95); }
[data-theme="bleu"] .mode-panel input,
[data-theme="bleu"] .mode-panel select {
  border: 1px solid rgba(244, 239, 215, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #f4efd7;
}
[data-theme="bleu"] .mode-panel label { color: rgba(244, 239, 215, 0.78); }
[data-theme="bleu"] .multi-status { color: #ffd76f; }

/* ─── [data-theme="ancien"] — parchemin 9-slice, même technique que la prez
   (border-image sur images/manuscrit-1.png, cf. css/themes/medieval.css §32).
   2026-07-17 : le logo (.mode-logo) est repassé en flux normal (plus de
   réservation d'espace via padding-top, cf. css/startupMenu.css) — le padding
   est donc retiré sur les 4 côtés comme les autres parchemins (règle "cellule
   centrale sans padding"), plus de cas particulier ici. ─── */
[data-theme="ancien"] .mode-panel {
  border: 50px solid transparent;
  border-image-source: url("../images/manuscrit-1.png");
  border-image-slice: 50 fill;
  border-image-repeat: repeat;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  /* 2026-08-03 — demande explicite : typo "Enchanted-Land" sur les textes de
     menus pre-game en thème médiéval (2e étape après la prez, cf. CONTEXT.md
     §42) — mêmes règles de base que la prez : mêmes dimensions (le
     size-adjust:180% du @font-face, déjà global dans css/themes/medieval.css,
     s'applique automatiquement ici aussi), jamais en dessous de 12px, jamais
     sur les boutons/titres/Bebas Neue, jamais sur formulaires/sélecteurs/
     inputs/chiffres/scores/pourcentages (jeu doit rester lisible/jouable).
     .mode-panel n'a pas de <h1> dans le HTML réel (startupMenu.js/
     multiplayerRooms.js ne génèrent que des <p>/<label>/<input>/<select>/
     <button> — le sélecteur `.mode-panel h1` plus haut dans ce fichier est un
     reliquat sans effet actuel), donc aucune exclusion de titre nécessaire ici.
     Reste donc : .mode-copy/.mode-shape-note (<p>, texte descriptif) passent
     en Enchanted-Land par héritage de cette règle ; .multi-status l'a aussi
     (demande explicite, malgré le code de partie qu'il peut contenir) — voir
     règle dédiée plus bas. Boutons/labels/inputs/selects explicitement
     exclus juste après (revert Georgia, leur apparence pré-Enchanted-Land
     inchangée). */
  font-family: 'EnchantedLand', Georgia, "Times New Roman", serif;
}
/* Exclusions : boutons (a déjà sa propre police monospace plus bas, mais
   reset explicite ici par cohérence/défense), formulaires, sélecteurs —
   reviennent à l'apparence Georgia d'avant ce changement, zéro régression
   visuelle sur ces éléments jamais visés par la demande. */
[data-theme="ancien"] .mode-panel label,
[data-theme="ancien"] .mode-panel input,
[data-theme="ancien"] .mode-panel select,
[data-theme="ancien"] .mode-panel select option {
  font-family: Georgia, "Times New Roman", serif;
  word-spacing: normal;
}
[data-theme="ancien"] .mode-panel[data-parchment-variant="2"] { border-image-source: url("../images/manuscrit-2.png"); }
/* 2026-08-01 — demande explicite : réserve supplémentaire pour le cadre
   décoratif (85px de large, cf. css/themes/medieval.css), qui reste
   au-dessus de ce menu (z-index 99999, jamais modifié — cf. correctif dans
   css/startupMenu.css pour l'historique).
   `overflow` repassé à visible ICI (contrairement à la règle non-thémée,
   cf. css/startupMenu.css) : en médiéval, .internal-parchment est une vraie
   boîte (bordure manuscrit-1.png 9-slice + marge négative de bleed), donc
   c'est ELLE qui doit porter le scroll réel (cf. règle
   `.mode-panel > .internal-parchment` plus bas dans ce fichier) — jamais ce
   conteneur-ci, qui clipperait sinon sa propre bordure/marge (même piège
   déjà documenté sur #scorePanel/.missionsBox/etc.).
   2026-08-01 — CORRECTIF (demande explicite : "continue d'être tronqué
   verticalement et passe sous le cadre sans aucune marge de sécurité") :
   la 1ère version de ce calcul (max-height: calc(100vh - 196px)) oubliait
   la bordure 9-slice de CE parchemin (50px haut + 50px bas = 100px,
   box-sizing:content-box donc ces 100px s'AJOUTENT par-dessus max-height,
   jamais inclus dedans) — et utilisait un plancher de margin-top supposé
   fixe (120px) qui ne correspondait pas à la vraie valeur en vigueur sous
   760px de hauteur (112px, cf. @media dans css/startupMenu.css). D'où un
   déficit de budget d'environ 108px, invisible tant que `.mode-screen`
   reste centré sans scroll propre (le débordement se répartit alors de
   façon imprévisible entre le haut et le bas). Fix : `var(--mp-margin-top)`
   (custom property définie et tenue à jour par css/startupMenu.css, y
   compris sous son propre @media max-height:760px) remplace la constante
   supposée — ce calcul ne peut plus diverger de la vraie valeur de
   margin-top, quel que soit le breakpoint actif — et la bordure 100px est
   maintenant explicitement soustraite.
   2026-08-01 — CORRECTIF 2 (même demande, "sans AUCUNE marge de sécurité") :
   même après le correctif ci-dessus, marge basse de 76px < largeur réelle du
   cadre (85px) → un résidu de 9px restait sous le bandeau. Vérifié en direct
   (1280×600) : marge-basse portée à 100px (85px de cadre + 15px de
   respiration réelle, cohérent avec le choix fait pour .container de la
   prez sur ce même sujet, cf. css/themes/medieval.css) — plus de convention
   "52px" ici, cette réduction n'a jamais été validée par l'utilisateur pour
   CE panneau, contrairement aux HUD in-game où elle avait été explicitement
   demandée. */
[data-theme="ancien"] .mode-screen--with-background .mode-panel {
  overflow: visible;
  margin-bottom: 100px;
  max-height: calc(100vh - var(--mp-margin-top) - 100px - 100px);
}
[data-theme="ancien"] .mode-panel h1,
[data-theme="ancien"] .mode-panel p,
[data-theme="ancien"] .mode-panel label {
  color: #332415;
}
[data-theme="ancien"] .mode-panel p {
  color: #4a3623;
  /* 2026-08-03 — demande explicite : cohérence de taille/graisse avec les
     autres textes Enchanted-Land (prez + HUD in-game, normalisés à 14px /
     font-weight 400) — .mode-copy/.mode-shape-note (<p>) n'avaient jamais
     reçu cet override et héritaient donc de la taille par défaut du
     navigateur (~16px, hors convention) sans reset de graisse.
     2026-08-08 — demande explicite : 14px → 15px. Letter-spacing resserré
     (-0.07em) tenté puis annulé sur demande explicite ("moche et
     illisible") — repassé à "normal" (explicite ici, plutôt que de laisser
     hériter, pour tracer la décision). */
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  /* 2026-08-03 (round suivant) — demande explicite : interligne partagé
     avec la prez (line-height:2.0 sur body/.biome-desc/.creature-desc/etc.,
     css/themes/medieval.css). La règle de base .mode-panel p (non thémée,
     ligne ~31) impose line-height:1.45, explicite donc jamais écrasée par
     l'héritage du html[data-theme="ancien"] (line-height:1.7 global, lui-
     même pas assez de toute façon) — override dédié ici. */
  line-height: 2.0;
}
[data-theme="ancien"] .mode-panel label { color: #4a3623; }
/* Boutons/champs : même principe "cachet de cire" que les chips de la prez
   (.biome-tag/.faction-tag) — fond saturé sombre + texte clair, lisible sur
   parchemin quelle que soit la couleur d'accent d'origine. */
/* 2026-07-19 (corrigé le 2026-07-19, image remplacée le 2026-07-19) — même
   traitement border-image 3-slice que les boutons CTA de la prez
   (images/button2.png, 160x42, cf. css/themes/medieval.css §32) : remplace le
   fond "cachet de cire" plat par le bouton rouge, .secondary compris (une
   seule image bouton, pas de distinction de couleur par rôle — cf. prez où
   .btn-secondary reçoit aussi button2.png malgré son style bleu d'origine
   différent). Cap 8px (mesure réelle du rayon de coin sur button2.png),
   découpage horizontal uniquement. height: 42px FORCÉ (hauteur native de
   l'image, cf. css/themes/medieval.css §32 pour l'explication complète —
   toute autre hauteur déforme le bouton verticalement puisqu'il n'y a pas de
   slice vertical). */
[data-theme="ancien"] .mode-panel button {
  background: none;
  border-style: solid;
  border-width: 0 6px;
  border-image-source: url("../images/button3.png");
  border-image-slice: 0 6 fill;
  border-image-width: 0 6px;
  border-image-repeat: stretch;
  border-radius: 0;
  height: 38px;
  box-sizing: border-box;
  color: #f5e2b8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: filter 0.2s;
  /* 2026-07-20 — .mode-panel button (base, non scopée par thème) ne fixe ni
     font-family ni font-size (fallback : hérite de .mode-panel qui passe en
     Georgia serif ~16px pour le thème ancien juste au-dessus) et impose
     font-weight:800/letter-spacing:0.04em — le plus divergent des boutons
     médiévaux. Aligné ici sur la typo de référence des boutons "Abandonner"/
     "Nouvelle partie" (css/highscore.css) pour uniformiser pre-game + in-game,
     demandé explicitement. */
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
[data-theme="ancien"] .mode-panel button:hover { filter: brightness(1.12); }
[data-theme="ancien"] .mode-panel button.secondary { background: none; color: #f5e2b8; }
[data-theme="ancien"] .mode-panel input,
[data-theme="ancien"] .mode-panel select {
  border: 1px solid rgba(74, 54, 35, 0.4);
  background: rgba(255, 255, 255, 0.35);
  color: #332415;
}
[data-theme="ancien"] .multi-status {
  color: #6b4e10;
  /* 2026-08-03 — même correctif que .mode-panel p ci-dessus : cohérence
     avec la convention 14px / font-weight 400 des autres textes
     Enchanted-Land (prez + HUD in-game).
     2026-08-08 — demande explicite : 14px → 15px. Letter-spacing resserré
     (-0.07em) tenté puis annulé sur demande explicite ("moche et
     illisible") — repassé à "normal". */
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
}

/* ─── .internal-parchment (2026-07-18) — même wrapper/marge négative que la
   prez (cf. css/themes/medieval.css), appliqué ici au menu pre-game unique
   (.mode-panel, javascript/startupMenu.js). Contrairement aux 5 cartes prez
   qui ont dû être corrigées (display:flex/grid direct sur la carte, ou
   overflow:hidden hérité) : .mode-panel n'est ni flex ni grid lui-même (ses
   enfants directs sont en flux normal, cf. .mode-logo repassé en flux le
   2026-07-17), et il est déjà en overflow:visible !important (cf.
   css/startupMenu.css) — donc AUCUNE des 2 corrections nécessaires plus haut
   ne s'applique ici. Wrapper simple, sans piège. */
[data-theme="ancien"] .mode-panel > .internal-parchment { margin: -20px -25px -20px -25px; }

/* 2026-08-01 — demande explicite : ascenseur vertical DANS le parchemin
   (pas sur .mode-screen, qui doit rester sous le cadre décoratif — cf.
   css/startupMenu.css pour l'historique complet). Générique (pas scopé à un
   thème) : .mode-panel est désormais flex column + max-height (startupMenu.css),
   donc .internal-parchment (son unique enfant, cf. javascript/startupMenu.js)
   doit se comporter comme partout ailleurs dans le projet — flex:1 1 auto +
   min-height:0 pour pouvoir rétrécir dans l'espace borné du parent, overflow-y:auto
   pour faire apparaître un ascenseur réel dès que son contenu dépasse cet espace.
   Le thème bleu (pas de bordure 9-slice/bleed négatif) en profite aussi : même
   bug de contenu inatteignable en basse résolution, indépendant du thème. */
.mode-panel > .internal-parchment {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}