/* ════════════════════════════════════════════════════════════
   NEN CODEX · PERF OPTIMIZATIONS
   ─ content-visibility lets the browser skip layout/paint of
     off-screen cards. Massive win for the 197 char cards and
     154 GI cards rendered simultaneously.
   ─ contain-intrinsic-size reserves their space so the scrollbar
     doesn't jump when cards enter/leave the viewport.
   ─ Loaded LAST so it overrides any earlier rule.
   ════════════════════════════════════════════════════════════ */

/* Cards that the browser can skip rendering until they're near the viewport. */
.cc,
.gi-card,
.dc-threat-card,
.dc-treasure-card,
.dc-power-card,
.dc-book-card,
.prince-card,
.queen-card,
.mafia-card,
.ftree-card,
.death-case {
  content-visibility: auto;
  /* Approximate height so the page doesn't jitter as cards mount/unmount.
     The grid is auto-fill so cards vary, but this is a good average. */
  contain-intrinsic-size: 0 360px;
}

/* Tight intrinsic size for the small grid cells. */
.gi-card { contain-intrinsic-size: 0 240px; }

.cc__ability-name {
  color: #f8fbff;
  line-height: 1.65;
}

.cc__type-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 0 0 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--cc-clr, var(--cyan));
  color: #dbe8f7;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.cc__type-note span {
  color: var(--cc-clr, var(--cyan));
  font-weight: 900;
}

.cc__ability-detail {
  color: #eef4ff;
  background: rgba(238, 244, 255, 0.045);
  border: 1px solid rgba(238, 244, 255, 0.11);
  border-inline-start: 3px solid var(--cc-clr, var(--cyan));
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 2.05;
  text-align: start;
  white-space: normal;
}

.cc__ability-detail strong,
.cc__ability-detail em {
  color: var(--cc-clr, var(--cyan));
  font-weight: 800;
}

.cc__ability-heading {
  display: inline-block;
  margin: 6px 0 4px;
  color: var(--cc-clr, var(--cyan));
  font-weight: 900;
  line-height: 1.75;
}

.cc__ability-term {
  display: inline;
  font-weight: 900;
}

.cc__ability-term--enh { color: var(--enh); }
.cc__ability-term--trn { color: var(--trn); }
.cc__ability-term--emi { color: var(--emi); }
.cc__ability-term--mat { color: var(--mat); }
.cc__ability-term--man { color: var(--man); }
.cc__ability-term--spc { color: var(--spc); }

/* Promote heavy animated/transformed elements to their own layer so
   their repaints don't invalidate neighbors. */
.cc:hover,
.gi-card:hover,
.hero__toc-item:hover {
  will-change: transform;
}

/* Reduce backdrop-filter cost on mobile — it's GPU-expensive and not
   visually critical there. */
@media (max-width: 768px) {
  .pt-bar,
  .edit-toolbar,
  .gi-modal__inner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* fall back to a slightly more opaque solid color */
  }
  .pt-bar { background: rgba(6, 6, 11, 0.95) !important; }
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 8px;
}

.load-more-wrap[hidden] { display: none !important; }

.load-more-btn {
  border: 1px solid rgba(255, 192, 72, 0.62);
  background: rgba(255, 192, 72, 0.08);
  color: var(--gold, #ffc048);
  min-height: 44px;
  padding: 0 22px;
  border-radius: 8px;
  font-family: var(--font-ar, inherit);
  font-weight: 800;
  cursor: pointer;
}

.load-more-btn:hover,
.load-more-btn:focus-visible {
  background: rgba(255, 192, 72, 0.16);
  outline: none;
}

@media (max-width: 768px) {
  html { scroll-behavior: auto !important; }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .aurora,
  .hero__orb,
  .type-card__glow,
  .ch-kanji-bg,
  .princ-aura-pulse,
  .princ-aura-spin,
  .princ-aura-fade,
  .princ-aura-drift {
    display: none !important;
  }

  .topbar,
  .side-rail,
  .to-top,
  .gi-modal__inner,
  .pt-bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .reveal,
  .reveal-stagger > *,
  .cc,
  .gi-card,
  .type-card,
  .princ-card,
  .hero__toc-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .cc,
  .gi-card,
  .type-card,
  .princ-card,
  .hero__toc-item {
    box-shadow: none !important;
    will-change: auto !important;
  }

  .load-more-wrap { padding: 14px 0 4px; }
  .load-more-btn { width: min(100%, 320px); }

  .cc__ability-detail {
    padding: 12px;
    font-size: 14px;
    line-height: 1.95;
  }

  .cc__type-note {
    max-width: 100%;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}