/* TypeFlow v6.6.2 — Clean word viewport
   Prevents a partially visible next line at the bottom of typing surfaces.
   Geometry is tuned to show complete visual rows only.
*/

.tf-reading-card{
  scrollbar-width:none;
  overscroll-behavior:contain;
  scroll-padding-block:14px 18px;
}
.tf-reading-card::-webkit-scrollbar{display:none}

/* Main typing test
   19px × 1.62 line-height + 5px row gap:
   four complete rows fit, the fifth stays fully outside the viewport. */
.typing-tool-page .tf-main-typing-stage .word-viewport{
  height:176px !important;
  padding:16px 16px 17px !important;
}
.typing-tool-page .tf-main-typing-stage .word-stream{
  align-content:flex-start;
  padding-bottom:0 !important;
}

/* Challenge / Practice
   Give the 20px word set enough room for four complete rows. */
.challenge-arena .tf-reading-card,
.practice-arena .tf-reading-card{
  height:182px !important;
  padding:17px 18px 18px !important;
}
.challenge-arena .challenge-word-stream,
.practice-arena .challenge-word-stream{
  align-content:flex-start;
  padding-bottom:0 !important;
}

/* Duel uses the same four-row reading rhythm. */
.duel-arena .tf-reading-card{
  height:182px !important;
  padding:17px 18px 18px !important;
}
.duel-arena .duel-word-stream{
  align-content:flex-start;
  padding-bottom:0 !important;
}

/* A slightly stronger visual separation keeps the input from feeling
   like it is cutting into the reading text. */
.typing-tool-page .tf-main-typing-stage .typing-entry-wrap,
.challenge-arena .tf-entry-card,
.practice-arena .tf-entry-card,
.duel-arena .tf-entry-card{
  margin-top:14px !important;
}

/* Laptop / narrower desktop: still preserve four FULL rows. */
@media (min-width:761px) and (max-width:1199px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:164px !important;
    padding:14px 14px 16px !important;
  }

  .challenge-arena .tf-reading-card,
  .practice-arena .tf-reading-card,
  .duel-arena .tf-reading-card{
    height:182px !important;
  }
}

/* Mobile gets a dedicated four-row geometry instead of simply
   inheriting the desktop fixed height. */
@media (max-width:760px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:160px !important;
    padding:13px 13px 15px !important;
  }

  .challenge-arena .tf-reading-card,
  .practice-arena .tf-reading-card,
  .duel-arena .tf-reading-card{
    height:162px !important;
    padding:14px 14px 16px !important;
  }

  .typing-tool-page .tf-main-typing-stage .typing-entry-wrap,
  .challenge-arena .tf-entry-card,
  .practice-arena .tf-entry-card,
  .duel-arena .tf-entry-card{
    margin-top:10px !important;
  }
}

/* If a user zooms/text-scales aggressively, the surface remains
   clipped cleanly rather than leaking text behind the input. */
@supports (overflow: clip){
  .tf-reading-card{overflow:clip !important}
}