/* components.css — small reusable UI pieces + word masking/reveal visuals */

/* Spacing utilities (avoid inline styles) */
.mt-14{ margin-top: 14px; }
.mt-18{ margin-top: 18px; }

/* Muted copy */
.muted{ color:#a08060; }
.muted.italic{ font-style: italic; }

/* Inline helper panels used in injected modals / misc UI */
.panel{
  background: #231508;
  border: 1px solid #5a3a10;
  border-radius: 10px;
  padding: 22px;
}

/* Training: masked / revealed word system (your-turn learning) */

/* When masking is active, words can render a mask overlay */
#scriptText.masking-active .w.masked{
  color: transparent; /* hide glyphs but keep layout width */
}

#scriptText.masking-active .w.masked::after{
  content: attr(data-mask);
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(240, 208, 96, 0.75);
  text-shadow: 0 1px 0 rgba(0,0,0,0.55);
  pointer-events: none;
  white-space: pre;
}

/* Once a word is revealed, show real text */
#scriptText .w.revealed{
  color: inherit;
}

/* Optional: subtle cue when a word is revealed */
#scriptText .w.revealed{
  transition: color 120ms ease;
}

/* Admin redact button (bottom control pane) */
.admin-redact-btn{
  width: 100%;
  display: none;
  margin-bottom: 10px;
}

/* Small utility: hide elements (used by JS sometimes) */
.hidden{ display:none !important; }

/* Debug voice hint (TTS diagnostics)
   Default hidden; can be shown by removing .hidden or toggling via JS. */
.voice-hint{ font-size:0.78rem; color:#7a6040; text-align:center; font-style:italic; margin-top:-8px; }