/* ============================================================================
   Hindi → English Challenges — shared styles for the hub (hindi-challenge.html)
   and the quiz (hindi-quiz.html). BolEnglish purple brand.
   ========================================================================== */
:root{
  --hc-pri:#7c3aed; --hc-pri2:#a78bfa; --hc-pink:#ec4899; --hc-indigo:#6366f1;
  --hc-ink:#1f2937; --hc-mut:#6b7280; --hc-line:#e9e7f5; --hc-bg:#f7f6fe;
  --hc-card:#fff; --hc-green:#16a34a; --hc-greenbg:#ecfdf5; --hc-red:#dc2626;
  --hc-redbg:#fef2f2; --hc-say:#f1effe; --hc-saybd:#ddd6fe;
}
.hc{ background:var(--hc-bg); display:block; }
.hc *{ box-sizing:border-box; }
.hc-wrap{ max-width:1180px; margin:0 auto; padding:22px 20px 70px; }
.hc-crumb{ font-size:.85rem; color:var(--hc-mut); margin:0 0 16px; }
.hc-crumb a{ color:var(--hc-pri); text-decoration:none; } .hc-crumb a:hover{ text-decoration:underline; }

/* hero */
.hc-hero{ background:linear-gradient(120deg,#5b21b6,#7c3aed 55%,#8b5cf6); border-radius:22px; color:#fff;
  padding:30px 34px; margin:0 0 24px; box-shadow:0 24px 54px -30px rgba(124,58,237,.6); }
.hc-hpill{ display:inline-block; background:rgba(255,255,255,.18); border-radius:9999px; padding:5px 14px; font-size:.78rem; font-weight:700; margin:0 0 12px; }
.hc-hero h1{ margin:0 0 10px; font-size:2.1rem; line-height:1.12; font-weight:800; }
.hc-hero p{ margin:0 0 18px; color:#ede9fe; max-width:620px; line-height:1.55; }
.hc-hstats{ display:flex; flex-wrap:wrap; gap:22px; font-size:.9rem; color:#f3f0ff; }
.hc-hstats b{ font-size:1.05rem; }

/* two-column grid */
.hc-grid{ display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start; }
@media(max-width:920px){ .hc-grid{ grid-template-columns:1fr; } }

/* section heading + start-all */
.hc-mhead{ display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin:0 0 16px; flex-wrap:wrap; }
.hc-mhead h2{ margin:0 0 4px; font-size:1.4rem; font-weight:800; }
.hc-mhead p{ margin:0; color:var(--hc-mut); font-size:.92rem; }

/* level cards */
.hc-levels{ display:grid; gap:16px; }
.hc-lvl{ background:var(--hc-card); border:1px solid var(--hc-line); border-radius:18px; padding:20px; display:grid;
  grid-template-columns:auto 1fr auto; gap:16px; align-items:center; transition:box-shadow .15s, transform .15s; }
.hc-lvl:hover{ box-shadow:0 18px 40px -26px rgba(124,58,237,.5); transform:translateY(-2px); }
.hc-lvl-n{ width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,var(--hc-pri),var(--hc-indigo));
  color:#fff; display:grid; place-items:center; font-size:1.5rem; font-weight:800; flex:none; }
.hc-lvl-b{ min-width:0; }
.hc-lvl-b h3{ margin:0 0 4px; font-size:1.15rem; font-weight:800; display:flex; align-items:center; gap:8px; }
.hc-lvl-range{ font-size:.78rem; font-weight:700; color:var(--hc-pri); background:#f1effe; border-radius:9999px; padding:2px 10px; }
.hc-lvl-b p{ margin:0 0 10px; color:var(--hc-mut); font-size:.9rem; line-height:1.45; }
.hc-lvl-meter{ height:7px; background:var(--hc-line); border-radius:9999px; overflow:hidden; max-width:260px; }
.hc-lvl-meter i{ display:block; height:100%; background:linear-gradient(90deg,var(--hc-pri),var(--hc-pink)); }
.hc-lvl-best{ font-size:.78rem; color:var(--hc-mut); margin-top:6px; }
.hc-lvl-best b{ color:var(--hc-green); }
.hc-lvl-cta{ text-align:center; flex:none; }
.hc-lvl-cta .hc-btn{ white-space:nowrap; }
@media(max-width:560px){ .hc-lvl{ grid-template-columns:auto 1fr; } .hc-lvl-cta{ grid-column:1 / -1; } .hc-lvl-cta .hc-btn{ width:100%; } }

/* buttons */
.hc-btn{ cursor:pointer; border:0; font:inherit; font-weight:700; border-radius:12px; padding:11px 18px;
  display:inline-flex; gap:8px; align-items:center; justify-content:center; text-decoration:none;
  background:linear-gradient(135deg,var(--hc-pri),var(--hc-pink)); color:#fff; }
.hc-btn:hover{ filter:brightness(1.04); }
.hc-btn.ghost{ background:#fff; color:var(--hc-ink); border:1px solid var(--hc-line); }
.hc-btn.outline{ background:transparent; color:var(--hc-pri); border:1.5px solid var(--hc-saybd); }
.hc-btn.big{ padding:14px 22px; font-size:1.02rem; }
.hc-btn.block{ width:100%; }
.hc-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* sidebar cards */
.hc-side{ display:grid; gap:16px; position:sticky; top:16px; }
.hc-scard{ background:var(--hc-card); border:1px solid var(--hc-line); border-radius:18px; padding:18px; }
.hc-scard h3{ margin:0 0 12px; font-size:1rem; font-weight:800; }
.hc-ring-row{ display:flex; align-items:center; gap:14px; }
.hc-ring{ --p:0; width:74px; height:74px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:conic-gradient(var(--hc-pri) calc(var(--p)*1%), var(--hc-line) 0); }
.hc-ring::before{ content:""; position:absolute; }
.hc-ring b{ width:56px; height:56px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:1.05rem; font-weight:800; color:var(--hc-pri); }
.hc-ring-row .t{ font-size:.9rem; color:var(--hc-mut); } .hc-ring-row .t b{ color:var(--hc-ink); }
.hc-tips{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.hc-tips li{ display:flex; gap:9px; font-size:.9rem; color:var(--hc-ink); line-height:1.4; }
.hc-tips li::before{ content:"💡"; flex:none; }
.hc-note{ background:linear-gradient(135deg,#fff7ed,#fdf2f8); border:1px solid #fde4c6; border-radius:14px; padding:13px 15px; font-size:.85rem; color:#7c2d12; line-height:1.5; }

/* ========================= QUIZ ========================= */
.hc-quiz{ max-width:760px; margin:0 auto; }
.hc-qtop{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 18px; flex-wrap:wrap; }
.hc-qback{ color:var(--hc-pri); text-decoration:none; font-weight:700; font-size:.9rem; }
.hc-qlvl{ font-size:.9rem; color:var(--hc-mut); font-weight:600; }
/* segmented progress bar (matches the mockup) */
.hc-segs{ display:flex; gap:6px; margin:0 0 26px; }
.hc-seg{ flex:1; height:8px; border-radius:9999px; background:var(--hc-line); overflow:hidden; }
.hc-seg i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--hc-pri),var(--hc-pri2)); transition:width .3s; }
.hc-seg.done i{ width:100%; }
.hc-seg.cur i{ width:100%; }

.hc-card-q{ background:var(--hc-card); border:1px solid var(--hc-line); border-radius:22px; padding:34px 30px;
  box-shadow:0 20px 50px -34px rgba(124,58,237,.5); }
.hc-qlabel{ text-align:center; color:var(--hc-mut); font-size:.92rem; font-weight:600; margin:0 0 10px; }
.hc-qhindi{ text-align:center; font-size:2rem; font-weight:800; color:var(--hc-ink); line-height:1.3; margin:0 0 6px; }
.hc-qhindi .en{ display:none; }
.hc-qday{ text-align:center; font-size:.78rem; color:var(--hc-mut); margin:0 0 26px; }

/* options */
.hc-opts{ display:grid; gap:14px; }
.hc-opt{ width:100%; text-align:left; cursor:pointer; background:#fff; border:1.5px solid var(--hc-line);
  border-radius:14px; padding:16px 18px; font:inherit; font-size:1.05rem; color:var(--hc-ink);
  display:flex; align-items:center; gap:14px; transition:border-color .12s, background .12s, box-shadow .12s; }
.hc-opt:hover:not([disabled]){ border-color:var(--hc-pri2); box-shadow:0 8px 22px -16px rgba(124,58,237,.6); }
.hc-opt .lt{ width:30px; height:30px; border-radius:8px; background:#f1effe; color:var(--hc-pri); font-weight:800;
  display:grid; place-items:center; flex:none; font-size:.95rem; }
.hc-opt .mk{ margin-left:auto; font-weight:800; font-size:1.1rem; opacity:0; flex:none; }
.hc-opt.correct{ border-color:var(--hc-green); background:var(--hc-greenbg); }
.hc-opt.correct .lt{ background:var(--hc-green); color:#fff; }
.hc-opt.correct .mk{ opacity:1; color:var(--hc-green); }
.hc-opt.wrong{ border-color:var(--hc-red); background:var(--hc-redbg); }
.hc-opt.wrong .lt{ background:var(--hc-red); color:#fff; }
.hc-opt.wrong .mk{ opacity:1; color:var(--hc-red); }
.hc-opt[disabled]{ cursor:default; }

/* feedback + next */
.hc-fb{ margin:18px 0 0; border-radius:14px; padding:14px 16px; font-size:.95rem; line-height:1.5; display:none; }
.hc-fb.show{ display:block; }
.hc-fb.ok{ background:var(--hc-greenbg); border:1px solid #bbf7d0; color:#166534; }
.hc-fb.no{ background:var(--hc-redbg); border:1px solid #fecaca; color:#991b1b; }
.hc-fb b{ font-weight:800; }
.hc-qnav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; }
.hc-score-pill{ font-size:.9rem; color:var(--hc-mut); font-weight:600; }

/* result screen */
.hc-result{ text-align:center; background:var(--hc-card); border:1px solid var(--hc-line); border-radius:22px;
  padding:42px 30px; box-shadow:0 20px 50px -34px rgba(124,58,237,.5); }
.hc-result .emo{ font-size:3.2rem; }
.hc-result h2{ margin:10px 0 6px; font-size:1.7rem; font-weight:800; }
.hc-result .big{ font-size:3rem; font-weight:800; color:var(--hc-pri); margin:6px 0; }
.hc-result .sub{ color:var(--hc-mut); margin:0 0 22px; }
.hc-result-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hc-review{ margin:26px auto 0; max-width:620px; text-align:left; }
.hc-review h3{ font-size:1rem; font-weight:800; margin:0 0 10px; }
.hc-rev{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--hc-line);
  border-radius:12px; margin-bottom:8px; background:#fff; }
.hc-rev .st{ flex:none; font-weight:800; } .hc-rev.ok .st{ color:var(--hc-green); } .hc-rev.no .st{ color:var(--hc-red); }
.hc-rev .tx{ font-size:.92rem; } .hc-rev .tx .hi{ font-weight:700; } .hc-rev .tx .en{ color:var(--hc-mut); }

/* Hinglish toggle: the hub cards/intro are English-only here; quiz prompt is Hindi by design.
   The optional romanised hint shows only under html[lang="hi-Latn"]. */
.hc-roman{ display:none; text-align:center; color:var(--hc-pri); font-size:.95rem; margin:0 0 20px; }
html[lang="hi-Latn"] .hc-roman{ display:block; }