:root{
  --bg:#0b0e14; --card:#121826; --muted:#9aa1ad; --text:#e6e6e6; --brand:#4f9cff; --accent:#7dffaf; --bad:#ff6b6b;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg); color:var(--text);
  min-height:100vh; display:flex; flex-direction:column; gap:16px;
}
.container{width:min(1080px,92%);margin:0 auto}
.lead{color:var(--muted)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:720px){.grid-2{grid-template-columns:1fr}}

.card{
  background:var(--card); border:1px solid #1f2330; border-radius:var(--radius); padding:18px;
  text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:8px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.3)}
.card-emoji{font-size:32px}
.btn{
  background:var(--brand); color:#09121d; border:none; border-radius:999px; padding:10px 16px; cursor:pointer;
  font-weight:700; letter-spacing:.2px; margin-top:auto;
}
.btn.ghost{background:transparent;color:var(--text);border:1px solid #2a2f3a}
.btn.outline{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.ad{display:flex;align-items:center;justify-content:center;color:#c2c8d0;background:#141a28;border:1px dashed #2a3040;margin:0 auto;width:min(1080px,92%);height:68px;border-radius:12px}
.ad-bottom{margin-bottom:20px}

.quiz-header{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:6px}
.back{color:var(--muted);text-decoration:none}
.progress{flex:1;height:10px;background:#151b2b;border-radius:999px;overflow:hidden;border:1px solid #1f2636}
.bar{height:100%;background:linear-gradient(90deg,var(--brand),#7aa9ff 60%,#9ac2ff)}
.pill{background:#162137;border:1px solid #26324a;padding:4px 10px;border-radius:999px;color:var(--muted);font-size:12px}

.q-card,.result-card{
  background:var(--card); border:1px solid #1f2330; border-radius:var(--radius); padding:18px; margin-top:12px; position:relative; overflow:hidden;
}
.q-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);margin-bottom:10px}
.q-text{font-size:20px;margin:8px 0 6px}
.answers{display:grid;gap:10px;margin-top:10px}
.answer{
  display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #20273a;border-radius:12px;background:#0f1422;cursor:pointer
}
.answer input{accent-color:#6aa7ff;transform:scale(1.2)}
.q-actions{display:flex;gap:10px;justify-content:space-between;margin-top:16px}

.hidden{display:none}
.muted{color:var(--muted)}
.score{font-size:28px;margin:.2em 0 0.4em}
.share{display:flex;gap:10px;flex-wrap:wrap}
#confetti{position:absolute;inset:0;pointer-events:none}
/* ——— تحسين أزرار التالي/السابق ——— */
.q-actions .btn{
  font-size:18px;
  padding:14px 26px;
  min-width:140px;
  border-radius:999px;
}

/* ——— توسيط نص السؤال والإجابات ——— */
.q-text{ text-align:center; }
.answers{ align-items:center; }
.answer{ max-width:720px; width:100%; justify-content:center; text-align:center; }
.q-meta{ justify-content:space-between; }

/* شريط التقدم أعرض قليلًا */
.progress{ height:12px; }

