/* ═══════════════════════════════════════════════════════════
   quiz.css  —  Answer inputs, feedback, MCQ pills, scoreboard
   ═══════════════════════════════════════════════════════════ */

/* ── Theme tokens ── */
:root {
  --ring: #e5e7eb;
  --ink:  #0f172a;
  --muted:#6b7280;
  --ok:   #16a34a;
  --bad:  #dc2626;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ring: #263044;
    --ink:  #e5e7eb;
    --muted:#9ca3af;
    --ok:   #22c55e;
    --bad:  #f87171;
  }
}

/* ═══════════════════════════════════
   Answer Inputs + Check Buttons
   ═══════════════════════════════════ */
.answer-box {
  margin: .6rem 0;
  display: flex; gap: .5rem;
  justify-content: flex-end; align-items: center;
}
.answer-box input[type="text"],
.answer-box input:not([type]) {
  width: 120px; padding: .5rem .6rem;
  border: 1px solid var(--ring); border-radius: .55rem;
  background: linear-gradient(180deg, #eef2ff, #e0e7ff);
  color: #0b3b6a; text-align: center; outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .04s ease;
}
.answer-box input[type="text"]:active { transform: scale(.99); }
.answer-box button {
  padding: .5rem .85rem; border: 1px solid transparent; border-radius: .65rem;
  color: #fff; font-weight: 600; cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.answer-box button:active { transform: translateY(1px) scale(.99); }

/* Section colours */
.qa-sa  .answer-box input { background: linear-gradient(180deg,#dbeafe,#bfdbfe); color:#1e3a8a; }
.qa-sa  .answer-box input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.25); }
.qa-sa  .answer-box button { background: linear-gradient(120deg,#3b82f6,#2563eb); }

.qa-mcq .answer-box input { background: linear-gradient(180deg,#d1fae5,#a7f3d0); color:#065f46; }
.qa-mcq .answer-box input:focus { border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.25); }
.qa-mcq .answer-box button { background: linear-gradient(120deg,#34d399,#059669); }

.va     .answer-box input { background: linear-gradient(180deg,#fef3c7,#fde68a); color:#78350f; }
.va     .answer-box input:focus { border-color:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.25); }
.va     .answer-box button { background: linear-gradient(120deg,#fbbf24,#d97706); }

/* ═══════════════════════════════════
   Feedback
   ═══════════════════════════════════ */
.feedback {
  min-height: 1.25rem;
  white-space: pre-line;
  padding: .4rem .6rem;
  border-radius: 6px;
  margin-top: .3rem;
}
[data-question].correct   .feedback { color:var(--ok);  font-weight:600; background:rgba(34,197,94,.1);  border:1px solid rgba(34,197,94,.3); }
[data-question].incorrect .feedback { color:var(--bad); font-weight:600; background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.3); }

.feedback[data-right-answer]::after {
  display:block; margin-top:.25rem; font-weight:500;
  content:attr(data-right-answer);
}
.feedback[data-right-answer-correct="true"]::after {
  color:var(--ok); content:"✔️ " attr(data-right-answer);
}
.feedback[data-right-answer]:not([data-right-answer-correct])::after {
  color:#f59e0b; content:"✖️ " attr(data-right-answer);
}

/* ═══════════════════════════════════
   MCQ Pills
   ═══════════════════════════════════ */
.mcq-box {
  flex-direction:row; align-items:center;
  justify-content:flex-end; gap:.5rem; flex-wrap:nowrap;
}
.mcq-box label {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .65rem; border:1px solid var(--ring); border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  cursor:pointer; user-select:none;
  transition:border-color .15s, box-shadow .15s, background .15s, color .15s;
  font-size:.92rem;
}
.qa-sa  .mcq-box label:hover { border-color:#3b82f6; box-shadow:0 4px 12px rgba(59,130,246,.2); }
.qa-sa  .mcq-box label:has(input:checked) { background:linear-gradient(180deg,#3b82f6,#2563eb); color:#fff; border-color:transparent; }
.qa-mcq .mcq-box label:hover { border-color:#10b981; box-shadow:0 4px 12px rgba(16,185,129,.2); }
.qa-mcq .mcq-box label:has(input:checked) { background:linear-gradient(180deg,#34d399,#059669); color:#fff; border-color:transparent; }
.va     .mcq-box label:hover { border-color:#f59e0b; box-shadow:0 4px 12px rgba(245,158,11,.2); }
.va     .mcq-box label:has(input:checked) { background:linear-gradient(180deg,#fbbf24,#d97706); color:#fff; border-color:transparent; }
.mcq-box input[type="radio"] { accent-color:#fff; }
@media (max-width:560px) { .mcq-box { flex-wrap:wrap; justify-content:flex-end; } }

/* ═══════════════════════════════════
   Locked State
   ═══════════════════════════════════ */
[data-question][data-attempted="true"] input,
[data-question][data-attempted="true"] textarea,
[data-question][data-attempted="true"] .mcq-box label,
[data-question][data-attempted="true"] .answer-box button {
  pointer-events:none; opacity:.6; cursor:not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════
   SCOREBOARD  —  Professional Dark Glassmorphism
   ═══════════════════════════════════════════════════════════ */

/* ── Widget container ── */
.score-widget {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}

/* ── FAB Toggle ── */
.score-fab {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
  box-shadow: 0 8px 24px rgba(99,102,241,.5), 0 2px 6px rgba(0,0,0,.25);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.score-fab:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 14px 32px rgba(99,102,241,.6), 0 4px 10px rgba(0,0,0,.3);
}
.score-fab:active { transform: scale(.93); }
.score-fab svg { width: 1.25rem; height: 1.25rem; pointer-events: none; }

/* ── Card ── compact, well-spaced ── */
.score-card {
  width: 280px;
  background:
    radial-gradient(ellipse at top left, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(6,182,212,.12), transparent 55%),
    linear-gradient(180deg, rgba(15,23,42,.97), rgba(8,12,28,.97));
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 18px;
  padding: .75rem .85rem .85rem;
  box-shadow:
    0 24px 48px rgba(0,0,0,.55),
    0  6px 16px rgba(0,0,0,.35),
    0  0 0 1px rgba(99,102,241,.08),
    inset 0 1px 0 rgba(255,255,255,.08);
  color: #f1f5f9;
  transform-origin: bottom right;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.score-widget[data-collapsed="true"] .score-card {
  transform: scale(.82) translateY(16px);
  opacity: 0;
  pointer-events: none;
}

/* ── Card header ── */
.sc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .55rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sc-title {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #64748b;
  display: flex; align-items: center;
}
.sc-close {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: #64748b;
  cursor: pointer;
  font-size: .65rem;
  display: grid; place-items: center;
  transition: background .15s, color .15s, transform .1s;
  line-height: 1;
}
.sc-close:hover { background: rgba(239,68,68,.2); color: #fca5a5; border-color: rgba(239,68,68,.3); transform: scale(1.1); }

/* ── Hero block — compact two-row layout ───────────────────────────────── */
.sc-hero {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .65rem .7rem .6rem;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top, rgba(99,102,241,.16), transparent 75%),
    linear-gradient(180deg, rgba(99,102,241,.07), rgba(6,182,212,.04));
  border: 1px solid rgba(99,102,241,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 12px rgba(0,0,0,.18);
  margin-bottom: .65rem;
  position: relative;
  overflow: hidden;
}
/* Subtle animated shine on score change */
.sc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%);
  transform: translateX(-100%);
  pointer-events: none;
}
.sc-hero.shine::before { animation: sc-shine .9s ease-out; }
@keyframes sc-shine { to { transform: translateX(100%); } }

/* Row 1: big score | small ring | reset (pinned right) */
.sc-top {
  display: flex;
  align-items: center;
  gap: .55rem;
}

/* Score number — biggest element, takes available space */
.sc-score-wrap {
  flex: 1;
  min-width: 0;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: .15rem;
}
.sc-score-val {
  display: inline-flex;
  align-items: baseline;
  gap: .1rem;
}
.score-numerator {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, #ffffff 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(165,180,252,.25);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transform-origin: left center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sc-hero.shine .score-numerator {
  animation: sc-pulse .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sc-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.score-denominator {
  font-size: .85rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.score-percent {
  display: none; /* moved out of the score block; the ring shows % */
}

/* SVG ring — small accent in the score row */
.sc-ring-wrap {
  position: relative;
  width: 44px; height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(99,102,241,.35));
}
.sc-ring {
  width: 44px; height: 44px;
  transform: rotate(-90deg);
}
.sc-ring-track {
  fill: none;
  stroke: rgba(255,255,255,.1);
  stroke-width: 7;
}
.sc-ring-prog {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 213.63;
  stroke-dashoffset: 213.63;
  transition: stroke-dashoffset .7s cubic-bezier(.34,1.56,.64,1);
}
.sc-ring-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.sc-ring-pct {
  font-size: .65rem; font-weight: 800;
  color: #f1f5f9;
  line-height: 1;
  letter-spacing: -.02em;
}
.sc-ring-sub { display: none; }

/* Reset — small text button pinned to the right of the score row */
.sc-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  flex-shrink: 0;
  padding: 0 .7rem;
  border-radius: 8px;
  border: 1px solid rgba(99,102,241,.35);
  background: linear-gradient(180deg, rgba(99,102,241,.2), rgba(99,102,241,.08));
  color: #c7d2fe;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s, color .15s;
}
.sc-reset:hover {
  background: linear-gradient(180deg, rgba(99,102,241,.36), rgba(99,102,241,.18));
  border-color: rgba(99,102,241,.65);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(99,102,241,.32);
  transform: translateY(-1px);
}
.sc-reset:active { transform: scale(.94); }

/* Row 2: right/wrong chips + accuracy aligned on the right */
.sc-bottom {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.sc-bottom .sc-rw-item {
  display: flex; align-items: center;
  gap: .3rem;
  padding: .25rem .45rem;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  flex: 1;
  min-width: 0;
}
.sc-bottom .sc-rw-icon {
  display: inline-grid; place-items: center;
  width: .95rem; height: .95rem;
  border-radius: 50%;
  font-size: .58rem; font-weight: 900;
  flex-shrink: 0;
}
.sc-bottom .sc-rw-item.ok .sc-rw-icon {
  background: linear-gradient(135deg, #10b981, #34d399);
  color: #042f1f;
  box-shadow: 0 2px 6px rgba(16,185,129,.32);
}
.sc-bottom .sc-rw-item.bad .sc-rw-icon {
  background: linear-gradient(135deg, #ef4444, #f87171);
  color: #3a0808;
  box-shadow: 0 2px 6px rgba(239,68,68,.3);
}
.sc-bottom .sc-rw-item b {
  font-size: .9rem; font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.sc-bottom .sc-rw-item.ok b  { color: #6ee7b7; }
.sc-bottom .sc-rw-item.bad b { color: #fca5a5; }
.sc-bottom .sc-rw-lbl {
  font-size: .58rem; font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-left: auto;
}

/* Accuracy — compact percentage chip on the right of the bottom row */
.sc-acc {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #94a3b8;
  padding: .25rem .5rem;
  border-radius: 6px;
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(148,163,184,.15);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.sc-acc.good { color: #6ee7b7; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.25); }
.sc-acc.mid  { color: #fcd34d; background: rgba(245,158,11,.13); border-color: rgba(245,158,11,.28); }
.sc-acc.bad  { color: #fca5a5; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.25); }

/* ── Attempt progress bar ── */
.sc-progress { margin-bottom: .55rem; padding: 0; }
.sc-progress-meta {
  display: flex; justify-content: center;
  font-size: .62rem;
  margin-bottom: .3rem;
}
.sc-progress-val {
  color: #cbd5e1;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}
.sc-progress-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.04);
}
.sc-progress-fill {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(99,102,241,.4);
  transition: width .6s cubic-bezier(.34,1.56,.64,1);
  animation: sc-bar-shimmer 3.5s ease-in-out infinite;
}
@keyframes sc-bar-shimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* ── Section tiles ── */
.sc-sections {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .4rem;
  margin-bottom: .7rem;
}
.sc-sec {
  border-radius: 12px;
  padding: .55rem .4rem .45rem;
  text-align: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .15s, background .15s, box-shadow .15s;
}
.sc-sec:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.sc-sec-header {
  display: flex; align-items: center; justify-content: center;
  gap: .28rem; margin-bottom: .3rem;
}
.sc-sec-dot {
  width: .45rem; height: .45rem; border-radius: 50%;
}
.sc-sec.blue  .sc-sec-dot { background: #60a5fa; }
.sc-sec.green .sc-sec-dot { background: #34d399; }
.sc-sec.amber .sc-sec-dot { background: #fbbf24; }

.sc-sec-name {
  font-size: .62rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.sc-sec.blue  .sc-sec-name { color: #93c5fd; }
.sc-sec.green .sc-sec-name { color: #6ee7b7; }
.sc-sec.amber .sc-sec-name { color: #fcd34d; }

/* Section score — quiz.js injects .sec-numerator / .sec-denominator / .sec-percent */
.sc-sec-score {
  display: flex; align-items: baseline; justify-content: center;
  gap: .12rem; margin-bottom: .25rem;
}
.sec-numerator   { font-size: .92rem; font-weight: 800; color: #f1f5f9; }
.sec-denominator { font-size: .72rem; font-weight: 500; color: #334155; }
.sec-percent     { font-size: .65rem; color: #64748b; margin-left: .1rem; }

/* Mini chips */
.sc-sec-chips {
  display: flex; justify-content: center; gap: .2rem;
  margin-bottom: .2rem;
}
.sc-chip {
  font-size: .62rem; font-weight: 700;
  padding: .08rem .3rem;
  border-radius: 999px;
  min-width: 1.4rem; text-align: center;
}
.sc-chip.ok  { background: rgba(74,222,128,.15); color: #86efac; border: 1px solid rgba(74,222,128,.25); }
.sc-chip.bad { background: rgba(248,113,113,.12); color: #fca5a5; border: 1px solid rgba(248,113,113,.2); }

/* Section accuracy */
.sc-sec-acc {
  display: block;
  font-size: .62rem; font-weight: 700;
  color: #334155; margin-bottom: .22rem;
}
.sc-sec-acc.good { color: #4ade80; }
.sc-sec-acc.mid  { color: #fbbf24; }
.sc-sec-acc.bad  { color: #f87171; }

/* Section mini progress bar */
.sc-sec-track {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
  margin-bottom: .2rem;
}
.sc-sec-fill {
  display: block; height: 100%; border-radius: 2px;
  transition: width .4s ease;
}
.sc-sec-fill.blue  { background: linear-gradient(90deg,#3b82f6,#60a5fa); }
.sc-sec-fill.green { background: linear-gradient(90deg,#059669,#34d399); }
.sc-sec-fill.amber { background: linear-gradient(90deg,#d97706,#fbbf24); }

.sc-sec-att {
  display: block;
  font-size: .58rem; color: #334155;
}

/* ── Card footer — marking rule reminder ── */
.sc-footer {
  display: flex; align-items: center; justify-content: center;
  gap: .45rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: .62rem; color: #64748b;
  font-weight: 600;
  letter-spacing: .03em;
}
.sc-rule-item { display: flex; align-items: center; gap: .25rem; }
.sc-rule-badge {
  font-size: .6rem; font-weight: 800;
  padding: .1rem .35rem;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.sc-rule-badge.ok  {
  background: linear-gradient(180deg, rgba(16,185,129,.22), rgba(16,185,129,.12));
  color: #6ee7b7;
  border: 1px solid rgba(16,185,129,.35);
}
.sc-rule-badge.bad {
  background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(239,68,68,.1));
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,.3);
}
.sc-rule-sep { color: #334155; }

/* bump animation (kept for quiz.js compatibility) — also triggers the hero shine */
@keyframes bump {
  0%   { transform: scale(1);    filter: brightness(1); }
  35%  { transform: scale(1.06); filter: brightness(1.2); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.bump { animation: bump .45s cubic-bezier(.34,1.56,.64,1); }

/* ── Mobile ── */
@media (max-width: 560px) {
  .score-widget { right: .5rem; bottom: .5rem; }
  .score-card   { width: min(280px, calc(100vw - 1rem)); padding: .65rem .75rem; }
  .sc-hero      { padding: .55rem .55rem .5rem; }
  .sc-ring-wrap, .sc-ring { width: 40px; height: 40px; }
  .score-numerator { font-size: 2.2rem; }
  .score-denominator { font-size: .8rem; }
  .sc-bottom .sc-rw-item b { font-size: .82rem; }
}