.qf-loading {
  background: #fff;
  border: 1px solid #dbe2ea;
  border-radius: 18px;
  color: #647085;
  padding: 28px;
  text-align: center;
}

/* ---- Column width fix (v1.9.0) ----
   The original CSS hard-coded `width: 50%` for both body cells, then a later
   fix overrode it to `width: auto`. Neither honours the --qf-col variable that
   player.js sets from the Column width slider.

   Now: the first body cell (tbody th) uses --qf-col, the remaining cells
   (tbody td) share the leftover space evenly based on --qf-col-count. */
.qf-play-table tbody th {
  width: var(--qf-col, 50%);
}
.qf-play-table tbody td {
  width: calc((100% - var(--qf-col, 50%)) / max(1, var(--qf-col-count, 2) - 1));
}

/* When there is only a single column (no td cells), let it fill the table. */
.qf-play-table tbody:has(th:only-child) th {
  width: 100%;
}

/* Compact facts block shown above the playing area when "Show details on play
   screen" is enabled. Mirrors the intro facts styling but slimmer. */
.qf-play-facts {
  padding: 14px 28px 0;
}
.qf-play-facts .qf-facts {
  margin: 0 0 6px;
}
.qf-play-facts .qf-facts div {
  padding: 10px 12px;
}

.qf-result-hub {
  grid-template-columns: minmax(240px, 360px);
}

/* ---- Image cell support (v2.0.0) ----
   Cells that contain an image get relaxed height and a centered image+caption
   stack. The image scales to fit the column width while preserving aspect
   ratio. The caption sits below in a smaller font. */
.qf-play-table .qf-has-image {
  height: auto;
  min-height: 90px;
  padding: 6px !important;
  text-align: center;
  vertical-align: middle;
}
.qf-play-table .qf-cell-img {
  display: block;
  height: auto;
  margin: 0 auto 4px;
  max-height: 220px;
  max-width: 100%;
  object-fit: contain;
}
.qf-play-table .qf-cell-cap {
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  margin: 2px 0 0;
}
.qf-play-table tbody th.qf-has-image {
  background: var(--qf-table-hint-bg);
}
.qf-play-table tbody td.qf-has-image {
  background: var(--qf-table-answer-bg);
}

/* When a row contains an image cell, give all cells in that row a bit more
   vertical breathing room so the layout doesn't feel cramped. */
.qf-play-table tr:has(.qf-has-image) th,
.qf-play-table tr:has(.qf-has-image) td {
  vertical-align: middle;
}

/* Hide the empty text node placeholder when only image is shown */
.qf-play-table .qf-cell-img:last-child {
  margin-bottom: 0;
}

/* ---- v2.1.0: Defensive rules against theme conflicts ----
   Many themes ship aggressive global table resets like `table th, table td { width: ...; padding: 0; }`
   that clobber the quiz's classic-table layout on the front-end (but not in the
   WordPress admin, where the admin theme doesn't apply those rules). That's the
   root cause of "quiz looks fine when I'm logged in to wp-admin but breaks on
   the live site for logged-out visitors". These rules use !important to make sure
   the quiz table keeps its layout regardless of the active theme. */
.qf-root { display: block !important; margin: 2rem auto !important; max-width: 960px !important; visibility: visible !important; }
.qf-root * { box-sizing: border-box !important; }
.qf-card { background: #fff !important; border: 1px solid #dbe2ea !important; border-radius: 18px !important; box-shadow: 0 12px 35px rgba(15,23,42,.08) !important; display: block !important; overflow: hidden !important; }
.qf-stage { display: block !important; padding: 18px 28px !important; }
.qf-play-table-wrap { display: block !important; overflow: auto !important; width: 100% !important; }
.qf-play-table { border-collapse: collapse !important; display: table !important; table-layout: fixed !important; width: 100% !important; }
.qf-play-table th, .qf-play-table td { box-sizing: border-box !important; display: table-cell !important; }
.qf-play-table thead { display: table-header-group !important; }
.qf-play-table tbody { display: table-row-group !important; }
.qf-play-table tr { display: table-row !important; }
.qf-status { display: grid !important; }
.qf-typebar { display: flex !important; }
.qf-typebar label { display: grid !important; flex: 1 1 auto !important; }
.qf-typebar input { display: block !important; width: 100% !important; }
.qf-facts { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
.qf-facts div { display: block !important; }
.qf-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.qf-btn { display: inline-block !important; }

/* ===== v2.4.0: Kadence theme / high-specificity theme override =====
   Kadence (and many modern themes) ship aggressive table CSS like:
     .entry-content table th,
     .entry-content table td { padding: 10px; border: 1px solid #eee; background: ...; }
   These selectors have specificity (0,1,2) and load AFTER plugin CSS in <head>,
   so they win against my .qf-play-table th rules (specificity 0,1,2, last one wins).
   
   The fix is to use MAXIMUM specificity selectors that no theme can beat
   without using !important on a higher-specificity selector themselves.
   `html body .qf-root .qf-play-table th` has specificity (0,2,5) which beats
   any (0,1,N) selector a theme can throw at us. Combined with !important,
   this GUARANTEES the quiz table renders correctly regardless of the theme. */

html body .qf-root .qf-play-table,
html body .qf-root .qf-play-table tbody,
html body .qf-root .qf-play-table thead,
html body .qf-root .qf-play-table tfoot,
html body .qf-root .qf-play-table tr,
html body .qf-root .qf-play-table th,
html body .qf-root .qf-play-table td {
  background: initial !important;
  border: initial !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  box-sizing: border-box !important;
  color: initial !important;
  display: revert !important;
  font: inherit !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  text-align: center !important;
  text-transform: none !important;
  vertical-align: middle !important;
  width: auto !important;
  height: 34px !important;
}

html body .qf-root .qf-play-table {
  border-collapse: collapse !important;
  table-layout: fixed !important;
  width: 100% !important;
  display: table !important;
}
html body .qf-root .qf-play-table thead { display: table-header-group !important; }
html body .qf-root .qf-play-table tbody { display: table-row-group !important; }
html body .qf-root .qf-play-table tr { display: table-row !important; }
html body .qf-root .qf-play-table th,
html body .qf-root .qf-play-table td { display: table-cell !important; }

/* Restore the quiz-specific colors that the reset above nuked */
html body .qf-root .qf-play-table thead th {
  background: var(--qf-table-head-bg, #161616) !important;
  color: var(--qf-table-head-text, #7dff9b) !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
  font-weight: 700 !important;
}
html body .qf-root .qf-play-table tbody th {
  background: var(--qf-table-hint-bg, #4b4b4b) !important;
  color: var(--qf-table-hint-text, #ffffff) !important;
  font-weight: 700 !important;
  width: var(--qf-col, 50%) !important;
}
html body .qf-root .qf-play-table tbody td {
  background: var(--qf-table-answer-bg, #b9f79f) !important;
  color: var(--qf-table-answer-text, #102514) !important;
  font-weight: 800 !important;
  width: calc((100% - var(--qf-col, 50%)) / max(1, var(--qf-col-count, 2) - 1)) !important;
}
html body .qf-root .qf-play-table th,
html body .qf-root .qf-play-table td {
  border: 1px solid #172033 !important;
}

/* Reveal state (when user answers correctly) */
html body .qf-root .qf-play-table tr.is-correct td {
  background: var(--qf-ok, #15803d) !important;
  color: #fff !important;
}
html body .qf-root .qf-play-table tr.is-revealed td {
  background: #f4c0c0 !important;
  color: #7f1d1d !important;
}

/* Image cell overrides */
html body .qf-root .qf-play-table .qf-has-image {
  height: auto !important;
  min-height: 90px !important;
  padding: 6px !important;
}
html body .qf-root .qf-play-table .qf-cell-img {
  display: block !important;
  height: auto !important;
  margin: 0 auto 4px !important;
  max-height: 220px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
html body .qf-root .qf-play-table .qf-cell-cap {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 2px 0 0 !important;
}

/* Also force the quiz card itself to not be overridden by theme .entry-content */
html body .qf-root,
html body .qf-root .qf-card,
html body .qf-root .qf-title,
html body .qf-root .qf-stage,
html body .qf-root .qf-status,
html body .qf-root .qf-typebar,
html body .qf-root .qf-facts,
html body .qf-root .qf-actions,
html body .qf-root .qf-btn {
  all: revert !important;
  box-sizing: border-box !important;
}
html body .qf-root {
  display: block !important;
  margin: 2rem auto !important;
  max-width: 960px !important;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif !important;
  color: #172033 !important;
}
html body .qf-root .qf-card {
  background: #fff !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 35px rgba(15,23,42,.08) !important;
  overflow: hidden !important;
}
html body .qf-root .qf-title {
  padding: 26px 28px 18px !important;
  border-bottom: 1px solid #e5eaf0 !important;
}
html body .qf-root .qf-title h2 {
  font-size: clamp(1.6rem, 4vw, 2.35rem) !important;
  line-height: 1.15 !important;
  margin: .2rem 0 !important;
  color: #172033 !important;
}
html body .qf-root .qf-stage {
  padding: 18px 28px !important;
}
html body .qf-root .qf-status {
  align-items: center !important;
  background: #10213d !important;
  color: #fff !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  padding: 14px 28px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}
html body .qf-root .qf-typebar {
  align-items: end !important;
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
html body .qf-root .qf-typebar label {
  display: grid !important;
  flex: 1 !important;
  gap: 6px !important;
}
html body .qf-root .qf-typebar input {
  border: 2px solid #172033 !important;
  border-radius: 7px !important;
  font: inherit !important;
  font-size: 18px !important;
  min-height: 52px !important;
  padding: 9px 12px !important;
  width: 100% !important;
}
html body .qf-root .qf-facts {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin: 20px 0 !important;
}
html body .qf-root .qf-facts div {
  background: #f7f9fb !important;
  border: 1px solid #e5eaf0 !important;
  padding: 13px !important;
  border-radius: 10px !important;
}
html body .qf-root .qf-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
html body .qf-root .qf-btn {
  appearance: none !important;
  background: #fff !important;
  border: 1px solid #cbd4df !important;
  border-radius: 9px !important;
  color: #172033 !important;
  cursor: pointer !important;
  font: inherit !important;
  font-weight: 700 !important;
  min-height: 44px !important;
  padding: 10px 17px !important;
}
html body .qf-root .qf-btn.qf-primary {
  background: var(--qf-accent, #2563eb) !important;
  border-color: var(--qf-accent, #2563eb) !important;
  color: #fff !important;
}
html body .qf-root .qf-btn.qf-danger { color: var(--qf-bad, #b91c1c) !important; }

/* ===== v2.5.0: Finish button padding + scroll-to-top ===== */
html body .qf-root .qf-game-actions {
  border-top: 1px solid #e5eaf0 !important;
  padding: 28px 28px 32px !important;
  margin-top: 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  background: #f8fafc !important;
}
html body .qf-root .qf-game-actions .qf-btn {
  min-height: 48px !important;
  padding: 12px 22px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
html body .qf-root .qf-game-actions .qf-btn.qf-danger {
  background: #fff !important;
  border: 2px solid var(--qf-bad, #b91c1c) !important;
  color: var(--qf-bad, #b91c1c) !important;
}
html body .qf-root .qf-game-actions .qf-btn.qf-danger:hover {
  background: var(--qf-bad, #b91c1c) !important;
  color: #fff !important;
}

/* Also give the results "Replay" button more padding and breathing room */
html body .qf-root .qf-results {
  padding: 32px 28px 36px !important;
}
html body .qf-root .qf-result-hub {
  margin-top: 28px !important;
  padding: 18px !important;
}
html body .qf-root .qf-result-main-actions button {
  min-height: 54px !important;
  padding: 14px 24px !important;
}

/* ================================================================
   v2.6.0 — Mobile / Tablet responsive layout
   The existing @media rules in player.css and player-classic.css get
   overridden by the v2.4.0 maximum-specificity rules. These new rules
   use the same `html body .qf-root` prefix so they win against any theme
   and provide a clean, professional mobile experience.
   ================================================================ */

/* Tablet and below — adjust spacing, slightly smaller fonts */
@media (max-width: 768px) {
  html body .qf-root {
    margin: 1rem auto !important;
    max-width: 100% !important;
    font-size: 15px !important;
  }
  html body .qf-root .qf-card {
    border-radius: 14px !important;
  }
  html body .qf-root .qf-title {
    padding: 20px 18px 14px !important;
  }
  html body .qf-root .qf-title h2 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
  html body .qf-root .qf-title p {
    font-size: 0.9rem !important;
    margin-top: 0.4rem !important;
  }
  html body .qf-root .qf-stage {
    padding: 14px 18px !important;
  }
  html body .qf-root .qf-status {
    padding: 12px 16px !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  html body .qf-root .qf-status span {
    font-size: 0.62rem !important;
  }
  html body .qf-root .qf-status strong {
    font-size: 1rem !important;
  }
  html body .qf-root .qf-facts {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin: 14px 0 !important;
  }
  html body .qf-root .qf-facts div {
    padding: 10px 8px !important;
  }
  html body .qf-root .qf-facts dt {
    font-size: 0.62rem !important;
  }
  html body .qf-root .qf-facts dd {
    font-size: 1rem !important;
  }
  html body .qf-root .qf-play-table th,
  html body .qf-root .qf-play-table td {
    font-size: 14px !important;
    padding: 8px 10px !important;
    height: 38px !important;
  }
  html body .qf-root .qf-game-actions {
    padding: 20px 18px 24px !important;
    gap: 10px !important;
  }
  html body .qf-root .qf-game-actions .qf-btn {
    min-height: 44px !important;
    padding: 11px 18px !important;
    font-size: 15px !important;
    flex: 1 1 auto !important;
  }
}

/* Phone — stack the typebar, smaller fonts, single-column facts */
@media (max-width: 480px) {
  html body .qf-root {
    margin: 0 auto 1rem !important;
    font-size: 14px !important;
  }
  html body .qf-root .qf-card {
    border-radius: 10px !important;
    border: 1px solid #d8dfe6 !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.06) !important;
  }
  html body .qf-root .qf-title {
    padding: 16px 14px 12px !important;
  }
  html body .qf-root .qf-title h2 {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
  }
  html body .qf-root .qf-title p {
    font-size: 0.85rem !important;
  }
  html body .qf-root .qf-stage,
  html body .qf-root .qf-results,
  html body .qf-root .qf-intro,
  html body .qf-root .qf-review {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html body .qf-root .qf-status {
    padding: 10px 12px !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    font-size: 12px !important;
  }
  html body .qf-root .qf-status span {
    font-size: 0.58rem !important;
    letter-spacing: 0.02em !important;
  }
  html body .qf-root .qf-status strong {
    font-size: 0.9rem !important;
  }
  /* Typebar — stack input on top of Give Up button on phones */
  html body .qf-root .qf-typebar {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  html body .qf-root .qf-typebar label {
    gap: 4px !important;
  }
  html body .qf-root .qf-typebar label > span {
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  html body .qf-root .qf-typebar input {
    font-size: 16px !important;  /* 16px prevents iOS zoom on focus */
    min-height: 48px !important;
    padding: 10px 14px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
  }
  html body .qf-root .qf-typebar .qf-btn,
  html body .qf-root .qf-typebar [data-give-up] {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  /* Play table — fit the viewport, allow text wrapping, no horizontal scroll
     needed to see the answer column. Both prompt + answer are always visible. */
  html body .qf-root .qf-play-table-wrap {
    overflow-x: auto !important;  /* keep as safety net for very wide content */
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -12px !important;
    padding: 0 12px !important;
  }
  html body .qf-root .qf-play-table {
    /* No min-width — let table shrink to viewport so both columns are visible
       without horizontal scrolling. word-break handles overflow gracefully. */
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }
  html body .qf-root .qf-play-table th,
  html body .qf-root .qf-play-table td {
    font-size: 13px !important;
    padding: 9px 10px !important;
    height: auto !important;          /* let rows grow with wrapped text */
    min-height: 36px !important;
    line-height: 1.35 !important;
    white-space: normal !important;    /* allow text to wrap to next line */
    word-break: break-word !important; /* break very long words to prevent overflow */
    overflow-wrap: anywhere !important; /* newer property for better wrapping */
    hyphens: auto !important;
    vertical-align: top !important;    /* top-align when text wraps to multiple lines */
    text-align: left !important;       /* left-align for readability on mobile */
  }
  /* Override the desktop center-align for the answer cell on phones — left-align
     is more readable when text wraps to multiple lines */
  html body .qf-root .qf-play-table thead th {
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    text-align: left !important;
  }
  /* Re-balance column widths on phone: 55% prompt, 45% answer so both are visible
     without scrolling. The answer column starts empty so the prompt gets a bit more. */
  html body .qf-root .qf-play-table tbody th {
    width: 55% !important;
  }
  html body .qf-root .qf-play-table tbody td {
    width: 45% !important;
  }
  /* Image cells — smaller max height on phones */
  html body .qf-root .qf-play-table .qf-has-image {
    min-height: 70px !important;
  }
  html body .qf-root .qf-play-table .qf-cell-img {
    max-height: 140px !important;
  }
  html body .qf-root .qf-play-table .qf-cell-cap {
    font-size: 12px !important;
  }
  /* Facts — keep 3 columns even on phone, but very compact */
  html body .qf-root .qf-facts {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin: 10px 0 12px !important;
  }
  html body .qf-root .qf-facts div {
    padding: 8px 6px !important;
    border-radius: 8px !important;
  }
  html body .qf-root .qf-facts dt {
    font-size: 0.55rem !important;
    letter-spacing: 0.03em !important;
  }
  html body .qf-root .qf-facts dd {
    font-size: 0.9rem !important;
    margin: 1px 0 0 !important;
  }
  /* Game actions — buttons full width, stacked side-by-side but full width */
  html body .qf-root .qf-game-actions {
    padding: 16px 12px 20px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  html body .qf-root .qf-game-actions .qf-btn {
    flex: 1 1 100% !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    font-size: 16px !important;
    width: 100% !important;
  }
  /* Results — stack the score summary vertically */
  html body .qf-root .qf-result-summary {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
  html body .qf-root .qf-result-summary > div:first-child {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 14px !important;
  }
  html body .qf-root .qf-result-summary > div:first-child > strong {
    font-size: 32px !important;
  }
  html body .qf-root .qf-result-summary small {
    font-size: 10px !important;
  }
  html body .qf-root .qf-result-summary > p {
    font-size: 14px !important;
    padding: 12px !important;
  }
  html body .qf-root .qf-result-summary dl {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  html body .qf-root .qf-result-summary dl div {
    padding: 6px 4px !important;
  }
  html body .qf-root .qf-result-summary dt {
    font-size: 9px !important;
  }
  html body .qf-root .qf-result-summary dd {
    font-size: 18px !important;
  }
  html body .qf-root .qf-result-hub {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }
  html body .qf-root .qf-result-main-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  html body .qf-root .qf-result-main-actions button {
    min-height: 48px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
  }
  html body .qf-root .qf-result-main-actions button span {
    font-size: 20px !important;
    margin-right: 6px !important;
  }
}

/* Very small phones (iPhone SE, older Android) — even more compact */
@media (max-width: 360px) {
  html body .qf-root .qf-title h2 {
    font-size: 1.1rem !important;
  }
  html body .qf-root .qf-play-table th,
  html body .qf-root .qf-play-table td {
    font-size: 12px !important;
    padding: 8px 6px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.3 !important;
  }
  /* Re-balance columns on tiny phones: 60% prompt, 40% answer */
  html body .qf-root .qf-play-table tbody th {
    width: 60% !important;
  }
  html body .qf-root .qf-play-table tbody td {
    width: 40% !important;
  }
  html body .qf-root .qf-facts dt {
    font-size: 0.5rem !important;
  }
  html body .qf-root .qf-facts dd {
    font-size: 0.82rem !important;
  }
}

/* Landscape phone — keep typebar horizontal but compact */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  html body .qf-root .qf-typebar {
    flex-direction: row !important;
    align-items: end !important;
  }
  html body .qf-root .qf-typebar .qf-btn,
  html body .qf-root .qf-typebar [data-give-up] {
    width: auto !important;
    min-width: 120px !important;
  }
}

/* prefers-reduced-motion — disable smooth scroll on finish */
@media (prefers-reduced-motion: reduce) {
  html body .qf-root,
  html body .qf-root * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ================================================================
   v2.8.0 — Sporcle-inspired layout (layout only, colors stay yours)
   Brings over the structural / layout DNA from Sporcle's mobile design:
   - Pure-black 2-column status bar (Score left, Timer right)
   - Tabular numerals on timer so digits don't jitter
   - Circular icon Pause button (instead of rectangular text button)
   - Spreadsheet feel: pure black 1px borders, denser rows, flatter card
   - Active row highlight (pale yellow) when forced_order / no_skip is on
   - "Give Up" demoted to a subtle text link below the table
   ================================================================ */

/* === Status bar: pure black, 2-column (Score | Timer), tabular numerals === */
html body .qf-root .qf-status {
  background: #000 !important;
  color: #fff !important;
  grid-template-columns: 1fr 1fr !important;
  padding: 14px 28px !important;
}
html body .qf-root .qf-status > div {
  text-align: left !important;
}
html body .qf-root .qf-status .qf-status-time {
  text-align: right !important;
}
html body .qf-root .qf-status strong {
  font-variant-numeric: tabular-nums !important;  /* no jitter as digits change */
  font-feature-settings: "tnum" 1 !important;
  letter-spacing: 0.02em !important;
}
html body .qf-root .qf-status span {
  opacity: 0.7 !important;
}

/* === Circular icon Pause button === */
html body .qf-root .qf-icon-btn {
  align-items: center !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 50% !important;
  color: #172033 !important;
  display: inline-flex !important;
  font-size: 18px !important;
  height: 44px !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  width: 44px !important;
}
html body .qf-root .qf-icon-btn:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}
html body .qf-root .qf-icon-btn .qf-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* === Spreadsheet feel: pure black borders, denser rows, flatter card === */
html body .qf-root .qf-card {
  background: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;  /* drop the soft shadow for spreadsheet aesthetic */
}
html body .qf-root .qf-title {
  border-bottom: 2px solid #000 !important;
  padding: 18px 20px 14px !important;
}
html body .qf-root .qf-title h2 {
  text-transform: none !important;
}
html body .qf-root .qf-play-table th,
html body .qf-root .qf-play-table td {
  border: 1px solid #000 !important;  /* pure black for spreadsheet feel */
  height: 36px !important;            /* denser rows = more visible at once */
  padding: 6px 10px !important;
}
html body .qf-root .qf-play-table thead th {
  border-bottom: 2px solid #000 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* === Active row highlight (only applies when forced_order / no_skip is on) === */
html body .qf-root .qf-play-table tr.qf-active-row th,
html body .qf-root .qf-play-table tr.qf-active-row td {
  background: #fef9c3 !important;  /* pale yellow — draws the eye to the next row to answer */
  box-shadow: inset 0 -2px 0 #000 !important;  /* thick bottom border highlights active row */
}
html body .qf-root .qf-play-table tr.qf-active-row th {
  color: #000 !important;
}

/* === Compact game-actions row === */
html body .qf-root .qf-game-actions {
  background: #fff !important;
  border-top: 2px solid #000 !important;
  padding: 14px 20px !important;
  margin-top: 0 !important;
}
html body .qf-root .qf-game-actions .qf-btn:not(.qf-icon-btn) {
  flex: 0 1 auto !important;
  min-height: 40px !important;
  padding: 8px 16px !important;
}

/* === Give Up button: demote to subtle text-link style === */
html body .qf-root .qf-typebar [data-give-up] {
  background: transparent !important;
  border: 0 !important;
  color: #647085 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 32px !important;
  padding: 4px 8px !important;
  text-decoration: underline !important;
}
html body .qf-root .qf-typebar [data-give-up]:hover {
  color: #b91c1c !important;
}

/* === Mobile adjustments for the new layout === */
@media (max-width: 480px) {
  /* Status bar: tighter padding, smaller text, still 2-column */
  html body .qf-root .qf-status {
    padding: 10px 14px !important;
  }
  html body .qf-root .qf-status strong {
    font-size: 1.05rem !important;
  }
  html body .qf-root .qf-status span {
    font-size: 0.58rem !important;
  }
  /* Pause button stays 44px (touch target) */
  html body .qf-root .qf-icon-btn {
    height: 44px !important;
    min-width: 44px !important;
    width: 44px !important;
  }
  /* Typebar on phone: input + circular pause side-by-side, no stacking */
  html body .qf-root .qf-typebar {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  html body .qf-root .qf-typebar label {
    flex: 1 1 auto !important;
  }
  /* Even denser rows on phone */
  html body .qf-root .qf-play-table th,
  html body .qf-root .qf-play-table td {
    height: 32px !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
  }
  /* Game actions row: tighter */
  html body .qf-root .qf-game-actions {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  html body .qf-root .qf-game-actions .qf-btn:not(.qf-icon-btn) {
    flex: 1 1 auto !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
  }
}

/* ================================================================
   v2.9.0 — Fix the v2.8.0 issues
   User feedback after seeing v2.8.0 on mobile:
   1. Pause button stretched into a giant oval — fix: lock width to 44px
   2. Borders too thick / pure black — fix: revert to softer navy borders
   3. Green answer column too wide on mobile — fix: 70/30 split (prompt dominates)
   4. Box-in-box problem from card + table both having heavy borders — fix: restore soft card styling
   Keeps: 2-col status bar, tabular nums, active-row highlight, give-up as text link
   ================================================================ */

/* === Fix 1: Pause button must be a CIRCLE, not a stretched oval ===
   The v2.8.0 rule failed because the parent .qf-game-actions uses flex and
   stretched the button. Force it to exactly 44x44 with flex: 0 0 44px. */
html body .qf-root .qf-game-actions .qf-icon-btn,
html body .qf-root .qf-icon-btn {
  flex: 0 0 44px !important;
  width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* === Fix 2: Revert borders to softer navy (not pure black) ===
   User said "previous border is good". Previous = 1px solid #172033 navy. */
html body .qf-root .qf-card {
  background: #fff !important;
  border: 1px solid #dbe2ea !important;            /* soft gray, not black */
  border-radius: 18px !important;                    /* rounded, not sharp */
  box-shadow: 0 12px 35px rgba(15,23,42,.08) !important;  /* soft shadow back */
}
html body .qf-root .qf-title {
  border-bottom: 1px solid #e5eaf0 !important;       /* soft, not 2px black */
}
html body .qf-root .qf-play-table th,
html body .qf-root .qf-play-table td {
  border: 1px solid #172033 !important;              /* navy, not pure black */
}
html body .qf-root .qf-play-table thead th {
  border-bottom: 1px solid #172033 !important;       /* 1px, not 2px */
  letter-spacing: 0.03em !important;                 /* slightly less aggressive */
}
html body .qf-root .qf-game-actions {
  border-top: 1px solid #e5eaf0 !important;          /* soft, not 2px black */
  background: #f8fafc !important;                    /* keep subtle bg tint */
}

/* === Fix 3: Make the answer column NARROWER on mobile (Sporcle-style) ===
   The answer column starts empty (until user types correct answer).
   Having it take 45% width is wasteful. On mobile, give prompt 70%, answer 30%
   so the user sees more of the prompt text. */
@media (max-width: 480px) {
  /* Override the v2.7.0 55/45 split — prompt dominates like Sporcle */
  html body .qf-root .qf-play-table tbody th {
    width: 70% !important;
  }
  html body .qf-root .qf-play-table tbody td {
    width: 30% !important;
  }
  /* Even tighter on tiny phones */
  html body .qf-root .qf-play-table tbody th { /* overrides via media below */ }
}
@media (max-width: 360px) {
  html body .qf-root .qf-play-table tbody th {
    width: 72% !important;
  }
  html body .qf-root .qf-play-table tbody td {
    width: 28% !important;
  }
}

/* === Fix 4: Desktop — also re-balance to give prompt more space ===
   Default column_width is 50% which means 50/50 split. The empty answer
   column taking 50% looks broken. Override to 60/40 on desktop too,
   UNLESS the user has explicitly set a different value via the slider. */
html body .qf-root .qf-play-table tbody th {
  width: var(--qf-col, 60%) !important;              /* default to 60% if not set */
}
html body .qf-root .qf-play-table tbody td {
  width: calc((100% - var(--qf-col, 60%)) / max(1, var(--qf-col-count, 2) - 1)) !important;
}

/* === Mobile pause button override (44px circle, not stretched) === */
@media (max-width: 480px) {
  html body .qf-root .qf-game-actions .qf-icon-btn,
  html body .qf-root .qf-icon-btn {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* ================================================================
   v2.10.0 — True full-width mobile layout (Sporcle edge-to-edge)
   User feedback: "width of the quiz is not wide in mobile as sporcle is
   fully wide... right column where they end have many space in right side.
   I give my quiz layout 0 number, sporcle 10 out of 10."
   
   Root cause: .qf-card has border + shadow + border-radius, AND .qf-stage
   has 28px horizontal padding. So the table sits inside a visible "box"
   with empty space on the right side after the answer column ends.
   
   Fix: On mobile/tablet, make the card invisible (no border, no shadow,
   no radius, transparent bg). Remove .qf-stage padding so the table
   truly goes edge-to-edge like Sporcle. Only title + typebar + buttons
   keep small padding so text/inputs don't touch the screen edge.
   ================================================================ */

@media (max-width: 768px) {
  /* Remove root margins so the whole quiz goes edge-to-edge */
  html body .qf-root {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Card: invisible on mobile - no border, no shadow, no radius */
  html body .qf-root .qf-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  
  /* Stage: NO padding so the table goes truly edge-to-edge */
  html body .qf-root .qf-stage {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Table wrap: full bleed, edge to edge, no scroll */
  html body .qf-root .qf-play-table-wrap {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Table: 100% width, no min-width forcing scroll */
  html body .qf-root .qf-play-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }
  
  /* Status bar: full width edge-to-edge, minimal padding */
  html body .qf-root .qf-status {
    width: 100% !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  /* Title: keep padding so the heading text is readable */
  html body .qf-root .qf-title {
    padding: 16px 16px 12px !important;
    border-bottom: 1px solid #e5eaf0 !important;
  }
  
  /* Play facts (Questions/Format/Time summary): padded */
  html body .qf-root .qf-play-facts {
    padding: 12px 14px 0 !important;
  }
  
  /* Typebar: small padding so the input doesn't touch screen edge */
  html body .qf-root .qf-typebar {
    padding: 12px 14px 8px !important;
    margin-bottom: 0 !important;
    gap: 8px !important;
  }
  
  /* Game actions: small padding, full-width row */
  html body .qf-root .qf-game-actions {
    padding: 14px 14px !important;
    margin: 0 !important;
    border-top: 1px solid #e5eaf0 !important;
    background: #f8fafc !important;
  }
  
  /* Results: padded for readability */
  html body .qf-root .qf-results,
  html body .qf-root .qf-review,
  html body .qf-root .qf-intro {
    padding: 16px 14px !important;
  }
  
  /* Progress bar: full width */
  html body .qf-root .qf-progressbar {
    width: 100% !important;
  }
}

/* Phones: even tighter edge-to-edge */
@media (max-width: 480px) {
  /* Status bar: tighter padding but still full-width */
  html body .qf-root .qf-status {
    padding: 10px 12px !important;
  }
  
  /* Title: tighter padding */
  html body .qf-root .qf-title {
    padding: 14px 12px 10px !important;
  }
  html body .qf-root .qf-title h2 {
    font-size: 1.2rem !important;
  }
  
  /* Typebar: tighter */
  html body .qf-root .qf-typebar {
    padding: 10px 12px 6px !important;
    gap: 6px !important;
  }
  html body .qf-root .qf-typebar input {
    min-height: 44px !important;
    font-size: 16px !important;  /* iOS no-zoom */
    padding: 8px 12px !important;
  }
  
  /* Game actions: tighter */
  html body .qf-root .qf-game-actions {
    padding: 12px 12px !important;
    gap: 8px !important;
  }
  
  /* Table cells: tighter padding for max density */
  html body .qf-root .qf-play-table th,
  html body .qf-root .qf-play-table td {
    padding: 8px 8px !important;
    font-size: 13px !important;
    height: auto !important;
    min-height: 34px !important;
  }
  
  /* Active row highlight: full bleed (no edge gap) */
  html body .qf-root .qf-play-table tr.qf-active-row th,
  html body .qf-root .qf-play-table tr.qf-active-row td {
    background: #fef9c3 !important;
  }
}

/* ================================================================
   v2.11.0 — Restructured typebar (input + circular pause side-by-side)
   User feedback: "pause Button still not show correctly... entering
   answer box is not wide"
   
   Root cause: The Pause button was in the bottom game-actions row (not
   next to the input), and the Give Up button next to the input was
   taking horizontal space that should go to the input field.
   
   Fix: Restructured the typebar to:
   - Input takes ALL remaining width (flex: 1 1 auto)
   - Circular 44px Pause button sits to the right (flex: 0 0 44px)
   - Removed the Give Up button entirely (Finish at the bottom serves
     the same purpose — calling finish('completed'))
   - Removed the "Enter answer:" label text on mobile (placeholder
     inside the input is enough; saves vertical space)
   ================================================================ */

/* Typebar layout — input + pause button side-by-side */
html body .qf-root .qf-typebar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

/* The label wrapper for the input — takes ALL remaining space */
html body .qf-root .qf-typebar .qf-typebar-input-wrap {
  flex: 1 1 auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;  /* allow shrinking so the pause button gets its 44px */
}

/* Hide the "Enter answer:" label text — it just adds vertical height.
   The placeholder inside the input is enough. */
html body .qf-root .qf-typebar .qf-typebar-input-wrap > span {
  display: none !important;
}

/* The input itself — fill the wrapper, generous height, 16px font (no iOS zoom) */
html body .qf-root .qf-typebar input[data-classic-input] {
  display: block !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 48px !important;
  font-size: 16px !important;
  padding: 10px 14px !important;
  border: 2px solid #172033 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #172033 !important;
  box-sizing: border-box !important;
}

/* The circular pause button — strict 44x44 circle */
html body .qf-root .qf-typebar .qf-pause-btn,
html body .qf-root .qf-typebar .qf-icon-btn,
html body .qf-root .qf-typebar [data-pause] {
  flex: 0 0 44px !important;
  width: 44px !important;
  max-width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #172033 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
html body .qf-root .qf-typebar .qf-pause-btn:hover,
html body .qf-root .qf-typebar [data-pause]:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

/* Mobile (≤480px) — even tighter, no wasted horizontal space */
@media (max-width: 480px) {
  html body .qf-root .qf-typebar {
    padding: 10px 12px 8px !important;
    gap: 8px !important;
  }
  html body .qf-root .qf-typebar input[data-classic-input] {
    min-height: 48px !important;
    font-size: 16px !important;  /* iOS no-zoom threshold */
    padding: 10px 12px !important;
    border-width: 2px !important;
    border-radius: 8px !important;
  }
  /* Pause button stays 44px on mobile (touch target) */
  html body .qf-root .qf-typebar .qf-pause-btn,
  html body .qf-root .qf-typebar [data-pause] {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* Desktop — make the pause button slightly larger (52px) for mouse use */
@media (min-width: 769px) {
  html body .qf-root .qf-typebar .qf-pause-btn,
  html body .qf-root .qf-typebar [data-pause] {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
  }
}

/* Remove any leftover Give Up button styling (button no longer exists) */
html body .qf-root .qf-typebar [data-give-up] {
  display: none !important;
}

/* ================================================================
   v2.12.0 — Give Up button restored as subtle text link below the table
   User feedback: "Where is Give Up Button"
   
   In v2.11.0 I removed it because it was functionally identical to the
   Finish button (both call finish('completed')). But the user wants the
   Give Up button visible. Adding it back as a subtle right-aligned text
   link BELOW the table — doesn't take horizontal space from the input.
   ================================================================ */

html body .qf-root .qf-give-up-row {
  display: flex !important;
  justify-content: flex-end !important;  /* right-aligned like Sporcle */
  padding: 8px 14px 4px !important;
  margin: 0 !important;
}

html body .qf-root .qf-give-up-link,
html body .qf-root [data-give-up] {
  background: transparent !important;
  border: 0 !important;
  color: #647085 !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 32px !important;
  padding: 4px 8px !important;
  text-decoration: underline !important;
  text-transform: none !important;
  display: inline-block !important;
}

html body .qf-root .qf-give-up-link:hover,
html body .qf-root [data-give-up]:hover {
  color: #b91c1c !important;
  background: #fef2f2 !important;
  border-radius: 4px !important;
}

/* Mobile: keep subtle, full-bleed padding */
@media (max-width: 480px) {
  html body .qf-root .qf-give-up-row {
    padding: 8px 12px 4px !important;
  }
  html body .qf-root .qf-give-up-link,
  html body .qf-root [data-give-up] {
    font-size: 13px !important;
    padding: 6px 10px !important;
    min-height: 36px !important;  /* bigger touch target on mobile */
  }
}