#tileUI {
  top: 20px;
  right: 20px;
  width: 353px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  max-height: calc(100vh - 120px);
  /* 2026-07-28 — CORRECTIF (v1 avec overflow:hidden ici a cassé le HUD Missions
     en entier — titre ET liste invisibles, cf. missions.css pour l'explication
     complète). Retiré : #tileUI n'a besoin d'AUCUN overflow propre — max-height
     ci-dessus suffit à borner l'espace disponible pour le flex-shrink de ses 2
     enfants (comportement standard flexbox : un max-height sur un conteneur
     flex-column sans height explicite sert de taille principale définie pour
     le calcul de flex-shrink), et c'est .missionsBox (ci-dessous) qui gère son
     propre scroll interne — même principe que #scorePanel (base.css), qui n'a
     lui non plus jamais eu besoin d'overflow sur un ancêtre.
     2026-08-01 — CORRECTIF (demande explicite : "en basse résolution
     verticale, le HUD missions en cours chevauche les 9 boutons en bas à
     droite"). max-height valait calc(100vh - 40px) (top:20 + marge basse
     20px) — cette marge de 20px ne tenait jamais compte de
     .debug-light-panel (eda.css, position:fixed ancré par le bas), qui peut
     grandir à 2 rangées de boutons (82px) sur les largeurs étroites. Mesuré
     en direct (Chrome, thème bleu, bottom:4px) : 4+82+10px de respiration ≈
     96px, arrondi à 100px. Reserve 20px → 100px (top(20)+100=120). Thème
     médiéval : cf. plus bas [data-theme="ancien"] #tileUI, marge propre
     (cadre + panneau boutons décalé). */
}

/* 2026-08-01 — demande explicite : écarter du cadre décoratif ingame en
   thème médiéval (cf. CONTEXT.md §39) — #tileUI touche le bord HAUT ET
   DROIT, donc les 2 décalés. .missionsBox (enfant flex direct, cf.
   missions.css) suit automatiquement, aucune règle séparée nécessaire.
   max-height recalculée pour garder la même marge basse de 20px qu'à
   l'origine (top(20)+marge(20)=40 → top(85)+marge(20)=105). Thème bleu non
   concerné (pas de cadre), règle de base inchangée.
   ERRATUM (même jour) : +85px jugé trop → ramené à +65px.
   ERRATUM 2 (même jour) : marge cadre 65px → 52px. top/right = 20+52 = 72px.
   max-height : 40+52 = 92px retranchés.
   ERRATUM 3 (même jour, demande explicite) : marge réduite de 10px de plus
   → top/right = 72-10 = 62px. max-height : 92-10 = 82px retranchés.
   ERRATUM 4 (même jour, demande explicite : "en basse résolution verticale,
   le HUD missions en cours chevauche les 9 boutons en bas à droite et passe
   sous le cadre"). Même cause que la règle non-thémée plus haut (marge
   basse jamais mise à jour depuis l'ajout du cadre), en pire ici :
   .debug-light-panel est lui-même repoussé par le cadre (bottom:56px en
   médiéval, eda.css) et peut grandir à 82px (2 rangées de boutons). Mesuré
   en direct : bottom(56) + hauteur(82) + 10px de respiration ≈ 148px,
   arrondi à 152px. max-height : top(62) + 152 = 214px retranchés. */
[data-theme="ancien"] #tileUI {
  top: 62px;
  right: 62px;
  max-height: calc(100vh - 214px);
}

/* 2026-07-17 — wrapper autour de .tilePreviewRow + .tileCountRow (demande
   explicite) : en thème bleu, layout pur (aucun changement visuel — le gap
   vertical entre les 2 rangées, auparavant fourni par le gap:8px de #tileUI
   directement sur ses enfants, est repris ici puisque les 2 rangées ne sont
   plus des enfants directs de #tileUI). En thème ancien, cf. plus bas :
   parchemin 9-slice appliqué sur .tileDeckBox uniquement — .tileBox/
   .deckRemainingBox gardent leur propre carte sombre opaque inchangée. */
.tileDeckBox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tilePreviewRow,
.tileCountRow {
  display: flex;
  gap: 8px;
}

.tileBox,
.deckRemainingBox {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px;
  text-align: center;
  background: rgba(0, 0, 0, 0.68);
  border: 1px solid rgba(120, 180, 255, 0.38);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.deckRemainingBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Style BebasNeue gros chiffre — harmonisé avec #arcadeScore */
#deckRemaining,
#tilesPlaced {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 16px rgba(90, 170, 255, 0.42);
  font-variant-numeric: tabular-nums;
  font-family: 'BebasNeue', system-ui, sans-serif;
}

.title {
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(180, 215, 255, 0.82);
  text-transform: uppercase;
}

/* Le titre de deckRemainingBox hérite du margin standard (plus d'override) */

.mini-hex-tile {
  position: relative;
  width: 96px;
  height: 83px;
  margin: 4px auto 0;
  overflow: hidden;
  clip-path: polygon(100% 50%, 75% 6.7%, 25% 6.7%, 0 50%, 25% 93.3%, 75% 93.3%);
  background: rgba(255, 255, 255, 0.08);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55));
}

.mini-hex-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(100% 50%, 75% 6.7%, 25% 6.7%, 0 50%, 25% 93.3%, 75% 93.3%);
  box-shadow: inset 0 0 0 2px rgba(21, 26, 33, 0.92), inset 0 0 18px rgba(0, 0, 0, 0.28);
  z-index: 5;
}

.mini-sector {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(21, 26, 33, 0.38), inset 0 12px 18px rgba(255, 255, 255, 0.06), inset 0 -14px 18px rgba(0, 0, 0, 0.16);
}

.mini-sector::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 44%, rgba(0, 0, 0, 0.14));
  pointer-events: none;
}

/*
  Les aperçus CSS doivent respecter l'orientation X/Z de la grille Three.js.
  En écran, l'axe Z positif descend : les secteurs sont donc le miroir vertical
  des coordonnées mathématiques utilisées par createTileMesh().
*/
.mini-sector-n { clip-path: polygon(50% 50%, 100% 50%, 75% 93.3%); }
.mini-sector-ne { clip-path: polygon(50% 50%, 75% 93.3%, 25% 93.3%); }
.mini-sector-se { clip-path: polygon(50% 50%, 25% 93.3%, 0 50%); }
.mini-sector-s { clip-path: polygon(50% 50%, 0 50%, 25% 6.7%); }
.mini-sector-sw { clip-path: polygon(50% 50%, 25% 6.7%, 75% 6.7%); }
.mini-sector-nw { clip-path: polygon(50% 50%, 75% 6.7%, 100% 50%); }

.mini-hex-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  clip-path: polygon(100% 50%, 75% 6.7%, 25% 6.7%, 0 50%, 25% 93.3%, 75% 93.3%);
  border: 2px solid rgba(21, 26, 33, 0.82);
  box-sizing: border-box;
  box-shadow: inset 0 10px 12px rgba(255, 255, 255, 0.08), inset 0 -10px 12px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

.mini-value {
  position: absolute;
  z-index: 3;
  padding: 1px 3px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mini-sector-n .mini-value { left: 72%; top: 65%; }
.mini-sector-ne .mini-value { left: 50%; top: 76%; }
.mini-sector-se .mini-value { left: 28%; top: 65%; }
.mini-sector-s .mini-value { left: 28%; top: 35%; }
.mini-sector-sw .mini-value { left: 50%; top: 24%; }
.mini-sector-nw .mini-value { left: 72%; top: 35%; }

/* Aperçus de tuiles : mêmes codes visuels que la grille, version CSS légère. */
.mini-type-water {
  background-color: #5fa8d3;
  background-image:
    radial-gradient(circle at 20% 28%, rgba(255, 255, 255, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 62%, rgba(255, 255, 255, 0.10) 0 2px, transparent 3px),
    repeating-linear-gradient(165deg, rgba(235, 250, 255, 0.20) 0 3px, transparent 3px 16px);
}

.mini-type-field {
  background-color: #e5c65a;
  background-image:
    repeating-linear-gradient(48deg, rgba(255, 238, 150, 0.60) 0 6px, transparent 6px 18px),
    repeating-linear-gradient(48deg, transparent 0 9px, rgba(120, 82, 24, 0.26) 9px 11px, transparent 11px 18px),
    radial-gradient(circle at 30% 25%, rgba(255, 248, 180, 0.30) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 72%, rgba(112, 78, 26, 0.18) 0 2px, transparent 3px);
}

.mini-type-forest {
  background-color: #1f5a2b;
  background-image:
    radial-gradient(circle at 20% 26%, rgba(63, 147, 64, 0.92) 0 7px, rgba(31, 106, 46, 0.92) 8px 13px, transparent 14px),
    radial-gradient(circle at 55% 34%, rgba(47, 125, 50, 0.96) 0 8px, rgba(18, 72, 30, 0.96) 9px 15px, transparent 16px),
    radial-gradient(circle at 75% 72%, rgba(63, 147, 64, 0.86) 0 7px, rgba(31, 106, 46, 0.92) 8px 13px, transparent 14px),
    radial-gradient(circle at 38% 78%, rgba(10, 30, 15, 0.28) 0 5px, transparent 6px);
}

.mini-type-grass {
  background-color: #78a84a;
  background-image:
    radial-gradient(ellipse at 24% 28%, rgba(108, 148, 62, 0.82) 0 19%, transparent 20%),
    radial-gradient(ellipse at 76% 70%, rgba(126, 170, 72, 0.78) 0 18%, transparent 19%),
    radial-gradient(ellipse at 60% 36%, rgba(112, 78, 42, 0.20) 0 8%, transparent 9%),
    repeating-linear-gradient(105deg, rgba(196, 216, 110, 0.22) 0 2px, transparent 2px 12px);
}

.mini-type-house {
  background-color: #8e4a34;
  background-image:
    linear-gradient(28deg, transparent 0 42%, rgba(210, 180, 120, 0.24) 42% 50%, transparent 50%),
    linear-gradient(128deg, transparent 0 48%, rgba(210, 180, 120, 0.20) 48% 56%, transparent 56%),
    radial-gradient(circle at 28% 32%, rgba(196, 154, 104, 0.86) 0 8px, rgba(111, 52, 40, 0.82) 9px 13px, transparent 14px),
    radial-gradient(circle at 66% 68%, rgba(196, 154, 104, 0.76) 0 8px, rgba(111, 52, 40, 0.78) 9px 13px, transparent 14px);
}

.mini-type-rail {
  background-color: #dddddd;
  background-image:
    repeating-linear-gradient(90deg, rgba(70, 70, 70, 0.26) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(0,0,0,0.12));
}

/* ─── [data-theme="ancien"] uniquement — demande explicite : aucun changement
   en thème bleu (.tileDeckBox reste un simple conteneur de layout dans ce
   thème). Parchemin 9-slice sur le wrapper, même technique que #scorePanel/
   .missionsBox (§32) ; .tileBox/.deckRemainingBox gardent leur propre carte
   sombre opaque inchangée par-dessus — pas de changement de texte/couleur là,
   uniquement le fond de la nouvelle div. ─── */
[data-theme="ancien"] .tileDeckBox {
  border: 50px solid transparent;
  border-image-source: url("../images/manuscrit-1.png");
  border-image-slice: 50 fill;
  border-image-repeat: repeat;
  border-radius: 0;
  padding: 0;
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.45));
  /* 2026-07-18 — retour utilisateur : les titres des 4 cellules (TUILE COURANTE/
     SUIVANTE/RESTANTES/POSÉES) doivent utiliser la même typo que "MISSIONS EN
     COURS" (.missionsBox, base.css/missions.css) une fois en thème médiéval.
     Même mécanisme : .missionsBox pose font-family:Georgia sur le conteneur,
     .title (classe partagée, pas de font-family propre) en hérite. Ici
     .tileDeckBox n'avait jamais reçu cette police — .title y restait donc dans
     la police système/monospace ambiante au lieu du serif parchemin. */
  font-family: Georgia, "Times New Roman", serif;

  /* 2026-07-18 — .tileDeckBox est display:flex + flex-direction:column + gap:8px
     directement sur lui-même (thème bleu, pour espacer .tilePreviewRow/
     .tileCountRow) : cassé par le wrapper unique .internal-parchment (devenait
     le seul enfant du conteneur flex). Transfert du flex+gap sur le wrapper.
     Pas d'overflow ni de scroll ici (contrairement à #scorePanel/.fps-counter/
     .help-panel/.debug-light-body) — marge négative appliquée normalement,
     sans piège. */
  display: block;
}
[data-theme="ancien"] .tileDeckBox[data-parchment-variant="2"] { border-image-source: url("../images/manuscrit-2.png"); }
[data-theme="ancien"] .tileDeckBox > .internal-parchment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -20px -25px -20px -25px;
}

/* 2026-07-18 — retour utilisateur : revient sur la décision du 2026-07-17
   ci-dessus ("gardent leur propre carte sombre opaque inchangée"). Les 4
   cellules (tuile courante/tuile suivante/restantes/posées) doivent elles
   aussi passer dans le thème médiéval — plus de fond sombre ni de typo cyan,
   même principe que .stats-summary-card/.stats-card (#scorePanel, base.css) :
   translucide noir léger sur le parchemin clair, texte brun foncé. */
[data-theme="ancien"] .tileBox,
[data-theme="ancien"] .deckRemainingBox {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(74, 54, 35, 0.20);
  box-shadow: none;
}
[data-theme="ancien"] #deckRemaining,
[data-theme="ancien"] #tilesPlaced {
  color: #332415;
  text-shadow: none;
}
[data-theme="ancien"] .title {
  color: #4a3623;
}
[data-theme="ancien"] .mini-hex-tile {
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}