/* v1 T9: world (01) and Kalimdor (02) over the T8 shell. Level 03 is the zone map.
   Zone names are map lettering. No plaque, no box, no border around a name. */

#crumbs{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:6px;margin:0;padding:0;background:none;border:0;pointer-events:auto;white-space:nowrap}
#crumbs button{margin:0;padding:0;border:0;background:none;box-shadow:none;color:var(--sand);font:600 14px/1 var(--serif);cursor:pointer}
#crumbs button small{font:600 9px/1 system-ui,sans-serif;letter-spacing:.14em;color:var(--brass);margin-right:4px}
#crumbs button[aria-current="true"]{color:var(--ivory)}
#crumbs button[aria-disabled="true"]{opacity:.4;cursor:default}
#crumbs .sep{color:var(--brass);font:14px/1 var(--serif)}
@media (max-width:900px){
  /* The bar stacks and grows. An overlay crumb sits on You. Give it a row of its own. */
  #crumbs{position:static;left:auto;top:auto;transform:none;order:12;flex:1 0 100%;justify-content:center;padding:2px 0 4px}
}
#tiers{position:absolute;top:22px;right:calc(var(--rail-x) + 62px);z-index:6;display:flex;gap:10px;background:none;border:0;padding:0}
#tiers[hidden]{display:none}
#tiers button{margin:0;padding:0;border:0;background:none;box-shadow:none;color:var(--sand);font:600 13px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 3px #000,0 1px 2px #000;cursor:pointer}
#tiers button.on{color:var(--ivory);text-decoration:underline;text-underline-offset:3px}

#atlas{position:absolute;inset:0;z-index:1;overflow:hidden;background:#071926;cursor:grab;touch-action:none}
#atlas.dragging{cursor:grabbing}
#atlas[hidden]{display:none}
#atlas .wsvg{display:block;width:100%;height:100%}
#atlas .chart-sheet{opacity:.44;mix-blend-mode:screen}
#atlas[data-level="02"] .chart-sheet{opacity:.18}
#atlas .cont-glow{fill:#246888;opacity:.36}
#atlas .cont-shallow{fill:#2b7b9e;opacity:.28}
#atlas .coast-stroke{fill:none;stroke:rgba(236,216,172,.52);stroke-width:1.1;vector-effect:non-scaling-stroke;pointer-events:none}
#atlas .rg{fill:rgba(255,248,226,.001);stroke:rgba(233,211,166,.26);stroke-width:.9;vector-effect:non-scaling-stroke;stroke-linejoin:round;cursor:pointer}
#atlas[data-level="01"] .rg{stroke:rgba(233,211,166,.16);stroke-width:.75}
#atlas .rg.built{stroke:rgba(229,203,144,.46);stroke-width:1.15;fill:rgba(229,203,144,.035)}
#atlas .rg.unavailable{fill:none;stroke:none;pointer-events:none}
#atlas.has-hover .rg:not(.on){fill:rgba(6,14,18,.28)}
#atlas .rg.on{fill:rgba(235,205,135,.28);stroke:#fff2c2;stroke-width:2.2;filter:drop-shadow(0 0 8px rgba(229,203,144,.65))}
#atlas .rg.tier-dim{fill:rgba(6,13,16,.55);stroke:rgba(200,173,118,.1)}
#atlas .city-dot{pointer-events:none;opacity:0}
#atlas[data-level="02"] .city-dot{opacity:.92;pointer-events:auto;cursor:pointer}
#atlas[data-level="02"] .city-dot.v1{cursor:pointer}
#atlas[data-level="01"] .city-dot.cx,#atlas[data-level="02"] .city-dot.cx{opacity:.92;pointer-events:auto;cursor:pointer}

#atlas .marks{position:absolute;inset:0;pointer-events:none;z-index:2}
#atlas .zl{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;margin:0;padding:0;border:0;background:none;box-shadow:none;cursor:pointer;white-space:nowrap}
#atlas .zl .znm{font:italic 600 13px/1.15 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:#fff3d0cc;text-shadow:0 0 3px #000,0 0 7px #000}
#atlas .zl .zlv{margin-top:2px;font:600 10px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e7d7a8cc;text-shadow:0 0 3px #000,0 0 6px #000}
#atlas .zl.built .znm{color:#fff6e0}
#atlas .zl.on .znm{color:#fff6e0}
#atlas .zl.tier-dim{opacity:.28}
#atlas .zl[hidden]{display:none}

.app.atlas #world,
.app.atlas #pins,
.app.atlas .vignette,
.app.atlas .legend,
.app.atlas .water-key,
.app.atlas #tip,
.app.atlas .transit,
.app.atlas .coords{visibility:hidden;pointer-events:none}

/* F-027: the zone map opens in a frame over everything, fading in as the atlas lands on it */
#f027-zone{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:60;opacity:0}
#atlas.flying{pointer-events:none}
#atlas .marks{transition:opacity .12s}
#atlas.flying .marks{opacity:0}
/* 11-01: landing on a continent view, the zone map underneath stays hidden until the atlas is up (index.html sets data-boot, levels.js clears it). */
html[data-boot="atlas"] #viewport>*{visibility:hidden}