/* ==========================================================================
   Quiz Webapp — CBT-style practice player
   Built on the same tokens as the main site (css/style.css must load first)
   ========================================================================== */

.quiz-shell{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.quiz-topbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: rgba(251,247,239,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.quiz-topbar .brand{ display: flex; align-items: center; gap: 10px; }
.quiz-topbar .brand img{ height: 34px; }
.quiz-topbar .brand-word{ font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--green-ink); }
.quiz-topbar-right{ display: flex; align-items: center; gap: 18px; }
.quiz-topbar-right span{ display: flex; align-items: center; gap: 18px; }
.quiz-exit{ font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; transition: color 0.2s ease, transform 0.2s ease; }
.quiz-exit:hover{ color: var(--orange-dark); transform: translateX(-3px); }

.quiz-main{ flex: 1; padding: 40px 24px 70px; }
.quiz-container{ width: 100%; max-width: 780px; margin: 0 auto; }

/* ---------- Screens (only one visible at a time, animated swap) ---------- */
.quiz-screen{ display: none; }
.quiz-screen.active{ display: block; animation: screenIn 0.45s cubic-bezier(.22,1,.36,1) both; }
@keyframes screenIn{ from{ opacity: 0; transform: translateY(16px) scale(0.99); } to{ opacity: 1; transform: translateY(0) scale(1); } }

/* ---------- Setup screen ---------- */
.setup-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 40px 36px;
  box-shadow: var(--shadow);
}
.setup-head{ text-align: center; margin-bottom: 32px; }
.setup-head .eyebrow{ justify-content: center; }

.mode-tabs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
.mode-tab{
  padding: 14px 10px; border-radius: var(--radius-s); border: 1.5px solid var(--line);
  background: var(--paper); text-align: center; cursor: pointer;
  font-weight: 700; font-size: 0.88rem; color: var(--ink);
  transition: all 0.25s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mode-tab svg{ transition: transform 0.25s ease; }
.mode-tab:hover{ transform: translateY(-3px); border-color: var(--green); }
.mode-tab.selected{ background: var(--green); border-color: var(--green); color: #fff; }
.mode-tab.selected svg{ transform: scale(1.1); }
.mode-tab .sub{ font-size: 0.7rem; font-weight: 500; opacity: 0.75; }

.setup-field{ margin-bottom: 20px; }
.setup-field label{ display: block; font-weight: 700; font-size: 0.86rem; margin-bottom: 8px; color: var(--green-ink); }
.setup-field select{
  width: 100%; padding: 13px 16px; border-radius: 10px; border: 1.5px solid var(--line);
  font-family: inherit; font-size: 0.94rem; background: var(--paper); cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.setup-field select:focus{ outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(14,146,73,0.14); }

.qtype-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qtype-pill{
  padding: 10px 8px; border-radius: 100px; border: 1.5px solid var(--line);
  text-align: center; font-weight: 700; font-size: 0.82rem; cursor: pointer;
  background: var(--paper); transition: all 0.2s ease;
}
.qtype-pill.selected{ background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
.qtype-pill:hover{ transform: translateY(-2px); }

.setup-count-row{ display: flex; align-items: center; justify-content: space-between; background: var(--paper-alt); border-radius: var(--radius-s); padding: 14px 18px; margin: 26px 0; font-size: 0.9rem; font-weight: 600; color: var(--green-ink); }
.setup-count-row span.num{ font-family: var(--font-mono); color: var(--orange-dark); }

.setup-start-btn{ width: 100%; justify-content: center; font-size: 1rem; padding: 16px; }
.setup-start-btn:disabled{ opacity: 0.5; cursor: not-allowed; animation: none; transform: none !important; }

/* ---------- Question screen ---------- */
.quiz-progress-row{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 16px; }
.quiz-progress-row .q-count{ font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; }
.quiz-progress-bar{ flex: 1; height: 6px; background: var(--paper-alt); border-radius: 100px; overflow: hidden; }
.quiz-progress-fill{ height: 100%; background: var(--green); border-radius: 100px; transition: width 0.4s cubic-bezier(.22,1,.36,1); width: 0%; }
.quiz-timer{
  font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem;
  background: var(--green-ink); color: #fff; padding: 7px 14px; border-radius: 100px;
  white-space: nowrap; transition: background 0.3s ease;
}
.quiz-timer.low{ background: var(--orange); animation: pulseGlow 1s ease-in-out infinite; }

.question-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 32px 30px; box-shadow: var(--shadow);
}
.q-tags{ display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.q-tags span{ font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--paper-alt); color: var(--green-dark); padding: 5px 10px; border-radius: 100px; }
.q-tags span.year-tag{ background: #FDEDE3; color: var(--orange-dark); }
.question-text{ font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--ink); margin-bottom: 24px; line-height: 1.4; }

.option-list{ display: grid; gap: 12px; margin-bottom: 24px; }
.option-item{
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-s);
  cursor: pointer; background: var(--paper);
  transition: all 0.2s cubic-bezier(.22,1,.36,1);
}
.option-item:hover{ border-color: var(--green); transform: translateX(4px); }
.option-item .opt-letter{
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper-alt); color: var(--green-dark); font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.option-item.selected{ border-color: var(--green); background: #EAF4EC; }
.option-item.selected .opt-letter{ background: var(--green); color: #fff; transform: scale(1.1); }
.option-item.correct{ border-color: var(--green); background: #EAF4EC; animation: popIn 0.35s ease; }
.option-item.correct .opt-letter{ background: var(--green); color: #fff; }
.option-item.incorrect{ border-color: var(--orange); background: #FDEDE3; animation: shakeX 0.4s ease; }
.option-item.incorrect .opt-letter{ background: var(--orange); color: #fff; }
@keyframes shakeX{ 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-5px); } 75%{ transform: translateX(5px); } }

.explain-box{
  background: var(--paper-alt); border-radius: var(--radius-s); padding: 16px 18px;
  font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 22px;
  border-left: 3px solid var(--green);
  animation: staggerUp 0.35s ease both;
}
.explain-box strong{ color: var(--green-ink); }

.question-actions{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.q-nav-btns{ display: flex; gap: 10px; }
.flag-btn{
  display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700;
  color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 8px 10px; border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}
.flag-btn:hover{ background: var(--paper-alt); }
.flag-btn.flagged{ color: var(--orange-dark); }
.flag-btn.flagged svg{ fill: var(--orange); }

.q-dots{ display: flex; gap: 6px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.q-dot{
  width: 9px; height: 9px; border-radius: 50%; background: var(--line); cursor: pointer;
  transition: all 0.25s ease; border: none; padding: 0;
}
.q-dot:hover{ transform: scale(1.4); }
.q-dot.answered{ background: var(--green); }
.q-dot.flagged{ background: var(--orange); }
.q-dot.current{ width: 22px; border-radius: 100px; background: var(--green-ink); }

/* ---------- Results screen ---------- */
.results-overlay{
  position: fixed; inset: 0; background: rgba(10,40,25,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.results-overlay.active{ opacity: 1; pointer-events: auto; }
.results-modal{
  background: #fff; border-radius: var(--radius-l); padding: 44px 38px;
  max-width: 420px; width: 100%; text-align: center;
  transform: scale(0.9) translateY(10px); transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 30px 70px rgba(0,0,0,0.3);
}
.results-overlay.active .results-modal{ transform: scale(1) translateY(0); }
.trophy-badge{
  width: 76px; height: 76px; border-radius: 50%; background: #EAF4EC; color: var(--green);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
  animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.15s both;
}
.results-modal h2{ margin-bottom: 4px; }
.results-modal .sub{ color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 26px; }
.results-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.result-stat{ background: var(--paper-alt); border-radius: var(--radius-s); padding: 16px 10px; }
.result-stat .rnum{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--green-ink); }
.result-stat .rlbl{ font-size: 0.78rem; color: var(--ink-soft); }
.result-stat.correct .rnum{ color: var(--green); }
.result-stat.incorrect .rnum{ color: var(--orange-dark); }
.accuracy-band{
  background: var(--green-ink); color: #fff; border-radius: var(--radius-s);
  padding: 18px; margin-bottom: 22px;
}
.accuracy-band .rnum{ font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; }
.accuracy-band .rlbl{ font-size: 0.8rem; opacity: 0.75; }
.results-actions{ display: flex; gap: 10px; }
.results-actions .btn{ flex: 1; }

@media (max-width: 640px){
  .quiz-main{ padding: 24px 16px 60px; }
  .setup-card, .question-card{ padding: 26px 20px; }
  .mode-tabs, .qtype-row{ grid-template-columns: 1fr 1fr; }
  .quiz-progress-row{ flex-wrap: wrap; }
}