/*
 * NaijaQuiz — Hub App Styles (nq-hub.css)
 * Scoped under #nq-hub-app so nothing leaks into the host theme.
 */

#nq-hub-app {
  --bg:        #eef3ea;
  --bg-2:      #e6efe4;
  --surface:   #ffffff;
  --ink:       #06311f;
  --muted:     #5c7367;
  --line:      rgba(6,49,31,.11);
  --green:     #0fa866;
  --green-d:   #0b6b45;
  --lime:      #8fe04a;
  --wrong:     #e5484d;
  --grad:      linear-gradient(135deg,#0fa866 0%,#6ed057 100%);
  --grad-d:    linear-gradient(135deg,#0b6b45,#11a564);
  --shadow:    0 18px 40px -20px rgba(8,80,50,.45);
  --display:   "Bricolage Grotesque", system-ui, sans-serif;
  --body:      "Outfit", system-ui, sans-serif;

  position: relative;
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* atmospheric background */
#nq-hub-app::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55vw 55vw at 8% -8%,  rgba(110,208,87,.28), transparent 60%),
    radial-gradient(50vw 50vw at 106% 14%, rgba(15,168,102,.20), transparent 60%),
    radial-gradient(70vw 70vw at 60% 118%, rgba(143,224,74,.14), transparent 62%);
}
#nq-hub-app > * { position: relative; z-index: 1; }

/* inner content column */
.nqh-inner {
  max-width: 500px;
  margin: 0 auto;
  padding: 22px 18px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* screen enter animation */
.nqh-screen { animation: nqhIn .5s cubic-bezier(.2,.9,.25,1) both; }
@keyframes nqhIn { from { opacity:0; transform:translateY(14px) scale(.99); } to { opacity:1; transform:none; } }

/* ── Top bar ── */
.nqh-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.nqh-brand  { font-family:var(--display); font-weight:800; font-size:1.45rem; letter-spacing:-.02em;
  background:var(--grad-d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nqh-stats  { display:flex; gap:8px; }
.nqh-pill   { display:flex; align-items:center; gap:5px; font-size:.8rem; font-weight:600; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); padding:7px 11px; border-radius:999px;
  box-shadow:0 4px 14px -8px rgba(8,80,50,.4); }
.nqh-pill b { color:var(--green-d); }

/* ── Hero ── */
.nqh-hero    { margin-bottom:18px; }
.nqh-hero h1 { font-family:var(--display); font-weight:800; font-size:2.35rem; line-height:1.02; letter-spacing:-.03em; }
.nqh-hero h1 em { font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nqh-hero p  { color:var(--muted); margin-top:8px; font-size:1rem; }

/* ── Featured card ── */
.nqh-feature { position:relative; border-radius:24px; padding:22px; margin-bottom:22px; overflow:hidden;
  background:var(--grad); color:#fff; cursor:pointer; isolation:isolate;
  box-shadow:0 22px 44px -18px rgba(15,168,102,.55); transition:transform .18s ease; }
.nqh-feature:active { transform:scale(.986); }
.nqh-feature::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
  background:radial-gradient(42% 62% at 86% 18%,rgba(255,255,255,.5),transparent 60%); }
.nqh-feature .nqh-tag  { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.95; }
.nqh-feature h2        { font-family:var(--display); font-weight:800; font-size:1.7rem; line-height:1.05; margin:8px 0 4px; letter-spacing:-.02em; }
.nqh-feature .nqh-meta { font-size:.85rem; opacity:.95; }
.nqh-feature .nqh-play { margin-top:14px; display:inline-flex; align-items:center; gap:7px; font-weight:700;
  background:rgba(0,40,24,.22); padding:9px 16px; border-radius:999px; font-size:.92rem; }

/* ── Category chips ── */
.nqh-chips { display:flex; gap:9px; overflow-x:auto; padding:0 18px 14px; margin:0 -18px 6px;
  scrollbar-width:none; }
.nqh-chips::-webkit-scrollbar { display:none; }
.nqh-chip { white-space:nowrap; font-size:.86rem; font-weight:600; padding:9px 15px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--muted); cursor:pointer; transition:all .15s ease; }
.nqh-chip.on { background:var(--green); color:#fff; border-color:var(--green);
  box-shadow:0 8px 18px -8px rgba(15,168,102,.6); }

/* ── Quiz grid ── */
.nqh-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.nqh-card { position:relative; border-radius:20px; padding:16px; min-height:158px; cursor:pointer; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 10px 26px -20px rgba(8,80,50,.5);
  transition:transform .18s ease, border-color .2s ease, box-shadow .2s ease;
  opacity:0; transform:translateY(16px); animation:nqhCardIn .5s ease forwards; }
@keyframes nqhCardIn { to { opacity:1; transform:none; } }
.nqh-card:hover  { transform:translateY(-3px); border-color:rgba(15,168,102,.4);
  box-shadow:0 20px 38px -22px rgba(8,80,50,.55); }
.nqh-card:active { transform:scale(.98); }
.nqh-ico  { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:1.5rem;
  background:var(--cover, var(--grad)); box-shadow:0 10px 22px -10px rgba(8,80,50,.55); }
.nqh-card h3   { font-family:var(--display); font-weight:700; font-size:1.08rem; line-height:1.12; letter-spacing:-.01em; }
.nqh-card .nqh-m { font-size:.76rem; color:var(--muted); margin-top:3px; }

/* ── Play screen ── */
.nqh-play-top { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.nqh-close { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font-size:1.2rem; cursor:pointer; flex:0 0 auto;
  box-shadow:0 4px 14px -8px rgba(8,80,50,.4); }
.nqh-bar { flex:1; height:10px; border-radius:999px; background:rgba(6,49,31,.10); overflow:hidden; }
.nqh-bar > i { display:block; height:100%; width:0; background:var(--grad); border-radius:999px;
  transition:width .45s cubic-bezier(.3,1,.4,1); }
.nqh-qcount { font-size:.82rem; font-weight:600; color:var(--muted); flex:0 0 auto; }

.nqh-qwrap  { flex:1; display:flex; flex-direction:column; }
.nqh-qnum   { font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green-d); margin-bottom:10px; }
.nqh-qtext  { font-family:var(--display); font-weight:700; font-size:1.85rem; line-height:1.14;
  letter-spacing:-.02em; margin-bottom:24px; }
.nqh-opts { display:flex; flex-direction:column; gap:12px; }
.nqh-opt  { display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:16px;
  color:var(--ink); font-family:var(--body); font-weight:600; font-size:1.04rem;
  box-shadow:0 6px 18px -14px rgba(8,80,50,.5);
  transition:all .16s ease; animation:nqhOptIn .4s ease both; }
@keyframes nqhOptIn { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
.nqh-opt .nqh-key { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  background:rgba(6,49,31,.07); color:var(--ink); transition:all .16s; }
.nqh-opt:hover:not(.locked) { border-color:rgba(15,168,102,.45); transform:translateX(3px); }
.nqh-opt.chosen  { border-color:transparent; background:var(--grad); color:#fff; }
.nqh-opt.chosen .nqh-key  { background:rgba(255,255,255,.28); color:#fff; }
.nqh-opt.correct { border-color:transparent; background:linear-gradient(135deg,#14b86e,#0b8a4f); color:#fff; }
.nqh-opt.correct .nqh-key { background:rgba(255,255,255,.32); color:#fff; }
.nqh-opt.wrong   { border-color:transparent; background:linear-gradient(135deg,#ff5c5c,#d62f2f); color:#fff; }
.nqh-opt.wrong .nqh-key   { background:rgba(255,255,255,.3); color:#fff; }
.nqh-opt.locked  { cursor:default; }
.nqh-opt.dim     { opacity:.42; }

/* ── Result screen ── */
.nqh-result { text-align:center; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 0; }
.nqh-ring { position:relative; width:168px; height:168px; display:grid; place-items:center; margin-bottom:18px; }
.nqh-ring svg { position:absolute; inset:0; transform:rotate(-90deg); }
.nqh-score { font-family:var(--display); font-weight:800; font-size:3rem; line-height:1; letter-spacing:-.03em; color:var(--ink); }
.nqh-score small { font-size:1.1rem; color:var(--muted); font-weight:600; }
.nqh-result h2   { font-family:var(--display); font-weight:800; font-size:2rem; letter-spacing:-.02em; margin-bottom:6px; }
.nqh-result .nqh-sub { color:var(--muted); max-width:320px; margin:0 auto 18px; }

.nqh-sharecard { width:100%; border-radius:20px; padding:22px; margin:6px 0 18px; text-align:left; color:#fff;
  background:var(--scover, var(--grad)); position:relative; overflow:hidden;
  box-shadow:0 20px 42px -18px rgba(8,80,50,.55); }
.nqh-sharecard::after { content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(40% 60% at 90% 10%,rgba(255,255,255,.45),transparent 60%); }
.nqh-sc-k { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.92; position:relative; }
.nqh-sc-t { font-family:var(--display); font-weight:800; font-size:1.55rem; line-height:1.08; margin:8px 0 6px; position:relative; }
.nqh-sc-b { font-size:.9rem; opacity:.96; position:relative; }
.nqh-sc-f { margin-top:14px; font-size:.78rem; font-weight:700; opacity:.88; position:relative; }

.nqh-share-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; margin-bottom:10px; }
.nqh-btn { display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body); font-weight:700;
  font-size:.98rem; border:none; border-radius:14px; padding:15px; cursor:pointer;
  transition:transform .12s ease; color:#fff; text-decoration:none; }
.nqh-btn:active { transform:scale(.97); }
.nqh-btn-wa   { background:#25d366; color:#06351a; }
.nqh-btn-x    { background:#14241c; color:#fff; }
.nqh-btn-copy { background:var(--surface); border:1px solid var(--line); color:var(--ink); width:100%; margin-bottom:10px; }
.nqh-btn-main { background:var(--grad); width:100%; padding:16px; font-size:1.05rem;
  box-shadow:0 16px 32px -14px rgba(15,168,102,.6); }
.nqh-btn-ghost { background:transparent; border:1px dashed var(--line); color:var(--muted); width:100%; margin-top:9px; }

.nqh-next    { width:100%; margin-top:26px; text-align:left; }
.nqh-next h4 { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:11px; }

.nqh-loading, .nqh-boot, .nqh-msg {
  font-family:var(--display); font-weight:600; text-align:center; padding:32px; color:var(--muted);
}

canvas.nqh-confetti { position:fixed; inset:0; z-index:9999; pointer-events:none; }

@media (max-width:380px) {
  .nqh-hero h1 { font-size:2rem; }
  .nqh-qtext   { font-size:1.6rem; }
}

/* ── Onboarding / recovery screens ── */
.nqh-onboard,
.nqh-recover {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:100vh; padding:30px 24px;
  animation:nqhIn .5s cubic-bezier(.2,.9,.25,1) both;
}
.nqh-ob-brand {
  font-family:var(--display); font-weight:800; font-size:1.2rem; letter-spacing:-.02em;
  background:linear-gradient(135deg,#0b6b45,#11a564);
  -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:14px;
}
.nqh-ob-emoji { font-size:4rem; margin-bottom:14px; }
.nqh-ob-form  { width:100%; max-width:360px; }
.nqh-field {
  display:block; width:100%; margin-bottom:12px;
  border:2px solid var(--line); border-radius:14px; padding:15px 18px;
  font-family:var(--body); font-size:1.05rem; color:var(--ink);
  background:var(--surface); outline:none; transition:border-color .15s;
}
.nqh-field:focus { border-color:#0fa866; }
.nqh-field.err   { border-color:#e5484d; animation:nqhShake .3s ease; }
@keyframes nqhShake { 0%,100%{transform:none} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.nqh-field-hint { font-size:.78rem; color:var(--muted); margin:-6px 0 12px; text-align:left; }
.nqh-link-btn {
  background:none; border:none; color:var(--muted); font-size:.82rem;
  cursor:pointer; text-decoration:underline; font-family:var(--body); padding:6px 0;
}
.nqh-link-btn:hover { color:#0fa866; }
.nqh-ob-divider { width:100%; height:1px; background:var(--line); margin:14px 0; }
.nqh-status-ok  { font-size:.85rem; color:#0fa866; font-weight:600; margin-bottom:8px; }
.nqh-status-err { font-size:.85rem; color:#e5484d; font-weight:600; margin-bottom:8px; }
.nqh-player-pill {
  display:flex; align-items:center; gap:5px; font-family:var(--body);
  font-size:.82rem; font-weight:600; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--line); padding:7px 12px; border-radius:999px; cursor:pointer;
  box-shadow:0 4px 14px -8px rgba(8,80,50,.4); transition:border-color .15s, background .15s;
  white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis;
}
.nqh-player-pill:hover { border-color:#0fa866; background:#eef5ea; }