/* ── dikr quiz game (لعبة الأسئلة الإسلامية) — loaded on the quiz page only ── */
:root {
  --qz-card: #ffffff; --qz-soft: #f4f9fd; --qz-ok: #16a34a; --qz-ok-bg: #e8f8ee; --qz-bad: #dc2626; --qz-bad-bg: #fdecec;
  --qz-gold: #d4a017; --qz-gold-bg: #fdf6e3; --qz-violet: #7c5cff;
}
body.dark { --qz-card: #1c1c1e; --qz-soft: #232327; --qz-ok: #4ade80; --qz-ok-bg: rgba(74,222,128,.12); --qz-bad: #f87171; --qz-bad-bg: rgba(248,113,113,.12); --qz-gold: #f0c64a; --qz-gold-bg: rgba(240,198,74,.1); }

.qz-wrap { max-width: 720px; margin: -28px auto 0; padding: 0 16px 40px; position: relative; z-index: 2; }
.qz-app { background: var(--qz-card); border: 1px solid var(--separator); border-radius: 22px; box-shadow: 0 10px 40px rgba(13,136,196,.12); padding: 20px; min-height: 420px; display: flex; flex-direction: column; gap: 16px; font-family: -apple-system, 'Segoe UI', Tahoma, sans-serif; color: var(--page-text); }
.qz-noscript { text-align: center; color: var(--text-sec); padding: 40px 0; }

/* buttons */
.qz-btn { border: 1.5px solid var(--blue-border); background: var(--qz-card); color: var(--blue-darker); font: 700 16px/1 inherit; font-family: inherit; padding: 13px 20px; border-radius: 14px; cursor: pointer; transition: transform .12s, background .15s, box-shadow .15s; }
.qz-btn:hover { background: var(--blue-bg); }
.qz-btn:active { transform: scale(.97); }
.qz-btn-main { background: linear-gradient(135deg, #2aa8ff, #0a74f0); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(10,116,240,.3); }
.qz-btn-main:hover { background: linear-gradient(135deg, #3db2ff, #1a80f5); }
.qz-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.qz-link { background: none; border: 0; color: var(--blue-darker); font: inherit; font-weight: 700; cursor: pointer; padding: 4px; }
body.dark .qz-btn, body.dark .qz-link { color: var(--blue); }
body.dark .qz-btn-main { color: #fff; }
.qz-btn:focus-visible, .qz-opt:focus-visible, .qz-mode:focus-visible, .qz-cat:focus-visible, .qz-lvl:focus-visible, .qz-life:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* profile */
.qz-profile { background: linear-gradient(135deg, var(--blue-bg), var(--qz-gold-bg)); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.qz-rank { display: flex; align-items: center; gap: 12px; }
.qz-rank-icon { font-size: 34px; line-height: 1; }
.qz-rank b { display: block; font-size: 18px; }
.qz-rank small { color: var(--text-sec); font-size: 13px; }
.qz-xp { height: 8px; border-radius: 8px; background: var(--separator); overflow: hidden; }
.qz-xp i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--qz-gold), var(--blue-dark)); transition: width .6s; }
.qz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; font-size: 12px; color: var(--text-sec); }
.qz-stats b { display: block; font-size: 17px; color: var(--page-text); font-variant-numeric: tabular-nums; }

/* modes */
.qz-modes { display: grid; gap: 10px; }
.qz-mode { display: flex; align-items: center; gap: 14px; text-align: start; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--separator); background: var(--qz-card); cursor: pointer; font: inherit; color: inherit; transition: transform .15s, border-color .15s, box-shadow .15s; }
.qz-mode:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 8px 22px rgba(13,136,196,.14); }
.qz-mode-icon { font-size: 30px; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--blue-bg); }
.qz-mode-daily .qz-mode-icon { background: var(--qz-gold-bg); }
.qz-mode-ladder .qz-mode-icon { background: rgba(124,92,255,.12); }
.qz-mode-blitz .qz-mode-icon { background: rgba(255,159,10,.14); }
.qz-mode-tf .qz-mode-icon { background: var(--qz-ok-bg); }
.qz-mode-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qz-mode-body b { font-size: 17px; }
.qz-mode-body small { font-size: 13px; color: var(--text-sec); line-height: 1.55; }
.qz-mode-body em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--qz-gold); }
.qz-mode-daily { border-color: rgba(212,160,23,.45); background: linear-gradient(135deg, var(--qz-gold-bg), var(--qz-card) 70%); }
.qz-mode.is-done { opacity: .75; }

/* badges */
.qz-badges h3, .qz-setup h3, .qz-new-badges h3 { font-size: 15px; margin-bottom: 8px; }
.qz-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.qz-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: var(--qz-soft); color: var(--text-ter); filter: grayscale(1); }
.qz-badge i { font-style: normal; font-size: 15px; }
.qz-badge.is-on { filter: none; color: var(--page-text); background: var(--qz-gold-bg); }
.qz-badge.is-new { animation: qzPop .5s ease both; }
.qz-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text-sec); border-top: 1px solid var(--separator); padding-top: 10px; }

/* classic setup */
.qz-setup { display: flex; flex-direction: column; gap: 12px; }
.qz-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.qz-cat, .qz-lvl { font: 700 14px inherit; font-family: inherit; padding: 11px 10px; border-radius: 12px; border: 1.5px solid var(--separator); background: var(--qz-card); color: var(--page-text); cursor: pointer; display: flex; align-items: center; gap: 7px; justify-content: center; }
.qz-cat i { font-style: normal; font-size: 18px; }
.qz-cat.is-on, .qz-lvl.is-on { border-color: var(--blue-dark); background: var(--blue-bg); color: var(--blue-darker); }
body.dark .qz-cat.is-on, body.dark .qz-lvl.is-on { color: var(--blue); }
.qz-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* in-game HUD */
.qz-hud { display: flex; align-items: center; gap: 12px; }
.qz-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--separator); background: var(--qz-soft); color: var(--text-sec); cursor: pointer; font-size: 15px; flex: none; }
.qz-hud-mid { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qz-hud-mid small { font-size: 12px; color: var(--text-sec); font-weight: 600; }
.qz-prog, .qz-blitz-bar { height: 8px; border-radius: 8px; background: var(--separator); overflow: hidden; }
.qz-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-darker)); border-radius: 8px; transition: width .4s; }
.qz-blitz-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff9f0a, #ff453a); border-radius: 8px; transition: width .2s linear; }
.qz-steps { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; }
.qz-steps i { height: 8px; border-radius: 3px; background: var(--separator); }
.qz-steps i.safe { box-shadow: 0 0 0 1.5px var(--qz-gold) inset; }
.qz-steps i.done { background: var(--qz-ok); }
.qz-steps i.now { background: var(--qz-violet); animation: qzPulse 1.2s infinite; }
.qz-score { position: relative; text-align: center; min-width: 64px; }
.qz-score b { display: block; font-size: 20px; color: var(--blue-darker); font-variant-numeric: tabular-nums; }
body.dark .qz-score b { color: var(--blue); }
.qz-score small { font-size: 11px; color: var(--text-sec); }
.qz-combo { position: absolute; top: -14px; inset-inline-end: -6px; font-size: 11px; font-weight: 800; background: #ff9f0a; color: #fff; border-radius: 99px; padding: 1px 7px; }
.qz-gain { position: absolute; top: -6px; inset-inline-start: 50%; font-size: 13px; font-weight: 800; color: var(--qz-ok); animation: qzRise .9s ease forwards; pointer-events: none; }

/* question */
.qz-card { background: var(--qz-soft); border-radius: 18px; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 12px; animation: qzIn .35s ease both; }
.qz-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qz-tag { font-size: 12px; font-weight: 700; color: var(--blue-darker); background: var(--blue-bg); padding: 3px 10px; border-radius: 99px; }
body.dark .qz-tag { color: var(--blue); }
.qz-lv { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.qz-lv-1 { background: var(--qz-ok-bg); color: var(--qz-ok); }
.qz-lv-2 { background: var(--blue-bg); color: var(--blue-darker); }
.qz-lv-3 { background: var(--qz-bad-bg); color: var(--qz-bad); }
.qz-timer { margin-inline-start: auto; position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.qz-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.qz-timer circle { fill: none; stroke-width: 3.5; }
.qz-timer .bg { stroke: var(--separator); }
.qz-timer .fg { stroke: var(--blue-dark); stroke-linecap: round; stroke-dasharray: 100.5 100.5; transition: stroke-dasharray .1s linear; }
.qz-timer b { font-size: 15px; font-variant-numeric: tabular-nums; }
.qz-timer.is-low .fg { stroke: var(--qz-bad); }
.qz-timer.is-low b { color: var(--qz-bad); animation: qzPulse .5s infinite; }
.qz-q { font-family: var(--font-quran); font-size: 24px; line-height: 1.75; font-weight: 700; text-wrap: balance; }

/* options */
.qz-opts { display: grid; gap: 10px; }
.qz-opts.is-tf { grid-template-columns: 1fr 1fr; }
.qz-opt { display: flex; align-items: center; gap: 12px; text-align: start; padding: 13px 14px; border-radius: 14px; border: 2px solid var(--separator); background: var(--qz-card); color: var(--page-text); font: 600 17px/1.5 inherit; font-family: var(--font-quran); cursor: pointer; transition: transform .1s, border-color .15s, background .15s; animation: qzIn .35s ease both; }
.qz-opt:nth-child(2) { animation-delay: .04s; } .qz-opt:nth-child(3) { animation-delay: .08s; } .qz-opt:nth-child(4) { animation-delay: .12s; }
.qz-opt:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-bg); transform: translateY(-1px); }
.qz-opt:disabled { cursor: default; }
.qz-letter { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; font-family: -apple-system, 'Segoe UI', sans-serif; font-weight: 800; font-size: 15px; background: var(--blue-bg); color: var(--blue-darker); }
.qz-opts.is-tf .qz-opt { justify-content: center; font-size: 20px; padding: 18px; }
.qz-opt.is-right { border-color: var(--qz-ok); background: var(--qz-ok-bg); animation: qzPop .35s ease; }
.qz-opt.is-right .qz-letter { background: var(--qz-ok); color: #fff; }
.qz-opt.is-wrong { border-color: var(--qz-bad); background: var(--qz-bad-bg); animation: qzShake .35s ease; }
.qz-opt.is-wrong .qz-letter { background: var(--qz-bad); color: #fff; }
.qz-opt.is-dim { opacity: .5; }
.qz-opt.is-gone { opacity: .18; text-decoration: line-through; }

/* lifelines */
.qz-lifelines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qz-life { font: 700 13px inherit; font-family: inherit; padding: 10px 6px; border-radius: 12px; border: 1.5px dashed rgba(124,92,255,.5); background: rgba(124,92,255,.07); color: var(--qz-violet); cursor: pointer; }
.qz-life:disabled { opacity: .35; cursor: default; text-decoration: line-through; }

/* feedback */
.qz-feedback { border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; animation: qzIn .3s ease both; }
.qz-feedback.is-ok { background: var(--qz-ok-bg); }
.qz-feedback.is-bad { background: var(--qz-bad-bg); }
.qz-feedback b { font-size: 16px; }
.qz-feedback.is-ok b { color: var(--qz-ok); }
.qz-feedback.is-bad b { color: var(--qz-bad); }
.qz-feedback span { font-weight: 700; font-size: 14px; }
.qz-feedback p { font-size: 14px; line-height: 1.75; color: var(--text-sec); }
.qz-next { align-self: stretch; }

/* end */
.qz-end { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; animation: qzIn .4s ease both; }
.qz-stars { display: flex; gap: 6px; font-size: 40px; line-height: 1; }
.qz-stars i { font-style: normal; color: var(--separator); }
.qz-stars i.on { color: var(--qz-gold); animation: qzPop .5s ease both; }
.qz-stars i.on:nth-child(2) { animation-delay: .15s; } .qz-stars i.on:nth-child(3) { animation-delay: .3s; }
.qz-end h2 { font-size: 21px; text-wrap: balance; }
.qz-big b { display: block; font-size: 54px; line-height: 1.1; color: var(--blue-darker); font-variant-numeric: tabular-nums; }
body.dark .qz-big b { color: var(--blue); }
.qz-big span { color: var(--text-sec); font-size: 14px; }
.qz-end-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.qz-end-stats span { background: var(--qz-soft); border-radius: 12px; padding: 10px 6px; font-size: 12px; color: var(--text-sec); }
.qz-end-stats b { display: block; font-size: 16px; color: var(--page-text); }
.qz-new-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.qz-new-badges h3 { width: 100%; }
.qz-review { width: 100%; text-align: start; border: 1px solid var(--separator); border-radius: 14px; padding: 4px 14px; }
.qz-review summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.qz-rev { border-top: 1px dashed var(--separator); padding: 10px 0; display: grid; gap: 3px; }
.qz-rev-q { font-weight: 700; }
.qz-rev-a { color: var(--qz-ok); font-weight: 700; }
.qz-rev-e { font-size: 13px; color: var(--text-sec); line-height: 1.7; }
.qz-copy-msg { font-size: 13px; color: var(--qz-ok); white-space: pre-line; }
.qz-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 999; }

/* crawlable question list */
.qz-bank { max-width: 720px; margin: 0 auto 40px; padding: 0 16px; display: grid; gap: 10px; font-family: -apple-system, 'Segoe UI', Tahoma, sans-serif; }
.qz-bank h2 { font-family: var(--font-quran); font-size: 26px; }
.qz-bank > p { color: var(--text-sec); line-height: 1.8; }
.qz-bank-cat { border: 1px solid var(--separator); border-radius: 14px; background: var(--qz-card); }
.qz-bank-cat summary { cursor: pointer; padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; }
.qz-bank-cat summary small { color: var(--text-sec); font-weight: 600; }
.qz-bank-cat ol { margin: 0; padding: 0 34px 14px 16px; display: grid; gap: 12px; }
.qz-bank-cat li { line-height: 1.7; }
.qz-bank-q { font-weight: 700; }
.qz-bank-a b { color: var(--qz-ok); }
.qz-bank-e { font-size: 14px; color: var(--text-sec); }

@keyframes qzIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes qzPop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes qzShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes qzPulse { 50% { opacity: .55; } }
@keyframes qzRise { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -26px); } }
@media (prefers-reduced-motion: reduce) { .qz-app *, .qz-end * { animation: none !important; transition: none !important; } }

@media (max-width: 520px) {
  .qz-app { padding: 16px 14px; border-radius: 18px; }
  .qz-q { font-size: 21px; }
  .qz-opt { font-size: 16px; }
  .qz-stats { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }
  .qz-levels { grid-template-columns: repeat(2, 1fr); }
  .qz-mode-icon { width: 46px; height: 46px; font-size: 26px; }
  .qz-big b { font-size: 46px; }
}