/* The Flourborne – full-bleed atlas. Every UI control floats above the original map.
   Presentation layer only; no changes to coordinate mapping or event ingestion. */
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#0b0a08}
header{
 position:fixed!important;z-index:22;left:clamp(8px,1.25vw,24px);top:clamp(5px,1vh,12px);
 width:clamp(245px,28vw,450px);height:clamp(74px,10vw,118px)!important;
 padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;
 display:flex;align-items:center;justify-content:flex-start;pointer-events:none
}
header>div:first-child{width:100%;height:100%;min-height:0!important}
header h1{
 width:100%!important;height:100%!important;margin:0!important;padding:0!important;
 display:block!important;
 font-size:0!important;line-height:0!important;
 color:transparent!important;text-shadow:none!important;
 background:url('assets/ui/forge-title-plaque.png') center/contain no-repeat!important;
}
header .tagline,header .right{display:none!important}
.layout{
 position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;
 min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;
 display:block!important;overflow:hidden!important;background:#0b0a08!important;
}
.layout>.main{
 position:absolute!important;inset:0!important;
 width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;
 margin:0!important;padding:0!important;border:0!important;
 box-shadow:none!important;overflow:hidden!important;
}
.map-viewport{
 position:absolute!important;inset:0!important;min-height:0!important;flex:auto!important;
 background:radial-gradient(ellipse,#7d5a30 0%,#392719 68%,#0e0c09 100%)!important;
}
.map-viewport:after{box-shadow:inset 0 0 90px #090704b0!important}
/* Preserve the source map ratio for image, marker and polygon overlays.
   fitStage() sizes the stage to 1002:668 and centers it in the viewport. */
.map-stage{
 left:50%!important;top:50%!important;
 width:auto;height:auto;aspect-ratio:1002 / 668;
 border-radius:1px!important;
 box-shadow:0 0 0 2px #4a301b,0 0 0 5px #bb8a4d,0 0 0 7px #2d2012,0 12px 36px #000c!important;
}
/* The stage is already ratio-correct, so fill does not distort the artwork. */
.map-stage #mapImage{width:100%!important;height:100%!important;object-fit:fill!important}
.map-viewport{
 background:#24180f url('assets/ui/forge-atlas-screen.webp') center/cover no-repeat!important;
}
.map-viewport:after{box-shadow:inset 0 0 30px #100b06ad!important}
.atlas-head{
 position:absolute!important;z-index:21;top:clamp(90px,10vw,128px);left:clamp(10px,1.7vw,28px);
 min-height:0!important;max-width:min(720px,calc(100vw - 35px));
 padding:7px!important;margin:0;border:1px solid #c29853!important;border-radius:3px;
 background:linear-gradient(120deg,#24180ff0,#13121ae8)!important;
 box-shadow:0 6px 22px #000b!important;
}
.atlas-head .intro{display:none!important}
.atlas-head .tabs{gap:4px}
.atlas-head .tab{font-size:12px;padding:7px 10px;min-height:31px}
.map-toolbar{
 position:absolute!important;z-index:21;bottom:clamp(12px,2.1vh,29px);left:50%;
 transform:translateX(-50%);
 max-width:calc(100vw - 22px);width:max-content;min-height:0!important;
 padding:7px 9px!important;border:1px solid #aa8240!important;border-radius:3px;
 background:linear-gradient(#302116ec,#14121aef)!important;
 box-shadow:0 6px 25px #000b!important;
}
.map-toolbar .left{justify-content:center;gap:7px}
.map-toolbar .tool{min-height:32px;padding:6px 11px}
#sourceStatus{display:none!important}
#cloudSyncStatus{font-size:11px;white-space:nowrap;color:#f2d397}
.map-notice{
 position:absolute!important;z-index:19;bottom:76px;left:50%;transform:translateX(-50%);
 max-width:min(600px,calc(100vw - 30px));padding:5px 10px!important;
 text-align:center;font-size:10px!important;opacity:.85;
}
#backZone{
 position:absolute!important;z-index:24;top:clamp(145px,15vw,185px);
 left:clamp(10px,1.7vw,28px);box-shadow:0 4px 15px #0009
}
.zone-position-summary{top:clamp(145px,15vw,190px)!important;left:auto!important;right:clamp(10px,2vw,30px)!important}
.layout>.panel{
 position:fixed!important;z-index:40!important;
 right:clamp(10px,2vw,34px)!important;top:clamp(14px,3vh,35px)!important;bottom:clamp(12px,3vh,35px)!important;
 width:min(400px,calc(100vw - 20px))!important;max-width:none!important;
 background:linear-gradient(145deg,#211710f7,#0c1120f8 55%,#17110ef9)!important;
 box-shadow:0 14px 50px #000f, inset 0 0 0 2px #3c2a15!important;
}
.layout>.panel .hall-heading h2{
 background:url('assets/ui/hall-of-fame.png') center/contain no-repeat!important;
 height:66px!important;width:100%!important;
 font-size:0!important;color:transparent!important;text-shadow:none!important;
 margin:2px 0 5px!important;
}
.layout>.panel .hall-heading h2:before{content:none!important}
.layout>.panel .hall-heading{padding-top:9px!important}
.layout>.panel .hall-heading .hall-eyebrow{display:none}
.layout>.panel .hall-panel{background:#101426ee}
.layout>.panel .drawer-top{background:linear-gradient(#3a2316,#161017);border-bottom:2px ridge #b68a47}
.layout>.panel .detail{margin-top:9px}
.layout>.panel .advanced-tools{margin-bottom:6px}
@media(max-width:850px){
 header{width:min(280px,72vw)!important;height:76px!important;left:7px!important;top:3px!important}
 .atlas-head{top:81px!important;left:8px!important;max-width:calc(100vw - 16px);padding:5px!important}
 .atlas-head .tabs{gap:2px}
 .atlas-head .tab{padding:6px 7px;font-size:11px}
 .map-toolbar{bottom:10px!important}
 .map-notice{display:none}
 #backZone{top:137px!important;left:8px!important}
 .layout>.panel{top:7px!important;right:7px!important;bottom:7px!important;width:min(380px,calc(100vw - 14px))!important}
}
@media(max-width:480px){
 header{width:min(245px,75vw)!important;height:67px!important}
 .atlas-head{top:70px!important}
 .atlas-head .tab{font-size:10px;padding:6px 5px}
 .map-toolbar .tool{padding:6px 7px;font-size:11px}
 #cloudSyncStatus{font-size:10px}
}

/* Retired map tabs: the world map and clickable zone polygons remain primary navigation. */
.atlas-head,.tabs{display:none!important}
/* Place the limited controls over the darker atlas border, rather than the center of the map. */
.map-toolbar{
 left:clamp(14px,2.1vw,42px)!important;bottom:clamp(14px,2.2vh,30px)!important;
 transform:none!important;justify-content:flex-start!important;
}
.map-toolbar .left{justify-content:flex-start!important}
#backWorld[hidden]{display:none!important}
#backWorld:not([hidden]){display:inline-flex;align-items:center}
header{left:clamp(15px,2vw,42px)!important;top:clamp(10px,1.4vh,20px)!important}
/* No new pan/zoom behavior: stage and native map overlays stay co-registered. */
@media(max-width:850px){
 .map-toolbar{left:8px!important;bottom:8px!important;max-width:calc(100vw - 16px)!important}
 header{left:8px!important;top:6px!important}
 #backZone{top:clamp(90px,12vh,130px)!important}
}
@media(max-width:480px){
 .map-toolbar .left{gap:4px}
 #backWorld{font-size:10px!important}
 #cloudSyncStatus{max-width:120px;overflow:hidden;text-overflow:ellipsis}
}