/* ============================================================
   سَكينة — أرضية تتنفّس
   أقلّ العناصر وأكثرها جوّاً: الخلفية سديم أخضر مائي يتحرك على
   مهل، والعنصر الحادّ الوحيد هو الموجة الصوتية.
   التصميم ملتزم بعالم لوني واحد عمداً، فكل لون مكتوب صراحة
   ولا يتبدّل مع ثيم النظام.
   ============================================================ */
:root{
  --bg:#04100d;
  --bg-2:#071915;
  --bg-3:#020a08;
  --teal:#2fd0b4;
  --sea:#1a8f96;
  --pale:#bff3e4;
  --txt:#e6f4ef;
  --sub:#6f8f88;
  --sub-2:#4a6560;
  --line:rgba(47,208,180,.14);
  --line-2:rgba(47,208,180,.26);
  --fog:rgba(47,208,180,.06);
  --danger:#d98b6a;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:"IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input{font-family:inherit}
:focus-visible{outline:1px solid var(--teal);outline-offset:4px;border-radius:2px}

.app{
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
}

/* ---------- الترويسة ---------- */
.topbar{
  flex:none;
  display:flex;
  align-items:baseline;
  gap:0 20px;
  flex-wrap:wrap;
  padding:16px 30px;
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:"Reem Kufi",sans-serif;
  font-weight:500;
  font-size:1.5rem;
  letter-spacing:.02em;
  margin:0;
  line-height:1.2;
  color:var(--txt);
}
.riwaya{margin:0;font-size:.72rem;letter-spacing:.1em;color:var(--sub)}
.stats{margin:0 auto 0 0;font-size:.72rem;letter-spacing:.06em;color:var(--sub-2)}

/* ---------- المسرح ---------- */
.stage{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 318px;
}

/* ══════════ الساحة ══════════ */
.hall{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:safe center;
  justify-content:center;
  padding:20px;
}
/* السديم: أربع بُقع ضوئية تتحرك على مسارات متداخلة وتُمزج ضوئياً */
.hall .mesh{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:.68;
}
/* تعتيم يجمع الضوء في المنتصف بدل ما يشتّت العين */
.hall::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(84% 64% at 50% 44%,rgba(4,16,13,.34) 0%,rgba(4,16,13,.9) 100%);
}

.center{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,3.4vh,38px);
  width:100%;
}

/* اسم السورة ضخماً في الخلفية */
.ghost{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-62%);
  font-family:"Reem Kufi",sans-serif;font-weight:700;
  font-size:clamp(6rem,17vw,14rem);
  line-height:1;white-space:nowrap;pointer-events:none;
  color:rgba(47,208,180,.038);
  transition:opacity .5s;
}

.titles{text-align:center;position:relative}
.sura-no{
  font-size:.68rem;letter-spacing:.24em;color:var(--sub);
  margin:0 0 14px;font-weight:400;
}
.sura{
  font-family:"Reem Kufi",sans-serif;font-weight:400;
  font-size:clamp(2.1rem,5.6vw,3.9rem);
  line-height:1.2;margin:0;letter-spacing:.01em;
  color:var(--txt);text-wrap:balance;
}
.meta{
  margin:16px 0 0;font-size:.82rem;letter-spacing:.05em;
  color:#a9c9c1;line-height:1.8;
}

/* ---------- الموجة ---------- */
.wave-wrap{width:min(700px,92%);display:flex;flex-direction:column;gap:10px}
.track{
  position:relative;height:clamp(64px,11vh,110px);cursor:pointer;
}
.track canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.track .fill{
  position:absolute;right:0;top:-6px;bottom:-6px;width:0;
  border-left:1px solid var(--pale);
  box-shadow:0 0 14px 2px rgba(191,243,228,.34);
}
.track .fill::after{
  content:"";position:absolute;left:-3.5px;top:50%;margin-top:-3.5px;
  width:7px;height:7px;border-radius:50%;background:var(--pale);
  transition:transform .2s;
}
.track:hover .fill::after{transform:scale(1.6)}
.times{
  display:flex;justify-content:space-between;
  font-size:.72rem;color:var(--sub-2);letter-spacing:.06em;
}

/* ---------- أزرار التشغيل ---------- */
.transport{display:flex;align-items:center;gap:26px}
.tbtn{
  appearance:none;background:none;cursor:pointer;
  border:1px solid var(--line-2);color:var(--pale);
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  transition:border-color .3s,background .3s,transform .2s;
}
.tbtn:hover{border-color:var(--teal);background:var(--fog)}
.tbtn:active{transform:scale(.94)}
.tbtn--main{width:64px;height:64px;border-color:rgba(47,208,180,.5)}
.tbtn--main:hover{transform:scale(1.04)}

/* ---------- أدوات إضافية ---------- */
.extras{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center}
.xbtn{
  appearance:none;background:none;border:0;cursor:pointer;text-decoration:none;
  color:var(--sub);font-size:.72rem;
  display:flex;align-items:center;gap:7px;padding:6px 2px;
  transition:color .25s;
}
.xbtn:hover,.xbtn[aria-pressed="true"]{color:var(--pale)}
.vol{display:flex;align-items:center;gap:9px;color:var(--sub)}
.vol input{appearance:none;width:92px;height:14px;background:none;cursor:pointer}
.vol input::-webkit-slider-runnable-track{height:1px;background:var(--line-2)}
.vol input::-moz-range-track{height:1px;background:var(--line-2)}
.vol input::-webkit-slider-thumb{
  appearance:none;width:9px;height:9px;border:0;border-radius:50%;
  background:var(--pale);margin-top:-4px;
}
.vol input::-moz-range-thumb{
  width:9px;height:9px;border:0;border-radius:50%;background:var(--pale);
}

/* ══════════ الفهرس ══════════ */
.rail{
  position:relative;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  min-height:0;
}
.tools{
  flex:none;display:flex;align-items:center;gap:9px;
  padding:14px 20px;border-bottom:1px solid var(--line);
}
.tools input{
  flex:1;min-width:0;appearance:none;
  background:none;border:0;border-bottom:1px solid var(--line-2);
  color:var(--txt);font-size:.8rem;font-weight:300;padding:7px 2px;
  transition:border-color .25s;
}
.tools input::placeholder{color:var(--sub-2)}
.tools input:focus{border-bottom-color:var(--teal);outline:none}
.chip-btn{
  flex:none;appearance:none;cursor:pointer;
  background:none;border:1px solid var(--line-2);border-radius:999px;
  color:var(--sub);font-size:.68rem;padding:6px 12px;
  transition:.25s;
}
.chip-btn:hover{color:var(--txt);border-color:var(--teal)}
.chip-btn[aria-pressed="true"]{background:var(--pale);border-color:var(--pale);color:#04100d;font-weight:600}

.surah-list{
  flex:1;min-height:0;overflow-y:auto;
  list-style:none;margin:0;padding:6px 0 20px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.surah-list::-webkit-scrollbar{width:6px}
.surah-list::-webkit-scrollbar-thumb{background:var(--line-2)}
.surah-list li{
  display:flex;align-items:baseline;gap:14px;
  padding:11px 20px;cursor:pointer;
  border-right:1px solid transparent;
  transition:background .2s,border-color .2s,padding-right .2s;
}
.surah-list li:hover{background:var(--fog);padding-right:24px}
.surah-list li[aria-current="true"]{
  background:var(--fog);border-right-color:var(--teal);
}
.surah-list li[aria-current="true"] .nm{color:var(--pale)}
.surah-list li[aria-current="true"] .n{color:var(--teal)}
.surah-list li[data-off]{opacity:.28;cursor:not-allowed}
.surah-list li[data-off]:hover{background:none;padding-right:20px}
.surah-list .n{
  flex:none;width:26px;text-align:center;
  font-family:"Reem Kufi",sans-serif;font-size:.72rem;color:var(--sub-2);
}
.surah-list .nm{
  flex:1;font-family:"Reem Kufi",sans-serif;font-weight:400;
  font-size:1rem;line-height:1.5;color:var(--txt);
}
.surah-list .ay{
  font-size:.66rem;color:var(--sub-2);flex:none;
  text-align:left;line-height:1.5;
}
.surah-list .ay small{display:block;font-size:.6rem;opacity:.7}
.empty{padding:34px 20px;text-align:center;color:var(--sub);font-size:.8rem;line-height:1.9}

/* ══════════ شريط القرّاء ══════════ */
.strip{
  flex:none;display:flex;align-items:flex-start;gap:16px;
  padding:12px 30px 14px;border-top:1px solid var(--line);
}
.strip-cap{
  flex:none;padding-top:10px;font-family:"Reem Kufi",sans-serif;
  font-size:.64rem;letter-spacing:.2em;color:var(--sub-2);
}
/* بيلتف بدل ما يتمرّر: مع ١٢ قارئ الشريط الأفقي كان بيخفي آخر
   قارئ ورا الحافة من غير أي إشارة إنه موجود. */
.qari-strip{
  flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:8px;
}
.qari-chip{
  flex:none;appearance:none;cursor:pointer;white-space:nowrap;
  font-family:"Reem Kufi",sans-serif;font-size:.76rem;line-height:1;
  padding:9px 15px;border-radius:999px;
  background:none;border:1px solid var(--line-2);color:#9dbdb6;
  display:flex;align-items:center;gap:7px;
  transition:border-color .25s,color .25s,background .25s;
}
.qari-chip:hover:not([disabled]){border-color:var(--teal);color:var(--pale)}
.qari-chip[aria-pressed="true"]{
  background:var(--pale);border-color:var(--pale);color:#04100d;font-weight:600;
}
.qari-chip .qc{font-size:.62rem;opacity:.66;font-variant-numeric:tabular-nums}
.qari-chip[disabled]{
  opacity:.3;cursor:not-allowed;border-style:dashed;border-color:var(--sub-2);
}

/* ---------- تنبيه ---------- */
.notice{
  position:fixed;inset:0;z-index:80;
  background:rgba(2,10,8,.9);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:26px;
}
.notice[hidden]{display:none}
.notice-box{
  position:relative;max-width:520px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:3px;
  padding:30px 32px;
}
.notice-x{
  position:absolute;top:12px;left:12px;
  appearance:none;background:none;border:0;cursor:pointer;
  color:var(--sub);width:32px;height:32px;
  display:grid;place-items:center;border-radius:50%;
  transition:color .2s,background .2s;
}
.notice-x:hover{color:var(--txt);background:var(--fog)}
.notice-box h3{
  font-family:"Reem Kufi",sans-serif;font-weight:400;font-size:1.4rem;
  margin:0 0 14px;color:var(--pale);
}
.notice-box p{margin:0;font-size:.88rem;line-height:2.1;color:#b9cfc9}
.notice-box code{
  background:var(--fog);color:var(--pale);
  padding:2px 7px;border-radius:2px;font-size:.85em;
  direction:ltr;display:inline-block;
}
.notice-detail{
  display:block;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);
  font-size:.76rem;color:var(--sub);line-height:1.9;
}

/* ---------- الشاشات الصغيرة ---------- */
@media (max-width:900px){
  body{overflow:auto}
  .app{height:auto;min-height:100dvh}
  .stage{grid-template-columns:1fr}
  .hall{order:1;padding:40px 20px 30px}
  .rail{order:2;border-right:0;border-top:1px solid var(--line)}
  .surah-list{max-height:58vh}
  .ghost{display:none}
}
@media (max-width:520px){
  .topbar{padding:14px 18px}
  .strip{padding:10px 18px 12px}
  .extras{gap:16px}
}

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}