/* quiz-feedback.css
   Load AFTER class1-math.css and computation.css.
   Shared feedback cards (.bq-feedback + .quiz-feedback) with icon, title, and body.
   Wrong answers use warm amber instead of alarm-red.
   Repaired: 7 selectors in the phone block had lost their overlay prefix; they are scoped to the five
   fraction overlays again. The feedback card also grows with its text now (never clipped). */

:root {
  --fb-ink: #22304f !important;
  --fb-good: #1f9d6b !important;
  --fb-good-bg: #effbf4 !important;
  --fb-good-ink: #146445 !important;
  --fb-try: #ee8a1f !important;
  --fb-try-bg: #fff6ea !important;
  --fb-try-ink: #a44f06 !important;
  --fb-edge: #d5deec !important;
}

/* ---------- Feedback card ---------- */
.bq-feedback:empty,
.quiz-feedback:empty { display: none !important; }

.bq-feedback.good,
.bq-feedback.wrong,
.quiz-feedback.good,
.quiz-feedback.wrong {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  box-sizing: border-box !important;
  width: min(560px, calc(100% - 32px)) !important;
  align-self: center !important;
  float: none !important;
  margin: 18px auto 16px !important;
  padding: 14px 18px 14px 14px !important;
  border-radius: 18px !important;
  border: 2px solid var(--fb-accent) !important;
  background: var(--fb-bg) !important;
  color: var(--fb-ink) !important;
  text-align: left !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  box-shadow: 0 8px 20px -10px rgba(34, 48, 79, .35) !important;
  animation: fb-pop .28s ease-out both !important;
  /* long explanations must wrap and grow the card, never be cut off */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
}
.bq-feedback.good,
.quiz-feedback.good  { --fb-accent: var(--fb-good); --fb-bg: var(--fb-good-bg); --fb-title: var(--fb-good-ink) !important; }
.bq-feedback.wrong,
.quiz-feedback.wrong { --fb-accent: var(--fb-try);  --fb-bg: var(--fb-try-bg);  --fb-title: var(--fb-try-ink) !important; }

.bq-feedback .fb-icon,
.quiz-feedback .fb-icon {
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--fb-accent) !important;
  color: #fff !important;
}
.bq-feedback .fb-text,
.quiz-feedback .fb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0 !important; }
.bq-feedback .fb-title,
.quiz-feedback .fb-title { font-size: 1.1rem; font-weight: 800; color: var(--fb-title) !important; }
.bq-feedback .fb-body,
.quiz-feedback .fb-body  { color: var(--fb-ink) !important; }

@keyframes fb-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Shape / LKG quiz modal: gentler option highlights ---------- */
#shape-quiz-overlay .quiz-opt.is-correct,
#shape-quiz-overlay .quiz-shape-opt.is-correct,
#shape-quiz-overlay .quiz-number-opt.is-correct {
  border-color: var(--fb-good) !important;
  background: var(--fb-good-bg) !important;
  color: var(--fb-good-ink) !important;
}

#shape-quiz-overlay .quiz-opt.is-wrong,
#shape-quiz-overlay .quiz-shape-opt.is-wrong,
#shape-quiz-overlay .quiz-number-opt.is-wrong {
  border-color: var(--fb-try) !important;
  background: var(--fb-try-bg) !important;
  color: var(--fb-try-ink) !important;
}

/* ---------- Equal vs. Unequal Parts (fraction modal) ---------- */
#fracequal-quiz-overlay .frac-equal-stage { transition: border-color .2s, box-shadow .2s !important; }
#fracequal-quiz-overlay .frac-equal-stage.is-correct {
  border-color: var(--fb-good) !important;
  box-shadow: 0 0 0 5px rgba(31, 157, 107, .18) !important;
}
#fracequal-quiz-overlay .frac-equal-stage.is-wrong {
  border-color: var(--fb-try) !important;
  box-shadow: 0 0 0 5px rgba(238, 138, 31, .2) !important;
}

#fracequal-quiz-overlay #fracEqualYesChoiceBtn,
#fracequal-quiz-overlay #fracEqualNoChoiceBtn {
  min-width: 132px !important;
  padding: 12px 22px !important;
  border-radius: 16px !important;
  border: 2px solid var(--fb-edge) !important;
  background: #fff !important;
  color: var(--fb-ink) !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 0 var(--fb-edge) !important;
  cursor: pointer !important;
  transition: transform .12s, box-shadow .12s, background .15s, border-color .15s !important;
}
#fracequal-quiz-overlay #fracEqualYesChoiceBtn:hover:not(:disabled),
#fracequal-quiz-overlay #fracEqualNoChoiceBtn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--fb-edge) !important;
}
#fracequal-quiz-overlay #fracEqualYesChoiceBtn:active:not(:disabled),
#fracequal-quiz-overlay #fracEqualNoChoiceBtn:active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--fb-edge) !important;
}
#fracequal-quiz-overlay .frac-equal-choice:focus-visible,
#fracequal-quiz-overlay #fracEqualYesChoiceBtn:focus-visible,
#fracequal-quiz-overlay #fracEqualNoChoiceBtn:focus-visible,
#fracequal-quiz-overlay #fracEqualNextBtn:focus-visible {
  outline: 3px solid #2f7bff !important;
  outline-offset: 3px !important;
}

#fracequal-quiz-overlay #fracEqualYesChoiceBtn.is-correct-choice,
#fracequal-quiz-overlay #fracEqualNoChoiceBtn.is-correct-choice {
  background: var(--fb-good-bg) !important;
  border-color: var(--fb-good) !important;
  color: var(--fb-good-ink) !important;
  box-shadow: 0 4px 0 var(--fb-good) !important;
}
#fracequal-quiz-overlay #fracEqualYesChoiceBtn.is-wrong-choice,
#fracequal-quiz-overlay #fracEqualNoChoiceBtn.is-wrong-choice {
  background: var(--fb-try-bg) !important;
  border-color: var(--fb-try) !important;
  color: var(--fb-try-ink) !important;
  box-shadow: 0 4px 0 var(--fb-try) !important;
  animation: fb-nudge .35s ease-in-out !important;
}
#fracequal-quiz-overlay #fracEqualYesChoiceBtn:disabled:not(.is-picked):not(.is-correct-choice),
#fracequal-quiz-overlay #fracEqualNoChoiceBtn:disabled:not(.is-picked):not(.is-correct-choice) {
  opacity: .55 !important;
  cursor: default !important;
}
#fracequal-quiz-overlay #fracEqualYesChoiceBtn:disabled,
#fracequal-quiz-overlay #fracEqualNoChoiceBtn:disabled { cursor: default !important; }

@keyframes fb-nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  65% { transform: translateX(5px); }
}

#fracequal-quiz-overlay #fracEqualNextBtn {
  margin: 18px auto 16px !important;
  padding: 13px 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #2f7bff !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 0 #1c57c4 !important;
  cursor: pointer !important;
  transition: transform .12s, box-shadow .12s !important;
}
#fracequal-quiz-overlay #fracEqualNextBtn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #1c57c4 !important; }
#fracequal-quiz-overlay #fracEqualNextBtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1c57c4 !important; }

@media (prefers-reduced-motion: reduce) {
  .bq-feedback.good, .bq-feedback.wrong,
  .quiz-feedback.good, .quiz-feedback.wrong,
  #fracequal-quiz-overlay .is-wrong-choice { animation: none !important; }
  #fracequal-quiz-overlay button { transition: none !important; }
}

/* ---------- All fraction quiz modals AND the Class 7 integers popups (.c14-overlay): keep the feedback card visible on phones ----------
   Causes (from class1-math.css / computation.css):
   - .quiz-modal .card .bq-svg-wrap { flex:1 1 auto; min-height:280px } makes the
     shape area hog the height (big empty gap on tall screens, overflow on short ones)
   - .card { overflow:hidden } clips whatever doesn't fit
   - the Next Question button sits at the bottom and covers the feedback card
   Fixes: let the card scroll, stop the shape area growing, and reserve room for the
   Next button whenever the feedback card is scrolled into view (see the
   scrollIntoView line in fraction.js). */
:is(#fracfair-quiz-overlay,
    #fracparts-quiz-overlay,
    #fracname-quiz-overlay,
    #fracfriendly-quiz-overlay,
    #fracequal-quiz-overlay,
    .c14-overlay) .card {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-padding-bottom: 110px;
}

:is(#fracfair-quiz-overlay,
    #fracparts-quiz-overlay,
    #fracname-quiz-overlay,
    #fracfriendly-quiz-overlay,
    #fracequal-quiz-overlay,
    .c14-overlay) .bq-svg-wrap {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

:is(#fracfair-quiz-overlay,
    #fracparts-quiz-overlay,
    #fracname-quiz-overlay,
    #fracfriendly-quiz-overlay,
    #fracequal-quiz-overlay,
    .c14-overlay) .bq-feedback.good,
:is(#fracfair-quiz-overlay,
    #fracparts-quiz-overlay,
    #fracname-quiz-overlay,
    #fracfriendly-quiz-overlay,
    #fracequal-quiz-overlay,
    .c14-overlay) .bq-feedback.wrong {
  flex: 0 0 auto !important;
  scroll-margin-bottom: 110px;   /* ≈ Next button height + gap */
}

/* Naming the Parts: tighter spacing around feedback and buttons */
#fracname-quiz-overlay #fracNameShapeWrap {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
#fracname-quiz-overlay .bq-feedback.good,
#fracname-quiz-overlay .bq-feedback.wrong {
  margin: 12px auto 10px !important;
}
#fracname-quiz-overlay #fracNameNextBtn,
#fracname-quiz-overlay #fracNameCheckBtn {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}


/* =====================================================================
   ANDROID / MATERIAL 3 LOOK  (phones & touch screens only)
   ---------------------------------------------------------------------
   Everything below sits inside one media query, so desktop browsers
   (mouse / wide windows) keep the original look untouched.
   Touch devices up to 600px wide get: Roboto UI text, tonal feedback
   card with elevation, 56dp filled buttons with a pressed state layer,
   M3 outlined option buttons, a selected check-mark, 48dp+ touch
   targets, no sticky-hover, and a title that no longer sits under the
   close (X) button.
   To preview on desktop: Chrome DevTools -> device toolbar (touch).
   ===================================================================== */
@media (max-width: 600px) and (pointer: coarse) {

  :root {
    --md-font: Roboto, "Google Sans", "Noto Sans", system-ui, -apple-system, sans-serif;
    --md-primary: #2f7bff;
    --md-on-surface: #1d1b20;
    --md-outline: rgba(121, 116, 126, .55);
    --md-selected-bg: #d3e3fd;
    --md-selected-ink: #0b2a66;
    --md-elev1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
    --md-elev2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
    --md-ease: cubic-bezier(.2, 0, 0, 1);
  }

  /* ---- Touch behaviour: no grey tap flash, no double-tap zoom, no text selection ---- */
#fracfair-quiz-overlay button,
#fracparts-quiz-overlay button,
#fracname-quiz-overlay button,
#fracfriendly-quiz-overlay button,
#fracequal-quiz-overlay button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    font-family: var(--md-font);
  }
#fracfair-quiz-overlay .card,
#fracparts-quiz-overlay .card,
#fracname-quiz-overlay .card,
#fracfriendly-quiz-overlay .card,
#fracequal-quiz-overlay .card { overscroll-behavior: contain; }

  /* ---- Header: keep the title clear of the close (X) button ---- */
#fracfair-quiz-overlay .bq-title,
#fracparts-quiz-overlay .bq-title,
#fracname-quiz-overlay .bq-title,
#fracfriendly-quiz-overlay .bq-title,
#fracequal-quiz-overlay .bq-title { padding: 0 52px; text-wrap: balance; }
#fracfair-quiz-overlay .bq-progress,
#fracparts-quiz-overlay .bq-progress,
#fracname-quiz-overlay .bq-progress,
#fracfriendly-quiz-overlay .bq-progress,
#fracequal-quiz-overlay .bq-progress {
    font-family: var(--md-font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .5px;
  }

  /* ---- Answer options: Material outlined buttons (elevation 1, 16dp corners) ---- */
#fracfair-quiz-overlay .quiz-opt,
#fracfair-quiz-overlay .quiz-number-opt,
#fracfair-quiz-overlay .quiz-shape-opt,
#fracparts-quiz-overlay .quiz-opt,
#fracparts-quiz-overlay .quiz-number-opt,
#fracparts-quiz-overlay .quiz-shape-opt,
#fracname-quiz-overlay .quiz-opt,
#fracname-quiz-overlay .quiz-number-opt,
#fracname-quiz-overlay .quiz-shape-opt,
#fracfriendly-quiz-overlay .quiz-opt,
#fracfriendly-quiz-overlay .quiz-number-opt,
#fracfriendly-quiz-overlay .quiz-shape-opt,
#fracequal-quiz-overlay .quiz-opt,
#fracequal-quiz-overlay .quiz-number-opt,
#fracequal-quiz-overlay .quiz-shape-opt {
    min-height: 48px;
    border: 1px solid var(--md-outline);
    border-radius: 16px;
    background-color: #fff;
    color: var(--md-on-surface);
    font-family: var(--md-font);
    font-weight: 500;
    letter-spacing: .15px;
    box-shadow: var(--md-elev1);
    transform: none !important;           /* no hover-lift on touch */
    transition: background-color .2s var(--md-ease), border-color .2s var(--md-ease), box-shadow .2s var(--md-ease);
  }
#fracfair-quiz-overlay .quiz-opt:active,
#fracfair-quiz-overlay .quiz-number-opt:active,
#fracfair-quiz-overlay .quiz-shape-opt:active,
#fracparts-quiz-overlay .quiz-opt:active,
#fracparts-quiz-overlay .quiz-number-opt:active,
#fracparts-quiz-overlay .quiz-shape-opt:active,
#fracname-quiz-overlay .quiz-opt:active,
#fracname-quiz-overlay .quiz-number-opt:active,
#fracname-quiz-overlay .quiz-shape-opt:active,
#fracfriendly-quiz-overlay .quiz-opt:active,
#fracfriendly-quiz-overlay .quiz-number-opt:active,
#fracfriendly-quiz-overlay .quiz-shape-opt:active,
#fracequal-quiz-overlay .quiz-opt:active,
#fracequal-quiz-overlay .quiz-number-opt:active,
#fracequal-quiz-overlay .quiz-shape-opt:active,
#fracfair-quiz-overlay .quiz-opt:hover,
#fracfair-quiz-overlay .quiz-number-opt:hover,
#fracfair-quiz-overlay .quiz-shape-opt:hover,
#fracparts-quiz-overlay .quiz-opt:hover,
#fracparts-quiz-overlay .quiz-number-opt:hover,
#fracparts-quiz-overlay .quiz-shape-opt:hover,
#fracname-quiz-overlay .quiz-opt:hover,
#fracname-quiz-overlay .quiz-number-opt:hover,
#fracname-quiz-overlay .quiz-shape-opt:hover,
#fracfriendly-quiz-overlay .quiz-opt:hover,
#fracfriendly-quiz-overlay .quiz-number-opt:hover,
#fracfriendly-quiz-overlay .quiz-shape-opt:hover,
#fracequal-quiz-overlay .quiz-opt:hover,
#fracequal-quiz-overlay .quiz-number-opt:hover,
#fracequal-quiz-overlay .quiz-shape-opt:hover {
    transform: none !important;
  }
#fracfair-quiz-overlay .quiz-opt:active:not(:disabled),
#fracfair-quiz-overlay .quiz-number-opt:active:not(:disabled),
#fracfair-quiz-overlay .quiz-shape-opt:active:not(:disabled),
#fracparts-quiz-overlay .quiz-opt:active:not(:disabled),
#fracparts-quiz-overlay .quiz-number-opt:active:not(:disabled),
#fracparts-quiz-overlay .quiz-shape-opt:active:not(:disabled),
#fracname-quiz-overlay .quiz-opt:active:not(:disabled),
#fracname-quiz-overlay .quiz-number-opt:active:not(:disabled),
#fracname-quiz-overlay .quiz-shape-opt:active:not(:disabled),
#fracfriendly-quiz-overlay .quiz-opt:active:not(:disabled),
#fracfriendly-quiz-overlay .quiz-number-opt:active:not(:disabled),
#fracfriendly-quiz-overlay .quiz-shape-opt:active:not(:disabled),
#fracequal-quiz-overlay .quiz-opt:active:not(:disabled),
#fracequal-quiz-overlay .quiz-number-opt:active:not(:disabled),
#fracequal-quiz-overlay .quiz-shape-opt:active:not(:disabled) {
    background-image: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.10));   /* pressed state layer */
  }

  /* selected (filter-chip style, with a check mark on text options) */
#fracfair-quiz-overlay .quiz-opt.is-selected,
#fracfair-quiz-overlay .quiz-number-opt.is-selected,
#fracfair-quiz-overlay .quiz-shape-opt.is-selected,
#fracparts-quiz-overlay .quiz-opt.is-selected,
#fracparts-quiz-overlay .quiz-number-opt.is-selected,
#fracparts-quiz-overlay .quiz-shape-opt.is-selected,
#fracname-quiz-overlay .quiz-opt.is-selected,
#fracname-quiz-overlay .quiz-number-opt.is-selected,
#fracname-quiz-overlay .quiz-shape-opt.is-selected,
#fracfriendly-quiz-overlay .quiz-opt.is-selected,
#fracfriendly-quiz-overlay .quiz-number-opt.is-selected,
#fracfriendly-quiz-overlay .quiz-shape-opt.is-selected,
#fracequal-quiz-overlay .quiz-opt.is-selected,
#fracequal-quiz-overlay .quiz-number-opt.is-selected,
#fracequal-quiz-overlay .quiz-shape-opt.is-selected {
    background-color: var(--md-selected-bg);
    border-color: var(--md-primary);
    box-shadow: inset 0 0 0 1px var(--md-primary), var(--md-elev1);
    color: var(--md-selected-ink);
  }
#fracfair-quiz-overlay .quiz-opt.is-selected::before,
#fracfair-quiz-overlay .quiz-number-opt:not(.frac-friendly-symbol-btn).is-selected::before,
#fracparts-quiz-overlay .quiz-opt.is-selected::before,
#fracparts-quiz-overlay .quiz-number-opt:not(.frac-friendly-symbol-btn).is-selected::before,
#fracname-quiz-overlay .quiz-opt.is-selected::before,
#fracname-quiz-overlay .quiz-number-opt:not(.frac-friendly-symbol-btn).is-selected::before,
#fracfriendly-quiz-overlay .quiz-opt.is-selected::before,
#fracfriendly-quiz-overlay .quiz-number-opt:not(.frac-friendly-symbol-btn).is-selected::before,
#fracequal-quiz-overlay .quiz-opt.is-selected::before,
#fracequal-quiz-overlay .quiz-number-opt:not(.frac-friendly-symbol-btn).is-selected::before {
    content: "\2713";
    margin-right: 8px;
    font-weight: 700;
  }

  /* correct / wrong: same tonal colours as the feedback card (amber, not alarm-red) */
#fracfair-quiz-overlay .quiz-opt.is-correct,
#fracfair-quiz-overlay .quiz-number-opt.is-correct,
#fracfair-quiz-overlay .quiz-shape-opt.is-correct,
#fracparts-quiz-overlay .quiz-opt.is-correct,
#fracparts-quiz-overlay .quiz-number-opt.is-correct,
#fracparts-quiz-overlay .quiz-shape-opt.is-correct,
#fracname-quiz-overlay .quiz-opt.is-correct,
#fracname-quiz-overlay .quiz-number-opt.is-correct,
#fracname-quiz-overlay .quiz-shape-opt.is-correct,
#fracfriendly-quiz-overlay .quiz-opt.is-correct,
#fracfriendly-quiz-overlay .quiz-number-opt.is-correct,
#fracfriendly-quiz-overlay .quiz-shape-opt.is-correct,
#fracequal-quiz-overlay .quiz-opt.is-correct,
#fracequal-quiz-overlay .quiz-number-opt.is-correct,
#fracequal-quiz-overlay .quiz-shape-opt.is-correct {
    background-color: var(--fb-good-bg);
    border-color: var(--fb-good);
    box-shadow: inset 0 0 0 1px var(--fb-good), var(--md-elev1);
    color: var(--fb-good-ink);
  }
#fracfair-quiz-overlay .quiz-opt.is-wrong,
#fracfair-quiz-overlay .quiz-number-opt.is-wrong,
#fracfair-quiz-overlay .quiz-shape-opt.is-wrong,
#fracparts-quiz-overlay .quiz-opt.is-wrong,
#fracparts-quiz-overlay .quiz-number-opt.is-wrong,
#fracparts-quiz-overlay .quiz-shape-opt.is-wrong,
#fracname-quiz-overlay .quiz-opt.is-wrong,
#fracname-quiz-overlay .quiz-number-opt.is-wrong,
#fracname-quiz-overlay .quiz-shape-opt.is-wrong,
#fracfriendly-quiz-overlay .quiz-opt.is-wrong,
#fracfriendly-quiz-overlay .quiz-number-opt.is-wrong,
#fracfriendly-quiz-overlay .quiz-shape-opt.is-wrong,
#fracequal-quiz-overlay .quiz-opt.is-wrong,
#fracequal-quiz-overlay .quiz-number-opt.is-wrong,
#fracequal-quiz-overlay .quiz-shape-opt.is-wrong {
    background-color: var(--fb-try-bg);
    border-color: var(--fb-try);
    box-shadow: inset 0 0 0 1px var(--fb-try), var(--md-elev1);
    color: var(--fb-try-ink);
  }

  /* ---- Feedback: tonal Material banner that slides up ---- */
#fracfair-quiz-overlay .bq-feedback.good,
#fracparts-quiz-overlay .bq-feedback.good,
#fracname-quiz-overlay .bq-feedback.good,
#fracfriendly-quiz-overlay .bq-feedback.good,
#fracequal-quiz-overlay .bq-feedback.good,
#fracfair-quiz-overlay .bq-feedback.wrong,
#fracparts-quiz-overlay .bq-feedback.wrong,
#fracname-quiz-overlay .bq-feedback.wrong,
#fracfriendly-quiz-overlay .bq-feedback.wrong,
#fracequal-quiz-overlay .bq-feedback.wrong {
    width: calc(100% - 32px) !important;
    max-width: 560px;
    gap: 12px !important;
    padding: 12px 16px 12px 12px !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--md-elev2) !important;
    font-family: var(--md-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: .25px;
    animation: md-slide-up .25s var(--md-ease) both !important;
  }
#fracfair-quiz-overlay .bq-feedback .fb-title,
#fracparts-quiz-overlay .bq-feedback .fb-title,
#fracname-quiz-overlay .bq-feedback .fb-title,
#fracfriendly-quiz-overlay .bq-feedback .fb-title,
#fracequal-quiz-overlay .bq-feedback .fb-title {
    font-family: var(--md-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .15px;
  }

  /* ---- Primary actions (Next Question / Check / Cut): M3 filled button ---- */
#fracfair-quiz-overlay #fracFairNextBtn,
#fracfair-quiz-overlay #fracFairCutBtn,
#fracparts-quiz-overlay #fracPartsNextBtn,
#fracparts-quiz-overlay #fracPartsCheckBtn,
#fracname-quiz-overlay #fracNameNextBtn,
#fracname-quiz-overlay #fracNameCheckBtn,
#fracfriendly-quiz-overlay #fracFriendlyNextBtn,
#fracfriendly-quiz-overlay #fracFriendlyCheckBtn,
#fracequal-quiz-overlay #fracEqualNextBtn {
    display: block;                        /* JS still hides/shows via inline style */
    box-sizing: border-box;
    width: calc(100% - 32px) !important;
    max-width: 560px;
    min-height: 56px;
    margin: 8px auto calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 28px !important;
    background-color: var(--md-primary) !important;
    color: #fff !important;
    font: 500 16px/24px var(--md-font) !important;
    letter-spacing: .1px !important;
    text-transform: none;
    box-shadow: var(--md-elev2) !important;
    transform: none !important;
    transition: box-shadow .2s var(--md-ease), background-color .2s var(--md-ease) !important;
  }
#fracfair-quiz-overlay #fracFairNextBtn:hover,
#fracfair-quiz-overlay #fracFairCutBtn:hover,
#fracparts-quiz-overlay #fracPartsNextBtn:hover,
#fracparts-quiz-overlay #fracPartsCheckBtn:hover,
#fracname-quiz-overlay #fracNameNextBtn:hover,
#fracname-quiz-overlay #fracNameCheckBtn:hover,
#fracfriendly-quiz-overlay #fracFriendlyNextBtn:hover,
#fracfriendly-quiz-overlay #fracFriendlyCheckBtn:hover,
#fracequal-quiz-overlay #fracEqualNextBtn:hover,
#fracfair-quiz-overlay #fracFairNextBtn:active,
#fracfair-quiz-overlay #fracFairCutBtn:active,
#fracparts-quiz-overlay #fracPartsNextBtn:active,
#fracparts-quiz-overlay #fracPartsCheckBtn:active,
#fracname-quiz-overlay #fracNameNextBtn:active,
#fracname-quiz-overlay #fracNameCheckBtn:active,
#fracfriendly-quiz-overlay #fracFriendlyNextBtn:active,
#fracfriendly-quiz-overlay #fracFriendlyCheckBtn:active,
#fracequal-quiz-overlay #fracEqualNextBtn:active {
    transform: none !important;
    box-shadow: var(--md-elev2) !important;
  }
#fracfair-quiz-overlay #fracFairNextBtn:active:not(:disabled),
#fracfair-quiz-overlay #fracFairCutBtn:active:not(:disabled),
#fracparts-quiz-overlay #fracPartsNextBtn:active:not(:disabled),
#fracparts-quiz-overlay #fracPartsCheckBtn:active:not(:disabled),
#fracname-quiz-overlay #fracNameNextBtn:active:not(:disabled),
#fracname-quiz-overlay #fracNameCheckBtn:active:not(:disabled),
#fracfriendly-quiz-overlay #fracFriendlyNextBtn:active:not(:disabled),
#fracfriendly-quiz-overlay #fracFriendlyCheckBtn:active:not(:disabled),
#fracequal-quiz-overlay #fracEqualNextBtn:active:not(:disabled) {
    background-image: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)) !important;
  }
#fracfair-quiz-overlay #fracFairNextBtn:disabled,
#fracfair-quiz-overlay #fracFairCutBtn:disabled,
#fracparts-quiz-overlay #fracPartsNextBtn:disabled,
#fracparts-quiz-overlay #fracPartsCheckBtn:disabled,
#fracname-quiz-overlay #fracNameNextBtn:disabled,
#fracname-quiz-overlay #fracNameCheckBtn:disabled,
#fracfriendly-quiz-overlay #fracFriendlyNextBtn:disabled,
#fracfriendly-quiz-overlay #fracFriendlyCheckBtn:disabled,
#fracequal-quiz-overlay #fracEqualNextBtn:disabled {
    background-color: rgba(29, 27, 32, .12) !important;
    background-image: none !important;
    color: rgba(29, 27, 32, .38) !important;
    box-shadow: none !important;
  }

  /* ---- End-of-round Yes / No buttons: Material shape + type, colours unchanged ---- */
#fracfair-quiz-overlay #fracFairYesBtn,
#fracfair-quiz-overlay #fracFairNoBtn,
#fracparts-quiz-overlay #fracPartsYesBtn,
#fracparts-quiz-overlay #fracPartsNoBtn,
#fracname-quiz-overlay #fracNameYesBtn,
#fracname-quiz-overlay #fracNameNoBtn,
#fracfriendly-quiz-overlay #fracFriendlyYesBtn,
#fracfriendly-quiz-overlay #fracFriendlyNoBtn,
#fracequal-quiz-overlay #fracEqualYesBtn,
#fracequal-quiz-overlay #fracEqualNoBtn {
    min-height: 48px;
    border-radius: 24px;
    font: 500 15px/20px var(--md-font);
    letter-spacing: .1px;
    transform: none !important;
  }

  /* ---- Equal vs. Unequal Parts: Yes / No choice buttons ---- */
#fracequal-quiz-overlay #fracEqualYesChoiceBtn,
#fracequal-quiz-overlay #fracEqualNoChoiceBtn {
    min-height: 56px !important;
    border: 1px solid var(--md-outline) !important;
    border-radius: 16px !important;
    background-color: #fff !important;
    color: var(--md-on-surface) !important;
    font: 500 18px/24px var(--md-font) !important;
    letter-spacing: .15px;
    box-shadow: var(--md-elev1) !important;
  }
#fracequal-quiz-overlay #fracEqualYesChoiceBtn:hover:not(:disabled),
#fracequal-quiz-overlay #fracEqualNoChoiceBtn:hover:not(:disabled),
#fracequal-quiz-overlay #fracEqualYesChoiceBtn:active:not(:disabled),
#fracequal-quiz-overlay #fracEqualNoChoiceBtn:active:not(:disabled) {
    transform: none !important;
    box-shadow: var(--md-elev1) !important;
  }
#fracequal-quiz-overlay #fracEqualYesChoiceBtn:active:not(:disabled),
#fracequal-quiz-overlay #fracEqualNoChoiceBtn:active:not(:disabled) {
    background-image: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.10)) !important;
  }
#fracequal-quiz-overlay #fracEqualYesChoiceBtn.is-correct-choice,
#fracequal-quiz-overlay #fracEqualNoChoiceBtn.is-correct-choice {
    background-color: var(--fb-good-bg) !important;
    border-color: var(--fb-good) !important;
    box-shadow: inset 0 0 0 1px var(--fb-good), var(--md-elev1) !important;
    color: var(--fb-good-ink) !important;
  }
#fracequal-quiz-overlay #fracEqualYesChoiceBtn.is-wrong-choice,
#fracequal-quiz-overlay #fracEqualNoChoiceBtn.is-wrong-choice {
    background-color: var(--fb-try-bg) !important;
    border-color: var(--fb-try) !important;
    box-shadow: inset 0 0 0 1px var(--fb-try), var(--md-elev1) !important;
    color: var(--fb-try-ink) !important;
  }
}

@keyframes md-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bq-feedback.good, .bq-feedback.wrong { animation: none !important; }
}