@charset "UTF-8";
/* ==========================================================================
   True or False — styles.css
   --------------------------------------------------------------------------
   Same world as the Bible Games hub, Christian Reversi, Jesus Chess and Jesus
   Checkers: a deep indigo night with warm light falling from above, and
   everything of value framed in gold.

   The one idea driving the layout: THE STATEMENT IS THE GAME. It gets the
   largest type on the page and all the space left over; the scoreboard, the
   controls and the chrome are deliberately small and quiet around it.
   --------------------------------------------------------------------------
   Contents
     1.  Design tokens
     2.  Base, background, and the no-scroll shell
     3.  Accessibility helpers
     4.  Row 1 — top bar
     5.  Row 2 — scoreboard and progress
     6.  The statement and the feedback
     7.  The answer buttons
     8.  Buttons, hint
     9.  End-of-round overlay
     10. Self-check report (?check=1)
     11. Responsive
     12. Reduced motion, forced colours, print
   --------------------------------------------------------------------------
   The page must NEVER scroll. The shell is a fixed-height flex column and
   .stage is the only element allowed to grow or shrink. If something new is
   added, it goes in a row with `flex: 0 0 auto` — never into .stage.

   Re-theming: every colour lives in section 1.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. Design tokens                                                           */
/* -------------------------------------------------------------------------- */

:root {
  /* ------------------------------------------------------------------------
     Only what is UNIQUE to True or False lives here.

     The night sky, the golds, the three levels of ink, the panels, the type
     stacks, --dur and --radius all come from /biblegames/shared/theme.css,
     which index.php loads immediately before this file. They used to be
     copy-pasted into every game, which is exactly how two games end up a
     shade apart from each other.

     Re-theming the whole SITE is now one edit in shared/theme.css.
     Re-theming just this GAME is one edit here.
     ------------------------------------------------------------------------ */

  /* The two answers.

     Green and red are the obvious choice and the wrong one on their own —
     roughly one boy in twelve cannot tell them apart. So TRUE and FALSE are
     separated three ways: by SHAPE (tick versus cross), by WORD, and only
     then by colour. The colours themselves also differ in brightness, not
     just hue, so they survive a greyscale print.

     These two buttons are the brightest, largest thing on a child's screen
     and the whole interaction. They are deliberately vivid.

     They were once darkened to #2f9d63 / #dd5f40 to rescue the contrast of
     the small white tick and cross, which measured 2.81:1 and 2.82:1. That
     was the wrong trade: it dimmed the biggest object on the page to fix two
     glyphs. The colours are back, and the contrast now lives in the INK — see
     .ans__glyph and .ans__word in section 7, painted in --bg-deep rather than
     white. Dark ink on a bright button measures 4.4:1 to 8.6:1, comfortably
     better than the white ever did.

     The second stop is only a shade under the first. A deep second stop makes
     a tall button read as the DARK end of its gradient rather than the bright
     one, which quietly undoes the point of the first.

     So: the ink serves the button, not the other way round. If these colours
     ever need to move, move the ink first and re-run BibleGames_Contrast.py. */
  --true-1: #3fbf7f;
  --true-2: #2a925e;
  --false-1: #ff8a6a;
  --false-2: #e05a30;

  /* Right and wrong feedback. Aliases of the shared accents rather than fresh
     values, so the game agrees with its own self-check report by
     construction. */
  --right: var(--ok);
  --wrong: var(--warn);

  /* Rhythm particular to this layout. */
  --gap-row: 10px;
  --shell-max: 900px;
}

/* -------------------------------------------------------------------------- */
/* 2. Base, background, and the no-scroll shell                               */
/* -------------------------------------------------------------------------- */

/* The box-sizing reset and the [hidden] rule now live in
   /biblegames/shared/theme.css, where they protect every page at once. The
   [hidden] one in particular is not a nicety: it is the fix for a real bug in
   which `.btn { display: inline-flex }` beat the browser's own
   `[hidden] { display: none }` and left the Next button on screen through a
   fresh question. */

html {
  height: 100%;
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 130% 60% at 50% -10%, var(--bg-glow) 0%, rgba(255, 214, 138, 0) 60%),
    linear-gradient(168deg, var(--bg-mid) 0%, var(--bg-deep) 58%, #04030d 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  /* Stop iOS rubber-banding the page while a child taps quickly. */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* 100dvh where it exists: on mobile Safari and Chrome, 100vh is taller than
     the visible area while the address bar is showing, which would push the
     answer buttons off the bottom of the screen. The vh line first is the
     fallback for browsers that do not know dvh. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
}

.beams {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(96deg, transparent 30%, var(--bg-beam) 42%, transparent 54%),
    linear-gradient(84deg, transparent 46%, var(--bg-beam) 58%, transparent 70%);
  background-repeat: no-repeat;
}

/* The fixed-height flex column. Everything is a row with a fixed height
   except .stage, which absorbs whatever is left. */
.app {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-row);
  padding:
    max(10px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

/* -------------------------------------------------------------------------- */
/* 3. Accessibility helpers                                                   */
/* -------------------------------------------------------------------------- */

/* .visually-hidden, the three-step focus ring and ::selection are all in
   /biblegames/shared/theme.css now. The focus ring in particular is written in
   three steps there — :focus, :focus:not(:focus-visible), :focus-visible — so
   that no browser is ever left without a visible indicator. Writing only
   :focus-visible, the common shortcut, leaves older browsers with none at all.

   The one rule this game adds is for the statement panel, which Scripts.js
   moves focus to as each question appears. It is not a link or a button, so it
   needs saying explicitly. */
.statement:focus {
  outline: 3px solid var(--gold-1);
  outline-offset: 3px;
}

.statement:focus:not(:focus-visible) {
  outline: none;
}

.statement:focus-visible {
  outline: 3px solid var(--gold-1);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* 4. Row 1 — top bar                                                         */
/* -------------------------------------------------------------------------- */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 44px tall: the size a fingertip actually needs. */
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: color var(--dur) ease, background-color var(--dur) ease;
}

.back__arrow {
  font-size: 1.1em;
}

.title {
  flex: 1 1 auto;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.5vw, 1.9rem);
  font-weight: 700;
  color: var(--gold-1);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* The button gradients are dark enough to carry white text, which makes them
   too dark to sit on the night background as glyphs. These use the brighter
   feedback tones instead — same meaning, and they clear AA on the page. */
.title__tick  { color: var(--right); }
.title__cross { color: var(--wrong); }

.tools {
  display: flex;
  gap: 6px;
}

/* -------------------------------------------------------------------------- */
/* 5. Row 2 — scoreboard and progress                                         */
/* -------------------------------------------------------------------------- */

.hud {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255, 232, 176, 0.07), rgba(255, 232, 176, 0.02));
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
}

.hud__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* --text-dim, not --text-faint. The scoreboard sits directly under the warm
   glow at the top of the page, which lifts the background there and drops the
   contrast of small text on it to about 3:1 — measured, and below AA. The
   faint tone is fine further down the page; here it is not. */
.hud__label {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hud__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-1);
  /* Tabular figures stop the scoreboard jiggling as the numbers change. */
  font-variant-numeric: tabular-nums;
}

.progress {
  flex: 0 0 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-2));
  transition: width 320ms ease;
}

/* -------------------------------------------------------------------------- */
/* 6. The statement and the feedback                                          */
/* -------------------------------------------------------------------------- */

/* The only flexible row. `min-height: 0` is what actually allows a flex child
   to shrink below its content size — without it a long statement pushes the
   answer buttons off the bottom of the screen. */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 10px 4px;
  overflow: hidden;
}

/*
 * The statement sits in a lit panel rather than floating on the background.
 *
 * On a tall phone the stage has a great deal of room, and bare centred text
 * left the screen looking empty and unfinished. The panel gives the words a
 * place to be, matches the framed look of the rest of the family, and makes
 * the space around it read as deliberate.
 */
.statement {
  margin: 0 auto;
  width: 100%;
  max-width: 34rem;
  padding: clamp(18px, 4.5vw, 34px) clamp(16px, 4vw, 30px);
  text-align: center;
  font-family: var(--font-display);
  /* The largest type on the page, because it is the game. */
  font-size: clamp(1.3rem, 4.6vw, 2.4rem);
  line-height: 1.3;
  color: #fffaf0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  background: linear-gradient(160deg, rgba(46, 34, 92, 0.55), rgba(26, 18, 58, 0.7));
  border: 1px solid var(--panel-edge);
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(3, 2, 12, 0.45),
    inset 0 1px 0 rgba(255, 232, 176, 0.13);
}

.feedback {
  margin: 0 auto;
  max-width: 60ch;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--panel-edge);
  background: rgba(8, 6, 26, 0.55);
  text-align: center;
}

.feedback.is-right { border-color: rgba(134, 230, 168, 0.55); }
.feedback.is-wrong { border-color: rgba(255, 156, 110, 0.55); }

.feedback__verdict {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.feedback.is-right .feedback__verdict { color: var(--right); }
.feedback.is-wrong .feedback__verdict { color: var(--wrong); }

.feedback__why {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
}

/* -------------------------------------------------------------------------- */
/* 7. The answer buttons                                                      */
/* -------------------------------------------------------------------------- */

.answers {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ans {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Deliberately enormous. This is the whole interaction, on a phone, for a
     child — it should be almost impossible to miss. */
  min-height: clamp(76px, 15vh, 120px);
  padding: 10px;
  border: 2px solid rgba(0, 0, 0, 0.35);
  border-radius: 18px;
  /* Dark ink, not white. The buttons are vivid on purpose (see section 1), and
     white on a vivid mid-tone is the one thing that cannot be read on them —
     it measured 2.3:1 to 3.7:1. Dark ink on the same button measures 5.4:1 to
     8.6:1 and keeps every colour exactly as designed. The highlight below the
     letters, rather than a shadow under them, is what makes it read as
     stamped into the button instead of printed on top. */
  color: var(--bg-deep);
  font-family: var(--font-ui);
  font-weight: 800;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 8px 18px rgba(3, 2, 12, 0.45);
  transition: transform var(--dur) ease, box-shadow var(--dur) ease,
              filter var(--dur) ease, opacity var(--dur) ease;
  -webkit-tap-highlight-color: transparent;
}

.ans--true  { background: linear-gradient(180deg, var(--true-1), var(--true-2)); }
.ans--false { background: linear-gradient(180deg, var(--false-1), var(--false-2)); }

.ans__glyph {
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  line-height: 1;
}

/* The floor is 1.2rem (19.2px), not 1rem, for two reasons that point the same
   way. It is the word on the biggest, most important control on the page, and
   at a bold 19.2px it is "large text" by WCAG at every width — so its
   threshold is 3.0:1 rather than 4.5:1, which is the correct bar for type
   this size. At 1rem on a narrow phone it measured 4.28:1: fine as large
   text, marginal as small. Bigger is both the better design and the honest
   reading. */
.ans__word {
  font-size: clamp(1.2rem, 3.4vw, 1.5rem);
  letter-spacing: 0.08em;
}

.ans:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 4px 10px rgba(3, 2, 12, 0.45);
}

/* Disabled means "the round has moved on", not "unavailable to you" — so they
   stay legible rather than fading to grey. The two marked states below are
   what the eye should be drawn to. */
.ans:disabled {
  cursor: default;
  filter: saturate(0.5) brightness(0.75);
}

/* The right answer, always marked, whether or not it was chosen. */
.ans.is-right {
  filter: none;
  border-color: var(--right);
  box-shadow: 0 0 0 3px var(--right), 0 8px 20px rgba(3, 2, 12, 0.5);
}

/* The wrong one, marked only when it was the one chosen. */
.ans.is-wrong {
  filter: saturate(0.6) brightness(0.7);
  border-color: var(--wrong);
  box-shadow: 0 0 0 3px var(--wrong), 0 8px 20px rgba(3, 2, 12, 0.5);
}

/* -------------------------------------------------------------------------- */
/* 8. Buttons and hint                                                        */
/* -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  background: linear-gradient(160deg, var(--panel-1), var(--panel-2));
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) ease, transform var(--dur) ease;
  -webkit-tap-highlight-color: transparent;
}

.btn--icon {
  padding: 0;
  font-size: 1.1rem;
}

.btn--primary {
  border-color: transparent;
  background: linear-gradient(180deg, #ffd45c, #e08c14);
  color: #241703;
  font-weight: 800;
}

.btn--big {
  min-height: 54px;
  padding: 0 28px;
  font-size: 1.1rem;
}

.btn--next {
  flex: 0 0 auto;
  align-self: center;
  min-width: 190px;
}

/* --text-dim, not --text-faint. This line teaches the keyboard shortcuts, so
   it is instruction rather than decoration, and --text-faint is reserved for
   text no player ever needs to read. */
.hint {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dim);
}

kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
  color: var(--gold-1);
}

.noscript {
  position: relative;
  z-index: 2;
  margin: 24px auto;
  max-width: 40ch;
  padding: 16px;
  text-align: center;
  color: var(--text);
}

.noscript a { color: var(--gold-2); }

/* -------------------------------------------------------------------------- */
/* 9. End-of-round overlay                                                    */
/* -------------------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 3, 13, 0.82);
  /* Progressive: a plain dim is the fallback where backdrop-filter is absent. */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* The global [hidden] rule at the top of section 2 covers this element too. */

.overlay__card {
  width: min(30rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 22px;
  text-align: center;
  background: linear-gradient(160deg, #241a4e, #150e33);
  border: 1px solid rgba(255, 214, 130, 0.45);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.overlay__icon {
  font-size: 2.6rem;
  line-height: 1;
}

.overlay__title {
  margin: 8px 0 4px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold-1);
}

.overlay__score {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fffaf0;
  font-variant-numeric: tabular-nums;
}

.overlay__msg {
  margin: 8px 0 0;
  color: var(--text-dim);
}

.overlay__verse {
  margin: 16px 0;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 214, 130, 0.25);
  border-bottom: 1px solid rgba(255, 214, 130, 0.25);
}

.overlay__verse-text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: #fdf6e3;
}

.overlay__verse-ref {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.overlay__back {
  display: inline-block;
  margin-top: 12px;
  min-height: 44px;
  line-height: 44px;
  padding: 0 10px;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* -------------------------------------------------------------------------- */
/* 10. Self-check report (?check=1)                                           */
/* -------------------------------------------------------------------------- */

/* The whole .report panel is styled in /biblegames/shared/theme.css, because
   the MARKUP is shared too — bgs_report() in shared/page.php emits it. Markup
   and its styling have to travel together, or one page's report quietly stops
   matching its own CSS. Nothing to add here. */

/* -------------------------------------------------------------------------- */
/* 11. Responsive                                                             */
/* -------------------------------------------------------------------------- */

/* Hover only where a pointer can genuinely hover. On a touch screen the
   browser fakes a hover on tap and leaves it stuck there. */
@media (hover: hover) {
  .back:hover {
    color: var(--gold-1);
    background: rgba(255, 255, 255, 0.06);
  }

  .btn:hover {
    border-color: rgba(255, 214, 130, 0.7);
  }

  .ans:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 12px 24px rgba(3, 2, 12, 0.5);
  }
}

/* Small phones: trim the chrome so the statement and the buttons keep their
   share of a short screen. */
@media (max-width: 420px) {
  :root { --gap-row: 8px; }

  .back__label { display: none; }   /* the arrow alone is enough */

  .hud { padding: 6px 8px; }

  .hud__item--best { display: none; }  /* least important of the four */
}

/* Landscape on a phone: very little height, so the scoreboard and hint go and
   the answers sit beside the statement rather than under it. */
@media (max-height: 460px) and (orientation: landscape) {
  .hud,
  .hint,
  .progress {
    display: none;
  }

  .statement {
    font-size: clamp(1.05rem, 3.4vh, 1.5rem);
  }

  .ans {
    min-height: clamp(56px, 22vh, 90px);
  }
}

/*
 * The one place a game page is allowed to scroll.
 *
 * Below about 300px of height — roughly 300–400% browser zoom, or a very small
 * window — no fixed-height layout can hold this game. The answer buttons alone
 * have a 56px floor and the statement needs room to wrap. Holding the
 * no-scroll contract here does not produce a tidy page; it produces a
 * statement cropped mid-sentence by .stage while the buttons sit on top of
 * where the rest of it should be. That was measured, not imagined: at
 * 320x200 the panel overflowed .stage and BibleGames_Contrast.py sampled the
 * FALSE button's orange as the background behind the question.
 *
 * So below the floor the shell stops being a fixed-height column and becomes
 * an ordinary scrolling page. Everything is reachable, nothing is cropped,
 * and nobody at a normal magnification ever sees this block.
 *
 * Kept in step with MIN_NO_SCROLL_HEIGHT in BibleGames_Preview.py, which
 * waives the no-scroll check at exactly the same height.
 */
@media (max-height: 299px) {
  body {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
  }

  .app {
    height: auto;
    min-height: 100%;
  }

  /* No longer the elastic row — it takes the height its content needs, and
     the page grows instead of cropping it. */
  .stage {
    flex: 0 0 auto;
    overflow: visible;
  }
}

/* -------------------------------------------------------------------------- */
/* 12. Reduced motion, forced colours, print                                  */
/* -------------------------------------------------------------------------- */

/* The blanket "kill every transition" rule is in shared/theme.css. What is
   left here is the part that is specific to this game: the answer buttons
   move by TRANSFORM on press and hover, and a transform with no duration
   still jumps. Duration alone does not switch that off; the movement itself
   has to go. */
@media (prefers-reduced-motion: reduce) {
  .ans:hover:not(:disabled),
  .ans:active:not(:disabled) {
    transform: none;
  }
}

/*
 * Windows High Contrast. The system throws our palette away, which would
 * leave the two answer buttons identical. The tick and the cross still tell
 * them apart — which is exactly why the glyphs are there and not decoration —
 * and explicit borders bring back the panels.
 */
@media (forced-colors: active) {
  .ans,
  .btn,
  .hud,
  .feedback,
  .overlay__card {
    border: 1px solid CanvasText;
  }

  /* The emboss highlight under the letters is drawn for a bright button that
     no longer exists here — the system has replaced it with a flat Canvas.
     Left in, it prints a pale ghost against the system text colour. */
  .ans {
    text-shadow: none;
  }

  .ans.is-right { outline: 4px solid Highlight; outline-offset: 2px; }
  .ans.is-wrong { outline: 4px dotted CanvasText; outline-offset: 2px; }

  a:focus,
  a:focus-visible,
  button:focus,
  button:focus-visible,
  .statement:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  .beams { display: none; }
}

/* "Increase contrast": keep the palette, firm up the edges. */
@media (prefers-contrast: more) {
  :root {
    --text-dim: #ddd4f2;
    --text-faint: #c3b9dd;
    --panel-edge: rgba(255, 214, 130, 0.75);
  }

  .beams { display: none; }
}

/*
 * Print. A game is not a printable thing, so this exists only so that an
 * accidental Ctrl+P produces one tidy page instead of a black rectangle.
 */
@media print {
  html, body {
    height: auto;
    overflow: visible;
    background: #fff;
    color: #000;
  }

  .beams,
  .tools,
  .progress,
  .answers,
  .btn,
  .hint,
  .overlay,
  .report {
    display: none !important;
  }

  .app { height: auto; }

  .title,
  .statement { color: #000; text-shadow: none; }
}