/* Najm al-Qawaid wa al-Sarf: gaya asal inovator (angkasa ungu + emas), diskop .nq.
   Utiliti Tailwind asal digantikan dengan kelas setempat (tiada CDN Tailwind). Saiz teks dalam em (Bhg 16A). */
.nq {
  --nq-ink: #f8f5ff; --nq-muted: #d5cdec; --nq-gold: #ffd85a; --nq-glass: rgba(18,20,70,.62);
  --nq-border: rgba(255,255,255,.18); --nq-correct: #5ee6a9; --nq-incorrect: #ff94aa;
  --iv-sp-latar: #120f45;
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius, 16px);
  font-family: "Tajawal", "Noto Naskh Arabic", "Amiri", sans-serif;
  color: var(--nq-ink); font-size: 1.12em; line-height: 1.6;
  background: radial-gradient(circle at 13% 20%, rgba(114,99,255,.46), transparent 25rem),
    radial-gradient(circle at 85% 14%, rgba(255,195,88,.17), transparent 20rem),
    radial-gradient(circle at 52% 100%, rgba(206,74,255,.25), transparent 27rem),
    linear-gradient(135deg, #080b35 0%, #191451 45%, #301263 100%);
  padding: 14px;
  min-height: 520px;
}
.nq * { box-sizing: border-box; }
.nq::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
  background-image: radial-gradient(circle at 10% 28%, #fff 0 1px, transparent 2px), radial-gradient(circle at 35% 11%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 66% 24%, #fff 0 1px, transparent 2px), radial-gradient(circle at 88% 52%, #fff 0 1.4px, transparent 2px),
    radial-gradient(circle at 20% 78%, #fff 0 1px, transparent 2px), radial-gradient(circle at 56% 88%, #fff 0 1.2px, transparent 2px);
  animation: nq-twinkle 5s ease-in-out infinite alternate; }
@keyframes nq-twinkle { from { opacity: .35 } to { opacity: .9 } }
@keyframes nq-rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
@keyframes nq-float { 0%, 100% { transform: translateY(0) rotate(-4deg) } 50% { transform: translateY(-12px) rotate(4deg) } }
.nq p, .nq h1, .nq h2, .nq h3 { margin: 0; }
.nq button { font-family: inherit; }
.nq svg.nq-i { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; }

/* Bar atas (skrin penuh) */
.nq-bar { display: flex; justify-content: flex-start; margin-bottom: 8px; direction: ltr; }
.nq .iv-sp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-family: Inter, system-ui, sans-serif; font-size: .82em; font-weight: 700; cursor: pointer; }
.nq .iv-sp-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 559px) { .nq .iv-sp-btn [data-iv-skrin-lbl] { display: none; } }

.nq-shell { width: 100%; max-width: 900px; margin: 0 auto; animation: nq-rise .6s ease both; }
.nq-glass { background: var(--nq-glass); border: 1px solid var(--nq-border); box-shadow: 0 24px 70px rgba(3,4,32,.4), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 22px; }
.nq-screen { display: none; }
.nq-screen.active { display: block; animation: nq-rise .4s ease both; }
.nq-start, .nq-result { padding: 2.2em 1.4em; text-align: center; }
.nq-game { padding: 1em; }
@media (min-width: 640px) {
  .nq { padding: 22px; }
  .nq-glass { border-radius: 28px; }
  .nq-start, .nq-result { padding: 3.4em 3em; }
  .nq-game { padding: 1.6em; }
}

.nq-orb { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.1rem; color: #fff;
  background: radial-gradient(circle at 32% 28%, #fff7bb, #ffd85a 35%, #ff9d30 68%, #9f3cf4);
  box-shadow: 0 0 0 11px rgba(255,216,90,.1), 0 0 44px rgba(255,207,79,.44); animation: nq-float 4s ease-in-out infinite; }
.nq-orb svg { width: 58px; height: 58px; }
.nq-kicker { color: var(--nq-gold); font-weight: 700; margin-bottom: .75rem !important; }
.nq-title { font-size: 2.1em; font-weight: 900; line-height: 1.3; margin-bottom: 1rem !important; color: #fff; }
.nq-title svg { color: var(--nq-gold); }
.nq-desc { color: #e6defa; font-size: 1.08em; max-width: 36rem; margin: 0 auto 2rem !important; line-height: 1.8; }

.nq-btn { min-height: 52px; border-radius: 16px; border: 1px solid transparent; font-weight: 800; font-size: 1.05em; padding: .7em 1.6em; cursor: pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; width: 100%; }
@media (min-width: 640px) { .nq-btn { width: auto; } }
.nq-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); }
.nq-btn:disabled { opacity: .5; cursor: not-allowed; }
.nq-btn-utama { background: linear-gradient(135deg, #ffd85a, #ffad2f); color: #372000; box-shadow: 0 10px 25px rgba(255,187,48,.28); }
.nq-btn-kedua { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); }
.nq-btn:focus-visible, .nq-opt:focus-visible { outline: 3px solid #fff3a4; outline-offset: 4px; }

/* HUD */
.nq-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.nq-head-kiri { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.nq-lencana { border-radius: .75rem; background: rgba(255,255,255,.1); padding: .4rem .7rem; color: var(--nq-gold); font-size: 1.25em; line-height: 1; }
.nq-game-title { font-size: 1.45em; font-weight: 900; color: #fff; line-height: 1.35; }
.nq-level-name { margin-top: .2rem !important; font-size: .88em; font-weight: 700; color: var(--nq-muted); }
.nq-timer { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: 0 0 auto;
  background: conic-gradient(#ffd85a 360deg, rgba(255,255,255,.14) 0deg); }
.nq-timer::after { content: ""; position: absolute; width: 50px; height: 50px; border-radius: 50%; background: #1c1c61; }
.nq-timer-v { z-index: 1; font-weight: 900; color: #fff; direction: ltr; font-size: 1.05em; }
.nq-hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 640px) { .nq-hud { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nq-hud-kad { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: .6rem; text-align: center; }
.nq-hud-lbl { font-size: .8em; font-weight: 700; color: var(--nq-muted); }
.nq-hud-v { font-weight: 900; font-size: 1.1em; }
.nq-v-skor { color: var(--nq-gold); } .nq-v-betul { color: #6ee7b7; } .nq-v-nyawa { color: #fda4af; } .nq-v-siri { color: #ddd6fe; }
.nq-nyawa { display: inline-flex; gap: 4px; justify-content: center; align-items: center; min-height: 1.6em; }
.nq-nyawa svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.nq-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.1rem 0 .75rem; }
.nq-counter { font-weight: 700; color: var(--nq-ink); }
.nq-dots { display: flex; gap: .4rem; }
.nq-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.2); transition: transform .2s; }
.nq-dot.active { background: var(--nq-gold); transform: scale(1.35); box-shadow: 0 0 10px var(--nq-gold); }
.nq-dot.done { background: #6ee7b7; }
.nq-track { height: 11px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); }
.nq-fill { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, #ffd85a, #ffae36); box-shadow: 0 0 16px rgba(255,216,90,.7); transition: width .45s ease; }

/* Soalan & jawapan */
.nq-qcard { background: linear-gradient(145deg, rgba(45,31,111,.74), rgba(15,28,81,.7)); border: 1px solid rgba(255,255,255,.14); border-radius: 23px;
  padding: clamp(1.2rem, 4vw, 2.25rem); min-height: 150px; display: flex; align-items: center; justify-content: center; margin: 1.25rem 0; }
.nq-q { text-align: center; font-size: 1.4em; font-weight: 800; line-height: 1.9; outline: none; }
@media (min-width: 640px) { .nq-q { font-size: 1.6em; } }
.nq-answers { display: grid; gap: .75rem; }
@media (min-width: 640px) { .nq-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nq-opt { width: 100%; min-height: 64px; padding: .9rem 1.1rem; display: flex; align-items: center; gap: .85rem; text-align: right; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16); color: #fff; background: rgba(255,255,255,.08); font-weight: 700; font-size: 1.15em; cursor: pointer;
  transition: transform .17s ease, background .17s ease, border-color .17s ease; }
.nq-opt:hover:not(:disabled) { transform: translateX(-4px); background: rgba(155,117,255,.25); border-color: rgba(255,216,90,.7); }
.nq-opt:disabled { cursor: default; }
.nq-opt.correct { background: rgba(22,163,104,.34); border-color: var(--nq-correct); box-shadow: 0 0 0 2px rgba(94,230,169,.16); }
.nq-opt.incorrect { background: rgba(225,49,88,.32); border-color: var(--nq-incorrect); }
.nq-letter { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: rgba(255,255,255,.14); color: var(--nq-gold); font-size: .85em; font-weight: 900; }
.nq-feedback { min-height: 50px; border-radius: 15px; padding: .8rem 1rem; display: none; align-items: center; justify-content: center; gap: .4em; text-align: center; font-weight: 800; margin-top: 1.25rem; }
.nq-feedback.show { display: flex; animation: nq-rise .25s ease both; }
.nq-feedback.good { background: rgba(15,155,94,.25); border: 1px solid rgba(94,230,169,.62); color: #c8ffe4; }
.nq-feedback.bad { background: rgba(205,44,80,.24); border: 1px solid rgba(255,148,170,.65); color: #ffe0e7; }
.nq-feedback svg { color: var(--nq-gold); flex: 0 0 auto; }
.nq-next { margin-top: 1.25rem; text-align: left; }
.nq-next[hidden] { display: none; }

/* Keputusan */
.nq-celebrate { color: var(--nq-gold); font-weight: 900; font-size: 1.5em; margin-bottom: .75rem !important; display: inline-flex; align-items: center; gap: .4em; }
.nq-result-title { font-size: 1.6em; font-weight: 900; color: #fff; margin-bottom: 1.25rem !important; }
.nq-score-lbl { color: #e6defa; font-weight: 700; font-size: 1.08em; margin-bottom: .5rem !important; }
.nq-score { font-size: calc(clamp(3.8rem, 12vw, 6.5rem) * var(--fs-scale, 1)); font-weight: 900; line-height: 1; color: var(--nq-gold); text-shadow: 0 0 26px rgba(255,216,90,.44); direction: ltr; margin-bottom: .75rem !important; }
.nq-summary { font-size: 1.12em; font-weight: 700; color: #e6defa; margin-bottom: .75rem !important; }
.nq-rating { font-size: 1.5em; font-weight: 900; color: var(--nq-gold); margin-bottom: 2rem !important; }
.nq-aksi { display: flex; flex-direction: column; justify-content: center; gap: .75rem; }
@media (min-width: 640px) { .nq-aksi { flex-direction: row; } }
.nq-kaki { margin-top: 12px !important; text-align: center; font-family: Inter, system-ui, sans-serif; font-size: .78em; color: var(--nq-muted); direction: ltr; }

/* Skrin penuh: isi memenuhi skrin, kandungan boleh skrol */
.nq.iv-skrin-penuh { border-radius: 0; overflow-y: auto; display: flex; flex-direction: column; }
.nq.iv-skrin-penuh .nq-shell { margin: auto; }

@media (max-width: 559px) {
  .nq { padding: 10px; }
  .nq-opt { font-size: 1.08em; }
  .nq-timer { width: 54px; height: 54px; } .nq-timer::after { width: 43px; height: 43px; }
  .nq-title { font-size: 1.8em; }
}
@media (prefers-reduced-motion: reduce) { .nq *, .nq::before { animation-duration: .01ms !important; transition-duration: .01ms !important; } }