/* ===== Foofie Quizzes — front-end (scoped to #fquiz-app) ===== */
#fquiz-app{
  --purple:#534AB7; --purple-deep:#3b3490; --purple-ink:#241f4d;
  --gold:#F0B429; --gold-lite:#ffd54a;
  --card:#fff; --line:#e7e3f5; --ink:#241f4d; --muted:#7d77a6;
  --shadow:0 14px 40px rgba(45,37,95,.16);
  font-family:"Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  color:var(--ink); max-width:580px; margin:0 auto; padding:6px 0 60px;
  -webkit-tap-highlight-color:transparent;
}
#fquiz-app *{box-sizing:border-box}
#fquiz-app .fq-fade{animation:fqFade .3s ease}
@keyframes fqFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

#fquiz-app .fq-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 4px 16px}
#fquiz-app .fq-back{display:inline-flex;align-items:center;gap:7px;background:#f1eefc;color:var(--purple-deep);
  border:0;border-radius:999px;padding:9px 15px;font-weight:800;font-size:.85rem;cursor:pointer;text-decoration:none;font-family:inherit}
#fquiz-app .fq-back:active{transform:translateY(1px)}
#fquiz-app .fq-h{font-weight:900;font-size:1.05rem;color:var(--purple-deep);display:flex;align-items:center;gap:7px}
#fquiz-app .fq-h small{display:block;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.58rem;color:var(--muted)}

#fquiz-app .fq-card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}

/* ---- quiz list grid ---- */
#fquiz-app .fq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:460px){#fquiz-app .fq-grid{grid-template-columns:1fr}}
#fquiz-app .fq-tile{background:var(--card);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);
  cursor:pointer;transition:transform .1s, box-shadow .15s;display:flex;flex-direction:column}
#fquiz-app .fq-tile:active{transform:scale(.985)}
#fquiz-app .fq-tile:hover{box-shadow:0 18px 46px rgba(45,37,95,.22)}
#fquiz-app .fq-tcover{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:3.2rem;position:relative;background-size:cover;background-position:center}
#fquiz-app .fq-tbody{padding:13px 14px 15px}
#fquiz-app .fq-tbody h3{margin:0 0 5px;font-size:1.02rem;line-height:1.2}
#fquiz-app .fq-tmeta{color:var(--muted);font-weight:700;font-size:.74rem}

/* ---- cover (intro / result) ---- */
#fquiz-app .fq-cover{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:4.6rem;position:relative;background-size:cover;background-position:center}
#fquiz-app .fq-cover .fq-spark{position:absolute;font-size:1.2rem;opacity:.9}
#fquiz-app .fq-intro{padding:24px 24px 26px;text-align:center}
#fquiz-app .fq-intro h1{font-size:1.6rem;margin:.1rem 0 .4rem;line-height:1.15}
#fquiz-app .fq-intro p{color:var(--muted);font-weight:600;line-height:1.55;margin:0 0 16px}
#fquiz-app .fq-chips{display:flex;gap:9px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
#fquiz-app .fq-chip{background:#f1eefc;color:var(--purple-deep);font-weight:800;font-size:.76rem;padding:6px 12px;border-radius:999px}

#fquiz-app .fq-btn{border:0;cursor:pointer;font-family:inherit;font-weight:900;font-size:1.05rem;color:var(--purple-ink);
  background:linear-gradient(180deg,var(--gold-lite),var(--gold));padding:15px 22px;border-radius:15px;
  box-shadow:0 6px 16px rgba(240,180,41,.45);width:100%}
#fquiz-app .fq-btn:active{transform:translateY(1px)}
#fquiz-app .fq-btn.alt{background:#f1eefc;color:var(--purple-deep);box-shadow:none}
#fquiz-app .fq-btn.purple{background:var(--purple);color:#fff;box-shadow:0 6px 16px rgba(83,74,183,.4)}

/* ---- question ---- */
#fquiz-app .fq-qhead{padding:18px 22px 0}
#fquiz-app .fq-bar{height:9px;background:#eee7fb;border-radius:999px;overflow:hidden}
#fquiz-app .fq-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--gold));border-radius:999px;transition:width .35s ease}
#fquiz-app .fq-count{font-weight:800;color:var(--muted);font-size:.76rem;margin:10px 2px 0}
#fquiz-app .fq-qbody{padding:8px 22px 24px}
#fquiz-app .fq-qtext{font-size:1.3rem;font-weight:900;line-height:1.25;margin:14px 2px 18px}
#fquiz-app .fq-opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:2px solid var(--line);
  background:#fff;border-radius:15px;padding:14px 15px;margin-bottom:10px;cursor:pointer;font-family:inherit;
  font-weight:800;font-size:1rem;color:var(--ink);transition:transform .08s,border-color .12s,background .12s}
#fquiz-app .fq-opt:hover{border-color:#cdc4f3;background:#faf9ff}
#fquiz-app .fq-opt:active{transform:scale(.99)}
#fquiz-app .fq-opt .fq-emo{font-size:1.45rem;width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#f1eefc;border-radius:11px}
#fquiz-app .fq-opt.sel{border-color:var(--purple);background:#f1eefc}

/* ---- result ---- */
#fquiz-app .fq-rescover{aspect-ratio:1/1;max-height:320px;display:flex;align-items:center;justify-content:center;font-size:7rem;position:relative;overflow:hidden;background-size:cover;background-position:center}
#fquiz-app .fq-resbody{padding:22px 26px 26px;text-align:center}
#fquiz-app .fq-kicker{font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-size:.76rem}
#fquiz-app .fq-resbody h2{font-size:1.95rem;margin:.2rem 0 .5rem;line-height:1.1}
#fquiz-app .fq-resbody p{color:#4a4570;font-weight:600;line-height:1.6;margin:0 0 18px}
#fquiz-app .fq-resact{display:flex;gap:10px;flex-direction:column}
#fquiz-app .fq-conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#fquiz-app .fq-conf i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;animation:fqFall linear forwards}
@keyframes fqFall{to{transform:translateY(380px) rotate(560deg);opacity:.9}}

#fquiz-app .fq-gate,.fquiz-gate{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;text-align:center;font-weight:700;color:#534AB7;max-width:520px;margin:0 auto}
#fquiz-app .fq-empty{text-align:center;color:var(--muted);font-weight:700;padding:40px 20px}
#fquiz-app .fq-spin{text-align:center;color:var(--muted);font-weight:700;padding:50px 20px}