/* ===== PrepYodha Practice Arena — Warrior theme ===== */
:root{
  --bg:#0b1120;
  --bg-2:#0e1730;
  --panel:#121c34;
  --panel-2:#16213d;
  --line:#23304f;
  --ink:#eef2ff;
  --ink-soft:#aebad6;
  --ink-dim:#7c89a8;
  --accent:#cf9a52;      /* warrior saffron/amber */
  --accent-2:#b07a3c;
  --crimson:#e11d48;
  --good:#22c55e;
  --good-bg:#0f2e1d;
  --bad:#ef4444;
  --bad-bg:#2e1213;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --max:1040px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#1c3a5e 0%,var(--bg) 55%);
  color:var(--ink);
  min-height:100vh;
  line-height:1.55;
}
h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif;line-height:1.15;letter-spacing:-.02em}
.accent{color:var(--accent)}

/* ---- top bar ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid var(--line);
  background:rgba(11,17,32,.7);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{font-size:22px}
.brand-name{font-family:'Plus Jakarta Sans';font-weight:800;font-size:20px}
.brand-tag{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);border-left:1px solid var(--line);padding-left:10px;margin-left:2px;
}
@media(max-width:560px){.brand-tag{display:none}}

main{max-width:var(--max);margin:0 auto;padding:28px 20px 80px}
.screen{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- hero ---- */
.hero{text-align:center;padding:24px 0 34px}
.eyebrow{
  display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);background:rgba(207,154,82,.1);border:1px solid rgba(207,154,82,.3);
  padding:6px 14px;border-radius:999px;margin-bottom:18px;font-weight:600;
}
.hero h1{font-size:clamp(34px,6vw,56px);font-weight:800}
.hero .sub{max-width:620px;margin:16px auto 0;color:var(--ink-soft);font-size:17px}

/* ---- mode cards ---- */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
@media(max-width:780px){.mode-grid{grid-template-columns:1fr}}
.mode-card{
  position:relative;background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;
}
.mode-card.featured{border-color:rgba(207,154,82,.45);box-shadow:0 14px 44px rgba(207,154,82,.12)}
.mode-badge{
  position:absolute;top:16px;right:16px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  padding:5px 10px;border-radius:999px;text-transform:uppercase;
}
.mode-badge.free{background:rgba(34,197,94,.15);color:#6ee7a8;border:1px solid rgba(34,197,94,.3)}
.mode-badge.hot{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#1a1205}
.mode-icon{font-size:34px}
.mode-card h2{font-size:25px;font-weight:700}
.mode-q{color:var(--ink);font-size:15px}
.mode-q strong{color:var(--accent)}
.mode-desc{color:var(--ink-soft);font-size:14.5px;flex:0 0 auto}
.mini-feats{list-style:none;display:flex;flex-direction:column;gap:7px;margin:6px 0 4px;font-size:14px;color:var(--ink-soft)}

/* subject chips */
.subj-pick{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:6px 0 2px}
.subj-label{font-size:13px;color:var(--ink-dim);margin-right:2px}
.chip{
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);
  padding:6px 13px;border-radius:999px;font-size:13px;cursor:pointer;font-weight:500;transition:.15s;
}
.chip:hover{border-color:var(--accent)}
.chip.active{background:var(--accent);color:#1a1205;border-color:var(--accent);font-weight:700}

/* buttons */
.primary-btn{
  margin-top:14px;border:1px solid var(--accent);background:rgba(207,154,82,.12);color:var(--accent);
  font-family:'Plus Jakarta Sans';font-weight:700;font-size:15.5px;padding:13px 20px;border-radius:12px;cursor:pointer;
  transition:.18s;width:100%;
}
.primary-btn:hover:not(:disabled){background:rgba(207,154,82,.2)}
.primary-btn.solid{background:linear-gradient(90deg,#d12b39,#e23b47);color:#fff;border:none}
.primary-btn.solid:hover{filter:brightness(1.07)}
.primary-btn:disabled{opacity:.4;cursor:not-allowed}
.ghost-btn{
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);
  padding:11px 18px;border-radius:12px;cursor:pointer;font-size:14.5px;font-weight:600;text-decoration:none;transition:.15s;
}
.ghost-btn:hover{border-color:var(--ink-soft);color:var(--ink)}
.pool-note{text-align:center;color:var(--ink-dim);font-size:13px;margin-top:26px}

/* ---- quiz ---- */
.quiz-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.qh-left{display:flex;align-items:center;gap:12px}
.mode-pill{background:var(--panel-2);border:1px solid var(--line);padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--accent)}
.q-progress{color:var(--ink-soft);font-size:14px;font-weight:600}
.timer{
  font-family:'Plus Jakarta Sans';font-weight:800;font-size:20px;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);padding:6px 14px;border-radius:10px;letter-spacing:.04em;
}
.timer.warn{color:var(--crimson);border-color:var(--crimson);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}

.progress-track{height:6px;background:var(--panel);border-radius:99px;overflow:hidden;margin-bottom:20px}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s}

.q-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.q-meta{display:flex;gap:8px;margin-bottom:14px}
.subj-tag,.topic-tag{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;text-transform:capitalize}
.subj-tag{background:rgba(207,154,82,.14);color:var(--accent)}
.topic-tag{background:var(--panel-2);color:var(--ink-dim)}
.q-text{font-size:19px;font-weight:500;color:var(--ink);margin-bottom:22px;font-family:'Plus Jakarta Sans'}

.options{display:flex;flex-direction:column;gap:11px}
.opt{
  display:flex;align-items:center;gap:13px;text-align:left;width:100%;
  background:var(--panel-2);border:1.5px solid var(--line);color:var(--ink);
  padding:15px 16px;border-radius:12px;cursor:pointer;font-size:15.5px;transition:.14s;font-family:'Inter';
}
.opt:hover:not(.locked){border-color:var(--accent);background:#1a2543}
.opt .key{
  flex:0 0 28px;height:28px;border-radius:7px;background:var(--bg);border:1px solid var(--line);
  display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--ink-soft);text-transform:uppercase;
}
.opt.selected{border-color:var(--accent);background:#1d2240}
.opt.selected .key{background:var(--accent);color:#1a1205;border-color:var(--accent)}
.opt.correct{border-color:var(--good);background:var(--good-bg)}
.opt.correct .key{background:var(--good);color:#04210f;border-color:var(--good)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.wrong .key{background:var(--bad);color:#fff;border-color:var(--bad)}
.opt.locked{cursor:default}

.feedback{margin-top:18px;padding:14px 16px;border-radius:12px;font-size:14.5px}
.feedback.good{background:var(--good-bg);border:1px solid rgba(34,197,94,.4);color:#a7f3c9}
.feedback.bad{background:var(--bad-bg);border:1px solid rgba(239,68,68,.4);color:#fab0b0}
.feedback strong{font-weight:700}
.expl{margin-top:11px;padding-top:11px;border-top:1px dashed rgba(255,255,255,.18);color:var(--ink-soft);font-size:14px;line-height:1.6}
.expl-label{display:inline-block;font-weight:700;color:var(--accent);margin-right:8px;font-size:12.5px;letter-spacing:.04em}
.rv-why{margin-top:9px;font-size:13.5px;color:var(--ink-soft);line-height:1.6;background:var(--bg);border-radius:8px;padding:10px 12px}

.quiz-nav{display:flex;align-items:center;gap:12px;margin-top:20px}
.quiz-nav .spacer{flex:1}
.quiz-nav .primary-btn,.quiz-nav .ghost-btn{margin-top:0;width:auto;min-width:130px}

/* palette */
.palette{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;justify-content:center}
.pal-dot{
  width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--ink-soft);font-weight:600;font-size:13.5px;cursor:pointer;transition:.14s;
}
.pal-dot.answered{background:var(--accent);color:#1a1205;border-color:var(--accent)}
.pal-dot.current{outline:2px solid var(--ink);outline-offset:1px}

/* ---- result ---- */
.result-hero{text-align:center;padding:10px 0 26px}
.score-ring{
  width:140px;height:140px;border-radius:50%;margin:0 auto 18px;
  display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--accent) var(--pct,0%),var(--panel) 0);
}
.score-ring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line)}
.score-num,.score-of{position:relative;z-index:1;font-family:'Plus Jakarta Sans';font-weight:800}
.score-num{font-size:46px;color:var(--ink)}
.score-of{font-size:15px;color:var(--ink-dim);margin-top:-4px}
.result-hero h2{font-size:30px;font-weight:800}
.result-sub{color:var(--ink-soft);margin-top:6px}

.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 22px}
@media(max-width:600px){.result-stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.stat .v{font-family:'Plus Jakarta Sans';font-weight:800;font-size:24px}
.stat .l{font-size:12px;color:var(--ink-dim);margin-top:3px;text-transform:uppercase;letter-spacing:.06em}
.stat.good .v{color:var(--good)}
.stat.bad .v{color:var(--bad)}

.subj-breakdown{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.bd-row{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.bd-top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px}
.bd-name{font-weight:600;text-transform:capitalize}
.bd-track{height:8px;background:var(--bg);border-radius:99px;overflow:hidden}
.bd-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px}

.upsell{
  background:linear-gradient(135deg,rgba(207,154,82,.14),rgba(225,29,72,.12));
  border:1px solid rgba(207,154,82,.4);border-radius:var(--radius);padding:24px;text-align:center;margin-bottom:26px;
}
.upsell h3{font-size:21px;margin-bottom:8px}
.upsell p{color:var(--ink-soft);max-width:480px;margin:0 auto 6px}
.upsell .primary-btn{max-width:280px;margin:14px auto 0}

.review{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.review h3{margin-bottom:4px}
.rv{background:var(--panel);border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:14px 16px}
.rv.ok{border-left-color:var(--good)}
.rv.no{border-left-color:var(--bad)}
.rv .rq{font-size:14.5px;font-weight:500;margin-bottom:8px}
.rv .ra{font-size:13.5px;color:var(--ink-soft)}
.rv .ra .you-wrong{color:var(--bad)}
.rv .ra .right{color:var(--good);font-weight:600}

.result-actions{display:flex;gap:12px;justify-content:center}
.result-actions .primary-btn,.result-actions .ghost-btn{width:auto;min-width:160px;margin-top:0}

[hidden]{display:none !important}