/* Panda additions + contained clean homepage layout.
   Keeps Vali style, your added text, subtle embers, and removes desktop scrollbar.
*/

/* hide ambience button */
.home-page .enter-overlay.home-ambience-toggle {
  display: none !important;
}

/* full contained desktop page */
@media (min-width: 1000px) and (min-height: 760px) {
  html,
  body.home-page {
    height: 100% !important;
    overflow: hidden !important;
  }
}

body.home-page {
  background: #020402 !important;
}

/* make nav/top bright and above every overlay */
.home-page .empire-nav {
  position: relative !important;
  z-index: 50 !important;
  opacity: 1 !important;
  filter: none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(156,255,73,.08), transparent 48%),
    linear-gradient(180deg, rgba(8,10,8,.94), rgba(7,9,7,.84)) !important;
  border-color: rgba(190,255,145,.24) !important;
  box-shadow:
    0 14px 44px rgba(0,0,0,.42),
    0 0 28px rgba(156,255,73,.09),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.home-page .empire-nav *,
.home-page .empire-brand *,
.home-page .nav-links *,
.home-page .nav-actions * {
  opacity: 1 !important;
  filter: none !important;
}

.home-page .empire-brand strong {
  color: #ffffff !important;
}

.home-page .empire-brand small,
.home-page .nav-link.active,
.home-page .nav-link:hover {
  color: var(--green) !important;
}

.home-page .nav-link {
  color: rgba(244,246,240,.92) !important;
}

.home-page .empire-mark {
  background: radial-gradient(circle at 35% 25%, #d9ff9f, #9cff49 48%, #6ee040) !important;
  box-shadow:
    0 14px 32px rgba(111,224,64,.32),
    0 0 20px rgba(156,255,73,.16),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
}

.home-page .secondary-button {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(210,255,192,.24) !important;
  color: #f4f6f0 !important;
}

.home-page .empire-button.primary,
.home-page .nav-auth-button {
  color: #081107 !important;
  background: linear-gradient(180deg, #baff70 0%, #8af04d 52%, #68d93f 100%) !important;
  box-shadow:
    0 15px 34px rgba(111,224,64,.34),
    0 0 24px rgba(156,255,73,.16),
    inset 0 1px 0 rgba(255,255,255,.44) !important;
}

/* keep whole page tighter and cleaner */
.home-page .page-shell.wide,
.home-page .home-shell {
  min-height: 100vh !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.home-page .home-main-clean {
  min-height: auto !important;
  height: calc(100vh - 104px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.home-page .home-hero-clean {
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}

.home-page .home-hero-content {
  padding-top: clamp(54px, 6vh, 76px) !important;
  padding-bottom: 0 !important;
  transform: none !important;
}

/* stop dark overlays from washing out the top */
.home-page .home-hero-shade {
  opacity: .54 !important;
}

.home-page .home-hero-art {
  opacity: .94 !important;
}

/* hero title closer to Vali's, but not so tall it creates scrollbar */
.home-page .home-hero-content h1,
.home-page .home-hero-clean h1,
.home-page .home-hero h1 {
  font-size: clamp(58px, 6.25vw, 108px) !important;
  line-height: .84 !important;
  margin: 0 !important;
  color: #f7f8f1 !important;
  opacity: 1 !important;
  filter: none !important;
}

.home-page .lead {
  margin-top: 18px !important;
  max-width: 850px !important;
  font-size: clamp(16px, 1.15vw, 21px) !important;
  line-height: 1.34 !important;
  color: rgba(244,246,240,.90) !important;
}

/* your welcome line */
.home-page .panda-home-flare {
  margin-top: 18px !important;
  color: var(--green) !important;
  font-size: clamp(18px, 1.45vw, 27px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow:
    0 0 16px rgba(156,255,73,.38),
    0 0 30px rgba(156,255,73,.14) !important;
}

/* credit lower than welcome, but not so low it pushes cards off screen */
.home-page .panda-home-credit {
  margin-top: 24px !important;
  color: rgba(244,246,240,.90) !important;
  font-size: clamp(11px, .82vw, 14px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow: 0 0 14px rgba(0,0,0,.78) !important;
}

.home-page .panda-home-credit strong {
  color: var(--green) !important;
}

/* cards are now pulled up and sized to fit on one screen */
.home-page .home-ad-dock {
  flex: 0 0 auto !important;
  margin-top: clamp(30px, 4.2vh, 46px) !important;
  gap: 12px !important;
}

.home-page .home-ad-card {
  min-height: 126px !important;
  padding: 16px 18px !important;
  border-radius: 20px !important;
  opacity: 1 !important;
  filter: none !important;
  background:
    radial-gradient(circle at 50% 120%, rgba(156,255,73,.10), transparent 42%),
    linear-gradient(180deg, rgba(10,14,11,.77), rgba(5,7,6,.90)) !important;
  border-color: rgba(159,255,105,.22) !important;
}

.home-page .home-feature-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
}

.home-page .home-ad-card strong {
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.08 !important;
  letter-spacing: .12em !important;
}

.home-page .home-ad-card small {
  margin-top: 8px !important;
  color: rgba(244,246,240,.78) !important;
  font-size: 10.5px !important;
  line-height: 1.28 !important;
}

/* let Skin Vault DNA Chamber fit, but keep it pretty */
.home-page .home-ad-card strong.skin-vault-title {
  display: block !important;
  max-width: 230px !important;
}

/* subtle creepy bottom embers only around card/footer area */
.tbe-green-embers {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  height: 20vh !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
  opacity: .32 !important;
  mix-blend-mode: screen !important;
}

.tbe-green-embers::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -16px;
  height: 72px;
  background: radial-gradient(ellipse at center, rgba(130,255,70,.12), transparent 66%);
  filter: blur(11px);
  opacity: .48;
}

.tbe-green-embers::after {
  content: "";
  position: absolute;
  inset: 0 0 -8px 0;
  background-image:
    radial-gradient(circle, rgba(170,255,110,.55) 0 1px, transparent 2.5px),
    radial-gradient(circle, rgba(110,220,70,.30) 0 1px, transparent 2.2px);
  background-size: 240px 150px, 360px 210px;
  background-position: 10% 104%, 72% 110%;
  filter: drop-shadow(0 0 4px rgba(150,255,90,.22));
  animation: pandaContainedBottomEmbers 13s linear infinite;
}

@keyframes pandaContainedBottomEmbers {
  0%   { transform: translateY(16px); opacity: 0; }
  22%  { opacity: .30; }
  80%  { opacity: .20; }
  100% { transform: translateY(-28px); opacity: 0; }
}

/* keep content above ember layer */
.home-page .page-shell,
.home-page .empire-nav,
.home-page .home-main-clean,
.home-page .home-ad-dock,
.home-page .home-ad-card {
  position: relative !important;
  z-index: 4 !important;
}

/* no bottom footer causing page height/scroll */
.home-page .footer,
.home-page .home-footer {
  display: none !important;
}

/* smaller screens can scroll normally */
@media (max-height: 820px) and (min-width: 1000px) {
  .home-page .home-hero-content {
    padding-top: 38px !important;
  }

  .home-page .home-hero-content h1,
  .home-page .home-hero-clean h1,
  .home-page .home-hero h1 {
    font-size: clamp(52px, 5.7vw, 94px) !important;
  }

  .home-page .lead {
    margin-top: 14px !important;
  }

  .home-page .panda-home-flare {
    margin-top: 14px !important;
  }

  .home-page .panda-home-credit {
    margin-top: 18px !important;
  }

  .home-page .home-ad-dock {
    margin-top: 24px !important;
  }

  .home-page .home-ad-card {
    min-height: 112px !important;
    padding: 14px 16px !important;
  }
}

/* Kicker text above title */
.home-page .home-kicker {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
  color: var(--green) !important;
  opacity: 1 !important;
  filter: none !important;
}

.home-page .home-kicker-line {
  display: block !important;
  width: clamp(80px, 10vw, 150px) !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(156,255,73,.70), transparent) !important;
}

.home-page .home-kicker-icon {
  color: var(--green) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-shadow: 0 0 14px rgba(156,255,73,.45) !important;
}

.home-page .home-kicker-text {
  color: var(--green) !important;
  font-size: clamp(11px, .8vw, 14px) !important;
  font-weight: 950 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 0 12px rgba(156,255,73,.30) !important;
}

/* Title colors: Welcome To The white, Bone Empire green */
.home-page .home-hero-content h1,
.home-page .home-hero-clean h1,
.home-page .home-hero h1 {
  color: #f7f8f1 !important;
}

.home-page .home-hero-content h1 span,
.home-page .home-hero-clean h1 span,
.home-page .home-hero h1 span {
  color: #f7f8f1 !important;
}

.home-page .home-hero-content h1 span:last-child,
.home-page .home-hero-clean h1 span:last-child,
.home-page .home-hero h1 span:last-child {
  color: var(--green) !important;
  text-shadow:
    0 0 22px rgba(156,255,73,.25),
    0 0 46px rgba(156,255,73,.12) !important;
}

/* FINAL: turn broken ember layer off */
.home-page .tbe-green-embers,
.tbe-green-embers,
.tbe-green-embers::before,
.tbe-green-embers::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* FINAL: brighten the whole top nav */
.home-page .empire-nav,
.home-page header.empire-nav,
body.home-page .empire-nav {
  position: relative !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  filter: none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(156,255,73,.13), transparent 45%),
    linear-gradient(180deg, rgba(10,14,10,.96), rgba(7,10,7,.88)) !important;
  border: 1px solid rgba(194,255,146,.32) !important;
  box-shadow:
    0 15px 48px rgba(0,0,0,.46),
    0 0 36px rgba(156,255,73,.13),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.home-page .empire-nav *,
.home-page .empire-brand *,
.home-page .nav-links *,
.home-page .nav-actions * {
  opacity: 1 !important;
  filter: none !important;
}

.home-page .empire-brand strong {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255,255,255,.08) !important;
}

.home-page .empire-brand small {
  color: #9cff49 !important;
  text-shadow: 0 0 12px rgba(156,255,73,.22) !important;
}

.home-page .nav-link {
  color: rgba(245,247,241,.94) !important;
}

.home-page .nav-link.active,
.home-page .nav-link:hover {
  color: #9cff49 !important;
  text-shadow: 0 0 12px rgba(156,255,73,.28) !important;
}

.home-page .empire-mark {
  background: radial-gradient(circle at 35% 25%, #e3ffb2, #9cff49 48%, #6fe342) !important;
  box-shadow:
    0 14px 34px rgba(111,224,64,.42),
    0 0 26px rgba(156,255,73,.24),
    inset 0 1px 0 rgba(255,255,255,.52) !important;
}

.home-page .secondary-button {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(210,255,192,.30) !important;
  color: #ffffff !important;
}

.home-page .empire-button.primary,
.home-page .nav-auth-button {
  color: #071006 !important;
  background: linear-gradient(180deg, #c6ff82 0%, #94f451 52%, #70de43 100%) !important;
  box-shadow:
    0 16px 38px rgba(111,224,64,.42),
    0 0 30px rgba(156,255,73,.22),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}

/* FINAL: live player counter visible at bottom */
.home-page .panda-live-server-count {
  position: fixed !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(156,255,73,.36) !important;
  background:
    radial-gradient(circle at 50% 110%, rgba(156,255,73,.18), transparent 58%),
    rgba(3,7,4,.88) !important;
  box-shadow:
    0 0 22px rgba(0,0,0,.72),
    0 0 22px rgba(156,255,73,.13),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  color: rgba(244,246,240,.82) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

.home-page .panda-live-server-count strong {
  color: #9cff49 !important;
  text-shadow: 0 0 12px rgba(156,255,73,.42) !important;
}

/* Panda flare polish: subtle, creepy, contained */

/* faint skull watermark behind the hero title */
.home-page .home-hero-content {
  position: relative !important;
  isolation: isolate !important;
}

.home-page .home-hero-content::before {
  content: "☠";
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) rotate(-6deg);
  z-index: -1;
  font-size: clamp(150px, 18vw, 330px);
  line-height: 1;
  color: rgba(156,255,73,.035);
  text-shadow:
    0 0 34px rgba(156,255,73,.10),
    0 0 80px rgba(156,255,73,.055);
  pointer-events: none;
}

/* tiny haunted pulse on the skulls beside the community line */
.home-page .home-kicker-icon {
  animation: pandaSkullPulse 4.8s ease-in-out infinite;
}

@keyframes pandaSkullPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: .82;
  }
  50% {
    transform: translateY(-1px) scale(1.08);
    opacity: 1;
  }
}

/* make cards feel more alive, without moving the layout */
.home-page .home-ad-card {
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease !important;
}

.home-page .home-ad-card:hover {
  transform: translateY(-3px);
  border-color: rgba(156,255,73,.38) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.42),
    0 0 26px rgba(156,255,73,.10),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* stronger little chamber icons */
.home-page .home-feature-icon {
  box-shadow:
    0 0 16px rgba(156,255,73,.16),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* bottom counter gets a tiny Bone Empire glow */
.home-page .panda-live-server-count {
  border-color: rgba(156,255,73,.42) !important;
  background:
    radial-gradient(circle at 50% 120%, rgba(156,255,73,.20), transparent 60%),
    linear-gradient(180deg, rgba(7,12,7,.92), rgba(2,5,3,.90)) !important;
  box-shadow:
    0 0 22px rgba(0,0,0,.75),
    0 0 24px rgba(156,255,73,.16),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* make the renamed skin card fit cleanly */
.home-page .home-ad-card strong.skin-vault-title {
  max-width: 220px !important;
}

/* Final homepage direction: top nav handles buttons, hero becomes the focus */
.home-page .home-ad-dock,
.home-page .home-server-overview {
  display: none !important;
}

/* center the hero now that lower cards are gone */
.home-page .home-main-clean {
  height: calc(100vh - 112px) !important;
  min-height: calc(100vh - 112px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-bottom: 54px !important;
}

.home-page .home-hero-clean {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
}

.home-page .home-hero-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: translateY(-10px) !important;
}

/* keep the title strong but balanced without the cards */
.home-page .home-hero-content h1,
.home-page .home-hero-clean h1,
.home-page .home-hero h1 {
  font-size: clamp(64px, 7vw, 122px) !important;
  line-height: .84 !important;
}

.home-page .lead {
  margin-top: 20px !important;
}

.home-page .panda-home-flare {
  margin-top: 22px !important;
}

.home-page .panda-home-credit {
  margin-top: 24px !important;
}

/* live counter stays as the footer-style detail */
.home-page .panda-live-server-count {
  bottom: 18px !important;
}

/* no desktop scrollbar */
@media (min-width: 1000px) {
  html,
  body.home-page {
    overflow: hidden !important;
  }
}

/* Final hero balance after removing bottom cards */
.home-page .home-main-clean {
  padding-bottom: 0 !important;
}

.home-page .home-hero-content {
  transform: translateY(42px) !important;
}

/* keep the live counter tucked at the bottom */
.home-page .panda-live-server-count {
  bottom: 18px !important;
}

/* on shorter screens, move it down less so it never feels cramped */
@media (max-height: 820px) and (min-width: 1000px) {
  .home-page .home-hero-content {
    transform: translateY(24px) !important;
  }
}

@media (max-height: 740px) and (min-width: 1000px) {
  .home-page .home-hero-content {
    transform: translateY(8px) !important;
  }
}

/* Panda flare option 2: subtle creepy bone dust, not embers */
.home-page .panda-bone-dust {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  height: 48vh !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 2 !important;
  opacity: .55 !important;
  mix-blend-mode: screen !important;
}

.home-page .panda-bone-dust span {
  position: absolute !important;
  left: 50%;
  bottom: -18px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(156,255,73,.48);
  box-shadow:
    0 0 7px rgba(156,255,73,.34),
    0 0 15px rgba(156,255,73,.12);
  opacity: 0;
  animation: pandaBoneDustRise 14s linear infinite;
}

/* hand-placed so it feels natural, not like a repeating wallpaper */
.home-page .panda-bone-dust span:nth-child(1)  { left: 11%; animation-delay: -1s;  animation-duration: 15s; transform: scale(.75); }
.home-page .panda-bone-dust span:nth-child(2)  { left: 18%; animation-delay: -8s;  animation-duration: 18s; transform: scale(.55); }
.home-page .panda-bone-dust span:nth-child(3)  { left: 25%; animation-delay: -4s;  animation-duration: 16s; transform: scale(.9); }
.home-page .panda-bone-dust span:nth-child(4)  { left: 33%; animation-delay: -10s; animation-duration: 19s; transform: scale(.5); }
.home-page .panda-bone-dust span:nth-child(5)  { left: 41%; animation-delay: -3s;  animation-duration: 17s; transform: scale(.8); }
.home-page .panda-bone-dust span:nth-child(6)  { left: 48%; animation-delay: -11s; animation-duration: 20s; transform: scale(.45); }
.home-page .panda-bone-dust span:nth-child(7)  { left: 56%; animation-delay: -6s;  animation-duration: 16s; transform: scale(.7); }
.home-page .panda-bone-dust span:nth-child(8)  { left: 63%; animation-delay: -13s; animation-duration: 21s; transform: scale(.52); }
.home-page .panda-bone-dust span:nth-child(9)  { left: 70%; animation-delay: -2s;  animation-duration: 18s; transform: scale(.86); }
.home-page .panda-bone-dust span:nth-child(10) { left: 78%; animation-delay: -9s;  animation-duration: 20s; transform: scale(.5); }
.home-page .panda-bone-dust span:nth-child(11) { left: 86%; animation-delay: -5s;  animation-duration: 17s; transform: scale(.72); }
.home-page .panda-bone-dust span:nth-child(12) { left: 92%; animation-delay: -12s; animation-duration: 22s; transform: scale(.45); }
.home-page .panda-bone-dust span:nth-child(13) { left: 15%; animation-delay: -15s; animation-duration: 23s; transform: scale(.38); }
.home-page .panda-bone-dust span:nth-child(14) { left: 38%; animation-delay: -17s; animation-duration: 24s; transform: scale(.42); }
.home-page .panda-bone-dust span:nth-child(15) { left: 52%; animation-delay: -14s; animation-duration: 22s; transform: scale(.36); }
.home-page .panda-bone-dust span:nth-child(16) { left: 67%; animation-delay: -16s; animation-duration: 25s; transform: scale(.44); }
.home-page .panda-bone-dust span:nth-child(17) { left: 83%; animation-delay: -18s; animation-duration: 24s; transform: scale(.34); }
.home-page .panda-bone-dust span:nth-child(18) { left: 96%; animation-delay: -7s;  animation-duration: 19s; transform: scale(.48); }

@keyframes pandaBoneDustRise {
  0% {
    translate: 0 0;
    opacity: 0;
  }
  15% {
    opacity: .36;
  }
  55% {
    opacity: .22;
  }
  100% {
    translate: 22px -260px;
    opacity: 0;
  }
}

/* a few dust motes look like tiny bone sparks */
.home-page .panda-bone-dust span:nth-child(5n) {
  width: 5px;
  height: 1.5px;
  border-radius: 999px;
  rotate: -18deg;
  opacity: 0;
}

/* keep actual content over the dust */
.home-page .page-shell,
.home-page .empire-nav,
.home-page .home-main-clean,
.home-page .panda-live-server-count {
  position: relative !important;
  z-index: 4 !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .panda-bone-dust span {
    animation: none !important;
    opacity: .12 !important;
  }
}

/* FINAL visible Panda bone dust pass */
.home-page .panda-bone-dust {
  display: block !important;
  visibility: visible !important;
  position: fixed !important;
  inset: auto 0 0 0 !important;
  height: 62vh !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 3 !important;
  opacity: 1 !important;
  mix-blend-mode: screen !important;
}

.home-page .panda-bone-dust span {
  display: block !important;
  position: absolute !important;
  bottom: -22px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(156,255,73,.82) !important;
  box-shadow:
    0 0 8px rgba(156,255,73,.70),
    0 0 18px rgba(156,255,73,.28) !important;
  opacity: 0;
  animation-name: pandaVisibleDustRise !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

/* tiny bone shard shapes */
.home-page .panda-bone-dust span:nth-child(5n) {
  width: 8px !important;
  height: 2px !important;
  border-radius: 999px !important;
  rotate: -18deg;
  background: rgba(190,255,145,.72) !important;
}

/* hand scattered positions */
.home-page .panda-bone-dust span:nth-child(1)  { left: 7%;  animation-delay: -1s !important;  animation-duration: 14s !important; transform: scale(.55); }
.home-page .panda-bone-dust span:nth-child(2)  { left: 12%; animation-delay: -7s !important;  animation-duration: 18s !important; transform: scale(.45); }
.home-page .panda-bone-dust span:nth-child(3)  { left: 16%; animation-delay: -4s !important;  animation-duration: 16s !important; transform: scale(.7); }
.home-page .panda-bone-dust span:nth-child(4)  { left: 21%; animation-delay: -10s !important; animation-duration: 20s !important; transform: scale(.42); }
.home-page .panda-bone-dust span:nth-child(5)  { left: 25%; animation-delay: -2s !important;  animation-duration: 17s !important; transform: scale(.8); }
.home-page .panda-bone-dust span:nth-child(6)  { left: 31%; animation-delay: -12s !important; animation-duration: 19s !important; transform: scale(.42); }
.home-page .panda-bone-dust span:nth-child(7)  { left: 35%; animation-delay: -5s !important;  animation-duration: 15s !important; transform: scale(.62); }
.home-page .panda-bone-dust span:nth-child(8)  { left: 39%; animation-delay: -13s !important; animation-duration: 22s !important; transform: scale(.38); }
.home-page .panda-bone-dust span:nth-child(9)  { left: 44%; animation-delay: -3s !important;  animation-duration: 18s !important; transform: scale(.75); }
.home-page .panda-bone-dust span:nth-child(10) { left: 48%; animation-delay: -9s !important;  animation-duration: 20s !important; transform: scale(.5); }
.home-page .panda-bone-dust span:nth-child(11) { left: 52%; animation-delay: -6s !important;  animation-duration: 16s !important; transform: scale(.64); }
.home-page .panda-bone-dust span:nth-child(12) { left: 56%; animation-delay: -14s !important; animation-duration: 23s !important; transform: scale(.4); }
.home-page .panda-bone-dust span:nth-child(13) { left: 61%; animation-delay: -4s !important;  animation-duration: 17s !important; transform: scale(.72); }
.home-page .panda-bone-dust span:nth-child(14) { left: 65%; animation-delay: -11s !important; animation-duration: 21s !important; transform: scale(.44); }
.home-page .panda-bone-dust span:nth-child(15) { left: 69%; animation-delay: -1s !important;  animation-duration: 19s !important; transform: scale(.8); }
.home-page .panda-bone-dust span:nth-child(16) { left: 73%; animation-delay: -8s !important;  animation-duration: 18s !important; transform: scale(.5); }
.home-page .panda-bone-dust span:nth-child(17) { left: 78%; animation-delay: -15s !important; animation-duration: 24s !important; transform: scale(.4); }
.home-page .panda-bone-dust span:nth-child(18) { left: 84%; animation-delay: -5s !important;  animation-duration: 16s !important; transform: scale(.65); }
.home-page .panda-bone-dust span:nth-child(19) { left: 89%; animation-delay: -12s !important; animation-duration: 22s !important; transform: scale(.42); }
.home-page .panda-bone-dust span:nth-child(20) { left: 94%; animation-delay: -6s !important;  animation-duration: 20s !important; transform: scale(.52); }

.home-page .panda-bone-dust span:nth-child(n+21) {
  bottom: 8vh !important;
  background: rgba(156,255,73,.55) !important;
  box-shadow:
    0 0 6px rgba(156,255,73,.45),
    0 0 14px rgba(156,255,73,.18) !important;
}

.home-page .panda-bone-dust span:nth-child(21) { left: 10%; animation-delay: -16s !important; animation-duration: 25s !important; transform: scale(.32); }
.home-page .panda-bone-dust span:nth-child(22) { left: 18%; animation-delay: -21s !important; animation-duration: 27s !important; transform: scale(.38); }
.home-page .panda-bone-dust span:nth-child(23) { left: 28%; animation-delay: -18s !important; animation-duration: 24s !important; transform: scale(.34); }
.home-page .panda-bone-dust span:nth-child(24) { left: 37%; animation-delay: -23s !important; animation-duration: 29s !important; transform: scale(.30); }
.home-page .panda-bone-dust span:nth-child(25) { left: 46%; animation-delay: -17s !important; animation-duration: 26s !important; transform: scale(.36); }
.home-page .panda-bone-dust span:nth-child(26) { left: 55%; animation-delay: -22s !important; animation-duration: 28s !important; transform: scale(.32); }
.home-page .panda-bone-dust span:nth-child(27) { left: 64%; animation-delay: -19s !important; animation-duration: 25s !important; transform: scale(.35); }
.home-page .panda-bone-dust span:nth-child(28) { left: 72%; animation-delay: -24s !important; animation-duration: 30s !important; transform: scale(.30); }
.home-page .panda-bone-dust span:nth-child(29) { left: 81%; animation-delay: -20s !important; animation-duration: 27s !important; transform: scale(.34); }
.home-page .panda-bone-dust span:nth-child(30) { left: 91%; animation-delay: -25s !important; animation-duration: 31s !important; transform: scale(.28); }

.home-page .panda-bone-dust span:nth-child(31) { left: 14%; animation-delay: -6s !important;  animation-duration: 18s !important; transform: scale(.48); }
.home-page .panda-bone-dust span:nth-child(32) { left: 23%; animation-delay: -13s !important; animation-duration: 20s !important; transform: scale(.42); }
.home-page .panda-bone-dust span:nth-child(33) { left: 32%; animation-delay: -9s !important;  animation-duration: 19s !important; transform: scale(.46); }
.home-page .panda-bone-dust span:nth-child(34) { left: 42%; animation-delay: -15s !important; animation-duration: 21s !important; transform: scale(.40); }
.home-page .panda-bone-dust span:nth-child(35) { left: 50%; animation-delay: -7s !important;  animation-duration: 17s !important; transform: scale(.52); }
.home-page .panda-bone-dust span:nth-child(36) { left: 59%; animation-delay: -14s !important; animation-duration: 22s !important; transform: scale(.38); }
.home-page .panda-bone-dust span:nth-child(37) { left: 68%; animation-delay: -8s !important;  animation-duration: 18s !important; transform: scale(.46); }
.home-page .panda-bone-dust span:nth-child(38) { left: 76%; animation-delay: -16s !important; animation-duration: 24s !important; transform: scale(.36); }
.home-page .panda-bone-dust span:nth-child(39) { left: 86%; animation-delay: -10s !important; animation-duration: 20s !important; transform: scale(.44); }
.home-page .panda-bone-dust span:nth-child(40) { left: 96%; animation-delay: -17s !important; animation-duration: 25s !important; transform: scale(.34); }
.home-page .panda-bone-dust span:nth-child(41) { left: 5%;  animation-delay: -11s !important; animation-duration: 23s !important; transform: scale(.38); }
.home-page .panda-bone-dust span:nth-child(42) { left: 98%; animation-delay: -3s !important;  animation-duration: 19s !important; transform: scale(.42); }

@keyframes pandaVisibleDustRise {
  0% {
    transform: translate3d(0, 0, 0) scale(var(--dust-scale, 1));
    opacity: 0;
  }
  12% {
    opacity: .72;
  }
  58% {
    opacity: .38;
  }
  100% {
    transform: translate3d(18px, -310px, 0) scale(var(--dust-scale, 1));
    opacity: 0;
  }
}


/* TBE_HOME_HERO_CENTER_LIFT_START */
.home-cleanup-page .home-hero-content {
  position: relative;
  top: -46px;
}

@media (max-width: 800px) {
  .home-cleanup-page .home-hero-content {
    top: -22px;
  }
}
/* TBE_HOME_HERO_CENTER_LIFT_END */


/* =========================================================
   PANDA + VALI HYBRID HOME
   Keeps Vali's easy navigation, brings back Panda's empire vibe.
========================================================= */

body.home-page,
body.home-cleanup-page {
  background: #010302 !important;
  overflow-x: hidden !important;
}

body.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.35) 42%, rgba(0,0,0,.86) 100%),
    radial-gradient(circle at 50% 46%, rgba(118,255,57,.18), transparent 36%),
    radial-gradient(circle at 50% 90%, rgba(43,255,76,.18), transparent 38%),
    url("/images/hero-bg-new.png") center top / cover no-repeat;
  opacity: .96;
  filter: saturate(1.06) contrast(1.05);
}

body.home-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 0 38%, rgba(0,0,0,.48) 76%, rgba(0,0,0,.86) 100%),
    linear-gradient(90deg, rgba(0,0,0,.82), transparent 24%, transparent 76%, rgba(0,0,0,.82));
}

.home-shell,
.page-shell.wide.home-shell {
  background: transparent !important;
  min-height: 100vh !important;
}

.home-nav {
  position: relative !important;
  z-index: 20 !important;
  background:
    linear-gradient(180deg, rgba(10,18,10,.86), rgba(1,5,3,.72)) !important;
  border-color: rgba(193, 166, 105, .35) !important;
  box-shadow:
    0 0 34px rgba(102,255,46,.18),
    inset 0 0 26px rgba(193,166,105,.06) !important;
}

.empire-brand strong {
  color: #f2ead7 !important;
}

.empire-brand small,
.nav-link.active,
.home-kicker-text,
.panda-home-flare strong {
  color: #8cff45 !important;
}

.home-main-clean {
  position: relative !important;
  z-index: 5 !important;
  min-height: calc(100vh - 138px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: clamp(1.6rem, 4vh, 4rem) 1rem 4.8rem !important;
}

.home-hero-clean {
  position: relative !important;
  width: min(1100px, 96vw) !important;
  min-height: auto !important;
  padding: clamp(1.3rem, 3vh, 2.6rem) 0 .9rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-hero-art,
.home-hero-shade {
  display: none !important;
}

.home-hero-content {
  position: relative !important;
  margin: 0 auto !important;
  max-width: 960px !important;
  padding: clamp(1.5rem, 3vw, 2.6rem) clamp(1rem, 4vw, 3rem) !important;
  text-align: center !important;
  border-radius: 32px !important;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.48), rgba(0,0,0,.18) 50%, transparent 72%) !important;
  text-shadow: 0 3px 16px rgba(0,0,0,.94) !important;
}

.home-kicker {
  margin-bottom: 1.1rem !important;
}

.home-kicker-line {
  border-color: rgba(193,166,105,.45) !important;
  background: linear-gradient(90deg, transparent, rgba(193,166,105,.65), transparent) !important;
}

.home-hero-content h1 {
  font-family: BoneFont, Impact, Haettenschweiler, "Arial Black", sans-serif !important;
  text-transform: uppercase !important;
  color: #efe6cf !important;
  font-size: clamp(3rem, 8.6vw, 8.1rem) !important;
  line-height: .82 !important;
  letter-spacing: .035em !important;
  margin: 0 auto .9rem !important;
  text-shadow:
    0 2px 0 #22190d,
    0 0 18px rgba(0,0,0,.98),
    0 0 34px rgba(153,255,75,.16) !important;
}

.home-hero-content h1 span {
  display: block !important;
}

.home-hero-content h1 span:first-of-type {
  margin-top: .14em !important;
  font-size: .46em !important;
  color: #d6c49c !important;
  letter-spacing: .16em !important;
}

.home-hero-content h1 span:last-of-type {
  margin-top: .1em !important;
  color: #8cff45 !important;
  letter-spacing: .035em !important;
  text-shadow:
    0 2px 0 #173000,
    0 0 22px rgba(140,255,69,.56),
    0 0 42px rgba(140,255,69,.28) !important;
}

.home-hero-content .lead {
  max-width: 760px !important;
  margin: .6rem auto 1rem !important;
  color: rgba(246,241,224,.86) !important;
  font-size: clamp(1rem, 1.35vw, 1.22rem) !important;
  line-height: 1.45 !important;
}

.panda-home-flare {
  color: #c9a86a !important;
  font-size: clamp(1.25rem, 2vw, 1.9rem) !important;
  letter-spacing: .18em !important;
  text-shadow:
    0 0 18px rgba(0,0,0,.95),
    0 0 18px rgba(201,168,106,.22) !important;
}

.panda-home-credit {
  color: rgba(239,230,207,.78) !important;
}

.panda-home-credit strong {
  color: #8cff45 !important;
}

.home-ad-dock.home-server-overview {
  width: min(1140px, 96vw) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(135px, 1fr)) !important;
  gap: clamp(.7rem, 1.2vw, 1rem) !important;
  margin: .6rem auto 0 !important;
  padding: 0 !important;
}

.home-ad-card.home-feature-card {
  position: relative !important;
  min-height: 124px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: .25rem !important;
  padding: 1rem .75rem .9rem !important;
  border-radius: 18px !important;
  border: 1px solid rgba(211,184,124,.58) !important;
  color: #f6edd4 !important;
  text-align: center !important;
  text-decoration: none !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow:
    0 0 22px rgba(0,0,0,.8),
    0 0 18px rgba(140,255,69,.12),
    inset 0 0 26px rgba(0,0,0,.48) !important;
  transform: translateY(0) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.home-ad-card.home-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.62) 68%, rgba(0,0,0,.88)),
    radial-gradient(circle at 50% 0%, rgba(140,255,69,.18), transparent 58%) !important;
}

.home-ad-card.home-feature-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  border-radius: 13px;
  border: 1px solid rgba(230,208,158,.16);
  pointer-events: none;
}

.home-ad-card.home-feature-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(140,255,69,.78) !important;
  filter: brightness(1.12) saturate(1.08) !important;
  box-shadow:
    0 0 30px rgba(0,0,0,.82),
    0 0 28px rgba(140,255,69,.24),
    inset 0 0 30px rgba(0,0,0,.42) !important;
}

.home-feature-card > * {
  position: relative !important;
  z-index: 2 !important;
}

.home-feature-icon {
  display: none !important;
}

.home-feature-card strong {
  font-family: BoneFont, Impact, "Arial Black", sans-serif !important;
  color: #f5ead0 !important;
  font-size: clamp(1.05rem, 1.4vw, 1.5rem) !important;
  line-height: .9 !important;
  letter-spacing: .06em !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.95), 0 0 14px rgba(140,255,69,.26) !important;
}

.home-feature-card small {
  max-width: 95% !important;
  color: rgba(244,235,211,.82) !important;
  font-size: .74rem !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.98) !important;
}

.empire-feature-leaderboard {
  background-image: url("/images/leaderboard.png") !important;
}

.empire-feature-skins {
  background-image: url("/images/skins-button.png") !important;
}

.empire-feature-livechat {
  background-image: url("/images/live-chat-button.png") !important;
}

.empire-feature-map {
  background-image: url("/images/map-button.png") !important;
}

.empire-feature-vault {
  background-image: url("/images/bone-pile-bj.png") !important;
}

.panda-live-server-count {
  z-index: 30 !important;
  border-color: rgba(211,184,124,.46) !important;
  background: rgba(0,0,0,.68) !important;
  box-shadow: 0 0 18px rgba(140,255,69,.18) !important;
}

.tbe-green-embers,
.panda-bone-dust {
  opacity: .52 !important;
}

@media (max-width: 980px) {
  .home-ad-dock.home-server-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-ad-card.home-feature-card {
    min-height: 108px !important;
  }
}

@media (max-width: 560px) {
  .home-main-clean {
    justify-content: flex-start !important;
    padding-top: 1rem !important;
  }

  .home-hero-content h1 {
    font-size: clamp(2.45rem, 15vw, 4.4rem) !important;
  }

  .home-ad-dock.home-server-overview {
    grid-template-columns: 1fr !important;
  }
}

/* FORCE NEW PANDA HOMEPAGE BACKGROUND - 20260623_180936 */
body.home-page::before,
body.home-cleanup-page::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -3 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.38) 48%, rgba(0,0,0,.88) 100%),
    radial-gradient(circle at 50% 48%, rgba(118,255,57,.14), transparent 38%),
    url("/images/hero-bg-new.png?v=20260623_180936") center top / cover no-repeat !important;
  opacity: .98 !important;
  filter: saturate(1.06) contrast(1.05) !important;
}

.home-hero-art,
.home-hero-shade {
  display: none !important;
}

/* FIX BLACK SCREEN SWALLOWING NEW BACKGROUND - 20260623_181045 */
html,
body.home-page,
body.home-cleanup-page {
  min-height: 100% !important;
  background-color: #010302 !important;
}

body.home-page,
body.home-cleanup-page {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.30) 45%, rgba(0,0,0,.78) 100%),
    radial-gradient(circle at 50% 48%, rgba(118,255,57,.12), transparent 42%),
    url("/images/hero-bg-new.png?v=20260623_181045") !important;
  background-size: cover, cover, cover !important;
  background-position: center top, center top, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-attachment: fixed, fixed, fixed !important;
}

body.home-page::before,
body.home-cleanup-page::before {
  opacity: 0 !important;
  display: none !important;
  background: none !important;
}

body.home-page::after,
body.home-cleanup-page::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at center, transparent 0 42%, rgba(0,0,0,.22) 72%, rgba(0,0,0,.58) 100%),
    linear-gradient(90deg, rgba(0,0,0,.42), transparent 24%, transparent 76%, rgba(0,0,0,.42)) !important;
}

.page-shell.wide.home-shell,
.home-shell,
.home-main-clean,
.home-hero-clean,
.home-hero-content {
  background: transparent !important;
}

.home-hero-art,
.home-hero-shade {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

.page-shell.wide.home-shell,
.home-nav,
.home-main-clean,
.panda-live-server-count {
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================
   PANDA TUNE - less zoom, no bottom cards, gold top header
   20260623_181233
========================================================= */

body.home-page,
body.home-cleanup-page {
  background-size: cover, cover, 100% auto !important;
  background-position: center top, center top, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-attachment: scroll, scroll, scroll !important;
}

/* on smaller screens, fall back to normal cover so it still fills nicely */
@media (max-width: 1100px) {
  body.home-page,
  body.home-cleanup-page {
    background-size: cover, cover, cover !important;
  }
}

/* hide bottom feature buttons/cards */
.home-ad-dock.home-server-overview {
  display: none !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* keep hero centered nicely now that bottom cards are gone */
.home-main-clean {
  justify-content: center !important;
  padding-bottom: 5.5rem !important;
}

/* give top nav the gold outer style */
.home-nav {
  position: relative !important;
  border: 1px solid rgba(211,184,124,.72) !important;
  box-shadow:
    0 0 0 1px rgba(211,184,124,.14),
    0 0 28px rgba(102,255,46,.14),
    inset 0 0 0 1px rgba(211,184,124,.10),
    inset 0 0 24px rgba(211,184,124,.06) !important;
}

.home-nav::after {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(230,208,158,.16) !important;
  pointer-events: none !important;
}

/* optional: make the login/discord area blend with the gold frame a bit better */
.home-nav .secondary-button,
.home-nav .nav-auth-button,
.home-nav .empire-button.primary {
  box-shadow:
    0 0 0 1px rgba(211,184,124,.10),
    0 0 14px rgba(140,255,69,.12) !important;
}

/* CLEANER PANDA HOME TITLE - 20260623_181337 */
.home-hero-content h1 {
  max-width: 1050px !important;
  font-size: clamp(4rem, 8vw, 8.8rem) !important;
  line-height: .86 !important;
  color: #efe6cf !important;
  text-shadow:
    0 2px 0 #22190d,
    0 0 18px rgba(0,0,0,.98),
    0 0 34px rgba(153,255,75,.18) !important;
}

.home-hero-content h1 span {
  display: inline !important;
}

/* PANDA TITLE BACK TO WELCOME TO THE BONE EMPIRE - 20260623_181550 */
.home-hero-content h1 {
  font-family: BoneFont, Impact, Haettenschweiler, "Arial Black", sans-serif !important;
  text-transform: uppercase !important;
  color: #f4f1e8 !important;
  font-size: clamp(3.8rem, 7.2vw, 8rem) !important;
  line-height: .9 !important;
  letter-spacing: .025em !important;
  margin: 0 auto .9rem !important;
  text-shadow:
    0 2px 0 #16120b,
    0 0 18px rgba(0,0,0,.98),
    0 0 34px rgba(153,255,75,.16) !important;
}

.home-hero-content h1 span {
  display: block !important;
}

.home-hero-content h1 span:first-of-type {
  color: #f4f1e8 !important;
  font-size: 1em !important;
  letter-spacing: .025em !important;
}

.home-hero-content h1 span:last-of-type {
  color: #8cff45 !important;
  font-size: 1em !important;
  letter-spacing: .025em !important;
  text-shadow:
    0 2px 0 #173000,
    0 0 22px rgba(140,255,69,.56),
    0 0 42px rgba(140,255,69,.28) !important;
}

/* MOVE PANDA + VALI CREDIT ABOVE LIVE COUNTER - 20260623_181715 */
.panda-home-credit {
  position: fixed !important;
  left: 50% !important;
  bottom: 3.9rem !important;
  transform: translateX(-50%) !important;
  z-index: 40 !important;
  width: min(92vw, 700px) !important;
  margin: 0 !important;
  text-align: center !important;
  color: rgba(239,230,207,.86) !important;
  text-shadow:
    0 2px 10px rgba(0,0,0,.95),
    0 0 14px rgba(140,255,69,.16) !important;
}

.panda-home-credit strong {
  color: #8cff45 !important;
}

/* keep live counter below the credit */
.panda-live-server-count {
  position: fixed !important;
  left: 50% !important;
  bottom: 1.1rem !important;
  transform: translateX(-50%) !important;
  z-index: 41 !important;
}

/* REAL BOTTOM CREDIT POSITION - 20260623_181830 */
.panda-home-credit.panda-home-credit-bottom {
  position: fixed !important;
  left: 50% !important;
  bottom: 3.35rem !important;
  transform: translateX(-50%) !important;
  z-index: 60 !important;
  width: min(92vw, 760px) !important;
  margin: 0 !important;
  text-align: center !important;
  color: rgba(239,230,207,.9) !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .13em !important;
  text-shadow:
    0 2px 10px rgba(0,0,0,.98),
    0 0 14px rgba(140,255,69,.22) !important;
}

.panda-home-credit.panda-home-credit-bottom strong {
  color: #8cff45 !important;
}

.panda-live-server-count {
  position: fixed !important;
  left: 50% !important;
  bottom: .95rem !important;
  transform: translateX(-50%) !important;
  z-index: 61 !important;
}

/* MOVE HOMEPAGE TITLE BLOCK UP SLIGHTLY - 20260623_182051 */
.home-hero-clean {
  transform: translateY(-28px) !important;
}

@media (max-width: 700px) {
  .home-hero-clean {
    transform: translateY(-12px) !important;
  }
}

/* =========================================================
   BONE EMPIRE LORE PAGE - 20260623_182245
========================================================= */

.lore-shell {
  min-height: 100vh !important;
}

.lore-main {
  position: relative !important;
  z-index: 5 !important;
  min-height: calc(100vh - 135px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(2rem, 5vh, 4rem) 1rem 4rem !important;
}

.lore-panel {
  width: min(980px, 94vw) !important;
  border-radius: 34px !important;
  border: 1px solid rgba(211,184,124,.55) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(140,255,69,.13), transparent 38%),
    linear-gradient(180deg, rgba(4,8,5,.76), rgba(0,0,0,.68)) !important;
  box-shadow:
    0 0 34px rgba(0,0,0,.76),
    0 0 28px rgba(140,255,69,.12),
    inset 0 0 0 1px rgba(230,208,158,.10) !important;
  padding: clamp(1.5rem, 4vw, 3rem) !important;
  text-align: center !important;
  backdrop-filter: blur(8px) !important;
}

.lore-kicker {
  margin-bottom: 1.1rem !important;
}

.lore-panel h1 {
  font-family: BoneFont, Impact, Haettenschweiler, "Arial Black", sans-serif !important;
  text-transform: uppercase !important;
  color: #8cff45 !important;
  font-size: clamp(3.4rem, 7vw, 7.2rem) !important;
  line-height: .86 !important;
  letter-spacing: .035em !important;
  margin: 0 0 1rem !important;
  text-shadow:
    0 2px 0 #173000,
    0 0 22px rgba(140,255,69,.54),
    0 0 42px rgba(140,255,69,.24),
    0 0 18px rgba(0,0,0,.98) !important;
}

.lore-lead {
  max-width: 780px !important;
  margin: 0 auto 1.4rem !important;
  color: #efe6cf !important;
  font-size: clamp(1.05rem, 1.4vw, 1.28rem) !important;
  line-height: 1.5 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.95) !important;
}

.lore-copy {
  max-width: 790px !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 1rem !important;
  color: rgba(246,241,224,.82) !important;
  font-size: clamp(.98rem, 1.15vw, 1.08rem) !important;
  line-height: 1.65 !important;
}

.lore-copy p {
  margin: 0 !important;
}

.lore-callout {
  margin: 1.8rem 0 0 !important;
  color: #8cff45 !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  text-shadow:
    0 0 18px rgba(0,0,0,.95),
    0 0 22px rgba(140,255,69,.28) !important;
}

@media (max-width: 760px) {
  .lore-main {
    align-items: flex-start !important;
    padding-top: 1.2rem !important;
  }

  .lore-panel {
    border-radius: 24px !important;
  }
}


/* TBE_HOME_LAYER_RESCUE_START */
/* Keeps the big epic art as BACKGROUND only, so nav/buttons/content stay clickable and visible. */

.home-epic-bg {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

.home-shell,
.page-shell.home-shell,
.page-shell.wide.home-shell {
  position: relative !important;
  z-index: 50 !important;
  min-height: 100vh !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.home-shell header,
.home-shell nav,
.home-shell .tbe-header,
.home-shell .site-header,
.home-shell .tbe-site-header {
  position: relative !important;
  z-index: 250 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.home-main-clean,
.home-hero-clean,
.home-hero-content,
.home-ad-dock,
.home-server-overview,
.panda-home-bottom-stack,
.panda-live-server-count,
.panda-home-credit {
  position: relative !important;
  z-index: 120 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.home-ad-card,
.home-feature-card,
.home-shell a,
.home-shell button {
  pointer-events: auto !important;
}

.tbe-green-embers,
.panda-bone-dust {
  position: fixed !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

body.home-page::before,
body.home-page::after,
body.home-cleanup-page::before,
body.home-cleanup-page::after {
  z-index: 1 !important;
  pointer-events: none !important;
}
/* TBE_HOME_LAYER_RESCUE_END */


/* TBE welcome boneyard hero background */
.home-epic-bg {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center top !important;
  z-index: -5 !important;
  opacity: 0.95 !important;
  filter: brightness(0.72) contrast(1.08) saturate(1.08) !important;
}

.home-hero-clean {
  position: relative !important;
  overflow: hidden !important;
  min-height: clamp(420px, 58vh, 680px) !important;
  background: rgba(0, 0, 0, 0.18) !important;
}

.home-hero-art {
  background-image: url('/images/bone-empire-welcome.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: brightness(0.9) contrast(1.08) saturate(1.08) !important;
}

.home-hero-shade {
  background:
    radial-gradient(circle at center, rgba(121, 255, 22, 0.05), transparent 42%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.52)) !important;
}

/* The new art already has the welcome title, so hide the duplicate HTML title */
.home-hero-content h1 {
  display: none !important;
}

.home-hero-content {
  min-height: clamp(420px, 58vh, 680px) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 1rem 1.25rem !important;
}

.home-hero-content .lead {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0.8rem 1rem !important;
  border: 1px solid rgba(137, 255, 49, 0.22) !important;
  border-radius: 18px !important;
  background: rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 0 28px rgba(76, 255, 36, 0.12) !important;
}

/* Move boneyard title upward and remove old ghost/skull overlay */
.home-hero-clean::before,
.home-hero-clean::after,
.home-hero-art::before,
.home-hero-art::after,
.home-hero-content::before,
.home-hero-content::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

.home-hero-clean {
  min-height: clamp(410px, 54vh, 640px) !important;
  margin-top: -1.25rem !important;
}

.home-hero-art {
  inset: -95px 0 0 0 !important;
  height: calc(100% + 95px) !important;
  background-image: url('/images/bone-empire-welcome.png') !important;
  background-size: cover !important;
  background-position: center 64% !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: brightness(0.92) contrast(1.08) saturate(1.08) !important;
}

.home-hero-shade {
  background:
    radial-gradient(circle at center 42%, rgba(121, 255, 22, 0.035), transparent 38%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.48)) !important;
}

.home-hero-content {
  min-height: clamp(410px, 54vh, 640px) !important;
  padding-bottom: 0.85rem !important;
}

/* Move baked-in Bone Empire image title upward more */
.home-hero-clean {
  margin-top: -2.8rem !important;
  min-height: clamp(390px, 50vh, 600px) !important;
}

.home-hero-art {
  inset: -170px 0 0 0 !important;
  height: calc(100% + 170px) !important;
  background-image: url('/images/bone-empire-welcome.png') !important;
  background-size: cover !important;
  background-position: center 78% !important;
  background-repeat: no-repeat !important;
}

.home-hero-content {
  min-height: clamp(390px, 50vh, 600px) !important;
  padding-bottom: 0.65rem !important;
}

.home-epic-bg {
  object-position: center 34% !important;
}

/* Final homepage hero positioning nudge */
.home-hero-clean {
  margin-top: -4.15rem !important;
  min-height: clamp(380px, 48vh, 580px) !important;
}

.home-hero-art {
  inset: -210px 0 0 0 !important;
  height: calc(100% + 210px) !important;
  background-position: center 86% !important;
}

.home-hero-content {
  min-height: clamp(380px, 48vh, 580px) !important;
  padding-bottom: 2.15rem !important;
}

.home-hero-content .lead {
  transform: translateY(-1.15rem) !important;
}

/* Move the intro sentence closer under the baked-in Bone Empire title */
.home-hero-content .lead {
  transform: translateY(-3.15rem) !important;
  margin-bottom: -1.25rem !important;
}

/* FORCE move the intro text upward under the baked-in Bone Empire title */
.home-hero-content {
  justify-content: flex-end !important;
  padding-bottom: 7.25rem !important;
}

.home-hero-content p.lead,
.home-hero-content .lead {
  position: relative !important;
  top: 0 !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Pin intro text closer under the baked-in Bone Empire title */
.home-hero-clean {
  position: relative !important;
}

.home-hero-content {
  position: absolute !important;
  inset: 0 !important;
  min-height: auto !important;
  padding: 0 !important;
  display: block !important;
  pointer-events: none !important;
}

.home-hero-content p.lead,
.home-hero-content .lead {
  position: absolute !important;
  left: 50% !important;
  bottom: 7.9rem !important;
  transform: translateX(-50%) !important;
  width: min(900px, calc(100% - 2rem)) !important;
  max-width: 900px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

/* Slightly brighten the boneyard background without losing the dark mood */
.home-epic-bg {
  opacity: 1 !important;
  filter: brightness(0.84) contrast(1.08) saturate(1.08) !important;
}

.home-hero-art {
  filter: brightness(1.02) contrast(1.08) saturate(1.08) !important;
}

.home-hero-shade {
  background:
    radial-gradient(circle at center 42%, rgba(121, 255, 22, 0.025), transparent 38%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.36)) !important;
}

/* BIG nudge: place intro sentence directly under the baked-in Bone Empire title */
.home-hero-clean .home-hero-content {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  pointer-events: none !important;
}

.home-hero-clean .home-hero-content p.lead,
.home-hero-clean .home-hero-content .lead {
  position: absolute !important;
  left: 50% !important;
  top: 74% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(900px, calc(100% - 2rem)) !important;
  max-width: 900px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

/* Fix the REAL intro text: this is the one shown on screen */
.home-shell {
  position: relative !important;
}

.home-epic-lead {
  position: absolute !important;
  left: 50% !important;
  top: clamp(610px, 70vh, 675px) !important;
  transform: translateX(-50%) !important;
  width: min(940px, calc(100% - 2rem)) !important;
  max-width: 940px !important;
  margin: 0 !important;
  z-index: 8 !important;
}

/* Hide the duplicate intro inside the hero so we only control one sentence */
.home-hero-content p.lead,
.home-hero-content .lead {
  display: none !important;
}

/* Brighten the boneyard art a little more without killing the dark mood */
.home-hero-clean {
  background: rgba(0, 0, 0, 0.03) !important;
}

.home-hero-art {
  opacity: 1 !important;
  filter: brightness(1.16) contrast(1.08) saturate(1.1) !important;
}

.home-epic-bg {
  opacity: 1 !important;
  filter: brightness(0.96) contrast(1.08) saturate(1.08) !important;
}

.home-hero-shade {
  background:
    radial-gradient(circle at center 42%, rgba(121, 255, 22, 0.018), transparent 38%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.22)) !important;
}

/* Tiny nudge down for the intro sentence under Bone Empire */
.home-epic-lead {
  top: clamp(635px, 72vh, 700px) !important;
}

/* Place intro sentence between the big Bone Empire title and website credit */
.home-epic-lead {
  top: clamp(665px, 75vh, 735px) !important;
}

/* Final intro placement + readable dark glow */
.home-epic-lead {
  top: clamp(680px, 76vh, 750px) !important;
  padding: 0.45rem 1.1rem !important;
  border-radius: 999px !important;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.32) 48%,
    rgba(0, 0, 0, 0.00) 78%
  ) !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 12px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(0, 0, 0, 0.75) !important;
}

/* Remove uneven green side lines from intro sentence */
.home-epic-lead::before,
.home-epic-lead::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* Keep intro readable without the awkward lines */
.home-epic-lead {
  top: clamp(680px, 76vh, 750px) !important;
  padding: 0.45rem 1.25rem !important;
  border: 0 !important;
  box-shadow: none !important;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.34) 45%,
    rgba(0, 0, 0, 0.00) 78%
  ) !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 1),
    0 0 12px rgba(0, 0, 0, 0.95),
    0 0 22px rgba(0, 0, 0, 0.8) !important;
}

/* Slight extra brightness for Bone Empire homepage art */
.home-epic-bg {
  opacity: 1 !important;
  filter: brightness(1.08) contrast(1.08) saturate(1.1) !important;
}

.home-hero-art {
  opacity: 1 !important;
  filter: brightness(1.28) contrast(1.08) saturate(1.12) !important;
}

.home-hero-shade {
  background:
    radial-gradient(circle at center 42%, rgba(121, 255, 22, 0.012), transparent 38%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.14)) !important;
}

/* Final readability polish for intro sentence */
.home-epic-lead {
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 1),
    0 0 10px rgba(0, 0, 0, 1),
    0 0 18px rgba(0, 0, 0, 0.95),
    0 0 28px rgba(0, 0, 0, 0.75) !important;
}

/* Header brand polish after changing to THE BONE EMPIRE */
.tbe-header a[href="/"],
.tbe-header .brand,
.tbe-header .brand-text,
.tbe-header .site-title,
.tbe-header .logo-text,
.empire-brand,
.empire-logo-text {
  font-size: clamp(1.05rem, 1.45vw, 1.55rem) !important;
  letter-spacing: 0.075em !important;
  white-space: nowrap !important;
}

.tbe-header {
  min-height: 72px !important;
}

.tbe-header img,
.tbe-header svg {
  flex-shrink: 0 !important;
}

/* Header brand: THE BONE EMPIRE */
.tbe-main-brand-text strong {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.34em !important;
  white-space: nowrap !important;
  font-size: clamp(1.08rem, 1.38vw, 1.48rem) !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

.tbe-main-brand-text .tbe-brand-the,
.tbe-main-brand-text .tbe-brand-bone {
  color: #ffffff !important;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.25),
    0 0 18px rgba(120, 255, 38, 0.14) !important;
  text-transform: uppercase !important;
}

.tbe-main-brand-text .tbe-brand-empire {
  color: #80ff39 !important;
  text-shadow:
    0 0 10px rgba(128, 255, 57, 0.75),
    0 0 22px rgba(128, 255, 57, 0.42) !important;
  text-transform: uppercase !important;
}

/* LORE PAGE FINAL: move story card cleanly below header */
body.lore-page .page-shell.lore-shell {
  padding-top: 0 !important;
}

body.lore-page .tbe-main-header {
  position: relative !important;
  z-index: 50 !important;
}

/* This is the real spacer after TbeHeader on app/lore/page.tsx */
body.lore-page .tbe-lore-header-spacer {
  display: block !important;
  height: clamp(2.4rem, 4.2vh, 3.6rem) !important;
  min-height: 2.4rem !important;
  flex: 0 0 auto !important;
}

/* Stop old top-lock rules from dragging the card upward */
body.lore-page .lore-main-top-lock,
body.lore-page .lore-main {
  position: relative !important;
  z-index: 5 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/* The actual lore card */
body.lore-page .lore-panel {
  margin-top: 0 !important;
}

/* Slightly tighter card so moving it down still fits nicely */
body.lore-page .lore-panel h1 {
  margin-top: 0.35rem !important;
}

body.lore-page .lore-kicker {
  margin-top: 0 !important;
}

/* LORE RESCUE: restore solid readable card and move it below header */
body.lore-page .page-shell.lore-shell {
  padding-top: 0 !important;
}

/* Real spacer after the header */
body.lore-page .tbe-lore-header-spacer {
  display: block !important;
  height: 5.25rem !important;
  min-height: 5.25rem !important;
}

/* Main should start below the spacer, not tuck under nav */
body.lore-page .lore-main,
body.lore-page .lore-main-top-lock {
  position: relative !important;
  z-index: 5 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/* Restore the actual dark lore card */
body.lore-page .lore-panel {
  position: relative !important;
  z-index: 10 !important;
  margin-top: 0 !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at top, rgba(104, 255, 49, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(3, 12, 7, 0.96), rgba(0, 0, 0, 0.92)) !important;
  border: 1px solid rgba(99, 255, 55, 0.26) !important;
  box-shadow:
    0 0 38px rgba(76, 255, 36, 0.12),
    0 24px 70px rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(10px) !important;
}

/* Make sure text is bright again */
body.lore-page .lore-panel,
body.lore-page .lore-panel p,
body.lore-page .lore-copy p,
body.lore-page .lore-lead {
  color: rgba(255, 255, 255, 0.88) !important;
  opacity: 1 !important;
}

body.lore-page .lore-panel h1 {
  color: #8cff57 !important;
  opacity: 1 !important;
}

/* HARD LORE FIX: solid card + push below header */
body.lore-page .lore-shell,
body.lore-page .home-shell,
body.lore-page .page-shell,
body.lore-page .lore-main,
body.lore-page .lore-main-top-lock {
  opacity: 1 !important;
  filter: none !important;
}

body.lore-page .tbe-lore-header-spacer {
  display: block !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* Move the actual lore card down, no matter what older layout rules say */
body.lore-page .lore-panel {
  transform: translateY(5.75rem) !important;
  margin-top: 0 !important;
  opacity: 1 !important;

  background: #020704 !important;
  background-image:
    radial-gradient(circle at top, rgba(116, 255, 54, 0.14), transparent 35%),
    linear-gradient(180deg, rgba(3, 14, 8, 0.98), rgba(0, 0, 0, 0.96)) !important;

  border: 1px solid rgba(116, 255, 54, 0.28) !important;
  box-shadow:
    0 0 42px rgba(116, 255, 54, 0.13),
    0 26px 80px rgba(0, 0, 0, 0.82) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Force text back bright/readable */
body.lore-page .lore-panel,
body.lore-page .lore-panel *,
body.lore-page .lore-copy p,
body.lore-page .lore-lead {
  opacity: 1 !important;
  filter: none !important;
}

body.lore-page .lore-panel p,
body.lore-page .lore-copy p,
body.lore-page .lore-lead {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.lore-page .lore-panel h1 {
  color: #8cff57 !important;
  text-shadow:
    0 0 18px rgba(132, 255, 72, 0.55),
    0 0 38px rgba(132, 255, 72, 0.28) !important;
}