/* NOTE: this is a scoped copy of MCQ-Quiz.css for embedding the live quiz
   card inside auto-quiz-upload.html. The universal `*` reset and bare `body`
   rule from the original were dropped (Auto-Quiz's base.css already resets
   the page, and #live-quiz-main is pinned full-screen via upload.css instead
   of relying on body margins). --text-dark was renamed to --quiz-text-dark
   to avoid clobbering base.css's own --text-dark, which every other screen
   in Auto-Quiz relies on. Keep this file in sync with MCQ-Quiz.css by hand
   if the quiz card's look changes over there. */

:root {
  /* Colors */
  --bg-app: #141313;
  --bg-card: oklch(100% 0.00011 271.152);
  --quiz-text-dark: oklch(39.793% 0.00005 271.152);

  /* Quiz Status Colors */
  --color-correct: oklch(65.365% 0.22121 142.531);
  --color-wrong: oklch(35.315% 0.14492 29.223 / 0.61);
  --color-missed: oklch(60.86% 0.19834 142.462);

  /* Buttons */
  --btn-purple: oklch(55.119% 0.24825 285.706);
  --btn-purple-active: oklch(46.372% 0.17744 287.952);
  --btn-delete: oklch(66.504% 0.20458 24.602);

  /* Brand accent — matches --btn-primary in MCQ-Builder.css exactly,
     so the quiz-taking screen's interactive color reads as the same
     brand as the builder screen. */
  --quiz-accent: oklch(63.245% 0.20931 289.719);
  --quiz-accent-bg: color-mix(in oklch, var(--quiz-accent) 14%, white);
  --quiz-neutral-badge: #efe2e5;

  /* --- Quiz-taking screen: washi sticker theme (dark page + pinkish-white card) --- */
  --quiz-page-bg: #141313;
  --quiz-card-bg: #fff1f3;
  --quiz-card-bg-2: #ffe3e8;
  --quiz-ink: #432e33;
  --quiz-ink-soft: #9a7c82;
  --quiz-track: #f4d6dc;
  --quiz-sakura: #f0567f;
  --quiz-sora: #2f8fc2;
  --quiz-sora-bg: #e2f1fa;
  --quiz-mikan: #d97a22;
  --quiz-matcha: #4e9a55;
}

@font-face {
  font-family: "Poppins";
  src: url("../../LAMBU-Fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../../LAMBU-Fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../../LAMBU-Fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Lexend Deca";
  src: url("../../LAMBU-Fonts/LexendDeca-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lexend Deca";
  src: url("../../LAMBU-Fonts/LexendDeca-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Lexend Deca";
  src: url("../../LAMBU-Fonts/LexendDeca-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Lexend Deca";
  src: url("../../LAMBU-Fonts/LexendDeca-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("../../LAMBU-Fonts/Kalam-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("../../LAMBU-Fonts/Kalam-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}


.quiz-main {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--quiz-page-bg);
}

.progress-bar-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-bottom: 12px;
}

/* ── Generation Complete indicator (no background, no pill) ── */
.live-quiz-complete-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  margin-bottom: 12px;
  pointer-events: none;
  user-select: none;
  /* Visibility is driven entirely by opacity + transform transitions
     so that the fade-out plays before display:none is applied via JS.
     The element is shown via JS setting opacity and the --badge-visible class. */
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.live-quiz-complete-badge.--badge-visible {
  opacity: 1;
  transform: translateY(0);
}

.live-quiz-complete-badge.--badge-fading {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}

.complete-badge-text {
  font-family: "Lexend Deca", sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  /* Deliberately light and muted so it doesn't steal focus from the question */
  color: #b0aab2;
  line-height: 1;
  letter-spacing: 0.01em;
}

.complete-badge-icon {
  display: block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  /* Green circle outline checkmark */
  color: #4e9a55;
}


.progress-bar-wrapper p {
  text-align: left;
  font-family: "Lexend Deca";
  font-weight: 600;
  font-size: 12px;
  color: var(--quiz-ink-soft);
  white-space: nowrap;
}

.progress-bar {
  background-color: var(--quiz-track);
  width: 100%;
  height: 9px;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  transform: translateZ(0);
}

.progress-fill {
  height: 100%;
  background-color: oklch(75.221% 0.12857 293.794);
  width: 0%;
  border-radius: inherit;
  transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: width;
}

/* :where() keeps this scoped to the live quiz card without raising
   specificity above the original bare "p" selector — more specific rules
   below it (e.g. .progress-bar-wrapper p) still win exactly as before. */
:where(#live-quiz-main) p {
  text-align: center;
  font-family: "Poppins";
  font-weight: 400;
  font-size: clamp(0.5rem, 8dvw, 0.84375rem);
  color: oklch(49.706% 0.00125 14.712);
}

.quiz-content-wrapper {
  background-color: var(--quiz-card-bg);
  color: var(--quiz-ink);
  height: auto;
  width: 100%;
  max-height: 100dvh;
  padding: 22px 20px 18px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 15px;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.45);
}

.quiz-content-wrapper::-webkit-scrollbar {
  display: none;
}

.quiz-card-frame {
  position: relative;
  width: 45%;
}

.quiz-card-tape {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 100px;
  height: 26px;
  background-color: var(--quiz-sora-bg);
  background-image: radial-gradient(circle,
      rgba(255, 255, 255, 0.85) 1.4px,
      transparent 1.6px);
  background-size: 11px 11px;
  background-position: 2px 2px;
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
  /* Flat tape strip — top & bottom are perfectly straight.
     Left and right ends get a slight diagonal cut via clip-path
     so it reads as scissors-cut, not torn or perforated. */
  clip-path: polygon(
    0%   15%,
    5%   0%,
    95%  0%,
    100% 15%,
    100% 85%,
    95%  100%,
    5%   100%,
    0%   85%
  );
}

.actual-question-wrapper {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 22px;
}

/* Style B — inline handwritten number, sits on the same line as the
   question instead of a separate circular badge above it. */
.quiz-num {
  font-family: "Kalam";
  font-weight: 700;
  font-size: clamp(0.95rem, 6dvw, 1.1875rem);
  color: var(--quiz-ink-soft);
  flex-shrink: 0;
}

.question-choices-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding: 15px 4px 15px 0;
  margin-bottom: 30px;
  will-change: opacity, transform;
}

.quiz-question {
  font-family: "Lexend Deca";
  font-weight: 600;
  font-size: clamp(1rem, 7dvw, 1.1875rem);
  line-height: 1.45;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
  margin: 0;
  color: oklch(24.354% 0.00003 271.152);
}

.actual-choices-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: auto;
}

/* Quiz choice cards — no right/wrong shown here.
   Correct/wrong feedback only ever appears on the results screen below. */
:where(#live-quiz-main) h3 {
  display: flex;
  align-items: center;
  border: 1px solid rgb(201, 199, 199);
  padding: 13px 14px;
  border-radius: 14px;
  font-family: "Lexend Deca";
  font-weight: 500;
  font-size: clamp(0.85rem, 6dvw, 1rem);
  color: var(--quiz-ink);
  background-color: transparent;
  cursor: pointer;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.nav-btn-wrapper {
  position: sticky;
  bottom: 0;
  background-color: transparent;
  /* match the card background */
  z-index: 10;
  padding-top: 8px;
  padding-bottom: 8px;
  /* optional: a subtle top shadow to separate it from scrolling content */
  /* IMPORTANT: keep the same margin-top as before (15px) or remove */
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.nav-btn {
  width: 100%;
  cursor: pointer;
  font-family: "Lexend Deca";
  font-weight: 600;
  font-size: clamp(0.85rem, 6dvw, 1.0625rem);
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 100px;
  transition: transform 150ms ease-in-out;
  background-color: var(--quiz-accent);
  border: none;
  color: white;
}

.nav-btn:active {
  transform: scale(0.9);
}

.nav-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
  /* This entirely disables clicking */
  cursor: not-allowed;
}

.prev {
  border: 0.5px solid rgb(187, 187, 187);
  color: rgb(133, 133, 133);
  background-color: transparent;

}

.next,
.finish {
  border: none;
  background-color: oklch(52.84% 0.06654 298.287);
  color: white;
}

.quiz-result-main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  display: none;
  background-color: var(--bg-app);
}

.quiz-QC-section {
  display: flex;
  flex-direction: column;
  width: 45%;
  height: 100dvh;
  /* Forces it to use the exact height of the phone */
  background-color: white;
  position: relative;
  overflow: hidden;
}

/* Firefox */
.QC-wrapper {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Chrome / Safari / Edge */
.QC-wrapper::-webkit-scrollbar {
  width: 6px;
}

.QC-wrapper::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 10px;
}

.QC-wrapper::-webkit-scrollbar-thumb {
  /* A gradient makes it look "expensive" and high-end */
  background: linear-gradient(oklch(65% 0.2 285), oklch(45% 0.25 285));
  border-radius: 20px;
  border: 1px solid oklch(100% 0 0 / 0.1);
  /* Subtle "shine" on the edge */
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.2);
}

.QC-wrapper::-webkit-scrollbar-thumb:hover {
  /* Brighten on hover for interactive feel */
  background: oklch(60% 0.25 285);
  box-shadow: 0 0 10px oklch(60% 0.25 285 / 0.4);
}

.score-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.144);
  padding-top: 5px;

  height: clamp(100px, 12vw, 130px);
  overflow: hidden;
  transition: height 0.2s ease;
  will-change: height;
}

.score-shrunk {
  height: clamp(75px, 9vw, 95px);
}

.score-shrunk .score {
  transform: scale(0.6) translateZ(0);
  /* translateZ forces smooth GPU animation */
  margin-bottom: -10px;
  /* Pulls the title up so there's no awkward gap */
}

.score-shrunk .title {
  transform: scale(0.8) translateZ(0);
  margin-bottom: 0;
}

.user-score {
  font-size: clamp(3.5rem, 8dvw, 4.5rem);
  font-weight: 700;
}

.score {
  font-family: "Poppins";
  font-weight: 500;
  font-size: clamp(1rem, 8dvw, 2rem);
  color: oklch(71.547% 0.00008 271.152);
  display: block;
  line-height: 1.2;
  transform-origin: center top;
  /* Perfectly matched 0.3s timing */
  transition:
    transform 0.2s ease,
    margin-bottom 0.2s ease;
  will-change: transform;

  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

.title {
  font-family: "Poppins";
  font-weight: 400;
  font-size: clamp(1rem, 8dvw, 1.3rem);
  line-height: 1.2;
  transform-origin: center top;
  transition:
    transform 0.2s ease,
    margin-bottom 0.2s ease;
  will-change: transform;
  backface-visibility: hidden;
  color: rgb(131, 131, 131);
}

.QC-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 130px padding so the last question isn't blocked by the footer */
  padding: 25px 10px 175px 10px;
  gap: 50px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.choices-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.question-wrapper-result {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 5px;
}

.num-result {
  font-family: "Lexend Deca";
  font-weight: 700;
  font-size: clamp(0.8rem, 8dvw, 1.1875rem);
  text-align: left;
  color: rgb(0, 0, 0);
  flex-shrink: 0;
}

.question-result {
  font-family: "Lexend Deca";
  font-weight: 700;
  font-size: clamp(0.8rem, 8dvw, 1.1875rem);
  text-align: left;
  color: rgb(0, 0, 0);
  flex: 1;
  min-width: 0;
  /* The Magic Flexbox Fix */
  word-break: normal;
  overflow-wrap: break-word;
  margin-bottom: 10px;
}

.choices {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
}

.choices-input-result {
  background-color: transparent;
  border: none;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: start;
  font-family: "Lexend Deca";
  font-weight: 500;
  font-size: clamp(0.7rem, 8dvw, 1.03125rem);
  color: rgb(43, 43, 43);

  /* The Flexbox Layout Fixes */
  flex: 1;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

/* The 'selected' state for your choices — neutral highlight only.
   Never green/red here: correct/wrong is revealed on the results screen only. */
.actual-choices-wrapper h3.selected {
  border: 0.5px solid var(--quiz-accent);
  background-color: oklch(57.419% 0.24726 286.58);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
  color: white;
}

.result-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: none;
  margin-right: 5px;
}

.result-btn-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  scrollbar-width: thin;
  gap: 30px;
  padding-top: 8px;
  flex-shrink: 0;
}

.btn-result {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
  font-family: "Poppins";
  font-weight: 500;
  font-size: clamp(0.7rem, 8dvw, 1.09375rem);
  transition: transform 150ms ease-in-out;
  cursor: pointer;
}

.btn-result:active {
  transform: scale(0.9);
}

.retake {
  border: 1.5px solid rgba(168, 168, 168, 0.719);
  background-color: transparent;
  color: rgb(100, 99, 99);
  transition:
    background-color 100ms ease-in-out,
    transform 150ms ease-in-out;
  cursor: pointer;
}

.retake:active {
  background-color: rgb(207, 207, 207);
}

.crtnw {
  background-color: oklch(57.598% 0.24278 286.915);
  border: none;
  color: white;
  transition:
    background-color 100ms ease-in-out,
    transform 150ms ease-in-out;
}

.crtnw:active {
  background-color: oklch(46.372% 0.17744 287.952);
}

.wrapper-last {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--bg-card);
  z-index: 10;
  padding: 10px;
  transition: transform 0.2s ease-in-out;
  will-change: transform;
}

.footer-hidden {
  transform: translateY(100%);
}

.option-last-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 20px;
  gap: 45px;
}

.last-sub-wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  transition: transform 150ms ease;
  gap: 0.4em;
}

.last-sub-wrapper:active {
  transform: scale(0.9);
}

.icon-edit,
.icon-save,
.icon-delete {
  /* Use 'em' so it scales with the parent's font-size */
  width: 1.5em;
  height: 1.5em;
  margin: 0;
  padding: 0;
  /* Ensures the icon stays aligned with the middle of the text */
  flex-shrink: 0;
}

.last-sub-wrapper:active {
  transform: scale(0.95);
  background-color: oklch(83.787% 0.07248 284.72);
  /* Subtle highlight */
}

/* Specific color for the delete button hover */
.last-sub-wrapper:has(.delete):active {
  background-color: oklch(90% 0.1 25 / 0.2);
}

.last-option-word {
  font-family: "Poppins";
  font-weight: 500;
  font-size: clamp(0.8rem, 8dvw, 1.1rem);
  color: var(--quiz-text-dark);
  border: none;
  background-color: transparent;
  cursor: pointer;
}

:where(#live-quiz-main) footer {
  background-color: oklch(65.096% 0.22986 26.42);
}

.delete {
  color: oklch(66.504% 0.20458 24.602);
}

/* --- COMPACT & LOW COGNITIVE LOAD RESULTS --- */

.correct-pick {
  color: var(--color-correct);
  border-color: oklch(98% 0 0);
}

.wrong-pick {
  color: var(--color-wrong);
}

/* 3. The actual correct answer (if they picked the wrong one) */
.missed-correct {
  border: 1px dotted oklch(68.769% 0.16857 142.993);
  color: oklch(60.86% 0.19834 142.462);
  background-color: transparent;
  /* Dashed so they know they didn't pick it */
}

/* 4. The answers they didn't pick (Dims them out to reduce clutter!) */
.unselected-choice {
  opacity: 0.5;
  /* Fades out the distractors */
  background-color: transparent;
  border: none;
  border-radius: 10px;
  padding-left: 5px;
}

@media (max-width: 868px) {
  .quiz-QC-section {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }

  .quiz-card-frame {
    width: calc(100% - 24px);
  }

  .quiz-content-wrapper {
    width: 100%;
    height: auto;
    /* ← let it be only as tall as needed */
    max-height: calc(100dvh - 24px);
    /* ← prevent overflow of viewport */
    background-color: var(--quiz-card-bg);
    border-radius: 20px;
    padding: 20px 16px 12px;
    overflow-y: auto;
    /* ← scrolls the whole card if needed (already in non‑mobile rule, but keep it explicit) */
  }

  .quiz-main {
    background-color: var(--quiz-page-bg);
    align-items: center;
    /* ← vertical centering, NOT stretch */
    justify-content: center;
    /* ← horizontal centering (already there) */
  }

  .nav-btn-wrapper {
    margin-bottom: 0.9375rem;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    position: sticky;
    /* ← ensure it’s sticky (set in default rule, but keep it) */
    bottom: 0;
    background-color: var(--quiz-card-bg);
    /* ← match the card background so it doesn’t look transparent */
  }
}

.quiz-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: oklch(0% 0 0 / 0.5);
  backdrop-filter: blur(2px);
  display: none;
  justify-content: center;
  align-items: flex-end;
  /* Pushes the modal to the bottom for thumb reach */
  padding-bottom: 160px;
  /* Lifts it safely above your bottom footer buttons */
  z-index: 1000;
}

.quiz-modal-overlay.show {
  display: flex;
}

.quiz-modal-box {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 25px;
  width: calc(100% - 40px);
  max-width: 450px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-shadow: 0px 10px 30px oklch(0% 0 0 / 0.2);
  z-index: 1001;
}

.quiz-modal-dialogue {
  text-align: center;
  font-family: "Poppins";
  font-weight: 500;
  font-size: clamp(0.6rem, 8dvw, 1rem);
  color: oklch(42.393% 0.00005 271.152);
}

.quiz-modal-sub {
  text-align: center;
  font-family: "Poppins";
  font-weight: 400;
  font-size: clamp(0.55rem, 7dvw, 0.85rem);
  color: gray;
  margin-top: -20px;
}

.quiz-modal-btn-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.quiz-modal-btn {
  flex: 1;
  padding: 13px 20px;
  font-family: "Poppins";
  font-size: clamp(0.6rem, 8dvw, 1.2rem);
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.quiz-modal-btn:active {
  transform: scale(0.9);
}

.quiz-modal-cancel {
  background-color: inherit;
  border: 1px solid gray;
  color: oklch(32.897% 0.00004 271.152);
}

.quiz-modal-confirm {
  background-color: oklch(66.161% 0.22493 25.863);
  border: 1px solid oklch(66.161% 0.22493 25.863);
  color: white;
}