/* VORTEX — صفحة الأنمي */
.ax {
  --ax: var(--anime-primary, #13abd2);
  --ax-light: var(--anime-accent, #76e5fd);
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 18px 84px;
  color: var(--vortex-white, #eef6f9);
}
.hidden { display: none !important; }
.muted { color: var(--vortex-gray, #94a3ad); }

/* ===== Hero ===== */
.ax-hero { position: relative; overflow: hidden; margin: 0 -18px 0; background: #05080c; border-bottom: 1px solid var(--border, rgba(255,255,255,.1)); }
.ax-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--ax) 30%, transparent), transparent 60%), linear-gradient(180deg, rgba(5,8,12,.2), #05080c 95%); }
.ax-hero-bg.has-img { background-size: cover; background-position: center; }
.ax-hero-bg.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,12,.97) 0%, rgba(5,8,12,.75) 55%, rgba(5,8,12,.55) 100%); }
.ax-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: clamp(18px, 4vw, 44px); align-items: end; max-width: 1200px; margin: 0 auto; padding: clamp(40px, 6vw, 76px) 18px clamp(30px, 4vw, 48px); }
.ax-poster { aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-strong, rgba(255,255,255,.15)); background: linear-gradient(145deg, color-mix(in srgb, var(--ax) 35%, transparent), rgba(0,0,0,.3)); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.ax-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-eyebrow { font: 700 11px/1.4 monospace; letter-spacing: .18em; color: var(--ax-light); }
.ax-hero h1 { margin: 10px 0 6px; font-size: clamp(28px, 4.6vw, 50px); font-weight: 900; line-height: 1.22; }
.ax-en { margin: 0 0 14px; color: var(--vortex-gray, #94a3ad); font-size: 15px; }
.ax-tagline { margin: 14px 0 0; max-width: 640px; color: var(--vortex-white-soft, #d4e2e8); line-height: 1.9; }
.ax-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-badge { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--border-strong, rgba(255,255,255,.15)); background: rgba(0,0,0,.3); color: var(--vortex-white-soft, #d4e2e8); }
.ax-badge.st { color: var(--ax-light); border-color: color-mix(in srgb, var(--ax) 55%, transparent); }
.ax-badge.rt { color: #f6d58e; border-color: rgba(246,213,142,.45); }
.ax-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.ax-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 10px; background: var(--ax); color: #031116; font-weight: 800; text-decoration: none; border: 1px solid var(--ax); }
.ax-btn.ghost { background: transparent; color: inherit; border-color: var(--border-strong, rgba(255,255,255,.2)); }

/* ===== Sub navigation ===== */
.ax-subnav { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; overflow-x: auto; margin: 0 -18px; padding: 8px 18px; background: rgba(5,8,12,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border, rgba(255,255,255,.1)); scrollbar-width: none; }
.ax-subnav::-webkit-scrollbar { display: none; }
.ax-subnav a { flex: 0 0 auto; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--vortex-gray, #94a3ad); text-decoration: none; white-space: nowrap; }
.ax-subnav a:hover { color: var(--vortex-white, #eef6f9); background: rgba(255,255,255,.04); }
.ax-subnav a.on { color: #031116; background: var(--ax); }

.ax-state { padding: 60px 18px; text-align: center; color: var(--vortex-gray, #94a3ad); line-height: 1.9; }
.ax-state.err { color: #ff8a9b; }

/* ===== Sections ===== */
.ax-section { margin: 40px 0; scroll-margin-top: 70px; }
.ax-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.ax-kicker { font: 700 12px monospace; color: var(--ax-light); }
.ax-head h2 { margin: 0; font-size: clamp(20px, 2.8vw, 28px); font-weight: 900; }
.ax-card { padding: clamp(16px, 2.4vw, 24px); border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 14px; background: var(--surface, rgba(255,255,255,.03)); }
.ax-card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 800; color: var(--ax-light); }
.ax-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ax-split > .ax-card.hidden { display: none !important; }
.ax-split > .ax-card.solo { grid-column: 1 / -1; }
.ax-prose { margin: 0 0 12px; line-height: 2; white-space: pre-line; overflow-wrap: anywhere; }
.ax-prose:last-child { margin-bottom: 0; }
.ax-en-prose { color: var(--vortex-gray, #94a3ad); font-size: 14px; }

/* ===== Stats ===== */
.ax-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ax-stat { padding: 16px 18px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--ax) 12%, transparent), rgba(255,255,255,.02)); }
.ax-stat small { display: block; font-size: 12px; color: var(--vortex-gray, #94a3ad); }
.ax-stat strong { display: block; margin-top: 6px; font-size: 20px; font-weight: 900; line-height: 1.4; }

/* ===== Key/value lists ===== */
.ax-kv { margin: 0; display: grid; gap: 0; }
.ax-kv > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.ax-kv > div:last-child { border-bottom: 0; }
.ax-kv dt { color: var(--vortex-gray, #94a3ad); font-size: 13px; }
.ax-kv dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }

/* ===== Terms ===== */
.ax-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ax-term-group { padding: 18px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 14px; background: var(--surface, rgba(255,255,255,.03)); }
.ax-term-group h3 { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--ax-light); display: flex; justify-content: space-between; align-items: center; }
.ax-term-group h3 small { font-size: 11px; color: var(--vortex-gray, #94a3ad); font-weight: 600; }
.ax-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-chip { display: inline-flex; flex-direction: column; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border-strong, rgba(255,255,255,.14)); background: rgba(255,255,255,.02); font-size: 13px; line-height: 1.5; }
.ax-chip small { font-size: 11px; color: var(--vortex-gray, #94a3ad); direction: ltr; text-align: right; }
.ax-chip.rating { border-color: rgba(246,213,142,.45); color: #f6d58e; }
.ax-chip.demographic { border-color: rgba(159,214,255,.45); color: #9fd6ff; }
.ax-chip.genre { border-color: color-mix(in srgb, var(--ax) 45%, transparent); }
.ax-chip.theme { border-color: rgba(167,240,200,.4); color: #a7f0c8; }
.ax-chip.tag { border-color: rgba(255,176,187,.35); color: #ffb0bb; }

/* ===== Blocks ===== */
.ax-block { margin-bottom: 14px; }
.ax-block h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--ax-light); }
.ax-block p { margin: 0; line-height: 2; white-space: pre-line; overflow-wrap: anywhere; }
.ax-block ul { margin: 0; padding: 0 20px 0 0; line-height: 2; }
.ax-block blockquote { margin: 0; padding: 14px 18px; border-inline-start: 3px solid var(--ax); background: rgba(255,255,255,.03); border-radius: 10px; line-height: 2; font-size: 16px; }
.ax-block figure { margin: 0 0 12px; }
.ax-block figure img { width: 100%; border-radius: 12px; }

/* ===== Arcs ===== */
.ax-arcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ax-arc { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 14px; background: var(--surface, rgba(255,255,255,.03)); }
.ax-arc b { font-size: 16px; }
.ax-arc small { margin-top: 2px; color: var(--vortex-gray, #94a3ad); direction: ltr; text-align: right; }
.ax-arc span { display: inline-block; align-self: flex-start; margin-top: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12px; color: var(--ax-light); background: color-mix(in srgb, var(--ax) 14%, transparent); }
.ax-arc p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--vortex-white-soft, #d4e2e8); }
.ax-arc button { margin-top: auto; align-self: flex-start; min-height: 36px; padding: 0 12px; margin-top: 12px; border: 1px solid var(--border-strong, rgba(255,255,255,.15)); border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.ax-arc button:hover { border-color: var(--ax); }

/* ===== Guide ===== */
.ax-canon-note { padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 12px; background: var(--surface, rgba(255,255,255,.03)); }
.ax-canon-note p { margin: 0 0 10px; color: var(--vortex-gray, #94a3ad); font-size: 13.5px; line-height: 1.9; }
.ax-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 200px 200px; gap: 10px; margin-bottom: 10px; }
.ax-toolbar input, .ax-toolbar select { min-height: 44px; padding: 0 14px; border: 1px solid var(--border-strong, rgba(255,255,255,.15)); border-radius: 10px; background: rgba(0,0,0,.3); color: inherit; font: inherit; font-size: 14px; width: 100%; }
.ax-toolbar input:focus, .ax-toolbar select:focus { outline: none; border-color: var(--ax); }
.ax-toolbar option { background: #0b1118; }
.ax-count { margin: 12px 0; font-size: 13px; color: var(--vortex-gray, #94a3ad); }

.ax-arc-group { margin-bottom: 20px; }
.ax-arc-group > h3 { margin: 0 0 10px; font-size: 15px; color: var(--ax-light); padding-bottom: 8px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.ax-ep { border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 12px; background: var(--surface, rgba(255,255,255,.02)); margin-bottom: 8px; overflow: hidden; }
.ax-ep[open] { border-color: color-mix(in srgb, var(--ax) 40%, transparent); }
.ax-ep summary { list-style: none; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; }
.ax-ep summary::-webkit-details-marker { display: none; }
.ax-ep summary:hover { background: rgba(255,255,255,.02); }
.ax-num { font: 800 13px monospace; color: var(--ax-light); text-align: center; padding: 6px 0; border-radius: 8px; background: color-mix(in srgb, var(--ax) 12%, transparent); }
.ax-ep-title { min-width: 0; }
.ax-ep-title b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.ax-ep-title small { display: block; color: var(--vortex-gray, #94a3ad); font-size: 12px; direction: ltr; text-align: right; overflow-wrap: anywhere; }
.ax-canon { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong, rgba(255,255,255,.2)); white-space: nowrap; }
.ax-canon.manga_canon { color: #9fd6ff; border-color: rgba(159,214,255,.4); }
.ax-canon.anime_canon { color: #a7f0c8; border-color: rgba(167,240,200,.4); }
.ax-canon.mixed { color: #f6d58e; border-color: rgba(246,213,142,.4); }
.ax-canon.filler { color: #ffb0bb; border-color: rgba(255,176,187,.4); }
.ax-canon.unclear { color: var(--vortex-gray, #94a3ad); }
.ax-ep-body { padding: 0 16px 16px 100px; }
.ax-ep-body p { margin: 0 0 10px; line-height: 1.95; white-space: pre-line; overflow-wrap: anywhere; }
.ax-ep-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--vortex-gray, #94a3ad); margin-bottom: 10px; }
.ax-ep-meta b { color: var(--vortex-white-soft, #d4e2e8); font-weight: 600; }
.ax-ep-chars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ax-ep-chars span { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,.05); }
.ax-ep-note { margin-top: 10px; font-size: 12.5px; color: var(--vortex-gray, #94a3ad); }
.ax-empty { padding: 30px; text-align: center; border: 1px dashed var(--border-strong, rgba(255,255,255,.15)); border-radius: 12px; color: var(--vortex-gray, #94a3ad); }

/* ===== Gallery & links ===== */
.ax-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ax-gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; border: 1px solid var(--border, rgba(255,255,255,.1)); }
.ax-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ax-links a { display: inline-block; padding: 10px 16px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 10px; color: var(--ax-light); text-decoration: none; }
.ax-links a:hover { border-color: var(--ax); }

@media (max-width: 860px) {
  .ax-split { grid-template-columns: 1fr; }
  .ax-toolbar { grid-template-columns: 1fr 1fr; }
  .ax-toolbar input { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .ax { padding: 0 14px 60px; }
  .ax-hero { margin: 0 -14px; }
  .ax-hero-inner { grid-template-columns: 1fr; padding: 28px 14px 32px; }
  .ax-poster { width: min(190px, 55%); }
  .ax-subnav { margin: 0 -14px; padding: 8px 14px; }
  .ax-ep summary { grid-template-columns: 56px minmax(0, 1fr); }
  .ax-ep summary .ax-canon { grid-column: 2; justify-self: start; }
  .ax-ep-body { padding: 0 14px 14px; }
  .ax-kv > div { grid-template-columns: 92px minmax(0, 1fr); }
  .ax-terms { grid-template-columns: 1fr; }
  .ax-section { margin: 30px 0; }
}
.ax-hero-inner:has(.ax-poster.hidden) { grid-template-columns: minmax(0, 1fr); max-width: 900px; }

/* ===== تبويبات الصفحة: قسم واحد ظاهر في كل مرة ===== */
.ax-tabs{position:sticky;top:0;z-index:20;display:flex;gap:6px;overflow-x:auto;padding:10px 0;margin:0 0 16px;background:var(--bg,#0b0b0f);scrollbar-width:none}
.ax-tabs::-webkit-scrollbar{display:none}
.ax-tabs button{flex:0 0 auto;border:1px solid var(--border);background:var(--surface);color:var(--vortex-gray);padding:8px 14px;border-radius:999px;font:inherit;font-size:14px;cursor:pointer;transition:var(--transition)}
.ax-tabs button.on{background:var(--anime-primary,var(--vortex-cyan));border-color:transparent;color:#06070a;font-weight:700}
.ax-panel.hidden,.hidden{display:none!important}
.ax-panel{animation:axFade .25s ease}
@keyframes axFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ===== الكتل والحسابات كطيّ (مغلقة افتراضياً) ===== */
.ax-accordions{display:grid;gap:8px;margin-top:12px}
.ax-acc{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);overflow:hidden}
.ax-acc>summary{cursor:pointer;padding:12px 16px;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
.ax-acc>summary::-webkit-details-marker{display:none}
.ax-acc>summary::after{content:"+";color:var(--anime-accent,var(--vortex-cyan));font-size:18px}
.ax-acc[open]>summary::after{content:"−"}
.ax-acc-body{padding:0 16px 14px}
.ax-block-img{width:100%;max-height:320px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:10px}
.ax-ul{padding-inline-start:18px;margin:0;display:grid;gap:6px;color:var(--vortex-white-soft)}
.ax-more{margin-top:10px;border:0;background:none;color:var(--anime-accent,var(--vortex-cyan));font:inherit;cursor:pointer;padding:0}

/* ===== الشخصيات: بطاقات هوية (صورة + اسم فقط) ===== */
.ax-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.ax-id{margin:0;border:1px solid var(--border-strong,var(--border));border-radius:var(--radius-md);background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
.ax-id-img{position:relative;aspect-ratio:3/4;background:linear-gradient(160deg,var(--anime-primary,#1b2a3a),#0b0b0f);overflow:hidden}
.ax-id-img img{width:100%;height:100%;object-fit:cover;display:block}
.ax-id-ini{position:absolute;inset:0;display:grid;place-items:center;font-size:42px;font-weight:800;color:rgba(255,255,255,.25);z-index:0}
.ax-id-img img{position:relative;z-index:1}
.ax-id figcaption{padding:8px 10px;display:grid;gap:2px;text-align:center;border-top:1px solid var(--border)}
.ax-id figcaption b{font-size:14px;line-height:1.4}
.ax-id figcaption small{color:var(--vortex-gray);font-size:11px}

/* ===== الأقواس ===== */
.ax-arcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.ax-arc{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:14px;display:grid;gap:6px;align-content:start}
.ax-arc span{color:var(--vortex-gray);font-size:13px}
.ax-arc p{margin:0;color:var(--vortex-white-soft);font-size:14px;line-height:1.7}
.ax-arc button{justify-self:start;margin-top:4px;border:0;background:none;color:var(--anime-accent,var(--vortex-cyan));font:inherit;cursor:pointer;padding:0}

/* ===== دليل الحلقات: صفحات ===== */
.ax-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0;flex-wrap:wrap}
.ax-pager:empty{display:none}
.ax-pager button{border:1px solid var(--border);background:var(--surface);color:var(--vortex-white);padding:8px 14px;border-radius:var(--radius-sm);font:inherit;cursor:pointer}
.ax-pager button:disabled{opacity:.4;cursor:default}
.ax-pager span{color:var(--vortex-gray);font-size:13px}
.ax-empty{padding:24px;text-align:center;color:var(--vortex-gray);border:1px dashed var(--border);border-radius:var(--radius-md)}
.ax-arc-group h3{margin:18px 0 8px;font-size:16px}
.ax-ep summary{cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 12px;list-style:none;flex-wrap:wrap}
.ax-ep summary::-webkit-details-marker{display:none}
.ax-ep-title{display:grid;gap:2px;flex:1;min-width:0}
.ax-ep-title small{color:var(--vortex-gray);font-size:12px}
.ax-ep-body{padding:0 14px 14px;display:grid;gap:8px;color:var(--vortex-white-soft);font-size:14px;line-height:1.7}
.ax-ep-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--vortex-gray)}
.ax-ep-chars{display:flex;gap:6px;flex-wrap:wrap}
.ax-ep-chars span{border:1px solid var(--border);border-radius:999px;padding:2px 10px;font-size:12px}
.ax-ep-note{color:var(--vortex-gray);font-size:13px}

/* ===== المعرض والروابط ===== */
.ax-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.ax-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-sm)}
.ax-excerpt .ax-prose{display:block}

@media (max-width:600px){
  .ax-chars{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ax-id-ini{font-size:32px}
  .ax-tabs{max-width:100%}
}