/* ============================================================
   BIG BENIS GAME — профиль игрока
   Собран из BIG_BENIS_profile_assets_v1, текст остаётся живым.
   ============================================================ */

.screen--profile {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  padding: calc(var(--safe-top) + 1.1vh) 2.8% calc(var(--safe-bottom) + 11.6vh);
}

.profile-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #050b14 url("../assets/art/profile-background.png") center bottom / cover no-repeat;
}
.screen--profile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 24%, rgba(31, 49, 78, 0.22), transparent 43%),
    linear-gradient(180deg, rgba(3, 8, 16, 0.78), rgba(7, 15, 27, 0.34) 42%, rgba(2, 6, 13, 0.76));
}

.profile-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: clamp(4px, 0.55vh, 7px);
  min-height: 0;
  padding-bottom: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.profile-content::-webkit-scrollbar { display: none; }

/* заголовок */
.profile-head {
  display: grid;
  grid-template-columns: clamp(40px, 11vw, 58px) 1fr clamp(44px, 11vw, 58px);
  align-items: center;
  gap: 8px;
  padding: 0 1.2%;
}
.profile-head-trophy {
  width: 100%;
  max-height: clamp(42px, 7vh, 64px);
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.62));
}
.profile-title {
  margin: 0;
  text-align: center;
  font: 400 clamp(29px, 8.2vw, 44px)/1 var(--font-display);
  color: var(--gold-2);
  letter-spacing: 0.035em;
  text-shadow: 0 4px 0 #7a4300, 0 8px 14px #000;
}
.profile-title span { color: #f2eee7; text-shadow: 0 4px 0 #3b404b, 0 8px 14px #000; }
.profile-settings {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 150ms ease;
}
.profile-settings img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 6px #0009); }
.profile-settings:active { transform: rotate(22deg) scale(0.94); }

/* большая витрина: сцена запечена, персонаж и данные — отдельными слоями */
.profile-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1378 / 880;
  min-height: 0;
  overflow: hidden;
}
.profile-showcase {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 10px 11px rgba(0, 0, 0, 0.58));
}
.profile-stage {
  position: absolute;
  inset: 0 44% 0 0;
}
.profile-skin {
  position: absolute;
  left: 61%;
  bottom: 30.5%;
  width: auto;
  max-width: 67%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 9px rgba(0, 0, 0, 0.62));
  transition: opacity 180ms ease, transform 220ms ease;
}
.profile-skin.is-swapping { opacity: 0; transform: translateX(-50%) scale(0.82) rotate(-3deg); }

.profile-info {
  position: absolute;
  left: 56%;
  right: 4.2%;
  top: 9%;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
  font-family: var(--font-display);
  text-shadow: 0 3px 5px #000;
}
.profile-name { font-size: clamp(17px, 4.8vw, 25px); line-height: 1; color: #f4f0e9; letter-spacing: 0.03em; }
.profile-level { font-size: clamp(8px, 2.3vw, 12px); line-height: 1; color: #b9c0cf; }
.profile-level span { color: var(--purple); font-size: 1.4em; }
.profile-benis-label { margin-top: 2px; font-size: clamp(9px, 2.45vw, 13px); line-height: 1; color: #e9ecf2; }
.profile-benis { display: flex; align-items: baseline; gap: clamp(4px, 1.5vw, 9px); }
.profile-benis strong {
  color: var(--gold-2);
  font-weight: 400;
  font-size: clamp(33px, 9.4vw, 49px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-shadow: 0 4px 0 #764100, 0 8px 13px #000;
}
.profile-benis b { font-weight: 400; font-size: clamp(14px, 4vw, 22px); color: #eeeae2; }
.profile-chip {
  width: 100%;
  height: clamp(22px, 2.8vh, 25px);
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border: 1px solid rgba(93, 113, 151, 0.56);
  border-radius: clamp(6px, 1.6vw, 9px);
  background: linear-gradient(145deg, rgba(26, 39, 61, 0.93), rgba(7, 15, 27, 0.96));
  box-shadow: inset 0 1px rgba(180, 197, 228, 0.17), 0 4px 7px #0008;
  color: #e7e5e2;
  white-space: nowrap;
  font-size: clamp(7px, 1.9vw, 10px);
  line-height: 1;
}
.profile-chip img { width: clamp(16px, 3.8vw, 20px); height: clamp(16px, 3.8vw, 20px); object-fit: contain; }
.profile-chip b { color: var(--gold-2); font-weight: 400; font-size: 1.25em; }
.profile-chip--rank { color: #b7c1d7; font-size: clamp(8px, 2.05vw, 11px); letter-spacing: 0.01em; }

/* прогресс уровня */
.profile-xp {
  position: relative;
  min-height: clamp(66px, 8.5vh, 76px);
  display: grid;
  grid-template-columns: 14% minmax(0, 1fr);
  align-items: center;
  column-gap: 2%;
  padding: 1.5% 2.8%;
  margin-top: 8px;
}
.profile-xp-skin,
.pstat-skin,
.profile-button-skin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.profile-xp-skin { filter: drop-shadow(0 7px 8px #000a); }
.profile-xp-icon { position: relative; z-index: 1; width: 98%; max-height: 7vh; object-fit: contain; justify-self: center; }
.profile-xp-body { position: relative; z-index: 1; display: grid; gap: clamp(3px, 0.45vh, 5px); }
.profile-xp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font: 400 clamp(13px, 3.25vw, 17px)/1 var(--font-display);
  color: #ece8e1;
  text-shadow: 0 2px 4px #000;
}
.profile-xp-row b { color: var(--purple); font-weight: 400; font-size: 1.25em; }
.profile-xp-num { font-size: 0.86em; color: #b4bdd0; white-space: nowrap; }
.profile-xp-track { position: relative; height: clamp(12px, 1.7vh, 16px); overflow: hidden; }
.profile-xp-track > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.profile-xp-track i {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  width: calc(var(--w, 0%) - 4px);
  border-radius: 99px;
  background: url("../assets/profile/progress-fill-purple.webp") left center / 100% 100% no-repeat;
  box-shadow: 0 0 9px rgba(170, 55, 255, 0.55);
}

/* статистика 2x2 */
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4px, 1vw, 6px); }
.pstat {
  position: relative;
  min-height: clamp(58px, 7.55vh, 68px);
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr);
  align-items: center;
  gap: 3%;
  padding: 2.3% 5%;
}
.pstat-skin { filter: drop-shadow(0 5px 6px #0009); }
.pstat-icon { position: relative; z-index: 1; width: 98%; max-height: 6.3vh; object-fit: contain; justify-self: center; transform: translateY(-3px); filter: drop-shadow(0 3px 3px #000); }
.pstat > div { position: relative; z-index: 1; }
.pstat small {
  display: block;
  font: 400 clamp(10px, 2.55vw, 13px)/1 var(--font-display);
  color: #aeb8cc;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 3px #000;
}
.pstat b {
  display: block;
  margin-top: 2px;
  font: 400 clamp(19px, 5vw, 27px)/1 var(--font-display);
  color: var(--gold-2);
  text-shadow: 0 3px 0 #774100, 0 5px 8px #000;
  white-space: nowrap;
}

/* кнопки */
.profile-cta,
.profile-achievements {
  position: relative;
  width: 100%;
  min-height: clamp(51px, 6.6vh, 59px);
  display: grid;
  grid-template-columns: 20% 1fr 20%;
  place-items: center;
  padding: 0 4%;
  cursor: pointer;
  transition: transform 110ms ease, filter 110ms ease;
}
.profile-cta:active,
.profile-achievements:active { transform: translateY(2px) scale(0.992); filter: brightness(0.92); }
.profile-button-skin { filter: drop-shadow(0 6px 6px #0009); }
.profile-button-icon { position: relative; z-index: 1; grid-column: 1; height: clamp(29px, 4.5vh, 40px); max-width: 90%; object-fit: contain; }
.profile-cta span,
.profile-achievements span {
  position: relative;
  z-index: 1;
  grid-column: 2;
  font: 400 clamp(19px, 5vw, 27px)/1 var(--font-display);
  color: #f4eee3;
  text-shadow: 0 3px 0 #73501d, 0 5px 7px #000;
  white-space: nowrap;
}
.profile-achievements { min-height: clamp(42px, 5.45vh, 49px); margin-bottom: 7px; }
.profile-achievements .profile-button-icon { height: clamp(25px, 3.6vh, 32px); }
.profile-achievements span { color: #aeb8ca; font-size: clamp(16px, 4vw, 22px); text-shadow: 0 3px 4px #000; }

@media (max-height: 860px) {
  .profile-xp { min-height: 58px; margin-top: 5px; }
  .pstat { min-height: 50px; }
  .profile-cta { min-height: 44px; }
  .profile-achievements { min-height: 37px; margin-bottom: 5px; }
}

/* На коротких экранах сохраняем компактные размеры: док и герой не перекрываются. */
@media (max-height: 820px) {
  .profile-xp { min-height: 45px; margin-top: 3px; }
  .profile-xp-icon { width: 72%; }
  .pstat { min-height: 39px; }
  .pstat-icon { width: 72%; }
  .profile-cta { min-height: 35px; }
  .profile-achievements { min-height: 30px; margin-bottom: 3px; }
}

@media (max-height: 720px) {
  .profile-content { gap: 3px; }
  .profile-head { grid-template-columns: 38px 1fr 42px; }
  .profile-title { font-size: clamp(26px, 7.4vw, 38px); }
  .profile-hero { aspect-ratio: 1.72 / 1; }
  .profile-info { top: 8%; bottom: 6%; }
  .profile-chip { min-height: 25px; }
  .profile-xp { min-height: 43px; }
  .pstat { min-height: 37px; }
  .profile-cta { min-height: 33px; }
  .profile-achievements { min-height: 28px; }
}

@media (max-width: 360px) {
  .profile-chip { padding-inline: 4px; }
  .profile-benis strong { font-size: 38px; }
  .profile-benis b { font-size: 16px; }
  .profile-cta span { font-size: 18px; }
}

/* ============================================================
   Меню профиля: иконки 2-в-ряд, каждая ведёт на свою страницу
   ============================================================ */
.profile-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 2.4vw, 14px);
  margin-top: clamp(6px, 1.2vh, 12px);
}
.pmenu-item {
  position: relative;
  min-height: clamp(58px, 8.5vh, 82px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.6vh, 7px);
  padding: clamp(5px, 1vh, 9px);
  border: clamp(7px, 2vw, 11px) solid transparent;
  border-image: url("../assets/ui/card-9slice.webp") 70 fill / clamp(7px, 2vw, 11px) stretch;
  color: #e9ecf2;
  font: 400 clamp(12px, 3.3vw, 16px)/1 var(--font-display);
  letter-spacing: 0.03em;
  text-shadow: 0 2px 4px #000;
  cursor: pointer;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.4));
  transition: transform 110ms ease, filter 110ms ease;
}
.pmenu-item:active { transform: translateY(2px) scale(0.985); filter: brightness(0.93); }
.pmenu-item img { height: clamp(28px, 4.8vh, 42px); width: auto; object-fit: contain; filter: drop-shadow(0 3px 5px #000a); }
.pmenu-item span { white-space: nowrap; }
.pmenu-item--wide { grid-column: 1 / -1; flex-direction: row; gap: clamp(8px, 2.5vw, 14px); min-height: clamp(46px, 6.2vh, 60px); }
.pmenu-item--wide img { height: clamp(26px, 4.2vh, 36px); }

/* ============================================================
   Каркас подстраниц профиля (единый фон + шапка с «назад»)
   ============================================================ */
.screen--subpage {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  padding: calc(var(--safe-top) + 1.1vh) 3% calc(var(--safe-bottom) + 12vh);
}
.subpage-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #050b14 url("../assets/art/profile-background.png") center bottom / cover no-repeat;
}
.screen--subpage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 8, 16, 0.80), rgba(7, 15, 27, 0.36) 42%, rgba(2, 6, 13, 0.78));
}
.subpage-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  gap: clamp(8px, 1.6vh, 14px);
}
.subpage-head {
  display: grid;
  grid-template-columns: clamp(40px, 11vw, 52px) 1fr clamp(40px, 11vw, 52px);
  align-items: center;
  gap: 8px;
}
.subpage-back {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: url("../assets/ui/chip-9slice.svg") center / 100% 100% no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.45));
}
.subpage-back img { width: 44%; transform: scaleX(-1); filter: drop-shadow(0 2px 3px #000); }
.subpage-back:active { transform: translateY(1px) scale(0.95); }
.subpage-title {
  margin: 0;
  text-align: center;
  font: 400 clamp(23px, 6.6vw, 38px)/1 var(--font-display);
  color: var(--gold-2);
  letter-spacing: 0.035em;
  text-shadow: 0 4px 0 #7a4300, 0 8px 14px #000;
}
.subpage-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 14px);
}
.subpage-body::-webkit-scrollbar { display: none; }
.subpage-body .btn-gold { width: 100%; }
/* тоньше 9-slice рамка у карточек подстраниц — компактнее */
.subpage-body .card {
  border-width: clamp(7px, 1.8vw, 11px);
  border-image-width: clamp(7px, 1.8vw, 11px);
}
.subpage-note {
  margin: 4px 0 0;
  text-align: center;
  color: #8b93a5;
  font: 400 clamp(11px, 2.8vw, 14px)/1.3 var(--font-body);
}

/* статистика: строка «вчерашний рост» */
.stat-row {
  display: flex;
  align-items: center;
  gap: 3%;
  padding: clamp(6px, 1.2vh, 12px) 4%;
  color: #e9ecf2;
  font: 400 clamp(13px, 3.3vw, 18px)/1 var(--font-display);
}
.stat-row > img:first-child { height: clamp(26px, 4.6vh, 38px); width: auto; object-fit: contain; }
.stat-row span { flex: 1; letter-spacing: 0.02em; }
.stat-row b { display: flex; align-items: center; gap: 5px; color: var(--green); font-weight: 400; font-size: 1.15em; }
.stat-row-up { height: 0.9em; width: auto; }

/* достижения */
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 2vw, 12px); }
.ach-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: clamp(10px, 1.8vh, 16px) clamp(8px, 2vw, 12px);
  border-radius: clamp(12px, 3vw, 16px);
  border: 2px solid #2e3a52;
  background: linear-gradient(180deg, rgba(26, 39, 61, 0.9), rgba(9, 17, 30, 0.94));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 6px 12px rgba(0, 0, 0, 0.4);
}
.ach-item img { height: clamp(34px, 6vh, 50px); width: auto; object-fit: contain; filter: drop-shadow(0 3px 4px #000a); }
.ach-item b { font: 400 clamp(12px, 3.2vw, 16px)/1 var(--font-display); color: #f3eee4; }
.ach-item small { color: #9aa3b5; font: 700 clamp(9px, 2.4vw, 12px)/1.2 var(--font-body); }
.ach-item.is-locked { opacity: 0.5; filter: grayscale(0.7); }

/* друзья */
.friends-hero { display: flex; align-items: center; gap: 3%; padding: clamp(6px, 1.4vh, 12px) 3%; }
.friends-hero-icon { height: clamp(44px, 8vh, 64px); width: auto; object-fit: contain; }
.friends-hero-text { flex: 1; min-width: 0; }
.friends-hero-text h2 { margin: 0; font: 400 clamp(15px, 4vw, 22px)/1.1 var(--font-display); color: #f3eee4; text-shadow: 0 2px 4px #000; }
.friends-hero-text p { margin: 2px 0 0; color: #abb4c5; font: 400 clamp(11px, 2.8vw, 15px)/1.2 var(--font-body); }
.friends-count { color: var(--gold-2); font: 400 clamp(26px, 7vw, 40px)/1 var(--font-display); text-shadow: 0 3px 0 #7c4a00, 0 6px 10px #000; }

/* образы */
.skins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 2.4vw, 14px); }
.skin-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: clamp(8px, 1.6vh, 14px);
  aspect-ratio: 3 / 4;
  border-radius: clamp(12px, 3vw, 18px);
  border: 2px solid #2e3a52;
  background:
    radial-gradient(circle at 50% 82%, rgba(60, 80, 120, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(26, 39, 61, 0.9), rgba(9, 17, 30, 0.94));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 6px 12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.skin-card img { height: 76%; width: auto; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.55)); }
.skin-card span { font: 400 clamp(12px, 3.2vw, 16px)/1 var(--font-display); color: #e9ecf2; text-shadow: 0 2px 3px #000; }
.skin-card.is-selected { border-color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(255, 193, 55, 0.5), 0 6px 14px rgba(0, 0, 0, 0.5); }

/* задания */
.task-item { display: flex; align-items: center; gap: 3%; padding: clamp(6px, 1.2vh, 12px) 3.5%; }
.task-item > img:first-child { height: clamp(34px, 6vh, 48px); width: auto; object-fit: contain; }
.task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-text b { font: 400 clamp(13px, 3.4vw, 18px)/1 var(--font-display); color: #f3eee4; text-shadow: 0 2px 3px #000; }
.task-text small { color: #9aa3b5; font: 700 clamp(9px, 2.4vw, 12px)/1 var(--font-body); }
.task-reward { color: var(--gold-2); font: 400 clamp(16px, 4.4vw, 24px)/1 var(--font-display); text-shadow: 0 2px 4px #000; }
.task-reward mark { color: var(--green); background: none; }