/* ==========================================================================
   مُعرِب — ورقة الأنماط
   تصميم داكن/فاتح بوحدات oklch، حاويات استعلامية، انتقالات View Transitions
   ========================================================================== */

@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  color-scheme: dark;
  --f-ui: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, "Noto Naskh Arabic", sans-serif;
  --f-display: "Reem Kufi", "Readex Pro", "Segoe UI", system-ui, sans-serif;
  --f-text: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", "Times New Roman", serif;

  --bg:      oklch(15.5% 0.022 255);
  --bg-2:    oklch(19% 0.026 255);
  --surface: oklch(22.5% 0.028 255 / 0.72);
  --surface-solid: oklch(21% 0.026 255);
  --line:    oklch(60% 0.03 255 / 0.22);
  --line-2:  oklch(70% 0.04 255 / 0.35);
  --ink:     oklch(96% 0.008 255);
  --muted:   oklch(74% 0.018 255);
  --faint:   oklch(60% 0.02 255);
  --accent:  oklch(80% 0.13 172);
  --accent-d:oklch(62% 0.11 172);
  --gold:    oklch(84% 0.11 85);
  --ok:      oklch(78% 0.15 155);
  --bad:     oklch(70% 0.17 22);
  --shadow:  0 1px 2px oklch(0% 0 0 / .35), 0 12px 34px -12px oklch(0% 0 0 / .55);
  --btn-ink: oklch(17% 0.03 255);
  --btn-a: oklch(82% 0.13 172); --btn-b: oklch(86% 0.11 128);
  --r-lg: 22px; --r-md: 16px; --r-sm: 11px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
}

:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } }

/* لوحة الوضع الفاتح */
:root[data-theme="light"] {
  --bg:      oklch(97.4% 0.010 95);
  --bg-2:    oklch(99.5% 0.004 95);
  --surface: oklch(100% 0 0 / 0.78);
  --surface-solid: oklch(100% 0 0);
  --line:    oklch(55% 0.02 95 / 0.20);
  --line-2:  oklch(45% 0.03 95 / 0.32);
  --ink:     oklch(24% 0.02 255);
  --muted:   oklch(45% 0.02 255);
  --faint:   oklch(58% 0.02 255);
  --accent:  oklch(48% 0.11 172);
  --accent-d:oklch(38% 0.09 172);
  --gold:    oklch(52% 0.11 70);
  --ok:      oklch(52% 0.14 155);
  --bad:     oklch(52% 0.17 25);
  --shadow:  0 1px 2px oklch(60% 0.03 95 / .18), 0 14px 34px -16px oklch(50% 0.04 95 / .35);
  --btn-ink: oklch(99% 0 0);
  --btn-a: oklch(56% 0.13 172); --btn-b: oklch(48% 0.12 196);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:      oklch(97.4% 0.010 95);
    --bg-2:    oklch(99.5% 0.004 95);
    --surface: oklch(100% 0 0 / 0.78);
    --surface-solid: oklch(100% 0 0);
    --line:    oklch(55% 0.02 95 / 0.20);
    --line-2:  oklch(45% 0.03 95 / 0.32);
    --ink:     oklch(24% 0.02 255);
    --muted:   oklch(45% 0.02 255);
    --faint:   oklch(58% 0.02 255);
    --accent:  oklch(48% 0.11 172);
    --accent-d:oklch(38% 0.09 172);
    --gold:    oklch(52% 0.11 70);
    --ok:      oklch(52% 0.14 155);
    --bad:     oklch(52% 0.17 25);
    --shadow:  0 1px 2px oklch(60% 0.03 95 / .18), 0 14px 34px -16px oklch(50% 0.04 95 / .35);
  --btn-ink: oklch(99% 0 0);
  --btn-a: oklch(56% 0.13 172); --btn-b: oklch(48% 0.12 196);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--f-ui);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 88% -8%, oklch(from var(--accent) l c h / .18), transparent 62%),
    radial-gradient(46rem 34rem at 6% 108%, oklch(from var(--gold) l c h / .14), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 45%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23808a99' stroke-width='.7' stroke-opacity='.30'%3E%3Cpath d='M60 6 82 28 60 50 38 28Z'/%3E%3Cpath d='M60 70 82 92 60 114 38 92Z'/%3E%3Cpath d='M0 60 22 38 44 60 22 82Z'/%3E%3Cpath d='M76 60 98 38 120 60 98 82Z'/%3E%3Cpath d='M22 28h38M22 92h38M60 50v20'/%3E%3Ccircle cx='60' cy='60' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 132px 132px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 5%, transparent 72%);
}

h1,h2,h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.35; margin: 0; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------ الهيكل ------------------------------ */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.wrap { width: min(100% - 2rem, 68rem); margin-inline: auto; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 0; padding-top: max(.7rem, env(safe-area-inset-top));
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--f-display); font-size: 1.22rem; font-weight: 700; }
.brand .mark {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(145deg, var(--accent), color-mix(in oklab, var(--gold) 55%, var(--accent)));
  color: oklch(18% 0.03 255); font-weight: 700; font-size: 1.02rem;
  box-shadow: 0 6px 18px -8px oklch(from var(--accent) l c h / .8);
}
.spacer { flex: 1; }

.iconbtn {
  inline-size: 40px; block-size: 40px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; transition: .18s var(--ease); font-size: 1.05rem;
}
.iconbtn:hover { border-color: var(--line-2); transform: translateY(-1px); }
.iconbtn:active { transform: scale(.94); }

main { flex: 1; padding-block: 1.4rem 6.5rem; }
.screen[hidden] { display: none !important; }

/* ------------------------------ الرئيسية ------------------------------ */
.hero { padding: 1.6rem 0 .6rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; letter-spacing: .02em;
  color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 42%, transparent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  padding: .28rem .7rem; border-radius: 999px; margin-bottom: .9rem;
}
.hero h1 { font-size: clamp(2rem, 7vw, 3.3rem); text-wrap: balance; }
.hero h1 .grad {
  background: linear-gradient(105deg, var(--accent), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { color: var(--muted); font-size: clamp(.98rem, 2.6vw, 1.1rem); margin-top: .7rem; max-width: 46ch; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1.5rem 0 .4rem; }
.stat {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md);
  padding: .85rem .8rem; text-align: center; backdrop-filter: blur(8px);
}
.stat b { display: block; font-family: var(--f-display); font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.stat span { font-size: .74rem; color: var(--faint); }

.sect-title { display: flex; align-items: baseline; gap: .6rem; margin: 2rem 0 .9rem; }
.sect-title h2 { font-size: 1.22rem; }
.sect-title i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); font-style: normal; }

.babs { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .babs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .babs { grid-template-columns: repeat(3, 1fr); } }

.bab {
  position: relative; overflow: hidden; text-align: start; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg);
  padding: 1.05rem 1.1rem; display: grid; gap: .35rem;
  backdrop-filter: blur(10px); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.bab:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }
.bab:active { transform: translateY(-1px) scale(.995); }
.bab .row { display: flex; align-items: center; gap: .6rem; }
.bab .ico {
  inline-size: 38px; block-size: 38px; display: grid; place-items: center; border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); font-size: 1rem;
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.bab h3 { font-size: 1.06rem; }
.bab small { color: var(--faint); font-size: .8rem; }
.bab .bar { height: 6px; border-radius: 99px; background: color-mix(in oklab, var(--ink) 10%, transparent); overflow: hidden; margin-top: .55rem; }
.bab .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: inline-size .6s var(--ease); }
.bab .meta { display: flex; justify-content: space-between; font-size: .76rem; color: var(--faint); margin-top: .3rem; }
.bab[data-done="1"]::after {
  content: "✓"; position: absolute; inset-block-start: .8rem; inset-inline-start: .9rem;
  color: var(--ok); font-size: .95rem;
}

/* ------------------------------ التمرين ------------------------------ */
.screen#s-play { display: flex; flex-direction: column; }
@media (min-width: 48rem) {
  .screen#s-play { justify-content: center; min-height: calc(100dvh - 12rem); }
}
.playhead { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.playhead h2 { font-size: 1.1rem; }
.playhead small { color: var(--faint); font-size: .78rem; display: block; }
.ring { --p: 0; inline-size: 46px; block-size: 46px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in oklab, var(--ink) 12%, transparent) 0);
  transition: --p .5s var(--ease);
}
.ring b { inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: .74rem; font-family: var(--f-display); }

.card {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg);
  padding: 1.1rem; backdrop-filter: blur(10px); box-shadow: var(--shadow);
  container-type: inline-size;
}
.card + .card { margin-top: .9rem; }
.card .src { color: var(--gold); font-size: .78rem; display: flex; align-items: center; gap: .4rem; }

.sentence {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  padding: 1.5rem .4rem 1.1rem; direction: rtl;
}
.word {
  position: relative; cursor: pointer; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: color-mix(in oklab, var(--surface-solid) 70%, transparent);
  padding: .55rem .85rem .5rem; display: grid; gap: .18rem; justify-items: center;
  font-family: var(--f-text); font-size: clamp(1.5rem, 6.5vw, 2.15rem); line-height: 1.5;
  transition: transform .22s var(--ease-back), border-color .2s, background .2s, box-shadow .2s;
  touch-action: manipulation;
}
@container (min-width: 34rem) { .word { font-size: 2.1rem; } }
.word:hover { border-color: var(--accent); }
.word.sel {
  border-color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent), var(--shadow);
  transform: translateY(-3px);
}
.word.sel::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spin), var(--accent), var(--gold), var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 4.5s linear infinite;
}
@keyframes spin { to { --spin: 360deg; } }
.word.over { border-color: var(--gold); transform: translateY(-3px) scale(1.03); }
.word .tag {
  font-family: var(--f-ui); font-size: .68rem; line-height: 1.6; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  padding: 0 .5rem; border-radius: 99px; white-space: nowrap; max-width: 100%;
}
.word .tag.empty { color: var(--faint); background: transparent; border-style: dashed; border-color: var(--line); }
.word.ok { border-color: var(--ok); background: color-mix(in oklab, var(--ok) 13%, transparent); }
.word.ok .tag { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, transparent); background: color-mix(in oklab, var(--ok) 14%, transparent); }
.word.no { border-color: var(--bad); background: color-mix(in oklab, var(--bad) 12%, transparent); animation: shake .4s var(--ease); }
.word.no .tag { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 40%, transparent); background: color-mix(in oklab, var(--bad) 14%, transparent); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.hintline { text-align: center; color: var(--faint); font-size: .82rem; padding-bottom: .3rem; min-height: 1.6em; }

.roles { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding-top: .3rem; }
.role {
  cursor: pointer; border: 1px solid var(--line); border-radius: 99px; padding: .42rem .9rem;
  background: color-mix(in oklab, var(--surface-solid) 60%, transparent); font-size: .88rem;
  transition: transform .2s var(--ease-back), border-color .2s, background .2s, opacity .2s;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.role:hover { border-color: var(--accent); transform: translateY(-2px); }
.role:active { transform: scale(.95); }
.role[data-used="1"] { opacity: .34; }
.role.drag { opacity: .3; }
.dragghost {
  position: fixed; z-index: 90; pointer-events: none; padding: .42rem .9rem; border-radius: 99px;
  background: var(--btn-a); color: var(--btn-ink); font-size: .88rem; font-family: var(--f-ui);
  box-shadow: 0 14px 30px -10px oklch(0% 0 0 / .6); transform: translate(-50%, -140%);
}

.actions { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 62%, transparent); }
.actions .inner { width: min(100% , 40rem); margin-inline: auto; display: flex; gap: .55rem; }
.btn {
  flex: 1; cursor: pointer; border-radius: 14px; padding: .82rem 1rem; border: 1px solid var(--line-2);
  background: var(--surface-solid); font-weight: 500; transition: .2s var(--ease); font-size: .95rem;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary {
  flex: 2; border: 0; color: var(--btn-ink); font-weight: 600;
  background: linear-gradient(120deg, var(--btn-a), var(--btn-b));
  box-shadow: 0 10px 26px -12px oklch(from var(--accent) l c h / .9);
}
.btn.ghost { flex: 0 0 auto; padding-inline: .95rem; }

/* ------------------------------ لوحات منبثقة ------------------------------ */
dialog {
  border: 0; padding: 0; background: transparent; color: var(--ink); max-width: 100%; max-height: 100dvh;
  margin-inline: auto; margin-block: auto;
}
dialog { opacity: 0; transition: opacity .26s var(--ease), overlay .26s allow-discrete, display .26s allow-discrete; }
dialog[open] { opacity: 1; }
@starting-style { dialog[open] { opacity: 0; } }
@media (max-width: 41.99rem) { dialog { margin-block: auto 0; } }
dialog::backdrop { background: oklch(8% 0.02 255 / .62); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .26s var(--ease), overlay .26s allow-discrete, display .26s allow-discrete; }
dialog[open]::backdrop { opacity: 1; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }
.sheet {
  width: min(100vw, 42rem); max-height: 88dvh; overflow: auto; overscroll-behavior: contain;
  background: var(--surface-solid); border: 1px solid var(--line-2);
  border-radius: 26px 26px 0 0; padding: 1.1rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 60px -20px oklch(0% 0 0 / .6);
}
@media (min-width: 42rem) { .sheet { border-radius: 26px; } }
dialog[open] .sheet { animation: rise .34s var(--ease); }
@keyframes rise { from { transform: translateY(24px); opacity: 0 } }
.grab { inline-size: 44px; block-size: 5px; border-radius: 99px; background: var(--line-2); margin: 0 auto .9rem; }
.sheet h3 { font-size: 1.12rem; margin-bottom: .2rem; }
.sheet .lead { color: var(--muted); font-size: .88rem; margin-bottom: .9rem; }

.irab-row {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  padding: .75rem .2rem; border-block-end: 1px dashed var(--line);
}
.irab-row:last-of-type { border-block-end: 0; }
.irab-row .w { font-family: var(--f-text); font-size: 1.5rem; color: var(--gold); min-inline-size: 4.5rem; text-align: center; }
.irab-row .d { font-size: .88rem; color: var(--muted); }
.irab-row .d b { color: var(--ink); font-weight: 600; display: block; font-size: .92rem; }

.note { border-inline-start: 3px solid var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent);
  padding: .7rem .85rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .88rem; color: var(--muted); margin-top: .9rem; }
.rulebox { border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: .8rem .9rem; font-size: .89rem; color: var(--muted); }

.glossary { display: grid; gap: .5rem; }
.gl { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .6rem .75rem; }
.gl b { color: var(--accent); font-size: .92rem; }
.gl span { display: block; color: var(--muted); font-size: .84rem; }

.toast {
  position: fixed; inset-block-end: calc(5.6rem + env(safe-area-inset-bottom)); inset-inline: 0; z-index: 60;
  display: grid; place-items: center; pointer-events: none;
}
.toast b {
  background: var(--surface-solid); border: 1px solid var(--line-2); border-radius: 99px;
  padding: .5rem 1rem; font-size: .86rem; font-weight: 500; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(8px); transition: .25s var(--ease);
}
.toast.on b { opacity: 1; transform: none; }
.toast.ok b { border-color: var(--ok); color: var(--ok); }
.toast.no b { border-color: var(--bad); color: var(--bad); }

/* ------------------------------ النتيجة ------------------------------ */
.done { text-align: center; padding: 2.4rem 1rem; }
.done .big { font-family: var(--f-display); font-size: clamp(2.6rem, 12vw, 4rem); background: linear-gradient(120deg, var(--btn-a), var(--btn-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.done p { color: var(--muted); }
.done .btns { display: flex; gap: .6rem; justify-content: center; margin-top: 1.6rem; flex-wrap: wrap; }
.done .btn { flex: 0 1 auto; padding-inline: 1.4rem; }

.settings { display: grid; gap: .2rem; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .2rem; border-block-end: 1px dashed var(--line); }
.srow:last-child { border: 0; }
.srow span { font-size: .92rem; }
.srow small { display: block; color: var(--faint); font-size: .76rem; }
.switch { inline-size: 52px; block-size: 30px; border-radius: 99px; border: 1px solid var(--line-2); background: color-mix(in oklab, var(--ink) 8%, transparent); position: relative; cursor: pointer; flex: none; transition: .22s var(--ease); }
.switch::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--faint); transition: .24s var(--ease-back); }
.switch[aria-checked="true"] { background: color-mix(in oklab, var(--accent) 30%, transparent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { inset-inline-start: 27px; background: var(--accent); }

.foot { text-align: center; color: var(--faint); font-size: .76rem; padding: 1.4rem 1rem 0; }
.foot a { color: var(--muted); }

/* حركات الدخول */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bab { animation: fade-up linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
.screen > * { animation: fade-up .45s var(--ease) both; }

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

/* View Transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .34s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px) scale(.99) } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px) scale(.995) } }