/* ===== Persian D&D Community — Theme ===== */
:root {
  --bg-0: #07091a;
  --bg-1: #0d1130;
  --bg-2: #151a45;
  --panel: #11163a;
  --panel-2: #1a2050;
  --border: #2a2f66;
  --gold: #d4a24c;
  --gold-2: #f0c674;
  --gold-soft: #b88636;
  --purple: #6b2bd9;
  --purple-2: #9a5cff;
  --emerald: #34d399;
  --emerald-2: #10b981;
  --text: #e6e7f2;
  --muted: #9aa0c3;
  --danger: #ef4444;
}

* { box-sizing: border-box; }
html, body { background: var(--bg-0); color: var(--text); font-family: 'Vazirmatn', system-ui, sans-serif; }
body { background:
  radial-gradient(1200px 600px at 80% -10%, rgba(107,43,217,.25), transparent 60%),
  radial-gradient(900px 500px at -10% 20%, rgba(212,162,76,.12), transparent 60%),
  radial-gradient(800px 600px at 50% 120%, rgba(52,211,153,.10), transparent 60%),
  var(--bg-0);
  min-height: 100vh;
}

/* Headings — Persian display font */
h1,h2,h3,h4,h5 { font-family: 'Vazirmatn', serif; letter-spacing: -0.01em; }
.font-display { font-family: 'Vazirmatn', serif; font-weight: 800; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0e26; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-soft), var(--purple)); border-radius: 10px; }

/* Gold gradient text */
.text-gold-gradient {
  background: linear-gradient(135deg, var(--gold-2), var(--gold), #8a5b1f);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Panels / cards */
.panel {
  background: linear-gradient(180deg, rgba(26,32,80,.85), rgba(17,22,58,.85));
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}
.panel-ornate {
  position: relative;
  background:
    linear-gradient(180deg, rgba(26,32,80,.9), rgba(13,17,48,.95));
  border: 1px solid transparent;
  border-radius: 18px;
  background-clip: padding-box;
}
.panel-ornate::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 18px;
  background: linear-gradient(135deg, var(--gold), transparent 30%, transparent 70%, var(--purple));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 12px; font-weight: 600; transition: all .25s ease; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: #1a1206; box-shadow: 0 8px 24px -8px rgba(212,162,76,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(212,162,76,.7); }
.btn-secondary {
  background: linear-gradient(135deg, var(--purple), #4b1ea8);
  color: #fff; box-shadow: 0 8px 24px -10px rgba(107,43,217,.6);
}
.btn-secondary:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-ghost { border: 1px solid var(--border); color: var(--text); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-2); }
.btn-emerald { background: linear-gradient(135deg, var(--emerald), var(--emerald-2)); color: #042018; }
.btn-emerald:hover { transform: translateY(-2px); }

/* Inputs */
.input, .select, .textarea {
  width: 100%; background: rgba(7,9,26,.6); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: .7rem 1rem; transition: all .2s; font-family: inherit;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,162,76,.15); }

/* Chips / Badges */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--muted); }
.chip-gold { color: var(--gold-2); border-color: rgba(212,162,76,.4); background: rgba(212,162,76,.08); }
.chip-purple { color: var(--purple-2); border-color: rgba(154,92,255,.4); background: rgba(107,43,217,.12); }
.chip-emerald { color: var(--emerald); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.10); }
.chip-danger { color: #fca5a5; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.10); }

/* Glow */
.glow-gold { box-shadow: 0 0 60px -10px rgba(212,162,76,.45); }
.glow-purple { box-shadow: 0 0 60px -10px rgba(107,43,217,.55); }

/* Hero ornaments */
.runes-bg {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212,162,76,.10), transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(107,43,217,.15), transparent 25%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 14px);
}

/* Divider with ornament */
.ornament {
  display: flex; align-items: center; gap: 1rem; color: var(--gold);
}
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); }

/* Card hover */
.card-hover { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card-hover:hover { transform: translateY(-4px); border-color: rgba(212,162,76,.6); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7), 0 0 30px -10px rgba(212,162,76,.3); }

/* Animations */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float { animation: float 5s ease-in-out infinite; }
@keyframes pulse-gold { 0%,100% { box-shadow: 0 0 0 0 rgba(212,162,76,.5); } 50% { box-shadow: 0 0 0 14px rgba(212,162,76,0); } }
.pulse-gold { animation: pulse-gold 2.2s infinite; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .7s ease both; }
@keyframes dice-roll { 0% { transform: rotate(0) scale(1);} 50% { transform: rotate(360deg) scale(1.2);} 100% { transform: rotate(720deg) scale(1);} }
.dice-rolling { animation: dice-roll .8s ease; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(2,4,15,.75); backdrop-filter: blur(6px); z-index: 60; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-backdrop.open { display: flex; }

/* Alert */
.alert { border-radius: 12px; padding: .9rem 1rem; border: 1px solid var(--border); display: flex; gap: .75rem; align-items: flex-start; }
.alert-info { background: rgba(107,43,217,.10); border-color: rgba(154,92,255,.35); color: #d6c4ff; }
.alert-success { background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.35); color: #b6f1d8; }
.alert-warn { background: rgba(212,162,76,.10); border-color: rgba(212,162,76,.35); color: var(--gold-2); }
.alert-error { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.35); color: #fecaca; }

/* Stat */
.stat-num { font-family: 'Vazirmatn', serif; font-weight: 800; font-size: 2.25rem; }

/* Avatar */
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold-soft); object-fit: cover; background: var(--panel-2); }

/* Pagination */
.page-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); transition: all .2s; }
.page-btn:hover { color: var(--gold-2); border-color: var(--gold); }
.page-btn.active { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #1a1206; border-color: transparent; }

/* LTR mode */
html[dir="ltr"] body { font-family: 'Inter', system-ui, sans-serif; }

/* Hero image placeholder */
.hero-art {
  background:
    radial-gradient(600px 400px at 30% 40%, rgba(212,162,76,.35), transparent 60%),
    radial-gradient(500px 400px at 70% 60%, rgba(107,43,217,.45), transparent 60%),
    linear-gradient(135deg, #0a0e26, #1a1042);
}

/* Dice */
.die { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 800; font-size: 1.1rem; background: linear-gradient(135deg, #1a2050, #0d1130); border: 1px solid var(--border); color: var(--gold-2); cursor: pointer; transition: all .2s; }
.die:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 10px 20px -8px rgba(212,162,76,.4); }

/* Chat */
.chat-bubble { padding: .6rem .85rem; border-radius: 12px; max-width: 80%; line-height: 1.6; font-size: .92rem; }
.chat-self { background: linear-gradient(135deg, var(--purple), #4b1ea8); color: #fff; margin-inline-start: auto; }
.chat-other { background: var(--panel-2); border: 1px solid var(--border); }
.chat-system { font-size: .8rem; color: var(--gold-2); text-align: center; font-style: italic; }

/* Tabs */
.tab { padding: .55rem 1rem; border-radius: 10px; color: var(--muted); cursor: pointer; font-weight: 600; }
.tab.active { background: rgba(212,162,76,.12); color: var(--gold-2); }

/* Helpers */
.text-muted { color: var(--muted); }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== Auth / Form / Profile additions ===== */
.input.ltr, input.ltr, textarea.ltr { direction: ltr; text-align: left; }
.prose-dnd p { margin: .8em 0; }
.prose-dnd h2, .prose-dnd h3 { margin-top: 1.2em; }
.prose-dnd blockquote { margin: 1em 0; }
.prose-dnd li { margin: .25em 0; }
input[type="file"] { color: var(--muted); }
.panel.border-dashed { border-style: dashed; }

.comment-textarea {
  direction: rtl;
  text-align: right;
  resize: vertical;
  min-height: 110px;
  line-height: 1.9;
}

.comment-textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* ===== Rich Markdown rendering (.prose-dnd) ===== */
.prose-dnd {
  color: var(--text);
}

.prose-dnd h1,
.prose-dnd h2,
.prose-dnd h3 {
  color: var(--gold-2);
  font-family: 'Vazirmatn', serif;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.prose-dnd h1 { font-size: 1.9rem; }
.prose-dnd h2 { font-size: 1.5rem; }
.prose-dnd h3 { font-size: 1.25rem; }

.prose-dnd strong { color: var(--gold-2); }

.prose-dnd blockquote {
  padding: .6em 1em;
  border-inline-start: 3px solid var(--gold-2);
  background: rgba(255, 255, 255, .03);
  border-radius: .4rem;
  color: var(--muted);
}

.prose-dnd ul,
.prose-dnd ol {
  margin: .8em 0;
  padding-inline-start: 1.5em;
}
.prose-dnd ul { list-style: disc; }
.prose-dnd ol { list-style: decimal; }

.prose-dnd a {
  color: var(--gold-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose-dnd a:hover { opacity: .85; }

.prose-dnd code {
  background: rgba(255, 255, 255, .06);
  padding: .15em .4em;
  border-radius: .3rem;
  font-family: monospace;
  font-size: .9em;
}

.prose-dnd pre {
  background: var(--panel-2);
  padding: 1em;
  border-radius: .6rem;
  overflow-x: auto;
  margin: 1em 0;
}
.prose-dnd pre code { background: none; padding: 0; }
/* AI/search answer-first block */
.answer-first {
    color: var(--gold-2);
    border-inline-start: 3px solid var(--gold-2);
    padding-inline-start: 1rem;
}