/* ===== أزرار ===== */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem 1.3rem; min-height: 44px; font-weight: 700; line-height: 1.4; overflow: hidden;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med), color var(--t-fast);
}
.btn:disabled { opacity: .38; }
.btn-primary {
  color: #1B1405; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  padding-inline: 2.2rem; box-shadow: none;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0; transform: translateX(120%) skewX(20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); width: 40%;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.btn-primary:hover:not(:disabled)::after { animation: sheen .9s var(--ease); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-lg { font-size: 1.15rem; min-height: 52px; }
.btn-xl { font-size: clamp(1.2rem, 2.2vw, 1.7rem); min-height: 64px; padding-inline: 3.4rem; }
.btn-ghost { border: 1px solid var(--line); color: var(--gold-hi); background: rgba(20, 33, 61, .5); }
.btn-ghost:hover:not(:disabled) { border-color: var(--gold); background: rgba(232, 191, 98, .1); transform: translateY(-1px); }
.btn-quiet { color: var(--text-2); }
.btn-quiet:hover:not(:disabled) { color: var(--gold-hi); }
.btn-sm { min-height: 36px; padding: .25rem .9rem; font-size: .9rem; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--line-soft); color: var(--gold-hi); font-size: 1.3rem; transition: border-color var(--t-fast), background var(--t-fast); }
.icon-btn:hover { border-color: var(--gold); background: rgba(232, 191, 98, .08); }

/* ===== رقائق ومؤشرات ===== */
.chip { display: inline-block; padding: 0 .7rem; font-size: .8rem; line-height: 1.8; border: 1px solid var(--line-soft); color: var(--text-2); background: rgba(16, 26, 49, .8); }
.chip-gold { color: var(--gold-hi); border-color: var(--line); }
.chip-ok { color: #8BE0B8; border-color: rgba(46, 158, 111, .5); }
.chip-warn { color: #F1C985; border-color: rgba(232, 191, 98, .4); }
.chip-pts { margin-inline-start: auto; color: var(--gold); }

/* ===== مراحل الإعداد ===== */
.step-pill { display: flex; align-items: center; gap: .5rem; padding: .35rem .9rem; color: var(--text-2); border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); }
.step-pill:hover { color: var(--text); }
.sp-n { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border: 1px solid var(--line-soft); font-size: .85rem; transform: rotate(45deg); }
.sp-n { transform: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: 0; background: var(--panel); line-height: 1; }
.step-pill.is-current { color: var(--gold-hi); border-color: var(--gold); }
.step-pill.is-current .sp-n { background: var(--gold); color: #1B1405; }
.step-pill.is-done .sp-n { background: var(--ok-bg); color: #8BE0B8; }

/* ===== بطاقة الصف ===== */
.grade-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
  padding: 1.6rem 1rem 1.3rem; background: linear-gradient(180deg, var(--panel), var(--surface-2));
  border: 1px solid var(--line-soft); transition: transform var(--t-med) var(--ease), border-color var(--t-fast), box-shadow var(--t-med);
}
.grade-card:hover { transform: translateY(-3px); border-color: var(--line); }
.gc-corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--gold); opacity: .35; transition: opacity var(--t-fast); }
.gc-tl { top: 6px; inset-inline-start: 6px; border-width: 2px 0 0 2px; }
html[dir='rtl'] .gc-tl { border-width: 2px 2px 0 0; }
.gc-br { bottom: 6px; inset-inline-end: 6px; border-width: 0 2px 2px 0; }
html[dir='rtl'] .gc-br { border-width: 0 0 2px 2px; }
.gc-num { font-family: var(--font-display); font-size: 3.6rem; line-height: 1.1; color: var(--gold); }
.gc-name { font-weight: 700; font-size: 1.2rem; }
.gc-state { font-size: .8rem; color: var(--text-2); }
.gc-state.ok { color: #8BE0B8; }
.gc-check { margin-top: .5rem; display: inline-flex; gap: .4rem; align-items: center; padding: 0 .9rem; background: var(--gold); color: #1B1405; font-weight: 700; font-size: .85rem; }
.grade-card.is-selected { border-color: var(--gold); transform: scale(1.03); box-shadow: 0 0 0 1px var(--gold), 0 0 34px rgba(232, 191, 98, .28); }
.grade-card.is-selected .gc-corner { opacity: 1; }

/* ===== بطاقة الوحدة ===== */
.unit { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; text-align: start; background: var(--surface-2); border: 1px solid var(--line-soft); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.unit:hover:not(:disabled) { border-color: var(--line); transform: translateY(-1px); }
.unit-box { width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid var(--text-2); color: #1B1405; font-weight: 900; }
.unit-main { display: flex; flex-direction: column; line-height: 1.6; }
.unit-main small { color: var(--text-2); }
.unit-split { color: var(--gold) !important; }
.unit-side { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.unit-count { font-size: .85rem; color: var(--text-2); }
.unit.is-selected { border-color: var(--gold); background: rgba(232, 191, 98, .08); }
.unit.is-selected .unit-box { background: var(--gold); border-color: var(--gold); }
.unit.is-empty { opacity: .5; }
.counter b { color: var(--gold-hi); font-size: 1.2rem; }
.notice, .alert { border-inline-start: 4px solid var(--gold); background: rgba(232, 191, 98, .08); padding: .8rem 1.1rem; margin-bottom: 1rem; }
.notice b { color: var(--gold-hi); }
.notice p { color: var(--text-2); font-size: .92rem; }
.alert { border-color: var(--bad); background: var(--bad-bg); margin-top: 1.2rem; }
.empty { color: var(--text-2); }

/* ===== مجموعات الخيارات والمفاتيح ===== */
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); }
.seg-opt { padding: .5rem 1.3rem; min-height: 44px; color: var(--text-2); font-weight: 700; transition: background var(--t-fast), color var(--t-fast); }
.seg-opt + .seg-opt { border-inline-start: 1px solid var(--line-soft); }
.seg-opt:hover { color: var(--text); background: rgba(232, 191, 98, .06); }
.seg-opt[aria-checked='true'] { background: var(--gold); color: #1B1405; }
.stepper { display: inline-flex; gap: .5rem; margin-top: 1rem; align-items: center; }
.stepper input { width: 5rem; height: 44px; text-align: center; background: var(--surface-2); border: 1px solid var(--line); font-size: 1.2rem; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.avail { margin-top: 1.2rem; color: var(--text-2); display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.avail b { color: var(--gold-hi); font-size: 1.2rem; }
.avail.warn { color: #F1C985; }
.diff-note { margin-top: 1rem; color: var(--text-2); }
.diff-stats { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.tgl { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.1rem; text-align: start; background: var(--surface-2); border: 1px solid var(--line-soft); transition: border-color var(--t-fast); }
.tgl:hover { border-color: var(--line); }
.tgl-text { display: flex; flex-direction: column; line-height: 1.5; }
.tgl-text small { color: var(--text-2); }
.tgl-track { flex: none; width: 48px; height: 26px; background: #2a3654; position: relative; transition: background var(--t-fast); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
.tgl-track i { position: absolute; top: 4px; inset-inline-start: 4px; width: 18px; height: 18px; background: var(--text); transition: transform var(--t-med) var(--ease); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.tgl[aria-checked='true'] .tgl-track { background: var(--gold); }
.tgl[aria-checked='true'] .tgl-track i { transform: translateX(-22px); background: #1B1405; }
.adv { margin-top: 1.4rem; }
.adv summary { cursor: pointer; color: var(--gold); padding: .4rem 0; }
.check { display: inline-flex; align-items: center; gap: .5rem; }
.check input { width: 20px; height: 20px; accent-color: var(--gold); }
input[type='range'] { accent-color: var(--gold); width: min(260px, 100%); }

/* ===== الحوار ===== */
.dlg { border: 0; padding: 0; background: transparent; color: var(--text); max-width: min(92vw, 560px); width: 100%; }
.dlg-wide { max-width: min(92vw, 760px); }
.dlg::backdrop { background: rgba(3, 6, 14, .78); }
.dlg-frame { background: linear-gradient(180deg, var(--panel), var(--surface-2)); border: 1px solid var(--line); padding: 1.6rem 1.8rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); max-height: 86vh; overflow: auto; }
.dlg-title { color: var(--gold-hi); font-size: 1.7rem; margin-bottom: .8rem; }
.dlg-body { color: var(--text); }
.dlg-body p { color: var(--text-2); }
.dlg-actions { display: flex; justify-content: flex-start; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.howto { counter-reset: s; display: grid; gap: .6rem; }
.howto li { counter-increment: s; padding-inline-start: 2.4rem; position: relative; }
.howto li::before { content: counter(s, arabic-indic); position: absolute; inset-inline-start: 0; top: .15rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; background: var(--gold); color: #1B1405; font-weight: 800; font-size: .9rem; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); line-height: 1; }
.guide h3 { color: var(--gold); font-size: 1.15rem; margin-top: 1rem; }
.guide li { list-style: '◆  '; margin-inline-start: 1.2rem; color: var(--text-2); }
.toast { position: fixed; z-index: 90; bottom: 24px; inset-inline: 0; margin-inline: auto; width: fit-content; max-width: 90vw; padding: .6rem 1.4rem; background: var(--panel-hi); border: 1px solid var(--gold); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity var(--t-med), transform var(--t-med) var(--ease); }
.toast.show { opacity: 1; transform: none; }
.noscript { position: relative; z-index: 5; padding: 2rem; text-align: center; }

/* ===== شاشة المسابقة ===== */
.progress { height: 6px; background: rgba(167, 179, 202, .2); margin-top: .3rem; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: width .7s var(--ease); }
.timer { position: relative; width: 58px; height: 58px; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg) scaleY(-1); }
.ring-bg { fill: none; stroke: rgba(167, 179, 202, .2); stroke-width: 4; }
.ring-fg { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: butt; transition: stroke-dashoffset .25s linear, stroke var(--t-med); }
.timer-num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; }
.timer.low .ring-fg { stroke: #E0566A; }
.timer.low .timer-num { color: #FF9AA8; }

.qcard {
  position: relative; padding: clamp(.8rem, 2.4vh, 2.4rem) clamp(1.5rem, 3.4vw, 3.4rem); text-align: center;
  background: linear-gradient(180deg, #172647, #0F1A33); border-block: 1px solid var(--gold);
  clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px);
  box-shadow: inset 0 0 60px rgba(80, 120, 200, .12);
}
.qcard::before, .qcard::after { content: ''; position: absolute; top: 50%; width: 10px; height: 10px; background: var(--gold); transform: translateY(-50%) rotate(45deg); }
.qcard::before { inset-inline-start: 10px; }
.qcard::after { inset-inline-end: 10px; }
.qcard.glow-ok { animation: okGlow 1.2s var(--ease) 1; }
.q-meta { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.q-passage { margin: 0 auto .8rem; padding: .9rem 1.3rem; max-width: 70ch; text-align: start; color: var(--text-2); border-inline-start: 3px solid var(--gold); background: rgba(7, 13, 28, .5); white-space: pre-line; }
.hint-box { align-self: center; padding: .5rem 1.4rem; color: var(--info); border: 1px dashed var(--info); background: rgba(127, 168, 221, .08); animation: rise .4s var(--ease); }

.ans {
  --edge: var(--line); --fill: #101A31;
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 1rem; text-align: start;
  min-height: clamp(54px, 8.5vh, 104px); padding: .7rem calc(var(--cut) + 1rem);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
  transition: transform var(--t-fast) var(--ease), filter var(--t-med);
}
.ans::before, .ans::after { content: ''; position: absolute; z-index: -1; clip-path: inherit; transition: background var(--t-med), opacity var(--t-med); }
.ans::before { inset: 0; background: var(--edge); }
.ans::after { inset: 2px; background: var(--fill); }
.ans:hover:not(:disabled), .ans:focus-visible { --edge: var(--gold); --fill: #17294C; transform: translateY(-2px); }
.ans:focus-visible { outline: none; --edge: var(--gold-hi); }
.ans-l { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; color: var(--gold); font-weight: 800; font-size: 1.15rem; border: 1px solid var(--line); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: 0; background: rgba(232, 191, 98, .14); line-height: 1; }
.ans-t { flex: 1; }
.ans-mark { flex: none; font-size: 1.5rem; font-weight: 900; min-width: 1.5rem; text-align: center; }
.ans.selected { --edge: var(--gold-hi); --fill: #3A3015; transform: scale(1.015); }
.ans.selected .ans-l { background: var(--gold); color: #1B1405; }
.ans.correct { --edge: #5DDBA4; --fill: var(--ok-bg); animation: pop .6s var(--ease); }
.ans.correct .ans-mark { color: #7CF0BC; }
.ans.wrong { --edge: #E0566A; --fill: var(--bad-bg); animation: nudge .5s var(--ease); }
.ans.wrong .ans-mark { color: #FF9AA8; }
.ans.dim { filter: saturate(.5) brightness(.7); }
.ans.eliminated { opacity: .25; }
.ans:disabled:not(.correct):not(.wrong):not(.selected):not(.eliminated) { opacity: .75; }

.fb { padding: .9rem 1.4rem; border-inline-start: 4px solid var(--info); background: rgba(16, 26, 49, .85); animation: rise .5s var(--ease); }
.fb-ok { border-color: var(--ok); }
.fb-wrong { border-color: var(--bad); }
.fb-msg { font-weight: 800; font-size: 1.2rem; }
.fb-ok .fb-msg b { color: #7CF0BC; }
.fb-wrong .fb-msg b { color: #FF9AA8; }
.fb-exp { color: var(--text-2); margin-top: .3rem; font-size: 1.02rem; }
.fb-exp b { color: var(--gold); }
.fb-btns { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }

/* سلّم النقاط */
.rung { display: flex; align-items: center; gap: .6rem; padding: 0 .7rem; min-height: 26px; flex: 1 0 26px; color: #6C7A97; font-weight: 700; font-size: .95rem; border-inline-start: 3px solid transparent; transition: background var(--t-med), color var(--t-med); }
.rung .r-n { width: 1.8em; text-align: center; }
.rung .r-d { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); opacity: .6; }
.rung .r-p { margin-inline-start: auto; font-feature-settings: 'tnum'; }
.rung.mile { color: var(--gold-lo); }
.rung.done { color: #7CF0BC; }
.rung.missed { color: #E0899A; }
.rung.active { background: linear-gradient(90deg, rgba(232, 191, 98, .28), rgba(232, 191, 98, .08)); color: var(--gold-hi); border-color: var(--gold); box-shadow: 0 0 22px rgba(232, 191, 98, .25); text-decoration: none; }

/* مساعدات */
.joker { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem 1.1rem; min-height: 44px; border: 1px solid var(--line); color: var(--gold-hi); background: rgba(20, 33, 61, .7); font-weight: 700; transition: transform var(--t-fast), border-color var(--t-fast); clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
.joker:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.joker:disabled, .joker.used { opacity: .4; }
.joker.static { color: var(--text-2); }
.joker em { font-style: normal; font-size: .75rem; color: var(--text-2); }
.j-ic { color: var(--gold); font-weight: 900; font-size: .95rem; }

/* ===== النتائج ===== */
.stat { padding: 1rem; text-align: center; background: var(--surface-2); border-block: 1px solid var(--line-soft); display: flex; flex-direction: column; }
.stat b { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.3; }
.stat span { color: var(--text-2); font-size: .9rem; }
.stat.ok b { color: #7CF0BC; } .stat.bad b { color: #FF9AA8; } .stat.gold b { color: var(--gold-hi); }
.mini { padding: 1rem 1.2rem; background: var(--surface-2); border-inline-start: 3px solid var(--line-soft); }
.mini h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.mini ol { list-style: decimal; padding-inline-start: 1.6rem; color: var(--text-2); font-size: .92rem; display: grid; gap: .3rem; }
.m-ok { border-color: var(--ok); } .m-bad { border-color: var(--bad); }
.review > h2 { color: var(--gold-hi); }
.rv-item { padding: 1.1rem 1.3rem; background: var(--surface-2); border-inline-start: 4px solid var(--line-soft); }
.rv-correct { border-color: var(--ok); } .rv-wrong, .rv-skipped, .rv-timeout { border-color: var(--bad); }
.rv-item header { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.rv-n { width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--panel); font-weight: 800; }
.rv-state { font-weight: 800; }
.rv-correct .rv-state { color: #7CF0BC; } .rv-wrong .rv-state, .rv-timeout .rv-state { color: #FF9AA8; }
.rv-q { font-weight: 700; font-size: 1.1rem; }
.rv-opts { display: grid; gap: .25rem; margin-block: .6rem; }
.rv-opts li { display: flex; align-items: center; gap: .6rem; padding: .15rem .6rem; color: var(--text-2); }
.rv-opts li.is-correct { color: #7CF0BC; background: rgba(46, 158, 111, .12); }
.rv-opts li.is-wrong { color: #FF9AA8; background: rgba(179, 41, 58, .15); }
.rv-opts em { font-style: normal; font-size: .8rem; }
.src-warn { color: #F1C985; display: block; margin-top: .4rem; }