@font-face { font-family: "Amiri"; src: url("fonts/Amiri-Regular.ttf"); font-display: swap; }
@font-face { font-family: "ArefRuqaa"; src: url("fonts/ArefRuqaa-Bold.ttf"); font-display: swap; }

:root {
  --night-top: #0a1530; --night-mid: #0b2a33; --night-bottom: #06231c;
  --gold: #d9b45b; --gold-dim: rgba(217,180,91,.4); --gold-fill: rgba(217,180,91,.2);
  --ivory: #f6f1e3; --ivory-dim: rgba(246,241,227,.7);
  --panel: rgba(255,255,255,.1); --panel-strong: rgba(255,255,255,.2); --ink: #08121f;
  --c-n: #6eb5ff; --c-p: #b79bff; --c-o: #ffa040; --c-q: #ff4d5e; --c-g: #ff8edb;
  --c-f: #e26bff; --c-i: #3de0e8; --c-d: #55e08a; --c-s: #8e96a0;
  --arabic: "Amiri", "Noto Naskh Arabic", "Geeza Pro", serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--night-top); color: var(--ivory);
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; }
body { background: linear-gradient(160deg, var(--night-top), var(--night-mid) 55%, var(--night-bottom)) fixed;
  overscroll-behavior: none; }
#app { min-height: 100%; height: 100dvh; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  max-width: 980px; margin: 0 auto; }
button { font: inherit; color: inherit; cursor: pointer; }
.gold { color: var(--gold); } .dim { color: var(--ivory-dim); }
.hidden { display: none !important; }

/* ---------- boutons ---------- */
.btn { background: var(--panel); border: 1.5px solid var(--gold-dim); border-radius: 16px; min-height: 48px;
  padding: 6px 12px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 12px; font-weight: 600; transition: transform .1s; }
.btn svg { width: 26px; height: 26px; fill: currentColor; }
.btn:active, .btn:focus-visible { background: var(--gold); color: var(--ink); border-color: var(--ivory); outline: none; }
.btn.on { background: var(--gold-fill); border-color: var(--gold); }
.btn.small { min-height: 40px; flex-direction: row; font-size: 14px; gap: 6px; }

/* ---------- splash ---------- */
.splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; cursor: pointer; gap: 6px; }
.splash .medal { width: min(86vw, 520px); padding: 36px 20px 40px; border: 2px solid var(--gold-dim);
  border-radius: 28px; background: radial-gradient(circle at 50% 30%, rgba(217,180,91,.14), transparent 70%); }
.splash .isti { font-family: "ArefRuqaa", var(--arabic); color: var(--gold); font-size: clamp(30px, 7vw, 54px); line-height: 1.8; }
.splash .basm { font-family: "ArefRuqaa", var(--arabic); color: var(--ivory); font-size: clamp(36px, 9vw, 72px); line-height: 1.8; }
.star { color: var(--gold); letter-spacing: .6em; opacity: .85; margin: 6px 0; font-size: 18px; }

/* ---------- accueil ---------- */
.top { display: flex; align-items: center; gap: 10px; padding: 10px 14px 2px; }
.top h1 { margin: 0; font-size: 22px; color: var(--gold); flex: 1; }
.top .ar { font-family: var(--arabic); color: var(--gold); font-size: 30px; }
.sub { padding: 0 14px; font-size: 13px; color: var(--ivory-dim); }
.list { flex: 1; overflow-y: auto; padding: 8px 12px 24px; display: grid; gap: 10px;
  grid-template-columns: 1fr; align-content: start; -webkit-overflow-scrolling: touch; }
@media (min-width: 720px) { .list { grid-template-columns: 1fr 1fr; } }
.card { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--gold-dim);
  border-radius: 18px; padding: 10px 14px; min-height: 68px; text-align: left; width: 100%; }
.card:active, .card:focus-visible { background: var(--panel-strong); border-color: var(--gold); outline: none; }
.num { width: 42px; height: 42px; border: 2px solid var(--gold); border-radius: 50%; display: grid;
  place-items: center; color: var(--gold); font-weight: 700; flex: none; }
.card .t { flex: 1; min-width: 0; }
.card .t b { display: block; font-size: 18px; } .card .t span { font-size: 13px; color: var(--ivory-dim); }
.card .ar { font-family: var(--arabic); color: var(--gold); font-size: 28px; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px 0; align-items: center; }
.progress { font-size: 13px; color: var(--ivory-dim); }

/* ---------- lecteur ---------- */
.reader-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0; }
.reader-head .title { flex: 1; text-align: center; min-width: 0; }
.reader-head .title b { display: block; font-size: 16px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-head .title .ar { font-family: var(--arabic); font-size: 26px; color: var(--gold); line-height: 1.3; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 14px 0; font-size: 12px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.verses { flex: 1; overflow-y: auto; padding: 10px 14px 10px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.verse { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; margin-bottom: 8px; border-radius: 16px;
  border: 1.5px solid transparent; cursor: pointer; direction: rtl; }
.verse.sel { background: var(--panel); border-color: var(--gold); }
.verse .vn { direction: ltr; flex: none; width: 34px; height: 34px; margin-top: 8px; border: 1.5px solid var(--gold-dim);
  border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: var(--gold); }
.verse .txt { font-family: var(--arabic); font-size: clamp(26px, 5.4vw, 40px); line-height: 2.1; flex: 1; text-align: right; }
.verse.bas .txt { text-align: center; color: var(--gold); }
.w { padding: 0 2px; border-radius: 8px; transition: background .15s, opacity .15s; }
.verse.playing .w { opacity: .5; }
.verse.playing .w.reached { opacity: 1; }
.verse.playing .w.cur { background: var(--gold-fill); box-shadow: 0 0 0 2px var(--gold); opacity: 1; }
.r-n { --c: var(--c-n); } .r-p { --c: var(--c-p); } .r-o, .r-m { --c: var(--c-o); } .r-q { --c: var(--c-q); }
.r-g { --c: var(--c-g); } .r-f, .r-c { --c: var(--c-f); } .r-i { --c: var(--c-i); }
.r-a, .r-u, .r-w, .r-d, .r-b { --c: var(--c-d); } .r-h, .r-s, .r-l { --c: var(--c-s); }
.tajweed .verse:not(.playing) .r, .tajweed .verse.playing .w.reached .r { color: var(--c); }
.trans { margin: 0 12px; padding: 10px 14px; border: 1px solid var(--gold-dim); border-radius: 16px; background: var(--panel);
  min-height: 92px; max-height: 26vh; overflow-y: auto; }
.trans .fr { font-size: clamp(16px, 2.6vw, 20px); line-height: 1.4; }
.trans .tr { margin-top: 4px; font-size: 13px; font-style: italic; color: var(--ivory-dim); }
.controls { display: flex; gap: 5px; padding: 8px 8px 10px; justify-content: center; }
.controls .btn { flex: 1 1 0; min-width: 0; max-width: 140px; padding: 6px 2px; font-size: 10.5px; white-space: nowrap; }
.controls .btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 600px) { .controls .btn { font-size: 13px; } }
.msg { text-align: center; font-size: 13px; color: var(--c-o); padding: 4px 12px 0; }

/* ---------- à propos ---------- */
.about { flex: 1; overflow-y: auto; padding: 8px 18px 28px; line-height: 1.5; }
.about h2 { color: var(--gold); font-size: 18px; margin: 16px 0 2px; }
.about p { margin: 2px 0; font-size: 15px; }