/* Même écriture et même plaque pour les lieux du village et de l’alliance. */
.alliance-landmark-label,
#village-scene .village-map-label,
#screen-hub .bottom-menu-item {
  border: 1px solid #d0b07c9c;
  border-radius: 4px 4px 9px 9px;
  color: #ffefce;
  background: linear-gradient(180deg, #201e2b78, #0d101b9c);
  box-shadow: 0 3px 9px #0006, inset 0 1px 0 #f4d79c25;
  text-shadow: 0 1px 2px #050709, 0 1px 5px #050709;
  text-align: center;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
#village-scene .village-map-label b,
#screen-hub .bottom-menu-item small {
  display: block;
  font: 600 12px/1.15 Georgia, serif;
  letter-spacing: normal;
}
#village-scene .hotspot-label,
#village-scene [data-expanded="true"] .hotspot-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  width: max-content;
  padding: 5px 7px;
  pointer-events: none;
}
#village-scene .hotspot-label > .vf-icon { width: 23px; height: 25px; flex-shrink: 0; }

/* Le cercle ne contient que l’illustration ; le nom repose sur son bord inférieur. */
#village-scene .village-map { --corner-size: 60px; --corner-gap: 8px; }
#village-scene .village-corner {
  width: var(--corner-size);
  height: var(--corner-size);
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  isolation: isolate;
  touch-action: manipulation;
}
#village-scene .village-corner-medallion {
  position: absolute;
  inset: 0 4px 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #d0b07c80;
  background: radial-gradient(circle at 40% 32%, #393143b3, #101320cc 78%);
  box-shadow: 0 3px 9px #0006, inset 0 1px 0 #f4d79c25;
}
#village-scene .village-corner-medallion > .vf-icon { width: 72%; height: 72%; }
#village-scene .village-corner-label {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin: 0;
  padding: 3px 2px;
  pointer-events: none;
}
#village-scene .village-corner.corner-right-2 { top: calc(2.5% + var(--corner-size) + var(--corner-gap)); }
#village-scene .village-corner.corner-right-3 { top: calc(2.5% + 2 * var(--corner-size) + 2 * var(--corner-gap)); }
#village-scene .hotspot.live .hotspot-label::after { position: absolute; top: -4px; right: -4px; margin: 0; border: 1px solid #ffefbc; }

#village-scene .hotspot:not(.locked):is(:hover, :active, :focus-visible) .hotspot-label,
#village-scene .village-corner:is(:hover, :active, :focus-visible) .village-corner-label,
#screen-hub .bottom-menu-item:is(:hover, :focus-visible, .active) {
  border-color: #fff0b8;
  background: #252132aa;
  box-shadow: 0 0 16px #e5bd6844, 0 4px 10px #0008, inset 0 1px 0 #ffe9b650;
}
#village-scene .hotspot:focus-visible,
#village-scene .village-corner:focus-visible,
#screen-hub .bottom-menu-item:focus-visible { outline: 2px solid #ffe2a2; outline-offset: 2px; }
#village-scene .hotspot:focus-visible { border-radius: 9px; }

@media (max-width: 640px) {
  #village-scene .village-map { --corner-size: 48px; }
  #village-scene [data-expanded="false"] .hotspot-label { min-height: 23px; padding: 3px 5px; border-radius: 4px; gap: 3px; }
  #village-scene [data-expanded="false"] .hotspot-label b { font-size: 9px; }
  #village-scene [data-expanded="false"] .hotspot-label > .vf-icon { display: none; }
  #village-scene .village-corner-label { min-height: 19px; }
  #village-scene .village-corner-label b { font-size: 10px; }
  #village-scene [data-expanded="true"] .village-map { --corner-size: 60px; }
  #village-scene [data-expanded="true"] .village-corner-label { min-height: 22px; }
  #village-scene [data-expanded="true"] .village-corner-label b { font-size: 12px; }
  #screen-hub .bottom-menu-item small { font-size: 11px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  #village-scene [data-expanded="false"] .village-map { --corner-size: 48px; }
  #village-scene [data-expanded="false"] .village-corner-label { min-height: 19px; }
  #village-scene [data-expanded="false"] .village-corner-label b { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #village-scene .village-map-label,
  #screen-hub .bottom-menu-item { transition: none; }
}