/* Live-rendered card fronts (js/cardface.js). Cards are size containers: 100cqw = card width.
   Frame art: assets/frames/<set>.webp (600x840, art window cut out). Layout: assets/frames/layout.json. */
.card .face.lcf { background: #140c24; border-radius: 4.9cqw; font-family: var(--font-card); color: #2a1a0a; }
.card .face.lcf > .art { position: absolute; inset: auto; object-fit: cover; object-position: 50% 50%; z-index: 0; background: #2a1d3f; }
.card .face.lcf .cf-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; user-select: none; }
.card .face.lcf > .cf-name, .card .face.lcf > .cf-cost, .card .face.lcf > .cf-type, .card .face.lcf > .cf-rules, .card .face.lcf > .cf-promo { position: absolute; z-index: 2; pointer-events: none; }

/* name plate */
.lcf .cf-name { left: 5.2%; top: 4.51%; width: 61.3%; height: 10.36%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; line-height: 1.02; white-space: nowrap; color: #2a1a0a; text-shadow: 0 .15cqw 0 rgba(255, 244, 214, .7); letter-spacing: .01em; }
.lcf .cf-name span { display: block; flex: none; }
.lcf .cf-name.cf-2l span + span { margin-top: .2cqw; }
.lcf.cf-tiny .cf-name .cf-ep { font-style: italic; color: #4a321a; }

/* cost numeral on the crystal */
.lcf .cf-cost { left: 89.58%; top: 6.17%; transform: translate(-50%, -46%); font-family: var(--font-title); font-weight: 900; font-size: 12.6cqw; line-height: 1;
  color: #fbe7b4; -webkit-text-stroke: 1.1cqw #4a3208; paint-order: stroke fill; text-shadow: 0 .5cqw 1.2cqw rgba(20, 6, 40, .75), 0 0 2.5cqw rgba(255, 220, 140, .35); }
.lcf .cf-cost.cf-less { color: #caff9c; text-shadow: 0 0 3cqw rgba(140, 255, 90, .9), 0 .5cqw 1.2cqw rgba(0, 0, 0, .7); }
.lcf .cf-cost.cf-more { color: #ffb4a8; }
.lcf.cf-tiny .cf-cost { font-size: 15cqw; }
/* ui.js appends .costmod (the in-hand cost after Signature discounts): show it on the gem instead of a green disc */
.card .face.lcf .costmod { left: 89.58%; top: 6.17%; right: auto; width: auto; aspect-ratio: auto; transform: translate(-50%, -46%); background: none; border: 0; box-shadow: none; border-radius: 0;
  font-family: var(--font-title); font-weight: 900; font-size: 15cqw; line-height: 1; color: #caff9c; -webkit-text-stroke: 1.1cqw #1f3a08; paint-order: stroke fill;
  text-shadow: 0 0 3cqw rgba(140, 255, 90, .95), 0 .5cqw 1.2cqw rgba(0, 0, 0, .7); z-index: 5; }
.card .face.lcf:has(.costmod) .cf-cost { opacity: 0; }

/* type line */
.lcf .cf-type { left: 6.58%; width: 86.98%; top: 56.61%; height: 3.08%; display: flex; align-items: center; justify-content: center; gap: 1.4cqw;
  font-size: 3.7cqw; line-height: 1; white-space: nowrap; color: #24160a; text-shadow: 0 0 1cqw rgba(255, 240, 200, .55); }
.lcf.cf-tiny .cf-type { font-size: 4.6cqw; top: 56.2%; height: 3.9%; }
.lcf .cf-rar { width: 2.6cqw; height: 2.6cqw; transform: rotate(45deg); border: .35cqw solid rgba(40, 20, 0, .7); background: #d9dde2; flex: none; box-shadow: 0 0 .8cqw rgba(0, 0, 0, .4); }
.lcf .cf-rar.r-Un-common { background: #62d37f; }
.lcf .cf-rar.r-Rare { background: #4fa3ff; }
.lcf .cf-rar.r-Ultra-Rare { background: linear-gradient(135deg, #e7b8ff, #9a4dff); }
.lcf .cf-rar.r-Legendary { background: linear-gradient(135deg, #fff1a8, #f0a91c); box-shadow: 0 0 1.4cqw rgba(255, 200, 60, .9); }

/* rules parchment: floats carve out the decorative gem (and the power badge on characters) */
.lcf .cf-rules { left: 12.67%; top: 62.62%; width: 74.67%; height: 31.9%; padding-top: 1.6cqw; overflow: hidden; text-align: center; font-size: var(--fs); line-height: 1.2; color: #2b1a0c; }
/* rectangular cut-outs at the bottom corners via stacked floats (a spacer float, then the cut-out float);
   cheaper to paint than shape-outside */
.lcf .cf-rules > i { display: block; }
.lcf .cf-rules .cx-gs { float: right; width: 0; height: 49%; }
.lcf .cf-rules .cx-g { float: right; clear: right; width: 12cqw; height: 51%; }
.lcf .cf-rules .cx-ps { float: left; width: 0; height: 61%; }
.lcf .cf-rules .cx-p { float: left; clear: left; width: 8.6cqw; height: 39%; }
.lcf.cf-tiny .cf-rules .cx-ps { height: 48%; } .lcf.cf-tiny .cf-rules .cx-p { width: 13cqw; height: 52%; }
.lcf.cf-tiny .cf-rules.cf-ch .cx-gs { height: 48%; } .lcf.cf-tiny .cf-rules.cf-ch .cx-g { width: 13cqw; height: 52%; }
.lcf .cf-t em { font-style: italic; font-weight: 700; }
.lcf .cf-t b { font-weight: 700; color: #3a1c04; }
.lcf .cf-f { margin-top: calc(var(--fs) * .45); padding-top: calc(var(--fs) * .45); font-size: var(--ffs); line-height: 1.18; font-style: italic; color: #6a4a2a;
  background: linear-gradient(90deg, transparent, rgba(106, 74, 42, .45), transparent) top center / 40% 1px no-repeat; }
.lcf.cf-tiny .cf-rules { padding-top: 2.2cqw; line-height: 1.14; }

/* power / health medallions (ui.js sets only their number + state classes) */
.card .face.lcf .stat { bottom: auto; top: 92.14%; width: 18.67%; transform: translate(-50%, -50%); font-size: 10.4cqw; border: 0; z-index: 3; line-height: 1;
  box-shadow: 0 0 0 1cqw #e7c46a, 0 0 0 1.5cqw rgba(70, 40, 0, .7), 0 1cqw 2.4cqw rgba(0, 0, 0, .65); text-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .8); }
.card .face.lcf .stat.pow { left: 10.67%; background: radial-gradient(circle at 35% 30%, #ff9a7a, #a51d15 72%); }
.card .face.lcf .stat.hp { left: 89.33%; right: auto; background: radial-gradient(circle at 35% 30%, #8fe7ff, #0f58a6 72%); }
.card .face.lcf .stat.hurt { background: radial-gradient(circle at 35% 30%, #ffb0b0, #7a1010 70%); }
.card .face.lcf .stat.bump { animation: lcfBump .45s cubic-bezier(.3, 1.8, .4, 1); }
@keyframes lcfBump { 40% { transform: translate(-50%, -50%) scale(1.4); } }
.card.tiny .face.lcf .stat { width: 24%; font-size: 14cqw; top: 90.6%; }
.card.tiny .face.lcf .stat.pow { left: 13.4%; } .card.tiny .face.lcf .stat.hp { left: 86.6%; }
.card .face.lcf .kws { top: 21%; left: 8%; } .card .face.lcf .inf { top: 21%; right: 8%; }

/* legendary sheen stays subtle on the parchment */
.card.foil .face.lcf .shine { z-index: 4; }

/* promo: holographic foil + stamp */
.lcf .cf-promo { right: 10%; top: 49.5%; padding: .9cqw 2.6cqw .7cqw; border-radius: 99px; font-family: var(--font-title); font-weight: 900; font-size: 3.6cqw; letter-spacing: .18em; color: #2a1040;
  background: linear-gradient(110deg, #ff9de2, #9ad8ff 30%, #fff4a8 55%, #b7ffcf 75%, #ff9de2); background-size: 200% 100%; animation: lcfHolo 5s linear infinite;
  box-shadow: 0 0 0 .4cqw rgba(255, 255, 255, .75), 0 .6cqw 1.6cqw rgba(0, 0, 0, .5); z-index: 4; }
.card.promo .shine { opacity: .65 !important; mix-blend-mode: color-dodge; z-index: 4;
  background: conic-gradient(from var(--ang, 0deg) at var(--sx, 50%) var(--sy, 40%), rgba(255, 120, 220, .35), rgba(120, 220, 255, .35), rgba(255, 250, 150, .35), rgba(140, 255, 190, .35), rgba(255, 120, 220, .35));
  animation: spinAng 6s linear infinite; }
.card.promo .shine::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 3cqw, rgba(255, 255, 255, .18) 3.4cqw, rgba(255, 255, 255, 0) 4cqw 7cqw); mix-blend-mode: overlay; }
.card.promo::after { content: ""; position: absolute; inset: -2px; border-radius: 6cqw; pointer-events: none; padding: 2px; opacity: .95;
  background: conic-gradient(from var(--ang, 0deg), #ff9de2, #9ad8ff, #fff4a8, #b7ffcf, #ff9de2);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinAng 4s linear infinite; }
@keyframes lcfHolo { to { background-position: -200% 0; } }
body.fx-low .card.promo .shine, body.fx-low .lcf .cf-promo, body.fx-low .card.promo::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .card.promo .shine, .lcf .cf-promo, .card.promo::after { animation: none; } }

/* promo unlock reveal (js/promos-ui.js) */
#promoReveal { position: fixed; inset: 0; z-index: 5000; display: none; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(90, 40, 160, .55), rgba(6, 3, 14, .92) 70%); }
#promoReveal.on { display: grid; animation: prIn .35s ease-out both; }
#promoReveal .pr-box { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; color: #fff4d6; }
#promoReveal .pr-eyebrow { font-family: var(--font-title); font-weight: 900; font-size: 30px; letter-spacing: .28em;
  background: linear-gradient(110deg, #ff9de2, #9ad8ff 30%, #fff4a8 55%, #b7ffcf 75%, #ff9de2); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lcfHolo 4s linear infinite; }
#promoReveal .pr-sub { font-size: 17px; color: #e4d9f7; max-width: 560px; line-height: 1.45; padding: 10px 18px; border-radius: 12px; background: rgba(10, 5, 22, .72); }
#promoReveal .pr-card { position: relative; width: 300px; height: 420px; animation: prCard .9s cubic-bezier(.2, .9, .3, 1.2) .15s both; }
#promoReveal .pr-card .card { position: relative; width: 300px; height: 420px; }
#promoReveal .pr-card::before { content: ""; position: absolute; inset: -60px; border-radius: 50%; background: conic-gradient(from var(--ang, 0deg), rgba(255, 157, 226, .0), rgba(255, 157, 226, .45), rgba(154, 216, 255, .45), rgba(255, 244, 168, .45), rgba(183, 255, 207, .45), rgba(255, 157, 226, .0));
  filter: blur(24px); animation: spinAng 6s linear infinite; z-index: -1; }
@keyframes prIn { from { opacity: 0; } }
@keyframes prCard { from { opacity: 0; transform: translateY(40px) rotateY(160deg) scale(.6); } }
body.mobile #promoReveal .pr-card, body.mobile #promoReveal .pr-card .card { width: 380px; height: 532px; }

/* promo full-art portraits (js/cardface.js promoFullFace): leader-style frame, name on the blank plate */
.lc.lc-promo { aspect-ratio: 2 / 3; background: #140c24; }
.lc.lc-promo .lp-tag { background: linear-gradient(110deg, #ff9de2, #9ad8ff 40%, #fff4a8 70%, #b7ffcf); color: #2a1040; font-family: var(--font-title); top: 3.4%; left: 5%; }
.lc.lc-promo .lp-plate { position: absolute; left: 38.5%; right: 4.3%; bottom: 4.9%; height: 9.2%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-family: var(--font-card); color: #2a1740; line-height: 1.05; padding: 0 3%; }
.lc.lc-promo .lp-plate b { font-weight: 700; font-size: 7.2cqw; white-space: nowrap; }
.lc.lc-promo .lp-plate em { font-size: 4.3cqw; font-style: italic; color: #5a3e70; white-space: nowrap; }
.lc.lc-promo .lp-shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .45;
  background: conic-gradient(from var(--ang, 0deg) at 50% 40%, rgba(255, 120, 220, .28), rgba(120, 220, 255, .28), rgba(255, 250, 150, .28), rgba(140, 255, 190, .28), rgba(255, 120, 220, .28));
  animation: spinAng 7s linear infinite; }
body.fx-low .lc.lc-promo .lp-shine { animation: none; }

/* unlock reveal: full art flips in, then the playable card slides beside it */
#promoReveal .pr-duo { display: flex; align-items: center; gap: 36px; perspective: 1400px; }
#promoReveal .pr-full { position: relative; width: 300px; height: 450px; animation: prFull 1s cubic-bezier(.2, .9, .3, 1.15) .1s both; }
#promoReveal .pr-full .lc { width: 300px; height: 450px; box-shadow: 0 30px 60px rgba(0, 0, 0, .7), 0 0 50px rgba(255, 157, 226, .45); }
#promoReveal .pr-duo .pr-card { width: 260px; height: 364px; animation: prSlide .8s cubic-bezier(.2, .9, .3, 1.1) 1s both; }
#promoReveal .pr-duo .pr-card .card { width: 260px; height: 364px; }
@keyframes prFull { from { opacity: 0; transform: rotateY(-180deg) scale(.7); } 60% { opacity: 1; } }
@keyframes prSlide { from { opacity: 0; transform: translateX(-140px) scale(.85); } }
body.mobile #promoReveal .pr-full, body.mobile #promoReveal .pr-full .lc { width: 360px; height: 540px; }
body.mobile #promoReveal .pr-duo .pr-card, body.mobile #promoReveal .pr-duo .pr-card .card { width: 320px; height: 448px; }

/* inspect modal: Card / Full Art toggle for promos */
.ci-stage .pr-toggle { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); z-index: 3; display: flex; gap: 4px; padding: 4px; border-radius: 99px;
  background: rgba(20, 10, 40, .85); border: 1px solid rgba(255, 200, 255, .3); }
.ci-stage .pr-toggle button { appearance: none; border: 0; font: 800 13px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #d9c8f0; background: none;
  padding: 8px 16px; border-radius: 99px; cursor: pointer; }
.ci-stage .pr-toggle button.on { color: #2a1040; background: linear-gradient(110deg, #ff9de2, #9ad8ff 40%, #fff4a8 70%, #b7ffcf); }
.ci-stage .big .lc.lc-promo { position: absolute; left: 50%; top: 0; height: 100%; width: auto; transform: translateX(-50%); display: none; }
.ci-stage.pr-full .big .lc.lc-promo { display: block; animation: prFade .35s ease-out; }
.ci-stage.pr-full .big .card { visibility: hidden; }
@keyframes prFade { from { opacity: 0; transform: translateX(-50%) scale(.96); } }
body.mobile .ci-stage .pr-toggle button { font-size: 17px; padding: 10px 20px; }