/* riddler-quiz-modal.css
 * Cleaner modal dialog with soft UI, flat progress bar, accessible focus states.
 * Works with existing RQModal markup/classes. Includes Dark Mode.
 */

/* CSS variables (Light Mode defaults) */
:root {
  --rqm-overlay-bg: rgba(0, 0, 0, 0.6);
  --rqm-bg: #ffffff;
  --rqm-radius: 18px;
  --rqm-shadow: 0 12px 30px rgba(0,0,0,.14);
  --rqm-max-w: 860px;
  --rqm-max-h: 86vh;
  --rqm-header-bg: #fff;
  --rqm-border: #eef2f7;
  --rqm-title: #0f172a;
  --rqm-muted: #6b7280;
  --rqm-focus: #2563eb;
  --rqm-primary: #2563eb;
  --rqm-primary-hover: #1e4fd6;
  --rqm-text-on-primary: #ffffff;
}

/* Overlay */
.rqm-overlay {
  position: fixed;
  inset: 0;
  background: var(--rqm-overlay-bg);
  z-index: 11000;
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main dialog */
.rqm-dialog {
  position: fixed;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  width: min(96vw, 900px);
  height: min(92vh, 700px);

  background: var(--rqm-bg);

  border-radius: 24px;

  box-shadow:
    0 12px 32px rgba(0,0,0,0.16),
    0 2px 8px rgba(0,0,0,0.08);

  z-index: 11001;

  display: none;
  flex-direction: column;

  overflow: hidden;

  animation: ravcm-pop .22s ease;
}

/* Header */
.rqm-header {
  display: flex;
  align-items: center;

  padding: 16px 18px 10px;

  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.rqm-title {
  font-size: 15px;
  font-weight: 700;

  color: var(--rqm-muted);

  flex: 1;

  text-align: center;
}

/* Body */
.rqm-body {
  flex: 1;
  overflow-y: auto;
  flex-direction: column;
  padding: 20px 16px;
  display: flex;
}

/* Center short screens only */
.rqm-body-inner {
  margin: auto 0;
}

/* Full width content */
.rqm-body .riddler-quiz-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.rqm-body img { max-width: 100%; height: auto; display: block; }

/* Remove boxed feeling inside modal */
.rqm-body .riddler-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 0 !important;
}

/* Quiz text */
.rqm-body p {
  font-size: 18px;
  line-height: 1.7;
  font-weight: 500;

  color: #1e293b;
}

/* Better spacing */
.rqm-body > * + * {
  margin-top: 16px;
}

/* Footer */
.rqm-footer {
  padding: 14px 16px;

  border-top: 1px solid rgba(0,0,0,0.05);

  display: flex;
  align-items: center;
  gap: 12px;

  background: var(--rqm-bg);

  margin-top: auto;
}

/* Exit (secondary) */
/* Exit button */
.rqm-exit {
  appearance: none;

  border: none;
  background: transparent !important;

  color: var(--rqm-muted) !important;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;
}

.rqm-exit:hover {
  color: #333 !important;
  background: #eee !important;
}

.rqm-exit:active {
  transform: scale(0.96);
}

/* Consistent focus states */
.rqm-exit:focus-visible,
.rqm-close:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px rgba(37,99,235,0.18),
    0 4px 10px rgba(0,0,0,0.06);
}

/* Progress bar */
.rqm-progress {
  position: relative; height: 8px; flex: 1;
  background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-left: 8px;
}
.rqm-progress > span {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  transition: width 240ms ease;
}

/* Accessibility helpers */
.rqm-dialog[aria-hidden="true"]  { display: none !important; }
.rqm-dialog[aria-hidden="false"] { display: flex !important; }
.rqm-overlay[aria-hidden="true"]  { display: none !important; }
.rqm-overlay[aria-hidden="false"] { display: block !important; }
body.rqm-open { overflow: hidden; }

/* Harmonize quiz styles inside modal */
.rqm-body .rq-title  { display: none; }
.rqm-body .rq-result { margin-top: 14px; }

/* Notices */
.rqm-notice {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; margin-bottom: 16px;
  border-radius: 10px; font-size: 15px; font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  animation: fadeIn 0.4s ease forwards;
}
.rqm-notice-success { background: #ecfdf5; border-left: 5px solid #10b981; color: #065f46; }
.rqm-notice-info    { background: #f0f9ff; border-left: 5px solid #3b82f6; color: #1e3a8a; }
.rqm-notice-text    { flex: 1; line-height: 1.4; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile optimization */
@media (max-width: 640px) {

  .rqm-dialog {
    width: 100%;
    height: 100%;

    max-height: 100vh;

    border-radius: 22px 22px 0 0;

    top: auto;
    bottom: 0;

    transform: translateX(-50%);
  }

  .rqm-body {
    padding: 18px 14px;
  }

  .rqm-body p {
    font-size: 17px;
  }

  .rqm-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}
/* ==========================================================================
   Visual polish pass: modal sizing, safe areas, and focus consistency
   ========================================================================== */
.rqm-overlay,
.rqm-dialog,
.rqm-dialog * {
  box-sizing: border-box;
}
/* Keep question numbering such as "1." on the same line on small screens. */
.rq-qtext strong {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Allow long question text to wrap without splitting the numbering marker. */
.rq-qtext {
  overflow-wrap: anywhere;
  word-break: normal;
  flex-wrap: nowrap;
}

.rq-qtext .rq-qbody {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.rqm-overlay {
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.rqm-dialog {
  width: min(96vw, var(--rqm-max-w));
  max-height: min(var(--rqm-max-h), calc(100dvh - 32px));
  border: 1px solid rgba(226, 232, 240, 0.75);
}

.rqm-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.rqm-dialog a:focus-visible,
.rqm-dialog button:focus-visible,
.rqm-dialog input:focus-visible,
.rqm-dialog select:focus-visible,
.rqm-dialog textarea:focus-visible,
.rqm-dialog [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.24);
}

.rqm-title,
.rqm-body,
.rqm-footer {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .rqm-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .rqm-dialog {
    max-height: 100%;
    width: 100%;
    border-radius: 22px 22px 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
}
/* RiddleR accessibility hardening: visible keyboard focus + reduced motion. */
.sr-only,
.riddler-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.riddler a:focus-visible,
.riddler button:focus-visible,
.riddler input:focus-visible,
.riddler select:focus-visible,
.riddler textarea:focus-visible,
.rnav a:focus-visible,
.rnav button:focus-visible,
.rnav-sheet a:focus-visible,
.rnav-sheet button:focus-visible,
.rnav-sheet input:focus-visible,
.rdesk-nav a:focus-visible,
.rdesk-nav button:focus-visible,
.rdesk-mega a:focus-visible,
.rdesk-mega button:focus-visible,
.rdesk-mega [role="tab"]:focus-visible,
.ua a:focus-visible,
.ua button:focus-visible,
.ua input:focus-visible,
.ua select:focus-visible,
.ua textarea:focus-visible,
.riddler-avatar-card a:focus-visible,
.riddler-avatar-card button:focus-visible,
.riddler-avatar-modal a:focus-visible,
.riddler-avatar-modal button:focus-visible,
.ravcm-overlay a:focus-visible,
.ravcm-overlay button:focus-visible,
.rfcm-overlay a:focus-visible,
.rfcm-overlay button:focus-visible,
.riddle-modal a:focus-visible,
.riddle-modal button:focus-visible,
.rq-wrap a:focus-visible,
.rq-wrap button:focus-visible,
.rq-wrap input:focus-visible,
.rq-wrap select:focus-visible,
.rq-wrap textarea:focus-visible,
.rqm-dialog a:focus-visible,
.rqm-dialog button:focus-visible,
.rqm-dialog input:focus-visible,
.rqm-dialog select:focus-visible,
.rqm-dialog textarea:focus-visible,
.rqpdf-dialog a:focus-visible,
.rqpdf-dialog button:focus-visible,
.rqpdf-dialog input:focus-visible,
.rqconfirm-dialog a:focus-visible,
.rqconfirm-dialog button:focus-visible,
.ecr a:focus-visible,
.ecr button:focus-visible,
.ecr input:focus-visible,
.ecr select:focus-visible,
.ecr textarea:focus-visible,
.riddler-case-reader a:focus-visible,
.riddler-case-reader button:focus-visible,
.riddler-case-reader input:focus-visible,
.riddler-case-reader select:focus-visible,
.riddler-case-reader textarea:focus-visible,
.ecr-hints-modal a:focus-visible,
.ecr-hints-modal button:focus-visible,
.ecr-hints-modal input:focus-visible,
.rcl-confirm-card a:focus-visible,
.rcl-confirm-card button:focus-visible {
  outline: 3px solid #2563eb !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22) !important;
}

@media (prefers-reduced-motion: reduce) {
  .riddler,
  .riddler *,
  .rnav,
  .rnav *,
  .rnav-sheet,
  .rnav-sheet *,
  .rdesk-nav,
  .rdesk-nav *,
  .rdesk-mega,
  .rdesk-mega *,
  .ua,
  .ua *,
  .ravcm-overlay,
  .ravcm-overlay *,
  .rfcm-overlay,
  .rfcm-overlay *,
  .riddle-modal,
  .riddle-modal *,
  .rq-wrap,
  .rq-wrap *,
  .rqm-dialog,
  .rqm-dialog *,
  .rqpdf-dialog,
  .rqpdf-dialog *,
  .rqconfirm-dialog,
  .rqconfirm-dialog *,
  .riddler-case-reader,
  .riddler-case-reader *,
  .ecr-hints-modal,
  .ecr-hints-modal *,
  .rcl-confirm-card,
  .rcl-confirm-card * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   Premium quiz modal UI — clearer header, progress, tap targets, mobile polish
   ========================================================================== */
.rqm-dialog {
  --rqm-ink: #0f172a;
  --rqm-muted-strong: #475569;
  --rqm-soft-blue: #eff6ff;
  --rqm-line: rgba(226, 232, 240, 0.86);
  width: min(96vw, 940px) !important;
  height: auto !important;
  max-height: min(88vh, calc(100dvh - 32px)) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(226, 232, 240, 0.82) !important;
  background:
    radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.08), transparent 34%),
    #ffffff !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24), 0 8px 22px rgba(15, 23, 42, 0.14) !important;
}

.rqm-overlay {
  background: rgba(2, 6, 23, 0.62) !important;
  backdrop-filter: blur(8px);
}

.rqm-header {
  position: relative;
  min-height: 86px;
  padding: 22px 24px 16px !important;
  border-bottom: 1px solid var(--rqm-line) !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.92)),
    radial-gradient(circle at 96% 0%, rgba(245, 158, 11, 0.10), transparent 34%);
}

.rqm-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #f59e0b, #2563eb, #10b981);
}

.rqm-title-group {
  min-width: 0;
  flex: 1;
  padding-right: 52px;
  text-align: left;
}

.rqm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(147, 197, 253, 0.72);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.9);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.rqm-kicker::before {
  content: "✦";
}

.rqm-title {
  margin: 10px 0 0 !important;
  color: #0f172a !important;
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 940 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  text-align: left !important;
}

.rqm-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  background: #ffffff;
  color: #0f172a !important;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.rqm-close:hover {
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.rqm-body {
  padding: clamp(18px, 3vw, 28px) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 250, 252, 0.74));
}

.rqm-body-inner {
  width: 100%;
  margin: 0 !important;
}

.rqm-body .riddler-quiz-container {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.rqm-body .rq-question {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 26px) !important;
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.06), transparent 36%),
    #ffffff !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08), 0 3px 10px rgba(15, 23, 42, 0.04) !important;
}

.rqm-body .rq-qtext {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
  color: #0f172a !important;
  font-size: clamp(17px, 2vw, 21px) !important;
  font-weight: 720 !important;
  line-height: 1.55 !important;
}

.rqm-body .rq-qtext strong {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: #1d4ed8;
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.rqm-body .rq-qtext .rq-qbody {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}


.rqm-body .rq-qtext.rq-qtext-has-source .rq-qbody {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.rqm-body .rq-qtext.rq-qtext-has-source .rq-reverse-source {
  display: block !important;
  margin: 0 !important;
  align-self: flex-start !important;
}

.rqm-body .rq-qtext.rq-qtext-has-source .rq-source-word {
  display: inline-block;
  font-weight: 800;
  line-height: 1.3;
}

.rqm-body .rq-grid {
  gap: 12px !important;
}

.rqm-body .rq-option,
.rqm-body .rq-chip,
.rqm-body .rq-key {
  min-height: 58px;
  border-radius: 18px !important;
  border-color: rgba(226, 232, 240, 0.94) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

.rqm-body .rq-option:hover,
.rqm-body .rq-chip:hover,
.rqm-body .rq-key:hover {
  border-color: rgba(37, 99, 235, 0.42) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.10) !important;
}

.rqm-body .rq-option:has(input:checked),
.rqm-body .rq-option.selected,
.rqm-body .rq-chip.selected,
.rqm-body .rq-key.selected {
  border-color: #2563eb !important;
  background: linear-gradient(180deg, #eff6ff, #dbeafe) !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.13), 0 10px 24px rgba(37, 99, 235, 0.10) !important;
}

.rqm-body .rq-constructed {
  margin-top: 24px !important;
  border-radius: 20px !important;
  border-color: rgba(226, 232, 240, 0.92) !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

.rqm-body .rq-navigation {
  margin-top: 18px !important;
}

.rqm-body .rq-next,
.rqm-body .rq-submit {
  min-height: 56px !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.28), 0 4px 10px rgba(37, 99, 235, 0.16) !important;
}

.rqm-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px !important;
  padding: 16px 22px calc(16px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--rqm-line) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.rqm-progress-wrap {
  min-width: 0;
}

.rqm-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.rqm-progress-percent {
  color: #0f172a;
}

.rqm-progress {
  height: 10px !important;
  margin: 0 !important;
  background: #e9eff7 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.07);
}

.rqm-progress > span {
  background: linear-gradient(90deg, #3b82f6, #2563eb, #10b981) !important;
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.26);
}

.rqm-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 98px;
  min-height: 44px;
  padding: 0 17px !important;
  border: 1px solid rgba(203, 213, 225, 0.92) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.rqm-exit:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.rqm-notice {
  border-radius: 18px !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 760px) {
  .rqm-dialog {
    width: 100% !important;
    max-height: 100% !important;
    border-radius: 26px 26px 0 0 !important;
  }

  .rqm-header {
    min-height: 78px;
    padding: 20px 18px 14px !important;
  }

  .rqm-title-group {
    padding-right: 46px;
  }

  .rqm-close {
    top: 16px;
    right: 14px;
    width: 40px;
    height: 40px;
  }

  .rqm-body {
    padding: 6px 14px !important;
  }

  .rqm-body .rq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .rqm-body .rq-option,
  .rqm-body .rq-chip,
  .rqm-body .rq-key {
    min-height: 52px;
    padding: 10px 12px;
    font-size: 15px;
  }

  .rqm-footer {
    grid-template-columns: 1fr;
    gap: 0 !important;
  }

  .rqm-exit {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .rqm-title {
    font-size: clamp(21px, 7.4vw, 28px) !important;
  }

  .rqm-body .rq-qtext {
    flex-wrap: nowrap !important;
    font-size: 16px !important;
  }

  .rqm-body .rq-qtext.rq-qtext-has-source .rq-qbody {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .rqm-body .rq-qtext strong {
    min-width: 30px;
    height: 30px;
    border-radius: 10px;
  }
}

@media (prefers-color-scheme: dark) {
  .rqm-dialog {
    --rqm-ink: #e5e7eb;
    --rqm-muted-strong: #cbd5e1;
    --rqm-line: rgba(51, 65, 85, 0.92);
    background:
      radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.13), transparent 34%),
      #0f172a !important;
    border-color: rgba(51, 65, 85, 0.92) !important;
  }

  .rqm-header,
  .rqm-footer,
  .rqm-body {
    background: rgba(15, 23, 42, 0.96) !important;
    border-color: rgba(51, 65, 85, 0.92) !important;
  }

  .rqm-title,
  .rqm-progress-percent,
  .rqm-body .rq-qtext,
  .rqm-body .rq-qtext strong {
    color: #f8fafc !important;
  }

  .rqm-progress-meta,
  .rqm-body p {
    color: #cbd5e1 !important;
  }

  .rqm-close,
  .rqm-exit,
  .rqm-body .rq-question,
  .rqm-body .rq-option,
  .rqm-body .rq-chip,
  .rqm-body .rq-key,
  .rqm-body .rq-constructed {
    background: #111827 !important;
    border-color: rgba(51, 65, 85, 0.92) !important;
    color: #e5e7eb !important;
  }

  .rqm-progress {
    background: #152238 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rqm-close,
  .rqm-body .rq-option,
  .rqm-body .rq-chip,
  .rqm-body .rq-key,
  .rqm-body .rq-next,
  .rqm-body .rq-submit,
  .rqm-progress > span {
    transition-duration: 0.01ms !important;
  }

  .rqm-close:hover,
  .rqm-body .rq-option:hover,
  .rqm-body .rq-chip:hover,
  .rqm-body .rq-key:hover {
    transform: none !important;
  }
}
/* 1.5.133 — Mobile fit without changing the established quiz composition. */
@media (max-width: 640px) {
  .rqm-dialog {
    width: 100% !important;
    height: auto !important;
    max-height: 100dvh !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .rqm-header {
    min-height: 64px;
    padding: 12px 14px 9px !important;
  }

  .rqm-title-group { padding-right: 42px; }
  .rqm-kicker { min-height: 23px; padding: 4px 8px; font-size: 9.5px; }
  .rqm-title { margin-top: 5px !important; font-size: clamp(20px, 6.4vw, 24px) !important; line-height: 1 !important; }
  .rqm-close { top: 11px; right: 11px; width: 36px; height: 36px; border-radius: 12px; font-size: 21px; }

  .rqm-body { padding: 5px 10px !important; }
  .rqm-body .rq-question { margin: 4px 0 6px !important; padding: 10px !important; border-radius: 18px !important; box-shadow: 0 8px 22px rgba(15,23,42,.06) !important; }
  .rqm-body .rq-qtext { gap: 8px !important; margin-bottom: 11px !important; font-size: 15px !important; line-height: 1.36 !important; }
  .rqm-body .rq-qtext strong { min-width: 28px; height: 28px; border-radius: 9px; font-size: 13px; }
  .rqm-body .rq-grid { gap: 7px !important; }
  .rqm-body .rq-option,
  .rqm-body .rq-chip,
  .rqm-body .rq-key { min-height: 42px; padding: 6px 8px; border-radius: 14px !important; font-size: 14px; line-height: 1.15; box-shadow: 0 4px 12px rgba(15,23,42,.045) !important; }
  /* Keep every standard answer choice on the same type scale. Radio-option quizzes
     used to inherit a lighter 600 weight while chip/key quizzes used 700. */
  .rqm-body .rq-option:not(.rq-direction-option) > span,
  .rqm-body .rq-chip,
  .rqm-body .rq-key {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }
  .rqm-body .rq-option:not(.rq-direction-option) > span { max-height: none; }

  /* Keep the original mobile composition: label, answer field and Clear are stacked. */
  .rqm-body .rq-constructed {
    grid-template-columns: 1fr !important;
    grid-template-areas: "label" "value" "clear" !important;
    gap: 6px !important;
    margin-top: 10px !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }
  .rqm-body .rq-constructed-label { font-size: 13px; line-height: 1.2; }
  .rqm-body .rq-constructed-value { min-height: 38px; padding: 7px 9px; border-radius: 10px; font-size: 14px; line-height: 1.2; }
  .rqm-body .rq-constructed .rq-btn,
  .rqm-body .rq-sequence-actions .rq-btn { width: 100% !important; min-height: 38px; padding: 6px 10px; border-radius: 10px; font-size: 13px; }
  .rqm-body .rq-sequence-actions { width: 100%; }

  .rqm-body .rq-actions { margin-top: 6px; }
  .rqm-body .rq-navigation { margin-top: 6px !important; gap: 6px; }
  .rqm-body .rq-next,
  .rqm-body .rq-submit,
  .rqm-body .rq-navigation button { min-height: 46px !important; height: 46px; padding: 0 14px !important; border-radius: 14px !important; font-size: 15px !important; }

  .rqm-footer { gap: 0 !important; padding: 8px 11px calc(8px + env(safe-area-inset-bottom)) !important; }
  .rqm-progress-meta { margin-bottom: 5px; font-size: 10.5px; }
  .rqm-progress { height: 7px !important; }
}

/* 1.5.134 — Typography-only correction: standard radio options now match chip/key answers. */


/* 1.5.133 — Word Chain keeps breathing room; compact only when viewport height truly requires it. */
@media (max-width: 420px) and (max-height: 699px) {
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-header {
    min-height: 60px;
    padding: 9px 12px 7px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-kicker {
    min-height: 22px;
    padding: 4px 8px;
    font-size: 9px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-title {
    margin-top: 4px !important;
    font-size: 20px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-close {
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body {
    padding-block: 4px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-question {
    padding: 9px !important;
    margin-block: 3px 5px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-qtext {
    margin-bottom: 9px !important;
    font-size: 15px !important;
    line-height: 1.32 !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-sequence-options {
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-sequence-tile {
    min-height: 42px;
    padding: 6px 8px;
    font-size: 14px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed {
    margin-top: 8px !important;
    gap: 5px !important;
    padding: 8px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed-value {
    min-height: 36px;
    padding: 6px 9px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed .rq-btn {
    min-height: 36px;
    padding-block: 5px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-actions {
    margin-top: 5px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-navigation {
    margin-top: 5px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-next {
    min-height: 46px !important;
    height: 46px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-footer {
    padding-top: 7px !important;
    padding-bottom: calc(7px + env(safe-area-inset-bottom)) !important;
  }
}


/* Very narrow phones: trim only enough to preserve the full Word Chain flow. */
@media (max-width: 340px) and (max-height: 699px) {
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-header {
    min-height: 56px;
    padding: 8px 12px 6px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-kicker {
    min-height: 21px;
    padding: 3px 7px;
    font-size: 8.75px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-title {
    margin-top: 3px !important;
    font-size: 19px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-qtext {
    margin-bottom: 8px !important;
    font-size: 14.5px !important;
    line-height: 1.30 !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-sequence-options {
    gap: 5px !important;
    padding: 7px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-sequence-tile {
    min-height: 40px;
    padding: 5px 7px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed {
    margin-top: 7px !important;
    padding: 7px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed-value,
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed .rq-btn {
    min-height: 35px;
  }
}

/* Very short phone viewports get a final, small density step to avoid scroll/overlap. */
@media (max-width: 420px) and (max-height: 580px) {
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-header {
    min-height: 54px;
    padding: 7px 12px 5px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-kicker {
    min-height: 20px;
    padding: 3px 7px;
    font-size: 8.5px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-title {
    margin-top: 2px !important;
    font-size: 18px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-close {
    top: 8px;
    right: 9px;
    width: 34px;
    height: 34px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-question {
    padding: 8px !important;
    margin-block: 2px 4px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-qtext {
    margin-bottom: 7px !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-sequence-options {
    gap: 4px !important;
    padding: 6px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-sequence-tile {
    min-height: 38px;
    padding: 5px 6px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed {
    margin-top: 7px !important;
    gap: 4px !important;
    padding: 7px !important;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed-value,
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed .rq-btn {
    min-height: 34px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-next {
    min-height: 44px !important;
    height: 44px;
  }
  .rqm-dialog:has(.rq-question.active-question[data-type="word_chain"]) .rqm-footer {
    padding-top: 6px !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }
}

/* ========================================================================== 
   1.5.138 — Full-viewport Focus Mode for Brain Challenges
   The browser itself is not forced into Fullscreen API mode. Instead the quiz
   receives a dedicated, accessible viewport layer with bounded game content.
   ========================================================================== */

html.rqm-focus-open,
body.rqm-focus-open {
  width: 100%;
  min-height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.rqm-focus-open {
  touch-action: manipulation;
}

.rqm-overlay[aria-hidden="false"] {
  position: fixed !important;
  inset: 0 !important;
  padding: 0 !important;
  background: #eef3f9 !important;
  backdrop-filter: none !important;
  z-index: 2147483000 !important;
}

.rqm-dialog.rqm-focus-mode {
  --rqm-content-w: 900px;
  --rqm-canvas:
    radial-gradient(circle at 8% 2%, rgba(245, 158, 11, 0.12), transparent 30%),
    radial-gradient(circle at 94% 4%, rgba(14, 165, 233, 0.12), transparent 32%),
    linear-gradient(135deg, #fffdf8 0%, #f8fafc 48%, #eff6ff 100%);

  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  transform: none !important;
  width: 100vw !important;
  max-width: none !important;
  height: var(--rqm-viewport-height, 100dvh) !important;
  min-height: var(--rqm-viewport-height, 100dvh) !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--rqm-canvas) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 2147483001 !important;
  isolation: isolate;
  animation: none !important;
}

.rqm-dialog.rqm-focus-mode .rqm-header {
  position: relative;
  flex: 0 0 auto;
  min-height: 86px;
  padding:
    max(18px, env(safe-area-inset-top))
    max(22px, calc((100vw - var(--rqm-content-w)) / 2 + 22px))
    13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.72) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.rqm-dialog.rqm-focus-mode .rqm-header::before {
  height: 4px;
  background: linear-gradient(90deg, #f59e0b 0%, #2563eb 52%, #10b981 100%);
}

.rqm-dialog.rqm-focus-mode .rqm-title-group {
  width: min(100%, var(--rqm-content-w));
  margin: 0 auto;
  padding-right: 62px;
}

.rqm-dialog.rqm-focus-mode .rqm-kicker {
  min-height: 26px;
  padding: 5px 10px;
  border-color: rgba(96, 165, 250, 0.62);
  background: rgba(239, 246, 255, 0.88);
  font-size: 10.5px;
}

.rqm-dialog.rqm-focus-mode .rqm-title {
  margin-top: 7px !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1 !important;
}

.rqm-dialog.rqm-focus-mode .rqm-close {
  position: fixed !important;
  top: max(16px, env(safe-area-inset-top)) !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px;
  min-height: 46px;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  z-index: 4;
}

.rqm-dialog.rqm-focus-mode .rqm-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: clamp(16px, 2.5vh, 28px) max(18px, env(safe-area-inset-right)) clamp(14px, 2.2vh, 24px) max(18px, env(safe-area-inset-left)) !important;
  background: transparent !important;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scroll-padding-top: 12px;
  scroll-padding-bottom: 86px;
  scrollbar-gutter: stable both-edges;
}

.rqm-dialog.rqm-focus-mode .rqm-body-inner {
  width: min(100%, var(--rqm-content-w));
  min-height: 100%;
  margin: 0 auto !important;
  display: flex;
  flex-direction: column;
}

.rqm-dialog.rqm-focus-mode .riddler-quiz-container {
  width: 100% !important;
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.rqm-dialog.rqm-focus-mode .riddler-quiz-form {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.rqm-dialog.rqm-focus-mode .rq-questions-wrapper {
  width: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

.rqm-dialog.rqm-focus-mode .rq-question.active-question {
  width: 100%;
  margin: auto 0 !important;
}

.rqm-dialog.rqm-focus-mode .rq-question[tabindex="-1"]:focus,
.rqm-dialog.rqm-focus-mode .rq-result[tabindex="-1"]:focus {
  outline: none;
}

.rqm-dialog.rqm-focus-mode .rq-actions {
  position: sticky;
  z-index: 5;
  bottom: -1px;
  width: 100%;
  margin-top: auto !important;
  padding: 14px 0 4px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0), rgba(248, 250, 252, 0.96) 30%, rgba(248, 250, 252, 0.99) 100%);
}

.rqm-dialog.rqm-focus-mode .rq-navigation {
  width: min(100%, 680px);
  margin: 0 auto !important;
}

.rqm-dialog.rqm-focus-mode .rq-next,
.rqm-dialog.rqm-focus-mode .rq-submit,
.rqm-dialog.rqm-focus-mode .rq-navigation button {
  min-height: 54px !important;
  height: 54px;
  border-radius: 17px !important;
  font-size: 16px !important;
}

.rqm-dialog.rqm-focus-mode .riddler-quiz-container:has(.rq-result:not(:empty)) .riddler-quiz-form {
  min-height: 0;
  flex: 0 0 auto;
}

.rqm-dialog.rqm-focus-mode .riddler-quiz-container:has(.rq-result:not(:empty)) .rq-result {
  width: 100%;
  margin: auto 0 !important;
}

.rqm-dialog.rqm-focus-mode .riddler-quiz-container:has(.rq-result:not(:empty)) .rq-result-actions {
  margin-bottom: 14px;
}

.rqm-dialog.rqm-focus-mode .rqm-footer {
  position: relative;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  width: 100%;
  padding:
    13px
    max(22px, calc((100vw - var(--rqm-content-w)) / 2 + 22px))
    max(14px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(203, 213, 225, 0.74) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.rqm-dialog.rqm-focus-mode .rqm-progress-wrap {
  align-self: center;
}

.rqm-dialog.rqm-focus-mode .rqm-progress-meta {
  margin-bottom: 6px;
  font-size: 11.5px;
}

.rqm-dialog.rqm-focus-mode .rqm-progress {
  height: 8px !important;
}

.rqm-dialog.rqm-focus-mode .rqm-exit {
  min-height: 44px;
}

/* Full viewport gives the content room again: keep answer controls comfortably
   touchable instead of using the previous modal-fit compression. */
@media (max-width: 760px) {
  .rqm-dialog.rqm-focus-mode {
    --rqm-content-w: 620px;
  }

  .rqm-dialog.rqm-focus-mode .rqm-header {
    min-height: 66px !important;
    padding:
      max(9px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      8px
      max(12px, env(safe-area-inset-left)) !important;
    border-radius: 0 !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-title-group {
    padding-right: 50px;
  }

  .rqm-dialog.rqm-focus-mode .rqm-kicker {
    min-height: 22px;
    padding: 4px 8px;
    font-size: 9px;
  }

  .rqm-dialog.rqm-focus-mode .rqm-title {
    margin-top: 4px !important;
    font-size: clamp(20px, 6vw, 24px) !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-close {
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    border-radius: 14px !important;
    font-size: 22px;
  }

  .rqm-dialog.rqm-focus-mode .rqm-body {
    padding: 9px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)) !important;
    scroll-padding-bottom: 70px;
    scrollbar-gutter: auto;
  }

  .rqm-dialog.rqm-focus-mode .rq-question,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-question {
    margin: auto 0 !important;
    padding: 12px !important;
    border-radius: 19px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-qtext,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-qtext {
    gap: 8px !important;
    margin-bottom: 12px !important;
    font-size: 15px !important;
    line-height: 1.36 !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-qtext strong {
    min-width: 29px;
    height: 29px;
    border-radius: 9px;
    font-size: 13px;
  }

  .rqm-dialog.rqm-focus-mode .rq-grid {
    gap: 7px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-option,
  .rqm-dialog.rqm-focus-mode .rq-chip,
  .rqm-dialog.rqm-focus-mode .rq-key {
    min-height: 46px !important;
    padding: 8px 9px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-option:not(.rq-direction-option) > span,
  .rqm-dialog.rqm-focus-mode .rq-chip,
  .rqm-dialog.rqm-focus-mode .rq-key {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-sequence-options,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-sequence-options {
    gap: 7px !important;
    padding: 9px !important;
    border-radius: 15px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-sequence-tile,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-sequence-tile {
    min-height: 44px !important;
    padding: 7px 8px !important;
    font-size: 14px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-constructed,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed {
    grid-template-columns: 1fr !important;
    grid-template-areas: "label" "value" "clear" !important;
    gap: 6px !important;
    margin-top: 10px !important;
    padding: 9px !important;
    border-radius: 16px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-constructed-label {
    font-size: 13px !important;
    line-height: 1.2;
  }

  .rqm-dialog.rqm-focus-mode .rq-constructed-value,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed-value {
    min-height: 40px !important;
    padding: 7px 9px !important;
    border-radius: 10px;
    font-size: 14px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-constructed .rq-btn,
  .rqm-dialog.rqm-focus-mode .rq-sequence-actions .rq-btn,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed .rq-btn {
    width: 100% !important;
    min-height: 40px !important;
    padding: 6px 10px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-actions,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-actions {
    margin-top: auto !important;
    padding: 9px 0 2px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-navigation,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-navigation {
    margin: 0 auto !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-next,
  .rqm-dialog.rqm-focus-mode .rq-submit,
  .rqm-dialog.rqm-focus-mode .rq-navigation button,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-next {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-footer,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rqm-footer {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding:
      7px
      max(11px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(11px, env(safe-area-inset-left)) !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-progress-meta {
    margin-bottom: 4px;
    font-size: 10.5px;
  }

  .rqm-dialog.rqm-focus-mode .rqm-progress {
    height: 7px !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-exit {
    display: none !important;
  }
}

/* Keep the hardest normal questions usable on short phones without returning to
   the overly compressed 1.5.132/1.5.133 presentation. Body scrolling remains
   available if content genuinely exceeds the viewport. */
@media (max-width: 420px) and (max-height: 620px) {
  .rqm-dialog.rqm-focus-mode .rqm-header,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rqm-header {
    min-height: 58px !important;
    padding-top: max(7px, env(safe-area-inset-top)) !important;
    padding-bottom: 6px !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-kicker,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rqm-kicker {
    min-height: 20px;
    padding: 3px 7px;
    font-size: 8.5px;
  }

  .rqm-dialog.rqm-focus-mode .rqm-title,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rqm-title {
    margin-top: 3px !important;
    font-size: 19px !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-close,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rqm-close {
    top: max(7px, env(safe-area-inset-top)) !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    min-height: 42px;
  }

  .rqm-dialog.rqm-focus-mode .rqm-body {
    padding-top: 6px !important;
    padding-bottom: 5px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-question,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-question {
    padding: 10px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-qtext,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-qtext {
    margin-bottom: 9px !important;
    font-size: 14.5px !important;
    line-height: 1.31 !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-option,
  .rqm-dialog.rqm-focus-mode .rq-chip,
  .rqm-dialog.rqm-focus-mode .rq-key {
    min-height: 43px !important;
    padding-block: 6px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-sequence-options,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-sequence-options {
    gap: 6px !important;
    padding: 8px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-sequence-tile,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-sequence-tile {
    min-height: 41px !important;
    padding: 6px 7px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-constructed,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed {
    margin-top: 8px !important;
    padding: 8px !important;
    gap: 5px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-constructed-value,
  .rqm-dialog.rqm-focus-mode .rq-constructed .rq-btn,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed-value,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rq-constructed .rq-btn {
    min-height: 37px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-next,
  .rqm-dialog.rqm-focus-mode .rq-submit,
  .rqm-dialog.rqm-focus-mode .rq-navigation button,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rqm-body .rq-next {
    min-height: 46px !important;
    height: 46px !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-footer,
  .rqm-dialog.rqm-focus-mode:has(.rq-question.active-question[data-type="word_chain"]) .rqm-footer {
    padding-top: 6px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }
}

/* Small landscape devices need horizontal efficiency rather than tiny text. */
@media (orientation: landscape) and (max-height: 560px) {
  .rqm-dialog.rqm-focus-mode .rqm-header {
    min-height: 54px !important;
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    padding-bottom: 5px !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-kicker {
    min-height: 20px;
    padding-block: 3px;
  }

  .rqm-dialog.rqm-focus-mode .rqm-title {
    margin-top: 2px !important;
    font-size: 19px !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-close {
    top: max(6px, env(safe-area-inset-top)) !important;
    width: 42px !important;
    height: 42px !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-body {
    padding-top: 6px !important;
    padding-bottom: 5px !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-question {
    margin: 0 !important;
  }
}

@media (prefers-color-scheme: dark) {
  .rqm-overlay[aria-hidden="false"] {
    background: #07111f !important;
  }

  .rqm-dialog.rqm-focus-mode {
    --rqm-canvas:
      radial-gradient(circle at 8% 2%, rgba(245, 158, 11, 0.10), transparent 30%),
      radial-gradient(circle at 94% 4%, rgba(14, 165, 233, 0.12), transparent 32%),
      linear-gradient(135deg, #111827 0%, #0f172a 52%, #07111f 100%);
    background: var(--rqm-canvas) !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-header,
  .rqm-dialog.rqm-focus-mode .rqm-footer {
    background: rgba(15, 23, 42, 0.86) !important;
    border-color: rgba(71, 85, 105, 0.72) !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-body {
    background: transparent !important;
  }

  .rqm-dialog.rqm-focus-mode .rq-actions {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.96) 30%, rgba(15, 23, 42, 0.99) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rqm-dialog.rqm-focus-mode .rqm-body {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  .rqm-dialog.rqm-focus-mode,
  .rqm-dialog.rqm-focus-mode .rqm-header,
  .rqm-dialog.rqm-focus-mode .rqm-footer,
  .rqm-dialog.rqm-focus-mode .rq-question,
  .rqm-dialog.rqm-focus-mode .rq-option,
  .rqm-dialog.rqm-focus-mode .rq-chip,
  .rqm-dialog.rqm-focus-mode .rq-key,
  .rqm-dialog.rqm-focus-mode .rq-constructed {
    forced-color-adjust: auto;
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }

  .rqm-dialog.rqm-focus-mode .rqm-header::before {
    background: Highlight !important;
  }
}

/* Keep quiz-owned nested confirmation/reward dialogs above the Focus Mode layer. */
body.rqm-focus-open > .rq-skip-confirm-overlay,
body.rqm-focus-open > .ravcm-overlay,
body.rqm-focus-open > .rqconfirm-overlay,
body.rqm-focus-open > .rqconfirm-dialog,
body.rqm-focus-open > .rqpdf-overlay,
body.rqm-focus-open > .rqpdf-dialog,
body.rqm-focus-open > .rrwa-overlay,
body.rqm-focus-open > .riddle-modal-overlay,
body.rqm-focus-open > .riddle-modal,
body.rqm-focus-open > [aria-modal="true"]:not(.rqm-dialog) {
  z-index: 2147483600 !important;
}

/* Keyboard accessibility: keep native radio controls in the accessibility and
   keyboard tree while visually presenting the whole label as the answer card. */
.rqm-dialog.rqm-focus-mode .rq-option {
  position: relative;
}

.rqm-dialog.rqm-focus-mode .rq-option input[type="radio"] {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0.01;
}

/* v1.5.150 — Prevent global theme button states from recoloring modal controls. */
.rqm-dialog .rqm-close:hover,
.rqm-dialog .rqm-close:focus,
.rqm-dialog .rqm-close:focus-visible {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(203,213,225,.96) !important;
}

.rqm-dialog .rqm-exit:hover,
.rqm-dialog .rqm-exit:focus,
.rqm-dialog .rqm-exit:focus-visible {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(203,213,225,.96) !important;
}

@media (prefers-color-scheme: dark) {
  .rqm-dialog .rqm-close:hover,
  .rqm-dialog .rqm-close:focus,
  .rqm-dialog .rqm-close:focus-visible,
  .rqm-dialog .rqm-exit:hover,
  .rqm-dialog .rqm-exit:focus,
  .rqm-dialog .rqm-exit:focus-visible {
    background: #172033 !important;
    background-color: #172033 !important;
    color: #f8fafc !important;
    border-color: rgba(71,85,105,.96) !important;
  }
}