/* Shared PingLife fantasy navigation button.
   Use .pinglife-nav-button on every future back/home control. */
:root {
  --pinglife-nav-button-art: url("../../assets/ui/pinglife-back-home-button-v1.webp?v=20260716-2");
  --pinglife-back-size-mobile: clamp(46px, 12vw, 62px);
}

.pinglife-nav-button,
.world-building-back,
.pl-skin-back,
.pl-matches-back {
  box-sizing: border-box;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-image: var(--pinglife-nav-button-art) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
  color: transparent !important;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pinglife-nav-button > span,
.world-building-back > span,
.pl-skin-back > span,
.pl-matches-back > span {
  opacity: 0 !important;
}

.pinglife-nav-button:active,
.world-building-back:active,
.pl-skin-back:active,
.pl-matches-back:active {
  filter: brightness(1.12) drop-shadow(0 5px 8px rgba(0, 0, 0, .45));
}

.pinglife-nav-button:focus-visible,
.world-building-back:focus-visible,
.pl-skin-back:focus-visible,
.pl-matches-back:focus-visible {
  outline: 3px solid #fff1b0;
  outline-offset: 3px;
}

.pinglife-nav-button,
.world-building-back {
  width: 96px !important;
  height: 96px !important;
}

@media (max-width: 760px) {
  .pinglife-nav-button,
  .world-building-back,
  .pl-skin-back,
  .pl-matches-back,
  .fftt-fantasy-back,
  .fftt-copilot-back,
  .mines-back,
  .chests-back,
  .quests-back-btn,
  .thy-back-btn,
  [data-club-subpage-back] {
    box-sizing: border-box !important;
    width: var(--pinglife-back-size-mobile) !important;
    min-width: var(--pinglife-back-size-mobile) !important;
    max-width: var(--pinglife-back-size-mobile) !important;
    height: var(--pinglife-back-size-mobile) !important;
    min-height: var(--pinglife-back-size-mobile) !important;
    max-height: var(--pinglife-back-size-mobile) !important;
    aspect-ratio: 1 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    background-image: var(--pinglife-nav-button-art) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .pinglife-nav-button > *,
  .world-building-back > *,
  .pl-skin-back > *,
  .pl-matches-back > *,
  .fftt-fantasy-back > *,
  .fftt-copilot-back > *,
  .mines-back > *,
  .chests-back > *,
  .quests-back-btn > *,
  .thy-back-btn > *,
  [data-club-subpage-back] > * {
    opacity: 0 !important;
  }
}

/* The profile artwork previously needed a rectangular cover behind its old arrow. */
body:has(.pl-fantasy-profile) .pl-fantasy-skin::before {
  display: none !important;
}

.pl-skin-back {
  width: clamp(104px, 27cqw, 144px) !important;
  height: auto !important;
  aspect-ratio: 1;
}

.pl-fantasy-profile.is-matches-view .pl-matches-back {
  width: min(29vw, 246px) !important;
}

/* Final mobile lock: page-specific fantasy rules are loaded before/after this
   shared component in different routes, so the validated touch size stays the
   authoritative value everywhere. */
@media (max-width: 760px) {
  body .pinglife-nav-button,
  body .world-building-back,
  body .pl-skin-back,
  body .pl-fantasy-profile.is-matches-view .pl-matches-back,
  body .fftt-fantasy-back,
  body .fftt-copilot-back,
  body .mines-back,
  body .chests-back,
  body .quests-back-btn,
  body .thy-back-btn,
  body [data-club-subpage-back] {
    width: var(--pinglife-back-size-mobile) !important;
    min-width: var(--pinglife-back-size-mobile) !important;
    max-width: var(--pinglife-back-size-mobile) !important;
    height: var(--pinglife-back-size-mobile) !important;
    min-height: var(--pinglife-back-size-mobile) !important;
    max-height: var(--pinglife-back-size-mobile) !important;
  }
}