/* ===== لوحة الألوان والخطوط ===== */
:root{
  --emerald:#0E3B2E;
  --emerald-2:#1B5E45;
  --ivory:#F4E9D0;
  --paper:#FBF4E3;
  --gold:#C9A227;
  --gold-soft:rgba(201,162,39,.55);
  --gold-faint:rgba(201,162,39,.28);
  --brick:#A63A2E;
  --shadow:0 10px 26px rgba(14,59,46,.08);
  --shadow-sm:0 4px 14px rgba(14,59,46,.08);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background-color:var(--ivory);
  color:var(--emerald);
  min-height:100dvh;
  overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* نقش النجمة الثمانية ٥٪ */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%230E3B2E' stroke-opacity='0.055' stroke-width='1.3'><rect x='40' y='40' width='60' height='60'/><rect x='40' y='40' width='60' height='60' transform='rotate(45 70 70)'/><circle cx='70' cy='70' r='8'/></g></svg>");
  background-size:140px 140px;
  background-repeat:repeat;
}

.app{
  position:relative;
  z-index:1;
  max-width:560px;
  margin:0 auto;
  padding:22px 18px 52px;
  min-height:100dvh;
}
@media (min-width:1024px){
  .app{max-width:660px; padding-top:44px}
}

.hidden{display:none !important}

.screen{animation:screenIn .3s ease both}
@keyframes screenIn{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}

button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:14px}

/* ===== الماسكوت نور ===== */
.nour{width:80px; height:80px; display:block; margin:0 auto}
.nour svg{width:100%; height:100%; display:block; overflow:visible}
.nour-lg{width:88px; height:88px}
.nour[data-state="idle"] svg{animation:nourFloat 4.5s ease-in-out infinite}
.nour[data-state="correct"] svg{animation:nourNod .55s ease}
.nour[data-state="think"] svg{animation:nourTilt 3.2s ease-in-out infinite}
.nour[data-state="celebrate"] svg{animation:nourBounce 1.5s ease-in-out infinite}
@keyframes nourFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes nourNod{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(4px) rotate(-4deg)}}
@keyframes nourTilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes nourBounce{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-8px) scale(1.04)}60%{transform:translateY(0) scale(.98)}}

.nour-row{display:flex; flex-direction:column; align-items:center; gap:6px; margin:20px 0 16px}
.nour-hint{margin:0; font-size:12.5px; color:var(--emerald-2); opacity:.75}

/* ===== الغلاف ===== */
.hero{text-align:center; padding:6px 0 4px}
.app-title{
  font-family:'Noto Naskh Arabic','Tajawal',serif;
  font-size:34px; font-weight:700; line-height:1.35;
  margin:6px 0 4px; color:var(--emerald);
}
.app-sub{margin:0; font-size:15px; line-height:1.7; color:var(--emerald-2)}

/* ===== عناوين الأقسام ===== */
.section-head{display:flex; align-items:center; gap:10px; margin:26px 0 12px}
.section-head h2{
  font-family:'Noto Naskh Arabic',serif;
  font-size:20px; font-weight:700; margin:0; color:var(--emerald);
}
.section-head .rule{flex:1; height:1px; background:var(--gold-soft); opacity:.65}
.section-head .orn{color:var(--gold); font-size:12px; line-height:1}

/* ===== البطاقات ===== */
.card{
  background:var(--paper);
  border:1px solid var(--gold-soft);
  border-radius:20px;
  box-shadow:var(--shadow-sm);
}

/* ===== بطاقات الدرجات ===== */
.levels{display:flex; flex-direction:column; gap:12px}

.level-card{
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:right; cursor:pointer;
  background:var(--paper);
  border:1px solid var(--gold-soft);
  border-radius:18px;
  padding:15px 16px;
  color:var(--emerald);
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  user-select:none; -webkit-user-select:none;
}
.level-card:hover{transform:translateY(-2px); border-color:var(--gold); box-shadow:var(--shadow); background:#FFFBF0}
.level-card:active{transform:scale(.99)}

.level-badge{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-soft);
  background:rgba(201,162,39,.12);
  font-family:'Noto Naskh Arabic',serif;
  font-size:18px; font-weight:700; color:var(--emerald);
}
.level-body{display:flex; flex-direction:column; gap:7px; flex:1; min-width:0}
.level-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.level-name{font-size:17px; font-weight:700; color:var(--emerald)}
.level-meta{font-size:12.5px; color:var(--emerald-2); opacity:.9; line-height:1.5}
.chev{flex:none; color:var(--gold); opacity:.9}

.chip{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; line-height:1;
  padding:5px 9px; border-radius:99px;
  border:1px solid var(--gold-faint);
  background:rgba(201,162,39,.12);
  color:#7A6420;
  white-space:nowrap;
}
.chip-easy{background:rgba(27,94,69,.10); border-color:rgba(27,94,69,.25); color:var(--emerald-2)}
.chip-medium{background:rgba(201,162,39,.16); border-color:rgba(201,162,39,.4); color:#7A6420}
.chip-hard{background:var(--emerald); border-color:var(--emerald); color:var(--ivory)}
.chip-bad{background:rgba(166,58,46,.12); border-color:rgba(166,58,46,.35); color:var(--brick)}

.bank-note{margin:10px 2px 0; font-size:12.5px; color:var(--emerald-2); opacity:.8; text-align:center}

/* ===== أشرطة التقدم ===== */
.bar{display:block; height:7px; border-radius:99px; background:rgba(14,59,46,.10); overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:var(--emerald-2); transition:width .35s ease}
.level-bar{width:100%}
.bar-lg{height:9px}

/* ===== بطاقة النصيحة ===== */
.tip-card{padding:18px 18px 16px}
.tip-title{
  font-family:'Noto Naskh Arabic',serif;
  font-size:21px; font-weight:700; color:var(--emerald);
  margin:0 0 10px; line-height:1.5;
}
.tip-lines{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.tip-lines li{
  position:relative;
  padding-inline-start:18px;
  font-size:14.5px; line-height:1.75; color:var(--emerald-2);
}
.tip-lines li::before{
  content:"";
  position:absolute;
  inset-inline-start:3px; top:9px;
  width:6px; height:6px;
  background:var(--gold);
  transform:rotate(45deg);
  border-radius:1px;
  opacity:.85;
}
.tip-ref{
  margin:12px 0 0; padding-top:10px;
  border-top:1px dashed var(--gold-faint);
  font-family:'Noto Naskh Arabic',serif;
  font-size:14px; line-height:1.7; color:#7A6420;
}

.tips-list{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.tip-card.highlighted{
  border-color:var(--gold);
  background:#FFF9E8;
  box-shadow:0 0 0 2px rgba(201,162,39,.35), var(--shadow);
  animation:tipPop .35s ease;
}
@keyframes tipPop{from{transform:scale(.985)}to{transform:scale(1)}}
.tip-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.tip-num{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-soft);
  background:rgba(201,162,39,.12);
  font-size:13px; font-weight:700; color:#7A6420;
}
.tip-head .tip-title{margin:0}

/* ===== الأزرار ===== */
.btn{
  font-weight:700; font-size:16px;
  min-height:52px; padding:14px 20px; border-radius:16px;
  border:1px solid transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
.btn:active{transform:scale(.985)}
.btn-block{display:flex; width:100%}
.btn-primary{
  background:var(--emerald); color:var(--ivory);
  border-color:var(--emerald);
  box-shadow:0 8px 18px rgba(14,59,46,.18);
}
.btn-primary:hover:not(:disabled){background:#0B3126}
.btn-primary:disabled{
  background:#DCD1B6; color:#8C8265; border-color:#DCD1B6;
  box-shadow:none; cursor:not-allowed; transform:none;
}
.btn-ghost{
  background:transparent; color:var(--emerald);
  border-color:var(--gold-soft);
}
.btn-ghost:hover{background:rgba(201,162,39,.10)}
.btn-danger-ghost{
  background:transparent; color:var(--brick);
  border-color:rgba(166,58,46,.45);
}
.btn-danger-ghost:hover{background:rgba(166,58,46,.08)}

.icon-btn{
  flex:none; width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--emerald);
  border:1px solid var(--gold-soft); cursor:pointer;
  transition:background-color .18s ease, transform .12s ease;
}
.icon-btn:hover{background:rgba(201,162,39,.12)}
.icon-btn:active{transform:scale(.94)}

/* ===== شاشة الجولة ===== */
.quiz-top{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.quiz-progress{flex:1; min-width:0}
.qp-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px}
.qp-row #qCounter{font-size:14px; font-weight:700; color:var(--emerald-2)}
.qp-row .chip{font-size:11px; padding:4px 8px}

.question-card{
  position:relative;
  border:1px solid var(--gold);
  border-radius:clamp(58px,17vw,86px) clamp(58px,17vw,86px) 20px 20px;
  padding:42px 22px 28px;
  text-align:center;
  background:var(--paper);
  box-shadow:var(--shadow);
}
.question-card::before{
  content:"";
  position:absolute; top:18px; left:50%;
  width:9px; height:9px; margin-left:-4.5px;
  background:var(--gold);
  transform:rotate(45deg);
  border-radius:1px;
  opacity:.8;
}
.q-text{
  font-family:'Noto Naskh Arabic',serif;
  font-size:clamp(20px,5.4vw,24px);
  font-weight:600;
  line-height:1.85;
  color:var(--emerald);
  margin:0;
}

.options{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.option{
  display:flex; align-items:center; gap:12px;
  width:100%; min-height:56px; text-align:right;
  background:var(--paper); color:var(--emerald);
  border:1px solid var(--gold-faint);
  border-radius:16px;
  padding:13px 15px;
  font-size:16px; font-weight:600; line-height:1.55;
  cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease, transform .12s ease;
  animation:optIn .24s ease both;
  user-select:none; -webkit-user-select:none;
}
@keyframes optIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.option:active{transform:scale(.995)}
.option:hover:not(:disabled){border-color:var(--gold); background:#FFFAEC}
.option:disabled{cursor:default}
.option .letter{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-soft);
  font-size:13px; font-weight:700; color:var(--emerald-2);
  background:rgba(201,162,39,.08);
}
.option-text{flex:1; min-width:0}

.option.muted{opacity:.5}
.option.correct{
  background:rgba(27,94,69,.13);
  border-color:var(--emerald-2);
  color:var(--emerald);
  opacity:1;
}
.option.correct .letter{
  background:var(--emerald-2); border-color:var(--emerald-2); color:var(--ivory);
}
.option.wrong{
  background:rgba(166,58,46,.11);
  border-color:var(--brick);
  color:var(--brick);
  opacity:1;
}
.option.wrong .letter{background:var(--brick); border-color:var(--brick); color:#FFF6F3}

.feedback{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:14px; padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--gold-faint);
  border-inline-start:3px solid var(--gold);
  background:rgba(201,162,39,.09);
  animation:fbIn .25s ease both;
}
@keyframes fbIn{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.feedback.ok{background:rgba(27,94,69,.09); border-inline-start-color:var(--emerald-2)}
.feedback.bad{background:rgba(166,58,46,.07); border-inline-start-color:var(--brick)}
.feedback .nour{width:40px; height:40px; margin:0; flex:none}
.fb-body{flex:1; min-width:0}
.fb-body strong{display:block; font-size:14.5px; color:var(--emerald); margin-bottom:2px}
.feedback.bad .fb-body strong{color:var(--brick)}
.fb-correct{display:block; font-size:13px; color:var(--emerald-2); margin-bottom:2px}
.fb-why{
  margin:4px 0 0;
  font-family:'Noto Naskh Arabic',serif;
  font-size:13.5px; line-height:1.7; color:#6E5C22;
}

#nextBtn{margin-top:18px}

/* ===== شاشة النتيجة ===== */
.result-top{text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:8px}
.ring-wrap{position:relative; width:152px; height:152px; margin:0 auto 4px}
.ring-svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:var(--gold-faint); stroke-width:9}
.ring-fg{
  fill:none; stroke:var(--emerald); stroke-width:9; stroke-linecap:round;
  transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1);
}
.ring-label{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.ring-label b{
  font-family:'Noto Naskh Arabic',serif;
  font-size:32px; font-weight:700; color:var(--emerald); line-height:1;
}
.ring-label span{font-size:12px; color:var(--emerald-2); opacity:.8}
.result-title{
  font-family:'Noto Naskh Arabic',serif;
  font-size:22px; font-weight:700; margin:4px 0 0; color:var(--emerald); line-height:1.5;
}
.result-sub{margin:0; font-size:14px; line-height:1.7; color:var(--emerald-2); max-width:34ch}

.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--gold-faint);
  border:1px solid var(--gold-faint); border-radius:16px; overflow:hidden;
  margin-top:20px;
}
.stat{background:var(--paper); padding:14px 6px; text-align:center}
.stat b{
  display:block; font-family:'Noto Naskh Arabic',serif;
  font-size:22px; font-weight:700; color:var(--emerald); line-height:1.35;
}
.stat span{font-size:12px; color:var(--emerald-2)}

.review{margin-top:18px; overflow:hidden; padding:0}
.review summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px;
  font-size:15px; font-weight:700; color:var(--emerald);
  user-select:none; -webkit-user-select:none;
}
.review summary::-webkit-details-marker{display:none}
.review summary > span{display:flex; align-items:center; gap:8px}
.chev-down{color:var(--gold); transition:transform .22s ease}
.review[open] .chev-down{transform:rotate(180deg)}

.review-item{padding:14px 16px; border-top:1px solid var(--gold-faint)}
.review-q{
  font-family:'Noto Naskh Arabic',serif;
  font-size:16.5px; font-weight:600; line-height:1.7; margin:0 0 8px; color:var(--emerald);
}
.review-line{font-size:13.5px; line-height:1.7; margin:3px 0}
.review-line.bad{color:var(--brick)}
.review-line.good{color:var(--emerald-2)}
.review-why{
  margin:7px 0 0; padding-top:7px;
  border-top:1px dashed var(--gold-faint);
  font-family:'Noto Naskh Arabic',serif;
  font-size:13px; line-height:1.65; color:#6E5C22;
}
.perfect-note{
  padding:18px 16px; text-align:center;
  font-family:'Noto Naskh Arabic',serif;
  font-size:15px; line-height:1.8; color:var(--emerald-2);
}

.result-actions{display:flex; flex-direction:column; gap:10px; margin-top:8px}

/* ===== شاشة النصائح ===== */
.tips-top{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.tips-title{
  font-family:'Noto Naskh Arabic',serif;
  font-size:24px; font-weight:700; margin:0; color:var(--emerald);
}
.tips-sub{margin:0 0 16px; font-size:13.5px; line-height:1.7; color:var(--emerald-2); opacity:.9}

/* ===== النافذة المنبثقة ===== */
.modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(14,59,46,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:fbIn .2s ease both;
}
.modal-card{
  width:100%; max-width:360px;
  background:var(--paper); color:var(--emerald);
  border:1px solid var(--gold);
  border-radius:22px;
  padding:22px 20px 20px;
  text-align:center;
  box-shadow:0 24px 50px rgba(14,59,46,.3);
}
.modal-star{color:var(--gold); font-size:14px; margin-bottom:6px}
.modal-card h3{
  font-family:'Noto Naskh Arabic',serif;
  font-size:20px; font-weight:700; margin:0 0 8px;
}
.modal-card p{margin:0; font-size:13.5px; line-height:1.75; color:var(--emerald-2)}
.modal-actions{display:flex; flex-direction:column; gap:9px; margin-top:18px}

/* ===== احترام تقليل الحركة ===== */
@media (prefers-reduced-motion: reduce){
  .screen, .option, .feedback, .modal{animation:none !important}
  .nour svg{animation:none !important}
  .ring-fg{transition:none !important}
  .bar i{transition:none !important}
}