/* asila.css — صفحة «أسئلة حروف مع عزيز» (‎/khaliya/asila‎، 2026-09-26).
   لماذا: بحث «أسئلة حروف مع عزيز» وأخواته (واجوبتها، حرف ش، pdf، كاملة) من أكثر ما يُكتب عن اللعبة في غوغل، ونتائجه
   الأولى ملفّ PDF قديم ومنتدى وتغريدة — وخلية الحروف عندنا غائبة عنه. الصفحة محتوى حقيقيّ يقود إلى اللعبة أونلاين.
   الألوان كلّها من رموز style.css فتتبع الثيمين (html.dark)؛ قسم القوانين والأسئلة الشائعة بستايل about.css المشترك.
   وتُطبع نظيفةً بالأبيض والأسود (من يبحث عن «pdf» يحفظها من أمر الطباعة). */
html:has(body.asila-page){scroll-behavior:smooth}
/* style.css يثبّت body على ارتفاع الشاشة (html,body{height:100%}) لصفحات اللعب؛ هنا المحتوى أطول بكثير، ومع ارتفاعٍ ثابت
   يلتصق الشريط العلويّ داخل الشاشة الأولى وحدها ثمّ يغادر (مقيس: top=-6005 وسط الصفحة) ⇒ الجسم ينمو مع محتواه */
body.asila-page{height:auto}
@media (prefers-reduced-motion:reduce){ html:has(body.asila-page){scroll-behavior:auto} }
.asila-page a:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:8px}

/* ── الشريط العلويّ: لاصق بعرض الصفحة فيبقى رابط اللعب ظاهراً أثناء التمرير (طلب المالك 2026-09-26) ── */
.as-top{position:sticky; top:0; z-index:10; background:var(--bg0); border-bottom:1px solid var(--card-line)}
@supports (backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px)){
  .as-top{background:color-mix(in srgb, var(--bg0) 84%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
}
.as-top-in{max-width:880px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.as-brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--gold-text);
  font-family:var(--font-display),sans-serif; font-weight:800; font-size:20px}
.as-brand img{display:block}
.as-play{display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px; text-decoration:none;
  font-family:var(--font-display),sans-serif; font-weight:700; font-size:14px; color:var(--on-gold, #3a2c08);
  background:linear-gradient(135deg, var(--gold-bright, #e8d49a), var(--gold)); box-shadow:var(--shadow-soft)}

/* ── الرأس ── */
.asila{max-width:880px; margin:0 auto; padding:0 16px 40px}
.as-crumbs{font-size:13.5px; color:var(--on-bg-dim); margin:16px 0 10px}
.as-crumbs a{color:var(--on-bg-dim); text-decoration:none; border-bottom:1px solid transparent}
.as-crumbs a:hover{border-bottom-color:currentColor}
.as-hero{text-align:center; padding:18px 0 4px}
.as-kicker{margin:0; font-family:var(--font-display),sans-serif; font-weight:700; font-size:14px; color:var(--gold-text)}
.as-hero h1{font-family:var(--font-display),sans-serif; font-weight:800; font-size:clamp(28px, 3.2vw + 14px, 46px);
  line-height:1.3; color:var(--on-bg); margin:10px 0 14px}
.as-lead{max-width:680px; margin:0 auto; color:var(--on-bg-dim); font-size:16.5px; line-height:1.95}
.as-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:22px 0 4px}
.as-btn{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; border-radius:999px;
  text-decoration:none; font-family:var(--font-display),sans-serif; font-weight:800; font-size:15.5px; color:var(--on-gold, #3a2c08);
  background:linear-gradient(135deg, var(--gold-bright, #e8d49a), var(--gold)); box-shadow:var(--shadow-soft)}
.as-btn.ghost{background:var(--card); color:var(--ink); border:1px solid var(--card-line); box-shadow:none}
.as-btn:hover, .as-play:hover{filter:brightness(1.05)}

/* ── تنبيه «النسخة المصغّرة» ودعوة اللعب (أوّل الصفحة وبعد آخر حرف) — ظاهران لكل زائر لا مطويّان ── */
.as-note{display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; margin:24px 0 0; padding:16px 18px;
  border:1px solid var(--gold); border-radius:18px; box-shadow:var(--shadow-soft);
  background:linear-gradient(135deg, rgba(214,177,90,.18), rgba(214,177,90,.05)), var(--card)}
.as-note-t{margin:0; flex:1 1 340px; color:var(--ink); font-size:16px; line-height:1.9}
.as-note-t b{color:var(--gold-text); font-weight:800}
.as-note-btn{flex:none}
.as-end{margin-top:26px}

/* ── لوحة الحروف (فهرس الأقسام) ── */
.as-letters{display:grid; grid-template-columns:repeat(14, 1fr); gap:8px; margin:22px 0 6px; padding:14px; scroll-margin-top:72px; /* 28 حرفاً = صفّان متساويان */
  border:1px solid var(--card-line); border-radius:18px; background:var(--card); box-shadow:var(--shadow-soft)}
.as-letters a{display:grid; place-items:center; aspect-ratio:1; border-radius:12px; text-decoration:none;
  font-family:var(--font-display),sans-serif; font-weight:800; font-size:20px; color:var(--ink);
  background:var(--surf); border:1px solid var(--surf-line)}
.as-letters a:hover{border-color:var(--gold); color:var(--gold-text)}

/* ── قسم الحرف ── */
.harf{margin:22px 0 0; scroll-margin-top:72px; /* تحت الشريط اللاصق */ border:1px solid var(--card-line); border-radius:20px; background:var(--card);
  box-shadow:var(--shadow-soft); overflow:hidden}
.harf-head{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--card-line); background:var(--card2)}
.harf-ch{flex:none; width:42px; height:48px; display:grid; place-items:center;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:linear-gradient(170deg, var(--gold-bright, #e8d49a), var(--gold)); color:var(--on-gold, #3a2c08);
  font-family:var(--font-display),sans-serif; font-weight:800; font-size:21px}
.harf-head h2{flex:1; min-width:0; margin:0; font-family:var(--font-display),sans-serif; font-weight:800;
  font-size:clamp(17px, .8vw + 13px, 21px); color:var(--ink); line-height:1.4}
.harf-up{flex:none; font-size:13px; font-weight:700; color:var(--dim); text-decoration:none; padding:6px 10px;
  border-radius:10px; border:1px solid var(--card-line)}
.harf-up:hover{color:var(--gold-text); border-color:var(--gold)}
.qa{list-style:none; margin:0; padding:4px 0; counter-reset:qa}
.qa li{counter-increment:qa; position:relative; padding:12px 16px; padding-inline-start:54px; border-top:1px solid var(--surf-line)}
.qa li:first-child{border-top:0}
.qa li::before{content:counter(qa); position:absolute; inset-inline-start:16px; top:14px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-display),sans-serif; font-weight:800; font-size:13px;
  color:var(--dim); background:var(--surf); border:1px solid var(--surf-line)}
.qa .q{margin:0; color:var(--ink); font-weight:700; font-size:16px; line-height:1.8}
.qa .a{margin:2px 0 0; color:var(--dim); font-size:15px; line-height:1.8}
.qa .a b{color:var(--gold-text); font-weight:800}

/* ── القوانين والأسئلة الشائعة: about.css، بمسافة أقرب لأنّها تتبع الأقسام لا شاشة لعب ── */
.asila .about{margin-top:56px; padding-inline:0; scroll-margin-top:72px}

/* ── التذييل ── */
.as-foot{max-width:880px; margin:32px auto 0; padding:22px 16px calc(28px + env(safe-area-inset-bottom)); text-align:center;
  color:var(--on-bg-dim); font-size:13.5px; line-height:1.9; border-top:1px solid var(--card-line)}
.as-foot p{margin:0 0 6px}
.as-foot a{color:var(--on-bg-dim); text-decoration:none; border-bottom:1px solid currentColor}

@media (max-width:720px){ .as-letters{grid-template-columns:repeat(7, 1fr)} } /* أربعة صفوف متساوية */
@media (max-width:560px){
  .as-play{padding:8px 13px; font-size:13px}
  .as-note{padding:14px}
  .as-note-t{font-size:15px; flex-basis:100%}
  .as-note-btn{width:100%}
  .as-lead{font-size:15.5px; line-height:1.9}
  .as-letters{gap:6px; padding:10px}
  .as-letters a{font-size:18px}
  .harf-head{padding:11px 14px; gap:10px}
  .harf-ch{width:38px; height:44px; font-size:19px}
  .qa li{padding-inline:46px 14px}
  .qa li::before{inset-inline-start:12px}
  .qa .q{font-size:15.5px}
}

/* ── الطباعة / الحفظ PDF: الأسئلة والقوانين وحدها، أسود على أبيض ── */
@media print{
  html, body{background:#fff !important}
  #hive-bg, .as-top, .as-crumbs, .as-actions, .as-note, .as-letters, .harf-up, #faq-h, .about details, .about-more, .as-foot{display:none !important}
  .as-hero h1, .as-lead, .as-kicker, .harf-head h2, .qa .q, .qa .a, .qa .a b, .about, .about h2, .about strong{color:#000 !important}
  .harf{break-inside:avoid; box-shadow:none; border:1px solid #999; background:#fff; margin-top:12px}
  .harf-head{background:#f2f2f2; border-bottom-color:#999}
  .harf-ch{background:#ddd; color:#000}
  .qa li{border-top-color:#ddd}
  .qa li::before{background:#fff; border-color:#999; color:#000}
  .about ol li{background:#fff; border-color:#999}
}