/* about.css — قسم «عن اللعبة / طريقة اللعب / أسئلة شائعة» أسفل صفحات الألعاب الثلاث (2026-09-21).
   لماذا: صفحات الألعاب تطبيقات بشاشة واحدة بلا نصّ يصف اللعبة، فلا يجد محرّك البحث ولا الزائر القادم منه
   جواباً عن «ما هذه اللعبة؟ وكيف تُلعب؟ وهل هي مجّانيّة؟». القسم تحت الطيّة فلا يمسّ الشاشة الأولى.
   ملفّ واحد للصفحات الثلاث: كل صفحة تسمّي رموز ألوانها باسم مختلف (‎--on-bg في style.css و‎--ink في
   سين جيم وتحدي الصور) فنقرأ الاسمين بالتتابع — الثيمان النهاريّ والليليّ يأتيان من الصفحة نفسها. */
.about{
  --ab-ink:var(--on-bg, var(--ink, #f3ead6));
  --ab-dim:var(--on-bg-dim, var(--ink-dim, #bdb091));
  --ab-gold:var(--gold-text, var(--gold, #d6b15a));
  --ab-card:var(--card, #272219);
  --ab-line:var(--card-line, var(--line, #473f2e));
  --ab-display:var(--font-display, 'Alexandria', 'Alexandria Fallback', sans-serif);
  max-width:780px; margin:clamp(64px,11vh,120px) auto 0; padding:0 clamp(16px,3vw,24px) 12px;
  text-align:right; color:var(--ab-dim); font-size:15.5px; line-height:1.95;
}
.about h2{font-family:var(--ab-display); font-weight:800; font-size:clamp(19px,1.1vw + 14px,24px);
  color:var(--ab-ink); margin:40px 0 14px; line-height:1.45; letter-spacing:0}
.about h2:first-of-type{margin-top:0}
.about h2::before{content:""; display:inline-block; width:8px; height:8px; margin-inline-end:10px; border-radius:2px;
  background:var(--ab-gold); transform:rotate(45deg) translateY(-2px)}
.about p{margin:0 0 12px}
.about strong{color:var(--ab-ink); font-weight:700}
.about ol{margin:0; padding:0; list-style:none; counter-reset:ab; display:grid; gap:10px}
.about ol li{counter-increment:ab; position:relative; padding:13px 56px 13px 16px; border:1px solid var(--ab-line);
  border-radius:14px; background:var(--ab-card)}
.about ol li::before{content:counter(ab); position:absolute; inset-inline-start:14px; top:13px; width:28px; height:28px;
  border-radius:50%; display:grid; place-items:center; font-family:var(--ab-display); font-weight:800; font-size:14px;
  color:var(--on-gold, #3a2c08); background:linear-gradient(135deg, var(--gold-bright, #e8d49a), var(--gold, #d6b15a))}
.about details{border:1px solid var(--ab-line); border-radius:14px; background:var(--ab-card); margin-bottom:10px; overflow:hidden}
.about summary{cursor:pointer; list-style:none; padding:14px 16px; font-weight:700; color:var(--ab-ink);
  display:flex; align-items:center; justify-content:space-between; gap:12px}
.about summary::-webkit-details-marker{display:none}
.about summary::after{content:"+"; flex:none; font-family:var(--ab-display); font-weight:600; font-size:21px; line-height:1; color:var(--ab-gold)}
.about details[open] summary::after{content:"–"}
.about summary:focus-visible{outline:2px solid var(--ab-gold); outline-offset:-2px; border-radius:14px}
.about details p{padding:0 16px 15px; margin:0}
.about a{color:var(--ab-gold); font-weight:700; text-decoration:none; border-bottom:1px solid currentColor}
.about a:hover{opacity:.82}
.about .about-more{margin:28px 0 0; text-align:center; font-size:14.5px}
/* تحدي الصور: القسم شقيقٌ لشاشة النمط (المتمركزة بارتفاع الشاشة) فيُخفى مع بقيّة الشاشات */
#viewMode[hidden] ~ .about{display:none}
@media (max-width:560px){ .about{font-size:15px; line-height:1.9} .about ol li{padding-inline-start:52px} }