/* design.css — طبقة التصميم المشتركة. تُحمَّل آخرًا فتحسم ما قبلها.
   المبادئ: تباين مقيس (٤٫٥:١ للنص، ٣:١ للكبير)، أهداف لمس ≥ ٤٤، شريط تبويب، احترام تفضيلات النظام. */

/* ---------- رموز الألوان لكل مظهر ----------
   الداكن: كما هو (يجتاز). الفاتح والساكورا: أُعيدت معايرتهما بعد القياس. */
[data-theme="light"] {
  --primary-color: #A63A0C;      /* برتقالي محروق: للزخرفة والحدود والتعبئة مع نص أبيض */
  --secondary-color: #1B2530;    /* حبر: النص الأساسي */
  --accent-color: #1B2530;       /* العناوين */
  --bg-color: #FFFFFF;
  --card-bg: rgba(255, 255, 255, 0.78);
  --text-shadow: none;
  --body-gradient-start: #FF6B3D;
  --body-gradient-end: #FFB347;
  --tab-bg: rgba(255, 255, 255, 0.82);
  --tab-fg: #1B2530;
  --tab-active-bg: #1B2530;
  --tab-active-fg: #FFFFFF;
  --line: rgba(27, 37, 48, 0.28);
}
[data-theme="sakura"] {
  --primary-color: #C2255C;
  --secondary-color: #5E1B3C;
  --accent-color: #7A1744;
  --bg-color: #FFF0F5;
  --card-bg: rgba(255, 255, 255, 0.72);
  --text-shadow: none;
  --body-gradient-start: #FFF0F5;
  --body-gradient-end: #FFE0E6;
  --tab-bg: rgba(255, 255, 255, 0.85);
  --tab-fg: #5E1B3C;
  --tab-active-bg: #B0245A;
  --tab-active-fg: #FFFFFF;
  --line: rgba(94, 27, 60, 0.28);
}
:root, [data-theme="dark"] {
  --tab-bg: rgba(18, 22, 48, 0.82);
  --tab-fg: #EFD3D7;
  --tab-active-bg: #EFD3D7;
  --tab-active-fg: #0B1026;
  --line: rgba(239, 211, 215, 0.3);
}

body { color: var(--secondary-color); }
h1 { text-shadow: none; }
[data-theme="dark"] h1 { text-shadow: var(--text-shadow); }

/* ---------- الأيقونات ---------- */
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.ic-flower, .ic-play { fill: currentColor; }
.ic-flower { fill-opacity: .25; }

/* ---------- زر المظهر: ٤٤×٤٤ ---------- */
.theme-toggle {
  width: 44px; height: 44px; padding: 0;
  top: max(12px, env(safe-area-inset-top)); left: 12px;
  background: var(--tab-bg); color: var(--tab-fg);
  border: 1px solid var(--line);
  font-size: 1.35rem;
}
.theme-toggle .ic { width: 1em; height: 1em; }

/* ---------- شريط التبويب ----------
   الهاتف: عائم أسفل الشاشة. الأجهزة الأعرض: أعلى الصفحة. */
.nav-container {
  background: var(--tab-bg);
  border: 1px solid var(--line);
  padding: 6px;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 28px;
}
.nav-list { flex-wrap: nowrap; gap: 4px; }
.nav-link {
  color: var(--tab-fg);
  min-height: 44px; min-width: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  gap: 8px;
  overflow: visible;
  transition: background-color .2s ease, color .2s ease;
}
.nav-link::before { display: none; }
.nav-link:hover { transform: none; box-shadow: none; color: var(--tab-fg); }
@media (hover: hover) { .nav-link:not([aria-current]):hover { background: color-mix(in srgb, var(--tab-fg) 14%, transparent); } }
.nav-link.active, .nav-link[aria-current="page"] {
  background: var(--tab-active-bg);
  color: var(--tab-active-fg);
  font-weight: 700;
  box-shadow: none;
}
.nav-link[aria-current="page"] .ic { fill: currentColor; fill-opacity: .2; }

@media (max-width: 640px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .nav-container {
    position: fixed; z-index: 20;
    inset-inline: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    width: auto; margin: 0;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 28px;
  }
  .nav-list { gap: 2px; }
  .nav-item { flex: 1 1 0; min-width: 0; }
  .nav-link {
    flex-direction: column; justify-content: center; gap: 2px;
    min-height: 56px; padding: 6px 4px;
    border-radius: 22px; font-size: .8125rem; line-height: 1.2;
  }
  .nav-link .ic { width: 24px; height: 24px; }
  .tab-label { white-space: nowrap; }
}

/* ---------- التركيز بلوحة المفاتيح ---------- */
:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
[data-theme="dark"] :focus-visible { outline-color: #FEEAFA; }
.nav-link:focus-visible { outline-offset: 0; }
.theme-toggle:focus-visible { outline-color: var(--tab-fg); }

/* ---------- المشغّل: أهداف لمس وتباين ---------- */
.qp-seek, .qp-volume {
  height: 36px; margin: 4px 0; border-radius: 0;
  background: linear-gradient(to left, var(--qp-fg) var(--p), var(--qp-track) var(--p)) center / 100% 8px no-repeat;
}
.qp-seek::-webkit-slider-thumb, .qp-volume::-webkit-slider-thumb { width: 24px; height: 24px; }
.qp-seek::-moz-range-thumb, .qp-volume::-moz-range-thumb { width: 20px; height: 20px; }
.qp-select { min-height: 44px; }
[data-theme="light"] .qp {
  --qp-text: #1B2530; --qp-fg: #A63A0C; --qp-track: rgba(27, 37, 48, .22);
  --qp-btn-bg: rgba(27, 37, 48, .08); --qp-btn-bg-hover: rgba(27, 37, 48, .16);
  --qp-line: rgba(27, 37, 48, .35);
  --qp-play-bg: #1B2530; --qp-play-fg: #FFFFFF; --qp-option-bg: #FFFFFF; --qp-option-fg: #1B2530;
  --qp-error: #8A1A0C;
}
[data-theme="sakura"] .qp {
  --qp-text: #5E1B3C; --qp-fg: #B0245A; --qp-track: rgba(94, 27, 60, .22);
  --qp-btn-bg: rgba(94, 27, 60, .08); --qp-btn-bg-hover: rgba(94, 27, 60, .16);
  --qp-line: rgba(94, 27, 60, .35);
  --qp-play-bg: #B0245A; --qp-play-fg: #FFFFFF; --qp-option-bg: #FFF0F5; --qp-option-fg: #5E1B3C;
  --qp-error: #8A1A2C;
}

/* ---------- تفضيلات النظام ---------- */
@media (prefers-reduced-transparency: reduce) {
  .nav-container, .theme-toggle, .ayah-container { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  [data-theme="dark"] { --card-bg: #151a38; --tab-bg: #151a38; }
  [data-theme="light"], [data-theme="sakura"] { --card-bg: #FFFFFF; --tab-bg: #FFFFFF; }
}
@media (prefers-contrast: more) {
  .nav-container, .theme-toggle { border-width: 2px; border-color: currentColor; }
  .ayah-container { border: 2px solid var(--line); }
}
@media (hover: none) {
  .theme-toggle:hover { transform: none; box-shadow: none; }
}

/* ---------- اللعبة: لوحات داكنة ثابتة فوق ساحة متغيّرة الخلفية ---------- */
.score-display, .game-hint {
  background: rgba(11, 16, 38, 0.92);
  color: #FEEAFA;
  border: 1px solid rgba(254, 234, 250, 0.25);
}
.score-display .time, .score-display .level, .score-display span, .game-hint { color: #FEEAFA; }
.score-display .points, .score-display .points .ic { color: #FFA8D1; }
.score-display .ic { color: #FEEAFA; }
.pause-button { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; color: #FEEAFA; }
.pause-button .ic { width: 22px; height: 22px; }
.pause-button:focus-visible { outline-color: #FEEAFA; }
.best-line { opacity: 1; }

/* ---------- عمر القمر ---------- */
.expand-button { min-height: 44px; }
.expand-button .ic { transition: transform .3s ease; }
.expand-button.expanded .ic { transform: rotate(180deg); }
.age-card .value { text-shadow: none; }
[data-theme="sakura"] .age-card .value { color: var(--accent-color); }

/* ---------- المشغّل: الشريط بارتفاع هدف اللمس ---------- */
.qp-seek, .qp-volume { height: 44px; margin: 0; }

/* ---------- الساكورا: الغصن لا يغطي المحتوى على الهاتف ---------- */
@media (max-width: 640px) {
  [data-theme="sakura"] .sakura-branch { width: 240px; height: 240px; opacity: .55; }
}

/* ---------- لا تمدّد أفقي على الشاشات الضيقة (٣٢٠px) ---------- */
.container { width: 100%; min-width: 0; padding-inline: 12px; }
@media (min-width: 641px) { .container { padding-inline: 20px; } }

/* ---------- توسيط بطاقة الآية والمشغّل ---------- */
.ayah-container { width: 100%; max-width: 800px; margin-inline: auto; }

/* ---------- Liquid Glass لشريط التنقل (الطبقة الوظيفية فقط) ----------
   نوع «Regular»: ضبابية ٢٨px، تشبّع ١٫٦، تعبئة شفافة بنسبة ~٥٥–٦٥٪، حدّ لامع رفيع، وبريق علوي.
   التبويب المحدد «عدسة» زجاجية أفتح، وأيقونته فقط تأخذ لون التمييز. */
[data-theme="dark"], :root {
  --glass-fill: rgba(28, 34, 72, 0.58);
  --glass-edge: rgba(255, 255, 255, 0.28);
  --glass-shine: rgba(255, 255, 255, 0.22);
  --glass-shadow: rgba(0, 0, 0, 0.35);
  --lens-fill: rgba(255, 255, 255, 0.20);
  --tab-fg: #F4E4EA;
  --tab-active-fg: #FFFFFF;
  --tab-tint: #FFB8D9;
}
[data-theme="light"] {
  --glass-fill: rgba(255, 255, 255, 0.56);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shine: rgba(255, 255, 255, 0.7);
  --glass-shadow: rgba(120, 40, 0, 0.28);
  --lens-fill: rgba(255, 255, 255, 0.78);
  --tab-fg: #1B2530;
  --tab-active-fg: #1B2530;
  --tab-tint: #A63A0C;
}
[data-theme="sakura"] {
  --glass-fill: rgba(255, 255, 255, 0.6);
  --glass-edge: rgba(255, 255, 255, 0.9);
  --glass-shine: rgba(255, 255, 255, 0.75);
  --glass-shadow: rgba(150, 30, 80, 0.25);
  --lens-fill: rgba(255, 255, 255, 0.85);
  --tab-fg: #5E1B3C;
  --tab-active-fg: #5E1B3C;
  --tab-tint: #B0245A;
}

.nav-container, .theme-toggle {
  background-color: var(--glass-fill);
  background-image: linear-gradient(180deg, var(--glass-shine) 0%, transparent 48%);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-shine),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 12px 32px var(--glass-shadow),
    0 2px 6px rgba(0, 0, 0, 0.12);
  color: var(--tab-fg);
}
.nav-container { overflow: hidden; }

.nav-link { position: relative; z-index: 0; }
.nav-link.active, .nav-link[aria-current="page"] {
  background: var(--lens-fill);
  color: var(--tab-active-fg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.14);
}
.nav-link[aria-current="page"] .ic { color: var(--tab-tint); fill: currentColor; fill-opacity: .22; }
@media (hover: hover) {
  .nav-link:not([aria-current]):hover { background: color-mix(in srgb, var(--tab-fg) 10%, transparent); }
}
.nav-link:active { transform: scale(.96); transition: transform .12s ease; }

/* بدائل الشفافية والتباين: خلفية صلبة بلا ضبابية */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .nav-container, .theme-toggle {
    background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  [data-theme="dark"] .nav-container, [data-theme="dark"] .theme-toggle { background-color: #1a2048; }
  [data-theme="light"] .nav-container, [data-theme="light"] .theme-toggle,
  [data-theme="sakura"] .nav-container, [data-theme="sakura"] .theme-toggle { background-color: #FFFFFF; }
  [data-theme="light"] .nav-link.active, [data-theme="light"] .nav-link[aria-current="page"],
  [data-theme="sakura"] .nav-link.active, [data-theme="sakura"] .nav-link[aria-current="page"] { background: #F3E3DC; }
  [data-theme="dark"] .nav-link.active, [data-theme="dark"] .nav-link[aria-current="page"] { background: #343c78; }
}

/* ---------- طبقة المحتوى بلا زجاج: الزجاج للتنقل فقط (وتفاديًا لأعطال رسم Safari على الجوال) ---------- */
.ayah-container, .moon-container, .age-card, .age-details {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.ayah-container { overflow: visible; }
.ayah::before { content: none; }
.qp { display: flex; }
.qp[hidden] { display: none; }

/* ---------- المشغّل: زرّا الآية السابقة والتالية ---------- */
.qp-back, .qp-fwd { width: 44px; padding: 0; }
.qp-btn:disabled { opacity: .38; cursor: default; }
.qp-btn:disabled:hover { background: var(--qp-btn-bg); }

/* ---------- عمر القمر: تلميح «العودة للصفحة الرئيسية» داخل الصورة فلا يتداخل مع سطر العمر ---------- */
.moon-link::after {
  bottom: 18px; top: auto;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  color: var(--tab-fg);
  font-size: .9rem; font-weight: 600;
  text-shadow: none;
  pointer-events: none;
  z-index: 2;
}
.moon-link:hover::after, .moon-link:focus-visible::after { opacity: 1; bottom: 18px; }

/* ---------- اللعبة: ساحة تتبع المظهر (ليل / نهار / ساكورا) ---------- */
:root, [data-theme="dark"] {
  --game-sky: radial-gradient(1.2px 1.2px at 20% 25%, #fff 60%, transparent 61%),
              radial-gradient(1px 1px at 70% 15%, #fff 60%, transparent 61%),
              radial-gradient(1.4px 1.4px at 45% 60%, #fff 60%, transparent 61%),
              radial-gradient(1px 1px at 85% 70%, #fff 60%, transparent 61%),
              radial-gradient(1px 1px at 10% 80%, #fff 60%, transparent 61%),
              linear-gradient(180deg, #070B1E 0%, #14173A 100%);
  --game-border: rgba(254, 234, 250, 0.18);
  --game-glow: rgba(254, 234, 250, 0.9);
  --game-edge: rgba(254, 234, 250, 0.55);
  --over-bg: rgba(11, 16, 38, 0.9);
}
[data-theme="light"] {
  --game-sky: linear-gradient(180deg, #7FB8F2 0%, #BFDDF7 55%, #FFE3BD 100%);
  --game-border: rgba(27, 37, 48, 0.25);
  --game-glow: rgba(255, 255, 255, 0.95);
  --game-edge: rgba(27, 37, 48, 0.55);
  --over-bg: rgba(255, 255, 255, 0.92);
}
[data-theme="sakura"] {
  --game-sky: linear-gradient(180deg, #FFC7DC 0%, #FFDDE8 55%, #FFF3F7 100%);
  --game-border: rgba(94, 27, 60, 0.25);
  --game-glow: rgba(255, 255, 255, 0.95);
  --game-edge: rgba(94, 27, 60, 0.5);
  --over-bg: rgba(255, 255, 255, 0.92);
}
.game-container {
  background: var(--game-sky);
  border: 1px solid var(--game-border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .5s ease, border-color .5s ease;
}
.game-area { background: transparent; }
.moon, .zoro { filter: drop-shadow(0 0 14px var(--game-glow)); }
.obstacle-asteroid svg, .obstacle-satellite svg, .obstacle-ufo svg { filter: drop-shadow(0 0 1.5px var(--game-edge)) drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.pickup svg { filter: drop-shadow(0 0 4px var(--game-glow)) drop-shadow(0 0 1px var(--game-edge)); }
.game-over { background: var(--over-bg); color: var(--secondary-color); border: 1px solid var(--game-border); }
.game-area.paused::after { background: color-mix(in srgb, var(--over-bg) 55%, transparent); color: var(--secondary-color); }
.moon.ready { animation: moonPulse2 1.2s ease-in-out infinite; }
@keyframes moonPulse2 { 0%,100% { box-shadow: 0 0 20px var(--game-glow); } 50% { box-shadow: 0 0 55px 12px var(--game-glow); } }

/* ---------- لوحة الإحصاءات والتلميح تحت اللعبة: تتبع المظهر ---------- */
[data-theme="dark"] .score-display, [data-theme="dark"] .game-hint {
  background: rgba(11, 16, 38, 0.92); color: #FEEAFA; border-color: rgba(254, 234, 250, 0.25);
}
[data-theme="light"] .score-display, [data-theme="light"] .game-hint,
[data-theme="sakura"] .score-display, [data-theme="sakura"] .game-hint {
  background: var(--glass-fill); color: var(--secondary-color); border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 6px 20px var(--glass-shadow);
}
[data-theme="light"] .score-display .time, [data-theme="light"] .score-display .level, [data-theme="light"] .score-display span, [data-theme="light"] .score-display .ic,
[data-theme="sakura"] .score-display .time, [data-theme="sakura"] .score-display .level, [data-theme="sakura"] .score-display span, [data-theme="sakura"] .score-display .ic { color: var(--secondary-color); }
[data-theme="light"] .score-display .points, [data-theme="light"] .score-display .points .ic { color: #A8123F; }
[data-theme="sakura"] .score-display .points, [data-theme="sakura"] .score-display .points .ic { color: #B0245A; }
[data-theme="light"] .pause-button, [data-theme="sakura"] .pause-button { color: var(--secondary-color); }
[data-theme="light"] .pause-button:focus-visible, [data-theme="sakura"] .pause-button:focus-visible { outline-color: var(--secondary-color); }
.game-hint, .score-display { transition: background .5s ease, color .5s ease; }

/* ---------- المشغّل: صف التحكم الرئيسي (السابقة · تشغيل/إيقاف · التالية) ---------- */
.qp-transport { display: flex; justify-content: center; align-items: center; gap: 20px; }
.qp-transport .qp-back, .qp-transport .qp-fwd { width: 48px; height: 48px; border-radius: 50%; }
.qp-tools { justify-content: center; }

/* =====================================================================
   الحركة (Motion) على طريقة Apple: قصيرة، هادفة، قابلة للإلغاء، وتحترم «تقليل الحركة».
   - منحنى iOS للوحات: cubic-bezier(.32,.72,0,1) — يبدأ سريعًا ثم يستقر برفق.
   - نابض خفيف عند ترك الضغط على الأزرار.
   - لا حركة إضافية على ما يتكرر كثيرًا (التشغيل، التمرير، اللعب).
   ===================================================================== */
:root {
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --t-fast: .18s; --t-base: .35s; --t-slow: .6s;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.22 5%, 0.58 12%, 0.88 20%, 1.03 30%, 1.045 38%, 1.02 48%, 0.996 60%, 1); }
}

/* ---------- الانتقال بين الشاشات (View Transitions) — الاتجاه يتبع ترتيب التبويبات (RTL) ---------- */
html.vt-fwd::view-transition-old(root) { animation: vt-out-fwd .32s var(--ease-ios) both; }
html.vt-fwd::view-transition-new(root) { animation: vt-in-fwd .5s var(--ease-ios) both; }
html.vt-back::view-transition-old(root) { animation: vt-out-back .32s var(--ease-ios) both; }
html.vt-back::view-transition-new(root) { animation: vt-in-back .5s var(--ease-ios) both; }
@keyframes vt-out-fwd { to { opacity: 0; transform: translateX(36px) scale(.985); } }
@keyframes vt-in-fwd { from { opacity: 0; transform: translateX(-36px) scale(.985); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(-36px) scale(.985); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(36px) scale(.985); } }
.nav-container { view-transition-name: tabbar; }
.theme-toggle { view-transition-name: themebtn; }
.nav-link[aria-current="page"] { view-transition-name: tablens; }
/* القمر عنصر مشترك: يتحوّل بين الرئيسية وعمر القمر */
#view-home:not([hidden]) #homeMoon, #view-age:not([hidden]) #moonImage { view-transition-name: moon; }
::view-transition-group(tabbar), ::view-transition-group(themebtn) { animation-duration: 0s; }
::view-transition-group(tablens), ::view-transition-group(moon) { animation-duration: .55s; animation-timing-function: var(--ease-ios); }
::view-transition-old(tablens), ::view-transition-new(tablens) { height: 100%; }
.view { width: 100%; }
.view > h1:focus { outline: none; }

/* ---------- ظهور المحتوى عند فتح الصفحة (تتابع خفيف) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.rise-on .view > h1, .rise-on .home-moon, .rise-on .ayah-container, .rise-on .moon-container, .rise-on .age-details,
.rise-on .game-container, .rise-on .game-stats { animation: rise .5s var(--ease-ios) backwards; }
.rise-on .view > h1 { animation-delay: .04s; }
.rise-on .home-moon, .rise-on .moon-container, .rise-on .game-container { animation-delay: .10s; }
.rise-on .ayah-container, .rise-on .age-details, .rise-on .game-stats { animation-delay: .18s; }

/* ---------- ردّ الفعل عند الضغط: انكماش سريع ثم عودة نابضة ---------- */
.nav-link, .theme-toggle, .qp-btn, .qp-play, .start-button, .restart-button, .pause-button, .expand-button, .qpw-done, .qpw-cancel {
  transition: transform .45s var(--spring), background-color var(--t-base) ease, color var(--t-base) ease, box-shadow var(--t-base) ease, opacity var(--t-base) ease;
}
.nav-link:active, .theme-toggle:active, .qp-btn:active, .qp-play:active, .start-button:active,
.restart-button:active, .pause-button:active, .expand-button:active { transform: scale(.94); transition-duration: .12s; }
.pause-button:active { transform: translateY(-50%) scale(.94); }
.expand-button:active { transform: translateX(-50%) scale(.96); }

/* ---------- تبدّل المظهر: ألوان تنتقل بنعومة ---------- */
body { transition: background .6s ease, color .4s ease; }

/* ---------- لوحة اختيار القارئ: حركة اللوحات في iOS ---------- */
.qpw-sheet { transform: translateY(40px) scale(.97); transition: transform .5s var(--ease-ios), opacity .25s ease; }
.qpw.is-open .qpw-sheet { transform: none; }
.qpw-backdrop { transition: opacity .35s ease; }
.qpw-wheel { scroll-behavior: auto; }

/* ---------- تقليل الحركة: لا انتقالات ولا تتابع ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .rise-on .view > *, .rise-on .home-moon, .rise-on .ayah-container, .rise-on .moon-container, .rise-on .age-details, .rise-on .game-container, .rise-on .game-stats { animation: none !important; }
  .nav-link:active, .theme-toggle:active, .qp-btn:active, .qp-play:active { transform: none; }
}

/* =====================================================================
   المظهر البورغندي — أساسه #5C0A1F. مظهر داكن دافئ: نص وردي عاجي، وتمييز بوردي ذهبي هادئ.
   (تباين النص الأساسي على الأساس ≈ ٩٫٦:١)
   ===================================================================== */
[data-theme="burgundy"] {
  --primary-color: #E8A3B3;
  --secondary-color: #F6DDE3;
  --accent-color: #FFE9EE;
  --bg-color: #3A0713;
  --card-bg: rgba(255, 255, 255, 0.07);
  --text-shadow: 0 0 20px rgba(255, 170, 190, 0.35);
  --star-color: rgba(255, 233, 238, 0.85);
  --body-gradient-start: #5C0A1F;
  --body-gradient-end: #2A0511;
  --nebula-opacity: 0.05;
  --tab-bg: rgba(58, 7, 19, 0.7);
  --tab-fg: #F8E3E8;
  --tab-active-bg: #F6DDE3;
  --tab-active-fg: #3A0713;
  --line: rgba(246, 221, 227, 0.3);
  --glass-fill: rgba(70, 8, 24, 0.58);
  --glass-edge: rgba(255, 255, 255, 0.26);
  --glass-shine: rgba(255, 255, 255, 0.2);
  --glass-shadow: rgba(0, 0, 0, 0.4);
  --lens-fill: rgba(255, 255, 255, 0.2);
  --tab-tint: #FFB8C8;
  --game-sky: radial-gradient(1.2px 1.2px at 20% 25%, #fff 60%, transparent 61%),
              radial-gradient(1px 1px at 70% 15%, #fff 60%, transparent 61%),
              radial-gradient(1.4px 1.4px at 45% 60%, #fff 60%, transparent 61%),
              radial-gradient(1px 1px at 85% 70%, #fff 60%, transparent 61%),
              radial-gradient(1px 1px at 10% 80%, #fff 60%, transparent 61%),
              linear-gradient(180deg, #230410 0%, #5C0A1F 100%);
  --game-border: rgba(255, 233, 238, 0.2);
  --game-glow: rgba(255, 233, 238, 0.9);
  --game-edge: rgba(255, 233, 238, 0.55);
  --over-bg: rgba(42, 5, 17, 0.92);
}
[data-theme="burgundy"] h1 { text-shadow: var(--text-shadow); }
[data-theme="burgundy"] :focus-visible { outline-color: #FFE9EE; }
[data-theme="burgundy"] .cloud { display: none; }
[data-theme="burgundy"] .qp {
  --qp-text: #F6DDE3; --qp-fg: #FFD0DA; --qp-track: rgba(246, 221, 227, 0.3);
  --qp-btn-bg: rgba(255, 255, 255, 0.1); --qp-btn-bg-hover: rgba(255, 255, 255, 0.2);
  --qp-line: rgba(246, 221, 227, 0.28);
  --qp-play-bg: #F6DDE3; --qp-play-fg: #3A0713;
  --qp-option-bg: #3A0713; --qp-option-fg: #FFE9EE; --qp-error: #FFB4A9;
}
[data-theme="burgundy"] .qpw {
  --w-bg: rgba(48, 6, 18, 0.9); --w-fg: #FBE6EB; --w-line: rgba(255, 255, 255, 0.35);
  --w-band: rgba(255, 255, 255, 0.12); --w-btn: #FFB8C8; --w-edge: rgba(255, 255, 255, 0.22);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  [data-theme="burgundy"] { --card-bg: #3E0816; --tab-bg: #3E0816; }
  [data-theme="burgundy"] .nav-container, [data-theme="burgundy"] .theme-toggle { background-color: #3E0816; }
  [data-theme="burgundy"] .nav-link.active, [data-theme="burgundy"] .nav-link[aria-current="page"] { background: #6A1A30; }
  [data-theme="burgundy"] .qpw { --w-bg: #300612; }
}
[data-theme="burgundy"] .score-display, [data-theme="burgundy"] .game-hint {
  background: rgba(42, 5, 17, 0.92); color: #FFE9EE; border-color: rgba(255, 233, 238, 0.25);
}

/* ---------- النيازك: صخور واقعية تدور ببطء، ولهب احتكاك خلفها أثناء السقوط ---------- */
.obstacle { opacity: 1; }
.obstacle svg.rock { overflow: visible; animation: rock-spin 9s linear infinite; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); }
.obstacle .flame {
  position: absolute; left: 50%; bottom: 62%; width: 62%; height: 150%; transform: translateX(-50%);
  border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
  background: linear-gradient(to top, rgba(255, 170, 60, .85) 0%, rgba(255, 90, 20, .5) 35%, rgba(255, 60, 10, .15) 70%, transparent 100%);
  filter: blur(4px); transform-origin: 50% 100%;
  animation: flame-flicker .18s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes rock-spin { to { transform: rotate(360deg); } }
@keyframes flame-flicker { from { transform: translateX(-50%) scaleY(.88) scaleX(.95); opacity: .85; } to { transform: translateX(-50%) scaleY(1.08) scaleX(1.05); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .obstacle svg.rock { animation: none !important; } .obstacle .flame { animation: none !important; } }

/* ---------- إشعار المستوى الجديد ---------- */
.level-toast { position: absolute; inset-inline: 0; top: 42%; text-align: center; font-size: 2rem; font-weight: 700; color: #fff; pointer-events: none; opacity: 0; z-index: 20; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.level-toast.show { animation: lvl-pop 1.4s var(--ease-ios, cubic-bezier(.2,.8,.2,1)) both; }
@keyframes lvl-pop { 0% { opacity: 0; transform: scale(.7); } 20% { opacity: 1; transform: scale(1.05); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .level-toast.show { animation: lvl-fade 1.4s both; } @keyframes lvl-fade { 0%,100% { opacity: 0; } 15%,80% { opacity: 1; } } }