/* ═══════════════════════════════════════════════════════════════════════════
   وِردنا — ورد واحد تقرأه المجموعة كلها.

   اللوحة: أخضر عميق كأخضر الخزف، ونحاس مكبوح لا ذهب لامع، على ورق مائل إلى
   البرودة. الخطّ: كوفيّ للعناوين وأسماء السور — فهو خطّ الجدران والنقش —
   وسطر عاديّ هادئ لما سواه.

   العلامة المميّزة هي «مقياس المصحف»: ثلاثون عمودًا للأجزاء الثلاثين، يمتلئ
   منها ما قرأته المجموعة، ويعلو منها عمود الجزء الذي نحن فيه. الفكرة كلها في
   هذا السطر: نحن جميعًا في موضع واحد من الكتاب، نمشي فيه معًا.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── الرموز ──────────────────────────────────────────────────────────────── */

:root {
  --paper:      #F4F6F2;
  --surface:    #FFFFFF;
  --surface-2:  #E7ECE3;
  --line:       #D7DFD4;
  --line-soft:  #E8EDE4;
  --ink:        #10221C;
  --ink-2:      #465850;
  --ink-3:      #74857B;

  --green:      #0E5C4A;
  --green-deep: #073B2F;
  --green-soft: #E0EEE7;
  --green-ring: #0E5C4A33;
  /* ما يُكتب فوق الأخضر المصمت. رمزٌ لا لونٌ ثابت، كي لا يحتاج قلبُه في الليل
     قاعدةً أخصّ تغلب حالات الزرّ نفسها. */
  --on-green:   #FFFFFF;

  --brass:      #8F6C1F;
  --brass-2:    #B98F2E;
  --brass-soft: #F3ECDA;

  --danger:     #9E3227;
  --danger-soft:#F6E5E2;

  --display: "Reem Kufi", "Noto Kufi Arabic", serif;
  --body: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-xs: 4px;
  --r-sm: 7px;
  --r:    12px;
  --r-lg: 18px;

  --gap:  clamp(1rem, 4vw, 1.5rem);
  --pad:  clamp(1rem, 5vw, 1.75rem);
  --wide: 40rem;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

:root[data-theme="dark"] {
  --paper:      #08110E;
  --surface:    #0F1B16;
  --surface-2:  #1A2A23;
  --line:       #24382F;
  --line-soft:  #182720;
  --ink:        #E6EDE7;
  --ink-2:      #A2B2A9;
  --ink-3:      #718479;

  --green:      #45B08F;
  --green-deep: #6FCBAC;
  --green-soft: #122C24;
  --green-ring: #45B08F3D;
  --on-green:   #06251D;

  --brass:      #D3AC5E;
  --brass-2:    #E7C888;
  --brass-soft: #241E10;

  --danger:     #E08076;
  --danger-soft:#2B1614;

  color-scheme: dark;
}

/* ── الأساس ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` هو ما يُخفي به هذا الموقع كل شيء — التبويب غير المعروض، والاحتفال
   قبل أوانه، وخطوة النافذة التي لم تُختَر. وقاعدة الصنف تغلب قاعدة المتصفّح
   لهذه السمة، فلولا هذا السطر لظهر المخفيّ كلّه دفعةً واحدة. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--green); }

:focus-visible {
  outline: 2px solid var(--brass-2);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.h2 {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
}

.h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
}

.eyebrow {
  font-size: .8125rem;
  font-weight: 300;
  color: var(--ink-3);
  letter-spacing: .01em;
}

.prose { color: var(--ink-2); font-size: .9375rem; font-weight: 300; }

.sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-block-end: .875rem;
}
.sec__head--tight { margin-block-end: .625rem; }

/* ── الشريط العلوي ───────────────────────────────────────────────────────── */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem var(--pad);
  max-width: var(--wide);
  margin-inline: auto;
}

.brand { display: flex; align-items: center; gap: .5rem; }

.brand__mark {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brass);
}

.brand__name {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.bar__actions { display: flex; gap: .5rem; }

.icon-btn {
  display: grid;
  place-items: center;
  min-width: 2.375rem;
  height: 2.375rem;
  padding: 0 .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: .8125rem;
  font-weight: 400;
  transition: border-color .15s, color .15s;
}
.icon-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.icon-btn--wide { padding-inline: .875rem; }

.icon-btn__glyph { font-size: 1rem; line-height: 1; }

/* ── التبويبات ───────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 1.25rem;
  padding: 0 var(--pad);
  max-width: var(--wide);
  margin-inline: auto;
  border-block-end: 1px solid var(--line-soft);
}

.tab {
  position: relative;
  padding: .5rem 0 .75rem;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  transition: color .15s;
}
.tab:hover { color: var(--ink-2); }

.tab--on { color: var(--ink); }
.tab--on::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 2px;
  background: var(--green);
}

/* ── حال الاتصال ─────────────────────────────────────────────────────────── */

.wire {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: .5rem var(--pad);
  text-align: center;
  font-size: .8125rem;
  font-weight: 400;
}
.wire[data-tone="down"] { background: var(--danger-soft); color: var(--danger); }
.wire[data-tone="warn"] { background: var(--brass-soft); color: var(--brass); }
.wire[data-tone="back"] { background: var(--green-soft); color: var(--green-deep); }

/* ── التخطيط ─────────────────────────────────────────────────────────────── */

main {
  max-width: var(--wide);
  margin-inline: auto;
  padding: var(--gap) var(--pad) 3rem;
  display: grid;
  gap: clamp(1.75rem, 6vw, 2.75rem);
}

/* ── مَن أنت ─────────────────────────────────────────────────────────────── */

.me {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.me__who {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .375rem .75rem .375rem .625rem;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: none;
  transition: border-color .15s;
}
.me__who:hover { border-color: var(--green); }

.me__label { font-size: .75rem; font-weight: 300; color: var(--ink-3); }
.me__name { font-family: var(--display); font-size: 1rem; font-weight: 600; }

.chip {
  padding: .375rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--ink-2);
  transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--brass-2); color: var(--ink); }

.chip--points { color: var(--brass); font-variant-numeric: tabular-nums; }

/* ── ورد اليوم ───────────────────────────────────────────────────────────── */

.today { display: grid; gap: 1rem; }

.today .eyebrow { text-align: center; }

/* اللوح: أهمّ ما في الصفحة، فله وحده خيط النحاس في رأسه. */
.plate {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 7vw, 2.75rem) clamp(1rem, 5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}
.plate::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass-2), transparent);
}

.plate__slide { display: grid; gap: 1.5rem; }

.seg {
  display: grid;
  gap: .25rem;
  color: inherit;
  text-decoration: none;
}
.seg + .seg { border-block-start: 1px solid var(--line-soft); padding-block-start: 1.5rem; }

.seg__surah {
  font-family: var(--display);
  font-size: clamp(1.75rem, 8vw, 2.625rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.seg__range {
  font-size: clamp(1.5rem, 6.5vw, 2.125rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.seg__range small {
  font-size: .5em;
  font-weight: 300;
  color: var(--ink-3);
  padding-inline: .25em;
}

.seg__count {
  font-size: .8125rem;
  font-weight: 300;
  color: var(--ink-3);
}
.seg__tail { color: var(--brass); }

.seg:hover .seg__surah { color: var(--green); }

.plate--rest .seg__surah { color: var(--ink-2); }

/* ── زرّ التسجيل ─────────────────────────────────────────────────────────── */

.mark { display: grid; gap: .5rem; justify-items: center; }

.mark__btn {
  width: 100%;
  padding: .9375rem 1.5rem;
  border: 1px solid var(--green);
  border-radius: var(--r);
  background: var(--green);
  color: var(--on-green);
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  transition: background .18s var(--ease), color .18s, border-color .18s, transform .1s;
}

.mark__btn:hover { background: var(--green-deep); border-color: var(--green-deep); }
.mark__btn:active { transform: translateY(1px); }

.mark__btn--done {
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--green-deep);
}
.mark__btn--done:hover { background: var(--green-soft); border-color: var(--green-deep); color: var(--green-deep); }

.mark__btn:disabled { opacity: .5; cursor: not-allowed; }

.mark__note { font-size: .8125rem; font-weight: 300; color: var(--ink-3); text-align: center; }

/* ── التنقّل بين الأيام ──────────────────────────────────────────────────── */

.daynav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.daynav__step, .daynav__now {
  padding: .375rem .625rem;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: .8125rem;
  font-weight: 300;
  border-radius: var(--r-xs);
  transition: color .15s;
}
.daynav__step:hover, .daynav__now:hover { color: var(--green); }
.daynav__now { color: var(--brass); font-weight: 400; }

/* ── مقياس المصحف ────────────────────────────────────────────────────────── */

.scale { display: grid; gap: .75rem; }

.scale__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.scale__juz {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--brass);
}

.scale__rule {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 54px;
  padding-block-end: 1.25rem;
  position: relative;
}
.scale__rule::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 1.125rem;
  height: 1px;
  background: var(--line);
}

/* العمود غلافٌ لا يقصّ، كي ينزل رقم الجزء تحت المقياس؛ والقصّ على القضيب
   وحده، فيبقى امتلاء الجزء الحاليّ داخل حدوده. */
.juz {
  position: relative;
  flex: 1;
  display: flex;
  height: 62%;
  transition: height .3s var(--ease);
}
.juz--now { height: 100%; }

.juz__bar {
  position: relative;
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--surface-2);
  overflow: hidden;
}
.juz--done .juz__bar { background: var(--green); }
.juz--now .juz__bar { background: var(--brass-soft); }

.juz__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  background: var(--brass-2);
  transition: width .8s var(--ease);
}

.juz__tick {
  position: absolute;
  inset-block-start: calc(100% + .3rem);
  inset-inline-start: 50%;
  transform: translateX(50%);
  font-size: .625rem;
  font-weight: 300;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.scale__foot { font-size: .8125rem; font-weight: 300; color: var(--ink-3); }

/* ── مَن قرأ اليوم ───────────────────────────────────────────────────────── */

.unison__count { font-size: .875rem; font-weight: 300; color: var(--ink-2); margin-block-end: .75rem; }
.unison__count b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.unison__list { display: flex; flex-wrap: wrap; gap: .5rem; }

.who {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .875rem;
  font-weight: 300;
  color: var(--ink-2);
}
.who--read {
  background: var(--green-soft);
  border-color: transparent;
  color: var(--green-deep);
  font-weight: 400;
}
.who--me { box-shadow: 0 0 0 2px var(--brass-2); }
.who__tick { color: var(--green); font-size: .75rem; }

/* ── المتابعة ────────────────────────────────────────────────────────────── */

.track { display: grid; gap: 1.5rem; }

.mine__hint { font-size: .75rem; font-weight: 300; color: var(--ink-3); }

.mine__strip {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 3px;
}

.mine__cell {
  display: block;
  width: 100%;
  height: 36px;
  border: 0;
  padding: 0;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  position: relative;
  transition: transform .12s;
}
.mine__cell:hover { transform: translateY(-2px); }
.mine__cell--read   { background: var(--green); }
.mine__cell--missed { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger); }
.mine__cell--today  { background: var(--brass-soft); box-shadow: inset 0 0 0 1px var(--brass-2); }
.mine__cell--none   { background: var(--line-soft); cursor: default; }
.mine__cell--none:hover { transform: none; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-block-start: .625rem;
  font-size: .75rem;
  font-weight: 300;
  color: var(--ink-3);
}
.legend li { display: flex; align-items: center; gap: .375rem; }

.pip { width: .75rem; height: .75rem; border-radius: 3px; display: inline-block; }
.pip--read   { background: var(--green); }
.pip--missed { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger); }
.pip--today  { background: var(--brass-soft); box-shadow: inset 0 0 0 1px var(--brass-2); }

.behind__none {
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  font-size: .875rem;
  font-weight: 300;
  color: var(--ink-3);
  text-align: center;
}

.behind__list { display: grid; gap: .625rem; }

.pace {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem .75rem;
  align-items: baseline;
  padding: .625rem .875rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.pace--me { border-color: var(--brass-2); }

.pace__name { font-weight: 400; font-size: .9375rem; }
.pace__count {
  font-size: .8125rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  text-align: start;
}
.pace__count--behind { color: var(--danger); }
.pace__count small {
  display: block;
  font-size: .75rem;
  color: var(--ink-3);
}

.pace__track {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
}
.pace__fill { display: block; height: 100%; background: var(--green); border-radius: 2px; }

/* ── الصدارة ─────────────────────────────────────────────────────────────── */

.board { display: grid; gap: 1.25rem; }

.segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.segmented__btn {
  padding: .3125rem .8125rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: .8125rem;
  font-weight: 300;
  color: var(--ink-3);
  transition: background .15s, color .15s;
}
.segmented__btn--on { background: var(--green); color: var(--on-green); font-weight: 400; }

.board__status { font-size: .875rem; font-weight: 300; color: var(--ink-3); }
.board__status:empty { display: none; }

.crown { display: grid; gap: .75rem; }

.crown__label {
  font-family: var(--display);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--brass);
  letter-spacing: .02em;
}

.crown__list { display: grid; gap: .625rem; }

.crown__entry {
  display: grid;
  gap: .25rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--brass-2);
  border-radius: var(--r);
  background: var(--brass-soft);
}
.crown__entry .board__name { font-family: var(--display); font-size: 1.375rem; font-weight: 600; }
.crown__entry .board__points { font-size: 1rem; color: var(--brass); font-weight: 400; }

.board-list { display: grid; gap: .5rem; }

.board-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .25rem .75rem;
  align-items: baseline;
  padding: .75rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.board-row--me { border-color: var(--brass-2); }

.board__rank {
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
  font-weight: 300;
  color: var(--ink-3);
  min-width: 1.25rem;
}
.board__name { font-weight: 400; }
.board__points {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--green);
}
.board__former {
  display: block;
  font-size: .6875rem;
  font-weight: 300;
  color: var(--ink-3);
}
.board__detail {
  grid-column: 1 / -1;
  font-size: .75rem;
  font-weight: 300;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.crown__entry .board__detail { color: var(--ink-2); }

.board__entry--former { opacity: .72; }

/* قواعد النقاط */
.rules {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: .75rem 1rem;
  background: var(--surface);
  font-size: .8125rem;
  font-weight: 300;
}
.rules summary { cursor: pointer; color: var(--ink-2); }
.rules__list { display: grid; gap: .25rem; margin-block: .75rem 0; }
.rules__list li { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-2); }
.rules__list b { color: var(--green); font-weight: 500; font-variant-numeric: tabular-nums; }
.rules__note { margin-block-start: .625rem; color: var(--ink-3); font-size: .75rem; }

/* ── الذيل ───────────────────────────────────────────────────────────────── */

.foot {
  max-width: var(--wide);
  margin-inline: auto;
  padding: 1.5rem var(--pad) 2.5rem;
  border-block-start: 1px solid var(--line-soft);
  font-size: .8125rem;
  font-weight: 300;
  color: var(--ink-3);
  text-align: center;
}

/* ── الأوراق المنبثقة ────────────────────────────────────────────────────── */

.sheet {
  width: min(32rem, 100%);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
}
.sheet::backdrop { background: #06120Fbb; backdrop-filter: blur(2px); }

.sheet__body {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 5vw, 1.75rem);
  max-height: min(85vh, 44rem);
  overflow-y: auto;
}

.sheet__actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}

.field { display: grid; gap: .3125rem; }
.field__label { font-size: .875rem; font-weight: 400; }
.field__hint { font-size: .75rem; font-weight: 300; color: var(--ink-3); line-height: 1.5; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.input {
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: .9375rem;
  font-weight: 300;
  transition: border-color .15s;
}
.input:focus { border-color: var(--green); }

.note {
  padding: .625rem .875rem;
  border-radius: var(--r-sm);
  background: var(--green-soft);
  color: var(--green-deep);
  font-size: .8125rem;
  font-weight: 300;
}

.error {
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: .8125rem;
  font-weight: 400;
}

.btn {
  padding: .5625rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .875rem;
  font-weight: 400;
  transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--ink-3); }

.btn--quiet { border-color: transparent; background: none; color: var(--ink-2); }
.btn--quiet:hover { color: var(--ink); border-color: var(--line); }

.btn--solid {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-green);
  font-weight: 500;
}
.btn--solid:hover { background: var(--green-deep); border-color: var(--green-deep); }

.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--paper);
}

.danger {
  display: grid;
  gap: .5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.danger__label { font-family: var(--display); font-size: .9375rem; font-weight: 600; }
.danger__note { font-size: .75rem; font-weight: 300; color: var(--ink-3); line-height: 1.6; }

.readers { display: grid; gap: .375rem; }
.readers__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .375rem .625rem;
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: .875rem;
  font-weight: 300;
}
.readers__drop {
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: .75rem;
  padding: .25rem .5rem;
  border-radius: var(--r-xs);
  transition: color .15s, background .15s;
}
.readers__drop:hover { color: var(--danger); background: var(--danger-soft); }
.readers__drop--armed { color: var(--danger); background: var(--danger-soft); font-weight: 400; }
.readers__none { font-size: .8125rem; font-weight: 300; color: var(--ink-3); }

/* ── مَن أنت؟ ────────────────────────────────────────────────────────────── */

.sheet--wizard { width: min(28rem, 100%); }
.sheet--wizard .sheet__body { gap: .875rem; text-align: center; }

.wizard__brand {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--brass);
}

.wizard__choices { display: grid; gap: .625rem; margin-block-start: .5rem; }

.choice {
  display: grid;
  gap: .125rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-align: start;
  transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--green); background: var(--green-soft); }
.choice:disabled { opacity: .45; cursor: not-allowed; }
.choice:disabled:hover { border-color: var(--line); background: var(--surface); }

.choice__title { font-family: var(--display); font-size: 1.0625rem; font-weight: 600; }
.choice__note { font-size: .8125rem; font-weight: 300; color: var(--ink-3); }

.wizard__step { display: grid; gap: 1rem; text-align: start; }

.sheet__dismiss {
  justify-self: center;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: .8125rem;
  font-weight: 300;
  padding: .25rem .5rem;
}
.sheet__dismiss:hover { color: var(--ink); }

/* ── الاحتفال ────────────────────────────────────────────────────────────── */

.bless, .trophy {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: #06120Fd9;
  backdrop-filter: blur(3px);
  animation: fade .3s var(--ease);
}
.bless--out, .trophy--out { animation: fade .45s var(--ease) reverse forwards; }

.bless__sky, .trophy__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bless__card, .trophy__card {
  position: relative;
  display: grid;
  gap: .875rem;
  justify-items: center;
  padding: 2rem 2.25rem;
  border: 1px solid var(--brass-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
  animation: rise .45s var(--ease);
}

.bless__mark { font-size: 2rem; line-height: 1; color: var(--brass); }
.bless__text {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}

.trophy__card { width: min(26rem, 100%); max-height: 84vh; overflow-y: auto; }
.trophy__cup { width: 3.5rem; color: var(--brass-2); }
.trophy__cup svg { width: 100%; height: auto; fill: currentColor; }
.trophy__title { font-family: var(--display); font-size: 1.375rem; font-weight: 700; }
.trophy__board { display: grid; gap: .625rem; width: 100%; }
.trophy__label {
  font-family: var(--display);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--brass);
}
.trophy__champions { display: grid; gap: .5rem; }
.trophy__champion {
  padding: .75rem;
  border-radius: var(--r-sm);
  background: var(--brass-soft);
}
.trophy__champion-name { font-family: var(--display); font-size: 1.125rem; font-weight: 600; }
.trophy__champion-points { font-size: .875rem; color: var(--brass); }
.trophy__list, .trophy__own ol { display: grid; gap: .375rem; }
.trophy-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .625rem;
  align-items: baseline;
  padding: .4375rem .625rem;
  border-radius: var(--r-xs);
  background: var(--paper);
  font-size: .875rem;
  text-align: start;
}
.trophy__own { display: grid; gap: .375rem; margin-block-start: .5rem; }
.trophy__dismiss { margin-block-start: .25rem; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── التنبيه العابر ──────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline: 50%;
  transform: translateX(50%) translateY(1rem);
  width: max-content;
  max-width: calc(100vw - 2rem);
  z-index: 70;
  padding: .625rem 1rem;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: .875rem;
  font-weight: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s var(--ease);
}
.toast--on { opacity: 1; transform: translateX(50%) translateY(0); }

/* ── الشاشات الواسعة ─────────────────────────────────────────────────────── */

@media (min-width: 46rem) {
  .scale__rule { height: 68px; gap: 3px; }
  .mine__cell { height: 42px; }
}

/* ── سكون الحركة ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}