@charset "UTF-8";
/* ==========================================================================
   Which Comes First — styles.css
   --------------------------------------------------------------------------
   Same world as the Bible Games hub, True or False, Guess the Bible Word,
   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 TWO BOOKS ARE THE GAME. They get the
   largest type on the page and the most room; the question above them is one
   short line, and everything else is deliberately quiet.

   The second idea: THE ANSWER MUST TEACH. After every answer a strip shows
   where both books actually sit along the whole Bible, with the line where
   the New Testament begins. Being told "Ruth comes before 1 Samuel" is a fact
   to memorise; seeing that both sit a third of the way along, just after the
   Law, is a place to hang 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 stage: question, feedback, the strip
     7.  The answer buttons
     8.  Buttons, hint, noscript
     9.  End-of-round overlay
     10. Responsive
     11. 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 the whole SITE is one edit in shared/theme.css.
   Re-theming just this GAME is one edit in section 1 below.
   ========================================================================== */

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

:root {
  /* ------------------------------------------------------------------------
     Only what is UNIQUE to this game 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.
     ------------------------------------------------------------------------ */

  /* 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);

  /* The strip: the whole Bible as one bar.

     A gradient from deep to warm rather than two flat halves, because the
     Bible is one book — the line marks where the New Testament begins without
     splitting the bar into two objects. */
  --strip-1: #3a2a6e;
  --strip-2: #6b4f1f;
  --pin: var(--gold-1);

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

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

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

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

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

/* -------------------------------------------------------------------------- */
/* 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.05rem, 4vw, 1.8rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--gold-1);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.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. */
.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 stage: question, feedback, the strip                                */
/* -------------------------------------------------------------------------- */

/* The only flexible row. `min-height: 0` is what actually allows a flex child
   to shrink below its content size — without it a long explanation 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: 14px;
  padding: 6px 4px;
  overflow: hidden;
}

/* One short line. It never changes, so it is deliberately not competing with
   the two book names below it — this is the only game on the site where the
   question is the least interesting thing on the page. */
.ask {
  align-self: center;
  max-width: 100%;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.6vw, 1.5rem);
  color: var(--gold-1);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.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);
}

/* ---- The strip: the whole Bible, with both books pinned ----------------- */

/*
 * aria-hidden, on purpose. Every fact it shows is already in .feedback__why in
 * words — "Ruth is book 8 — History." — and announcing it twice would be a
 * nuisance rather than an aid. It is a picture of something already said.
 */
.strip {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 12px;
}

.strip__bar {
  position: relative;
  height: 10px;
  /* Room above for the first book's label and below for the second's. */
  margin: 26px 0 30px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--strip-1), var(--strip-2));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Where the New Testament begins. Placed by Scripts.js from the data, not
   written here as a percentage, so it can never drift out of step with the
   list of books. */
.strip__divide {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 2px;
  margin-left: -1px;
  background: var(--gold-2);
  opacity: 0.85;
}

.strip__pin {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--pin);
  box-shadow: 0 0 0 2px rgba(8, 6, 26, 0.9), 0 0 10px var(--gold-glow);
}

/*
 * The two books are told apart by WHERE their label sits — one above the bar,
 * one below — rather than by colour. Two books can be adjacent, so two labels
 * on the same side would overlap and neither would be readable.
 */
.strip__pin-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-1);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.strip__pin--a .strip__pin-label { bottom: 18px; }
.strip__pin--b .strip__pin-label { top: 18px; }

.strip__ends {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* Anchored to the divide by Scripts.js, not centred by `space-between` — the
   New Testament begins at 59% of the way through, not at 50%, and a picture
   that teaches has to be true. */
.strip__mid {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--gold-2);
}

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

/*
 * Stacked on a phone, side by side once there is room.
 *
 * Book names run long — "1 Thessalonians", "Song of Solomon" — and two columns
 * on a 320px screen gives each about 140px, which wraps them to three lines
 * and makes the two buttons different heights. Stacked they stay one line each
 * and stay enormous, which is what a child's thumb needs.
 */
.answers {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ans {
  /* The anchor for .ans__mark, which is absolutely positioned so that the tick
     or cross cannot shift the book name when it appears. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Deliberately large. This is the whole interaction, on a phone, for a
     child — it should be almost impossible to miss. */
  min-height: clamp(60px, 11vh, 96px);
  padding: 10px 14px;
  border: 1px solid var(--panel-edge);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--panel-1), var(--panel-2));
  color: var(--gold-1);
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 8px 18px rgba(3, 2, 12, 0.45);
  transition: transform var(--dur) ease, box-shadow var(--dur) ease,
              border-color var(--dur) ease, filter var(--dur) ease;
  -webkit-tap-highlight-color: transparent;
}

/*
 * The tick or the cross.
 *
 * Absolutely positioned so that it cannot shift the name when it appears — a
 * book name that jumps sideways the moment you answer reads as a glitch. It is
 * empty until an answer is given, and takes no space then either.
 */
.ans__mark {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 1.3rem;
  line-height: 1;
}

.ans.is-right .ans__mark { color: var(--right); }
.ans.is-wrong .ans__mark { color: var(--wrong); }

.ans__name {
  /* Long names shrink rather than wrap: two buttons of different heights read
     as a mistake, and a wrapped "1 Thessalonians" is harder to take in than a
     slightly smaller one. */
  font-size: clamp(1.2rem, 5vw, 2rem);
  line-height: 1.15;
  text-align: center;
}

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

/* Disabled means "the question 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;
}

/* The right answer, ALWAYS marked, whether or not it was chosen. A wrong
   answer that only says "not that one" teaches nothing. */
.ans.is-right {
  border-color: var(--right);
  color: #eafff1;
  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 {
  border-color: var(--wrong);
  color: #ffe6da;
  filter: brightness(0.85);
  box-shadow: 0 0 0 3px var(--wrong), 0 8px 20px rgba(3, 2, 12, 0.5);
}

/* -------------------------------------------------------------------------- */
/* 8. Buttons, hint, noscript                                                 */
/* -------------------------------------------------------------------------- */

.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: 200px;
}

/* --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 in shared/theme.css 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. 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) {
    border-color: rgba(255, 214, 130, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), 0 12px 24px rgba(3, 2, 12, 0.5);
  }
}

/* Small phones: trim the chrome so the two books 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 */

  .strip { padding: 0 4px; }

  .strip__ends,
  .strip__pin-label { font-size: 0.66rem; }
}

/* Side by side once the names have room to sit on one line each. */
@media (min-width: 560px) {
  .answers {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* Landscape on a phone: very little height, so the scoreboard and hint go and
   everything else tightens. */
@media (max-height: 460px) and (orientation: landscape) {
  .hud,
  .hint,
  .progress {
    display: none;
  }

  .answers {
    grid-template-columns: 1fr 1fr;
  }

  .ans {
    min-height: clamp(50px, 18vh, 78px);
  }

  .ans__name {
    font-size: clamp(1rem, 3.6vh, 1.5rem);
  }

  .strip__bar {
    margin: 20px 0 24px;
  }

  .feedback__why {
    font-size: 0.85rem;
  }
}

/*
 * 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 two answer buttons
 * alone have a 50px floor and the explanation needs room to wrap. Holding the
 * no-scroll contract here does not produce a tidy page; it produces an
 * explanation cropped mid-sentence by .stage.
 *
 * 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;
  }
}

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

/* The blanket "kill every transition" rule is in shared/theme.css. What is
   left here is the part 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 and the strip a flat rectangle. Explicit
 * borders and outlines bring the difference back in a form the system cannot
 * flatten.
 */
@media (forced-colors: active) {
  .ans,
  .btn,
  .hud,
  .feedback,
  .overlay__card {
    border: 1px solid CanvasText;
  }

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

  .strip__bar { border: 1px solid CanvasText; }
  .strip__pin { background: CanvasText; box-shadow: none; }
  .strip__divide { background: CanvasText; }

  a:focus,
  a:focus-visible,
  button:focus,
  button:focus-visible,
  .ask: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,
  .ask { color: #000; text-shadow: none; }
}