/* ══════════════════════════════════════════
   علم ولا فنكوش؟ — style.css
   ══════════════════════════════════════════ */

:root {
  --elm:#38bdf8; --elm-d:#0ea5e9;
  --fan:#fb923c; --fan-d:#f97316;
  --bg:#060a11; --s1:#0c1420; --s2:#111c2e;
  --border:rgba(255,255,255,0.06);
  --text:#e8f0fe; --dim:#4a6080;
}

/* ── RESET ── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;cursor:none;}

/* ── CUSTOM CURSOR ── */
#cursor{position:fixed;width:12px;height:12px;border-radius:50%;background:var(--elm);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s;mix-blend-mode:screen;}
#cursor-ring{position:fixed;width:36px;height:36px;border-radius:50%;border:1px solid rgba(56,189,248,0.5);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s;}
body:has(button:hover) #cursor{width:20px;height:20px;background:var(--fan);}
body:has(button:hover) #cursor-ring{width:50px;height:50px;opacity:.6;}

/* ── NOISE OVERLAY ── */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");opacity:.7;}

/* ── PARTICLES ── */
#particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.particle{position:absolute;border-radius:50%;pointer-events:none;animation:float linear infinite;}
@keyframes float{0%{transform:translateY(100vh) scale(0);opacity:0;}10%{opacity:1;}90%{opacity:.4;}100%{transform:translateY(-10vh) scale(1);opacity:0;}}

/* ══ NAV ══ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:64px;
  background:rgba(6,10,17,0.85);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
nav::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--elm),var(--fan),transparent);opacity:.4;}
.nav-logo{font-family:'Tajawal',sans-serif;font-size:1.35rem;font-weight:900;background:linear-gradient(135deg,var(--elm),var(--fan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;cursor:pointer;white-space:nowrap;}
.nav-links{display:flex;gap:32px;list-style:none;}
.nav-links a{color:var(--dim);text-decoration:none;font-size:.85rem;font-weight:700;letter-spacing:.5px;transition:color .3s;position:relative;padding-bottom:4px;}
.nav-links a::after{content:'';position:absolute;bottom:0;right:0;left:0;height:1px;background:var(--elm);transform:scaleX(0);transition:transform .3s;transform-origin:right;}
.nav-links a:hover{color:var(--text);}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-links a.active{color:var(--text);}

/* ══ PAGES ══ */
.page{display:none;}
.page.active{display:block;}

/* ── REVEAL ── */
[data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease;}
[data-reveal].revealed{opacity:1;transform:translateY(0);}
[data-reveal="scale"]{transform:scale(.9);}
[data-reveal="scale"].revealed{transform:scale(1);}

/* ══ HERO ══ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 24px 80px;overflow:hidden;}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;}
.orb-elm{width:600px;height:600px;left:-100px;top:50%;background:rgba(56,189,248,0.06);animation:orbFloat 8s ease-in-out infinite alternate;}
.orb-fan{width:500px;height:500px;right:-80px;top:40%;background:rgba(251,146,60,0.06);animation:orbFloat 10s ease-in-out infinite alternate-reverse;}
@keyframes orbFloat{0%{transform:translateY(-30px) scale(1);}100%{transform:translateY(30px) scale(1.1);}}

.hero-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 18px;border-radius:20px;border:1px solid rgba(56,189,248,0.2);background:rgba(56,189,248,0.05);font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--elm);margin-bottom:28px;opacity:0;animation:heroIn .8s .2s forwards;}
.hero-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--elm);animation:blink 1.5s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}}

.hero-title{font-family:'Tajawal',sans-serif;font-size:clamp(2.8rem,9vw,7rem);font-weight:900;line-height:1.05;margin-bottom:24px;opacity:0;animation:heroIn .8s .4s forwards;}
.hero-title .we{color:var(--elm);animation:glowElm 3s ease-in-out infinite alternate;}
.hero-title .wf{color:var(--fan);animation:glowFan 3s ease-in-out infinite alternate;}
@keyframes glowElm{0%{text-shadow:0 0 40px rgba(56,189,248,.3);}100%{text-shadow:0 0 80px rgba(56,189,248,.7),0 0 120px rgba(56,189,248,.3);}}
@keyframes glowFan{0%{text-shadow:0 0 40px rgba(251,146,60,.3);}100%{text-shadow:0 0 80px rgba(251,146,60,.7),0 0 120px rgba(251,146,60,.3);}}

.hero-sub{font-size:clamp(.9rem,2vw,1.05rem);color:var(--dim);max-width:500px;line-height:2;margin-bottom:48px;opacity:0;animation:heroIn .8s .6s forwards;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;opacity:0;animation:heroIn .8s .8s forwards;}
@keyframes heroIn{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}

.slogan-strip{margin-top:64px;display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center;}
.slogan-word{padding:10px 22px;font-family:'Tajawal',sans-serif;font-size:clamp(.9rem,2vw,1.1rem);font-weight:900;border:1px solid var(--border);position:relative;cursor:default;transition:all .35s cubic-bezier(.34,1.56,.64,1);opacity:0;}
.slogan-word.sw-1{border-radius:10px 0 0 10px;color:var(--elm);border-color:rgba(56,189,248,.3);animation:sloganIn .6s 1s forwards;}
.slogan-word.sw-2{color:var(--text);animation:sloganIn .6s 1.3s forwards;}
.slogan-word.sw-3{border-radius:0 10px 10px 0;color:var(--fan);border-color:rgba(251,146,60,.3);animation:sloganIn .6s 1.6s forwards;}
.slogan-arrow{padding:0 6px;color:var(--dim);font-size:.85rem;opacity:0;}
.slogan-arrow.sa-1{animation:fadeA .4s 1.15s forwards;}
.slogan-arrow.sa-2{animation:fadeA .4s 1.45s forwards;}
@keyframes sloganIn{from{opacity:0;transform:translateY(12px) scale(.9);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes fadeA{from{opacity:0;}to{opacity:1;}}
.slogan-word:hover{transform:translateY(-4px) scale(1.05);z-index:1;}
.slogan-word.sw-1:hover{background:rgba(56,189,248,.1);box-shadow:0 8px 30px rgba(56,189,248,.25);}
.slogan-word.sw-3:hover{background:rgba(251,146,60,.1);box-shadow:0 8px 30px rgba(251,146,60,.25);}

.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--dim);font-size:.72rem;letter-spacing:2px;opacity:0;animation:heroIn .8s 1.2s forwards;}
.scroll-hint::after{content:'';width:1px;height:40px;background:linear-gradient(to bottom,var(--elm),transparent);}

/* ── BUTTONS ── */
.btn-p{padding:14px 36px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--elm),var(--elm-d));color:#000;font-family:'Cairo',sans-serif;font-size:.95rem;font-weight:900;cursor:pointer;transition:all .3s;box-shadow:0 0 30px rgba(56,189,248,.3);}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 0 50px rgba(56,189,248,.5);}
.btn-s{padding:14px 36px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text);font-family:'Cairo',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .3s;}
.btn-s:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);transform:translateY(-2px);}

/* ── DIVIDER ── */
.divider-line{width:1px;height:80px;margin:0 auto;background:linear-gradient(to bottom,transparent,var(--elm),transparent);position:relative;}
.divider-line::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:var(--elm);box-shadow:0 0 12px var(--elm);}

/* ══ FEATURED SECTION ══ */
.featured-section{max-width:1080px;margin:0 auto;padding:0 24px 100px;}
.section-label{font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin-bottom:20px;font-weight:700;display:flex;align-items:center;gap:12px;}
.section-label::before{content:'';flex:1;max-width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--dim));}
.featured-card{border-radius:24px;overflow:hidden;background:var(--s1);border:1px solid var(--border);transition:box-shadow .4s;}
.featured-card:hover{box-shadow:0 0 60px rgba(56,189,248,.08),0 0 0 1px rgba(56,189,248,.12);}

/* ══ PLAYER ══ */
.player-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;}
.player-wrap video{width:100%;height:100%;display:block;object-fit:cover;}

/* ── PATH PROGRESS ── */
#pathProgress{
  position:absolute;top:0;left:0;right:0;z-index:12;
  display:none;padding:12px 18px 0;
  background:linear-gradient(to bottom,rgba(0,0,0,.75),transparent);
  pointer-events:none;
}
#pathProgress.visible{display:flex;align-items:center;gap:10px;}
.path-label{font-size:.7rem;font-weight:800;letter-spacing:1px;padding:3px 12px;border-radius:20px;}
.path-label.elm-label{background:rgba(56,189,248,.15);color:var(--elm);border:1px solid rgba(56,189,248,.35);}
.path-label.fan-label{background:rgba(251,146,60,.15);color:var(--fan);border:1px solid rgba(251,146,60,.35);}
.steps-dots{display:flex;gap:7px;align-items:center;}
.step-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);transition:all .4s;}
.step-dot.done{background:var(--elm);border-color:var(--elm);box-shadow:0 0 7px var(--elm);}
.step-dot.done.fan-dot{background:var(--fan);border-color:var(--fan);box-shadow:0 0 7px var(--fan);}
.step-dot.current{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.9);box-shadow:0 0 6px rgba(255,255,255,.4);}

/* ── OVERLAY ── */
.choice-overlay{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:rgba(6,10,17,.72);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .6s ease;padding:24px;
}
.choice-overlay.visible{opacity:1;pointer-events:all;}
.overlay-q{font-family:'Tajawal',sans-serif;font-size:clamp(1.1rem,3vw,2.2rem);font-weight:900;color:#fff;text-align:center;line-height:1.45;text-shadow:0 2px 30px rgba(0,0,0,.9);}
.choice-overlay.visible .overlay-q{animation:revealQ .5s ease forwards;}
@keyframes revealQ{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:translateY(0);}}
.overlay-btns-choice{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
.overlay-btns-continue{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

.ov-btn{
  padding:14px 56px;border-radius:14px;border:2px solid;
  font-family:'Cairo',sans-serif;font-size:clamp(1.1rem,3vw,1.5rem);font-weight:900;
  cursor:pointer;transition:all .3s;backdrop-filter:blur(20px);
  position:relative;overflow:hidden;
}
.ov-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:opacity .3s;}
.ov-btn:hover::after{opacity:1;}
.ov-btn:hover{transform:scale(1.07) translateY(-3px);}
.ov-btn.elm{border-color:var(--elm);color:var(--elm);background:rgba(56,189,248,.1);box-shadow:0 0 30px rgba(56,189,248,.3);}
.ov-btn.elm:hover{background:rgba(56,189,248,.2);color:#fff;box-shadow:0 0 60px rgba(56,189,248,.5);}
.ov-btn.fan{border-color:var(--fan);color:var(--fan);background:rgba(251,146,60,.1);box-shadow:0 0 30px rgba(251,146,60,.3);}
.ov-btn.fan:hover{background:rgba(251,146,60,.2);color:#fff;box-shadow:0 0 60px rgba(251,146,60,.5);}

.ov-btn-next{
  padding:12px 32px;border-radius:12px;border:2px solid;
  font-family:'Cairo',sans-serif;font-size:clamp(.85rem,2vw,1.05rem);font-weight:900;
  cursor:pointer;transition:all .3s;backdrop-filter:blur(20px);
}
.ov-btn-next.elm-next{border-color:var(--elm);color:var(--elm);background:rgba(56,189,248,.1);box-shadow:0 0 18px rgba(56,189,248,.22);}
.ov-btn-next.elm-next:hover{background:rgba(56,189,248,.2);color:#fff;box-shadow:0 0 36px rgba(56,189,248,.4);transform:translateY(-2px);}
.ov-btn-next.fan-next{border-color:var(--fan);color:var(--fan);background:rgba(251,146,60,.1);box-shadow:0 0 18px rgba(251,146,60,.22);}
.ov-btn-next.fan-next:hover{background:rgba(251,146,60,.2);color:#fff;box-shadow:0 0 36px rgba(251,146,60,.4);transform:translateY(-2px);}
.ov-btn-next.skip{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5);background:rgba(255,255,255,.04);}
.ov-btn-next.skip:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.24);transform:translateY(-2px);}
.overlay-hint{color:rgba(255,255,255,.38);font-size:.74rem;font-weight:600;letter-spacing:.5px;}
.choice-overlay.visible .overlay-hint{animation:revealBtn .5s .45s ease both;}
@keyframes revealBtn{from{opacity:0;transform:scale(.8) translateY(14px);}to{opacity:1;transform:scale(1) translateY(0);}}

/* ── PLAYER CONTROLS ── */
.player-controls{
  position:absolute;bottom:0;left:0;right:0;z-index:11;
  padding:12px 18px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.4) 60%,transparent 100%);
  display:flex;align-items:center;gap:14px;
  opacity:0;transition:opacity .4s;direction:ltr;pointer-events:none;
}
.player-wrap:hover .player-controls,
.player-controls.visible{opacity:1;pointer-events:all;}

/* ── RESTART BUTTON ── */
#restartBtn{
  padding:9px 26px;border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);backdrop-filter:blur(12px);
  color:rgba(255,255,255,.7);font-family:'Cairo',sans-serif;font-size:.82rem;font-weight:700;
  cursor:pointer;transition:all .3s;white-space:nowrap;
  animation:revealBtn .5s ease forwards;
  flex-shrink:0;
}
#restartBtn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff;transform:translateY(-2px);}

.ctrl-btn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;
  color:rgba(255,255,255,.9);cursor:pointer;font-size:1rem;padding:7px 11px;
  transition:all .2s;flex-shrink:0;line-height:1;
}
.ctrl-btn:hover{background:rgba(255,255,255,.18);color:#fff;transform:scale(1.08);border-color:rgba(255,255,255,.25);}
.progress-wrap{flex:1;display:flex;flex-direction:column;gap:5px;}
.progress-bar{width:100%;height:4px;background:rgba(255,255,255,.18);border-radius:4px;cursor:pointer;position:relative;transition:height .2s;}
.progress-bar:hover{height:6px;}
.progress-fill{height:100%;border-radius:4px;width:0%;background:linear-gradient(90deg,var(--elm),var(--fan));pointer-events:none;transition:width .1s linear;}
.time-display{font-size:.7rem;color:rgba(255,255,255,.55);font-weight:700;min-width:82px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.3px;}

/* ── FEATURED META ── */
.featured-meta{padding:20px 28px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);gap:12px;flex-wrap:wrap;}
.ep-info h3{font-size:1rem;font-weight:700;margin-bottom:5px;}
.ep-info p{font-size:.82rem;color:var(--dim);}
.ep-badge{padding:6px 16px;border-radius:20px;font-size:.78rem;font-weight:700;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.25);color:var(--elm);transition:all .4s;white-space:nowrap;}

/* ══════════════════════════════════════════
   VOTE OVERLAY — فوق الفيديو بعد الـ ending
   ══════════════════════════════════════════ */
.vote-overlay{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
  background:rgba(6,10,17,.82);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .6s ease;
  padding:10px 12px;
}
.vote-overlay.visible{opacity:1;pointer-events:all;animation:vovReveal .6s ease forwards;}
@keyframes vovReveal{from{opacity:0;}to{opacity:1;}}

.vov-top-row{
  width:100%;display:flex;align-items:center;justify-content:center;
  position:relative;min-height:1.4rem;
}
.vov-q{
  font-family:'Tajawal',sans-serif;font-size:1rem;font-weight:900;
  color:#fff;text-align:center;text-shadow:0 2px 20px rgba(0,0,0,.9);line-height:1.3;
}
#restartBtn{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  padding:3px 8px;border-radius:20px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.65);font-family:'Cairo',sans-serif;font-size:.6rem;font-weight:700;
  cursor:pointer;transition:all .3s;white-space:nowrap;
}
#restartBtn:hover{background:rgba(255,255,255,.18);color:#fff;}

.vov-choices{display:flex;gap:8px;justify-content:center;width:100%;}
.vov-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  flex:1;max-width:100px;padding:8px 5px;
  border-radius:12px;border:2px solid;background:transparent;
  font-family:'Cairo',sans-serif;cursor:pointer;
  transition:transform .3s,box-shadow .3s,background .3s,border-color .3s,opacity .3s;
  position:relative;overflow:hidden;
}
.vov-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);opacity:0;transition:opacity .3s;pointer-events:none;}
.vov-btn:hover::before{opacity:1;}
.vov-btn:not(.voted-state):hover{transform:translateY(-3px) scale(1.03);}
.vov-btn-elm{border-color:rgba(56,189,248,.4);color:var(--elm);box-shadow:0 0 16px rgba(56,189,248,.2);}
.vov-btn-elm:not(.voted-state):hover{background:rgba(56,189,248,.12);border-color:var(--elm);}
.vov-btn-fan{border-color:rgba(251,146,60,.4);color:var(--fan);box-shadow:0 0 16px rgba(251,146,60,.2);}
.vov-btn-fan:not(.voted-state):hover{background:rgba(251,146,60,.12);border-color:var(--fan);}

.vov-icon{font-size:.95rem;line-height:1;}
.vov-label{font-family:'Tajawal',sans-serif;font-size:.85rem;font-weight:900;}
.vov-bar-wrap{width:100%;height:3px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;opacity:0;transition:opacity .5s .15s;}
.vov-bar{height:100%;border-radius:99px;width:0%;transition:width 1.1s cubic-bezier(.34,1.56,.64,1);}
.vov-bar-elm{background:linear-gradient(90deg,var(--elm-d),var(--elm));}
.vov-bar-fan{background:linear-gradient(90deg,var(--fan-d),var(--fan));}
.vov-pct{font-size:.78rem;font-weight:900;min-height:.9rem;opacity:0;transition:opacity .5s .25s;}
.vov-btn.voted-state{cursor:default;pointer-events:none;}
.vov-btn.voted-state .vov-bar-wrap,.vov-btn.voted-state .vov-pct{opacity:1;}
.vov-btn.chosen.vov-btn-elm{background:rgba(56,189,248,.12);border-color:var(--elm);box-shadow:0 0 36px rgba(56,189,248,.35);}
.vov-btn.chosen.vov-btn-fan{background:rgba(251,146,60,.12);border-color:var(--fan);box-shadow:0 0 36px rgba(251,146,60,.35);}
.vov-btn.voted-state:not(.chosen){opacity:.35;}
.vov-total{font-size:.65rem;color:rgba(255,255,255,.4);font-weight:600;min-height:.85rem;}

/* تابلت */
@media(min-width:600px){
  .vov-btn{max-width:150px;padding:14px 12px;gap:6px;}
  .vov-icon{font-size:1.3rem;}
  .vov-label{font-size:1.1rem;}
  .vov-pct{font-size:.95rem;}
  .vov-q{font-size:1.15rem;}
  .vote-overlay{gap:12px;padding:16px;}
  .vov-choices{gap:14px;}
  #restartBtn{font-size:.72rem;padding:5px 14px;}
}
/* لاب / ديسكتوب */
@media(min-width:900px){
  .vov-btn{max-width:180px;padding:18px 16px;gap:8px;}
  .vov-icon{font-size:1.7rem;}
  .vov-label{font-size:1.3rem;}
  .vov-pct{font-size:1.1rem;}
  .vov-q{font-size:1.4rem;}
  .vote-overlay{gap:16px;padding:20px;}
  .vov-choices{gap:18px;}
  #restartBtn{font-size:.82rem;padding:7px 20px;border-radius:22px;}
}
/* تلفزيون */
@media(min-width:1400px){
  .vov-btn{max-width:240px;padding:26px 22px;}
  .vov-icon{font-size:2.2rem;}
  .vov-label{font-size:1.6rem;}
  .vov-pct{font-size:1.4rem;}
  .vov-q{font-size:1.8rem;}
}

/* ══ EPISODES PAGE ══ */
.episodes-page{max-width:1080px;margin:0 auto;padding:100px 24px 80px;}
.page-heading{font-family:'Tajawal',sans-serif;font-size:clamp(1.8rem,5vw,2.5rem);font-weight:900;margin-bottom:8px;}
.page-heading span{color:var(--elm);}
.page-sub{color:var(--dim);margin-bottom:48px;font-size:.9rem;}
.episodes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ep-card{border-radius:18px;overflow:hidden;background:var(--s1);border:1px solid var(--border);cursor:pointer;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;position:relative;}
.ep-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 24px 60px rgba(0,0,0,.4);}
.ep-card.locked{opacity:.4;cursor:not-allowed;}
.ep-card.locked:hover{transform:none;box-shadow:none;}
.ep-thumb{height:175px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.ep-thumb-bg{position:absolute;inset:0;}
.ep-thumb-icon{font-size:3.5rem;position:relative;z-index:1;opacity:.5;transition:transform .4s,opacity .4s;}
.ep-card:hover .ep-thumb-icon{transform:scale(1.2);opacity:.8;}
.ep-num{position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;border-radius:8px;background:rgba(0,0,0,.6);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--dim);}
.lock-ic{position:absolute;top:12px;left:12px;z-index:2;font-size:1rem;}
.ep-body{padding:18px;}
.ep-body h3{font-size:.95rem;font-weight:700;margin-bottom:5px;}
.ep-body p{font-size:.8rem;color:var(--dim);line-height:1.75;}
.ep-footer{padding:10px 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.ep-dur{font-size:.74rem;color:var(--dim);font-weight:600;}
.ep-tags{display:flex;gap:5px;}
.tag{padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:700;}
.t-e{background:rgba(56,189,248,.08);color:var(--elm);border:1px solid rgba(56,189,248,.18);}
.t-f{background:rgba(251,146,60,.08);color:var(--fan);border:1px solid rgba(251,146,60,.18);}

/* ══ ABOUT PAGE ══ */
.about-page{max-width:760px;margin:0 auto;padding:100px 24px 80px;}
.about-hero{text-align:center;margin-bottom:64px;}
.about-logo{font-family:'Tajawal',sans-serif;font-size:clamp(2rem,6vw,3.2rem);font-weight:900;background:linear-gradient(135deg,var(--elm),var(--fan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px;}
.about-hero p{color:var(--dim);font-size:1rem;line-height:2;max-width:540px;margin:0 auto;}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:48px;}
.pillar{padding:28px;border-radius:16px;background:var(--s1);border:1px solid var(--border);transition:transform .3s,border-color .3s,box-shadow .3s;cursor:default;}
.pillar:hover{transform:translateY(-4px);border-color:rgba(56,189,248,.2);box-shadow:0 12px 40px rgba(0,0,0,.3);}
.pillar-ic{font-size:1.8rem;margin-bottom:12px;}
.pillar h3{font-size:.92rem;font-weight:700;margin-bottom:7px;}
.pillar p{font-size:.8rem;color:var(--dim);line-height:1.75;}
.slogan-big{padding:48px 36px;border-radius:20px;text-align:center;background:linear-gradient(135deg,rgba(56,189,248,.04),rgba(251,146,60,.04));border:1px solid var(--border);}
.slogan-steps{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;}
.step-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 36px;border-radius:16px;border:1px solid var(--border);cursor:default;transition:all .35s cubic-bezier(.34,1.56,.64,1);background:rgba(255,255,255,.02);opacity:0;transform:translateY(20px);}
.step-item.animated{opacity:1;transform:translateY(0);}
.step-num{font-size:.68rem;font-weight:900;letter-spacing:1px;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.06);color:var(--dim);}
.step-word{font-family:'Tajawal',sans-serif;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:900;transition:transform .3s;}
.step-word.se{color:var(--elm);}
.step-word.sf{color:var(--fan);}
.step-sub{font-size:.78rem;color:var(--dim);font-weight:600;}
.step-item:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.12);box-shadow:0 16px 40px rgba(0,0,0,.3);}
.step-item:hover .step-word{transform:scale(1.1);}
.step-connector{font-size:1.4rem;color:var(--dim);padding:0 12px;opacity:0;transition:opacity .4s;}
.step-connector.show{opacity:1;}

/* ══ SWITCH PATH BUTTON ══ */
.switch-path-btn{
  margin-right:auto;padding:3px 10px;border-radius:20px;border:1px solid;
  font-family:'Cairo',sans-serif;font-size:.65rem;font-weight:700;
  cursor:pointer;transition:all .25s;pointer-events:all;white-space:nowrap;
}
.switch-path-btn.switch-to-fan{background:rgba(251,146,60,.08);border-color:rgba(251,146,60,.35);color:var(--fan);}
.switch-path-btn.switch-to-fan:hover{background:rgba(251,146,60,.2);box-shadow:0 0 12px rgba(251,146,60,.3);}
.switch-path-btn.switch-to-elm{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.35);color:var(--elm);}
.switch-path-btn.switch-to-elm:hover{background:rgba(56,189,248,.2);box-shadow:0 0 12px rgba(56,189,248,.3);}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

@media(max-width:900px){
  nav{padding:0 24px;}
  .nav-links{gap:20px;}
  .nav-links a{font-size:.8rem;}
  .orb-elm{width:350px;height:350px;}
  .orb-fan{width:300px;height:300px;}
  .featured-section{padding:0 16px 80px;}
  .featured-card{border-radius:18px;}
  .episodes-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .pillars{gap:12px;}
  .step-item{padding:18px 24px;}
  .ov-btn{padding:12px 36px;}
}

@media(max-width:640px){
  body{cursor:auto;}
  #cursor,#cursor-ring{display:none;}
  nav{padding:0 16px;height:56px;}
  .nav-logo{font-size:1.1rem;}
  .nav-links{gap:12px;}
  .nav-links a{font-size:.75rem;letter-spacing:0;}
  .hero{padding:80px 16px 60px;}
  .hero-sub{font-size:.9rem;}
  .hero-cta{flex-direction:column;align-items:center;width:100%;}
  .btn-p,.btn-s{width:100%;max-width:320px;text-align:center;}
  .slogan-strip{gap:4px;}
  .slogan-word{padding:8px 14px;font-size:.85rem;}
  .scroll-hint{display:none;}
  .player-wrap{aspect-ratio:16/9;}
  .player-controls{padding:8px 12px 12px;gap:8px;}
  .ctrl-btn{padding:6px 8px;font-size:.85rem;}
  .time-display{font-size:.62rem;min-width:68px;}
  .ov-btn{padding:12px 28px;font-size:1rem;}
  .overlay-btns-choice{gap:12px;}
  .ov-btn-next{padding:10px 20px;font-size:.85rem;}
  .overlay-btns-continue{flex-direction:column;align-items:center;}
  .featured-meta{flex-direction:column;align-items:flex-start;padding:16px 18px;}
  .ep-badge{align-self:flex-start;}
  .episodes-page{padding:80px 16px 60px;}
  .episodes-grid{grid-template-columns:1fr;}
  .about-page{padding:80px 16px 60px;}
  .pillars{grid-template-columns:1fr;}
  .slogan-big{padding:32px 20px;}
  .slogan-steps{flex-direction:column;}
  .step-connector{transform:rotate(90deg);}
  .step-item{width:100%;max-width:220px;}
  .switch-path-btn{font-size:.6rem;padding:3px 8px;}
}

@media(max-width:380px){
  .nav-links:last-child{display:none;}
  .ov-btn{padding:10px 20px;font-size:.95rem;}
  .path-label{font-size:.6rem;padding:2px 8px;}
  .steps-dots .step-dot{width:7px;height:7px;}
  .episodes-grid{grid-template-columns:1fr;}
}


/* ══════════════════════════════════════════
   EP NAV — الحلقة السابقة / التالية
   ══════════════════════════════════════════ */

.ep-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 24px 20px;
  border-top: 1px solid var(--border);
}

.ep-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),
              background .22s, border-color .22s, box-shadow .22s;
  position: relative;
  overflow: hidden;
  min-width: 0;
  max-width: 48%;
  /* justify-content: space-between عشان السهم دايما على الحافة الخارجية */
  justify-content: space-between;
}
.ep-nav-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .22s;
}
.ep-nav-btn:hover { transform: translateY(-2px); }

/* السابقة — السهم على اليمين (أول عنصر في RTL = يمين) — لون علم */
.ep-nav-prev::after {
  background: linear-gradient(135deg, rgba(56,189,248,.1), transparent);
}
.ep-nav-prev:hover {
  border-color: rgba(56,189,248,.3);
  background: rgba(56,189,248,.05);
  box-shadow: 0 6px 22px rgba(56,189,248,.14);
}
.ep-nav-prev:hover::after { opacity: 1; }

/* التالية — السهم على اليسار (آخر عنصر في RTL = يسار) — لون فنكوش */
.ep-nav-next::after {
  background: linear-gradient(225deg, rgba(251,146,60,.1), transparent);
}
.ep-nav-next:hover {
  border-color: rgba(251,146,60,.3);
  background: rgba(251,146,60,.05);
  box-shadow: 0 6px 22px rgba(251,146,60,.14);
}
.ep-nav-next:hover::after { opacity: 1; }

/* الأسهم SVG */
.ep-nav-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  z-index: 1;
}
.ep-nav-arrow svg { display: block; }
.ep-nav-arrow-prev { color: var(--elm); }
.ep-nav-arrow-next { color: var(--fan); }
.ep-nav-prev:hover .ep-nav-arrow { transform: translateX(3px) scale(1.12); }
.ep-nav-next:hover .ep-nav-arrow { transform: translateX(-3px) scale(1.12); }

/* النص */
.ep-nav-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
  min-width: 0;
}
.ep-nav-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--dim);
  white-space: nowrap;
}
.ep-nav-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  transition: color .22s;
}
.ep-nav-prev:hover .ep-nav-name { color: var(--elm); }
.ep-nav-next:hover .ep-nav-name { color: var(--fan); }

/* تابلت */
@media(min-width:600px) and (max-width:899px) {
  .ep-nav { padding: 10px 20px 18px; gap: 8px; }
  .ep-nav-btn { padding: 9px 14px; border-radius: 12px; }
  .ep-nav-name { max-width: 150px; font-size: .78rem; }
  .ep-nav-arrow svg { width: 16px; height: 16px; }
}

/* موبايل */
@media(max-width:640px) {
  .ep-nav {
    flex-direction: row;
    padding: 6px 12px 12px;
    gap: 8px;
  }
  .ep-nav-btn {
    max-width: 50%;
    padding: 7px 10px;
    border-radius: 10px;
    flex: 1;
  }
  .ep-nav-name { max-width: none; font-size: .72rem; }
  .ep-nav-label { font-size: .55rem; }
  .ep-nav-arrow svg { width: 13px; height: 13px; }
}

/* ══════════════════════════════════════════
   SHARE — إضافة معزولة
   ══════════════════════════════════════════ */

/* زرار المشاركة داخل vote-overlay */
.share-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.85);
  font-family: 'Cairo', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .2px;
  will-change: opacity, transform;
  /* مخفي في الأول */
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1),
              background .2s, border-color .2s, box-shadow .2s;
  animation: none;
}
.share-trigger.share-on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  animation: sharePulse 3s ease-in-out infinite;
}
@keyframes sharePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.0);  border-color: rgba(255,255,255,.18); }
  50%       { box-shadow: 0 0 14px 2px rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
}
.share-trigger:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.3);
  transform: translateY(-2px);
  animation: none;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
}

/* القائمة — مربوطة بـ body مش بالـ overlay */
.share-menu {
  position: fixed;
  z-index: 9999;
  background: rgba(8,15,26,.96);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 160px;
  /* مخفية */
  opacity: 0;
  pointer-events: none;
  transform: scale(.94) translateY(4px);
  transform-origin: top center;
  transition: opacity .18s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 10px 36px rgba(0,0,0,.55);
}
.share-menu.open {
  opacity: 1;
  pointer-events: all;
  transform: scale(1) translateY(0);
}

.share-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-family: 'Cairo', sans-serif;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
  width: 100%;
  direction: rtl;
  text-align: right;
  white-space: nowrap;
}
.share-opt:hover { background: rgba(255,255,255,.09); color: #fff; }
.share-opt span  { font-size: .95rem; flex-shrink: 0; }

/* تابلت */
@media (min-width:600px) {
  .share-trigger { font-size: .82rem; padding: 9px 22px; }
}
/* لاب / ديسكتوب */
@media (min-width:900px) {
  .share-trigger { font-size: .86rem; padding: 10px 26px; }
  .share-opt     { font-size: .86rem; }
}

/* ══════════════════════════════════════════
   LOADING SCREEN
   ══════════════════════════════════════════ */
#appLoader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
#appLoader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.loader-logo {
  font-family: 'Tajawal', sans-serif;
  font-size: clamp(1.8rem, 6vw, 3rem);
  font-weight: 900;
  color: var(--text);
}
.loader-elm {
  color: var(--elm);
  text-shadow: 0 0 30px rgba(56,189,248,.5);
}
.loader-fan {
  color: var(--fan);
  text-shadow: 0 0 30px rgba(251,146,60,.5);
}
.loader-bar {
  width: 180px;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  overflow: hidden;
}
.loader-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--elm), var(--fan));
  transition: width .3s ease;
}