/* Flourborne zone map navigator: always accessible, even when world-map art falls back. */
#zoneNavigation{
 position:absolute!important;z-index:38!important;
 top:clamp(158px,18vh,210px)!important;right:clamp(14px,2vw,34px)!important;
 left:auto!important;bottom:auto!important;
 box-sizing:border-box;width:min(238px,44vw);max-width:calc(100% - 24px);
 display:flex;flex-direction:column;align-items:stretch;gap:7px;
 padding:11px 12px;
 border:1px solid #a98348;border-radius:4px;
 background:linear-gradient(155deg,#273244f0,#171624f5 75%);
 box-shadow:0 6px 24px #000c,inset 0 0 0 1px #eacb8333;
 color:#eacb91;
}
#zoneNavigation label{
 font:700 11px/1.3 Georgia,serif;letter-spacing:1.1px;color:#e9cd91;
}
#zoneNavigation select{
 display:block;width:100%;min-width:0;min-height:39px;
 color:#f9e8c4;background:#151d2b;border:1px solid #a7834a;border-radius:3px;
 padding:8px 25px 8px 9px;font:12px Georgia,serif;
 cursor:pointer;
}
#zoneNavigation option,#zoneNavigation optgroup{color:#f9e8c4;background:#182130}
#zoneNavigation button{
 position:static!important;top:auto!important;bottom:auto!important;
 left:auto!important;right:auto!important;
 display:block;width:100%;min-height:35px;padding:8px 9px;
 border:1px solid #bd9959;border-radius:3px;
 background:linear-gradient(#4f3522,#241721);color:#f8e1ae;
 text-align:center;font:700 12px Georgia,serif;cursor:pointer;
 box-shadow:inset 0 1px #f8d18b44,0 3px 10px #0008;
}
#zoneNavigation button:hover{filter:brightness(1.22)}
#zoneNavigation button:focus-visible,#zoneNavigation select:focus-visible{
 outline:2px solid #f9dda3;outline-offset:2px;
}
#zoneNavigation button[hidden]{display:none!important}
#zoneCoordinateGrid{
 position:absolute;inset:0;z-index:0;
 display:flex;align-items:flex-start;justify-content:center;
 border:1px solid #c1a16a;
 background-color:#243140;
 background-image:linear-gradient(to right,#e8d1a02a 1px,transparent 1px),
  linear-gradient(to bottom,#e8d1a02a 1px,transparent 1px),
  radial-gradient(ellipse at center,#405166 0%,#182431 90%);
 background-size:10% 10%,10% 10%,100% 100%;
 box-shadow:inset 0 0 65px #080d18c4;
}
#zoneCoordinateGrid span{
 display:block;max-width:85%;margin-top:11px;padding:6px 9px;
 border:1px solid #9e8558;background:#172334ee;
 color:#ebd5a8;text-align:center;font:700 10px/1.3 Georgia,serif;letter-spacing:1px;
}
#zoneCoordinateGrid[hidden]{display:none!important}
#viewport.zone-map-mode.zone-grid-mode #mapImage{visibility:hidden!important}
#zonePositionSummary:not([hidden]){
 top:auto!important;bottom:clamp(77px,12vh,124px)!important;
 left:auto!important;right:clamp(14px,2vw,34px)!important;
 max-width:min(340px,calc(100vw - 28px));z-index:36!important;
 text-align:left;overflow-wrap:anywhere;
}
#zonePositionSummary span{display:block;font-weight:700;margin:4px 0;color:#f5e8cd}
#zonePositionSummary small{line-height:1.5}
@media(max-width:850px){
 #zoneNavigation{
  top:132px!important;right:8px!important;
  width:min(218px,48vw);padding:8px;gap:5px;
 }
 #zoneNavigation label{font-size:9px}
 #zoneNavigation select{font-size:11px;min-height:35px}
 #zoneNavigation button{font-size:11px;min-height:33px;padding:6px}
 #zonePositionSummary:not([hidden]){
  bottom:70px!important;right:8px!important;
  max-width:min(260px,51vw);padding:8px 10px!important;font-size:11px;
 }
 #zonePositionSummary b{font-size:14px}
 #zoneCoordinateGrid span{font-size:8px}
}
@media(max-width:480px){
 #zoneNavigation{top:126px!important;width:min(186px,48vw)}
 #zonePositionSummary:not([hidden]){max-width:min(210px,54vw)}
}