/* ───── ฟอนต์อักษรอุษมานีย์ ศูนย์กษัตริย์ฟะฮัดฯ ───── */
@font-face{
  font-family:"UthmanicHafs";
  src:url("https://cdn.jsdelivr.net/gh/thetruetruth/quran-data-kfgqpc@main/hafs-smart/font/hafssmart.8.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/gh/thetruetruth/quran-data-kfgqpc@main/hafs-smart/font/hafssmart.8.ttf") format("truetype");
  font-display:swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ───── โทนสีถนอมสายตา (Sepia/Warm Paper) ───── */
:root{
  --bg:#F3EDE0;
  --bg2:#FBF7EE;
  --ink:#3B332A;
  --ink2:#6B6052;
  --line:#E0D5C1;
  --acc:#1F5E4A;
  --acc2:#2E7D64;
  --gold:#9A7B2F;
  --quran:#EDF4EF;
  --hadith:#FAF2E2;
  --warn:#FBEDE8;
  --radius:16px;
  --fs:1rem;
  --fs-ar:1.85rem;
}
body.dark{
  --bg:#15191A; --bg2:#1D2325; --ink:#D9D2C4; --ink2:#9AA09A;
  --line:#2E3639; --acc:#6FC0A3; --acc2:#8FD4BB; --gold:#D4B468;
  --quran:#1A2724; --hadith:#262118; --warn:#2C1F1C;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans Thai","Sarabun",-apple-system,"Segoe UI",sans-serif;
  font-size:var(--fs);line-height:1.95;letter-spacing:.01em;
  transition:background .25s,color .25s;
}
.wrap{max-width:780px;margin:0 auto;padding:0 14px}

/* ───── หัวเว็บ ───── */
.topbar{position:sticky;top:0;z-index:50;background:var(--acc);color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.12)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:58px;gap:8px}
.brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;line-height:1.3}
.brand .logo{font-size:1.6rem}
.brand b{display:block;font-size:1.02rem}
.brand small{display:block;font-size:.68rem;opacity:.85}
.tools{display:flex;gap:6px}
.tbtn{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:10px;
  padding:7px 11px;font-size:.85rem;cursor:pointer}
.tbtn:active{transform:scale(.94)}

/* ───── แท็บเมนู ───── */
.tabs{background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:58px;z-index:40}
.tabs .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 14px}
.tabs .wrap::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:999px;
  background:transparent;border:1px solid var(--line);color:var(--ink2);
  text-decoration:none;font-size:.86rem;white-space:nowrap}
.tab.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}

/* ───── เนื้อหา ───── */
main{padding:18px 0 70px}
.page-title{font-size:1.4rem;margin:.3em 0 .2em;color:var(--acc)}
.lead{color:var(--ink2);font-size:.95rem;margin-top:0}
.toc{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:16px;display:flex;flex-direction:column;gap:5px}
.toc b{color:var(--gold);font-size:.85rem}
.toc a{color:var(--ink);text-decoration:none;font-size:.92rem;padding:3px 0}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 15px;margin-bottom:16px;scroll-margin-top:118px}
.sec-h{font-size:1.1rem;margin:0 0 .6em;color:var(--acc);
  border-bottom:2px solid var(--line);padding-bottom:.4em}
.sub{font-size:1rem;color:var(--gold);margin:1.2em 0 .4em}
.bl{padding-right:0;padding-left:1.2em;margin:.5em 0}
.bl li{margin-bottom:.45em}
.note{background:var(--quran);border-right:4px solid var(--acc);border-radius:10px;
  padding:11px 13px;margin:.9em 0;font-size:.92rem}
.note.warn{background:var(--warn);border-color:#C0563C}
.src{font-size:.78rem;color:var(--ink2);display:block;margin-top:6px}

/* ───── อักษรอาหรับ (แก้ไขให้แสดงผลแน่นอน) ───── */
.ar, .ar.sm, .q-ar {
  font-family: "UthmanicHafs", "Noto Naskh Arabic", "Amiri",
               "Traditional Arabic", "Segoe UI", "Tahoma",
               "Arial", serif !important;
  font-size: var(--fs-ar) !important;
  line-height: 2.4 !important;
  text-align: right !important;
  direction: rtl !important;
  color: var(--ink) !important;
  margin: .4em 0 .6em !important;
  word-spacing: .05em;
  letter-spacing: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  unicode-bidi: isolate;
}
.ar.sm {
  font-size: calc(var(--fs-ar) * .82) !important;
  line-height: 2.25 !important;
}
.translit{color:var(--acc2);font-size:.9rem;line-height:1.9;margin:.2em 0 .6em}

/* ───── การ์ดซิกรฺ ───── */
.dhikr{margin:1em 0;padding:13px 14px;background:var(--bg);
  border:1px solid var(--line);border-radius:14px}
.dhikr-label{font-size:.78rem;color:var(--gold);font-weight:700;margin-bottom:4px}
.dhikr-tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.btn-play,.btn-ghost{border:1px solid var(--acc);background:transparent;color:var(--acc);
  border-radius:999px;padding:5px 13px;font-size:.8rem;cursor:pointer;font-family:inherit}
.btn-play{background:var(--acc);color:#fff;border-color:var(--acc)}
.btn-play.playing{background:var(--gold);border-color:var(--gold)}
.btn-play:active,.btn-ghost:active{transform:scale(.95)}
.meaning{margin-top:9px;padding:10px 12px;background:var(--quran);
  border-radius:10px;font-size:.92rem;line-height:1.85;animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}

/* ───── กล่องหลักฐาน ───── */
.daleel{margin:1em 0;padding:13px 14px;border-radius:14px;border:1px solid var(--line)}
.daleel.quran{background:var(--quran);border-right:4px solid var(--acc)}
.daleel.hadith,.daleel.fatwa{background:var(--hadith);border-right:4px solid var(--gold)}
.daleel-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:5px}
.badge{font-size:.72rem;background:var(--acc);color:#fff;border-radius:6px;padding:2px 8px}
.daleel.hadith .badge,.daleel.fatwa .badge{background:var(--gold)}
.ref{font-size:.78rem;color:var(--ink2)}

/* ───── ขั้นตอน ───── */
.step{display:flex;gap:11px;margin:1.3em 0;padding-top:1em;border-top:1px dashed var(--line)}
.step-n{flex:0 0 34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.95rem}
.step-body{flex:1;min-width:0}
.step-body h3{margin:.1em 0 .4em;font-size:1.02rem;color:var(--gold)}

/* ───── ภาพ / ตาราง ───── */
.pic{margin:1em 0;text-align:center}
.pic img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.pic figcaption{font-size:.8rem;color:var(--ink2);margin-top:6px}
.pic.dead{display:none}
.credit{opacity:.7}
.tw{overflow-x:auto;margin:1em 0}
table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:420px}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:right}
thead th{background:var(--acc);color:#fff}
tbody tr:nth-child(even){background:var(--bg)}

/* ───── เกม ───── */
.pool{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{background:var(--bg);border:1px solid var(--acc);color:var(--ink);
  border-radius:12px;padding:9px 12px;font-size:.86rem;cursor:pointer}
.chip:active{transform:scale(.95)}
.chip.used{opacity:.3;pointer-events:none}
.slot{list-style:decimal;padding-left:1.4em;margin:10px 0;min-height:20px}
.slot li{padding:5px 0;font-size:.9rem}
.slot li.ok{color:var(--acc2)}
.slot li.bad{color:#C0563C;text-decoration:line-through}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.btn{background:var(--acc);color:#fff;border:0;border-radius:999px;
  padding:9px 18px;font-size:.88rem;cursor:pointer;font-family:inherit}
.msg{font-size:.9rem;font-weight:600;color:var(--acc2)}
.q-ar{font-family:"UthmanicHafs","Noto Naskh Arabic","Amiri",serif;font-size:1.7rem;text-align:center;
  direction:rtl;margin:14px 0;line-height:2.3}
.opts{display:grid;gap:8px;margin:12px 0}
.opt{background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;font-size:.9rem;cursor:pointer;text-align:right;font-family:inherit;color:var(--ink)}
.opt.ok{background:var(--acc);color:#fff;border-color:var(--acc)}
.opt.no{background:var(--warn);border-color:#C0563C}
.score{font-size:.86rem;color:var(--ink2)}

/* ───── ท้ายเว็บ ───── */
.foot{background:var(--bg2);border-top:1px solid var(--line);padding:18px 0;text-align:center;font-size:.85rem}
.foot p{margin:.3em 0}
.to-top{position:fixed;left:14px;bottom:16px;width:44px;height:44px;border-radius:50%;
  border:0;background:var(--acc);color:#fff;font-size:1.2rem;cursor:pointer;
  opacity:0;pointer-events:none;transition:.25s;z-index:60;box-shadow:0 3px 12px rgba(0,0,0,.2)}
.to-top.show{opacity:.92;pointer-events:auto}

@media(max-width:420px){
  :root{--fs:.97rem;--fs-ar:1.65rem}
  .card{padding:14px 12px}
}