/* ==========================================================================
   QUIZ THEME — extracted unchanged from the original test interface so
   every topic test and the legacy Foundation Diagnostic look and behave
   identically. Do not redesign this file without reason (Pranav's brief:
   preserve the test UI exactly).
   ========================================================================== */
:root{
  --bg: #10231d;
  --bg2: #0b1a15;
  --paper: #f3efe4;
  --paper-dim: #e7e1d0;
  --ink: #1c2b23;
  --ink-soft: #4a5951;
  --line: #c9c0a6;
  --indicator: #2f8f6f;
  --indicator-deep: #1d6b52;
  --burette: #b3542f;
  --wrong: #a83232;
  --gold: #c8a24a;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --serif: 'Source Serif 4', 'Georgia', serif;
  --sans: 'Inter', 'Helvetica Neue', sans-serif;
  --blush: #ece0f7;
  --blush-deep: #b98fe0;
  --rose: #7a4bab;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body.quiz-body{
  background: radial-gradient(ellipse at top, #16342a 0%, var(--bg) 45%, var(--bg2) 100%);
  color: var(--ink);
  font-family: var(--sans);
  min-height:100vh;
  padding: 32px 16px 80px;
}
.wrap{max-width: 880px; margin: 0 auto;}
.masthead{
  background: var(--paper); border-radius: 6px; padding: 28px 32px 22px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.15);
  position: relative; overflow: hidden;
}
.masthead::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background: repeating-linear-gradient(90deg, var(--indicator) 0 24px, var(--burette) 24px 48px);
  opacity:0.85;
}
.back-link{ font-family:var(--mono); font-size:11.5px; color:var(--indicator-deep); text-decoration:none; display:inline-block; margin-bottom:10px;}
.back-link:hover{ text-decoration:underline; }
.eyebrow{ font-family: var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--indicator-deep); font-weight:600; margin-bottom:6px;}
h1{ font-family: var(--serif); font-size: 30px; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
.sub{ font-size:13.5px; color:var(--ink-soft); margin-top:6px; max-width:56ch; line-height:1.5;}
.meta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; padding-top:16px; border-top:1px dashed var(--line);}
.meta-chip{ font-family: var(--mono); font-size:11.5px; color:var(--ink); background: var(--paper-dim); border:1px solid var(--line); border-radius:3px; padding:5px 10px;}
.meta-chip b{color:var(--indicator-deep);}
.love-banner{ font-family:var(--serif); font-style:italic; font-size:14px; color: var(--rose); background: var(--blush); border-radius:12px; padding:10px 18px; display:inline-block; line-height:1.5;}
.love-banner-wrap{ text-align:center; }
.start-card{ background: var(--paper); border-radius:6px; margin-top:18px; padding:26px 32px 30px; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);}
.topic-list{ list-style:none; margin-top:14px; display:grid; gap:6px; }
.topic-list li{ display:flex; align-items:baseline; gap:12px; font-size:13.5px; padding:6px 4px; border-bottom:1px solid #ddd6bf;}
.topic-list .n{ font-family:var(--mono); color:var(--burette); width:22px; flex:none;}
.topic-list .cnt{ margin-left:auto; font-family:var(--mono); color:var(--ink-soft); font-size:12px;}
.start-btn{
  margin-top:22px; width:100%; padding:16px; border:none; border-radius:5px; cursor:pointer;
  background: linear-gradient(135deg, var(--indicator), var(--indicator-deep));
  color:#f3efe4; font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.02em;
  box-shadow: 0 8px 20px -8px rgba(47,143,111,0.6);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: gentlePulse 2.6s ease-in-out infinite;
}
@keyframes gentlePulse{ 0%,100%{ box-shadow: 0 8px 20px -8px rgba(47,143,111,0.6); } 50%{ box-shadow: 0 10px 28px -6px rgba(47,143,111,0.85); } }
.start-btn:hover{ transform: translateY(-2px) scale(1.01); box-shadow: 0 12px 26px -8px rgba(47,143,111,0.75); animation-play-state: paused;}
.rule-box{ margin-top:16px; font-size:12.5px; color:var(--ink-soft); background:var(--paper-dim); border-left:3px solid var(--gold); padding:10px 14px; border-radius:0 4px 4px 0; line-height:1.55;}
.progress-track{ margin-top:18px; height:6px; background: rgba(255,255,255,0.08); border-radius:3px; overflow:hidden;}
.progress-fill{ height:100%; background: linear-gradient(90deg, var(--indicator), var(--gold)); width:0%; transition: width .25s ease;}
.topbar{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding:0 4px; font-family:var(--mono); font-size:12px; color:#cfe8dc; flex-wrap:wrap; gap:8px;}
.topbar .score-live{color:var(--gold); font-weight:600;}
.qcard{ background: var(--paper); border-radius:6px; margin-top:14px; padding:28px 30px 26px; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6); animation: fadeIn .25s ease;}
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.qhead{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px;}
.qnum{ font-family:var(--mono); font-size:12px; color:var(--burette); letter-spacing:.05em;}
.qtopic-tag{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; background: var(--paper-dim); border:1px solid var(--line); border-radius:3px; padding:3px 8px; color:var(--indicator-deep);}
.qtext{ font-family:var(--serif); font-size:19px; line-height:1.45; color:var(--ink); margin-bottom:18px;}
.options{ display:grid; gap:10px; }
.opt{
  display:flex; align-items:flex-start; gap:12px; text-align:left;
  border:1.5px solid var(--line); border-radius:5px; padding:12px 14px; cursor:pointer;
  background: #fbf9f2; font-size:14.5px; color:var(--ink); font-family:var(--sans);
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.opt:hover{ border-color: var(--indicator); background:#f2f4ec; transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(0,0,0,0.25);}
.opt:active{ transform: translateY(0) scale(0.99); }
.opt .tag{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); width:18px; flex:none; padding-top:1px;}
.opt.selected{ border-color: var(--rose); background:#f2e9fa; }
.opt.locked-correct{ border-color: var(--indicator-deep); background:#dcf0e3; animation: popIn .3s ease; }
.opt.locked-wrong{ border-color: var(--wrong); background:#f7e2df; animation: shake .35s ease; }
.opt.locked-dim{ opacity:.55; }
.opt:disabled, .opt.disabled{ cursor:default; }
@keyframes popIn{ 0%{transform:scale(0.97);} 60%{transform:scale(1.02);} 100%{transform:scale(1);} }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
.explain{ margin-top:16px; padding:12px 14px; border-radius:5px; font-size:13px; line-height:1.55; border-left:3px solid var(--indicator-deep); background:var(--paper-dim); color:var(--ink-soft); display:none;}
.explain.show{ display:block; animation: fadeIn .2s ease;}
.explain b{ color:var(--ink); }
.navrow{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:10px;}
.btn{ font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; padding:10px 18px; border-radius:4px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; transition: transform .12s ease, box-shadow .12s ease;}
.btn:hover:not(:disabled){ transform: translateY(-1px); box-shadow: 0 6px 12px -6px rgba(0,0,0,0.3); }
.btn:active:not(:disabled){ transform: translateY(0) scale(0.98); }
.btn.primary{ background: var(--indicator-deep); border-color: var(--indicator-deep); color:#f3efe4; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn.skip{ color: var(--ink-soft); border-color: var(--line); }
.jumpgrid{ margin-top:16px; display:grid; grid-template-columns:repeat(10,1fr); gap:5px;}
.jumpgrid button{ aspect-ratio:1; font-family:var(--mono); font-size:10.5px; border-radius:3px; border:1px solid var(--line); background:#fbf9f2; color:var(--ink-soft); cursor:pointer;}
.jumpgrid button.current{ border-color:var(--gold); box-shadow: 0 0 0 2px rgba(200,162,74,.35); animation: currentPulse 1.8s ease-in-out infinite; }
@keyframes currentPulse{ 0%,100%{ box-shadow: 0 0 0 2px rgba(200,162,74,.35);} 50%{ box-shadow: 0 0 0 5px rgba(200,162,74,.25);} }
.jumpgrid button.answered-correct{ background:#dcf0e3; border-color:var(--indicator-deep); color:var(--ink);}
.jumpgrid button.answered-wrong{ background:#f7e2df; border-color:var(--wrong); color:var(--ink);}
.jumpgrid button.skipped{ background:#efe9d6; }
.result-hero{ background: var(--paper); border-radius:6px; padding:32px; margin-top:18px; text-align:center; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);}
.big-score{ font-family:var(--serif); font-size:56px; font-weight:700; color:var(--indicator-deep); line-height:1; animation: scoreIn .5s ease; }
@keyframes scoreIn{ from{ opacity:0; transform: scale(0.85) translateY(8px);} to{ opacity:1; transform: scale(1) translateY(0);} }
.big-score span{ font-size:22px; color:var(--ink-soft); font-weight:500;}
.pct-tag{ font-family:var(--mono); font-size:13px; margin-top:8px; color:var(--ink-soft);}
.stat-strip{ display:flex; justify-content:center; gap:26px; margin-top:22px; flex-wrap:wrap;}
.stat{ text-align:center; }
.stat .v{ font-family:var(--serif); font-size:24px; font-weight:600; }
.stat .k{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-top:2px;}
.stat.correct .v{color:var(--indicator-deep);}
.stat.wrong .v{color:var(--wrong);}
.stat.skip .v{color:var(--ink-soft);}
.love-note{ margin-top:20px; position:relative; overflow:hidden; background: linear-gradient(135deg, var(--blush) 0%, #fdf2e9 100%); border: 1.5px solid var(--blush-deep); border-radius:10px; padding:20px 22px; text-align:left; font-family: var(--serif); font-size:15px; line-height:1.65; color:#3c2a52; box-shadow: 0 8px 24px -10px rgba(122,75,171,0.35);}
.love-note .ln-eyebrow{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color: var(--rose); margin-bottom:8px; font-weight:600;}
.analyzer-card{ background: var(--paper); border-radius:6px; padding:26px 30px; margin-top:16px; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);}
.analyzer-card h2{ font-family:var(--serif); font-size:20px; margin-bottom:16px;}
.topic-row{ display:grid; grid-template-columns: 150px 1fr 90px; align-items:center; gap:14px; margin-bottom:11px; font-size:12.5px;}
.topic-row .tname{ font-family:var(--mono); color:var(--ink); }
.bar-track{ height:9px; background:#e3ddc9; border-radius:5px; overflow:hidden; position:relative;}
.bar-fill{ height:100%; border-radius:5px; background: linear-gradient(90deg, var(--indicator), var(--indicator-deep)); }
.topic-row .tscore{ font-family:var(--mono); text-align:right; color:var(--ink-soft);}
.verdict{ margin-top:20px; padding:14px 16px; border-radius:5px; font-size:13px; line-height:1.6; background:var(--paper-dim); border-left:3px solid var(--gold); color:var(--ink-soft);}
.review-list{ margin-top:14px; display:grid; gap:10px;}
.review-item{ border:1px solid var(--line); border-radius:5px; padding:14px 16px; background:#fbf9f2; }
.review-item .rq{ font-size:13.5px; font-family:var(--serif); margin-bottom:6px;}
.review-item .ra{ font-size:12.5px; color:var(--ink-soft); line-height:1.5;}
.review-item.wrong{ border-left:3px solid var(--wrong); }
.review-item.skipped{ border-left:3px solid var(--line); }
.pill{ display:inline-block; font-family:var(--mono); font-size:9.5px; text-transform:uppercase; padding:2px 7px; border-radius:3px; margin-right:8px;}
.pill.w{background:#f7e2df; color:var(--wrong);}
.pill.s{background:#efe9d6; color:var(--ink-soft);}
.restart-row{ text-align:center; margin-top:22px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
footer{ text-align:center; font-family:var(--mono); font-size:10.5px; color:#7fa090; margin-top:26px; }
.hearts-fall{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:5;}
.heart-piece{ position:absolute; top:-30px; font-size:18px; opacity:0.85; animation: heartFall linear forwards; }
@keyframes heartFall{ to{ transform: translateY(110vh) rotate(360deg); opacity:0.15; } }
.modal-backdrop{ position:fixed; inset:0; background: rgba(28,43,35,0.55); backdrop-filter: blur(2px); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; animation: fadeIn .15s ease;}
.confirm-modal{ background: linear-gradient(150deg, #fff 0%, var(--blush) 130%); border: 1.5px solid var(--blush-deep); border-radius:12px; padding:26px 26px 22px; max-width:380px; width:100%; text-align:center; box-shadow: 0 24px 60px -18px rgba(122,75,171,0.5); animation: fadeIn .2s ease;}
.cm-icon{ font-size:28px; margin-bottom:6px;}
.cm-line{ font-family:var(--serif); font-size:15.5px; color:#3c2a52; line-height:1.5; margin-bottom:14px;}
.cm-choice{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); background:#fff; border:1px solid var(--line); border-radius:5px; padding:8px 10px; margin-bottom:18px;}
.cm-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.cm-actions .btn{ font-size:11.5px; }
.cm-actions .btn.primary{ background: var(--rose); border-color: var(--rose); }
@media (max-width:600px){
  .qcard, .masthead, .start-card, .analyzer-card, .result-hero{ padding:20px 18px; }
  h1{ font-size:22px; }
  .jumpgrid{ grid-template-columns:repeat(8,1fr); }
  .topic-row{ grid-template-columns: 100px 1fr 60px; font-size:11px;}
  .big-score{ font-size:42px; }
}