@charset "UTF-8";

/* Compact wooden rails. Decorative corners use nine-slice scaling; all live
   counters and navigation labels remain ordinary, readable DOM content. */
#app .game-shell[data-page] .topbar {
  position: relative;
  flex: 0 0 54px;
  height: 54px;
  min-height: 54px;
  padding: 3px 5px;
  border: 0;
  border-image: none;
  background: repeating-linear-gradient(0deg, #302218 0 3px, #3c2a1c 3px 5px, #362418 5px 10px);
  box-shadow: inset 0 2px #9c6838, inset 0 -3px #160f0b, 0 2px #b88b45;
  color: #f7e7bd;
  z-index: 7;
}
#app .game-shell[data-page] .brand-row {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
}
#app .game-shell[data-page] :is(.brand, .season-tag, .inventory-shortcut) { display: none; }
#app .game-shell[data-page] .wallet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  height: 46px;
  margin: 0 46px 0 0;
}
#app .game-shell[data-page] .wallet-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  height: 46px;
  padding: 1px 0;
  border: 6px solid transparent;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 72 95 74 95 fill stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e3cda3;
  font-size: 8px;
  text-shadow: 0 1px #2c190e;
}
#app .game-shell[data-page] .wallet-chip > span { min-width: 0; line-height: 1.1; }
#app .game-shell[data-page] .wallet-chip b {
  color: #fff1c9;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#app .game-shell[data-page] .wallet .resource-icon {
  flex: 0 0 17px;
  width: 17px;
  height: 23px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px #24190e);
}
#app .game-shell[data-page] .brand-row > .icon-button:last-child {
  position: relative;
  inset: auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 6px solid transparent;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 72 95 74 95 fill stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 0;
}
#app .game-shell[data-page] .brand-row > .icon-button:last-child::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: url(../assets/ui/nav-settings-gear.png) center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px #291b0e);
}

#app .game-shell[data-page] .bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  flex: 0 0 54px;
  height: 54px;
  min-height: 54px;
  gap: 1px;
  padding: 4px 4px 5px;
  border: 0;
  border-image: none;
  background: repeating-linear-gradient(0deg, #302218 0 3px, #3c2a1c 3px 5px, #362418 5px 10px);
  box-shadow: inset 0 2px #ad7e41, inset 0 -3px #1b160e, 0 -2px #1c2c1c;
  isolation: isolate;
}
#app .game-shell[data-page] .bottom-nav .nav-item {
  display: grid;
  grid-template-rows: 23px 11px;
  align-content: center;
  justify-items: center;
  gap: 0;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  overflow: visible;
  border: 4px solid transparent;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 72 95 74 95 fill stretch;
  border-radius: 0;
  background: none;
  color: #d9c59b;
  box-shadow: none;
  text-shadow: 0 1px #2b180c;
}
#app .game-shell[data-page] .bottom-nav .nav-item .nav-art {
  width: 25px;
  height: 24px;
  max-height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px #241b10);
}
#app .game-shell[data-page] .bottom-nav .nav-item b {
  font-size: 10px;
  line-height: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  color: inherit;
}
#app .game-shell[data-page] .bottom-nav .nav-item.active {
  color: #fff1ac;
  filter: brightness(1.23) saturate(1.12);
  transform: translateY(-1px);
  box-shadow: 0 2px #dbb15c;
}
#app .game-shell[data-page] .bottom-nav .nav-item.active .nav-art {
  filter: drop-shadow(0 1px #39250c) drop-shadow(0 0 2px #f6d16d);
}

#app .game-shell[data-page="growth"] .mother-growth > .tab-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  gap: 2px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: none;
}
#app .game-shell[data-page="growth"] .mother-growth > .tab-strip .pill {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 1px;
  border: 6px solid transparent;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 72 95 74 95 fill stretch;
  border-radius: 0;
  background: none;
  color: #e8d3ad;
  box-shadow: none;
  font-size: 10px;
  line-height: 1.2;
  text-shadow: 0 1px #2e1c0e;
}
#app .game-shell[data-page="growth"] .mother-growth > .tab-strip .pill::before {
  content: "";
  flex: 0 0 17px;
  width: 17px;
  height: 21px;
  background: center / contain no-repeat;
  image-rendering: pixelated;
}
#app .game-shell[data-page="growth"] .mother-growth > .tab-strip [data-sub="workshop"]::before { background-image: url(../assets/ui/nav-material-chest.png); }
#app .game-shell[data-page="growth"] .mother-growth > .tab-strip [data-sub="animals"]::before { background-image: url(../assets/ui/nav-companion-paw.png); }
#app .game-shell[data-page="growth"] .mother-growth > .tab-strip [data-sub="landmarks"]::before { background-image: url(../assets/ui/nav-camp-house.png); }
#app .game-shell[data-page="growth"] .mother-growth > .tab-strip [data-sub="craft"]::before { background-image: url(../assets/ui/icon-level-star.png); }
#app .game-shell[data-page="growth"] .mother-growth > .tab-strip .pill.selected {
  color: #fff2a8;
  filter: brightness(1.22) saturate(1.12);
  box-shadow: 0 2px #cda34f;
}
#app .game-shell[data-page] :is(.wallet-chip, .nav-item, .brand-row > .icon-button):focus-visible,
#app .game-shell[data-page="growth"] .mother-growth > .tab-strip .pill:focus-visible {
  outline: 2px solid #ffe38f;
  outline-offset: -3px;
}
@media (max-width: 350px) {
  #app .game-shell[data-page] .wallet-chip { gap: 1px; border-left-width: 4px; border-right-width: 4px; font-size: 7px; }
  #app .game-shell[data-page] .wallet-chip b { font-size: 10px; }
  #app .game-shell[data-page] .wallet .resource-icon { flex-basis: 15px; width: 15px; }
  #app .game-shell[data-page="growth"] .mother-growth > .tab-strip .pill { gap: 1px; font-size: 9px; }
}