/* ============================================================
   CHINAZIUM — страница профиля игрока
   Компактная шапка: вся справочная информация в один экран,
   дальше сразу стена. Строится поверх css/site.css.
   ============================================================ */

.page-wrap{padding:104px 20px 30px; background:var(--bg);}

body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:var(--profile-background, none); background-size:cover;
  background-position:center; opacity:0; transition:opacity .35s;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(2,5,13,.7), var(--bg) 92%); opacity:0;
}
body.has-profile-background::before{opacity:.48;}
body.has-profile-background::after{opacity:1;}
body.has-profile-background .page-wrap,
body.has-profile-background .wall-sec{background:transparent;}

/* карточка — это <section>, снимаем с неё общий отступ секций */
section.profile-card{padding:0;}

/* ---------------- КНОПКА АККАУНТА В ШАПКЕ ---------------- */

.nav-account{display:flex; align-items:center; gap:10px;}
.nav-auth{padding:10px 20px; font-size:0.78rem;}
.nav-auth.is-in{
  background:rgba(var(--tint-rgb, 12,45,86),0.35);
  border-color:rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.45);
  color:var(--cyan-2);
}
.nav-auth .dot{
  width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan); flex-shrink:0;
}

/* ---------------- КАРТОЧКА ПРОФИЛЯ ---------------- */

.profile-card{
  position:relative;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:20px;
  align-items:stretch;
}

/* ---------------- ОФОРМЛЕНИЕ ПРОФИЛЯ ---------------- */
/* Вкладка справа: текст читается сверху вниз, сидит ниже середины —
   так она не спорит с карточкой профиля и не лезет под панель звука. */
.theme-open{
  position:fixed; z-index:80; right:0; top:auto; bottom:170px;
  display:flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-right:0; border-radius:14px 0 0 14px;
  padding:14px 10px; cursor:pointer;
  background:rgba(5,11,24,.9); color:var(--cyan-2);
  box-shadow:-8px 10px 30px rgba(0,0,0,.28);
  font:600 .74rem var(--font-mono); letter-spacing:.03em;
  writing-mode:vertical-rl;
  transition:background .2s, border-color .2s, padding .2s;
}
.theme-open:hover,
.theme-open:focus-visible{padding-left:13px; background:rgba(var(--tint-rgb, 12,45,86),.96); border-color:rgba(var(--theme-rgb, var(--glow-rgb, 71,197,255)),.55);}
.theme-panel{position:fixed; z-index:90; right:24px; top:88px; width:min(380px, calc(100vw - 32px)); max-height:calc(100vh - 110px); overflow:auto; padding:22px; box-shadow:0 24px 80px rgba(0,0,0,.55); border-color:rgba(var(--theme-rgb, var(--glow-rgb, 71,197,255)),.35);}
.theme-panel[hidden]{display:none;}
.theme-panel-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px;}
.theme-panel-head h2{margin-top:5px; color:var(--ink);}
.theme-close{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:1.25rem;}
.theme-switch{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); cursor:pointer;}
.theme-switch span{display:grid; gap:4px; color:var(--ink); font-size:.84rem;}.theme-switch small{color:var(--muted-2); font-size:.7rem;}
.theme-switch input{position:absolute; opacity:0; pointer-events:none;}.theme-switch i{position:relative; flex:none; width:42px; height:24px; border-radius:100px; background:rgba(111,134,172,.35); transition:.2s;}.theme-switch i::after{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; border-radius:50%; background:var(--muted); transition:.2s;}.theme-switch input:checked+i{background:var(--blue);}.theme-switch input:checked+i::after{transform:translateX(18px); background:var(--cyan-2);}
.theme-settings{transition:opacity .2s;}.theme-settings.is-disabled,.theme-background.is-disabled{opacity:.38; pointer-events:none;}
.theme-field{display:grid; gap:9px; margin-top:16px; color:var(--muted); font:500 .72rem var(--font-mono);}
.theme-color-row{display:flex; gap:10px; align-items:center;}.theme-color-row input{width:54px; height:38px; padding:2px; border:1px solid var(--line); border-radius:10px; background:var(--bg); cursor:pointer;}.theme-color-row output{color:var(--ink); letter-spacing:.05em;}
.theme-swatches{display:flex; gap:9px; flex-wrap:wrap;}
.theme-swatches button{
  position:relative;
  width:28px; height:28px; border-radius:50%;
  border:2px solid rgba(255,255,255,.28); background:var(--swatch);
  cursor:pointer; transition:transform .2s, border-color .2s, box-shadow .2s;
}
.theme-swatches button:hover{transform:scale(1.14);}
/* выбранный цвет виден сразу */
.theme-swatches button.is-active{
  border-color:#fff;
  box-shadow:0 0 0 2px rgba(2,5,13,.9), 0 0 0 4px var(--swatch), 0 0 16px -2px var(--swatch);
  transform:scale(1.1);
}
.theme-switch.compact{margin-top:8px;}.theme-input{width:100%; border:1px solid var(--line); border-radius:10px; padding:11px; background:rgba(2,5,13,.55); color:var(--ink); font:inherit;}.theme-upload{display:inline-flex; margin-top:10px; font-size:.72rem; padding:9px 13px;}
.theme-preview{height:92px; margin-top:10px; border:1px dashed rgba(var(--theme-rgb,var(--glow-rgb, 71,197,255)),.3); border-radius:12px; display:grid; place-items:center; background-size:cover; background-position:center; color:var(--muted-2); font-size:.7rem;}.theme-preview.has-image span{display:none;}
.theme-actions{display:flex; gap:8px; margin-top:18px;}.theme-actions .btn{padding:9px 16px; font-size:.74rem;}.theme-panel .pc-note{display:block; min-height:1em; margin-top:10px;}
@media(max-width:640px){
  .theme-panel{right:16px; top:76px; max-height:calc(100vh - 92px);}
  /* на телефоне — обычная горизонтальная кнопка, но выше панели звука */
  .theme-open{
    top:auto; right:12px; bottom:120px;
    border-right:1px solid var(--line); border-radius:100px;
    padding:9px 14px; writing-mode:horizontal-tb;
    transform:none;
  }
  .theme-open:hover,
  .theme-open:focus-visible{padding-right:14px;}
}

.pc-main,
.pc-side{
  position:relative;
  padding:22px 24px;
}

/* карточке нельзя обрезать содержимое: иначе подсказки ачивок
   срезаются краем блока */
.pc-main{overflow:visible;}
.pc-side{overflow:hidden;}

/* ---- левая часть: фото + ники ---- */

.pc-top{display:flex; gap:22px; align-items:flex-start;}
.pc-message{margin-top:16px;padding:10px 19px}

.pc-photo{
  position:relative; flex-shrink:0;
  width:132px; height:132px;
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(var(--theme-rgb, var(--edge-rgb, 30,94,159)), 0.55);
  background:
    radial-gradient(circle at 50% 25%, rgba(var(--glow-rgb, 71,197,255),0.16), transparent 60%),
    linear-gradient(180deg, rgba(var(--tint-rgb, 12,45,86),0.35), rgba(2,5,13,0.1));
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, box-shadow .3s;
}
.pc-photo:hover{border-color:rgba(var(--theme-rgb, var(--bright-rgb, 143,227,255)), 0.8); box-shadow:0 14px 34px -20px rgba(var(--soft-rgb, 100,169,214),0.6);}
.pc-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.pc-photo svg{width:44px; height:44px; opacity:0.3; color:var(--blue-light);}
.pc-photo::after{
  content:""; position:absolute; inset:8px; pointer-events:none;
  border:1px solid rgba(var(--theme-rgb, var(--bright-rgb, 143,227,255)), 0.25); border-radius:12px;
  transition:inset .3s, border-color .3s;
}
.pc-photo:hover::after{inset:6px; border-color:rgba(var(--theme-rgb, var(--bright-rgb, 143,227,255)), 0.6);}

.pc-id{min-width:0; padding-top:2px;}

.nick-1{
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  font-weight:700; line-height:1.1; margin-top:8px;
  background:linear-gradient(135deg, #ffffff 30%, var(--cyan-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  overflow-wrap:anywhere;
}
.nick-2{
  font-family:var(--font-mono); font-weight:600; font-size:0.78rem;
  color:var(--cyan); letter-spacing:0.02em; margin-top:7px;
}
.nick-2::before{content:'@'; opacity:0.6;}

.profile-desc{
  margin-top:12px; color:var(--muted); line-height:1.55; font-size:0.88rem;
}
.profile-quote{
  margin-top:10px; padding-left:11px;
  border-left:2px solid rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.5);
  font-family:var(--font-vcr); font-size:0.74rem; letter-spacing:0.03em;
  color:var(--cyan-2); line-height:1.6;
}

/* ---- строки с фактами ---- */

.pc-rows{
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.pc-row{display:flex; align-items:center; gap:12px; min-height:28px;}
.pc-row-label{
  flex-shrink:0; width:74px;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted-2);
}
.pc-row-body{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; flex:1;}

.game-chip{
  font-size:0.78rem; padding:5px 13px; border-radius:100px;
  border:1px solid rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.28); background:rgba(var(--tint-rgb, 12,45,86),0.28);
  color:var(--ink); transition:border-color .25s, transform .2s;
}
.game-chip:hover{border-color:var(--blue-light); transform:translateY(-2px);}

/* мини-плеер */
.pc-track{display:flex; align-items:center; gap:10px; min-width:0; flex:1;}
.pc-play{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.4);
  background:linear-gradient(135deg, rgba(var(--glow-rgb, 71,197,255),0.28), rgba(var(--edge-rgb, 30,94,159),0.35));
  color:var(--cyan-2); font-size:0.72rem; line-height:1;
  transition:background .2s, color .2s, transform .2s;
}
.pc-play:hover{background:var(--cyan); color:#051426; transform:scale(1.06);}
.pc-track-name{
  font-size:0.8rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pc-track.is-playing .pc-track-name{color:var(--cyan-2);}
.pc-track.is-missing .pc-track-name{color:var(--muted-2); font-style:italic;}

/* миниатюры галереи */
.pc-shots{display:flex; gap:8px; flex-wrap:wrap;}
.pc-shots img{
  width:46px; height:46px; object-fit:cover; display:block;
  border-radius:10px; cursor:zoom-in;
  border:1px solid rgba(var(--theme-rgb, var(--edge-rgb, 30,94,159)), 0.5);
  transition:transform .2s, border-color .2s;
}
.pc-shots img:hover{transform:translateY(-3px); border-color:var(--cyan);}

/* ---- правая часть: досье и цифры ---- */

.pc-side{display:flex; flex-direction:column; gap:16px;}
.pc-side-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.pc-side h2{font-size:1.15rem; color:var(--ink);}

.pc-bio{
  color:var(--muted); font-size:0.86rem; line-height:1.65;
  max-height:132px; overflow-y:auto; padding-right:6px;
}
.pc-bio p + p{margin-top:8px;}
.pc-bio::-webkit-scrollbar{width:4px;}
.pc-bio::-webkit-scrollbar-thumb{background:rgba(var(--soft-rgb, 100,169,214),0.35); border-radius:4px;}

.pc-stats{
  margin-top:auto;
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.pc-stat{
  padding:12px 14px; border-radius:14px;
  border:1px solid rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.22);
  background:rgba(var(--tint-rgb, 12,45,86),0.26);
  transition:border-color .25s, transform .2s;
}
.pc-stat:hover{border-color:rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.6); transform:translateY(-2px);}
.pc-stat .num{font-size:1.35rem; font-weight:700; color:var(--cyan-2); line-height:1.1;}
.pc-stat .label{margin-top:4px; font-size:0.68rem; color:var(--muted-2); line-height:1.35;}

@media (max-width:980px){
  .profile-card{grid-template-columns:1fr;}
  .pc-stats{grid-template-columns:repeat(4, 1fr);}
}
@media (max-width:640px){
  .page-wrap{padding-top:92px;}
  .pc-main, .pc-side{padding:20px 18px;}
  .pc-top{gap:16px;}
  .pc-photo{width:96px; height:96px;}
  .pc-stats{grid-template-columns:1fr 1fr;}
  .pc-row{align-items:flex-start; flex-direction:column; gap:6px;}
  .pc-row-label{width:auto;}
}

/* ---------------- ССЫЛКИ НА РАЗДЕЛЫ ---------------- */

.link-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.link-card{
  padding:22px 24px;
  display:flex; flex-direction:column; gap:8px;
  position:relative; overflow:hidden;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.link-card:hover{
  transform:translateY(-4px);
  border-color:rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.85);
  box-shadow:0 20px 44px -24px rgba(var(--soft-rgb, 100,169,214),0.5);
}
.link-card .link-icon{font-size:1.3rem;}
.link-card h3{font-size:1.05rem; color:#fff;}
.link-card p{color:rgba(238,245,255,0.6); font-size:0.85rem; line-height:1.55;}
.link-card .go{
  margin-top:4px;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.04em; color:var(--cyan-2);
}
@media (max-width:920px){ .link-cards{grid-template-columns:1fr;} }

/* ---------------- АЧИВКИ ---------------- */

/* ряд ачивок внутри карточки, на месте бывших кнопок */
.pc-ach{
  display:flex; flex-direction:column; gap:10px;
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line);
}
.ach-label{
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted-2);
}
.ach-list{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}

/* без плашки — только сама картинка */
.ach-item{
  position:relative;
  width:65px; height:65px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0;
  cursor:default; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.9,.25,1.1), filter .25s;
}
.ach-item:hover{
  transform:scale(1.28);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(var(--glow-rgb, 71,197,255),0.35));
  z-index:6;
}
.ach-item img{width:100%; height:100%; display:block; object-fit:contain;}

/* Блик по силуэту значка: сама картинка работает маской,
   поэтому светится только рисунок, а не квадрат вокруг него. */
.ach-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg,
    transparent 40%,
    rgba(255,255,255,0.2) 47%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0.2) 53%,
    transparent 60%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  background-position:170% 0;

  -webkit-mask:var(--ach-icon) center / contain no-repeat;
  mask:var(--ach-icon) center / contain no-repeat;

  pointer-events:none;
  mix-blend-mode:screen;
}

.ach-item:hover::after{
  animation:ach-shine 1.5s linear infinite;
}

@keyframes ach-shine{
  from { background-position:170% 0; }
  to   { background-position:-70% 0; }
}

/* Подсказка живёт прямо в body поверх всего: так её не срежет
   ни карточка, ни бегущая строка под ней. */
.ach-tip{
  position:fixed; z-index:9999;
  max-width:260px; white-space:nowrap;
  padding:8px 14px; border-radius:10px;
  background:rgba(2,5,13,0.97);
  border:1px solid rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.4);
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.9), 0 0 26px -14px rgba(var(--glow-rgb, 71,197,255),0.5);
  font-family:var(--font-display); font-weight:600; font-size:0.8rem; line-height:1.3; color:var(--ink);
  pointer-events:none;
  opacity:0; transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
}
.ach-tip.is-on{opacity:1; transform:translateY(0);}

@media (max-width:640px){
  .ach-list{gap:10px;}
  .ach-item{width:54px; height:54px;}
  .ach-item:hover{transform:scale(1.15);}
  .ach-item::after{display:none;}
}

/* ---------------- РЕДАКТОР ДОСЬЕ ---------------- */

.pc-side-head{gap:12px;}
.pc-edit{
  margin-left:auto;
  padding:5px 12px; border-radius:100px; cursor:pointer;
  border:1px solid rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.3); background:rgba(var(--tint-rgb, 12,45,86),0.35);
  color:var(--cyan-2); font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.06em;
  transition:background .2s, color .2s, border-color .2s;
}
.pc-edit:hover{background:var(--cyan); color:#051426; border-color:transparent;}

.pc-editor{display:flex; flex-direction:column; gap:14px;}
.pc-field{display:flex; flex-direction:column; gap:7px;}
.pc-field > span{
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted-2);
}
.pc-editor textarea,
.pc-editor input{
  width:100%; padding:10px 13px; border-radius:11px;
  border:1px solid rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.28);
  background:rgba(2,5,13,0.55);
  color:var(--ink); font-family:var(--font-display); font-size:0.86rem; line-height:1.55;
  outline:none; resize:vertical;
  transition:border-color .2s, box-shadow .2s;
}
.pc-editor textarea:focus,
.pc-editor input:focus{border-color:var(--blue-light); box-shadow:0 0 20px -8px rgba(var(--glow-rgb, 71,197,255),0.55);}
.pc-editor ::placeholder{color:var(--muted-2);}

.pc-plates{display:flex; flex-direction:column; gap:8px;}
.pc-plate{display:flex; gap:8px; align-items:center;}
.pc-plate input.val{flex:0 0 92px; text-align:center; font-weight:700; color:var(--cyan-2);}
.pc-plate input.lab{flex:1;}
.pc-plate-del{
  flex-shrink:0; width:28px; height:28px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.25); background:transparent; color:var(--muted-2);
  font-size:0.9rem; line-height:1;
  transition:background .2s, color .2s, border-color .2s;
}
.pc-plate-del:hover{background:#ff6b6b; color:#fff; border-color:transparent;}

.pc-plate-add{
  align-self:flex-start;
  padding:7px 14px; border-radius:100px; cursor:pointer;
  border:1px dashed rgba(var(--theme-rgb, var(--soft-rgb, 100,169,214)), 0.4); background:transparent;
  color:var(--cyan-2); font-family:var(--font-mono); font-size:0.68rem;
  transition:background .2s, border-color .2s;
}
.pc-plate-add:hover{background:rgba(var(--tint-rgb, 12,45,86),0.5); border-color:var(--cyan);}

.pc-editor-actions{display:flex; gap:8px; flex-wrap:wrap;}
.pc-editor-actions .btn{padding:9px 18px; font-size:0.76rem;}
.pc-note{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.02em; color:var(--muted-2);
  line-height:1.5;
}
.pc-note.is-ok{color:var(--cyan-2);}
.pc-note.is-error{color:#ffb4b4;}