.encyclopedia-page .inner-content {
  padding-top: 0;
  padding-bottom: 1.78rem;
}

.map-picker {
  position: relative;
  height: 5.2rem;
  margin: 0 -0.22rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(112, 69, 47, 0.72) 0%, rgba(45, 30, 22, 0.58) 48%, rgba(13, 10, 7, 0.96) 100%);
  touch-action: none;
  user-select: none;
}

.map-picker .search-box {
  position: absolute;
  left: 0.22rem;
  top: 0.44rem;
  z-index: 8;
}

.map-glow {
  position: absolute;
  left: -1.05rem;
  top: -0.9rem;
  width: 4.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 182, 123, 0.24) 0%, rgba(122, 72, 45, 0.13) 42%, transparent 70%);
  filter: blur(0.18rem);
}

.map-viewport {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.42rem;
  height: 3.78rem;
  overflow: hidden;
}

.map-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 7.5rem;
  height: 3.82rem;
  transform: translate3d(var(--map-x, 0px), var(--map-y, 0px), 0) scale(var(--map-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

.world-map {
  position: absolute;
  left: 0.12rem;
  top: 0.2rem;
  width: 7.08rem;
  height: 3.3rem;
  opacity: 0.82;
  filter: drop-shadow(0 0 0.1rem rgba(255, 176, 120, 0.16));
}

.country {
  position: absolute;
  z-index: 2;
  min-width: 0.96rem;
  height: 0.46rem;
  padding: 0 0.18rem;
  border: 0.01rem solid rgba(188, 164, 146, 0.44);
  border-radius: 0.24rem;
  background: rgba(12, 8, 5, 0.56);
  color: rgba(245, 225, 204, 0.72);
  font-size: 0.24rem;
  line-height: 0.46rem;
  text-align: center;
  white-space: nowrap;
  backdrop-filter: blur(0.04rem);
  transform: translate(var(--dx, 0), var(--dy, 0));
}

.country::before {
  content: "";
  position: absolute;
  left: var(--pin-left, 50%);
  top: var(--pin-top, -0.09rem);
  width: 0.12rem;
  height: 0.12rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.12rem currentColor;
}

.country.is-active {
  border-color: rgba(255, 176, 120, 0.9);
  background: linear-gradient(180deg, rgba(116, 65, 38, 0.92), rgba(53, 31, 20, 0.86));
  color: #ffb078;
  font-weight: 800;
}

.map-controls {
  position: absolute;
  right: 0.24rem;
  top: 1.48rem;
  z-index: 5;
  display: flex;
  gap: 0.08rem;
}

.map-controls button {
  width: 0.48rem;
  height: 0.42rem;
  border: 0.01rem solid rgba(188, 164, 146, 0.42);
  border-radius: 0.12rem;
  background: rgba(12, 8, 5, 0.48);
  color: #f5dcc4;
  font-size: 0.22rem;
  font-weight: 800;
  line-height: 0.42rem;
  backdrop-filter: blur(0.06rem);
}

.map-controls [data-map-zoom="reset"] {
  width: 0.62rem;
  font-size: 0.18rem;
}

.brand-section {
  margin-top: 0.28rem;
}

.brand-head {
  height: 0.7rem;
  padding: 0 0.09rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-head h1 {
  margin: 0;
  font-size: 0.42rem;
  line-height: 0.56rem;
  font-weight: 900;
  background: linear-gradient(270deg, #ffcd9f 0%, #fff5e9fc 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.brand-head span {
  margin-top: 0.04rem;
  font-size: 0.28rem;
  line-height: 0.36rem;
  color: rgba(240, 221, 203, 0.76);
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem 0.16rem;
  margin-top: 0.16rem;
}

.brand-card {
  position: relative;
  height: 3.9rem;
  padding: 0.56rem 0.42rem 0;
  overflow: hidden;
  border-radius: 0.21rem;
  background: linear-gradient(180deg, rgba(69, 49, 37, 0.98), rgba(44, 31, 24, 0.98));
}

.brand-card::after {
  content: "";
  position: absolute;
  left: -0.6rem;
  top: -0.7rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 176, 120, 0.12), transparent 68%);
  pointer-events: none;
}

.brand-rating {
  position: absolute;
  right: 0.31rem;
  top: 0.24rem;
  font-size: 0.2rem;
  line-height: 0.28rem;
  color: #d8b18f;
}

.brand-card img {
  width: 1.26rem;
  height: 1.16rem;
  margin: 0 auto;
  object-fit: contain;
  background: #fff;
}

.brand-card h2 {
  margin: 0.35rem 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 0.28rem;
  line-height: 0.36rem;
  font-weight: 900;
  color: #f6e2ca;
}

.brand-card h3 {
  margin: 0.02rem 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 0.23rem;
  line-height: 0.31rem;
  font-weight: 500;
  color: #f2dbc1;
}

.brand-card p {
  height: 0.56rem;
  margin: 0.2rem 0 0;
  overflow: hidden;
  font-size: 0.2rem;
  line-height: 0.28rem;
  color: rgba(235, 216, 198, 0.65);
}