html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #0d1b12;
  font-family: 'Segoe UI', Arial, sans-serif;
}

#hexCanvas {
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: grab;
}

#hexCanvas.panning {
  cursor: grabbing;
}

.draggable-window {
  position: fixed;
  width: 300px;
  box-sizing: border-box;
  background: rgba(20, 45, 32, 0.55);
  color: #e8f5e9;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  user-select: none;
  z-index: 500;
}

.draggable-window.dragging {
  opacity: 0.85;
}

.drag-handle {
  cursor: move;
  padding: 5px 12px;
  background: rgba(45, 106, 79, 0.5);
  border-bottom: 1px solid rgba(232, 245, 233, 0.15);
  border-radius: 6px 6px 0 0;
  text-align: center;
  /* Titres de fenetres ("Tour x", "Ressources", "Aperçu"...) volontairement
     plus discrets qu'avant (20px -> 15px). */
  font-size: 15px;
  font-weight: bold;
}

#hud {
  top: 24px;
  left: 24px;
  width: 200px;
}

#hudContent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
}

#toolsWindow {
  top: 24px;
  right: 24px;
}

#toolsContent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
}

/* Fenetre "Rechercher" : un seul champ de filtre (voir applySearchFilter dans
   main.js), commun aux trois catalogues (Ressources/Bonus/Unites) presentes
   en arbre - chaque rubrique est un <details> repliable, la liste de ses
   entrees le "sous-niveau". Cliquer une entree localise ses cases sur la
   carte (surbrillance), exactement comme avant la fusion des deux fenetres. */
#searchWindow {
  bottom: 24px;
  left: 24px;
  /* Meme largeur que la fenetre Apercu (#hud), taille FIXE (le contenu
     defile en interne, plus de poignee de redimensionnement). */
  width: 200px;
  height: 460px;
  display: flex;
  flex-direction: column;
}

#searchWindowContent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}


.search-tree-group {
  border-top: 1px solid rgba(232, 245, 233, 0.1);
  padding-top: 8px;
}

.search-tree-group:first-of-type {
  border-top: none;
  padding-top: 0;
}

.search-tree-group summary {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: bold;
  opacity: 0.9;
  user-select: none;
}

.search-tree-group summary::-webkit-details-marker {
  display: none;
}

.search-tree-group summary::before {
  content: '▶';
  display: inline-block;
  width: 12px;
  font-size: 9px;
  opacity: 0.7;
  transition: transform 0.15s;
}

.search-tree-group[open] summary::before {
  transform: rotate(90deg);
}

.resource-catalog-hint {
  font-size: 11px;
  opacity: 0.75;
  margin: 6px 0 8px;
}

.resource-catalog {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Hauteur fixe (pas juste max-height) : la fenetre, centree verticalement, ne doit
     pas changer de taille (et donc de position) quand le filtre reduit le nombre de
     lignes visibles. */
  height: 170px;
  overflow-y: auto;
}

/* Dans la fenetre Rechercher, les listes Ressources/Bonus/Unités ne defilent
   plus individuellement : la fenetre a desormais sa propre barre de
   defilement globale (voir #searchWindowContent), une par liste ferait
   double emploi. */
#searchWindow .resource-catalog {
  height: auto;
  overflow-y: visible;
}

.resource-catalog-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.resource-catalog-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.resource-catalog-item.active {
  background: #2d6a4f;
}

.resource-catalog-item img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 4px;
}

.tool-section-title {
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  opacity: 0.9;
  margin-bottom: 4px;
}

.tools-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  margin-top: 8px;
}

.tools-field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.tools-field-value {
  font-weight: bold;
  opacity: 0.9;
}

.tools-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  margin: 6px 0;
}

.tools-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #40916c;
  border: 2px solid #e8f5e9;
  cursor: pointer;
}

.tools-field input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #40916c;
  border: 2px solid #e8f5e9;
  cursor: pointer;
}

/* Le focus se pose sur le curseur (::-webkit-slider-thumb ne peut pas etre cible
   directement par :focus, d'ou :focus-visible sur l'input applique via ::thumb). */
.tools-field input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(64, 145, 108, 0.6);
}

.tools-field input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(64, 145, 108, 0.6);
}

.tools-field input[type="text"],
.tools-field select {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(232, 245, 233, 0.25);
  border-radius: 4px;
  color: #e8f5e9;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  padding: 4px 6px;
  box-sizing: border-box;
}

.tools-field select:disabled {
  opacity: 0.5;
}

/* La liste deroulante ouverte est rendue par le systeme/navigateur : le fond
   translucide du champ ferme (rgba) n'y est pas repris, d'ou un fond blanc par
   defaut illisible avec le texte clair. On force donc un fond uni sombre (meme
   teinte que l'arriere-plan general de la page) sur chaque option. */
.tools-field select option {
  background: #0d1b12;
  color: #e8f5e9;
}

.tools-field input[type="text"]:focus,
.tools-field select:focus {
  outline: 1px solid #40916c;
}

.tool-button {
  margin-top: 12px;
  width: 100%;
  padding: 7px 10px;
  background: #2d6a4f;
  color: #e8f5e9;
  border: none;
  border-radius: 4px;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.tool-button:hover {
  background: #368061;
}

.tool-button-danger {
  background: #7a2f2f;
}

.tool-button-danger:hover {
  background: #983939;
}

.tool-status {
  min-height: 14px;
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.8;
}

.hud-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

#terrainIcon {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 6px;
}

#terrainIcon:not([src]) {
  visibility: hidden;
}

#terrainLabel {
  font-size: 18px;
  font-weight: bold;
}

#contentList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#contentList img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 5px;
}

#resourcesBlock {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#resourcesList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#resourcesList li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 27px : a mi-chemin entre l'ancienne taille de l'apercu (32) et celle de
   la fenetre Ressources (22), desormais identiques. */
#resourcesList img {
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  border-radius: 5px;
}

.context-menu {
  position: fixed;
  z-index: 1000;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  user-select: none;
}

/* Barre de saisie du menu contextuel : fine, avec trois points de prise,
   meme vert que les barres de titre des fenetres. */
.context-menu-handle {
  height: 14px;
  cursor: move;
  background: rgba(45, 106, 79, 0.6);
  border-radius: 6px 6px 0 0;
  border: 1px solid rgba(232, 245, 233, 0.25);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.context-menu-handle::before {
  content: '• • •';
  font-size: 8px;
  line-height: 1;
  color: rgba(232, 245, 233, 0.7);
  letter-spacing: 2px;
}

.context-menu > ul {
  border-radius: 0 0 6px 6px !important;
}

.context-menu ul {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  min-width: 170px;
}

.context-menu li {
  position: relative;
}

.context-menu .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 14px;
  color: #e8f5e9;
  cursor: pointer;
  white-space: nowrap;
}

.context-menu li:hover > .item {
  background: #2d6a4f;
}

.item-label-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Raison pour laquelle une action est grisee (voir item.reason dans
   contextmenu.js) : petite ligne sous le libelle, occupe toute la largeur. */
.item-reason {
  flex-basis: 100%;
  font-size: 10.5px;
  opacity: 0.75;
  font-style: italic;
}

.item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 4px;
}

.item-swatch {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid rgba(232, 245, 233, 0.35);
}

.menu-heading {
  pointer-events: none;
}

.menu-heading:not(:first-child) {
  margin-top: 4px;
}

.item-heading {
  padding: 6px 14px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #e8f5e9;
  background: rgba(45, 106, 79, 0.45);
  white-space: nowrap;
}

.item-disabled {
  opacity: 0.4;
  cursor: default;
}

.context-menu li:hover > .item.item-disabled {
  background: transparent;
}

.item-costs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.item-cost {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.item-cost-value {
  font-weight: bold;
}

.item-cost-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.context-menu .arrow {
  opacity: 0.7;
  font-size: 10px;
}

.context-menu .submenu {
  position: absolute;
  top: -5px;
  left: 100%;
  display: none;
}

.context-menu li:hover > .submenu {
  display: block;
}

/* Meme specificite que la regle ci-dessus (elle vient apres, donc l'emporte) :
   sans elle, .context-menu-palette resterait force en display:block au survol
   et perdrait sa mise en page en colonne (info + grille). */
.context-menu li:hover > .context-menu-palette {
  display: flex;
}

.context-menu.flip .submenu {
  left: auto;
  right: 100%;
}

.context-menu-palette {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.palette-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: -10px -10px 6px;
  padding: 6px 12px;
  background: #2d6a4f;
  border-bottom: 1px solid rgba(232, 245, 233, 0.15);
  border-radius: 6px 6px 0 0;
  color: #e8f5e9;
  text-align: center;
  white-space: nowrap;
}

.palette-info-name {
  height: 20px;
  line-height: 20px;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.palette-item {
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(232, 245, 233, 0.2);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.palette-item:hover {
  background: #2d6a4f;
  border-color: #40916c;
}

.palette-item img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  pointer-events: none;
}

/* Attaque (epee) / defense (bouclier) / mouvement (pin) d'une unite : un
   nombre devant chaque icone. Partage entre /play (buildUnitStats dans
   play.js) et l'apercu de l'editeur (renderContentList dans
   admin/maps/js/main.js). */
/* Icones des barres de volume (encart bas-droit) : cliquables, elles coupent
   ou retablissent leur canal (voir soundcorner.js). */
#musicVolumeIcon,
#sfxVolumeIcon {
  cursor: pointer;
  user-select: none;
}

/* Bouton "passer a une autre musique", a gauche du reglage de volume. */
#musicNextBtn {
  background: none;
  border: none;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

#musicNextBtn:hover {
  color: #7fd8a6;
}

.unit-stats {
  display: flex;
  align-items: center;
  /* wrap : la rangee de portee (.unit-range-row, flex-basis 100 %) passe
     sous les badges. */
  flex-wrap: wrap;
  gap: 3px;
  flex-shrink: 0;
}

.unit-stats .points-count {
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0;
}

.unit-stat-icon {
  width: 14px;
  height: 14px;
}

/* Entree d'unite de l'apercu de l'editeur : l'icone de l'unite est centree
   verticalement face aux DEUX lignes de droite (nom, puis stats compactes). */
.unit-entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Rangee du haut : le nom tout a gauche, le niveau eventuel puis l'etoile
   de camp a droite, sur la meme ligne. */
.unit-entry-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.unit-entry-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Niveau de ville incruste dans le coin bas-droit de l'icone : chiffre
   blanc detoure de sombre, comme drawCityLevel sur la carte. */
.unit-icon-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}

.unit-icon-level {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.85),
    1px -1px 0 rgba(0, 0, 0, 0.85),
    -1px 1px 0 rgba(0, 0, 0, 0.85),
    1px 1px 0 rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.unit-star {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

/* Rangee du bas : l'icone du type d'unite (ou de la ville) face a la ligne
   de stats compacte. */
.unit-entry-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Barre de portee d'attaque des apercus (voir UnitPreview.buildStats), sur
   SA propre ligne sous les badges (flex-basis 100 % dans .unit-stats en
   wrap) : icone cible puis 5 cases, remplies de rangeMin a rangeMax - meme
   lecture que la barre de /admin/units. */
.unit-range-row {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
}

.unit-range-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.unit-range-cell {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgba(232, 245, 233, 0.18);
}

.unit-range-cell.active {
  background: #40916c;
}

.unit-stats-line .unit-range-cell {
  width: 8px;
  height: 8px;
}

.unit-entry .unit-stats-line {
  margin-top: 4px;
}

/* Variante compacte de .unit-stats, sur sa propre ligne sous le nom de
   l'unite : icones et chiffres nettement plus petits. Les selecteurs avec
   #contentList sont necessaires pour battre la regle generique
   "#contentList img { width: 40px }" (specificite d'identifiant). */
.unit-stats-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Badges de la rangee du haut dans l'apercu : la regle generique
   "#contentList img { width: 40px }" grossissait le rouage de production
   demesurement. Memes 12 px que dans la fenetre principale ; l'etoile de
   camp est ramenee a la taille des compteurs pour rester discrete. */
#contentList .construction-point,
#contentList .movement-pin {
  width: 12px;
  height: 12px;
}

#contentList .unit-star {
  font-size: 32px;
}

.unit-stats-line .unit-stats {
  gap: 2px;
}

.unit-stats-line .points-count {
  font-size: 10.5px;
  font-weight: normal;
  opacity: 0.85;
}

.unit-stats-line .unit-stat-icon,
#contentList .unit-stats-line .unit-stat-icon {
  width: 20px;
  height: 20px;
  border-radius: 0;
}

/* Encart bas-droit commun /play + editeur (voir common/js/soundcorner.js) :
   volumes musique/ambiance (0-100 %, 0 = coupe) et badge de zoom. */
#bottomRightHud {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #e8f5e9;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(232, 245, 233, 0.2);
}

.volume-control input[type="range"] {
  width: 70px;
  accent-color: #40916c;
}

.volume-value {
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#zoomBadge {
  color: #e8f5e9;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 12px;
  border-radius: 20px;
  pointer-events: none;
}

/* Barre de navigation des pages d'administration (voir common/js/adminnav.js) :
   marque HarmonIA puis onglets, l'onglet de la page courante souligne. */
#adminNav {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 0 18px;
  background: rgba(9, 19, 13, 0.92);
  border-bottom: 1px solid rgba(232, 245, 233, 0.12);
  backdrop-filter: blur(4px);
}

#adminNav .nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 0;
  margin-right: 8px;
  color: #e8f5e9;
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.05em;
  border-right: 1px solid rgba(232, 245, 233, 0.12);
}

#adminNav .nav-brand img {
  width: 26px;
  height: 26px;
}

#adminNav .nav-brand:hover {
  color: #7fd8a6;
}

#adminNav .nav-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  color: #b7d1bf;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#adminNav .nav-tab img {
  width: 18px;
  height: 18px;
}

#adminNav .nav-tab:hover {
  color: #e8f5e9;
  background: rgba(255, 255, 255, 0.05);
}

#adminNav .nav-tab.active {
  color: #e8f5e9;
  border-bottom-color: #40916c;
  background: rgba(64, 145, 108, 0.14);
  cursor: default;
}

/* Selecteur plein ecran de scenarios/parties, partage entre /play et
   l'editeur (voir showPicker dans play.js et main.js). */
#mapPicker {
  position: fixed;
  inset: 0;
  /* Doit rester au-dessus de #hud (.draggable-window, z-index:500 dans le CSS
     partage avec l'editeur) tant qu'aucune carte n'est chargee. */
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 27, 18, 0.85);
}

#mapPicker.hidden {
  display: none;
}

#mapPickerCard {
  position: relative;
  /* Assez large pour deux colonnes de scenarios avec de grands apercus. */
  width: min(820px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: rgba(20, 45, 32, 0.9);
  border: 1px solid rgba(232, 245, 233, 0.15);
  border-radius: 10px;
  padding: 22px;
  color: #e8f5e9;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

#mapPickerCard h2 {
  margin: 0 0 16px;
  font-size: 18px;
  flex-shrink: 0;
}

/* Liste de cartes/parties du selecteur (voir refreshPickerOptions) : chaque
   ligne est cliquable pour se selectionner (voir .selected), le bouton
   "Charger" agit ensuite sur la selection courante - remplace l'ancien
   <select> pour pouvoir afficher la miniature d'apercu de chaque carte
   (voir THUMBNAIL_WIDTH/HEIGHT et thumbnail dans admin/maps/js/main.js) a
   cote de son nom ; les parties (pickerMode 'game') n'ont pas de miniature. */
#mapPickerList {
  list-style: none;
  margin: 0 0 14px;
  padding: 4px;
  /* Deux colonnes de scenarios (une seule sur ecran etroit). */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  flex-shrink: 1;
}

@media (max-width: 640px) {
  #mapPickerList {
    grid-template-columns: minmax(0, 1fr);
  }
}

.map-picker-empty {
  grid-column: 1 / -1;
}

.map-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(232, 245, 233, 0.15);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.map-picker-row:hover {
  background: rgba(255, 255, 255, 0.12);
}

.map-picker-row.selected {
  background: rgba(45, 106, 79, 0.55);
  border-color: #40916c;
}

.map-picker-thumb {
  width: 132px;
  height: 99px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: #0d1b12;
}

.map-picker-name {
  flex: 1;
  min-width: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-picker-empty {
  padding: 10px;
  font-size: 12.5px;
  opacity: 0.7;
}

/* Croix de fermeture en haut a droite d'une fenetre plein ecran :
   selecteurs de scenarios/parties et fenetre "Nouvelle partie" de /play.
   Dans /play sans carte derriere (premier lancement), elle renvoie a
   l'accueil (voir showPicker). */
.close-cross {
  position: absolute;
  top: 12px;
  right: 12px;
  /* Meme apparence que la croix de la fenetre Technologies de /play
     (#techTreeCloseBtn) : un simple x sans fond ni bordure, qui rougit
     au survol. */
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.close-cross:hover {
  color: #e63946;
}

/* Barre d'actions : Supprimer (20%) et Charger (80%) sur la meme ligne. */
#mapPickerActions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-shrink: 0;
}

#mapPickerActions button {
  padding: 12px 8px;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14.5px;
  /* Meme graisse sur Supprimer et Charger. */
  font-weight: bold;
  color: #e8f5e9;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

/* Supprimer : fond rouge, appui long de 2 s (voir HoldButton dans
   common/js/holdbutton.js) - la jauge .picker-hold-fill, un rouge plus
   clair, se remplit de gauche a droite pendant l'appui. */
#mapPickerDeleteBtn {
  flex: 0 0 20%;
  position: relative;
  overflow: hidden;
  background: #8f2f2f;
  border: 1px solid #b04545;
}

#mapPickerDeleteBtn:hover {
  background: #9d3737;
}

#mapPickerDeleteBtn .picker-hold-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: #d9605a;
  pointer-events: none;
}

#mapPickerDeleteBtn .picker-hold-label {
  position: relative;
}

#mapPickerLoadBtn {
  flex: 1;
  background: #2d6a4f;
  border: none;
}

#mapPickerLoadBtn:hover {
  background: #368061;
}

#mapPickerLoadBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#mapPickerStatus {
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.8;
  min-height: 16px;
}


/* Camps du scenario (editeur) : etoiles cochables au-dessus de Sauvegarder. */
#campChecks {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 10px 0 2px;
}

#campChecks label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

#campChecks img {
  width: 18px;
  height: 18px;
}

#campChecks input[type="checkbox"] {
  accent-color: #40916c;
  cursor: pointer;
}

/* Colonne d'infos d'une ligne du selecteur de scenarios : etoiles des camps
   (ligne du haut), nom, puis taille en cases. */
.map-picker-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.map-picker-size {
  font-size: 11px;
  color: #9fb8a8;
}

/* Rappel des camps coches dans les lignes du selecteur de scenarios. */
.map-picker-camps {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.map-picker-camps img {
  width: 14px;
  height: 14px;
}

/* Bandeau de notifications (voir common/js/notifybar.js), partage entre
   /play et l'editeur de scenarios. */
#notifications {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 560;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 480px;
}

.notification {
  background: rgba(20, 45, 32, 0.95);
  border: 1px solid rgba(232, 245, 233, 0.25);
  border-left: 4px solid #40916c;
  border-radius: 8px;
  color: #e8f5e9;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  animation: notification-in 0.2s ease-out;
}

.notification.notification-warning {
  border-left-color: #e63946;
}

.notification.fading {
  transition: opacity 0.6s;
  opacity: 0;
}

@keyframes notification-in {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .notification { animation: none; }
  .notification.fading { transition: none; }
}