/* جناح «التلاوات» — tilawa.basaere.com. تطبيقٌ بملء الشاشة: رأسٌ رفيع، ومسرحٌ يشغل ما بينهما بأحد الأشكال الأربعة،
   ومرسى سفليٌّ للمشغّل وأزرار الأشكال. الكحليُّ والذهبيُّ والبيجُ المصحفيّ من رموز بصائر (public/assets/tokens.css).
   الكرةُ والمسجّلان مسرحٌ ليليٌّ في الوضعين عمدًا؛ والمصحفُ ورقةٌ تتبع الوضع. */
@font-face{font-family:"HafsKFGQPC";src:url("/assets/fonts/hafs-kfgqpc-v18.woff2") format("woff2");font-display:block}
@font-face{font-family:"NotoNaskh";src:url("/assets/fonts/notonaskharabic_RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2DHV20Lg.woff2") format("woff2");font-display:swap}
:root{
  --navy:#122A4C;--navy-2:#0C1E38;--gold:#D4A64A;--gold-2:#E7C578;--gold-ink:#7C570F;--copper:#B87333;--teal:#5CC6B6;
  --paper:#F7F1E3;--page:#FBF6EA;--card:#FFFDF7;--line:#E4DAC4;--ink:#22314A;--muted:#5C6672;--on-navy:#F3EAD3;
  --night:#060c18;--quran-ink:#1B1A17;--sel:rgba(212,166,74,.30);
  --r-hafs:#D4A64A;--r-warsh:#5CC6B6;--r-qalun:#E0896A;--r-douri:#B49BE0;--r-sousi:#7FB2E6;--r-shuba:#E7D39A;--r-other:#C9CED8;
  --q:"HafsKFGQPC","Amiri Quran","Noto Naskh Arabic",serif;
  --ui:"NotoNaskh","Noto Naskh Arabic",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --top:56px;--dock:128px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1626;--page:#141E30;--card:#16233B;--line:#243654;--ink:#E8E2D2;--muted:#9AA4B5;--gold-ink:#E0B76A;
  --quran-ink:#EDE6D3;--sel:rgba(224,183,106,.28);color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0E1626;--page:#141E30;--card:#16233B;--line:#243654;--ink:#E8E2D2;--muted:#9AA4B5;--gold-ink:#E0B76A;
  --quran-ink:#EDE6D3;--sel:rgba(224,183,106,.28);color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--navy-2)}
body{font-family:var(--ui);color:var(--ink);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);height:100dvh;width:100%}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lat{font-family:var(--mono);letter-spacing:.12em;font-size:.72em;opacity:.8}
svg{fill:currentColor}

/* ── الرأس ── */
.top{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:var(--on-navy);
  padding-top:env(safe-area-inset-top,0px);padding-inline:max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-left,0px));
  border-bottom:1px solid rgba(212,166,74,.25);z-index:5}
.hd-in{display:flex;align-items:center;gap:.5rem;min-height:var(--top);min-width:0}
.who{display:flex;align-items:center;gap:.6rem;min-width:0;flex:1;border:0;background:none;color:inherit;cursor:pointer;text-align:start;padding:4px 6px;border-radius:12px}
.who:hover{background:rgba(255,255,255,.07)}
.who-img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1.5px solid var(--gold);flex:none}
.who-t{display:grid;min-width:0;line-height:1.35}
.who-t b{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-t small{font-size:.8rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;gap:.3rem;flex:none}
.ic{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--on-navy);
  display:grid;place-items:center;cursor:pointer}
.ic svg{width:20px;height:20px}
.ic:hover{background:rgba(255,255,255,.14)}
.ic[aria-pressed="true"]{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* ── المسرح ── */
.stage{position:relative;min-height:0;overflow:hidden;background:var(--night)}
.view{position:absolute;inset:0;display:none}
body[data-view="mushaf"] .v-mushaf,body[data-view="globe"] .v-globe,
body[data-view="cassette"] .v-deck,body[data-view="reel"] .v-deck{display:block}

/* ① المصحف */
.v-mushaf{background:var(--paper);overflow:auto;overscroll-behavior:contain;padding:14px max(12px,env(safe-area-inset-right,0px)) 24px max(12px,env(safe-area-inset-left,0px))}
.page{max-width:820px;margin:0 auto;min-height:100%;background:var(--page);border-radius:18px;padding:22px clamp(14px,4vw,40px) 26px;position:relative;
  box-shadow:0 10px 30px rgba(18,42,76,.10);border:1px solid var(--line)}
.page::before{content:"";position:absolute;inset:8px;border:1.5px solid color-mix(in srgb,var(--gold) 60%,transparent);border-radius:12px;pointer-events:none;
  box-shadow:inset 0 0 0 4px var(--page),inset 0 0 0 5px color-mix(in srgb,var(--gold) 30%,transparent)}
.pg-hd{display:grid;justify-items:center;gap:2px;margin-bottom:12px;position:relative}
.pg-title{font-family:var(--q);font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);color:var(--gold-ink);padding:2px 40px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 26%,transparent),transparent);border-radius:999px}
.pg-sub{font-size:.8rem;color:var(--muted);text-align:center}
.pg-body{font-family:var(--q);font-size:clamp(1.45rem,1.1rem + 1.4vw,2.1rem);line-height:2.25;text-align:justify;color:var(--quran-ink);position:relative;word-spacing:.04em}
.pg-body .aya{border-radius:8px;padding:0 2px;transition:background .3s,box-shadow .3s;cursor:default}
.pg-body.synced .aya{cursor:pointer}
.pg-body .aya.on{background:var(--sel);box-shadow:0 0 0 3px color-mix(in srgb,var(--sel) 60%,transparent)}
.pg-body .mk{font-family:var(--ui);display:inline-grid;place-items:center;min-width:1.65em;height:1.65em;margin:0 .15em;font-size:.55em;color:var(--gold-ink);
  border:1.5px solid color-mix(in srgb,var(--gold-ink) 60%,transparent);border-radius:50%;vertical-align:middle;line-height:1}
.pg-body .bas{display:block;text-align:center;margin-bottom:.2em}
.pg-body .empty{font-family:var(--ui);font-size:1rem;color:var(--muted);text-align:center;line-height:1.8}
.pg-ft{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:14px;font-size:.8rem;color:var(--muted);position:relative}
.pg-ft a{color:var(--gold-ink)}

/* ② الكرة */
.v-globe{background:#03060d}
.stars,.globe{position:absolute;inset:0;width:100%;height:100%}
.g-legend,.g-color{position:absolute;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.g-legend{top:12px;inset-inline-start:12px;max-width:calc(100% - 24px)}
.g-color{top:12px;inset-inline-end:12px}
.v-globe button[data-k],.g-color button{font-size:.78rem;border-radius:999px;padding:5px 11px;cursor:pointer;border:1px solid rgba(255,255,255,.2);
  background:rgba(10,18,34,.72);color:#ECE4CF;backdrop-filter:blur(6px);display:inline-flex;gap:6px;align-items:center;min-height:32px}
.v-globe button[aria-pressed="false"]{opacity:.5}
.g-color button[aria-pressed="true"]{background:var(--gold);color:var(--navy);opacity:1;border-color:var(--gold)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.g-tip{direction:rtl;font-family:var(--ui);background:rgba(10,18,34,.92);color:#ECE4CF;border:1px solid rgba(212,166,74,.5);border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.6}
.g-tip b{color:#E7C578;font-size:15px}
.g-tag{transform:translate(50%,-120%);pointer-events:none;font-size:14px;font-weight:600;color:#1a1408;background:#E7C578;padding:2px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.g-card{position:absolute;inset-inline:12px;bottom:12px;max-height:46%;display:grid;grid-template-rows:auto minmax(0,1fr);z-index:3;
  background:rgba(12,22,40,.94);color:#ECE4CF;border:1px solid rgba(212,166,74,.35);border-radius:16px;backdrop-filter:blur(8px);overflow:hidden}
@media (min-width:900px){.g-card{inset-inline:auto 16px;width:360px;top:60px;bottom:16px;max-height:none}}
.g-card-hd,.sh-hd{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:8px 8px 8px 14px;padding-inline-start:16px;border-bottom:1px solid rgba(212,166,74,.2)}
.g-card-b{overflow:auto}
.x{width:40px;height:40px;border-radius:50%;border:0;background:transparent;cursor:pointer;font-size:1.05rem;color:inherit}

/* ③④ المسجّل */
.v-deck{background:radial-gradient(70% 55% at 50% 38%,rgba(212,166,74,.13),transparent 70%),linear-gradient(180deg,#0b1526,#050a14)}
.deck{position:absolute;inset:0 0 86px 0}
.deck canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.deck-off{position:absolute;inset:0;display:grid;place-items:center;color:#cfc6b1;text-align:center;padding:24px;margin:0}
.cap{position:absolute;inset-inline:0;bottom:0;min-height:86px;padding:8px 16px 12px;text-align:center;color:#ECE4CF;display:grid;align-content:end;gap:2px}
.cap-aya{font-family:var(--q);font-size:clamp(1.15rem,1rem + 1vw,1.6rem);line-height:1.9;color:#F3EAD3;max-height:3.9em;overflow:hidden}
.cap-who{font-size:.85rem;color:#c9bfa6}
.cap-who b{color:#E7C578;font-weight:600}
@media (orientation:portrait){.deck{inset:4% 0 120px 0}.cap{min-height:120px}}

/* ── المرسى ── */
.dock{background:linear-gradient(0deg,var(--navy-2),var(--navy));color:var(--on-navy);border-top:1px solid rgba(212,166,74,.25);
  padding-bottom:env(safe-area-inset-bottom,0px);padding-inline:max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-left,0px));z-index:5}
.player{display:flex;align-items:center;gap:.4rem;padding:8px 4px 4px}
.pb{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:var(--on-navy);display:grid;place-items:center;cursor:pointer;flex:none}
.pb svg{width:18px;height:18px}
.pp{width:52px;height:52px;background:radial-gradient(circle at 35% 30%,var(--gold-2),var(--gold) 60%,#8a6212);color:var(--navy);border:0;box-shadow:0 6px 18px -6px var(--gold)}
.pp svg{width:22px;height:22px}
.seek{flex:1;display:flex;align-items:center;gap:.4rem;min-width:0}
.seek input{flex:1;min-width:0;accent-color:var(--gold)}
.tm{font-family:var(--mono);font-size:.74rem;opacity:.8;min-width:4.2ch;text-align:center}
.chip{min-width:46px;height:34px;border-radius:999px;border:1px solid rgba(212,166,74,.55);background:transparent;color:var(--gold-2);cursor:pointer;font-family:var(--mono);font-size:.82rem;flex:none}
.note{margin:2px 6px 4px;font-size:.8rem;padding:5px 10px;border-radius:10px;background:rgba(184,115,51,.2);border:1px solid rgba(184,115,51,.45)}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px 0 6px}
.modes button{display:grid;justify-items:center;gap:1px;border:0;background:none;color:rgba(243,234,211,.62);cursor:pointer;padding:5px 2px;border-radius:12px;font-size:.76rem;min-height:48px}
.modes svg{width:22px;height:22px}
.modes button[aria-pressed="true"]{color:var(--gold-2);background:rgba(212,166,74,.12)}

/* ── اللوحة المنزلقة ── */
.scrim{position:fixed;inset:0;background:rgba(5,10,20,.5);z-index:20}
.sheet{position:fixed;z-index:21;inset-inline:0;bottom:0;max-height:86dvh;display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--card);color:var(--ink);border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.35);padding-bottom:env(safe-area-inset-bottom,0px);
  animation:up .22s cubic-bezier(.2,0,0,1)}
@keyframes up{from{transform:translateY(30px);opacity:.4}}
@media (min-width:900px){.sheet{inset-inline:0 auto;top:0;bottom:0;width:420px;max-height:none;border-radius:0;animation:none}}
.sh-hd{border-color:var(--line)}
.sh-hd b{font-size:1.05rem}
.sh-b{overflow:auto;overscroll-behavior:contain;padding:10px 12px 16px}
.srch{display:flex;gap:6px;position:sticky;top:-10px;background:var(--card);padding:6px 0 8px;z-index:1;flex-wrap:wrap}
.srch input,.srch select{flex:1;min-width:0;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:8px 12px}
.srch select{flex:1 1 40%}
.srch input{flex-basis:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 8px}
.chips button{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:3px 10px;font-size:.78rem;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.chips button[aria-pressed="true"]{background:var(--rc,var(--gold));border-color:transparent;color:#1a1408}
.cnt{font-size:.8rem;color:var(--muted);margin:2px 2px 6px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:start;border:0;border-bottom:1px solid var(--line);
  background:none;padding:9px 4px;cursor:pointer}
.row:hover{background:color-mix(in srgb,var(--gold) 8%,transparent)}
.row[aria-current="true"]{background:color-mix(in srgb,var(--gold) 16%,transparent)}
.av{width:42px;height:42px;border-radius:50%;object-fit:cover;background:color-mix(in srgb,var(--gold) 22%,var(--paper));display:grid;place-items:center;
  font-weight:700;color:var(--gold-ink);border:1px solid var(--line)}
.row .t{font-weight:600;overflow-wrap:anywhere}
.row .s{font-size:.78rem;color:var(--muted);display:block}
.row .life{font-size:.72rem;color:var(--muted);white-space:nowrap}
.row .life.dead{color:var(--copper)}
.tag{display:inline-block;font-size:.7rem;padding:0 7px;border-radius:999px;border:1px solid color-mix(in srgb,var(--rc,var(--muted)) 55%,transparent);color:var(--rc,var(--muted));margin-inline-end:4px}
.grid-s{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.grid-s button{display:flex;gap:6px;align-items:baseline;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:7px 8px;cursor:pointer;text-align:start;font-size:.9rem}
.grid-s button .n{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.grid-s button[aria-current="true"]{border-color:var(--gold);color:var(--gold-ink);font-weight:600}
.grid-s button:disabled{opacity:.35;cursor:not-allowed}
.bio{display:grid;gap:10px}
.bio-hd{display:flex;gap:12px;align-items:center}
.bio-hd img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.bio p{margin:0;color:var(--ink);font-size:.92rem}
.bio .src{font-size:.78rem;color:var(--muted)}
.ms{display:grid;gap:6px}
.ms button{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:8px 10px;text-align:start;cursor:pointer}
.ms button[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.ms small{display:block;color:var(--muted);font-size:.75rem}
.btn{border:1px solid var(--gold);background:var(--gold);color:var(--navy);border-radius:999px;padding:7px 16px;cursor:pointer;font-weight:600}
.btn.ghost{background:transparent;color:var(--gold-ink)}
h5.grp{margin:12px 2px 4px;font-size:.82rem;color:var(--gold-ink)}

/* الأستوديو: لوحةُ أجهزةٍ داكنة في الوضعين */
.rack{background:linear-gradient(180deg,#1c1f25,#121418);color:#e8e2d2;border-radius:14px;padding:12px;border:1px solid #2a2f38}
.rack h4{margin:14px 0 8px;font-size:.8rem;color:#d4a64a;font-weight:600;text-align:center}
.vfd{width:100%;height:110px;display:block;background:#05100f;border-radius:8px;border:1px solid #0f2a27}
.fx{font-size:.74rem;color:#7ff0de;text-align:center;margin-top:4px}
.fx[data-off="1"]{color:#e0896a}
.profiles{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.profiles button{border:1px solid #353b45;background:linear-gradient(180deg,#2a2e36,#1a1d22);color:#d8d2c2;border-radius:8px;padding:6px 10px;font-size:.8rem;cursor:pointer}
.profiles button[aria-pressed="true"]{color:#1a1408;background:linear-gradient(180deg,#e7c578,#c99a3c);border-color:#e7c578}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 14px}
.ctl{display:grid;gap:2px;font-size:.8rem;color:#b9b3a4}
.ctl span{display:flex;justify-content:space-between;gap:6px}
.ctl output{font-family:var(--mono);color:#e7c578;font-size:.76rem}
.ctl input[type=range]{accent-color:#d4a64a;width:100%;direction:ltr}
.ctl select{background:#0f1115;border:1px solid #353b45;border-radius:8px;padding:4px 8px;color:#e8e2d2}
.sw{display:flex;gap:6px;align-items:center;font-size:.8rem;color:#b9b3a4}
.eq{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;direction:ltr}
.eq label{display:grid;justify-items:center;gap:4px;font-family:var(--mono);font-size:.6rem;color:#9a9486}
.eq input{writing-mode:vertical-lr;direction:rtl;width:22px;height:110px;accent-color:#d4a64a}
.eq output{color:#e7c578}

@media (min-width:900px){:root{--dock:110px}
  .player{max-width:980px;margin:0 auto}
  .modes{max-width:640px;margin:0 auto}}
@media (max-width:380px){.tm{display:none}.pb{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}