/* ==========================================================================
   «حِصّة» — عرض الحصة للشاشة (16:9)
   لوحة ثابتة 1536×864 تُكبَّر لتملأ الشاشة، وتُصدَّر PDF بمقاس 16:9 نفسه.
   ========================================================================== */

:root {
    --deck-w: 1536px;
    --deck-h: 864px;
    --ink: #10202e;
    --ink-2: #3a4a58;
    --muted: #6b7a88;
    --paper: #fbf9f4;
    --paper-2: #f3efe5;
    --line: #e4ddcd;
    --teal: #0f5f58;
    --teal-deep: #083b37;
    --teal-2: #0b8a6f;
    --teal-soft: #e6f3ef;
    --gold: #c28a2c;
    --gold-soft: #fbf1dc;
    --red: #b83c29;
    --red-soft: #fdecea;
    --mode-launch: #7c8b99;
    --mode-teach: #1f4e79;
    --mode-practice: #0b8a6f;
    --mode-check: #d08a2a;
    --display: 'Alexandria', 'IBM Plex Sans Arabic', Tahoma, sans-serif;
    --text: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body.deck {
    background: #0b1720;
    color: var(--ink);
    font-family: var(--text);
    overflow: hidden;
}

/* --- شريط الأدوات -------------------------------------------------------- */

.deck-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    background: linear-gradient(180deg, rgba(8, 20, 28, .92), rgba(8, 20, 28, .65));
    color: #fff;
    font-size: 13px;
    transition: opacity .3s, transform .3s;
}

body.is-idle .deck-bar { opacity: 0; transform: translateY(-100%); pointer-events: none; }

.deck-bar a, .deck-bar button {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: 6px 12px;
    font: 600 13px var(--text);
    text-decoration: none;
    cursor: pointer;
}

.deck-bar a:hover, .deck-bar button:hover { background: rgba(255, 255, 255, .18); }
.deck-bar .is-gold { background: var(--gold); border-color: var(--gold); color: #1b1305; }
.deck-bar__title { display: flex; gap: 10px; align-items: baseline; flex: 1; min-width: 0; }
.deck-bar__title b { font-family: var(--display); color: var(--gold); }
.deck-bar__title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.deck-bar__actions { display: flex; flex-wrap: wrap; gap: 6px; }

.deck-notice {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 19;
    margin: 0;
    padding: 8px 16px;
    background: var(--gold-soft);
    color: #5b3d06;
    font-size: 13px;
    text-align: center;
}

/* --- المسرح --------------------------------------------------------------- */

.deck-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.deck-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--deck-w);
    height: var(--deck-h);
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(var(--deck-scale, .5));
}

.slide {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    padding: 56px 88px 44px;
    background:
        radial-gradient(1200px 500px at 110% -10%, rgba(15, 95, 88, .06), transparent 60%),
        var(--paper);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.slide.is-active { display: flex; }

/* لا يؤثر الغلاف الداخلي في وضع العرض، ويصبح لوحة القياس عند الطباعة. */
.slide__canvas { display: contents; }

.slide__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
    font: 600 20px var(--display);
    color: var(--muted);
}

.slide__when::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-inline-end: 10px;
    background: var(--phase-color, var(--teal));
}

.mode-launch { --phase-color: var(--mode-launch); }
.mode-teach { --phase-color: var(--mode-teach); }
.mode-practice { --phase-color: var(--mode-practice); }
.mode-check { --phase-color: var(--mode-check); }

.slide__brand { font-weight: 700; color: var(--teal); opacity: .8; }

/* المؤقت يجلس في زاوية الشريط العلوي؛ يُفسح له حتى لا يغطي اسم الدرس. */
.slide[data-timer] .slide__top { padding-inline-end: 160px; }

.slide__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* المحتوى الأطول من الشريحة يفيض إلى الأسفل فقط، فلا يغطي العنوان العلوي. */
    justify-content: safe center;
    gap: 22px;
    min-height: 0;
}

.slide__tag {
    align-self: flex-start;
    padding: 6px 16px;
    background: var(--teal);
    color: #fff;
    font: 700 20px var(--display);
}

.slide__tag--gold { background: var(--gold); color: #1b1305; }
.slide__tag--red { background: var(--red); }

.slide__title {
    margin: 0;
    font: 800 58px/1.25 var(--display);
    color: var(--ink);
}

.slide__title--stem { font-size: 48px; font-weight: 700; }

.slide__prompt {
    margin: 0;
    padding-inline-start: 18px;
    border-inline-start: 6px solid var(--gold);
    font: 600 30px/1.5 var(--text);
    color: var(--ink-2);
}

.slide__foot {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 22px;
}

.slide__phases { display: flex; gap: 4px; flex: 1; height: 8px; }
.slide__phases i { display: block; background: var(--phase-color); opacity: .22; }
.slide__phases i.is-current { opacity: 1; }
.slide__num { font: 700 20px var(--display); color: var(--muted); }
.slide__card {
    padding: 4px 12px;
    border: 1px solid var(--line);
    color: var(--muted);
    font: 600 16px var(--display);
    white-space: nowrap;
}
.slide__card bdi { color: var(--teal); font-weight: 800; }

/* --- الغلاف --------------------------------------------------------------- */

.slide--cover {
    padding: 0;
    background: radial-gradient(900px 600px at 85% 20%, #137a70 0%, var(--teal) 35%, var(--teal-deep) 100%);
    color: #fff;
}

.slide--cover .slide__body { position: relative; justify-content: space-between; padding: 90px 110px 70px; gap: 0; }

.cover__pattern {
    position: absolute;
    inset: 0;
    opacity: .09;
    background:
        repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 38px),
        repeating-linear-gradient(-45deg, #fff 0 2px, transparent 2px 38px);
    mask-image: linear-gradient(270deg, #000 0%, transparent 70%);
}

.cover__content { position: relative; display: flex; flex-direction: column; gap: 28px; max-width: 1180px; }
.cover__kicker { font: 600 26px var(--display); color: #ffd98f; letter-spacing: .01em; }

.cover__title {
    margin: 0;
    font: 900 112px/1.12 var(--display);
    color: #fff;
}

.cover__title::after {
    content: '';
    display: block;
    width: 160px;
    height: 10px;
    margin-top: 30px;
    background: var(--gold);
}

.cover__question { margin: 0; font: 500 42px/1.55 var(--text); color: rgba(255, 255, 255, .92); }

.cover__foot {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font: 600 24px var(--display);
    color: rgba(255, 255, 255, .8);
}

.cover__mark { font: 900 44px var(--display); color: var(--gold); }

/* --- المشهد والفكرة ------------------------------------------------------- */

.hook__scene {
    position: relative;
    /* مسافة لعلامة الاقتباس حتى لا تلامس العنوان فوقها. */
    margin: 26px 0 0;
    padding: 30px 44px;
    background: #fff;
    border: 1px solid var(--line);
    font: 500 40px/1.7 var(--text);
    color: var(--ink);
}

.hook__scene::before {
    content: '”';
    position: absolute;
    inset-inline-start: -14px;
    top: -50px;
    font: 900 150px/1 var(--display);
    color: var(--gold);
}

.hook__question {
    margin: 0;
    padding: 22px 30px;
    background: var(--gold-soft);
    border-inline-start: 10px solid var(--gold);
    font: 700 40px/1.5 var(--display);
}

.idea__core {
    margin: 0;
    padding: 36px 44px;
    background: var(--teal);
    color: #fff;
    font: 700 48px/1.5 var(--display);
}

.idea__text { margin: 0; font: 500 34px/1.7 var(--text); color: var(--ink-2); }

/* --- البطاقات والمفردات --------------------------------------------------- */

.cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 22px;
}

.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }

.cards li {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px 32px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 8px solid var(--teal);
    font: 600 36px/1.5 var(--text);
}

.cards b {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: var(--teal-soft);
    color: var(--teal);
    font: 900 30px var(--display);
}

.vocab {
    display: grid;
    gap: 18px;
    margin: 0;
    grid-template-columns: repeat(2, 1fr);
}

.vocab--3, .vocab--5, .vocab--6 { grid-template-columns: repeat(3, 1fr); }

.vocab div { padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-inline-start: 8px solid var(--teal); }
.vocab dt { font: 800 34px var(--display); color: var(--teal); }
.vocab dd { margin: 10px 0 0; font: 500 27px/1.55 var(--text); color: var(--ink-2); }

/* --- الأمثلة -------------------------------------------------------------- */

.problem {
    margin: 0;
    padding: 22px 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-inline-start: 10px solid var(--mode-teach);
    font: 700 38px/1.55 var(--text);
}

.problem--big { font-size: 46px; padding: 34px 40px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.steps li {
    display: flex;
    gap: 18px;
    align-items: baseline;
    font: 500 32px/1.5 var(--text);
}

.steps b {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: var(--mode-teach);
    color: #fff;
    font: 800 24px var(--display);
}

.steps--compact li { font-size: 25px; }
.steps--compact b { width: 36px; height: 36px; font-size: 19px; }

.answer {
    align-self: flex-start;
    margin: 0;
    padding: 16px 28px;
    background: var(--teal-soft);
    border: 2px solid var(--teal);
    font: 800 38px/1.45 var(--display);
    color: var(--teal-deep);
}

.answer span {
    margin-inline-end: 16px;
    font-size: 24px;
    font-weight: 600;
    color: var(--teal);
}

/* إجابة بجملة كاملة (لا ناتج قصير): خط النص بدل خط العناوين الثقيل. */
.answer--long { align-self: stretch; font: 700 30px/1.6 var(--text); }

.try__solution { display: grid; gap: 12px; padding: 18px 24px; background: var(--paper-2); border: 1px dashed var(--line); }
.try__solution .answer { font-size: 30px; }
.try__solution .answer--long { font-size: 26px; }

/* --- أين الخطأ؟ ----------------------------------------------------------- */

.work {
    align-self: flex-start;
    margin: 0;
    padding: 26px 40px;
    background: #fffef8;
    border: 1px solid var(--line);
    box-shadow: 6px 8px 0 rgba(0, 0, 0, .05);
    transform: rotate(-.6deg);
    font: 700 54px/1.5 'Aref Ruqaa', var(--text);
    color: #243b8f;
    text-decoration: underline wavy rgba(184, 60, 41, .7);
    text-decoration-thickness: 2px;
    text-underline-offset: 16px;
}

.work__cause {
    margin: 0;
    padding: 18px 26px;
    background: var(--red-soft);
    border-inline-start: 8px solid var(--red);
    font: 500 30px/1.55 var(--text);
}

.work__cause span, .close__next span, .checkpoint__why span {
    display: block;
    margin-bottom: 6px;
    font: 700 22px var(--display);
    color: var(--muted);
}

/* --- نقطة التحقق ---------------------------------------------------------- */

.options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.options li {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 26px;
    background: #fff;
    border: 2px solid var(--line);
    font: 600 36px/1.4 var(--text);
    transition: background .35s, border-color .35s, opacity .35s;
}

.options b {
    flex: none;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    background: var(--ink);
    color: #fff;
    font: 900 38px var(--display);
}

.slide.is-revealed .options li { opacity: .45; }
.slide.is-revealed .options li.is-answer { opacity: 1; background: var(--teal-soft); border-color: var(--teal); }
.slide.is-revealed .options li.is-answer b { background: var(--teal); }

.checkpoint__why { margin: 0; font: 500 28px/1.55 var(--text); color: var(--ink-2); }

/* --- التحدي والختام ------------------------------------------------------- */

.challenge__question {
    margin: 0;
    padding: 40px 48px;
    background: linear-gradient(135deg, #fff 0%, var(--gold-soft) 100%);
    border: 2px solid var(--gold);
    font: 700 50px/1.55 var(--display);
}

.close__recall { margin: 0; font: 700 50px/1.5 var(--display); color: var(--teal); }
.close__next { margin: 0; padding: 22px 28px; background: #fff; border: 1px solid var(--line); font: 600 32px/1.5 var(--text); }

.norms { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.norms li {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-inline-start: 10px solid var(--teal);
    font: 600 38px/1.45 var(--text);
}
.norms b {
    flex: none;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    background: var(--teal-soft);
    color: var(--teal);
    font: 900 30px var(--display);
}

.extend__task {
    margin: 0;
    padding: 30px 36px;
    background: linear-gradient(135deg, #fff 0%, var(--teal-soft) 100%);
    border: 2px solid var(--teal);
    font: 700 38px/1.5 var(--display);
}
.extend__criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.extend__criteria li { padding: 8px 18px; background: var(--gold-soft); border: 1px solid var(--gold); font: 600 24px var(--text); }
.extend__line { margin: 0; padding: 16px 24px; background: #fff; border: 1px solid var(--line); font: 600 28px/1.5 var(--text); }
.extend__line span { display: inline-block; margin-inline-end: 14px; color: var(--teal); font: 800 24px var(--display); }

.generic { margin: 0; padding-inline-start: 40px; font: 500 34px/1.7 var(--text); }

/* --- الإظهار المتدرج ------------------------------------------------------ */

.frag { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
.frag.is-shown { opacity: 1; transform: none; }

/* --- المؤقت --------------------------------------------------------------- */

.timer {
    position: absolute;
    inset-inline-end: 64px;
    top: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px 8px 10px;
    background: var(--ink);
    color: #fff;
    border: 0;
    font: 800 30px var(--display);
    cursor: pointer;
}

.timer svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.timer circle { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 5; }
.timer .timer__ring { stroke: var(--gold); stroke-dasharray: 119.38; stroke-dashoffset: var(--timer-offset, 0); transition: stroke-dashoffset 1s linear; }
.timer.is-done { background: var(--red); animation: deck-pulse 1s ease-in-out infinite; }

@keyframes deck-pulse { 50% { transform: scale(1.06); } }

/* --- الملاحظات والنظرة العامة والمقدّم ------------------------------------- */

.deck-notes {
    position: fixed;
    inset: auto 16px 16px 16px;
    z-index: 15;
    max-height: 34vh;
    overflow: auto;
    padding: 14px 18px;
    background: rgba(10, 22, 30, .94);
    color: #eaf2f1;
    font-size: 16px;
    line-height: 1.7;
    border-top: 3px solid var(--gold);
}

.deck-notes__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.deck-notes__head span { color: #ffd98f; }
.deck-notes ul, .deck-presenter__notes ul { margin: 0; padding-inline-start: 20px; }

.deck-overview {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    padding: 70px 24px 24px;
    overflow: auto;
    background: rgba(8, 18, 26, .97);
}

.deck-overview[hidden], .deck-notes[hidden], .deck-presenter[hidden] { display: none; }

.deck-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--paper); }
.deck-thumb.is-current { border-color: var(--gold); }
.deck-thumb .slide { display: flex; transform: scale(var(--thumb-scale, .18)); transform-origin: top right; width: var(--deck-w); height: var(--deck-h); box-shadow: none; }
.deck-thumb .frag { opacity: 1; transform: none; }
.deck-thumb .timer { display: none; }
.deck-thumb bdi { position: absolute; inset: auto auto 6px 8px; padding: 2px 8px; background: rgba(0, 0, 0, .6); color: #fff; font: 700 13px var(--display); }

body.is-presenter .deck-viewport { display: none; }

.deck-presenter {
    position: fixed;
    inset: 56px 0 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr);
    gap: 18px;
    padding: 18px;
    color: #eaf2f1;
}

.deck-presenter__current, .deck-presenter__next > div { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); }
.deck-presenter__current .slide, .deck-presenter__next .slide { display: flex; transform-origin: top right; width: var(--deck-w); height: var(--deck-h); box-shadow: none; }
.deck-presenter__side { display: grid; grid-template-rows: auto auto 1fr; gap: 16px; min-height: 0; }
.deck-presenter__clock { display: flex; align-items: baseline; gap: 12px; }
.deck-presenter__clock bdi { font: 800 48px var(--display); color: #ffd98f; }
.deck-presenter__next span { display: block; margin-bottom: 6px; color: #9fb3b0; }
/* المعاينتان تعرضان الحالة الفعلية بلا حركة انتقال. */
.deck-presenter .frag { transition: none; }
.deck-presenter__notes { overflow: auto; padding: 14px 16px; background: rgba(255, 255, 255, .06); font-size: 18px; line-height: 1.75; }
.deck-presenter__notes strong { display: block; margin-bottom: 8px; color: #ffd98f; }