/* Qadiyah Shuffle — TikTok-style vertical pager (v2 — smoother) */
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow:hidden;height:100%;width:100%;background:#0a0a0a;touch-action:none}
body.qsh-body{font-family:'Tajawal',sans-serif;color:#fff}
.qsh{position:fixed;inset:0;width:100%;height:100%;background:#0a0a0a;overflow:hidden;--qsh-nav-space:86px}
.qsh::after{content:"";position:fixed;left:0;right:0;bottom:0;height:86px;z-index:40;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.78),#0a0a0a 46%);border-top:1px solid rgba(255,255,255,.07)}

/* زر العودة */
.qsh-back{position:fixed;top:14px;right:14px;z-index:50;width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.12);transition:transform .15s ease,background .15s}
.qsh-back:hover{background:rgba(0,0,0,.8);transform:scale(1.05)}

/* شارة "شافل عشوائي" */
.qsh-badge{position:fixed;top:14px;left:14px;z-index:50;display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:24px;background:linear-gradient(135deg,#ff3b9a,#9b30ff);
  box-shadow:0 4px 18px rgba(155,48,255,.4);font-weight:800;font-size:13px;color:#fff}
.qsh-badge-icon{font-size:16px}

/* شارة نوع اللعبة الحالية */
.qsh-type-badge{position:fixed;top:64px;left:14px;z-index:48;display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:20px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);font-size:12px;font-weight:700;
  opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
.qsh-type-badge.show{opacity:1;transform:translateY(0)}
.qsh-type-emoji{font-size:14px}

/* الحاوية الكلية */
.qsh-container{position:absolute;inset:0 0 var(--qsh-nav-space) 0;width:100%;overflow:hidden;background:#0a0a0a}

/* كل شريحة */
.qsh-slide{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .45s cubic-bezier(.22,.9,.3,1);will-change:transform;background:#0a0a0a}
.qsh-slide.prev{transform:translate3d(0,-100%,0)}
.qsh-slide.current{transform:translate3d(0,0,0)}
.qsh-slide.next{transform:translate3d(0,100%,0)}
.qsh-slide.far-next{transform:translate3d(0,200%,0);opacity:0;pointer-events:none}

.qsh-iframe{width:100%;height:100%;border:0;display:block;background:#0a0a0a;opacity:0;transition:opacity .35s ease}
.qsh-slide.loaded .qsh-iframe{opacity:1}

/* لودر داخل كل شريحة (يُخفى عند تحميل iframe) */
.qsh-slide-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:linear-gradient(160deg,#0d0d12,#1a0d24);z-index:5;pointer-events:none;
  transition:opacity .35s ease}
.qsh-slide.loaded .qsh-slide-loader{opacity:0}
.qsh-slide-emoji{font-size:64px;animation:qsh-bob 1.4s ease-in-out infinite;filter:drop-shadow(0 4px 12px rgba(155,48,255,.45))}
.qsh-slide-title{font-size:14px;color:#bbb;font-weight:700;max-width:80%;text-align:center;line-height:1.5}
.qsh-slide-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.12);border-top-color:#ff3b9a;border-radius:50%;animation:qsh-spin .9s linear infinite}
@keyframes qsh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes qsh-spin{to{transform:rotate(360deg)}}

/* شاشة التحميل العامة */
.qsh-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#0a0a0a;z-index:30;gap:14px;transition:opacity .3s ease}
.qsh-loader.hidden{opacity:0;pointer-events:none;display:none}
.qsh-loader-icon{font-size:54px;animation:qsh-spin 1.6s linear infinite;display:inline-block}
.qsh-loader-text{color:#bbb;font-size:14px;font-weight:600}

/* مؤشر السوايب */
.qsh-swipe-hint{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);z-index:45;
  display:none;align-items:center;gap:8px;padding:9px 16px;border-radius:24px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);
  font-size:12px;font-weight:600;color:#fff;animation:qsh-pulse 1.8s ease-in-out infinite;pointer-events:none;
  transition:opacity .35s ease}
.qsh-swipe-hint.hidden{opacity:0;pointer-events:none}
@keyframes qsh-pulse{0%,100%{transform:translate(-50%,0);opacity:.85}50%{transform:translate(-50%,-6px);opacity:1}}

.qsh-nav{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:52;display:flex;gap:10px;align-items:center}
.qsh-nav-btn{min-width:118px;height:46px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(10,10,10,.72);backdrop-filter:blur(8px);color:#fff;font:800 14px/1 'Tajawal',sans-serif;
  cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.22);transition:transform .16s ease,background .16s ease,border-color .16s ease,opacity .16s ease}
.qsh-nav-btn:hover{transform:translateY(-1px);background:rgba(22,22,22,.88)}
.qsh-nav-btn:active{transform:translateY(0) scale(.98)}
.qsh-nav-btn:disabled{opacity:.42;cursor:default;transform:none}
.qsh-nav-next{background:linear-gradient(135deg,rgba(255,59,154,.94),rgba(155,48,255,.94));border-color:rgba(255,255,255,.08)}
.qsh-nav-next.qsh-nav-cta{box-shadow:0 0 0 3px rgba(255,255,255,.08),0 10px 24px rgba(155,48,255,.45);animation:qsh-next-glow 1.2s ease-in-out infinite}
@keyframes qsh-next-glow{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* زر التالي */
.qsh-next-btn{position:fixed;bottom:24px;right:18px;z-index:45;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,#ff3b9a,#9b30ff);border:0;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(155,48,255,.45);transition:transform .15s ease}
.qsh-next-btn:hover{transform:scale(1.06)}
.qsh-next-btn:active{transform:scale(.95)}

/* شاشة النهاية */
.qsh-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;z-index:60;background:rgba(10,10,10,.96);backdrop-filter:blur(12px)}
.qsh-end.hidden{display:none}
.qsh-end-icon{font-size:64px}
.qsh-end-text{font-size:20px;font-weight:800}
.qsh-end-btn{padding:12px 26px;border:0;border-radius:28px;background:linear-gradient(135deg,#ff3b9a,#9b30ff);
  color:#fff;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 20px rgba(155,48,255,.4)}
.qsh-end-btn:hover{filter:brightness(1.07)}
.qsh-end-link{margin-top:6px;color:#9b9b9b;font-size:13px;text-decoration:none}
.qsh-end-link:hover{color:#fff}

@media (max-width: 640px){
  .qsh-nav{bottom:16px;width:calc(100% - 24px)}
  .qsh-nav-btn{flex:1;min-width:0;padding:0 14px}
}

@media (max-height: 560px) and (orientation: landscape), (min-width: 700px) and (max-height: 560px){
  .qsh{--qsh-nav-space:0px}
  .qsh::after{display:none}
  .qsh-type-badge{max-width:calc(100% - 190px)}
  .qsh-nav{left:18px;right:auto;top:50%;bottom:auto;transform:translateY(-50%);z-index:54;flex-direction:column;width:auto;gap:8px}
  .qsh-nav-btn{width:104px;min-width:104px;height:42px;padding:0 12px;font-size:12px;background:rgba(10,10,10,.76)}
}