/* Create By Asking: spelling practice. Loaded after style.css, tools.css and family.css (for .tt-stats, .tt-stars, .tt-miss). */

#spell-tool { scroll-margin-top: 84px; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 22px 28px; }
.sp > * { min-width: 0; }
.sp-stage { position: relative; display: grid; gap: 14px; justify-items: center; align-content: start; min-height: 400px; background: rgba(255, 255, 255, 0.03); border-radius: 14px; padding: 18px 14px; }
.sp-say { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 44px; }
.sp-say .btn { font-size: 1.05rem; }
.sp-word { font: 800 clamp(2.2rem, 8vw, 3.6rem)/1.1 var(--display); color: #FFC93C; letter-spacing: 0.04em; text-align: center; overflow-wrap: anywhere; transition: opacity 0.4s, filter 0.4s; }
.sp-word.gone { opacity: 0; filter: blur(8px); }
.sp-word[hidden] { display: none; }
.tool-shell .sp-answer { width: min(100%, 420px); text-align: center; font: 700 clamp(1.6rem, 6vw, 2.4rem)/1.2 var(--body); letter-spacing: 0.05em; padding: 12px 14px; border: 2px solid rgba(255, 255, 255, 0.15); }
.tool-shell .sp-answer.right { border-color: #5BD48F; color: #5BD48F; }
.tool-shell .sp-answer.wrong { border-color: #FF7A62; }
.tool-shell .sp-answer:disabled { opacity: 0.85; }
.sp-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sp-row .btn:first-child { min-width: 130px; justify-content: center; }
.sp-fb { min-height: 3em; max-width: 34em; text-align: center; color: #CBBFE8; font-weight: 600; margin: 0; }
.sp-letters { display: inline-flex; gap: 2px; font: 700 1.25rem/1.4 var(--mono); vertical-align: middle; }
.sp-letters b { padding: 0 3px; border-radius: 4px; }
.sp-letters b.ok { color: #5BD48F; }
.sp-letters b.no { color: #1C0F3F; background: #FFC93C; }
.sp-typed { font-family: var(--mono); color: #FFD3C9; text-decoration: line-through; text-decoration-color: rgba(255, 122, 98, 0.7); }
.sp-hint { color: #FFC93C; font: 700 1.2rem/1 var(--mono); }
.sp-small { border: 0; background: none; padding: 0; color: #A597CC; font: 500 0.82rem/1 var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sp-small:hover { color: #fff; }
.sp .game-overlay { background: var(--screen); z-index: 2; }

/* settings */
.sp-side { display: grid; gap: 16px; align-content: start; }
.sp-side .f-row > span { flex-basis: 100%; margin-bottom: 2px; }
.sp-side .chip-dark:disabled { opacity: 0.35; cursor: default; }
.sp-list { display: grid; gap: 6px; }
.sp-list > div { display: flex; justify-content: space-between; align-items: baseline; font: 600 0.68rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #A597CC; }
.tool-shell .sp-list textarea { width: 100%; min-height: 190px; resize: vertical; background: rgba(255, 255, 255, 0.08); border: 1.5px solid transparent; color: #fff; border-radius: 10px; padding: 10px 12px; font: 500 1rem/1.5 var(--body); }
.tool-shell .sp-list textarea:focus { outline: none; border-color: #FFC93C; }
.sp-list small { color: #A597CC; font-size: 0.75rem; line-height: 1.4; }
.sp-list .sp-links { display: flex; gap: 14px; }
.sp-voice-note { color: #FFE08F; font-size: 0.78rem; margin: 0; }
.sp > .tool-note { grid-column: 1 / -1; margin: 0; }

@media (max-width: 860px) { #spell-tool { grid-template-columns: 1fr; } }