/* =========================================================
   NariGule Card v2
   Fancy playful shell + category-driven themes
   Data contract remains from PHP:
   --ngc-bg-start / --ngc-bg-end / --ngc-accent / --ngc-border /
   --ngc-badge-bg / --ngc-chip-bg
   ========================================================= */

.ngc-card {
  /* ---- Per-category theme (PHP-provided, unchanged data contract) ---- */
  --ngc-bg-start: #f1f5f9;
  --ngc-bg-end: #e2e8f0;
  --ngc-accent: #6366f1;
  --ngc-border: #818cf8;
  --ngc-badge-bg: rgba(255, 255, 255, 0.65);
  --ngc-chip-bg: rgba(255, 255, 255, 0.55);

  /* ---- Brand-fixed material tokens (NariGule signature, not per-category) ---- */
  --ngc-frame-1: #f8ecc8;
  --ngc-frame-2: #e3c785;
  --ngc-frame-3: #b98f49;
  --ngc-frame-4: #8f6528;
  --ngc-frame-ink: #5c3f18;
  --ngc-panel-1: #fffaf0;
  --ngc-panel-2: #f6ecd3;
  --ngc-panel-3: #ecdcb6;

--ngc-shield: polygon(
  /* crown — triple-peak silhouette: defined center notch, deep valleys, sharper shoulder peaks */
  50% 2.6%, 53% 0.8%, 57% 2.4%, 64% 3.6%, 72% 1.6%, 80% 0.3%,
  88% 1.9%, 94% 4.6%, 97.6% 7.6%, 100% 12%,
  /* right side — straight run extended to 82% (was 55%) */
  100% 82%,
  /* lower taper — rescaled to converge within the final 18% of height (was 45%) */
  99.5% 84.4%, 99% 86.4%, 97.8% 88.4%, 96% 90.4%, 93.5% 92.2%,
  90.5% 93.8%, 87% 95.2%, 83% 96.4%, 78% 97.4%, 72.5% 98.2%,
  67% 98.9%, 60% 99.4%, 50% 100%,
  /* left taper — mirror */
  40% 99.4%, 33% 98.9%, 27.5% 98.2%, 22% 97.4%, 17% 96.4%, 13% 95.2%,
  9.5% 93.8%, 6.5% 92.2%, 4% 90.4%, 2.2% 88.4%, 1% 86.4%, 0.5% 84.4%,
  /* left side */
  0% 82%, 0% 12%,
  /* left shoulder + crown return */
  2.4% 7.6%, 6% 4.6%, 12% 1.9%, 20% 0.3%, 28% 1.6%, 36% 3.6%,
  43% 2.4%, 47% 0.8%
);

  position: relative;
  display: block;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

.ngc-text-dark,
.ngc-text-light {
  color: var(--ngc-frame-ink);
}

/* =========================================================
   Large shell — FUT-inspired shield frame
   ========================================================= */

.ngc-card--large {
  /* Very slightly wider than the shared .ngc-card default (300px) so the
     corner OVR badge has more room and overlaps the avatar less. Scoped
     to .ngc-card--large only — does not affect .ngc-card--mini or any
     other consumer of the shared base width. */
  max-width: 312px;

  /* Refined shield: straighter mid-side walls, longer vertical run before
     the taper begins, a sharper single-point bottom, and a calmer
     triple-crest crown (fewer inflections, smaller amplitude, less
     "wavy/cartoon" feel than the base shield). Frame-only override —
     does not touch the shared .ngc-card default used elsewhere. */
  --ngc-shield: polygon(
    /* crown — explicit center V-notch, deep valleys, then a distinct
       sharper shoulder peak (the highest point of the whole frame)
       before easing into the long side wall */
      50% 3%, 54% 1%, 58% 2.8%, 65% 4%, 73% 1.8%, 81% 0.5%,
  88% 2.1%, 95% 4.9%, 100% 13%,
  /* right side — straight run extended to 82% (was 62%) */
  100% 82%,
  /* lower taper — rescaled to converge within the final 18% of height (was 38%) */
  99.4% 84.6%, 97.8% 87%, 95.2% 89.1%, 91.5% 91%, 87% 92.8%,
  81.5% 94.3%, 75% 95.6%, 67% 96.9%, 57% 98.1%, 50% 100%,
  /* left taper — mirror */
  43% 98.1%, 33% 96.9%, 25% 95.6%, 18.5% 94.3%, 13% 92.8%,
  8.5% 91%, 4.8% 89.1%, 2.2% 87%, 0.6% 84.6%,
  /* left side */
  0% 82%, 0% 13%,
  /* left shoulder + crown return */
  5% 4.9%, 12% 2.1%, 19% 0.5%, 27% 1.8%, 35% 4%, 42% 2.8%, 46% 1%
  );

  margin-top: 1.25rem;
  filter:
    drop-shadow(0 10px 22px rgba(20, 14, 4, 0.38))
    drop-shadow(0 0 14px color-mix(in srgb, var(--ngc-frame-3) 55%, transparent));
}

.profile-hero .ngc-card--large {
  margin-top: 0;
  filter:
    drop-shadow(0 4px 10px rgba(20, 14, 4, 0.22))
    drop-shadow(0 0 8px color-mix(in srgb, var(--ngc-frame-3) 40%, transparent));
}

/* ---------------------------------------------------------------
   Frame — double-ring gold stroke (outer rim / hairline / inner
   band), built from three stacked layers: (1) .ngc-card__frame
   paints the OUTER gold rim across its full padding box; (2)
   ::before sits inset from that edge and paints the lighter,
   warmer INNER gold band, with its own border forming the hairline
   separator between the two bands; (3) the real .ngc-card__panel
   sits further inset again and, being opaque, covers the center of
   ::before — leaving only ::before's own ring visible between the
   hairline and the panel's edge. Only frame tokens (--ngc-frame-*)
   are used here; --ngc-panel-* (level-driven fill) and the panel's
   own background are untouched. ---------------------------------- */

.ngc-card--large .ngc-card__frame {
  position: relative;
  padding: 5px;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ngc-frame-1) 60%, var(--ngc-frame-2) 40%) 0%,
    var(--ngc-frame-2) 34%,
    var(--ngc-frame-3) 68%,
    var(--ngc-frame-4) 100%
  );
  clip-path: var(--ngc-shield);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 3px rgba(50, 32, 8, 0.26);
}

.ngc-card--large .ngc-card__frame::before {
  content: '';
  position: absolute;
  inset: 2px;
  clip-path: var(--ngc-shield);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ngc-frame-1) 55%, var(--ngc-frame-2) 45%) 0%,
    var(--ngc-frame-2) 58%,
    color-mix(in srgb, var(--ngc-frame-2) 60%, var(--ngc-frame-3) 40%) 100%
  );
  border: 0.85px solid color-mix(in srgb, var(--ngc-frame-ink) 85%, #1c1206 15%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 1.5px rgba(50, 32, 8, 0.2);
  pointer-events: none;
  z-index: 1;
}

.ngc-card--large .ngc-card__panel {
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-height: 400px;
  padding: 1.35rem 1.2rem 1.9rem;
  display: flex;
  flex-direction: column;
  clip-path: var(--ngc-shield);
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.82) 0%, transparent 52%),
    linear-gradient(180deg, var(--ngc-panel-1) 0%, var(--ngc-panel-2) 42%, var(--ngc-panel-3) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 2px 6px rgba(60, 40, 10, 0.1);
}

/* Admin-set custom background (user > level > global priority is resolved
   in PHP; these rules only render whichever result it produced). The PHP
   components already emit --ngc-custom-bg / --ngc-custom-bg-color plus the
   ngc-card--has-image-bg / ngc-card--has-color-bg modifier classes — this
   was previously never consumed anywhere, so the override had no visible
   effect regardless of scope. Higher specificity (3 classes) than the
   base panel rule above guarantees it always wins. */
.ngc-card--large.ngc-card--has-color-bg .ngc-card__panel {
  background: var(--ngc-custom-bg-color);
}

.ngc-card--large.ngc-card--has-image-bg .ngc-card__panel {
  background-image: var(--ngc-custom-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ngc-card--large .ngc-card__panel::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1.55rem;
  width: 2.4rem;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ngc-frame-3) 75%, var(--ngc-frame-ink) 25%),
    transparent
  );
  pointer-events: none;
}

/* =========================================================
   Corner stack (OVR + level) — reference top corner
   ========================================================= */

.ngc-card--large .ngc-card__corner-stack {
  position: absolute;
  top: 2.4rem;
  inset-inline-start: 0.7rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
  color: color-mix(in srgb, var(--ngc-frame-4) 70%, var(--ngc-frame-ink) 30%);
}

.ngc-card--large .ngc-card__corner-stack .ngc-card__ovr-value {
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--ngc-accent) 45%, var(--ngc-frame-4) 55%);
}

.ngc-card--large .ngc-card__corner-stack .ngc-card__ovr-label {
  margin-top: 0.12rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.82;
}

.ngc-card--large .ngc-card__level-line {
  margin-top: 0.42rem;
  padding-top: 0.38rem;
  border-top: 1px solid color-mix(in srgb, var(--ngc-frame-3) 65%, transparent);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.25;
  max-width: 4.2rem;
}

/* =========================================================
   Hero — avatar + identity
   ========================================================= */

.ngc-card--large .ngc-card__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 0.35rem;
  flex: 0 0 auto;
}

.ngc-card--large .ngc-card__avatar-wrap {
  /* Larger, frame-less portrait stage. Explicitly zeroes out the
     border / box-shadow / border-radius / solid background that the
     shared ".ngc-card__avatar-wrap" rule below defines — those are
     what previously made this look like a boxed image container.
     Kept CSS-only and relative/em-based so it scales with the card
     at every breakpoint instead of a fixed-pixel box. */
  position: relative;
  width: 13.6rem;
  height: 13.2rem;
  margin-top: 0.15rem;
  margin-bottom: -0.55rem;
  flex-shrink: 0;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No z-index here on purpose: it stays in normal flow inside
     .ngc-card__hero, below .ngc-card__corner-stack (z-index: 3) and
     ahead of .ngc-card__identity/.ngc-signals in source order, which
     already matches the required background → portrait → overlays →
     identity → stats stacking without introducing a new layer. */
}

.ngc-card--large .ngc-card__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  display: block;
  /* Two mask layers, combined with the browser default compositing
     (plain union/"add" — no `mask-composite: intersect` anywhere).
     Earlier attempts tried to fix the top edge by multiplying a
     second gradient into the outer fade with `mask-composite:
     intersect` (or an equivalent SVG mask). That composite mode is
     exactly the kind of thing that renders inconsistently across
     browsers, and in this card it never actually removed the top
     rectangular boundary while it also wiped out the working
     side/bottom fade. Removed entirely — the real bug was simpler
     than that and didn't need a compositing operator at all:

     Layer 1 (base) — Outer portrait fade. Same radial-gradient
     technique as before, just retuned. The previous ellipse (46%
     66% at 50% 40%) put the box's top edge at only 40/66 ≈ 61% of
     the ellipse's own radius — inside its 0–70% opaque core — so
     the top of the photo was never reaching the fade band at all;
     that's what left a hard rectangular edge above the head. Centering
     the ellipse at 50% 50% with a 50% vertical radius puts *every*
     edge (top, bottom) at exactly 100% of the radius, i.e. right at
     the fully-transparent stop, so all four sides fade out by the
     time they reach the photo boundary. The horizontal radius (46%
     at a 50% center) is unchanged, so the side fade — which was
     already working — is untouched.

     Layer 2 — Head/face "safe zone": the existing hard-edged
     protection ellipse, unchanged. It is simply unioned on top of
     Layer 1 (the default mask behavior when no mask-composite is
     specified), so it unconditionally keeps the head/hair fully
     opaque no matter how Layer 1 fades around it. Because Layer 1 is
     now large enough to already be opaque through most of the head
     area, this union no longer relies on a fragile composite mode to
     look seamless. */
  -webkit-mask-image:
    radial-gradient(46% 50% at 50% 50%, #000 0%, #000 70%, transparent 100%),
    radial-gradient(30% 27% at 50% 33%, #000 100%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image:
    radial-gradient(46% 50% at 50% 50%, #000 0%, #000 70%, transparent 100%),
    radial-gradient(30% 27% at 50% 33%, #000 100%, transparent 100%);
  mask-repeat: no-repeat;
  mask-position: center;
}

.ngc-card--large .ngc-card__avatar-fallback {
  font-size: 2.8rem;
  font-weight: 900;
  color: color-mix(in srgb, var(--ngc-accent) 55%, var(--ngc-frame-ink) 45%);
}

.ngc-card--large .ngc-card__identity {
  width: 100%;
  margin-top: 0.85rem;
}

.ngc-card--large .ngc-card__name {
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--ngc-accent) 45%, var(--ngc-frame-4) 55%);
}

.ngc-card--large .ngc-card__username {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.68;
  margin-top: 0.2rem;
}

/* =========================================================
   OVR block (shared / mini)
   ========================================================= */

.ngc-card__ovr-block {
  max-width: 74px;
  padding: 0.45rem 0.35rem 0.5rem;
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ngc-accent) 20%, white) 0%,
    var(--ngc-badge-bg) 65%
  );
  border: 1.5px solid color-mix(in srgb, var(--ngc-accent) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px color-mix(in srgb, var(--ngc-accent) 28%, transparent),
    0 4px 10px -4px rgba(20, 14, 4, 0.3);
}

.ngc-card__ovr-label {
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  opacity: 0.82;
}

.ngc-card__ovr-value {
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.02;
  color: var(--ngc-accent);
}

.ngc-card__ovr-note {
  font-size: 0.55rem;
  opacity: 0.72;
  margin-top: 0.08rem;
}

/* =========================================================
   Avatar (shared)
   ========================================================= */

.ngc-card__avatar-wrap {
  position: relative;
  width: 118px;
  height: 118px;
  flex-shrink: 0;
  border-radius: 46% 46% 14% 14% / 30% 30% 10% 10%;
  overflow: hidden;
  background: var(--ngc-panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ngc-frame-3);
  box-shadow:
    0 0 0 3px var(--ngc-panel-1),
    0 0 0 5px color-mix(in srgb, var(--ngc-accent) 40%, transparent),
    0 8px 16px -6px rgba(20, 14, 4, 0.35);
}

.ngc-card__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ngc-card__avatar-fallback {
  font-size: 2.35rem;
  font-weight: 900;
  color: color-mix(in srgb, var(--ngc-accent) 65%, #6e4d20 35%);
}

/* =========================================================
   Level badge (shared / mini)
   ========================================================= */

.ngc-card__level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  min-width: 74px;
  padding: 0.5rem 0.45rem;
  text-align: center;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ngc-accent) 18%, white),
    rgba(255, 255, 255, 0.55)
  );
  border: 1.5px solid color-mix(in srgb, var(--ngc-accent) 42%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 4px 12px -6px rgba(20, 14, 4, 0.32);
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1.35;
}

/* =========================================================
   Identity (shared)
   ========================================================= */

.ngc-card__identity {
  width: 100%;
}

.ngc-card__name {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ngc-card__username {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.14rem;
}

/* =========================================================
   Corner badge (legacy)
   ========================================================= */

.ngc-card__corner-badge {
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ngc-accent) 22%, white),
    var(--ngc-badge-bg)
  );
  color: color-mix(in srgb, var(--ngc-accent) 72%, #2f2412 28%);
  border: 1px solid color-mix(in srgb, var(--ngc-accent) 40%, transparent);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 4px 10px -6px rgba(20, 14, 4, 0.35);
}

.ngc-card__corner-badge::before {
  content: '✦';
  font-size: 0.64rem;
  line-height: 1;
}

/* =========================================================
   Theme chip / category chip
   ========================================================= */

.ngc-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.ngc-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.7),
    var(--ngc-chip-bg)
  );
  border: 1px solid color-mix(in srgb, var(--ngc-accent) 28%, transparent);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

/* =========================================================
   Signals — FUT-style 2×3 block
   ========================================================= */

.ngc-card--large .ngc-signals {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  align-content: start;
  gap: 0.58rem 0.2rem;
  width: 100%;
  max-width: 100%;
  margin-top: 0.8rem;
  padding: 0.85rem 0.55rem 1rem;
  direction: rtl;
  border-top: 2px solid color-mix(in srgb, var(--ngc-frame-3) 75%, var(--ngc-frame-ink) 25%);
}

.ngc-card--large .ngc-signals::before {
  content: '';
  position: absolute;
  top: 0.65rem;
  bottom: 0.95rem;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--ngc-frame-3) 82%, var(--ngc-frame-ink) 18%);
}

.ngc-card--large .ngc-signal {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.32rem;
  min-height: 1.65rem;
  min-width: 0;
  padding: 0 0.4rem;
}

/* Bottom row — inset outer corners away from shield taper */
.ngc-card--large .ngc-signal:nth-child(5),
.ngc-card--large .ngc-signal:nth-child(6) {
  padding-block-end: 0.12rem;
}

.ngc-card--large .ngc-signal:nth-child(5) {
  padding-inline-start: 1.15rem;
  padding-inline-end: 0.35rem;
}

.ngc-card--large .ngc-signal:nth-child(6) {
  padding-inline-start: 0.35rem;
  padding-inline-end: 1.15rem;
}

.ngc-card--large .ngc-signal__num {
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ngc-accent) 45%, var(--ngc-frame-4) 55%);
}

.ngc-card--large .ngc-signal__lbl {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--ngc-accent) 30%, var(--ngc-frame-ink) 70%);
}

/* Generic signal fallbacks */
.ngc-signal {
  text-align: center;
}

.ngc-signal__num {
  display: block;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ngc-accent) 65%, var(--ngc-frame-ink) 35%);
}

.ngc-signal__lbl {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 0.18rem;
  color: color-mix(in srgb, var(--ngc-frame-ink) 88%, transparent);
}

/* =========================================================
   Footer note
   ========================================================= */

.ngc-card__footer {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px dashed color-mix(in srgb, var(--ngc-frame-ink) 16%, transparent);
  font-size: 0.62rem;
  opacity: 0.74;
}

/* =========================================================
   Mini card
 /* =========================================================
   Mini card — compact collectible ID, two-tier composition:
   .ngc-mini__panel > .ngc-mini__top (avatar + OVR hero pill)
                    > .ngc-mini__meta (level + category)
   Same gold-frame / cream-panel material language as the large
   card, scoped entirely under .ngc-card--mini / .ngc-mini__*.
   ========================================================= */

.ngc-card--mini {
  position: relative;
  display: block;
  width: 100%;
  max-width: 248px;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 6px;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--ngc-frame-1) 60%, var(--ngc-frame-2) 40%) 0%,
    var(--ngc-frame-2) 40%,
    var(--ngc-frame-3) 78%,
    var(--ngc-frame-4) 100%
  );
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 3px rgba(50, 32, 8, 0.22),
    0 10px 20px -12px rgba(20, 14, 4, 0.45),
    0 2px 6px -2px rgba(20, 14, 4, 0.3);
}

/* Inner gold band + hairline separator — same double-ring technique
   as the large shield frame, adapted to the mini card's rounded
   shape. ::before paints the lighter inner band and its hairline
   border; the opaque .ngc-mini__panel (z-index 2) sits on top and
   covers ::before's center, revealing only its outer ring. */
.ngc-card--mini::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 16px;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--ngc-frame-1) 55%, var(--ngc-frame-2) 45%) 0%,
    var(--ngc-frame-2) 55%,
    color-mix(in srgb, var(--ngc-frame-2) 60%, var(--ngc-frame-3) 40%) 100%
  );
  border: 0.8px solid color-mix(in srgb, var(--ngc-frame-ink) 85%, #1c1206 15%);
  pointer-events: none;
  z-index: 1;
}

/* Tier-based glow ring — reuses the glow_class already output by PHP,
   scoped to mini only so the large card is unaffected. */
.ngc-card--mini.ngc-glow-soft {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 3px rgba(50, 32, 8, 0.22),
    0 10px 20px -12px rgba(20, 14, 4, 0.45),
    0 0 0 2px color-mix(in srgb, var(--ngc-accent) 22%, transparent);
}

.ngc-card--mini.ngc-glow-strong {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 3px rgba(50, 32, 8, 0.22),
    0 10px 22px -12px rgba(20, 14, 4, 0.5),
    0 0 0 2px color-mix(in srgb, var(--ngc-accent) 32%, transparent),
    0 0 18px color-mix(in srgb, var(--ngc-accent) 28%, transparent);
}

.ngc-mini__panel {
  position: relative;
  z-index: 2;
  border-radius: 14px;
  padding: 0.65rem 0.7rem 0.6rem;
  background:
    radial-gradient(ellipse 90% 70% at 28% 12%, rgba(255, 255, 255, 0.65) 0%, transparent 55%),
    linear-gradient(165deg, var(--ngc-panel-1) 0%, var(--ngc-panel-2) 55%, var(--ngc-panel-3) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120, 85, 30, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 2px 5px rgba(60, 40, 10, 0.08);
}

/* Admin-set custom background — same reasoning as the large-card override
   above; nothing previously read --ngc-custom-bg / --ngc-custom-bg-color
   or the has-*-bg modifier classes for the mini card either. */
.ngc-card--has-color-bg .ngc-mini__panel {
  background: var(--ngc-custom-bg-color);
}

.ngc-card--has-image-bg .ngc-mini__panel {
  background-image: var(--ngc-custom-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ngc-mini__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.ngc-mini__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ngc-panel-2);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--ngc-accent) 55%, var(--ngc-frame-ink) 45%);
  box-shadow:
    0 0 0 2.5px var(--ngc-panel-1),
    0 0 0 4px color-mix(in srgb, var(--ngc-accent) 45%, transparent),
    0 4px 10px -4px rgba(20, 14, 4, 0.35);
}

.ngc-mini__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.ngc-mini__ovr-pill {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.05rem;
  padding: 0.28rem 0.5rem 0.32rem;
  border-radius: 12px;
  line-height: 1;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ngc-accent) 24%, white) 0%,
    var(--ngc-badge-bg) 70%
  );
  border: 1.25px solid color-mix(in srgb, var(--ngc-accent) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 4px 10px -5px rgba(20, 14, 4, 0.32);
}

.ngc-mini__ovr-value {
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ngc-accent) 70%, var(--ngc-frame-ink) 30%);
}

.ngc-mini__ovr-label {
  margin-top: 0.05rem;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.78;
}

.ngc-mini__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--ngc-frame-3) 55%, transparent);
}

.ngc-mini__level {
  min-width: 0;
  max-width: 46%;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--ngc-badge-bg);
  color: color-mix(in srgb, var(--ngc-frame-ink) 90%, transparent);
}

.ngc-mini__category {
  min-width: 0;
  max-width: 52%;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--ngc-chip-bg);
  color: color-mix(in srgb, var(--ngc-frame-ink) 88%, transparent);
}

/* =========================================================
   Custom-background readability boost
   Only the theme's own panel gradient guarantees contrast for the
   frame-tinted text below (corner OVR stack, stats, name/username) —
   an admin-set photo or solid color can't make that guarantee. These
   rules only activate when a custom bg is actually applied
   (ngc-card--has-image-bg / ngc-card--has-color-bg), so default
   theme cards are completely unaffected.
   ========================================================= */

.ngc-card--large.ngc-card--has-image-bg .ngc-card__corner-stack,
.ngc-card--large.ngc-card--has-color-bg .ngc-card__corner-stack {
  padding: 0.3rem 0.55rem 0.4rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ngc-panel-1) 45%, transparent);
  box-shadow: 0 2px 8px rgba(20, 14, 4, 0.22);
}

.ngc-card--large.ngc-card--has-image-bg .ngc-card__corner-stack .ngc-card__ovr-value,
.ngc-card--large.ngc-card--has-color-bg .ngc-card__corner-stack .ngc-card__ovr-value,
.ngc-card--large.ngc-card--has-image-bg .ngc-card__corner-stack .ngc-card__ovr-label,
.ngc-card--large.ngc-card--has-color-bg .ngc-card__corner-stack .ngc-card__ovr-label,
.ngc-card--large.ngc-card--has-image-bg .ngc-card__level-line,
.ngc-card--large.ngc-card--has-color-bg .ngc-card__level-line {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.ngc-card--large.ngc-card--has-image-bg .ngc-signals,
.ngc-card--large.ngc-card--has-color-bg .ngc-signals {
  border-radius: 14px;
  background: color-mix(in srgb, var(--ngc-panel-1) 34%, transparent);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 10px rgba(20, 14, 4, 0.16);
}

.ngc-card--large.ngc-card--has-image-bg .ngc-signal__num,
.ngc-card--large.ngc-card--has-color-bg .ngc-signal__num,
.ngc-card--large.ngc-card--has-image-bg .ngc-signal__lbl,
.ngc-card--large.ngc-card--has-image-bg .ngc-signal__lbl {
  color: color-mix(in srgb, var(--ngc-accent) 35%, var(--ngc-frame-ink) 65%);
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.18);
}

/* ---------------------------------------------------------------
   Name / username adaptive contrast
   A photo's actual brightness under the name isn't knowable in CSS
   (and pixel-sampling it would be over-engineering for this fix), so
   images always get the safe universal fallback: a light frosted chip
   behind the identity block with dark ink text — a light translucent
   panel reads fine against nearly any photo underneath it.
   Solid colors are different: PHP already knows the exact hex, so
   ngc-card--bg-dark / ngc-card--bg-light (set alongside
   ngc-card--has-color-bg) let the chip + text actually adapt to match
   that color instead of always pasting on a pale patch.
   --------------------------------------------------------------- */
.ngc-card--large.ngc-card--has-image-bg .ngc-card__identity,
.ngc-card--large.ngc-card--has-color-bg .ngc-card__identity {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.3rem 0.85rem 0.4rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ngc-panel-1) 45%, transparent);
  box-shadow: 0 2px 8px rgba(20, 14, 4, 0.18);
}

.ngc-card--large.ngc-card--has-color-bg.ngc-card--bg-dark .ngc-card__identity {
  background: color-mix(in srgb, var(--ngc-frame-ink) 33%, black 9%);
}

.ngc-card--large.ngc-card--has-color-bg.ngc-card--bg-dark .ngc-card__name,
.ngc-card--large.ngc-card--has-color-bg.ngc-card--bg-dark .ngc-card__username {
  color: #f8f4ea;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Mini card already backs its OVR pill / level / category chips with
   --ngc-badge-bg / --ngc-chip-bg, but bump opacity + add text-shadow
   when a custom bg sits directly behind them. */
.ngc-card--mini.ngc-card--has-image-bg .ngc-mini__ovr-pill,
.ngc-card--mini.ngc-card--has-color-bg .ngc-mini__ovr-pill {
  background: color-mix(in srgb, var(--ngc-panel-1) 45%, transparent);
}

.ngc-card--mini.ngc-card--has-image-bg .ngc-mini__level,
.ngc-card--mini.ngc-card--has-color-bg .ngc-mini__level,
.ngc-card--mini.ngc-card--has-image-bg .ngc-mini__category,
.ngc-card--mini.ngc-card--has-color-bg .ngc-mini__category {
  background: color-mix(in srgb, var(--ngc-panel-1) 45%, transparent);
}

/* =========================================================
   Profile hero union (public/u.php glue)
   ========================================================= */

.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 620px;
  margin: 0 auto 1.25rem;
  padding: clamp(0.75rem, 2.5vw, 1rem);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

body[class*="theme-"] .profile-hero {
  background: var(--t-surface);
  border-color: var(--t-border);
}

.profile-hero__card {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  direction: rtl;
}

.profile-hero__summary.profile-card {
  direction: rtl;
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid #ebe6dc;
  padding: clamp(0.85rem, 3vw, 1.1rem) clamp(1rem, 3vw, 1.35rem) clamp(1.25rem, 3vw, 1.75rem);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body[class*="theme-"] .profile-hero__summary.profile-card {
  border-top-color: color-mix(in srgb, var(--t-border) 70%, #ebe6dc 30%);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 720px) {
  .profile-hero {
    padding: clamp(0.65rem, 2.5vw, 0.85rem) clamp(0.75rem, 3vw, 1rem);
  }

  .profile-hero__card {
    padding: 0 0 clamp(0.2rem, 1.5vw, 0.35rem);
  }
}

@media (max-width: 400px) {
  .ngc-card { max-width: 270px; }

  .ngc-card--large .ngc-card__panel {
    min-height: 370px;
    padding: 1.15rem 1rem 2.4rem;
  }

  .profile-hero__summary.profile-card {
    padding: 0.8rem 1.35rem 1.75rem;
  }

  .ngc-card--large .ngc-card__avatar-wrap {
    width: 11.6rem;
    height: 11.3rem;
    margin-top: -0.85rem;
    margin-bottom: -0.4rem;
  }

  .ngc-card--large .ngc-card__avatar-fallback {
    font-size: 2.35rem;
  }

  .ngc-card--large .ngc-card__corner-stack .ngc-card__ovr-value {
    font-size: 2rem;
  }

  .ngc-card--large .ngc-card__name {
    font-size: 1.05rem;
  }

  .ngc-card--large .ngc-signal__num {
    font-size: 1.12rem;
  }

  .ngc-card--large .ngc-signal__lbl {
    font-size: 0.64rem;
  }

  .ngc-card--large .ngc-signals {
    gap: 0.48rem 0.15rem;
    padding: 0.7rem 0.45rem 1.2rem;
  }

  .ngc-card--large .ngc-signal:nth-child(5) {
    padding-inline-start: 0.8rem;
    padding-inline-end: 0.3rem;
  }

  .ngc-card--large .ngc-signal:nth-child(6) {
    padding-inline-start: 0.3rem;
    padding-inline-end: 0.8rem;
  }
  .ngc-card--mini {
    max-width: 100%;
  }

  .ngc-mini__panel {
    padding: 0.55rem 0.6rem 0.55rem;
  }

  .ngc-mini__avatar {
    width: 46px;
    height: 46px;
    font-size: 1.02rem;
  }

  .ngc-mini__ovr-value {
    font-size: 1.12rem;
  }
}
/* =========================================================
   Level stars — 1/2/3/4 stars, based on level tier
   (تازه‌کار=1 .. اسطوره=4).
   Positioned to sit on the avatar's top curve rather than the
   outer card/frame top. Purely additive overlay; does not alter
   any existing element, layout, or spacing.
   ========================================================= */
.ngc-card__stars,
.ngc-mini__stars {
  position: absolute;
  display: flex;
  gap: 2px;
  z-index: 5;
  pointer-events: none;
}

/* Large card: avatar-wrap is horizontally centered inside the panel
   (see .ngc-card--large .ngc-card__hero), so centering on the card
   also centers on the avatar. top ≈ frame padding + panel padding-top
   + hero padding-top, i.e. just above the avatar's top curve. */
.ngc-card--large .ngc-card__stars {
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
}

/* Mini card: the avatar sits on the flex-start side of .ngc-mini__top
   (right side in this RTL layout), not centered on the card, so the
   stars are anchored to the avatar's own horizontal center — offset
   from the card's right edge = outer padding (6px) + panel right
   padding (0.7rem) + half the avatar width (26px) — rather than the
   card's center. top sits just above the avatar's top curve
   (outer padding 6px + panel top padding 0.65rem). */
.ngc-card--mini .ngc-mini__stars {
  top: 9px;
  right: 43px;
  transform: translateX(50%);
}

.ngc-card__stars .ngc-star,
.ngc-mini__stars .ngc-star {
  line-height: 1;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 0 1px rgba(0, 0, 0, 0.6);
}

.ngc-mini__stars .ngc-star {
  font-size: 0.88rem;
}

.ngc-card--large .ngc-star {
  font-size: 1.08rem;
}