/* ═══════════════════════════════════════════════════════════════
   VerseWorks — Shared non-theme CSS
   Toast, generic modal, privacy modal, tutorial modal.
   Sourced from mine/craft/index/steal/admin/privacy (superset).
   ═══════════════════════════════════════════════════════════════ */

/* ═══ Discord auth UI (used on mine/craft/admin via auth.js) ═══ */
.btn-discord { background: #5865F2; color: #fff; border: none; padding: 7px 14px; border-radius: var(--radius); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: opacity 0.15s; display: flex; align-items: center; gap: 7px; }
.btn-discord:hover { opacity: 0.85; }
.discord-chip { display: none; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 4px 4px 8px; }
.discord-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.discord-username { font-size: 12px; font-weight: 600; font-family: var(--font-display); color: var(--text); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 4px; letter-spacing: 0.03em; }

/* ═══ Toast ═══ */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border-hover); border-radius: var(--radius); padding: 10px 18px; font-size: 13px; color: var(--text); box-shadow: 0 4px 20px rgba(0,0,0,0.4); z-index: 999; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.toast.show { opacity: 1; }

/* ═══ Modal base ═══ */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); z-index: 200; align-items: center; justify-content: center; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border-hover); border-radius: var(--radius-lg); padding: 24px; width: 100%; max-width: 540px; margin: 1rem; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-title { font-size: 16px; font-weight: 600; color: var(--text); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.modal-close:hover { color: var(--text); background: var(--surface2); }

/* ═══ Privacy modal ═══ */
.privacy-modal { max-width: 640px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.privacy-modal .modal-body { overflow-y: auto; flex: 1; padding-right: 6px; }
.privacy-modal .modal-body::-webkit-scrollbar { width: 4px; }
.privacy-modal .modal-body::-webkit-scrollbar-track { background: transparent; }
.privacy-modal .modal-body::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }
.privacy-section { margin-bottom: 20px; }
.privacy-section:last-child { margin-bottom: 0; }
.privacy-section h3 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.privacy-section p { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin-bottom: 6px; }
.privacy-section p:last-child { margin-bottom: 0; }
.privacy-section ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.privacy-section ul li { font-size: 13px; color: var(--text-muted); line-height: 1.5; display: flex; gap: 8px; }
.privacy-section ul li::before { content: '—'; color: var(--text-dim); flex-shrink: 0; }
.privacy-section strong { color: var(--text); font-weight: 600; }

/* ═══ Tutorial modal ═══ */
.tutorial-modal { max-width: 500px; }
.tut-step { display: flex; flex-direction: column; gap: 12px; }
.tut-icon { font-size: 30px; line-height: 1; }
.tut-heading { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.2; }
.tut-p { font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.tut-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.tut-list li { font-size: 13px; color: var(--text-muted); line-height: 1.55; display: flex; gap: 8px; }
.tut-list li::before { content: '—'; color: var(--text-dim); flex-shrink: 0; }
.tut-list strong { color: var(--text); font-weight: 600; }
.tut-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--border); }
.tut-dots { display: flex; gap: 6px; align-items: center; }
.tut-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-hover); transition: background 0.2s; }
.tut-dot.active { background: var(--accent); width: 18px; border-radius: 3px; }
.tut-nav { display: flex; gap: 8px; }
.btn-help { background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); cursor: pointer; font-family: var(--font-display); font-size: 14px; font-weight: 700; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.btn-help:hover { border-color: var(--border-hover); color: var(--text); }