/* تحدّي أشبال الفجر — السطح العام (التسجيل · رحلة الأربعين · شاشة التلفاز). docs/fajr-challenge.md
   هوية «فجر جديد»: أزرق الفجر العميق · أزرق السماء · ذهب الشروق · عاجي. ألوان هذا التحدّي فقط؛ لا اسم ولا شعار مركز هنا.
   الحركة opacity/transform فقط وتحترم prefers-reduced-motion. حلقة الـ40 قطعة هندستها في Modules/FajrChallenge/Support/FajrRing.php. */

:root {
    --fj-navy: #0a1b3d;
    --fj-night: #07122b;
    --fj-blue: #1b4a8a;
    --fj-sky: #8cc3ee;
    --fj-gold: #f2b64e;
    --fj-gold-deep: #d58f1f;
    --fj-ivory: #fff8ec;
    --fj-ink: #12233f;
    --fj-muted: #5c6b84;
    --fj-line: #dbe3ef;
    --fj-surface: #ffffff;
    --fj-bg: #f3f6fb;
    --fj-ok: #1f8f5f;
    --seg-off: rgba(255, 255, 255, .24);
}

body.fj-page, .fj-page *, body.tv, body.tv * { box-sizing: border-box; }

/* ---------------------------------------------------------------- الحلقة */
.ring { position: relative; width: var(--rs, 160px); height: var(--rs, 160px); flex: none; }
.ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(242, 182, 78, .35)); }
.seg { fill: none; stroke: var(--seg-off); stroke-width: 8.5; stroke-linecap: round; }
.seg.on { stroke: var(--fj-gold); animation: seg-in .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 28ms + var(--d, 0ms)); }
.ring--done .seg.on { stroke: #ffd36e; }
.ring--done .ring__svg { filter: drop-shadow(0 0 9px rgba(255, 205, 100, .75)); }
.ring__photo {
    position: absolute; inset: 12.5%; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #2d63aa, var(--fj-navy)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .18);
}
.ring__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ring__initial { font-size: calc(var(--rs, 160px) * .36); font-weight: 700; color: var(--fj-ivory); line-height: 1; }
.ring__num {
    position: absolute; inset-inline: 0; bottom: -3%; margin-inline: auto; width: max-content; display: flex; align-items: baseline; gap: .1em;
    padding: .08em .6em .12em; border-radius: 999px; background: var(--fj-navy); color: var(--fj-gold);
    font-size: calc(var(--rs, 160px) * .15); font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, .25), 0 0 0 2px rgba(242, 182, 78, .5);
}
.ring__num i { font-style: normal; font-size: .62em; color: var(--fj-sky); font-weight: 500; }
.ring--light { --seg-off: #dde5f1; }
.ring--light .ring__svg { filter: none; }
@keyframes seg-in { from { stroke: var(--seg-off); opacity: .35; } to { stroke: var(--fj-gold); opacity: 1; } }

/* ---------------------------------------------------------------- صفحات الجمهور (تسجيل · رحلة) */
.fj-page { margin: 0; min-height: 100vh; font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fj-ink); background: var(--fj-bg); line-height: 1.7; }
.fj-hero {
    position: relative; overflow: hidden; color: var(--fj-ivory); text-align: center; padding: 2.5rem 1rem 4.5rem;
    background: linear-gradient(180deg, var(--fj-night) 0%, var(--fj-navy) 45%, #27589c 80%, #e9a45c 100%);
}
.fj-hero::before { /* قرص الشمس خلف الأفق */
    content: ""; position: absolute; inset-inline: 0; bottom: -7rem; margin-inline: auto; width: 15rem; height: 15rem; border-radius: 50%;
    background: radial-gradient(circle, #ffe3a1 0%, #f2b64e 45%, rgba(242, 182, 78, 0) 70%); opacity: .9;
}
.fj-hero > * { position: relative; }
.fj-hero h1 { margin: .6rem 0 .2rem; font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.25; }
.fj-hero p { margin: 0 auto; max-width: 34rem; color: #dbe8fb; }
.fj-hero__ring { display: grid; place-items: center; margin-bottom: .4rem; }
.fj-wrap { width: min(100% - 2rem, 40rem); margin-inline: auto; }
.fj-wrap--wide { width: min(100% - 2rem, 70rem); }
.fj-card { background: var(--fj-surface); border-radius: 16px; padding: 1.25rem; box-shadow: 0 1px 2px rgba(10, 27, 61, .06), 0 8px 24px rgba(10, 27, 61, .07); margin-bottom: 1rem; }
.fj-pull { margin-top: -2.6rem; position: relative; }
.fj-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; margin: 0 0 1rem; padding: 0; list-style: none; }
.fj-steps li { font-size: .85rem; color: var(--fj-muted); }
.fj-steps b { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: 0 auto .3rem; border-radius: 50%; background: var(--fj-navy); color: var(--fj-gold); font-size: 1.1rem; }
.fj-seg { display: flex; gap: .4rem; background: #eef2f8; padding: .3rem; border-radius: 12px; margin-bottom: 1rem; }
.fj-seg label { flex: 1; text-align: center; padding: .65rem .4rem; border-radius: 9px; cursor: pointer; font-weight: 600; color: var(--fj-muted); min-height: 44px; }
.fj-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fj-seg input:checked + span { color: var(--fj-ink); }
.fj-seg label:has(input:checked) { background: #fff; box-shadow: 0 1px 4px rgba(10, 27, 61, .12); color: var(--fj-ink); }
.fj-field { margin-bottom: .9rem; }
.fj-field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.fj-field input[type=text], .fj-field input[type=tel], .fj-field input[type=search], .fj-field select, .fj-field textarea {
    width: 100%; font: inherit; padding: .7rem .8rem; border: 1.5px solid var(--fj-line); border-radius: 10px; background: #fff; color: var(--fj-ink); min-height: 48px;
}
.fj-field input:focus, .fj-field select:focus, .fj-field textarea:focus { outline: 3px solid rgba(27, 74, 138, .25); border-color: var(--fj-blue); }
.fj-field .help { color: var(--fj-muted); font-size: .85rem; margin-top: .2rem; }
.fj-err { color: #b3261e; font-size: .88rem; margin-top: .2rem; }
.fj-alert { background: #fdecea; color: #8c1d18; border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }
.fj-note { background: #eaf2fd; color: #17406f; border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }
.fj-check { display: flex; gap: .65rem; align-items: flex-start; padding: .35rem 0; }
.fj-check input { width: 1.3rem; height: 1.3rem; margin-top: .25rem; flex: none; accent-color: var(--fj-blue); }
.fj-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 52px; padding: .8rem 1.2rem; border: 0; border-radius: 12px;
    font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; text-decoration: none;
    background: linear-gradient(180deg, #ffcb68, var(--fj-gold)); color: #3a2503; box-shadow: 0 2px 0 var(--fj-gold-deep), 0 8px 18px rgba(213, 143, 31, .3);
}
.fj-btn:active { transform: translateY(1px); }
.fj-btn--ghost { background: #fff; color: var(--fj-blue); box-shadow: inset 0 0 0 2px var(--fj-blue); }
.fj-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fj-ref { display: inline-block; direction: ltr; font-family: ui-monospace, monospace; font-size: 1.7rem; letter-spacing: .08em; background: var(--fj-navy); color: var(--fj-gold); padding: .35rem 1rem; border-radius: 12px; }
.fj-foot { text-align: center; color: var(--fj-muted); font-size: .85rem; padding: 1.5rem 1rem 2rem; }

/* رحلة الأربعين */
.fj-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.fj-tools input[type=search] { flex: 1 1 14rem; font: inherit; padding: .65rem .8rem; border-radius: 10px; border: 1.5px solid var(--fj-line); min-height: 46px; }
.fj-chip { padding: .55rem .95rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--fj-line); color: var(--fj-ink); text-decoration: none; font-weight: 600; font-size: .92rem; min-height: 40px; display: inline-flex; align-items: center; }
.fj-chip[aria-current=true] { background: var(--fj-navy); color: var(--fj-gold); border-color: var(--fj-navy); }
.fj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 1rem; }
.fj-person { background: var(--fj-surface); border-radius: 16px; padding: 1.4rem .8rem 1rem; text-align: center; box-shadow: 0 1px 2px rgba(10, 27, 61, .06), 0 6px 18px rgba(10, 27, 61, .06); }
.fj-person .ring { --rs: 128px; margin: 0 auto .9rem; }
.fj-person .ring__photo { background: radial-gradient(circle at 35% 30%, #3b72b8, var(--fj-navy)); }
.fj-person h3 { margin: 0; font-size: 1.05rem; }
.fj-person p { margin: .2rem 0 0; color: var(--fj-muted); font-size: .88rem; }
.fj-metrics { display: flex; justify-content: center; gap: .9rem; margin-top: .55rem; font-size: .82rem; color: var(--fj-muted); }
.fj-metrics b { display: block; font-size: 1.05rem; color: var(--fj-ink); }
.fj-badge { display: inline-block; margin-top: .5rem; padding: .15rem .65rem; border-radius: 999px; background: #fff3d6; color: #7a4d00; font-weight: 700; font-size: .8rem; }
.fj-empty { text-align: center; color: var(--fj-muted); padding: 3rem 1rem; }

/* ---------------------------------------------------------------- شاشة التلفاز 16:9 */
html.tv-root { font-size: calc(100vw / 120); } /* 1920px ⇒ 16px؛ كل مقاسات الشاشة بـrem فتتناسب مع أي دقة */
body.tv { margin: 0; height: 100vh; overflow: hidden; background: var(--fj-night); color: var(--fj-ivory); font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; cursor: none; }
.tv-sky { position: fixed; inset: 0; background:
    radial-gradient(120% 70% at 50% 108%, rgba(255, 190, 100, .55) 0%, rgba(255, 150, 70, .18) 38%, rgba(255, 150, 70, 0) 62%),
    linear-gradient(180deg, #050d22 0%, #0a1b3d 38%, #153a73 72%, #2b5c9b 100%); }
.tv-stars { position: fixed; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 78% 12%, #fff, transparent), radial-gradient(1px 1px at 33% 30%, #cfe3ff, transparent), radial-gradient(1.5px 1.5px at 90% 40%, #fff, transparent), radial-gradient(1px 1px at 55% 8%, #cfe3ff, transparent), radial-gradient(1px 1px at 5% 52%, #cfe3ff, transparent); opacity: .55; animation: twinkle 9s ease-in-out infinite alternate; }
.tv-sun { position: fixed; inset-inline: 0; bottom: -30rem; margin-inline: auto; width: 62rem; height: 62rem; border-radius: 50%; will-change: transform;
    background: radial-gradient(circle, rgba(255, 233, 170, .95) 0%, rgba(255, 190, 90, .7) 28%, rgba(255, 150, 60, .22) 52%, rgba(255, 150, 60, 0) 70%); animation: sunrise 90s ease-in-out infinite alternate; }
.tv-rays { position: fixed; inset: -30%; background: conic-gradient(from 180deg at 50% 100%, transparent 0 8%, rgba(255, 215, 140, .07) 10% 12%, transparent 14% 22%, rgba(255, 215, 140, .06) 24% 26%, transparent 28% 72%, rgba(255, 215, 140, .06) 74% 76%, transparent 78% 86%, rgba(255, 215, 140, .07) 88% 90%, transparent 92%); animation: rays 120s linear infinite; transform-origin: 50% 70%; }
.tv-head { position: fixed; inset-inline: 4rem; top: 2.4rem; display: flex; align-items: flex-start; justify-content: space-between; z-index: 3; }
.tv-brand h1 { margin: 0; font-size: 3.2rem; line-height: 1.1; letter-spacing: 0; color: var(--fj-ivory); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.tv-brand p { margin: .25rem 0 0; font-size: 1.5rem; color: #ffd890; }
.tv-clock { text-align: end; }
.tv-clock b { display: block; font-size: 2.6rem; font-weight: 600; direction: ltr; }
.tv-clock span { display: block; font-size: 1.35rem; color: #cfe0f7; }
.tv-stage { position: fixed; inset: 10.5rem 3rem 3.6rem; z-index: 2; }
.tv-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; display: flex; flex-direction: column; align-items: center; will-change: opacity; }
.tv-scene.show { opacity: 1; }
.tv-title { text-align: center; margin: 0 0 1.4rem; }
.tv-title h2 { margin: 0; font-size: 3.5rem; line-height: 1.2; font-weight: 700; color: #fff; text-shadow: 0 3px 20px rgba(0, 0, 0, .4); }
.tv-title p { margin: .35rem 0 0; font-size: 1.7rem; color: #ffe0a3; }
.tv-body { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.tv-foot { position: fixed; inset-inline: 4rem; bottom: 1rem; z-index: 3; display: flex; justify-content: space-between; align-items: center; font-size: 1.15rem; color: #b6cdea; }
.tv-dots { display: flex; gap: .6rem; }
.tv-dots i { width: .8rem; height: .8rem; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background .6s, transform .6s; }
.tv-dots i.on { background: var(--fj-gold); transform: scale(1.25); }
.tv-live { width: .7rem; height: .7rem; border-radius: 50%; background: #5de08a; display: inline-block; margin-inline-end: .5rem; }
.tv-live.off { background: #f2a14e; }

/* أبطال اليوم */
.tv-heroes { display: grid; grid-template-columns: repeat(var(--cols, 4), var(--cell, 22rem)); gap: 2.2rem 2.6rem; justify-content: center; align-content: center; }
.tv-hero { text-align: center; display: flex; flex-direction: column; align-items: center; }
.tv-hero .ring { --rs: var(--ring, 15rem); }
.tv-hero h3 { margin: 1.5rem 0 .2rem; font-size: calc(var(--ring, 15rem) * .165); line-height: 1.25; font-weight: 700; color: #fff; max-width: var(--cell, 22rem); text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.tv-hero p { margin: 0; font-size: calc(var(--ring, 15rem) * .1); color: #cfe0f7; line-height: 1.4; }
.tv-hero .tag { margin-top: .5rem; padding: .15em .8em; border-radius: 999px; background: rgba(242, 182, 78, .18); box-shadow: inset 0 0 0 1.5px rgba(242, 182, 78, .6); color: #ffdc94; font-size: calc(var(--ring, 15rem) * .095); font-weight: 600; }
.tv-hero.new { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 110ms); }
.tv-hero.new .ring { --d: calc(var(--k, 0) * 110ms + 300ms); }
.tv-hero .ring--done { animation: glowpulse 3.2s ease-in-out infinite; }

/* رحلة الأربعين: صفوف أفقية (حلقة + نص + مسار محطات) */
.tv-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2rem; width: 100%; max-width: 108rem; align-content: center; }
.tv-row { display: flex; align-items: center; gap: 1.6rem; padding: 1.2rem 1.6rem; border-radius: 2rem; background: rgba(8, 22, 54, .45); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); animation: rise .8s both; animation-delay: calc(var(--k, 0) * 90ms); }
.tv-row .ring { --rs: 9.4rem; }
.tv-row h3 { margin: 0; font-size: 2rem; }
.tv-row p { margin: .15rem 0 0; font-size: 1.35rem; color: #cfe0f7; }
.tv-track { display: flex; gap: .45rem; margin-top: .7rem; }
.tv-track i { flex: 1; height: .5rem; border-radius: .25rem; background: rgba(255, 255, 255, .18); }
.tv-track i.on { background: var(--fj-gold); box-shadow: 0 0 .6rem rgba(242, 182, 78, .6); }

/* على بُعد خطوات */
.tv-near { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 2rem; width: 100%; max-width: 104rem; }
.tv-step { display: flex; align-items: center; gap: 2.2rem; padding: 1.8rem 2.2rem; border-radius: 2.4rem; background: linear-gradient(135deg, rgba(242, 182, 78, .18), rgba(8, 22, 54, .5)); box-shadow: inset 0 0 0 1.5px rgba(242, 182, 78, .45); animation: rise .8s both; animation-delay: calc(var(--k, 0) * 120ms); }
.tv-step .ring { --rs: 12rem; }
.tv-step h3 { margin: 0; font-size: 2.2rem; }
.tv-step .left { font-size: 5rem; font-weight: 700; line-height: 1; color: var(--fj-gold); direction: ltr; text-align: start; }
.tv-step .left small { display: block; font-size: 1.45rem; font-weight: 500; color: #ffe0a3; direction: rtl; }

/* أبطال الأربعين */
.tv-champs { display: grid; grid-template-columns: repeat(var(--cols, 3), 20rem); gap: 1.6rem 3rem; justify-content: center; align-content: center; }
.tv-champ { text-align: center; animation: rise .9s both; animation-delay: calc(var(--k, 0) * 120ms); }
.tv-champ .ring { --rs: 11rem; margin: 0 auto; animation: glowpulse 3.2s ease-in-out infinite; }
.tv-champ h3 { margin: 1.1rem 0 .1rem; font-size: 2.1rem; color: #ffe3a2; }
.tv-champ p { margin: 0; font-size: 1.4rem; color: #cfe0f7; }
.tv-medal { display: inline-block; margin-top: .45rem; padding: .1em .9em; border-radius: 999px; background: linear-gradient(180deg, #ffd978, #e8a22b); color: #3a2503; font-weight: 700; font-size: 1.3rem; }
.tv-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tv-sparks i { position: absolute; bottom: -2rem; width: .7rem; height: .7rem; border-radius: 50%; background: #ffd36e; opacity: 0; animation: floatup 9s linear infinite; }

/* جائزة المواظبة */
.tv-reward { display: flex; align-items: center; justify-content: center; gap: 6rem; width: 100%; max-width: 104rem; }
.tv-reward__img { width: 30rem; height: 30rem; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #33639f, var(--fj-navy)); box-shadow: 0 0 0 .5rem rgba(242, 182, 78, .7), 0 0 6rem rgba(242, 182, 78, .45); animation: glowpulse 4s ease-in-out infinite; }
.tv-reward__img img { width: 100%; height: 100%; object-fit: cover; }
.tv-reward__img span { font-size: 12rem; line-height: 1; }
.tv-reward__txt h3 { margin: 0 0 .6rem; font-size: 4.6rem; line-height: 1.2; color: #ffe3a2; }
.tv-reward__txt p { margin: 0 0 1.2rem; font-size: 2.1rem; line-height: 1.6; color: #e6efff; max-width: 52rem; }
.tv-reward__goal { display: inline-block; padding: .2em 1em; border-radius: 999px; background: rgba(242, 182, 78, .2); box-shadow: inset 0 0 0 2px rgba(242, 182, 78, .7); font-size: 2rem; font-weight: 700; color: #ffd890; }
.tv-miles { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.tv-miles span { padding: .25em .9em; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 1.4rem; }

.tv-empty { text-align: center; }
.tv-empty h3 { font-size: 4rem; margin: 0 0 .5rem; color: #ffe3a2; }
.tv-empty p { font-size: 2rem; color: #d7e6fb; margin: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(2.2rem) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes glowpulse { 0%, 100% { filter: drop-shadow(0 0 .8rem rgba(255, 205, 100, .35)); } 50% { filter: drop-shadow(0 0 2rem rgba(255, 205, 100, .8)); } }
@keyframes sunrise { from { transform: translateY(8rem); } to { transform: translateY(-4rem); } }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes twinkle { from { opacity: .35; } to { opacity: .7; } }
@keyframes floatup { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-48rem); } }

@media (prefers-reduced-motion: reduce) {
    .seg.on, .tv-hero.new, .tv-row, .tv-step, .tv-champ, .tv-stars, .tv-sun, .tv-rays, .tv-hero .ring--done, .tv-champ .ring, .tv-reward__img, .tv-sparks i { animation: none !important; }
    .tv-scene { transition: none; }
    .tv-sparks { display: none; }
}
body.tv[data-reduce="1"] .seg.on, body.tv[data-reduce="1"] .tv-hero.new { animation: none !important; }