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

/* iOS Safari: ensure taps go to the word span, not the selection/caret system */
#scriptText.masking-active .w{ pointer-events: auto; }
#scriptText.masking-active{ pointer-events: auto; }

/* ── Toast notifications (replaces blocking alert()) ── */
.toast-container{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
  width: min(92vw, 420px);
}

.toast{
  pointer-events: auto;
  background: #231508;
  border: 1px solid #5a3a10;
  border-left: 4px solid #c9a227;
  color: #e8d5a3;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.3;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.show{ opacity: 1; transform: translateY(0); }

.toast-error{ border-left-color: #c03030; }
.toast-ok{ border-left-color: #30a030; }
.toast-info{ border-left-color: #c9a227; }

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