/* Les zones suivent les proportions natives de l’illustration paysage. */
#screen-alliance .page-header { flex: 0 0 auto; }
#alliance-body { min-height: 0; scroll-behavior: auto; }
#alliance-body > * { flex-shrink: 0; }
.alliance-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1672 / 941;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #98784b80;
  border-radius: 14px;
  background: #151922;
  box-shadow: 0 8px 26px #0007;
}
.alliance-scene-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.alliance-scene::after { content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; box-shadow: inset 0 0 28px #04060b60; background: linear-gradient(180deg, #060a137a 0, transparent 13%, transparent 89%, #03050eb3 100%); }
.alliance-scene-heading { position: absolute; z-index: 1; top: 2%; left: 4%; right: 4%; text-align: center; color: #ffedc9; text-shadow: 0 2px 8px #000, 0 1px 2px #000; pointer-events: none; }
.alliance-scene-heading > span { display: block; margin-bottom: 2px; font-size: clamp(8px, 1.7vw, 10px); font-weight: 700; letter-spacing: .24em; color: #e6c791; }
.alliance-scene-heading strong { font: 600 clamp(16px, 3.5vw, 23px)/1.1 Georgia, serif; }
.alliance-landmark {
  position: absolute;
  z-index: 2;
  left: var(--land-x);
  top: var(--land-y);
  width: var(--land-w);
  height: var(--land-h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #ffefce;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.alliance-landmark-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  width: max-content;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid #d0b07c9c;
  border-radius: 4px 4px 9px 9px;
  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;
}
.alliance-landmark-label > .vf-icon,.alliance-landmark-label > .vf-heraldry-crest { width: 23px; height: 25px; flex-shrink: 0; }
.alliance-landmark-label > span { min-width: 0; }
.alliance-landmark-label b { display: block; font: 600 clamp(10px, 2.3vw, 13px)/1.15 Georgia, serif; }
.alliance-landmark-label small { display: block; margin-top: 3px; font-size: clamp(8px, 1.7vw, 10px); line-height: 1.15; color: #f1e1c4; }
.alliance-landmark:hover .alliance-landmark-label,
.alliance-landmark:focus-visible .alliance-landmark-label { border-color: #fff0b8; background: #252132aa; box-shadow: 0 0 16px #e5bd6844, 0 4px 10px #0008, inset 0 1px 0 #ffe9b650; }
.alliance-landmark:focus-visible { outline: 2px solid #ffe2a2; outline-offset: 0; background: #edc77915; }
.alliance-landmark-alert, .alliance-service-dot { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border: 1px solid #ffefbc; border-radius: 50%; background: #e1ae4f; box-shadow: 0 0 8px #e9b95699; }
.alliance-scene-hint { position: absolute; z-index: 1; left: 5%; right: 5%; bottom: 2%; color: #f3e5cc; font-size: clamp(10px, 2.2vw, 12px); letter-spacing: .025em; text-align: center; text-shadow: 0 2px 5px #000; pointer-events: none; }
.alliance-welcome { display: flex; flex-direction: column; gap: 12px; padding: 16px 12px; text-align: center; }
.alliance-welcome b { color: #ead3a6; font: 600 18px/1.2 Georgia, serif; }
.alliance-welcome p, .alliance-membership-intro { margin-top: 6px; font-size: 12px; color: #b8afc7; line-height: 1.55; }
.alliance-welcome .btn { padding-inline: 10px; font-size: 13px; }
.alliance-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.alliance-service { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; padding: 7px 5px; border: 1px solid #64503582; border-radius: 8px; background: linear-gradient(150deg, #25202d, #151420); color: #decdaa; font: inherit; cursor: pointer; }
.alliance-service > .vf-icon { width: 24px; height: 24px; }
.alliance-service b { display: block; font-size: 11px; }
.alliance-service small { display: block; margin-top: 3px; color: #aba0b5; font-size: 9px; }
.alliance-service:hover, .alliance-service:focus-visible { border-color: #d8b46d; outline: 1px solid #d8b46d; outline-offset: 2px; }
.alliance-service-dot { top: 3px; right: 3px; width: 6px; height: 6px; }
#screen-alliance .alliance-create input { min-width: 0; }
#screen-alliance .alliance-create .btn { padding-inline: 16px; }
#screen-alliance .hub-back { align-items: center; flex-wrap: wrap; }
#screen-alliance .hub-back .btn { flex-shrink: 0; }
#screen-alliance .hub-back b { color: #ddc89f; }
.alliance-buff-tree { padding: 20px 0 14px; }
.alliance-buff-root { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 28px; }
.alliance-buff-root > span:not(.vf-heraldry-standard) { display: grid; place-items: center; width: 68px; height: 76px; border: 1px solid #c5a56b; border-radius: 32px 32px 22px 22px; background: radial-gradient(ellipse at 50% 35%, #354c54, #101925 75%); box-shadow: 0 0 24px #6bb3af25, inset 0 0 12px #e5c07620; }
.alliance-buff-root .vf-icon { width: 42px; height: 48px; }
.alliance-buff-root b { color: #eddbb3; font: 600 17px/1.2 Georgia, serif; }
.alliance-buff-root small { font-size: 11px; color: #b3a8bf; }
.alliance-buff-root::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 21px; background: #a78a5b; }
.alliance-buff-branches { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 22px; }
.alliance-buff-branches::before { content: ''; position: absolute; top: 0; left: calc(16.666% - 2px); right: calc(16.666% - 2px); height: 1px; background: #a78a5b; }
.alliance-buff-branch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 5px 9px; border: 1px solid #605139; border-radius: 9px; background: linear-gradient(180deg, #25232f, #13131f); text-align: center; }
.alliance-buff-branch::before { content: ''; position: absolute; top: -23px; left: 50%; width: 1px; height: 22px; background: #a78a5b; }
.alliance-buff-branch.unlocked { border-color: #c7a362; box-shadow: inset 0 0 15px #d7b46a0c; }
.alliance-buff-sigil { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #897247; border-radius: 50%; background: #151923; }
.alliance-buff-sigil .vf-icon { width: 27px; height: 27px; }
.alliance-buff-branch h5 { min-height: 30px; display: grid; place-items: center; font: 600 12px/1.2 Georgia, serif; color: #e0c799; }
.alliance-buff-ranks { display: flex; gap: 6px; }
.alliance-buff-ranks i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid #847051; background: #13131b; }
.alliance-buff-ranks i.active { background: #e5c179; border-color: #ffe5aa; box-shadow: 0 0 6px #e5c17950; }
.alliance-buff-branch > strong { margin-top: 3px; color: #f3deaf; font-size: 20px; }
.alliance-buff-branch p { flex: 1; min-height: 30px; color: #ccc2d6; font-size: 10px; line-height: 1.4; }
.alliance-buff-branch > small { font-size: 9px; color: #a59aaf; }
.alliance-buff-branch .btn { width: 100%; margin-top: 3px; padding: 7px 2px; font-size: 10px; }
@media (max-width: 360px) {
  .alliance-landmark-label { gap: 3px; padding: 5px 4px; }
  .alliance-landmark-label > .vf-icon { width: 17px; height: 20px; }
  .alliance-service { flex-direction: column; gap: 3px; text-align: center; }
}

/* Le gonfanon et les écussons sont dessinés par alliance-heraldry.js. */
.alliance-head-crest > .vf-heraldry-crest { width: 46px; height: 46px; }
.alliance-emblem-link > .vf-heraldry-crest { width: 22px; height: 22px; vertical-align: middle; }
.alliance-map-access > .vf-heraldry-crest { width: 28px; height: 28px; flex-shrink: 0; }
.alliance-alert-slot { position: absolute; top: 0; right: 0; }
.alliance-landmark-alert { display: grid; place-items: center; top: -12px; right: -9px; width: 25px; height: 25px; border: 1px solid #ffe2a4; background: linear-gradient(145deg,#c54e4a,#791e33); box-shadow: 0 2px 6px #0009,0 0 10px #d6674660; }
.alliance-landmark-alert .vf-icon { width: 17px; height: 17px; }
.alliance-landmark-alert.alert-chest,.alliance-landmark-alert.alert-gold { animation: alliance-treasure 2.8s ease-in-out infinite; }
.alliance-landmark-board .alliance-landmark-label > .vf-icon { display: none; }
.alliance-map-guards { position: absolute; z-index: 3; display: flex; gap: 4px; left: 5%; top: 83%; width: 25%; }
.alliance-map-guard { position: relative; width: 30%; aspect-ratio: 1; padding: 0; border: 1px solid #e5c27b; border-radius: 50%; background: #192335; cursor: pointer; box-shadow: 0 2px 6px #000a; animation: alliance-guard-idle 4s ease-in-out infinite; animation-delay: calc(var(--guard-order) * -1.2s); }
.alliance-map-guard img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; border-radius: inherit; }
.alliance-map-guard > span { display: none; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); padding: 3px 5px; border-radius: 4px; background: #10121eef; color: #f4dfb3; font-size: 9px; white-space: nowrap; }
.alliance-map-guard:hover > span,.alliance-map-guard:focus-visible > span { display: block; }
.alliance-map-guard:focus-visible,.alliance-guard-card:focus-visible { outline: 2px solid #ffe7a6; outline-offset: 3px; }
.alliance-day-guards { padding: 12px; border: 1px solid #50445d; border-radius: 10px; background: #161622; }
.alliance-day-guards > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; margin-bottom: 10px; }
.alliance-day-guards b { color: #e9d3ab; font-size: 13px; }
.alliance-day-guards small,.alliance-local-note { display: block; color: #afa6bd; font-size: 11px; line-height: 1.5; }
.alliance-guard-roster { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-bottom: 8px; }
.alliance-guard-card { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 9px 4px; border: 1px solid #625341; border-radius: 8px; background: linear-gradient(#292431,#161622); color: #e5d5b7; font: inherit; cursor: pointer; }
.alliance-guard-card img { width: 40px; height: 40px; border: 1px solid #ad8a56; border-radius: 50%; object-fit: cover; object-position: center 18%; }
.alliance-guard-card > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.alliance-guard-card small { text-align: center; font-size: 9px; }
.alliance-tavern-heading { display: flex; align-items: start; justify-content: space-between; gap: 6px; }
.alliance-member { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid #ffffff0f; }
.alliance-member > img { width: 40px; height: 48px; flex-shrink: 0; border-radius: 7px; object-fit: cover; object-position: center 15%; }
.alliance-member > div { min-width: 0; }
.alliance-member b { display: block; color: #e9d8b9; font-size: 12px; overflow-wrap: anywhere; }
.alliance-member .role { display: inline-block; padding: 2px 5px; margin: 3px 0; font-size: 9px; color: #c6b5dd; border-radius: 4px; background: #ffffff09; }
.alliance-member .role.chef { color: #f3cc7d; }
.alliance-member small { display: block; color: #a89ab5; font-size: 9px; }
.alliance-member-activity { margin-left: auto; text-align: right; flex-shrink: 0; }
.alliance-member-activity > span { display: block; margin-top: 5px; font-size: 10px; color: #c3b4d5; }
.alliance-chat-messages { max-height: 290px; overflow-y: auto; margin: 12px 0; padding: 10px; border: 1px solid #51425d; border-radius: 8px; background: #0d101b; }
.alliance-chat-message { margin-bottom: 12px; }
.alliance-chat-message:last-child { margin-bottom: 0; }
.alliance-chat-message header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #dfc699; font-size: 12px; }
.alliance-chat-message time { font-size: 10px; color: #a69caf; flex-shrink: 0; }
.alliance-chat-message p { margin-top: 5px; font-size: 12px; color: #d3cbdc; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.alliance-chat-empty { color: #a69caf; font-size: 12px; }
.alliance-chat form { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.alliance-chat label { color: #d5c5ad; font-size: 12px; }
.alliance-chat textarea,#alliance-motd { width: 100%; padding: 10px; border: 1px solid #665475; border-radius: 7px; background: #10121e; color: #eee2cd; font: inherit; font-size: 13px; resize: vertical; user-select: text; }
.alliance-chat form .btn { align-self: flex-end; }
.alliance-chat-heroes { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.alliance-chat-hero { width: 40px; position: relative; border: 1px solid var(--tier-color); border-radius: 4px; overflow: hidden; }
.alliance-chat-hero img { display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover; }
.alliance-chat-hero small { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 8px; color: #f6d580; background: #090c19da; }
.alliance-exp-modes { display: flex; gap: 8px; margin: 12px 0; }
.alliance-fuel-card { margin: 10px 0; padding: 14px; border: 1px solid #81673d; border-radius: 9px; background: #262030; color: #e2c99e; line-height: 1.6; }
.alliance-emblem-editor { margin-top: 20px; }
.alliance-emblem-editor fieldset { border: 0; padding: 8px 0; }
.alliance-emblem-editor legend { color: #bfb0c9; font-size: 12px; }
.alliance-emblem-editor button { min-width: 34px; min-height: 34px; }
.alliance-emblem-preview { display: flex; align-items: center; gap: 20px; padding: 12px 8px 20px; }
.alliance-emblem-preview > div:not(.vf-heraldry-standard) { flex: 1; min-width: 0; }
.alliance-emblem-preview b { display: block; color: #ecd09c; font: 600 18px/1.25 Georgia,serif; }
.alliance-emblem-preview p { margin: 8px 0; color: #cab895; font-size: 12px; }
.alliance-emblem-preview small { color: #b8aebf; font-size: 12px; line-height: 1.5; }
.alliance-color-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; margin: 8px 0 14px; }
.alliance-color-option { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid #66583f; border-radius: 6px; background: #141721; color: #d9ccb4; font: inherit; font-size: 10px; padding: 8px 3px; cursor: pointer; }
.alliance-color-option i { display: block; width: 28px; height: 25px; border: 1px solid #d1ae6a; background: linear-gradient(100deg,#0006,transparent 35%,#ffffff25 50%,#0005),var(--c); clip-path: polygon(0 0,100% 0,100% 100%,50% 75%,0 100%); }
.alliance-crest-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.alliance-crest-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 5px 10px; min-height: 118px; border: 1px solid #63523b; border-radius: 9px; background: radial-gradient(ellipse at 50% 30%,#343331,#131720 75%); color: #d8c7a6; font: inherit; cursor: pointer; }
.alliance-crest-option > .vf-heraldry-crest { display: block; width: min(100%,78px); height: 78px; }
.alliance-crest-option > span { font: 600 11px/1.3 Georgia,serif; text-align: center; }
.alliance-color-option.on,.alliance-crest-option.on { border-color: #f4d796; box-shadow: inset 0 0 16px #dab45825,0 0 0 1px #deb76266; color: #ffebbc; }
.alliance-crest-option.on::after { content: ''; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; background: #ffe0a0; transform: rotate(45deg); box-shadow: 0 0 7px #f7c975; }
.alliance-color-option:hover,.alliance-crest-option:hover { border-color: #e8ca89; }
.alliance-color-option:focus-visible,.alliance-crest-option:focus-visible { outline: 2px solid #ffe0a0; outline-offset: 3px; }
@media (max-width: 480px) { .alliance-crest-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .alliance-emblem-preview { gap: 12px; padding-inline: 0; } .alliance-emblem-preview > .vf-heraldry-standard { width: 104px; height: 146px; flex-shrink: 0; } }
@keyframes alliance-guard-idle { 50% { transform: translateY(-2px); } }
@keyframes alliance-treasure { 50% { box-shadow: 0 0 13px #f1c969aa,0 2px 6px #0009; } }
@media (prefers-reduced-motion: reduce) { .alliance-map-guard,.alliance-landmark-alert { animation: none; } }