/* Illustrations paysage natives. Le même repère sert à l’image et aux destinations. */
#screen-hub::before { background-image: linear-gradient(#05060a66,#05060aaa),url('../assets/art/village-landscape-v2.jpg'); }
#screen-alliance { max-width: 1200px; }
.panorama-shell { width: 100%; min-width: 0; border: 1px solid #82694780; border-radius: 12px; overflow: hidden; background: #10141e; }
.panorama-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 12px; background: linear-gradient(120deg,#20212d,#111622); border-bottom: 1px solid #a4875345; }
.panorama-toolbar b { display: block; color: #e7d3ad; font: 600 16px/1.2 Georgia,serif; }
.panorama-toolbar small { display: block; margin-top: 3px; color: #a497ac; font-size: 10px; }
.panorama-toolbar .btn { flex-shrink: 0; min-height: 44px; min-width: 80px; padding: 8px 12px; border-color: #8c744d; color: #e5cc9c; background: #151a28; font-size: 12px; }
.panorama-toolbar .btn[aria-pressed="true"] { background: #433722; color: #ffedbc; }
.panorama-viewport { position: relative; width: 100%; overflow: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: thin; scrollbar-color: #9e8150 #10131e; -webkit-overflow-scrolling: touch; }
.panorama-viewport:focus-visible { outline: 2px solid #efd394; outline-offset: -3px; }
.panorama-content { width: 100%; aspect-ratio: 1672 / 941; flex-shrink: 0; }
.panorama-help { padding: 8px 12px; color: #aaa0b8; background: #10141e; font-size: 10px; line-height: 1.45; text-align: center; }
.panorama-shell[data-expanded="true"] .panorama-content { width: max(160%,960px); max-width: none; }
.panorama-shell[data-expanded="true"] .panorama-viewport { max-height: 75dvh; }
#village-scene .panorama-shell { display: flex; flex-direction: column; height: 100%; border: 0; border-radius: 0; background: transparent; }
#village-scene .panorama-toolbar { flex-shrink: 0; background: #10121ddd; }
#village-scene .panorama-viewport { flex: 1; min-height: 0; max-height: none; display: grid; align-items: center; justify-items: center; }
#village-scene .village-map { position: relative; height: auto; aspect-ratio: 1671 / 941; width: 100%; max-width: calc(var(--panorama-height,100dvh) * 1671 / 941); max-height: none; box-shadow: 0 5px 25px #0009; }
#village-scene .village-map img { width: 100%; height: auto; object-fit: contain; }
#village-scene .panorama-help { flex-shrink: 0; background: #10121ddd; }
#village-scene [data-expanded="true"] .panorama-viewport { display: block; }
#village-scene [data-expanded="true"] .village-map { width: max(160%,960px); max-width: none; }
.alliance-scene.panorama-content { aspect-ratio: 1672 / 941; border: 0; border-radius: 0; box-shadow: none; }
.alliance-scene.panorama-content::after { background: none; box-shadow: inset 0 0 15px #04060b40; }
.alliance-map-guards { left: 42%; top: 75%; width: 7.5%; }
.alliance-map-guard { min-width: 0; }
.alliance-landmark-label { padding: 5px 7px; min-height: 34px; }
.alliance-landmark-label b { font-size: 12px; }
.alliance-landmark-label small { font-size: 9px; }
.alliance-map-accesses { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.alliance-map-access { position: relative; display: flex; align-items: center; gap: 8px; min-height: 60px; min-width: 0; border: 1px solid #665338; border-radius: 8px; padding: 9px; background: linear-gradient(135deg,#272431,#141822); color: #e8d3ad; font: inherit; text-align: left; cursor: pointer; }
.alliance-map-access > .vf-icon { flex-shrink: 0; width: 26px; height: 28px; }
.alliance-map-access b { display: block; font: 600 13px/1.2 Georgia,serif; }
.alliance-map-access small { display: block; margin-top: 4px; color: #ac9cb7; font-size: 10px; }
.alliance-map-access .alliance-alert-slot { top: 10px; right: 10px; }
.alliance-map-access .alliance-landmark-alert { width: 20px; height: 20px; top: -7px; right: -7px; }
.alliance-map-access .alliance-landmark-alert .vf-icon { width: 14px; height: 14px; }
.alliance-map-access:hover,.alliance-map-access:focus-visible { outline: 1px solid #efd7a0; outline-offset: 2px; border-color: #d9b16a; }
#alliance-body > :not(.panorama-shell):not(.alliance-map-accesses) { width: 100%; max-width: 780px; margin-left: auto; margin-right: auto; }
@media (min-width: 901px) { .alliance-map-accesses { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (max-width: 640px) {
  .panorama-toolbar { min-height: 48px; padding: 5px 9px; }
  .panorama-toolbar b { font-size: 14px; }
  .panorama-toolbar small { font-size: 9px; }
  .panorama-shell[data-expanded="false"] .alliance-landmark-label { min-height: 23px; padding: 3px; border-radius: 4px; }
  .panorama-shell[data-expanded="false"] .alliance-landmark-label b { font-size: 9px; }
  .panorama-shell[data-expanded="false"] .alliance-landmark-label small,.panorama-shell[data-expanded="false"] .alliance-landmark-label > .vf-icon,.panorama-shell[data-expanded="false"] .alliance-landmark-label > .vf-heraldry-crest,.panorama-shell[data-expanded="false"] .alliance-map-guards { display: none; }
  .panorama-shell[data-expanded="false"] .alliance-landmark-alert { width: 17px; height: 17px; top: -8px; right: -7px; }
  .panorama-shell[data-expanded="false"] .alliance-landmark-alert .vf-icon { width: 11px; height: 11px; }
  .alliance-map-accesses { gap: 6px; }
  .alliance-map-access { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; text-align: center; }
  .alliance-map-access > .vf-icon { width: 23px; height: 24px; }
  .alliance-map-access b { font-size: 11px; }
  .alliance-map-access small { font-size: 9px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  #screen-hub { max-width: none; }
  #screen-hub .hub-topbar { display: flex; min-height: 52px; padding: max(4px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 4px max(10px,env(safe-area-inset-left)); gap: 10px; }
  #screen-hub .hub-topbar .avatar-frame-small { width: 36px; height: 36px; }
  #screen-hub .hub-power { display: none; }
  #screen-hub .hub-bottom-bar { min-height: 52px; gap: 7px; padding: 4px max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  #screen-hub .bottom-menu-item { height: 44px; }
  #village-scene .panorama-toolbar { min-height: 44px; padding: 0 12px; }
  #village-scene .panorama-toolbar small,#village-scene .panorama-help { display: none; }
  .panorama-shell[data-expanded="true"] .panorama-viewport { max-height: 72dvh; }
  #screen-alliance { padding-left: max(12px,env(safe-area-inset-left)); padding-right: max(12px,env(safe-area-inset-right)); }
}