/* ===== الرماد الأخير: شكل الكتاب (ورقي / ليلي) ===== */
:root,[data-theme="paper"]{
  --desk:#2a211b; --page:#f0e6d0; --page2:#e7dbc0; --ink:#2b221b; --dim:#6b5d4f;
  --accent:#7c2616; --on-accent:#f8f0e0; --rule:#cdbb97; --ok:#3d6a4c; --bad:#9b2f20;
  --shadow:0 0 0 1px #00000030, 0 18px 50px #000000aa, inset 0 0 70px #7a4f1a22;
}
[data-theme="night"]{
  --desk:#0a0d0f; --page:#14191b; --page2:#1b2326; --ink:#d9d2c0; --dim:#8d9896;
  --accent:#e3a33b; --on-accent:#1a1205; --rule:#2c3a3f; --ok:#7fae8d; --bad:#e0806f;
  --shadow:0 0 0 1px #ffffff12, 0 18px 50px #000000cc;
}
*{box-sizing:border-box}
html{background:var(--desk);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font-family: sans-serif;font-size:1.2rem;line-height:2;
  background:var(--desk);padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
code{direction:ltr;unicode-bidi:embed;font-size:.9em}

/* الشريط العلوي (على سطح الطاولة) */
.top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.6rem 1rem;padding-top:calc(.6rem + env(safe-area-inset-top));font-family:'Reem Kufi',sans-serif;color:#d9cdb4}
.brand{font:700 1.35rem 'Aref Ruqaa',serif;color:#efe2c2}
.top nav{display:flex;align-items:center;gap:.9rem;font-size:.95rem}
.top nav a{color:#c9bb9d}
.theme-btn{background:transparent;border:1px solid #6b5d4f;color:#e7dbc0;border-radius:50%;width:34px;height:34px;font-size:1.1rem;cursor:pointer;line-height:1}
.flash{background:#5a2218;color:#ffe3dc;padding:.6rem 1rem;text-align:center;font-family:'Reem Kufi',sans-serif}
.foot{text-align:center;color:#8c7f6c;padding:1.5rem 1rem 2.5rem;font-size:.95rem}

/* صفحة الكتاب */
.book{max-width:720px;margin:.4rem auto 0;background:var(--page);box-shadow:var(--shadow);
  padding:0 1.35rem 2.4rem;border-radius:3px;position:relative}
@media (max-width:760px){.book{margin:0;border-radius:0;box-shadow:none}}

.btn{display:inline-block;font:500 1.05rem 'Reem Kufi',sans-serif;padding:.65rem 1.5rem;border:1px solid var(--accent);
  background:transparent;color:var(--accent);cursor:pointer;border-radius:2px;min-height:46px}
.btn:hover{text-decoration:none;background:var(--page2)}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.1)}

/* رأس الفصل */
.chapter-head{text-align:center;padding:1.4rem 0 .6rem}
.chapter-head span{display:block;font:500 .95rem 'Reem Kufi',sans-serif;color:var(--dim);letter-spacing:.05em}
.chapter-head b{display:block;font:700 clamp(1.9rem,7vw,2.6rem)/1.5 'Aref Ruqaa',serif;color:var(--accent)}
.orn{display:block;font-style:normal;color:var(--dim);line-height:1}

/* لوحة الصورة */
.plate{margin:.6rem 0 1.1rem;padding:6px;background:var(--page2);border:1px solid var(--rule)}
.plate img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;aspect-ratio:16/9;
  border:2px dashed var(--rule);font-family:'Reem Kufi',sans-serif;color:var(--dim);padding:0}
.slot span{font-size:1.15rem;color:var(--ink)}
.slot small{direction:ltr;font-family:monospace;font-size:.8rem}

h1{font:700 clamp(1.6rem,6vw,2.1rem)/1.5 'Aref Ruqaa',serif;text-align:center;margin:.4rem 0 1rem;color:var(--ink)}
.dim{color:var(--dim)} .center{text-align:center}

/* النص */
.story p{margin:0 0 .3rem;text-align:justify;text-justify:inter-word;text-indent:1.3em;hyphens:none}
.story p:first-child{text-indent:0}
.story p + p{margin-top:.2rem}

/* نتيجة القرار */
.outcome{margin:0 0 1.1rem;padding:.7rem 1rem;background:var(--page2);border-inline-start:4px solid var(--accent);font-size:1.08rem;line-height:1.95}
.outcome small{display:block;font:700 .8rem 'Reem Kufi',sans-serif;color:var(--accent);margin-bottom:.15rem}
.outcome p{margin:0}

.delta{display:flex;gap:.45rem;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 1rem;font:500 .85rem 'Reem Kufi',sans-serif}
.delta li{padding:0 .55rem;border:1px solid var(--rule);border-radius:2px;line-height:1.7}
.delta .up{color:var(--ok)} .delta .down{color:var(--bad)}
.crowd{color:var(--dim);font-size:.95rem;text-align:center;margin:1.2rem 0 0}

/* الاختيارات */
.choices{margin-top:1.6rem;border-bottom:1px solid var(--rule)}
.choices::before{content:"❖  ماذا تفعل؟  ❖";display:block;text-align:center;font:700 1rem 'Reem Kufi',sans-serif;color:var(--dim);margin-bottom:.4rem}
.choice{position:relative;display:block;width:100%;text-align:start;background:transparent;border:0;border-top:1px solid var(--rule);
  color:var(--ink);font:1.15rem/1.85 'Amiri',serif;padding:.85rem .3rem .85rem .3rem;padding-inline-start:2rem;cursor:pointer;min-height:56px;
  -webkit-tap-highlight-color:transparent}
.choice::before{content:"❦";position:absolute;inset-inline-start:.4rem;top:.8rem;color:var(--accent)}
.choice:hover,.choice:active{background:var(--page2)}
.choice small{display:block;color:var(--ok);font:700 .8rem 'Reem Kufi',sans-serif}
.folio{text-align:center;color:var(--dim);font-size:.95rem;margin-top:1.6rem}
.end-box{margin-top:2rem;padding:1.2rem;border:1px solid var(--rule);text-align:center}
.end-box .btn{margin:.25rem}

/* شريط الحالة (ثابت أعلى الصفحة) */
.hud{position:sticky;top:0;z-index:5;background:var(--page);margin:0 -1.35rem;padding:.5rem 1.35rem .4rem;
  border-bottom:1px solid var(--rule);font-family:'Reem Kufi',sans-serif}
.hud-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.m span{display:flex;justify-content:space-between;font-size:.78rem;color:var(--dim);line-height:1.4}
.m b{color:var(--ink);font-weight:500}
.m i{display:block;height:5px;background:var(--rule);border-radius:3px;overflow:hidden;margin-top:2px}
.m u{display:block;height:100%;text-decoration:none;border-radius:3px}
.m.health u{background:#a33a2a}.m.humanity u{background:#4f8a66}.m.infection u{background:#b8892a}
.res{display:flex;gap:.9rem;overflow-x:auto;white-space:nowrap;margin-top:.3rem;font-size:.78rem;color:var(--dim);scrollbar-width:none}
.res::-webkit-scrollbar{display:none}
.res b{color:var(--accent);font-weight:700}

/* الصفحات العامة */
.hero{text-align:center;padding-top:1.2rem}
.hero h1{font:700 clamp(2.8rem,12vw,4.6rem)/1.3 'Aref Ruqaa',serif;margin:.8rem 0 .2rem;color:var(--accent)}
.hero .tag{font-size:1.25rem;margin:.2rem 0 1rem;color:var(--ink)}
.hero .lead{max-width:34em;margin:0 auto 1.6rem;color:var(--dim)}
.actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.panel{padding:.5rem 0}
.panel.narrow{max-width:420px;margin:0 auto;padding-top:1.2rem}
.panel h2,.panel h3{font-family:'Aref Ruqaa',serif;color:var(--accent)}
.panel h3{margin-top:2rem;border-bottom:1px solid var(--rule);padding-bottom:.2rem;font-size:1.5rem}
.error{background:#f3d3cb;color:#6e1f12;padding:.5rem .8rem;border-radius:2px}
[data-theme="night"] .error{background:#3a1d19;color:#f1c9c2}
.form{display:flex;flex-direction:column;gap:1rem}
.form label{display:flex;flex-direction:column;font:500 1rem 'Reem Kufi',sans-serif;color:var(--dim)}
.form input{margin-top:.3rem;padding:.7rem .8rem;background:var(--page2);border:1px solid var(--rule);color:var(--ink);font:1.1rem 'Amiri',serif;border-radius:2px;min-height:46px}
.alt{text-align:center;color:var(--dim)}
.bg-list{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.bg-opt{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem 1rem;border:1px solid var(--rule);cursor:pointer;border-radius:2px}
.bg-opt:has(input:checked){border-color:var(--accent);background:var(--page2)}
.bg-opt input{margin-top:.8rem;accent-color:var(--accent)}
.bg-opt strong{display:block;font:700 1.2rem 'Reem Kufi',sans-serif}
.bg-opt em{font-style:normal;color:var(--dim);font-size:1.05rem}

.profile-head{display:flex;gap:1rem;align-items:center;padding-top:1rem}
.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover}
.avatar.ph{display:flex;align-items:center;justify-content:center;background:var(--page2);font:700 2rem 'Aref Ruqaa',serif;color:var(--accent)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem;margin:1rem 0;font-family:'Reem Kufi',sans-serif;font-size:.95rem}
.stat-grid div{border:1px solid var(--rule);padding:.3rem .7rem;display:flex;justify-content:space-between}
.stat-grid b{color:var(--accent);font-weight:700}
.ach{list-style:none;padding:0;display:grid;gap:.5rem}
.ach li{padding:.4rem .9rem;border-inline-start:3px solid var(--rule)}
.ach li strong{display:block;font-family:'Reem Kufi',sans-serif}
.ach li span{color:var(--dim);font-size:1rem}
.ach .got{border-color:var(--accent)} .ach .lock{opacity:.45}
.chk{width:100%;border-collapse:collapse;font-size:.95rem}
.chk td,.chk th{border-bottom:1px solid var(--rule);padding:.3rem .4rem;text-align:start}
.chk .ok td:last-child{color:var(--ok)} .chk .no td:last-child{color:var(--bad)}

@media (max-width:520px){
  body{font-size:1.13rem}
  .story p{text-align:start}   /* على الموبايل: محاذاة طبيعية أريح للعين */
  .book{padding:0 1.05rem 2rem}
  .hud{margin:0 -1.05rem;padding-inline:1.05rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}