/* Trivia quiz: the question card, the answer box with the old quiz's buttons, the score beside it on a wide screen, the boards. */
.sp--trivia-quiz { max-width: 980px; }
.sp--trivia-quiz .tq-small { margin: 8px 0 0; font-size: 16px; color: #4b5563; }
.sp--trivia-quiz .tq-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sp--trivia-quiz .tq-row--center { justify-content: center; margin-top: 14px; }
.sp--trivia-quiz .tq-input { flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 16px; border: 2px solid #9fbfac; border-radius: 10px; background: #fff; font: 400 20px/1 Inter, system-ui, sans-serif; color: #1a1a1a; }
.sp--trivia-quiz .tq-input:focus { outline: 3px solid #f2b705; outline-offset: 1px; border-color: #2f5d45; }
.sp--trivia-quiz label { display: block; margin: 0 0 6px; font-weight: 700; font-size: 17px; }
.sp--trivia-quiz .sp-button { min-height: 52px; font-size: 18px; }
.sp--trivia-quiz .tq-next { background: #2f5d45; border-color: #2f5d45; }

/* The start. */
.sp--trivia-quiz .tq-start { padding: 22px 24px; border-radius: 16px; background: #eef4f0; }
.sp--trivia-quiz .tq-start h2 { margin: 0 0 6px; font: 700 26px/1.2 Georgia, serif; }
.sp--trivia-quiz .tq-start > p:first-of-type { margin: 0 0 16px; font-size: 18px; }
.sp--trivia-quiz .tq-note { margin: 10px 0; padding: 10px 14px; border-radius: 10px; background: #fff; font-weight: 700; color: #2f5d45; }
.sp--trivia-quiz details { margin: 16px 0 0; padding: 14px 18px; border: 1.5px solid #e2dfd6; border-radius: 14px; background: #fff; }
.sp--trivia-quiz summary { cursor: pointer; font-weight: 700; font-size: 18px; }
.sp--trivia-quiz details p { font-size: 17px; line-height: 1.5; }
.sp--trivia-quiz code { padding: 2px 6px; border-radius: 6px; background: #f1efe9; font-size: 16px; user-select: all; }
.sp--trivia-quiz .tq-clear { margin-top: 10px; }

/* The boards. */
.sp--trivia-quiz .tq-boards { margin: 22px 0 0; }
.sp--trivia-quiz .tq-boards h2 { margin: 0 0 4px; font: 700 24px/1.2 Georgia, serif; }
.sp--trivia-quiz .tq-boards__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; }
.sp--trivia-quiz .tq-board { margin: 0 0 14px; padding: 14px 18px; border: 1.5px solid #e2dfd6; border-radius: 14px; background: #fff; }
.sp--trivia-quiz .tq-board h3 { margin: 0 0 8px; font-size: 17px; }
.sp--trivia-quiz .tq-board ol { margin: 8px 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.6; }
.sp--trivia-quiz .tq-board ol.tq-long { max-height: 330px; overflow-y: auto; padding-right: 6px; overscroll-behavior: contain; }
.sp--trivia-quiz .tq-place { display: inline-block; min-width: 2.6em; color: #6b7280; }
.sp--trivia-quiz .tq-none { color: #6b7280; }

/* A game. */
.sp--trivia-quiz .tq-game { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px 22px; align-items: start; }
.sp--trivia-quiz .tq-game > :not(.tq-side) { grid-column: 1; }
.sp--trivia-quiz .tq-side { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; gap: 12px; }
.sp--trivia-quiz .tq-feedback { padding: 14px 18px; border-radius: 12px; border: 1.5px solid #e2dfd6; background: #f7f6f2; font-size: 18px; line-height: 1.45; }
.sp--trivia-quiz .tq-feedback.is-right { background: #e3f0fa; border-color: #a9cbe6; }
.sp--trivia-quiz .tq-feedback.is-wrong { background: #f7e4e1; border-color: #e3b1aa; }
.sp--trivia-quiz .tq-card { border-radius: 16px; background: #eef4f0; overflow: hidden; }
.sp--trivia-quiz .tq-level { margin: 0; padding: 10px 18px; background: #2f5d45; color: #fff; font: 700 15px/1.2 Inter, system-ui, sans-serif; letter-spacing: .03em; }
.sp--trivia-quiz .tq-question { margin: 0; padding: 18px 20px 6px; font: 400 25px/1.4 Georgia, 'Times New Roman', serif; color: #1a1a1a; overflow-wrap: anywhere; }
.sp--trivia-quiz .tq-hint { margin: 0; padding: 4px 20px 16px; text-align: center; font: 700 15px/1.3 Inter, system-ui, sans-serif; color: #4b5563; }
.sp--trivia-quiz .tq-hint__letters { display: inline-block; margin-left: 6px; font: 700 24px/1.3 ui-monospace, 'Courier New', monospace; letter-spacing: .08em; color: #1a1a1a; overflow-wrap: anywhere; }
.sp--trivia-quiz .tq-score, .sp--trivia-quiz .tq-now, .sp--trivia-quiz .tq-proud { padding: 14px 16px; border-radius: 14px; border: 1.5px solid #e2dfd6; background: #fff; font-size: 17px; }
.sp--trivia-quiz .tq-score h3, .sp--trivia-quiz .tq-now h3 { margin: 0 0 6px; font-size: 16px; text-transform: uppercase; letter-spacing: .05em; color: #2f5d45; }
.sp--trivia-quiz .tq-score p { margin: 4px 0 0; }
.sp--trivia-quiz .tq-score b { font-size: 22px; }
.sp--trivia-quiz .tq-proud { border-color: #d05a6e; background: #fdf0f2; }
.sp--trivia-quiz .tq-now ul { margin: 0; padding: 0; list-style: none; line-height: 1.6; }
.sp--trivia-quiz .tq-report a { font-weight: 700; }
.sp--trivia-quiz .tq-stop { margin: 4px 0 0; }
.sp--trivia-quiz .tq-problem { font-size: 18px; }

@media (max-width: 760px) {
  .sp--trivia-quiz .tq-game { grid-template-columns: minmax(0, 1fr); }
  .sp--trivia-quiz .tq-side { grid-column: 1; grid-row: auto; }
  .sp--trivia-quiz .tq-question { font-size: 22px; }
  .sp--trivia-quiz .tq-row > .sp-button { flex: 1 1 auto; }
}
.sp--trivia-quiz .tq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sp--trivia-quiz .tq-stop .sp-button, .sp--trivia-quiz .tq-clear .sp-button { white-space: normal; text-align: center; padding: 10px 20px; line-height: 1.25; }
.sp--trivia-quiz .tq-signedout { margin: 0 0 16px; padding: 16px 18px; border: 2px solid #476eae; border-radius: 14px; background: #eef3fb; font-size: 18px; }
.sp--trivia-quiz .tq-signedout p { margin: 0 0 12px; }
.sp--trivia-quiz .tq-signedout a.sp-button, .sp--trivia-quiz .tq-signedout a.sp-button:visited { display: inline-flex; align-items: center; text-decoration: none; color: #fff; background: #476eae; border-color: #476eae; }
/* "Deel je score" under the points: the end card's share buttons, one under the other in the narrow column. */
.sp--trivia-quiz .tq-share { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e2dfd6; }
.sp--trivia-quiz .tq-share .sp-share-panel__big, .sp--trivia-quiz .tq-share .sp-share-panel__small { grid-template-columns: minmax(0, 1fr); }
/* A player without an account: a quiet mark after the name. */
.sp--trivia-quiz .tq-guest { display: inline-block; padding: 0 6px; border-radius: 999px; background: #f1efe9; color: #6b7280; font-size: 13px; line-height: 1.5; vertical-align: 1px; }
.sp--trivia-quiz .tq-guestnote { margin-top: 12px; }
/* A visitor who is not signed in: their points do not count for the boards (at the start and beside the score). */
.sp--trivia-quiz .tq-notcounted { margin: 12px 0; padding: 14px 16px; border: 2px solid #c98a16; border-radius: 14px; background: #fff6e0; font-size: 17px; line-height: 1.45; color: #1f2937; }
.sp--trivia-quiz .tq-notcounted p { margin: 0 0 10px; }
.sp--trivia-quiz .tq-notcounted p:last-child { margin-bottom: 0; }
.sp--trivia-quiz .tq-notcounted a.sp-button, .sp--trivia-quiz .tq-notcounted a.sp-button:visited { display: inline-flex; align-items: center; text-decoration: none; }
.sp--trivia-quiz .tq-side .tq-notcounted { margin: 0; font-size: 16px; }
/* The answer box across the whole column, as wide as the old quiz's or wider; the button under it. */
.sp--trivia-quiz .tq-form .tq-answer { flex: 1 1 100%; height: 56px; font-size: 22px; border-radius: 12px; }
.sp--trivia-quiz .tq-form .tq-send { flex: 1 1 auto; }