/* Hero-driven atlas: one information column, one unobstructed map. */
html body{overflow:hidden}
html body header{display:none!important}
html body .layout{
 display:grid!important;grid-template-columns:clamp(340px,28vw,440px) minmax(0,1fr)!important;
 width:100vw!important;height:100dvh!important;min-height:0!important;padding:12px!important;gap:12px;
 overflow:hidden!important;
}
html body .layout>.main{
 grid-column:2;grid-row:1;width:100%!important;height:100%!important;min-height:0!important;
 margin:0!important;border:1px solid #8a7047!important;border-radius:3px;
}
html body .layout>.hall-panel{
 grid-column:1;grid-row:1;position:relative!important;inset:auto!important;
 display:flex!important;flex-direction:column!important;width:100%!important;height:100%!important;
 min-height:0!important;max-height:none!important;margin:0!important;overflow:hidden!important;
 border-radius:4px!important;
}
html body .layout>.hall-panel .hall-heading{position:relative;flex:none;padding:16px!important;z-index:10}
html body .layout>.hall-panel .hall-heading h2{font:small-caps 27px/1.15 Georgia,serif!important;text-align:left;margin:0 0 6px!important}
html body .layout>.hall-panel .hall-heading p{display:block!important;font:11px/1.4 system-ui,sans-serif!important;margin:0 0 12px!important}
.hero-picker{position:relative}
#openRoster.hero-picker-trigger,#heroView{
 display:flex!important;align-items:center;justify-content:space-between;gap:12px;
 width:100%!important;min-height:44px;padding:8px 11px!important;border:1px solid #977b4a!important;
 border-radius:3px;background:linear-gradient(#242a32,#151a21)!important;color:#edd4a1!important;
 font:600 13px/1.3 system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer;
}
#heroSelected{display:flex;align-items:center;gap:10px;min-width:0;text-align:left}
#heroSelected>span:last-child{overflow-wrap:anywhere}
#heroSelected small{color:#a3a8ad;font-weight:400}
.hero-picker .class-portrait{width:26px!important;height:26px!important;flex:none;border-width:1px!important;border-radius:3px!important}
.hero-picker .class-portrait .portrait-level{display:none!important}
.hero-picker .portrait-fallback{font:700 14px/1 system-ui!important}
.all-heroes-icon{display:grid;place-items:center;width:26px;height:26px;color:#e5c58a;font-size:22px}
.hero-options{
 position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:100;
 max-height:min(360px,50dvh);overflow:auto;overscroll-behavior:contain;
 background:#141b25;border:1px solid #ac8b54;border-radius:3px;padding:4px;
 box-shadow:0 12px 30px #000a;outline-offset:2px;
}
.hero-options[hidden],.hero-view-control[hidden]{display:none!important}
.hero-options [role=option]{display:flex;align-items:center;gap:10px;min-height:42px;padding:7px 9px;border-radius:2px;cursor:pointer;font:13px/1.3 system-ui,sans-serif;color:#e7e2d7}
.hero-options [role=option] small{display:block;color:#939eab;font-size:10px;margin-top:2px}
.hero-options [aria-selected=true]{background:#b28c4129;color:#f1d198}
.hero-options .is-focused,.hero-options [role=option]:hover{background:#344052;outline:1px solid #aa8d55;outline-offset:-1px}
.hero-view-control{margin-top:8px}
#heroView{display:block!important;padding-right:24px!important;min-height:38px}
html body .layout>.hall-panel #hallContent{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
html body .layout>.hall-panel #hallContent[hidden]{display:none!important}
html body .layout>.hall-panel .hall-feed{flex:1;min-height:0;overflow-y:auto!important;padding:0 16px 10px!important}
html body .layout>.hall-panel .hall-summary{flex:none;margin:0 16px!important;padding:8px 0!important;font:10px/1.3 system-ui,sans-serif!important;text-transform:none!important;letter-spacing:0!important}
html body .journey-entry{gap:9px;padding:8px 0!important;min-height:48px}
html body .journey-entry .journey-icon,html body .journey-entry .journey-icon-fallback{width:30px!important;height:30px!important;min-width:30px!important;flex:none;border-radius:3px}
html body .journey-entry .journey-icon[hidden]{display:none!important}
html body .journey-entry-top{flex-wrap:nowrap;gap:8px;align-items:baseline}
html body .journey-entry-top .hall-hero-link{font:600 12px/1.25 system-ui,sans-serif!important}
html body .journey-entry-top time{font:10px/1.25 system-ui,sans-serif!important;letter-spacing:0}
html body .journey-entry-title{font:12px/1.35 system-ui,sans-serif!important;margin-top:3px;text-transform:none;letter-spacing:0}
html body .journey-entry-detail{font:10px/1.25 system-ui,sans-serif!important;margin-top:2px;color:#8f99a4}
.journey-level .journey-icon,.journey-level .journey-icon-fallback{border-color:#e9bb55;box-shadow:0 0 9px #eebc3b44}
.journey-level .journey-icon-fallback{color:#ffd66d;background:radial-gradient(circle,#836023,#22202a);font-size:25px}
html body .layout>.hall-panel #characterPanel{
 display:flex!important;flex-direction:column!important;position:static!important;inset:auto!important;
 width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;
 transform:none!important;margin:0!important;padding:0!important;border:0!important;border-image:none!important;
 border-radius:0;background:transparent!important;box-shadow:none!important;overflow:visible!important;
}
html body .layout>.hall-panel #characterPanel.show-character{flex:1;overflow-y:auto!important}
html body .layout>.hall-panel[data-view=journey] #characterPanel{flex:none;overflow:visible!important}
html body #characterPanel .drawer-top,html body #characterPanel #panelTitle,html body #characterPanel #panelSubtitle,html body #characterPanel #characterList{display:none!important}
html body .layout>.hall-panel #characterPanel #details{display:block!important;flex:none!important;overflow:visible!important;margin:0!important;min-height:0}
html body .layout>.hall-panel #characterPanel #details[hidden]{display:none!important}
html body .layout>.hall-panel #characterPanel .detail{display:block!important;overflow:visible!important;margin:0!important;padding:12px!important;background:transparent!important;border:0!important}
html body .layout>.hall-panel #characterPanel .player-head{display:flex!important;gap:10px!important;padding:0 0 12px!important;margin:0!important;min-height:0!important;border-bottom:1px solid #444343!important}
html body .layout>.hall-panel #characterPanel .player-head>.class-portrait{width:38px!important;height:38px!important;flex:none}
html body .layout>.hall-panel #characterPanel .name{font:600 16px/1.2 system-ui,sans-serif!important;color:#edd09c!important}
html body .layout>.hall-panel #characterPanel .player-caption{font:10px/1.4 system-ui,sans-serif!important;color:#a6acb2}
html body .layout>.hall-panel #characterPanel .location-status{margin:8px 0;padding:7px;font:10px/1.35 system-ui,sans-serif;display:block}
html body .layout>.hall-panel #characterPanel .location-status small{display:block}
html body .layout>.hall-panel #characterPanel .journey-presence{font-size:10px}
html body .layout>.hall-panel #characterPanel .paper-doll{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(70px,.9fr) minmax(0,1fr)!important;gap:4px!important;min-height:350px!important}
html body .layout>.hall-panel #characterPanel .gear-column{gap:5px!important}
html body .layout>.hall-panel #characterPanel .gear-slot{height:44px!important;flex:0 0 44px!important}
html body .layout>.hall-panel #characterPanel .gear-slot-item,html body .layout>.hall-panel #characterPanel .gear-slot-empty{grid-template-columns:22px minmax(0,1fr)!important;column-gap:3px!important;padding:3px!important}
html body .layout>.hall-panel #characterPanel .gear-slot-item b,html body .layout>.hall-panel #characterPanel .gear-slot-empty b{font:9px/1.2 system-ui,sans-serif!important;white-space:normal!important}
html body .layout>.hall-panel #characterPanel .gear-slot .gear-label{font-size:8px!important}
html body .layout>.hall-panel #characterPanel .gear-slot img,html body .layout>.hall-panel #characterPanel .gear-slot .gear-glyph{width:20px!important;height:20px!important}
html body .layout>.hall-panel #characterPanel .gear-bottom{display:flex!important;justify-content:center;gap:4px!important;margin-top:8px!important;flex:none!important}
html body .layout>.hall-panel #characterPanel .gear-bottom .gear-slot{width:38px!important;height:38px!important;max-height:38px!important;flex:none!important}
html body .layout>.hall-panel #characterPanel .doll-stage{height:100%!important;min-height:0!important}
html body .layout>.hall-panel #characterPanel #character-professions{display:block!important;padding:8px 0!important;overflow:visible!important;background:none!important;border:0!important}
html body .layout>.hall-panel #characterPanel #character-gear[hidden],html body .layout>.hall-panel #characterPanel #character-professions[hidden]{display:none!important}
html body .layout>.main .map-viewport{height:100%!important;min-height:0!important;background:#101820!important}
html body #zoneShapes,html body #zonePins{display:none!important;pointer-events:none!important}
@media(max-width:700px){
 html body .layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,56fr) minmax(0,44fr)!important;padding:6px!important;gap:6px}
 html body .layout>.hall-panel{grid-column:1;grid-row:1}
 html body .layout>.main{grid-column:1;grid-row:2}
 html body .layout>.hall-panel .hall-heading{padding:10px 12px!important}
 html body .layout>.hall-panel .hall-heading h2{font-size:22px!important;margin:0 0 2px!important}
 html body .layout>.hall-panel .hall-heading p{margin:0 0 7px!important;font-size:10px!important}
 #openRoster.hero-picker-trigger{min-height:38px}
 html body .layout>.hall-panel .hall-summary{margin:0 12px!important;padding:5px 0!important}
 html body .layout>.hall-panel .hall-feed{padding:0 12px 8px!important}
 .hero-options{max-height:28dvh}
}
.journey-profession .journey-icon-fallback{background-image:url('assets/ui/profession-atlas-v1.png');background-size:400% 300%;font-size:0}
.journey-icon-fallback[data-icon=trade_alchemy]{background-position:0% 0%}
.journey-icon-fallback[data-icon=trade_blacksmithing]{background-position:33.333% 0%}
.journey-icon-fallback[data-icon=trade_engraving]{background-position:66.667% 0%}
.journey-icon-fallback[data-icon=trade_engineering]{background-position:100% 0%}
.journey-icon-fallback[data-icon=trade_herbalism]{background-position:0% 50%}
.journey-icon-fallback[data-icon=trade_leatherworking]{background-position:33.333% 50%}
.journey-icon-fallback[data-icon=trade_mining]{background-position:66.667% 50%}
.journey-icon-fallback[data-icon=inv_misc_pelt_wolf_01]{background-position:100% 50%}
.journey-icon-fallback[data-icon=trade_tailoring]{background-position:0% 100%}
.journey-icon-fallback[data-icon=inv_misc_food_15]{background-position:33.333% 100%}
.journey-icon-fallback[data-icon=spell_holy_sealofsacrifice]{background-position:66.667% 100%}
.journey-icon-fallback[data-icon=trade_fishing]{background-position:100% 100%}
.journey-profession .journey-icon-fallback[data-icon=inv_misc_questionmark]{background-image:none;font-size:20px}

/* The open picker must cover the information beneath it, including selected rows. */
html body .layout>.hall-panel #heroOptions{
 background:#141b25!important;opacity:1!important;backdrop-filter:none!important;
 isolation:isolate;z-index:1000;
}
html body .layout>.hall-panel #heroOptions [role=option]{background:#141b25!important;opacity:1!important}
html body .layout>.hall-panel #heroOptions [aria-selected=true]{background:#353025!important}
html body .layout>.hall-panel #heroOptions .is-focused,html body .layout>.hall-panel #heroOptions [role=option]:hover{background:#344052!important}
/* Reported skills in small rows; no decorative card space or empty categories. */
html body .layout>.hall-panel #characterPanel #character-professions{padding:8px 0!important;margin:0!important}
html body .layout>.hall-panel #character-professions .profession-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
html body .layout>.hall-panel #character-professions .profession-card{
 display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;align-items:center!important;
 min-height:42px!important;height:auto!important;gap:9px!important;margin:0!important;padding:6px 8px!important;box-sizing:border-box;width:100%;min-width:0;
 border:0!important;border-bottom:1px solid #373c42!important;background:none!important;box-shadow:none!important;
}
html body .layout>.hall-panel #characterPanel #character-professions .profession-art{width:28px!important;height:28px!important;border:1px solid #8c7348;box-shadow:none}
html body .layout>.hall-panel #character-professions .profession-art img[hidden]{display:none!important}
html body .layout>.hall-panel #character-professions .profession-card-copy{min-width:0}
html body .layout>.hall-panel #characterPanel #character-professions .profession-card h4{font:600 12px/1.3 system-ui,sans-serif!important;margin:0!important}
html body .layout>.hall-panel #character-professions .profession-skill{white-space:nowrap;font:11px/1.3 system-ui,sans-serif}
html body .layout>.hall-panel #character-professions .profession-skill strong{font:600 13px/1.3 system-ui,sans-serif}
html body .layout>.hall-panel #character-professions .profession-meter{position:static;inset:auto;width:100%;height:3px;margin-top:4px;border:0;box-shadow:none}
html body .layout>.hall-panel #character-professions .profession-empty{margin:0;padding:8px 0;font:12px/1.4 system-ui,sans-serif}
/* Two fitted map views; no zoom controls or gestures. */
.map-mode-control{display:flex;gap:0;margin-top:10px;border:1px solid #927447;border-radius:3px;overflow:hidden}
.map-mode-control[hidden],.trail-note[hidden]{display:none!important}
.map-mode-control button{flex:1;min-width:0;min-height:36px;padding:7px 8px;color:#c7bdac;border:0;background:#141a22;font:600 12px/1.3 system-ui,sans-serif}
.map-mode-control button+button{border-left:1px solid #927447}
.map-mode-control button[aria-pressed=true]{color:#ffe4a0;background:linear-gradient(#66502b,#352d20);box-shadow:inset 0 0 0 1px #d0a65466}
.map-mode-control button:disabled{opacity:.45;cursor:default}
html body .layout>.hall-panel .hall-heading .trail-note{margin:7px 0 0!important;color:#949eab!important;font:10px/1.35 system-ui,sans-serif!important}
html body #viewport #paths{display:block!important;pointer-events:none!important;z-index:1}
html body .layout>.main .map-viewport{touch-action:auto;cursor:default}
html body .layout>.hall-panel .hall-heading .trail-note[hidden]{display:none!important}
/* Report activity is visible in the default Journey view, separately from position age. */
#heroSelected{flex:1}
.hero-presence{flex:none;font:600 9px/1.25 system-ui,sans-serif;white-space:nowrap;color:#a9b0b8}
.hero-presence::before{content:'●';margin-right:4px}
.hero-option-presence{margin-left:auto;flex:none;font-size:10px;color:#818b98}
.hero-presence[data-state=reporting],.hero-option-presence[data-state=reporting],.hero-report-status[data-state=reporting]{color:#83c69b}
.hero-presence[data-state=connected]{color:#9bb9ae}
.hero-presence[data-state=unavailable],.hero-option-presence[data-state=unavailable],.hero-report-status[data-state=unavailable]{color:#e0b96e}
.marker .marker-presence{position:absolute;right:0;top:0;width:10px;height:10px;border:2px solid #101820;border-radius:50%;background:#818b98;z-index:5}
.marker .marker-presence[data-state=reporting]{background:#83c69b;box-shadow:0 0 6px #83c69b77}
.marker .marker-presence[data-state=unavailable]{background:#e0b96e}
#heroPresence[hidden]{display:none!important}
.zone-visit-list{display:flex;flex-wrap:wrap;gap:5px 8px;margin:6px 0 0;padding:0;list-style:none;font:10px/1.35 system-ui,sans-serif;color:#b6b9bc}
.zone-visit-list li{display:flex;align-items:center;gap:4px}
.zone-visit-list li:not(:last-child)::after{content:'→';color:#c6a361;margin-left:3px}
.zone-visit-list b{display:grid;place-items:center;width:14px;height:14px;border:1px solid #806a43;border-radius:50%;font-size:9px;color:#dfbf84}
#zoneVisitList[hidden]{display:none!important}
/* Keep the exact world position as a small pin; lift the portrait off nearby zone arrows. */
html body #viewport:not(.zone-map-mode) .marker.active{width:12px!important;height:12px!important}
html body #viewport:not(.zone-map-mode) .marker.active::after{background:#e8ca82}
html body #viewport:not(.zone-map-mode) .marker.active::before{content:'';position:absolute;left:50%;bottom:100%;width:1px;height:12px;background:#d9bb7c;pointer-events:none}
html body #viewport:not(.zone-map-mode) .marker.active .class-portrait{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);width:24px!important;height:24px!important;border-width:2px!important}
html body #viewport:not(.zone-map-mode) .marker.active .portrait-level{display:none!important}
html body #viewport:not(.zone-map-mode) .marker.active .portrait-fallback{font-size:13px}
html body #viewport:not(.zone-map-mode) .marker.active .marker-name{top:auto!important;bottom:calc(100% + 40px);transform:translateX(-50%)!important;padding:2px 4px;font-size:9px}
html body #viewport:not(.zone-map-mode) .marker.active .marker-presence{top:-38px;right:-9px}

/* Compact grouped professions with a reserved value column inside the row. */
html body .layout>.hall-panel #character-professions .profession-group{min-width:0;margin:0 0 10px}
html body .layout>.hall-panel #characterPanel #character-professions .profession-group-title{
 height:auto!important;min-height:0!important;margin:0 0 2px!important;padding:5px 8px!important;
 border:0!important;border-bottom:1px solid #716044!important;border-image:none!important;
 background:none!important;box-shadow:none!important;text-shadow:none!important;
 font-size:12px!important;font-weight:700!important;line-height:1.4!important;letter-spacing:.3px!important;color:#d4b77b!important;
}
html body .layout>.hall-panel #character-professions .profession-card-heading{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:8px;align-items:baseline;min-width:0}
html body .layout>.hall-panel #character-professions .profession-skill{text-align:right;font-variant-numeric:tabular-nums}
html body #heroView{color-scheme:dark}
html body #heroView option{background:#141b25;color:#edd4a1}
html body #heroView option:checked{background:#353025;color:#ffe4a0}
@supports (appearance:base-select){
 html body #heroView,html body #heroView::picker(select){appearance:base-select}
 html body #heroView::picker(select){
  background:#141b25;color:#edd4a1;border:1px solid #977b4a;border-radius:3px;
  box-shadow:0 8px 22px #0009;padding:4px;font:inherit;
 }
 html body #heroView{position:relative;padding-right:30px!important}
 html body #heroView::picker-icon{position:absolute;right:11px;top:50%;transform:translateY(-50%)}
 html body #heroView option{padding:8px 10px;border-radius:2px}
 html body #heroView option:checked,html body #heroView option:hover,html body #heroView option:focus{background:#353025;color:#ffe4a0}
 html body #heroView option::checkmark,html body #heroView::picker-icon{color:#e6c98c}
}

.hero-gold{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0 0;padding:5px 9px;border:1px solid #635434;border-radius:3px;background:#111820;font-size:12px}
.hero-gold[hidden]{display:none}.wallet-label{color:#bca77c}.wallet-coins{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;font-variant-numeric:tabular-nums}.wallet-coins>span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.wallet-coins img{display:block;width:13px;height:13px;object-fit:contain;flex:none}.coin-gold{color:#f2cb67}.coin-silver{color:#d0d9df}.coin-copper{color:#d49b76}.wallet-unknown{font-size:11px;color:#99a3aa}

.player-guide-link{position:absolute;right:16px;top:19px;font-size:11px;color:#edc678;text-decoration:underline;text-underline-offset:3px}
.player-guide-link:focus-visible{outline:2px solid #edc678;outline-offset:3px}

/* Compact map portraits; preserve their measured anchor and readable status ring. */
html body #viewport .marker{width:36px!important;height:36px!important}
html body #viewport .marker .class-portrait{width:30px!important;height:30px!important;border-width:2px!important}
html body #viewport .marker .portrait-level{min-width:17px;height:17px;right:-4px;bottom:-5px;padding:0 3px;font-size:9px}
html body #viewport .marker .marker-name{font-size:9px!important;padding:2px 4px!important}
html body #viewport .marker .portrait-fallback{font-size:15px}
html body #viewport:not(.zone-map-mode) .marker.active{width:10px!important;height:10px!important}
html body #viewport:not(.zone-map-mode) .marker.active .class-portrait{width:20px!important;height:20px!important}
html body #viewport .marker::before{pointer-events:none}
@media(max-width:700px){
 html body .layout{grid-template-rows:minmax(0,1fr)!important}
 html body .layout>.hall-panel{grid-row:1;grid-column:1}
 html body .layout:not([data-mobile-view=map])>.main{display:none!important}
 html body .layout[data-mobile-view=map]{grid-template-rows:auto minmax(0,1fr)!important}
 html body .layout[data-mobile-view=map]>.hall-panel{height:auto!important;overflow:visible!important;z-index:40}
 html body .layout[data-mobile-view=map]>.hall-panel #characterPanel{display:none!important}
 html body .layout[data-mobile-view=map]>.main{grid-row:2;display:block!important}
 html body .layout:not([data-mobile-view=map]) #mapModeControl,
 html body .layout:not([data-mobile-view=map]) #trailNote,
 html body .layout:not([data-mobile-view=map]) #zoneVisitList{display:none!important}
}

@media(max-width:700px){
 html body .layout[data-mobile-view=equipment] #characterPanel .player-head,
 html body .layout[data-mobile-view=equipment] #characterPanel .location-status{display:none!important}
}

/* Bottom equipment sockets own the frame; every art provider shares one centered cell. */
html body .layout>.hall-panel #characterPanel .gear-bottom .gear-slot{
 position:relative;background:url('assets/ui/forge-gear-socket.png') center/100% 100% no-repeat!important;
}
html body .layout>.hall-panel #characterPanel .gear-bottom .gear-slot-item,
html body .layout>.hall-panel #characterPanel .gear-bottom .gear-slot-empty{
 display:grid!important;width:100%;height:100%;grid-template-columns:minmax(0,1fr)!important;
 grid-template-rows:minmax(0,1fr)!important;gap:0!important;padding:0!important;place-items:center;
 background:transparent!important;
}
html body .layout>.hall-panel #characterPanel .gear-bottom .gear-label,
html body .layout>.hall-panel #characterPanel .gear-bottom b{display:none!important}
html body .layout>.hall-panel #characterPanel .gear-bottom .gear-slot-item>.iconsmall,
html body .layout>.hall-panel #characterPanel .gear-bottom .gear-slot-item>img.gear-wow-icon,
html body .layout>.hall-panel #characterPanel .gear-bottom .gear-glyph{
 grid-area:1 / 1!important;justify-self:center!important;align-self:center!important;
 width:22px!important;height:22px!important;margin:0!important;padding:0!important;border:0!important;
}
html body .layout>.hall-panel #characterPanel .gear-bottom .gear-slot-item>.iconsmall,
html body .layout>.hall-panel #characterPanel .gear-bottom .gear-slot-item>img.gear-wow-icon{background:none!important}
html body .layout>.hall-panel #characterPanel .gear-bottom .iconsmall ins{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 margin:0!important;padding:0!important;background-size:cover!important;
}
html body .layout>.hall-panel #characterPanel .gear-bottom .gear-slot-item:has(>img.gear-wow-icon)>.iconsmall{display:none!important}

/* On phones the portrait itself marks the coordinate, including selected world markers. */
@media(max-width:700px){
 html body #viewport .marker.has-collision{transform:translate(-50%,-50%) scale(var(--marker-scale,1))!important}
 html body #viewport .marker.has-collision::before{content:none!important}
 html body #viewport:not(.zone-map-mode) .marker.active{width:36px!important;height:36px!important}
 html body #viewport:not(.zone-map-mode) .marker.active .class-portrait{
  position:relative;left:auto;bottom:auto;transform:none;width:30px!important;height:30px!important;
 }
 html body #viewport:not(.zone-map-mode) .marker.active::before{content:none!important}
 html body #viewport:not(.zone-map-mode) .marker.active::after{background:transparent}
 html body #viewport:not(.zone-map-mode) .marker.active .marker-name{top:calc(100% + 4px)!important;bottom:auto!important}
 html body #viewport:not(.zone-map-mode) .marker.active .marker-presence{top:0;right:0}
}