/*
   ─────────────────────────────────────────────────────────────
   الأوائل
   ─────────────────────────────────────────────────────────────
   منصة تتويج للثلاثة الأوائل (الأول في النص وأعلى)، وتحتها صفوف
   الرابع والخامس وترتيب الطالب نفسه. ألوان الميداليات الثلاث هي
   الألوان الصريحة الوحيدة هنا — معدن لا دور، فلا تنقلب مع السمة.
*/

.leaders-hero {
    padding-block: var(--s-7) var(--s-6);
    background:
        radial-gradient(50rem 18rem at 90% -20%, color-mix(in srgb, var(--p-500) 22%, transparent), transparent 70%),
        var(--p-50);
    border-bottom: 1px solid var(--p-100);
}

.leaders-hero__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.leaders-hero__inner > div { flex: 1; min-width: 14rem; }
.leaders-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.leaders-hero__cta { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); }

/* لوح الاحتفال: فوق كل حاجة ومابيمسكش أي ضغطة */
.celebrate-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    pointer-events: none;
}

.celebrate-canvas[hidden] { display: none; }

.leaders-hero__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--r-lg);
    background: linear-gradient(140deg, #fbbf24, #d97706);
    color: #fff;
    box-shadow: 0 12px 24px -12px #d97706;
    transform: rotate(-6deg);
}

.leaders-hero__icon .icon { width: 1.8rem; height: 1.8rem; }

.leaders-hero__title { margin: 0; font-size: var(--t-2xl); font-weight: var(--fw-bold); }
.leaders-hero__subtitle { margin: var(--s-1) 0 0; color: var(--text-muted); max-width: 44rem; }

.leaders-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-7);
}

/* ══════════════════════════════════════════
   منصة التتويج
   ══════════════════════════════════════════ */

.podium {
    --gold: #f59e0b;
    --silver: #94a3b8;
    --bronze: #c2703d;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: var(--s-4);
    margin: 0 auto var(--s-7);
    padding: 0;
    max-width: 52rem;
    list-style: none;
}

/* لو فيه أقل من تلاتة، المسرح يتوسّط بدل ما يسيب عمود فاضي */
.podium:has(> :only-child) { grid-template-columns: minmax(0, 18rem); justify-content: center; }
.podium:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 16rem)); justify-content: center; }

.podium__place {
    --medal: var(--p-500);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
    animation: podium-rise .6s var(--ease, ease-out) both;
    animation-delay: calc((4 - var(--rank)) * 120ms);
}

.podium__place.is-gold { --medal: var(--gold); }
.podium__place.is-silver { --medal: var(--silver); }
.podium__place.is-bronze { --medal: var(--bronze); }

.podium__person {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
    min-width: 0;
    max-width: 100%;
    margin-bottom: var(--s-3);
}

.podium__crown {
    font-size: 1.75rem;
    line-height: 1;
    animation: crown-bob 2.4s ease-in-out infinite;
}

.podium__avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    border: 3px solid var(--medal);
    background: var(--p-100);
    color: var(--p-700);
    font-size: var(--t-xl);
    font-weight: var(--fw-bold);
    box-shadow: 0 10px 22px -12px var(--medal);
}

.is-gold .podium__avatar { width: 5.25rem; height: 5.25rem; font-size: var(--t-2xl); }

.podium__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.podium__badge {
    position: absolute;
    inset-block-end: -.35rem;
    inset-inline-end: -.2rem;
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--medal);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: var(--fw-black);
}

.podium__name {
    display: block;
    max-width: 100%;
    margin-top: var(--s-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-md);
}

.podium__points { color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--fw-semibold); }

/* المكعب: ارتفاعه بيقول الترتيب من بعيد، والنسبة مكتوبة عليه */
.podium__block {
    display: grid;
    place-items: center;
    width: 100%;
    height: 5rem;
    border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm);
    background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 32%, var(--surface)), color-mix(in srgb, var(--medal) 12%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--medal) 45%, transparent);
    border-bottom-width: 4px;
}

.is-gold .podium__block {
    position: relative;
    height: 7.5rem;
    overflow: hidden;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent);
    animation: gold-glow 2.2s ease-in-out infinite;
}

/* لمعة بتعدّي على مكعب الأول */
.is-gold .podium__block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: gold-shine 3s ease-in-out 1s infinite;
}
.is-silver .podium__block { height: 6rem; }

.podium__percent {
    font-size: var(--t-2xl);
    font-weight: var(--fw-black);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.is-gold .podium__percent { font-size: var(--t-3xl); }

.podium__place .leader-stats { justify-content: center; margin-top: var(--s-3); }

.podium__place.is-me .podium__avatar { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ══════════════════════════════════════════
   الصفوف
   ══════════════════════════════════════════ */

.leaders-list {
    display: grid;
    gap: var(--s-3);
    max-width: 52rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.leader-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.leader-row.is-me {
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

.leader-row__rank {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--surface-inset);
    color: var(--text-2);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.leader-row .avatar img { width: 100%; height: 100%; object-fit: cover; }

.leader-row__body { flex: 1; min-width: 0; }

.leader-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
}

.leader-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-row__points { flex: none; color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--fw-semibold); }

.leader-row__bar {
    height: .4rem;
    margin-block: var(--s-2) var(--s-1);
    border-radius: var(--r-pill);
    background: var(--surface-inset);
    overflow: hidden;
}

.leader-row__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--p-500), var(--p-700));
}

.leader-row__percent {
    flex: none;
    min-width: 3.5rem;
    text-align: end;
    font-size: var(--t-xl);
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
}

.leaders-me__label {
    max-width: 52rem;
    margin: var(--s-6) auto var(--s-2);
    color: var(--text-muted);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
}

/* ══════════════════════════════════════════
   أرقام النشاط
   ══════════════════════════════════════════ */

.leader-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
    font-size: var(--t-xs);
}

.leader-stats li { display: inline-flex; align-items: center; gap: .25rem; }
.leader-stats strong { color: var(--text); font-variant-numeric: tabular-nums; }
.leader-stats__days .icon { color: var(--warn-600); }
.leader-stats__exams .icon { color: var(--p-600); }
.leader-stats__videos .icon { color: var(--ok-600); }

.leaders-you {
    display: inline-block;
    margin-inline-start: var(--s-1);
    padding: 0 .45rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--text-invert);
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
    vertical-align: middle;
}

.leaders-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    margin-top: var(--s-5);
    color: var(--text-muted);
    font-size: var(--t-sm);
}

/* ══════════════════════════════════════════
   إزاي بتتحسب النقط
   ══════════════════════════════════════════ */

.leaders-how {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    max-width: 52rem;
    margin: var(--s-8) auto 0;
    padding: var(--s-4) var(--s-5);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.leaders-how p { margin: var(--s-2) 0 0; color: var(--text-muted); font-size: var(--t-sm); }

.leaders-how__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--a-100);
    color: var(--a-700);
}

.leaders-how__rules {
    display: grid;
    gap: var(--s-1);
    margin: var(--s-2) 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-2);
    font-size: var(--t-sm);
}

.leaders-how__rules li { display: flex; align-items: center; gap: var(--s-2); }

/* ══════════════════════════════════════════
   الموبايل
   ══════════════════════════════════════════ */

@media (max-width: 599px) {
    .podium { gap: var(--s-2); }
    .podium__avatar { width: 3.25rem; height: 3.25rem; font-size: var(--t-lg); }
    .is-gold .podium__avatar { width: 4rem; height: 4rem; font-size: var(--t-xl); }
    .podium__name { font-size: var(--t-sm); }
    .podium__block { height: 3.75rem; }
    .is-gold .podium__block { height: 5.5rem; }
    .is-silver .podium__block { height: 4.5rem; }
    .podium__percent { font-size: var(--t-lg); }
    .is-gold .podium__percent { font-size: var(--t-2xl); }

    /* على المسرح الضيق الأرقام بتبقى أيقونة ورقم بس */
    .podium__place .leader-stats { gap: var(--s-1) var(--s-2); }
    .podium__place .leader-stats span { display: none; }

    .leader-row { padding: var(--s-3); gap: var(--s-2); }
    .leader-row__percent { min-width: 2.75rem; font-size: var(--t-md); }
}

@keyframes podium-rise {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: none; }
}

@keyframes crown-bob {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-4px) rotate(6deg); }
}

@keyframes gold-glow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); }
    50% { box-shadow: 0 0 28px 4px color-mix(in srgb, var(--gold) 45%, transparent); }
}

@keyframes gold-shine {
    0% { transform: translateX(-120%); }
    40%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .podium__place, .podium__crown,
    .is-gold .podium__block, .is-gold .podium__block::after { animation: none; }
}

/* ══════════════════════════════════════════
   أسئلة اليوم
   ══════════════════════════════════════════ */

.daily {
    max-width: 52rem;
    margin: 0 auto var(--s-7);
    padding: var(--s-5);
    border: 1px solid var(--p-200);
    border-radius: var(--r-xl);
    background: linear-gradient(160deg, var(--p-50), var(--surface) 55%);
}

.daily__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
}

.daily__title { margin: 0; font-size: var(--t-xl); font-weight: var(--fw-bold); }
.daily__subtitle { margin: var(--s-1) 0 0; color: var(--text-muted); font-size: var(--t-sm); }
.daily__head + :not(.daily__progress) { margin-top: var(--s-4); }

.daily__meta { display: flex; align-items: center; gap: var(--s-2); }

.daily__streak {
    padding: .2rem .7rem;
    border-radius: var(--r-pill);
    background: var(--warn-50);
    color: var(--warn-700);
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
}

.daily__count {
    padding: .2rem .7rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.daily__progress {
    height: .45rem;
    margin: var(--s-4) 0;
    border-radius: var(--r-pill);
    background: var(--surface-inset);
    overflow: hidden;
}

.daily__progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ok-500), var(--p-600));
    transition: width .4s var(--ease, ease);
}

.daily__done {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-lg);
    background: var(--ok-50);
    color: var(--ok-700);
}

.daily__done > span { font-size: 1.8rem; line-height: 1; }
.daily__done div { display: grid; gap: .1rem; }
.daily__done div span { color: var(--text-muted); font-size: var(--t-sm); }

.daily__review > summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: var(--fw-semibold);
    font-size: var(--t-sm);
}

.daily__review[open] > summary { margin-bottom: var(--s-3); }

.daily__list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }

.daily-q {
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    scroll-margin-top: 6rem;
}

.daily-q.is-correct { border-color: var(--ok-500); }
.daily-q.is-wrong { border-color: var(--err-600); }

.daily-q__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }

.daily-q__number {
    display: inline-grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--p-100);
    color: var(--p-700);
    font-weight: var(--fw-bold);
}

.daily-q__verdict { font-weight: var(--fw-bold); font-size: var(--t-sm); }
.is-correct .daily-q__verdict { color: var(--ok-600); }
.is-wrong .daily-q__verdict { color: var(--err-600); }

.daily-q__stem { margin-bottom: var(--s-3); font-weight: var(--fw-semibold); white-space: pre-line; }

.daily-q__form { display: grid; gap: var(--s-2); }
.daily-q__submit { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }

.daily-option.is-correct { border-color: var(--ok-500); background: var(--ok-50); }
.daily-option.is-wrong { border-color: var(--err-600); background: var(--err-50); }

.daily-q__correct-text { margin: 0; color: var(--text-muted); font-size: var(--t-sm); }

.daily-q__explain {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin-top: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r);
    background: var(--a-50);
    color: var(--text-2);
    font-size: var(--t-sm);
    white-space: pre-line;
}

@media (max-width: 599px) {
    .daily { padding: var(--s-4) var(--s-3); border-radius: var(--r-lg); }
    .daily-q__submit { justify-self: stretch; justify-content: center; }
}