/*
 * Vrije tijd (the quizzes and games). On a phone:
 * - Sudoku: the grid takes the width of the screen, nine even columns, and
 *   the game's buttons, which stood in a column to its right, sit under it;
 * - Trivia quiz: the answer field takes the room there is.
 * Loaded after common.css (see old/sn-sections.php).
 */
@media (max-width: 767px) {
  .interactief-block > table:has(form[name=senioren_sudoku]),
  .interactief-block > table:has(form[name=senioren_sudoku]) > tbody,
  .interactief-block > table:has(form[name=senioren_sudoku]) > tbody > tr,
  .interactief-block > table:has(form[name=senioren_sudoku]) > tbody > tr > td,
  form[name=senioren_sudoku] > table,
  form[name=senioren_sudoku] > table > tbody,
  form[name=senioren_sudoku] > table > tbody > tr,
  form[name=senioren_sudoku] > table > tbody > tr > td { display: block; width: auto; overflow: visible; }
  form[name=senioren_sudoku] td table { display: table; width: 100% !important; height: auto !important; table-layout: fixed; }
  form[name=senioren_sudoku] td table td { padding: 0; height: auto; }
  form[name=senioren_sudoku] td table input { width: 100% !important; height: 2.2em; padding: 0; }
  form[name=senioren_sudoku] > table > tbody > tr > td + td { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  form[name=senioren_sudoku] > table > tbody > tr > td + td br { display: none; }
  form[name=senioren_sudoku] input[type=button] { min-height: 44px; padding: 0 14px; }

  #frmAntw .input-group { display: flex; flex-wrap: wrap; }
  #frmAntw .input-group-label { flex: 0 0 100%; }
  #frmAntw .input-group-field { flex: 1; min-width: 0; width: auto; }
  #frmAntw .input-group-button { flex: 0 0 auto; width: auto; }

}