/* Tree Gaming Live Map — apocalypse visual layer v20
   Built on the original Live Map. Existing functional handlers/layout are untouched. */

:root{
  --ap-gold:#d8aa3d;
  --ap-red:#9b271e;
  --ap-bg:url("https://assets.treegaming.win/tree-live-map-apocalypse-bg.webp");
}

/* --------------------------------------------------------------------------
   TOP BARS — CSS-only animation, no image/sign assets.
   -------------------------------------------------------------------------- */
#topNavBar{position:relative;isolation:isolate;overflow:visible;z-index:10;}
#serverStatsBar{position:relative;isolation:isolate;overflow:hidden;z-index:5;}
#topNavBar{
  min-height:72px;
  background:
    radial-gradient(circle at 50% -85%,rgba(214,91,48,.38),transparent 62%),
    linear-gradient(90deg,#2a1712 0%,#4a281c 24%,#5a3020 50%,#4a281c 76%,#2a1712 100%) !important;
  box-shadow:inset 0 1px 0 rgba(244,193,95,.22),inset 0 -2px 0 rgba(216,170,61,.48),0 4px 18px rgba(0,0,0,.24);
}
#serverStatsBar{
  min-height:38px;
  background:
    radial-gradient(circle at 50% -120%,rgba(193,77,43,.24),transparent 70%),
    linear-gradient(90deg,#182321 0%,#253531 50%,#182321 100%) !important;
  box-shadow:inset 0 1px 0 rgba(216,170,61,.18),inset 0 -1px 0 rgba(106,157,120,.30);
}
#topNavBar::before,#serverStatsBar::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    linear-gradient(110deg,transparent 0 38%,rgba(151,43,29,.06) 48%,transparent 58%),
    radial-gradient(circle at 20% 50%,rgba(169,44,28,.06),transparent 18%),
    radial-gradient(circle at 80% 50%,rgba(169,44,28,.06),transparent 18%);
}
#topNavBar::after,#serverStatsBar::after{
  content:"";position:absolute;left:-14%;right:-14%;height:1px;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(170,42,29,.05),rgba(232,181,72,.30),rgba(170,42,29,.05),transparent);
  animation:treeTopSweep 8s ease-in-out infinite;
}
#topNavBar::after{top:64%;}
#serverStatsBar::after{top:52%;animation-duration:10s;opacity:.7;}
#topNavBar>* ,#serverStatsBar>*{position:relative;z-index:1;}
#topNavBar .tree-nav-menu-wrap{z-index:10060 !important;}
#topNavBar .tree-nav-menu{z-index:10070 !important;pointer-events:auto !important;}
@keyframes treeTopSweep{0%,100%{transform:translateX(-16%);opacity:.24}50%{transform:translateX(16%);opacity:.78}}

/* --------------------------------------------------------------------------
   MAP BACKGROUND — user-hosted generated image, no JS background renderer.
   -------------------------------------------------------------------------- */
#tab_map{
  position:relative;
  background-color:#030405 !important;
  background-image:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.10)),var(--ap-bg) !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  overflow:hidden;
}
#tab_map::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:40;
  background:radial-gradient(circle at 50% 52%,transparent 36%,rgba(0,0,0,.08) 72%,rgba(0,0,0,.24) 100%);
}
#tab_map .leaflet-container,#tab_map .leaflet-map-pane{position:relative;z-index:200;}
#tab_map .leaflet-control-container{position:relative;z-index:900;}

/* --------------------------------------------------------------------------
   PLAYERS HEADER — apocalypse assets restored without changing geometry.
   -------------------------------------------------------------------------- */
.tree-player-directory-header{position:relative;overflow:hidden;background:linear-gradient(100deg,rgba(7,12,14,.98),rgba(17,29,35,.95) 58%,rgba(7,12,14,.98)) !important;}
.tree-directory-apoc-art{position:absolute;pointer-events:none;user-select:none;object-fit:contain;z-index:0;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));}
.tree-directory-apoc-art--survivor{right:74px;bottom:-10px;width:108px;height:108px;opacity:.30;}
.tree-directory-apoc-art--car{left:18px;bottom:-15px;width:102px;height:76px;opacity:.14;}
.tree-player-directory-header>*:not(.tree-directory-apoc-art){position:relative;z-index:1;}

/* --------------------------------------------------------------------------
   HALL OF FAME / SURVIVOR STATS — previous asset work restored.
   -------------------------------------------------------------------------- */
.tree-leaderboard-hero,.tree-hof-featured-card,.tree-leaderboard-card{
  --ap-hover-x:50%;--ap-hover-y:50%;--ap-tilt-x:0deg;--ap-tilt-y:0deg;--ap-lift:0px;--ap-hover-opacity:0;
  transform:perspective(1100px) rotateX(var(--ap-tilt-x)) rotateY(var(--ap-tilt-y)) translateY(var(--ap-lift));
  will-change:transform,box-shadow;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.tree-leaderboard-hero::after,.tree-hof-featured-card::after,.tree-leaderboard-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:8;
  background:radial-gradient(circle at var(--ap-hover-x) var(--ap-hover-y),rgba(238,197,101,.14),transparent 25%),linear-gradient(120deg,transparent 25%,rgba(255,255,255,.045) 48%,transparent 68%);
  opacity:var(--ap-hover-opacity);transition:opacity .16s ease;
}
.tree-leaderboard-hero{position:relative;overflow:hidden;}
.tree-board-hero-art{position:absolute;right:18px;bottom:-8px;z-index:1;width:145px;height:145px;object-fit:contain;pointer-events:none;opacity:.25;filter:drop-shadow(0 12px 18px rgba(0,0,0,.38));}
.tree-leaderboard-hero>*:not(.tree-board-hero-art){position:relative;z-index:2;}
.tree-record-scene{--ap-px:0px;--ap-py:0px;--ap-pr:0deg;--ap-proximity:0;}
.tree-record-scene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--ap-cursor-x,72%) var(--ap-cursor-y,48%),color-mix(in srgb,var(--scene) 12%,transparent),transparent 22%),linear-gradient(102deg,rgba(2,5,6,.90),rgba(2,5,6,.56) 47%,rgba(2,5,6,.08) 76%,rgba(2,5,6,.42));}
.tree-record-scene>.tree-scene-asset{position:absolute;z-index:6;right:3%;bottom:5px;display:block;width:auto;height:auto;max-width:min(43%,245px);max-height:92%;object-fit:contain;object-position:right bottom;pointer-events:none;user-select:none;transform-origin:62% 88%;transform:translate3d(var(--ap-px),var(--ap-py),0) rotate(var(--ap-pr)) scale(calc(1 + var(--ap-proximity) * .035));filter:drop-shadow(0 15px 20px rgba(0,0,0,.78));opacity:.96;will-change:transform,filter;transition:filter .16s ease,opacity .16s ease;}
.tree-record-scene.is-pointer-near>.tree-scene-asset{filter:drop-shadow(0 17px 23px rgba(0,0,0,.82)) drop-shadow(0 0 13px color-mix(in srgb,var(--scene) 22%,transparent));opacity:1;}
.tree-record-scene>.tree-scene-sign{position:absolute;z-index:5;left:4%;bottom:9%;width:auto;height:auto;max-width:66px;max-height:66px;object-fit:contain;pointer-events:none;opacity:.14;transform:rotate(-7deg) translate3d(calc(var(--ap-px) * -.2),calc(var(--ap-py) * -.2),0);}

.tree-record-scene>.tree-scene-sky,.tree-record-scene>.tree-scene-moon,.tree-record-scene>.tree-scene-ruins,.tree-record-scene>.tree-scene-ground,
.tree-record-scene>.tree-scene-level,.tree-record-scene>.tree-scene-skull,.tree-record-scene>.tree-scene-slashes,.tree-record-scene>.tree-scene-clock,
.tree-record-scene>.tree-scene-bloodmoon,.tree-record-scene>.tree-scene-hands,.tree-record-scene>.tree-scene-graves,.tree-record-scene>.tree-scene-fog,
.tree-record-scene>.tree-scene-blades,.tree-record-scene>.tree-scene-sparks,.tree-record-scene>.tree-scene-medal,.tree-record-scene>.tree-scene-rays,
.tree-record-scene>.tree-scene-scope,.tree-record-scene>.tree-scene-muzzle,.tree-record-scene>.tree-scene-gear,.tree-record-scene>.tree-scene-anvil,
.tree-record-scene>.tree-scene-throne,.tree-record-scene>.tree-scene-lava,.tree-record-scene>.tree-scene-paws,.tree-record-scene>.tree-scene-flames,
.tree-record-scene>.tree-scene-lightning,.tree-record-scene>.tree-scene-shield,.tree-record-scene>.tree-scene-radar{z-index:2;}
.tree-record-scene>.tree-scene-embers{z-index:7;pointer-events:none;}
.tree-record-scene--bloodmoon>.tree-scene-bloodmoon,.tree-record-scene--bloodmoonmvp>.tree-scene-bloodmoon{right:12%;transform:scale(.72);transform-origin:center;opacity:.55;}
.tree-record-scene--bloodmoon>.tree-scene-hands,.tree-record-scene--bloodmoonmvp>.tree-scene-hands{opacity:.42;right:1%;width:38%;}
.tree-record-scene--boss>.tree-scene-throne{opacity:.38;right:8%;transform:scale(.78);transform-origin:bottom right;}
.tree-record-scene--boss>.tree-scene-lava{opacity:.5;}
.tree-record-scene--animal>.tree-scene-paws{opacity:.26;right:5%;transform:scale(.72);transform-origin:center right;}
.tree-record-scene[data-tree-scene="animal"]>.tree-scene-asset{right:7%;bottom:10px;max-width:150px;max-height:76%;}
.tree-record-scene[data-tree-scene="boss"]>.tree-scene-asset{right:2%;max-width:205px;max-height:94%;}
.tree-record-scene[data-tree-scene="bloodmoonmvp"]>.tree-scene-asset,.tree-record-scene[data-tree-scene="bloodmoon"]>.tree-scene-asset{right:2%;max-width:205px;max-height:94%;}
.tree-record-scene[data-tree-scene="playtime"]>.tree-scene-asset,.tree-record-scene[data-tree-scene="achievement"]>.tree-scene-asset,.tree-record-scene[data-tree-scene="weapon"]>.tree-scene-asset,.tree-record-scene[data-tree-scene="craft"]>.tree-scene-asset{max-width:200px;max-height:80%;}
.tree-hof-featured-card.is-apoc-hovered,.tree-leaderboard-card.is-apoc-hovered,.tree-leaderboard-hero.is-apoc-hovered{box-shadow:0 22px 48px rgba(0,0,0,.44),0 0 0 1px color-mix(in srgb,var(--card-accent,#d6a63a) 17%,transparent)!important;}

@media(max-width:1100px){.tree-board-hero-art{width:120px;height:120px;opacity:.20;}.tree-directory-apoc-art--survivor{width:92px;height:92px;}.tree-directory-apoc-art--car{width:84px;height:64px;}}
@media(max-width:860px){.tree-record-scene>.tree-scene-asset{max-width:42%;max-height:84%;}.tree-record-scene>.tree-scene-sign{max-width:48px;max-height:48px;}.tree-directory-apoc-art{display:none;}}
@media(max-width:600px){.tree-board-hero-art{display:none;}}
@media(prefers-reduced-motion:reduce){#topNavBar::after,#serverStatsBar::after{animation:none!important;}.tree-record-scene>.tree-scene-asset,.tree-record-scene>.tree-scene-sign,.tree-leaderboard-hero,.tree-hof-featured-card,.tree-leaderboard-card{transform:none!important;transition:none!important;}}

/* --------------------------------------------------------------------------
   v18 — larger, fully visible top-bar Farmer.
   -------------------------------------------------------------------------- */
#treeFarmerZombieStage{
  position:absolute!important;
  left:0!important;
  top:-18px!important;
  width:158px!important;
  height:126px!important;
  z-index:30!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none!important;
  user-select:none;
  overflow:visible!important;
  transform:translate3d(320px,0,0);
  transition:opacity .12s ease;
  contain:none!important;
}
#treeFarmerZombieStage.is-visible{opacity:1;visibility:visible;}
#treeFarmerZombieStage canvas{
  display:block;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.70)) drop-shadow(0 0 6px rgba(244,190,91,.34));
}

/* Keep navigation usable while the farmer visually crosses it. */
#topNavBar>.navLeft,#topNavBar>.navCenter,#topNavBar>.navRight{position:relative;z-index:20;}
#topNavBar .tree-nav-menu-wrap,#topNavBar .tree-nav-menu{z-index:10070!important;}

@media(max-width:1100px){
  #treeFarmerZombieStage{width:142px!important;height:116px!important;top:-14px!important;}
  
}
@media(max-width:900px){
  #treeFarmerZombieStage{width:118px!important;height:104px!important;top:-10px!important;}
  
}

/* --------------------------------------------------------------------------
   v19 — seamless top-bar Farmer + high-contrast light header.
   -------------------------------------------------------------------------- */
#topNavBar{
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.12) 40%,transparent 41%),
    linear-gradient(90deg,#eee9df 0%,#faf7f0 24%,#f4efe5 50%,#faf7f0 76%,#e8e1d5 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 0 rgba(138,98,35,.45),0 4px 18px rgba(0,0,0,.18)!important;
}
#serverStatsBar{
  background:linear-gradient(90deg,#e2e7e5 0%,#f8faf8 50%,#e2e7e5 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(95,118,110,.38)!important;
}
#topNavBar::before,#serverStatsBar::before{
  background:
    repeating-linear-gradient(0deg,rgba(45,35,25,.025) 0 1px,transparent 1px 5px),
    linear-gradient(110deg,transparent 0 38%,rgba(130,72,43,.035) 48%,transparent 58%)!important;
}
#topNavBar::after,#serverStatsBar::after{opacity:.26!important;}
#liveMapTitle,#topNavBar .navCenter{color:#2c2118!important;text-shadow:0 1px 0 rgba(255,255,255,.7)!important;}
#topNavBar .navRight,#topNavBar .navRight *{color:#32271f;}
#serverStatsBar,#serverStatsBar *{color:#28302d!important;text-shadow:none!important;}
#serverStatsBar .server-offline-state{color:#742f2f!important;background:rgba(255,255,255,.62)!important;border-color:rgba(132,58,58,.42)!important;}

#treeFarmerZombieStage{
  top:-34px!important;
  width:220px!important;
  height:164px!important;
  z-index:35!important;
  overflow:visible!important;
  will-change:transform;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
#treeFarmerZombieStage canvas{
  width:100%!important;
  height:100%!important;
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.50)) drop-shadow(0 0 2px rgba(0,0,0,.24))!important;
}
@media(max-width:1100px){#treeFarmerZombieStage{width:196px!important;height:154px!important;top:-30px!important;}}
@media(max-width:900px){#treeFarmerZombieStage{width:168px!important;height:138px!important;top:-23px!important;}}

/* v20: once loaded, never fade the Farmer during animation/state changes. */
#treeFarmerZombieStage{transition:none!important;}
#treeFarmerZombieStage.is-visible{opacity:1!important;visibility:visible!important;}

/* --------------------------------------------------------------------------
   v21 — weathered apocalypse header.
   Farmer movement logic is intentionally unchanged from v20.
   -------------------------------------------------------------------------- */
#topNavBar{
  min-height:86px!important;
  padding:10px clamp(12px,2vw,26px)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 38%,rgba(25,17,10,.08) 100%),
    repeating-linear-gradient(0deg,rgba(42,34,23,.045) 0 1px,transparent 1px 5px),
    linear-gradient(90deg,#716b5f 0%,#9b9382 24%,#b0a58f 50%,#928a79 76%,#68645b 100%)!important;
  border-top:1px solid rgba(218,166,70,.48)!important;
  border-bottom:2px solid rgba(99,60,23,.78)!important;
  box-shadow:inset 0 1px 0 rgba(255,244,220,.30),inset 0 -8px 18px rgba(54,38,24,.12),0 4px 18px rgba(0,0,0,.30)!important;
}
#topNavBar::before{
  opacity:.42!important;
  background:
    radial-gradient(circle at 14% 36%,rgba(95,57,30,.16) 0 1px,transparent 2px),
    radial-gradient(circle at 78% 62%,rgba(55,52,43,.15) 0 1px,transparent 2px),
    repeating-linear-gradient(108deg,transparent 0 58px,rgba(72,54,35,.055) 59px 60px,transparent 61px 118px)!important;
}
#topNavBar::after{opacity:.34!important;}
#liveMapTitle,#topNavBar .navCenter{
  color:#1f1b16!important;
  text-shadow:0 1px 0 rgba(238,224,194,.45),0 1px 7px rgba(0,0,0,.12)!important;
}
#topNavBar .navRight,#topNavBar .navRight *{color:#211d18!important;}
#liveMapGreeting{color:#2a241d!important;text-shadow:0 1px 0 rgba(239,225,197,.30)!important;}
#steamLoginButton{
  color:#f5e7c7!important;
  background:linear-gradient(180deg,#623d2b 0%,#3c2a21 100%)!important;
  border:1px solid rgba(224,164,71,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,224,174,.18),0 3px 8px rgba(0,0,0,.34)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.65)!important;
}
#steamLoginButton:hover{
  color:#fff4d8!important;
  background:linear-gradient(180deg,#815038 0%,#4b3024 100%)!important;
  border-color:rgba(242,186,91,.92)!important;
}

#serverStatsBar{
  min-height:44px!important;
  background:
    repeating-linear-gradient(0deg,rgba(26,29,26,.045) 0 1px,transparent 1px 5px),
    linear-gradient(90deg,#4c514b 0%,#697067 24%,#777d72 50%,#666c63 76%,#494e49 100%)!important;
  border-bottom:1px solid rgba(201,150,62,.38)!important;
  box-shadow:inset 0 1px 0 rgba(235,225,198,.12),inset 0 -1px 0 rgba(28,27,24,.42)!important;
  color:#f0eadc!important;
}
#serverStatsBar,#serverStatsBar *{color:#f0eadc!important;text-shadow:0 1px 1px rgba(0,0,0,.48)!important;}
#serverStatsBar.offline,#serverStatsBar.online{
  background:
    repeating-linear-gradient(0deg,rgba(26,29,26,.045) 0 1px,transparent 1px 5px),
    linear-gradient(90deg,#4c514b 0%,#697067 24%,#777d72 50%,#666c63 76%,#494e49 100%)!important;
}
#serverStatsBar .server-offline-state{
  color:#ffe0d7!important;
  background:linear-gradient(180deg,rgba(104,38,38,.86),rgba(62,26,28,.90))!important;
  border-color:rgba(222,102,84,.72)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.60)!important;
}

/* Taller canvas area so the Farmer's head/arms remain inside the header. */
#treeFarmerZombieStage{
  top:-2px!important;
  width:220px!important;
  height:176px!important;
}
@media(max-width:1100px){#treeFarmerZombieStage{width:196px!important;height:164px!important;top:0!important;}}
@media(max-width:900px){#treeFarmerZombieStage{width:168px!important;height:146px!important;top:0!important;}}


.tree-player-directory-header{overflow:visible!important;}

/* --------------------------------------------------------------------------
   v22 — restore the preferred v20 dark apocalypse palette.
   Keep Farmer sizing/animation behavior unchanged.
   -------------------------------------------------------------------------- */
#topNavBar{
  background:
    radial-gradient(circle at 50% -85%,rgba(214,91,48,.38),transparent 62%),
    linear-gradient(90deg,#2a1712 0%,#4a281c 24%,#5a3020 50%,#4a281c 76%,#2a1712 100%)!important;
  border-top:1px solid rgba(216,170,61,.34)!important;
  border-bottom:1px solid rgba(216,170,61,.48)!important;
  box-shadow:inset 0 1px 0 rgba(244,193,95,.22),inset 0 -2px 0 rgba(216,170,61,.48),0 4px 18px rgba(0,0,0,.24)!important;
}
#topNavBar::before{
  opacity:1!important;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    linear-gradient(110deg,transparent 0 38%,rgba(151,43,29,.06) 48%,transparent 58%),
    radial-gradient(circle at 20% 50%,rgba(169,44,28,.06),transparent 18%),
    radial-gradient(circle at 80% 50%,rgba(169,44,28,.06),transparent 18%)!important;
}
#topNavBar::after{opacity:1!important;}
#liveMapTitle,#topNavBar .navCenter{
  color:#fff6e8!important;
  text-shadow:0 2px 2px rgba(0,0,0,.72),0 0 8px rgba(216,170,61,.10)!important;
}
#topNavBar .navRight,#topNavBar .navRight *{color:#eee6d8!important;}
#liveMapGreeting{color:#eee6d8!important;text-shadow:0 1px 2px rgba(0,0,0,.72)!important;}
#steamLoginButton{
  color:#fff7e8!important;
  background:linear-gradient(180deg,#1d2b29 0%,#111918 100%)!important;
  border:1px solid rgba(216,170,61,.36)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 3px 8px rgba(0,0,0,.34)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.85)!important;
}
#steamLoginButton:hover{
  color:#fff!important;
  background:linear-gradient(180deg,#29403b 0%,#182522 100%)!important;
  border-color:rgba(216,170,61,.72)!important;
}

#serverStatsBar,
#serverStatsBar.offline,
#serverStatsBar.online{
  background:
    radial-gradient(circle at 50% -120%,rgba(193,77,43,.24),transparent 70%),
    linear-gradient(90deg,#182321 0%,#253531 50%,#182321 100%)!important;
  border-bottom:1px solid rgba(106,157,120,.30)!important;
  box-shadow:inset 0 1px 0 rgba(216,170,61,.18),inset 0 -1px 0 rgba(106,157,120,.30)!important;
  color:#f2e8d6!important;
}
#serverStatsBar,#serverStatsBar *{
  color:#f2e8d6!important;
  text-shadow:0 1px 2px rgba(0,0,0,.72)!important;
}
#serverStatsBar .server-offline-state{
  color:#ffd8d3!important;
  background:rgba(80,28,31,.78)!important;
  border-color:rgba(181,71,67,.62)!important;
}

/* --------------------------------------------------------------------------
   v23 — EXACT original Tree Gaming header palette restored.
   Keep v21/v20 sizing and seamless character motion unchanged.
   -------------------------------------------------------------------------- */
#topNavBar{
  min-height:86px!important;
  padding:10px clamp(12px,2vw,26px)!important;
  background-image:
    linear-gradient(90deg, rgba(5, 8, 9, .97), rgba(18, 19, 17, .88), rgba(5, 8, 9, .97)),
    url("../images/livemap.png")!important;
  background-position:center!important;
  background-size:auto!important;
  border-top:2px solid rgba(217, 170, 73, .72)!important;
  border-bottom:1px solid rgba(217, 170, 73, .26)!important;
  box-shadow:0 8px 30px rgba(0, 0, 0, .58)!important;
}
/* Remove apocalypse overlays from the header itself so its colour is exactly the original theme. */
#topNavBar::before,#topNavBar::after{display:none!important;content:none!important;}
#liveMapTitle,#topNavBar .navCenter{
  color:#f3efe7!important;
  text-shadow:0 2px 18px #000,0 1px 0 #000!important;
}
#topNavBar .navRight,#topNavBar .navRight *,#liveMapGreeting{
  color:#f3efe7!important;
  text-shadow:0 1px 2px #000!important;
}
#steamLoginButton{
  min-height:42px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(217,170,73,.26)!important;
  color:#f3efe7!important;
  background:linear-gradient(180deg,#20282c,#101618)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 5px 16px rgba(0,0,0,.32)!important;
  text-shadow:none!important;
}
#steamLoginButton:hover{
  color:#f3efe7!important;
  border-color:#6db6df!important;
  background:linear-gradient(180deg,#29383f,#151e22)!important;
}
#serverStatsBar{
  min-height:44px!important;
  background:linear-gradient(90deg,#090d0e,#171914,#090d0e)!important;
  border-bottom:1px solid rgba(217,170,73,.26)!important;
  box-shadow:none!important;
  color:#d8d3ca!important;
}
#serverStatsBar::before,#serverStatsBar::after{display:none!important;content:none!important;}
#serverStatsBar.online{
  background:linear-gradient(90deg,#090d0e,#172019,#090d0e)!important;
  border-bottom-color:rgba(98,175,104,.38)!important;
}
#serverStatsBar.offline{
  background:linear-gradient(90deg,#120a0b,#2c1013,#120a0b)!important;
}
#serverStatsBar,#serverStatsBar *{
  color:#d5d0c7!important;
  text-shadow:none!important;
}
#serverStatsBar .server-stat-item strong{color:#f0c765!important;}
#serverStatsBar .server-stat-divider{color:rgba(217,170,73,.32)!important;}

/* --------------------------------------------------------------------------
   v24 — lock header layout against Leaflet drag/zoom stacking/transform state.
   Doctor movement and animation logic are intentionally unchanged.
   -------------------------------------------------------------------------- */
#topNavBar{
  position:relative!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  transform:none!important;
  translate:none!important;
  flex:0 0 auto!important;
  width:100%!important;
  box-sizing:border-box!important;
  z-index:5000!important;
  isolation:isolate!important;
}
#serverStatsBar{
  position:relative!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  transform:none!important;
  translate:none!important;
  flex:0 0 auto!important;
  width:100%!important;
  box-sizing:border-box!important;
  z-index:4900!important;
  isolation:isolate!important;
}
/* Leaflet may transform its panes while panning; keep all map paint below the header. */
#tab_map,
#tab_map .leaflet-container,
#tab_map .leaflet-map-pane,
#tab_map .leaflet-control-container{
  z-index:auto;
}
#tab_map .leaflet-container{position:relative!important;z-index:1!important;}
#tab_map .leaflet-map-pane{z-index:2!important;}
#tab_map .leaflet-control-container{z-index:900!important;}

/* --------------------------------------------------------------------------
   v25 — viewport-height fix.
   The taller zombie header made the old fixed 102px map subtraction too small,
   leaving a few dozen pixels of document overflow. Leaflet wheel/drag activity
   could therefore scroll the whole page upward. Keep the document stationary
   and size the map from the actual rendered nav + stats heights instead.
   -------------------------------------------------------------------------- */
:root{--tree-header-stack-height:130px;}
html,body{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body{
  position:relative!important;
}
#topNavBar,#serverStatsBar{
  flex-shrink:0!important;
}
#tab_map{
  height:calc(100dvh - var(--tree-header-stack-height))!important;
  min-height:0!important;
  max-height:calc(100dvh - var(--tree-header-stack-height))!important;
  overflow:hidden!important;
  overscroll-behavior:contain!important;
}
/* Do not let wheel/touch gestures chain from Leaflet to the document. */
#tab_map .leaflet-container{
  height:100%!important;
  overscroll-behavior:contain!important;
}

/* --------------------------------------------------------------------------
   v26 FINAL — Map Tools positioning + mobile hardening.
   Keep the panel/button clear of the measured header stack on desktop/tablet,
   and use a bottom sheet on narrow screens so it can never collide with nav.
   -------------------------------------------------------------------------- */
#combinedSearchContainer{
  top:calc(var(--tree-header-stack-height, 130px) + 12px)!important;
  left:12px!important;
  max-height:calc(100dvh - var(--tree-header-stack-height, 130px) - 24px)!important;
  box-sizing:border-box!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  z-index:4600!important;
}
#searchToggleBar{
  top:calc(var(--tree-header-stack-height, 130px) + 14px)!important;
  left:12px!important;
  z-index:4550!important;
}

/* Keep Leaflet controls below our UI layers. */
#tab_map .leaflet-control-container{z-index:900!important;}

/* Tablet / phone: Map Tools becomes a true bottom sheet. */
@media screen and (max-width:900px){
  #combinedSearchContainer{
    top:auto!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    max-height:min(76dvh, 720px)!important;
    padding:16px 14px max(18px, env(safe-area-inset-bottom))!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    border-radius:18px 18px 0 0!important;
    transform:translate3d(0, calc(100% + 16px), 0)!important;
    transition:transform .24s ease!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  #combinedSearchContainer.open{
    transform:translate3d(0,0,0)!important;
  }
  #combinedSearchContainer::before{
    content:"";
    display:block;
    width:44px;
    height:4px;
    margin:-5px auto 11px;
    border-radius:999px;
    background:rgba(255,255,255,.24);
  }
  #searchToggleBar{
    top:auto!important;
    left:12px!important;
    bottom:max(18px, env(safe-area-inset-bottom))!important;
    min-width:118px!important;
    max-width:calc(100vw - 24px)!important;
    justify-content:center!important;
    touch-action:manipulation;
  }
  #footerBar{display:none!important;}
  .leaflet-bottom .leaflet-control{margin-bottom:74px!important;}
}

/* Small phones: keep nav/buttons usable and avoid 3D characters covering controls. */
@media screen and (max-width:600px){
  #topNavBar{
    min-height:68px!important;
    padding:8px 10px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  #serverStatsBar{
    min-height:40px!important;
    padding:7px 10px!important;
    font-size:11px!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    scrollbar-width:none;
  }
  #serverStatsBar::-webkit-scrollbar{display:none;}
  #treeFarmerZombieStage{display:none!important;}
  
  #combinedSearchContainer{
    max-height:min(82dvh, 680px)!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  #combinedSearchContainer h2{font-size:19px!important;}
  .sectionHeader{min-height:48px!important;padding:10px!important;}
  .sectionContent input[type="text"],
  .sectionContent button,
  .sectionContent select{min-height:42px;}
}

@media (prefers-reduced-motion:reduce){
  #combinedSearchContainer{transition:none!important;}
}


/* --------------------------------------------------------------------------
   v27 FINAL MOBILE NAV FIX
   game-chat.css makes .navLeft horizontally scrollable on mobile. That creates
   an overflow clipping ancestor around the hamburger dropdown on iOS Safari,
   so the menu toggles but cannot paint outside the nav row. The current mobile
   header has enough room for its visible buttons, so keep overflow visible and
   position the dropdown below the measured top navigation bar.
   -------------------------------------------------------------------------- */
@media screen and (max-width:900px){
  #topNavBar .navLeft{
    overflow:visible!important;
    overflow-x:visible!important;
    overflow-y:visible!important;
    overscroll-behavior:auto!important;
    position:relative!important;
    z-index:10080!important;
  }
  #topNavBar .tree-nav-menu-wrap{
    position:relative!important;
    overflow:visible!important;
    z-index:10100!important;
  }
  #navMenuButton{
    position:relative!important;
    z-index:10110!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent;
  }
  #treeNavMenu.tree-nav-menu{
    position:fixed!important;
    left:max(10px, env(safe-area-inset-left))!important;
    top:calc(var(--tree-top-nav-height, 68px) + 8px)!important;
    width:min(235px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important;
    max-height:calc(100dvh - var(--tree-top-nav-height, 68px) - 20px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    z-index:12000!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain!important;
    pointer-events:auto!important;
  }
  #treeNavMenu.tree-nav-menu.is-open{
    display:grid!important;
  }
  #treeNavMenu.tree-nav-menu button{
    min-height:48px!important;
    touch-action:manipulation!important;
  }
}

@media screen and (max-width:600px){
  #topNavBar .navLeft{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
  }
  #treeNavMenu.tree-nav-menu{
    top:calc(var(--tree-top-nav-height, 68px) + 6px)!important;
  }
}