/* Public card and late-section styles restored from the original bundle. */
/* ═══ CHARACTER DOSSIER CARDS — NEW DESIGN ═══ */

/* Stats Bar — radar style indicators */
.char-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  margin-bottom: 40px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.char-stat-pill {
  background: var(--surface);
  padding: 14px 12px;
  text-align: center;
  position: relative;
  transition: background 0.3s;
}
.char-stat-pill:hover { background: var(--surface-2); }
.char-stat-pill::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--pill-clr, var(--cyan));
}
.char-stat-pill__num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--pill-clr, var(--cyan));
}
.char-stat-pill__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-3);
  text-transform: uppercase;
}

/* Filter Tabs */
.char-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.char-tab {
  font-family: var(--font-ar);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}
.char-tab:hover { color: var(--text); }
.char-tab.active {
  background: var(--tab-clr, var(--cyan));
  color: var(--bg);
  font-weight: 700;
}

/* Search */
.char-search-wrap {
  max-width: 380px;
  margin: 0 auto 36px;
  position: relative;
}
.char-search {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 11px 44px 11px 20px;
  font-family: var(--font-ar);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: all 0.3s;
}
.char-search:focus {
  border-color: var(--cyan);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.08);
}
.char-search::placeholder { color: var(--text-3); }
.char-search-wrap::before {
  content: '⌕';
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 16px;
  pointer-events: none;
}

/* Cards Grid */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}
@media (max-width: 700px) {
  .char-grid { grid-template-columns: 1fr; }
}

/* ═══ DOSSIER CARD ═══ */
.cc {
  position: relative;
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-3) 100%);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* angled corner cut on top-left (in RTL = visual right-top) */
  clip-path: polygon(
    18px 0,
    100% 0,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    0 100%,
    0 18px
  );
}

/* Subtle scan-line texture */
.cc::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(255,255,255,0.012) 3px,
      rgba(255,255,255,0.012) 4px
    );
  pointer-events: none;
  z-index: 1;
}

.cc:hover {
  border-color: var(--cc-clr, var(--cyan));
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--bg-3) 100%);
  transform: translateY(-3px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.4),
    0 0 0 1px var(--cc-clr, var(--cyan));
}

/* TOP STRIP — classification bar */
.cc__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--cc-clr, var(--cyan));
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.cc__strip-left,
.cc__strip-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cc__strip-tag {
  background: rgba(0,0,0,0.25);
  padding: 2px 8px;
  border-radius: 2px;
}
.cc__beast-tag {
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(0,0,0,0.18);
  padding: 2px 8px;
  border-radius: 2px;
  color: var(--bg);
}
.cc__save-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(0,0,0,0.28);
  border-radius: 5px;
  background: rgba(0,0,0,0.22);
  color: var(--bg);
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.cc__save-btn:hover,
.cc__save-btn:focus-visible {
  background: rgba(255,255,255,0.24);
  outline: none;
}
.cc__save-btn:disabled {
  cursor: wait;
  opacity: 0.75;
}
.cc--capturing .cc__save-btn {
  display: none !important;
}

/* MAIN BODY */
.cc__main {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 0;
  padding: 18px 20px 18px 0;
  position: relative;
  z-index: 2;
}

/* Right side — KANJI MEGABLOCK (in RTL this appears on the right) */
.cc__kanji-block {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border);
  position: relative;
}
.cc__kanji-big {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  color: var(--cc-clr, var(--cyan));
  opacity: 0.85;
  margin-bottom: 4px;
  text-shadow: 0 0 20px var(--cc-clr-glow, rgba(0,212,255,0.3));
}
.cc__kanji-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-3);
  letter-spacing: 1.5px;
  text-align: center;
}

/* Left side — INFO (in RTL appears on left visually) */
.cc__info {
  grid-column: 1;
  padding: 0 20px;
  min-width: 0;
}

/* ID number — huge italic */
.cc__id-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.cc__id-prefix {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 2px;
}
.cc__id-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 38px;
  font-weight: 900;
  color: var(--cc-clr, var(--cyan));
  line-height: 0.9;
  letter-spacing: -1px;
}
.cc__id-divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
  margin: 0 4px;
}

.cc__name {
  font-family: var(--font-ar);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
  color: var(--text);
}
.cc__name-en {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cc-clr, var(--cyan));
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.cc__name-jp {
  font-size: 11px;
  color: var(--text-3);
  opacity: 0.55;
  margin-bottom: 12px;
}

/* Threat indicator bar */
.cc__threat {
  display: flex;
  gap: 3px;
  margin-bottom: 4px;
}
.cc__threat-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-3);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.cc__threat-bar.active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cc-clr, var(--cyan));
  animation: threatPulse 2s ease-in-out infinite;
}
@keyframes threatPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.cc__threat-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-3);
  letter-spacing: 1.5px;
}

/* EXPAND TRIGGER */
.cc__expand-icon {
  position: absolute;
  bottom: 14px;
  left: 16px;
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-3);
  background: var(--bg-2);
  z-index: 3;
  transition: all 0.3s;
}
.cc:hover .cc__expand-icon {
  border-color: var(--cc-clr, var(--cyan));
  color: var(--cc-clr, var(--cyan));
}
.cc.open .cc__expand-icon {
  background: var(--cc-clr, var(--cyan));
  color: var(--bg);
  border-color: transparent;
  transform: rotate(180deg);
}

/* EXPANDED DETAILS */
.cc__details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
}
.cc.open .cc__details {
  max-height: 700px;
}
.cc__detail-inner {
  padding: 0 20px 22px 20px;
  border-top: 1px dashed var(--border);
  margin-top: 0;
}

/* Metadata table */
.cc__meta-table {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cc__meta-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.cc__meta-row:last-child { border-bottom: none; }
.cc__meta-key {
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--cc-clr, var(--cyan));
  letter-spacing: 1.5px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
}
.cc__meta-val {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  display: flex;
  align-items: center;
}

/* Ability — highlighted block */
.cc__ability {
  position: relative;
  background: linear-gradient(135deg,
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.2));
  padding: 14px 16px 14px 16px;
  border: 1px solid var(--cc-clr, var(--cyan));
  border-left: none;
  border-right: 4px solid var(--cc-clr, var(--cyan));
  border-radius: 4px;
  position: relative;
}
.cc__ability::before {
  content: '◆';
  position: absolute;
  top: -7px;
  right: 12px;
  background: var(--cc-clr, var(--cyan));
  color: var(--bg);
  font-size: 9px;
  width: 14px; height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.cc__ability-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--cc-clr, var(--cyan));
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.cc__ability-val {
  font-family: var(--font-ar);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.6;
}

/* Footer line in expanded card */
.cc__detail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cc__detail-footer-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 12px;
}

/* ═══════════════════════════════════════════ */
/*  RICH CARD — V2 (Hatsu Matrix Edition)     */
/* ═══════════════════════════════════════════ */

/* Make grid one-column on wide cards (richer cards need more width) */
.char-grid {
  grid-template-columns: 1fr !important;
  max-width: 980px;
  margin: 0 auto;
  gap: 18px;
}

/* HEADER ROW — avatar + name block + file number */
.cc__header {
  display: grid;
  grid-template-columns: 110px auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px 24px 18px;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--border);
}
.cc__hero-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  justify-self: end;
}
.cc__hero-num-box {
  background: var(--bg-2);
  border: 1px solid var(--cc-clr, var(--cyan));
  padding: 10px 18px;
  border-radius: 6px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
}
.cc__hero-num-prefix {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 1px;
}
.cc__hero-num-val {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  color: var(--cc-clr, var(--cyan));
  line-height: 1;
}
.cc__hero-num-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-3);
  letter-spacing: 1.5px;
}

.cc__hero-name {
  text-align: center;
  min-width: 0;
}
.cc__hero-name .cc__name-jp-small {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 4px;
  margin-bottom: 4px;
  opacity: 0.7;
}
.cc__hero-name .cc__name {
  font-family: var(--font-ar);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 2px;
  color: var(--text);
}
.cc__hero-name .cc__name-en {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  font-weight: 700;
  color: var(--cc-clr, var(--cyan));
  letter-spacing: 4px;
}

/* AVATAR — circular kanji portrait */
.cc__avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--cc-clr-glow, rgba(0,212,255,0.15)), transparent 70%),
    linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border: 2px solid var(--cc-clr, var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,0.5),
    0 0 24px var(--cc-clr-glow, rgba(0,212,255,0.2));
  flex-shrink: 0;
}
.cc__avatar::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--border);
  border-radius: 50%;
  opacity: 0.5;
}
.cc__avatar-kanji {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  color: var(--cc-clr, var(--cyan));
  line-height: 1;
  text-shadow: 0 0 20px var(--cc-clr-glow);
  opacity: 0.92;
}
.cc__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  position: relative;
  z-index: 1;
}
.cc__avatar .nen-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  position: relative;
  z-index: 1;
}

/* STATS ROW — 3 columns: Age, Affil, Role */
.cc__stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 2;
}
.cc__stat {
  padding: 12px 14px;
  text-align: center;
  border-left: 1px solid var(--border);
  min-width: 0;
}
.cc__stat:first-child { border-left: none; }
.cc__stat-key {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--cc-clr, var(--cyan));
  letter-spacing: 1.5px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.cc__stat-val {
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* THREAT ROW */
.cc__threat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 2;
}
.cc__threat-row .cc__threat {
  display: flex;
  gap: 3px;
  flex: 1;
  margin: 0;
}
.cc__threat-row .cc__threat-label {
  flex-shrink: 0;
}

/* EXPAND TOGGLE */
.cc__expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  z-index: 2;
  background: var(--bg-2);
}
.cc__expand-toggle:hover {
  color: var(--cc-clr, var(--cyan));
  background: var(--bg-3);
}
.cc__expand-toggle__arrow {
  transition: transform 0.3s;
  display: inline-block;
}
.cc.open .cc__expand-toggle__arrow { transform: rotate(180deg); }

/* DETAILS — expanded body */
.cc.open .cc__details {
  max-height: 1500px;
}

.cc__detail-inner {
  padding: 24px !important;
  border-top: 1px dashed var(--border);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.15));
}

/* BOTTOM ROW — Ability box (left/right depending on RTL) + Hatsu Matrix */
.cc__bottom-row {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  .cc__bottom-row { grid-template-columns: 1fr; }
}

.cc__ability-block {
  background: linear-gradient(135deg, rgba(0,0,0,0.45), rgba(0,0,0,0.2));
  border: 1px solid var(--cc-clr, var(--cyan));
  border-right: 4px solid var(--cc-clr, var(--cyan));
  border-left: none;
  border-radius: 4px;
  padding: 18px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.cc__ability-block::before {
  content: '◆';
  position: absolute;
  top: -7px;
  right: 14px;
  background: var(--cc-clr, var(--cyan));
  color: var(--bg);
  font-size: 9px;
  width: 14px; height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.cc__ability-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--cc-clr, var(--cyan));
  letter-spacing: 2px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.cc__ability-name {
  font-family: var(--font-ar);
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.5;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.cc__ability-detail {
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  line-height: 2;
  text-align: justify;
}
.cc__ability-detail strong {
  color: var(--cc-clr, var(--cyan));
  font-weight: 700;
}

/* HATSU MATRIX — Hexagonal radar */
.cc__matrix {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cc__matrix::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, var(--cc-clr-glow, rgba(0,212,255,0.08)), transparent 70%);
  pointer-events: none;
}
.cc__matrix-svg {
  width: 220px;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.cc__matrix-label {
  font-family: var(--font-ar);
  font-size: 11px;
  font-weight: 700;
  color: var(--cc-clr, var(--cyan));
  margin-top: 8px;
  position: relative;
  z-index: 1;
}
.cc__matrix-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 2px;
  font-style: italic;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

/* SVG inner styling */
.cc__matrix-svg .hex-grid { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.cc__matrix-svg .hex-grid--main { stroke: rgba(255,255,255,0.12); }
.cc__matrix-svg .hex-poly {
  fill: var(--cc-clr, var(--cyan));
  fill-opacity: 0.18;
  stroke: var(--cc-clr, var(--cyan));
  stroke-width: 1.5;
}
.cc__matrix-svg .hex-vertex {
  fill: var(--cc-clr, var(--cyan));
}
.cc__matrix-svg .hex-vertex--inactive {
  fill: var(--text-3);
  fill-opacity: 0.35;
}
.cc__matrix-svg .hex-axis { stroke: rgba(255,255,255,0.04); stroke-width: 1; }
.cc__matrix-svg .hex-label-ar {
  font-family: var(--font-ar);
  font-size: 9px;
  font-weight: 700;
  fill: var(--text-2);
}
.cc__matrix-svg .hex-label-pct {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--text-3);
}
.cc__matrix-svg .hex-label-ar--main {
  fill: var(--cc-clr, var(--cyan));
}
.cc__matrix-svg .hex-label-pct--main {
  fill: var(--cc-clr, var(--cyan));
  font-weight: 700;
}
.cc__matrix-svg .hex-center-kanji {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  fill: var(--cc-clr, var(--cyan));
  fill-opacity: 0.55;
  text-anchor: middle;
}
.cc__matrix-svg .hex-center-bg {
  fill: var(--bg);
  fill-opacity: 0.6;
}

/* ESSENCE BANNER — al-khulasa */
.cc__essence {
  background: linear-gradient(90deg,
    rgba(255,192,72,0.12),
    rgba(255,192,72,0.04) 40%,
    transparent);
  border-right: 3px solid var(--gold);
  padding: 12px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
}
.cc__essence::before {
  content: '✦';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translate(50%, -50%);
  background: var(--bg-3);
  color: var(--gold);
  font-size: 11px;
  width: 18px; height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
}
.cc__essence-label {
  font-family: var(--font-ar);
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 1px;
  flex-shrink: 0;
}
.cc__essence-dash {
  color: var(--text-3);
  font-family: var(--font-mono);
}
.cc__essence-text {
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  color: var(--text);
  line-height: 1.7;
  flex: 1;
  min-width: 0;
}

/* MOBILE TWEAKS for rich card */
@media (max-width: 640px) {
  .cc__header {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
    text-align: center;
  }
  .cc__hero-num { order: 3; flex-direction: row; justify-content: center; }
  .cc__hero-name { order: 1; }
  .cc__avatar { order: 2; margin: 0 auto; width: 80px; height: 80px; }
  .cc__avatar-kanji { font-size: 46px; }
  .cc__hero-name .cc__name { font-size: 22px; }
  .cc__stats-row { grid-template-columns: 1fr; }
  .cc__stat { border-left: none; border-bottom: 1px solid var(--border); }
  .cc__stat:last-child { border-bottom: none; }
  .cc__detail-inner { padding: 16px !important; }
  .cc__matrix-svg { width: 200px; }
  .cc__strip {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    letter-spacing: 1.5px;
  }
  .cc__strip-left,
  .cc__strip-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* DEPRECATE old layout — hide legacy parts when rich layout is active */
.cc--rich .cc__main,
.cc--rich .cc__expand-icon,
.cc--rich .cc__details > .cc__detail-inner > .cc__meta-table,
.cc--rich .cc__details > .cc__detail-inner > .cc__ability,
.cc--rich .cc__details > .cc__detail-inner > .cc__detail-footer { display: none !important; }

/* Always-open variant — show details without expansion */
.cc__details--always {
  max-height: none !important;
  overflow: visible !important;
}

/* Rich card no longer needs cursor pointer (no expand) */
.cc--rich { cursor: default; }
.cc--rich:hover { transform: none; }

/* ═══════════════════════════════════════════════════════════ */
/*  CHAPTER IX & X — SUCCESSION WAR + FAMILY TREES STYLES     */
/* ═══════════════════════════════════════════════════════════ */

.sub-section-title {
  font-family: var(--font-ar);
  font-size: 22px;
  font-weight: 800;
  color: var(--cyan);
  margin: 40px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.sub-section-title::before {
  content: '◆';
  color: var(--coral);
  margin-left: 10px;
  font-size: 14px;
  vertical-align: middle;
}

/* ═══ PRINCE GRID ═══ */
.prince-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.prince-card {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--border);
  border-right: 3px solid var(--cyan);
  border-radius: 6px;
  padding: 16px 18px;
  position: relative;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.prince-card:hover {
  transform: translateY(-2px);
  border-right-color: var(--gold);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.prince-card--dead {
  opacity: 0.78;
  border-right-color: var(--coral);
}
.prince-card--dead .prince-card__name { text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 1px; }

.prince-card__num {
  position: absolute;
  top: 10px;
  left: 14px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  font-style: italic;
  color: var(--cyan);
  opacity: 0.4;
  line-height: 1;
}
.prince-card--dead .prince-card__num { color: var(--coral); }

.prince-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.prince-card__rank {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.prince-card__name {
  font-family: var(--font-ar);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}
.prince-card__name-en {
  font-family: var(--font-display);
  font-size: 11px;
  font-style: italic;
  color: var(--cyan);
  letter-spacing: 1.5px;
  margin-top: 2px;
}
.prince-card__status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 3px;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.prince-card__status--alive {
  color: var(--green, #4ade80);
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.3);
}
.prince-card__status--dead {
  color: var(--coral);
  background: rgba(255,99,99,0.1);
  border: 1px solid rgba(255,99,99,0.3);
}
.prince-card__status-icon { font-size: 11px; }

.prince-card__queen {
  font-size: 11px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.prince-card__queen-label {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
}
.prince-card__queen-name {
  color: var(--gold);
  font-family: var(--font-ar);
  font-weight: 700;
}
.prince-card__queen-num {
  color: var(--text-3);
  font-family: var(--font-mono);
}

.prince-card__summary {
  font-family: var(--font-ar);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-2);
  margin: 0;
}
.prince-card__summary strong { color: var(--cyan); }

/* ═══ QUEENS GRID ═══ */
.queens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.queen-card {
  background: linear-gradient(135deg, rgba(255,192,72,0.05), transparent);
  border: 1px solid var(--border);
  border-right: 2px solid var(--gold);
  border-radius: 5px;
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.queen-card__rank {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
  font-style: italic;
}
.queen-card__name {
  font-family: var(--font-ar);
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.queen-card__name-en {
  font-family: var(--font-display);
  font-size: 10px;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 1.5px;
  margin: 2px 0 6px;
}
.queen-card__sons {
  font-size: 10.5px;
  color: var(--cyan);
  font-family: var(--font-mono);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.queen-card__summary {
  font-family: var(--font-ar);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0;
}

/* ═══ MAFIA GRID ═══ */
.mafia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 16px 0 30px;
}
.mafia-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--coral);
  border-radius: 6px;
  padding: 16px 18px;
  position: relative;
}
.mafia-card::before {
  content: '☠';
  position: absolute;
  top: -12px;
  right: 14px;
  background: var(--bg);
  color: var(--coral);
  font-size: 16px;
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--coral);
  border-radius: 50%;
}
.mafia-card__name-en {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  color: var(--coral);
  margin: 0;
  letter-spacing: 1px;
}
.mafia-card__name-ar {
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 4px 0 12px;
}
.mafia-card__desc {
  font-family: var(--font-ar);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-2);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.mafia-card__members-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.mafia-card__members {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mafia-card__members li {
  font-family: var(--font-ar);
  font-size: 11.5px;
  color: var(--text-2);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
  padding-right: 14px;
}
.mafia-card__members li::before {
  content: '◦';
  position: absolute;
  right: 0;
  color: var(--coral);
}
.mafia-card__members li:last-child { border-bottom: none; }

/* ═══ TIMELINE ═══ */
.timeline {
  position: relative;
  padding-right: 28px;
  margin: 16px 0 30px;
}
.timeline::before {
  content: '';
  position: absolute;
  right: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--coral));
}
.timeline__item {
  position: relative;
  padding: 12px 18px;
  margin-bottom: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.timeline__dot {
  position: absolute;
  right: -25px;
  top: 18px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--cyan);
}
.timeline__dot--coral {
  background: var(--coral);
  box-shadow: 0 0 0 1px var(--coral);
}
.timeline__day {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--cyan);
  letter-spacing: 2px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.timeline__title {
  font-family: var(--font-ar);
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.timeline__body {
  font-family: var(--font-ar);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-2);
  margin: 0;
}
.timeline__body strong { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════ */
/*  FAMILY TREES                                              */
/* ═══════════════════════════════════════════════════════════ */

.tree-block {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
  position: relative;
  overflow: hidden;
}
.tree-block::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,212,255,0.06), transparent 70%);
  pointer-events: none;
}
.tree-block--small { padding: 18px; }

.tree-block__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.tree-block__kanji {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  color: var(--cyan);
  line-height: 1;
  text-shadow: 0 0 30px rgba(0,212,255,0.4);
}
.tree-block__title {
  font-family: var(--font-ar);
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
}
.tree-block__subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 2px;
  margin-top: 4px;
}

/* ═══ KAKIN TREE ═══ */
.tree-kakin {
  position: relative;
  z-index: 1;
}
.tree-kakin__king {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.tree-kakin__king-box {
  background: linear-gradient(135deg, rgba(255,192,72,0.15), rgba(255,192,72,0.05));
  border: 2px solid var(--gold);
  padding: 16px 32px;
  border-radius: 8px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 20px rgba(255,192,72,0.2);
}
.tree-kakin__crown {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  color: var(--gold);
  background: var(--bg);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
}
.tree-kakin__king-title {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.tree-kakin__king-name {
  font-family: var(--font-ar);
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}
.tree-kakin__king-en {
  font-family: var(--font-display);
  font-size: 10px;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 2px;
  margin-top: 2px;
}

.tree-kakin__divider {
  text-align: center;
  position: relative;
  margin: 18px 0;
}
.tree-kakin__divider::before, .tree-kakin__divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--border);
}
.tree-kakin__divider::before { right: 0; }
.tree-kakin__divider::after { left: 0; }
.tree-kakin__divider span {
  display: inline-block;
  background: var(--bg-2);
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 2px;
}
.tree-kakin__divider--princes::before, .tree-kakin__divider--princes::after { background: var(--cyan); opacity: 0.4; }

.tree-kakin__queens {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.tree-kakin__queen {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: 4px;
  padding: 8px 6px;
  text-align: center;
  transition: transform 0.3s;
}
.tree-kakin__queen:hover { transform: translateY(-2px); border-top-color: var(--cyan); }
.tree-kakin__q-num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  font-style: italic;
}
.tree-kakin__q-name {
  font-family: var(--font-ar);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.tree-kakin__q-en {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-3);
  letter-spacing: 0.5px;
  margin-top: 2px;
}
@media (max-width: 720px) {
  .tree-kakin__queens { grid-template-columns: repeat(4, 1fr); }
}

.tree-kakin__princes {
  display: grid;
  gap: 10px;
}
.tree-kakin__by-queen {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-3);
  border-radius: 4px;
  border-right: 2px solid var(--cyan);
}
.tree-kakin__by-queen--illegit {
  border-right-color: var(--coral);
  border-style: dashed;
}
.tree-kakin__by-q-label {
  font-family: var(--font-ar);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.tree-kakin__by-q-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tree-kakin__pr {
  font-family: var(--font-ar);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-2);
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.tree-kakin__pr--special {
  border-color: var(--purple, #a78bfa);
  color: var(--purple, #a78bfa);
}
.tree-kakin__pr--dead {
  color: var(--coral);
  border-color: var(--coral);
  text-decoration: line-through;
  opacity: 0.7;
}
@media (max-width: 720px) {
  .tree-kakin__by-queen { grid-template-columns: 1fr; gap: 6px; }
}

.tree-kakin__note {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(167,139,250,0.08);
  border-right: 3px solid var(--purple, #a78bfa);
  border-radius: 4px;
  font-family: var(--font-ar);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-2);
}

/* ═══ ZOLDYCK TREE ═══ */
.tree-zoldyck {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tree-zol__gen {
  width: 100%;
  max-width: 720px;
  text-align: center;
  margin-bottom: 4px;
}
.tree-zol__label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.tree-zol__node {
  display: inline-block;
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 5px;
  min-width: 240px;
  position: relative;
}
.tree-zol__node--ancestor {
  border-color: var(--purple, #a78bfa);
  background: linear-gradient(135deg, rgba(167,139,250,0.1), transparent);
}
.tree-zol__node--patriarch {
  border-color: var(--cyan);
  background: linear-gradient(135deg, rgba(0,212,255,0.08), transparent);
}
.tree-zol__node--matriarch {
  border-color: var(--coral);
  background: linear-gradient(135deg, rgba(255,99,99,0.08), transparent);
}
.tree-zol__name {
  font-family: var(--font-ar);
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.tree-zol__role {
  font-family: var(--font-ar);
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.tree-zol__connector {
  width: 2px;
  height: 24px;
  background: var(--cyan);
  opacity: 0.5;
}
.tree-zol__connector--branch {
  width: 80%;
  max-width: 600px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  position: relative;
  margin-bottom: 10px;
}
.tree-zol__connector--branch::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 10px;
  background: var(--cyan);
  opacity: 0.5;
}
.tree-zol__couple {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.tree-zol__plus {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold);
  font-weight: 900;
  font-style: italic;
}

.tree-zol__children {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}
.tree-zol__child {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-top: 2px solid var(--cyan);
  padding: 10px 8px;
  border-radius: 4px;
  text-align: center;
  position: relative;
  transition: all 0.3s;
}
.tree-zol__child:hover { transform: translateY(-3px); border-top-color: var(--gold); }
.tree-zol__child--main {
  border-top-color: var(--gold);
  background: linear-gradient(135deg, rgba(255,192,72,0.08), transparent);
}
.tree-zol__c-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  color: var(--cyan);
  font-style: italic;
}
.tree-zol__c-name {
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin: 4px 0;
}
.tree-zol__c-age {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.tree-zol__c-role {
  font-family: var(--font-ar);
  font-size: 10px;
  color: var(--text-2);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .tree-zol__children { grid-template-columns: repeat(2, 1fr); }
}

.tree-zol__staff {
  width: 100%;
  margin-top: 18px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
  border: 1px dashed var(--border);
}
.tree-zol__staff-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.tree-zol__staff-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-ar);
  font-size: 11px;
  color: var(--text-2);
}
.tree-zol__staff-row span {
  background: var(--bg-2);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* ═══ FREECSS TREE ═══ */
.tree-freecss {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tree-fc__node {
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 12px 24px;
  border-radius: 5px;
  text-align: center;
  min-width: 240px;
  margin: 0 auto;
}
.tree-fc__node--legend {
  border-color: var(--purple, #a78bfa);
  background: linear-gradient(135deg, rgba(167,139,250,0.08), transparent);
}
.tree-fc__node--patriarch {
  border-color: var(--cyan);
  background: linear-gradient(135deg, rgba(0,212,255,0.08), transparent);
}
.tree-fc__node--main {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(255,192,72,0.1), transparent);
  border-width: 2px;
}
.tree-fc__node--family {
  border-style: dashed;
  background: rgba(255,255,255,0.02);
}
.tree-fc__name {
  font-family: var(--font-ar);
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.tree-fc__role {
  font-family: var(--font-ar);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}
.tree-fc__age {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--cyan);
  margin-top: 4px;
}
.tree-fc__note {
  font-family: var(--font-ar);
  font-size: 10px;
  font-style: italic;
  color: var(--text-3);
  margin-top: 6px;
}
.tree-fc__line {
  width: 2px;
  height: 24px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  margin: 0 auto;
}
.tree-fc__gap {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  font-style: italic;
  letter-spacing: 1px;
  padding: 8px;
}
.tree-fc__row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.tree-fc__sibling {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ═══ TROUPE GRID ═══ */
.tree-troupe { position: relative; z-index: 1; }
.tree-troupe__intro {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.tree-troupe__intro p {
  font-family: var(--font-ar);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-2);
  margin: 0 0 10px;
}
.tree-troupe__rule {
  background: rgba(255,99,99,0.08);
  border-right: 3px solid var(--coral);
  padding: 8px 14px;
  font-family: var(--font-ar);
  font-size: 11.5px;
  color: var(--text);
  border-radius: 4px;
  font-style: italic;
}
.tree-troupe__leader {
  background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(167,139,250,0.05));
  border: 2px solid var(--purple, #a78bfa);
  padding: 14px 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  position: relative;
}
.tree-troupe__leader::before {
  content: '✸';
  position: absolute;
  top: -10px; right: 14px;
  background: var(--bg);
  color: var(--purple, #a78bfa);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--purple, #a78bfa);
  font-size: 12px;
}
.tree-troupe__num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  font-style: italic;
  color: var(--purple, #a78bfa);
  flex-shrink: 0;
}
.tree-troupe__name {
  font-family: var(--font-ar);
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  flex: 1;
}
.tree-troupe__role {
  font-family: var(--font-ar);
  font-size: 11.5px;
  color: var(--text-2);
  font-weight: 600;
}

.tree-troupe__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.tree-troupe__member {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-right: 2px solid var(--cyan);
  border-radius: 4px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  transition: all 0.3s;
}
.tree-troupe__member:hover { transform: translateX(-2px); }
.tree-troupe__member--dead {
  border-right-color: var(--coral);
  opacity: 0.7;
}
.tree-troupe__member--dead .tree-troupe__m-name { text-decoration: line-through; }
.tree-troupe__member--ex {
  border-right-color: var(--purple, #a78bfa);
  border-style: dashed;
}
.tree-troupe__m-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  font-style: italic;
  color: var(--cyan);
  grid-row: span 2;
}
.tree-troupe__member--dead .tree-troupe__m-num { color: var(--coral); }
.tree-troupe__member--ex .tree-troupe__m-num { color: var(--purple, #a78bfa); }
.tree-troupe__m-name {
  font-family: var(--font-ar);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.tree-troupe__m-status {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.3px;
}

/* ═══ KURTA TREE ═══ */
.tree-kurta {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) { .tree-kurta { grid-template-columns: 1fr; } }
.tree-kurta__memorial {
  background: linear-gradient(135deg, rgba(255,99,99,0.1), transparent);
  border: 1px solid var(--coral);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}
.tree-kurta__count {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  color: var(--coral);
  line-height: 1;
  font-style: italic;
}
.tree-kurta__count-label {
  font-family: var(--font-ar);
  font-size: 11px;
  color: var(--text-2);
  margin-top: 6px;
  letter-spacing: 1px;
}
.tree-kurta__body p {
  font-family: var(--font-ar);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--text-2);
  margin: 0 0 10px;
}
.tree-kurta__body strong { color: var(--coral); }
.tree-kurta__body em { color: var(--gold); font-style: normal; font-weight: 700; }
.tree-kurta__survivor {
  background: rgba(0,212,255,0.05);
  border: 1px solid var(--cyan);
  border-radius: 6px;
  padding: 14px;
  margin-top: 14px;
  text-align: center;
}
.tree-kurta__s-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--cyan);
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.tree-kurta__s-name {
  font-family: var(--font-ar);
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}
.tree-kurta__s-role {
  font-family: var(--font-ar);
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════ */
/*  CHAPTER X v2 — PER-FACTION FAMILY TREES                  */
/* ═══════════════════════════════════════════════════════════ */

.ftree-section-header {
  font-family: var(--font-ar);
  font-size: 24px;
  font-weight: 900;
  color: var(--gold);
  margin: 50px 0 12px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(255,192,72,0.1), transparent);
  border-right: 4px solid var(--gold);
  border-radius: 4px;
  position: relative;
}
.ftree-section-header::before {
  content: '◆';
  margin-left: 12px;
  color: var(--coral);
  font-size: 16px;
  vertical-align: middle;
}
.ftree-section-intro {
  font-family: var(--font-ar);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-2);
  margin: 0 0 20px;
  padding: 0 4px;
}

/* ═══ FACTION TREE BLOCK ═══ */
.ftree-block {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px;
  margin: 18px 0;
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 520px;
}
.ftree-block::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(0,212,255,0.06), transparent 70%);
  pointer-events: none;
}
.ftree-block--prince::before { background: radial-gradient(circle, rgba(0,212,255,0.06), transparent 70%); }
.ftree-block--queen::before { background: radial-gradient(circle, rgba(255,192,72,0.08), transparent 70%); }
.ftree-block--mafia::before { background: radial-gradient(circle, rgba(255,99,99,0.08), transparent 70%); }
.ftree-block--hunter::before { background: radial-gradient(circle, rgba(0,212,255,0.08), transparent 70%); }
.ftree-block--beyond::before { background: radial-gradient(circle, rgba(167,139,250,0.08), transparent 70%); }
.ftree-block--judicial::before { background: radial-gradient(circle, rgba(74,222,128,0.08), transparent 70%); }
.ftree-block--troupe::before { background: radial-gradient(circle, rgba(167,139,250,0.08), transparent 70%); }

.ftree-block__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.ftree-block__kanji {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 900;
  color: var(--cyan);
  line-height: 1;
  text-shadow: 0 0 25px rgba(0,212,255,0.4);
  flex-shrink: 0;
}
.ftree-block--queen .ftree-block__kanji { color: var(--gold); text-shadow: 0 0 25px rgba(255,192,72,0.4); }
.ftree-block--mafia .ftree-block__kanji { color: var(--coral); text-shadow: 0 0 25px rgba(255,99,99,0.4); }
.ftree-block--beyond .ftree-block__kanji { color: var(--purple, #a78bfa); text-shadow: 0 0 25px rgba(167,139,250,0.4); }
.ftree-block--judicial .ftree-block__kanji { color: var(--green, #4ade80); text-shadow: 0 0 25px rgba(74,222,128,0.4); }
.ftree-block--troupe .ftree-block__kanji { color: var(--purple, #a78bfa); text-shadow: 0 0 25px rgba(167,139,250,0.4); }

.ftree-block__title {
  font-family: var(--font-ar);
  font-size: 19px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
}
.ftree-block__subtitle {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 2px;
  margin-top: 3px;
}
.ftree-block__intro {
  font-family: var(--font-ar);
  font-size: 12px;
  color: var(--text-2);
  margin: 0 0 14px;
  font-style: italic;
}
.ftree-block__note {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(167,139,250,0.06);
  border-right: 3px solid var(--purple, #a78bfa);
  border-radius: 4px;
  font-family: var(--font-ar);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-2);
  position: relative;
  z-index: 1;
}

/* ═══ AVATAR CARDS (with image slots) ═══ */
.ftree-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 8px 8px;
  text-align: center;
  width: 130px;
  position: relative;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}
.ftree-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.ftree-card--cyan { border-top: 2px solid var(--cyan); }
.ftree-card--cyan:hover { border-color: var(--cyan); box-shadow: 0 6px 20px rgba(0,212,255,0.2); }

.ftree-card--gold { border-top: 2px solid var(--gold); background: linear-gradient(180deg, rgba(255,192,72,0.06), var(--bg-3)); }
.ftree-card--gold:hover { border-color: var(--gold); box-shadow: 0 6px 20px rgba(255,192,72,0.25); }

.ftree-card--coral { border-top: 2px solid var(--coral); }
.ftree-card--coral:hover { border-color: var(--coral); box-shadow: 0 6px 20px rgba(255,99,99,0.2); }

.ftree-card--purple { border-top: 2px solid var(--purple, #a78bfa); background: linear-gradient(180deg, rgba(167,139,250,0.06), var(--bg-3)); }
.ftree-card--purple:hover { border-color: var(--purple, #a78bfa); }

.ftree-card--dead {
  border-top: 2px solid var(--coral);
  opacity: 0.7;
  background: linear-gradient(180deg, rgba(255,99,99,0.05), var(--bg-3));
}
.ftree-card--dead .ftree-card__name { text-decoration: line-through; text-decoration-color: var(--coral); }

.ftree-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--border);
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.ftree-card--cyan .ftree-card__avatar { border-color: rgba(0,212,255,0.3); }
.ftree-card--gold .ftree-card__avatar { border-color: rgba(255,192,72,0.4); }
.ftree-card--coral .ftree-card__avatar { border-color: rgba(255,99,99,0.3); }
.ftree-card--purple .ftree-card__avatar { border-color: rgba(167,139,250,0.4); }
.ftree-card--dead .ftree-card__avatar { border-color: rgba(255,99,99,0.4); filter: grayscale(0.4); }

.ftree-card__avatar::before {
  content: '?';
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--text-3);
  opacity: 0.4;
}
.ftree-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
}
.ftree-card__avatar .nen-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ftree-card__name {
  font-family: var(--font-ar);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 3px;
}
.ftree-card__role {
  font-family: var(--font-ar);
  font-size: 9.5px;
  color: var(--text-3);
  line-height: 1.4;
}
.ftree-card__note {
  font-family: var(--font-ar);
  font-size: 9px;
  color: var(--gold);
  font-style: italic;
  margin-top: 4px;
}

/* ═══ LAYOUT HELPERS ═══ */
.ftree-leader-row {
  display: flex;
  justify-content: center;
  margin: 14px 0;
  position: relative;
  z-index: 1;
}
.ftree-leader-row--double {
  gap: 20px;
}
.ftree-leader-row .ftree-card {
  width: 160px;
  transform: scale(1.05);
}
.ftree-leader-row .ftree-card__avatar {
  width: 80px;
  height: 80px;
}

.ftree-divider {
  text-align: center;
  position: relative;
  margin: 20px 0;
}
.ftree-divider::before, .ftree-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: var(--border);
}
.ftree-divider::before { right: 0; }
.ftree-divider::after { left: 0; }
.ftree-divider span {
  display: inline-block;
  background: var(--bg-2);
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}
.ftree-divider--coral::before, .ftree-divider--coral::after { background: var(--coral); opacity: 0.5; }
.ftree-divider--coral span { color: var(--coral); }

.ftree-connector {
  width: 2px;
  height: 24px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  margin: 12px auto;
  opacity: 0.5;
}

.ftree-king-section {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.ftree-overview-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.ftree-overview-row {
  display: grid;
  grid-template-columns: 160px 24px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  border-right: 2px solid var(--gold);
}
.ftree-overview-row__queen { display: flex; justify-content: center; }
.ftree-overview-row__arrow {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--cyan);
  text-align: center;
  font-weight: 900;
}
.ftree-overview-row__princes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 720px) {
  .ftree-overview-row { grid-template-columns: 1fr; }
  .ftree-overview-row__arrow { display: none; }
}

.ftree-ability-box {
  background: rgba(0,212,255,0.06);
  border-right: 3px solid var(--cyan);
  padding: 10px 14px;
  margin: 10px 0;
  border-radius: 4px;
  font-family: var(--font-ar);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-2);
}
.ftree-ability-box strong { color: var(--cyan); }

.ftree-summary {
  font-family: var(--font-ar);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-2);
  margin: 0 0 12px;
  padding: 0 4px;
  position: relative;
  z-index: 1;
}
.ftree-summary strong { color: var(--gold); }

.ftree-sons-list {
  background: rgba(255,192,72,0.06);
  padding: 8px 14px;
  border-radius: 4px;
  font-family: var(--font-ar);
  font-size: 11.5px;
  color: var(--text-2);
  margin-bottom: 12px;
}
.ftree-sons-list strong { color: var(--gold); }

.ftree-patron {
  background: rgba(255,99,99,0.06);
  padding: 8px 14px;
  border-radius: 4px;
  font-family: var(--font-ar);
  font-size: 11.5px;
  color: var(--text-2);
  margin-bottom: 12px;
  border-right: 2px solid var(--coral);
}
.ftree-patron strong { color: var(--coral); }

.ftree-group {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  position: relative;
  z-index: 1;
}
.ftree-group__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan);
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  text-transform: uppercase;
  font-weight: 700;
}
.ftree-block--queen .ftree-group__label { color: var(--gold); }
.ftree-block--mafia .ftree-group__label { color: var(--coral); }
.ftree-block--beyond .ftree-group__label { color: var(--purple, #a78bfa); }

.ftree-group__members {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

/* ═══ MERCENARY TREE ═══ */
.ftree-merc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.ftree-merc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 5px;
}
.ftree-merc-row__assign {
  font-family: var(--font-ar);
  font-size: 11px;
  color: var(--text-2);
  flex: 1;
  line-height: 1.5;
}
.ftree-merc-row__assign strong { color: var(--cyan); }


/* ═══════════════════════════════════════════════════════════ */
/*  CHAPTER XI — DARK CONTINENT STYLES                       */
/* ═══════════════════════════════════════════════════════════ */

.dc-subtitle {
  font-family: var(--font-ar);
  font-size: 18px;
  font-weight: 800;
  color: var(--purple, #a78bfa);
  margin: 28px 0 12px;
  padding-right: 14px;
  border-right: 3px solid var(--purple, #a78bfa);
}

.dc-subtle-intro {
  font-family: var(--font-ar);
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  margin: 0 0 14px;
}

.dc-meta-key {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  min-width: 70px;
  display: inline-block;
}
.dc-meta-val {
  font-family: var(--font-ar);
  font-size: 12px;
  color: var(--text-2);
}
.dc-meta-val--coral { color: var(--coral); font-weight: 700; }

/* ═══ GEO BLOCK ═══ */
.dc-geo-block {
  background: linear-gradient(135deg, rgba(0,212,255,0.04), var(--bg-2));
  border: 1px solid var(--border);
  border-right: 3px solid var(--cyan);
  border-radius: 8px;
  padding: 22px 24px;
  margin: 18px 0;
  position: relative;
  overflow: hidden;
}
.dc-geo-block::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,212,255,0.08), transparent 70%);
  pointer-events: none;
}
.dc-geo-block__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.dc-geo-block__kanji {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 900;
  color: var(--cyan);
  line-height: 1;
  text-shadow: 0 0 25px rgba(0,212,255,0.5);
  flex-shrink: 0;
}
.dc-geo-block__title {
  font-family: var(--font-ar);
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
}
.dc-geo-block__sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 2px;
  margin-top: 3px;
}
.dc-geo-block__intro {
  font-family: var(--font-ar);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-2);
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
}
.dc-geo-block__intro strong { color: var(--cyan); }

.dc-geo-block__zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  position: relative;
  z-index: 1;
}
.dc-geo-zone {
  padding: 12px 14px;
  border-radius: 5px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-top: 2px solid var(--cyan);
}
.dc-geo-zone--safe { border-top-color: var(--green, #4ade80); }
.dc-geo-zone--neutral { border-top-color: var(--gold); }
.dc-geo-zone--danger { border-top-color: var(--coral); background: linear-gradient(180deg, rgba(255,99,99,0.06), var(--bg-3)); }
.dc-geo-zone__name {
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.dc-geo-zone__desc {
  font-family: var(--font-ar);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-2);
}

.dc-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
.dc-guide-item {
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 5px;
  border-right: 2px solid var(--purple, #a78bfa);
}
.dc-guide-item__label {
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 800;
  color: var(--purple, #a78bfa);
  margin-bottom: 5px;
}
.dc-guide-item__desc {
  font-family: var(--font-ar);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0;
}

.dc-warning-box {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(255,99,99,0.1);
  border-right: 3px solid var(--coral);
  border-radius: 4px;
  font-family: var(--font-ar);
  font-size: 12px;
  color: var(--text);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.dc-warning-box strong { color: var(--coral); }

/* ═══ POWER CARDS ═══ */
.dc-powers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.dc-power-card {
  background: linear-gradient(135deg, rgba(255,192,72,0.04), var(--bg-2));
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: 6px;
  padding: 14px 16px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.dc-power-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255,192,72,0.2);
}
.dc-power-card__header {
  border-bottom: 1px dashed var(--border);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.dc-power-card__name {
  font-family: var(--font-ar);
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
}
.dc-power-card__name-en {
  font-family: var(--font-display);
  font-size: 11px;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 1.5px;
  margin-top: 2px;
}
.dc-power-card__continent {
  font-family: var(--font-ar);
  font-size: 11px;
  color: var(--cyan);
  margin-bottom: 4px;
}
.dc-power-card__realworld {
  font-family: var(--font-ar);
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dc-power-card__realworld em { color: var(--gold); font-style: normal; }
.dc-power-card__summary {
  font-family: var(--font-ar);
  font-size: 12px;
  line-height: 1.85;
  color: var(--text-2);
  margin: 0;
}

/* ═══ THREAT CARDS ═══ */
.dc-threats-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.dc-threat-card {
  background: linear-gradient(135deg, rgba(167,139,250,0.06), var(--bg-2));
  border: 1px solid var(--border);
  border-right: 4px solid var(--purple, #a78bfa);
  border-radius: 8px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
.dc-threat-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(167,139,250,0.1), transparent 70%);
  pointer-events: none;
}
.dc-threat-card__header {
  display: grid;
  grid-template-columns: 56px 90px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .dc-threat-card__header { grid-template-columns: 1fr; }
}
.dc-threat-card__kanji {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  color: var(--purple, #a78bfa);
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 25px rgba(167,139,250,0.5);
}
.dc-threat-card__rank-box {
  text-align: center;
  background: var(--bg-3);
  border: 2px solid var(--coral);
  border-radius: 6px;
  padding: 6px;
}
.dc-threat-card__rank-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-3);
  letter-spacing: 1.5px;
}
.dc-threat-card__rank-val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--coral);
  line-height: 1;
}
.dc-threat-card__name {
  font-family: var(--font-ar);
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
}
.dc-threat-card__name-en {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--purple, #a78bfa);
  letter-spacing: 2px;
  margin-top: 2px;
}
.dc-threat-card__title {
  font-family: var(--font-ar);
  font-size: 12px;
  color: var(--gold);
  margin-top: 6px;
  font-style: italic;
}
.dc-threat-card__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: rgba(255,255,255,0.02);
  padding: 12px 14px;
  border-radius: 5px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.dc-threat-card__meta-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding-bottom: 6px;
}
.dc-threat-card__meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.dc-threat-card__desc {
  font-family: var(--font-ar);
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--text-2);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ═══ TREASURE CARDS ═══ */
.dc-treasures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.dc-treasure-card {
  background: linear-gradient(135deg, rgba(255,192,72,0.06), var(--bg-2));
  border: 1px solid var(--border);
  border-right: 3px solid var(--gold);
  border-radius: 7px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: flex-start;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.dc-treasure-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255,192,72,0.2);
}
.dc-treasure-card::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(255,192,72,0.15), transparent 70%);
  pointer-events: none;
}
.dc-treasure-card__kanji {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 0 20px rgba(255,192,72,0.5);
  position: relative;
  z-index: 1;
}
.dc-treasure-card__name {
  font-family: var(--font-ar);
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
}
.dc-treasure-card__name-en {
  font-family: var(--font-display);
  font-size: 11px;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 1.5px;
  margin: 2px 0 8px;
}
.dc-treasure-card__location, .dc-treasure-card__promise {
  font-family: var(--font-ar);
  font-size: 11px;
  color: var(--text-2);
  margin-bottom: 4px;
}
.dc-treasure-card__detail {
  font-family: var(--font-ar);
  font-size: 12px;
  line-height: 1.85;
  color: var(--text-2);
  margin: 8px 0;
}
.dc-treasure-card__result {
  font-family: var(--font-ar);
  font-size: 11.5px;
  color: var(--coral);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  line-height: 1.7;
}
.dc-treasure-card__result strong { color: var(--coral); }

/* ═══ CLASSIFICATION TABLE ═══ */
.dc-classify-table-wrap {
  overflow-x: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  margin: 14px 0;
}
.dc-classify-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ar);
  font-size: 12px;
}
.dc-classify-table th {
  background: var(--bg-3);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 10px 8px;
  text-align: center;
  border-bottom: 2px solid var(--cyan);
}
.dc-classify-table td {
  padding: 8px;
  text-align: center;
  color: var(--text-2);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dc-classify-table__name {
  text-align: right !important;
  font-weight: 700;
  color: var(--text) !important;
}
.dc-classify-table__total {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--gold) !important;
  font-size: 14px;
}
.dc-classify-table__row--baseline { background: rgba(255,99,99,0.05); }
.dc-classify-table__row--baseline .dc-classify-table__name { color: var(--coral) !important; }

.dc-classify-pyramid {
  margin: 22px 0;
  text-align: center;
}
.dc-classify-pyramid__title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.dc-classify-pyramid__row {
  margin: 2px auto;
  padding: 8px 14px;
  font-family: var(--font-ar);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-2);
  border-radius: 3px;
  border-right: 3px solid;
}
.dc-classify-pyramid__row--A { width: 90%; max-width: 700px; border-right-color: var(--coral); background: rgba(255,99,99,0.1); color: var(--coral); }
.dc-classify-pyramid__row--Bp { width: 75%; max-width: 580px; border-right-color: var(--purple, #a78bfa); background: rgba(167,139,250,0.1); }
.dc-classify-pyramid__row--B { width: 60%; max-width: 460px; border-right-color: var(--gold); background: rgba(255,192,72,0.1); }
.dc-classify-pyramid__row--Cp { width: 45%; max-width: 340px; border-right-color: var(--cyan); background: rgba(0,212,255,0.06); }
.dc-classify-pyramid__row--C { width: 30%; max-width: 220px; border-right-color: var(--text-3); }

/* ═══ BOOKS ═══ */
.dc-books-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
.dc-book-card {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-right: 3px solid var(--purple, #a78bfa);
  border-radius: 6px;
  align-items: flex-start;
}
.dc-book-card__icon {
  font-size: 32px;
  text-align: center;
  line-height: 1;
}
.dc-book-card__title {
  font-family: var(--font-ar);
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.dc-book-card__author {
  font-family: var(--font-ar);
  font-size: 11px;
  color: var(--gold);
  margin: 4px 0 8px;
}
.dc-book-card__summary {
  font-family: var(--font-ar);
  font-size: 12px;
  line-height: 1.85;
  color: var(--text-2);
  margin: 0;
}
.dc-book-card__summary strong { color: var(--cyan); }

.dc-trips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.dc-trip-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px dashed var(--border);
  border-radius: 5px;
  align-items: flex-start;
}
.dc-trip-card__century {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan);
  letter-spacing: 1px;
  background: rgba(0,212,255,0.08);
  padding: 6px 8px;
  border-radius: 3px;
  text-align: center;
  font-weight: 700;
}
.dc-trip-card__label {
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 5px;
}
.dc-trip-card__summary {
  font-family: var(--font-ar);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-2);
  margin: 0;
}

/* ═══ TIMELINE ═══ */
.dc-timeline {
  position: relative;
  padding-right: 28px;
  margin: 18px 0 24px;
}
.dc-timeline::before {
  content: '';
  position: absolute;
  right: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--gold), var(--coral));
}
.dc-timeline__item {
  position: relative;
  padding: 12px 18px;
  margin-bottom: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.dc-timeline__dot {
  position: absolute;
  right: -25px;
  top: 18px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--gold);
}
.dc-timeline__year {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--gold);
  font-style: italic;
  display: inline-block;
  margin-left: 12px;
}
.dc-timeline__ago {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 1.5px;
  display: inline-block;
}
.dc-timeline__event {
  font-family: var(--font-ar);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-2);
  margin-top: 4px;
}

/* ═══ FINAL QUOTE ═══ */
.dc-final-quote {
  margin: 28px 0 16px;
  padding: 22px 28px;
  background: linear-gradient(135deg, rgba(167,139,250,0.06), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
  position: relative;
}
.dc-final-quote::before, .dc-final-quote::after {
  content: '"';
  position: absolute;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  color: var(--purple, #a78bfa);
  opacity: 0.3;
  line-height: 1;
}
.dc-final-quote::before { top: 8px; right: 18px; }
.dc-final-quote::after { bottom: 0; left: 18px; transform: scaleX(-1); }
.dc-final-quote p {
  font-family: var(--font-ar);
  font-size: 14px;
  line-height: 1.9;
  color: var(--text);
  font-style: italic;
  margin: 0 0 10px;
}
.dc-final-quote__source {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 1.5px;
}



/* ═══════════════════════════════════════════════════════════ */