/* Fateweld Visual Navigation / Environmental Identity v1.
   World-facing destinations receive a landmark or material cue. Meta/data
   controls remain quiet. Routes, state and polling ownership are unchanged. */

.screen-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  --destination-mark: #9a9f96;
}

.screen-tab-mark {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: currentColor;
  color: var(--destination-mark);
  opacity: .74;
  transition: opacity 140ms ease, transform 160ms ease, color 140ms ease;
}

.screen-tab[data-screen-tab="battle"] { --destination-mark: #c26f3d; }
.screen-tab[data-screen-tab="growth"] { --destination-mark: #d0a65b; }
.screen-tab[data-screen-tab="gear"] { --destination-mark: #aeb6ad; }
.screen-tab[data-screen-tab="shop"] { --destination-mark: #bf8b48; }
.screen-tab[data-screen-tab="world"] { --destination-mark: #7f9c76; }
.screen-tab[data-screen-tab="chat"] { --destination-mark: #9c8268; }

.screen-tab:hover .screen-tab-mark,
.screen-tab:focus-visible .screen-tab-mark,
.screen-tab.active .screen-tab-mark {
  opacity: 1;
  transform: translateY(-1px);
  color: var(--destination-mark);
}

.screen-tab.active {
  background:
    linear-gradient(180deg, rgb(208 166 91 / 10%), transparent 78%),
    var(--button);
}

.home-world-anchor button {
  min-height: 44px;
}

@media (min-width: 960px) and (min-height: 600px) {
  body:not(.public-landing-active):not(.public-landing-pending) .screen-tabs {
    gap: 6px;
  }

  body:not(.public-landing-active):not(.public-landing-pending) .screen-tab {
    gap: 5px;
    padding-inline: 8px;
    font-size: 12px;
  }

  body:not(.public-landing-active):not(.public-landing-pending) .screen-tab-mark {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 959px), (max-height: 599px) {
  .screen-tab {
    min-height: 44px;
  }

  #sandboxScreen > .screen-only {
    min-width: 0;
    max-width: 100%;
  }
}

.destination-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--fw-gold, #e4bd67);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.destination-hero {
  position: relative;
  isolation: isolate;
  min-height: 172px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  padding: 18px 20px;
  border: 1px solid rgb(196 154 74 / 31%);
  border-radius: 10px;
  background: #101310;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), 0 14px 34px rgb(0 0 0 / 24%);
}

.destination-hero::before,
.destination-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body[data-game-screen="growth"] .destination-growth::before {
  background-image: url("/assets/world/common_district_training_yard_v1.webp");
  background-position: center 57%;
  background-size: cover;
  filter: saturate(.78) brightness(.67) contrast(1.1);
}

.destination-growth::after {
  background:
    linear-gradient(90deg, rgb(5 7 6 / 96%) 0%, rgb(7 9 7 / 78%) 38%, rgb(5 7 6 / 18%) 73%),
    linear-gradient(0deg, rgb(4 6 5 / 86%), transparent 72%);
}

.destination-hero-copy {
  max-width: 520px;
  text-shadow: 0 3px 16px rgb(0 0 0 / 86%);
}

.destination-hero-copy h2 {
  margin: 0;
  color: #f5ead5;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: -.025em;
}

.destination-hero-copy p {
  margin: 6px 0 0;
  color: #cfc7b8;
  font-size: 13px;
}

.destination-hero .growth-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  max-width: 460px;
  padding: 8px;
  border: 1px solid rgb(185 138 61 / 18%);
  border-radius: 8px;
  background: rgb(5 7 6 / 76%);
  backdrop-filter: blur(4px);
}

.destination-title {
  position: relative;
  isolation: isolate;
  min-height: 76px;
  overflow: hidden;
  padding: 13px 15px;
  border: 1px solid rgb(183 175 151 / 14%);
  border-radius: 8px;
}

.destination-title h2 {
  margin: 0;
}

.destination-gear {
  background:
    linear-gradient(100deg, rgb(6 8 7 / 92%), rgb(20 23 20 / 68%)),
    repeating-linear-gradient(90deg, transparent 0 62px, rgb(153 160 151 / 6%) 63px 64px);
  box-shadow: inset 3px 0 0 rgb(151 160 151 / 38%);
}

.destination-gear::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -52px;
  right: 7%;
  width: 190px;
  height: 150px;
  border: 10px solid rgb(129 137 129 / 8%);
  border-radius: 48% 48% 18% 18%;
  transform: rotate(-7deg);
}

.destination-shop {
  min-height: 92px;
  background: transparent;
}

.destination-shop::before,
.destination-shop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body[data-game-screen="shop"] .destination-shop::before {
  background-image: url("/assets/world/common_district_home_backdrop_v1.webp");
  background-position: 76% 48%;
  background-size: 165%;
  filter: saturate(.74) brightness(.55) contrast(1.08);
}

.destination-shop::after {
  background: linear-gradient(90deg, rgb(6 8 6 / 96%), rgb(11 10 7 / 72%) 60%, rgb(73 42 16 / 38%));
}

.world-section-nav button {
  position: relative;
  padding-left: 19px;
}

.world-section-nav button::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 4px;
  height: 15px;
  border-radius: 4px;
  background: #7e837c;
  opacity: .58;
  transform: translateY(-50%);
}

.world-section-nav button[data-world-section="overview"]::before { background: #9b8a65; }
.world-section-nav button[data-world-section="professions"]::before,
.world-section-nav button[data-world-section="production"]::before { background: #b56c35; }
.world-section-nav button[data-world-section="market"]::before { background: #bd934e; }
.world-section-nav button[data-world-section="services"]::before { background: #6f9f78; }
.world-section-nav button[data-world-section="society"]::before { background: #8b7560; }
.world-section-nav button[data-world-section="history"]::before { background: #737a75; }
.world-section-nav button.active::before { opacity: 1; box-shadow: 0 0 10px currentColor; }

#professionHubPanel,
#processingPanel,
#craftPanel,
#maintenancePanel,
#saleListingsPanel,
#medicalPanel,
#chatPanel {
  border-top-width: 2px;
}

#professionHubPanel,
#processingPanel,
#craftPanel,
#maintenancePanel {
  border-top-color: rgb(181 108 53 / 58%);
  background-image: linear-gradient(180deg, rgb(126 63 27 / 8%), transparent 190px);
}

#saleListingsPanel {
  border-top-color: rgb(189 147 78 / 58%);
  background-image: linear-gradient(180deg, rgb(146 102 36 / 8%), transparent 180px);
}

#medicalPanel {
  border-top-color: rgb(111 159 120 / 58%);
  background-image: linear-gradient(180deg, rgb(70 119 80 / 11%), transparent 180px);
}

#chatPanel {
  border-top-color: rgb(139 117 96 / 52%);
  background-image: linear-gradient(180deg, rgb(91 68 45 / 9%), transparent 160px);
}

.home-battle-prep {
  border-left: 2px solid rgb(167 102 58 / 44%);
}

.home-battle-prep .home-find-battle,
.home-battle-prep button:not(.primary) {
  background: linear-gradient(180deg, rgb(82 54 31 / 42%), rgb(32 31 25 / 68%));
}

@media (max-width: 760px) {
  .screen-tabs {
    gap: 5px;
  }

  .screen-tab {
    gap: 5px;
    padding-inline: 10px;
  }

  .screen-tab-mark {
    width: 15px;
    height: 15px;
  }

  .destination-hero {
    min-height: 168px;
    display: grid;
    align-content: end;
    padding: 13px;
  }

  body[data-game-screen="growth"] .destination-growth::before {
    background-image: url("/assets/world/common_district_training_yard_mobile_v1.webp");
    background-position: 62% center;
  }

  .destination-growth::after {
    background:
      linear-gradient(90deg, rgb(5 7 6 / 91%), rgb(6 8 6 / 42%)),
      linear-gradient(0deg, rgb(4 6 5 / 95%) 0%, transparent 78%);
  }

  .destination-hero-copy h2 {
    font-size: 24px;
  }

  .destination-hero .growth-actions {
    width: 100%;
    max-width: none;
    justify-content: stretch;
    padding: 6px;
  }

  .destination-hero .growth-actions button {
    min-height: 44px;
    flex: 1 1 130px;
  }

  .destination-title {
    min-height: 70px;
    padding: 11px 12px;
  }

  .destination-shop {
    min-height: 86px;
  }

  .world-section-nav button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-tab-mark {
    transition: none;
  }
}