/* ============================================================
   PROFILE — trang player công khai (layout kiểu Playerduo)
   ============================================================ */

/* ---- Header banner ---- */
.pf-banner { position: relative; overflow: hidden; padding: 22px; }
.pf-banner__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(500px 200px at 85% -40%, rgba(var(--cyan-rgb), .4), transparent),
    linear-gradient(120deg, #3A2566, #5B2A6B 55%, #7A2E5A);
  opacity: .85;
}
.pf-banner__main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.pf-banner__avatar {
  width: 104px; height: 104px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--orange-tint), var(--pink-hot));
  border: 4px solid rgba(var(--hl-rgb), .85);
  display: grid; place-items: center;
  font-size: 46px;
  overflow: hidden;
  box-shadow: 0 14px 34px -10px rgba(var(--shadow-rgb), .5);
}
.pf-banner__avatar img { width: 100%; height: 100%; object-fit: cover; }

.pf-banner__info { flex: 1; min-width: 260px; }
.pf-banner__name { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 800; margin-bottom: 5px; }
.pf-banner__id   { font-size: 12.5px; color: var(--ink-soft2); margin: 5px 0 4px; }
.pf-banner__id b { font-family: var(--font-mono); color: var(--on-accent); }

.pf-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; }
.pf-stat  { display: flex; flex-direction: column; }
.pf-stat b { font-size: 18px; font-weight: 800; line-height: 1.1; }
.pf-stat span { font-size: 11.5px; color: var(--ink-soft2); margin-top: 2px; }
/* Số liệu follow bấm được */
.pf-stat--btn {
  border: 0; background: none; cursor: pointer; text-align: left; padding: 2px 4px;
  border-radius: 9px; color: inherit; font-family: inherit; transition: var(--ease);
}
.pf-stat--btn:hover { background: rgba(var(--hl-rgb), .08); transform: translateY(-1px); }

/* Phân trang đánh giá */
.pf-reviews-more { margin-top: 14px; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.pager__btn {
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line-soft); background: var(--surface); color: var(--ink);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; transition: var(--ease);
}
.pager__btn:hover:not(:disabled) { border-color: var(--violet); transform: translateY(-1px); }
.pager__btn.is-active { background: var(--violet); border-color: var(--violet); color: var(--on-accent); }
.pager__btn:disabled { opacity: .4; cursor: default; }
.pager__dots { color: var(--faint); padding: 0 2px; }
.review__time { font-size: 11.5px; color: var(--faint); margin-top: 6px; }

/* Danh sách follow trong modal */
.pf-follow-list { display: flex; flex-direction: column; gap: 2px; max-height: 56vh; overflow-y: auto; margin-top: 4px; }
.pf-follow-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer; padding: 8px 10px; border-radius: 11px;
  color: var(--ink); font-family: inherit; transition: var(--ease);
}
.pf-follow-item:hover { background: var(--surface2); }
.pf-follow-item__av {
  width: 38px; height: 38px; border-radius: 11px; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center; font-size: 17px;
  background: linear-gradient(135deg, var(--violet2), var(--cyan));
}
.pf-follow-item__av img { width: 100%; height: 100%; object-fit: cover; }
.pf-follow-item__name { font-size: 14px; font-weight: 700; }

.pf-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Body grid ---- */
.pf-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);   /* minmax(0,…) — không cho tab/nội dung ép nở cột */
  gap: 18px;
  margin-top: 18px;
}
.pf-left, .pf-right { display: flex; flex-direction: column; }

/* ---- Showcase (cột trái) ---- */
.pf-showcase {
  position: relative;
  height: 300px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, #2A2456, #3A2160);
  display: grid; place-items: center;
}
.pf-showcase__emoji { font-size: 96px; filter: drop-shadow(0 6px 16px rgba(var(--shadow-rgb), .5)); }
.pf-showcase__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

/* Dải thumbnail ảnh hồ sơ (có nút tiến/lùi) */
.pf-thumbs-wrap { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.pf-thumbs-wrap[hidden] { display: none; }
/* 2 nút ủng hộ song song: Donate (Xu) · Tặng quà (vật phẩm) */
.pf-give { display: flex; gap: 8px; }
.pf-give .btn { flex: 1; }
.pf-thumbs {
  display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; flex: 1;
}
.pf-thumbs::-webkit-scrollbar { display: none; }
.pf-thumb {
  flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; transition: border-color var(--ease);
}
.pf-thumb.is-active { border-color: var(--pink); }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; }

.pf-thumbs__nav {
  flex: none; width: 26px; height: 52px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface2); color: var(--ink);
  font-size: 18px; cursor: pointer; transition: border-color var(--ease);
}
.pf-thumbs__nav:hover { border-color: var(--pink); }
.pf-showcase__tag {
  position: absolute; top: 12px; left: 12px;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: var(--on-accent); font-weight: 700; font-size: 12px;
  padding: 4px 12px; border-radius: 20px; z-index: 2;
}

.pf-join { font-size: 13px; color: var(--muted); }
.pf-join b { color: var(--ink); }

.pf-about { margin: 0; white-space: pre-line; line-height: 1.7; color: var(--ink-soft); font-size: 13.5px; word-break: break-word; }
.pf-about img { max-width: 100%; }
.pf-sched { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.pf-tags  { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pf-tags span {
  font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 9px;
  background: var(--surface2); border: 1px solid var(--line); color: var(--cyan);
}

/* ---- Game tab ---- */
.pf-games {
  display: flex; gap: 12px;
  overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: none;
}
.pf-games::-webkit-scrollbar { display: none; }
.pf-game-card {
  flex: none;
  width: 120px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--surface);
  transition: border-color var(--ease), transform var(--ease);
}
.pf-game-card:hover { transform: translateY(-3px); }
.pf-game-card.is-active { border-color: var(--pink); }
.pf-game-card__img {
  height: 70px; display: grid; place-items: center; font-size: 34px;
  background: linear-gradient(135deg, #3A2160, #5B2350);
}
.pf-game-card__img .game-ico { width: 44px; height: 44px; border-radius: 11px; }
.pf-game-card__name { padding: 8px 10px; font-size: 12.5px; font-weight: 700; text-align: center; }

.pf-selected {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 14px 0;
  padding: 14px 16px; border-radius: 14px;
  background: var(--surface2); border: 1px solid var(--line);
}
.pf-selected__name  { font-weight: 800; font-size: 16px; }
.pf-selected__price { font-family: var(--font-mono); font-weight: 800; font-size: 20px; color: var(--gold); margin-top: 2px; }
.pf-selected__price small { font-size: 12px; color: var(--muted); }

.pf-skill {
  min-height: 220px; border-radius: 14px;
  display: grid; place-items: center; font-size: 90px;
  background: linear-gradient(160deg, #1E2A55, #2A1B52);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
/* Lưới 3 ảnh kỹ năng theo thứ tự */
.pf-skill--grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 8px; place-items: stretch;
  background: transparent; border: 0; min-height: 0;
}
.pf-skill__tile { aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; cursor: zoom-in; border: 1px solid var(--line-soft); }
.pf-skill__tile img { width: 100%; height: 100%; object-fit: cover; }

.pf-detail { margin-top: 14px; }
.pf-detail__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px;
}
.pf-detail__row > span { color: var(--muted); flex-shrink: 0; }
.pf-detail__row b { color: var(--ink); text-align: right; }
.pf-detail__row .voice-player { margin: 0; flex: 1; max-width: 320px; }

/* ---- Stories tab (kho story) ---- */
.pf-stories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pf-stories__empty, .pf-empty { color: var(--faint); padding: 18px 0; font-size: 13.5px; }

.pf-story-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line-soft);
  background: rgba(var(--shadow-rgb),1);
  transition: transform var(--ease);
}
.pf-story-tile:hover { transform: translateY(-3px); }
.pf-story-tile img,
.pf-story-tile video { width: 100%; height: 100%; object-fit: cover; }
.pf-story-tile__stats {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px; justify-content: center;
  padding: 14px 6px 6px;
  font-size: 11.5px; font-weight: 600; color: var(--on-accent);
  background: linear-gradient(180deg, transparent, rgba(var(--shadow-rgb), .75));
}

@media (max-width: 900px) { .pf-stories { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .pf-stories { grid-template-columns: repeat(2, 1fr); } }

/* ---- Rating tags ---- */
.pf-rate-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pf-rate-tags span {
  font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 9px;
  background: rgba(var(--gold-rgb), .1); border: 1px solid rgba(var(--gold-rgb), .25); color: var(--gold);
}

/* ---- Voice sample player (giữ lại) ---- */
.voice-player {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--surface2); border: 1px solid var(--line);
}
.voice-player__btn {
  width: 42px; height: 42px; border-radius: 50%; border: 0; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cyan), var(--cyan2)); color: var(--on-cyan);
  font-size: 16px; display: grid; place-items: center;
  box-shadow: 0 8px 20px -8px rgba(var(--cyan-rgb), .7); transition: filter var(--ease);
}
.voice-player__btn:hover { filter: brightness(1.1); }
.voice-player__wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 30px; }
.voice-player__wave span {
  flex: 1; background: linear-gradient(180deg, var(--cyan), var(--violet));
  border-radius: 3px; opacity: .5;
}
.voice-player.is-playing .voice-player__wave span { animation: wave-bounce 1s ease-in-out infinite; opacity: .9; }
.voice-player__dur { color: var(--muted); font-size: 12.5px; flex-shrink: 0; }

/* ---- Reviews ---- */
.reviews { display: flex; flex-direction: column; }
.review { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.review:first-of-type { border-top: 0; }
.review__av {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(135deg, var(--violet2), var(--cyan));
}
.review__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review__name  { font-weight: 700; font-size: 13.5px; }
.review__stars { color: var(--gold); font-size: 12px; }
.review__dur   { color: var(--faint); font-size: 11.5px; }
.review__tags  { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0; }
.review__tags span {
  font-size: 10.5px; padding: 2px 8px; border-radius: 7px;
  background: var(--surface2); border: 1px solid var(--line-soft); color: var(--muted);
}
.review__text  { color: #CFC9F0; font-size: 13.5px; line-height: 1.6; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .pf-body { grid-template-columns: minmax(0, 1fr); }
  .pf-stories { grid-template-columns: repeat(3, 1fr); }
}
/* ---- 📱 Mobile: avatar TRÁI + tên/thông tin PHẢI · stats lưới 3 cột · nút full-width ---- */
@media (max-width: 720px) {
  .pf-banner { padding: 16px 14px; }
  .pf-banner__main { gap: 13px; align-items: flex-start; }
  .pf-banner__avatar { width: 82px; height: 82px; font-size: 38px; border-width: 3px; }
  .pf-banner__info { min-width: 0; flex: 1; }
  .pf-banner__name { font-size: 19px; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
  .pf-banner__id { font-size: 12px; }

  /* 5 số liệu → lưới 3 cột gọn, nằm dưới tên (tràn xuống dưới avatar tự nhiên) */
  .pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px; margin-top: 10px; }
  .pf-stat, .pf-stat--btn { padding: 0; }
  .pf-stat b { font-size: 16px; }
  .pf-stat span { font-size: 10.5px; }

  /* Nút hành động full-width 2 cột — to, dễ bấm */
  .pf-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 4px; }
  .pf-banner__actions .btn { width: 100%; padding: 12px 8px; }

  /* Tab Chọn Game/Donate/Story: 1 hàng cuộn ngang (hết wrap 2 tầng) */
  #pfTabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #pfTabs::-webkit-scrollbar { display: none; }
  #pfTabs .itab { white-space: nowrap; flex-shrink: 0; }

  /* Khối trang trí thấp lại — đỡ chiếm màn cuộn */
  .pf-showcase { height: 150px; }
  .pf-showcase__emoji { font-size: 56px; }
  .pf-skill { min-height: 120px; font-size: 48px; }
}

/* ============================================================
   NEBULA 2.0 — skin Hồ Sơ Player (1 DOM · CSS-only theo theme).
   Neon & theme khác GIỮ NGUYÊN (rule gốc ở trên). profile.js KHÔNG đổi.
   Full-bleed top-nav qua .app.is-neb (main.js NEB_SCREENS thêm 'profile').
   Cấu trúc DOM đã khớp mẫu → chỉ tô lại chất liệu/bố cục, KHÔNG tách 2 bản.
   ============================================================ */

/* Wrap: căn giữa 1180 như mẫu (ghi đè full-bleed .screen của is-neb) */
:root[data-theme="nebula"] .app.is-neb #content > #profile.screen {
  max-width: 1180px; margin: 0 auto; padding: 26px 30px 90px;
}

/* Thẻ .card trong profile → chất liệu glass Nebula (chỉ trong #profile) */
:root[data-theme="nebula"] #profile .card {
  background: linear-gradient(180deg, rgba(var(--hl-rgb), .055), rgba(var(--hl-rgb), .02));
  border: 1px solid rgba(var(--hl-rgb), .1);
  box-shadow: inset 0 1px 0 rgba(var(--hl-rgb), .08), 0 18px 40px -22px rgba(var(--shadow-rgb), .55);
  border-radius: 18px;
}

/* --- Banner: cover 150px trên · thanh info kính · avatar bo-vuông đè lên seam --- */
:root[data-theme="nebula"] #profile .pf-banner {
  padding: 0; display: flex; flex-direction: column; border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(var(--hl-rgb), .08), 0 24px 50px -26px rgba(var(--shadow-rgb), .6);
}
:root[data-theme="nebula"] #profile .pf-banner__bg {
  position: relative; inset: auto; height: 150px; opacity: 1;
  background:
    radial-gradient(500px 200px at 85% -30%, rgba(var(--cyan-rgb), .4), transparent),
    linear-gradient(120deg, rgba(var(--violet-rgb), .55), rgba(var(--pink-rgb), .42));
  background-size: cover; background-position: center; background-repeat: no-repeat;   /* ảnh bìa thật (JS set) — lấy giữa, phủ vừa */
}
:root[data-theme="nebula"] #profile .pf-banner__main {
  background: rgba(var(--hl-rgb), .03); padding: 0 26px 22px; align-items: flex-end; gap: 20px;
}
:root[data-theme="nebula"] #profile .pf-banner__avatar {
  width: 108px; height: 108px; border-radius: 24px; margin-top: -44px; z-index: 2;
  /* KHÔNG viền mặc định — khung chỉ hiện khi user mua & trang bị (frame); bóng nhẹ tạo chiều sâu */
  border: 0; box-shadow: 0 12px 30px -14px rgba(var(--shadow-rgb), .55);
}
/* Bỏ dòng thanh kinh nghiệm ở banner (giữ huy hiệu Lv cạnh tên) */
:root[data-theme="nebula"] #profile #pfLevelBar { display: none; }
/* Đồng bộ nền kính cho hàng "Người ủng hộ hàng đầu" */
:root[data-theme="nebula"] #profile .pf-donor {
  background: rgba(var(--hl-rgb), .04); border-color: rgba(var(--hl-rgb), .08);
}
:root[data-theme="nebula"] #profile .pf-banner__info    { padding-top: 16px; }
:root[data-theme="nebula"] #profile .pf-banner__actions { padding-top: 16px; align-items: center; }

/* 2-col: cột trái 340 như mẫu */
:root[data-theme="nebula"] #profile .pf-body { grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: start; }

/* Bề mặt phụ → kính trong (đồng nhất chất liệu Nebula) */
:root[data-theme="nebula"] #profile .pf-showcase,
:root[data-theme="nebula"] #profile .pf-skill { border: 1px solid rgba(var(--hl-rgb), .1); }
:root[data-theme="nebula"] #profile .pf-selected,
:root[data-theme="nebula"] #profile .voice-player {
  background: rgba(var(--hl-rgb), .04); border: 1px solid rgba(var(--hl-rgb), .09);
}

/* Game cards → chip gọn ngang (icon + tên), active viền tím (đúng ngôn ngữ Nebula) */
:root[data-theme="nebula"] #profile .pf-games { gap: 10px; flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
:root[data-theme="nebula"] #profile .pf-game-card {
  width: auto; border-radius: 12px; border: 1px solid rgba(var(--hl-rgb), .1);
  background: rgba(var(--hl-rgb), .04); padding: 10px 15px; display: flex; align-items: center; gap: 9px;
}
:root[data-theme="nebula"] #profile .pf-game-card.is-active { border-color: var(--violet); background: rgba(var(--violet-rgb), .14); }
:root[data-theme="nebula"] #profile .pf-game-card__img { height: auto; width: auto; background: none; font-size: 18px; }
:root[data-theme="nebula"] #profile .pf-game-card__img .game-ico,
:root[data-theme="nebula"] #profile .pf-game-card__img img,
:root[data-theme="nebula"] #profile .pf-game-card__img svg { width: 22px; height: 22px; border-radius: 7px; }
:root[data-theme="nebula"] #profile .pf-game-card__name { padding: 0; font-size: 13.5px; text-align: left; }

/* Nút chính Nebula: Thuê ngay = tím đặc · Donate = hồng đặc (phân cấp donate) */
:root[data-theme="nebula"] #profile #pfHireBtn { background: var(--violet); border-color: var(--violet); color: var(--on-accent); }
:root[data-theme="nebula"] #profile #pfDonateBtn { background: var(--pink); border-color: var(--pink); color: var(--on-accent); }

/* Nút hành động banner: 3 nút ĐỒNG BỘ kính · TRÒ CHUYỆN lên đầu + nhấn tím (nổi hơn 1 chút) */
:root[data-theme="nebula"] #profile #pfChatBtn { order: -1; }
:root[data-theme="nebula"] #profile #pfFollowBtn,
:root[data-theme="nebula"] #profile #pfChatBtn,
:root[data-theme="nebula"] #profile #pfShareBtn {
  border-radius: 11px; padding: 11px 16px; font-weight: 600; font-size: 14px;
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .14); color: var(--ink);
  box-shadow: none;   /* khử bóng hồng của .btn base — 3 nút phẳng/kính đồng bộ */
  transition: background var(--ease), border-color var(--ease);
}
:root[data-theme="nebula"] #profile #pfFollowBtn:hover,
:root[data-theme="nebula"] #profile #pfShareBtn:hover { background: rgba(var(--hl-rgb), .1); }
:root[data-theme="nebula"] #profile #pfChatBtn {
  background: rgba(var(--violet-rgb), .2); border-color: rgba(var(--violet-rgb), .38); color: #fff;
}
:root[data-theme="nebula"] #profile #pfChatBtn:hover { background: rgba(var(--violet-rgb), .3); }

/* Tag thể loại ô giới thiệu → kính + chữ tím-nhạt (đồng bộ accent, bỏ cyan chỏi) */
:root[data-theme="nebula"] #profile .pf-tags span {
  background: rgba(var(--hl-rgb), .05); border-color: rgba(var(--hl-rgb), .1); color: var(--violet-tint);
}

/* Tab hồ sơ → pill chuẩn Nebula (bỏ viền hồng base, đồng bộ account/feed/auth) */
:root[data-theme="nebula"] #pfTabs .itab {
  border-radius: 100px; padding: 9px 16px; font-weight: 500;
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .09); color: var(--ink-soft);
}
:root[data-theme="nebula"] #pfTabs .itab.is-active {
  background: var(--violet-tint); border-color: transparent; color: var(--bg); font-weight: 600;
}

/* Mobile: về 1 cột (override thắng specificity của rule nebula 340px ở trên) */
@media (max-width: 900px) {
  :root[data-theme="nebula"] #profile .pf-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :root[data-theme="nebula"] .app.is-neb #content > #profile.screen { padding: 22px 16px 64px; }
  :root[data-theme="nebula"] #profile .pf-banner__main { padding: 0 16px 18px; }
  :root[data-theme="nebula"] #profile .pf-banner__avatar { width: 84px; height: 84px; border-radius: 20px; margin-top: -38px; }
}