/* ============================================================
   Редизайн Belotche — profile. Зарежда се след screens.css и games.css.
   Профил (Figma „10 · Профил" 70:1798, „46 · Профил — персонализиране" 108:38518)
   и Настройки (Figma „32 · Настройки" 96:34944).
   Движи се само transform / opacity / box-shadow; Настройки → Анимации спира всичко.
   ============================================================ */

/* ================= ПРОФИЛ ================= */
.pf { display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin: 0 auto; }
.pf h3 { margin: 0 0 12px; font-size: 1.125rem; line-height: 1.33; font-weight: 700; letter-spacing: 0; }   /* H3 18/24 */

/* --- заглавие: „Профил" + споделяне + настройки --- */
.pf-head { display: flex; align-items: center; gap: 12px; }
.pf-head h1 { flex: 1; margin: 0; font-size: 1.375rem; line-height: 1.27; font-weight: 700; letter-spacing: -.2px; }  /* H2 22/28 */
.pf-head-act { display: flex; gap: 12px; }
.pf-head .iconbtn {
  width: 40px; height: 40px; border-radius: 14px; background: var(--surface); font-size: 20px;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pf-head .iconbtn:hover, .pf-head .iconbtn:focus-visible { border-color: var(--brand-line); box-shadow: var(--glow-sm); }
.pf-head .iconbtn:active { transform: scale(.9); }
.pf-gear .bi { transition: transform var(--dur-4) var(--ease-spring); }
.pf-gear:hover .bi, .pf-gear:focus-visible .bi { transform: rotate(90deg); }

/* --- банер --- */
.pf-hero { position: relative; }
.pf-banner {
  height: 150px; margin: 0; border-radius: var(--r-xl); position: relative; overflow: hidden;
  display: block; font-size: 1rem; color: inherit;
  background-size: cover; background-position: center; box-shadow: var(--shadow-card);
  animation: pfBannerIn .8s var(--ease-out) both;
}
/* Долу банерът се стопява във фона, за да „седне" аватарът върху него (Figma „Фон горе"). */
.pf-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg) 72%, transparent));
}
.pf-banner-art { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-size: 2rem; line-height: 1; opacity: .85; }
.pf-suits { position: absolute; inset: 40px 0 auto; display: flex; justify-content: space-around; opacity: .18; pointer-events: none; }
.pf-suits .suit { width: 40px; height: 40px; }
.pf-banner .edit {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 12px;
  border-radius: 14px; border: 1px solid transparent; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--text);
  font-size: .8125rem; line-height: 18px; font-weight: 600;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pf-banner .edit .bi { color: var(--brand); font-size: 16px; }
.pf-banner .edit:hover, .pf-banner .edit:focus-visible { border-color: var(--brand-line); box-shadow: var(--glow-sm); }
.pf-banner .edit:active { transform: scale(.95); }

/* --- аватар в пръстена на нивото --- */
.pf-ava-wrap {
  position: relative; left: auto; bottom: auto; transform: none;
  width: max-content; margin: -66px auto 0; z-index: 1;
}
.pf-ring {
  --pct: 0;
  position: relative; isolation: isolate; width: 124px; height: 124px;
  display: grid; place-items: center; border-radius: 50%; background: var(--bg);
}
/* Сияние зад аватара (Figma „Сияние") — диша бавно */
.pf-ring::before {
  content: ""; position: absolute; inset: -46px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 30%, transparent), transparent);
  animation: pfGlow 3.4s ease-in-out infinite;
}
/* Вълна от пръстена навън — като ореола на главния бутон */
.pf-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  animation: pfHalo 3s var(--ease-out) 1.4s infinite;
}
/* Пръстенът: лайм дъга = опит до следващото ниво, останалото е тъмна писта */
.pf-ring-arc {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--pct) * 1%), var(--surface-2) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 5px));
  animation: pfRingIn 1s var(--ease-out) .15s both;
}
.pf-ring .ava {
  --size: 100px; color: var(--text); cursor: pointer; z-index: 1;
  transition: transform var(--dur-2) var(--ease-spring);
}
.pf-ring .ava:not([data-frame]) { border-color: transparent; box-shadow: none; }
.pf-ring .ava:hover { transform: scale(1.04); }
.pf-ring .ava:active { transform: scale(.95); }
.pf-ring .ava:focus-visible { outline: 3px solid var(--brand); outline-offset: 5px; }
/* „+" — смяна на снимката (Figma 46) */
.pf-plus {
  position: absolute; right: -8px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-content: center; font-size: 16px;
  background: var(--brand); color: var(--brand-ink); border: 3px solid var(--bg); box-shadow: var(--glow-sm);
}
/* „НИВО 24" под аватара (Figma „Ниво", Етикет 11) */
.pf-lvl.lvl {
  position: absolute; left: 0; right: 0; bottom: -12px; top: auto; margin: 0 auto; width: max-content; min-width: 0; z-index: 2;
  padding: 3px 10px; border: 3px solid var(--bg); border-radius: 12px;
  background: var(--brand); color: var(--brand-ink); box-shadow: var(--glow-sm);
  font-size: .6875rem; line-height: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
  animation: pfPop .6s var(--ease-spring) .55s both;
}

/* --- име и титла --- */
.pf-name { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 6px; text-align: center; }
.pf-name .n { margin: 0; font-size: 1.75rem; line-height: 1.21; font-weight: 800; letter-spacing: -.3px; overflow-wrap: anywhere; }  /* H1 28/34 */
.pf-title { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: .8125rem; line-height: 18px; font-weight: 600; }
.pf-title .bi { font-size: 16px; }

/* --- опит --- */
.pf-xp { margin: 0; }
.pf-xp-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px;
  font-size: .8125rem; line-height: 18px; font-weight: 500;
}
.pf-xp-row b { color: var(--brand); font-weight: 700; }
.pf-xp-row .dim { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pf-xp .bar { height: 8px; border-radius: 4px; background: var(--line); }
/* Лентата се пълни при влизане, после през нея минава отблясък */
.pf-xp .bar > i, .pf-game .bar > i {
  position: relative; overflow: hidden; transform-origin: 0 50%; transition: none;
  animation: pfFill 1.2s var(--ease-out) .35s both;
}
.pf-game .bar > i { animation-duration: 1s; animation-delay: .5s; }
.pf-xp .bar > i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: pfSheen 3.8s var(--ease-in) 1.6s infinite;
}

/* --- статистика --- */
.pf-stats { gap: 10px; }
.pf-stats .tile { padding: 12px; border-radius: var(--r-md); gap: 2px; min-width: 0; }
.pf-stats .tile .v {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 1.25rem; line-height: 1.2; font-weight: 900; font-variant-numeric: tabular-nums;   /* Число 20/24 */
}
.pf-stats .tile .k {
  font-size: .8125rem; line-height: 18px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-stats .tile .chip { width: 18px; height: 18px; flex: none; }
/* Подчертаната плочка (Figma: процентът победи — лайм) */
.pf-stats .tile.hi {
  background: var(--surface-2); border-color: color-mix(in srgb, var(--brand) 72%, var(--bg));
  box-shadow: 0 0 18px color-mix(in srgb, var(--brand) 14%, transparent), var(--hairline);
}
.pf-stats .tile.hi .v { color: var(--brand); }
.pf-games { margin-top: 10px; padding: 4px 16px; display: flex; flex-direction: column; }
.pf-game { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pf-game:last-child { border-bottom: 0; }
.pf-game-ic {
  width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-content: center;
  background: var(--surface-2); color: var(--brand);
}
.pf-game .bar { height: 6px; margin-top: 6px; background: var(--line); }

/* --- персонализиране (Figma „Опции") --- */
.pf-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pf-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--hairline);
  color: var(--text); text-align: left; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pf-opt:hover { border-color: var(--brand-line); background: var(--surface-2); box-shadow: 0 0 16px color-mix(in srgb, var(--brand) 12%, transparent); }
.pf-opt:active { transform: scale(.97); }
.pf-opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pf-opt-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 2px; }
.pf-opt-top > .bi { color: var(--brand); font-size: 22px; transition: transform var(--dur-3) var(--ease-spring); }
.pf-opt:hover .pf-opt-top > .bi { transform: scale(1.15) rotate(-8deg); }
.pf-opt .chev { color: var(--text-dim); font-size: 18px; transition: transform var(--dur-2) var(--ease-out); }
.pf-opt:hover .chev { transform: scaleX(-1) translateX(-3px); }
.pf-opt .t { font-size: .9375rem; line-height: 22px; font-weight: 500; }        /* Текст 15/22 */
.pf-opt .s {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-dim); font-size: .8125rem; line-height: 18px; font-weight: 500;
}

/* --- гост: „Запази прогреса си" (пунктир в лайм) --- */
.pf-guest.panel {
  background: var(--brand-soft); border: 1px dashed var(--brand); border-radius: var(--r-lg);
  padding: 14px 16px 16px; box-shadow: none;
}
.pf-guest h3 { margin-bottom: 8px; }
.pf-guest .notice-body { margin: 0 0 14px; color: var(--text-dim); }
.pf-guest .notice-body b { color: var(--text); }

/* --- последни игри --- */
.pf-hist-list { display: flex; flex-direction: column; gap: 8px; }
.pf-hist .hist-row {
  gap: 12px; padding: 10px 14px 10px 12px; border: 0; border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--hairline);
}
.pf-hist-bar { width: 4px; height: 36px; flex: none; border-radius: 2px; background: var(--danger); }
.pf-hist .hist-row.win .pf-hist-bar { background: var(--brand); box-shadow: var(--glow-sm); }
.pf-hist .hist-row .b { font-weight: 700; }
.pf-hist .hist-row > b { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-hist .hist-row > b.dim { color: var(--text-dim); }
.pf-hist .empty { padding: 26px 16px; border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--surface); }
.pf-hist .empty .em { display: flex; justify-content: center; margin-bottom: 8px; font-size: 2.2rem; color: var(--text-mut); }
.pf-hist .empty p { margin: 0; }

/* --- изход --- */
.pf-logout.btn { --btn-bg: var(--surface); --btn-fg: var(--danger); }
.pf-logout.btn:hover { --btn-bd: color-mix(in srgb, var(--danger) 55%, transparent); }

/* ================= НАСТРОЙКИ ================= */
.rs { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.rs-head { display: flex; align-items: center; gap: 12px; }
.rs-head h1 { margin: 0; font-size: 1.375rem; line-height: 1.27; font-weight: 700; letter-spacing: -.2px; }   /* H2 22/28 */
.rs-head .iconbtn {
  width: 40px; height: 40px; border-radius: 14px; background: var(--surface); font-size: 20px;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.rs-head .iconbtn:hover, .rs-head .iconbtn:focus-visible { border-color: var(--brand-line); box-shadow: var(--glow-sm); }
.rs-head .iconbtn:active { transform: scale(.9) translateX(-2px); }

.rs-sec { display: flex; flex-direction: column; gap: 10px; }
/* Етикет 11 — ГЛАВНИ, вторичен текст */
.rs-label {
  margin: 0; color: var(--text-dim);
  font-size: .6875rem; line-height: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.rs-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 0 16px; box-shadow: var(--hairline);
}
/* Редовете: превключвател, избор, стрелка. Делят се с тънка линия. */
.rs-row { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 12px 0; }
.rs-row.rs-col { flex-direction: column; align-items: stretch; gap: 10px; }
.rs-link { width: 100%; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.rs-card > * + * { border-top: 1px solid var(--line); }
.rs-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rs-row .t { font-size: .9375rem; line-height: 22px; font-weight: 600; color: var(--text); }   /* 15/22 SemiBold */
.rs-row .s { margin: 0; font-size: .8125rem; line-height: 18px; font-weight: 500; color: var(--text-dim); }  /* Малък 13 */
.rs-link .t { flex: 1; }
.rs-link .chev { transition: transform var(--dur-2) var(--ease-out); }
.rs-link:hover .chev, .rs-link:focus-visible .chev { transform: scaleX(-1) translateX(-4px); }
.rs-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }
.rs-danger .t { color: var(--danger); }
.rs .seg button { min-height: 38px; font-size: .84rem; }
.rs .btn-row { gap: 10px; }

/* Езикът — стойността в лайм и стрелка (Figma „Български ›"), но си остава истинско <select> */
.rs-select { position: relative; flex: none; max-width: 58%; }
.rs-select select.input {
  -webkit-appearance: none; appearance: none; min-height: 40px; width: auto; max-width: 100%;
  padding: 0 28px 0 10px; border: 1.5px solid transparent; background: transparent;
  color: var(--brand); font-size: .8125rem; font-weight: 600; text-align: right; text-align-last: right; cursor: pointer;
}
.rs-select select.input:focus { border-color: var(--brand); }
.rs-select select.input option { color: var(--text); background: var(--surface); }
.rs-select .chev { position: absolute; right: 4px; top: 50%; margin-top: -9px; font-size: 18px; pointer-events: none; }

/* Превключвател 46×26 (Figma „Превключвател"): лайм и сияние, когато е включен */
.rs .switch { justify-content: space-between; cursor: pointer; }
.rs-sw { display: flex; flex: none; }
.rs .switch .track {
  width: 46px; height: 26px; border: 0; border-radius: 99px; background: var(--line-2);
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-3) var(--ease-out);
}
.rs .switch .track::after {
  top: 3px; left: 3px; width: 20px; height: 20px; background: var(--text-dim);
  transition: transform var(--dur-3) var(--ease-spring), background var(--dur-2) var(--ease);
}
.rs .switch input:checked + .track { background: var(--brand); border-color: transparent; box-shadow: var(--glow-sm); animation: rsSwOn .7s var(--ease-out); }
.rs .switch input:checked + .track::after { transform: translateX(20px); background: var(--brand-ink); }
.rs .switch:active .track::after { transform: scale(.85); }
.rs .switch:active input:checked + .track::after { transform: translateX(20px) scale(.85); }
.rs .switch input:focus-visible + .track { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ================= ДВИЖЕНИЕ ================= */
@keyframes pfBannerIn { from { opacity: 0; transform: scale(1.06); } }
@keyframes pfGlow {
  0%, 100% { opacity: .7; transform: scale(.94); }
  50%      { opacity: 1;  transform: scale(1.06); }
}
@keyframes pfHalo {
  0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 42%, transparent); }
  70%, 100% { box-shadow: 0 0 0 16px transparent; }
}
@keyframes pfRingIn { from { opacity: 0; transform: rotate(-150deg) scale(.86); } }
@keyframes pfPop { from { opacity: 0; transform: translateY(6px) scale(.5); } }
@keyframes pfFill { from { transform: scaleX(0); } }
@keyframes pfSheen {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(260%); }
}
@keyframes rsSwOn {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  60%  { box-shadow: 0 0 0 9px transparent, var(--glow-sm); }
  100% { box-shadow: var(--glow-sm); }
}

/* Безкрайните украси спират, когато анимациите са изключени — без трептене от нулевата продължителност. */
html[data-motion="off"] .pf-ring::before,
html[data-motion="off"] .pf-ring::after,
html[data-motion="off"] .pf-xp .bar > i::after,
html[data-motion="off"] .pf-suits .float,
html[data-motion="off"] .pf-banner,
html[data-motion="off"] .pf-ring-arc,
html[data-motion="off"] .pf-lvl,
html[data-motion="off"] .pf-xp .bar > i,
html[data-motion="off"] .pf-game .bar > i,
html[data-motion="off"] .rs .switch .track { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .pf-ring::before, .pf-ring::after, .pf-xp .bar > i::after, .pf-suits .float { animation: none; }
}