/* ============================================================================
 * immortalcard.css — LIVE-RENDERED Immortal card (no baking).
 * The ART bakes in: ornate gem frame + affinity glyph + black bottom panel.
 * This overlays live data: HP (top-right), name, attacks, ability.
 * Fonts: CinzelBake (HP + name) + plain sans (attacks/ability). Sizes in cqw.
 * ========================================================================== */
@font-face{font-family:'CinzelBake';src:url('/fonts/Cinzel-bake.ttf') format('truetype');font-weight:100 900;font-display:block;}
@font-face{font-family:'DejaVuSerifBake';src:url('/fonts/DejaVuSerif.ttf') format('truetype');font-display:block;}

/* .im-fit fills the slot (grid tile OR lightbox) and keeps the card's aspect; the .imcard inside is
   composited ONCE at a fixed 800px width and scaled to fit via transform. So both surfaces show the
   exact same composition — only the scale differs (no per-size re-layout, no sub-pixel drift). */
.im-fit{position:relative;display:block;width:100%;aspect-ratio:2871/4000;overflow:hidden;}
.im-fit>.imcard{position:absolute;top:0;left:0;width:800px;transform-origin:top left;transform:scale(var(--im-scale,1));}
.imcard{position:relative;container-type:inline-size;aspect-ratio:2871/4000;overflow:visible;
  font-family:'Inter','Segoe UI',system-ui,'Helvetica Neue',Arial,sans-serif;color:#f2eede;user-select:none;}
  /* NO border-radius: the art already has rounded TRANSPARENT corners baked in (same as Major Arcana) — rounding here double-rounds/clips the frame */
.imcard .im-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* scrim so name/attacks read; stops before the baked black panel + frame */
/* NAMEPLATE — a gold-rimmed banner with pointed ends (echoes the frame's faceted/diamond motif), auto-sized to the name */
.imcard .im-namewrap{position:absolute;left:50%;top:var(--name-top,58.2%);transform:translateX(-50%);white-space:nowrap;
  padding:1.15cqw 8.5cqw;   /* wide h-padding leaves room for the pointed ends */
  background:linear-gradient(180deg,#f6de92 0%,#e0b451 30%,#b07f26 62%,#7e5715 100%);   /* gold rim */
  clip-path:polygon(0 50%, 4.4cqw 0, calc(100% - 4.4cqw) 0, 100% 50%, calc(100% - 4.4cqw) 100%, 4.4cqw 100%);
  filter:drop-shadow(0 .55cqw 1.1cqw rgba(0,0,0,.6));}
.imcard .im-namewrap::before{content:'';position:absolute;inset:.34cqw;   /* dark face inset -> the gold shows as the rim */
  background:linear-gradient(180deg,#181120 0%,#0b0714 100%);
  clip-path:polygon(0 50%, 4.4cqw 0, calc(100% - 4.4cqw) 0, 100% 50%, calc(100% - 4.4cqw) 100%, 4.4cqw 100%);}
/* BAKED mode: the art already has a nameplate — strip the CSS banner, just seat the name text in it */
.imcard.im-baked{--name-top:66.8%;--atks-top:77.1%;--abil-top:85.9%;}   /* --name-top is now the name's CENTER (see transform below) = the baked plate's center */
.imcard.im-baked .im-namewrap{background:none;padding:0;clip-path:none;filter:none;transform:translate(-50%,-50%);}   /* center the name on --name-top so it sits dead-center in the plate, not anchored by its top edge */
.imcard.im-baked .im-namewrap::before{display:none;}
/* baked plates are tall -> compact the attacks + ability so they fit cleanly below.
   Rows size to CONTENT (tight leading) for an even, tight rhythm. Cost icons are enlarged
   per suit with a NEGATIVE vertical margin so a bigger glyph doesn't grow the row height. */
.imcard.im-baked .im-atks{gap:.1cqw;}
.imcard.im-baked .im-atk{min-height:0;line-height:1.04;}
.imcard.im-baked .im-cost{flex-basis:13.5cqw;}
.imcard.im-baked .im-cost img{height:4.8cqw;margin-top:-.3cqw;margin-bottom:-.3cqw;}
/* per-suit: daggers + embers glyphs read small -> pump them up hard; spoils + tides a touch */
.imcard.im-baked[data-aff="daggers"] .im-cost img{height:6.8cqw;margin-top:-1.2cqw;margin-bottom:-1.2cqw;}
.imcard.im-baked[data-aff="embers"]  .im-cost img{height:6.3cqw;margin-top:-1cqw;margin-bottom:-1cqw;}
.imcard.im-baked[data-aff="spoils"]  .im-cost img{height:5.1cqw;margin-top:-.45cqw;margin-bottom:-.45cqw;}
.imcard.im-baked[data-aff="tides"]   .im-cost img{height:5.1cqw;margin-top:-.45cqw;margin-bottom:-.45cqw;}
.imcard.im-baked .im-nm{font-size:3.9cqw;letter-spacing:.02em;}
.imcard.im-baked .im-dmg{font-size:4.5cqw;}
.imcard.im-baked .im-ability{font-size:3.5cqw;line-height:1.28;}

/* HP — CinzelBake, white, top-right, strong drop shadow */
.imcard .im-hp{position:absolute;top:var(--hp-top,8.0%);right:var(--hp-right,11.6%);font-family:'CinzelBake',serif;font-weight:900;font-size:14.0cqw;line-height:1;
  background:linear-gradient(180deg,#fff8e6 0%,#f4dc8e 42%,#d0a03c 72%,#98701e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;   /* gilded HP — matches the project gold */
  filter:drop-shadow(0 .55cqw .95cqw rgba(0,0,0,.9)) drop-shadow(0 .2cqw .32cqw rgba(0,0,0,.88));}
/* LABEL VARIANT (LOCKED standard for the suit-icon-over-nameplate art): "HP 46" in the attack serif,
   seated just above the nameplate on the right, balancing the centered suit glyph. A card opts in with
   just `hpLabel:true`; the position/size below are the locked defaults, still nudged per-art via --hp-top/--hp-right. */
.imcard .im-hp.im-hp-txt{font-family:'DejaVuSerifBake',serif;font-weight:800;font-size:8.4cqw;
  top:var(--hp-top,53.5%);right:var(--hp-right,13.5%);
  transform:scale(1.265);transform-origin:100% 100%;   /* +15% then +10%, anchored at the bottom-right point so it grows up/left and stays seated on the plate */
  background-image:linear-gradient(180deg,#ffffff 0%,#eef1f5 36%,#c3ccd6 68%,#93a0af 100%);   /* white -> silver-gray: reads far better than gold over the busy art */
  filter:drop-shadow(0 .5cqw 1.05cqw rgba(0,0,0,.95)) drop-shadow(0 .22cqw .5cqw rgba(0,0,0,.92)) drop-shadow(0 0 .28cqw rgba(0,0,0,.85));}   /* heavier shadow for legibility */
.imcard .im-hp .im-hp-k{font-size:.5em;letter-spacing:.05em;margin-right:.3em;vertical-align:.14em;}

/* NAME — CinzelBake, gold gradient (near-white top -> gold). The dark outline is a SEPARATE stacked copy of
   the text (`.im-name-b`, dark + thick stroke) sitting UNDER the gold copy (`.im-name-f`) — two real spans,
   NOT a stroke on the gold and NOT a ::before (background-clip:text puts the gold in the background layer,
   which a negative-z pseudo would paint over). Gold at z1, outline at z0 -> only the outline's edges show. */
.imcard .im-name{position:relative;z-index:1;display:inline-block;
  font-family:'CinzelBake',serif;font-weight:800;font-size:8.4cqw;line-height:1;letter-spacing:-.004em;text-align:center;
  filter:drop-shadow(0 .55cqw .8cqw rgba(0,0,0,.9)) drop-shadow(0 .2cqw .35cqw rgba(0,0,0,.85));}   /* soft shadow behind, for depth off the plate */
.imcard .im-name-f,.imcard .im-name-b{display:inline-block;line-height:1;}
.imcard .im-name-f{position:relative;z-index:1;   /* the visible gold, on top */
  background:linear-gradient(180deg,#fffef8 0%,#fbe7ac 32%,#e8c165 62%,#c6912f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.imcard .im-name-b{position:absolute;left:0;top:0;z-index:0;   /* dark twin behind -> its stroked edges are the outline */
  color:#141110;-webkit-text-fill-color:#141110;-webkit-text-stroke:.7cqw #141110;}

/* ATTACKS — plain sans; one row each: [cost icons] NAME .... DMG(gold) */
.imcard .im-atks{position:absolute;top:var(--atks-top,67.8%);left:13%;right:13%;display:flex;flex-direction:column;gap:1.8cqw;font-family:'DejaVuSerifBake',serif;}
.imcard .im-atk{display:flex;align-items:center;gap:2.4cqw;min-height:8cqw;}
.imcard .im-cost{flex:0 0 16.5cqw;min-width:0;display:flex;align-items:center;gap:.3cqw;}   /* min-width:0 stops the box growing to fit wide icons -> attack names stay locked on one left edge */
.imcard .im-cost img{height:8cqw;width:auto;filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.7));}   /* height-sized + auto width -> box hugs each glyph, so narrow icons (daggers) pack tight */
.imcard .im-free{font-family:'DejaVuSerifBake',serif;font-size:2.9cqw;letter-spacing:.09em;text-transform:uppercase;color:#9a8a5e;text-shadow:0 .15cqw .35cqw rgba(0,0,0,.8);margin-left:.9cqw;}   /* "FREE" label for no-cost attacks (instead of a blank gutter); nudged to sit under the paid-icon column */
.imcard.im-baked .im-free{font-size:2.95cqw;}
.imcard .im-nm{flex:1 1 auto;font-weight:700;font-size:4.4cqw;letter-spacing:.04em;text-transform:uppercase;color:#eae7dd;
  white-space:nowrap;text-shadow:0 .2cqw .5cqw rgba(0,0,0,.85);}
.imcard .im-dmg{flex:0 0 auto;font-weight:800;font-size:5.4cqw;
  background:linear-gradient(180deg,#fff8e6 0%,#f4dc8e 42%,#d0a03c 72%,#98701e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;   /* gilded to match the HP metal */
  filter:drop-shadow(0 .2cqw .45cqw rgba(0,0,0,.85));}

/* ABILITY — magenta label + white desc, left edge on the cost-icon column */
.imcard .im-ability{position:absolute;left:14%;right:13%;top:var(--abil-top,82.5%);font-size:4.1cqw;line-height:1.3;color:#eee9dd;
  font-family:'DejaVuSerifBake',serif;text-align:left;text-wrap:pretty;text-shadow:0 .2cqw .5cqw rgba(0,0,0,.85);}
.imcard .im-ability b{font-weight:800;letter-spacing:.06em;
  color:#ff86dc;   /* LIGHT bright pink-magenta, flat (no dark gradient stop) so it stays readable on the black panel */
  text-shadow:0 0 .5cqw rgba(0,0,0,.55);}