/* ================================================================
   STYLE RÉTRO AVENTURE — inspiré Stardew Valley / Zelda LTTP
   Panneaux parchemin sur bois, bordures épaisses biseautées,
   typographie pixel-art, texte sombre lisible sur fond clair.
   ================================================================ */

:root {
  /* Couleurs principales */
  --wood-dark:    #2a1810;   /* fond global */
  --wood:         #5c3a20;   /* bordure extérieure des panneaux */
  --wood-mid:     #7a4f2b;   /* bordure intermédiaire */
  --wood-light:   #a87340;   /* highlight de la bordure (haut/gauche) */
  --parchment:    #f4e4c1;   /* fond des panneaux */
  --parchment-2:  #ead7a8;   /* sections / hover */
  --parchment-dk: #d4b97f;   /* dividers */

  --ink:          #2e1f10;   /* texte principal (encre sombre) */
  --ink-soft:     #5a3a1c;   /* texte secondaire */
  --ink-fade:     #8a6238;   /* texte tertiaire */

  --gold:         #d49a30;   /* doré accent */
  --gold-bright:  #f4c560;   /* doré highlight */
  --green:        #5b8230;
  --red:          #b53a2a;
  --blue:         #3a6e9e;
  --purple:       #6e3a8a;

  /* Effet bevel sur panneaux : double bordure outset/inset */
  --bevel:
    inset  2px  2px 0 rgba(255, 220, 160, .35),
    inset -2px -2px 0 rgba(60, 30, 10, .35);

  /* Ombres */
  --shadow:    0 4px 0 rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 6px 0 rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.55);

  --r:    4px;
  --r-lg: 6px;

  --font-body: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--wood-dark);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .2px;
}

button, input, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

#game {
  display: block;
  width: 100vw; height: 100vh;
  cursor: grab; background: #000;
  image-rendering: pixelated;
}
#game.dragging { cursor: grabbing; }

/* Compteur FPS */
#fps-meter {
  position: fixed; top: 3px; left: 50%; transform: translateX(-50%);
  z-index: 2000001; pointer-events: none;
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600;
  color: rgba(158,255,160,.7); background: rgba(0,0,0,.4);
  padding: 1px 7px; border-radius: 0 0 6px 6px;
  white-space: nowrap;
}
#game.admin    { cursor: crosshair; }
#game.placing  { cursor: copy; }

.hidden { display: none !important; }

/* ============================================================
   PANNEAU PARCHEMIN — utilisé partout via .gb-box
   Structure : bord bois extérieur + bord doré + fond parchemin
   ============================================================ */
.gb-box {
  /* Support transparent. 3 couches à z-index EXPLICITE (robuste quel que soit
     le contexte d'empilement) : ::before = cadre bois (derrière, débordant),
     ::after = note parchemin (couvre la boîte), contenu au-dessus (z-index 2).
     Aucun padding ajouté → ne casse aucun panneau existant. */
  background: transparent;
  color: var(--ink);
  position: relative;
  border: 2px solid #34220f;
  border-radius: 7px;
  box-shadow: 0 5px 14px rgba(0,0,0,.45);
}
.gb-box::before {
  /* CADRE EN BOIS (planche), derrière la note, débordant de 5px. Masqué sur les
     fenêtres overflow:hidden (elles gardent leur rendu net, sans cadre). */
  content: "";
  position: absolute; inset: -5px;
  z-index: 0;
  border-radius: 11px;
  pointer-events: none;
  background-color: #5e3f24;
  background-image:
    repeating-linear-gradient(91deg, rgba(40,24,10,0) 0 5px, rgba(40,24,10,.20) 5px 6px, rgba(150,105,58,.10) 8px 9px),
    linear-gradient(180deg, #71492a, #4d331e);
  box-shadow:
    inset 2px 2px 0 rgba(255,222,165,.16),
    inset -2px -2px 0 rgba(0,0,0,.34),
    0 4px 0 rgba(0,0,0,.24);
}
.gb-box::after {
  /* NOTE parchemin : couvre exactement la boîte (grain papier + relief). */
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  border-radius: 5px;
  pointer-events: none;
  background-color: var(--parchment);
  background-image:
    radial-gradient(ellipse at 30% 18%, rgba(255,245,215,.45), transparent 62%),
    radial-gradient(ellipse at 72% 86%, rgba(120,80,30,.07), transparent 72%),
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(110,70,30,.03) 7px 8px);
  box-shadow:
    inset 0 1px 0 rgba(255,250,232,.7),
    inset 0 0 0 1px rgba(150,110,60,.22);
}
.gb-box > * { position: relative; z-index: 2; }

/* En-tête générique de modal (titre + bouton X) */
.dp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #835a34, #5c3d22);
  border-bottom: 2px solid #34220f;
  border-radius: 6px 6px 0 0;
  margin: 0;
}
.dp-head h2 {
  font-size: 17px; font-weight: 700;
  color: #f3e4c2;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(255,235,190,.16);
  margin: 0;
  letter-spacing: .5px;
}

/* Bouton de fermeture générique (X) — style aventure */
.dp-close {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 18px; font-weight: 700; line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, #c4503a, #8a2a1c);
  border: 2px solid var(--wood);
  border-radius: 6px;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 rgba(255,210,170,.4),
    inset -1px -1px 0 rgba(40,10,5,.5),
    0 2px 0 rgba(0,0,0,.4);
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
  transition: transform .08s, background .12s;
}
.dp-close:hover {
  background: linear-gradient(180deg, #e0644a, #a83524);
  transform: translateY(-1px);
}
.dp-close:active {
  transform: translateY(2px);
  box-shadow:
    inset 1px 1px 0 rgba(40,10,5,.5),
    inset -1px -1px 0 rgba(255,210,170,.3);
}

.gb-title {
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #f3e4c2;
  background: linear-gradient(180deg, #835a34, #5c3d22);
  border-bottom: 2px solid #34220f;
  border-radius: 6px 6px 0 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(255,235,190,.16);
  margin: -1px -1px 6px -1px;
  text-align: center;
}

/* Panneaux déplaçables : on glisse leur barre de titre */
#chat .gb-title,
#top-right .gb-title,
#detail-panel .dp-head {
  cursor: move;
  user-select: none;
}
#chat .gb-title::before,
#top-right .gb-title::before {
  content: "⠿ ";
  opacity: .55;
  letter-spacing: 0;
}
.dragging-panel {
  opacity: .92;
  box-shadow:
    0 0 0 2px var(--gold-bright),
    0 0 0 5px var(--wood-mid),
    var(--shadow-lg) !important;
}

/* ============================================================
   HUD CENTRÉ (info + hint)
   ============================================================ */
#hud {
  display: none;   /* panneaux infos/aide retirés de l'écran */
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  pointer-events: none; z-index: 5;
  max-width: 50vw; text-align: center;
}
#hud > div {
  background: var(--parchment);
  color: var(--ink);
  border: 2px solid var(--wood);
  border-radius: var(--r);
  padding: 4px 14px;
  margin-bottom: 4px;
  font-size: 15px;
  box-shadow: 0 0 0 2px var(--gold), 0 3px 8px rgba(0,0,0,.5);
}
#info { font-weight: 600; }
#hint { font-size: 14px; opacity: .8; }

/* ============================================================
   TOP-LEFT : horloge + joueur + habitants
   ============================================================ */
#top-left {
  position: fixed; top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 9px;
  z-index: 10;
  width: 260px;
}
/* Colonne de DROITE : profil + ressources + chat empilés (par défaut). */
/* Haut-droite : profil seul (Ressources et Chat sont désormais autonomes et
   déplaçables, voir #top-right et #chat). */
#right-col {
  position: fixed; top: 12px; right: 12px;
  width: 248px; z-index: 13;
  display: flex; flex-direction: column; gap: 9px;
  max-height: calc(100vh - 24px);
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
}
#right-col > #player-info {
  /* position:relative (PAS static) : le calque parchemin .gb-box::after
     (position:absolute; inset:0) reste confiné à CE panneau. */
  position: relative;
  width: 100%; min-width: 0;
  top: auto; right: auto; bottom: auto; left: auto;
  flex: 0 0 auto;
}

#status-row {
  display: flex; gap: 8px; align-items: stretch;
}

#game-clock {
  flex: 1;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  color: var(--ink);
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  gap: 9px;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,240,200,.5);
}
#game-clock.night {
  background: linear-gradient(180deg, #d4c4f5, #b8a8e0);
  color: var(--purple);
}
#game-weather {
  cursor: help;
  font-size: 20px;
  line-height: 1;
  display: flex; align-items: center;
}

.gb-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  padding: 0;
  cursor: pointer;
  user-select: none;
  transition: transform .1s;
}
.gb-icon:hover {
  transform: translateY(-2px);
}
.gb-icon:active { transform: translateY(0); }

/* Barre d'outils (grille / guide / patchnote / réglages) — sous le pseudo */
#topbar-tools {
  display: flex; gap: 5px;
  padding: 6px;
}
.tool-btn {
  position: relative;
  flex: 1;
  height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  cursor: pointer; user-select: none;
  border-radius: var(--r);
  background: rgba(0, 0, 0, .12);
  border: 1px solid var(--parchment-dk);
  transition: background .12s, transform .1s, border-color .12s;
}
.tool-btn:hover {
  background: rgba(212,154,48,.30);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.tool-btn:active { transform: translateY(0); }

/* Infobulle météo (effets gameplay) */
#weather-tooltip {
  position: fixed;
  display: none;
  z-index: 300;
  width: 230px;
  background: var(--parchment);
  color: var(--ink);
  border: 2px solid var(--wood);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--gold), 0 6px 16px rgba(0,0,0,.6);
  padding: 9px 11px;
  pointer-events: none;
}
#weather-tooltip .wt-head {
  font-size: 15px; font-weight: 700;
  color: var(--wood);
  border-bottom: 2px solid var(--parchment-dk);
  padding-bottom: 4px; margin-bottom: 5px;
}
#weather-tooltip .wt-desc {
  font-size: 14px; color: var(--ink-soft);
  font-style: italic; margin-bottom: 6px;
}
#weather-tooltip .wt-effects { display: flex; flex-direction: column; gap: 3px; }
#weather-tooltip .wt-eff {
  font-size: 14px; font-weight: 600;
  padding: 3px 7px; border-radius: 3px;
}
#weather-tooltip .wt-eff.good {
  background: rgba(91,130,48,.25);
  color: var(--green-dark);
}
#weather-tooltip .wt-eff.bad {
  background: rgba(181,58,42,.2);
  color: var(--red);
}

/* Encart météo permanent sous l'horloge */
#weather-effect {
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 9px;
}
#weather-effect .we-name {
  font-size: 14px; font-weight: 800;
  color: var(--wood);
  text-transform: uppercase;
  letter-spacing: .6px;
}
#weather-effect .we-eff {
  font-size: 13px; font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
}
#weather-effect .we-eff.good {
  background: rgba(91,130,48,.25);
  color: var(--green-dark);
}
#weather-effect .we-eff.bad {
  background: rgba(181,58,42,.2);
  color: var(--red);
}

/* Point d'exclamation "nouveautés" sur le bouton patchnote */
#patchnote-toggle { position: relative; }
#patchnote-toggle.has-news::after {
  content: "!";
  position: absolute;
  top: -5px; right: -5px;
  width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #e0644a, #a83524);
  color: #fff;
  font-size: 14px; font-weight: 800;
  border: 2px solid var(--wood);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
  animation: pn-bounce 1.4s ease-in-out infinite;
}
@keyframes pn-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

#player-info {
  position: fixed; top: 12px; right: 12px;
  width: 230px; z-index: 13;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 9px;
}
#player-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  display: flex; align-items: center; gap: 9px;
  text-shadow: 0 1px 0 rgba(255,240,200,.5);
}
#player-name::before {
  content: "\01F464";
  font-size: 18px;
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold));
  border: 2px solid var(--wood);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.4);
}
#topbar-buttons { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============================================================
   BOUTONS : style relief biseauté
   ============================================================ */
#topbar-buttons button,
.dp-btn,
button.btn-retro {
  background: linear-gradient(180deg, #8a5e36, #654225);
  color: #f3e4c2;
  border: 2px solid #34220f;
  border-radius: 5px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 rgba(255,222,165,.28),
    inset -1px -2px 0 rgba(0,0,0,.40),
    0 2px 0 rgba(0,0,0,.40);
  transition: transform .08s, box-shadow .08s;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
#topbar-buttons button:hover,
.dp-btn:hover,
button.btn-retro:hover {
  background: linear-gradient(180deg, #a3733f, #7a5230);
}
#topbar-buttons button:active,
.dp-btn:active,
button.btn-retro:active {
  transform: translateY(2px);
  box-shadow:
    inset 1px 1px 0 rgba(80,40,10,.3),
    inset -1px -1px 0 rgba(255,240,200,.3),
    0 0 0 rgba(0,0,0,.35);
}

#topbar-buttons button#place-hdv {
  background: linear-gradient(180deg, #b9d68a, #8aaf4a);
  color: #1f3a08;
}
#topbar-buttons button#logout {
  background: linear-gradient(180deg, #e4a690, #c47a60);
  color: #3a1208;
}

/* Gros bouton central "Poser mon Hôtel de Ville" — mis en avant tant que le
   joueur n'a pas encore de HDV (sinon il est masqué via .hidden par le JS). */
#place-hdv {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%);
  z-index: 40;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--ink);
  border: 3px solid var(--wood);
  border-radius: var(--r-lg);
  padding: 15px 42px;
  font-family: var(--font-body);
  font-size: 21px; font-weight: 800; letter-spacing: .5px;
  text-shadow: 0 1px 0 rgba(255,245,210,.55);
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 rgba(255,250,220,.6),
    0 0 0 2px var(--gold),
    0 0 0 5px var(--wood-mid),
    0 8px 18px rgba(0,0,0,.5);
  animation: place-hdv-pulse 1.6s ease-in-out infinite;
}
#place-hdv:hover { background: linear-gradient(180deg, #ffd982, var(--gold-bright)); }
#place-hdv:active { transform: translateX(-50%) translateY(2px); }
@keyframes place-hdv-pulse {
  0%, 100% { box-shadow: inset 1px 1px 0 rgba(255,250,220,.6), 0 0 0 2px var(--gold), 0 0 0 5px var(--wood-mid), 0 8px 18px rgba(0,0,0,.5), 0 0 14px rgba(244,197,96,.4); }
  50%      { box-shadow: inset 1px 1px 0 rgba(255,250,220,.6), 0 0 0 2px var(--gold), 0 0 0 5px var(--wood-mid), 0 8px 18px rgba(0,0,0,.5), 0 0 32px rgba(255,210,110,.9); }
}

/* ============================================================
   TOP-RIGHT : ressources (parchemin façon "inventaire")
   ============================================================ */
/* Panneau Ressources : ancré dans la colonne de droite (cf. #right-col). Titre
   fixe + liste qui DÉFILE en interne → quand on a beaucoup de ressources, le
   panneau ne pousse plus le chat hors de l'écran. */
/* Panneau Ressources : autonome (sorti de #right-col), ancré sous le profil,
   déplaçable. position:fixed → le parchemin reste confiné. Liste défilante. */
#top-right {
  position: fixed; top: 124px; right: 12px;
  width: 248px; z-index: 12;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 136px);
}
#resource-bar {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 4px 6px 6px;
  gap: 2px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
}
#storage-meter {
  margin: 2px 4px 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--parchment-dk);
}
.sm-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.sm-label b {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--wood);
}
.sm-track {
  height: 9px;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--wood);
  border-radius: 5px;
  overflow: hidden;
}
.sm-fill {
  height: 100%;
  transition: width .3s ease, background .3s;
}
#resource-bar .res {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px; align-items: center;
  padding: 4px 10px;
  border-radius: var(--r);
  transition: background .12s;
  font-size: 15px;
}
#resource-bar .res:hover { background: rgba(212,154,48,.18); }
#resource-bar .res .ic { font-size: 18px; text-align: center; }
#resource-bar .res::after {
  content: attr(title);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
}
#resource-bar .res .qty {
  font-family: var(--font-mono);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--wood);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,240,200,.5);
}
.res-empty {
  padding: 6px 10px;
  font-size: 14px;
  font-style: italic;
  color: var(--ink-fade);
  text-align: center;
}

/* Bouton "Historique" dans le panneau Ressources */
#stats-open-btn {
  margin: 8px 4px 2px;
  padding: 7px 8px;
  background: linear-gradient(180deg, #c89860, #8a5a2a);
  border: 2px solid var(--wood);
  border-radius: var(--r);
  color: #f4e4c1;
  font-family: inherit;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  box-shadow: inset 1px 1px 0 rgba(255,220,160,.3), 0 2px 0 rgba(0,0,0,.35);
  transition: transform .1s, box-shadow .1s;
}
#stats-open-btn:hover {
  transform: translateY(-2px);
  box-shadow: inset 1px 1px 0 rgba(255,220,160,.3), 0 4px 0 rgba(0,0,0,.35), 0 0 0 2px var(--gold-bright);
}

/* --- Page Historique des ressources --- */
#stats-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .8);
  display: flex; align-items: center; justify-content: center;
  z-index: 400;
  backdrop-filter: blur(3px);
}
#stats-box {
  width: 720px; max-width: 95vw;
  height: 640px; max-height: 90vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
#stats-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px 20px;
}
.rh-msg {
  padding: 40px 20px;
  font-size: 16px;
  font-style: italic;
  color: var(--ink-fade);
  text-align: center;
  line-height: 1.6;
}
.rh-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 0 2px 10px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--parchment-dk);
}
.rh-refresh {
  background: rgba(0,0,0,.2);
  border: 1px solid var(--wood);
  border-radius: 5px;
  color: var(--wood);
  cursor: pointer;
  font-size: 15px;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.rh-refresh:hover { background: rgba(212,154,48,.25); }
.rh-day {
  border: 1px solid var(--parchment-dk);
  border-radius: var(--r);
  background: rgba(0,0,0,.08);
  padding: 10px 12px;
  margin-top: 12px;
}
.rh-day-head {
  font-size: 15px; font-weight: 700;
  color: var(--wood);
  margin-bottom: 4px;
  text-shadow: 0 1px 0 rgba(255,240,200,.4);
}
.rh-legend {
  display: flex; gap: 14px;
  font-size: 13px;
  color: var(--ink-fade);
  margin-bottom: 8px;
}
.rh-legend .prod { color: #4a9e4a; }
.rh-legend .cons { color: #c4564a; }
.rh-res {
  display: grid;
  grid-template-columns: 28px 1fr 52px;
  gap: 10px; align-items: center;
  padding: 5px 2px;
}
.rh-res + .rh-res { border-top: 1px dashed var(--parchment-dk); }
.rh-ic { font-size: 20px; text-align: center; }
.rh-bars { display: flex; flex-direction: column; gap: 3px; }
.rh-barline {
  display: flex; align-items: center; gap: 6px;
  height: 14px;
}
.rh-bar {
  height: 12px;
  border-radius: 3px;
  min-width: 2px;
  transition: width .3s ease;
}
.rh-bar.prod { background: linear-gradient(180deg, #6cc46c, #3f8a3f); }
.rh-bar.cons { background: linear-gradient(180deg, #e0796c, #b03c30); }
.rh-val {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.rh-net {
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 700;
  text-align: right;
}
.rh-net.pos { color: #3f8a3f; }
.rh-net.neg { color: #b03c30; }

/* ============================================================
   CHANTIER NAVAL / BATEAU
   ============================================================ */
#shipyard-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .8);
  display: flex; align-items: center; justify-content: center;
  z-index: 400;
  backdrop-filter: blur(3px);
}
#shipyard-box {
  width: 480px; max-width: 95vw;
  height: 560px; max-height: 90vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
#shipyard-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px 18px;
}
.sy-section { display: flex; flex-direction: column; }
.sy-title {
  font-size: 15px; font-weight: 700;
  color: var(--wood);
  margin-bottom: 6px;
}
.sy-desc {
  font-size: 14px; color: var(--ink-soft);
  margin: 0 0 12px; line-height: 1.4;
}
.sy-cost {
  font-size: 15px; color: var(--ink-soft);
  margin-bottom: 4px;
}
.sy-subtitle {
  font-size: 14px; font-weight: 700;
  color: var(--wood);
  text-transform: uppercase; letter-spacing: 1px;
  margin: 14px 2px 6px;
  border-bottom: 1px solid var(--parchment-dk);
  padding-bottom: 3px;
}
.sy-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 6px 4px;
  font-size: 15px;
  color: var(--ink);
}
.sy-row + .sy-row { border-top: 1px dashed var(--parchment-dk); }
.sy-progress-track {
  height: 16px;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--wood);
  border-radius: 6px;
  overflow: hidden;
  margin: 8px 0 6px;
}
.sy-progress-fill {
  height: 100%;
  background: linear-gradient(180deg, #6cc4d4, #3f8a9a);
  transition: width .4s ease;
}
.sy-remain {
  font-size: 14px; color: var(--ink-soft);
  text-align: center;
}
.sy-build { margin-top: 10px; align-self: flex-start; }

/* ============================================================
   MARCHÉ ENTRE JOUEURS (bâtiment Marchand)
   ============================================================ */
/* ============================================================
   BOURSE — achat/vente de ressources contre or, au cours du marché
   ============================================================ */
#bourse-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .8);
  display: flex; align-items: center; justify-content: center;
  z-index: 400;
  backdrop-filter: blur(3px);
}
#bourse-box {
  width: 660px; max-width: 95vw;
  height: 640px; max-height: 90vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.bourse-gold {
  margin-left: auto;
  font-weight: 800; font-size: 16px; white-space: nowrap;
  color: #f7d860; text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
#bourse-body {
  flex: 1; overflow-y: auto;
  padding: 10px 14px 14px;
  display: flex; flex-direction: column;
}
.brs-msg { padding: 30px 16px; font-style: italic; color: var(--ink-fade); text-align: center; }
.brs-head-row, .brs-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 0.7fr 2fr;
  align-items: center; gap: 8px;
}
.brs-head-row {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--wood); padding: 0 8px 6px; border-bottom: 2px solid var(--wood);
}
.brs-head-row span:nth-child(3) { text-align: center; }
.brs-head-row span:nth-child(4) { text-align: right; }
.brs-list { display: flex; flex-direction: column; }
.brs-row { padding: 7px 8px; border-bottom: 1px solid rgba(120,80,40,.25); }
.brs-row:nth-child(odd) { background: rgba(0,0,0,.05); }
.brs-res { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); cursor: pointer; border-radius: 4px; }
.brs-res:hover { color: var(--wood); text-decoration: underline; }
.brs-res::after { content: '📊'; font-size: 11px; opacity: .35; }
.brs-res:hover::after { opacity: .9; }
.brs-icon { font-size: 18px; }
.brs-quote { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.brs-cours { font-size: 17px; font-weight: 800; color: var(--ink); }
.brs-gold { font-size: 12px; }
.brs-trend { font-size: 13px; font-weight: 800; }
.brs-trend.up { color: #2faa4a; }
.brs-trend.down { color: #cc3b3b; }
.brs-trend.flat { color: var(--ink-fade); }
.brs-spread { width: 100%; font-size: 11px; color: var(--ink-fade); }
.brs-stock { text-align: center; color: var(--ink-soft); font-weight: 700; }
.brs-actions { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.brs-qty {
  width: 56px; padding: 5px 6px;
  border: 2px solid var(--wood); border-radius: var(--r);
  background: rgba(255,250,235,.6); color: var(--ink);
  font-family: inherit; font-weight: 700; text-align: center;
}
.brs-btn {
  border: none; border-radius: var(--r);
  font-family: inherit; font-weight: 800; font-size: 13px;
  padding: 6px 9px; cursor: pointer;
  transition: filter .12s, transform .05s;
}
.brs-btn:active { transform: translateY(1px); }
.brs-btn:disabled { opacity: .5; cursor: default; }
.brs-buy { background: linear-gradient(180deg,#7fc98a,#46924f); color: #10300f; }
.brs-sell { background: linear-gradient(180deg,#e6b15a,#c07f30); color: #2a1606; }
.brs-btn:hover { filter: brightness(1.08); }
.brs-foot {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(120,80,40,.3);
  font-size: 12px; font-style: italic; color: var(--ink-fade);
}

/* Bouton Bourse en tête de la barre des catégories (accent doré) */
.cat-btn.cat-bourse .cat-ic,
.cat-btn.cat-bourse .cat-label { color: #b5832e; }
.cat-btn.cat-bourse { box-shadow: inset 0 0 0 1px rgba(212,154,48,.35); }

/* ---- Graphique de cours (style trading) ---- */
#bchart-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .8);
  display: flex; align-items: center; justify-content: center;
  z-index: 410;
  backdrop-filter: blur(3px);
}
#bchart-box {
  width: 680px; max-width: 95vw;
  height: 460px; max-height: 88vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
#bchart-body { flex: 1; padding: 10px 12px 12px; min-height: 0; }
#bchart-canvas { width: 100%; height: 100%; display: block; }

/* ============================================================
   CLASSEMENT (leaderboard par richesse)
   ============================================================ */
.lb-btn {
  flex: 0 0 auto;
  background: linear-gradient(180deg, #f3d24a, #d49a30);
  border: 2px solid #5c3d22; border-radius: 8px;
  font-size: 20px; line-height: 1; padding: 0 12px;
  cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.3);
  transition: filter .12s, transform .05s;
}
.lb-btn:hover { filter: brightness(1.08); }
.lb-btn:active { transform: translateY(1px); }

#leaderboard-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .8);
  display: flex; align-items: center; justify-content: center;
  z-index: 650; backdrop-filter: blur(3px);   /* > .landing (600) : visible depuis le menu d'accueil */
}
#leaderboard-box {
  width: 520px; max-width: 95vw;
  height: 600px; max-height: 90vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
#leaderboard-body { flex: 1; overflow-y: auto; padding: 10px 14px 16px; }
.lb-msg { padding: 30px 16px; font-style: italic; color: var(--ink-fade); text-align: center; line-height: 1.5; }
.lb-head, .lb-row {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px;
}
.lb-head {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--wood); padding: 0 10px 6px; border-bottom: 2px solid var(--wood);
}
.lb-head span:last-child { text-align: right; }
.lb-list { display: flex; flex-direction: column; }
.lb-row {
  padding: 9px 10px; border-bottom: 1px solid rgba(120,80,40,.22);
  font-weight: 700; color: var(--ink);
}
.lb-row:nth-child(odd) { background: rgba(0,0,0,.04); }
.lb-rank { font-size: 18px; text-align: center; }
.lb-num { font-size: 14px; color: var(--ink-soft); font-weight: 800; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-you { color: var(--wood); font-weight: 800; font-size: 12px; }
.lb-gold { text-align: right; color: #b5832e; font-weight: 800; white-space: nowrap; }
.lb-row.lb-top .lb-gold { color: #9a6a12; }
.lb-row.lb-me {
  background: linear-gradient(180deg, rgba(243,210,74,.30), rgba(212,154,48,.18));
  box-shadow: inset 0 0 0 2px rgba(181,131,46,.55); border-radius: 6px;
}

#market-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .8);
  display: flex; align-items: center; justify-content: center;
  z-index: 400;
  backdrop-filter: blur(3px);
}
#market-box {
  width: 600px; max-width: 95vw;
  height: 600px; max-height: 90vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
#market-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 18px;
  display: flex; flex-direction: column;
}
.mk-tabs {
  display: flex; gap: 6px;
  margin-bottom: 10px;
}
.mk-tab {
  flex: 1;
  background: rgba(0,0,0,.18);
  border: 2px solid var(--wood);
  border-radius: var(--r);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 15px; font-weight: 700;
  padding: 8px 4px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mk-tab:hover { background: rgba(212,154,48,.22); }
.mk-tab.active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,250,200,.5);
}
.mk-msg {
  padding: 30px 16px;
  font-size: 15px; font-style: italic;
  color: var(--ink-fade);
  text-align: center; line-height: 1.5;
}
.mk-subtitle {
  font-size: 14px; font-weight: 700;
  color: var(--wood);
  text-transform: uppercase; letter-spacing: 1px;
  margin: 14px 2px 6px;
}
.mk-list { display: flex; flex-direction: column; gap: 8px; }
.mk-offer {
  border: 2px solid var(--wood);
  border-radius: var(--r);
  background: rgba(0,0,0,.08);
  padding: 9px 11px;
}
.mk-offer-off { opacity: .55; filter: saturate(.5); }
.mk-offer-trade {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  flex-wrap: wrap;
}
.mk-give { color: #3f7a3f; }
.mk-price { color: #9a5a1e; }
.mk-arrow { color: var(--wood); font-size: 16px; }
.mk-offer-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
}
.mk-seller {
  font-size: 14px;
  color: var(--ink-soft);
}
.mk-badge-off {
  background: linear-gradient(180deg, #e0644a, #a83524);
  color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 1px 6px; border-radius: 8px;
  margin-left: 4px;
}
.mk-btn {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 2px solid var(--wood);
  border-radius: var(--r);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px; font-weight: 700;
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .1s;
}
.mk-btn:hover:not(:disabled) { transform: translateY(-2px); }
.mk-btn:disabled { opacity: .5; cursor: not-allowed; }
.mk-cancel {
  background: linear-gradient(180deg, #d98a7a, #b04a3a);
  color: #fff;
}
.mk-form {
  border: 2px solid var(--wood);
  border-radius: var(--r);
  background: rgba(212,154,48,.12);
  padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.mk-form-title {
  font-size: 15px; font-weight: 700;
  color: var(--wood);
}
.mk-form-row {
  display: flex; align-items: center; gap: 8px;
}
.mk-form-lbl {
  font-size: 15px; font-weight: 700;
  color: var(--ink-soft);
  width: 56px;
}
.mk-inp {
  width: 64px;
  background: #0e1410; color: #fff;
  border: 1px solid var(--wood);
  border-radius: 4px;
  padding: 5px 6px;
  font-family: var(--font-mono);
  font-size: 15px;
}
.mk-sel {
  flex: 1;
  background: #0e1410; color: #fff;
  border: 1px solid var(--wood);
  border-radius: 4px;
  padding: 5px 6px;
  font-size: 15px;
}
.mk-create { align-self: flex-start; margin-top: 2px; }

/* ============================================================
   PALETTE BAS — bâtiments en cartes type "inventaire RPG"
   ============================================================ */
/* ----- RAIL CATÉGORIES (gauche) ----- */
/* ----- BARRE DE CATÉGORIES (bas centre, style Cities: Skylines / Anno) ----- */
#left-sidebar {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100vw - 24px);
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: stretch; justify-content: center;
  gap: 2px;
  padding: 6px;
  overflow-x: auto; overflow-y: visible;
  z-index: 12;
  /* Barre = UNE seule planche bois (on neutralise le cadre+note générique
     des .gb-box, sinon double cadre par-dessus les onglets). */
  background: linear-gradient(180deg, #6e4a2a, #4d331e);
  border: 2px solid #34220f;
  border-radius: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255,220,160,.18),
    inset 0 -2px 0 rgba(0,0,0,.30),
    0 7px 16px rgba(0,0,0,.45);
}
#left-sidebar::before, #left-sidebar::after { display: none; }
#left-sidebar > .gb-title { display: none; }
#left-sidebar .rail-drag-handle {
  width: 100%;
  height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--wood);
  cursor: grab;
  user-select: none;
  background: rgba(255,240,200,.18);
  border-radius: 4px;
  letter-spacing: 2px;
  line-height: 1;
  transition: background .15s;
}
#left-sidebar .rail-drag-handle:hover { background: rgba(255,240,200,.35); }
#left-sidebar.dragging-panel .rail-drag-handle { cursor: grabbing; }
#left-sidebar .cat-btn {
  flex: 0 0 auto;
  min-width: 74px;
  height: 56px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 6px 14px;
  color: #f0dcb6;
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
  box-shadow: none;
  transition: background .12s;
  position: relative;
}
#left-sidebar .cat-btn:hover {
  background: rgba(255,235,190,.10);
}
#left-sidebar .cat-btn.active {
  /* onglet actif = petite note parchemin (raccord avec le reste de l'UI) */
  background: linear-gradient(180deg, #f6ead0, #e3cf9f);
  color: #3a2a16;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 1px 3px rgba(0,0,0,.3);
}
#left-sidebar .cat-btn .cat-ic {
  font-size: 22px;
  line-height: 1;
  text-align: center;
}
#left-sidebar .cat-btn .cat-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .3px;
  line-height: 1;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  white-space: nowrap;
}
#left-sidebar .cat-btn.active .cat-label { text-shadow: none; }

/* ----- POPUP PALETTE (bas centre) ----- */
#palette {
  position: fixed;
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%);
  max-width: calc(100vw - 100px);
  display: none;
  flex-direction: row;
  align-items: stretch;
  padding: 10px;
  gap: 6px;
  background: linear-gradient(180deg, #e8c890, #c89860);
  border: 3px solid var(--wood);
  border-radius: 10px;
  box-shadow:
    inset 1px 1px 0 rgba(255,240,200,.5),
    inset -1px -1px 0 rgba(40,20,5,.3),
    0 4px 0 rgba(0,0,0,.4),
    0 8px 24px rgba(0,0,0,.45);
  z-index: 11;
  overflow-x: auto;
  overflow-y: hidden;
}
#palette.open { display: flex; }
#palette.disabled { opacity: .5; pointer-events: none; filter: grayscale(.5); }

#palette .b-cat { display: none; flex-direction: column; }
#palette .b-cat.active {
  display: flex;
  padding: 0 4px;
}
#palette .b-cat-title { display: none; }
#palette .b-cat-items {
  display: flex; flex-direction: row;
  gap: 6px;
}

/* Carte bâtiment : slot d'inventaire bois */
#palette .b-item {
  background: linear-gradient(180deg, #c89860, #8a5a2a);
  border: 2px solid var(--wood);
  border-radius: var(--r);
  padding: 4px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  width: 82px;
  height: 130px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  box-shadow:
    inset 1px 1px 0 rgba(255,220,160,.35),
    inset -1px -1px 0 rgba(40,20,5,.4),
    0 2px 0 rgba(0,0,0,.4);
  transition: transform .1s;
}
#palette .b-item:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 1px 1px 0 rgba(255,220,160,.35),
    inset -1px -1px 0 rgba(40,20,5,.4),
    0 5px 0 rgba(0,0,0,.4),
    0 0 0 2px var(--gold-bright);
}
#palette .b-item.selected {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  transform: translateY(-2px);
  box-shadow:
    inset 1px 1px 0 rgba(255,250,200,.55),
    inset -1px -1px 0 rgba(120,70,10,.4),
    0 4px 0 rgba(0,0,0,.4),
    0 0 0 3px var(--wood),
    0 0 12px var(--gold-bright);
}
#palette .b-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--parchment);
  border: 2px solid var(--wood);
  border-radius: 3px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,240,200,.4);
}
#palette .b-preview .b-img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
#palette .b-size-tag {
  position: absolute;
  right: 2px; bottom: 2px;
  background: var(--wood);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 3px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: .3px;
}
#palette .b-info { display: flex; flex-direction: column; gap: 3px; }
#palette .b-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  color: #f4e4c1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
#palette .b-cost { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
#palette .b-item.selected .b-name {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,240,200,.4);
}
#palette .b-cost {
  display: flex; flex-wrap: wrap; gap: 2px;
  justify-content: center;
}
#palette .b-cost-chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(0,0,0,.35);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--parchment);
  font-family: var(--font-mono);
}
#palette .b-cost-chip b {
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 14px;
}
#palette .b-cost-chip.free {
  color: #b9e68a; font-style: normal;
  background: rgba(91,130,48,.4);
}
#palette .b-item.selected .b-cost-chip {
  background: rgba(60,30,10,.5);
}
#palette .b-item.unaffordable {
  opacity: .55;
  filter: saturate(.6);
}
#palette .b-item.unaffordable .b-cost-chip b { color: #e89070; }
/* Ressource manquante : chip en rouge bien visible */
#palette .b-cost-chip.lack {
  background: rgba(181,58,42,.85);
  box-shadow: 0 0 0 1px #ff6a4d inset;
  color: #ffd9cf;
}
#palette .b-cost-chip.lack b { color: #fff; }
#palette .b-item.unaffordable .b-cost-chip.lack { color: #ffd9cf; }
#palette .b-item.unaffordable .b-cost-chip.lack b { color: #fff; }
/* Bâtiment verrouillé (arbre de talent) */
#palette .b-item.locked {
  filter: grayscale(.85) brightness(.6);
  cursor: not-allowed;
}
#palette .b-item.locked::after {
  content: "🔒";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: rgba(0,0,0,.4);
  border-radius: 8px;
}
#palette .b-item.locked:hover { transform: none; box-shadow: inset 1px 1px 0 rgba(255,220,150,.1); }

/* Fiche explicative au survol d'un bâtiment de la palette */
.bld-tip {
  position: fixed;
  z-index: 4000;
  width: 250px;
  max-width: calc(100vw - 16px);
  padding: 10px 11px;
  background: var(--parchment);
  color: var(--ink);
  border: 3px solid var(--wood);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px var(--wood-mid), var(--shadow);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
  pointer-events: none;
}
.bld-tip-head { display: flex; align-items: center; gap: 8px; }
.bld-tip-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 2px solid var(--wood); border-radius: 4px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.bld-tip-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.bld-tip-emoji { font-size: 24px; }
.bld-tip-name { font-weight: 700; font-size: 16px; color: var(--ink); }
.bld-tip-size {
  font-size: 12px; color: var(--ink-soft);
  font-family: var(--font-mono); margin-top: 1px;
}
.bld-tip-tag {
  display: inline-block; padding: 0 4px; border-radius: 3px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
}
.bld-tip-tag.spec { background: rgba(110,58,138,.18); color: var(--purple); }
.bld-tip-tag.tech { background: rgba(58,110,158,.18); color: var(--blue); }
.bld-tip-desc {
  margin: 7px 0; padding-top: 7px;
  border-top: 1px solid var(--parchment-dk);
  color: var(--ink-soft); font-size: 13px;
}
.bld-tip-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.bld-tip-line { font-size: 13px; color: var(--ink); }
.bld-tip-k {
  display: inline-block; min-width: 78px;
  color: var(--ink-fade); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .3px;
}
.bld-tip-cost {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding-top: 7px; border-top: 1px solid var(--parchment-dk);
}
.bld-tip-cost-label {
  color: var(--ink-fade); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .3px;
}
.bld-tip-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(60,30,10,.12); padding: 1px 6px; border-radius: 3px;
  font-size: 13px; font-family: var(--font-mono);
}
.bld-tip-chip b { color: var(--wood); font-weight: 700; }
.bld-tip-chip.free { color: var(--green); background: rgba(91,130,48,.18); }
.bld-tip-chip.lack { color: var(--red); background: rgba(181,58,42,.18); box-shadow: 0 0 0 1px rgba(181,58,42,.55) inset; }
.bld-tip-chip.lack b { color: var(--red); }
/* Coût d'amélioration : ressource manquante en rouge */
.cost-lack { color: var(--red); font-weight: 700; cursor: help; }
.b-cost-chip.lack, .bld-tip-chip.lack { cursor: help; }

/* Bulle « comment obtenir cette ressource » au survol d'un coût manquant */
.res-tip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  max-width: 300px;
  background: var(--parchment, #f3e3c0);
  color: var(--ink, #3a2a14);
  border: 2px solid var(--wood, #6b4a2a);
  border-radius: 10px;
  padding: 9px 11px;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  font-size: 14px;
  line-height: 1.45;
}
.res-tip-head {
  font-weight: 800;
  color: var(--red, #b53a2a);
  margin-bottom: 3px;
}
.res-tip-sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-fade, #9a7656);
  margin-bottom: 5px;
}
.res-tip-line { margin-top: 3px; }
.res-tip-line b { color: var(--wood, #6b4a2a); }
.res-tip-dim { color: var(--ink-soft, #6a5436); opacity: .9; }

/* ============================================================
   ARBRE DE TALENT (recherche)
   ============================================================ */
#research-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .8);
  display: flex; align-items: center; justify-content: center;
  z-index: 400;
  backdrop-filter: blur(3px);
}
#research-box {
  width: 1180px; max-width: 96vw;
  height: 760px; max-height: 92vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
#research-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.rs-main {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* --- Barre de progression globale --- */
.rs-progressbar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: linear-gradient(180deg, var(--bg-2, #4d3623), var(--bg-1, #3a2818));
  border-bottom: 2px solid var(--wood);
}
.rs-progressbar-label {
  font-size: 14px; font-weight: 700;
  color: var(--gold-bright);
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}
.rs-progressbar-track {
  flex: 1; height: 12px;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--wood);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.rs-progressbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-dark), var(--green));
  box-shadow: 0 0 8px rgba(123,240,168,.5);
  transition: width .4s ease;
}

/* --- Grille de cartes de recherche --- */
.rs-cardgrid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 14px;
  padding: 16px;
  align-content: start;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,200,87,.10), transparent 72%),
    #160f08;
  box-shadow: inset 0 0 50px rgba(0,0,0,.6);
}
.rs-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border: 2px solid var(--wood);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.07), transparent 55%),
    var(--parchment, #e9d3a8);
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
.rs-card.rs-available  { border-color: var(--gold); box-shadow: 0 0 13px rgba(255,200,87,.45); }
.rs-card.rs-researching { border-color: var(--blue); }
.rs-card.rs-done   { opacity: .72; }
.rs-card.rs-locked { filter: grayscale(.55); opacity: .82; }

/* Vignettes des bâtiments débloqués */
.rs-card-blds {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
}
.rs-bld {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 78px;
}
.rs-bld-img {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--wood);
  border-radius: 6px;
  font-size: 26px;
  overflow: hidden;
}
.rs-bld-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.rs-bld-name {
  font-size: 12px; font-weight: 700;
  color: var(--ink, #2a1c0c);
  text-align: center; line-height: 1.15;
}
.rs-card-tech {
  display: flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 800;
  color: var(--ink, #2a1c0c);
  border-top: 1px dashed var(--wood);
  padding-top: 7px;
}
.rs-card-tech-icon { font-size: 17px; }
.rs-card-desc {
  font-size: 13px; line-height: 1.3;
  color: var(--ink-soft, #5a4530);
}
.rs-card-info {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: auto;
}
.rs-cost { font-size: 13px; font-weight: 700; color: var(--wood); }
.rs-status { font-size: 14px; font-weight: 800; text-align: center; }
.rs-status.done { color: var(--green-dark); }
.rs-status.researching { color: var(--blue); }
.rs-status.locked { color: var(--ink-fade, #8a7355); font-style: italic; font-weight: 600; }
.rs-btn { width: 100%; padding: 7px 10px; font-size: 14px; }
.rs-empty { padding: 40px; color: var(--ink-soft); font-style: italic; }
.rs-progress-wrap {
  height: 12px;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--wood);
  border-radius: 6px;
  overflow: hidden;
}
.rs-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  transition: width .5s linear;
}

/* ============================================================
   DÉTAIL PANEL (modal latéral droit)
   ============================================================ */
#detail-panel {
  position: fixed; top: 12px; right: 280px;
  width: 360px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 0;
  z-index: 50;
  display: flex; flex-direction: column;
  /* Ce panneau DÉFILE (overflow-y:auto). Les calques parchemin de .gb-box
     (::before cadre bois, ::after note) sont en position:absolute et défilent
     AVEC le contenu dans un conteneur scrollable → ils laissaient passer le
     décor (texte fantôme) puis, une fois un fond ajouté, créaient une couture
     horizontale là où ils se terminent (coupant une ligne en deux).
     Solution : on neutralise ces calques ici et on porte la texture parchemin
     directement sur l'élément. Le fond d'un élément (background-attachment:
     scroll par défaut) NE défile PAS avec son contenu → il couvre toujours
     toute la zone visible, sans couture. */
  background-color: var(--parchment);
  background-image:
    radial-gradient(ellipse at 30% 18%, rgba(255,245,215,.45), transparent 62%),
    radial-gradient(ellipse at 72% 86%, rgba(120,80,30,.07), transparent 72%),
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(110,70,30,.03) 7px 8px);
}
#detail-panel::before,
#detail-panel::after { content: none; display: none; }
#detail-panel .dp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #835a34, #5c3d22);
  border-bottom: 2px solid #34220f;
  border-radius: 6px 6px 0 0;
}
#detail-panel .dp-head h2 {
  font-size: 15px; font-weight: 700;
  color: #f3e4c2;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(255,235,190,.16);
  margin: 0;
}
#detail-panel .dp-body {
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 15px;
}
#detail-panel .dp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 6px;
  border-bottom: 1px dashed var(--parchment-dk);
}
#detail-panel .dp-row:last-child { border-bottom: none; }
#detail-panel .dp-row .v { font-weight: 700; color: var(--wood); font-family: var(--font-mono); font-size: 15px; }
#detail-panel .dp-check {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px;
  background: var(--parchment-2);
  border-radius: 3px;
  font-size: 14px;
}
.dp-btn { padding: 5px 12px; }
.dp-btn.small { padding: 3px 8px; font-size: 13px; }
.dp-btn.primary {
  background: linear-gradient(180deg, #b9d68a, #8aaf4a);
  color: #1f3a08;
}
.dp-input,
#detail-panel input[type="text"],
#detail-panel input[type="number"],
#detail-panel select {
  background: var(--parchment-2);
  border: 2px solid var(--wood);
  border-radius: 3px;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  box-shadow: inset 1px 1px 0 rgba(80,40,10,.2);
  cursor: pointer;
}
#detail-panel select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, var(--wood) 50%),
                    linear-gradient(135deg, var(--wood) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
#detail-panel select:focus,
#detail-panel input:focus { outline: none; border-color: var(--gold); }

/* === Sections détail (Postes / Résidents) === */
.dp-section {
  background: rgba(212,185,127,.2);
  border: 1px solid var(--parchment-dk);
  border-radius: 4px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.dp-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--wood);
  text-shadow: 0 1px 0 rgba(255,240,200,.4);
}
.dp-worker-list { display: flex; flex-direction: column; gap: 4px; }
.dp-worker {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px;
  background: var(--parchment);
  border: 1px solid var(--parchment-dk);
  border-radius: 3px;
}
.dp-worker .n { flex: 1; font-weight: 600; color: var(--ink); }
.dp-worker.free { background: rgba(255,240,200,.5); border-style: dashed; }

/* === Petits boutons (Retirer, Assigner, etc.) === */
.btn-mini, .btn-primary {
  background: linear-gradient(180deg, #8a5e36, #654225);
  color: #f3e4c2;
  border: 2px solid #34220f;
  border-radius: 3px;
  padding: 3px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 rgba(255,240,200,.4),
    inset -1px -1px 0 rgba(80,40,10,.3),
    0 2px 0 rgba(0,0,0,.3);
  transition: transform .08s;
}
.btn-mini:hover { background: linear-gradient(180deg, #a3733f, #7a5230); }
.btn-primary:hover { background: linear-gradient(180deg, #c9e69a, #9abf5a); }
.btn-mini:active, .btn-primary:active {
  transform: translateY(1px);
  box-shadow: inset 1px 1px 0 rgba(80,40,10,.3), 0 0 0 rgba(0,0,0,.3);
}
.btn-mini.unassign, .btn-mini.unassignHouse {
  background: linear-gradient(180deg, #e4a690, #c47a60);
  color: #3a1208;
}
.btn-primary {
  background: linear-gradient(180deg, #b9d68a, #8aaf4a);
  color: #1f3a08;
}

/* === État désactivé (ex: "Pas assez de ressources") === */
.dp-btn:disabled,
.btn-primary:disabled,
button:disabled {
  background: linear-gradient(180deg, #b8a890, #8a7660) !important;
  color: rgba(60, 40, 20, .6) !important;
  cursor: not-allowed !important;
  box-shadow:
    inset 1px 1px 0 rgba(200,180,150,.3),
    inset -1px -1px 0 rgba(80,60,40,.3),
    0 2px 0 rgba(0,0,0,.2) !important;
  transform: none !important;
  text-shadow: none !important;
}
.dp-btn:disabled:hover,
.btn-primary:disabled:hover { background: linear-gradient(180deg, #b8a890, #8a7660) !important; }

/* ============================================================
   HABITANTS BAR (compteur dans top-left)
   ============================================================ */
#habitants-bar {
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  transition: transform .08s;
}
#habitants-bar:hover { transform: translateY(-1px); }

/* Panneau des stats habitants (affiché en continu) */
#habitants-detail-body {
  padding: 8px 12px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.hd-empty { font-size: 14px; font-style: italic; color: var(--ink-fade); text-align: center; padding: 6px; }
.hd-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px;
  padding: 2px 2px;
}
.hd-row span { color: var(--ink-soft); }
.hd-row b { color: var(--wood); font-family: var(--font-mono); font-size: 16px; }
.hd-row.danger b { color: var(--red); }
.hd-row.danger { animation: pulse 1.2s infinite; }

/* Liste vivante des habitants (directement dans le panneau) */
.hd-hablist {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 44vh; overflow-y: auto;
  margin: 6px 0 4px; padding-right: 2px;
}
.hd-hab {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  background: rgba(255,250,235,.45);
  border: 1px solid rgba(122,79,43,.28);
  transition: background .1s;
}
.hd-hab:hover { background: rgba(212,154,48,.25); }
.hd-hab.danger { background: rgba(181,58,42,.16); border-color: rgba(181,58,42,.5); }
.hd-hab-top { display: flex; align-items: center; gap: 6px; }
.hd-hab-sex { font-weight: 800; font-size: 14px; }
.hd-hab-sex.female { color: #c45a78; }
.hd-hab-sex.male { color: #3a6e9e; }
.hd-hab-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.hd-hab-act { font-size: 12px; color: var(--ink-soft); line-height: 1.2; }
.hd-hab-act.idle { color: var(--ink-fade); font-style: italic; }
.hd-sep {
  margin-top: 6px; padding-top: 5px;
  border-top: 1px solid var(--parchment-dk);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink-fade);
}
#habitants-detail-body .h-stat {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
}
#habitants-detail-body .h-stat .ic { font-size: 15px; }
#habitants-detail-body .h-stat-bar {
  flex: 1; height: 8px;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--wood);
  border-radius: 4px; overflow: hidden;
}
#habitants-detail-body .h-stat-bar > div { height: 100%; }
#habitants-detail-body .h-stat-val {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--wood); width: 24px; text-align: right;
}
.hd-btnrow { display: flex; gap: 6px; margin-top: 8px; }
.hd-btnrow .dp-btn,
.hd-btnrow .hd-listbtn,
.hd-btnrow .hd-journalbtn {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-pulse {
  color: var(--red);
  font-weight: 700;
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ============================================================
   TOAST + NOTIF FEED
   ============================================================ */
#toast {
  position: fixed; bottom: 200px; left: 50%; transform: translateX(-50%);
  background: var(--parchment);
  border: 2px solid var(--wood);
  border-radius: var(--r);
  color: var(--ink);
  padding: 8px 18px;
  font-size: 16px;
  font-weight: 600;
  z-index: 200;
  box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(0,0,0,.55);
}
#toast.error { background: linear-gradient(180deg, #e4a690, #c47a60); }
#toast.ok    { background: linear-gradient(180deg, #b9d68a, #8aaf4a); }

#notif-feed {
  position: fixed; right: 14px; bottom: 130px;
  display: flex; flex-direction: column-reverse; gap: 4px;
  pointer-events: none;
  z-index: 150;
  max-width: 280px;
}
.notif-item {
  background: var(--parchment);
  border: 2px solid var(--wood);
  border-radius: 3px;
  color: var(--ink);
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  animation: notif-in .25s ease-out, notif-out .4s ease-in forwards;
  animation-delay: 0s, 3.6s;
  box-shadow: 0 0 0 2px var(--gold), 0 2px 6px rgba(0,0,0,.4);
}
.notif-item .notif-who { color: var(--ink-soft); }
.notif-item .notif-plus  { color: var(--green); font-weight: 800; margin: 0 4px; font-family: var(--font-mono); font-size: 16px; }
.notif-item .notif-minus { color: var(--red);   font-weight: 800; margin: 0 4px; font-family: var(--font-mono); font-size: 16px; }
.notif-item .notif-res { font-weight: 700; }
@keyframes notif-in {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes notif-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(30px); }
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
/* Panneau admin = grande fenêtre centrée, lisible */
#admin-panel {
  position: fixed; inset: 0; margin: auto;
  width: min(940px, 95vw);
  height: min(660px, 90vh);
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  z-index: 150;
}
.admin-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--bg-2, #4d3623), var(--bg-1, #3a2818));
  border-bottom: 2px solid var(--wood);
}
.admin-head-title {
  font-size: 17px; font-weight: 800;
  color: var(--gold-bright);
  text-shadow: 0 1px 2px #000;
}
.admin-body {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
  padding: 16px;
  align-content: start;
}
.admin-section {
  display: flex; flex-direction: column; gap: 7px;
  padding: 11px 12px;
  border: 2px solid var(--wood);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.05), transparent 55%),
    rgba(212,185,127,.16);
}
.admin-section-head {
  font-size: 15px; font-weight: 800;
  color: var(--wood);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px dashed var(--parchment-dk);
  padding-bottom: 5px;
}
#admin-panel .row {
  display: flex; flex-wrap: wrap; gap: 5px;
  align-items: center;
  margin: 0; font-size: 14px;
}
#admin-panel .row.admin-stack { flex-direction: column; align-items: stretch; }
#admin-panel .row.hint {
  font-size: 13px; color: var(--ink-fade); font-style: italic;
  display: block;
}
#admin-panel .row > button { flex: 1 1 auto; }
.admin-danger {
  background: linear-gradient(180deg, #c0533a, #8a2a2a) !important;
  color: #fff !important;
  border-color: #5e1a1a !important;
}

/* Liste des POI placés dans le panneau admin */
#poi-list {
  margin: 4px 0 2px;
  max-height: 160px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
}
.poi-empty {
  font-size: 13px; font-style: italic;
  color: var(--ink-fade);
  padding: 4px 2px;
}
.poi-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  background: rgba(0,0,0,.14);
  border: 1px solid var(--wood);
  border-radius: 4px;
  padding: 3px 6px;
}
.poi-item-name { font-size: 11.5px; color: var(--ink); }
.poi-item-name i { color: var(--ink-fade); font-size: 12px; }
.poi-item-actions { display: flex; gap: 3px; flex-shrink: 0; }
.poi-item-actions button {
  width: 24px; height: 24px;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
}
.poi-del:hover { box-shadow: 0 0 0 2px #d0604a inset; }
#admin-panel button {
  background: linear-gradient(180deg, #8a5e36, #654225);
  border: 2px solid #34220f;
  color: #f3e4c2;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
}
#admin-panel button:hover {
  background: linear-gradient(180deg, #a3733f, #7a5230);
}
#admin-panel input[type="range"] { vertical-align: middle; flex: 1; }
#admin-panel select {
  background: var(--parchment-2);
  border: 2px solid var(--wood);
  border-radius: 4px;
  padding: 5px 7px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
}
#admin-panel .admin-section .row > label { font-weight: 700; color: var(--wood); }
#admin-panel .snd-row > button { flex: 0 0 auto; }

/* Grille z-order : cases devant/derrière les personnages */
.sm-zgrid {
  display: grid;
  gap: 2px;
  width: fit-content;
}
.sm-zcell {
  width: 18px; height: 18px;
  background: #3a2c1e;
  border: 1px solid var(--wood);
  border-radius: 2px;
  cursor: pointer;
  transition: background .1s;
}
.sm-zcell:hover { border-color: var(--gold); }
.sm-zcell.on {
  background: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-bright);
}

/* Grille collision : cases traversables (vert) */
.sm-cgrid {
  display: grid;
  gap: 2px;
  width: fit-content;
}
.sm-ccell {
  width: 18px; height: 18px;
  background: #5a2a2a;
  border: 1px solid var(--wood);
  border-radius: 2px;
  cursor: pointer;
  transition: background .1s;
}
.sm-ccell:hover { border-color: var(--gold); }
.sm-ccell.on {
  background: var(--green, #5b8230);
  box-shadow: inset 0 0 0 1px #9bc46a;
}

/* === Sélecteur de biome (mode admin) === */
#biome-list {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.biome-swatch {
  width: 32px; height: 32px;
  border: 2px solid var(--wood);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 1px 1px 0 rgba(255,240,200,.3),
    inset -1px -1px 0 rgba(40,20,5,.4),
    0 1px 0 rgba(0,0,0,.3);
  transition: transform .08s;
}
.biome-swatch:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}
.biome-swatch.selected {
  border-color: var(--gold-bright);
  box-shadow:
    inset 1px 1px 0 rgba(255,240,200,.4),
    0 0 0 2px var(--wood),
    0 0 10px var(--gold-bright);
  transform: translateY(-1px);
}
.biome-swatch::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%);
  background: var(--wood-dark);
  color: var(--gold-bright);
  padding: 2px 6px;
  font-size: 13px;
  white-space: nowrap;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  border: 1px solid var(--gold);
}
.biome-swatch:hover::after { opacity: 1; }

/* ============================================================
   PANNEAU CHAT — reconstruit à neuf (ancré dans #right-col)
   Structure : .gb-title · #chat-tabs · #chat-messages (h. fixe) · #chat-form
   La zone messages a une hauteur FIXE → le panneau est toujours bien
   proportionné, qu'il soit vide ou plein (jamais de boîte vide géante).
   ============================================================ */
#chat {
  position: fixed;
  left: 12px;
  bottom: 12px;
  width: 380px;
  z-index: 12;
  display: flex;
  flex-direction: column;
}

/* --- Onglets de canal (Général / Commerce / Privé) --- */
#chat-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 6px 5px;
}
.chat-tab {
  flex: 1 1 0;
  position: relative;
  padding: 4px 2px;
  font: 700 11px/1 var(--font-body);
  letter-spacing: .3px;
  color: var(--ink-soft);
  background: rgba(0,0,0,.10);
  border: 1px solid var(--wood);
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.chat-tab:hover { background: rgba(212,154,48,.20); }
.chat-tab.active {
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold);
}
.chat-tab.unread::after {
  content: '';
  position: absolute; top: 3px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.chat-tab.active.unread::after { display: none; }

/* --- Zone des messages : hauteur fixe + défilement interne --- */
#chat-messages {
  height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  background: rgba(0,0,0,.05);
  border-top: 1px solid var(--parchment-dk);
  border-bottom: 1px solid var(--parchment-dk);
}
#chat-messages:empty::before {
  content: 'Aucun message pour l’instant 👋';
  margin: auto;
  padding: 0 10px;
  font-size: 12px; font-style: italic;
  color: var(--ink-soft); opacity: .65;
  text-align: center;
}
.chat-msg {
  font-size: 13px; line-height: 1.35;
  padding: 3px 7px;
  background: rgba(212,185,127,.25);
  border: 1px solid var(--parchment-dk);
  border-radius: 5px;
  word-break: break-word;
  animation: chat-in .2s ease-out;
}
.chat-msg.admin {
  background: linear-gradient(180deg, rgba(255,200,87,.4), rgba(212,154,48,.3));
  border-color: var(--gold);
}
.chat-msg.private {
  background: rgba(150,120,200,.22);
  border-color: #8a78c8;
}
.chat-from { font-weight: 700; color: var(--wood); margin-right: 4px; }
.chat-from::after { content: ':'; }
.chat-msg.admin .chat-from { color: var(--red); }
.chat-msg.private .chat-from { color: #6a4fb0; }
.chat-from-name { cursor: pointer; }
.chat-from-name:hover { text-decoration: underline; }
.chat-text { color: var(--ink); }
.chat-text.chat-sys { font-style: italic; opacity: .8; color: var(--ink-soft); }
/* Entrée par glissement SEULEMENT (pas d'opacité : un message ne peut jamais
   rester invisible, même si l'animation est mise en pause par le navigateur). */
@keyframes chat-in {
  from { transform: translateX(10px); }
  to   { transform: none; }
}

/* --- Saisie : destinataire (privé) + couleur + texte + envoyer --- */
#chat-form {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
#chat-to {
  width: 100%;
  padding: 4px 8px;
  font: 13px var(--font-body); color: var(--ink);
  background: var(--parchment-2);
  border: 2px solid var(--wood); border-radius: 5px;
}
#chat-to:focus { outline: none; border-color: var(--gold); }
#chat-input-row { display: flex; align-items: center; gap: 6px; }
#chat-color {
  flex: 0 0 auto;
  width: 28px; height: 30px; padding: 0;
  background: var(--parchment-2);
  border: 2px solid var(--wood); border-radius: 5px;
  cursor: pointer;
}
#chat-input {
  flex: 1 1 auto; min-width: 0;
  padding: 5px 9px;
  font: 14px var(--font-body); color: var(--ink);
  background: var(--parchment-2);
  border: 2px solid var(--wood); border-radius: 5px;
  box-shadow: inset 1px 1px 0 rgba(80,40,10,.2);
}
#chat-input:focus { outline: none; border-color: var(--gold); }
#chat-send {
  flex: 0 0 auto;
  width: 34px; height: 30px;
  font-size: 14px; color: var(--ink);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 2px solid var(--wood); border-radius: 5px;
  cursor: pointer;
  transition: filter .12s;
}
#chat-send:hover { filter: brightness(1.08); }

/* Cliquable */
#player-name { cursor: pointer; transition: filter .12s; }
#player-name:hover { filter: brightness(1.15); }

/* Fantôme de glisser-déposer d'habitant */
#agent-drag-ghost {
  position: fixed;
  display: none;
  z-index: 700;
  pointer-events: none;
  /* Centré sur le curseur : on "attrape" vraiment le personnage */
  width: 48px; height: 48px;
  transform: translate(-50%, -50%) scale(1.15);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.6));
  font-size: 38px;
  text-align: center;
  line-height: 48px;
}
#agent-drag-ghost img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* ============================================================
   BOUTON ADMIN (bas-gauche, visible uniquement pour admins)
   ============================================================ */
#admin-toggle {
  position: fixed;
  left: 404px; bottom: 12px;   /* juste à droite du chat (bas-gauche) */
  z-index: 60;
  background: linear-gradient(180deg, #b85a40, #7a2a18);
  color: var(--gold-bright);
  border: 2px solid var(--wood);
  border-radius: var(--r);
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  box-shadow:
    inset 1px 1px 0 rgba(255,220,160,.3),
    inset -1px -1px 0 rgba(40,10,5,.4),
    0 0 0 2px var(--gold),
    0 3px 0 rgba(0,0,0,.4),
    0 5px 12px rgba(0,0,0,.5);
  transition: transform .08s;
}
#admin-toggle:hover {
  background: linear-gradient(180deg, #d47050, #8a3a20);
  transform: translateY(-2px);
}
#admin-toggle:active {
  transform: translateY(1px);
  box-shadow:
    inset 1px 1px 0 rgba(40,10,5,.4),
    inset -1px -1px 0 rgba(255,220,160,.3),
    0 0 0 2px var(--gold),
    0 0 0 rgba(0,0,0,.4);
}

/* ============================================================
   GUIDE / ENCYCLOPÉDIE DES BÂTIMENTS
   ============================================================ */
#guide-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .8);
  display: flex; align-items: center; justify-content: center;
  z-index: 400;
  backdrop-filter: blur(3px);
}
#guide-box {
  width: 900px;
  max-width: 94vw;
  height: 90vh;
  max-height: 90vh;
  display: flex; flex-direction: column;
  padding: 0;
  overflow: hidden;
}
#guide-body {
  overflow-y: auto;
  padding: 12px 16px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.guide-section { display: flex; flex-direction: column; gap: 8px; }
.guide-h {
  font-size: 15px; font-weight: 700;
  color: var(--wood);
  text-transform: uppercase; letter-spacing: 1.2px;
  border-bottom: 2px solid var(--parchment-dk);
  padding-bottom: 4px;
  text-shadow: 0 1px 0 rgba(255,240,200,.4);
}
.guide-tips {
  list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.guide-tips li {
  background: rgba(212,185,127,.25);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  padding: 5px 9px;
  font-size: 15px;
}
.guide-tips b { color: var(--wood); }
.guide-card {
  display: flex; gap: 10px;
  background: rgba(212,185,127,.2);
  border: 1px solid var(--parchment-dk);
  border-radius: 5px;
  padding: 8px;
}
.guide-card-preview {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border: 2px solid var(--wood);
  border-radius: 4px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.guide-card-preview img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.guide-card-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.guide-card-top { display: flex; align-items: center; gap: 8px; }
.guide-card-name {
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.guide-tag {
  font-size: 12px; font-weight: 700;
  color: #fff;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.guide-card-desc { font-size: 14px; color: var(--ink-soft); }
.guide-card-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 13px; color: var(--ink-fade);
  font-weight: 600;
}
.guide-card-tip {
  font-size: 14px;
  color: var(--wood);
  background: rgba(255,200,87,.18);
  border-radius: 3px;
  padding: 3px 6px;
  font-style: italic;
}
.guide-evo-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--wood);
  margin-top: 4px;
}
.guide-evo { display: flex; flex-direction: column; gap: 4px; }
.guide-evo-none {
  font-size: 13px; color: var(--ink-fade); font-style: italic;
}
.guide-evo-row {
  display: flex; gap: 8px;
  background: rgba(120,80,40,.16);
  border: 1px solid var(--parchment-dk);
  border-radius: 4px;
  padding: 5px 7px;
}
.guide-evo-lvl {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(180deg, var(--gold), var(--wood-mid));
  border-radius: 3px;
  padding: 2px 7px;
  height: fit-content;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.guide-evo-detail { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.guide-evo-cost {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.guide-evo-changes {
  list-style: none;
  display: flex; flex-direction: column; gap: 2px;
}
.guide-evo-changes li {
  font-size: 13px;
  color: var(--ink);
  padding-left: 4px;
  border-left: 2px solid var(--gold);
}
.guide-evo-changes-empty {
  font-size: 13px; color: var(--ink-fade); font-style: italic;
}

/* ============================================================
   MODAL FONDATEURS (pose HDV)
   ============================================================ */
#founders-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .82);
  display: flex; align-items: center; justify-content: center;
  z-index: 450;
  backdrop-filter: blur(3px);
}
#founders-box {
  width: 360px; max-width: 90vw;
  padding: 0;
  display: flex; flex-direction: column;
  animation: go-pop .35s ease-out;
}
#founders-body {
  padding: 14px 18px 18px;
  display: flex; flex-direction: column; gap: 9px;
}
.founders-intro {
  font-size: 15px; color: var(--ink-soft);
  text-align: center; font-style: italic;
}
.founders-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600;
}
.founders-row > span {
  width: 90px; flex-shrink: 0;
  color: var(--blue);
}
.founders-row.female > span { color: var(--pink); }
.founders-row input {
  flex: 1;
  background: var(--parchment-2);
  border: 2px solid var(--wood);
  border-radius: 4px;
  padding: 5px 9px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
}
.founders-row input:focus { outline: none; border-color: var(--gold); }
.founders-actions {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 8px;
}
#founders-confirm {
  background: linear-gradient(180deg, #b9d68a, #8aaf4a) !important;
  color: #1f3a08 !important;
}

/* ============================================================
   PATCHNOTE / NOUVEAUTÉS
   ============================================================ */
#patchnote-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .8);
  display: flex; align-items: center; justify-content: center;
  z-index: 650;   /* > .landing (600) : visible depuis le menu d'accueil */
  backdrop-filter: blur(3px);
}
#patchnote-box {
  width: 760px; max-width: 95vw;
  height: 720px; max-height: 90vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
#patchnote-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 26px 26px;
  display: flex; flex-direction: column; gap: 26px;
}
.pn-version { display: flex; flex-direction: column; gap: 11px; }
.pn-version-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 3px solid var(--parchment-dk);
  padding-bottom: 8px;
}
.pn-version-name {
  font-size: 21px; font-weight: 700;
  color: var(--wood);
  text-transform: uppercase; letter-spacing: 1.2px;
  text-shadow: 0 1px 0 rgba(255,240,200,.4);
}
.pn-version-date {
  font-size: 16px; font-style: italic;
  color: var(--ink-fade);
}
.pn-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.pn-list li {
  background: rgba(212,185,127,.22);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}

/* ============================================================
   ÉCRAN DE FIN DE PARTIE
   ============================================================ */
#gameover-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .85);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  backdrop-filter: blur(3px);
}
#gameover-box {
  width: 420px;
  max-width: 90vw;
  padding: 24px;
  text-align: center;
  display: flex; flex-direction: column; gap: 14px;
  animation: go-pop .4s ease-out;
}
@keyframes go-pop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.go-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.go-sub {
  font-size: 15px;
  color: var(--ink-soft);
  font-style: italic;
}
#gameover-deaths {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 240px; overflow-y: auto;
  background: rgba(212,185,127,.25);
  border: 2px solid var(--parchment-dk);
  border-radius: 4px;
  padding: 10px;
  font-size: 15px;
}
#gameover-deaths .go-death {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 3px 4px;
  border-bottom: 1px dashed var(--parchment-dk);
}
#gameover-deaths .go-death:last-child { border-bottom: none; }
#gameover-deaths .go-name { font-weight: 700; color: var(--wood); }
#gameover-deaths .go-cause { color: var(--red); font-style: italic; }
#gameover-rebuild {
  align-self: center;
  padding: 10px 24px;
  font-size: 15px;
  background: linear-gradient(180deg, #b9d68a, #8aaf4a) !important;
  color: #1f3a08 !important;
}

/* ============================================================
   MODAL LISTE DES HABITANTS
   ============================================================ */
.hl-modal {
  width: 620px; max-width: 94vw;
  height: 660px; max-height: 88vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.hl-controls {
  display: flex; gap: 14px;
  padding: 10px 16px;
  background: rgba(120,80,40,.18);
  border-bottom: 2px solid var(--parchment-dk);
}
.hl-controls label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--wood);
}
.hl-controls select {
  background: var(--parchment-2);
  border: 2px solid var(--wood);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}
.hl-controls select:focus { outline: none; border-color: var(--gold); }
.hl-list {
  flex: 1; overflow-y: auto;
  padding: 12px 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}
.hl-empty {
  grid-column: 1 / -1;
  text-align: center; font-style: italic;
  color: var(--ink-fade); padding: 20px;
}
.hl-card {
  background: rgba(212,185,127,.22);
  border: 2px solid var(--parchment-dk);
  border-left: 4px solid var(--blue);
  border-radius: 6px;
  padding: 9px 11px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 7px;
  transition: transform .1s, box-shadow .1s;
}
.hl-card.female { border-left-color: var(--pink); }
.hl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  border-color: var(--gold);
}
.hl-card-head {
  display: flex; align-items: center; gap: 7px;
}
.hlc-sex {
  font-size: 16px; font-weight: 700;
  width: 20px; text-align: center;
}
.hl-card.male .hlc-sex { color: var(--blue); }
.hl-card.female .hlc-sex { color: var(--pink); }
.hlc-name {
  font-size: 16px; font-weight: 700;
  color: var(--ink); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hlc-job {
  font-size: 12px; font-weight: 600;
  background: rgba(91,130,48,.3);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.hlc-job.idle {
  background: rgba(120,90,50,.3);
  color: var(--ink-fade);
  font-style: italic;
}
.hl-card-stats {
  display: flex; flex-direction: column; gap: 3px;
}
.hl-card-stats .h-stat {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
}
.hl-card-stats .h-stat .ic { font-size: 15px; width: 16px; text-align: center; }
.hl-card-stats .h-stat-bar {
  flex: 1; height: 9px;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--wood);
  border-radius: 5px; overflow: hidden;
}
.hl-card-stats .h-stat-bar > div { height: 100%; }
.hl-card-stats .h-stat-val {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--wood); width: 24px; text-align: right;
}

/* ============================================================
   MODAL JOURNAL (naissances & décès)
   ============================================================ */
.le-modal {
  width: 560px; max-width: 94vw;
  height: 620px; max-height: 88vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.le-tabs {
  display: flex; gap: 6px;
  padding: 10px 16px;
  background: rgba(120,80,40,.18);
  border-bottom: 2px solid var(--parchment-dk);
}
.le-tab {
  flex: 1;
  background: var(--parchment-2);
  border: 2px solid var(--wood);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.le-tab:hover { border-color: var(--gold); }
.le-tab.selected {
  background: var(--gold);
  border-color: var(--gold-bright);
  color: #2a1c0c;
}
.le-list {
  flex: 1; overflow-y: auto;
  padding: 12px 16px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.le-count {
  font-size: 13px; font-weight: 700;
  color: var(--wood);
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--parchment-dk);
  margin-bottom: 4px;
}
.le-empty {
  text-align: center; font-style: italic;
  color: var(--ink-fade); padding: 24px;
}
.le-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px;
  background: rgba(212,185,127,.22);
  border: 2px solid var(--parchment-dk);
  border-left: 4px solid var(--green);
  border-radius: 6px;
}
.le-row.death { border-left-color: var(--red, #b5482e); }
.le-ico { font-size: 18px; }
.le-txt {
  flex: 1; font-size: 14px;
  color: var(--ink);
}
.le-txt b { font-weight: 800; }
.le-time {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink-fade);
  white-space: nowrap;
}

/* ============================================================
   MODAL LOGIN / REGISTER
   ============================================================ */
.modal-wrap {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .85);
  display: flex; align-items: center; justify-content: center;
  z-index: 600;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--parchment);
  color: var(--ink);
  border: 3px solid var(--wood);
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 0 5px var(--wood-mid),
    var(--shadow-lg);
  width: 340px; max-width: 90vw;
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  animation: go-pop .35s ease-out;
}
.modal h2 {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--wood);
  text-shadow: 0 1px 0 rgba(255,240,200,.5);
  margin: 0;
}
.modal .tabs {
  display: flex; gap: 6px;
}
.modal .tabs button {
  flex: 1;
  background: linear-gradient(180deg, var(--parchment-2), var(--parchment-dk));
  border: 2px solid var(--wood);
  border-radius: var(--r);
  padding: 7px 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .12s;
}
.modal .tabs button.active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--ink);
}
.modal .form {
  display: flex; flex-direction: column; gap: 10px;
}
.modal .form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--wood);
}
.modal .form input {
  background: var(--parchment-2);
  border: 2px solid var(--wood);
  border-radius: var(--r);
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  box-shadow: inset 1px 1px 0 rgba(80,40,10,.2);
}
.modal .form input:focus { outline: none; border-color: var(--gold); }
.modal .err {
  color: var(--red);
  font-size: 14px;
  font-weight: 600;
  min-height: 16px;
  text-align: center;
}
.modal .form button.primary {
  background: linear-gradient(180deg, #b9d68a, #8aaf4a);
  color: #1f3a08;
  border: 2px solid var(--wood);
  border-radius: var(--r);
  padding: 9px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 rgba(255,240,200,.4),
    inset -1px -1px 0 rgba(80,40,10,.3),
    0 2px 0 rgba(0,0,0,.35);
  transition: transform .08s;
}
.modal .form button.primary:hover {
  background: linear-gradient(180deg, #c9e69a, #9abf5a);
}
.modal .form button.primary:active { transform: translateY(2px); }

/* ============================================================
   PAGE D'ACCUEIL (landing / login) — décor animé + carte d'auth
   ============================================================ */
.landing {
  position: fixed; inset: 0;
  z-index: 600;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  animation: land-fade .6s ease-out;
}
@keyframes land-fade { from { opacity: 0; } to { opacity: 1; } }

/* --- Ciel crépusculaire dégradé, lentement animé --- */
.landing-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #1b1840 0%, #2e2557 22%, #6b3f6e 46%,
    #b85f55 66%, #e89a4e 82%, #f7c766 100%);
  background-size: 100% 200%;
  animation: sky-shift 26s ease-in-out infinite alternate;
}
@keyframes sky-shift {
  from { background-position: 0% 0%;  filter: saturate(1)    brightness(1); }
  to   { background-position: 0% 28%; filter: saturate(1.15) brightness(1.07); }
}
/* lueur chaude au-dessus de l'horizon */
.landing-glow {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 150vw; height: 60vh; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255,200,110,.55) 0%, rgba(255,170,90,.22) 35%, transparent 70%);
}

/* --- Soleil couchant --- */
.landing-sun {
  position: absolute; left: 50%; top: 44%;
  width: 120px; height: 120px; margin-left: -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #fff6d6 0%, #ffe49a 34%, #ffc861 58%, rgba(255,180,90,0) 72%);
  box-shadow: 0 0 90px 50px rgba(255,200,110,.45);
  animation: sun-bob 14s ease-in-out infinite alternate;
}
@keyframes sun-bob { from { transform: translateY(0); } to { transform: translateY(-14px); } }

/* --- Nuages qui dérivent --- */
.landing-clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud {
  position: absolute; left: -280px;
  width: 180px; height: 46px; border-radius: 40px;
  background: linear-gradient(180deg, rgba(255,238,210,.92), rgba(250,208,168,.7));
  filter: blur(2px);
  animation: cloud-drift linear infinite;
}
.cloud::before, .cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 86px; height: 86px; top: -36px; left: 24px; }
.cloud::after  { width: 64px; height: 64px; top: -24px; right: 28px; }
@keyframes cloud-drift {
  from { transform: translateX(0)      scale(var(--s, 1)); }
  to   { transform: translateX(128vw)  scale(var(--s, 1)); }
}

/* --- Collines en silhouette (parallaxe) --- */
.landing-scape { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; pointer-events: none; }
.hill { position: absolute; left: -12%; right: -12%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hill-far  { bottom: 30%; height: 62%; background: #6a4566; opacity: .7; }
.hill-mid  { bottom: 14%; height: 66%; background: #4a3152; }
.hill-near { bottom: -8%; height: 58%; background: #221730; }

/* --- Ville en silhouette avec fenêtres allumées --- */
.landing-city {
  position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 6px;
  width: max-content; max-width: 98vw;
  filter: drop-shadow(0 0 20px rgba(0,0,0,.4));
}
.landing-city .b {
  position: relative; background: #1c1430; border-radius: 3px 3px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 7px;
  padding: 8px 7px; align-content: start; justify-items: center;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.45);
}
.landing-city .b span {
  width: 6px; height: 7px; border-radius: 1px;
  background: #ffd66a; box-shadow: 0 0 6px 1px rgba(255,200,90,.85);
  animation: win-flicker 5s steps(1) infinite;
}
.landing-city .b span.off { background: #2a2138; box-shadow: none; animation: none; }
@keyframes win-flicker { 0%,46%,54%,100% { opacity: 1; } 50% { opacity: .3; } }

/* --- Lucioles / braises qui montent --- */
.landing-fireflies { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.firefly {
  position: absolute; bottom: 6%;
  width: 4px; height: 4px; border-radius: 50%;
  background: #fff0b0; box-shadow: 0 0 8px 2px rgba(255,220,120,.9);
  opacity: 0; animation: firefly-rise linear infinite;
}
@keyframes firefly-rise {
  0%   { transform: translate(0, 0);              opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(var(--drift,0), -80vh); opacity: 0; }
}

/* --- Vignette d'ambiance --- */
.landing::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse at 50% 38%, transparent 54%, rgba(18,8,4,.58) 100%);
}

/* --- Contenu (titre + carte) --- */
.landing-content {
  position: relative; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 24px;
  animation: land-rise .7s cubic-bezier(.2,.8,.2,1);
}
@keyframes land-rise { from { transform: translateY(26px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.landing-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.landing-crest {
  font-size: 54px; line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
  animation: sun-bob 6s ease-in-out infinite alternate;
}
.landing-title {
  margin: 0; font-weight: 700; letter-spacing: 1px; line-height: 1;
  font-size: clamp(34px, 7vw, 64px);
  background: linear-gradient(180deg, #fff1c4 0%, #f4c560 48%, #d49a30 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 16px rgba(244,197,96,.55)) drop-shadow(0 4px 6px rgba(0,0,0,.45));
  animation: title-glow 3.4s ease-in-out infinite alternate;
}
@keyframes title-glow {
  from { filter: drop-shadow(0 0 12px rgba(244,197,96,.4))  drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
  to   { filter: drop-shadow(0 0 28px rgba(255,210,110,.78)) drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
}
.landing-tagline {
  margin: 0; font-family: var(--font-mono);
  font-size: clamp(15px, 2.6vw, 20px); letter-spacing: 1px;
  color: #ffe9c2; text-shadow: 0 1px 4px rgba(0,0,0,.65);
}

/* --- Carte de connexion --- */
.auth-card {
  position: relative; width: 340px; max-width: 90vw; padding: 22px;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%);
  color: var(--ink);
  border: 2px solid #34220f; border-radius: 8px;
  box-shadow:
    0 0 0 5px #5e3f24,            /* cadre bois (planche) */
    0 0 0 7px #34220f,            /* liseré sombre */
    0 10px 26px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 14px;
  animation: go-pop .45s ease-out;
}
.auth-card-glow {
  position: absolute; inset: -28px; z-index: -1; border-radius: 22px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,210,120,.38), transparent 70%);
  filter: blur(8px);
}
.auth-card .tabs { display: flex; gap: 6px; }
.auth-card .tabs button {
  flex: 1;
  background: linear-gradient(180deg, #8a5e36, #654225);
  border: 2px solid #34220f; border-radius: 5px;
  padding: 8px; font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: #f3e4c2; text-shadow: 0 1px 1px rgba(0,0,0,.45);
  cursor: pointer; transition: background .12s, transform .08s;
}
.auth-card .tabs button:hover { transform: translateY(-1px); }
.auth-card .tabs button.active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,250,220,.6);
}
.auth-card .form { display: flex; flex-direction: column; gap: 12px; }
.auth-card .form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--wood);
}
.auth-card .form input {
  background: var(--parchment-2); border: 2px solid #34220f; border-radius: var(--r);
  padding: 10px 11px; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  box-shadow: inset 1px 1px 0 rgba(80,40,10,.2);
  transition: border-color .15s, box-shadow .15s;
}
.auth-card .form input::placeholder { color: var(--ink-fade); opacity: .75; }
.auth-card .form input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: inset 1px 1px 0 rgba(80,40,10,.2), 0 0 0 3px rgba(244,197,96,.3);
}
.auth-card .err { color: var(--red); font-size: 14px; font-weight: 600; min-height: 16px; text-align: center; }
.auth-card .form button.primary {
  margin-top: 2px;
  background: linear-gradient(180deg, #b9d68a, #8aaf4a); color: #1f3a08;
  border: 2px solid #34220f; border-radius: var(--r);
  padding: 11px; font-family: var(--font-body); font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: inset 1px 1px 0 rgba(255,240,200,.4), inset -1px -1px 0 rgba(80,40,10,.3), 0 3px 0 rgba(0,0,0,.35);
  transition: transform .08s, background .12s, box-shadow .12s;
}
.auth-card .form button.primary:hover {
  background: linear-gradient(180deg, #c9e69a, #9abf5a);
  box-shadow: inset 1px 1px 0 rgba(255,240,200,.5), inset -1px -1px 0 rgba(80,40,10,.3),
    0 0 16px rgba(150,200,90,.5), 0 3px 0 rgba(0,0,0,.35);
}
.auth-card .form button.primary:active {
  transform: translateY(2px);
  box-shadow: inset 1px 1px 0 rgba(255,240,200,.4), 0 1px 0 rgba(0,0,0,.35);
}
.landing-foot {
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 1px;
  color: rgba(255,235,200,.6); text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* --- Écran d'accueil combiné : carte connexion/jouer + panneau nouveautés --- */
.home-row {
  display: flex; align-items: stretch; justify-content: center;
  gap: 22px; flex-wrap: wrap; max-width: 96vw;
}
.home-row .auth-card { align-self: stretch; }
/* Le contenu de la carte gauche (login OU menu Jouer) garde l'espacement vertical */
#home-card-body { display: flex; flex-direction: column; gap: 14px; }
/* Carte « Nouveautés » à droite (réutilise le style parchemin de .auth-card) */
.home-news {
  width: 460px; max-width: 92vw;
  padding: 0; gap: 0; overflow: hidden; text-align: left;
}
.home-news-head {
  font-size: 16px; font-weight: 800; color: #f3e4c2;
  padding: 12px 18px; border-bottom: 2px solid #34220f;
  background: linear-gradient(180deg, #835a34, #5c3d22);
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(255,235,190,.16);
}
.home-news-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px 16px;
}
/* État connecté : menu Jouer / Réglages / Déconnexion */
.home-welcome {
  font-size: 19px; font-weight: 700; color: var(--wood);
  text-align: center; margin-bottom: 4px;
}
.home-actions { display: flex; flex-direction: column; gap: 12px; }

/* --- Sélecteur de monde dans le menu --- */
.home-worlds-label {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--wood); margin-top: 2px;
}
.home-worlds { display: flex; flex-direction: column; gap: 8px; max-height: 230px; overflow-y: auto; }
.hw-loading { font-size: 13px; color: var(--ink-soft); padding: 6px 2px; }
.hw-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; padding: 9px 12px; cursor: pointer;
  background: linear-gradient(180deg, var(--parchment-2), var(--parchment-dk));
  border: 2px solid var(--wood); border-radius: var(--r);
  transition: transform .08s, box-shadow .12s, background .12s;
}
.hw-card:hover { transform: translateY(-1px); }
.hw-card.selected {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255,250,220,.6), 0 0 0 2px var(--gold);
}
.hw-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.hw-meta { font-size: 12px; color: var(--wood); font-family: var(--font-mono); }
.mm-btn:disabled { opacity: .6; cursor: default; filter: saturate(.5); }
.home-logout {
  align-self: center;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--ink-soft); text-decoration: underline; padding: 4px 8px;
}
.home-logout:hover { color: var(--red); }

/* --- Mini-classement (top 5) dans le menu d'accueil --- */
.home-rank { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.home-rank-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--wood);
}
.home-rank-all {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  color: var(--ink-soft); text-transform: none; letter-spacing: 0;
}
.home-rank-all:hover { color: var(--wood); text-decoration: underline; }
.home-rank-list {
  display: flex; flex-direction: column;
  border: 2px solid var(--wood); border-radius: var(--r); overflow: hidden;
}
.hr-row {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 14px; color: var(--ink);
  background: var(--parchment-2);
}
.hr-row:nth-child(even) { background: var(--parchment-dk); }
.hr-rank { text-align: center; font-size: 15px; }
.hr-num { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.hr-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-gold { font-family: var(--font-mono); font-weight: 700; color: #b5832e; white-space: nowrap; }
.hr-row.hr-me { box-shadow: inset 0 0 0 2px var(--gold); }
.hr-row.hr-me .hr-name { color: var(--wood); }

/* Fondu de sortie quand on clique « Jouer » */
.landing.home-leaving {
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}

/* === Accueil v2 : fond image perso · titre haut-gauche · menu bas-gauche · nouveautés à droite === */
.landing { display: block; }                 /* enfants posés en absolu par-dessus l'image */
.landing-bg {
  position: absolute; inset: 0; z-index: 0;
  /* dégradé par défaut tant qu'aucune image n'est choisie */
  background-image: linear-gradient(180deg, #243b6b 0%, #6b3f6e 55%, #e89a4e 100%);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.landing-shade {                              /* assombrit pour lisibilité du texte */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,5,3,.66) 0%, rgba(8,5,3,.18) 38%, rgba(8,5,3,0) 60%),
    linear-gradient(0deg,  rgba(8,5,3,.62) 0%, rgba(8,5,3,0) 44%);
}
.landing-title-wrap {
  position: absolute; z-index: 6; text-align: left; max-width: 72vw;
  top: clamp(18px, 5vh, 54px); left: clamp(18px, 4vw, 54px);
}
.landing-title-wrap .landing-title { font-size: clamp(30px, 5.4vw, 56px); }
.landing-title-wrap .landing-tagline { margin-top: 6px; }
.home-left {
  position: absolute; z-index: 7;
  left: clamp(18px, 4vw, 54px); bottom: clamp(18px, 6vh, 60px);
  width: 340px; max-width: 90vw;
  display: flex; flex-direction: column; gap: 14px;
  max-height: calc(100vh - 120px);
}
#home-card.home-menu {
  position: static; margin: 0; width: 100%; max-width: 100%;
}
.home-rank-card { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.home-rank-card .home-rank-list { max-height: 210px; overflow-y: auto; }
.home-news {
  position: absolute; z-index: 7;
  right: clamp(18px, 4vw, 54px);
  top: clamp(16px, 4vh, 48px); bottom: clamp(16px, 4vh, 48px);
  width: 500px; max-width: 50vw;
}
.landing-foot { position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); bottom: 12px; font-size: 13px; }
@media (max-width: 860px) {
  .home-news { display: none; }
  .landing-title-wrap { left: 50%; transform: translateX(-50%); text-align: center; max-width: 92vw; }
  .home-left { left: 50%; transform: translateX(-50%); }
}

/* === Accueil v3 : panneau latéral sombre (logo haut · boutons · liens bas), scène à droite === */
.landing-bg { background-position: right center; }   /* sujet de l'image vers la droite (panneau couvre la gauche) */
.landing-shade {                                      /* léger fondu pour adoucir le bord du panneau */
  background: linear-gradient(90deg, rgba(8,5,3,.5) 0%, rgba(8,5,3,.12) 34%, rgba(8,5,3,0) 52%);
}
.home-panel {
  position: absolute; z-index: 7; top: 0; bottom: 0; left: 0;
  width: min(34vw, 460px); min-width: 348px;
  display: flex; flex-direction: column;
  padding: clamp(22px, 3.4vh, 44px) clamp(20px, 2vw, 36px);
  background: linear-gradient(180deg, rgba(26,22,18,.97) 0%, rgba(18,14,10,.98) 100%);
  border-right: 2px solid #34220f;
  box-shadow: 7px 0 30px rgba(0,0,0,.5), inset -1px 0 0 rgba(255,220,160,.06);
  animation: land-rise .6s cubic-bezier(.2,.8,.2,1);
}
.home-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding-top: 4px; }
.home-logo-img { max-width: 100%; max-height: 150px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.home-brand .landing-title { font-size: clamp(28px, 3.4vw, 46px); }
.home-brand .landing-tagline { font-size: clamp(12px, 1.3vw, 15px); }

.home-card { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
#home-card-body { display: flex; flex-direction: column; gap: 16px; }
.home-panel .home-welcome { text-align: center; color: #f3e4c2; font-size: 16px; font-weight: 700; margin: 0; }
.home-panel .home-welcome b { color: var(--gold-bright, #ffd96b); }
.home-panel-foot {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding-top: 12px; color: rgba(243,233,210,.55);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
}

/* --- Boutons du menu (barre pleine largeur, libellé centré, glyphes latéraux) --- */
.mm-list { display: flex; flex-direction: column; gap: 12px; }
.mm-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; padding: 13px 16px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #e7ddca; cursor: pointer;
  background: linear-gradient(180deg, #4a4a4f, #353539);
  border: 2px solid #1f1f1e; border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 0 rgba(0,0,0,.4);
  transition: transform .08s, background .12s, box-shadow .12s, color .12s;
}
.mm-btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, #57575d, #3d3d42); color: #fff; }
.mm-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(0,0,0,.4); }
.mm-btn:disabled { opacity: .6; cursor: default; filter: saturate(.5); }
.mm-orn { font-size: 13px; color: rgba(255,220,150,.5); flex: none; }
.mm-txt { flex: 0 1 auto; }
.mm-btn-primary {
  background: linear-gradient(180deg, var(--gold-bright, #ffd96b), var(--gold, #e0a93b));
  color: #3a2606; border-color: #7a531a;
  box-shadow: inset 0 1px 0 rgba(255,250,220,.7), 0 0 18px rgba(255,200,90,.35), 0 3px 0 rgba(90,60,15,.55);
}
.mm-btn-primary .mm-orn { color: rgba(90,60,15,.6); }
.mm-btn-primary:hover {
  background: linear-gradient(180deg, #ffe48c, #eab948); color: #3a2606;
  box-shadow: inset 0 1px 0 rgba(255,250,220,.8), 0 0 26px rgba(255,210,110,.55), 0 3px 0 rgba(90,60,15,.55);
}
.mm-btn-quit { background: linear-gradient(180deg, #3a3133, #2a2426); color: #d9b9b9; }
.mm-btn-quit:hover { background: linear-gradient(180deg, #5a3a3c, #3e2a2c); color: #ffd9d9; }

/* --- Sélecteur de monde (compact, thème sombre) --- */
.home-world-wrap { display: flex; flex-direction: column; gap: 8px; }
.home-panel .home-worlds-label { color: rgba(255,220,160,.8); }
.home-panel .home-worlds { max-height: 168px; }
.home-panel .hw-card {
  background: linear-gradient(180deg, #3d3d42, #2c2c30);
  border: 2px solid #1f1f1e; color: #e7ddca;
}
.home-panel .hw-name { color: inherit; }
.home-panel .hw-meta { color: rgba(255,220,160,.7); }
.home-panel .hw-card.selected {
  background: linear-gradient(180deg, var(--gold-bright, #ffd96b), var(--gold, #e0a93b));
  box-shadow: inset 0 1px 0 rgba(255,250,220,.6), 0 0 0 2px var(--gold, #e0a93b);
}
.home-panel .hw-card.selected .hw-name,
.home-panel .hw-card.selected .hw-meta { color: #3a2606; }
/* Carte de monde enrichie : titre + badge, jauge de remplissage */
.home-panel .hw-card { gap: 5px; }
.hw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.hw-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.hw-badge.hw-mine { background: #2f6b34; color: #d9f5d0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.hw-badge.hw-full { background: #6b2f2f; color: #f5d0d0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.hw-badge.hw-visit { background: #3a4a6b; color: #d0def5; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.home-panel .hw-card.selected .hw-badge.hw-mine { background: #1f4a22; color: #eafce6; }
.hw-gauge {
  width: 100%; height: 6px; border-radius: 4px; overflow: hidden;
  background: rgba(0,0,0,.35); box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
.hw-gauge-fill {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #7bb661, #aee06a);
}
.hw-gauge-fill.hw-gauge-full { background: linear-gradient(90deg, #c0524a, #e0796a); }
.home-panel .hw-card.selected .hw-gauge { background: rgba(58,38,6,.28); }
.home-panel .hw-card.hw-disabled {
  opacity: .5; cursor: not-allowed; filter: saturate(.6);
  background: linear-gradient(180deg, #34343a, #26262a);
}
.home-panel .hw-card.hw-disabled:hover { transform: none; }

/* --- Connexion / inscription (thème sombre, dans le panneau) --- */
.home-panel .tabs { display: flex; gap: 8px; }
.home-panel .tabs button {
  flex: 1; padding: 9px; border-radius: 6px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  color: #cfc6b4; background: linear-gradient(180deg, #3d3d42, #2c2c30);
  border: 2px solid #1f1f1e; transition: background .12s, color .12s, transform .08s;
}
.home-panel .tabs button:hover { transform: translateY(-1px); }
.home-panel .tabs button.active {
  background: linear-gradient(180deg, var(--gold-bright, #ffd96b), var(--gold, #e0a93b)); color: #3a2606;
}
.home-panel .form { display: flex; flex-direction: column; gap: 12px; }
.home-panel .form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,220,160,.82);
}
.home-panel .form input {
  background: #211d18; border: 2px solid #1f1f1e; border-radius: 6px; padding: 10px 11px;
  font-family: var(--font-body); font-size: 15px; color: #f0e7d4;
}
.home-panel .form input::placeholder { color: rgba(240,231,212,.4); }
.home-panel .form input:focus { outline: none; border-color: var(--gold, #e0a93b); box-shadow: 0 0 0 3px rgba(224,169,59,.25); }
.home-panel .err { color: #ff9b8a; font-size: 13px; font-weight: 600; min-height: 16px; text-align: center; }
.home-panel .form button.primary {
  margin-top: 2px; padding: 12px; border-radius: 7px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 1px;
  color: #3a2606; background: linear-gradient(180deg, var(--gold-bright, #ffd96b), var(--gold, #e0a93b));
  border: 2px solid #7a531a; box-shadow: inset 0 1px 0 rgba(255,250,220,.7), 0 3px 0 rgba(90,60,15,.55);
  transition: transform .08s, box-shadow .12s, background .12s;
}
.home-panel .form button.primary:hover { transform: translateY(-1px); background: linear-gradient(180deg, #ffe48c, #eab948); }
.home-panel .form button.primary:active { transform: translateY(1px); }

@media (max-width: 760px) {
  .home-panel { width: 100%; min-width: 0; border-right: 0; box-shadow: none; }
  .landing-bg { background-position: center; }
  .landing-shade { background: rgba(8,5,3,.45); }
}

/* --- Écran de chargement (après clic sur « Jouer ») : barre de progression --- */
.home-loader {
  position: absolute; inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, rgba(14,9,5,.72), rgba(8,5,3,.9));
  opacity: 0; transition: opacity .3s ease;
}
.home-loader.show { opacity: 1; }
.home-loader-card {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  min-width: min(360px, 80vw); padding: 26px 30px;
}
.home-loader-title {
  font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: 1px;
  color: #f3e4c2; text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.home-loader-bar {
  position: relative; width: 100%; height: 16px;
  background: rgba(0,0,0,.45);
  border: 2px solid #34220f; border-radius: 9px; overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
}
.home-loader-fill {
  width: 0%; height: 100%; border-radius: 7px 5px 5px 7px;
  background: linear-gradient(180deg, var(--gold-bright, #ffd96b), var(--gold, #e0a93b));
  box-shadow: 0 0 12px rgba(255,200,90,.55), inset 0 1px 0 rgba(255,250,220,.7);
  transition: width .25s ease;
}
.home-loader-pct {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 1px;
  color: rgba(243,233,210,.85);
  min-height: 18px;
}
/* Barre « indéterminée » : phase de préparation du monde, avant les sprites.
   Un segment doré glisse de gauche à droite tant qu'on attend. */
.home-loader-bar.indeterminate .home-loader-fill {
  width: 38%;
  transition: none;
  animation: hl-indet 1.1s ease-in-out infinite;
}
@keyframes hl-indet {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* --- Écran bloquant : jeu déjà ouvert dans un autre onglet/fenêtre --- */
#tab-block {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse at center, #2a1d10, #120a04 80%);
  font-family: var(--font-body);
}
.tab-block-card {
  width: 440px; max-width: 92vw; padding: 30px 26px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.tab-block-icon { font-size: 56px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.tab-block-title { margin: 0; font-size: 24px; font-weight: 800; color: var(--gold-bright); text-shadow: 0 2px 0 var(--wood-dark); }
.tab-block-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.tab-block-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.tab-block-actions .mm-btn { width: auto; min-width: 150px; }

/* --- Aide contextuelle des convoyeurs (mode pose) — version compacte --- */
#conveyor-help {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 500;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 11px;
  max-width: 92vw; padding: 5px 12px;
  background: rgba(20,14,8,.92); border: 1px solid #4a3620; border-radius: 7px;
  color: #cdbf9f; font-family: system-ui, sans-serif; font-size: 11.5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); pointer-events: none;
  animation: cvh-in .18s ease-out;
}
@keyframes cvh-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
#conveyor-help .cvh-name { font-weight: 700; color: #e0a85a; }
#conveyor-help span { display: inline-flex; align-items: center; gap: 4px; }
#conveyor-help kbd {
  font-family: ui-monospace, Consolas, monospace; font-size: 10px; font-weight: 600;
  background: #2f2517; border: 1px solid #5a4326; border-radius: 3px; padding: 1px 5px; color: #f3e9d2;
}
#conveyor-help .cvh-tip { flex-basis: 100%; display: block; text-align: center; font-size: 10.5px; color: #948b6e; }

/* ============================================================
   SCROLLBARS (cohérence visuelle)
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(80,40,10,.3); border-radius: 4px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--wood-mid));
  border-radius: 4px;
  border: 1px solid var(--wood-dark);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }

/* ============================================================
   MENU PRINCIPAL (lancement : Jouer / Réglages + patchnote)
   ============================================================ */
#main-menu {
  position: fixed; inset: 0;
  z-index: 550;
  display: flex; align-items: center; justify-content: center;
  gap: 26px;
  padding: 32px;
  /* Fond = la carte du jeu, assombrie et floutée */
  background: radial-gradient(ellipse at center, rgba(20,14,8,.42), rgba(10,7,3,.72));
  backdrop-filter: blur(7px) brightness(.78);
  -webkit-backdrop-filter: blur(7px) brightness(.78);
}
/* ============================================================
   TUTORIEL / GUIDE DU DÉBUTANT (mini-quêtes d'introduction)
   ============================================================ */
#quest-panel {
  position: fixed; left: 12px; bottom: 12px;
  width: 360px; max-width: calc(100vw - 24px);
  /* Au-dessus du spot d'assombrissement de l'indicateur (z 280) → le panneau
     d'explication reste lumineux et lisible pendant la visite. */
  z-index: 285; padding: 0; overflow: hidden;
  font-family: var(--font-body);
}
.quest-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #835a34, #5c3d22);
  border-bottom: 2px solid #34220f;
  cursor: move; user-select: none;
}
.quest-head::before { content: "⠿"; color: rgba(243,228,193,.7); font-size: 15px; }
.quest-title { flex: 1; font-weight: 800; font-size: 17px; color: #f3e4c2; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.quest-count { font-size: 14px; font-weight: 700; color: rgba(243,228,193,.85); }
.quest-hide {
  background: none; border: none; cursor: pointer;
  color: rgba(243,228,193,.85); font-size: 15px; line-height: 1; padding: 2px 4px;
}
.quest-hide:hover { color: var(--red); }
.quest-list {
  list-style: none; margin: 0; padding: 7px 8px;
  display: flex; flex-direction: column; gap: 5px;
  max-height: 52vh; overflow-y: auto;
}
.quest-item {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 15px; line-height: 1.3; color: var(--ink);
  padding: 8px 9px; border-radius: 6px;
}
.quest-item .quest-ic { flex-shrink: 0; font-size: 19px; line-height: 1.2; }
.quest-item.done { opacity: .62; }
.quest-item.done .quest-text {
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  color: var(--ink-fade);
}
.quest-item.current {
  background: rgba(212,154,48,.18);
  box-shadow: inset 0 0 0 1.5px var(--gold);
  font-weight: 600;
}
.quest-skip {
  display: block; margin: 4px 8px 8px; width: calc(100% - 16px);
  background: linear-gradient(180deg, #8a5e36, #654225);
  border: 2px solid #34220f; border-radius: var(--r);
  padding: 8px; font-family: var(--font-body); font-size: 12px; font-weight: 700;
  color: #f3e4c2; cursor: pointer; transition: background .12s;
}
.quest-skip:hover { background: linear-gradient(180deg, #a3733f, #7a5230); color: #fff; }

/* Navigation de la visite guidée (Retour / Suivant) */
.quest-tour-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px;
}
.qt-prev, .qt-next {
  font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer;
  border: 2px solid var(--wood); border-radius: var(--r); padding: 9px 16px;
}
.qt-prev { background: linear-gradient(180deg, #8a5e36, #654225); color: #f3e4c2; }
.qt-prev:hover { background: linear-gradient(180deg, #a3733f, #7a5230); }
.qt-next { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,250,220,.6); }
.qt-next:hover { background: linear-gradient(180deg, #ffd982, var(--gold-bright)); }

/* Indicateur du guide, dans le STYLE DU JEU (cadre bois sombre + liseré doré,
   comme les panneaux parchemin) : spot doux sépia qui focalise la cible, cadre
   gilded qui respire, petit halo "radar" et une enseigne dorée qui pointe.
   (Le spot est masqué pendant une pose, cf. quests._updatePointer.) */
#quest-pointer {
  position: fixed; z-index: 280; pointer-events: none; display: none;
  border-radius: 9px;
  border: 2px solid #34220f;                          /* cadre bois sombre */
  box-shadow:
    0 0 0 100vmax rgba(24, 14, 5, .45),               /* spot sépia (plus doux) */
    inset 0 0 0 2px var(--gold-bright, #ffd96b),      /* liseré or intérieur */
    inset 0 0 12px rgba(255, 210, 110, .35),
    0 0 16px 3px rgba(255, 200, 90, .6);              /* halo doré chaud */
  animation: qp-glow 1.4s ease-in-out infinite;
}
#quest-pointer.show { display: block; }
/* Le cadre "respire" : le liseré et le halo dorés s'intensifient doucement. */
@keyframes qp-glow {
  0%, 100% { box-shadow: 0 0 0 100vmax rgba(24,14,5,.45), inset 0 0 0 2px var(--gold,#d49a30), inset 0 0 12px rgba(255,210,110,.30), 0 0 14px 3px rgba(255,200,90,.5); }
  50%      { box-shadow: 0 0 0 100vmax rgba(24,14,5,.45), inset 0 0 0 2px var(--gold-bright,#ffd96b), inset 0 0 18px rgba(255,210,110,.55), 0 0 24px 6px rgba(255,210,110,.85); }
}
/* Halo "radar" : un anneau doré fin qui s'étend et s'estompe. */
#quest-pointer::after {
  content: ''; position: absolute; inset: -3px;
  border: 2px solid var(--gold-bright, #ffd96b); border-radius: 11px;
  animation: qp-ping 1.5s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes qp-ping {
  0%   { transform: scale(1);    opacity: .75; }
  100% { transform: scale(1.4);  opacity: 0; }
}
/* Enseigne dorée à contour bois qui pointe la cible, avec un léger flottement. */
#quest-pointer .qp-arrow {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  margin-bottom: 12px; width: 0; height: 0;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 18px solid var(--gold-bright, #ffd96b);
  /* contour "bois" sombre autour du triangle + ombre portée → look gravé. */
  filter:
    drop-shadow(1px 0 0 #34220f) drop-shadow(-1px 0 0 #34220f)
    drop-shadow(0 1.5px 0 #34220f) drop-shadow(0 3px 3px rgba(0,0,0,.5));
  animation: qp-bob .9s ease-in-out infinite;
}
@keyframes qp-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-9px); }
}

/* Assistant intégré dans le panneau du guide : avatar + bulle d'explication. */
.quest-assistant {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px;
  background: rgba(212,154,48,.10);
  border-bottom: 2px solid var(--wood-mid);
}
.qg-avatar {
  flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, var(--parchment), var(--parchment-dk));
  border: 3px solid var(--wood); box-shadow: 0 0 0 2px var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; line-height: 1; overflow: hidden;
  animation: qg-bob 2.8s ease-in-out infinite;
}
.qg-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  image-rendering: pixelated;
}
@keyframes qg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.qg-bubble {
  position: relative; flex: 1;
  background: var(--parchment); color: var(--ink);
  border: 2px solid var(--wood); border-radius: 9px;
  padding: 10px 12px;
  font-size: 14px; line-height: 1.4; font-weight: 600;
}
/* petit triangle parchemin (queue de la bulle) pointant vers le personnage */
.qg-bubble::after {
  content: ''; position: absolute; left: -7px; top: 50%;
  width: 12px; height: 12px; background: var(--parchment);
  border-left: 2px solid var(--wood); border-bottom: 2px solid var(--wood);
  transform: translateY(-50%) rotate(45deg);
}

/* ── VISITE GUIDÉE : panneau centré + agrandi (apparaît quand on recommence). ──
   !important pour battre une éventuelle position « déplacée » → toujours centré. */
#quest-panel.tour-mode {
  left: 50% !important; top: 50% !important;
  right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 700px; max-width: 94vw;
}
#quest-panel.tour-mode .quest-head { padding: 16px 22px; }
#quest-panel.tour-mode .quest-head::before { font-size: 20px; }
#quest-panel.tour-mode .quest-title { font-size: 26px; }
#quest-panel.tour-mode .quest-count { font-size: 19px; }
#quest-panel.tour-mode .quest-assistant { gap: 22px; padding: 28px 26px; }
#quest-panel.tour-mode .qg-avatar { width: 128px; height: 128px; font-size: 74px; border-width: 4px; }
#quest-panel.tour-mode .qg-bubble {
  font-size: 21px; line-height: 1.5; padding: 20px 24px; border-radius: 13px;
}
#quest-panel.tour-mode .quest-tour-nav { padding: 18px 24px 8px; }
#quest-panel.tour-mode .qt-prev,
#quest-panel.tour-mode .qt-next { font-size: 20px; padding: 14px 30px; }
#quest-panel.tour-mode .quest-skip { font-size: 16px; padding: 13px; margin: 4px 24px 18px; width: calc(100% - 48px); }

body.menu-open #top-left,
body.menu-open #right-col,
body.menu-open #topbar-tools,
body.menu-open #top-right,
body.menu-open #left-sidebar,
body.menu-open #hud,
body.menu-open #chat,
body.menu-open #admin-toggle,
body.menu-open #place-hdv,
body.menu-open #quest-panel,
body.menu-open #quest-guide,
body.menu-open #quest-pointer,
body.menu-open #notif-feed { display: none !important; }
.mm-card {
  height: min(620px, 86vh);
  display: flex; flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.mm-left {
  width: 360px; max-width: 38vw;
  align-items: center;
  padding: 34px 26px;
  text-align: center;
}
.mm-title {
  font-size: 30px; font-weight: 800;
  color: var(--gold-bright);
  margin: 6px 0 4px;
  text-shadow: 0 2px 0 var(--wood-dark), 0 0 16px rgba(255,200,87,.4);
  line-height: 1.2;
}
.mm-tagline {
  font-size: 15px; color: var(--ink-soft);
  margin-bottom: 30px;
}
#mm-home, #mm-settings-panel {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%;
  margin-top: auto; margin-bottom: auto;
}
.mm-btn {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px; font-weight: 700;
  color: #f3e4c2;
  background: linear-gradient(180deg, #8a5e36, #654225);
  border: 2px solid #34220f;
  border-radius: 5px;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  box-shadow:
    inset 1px 1px 0 rgba(255,222,165,.28),
    inset -1px -2px 0 rgba(0,0,0,.40),
    0 3px 0 rgba(0,0,0,.4);
  transition: transform .08s, box-shadow .08s, background .1s;
}
.mm-btn:hover { background: linear-gradient(180deg, #a3733f, #7a5230); }
.mm-btn:active { transform: translateY(3px); box-shadow: inset 1px 1px 0 rgba(40,20,5,.45); }
.mm-btn-primary {
  font-size: 19px;
  padding: 16px;
  color: #1f3a08;
  background: linear-gradient(180deg, #b9d68a, #8aaf4a);
  border-color: #34220f;
  text-shadow: 0 1px 0 rgba(255,240,200,.4);
}
.mm-btn-primary:hover { background: linear-gradient(180deg, #c9e69a, #9abf5a); filter: brightness(1.04); }

/* Sous-panneau Réglages */
.mm-settings-title {
  font-size: 16px; font-weight: 800;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
.mm-set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  background: rgba(212,185,127,.20);
  border: 2px solid var(--parchment-dk);
  border-radius: 6px;
  font-size: 15px; font-weight: 600;
  color: var(--ink);
}
.mm-set-check { cursor: pointer; justify-content: flex-start; }
.mm-set-check input { width: 16px; height: 16px; cursor: pointer; }
.mm-mini-btn {
  padding: 5px 10px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700;
  color: #f3e4c2;
  background: linear-gradient(180deg, #8a5e36, #654225);
  border: 2px solid #34220f;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
.mm-mini-btn:hover { background: linear-gradient(180deg, #a3733f, #7a5230); }
.mm-mini-btn.active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--ink); border-color: var(--gold-bright); text-shadow: none;
}

/* Colonne droite : patchnote */
.mm-right {
  width: 520px; max-width: 52vw;
}
.mm-right-head {
  font-size: 16px; font-weight: 800;
  color: var(--gold-bright);
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--bg-2, #4d3623), var(--bg-1, #3a2818));
  border-bottom: 2px solid var(--wood);
  text-shadow: 0 1px 2px #000;
}
.mm-patchnote {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
}
.mm-set-row input[type="range"] {
  width: 130px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* --- Fenêtre Réglages (menu + en jeu) --- */
#settings-overlay,
#sound-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 6, 3, .8);
  display: flex; align-items: center; justify-content: center;
  z-index: 620;
  backdrop-filter: blur(3px);
}
#settings-box,
#sound-box {
  width: 430px; max-width: 94vw;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
#settings-body,
#sound-body {
  padding: 16px;
  display: flex; flex-direction: column; gap: 9px;
}
/* Le menu Sons peut être long (volumes + liste) → il défile. */
#sound-body { max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }
.snd-section-title {
  font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--wood); margin: 4px 0 2px;
  border-bottom: 1px solid var(--parchment-dk); padding-bottom: 3px;
}

/* --- Liste des sons (menu Sons) --- */
#sound-list {
  display: flex; flex-direction: column; gap: 3px;
  margin: 4px 0;
}
.snd-row {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px;
}
.snd-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snd-row .snd-vol { flex: 0 0 64px; width: 64px; accent-color: var(--gold, #f0c46a); cursor: pointer; }
.snd-volval { flex: 0 0 32px; text-align: right; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.snd-custom { color: var(--green, #7bf0a8); }
.snd-row button {
  flex: 0 0 auto;
  padding: 2px 6px;
  font-size: 13px;
  cursor: pointer;
}
.snd-row button:disabled { opacity: .35; cursor: default; }