/* Scoped host polish; shared by the game and the CS/EN information pages. */
.cp-site-nav .locale-picker,
.growth-nav .locale-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
}

.cp-site-nav .locale-picker::after,
.growth-nav .locale-picker::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.growth-nav .locale-picker > span[aria-hidden="true"] { display: none; }

/* Retain the real keyboard- and screen-reader-accessible select, without
   Safari's second bevelled container inside the glass control. */
.cp-site-nav .locale-picker select,
.growth-nav .locale-picker select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 72px;
  min-height: 48px;
  margin: 0;
  padding: 0 29px 0 14px;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  box-shadow: none;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  line-height: normal;
  cursor: pointer;
}

.cp-site-nav .locale-picker select:focus-visible,
.growth-nav .locale-picker select:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.cp-site-nav .locale-picker option,
.growth-nav .locale-picker option {
  color: #064b64;
  background: #fff;
}

/* The active item has the same glass surface on every edge. */
.cp-site-nav .nav-links.primary-menu > a[aria-current="page"],
.growth-nav .nav-links.primary-menu > a[aria-current="page"] {
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

/* These supplied illustrations already contain a blue rounded medallion.
   Clip the baked square corner pixels, retaining the whole world artwork.
   Matching the bitmap's proportions keeps the clipping correct at every size. */
.side-picker [data-world] img,
.world-row .select-tile img,
.shop-card img[src*="/world-"] {
  display: block;
  height: auto;
  aspect-ratio: 524 / 492;
  object-fit: cover;
  border-radius: 12.5%;
  clip-path: inset(0 round 12.5%);
}

.side-picker [data-world] img {
  width: 68px;
  max-width: 100%;
}

/* Shop artwork occupies a 170px grid row. Keep the world's rounded image at
   its natural ratio inside that row instead of expanding over the title. */
.store-product-card img[src*="/world-"] {
  width: min(100%, calc(170px * 524 / 492));
  height: auto;
  max-height: 170px;
}

/* This is an enabled return action, not a disabled system-grey button. */
.shop-empty .primary-action[data-action="home"] {
  -webkit-appearance: none;
  appearance: none;
  color: #fff;
  background: linear-gradient(90deg, #ff5fa0, #fa267b);
  border-color: rgba(255, 255, 255, .46);
}

.shop-empty .primary-action[data-action="home"]:focus-visible {
  outline: 3px solid #064b64;
  outline-offset: 4px;
}

@media (max-width: 520px) {
  .cp-site-nav .locale-picker,
  .growth-nav .locale-picker { min-height: 44px; }
  .cp-site-nav .locale-picker select,
  .growth-nav .locale-picker select {
    width: 60px;
    min-height: 44px;
    padding: 0 24px 0 10px;
    font-size: 14px;
  }
  .cp-site-nav .locale-picker::after,
  .growth-nav .locale-picker::after { right: 11px; width: 6px; height: 6px; }
}

@media (forced-colors: active) {
  .cp-site-nav .locale-picker::after,
  .growth-nav .locale-picker::after { display: none; }
  .cp-site-nav .locale-picker select,
  .growth-nav .locale-picker select {
    -webkit-appearance: auto;
    appearance: auto;
    padding-inline: 8px;
    color: ButtonText;
    background: ButtonFace;
    border-color: ButtonText;
  }
  .cp-site-nav .nav-links.primary-menu > a[aria-current="page"],
  .growth-nav .nav-links.primary-menu > a[aria-current="page"] {
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }
}