/* Профиль — вариант B «Обложка».
   Подключать ПОСЛЕ main.css и theme.css: <link rel="stylesheet" href="/css/profile-b-cover.css">
   Как профиль в соцсети: цветная обложка сверху, аватар наезжает на её нижний край,
   имя и роль справа от него, секции — отдельными плашками, действия — горизонтальными кнопками. */

.modal-profile {
  width: 560px; padding: 0 0 26px; border-radius: 24px; border-color: rgba(255, 255, 255, .08); background: #17112a;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
/* Обложка */
.modal-profile::before {
  content: ''; display: block; height: 132px; margin-bottom: 0;
  /* --profile-cover ставит js/profile.js (url выбранной пользователем обложки), иначе — стандартная */
  background:
    var(--profile-cover,
      repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 16px),
      linear-gradient(120deg, #4c1d95 0%, #7c3aed 45%, #db2777 100%));
  background-size: cover; background-position: center;
}
.modal-profile > :not(.profile-top):not(.profile-loader):not(.modal-close):not(.cover-pick):not(.cover-video) { margin-left: 28px; margin-right: 28px; }
.modal-profile .modal-close {
  top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; padding: 0; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; background: rgba(10, 6, 20, .45); backdrop-filter: blur(6px);
}
.modal-profile .modal-close:hover { background: rgba(10, 6, 20, .7); }

.profile-top { flex-wrap: wrap; align-items: flex-end; gap: 4px 18px; margin: -54px 28px 0; position: relative; }
.modal-profile .avatar {
  width: 108px; height: 108px; font-size: 44px; border: 5px solid #17112a; box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.modal-profile .avatar-edit { right: 2px; bottom: 2px; width: 30px; height: 30px; }
.profile-name { padding-bottom: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.profile-name h3 { font-size: 28px; letter-spacing: -.01em; }
.modal-profile .role-tag { margin-top: 0; align-self: center; }
.profile-tags { flex: 0 0 100%; margin-top: 10px; }

.profile-div { margin: 20px 28px; border-top-color: rgba(255, 255, 255, .07); }
/* Секции — плашки */
.profile-sec { margin-bottom: 12px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.profile-sec:last-of-type { margin-bottom: 12px; }
.profile-sec h4 { margin-bottom: 10px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #a78bfa; }
.profile-bio {
  margin: 0 0 10px; padding: 2px 0 2px 14px; background: none; border: 0; border-left: 3px solid var(--accent-light); border-radius: 0;
  font-size: 15.5px; line-height: 1.6; color: #e6e0f2;
}
.profile-bio::before, .profile-bio::after { content: none; }
.profile-sec .ghost-btn { margin-top: 2px; }

/* Нижние кнопки — выразительные плитки: у каждой свой цвет, значок в круглом «бейдже»,
   сверху значок, снизу подпись. Цвет задаёт --c, остальное считается от него. */
.profile-buttons { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
#btnRules { --c: #a78bfa; }
#btnSupport { --c: #38bdf8; }
#btnLogout { --c: #fbbf24; }
#btnDelete { --c: #f87171; }
.pbtn {
  --c: #a78bfa;
  flex-direction: column; justify-content: center; gap: 10px; min-height: 96px; padding: 14px 8px 12px; border-radius: 18px;
  color: #ddd6ea;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 15%, transparent), rgba(255, 255, 255, .03));
  border-color: color-mix(in srgb, var(--c) 30%, transparent);
}
.pbtn svg {
  box-sizing: content-box; width: 22px; height: 22px; padding: 11px; border-radius: 50%;
  color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent);
  transition: background .25s, color .25s, box-shadow .25s;
}
.pbtn span { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.pbtn:hover {
  color: #fff; border-color: var(--c);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 36%, transparent), color-mix(in srgb, var(--c) 10%, transparent));
}
.pbtn:hover svg { color: #17112a; background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 25%, transparent); }
/* «Удалить»: общий main.css красит danger-плитку при наведении сплошным красным — здесь тот же стеклянный градиент, как у остальных */
.modal-profile .pbtn.danger:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 36%, transparent), color-mix(in srgb, var(--c) 10%, transparent));
  border-color: var(--c); color: #fff;
}
/* Подтверждение удаления (армед) остаётся тёмно-красным */
.modal-profile .pbtn.danger.armed { background: #8f1d1d; border-color: #8f1d1d; color: #fff; }
.modal-profile .pbtn.danger.armed svg { background: rgba(255, 255, 255, .15); color: #fff; box-shadow: none; }

@media (max-width: 560px) {
  .modal-profile::before { height: 108px; }
  .modal-profile > :not(.profile-top):not(.profile-loader):not(.modal-close):not(.cover-pick):not(.cover-video) { margin-left: 18px; margin-right: 18px; }
  .profile-top { margin: -46px 18px 0; gap: 4px 14px; }
  .modal-profile .avatar { width: 92px; height: 92px; font-size: 38px; border-width: 4px; }
  .profile-name h3 { font-size: 24px; }
  .profile-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Телефон: имя встаёт ниже обложки, а не наезжает на неё, когда роль и кнопка уходят на вторую строку */
@media (max-width: 560px) {
  .profile-top { align-items: flex-start; }
  .profile-name { margin-top: 54px; padding-bottom: 0; flex: 1 1 140px; }
}

/* ---------- Анимации кнопок профиля ----------
   Только с мышью (@media hover): на телефоне после тапа ничего не «залипает».
   Блик гаснет на месте, жесты значков доигрываются до конца (класс .fx-play ставит js/btn-fx.js). */
@media (hover: hover) {
  .modal-profile { --pe: cubic-bezier(.3, .7, .3, 1); }

  /* Закрыть: поворот на 180° */
  .modal-profile .modal-close { transition: transform .35s var(--pe), background .2s; }
  .modal-profile .modal-close:hover { transform: rotate(180deg) scale(1.1); }
  .modal-profile .modal-close:active { transform: rotate(180deg) scale(.92); }

  /* Карандаши (аватар, ник): наклон и кольцо-свечение */
  .modal-profile .avatar-edit, .modal-profile .mini-btn {
    transition: transform .3s var(--pe), color .2s, border-color .2s, background-color .2s, box-shadow .25s ease;
  }
  .modal-profile .avatar-edit:hover, .modal-profile .mini-btn:hover {
    color: #fff; border-color: var(--accent-light); background-color: rgba(139, 44, 246, .3);
    box-shadow: 0 0 0 3px rgba(139, 44, 246, .22), 0 6px 16px rgba(139, 44, 246, .4);
  }
  .modal-profile .avatar-edit:hover { transform: scale(1.12) rotate(-12deg); }
  /* Квадратную кнопку ника не креним — вращается только карандаш внутри */
  .modal-profile .mini-btn:hover { transform: scale(1.1); }
  .modal-profile .mini-btn svg { transition: transform .3s var(--pe); }
  .modal-profile .mini-btn:hover svg { transform: rotate(-12deg); }

  /* Контурные кнопки: заливка выезжает слева */
  .modal-profile .ghost-btn {
    background-image: linear-gradient(90deg, rgba(139, 44, 246, .32), rgba(168, 85, 247, .14));
    background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
    transition: color .2s, border-color .2s, background-size .4s var(--pe), transform .25s var(--pe);
  }
  .modal-profile .ghost-btn:hover { background-size: 100% 100%; transform: translateY(-1px); border-color: rgba(168, 85, 247, .7); color: #fff; }
  .modal-profile .ghost-btn.danger { background-image: linear-gradient(90deg, rgba(224, 82, 82, .32), rgba(224, 82, 82, .12)); }
  .modal-profile .ghost-btn.danger:hover { background-image: linear-gradient(90deg, rgba(224, 82, 82, .32), rgba(224, 82, 82, .12)); border-color: #e05252; }
  .modal-profile .ghost-btn.danger.armed, .modal-profile .ghost-btn.danger.armed:hover { background-image: none; }

  /* «Сохранить» и плитки: блик + всплытие со свечением */
  .modal-profile .save-btn, .modal-profile .pbtn {
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform .25s var(--pe), box-shadow .25s ease, background .2s, border-color .2s, color .2s;
  }
  .modal-profile .save-btn::before, .modal-profile .pbtn::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .28) 50%, transparent 75%);
    transform: translateX(-130%); opacity: 0;
    transition: transform 0s linear .4s, opacity .3s ease;
  }
  .modal-profile .save-btn:hover::before, .modal-profile .pbtn:hover::before {
    transform: translateX(130%); opacity: 1; transition: transform .7s ease-out, opacity .05s linear;
  }
  .modal-profile .save-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(139, 44, 246, .5); }
  .modal-profile .pbtn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px color-mix(in srgb, var(--c) 38%, transparent); }
  .modal-profile .save-btn:active, .modal-profile .pbtn:active { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .08s; }

  /* У каждой плитки свой жест значка */
  .modal-profile .pbtn svg { transform-origin: 50% 60%; }
  html:not(.fx-js) #btnRules:hover svg, #btnRules.fx-play svg { animation: pbRules .6s var(--pe); }
  html:not(.fx-js) #btnSupport:hover svg, #btnSupport.fx-play svg { animation: pbHeadset .7s ease-in-out; }
  html:not(.fx-js) #btnLogout:hover svg, #btnLogout.fx-play svg { animation: pbExit .6s var(--pe); }
  html:not(.fx-js) #btnDelete:hover svg, #btnDelete.fx-play svg { animation: pbTrash .6s ease-in-out; transform-origin: 50% 90%; }
  @keyframes pbRules { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-4px) rotate(-9deg); } 60% { transform: translateY(0) rotate(6deg); } 100% { transform: rotate(0); } }
  @keyframes pbHeadset { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-14deg) scale(1.15); } 45% { transform: rotate(10deg) scale(1.1); } 70% { transform: rotate(-5deg) scale(1.04); } }
  @keyframes pbExit { 0% { transform: translateX(0); } 35% { transform: translateX(7px); } 60% { transform: translateX(-3px); } 100% { transform: translateX(0); } }
  @keyframes pbTrash { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-13deg); } 35% { transform: rotate(11deg); } 55% { transform: rotate(-8deg); } 72% { transform: rotate(4deg); } 88% { transform: rotate(-1.5deg); } }
}
@media (prefers-reduced-motion: reduce) {
  .modal-profile .save-btn::before, .modal-profile .pbtn::before { display: none; }
  .modal-profile .pbtn svg { animation: none !important; }
  .modal-profile .pbtn:hover, .modal-profile .save-btn:hover, .modal-profile .modal-close:hover, .modal-profile .ghost-btn:hover,
  .modal-profile .avatar-edit:hover, .modal-profile .mini-btn:hover, .modal-profile .mini-btn:hover svg,
  .modal-profile .modal-close:active, .modal-profile .save-btn:active, .modal-profile .pbtn:active { transform: none; }
  .modal-profile .ghost-btn { transition: color .2s, border-color .2s; }
}

/* ---------- Обложка профиля: выбор из инвентаря (как рамки аватара) ---------- */
.modal-profile .cover-pick {
  position: absolute; top: 14px; left: 14px; z-index: 2; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
  background: rgba(10, 6, 20, .45); border: 0; backdrop-filter: blur(6px);
  transition: background .2s, transform .3s cubic-bezier(.3, .7, .3, 1);
}
.modal-profile .cover-pick[hidden] { display: none; }
.modal-profile .cover-pick svg { width: 17px; height: 17px; }
.modal-profile .cover-pick:hover { background: rgba(10, 6, 20, .7); transform: scale(1.08); }
.cover-dock { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 28px 0; }
.cover-dock[hidden] { display: none; }
.cover-cell {
  width: 108px; height: 38px; padding: 0; overflow: hidden; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #100c1c; border: 1px solid var(--border); color: var(--muted); font-size: 11.5px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cover-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-cell:hover { border-color: #fff; transform: translateY(-1px); }
.cover-cell.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(139, 44, 246, .35); }
.cover-off span { padding: 0 6px; }
@media (max-width: 560px) {
  .cover-dock { margin-left: 18px; margin-right: 18px; }
}

/* Видео-обложка (js/profile.js, setCoverVideo): занимает место обложки, всё остальное — поверх */
.modal-profile .cover-video {
  position: absolute; left: 0; top: 0; width: 100%; height: 132px; object-fit: cover; z-index: 0;
  border-radius: 24px 24px 0 0; pointer-events: none; background: #1d1830;
}
.modal-profile .cover-video[hidden] { display: none; }
.modal-profile .profile-top { z-index: 1; }
.cover-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px) { .modal-profile .cover-video { height: 108px; } }