/* ============================================================================
   دراما للجميع — نظام تصميم "مسرح الجيب"
   ----------------------------------------------------------------------------
   الفكرة: المحتوى نفسه رأسي (9:16) ويتقلّب بالسحب. فالتصميم كله مبني على
   الإطار الرأسي كوحدة أساسية، مش على بوسترات أفقية زي مواقع الأفلام.
   البطل = "دِك" من إطارات رأسية بمنظور، وخلفه ضوء مسرح مسحوب من ألوان
   غلاف المسلسل نفسه. الخلفية بنفسجية-ليلية دافئة مش أسود مسطّح.
   ============================================================================ */

/* ---------------------------------------------------------------- الرموز */
:root {
  /* الليل المسرحي — برقّة بنفسجية، مش أسود ميت */
  --night:    #130E1F;
  --velvet:   #1C1530;
  --curtain:  #271C42;
  --riser:    #33254F;

  /* الأضواء */
  --ember:    #FF4D6D;   /* الأساسي — نداء الفعل، التقدّم */
  --ember-lo: #C7304E;
  --amber:    #FFB067;   /* عدّاد الحلقات، التقييم */
  --violet:   #8B6BFF;   /* الجديد، الشارات الثانوية */

  --paper:    #F7F2FB;
  --haze:     #A79BC6;
  --dust:     #6E6390;

  --hair:     rgba(247, 242, 251, .09);
  --hair-2:   rgba(247, 242, 251, .16);
  --ember-wash: rgba(255, 77, 109, .13);
  --amber-wash: rgba(255, 176, 103, .13);
  --violet-wash: rgba(139, 107, 255, .16);

  /* سلّم المسافات */
  --u1: 4px;  --u2: 8px;  --u3: 12px; --u4: 16px;
  --u5: 22px; --u6: 32px; --u7: 48px; --u8: 72px;

  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-pill: 999px;

  --lift:  0 14px 34px -14px rgba(0,0,0,.85);
  --lift-2:0 34px 70px -24px rgba(0,0,0,.9);

  --gutter: clamp(16px, 4.5vw, 68px);
  --rail-max: 1420px;

  /* الخطوط — كوفي هندسي للعناوين، بلكس عربي للنص.
     Reem Kufi ملهاش حروف لاتينية فبتقع تلقائيًا على Bricolage للإنجليزي. */
  --display: 'Cairo', 'Bricolage Grotesque', Georgia, serif;
  --body:    'Cairo', 'Bricolage Grotesque', system-ui, sans-serif;
}

/* ---------------------------------------------------------------- الأساس */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--night); color: var(--paper);
  font-family: var(--body); font-size: 15px; line-height: 1.65;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, video, svg, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: var(--r-xs); }
::selection { background: var(--ember); color: #fff; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.18; letter-spacing: -.005em; }

/* الجوّ: توهّج علوي خفيف + حبيبات — يدّي عمق من غير ما ياخد انتباه */
.aura {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(78% 46% at 72% -6%, rgba(255,77,109,.22), transparent 68%),
    radial-gradient(58% 40% at 12% -4%, rgba(139,107,255,.20), transparent 70%),
    var(--night);
}
.aura::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}

.shell { width: 100%; max-width: var(--rail-max); margin-inline: auto; padding-inline: var(--gutter); }
main { flex: 1; }

/* ---------------------------------------------------------- شريط علوي */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(19,14,31,.72); backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid var(--hair);
}
.topbar .shell { display: flex; align-items: center; gap: var(--u5); height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { height: 32px; width: auto; }
.brand b { font-family: var(--display); font-size: 1.06rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
@media (max-width: 420px) { .brand b { display: none; } }

.mainnav { display: none; gap: 2px; }
@media (min-width: 900px) { .mainnav { display: flex; } }
.mainnav a {
  position: relative; padding: 8px 14px; border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 500; color: var(--haze);
  transition: color .16s, background .16s;
}
.mainnav a:hover { color: var(--paper); background: var(--velvet); }
.mainnav a.on { color: var(--paper); }
.mainnav a.on::after {
  content: ''; position: absolute; inset-inline: 14px; bottom: 1px;
  height: 2px; border-radius: 2px; background: var(--ember);
}

.tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--u2); position: relative; }

.iconbtn {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: .95rem;
  background: var(--velvet); border: 1px solid var(--hair);
  color: var(--haze); transition: color .16s, border-color .16s, background .16s;
}
.iconbtn:hover { color: var(--paper); border-color: var(--hair-2); background: var(--curtain); }
.iconbtn.lit { color: var(--amber); border-color: rgba(255,176,103,.42); }

/* قائمة اللغات */
.langwrap { position: relative; }
.langmenu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 70;
  min-width: 186px; max-height: 62vh; overflow-y: auto; padding: 6px;
  background: var(--curtain); border: 1px solid var(--hair-2); border-radius: var(--r-md);
  box-shadow: var(--lift-2);
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.langmenu.open { opacity: 1; transform: none; pointer-events: auto; }
.langmenu button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--u2);
  padding: 9px 13px; border-radius: var(--r-sm); font-size: .87rem; text-align: start;
  color: var(--paper); transition: background .14s;
}
.langmenu button:hover { background: var(--riser); }
.langmenu button.on { color: var(--ember); font-weight: 600; }
.langmenu button.on::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .7rem; }

/* ------------------------------------------------ لوحة البحث (تفتح فوق الصفحة) */
.palette {
  position: fixed; inset: 0; z-index: 120; display: none;
  background: rgba(10,7,17,.72); backdrop-filter: blur(8px);
  padding: clamp(60px, 12vh, 140px) var(--u4) var(--u4);
}
.palette.open { display: block; }
.palette-box {
  max-width: 640px; margin-inline: auto;
  background: var(--velvet); border: 1px solid var(--hair-2); border-radius: var(--r-lg);
  box-shadow: var(--lift-2); overflow: hidden;
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.palette-field { display: flex; align-items: center; gap: var(--u3); padding: var(--u4) var(--u5); border-bottom: 1px solid var(--hair); }
.palette-field i { color: var(--dust); }
.palette-field input { flex: 1; font-size: 1.05rem; font-weight: 500; background: none; }
.palette-field input::placeholder { color: var(--dust); }
.palette-field kbd {
  font-family: var(--body); font-size: .68rem; font-weight: 600; color: var(--dust);
  border: 1px solid var(--hair-2); border-radius: 6px; padding: 3px 7px;
}
.palette-results { max-height: min(56vh, 460px); overflow-y: auto; padding: var(--u2); }
.palette-row {
  width: 100%; display: flex; align-items: center; gap: var(--u3);
  padding: var(--u2); border-radius: var(--r-sm); text-align: start; transition: background .13s;
}
.palette-row:hover, .palette-row.cursor { background: var(--curtain); }
.palette-row img { width: 40px; height: 60px; object-fit: cover; border-radius: 7px; background: var(--curtain); flex: none; }
.palette-row .t { font-weight: 600; font-size: .92rem; line-height: 1.35; }
.palette-row .s { font-size: .74rem; color: var(--dust); margin-top: 2px; }
.palette-empty { padding: var(--u6) var(--u4); text-align: center; color: var(--dust); font-size: .9rem; }

/* ============================================================================
   البطل — التوقيع: دِك من إطارات رأسية بمنظور + ضوء مسرح من غلاف المسلسل
   ============================================================================ */
.stage { position: relative; padding-block: var(--u7) var(--u6); overflow: hidden; }

/* ضوء المسرح: نسخة مكبّرة ومموّهة من الغلاف نفسه */
.stage-bleed {
  position: absolute; inset: -22% -10% auto; height: 132%; z-index: -1;
  background-size: cover; background-position: center 22%;
  filter: blur(66px) saturate(1.9) brightness(.72);
  opacity: 0; transition: opacity .8s ease, background-image .1s;
  transform: scale(1.15);
}
.stage-bleed.lit { opacity: .62; }
.stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(19,14,31,.35) 0%, rgba(19,14,31,.72) 55%, var(--night) 100%);
}

.stage-grid {
  display: grid; gap: var(--u6); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) {
  .stage-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: var(--u8); }
}

/* --- الدِك --- */
.deck {
  position: relative; height: clamp(310px, 52vw, 430px);
  display: grid; place-items: center;
  perspective: 1400px; touch-action: pan-y; user-select: none;
}
.deck-frame {
  position: absolute; top: 0; height: 100%; aspect-ratio: 9 / 16;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--hair-2); background: var(--curtain);
  box-shadow: var(--lift-2);
  transition: transform .55s cubic-bezier(.22,.9,.28,1), opacity .55s, filter .55s;
  will-change: transform;
}
.deck-frame img { width: 100%; height: 100%; object-fit: cover; }
.deck-frame[data-pos="0"]  { transform: translateX(0) scale(1) rotateY(0deg); opacity: 1; z-index: 5; }
.deck-frame[data-pos="1"]  { transform: translateX(38%) scale(.86) rotateY(-16deg); opacity: .55; z-index: 4; filter: brightness(.6); }
.deck-frame[data-pos="2"]  { transform: translateX(66%) scale(.74) rotateY(-22deg); opacity: .28; z-index: 3; filter: brightness(.45); }
.deck-frame[data-pos="-1"] { transform: translateX(-38%) scale(.86) rotateY(16deg); opacity: .55; z-index: 4; filter: brightness(.6); }
.deck-frame[data-pos="-2"] { transform: translateX(-66%) scale(.74) rotateY(22deg); opacity: .28; z-index: 3; filter: brightness(.45); }
.deck-frame[data-pos="hide"] { transform: scale(.6); opacity: 0; z-index: 1; pointer-events: none; }
html[dir="ltr"] .deck-frame[data-pos="1"]  { transform: translateX(-38%) scale(.86) rotateY(16deg); }
html[dir="ltr"] .deck-frame[data-pos="2"]  { transform: translateX(-66%) scale(.74) rotateY(22deg); }
html[dir="ltr"] .deck-frame[data-pos="-1"] { transform: translateX(38%) scale(.86) rotateY(-16deg); }
html[dir="ltr"] .deck-frame[data-pos="-2"] { transform: translateX(66%) scale(.74) rotateY(-22deg); }

/* شارة "تشغيل" على الإطار الأمامي */
.deck-play {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
  pointer-events: none;
}
.deck-play span {
  width: 58px; height: 58px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: rgba(19,14,31,.55); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.24); color: #fff; font-size: 1.15rem;
  opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s;
}
.deck:hover .deck-play span { opacity: 1; transform: none; }

.deck-nav { position: absolute; inset-block: 0; z-index: 8; width: 44px; display: none; place-items: center; }
@media (min-width: 940px) { .deck-nav { display: grid; } }
.deck-nav.prev { inset-inline-start: -8px; }
.deck-nav.next { inset-inline-end: -8px; }
.deck-nav button {
  width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: rgba(19,14,31,.6); backdrop-filter: blur(10px);
  border: 1px solid var(--hair-2); color: var(--paper);
  transition: background .16s, border-color .16s;
}
.deck-nav button:hover { background: var(--ember); border-color: var(--ember); }

/* --- نص البطل --- */
.stage-copy { min-width: 0; text-align: center; }
@media (min-width: 940px) { .stage-copy { text-align: start; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); margin-bottom: var(--u3);
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--amber); }
@media (max-width: 939px) { .eyebrow { justify-content: center; } .eyebrow::before { display: none; } }

.stage-title {
  font-size: clamp(1.7rem, 5.2vw, 3.15rem); margin-bottom: var(--u4);
  overflow-wrap: anywhere; text-wrap: balance;
}
.stage-meta {
  display: flex; flex-wrap: wrap; gap: var(--u2); justify-content: center; margin-bottom: var(--u5);
  font-size: .8rem; color: var(--haze);
}
@media (min-width: 940px) { .stage-meta { justify-content: flex-start; } }
.stage-meta span { display: inline-flex; align-items: center; gap: 6px; }
.stage-meta i { font-size: .72rem; }
.stage-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--dust); align-self: center; }

.stage-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: var(--u5); }
@media (min-width: 940px) { .stage-tags { justify-content: flex-start; } }

.stage-cta { display: flex; flex-wrap: wrap; gap: var(--u3); justify-content: center; }
@media (min-width: 940px) { .stage-cta { justify-content: flex-start; } }

.pips { display: flex; gap: 6px; justify-content: center; margin-top: var(--u5); }
@media (min-width: 940px) { .pips { justify-content: flex-start; } }
.pips button { width: 22px; height: 3px; border-radius: 2px; background: var(--hair-2); transition: background .25s, width .25s; }
.pips button.on { background: var(--ember); width: 38px; }

/* ---------------------------------------------------------------- أزرار */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px; border-radius: var(--r-pill);
  font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  background: var(--ember); color: #fff;
  box-shadow: 0 12px 28px -10px rgba(255,77,109,.75);
  transition: transform .16s, background .16s, box-shadow .16s;
}
.btn:hover { background: var(--ember-lo); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.quiet {
  background: rgba(247,242,251,.07); color: var(--paper); box-shadow: none;
  border: 1px solid var(--hair-2); backdrop-filter: blur(8px);
}
.btn.quiet:hover { background: rgba(247,242,251,.13); border-color: var(--hair-2); }
.btn.quiet.on { color: var(--amber); border-color: rgba(255,176,103,.45); }
.btn.sm { padding: 9px 17px; font-size: .82rem; }

.tag {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 500;
  background: var(--ember-wash); color: var(--ember);
  border: 1px solid rgba(255,77,109,.22);
  transition: background .15s, color .15s;
}
a.tag:hover { background: var(--ember); color: #fff; }

/* -------------------------------------------------- شريط التصنيفات (سطر واحد) */
.genrebar {
  display: flex; align-items: center; gap: var(--u2);
  padding-block: var(--u4); margin-bottom: var(--u2);
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.genrebar::-webkit-scrollbar { display: none; }
.genrebar > * { flex: none; }
.genrebar .lbl { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dust); }
.genrebar a {
  padding: 7px 15px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 500;
  color: var(--haze); background: var(--velvet); border: 1px solid var(--hair);
  white-space: nowrap; transition: .15s;
}
.genrebar a:hover { color: var(--paper); border-color: var(--ember); background: var(--curtain); }

/* ---------------------------------------------------------------- الأرفف */
.rack { margin-bottom: var(--u8); }
.rack-head { display: flex; align-items: baseline; gap: var(--u3); margin-bottom: var(--u4); }
.rack-head h2 { font-size: clamp(1.05rem, 2.4vw, 1.32rem); }
.rack-head .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--hair), transparent); }
html[dir="ltr"] .rack-head .line { background: linear-gradient(270deg, var(--hair), transparent); }
.rack-head .more { font-size: .8rem; font-weight: 500; color: var(--ember); white-space: nowrap; }
.rack-head .more:hover { color: var(--amber); }

.rail {
  display: flex; gap: var(--u3); overflow-x: auto; padding-bottom: var(--u3);
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: none; scroll-snap-align: start; }

.mesh {
  display: grid; gap: var(--u3);
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
}
@media (min-width: 700px) { .mesh { gap: var(--u4); grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); } }
@media (min-width: 1240px) { .mesh { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }

/* ---------------------------------------------------------------- البطاقة */
.tile { width: 136px; display: block; }
.mesh .tile { width: 100%; }
@media (min-width: 700px)  { .tile { width: 158px; } }
@media (min-width: 1240px) { .tile { width: 176px; } }

.tile-art {
  position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--r-md); background: var(--velvet); border: 1px solid var(--hair);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.tile:hover .tile-art { transform: translateY(-5px); border-color: var(--hair-2); box-shadow: var(--lift); }
.tile-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.tile:hover .tile-art img { transform: scale(1.055); }
.tile-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(19,14,31,.92) 0%, rgba(19,14,31,.18) 34%, transparent 58%);
}

.tile-eps {
  position: absolute; z-index: 2; inset-block-end: 8px; inset-inline-start: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 600; color: var(--amber);
}
.tile-eps i { font-size: .6rem; opacity: .85; }

.tile-new {
  position: absolute; z-index: 2; top: 8px; inset-inline-end: 8px;
  font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--violet); color: #fff;
}

/* الترقيم — يظهر فقط على رفّ الأكثر مشاهدة، لأن الترتيب هنا معلومة حقيقية */
.tile-rank {
  position: absolute; z-index: 3; bottom: -6px; inset-inline-start: -4px;
  font-family: var(--display); font-size: 3.6rem; font-weight: 700; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.6px rgba(247,242,251,.62);
  pointer-events: none; text-shadow: 0 6px 20px rgba(0,0,0,.6);
}

.tile-kill {
  position: absolute; z-index: 4; top: 7px; inset-inline-start: 7px;
  width: 26px; height: 26px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: rgba(19,14,31,.8); backdrop-filter: blur(6px); color: var(--paper); font-size: .68rem;
  opacity: 0; transition: opacity .18s, background .18s;
}
.tile:hover .tile-kill, .tile-kill:focus-visible { opacity: 1; }
@media (hover: none) { .tile-kill { opacity: 1; } }
.tile-kill:hover { background: var(--ember); }

/* حلقة التقدّم */
.pring { position: absolute; z-index: 3; inset-block-end: 7px; inset-inline-end: 7px; width: 34px; height: 34px; }
.pring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pring circle { fill: none; stroke-width: 3; }
.pring .bg { stroke: rgba(247,242,251,.2); }
.pring .fg { stroke: var(--ember); stroke-linecap: round; transition: stroke-dashoffset .9s ease; }
.pring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .56rem; font-weight: 700; }

.tile-name {
  margin-top: 9px; font-size: .84rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.tile-sub { margin-top: 3px; font-size: .7rem; color: var(--dust); display: flex; gap: 9px; flex-wrap: wrap; }
.tile-sub i { font-size: .62rem; margin-inline-end: 3px; }
.tile-resume { margin-top: 3px; font-size: .7rem; font-weight: 600; color: var(--ember); }

/* الهيكل العظمي أثناء التحميل */
.bone { border-radius: var(--r-md); background: linear-gradient(100deg, var(--velvet) 30%, var(--curtain) 50%, var(--velvet) 70%); background-size: 220% 100%; animation: sweep 1.3s linear infinite; }
@keyframes sweep { to { background-position: -220% 0; } }
.bone.art { aspect-ratio: 9/16; }
.bone.line { height: 11px; margin-top: 9px; border-radius: 4px; }
.bone.line.short { width: 55%; }

/* ---------------------------------------------------------------- رؤوس الصفحات */
.pagehead { padding-block: var(--u7) var(--u5); }
.pagehead h1 { font-size: clamp(1.5rem, 4vw, 2.4rem); margin-bottom: 6px; }
.pagehead p { color: var(--haze); font-size: .9rem; }

.chips { display: flex; flex-wrap: wrap; gap: var(--u2); margin-bottom: var(--u5); }
.chip {
  padding: 8px 16px; border-radius: var(--r-pill); font-size: .81rem; font-weight: 500;
  background: var(--velvet); border: 1px solid var(--hair); color: var(--haze); transition: .15s;
}
.chip:hover { color: var(--paper); border-color: var(--hair-2); }
.chip.on { background: var(--paper); border-color: var(--paper); color: var(--night); font-weight: 600; }
.chips .sep { width: 1px; background: var(--hair); margin-inline: var(--u2); }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--u4); padding-block: var(--u7); font-size: .85rem; color: var(--haze); }
.pager a { width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--velvet); border: 1px solid var(--hair); transition: .15s; }
.pager a:hover { background: var(--ember); border-color: var(--ember); color: #fff; }
.pager a.dead { opacity: .28; pointer-events: none; }

/* ---------------------------------------------------------------- الفراغ */
.void { text-align: center; padding: var(--u8) var(--u4); }
.void i.mark { font-size: 2rem; color: var(--riser); margin-bottom: var(--u4); display: block; }
.void h3 { font-size: 1.1rem; margin-bottom: 6px; }
.void p { color: var(--haze); font-size: .88rem; margin-bottom: var(--u5); }

/* ============================================================================
   صفحة المسلسل
   ============================================================================ */
.title-hero { position: relative; padding-block: var(--u7) var(--u6); }
.title-bleed {
  position: absolute; inset: 0 0 auto; height: 480px; z-index: -1;
  background-size: cover; background-position: center 20%;
  filter: blur(52px) saturate(1.8) brightness(.62); opacity: .55; transform: scale(1.12);
}
.title-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(19,14,31,.55), var(--night) 78%);
}

.title-grid { display: grid; gap: var(--u6); grid-template-columns: minmax(0,1fr); }
@media (min-width: 800px) { .title-grid { grid-template-columns: 260px minmax(0,1fr); gap: var(--u7); } }

.title-art { position: relative; width: 208px; margin-inline: auto; }
@media (min-width: 800px) { .title-art { width: 100%; margin-inline: 0; } }
.title-art img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--hair-2); box-shadow: var(--lift-2); }
.title-src {
  position: absolute; top: 10px; inset-inline-start: 10px;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(19,14,31,.8); backdrop-filter: blur(8px);
  color: var(--amber); border: 1px solid rgba(255,176,103,.35);
}

.title-body { min-width: 0; text-align: center; }
@media (min-width: 800px) { .title-body { text-align: start; } }
.title-body h1 { font-size: clamp(1.55rem, 4.4vw, 2.7rem); margin-bottom: var(--u3); overflow-wrap: anywhere; text-wrap: balance; }

.scoreline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u3); justify-content: center; margin-bottom: var(--u5); }
@media (min-width: 800px) { .scoreline { justify-content: flex-start; } }
.score { display: flex; align-items: baseline; gap: 6px; }
.score b { font-family: var(--display); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.score span { font-size: .74rem; color: var(--dust); }
.score.amber b { color: var(--amber); }
.score.ember b { color: var(--ember); }
.scoreline .bar { width: 1px; height: 22px; background: var(--hair); }

.stars { color: var(--amber); letter-spacing: 2px; font-size: 1rem; }

.synopsis {
  color: var(--haze); font-size: .95rem; line-height: 1.9; margin-bottom: var(--u4);
  max-width: 68ch; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.synopsis.open { -webkit-line-clamp: unset; }
.more-btn { color: var(--ember); font-size: .84rem; font-weight: 600; margin-bottom: var(--u5); }

.rate-strip {
  display: flex; align-items: center; gap: var(--u3); flex-wrap: wrap; justify-content: center;
  padding: var(--u3) var(--u4); margin-top: var(--u5);
  background: var(--velvet); border: 1px solid var(--hair); border-radius: var(--r-md);
}
@media (min-width: 800px) { .rate-strip { justify-content: flex-start; } }
.rate-strip .q { font-size: .82rem; color: var(--haze); }
.rate-pick { display: flex; gap: 3px; }
.rate-pick i { font-size: 1.22rem; color: rgba(255,176,103,.26); cursor: pointer; transition: color .12s, transform .12s; }
.rate-pick i:hover { transform: scale(1.14); }
.rate-pick i.fas { color: var(--amber); }
.rate-done { font-size: .8rem; color: var(--amber); font-weight: 600; }

/* شبكة الحلقات */
.eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: var(--u2); }
.eps a {
  padding: 13px 0; text-align: center; border-radius: var(--r-sm);
  background: var(--velvet); border: 1px solid var(--hair);
  font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: .15s;
}
.eps a:hover { background: var(--ember); border-color: var(--ember); color: #fff; transform: translateY(-2px); }
.eps a.seen { color: var(--ember); border-color: rgba(255,77,109,.42); }
.eps a.here { background: var(--ember); border-color: var(--ember); color: #fff; }

/* التعليقات */
.composer {
  display: flex; flex-direction: column; gap: var(--u3);
  padding: var(--u4); margin-bottom: var(--u5);
  background: var(--velvet); border: 1px solid var(--hair); border-radius: var(--r-md);
}
.composer input, .composer textarea {
  width: 100%; padding: var(--u3) var(--u4); font-size: .9rem;
  background: var(--night); border: 1px solid var(--hair); border-radius: var(--r-sm);
  color: var(--paper); resize: vertical;
}
.composer input::placeholder, .composer textarea::placeholder { color: var(--dust); }
.composer input:focus, .composer textarea:focus { outline: none; border-color: var(--ember); }
.composer .row { display: flex; justify-content: flex-end; }

.note { display: flex; gap: var(--u3); padding-block: var(--u4); border-bottom: 1px solid var(--hair); }
.note:last-child { border-bottom: none; }
.note .who {
  width: 36px; height: 36px; border-radius: var(--r-pill); flex: none; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .9rem; color: var(--night);
  background: linear-gradient(135deg, var(--amber), var(--ember));
}
.note .name { font-weight: 600; font-size: .87rem; }
.note .when { font-size: .72rem; color: var(--dust); margin-inline-start: var(--u2); }
.note .what { color: var(--haze); font-size: .89rem; line-height: 1.75; margin-top: 3px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- التذييل */
.foot { margin-top: var(--u8); border-top: 1px solid var(--hair); background: #0D0917; }
.foot-count { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .foot-count { grid-template-columns: repeat(4, 1fr); } }
.foot-count div { padding: var(--u6) var(--u3); text-align: center; border-bottom: 1px solid var(--hair); }
.foot-count div + div { border-inline-start: 1px solid var(--hair); }
@media (max-width: 699px) { .foot-count div:nth-child(odd) { border-inline-start: none; } }
@media (min-width: 700px) { .foot-count div:first-child { border-inline-start: none; } }
.foot-count b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.2rem, 3.4vw, 1.85rem); color: var(--amber); font-variant-numeric: tabular-nums;
}
.foot-count span { font-size: .72rem; color: var(--dust); letter-spacing: .06em; }

.foot-body { padding-block: var(--u7); display: flex; flex-direction: column; align-items: center; gap: var(--u4); text-align: center; }
.foot-mark { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.05rem; font-weight: 700; }
.foot-mark img { height: 28px; }
.foot-say { color: var(--dust); font-size: .78rem; max-width: 58ch; line-height: 1.85; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--u5); justify-content: center; }
.foot-nav a { font-size: .84rem; color: var(--haze); font-weight: 500; }
.foot-nav a:hover { color: var(--ember); }
.foot-fine { color: var(--riser); font-size: .74rem; }

/* ---------------------------------------------------------------- شريط الموبايل */
.dock {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 80; display: flex;
  background: rgba(19,14,31,.9); backdrop-filter: blur(20px);
  border-top: 1px solid var(--hair); padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .dock { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 64px; } }
.dock a, .dock button { flex: 1; padding: 9px 0 11px; text-align: center; color: var(--dust); font-size: .64rem; font-weight: 500; }
.dock a i, .dock button i { display: block; font-size: 1.08rem; margin-bottom: 4px; }
.dock a.on, .dock button.on { color: var(--ember); }

/* ---------------------------------------------------------------- عائم */
.totop {
  position: fixed; inset-inline-end: var(--u4); bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 70;
  width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--curtain); border: 1px solid var(--hair-2); color: var(--paper);
  opacity: 0; pointer-events: none; transform: translateY(10px); transition: .22s;
}
@media (min-width: 900px) { .totop { bottom: var(--u5); } }
.totop.show { opacity: 1; pointer-events: auto; transform: none; }
.totop:hover { background: var(--ember); border-color: var(--ember); }

.toast {
  position: fixed; inset-inline: 0; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 130;
  display: flex; justify-content: center; pointer-events: none;
}
.toast span {
  background: var(--paper); color: var(--night); font-size: .84rem; font-weight: 600;
  padding: 10px 20px; border-radius: var(--r-pill); box-shadow: var(--lift-2);
  opacity: 0; transform: translateY(10px); transition: .24s;
}
.toast.show span { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- أرضية الجودة */
.rtl-flip { display: inline-block; }
html[dir="ltr"] .rtl-flip { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- المشغّل
   الكلاسات دي بيستعملها قالب المشغّل زي ما هو — منقولة كما هي بلا تغيير. */
.seek-flash {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 18;
  background: rgba(11,10,15,.72); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: 10px 18px; font-size: .85rem; font-weight: 800; color: #fff;
  opacity: 0; transition: opacity .18s; pointer-events: none; display: flex; align-items: center; gap: 8px;
}
.seek-flash.show { opacity: 1; }
.seek-flash.back { left: 12%; }
.seek-flash.fwd  { right: 12%; }
.speed-flag {
  position: absolute; top: 14%; left: 0; right: 0; margin: auto; width: max-content; z-index: 18;
  background: rgba(255,61,113,.92); border-radius: 999px; padding: 7px 16px;
  font-size: .8rem; font-weight: 800; color: #fff; opacity: 0; transition: opacity .18s; pointer-events: none;
}
.speed-flag.show { opacity: 1; }

/* كتلة السيو النصية */
.seo-note { border-top: 1px solid var(--hair); padding-top: var(--u5); margin-top: var(--u7); }
.seo-note h2 { font-size: 1rem; margin-bottom: var(--u3); }
.seo-note p { color: var(--dust); font-size: .84rem; line-height: 1.95; }

/* ---------- إصلاحات: هيرو موبايل ملتحم + بحث مضبوط ---------- */
@media (max-width: 939px) {
  .stage { padding-block: var(--u4) var(--u5); }
  .stage-grid { gap: var(--u4); }
  .stage-copy { order: 2; }
  .deck { order: 1; height: clamp(280px, 62vw, 380px); }
  .stage-title { font-size: clamp(1.35rem, 6vw, 2rem); margin-bottom: var(--u3); }
  .stage-meta, .stage-tags, .stage-cta { margin-bottom: var(--u3); }
  .pips { margin-top: var(--u3); }
  .deck-play span { opacity: 1; transform: none; width: 52px; height: 52px; }
}
@media (max-width: 560px) {
  .palette { padding: clamp(40px, 8vh, 90px) var(--u3) var(--u3); }
  .palette-field { padding: 14px 16px; gap: 10px; }
  .palette-field input { font-size: 16px; min-width: 0; }
  .palette-field kbd { display: none; }
}

/* ---------- تصحيح جذري: .tile-art عنصر <span> فـ aspect-ratio مكانش بيتطبّق ---------- */
.tile-art     { display: block; aspect-ratio: 2 / 3; }
.tile-resume  { display: block; }
.bone.art     { aspect-ratio: 2 / 3; }
.title-art img { aspect-ratio: 2 / 3; }

/* ---------- تكبير البطاقات ---------- */
.tile { width: 152px; }
.mesh .tile { width: 100%; }
@media (min-width: 700px)  { .tile { width: 172px; } }
@media (min-width: 1240px) { .tile { width: 192px; } }
.mesh { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }
@media (min-width: 700px)  { .mesh { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
@media (min-width: 1240px) { .mesh { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }

/* ---------- صفحة المسلسل: بطاقة أكبر + صف التقييم منفصل تحت الإحصائيات ---------- */
.title-art { width: 240px; }
@media (min-width: 800px) { .title-art { width: 100%; } }
.scoreline.stats-row  { margin-bottom: var(--u3); }
.scoreline.rating-row {
  padding-top: var(--u3); margin-top: 0; margin-bottom: var(--u5);
  border-top: 1px solid var(--hair);
}

/* ---------- نقل رقم الترتيب لأعلى الزاوية عشان مايغطيش عدد الحلقات تحت ---------- */
.tile-rank {
  top: 4px;
  bottom: auto;
  inset-inline-start: 6px;
  inset-inline-end: auto;
  font-size: 2.4rem;
  line-height: 1;
  -webkit-text-stroke: 1.5px rgba(247,242,251,.75);
  text-shadow: 0 4px 14px rgba(0,0,0,.55);
}

/* ---------- قائمة اللغات المنسدلة ---------- */
.lang-select {
  background: var(--velvet); color: var(--pearl);
  border: 1px solid var(--hair); border-radius: var(--r-md);
  padding: 8px 14px; font: inherit; cursor: pointer;
  min-width: 120px;
}
.lang-select:focus { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- source badge (FD/ND/NDA) ---------- */
.tile-src-badge {
  position: absolute; z-index: 2;
  top: 6px; inset-inline-end: 6px;
  padding: 3px 8px; border-radius: 5px;
  font-size: .62rem; font-weight: 700;
  background: rgba(0,0,0,.72); color: var(--pearl);
  letter-spacing: .5px; border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
}