/* ═══════════════════════════════════════════════════════════════
   THE NEXUS CARD — extracted verbatim from nexus_card_forge_v16.html
   (visuals unchanged; editor-only styles omitted)
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=IM+Fell+English:ital@0;1&family=Cinzel:wght@400;600;700&family=Cinzel+Decorative:wght@400;700&family=Spectral:wght@300;400;600;700&family=Josefin+Sans:wght@300;600&display=swap');

.card-wrap{perspective:900px;display:inline-block;}

.nx{
  width:280px;
  aspect-ratio:5/7;
  border-radius:4.5%/3.2%;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  box-shadow:0 8px 28px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.5);
  transition:box-shadow .1s;
  --mx:50%;--my:50%;--o:0;
}
.nx:hover{box-shadow:0 16px 48px rgba(0,0,0,.9),0 4px 12px rgba(0,0,0,.6);}

/* ── LAYER 0: Art/background ── */
.nx-art{
  position:absolute;inset:0;z-index:0;
  background-size:cover;
  background-repeat:no-repeat;
}
/* imageless card → a large glyph on a LIGHT medallion so it's legible on the
   dark card whether it's a colorful emoji or a mono symbol like ∂ / ∑ */
.nx-art-glyph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:86px;line-height:1;color:#241c10;
  background:radial-gradient(circle at 50% 47%, rgba(242,237,224,.97) 0%, rgba(226,220,202,.75) 40%, rgba(226,220,202,0) 66%);
}

/* ── HOLO LAYERS (Simey technique) ── */
.nx-shine{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,
      hsla(2,100%,55%,.8) 0%, hsla(55,100%,55%,.8) 14.2%,
      hsla(120,100%,55%,.8) 28.5%, hsla(185,100%,55%,.8) 42.8%,
      hsla(240,100%,55%,.8) 57.1%, hsla(300,100%,55%,.8) 71.4%,
      hsla(2,100%,55%,.8) 100%),
    repeating-linear-gradient(133deg,
      #0c1228 0%, hsl(180,12%,56%) 3.8%,
      hsl(180,29%,62%) 4.5%, hsl(180,12%,56%) 5.2%,
      #0c1228 10%, #0c1228 12%);
  background-blend-mode:color-dodge;
  background-size:500% 500%,300% 300%;
  background-position:var(--mx) var(--my);
  mix-blend-mode:color-dodge;
  opacity:var(--o,0);
  filter:brightness(.8) contrast(2.8) saturate(.72);
  border-radius:inherit;
}
.nx-glare{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(farthest-corner ellipse at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.88) 0%,rgba(255,255,255,.3) 12%,
    rgba(0,0,0,.45) 55%,rgba(0,0,0,.88) 100%);
  mix-blend-mode:overlay;
  opacity:calc(var(--o,0)*.5);
  border-radius:inherit;
}
.nx-sparkle{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background-size:180px 180px;
  background-position:var(--spx,50%) var(--spy,50%);
  mix-blend-mode:color-dodge;
  opacity:calc(var(--o,0)*.7);
  border-radius:inherit;
}

/* ── FRAME (tier border, rendered above holo) ── */
.nx-frame{
  position:absolute;inset:0;z-index:20;pointer-events:none;
  border-radius:inherit;
}

/* ── CONTENT (above everything) ── */
.nx-cont{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;}

/* ═══ CLASSIC MODE ═══ */
.nx.classic .nx-art{display:none;}
.nx.classic .nx-cont{flex-direction:column;}
.hdr-band{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;flex-shrink:0;
  height:50px;
}
/* long titles clamp INSIDE the header band instead of spilling onto the
   image below (the fitter shrinks single long words; this catches the
   multi-word ones like "Congress of the Chinese Communist Party") */
.hdr-band .card-title,.fa-hdr .card-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.12;
}
.img-win{
  flex-shrink:0;
  position:relative;
  overflow:hidden;
  margin:0 9px;
}
/* bias the crop toward the top — portraits (Mao, Miki…) kept losing their
   heads to a centered cover. Fullart uses the same crop for its .nx-art. */
.img-win img,.nx-art img{object-position:50% 18% !important;}
.body-zone{
  flex:1;padding:6px 10px 8px;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
}

/* ═══ FULL ART MODE ═══ */
.nx.fullart .img-win{display:none;}
.nx.fullart .body-zone{display:none;}
.nx.fullart .nx-art{display:block;}

.fa-top{
  position:absolute;top:0;left:0;right:0;z-index:8;
  height:58px;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(4,3,14,.82) 0%,rgba(4,3,14,.6) 55%,transparent 100%);
}
.fa-bot{
  position:absolute;bottom:0;left:0;right:0;z-index:8;
  height:44%;pointer-events:none;
  background:linear-gradient(to top,
    rgba(4,3,14,.97) 0%,rgba(4,3,14,.9) 18%,
    rgba(4,3,14,.72) 38%,rgba(4,3,14,.4) 58%,
    transparent 100%);
}
.nx.classic .fa-top,.nx.classic .fa-bot{display:none;}
.fa-hdr{
  position:absolute;top:0;left:0;right:0;z-index:9;
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  /* anchor the title near the top and let a long name ("The Walt Disney
     Company") grow DOWN over the art instead of clipping off the top edge */
  padding:9px 10px 0;min-height:50px;
}
.fa-text{
  position:absolute;bottom:0;left:0;right:0;z-index:9;
  padding:0 10px 8px;
  display:flex;flex-direction:column;justify-content:flex-end;
  height:44%;
}
/* theme/palette tint fading up from the card base (under the text plate) —
   this is where the chosen BACKGROUND shows on a full-art card */
.fa-tint{
  position:absolute;bottom:0;left:0;right:0;height:48%;z-index:8;pointer-events:none;opacity:.85;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.75) 45%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.75) 45%,transparent 100%);
}
.nx.classic .fa-tint{display:none;}
.nx.classic .fa-hdr,.nx.classic .fa-text{display:none;}
/* BARE full-art (no words at all — unconsecrated Sacreds): the tint
   collapses to a footer strip; no floating empty text plate */
.nx.fullart.fa-bare .fa-tint{height:14%;}
.nx.fullart.fa-bare .fa-text{height:auto;}
.nx.fullart .hdr-band,.nx.fullart .img-win,.nx.fullart .body-zone{display:none;}

/* full-art readability: the text carries its own plate + shadow so it reads
   over ANY art (a bright icon was swallowing the title and excerpt) */
.nx.fullart .fa-hdr .card-title{
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.8),0 0 3px rgba(0,0,0,.9);
}
.nx.fullart .fa-text .card-excerpt{
  background:rgba(4,3,12,.58);
  backdrop-filter:blur(3px);
  border-radius:6px;
  padding:6px 9px;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.nx.fullart .fa-text .card-dates{text-shadow:0 1px 3px rgba(0,0,0,.9);}

/* ═══ CONTENT ELEMENTS ═══ */
.tier-badge{
  font-family:'Cinzel',serif;font-size:6px;letter-spacing:.7px;
  text-transform:uppercase;border-radius:3px;padding:3px 6px;
  border:1px solid;background:rgba(0,0,0,.5);
  white-space:normal;line-height:1.35;max-width:64px;
}
.tier-badge .tb-top{display:block;font-size:5.5px;opacity:.65;letter-spacing:.5px;font-weight:600;white-space:nowrap;}
/* keep the tier NAME to ~one word per line so "Extended Commons" stacks as
   two short lines instead of one wide banner that crowds the title */
.tier-badge .tb-name{display:block;font-size:7.5px;letter-spacing:.5px;font-weight:700;max-width:54px;}

.img-win.is-png{background:#ececec;}
.nx-art.is-png{background:#ececec;}

.card-title.frame-dark{background:rgba(0,0,0,.62);backdrop-filter:blur(5px);border-radius:3px;display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-shadow:none;}
.card-title.frame-light{background:rgba(255,255,255,.22);backdrop-filter:blur(5px);border-radius:3px;display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-shadow:none;}
.card-excerpt.frame-dark{background:rgba(0,0,0,.62);backdrop-filter:blur(6px);border-radius:5px;}
.card-excerpt.frame-light{background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border-radius:5px;}
.dom-seal{
  width:30px;height:30px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:14px;
  border:1.5px solid;background:rgba(0,0,0,.45);flex-shrink:0;
}
.card-title{
  font-family:'Spectral',serif;font-weight:600;
  font-size:17px;line-height:1.15;
  color:#4a90d9;
  text-decoration:none;
  outline:none;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.9),
     1px -1px 0 rgba(0,0,0,.9),
    -1px  1px 0 rgba(0,0,0,.9),
     1px  1px 0 rgba(0,0,0,.9),
     0 2px 6px rgba(0,0,0,.95),
     0 0 16px rgba(0,0,0,.7);
}
.card-dates{
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.2px;
  opacity:.65;outline:none;margin-top:2px;
}
.card-div{height:.5px;margin:3px 0;opacity:.3;background:linear-gradient(to right,transparent,currentColor,transparent);}
.card-excerpt{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:14px;color:rgba(230,226,214,.82);line-height:1.42;
  outline:none;flex:1;overflow:hidden;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.card-foot{
  display:flex;justify-content:space-between;align-items:flex-end;
  border-top:.5px solid rgba(255,255,255,.06);padding-top:4px;margin-top:4px;
}
.card-inscr{font-family:'IM Fell English',serif;font-style:italic;font-size:8px;color:rgba(201,185,122,.58);}
.card-edn{font-family:'Cinzel',serif;font-size:6px;letter-spacing:.8px;}
.card-dom-lbl{font-family:'Cinzel',serif;font-size:6px;letter-spacing:.8px;opacity:.85;}

/* ═══ TIER-SPECIFIC FRAMES ═══ */
.nx[data-tier=sacred] .nx-frame{
  border:3px solid #c9b97a;
  box-shadow:
    inset 0 0 0 1px rgba(201,185,122,.25),
    inset 0 0 0 4px rgba(0,0,0,.6),
    0 0 28px rgba(201,185,122,.5),
    0 0 72px rgba(201,185,122,.2);
  animation:sacredGlow 3.5s ease-in-out infinite;
}
@keyframes sacredGlow{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(201,185,122,.25),inset 0 0 0 4px rgba(0,0,0,.6),0 0 28px rgba(201,185,122,.5),0 0 72px rgba(201,185,122,.2);}
  50%{box-shadow:inset 0 0 0 1px rgba(201,185,122,.45),inset 0 0 0 4px rgba(0,0,0,.5),0 0 48px rgba(201,185,122,.75),0 0 120px rgba(201,185,122,.35);}
}
.nx[data-tier=sacred] .nx-frame::after{
  content:'';position:absolute;inset:4px;
  border-radius:3%/2.2%;border:.5px solid rgba(201,185,122,.2);pointer-events:none;
}
.nx-corner{position:absolute;width:18px;height:18px;z-index:21;pointer-events:none;opacity:0;}
.nx[data-tier=sacred] .nx-corner{opacity:1;}
.nx-corner.tl{top:6px;left:6px;}
.nx-corner.tr{top:6px;right:6px;transform:scaleX(-1);}
.nx-corner.bl{bottom:6px;left:6px;transform:scaleY(-1);}
.nx-corner.br{bottom:6px;right:6px;transform:scale(-1,-1);}

/* data-holo="1" = EARNED shimmer (sv._holo — a first-Daily-win Genesis,
   tournament prizes): Sacred-grade always-on holo at any tier */
.nx[data-tier=sacred] .nx-shine,
.nx[data-holo="1"] .nx-shine{
  opacity:.2;
  animation:sacredShim 8s linear infinite;
}
@keyframes sacredShim{0%{background-position:0% 50%;}100%{background-position:100% 50%;}}
.nx[data-tier=sacred] .nx-glare,
.nx[data-holo="1"] .nx-glare{opacity:calc(.2*.5);}
.nx[data-tier=sacred] .nx-sparkle,
.nx[data-holo="1"] .nx-sparkle{opacity:calc(.2*.7);}

.nx[data-tier=sacred] .card-title{
  color:#d4c070;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.9),
     1px -1px 0 rgba(0,0,0,.9),
    -1px  1px 0 rgba(0,0,0,.9),
     1px  1px 0 rgba(0,0,0,.9),
     0 2px 8px rgba(0,0,0,.95),
     0 0 24px rgba(201,185,122,.3);
}
.nx[data-tier=sacred] .hdr-band{background:linear-gradient(to right,#1a1004 0%,#241808 50%,#1a1004 100%);}
.nx[data-tier=sacred] .dom-seal{border-color:#c9b97a;background:rgba(201,185,122,.1);width:34px;height:34px;font-size:16px;}

.nx[data-tier=great] .nx-frame{border:2px solid #a8b8c8;box-shadow:0 0 12px rgba(168,184,200,.18);}
.nx[data-tier=core] .nx-frame{border:1.5px solid #9a7840;}
.nx[data-tier=extended] .nx-frame{border:1px solid #7a5030;}
.nx[data-tier=frontier] .nx-frame{border:1.5px solid #b08858;box-shadow:0 0 8px rgba(176,136,88,.18);}
.nx[data-tier=wild] .nx-frame{border:1px solid rgba(255,255,255,.05);}

.nx.classic[data-tier=sacred] .img-win{border:2px solid #c9b97a;box-shadow:0 0 12px rgba(201,185,122,.2);}
.nx.classic[data-tier=great] .img-win{border:2px solid #a8b8c8;}
.nx.classic[data-tier=core] .img-win{border:1.5px solid #7a6030;}
.nx.classic[data-tier=extended] .img-win{border:1px solid #5a4020;}
.nx.classic[data-tier=frontier] .img-win{border:1px solid #8a6840;}
.nx.classic[data-tier=wild] .img-win{border:1px solid #2a2838;}

/* Classic: holo clipped to image window only (Simey technique) */
.nx.classic .nx-shine{clip-path:inset(54px 9px calc(44% - 2px) 9px round 3px);}
.nx.classic .nx-glare{clip-path:inset(54px 9px calc(44% - 2px) 9px round 3px);}
.nx.classic .nx-sparkle{clip-path:inset(54px 9px calc(44% - 2px) 9px round 3px);}
.nx.classic[data-tier=sacred] .nx-shine,
.nx.classic[data-tier=sacred] .nx-glare,
.nx.classic[data-tier=sacred] .nx-sparkle,
.nx.classic[data-holo="1"] .nx-shine,
.nx.classic[data-holo="1"] .nx-glare,
.nx.classic[data-holo="1"] .nx-sparkle{clip-path:none;}
.nx.fullart .nx-shine,.nx.fullart .nx-glare,.nx.fullart .nx-sparkle{clip-path:none;}

.nx.classic[data-tier=sacred] .hdr-band{background:linear-gradient(135deg,#1a1004,#241808,#1a1004);}
.nx.classic[data-tier=sacred] .body-zone{background:linear-gradient(to bottom,#0e0a04,#141008);}

.nx[data-tier=wild]     .tier-badge{border-color:rgba(120,120,180,.4);}
.nx[data-tier=wild]     .tier-badge .tb-name{color:#9898c8;}
.nx[data-tier=wild]     .tier-badge .tb-top{color:#7070a0;}
.nx[data-tier=frontier] .tier-badge .tb-name{color:#d4a870;}
.nx[data-tier=extended] .tier-badge .tb-name{color:#aa7850;}

/* ── OWNER MONOGRAM ── */
.card-monogram{
  width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:7px;font-weight:700;
  color:rgba(255,255,255,.5);
  background:rgba(0,0,0,.3);
  flex-shrink:0;letter-spacing:.3px;
  transition:border-color .2s;
}
.nx[data-tier=sacred] .card-monogram{
  border-color:rgba(201,185,122,.45);color:rgba(201,185,122,.7);
}
.nx[data-tier=great]   .card-monogram{border-color:rgba(168,184,200,.35);}
.nx[data-tier=frontier] .card-monogram,.nx[data-tier=wild] .card-monogram{border-color:rgba(255,255,255,.1);}

/* ── MINI (collection thumbnail) ── */
.mini{width:100%;aspect-ratio:5/7;border-radius:5px;position:relative;overflow:hidden;cursor:pointer;transition:transform .13s;}
.mini:hover{transform:translateY(-2px);}
.mini-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 55%);padding:6px;display:flex;flex-direction:column;justify-content:flex-end;}
.mini-ttl{font-family:'Spectral',serif;font-size:12px;color:#e0dcce;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.mini-tier{font-size:7px;margin-top:1px;opacity:.7;font-family:'Cinzel',serif;}

/* ── ROUND CARDS (prototype — enable with ?round=1) ─────────────
   "The full card, inside a circle." Squares the 5:7 card and clips it to a
   disc: the art fills the circle, the tier RING becomes the frame (so the
   corner tier-badge, now outside the disc, is dropped — the ring already
   encodes tier), and the title + excerpt are centred and pulled off the
   sliced top/bottom arcs. Fullart cards read best round. Reversible: it's
   pure CSS gated on the body class. */
body.round-cards .nx{aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.5);}
body.round-cards .nx-frame{border-radius:50%;}
body.round-cards .nx-shine,body.round-cards .nx-glare,body.round-cards .nx-sparkle{border-radius:50%;clip-path:none;}
body.round-cards .nx-corner{display:none;}
body.round-cards .nx.fullart .fa-hdr{top:9%;padding:0 17%;justify-content:center;text-align:center;min-height:0;}
body.round-cards .nx.fullart .fa-hdr .tier-badge{display:none;}
body.round-cards .nx.fullart .fa-text{bottom:9%;height:auto;max-height:34%;padding:0 15%;text-align:center;}
/* mini collection thumbnails go round too, so the Forge collection matches */
body.round-cards .mini{aspect-ratio:1;border-radius:50%;}

/* ── Locus starfield overlay — unified card/glyph face (7/10) ──
   Sits over the art (z0), under the holo layers (z3+) and text plates.
   Screen blend so the field glows against the photo instead of occluding;
   --glyph-blend is the glyph↔image dial (future user setting). */
.nx-locus{
  position:absolute;top:22px;left:0;width:280px;height:280px;z-index:1;
  pointer-events:none;mix-blend-mode:screen;
  opacity:0;transition:opacity .6s ease;
}
/* turned down (Chairman 7/10: "i kinda like it but… it needs to be turned
   down") — a subtle node-dust texture over the photo, not a dominant layer.
   --glyph-blend stays the dial for the future glyph↔image slider. */
.nx-locus.on{opacity:var(--glyph-blend,.4);}
.nx.classic .nx-locus{display:none;}