/* ═══════════════════════════════════════════════════════════════════════════
 *  v114 · حلقهٔ تکمیل پروفایل، و چیدمان درست روی مرورگر دسکتاپ
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── حلقهٔ درصد دور عکس پروفایل ── */
.pfh55-top .plan-hero{ position:relative; overflow:visible }
.pr114{
  position:absolute; inset:-10px; width:calc(100% + 20px); height:calc(100% + 20px);
  transform:rotate(-90deg); pointer-events:none; overflow:visible;
}
.pr114 circle{ fill:none; stroke-width:4; stroke-linecap:round }
.pr114 .bg{ stroke:rgba(255,201,64,.18) }
.pr114 .fg{ stroke:#FF9E2C; transition:stroke-dashoffset .7s cubic-bezier(.2,1,.3,1) }
.pr114.done .fg{ stroke:#22c55e }
/*  چیپ درصد بالای عکس می‌نشیند: پایینِ عکس جای دکمهٔ دوربین و
 *  نشان‌های لایه‌های قبلی است.  */
#pc114{
  position:absolute; inset-inline:50%; top:-12px; bottom:auto; transform:translateX(50%); white-space:nowrap;
  border:0; cursor:pointer; font-family:inherit; font-size:9.5px; font-weight:900; letter-spacing:.2px;
  background:linear-gradient(135deg,#FFC940,#FF9E2C); color:#3b1d00; border-radius:99px; padding:3px 10px;
  box-shadow:0 3px 10px rgba(255,158,44,.4), 0 0 0 2px #fff; z-index:5;
}
[dir="ltr"] #pc114{ transform:translateX(-50%) }
#pc114.done{ background:linear-gradient(135deg,#34d399,#10b981); color:#052e1a; box-shadow:0 4px 12px rgba(16,185,129,.35) }

/* ── شیت «چه چیزی مانده» ── */
#pcSh114{ position:fixed; inset:0; z-index:10082; background:rgba(20,10,30,.45); display:flex; align-items:flex-end; justify-content:center }
.pc114-c{
  width:100%; max-width:420px; background:#fff; border-radius:22px 22px 0 0; padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  animation:pc114up .26s cubic-bezier(.2,1,.3,1) both;
}
@keyframes pc114up{ from{ transform:translateY(100%) } }
.pc114-hd{ display:flex; align-items:center; gap:12px; margin-bottom:12px }
.pc114-ring{
  width:56px; height:56px; flex:0 0 56px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#FFC940,#FF9E2C); color:#3b1d00; font-weight:900; font-size:14px;
}
.pc114-hd > div{ min-width:0 }
.pc114-hd b{ display:block; font-size:14px; font-weight:900; color:#1c1c1e; line-height:1.7 }
.pc114-hd small{ display:block; font-size:11.5px; color:#78716c; font-weight:700; line-height:1.8 }
.pc114-l{ font-size:11.5px; font-weight:900; color:#a8a29e; margin:2px 0 6px }
.pc114-m{ display:flex; flex-wrap:wrap; gap:6px }
.pc114-m span{ font-size:11.5px; font-weight:800; color:#b45309; background:#fff7ed; border:1px solid #fed7aa; border-radius:99px; padding:5px 11px }
.pc114-go{
  width:100%; margin-top:14px; border:0; border-radius:16px; padding:13px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:900; background:linear-gradient(135deg,#FFC940,#FF9E2C); color:#3b1d00;
}

/* ── دسکتاپ: هر چیزی که روی برنامه می‌نشیند، هم‌اندازهٔ خود برنامه ──
 *  روی کروم دسکتاپ، برنامه یک ستون ۴۲۰ پیکسلی است ولی پنجرهٔ بازی تمام
 *  عرض صفحه را می‌گرفت و بدقواره می‌شد.  */
#lion110{ left:0; right:0; max-width:420px; margin-inline:auto }
#rq113{ inset-inline:0; max-width:392px; margin-inline:auto }
#dm112 .dm112-c, .rq113-c{ max-width:420px }
@media (min-width:760px){
  #lion110{ border-radius:20px 20px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.5) }
  #lion110.full{ border-radius:0 }
}