/* ═══════════════════════════════════════════════════════════════════════════
 *  v467 · استریم حرفه‌ای سبک Twitch روی صحنهٔ لندسکیپ — ظاهر (JS: 380)
 *  فیس‌کم کشیدنی #lsPip467 (سه اندازه)، هشدار دونیت چهاررده #lsAl467 روی صحنه،
 *  نوار کنترل #lsCtl467 داخل قاب. انیمیشن‌ها فقط transform/opacity؛ lite366 خاموش.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── فیس‌کم استریمر ─── */
#lsPip467{
  position:absolute; z-index:7; left:12px; top:200px; cursor:grab; touch-action:none;
  border-radius:14px; overflow:hidden; isolation:isolate;
  box-shadow:0 0 0 2px rgba(165,243,252,.75), 0 0 22px -4px rgba(139,92,246,.8), 0 14px 28px -14px rgba(0,0,0,.8);
  background:#0a0518;
}
#lsPip467.off{ display:none }
#lsPip467.sz-s{ width:92px }
#lsPip467.sz-m{ width:128px }
#lsPip467.sz-l{ width:172px }
#lsPip467 video{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; pointer-events:none }
#lsPip467 b{
  position:absolute; top:5px; inset-inline-start:5px; padding:2px 7px; border-radius:7px;
  font-size:8.5px; font-weight:900; letter-spacing:.8px; color:#fff;
  background:linear-gradient(90deg,#FF3D7F,#8B5CF6); box-shadow:0 2px 8px -2px rgba(255,61,127,.8);
}
#lsPip467:active{ cursor:grabbing }

/* ─── نوار کنترل پخش‌کننده (داخل قاب صحنه) ─── */
#lsCtl467{
  position:absolute; bottom:10px; left:50%; z-index:3; pointer-events:auto;
  display:flex; gap:7px; padding:6px; border-radius:16px;
  background:rgba(10,4,24,.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 10px 26px -10px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transform:translate(-50%, 12px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
#lsCtl467.on{ opacity:1; transform:translate(-50%, 0); pointer-events:auto }
#lsCtl467 button{
  display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 11px;
  border:0; border-radius:11px; cursor:pointer; color:#EDE9FE; font:900 10.5px/1 inherit;
  background:rgba(255,255,255,.08);
}
#lsCtl467 button i{ width:16px; height:16px; display:grid } #lsCtl467 button i svg{ width:100%; height:100% }
#lsCtl467 button span{ font-family:inherit; white-space:nowrap }
#lsCtl467 button.on{ background:linear-gradient(120deg,rgba(255,61,127,.35),rgba(139,92,246,.35)); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25) }
#lsCtl467 button:active{ transform:scale(.93) }
#lsCtl467 [data-a="cam"]{ display:none }
#lsCtl467.isHost [data-a="cam"]{ display:inline-flex; background:linear-gradient(120deg,#FF3D7F,#8B5CF6); color:#fff }

/* ─── هشدار دونیت (روی صحنه، کلیپ‌شده در رپر) ─── */
#lsAl467{ position:absolute; top:8px; inset-inline-start:48px; inset-inline-end:48px; z-index:4; pointer-events:none }
.al467{
  display:flex; align-items:center; gap:8px; width:fit-content; max-width:100%;
  margin:0 auto 6px; padding:7px 13px; border-radius:99px; color:#fff;
  opacity:0; transform:translateY(-16px) scale(.9);
  transition:opacity .3s ease, transform .34s cubic-bezier(.2,.9,.3,1.25);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.22);
}
.al467.in{ opacity:1; transform:translateY(0) scale(1) }
.al467.out{ opacity:0; transform:translateY(-12px) scale(.92); transition-duration:.3s }
.al467 i{ display:grid; width:24px; height:24px } .al467 i svg{ width:100%; height:100% }
.al467 span{ font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.al467 b{ font-weight:900 }
.al467 u{ text-decoration:none; font-weight:900; color:#FDE68A; direction:ltr; unicode-bidi:isolate }
.al467 em{ font-style:normal; font-weight:900; opacity:.9 }
.al467.t1{ background:linear-gradient(120deg,rgba(30,14,58,.92),rgba(49,22,92,.92)) }
.al467.t2{ background:linear-gradient(120deg,#2563EB,#7C3AED) }
.al467.t3{ background:linear-gradient(120deg,#C026D3,#FF3D7F) }
.al467.t4{
  background:linear-gradient(120deg,#F59E0B,#FF3D7F 55%,#8B5CF6); position:relative; isolation:isolate; overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(253,230,138,.8), 0 0 30px -4px rgba(255,181,70,.9), 0 12px 30px -10px rgba(0,0,0,.8);
}
.al467.t4 span{ font-size:13px }
/*  برق مگا‌دونیت — فقط transform  */
.al467.t4::after{
  content:""; position:absolute; top:-30%; bottom:-30%; width:34px; z-index:-0;
  inset-inline-start:-50px; transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:alShine467 1.5s ease-in-out infinite;
}
@keyframes alShine467{ to{ transform:rotate(16deg) translateX(340px) } }

/* ─── روانی ─── */
html.lite366 .al467, html.lite366 #lsCtl467{ transition:none }
html.lite366 .al467.t4::after{ animation:none }
@media (prefers-reduced-motion: reduce){
  .al467, #lsCtl467{ transition:none }
  .al467.t4::after{ animation:none }
}