/* TypeFlow v6.6.5 — Scroll + clip repair */

/* v6.6.2 used overflow:clip; that also prevents scrollTop/scrollTo.
   Hidden still clips visually but remains programmatically scrollable. */
.tf-reading-card{
  overflow:hidden !important;
  scrollbar-width:none !important;
}
.tf-reading-card::-webkit-scrollbar{display:none !important}

/* Remove BOTH older bottom masks. They were responsible for the dark
   horizontal stripe cutting through words in dark mode. */
.typing-tool-page .tf-main-typing-stage .word-viewport::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* Main test: keep the v6.6.3 density, but use pure geometry instead
   of a visual overlay. */
@media (min-width:981px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    overflow:hidden !important;
    contain:paint;
    padding-bottom:13px !important;
  }

  .typing-tool-page .tf-main-typing-stage .word-stream{
    position:relative;
    z-index:1;
    padding-bottom:0 !important;
  }
}

/* Typical 100% desktop widths. Slightly reduce only the viewport
   clipping boundary; overall panel/card sizing stays unchanged. */
@media (min-width:981px) and (max-width:1599px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:147px !important;
    min-height:147px !important;
    max-height:147px !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
}

/* Wider normal desktops. */
@media (min-width:1600px) and (max-width:1999px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:151px !important;
    min-height:151px !important;
    max-height:151px !important;
    padding-top:12px !important;
    padding-bottom:13px !important;
  }
}

/* Practice/Challenge/Duel must be scrollable by JS while still
   looking like a clipped card. */
.practice-arena .tf-reading-card,
.challenge-arena .tf-reading-card,
.duel-arena .tf-reading-card{
  overflow:hidden !important;
  scroll-behavior:auto !important;
  overscroll-behavior:contain;
}

/* Keep a clean gap between the reading card and the entry field. */
.practice-arena .tf-entry-card,
.challenge-arena .tf-entry-card,
.duel-arena .tf-entry-card{
  margin-top:12px !important;
}

/* Mobile: no masks, programmatic scrolling remains enabled. */
@media (max-width:980px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    overflow:hidden !important;
  }
}