/* POKOLENIE-X visual identity layer: sidebar-first, theme-aware. */
:root {
  --px-brand-blue: #63c7ff;
  --px-brand-violet: #8f72ff;
  --px-brand-pink: #f044d4;
  --px-brand-gold: #f4ca80;
}

/*
 * PX atmosphere v3.
 * The actual site palette now carries the cool graphite/violet identity.
 * This layer adds ambient light and component treatments rather than turning
 * every module into an opaque theme-coloured slab.
 */
body {
  background-color: color-mix(in srgb, var(--bg) 92%, #172033 8%);
}

.global-container {
  background-image:
    radial-gradient(circle at 13% 8%, rgb(99 199 255 / 13%), transparent 31rem),
    radial-gradient(circle at 71% 2%, rgb(143 114 255 / 10%), transparent 37rem),
    radial-gradient(circle at 88% 64%, rgb(240 68 212 / 7%), transparent 34rem),
    radial-gradient(circle at 38% 92%, rgb(244 202 128 / 3%), transparent 27rem);
  background-attachment: fixed;
}

/* Sidebar gets a branded cool/violet surface instead of near-black-on-black. */
.sidebar {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 82%, #1c2639 18%),
      color-mix(in srgb, var(--bg) 87%, #24172f 13%));
  border-right-color: color-mix(in srgb, var(--span) 18%, transparent);
  box-shadow: 18px 0 48px rgb(0 0 0 / 16%);
}

.sidebar:before {
  background:
    radial-gradient(circle at 12% 7%, rgb(99 199 255 / 9%), transparent 30%),
    radial-gradient(circle at 92% 34%, rgb(240 68 212 / 8%), transparent 34%);
}

.sidebar__header {
  border-bottom-color: color-mix(in srgb, var(--span) 18%, transparent);
}

.sidebar__header-text {
  color: color-mix(in srgb, var(--text-custom) 72%, var(--text-default) 28%);
}

.sidebar__toggle {
  background-color: color-mix(in srgb, var(--card) 88%, var(--span) 12%);
  border-color: color-mix(in srgb, var(--span) 18%, transparent);
}

.sidebal__item {
  color: color-mix(in srgb, var(--text-secondary) 60%, var(--text-default) 40%);
}

.sidebal__item:hover,
.sidebar__submenu.expanded {
  background-color: color-mix(in srgb, var(--span) 8%, transparent);
  border-color: color-mix(in srgb, var(--span) 20%, transparent);
  color: var(--text-default);
}

.sidebal__item.active {
  background-color: color-mix(in srgb, var(--card) 86%, var(--span) 14%);
  border-color: color-mix(in srgb, var(--span) 28%, transparent);
  color: color-mix(in srgb, var(--span) 72%, var(--text-default) 28%);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--span) 82%, transparent),
    0 8px 22px rgb(0 0 0 / 8%);
}

/*
 * SkinChanger: keep the body dark/neutral so it does not disappear into the
 * violet site palette. Identity comes from a cyan -> narrow violet -> hot-pink
 * neon edge plus brighter gradient text/icon.
 */
.sidebal__item.px-nav-skinchanger,
.dropbtn.px-nav-skinchanger {
  border: 1px solid transparent;
  background:
    linear-gradient(105deg,
      color-mix(in srgb, var(--bg) 84%, #101923 16%),
      color-mix(in srgb, var(--card) 94%, #11141c 6%)) padding-box,
    linear-gradient(100deg,
      #59d8ff 0%,
      #59d8ff 28%,
      #9b7cff 50%,
      #ff4fd8 72%,
      #ff4fd8 100%) border-box;
  box-shadow:
    inset 0 0 22px rgb(89 216 255 / 3%),
    0 0 0 1px rgb(255 79 216 / 2%);
}

.px-nav-skinchanger .sidebar__item-text,
.dropbtn.px-nav-skinchanger .desc_nav_item {
  background: linear-gradient(90deg,
    #59d8ff 0%,
    #59d8ff 26%,
    #9b7cff 50%,
    #ff4fd8 74%,
    #ff4fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: var(--font-weight-6);
}

.px-nav-skinchanger svg {
  fill: #68ddff !important;
  filter:
    drop-shadow(0 0 5px rgb(89 216 255 / 36%))
    drop-shadow(0 0 9px rgb(255 79 216 / 18%));
}

.sidebal__item.px-nav-skinchanger:hover,
.dropbtn.px-nav-skinchanger:hover,
.sidebal__item.px-nav-skinchanger.active,
.dropbtn.px-nav-skinchanger.active_btn {
  background:
    linear-gradient(105deg,
      color-mix(in srgb, var(--bg) 76%, #142434 24%),
      color-mix(in srgb, var(--card) 88%, #1a1523 12%)) padding-box,
    linear-gradient(100deg,
      #72e2ff 0%,
      #59d8ff 24%,
      #a58aff 49%,
      #ff68df 74%,
      #ff4fd8 100%) border-box;
  box-shadow:
    0 0 18px rgb(89 216 255 / 11%),
    0 0 24px rgb(255 79 216 / 9%),
    inset 0 0 26px rgb(155 124 255 / 7%);
}

/* Premium: restrained gold sheen rather than persistent glitter particles. */
.sidebal__item.px-nav-premium,
.dropbtn.px-nav-premium {
  position: relative;
  color: var(--money);
  background:
    linear-gradient(105deg,
      color-mix(in srgb, var(--money-bg) 88%, transparent),
      color-mix(in srgb, var(--card) 80%, var(--money) 20%));
  border-color: color-mix(in srgb, var(--money) 32%, transparent);
  overflow: hidden;
  isolation: isolate;
}

.px-nav-premium .sidebar__item-text,
.dropbtn.px-nav-premium .desc_nav_item {
  color: var(--money) !important;
  font-weight: var(--font-weight-7);
}

.px-nav-premium svg {
  fill: var(--money) !important;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--money) 32%, transparent));
}

.sidebal__item.px-nav-premium::after,
.dropbtn.px-nav-premium::after {
  content: '';
  position: absolute;
  inset: -40% -55%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 24%) 50%, transparent 58%);
  transform: translateX(-70%);
  animation: px-premium-sheen 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.sidebal__item.px-nav-premium > *,
.dropbtn.px-nav-premium > * {
  position: relative;
  z-index: 1;
}

.sidebal__item.px-nav-premium:hover,
.dropbtn.px-nav-premium:hover,
.sidebal__item.px-nav-premium.active,
.dropbtn.px-nav-premium.active_btn {
  color: var(--money);
  border-color: color-mix(in srgb, var(--money) 52%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--money) 10%, transparent),
    0 10px 28px color-mix(in srgb, var(--money) 11%, transparent);
}

@keyframes px-premium-sheen {
  0%, 58% { transform: translateX(-70%); opacity: 0; }
  64% { opacity: .85; }
  78% { transform: translateX(70%); opacity: 0; }
  100% { transform: translateX(70%); opacity: 0; }
}

/*
 * Home modules: v2 made these surfaces too opaque/grey. Use a dark glass
 * treatment instead so the PX ambient background is visible around and
 * faintly through the large blocks without hurting text contrast.
 */
.info-block__card:not(.small),
.image-slider,
.server_block,
.statistics_container,
.footer_global {
  background-color: color-mix(in srgb, var(--card) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--span) 14%, rgb(255 255 255 / 5%));
  box-shadow:
    0 14px 38px rgb(0 0 0 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 2.5%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
}

/* The empty/placeholder banner and slider should not read as big grey slabs. */
.info-block__card:not(.small),
.image-slider {
  background-image:
    linear-gradient(120deg,
      rgb(99 199 255 / 2.5%),
      transparent 42%,
      rgb(143 114 255 / 3.5%) 72%,
      rgb(240 68 212 / 2.5%));
}

/* Donor rows remain distinct, but no longer stack several layers of grey. */
.lk-top__title,
.lk-top__user-data {
  background-color: color-mix(in srgb, var(--button) 62%, transparent);
  border-color: color-mix(in srgb, var(--span) 11%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.lk-top__user-data:hover {
  background-color: color-mix(in srgb, var(--button-hover) 70%, transparent);
}

/* Statistics keep hierarchy through borders/light rather than solid fill. */
.statistics_container:not(.statistic__premium) {
  background-image: linear-gradient(135deg,
    rgb(99 199 255 / 3.5%),
    transparent 48%,
    rgb(143 114 255 / 4.5%));
}

.statistics_name {
  color: color-mix(in srgb, var(--text-secondary) 66%, var(--text-default) 34%);
}

.footer_global {
  background-image:
    radial-gradient(circle at 92% 25%, rgb(240 68 212 / 6%), transparent 26%),
    linear-gradient(110deg, rgb(99 199 255 / 5%), transparent 38%, rgb(143 114 255 / 4%));
}

.footer_sitename,
.footer-description,
.footer_links ul a {
  color: color-mix(in srgb, var(--text-secondary) 58%, var(--text-default) 42%);
}

.navbar:before {
  background: linear-gradient(90deg,
    transparent,
    rgb(99 199 255 / 18%) 27%,
    rgb(143 114 255 / 20%) 54%,
    rgb(240 68 212 / 15%) 78%,
    transparent);
}

/* Mobile Premium label keeps the same hierarchy without animation. */
.tabbar_mobile .px-mobile-premium {
  color: var(--money);
}

.tabbar_mobile .px-mobile-premium svg {
  fill: var(--money);
}

@media (max-width: 768px) {
  .global-container {
    background-image:
      radial-gradient(circle at 15% 4%, rgb(99 199 255 / 9%), transparent 22rem),
      radial-gradient(circle at 90% 55%, rgb(240 68 212 / 5%), transparent 25rem);
  }

  .info-block__card:not(.small),
  .image-slider,
  .server_block,
  .statistics_container,
  .footer_global {
    -webkit-backdrop-filter: blur(8px) saturate(108%);
    backdrop-filter: blur(8px) saturate(108%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebal__item.px-nav-premium::after,
  .dropbtn.px-nav-premium::after {
    animation: none;
    display: none;
  }
}


/* Home navigation: explicit location cue without competing with feature CTAs. */
.px-nav-home {
  margin-bottom: 0.45rem;
}

.px-nav-home svg {
  fill: currentColor;
}

.drpdwn_menu .px-nav-home,
.nav_header_menu .px-nav-home {
  margin-bottom: 0;
}

/*
 * PX home community row: donor ranking + live player reviews.
 * Reviews replace the unused stock banner-slider slot and use the same glass
 * language as the rest of the POKOLENIE-X theme.
 */
.px-home-community-row {
  align-items: stretch;
}

.px-home-community-row > [class*="col-"] {
  display: flex;
}

.px-home-community-row .lk-top__card,
.px-home-reviews {
  width: 100%;
  min-height: 300px;
}

.px-home-reviews {
  display: grid;
  grid-template-columns: minmax(190px, 0.95fr) minmax(0, 2.35fr);
  gap: 1rem;
  padding: 1rem;
  overflow: hidden;
  border-radius: var(--br-16);
  background:
    linear-gradient(135deg, rgb(89 216 255 / 3.5%), transparent 34%, rgb(255 79 216 / 3.5%)),
    color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--span) 15%, rgb(255 255 255 / 5%));
  box-shadow:
    0 14px 38px rgb(0 0 0 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 3%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
}

.px-home-reviews__header {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.25rem;
}

.px-home-reviews__heading h3 {
  margin: 0;
  color: var(--text-default);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-7);
}

.px-home-reviews__heading p {
  margin: 0.35rem 0 0;
  color: color-mix(in srgb, var(--text-secondary) 72%, var(--text-default) 28%);
  font-size: var(--font-size-s);
  line-height: 1.45;
}

.px-home-reviews__score {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.9rem;
}

.px-home-reviews__score strong {
  color: var(--span);
  font-size: 1.7rem;
  line-height: 1;
}

.px-home-reviews__stars,
.px-home-review-card__rating {
  display: inline-flex;
  gap: 0.08rem;
  color: color-mix(in srgb, var(--text-secondary) 35%, transparent);
  letter-spacing: 0.01em;
}

.px-home-reviews__stars .is-filled,
.px-home-review-card__rating .is-filled {
  color: var(--money);
  text-shadow: 0 0 10px color-mix(in srgb, var(--money) 18%, transparent);
}

.px-home-reviews__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.px-home-reviews__meta span {
  padding: 0.38rem 0.55rem;
  border-radius: var(--br-8);
  color: var(--text-custom);
  background: color-mix(in srgb, var(--button) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--span) 9%, transparent);
  font-size: var(--font-size-xs);
}

.px-home-reviews__meta strong {
  color: var(--text-default);
}

.px-home-reviews__actions {
  display: grid;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.9rem;
}

.px-home-reviews__button {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.7rem;
  border-radius: var(--br-8);
  color: var(--text-custom);
  background: color-mix(in srgb, var(--button) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--span) 11%, transparent);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-6);
  transition: var(--transition-ease-2);
}

.px-home-reviews__button:hover {
  color: var(--text-default);
  background: color-mix(in srgb, var(--button-hover) 82%, transparent);
  border-color: color-mix(in srgb, var(--span) 28%, transparent);
}

.px-home-reviews__button--accent {
  color: #fff;
  background: linear-gradient(100deg, rgb(89 216 255 / 20%), rgb(155 124 255 / 34%) 48%, rgb(255 79 216 / 22%));
  border-color: rgb(155 124 255 / 34%);
}

.px-home-reviews__list {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.px-home-review-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.8rem;
  border-radius: var(--br-12);
  background: color-mix(in srgb, var(--button) 56%, transparent);
  border: 1px solid color-mix(in srgb, var(--span) 9%, rgb(255 255 255 / 3%));
  transition: var(--transition-ease-2);
}

.px-home-review-card:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--button-hover) 62%, transparent);
  border-color: color-mix(in srgb, var(--span) 22%, transparent);
}

.px-home-review-card__top {
  display: grid;
  gap: 0.5rem;
}

.px-home-review-card__player {
  display: flex;
  min-width: 0;
  gap: 0.5rem;
  align-items: center;
  color: var(--text-default);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-7);
}

.px-home-review-card__player img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: cover;
  border-radius: var(--br-8);
  border: 1px solid color-mix(in srgb, var(--span) 15%, transparent);
}

.px-home-review-card__player span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.px-home-review-card__rating {
  font-size: 0.72rem;
}

.px-home-review-card p {
  display: -webkit-box;
  margin: 0.7rem 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--text-custom) 82%, var(--text-default) 18%);
  font-size: var(--font-size-s);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.px-home-review-card footer {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.px-home-review-card__likes {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.px-home-review-card__likes svg {
  width: 0.72rem;
  height: 0.72rem;
  fill: #ff6d9f;
}

.px-home-reviews__empty {
  grid-column: 1 / -1;
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: var(--br-12);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--button) 45%, transparent);
  text-align: center;
}

@media (max-width: 1200px) {
  .px-home-reviews {
    grid-template-columns: 1fr;
  }

  .px-home-reviews__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 970px) {
  .px-home-community-row > [class*="col-"] {
    display: block;
  }

  .px-home-reviews-col {
    margin-top: 1rem;
  }

  .px-home-reviews__list {
    grid-template-columns: 1fr;
  }

  .px-home-reviews,
  .px-home-community-row .lk-top__card {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .px-home-reviews__actions {
    grid-template-columns: 1fr;
  }
}

/* PX Reviews 3.10: interactive home likes + owner edit affordance */
.px-home-review-card.is-editable .px-home-review-card__top {
  padding-right: 2.1rem;
}

.px-home-review-card__edit {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--span) 20%, transparent);
  border-radius: var(--br-8);
  color: var(--text-custom);
  background: color-mix(in srgb, var(--button) 88%, transparent);
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}

.px-home-review-card__edit svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.px-home-review-card:hover .px-home-review-card__edit,
.px-home-review-card:focus-within .px-home-review-card__edit,
.px-home-review-card__edit:focus-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.px-home-review-card__edit:hover,
.px-home-review-card__edit:focus-visible {
  color: var(--text-default);
  border-color: color-mix(in srgb, var(--span) 48%, transparent);
  background: color-mix(in srgb, var(--span) 18%, var(--button));
  outline: none;
}

.px-home-review-card__likes {
  padding: 0.18rem 0.28rem;
  border: 0;
  border-radius: 999px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: color .18s ease, background .18s ease, transform .18s ease, opacity .18s ease;
}

.px-home-review-card__likes svg {
  transition: fill .18s ease, transform .18s ease;
}

.px-home-review-card__likes,
.px-home-review-card__likes:hover,
.px-home-review-card__likes.is-liked {
  color: var(--text-secondary);
  background: transparent;
}

.px-home-review-card__likes svg {
  fill: #fff;
  filter: none;
}

.px-home-review-card__likes:hover svg,
.px-home-review-card__likes:focus-visible svg {
  transform: scale(1.12);
}

.px-home-review-card__likes.is-liked svg {
  fill: #ff6d9f;
  filter: drop-shadow(0 0 5px rgb(255 109 159 / 24%));
}

.px-home-review-card__likes:focus-visible {
  color: var(--text-secondary);
  background: transparent;
  outline: 1px solid color-mix(in srgb, var(--span) 55%, transparent);
  outline-offset: 2px;
}

.px-home-review-card__likes:disabled {
  cursor: wait;
  opacity: .55;
}

@media (hover: none), (pointer: coarse) {
  .px-home-review-card__edit {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}