/* css/components.css */

/* Typing Box — exactly 3 full lines, no half lines */
#textDisplay {
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  /* keep side padding if you want, but kill top/bottom padding */
  padding: 0 1rem;
  border: none;
  border-radius: 4px;

  /* fixed line height + exact triple height */
  --lh: 1.4em;
  line-height: var(--lh);
  height: calc(var(--lh) * 3);

  font-size: 1.75rem;
  text-align: left;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  margin-bottom: 1rem;

  white-space: normal;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE 10+ */

  text-rendering: optimizeSpeed;
  font-kerning: none;
  letter-spacing: 0;
  font-feature-settings: "kern" 0;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;

  contain: layout paint;
}
#textDisplay::-webkit-scrollbar { display: none; }


/* always show the theme dropdown, but hide the color‑picker row by default */
.customizer {
  margin-bottom: 1rem;
}

/* Character states */
.char {
  color: var(--untyped-color);
  display: inline;    /* natural glyph width */
  position: static;   /* cheaper than relative on thousands of nodes */
}
.char.correct  { color: var(--correct-color); }
.char.incorrect{ color: var(--incorrect-color); }
.char.skipped  { color: var(--skipped-color); }

/* Alternative approach for newline handling */
.char[data-word="-1"] {
  white-space: pre;
}

/* Fix cursor to prevent skipping */
.char.current {
  /* Remove border-left to avoid width changes/jitter */
  border-left: none !important;
  /* No box-shadow */
  box-shadow: none !important;
  /* Ensure relative for ::before positioning */
  position: relative;
}


/* Stats */
#stats { color: var(--stats-color); font-size: 0.9rem; }
#stats span { margin-right: 1rem; }

.char.extra {
  color: var(--incorrect-color);
}

/* Word wrapper - remove margin */
.word-wrapper {
  display: inline;
  white-space: nowrap; /* Prevent word splitting across lines */
  margin-right: 0; /* Changed from 0.35em to 0 */
}

/* Remove margin from last word wrapper */
.word-wrapper:last-child {
  margin-right: 0;
}

/* collapse spaces so a wrapped line never shows a leading space */
.char.space,
.char.space.current{
  display: inline;       /* no box */
  width: auto;           /* no fixed 1ch */
  white-space: normal;   /* allow collapsing at line start */
  margin: 0;
  padding: 0;
  position: static;
}


/* Handle newlines properly */
.char.newline {
  display: none;
}

.char.newline + br {
  display: block;
}

/* Always show the break after a newline, even when it’s current */
.char.newline.current + br {
  display: block;
}

/* Show line break after newline is typed */
.char.newline.correct + br,
.char.newline.incorrect + br {
  display: block;
}


.typed-error-label {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 0.2rem;
}

/* place error bubble above the typing box */
.text-error-wrapper {
  width: 100%;
}

/* Pin the error bubble at the very top of the typing panel */
.typed-error-display {
  position: absolute;
  top: 9rem;                        /* a little breathing room from the top */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;                     /* above timer/word bar/stats/text */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin: 0;                       /* no flow margin */
  padding: 0.35rem 0.6rem;
  text-align: center;

  background: var(--box-bg);
  border: 1px solid var(--incorrect-color);
  border-radius: 8px;
}

/* keep your existing hidden rule; this line is optional since .hidden already exists */
.typed-error-display.hidden { display: none; }


/* inner letter box keeps its look */
.typed-error-letter {
  font-size: 1.4rem;
  font-weight: bold;
}

/* --- GAME LIMITS inline dropdowns --- */
.limits-grid { /* if you don't already have it */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.limit-cell {
  position: relative;              /* anchor for absolute dropdown */
}

/* reveal when the corresponding button is “active” */
.limit-btn.show-dropdown + .btn-dropdown { display: block; }