/* Brown bar. Feel + menu left. Title center. Emergency Numbers + face right. */
.site-bar,
.site-bar.home-banner{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:72px 72px minmax(0,1fr) 260px;
  grid-template-areas:"feel burger how tools";
  align-items:center;
  width:100%;
  height:90px;
  min-height:90px;
  max-height:90px;
  padding:8px 12px;
  background:#5C3A18;
  background-image:none !important;
  border-bottom:3px solid #2A1808;
}
.site-bar.has-work{
  grid-template-columns:72px 72px 72px minmax(0,1fr) 260px;
  grid-template-areas:"work burger how tools";
}
.site-bar .how{display:none !important}
body.home .lfg-map-lead,
.lfg-map-lead{display:none !important}

.site-bar .lfg-mark{
  grid-area:how;
  margin:0;
  padding:0 8px;
  text-align:center;
  color:#F4E8C8;
  font-family:Rye, "Cinzel Decorative", Georgia, serif;
  font-size:clamp(16px, 2.4vw, 34px);
  font-weight:400;
  letter-spacing:.04em;
  line-height:1;
  text-shadow:0 1px 0 #2A1808, 0 2px 8px rgba(20,10,0,.45);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  z-index:4;
}
.site-bar .lfg-mark em{
  font-family:"Great Vibes", "Pinyon Script", cursive;
  font-style:normal;
  font-size:1.15em;
  letter-spacing:0;
  margin:0 .12em;
  color:#F7F1E4;
}

.site-bar .lfg-feel{grid-area:feel;z-index:5}
.site-bar .lfg-burger:not(.lfg-work){grid-area:burger;z-index:5}
.site-bar .lfg-work{grid-area:work;z-index:5}
.site-bar .tools{
  grid-area:tools;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  position:relative;
  z-index:8;
  min-width:240px;
}
.site-bar #lfg-face,
.site-bar .lfg-face{
  display:inline-flex !important;
  visibility:visible !important;
  position:relative !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  z-index:9;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  flex:none;
  border:3px solid #F7F1E4 !important;
  box-shadow:0 0 0 2px #1A1612, 0 4px 10px rgba(10,8,4,.45);
  background:#1A1612;
}
.site-bar .lfg-feel,
.site-bar .lfg-burger{
  position:relative !important;
  z-index:5;
  width:64px;
  height:64px;
  border-radius:14px;
  border:3px solid #F7F1E4;
  color:#F7F1E4;
  background:linear-gradient(#2A241C,#14110E);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    0 0 0 2px #1A1612,
    0 6px 12px rgba(10,8,4,.4);
}
.site-bar .lfg-burger{
  padding:12px 11px !important;
  gap:7px !important;
}
.site-bar .lfg-burger span{
  display:block !important;
  width:100% !important;
  height:3px !important;
  border-radius:2px !important;
  background:#F7F1E4 !important;
  box-shadow:none !important;
}
.site-bar .emerg{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:148px !important;
  min-width:148px !important;
  max-width:148px !important;
  height:64px !important;
  overflow:hidden;
  padding:6px 8px !important;
  border-radius:14px;
  border:3px solid #F7F1E4;
  background:linear-gradient(#8B1E1E,#4A1010) !important;
  color:#F7F1E4 !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  white-space:normal !important;
  text-align:center;
  box-sizing:border-box;
  flex:none;
}
.site-bar .lfg-work{
  font:700 12px/1.1 var(--font-body),system-ui,sans-serif;
  align-items:center;
  justify-content:center;
}

body.home .pane,
body.home #map-desk,
body.home #map-desk .stage,
body.home #map-desk .plate.world,
body.home #farm-gl{
  background-color:#2A2D32 !important;
  background-image:
    repeating-linear-gradient(
      to bottom,
      #32363C 0px,
      #2C3036 20px,
      #23262B 22px,
      #1C1F24 24px
    ) !important;
}
body.home #farm-gl canvas{
  background:#2A2D32 !important;
}

@media (min-width:901px){
  body.home .world-hud{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    top:12px !important;
    transform:translateX(-50%);
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#F4F1E4 !important;
    font:700 20px/1.3 Georgia,serif !important;
    text-shadow:0 1px 0 #1A1612;
    pointer-events:none;
    z-index:4;
  }
}
@media (max-width:900px){
  body.home .site-bar,
  .site-bar{
    position:relative !important;
    inset:auto !important;
    display:grid !important;
    grid-template-columns:52px 52px minmax(0,1fr) 180px !important;
    height:65px !important;
    min-height:65px !important;
    max-height:65px !important;
    padding:6px 8px !important;
    overflow:hidden !important;
    pointer-events:auto !important;
    background:#5C3A18 !important;
  }
  body.home .lfg-feel,
  body.home .lfg-burger,
  body.home .site-bar .emerg,
  body.home #lfg-face{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    pointer-events:auto !important;
  }
  .site-bar .lfg-feel,
  .site-bar .lfg-burger{
    width:44px;
    height:44px;
    max-width:44px;
    border-radius:12px;
  }
  .site-bar .emerg{
    width:110px !important;
    min-width:110px !important;
    max-width:110px !important;
    height:44px !important;
    font-size:11px !important;
  }
  .site-bar .lfg-burger{
    padding:8px 7px !important;
    gap:5px !important;
  }
  .site-bar .lfg-burger span{
    height:3px !important;
    background:#F7F1E4 !important;
  }
  .site-bar #lfg-face{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
  }
  .site-bar .lfg-mark{
    font-size:clamp(11px, 3.6vw, 16px);
    letter-spacing:.02em;
  }
  body.home .lfg-menu{
    top:72px !important;
    bottom:auto !important;
    left:8px !important;
    max-height:min(62dvh, 420px);
  }
}