/* =====================================================================
   جولة 83: «التوثيق ✔» — علامة اللاعب/الصانع (بلون المنشأة) · ختم الفريق الأحمر · شارة مراحل الموثّقين · الشرح · صفحة الطلب
   الألوان من المحرك: --vf-pc (لون العلامة) · --vf-pbg (خلفيتها) · --vf-tc (ختم الفريق)
   ===================================================================== */
:root { --vf-pc: #ffd166; --vf-pbg: #2a1d05; --vf-tc: #e2342e; }
.vf-slot { display: inline-flex; align-items: center; vertical-align: middle; }
.vf-slot:empty { display: none; }
.vf { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: none; -webkit-tap-highlight-color: transparent; }
.vf:focus-visible { outline: 2px solid var(--vf-pc); outline-offset: 2px; }
/* لاعب / صانع: دائرة صغيرة فيها ✔ */
.vf-p { width: 1.05em; height: 1.05em; min-width: 14px; min-height: 14px; margin-inline-start: .3em; border-radius: 50%; color: var(--vf-pbg); background: var(--vf-pc);
  box-shadow: 0 0 0 1.5px var(--vf-pbg), 0 0 8px color-mix(in srgb, var(--vf-pc) 45%, transparent); }
.vf-p svg { width: 72%; height: 72%; }
/* الفريق: ختم مطاطي أحمر */
.vf-t { margin-inline-start: .4em; padding: .08em .45em .1em; font-size: .62em; font-weight: 800; letter-spacing: .02em; line-height: 1.25; white-space: nowrap; color: var(--vf-tc);
  border: 1.5px solid var(--vf-tc); border-radius: 3px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vf-tc) 35%, transparent); transform: rotate(-3deg); background: color-mix(in srgb, var(--vf-tc) 9%, transparent); text-shadow: 0 0 6px color-mix(in srgb, var(--vf-tc) 40%, transparent); }
/* مراحل الموثّقين */
.vf-lv { display: inline-flex; align-items: center; gap: .25em; margin-inline-start: .4em; padding: .1em .45em; border-radius: 999px; font-size: .7em; font-weight: 700; color: var(--vf-pc);
  background: color-mix(in srgb, var(--vf-pc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--vf-pc) 45%, transparent); white-space: nowrap; }
.vf-lv svg { width: 1em; height: 1em; }
/* الشرح */
.vf-pop { position: fixed; z-index: 9800; display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #120d0b; color: #f1e7dc; border: 1px solid color-mix(in srgb, var(--vf-pc) 50%, #000);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55); font-size: .86rem; line-height: 1.6; animation: vfIn .16s ease-out; }
.vf-pop.t { border-color: var(--vf-tc); }
.vf-pop b { display: inline-flex; align-items: center; gap: 6px; color: var(--vf-pc); }
.vf-pop.t b { color: var(--vf-tc); }
.vf-pop b svg { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--vf-pc); color: var(--vf-pbg); }
.vf-pop small { color: #a99a8c; font-size: .76rem; }
@keyframes vfIn { from { opacity: 0; transform: translateY(-4px); } }
/* رسائل المنشأة: ختم المرسل */
.vf-from { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: .82rem; color: #a99a8c; }
.vf-from .vf-t { font-size: .7rem; cursor: default; }
/* زر «اطلب التوثيق» بالبروفايل */
.vf-reqbtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 8px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--vf-pc);
  border: 1px dashed color-mix(in srgb, var(--vf-pc) 60%, transparent); vertical-align: middle; }
.vf-reqbtn svg { width: 12px; height: 12px; }
.vf-reqbtn:hover, .vf-reqbtn:focus-visible { background: color-mix(in srgb, var(--vf-pc) 12%, transparent); }
/* صفحة الطلب */
.vf-page { position: fixed; inset: 0; z-index: 9700; display: grid; place-items: center; padding: 16px; background: rgba(4, 3, 3, .72); backdrop-filter: blur(2px); }
.vf-box { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 14px; background: #120d0b; color: #f1e7dc; border: 1px solid #3a2c25; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.vf-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #2b211c; position: sticky; top: 0; background: #120d0b; }
.vf-h h3 { margin: 0; font-size: 1.1rem; } .vf-h small { color: #a99a8c; }
.vf-h > div { flex: 1; }
.vf-x { all: unset; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #a99a8c; }
.vf-x:hover { background: #241a16; color: #fff; }
.vf-big { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--vf-pc); color: var(--vf-pbg); box-shadow: 0 0 14px color-mix(in srgb, var(--vf-pc) 45%, transparent); }
.vf-big svg { width: 22px; height: 22px; }
.vf-big.t { width: auto; height: auto; border-radius: 3px; padding: 3px 8px; background: none; color: var(--vf-tc); border: 2px solid var(--vf-tc); font-weight: 800; transform: rotate(-3deg); box-shadow: none; }
.vf-b { padding: 12px 16px 16px; display: grid; gap: 10px; }
.vf-b h4 { margin: 6px 0 0; font-size: .86rem; color: #c9b8a8; }
.vf-me { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--vf-pc) 9%, #120d0b); border: 1px solid color-mix(in srgb, var(--vf-pc) 35%, transparent); }
.vf-me.sus { display: grid; background: #1d1310; border-color: #6b4a2e; } .vf-me.sus b { color: #f0a35b; } .vf-me.sus span { color: #a99a8c; font-size: .84rem; }
.vf-q { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: #1a1311; border: 1px solid #33261f; font-size: .86rem; }
.vf-q.open b { color: var(--vf-pc); } .vf-q.no b { color: #ff8a7a; } .vf-q.ok b { color: #7be3a3; } .vf-q small { color: #7d6f63; }
.vf-cond, .vf-pg { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vf-cond li, .vf-pg li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; font-size: .88rem; color: #c9b8a8; }
.vf-cond li.ok, .vf-pg li.ok { color: #f1e7dc; }
.vf-ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #4a3a30; color: #7d6f63; font-size: 12px; }
li.ok .vf-ic { background: var(--vf-pc); border-color: var(--vf-pc); color: var(--vf-pbg); } .vf-ic svg { width: 12px; height: 12px; }
.vf-v { font-variant-numeric: tabular-nums; color: #a99a8c; unicode-bidi: plaintext; }
.vf-bl { display: block !important; }
.vf-bar { display: block; height: 4px; border-radius: 4px; background: #2b211c; overflow: hidden; } .vf-bar > i { display: block; height: 100%; background: var(--vf-pc); border-radius: 4px; }
.vf-path { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid #33261f; background: #16100e; }
.vf-path > div:first-child { display: grid; } .vf-path small { color: #a99a8c; font-size: .8rem; }
.vf-path .vf-pg, .vf-path .vf-link { grid-column: 1 / -1; }
.vf-path.dim { opacity: .72; }
.vf-path .btn { grid-row: 1; grid-column: 2; }
.vf-link, .vf-note { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid #3a2c25; background: #0d0908; color: #f1e7dc; font: inherit; font-size: .88rem; }
.vf-link:focus, .vf-note:focus { outline: 2px solid color-mix(in srgb, var(--vf-pc) 60%, transparent); outline-offset: 0; }
.vf-fine { margin: 2px 0 0; color: #7d6f63; font-size: .78rem; line-height: 1.7; }
@media (max-width: 520px) { .vf-page { padding: 0; place-items: stretch; } .vf-box { max-height: 100dvh; border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .vf-pop { animation: none; } }