/* ====================================================
   ديوان آل السويلم — التصميم
   ==================================================== */
:root {
  --bg:#15110d; --surface:#211a13; --surface-2:#2a2118;
  --ember:#d9803f; --ember-soft:rgba(217,128,63,0.16);
  --gold:#c9a227; --gold-soft:rgba(201,162,39,0.18);
  --sage:#6f9a78; --sage-soft:rgba(111,154,120,0.18);
  --sky:#5b8fa8; --sky-soft:rgba(91,143,168,0.18);
  --text:#ede3d3; --text-muted:#b7a890; --text-faint:#8a7a64;
  --border:rgba(201,162,39,0.16);
  --radius-lg:18px; --radius-md:12px; --radius-sm:8px;
  --font-display:"Amiri",serif;
  --font-body:"IBM Plex Sans Arabic",sans-serif;
  --container:920px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---------- خلفية جمرية ---------- */
.ember-glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 0%,var(--ember-soft),transparent 45%),
             radial-gradient(circle at 85% 30%,rgba(201,162,39,.07),transparent 40%);
  animation:glow-breathe 9s ease-in-out infinite}
@keyframes glow-breathe{0%,100%{opacity:.85}50%{opacity:1}}

/* ---------- الهيدر ---------- */
.hero{position:relative;z-index:1;padding:72px 20px 40px;text-align:center;border-bottom:1px solid var(--border)}
.hero-inner{max-width:var(--container);margin:0 auto}
.hero-eyebrow{margin:0 0 6px;font-size:.95rem;letter-spacing:.06em;color:var(--gold);font-weight:500}
.hero-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,7vw,4.4rem);color:var(--text);text-shadow:0 0 28px var(--ember-soft)}
.hero-subtitle{margin:14px auto 0;max-width:560px;color:var(--text-muted);font-size:1.02rem}
.wasm-legend{display:flex;justify-content:center;gap:28px;margin-top:36px;flex-wrap:wrap}
.wasm-legend-item{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:var(--text-muted);font-family:var(--font-body);padding:6px}
.wasm-legend-item svg{width:34px;height:34px}
.wasm-legend-item span{font-size:.88rem}
.wasm-legend-item:hover{color:var(--gold)}
.wasm-legend-item:hover svg{stroke:var(--ember)}

/* ---------- شريط الفلترة ---------- */
.filter-bar{position:sticky;top:0;z-index:5;width:100%;background:rgba(21,17,13,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.filter-bar-inner{max-width:var(--container);margin:0 auto;padding:14px 20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.filter-pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-family:var(--font-body);font-size:.92rem;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s,border-color .2s}
.pill svg{width:16px;height:16px}
.pill:hover{border-color:var(--gold-soft);color:var(--text)}
.pill.active{background:var(--ember);color:#1a120b;border-color:var(--ember);font-weight:600}
.search-wrap{min-width:200px;flex:1 1 220px;max-width:280px}
#search-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:.94rem;padding:7px 2px;transition:border-color .2s}
#search-input::placeholder{color:var(--text-faint)}
#search-input:focus{border-color:var(--sage);outline:none}

/* ---------- المحتوى ---------- */
main{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:40px 20px 80px}
.hidden{display:none!important}
.poems-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.poet-bio-banner{grid-column:1/-1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 26px;margin-bottom:10px;display:flex;gap:18px;align-items:flex-start}
.poet-bio-banner svg{width:40px;height:40px;flex-shrink:0;margin-top:4px}
.poet-bio-banner h2{margin:0 0 6px;font-family:var(--font-display);font-size:1.5rem}
.poet-bio-banner p{margin:0;color:var(--text-muted);font-size:.95rem}
.empty-state{grid-column:1/-1;text-align:center;color:var(--text-faint);padding:60px 20px;font-size:.98rem}

/* ---------- بطاقات القصائد ---------- */
.poem-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 20px 18px;cursor:pointer;text-align:right;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.poem-card:hover{transform:translateY(-3px);border-color:var(--ember);background:var(--surface-2)}
.poem-card-tag{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.78rem;color:var(--gold);margin-bottom:10px}
.poem-card-tag svg{width:14px;height:14px}
.poem-card h3{margin:0 0 8px;font-family:var(--font-display);font-size:1.3rem;color:var(--text)}
.poem-card p{margin:0;color:var(--text-muted);font-size:.9rem;line-height:1.6}

/* ---------- شارات الأدوار ---------- */
.role-badge{display:inline-block;border-radius:4px;padding:1px 8px;font-size:.72rem;font-weight:700;vertical-align:middle;line-height:1.6}
.role-بدع{background:var(--gold);color:#1a120b}
.role-رد{background:var(--sage);color:#0d1a0f}
.role-مجاراة{background:var(--sky);color:#0b1520}
.role-responded{background:var(--ember);color:#1a120b}

/* ---------- صفحة القصيدة ---------- */
.back-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--text-muted);font-family:var(--font-body);font-size:.92rem;cursor:pointer;margin-bottom:24px;padding:4px 0}
.back-btn:hover{color:var(--gold)}
.poem-header{text-align:center;margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--border)}
.poem-header svg{width:38px;height:38px;margin:0 auto 14px}
.poem-header h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 8px}
.poem-header .poem-meta{color:var(--text-faint);font-size:.88rem}
.verses{display:flex;flex-direction:column;gap:22px;max-width:680px;margin:0 auto}
.verse{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;font-family:var(--font-display);font-size:clamp(1.28rem,2.8vw,1.68rem);text-align:center}
.verse .sadr{text-align:start}
.verse .ajz{text-align:end}
.verse .divider{width:1px;height:60%;background:var(--border)}
@media(max-width:620px){
  .verse{grid-template-columns:1fr;gap:4px;text-align:center}
  .verse .sadr,.verse .ajz{text-align:center}
  .verse .divider{display:none}
}

/* ---------- المجاراة ---------- */
.mujarat-section{max-width:680px;margin:0 auto 28px;background:var(--surface);border:1px solid var(--border);border-right:3px solid var(--gold);border-radius:var(--radius-sm);padding:14px 18px;display:flex;flex-direction:column;gap:8px}
.mujarat-label{font-size:.85rem;color:var(--gold);font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mujarat-goto{align-self:flex-start;font-family:var(--font-body);font-size:.88rem;background:var(--surface-2);border:1px solid var(--gold);border-radius:999px;color:var(--gold);cursor:pointer;padding:6px 16px;display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s}
.mujarat-goto:hover{background:var(--gold);color:#1a120b}
.mujarat-responses{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- التذييل ---------- */
.site-footer{position:relative;z-index:1;text-align:center;padding:28px 20px 40px;color:var(--text-faint);font-size:.85rem;border-top:1px solid var(--border)}
.site-footer .footer-note{display:block;margin-top:6px;color:var(--text-faint);opacity:.8}

/* ---------- سلسلة القصائد (بدع + رد في صفحة واحدة) ---------- */
.poem-chain {
  max-width: 680px;
  margin: 0 auto;
}

.chain-poem {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}

.chain-poet-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-family: var(--font-body);
}

.chain-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  margin: 0 0 16px;
  color: var(--text);
}

.chain-verses .verse {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
}

.chain-no-verses {
  color: var(--text-faint);
  font-size: .85rem;
  text-align: center;
  padding: 10px;
  margin: 0;
}

.chain-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0;
  color: var(--gold);
  font-size: .9rem;
  font-weight: 600;
  font-family: var(--font-body);
}

.chain-divider::before,
.chain-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}