/* ===================================================================
   watch-free — نظام التصميم

   ثلاث أفكار مدموجة، لكل واحدة عملٌ لا زينة:

   • «الجدار»   — الملصق هو البطل. لا لونَ هويّةٍ ثابتًا: الصفحة تتشرّب
                 لونَ العنوان الذي تمرّ فوقه، فاللونُ يأتي من المحتوى.
   • «الترجمة» — تعدّدُ اللغات هو الهويّة: كلُّ عنوانٍ يظهر بلغته الأصلية
                 وتحته ترجمتُه، والقصّةُ داخل شريطِ ترجمةٍ كشريط الفيلم.
   • «الشريط»  — التسلسلُ يُرسَم مادّيًّا: الحلقاتُ إطاراتٌ مرقّمةٌ على بَكَرة،
                 والترقيمُ هنا وحده لأنّ الحلقات وحدَها متسلسلةٌ فعلًا.

   القرارات: صفرُ انحناءٍ تقريبًا (2px) — ملصقاتٌ مطبوعة لا بطاقاتُ SaaS ·
   لا ظلالَ رماديّةً ناعمةً تحت كلِّ شيء · لا فواصلَ نقطيّةً بالبيانات ·
   لا حركاتِ دخولٍ للأقسام: الحركةُ جوابٌ على فعلِ الزائر فقط.
   =================================================================== */

:root{
  /* الأسطح — حبرٌ محايد، لا أزرقَ ولا بنفسجيّ */
  --ink:#0B0B0C;
  --bg:#0B0B0C;           /* اسمٌ قديم يُستعمل بصفحاتٍ أخرى */
  --bg-soft:#111113;
  --surface:#17171A;
  --surface-2:#202024;
  --line:#26262B;
  --line-soft:#1B1B1F;

  /* النص — ورقٌ دافئٌ قليلًا، لا أبيضَ ثلجيّ */
  --txt:#F5F3EF;
  --txt-2:#B6B4AE;
  --dim:#7E7C78;

  /* اللمسةُ الوحيدة: كهرمانيُّ شريطِ الترجمة */
  --acc:#E8B647;
  --acc-2:#E8B647;
  --acc-soft:rgba(232,182,71,.13);
  --gold:#E8B647;
  --ok:#7FB77E;
  --bad:#C4553D;
  --grad:linear-gradient(135deg,#E8B647,#C98A2E);

  /* اللونُ المتسرّبُ من الملصق — يكتبه app.js عند الحوم */
  --spill:#23232B;

  /* الخطوط — عائلتان ودورٌ ثالثٌ واحد */
  /* Heebo قبل البدائل: Zain وReadex Pro لا يغطّيان العبريّة، فبدونه
     تظهر العبريّةُ بخطِّ النظامِ والواجهةُ بهويّتين. و`unicode-range`
     يجعل المتصفّحَ يحمّله للنصِّ العبريِّ وحدَه. */
  --f-ui:"Readex Pro","Heebo","SF Arabic","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-display:"Zain","Heebo","Readex Pro","SF Arabic",system-ui,sans-serif;
  --f-orig:"Instrument Serif",Georgia,"Times New Roman",serif;

  /* الشكل — حوافُّ الطباعة لا حوافُّ البطاقات */
  --r-sm:2px;
  --r:2px;
  --r-lg:3px;
  --shadow:0 40px 90px -30px rgba(0,0,0,.9);
  /* --nav-h: أدنى ارتفاعٍ لصفّ الأدوات (ثابتٌ يُقرأ بـ CSS وحدَه).
     --nav-actual: الارتفاعُ المقيسُ فعلًا، يكتبه app.js.
     🔴 لا يجوز أن يكون المتغيّران واحدًا: `.nav-in` تقرأ الأوّلَ في
     `min-height`، فلو كتب القياسُ فيه صارت حلقة — يقيس فيكبر فيقيس.
     وقد صار ذلك فعلًا: بلغ الشريطُ 353 بكسل على شاشةٍ عرضُها 1280. */
  --nav-h:62px;
  --nav-actual:88px;
  --note-h:26px;

  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--f-ui);
  font-size:15.5px;
  font-weight:300;
  line-height:1.75;
  font-variant-numeric:lining-nums tabular-nums;
  overflow-x:hidden;
}
.num{font-feature-settings:"lnum" 1; unicode-bidi:plaintext}
.en{unicode-bidi:plaintext}

img{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer}
a{color:inherit; text-decoration:none}

h1,h2,h3{font-family:var(--f-display); font-weight:900; letter-spacing:-.015em; line-height:1.08}

.wrap{max-width:1560px; margin-inline:auto; padding-inline:clamp(16px,3.4vw,52px)}

.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

:focus-visible{outline:2px solid var(--acc); outline-offset:3px}

/* التسرُّبُ اللونيّ: طبقةٌ واحدةٌ خلف الصفحة كلِّها تتبع ما تحوم فوقه */
body::before{
  content:""; position:fixed; inset-block-start:0; inset-inline:0; height:78vh;
  z-index:-1; pointer-events:none;
  background:radial-gradient(86% 100% at 72% 0%,var(--spill) 0%,transparent 68%);
  opacity:.5; filter:blur(38px);
  transition:background .55s ease;
}

/* ===================== لمحةُ الافتتاح =====================
   نفسُ حركةِ الشعارِ المصمَّمةِ بـ Remotion (`brand/src/Brand.tsx`)،
   لكنّها هنا **بـ CSS خالص**: الشريطُ يُسحَب، تُثقَب ثقوبُه الثلاثةُ
   بالتتابع، ثمّ يُكشَف الاسم.

   ليش لا يُستعمل مقطعُ Remotion نفسُه هنا: ناتجُه 575 كيلوبايت،
   **وأوّلُ زيارةٍ لا يجوز أن تدفع ذلك مقابلَ زينة**. وCSS صفرُ بايت
   وحادٌّ بأيِّ دقّة. المقطعُ يبقى للمتاجرِ والمشاركةِ حيث الحجمُ مقبول.

   وتُعرض **مرّةً واحدةً لكلِّ زائر**، وتُتخطّى كاملةً مع reduced-motion. */
.intro{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:center;
  animation:introOut .42s ease 1.42s forwards;
}
.intro-in{display:flex; align-items:center; gap:clamp(12px,2.2vw,26px); direction:rtl}
.intro-strip{
  width:clamp(40px,6.4vw,74px); aspect-ratio:11/19; border-radius:6px;
  background:var(--acc); flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding-block:8.5%;
  animation:introPull .6s cubic-bezier(.18,.85,.25,1) both;
}
.intro-strip i{
  display:block; width:46%; height:10.5%; border-radius:3px; background:var(--ink);
  transform:scaleY(0); animation:introPunch .26s cubic-bezier(.2,.9,.3,1) both;
}
.intro-strip i:nth-child(1){animation-delay:.38s}
.intro-strip i:nth-child(2){animation-delay:.45s}
.intro-strip i:nth-child(3){animation-delay:.52s}
.intro-name{
  font-family:var(--f-display); font-weight:900; direction:ltr;
  font-size:clamp(34px,6.6vw,74px); letter-spacing:-.03em; line-height:1;
  color:var(--txt); white-space:nowrap; overflow:hidden;
  /* يبدأ مع الثقوبِ لا بعدها: الاسمُ أهمُّ عنصرٍ باللمحة، فلا يُؤجَّل */
  animation:introName .5s cubic-bezier(.18,.85,.25,1) .40s both;
}
.intro-sub{
  position:absolute; inset-block-end:19%; font-size:clamp(11.5px,1.5vw,15px);
  color:var(--dim); font-weight:300; text-align:center; line-height:1.7;
  /* كان نصًّا طويلًا يفيض خارجَ الشاشةِ على الجوّال */
  max-width:min(34ch,86vw); padding-inline:16px;
  animation:introFade .45s ease .78s both;
}
@keyframes introPull{from{transform:translateY(-62vh)} to{transform:translateY(0)}}
@keyframes introPunch{from{transform:scaleY(0)} to{transform:scaleY(1)}}
@keyframes introName{from{max-width:0; opacity:0} to{max-width:12ch; opacity:1}}
@keyframes introFade{from{opacity:0} to{opacity:1}}
@keyframes introOut{to{opacity:0; visibility:hidden}}

/* ===================== الشريط العلوي ===================== */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:60;
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(to bottom,rgba(11,11,12,.94),rgba(11,11,12,0));
  transition:background .3s ease, border-color .3s ease;
  border-block-end:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(11,11,12,.9);
  backdrop-filter:blur(18px) saturate(130%);
  border-block-end-color:var(--line-soft);
}
.nav-in{display:flex; align-items:center; gap:clamp(12px,2.2vw,30px); width:100%;
        min-height:var(--nav-h)}

.brand{display:flex; align-items:baseline; gap:7px; flex:none}
/* الشعار: قطعةٌ من شريطِ فيلم — نفسُ شكلِ الأيقونة بالضبط.
   الثقوبُ مستطيلةٌ لا دائريّة (ثقبُ 35mm مستطيلٌ فعلًا)، وثلاثةٌ لا
   اثنان لأنّ التكرارَ هو ما يقول «شريط». */
.brand-mark{
  width:12px; height:20px; border-radius:2px; flex:none; align-self:center;
  background-color:var(--acc);
  background-image:
    linear-gradient(var(--ink) 0 0),
    linear-gradient(var(--ink) 0 0),
    linear-gradient(var(--ink) 0 0);
  background-repeat:no-repeat;
  background-size:6px 2px;
  background-position:center 2.6px, center center, center calc(100% - 2.6px);
}
.brand-name{font-family:var(--f-display); font-weight:900; font-size:22px;
            letter-spacing:-.03em; line-height:1; direction:ltr}

.nav-links{display:flex; gap:2px; flex:none}
.nav-links button{
  background:none; border:0; padding:7px 13px; border-radius:2px;
  color:var(--dim); font-weight:400; font-size:14px;
  transition:color .15s;
}
.nav-links button:hover{color:var(--txt)}
.nav-links button.is-on{color:var(--txt); box-shadow:inset 0 -1.5px 0 var(--acc)}

.search{position:relative; margin-inline-start:auto; flex:1 1 auto; max-width:380px}
.search input{
  width:100%; height:38px; padding-inline:36px 14px;
  background:transparent; border:0; border-block-end:1px solid var(--line);
  border-radius:0; color:var(--txt); font-size:14px; font-family:var(--f-ui);
  font-weight:300; outline:none;
  transition:border-color .18s;
}
.search input::placeholder{color:var(--dim)}
.search input:focus{border-block-end-color:var(--acc)}
.search svg{position:absolute; inset-inline-start:8px; inset-block-start:11px;
            color:var(--dim); pointer-events:none}
.search .clear{
  position:absolute; inset-inline-end:2px; inset-block-start:7px;
  width:26px; height:26px; border:0; border-radius:0; background:none; color:var(--dim);
  display:none; place-items:center;
}
.search.has-val .clear{display:grid}
.search .clear:hover{color:var(--txt)}

.pickers{display:flex; gap:8px; flex:none}
.picker{
  height:32px; background:transparent; color:var(--txt-2);
  border:1px solid var(--line); border-radius:2px; padding-inline:9px;
  font-size:12.5px; font-family:var(--f-ui); font-weight:400; outline:none;
}
.picker:focus{border-color:var(--acc)}
.picker option{background:var(--surface); color:var(--txt)}

.profile-note{
  min-height:var(--note-h); display:flex; align-items:center;
  font-size:11.5px; color:var(--dim); font-weight:300;
}

/* ===================== البطل ===================== */
.hero{
  position:relative;
  padding-block:calc(var(--nav-actual) + clamp(26px,4vw,54px)) clamp(26px,4vw,52px);
  overflow:hidden; isolation:isolate;
}
.hero .wrap{position:relative}
.hero-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(170px,19vw,262px);
  gap:clamp(22px,4vw,58px); align-items:end;
}
/* الخلفيةُ ليست صورةً عريضةً ممدودة: هي الملصقُ نفسه مكبَّرًا ومموَّهًا،
   فيبقى اللونُ من العنوان لا من زخرفة. */
.hero-bg{position:absolute; inset:0; z-index:-2; background:var(--bg-soft); overflow:hidden}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 22%;
             opacity:.3; filter:blur(52px) saturate(1.25); transform:scale(1.25)}
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,var(--ink) 3%,rgba(11,11,12,.62) 55%,rgba(11,11,12,.28) 100%);
}
.hero.is-blank{min-height:0}
.hero.is-blank .hero-bg{background:var(--bg-soft)}

.hero-tag{font-size:11.5px; color:var(--dim); font-weight:400; margin-block-end:12px}
.hero-orig{
  font-family:var(--f-orig); font-style:italic; unicode-bidi:isolate;
  font-size:clamp(19px,2.4vw,31px); line-height:1.15; color:#A9A7A2; margin:0 0 2px;
}
.hero h1{
  margin:0; font-size:clamp(34px,6.2vw,80px); line-height:.98;
  max-width:16ch;
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center;
  margin-block-start:15px; font-size:12.5px; color:var(--dim); font-weight:400;
}
.hero-meta .sep{display:none}   /* لا فواصلَ نقطيّة: المسافةُ تفصل */

/* القصّةُ داخل شريطِ ترجمة */
.hero-plot{
  margin:18px 0 0; max-width:56ch; font-size:14.5px; line-height:1.9;
  color:var(--txt-2); font-weight:300;
  background:rgba(245,243,239,.055); border-inline-start:2px solid var(--acc);
  padding:10px 15px;
}
.hero-cta{display:flex; gap:9px; flex-wrap:wrap; margin-block-start:20px}
.hero-poster{position:relative}
.hero-poster img{width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:2px}

/* ===================== الأزرار ===================== */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  border:0; border-radius:2px; padding:11px 24px;
  font-size:14px; font-weight:500; font-family:var(--f-ui);
  transition:background .16s, color .16s, border-color .16s;
}
.btn-main{background:var(--txt); color:#0B0B0C}
.btn-main:hover{background:#fff}
.btn-ghost{background:none; color:var(--txt); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--txt-2)}
.btn-soft{background:var(--surface); color:var(--txt-2); border:1px solid var(--line-soft)}
.btn-soft:hover{color:var(--txt)}
.btn.is-saved{background:var(--acc-soft); color:var(--acc); border:1px solid rgba(232,182,71,.4)}
.btn:disabled{opacity:.45; cursor:default}

/* ===================== الصفوف ===================== */
.row{margin-block:clamp(26px,3.6vw,46px)}
.row-head{
  display:flex; align-items:baseline; gap:12px; margin-block-end:14px;
}
.row-head h2{font-size:clamp(19px,2.3vw,27px); margin:0}
.row-head span{font-size:11.5px; color:var(--dim); font-weight:300}

/* البَكَرة: شريطٌ بثقوبٍ فوق وتحت، والبطاقاتُ إطاراتٌ عليه */
.rail{
  display:flex; gap:13px; overflow-x:auto; overflow-y:hidden;
  padding-block:15px;
  scroll-snap-type:x proximity; scrollbar-width:none;
  border-block:1px solid var(--line-soft);
  background:
    repeating-linear-gradient(to right,transparent 0 21px,var(--line-soft) 21px 30px)
      top/100% 7px no-repeat,
    repeating-linear-gradient(to right,transparent 0 21px,var(--line-soft) 21px 30px)
      bottom/100% 7px no-repeat;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}

/* الشبكةُ العاديّة (أفلام · مسلسلات · قائمتي · البحث) */
.grid{
  display:grid; gap:clamp(15px,1.9vw,24px) clamp(11px,1.3vw,16px);
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
}

/* الجدار: نفسُ البطاقات بإيقاعٍ غيرِ منتظم — ملصقان كبيران يكسران الصفَّ */
.wall{
  display:grid; gap:clamp(11px,1.3vw,16px);
  grid-template-columns:repeat(6,minmax(0,1fr));
}
/* الملصقُ الكبير يملأ الخليّتين طولًا بدل أن يترك فراغًا تحته:
   قصٌّ بسيطٌ أهونُ من فجوةٍ تكسر الجدار. */
.wall > .card.is-big{grid-column:span 2; grid-row:span 2}
.wall > .card.is-big .poster{aspect-ratio:auto; flex:1 1 auto; min-height:0}
.wall > .card.is-big .card-title{font-size:20px}
.wall > .card.is-big .card-orig{font-size:14px}

/* ===================== البطاقة ===================== */
.card{
  background:none; border:0; padding:0; text-align:start;
  display:flex; flex-direction:column; min-width:0;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.rail .card{flex:0 0 clamp(132px,15vw,168px)}
.card:hover{transform:translateY(-5px)}
.card:hover .poster{border-color:rgba(245,243,239,.34)}
.card:hover .hover-play{opacity:1}

.poster{
  position:relative; aspect-ratio:2/3; border-radius:2px; overflow:hidden;
  background:var(--surface); border:1px solid var(--line-soft);
  transition:border-color .22s;
}
.poster img{width:100%; height:100%; object-fit:cover}
.poster-fb{
  width:100%; height:100%; display:grid; place-items:center;
  font-family:var(--f-display); font-size:44px; font-weight:900; color:rgba(255,255,255,.72);
}
.rate{
  position:absolute; inset-block-start:7px; inset-inline-start:7px;
  background:rgba(11,11,12,.82); color:var(--txt);
  font-size:11px; font-weight:500; padding:2px 7px; border-radius:2px;
  display:flex; align-items:center; gap:3px;
}
.rate b{color:var(--acc); font-weight:400}
.kind{
  position:absolute; inset-block-start:7px; inset-inline-end:7px;
  background:rgba(11,11,12,.82); color:var(--txt-2);
  font-size:10.5px; font-weight:400; padding:2px 7px; border-radius:2px;
}
.freetag{
  position:absolute; inset-block-end:7px; inset-inline-start:7px;
  background:var(--acc); color:#17120A;
  font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:2px;
}
.hover-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(11,11,12,.34); opacity:0; transition:opacity .22s;
}
.hover-play i{
  width:42px; height:42px; border-radius:50%; background:rgba(245,243,239,.95);
  display:grid; place-items:center;
}
.hover-play i::after{
  content:""; width:0; height:0;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:11px solid #0B0B0C; margin-left:3px;
}
.card-prog{
  position:absolute; inset-block-end:0; inset-inline:0; height:2.5px;
  background:rgba(11,11,12,.7);
}
.card-prog i{display:block; height:100%; background:var(--acc)}

.card-title{
  font-size:13.5px; font-weight:500; line-height:1.45; margin-block-start:9px;
  color:var(--txt);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* العنوانُ الأصليّ: يظهر فقط حين يختلف عن المترجَم */
.card-orig{
  font-family:var(--f-orig); font-style:italic; unicode-bidi:isolate;
  text-align:start; font-size:12.5px; line-height:1.3; color:var(--dim);
  margin-block-start:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-sub{font-size:11.5px; color:#65635F; font-weight:300; margin-block-start:2px}

/* ===================== نافذة التفاصيل ===================== */
.sheet{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(6,6,7,.9); backdrop-filter:blur(7px);
  overflow-y:auto; padding:clamp(12px,3vw,44px);
}
.sheet.is-open{display:block}
.sheet-box{
  max-width:1060px; margin-inline:auto;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:3px; box-shadow:var(--shadow); overflow:hidden;
  animation:sheetIn .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes sheetIn{from{opacity:0; transform:translateY(16px) scale(.988)} to{opacity:1}}

.sheet-close{
  position:absolute; inset-block-start:clamp(18px,3vw,50px);
  inset-inline-end:clamp(18px,3vw,50px); z-index:3;
  width:38px; height:38px; border:1px solid var(--line); border-radius:2px;
  background:rgba(11,11,12,.8); color:var(--txt); display:grid; place-items:center;
}
.sheet-close:hover{background:var(--surface-2)}

/* المسرح: الملصق/المشغّل */
.stage{position:relative; background:#000; aspect-ratio:16/9; overflow:hidden}
.stage iframe,.stage video{width:100%; height:100%; border:0; display:block}
.stage-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(11,11,12,.3); border:0; width:100%;
}
.stage-play i{
  width:66px; height:66px; border-radius:50%; background:rgba(245,243,239,.95);
  display:grid; place-items:center;
}
.stage-play i::after{
  content:""; width:0; height:0;
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  border-left:17px solid #0B0B0C; margin-left:4px;
}
.stage-note{
  padding:9px clamp(16px,2.4vw,30px); font-size:11.5px; color:var(--dim);
  border-block-end:1px solid var(--line-soft); font-weight:300;
}

.sheet-head{padding:clamp(18px,2.6vw,32px) clamp(16px,2.4vw,34px) 0}
.sheet-head .hero-orig{font-size:clamp(16px,1.9vw,23px)}
.sheet-head h2{font-size:clamp(25px,3.5vw,42px); margin:0}
.sheet-body{padding:0 clamp(16px,2.4vw,34px) clamp(22px,3vw,36px)}

.facts{display:flex; flex-wrap:wrap; gap:5px 22px; margin-block-start:13px}
.fact{font-size:12.5px; color:var(--dim); font-weight:400}
.fact b{color:var(--txt-2); font-weight:400}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-block-start:13px}
.chip{
  font-size:11.5px; color:var(--txt-2); font-weight:400;
  border:1px solid var(--line); border-radius:2px; padding:3px 10px;
}
.chip.is-clickable:hover{border-color:var(--acc); color:var(--acc)}

.sheet-plot{
  margin:16px 0 0; font-size:14.5px; line-height:1.95; color:var(--txt-2); font-weight:300;
  max-width:70ch;
  background:rgba(245,243,239,.05); border-inline-start:2px solid var(--acc);
  padding:11px 15px;
}
.sheet-actions{display:flex; flex-wrap:wrap; gap:9px; margin-block-start:18px}

.badge{
  display:inline-block; font-size:10.5px; font-weight:500; padding:2px 8px;
  border-radius:2px; background:var(--surface-2); color:var(--txt-2);
}
.badge.warn{background:rgba(232,182,71,.14); color:var(--acc)}
.badge.bad{background:rgba(196,85,61,.16); color:#E08A72}

/* شريطُ الترجمة الآليّة */
.tr-bar{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-block-start:11px}
.tr-tag{font-size:11px; color:var(--dim); font-weight:300}
.tr-toggle{
  background:none; border:1px solid var(--line); border-radius:2px;
  padding:3px 11px; font-size:11.5px; color:var(--txt-2); font-weight:400;
}
.tr-toggle:hover{border-color:var(--txt-2); color:var(--txt)}

/* ===================== الحلقات ===================== */
.eps{margin-block-start:clamp(22px,3vw,34px); border-block-start:1px solid var(--line-soft);
     padding-block-start:clamp(18px,2.4vw,26px)}
.eps-head{display:flex; align-items:center; gap:14px; margin-block-end:14px}
.eps-head h3{font-size:19px; margin:0}
.eps-head select{
  height:32px; background:transparent; color:var(--txt-2);
  border:1px solid var(--line); border-radius:2px; padding-inline:9px;
  font-size:12.5px; font-family:var(--f-ui); font-weight:400; outline:none;
}
.eps-head select:focus{border-color:var(--acc)}
.eps-head select option{background:var(--surface); color:var(--txt)}

.ep-list{display:flex; flex-direction:column}

/* كلُّ حلقةٍ إطارٌ على بَكَرة: رقمُها يُطبَع ضخمًا خلفها، والثقوبُ تفصل بينها */
.ep{
  position:relative; display:grid;
  grid-template-columns:clamp(96px,13vw,152px) minmax(0,1fr) auto;
  gap:clamp(11px,1.6vw,20px); align-items:center;
  padding-block:14px; border-block-end:1px solid var(--line-soft);
  overflow:hidden;
}
.ep::before{
  content:attr(data-n); position:absolute; inset-block-start:50%;
  inset-inline-end:-6px; transform:translateY(-50%);
  font-family:var(--f-display); font-weight:900; font-size:clamp(54px,8vw,104px);
  line-height:1; color:rgba(245,243,239,.038); pointer-events:none; letter-spacing:-.04em;
}
.ep:hover{background:rgba(245,243,239,.022)}
.ep-thumb{
  aspect-ratio:16/9; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:2px; overflow:hidden; display:grid; place-items:center;
}
.ep-thumb img{width:100%; height:100%; object-fit:cover}
.ep-thumb-no{font-family:var(--f-display); font-size:25px; font-weight:900; color:var(--dim)}
.ep-body{min-width:0; position:relative}
.ep-top{display:flex; align-items:baseline; gap:9px}
.ep-num{
  font-size:11px; color:var(--acc); font-weight:500; flex:none;
  border:1px solid rgba(232,182,71,.32); border-radius:2px; padding:0 6px;
}
.ep-name{font-size:14.5px; font-weight:500; line-height:1.4}
.ep-meta{display:flex; flex-wrap:wrap; gap:2px 16px; font-size:11.5px; color:var(--dim);
         margin-block-start:3px; font-weight:300}
.ep-plot{
  font-size:13px; color:var(--txt-2); line-height:1.8; margin:6px 0 0; font-weight:300;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ep-play{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  background:var(--ink); border:1px solid var(--line); border-radius:2px;
  padding:8px 15px; font-size:13px; font-weight:500; color:var(--txt);
  transition:background .16s, border-color .16s;
}
.ep-play:hover{background:var(--txt); color:#0B0B0C; border-color:var(--txt)}

/* ===================== الحالات ===================== */
.state{padding:clamp(48px,8vw,110px) clamp(16px,3.4vw,52px); text-align:center}
.state-icon{
  width:52px; height:52px; margin-inline:auto; margin-block-end:16px;
  border:1px solid var(--line); border-radius:2px;
  display:grid; place-items:center; color:var(--dim);
}
.state h3{font-size:21px; margin:0 0 7px}
.state p{margin:0; color:var(--dim); font-size:14px; font-weight:300; max-width:52ch;
         margin-inline:auto; line-height:1.85}
.where-empty{color:var(--dim); font-size:13.5px; font-weight:300; padding-block:12px}

.keybox{
  max-width:520px; margin-inline:auto; text-align:start;
  border:1px solid var(--line); border-radius:2px; padding:clamp(18px,3vw,30px);
  background:var(--bg-soft);
}
.keybox h3{font-size:20px; margin:0 0 9px}
.keybox p{color:var(--dim); font-size:13.5px; line-height:1.85; font-weight:300; margin:0}
.field{display:flex; gap:8px; margin-block-start:16px; flex-wrap:wrap}
.field input{
  flex:1 1 220px; height:42px; padding-inline:13px;
  background:transparent; border:1px solid var(--line); border-radius:2px;
  color:var(--txt); font-size:13.5px; font-family:var(--f-ui); font-weight:300;
  direction:ltr; text-align:left; outline:none;
}
.field input:focus{border-color:var(--acc)}
.msg{margin-block-start:10px; font-size:12.5px; color:var(--dim); min-height:18px}
.msg.bad{color:#E08A72}

/* الهياكلُ العظميّة — بلا وميضٍ متحرّك: نبضةُ الضوءِ وحدَها */
.skel{background:var(--surface); border-radius:2px; animation:pulse 1.5s ease-in-out infinite}
.skel-card{aspect-ratio:2/3}
.rail .skel-card{flex:0 0 clamp(132px,15vw,168px)}
@keyframes pulse{0%,100%{opacity:.5} 50%{opacity:.82}}

.more{display:flex; justify-content:center; padding-block:clamp(22px,3vw,36px)}
.more-btn{
  background:none; border:1px solid var(--line); border-radius:2px;
  padding:11px 34px; font-size:14px; font-weight:400; color:var(--txt-2);
}
.more-btn:hover{border-color:var(--txt-2); color:var(--txt)}
.page{padding-block-start:calc(var(--nav-actual) + clamp(22px,3vw,38px))}
.page > h1{font-size:clamp(26px,4vw,46px); margin:0 0 6px}
.langs{display:flex; flex-wrap:wrap; gap:6px; margin-block-end:18px}

.back{
  background:none; border:0; color:var(--dim); font-size:13px; font-weight:400;
  padding:0 0 10px;
}
.back:hover{color:var(--txt)}

.year{color:var(--dim); font-weight:300}
.updated{font-size:11.5px; color:var(--dim); font-weight:300}
.licence{font-size:11.5px; color:var(--dim); font-weight:300; margin-block-start:7px}

/* ===================== التذييل ===================== */
.foot{
  border-block-start:1px solid var(--line-soft); margin-block-start:clamp(40px,6vw,80px);
  padding-block:clamp(26px,4vw,46px) clamp(32px,5vw,58px);
  color:var(--dim); font-size:12.5px; font-weight:300; line-height:1.9;
}
.foot b{font-family:var(--f-display); font-weight:900; font-size:17px; color:var(--txt-2);
        letter-spacing:-.02em}
.foot p{margin:0 0 5px}
.foot a{color:var(--txt-2); border-block-end:1px solid var(--line)}
.foot a:hover{color:var(--txt); border-block-end-color:var(--txt-2)}
.credits{margin-block-start:12px; font-size:11.5px; line-height:1.9}

/* ===================== الاستجابة ===================== */
@media (max-width:1100px){
  .wall{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:820px){
  .hero-body{grid-template-columns:minmax(0,1fr); gap:20px}
  .hero-poster{display:none}
  .ep{grid-template-columns:clamp(88px,26vw,120px) minmax(0,1fr); grid-template-rows:auto auto}
  .ep-play{grid-column:2; justify-self:start}
  .search{max-width:none}
}
@media (max-width:680px){
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wall > .card.is-big{grid-column:span 2; grid-row:span 2}
  .grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  .brand-name{font-size:19px}

  /* الشريطُ على الجوّال: ثلاثةُ أسطرٍ مرتّبةٍ بدل أربعةٍ ملتفّة —
     [شعار … لغة] · [بحث] · [روابطُ تُمرَّر أفقيًّا]. كان يأكل ثلثَ الشاشة. */
  .nav-in{flex-wrap:wrap; row-gap:7px; column-gap:10px; padding-block:9px}
  .brand{order:1}
  .pickers{order:2; margin-inline-start:auto}
  .search{order:3; flex:1 1 100%; max-width:none}
  .nav-links{order:4; flex:1 1 100%; overflow-x:auto; scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links button{padding:5px 11px; font-size:13px; white-space:nowrap}
  /* سطرٌ تعريفيٌّ لا وظيفيّ — والمساحةُ على الجوّال أثمنُ منه */
  .profile-note{display:none}
}
@media (max-width:520px){
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* بعمودين فقط، الملصقُ الكبيرُ (2×2) يبتلع الشاشةَ كاملةً: ملصقٌ واحدٌ
     بارتفاع 600 بكسل قبل أن يرى الزائرُ شيئًا آخر. فيعود عاديًّا. */
  .wall > .card.is-big{grid-column:auto; grid-row:auto}
  .wall > .card.is-big .poster{aspect-ratio:2/3; flex:none}
  .wall > .card.is-big .card-title{font-size:13.5px}
  .wall > .card.is-big .card-orig{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  /* اللمحةُ حركةٌ غيرُ مطلوبةٍ من الزائر — تُلغى كاملةً لا تُسرَّع */
  .intro{display:none !important}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
                       transition-duration:.01ms !important; scroll-behavior:auto !important}
  body::before{transition:none}
}