/* ===================== لعبة تقليد الأصوات ===================== */
.vg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vg-step { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.vg-step b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.vg-step-ic { position: relative; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; background: rgba(155, 89, 182, .16); color: #c39bd3; font-size: 15px; }
.vg-step-n { position: absolute; top: -6px; left: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: #9b59b6; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }

/* رفع الأصوات */
.vg-drop { border: 2px dashed var(--border-strong); border-radius: 14px; padding: 22px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vg-drop:hover, .vg-drop:focus-visible, .vg-drop.over { border-color: #9b59b6; background: rgba(155, 89, 182, .08); outline: none; }
.vg-drop-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(155, 89, 182, .16); color: #c39bd3; font-size: 20px; margin-bottom: 4px; }
.vg-queue { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.vg-queue:empty { display: none; }
.vg-up { display: flex; align-items: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.vg-up.ok { border-color: rgba(63, 185, 80, .4); }
.vg-up.ok .progress > div { background: var(--success); }
.vg-up.err { border-color: rgba(248, 81, 73, .4); }
.vg-up.err .progress > div { background: var(--danger); }
.vg-up-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; unicode-bidi: plaintext; }

/* قائمة الأصوات */
.vg-list { margin-top: 14px; }
.vg-sound { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.vg-sound:last-child { border-bottom: none; }
.vg-play { width: 36px; height: 36px; border-radius: 50%; background: rgba(155, 89, 182, .16); color: #c39bd3; flex-shrink: 0; }
.vg-play:hover { background: rgba(155, 89, 182, .3); color: #fff; }
.vg-name.input { height: 32px; padding: 0 8px; background: transparent; border-color: transparent; font-weight: 700; }
.vg-name.input:hover { border-color: var(--border); }
.vg-name.input:focus { background: var(--bg-input); border-color: var(--accent); }
.vg-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 0 8px; }
.vg-meta .tag { font-size: 10px; padding: 0 6px; }

/* اللعبة الحالية */
.vg-idle { display: flex; align-items: center; gap: 14px; }
.vg-idle-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-hover); color: var(--text-muted); font-size: 19px; flex-shrink: 0; }
.vg-idle code { background: rgba(0, 0, 0, .3); padding: 1px 6px; border-radius: 5px; direction: ltr; display: inline-block; }
.vg-live-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vg-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(63, 185, 80, .6); animation: vgPulse 1.6s infinite; }
@keyframes vgPulse { 0% { box-shadow: 0 0 0 0 rgba(63, 185, 80, .55); } 70% { box-shadow: 0 0 0 9px rgba(63, 185, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0); } }
.vg-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.vg-player { display: flex; align-items: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.vg-player .nm { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-player.now { border-color: #f1c40f; background: rgba(241, 196, 15, .08); }
.vg-player.away { opacity: .55; }

@media (max-width: 1100px) { .vg-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vg-steps { grid-template-columns: 1fr; } .vg-players { grid-template-columns: 1fr; } }