/* =========================================================================
   Rio VIP5 — إطار "الموشور الماسي" + لمعان الاسم والـID (نقل حرفي من حزمة
   Rio Cafe / vip5-design.css). لا تغيّر الألوان أو المدد — قرارات معتمدة.
   الطبقات: .vf-media z2 (الصورة) ← .vf-svg z3 ← .vf-svg-front z4.
   ========================================================================= */

.vf { position: relative; display: inline-grid; place-items: center; border-radius: 50%; }
/* display:flex eliminates the inline-block baseline descender gap that made .vf-media taller
   than the img (e.g. 64px instead of 60px), which turned border-radius:50% into an oval and
   cropped the image top/bottom. Flex intrinsic height = content height → perfect square → perfect circle. */
.vf-media { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Any framed avatar becomes a perfect circle inside the frame. */
.vf:not([data-vip="0"]) .vf-media,
.vf:not([data-vip="0"]) .vf-media > *,
.vf:not([data-vip="0"]) .vf-media a > img { border-radius: 50% !important; overflow: hidden; }
/* The generated frame aperture is slightly wider than the 56px anchor after
   viewBox scaling. Bleed the centered photo 1px under the frame on every side
   so sub-pixel rounding can never expose a seam; the outer .vf stays 56px. */
.vf:not([data-vip="0"]) .vf-media {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}
.vf:not([data-vip="0"]) .rv-avatar-crop {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
/* --- Official "DiamondPrism" frame SVG ---------------------------------- */
/* The SVG's 200-unit viewBox maps the photo circle to r≈54, so the SVG box
   must be 200/106.7 ≈ 187.5% of the avatar, centred (inset −43.75%). */
.vf-svg { position: absolute; inset: -43.75%; z-index: 3; pointer-events: none; display: none; }
/* Keep the optional detail layer above the complete base frame without changing either SVG. */
.vf-svg-front { z-index: 4; }
.vf-svg svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vf:not([data-vip="0"]) .vf-svg { display: block; }
.vf[data-vip="4"], .vf[data-vip="5"] { isolation: isolate; }

/* DiamondPrism animations (transform/opacity only, GPU-composited). */
.dp-anim-spin { transform-origin: 100px 100px; animation: dp-spin 8s linear infinite; }
.dp-anim-spin-rev { transform-origin: 100px 100px; animation: dp-spin-rev 12s linear infinite; }
.dp-anim-pulse { transform-origin: 100px 100px; animation: dp-pulse 4s ease-in-out infinite alternate; }
@keyframes dp-spin { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } }
@keyframes dp-spin-rev { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); } }
@keyframes dp-pulse {
  0% { opacity: 0.3; transform: scale(0.95); }
  100% { opacity: 0.7; transform: scale(1.02); }
}
.dp-drift { animation: dp-drift-anim 6s ease-in-out infinite; opacity: 0; }
@keyframes dp-drift-anim {
  0% { transform: translate(0px, 0px) scale(var(--scale)) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: 0.8; }
  100% { transform: translate(var(--drift-x), var(--drift-y)) scale(var(--scale-end)) rotate(180deg); opacity: 0; }
}
/* Flowing energy inside the gold thread (VIP 5). */
.dp-anim-thread-flow { animation: dp-thread-flow 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; opacity: 0; }
@keyframes dp-thread-flow {
  0%, 100% { opacity: 0; }
  15% { opacity: 1; }
  30% { opacity: 0; }
}
/* Molten-gold surge — same 4s alternate timing as the glow pulse (in sync). */
.dp-anim-thread-pulse-overlay { animation: dp-thread-pulse-overlay 4s ease-in-out infinite alternate; }
@keyframes dp-thread-pulse-overlay { 0% { opacity: 0; } 100% { opacity: 0.85; } }

/* Reduce-motion: freeze the frames into their full static splendour. */
html.reduce-motion .dp-anim-spin, html.reduce-motion .dp-anim-spin-rev,
html.reduce-motion .dp-anim-pulse, html.reduce-motion .dp-drift,
html.reduce-motion .dp-anim-thread-flow, html.reduce-motion .dp-anim-thread-pulse-overlay {
  animation: none !important;
}
html.reduce-motion .dp-drift, html.reduce-motion .dp-anim-thread-flow { opacity: 0 !important; }
html.reduce-motion .dp-anim-pulse { opacity: 0.5; }
html.reduce-motion .dp-anim-thread-pulse-overlay { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
  .dp-anim-spin, .dp-anim-spin-rev, .dp-anim-pulse, .dp-drift,
  .dp-anim-thread-flow, .dp-anim-thread-pulse-overlay { animation: none !important; }
  .dp-drift, .dp-anim-thread-flow { opacity: 0 !important; }
}

/* --------------------------------------------------------------------------
   VIP signature name (.vn) — VIP5: solid reference gold #B17D33 base with the
   #FEF6D4 highlight sweeping right → left. Shine = animated background-position
   over background-clip:text; no shadows, no filters, no size/weight change.
   -------------------------------------------------------------------------- */
.vn { display: inline; }
/* Solid-color fallback on engines without background-clip:text. */
.vn[data-vip="5"] { color: #b17d33; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .vn[data-vip="5"] {
    background-size: 600% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: vn-shine-5 3.4s linear infinite;
  }
}
.vn[data-vip="5"] {
  background-image: linear-gradient(100deg,
    #b17d33 0% 45%, #e7cfa1 48.8%, #fef6d4 50%, #e7cfa1 51.2%, #b17d33 55% 100%);
}
/* 3.4s cycle = 2.4s sweep (34%→66% over 70.588%) + 1.0s rest — EXACT. */
@keyframes vn-shine-5 {
  0% { background-position: 34% 0; }
  70.588% { background-position: 66% 0; }
  100% { background-position: 66% 0; }
}
/* Reduce-motion: park the sweep at the solid-ink edge → clean static gold. */
html.reduce-motion .vn[data-vip="5"] {
  animation: none;
  background-position: 0% 0;
}
@media (prefers-reduced-motion: reduce) {
  .vn[data-vip="5"] { animation: none; background-position: 0% 0; }
}

/* ---- سطر الـID + حبة VIP5 — نفس ذهب الاسم ونفس الساعة والطور ---- */
.cx-sum-id {
  margin: 0; color: rgba(255,255,255,.55); font-size: 0.75rem;
  font-weight: 700; letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: start;
  display: flex; align-items: center; gap: 6px;
}
.cx-vip-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 999px;
  font-size: .66rem; font-weight: 800; font-style: italic;
  letter-spacing: .3px; line-height: 1.25;
  background: var(--vt-cta); color: var(--vt-cta-text);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  flex: 0 0 auto;
}
.cx-vip-badge svg { opacity: .9; }
.vip-emblem-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 10px; height: 10px; flex: 0 0 auto;
}
.vip-emblem-badge .vip-emblem {
  width: 10px; height: 10px; flex: 0 0 auto; display: block;
  filter: none;
}

.cx-sum-id[data-vip="5"] { color: #b17d33; font-weight: 800; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cx-sum-id[data-vip="5"] > span[dir="ltr"] {
    background-image: linear-gradient(100deg,
      #b17d33 0% 45%, #e7cfa1 48.8%, #fef6d4 50%, #e7cfa1 51.2%, #b17d33 55% 100%);
    background-size: 600% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: vn-shine-5 3.4s linear infinite;
  }
}
/* حبة VIP5: التصميم الأصلي كما هو + طبقة لمعان ::after بنفس الساعة والطور. */
.cx-sum-id[data-vip="5"] .cx-vip-badge { position: relative; overflow: hidden; }
.cx-sum-id[data-vip="5"] .cx-vip-badge::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: linear-gradient(100deg,
    transparent 0% 45%, rgba(231, 207, 161, .55) 48.8%,
    rgba(254, 246, 212, .9) 50%, rgba(231, 207, 161, .55) 51.2%,
    transparent 55% 100%);
  background-size: 600% 100%;
  background-repeat: no-repeat;
  animation: vn-shine-5 3.4s linear infinite;
  /* الطور من الخاصية المخصصة الموروثة inline (تصل للعناصر الزائفة بثبات). */
  animation-delay: var(--vip5-ph, 0ms);
  pointer-events: none;
}
html.reduce-motion .cx-sum-id[data-vip="5"] > span[dir="ltr"] {
  animation: none;
  background-position: 0% 0;
}
html.reduce-motion .cx-sum-id[data-vip="5"] .cx-vip-badge::after {
  animation: none;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cx-sum-id[data-vip="5"] > span[dir="ltr"] { animation: none; background-position: 0% 0; }
  .cx-sum-id[data-vip="5"] .cx-vip-badge::after { animation: none; opacity: 0; }
}

/* ألوان رتب VIP كلّها (الحبة والشعار والإطار) — حرفية من الحزمة. */
[data-tier="member"]   { --vt-card: linear-gradient(160deg, #3d434c, #262a31); --vt-border: rgba(255,255,255,.14); --vt-glow: #9aa4b1; --vt-em1: #b9c2cd; --vt-em2: #6e7885; --vt-cta: linear-gradient(135deg, #6e7885, #4a525d); --vt-cta-text: #fff; }
[data-tier="silver"]   { --vt-card: linear-gradient(160deg, #59636f, #2e353f); --vt-border: rgba(214,222,231,.28); --vt-glow: #cdd7e1; --vt-em1: #eef2f6; --vt-em2: #8896a5; --vt-cta: linear-gradient(135deg, #c8d2dc, #93a1b0); --vt-cta-text: #1c2229; }
[data-tier="gold"]     { --vt-card: linear-gradient(160deg, #6d5622, #3a2d0e); --vt-border: rgba(244,208,120,.35); --vt-glow: #f4d078; --vt-em1: #ffe9ad; --vt-em2: #c9992f; --vt-cta: linear-gradient(135deg, #f4d078, #cf9f36); --vt-cta-text: #2a1f06; }
[data-tier="platinum"] { --vt-card: linear-gradient(160deg, #1f5c42, #0d2c1e); --vt-border: rgba(126,224,178,.32); --vt-glow: #63d9a2; --vt-em1: #c2f3da; --vt-em2: #2e8f63; --vt-cta: linear-gradient(135deg, #58d99c, #1f9663); --vt-cta-text: #062e1d; }
[data-tier="elite"]    { --vt-card: linear-gradient(160deg, #53348b, #2c1b4e); --vt-border: rgba(190,150,255,.32); --vt-glow: #b788ff; --vt-em1: #dcc4ff; --vt-em2: #8b5cf6; --vt-cta: linear-gradient(135deg, #a875ff, #7c3aed); --vt-cta-text: #fff; }
[data-tier="vip"] { --vt-card: linear-gradient(160deg, #262016, #0f0c07); --vt-border: rgba(244,197,86,.4); --vt-glow: #f4c556; --vt-em1: #ffd97a; --vt-em2: #a97e1f; --vt-cta: linear-gradient(135deg, #f7ce67, #d4a231); --vt-cta-text: #241a05; }

/* ---- لمعان الاسم للرتب 3/4 (نفس ساعة vn-shine-5، ألوان الرتبة) ---- */
.vn[data-vip="3"], .vn[data-vip="4"] { color: #fff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .vn[data-vip="3"], .vn[data-vip="4"] {
    background-size: 600% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: vn-shine-5 3.4s linear infinite;
  }
}
.vn[data-vip="3"] {
  background-image: linear-gradient(100deg,
    #fff 0% 45%, #f7f9fc 48.8%, #ffffff 50%, #f7f9fc 51.2%, #fff 55% 100%);
}
.vn[data-vip="4"] {
  background-image: linear-gradient(100deg,
    #fff 0% 45%, #e8b64c 48.8%, #ffd75e 50%, #e8b64c 51.2%, #fff 55% 100%);
}
html.reduce-motion .vn[data-vip="3"],
html.reduce-motion .vn[data-vip="4"] { animation: none; background-position: 0% 0; }
@media (prefers-reduced-motion: reduce) {
  .vn[data-vip="3"], .vn[data-vip="4"] { animation: none; background-position: 0% 0; }
}

/* ---- لمعان الـID والحبة للرتب 3/4 (نفس الساعة والطور) ---- */
.cx-sum-id[data-vip="3"], .cx-sum-id[data-vip="4"] { color: rgba(255,255,255,.55); font-weight: 800; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cx-sum-id[data-vip="3"] > span[dir="ltr"],
  .cx-sum-id[data-vip="4"] > span[dir="ltr"] {
    background-size: 600% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: vn-shine-5 3.4s linear infinite;
  }
  .cx-sum-id[data-vip="3"] > span[dir="ltr"] {
    background-image: linear-gradient(100deg,
      rgba(255,255,255,.55) 0% 45%, #f7f9fc 48.8%, #ffffff 50%,
      #f7f9fc 51.2%, rgba(255,255,255,.55) 55% 100%);
  }
  .cx-sum-id[data-vip="4"] > span[dir="ltr"] {
    background-image: linear-gradient(100deg,
      rgba(255,255,255,.55) 0% 45%, #e8b64c 48.8%, #ffd75e 50%,
      #e8b64c 51.2%, rgba(255,255,255,.55) 55% 100%);
  }
}
html.reduce-motion .cx-sum-id[data-vip="3"] > span[dir="ltr"],
html.reduce-motion .cx-sum-id[data-vip="4"] > span[dir="ltr"] { animation: none; background-position: 0% 0; }
.cx-sum-id[data-vip="3"] .cx-vip-badge,
.cx-sum-id[data-vip="4"] .cx-vip-badge { position: relative; overflow: hidden; }
.cx-sum-id[data-vip="3"] .cx-vip-badge::after,
.cx-sum-id[data-vip="4"] .cx-vip-badge::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-size: 600% 100%;
  background-repeat: no-repeat;
  animation: vn-shine-5 3.4s linear infinite;
  animation-delay: var(--vip5-ph, 0ms);
  pointer-events: none;
}
.cx-sum-id[data-vip="3"] .cx-vip-badge::after {
  background-image: linear-gradient(100deg,
    transparent 0% 45%, rgba(247,249,252,.6) 48.8%,
    rgba(255,255,255,.9) 50%, rgba(247,249,252,.6) 51.2%, transparent 55% 100%);
}
.cx-sum-id[data-vip="4"] .cx-vip-badge::after {
  background-image: linear-gradient(100deg,
    transparent 0% 45%, rgba(232,182,76,.55) 48.8%,
    rgba(255,215,94,.9) 50%, rgba(232,182,76,.55) 51.2%, transparent 55% 100%);
}
html.reduce-motion .cx-sum-id[data-vip="3"] .cx-vip-badge::after,
html.reduce-motion .cx-sum-id[data-vip="4"] .cx-vip-badge::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .cx-sum-id[data-vip="3"] > span[dir="ltr"], .cx-sum-id[data-vip="4"] > span[dir="ltr"] { animation: none; background-position: 0% 0; }
  .cx-sum-id[data-vip="3"] .cx-vip-badge::after, .cx-sum-id[data-vip="4"] .cx-vip-badge::after { animation: none; opacity: 0; }
}

/* ── Sidebar avatar: fixed 56×56 anchor; VIP frame geometry remains proportional. ── */
#external-sidebar .vf {
  width: 56px;
  height: 56px;
}

/* ── صندوق/خلفية منطقة الحساب في القائمة الجانبية أُزيل بطلب المستخدم —
   الإطار والاسم والـID تظهر مباشرة على خلفية القائمة بلا تدرّج/فاصل/ظل.
   data-tier ما زال يُضاف خادميًا (يستخدمه rio-live.js) لكن بلا أي تنسيق هنا. */

.vip-emblem-back { fill: var(--vt-em2); }
.vip-emblem-mid  { fill: var(--vt-em1); }
.vip-emblem-core { fill: var(--vt-em2); }
.vip-emblem-shine { fill: rgba(255,255,255,.55); }
.vip-emblem-frame path { stroke: var(--vt-em1); stroke-width: 2.4; stroke-linecap: round; fill: none; opacity: .85; }
.vip-emblem-star { fill: var(--vt-em1); }
.vip-emblem-wings path { fill: var(--vt-em2); opacity: .9; }
.vip-emblem-gems path { fill: #fff; opacity: .92; }
.vip-emblem-crown path, .vip-emblem-crown circle { fill: var(--vt-em1); }
.vip-emblem-sparkles path { fill: rgba(255,255,255,.85); }