/* Scramble (scramble/scramble.js). The jumble is drawn over a password field
   whose own dots are made invisible, so the box shows only random letters
   and the caret. Letters break anywhere, so a long note wraps. */
.sc-wrap { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.sc-lab { font-size: 15px; color: var(--grey); }
.sc-box { position: relative; min-height: 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.sc-show { padding: 14px; font-family: ui-monospace, monospace; font-size: 18px; letter-spacing: .08em; color: var(--white); word-break: break-all; min-height: 24px; }
.sc-in { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px; border: 0; border-radius: 12px; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 18px; }
.sc-in:focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.sc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.sc-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-txt small { color: var(--grey); }
.sc-face { font-family: ui-monospace, monospace; letter-spacing: .08em; color: var(--grey); word-break: break-all; }
.sc-plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-acts { display: flex; gap: 6px; flex-shrink: 0; }
.sc-acts .btn-s { min-height: 44px; min-width: 44px; }
.sc-msg { color: var(--grey); margin: 4px 0; }
.sc-fine { color: var(--grey); font-size: 12px; margin-top: 12px; }